@zendir/ui 0.5.0 → 0.6.1

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