@zendir/ui 0.4.1 → 0.6.0

package/dist/react/theme/ThemeProvider.js

@@ -1,728 +1,65 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useMemo, useContext, createContext } from "react";
-import { typography, borderRadius, spacing } from "../../tokens/index.js";
+import { astroThemeDark, astroThemeLight, hybridTheme, nebulaTheme, purpleHueTheme, transparentMinimalTheme, transparentTheme } from "../../tokens/themes.js";
+import { computeBorderTokens } from "./types.js";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/theme/ThemeProvider.tsx
+/**
+* @zendir/ui - Theme Provider
+*
+* Enterprise-grade theming system supporting Astro UX Design System and Zendir themes.
+* Full Tier 3 compliance with official Astro tokens (dark + light themes).
+*
+* Features:
+* - Multiple theme variants (Zen Hybrid default, astro, purple-hue, transparent)
+* - Light and dark modes
+* - Animation tokens with reduced-motion support
+* - Focus ring styles for accessibility
+* - CSS variable injection
+* - Local storage persistence
+*/
 function adjustHexBrightness(hex, factor) {
-  const normalized = hex.replace("#", "").trim();
-  const expanded = normalized.length === 3 ? normalized.split("").map((ch) => ch + ch).join("") : normalized;
-  if (!/^[0-9a-fA-F]{6}$/.test(expanded)) {
-    return hex;
-  }
-  const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
-  const r = clamp(parseInt(expanded.slice(0, 2), 16) * factor);
-  const g = clamp(parseInt(expanded.slice(2, 4), 16) * factor);
-  const b = clamp(parseInt(expanded.slice(4, 6), 16) * factor);
-  const toHex = (value) => value.toString(16).padStart(2, "0");
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-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: {
-      // WCAG 2.4.13: focus indicators ≥ 3:1 contrast — raised from 20%/30% to 50%/60%
-      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}`
-  };
+	const normalized = hex.replace("#", "").trim();
+	const expanded = normalized.length === 3 ? normalized.split("").map((ch) => ch + ch).join("") : normalized;
+	if (!/^[0-9a-fA-F]{6}$/.test(expanded)) return hex;
+	const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
+	const r = clamp(parseInt(expanded.slice(0, 2), 16) * factor);
+	const g = clamp(parseInt(expanded.slice(2, 4), 16) * factor);
+	const b = clamp(parseInt(expanded.slice(4, 6), 16) * factor);
+	const toHex = (value) => value.toString(16).padStart(2, "0");
+	return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
-const animationTokens = {
-  fast: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
-  normal: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
-  slow: "all 400ms cubic-bezier(0.4, 0, 0.2, 1)",
-  spring: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
-  easing: {
-    default: "cubic-bezier(0.4, 0, 0.2, 1)",
-    in: "ease-in",
-    out: "ease-out",
-    inOut: "ease-in-out"
-  },
-  duration: {
-    instant: 0,
-    fast: 150,
-    normal: 250,
-    slow: 400
-  }
-};
-const animationTokensReduced = {
-  fast: "all 0.01ms linear",
-  normal: "all 0.01ms linear",
-  slow: "all 0.01ms linear",
-  spring: "all 0.01ms linear",
-  easing: animationTokens.easing,
-  duration: { instant: 0, fast: 0, normal: 0, slow: 0 }
-};
-const focusTokensDark = {
-  color: "#4dacff",
-  width: "2px",
-  offset: "2px",
-  ring: "0 0 0 2px #4dacff",
-  style: {
-    outline: "2px solid #4dacff",
-    outlineOffset: "2px"
-  }
-};
-const focusTokensLight = {
-  color: "#0066cc",
-  width: "2px",
-  offset: "2px",
-  ring: "0 0 0 2px #0066cc",
-  style: {
-    outline: "2px solid #0066cc",
-    outlineOffset: "2px"
-  }
-};
-const shadowsDark = {
-  none: "none",
-  sm: "0 1px 2px rgba(0, 0, 0, 0.3)",
-  md: "0 4px 8px rgba(0, 0, 0, 0.4)",
-  lg: "0 8px 16px rgba(0, 0, 0, 0.5)",
-  xl: "0 16px 32px rgba(0, 0, 0, 0.6)",
-  glow: (color) => `0 0 20px ${color}40, 0 0 40px ${color}20`
-};
-const shadowsLight = {
-  none: "none",
-  sm: "0 1px 2px rgba(0, 0, 0, 0.1)",
-  md: "0 4px 8px rgba(0, 0, 0, 0.15)",
-  lg: "0 8px 16px rgba(0, 0, 0, 0.2)",
-  xl: "0 16px 32px rgba(0, 0, 0, 0.25)",
-  glow: (color) => `0 0 20px ${color}30, 0 0 40px ${color}15`
-};
-const layoutTokens = {
-  card: {
-    padding: "16px",
-    // 4 × 4px
-    gap: "24px",
-    // 6 × 4px  — desktop grid gap (matches outer padding)
-    gapCompact: "16px",
-    // 4 × 4px  — mobile grid gap
-    heading: {
-      iconSize: 18,
-      // default card header icon (px) — matches ISS/Telemetry card header size
-      iconSizeCompact: 16,
-      // compact (e.g. chart inline header)
-      titleFontSize: "1rem",
-      // card titles (ISS, Telemetry, Mission) — reduced from 1.125rem
-      titleFontSizeChart: "0.875rem",
-      // chart titles (Power Trends) — slightly smaller
-      titleFontWeight: 500,
-      gap: 8
-      // gap between icon and title (px)
-    }
-  },
-  section: {
-    headerPaddingBottom: "8px",
-    // 2 × 4px
-    headerMarginBottom: "0px",
-    contentPaddingTop: "8px"
-    // 2 × 4px
-  },
-  form: {
-    fieldGap: "12px",
-    // 3 × 4px  — between stacked fields
-    inlineGap: "12px",
-    // 3 × 4px  — between side-by-side fields
-    groupPadding: "12px",
-    // 3 × 4px  — inside grouped containers
-    groupGap: "12px",
-    // 3 × 4px  — within group items
-    labelGap: "3px"
-    // label text ↔ tooltip icon
-  },
-  surface: {
-    padding: "12px",
-    // 3 × 4px
-    borderRadius: "12px",
-    // 3 × 4px
-    gap: "8px"
-    // 2 × 4px
-  }
-};
-const astroThemeDark = {
-  colors: {
-    background: {
-      base: "#101923",
-      surface: "#1b2d3e",
-      elevated: "#243b53",
-      overlay: "rgba(16, 25, 35, 0.95)"
-    },
-    border: {
-      default: "#2b659b",
-      muted: "#172635",
-      focus: "#4dacff"
-    },
-    text: {
-      primary: "#ffffff",
-      secondary: "#b7c5d3",
-      tertiary: "#8fa4b7",
-      muted: "#8fa4b7",
-      inverse: "#1b2d3e"
-    },
-    status: {
-      normal: "#56f000",
-      standby: "#2dccff",
-      caution: "#fce83a",
-      serious: "#ffb302",
-      critical: "#ff3838",
-      off: "#a4abb6"
-    },
-    semantic: {
-      success: "#56f000",
-      warning: "#fce83a",
-      error: "#ff3838",
-      info: "#4dacff"
-    },
-    accent: {
-      primary: "#4dacff",
-      secondary: "#56f000",
-      tertiary: "#a371f7"
-    },
-    interactive: {
-      default: "#4dacff",
-      hover: "#92cbff",
-      active: "#0066cc",
-      disabled: "#6b7280"
-    }
-  },
-  // spacing + borderRadius are sourced from tokens/index.ts (single source
-  // of truth — see comment at the top of this file).
-  spacing: { ...spacing },
-  borderRadius: { ...borderRadius },
-  elementSize: {
-    sm: "28px",
-    md: "36px",
-    lg: "44px"
-  },
-  typography: {
-    /**
-     * Font families — sourced from src/tokens/index.ts. Canonical stacks:
-     *   primary: Public Sans → Roboto → system
-     *   heading: Sora → Roboto → system
-     *   mono:    Roboto Mono → system mono
-     * @see https://www.astrouxds.com/foundations/typography/
-     */
-    fontFamily: { ...typography.fontFamily },
-    // Astro UX Display Styles
-    // https://www.astrouxds.com/foundations/typography/
-    display: {
-      1: { fontSize: "3.75rem", fontWeight: 300, letterSpacing: "-0.5px", lineHeight: "4.375rem" },
-      2: { fontSize: "3rem", fontWeight: 400, letterSpacing: "0", lineHeight: "3.5rem" }
-    },
-    // Astro UX Heading Styles
-    heading: {
-      1: { fontSize: "2.125rem", fontWeight: 400, letterSpacing: "0.25px", lineHeight: "2.5rem" },
-      "1Bold": { fontSize: "2.125rem", fontWeight: 700, letterSpacing: "0.25px", lineHeight: "2rem" },
-      2: { fontSize: "1.5rem", fontWeight: 400, letterSpacing: "0", lineHeight: "1.75rem" },
-      3: { fontSize: "1.25rem", fontWeight: 500, letterSpacing: "0.15px", lineHeight: "1.5rem" },
-      4: { fontSize: "1.25rem", fontWeight: 300, letterSpacing: "0.15px", lineHeight: "1.5rem" },
-      5: { fontSize: "1.125rem", fontWeight: 400, letterSpacing: "0", lineHeight: "1.5rem" },
-      6: { fontSize: "1.125rem", fontWeight: 300, letterSpacing: "0", lineHeight: "1.5rem" }
-    },
-    // Astro UX Body Styles
-    body: {
-      1: { fontSize: "1rem", fontWeight: 400, letterSpacing: "0.5px", lineHeight: "1.5rem" },
-      "1Bold": { fontSize: "1rem", fontWeight: 700, letterSpacing: "0.5px", lineHeight: "1.5rem" },
-      2: { fontSize: "0.875rem", fontWeight: 400, letterSpacing: "0.5px", lineHeight: "1.25rem" },
-      "2Bold": { fontSize: "0.875rem", fontWeight: 700, letterSpacing: "0.5px", lineHeight: "1.25rem" },
-      3: { fontSize: "0.75rem", fontWeight: 400, letterSpacing: "0", lineHeight: "1rem" },
-      "3Bold": { fontSize: "0.75rem", fontWeight: 700, letterSpacing: "0", lineHeight: "1rem" }
-    },
-    // Astro UX Control Body Styles
-    control: {
-      1: { fontSize: "1rem", fontWeight: 400, letterSpacing: "0.5px", lineHeight: "1.25rem" },
-      "1Bold": { fontSize: "1rem", fontWeight: 700, letterSpacing: "0.5px", lineHeight: "1.25rem" }
-    },
-    // Convenience numeric scale — sourced from tokens/index.ts. Prefer the
-    // semantically-named display/heading/body/control style objects above
-    // for new code; this scale is kept for the ~300 existing components
-    // that consume `tokens.typography.fontSize.*` directly.
-    fontSize: { ...typography.fontSize },
-    /**
-     * Font weights per AstroUXDS specification
-     * Only 300, 400, 500, 700 are officially supported
-     * @see https://www.astrouxds.com/foundations/typography/
-     */
-    fontWeight: {
-      light: 300,
-      normal: 400,
-      medium: 500,
-      /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
-      semibold: 500,
-      // Changed from 600 to 500 for Astro compliance
-      bold: 700
-    },
-    lineHeight: {
-      tight: "1.25rem",
-      normal: "1.5rem",
-      relaxed: "1.75rem"
-    },
-    letterSpacing: {
-      tight: "-0.5px",
-      normal: "0",
-      wide: "0.5px"
-    }
-  },
-  shadows: shadowsDark,
-  animation: animationTokens,
-  focus: focusTokensDark,
-  layout: layoutTokens
-};
-const astroThemeLight = {
-  colors: {
-    background: {
-      base: "#eaeef4",
-      surface: "#f5f8fc",
-      elevated: "#ffffff",
-      overlay: "rgba(234, 238, 244, 0.95)"
-    },
-    border: {
-      default: "#2b659b",
-      muted: "#d1d5db",
-      focus: "#0066cc"
-    },
-    text: {
-      primary: "#1b2d3e",
-      secondary: "#51667c",
-      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)
-      muted: "#556a7c",
-      // WCAG AA compliant (was #8fa4b7)
-      inverse: "#ffffff"
-    },
-    status: {
-      normal: "#56f000",
-      standby: "#2dccff",
-      caution: "#fce83a",
-      serious: "#ffb302",
-      critical: "#ff3838",
-      off: "#a4abb6"
-    },
-    semantic: {
-      success: "#56f000",
-      warning: "#fce83a",
-      error: "#ff3838",
-      info: "#4dacff"
-    },
-    accent: {
-      primary: "#0066cc",
-      secondary: "#56f000",
-      tertiary: "#7c3aed"
-    },
-    interactive: {
-      default: "#0066cc",
-      hover: "#0052a3",
-      active: "#003d7a",
-      disabled: "#a4abb6"
-    }
-  },
-  spacing: astroThemeDark.spacing,
-  borderRadius: astroThemeDark.borderRadius,
-  elementSize: astroThemeDark.elementSize,
-  typography: astroThemeDark.typography,
-  shadows: shadowsLight,
-  animation: animationTokens,
-  focus: focusTokensLight,
-  layout: layoutTokens
-};
-const focusTokensPurpleHue = {
-  color: "#8b5cf6",
-  width: "2px",
-  offset: "2px",
-  ring: "0 0 0 2px #8b5cf6",
-  style: {
-    outline: "2px solid #8b5cf6",
-    outlineOffset: "2px"
-  }
-};
-const hybridTheme = {
-  colors: {
-    background: {
-      base: "#09090b",
-      surface: "rgba(24, 24, 27, 0.98)",
-      elevated: "rgba(39, 39, 42, 0.98)",
-      overlay: "rgba(0, 0, 0, 0.85)"
-    },
-    border: {
-      default: "rgba(139, 92, 246, 0.3)",
-      // Purple tint
-      muted: "rgba(63, 63, 70, 0.5)",
-      focus: "#8b5cf6"
-      // Zendir purple
-    },
-    text: {
-      primary: "#ffffff",
-      secondary: "#a1a1aa",
-      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)
-      muted: "#8e8e96",
-      // WCAG AA compliant (was #71717a)
-      inverse: "#09090b"
-    },
-    // Astro UXD Status Colors (unchanged for compliance)
-    status: {
-      normal: "#56f000",
-      standby: "#2dccff",
-      caution: "#fce83a",
-      serious: "#ffb302",
-      critical: "#ff3838",
-      off: "#a4abb6"
-    },
-    semantic: {
-      success: "#56f000",
-      warning: "#fce83a",
-      error: "#ff3838",
-      info: "#8b5cf6"
-      // Purple for info
-    },
-    // Zendir Purple Accent Palette
-    accent: {
-      primary: "#8b5cf6",
-      // Vibrant purple
-      secondary: "#a78bfa",
-      // Light purple
-      tertiary: "#7c3aed"
-      // Deep purple
-    },
-    interactive: {
-      default: "#8b5cf6",
-      hover: "#a78bfa",
-      active: "#7c3aed",
-      disabled: "#52525b"
-    }
-  },
-  spacing: astroThemeDark.spacing,
-  borderRadius: {
-    none: "0",
-    xs: "2px",
-    sm: "4px",
-    md: "6px",
-    lg: "10px",
-    xl: "14px",
-    full: "9999px"
-  },
-  elementSize: astroThemeDark.elementSize,
-  typography: astroThemeDark.typography,
-  shadows: {
-    ...shadowsDark,
-    glow: (color) => `0 0 20px ${color}50, 0 0 40px ${color}25, 0 4px 12px ${color}20`
-  },
-  animation: animationTokens,
-  focus: focusTokensPurpleHue,
-  layout: layoutTokens
-};
-const purpleHueTheme = {
-  colors: {
-    background: {
-      base: "#0a0a0f",
-      surface: "rgba(18, 18, 28, 0.98)",
-      elevated: "rgba(28, 28, 42, 0.98)",
-      overlay: "rgba(0, 0, 0, 0.9)"
-    },
-    border: {
-      default: "rgba(139, 92, 246, 0.25)",
-      muted: "rgba(55, 48, 82, 0.5)",
-      focus: "#8b5cf6"
-    },
-    text: {
-      primary: "#fafafa",
-      secondary: "#a1a1aa",
-      tertiary: "#8e8e96",
-      // WCAG AA: 6.08:1 on #0a0a0f, 5.02:1 on elevated (was #71717a → 4.05:1 FAIL)
-      muted: "#8e8e96",
-      // WCAG AA compliant (was #71717a)
-      inverse: "#0a0a0f"
-    },
-    // Astro UXD Status Colors (for compliance)
-    status: {
-      normal: "#56f000",
-      standby: "#2dccff",
-      caution: "#fce83a",
-      serious: "#ffb302",
-      critical: "#ff3838",
-      off: "#a4abb6"
-    },
-    semantic: {
-      success: "#56f000",
-      warning: "#fce83a",
-      error: "#ff3838",
-      info: "#a78bfa"
-    },
-    // Zendir Purple Accent Palette
-    accent: {
-      primary: "#8b5cf6",
-      // Vibrant purple
-      secondary: "#a78bfa",
-      // Light purple
-      tertiary: "#7c3aed"
-      // Deep purple
-    },
-    interactive: {
-      default: "#8b5cf6",
-      hover: "#a78bfa",
-      active: "#7c3aed",
-      disabled: "#52525b"
-    }
-  },
-  spacing: astroThemeDark.spacing,
-  borderRadius: {
-    none: "0",
-    xs: "2px",
-    sm: "4px",
-    md: "6px",
-    lg: "10px",
-    xl: "14px",
-    full: "9999px"
-  },
-  elementSize: astroThemeDark.elementSize,
-  // Same typography as hybrid (Astro UX font stack with full fallbacks) for consistent card font across themes
-  typography: astroThemeDark.typography,
-  shadows: {
-    ...shadowsDark,
-    glow: (color) => `0 0 25px ${color}60, 0 0 50px ${color}30, 0 4px 16px ${color}25`
-  },
-  animation: animationTokens,
-  focus: {
-    ...focusTokensPurpleHue
-  },
-  layout: layoutTokens
-};
-const transparentTheme = {
-  colors: {
-    background: {
-      // Highly transparent backgrounds for glass effect
-      base: "rgba(8, 12, 20, 0.95)",
-      surface: "rgba(15, 20, 35, 0.85)",
-      elevated: "rgba(25, 35, 55, 0.80)",
-      overlay: "rgba(0, 0, 0, 0.75)"
-    },
-    border: {
-      // Purple accent borders (Zendir brand)
-      default: "rgba(139, 92, 246, 0.25)",
-      muted: "rgba(139, 92, 246, 0.15)",
-      focus: "#8b5cf6",
-      // Thin faded card border with purple hint
-      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)"
-    },
-    text: {
-      primary: "#f0f4f8",
-      secondary: "#94a3b8",
-      tertiary: "#7b8da1",
-      // WCAG AA: 5.71:1 on base, 5.34:1 on elevated (was #64748b → 3.66:1 FAIL)
-      muted: "#7b8da1",
-      // WCAG AA compliant (was #64748b)
-      inverse: "#0f172a"
-    },
-    // Astro UXD Status Colors
-    status: {
-      normal: "#56f000",
-      standby: "#2dccff",
-      caution: "#fce83a",
-      serious: "#ffb302",
-      critical: "#ff3838",
-      off: "#a4abb6"
-    },
-    semantic: {
-      success: "#56f000",
-      warning: "#fce83a",
-      error: "#ff3838",
-      info: "#8b5cf6"
-    },
-    // Purple accent (matching hybrid theme for consistency)
-    accent: {
-      primary: "#8b5cf6",
-      // Vibrant purple
-      secondary: "#a78bfa",
-      // Light purple
-      tertiary: "#7c3aed"
-      // Deep purple
-    },
-    interactive: {
-      default: "#8b5cf6",
-      // Purple for interactive elements
-      hover: "#a78bfa",
-      // Light purple on hover
-      active: "#7c3aed",
-      // Deep purple on active
-      disabled: "#475569",
-      // Purple-hue transparent backgrounds for buttons/inputs (transparent + transparent-bold)
-      transparentDefault: "rgba(139, 92, 246, 0.12)",
-      transparentHover: "rgba(139, 92, 246, 0.32)",
-      transparentInputBg: "rgba(139, 92, 246, 0.08)"
-    }
-  },
-  spacing: astroThemeDark.spacing,
-  borderRadius: {
-    none: "0",
-    xs: "2px",
-    sm: "4px",
-    md: "8px",
-    lg: "12px",
-    xl: "16px",
-    full: "9999px"
-  },
-  elementSize: astroThemeDark.elementSize,
-  // Same typography as hybrid for consistent card font across themes
-  typography: astroThemeDark.typography,
-  shadows: {
-    ...shadowsDark,
-    // Enhanced glow shadows for glass effect
-    glow: (color) => `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`
-  },
-  animation: animationTokens,
-  focus: {
-    color: "#8b5cf6",
-    // Purple focus ring
-    width: "2px",
-    offset: "2px",
-    ring: "0 0 0 2px #8b5cf6",
-    style: {
-      outline: "2px solid #8b5cf6",
-      outlineOffset: "2px"
-    }
-  },
-  layout: layoutTokens
-};
-const transparentMinimalTheme = {
-  colors: {
-    background: {
-      // Same as transparent theme
-      base: "rgba(8, 12, 20, 0.95)",
-      surface: "rgba(15, 20, 35, 0.85)",
-      elevated: "rgba(25, 35, 55, 0.80)",
-      overlay: "rgba(0, 0, 0, 0.75)"
-    },
-    border: {
-      // Accent-colored borders for minimal theme (Zendir purple)
-      default: "rgba(139, 92, 246, 0.25)",
-      muted: "rgba(139, 92, 246, 0.15)",
-      focus: "#8b5cf6",
-      // Subtle card border using accent color
-      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)"
-    },
-    text: {
-      primary: "#f0f4f8",
-      secondary: "#94a3b8",
-      tertiary: "#7b8da1",
-      // WCAG AA: 5.71:1 on base, 5.34:1 on elevated (was #64748b → 3.66:1 FAIL)
-      muted: "#7b8da1",
-      // WCAG AA compliant (was #64748b)
-      inverse: "#0f172a"
-    },
-    // Astro UXD Status Colors
-    status: {
-      normal: "#56f000",
-      standby: "#2dccff",
-      caution: "#fce83a",
-      serious: "#ffb302",
-      critical: "#ff3838",
-      off: "#a4abb6"
-    },
-    semantic: {
-      success: "#56f000",
-      warning: "#fce83a",
-      error: "#ff3838",
-      info: "#8b5cf6"
-    },
-    // Purple accent (matching transparent theme for consistency)
-    accent: {
-      primary: "#8b5cf6",
-      // Vibrant purple
-      secondary: "#a78bfa",
-      // Light purple
-      tertiary: "#7c3aed"
-      // Deep purple
-    },
-    interactive: {
-      default: "#8b5cf6",
-      // Purple for interactive elements
-      hover: "#a78bfa",
-      // Light purple on hover
-      active: "#7c3aed",
-      // Deep purple on active
-      disabled: "#475569",
-      // Purple-hue transparent backgrounds for buttons/inputs (same as transparent theme)
-      transparentDefault: "rgba(139, 92, 246, 0.12)",
-      transparentHover: "rgba(139, 92, 246, 0.32)",
-      transparentInputBg: "rgba(139, 92, 246, 0.08)"
-    }
-  },
-  spacing: astroThemeDark.spacing,
-  borderRadius: {
-    none: "0",
-    xs: "2px",
-    sm: "4px",
-    md: "8px",
-    lg: "12px",
-    xl: "16px",
-    full: "9999px"
-  },
-  elementSize: astroThemeDark.elementSize,
-  // Same typography as hybrid for consistent card font across themes
-  typography: astroThemeDark.typography,
-  shadows: {
-    ...shadowsDark,
-    // Same glow as transparent theme
-    glow: (color) => `0 0 30px ${color}50, 0 0 60px ${color}25, 0 4px 20px rgba(0,0,0,0.4)`
-  },
-  animation: animationTokens,
-  focus: {
-    color: "#8b5cf6",
-    // Purple focus ring
-    width: "2px",
-    offset: "2px",
-    ring: "0 0 0 2px #8b5cf6",
-    style: {
-      outline: "2px solid #8b5cf6",
-      outlineOffset: "2px"
-    }
-  },
-  layout: layoutTokens
-};
-const ThemeContext = createContext(void 0);
+var ThemeContext = createContext(void 0);
+/**
+* Converts a hex color to an rgba string helper.
+* Accepts 3/6/8-char hex codes (#rgb, #rrggbb, #rrggbbaa).
+*/
 function hexToRgba(hex, alpha) {
-  const clean = hex.replace("#", "");
-  let r, g, b;
-  if (clean.length === 3) {
-    r = parseInt(clean[0] + clean[0], 16);
-    g = parseInt(clean[1] + clean[1], 16);
-    b = parseInt(clean[2] + clean[2], 16);
-  } else {
-    r = parseInt(clean.slice(0, 2), 16);
-    g = parseInt(clean.slice(2, 4), 16);
-    b = parseInt(clean.slice(4, 6), 16);
-  }
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+	const clean = hex.replace("#", "");
+	let r, g, b;
+	if (clean.length === 3) {
+		r = parseInt(clean[0] + clean[0], 16);
+		g = parseInt(clean[1] + clean[1], 16);
+		b = parseInt(clean[2] + clean[2], 16);
+	} else {
+		r = parseInt(clean.slice(0, 2), 16);
+		g = parseInt(clean.slice(2, 4), 16);
+		b = parseInt(clean.slice(4, 6), 16);
+	}
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 function buildScrollbarCSS(tokens, mode, reducedMotion) {
-  const accent = tokens.colors.accent.primary;
-  tokens.colors.background.surface;
-  tokens.colors.background.base;
-  const isLight = mode === "light";
-  const thumbRest = isLight ? hexToRgba(accent, 0.28) : hexToRgba(accent, 0.35);
-  const thumbHover = isLight ? hexToRgba(accent, 0.48) : hexToRgba(accent, 0.55);
-  const thumbActive = isLight ? hexToRgba(accent, 0.64) : hexToRgba(accent, 0.72);
-  const trackColor = isLight ? hexToRgba(accent, 0.04) : hexToRgba(accent, 0.06);
-  const trackHover = isLight ? hexToRgba(accent, 0.08) : hexToRgba(accent, 0.1);
-  const transition = reducedMotion ? "none" : "background-color 200ms ease, width 200ms ease, opacity 200ms ease";
-  const thumbRadius = "9999px";
-  const ffThumb = thumbRest;
-  const ffTrack = trackColor;
-  return `
+	const accent = tokens.colors.accent.primary;
+	tokens.colors.background.surface;
+	tokens.colors.background.base;
+	const isLight = mode === "light";
+	const thumbRest = isLight ? hexToRgba(accent, .28) : hexToRgba(accent, .35);
+	const thumbHover = isLight ? hexToRgba(accent, .48) : hexToRgba(accent, .55);
+	const thumbActive = isLight ? hexToRgba(accent, .64) : hexToRgba(accent, .72);
+	const trackColor = isLight ? hexToRgba(accent, .04) : hexToRgba(accent, .06);
+	const trackHover = isLight ? hexToRgba(accent, .08) : hexToRgba(accent, .1);
+	const transition = reducedMotion ? "none" : "background-color 200ms ease, width 200ms ease, opacity 200ms ease";
+	const thumbRadius = "9999px";
+	return `
 /* ═══════════════════════════════════════════════════════════════════════════
    Zendir Scrollbar System — Thin · Elegant · Theme-Connected
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -731,7 +68,7 @@ function buildScrollbarCSS(tokens, mode, reducedMotion) {
 *,
 .zendir-scroll {
   scrollbar-width: thin;
-  scrollbar-color: ${ffThumb} ${ffTrack};
+  scrollbar-color: ${thumbRest} ${trackColor};
 }
 
 /* ── Webkit / Blink (Chrome, Edge, Safari, Opera) ───────────────────────── */
@@ -846,234 +183,270 @@ function buildScrollbarCSS(tokens, mode, reducedMotion) {
 }
 `.trim();
 }
