@backbay/glia 0.2.0-alpha.7 → 0.2.0-alpha.8

package/dist/theme/index.js

@@ -1,5 +1,1152 @@
-export { DEFAULT_THEME_ID, GLASS_MATERIALS, GliaThemeProvider, THEMES, UiThemeProvider, applyGliaCssVariables, applyThemeCssVariables, buildBackdropFilter, buildGliaCssVariables, desktopThemeFromUiTheme, getGlassMaterial, getReducedTransparencyStyles, getTheme, getThemeIds, nebulaTheme, removeThemeCssVariables, solarpunkTheme, themeToCssVariables, useAmbientTokens, useColorTokens, useControlTokens, useElevationTokens, useFontTokens, useGlassTokens, useGliaTheme, useIsNebula, useIsSolarpunk, useMotionTokens, useRadiiTokens, useSpacingTokens, useThemeTokens, useUiTheme } from '../chunk-VITKG2HL.js';
-import '../chunk-3CMPQOMY.js';
-import '../chunk-TM6AOUSD.js';
+import * as React from 'react';
+import { useSyncExternalStore } from 'react';
+import { MotionConfig } from 'framer-motion';
+import { jsx } from 'react/jsx-runtime';
+
+// src/theme/nebula.ts
+var nebulaTheme = {
+  id: "nebula",
+  name: "Nebula",
+  description: "Clinical cyberpunk HUD with neon accents and starfield ambience",
+  color: {
+    bg: {
+      body: "#02040a",
+      panel: "rgba(4, 8, 16, 0.94)",
+      elevated: "rgba(12, 17, 23, 0.98)",
+      horizon: "#050609"
+    },
+    text: {
+      primary: "#E5E7EB",
+      muted: "#94A3B8",
+      soft: "#64748B"
+    },
+    accent: {
+      primary: "#22D3EE",
+      // cyan-neon
+      secondary: "#F43F5E",
+      // magenta-neon
+      positive: "#10B981",
+      // emerald-neon
+      warning: "#EAB308",
+      // yellow-warning
+      destructive: "#F43F5E"
+    },
+    border: "rgba(34, 211, 238, 0.12)",
+    ring: "#22D3EE"
+  },
+  glass: {
+    panelBg: "rgba(4, 8, 16, 0.94)",
+    panelBorder: "rgba(34, 211, 238, 0.12)",
+    panelBlur: "24px",
+    headerGradient: "linear-gradient(to right, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015), transparent)",
+    cardBg: "rgba(255, 255, 255, 0.015)",
+    cardBorder: "rgba(255, 255, 255, 0.04)",
+    hoverBg: "rgba(34, 211, 238, 0.08)",
+    activeBorder: "rgba(34, 211, 238, 0.35)",
+    activeShadow: "0 6px 28px rgba(34, 211, 238, 0.1)"
+  },
+  elevation: {
+    softDrop: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    hudPanel: "0 8px 32px rgba(2, 4, 8, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02)",
+    hudRail: "0 -6px 32px rgba(2, 4, 8, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02)",
+    modal: "0 16px 48px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(34, 211, 238, 0.08)",
+    glow: "0 0 16px 1px rgba(34, 211, 238, 0.4)"
+  },
+  motion: {
+    fast: { duration: 0.15, ease: "easeOut" },
+    normal: { duration: 0.2, ease: "easeOut" },
+    spring: { type: "spring", damping: 25, stiffness: 280 },
+    ambientDrift: { duration: 8, ease: "linear" },
+    ripple: { duration: 2, ease: "easeInOut" }
+  },
+  ambient: {
+    type: "nebula-stars",
+    particleColors: ["#22D3EE", "#F43F5E", "#8B5CF6", "#10B981"],
+    particleDensity: 0.6,
+    particleSpeed: 0.3,
+    particleSizeRange: [1, 3],
+    horizonGradient: `
+      radial-gradient(ellipse at top left, rgba(34, 211, 238, 0.08), transparent 50%),
+      radial-gradient(ellipse at bottom right, rgba(139, 92, 246, 0.06), transparent 50%),
+      radial-gradient(circle at 30% 70%, rgba(244, 63, 94, 0.04), transparent 40%)
+    `,
+    rippleColorPrimary: "rgba(34, 211, 238, 0.04)",
+    rippleColorSecondary: "rgba(217, 70, 239, 0.025)",
+    glowIntensity: 0.8
+  },
+  controls: {
+    switch: {
+      track: {
+        bg: {
+          on: "rgba(34, 211, 238, 0.2)",
+          off: "rgba(255, 255, 255, 0.08)"
+        },
+        border: {
+          on: "rgba(34, 211, 238, 0.4)",
+          off: "rgba(255, 255, 255, 0.15)"
+        }
+      },
+      thumb: {
+        bg: {
+          on: "#22D3EE",
+          off: "#64748B"
+        },
+        shadow: {
+          on: "0 0 8px rgba(34, 211, 238, 0.5)",
+          off: "0 1px 2px rgba(0, 0, 0, 0.2)"
+        }
+      }
+    },
+    slider: {
+      track: {
+        bg: "rgba(255, 255, 255, 0.08)",
+        border: "rgba(255, 255, 255, 0.15)"
+      },
+      thumb: {
+        bg: "#22D3EE",
+        shadow: "0 0 8px rgba(34, 211, 238, 0.5)"
+      },
+      fill: "rgba(34, 211, 238, 0.6)"
+    },
+    buttonGlow: {
+      hoverBg: "rgba(34, 211, 238, 0.08)",
+      hoverText: "#22D3EE",
+      hoverShadow: "0 0 10px rgba(34, 211, 238, 0.1)"
+    }
+  },
+  fonts: {
+    display: "'Inter', sans-serif",
+    body: "'Inter', sans-serif",
+    mono: "'JetBrains Mono', monospace"
+  },
+  radii: {
+    sm: "6px",
+    md: "8px",
+    lg: "8px"
+  },
+  spacing: {
+    taskbarHeight: "48px",
+    titlebarHeight: "36px",
+    windowPadding: "12px",
+    iconSize: "64px",
+    iconGap: "16px",
+    windowBorderWidth: "1px"
+  }
+};
+
+// src/theme/solarpunk.ts
+var solarpunkTheme = {
+  id: "solarpunk",
+  name: "Solarpunk Observatory",
+  description: "Botanical space station with sunlit warmth and organic calm",
+  color: {
+    bg: {
+      body: "#0a0f14",
+      // Slightly warmer than nebula
+      panel: "rgba(16, 24, 32, 0.92)",
+      elevated: "rgba(24, 32, 40, 0.96)",
+      horizon: "#0d1318"
+    },
+    text: {
+      primary: "#F0EDE8",
+      // Warm white
+      muted: "#A8B4A8",
+      // Sage-tinged gray
+      soft: "#6B7B6B"
+      // Muted sage
+    },
+    accent: {
+      primary: "#F5A623",
+      // Warm gold (sun)
+      secondary: "#4ADE80",
+      // Leaf green
+      positive: "#4ADE80",
+      // Same leaf green
+      warning: "#FB923C",
+      // Warm orange
+      destructive: "#EF4444"
+      // Softer red
+    },
+    border: "rgba(74, 222, 128, 0.15)",
+    ring: "#4ADE80"
+  },
+  glass: {
+    panelBg: "rgba(16, 24, 20, 0.88)",
+    // Jade-tinted
+    panelBorder: "rgba(74, 222, 128, 0.12)",
+    panelBlur: "20px",
+    // Slightly less blur for organic feel
+    headerGradient: "linear-gradient(to right, rgba(245, 166, 35, 0.06), rgba(74, 222, 128, 0.04), transparent)",
+    cardBg: "rgba(245, 166, 35, 0.02)",
+    cardBorder: "rgba(74, 222, 128, 0.08)",
+    hoverBg: "rgba(245, 166, 35, 0.06)",
+    activeBorder: "rgba(245, 166, 35, 0.35)",
+    activeShadow: "0 6px 24px rgba(245, 166, 35, 0.1)"
+  },
+  elevation: {
+    softDrop: "0 4px 12px rgba(0, 0, 0, 0.12)",
+    hudPanel: "0 8px 32px rgba(10, 15, 20, 0.5), inset 0 1px 0 rgba(245, 166, 35, 0.02)",
+    hudRail: "0 -6px 28px rgba(10, 15, 20, 0.5), inset 0 1px 0 rgba(74, 222, 128, 0.03)",
+    modal: "0 16px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(245, 166, 35, 0.06)",
+    glow: "0 0 20px 2px rgba(245, 166, 35, 0.25)"
+  },
+  motion: {
+    fast: { duration: 0.18, ease: "easeOut" },
+    normal: { duration: 0.25, ease: [0.4, 0, 0.2, 1] },
+    // Slightly smoother
+    spring: { type: "spring", damping: 28, stiffness: 240 },
+    // More relaxed
+    ambientDrift: { duration: 12, ease: "linear" },
+    // Slower drift
+    ripple: { duration: 2.5, ease: "easeInOut" }
+  },
+  ambient: {
+    type: "dust-motes",
+    particleColors: [
+      "rgba(245, 166, 35, 0.6)",
+      // Gold
+      "rgba(255, 248, 220, 0.5)",
+      // Warm cream
+      "rgba(74, 222, 128, 0.3)",
+      // Faint green
+      "rgba(255, 255, 255, 0.4)"
+      // White
+    ],
+    particleDensity: 0.35,
+    // Sparser than stars
+    particleSpeed: 0.15,
+    // Slower, lazier drift
+    particleSizeRange: [2, 6],
+    // Larger motes
+    horizonGradient: `
+      radial-gradient(ellipse at top, rgba(245, 166, 35, 0.06), transparent 60%),
+      radial-gradient(ellipse at bottom left, rgba(74, 222, 128, 0.05), transparent 50%),
+      linear-gradient(to bottom, rgba(16, 24, 20, 0.3), transparent 70%)
+    `,
+    rippleColorPrimary: "rgba(245, 166, 35, 0.035)",
+    rippleColorSecondary: "rgba(74, 222, 128, 0.025)",
+    glowIntensity: 0.5
+    // Softer glow
+  },
+  controls: {
+    switch: {
+      track: {
+        bg: {
+          on: "rgba(74, 222, 128, 0.2)",
+          off: "rgba(245, 230, 210, 0.1)"
+          // Warm cream off state
+        },
+        border: {
+          on: "rgba(74, 222, 128, 0.4)",
+          off: "rgba(245, 230, 210, 0.2)"
+        }
+      },
+      thumb: {
+        bg: {
+          on: "#F5A623",
+          // Gold sun disk
+          off: "#8B9B8B"
+          // Sage gray
+        },
+        shadow: {
+          on: "0 0 10px rgba(245, 166, 35, 0.5), inset 0 -1px 2px rgba(0,0,0,0.1)",
+          off: "0 1px 3px rgba(0, 0, 0, 0.15)"
+        }
+      }
+    },
+    slider: {
+      track: {
+        bg: "rgba(245, 230, 210, 0.1)",
+        border: "rgba(74, 222, 128, 0.15)"
+      },
+      thumb: {
+        bg: "linear-gradient(135deg, #F5A623, #D4860F)",
+        // Brass/wood knob
+        shadow: "0 2px 6px rgba(0, 0, 0, 0.2), 0 0 8px rgba(245, 166, 35, 0.3)"
+      },
+      fill: "rgba(74, 222, 128, 0.5)"
+    },
+    buttonGlow: {
+      hoverBg: "rgba(245, 166, 35, 0.08)",
+      hoverText: "#F5A623",
+      hoverShadow: "0 0 12px rgba(245, 166, 35, 0.12)"
+    }
+  },
+  fonts: {
+    display: "'Inter', sans-serif",
+    body: "'Inter', sans-serif",
+    mono: "'JetBrains Mono', monospace"
+  },
+  radii: {
+    sm: "6px",
+    md: "8px",
+    lg: "8px"
+  },
+  spacing: {
+    taskbarHeight: "48px",
+    titlebarHeight: "36px",
+    windowPadding: "12px",
+    iconSize: "64px",
+    iconGap: "16px",
+    windowBorderWidth: "1px"
+  }
+};
+
+// src/theme/registry.ts
+var THEMES = {
+  nebula: nebulaTheme,
+  solarpunk: solarpunkTheme
+};
+var DEFAULT_THEME_ID = "nebula";
+function getTheme(id) {
+  return THEMES[id] ?? THEMES[DEFAULT_THEME_ID];
+}
+function getThemeIds() {
+  return Object.keys(THEMES);
+}
+function clampByte(value) {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(255, Math.max(0, value));
+}
+function parseHexColor(hex) {
+  const value = hex.trim();
+  if (!value.startsWith("#")) return null;
+  const raw = value.slice(1);
+  if (raw.length === 3) {
+    const r = Number.parseInt(raw[0] + raw[0], 16);
+    const g = Number.parseInt(raw[1] + raw[1], 16);
+    const b = Number.parseInt(raw[2] + raw[2], 16);
+    if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+    return { r, g, b };
+  }
+  if (raw.length === 6) {
+    const r = Number.parseInt(raw.slice(0, 2), 16);
+    const g = Number.parseInt(raw.slice(2, 4), 16);
+    const b = Number.parseInt(raw.slice(4, 6), 16);
+    if ([r, g, b].some((n) => Number.isNaN(n))) return null;
+    return { r, g, b };
+  }
+  return null;
+}
+function parseRgbFunction(color) {
+  const match = color.trim().match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+)?\s*\)$/i);
+  if (!match) return null;
+  const r = clampByte(Number.parseFloat(match[1]));
+  const g = clampByte(Number.parseFloat(match[2]));
+  const b = clampByte(Number.parseFloat(match[3]));
+  return { r, g, b };
+}
+function parseColorToRgb(color) {
+  return parseHexColor(color) ?? parseRgbFunction(color);
+}
+function rgbToHslComponents(rgb) {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (delta !== 0) {
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / delta + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / delta + 2;
+        break;
+      default:
+        h = (r - g) / delta + 4;
+        break;
+    }
+    h /= 6;
+  }
+  const hDeg = Math.round(h * 360);
+  const sPct = Math.round(s * 100);
+  const lPct = Math.round(l * 100);
+  return `${hDeg} ${sPct}% ${lPct}%`;
+}
+function colorToHslComponents(color) {
+  const rgb = parseColorToRgb(color);
+  if (!rgb) return null;
+  return rgbToHslComponents(rgb);
+}
+function themeToCssVariables(theme) {
+  return {
+    // Colors
+    "--theme-bg-body": theme.color.bg.body,
+    "--theme-bg-panel": theme.color.bg.panel,
+    "--theme-bg-elevated": theme.color.bg.elevated,
+    "--theme-bg-horizon": theme.color.bg.horizon,
+    "--theme-text-primary": theme.color.text.primary,
+    "--theme-text-muted": theme.color.text.muted,
+    "--theme-text-soft": theme.color.text.soft,
+    "--theme-accent-primary": theme.color.accent.primary,
+    "--theme-accent-secondary": theme.color.accent.secondary,
+    "--theme-accent-positive": theme.color.accent.positive,
+    "--theme-accent-warning": theme.color.accent.warning,
+    "--theme-accent-destructive": theme.color.accent.destructive,
+    "--theme-border": theme.color.border,
+    "--theme-ring": theme.color.ring,
+    // Glass
+    "--theme-glass-panel-bg": theme.glass.panelBg,
+    "--theme-glass-panel-border": theme.glass.panelBorder,
+    "--theme-glass-panel-blur": theme.glass.panelBlur,
+    "--theme-glass-header-gradient": theme.glass.headerGradient,
+    "--theme-glass-card-bg": theme.glass.cardBg,
+    "--theme-glass-card-border": theme.glass.cardBorder,
+    "--theme-glass-hover-bg": theme.glass.hoverBg,
+    "--theme-glass-active-border": theme.glass.activeBorder,
+    "--theme-glass-active-shadow": theme.glass.activeShadow,
+    // Elevation
+    "--theme-shadow-soft": theme.elevation.softDrop,
+    "--theme-shadow-hud-panel": theme.elevation.hudPanel,
+    "--theme-shadow-hud-rail": theme.elevation.hudRail,
+    "--theme-shadow-modal": theme.elevation.modal,
+    "--theme-shadow-glow": theme.elevation.glow,
+    // Ambient
+    "--theme-ambient-horizon": theme.ambient.horizonGradient,
+    "--theme-ambient-ripple-primary": theme.ambient.rippleColorPrimary,
+    "--theme-ambient-ripple-secondary": theme.ambient.rippleColorSecondary,
+    "--theme-ambient-glow-intensity": String(theme.ambient.glowIntensity),
+    // Controls
+    "--theme-switch-track-on": theme.controls.switch.track.bg.on,
+    "--theme-switch-track-off": theme.controls.switch.track.bg.off,
+    "--theme-switch-thumb-on": theme.controls.switch.thumb.bg.on,
+    "--theme-switch-thumb-off": theme.controls.switch.thumb.bg.off,
+    "--theme-button-glow-hover-bg": theme.controls.buttonGlow.hoverBg,
+    "--theme-button-glow-hover-text": theme.controls.buttonGlow.hoverText,
+    "--theme-button-glow-hover-shadow": theme.controls.buttonGlow.hoverShadow
+  };
+}
+var TAILWIND_CSS_VARIABLE_KEYS = [
+  "--cyan-neon",
+  "--magenta-neon",
+  "--emerald-neon",
+  "--violet-neon",
+  "--yellow-warning",
+  "--background",
+  "--foreground",
+  "--card",
+  "--card-foreground",
+  "--popover",
+  "--popover-foreground",
+  "--primary",
+  "--primary-foreground",
+  "--secondary",
+  "--secondary-foreground",
+  "--muted",
+  "--muted-foreground",
+  "--accent",
+  "--accent-foreground",
+  "--destructive",
+  "--destructive-foreground",
+  "--border",
+  "--input",
+  "--ring"
+];
+function themeToTailwindCssVariables(theme) {
+  const bg = colorToHslComponents(theme.color.bg.body);
+  const fg = colorToHslComponents(theme.color.text.primary);
+  const panel = colorToHslComponents(theme.color.bg.panel);
+  const elevated = colorToHslComponents(theme.color.bg.elevated);
+  const primary = colorToHslComponents(theme.color.accent.primary);
+  const secondary = colorToHslComponents(theme.color.accent.secondary);
+  const positive = colorToHslComponents(theme.color.accent.positive);
+  const warning = colorToHslComponents(theme.color.accent.warning);
+  const destructive = colorToHslComponents(theme.color.accent.destructive);
+  const border = colorToHslComponents(theme.color.border);
+  const ring = colorToHslComponents(theme.color.ring);
+  const mutedFg = colorToHslComponents(theme.color.text.muted);
+  const violetFallback = theme.id === "nebula" ? colorToHslComponents("#8B5CF6") : colorToHslComponents(theme.color.accent.secondary);
+  return {
+    "--cyan-neon": primary ?? void 0,
+    "--magenta-neon": secondary ?? void 0,
+    "--emerald-neon": positive ?? void 0,
+    "--violet-neon": violetFallback ?? void 0,
+    "--yellow-warning": warning ?? void 0,
+    "--background": bg ?? void 0,
+    "--foreground": fg ?? void 0,
+    "--card": panel ?? void 0,
+    "--card-foreground": fg ?? void 0,
+    "--popover": elevated ?? void 0,
+    "--popover-foreground": fg ?? void 0,
+    "--primary": primary ?? void 0,
+    "--primary-foreground": bg ?? void 0,
+    "--secondary": secondary ?? void 0,
+    "--secondary-foreground": fg ?? void 0,
+    "--muted": elevated ?? void 0,
+    "--muted-foreground": mutedFg ?? void 0,
+    "--accent": panel ?? void 0,
+    "--accent-foreground": primary ?? void 0,
+    "--destructive": destructive ?? void 0,
+    "--destructive-foreground": fg ?? void 0,
+    "--border": border ?? void 0,
+    "--input": elevated ?? void 0,
+    "--ring": ring ?? void 0
+  };
+}
+function applyThemeCssVariables(theme, target = document.documentElement) {
+  const variables = themeToCssVariables(theme);
+  const tailwindVariables = themeToTailwindCssVariables(theme);
+  for (const [key, value] of Object.entries(variables)) {
+    target.style.setProperty(key, value);
+  }
+  for (const [key, value] of Object.entries(tailwindVariables)) {
+    if (!value) continue;
+    target.style.setProperty(key, value);
+  }
+  target.dataset.uiTheme = theme.id;
+}
+function removeThemeCssVariables(target = document.documentElement) {
+  const variables = themeToCssVariables(THEMES.nebula);
+  for (const key of Object.keys(variables)) {
+    target.style.removeProperty(key);
+  }
+  for (const key of TAILWIND_CSS_VARIABLE_KEYS) {
+    target.style.removeProperty(key);
+  }
+  delete target.dataset.uiTheme;
+}
+function createMediaQueryStore(query) {
+  function subscribe(callback) {
+    if (typeof window === "undefined") return () => {
+    };
+    const mql = window.matchMedia(query);
+    mql.addEventListener("change", callback);
+    return () => mql.removeEventListener("change", callback);
+  }
+  function getSnapshot() {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  }
+  function getServerSnapshot() {
+    return false;
+  }
+  return { subscribe, getSnapshot, getServerSnapshot };
+}
+var reducedMotionStore = createMediaQueryStore(
+  "(prefers-reduced-motion: reduce)"
+);
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(
+    reducedMotionStore.subscribe,
+    reducedMotionStore.getSnapshot,
+    reducedMotionStore.getServerSnapshot
+  );
+}
+var UiThemeContext = React.createContext(null);
+var STORAGE_KEY = "oos-ui-theme";
+function UiThemeProvider({
+  children,
+  defaultThemeId = DEFAULT_THEME_ID,
+  themeId: controlledThemeId,
+  onThemeChange,
+  storageKey = STORAGE_KEY,
+  disableCssVariables = false
+}) {
+  const deprecationWarned = React.useRef(false);
+  if (!deprecationWarned.current) {
+    deprecationWarned.current = true;
+    console.warn("[Glia] UiThemeProvider is deprecated. Use GliaThemeProvider instead.");
+  }
+  const [isHydrating, setIsHydrating] = React.useState(true);
+  const [internalThemeId, setInternalThemeId] = React.useState(defaultThemeId);
+  const activeThemeId = controlledThemeId ?? internalThemeId;
+  const theme = getTheme(activeThemeId);
+  React.useEffect(() => {
+    if (controlledThemeId !== void 0) {
+      setIsHydrating(false);
+      return;
+    }
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && (stored === "nebula" || stored === "solarpunk")) {
+        setInternalThemeId(stored);
+      }
+    } catch {
+    }
+    setIsHydrating(false);
+  }, [controlledThemeId, storageKey]);
+  React.useEffect(() => {
+    if (disableCssVariables || isHydrating) return;
+    applyThemeCssVariables(theme);
+    return () => {
+    };
+  }, [theme, disableCssVariables, isHydrating]);
+  const setThemeId = React.useCallback(
+    (id) => {
+      if (controlledThemeId === void 0) {
+        setInternalThemeId(id);
+        try {
+          localStorage.setItem(storageKey, id);
+        } catch {
+        }
+      }
+      onThemeChange?.(id);
+    },
+    [controlledThemeId, onThemeChange, storageKey]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      theme,
+      themeId: activeThemeId,
+      setThemeId,
+      isHydrating
+    }),
+    [theme, activeThemeId, setThemeId, isHydrating]
+  );
+  const reduceMotion = usePrefersReducedMotion();
+  return /* @__PURE__ */ jsx(UiThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: reduceMotion ? "always" : "never", children }) });
+}
+function useUiTheme() {
+  const context = React.useContext(UiThemeContext);
+  if (!context) {
+    throw new Error("useUiTheme must be used within a UiThemeProvider");
+  }
+  return context;
+}
+function useThemeTokens() {
+  const { theme } = useUiTheme();
+  return theme;
+}
+function useGlassTokens() {
+  const { theme } = useUiTheme();
+  return theme.glass;
+}
+function useColorTokens() {
+  const { theme } = useUiTheme();
+  return theme.color;
+}
+function useMotionTokens() {
+  const { theme } = useUiTheme();
+  return theme.motion;
+}
+function useAmbientTokens() {
+  const { theme } = useUiTheme();
+  return theme.ambient;
+}
+function useControlTokens() {
+  const { theme } = useUiTheme();
+  return theme.controls;
+}
+function useElevationTokens() {
+  const { theme } = useUiTheme();
+  return theme.elevation;
+}
+function useIsSolarpunk() {
+  const { themeId } = useUiTheme();
+  return themeId === "solarpunk";
+}
+function useIsNebula() {
+  const { themeId } = useUiTheme();
+  return themeId === "nebula";
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+function easeToCss(ease) {
+  if (Array.isArray(ease)) {
+    return `cubic-bezier(${ease[0]}, ${ease[1]}, ${ease[2]}, ${ease[3]})`;
+  }
+  const map = {
+    linear: "linear",
+    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+  };
+  return map[ease] ?? "cubic-bezier(0.4, 0, 0.2, 1)";
+}
+function buildGliaCssVariables(theme) {
+  const vars = {};
+  vars["--glia-color-bg-body"] = theme.color.bg.body;
+  vars["--glia-color-bg-panel"] = theme.color.bg.panel;
+  vars["--glia-color-bg-elevated"] = theme.color.bg.elevated;
+  vars["--glia-color-bg-horizon"] = theme.color.bg.horizon;
+  vars["--glia-color-text-primary"] = theme.color.text.primary;
+  vars["--glia-color-text-muted"] = theme.color.text.muted;
+  vars["--glia-color-text-soft"] = theme.color.text.soft;
+  vars["--glia-color-accent"] = theme.color.accent.primary;
+  vars["--glia-color-accent-secondary"] = theme.color.accent.secondary;
+  vars["--glia-color-accent-positive"] = theme.color.accent.positive;
+  vars["--glia-color-accent-warning"] = theme.color.accent.warning;
+  vars["--glia-color-accent-destructive"] = theme.color.accent.destructive;
+  vars["--glia-color-border"] = theme.color.border;
+  vars["--glia-color-ring"] = theme.color.ring;
+  vars["--glia-glass-panel-bg"] = theme.glass.panelBg;
+  vars["--glia-glass-panel-border"] = theme.glass.panelBorder;
+  vars["--glia-glass-panel-blur"] = theme.glass.panelBlur;
+  vars["--glia-glass-header-gradient"] = theme.glass.headerGradient;
+  vars["--glia-glass-card-bg"] = theme.glass.cardBg;
+  vars["--glia-glass-card-border"] = theme.glass.cardBorder;
+  vars["--glia-glass-hover-bg"] = theme.glass.hoverBg;
+  vars["--glia-glass-active-border"] = theme.glass.activeBorder;
+  vars["--glia-glass-active-shadow"] = theme.glass.activeShadow;
+  vars["--glia-shadow-soft"] = theme.elevation.softDrop;
+  vars["--glia-shadow-hud-panel"] = theme.elevation.hudPanel;
+  vars["--glia-shadow-hud-rail"] = theme.elevation.hudRail;
+  vars["--glia-shadow-modal"] = theme.elevation.modal;
+  vars["--glia-shadow-glow"] = theme.elevation.glow;
+  vars["--glia-ambient-horizon"] = theme.ambient.horizonGradient;
+  vars["--glia-ambient-ripple-primary"] = theme.ambient.rippleColorPrimary;
+  vars["--glia-ambient-ripple-secondary"] = theme.ambient.rippleColorSecondary;
+  vars["--glia-ambient-glow-intensity"] = String(theme.ambient.glowIntensity);
+  vars["--glia-switch-track-on"] = theme.controls.switch.track.bg.on;
+  vars["--glia-switch-track-off"] = theme.controls.switch.track.bg.off;
+  vars["--glia-switch-thumb-on"] = theme.controls.switch.thumb.bg.on;
+  vars["--glia-switch-thumb-off"] = theme.controls.switch.thumb.bg.off;
+  vars["--glia-button-glow-hover-bg"] = theme.controls.buttonGlow.hoverBg;
+  vars["--glia-button-glow-hover-text"] = theme.controls.buttonGlow.hoverText;
+  vars["--glia-button-glow-hover-shadow"] = theme.controls.buttonGlow.hoverShadow;
+  vars["--glia-font-display"] = theme.fonts.display;
+  vars["--glia-font-body"] = theme.fonts.body;
+  vars["--glia-font-mono"] = theme.fonts.mono;
+  vars["--glia-radius-sm"] = theme.radii.sm;
+  vars["--glia-radius-md"] = theme.radii.md;
+  vars["--glia-radius-lg"] = theme.radii.lg;
+  vars["--glia-spacing-taskbar-height"] = theme.spacing.taskbarHeight;
+  vars["--glia-spacing-titlebar-height"] = theme.spacing.titlebarHeight;
+  vars["--glia-spacing-window-padding"] = theme.spacing.windowPadding;
+  vars["--glia-spacing-icon-size"] = theme.spacing.iconSize;
+  vars["--glia-spacing-icon-gap"] = theme.spacing.iconGap;
+  vars["--glia-spacing-window-border-width"] = theme.spacing.windowBorderWidth;
+  const fastMs = Math.round(theme.motion.fast.duration * 1e3);
+  const normalMs = Math.round(theme.motion.normal.duration * 1e3);
+  const slowMs = Math.round(theme.motion.normal.duration * 1500);
+  vars["--glia-duration-fast"] = `${fastMs}ms`;
+  vars["--glia-duration-normal"] = `${normalMs}ms`;
+  vars["--glia-duration-slow"] = `${slowMs}ms`;
+  vars["--glia-easing-default"] = easeToCss(theme.motion.normal.ease);
+  vars["--glia-easing-spring"] = "cubic-bezier(0.34, 1.56, 0.64, 1)";
+  vars["--glia-easing-bounce"] = "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+  vars["--glia-blur-backdrop"] = `blur(${theme.glass.panelBlur})`;
+  const twMap = {
+    "background": theme.color.bg.body,
+    "foreground": theme.color.text.primary,
+    "card": theme.color.bg.panel,
+    "card-foreground": theme.color.text.primary,
+    "popover": theme.color.bg.elevated,
+    "popover-foreground": theme.color.text.primary,
+    "primary": theme.color.accent.primary,
+    "primary-foreground": theme.color.bg.body,
+    "secondary": theme.color.accent.secondary,
+    "secondary-foreground": theme.color.text.primary,
+    "muted": theme.color.bg.elevated,
+    "muted-foreground": theme.color.text.muted,
+    "accent": theme.color.bg.panel,
+    "accent-foreground": theme.color.accent.primary,
+    "destructive": theme.color.accent.destructive,
+    "destructive-foreground": theme.color.text.primary,
+    "border": theme.color.border,
+    "input": theme.color.bg.elevated,
+    "ring": theme.color.ring
+  };
+  for (const [name, color] of Object.entries(twMap)) {
+    const hsl = colorToHslComponents(color);
+    if (hsl) {
+      vars[`--glia-tw-${name}`] = hsl;
+    }
+  }
+  const neonMap = {
+    "cyan-neon": theme.color.accent.primary,
+    "magenta-neon": theme.color.accent.secondary,
+    "emerald-neon": theme.color.accent.positive,
+    "yellow-warning": theme.color.accent.warning
+  };
+  const violetFallback = theme.id === "nebula" ? "#8B5CF6" : theme.color.accent.secondary;
+  neonMap["violet-neon"] = violetFallback;
+  for (const [name, color] of Object.entries(neonMap)) {
+    const hsl = colorToHslComponents(color);
+    if (hsl) {
+      vars[`--glia-tw-${name}`] = hsl;
+    }
+  }
+  vars["--theme-bg-body"] = "var(--glia-color-bg-body)";
+  vars["--theme-bg-panel"] = "var(--glia-color-bg-panel)";
+  vars["--theme-bg-elevated"] = "var(--glia-color-bg-elevated)";
+  vars["--theme-bg-horizon"] = "var(--glia-color-bg-horizon)";
+  vars["--theme-text-primary"] = "var(--glia-color-text-primary)";
+  vars["--theme-text-muted"] = "var(--glia-color-text-muted)";
+  vars["--theme-text-soft"] = "var(--glia-color-text-soft)";
+  vars["--theme-accent-primary"] = "var(--glia-color-accent)";
+  vars["--theme-accent-secondary"] = "var(--glia-color-accent-secondary)";
+  vars["--theme-accent-positive"] = "var(--glia-color-accent-positive)";
+  vars["--theme-accent-warning"] = "var(--glia-color-accent-warning)";
+  vars["--theme-accent-destructive"] = "var(--glia-color-accent-destructive)";
+  vars["--theme-border"] = "var(--glia-color-border)";
+  vars["--theme-ring"] = "var(--glia-color-ring)";
+  vars["--theme-glass-panel-bg"] = "var(--glia-glass-panel-bg)";
+  vars["--theme-glass-panel-border"] = "var(--glia-glass-panel-border)";
+  vars["--theme-glass-panel-blur"] = "var(--glia-glass-panel-blur)";
+  vars["--theme-glass-header-gradient"] = "var(--glia-glass-header-gradient)";
+  vars["--theme-glass-card-bg"] = "var(--glia-glass-card-bg)";
+  vars["--theme-glass-card-border"] = "var(--glia-glass-card-border)";
+  vars["--theme-glass-hover-bg"] = "var(--glia-glass-hover-bg)";
+  vars["--theme-glass-active-border"] = "var(--glia-glass-active-border)";
+  vars["--theme-glass-active-shadow"] = "var(--glia-glass-active-shadow)";
+  vars["--theme-shadow-soft"] = "var(--glia-shadow-soft)";
+  vars["--theme-shadow-hud-panel"] = "var(--glia-shadow-hud-panel)";
+  vars["--theme-shadow-hud-rail"] = "var(--glia-shadow-hud-rail)";
+  vars["--theme-shadow-modal"] = "var(--glia-shadow-modal)";
+  vars["--theme-shadow-glow"] = "var(--glia-shadow-glow)";
+  vars["--theme-ambient-horizon"] = "var(--glia-ambient-horizon)";
+  vars["--theme-ambient-ripple-primary"] = "var(--glia-ambient-ripple-primary)";
+  vars["--theme-ambient-ripple-secondary"] = "var(--glia-ambient-ripple-secondary)";
+  vars["--theme-ambient-glow-intensity"] = "var(--glia-ambient-glow-intensity)";
+  vars["--theme-switch-track-on"] = "var(--glia-switch-track-on)";
+  vars["--theme-switch-track-off"] = "var(--glia-switch-track-off)";
+  vars["--theme-switch-thumb-on"] = "var(--glia-switch-thumb-on)";
+  vars["--theme-switch-thumb-off"] = "var(--glia-switch-thumb-off)";
+  vars["--theme-button-glow-hover-bg"] = "var(--glia-button-glow-hover-bg)";
+  vars["--theme-button-glow-hover-text"] = "var(--glia-button-glow-hover-text)";
+  vars["--theme-button-glow-hover-shadow"] = "var(--glia-button-glow-hover-shadow)";
+  vars["--bb-color-window-bg"] = "var(--glia-color-bg-panel)";
+  vars["--bb-color-window-border"] = "var(--glia-color-border)";
+  vars["--bb-color-window-border-focused"] = "var(--glia-glass-active-border)";
+  vars["--bb-color-titlebar-bg"] = "var(--glia-color-bg-panel)";
+  vars["--bb-color-titlebar-text"] = "var(--glia-color-text-primary)";
+  vars["--bb-color-accent"] = "var(--glia-color-accent)";
+  vars["--bb-color-accent-muted"] = "var(--glia-glass-hover-bg)";
+  vars["--bb-color-accent-glow"] = "var(--glia-glass-active-shadow)";
+  vars["--bb-color-taskbar-bg"] = "var(--glia-glass-panel-bg)";
+  vars["--bb-color-taskbar-text"] = "var(--glia-color-text-muted)";
+  vars["--bb-color-start-menu-bg"] = "var(--glia-color-bg-elevated)";
+  vars["--bb-color-context-menu-bg"] = "var(--glia-color-bg-elevated)";
+  vars["--bb-color-context-menu-hover"] = "var(--glia-glass-hover-bg)";
+  vars["--bb-color-desktop-bg"] = "var(--glia-color-bg-body)";
+  vars["--bb-color-icon-text"] = "var(--glia-color-text-muted)";
+  vars["--bb-color-icon-selected"] = "var(--glia-glass-hover-bg)";
+  vars["--bb-color-destructive"] = "var(--glia-color-accent-destructive)";
+  vars["--bb-color-success"] = "var(--glia-color-accent-positive)";
+  vars["--bb-color-warning"] = "var(--glia-color-accent-warning)";
+  vars["--bb-color-text-primary"] = "var(--glia-color-text-primary)";
+  vars["--bb-color-text-secondary"] = "var(--glia-color-text-muted)";
+  vars["--bb-color-text-muted"] = "var(--glia-color-text-soft)";
+  vars["--bb-font-display"] = "var(--glia-font-display)";
+  vars["--bb-font-body"] = "var(--glia-font-body)";
+  vars["--bb-font-mono"] = "var(--glia-font-mono)";
+  vars["--bb-radius-window"] = "var(--glia-radius-lg)";
+  vars["--bb-radius-button"] = "var(--glia-radius-sm)";
+  vars["--bb-radius-menu"] = "var(--glia-radius-md)";
+  vars["--bb-radius-input"] = "var(--glia-radius-sm)";
+  vars["--bb-shadow-window"] = "var(--glia-shadow-hud-panel)";
+  vars["--bb-shadow-window-focused"] = "var(--glia-shadow-modal)";
+  vars["--bb-shadow-menu"] = "var(--glia-shadow-hud-panel)";
+  vars["--bb-shadow-tooltip"] = "var(--glia-shadow-soft)";
+  vars["--bb-spacing-window-padding"] = "var(--glia-spacing-window-padding)";
+  vars["--bb-spacing-taskbar-height"] = "var(--glia-spacing-taskbar-height)";
+  vars["--bb-spacing-icon-size"] = "var(--glia-spacing-icon-size)";
+  vars["--bb-spacing-icon-gap"] = "var(--glia-spacing-icon-gap)";
+  vars["--bb-spacing-titlebar-height"] = "var(--glia-spacing-titlebar-height)";
+  vars["--bb-spacing-window-border-width"] = "var(--glia-spacing-window-border-width)";
+  vars["--bb-duration-fast"] = "var(--glia-duration-fast)";
+  vars["--bb-duration-normal"] = "var(--glia-duration-normal)";
+  vars["--bb-duration-slow"] = "var(--glia-duration-slow)";
+  vars["--bb-easing-default"] = "var(--glia-easing-default)";
+  vars["--bb-easing-spring"] = "var(--glia-easing-spring)";
+  vars["--bb-easing-bounce"] = "var(--glia-easing-bounce)";
+  vars["--bb-blur-backdrop"] = "var(--glia-blur-backdrop)";
+  return vars;
+}
+function applyGliaCssVariables(theme, target = document.documentElement) {
+  const vars = buildGliaCssVariables(theme);
+  for (const [key, value] of Object.entries(vars)) {
+    target.style.setProperty(key, value);
+  }
+  applyThemeCssVariables(theme, target);
+  target.dataset.gliaTheme = theme.id;
+}
+var GliaThemeContext = React.createContext(null);
+var STORAGE_KEY2 = "glia-theme";
+function GliaThemeProvider({
+  children,
+  themeId: controlledThemeId,
+  overrides,
+  storageKey = STORAGE_KEY2
+}) {
+  const [internalThemeId, setInternalThemeId] = React.useState(
+    controlledThemeId ?? DEFAULT_THEME_ID
+  );
+  const activeThemeId = controlledThemeId ?? internalThemeId;
+  const theme = React.useMemo(() => {
+    const base = getTheme(activeThemeId);
+    if (!overrides) return base;
+    return { ...base, ...overrides };
+  }, [activeThemeId, overrides]);
+  React.useEffect(() => {
+    if (controlledThemeId !== void 0) return;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && (stored === "nebula" || stored === "solarpunk")) {
+        setInternalThemeId(stored);
+      }
+    } catch {
+    }
+  }, [controlledThemeId, storageKey]);
+  useIsomorphicLayoutEffect(() => {
+    applyGliaCssVariables(theme);
+    return () => {
+    };
+  }, [theme]);
+  const setThemeId = React.useCallback(
+    (id) => {
+      if (controlledThemeId === void 0) {
+        setInternalThemeId(id);
+        try {
+          localStorage.setItem(storageKey, id);
+        } catch {
+        }
+      }
+    },
+    [controlledThemeId, storageKey]
+  );
+  const contextValue = React.useMemo(
+    () => ({ theme, themeId: activeThemeId, setThemeId }),
+    [theme, activeThemeId, setThemeId]
+  );
+  return /* @__PURE__ */ jsx(GliaThemeContext.Provider, { value: contextValue, children });
+}
+function useGliaTheme() {
+  const context = React.useContext(GliaThemeContext);
+  if (!context) {
+    throw new Error("useGliaTheme must be used within a GliaThemeProvider");
+  }
+  return context;
+}
+function useFontTokens() {
+  const { theme } = useGliaTheme();
+  return theme.fonts;
+}
+function useRadiiTokens() {
+  const { theme } = useGliaTheme();
+  return theme.radii;
+}
+function useSpacingTokens() {
+  const { theme } = useGliaTheme();
+  return theme.spacing;
+}
+
+// src/theme/bridge.ts
+var EASING_MAP = {
+  linear: "linear",
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+};
+function easeToCss2(ease) {
+  if (Array.isArray(ease)) {
+    return `cubic-bezier(${ease[0]}, ${ease[1]}, ${ease[2]}, ${ease[3]})`;
+  }
+  return EASING_MAP[ease] ?? "cubic-bezier(0.4, 0, 0.2, 1)";
+}
+function extractColorFromShadow(shadow, fallback) {
+  const rgbaMatch = shadow.match(/rgba?\([^)]+\)/);
+  return rgbaMatch ? rgbaMatch[0] : fallback;
+}
+function nudgeAlpha(color, delta) {
+  const match = color.match(
+    /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([\d.]+)\s*\)$/
+  );
+  if (!match) return color;
+  const [, r, g, b, a] = match;
+  const newAlpha = Math.min(1, Math.max(0, parseFloat(a) + delta));
+  return `rgba(${r}, ${g}, ${b}, ${newAlpha})`;
+}
+function desktopThemeFromUiTheme(uiTheme, options = {}) {
+  const { overrides, fonts: fontOverrides } = options;
+  const colors = {
+    windowBg: uiTheme.color.bg.panel,
+    windowBorder: uiTheme.color.border,
+    windowBorderFocused: uiTheme.glass.activeBorder,
+    titlebarBg: nudgeAlpha(uiTheme.color.bg.panel, 0.02),
+    titlebarText: uiTheme.color.text.primary,
+    accent: uiTheme.color.accent.primary,
+    accentMuted: uiTheme.glass.hoverBg,
+    accentGlow: extractColorFromShadow(
+      uiTheme.glass.activeShadow,
+      uiTheme.color.accent.primary
+    ),
+    taskbarBg: uiTheme.glass.panelBg,
+    taskbarText: uiTheme.color.text.muted,
+    startMenuBg: uiTheme.color.bg.elevated,
+    contextMenuBg: uiTheme.color.bg.elevated,
+    contextMenuHover: uiTheme.glass.hoverBg,
+    desktopBg: uiTheme.color.bg.body,
+    iconText: uiTheme.color.text.muted,
+    iconSelected: uiTheme.glass.hoverBg,
+    destructive: uiTheme.color.accent.destructive,
+    success: uiTheme.color.accent.positive,
+    warning: uiTheme.color.accent.warning,
+    textPrimary: uiTheme.color.text.primary,
+    textSecondary: uiTheme.color.text.muted,
+    textMuted: uiTheme.color.text.soft,
+    ...overrides?.colors
+  };
+  const fonts = {
+    display: fontOverrides?.display ?? uiTheme.fonts.display,
+    body: fontOverrides?.body ?? uiTheme.fonts.body,
+    mono: fontOverrides?.mono ?? uiTheme.fonts.mono,
+    ...overrides?.fonts
+  };
+  const radii = {
+    window: uiTheme.radii.lg,
+    button: uiTheme.radii.sm,
+    menu: uiTheme.radii.md,
+    input: uiTheme.radii.sm,
+    ...overrides?.radii
+  };
+  const shadows = {
+    window: uiTheme.elevation.hudPanel,
+    windowFocused: uiTheme.elevation.modal,
+    menu: uiTheme.elevation.hudPanel,
+    tooltip: uiTheme.elevation.softDrop,
+    ...overrides?.shadows
+  };
+  const spacing = {
+    windowPadding: uiTheme.spacing.windowPadding,
+    taskbarHeight: uiTheme.spacing.taskbarHeight,
+    iconSize: uiTheme.spacing.iconSize,
+    iconGap: uiTheme.spacing.iconGap,
+    titlebarHeight: uiTheme.spacing.titlebarHeight,
+    windowBorderWidth: uiTheme.spacing.windowBorderWidth,
+    ...overrides?.spacing
+  };
+  const fastMs = Math.round(uiTheme.motion.fast.duration * 1e3);
+  const normalMs = Math.round(uiTheme.motion.normal.duration * 1e3);
+  const slowMs = Math.round(uiTheme.motion.normal.duration * 1500);
+  const animation = {
+    duration: {
+      fast: `${fastMs}ms`,
+      normal: `${normalMs}ms`,
+      slow: `${slowMs}ms`
+    },
+    easing: {
+      default: easeToCss2(uiTheme.motion.normal.ease),
+      spring: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+    }
+  };
+  const blur = {
+    backdrop: `blur(${uiTheme.glass.panelBlur})`
+  };
+  return {
+    id: `bridged-${uiTheme.id}`,
+    name: `${uiTheme.name} (Bridged)`,
+    colors,
+    fonts,
+    radii,
+    shadows,
+    spacing,
+    animation,
+    blur
+  };
+}
+
+// src/theme/materials.ts
+var GLASS_MATERIALS = {
+  /**
+   * Standard frosted glass -- the default material.
+   * Medium blur, full opacity, subtle noise grain.
+   */
+  frosted: {
+    id: "frosted",
+    name: "Frosted Glass",
+    backdropFilter: "blur(24px)",
+    bgOpacity: 1,
+    borderOpacity: 1,
+    showNoise: true,
+    noisePreset: "glass",
+    noiseOpacity: 0.03,
+    saturate: 180,
+    brightness: 110
+  },
+  /**
+   * Thin/clear glass -- minimal blur, very transparent.
+   * For subtle layering where content behind should remain visible.
+   */
+  thin: {
+    id: "thin",
+    name: "Thin Glass",
+    backdropFilter: "blur(8px)",
+    bgOpacity: 0.4,
+    borderOpacity: 0.6,
+    showNoise: false,
+    noisePreset: "fine",
+    noiseOpacity: 0.02,
+    saturate: 120,
+    brightness: 105
+  },
+  /**
+   * Thick/dense glass -- heavy blur, opaque, strong borders.
+   * For modals, dialogs, and high-contrast surfaces.
+   */
+  thick: {
+    id: "thick",
+    name: "Thick Glass",
+    backdropFilter: "blur(40px)",
+    bgOpacity: 1.2,
+    borderOpacity: 1.5,
+    showNoise: true,
+    noisePreset: "card",
+    noiseOpacity: 0.05,
+    saturate: 200,
+    brightness: 100
+  },
+  /**
+   * Clear glass -- no blur, just tinted transparency.
+   * For overlays that should be visible but not obscured.
+   */
+  clear: {
+    id: "clear",
+    name: "Clear Glass",
+    backdropFilter: "blur(0px)",
+    bgOpacity: 0.3,
+    borderOpacity: 0.4,
+    showNoise: false,
+    noisePreset: "glass",
+    noiseOpacity: 0,
+    saturate: 100,
+    brightness: 100
+  },
+  /**
+   * Holographic glass -- saturated, vibrant, with heavy noise.
+   * For decorative/accent panels with a sci-fi feel.
+   */
+  holographic: {
+    id: "holographic",
+    name: "Holographic Glass",
+    backdropFilter: "blur(20px)",
+    bgOpacity: 0.8,
+    borderOpacity: 1,
+    showNoise: true,
+    noisePreset: "heavy",
+    noiseOpacity: 0.08,
+    saturate: 250,
+    brightness: 120
+  }
+};
+function getGlassMaterial(id) {
+  return GLASS_MATERIALS[id] ?? GLASS_MATERIALS.frosted;
+}
+function buildBackdropFilter(material) {
+  const parts = [material.backdropFilter];
+  if (material.saturate !== 100) {
+    parts.push(`saturate(${material.saturate}%)`);
+  }
+  if (material.brightness !== 100) {
+    parts.push(`brightness(${material.brightness}%)`);
+  }
+  return parts.join(" ");
+}
+function getReducedTransparencyStyles(material) {
+  return {
+    backdropFilter: "none",
+    bgOpacity: Math.min(material.bgOpacity * 2.5, 1),
+    showNoise: false
+  };
+}
+
+export { DEFAULT_THEME_ID, GLASS_MATERIALS, GliaThemeProvider, THEMES, UiThemeProvider, applyGliaCssVariables, applyThemeCssVariables, buildBackdropFilter, buildGliaCssVariables, desktopThemeFromUiTheme, getGlassMaterial, getReducedTransparencyStyles, getTheme, getThemeIds, nebulaTheme, removeThemeCssVariables, solarpunkTheme, themeToCssVariables, useAmbientTokens, useColorTokens, useControlTokens, useElevationTokens, useFontTokens, useGlassTokens, useGliaTheme, useIsNebula, useIsSolarpunk, useMotionTokens, useRadiiTokens, useSpacingTokens, useThemeTokens, useUiTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map