@fangxinyan/lumina 0.6.2 → 0.6.4

package/dist/chunk-7NZ2A4MA.js

@@ -0,0 +1,495 @@
+import './tokens-EF34LSWI.css';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Theme/Theme.tsx
+var ACCENT_PRESETS = {
+  sky: { accent: "oklch(68% 0.14 235)", ink: "oklch(42% 0.12 235)", soft: "oklch(92% 0.04 235)", glow: "oklch(68% 0.14 235 / 0.35)" },
+  coral: { accent: "oklch(72% 0.16 35)", ink: "oklch(48% 0.14 35)", soft: "oklch(94% 0.04 35)", glow: "oklch(72% 0.16 35 / 0.35)" },
+  mint: { accent: "oklch(72% 0.13 165)", ink: "oklch(46% 0.11 165)", soft: "oklch(93% 0.04 165)", glow: "oklch(72% 0.13 165 / 0.35)" },
+  violet: { accent: "oklch(66% 0.16 290)", ink: "oklch(44% 0.14 290)", soft: "oklch(93% 0.04 290)", glow: "oklch(66% 0.16 290 / 0.35)" },
+  amber: { accent: "oklch(76% 0.14 75)", ink: "oklch(50% 0.12 75)", soft: "oklch(94% 0.05 75)", glow: "oklch(76% 0.14 75 / 0.35)" },
+  rose: { accent: "oklch(68% 0.17 10)", ink: "oklch(46% 0.15 10)", soft: "oklch(93% 0.04 10)", glow: "oklch(68% 0.17 10 / 0.35)" }
+};
+var ACCENT_PRESETS_DARK = {
+  sky: { soft: "oklch(35% 0.08 235)", ink: "oklch(82% 0.10 235)", glow: "oklch(68% 0.14 235 / 0.18)" },
+  coral: { soft: "oklch(38% 0.09 35)", ink: "oklch(84% 0.10 35)", glow: "oklch(72% 0.16 35 / 0.18)" },
+  mint: { soft: "oklch(36% 0.08 165)", ink: "oklch(83% 0.10 165)", glow: "oklch(72% 0.13 165 / 0.18)" },
+  violet: { soft: "oklch(36% 0.09 290)", ink: "oklch(82% 0.11 290)", glow: "oklch(66% 0.16 290 / 0.18)" },
+  amber: { soft: "oklch(38% 0.08 75)", ink: "oklch(85% 0.10 75)", glow: "oklch(76% 0.14 75 / 0.18)" },
+  rose: { soft: "oklch(38% 0.09 10)", ink: "oklch(84% 0.11 10)", glow: "oklch(68% 0.17 10 / 0.18)" }
+};
+var FONT_STACKS = {
+  system: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
+  sf: '"SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif',
+  serif: 'Cambria, Georgia, "Songti SC", "STSong", serif',
+  mono: 'ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace'
+};
+var DEFAULT_CONFIG = {
+  mode: "light",
+  colorScheme: "light",
+  accent: "sky",
+  density: "comfortable",
+  intensity: 5,
+  radius: 20,
+  font: "sf",
+  tokens: {},
+  themes: {}
+};
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+function isThemeBaseMode(mode) {
+  return mode === "light" || mode === "dark";
+}
+function isBuiltInThemeMode(mode) {
+  return mode === "light" || mode === "dark" || mode === "system";
+}
+var TRANSIENT_THEME_MODES = /* @__PURE__ */ new Set(["__theme_panel_draft__"]);
+function isTransientThemeMode(mode) {
+  return mode != null && TRANSIENT_THEME_MODES.has(mode);
+}
+function getThemePreset(themes, mode) {
+  if (!mode || isBuiltInThemeMode(mode)) return void 0;
+  return themes?.[mode];
+}
+function applyThemePreset(config, mode) {
+  const preset = getThemePreset(config.themes, mode);
+  if (!preset) {
+    return {
+      ...config,
+      mode,
+      colorScheme: isThemeBaseMode(mode) ? mode : config.colorScheme
+    };
+  }
+  return {
+    ...config,
+    mode,
+    colorScheme: preset.base ?? config.colorScheme ?? DEFAULT_CONFIG.colorScheme,
+    accent: preset.accent ?? config.accent,
+    density: preset.density ?? config.density,
+    intensity: preset.intensity ?? config.intensity,
+    radius: preset.radius ?? config.radius,
+    font: preset.font ?? config.font,
+    tokens: preset.tokens ? { ...preset.tokens } : config.tokens
+  };
+}
+function resolveThemeConfig(config) {
+  const mode = config.mode ?? DEFAULT_CONFIG.mode;
+  const themes = config.themes ?? DEFAULT_CONFIG.themes;
+  const preset = getThemePreset(themes, mode);
+  const presetConfig = preset ? {
+    ...preset.base ? { colorScheme: preset.base } : null,
+    ...preset.accent ? { accent: preset.accent } : null,
+    ...preset.density ? { density: preset.density } : null,
+    ...preset.intensity != null ? { intensity: preset.intensity } : null,
+    ...preset.radius != null ? { radius: preset.radius } : null,
+    ...preset.font ? { font: preset.font } : null
+  } : {};
+  const merged = {
+    ...DEFAULT_CONFIG,
+    ...presetConfig,
+    ...config,
+    mode,
+    themes,
+    tokens: {
+      ...preset?.tokens ?? {},
+      ...config.tokens ?? {}
+    }
+  };
+  return {
+    ...merged,
+    colorScheme: merged.colorScheme ?? preset?.base ?? DEFAULT_CONFIG.colorScheme,
+    accent: merged.accent ?? preset?.accent ?? DEFAULT_CONFIG.accent,
+    density: merged.density ?? preset?.density ?? DEFAULT_CONFIG.density,
+    intensity: merged.intensity ?? preset?.intensity ?? DEFAULT_CONFIG.intensity,
+    radius: merged.radius ?? preset?.radius ?? DEFAULT_CONFIG.radius,
+    font: merged.font ?? preset?.font ?? DEFAULT_CONFIG.font
+  };
+}
+function resolveThemeMode(mode) {
+  if (mode !== "system") return mode;
+  if (!isBrowser) return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveThemeColorScheme(mode, themes, fallback) {
+  if (mode === "system") return fallback ?? resolveThemeMode(mode);
+  if (isThemeBaseMode(mode)) return mode;
+  return getThemePreset(themes, mode)?.base ?? fallback ?? DEFAULT_CONFIG.colorScheme;
+}
+function normalizeAccentInput(input, colorScheme) {
+  if (typeof input === "string" && input in ACCENT_PRESETS) {
+    const key = input;
+    const base = ACCENT_PRESETS[key];
+    if (colorScheme === "dark") {
+      return { key, palette: { ...base, ...ACCENT_PRESETS_DARK[key] } };
+    }
+    return { key, palette: base };
+  }
+  const raw = typeof input === "string" ? { accent: input } : input;
+  const { accent } = raw;
+  const ink = raw.ink ?? `color-mix(in oklch, ${accent} 65%, black)`;
+  const soft = raw.soft ?? (colorScheme === "dark" ? `color-mix(in oklch, ${accent} 30%, black)` : `color-mix(in oklch, ${accent} 15%, white)`);
+  const glow = raw.glow ?? (colorScheme === "dark" ? `color-mix(in oklch, ${accent} 18%, transparent)` : `color-mix(in oklch, ${accent} 35%, transparent)`);
+  return { key: "custom", palette: { accent, ink, soft, glow } };
+}
+function toVar(key) {
+  return key.startsWith("--") ? key : `--${key}`;
+}
+var LEGACY_SHADOW_TOKEN_ALIASES = {
+  "--neu-flat": "--neu-shadow-subtle",
+  "--neu-out-sm": "--neu-shadow-control",
+  "--neu-out": "--neu-shadow-panel",
+  "--neu-out-lg": "--neu-shadow-lift",
+  "--neu-in-sm": "--neu-shadow-inset",
+  "--neu-in": "--neu-shadow-inset-strong",
+  "--neu-float": "--neu-shadow-float"
+};
+function applyShadowTokens(target, colorScheme) {
+  if (colorScheme === "dark") {
+    target.style.setProperty("--shadow-offset", "calc(4px * var(--d) * var(--shadow-scale))");
+    target.style.setProperty("--shadow-blur", "calc(10px * var(--d) * var(--shadow-scale))");
+    target.style.setProperty("--shadow-inset-offset", "calc(3px * var(--d) * var(--shadow-scale))");
+    target.style.setProperty("--shadow-inset-blur", "calc(7px * var(--d) * var(--shadow-scale))");
+  } else {
+    target.style.setProperty("--shadow-offset", "calc(6px * var(--d) * var(--shadow-scale))");
+    target.style.setProperty("--shadow-blur", "calc(16px * var(--d) * var(--shadow-scale))");
+    target.style.setProperty("--shadow-inset-offset", "calc(4px * var(--d) * var(--shadow-scale))");
+    target.style.setProperty("--shadow-inset-blur", "calc(10px * var(--d) * var(--shadow-scale))");
+  }
+  target.style.setProperty(
+    "--neu-shadow-panel",
+    "var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-dark), calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur) var(--shadow-light)"
+  );
+  target.style.setProperty(
+    "--neu-shadow-control",
+    "calc(var(--shadow-offset) * 0.5) calc(var(--shadow-offset) * 0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-dark), calc(var(--shadow-offset) * -0.5) calc(var(--shadow-offset) * -0.5) calc(var(--shadow-blur) * 0.6) var(--shadow-light)"
+  );
+  target.style.setProperty(
+    "--neu-shadow-lift",
+    "calc(var(--shadow-offset) * 1.6) calc(var(--shadow-offset) * 1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-dark), calc(var(--shadow-offset) * -1.6) calc(var(--shadow-offset) * -1.6) calc(var(--shadow-blur) * 1.4) var(--shadow-light)"
+  );
+  target.style.setProperty(
+    "--neu-shadow-inset-strong",
+    "inset var(--shadow-inset-offset) var(--shadow-inset-offset) var(--shadow-inset-blur) var(--shadow-dark), inset calc(var(--shadow-inset-offset) * -1) calc(var(--shadow-inset-offset) * -1) var(--shadow-inset-blur) var(--shadow-light)"
+  );
+  target.style.setProperty(
+    "--neu-shadow-inset",
+    "inset calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-offset) * 0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-dark), inset calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-offset) * -0.6) calc(var(--shadow-inset-blur) * 0.6) var(--shadow-light)"
+  );
+  target.style.setProperty(
+    "--neu-shadow-subtle",
+    "1px 1px 2px var(--shadow-dark), -1px -1px 2px var(--shadow-light)"
+  );
+  target.style.setProperty(
+    "--neu-shadow-float",
+    "0 calc(var(--shadow-offset) * 1.8 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 2.2 * var(--shadow-float-scale)) var(--shadow-dark), 0 calc(var(--shadow-offset) * 0.4 * var(--shadow-float-scale)) calc(var(--shadow-blur) * 0.7 * var(--shadow-float-scale)) var(--shadow-dark)"
+  );
+  target.style.setProperty("--neu-out", "var(--neu-shadow-panel)");
+  target.style.setProperty("--neu-out-sm", "var(--neu-shadow-control)");
+  target.style.setProperty("--neu-out-lg", "var(--neu-shadow-lift)");
+  target.style.setProperty("--neu-in", "var(--neu-shadow-inset-strong)");
+  target.style.setProperty("--neu-in-sm", "var(--neu-shadow-inset)");
+  target.style.setProperty("--neu-flat", "var(--neu-shadow-subtle)");
+  target.style.setProperty("--neu-float", "var(--neu-shadow-float)");
+}
+function applyTheme(target, config) {
+  const cfg = resolveThemeConfig(config);
+  resolveThemeMode(cfg.mode);
+  const colorScheme = resolveThemeColorScheme(cfg.mode, cfg.themes, cfg.colorScheme);
+  const { key, palette } = normalizeAccentInput(cfg.accent, colorScheme);
+  target.dataset.theme = colorScheme;
+  target.dataset.themeMode = cfg.mode;
+  target.dataset.density = cfg.density;
+  if (key === "custom") {
+    delete target.dataset.accent;
+  } else {
+    target.dataset.accent = key;
+  }
+  target.style.setProperty("--accent", palette.accent);
+  target.style.setProperty("--accent-ink", palette.ink);
+  target.style.setProperty("--accent-soft", palette.soft);
+  target.style.setProperty("--accent-glow", palette.glow);
+  const intensity = cfg.intensity ?? DEFAULT_CONFIG.intensity;
+  target.style.setProperty("--d", String(0.4 + intensity * 0.12));
+  applyShadowTokens(target, colorScheme);
+  const r = cfg.radius ?? DEFAULT_CONFIG.radius;
+  target.style.setProperty("--r-xs", `${Math.max(4, r - 16)}px`);
+  target.style.setProperty("--r-sm", `${Math.max(6, r - 12)}px`);
+  target.style.setProperty("--r-md", `${Math.max(8, r - 6)}px`);
+  target.style.setProperty("--r-lg", `${r}px`);
+  target.style.setProperty("--r-xl", `${r + 10}px`);
+  const font = cfg.font ?? DEFAULT_CONFIG.font;
+  if (typeof font === "string") {
+    const stack = FONT_STACKS[font] ?? font;
+    target.style.setProperty("--font-sans", stack);
+    if (font === "mono") target.style.setProperty("--font-display", FONT_STACKS.mono);
+  } else {
+    if (font.sans) target.style.setProperty("--font-sans", font.sans);
+    if (font.display) target.style.setProperty("--font-display", font.display);
+    if (font.mono) target.style.setProperty("--font-mono", font.mono);
+  }
+  if (cfg.tokens) {
+    const tokenVars = new Set(Object.keys(cfg.tokens).map(toVar));
+    for (const [k, v] of Object.entries(cfg.tokens)) {
+      const variable = toVar(k);
+      const semanticAlias = LEGACY_SHADOW_TOKEN_ALIASES[variable];
+      if (semanticAlias && !tokenVars.has(semanticAlias)) {
+        target.style.setProperty(semanticAlias, v);
+      }
+      target.style.setProperty(variable, v);
+    }
+  }
+}
+var ThemeCtx = React.createContext(null);
+function useTheme() {
+  const ctx = React.useContext(ThemeCtx);
+  if (!ctx) {
+    throw new Error(
+      "useTheme() must be used inside <ThemeProvider>. Wrap your app (or a subtree) with <ThemeProvider>."
+    );
+  }
+  return ctx;
+}
+function useThemeOptional() {
+  return React.useContext(ThemeCtx);
+}
+function loadPersisted(key) {
+  if (!key || !isBrowser) return null;
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const persisted = JSON.parse(raw);
+    if (isTransientThemeMode(persisted.mode)) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    return persisted;
+  } catch {
+    return null;
+  }
+}
+function persist(key, cfg) {
+  if (!key || !isBrowser) return;
+  if (isTransientThemeMode(cfg.mode)) return;
+  try {
+    localStorage.setItem(key, JSON.stringify(cfg));
+  } catch {
+  }
+}
+var ThemeProvider = (props) => {
+  const {
+    children,
+    target = "root",
+    as: Tag = "div",
+    className,
+    style,
+    storageKey,
+    onChange,
+    ...configProps
+  } = props;
+  const initialConfig = React.useMemo(() => {
+    const applyExplicitProps = (base) => ({
+      ...base,
+      ...configProps.colorScheme !== void 0 ? { colorScheme: configProps.colorScheme } : null,
+      ...configProps.accent !== void 0 ? { accent: configProps.accent } : null,
+      ...configProps.density !== void 0 ? { density: configProps.density } : null,
+      ...configProps.intensity != null ? { intensity: configProps.intensity } : null,
+      ...configProps.radius != null ? { radius: configProps.radius } : null,
+      ...configProps.font !== void 0 ? { font: configProps.font } : null,
+      ...configProps.tokens !== void 0 ? { tokens: configProps.tokens } : null,
+      ...configProps.themes !== void 0 ? { themes: configProps.themes } : null
+    });
+    const fromProps = {
+      mode: configProps.mode ?? DEFAULT_CONFIG.mode,
+      colorScheme: configProps.colorScheme,
+      accent: configProps.accent ?? DEFAULT_CONFIG.accent,
+      density: configProps.density ?? DEFAULT_CONFIG.density,
+      intensity: configProps.intensity ?? DEFAULT_CONFIG.intensity,
+      radius: configProps.radius ?? DEFAULT_CONFIG.radius,
+      font: configProps.font ?? DEFAULT_CONFIG.font,
+      tokens: configProps.tokens ?? {},
+      themes: configProps.themes ?? DEFAULT_CONFIG.themes
+    };
+    const persisted = loadPersisted(storageKey);
+    const seeded = applyThemePreset(fromProps, fromProps.mode ?? DEFAULT_CONFIG.mode);
+    const withExplicitProps = applyExplicitProps(seeded);
+    if (!persisted) return withExplicitProps;
+    let persistedForMerge = persisted;
+    if (configProps.themes !== void 0) {
+      const { themes: _persistedThemes, ...rest } = persisted;
+      persistedForMerge = rest;
+    }
+    const persistedMode = persistedForMerge.mode ?? withExplicitProps.mode ?? DEFAULT_CONFIG.mode;
+    const withPersisted = {
+      ...applyThemePreset({ ...withExplicitProps, mode: persistedMode }, persistedMode),
+      ...persistedForMerge,
+      ...configProps.themes !== void 0 ? { themes: configProps.themes } : null
+    };
+    const withControlledThemePreset = configProps.themes !== void 0 && !isBuiltInThemeMode(persistedMode) ? applyThemePreset(withPersisted, persistedMode) : withPersisted;
+    return applyExplicitProps(withControlledThemePreset);
+  }, []);
+  const [config, setConfig] = React.useState(initialConfig);
+  const previousPropsRef = React.useRef({
+    mode: configProps.mode,
+    colorScheme: configProps.colorScheme,
+    accent: configProps.accent,
+    density: configProps.density,
+    intensity: configProps.intensity,
+    radius: configProps.radius,
+    font: configProps.font,
+    tokens: configProps.tokens,
+    themes: configProps.themes
+  });
+  React.useEffect(() => {
+    const previous = previousPropsRef.current;
+    const changedProps = {};
+    const assignIfChanged = (key, value2) => {
+      if (value2 !== previous[key]) changedProps[key] = value2;
+    };
+    assignIfChanged("mode", configProps.mode);
+    assignIfChanged("colorScheme", configProps.colorScheme);
+    assignIfChanged("accent", configProps.accent);
+    assignIfChanged("density", configProps.density);
+    assignIfChanged("intensity", configProps.intensity);
+    assignIfChanged("radius", configProps.radius);
+    assignIfChanged("font", configProps.font);
+    assignIfChanged("tokens", configProps.tokens);
+    assignIfChanged("themes", configProps.themes);
+    previousPropsRef.current = {
+      mode: configProps.mode,
+      colorScheme: configProps.colorScheme,
+      accent: configProps.accent,
+      density: configProps.density,
+      intensity: configProps.intensity,
+      radius: configProps.radius,
+      font: configProps.font,
+      tokens: configProps.tokens,
+      themes: configProps.themes
+    };
+    if (Object.keys(changedProps).length === 0) return;
+    setConfig((c) => {
+      const base = {
+        ...c,
+        ...Object.prototype.hasOwnProperty.call(changedProps, "themes") ? { themes: configProps.themes ?? DEFAULT_CONFIG.themes } : null
+      };
+      const mode = Object.prototype.hasOwnProperty.call(changedProps, "mode") ? configProps.mode ?? DEFAULT_CONFIG.mode : c.mode ?? DEFAULT_CONFIG.mode;
+      const shouldApplyPreset = Object.prototype.hasOwnProperty.call(changedProps, "mode") || Object.prototype.hasOwnProperty.call(changedProps, "themes") && !isBuiltInThemeMode(mode);
+      const shouldUseProp = (key) => Object.prototype.hasOwnProperty.call(changedProps, key) || configProps[key] !== void 0;
+      const nextFromMode = shouldApplyPreset ? applyThemePreset(base, mode) : base;
+      const next = {
+        ...nextFromMode,
+        mode,
+        ...shouldUseProp("colorScheme") ? { colorScheme: configProps.colorScheme } : null,
+        ...shouldUseProp("accent") ? { accent: configProps.accent } : null,
+        ...shouldUseProp("density") ? { density: configProps.density } : null,
+        ...shouldUseProp("intensity") ? { intensity: configProps.intensity } : null,
+        ...shouldUseProp("radius") ? { radius: configProps.radius } : null,
+        ...shouldUseProp("font") ? { font: configProps.font } : null,
+        ...shouldUseProp("tokens") ? { tokens: configProps.tokens } : null
+      };
+      if (next.mode === c.mode && next.colorScheme === c.colorScheme && next.accent === c.accent && next.density === c.density && next.intensity === c.intensity && next.radius === c.radius && next.font === c.font && next.tokens === c.tokens && next.themes === c.themes) {
+        return c;
+      }
+      return next;
+    });
+  }, [
+    configProps.mode,
+    configProps.colorScheme,
+    configProps.accent,
+    configProps.density,
+    configProps.intensity,
+    configProps.radius,
+    configProps.font,
+    configProps.tokens,
+    configProps.themes
+  ]);
+  const [systemDark, setSystemDark] = React.useState(
+    () => isBrowser && window.matchMedia("(prefers-color-scheme: dark)").matches
+  );
+  React.useEffect(() => {
+    if (!isBrowser) return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => setSystemDark(e.matches);
+    mql.addEventListener?.("change", handler);
+    return () => mql.removeEventListener?.("change", handler);
+  }, []);
+  const effectiveConfig = React.useMemo(() => resolveThemeConfig(config), [config]);
+  const activeTheme = React.useMemo(
+    () => getThemePreset(effectiveConfig.themes, effectiveConfig.mode) ?? null,
+    [effectiveConfig.mode, effectiveConfig.themes]
+  );
+  const colorScheme = effectiveConfig.mode === "system" ? systemDark ? "dark" : "light" : isThemeBaseMode(effectiveConfig.mode) ? effectiveConfig.mode : effectiveConfig.colorScheme ?? activeTheme?.base ?? DEFAULT_CONFIG.colorScheme;
+  const resolvedMode = effectiveConfig.mode === "system" ? colorScheme : effectiveConfig.mode;
+  const { key: accentKey, palette: accentPalette } = React.useMemo(
+    () => normalizeAccentInput(effectiveConfig.accent, colorScheme),
+    [effectiveConfig.accent, colorScheme]
+  );
+  const scopeRef = React.useRef(null);
+  const appliedTokenKeysRef = React.useRef(/* @__PURE__ */ new Set());
+  React.useEffect(() => {
+    if (!isBrowser) return;
+    const el = target === "root" ? document.documentElement : scopeRef.current;
+    if (!el) return;
+    const nextTokenKeys = new Set(Object.keys(effectiveConfig.tokens));
+    for (const key of appliedTokenKeysRef.current) {
+      if (!nextTokenKeys.has(key)) el.style.removeProperty(toVar(key));
+    }
+    applyTheme(el, { ...effectiveConfig, colorScheme });
+    appliedTokenKeysRef.current = nextTokenKeys;
+    persist(storageKey, config);
+  }, [config, effectiveConfig, colorScheme, target, storageKey]);
+  const value = React.useMemo(() => {
+    const patch = (p) => setConfig((c) => ({ ...c, ...p }));
+    return {
+      mode: effectiveConfig.mode,
+      resolvedMode,
+      colorScheme,
+      accent: accentKey,
+      accentPalette,
+      density: effectiveConfig.density,
+      intensity: effectiveConfig.intensity,
+      radius: effectiveConfig.radius,
+      font: effectiveConfig.font,
+      tokens: effectiveConfig.tokens,
+      themes: effectiveConfig.themes,
+      activeTheme,
+      setMode: (m) => setConfig((c) => applyThemePreset(c, m)),
+      toggleMode: () => setConfig((c) => ({
+        ...c,
+        mode: c.mode === "dark" ? "light" : "dark"
+      })),
+      setAccent: (a) => patch({ accent: a }),
+      setDensity: (d) => patch({ density: d }),
+      setIntensity: (n) => patch({ intensity: n }),
+      setRadius: (n) => patch({ radius: n }),
+      setFont: (f) => patch({ font: f }),
+      setTokens: (t) => patch({ tokens: t }),
+      setThemes: (t) => patch({ themes: t }),
+      update: patch,
+      reset: () => setConfig(initialConfig)
+    };
+  }, [effectiveConfig, resolvedMode, colorScheme, accentKey, accentPalette, activeTheme, initialConfig]);
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  React.useEffect(() => {
+    onChangeRef.current?.(value);
+  }, [value]);
+  if (target === "scope") {
+    const Component = Tag;
+    return /* @__PURE__ */ jsx(ThemeCtx.Provider, { value, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref: scopeRef,
+        className,
+        style: {
+          color: "var(--fg)",
+          fontFamily: "var(--font-sans)",
+          ...style
+        },
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(ThemeCtx.Provider, { value, children });
+};
+
+export { ACCENT_PRESETS, ACCENT_PRESETS_DARK, FONT_STACKS, ThemeProvider, applyTheme, normalizeAccentInput, resolveThemeColorScheme, resolveThemeMode, useTheme, useThemeOptional };

package/dist/{chunk-KLEKKZ73.js → chunk-7ZNGHWVS.js}

@@ -1,4 +1,4 @@
-import './tokens-BIIUTPKN.css';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
 import './Splitter-DHNOY4NC.css';
 import * as React from 'react';

package/dist/{chunk-4WTU5P3O.cjs → chunk-ACQSRMLF.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkTJII7BQ2_cjs = require('./chunk-TJII7BQ2.cjs');
-require('./tokens-BIIUTPKN.css');
+var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Calendar-LHZELUDL.css');
+require('./Calendar-RUTPKREW.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -66,7 +66,7 @@ var Calendar = React__namespace.forwardRef(({
           className: "btn icon sm ghost",
           onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)),
           "aria-label": "Previous month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevLeft", size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunk6LARTGLP_cjs.Icon, { name: "chevLeft", size: 14 })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "calendar-title", children: [
@@ -82,7 +82,7 @@ var Calendar = React__namespace.forwardRef(({
           className: "btn icon sm ghost",
           onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)),
           "aria-label": "Next month",
-          children: /* @__PURE__ */ jsxRuntime.jsx(chunkTJII7BQ2_cjs.Icon, { name: "chevRight", size: 14 })
+          children: /* @__PURE__ */ jsxRuntime.jsx(chunk6LARTGLP_cjs.Icon, { name: "chevRight", size: 14 })
         }
       )
     ] }),