+/**
+* useScrollbarStyles — returns inline React.CSSProperties for a
+* scrollable container that matches the current Zendir theme.
+*
+* Use when you need programmatic control rather than the
+* `zendir-scroll` CSS class.
+*
+* @example
+* ```tsx
+* const scrollStyle = useScrollbarStyles();
+* <div style={{ maxHeight: 400, ...scrollStyle }}>…</div>
+* ```
+*/
 function useScrollbarStyles() {
-  const { tokens, mode } = useTheme();
-  return useMemo(() => {
-    const accent = tokens.colors.accent.primary;
-    const isLight = mode === "light";
-    const thumbColor = isLight ? hexToRgba(accent, 0.28) : hexToRgba(accent, 0.35);
-    const trackColor = isLight ? hexToRgba(accent, 0.04) : hexToRgba(accent, 0.06);
-    return {
-      // Firefox
-      scrollbarWidth: "thin",
-      scrollbarColor: `${thumbColor} ${trackColor}`,
-      overflow: "auto"
-    };
-  }, [tokens, mode]);
+	const { tokens, mode } = useTheme();
+	return useMemo(() => {
+		const accent = tokens.colors.accent.primary;
+		const isLight = mode === "light";
+		return {
+			scrollbarWidth: "thin",
+			scrollbarColor: `${isLight ? hexToRgba(accent, .28) : hexToRgba(accent, .35)} ${isLight ? hexToRgba(accent, .04) : hexToRgba(accent, .06)}`,
+			overflow: "auto"
+		};
+	}, [tokens, mode]);
 }
