@zendir/ui 0.1.6 → 0.1.8

package/dist/react/core/Typography.d.ts

@@ -43,7 +43,7 @@ export interface TypographyProps {
  * Standard font family fallback stack per AstroUXDS
  * Roboto is the primary font for all Astro applications
  */
-export declare const FONT_FAMILY_PRIMARY = "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+export declare const FONT_FAMILY_PRIMARY = "var(--font-family-primary, \"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif)";
 /**
  * Monospace font stack for tabular data and code
  * Roboto Mono is the primary monospace font for Astro

package/dist/react/core/Typography.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useTheme } from "../theme/ThemeProvider.js";
-const FONT_FAMILY_PRIMARY = '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif';
+const FONT_FAMILY_PRIMARY = 'var(--font-family-primary, "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif)';
 const FONT_FAMILY_MONO = '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace';
 const FONT_WEIGHTS = {
   light: 300,
@@ -11,16 +11,16 @@ const FONT_WEIGHTS = {
 function getTypographyStyles(variant) {
   const styles = {
     // Display variants
-    display1: { fontSize: "3.75rem", fontWeight: 300, lineHeight: "4.375rem", letterSpacing: "-0.5px" },
-    display2: { fontSize: "3rem", fontWeight: 400, lineHeight: "3.5rem", letterSpacing: "0" },
+    display1: { fontSize: "3.75rem", fontWeight: 300, lineHeight: "4.375rem", letterSpacing: "-0.5px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    display2: { fontSize: "3rem", fontWeight: 400, lineHeight: "3.5rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
     // Heading variants
-    h1: { fontSize: "2.125rem", fontWeight: 400, lineHeight: "2.5rem", letterSpacing: "0.25px" },
-    h1Bold: { fontSize: "2.125rem", fontWeight: 700, lineHeight: "2.5rem", letterSpacing: "0.25px" },
-    h2: { fontSize: "1.5rem", fontWeight: 400, lineHeight: "1.75rem", letterSpacing: "0" },
-    h3: { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.5rem", letterSpacing: "0.15px" },
-    h4: { fontSize: "1.25rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0.15px" },
-    h5: { fontSize: "1.125rem", fontWeight: 400, lineHeight: "1.5rem", letterSpacing: "0" },
-    h6: { fontSize: "1.125rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0" },
+    h1: { fontSize: "2.125rem", fontWeight: 400, lineHeight: "2.5rem", letterSpacing: "0.25px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    h1Bold: { fontSize: "2.125rem", fontWeight: 700, lineHeight: "2.5rem", letterSpacing: "0.25px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    h2: { fontSize: "1.5rem", fontWeight: 400, lineHeight: "1.75rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    h3: { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.5rem", letterSpacing: "0.15px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    h4: { fontSize: "1.25rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0.15px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    h5: { fontSize: "1.125rem", fontWeight: 400, lineHeight: "1.5rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
+    h6: { fontSize: "1.125rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
     // Body variants
     body1: { fontSize: "1rem", fontWeight: 400, lineHeight: "1.5rem", letterSpacing: "0.5px" },
     body1Bold: { fontSize: "1rem", fontWeight: 700, lineHeight: "1.5rem", letterSpacing: "0.5px" },

package/dist/react/core/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../src/react/core/Typography.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Typography Component\r\n * \r\n * AstroUXDS-compliant typography component providing consistent text styling\r\n * across the design system. All sizing uses rem units per Astro specifications.\r\n * \r\n * Typography Scale (Astro UX Design System):\r\n * - Display: Large hero text (display1, display2)\r\n * - Heading: Section headers (h1-h6)\r\n * - Body: Content text (body1, body2, body3)\r\n * - Control: UI element labels\r\n * - Mono: Tabular/code data\r\n * \r\n * @see https://www.astrouxds.com/foundations/typography/\r\n */\r\n\r\nimport React from 'react';\r\nimport { useTheme } from '../theme/ThemeProvider';\r\n\r\n// ============================================================================\r\n// Typography Variants (AstroUXDS Compliant)\r\n// ============================================================================\r\n\r\n/**\r\n * Typography variant following Astro UX Design System\r\n * Maps directly to official Astro typography tokens\r\n */\r\nexport type TypographyVariant =\r\n  // Display - Large hero text\r\n  | 'display1'\r\n  | 'display2'\r\n  // Headings\r\n  | 'h1'\r\n  | 'h1Bold'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  // Body text\r\n  | 'body1'\r\n  | 'body1Bold'\r\n  | 'body2'\r\n  | 'body2Bold'\r\n  | 'body3'\r\n  | 'body3Bold'\r\n  // Control (UI labels)\r\n  | 'control1'\r\n  | 'control1Bold'\r\n  // Compact variants for dense UIs (cards, badges)\r\n  | 'compact'      // 10px - for tight spaces\r\n  | 'compactBold'\r\n  | 'micro'        // 9px - for very tight spaces\r\n  | 'microBold'\r\n  // Monospace for data/code\r\n  | 'mono'\r\n  | 'monoSmall'\r\n  | 'monoCompact';\r\n\r\n/**\r\n * Semantic element to render\r\n */\r\nexport type TypographyElement =\r\n  | 'h1'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  | 'p'\r\n  | 'span'\r\n  | 'div'\r\n  | 'label'\r\n  | 'code'\r\n  | 'pre';\r\n\r\n/**\r\n * Text color variants\r\n */\r\nexport type TypographyColor =\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'tertiary'\r\n  | 'muted'\r\n  | 'inverse'\r\n  | 'inherit'\r\n  // Status colors\r\n  | 'normal'\r\n  | 'standby'\r\n  | 'caution'\r\n  | 'serious'\r\n  | 'critical'\r\n  | 'off';\r\n\r\nexport interface TypographyProps {\r\n  /** Typography variant (required) */\r\n  variant: TypographyVariant;\r\n  /** HTML element to render */\r\n  as?: TypographyElement;\r\n  /** Text color */\r\n  color?: TypographyColor;\r\n  /** Enable tabular figures for numeric alignment */\r\n  tabular?: boolean;\r\n  /** Truncate with ellipsis */\r\n  truncate?: boolean;\r\n  /** Text alignment */\r\n  align?: 'left' | 'center' | 'right';\r\n  /** Disable text wrapping */\r\n  noWrap?: boolean;\r\n  /** Transform text case */\r\n  transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';\r\n  /** Additional CSS styles */\r\n  style?: React.CSSProperties;\r\n  /** Additional CSS class */\r\n  className?: string;\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n  /** Test ID */\r\n  'data-testid'?: string;\r\n}\r\n\r\n// ============================================================================\r\n// AstroUXDS Font Stack (Standardized)\r\n// ============================================================================\r\n\r\n/**\r\n * Standard font family fallback stack per AstroUXDS\r\n * Roboto is the primary font for all Astro applications\r\n */\r\nexport const FONT_FAMILY_PRIMARY = '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif';\r\n\r\n/**\r\n * Monospace font stack for tabular data and code\r\n * Roboto Mono is the primary monospace font for Astro\r\n */\r\nexport const FONT_FAMILY_MONO = '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace';\r\n\r\n// ============================================================================\r\n// AstroUXDS Font Weights\r\n// Official weights: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)\r\n// Note: Astro does NOT use 600 (semibold) - use 500 or 700 instead\r\n// ============================================================================\r\n\r\nexport const FONT_WEIGHTS = {\r\n  light: 300,\r\n  regular: 400,\r\n  medium: 500,\r\n  bold: 700,\r\n} as const;\r\n\r\n// ============================================================================\r\n// Typography Style Definitions\r\n// ============================================================================\r\n\r\ninterface TypographyStyleDef {\r\n  fontSize: string;\r\n  fontWeight: number;\r\n  lineHeight: string;\r\n  letterSpacing: string;\r\n  fontFamily?: string;\r\n}\r\n\r\n/**\r\n * Get typography styles for a variant\r\n * All sizes in rem for Astro compliance\r\n */\r\nfunction getTypographyStyles(variant: TypographyVariant): TypographyStyleDef {\r\n  const styles: Record<TypographyVariant, TypographyStyleDef> = {\r\n    // Display variants\r\n    display1: { fontSize: '3.75rem', fontWeight: 300, lineHeight: '4.375rem', letterSpacing: '-0.5px' },\r\n    display2: { fontSize: '3rem', fontWeight: 400, lineHeight: '3.5rem', letterSpacing: '0' },\r\n    \r\n    // Heading variants\r\n    h1: { fontSize: '2.125rem', fontWeight: 400, lineHeight: '2.5rem', letterSpacing: '0.25px' },\r\n    h1Bold: { fontSize: '2.125rem', fontWeight: 700, lineHeight: '2.5rem', letterSpacing: '0.25px' },\r\n    h2: { fontSize: '1.5rem', fontWeight: 400, lineHeight: '1.75rem', letterSpacing: '0' },\r\n    h3: { fontSize: '1.25rem', fontWeight: 500, lineHeight: '1.5rem', letterSpacing: '0.15px' },\r\n    h4: { fontSize: '1.25rem', fontWeight: 300, lineHeight: '1.5rem', letterSpacing: '0.15px' },\r\n    h5: { fontSize: '1.125rem', fontWeight: 400, lineHeight: '1.5rem', letterSpacing: '0' },\r\n    h6: { fontSize: '1.125rem', fontWeight: 300, lineHeight: '1.5rem', letterSpacing: '0' },\r\n    \r\n    // Body variants\r\n    body1: { fontSize: '1rem', fontWeight: 400, lineHeight: '1.5rem', letterSpacing: '0.5px' },\r\n    body1Bold: { fontSize: '1rem', fontWeight: 700, lineHeight: '1.5rem', letterSpacing: '0.5px' },\r\n    body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    body2Bold: { fontSize: '0.875rem', fontWeight: 700, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    body3: { fontSize: '0.75rem', fontWeight: 400, lineHeight: '1rem', letterSpacing: '0' },\r\n    body3Bold: { fontSize: '0.75rem', fontWeight: 700, lineHeight: '1rem', letterSpacing: '0' },\r\n    \r\n    // Control variants (UI labels)\r\n    control1: { fontSize: '1rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    control1Bold: { fontSize: '1rem', fontWeight: 700, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    \r\n    // Compact variants for dense UIs (cards, badges, data labels)\r\n    compact: { fontSize: '0.625rem', fontWeight: 400, lineHeight: '0.875rem', letterSpacing: '0' },      // 10px\r\n    compactBold: { fontSize: '0.625rem', fontWeight: 500, lineHeight: '0.875rem', letterSpacing: '0' },\r\n    micro: { fontSize: '0.5625rem', fontWeight: 400, lineHeight: '0.75rem', letterSpacing: '0' },        // 9px\r\n    microBold: { fontSize: '0.5625rem', fontWeight: 500, lineHeight: '0.75rem', letterSpacing: '0' },\r\n    \r\n    // Monospace variants for data/code\r\n    mono: { fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\r\n    monoSmall: { fontSize: '0.75rem', fontWeight: 400, lineHeight: '1rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\r\n    monoCompact: { fontSize: '0.625rem', fontWeight: 400, lineHeight: '0.875rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\r\n  };\r\n  \r\n  return styles[variant];\r\n}\r\n\r\n/**\r\n * Get default HTML element for variant\r\n */\r\nfunction getDefaultElement(variant: TypographyVariant): TypographyElement {\r\n  if (variant.startsWith('display')) return 'h1';\r\n  if (variant.startsWith('h1')) return 'h1';\r\n  if (variant.startsWith('h2')) return 'h2';\r\n  if (variant.startsWith('h3')) return 'h3';\r\n  if (variant.startsWith('h4')) return 'h4';\r\n  if (variant.startsWith('h5')) return 'h5';\r\n  if (variant.startsWith('h6')) return 'h6';\r\n  if (variant.startsWith('mono')) return 'code';\r\n  if (variant.startsWith('control')) return 'label';\r\n  return 'span';\r\n}\r\n\r\n// ============================================================================\r\n// Typography Component\r\n// ============================================================================\r\n\r\n/**\r\n * Typography component providing AstroUXDS-compliant text styling.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Heading\r\n * <Typography variant=\"h3\">Section Title</Typography>\r\n * \r\n * // Body text\r\n * <Typography variant=\"body1\" color=\"secondary\">Description text</Typography>\r\n * \r\n * // Monospace data with tabular figures\r\n * <Typography variant=\"mono\" tabular>123.456</Typography>\r\n * \r\n * // Compact label for cards\r\n * <Typography variant=\"compact\" color=\"tertiary\">LABEL</Typography>\r\n * ```\r\n */\r\nexport const Typography: React.FC<TypographyProps> = ({\r\n  variant,\r\n  as,\r\n  color = 'primary',\r\n  tabular = false,\r\n  truncate = false,\r\n  align,\r\n  noWrap = false,\r\n  transform,\r\n  style,\r\n  className,\r\n  children,\r\n  'data-testid': testId,\r\n}) => {\r\n  const { tokens } = useTheme();\r\n  \r\n  const typographyStyles = getTypographyStyles(variant);\r\n  const Element = as || getDefaultElement(variant);\r\n  \r\n  // Resolve color\r\n  const getColor = (): string | undefined => {\r\n    if (color === 'inherit') return 'inherit';\r\n    if (color === 'primary') return tokens.colors.text.primary;\r\n    if (color === 'secondary') return tokens.colors.text.secondary;\r\n    if (color === 'tertiary') return tokens.colors.text.tertiary;\r\n    if (color === 'muted') return tokens.colors.text.muted || tokens.colors.text.tertiary;\r\n    if (color === 'inverse') return tokens.colors.text.inverse;\r\n    // Status colors\r\n    if (color === 'normal') return tokens.colors.status.normal;\r\n    if (color === 'standby') return tokens.colors.status.standby;\r\n    if (color === 'caution') return tokens.colors.status.caution;\r\n    if (color === 'serious') return tokens.colors.status.serious;\r\n    if (color === 'critical') return tokens.colors.status.critical;\r\n    if (color === 'off') return tokens.colors.status.off;\r\n    return undefined;\r\n  };\r\n  \r\n  const combinedStyle: React.CSSProperties = {\r\n    fontFamily: typographyStyles.fontFamily || FONT_FAMILY_PRIMARY,\r\n    fontSize: typographyStyles.fontSize,\r\n    fontWeight: typographyStyles.fontWeight,\r\n    lineHeight: typographyStyles.lineHeight,\r\n    letterSpacing: typographyStyles.letterSpacing,\r\n    color: getColor(),\r\n    margin: 0,\r\n    padding: 0,\r\n    // Tabular figures for numeric alignment\r\n    ...(tabular && {\r\n      fontVariantNumeric: 'tabular-nums',\r\n      fontFeatureSettings: '\"tnum\"',\r\n    }),\r\n    // Truncation\r\n    ...(truncate && {\r\n      overflow: 'hidden',\r\n      textOverflow: 'ellipsis',\r\n      whiteSpace: 'nowrap',\r\n    }),\r\n    // No wrap\r\n    ...(noWrap && !truncate && {\r\n      whiteSpace: 'nowrap',\r\n    }),\r\n    // Text alignment\r\n    ...(align && { textAlign: align }),\r\n    // Text transform\r\n    ...(transform && { textTransform: transform }),\r\n    // Custom styles (can override defaults)\r\n    ...style,\r\n  };\r\n  \r\n  return (\r\n    <Element\r\n      className={className}\r\n      style={combinedStyle}\r\n      data-testid={testId}\r\n    >\r\n      {children}\r\n    </Element>\r\n  );\r\n};\r\n\r\n// ============================================================================\r\n// Convenience Components\r\n// ============================================================================\r\n\r\n/** Display 1 - Largest display text */\r\nexport const Display1: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"display1\" {...props} />\r\n);\r\n\r\n/** Display 2 - Large display text */\r\nexport const Display2: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"display2\" {...props} />\r\n);\r\n\r\n/** Heading 1 */\r\nexport const H1: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'h1Bold' : 'h1'} {...props} />\r\n);\r\n\r\n/** Heading 2 */\r\nexport const H2: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h2\" {...props} />\r\n);\r\n\r\n/** Heading 3 */\r\nexport const H3: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h3\" {...props} />\r\n);\r\n\r\n/** Heading 4 */\r\nexport const H4: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h4\" {...props} />\r\n);\r\n\r\n/** Heading 5 */\r\nexport const H5: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h5\" {...props} />\r\n);\r\n\r\n/** Heading 6 */\r\nexport const H6: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h6\" {...props} />\r\n);\r\n\r\n/** Body text level 1 (16px) */\r\nexport const Body1: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'body1Bold' : 'body1'} {...props} />\r\n);\r\n\r\n/** Body text level 2 (14px) */\r\nexport const Body2: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'body2Bold' : 'body2'} {...props} />\r\n);\r\n\r\n/** Body text level 3 (12px) */\r\nexport const Body3: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'body3Bold' : 'body3'} {...props} />\r\n);\r\n\r\n/** Compact text for dense UIs (10px) */\r\nexport const Compact: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'compactBold' : 'compact'} {...props} />\r\n);\r\n\r\n/** Micro text for very tight spaces (9px) */\r\nexport const Micro: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'microBold' : 'micro'} {...props} />\r\n);\r\n\r\n/** Monospace text for data/code */\r\nexport const Mono: React.FC<Omit<TypographyProps, 'variant'> & { size?: 'normal' | 'small' | 'compact' }> = ({ \r\n  size = 'normal', \r\n  tabular = true, // Default to tabular for mono\r\n  ...props \r\n}) => {\r\n  const variant = size === 'compact' ? 'monoCompact' : size === 'small' ? 'monoSmall' : 'mono';\r\n  return <Typography variant={variant} tabular={tabular} {...props} />;\r\n};\r\n\r\n/** Data value text - monospace with tabular figures (for numeric displays) */\r\nexport const DataText: React.FC<Omit<TypographyProps, 'variant' | 'tabular'> & { \r\n  size?: 'large' | 'normal' | 'small' | 'compact';\r\n}> = ({ size = 'normal', ...props }) => {\r\n  const variantMap: Record<string, TypographyVariant> = {\r\n    large: 'mono',\r\n    normal: 'mono',\r\n    small: 'monoSmall',\r\n    compact: 'monoCompact',\r\n  };\r\n  return <Typography variant={variantMap[size]} tabular {...props} />;\r\n};\r\n\r\n/** Label text for form controls and card headers */\r\nexport const Label: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'control1Bold' : 'control1'} as=\"label\" {...props} />\r\n);\r\n\r\nexport default Typography;\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typography.js","sources":["../../../src/react/core/Typography.tsx"],"sourcesContent":["/**\n * @zendir/ui - Typography Component\n * \n * AstroUXDS-compliant typography component providing consistent text styling\n * across the design system. All sizing uses rem units per Astro specifications.\n * \n * Typography Scale (Astro UX Design System):\n * - Display: Large hero text (display1, display2)\n * - Heading: Section headers (h1-h6)\n * - Body: Content text (body1, body2, body3)\n * - Control: UI element labels\n * - Mono: Tabular/code data\n * \n * @see https://www.astrouxds.com/foundations/typography/\n */\n\nimport React from 'react';\nimport { useTheme } from '../theme/ThemeProvider';\n\n// ============================================================================\n// Typography Variants (AstroUXDS Compliant)\n// ============================================================================\n\n/**\n * Typography variant following Astro UX Design System\n * Maps directly to official Astro typography tokens\n */\nexport type TypographyVariant =\n  // Display - Large hero text\n  | 'display1'\n  | 'display2'\n  // Headings\n  | 'h1'\n  | 'h1Bold'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  // Body text\n  | 'body1'\n  | 'body1Bold'\n  | 'body2'\n  | 'body2Bold'\n  | 'body3'\n  | 'body3Bold'\n  // Control (UI labels)\n  | 'control1'\n  | 'control1Bold'\n  // Compact variants for dense UIs (cards, badges)\n  | 'compact'      // 10px - for tight spaces\n  | 'compactBold'\n  | 'micro'        // 9px - for very tight spaces\n  | 'microBold'\n  // Monospace for data/code\n  | 'mono'\n  | 'monoSmall'\n  | 'monoCompact';\n\n/**\n * Semantic element to render\n */\nexport type TypographyElement =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'p'\n  | 'span'\n  | 'div'\n  | 'label'\n  | 'code'\n  | 'pre';\n\n/**\n * Text color variants\n */\nexport type TypographyColor =\n  | 'primary'\n  | 'secondary'\n  | 'tertiary'\n  | 'muted'\n  | 'inverse'\n  | 'inherit'\n  // Status colors\n  | 'normal'\n  | 'standby'\n  | 'caution'\n  | 'serious'\n  | 'critical'\n  | 'off';\n\nexport interface TypographyProps {\n  /** Typography variant (required) */\n  variant: TypographyVariant;\n  /** HTML element to render */\n  as?: TypographyElement;\n  /** Text color */\n  color?: TypographyColor;\n  /** Enable tabular figures for numeric alignment */\n  tabular?: boolean;\n  /** Truncate with ellipsis */\n  truncate?: boolean;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n  /** Disable text wrapping */\n  noWrap?: boolean;\n  /** Transform text case */\n  transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';\n  /** Additional CSS styles */\n  style?: React.CSSProperties;\n  /** Additional CSS class */\n  className?: string;\n  /** Children */\n  children?: React.ReactNode;\n  /** Test ID */\n  'data-testid'?: string;\n}\n\n// ============================================================================\n// AstroUXDS Font Stack (Standardized)\n// ============================================================================\n\n/**\n * Standard font family fallback stack per AstroUXDS\n * Roboto is the primary font for all Astro applications\n */\nexport const FONT_FAMILY_PRIMARY = 'var(--font-family-primary, \"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif)';\n\n/**\n * Monospace font stack for tabular data and code\n * Roboto Mono is the primary monospace font for Astro\n */\nexport const FONT_FAMILY_MONO = '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace';\n\n// ============================================================================\n// AstroUXDS Font Weights\n// Official weights: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)\n// Note: Astro does NOT use 600 (semibold) - use 500 or 700 instead\n// ============================================================================\n\nexport const FONT_WEIGHTS = {\n  light: 300,\n  regular: 400,\n  medium: 500,\n  bold: 700,\n} as const;\n\n// ============================================================================\n// Typography Style Definitions\n// ============================================================================\n\ninterface TypographyStyleDef {\n  fontSize: string;\n  fontWeight: number;\n  lineHeight: string;\n  letterSpacing: string;\n  fontFamily?: string;\n}\n\n/**\n * Get typography styles for a variant\n * All sizes in rem for Astro compliance\n */\nfunction getTypographyStyles(variant: TypographyVariant): TypographyStyleDef {\n  const styles: Record<TypographyVariant, TypographyStyleDef> = {\n    // Display variants\n    display1: { fontSize: '3.75rem', fontWeight: 300, lineHeight: '4.375rem', letterSpacing: '-0.5px', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    display2: { fontSize: '3rem', fontWeight: 400, lineHeight: '3.5rem', letterSpacing: '0', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    \n    // Heading variants\n    h1: { fontSize: '2.125rem', fontWeight: 400, lineHeight: '2.5rem', letterSpacing: '0.25px', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    h1Bold: { fontSize: '2.125rem', fontWeight: 700, lineHeight: '2.5rem', letterSpacing: '0.25px', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    h2: { fontSize: '1.5rem', fontWeight: 400, lineHeight: '1.75rem', letterSpacing: '0', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    h3: { fontSize: '1.25rem', fontWeight: 500, lineHeight: '1.5rem', letterSpacing: '0.15px', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    h4: { fontSize: '1.25rem', fontWeight: 300, lineHeight: '1.5rem', letterSpacing: '0.15px', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    h5: { fontSize: '1.125rem', fontWeight: 400, lineHeight: '1.5rem', letterSpacing: '0', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    h6: { fontSize: '1.125rem', fontWeight: 300, lineHeight: '1.5rem', letterSpacing: '0', fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)' },\n    \n    // Body variants\n    body1: { fontSize: '1rem', fontWeight: 400, lineHeight: '1.5rem', letterSpacing: '0.5px' },\n    body1Bold: { fontSize: '1rem', fontWeight: 700, lineHeight: '1.5rem', letterSpacing: '0.5px' },\n    body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0.5px' },\n    body2Bold: { fontSize: '0.875rem', fontWeight: 700, lineHeight: '1.25rem', letterSpacing: '0.5px' },\n    body3: { fontSize: '0.75rem', fontWeight: 400, lineHeight: '1rem', letterSpacing: '0' },\n    body3Bold: { fontSize: '0.75rem', fontWeight: 700, lineHeight: '1rem', letterSpacing: '0' },\n    \n    // Control variants (UI labels)\n    control1: { fontSize: '1rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0.5px' },\n    control1Bold: { fontSize: '1rem', fontWeight: 700, lineHeight: '1.25rem', letterSpacing: '0.5px' },\n    \n    // Compact variants for dense UIs (cards, badges, data labels)\n    compact: { fontSize: '0.625rem', fontWeight: 400, lineHeight: '0.875rem', letterSpacing: '0' },      // 10px\n    compactBold: { fontSize: '0.625rem', fontWeight: 500, lineHeight: '0.875rem', letterSpacing: '0' },\n    micro: { fontSize: '0.5625rem', fontWeight: 400, lineHeight: '0.75rem', letterSpacing: '0' },        // 9px\n    microBold: { fontSize: '0.5625rem', fontWeight: 500, lineHeight: '0.75rem', letterSpacing: '0' },\n    \n    // Monospace variants for data/code\n    mono: { fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\n    monoSmall: { fontSize: '0.75rem', fontWeight: 400, lineHeight: '1rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\n    monoCompact: { fontSize: '0.625rem', fontWeight: 400, lineHeight: '0.875rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\n  };\n  \n  return styles[variant];\n}\n\n/**\n * Get default HTML element for variant\n */\nfunction getDefaultElement(variant: TypographyVariant): TypographyElement {\n  if (variant.startsWith('display')) return 'h1';\n  if (variant.startsWith('h1')) return 'h1';\n  if (variant.startsWith('h2')) return 'h2';\n  if (variant.startsWith('h3')) return 'h3';\n  if (variant.startsWith('h4')) return 'h4';\n  if (variant.startsWith('h5')) return 'h5';\n  if (variant.startsWith('h6')) return 'h6';\n  if (variant.startsWith('mono')) return 'code';\n  if (variant.startsWith('control')) return 'label';\n  return 'span';\n}\n\n// ============================================================================\n// Typography Component\n// ============================================================================\n\n/**\n * Typography component providing AstroUXDS-compliant text styling.\n * \n * @example\n * ```tsx\n * // Heading\n * <Typography variant=\"h3\">Section Title</Typography>\n * \n * // Body text\n * <Typography variant=\"body1\" color=\"secondary\">Description text</Typography>\n * \n * // Monospace data with tabular figures\n * <Typography variant=\"mono\" tabular>123.456</Typography>\n * \n * // Compact label for cards\n * <Typography variant=\"compact\" color=\"tertiary\">LABEL</Typography>\n * ```\n */\nexport const Typography: React.FC<TypographyProps> = ({\n  variant,\n  as,\n  color = 'primary',\n  tabular = false,\n  truncate = false,\n  align,\n  noWrap = false,\n  transform,\n  style,\n  className,\n  children,\n  'data-testid': testId,\n}) => {\n  const { tokens } = useTheme();\n  \n  const typographyStyles = getTypographyStyles(variant);\n  const Element = as || getDefaultElement(variant);\n  \n  // Resolve color\n  const getColor = (): string | undefined => {\n    if (color === 'inherit') return 'inherit';\n    if (color === 'primary') return tokens.colors.text.primary;\n    if (color === 'secondary') return tokens.colors.text.secondary;\n    if (color === 'tertiary') return tokens.colors.text.tertiary;\n    if (color === 'muted') return tokens.colors.text.muted || tokens.colors.text.tertiary;\n    if (color === 'inverse') return tokens.colors.text.inverse;\n    // Status colors\n    if (color === 'normal') return tokens.colors.status.normal;\n    if (color === 'standby') return tokens.colors.status.standby;\n    if (color === 'caution') return tokens.colors.status.caution;\n    if (color === 'serious') return tokens.colors.status.serious;\n    if (color === 'critical') return tokens.colors.status.critical;\n    if (color === 'off') return tokens.colors.status.off;\n    return undefined;\n  };\n  \n  const combinedStyle: React.CSSProperties = {\n    fontFamily: typographyStyles.fontFamily || FONT_FAMILY_PRIMARY,\n    fontSize: typographyStyles.fontSize,\n    fontWeight: typographyStyles.fontWeight,\n    lineHeight: typographyStyles.lineHeight,\n    letterSpacing: typographyStyles.letterSpacing,\n    color: getColor(),\n    margin: 0,\n    padding: 0,\n    // Tabular figures for numeric alignment\n    ...(tabular && {\n      fontVariantNumeric: 'tabular-nums',\n      fontFeatureSettings: '\"tnum\"',\n    }),\n    // Truncation\n    ...(truncate && {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n    }),\n    // No wrap\n    ...(noWrap && !truncate && {\n      whiteSpace: 'nowrap',\n    }),\n    // Text alignment\n    ...(align && { textAlign: align }),\n    // Text transform\n    ...(transform && { textTransform: transform }),\n    // Custom styles (can override defaults)\n    ...style,\n  };\n  \n  return (\n    <Element\n      className={className}\n      style={combinedStyle}\n      data-testid={testId}\n    >\n      {children}\n    </Element>\n  );\n};\n\n// ============================================================================\n// Convenience Components\n// ============================================================================\n\n/** Display 1 - Largest display text */\nexport const Display1: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"display1\" {...props} />\n);\n\n/** Display 2 - Large display text */\nexport const Display2: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"display2\" {...props} />\n);\n\n/** Heading 1 */\nexport const H1: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'h1Bold' : 'h1'} {...props} />\n);\n\n/** Heading 2 */\nexport const H2: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"h2\" {...props} />\n);\n\n/** Heading 3 */\nexport const H3: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"h3\" {...props} />\n);\n\n/** Heading 4 */\nexport const H4: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"h4\" {...props} />\n);\n\n/** Heading 5 */\nexport const H5: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"h5\" {...props} />\n);\n\n/** Heading 6 */\nexport const H6: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\n  <Typography variant=\"h6\" {...props} />\n);\n\n/** Body text level 1 (16px) */\nexport const Body1: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'body1Bold' : 'body1'} {...props} />\n);\n\n/** Body text level 2 (14px) */\nexport const Body2: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'body2Bold' : 'body2'} {...props} />\n);\n\n/** Body text level 3 (12px) */\nexport const Body3: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'body3Bold' : 'body3'} {...props} />\n);\n\n/** Compact text for dense UIs (10px) */\nexport const Compact: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'compactBold' : 'compact'} {...props} />\n);\n\n/** Micro text for very tight spaces (9px) */\nexport const Micro: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'microBold' : 'micro'} {...props} />\n);\n\n/** Monospace text for data/code */\nexport const Mono: React.FC<Omit<TypographyProps, 'variant'> & { size?: 'normal' | 'small' | 'compact' }> = ({ \n  size = 'normal', \n  tabular = true, // Default to tabular for mono\n  ...props \n}) => {\n  const variant = size === 'compact' ? 'monoCompact' : size === 'small' ? 'monoSmall' : 'mono';\n  return <Typography variant={variant} tabular={tabular} {...props} />;\n};\n\n/** Data value text - monospace with tabular figures (for numeric displays) */\nexport const DataText: React.FC<Omit<TypographyProps, 'variant' | 'tabular'> & { \n  size?: 'large' | 'normal' | 'small' | 'compact';\n}> = ({ size = 'normal', ...props }) => {\n  const variantMap: Record<string, TypographyVariant> = {\n    large: 'mono',\n    normal: 'mono',\n    small: 'monoSmall',\n    compact: 'monoCompact',\n  };\n  return <Typography variant={variantMap[size]} tabular {...props} />;\n};\n\n/** Label text for form controls and card headers */\nexport const Label: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\n  <Typography variant={bold ? 'control1Bold' : 'control1'} as=\"label\" {...props} />\n);\n\nexport default Typography;\n"],"names":[],"mappings":"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"}

package/dist/react/theme/ThemeProvider.js

@@ -1015,6 +1015,7 @@ function ThemeProvider({
     root.style.setProperty("--color-accent-primary", colors.accent.primary);
     root.style.setProperty("--color-accent-secondary", colors.accent.secondary);
     root.style.setProperty("--color-accent-tertiary", colors.accent.tertiary);
+    root.style.setProperty("--font-family-heading", typography.fontFamily.heading || typography.fontFamily.primary);
     root.style.setProperty("--font-family-primary", typography.fontFamily.primary);
     root.style.setProperty("--font-family-mono", typography.fontFamily.mono);
     root.style.setProperty("--spacing-xxs", spacing.xxs);
@@ -1072,8 +1073,8 @@ function ThemeProvider({
   }
 }`;
   return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx("style", { "data-zendir-scrollbar": "", children: scrollbarCSS }),
-    /* @__PURE__ */ jsx("style", { "data-zendir-reduced-motion": "", children: reducedMotionCSS }),
+    /* @__PURE__ */ jsx("style", { "data-zendir-scrollbar": "", dangerouslySetInnerHTML: { __html: scrollbarCSS } }),
+    /* @__PURE__ */ jsx("style", { "data-zendir-reduced-motion": "", dangerouslySetInnerHTML: { __html: reducedMotionCSS } }),
     children
   ] });
 }

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

@@ -1 +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":"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"}
+{"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    // @ts-expect-error - heading may not be strictly typed on older builds\n    root.style.setProperty('--font-family-heading', typography.fontFamily.heading || typography.fontFamily.primary);\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=\"\" dangerouslySetInnerHTML={{ __html: scrollbarCSS }} />\n      <style data-zendir-reduced-motion=\"\" dangerouslySetInnerHTML={{ __html: reducedMotionCSS }} />\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":"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"}

package/dist/tokens/index.d.ts

@@ -100,8 +100,10 @@ export declare const borderRadius: {
  */
 export declare const typography: {
     readonly fontFamily: {
-        /** Primary font: Roboto (AstroUXDS standard) */
-        readonly primary: "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+        /** Heading font: Sora (Zendir Brand Standard) */
+        readonly heading: "\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+        /** Primary font: Public Sans (Zendir Brand Standard) */
+        readonly primary: "\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
         /** Monospace font: Roboto Mono for data/code */
         readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
     };
@@ -241,8 +243,10 @@ declare const _default: {
     };
     typography: {
         readonly fontFamily: {
-            /** Primary font: Roboto (AstroUXDS standard) */
-            readonly primary: "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+            /** Heading font: Sora (Zendir Brand Standard) */
+            readonly heading: "\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+            /** Primary font: Public Sans (Zendir Brand Standard) */
+            readonly primary: "\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
             /** Monospace font: Roboto Mono for data/code */
             readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
         };

package/dist/tokens/index.js

@@ -94,8 +94,10 @@ const borderRadius = {
 };
 const typography = {
   fontFamily: {
-    /** Primary font: Roboto (AstroUXDS standard) */
-    primary: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
+    /** Heading font: Sora (Zendir Brand Standard) */
+    heading: '"Sora", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
+    /** Primary font: Public Sans (Zendir Brand Standard) */
+    primary: '"Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
     /** Monospace font: Roboto Mono for data/code */
     mono: '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace'
   },

package/dist/tokens/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * @zendir/ui - Design Tokens\n * \n * Exportable design tokens for use in CSS and JavaScript.\n * Based on Astro UX Design System.\n */\n\nexport const colors = {\n  // Status Colors (Dark Theme)\n  status: {\n    critical: '#ff3838',\n    serious: '#ffb302',\n    caution: '#fce83a',\n    normal: '#56f000',\n    standby: '#2dccff',\n    off: '#a4abb6',\n  },\n  \n  // Status Colors (Light Theme - Fill)\n  statusLightFill: {\n    critical: '#ff2a04',\n    serious: '#ffaf3d',\n    caution: '#fad800',\n    normal: '#00e200',\n    standby: '#64d9ff',\n    off: '#7b8089',\n  },\n  \n  // Status Colors (Light Theme - Border)\n  statusLightBorder: {\n    critical: '#661102',\n    serious: '#664618',\n    caution: '#645600',\n    normal: '#005a00',\n    standby: '#285766',\n    off: '#3c3e42',\n  },\n  \n  // Background Colors\n  background: {\n    dark: {\n      base: '#101923',\n      surface: '#1b2d3e',\n      elevated: '#243647',\n      overlay: 'rgba(0, 0, 0, 0.7)',\n    },\n    light: {\n      base: '#f5f6f9',\n      surface: '#ffffff',\n      elevated: '#ffffff',\n      overlay: 'rgba(0, 0, 0, 0.5)',\n    },\n  },\n  \n  // Text Colors\n  text: {\n    dark: {\n      primary: '#ffffff',\n      secondary: '#9ea7ad',\n      tertiary: '#6b7175',\n      muted: '#52595f',\n    },\n    light: {\n      primary: '#1b2d3e',\n      secondary: '#4c5a67',\n      tertiary: '#7a8891',\n      muted: '#a4adb5',\n    },\n  },\n  \n  // Accent Colors\n  accent: {\n    primary: '#4dacff',\n    secondary: '#3d8ddb',\n    tertiary: '#2e6eb3',\n  },\n  \n  // Border Colors\n  border: {\n    dark: {\n      default: '#3c4b5a',\n      muted: '#2b3d4e',\n      focus: '#4dacff',\n    },\n    light: {\n      default: '#c4c8cc',\n      muted: '#e1e4e8',\n      focus: '#4dacff',\n    },\n  },\n} as const;\n\nexport const spacing = {\n  xs: '4px',\n  sm: '8px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n} as const;\n\nexport const borderRadius = {\n  none: '0',\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n  xl: '16px',\n  full: '9999px',\n} as const;\n\n/**\n * Typography tokens following AstroUXDS Design System\n * @see https://www.astrouxds.com/foundations/typography/\n * \n * Font weights per Astro spec: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)\n * Note: Astro does NOT use 600 (semibold) - use 500 (medium) or 700 (bold) instead\n */\nexport const typography = {\n  fontFamily: {\n    /** Primary font: Roboto (AstroUXDS standard) */\n    primary: '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Monospace font: Roboto Mono for data/code */\n    mono: '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace',\n  },\n  fontSize: {\n    // Compact sizes for dense UIs (cards, badges, data labels)\n    micro: '0.5625rem', // 9px - very tight spaces\n    xxs: '0.625rem',    // 10px - compact labels\n    // Standard sizes\n    xs: '0.75rem',      // 12px - small text, body3\n    sm: '0.875rem',     // 14px - body2\n    base: '1rem',       // 16px - body1\n    md: '1.125rem',     // 18px - h5/h6\n    lg: '1.25rem',      // 20px - h3/h4\n    xl: '1.5rem',       // 24px - h2\n    xxl: '2.125rem',    // 34px - h1\n    xxxl: '3rem',       // 48px - display2\n    display: '3.75rem', // 60px - display1\n  },\n  /**\n   * Font weights per AstroUXDS specification\n   * Only 300, 400, 500, 700 are officially supported\n   */\n  fontWeight: {\n    light: 300,\n    normal: 400,\n    regular: 400,  // Alias for normal\n    medium: 500,\n    bold: 700,\n    // DEPRECATED: semibold is not in Astro spec, use medium (500) instead\n    /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */\n    semibold: 500,\n  },\n  lineHeight: {\n    tight: 1.25,\n    normal: 1.5,\n    relaxed: 1.75,\n  },\n} as const;\n\nexport const shadows = {\n  none: 'none',\n  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',\n  md: '0 2px 8px rgba(0, 0, 0, 0.3)',\n  lg: '0 4px 16px rgba(0, 0, 0, 0.3)',\n  xl: '0 8px 32px rgba(0, 0, 0, 0.4)',\n  glow: '0 0 20px rgba(77, 172, 255, 0.4)',\n} as const;\n\nexport const animation = {\n  fast: '150ms ease',\n  normal: '250ms ease',\n  slow: '400ms ease',\n} as const;\n\n// CSS Custom Properties generator\nexport function generateCSSVariables(mode: 'dark' | 'light' = 'dark'): string {\n  const bg = colors.background[mode];\n  const txt = colors.text[mode];\n  const bdr = colors.border[mode];\n  \n  return `\n:root {\n  /* Status Colors */\n  --zendir-status-critical: ${colors.status.critical};\n  --zendir-status-serious: ${colors.status.serious};\n  --zendir-status-caution: ${colors.status.caution};\n  --zendir-status-normal: ${colors.status.normal};\n  --zendir-status-standby: ${colors.status.standby};\n  --zendir-status-off: ${colors.status.off};\n  \n  /* Background */\n  --zendir-bg-base: ${bg.base};\n  --zendir-bg-surface: ${bg.surface};\n  --zendir-bg-elevated: ${bg.elevated};\n  --zendir-bg-overlay: ${bg.overlay};\n  \n  /* Text */\n  --zendir-text-primary: ${txt.primary};\n  --zendir-text-secondary: ${txt.secondary};\n  --zendir-text-tertiary: ${txt.tertiary};\n  --zendir-text-muted: ${txt.muted};\n  \n  /* Accent */\n  --zendir-accent-primary: ${colors.accent.primary};\n  --zendir-accent-secondary: ${colors.accent.secondary};\n  --zendir-accent-tertiary: ${colors.accent.tertiary};\n  \n  /* Border */\n  --zendir-border-default: ${bdr.default};\n  --zendir-border-muted: ${bdr.muted};\n  --zendir-border-focus: ${bdr.focus};\n  \n  /* Spacing */\n  --zendir-spacing-xs: ${spacing.xs};\n  --zendir-spacing-sm: ${spacing.sm};\n  --zendir-spacing-md: ${spacing.md};\n  --zendir-spacing-lg: ${spacing.lg};\n  --zendir-spacing-xl: ${spacing.xl};\n  --zendir-spacing-xxl: ${spacing.xxl};\n  \n  /* Border Radius */\n  --zendir-radius-sm: ${borderRadius.sm};\n  --zendir-radius-md: ${borderRadius.md};\n  --zendir-radius-lg: ${borderRadius.lg};\n  --zendir-radius-xl: ${borderRadius.xl};\n  --zendir-radius-full: ${borderRadius.full};\n  \n  /* Typography - AstroUXDS Compliant */\n  --zendir-font-primary: ${typography.fontFamily.primary};\n  --zendir-font-mono: ${typography.fontFamily.mono};\n  --zendir-font-size-micro: ${typography.fontSize.micro};\n  --zendir-font-size-xxs: ${typography.fontSize.xxs};\n  --zendir-font-size-xs: ${typography.fontSize.xs};\n  --zendir-font-size-sm: ${typography.fontSize.sm};\n  --zendir-font-size-base: ${typography.fontSize.base};\n  --zendir-font-size-md: ${typography.fontSize.md};\n  --zendir-font-size-lg: ${typography.fontSize.lg};\n  --zendir-font-size-xl: ${typography.fontSize.xl};\n  --zendir-font-size-xxl: ${typography.fontSize.xxl};\n  --zendir-font-weight-light: ${typography.fontWeight.light};\n  --zendir-font-weight-normal: ${typography.fontWeight.normal};\n  --zendir-font-weight-medium: ${typography.fontWeight.medium};\n  --zendir-font-weight-bold: ${typography.fontWeight.bold};\n  \n  /* Shadows */\n  --zendir-shadow-sm: ${shadows.sm};\n  --zendir-shadow-md: ${shadows.md};\n  --zendir-shadow-lg: ${shadows.lg};\n  --zendir-shadow-xl: ${shadows.xl};\n  --zendir-shadow-glow: ${shadows.glow};\n  \n  /* Animation */\n  --zendir-animation-fast: ${animation.fast};\n  --zendir-animation-normal: ${animation.normal};\n  --zendir-animation-slow: ${animation.slow};\n}\n`.trim();\n}\n\nexport default {\n  colors,\n  spacing,\n  borderRadius,\n  typography,\n  shadows,\n  animation,\n  generateCSSVariables,\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/tokens/index.ts"],"sourcesContent":["/**\n * @zendir/ui - Design Tokens\n * \n * Exportable design tokens for use in CSS and JavaScript.\n * Based on Astro UX Design System.\n */\n\nexport const colors = {\n  // Status Colors (Dark Theme)\n  status: {\n    critical: '#ff3838',\n    serious: '#ffb302',\n    caution: '#fce83a',\n    normal: '#56f000',\n    standby: '#2dccff',\n    off: '#a4abb6',\n  },\n  \n  // Status Colors (Light Theme - Fill)\n  statusLightFill: {\n    critical: '#ff2a04',\n    serious: '#ffaf3d',\n    caution: '#fad800',\n    normal: '#00e200',\n    standby: '#64d9ff',\n    off: '#7b8089',\n  },\n  \n  // Status Colors (Light Theme - Border)\n  statusLightBorder: {\n    critical: '#661102',\n    serious: '#664618',\n    caution: '#645600',\n    normal: '#005a00',\n    standby: '#285766',\n    off: '#3c3e42',\n  },\n  \n  // Background Colors\n  background: {\n    dark: {\n      base: '#101923',\n      surface: '#1b2d3e',\n      elevated: '#243647',\n      overlay: 'rgba(0, 0, 0, 0.7)',\n    },\n    light: {\n      base: '#f5f6f9',\n      surface: '#ffffff',\n      elevated: '#ffffff',\n      overlay: 'rgba(0, 0, 0, 0.5)',\n    },\n  },\n  \n  // Text Colors\n  text: {\n    dark: {\n      primary: '#ffffff',\n      secondary: '#9ea7ad',\n      tertiary: '#6b7175',\n      muted: '#52595f',\n    },\n    light: {\n      primary: '#1b2d3e',\n      secondary: '#4c5a67',\n      tertiary: '#7a8891',\n      muted: '#a4adb5',\n    },\n  },\n  \n  // Accent Colors\n  accent: {\n    primary: '#4dacff',\n    secondary: '#3d8ddb',\n    tertiary: '#2e6eb3',\n  },\n  \n  // Border Colors\n  border: {\n    dark: {\n      default: '#3c4b5a',\n      muted: '#2b3d4e',\n      focus: '#4dacff',\n    },\n    light: {\n      default: '#c4c8cc',\n      muted: '#e1e4e8',\n      focus: '#4dacff',\n    },\n  },\n} as const;\n\nexport const spacing = {\n  xs: '4px',\n  sm: '8px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n} as const;\n\nexport const borderRadius = {\n  none: '0',\n  sm: '2px',\n  md: '4px',\n  lg: '8px',\n  xl: '16px',\n  full: '9999px',\n} as const;\n\n/**\n * Typography tokens following AstroUXDS Design System\n * @see https://www.astrouxds.com/foundations/typography/\n * \n * Font weights per Astro spec: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)\n * Note: Astro does NOT use 600 (semibold) - use 500 (medium) or 700 (bold) instead\n */\nexport const typography = {\n  fontFamily: {\n    /** Heading font: Sora (Zendir Brand Standard) */\n    heading: '\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Primary font: Public Sans (Zendir Brand Standard) */\n    primary: '\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif',\n    /** Monospace font: Roboto Mono for data/code */\n    mono: '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace',\n  },\n  fontSize: {\n    // Compact sizes for dense UIs (cards, badges, data labels)\n    micro: '0.5625rem', // 9px - very tight spaces\n    xxs: '0.625rem',    // 10px - compact labels\n    // Standard sizes\n    xs: '0.75rem',      // 12px - small text, body3\n    sm: '0.875rem',     // 14px - body2\n    base: '1rem',       // 16px - body1\n    md: '1.125rem',     // 18px - h5/h6\n    lg: '1.25rem',      // 20px - h3/h4\n    xl: '1.5rem',       // 24px - h2\n    xxl: '2.125rem',    // 34px - h1\n    xxxl: '3rem',       // 48px - display2\n    display: '3.75rem', // 60px - display1\n  },\n  /**\n   * Font weights per AstroUXDS specification\n   * Only 300, 400, 500, 700 are officially supported\n   */\n  fontWeight: {\n    light: 300,\n    normal: 400,\n    regular: 400,  // Alias for normal\n    medium: 500,\n    bold: 700,\n    // DEPRECATED: semibold is not in Astro spec, use medium (500) instead\n    /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */\n    semibold: 500,\n  },\n  lineHeight: {\n    tight: 1.25,\n    normal: 1.5,\n    relaxed: 1.75,\n  },\n} as const;\n\nexport const shadows = {\n  none: 'none',\n  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',\n  md: '0 2px 8px rgba(0, 0, 0, 0.3)',\n  lg: '0 4px 16px rgba(0, 0, 0, 0.3)',\n  xl: '0 8px 32px rgba(0, 0, 0, 0.4)',\n  glow: '0 0 20px rgba(77, 172, 255, 0.4)',\n} as const;\n\nexport const animation = {\n  fast: '150ms ease',\n  normal: '250ms ease',\n  slow: '400ms ease',\n} as const;\n\n// CSS Custom Properties generator\nexport function generateCSSVariables(mode: 'dark' | 'light' = 'dark'): string {\n  const bg = colors.background[mode];\n  const txt = colors.text[mode];\n  const bdr = colors.border[mode];\n  \n  return `\n:root {\n  /* Status Colors */\n  --zendir-status-critical: ${colors.status.critical};\n  --zendir-status-serious: ${colors.status.serious};\n  --zendir-status-caution: ${colors.status.caution};\n  --zendir-status-normal: ${colors.status.normal};\n  --zendir-status-standby: ${colors.status.standby};\n  --zendir-status-off: ${colors.status.off};\n  \n  /* Background */\n  --zendir-bg-base: ${bg.base};\n  --zendir-bg-surface: ${bg.surface};\n  --zendir-bg-elevated: ${bg.elevated};\n  --zendir-bg-overlay: ${bg.overlay};\n  \n  /* Text */\n  --zendir-text-primary: ${txt.primary};\n  --zendir-text-secondary: ${txt.secondary};\n  --zendir-text-tertiary: ${txt.tertiary};\n  --zendir-text-muted: ${txt.muted};\n  \n  /* Accent */\n  --zendir-accent-primary: ${colors.accent.primary};\n  --zendir-accent-secondary: ${colors.accent.secondary};\n  --zendir-accent-tertiary: ${colors.accent.tertiary};\n  \n  /* Border */\n  --zendir-border-default: ${bdr.default};\n  --zendir-border-muted: ${bdr.muted};\n  --zendir-border-focus: ${bdr.focus};\n  \n  /* Spacing */\n  --zendir-spacing-xs: ${spacing.xs};\n  --zendir-spacing-sm: ${spacing.sm};\n  --zendir-spacing-md: ${spacing.md};\n  --zendir-spacing-lg: ${spacing.lg};\n  --zendir-spacing-xl: ${spacing.xl};\n  --zendir-spacing-xxl: ${spacing.xxl};\n  \n  /* Border Radius */\n  --zendir-radius-sm: ${borderRadius.sm};\n  --zendir-radius-md: ${borderRadius.md};\n  --zendir-radius-lg: ${borderRadius.lg};\n  --zendir-radius-xl: ${borderRadius.xl};\n  --zendir-radius-full: ${borderRadius.full};\n  \n  /* Typography - AstroUXDS Compliant */\n  --zendir-font-primary: ${typography.fontFamily.primary};\n  --zendir-font-mono: ${typography.fontFamily.mono};\n  --zendir-font-size-micro: ${typography.fontSize.micro};\n  --zendir-font-size-xxs: ${typography.fontSize.xxs};\n  --zendir-font-size-xs: ${typography.fontSize.xs};\n  --zendir-font-size-sm: ${typography.fontSize.sm};\n  --zendir-font-size-base: ${typography.fontSize.base};\n  --zendir-font-size-md: ${typography.fontSize.md};\n  --zendir-font-size-lg: ${typography.fontSize.lg};\n  --zendir-font-size-xl: ${typography.fontSize.xl};\n  --zendir-font-size-xxl: ${typography.fontSize.xxl};\n  --zendir-font-weight-light: ${typography.fontWeight.light};\n  --zendir-font-weight-normal: ${typography.fontWeight.normal};\n  --zendir-font-weight-medium: ${typography.fontWeight.medium};\n  --zendir-font-weight-bold: ${typography.fontWeight.bold};\n  \n  /* Shadows */\n  --zendir-shadow-sm: ${shadows.sm};\n  --zendir-shadow-md: ${shadows.md};\n  --zendir-shadow-lg: ${shadows.lg};\n  --zendir-shadow-xl: ${shadows.xl};\n  --zendir-shadow-glow: ${shadows.glow};\n  \n  /* Animation */\n  --zendir-animation-fast: ${animation.fast};\n  --zendir-animation-normal: ${animation.normal};\n  --zendir-animation-slow: ${animation.slow};\n}\n`.trim();\n}\n\nexport default {\n  colors,\n  spacing,\n  borderRadius,\n  typography,\n  shadows,\n  animation,\n  generateCSSVariables,\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendir/ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "React UI components for space operations, built on the Astro UX Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,7 +16,7 @@
     },
     "./react": {
       "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/index.js"
+      "import": "./dist/react.js"
     },
     "./react/core": {
       "types": "./dist/react/core/index.d.ts",
@@ -38,6 +38,86 @@
       "types": "./dist/react/chatgpt/index.d.ts",
       "import": "./dist/react/chatgpt/index.js"
     },
+    "./react/theme": {
+      "types": "./dist/react/theme/ThemeProvider.d.ts",
+      "import": "./dist/react/theme/ThemeProvider.js"
+    },
+    "./react/core/GlassCard": {
+      "types": "./dist/react/core/GlassCard.d.ts",
+      "import": "./dist/react/core/GlassCard.js"
+    },
+    "./react/core/Button": {
+      "types": "./dist/react/core/Button.d.ts",
+      "import": "./dist/react/core/Button.js"
+    },
+    "./react/core/Input": {
+      "types": "./dist/react/core/Input.d.ts",
+      "import": "./dist/react/core/Input.js"
+    },
+    "./react/core/Select": {
+      "types": "./dist/react/core/Select.d.ts",
+      "import": "./dist/react/core/Select.js"
+    },
+    "./react/core/Checkbox": {
+      "types": "./dist/react/core/Checkbox.d.ts",
+      "import": "./dist/react/core/Checkbox.js"
+    },
+    "./react/core/Badge": {
+      "types": "./dist/react/core/Badge.d.ts",
+      "import": "./dist/react/core/Badge.js"
+    },
+    "./react/core/Typography": {
+      "types": "./dist/react/core/Typography.d.ts",
+      "import": "./dist/react/core/Typography.js"
+    },
+    "./react/core/Dialog": {
+      "types": "./dist/react/core/Dialog.d.ts",
+      "import": "./dist/react/core/Dialog.js"
+    },
+    "./react/core/ConfirmDialog": {
+      "types": "./dist/react/core/ConfirmDialog.d.ts",
+      "import": "./dist/react/core/ConfirmDialog.js"
+    },
+    "./react/core/Tabs": {
+      "types": "./dist/react/core/Tabs.d.ts",
+      "import": "./dist/react/core/Tabs.js"
+    },
+    "./react/core/Toggle": {
+      "types": "./dist/react/core/Toggle.d.ts",
+      "import": "./dist/react/core/Toggle.js"
+    },
+    "./react/core/Tooltip": {
+      "types": "./dist/react/core/Tooltip.d.ts",
+      "import": "./dist/react/core/Tooltip.js"
+    },
+    "./react/core/Popover": {
+      "types": "./dist/react/core/Popover.d.ts",
+      "import": "./dist/react/core/Popover.js"
+    },
+    "./react/core/Toast": {
+      "types": "./dist/react/core/Toast.d.ts",
+      "import": "./dist/react/core/Toast.js"
+    },
+    "./react/core/NumberInput": {
+      "types": "./dist/react/core/NumberInput.d.ts",
+      "import": "./dist/react/core/NumberInput.js"
+    },
+    "./react/core/PinInput": {
+      "types": "./dist/react/core/PinInput.d.ts",
+      "import": "./dist/react/core/PinInput.js"
+    },
+    "./react/core/SideNav": {
+      "types": "./dist/react/core/SideNav.d.ts",
+      "import": "./dist/react/core/SideNav.js"
+    },
+    "./react/layout/Flex": {
+      "types": "./dist/react/core/layout/Flex.d.ts",
+      "import": "./dist/react/core/layout/Flex.js"
+    },
+    "./react/layout/Grid": {
+      "types": "./dist/react/core/layout/Grid.d.ts",
+      "import": "./dist/react/core/layout/Grid.js"
+    },
     "./tokens": {
       "types": "./dist/tokens/index.d.ts",
       "import": "./dist/tokens/index.js"
@@ -90,7 +170,7 @@
   "peerDependencies": {
     "@astrouxds/react": "^7.27.0",
     "cesium": "^1.120.0",
-    "echarts": "^5.6.0",
+    "echarts": "^5.6.0 || ^6.0.0",
     "echarts-for-react": "^3.0.6",
     "echarts-gl": "^2.0.9",
     "leaflet": "^1.9.0",