package/dist/{chunk-FFZ6OMZI.js → chunk-AJH2O4WC.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
-import './tokens-BIIUTPKN.css';
+import { Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Collapse-66U5YJFY.css';
+import './Collapse-UNBHEPYP.css';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-CXWEOAVU.js → chunk-BCFCSVGJ.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
-import './tokens-BIIUTPKN.css';
+import { Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Typography-NKPWTJCV.css';
+import './Typography-GQNIJ4XD.css';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-NTS5L4NQ.cjs → chunk-BJ6WUVEG.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkQKQHZIF3_cjs = require('./chunk-QKQHZIF3.cjs');
-require('./tokens-BIIUTPKN.css');
+var chunkSG42F5VB_cjs = require('./chunk-SG42F5VB.cjs');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Timeline-3ZHOHPXT.css');
+require('./Timeline-ZIM7QFQC.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -96,7 +96,7 @@ var TimelineItem = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-label", children: item.label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "timeline-item-head", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkQKQHZIF3_cjs.Spin, { size: 14 })) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `timeline-item-dot ${color} ${isPending ? "pending" : ""}`, children: item.dot ?? (isPending && /* @__PURE__ */ jsxRuntime.jsx(chunkSG42F5VB_cjs.Spin, { size: 14 })) }),
       !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-tail" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "timeline-item-content", children: item.children })

package/dist/{chunk-S3VXH5L4.cjs → chunk-C24W6PTJ.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-require('./tokens-BIIUTPKN.css');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Form-5GRVZNDO.css');
+require('./Form-NGCQWTMZ.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 

package/dist/{chunk-GMN74OEY.cjs → chunk-CBKJXKVI.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-require('./tokens-BIIUTPKN.css');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Card-6RMVIHWX.css');
+require('./Card-MA6SV7D5.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 

package/dist/{chunk-33NCTOEB.js → chunk-CEZ2DR4R.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
-import './tokens-BIIUTPKN.css';
+import { Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Calendar-LHZELUDL.css';
+import './Calendar-RUTPKREW.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-JD7A6VM3.js → chunk-CNGKJYGZ.js}

@@ -1,7 +1,7 @@
-import { Icon } from './chunk-OF3SGLZY.js';
-import './tokens-BIIUTPKN.css';
+import { renderIconSlot } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Button-SDQD25AG.css';
+import './Button-TUMZUQLI.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -42,12 +42,12 @@ var Button = React.forwardRef(
         className: cls,
         disabled: disabled || loading,
         title: tip,
-        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? icon : void 0),
+        "aria-label": ariaLabel ?? (onlyIcon ? tip ?? (typeof icon === "string" ? icon : void 0) : void 0),
         ...rest,
         children: [
-          loading ? /* @__PURE__ */ jsx("span", { className: "spinner", "aria-hidden": true }) : icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: 15 }) : null,
+          loading ? /* @__PURE__ */ jsx("span", { className: "spinner", "aria-hidden": true }) : renderIconSlot(icon, { size: 15, className: "btn-icon-slot" }),
           content,
-          trailingIcon && /* @__PURE__ */ jsx(Icon, { name: trailingIcon, size: 15 })
+          renderIconSlot(trailingIcon, { size: 15, className: "btn-icon-slot" })
         ]
       }
     );

package/dist/{chunk-TEG7NJHS.cjs → chunk-D5PCIVID.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunk6LZ54NPO_cjs = require('./chunk-6LZ54NPO.cjs');
-require('./tokens-BIIUTPKN.css');
+var chunkVAXWWJJP_cjs = require('./chunk-VAXWWJJP.cjs');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./CommandPalette-T45DBMPY.css');
+require('./CommandPalette-RTKWNH2D.css');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -149,7 +149,7 @@ var CommandPalette = React__namespace.forwardRef(({
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cmdp-search", children: /* @__PURE__ */ jsxRuntime.jsx(
-            chunk6LZ54NPO_cjs.Input,
+            chunkVAXWWJJP_cjs.Input,
             {
               ref: inputRef,
               size: "lg",