update z-index use

ts_web/elements/00zindex.ts

@@ -0,0 +1,59 @@
+/**
+ * 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,  // Below modals but above fixed elements
+    modal: 2999,     // Below dropdowns on modals
+    contextMenu: 3999, // Below critical overlays
+  },
+
+  // Interactive overlays
+  overlay: {
+    dropdown: 2000,     // Dropdowns and select menus
+    modal: 3000,        // Modal dialogs
+    contextMenu: 4000,  // Context menus and tooltips
+    toast: 5000,        // Toast notifications (highest priority)
+  },
+
+  // Special cases for nested elements
+  modalDropdown: 3500,    // Dropdowns inside modals
+  wysiwygMenus: 4500,     // Editor formatting menus
+} 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-modal': zIndexLayers.overlay.modal,
+  'dees-windowlayer': zIndexLayers.overlay.dropdown,
+  'dees-contextmenu': zIndexLayers.overlay.contextMenu,
+  'dees-toast': zIndexLayers.overlay.toast,
+  'dees-appui-mainmenu': zIndexLayers.fixed.appBar,
+  'dees-mobilenavigation': zIndexLayers.fixed.mobileNav,
+  'dees-slash-menu': zIndexLayers.wysiwygMenus,
+  'dees-formatting-menu': zIndexLayers.wysiwygMenus,
+} as const;