-function ThemeProvider({
-  children,
-  theme: themeProp,
-  defaultVariant,
-  mode: modeProp,
-  defaultMode: defaultModeProp,
-  persist = true
-}) {
-  const defaultTheme = themeProp ?? defaultVariant ?? "hybrid";
-  const defaultMode = modeProp ?? defaultModeProp ?? "dark";
-  const [theme, setThemeState] = useState(() => {
-    if (persist && typeof window !== "undefined") {
-      const saved = localStorage.getItem("zendir-ui-theme");
-      if (saved === "astro" || saved === "zendir" || saved === "hybrid" || saved === "transparent" || saved === "transparent-bold" || saved === "transparent-minimal") {
-        return saved;
-      }
-    }
-    return defaultTheme;
-  });
-  const [mode, setModeState] = useState(() => {
-    if (persist && typeof window !== "undefined") {
-      const saved = localStorage.getItem("zendir-ui-mode");
-      if (saved === "light" || saved === "dark") {
-        return saved;
-      }
-    }
-    return defaultMode;
-  });
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handler = (e) => setPrefersReducedMotion(e.matches);
-    mediaQuery.addEventListener("change", handler);
-    return () => mediaQuery.removeEventListener("change", handler);
-  }, []);
-  const setTheme = (newTheme) => {
-    setThemeState(newTheme);
-    if (persist && typeof window !== "undefined") {
-      localStorage.setItem("zendir-ui-theme", newTheme);
-    }
-  };
-  const setMode = (newMode) => {
-    setModeState(newMode);
-    if (persist && typeof window !== "undefined") {
-      localStorage.setItem("zendir-ui-mode", newMode);
-    }
-  };
-  const toggleMode = () => {
-    setMode(mode === "dark" ? "light" : "dark");
-  };
-  const [accentColor, setAccentColorState] = useState(() => {
-    if (persist && typeof window !== "undefined") {
-      return localStorage.getItem("zendir-ui-accent") || null;
-    }
-    return null;
-  });
-  const setAccentColor = (color) => {
-    setAccentColorState(color);
-    if (persist && typeof window !== "undefined") {
-      if (color) {
-        localStorage.setItem("zendir-ui-accent", color);
-      } else {
-        localStorage.removeItem("zendir-ui-accent");
-      }
-    }
-  };
-  const tokens = useMemo(() => {
-    const base = mode === "light" ? astroThemeLight : theme === "astro" ? astroThemeDark : theme === "hybrid" ? hybridTheme : theme === "transparent" || theme === "transparent-bold" ? transparentTheme : theme === "transparent-minimal" ? transparentMinimalTheme : purpleHueTheme;
-    const isTransparent = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-    const isMinimal = theme === "transparent-minimal";
-    const resolvedAccent = isTransparent && accentColor ? {
-      primary: accentColor,
-      secondary: adjustHexBrightness(accentColor, 1.2),
-      tertiary: adjustHexBrightness(accentColor, 0.85)
-    } : base.colors.accent;
-    const accentPrimary = resolvedAccent.primary;
-    const accentBorderMuted = `${accentPrimary}40`;
-    const accentBorderDefault = `${accentPrimary}66`;
-    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)}`;
-    const cardStyle = isMinimal ? { border: `1px solid ${accentBorderMuted}` } : isTransparent ? { border: "none", boxShadow: accentFadedBoxShadow } : { border: `1px solid ${base.colors.border.muted}` };
-    const cardStyleDashed = isMinimal ? { border: `1px dashed ${accentBorderMuted}` } : isTransparent ? { border: "none", boxShadow: accentFadedBoxShadow } : { border: `1px dashed ${base.colors.border.muted}` };
-    const cardStyleDefault = isMinimal ? { border: `1px solid ${accentBorderDefault}` } : isTransparent ? { border: "none", boxShadow: accentFadedBoxShadow } : { border: `1px solid ${base.colors.border.default}` };
-    const resolvedColors = {
-      ...base.colors,
-      accent: resolvedAccent,
-      border: {
-        ...base.colors.border,
-        cardStyle,
-        cardStyleDashed,
-        cardStyleDefault
-      }
-    };
-    return {
-      ...base,
-      colors: resolvedColors,
-      borders: computeBorderTokens(resolvedColors),
-      // Honor prefers-reduced-motion in the JS token surface too. The
-      // global CSS @media rule below already strips CSS animations; this
-      // ensures JS-driven animation libraries (Framer Motion etc.) that
-      // read `tokens.animation.*` get the collapsed variant without each
-      // developer having to branch on `useTheme().prefersReducedMotion`.
-      animation: prefersReducedMotion ? animationTokensReduced : base.animation
-    };
-  }, [theme, mode, accentColor, prefersReducedMotion]);
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    const root = document.documentElement;
-    const { colors, typography: typography2, spacing: spacing2, borderRadius: borderRadius2, animation, focus, shadows } = tokens;
-    root.setAttribute("data-theme", mode);
-    root.setAttribute("data-variant", theme);
-    root.style.setProperty("--color-background-base", colors.background.base);
-    root.style.setProperty("--color-background-surface", colors.background.surface);
-    root.style.setProperty("--color-background-elevated", colors.background.elevated);
-    root.style.setProperty("--color-background-overlay", colors.background.overlay);
-    root.style.setProperty("--color-border", colors.border.default);
-    root.style.setProperty("--color-border-muted", colors.border.muted);
-    root.style.setProperty("--color-border-focus", colors.border.focus);
-    root.style.setProperty("--color-text-primary", colors.text.primary);
-    root.style.setProperty("--color-text-secondary", colors.text.secondary);
-    root.style.setProperty("--color-text-tertiary", colors.text.tertiary);
-    root.style.setProperty("--color-text-inverse", colors.text.inverse);
-    root.style.setProperty("--color-status-normal", colors.status.normal);
-    root.style.setProperty("--color-status-standby", colors.status.standby);
-    root.style.setProperty("--color-status-caution", colors.status.caution);
-    root.style.setProperty("--color-status-serious", colors.status.serious);
-    root.style.setProperty("--color-status-critical", colors.status.critical);
-    root.style.setProperty("--color-status-off", colors.status.off);
-    root.style.setProperty("--color-interactive-default", colors.interactive.default);
-    root.style.setProperty("--color-interactive-hover", colors.interactive.hover);
-    root.style.setProperty("--color-interactive-active", colors.interactive.active);
-    root.style.setProperty("--color-interactive-disabled", colors.interactive.disabled);
-    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", typography2.fontFamily.heading || typography2.fontFamily.primary);
-    root.style.setProperty("--font-family-primary", typography2.fontFamily.primary);
-    root.style.setProperty("--font-family-mono", typography2.fontFamily.mono);
-    root.style.setProperty("--spacing-xxs", spacing2.xxs);
-    root.style.setProperty("--spacing-xs", spacing2.xs);
-    root.style.setProperty("--spacing-sm", spacing2.sm);
-    root.style.setProperty("--spacing-smd", spacing2.smd);
-    root.style.setProperty("--spacing-md", spacing2.md);
-    root.style.setProperty("--spacing-mdl", spacing2.mdl);
-    root.style.setProperty("--spacing-lg", spacing2.lg);
-    root.style.setProperty("--spacing-xl", spacing2.xl);
-    root.style.setProperty("--spacing-xxl", spacing2.xxl);
-    root.style.setProperty("--radius-sm", borderRadius2.sm);
-    root.style.setProperty("--radius-md", borderRadius2.md);
-    root.style.setProperty("--radius-lg", borderRadius2.lg);
-    root.style.setProperty("--radius-xl", borderRadius2.xl);
-    const motionMultiplier = prefersReducedMotion ? 0 : 1;
-    root.style.setProperty("--animation-fast", prefersReducedMotion ? "none" : animation.fast);
-    root.style.setProperty("--animation-normal", prefersReducedMotion ? "none" : animation.normal);
-    root.style.setProperty("--animation-slow", prefersReducedMotion ? "none" : animation.slow);
-    root.style.setProperty("--duration-fast", `${animation.duration.fast * motionMultiplier}ms`);
-    root.style.setProperty("--duration-normal", `${animation.duration.normal * motionMultiplier}ms`);
-    root.style.setProperty("--duration-slow", `${animation.duration.slow * motionMultiplier}ms`);
-    root.style.setProperty("--focus-ring-color", focus.color);
-    root.style.setProperty("--focus-ring-width", focus.width);
-    root.style.setProperty("--focus-ring-offset", focus.offset);
-    root.style.setProperty("--shadow-sm", shadows.sm);
-    root.style.setProperty("--shadow-md", shadows.md);
-    root.style.setProperty("--shadow-lg", shadows.lg);
-    root.style.setProperty("--shadow-xl", shadows.xl);
-    document.body.style.backgroundColor = colors.background.base;
-    document.body.style.color = colors.text.primary;
-    document.body.style.fontFamily = typography2.fontFamily.primary;
-  }, [tokens, theme, mode, prefersReducedMotion]);
-  const scrollbarCSS = useMemo(() => buildScrollbarCSS(tokens, mode, prefersReducedMotion), [tokens, mode, prefersReducedMotion]);
-  const value = useMemo(
-    () => ({
-      theme,
-      mode,
-      tokens,
-      prefersReducedMotion,
-      accentColor,
-      setTheme,
-      setMode,
-      toggleMode,
-      setAccentColor
-    }),
-    [theme, mode, tokens, prefersReducedMotion, accentColor]
-  );
-  const reducedMotionCSS = `@media (prefers-reduced-motion: reduce) {
+/**
+* ThemeProvider - Enterprise theme context provider
+*
+* Provides theme tokens, mode switching, and accessibility features
+* to all child components.
+*
+* @example
+* ```tsx
+* <ThemeProvider theme="hybrid" mode="dark">  // Zen (Hybrid) is the default
+*   <App />
+* </ThemeProvider>
+* ```
+*/
+function ThemeProvider({ children, theme: themeProp, defaultVariant, mode: modeProp, defaultMode: defaultModeProp, persist = true }) {
+	const defaultTheme = themeProp ?? defaultVariant ?? "hybrid";
+	const defaultMode = modeProp ?? defaultModeProp ?? "dark";
+	const [theme, setThemeState] = useState(() => {
+		if (persist && typeof window !== "undefined") {
+			const saved = localStorage.getItem("zendir-ui-theme");
+			if (saved === "astro" || saved === "zendir" || saved === "hybrid" || saved === "nebula" || saved === "purple-hue" || saved === "transparent" || saved === "transparent-bold" || saved === "transparent-minimal") return saved;
+		}
+		return defaultTheme;
+	});
+	const [mode, setModeState] = useState(() => {
+		if (persist && typeof window !== "undefined") {
+			const saved = localStorage.getItem("zendir-ui-mode");
+			if (saved === "light" || saved === "dark") return saved;
+		}
+		return defaultMode;
+	});
+	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+		setPrefersReducedMotion(mediaQuery.matches);
+		const handler = (e) => setPrefersReducedMotion(e.matches);
+		mediaQuery.addEventListener("change", handler);
+		return () => mediaQuery.removeEventListener("change", handler);
+	}, []);
+	const setTheme = (newTheme) => {
+		setThemeState(newTheme);
+		if (persist && typeof window !== "undefined") localStorage.setItem("zendir-ui-theme", newTheme);
+	};
+	const setMode = (newMode) => {
+		setModeState(newMode);
+		if (persist && typeof window !== "undefined") localStorage.setItem("zendir-ui-mode", newMode);
+	};
+	const toggleMode = () => {
+		setMode(mode === "dark" ? "light" : "dark");
+	};
+	const [accentColor, setAccentColorState] = useState(() => {
+		if (persist && typeof window !== "undefined") return localStorage.getItem("zendir-ui-accent") || null;
+		return null;
+	});
+	const setAccentColor = (color) => {
+		setAccentColorState(color);
+		if (persist && typeof window !== "undefined") if (color) localStorage.setItem("zendir-ui-accent", color);
+		else localStorage.removeItem("zendir-ui-accent");
+	};
+	const tokens = useMemo(() => {
+		const base = mode === "light" ? astroThemeLight : theme === "astro" ? astroThemeDark : theme === "hybrid" ? hybridTheme : theme === "nebula" ? nebulaTheme : theme === "transparent" || theme === "transparent-bold" ? transparentTheme : theme === "transparent-minimal" ? transparentMinimalTheme : purpleHueTheme;
+		const isTransparent = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+		const isMinimal = theme === "transparent-minimal";
+		const resolvedAccent = isTransparent && accentColor ? {
+			primary: accentColor,
+			secondary: adjustHexBrightness(accentColor, 1.2),
+			tertiary: adjustHexBrightness(accentColor, .85)
+		} : base.colors.accent;
+		const accentPrimary = resolvedAccent.primary;
+		const accentBorderMuted = `${accentPrimary}40`;
+		const accentBorderDefault = `${accentPrimary}66`;
+		const accentFadedBoxShadow = `inset 0 1px 0 ${hexToRgba(accentPrimary, .12)}, inset 0 -1px 0 rgba(0, 0, 0, 0.05), inset 1px 0 0 ${hexToRgba(accentPrimary, .06)}, inset -1px 0 0 ${hexToRgba(accentPrimary, .06)}`;
+		const cardStyle = isMinimal ? { border: `1px solid ${accentBorderMuted}` } : isTransparent ? {
+			border: "none",
+			boxShadow: accentFadedBoxShadow
+		} : { border: `1px solid ${base.colors.border.muted}` };
+		const cardStyleDashed = isMinimal ? { border: `1px dashed ${accentBorderMuted}` } : isTransparent ? {
+			border: "none",
+			boxShadow: accentFadedBoxShadow
+		} : { border: `1px dashed ${base.colors.border.muted}` };
+		const cardStyleDefault = isMinimal ? { border: `1px solid ${accentBorderDefault}` } : isTransparent ? {
+			border: "none",
+			boxShadow: accentFadedBoxShadow
+		} : { border: `1px solid ${base.colors.border.default}` };
+		const resolvedColors = {
+			...base.colors,
+			accent: resolvedAccent,
+			border: {
+				...base.colors.border,
+				cardStyle,
+				cardStyleDashed,
+				cardStyleDefault
+			}
+		};
+		return {
+			...base,
+			colors: resolvedColors,
+			borders: computeBorderTokens(resolvedColors)
+		};
+	}, [
+		theme,
+		mode,
+		accentColor
+	]);
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+		const root = document.documentElement;
+		const { colors, typography, spacing, borderRadius, animation, focus, shadows } = tokens;
+		root.setAttribute("data-theme", mode);
+		root.setAttribute("data-variant", theme);
+		root.style.setProperty("--color-background-base", colors.background.base);
+		root.style.setProperty("--color-background-surface", colors.background.surface);
+		root.style.setProperty("--color-background-elevated", colors.background.elevated);
+		root.style.setProperty("--color-background-overlay", colors.background.overlay);
+		root.style.setProperty("--color-border", colors.border.default);
+		root.style.setProperty("--color-border-muted", colors.border.muted);
+		root.style.setProperty("--color-border-focus", colors.border.focus);
+		root.style.setProperty("--color-text-primary", colors.text.primary);
+		root.style.setProperty("--color-text-secondary", colors.text.secondary);
+		root.style.setProperty("--color-text-tertiary", colors.text.tertiary);
+		root.style.setProperty("--color-text-inverse", colors.text.inverse);
+		root.style.setProperty("--color-status-normal", colors.status.normal);
+		root.style.setProperty("--color-status-standby", colors.status.standby);
+		root.style.setProperty("--color-status-caution", colors.status.caution);
+		root.style.setProperty("--color-status-serious", colors.status.serious);
+		root.style.setProperty("--color-status-critical", colors.status.critical);
+		root.style.setProperty("--color-status-off", colors.status.off);
+		root.style.setProperty("--color-interactive-default", colors.interactive.default);
+		root.style.setProperty("--color-interactive-hover", colors.interactive.hover);
+		root.style.setProperty("--color-interactive-active", colors.interactive.active);
+		root.style.setProperty("--color-interactive-disabled", colors.interactive.disabled);
+		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);
+		root.style.setProperty("--spacing-xs", spacing.xs);
+		root.style.setProperty("--spacing-sm", spacing.sm);
+		root.style.setProperty("--spacing-smd", spacing.smd);
+		root.style.setProperty("--spacing-md", spacing.md);
+		root.style.setProperty("--spacing-mdl", spacing.mdl);
+		root.style.setProperty("--spacing-lg", spacing.lg);
+		root.style.setProperty("--spacing-xl", spacing.xl);
+		root.style.setProperty("--spacing-xxl", spacing.xxl);
+		root.style.setProperty("--radius-sm", borderRadius.sm);
+		root.style.setProperty("--radius-md", borderRadius.md);
+		root.style.setProperty("--radius-lg", borderRadius.lg);
+		root.style.setProperty("--radius-xl", borderRadius.xl);
+		const motionMultiplier = prefersReducedMotion ? 0 : 1;
+		root.style.setProperty("--animation-fast", prefersReducedMotion ? "none" : animation.fast);
+		root.style.setProperty("--animation-normal", prefersReducedMotion ? "none" : animation.normal);
+		root.style.setProperty("--animation-slow", prefersReducedMotion ? "none" : animation.slow);
+		root.style.setProperty("--duration-fast", `${animation.duration.fast * motionMultiplier}ms`);
+		root.style.setProperty("--duration-normal", `${animation.duration.normal * motionMultiplier}ms`);
+		root.style.setProperty("--duration-slow", `${animation.duration.slow * motionMultiplier}ms`);
+		root.style.setProperty("--focus-ring-color", focus.color);
+		root.style.setProperty("--focus-ring-width", focus.width);
+		root.style.setProperty("--focus-ring-offset", focus.offset);
+		root.style.setProperty("--shadow-sm", shadows.sm);
+		root.style.setProperty("--shadow-md", shadows.md);
+		root.style.setProperty("--shadow-lg", shadows.lg);
+		root.style.setProperty("--shadow-xl", shadows.xl);
+		document.body.style.backgroundColor = colors.background.base;
+		document.body.style.color = colors.text.primary;
+		document.body.style.fontFamily = typography.fontFamily.primary;
+	}, [
+		tokens,
+		theme,
+		mode,
+		prefersReducedMotion
+	]);
+	const scrollbarCSS = useMemo(() => buildScrollbarCSS(tokens, mode, prefersReducedMotion), [
+		tokens,
+		mode,
+		prefersReducedMotion
+	]);
+	const value = useMemo(() => ({
+		theme,
+		mode,
+		tokens,
+		prefersReducedMotion,
+		accentColor,
+		setTheme,
+		setMode,
+		toggleMode,
+		setAccentColor
+	}), [
+		theme,
+		mode,
+		tokens,
+		prefersReducedMotion,
+		accentColor
+	]);
+	return /* @__PURE__ */ jsxs(ThemeContext.Provider, {
+		value,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				"data-zendir-scrollbar": "",
+				dangerouslySetInnerHTML: { __html: scrollbarCSS }
+			}),
+			/* @__PURE__ */ jsx("style", {
+				"data-zendir-reduced-motion": "",
+				dangerouslySetInnerHTML: { __html: `@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
-}`;
-  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value, children: [
-    /* @__PURE__ */ jsx("style", { "data-zendir-scrollbar": "", dangerouslySetInnerHTML: { __html: scrollbarCSS } }),
-    /* @__PURE__ */ jsx("style", { "data-zendir-reduced-motion": "", dangerouslySetInnerHTML: { __html: reducedMotionCSS } }),
-    children
-  ] });
+}` }
+			}),
+			children
+		]
+	});
 }
+/**
+* useTheme - Access theme context
+*
+* @throws Error if used outside ThemeProvider
+*
+* @example
+* ```tsx
+* const { tokens, mode, toggleMode } = useTheme();
+* ```
+*/
 function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
 }
+/**
+* useThemeTokens - Access only theme tokens (for memoization)
+*/
 function useThemeTokens() {
-  return useTheme().tokens;
+	return useTheme().tokens;
 }
-export {
-  ThemeProvider,
-  useScrollbarStyles,
-  useTheme,
-  useThemeTokens
-};
-//# sourceMappingURL=ThemeProvider.js.map
+//#endregion
+export { ThemeProvider, useScrollbarStyles, useTheme, useThemeTokens };
+
+//# sourceMappingURL=ThemeProvider.js.map