catalog/ts_web/elements/00zindex.ts

/**
 * 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 = {
  'eco-screensaver': zIndexLayers.overlay.screensaver,
} as const;