initial

ts_web/elements/00zindex.ts

@@ -0,0 +1,50 @@
+/**
+ * Central z-index management for consistent stacking order
+ * Higher numbers appear on top of lower numbers
+ */
+
+export const zIndexLayers = {
+  // Base layer: Regular content
+  base: {
+    content: 'auto',
+    inputElements: 1,
+  },
+
+  // Fixed UI elements
+  fixed: {
+    appBar: 10,
+    sideMenu: 10,
+    mobileNav: 250,
+  },
+
+  // Overlay backdrops (semi-transparent backgrounds)
+  backdrop: {
+    dropdown: 1999,
+    modal: 2999,
+    contextMenu: 3999,
+    screensaver: 9998,
+  },
+
+  // Interactive overlays
+  overlay: {
+    dropdown: 2000,
+    modal: 3000,
+    contextMenu: 4000,
+    toast: 5000,
+    screensaver: 9999, // Screensaver on top of everything
+  },
+} as const;
+
+// Helper function to get z-index value
+export function getZIndex(category: keyof typeof zIndexLayers, subcategory?: string): number | string {
+  const categoryObj = zIndexLayers[category];
+  if (typeof categoryObj === 'object' && subcategory) {
+    return categoryObj[subcategory as keyof typeof categoryObj] || 'auto';
+  }
+  return typeof categoryObj === 'number' ? categoryObj : 'auto';
+}
+
+// Z-index assignments for components
+export const componentZIndex = {
+  'dees-screensaver': zIndexLayers.overlay.screensaver,
+} as const;