@zendir/ui 0.1.0

package/dist/react/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../../src/react/theme/ThemeProvider.tsx"],"sourcesContent":["/**\n * @zendir/ui - Theme Provider\n * \n * Enterprise-grade theming system supporting Astro UX Design System and Zendir themes.\n * Full Tier 3 compliance with official Astro tokens (dark + light themes).\n * \n * Features:\n * - Multiple theme variants (Zen Hybrid default, astro, purple-hue, transparent)\n * - Light and dark modes\n * - Animation tokens with reduced-motion support\n * - Focus ring styles for accessibility\n * - CSS variable injection\n * - Local storage persistence\n */\n\nimport React, { createContext, useContext, useState, useEffect, useMemo, ReactNode } from 'react';\n\nfunction adjustHexBrightness(hex: string, factor: number): string {\n  const normalized = hex.replace('#', '').trim();\n  const expanded = normalized.length === 3\n    ? normalized.split('').map(ch => ch + ch).join('')\n    : normalized;\n\n  if (!/^[0-9a-fA-F]{6}$/.test(expanded)) {\n    return hex;\n  }\n\n  const clamp = (value: number) => Math.max(0, Math.min(255, Math.round(value)));\n  const r = clamp(parseInt(expanded.slice(0, 2), 16) * factor);\n  const g = clamp(parseInt(expanded.slice(2, 4), 16) * factor);\n  const b = clamp(parseInt(expanded.slice(4, 6), 16) * factor);\n\n  const toHex = (value: number) => value.toString(16).padStart(2, '0');\n  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\nexport type ThemeVariant = 'astro' | 'purple-hue' | 'hybrid' | 'transparent' | 'transparent-bold' | 'transparent-minimal';\nexport type ThemeMode = 'light' | 'dark';\n\nexport interface ThemeColors {\n  background: {\n    base: string;\n    surface: string;\n    elevated: string;\n    overlay: string;\n  };\n  border: {\n    default: string;\n    muted: string;\n    focus: string;\n    /** Transparent theme: thin faded top-to-bottom border (box-shadow, use with border: 'none') */\n    fadedBoxShadow?: string;\n    /** Card border style (computed from theme – solid or transparent faded). Use ...tokens.colors.border.cardStyle */\n    cardStyle?: React.CSSProperties;\n    /** Card border for dashed/empty state. Use ...tokens.colors.border.cardStyleDashed */\n    cardStyleDashed?: React.CSSProperties;\n    /** Card border using default color (e.g. NavBall, EclipseTimer). Use ...tokens.colors.border.cardStyleDefault */\n    cardStyleDefault?: React.CSSProperties;\n  };\n  text: {\n    primary: string;\n    secondary: string;\n    tertiary: string;\n    /** Muted/placeholder text (alias for tertiary when not set) */\n    muted?: string;\n    inverse: string;\n  };\n  status: {\n    normal: string;\n    standby: string;\n    caution: string;\n    serious: string;\n    critical: string;\n    off: string;\n  };\n  semantic: {\n    success: string;\n    warning: string;\n    error: string;\n    info: string;\n  };\n  accent: {\n    primary: string;\n    secondary: string;\n    tertiary: string;\n  };\n  interactive: {\n    default: string;\n    hover: string;\n    active: string;\n    disabled: string;\n    /** Transparent theme: button/control bg (low opacity purple) when not hovered */\n    transparentDefault?: string;\n    /** Transparent theme: button/control bg on hover (higher opacity purple) */\n    transparentHover?: string;\n    /** Transparent theme: input field bg (semi-transparent purple tint) */\n    transparentInputBg?: string;\n  };\n}\n\nexport interface ThemeAnimation {\n  /** Fast transitions (hover states) - 150ms */\n  fast: string;\n  /** Normal transitions (most interactions) - 250ms */\n  normal: string;\n  /** Slow transitions (page/mode changes) - 400ms */\n  slow: string;\n  /** Spring animation for playful interactions */\n  spring: string;\n  /** Easing function */\n  easing: {\n    default: string;\n    in: string;\n    out: string;\n    inOut: string;\n  };\n  /** Duration values in milliseconds */\n  duration: {\n    instant: number;\n    fast: number;\n    normal: number;\n    slow: number;\n  };\n}\n\nexport interface ThemeFocus {\n  /** Focus ring color */\n  color: string;\n  /** Focus ring width */\n  width: string;\n  /** Focus ring offset */\n  offset: string;\n  /** Full focus ring CSS */\n  ring: string;\n  /** Focus ring style object */\n  style: React.CSSProperties;\n}\n\n/**\n * Astro UX Typography Style Token\n * Based on https://www.astrouxds.com/foundations/typography/\n */\nexport interface TypographyStyle {\n  fontSize: string;\n  fontWeight: number;\n  letterSpacing: string;\n  lineHeight: string;\n}\n\nexport interface ThemeTokens {\n  colors: ThemeColors;\n  spacing: {\n    /** 2px — micro adjustments, decorative offsets */\n    xxs: string;\n    /** 4px — tight gaps, icon padding */\n    xs: string;\n    /** 8px — compact spacing, small gaps */\n    sm: string;\n    /** 12px — form fields, compact cards (between sm and md) */\n    smd: string;\n    /** 16px — default card padding, section gaps */\n    md: string;\n    /** 20px — slightly generous spacing */\n    mdl: string;\n    /** 24px — generous spacing, content area padding */\n    lg: string;\n    /** 32px — large section gaps */\n    xl: string;\n    /** 48px — extra large spacing */\n    xxl: string;\n  };\n  borderRadius: {\n    none: string;\n    /** 1px — very subtle rounding */\n    xs: string;\n    /** 2px — small elements, badges, tooltips */\n    sm: string;\n    /** 4px — inputs, selects, standard controls */\n    md: string;\n    /** 8px — cards, containers */\n    lg: string;\n    /** 12px — prominent surfaces, modals */\n    xl: string;\n    /** 9999px — pills, fully rounded */\n    full: string;\n  };\n  /** Standardised element heights for interactive controls */\n  elementSize: {\n    /** 28px — compact controls */\n    sm: string;\n    /** 36px — default controls */\n    md: string;\n    /** 44px — prominent controls, touch targets */\n    lg: string;\n  };\n  typography: {\n    fontFamily: {\n      primary: string;\n      mono: string;\n    };\n    // Astro UX Typography Tokens (rem-based)\n    // https://www.astrouxds.com/foundations/typography/\n    display: {\n      1: TypographyStyle;\n      2: TypographyStyle;\n    };\n    heading: {\n      1: TypographyStyle;\n      '1Bold': TypographyStyle;\n      2: TypographyStyle;\n      3: TypographyStyle;\n      4: TypographyStyle;\n      5: TypographyStyle;\n      6: TypographyStyle;\n    };\n    body: {\n      1: TypographyStyle;\n      '1Bold': TypographyStyle;\n      2: TypographyStyle;\n      '2Bold': TypographyStyle;\n      3: TypographyStyle;\n      '3Bold': TypographyStyle;\n    };\n    control: {\n      1: TypographyStyle;\n      '1Bold': TypographyStyle;\n    };\n    // Legacy/convenience tokens (keeping for backward compatibility)\n    fontSize: {\n      micro: string; // 9px - very tight spaces\n      xxs: string;   // 10px - compact labels\n      xs: string;\n      sm: string;\n      base: string;\n      md: string;\n      lg: string;\n      xl: string;\n      xxl: string;\n      xxxl: string;\n    };\n    fontWeight: {\n      light: number;\n      normal: number;\n      medium: number;\n      semibold: number;\n      bold: number;\n    };\n    lineHeight: {\n      tight: string;\n      normal: string;\n      relaxed: string;\n    };\n    letterSpacing: {\n      tight: string;\n      normal: string;\n      wide: string;\n    };\n  };\n  shadows: {\n    none: string;\n    sm: string;\n    md: string;\n    lg: string;\n    xl: string;\n    glow: (color: string) => string;\n  };\n  animation: ThemeAnimation;\n  focus: ThemeFocus;\n  /** Semantic layout tokens for consistent spacing across cards, forms, and sections */\n  layout: LayoutTokens;\n  /** Semantic border tokens for consistent element styling (derived from theme colors) */\n  borders: BorderTokens;\n}\n\n// ============================================================================\n// Layout Tokens Interface\n// Semantic spacing for cards, sections, forms, and nested surfaces.\n// These decouple layout intent from raw pixel values, enabling consistent\n// spacing across all consuming applications.\n// ============================================================================\n\nexport interface LayoutTokens {\n  /** Card / panel container spacing */\n  card: {\n    /** Internal padding of card containers */\n    padding: string;\n    /** Gap between cards in grid layouts (desktop) */\n    gap: string;\n    /** Gap between cards in grid layouts (mobile / compact) */\n    gapCompact: string;\n    /** Card heading: icon size, title typography, gap — single system for all cards/charts */\n    heading: {\n      iconSize: number;\n      iconSizeCompact: number;\n      titleFontSize: string;\n      /** Smaller title for chart headers (e.g. Power Trends) so they match card visual weight */\n      titleFontSizeChart: string;\n      titleFontWeight: number;\n      gap: number;\n    };\n  };\n  /** Section heading spacing (heading + divider + content) */\n  section: {\n    /** Padding below heading text, above the divider border */\n    headerPaddingBottom: string;\n    /** Margin below the divider border, before content */\n    headerMarginBottom: string;\n    /** Padding above the first content element after heading */\n    contentPaddingTop: string;\n  };\n  /** Form and input field spacing */\n  form: {\n    /** Vertical gap between stacked form fields */\n    fieldGap: string;\n    /** Horizontal gap between side-by-side inline fields */\n    inlineGap: string;\n    /** Padding inside grouped / nested field containers */\n    groupPadding: string;\n    /** Gap between items within a field group */\n    groupGap: string;\n    /** Gap between label text and helper icons (e.g. tooltip) */\n    labelGap: string;\n  };\n  /** Nested surface / panel spacing (e.g. grouped fields within a card) */\n  surface: {\n    /** Internal padding of nested surfaces */\n    padding: string;\n    /** Border radius of nested surfaces */\n    borderRadius: string;\n    /** Gap between items in compact nested surfaces */\n    gap: string;\n  };\n}\n\n// ============================================================================\n// Border Tokens Interface\n// Standardised border widths, element borders, focus rings, and dividers.\n// These are DERIVED from theme colors at runtime via computeBorderTokens().\n// ============================================================================\n\nexport interface BorderTokens {\n  /** Border widths — standardised across all interactive elements */\n  width: {\n    /** Thin (1px) — inputs, cards, dividers, dropdowns */\n    thin: string;\n    /** Medium (1.5px) — secondary buttons, emphasised inputs */\n    medium: string;\n    /** Thick (2px) — checkboxes, accent borders, active tabs */\n    thick: string;\n  };\n  /** Pre-computed input / control borders (width + style + color) */\n  input: {\n    /** Default resting state */\n    default: string;\n    /** Hover state (accent at 50% opacity) */\n    hover: string;\n    /** Focused state (full accent) */\n    focus: string;\n    /** Error / critical state */\n    error: string;\n  };\n  /** Focus ring box-shadow values for interactive elements */\n  focusRing: {\n    /** Standard ring for inputs and selects */\n    default: string;\n    /** Ring for buttons (double-ring pattern) */\n    button: string;\n    /** Subtle ring for checkboxes, tabs, toggles */\n    subtle: string;\n  };\n  /** Section divider border (headings, dialog headers/footers, tab bars) */\n  divider: string;\n  /** Dropdown / popover container border */\n  dropdown: string;\n  /** Separator line inside elements (unit separators, table rows) */\n  separator: string;\n}\n\n/**\n * Derives border tokens from a theme's resolved colors.\n * Called once per theme change inside the ThemeProvider useMemo.\n */\nfunction computeBorderTokens(colors: ThemeColors): BorderTokens {\n  const thin  = '1px';\n  const medium = '1.5px';\n  const thick = '2px';\n  const accent = colors.accent.primary;\n  const muted  = colors.border.muted;\n  const critical = colors.status.critical;\n  const bgBase = colors.background.base;\n\n  return {\n    width: { thin, medium, thick },\n    input: {\n      default: `${thin} solid ${muted}`,\n      hover:   `${thin} solid ${accent}80`,\n      focus:   `${thin} solid ${accent}`,\n      error:   `${thin} solid ${critical}`,\n    },\n    focusRing: {\n      // WCAG 2.4.13: focus indicators ≥ 3:1 contrast — raised from 20%/30% to 50%/60%\n      default: `0 0 0 3px ${accent}50, 0 0 20px ${accent}15`,\n      button:  `0 0 0 2px ${bgBase}, 0 0 0 4px ${accent}`,\n      subtle:  `0 0 0 2px ${accent}60`,\n    },\n    divider:   `${thin} solid ${muted}`,\n    dropdown:  `${thin} solid ${accent}30`,\n    separator: `${thin} solid ${muted}`,\n  };\n}\n\n/**\n * Base theme type used for static theme definitions.\n * `borders` is omitted because it is derived from colors at runtime\n * inside the ThemeProvider useMemo (see computeBorderTokens).\n */\ntype ThemeTokensBase = Omit<ThemeTokens, 'borders'>;\n\n// ============================================================================\n// Animation Tokens (Shared)\n// ============================================================================\n\nconst animationTokens: ThemeAnimation = {\n  fast: 'all 150ms cubic-bezier(0.4, 0, 0.2, 1)',\n  normal: 'all 250ms cubic-bezier(0.4, 0, 0.2, 1)',\n  slow: 'all 400ms cubic-bezier(0.4, 0, 0.2, 1)',\n  spring: 'all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)',\n  easing: {\n    default: 'cubic-bezier(0.4, 0, 0.2, 1)',\n    in: 'ease-in',\n    out: 'ease-out',\n    inOut: 'ease-in-out',\n  },\n  duration: {\n    instant: 0,\n    fast: 150,\n    normal: 250,\n    slow: 400,\n  },\n};\n\n// ============================================================================\n// Focus Tokens (Dark)\n// ============================================================================\n\nconst focusTokensDark: ThemeFocus = {\n  color: '#4dacff',\n  width: '2px',\n  offset: '2px',\n  ring: '0 0 0 2px #4dacff',\n  style: {\n    outline: '2px solid #4dacff',\n    outlineOffset: '2px',\n  },\n};\n\nconst focusTokensLight: ThemeFocus = {\n  color: '#0066cc',\n  width: '2px',\n  offset: '2px',\n  ring: '0 0 0 2px #0066cc',\n  style: {\n    outline: '2px solid #0066cc',\n    outlineOffset: '2px',\n  },\n};\n\n// ============================================================================\n// Shadow Tokens\n// ============================================================================\n\nconst shadowsDark = {\n  none: 'none',\n  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 8px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 16px rgba(0, 0, 0, 0.5)',\n  xl: '0 16px 32px rgba(0, 0, 0, 0.6)',\n  glow: (color: string) => `0 0 20px ${color}40, 0 0 40px ${color}20`,\n};\n\nconst shadowsLight = {\n  none: 'none',\n  sm: '0 1px 2px rgba(0, 0, 0, 0.1)',\n  md: '0 4px 8px rgba(0, 0, 0, 0.15)',\n  lg: '0 8px 16px rgba(0, 0, 0, 0.2)',\n  xl: '0 16px 32px rgba(0, 0, 0, 0.25)',\n  glow: (color: string) => `0 0 20px ${color}30, 0 0 40px ${color}15`,\n};\n\n// ============================================================================\n// Layout Tokens (Shared)\n// Semantic layout spacing based on 4px grid. Shared across all themes.\n// ============================================================================\n\nconst layoutTokens: LayoutTokens = {\n  card: {\n    padding: '16px',       // 4 × 4px\n    gap: '24px',           // 6 × 4px  — desktop grid gap (matches outer padding)\n    gapCompact: '16px',    // 4 × 4px  — mobile grid gap\n    heading: {\n      iconSize: 18,        // default card header icon (px) — matches ISS/Telemetry card header size\n      iconSizeCompact: 16, // compact (e.g. chart inline header)\n      titleFontSize: '1rem',       // card titles (ISS, Telemetry, Mission) — reduced from 1.125rem\n      titleFontSizeChart: '0.875rem', // chart titles (Power Trends) — slightly smaller\n      titleFontWeight: 500,\n      gap: 8,              // gap between icon and title (px)\n    },\n  },\n  section: {\n    headerPaddingBottom: '8px',   // 2 × 4px\n    headerMarginBottom: '0px',\n    contentPaddingTop: '8px',     // 2 × 4px\n  },\n  form: {\n    fieldGap: '12px',      // 3 × 4px  — between stacked fields\n    inlineGap: '12px',     // 3 × 4px  — between side-by-side fields\n    groupPadding: '12px',  // 3 × 4px  — inside grouped containers\n    groupGap: '12px',      // 3 × 4px  — within group items\n    labelGap: '3px',       // label text ↔ tooltip icon\n  },\n  surface: {\n    padding: '12px',       // 3 × 4px\n    borderRadius: '12px',  // 3 × 4px\n    gap: '8px',            // 2 × 4px\n  },\n};\n\n// ============================================================================\n// Astro UX Dark Theme\n// ============================================================================\n\nconst astroThemeDark: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: '#101923',\n      surface: '#1b2d3e',\n      elevated: '#243b53',\n      overlay: 'rgba(16, 25, 35, 0.95)',\n    },\n    border: {\n      default: '#2b659b',\n      muted: '#172635',\n      focus: '#4dacff',\n    },\n    text: {\n      primary: '#ffffff',\n      secondary: '#b7c5d3',\n      tertiary: '#8fa4b7',\n      muted: '#8fa4b7',\n      inverse: '#1b2d3e',\n    },\n    status: {\n      normal: '#56f000',\n      standby: '#2dccff',\n      caution: '#fce83a',\n      serious: '#ffb302',\n      critical: '#ff3838',\n      off: '#a4abb6',\n    },\n    semantic: {\n      success: '#56f000',\n      warning: '#fce83a',\n      error: '#ff3838',\n      info: '#4dacff',\n    },\n    accent: {\n      primary: '#4dacff',\n      secondary: '#56f000',\n      tertiary: '#a371f7',\n    },\n    interactive: {\n      default: '#4dacff',\n      hover: '#92cbff',\n      active: '#0066cc',\n      disabled: '#6b7280',\n    },\n  },\n  spacing: {\n    xxs: '2px',\n    xs: '4px',\n    sm: '8px',\n    smd: '12px',\n    md: '16px',\n    mdl: '20px',\n    lg: '24px',\n    xl: '32px',\n    xxl: '48px',\n  },\n  borderRadius: {\n    none: '0',\n    xs: '1px',\n    sm: '2px',\n    md: '4px',\n    lg: '8px',\n    xl: '12px',\n    full: '9999px',\n  },\n  elementSize: {\n    sm: '28px',\n    md: '36px',\n    lg: '44px',\n  },\n  typography: {\n    /**\n     * Font families per AstroUXDS specification\n     * @see https://www.astrouxds.com/foundations/typography/\n     */\n    fontFamily: {\n      /** Primary font: Roboto with comprehensive system fallbacks */\n      primary: '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n      /** Monospace font: Roboto Mono for data/code with system fallbacks */\n      mono: '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace',\n    },\n    // Astro UX Display Styles\n    // https://www.astrouxds.com/foundations/typography/\n    display: {\n      1: { fontSize: '3.75rem', fontWeight: 300, letterSpacing: '-0.5px', lineHeight: '4.375rem' },\n      2: { fontSize: '3rem', fontWeight: 400, letterSpacing: '0', lineHeight: '3.5rem' },\n    },\n    // Astro UX Heading Styles\n    heading: {\n      1: { fontSize: '2.125rem', fontWeight: 400, letterSpacing: '0.25px', lineHeight: '2.5rem' },\n      '1Bold': { fontSize: '2.125rem', fontWeight: 700, letterSpacing: '0.25px', lineHeight: '2rem' },\n      2: { fontSize: '1.5rem', fontWeight: 400, letterSpacing: '0', lineHeight: '1.75rem' },\n      3: { fontSize: '1.25rem', fontWeight: 500, letterSpacing: '0.15px', lineHeight: '1.5rem' },\n      4: { fontSize: '1.25rem', fontWeight: 300, letterSpacing: '0.15px', lineHeight: '1.5rem' },\n      5: { fontSize: '1.125rem', fontWeight: 400, letterSpacing: '0', lineHeight: '1.5rem' },\n      6: { fontSize: '1.125rem', fontWeight: 300, letterSpacing: '0', lineHeight: '1.5rem' },\n    },\n    // Astro UX Body Styles\n    body: {\n      1: { fontSize: '1rem', fontWeight: 400, letterSpacing: '0.5px', lineHeight: '1.5rem' },\n      '1Bold': { fontSize: '1rem', fontWeight: 700, letterSpacing: '0.5px', lineHeight: '1.5rem' },\n      2: { fontSize: '0.875rem', fontWeight: 400, letterSpacing: '0.5px', lineHeight: '1.25rem' },\n      '2Bold': { fontSize: '0.875rem', fontWeight: 700, letterSpacing: '0.5px', lineHeight: '1.25rem' },\n      3: { fontSize: '0.75rem', fontWeight: 400, letterSpacing: '0', lineHeight: '1rem' },\n      '3Bold': { fontSize: '0.75rem', fontWeight: 700, letterSpacing: '0', lineHeight: '1rem' },\n    },\n    // Astro UX Control Body Styles\n    control: {\n      1: { fontSize: '1rem', fontWeight: 400, letterSpacing: '0.5px', lineHeight: '1.25rem' },\n      '1Bold': { fontSize: '1rem', fontWeight: 700, letterSpacing: '0.5px', lineHeight: '1.25rem' },\n    },\n    // Legacy convenience tokens (rem-based for Astro compliance)\n    // Note: Use Typography component for new code\n    fontSize: {\n      micro: '0.5625rem', // 9px - very tight spaces\n      xxs: '0.625rem',    // 10px - compact labels (xs in old system)\n      xs: '0.625rem',     // 10px - compact (kept for backward compatibility)\n      sm: '0.75rem',      // 12px (Body 3)\n      base: '0.875rem',   // 14px (Body 2)\n      md: '0.875rem',     // 14px (Body 2)\n      lg: '1rem',         // 16px (Body 1)\n      xl: '1.25rem',      // 20px (Heading 3/4)\n      xxl: '1.5rem',      // 24px (Heading 2)\n      xxxl: '2.125rem',   // 34px (Heading 1)\n    },\n    /**\n     * Font weights per AstroUXDS specification\n     * Only 300, 400, 500, 700 are officially supported\n     * @see https://www.astrouxds.com/foundations/typography/\n     */\n    fontWeight: {\n      light: 300,\n      normal: 400,\n      medium: 500,\n      /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */\n      semibold: 500,  // Changed from 600 to 500 for Astro compliance\n      bold: 700,\n    },\n    lineHeight: {\n      tight: '1.25rem',\n      normal: '1.5rem',\n      relaxed: '1.75rem',\n    },\n    letterSpacing: {\n      tight: '-0.5px',\n      normal: '0',\n      wide: '0.5px',\n    },\n  },\n  shadows: shadowsDark,\n  animation: animationTokens,\n  focus: focusTokensDark,\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Astro UX Light Theme\n// ============================================================================\n\nconst astroThemeLight: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: '#eaeef4',\n      surface: '#f5f8fc',\n      elevated: '#ffffff',\n      overlay: 'rgba(234, 238, 244, 0.95)',\n    },\n    border: {\n      default: '#2b659b',\n      muted: '#d1d5db',\n      focus: '#0066cc',\n    },\n    text: {\n      primary: '#1b2d3e',\n      secondary: '#51667c',\n      tertiary: '#556a7c',  // WCAG AA: 4.81:1 on #eaeef4, 5.24:1 on #f5f8fc, 5.61:1 on #fff (was #8fa4b7 → 2.25:1 FAIL)\n      muted: '#556a7c',     // WCAG AA compliant (was #8fa4b7)\n      inverse: '#ffffff',\n    },\n    status: {\n      normal: '#56f000',\n      standby: '#2dccff',\n      caution: '#fce83a',\n      serious: '#ffb302',\n      critical: '#ff3838',\n      off: '#a4abb6',\n    },\n    semantic: {\n      success: '#56f000',\n      warning: '#fce83a',\n      error: '#ff3838',\n      info: '#4dacff',\n    },\n    accent: {\n      primary: '#0066cc',\n      secondary: '#56f000',\n      tertiary: '#7c3aed',\n    },\n    interactive: {\n      default: '#0066cc',\n      hover: '#0052a3',\n      active: '#003d7a',\n      disabled: '#a4abb6',\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: astroThemeDark.borderRadius,\n  elementSize: astroThemeDark.elementSize,\n  typography: astroThemeDark.typography,\n  shadows: shadowsLight,\n  animation: animationTokens,\n  focus: focusTokensLight,\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Hybrid Theme (Zendir Background + Astro Status + Purple Accents)\n// Modern, award-winning design with Zendir purple personality\n// ============================================================================\n\nconst focusTokensPurpleHue: ThemeFocus = {\n  color: '#8b5cf6',\n  width: '2px',\n  offset: '2px',\n  ring: '0 0 0 2px #8b5cf6',\n  style: {\n    outline: '2px solid #8b5cf6',\n    outlineOffset: '2px',\n  },\n};\n\nconst hybridTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: '#09090b',\n      surface: 'rgba(24, 24, 27, 0.98)',\n      elevated: 'rgba(39, 39, 42, 0.98)',\n      overlay: 'rgba(0, 0, 0, 0.85)',\n    },\n    border: {\n      default: 'rgba(139, 92, 246, 0.3)',  // Purple tint\n      muted: 'rgba(63, 63, 70, 0.5)',\n      focus: '#8b5cf6',  // Zendir purple\n    },\n    text: {\n      primary: '#ffffff',\n      secondary: '#a1a1aa',\n      tertiary: '#8e8e96',  // WCAG AA: 6.12:1 on #09090b, 5.45:1 on #18181b, 4.58:1 on #27272a (was #71717a → 4.07:1 FAIL)\n      muted: '#8e8e96',     // WCAG AA compliant (was #71717a)\n      inverse: '#09090b',\n    },\n    // Astro UXD Status Colors (unchanged for compliance)\n    status: {\n      normal: '#56f000',\n      standby: '#2dccff',\n      caution: '#fce83a',\n      serious: '#ffb302',\n      critical: '#ff3838',\n      off: '#a4abb6',\n    },\n    semantic: {\n      success: '#56f000',\n      warning: '#fce83a',\n      error: '#ff3838',\n      info: '#8b5cf6',  // Purple for info\n    },\n    // Zendir Purple Accent Palette\n    accent: {\n      primary: '#8b5cf6',    // Vibrant purple\n      secondary: '#a78bfa',  // Light purple\n      tertiary: '#7c3aed',   // Deep purple\n    },\n    interactive: {\n      default: '#8b5cf6',\n      hover: '#a78bfa',\n      active: '#7c3aed',\n      disabled: '#52525b',\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: '0',\n    xs: '2px',\n    sm: '4px',\n    md: '6px',\n    lg: '10px',\n    xl: '14px',\n    full: '9999px',\n  },\n  elementSize: astroThemeDark.elementSize,\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    glow: (color: string) => `0 0 20px ${color}50, 0 0 40px ${color}25, 0 4px 12px ${color}20`,\n  },\n  animation: animationTokens,\n  focus: focusTokensPurpleHue,\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Purple-Hue Theme - Full Purple Personality\n// Award-winning dark theme with purple accents\n// ============================================================================\n\nconst purpleHueTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      base: '#0a0a0f',\n      surface: 'rgba(18, 18, 28, 0.98)',\n      elevated: 'rgba(28, 28, 42, 0.98)',\n      overlay: 'rgba(0, 0, 0, 0.9)',\n    },\n    border: {\n      default: 'rgba(139, 92, 246, 0.25)',\n      muted: 'rgba(55, 48, 82, 0.5)',\n      focus: '#8b5cf6',\n    },\n    text: {\n      primary: '#fafafa',\n      secondary: '#a1a1aa',\n      tertiary: '#8e8e96',  // WCAG AA: 6.08:1 on #0a0a0f, 5.02:1 on elevated (was #71717a → 4.05:1 FAIL)\n      muted: '#8e8e96',     // WCAG AA compliant (was #71717a)\n      inverse: '#0a0a0f',\n    },\n    // Astro UXD Status Colors (for compliance)\n    status: {\n      normal: '#56f000',\n      standby: '#2dccff',\n      caution: '#fce83a',\n      serious: '#ffb302',\n      critical: '#ff3838',\n      off: '#a4abb6',\n    },\n    semantic: {\n      success: '#56f000',\n      warning: '#fce83a',\n      error: '#ff3838',\n      info: '#a78bfa',\n    },\n    // Zendir Purple Accent Palette\n    accent: {\n      primary: '#8b5cf6',    // Vibrant purple\n      secondary: '#a78bfa',  // Light purple\n      tertiary: '#7c3aed',   // Deep purple\n    },\n    interactive: {\n      default: '#8b5cf6',\n      hover: '#a78bfa',\n      active: '#7c3aed',\n      disabled: '#52525b',\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: '0',\n    xs: '2px',\n    sm: '4px',\n    md: '6px',\n    lg: '10px',\n    xl: '14px',\n    full: '9999px',\n  },\n  elementSize: astroThemeDark.elementSize,\n  // Same typography as hybrid (Astro UX font stack with full fallbacks) for consistent card font across themes\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    glow: (color: string) => `0 0 25px ${color}60, 0 0 50px ${color}30, 0 4px 16px ${color}25`,\n  },\n  animation: animationTokens,\n  focus: {\n    ...focusTokensPurpleHue,\n  },\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Transparent Purple-Hue Theme - Glassmorphic Panels\n// Optimized for glass card overlays with transparent backgrounds\n// ============================================================================\n\nconst transparentTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      // Highly transparent backgrounds for glass effect\n      base: 'rgba(8, 12, 20, 0.95)',\n      surface: 'rgba(15, 20, 35, 0.85)',\n      elevated: 'rgba(25, 35, 55, 0.80)',\n      overlay: 'rgba(0, 0, 0, 0.75)',\n    },\n    border: {\n      // Purple accent borders (Zendir brand)\n      default: 'rgba(139, 92, 246, 0.25)',\n      muted: 'rgba(139, 92, 246, 0.15)',\n      focus: '#8b5cf6',\n      // Thin faded card border with purple hint\n      fadedBoxShadow: 'inset 0 1px 0 rgba(139, 92, 246, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 rgba(139, 92, 246, 0.06), inset -1px 0 0 rgba(139, 92, 246, 0.06)',\n    },\n    text: {\n      primary: '#f0f4f8',\n      secondary: '#94a3b8',\n      tertiary: '#7b8da1',  // WCAG AA: 5.71:1 on base, 5.34:1 on elevated (was #64748b → 3.66:1 FAIL)\n      muted: '#7b8da1',     // WCAG AA compliant (was #64748b)\n      inverse: '#0f172a',\n    },\n    // Astro UXD Status Colors\n    status: {\n      normal: '#56f000',\n      standby: '#2dccff',\n      caution: '#fce83a',\n      serious: '#ffb302',\n      critical: '#ff3838',\n      off: '#a4abb6',\n    },\n    semantic: {\n      success: '#56f000',\n      warning: '#fce83a',\n      error: '#ff3838',\n      info: '#8b5cf6',\n    },\n    // Purple accent (matching hybrid theme for consistency)\n    accent: {\n      primary: '#8b5cf6',     // Vibrant purple\n      secondary: '#a78bfa',   // Light purple\n      tertiary: '#7c3aed',    // Deep purple\n    },\n    interactive: {\n      default: '#8b5cf6',     // Purple for interactive elements\n      hover: '#a78bfa',       // Light purple on hover\n      active: '#7c3aed',      // Deep purple on active\n      disabled: '#475569',\n      // Purple-hue transparent backgrounds for buttons/inputs (transparent + transparent-bold)\n      transparentDefault: 'rgba(139, 92, 246, 0.12)',\n      transparentHover: 'rgba(139, 92, 246, 0.32)',\n      transparentInputBg: 'rgba(139, 92, 246, 0.08)',\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: '0',\n    xs: '2px',\n    sm: '4px',\n    md: '8px',\n    lg: '12px',\n    xl: '16px',\n    full: '9999px',\n  },\n  elementSize: astroThemeDark.elementSize,\n  // Same typography as hybrid for consistent card font across themes\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    // Enhanced glow shadows for glass effect\n    glow: (color: string) => `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`,\n  },\n  animation: animationTokens,\n  focus: {\n    color: '#8b5cf6',       // Purple focus ring\n    width: '2px',\n    offset: '2px',\n    ring: '0 0 0 2px #8b5cf6',\n    style: {\n      outline: '2px solid #8b5cf6',\n      outlineOffset: '2px',\n    },\n  },\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Transparent Minimal Theme - Ultra-clean glassmorphic panels\n// Extremely subtle borders, minimal visual noise, clean dark surfaces\n// ============================================================================\n\nconst transparentMinimalTheme: ThemeTokensBase = {\n  colors: {\n    background: {\n      // Same as transparent theme\n      base: 'rgba(8, 12, 20, 0.95)',\n      surface: 'rgba(15, 20, 35, 0.85)',\n      elevated: 'rgba(25, 35, 55, 0.80)',\n      overlay: 'rgba(0, 0, 0, 0.75)',\n    },\n    border: {\n      // Accent-colored borders for minimal theme (Zendir purple)\n      default: 'rgba(139, 92, 246, 0.25)',\n      muted: 'rgba(139, 92, 246, 0.15)',\n      focus: '#8b5cf6',\n      // Subtle card border using accent color\n      fadedBoxShadow: 'inset 0 1px 0 rgba(139, 92, 246, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), inset 1px 0 0 rgba(139, 92, 246, 0.05), inset -1px 0 0 rgba(139, 92, 246, 0.05)',\n    },\n    text: {\n      primary: '#f0f4f8',\n      secondary: '#94a3b8',\n      tertiary: '#7b8da1',  // WCAG AA: 5.71:1 on base, 5.34:1 on elevated (was #64748b → 3.66:1 FAIL)\n      muted: '#7b8da1',     // WCAG AA compliant (was #64748b)\n      inverse: '#0f172a',\n    },\n    // Astro UXD Status Colors\n    status: {\n      normal: '#56f000',\n      standby: '#2dccff',\n      caution: '#fce83a',\n      serious: '#ffb302',\n      critical: '#ff3838',\n      off: '#a4abb6',\n    },\n    semantic: {\n      success: '#56f000',\n      warning: '#fce83a',\n      error: '#ff3838',\n      info: '#8b5cf6',\n    },\n    // Purple accent (matching transparent theme for consistency)\n    accent: {\n      primary: '#8b5cf6',     // Vibrant purple\n      secondary: '#a78bfa',   // Light purple\n      tertiary: '#7c3aed',    // Deep purple\n    },\n    interactive: {\n      default: '#8b5cf6',     // Purple for interactive elements\n      hover: '#a78bfa',       // Light purple on hover\n      active: '#7c3aed',      // Deep purple on active\n      disabled: '#475569',\n      // Purple-hue transparent backgrounds for buttons/inputs (same as transparent theme)\n      transparentDefault: 'rgba(139, 92, 246, 0.12)',\n      transparentHover: 'rgba(139, 92, 246, 0.32)',\n      transparentInputBg: 'rgba(139, 92, 246, 0.08)',\n    },\n  },\n  spacing: astroThemeDark.spacing,\n  borderRadius: {\n    none: '0',\n    xs: '2px',\n    sm: '4px',\n    md: '8px',\n    lg: '12px',\n    xl: '16px',\n    full: '9999px',\n  },\n  elementSize: astroThemeDark.elementSize,\n  // Same typography as hybrid for consistent card font across themes\n  typography: astroThemeDark.typography,\n  shadows: {\n    ...shadowsDark,\n    // Same glow as transparent theme\n    glow: (color: string) => `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`,\n  },\n  animation: animationTokens,\n  focus: {\n    color: '#8b5cf6',       // Purple focus ring\n    width: '2px',\n    offset: '2px',\n    ring: '0 0 0 2px #8b5cf6',\n    style: {\n      outline: '2px solid #8b5cf6',\n      outlineOffset: '2px',\n    },\n  },\n  layout: layoutTokens,\n};\n\n// ============================================================================\n// Theme Context\n// ============================================================================\n\nexport interface ThemeContextValue {\n  theme: ThemeVariant;\n  mode: ThemeMode;\n  tokens: ThemeTokens;\n  prefersReducedMotion: boolean;\n  /** Custom accent color override (null = use theme default) */\n  accentColor: string | null;\n  setTheme: (theme: ThemeVariant) => void;\n  setMode: (mode: ThemeMode) => void;\n  toggleMode: () => void;\n  /** Override the accent color for the current theme */\n  setAccentColor: (color: string | null) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  /** Default theme variant */\n  theme?: ThemeVariant;\n  /** Default color mode */\n  mode?: ThemeMode;\n  /** Persist preferences to localStorage */\n  persist?: boolean;\n}\n\n// ============================================================================\n// Scrollbar Styling System\n// ============================================================================\n// Generates global CSS for thin, elegant, theme-aware scrollbars.\n//\n// Features:\n// - Ultra-thin (6px) scrollbar tracks with soft border radius\n// - Accent-colored thumb with hover/active brightness shifts\n// - Semi-transparent track that blends into the surface\n// - Auto-hide behaviour on modern browsers (overlay mode)\n// - Firefox support via scrollbar-width / scrollbar-color\n// - WCAG 2.1 AA compliant: sufficient contrast, respects reduced-motion\n// - Smooth transitions (disabled when prefers-reduced-motion)\n// - Scoped .zendir-scroll utility class for individual containers\n// ============================================================================\n\n/**\n * Converts a hex color to an rgba string helper.\n * Accepts 3/6/8-char hex codes (#rgb, #rrggbb, #rrggbbaa).\n */\nfunction hexToRgba(hex: string, alpha: number): string {\n  const clean = hex.replace('#', '');\n  let r: number, g: number, b: number;\n  if (clean.length === 3) {\n    r = parseInt(clean[0] + clean[0], 16);\n    g = parseInt(clean[1] + clean[1], 16);\n    b = parseInt(clean[2] + clean[2], 16);\n  } else {\n    r = parseInt(clean.slice(0, 2), 16);\n    g = parseInt(clean.slice(2, 4), 16);\n    b = parseInt(clean.slice(4, 6), 16);\n  }\n  return `rgba(${r}, ${g}, ${b}, ${alpha})`;\n}\n\nfunction buildScrollbarCSS(tokens: ThemeTokens, mode: ThemeMode, reducedMotion: boolean): string {\n  const accent = tokens.colors.accent.primary;\n  const _surface = tokens.colors.background.surface; // eslint-disable-line @typescript-eslint/no-unused-vars -- reserved for future scrollbar track customisation\n  const _base = tokens.colors.background.base; // eslint-disable-line @typescript-eslint/no-unused-vars -- reserved for future scrollbar corner styling\n  const isLight = mode === 'light';\n\n  // Thumb colors: accent-tinted, low opacity at rest, stronger on hover/active\n  const thumbRest     = isLight ? hexToRgba(accent, 0.28) : hexToRgba(accent, 0.35);\n  const thumbHover    = isLight ? hexToRgba(accent, 0.48) : hexToRgba(accent, 0.55);\n  const thumbActive   = isLight ? hexToRgba(accent, 0.64) : hexToRgba(accent, 0.72);\n\n  // Track: nearly invisible surface blend\n  const trackColor    = isLight ? hexToRgba(accent, 0.04) : hexToRgba(accent, 0.06);\n  const trackHover    = isLight ? hexToRgba(accent, 0.08) : hexToRgba(accent, 0.10);\n\n  const transition = reducedMotion ? 'none' : 'background-color 200ms ease, width 200ms ease, opacity 200ms ease';\n  const thumbRadius = '9999px'; // pill shape\n\n  // Firefox colors (two-value syntax: thumb track)\n  const ffThumb = thumbRest;\n  const ffTrack = trackColor;\n\n  return `\n/* ═══════════════════════════════════════════════════════════════════════════\n   Zendir Scrollbar System — Thin · Elegant · Theme-Connected\n   ═══════════════════════════════════════════════════════════════════════════ */\n\n/* ── Firefox ────────────────────────────────────────────────────────────── */\n*,\n.zendir-scroll {\n  scrollbar-width: thin;\n  scrollbar-color: ${ffThumb} ${ffTrack};\n}\n\n/* ── Webkit / Blink (Chrome, Edge, Safari, Opera) ───────────────────────── */\n\n/* Global thin scrollbar */\n::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n  background: transparent;\n}\n\n/* Track — nearly invisible, subtle on hover */\n::-webkit-scrollbar-track {\n  background: ${trackColor};\n  border-radius: ${thumbRadius};\n  margin: 2px;\n}\n::-webkit-scrollbar-track:hover {\n  background: ${trackHover};\n}\n\n/* Thumb — accent-tinted pill */\n::-webkit-scrollbar-thumb {\n  background: ${thumbRest};\n  border-radius: ${thumbRadius};\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  transition: ${transition};\n  min-height: 32px;\n}\n::-webkit-scrollbar-thumb:hover {\n  background: ${thumbHover};\n  border-color: transparent;\n  background-clip: padding-box;\n}\n::-webkit-scrollbar-thumb:active {\n  background: ${thumbActive};\n  border-color: transparent;\n  background-clip: padding-box;\n}\n\n/* Corner — where horizontal & vertical scrollbars meet */\n::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n/* ── Utility class: zendir-scroll ────────────────────────────────────────\n   Apply to individual containers for scoped thin scrollbar.\n   Also enables overlay behaviour where supported.\n   e.g. <div className=\"zendir-scroll\" style={{overflow:'auto'}}>…</div>\n   ─────────────────────────────────────────────────────────────────────── */\n.zendir-scroll {\n  overflow: auto;\n  overflow: overlay; /* Chrome / Edge: auto-hide scrollbar */\n}\n.zendir-scroll::-webkit-scrollbar {\n  width: 5px;\n  height: 5px;\n}\n.zendir-scroll::-webkit-scrollbar-track {\n  background: transparent;\n  border-radius: ${thumbRadius};\n}\n.zendir-scroll::-webkit-scrollbar-thumb {\n  background: ${thumbRest};\n  border-radius: ${thumbRadius};\n  transition: ${transition};\n}\n.zendir-scroll::-webkit-scrollbar-thumb:hover {\n  background: ${thumbHover};\n}\n.zendir-scroll::-webkit-scrollbar-thumb:active {\n  background: ${thumbActive};\n}\n\n/* ── Utility: zendir-scroll--hidden ─────────────────────────────────────\n   Hides scrollbar visually but keeps scroll behaviour (accessible).\n   Content remains scrollable via mouse wheel / touch / keyboard.\n   ─────────────────────────────────────────────────────────────────────── */\n.zendir-scroll--hidden {\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.zendir-scroll--hidden::-webkit-scrollbar {\n  display: none;\n}\n\n/* ── Focus-visible: keyboard users can still scroll with focus ─────────── */\n.zendir-scroll:focus-visible {\n  outline: 2px solid ${accent};\n  outline-offset: -2px;\n  border-radius: ${tokens.borderRadius.md};\n}\n\n/* ── Reduced Motion: disable scrollbar transitions ─────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  ::-webkit-scrollbar-thumb,\n  .zendir-scroll::-webkit-scrollbar-thumb {\n    transition: none !important;\n  }\n}\n\n/* ── High Contrast Mode: ensure scrollbar is visible ───────────────────── */\n@media (forced-colors: active) {\n  ::-webkit-scrollbar-thumb {\n    background: ButtonText !important;\n  }\n  ::-webkit-scrollbar-track {\n    background: Canvas !important;\n  }\n}\n`.trim();\n}\n\n/**\n * useScrollbarStyles — returns inline React.CSSProperties for a\n * scrollable container that matches the current Zendir theme.\n *\n * Use when you need programmatic control rather than the\n * `zendir-scroll` CSS class.\n *\n * @example\n * ```tsx\n * const scrollStyle = useScrollbarStyles();\n * <div style={{ maxHeight: 400, ...scrollStyle }}>…</div>\n * ```\n */\nexport function useScrollbarStyles(): React.CSSProperties {\n  const { tokens, mode } = useTheme();\n  return useMemo((): React.CSSProperties => {\n    const accent = tokens.colors.accent.primary;\n    const isLight = mode === 'light';\n    const thumbColor = isLight ? hexToRgba(accent, 0.28) : hexToRgba(accent, 0.35);\n    const trackColor = isLight ? hexToRgba(accent, 0.04) : hexToRgba(accent, 0.06);\n    return {\n      // Firefox\n      scrollbarWidth: 'thin' as const,\n      scrollbarColor: `${thumbColor} ${trackColor}`,\n      overflow: 'auto',\n    };\n  }, [tokens, mode]);\n}\n\n/**\n * ThemeProvider - Enterprise theme context provider\n * \n * Provides theme tokens, mode switching, and accessibility features\n * to all child components.\n * \n * @example\n * ```tsx\n * <ThemeProvider theme=\"hybrid\" mode=\"dark\">  // Zen (Hybrid) is the default\n *   <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider({\n  children,\n  theme: defaultTheme = 'hybrid',\n  mode: defaultMode = 'dark',\n  persist = true,\n}: ThemeProviderProps): React.ReactElement {\n  // Initialize theme from localStorage or defaults\n  const [theme, setThemeState] = useState<ThemeVariant>(() => {\n    if (persist && typeof window !== 'undefined') {\n      const saved = localStorage.getItem('zendir-ui-theme');\n      if (saved === 'astro' || saved === 'zendir' || saved === 'hybrid' || saved === 'transparent' || saved === 'transparent-bold' || saved === 'transparent-minimal') {\n        return saved as ThemeVariant;\n      }\n    }\n    return defaultTheme;\n  });\n\n  const [mode, setModeState] = useState<ThemeMode>(() => {\n    if (persist && typeof window !== 'undefined') {\n      const saved = localStorage.getItem('zendir-ui-mode');\n      if (saved === 'light' || saved === 'dark') {\n        return saved;\n      }\n    }\n    return defaultMode;\n  });\n\n  // Detect reduced motion preference\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    setPrefersReducedMotion(mediaQuery.matches);\n\n    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);\n    mediaQuery.addEventListener('change', handler);\n    return () => mediaQuery.removeEventListener('change', handler);\n  }, []);\n\n  // Theme setters\n  const setTheme = (newTheme: ThemeVariant) => {\n    setThemeState(newTheme);\n    if (persist && typeof window !== 'undefined') {\n      localStorage.setItem('zendir-ui-theme', newTheme);\n    }\n  };\n\n  const setMode = (newMode: ThemeMode) => {\n    setModeState(newMode);\n    if (persist && typeof window !== 'undefined') {\n      localStorage.setItem('zendir-ui-mode', newMode);\n    }\n  };\n\n  const toggleMode = () => {\n    setMode(mode === 'dark' ? 'light' : 'dark');\n  };\n\n  // Accent color override\n  const [accentColor, setAccentColorState] = useState<string | null>(() => {\n    if (persist && typeof window !== 'undefined') {\n      return localStorage.getItem('zendir-ui-accent') || null;\n    }\n    return null;\n  });\n\n  const setAccentColor = (color: string | null) => {\n    setAccentColorState(color);\n    if (persist && typeof window !== 'undefined') {\n      if (color) {\n        localStorage.setItem('zendir-ui-accent', color);\n      } else {\n        localStorage.removeItem('zendir-ui-accent');\n      }\n    }\n  };\n\n  // Get theme tokens (card border styles computed so all cards use theme-driven borders)\n  const tokens = useMemo((): ThemeTokens => {\n    // If light mode is selected, always use Astro Light theme (unified light mode)\n    // regardless of the selected theme variant\n    const base =\n      mode === 'light'\n        ? astroThemeLight\n        : theme === 'astro'\n          ? astroThemeDark\n          : theme === 'hybrid'\n            ? hybridTheme\n            : theme === 'transparent' || theme === 'transparent-bold'\n              ? transparentTheme\n              : theme === 'transparent-minimal'\n                ? transparentMinimalTheme\n                : purpleHueTheme;\n    const isTransparent =\n      theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n    const isMinimal = theme === 'transparent-minimal';\n    \n    // For transparent-minimal: use visible accent-colored borders.\n    // For other transparent themes: use subtle fadedBoxShadow.\n    // Accent overrides are intentionally scoped to transparent variants only,\n    // so switching to Astro/Hybrid/Purple-Hue restores each theme's native accent.\n    const resolvedAccent = (isTransparent && accentColor)\n      ? {\n          primary: accentColor,\n          secondary: adjustHexBrightness(accentColor, 1.2),\n          tertiary: adjustHexBrightness(accentColor, 0.85),\n        }\n      : base.colors.accent;\n\n    const accentPrimary = resolvedAccent.primary;\n    const accentBorderMuted = `${accentPrimary}40`; // 25% opacity\n    const accentBorderDefault = `${accentPrimary}66`; // 40% opacity\n    const accentFadedBoxShadow = `inset 0 1px 0 ${hexToRgba(accentPrimary, 0.12)}, inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 ${hexToRgba(accentPrimary, 0.06)}, inset -1px 0 0 ${hexToRgba(accentPrimary, 0.06)}`;\n    \n    const cardStyle = isMinimal\n      ? { border: `1px solid ${accentBorderMuted}` }\n      : isTransparent\n        ? { border: 'none' as const, boxShadow: accentFadedBoxShadow }\n        : { border: `1px solid ${base.colors.border.muted}` };\n    const cardStyleDashed = isMinimal\n      ? { border: `1px dashed ${accentBorderMuted}` }\n      : isTransparent\n        ? { border: 'none' as const, boxShadow: accentFadedBoxShadow }\n        : { border: `1px dashed ${base.colors.border.muted}` };\n    const cardStyleDefault = isMinimal\n      ? { border: `1px solid ${accentBorderDefault}` }\n      : isTransparent\n        ? { border: 'none' as const, boxShadow: accentFadedBoxShadow }\n        : { border: `1px solid ${base.colors.border.default}` };\n    // Compute border tokens from the resolved theme colors\n    const resolvedColors: ThemeColors = {\n      ...base.colors,\n      accent: resolvedAccent,\n      border: {\n        ...base.colors.border,\n        cardStyle,\n        cardStyleDashed,\n        cardStyleDefault,\n      },\n    };\n\n    return {\n      ...base,\n      colors: resolvedColors,\n      borders: computeBorderTokens(resolvedColors),\n    } as ThemeTokens;\n  }, [theme, mode, accentColor]);\n\n  // Apply CSS variables to document\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n\n    const root = document.documentElement;\n    const { colors, typography, spacing, borderRadius, animation, focus, shadows } = tokens;\n\n    // Theme mode attribute\n    root.setAttribute('data-theme', mode);\n    root.setAttribute('data-variant', theme);\n\n    // Background colors\n    root.style.setProperty('--color-background-base', colors.background.base);\n    root.style.setProperty('--color-background-surface', colors.background.surface);\n    root.style.setProperty('--color-background-elevated', colors.background.elevated);\n    root.style.setProperty('--color-background-overlay', colors.background.overlay);\n\n    // Border colors\n    root.style.setProperty('--color-border', colors.border.default);\n    root.style.setProperty('--color-border-muted', colors.border.muted);\n    root.style.setProperty('--color-border-focus', colors.border.focus);\n\n    // Text colors\n    root.style.setProperty('--color-text-primary', colors.text.primary);\n    root.style.setProperty('--color-text-secondary', colors.text.secondary);\n    root.style.setProperty('--color-text-tertiary', colors.text.tertiary);\n    root.style.setProperty('--color-text-inverse', colors.text.inverse);\n\n    // Status colors\n    root.style.setProperty('--color-status-normal', colors.status.normal);\n    root.style.setProperty('--color-status-standby', colors.status.standby);\n    root.style.setProperty('--color-status-caution', colors.status.caution);\n    root.style.setProperty('--color-status-serious', colors.status.serious);\n    root.style.setProperty('--color-status-critical', colors.status.critical);\n    root.style.setProperty('--color-status-off', colors.status.off);\n\n    // Interactive colors\n    root.style.setProperty('--color-interactive-default', colors.interactive.default);\n    root.style.setProperty('--color-interactive-hover', colors.interactive.hover);\n    root.style.setProperty('--color-interactive-active', colors.interactive.active);\n    root.style.setProperty('--color-interactive-disabled', colors.interactive.disabled);\n\n    // Accent colors\n    root.style.setProperty('--color-accent-primary', colors.accent.primary);\n    root.style.setProperty('--color-accent-secondary', colors.accent.secondary);\n    root.style.setProperty('--color-accent-tertiary', colors.accent.tertiary);\n\n    // Typography\n    root.style.setProperty('--font-family-primary', typography.fontFamily.primary);\n    root.style.setProperty('--font-family-mono', typography.fontFamily.mono);\n\n    // Spacing (full scale so CSS and layout can pull from SDK)\n    root.style.setProperty('--spacing-xxs', spacing.xxs);\n    root.style.setProperty('--spacing-xs', spacing.xs);\n    root.style.setProperty('--spacing-sm', spacing.sm);\n    root.style.setProperty('--spacing-smd', spacing.smd);\n    root.style.setProperty('--spacing-md', spacing.md);\n    root.style.setProperty('--spacing-mdl', spacing.mdl);\n    root.style.setProperty('--spacing-lg', spacing.lg);\n    root.style.setProperty('--spacing-xl', spacing.xl);\n    root.style.setProperty('--spacing-xxl', spacing.xxl);\n\n    // Border radius\n    root.style.setProperty('--radius-sm', borderRadius.sm);\n    root.style.setProperty('--radius-md', borderRadius.md);\n    root.style.setProperty('--radius-lg', borderRadius.lg);\n    root.style.setProperty('--radius-xl', borderRadius.xl);\n\n    // Animation (respect reduced motion)\n    const motionMultiplier = prefersReducedMotion ? 0 : 1;\n    root.style.setProperty('--animation-fast', prefersReducedMotion ? 'none' : animation.fast);\n    root.style.setProperty('--animation-normal', prefersReducedMotion ? 'none' : animation.normal);\n    root.style.setProperty('--animation-slow', prefersReducedMotion ? 'none' : animation.slow);\n    root.style.setProperty('--duration-fast', `${animation.duration.fast * motionMultiplier}ms`);\n    root.style.setProperty('--duration-normal', `${animation.duration.normal * motionMultiplier}ms`);\n    root.style.setProperty('--duration-slow', `${animation.duration.slow * motionMultiplier}ms`);\n\n    // Focus\n    root.style.setProperty('--focus-ring-color', focus.color);\n    root.style.setProperty('--focus-ring-width', focus.width);\n    root.style.setProperty('--focus-ring-offset', focus.offset);\n\n    // Shadows\n    root.style.setProperty('--shadow-sm', shadows.sm);\n    root.style.setProperty('--shadow-md', shadows.md);\n    root.style.setProperty('--shadow-lg', shadows.lg);\n    root.style.setProperty('--shadow-xl', shadows.xl);\n\n    // Apply base styles to body\n    document.body.style.backgroundColor = colors.background.base;\n    document.body.style.color = colors.text.primary;\n    document.body.style.fontFamily = typography.fontFamily.primary;\n  }, [tokens, theme, mode, prefersReducedMotion]);\n\n  // ──────────────────────────────────────────────────────────────────────────\n  // Scrollbar Styles — thin, elegant, theme-connected, fully accessible\n  // ──────────────────────────────────────────────────────────────────────────\n  const scrollbarCSS = useMemo(() => buildScrollbarCSS(tokens, mode, prefersReducedMotion), [tokens, mode, prefersReducedMotion]);\n\n  const value: ThemeContextValue = useMemo(\n    () => ({\n      theme,\n      mode,\n      tokens,\n      prefersReducedMotion,\n      accentColor,\n      setTheme,\n      setMode,\n      toggleMode,\n      setAccentColor,\n    }),\n    [theme, mode, tokens, prefersReducedMotion, accentColor]\n  );\n\n  // Global reduced-motion rule — ensures ALL animations and transitions across\n  // every Zendir component respect the OS preference (WCAG 2.3.3).\n  // Uses 0.01ms (not 0) so animation-end events still fire correctly.\n  const reducedMotionCSS = `@media (prefers-reduced-motion: reduce) {\n  *, *::before, *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}`;\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <style data-zendir-scrollbar=\"\">{scrollbarCSS}</style>\n      <style data-zendir-reduced-motion=\"\">{reducedMotionCSS}</style>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * useTheme - Access theme context\n * \n * @throws Error if used outside ThemeProvider\n * \n * @example\n * ```tsx\n * const { tokens, mode, toggleMode } = useTheme();\n * ```\n */\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n\n/**\n * useThemeTokens - Access only theme tokens (for memoization)\n */\nexport function useThemeTokens(): ThemeTokens {\n  return useTheme().tokens;\n}\n"],"names":[],"mappings":";;AAiBA,SAAS,oBAAoB,KAAa,QAAwB;AAChE,QAAM,aAAa,IAAI,QAAQ,KAAK,EAAE,EAAE,KAAA;AACxC,QAAM,WAAW,WAAW,WAAW,IACnC,WAAW,MAAM,EAAE,EAAE,IAAI,QAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAC/C;AAEJ,MAAI,CAAC,mBAAmB,KAAK,QAAQ,GAAG;AACtC,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,CAAC,UAAkB,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,KAAK,CAAC,CAAC;AAC7E,QAAM,IAAI,MAAM,SAAS,SAAS,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI,MAAM;AAC3D,QAAM,IAAI,MAAM,SAAS,SAAS,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI,MAAM;AAC3D,QAAM,IAAI,MAAM,SAAS,SAAS,MAAM,GAAG,CAAC,GAAG,EAAE,IAAI,MAAM;AAE3D,QAAM,QAAQ,CAAC,UAAkB,MAAM,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;AACnE,SAAO,IAAI,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;AAC3C;AA4VA,SAAS,oBAAoB,QAAmC;AAC9D,QAAM,OAAQ;AACd,QAAM,SAAS;AACf,QAAM,QAAQ;AACd,QAAM,SAAS,OAAO,OAAO;AAC7B,QAAM,QAAS,OAAO,OAAO;AAC7B,QAAM,WAAW,OAAO,OAAO;AAC/B,QAAM,SAAS,OAAO,WAAW;AAEjC,SAAO;AAAA,IACL,OAAO,EAAE,MAAM,QAAQ,MAAA;AAAA,IACvB,OAAO;AAAA,MACL,SAAS,GAAG,IAAI,UAAU,KAAK;AAAA,MAC/B,OAAS,GAAG,IAAI,UAAU,MAAM;AAAA,MAChC,OAAS,GAAG,IAAI,UAAU,MAAM;AAAA,MAChC,OAAS,GAAG,IAAI,UAAU,QAAQ;AAAA,IAAA;AAAA,IAEpC,WAAW;AAAA;AAAA,MAET,SAAS,aAAa,MAAM,gBAAgB,MAAM;AAAA,MAClD,QAAS,aAAa,MAAM,eAAe,MAAM;AAAA,MACjD,QAAS,aAAa,MAAM;AAAA,IAAA;AAAA,IAE9B,SAAW,GAAG,IAAI,UAAU,KAAK;AAAA,IACjC,UAAW,GAAG,IAAI,UAAU,MAAM;AAAA,IAClC,WAAW,GAAG,IAAI,UAAU,KAAK;AAAA,EAAA;AAErC;AAaA,MAAM,kBAAkC;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,UAAU;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAEV;AAMA,MAAM,kBAA8B;AAAA,EAClC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EAAA;AAEnB;AAEA,MAAM,mBAA+B;AAAA,EACnC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EAAA;AAEnB;AAMA,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM,CAAC,UAAkB,YAAY,KAAK,gBAAgB,KAAK;AACjE;AAEA,MAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM,CAAC,UAAkB,YAAY,KAAK,gBAAgB,KAAK;AACjE;AAOA,MAAM,eAA6B;AAAA,EACjC,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA,IACT,KAAK;AAAA;AAAA,IACL,YAAY;AAAA;AAAA,IACZ,SAAS;AAAA,MACP,UAAU;AAAA;AAAA,MACV,iBAAiB;AAAA;AAAA,MACjB,eAAe;AAAA;AAAA,MACf,oBAAoB;AAAA;AAAA,MACpB,iBAAiB;AAAA,MACjB,KAAK;AAAA;AAAA,IAAA;AAAA,EACP;AAAA,EAEF,SAAS;AAAA,IACP,qBAAqB;AAAA;AAAA,IACrB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA;AAAA,EAAA;AAAA,EAErB,MAAM;AAAA,IACJ,UAAU;AAAA;AAAA,IACV,WAAW;AAAA;AAAA,IACX,cAAc;AAAA;AAAA,IACd,UAAU;AAAA;AAAA,IACV,UAAU;AAAA;AAAA,EAAA;AAAA,EAEZ,SAAS;AAAA,IACP,SAAS;AAAA;AAAA,IACT,cAAc;AAAA;AAAA,IACd,KAAK;AAAA;AAAA,EAAA;AAET;AAMA,MAAM,iBAAkC;AAAA,EACtC,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IAAA;AAAA,IAEZ,aAAa;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,SAAS;AAAA,IACP,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,EAAA;AAAA,EAEP,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,aAAa;AAAA,IACX,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAEN,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAKV,YAAY;AAAA;AAAA,MAEV,SAAS;AAAA;AAAA,MAET,MAAM;AAAA,IAAA;AAAA;AAAA;AAAA,IAIR,SAAS;AAAA,MACP,GAAG,EAAE,UAAU,WAAW,YAAY,KAAK,eAAe,UAAU,YAAY,WAAA;AAAA,MAChF,GAAG,EAAE,UAAU,QAAQ,YAAY,KAAK,eAAe,KAAK,YAAY,SAAA;AAAA,IAAS;AAAA;AAAA,IAGnF,SAAS;AAAA,MACP,GAAG,EAAE,UAAU,YAAY,YAAY,KAAK,eAAe,UAAU,YAAY,SAAA;AAAA,MACjF,SAAS,EAAE,UAAU,YAAY,YAAY,KAAK,eAAe,UAAU,YAAY,OAAA;AAAA,MACvF,GAAG,EAAE,UAAU,UAAU,YAAY,KAAK,eAAe,KAAK,YAAY,UAAA;AAAA,MAC1E,GAAG,EAAE,UAAU,WAAW,YAAY,KAAK,eAAe,UAAU,YAAY,SAAA;AAAA,MAChF,GAAG,EAAE,UAAU,WAAW,YAAY,KAAK,eAAe,UAAU,YAAY,SAAA;AAAA,MAChF,GAAG,EAAE,UAAU,YAAY,YAAY,KAAK,eAAe,KAAK,YAAY,SAAA;AAAA,MAC5E,GAAG,EAAE,UAAU,YAAY,YAAY,KAAK,eAAe,KAAK,YAAY,SAAA;AAAA,IAAS;AAAA;AAAA,IAGvF,MAAM;AAAA,MACJ,GAAG,EAAE,UAAU,QAAQ,YAAY,KAAK,eAAe,SAAS,YAAY,SAAA;AAAA,MAC5E,SAAS,EAAE,UAAU,QAAQ,YAAY,KAAK,eAAe,SAAS,YAAY,SAAA;AAAA,MAClF,GAAG,EAAE,UAAU,YAAY,YAAY,KAAK,eAAe,SAAS,YAAY,UAAA;AAAA,MAChF,SAAS,EAAE,UAAU,YAAY,YAAY,KAAK,eAAe,SAAS,YAAY,UAAA;AAAA,MACtF,GAAG,EAAE,UAAU,WAAW,YAAY,KAAK,eAAe,KAAK,YAAY,OAAA;AAAA,MAC3E,SAAS,EAAE,UAAU,WAAW,YAAY,KAAK,eAAe,KAAK,YAAY,OAAA;AAAA,IAAO;AAAA;AAAA,IAG1F,SAAS;AAAA,MACP,GAAG,EAAE,UAAU,QAAQ,YAAY,KAAK,eAAe,SAAS,YAAY,UAAA;AAAA,MAC5E,SAAS,EAAE,UAAU,QAAQ,YAAY,KAAK,eAAe,SAAS,YAAY,UAAA;AAAA,IAAU;AAAA;AAAA;AAAA,IAI9F,UAAU;AAAA,MACR,OAAO;AAAA;AAAA,MACP,KAAK;AAAA;AAAA,MACL,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,MAAM;AAAA;AAAA,MACN,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,IAAI;AAAA;AAAA,MACJ,KAAK;AAAA;AAAA,MACL,MAAM;AAAA;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,YAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA;AAAA,MAER,UAAU;AAAA;AAAA,MACV,MAAM;AAAA,IAAA;AAAA,IAER,YAAY;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,eAAe;AAAA,MACb,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EACR;AAAA,EAEF,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV;AAMA,MAAM,kBAAmC;AAAA,EACvC,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA;AAAA,MACV,OAAO;AAAA;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IAAA;AAAA,IAEZ,aAAa;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,SAAS,eAAe;AAAA,EACxB,cAAc,eAAe;AAAA,EAC7B,aAAa,eAAe;AAAA,EAC5B,YAAY,eAAe;AAAA,EAC3B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV;AAOA,MAAM,uBAAmC;AAAA,EACvC,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,IACL,SAAS;AAAA,IACT,eAAe;AAAA,EAAA;AAEnB;AAEA,MAAM,cAA+B;AAAA,EACnC,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,SAAS;AAAA;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA;AAAA,MACV,OAAO;AAAA;AAAA,MACP,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA;AAAA,IAAA;AAAA;AAAA,IAGR,QAAQ;AAAA,MACN,SAAS;AAAA;AAAA,MACT,WAAW;AAAA;AAAA,MACX,UAAU;AAAA;AAAA,IAAA;AAAA,IAEZ,aAAa;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,SAAS,eAAe;AAAA,EACxB,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,aAAa,eAAe;AAAA,EAC5B,YAAY,eAAe;AAAA,EAC3B,SAAS;AAAA,IACP,GAAG;AAAA,IACH,MAAM,CAAC,UAAkB,YAAY,KAAK,gBAAgB,KAAK,kBAAkB,KAAK;AAAA,EAAA;AAAA,EAExF,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AACV;AAOA,MAAM,iBAAkC;AAAA,EACtC,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,IAET,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA;AAAA,MACV,OAAO;AAAA;AAAA,MACP,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA;AAAA,IAGR,QAAQ;AAAA,MACN,SAAS;AAAA;AAAA,MACT,WAAW;AAAA;AAAA,MACX,UAAU;AAAA;AAAA,IAAA;AAAA,IAEZ,aAAa;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,SAAS,eAAe;AAAA,EACxB,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,aAAa,eAAe;AAAA;AAAA,EAE5B,YAAY,eAAe;AAAA,EAC3B,SAAS;AAAA,IACP,GAAG;AAAA,IACH,MAAM,CAAC,UAAkB,YAAY,KAAK,gBAAgB,KAAK,kBAAkB,KAAK;AAAA,EAAA;AAAA,EAExF,WAAW;AAAA,EACX,OAAO;AAAA,IACL,GAAG;AAAA,EAAA;AAAA,EAEL,QAAQ;AACV;AAOA,MAAM,mBAAoC;AAAA,EACxC,QAAQ;AAAA,IACN,YAAY;AAAA;AAAA,MAEV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA;AAAA,MAEN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA;AAAA,MAEP,gBAAgB;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA;AAAA,MACV,OAAO;AAAA;AAAA,MACP,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA;AAAA,IAGR,QAAQ;AAAA,MACN,SAAS;AAAA;AAAA,MACT,WAAW;AAAA;AAAA,MACX,UAAU;AAAA;AAAA,IAAA;AAAA,IAEZ,aAAa;AAAA,MACX,SAAS;AAAA;AAAA,MACT,OAAO;AAAA;AAAA,MACP,QAAQ;AAAA;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,IAAA;AAAA,EACtB;AAAA,EAEF,SAAS,eAAe;AAAA,EACxB,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,aAAa,eAAe;AAAA;AAAA,EAE5B,YAAY,eAAe;AAAA,EAC3B,SAAS;AAAA,IACP,GAAG;AAAA;AAAA,IAEH,MAAM,CAAC,UAAkB,YAAY,KAAK,gBAAgB,KAAK;AAAA,EAAA;AAAA,EAEjE,WAAW;AAAA,EACX,OAAO;AAAA,IACL,OAAO;AAAA;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,MACL,SAAS;AAAA,MACT,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA,EAEF,QAAQ;AACV;AAOA,MAAM,0BAA2C;AAAA,EAC/C,QAAQ;AAAA,IACN,YAAY;AAAA;AAAA,MAEV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,SAAS;AAAA,IAAA;AAAA,IAEX,QAAQ;AAAA;AAAA,MAEN,SAAS;AAAA,MACT,OAAO;AAAA,MACP,OAAO;AAAA;AAAA,MAEP,gBAAgB;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA;AAAA,MACV,OAAO;AAAA;AAAA,MACP,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,UAAU;AAAA,MACV,KAAK;AAAA,IAAA;AAAA,IAEP,UAAU;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA;AAAA,IAGR,QAAQ;AAAA,MACN,SAAS;AAAA;AAAA,MACT,WAAW;AAAA;AAAA,MACX,UAAU;AAAA;AAAA,IAAA;AAAA,IAEZ,aAAa;AAAA,MACX,SAAS;AAAA;AAAA,MACT,OAAO;AAAA;AAAA,MACP,QAAQ;AAAA;AAAA,MACR,UAAU;AAAA;AAAA,MAEV,oBAAoB;AAAA,MACpB,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,IAAA;AAAA,EACtB;AAAA,EAEF,SAAS,eAAe;AAAA,EACxB,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,EAAA;AAAA,EAER,aAAa,eAAe;AAAA;AAAA,EAE5B,YAAY,eAAe;AAAA,EAC3B,SAAS;AAAA,IACP,GAAG;AAAA;AAAA,IAEH,MAAM,CAAC,UAAkB,YAAY,KAAK,gBAAgB,KAAK;AAAA,EAAA;AAAA,EAEjE,WAAW;AAAA,EACX,OAAO;AAAA,IACL,OAAO;AAAA;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,MACL,SAAS;AAAA,MACT,eAAe;AAAA,IAAA;AAAA,EACjB;AAAA,EAEF,QAAQ;AACV;AAoBA,MAAM,eAAe,cAA6C,MAAS;AAgC3E,SAAS,UAAU,KAAa,OAAuB;AACrD,QAAM,QAAQ,IAAI,QAAQ,KAAK,EAAE;AACjC,MAAI,GAAW,GAAW;AAC1B,MAAI,MAAM,WAAW,GAAG;AACtB,QAAI,SAAS,MAAM,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE;AACpC,QAAI,SAAS,MAAM,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE;AACpC,QAAI,SAAS,MAAM,CAAC,IAAI,MAAM,CAAC,GAAG,EAAE;AAAA,EACtC,OAAO;AACL,QAAI,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE;AAClC,QAAI,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE;AAClC,QAAI,SAAS,MAAM,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,EACpC;AACA,SAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK;AACxC;AAEA,SAAS,kBAAkB,QAAqB,MAAiB,eAAgC;AAC/F,QAAM,SAAS,OAAO,OAAO,OAAO;AACnB,SAAO,OAAO,WAAW;AAC5B,SAAO,OAAO,WAAW;AACvC,QAAM,UAAU,SAAS;AAGzB,QAAM,YAAgB,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,IAAI;AAChF,QAAM,aAAgB,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,IAAI;AAChF,QAAM,cAAgB,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,IAAI;AAGhF,QAAM,aAAgB,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,IAAI;AAChF,QAAM,aAAgB,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,GAAI;AAEhF,QAAM,aAAa,gBAAgB,SAAS;AAC5C,QAAM,cAAc;AAGpB,QAAM,UAAU;AAChB,QAAM,UAAU;AAEhB,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBASY,OAAO,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAcvB,UAAU;AAAA,mBACP,WAAW;AAAA;AAAA;AAAA;AAAA,gBAId,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKV,SAAS;AAAA,mBACN,WAAW;AAAA;AAAA;AAAA,gBAGd,UAAU;AAAA;AAAA;AAAA;AAAA,gBAIV,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAyBR,WAAW;AAAA;AAAA;AAAA,gBAGd,SAAS;AAAA,mBACN,WAAW;AAAA,gBACd,UAAU;AAAA;AAAA;AAAA,gBAGV,UAAU;AAAA;AAAA;AAAA,gBAGV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAkBJ,MAAM;AAAA;AAAA,mBAEV,OAAO,aAAa,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAoBvC,KAAA;AACF;AAeO,SAAS,qBAA0C;AACxD,QAAM,EAAE,QAAQ,KAAA,IAAS,SAAA;AACzB,SAAO,QAAQ,MAA2B;AACxC,UAAM,SAAS,OAAO,OAAO,OAAO;AACpC,UAAM,UAAU,SAAS;AACzB,UAAM,aAAa,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,IAAI;AAC7E,UAAM,aAAa,UAAU,UAAU,QAAQ,IAAI,IAAI,UAAU,QAAQ,IAAI;AAC7E,WAAO;AAAA;AAAA,MAEL,gBAAgB;AAAA,MAChB,gBAAgB,GAAG,UAAU,IAAI,UAAU;AAAA,MAC3C,UAAU;AAAA,IAAA;AAAA,EAEd,GAAG,CAAC,QAAQ,IAAI,CAAC;AACnB;AAeO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,OAAO,eAAe;AAAA,EACtB,MAAM,cAAc;AAAA,EACpB,UAAU;AACZ,GAA2C;AAEzC,QAAM,CAAC,OAAO,aAAa,IAAI,SAAuB,MAAM;AAC1D,QAAI,WAAW,OAAO,WAAW,aAAa;AAC5C,YAAM,QAAQ,aAAa,QAAQ,iBAAiB;AACpD,UAAI,UAAU,WAAW,UAAU,YAAY,UAAU,YAAY,UAAU,iBAAiB,UAAU,sBAAsB,UAAU,uBAAuB;AAC/J,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,CAAC,MAAM,YAAY,IAAI,SAAoB,MAAM;AACrD,QAAI,WAAW,OAAO,WAAW,aAAa;AAC5C,YAAM,QAAQ,aAAa,QAAQ,gBAAgB;AACnD,UAAI,UAAU,WAAW,UAAU,QAAQ;AACzC,eAAO;AAAA,MACT;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC;AAGD,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,KAAK;AAEtE,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,UAAM,aAAa,OAAO,WAAW,kCAAkC;AACvE,4BAAwB,WAAW,OAAO;AAE1C,UAAM,UAAU,CAAC,MAA2B,wBAAwB,EAAE,OAAO;AAC7E,eAAW,iBAAiB,UAAU,OAAO;AAC7C,WAAO,MAAM,WAAW,oBAAoB,UAAU,OAAO;AAAA,EAC/D,GAAG,CAAA,CAAE;AAGL,QAAM,WAAW,CAAC,aAA2B;AAC3C,kBAAc,QAAQ;AACtB,QAAI,WAAW,OAAO,WAAW,aAAa;AAC5C,mBAAa,QAAQ,mBAAmB,QAAQ;AAAA,IAClD;AAAA,EACF;AAEA,QAAM,UAAU,CAAC,YAAuB;AACtC,iBAAa,OAAO;AACpB,QAAI,WAAW,OAAO,WAAW,aAAa;AAC5C,mBAAa,QAAQ,kBAAkB,OAAO;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,aAAa,MAAM;AACvB,YAAQ,SAAS,SAAS,UAAU,MAAM;AAAA,EAC5C;AAGA,QAAM,CAAC,aAAa,mBAAmB,IAAI,SAAwB,MAAM;AACvE,QAAI,WAAW,OAAO,WAAW,aAAa;AAC5C,aAAO,aAAa,QAAQ,kBAAkB,KAAK;AAAA,IACrD;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,iBAAiB,CAAC,UAAyB;AAC/C,wBAAoB,KAAK;AACzB,QAAI,WAAW,OAAO,WAAW,aAAa;AAC5C,UAAI,OAAO;AACT,qBAAa,QAAQ,oBAAoB,KAAK;AAAA,MAChD,OAAO;AACL,qBAAa,WAAW,kBAAkB;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAGA,QAAM,SAAS,QAAQ,MAAmB;AAGxC,UAAM,OACJ,SAAS,UACL,kBACA,UAAU,UACR,iBACA,UAAU,WACR,cACA,UAAU,iBAAiB,UAAU,qBACnC,mBACA,UAAU,wBACR,0BACA;AACd,UAAM,gBACJ,UAAU,iBAAiB,UAAU,sBAAsB,UAAU;AACvE,UAAM,YAAY,UAAU;AAM5B,UAAM,iBAAkB,iBAAiB,cACrC;AAAA,MACE,SAAS;AAAA,MACT,WAAW,oBAAoB,aAAa,GAAG;AAAA,MAC/C,UAAU,oBAAoB,aAAa,IAAI;AAAA,IAAA,IAEjD,KAAK,OAAO;AAEhB,UAAM,gBAAgB,eAAe;AACrC,UAAM,oBAAoB,GAAG,aAAa;AAC1C,UAAM,sBAAsB,GAAG,aAAa;AAC5C,UAAM,uBAAuB,iBAAiB,UAAU,eAAe,IAAI,CAAC,uDAAuD,UAAU,eAAe,IAAI,CAAC,oBAAoB,UAAU,eAAe,IAAI,CAAC;AAEnN,UAAM,YAAY,YACd,EAAE,QAAQ,aAAa,iBAAiB,GAAA,IACxC,gBACE,EAAE,QAAQ,QAAiB,WAAW,qBAAA,IACtC,EAAE,QAAQ,aAAa,KAAK,OAAO,OAAO,KAAK,GAAA;AACrD,UAAM,kBAAkB,YACpB,EAAE,QAAQ,cAAc,iBAAiB,GAAA,IACzC,gBACE,EAAE,QAAQ,QAAiB,WAAW,qBAAA,IACtC,EAAE,QAAQ,cAAc,KAAK,OAAO,OAAO,KAAK,GAAA;AACtD,UAAM,mBAAmB,YACrB,EAAE,QAAQ,aAAa,mBAAmB,GAAA,IAC1C,gBACE,EAAE,QAAQ,QAAiB,WAAW,qBAAA,IACtC,EAAE,QAAQ,aAAa,KAAK,OAAO,OAAO,OAAO,GAAA;AAEvD,UAAM,iBAA8B;AAAA,MAClC,GAAG,KAAK;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ;AAAA,QACN,GAAG,KAAK,OAAO;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAGF,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ;AAAA,MACR,SAAS,oBAAoB,cAAc;AAAA,IAAA;AAAA,EAE/C,GAAG,CAAC,OAAO,MAAM,WAAW,CAAC;AAG7B,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AAErC,UAAM,OAAO,SAAS;AACtB,UAAM,EAAE,QAAQ,YAAY,SAAS,cAAc,WAAW,OAAO,YAAY;AAGjF,SAAK,aAAa,cAAc,IAAI;AACpC,SAAK,aAAa,gBAAgB,KAAK;AAGvC,SAAK,MAAM,YAAY,2BAA2B,OAAO,WAAW,IAAI;AACxE,SAAK,MAAM,YAAY,8BAA8B,OAAO,WAAW,OAAO;AAC9E,SAAK,MAAM,YAAY,+BAA+B,OAAO,WAAW,QAAQ;AAChF,SAAK,MAAM,YAAY,8BAA8B,OAAO,WAAW,OAAO;AAG9E,SAAK,MAAM,YAAY,kBAAkB,OAAO,OAAO,OAAO;AAC9D,SAAK,MAAM,YAAY,wBAAwB,OAAO,OAAO,KAAK;AAClE,SAAK,MAAM,YAAY,wBAAwB,OAAO,OAAO,KAAK;AAGlE,SAAK,MAAM,YAAY,wBAAwB,OAAO,KAAK,OAAO;AAClE,SAAK,MAAM,YAAY,0BAA0B,OAAO,KAAK,SAAS;AACtE,SAAK,MAAM,YAAY,yBAAyB,OAAO,KAAK,QAAQ;AACpE,SAAK,MAAM,YAAY,wBAAwB,OAAO,KAAK,OAAO;AAGlE,SAAK,MAAM,YAAY,yBAAyB,OAAO,OAAO,MAAM;AACpE,SAAK,MAAM,YAAY,0BAA0B,OAAO,OAAO,OAAO;AACtE,SAAK,MAAM,YAAY,0BAA0B,OAAO,OAAO,OAAO;AACtE,SAAK,MAAM,YAAY,0BAA0B,OAAO,OAAO,OAAO;AACtE,SAAK,MAAM,YAAY,2BAA2B,OAAO,OAAO,QAAQ;AACxE,SAAK,MAAM,YAAY,sBAAsB,OAAO,OAAO,GAAG;AAG9D,SAAK,MAAM,YAAY,+BAA+B,OAAO,YAAY,OAAO;AAChF,SAAK,MAAM,YAAY,6BAA6B,OAAO,YAAY,KAAK;AAC5E,SAAK,MAAM,YAAY,8BAA8B,OAAO,YAAY,MAAM;AAC9E,SAAK,MAAM,YAAY,gCAAgC,OAAO,YAAY,QAAQ;AAGlF,SAAK,MAAM,YAAY,0BAA0B,OAAO,OAAO,OAAO;AACtE,SAAK,MAAM,YAAY,4BAA4B,OAAO,OAAO,SAAS;AAC1E,SAAK,MAAM,YAAY,2BAA2B,OAAO,OAAO,QAAQ;AAGxE,SAAK,MAAM,YAAY,yBAAyB,WAAW,WAAW,OAAO;AAC7E,SAAK,MAAM,YAAY,sBAAsB,WAAW,WAAW,IAAI;AAGvE,SAAK,MAAM,YAAY,iBAAiB,QAAQ,GAAG;AACnD,SAAK,MAAM,YAAY,gBAAgB,QAAQ,EAAE;AACjD,SAAK,MAAM,YAAY,gBAAgB,QAAQ,EAAE;AACjD,SAAK,MAAM,YAAY,iBAAiB,QAAQ,GAAG;AACnD,SAAK,MAAM,YAAY,gBAAgB,QAAQ,EAAE;AACjD,SAAK,MAAM,YAAY,iBAAiB,QAAQ,GAAG;AACnD,SAAK,MAAM,YAAY,gBAAgB,QAAQ,EAAE;AACjD,SAAK,MAAM,YAAY,gBAAgB,QAAQ,EAAE;AACjD,SAAK,MAAM,YAAY,iBAAiB,QAAQ,GAAG;AAGnD,SAAK,MAAM,YAAY,eAAe,aAAa,EAAE;AACrD,SAAK,MAAM,YAAY,eAAe,aAAa,EAAE;AACrD,SAAK,MAAM,YAAY,eAAe,aAAa,EAAE;AACrD,SAAK,MAAM,YAAY,eAAe,aAAa,EAAE;AAGrD,UAAM,mBAAmB,uBAAuB,IAAI;AACpD,SAAK,MAAM,YAAY,oBAAoB,uBAAuB,SAAS,UAAU,IAAI;AACzF,SAAK,MAAM,YAAY,sBAAsB,uBAAuB,SAAS,UAAU,MAAM;AAC7F,SAAK,MAAM,YAAY,oBAAoB,uBAAuB,SAAS,UAAU,IAAI;AACzF,SAAK,MAAM,YAAY,mBAAmB,GAAG,UAAU,SAAS,OAAO,gBAAgB,IAAI;AAC3F,SAAK,MAAM,YAAY,qBAAqB,GAAG,UAAU,SAAS,SAAS,gBAAgB,IAAI;AAC/F,SAAK,MAAM,YAAY,mBAAmB,GAAG,UAAU,SAAS,OAAO,gBAAgB,IAAI;AAG3F,SAAK,MAAM,YAAY,sBAAsB,MAAM,KAAK;AACxD,SAAK,MAAM,YAAY,sBAAsB,MAAM,KAAK;AACxD,SAAK,MAAM,YAAY,uBAAuB,MAAM,MAAM;AAG1D,SAAK,MAAM,YAAY,eAAe,QAAQ,EAAE;AAChD,SAAK,MAAM,YAAY,eAAe,QAAQ,EAAE;AAChD,SAAK,MAAM,YAAY,eAAe,QAAQ,EAAE;AAChD,SAAK,MAAM,YAAY,eAAe,QAAQ,EAAE;AAGhD,aAAS,KAAK,MAAM,kBAAkB,OAAO,WAAW;AACxD,aAAS,KAAK,MAAM,QAAQ,OAAO,KAAK;AACxC,aAAS,KAAK,MAAM,aAAa,WAAW,WAAW;AAAA,EACzD,GAAG,CAAC,QAAQ,OAAO,MAAM,oBAAoB,CAAC;AAK9C,QAAM,eAAe,QAAQ,MAAM,kBAAkB,QAAQ,MAAM,oBAAoB,GAAG,CAAC,QAAQ,MAAM,oBAAoB,CAAC;AAE9H,QAAM,QAA2B;AAAA,IAC/B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,CAAC,OAAO,MAAM,QAAQ,sBAAsB,WAAW;AAAA,EAAA;AAMzD,QAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASzB,SACE,qBAAC,aAAa,UAAb,EAAsB,OACrB,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,yBAAsB,IAAI,UAAA,cAAa;AAAA,IAC9C,oBAAC,SAAA,EAAM,8BAA2B,IAAI,UAAA,kBAAiB;AAAA,IACtD;AAAA,EAAA,GACH;AAEJ;AAYO,SAAS,WAA8B;AAC5C,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,8CAA8C;AAAA,EAChE;AACA,SAAO;AACT;AAKO,SAAS,iBAA8B;AAC5C,SAAO,WAAW;AACpB;"}

package/dist/react/theme/astro-tokens.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @zendir/ui - Astro UX Design System Token Integration
+ *
+ * Official Astro UX Design System tokens integration with Zendir branding.
+ * Uses @astrouxds/tokens package for Tier 3 compliance.
+ *
+ * This module combines:
+ * - AstroUXDS official tokens (status colors, spacing, typography)
+ * - Zendir brand colors (accent, interactive elements)
+ *
+ * @see https://www.astrouxds.com/design-tokens/
+ * @see https://www.astrouxds.com/compliance/astro-design-compliance/
+ */
+/**
+ * Astro UX Design System CSS Custom Properties
+ * These are set by importing @astrouxds/tokens CSS
+ */
+export interface AstroTokens {
+    'color-background-surface-default': string;
+    'color-background-surface-elevated': string;
+    'color-background-interactive-default': string;
+    'color-background-interactive-hover': string;
+    'color-text-primary': string;
+    'color-text-secondary': string;
+    'color-text-status-normal': string;
+    'color-text-status-standby': string;
+    'color-text-status-caution': string;
+    'color-text-status-serious': string;
+    'color-text-status-critical': string;
+    'color-text-status-off': string;
+    'color-border-interactive-default': string;
+    'color-border-interactive-hover': string;
+    'color-border-interactive-focus': string;
+    'color-status-normal': string;
+    'color-status-standby': string;
+    'color-status-caution': string;
+    'color-status-serious': string;
+    'color-status-critical': string;
+    'color-status-off': string;
+    'spacing-0': string;
+    'spacing-1': string;
+    'spacing-2': string;
+    'spacing-3': string;
+    'spacing-4': string;
+    'spacing-5': string;
+    'spacing-6': string;
+    'spacing-8': string;
+    'spacing-10': string;
+    'spacing-12': string;
+    'font-family-base': string;
+    'font-family-mono': string;
+    'font-size-xs': string;
+    'font-size-sm': string;
+    'font-size-base': string;
+    'font-size-lg': string;
+    'font-size-xl': string;
+    'font-size-2xl': string;
+    'font-weight-normal': string;
+    'font-weight-medium': string;
+    'font-weight-semibold': string;
+    'font-weight-bold': string;
+    'radius-base': string;
+    'radius-sm': string;
+    'radius-lg': string;
+}
+/**
+ * Get Astro token value from CSS custom property
+ */
+export declare function getAstroToken(token: keyof AstroTokens): string;
+/**
+ * Astro spacing scale (4px base unit)
+ */
+export declare const ASTRO_SPACING: {
+    readonly 0: "0";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+};
+/**
+ * Astro status colors (official values)
+ * DO NOT MODIFY - These are reserved for status indication only
+ * Per AstroUXDS compliance, status colors must not be used for general data viz
+ */
+export declare const ASTRO_STATUS_COLORS: {
+    readonly normal: "#00d084";
+    readonly standby: "#ffb020";
+    readonly caution: "#ffb020";
+    readonly serious: "#ff6b35";
+    readonly critical: "#ff3838";
+    readonly off: "#6b7280";
+};
+/**
+ * Zendir Brand Colors
+ * These complement AstroUXDS tokens for brand identity
+ * Use for accents, interactive elements, and data visualization
+ */
+export declare const ZENDIR_BRAND_COLORS: {
+    /** Electric Blue - Primary accent (#3E3CFF) */
+    readonly electric: "#3E3CFF";
+    /** Electric Light - Lighter variant */
+    readonly electricLight: "#6B69FF";
+    /** Electric Dark - Darker variant */
+    readonly electricDark: "#3230CC";
+    /** Purple - Secondary accent (#9D70FF) */
+    readonly purple: "#9D70FF";
+    /** Purple Light - Lighter variant */
+    readonly purpleLight: "#B48DFF";
+    /** Purple Dark - Darker variant */
+    readonly purpleDark: "#7E5ACC";
+    /** Prussian Blue - Subsection/Footer color (#1B2DA0) */
+    readonly prussianBlue: "#1B2DA0";
+    /** Prussian Blue Light */
+    readonly prussianBlueLight: "#2840C0";
+};
+/**
+ * Zendir Accent Colors for UI elements
+ * Use these for interactive elements, highlights, and branding
+ * while maintaining AstroUXDS compliance for status
+ */
+export declare const ZENDIR_ACCENT_COLORS: {
+    /** Primary accent - Zendir Electric (interactive, links, CTAs) */
+    readonly primary: "#3E3CFF";
+    /** Secondary accent - Zendir Purple (secondary actions, highlights) */
+    readonly secondary: "#9D70FF";
+    /** Tertiary accent - Teal from AstroUXDS palette */
+    readonly tertiary: "#00c7cb";
+    /** Info accent - Bright blue */
+    readonly info: "#4dacff";
+    /** Highlight - Electric Light (focus states, selection) */
+    readonly highlight: "#6B69FF";
+};
+/**
+ * Astro status shapes (for accessibility - redundant coding)
+ */
+export declare const ASTRO_STATUS_SHAPES: {
+    readonly normal: "circle";
+    readonly standby: "square";
+    readonly caution: "triangle";
+    readonly serious: "diamond";
+    readonly critical: "diamond";
+    readonly off: "circle-hollow";
+};
+/**
+ * Apply Astro tokens to document root
+ * Call this after importing @astrouxds/tokens CSS
+ */
+export declare function applyAstroTokens(): void;

package/dist/react/theme/cardAccent.d.ts

@@ -0,0 +1,75 @@
+import { default as React, ReactNode } from 'react';
+
+export type CardAccentKey = 'cyan' | 'electric' | 'purple' | 'teal' | 'prussianBlue' | 'green' | 'amber' | 'mix';
+export interface CardAccentColor {
+    /** Display label */
+    label: string;
+    /** Hex color value (or 'mix' for automatic) */
+    value: string;
+}
+/**
+ * Predefined card accent colors
+ * These are optimized for dark themes and space operations UIs
+ */
+export declare const CARD_ACCENT_COLORS: Record<CardAccentKey, CardAccentColor>;
+/**
+ * Space system keyword → accent color mapping
+ * Used in 'mix' mode to automatically assign colors based on content
+ */
+export declare const SPACE_SYSTEM_COLORS: Record<string, string>;
+/**
+ * Get accent color based on title/content and accent mode
+ *
+ * @param title - Content title or description to analyze
+ * @param accentMode - Current accent mode (specific color or 'mix')
+ * @returns Hex color string or undefined
+ *
+ * @example
+ * ```tsx
+ * getSystemAccentColor('Power Systems Overview', 'mix') // '#22c55e'
+ * getSystemAccentColor('Power Systems', 'purple') // '#a855f7'
+ * ```
+ */
+export declare function getSystemAccentColor(title: string, accentMode: CardAccentKey): string | undefined;
+/**
+ * Get all accent color options for building UI selectors
+ */
+export declare function getAccentColorOptions(): Array<{
+    key: CardAccentKey;
+    label: string;
+    value: string;
+}>;
+export interface CardAccentContextValue {
+    /** Current accent mode */
+    accentMode: CardAccentKey;
+    /** Get accent color for a given title/content */
+    getAccentColor: (title: string) => string | undefined;
+    /** All available accent options */
+    accentOptions: Array<{
+        key: CardAccentKey;
+        label: string;
+        value: string;
+    }>;
+}
+export interface CardAccentProviderProps {
+    /** Accent mode to use */
+    accentMode?: CardAccentKey;
+    /** Children */
+    children: ReactNode;
+}
+/**
+ * Provider for card accent context
+ * Wrap your app or section to provide consistent accent coloring
+ */
+export declare function CardAccentProvider({ accentMode, children, }: CardAccentProviderProps): React.ReactElement;
+/**
+ * Hook to access card accent context
+ *
+ * @example
+ * ```tsx
+ * const { getAccentColor, accentMode } = useCardAccent();
+ * <Container accentColor={getAccentColor('Power Chart')} />
+ * ```
+ */
+export declare function useCardAccent(): CardAccentContextValue;
+export default CardAccentProvider;

package/dist/react/theme/cardAccent.js

@@ -0,0 +1,137 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo, useContext, createContext } from "react";
+const CARD_ACCENT_COLORS = {
+  cyan: { label: "Cyan", value: "#00c8ff" },
+  electric: { label: "Electric", value: "#4d7cff" },
+  purple: { label: "Purple", value: "#a855f7" },
+  teal: { label: "Teal", value: "#14b8a6" },
+  prussianBlue: { label: "Prussian Blue", value: "#1e3a5f" },
+  green: { label: "Green", value: "#22c55e" },
+  amber: { label: "Amber", value: "#f59e0b" },
+  mix: { label: "Mix (Per System)", value: "mix" }
+};
+const SPACE_SYSTEM_COLORS = {
+  // === Telemetry & Data ===
+  "telemetry": "#00c8ff",
+  "data": "#00c8ff",
+  "preview": "#00c8ff",
+  "stream": "#00c8ff",
+  // === Power Systems ===
+  "power": "#22c55e",
+  "battery": "#22c55e",
+  "solar": "#22c55e",
+  "voltage": "#22c55e",
+  "energy": "#22c55e",
+  // === Thermal Systems ===
+  "thermal": "#f59e0b",
+  "temperature": "#f59e0b",
+  "heatmap": "#f59e0b",
+  "heater": "#f59e0b",
+  // === Attitude & Control ===
+  "attitude": "#a855f7",
+  "control": "#a855f7",
+  "orientation": "#a855f7",
+  "pointing": "#a855f7",
+  "gyro": "#a855f7",
+  // === Communications ===
+  "spectrum": "#4d7cff",
+  "link": "#4d7cff",
+  "rf": "#4d7cff",
+  "downlink": "#4d7cff",
+  "uplink": "#4d7cff",
+  "packet": "#4d7cff",
+  "antenna": "#4d7cff",
+  "comm": "#4d7cff",
+  // === Navigation & Orbit ===
+  "orbit": "#14b8a6",
+  "eclipse": "#14b8a6",
+  "polar": "#14b8a6",
+  "heliocentric": "#14b8a6",
+  "maneuver": "#14b8a6",
+  "contact": "#14b8a6",
+  "ground": "#14b8a6",
+  "pass": "#14b8a6",
+  // === Sensors & Instruments ===
+  "sensor": "#00c8ff",
+  "star": "#00c8ff",
+  "tracker": "#00c8ff",
+  "scatter": "#00c8ff",
+  "payload": "#00c8ff",
+  // === Health & Status ===
+  "health": "#22c55e",
+  "gauge": "#22c55e",
+  "subsystem": "#22c55e",
+  "status": "#22c55e",
+  // === Analytics & Visualization ===
+  "sankey": "#a855f7",
+  "treemap": "#4d7cff",
+  "sunburst": "#14b8a6",
+  "parallel": "#f59e0b",
+  "radar": "#00c8ff",
+  "graph": "#a855f7",
+  "candlestick": "#f59e0b",
+  "histogram": "#00c8ff",
+  "pie": "#a855f7",
+  "donut": "#a855f7",
+  "bubble": "#14b8a6",
+  "rose": "#f59e0b",
+  // === 3D Visualizations ===
+  "3d": "#4d7cff",
+  "scatter3d": "#00c8ff",
+  "bar3d": "#22c55e",
+  "surface3d": "#f59e0b",
+  "lines3d": "#a855f7",
+  "debris": "#f59e0b",
+  "constellation": "#4d7cff",
+  "collision": "#f59e0b",
+  "satellite": "#4d7cff",
+  // === Default ===
+  "default": "#00c8ff"
+};
+function getSystemAccentColor(title, accentMode) {
+  if (accentMode !== "mix") {
+    return CARD_ACCENT_COLORS[accentMode].value;
+  }
+  const lowerTitle = title.toLowerCase();
+  for (const [keyword, color] of Object.entries(SPACE_SYSTEM_COLORS)) {
+    if (lowerTitle.includes(keyword)) {
+      return color;
+    }
+  }
+  return SPACE_SYSTEM_COLORS.default;
+}
+function getAccentColorOptions() {
+  return Object.entries(CARD_ACCENT_COLORS).map(([key, config]) => ({
+    key,
+    label: config.label,
+    value: config.value
+  }));
+}
+const CardAccentContext = createContext({
+  accentMode: "mix",
+  getAccentColor: () => void 0,
+  accentOptions: getAccentColorOptions()
+});
+function CardAccentProvider({
+  accentMode = "mix",
+  children
+}) {
+  const value = useMemo(() => ({
+    accentMode,
+    getAccentColor: (title) => getSystemAccentColor(title, accentMode),
+    accentOptions: getAccentColorOptions()
+  }), [accentMode]);
+  return /* @__PURE__ */ jsx(CardAccentContext.Provider, { value, children });
+}
+function useCardAccent() {
+  return useContext(CardAccentContext);
+}
+export {
+  CARD_ACCENT_COLORS,
+  CardAccentProvider,
+  SPACE_SYSTEM_COLORS,
+  getAccentColorOptions,
+  getSystemAccentColor,
+  useCardAccent
+};
+//# sourceMappingURL=cardAccent.js.map

package/dist/react/theme/cardAccent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cardAccent.js","sources":["../../../src/react/theme/cardAccent.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Card Accent System\r\n * \r\n * Provides accent color configuration for cards and containers in space operations UIs.\r\n * Maps space system domains to appropriate accent colors for visual organization.\r\n * \r\n * Features:\r\n * - Predefined accent colors for common use cases\r\n * - Space system keyword → color mapping for auto-coloring\r\n * - Mix mode for automatic per-domain coloring\r\n * - React context and hook for easy integration\r\n * \r\n * @example\r\n * ```tsx\r\n * import { \r\n *   CardAccentProvider, \r\n *   useCardAccent, \r\n *   getSystemAccentColor \r\n * } from '@zendir/ui';\r\n * \r\n * // Wrap your app with the provider\r\n * <CardAccentProvider accentMode=\"mix\">\r\n *   <MyApp />\r\n * </CardAccentProvider>\r\n * \r\n * // Use in components\r\n * const { getAccentColor } = useCardAccent();\r\n * <Container accentColor={getAccentColor('Power Systems')} />\r\n * ```\r\n */\r\n\r\nimport React, { createContext, useContext, useMemo, type ReactNode } from 'react';\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport type CardAccentKey = \r\n  | 'cyan'\r\n  | 'electric' \r\n  | 'purple'\r\n  | 'teal'\r\n  | 'prussianBlue'\r\n  | 'green'\r\n  | 'amber'\r\n  | 'mix';\r\n\r\nexport interface CardAccentColor {\r\n  /** Display label */\r\n  label: string;\r\n  /** Hex color value (or 'mix' for automatic) */\r\n  value: string;\r\n}\r\n\r\n// =============================================================================\r\n// Accent Color Definitions\r\n// =============================================================================\r\n\r\n/**\r\n * Predefined card accent colors\r\n * These are optimized for dark themes and space operations UIs\r\n */\r\nexport const CARD_ACCENT_COLORS: Record<CardAccentKey, CardAccentColor> = {\r\n  cyan: { label: 'Cyan', value: '#00c8ff' },\r\n  electric: { label: 'Electric', value: '#4d7cff' },\r\n  purple: { label: 'Purple', value: '#a855f7' },\r\n  teal: { label: 'Teal', value: '#14b8a6' },\r\n  prussianBlue: { label: 'Prussian Blue', value: '#1e3a5f' },\r\n  green: { label: 'Green', value: '#22c55e' },\r\n  amber: { label: 'Amber', value: '#f59e0b' },\r\n  mix: { label: 'Mix (Per System)', value: 'mix' },\r\n} as const;\r\n\r\n/**\r\n * Space system keyword → accent color mapping\r\n * Used in 'mix' mode to automatically assign colors based on content\r\n */\r\nexport const SPACE_SYSTEM_COLORS: Record<string, string> = {\r\n  // === Telemetry & Data ===\r\n  'telemetry': '#00c8ff',\r\n  'data': '#00c8ff',\r\n  'preview': '#00c8ff',\r\n  'stream': '#00c8ff',\r\n  \r\n  // === Power Systems ===\r\n  'power': '#22c55e',\r\n  'battery': '#22c55e',\r\n  'solar': '#22c55e',\r\n  'voltage': '#22c55e',\r\n  'energy': '#22c55e',\r\n  \r\n  // === Thermal Systems ===\r\n  'thermal': '#f59e0b',\r\n  'temperature': '#f59e0b',\r\n  'heatmap': '#f59e0b',\r\n  'heater': '#f59e0b',\r\n  \r\n  // === Attitude & Control ===\r\n  'attitude': '#a855f7',\r\n  'control': '#a855f7',\r\n  'orientation': '#a855f7',\r\n  'pointing': '#a855f7',\r\n  'gyro': '#a855f7',\r\n  \r\n  // === Communications ===\r\n  'spectrum': '#4d7cff',\r\n  'link': '#4d7cff',\r\n  'rf': '#4d7cff',\r\n  'downlink': '#4d7cff',\r\n  'uplink': '#4d7cff',\r\n  'packet': '#4d7cff',\r\n  'antenna': '#4d7cff',\r\n  'comm': '#4d7cff',\r\n  \r\n  // === Navigation & Orbit ===\r\n  'orbit': '#14b8a6',\r\n  'eclipse': '#14b8a6',\r\n  'polar': '#14b8a6',\r\n  'heliocentric': '#14b8a6',\r\n  'maneuver': '#14b8a6',\r\n  'contact': '#14b8a6',\r\n  'ground': '#14b8a6',\r\n  'pass': '#14b8a6',\r\n  \r\n  // === Sensors & Instruments ===\r\n  'sensor': '#00c8ff',\r\n  'star': '#00c8ff',\r\n  'tracker': '#00c8ff',\r\n  'scatter': '#00c8ff',\r\n  'payload': '#00c8ff',\r\n  \r\n  // === Health & Status ===\r\n  'health': '#22c55e',\r\n  'gauge': '#22c55e',\r\n  'subsystem': '#22c55e',\r\n  'status': '#22c55e',\r\n  \r\n  // === Analytics & Visualization ===\r\n  'sankey': '#a855f7',\r\n  'treemap': '#4d7cff',\r\n  'sunburst': '#14b8a6',\r\n  'parallel': '#f59e0b',\r\n  'radar': '#00c8ff',\r\n  'graph': '#a855f7',\r\n  'candlestick': '#f59e0b',\r\n  'histogram': '#00c8ff',\r\n  'pie': '#a855f7',\r\n  'donut': '#a855f7',\r\n  'bubble': '#14b8a6',\r\n  'rose': '#f59e0b',\r\n  \r\n  // === 3D Visualizations ===\r\n  '3d': '#4d7cff',\r\n  'scatter3d': '#00c8ff',\r\n  'bar3d': '#22c55e',\r\n  'surface3d': '#f59e0b',\r\n  'lines3d': '#a855f7',\r\n  'debris': '#f59e0b',\r\n  'constellation': '#4d7cff',\r\n  'collision': '#f59e0b',\r\n  'satellite': '#4d7cff',\r\n  \r\n  // === Default ===\r\n  'default': '#00c8ff',\r\n} as const;\r\n\r\n// =============================================================================\r\n// Utility Functions\r\n// =============================================================================\r\n\r\n/**\r\n * Get accent color based on title/content and accent mode\r\n * \r\n * @param title - Content title or description to analyze\r\n * @param accentMode - Current accent mode (specific color or 'mix')\r\n * @returns Hex color string or undefined\r\n * \r\n * @example\r\n * ```tsx\r\n * getSystemAccentColor('Power Systems Overview', 'mix') // '#22c55e'\r\n * getSystemAccentColor('Power Systems', 'purple') // '#a855f7'\r\n * ```\r\n */\r\nexport function getSystemAccentColor(\r\n  title: string, \r\n  accentMode: CardAccentKey\r\n): string | undefined {\r\n  if (accentMode !== 'mix') {\r\n    return CARD_ACCENT_COLORS[accentMode].value;\r\n  }\r\n  \r\n  const lowerTitle = title.toLowerCase();\r\n  for (const [keyword, color] of Object.entries(SPACE_SYSTEM_COLORS)) {\r\n    if (lowerTitle.includes(keyword)) {\r\n      return color;\r\n    }\r\n  }\r\n  return SPACE_SYSTEM_COLORS.default;\r\n}\r\n\r\n/**\r\n * Get all accent color options for building UI selectors\r\n */\r\nexport function getAccentColorOptions(): Array<{ key: CardAccentKey; label: string; value: string }> {\r\n  return Object.entries(CARD_ACCENT_COLORS).map(([key, config]) => ({\r\n    key: key as CardAccentKey,\r\n    label: config.label,\r\n    value: config.value,\r\n  }));\r\n}\r\n\r\n// =============================================================================\r\n// React Context & Provider\r\n// =============================================================================\r\n\r\nexport interface CardAccentContextValue {\r\n  /** Current accent mode */\r\n  accentMode: CardAccentKey;\r\n  /** Get accent color for a given title/content */\r\n  getAccentColor: (title: string) => string | undefined;\r\n  /** All available accent options */\r\n  accentOptions: Array<{ key: CardAccentKey; label: string; value: string }>;\r\n}\r\n\r\nconst CardAccentContext = createContext<CardAccentContextValue>({\r\n  accentMode: 'mix',\r\n  getAccentColor: () => undefined,\r\n  accentOptions: getAccentColorOptions(),\r\n});\r\n\r\nexport interface CardAccentProviderProps {\r\n  /** Accent mode to use */\r\n  accentMode?: CardAccentKey;\r\n  /** Children */\r\n  children: ReactNode;\r\n}\r\n\r\n/**\r\n * Provider for card accent context\r\n * Wrap your app or section to provide consistent accent coloring\r\n */\r\nexport function CardAccentProvider({\r\n  accentMode = 'mix',\r\n  children,\r\n}: CardAccentProviderProps): React.ReactElement {\r\n  const value = useMemo((): CardAccentContextValue => ({\r\n    accentMode,\r\n    getAccentColor: (title: string) => getSystemAccentColor(title, accentMode),\r\n    accentOptions: getAccentColorOptions(),\r\n  }), [accentMode]);\r\n\r\n  return (\r\n    <CardAccentContext.Provider value={value}>\r\n      {children}\r\n    </CardAccentContext.Provider>\r\n  );\r\n}\r\n\r\n/**\r\n * Hook to access card accent context\r\n * \r\n * @example\r\n * ```tsx\r\n * const { getAccentColor, accentMode } = useCardAccent();\r\n * <Container accentColor={getAccentColor('Power Chart')} />\r\n * ```\r\n */\r\nexport function useCardAccent(): CardAccentContextValue {\r\n  return useContext(CardAccentContext);\r\n}\r\n\r\nexport default CardAccentProvider;\r\n"],"names":[],"mappings":"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"}

package/dist/react/theme/config.d.ts

@@ -0,0 +1,39 @@
+import { ThemeVariant, ThemeMode } from './ThemeProvider';
+
+export interface ThemeConfig {
+    /** Default theme variant */
+    defaultTheme?: ThemeVariant;
+    /** Default theme mode */
+    defaultMode?: ThemeMode;
+    /** Persist theme selection to localStorage */
+    persist?: boolean;
+}
+/**
+ * Default theme configuration
+ *
+ * Available themes:
+ * - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents
+ * - 'astro' - Astro UX (U.S. Space Force) compliant theme
+ * - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics
+ * - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes
+ */
+export declare const DEFAULT_THEME_CONFIG: ThemeConfig;
+/**
+ * Get theme configuration from environment or use defaults
+ */
+export declare function getThemeConfig(): ThemeConfig;
+/**
+ * Set default theme at build/runtime
+ *
+ * @example
+ * ```tsx
+ * // In your app root
+ * import { setDefaultTheme } from '@zendir/ui/react/theme/config';
+ *
+ * // Zen (Hybrid) is the default; override if needed:
+ * setDefaultTheme('hybrid');
+ * setDefaultTheme('purple-hue');
+ * setDefaultTheme('astro');
+ * ```
+ */
+export declare function setDefaultTheme(theme: ThemeVariant): void;

package/dist/react/theme/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @zendir/ui - Theme System
+ */
+export { ThemeProvider, useTheme, useThemeTokens, useScrollbarStyles } from './ThemeProvider';
+export type { ThemeVariant, ThemeMode, ThemeColors, ThemeTokens, ThemeContextValue, ThemeProviderProps, ThemeAnimation, ThemeFocus, LayoutTokens, BorderTokens, } from './ThemeProvider';
+export { DEFAULT_THEME_CONFIG, getThemeConfig, setDefaultTheme } from './config';
+export type { ThemeConfig } from './config';
+export { CardAccentProvider, useCardAccent, getSystemAccentColor, getAccentColorOptions, CARD_ACCENT_COLORS, SPACE_SYSTEM_COLORS, } from './cardAccent';
+export type { CardAccentKey, CardAccentColor, CardAccentContextValue, CardAccentProviderProps, } from './cardAccent';