@zendir/ui 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"cardAccent.js","sources":["../../../src/react/theme/cardAccent.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Card Accent System\r\n * \r\n * Provides accent color configuration for cards and containers in space operations UIs.\r\n * Maps space system domains to appropriate accent colors for visual organization.\r\n * \r\n * Features:\r\n * - Predefined accent colors for common use cases\r\n * - Space system keyword → color mapping for auto-coloring\r\n * - Mix mode for automatic per-domain coloring\r\n * - React context and hook for easy integration\r\n * \r\n * @example\r\n * ```tsx\r\n * import { \r\n *   CardAccentProvider, \r\n *   useCardAccent, \r\n *   getSystemAccentColor \r\n * } from '@zendir/ui';\r\n * \r\n * // Wrap your app with the provider\r\n * <CardAccentProvider accentMode=\"mix\">\r\n *   <MyApp />\r\n * </CardAccentProvider>\r\n * \r\n * // Use in components\r\n * const { getAccentColor } = useCardAccent();\r\n * <Container accentColor={getAccentColor('Power Systems')} />\r\n * ```\r\n */\r\n\r\nimport React, { createContext, useContext, useMemo, type ReactNode } from 'react';\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\nexport type CardAccentKey = \r\n  | 'cyan'\r\n  | 'electric' \r\n  | 'purple'\r\n  | 'teal'\r\n  | 'prussianBlue'\r\n  | 'green'\r\n  | 'amber'\r\n  | 'mix';\r\n\r\nexport interface CardAccentColor {\r\n  /** Display label */\r\n  label: string;\r\n  /** Hex color value (or 'mix' for automatic) */\r\n  value: string;\r\n}\r\n\r\n// =============================================================================\r\n// Accent Color Definitions\r\n// =============================================================================\r\n\r\n/**\r\n * Predefined card accent colors\r\n * These are optimized for dark themes and space operations UIs\r\n */\r\nexport const CARD_ACCENT_COLORS: Record<CardAccentKey, CardAccentColor> = {\r\n  cyan: { label: 'Cyan', value: '#00c8ff' },\r\n  electric: { label: 'Electric', value: '#4d7cff' },\r\n  purple: { label: 'Purple', value: '#a855f7' },\r\n  teal: { label: 'Teal', value: '#14b8a6' },\r\n  prussianBlue: { label: 'Prussian Blue', value: '#1e3a5f' },\r\n  green: { label: 'Green', value: '#22c55e' },\r\n  amber: { label: 'Amber', value: '#f59e0b' },\r\n  mix: { label: 'Mix (Per System)', value: 'mix' },\r\n} as const;\r\n\r\n/**\r\n * Space system keyword → accent color mapping\r\n * Used in 'mix' mode to automatically assign colors based on content\r\n */\r\nexport const SPACE_SYSTEM_COLORS: Record<string, string> = {\r\n  // === Telemetry & Data ===\r\n  'telemetry': '#00c8ff',\r\n  'data': '#00c8ff',\r\n  'preview': '#00c8ff',\r\n  'stream': '#00c8ff',\r\n  \r\n  // === Power Systems ===\r\n  'power': '#22c55e',\r\n  'battery': '#22c55e',\r\n  'solar': '#22c55e',\r\n  'voltage': '#22c55e',\r\n  'energy': '#22c55e',\r\n  \r\n  // === Thermal Systems ===\r\n  'thermal': '#f59e0b',\r\n  'temperature': '#f59e0b',\r\n  'heatmap': '#f59e0b',\r\n  'heater': '#f59e0b',\r\n  \r\n  // === Attitude & Control ===\r\n  'attitude': '#a855f7',\r\n  'control': '#a855f7',\r\n  'orientation': '#a855f7',\r\n  'pointing': '#a855f7',\r\n  'gyro': '#a855f7',\r\n  \r\n  // === Communications ===\r\n  'spectrum': '#4d7cff',\r\n  'link': '#4d7cff',\r\n  'rf': '#4d7cff',\r\n  'downlink': '#4d7cff',\r\n  'uplink': '#4d7cff',\r\n  'packet': '#4d7cff',\r\n  'antenna': '#4d7cff',\r\n  'comm': '#4d7cff',\r\n  \r\n  // === Navigation & Orbit ===\r\n  'orbit': '#14b8a6',\r\n  'eclipse': '#14b8a6',\r\n  'polar': '#14b8a6',\r\n  'heliocentric': '#14b8a6',\r\n  'maneuver': '#14b8a6',\r\n  'contact': '#14b8a6',\r\n  'ground': '#14b8a6',\r\n  'pass': '#14b8a6',\r\n  \r\n  // === Sensors & Instruments ===\r\n  'sensor': '#00c8ff',\r\n  'star': '#00c8ff',\r\n  'tracker': '#00c8ff',\r\n  'scatter': '#00c8ff',\r\n  'payload': '#00c8ff',\r\n  \r\n  // === Health & Status ===\r\n  'health': '#22c55e',\r\n  'gauge': '#22c55e',\r\n  'subsystem': '#22c55e',\r\n  'status': '#22c55e',\r\n  \r\n  // === Analytics & Visualization ===\r\n  'sankey': '#a855f7',\r\n  'treemap': '#4d7cff',\r\n  'sunburst': '#14b8a6',\r\n  'parallel': '#f59e0b',\r\n  'radar': '#00c8ff',\r\n  'graph': '#a855f7',\r\n  'candlestick': '#f59e0b',\r\n  'histogram': '#00c8ff',\r\n  'pie': '#a855f7',\r\n  'donut': '#a855f7',\r\n  'bubble': '#14b8a6',\r\n  'rose': '#f59e0b',\r\n  \r\n  // === 3D Visualizations ===\r\n  '3d': '#4d7cff',\r\n  'scatter3d': '#00c8ff',\r\n  'bar3d': '#22c55e',\r\n  'surface3d': '#f59e0b',\r\n  'lines3d': '#a855f7',\r\n  'debris': '#f59e0b',\r\n  'constellation': '#4d7cff',\r\n  'collision': '#f59e0b',\r\n  'satellite': '#4d7cff',\r\n  \r\n  // === Default ===\r\n  'default': '#00c8ff',\r\n} as const;\r\n\r\n// =============================================================================\r\n// Utility Functions\r\n// =============================================================================\r\n\r\n/**\r\n * Get accent color based on title/content and accent mode\r\n * \r\n * @param title - Content title or description to analyze\r\n * @param accentMode - Current accent mode (specific color or 'mix')\r\n * @returns Hex color string or undefined\r\n * \r\n * @example\r\n * ```tsx\r\n * getSystemAccentColor('Power Systems Overview', 'mix') // '#22c55e'\r\n * getSystemAccentColor('Power Systems', 'purple') // '#a855f7'\r\n * ```\r\n */\r\nexport function getSystemAccentColor(\r\n  title: string, \r\n  accentMode: CardAccentKey\r\n): string | undefined {\r\n  if (accentMode !== 'mix') {\r\n    return CARD_ACCENT_COLORS[accentMode].value;\r\n  }\r\n  \r\n  const lowerTitle = title.toLowerCase();\r\n  for (const [keyword, color] of Object.entries(SPACE_SYSTEM_COLORS)) {\r\n    if (lowerTitle.includes(keyword)) {\r\n      return color;\r\n    }\r\n  }\r\n  return SPACE_SYSTEM_COLORS.default;\r\n}\r\n\r\n/**\r\n * Get all accent color options for building UI selectors\r\n */\r\nexport function getAccentColorOptions(): Array<{ key: CardAccentKey; label: string; value: string }> {\r\n  return Object.entries(CARD_ACCENT_COLORS).map(([key, config]) => ({\r\n    key: key as CardAccentKey,\r\n    label: config.label,\r\n    value: config.value,\r\n  }));\r\n}\r\n\r\n// =============================================================================\r\n// React Context & Provider\r\n// =============================================================================\r\n\r\nexport interface CardAccentContextValue {\r\n  /** Current accent mode */\r\n  accentMode: CardAccentKey;\r\n  /** Get accent color for a given title/content */\r\n  getAccentColor: (title: string) => string | undefined;\r\n  /** All available accent options */\r\n  accentOptions: Array<{ key: CardAccentKey; label: string; value: string }>;\r\n}\r\n\r\nconst CardAccentContext = createContext<CardAccentContextValue>({\r\n  accentMode: 'mix',\r\n  getAccentColor: () => undefined,\r\n  accentOptions: getAccentColorOptions(),\r\n});\r\n\r\nexport interface CardAccentProviderProps {\r\n  /** Accent mode to use */\r\n  accentMode?: CardAccentKey;\r\n  /** Children */\r\n  children: ReactNode;\r\n}\r\n\r\n/**\r\n * Provider for card accent context\r\n * Wrap your app or section to provide consistent accent coloring\r\n */\r\nexport function CardAccentProvider({\r\n  accentMode = 'mix',\r\n  children,\r\n}: CardAccentProviderProps): React.ReactElement {\r\n  const value = useMemo((): CardAccentContextValue => ({\r\n    accentMode,\r\n    getAccentColor: (title: string) => getSystemAccentColor(title, accentMode),\r\n    accentOptions: getAccentColorOptions(),\r\n  }), [accentMode]);\r\n\r\n  return (\r\n    <CardAccentContext.Provider value={value}>\r\n      {children}\r\n    </CardAccentContext.Provider>\r\n  );\r\n}\r\n\r\n/**\r\n * Hook to access card accent context\r\n * \r\n * @example\r\n * ```tsx\r\n * const { getAccentColor, accentMode } = useCardAccent();\r\n * <Container accentColor={getAccentColor('Power Chart')} />\r\n * ```\r\n */\r\nexport function useCardAccent(): CardAccentContextValue {\r\n  return useContext(CardAccentContext);\r\n}\r\n\r\nexport default CardAccentProvider;\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cardAccent.js","names":[],"sources":["../../../src/react/theme/cardAccent.tsx"],"sourcesContent":["/**\n * @zendir/ui - Card Accent System\n *\n * Provides accent color configuration for cards and containers in space operations UIs.\n * Maps space system domains to appropriate accent colors for visual organization.\n *\n * Features:\n * - Predefined accent colors for common use cases\n * - Space system keyword → color mapping for auto-coloring\n * - Mix mode for automatic per-domain coloring\n * - React context and hook for easy integration\n *\n * @example\n * ```tsx\n * import {\n *   CardAccentProvider,\n *   useCardAccent,\n *   getSystemAccentColor\n * } from '@zendir/ui';\n *\n * // Wrap your app with the provider\n * <CardAccentProvider accentMode=\"mix\">\n *   <MyApp />\n * </CardAccentProvider>\n *\n * // Use in components\n * const { getAccentColor } = useCardAccent();\n * <Container accentColor={getAccentColor('Power Systems')} />\n * ```\n */\n\nimport React, {\n  createContext,\n  useContext,\n  useMemo,\n  type ReactNode,\n} from \"react\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type CardAccentKey =\n  | \"cyan\"\n  | \"electric\"\n  | \"purple\"\n  | \"teal\"\n  | \"prussianBlue\"\n  | \"green\"\n  | \"amber\"\n  | \"mix\";\n\nexport interface CardAccentColor {\n  /** Display label */\n  label: string;\n  /** Hex color value (or 'mix' for automatic) */\n  value: string;\n}\n\n// =============================================================================\n// Accent Color Definitions\n// =============================================================================\n\n/**\n * Predefined card accent colors\n * These are optimized for dark themes and space operations UIs\n */\nexport const CARD_ACCENT_COLORS: Record<CardAccentKey, CardAccentColor> = {\n  cyan: { label: \"Cyan\", value: \"#00c8ff\" },\n  electric: { label: \"Electric\", value: \"#4d7cff\" },\n  purple: { label: \"Purple\", value: \"#a855f7\" },\n  teal: { label: \"Teal\", value: \"#14b8a6\" },\n  prussianBlue: { label: \"Prussian Blue\", value: \"#1e3a5f\" },\n  green: { label: \"Green\", value: \"#22c55e\" },\n  amber: { label: \"Amber\", value: \"#f59e0b\" },\n  mix: { label: \"Mix (Per System)\", value: \"mix\" },\n} as const;\n\n/**\n * Space system keyword → accent color mapping\n * Used in 'mix' mode to automatically assign colors based on content\n */\nexport const SPACE_SYSTEM_COLORS: Record<string, string> = {\n  // === Telemetry & Data ===\n  telemetry: \"#00c8ff\",\n  data: \"#00c8ff\",\n  preview: \"#00c8ff\",\n  stream: \"#00c8ff\",\n\n  // === Power Systems ===\n  power: \"#22c55e\",\n  battery: \"#22c55e\",\n  solar: \"#22c55e\",\n  voltage: \"#22c55e\",\n  energy: \"#22c55e\",\n\n  // === Thermal Systems ===\n  thermal: \"#f59e0b\",\n  temperature: \"#f59e0b\",\n  heatmap: \"#f59e0b\",\n  heater: \"#f59e0b\",\n\n  // === Attitude & Control ===\n  attitude: \"#a855f7\",\n  control: \"#a855f7\",\n  orientation: \"#a855f7\",\n  pointing: \"#a855f7\",\n  gyro: \"#a855f7\",\n\n  // === Communications ===\n  spectrum: \"#4d7cff\",\n  link: \"#4d7cff\",\n  rf: \"#4d7cff\",\n  downlink: \"#4d7cff\",\n  uplink: \"#4d7cff\",\n  packet: \"#4d7cff\",\n  antenna: \"#4d7cff\",\n  comm: \"#4d7cff\",\n\n  // === Navigation & Orbit ===\n  orbit: \"#14b8a6\",\n  eclipse: \"#14b8a6\",\n  polar: \"#14b8a6\",\n  heliocentric: \"#14b8a6\",\n  maneuver: \"#14b8a6\",\n  contact: \"#14b8a6\",\n  ground: \"#14b8a6\",\n  pass: \"#14b8a6\",\n\n  // === Sensors & Instruments ===\n  sensor: \"#00c8ff\",\n  star: \"#00c8ff\",\n  tracker: \"#00c8ff\",\n  scatter: \"#00c8ff\",\n  payload: \"#00c8ff\",\n\n  // === Health & Status ===\n  health: \"#22c55e\",\n  gauge: \"#22c55e\",\n  subsystem: \"#22c55e\",\n  status: \"#22c55e\",\n\n  // === Analytics & Visualization ===\n  sankey: \"#a855f7\",\n  treemap: \"#4d7cff\",\n  sunburst: \"#14b8a6\",\n  parallel: \"#f59e0b\",\n  radar: \"#00c8ff\",\n  graph: \"#a855f7\",\n  candlestick: \"#f59e0b\",\n  histogram: \"#00c8ff\",\n  pie: \"#a855f7\",\n  donut: \"#a855f7\",\n  bubble: \"#14b8a6\",\n  rose: \"#f59e0b\",\n\n  // === 3D Visualizations ===\n  \"3d\": \"#4d7cff\",\n  scatter3d: \"#00c8ff\",\n  bar3d: \"#22c55e\",\n  surface3d: \"#f59e0b\",\n  lines3d: \"#a855f7\",\n  debris: \"#f59e0b\",\n  constellation: \"#4d7cff\",\n  collision: \"#f59e0b\",\n  satellite: \"#4d7cff\",\n\n  // === Default ===\n  default: \"#00c8ff\",\n} as const;\n\n// =============================================================================\n// Utility Functions\n// =============================================================================\n\n/**\n * Get accent color based on title/content and accent mode\n *\n * @param title - Content title or description to analyze\n * @param accentMode - Current accent mode (specific color or 'mix')\n * @returns Hex color string or undefined\n *\n * @example\n * ```tsx\n * getSystemAccentColor('Power Systems Overview', 'mix') // '#22c55e'\n * getSystemAccentColor('Power Systems', 'purple') // '#a855f7'\n * ```\n */\nexport function getSystemAccentColor(\n  title: string,\n  accentMode: CardAccentKey,\n): string | undefined {\n  if (accentMode !== \"mix\") {\n    return CARD_ACCENT_COLORS[accentMode].value;\n  }\n\n  const lowerTitle = title.toLowerCase();\n  for (const [keyword, color] of Object.entries(SPACE_SYSTEM_COLORS)) {\n    if (lowerTitle.includes(keyword)) {\n      return color;\n    }\n  }\n  return SPACE_SYSTEM_COLORS.default;\n}\n\n/**\n * Get all accent color options for building UI selectors\n */\nexport function getAccentColorOptions(): Array<{\n  key: CardAccentKey;\n  label: string;\n  value: string;\n}> {\n  return Object.entries(CARD_ACCENT_COLORS).map(([key, config]) => ({\n    key: key as CardAccentKey,\n    label: config.label,\n    value: config.value,\n  }));\n}\n\n// =============================================================================\n// React Context & Provider\n// =============================================================================\n\nexport interface CardAccentContextValue {\n  /** Current accent mode */\n  accentMode: CardAccentKey;\n  /** Get accent color for a given title/content */\n  getAccentColor: (title: string) => string | undefined;\n  /** All available accent options */\n  accentOptions: Array<{ key: CardAccentKey; label: string; value: string }>;\n}\n\nconst CardAccentContext = createContext<CardAccentContextValue>({\n  accentMode: \"mix\",\n  getAccentColor: () => undefined,\n  accentOptions: getAccentColorOptions(),\n});\n\nexport interface CardAccentProviderProps {\n  /** Accent mode to use */\n  accentMode?: CardAccentKey;\n  /** Children */\n  children: ReactNode;\n}\n\n/**\n * Provider for card accent context\n * Wrap your app or section to provide consistent accent coloring\n */\nexport function CardAccentProvider({\n  accentMode = \"mix\",\n  children,\n}: CardAccentProviderProps): React.ReactElement {\n  const value = useMemo(\n    (): CardAccentContextValue => ({\n      accentMode,\n      getAccentColor: (title: string) =>\n        getSystemAccentColor(title, accentMode),\n      accentOptions: getAccentColorOptions(),\n    }),\n    [accentMode],\n  );\n\n  return (\n    <CardAccentContext.Provider value={value}>\n      {children}\n    </CardAccentContext.Provider>\n  );\n}\n\n/**\n * Hook to access card accent context\n *\n * @example\n * ```tsx\n * const { getAccentColor, accentMode } = useCardAccent();\n * <Container accentColor={getAccentColor('Power Chart')} />\n * ```\n */\nexport function useCardAccent(): CardAccentContextValue {\n  return useContext(CardAccentContext);\n}\n\nexport default CardAccentProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,IAAa,qBAA6D;CACxE,MAAM;EAAE,OAAO;EAAQ,OAAO;CAAU;CACxC,UAAU;EAAE,OAAO;EAAY,OAAO;CAAU;CAChD,QAAQ;EAAE,OAAO;EAAU,OAAO;CAAU;CAC5C,MAAM;EAAE,OAAO;EAAQ,OAAO;CAAU;CACxC,cAAc;EAAE,OAAO;EAAiB,OAAO;CAAU;CACzD,OAAO;EAAE,OAAO;EAAS,OAAO;CAAU;CAC1C,OAAO;EAAE,OAAO;EAAS,OAAO;CAAU;CAC1C,KAAK;EAAE,OAAO;EAAoB,OAAO;CAAM;AACjD;;;;;AAMA,IAAa,sBAA8C;CAEzD,WAAW;CACX,MAAM;CACN,SAAS;CACT,QAAQ;CAGR,OAAO;CACP,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAGR,SAAS;CACT,aAAa;CACb,SAAS;CACT,QAAQ;CAGR,UAAU;CACV,SAAS;CACT,aAAa;CACb,UAAU;CACV,MAAM;CAGN,UAAU;CACV,MAAM;CACN,IAAI;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,MAAM;CAGN,OAAO;CACP,SAAS;CACT,OAAO;CACP,cAAc;CACd,UAAU;CACV,SAAS;CACT,QAAQ;CACR,MAAM;CAGN,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;CAGT,QAAQ;CACR,OAAO;CACP,WAAW;CACX,QAAQ;CAGR,QAAQ;CACR,SAAS;CACT,UAAU;CACV,UAAU;CACV,OAAO;CACP,OAAO;CACP,aAAa;CACb,WAAW;CACX,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;CAGN,MAAM;CACN,WAAW;CACX,OAAO;CACP,WAAW;CACX,SAAS;CACT,QAAQ;CACR,eAAe;CACf,WAAW;CACX,WAAW;CAGX,SAAS;AACX;;;;;;;;;;;;;;AAmBA,SAAgB,qBACd,OACA,YACoB;CACpB,IAAI,eAAe,OACjB,OAAO,mBAAmB,WAAW,CAAC;CAGxC,MAAM,aAAa,MAAM,YAAY;CACrC,KAAK,MAAM,CAAC,SAAS,UAAU,OAAO,QAAQ,mBAAmB,GAC/D,IAAI,WAAW,SAAS,OAAO,GAC7B,OAAO;CAGX,OAAO,oBAAoB;AAC7B;;;;AAKA,SAAgB,wBAIb;CACD,OAAO,OAAO,QAAQ,kBAAkB,CAAC,CAAC,KAAK,CAAC,KAAK,aAAa;EAC3D;EACL,OAAO,OAAO;EACd,OAAO,OAAO;CAChB,EAAE;AACJ;AAeA,IAAM,oBAAoB,cAAsC;CAC9D,YAAY;CACZ,sBAAsB,KAAA;CACtB,eAAe,sBAAsB;AACvC,CAAC;;;;;AAaD,SAAgB,mBAAmB,EACjC,aAAa,OACb,YAC8C;CAC9C,MAAM,QAAQ,eACmB;EAC7B;EACA,iBAAiB,UACf,qBAAqB,OAAO,UAAU;EACxC,eAAe,sBAAsB;CACvC,IACA,CAAC,UAAU,CACb;CAEA,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;CACyB,CAAA;AAEhC;;;;;;;;;;AAWA,SAAgB,gBAAwC;CACtD,OAAO,WAAW,iBAAiB;AACrC"}

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

@@ -1,5 +1,4 @@
 import { ThemeVariant, ThemeMode } from './ThemeProvider';
-
 export interface ThemeConfig {
     /** Default theme variant */
     defaultTheme?: ThemeVariant;

package/dist/react/theme/config.js

@@ -1,30 +1,52 @@
-const DEFAULT_THEME_CONFIG = {
-  defaultTheme: "hybrid",
-  // Zen (Hybrid) is the default
-  defaultMode: "dark",
-  persist: true
+//#region src/react/theme/config.ts
+/**
+* Default theme configuration
+*
+* Available themes:
+* - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents
+* - 'astro' - Astro UX (U.S. Space Force) compliant theme
+* - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics
+* - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes
+*/
+var DEFAULT_THEME_CONFIG = {
+	defaultTheme: "hybrid",
+	defaultMode: "dark",
+	persist: true
 };
+/**
+* Get theme configuration from environment or use defaults
+*/
 function getThemeConfig() {
-  if (typeof window !== "undefined") {
-    const envTheme = window.__ZENDIR_UI_THEME__;
-    if (envTheme === "astro" || envTheme === "purple-hue" || envTheme === "hybrid") {
-      return {
-        ...DEFAULT_THEME_CONFIG,
-        defaultTheme: envTheme
-      };
-    }
-  }
-  return DEFAULT_THEME_CONFIG;
+	if (typeof window !== "undefined") {
+		const envTheme = window.__ZENDIR_UI_THEME__;
+		if (envTheme === "astro" || envTheme === "purple-hue" || envTheme === "hybrid" || envTheme === "nebula") return {
+			...DEFAULT_THEME_CONFIG,
+			defaultTheme: envTheme
+		};
+	}
+	return DEFAULT_THEME_CONFIG;
 }
+/**
+* Set default theme at build/runtime
+*
+* @example
+* ```tsx
+* // In your app root
+* import { setDefaultTheme } from '@zendir/ui/react/theme/config';
+*
+* // Zen (Hybrid) is the default; override if needed:
+* setDefaultTheme('hybrid');
+* setDefaultTheme('purple-hue');
+* setDefaultTheme('astro');
+* ```
+*/
 function setDefaultTheme(theme) {
-  if (typeof window !== "undefined") {
-    window.__ZENDIR_UI_THEME__ = theme;
-    localStorage.setItem("zendir-ui-theme", theme);
-  }
+	if (typeof window !== "undefined") {
+		window.__ZENDIR_UI_THEME__ = theme;
+		localStorage.setItem("zendir-ui-theme", theme);
+	}
 }
-export {
-  DEFAULT_THEME_CONFIG,
-  getThemeConfig,
-  setDefaultTheme
-};
-//# sourceMappingURL=config.js.map
+//#endregion
+export { DEFAULT_THEME_CONFIG, getThemeConfig, setDefaultTheme };
+
+//# sourceMappingURL=config.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/react/theme/config.ts"],"sourcesContent":["/**\n * @zendir/ui - Theme Configuration\n * \n * Easy configuration for default theme settings.\n * Import and use in your app root to set defaults.\n */\n\nimport type { ThemeVariant, ThemeMode } from './ThemeProvider';\n\nexport interface ThemeConfig {\n  /** Default theme variant */\n  defaultTheme?: ThemeVariant;\n  /** Default theme mode */\n  defaultMode?: ThemeMode;\n  /** Persist theme selection to localStorage */\n  persist?: boolean;\n}\n\n/**\n * Default theme configuration\n * \n * Available themes:\n * - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents\n * - 'astro' - Astro UX (U.S. Space Force) compliant theme\n * - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics\n * - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes\n */\nexport const DEFAULT_THEME_CONFIG: ThemeConfig = {\n  defaultTheme: 'hybrid', // Zen (Hybrid) is the default\n  defaultMode: 'dark',\n  persist: true,\n};\n\n/**\n * Get theme configuration from environment or use defaults\n */\nexport function getThemeConfig(): ThemeConfig {\n  // Allow override via environment variable or build-time config\n  if (typeof window !== 'undefined') {\n    const envTheme = (window as any).__ZENDIR_UI_THEME__;\n    if (envTheme === 'astro' || envTheme === 'purple-hue' || envTheme === 'hybrid') {\n      return {\n        ...DEFAULT_THEME_CONFIG,\n        defaultTheme: envTheme,\n      };\n    }\n  }\n  \n  return DEFAULT_THEME_CONFIG;\n}\n\n/**\n * Set default theme at build/runtime\n * \n * @example\n * ```tsx\n * // In your app root\n * import { setDefaultTheme } from '@zendir/ui/react/theme/config';\n * \n * // Zen (Hybrid) is the default; override if needed:\n * setDefaultTheme('hybrid');\n * setDefaultTheme('purple-hue');\n * setDefaultTheme('astro');\n * ```\n */\nexport function setDefaultTheme(theme: ThemeVariant): void {\n  if (typeof window !== 'undefined') {\n    (window as any).__ZENDIR_UI_THEME__ = theme;\n    // Also update localStorage if persist is enabled\n    localStorage.setItem('zendir-ui-theme', theme);\n  }\n}\n"],"names":[],"mappings":"AA2BO,MAAM,uBAAoC;AAAA,EAC/C,cAAc;AAAA;AAAA,EACd,aAAa;AAAA,EACb,SAAS;AACX;AAKO,SAAS,iBAA8B;AAE5C,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,WAAY,OAAe;AACjC,QAAI,aAAa,WAAW,aAAa,gBAAgB,aAAa,UAAU;AAC9E,aAAO;AAAA,QACL,GAAG;AAAA,QACH,cAAc;AAAA,MAAA;AAAA,IAElB;AAAA,EACF;AAEA,SAAO;AACT;AAgBO,SAAS,gBAAgB,OAA2B;AACzD,MAAI,OAAO,WAAW,aAAa;AAChC,WAAe,sBAAsB;AAEtC,iBAAa,QAAQ,mBAAmB,KAAK;AAAA,EAC/C;AACF;"}
+{"version":3,"file":"config.js","names":[],"sources":["../../../src/react/theme/config.ts"],"sourcesContent":["/**\n * @zendir/ui - Theme Configuration\n *\n * Easy configuration for default theme settings.\n * Import and use in your app root to set defaults.\n */\n\nimport type { ThemeVariant, ThemeMode } from \"./ThemeProvider\";\n\nexport interface ThemeConfig {\n  /** Default theme variant */\n  defaultTheme?: ThemeVariant;\n  /** Default theme mode */\n  defaultMode?: ThemeMode;\n  /** Persist theme selection to localStorage */\n  persist?: boolean;\n}\n\n/**\n * Default theme configuration\n *\n * Available themes:\n * - 'hybrid' - Zen (Hybrid): default; Astro status colors with purple accents\n * - 'astro' - Astro UX (U.S. Space Force) compliant theme\n * - 'purple-hue' - Zen (Purple Hue) theme with modern aesthetics\n * - 'transparent' / 'transparent-bold' / 'transparent-minimal' - Glassmorphic themes\n */\nexport const DEFAULT_THEME_CONFIG: ThemeConfig = {\n  defaultTheme: \"hybrid\", // Zen (Hybrid) is the default\n  defaultMode: \"dark\",\n  persist: true,\n};\n\n/**\n * Get theme configuration from environment or use defaults\n */\nexport function getThemeConfig(): ThemeConfig {\n  // Allow override via environment variable or build-time config\n  if (typeof window !== \"undefined\") {\n    const envTheme = (window as any).__ZENDIR_UI_THEME__;\n    if (\n      envTheme === \"astro\" ||\n      envTheme === \"purple-hue\" ||\n      envTheme === \"hybrid\" ||\n      envTheme === \"nebula\"\n    ) {\n      return {\n        ...DEFAULT_THEME_CONFIG,\n        defaultTheme: envTheme,\n      };\n    }\n  }\n\n  return DEFAULT_THEME_CONFIG;\n}\n\n/**\n * Set default theme at build/runtime\n *\n * @example\n * ```tsx\n * // In your app root\n * import { setDefaultTheme } from '@zendir/ui/react/theme/config';\n *\n * // Zen (Hybrid) is the default; override if needed:\n * setDefaultTheme('hybrid');\n * setDefaultTheme('purple-hue');\n * setDefaultTheme('astro');\n * ```\n */\nexport function setDefaultTheme(theme: ThemeVariant): void {\n  if (typeof window !== \"undefined\") {\n    (window as any).__ZENDIR_UI_THEME__ = theme;\n    // Also update localStorage if persist is enabled\n    localStorage.setItem(\"zendir-ui-theme\", theme);\n  }\n}\n"],"mappings":";;;;;;;;;;AA2BA,IAAa,uBAAoC;CAC/C,cAAc;CACd,aAAa;CACb,SAAS;AACX;;;;AAKA,SAAgB,iBAA8B;CAE5C,IAAI,OAAO,WAAW,aAAa;EACjC,MAAM,WAAY,OAAe;EACjC,IACE,aAAa,WACb,aAAa,gBACb,aAAa,YACb,aAAa,UAEb,OAAO;GACL,GAAG;GACH,cAAc;EAChB;CAEJ;CAEA,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,gBAAgB,OAA2B;CACzD,IAAI,OAAO,WAAW,aAAa;EACjC,OAAgB,sBAAsB;EAEtC,aAAa,QAAQ,mBAAmB,KAAK;CAC/C;AACF"}

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

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

package/dist/react/theme/index.js

@@ -1,19 +1,4 @@
 import { ThemeProvider, useScrollbarStyles, useTheme, useThemeTokens } from "./ThemeProvider.js";
 import { DEFAULT_THEME_CONFIG, getThemeConfig, setDefaultTheme } from "./config.js";
 import { CARD_ACCENT_COLORS, CardAccentProvider, SPACE_SYSTEM_COLORS, getAccentColorOptions, getSystemAccentColor, useCardAccent } from "./cardAccent.js";
-export {
-  CARD_ACCENT_COLORS,
-  CardAccentProvider,
-  DEFAULT_THEME_CONFIG,
-  SPACE_SYSTEM_COLORS,
-  ThemeProvider,
-  getAccentColorOptions,
-  getSystemAccentColor,
-  getThemeConfig,
-  setDefaultTheme,
-  useCardAccent,
-  useScrollbarStyles,
-  useTheme,
-  useThemeTokens
-};
-//# sourceMappingURL=index.js.map
+export { CARD_ACCENT_COLORS, CardAccentProvider, DEFAULT_THEME_CONFIG, SPACE_SYSTEM_COLORS, ThemeProvider, getAccentColorOptions, getSystemAccentColor, getThemeConfig, setDefaultTheme, useCardAccent, useScrollbarStyles, useTheme, useThemeTokens };

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

@@ -0,0 +1,332 @@
+import { default as React } from 'react';
+export type ThemeVariant = "astro" | "purple-hue" | "hybrid" | "nebula" | "transparent" | "transparent-bold" | "transparent-minimal";
+export type ThemeMode = "light" | "dark";
+export interface ThemeColors {
+    background: {
+        base: string;
+        surface: string;
+        elevated: string;
+        overlay: string;
+    };
+    border: {
+        default: string;
+        muted: string;
+        focus: string;
+        /** Transparent theme: thin faded top-to-bottom border (box-shadow, use with border: 'none') */
+        fadedBoxShadow?: string;
+        /** Card border style (computed from theme – solid or transparent faded). Use ...tokens.colors.border.cardStyle */
+        cardStyle?: React.CSSProperties;
+        /** Card border for dashed/empty state. Use ...tokens.colors.border.cardStyleDashed */
+        cardStyleDashed?: React.CSSProperties;
+        /** Card border using default color (e.g. NavBall, EclipseTimer). Use ...tokens.colors.border.cardStyleDefault */
+        cardStyleDefault?: React.CSSProperties;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        /** Muted/placeholder text (alias for tertiary when not set) */
+        muted?: string;
+        inverse: string;
+    };
+    status: {
+        normal: string;
+        standby: string;
+        caution: string;
+        serious: string;
+        critical: string;
+        off: string;
+    };
+    semantic: {
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    accent: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    interactive: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+        /** Transparent theme: button/control bg (low opacity purple) when not hovered */
+        transparentDefault?: string;
+        /** Transparent theme: button/control bg on hover (higher opacity purple) */
+        transparentHover?: string;
+        /** Transparent theme: input field bg (semi-transparent purple tint) */
+        transparentInputBg?: string;
+    };
+}
+export interface ThemeAnimation {
+    /** Fast transitions (hover states) - 150ms */
+    fast: string;
+    /** Normal transitions (most interactions) - 250ms */
+    normal: string;
+    /** Slow transitions (page/mode changes) - 400ms */
+    slow: string;
+    /** Spring animation for playful interactions */
+    spring: string;
+    /** Easing function */
+    easing: {
+        default: string;
+        in: string;
+        out: string;
+        inOut: string;
+    };
+    /** Duration values in milliseconds */
+    duration: {
+        instant: number;
+        fast: number;
+        normal: number;
+        slow: number;
+    };
+}
+export interface ThemeFocus {
+    /** Focus ring color */
+    color: string;
+    /** Focus ring width */
+    width: string;
+    /** Focus ring offset */
+    offset: string;
+    /** Full focus ring CSS */
+    ring: string;
+    /** Focus ring style object */
+    style: React.CSSProperties;
+}
+/**
+ * Astro UX Typography Style Token
+ * Based on https://www.astrouxds.com/foundations/typography/
+ */
+export interface TypographyStyle {
+    fontSize: string;
+    fontWeight: number;
+    letterSpacing: string;
+    lineHeight: string;
+}
+export interface ThemeTokens {
+    colors: ThemeColors;
+    spacing: {
+        /** 2px — micro adjustments, decorative offsets */
+        xxs: string;
+        /** 4px — tight gaps, icon padding */
+        xs: string;
+        /** 8px — compact spacing, small gaps */
+        sm: string;
+        /** 12px — form fields, compact cards (between sm and md) */
+        smd: string;
+        /** 16px — default card padding, section gaps */
+        md: string;
+        /** 20px — slightly generous spacing */
+        mdl: string;
+        /** 24px — generous spacing, content area padding */
+        lg: string;
+        /** 32px — large section gaps */
+        xl: string;
+        /** 48px — extra large spacing */
+        xxl: string;
+    };
+    borderRadius: {
+        none: string;
+        /** 1px — very subtle rounding */
+        xs: string;
+        /** 2px — small elements, badges, tooltips */
+        sm: string;
+        /** 4px — inputs, selects, standard controls */
+        md: string;
+        /** 8px — cards, containers */
+        lg: string;
+        /** 12px — prominent surfaces, modals */
+        xl: string;
+        /** 9999px — pills, fully rounded */
+        full: string;
+    };
+    /** Standardised element heights for interactive controls */
+    elementSize: {
+        /** 28px — compact controls */
+        sm: string;
+        /** 36px — default controls */
+        md: string;
+        /** 44px — prominent controls, touch targets */
+        lg: string;
+    };
+    typography: {
+        fontFamily: {
+            primary: string;
+            /** Heading stack (Sora → fallbacks); set by every theme. */
+            heading: string;
+            mono: string;
+        };
+        display: {
+            1: TypographyStyle;
+            2: TypographyStyle;
+        };
+        heading: {
+            1: TypographyStyle;
+            "1Bold": TypographyStyle;
+            2: TypographyStyle;
+            3: TypographyStyle;
+            4: TypographyStyle;
+            5: TypographyStyle;
+            6: TypographyStyle;
+        };
+        body: {
+            1: TypographyStyle;
+            "1Bold": TypographyStyle;
+            2: TypographyStyle;
+            "2Bold": TypographyStyle;
+            3: TypographyStyle;
+            "3Bold": TypographyStyle;
+        };
+        control: {
+            1: TypographyStyle;
+            "1Bold": TypographyStyle;
+        };
+        fontSize: {
+            micro: string;
+            xxs: string;
+            xs: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+        };
+        fontWeight: {
+            light: number;
+            normal: number;
+            medium: number;
+            semibold: number;
+            bold: number;
+        };
+        lineHeight: {
+            tight: string;
+            normal: string;
+            relaxed: string;
+        };
+        letterSpacing: {
+            tight: string;
+            normal: string;
+            wide: string;
+        };
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        glow: (color: string) => string;
+    };
+    animation: ThemeAnimation;
+    focus: ThemeFocus;
+    /** Semantic layout tokens for consistent spacing across cards, forms, and sections */
+    layout: LayoutTokens;
+    /** Semantic border tokens for consistent element styling (derived from theme colors) */
+    borders: BorderTokens;
+}
+export interface LayoutTokens {
+    /** Card / panel container spacing */
+    card: {
+        /** Internal padding of card containers */
+        padding: string;
+        /** Gap between cards in grid layouts (desktop) */
+        gap: string;
+        /** Gap between cards in grid layouts (mobile / compact) */
+        gapCompact: string;
+        /** Card heading: icon size, title typography, gap — single system for all cards/charts */
+        heading: {
+            iconSize: number;
+            iconSizeCompact: number;
+            titleFontSize: string;
+            /** Smaller title for chart headers (e.g. Power Trends) so they match card visual weight */
+            titleFontSizeChart: string;
+            titleFontWeight: number;
+            gap: number;
+        };
+    };
+    /** Section heading spacing (heading + divider + content) */
+    section: {
+        /** Padding below heading text, above the divider border */
+        headerPaddingBottom: string;
+        /** Margin below the divider border, before content */
+        headerMarginBottom: string;
+        /** Padding above the first content element after heading */
+        contentPaddingTop: string;
+    };
+    /** Form and input field spacing */
+    form: {
+        /** Vertical gap between stacked form fields */
+        fieldGap: string;
+        /** Horizontal gap between side-by-side inline fields */
+        inlineGap: string;
+        /** Padding inside grouped / nested field containers */
+        groupPadding: string;
+        /** Gap between items within a field group */
+        groupGap: string;
+        /** Gap between label text and helper icons (e.g. tooltip) */
+        labelGap: string;
+    };
+    /** Nested surface / panel spacing (e.g. grouped fields within a card) */
+    surface: {
+        /** Internal padding of nested surfaces */
+        padding: string;
+        /** Border radius of nested surfaces */
+        borderRadius: string;
+        /** Gap between items in compact nested surfaces */
+        gap: string;
+    };
+}
+export interface BorderTokens {
+    /** Border widths — standardised across all interactive elements */
+    width: {
+        /** Thin (1px) — inputs, cards, dividers, dropdowns */
+        thin: string;
+        /** Medium (1.5px) — secondary buttons, emphasised inputs */
+        medium: string;
+        /** Thick (2px) — checkboxes, accent borders, active tabs */
+        thick: string;
+    };
+    /** Pre-computed input / control borders (width + style + color) */
+    input: {
+        /** Default resting state */
+        default: string;
+        /** Hover state (accent at 50% opacity) */
+        hover: string;
+        /** Focused state (full accent) */
+        focus: string;
+        /** Error / critical state */
+        error: string;
+    };
+    /** Focus ring box-shadow values for interactive elements */
+    focusRing: {
+        /** Standard ring for inputs and selects */
+        default: string;
+        /** Ring for buttons (double-ring pattern) */
+        button: string;
+        /** Subtle ring for checkboxes, tabs, toggles */
+        subtle: string;
+    };
+    /** Section divider border (headings, dialog headers/footers, tab bars) */
+    divider: string;
+    /** Dropdown / popover container border */
+    dropdown: string;
+    /** Separator line inside elements (unit separators, table rows) */
+    separator: string;
+}
+/**
+ * Derives border tokens from a theme's resolved colors.
+ * Called once per theme change inside the ThemeProvider useMemo.
+ */
+export declare function computeBorderTokens(colors: ThemeColors): BorderTokens;
+/**
+ * Base theme type used for static theme definitions.
+ * `borders` is omitted because it is derived from colors at runtime
+ * inside the ThemeProvider useMemo (see computeBorderTokens).
+ */
+export type ThemeTokensBase = Omit<ThemeTokens, "borders">;

package/dist/react/theme/types.js

@@ -0,0 +1,39 @@
+//#region src/react/theme/types.ts
+/**
+* Derives border tokens from a theme's resolved colors.
+* Called once per theme change inside the ThemeProvider useMemo.
+*/
+function computeBorderTokens(colors) {
+	const thin = "1px";
+	const medium = "1.5px";
+	const thick = "2px";
+	const accent = colors.accent.primary;
+	const muted = colors.border.muted;
+	const critical = colors.status.critical;
+	const bgBase = colors.background.base;
+	return {
+		width: {
+			thin,
+			medium,
+			thick
+		},
+		input: {
+			default: `${thin} solid ${muted}`,
+			hover: `${thin} solid ${accent}80`,
+			focus: `${thin} solid ${accent}`,
+			error: `${thin} solid ${critical}`
+		},
+		focusRing: {
+			default: `0 0 0 3px ${accent}50, 0 0 20px ${accent}15`,
+			button: `0 0 0 2px ${bgBase}, 0 0 0 4px ${accent}`,
+			subtle: `0 0 0 2px ${accent}60`
+		},
+		divider: `${thin} solid ${muted}`,
+		dropdown: `${thin} solid ${accent}30`,
+		separator: `${thin} solid ${muted}`
+	};
+}
+//#endregion
+export { computeBorderTokens };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/react/theme/types.ts"],"sourcesContent":["/**\n * @zendir/ui — Theme type definitions and derived-token helpers.\n *\n * Shared home for the theme token shapes so both the runtime provider\n * (ThemeProvider) and the static theme definitions (src/tokens/themes.ts)\n * reference one set of types. Isolating these here keeps the token-build\n * script (which imports the theme definitions) free of the full React\n * provider module.\n */\n\nimport React from \"react\";\n\nexport type ThemeVariant =\n  | \"astro\"\n  | \"purple-hue\"\n  | \"hybrid\"\n  | \"nebula\"\n  | \"transparent\"\n  | \"transparent-bold\"\n  | \"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      /** Heading stack (Sora → fallbacks); set by every theme. */\n      heading: 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 */\nexport function 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 */\nexport type ThemeTokensBase = Omit<ThemeTokens, \"borders\">;\n"],"mappings":";;;;;AA+WA,SAAgB,oBAAoB,QAAmC;CACrE,MAAM,OAAO;CACb,MAAM,SAAS;CACf,MAAM,QAAQ;CACd,MAAM,SAAS,OAAO,OAAO;CAC7B,MAAM,QAAQ,OAAO,OAAO;CAC5B,MAAM,WAAW,OAAO,OAAO;CAC/B,MAAM,SAAS,OAAO,WAAW;CAEjC,OAAO;EACL,OAAO;GAAE;GAAM;GAAQ;EAAM;EAC7B,OAAO;GACL,SAAS,GAAG,KAAK,SAAS;GAC1B,OAAO,GAAG,KAAK,SAAS,OAAO;GAC/B,OAAO,GAAG,KAAK,SAAS;GACxB,OAAO,GAAG,KAAK,SAAS;EAC1B;EACA,WAAW;GAET,SAAS,aAAa,OAAO,eAAe,OAAO;GACnD,QAAQ,aAAa,OAAO,cAAc;GAC1C,QAAQ,aAAa,OAAO;EAC9B;EACA,SAAS,GAAG,KAAK,SAAS;EAC1B,UAAU,GAAG,KAAK,SAAS,OAAO;EAClC,WAAW,GAAG,KAAK,SAAS;CAC9B;AACF"}