@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/navigation/AppBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppBar.js","sources":["../../../../src/react/core/navigation/AppBar.tsx"],"sourcesContent":["/**\n * @zendir/ui - AppBar Component\n * \n * Enterprise-grade application bar with integrated theme controls, \n * compact mode toggle, and display settings management.\n * \n * Features:\n * - Customizable branding (logo, name, domain, version)\n * - Dark/light mode toggle\n * - Theme variant selector\n * - Color picker (accent + glass tint)\n * - Compact mode toggle (affects all cards globally)\n * - Integrates with DisplaySettingsProvider\n * - Responsive design\n * - AstroUXDS compliant\n * \n * @example\n * ```tsx\n * import { AppBar, ThemeProvider, DisplaySettingsProvider } from '@zendir/ui';\n * \n * <ThemeProvider>\n *   <DisplaySettingsProvider>\n *     <AppBar\n *       appName=\"Mission Control\"\n *       appDomain=\"NASA\"\n *       appVersion=\"1.0.0\"\n *       showThemeControls\n *       showCompactToggle\n *     />\n *     <App />\n *   </DisplaySettingsProvider>\n * </ThemeProvider>\n * ```\n */\n\nimport React, { memo, useMemo, useState, useRef, useEffect, type ReactNode } from 'react';\nimport { useTheme, type ThemeVariant, type ThemeMode } from '../../theme';\nimport { useDisplaySettingsOptional } from '../../context/DisplaySettingsContext';\nimport { classNames, safeAccentText } from '../../utils';\nimport { AstroIcon } from '../display/AstroIcon';\nimport { ColorPickerPanel } from '../widgets/ColorPickerPanel';\nimport { Tooltip } from '../overlays/Tooltip';\nimport { useBreakpoint } from '../layout/useBreakpoint';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface AppBarBranding {\n  /** Logo image URL (takes precedence over text) */\n  logoUrl?: string;\n  /** Logo as React node (takes precedence over logoUrl) */\n  logo?: ReactNode;\n  /** Logo alt text for accessibility */\n  logoAlt?: string;\n  /** Logo height in pixels (default: 28) */\n  logoHeight?: number;\n  /** Link URL when clicking on branding */\n  href?: string;\n}\n\nexport interface AppBarProps {\n  /** Application name */\n  appName?: string;\n  /** Application domain/organization (shown above app name) */\n  appDomain?: string;\n  /** Application version (shown smaller) */\n  appVersion?: string;\n  /** Logo/branding configuration */\n  branding?: AppBarBranding;\n  \n  // Control visibility\n  /** Show theme controls (mode toggle, theme selector, color picker) */\n  showThemeControls?: boolean;\n  /** Show compact mode toggle */\n  showCompactToggle?: boolean;\n  /** Show color picker (only visible for transparent themes) */\n  showColorPicker?: boolean;\n  /** Show theme variant selector */\n  showThemeSelector?: boolean;\n  /** Show only mode toggle (hide other theme controls) */\n  showModeOnly?: boolean;\n  /** Use compact dropdown for theme controls instead of buttons */\n  compactThemeControls?: boolean;\n  \n  // Default values (for when controls are hidden)\n  /** Default theme to apply if not already set */\n  defaultTheme?: ThemeVariant;\n  /** Default mode to apply if not already set */\n  defaultMode?: ThemeMode;\n  /** Default compact mode */\n  defaultCompactMode?: boolean;\n  \n  // Slots\n  /** Left slot content (after branding, or only content when showBranding is false) */\n  leftSlot?: ReactNode;\n  /** Center slot content */\n  centerSlot?: ReactNode;\n  /** Right slot content (before theme controls) */\n  rightSlot?: ReactNode;\n  /** Optional title shown above right slot (e.g. \"Data\" for metrics/refresh section) */\n  rightSectionTitle?: string;\n  \n  // Layout (operator / mission-control style)\n  /** Show branding block (app name, logo). Set false for control-only bars. */\n  showBranding?: boolean;\n  /** Let center slot grow to fill space and stay centered (e.g. simulation controls). */\n  centerGrow?: boolean;\n  /** Bar variant: default (52px) or dense (44px min height, tighter padding/gap). */\n  variant?: 'default' | 'dense';\n  \n  // Callbacks\n  /** Callback when theme changes */\n  onThemeChange?: (theme: ThemeVariant) => void;\n  /** Callback when mode changes */\n  onModeChange?: (mode: ThemeMode) => void;\n  /** Callback when compact mode changes */\n  onCompactModeChange?: (compact: boolean) => void;\n  \n  // Styling\n  /** Custom className */\n  className?: string;\n  /** Custom height (default: 52) */\n  height?: number;\n  /** Sticky positioning */\n  sticky?: boolean;\n}\n\n// =============================================================================\n// Theme Variants for Selector\n// =============================================================================\n\nconst THEME_VARIANTS: { key: ThemeVariant; label: string; tooltip: string }[] = [\n  { key: 'hybrid', label: 'Zen (Hybrid)', tooltip: 'Default theme - Astro status colors with purple accents' },\n  { key: 'purple-hue', label: 'Zen (Purple Hue)', tooltip: 'Purple accent theme - vibrant purple tones' },\n  { key: 'astro', label: 'Astro', tooltip: 'Astro UX Design System theme - dark blue tones' },\n  { key: 'transparent', label: 'Glass', tooltip: 'Glassmorphism theme - transparent with blur effects' },\n  { key: 'transparent-bold', label: 'Bold', tooltip: 'Bold glass theme - stronger transparency effects' },\n  { key: 'transparent-minimal', label: 'Minimal', tooltip: 'Minimal glass theme - ultra-subtle borders, clean surfaces' },\n];\n\n// =============================================================================\n// Mode Toggle Component\n// =============================================================================\n\ninterface ModeToggleProps {\n  mode: ThemeMode;\n  onToggle: () => void;\n  tokens: any;\n}\n\nconst ModeToggle = memo(function ModeToggle({ mode, onToggle, tokens }: ModeToggleProps) {\n  const isDark = mode === 'dark';\n  const tooltipText = isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode';\n  \n  return (\n    <Tooltip content={tooltipText} placement=\"bottom\">\n      <button\n        onClick={onToggle}\n        aria-label={tooltipText}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 32,\n          height: 32,\n          padding: 0,\n          border: 'none',\n          borderRadius: tokens.borderRadius.md,\n          backgroundColor: 'rgba(255,255,255,0.08)',\n          color: tokens.colors.text.primary,\n          cursor: 'pointer',\n          transition: 'all 0.15s ease',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.15)';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.08)';\n        }}\n      >\n        <AstroIcon \n          name={isDark ? 'brightness-3' : 'brightness-high'} \n          size={16} \n          color={tokens.colors.text.primary}\n        />\n      </button>\n    </Tooltip>\n  );\n});\n\n// =============================================================================\n// Compact Mode Toggle Component\n// =============================================================================\n\ninterface CompactToggleProps {\n  isCompact: boolean;\n  onToggle: () => void;\n  tokens: any;\n}\n\nconst CompactToggle = memo(function CompactToggle({ isCompact, onToggle, tokens }: CompactToggleProps) {\n  const tooltipText = isCompact ? 'Switch to Expanded View' : 'Switch to Compact View';\n  \n  return (\n    <Tooltip content={tooltipText} placement=\"bottom\">\n      <button\n        onClick={onToggle}\n        aria-label={tooltipText}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          width: 32,\n          height: 32,\n          padding: 0,\n          border: 'none',\n          borderRadius: tokens.borderRadius.md,\n          backgroundColor: isCompact ? 'rgba(139, 92, 246, 0.25)' : 'rgba(255,255,255,0.08)',\n          color: isCompact ? '#a78bfa' : tokens.colors.text.primary,\n          cursor: 'pointer',\n          transition: 'all 0.15s ease',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = isCompact \n            ? 'rgba(139, 92, 246, 0.35)' \n            : 'rgba(255,255,255,0.15)';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = isCompact \n            ? 'rgba(139, 92, 246, 0.25)' \n            : 'rgba(255,255,255,0.08)';\n        }}\n      >\n        <AstroIcon \n          name={isCompact ? 'view-comfy' : 'view-module'} \n          size={16} \n          color={isCompact ? '#a78bfa' : tokens.colors.text.primary}\n        />\n      </button>\n    </Tooltip>\n  );\n});\n\n// =============================================================================\n// Theme Selector Component\n// =============================================================================\n\ninterface ThemeSelectorProps {\n  currentTheme: ThemeVariant;\n  onSelect: (theme: ThemeVariant) => void;\n  tokens: any;\n}\n\nconst ThemeSelector = memo(function ThemeSelector({ currentTheme, onSelect, tokens }: ThemeSelectorProps) {\n  // WCAG AA: compute a safe background for selected theme buttons (white text)\n  const safeAccentBg = useMemo(() => {\n    const hex = tokens.colors.accent.primary.replace('#', '');\n    if (hex.length < 6) return tokens.colors.accent.primary;\n    const toLinear = (c: number) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const r = parseInt(hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.slice(4, 6), 16) / 255;\n    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    if ((1.05 / (L + 0.05)) >= 4.5) return tokens.colors.accent.primary;\n    const factor = 0.88;\n    const dr = Math.min(255, Math.round(r * 255 * factor));\n    const dg = Math.min(255, Math.round(g * 255 * factor));\n    const db = Math.min(255, Math.round(b * 255 * factor));\n    return `#${dr.toString(16).padStart(2, '0')}${dg.toString(16).padStart(2, '0')}${db.toString(16).padStart(2, '0')}`;\n  }, [tokens.colors.accent.primary]);\n\n  // Group themes for better organization\n  const coreThemes = THEME_VARIANTS.filter(t => !t.key.startsWith('transparent'));\n  const glassThemes = THEME_VARIANTS.filter(t => t.key.startsWith('transparent'));\n  \n  return (\n    <div \n      style={{ \n        display: 'flex', \n        alignItems: 'center', \n        gap: 4,\n        padding: 2,\n        backgroundColor: 'rgba(255,255,255,0.05)',\n        borderRadius: tokens.borderRadius.md,\n      }}\n      role=\"group\"\n      aria-label=\"Theme selector\"\n    >\n      {/* Core themes */}\n      {coreThemes.map(({ key, label, tooltip }) => (\n        <Tooltip key={key} content={tooltip} placement=\"bottom\">\n          <button\n            onClick={() => onSelect(key)}\n            aria-label={`Select ${label} theme`}\n            style={{\n              padding: '4px 10px',\n              border: 'none',\n              borderRadius: tokens.borderRadius.sm,\n              backgroundColor: currentTheme === key \n                ? safeAccentBg \n                : 'transparent',\n              color: currentTheme === key \n                ? '#ffffff' \n                : tokens.colors.text.secondary,\n              fontSize: '0.6875rem', // 11px in rem\n              fontWeight: currentTheme === key ? 500 : 400, // AstroUXDS: 500 (medium) not 600\n              cursor: 'pointer',\n              transition: 'all 0.15s ease',\n              whiteSpace: 'nowrap',\n            }}\n            onMouseEnter={(e) => {\n              if (currentTheme !== key) {\n                e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';\n              }\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = currentTheme === key \n                ? safeAccentBg \n                : 'transparent';\n            }}\n          >\n            {label}\n          </button>\n        </Tooltip>\n      ))}\n      \n      {/* Separator */}\n      <div style={{ width: 1, height: 16, backgroundColor: 'rgba(255,255,255,0.15)', margin: '0 2px' }} />\n      \n      {/* Glass themes */}\n      {glassThemes.map(({ key, label, tooltip }) => (\n        <Tooltip key={key} content={tooltip} placement=\"bottom\">\n          <button\n            onClick={() => onSelect(key)}\n            aria-label={`Select ${label} theme`}\n            style={{\n              padding: '4px 10px',\n              border: 'none',\n              borderRadius: tokens.borderRadius.sm,\n              backgroundColor: currentTheme === key \n                ? safeAccentBg \n                : 'transparent',\n              color: currentTheme === key \n                ? '#ffffff' \n                : tokens.colors.text.secondary,\n              fontSize: '0.6875rem', // 11px in rem\n              fontWeight: currentTheme === key ? 500 : 400, // AstroUXDS: 500 (medium) not 600\n              cursor: 'pointer',\n              transition: 'all 0.15s ease',\n              whiteSpace: 'nowrap',\n            }}\n            onMouseEnter={(e) => {\n              if (currentTheme !== key) {\n                e.currentTarget.style.backgroundColor = 'rgba(255,255,255,0.1)';\n              }\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor = currentTheme === key \n                ? safeAccentBg \n                : 'transparent';\n            }}\n          >\n            {label}\n          </button>\n        </Tooltip>\n      ))}\n    </div>\n  );\n});\n\n// =============================================================================\n// Accent Borders Toggle Component\n// =============================================================================\n\ninterface AccentBordersToggleProps {\n  enabled: boolean;\n  onToggle: () => void;\n  tokens: any;\n}\n\nconst AccentBordersToggle = memo(function AccentBordersToggle({ enabled, onToggle, tokens }: AccentBordersToggleProps) {\n  return (\n    <Tooltip content={enabled ? 'Accent borders enabled - Click to disable' : 'Accent borders disabled - Click to enable'} placement=\"bottom\">\n      <button\n        onClick={onToggle}\n        aria-label={enabled ? 'Disable accent borders' : 'Enable accent borders'}\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          gap: 4,\n          padding: '4px 8px',\n          border: 'none',\n          borderRadius: tokens.borderRadius.sm,\n          backgroundColor: enabled \n            ? `${tokens.colors.accent.primary}30`\n            : 'rgba(255,255,255,0.05)',\n          color: enabled \n            ? safeAccentText(tokens.colors.accent.primary) \n            : tokens.colors.text.tertiary,\n          fontSize: '0.625rem', // 10px in rem\n          fontWeight: 500,\n          cursor: 'pointer',\n          transition: 'all 0.15s ease',\n          whiteSpace: 'nowrap',\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = enabled \n            ? `${tokens.colors.accent.primary}40`\n            : 'rgba(255,255,255,0.1)';\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = enabled \n            ? `${tokens.colors.accent.primary}30`\n            : 'rgba(255,255,255,0.05)';\n        }}\n      >\n        <span style={{ \n          width: 8, \n          height: 8, \n          borderRadius: 2,\n          border: `2px solid ${enabled ? tokens.colors.accent.primary : tokens.colors.text.tertiary}`,\n          backgroundColor: 'transparent',\n        }} />\n        <span>Borders</span>\n      </button>\n    </Tooltip>\n  );\n});\n\n// =============================================================================\n// Theme Controls Dropdown (Compact)\n// =============================================================================\n\ninterface ThemeControlsDropdownProps {\n  currentTheme: ThemeVariant;\n  mode: ThemeMode;\n  onThemeSelect: (theme: ThemeVariant) => void;\n  onModeToggle: () => void;\n  accentBordersEnabled?: boolean;\n  onAccentBordersToggle?: () => void;\n  showAccentBorders?: boolean;\n  tokens: any;\n}\n\nconst ThemeControlsDropdown = memo(function ThemeControlsDropdown({\n  currentTheme,\n  mode,\n  onThemeSelect,\n  onModeToggle,\n  accentBordersEnabled = true,\n  onAccentBordersToggle,\n  showAccentBorders = false,\n  tokens,\n}: ThemeControlsDropdownProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  \n  // Close on click outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    \n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [isOpen]);\n  \n  // Get current theme label\n  const currentLabel = THEME_VARIANTS.find(t => t.key === currentTheme)?.label || 'Theme';\n  \n  // Group themes\n  const coreThemes = THEME_VARIANTS.filter(t => !t.key.startsWith('transparent'));\n  const glassThemes = THEME_VARIANTS.filter(t => t.key.startsWith('transparent'));\n  \n  return (\n    <div ref={dropdownRef} style={{ position: 'relative' }}>\n      {/* Trigger Button */}\n      <Tooltip content=\"Theme settings\" placement=\"bottom\">\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          aria-label=\"Theme settings\"\n          aria-expanded={isOpen}\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 6,\n            padding: '6px 10px',\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md,\n            backgroundColor: isOpen ? tokens.colors.background.elevated : 'transparent',\n            color: tokens.colors.text.secondary,\n            fontSize: '0.6875rem', // 11px in rem\n            fontWeight: 500,\n            cursor: 'pointer',\n            transition: 'all 0.15s ease',\n          }}\n          onMouseEnter={(e) => {\n            if (!isOpen) {\n              e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;\n            }\n          }}\n          onMouseLeave={(e) => {\n            if (!isOpen) {\n              e.currentTarget.style.backgroundColor = 'transparent';\n            }\n          }}\n        >\n          <AstroIcon name=\"settings\" size={14} color={tokens.colors.text.secondary} />\n          <span>{currentLabel}</span>\n          <AstroIcon \n            name={isOpen ? 'arrow-up' : 'arrow-down'} \n            size={10} \n            color={tokens.colors.text.tertiary} \n          />\n        </button>\n      </Tooltip>\n      \n      {/* Dropdown Panel */}\n      {isOpen && (\n        <div\n          style={{\n            position: 'absolute',\n            top: '100%',\n            right: 0,\n            marginTop: 4,\n            minWidth: 220,\n            padding: tokens.spacing.sm,\n            backgroundColor: tokens.colors.background.surface,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.lg,\n            boxShadow: '0 8px 32px rgba(0,0,0,0.3)',\n            zIndex: 1000,\n          }}\n        >\n          {/* Theme Section */}\n          <div style={{ marginBottom: tokens.spacing.sm }}>\n            <div style={{ \n              fontSize: '0.625rem', // 10px in rem \n              color: tokens.colors.text.muted, \n              textTransform: 'uppercase',\n              letterSpacing: '0.05em',\n              marginBottom: 8,\n              paddingLeft: 4,\n            }}>\n              Theme\n            </div>\n            \n            {/* Core Themes */}\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n              {coreThemes.map(({ key, label }) => (\n                <button\n                  key={key}\n                  onClick={() => {\n                    onThemeSelect(key);\n                    setIsOpen(false);\n                  }}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 8,\n                    padding: '8px 12px',\n                    border: 'none',\n                    borderRadius: tokens.borderRadius.sm,\n                    backgroundColor: currentTheme === key \n                      ? `${tokens.colors.accent.primary}20`\n                      : 'transparent',\n                    color: currentTheme === key \n                      ? tokens.colors.accent.primary\n                      : tokens.colors.text.primary,\n                    fontSize: '0.75rem', // 12px in rem\n                    fontWeight: currentTheme === key ? 600 : 400,\n                    cursor: 'pointer',\n                    textAlign: 'left',\n                    transition: 'all 0.1s ease',\n                  }}\n                  onMouseEnter={(e) => {\n                    if (currentTheme !== key) {\n                      e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = currentTheme === key \n                      ? `${tokens.colors.accent.primary}20`\n                      : 'transparent';\n                  }}\n                >\n                  {currentTheme === key && (\n                    <AstroIcon name=\"check\" size={12} color={tokens.colors.accent.primary} />\n                  )}\n                  <span style={{ marginLeft: currentTheme === key ? 0 : 20 }}>{label}</span>\n                </button>\n              ))}\n            </div>\n            \n            {/* Separator */}\n            <div style={{ \n              height: 1, \n              backgroundColor: tokens.colors.border.muted, \n              margin: `${tokens.spacing.xs} 0`,\n            }} />\n            \n            {/* Glass Themes */}\n            <div style={{ \n              fontSize: '0.625rem', // 10px in rem \n              color: tokens.colors.text.muted, \n              textTransform: 'uppercase',\n              letterSpacing: '0.05em',\n              marginBottom: 6,\n              paddingLeft: 4,\n            }}>\n              Glass\n            </div>\n            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n              {glassThemes.map(({ key, label }) => (\n                <button\n                  key={key}\n                  onClick={() => {\n                    onThemeSelect(key);\n                    setIsOpen(false);\n                  }}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 8,\n                    padding: '8px 12px',\n                    border: 'none',\n                    borderRadius: tokens.borderRadius.sm,\n                    backgroundColor: currentTheme === key \n                      ? `${tokens.colors.accent.primary}20`\n                      : 'transparent',\n                    color: currentTheme === key \n                      ? tokens.colors.accent.primary\n                      : tokens.colors.text.primary,\n                    fontSize: '0.75rem', // 12px in rem\n                    fontWeight: currentTheme === key ? 600 : 400,\n                    cursor: 'pointer',\n                    textAlign: 'left',\n                    transition: 'all 0.1s ease',\n                  }}\n                  onMouseEnter={(e) => {\n                    if (currentTheme !== key) {\n                      e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor = currentTheme === key \n                      ? `${tokens.colors.accent.primary}20`\n                      : 'transparent';\n                  }}\n                >\n                  {currentTheme === key && (\n                    <AstroIcon name=\"check\" size={12} color={tokens.colors.accent.primary} />\n                  )}\n                  <span style={{ marginLeft: currentTheme === key ? 0 : 20 }}>{label}</span>\n                </button>\n              ))}\n            </div>\n          </div>\n          \n          {/* Separator */}\n          <div style={{ \n            height: 1, \n            backgroundColor: tokens.colors.border.muted, \n            margin: `${tokens.spacing.sm} 0`,\n          }} />\n          \n          {/* Options Section */}\n          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>\n            {/* Mode Toggle */}\n            <button\n              onClick={() => {\n                onModeToggle();\n              }}\n              style={{\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'space-between',\n                padding: '8px 12px',\n                border: 'none',\n                borderRadius: tokens.borderRadius.sm,\n                backgroundColor: 'transparent',\n                color: tokens.colors.text.primary,\n                fontSize: '0.75rem', // 12px in rem\n                cursor: 'pointer',\n                transition: 'all 0.1s ease',\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.backgroundColor = 'transparent';\n              }}\n            >\n              <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n                <AstroIcon \n                  name={mode === 'dark' ? 'brightness-high' : 'brightness-low'} \n                  size={14} \n                  color={tokens.colors.text.secondary} \n                />\n                {mode === 'dark' ? 'Dark Mode' : 'Light Mode'}\n              </span>\n              <div style={{\n                width: 32,\n                height: 18,\n                borderRadius: 9,\n                backgroundColor: mode === 'dark' ? tokens.colors.accent.primary : tokens.colors.border.default,\n                padding: 2,\n                transition: 'all 0.15s ease',\n              }}>\n                <div style={{\n                  width: 14,\n                  height: 14,\n                  borderRadius: '50%',\n                  backgroundColor: '#fff',\n                  transition: 'all 0.15s ease',\n                  transform: mode === 'dark' ? 'translateX(14px)' : 'translateX(0)',\n                }} />\n              </div>\n            </button>\n            \n            {/* Accent Borders (only for glass themes) */}\n            {showAccentBorders && onAccentBordersToggle && (\n              <button\n                onClick={onAccentBordersToggle}\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  padding: '8px 12px',\n                  border: 'none',\n                  borderRadius: tokens.borderRadius.sm,\n                  backgroundColor: 'transparent',\n                  color: tokens.colors.text.primary,\n                  fontSize: '0.75rem', // 12px in rem\n                  cursor: 'pointer',\n                  transition: 'all 0.1s ease',\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.backgroundColor = 'transparent';\n                }}\n              >\n                <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n                  <span style={{ \n                    width: 14, \n                    height: 14, \n                    borderRadius: 3,\n                    border: `2px solid ${tokens.colors.text.secondary}`,\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                  }}>\n                    {accentBordersEnabled && (\n                      <AstroIcon name=\"check\" size={10} color={tokens.colors.text.secondary} />\n                    )}\n                  </span>\n                  Accent Borders\n                </span>\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\n// =============================================================================\n// AppBar Component\n// =============================================================================\n\n// =============================================================================\n// Section header for right slot (operator-style \"Data\" header)\n// =============================================================================\n\ninterface SectionHeaderProps {\n  title: string;\n  tokens: { typography: any; spacing: any; colors: any; borders: any };\n}\n\nconst SectionHeader = memo(function SectionHeader({ title, tokens }: SectionHeaderProps) {\n  return (\n    <div style={{ textAlign: 'center', marginBottom: tokens.spacing.xs }}>\n      <span style={{\n        fontSize: tokens.typography.fontSize.xxs,\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: tokens.colors.interactive?.default ?? tokens.colors.text.secondary,\n        fontWeight: tokens.typography.fontWeight.bold,\n      }}>\n        {title}\n      </span>\n      <div style={{\n        width: '100%',\n        height: tokens.borders.width.thin,\n        background: tokens.colors.interactive?.default ?? tokens.colors.text.secondary,\n        opacity: 0.5,\n        marginTop: tokens.spacing.xs,\n      }} />\n    </div>\n  );\n});\n\n// =============================================================================\n// AppBar Component\n// =============================================================================\n\nexport const AppBar = memo(function AppBar({\n  appName = 'Zendir',\n  appDomain,\n  appVersion,\n  branding,\n  showThemeControls = true,\n  showCompactToggle = true,\n  showColorPicker = true,\n  showThemeSelector = true,\n  showModeOnly = false,\n  compactThemeControls = false,\n  defaultTheme,\n  defaultMode,\n  defaultCompactMode,\n  leftSlot,\n  centerSlot,\n  rightSlot,\n  rightSectionTitle,\n  showBranding = true,\n  centerGrow = false,\n  variant = 'default',\n  onThemeChange,\n  onModeChange,\n  onCompactModeChange,\n  className = '',\n  height = 52,\n  sticky = true,\n}: AppBarProps): React.ReactElement {\n  const { tokens, theme, mode, setTheme, setMode, toggleMode } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const displaySettings = useDisplaySettingsOptional();\n  \n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  \n  // Get compact mode from context or default\n  const compactMode = displaySettings?.compactMode ?? defaultCompactMode ?? false;\n  \n  // Apply defaults on first render if specified\n  React.useEffect(() => {\n    if (defaultTheme && theme !== defaultTheme) {\n      setTheme(defaultTheme);\n      onThemeChange?.(defaultTheme);\n    }\n    if (defaultMode && mode !== defaultMode) {\n      setMode(defaultMode);\n      onModeChange?.(defaultMode);\n    }\n    // Only run on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  \n  // Handle mode toggle\n  const handleModeToggle = () => {\n    toggleMode();\n    onModeChange?.(mode === 'dark' ? 'light' : 'dark');\n  };\n  \n  // Handle theme change\n  const handleThemeChange = (newTheme: ThemeVariant) => {\n    setTheme(newTheme);\n    onThemeChange?.(newTheme);\n  };\n  \n  // Handle compact mode toggle\n  const handleCompactToggle = () => {\n    if (displaySettings) {\n      displaySettings.toggleCompactMode();\n      onCompactModeChange?.(!compactMode);\n    } else {\n      onCompactModeChange?.(!compactMode);\n    }\n  };\n\n  // Variant-driven layout (operator / mission-control style)\n  const isDense = variant === 'dense';\n  const effectiveHeight = height ?? (isDense ? 44 : 52);\n  const paddingH = isDense\n    ? (isMobile ? tokens.spacing.xs : tokens.spacing.sm)\n    : (isMobile ? tokens.spacing.md : tokens.spacing.lg);\n  const paddingV = isDense ? tokens.spacing.xs : 0;\n  const gap = isDense ? (isMobile ? tokens.spacing.sm : tokens.spacing.md) : tokens.spacing.sm;\n  const minHeight = isDense && isMobile ? 44 : undefined;\n  \n  // Render branding section\n  const renderBranding = () => {\n    // Custom logo node\n    if (branding?.logo) {\n      const content = branding.logo;\n      if (branding.href) {\n        return (\n          <a href={branding.href} style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>\n            {content}\n          </a>\n        );\n      }\n      return <>{content}</>;\n    }\n    \n    // Logo image URL\n    if (branding?.logoUrl) {\n      const img = (\n        <img\n          src={branding.logoUrl}\n          alt={branding.logoAlt || appName}\n          style={{\n            height: branding.logoHeight || 28,\n            width: 'auto',\n            objectFit: 'contain',\n          }}\n        />\n      );\n      \n      if (branding.href) {\n        return (\n          <a href={branding.href} style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>\n            {img}\n          </a>\n        );\n      }\n      return img;\n    }\n    \n    // Text branding\n    return (\n      <div style={{ display: 'flex', alignItems: 'baseline', gap: tokens.spacing.sm }}>\n        {appDomain && (\n          <span style={{\n            fontSize: tokens.typography.fontSize.sm,\n            fontWeight: 400,\n            color: tokens.colors.text.secondary,\n            textTransform: 'uppercase',\n            letterSpacing: '0.05em',\n          }}>\n            {appDomain}\n          </span>\n        )}\n        <span style={{\n          fontSize: tokens.typography.fontSize.lg,\n          fontWeight: 500, // AstroUXDS medium for app title\n          color: tokens.colors.text.primary,\n        }}>\n          {appName}\n        </span>\n        {appVersion && (\n          <span style={{\n            fontSize: tokens.typography.fontSize.xs,\n            color: tokens.colors.text.tertiary,\n          }}>\n            v{appVersion.replace(/^v/, '')}\n          </span>\n        )}\n      </div>\n    );\n  };\n  \n  return (\n    <header\n      className={classNames('zendir-app-bar', className)}\n      role=\"banner\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        height: effectiveHeight,\n        padding: paddingV ? `${paddingV} ${paddingH}` : `0 ${paddingH}`,\n        backgroundColor: isTransparentTheme \n          ? 'rgba(0,0,0,0.4)' \n          : tokens.colors.background.surface,\n        ...(isTransparentTheme && { \n          backdropFilter: 'blur(16px)', \n          WebkitBackdropFilter: 'blur(16px)' as const \n        }),\n        borderBottom: tokens.borders.divider,\n        color: tokens.colors.text.primary,\n        fontFamily: tokens.typography.fontFamily.primary,\n        gap,\n        ...(minHeight && { minHeight }),\n        ...(sticky && {\n          position: 'sticky',\n          top: 0,\n          zIndex: 100,\n        }),\n      }}\n    >\n      {/* Left section: Branding (optional) + leftSlot */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: isDense ? gap : (isMobile ? tokens.spacing.md : tokens.spacing.lg),\n          flex: '1 1 0',\n          minWidth: 0,\n        }}\n      >\n        {showBranding && renderBranding()}\n        {leftSlot}\n      </div>\n      \n      {/* Center section (optionally grows to fill and center content) */}\n      {centerSlot && (\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            flex: centerGrow ? '1 1 0' : '0 0 auto',\n            minWidth: 0,\n          }}\n        >\n          {centerSlot}\n        </div>\n      )}\n      \n      {/* Right section: optional section title + rightSlot + theme controls + compact toggle */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n          gap: tokens.spacing.sm,\n          flex: '1 1 0',\n          minWidth: 0,\n        }}\n      >\n        {rightSectionTitle != null && rightSectionTitle !== '' ? (\n          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flexShrink: 0 }}>\n            <SectionHeader title={rightSectionTitle} tokens={tokens} />\n            {rightSlot}\n          </div>\n        ) : (\n          rightSlot\n        )}\n        \n        {/* Theme Controls Group */}\n        {showThemeControls && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: isMobile ? 6 : 8,\n              marginLeft: isMobile ? tokens.spacing.xs : tokens.spacing.sm,\n              minWidth: 0,\n            }}\n          >\n            {/* Compact Dropdown Mode */}\n            {compactThemeControls ? (\n              <ThemeControlsDropdown\n                currentTheme={theme}\n                mode={mode}\n                onThemeSelect={handleThemeChange}\n                onModeToggle={handleModeToggle}\n                accentBordersEnabled={displaySettings?.accentBorders ?? true}\n                onAccentBordersToggle={displaySettings?.toggleAccentBorders}\n                showAccentBorders={isTransparentTheme && !!displaySettings}\n                tokens={tokens}\n              />\n            ) : (\n              <>\n                {/* Theme Selector */}\n                {showThemeSelector && !showModeOnly && (\n                  <ThemeSelector\n                    currentTheme={theme}\n                    onSelect={handleThemeChange}\n                    tokens={tokens}\n                  />\n                )}\n                \n                {/* Accent Borders Toggle (only for transparent themes) */}\n                {!showModeOnly && isTransparentTheme && displaySettings && (\n                  <AccentBordersToggle\n                    enabled={displaySettings.accentBorders}\n                    onToggle={displaySettings.toggleAccentBorders}\n                    tokens={tokens}\n                  />\n                )}\n                \n                {/* Color Picker (only for transparent themes) */}\n                {showColorPicker && !showModeOnly && isTransparentTheme && displaySettings && (\n                  <ColorPickerPanel\n                    accentColor={displaySettings.accentColor}\n                    glassTint={displaySettings.glassTint}\n                    colorTarget={displaySettings.colorTarget}\n                    onAccentChange={displaySettings.setAccentColor}\n                    onGlassTintChange={displaySettings.setGlassTint}\n                    onTargetChange={displaySettings.setColorTarget}\n                    onColorSelect={displaySettings.setColor}\n                    compact\n                  />\n                )}\n                \n                {/* Dark/Light Mode Toggle */}\n                <ModeToggle \n                  mode={mode}\n                  onToggle={handleModeToggle}\n                  tokens={tokens}\n                />\n              </>\n            )}\n          </div>\n        )}\n        \n        {/* Compact Mode Toggle */}\n        {showCompactToggle && (\n          <CompactToggle\n            isCompact={compactMode}\n            onToggle={handleCompactToggle}\n            tokens={tokens}\n          />\n        )}\n      </div>\n    </header>\n  );\n});\n\nexport default AppBar;\n"],"names":["ModeToggle","CompactToggle","ThemeSelector","AccentBordersToggle","ThemeControlsDropdown","SectionHeader","AppBar"],"mappings":"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"}
+{"version":3,"file":"AppBar.js","names":[],"sources":["../../../../src/react/core/navigation/AppBar.tsx"],"sourcesContent":["/**\n * @zendir/ui - AppBar Component\n *\n * Enterprise-grade application bar with integrated theme controls,\n * compact mode toggle, and display settings management.\n *\n * Features:\n * - Customizable branding (logo, name, domain, version)\n * - Dark/light mode toggle\n * - Theme variant selector\n * - Color picker (accent + glass tint)\n * - Compact mode toggle (affects all cards globally)\n * - Integrates with DisplaySettingsProvider\n * - Responsive design\n * - AstroUXDS compliant\n *\n * @example\n * ```tsx\n * import { AppBar, ThemeProvider, DisplaySettingsProvider } from '@zendir/ui';\n *\n * <ThemeProvider>\n *   <DisplaySettingsProvider>\n *     <AppBar\n *       appName=\"Mission Control\"\n *       appDomain=\"NASA\"\n *       appVersion=\"1.0.0\"\n *       showThemeControls\n *       showCompactToggle\n *     />\n *     <App />\n *   </DisplaySettingsProvider>\n * </ThemeProvider>\n * ```\n */\n\nimport React, {\n  memo,\n  useMemo,\n  useState,\n  useRef,\n  useEffect,\n  type ReactNode,\n} from \"react\";\nimport { useTheme, type ThemeVariant, type ThemeMode } from \"../../theme\";\nimport { useDisplaySettingsOptional } from \"../../context/DisplaySettingsContext\";\nimport { classNames, safeAccentText } from \"../../utils\";\nimport { AstroIcon } from \"../display/AstroIcon\";\nimport { ColorPickerPanel } from \"../widgets/ColorPickerPanel\";\nimport { Tooltip } from \"../overlays/Tooltip\";\nimport { useBreakpoint } from \"../layout/useBreakpoint\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface AppBarBranding {\n  /** Logo image URL (takes precedence over text) */\n  logoUrl?: string;\n  /** Logo as React node (takes precedence over logoUrl) */\n  logo?: ReactNode;\n  /** Logo alt text for accessibility */\n  logoAlt?: string;\n  /** Logo height in pixels (default: 28) */\n  logoHeight?: number;\n  /** Link URL when clicking on branding */\n  href?: string;\n}\n\nexport interface AppBarProps {\n  /** Application name */\n  appName?: string;\n  /** Application domain/organization (shown above app name) */\n  appDomain?: string;\n  /** Application version (shown smaller) */\n  appVersion?: string;\n  /** Logo/branding configuration */\n  branding?: AppBarBranding;\n\n  // Control visibility\n  /** Show theme controls (mode toggle, theme selector, color picker) */\n  showThemeControls?: boolean;\n  /** Show compact mode toggle */\n  showCompactToggle?: boolean;\n  /** Show color picker (only visible for transparent themes) */\n  showColorPicker?: boolean;\n  /** Show theme variant selector */\n  showThemeSelector?: boolean;\n  /** Show only mode toggle (hide other theme controls) */\n  showModeOnly?: boolean;\n  /** Use compact dropdown for theme controls instead of buttons */\n  compactThemeControls?: boolean;\n\n  // Default values (for when controls are hidden)\n  /** Default theme to apply if not already set */\n  defaultTheme?: ThemeVariant;\n  /** Default mode to apply if not already set */\n  defaultMode?: ThemeMode;\n  /** Default compact mode */\n  defaultCompactMode?: boolean;\n\n  // Slots\n  /** Left slot content (after branding, or only content when showBranding is false) */\n  leftSlot?: ReactNode;\n  /** Center slot content */\n  centerSlot?: ReactNode;\n  /** Right slot content (before theme controls) */\n  rightSlot?: ReactNode;\n  /** Optional title shown above right slot (e.g. \"Data\" for metrics/refresh section) */\n  rightSectionTitle?: string;\n\n  // Layout (operator / mission-control style)\n  /** Show branding block (app name, logo). Set false for control-only bars. */\n  showBranding?: boolean;\n  /** Let center slot grow to fill space and stay centered (e.g. simulation controls). */\n  centerGrow?: boolean;\n  /** Bar variant: default (52px) or dense (44px min height, tighter padding/gap). */\n  variant?: \"default\" | \"dense\";\n\n  // Callbacks\n  /** Callback when theme changes */\n  onThemeChange?: (theme: ThemeVariant) => void;\n  /** Callback when mode changes */\n  onModeChange?: (mode: ThemeMode) => void;\n  /** Callback when compact mode changes */\n  onCompactModeChange?: (compact: boolean) => void;\n\n  // Styling\n  /** Custom className */\n  className?: string;\n  /** Custom height (default: 52) */\n  height?: number;\n  /** Sticky positioning */\n  sticky?: boolean;\n}\n\n// =============================================================================\n// Theme Variants for Selector\n// =============================================================================\n\nconst THEME_VARIANTS: { key: ThemeVariant; label: string; tooltip: string }[] =\n  [\n    {\n      key: \"hybrid\",\n      label: \"Zen (Hybrid)\",\n      tooltip: \"Default theme - Astro status colors with purple accents\",\n    },\n    {\n      key: \"purple-hue\",\n      label: \"Zen (Purple Hue)\",\n      tooltip: \"Purple accent theme - vibrant purple tones\",\n    },\n    {\n      key: \"astro\",\n      label: \"Astro\",\n      tooltip: \"Astro UX Design System theme - dark blue tones\",\n    },\n    {\n      key: \"transparent\",\n      label: \"Glass\",\n      tooltip: \"Glassmorphism theme - transparent with blur effects\",\n    },\n    {\n      key: \"transparent-bold\",\n      label: \"Bold\",\n      tooltip: \"Bold glass theme - stronger transparency effects\",\n    },\n    {\n      key: \"transparent-minimal\",\n      label: \"Minimal\",\n      tooltip: \"Minimal glass theme - ultra-subtle borders, clean surfaces\",\n    },\n  ];\n\n// =============================================================================\n// Mode Toggle Component\n// =============================================================================\n\ninterface ModeToggleProps {\n  mode: ThemeMode;\n  onToggle: () => void;\n  tokens: any;\n}\n\nconst ModeToggle = memo(function ModeToggle({\n  mode,\n  onToggle,\n  tokens,\n}: ModeToggleProps) {\n  const isDark = mode === \"dark\";\n  const tooltipText = isDark ? \"Switch to Light Mode\" : \"Switch to Dark Mode\";\n\n  return (\n    <Tooltip content={tooltipText} placement=\"bottom\">\n      <button\n        onClick={onToggle}\n        aria-label={tooltipText}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: 32,\n          height: 32,\n          padding: 0,\n          border: \"none\",\n          borderRadius: tokens.borderRadius.md,\n          backgroundColor: \"rgba(255,255,255,0.08)\",\n          color: tokens.colors.text.primary,\n          cursor: \"pointer\",\n          transition: \"all 0.15s ease\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = \"rgba(255,255,255,0.15)\";\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = \"rgba(255,255,255,0.08)\";\n        }}\n      >\n        <AstroIcon\n          name={isDark ? \"brightness-3\" : \"brightness-high\"}\n          size={16}\n          color={tokens.colors.text.primary}\n        />\n      </button>\n    </Tooltip>\n  );\n});\n\n// =============================================================================\n// Compact Mode Toggle Component\n// =============================================================================\n\ninterface CompactToggleProps {\n  isCompact: boolean;\n  onToggle: () => void;\n  tokens: any;\n}\n\nconst CompactToggle = memo(function CompactToggle({\n  isCompact,\n  onToggle,\n  tokens,\n}: CompactToggleProps) {\n  const tooltipText = isCompact\n    ? \"Switch to Expanded View\"\n    : \"Switch to Compact View\";\n\n  return (\n    <Tooltip content={tooltipText} placement=\"bottom\">\n      <button\n        onClick={onToggle}\n        aria-label={tooltipText}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: 32,\n          height: 32,\n          padding: 0,\n          border: \"none\",\n          borderRadius: tokens.borderRadius.md,\n          backgroundColor: isCompact\n            ? `${tokens.colors.accent.primary}40`\n            : \"rgba(255,255,255,0.08)\",\n          color: isCompact\n            ? tokens.colors.accent.secondary\n            : tokens.colors.text.primary,\n          cursor: \"pointer\",\n          transition: \"all 0.15s ease\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = isCompact\n            ? `${tokens.colors.accent.primary}59`\n            : \"rgba(255,255,255,0.15)\";\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = isCompact\n            ? `${tokens.colors.accent.primary}40`\n            : \"rgba(255,255,255,0.08)\";\n        }}\n      >\n        <AstroIcon\n          name={isCompact ? \"view-comfy\" : \"view-module\"}\n          size={16}\n          color={\n            isCompact\n              ? tokens.colors.accent.secondary\n              : tokens.colors.text.primary\n          }\n        />\n      </button>\n    </Tooltip>\n  );\n});\n\n// =============================================================================\n// Theme Selector Component\n// =============================================================================\n\ninterface ThemeSelectorProps {\n  currentTheme: ThemeVariant;\n  onSelect: (theme: ThemeVariant) => void;\n  tokens: any;\n}\n\nconst ThemeSelector = memo(function ThemeSelector({\n  currentTheme,\n  onSelect,\n  tokens,\n}: ThemeSelectorProps) {\n  // WCAG AA: compute a safe background for selected theme buttons (white text)\n  const safeAccentBg = useMemo(() => {\n    const hex = tokens.colors.accent.primary.replace(\"#\", \"\");\n    if (hex.length < 6) return tokens.colors.accent.primary;\n    const toLinear = (c: number) =>\n      c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n    const r = parseInt(hex.slice(0, 2), 16) / 255;\n    const g = parseInt(hex.slice(2, 4), 16) / 255;\n    const b = parseInt(hex.slice(4, 6), 16) / 255;\n    const L =\n      0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);\n    if (1.05 / (L + 0.05) >= 4.5) return tokens.colors.accent.primary;\n    const factor = 0.88;\n    const dr = Math.min(255, Math.round(r * 255 * factor));\n    const dg = Math.min(255, Math.round(g * 255 * factor));\n    const db = Math.min(255, Math.round(b * 255 * factor));\n    return `#${dr.toString(16).padStart(2, \"0\")}${dg.toString(16).padStart(2, \"0\")}${db.toString(16).padStart(2, \"0\")}`;\n  }, [tokens.colors.accent.primary]);\n\n  // Group themes for better organization\n  const coreThemes = THEME_VARIANTS.filter(\n    (t) => !t.key.startsWith(\"transparent\"),\n  );\n  const glassThemes = THEME_VARIANTS.filter((t) =>\n    t.key.startsWith(\"transparent\"),\n  );\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        gap: 4,\n        padding: 2,\n        backgroundColor: \"rgba(255,255,255,0.05)\",\n        borderRadius: tokens.borderRadius.md,\n      }}\n      role=\"group\"\n      aria-label=\"Theme selector\"\n    >\n      {/* Core themes */}\n      {coreThemes.map(({ key, label, tooltip }) => (\n        <Tooltip key={key} content={tooltip} placement=\"bottom\">\n          <button\n            onClick={() => onSelect(key)}\n            aria-label={`Select ${label} theme`}\n            style={{\n              padding: \"4px 10px\",\n              border: \"none\",\n              borderRadius: tokens.borderRadius.sm,\n              backgroundColor:\n                currentTheme === key ? safeAccentBg : \"transparent\",\n              color:\n                currentTheme === key ? \"#ffffff\" : tokens.colors.text.secondary,\n              fontSize: \"0.6875rem\", // 11px in rem\n              fontWeight: currentTheme === key ? 500 : 400, // AstroUXDS: 500 (medium) not 600\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              whiteSpace: \"nowrap\",\n            }}\n            onMouseEnter={(e) => {\n              if (currentTheme !== key) {\n                e.currentTarget.style.backgroundColor = \"rgba(255,255,255,0.1)\";\n              }\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor =\n                currentTheme === key ? safeAccentBg : \"transparent\";\n            }}\n          >\n            {label}\n          </button>\n        </Tooltip>\n      ))}\n\n      {/* Separator */}\n      <div\n        style={{\n          width: 1,\n          height: 16,\n          backgroundColor: \"rgba(255,255,255,0.15)\",\n          margin: \"0 2px\",\n        }}\n      />\n\n      {/* Glass themes */}\n      {glassThemes.map(({ key, label, tooltip }) => (\n        <Tooltip key={key} content={tooltip} placement=\"bottom\">\n          <button\n            onClick={() => onSelect(key)}\n            aria-label={`Select ${label} theme`}\n            style={{\n              padding: \"4px 10px\",\n              border: \"none\",\n              borderRadius: tokens.borderRadius.sm,\n              backgroundColor:\n                currentTheme === key ? safeAccentBg : \"transparent\",\n              color:\n                currentTheme === key ? \"#ffffff\" : tokens.colors.text.secondary,\n              fontSize: \"0.6875rem\", // 11px in rem\n              fontWeight: currentTheme === key ? 500 : 400, // AstroUXDS: 500 (medium) not 600\n              cursor: \"pointer\",\n              transition: \"all 0.15s ease\",\n              whiteSpace: \"nowrap\",\n            }}\n            onMouseEnter={(e) => {\n              if (currentTheme !== key) {\n                e.currentTarget.style.backgroundColor = \"rgba(255,255,255,0.1)\";\n              }\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.backgroundColor =\n                currentTheme === key ? safeAccentBg : \"transparent\";\n            }}\n          >\n            {label}\n          </button>\n        </Tooltip>\n      ))}\n    </div>\n  );\n});\n\n// =============================================================================\n// Accent Borders Toggle Component\n// =============================================================================\n\ninterface AccentBordersToggleProps {\n  enabled: boolean;\n  onToggle: () => void;\n  tokens: any;\n}\n\nconst AccentBordersToggle = memo(function AccentBordersToggle({\n  enabled,\n  onToggle,\n  tokens,\n}: AccentBordersToggleProps) {\n  return (\n    <Tooltip\n      content={\n        enabled\n          ? \"Accent borders enabled - Click to disable\"\n          : \"Accent borders disabled - Click to enable\"\n      }\n      placement=\"bottom\"\n    >\n      <button\n        onClick={onToggle}\n        aria-label={\n          enabled ? \"Disable accent borders\" : \"Enable accent borders\"\n        }\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          gap: 4,\n          padding: \"4px 8px\",\n          border: \"none\",\n          borderRadius: tokens.borderRadius.sm,\n          backgroundColor: enabled\n            ? `${tokens.colors.accent.primary}30`\n            : \"rgba(255,255,255,0.05)\",\n          color: enabled\n            ? safeAccentText(tokens.colors.accent.primary)\n            : tokens.colors.text.tertiary,\n          fontSize: \"0.625rem\", // 10px in rem\n          fontWeight: 500,\n          cursor: \"pointer\",\n          transition: \"all 0.15s ease\",\n          whiteSpace: \"nowrap\",\n        }}\n        onMouseEnter={(e) => {\n          e.currentTarget.style.backgroundColor = enabled\n            ? `${tokens.colors.accent.primary}40`\n            : \"rgba(255,255,255,0.1)\";\n        }}\n        onMouseLeave={(e) => {\n          e.currentTarget.style.backgroundColor = enabled\n            ? `${tokens.colors.accent.primary}30`\n            : \"rgba(255,255,255,0.05)\";\n        }}\n      >\n        <span\n          style={{\n            width: 8,\n            height: 8,\n            borderRadius: 2,\n            border: `2px solid ${enabled ? tokens.colors.accent.primary : tokens.colors.text.tertiary}`,\n            backgroundColor: \"transparent\",\n          }}\n        />\n        <span>Borders</span>\n      </button>\n    </Tooltip>\n  );\n});\n\n// =============================================================================\n// Theme Controls Dropdown (Compact)\n// =============================================================================\n\ninterface ThemeControlsDropdownProps {\n  currentTheme: ThemeVariant;\n  mode: ThemeMode;\n  onThemeSelect: (theme: ThemeVariant) => void;\n  onModeToggle: () => void;\n  accentBordersEnabled?: boolean;\n  onAccentBordersToggle?: () => void;\n  showAccentBorders?: boolean;\n  tokens: any;\n}\n\nconst ThemeControlsDropdown = memo(function ThemeControlsDropdown({\n  currentTheme,\n  mode,\n  onThemeSelect,\n  onModeToggle,\n  accentBordersEnabled = true,\n  onAccentBordersToggle,\n  showAccentBorders = false,\n  tokens,\n}: ThemeControlsDropdownProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  // Close on click outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener(\"mousedown\", handleClickOutside);\n      return () =>\n        document.removeEventListener(\"mousedown\", handleClickOutside);\n    }\n  }, [isOpen]);\n\n  // Get current theme label\n  const currentLabel =\n    THEME_VARIANTS.find((t) => t.key === currentTheme)?.label || \"Theme\";\n\n  // Group themes\n  const coreThemes = THEME_VARIANTS.filter(\n    (t) => !t.key.startsWith(\"transparent\"),\n  );\n  const glassThemes = THEME_VARIANTS.filter((t) =>\n    t.key.startsWith(\"transparent\"),\n  );\n\n  return (\n    <div ref={dropdownRef} style={{ position: \"relative\" }}>\n      {/* Trigger Button */}\n      <Tooltip content=\"Theme settings\" placement=\"bottom\">\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          aria-label=\"Theme settings\"\n          aria-expanded={isOpen}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: 6,\n            padding: \"6px 10px\",\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md,\n            backgroundColor: isOpen\n              ? tokens.colors.background.elevated\n              : \"transparent\",\n            color: tokens.colors.text.secondary,\n            fontSize: \"0.6875rem\", // 11px in rem\n            fontWeight: 500,\n            cursor: \"pointer\",\n            transition: \"all 0.15s ease\",\n          }}\n          onMouseEnter={(e) => {\n            if (!isOpen) {\n              e.currentTarget.style.backgroundColor =\n                tokens.colors.background.elevated;\n            }\n          }}\n          onMouseLeave={(e) => {\n            if (!isOpen) {\n              e.currentTarget.style.backgroundColor = \"transparent\";\n            }\n          }}\n        >\n          <AstroIcon\n            name=\"settings\"\n            size={14}\n            color={tokens.colors.text.secondary}\n          />\n          <span>{currentLabel}</span>\n          <AstroIcon\n            name={isOpen ? \"arrow-up\" : \"arrow-down\"}\n            size={10}\n            color={tokens.colors.text.tertiary}\n          />\n        </button>\n      </Tooltip>\n\n      {/* Dropdown Panel */}\n      {isOpen && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"100%\",\n            right: 0,\n            marginTop: 4,\n            minWidth: 220,\n            padding: tokens.spacing.sm,\n            backgroundColor: tokens.colors.background.surface,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.lg,\n            boxShadow: \"0 8px 32px rgba(0,0,0,0.3)\",\n            zIndex: 1000,\n          }}\n        >\n          {/* Theme Section */}\n          <div style={{ marginBottom: tokens.spacing.sm }}>\n            <div\n              style={{\n                fontSize: \"0.625rem\", // 10px in rem\n                color: tokens.colors.text.muted,\n                textTransform: \"uppercase\",\n                letterSpacing: \"0.05em\",\n                marginBottom: 8,\n                paddingLeft: 4,\n              }}\n            >\n              Theme\n            </div>\n\n            {/* Core Themes */}\n            <div style={{ display: \"flex\", flexDirection: \"column\", gap: 2 }}>\n              {coreThemes.map(({ key, label }) => (\n                <button\n                  key={key}\n                  onClick={() => {\n                    onThemeSelect(key);\n                    setIsOpen(false);\n                  }}\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 8,\n                    padding: \"8px 12px\",\n                    border: \"none\",\n                    borderRadius: tokens.borderRadius.sm,\n                    backgroundColor:\n                      currentTheme === key\n                        ? `${tokens.colors.accent.primary}20`\n                        : \"transparent\",\n                    color:\n                      currentTheme === key\n                        ? tokens.colors.accent.primary\n                        : tokens.colors.text.primary,\n                    fontSize: \"0.75rem\", // 12px in rem\n                    fontWeight: currentTheme === key ? 600 : 400,\n                    cursor: \"pointer\",\n                    textAlign: \"left\",\n                    transition: \"all 0.1s ease\",\n                  }}\n                  onMouseEnter={(e) => {\n                    if (currentTheme !== key) {\n                      e.currentTarget.style.backgroundColor =\n                        tokens.colors.background.elevated;\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor =\n                      currentTheme === key\n                        ? `${tokens.colors.accent.primary}20`\n                        : \"transparent\";\n                  }}\n                >\n                  {currentTheme === key && (\n                    <AstroIcon\n                      name=\"check\"\n                      size={12}\n                      color={tokens.colors.accent.primary}\n                    />\n                  )}\n                  <span style={{ marginLeft: currentTheme === key ? 0 : 20 }}>\n                    {label}\n                  </span>\n                </button>\n              ))}\n            </div>\n\n            {/* Separator */}\n            <div\n              style={{\n                height: 1,\n                backgroundColor: tokens.colors.border.muted,\n                margin: `${tokens.spacing.xs} 0`,\n              }}\n            />\n\n            {/* Glass Themes */}\n            <div\n              style={{\n                fontSize: \"0.625rem\", // 10px in rem\n                color: tokens.colors.text.muted,\n                textTransform: \"uppercase\",\n                letterSpacing: \"0.05em\",\n                marginBottom: 6,\n                paddingLeft: 4,\n              }}\n            >\n              Glass\n            </div>\n            <div style={{ display: \"flex\", flexDirection: \"column\", gap: 2 }}>\n              {glassThemes.map(({ key, label }) => (\n                <button\n                  key={key}\n                  onClick={() => {\n                    onThemeSelect(key);\n                    setIsOpen(false);\n                  }}\n                  style={{\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    gap: 8,\n                    padding: \"8px 12px\",\n                    border: \"none\",\n                    borderRadius: tokens.borderRadius.sm,\n                    backgroundColor:\n                      currentTheme === key\n                        ? `${tokens.colors.accent.primary}20`\n                        : \"transparent\",\n                    color:\n                      currentTheme === key\n                        ? tokens.colors.accent.primary\n                        : tokens.colors.text.primary,\n                    fontSize: \"0.75rem\", // 12px in rem\n                    fontWeight: currentTheme === key ? 600 : 400,\n                    cursor: \"pointer\",\n                    textAlign: \"left\",\n                    transition: \"all 0.1s ease\",\n                  }}\n                  onMouseEnter={(e) => {\n                    if (currentTheme !== key) {\n                      e.currentTarget.style.backgroundColor =\n                        tokens.colors.background.elevated;\n                    }\n                  }}\n                  onMouseLeave={(e) => {\n                    e.currentTarget.style.backgroundColor =\n                      currentTheme === key\n                        ? `${tokens.colors.accent.primary}20`\n                        : \"transparent\";\n                  }}\n                >\n                  {currentTheme === key && (\n                    <AstroIcon\n                      name=\"check\"\n                      size={12}\n                      color={tokens.colors.accent.primary}\n                    />\n                  )}\n                  <span style={{ marginLeft: currentTheme === key ? 0 : 20 }}>\n                    {label}\n                  </span>\n                </button>\n              ))}\n            </div>\n          </div>\n\n          {/* Separator */}\n          <div\n            style={{\n              height: 1,\n              backgroundColor: tokens.colors.border.muted,\n              margin: `${tokens.spacing.sm} 0`,\n            }}\n          />\n\n          {/* Options Section */}\n          <div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n            {/* Mode Toggle */}\n            <button\n              onClick={() => {\n                onModeToggle();\n              }}\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n                padding: \"8px 12px\",\n                border: \"none\",\n                borderRadius: tokens.borderRadius.sm,\n                backgroundColor: \"transparent\",\n                color: tokens.colors.text.primary,\n                fontSize: \"0.75rem\", // 12px in rem\n                cursor: \"pointer\",\n                transition: \"all 0.1s ease\",\n              }}\n              onMouseEnter={(e) => {\n                e.currentTarget.style.backgroundColor =\n                  tokens.colors.background.elevated;\n              }}\n              onMouseLeave={(e) => {\n                e.currentTarget.style.backgroundColor = \"transparent\";\n              }}\n            >\n              <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                <AstroIcon\n                  name={mode === \"dark\" ? \"brightness-high\" : \"brightness-low\"}\n                  size={14}\n                  color={tokens.colors.text.secondary}\n                />\n                {mode === \"dark\" ? \"Dark Mode\" : \"Light Mode\"}\n              </span>\n              <div\n                style={{\n                  width: 32,\n                  height: 18,\n                  borderRadius: 9,\n                  backgroundColor:\n                    mode === \"dark\"\n                      ? tokens.colors.accent.primary\n                      : tokens.colors.border.default,\n                  padding: 2,\n                  transition: \"all 0.15s ease\",\n                }}\n              >\n                <div\n                  style={{\n                    width: 14,\n                    height: 14,\n                    borderRadius: \"50%\",\n                    backgroundColor: \"#fff\",\n                    transition: \"all 0.15s ease\",\n                    transform:\n                      mode === \"dark\" ? \"translateX(14px)\" : \"translateX(0)\",\n                  }}\n                />\n              </div>\n            </button>\n\n            {/* Accent Borders (only for glass themes) */}\n            {showAccentBorders && onAccentBordersToggle && (\n              <button\n                onClick={onAccentBordersToggle}\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  justifyContent: \"space-between\",\n                  padding: \"8px 12px\",\n                  border: \"none\",\n                  borderRadius: tokens.borderRadius.sm,\n                  backgroundColor: \"transparent\",\n                  color: tokens.colors.text.primary,\n                  fontSize: \"0.75rem\", // 12px in rem\n                  cursor: \"pointer\",\n                  transition: \"all 0.1s ease\",\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.backgroundColor =\n                    tokens.colors.background.elevated;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.backgroundColor = \"transparent\";\n                }}\n              >\n                <span style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n                  <span\n                    style={{\n                      width: 14,\n                      height: 14,\n                      borderRadius: 3,\n                      border: `2px solid ${tokens.colors.text.secondary}`,\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      justifyContent: \"center\",\n                    }}\n                  >\n                    {accentBordersEnabled && (\n                      <AstroIcon\n                        name=\"check\"\n                        size={10}\n                        color={tokens.colors.text.secondary}\n                      />\n                    )}\n                  </span>\n                  Accent Borders\n                </span>\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\n// =============================================================================\n// AppBar Component\n// =============================================================================\n\n// =============================================================================\n// Section header for right slot (operator-style \"Data\" header)\n// =============================================================================\n\ninterface SectionHeaderProps {\n  title: string;\n  tokens: { typography: any; spacing: any; colors: any; borders: any };\n}\n\nconst SectionHeader = memo(function SectionHeader({\n  title,\n  tokens,\n}: SectionHeaderProps) {\n  return (\n    <div style={{ textAlign: \"center\", marginBottom: tokens.spacing.xs }}>\n      <span\n        style={{\n          fontSize: tokens.typography.fontSize.xxs,\n          fontFamily: tokens.typography.fontFamily.primary,\n          color:\n            tokens.colors.interactive?.default ?? tokens.colors.text.secondary,\n          fontWeight: tokens.typography.fontWeight.bold,\n        }}\n      >\n        {title}\n      </span>\n      <div\n        style={{\n          width: \"100%\",\n          height: tokens.borders.width.thin,\n          background:\n            tokens.colors.interactive?.default ?? tokens.colors.text.secondary,\n          opacity: 0.5,\n          marginTop: tokens.spacing.xs,\n        }}\n      />\n    </div>\n  );\n});\n\n// =============================================================================\n// AppBar Component\n// =============================================================================\n\nexport const AppBar = memo(function AppBar({\n  appName = \"Zendir\",\n  appDomain,\n  appVersion,\n  branding,\n  showThemeControls = true,\n  showCompactToggle = true,\n  showColorPicker = true,\n  showThemeSelector = true,\n  showModeOnly = false,\n  compactThemeControls = false,\n  defaultTheme,\n  defaultMode,\n  defaultCompactMode,\n  leftSlot,\n  centerSlot,\n  rightSlot,\n  rightSectionTitle,\n  showBranding = true,\n  centerGrow = false,\n  variant = \"default\",\n  onThemeChange,\n  onModeChange,\n  onCompactModeChange,\n  className = \"\",\n  height = 52,\n  sticky = true,\n}: AppBarProps): React.ReactElement {\n  const { tokens, theme, mode, setTheme, setMode, toggleMode } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const displaySettings = useDisplaySettingsOptional();\n\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n\n  // Get compact mode from context or default\n  const compactMode =\n    displaySettings?.compactMode ?? defaultCompactMode ?? false;\n\n  // Apply defaults on first render if specified\n  React.useEffect(() => {\n    if (defaultTheme && theme !== defaultTheme) {\n      setTheme(defaultTheme);\n      onThemeChange?.(defaultTheme);\n    }\n    if (defaultMode && mode !== defaultMode) {\n      setMode(defaultMode);\n      onModeChange?.(defaultMode);\n    }\n    // Only run on mount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Handle mode toggle\n  const handleModeToggle = () => {\n    toggleMode();\n    onModeChange?.(mode === \"dark\" ? \"light\" : \"dark\");\n  };\n\n  // Handle theme change\n  const handleThemeChange = (newTheme: ThemeVariant) => {\n    setTheme(newTheme);\n    onThemeChange?.(newTheme);\n  };\n\n  // Handle compact mode toggle\n  const handleCompactToggle = () => {\n    if (displaySettings) {\n      displaySettings.toggleCompactMode();\n      onCompactModeChange?.(!compactMode);\n    } else {\n      onCompactModeChange?.(!compactMode);\n    }\n  };\n\n  // Variant-driven layout (operator / mission-control style)\n  const isDense = variant === \"dense\";\n  const effectiveHeight = height ?? (isDense ? 44 : 52);\n  const paddingH = isDense\n    ? isMobile\n      ? tokens.spacing.xs\n      : tokens.spacing.sm\n    : isMobile\n      ? tokens.spacing.md\n      : tokens.spacing.lg;\n  const paddingV = isDense ? tokens.spacing.xs : 0;\n  const gap = isDense\n    ? isMobile\n      ? tokens.spacing.sm\n      : tokens.spacing.md\n    : tokens.spacing.sm;\n  const minHeight = isDense && isMobile ? 44 : undefined;\n\n  // Render branding section\n  const renderBranding = () => {\n    // Custom logo node\n    if (branding?.logo) {\n      const content = branding.logo;\n      if (branding.href) {\n        return (\n          <a\n            href={branding.href}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              textDecoration: \"none\",\n            }}\n          >\n            {content}\n          </a>\n        );\n      }\n      return <>{content}</>;\n    }\n\n    // Logo image URL\n    if (branding?.logoUrl) {\n      const img = (\n        <img\n          src={branding.logoUrl}\n          alt={branding.logoAlt || appName}\n          style={{\n            height: branding.logoHeight || 28,\n            width: \"auto\",\n            objectFit: \"contain\",\n          }}\n        />\n      );\n\n      if (branding.href) {\n        return (\n          <a\n            href={branding.href}\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              textDecoration: \"none\",\n            }}\n          >\n            {img}\n          </a>\n        );\n      }\n      return img;\n    }\n\n    // Text branding\n    return (\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"baseline\",\n          gap: tokens.spacing.sm,\n        }}\n      >\n        {appDomain && (\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: 400,\n              color: tokens.colors.text.secondary,\n              textTransform: \"uppercase\",\n              letterSpacing: \"0.05em\",\n            }}\n          >\n            {appDomain}\n          </span>\n        )}\n        <span\n          style={{\n            fontSize: tokens.typography.fontSize.lg,\n            fontWeight: 500, // AstroUXDS medium for app title\n            color: tokens.colors.text.primary,\n          }}\n        >\n          {appName}\n        </span>\n        {appVersion && (\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xs,\n              color: tokens.colors.text.tertiary,\n            }}\n          >\n            v{appVersion.replace(/^v/, \"\")}\n          </span>\n        )}\n      </div>\n    );\n  };\n\n  return (\n    <header\n      className={classNames(\"zendir-app-bar\", className)}\n      role=\"banner\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        height: effectiveHeight,\n        padding: paddingV ? `${paddingV} ${paddingH}` : `0 ${paddingH}`,\n        backgroundColor: isTransparentTheme\n          ? \"rgba(0,0,0,0.4)\"\n          : tokens.colors.background.surface,\n        ...(isTransparentTheme && {\n          backdropFilter: \"blur(16px)\",\n          WebkitBackdropFilter: \"blur(16px)\" as const,\n        }),\n        borderBottom: tokens.borders.divider,\n        color: tokens.colors.text.primary,\n        fontFamily: tokens.typography.fontFamily.primary,\n        gap,\n        ...(minHeight && { minHeight }),\n        ...(sticky && {\n          position: \"sticky\",\n          top: 0,\n          zIndex: 100,\n        }),\n      }}\n    >\n      {/* Left section: Branding (optional) + leftSlot */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: isDense ? gap : isMobile ? tokens.spacing.md : tokens.spacing.lg,\n          flex: \"1 1 0\",\n          minWidth: 0,\n        }}\n      >\n        {showBranding && renderBranding()}\n        {leftSlot}\n      </div>\n\n      {/* Center section (optionally grows to fill and center content) */}\n      {centerSlot && (\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"center\",\n            flex: centerGrow ? \"1 1 0\" : \"0 0 auto\",\n            minWidth: 0,\n          }}\n        >\n          {centerSlot}\n        </div>\n      )}\n\n      {/* Right section: optional section title + rightSlot + theme controls + compact toggle */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"flex-end\",\n          gap: tokens.spacing.sm,\n          flex: \"1 1 0\",\n          minWidth: 0,\n        }}\n      >\n        {rightSectionTitle != null && rightSectionTitle !== \"\" ? (\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              flexShrink: 0,\n            }}\n          >\n            <SectionHeader title={rightSectionTitle} tokens={tokens} />\n            {rightSlot}\n          </div>\n        ) : (\n          rightSlot\n        )}\n\n        {/* Theme Controls Group */}\n        {showThemeControls && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: isMobile ? 6 : 8,\n              marginLeft: isMobile ? tokens.spacing.xs : tokens.spacing.sm,\n              minWidth: 0,\n            }}\n          >\n            {/* Compact Dropdown Mode */}\n            {compactThemeControls ? (\n              <ThemeControlsDropdown\n                currentTheme={theme}\n                mode={mode}\n                onThemeSelect={handleThemeChange}\n                onModeToggle={handleModeToggle}\n                accentBordersEnabled={displaySettings?.accentBorders ?? true}\n                onAccentBordersToggle={displaySettings?.toggleAccentBorders}\n                showAccentBorders={isTransparentTheme && !!displaySettings}\n                tokens={tokens}\n              />\n            ) : (\n              <>\n                {/* Theme Selector */}\n                {showThemeSelector && !showModeOnly && (\n                  <ThemeSelector\n                    currentTheme={theme}\n                    onSelect={handleThemeChange}\n                    tokens={tokens}\n                  />\n                )}\n\n                {/* Accent Borders Toggle (only for transparent themes) */}\n                {!showModeOnly && isTransparentTheme && displaySettings && (\n                  <AccentBordersToggle\n                    enabled={displaySettings.accentBorders}\n                    onToggle={displaySettings.toggleAccentBorders}\n                    tokens={tokens}\n                  />\n                )}\n\n                {/* Color Picker (only for transparent themes) */}\n                {showColorPicker &&\n                  !showModeOnly &&\n                  isTransparentTheme &&\n                  displaySettings && (\n                    <ColorPickerPanel\n                      accentColor={displaySettings.accentColor}\n                      glassTint={displaySettings.glassTint}\n                      colorTarget={displaySettings.colorTarget}\n                      onAccentChange={displaySettings.setAccentColor}\n                      onGlassTintChange={displaySettings.setGlassTint}\n                      onTargetChange={displaySettings.setColorTarget}\n                      onColorSelect={displaySettings.setColor}\n                      compact\n                    />\n                  )}\n\n                {/* Dark/Light Mode Toggle */}\n                <ModeToggle\n                  mode={mode}\n                  onToggle={handleModeToggle}\n                  tokens={tokens}\n                />\n              </>\n            )}\n          </div>\n        )}\n\n        {/* Compact Mode Toggle */}\n        {showCompactToggle && (\n          <CompactToggle\n            isCompact={compactMode}\n            onToggle={handleCompactToggle}\n            tokens={tokens}\n          />\n        )}\n      </div>\n    </header>\n  );\n});\n\nexport default AppBar;\n"],"mappings":"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"}

package/dist/react/core/navigation/Pagination.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface PaginationProps {
     /** Current page (1-indexed) */
     currentPage: number;
@@ -14,13 +13,13 @@ export interface PaginationProps {
     /** Show prev/next buttons */
     showPrevNext?: boolean;
     /** Size variant */
-    size?: 'small' | 'medium';
+    size?: "small" | "medium";
     /**
      * Display mode.
      * - `'buttons'` — numbered page buttons with ellipsis (default).
      * - `'text'`    — compact "Page X of Y" label with prev/next arrows.
      */
-    displayMode?: 'buttons' | 'text';
+    displayMode?: "buttons" | "text";
     /** Disabled state */
     disabled?: boolean;
     /** Custom className */