@zendir/ui 0.1.0

package/dist/react/theme/ThemeProvider.js

@@ -0,0 +1,1096 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useState, useEffect, useContext } from "react";
+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 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 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: {
+    xxs: "2px",
+    xs: "4px",
+    sm: "8px",
+    smd: "12px",
+    md: "16px",
+    mdl: "20px",
+    lg: "24px",
+    xl: "32px",
+    xxl: "48px"
+  },
+  borderRadius: {
+    none: "0",
+    xs: "1px",
+    sm: "2px",
+    md: "4px",
+    lg: "8px",
+    xl: "12px",
+    full: "9999px"
+  },
+  elementSize: {
+    sm: "28px",
+    md: "36px",
+    lg: "44px"
+  },
+  typography: {
+    /**
+     * Font families per AstroUXDS specification
+     * @see https://www.astrouxds.com/foundations/typography/
+     */
+    fontFamily: {
+      /** Primary font: Roboto with comprehensive system fallbacks */
+      primary: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif',
+      /** Monospace font: Roboto Mono for data/code with system fallbacks */
+      mono: '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace'
+    },
+    // 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" }
+    },
+    // Legacy convenience tokens (rem-based for Astro compliance)
+    // Note: Use Typography component for new code
+    fontSize: {
+      micro: "0.5625rem",
+      // 9px - very tight spaces
+      xxs: "0.625rem",
+      // 10px - compact labels (xs in old system)
+      xs: "0.625rem",
+      // 10px - compact (kept for backward compatibility)
+      sm: "0.75rem",
+      // 12px (Body 3)
+      base: "0.875rem",
+      // 14px (Body 2)
+      md: "0.875rem",
+      // 14px (Body 2)
+      lg: "1rem",
+      // 16px (Body 1)
+      xl: "1.25rem",
+      // 20px (Heading 3/4)
+      xxl: "1.5rem",
+      // 24px (Heading 2)
+      xxxl: "2.125rem"
+      // 34px (Heading 1)
+    },
+    /**
+     * 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);
+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})`;
+}
+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 `
+/* ═══════════════════════════════════════════════════════════════════════════
+   Zendir Scrollbar System — Thin · Elegant · Theme-Connected
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Firefox ────────────────────────────────────────────────────────────── */
+*,
+.zendir-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: ${ffThumb} ${ffTrack};
+}
+
+/* ── Webkit / Blink (Chrome, Edge, Safari, Opera) ───────────────────────── */
+
+/* Global thin scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+
+/* Track — nearly invisible, subtle on hover */
+::-webkit-scrollbar-track {
+  background: ${trackColor};
+  border-radius: ${thumbRadius};
+  margin: 2px;
+}
+::-webkit-scrollbar-track:hover {
+  background: ${trackHover};
+}
+
+/* Thumb — accent-tinted pill */
+::-webkit-scrollbar-thumb {
+  background: ${thumbRest};
+  border-radius: ${thumbRadius};
+  border: 1px solid transparent;
+  background-clip: padding-box;
+  transition: ${transition};
+  min-height: 32px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: ${thumbHover};
+  border-color: transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:active {
+  background: ${thumbActive};
+  border-color: transparent;
+  background-clip: padding-box;
+}
+
+/* Corner — where horizontal & vertical scrollbars meet */
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* ── Utility class: zendir-scroll ────────────────────────────────────────
+   Apply to individual containers for scoped thin scrollbar.
+   Also enables overlay behaviour where supported.
+   e.g. <div className="zendir-scroll" style={{overflow:'auto'}}>…</div>
+   ─────────────────────────────────────────────────────────────────────── */
+.zendir-scroll {
+  overflow: auto;
+  overflow: overlay; /* Chrome / Edge: auto-hide scrollbar */
+}
+.zendir-scroll::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.zendir-scroll::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: ${thumbRadius};
+}
+.zendir-scroll::-webkit-scrollbar-thumb {
+  background: ${thumbRest};
+  border-radius: ${thumbRadius};
+  transition: ${transition};
+}
+.zendir-scroll::-webkit-scrollbar-thumb:hover {
+  background: ${thumbHover};
+}
+.zendir-scroll::-webkit-scrollbar-thumb:active {
+  background: ${thumbActive};
+}
+
+/* ── Utility: zendir-scroll--hidden ─────────────────────────────────────
+   Hides scrollbar visually but keeps scroll behaviour (accessible).
+   Content remains scrollable via mouse wheel / touch / keyboard.
+   ─────────────────────────────────────────────────────────────────────── */
+.zendir-scroll--hidden {
+  overflow: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.zendir-scroll--hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* ── Focus-visible: keyboard users can still scroll with focus ─────────── */
+.zendir-scroll:focus-visible {
+  outline: 2px solid ${accent};
+  outline-offset: -2px;
+  border-radius: ${tokens.borderRadius.md};
+}
+
+/* ── Reduced Motion: disable scrollbar transitions ─────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  ::-webkit-scrollbar-thumb,
+  .zendir-scroll::-webkit-scrollbar-thumb {
+    transition: none !important;
+  }
+}
+
+/* ── High Contrast Mode: ensure scrollbar is visible ───────────────────── */
+@media (forced-colors: active) {
+  ::-webkit-scrollbar-thumb {
+    background: ButtonText !important;
+  }
+  ::-webkit-scrollbar-track {
+    background: Canvas !important;
+  }
+}
+`.trim();
+}
+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]);
+}
+function ThemeProvider({
+  children,
+  theme: defaultTheme = "hybrid",
+  mode: defaultMode = "dark",
+  persist = true
+}) {
+  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)
+    };
+  }, [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-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]
+  );
+  const reducedMotionCSS = `@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": "", children: scrollbarCSS }),
+    /* @__PURE__ */ jsx("style", { "data-zendir-reduced-motion": "", children: reducedMotionCSS }),
+    children
+  ] });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+function useThemeTokens() {
+  return useTheme().tokens;
+}
+export {
+  ThemeProvider,
+  useScrollbarStyles,
+  useTheme,
+  useThemeTokens
+};
+//# sourceMappingURL=ThemeProvider.js.map