@fangxinyan/lumina 0.6.3 → 0.6.5

package/dist/{chunk-BVQ77VRY.js → chunk-LI4XJTEA.js}

@@ -1,6 +1,6 @@
-import { Input } from './chunk-UKS23N3L.js';
-import { Icon } from './chunk-47VG2P34.js';
-import './tokens-BIIUTPKN.css';
+import { Input } from './chunk-XVP7IKLZ.js';
+import { Icon } from './chunk-YT5NLCRC.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
 import './InputNumber-VXQIWLQC.css';
 import * as React from 'react';

package/dist/{chunk-45VJGBGN.js → chunk-LQLOOUS3.js}

@@ -1,6 +1,6 @@
-import './tokens-BIIUTPKN.css';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Empty-DC2LPORC.css';
+import './Empty-CZTRZMZQ.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-PL6DRFUO.cjs → chunk-MOMLQP7B.cjs}

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

package/dist/{chunk-OF7JIYBY.cjs → chunk-MYHBC3HA.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
 var chunkYB3IWIOJ_cjs = require('./chunk-YB3IWIOJ.cjs');
-require('./tokens-BIIUTPKN.css');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./ColorPicker-SDDQGHCM.css');
+require('./ColorPicker-LPG6QPYF.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');

package/dist/{chunk-LKK2AA7W.js → chunk-MYRLCN6V.js}

@@ -1,6 +1,6 @@
-import './tokens-BIIUTPKN.css';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './Divider-OEE4Q2KS.css';
+import './Divider-RPQCVH3J.css';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ZKE73UQF.cjs → chunk-N2BTMKF2.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkV272XR3F_cjs = require('./chunk-V272XR3F.cjs');
-require('./tokens-BIIUTPKN.css');
+var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
-require('./Message-2MZ3LFPU.css');
+require('./Message-H222YGR6.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var client = require('react-dom/client');
@@ -117,12 +117,12 @@ var MessageContainer = React__namespace.forwardRef(({ placement = "top-right", c
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: `message-container ${placement} ${className}`, ...rest, children: list.map((t) => {
       const iconName = t.type === "success" ? "check2" : t.type === "warning" || t.type === "error" ? "alert" : "info";
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `message ${t.type}`, role: "status", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: iconName, size: 18, className: "message-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunk6LARTGLP_cjs.Icon, { name: iconName, size: 18, className: "message-icon" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "message-body", children: [
           t.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-title", children: t.title }),
           t.content && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "message-content", children: t.content })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "message-close", onClick: () => message.dismiss(t.key ?? t.id), "aria-label": "Dismiss", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV272XR3F_cjs.Icon, { name: "x", size: 14 }) })
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "message-close", onClick: () => message.dismiss(t.key ?? t.id), "aria-label": "Dismiss", children: /* @__PURE__ */ jsxRuntime.jsx(chunk6LARTGLP_cjs.Icon, { name: "x", size: 14 }) })
       ] }, t.id);
     }) }),
     document.body

package/dist/{chunk-6ZXQJRAT.cjs → chunk-N2COYOXE.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-require('./tokens-BIIUTPKN.css');
+require('./tokens-EF34LSWI.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -65,6 +65,10 @@ function isThemeBaseMode(mode) {
 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];
@@ -152,6 +156,63 @@ function normalizeAccentInput(input, colorScheme) {
 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);
@@ -171,6 +232,7 @@ function applyTheme(target, config) {
   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`);
@@ -188,8 +250,14 @@ function applyTheme(target, config) {
     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)) {
-      target.style.setProperty(toVar(k), v);
+      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);
     }
   }
 }
@@ -211,16 +279,21 @@ function loadPersisted(key) {
   try {
     const raw = localStorage.getItem(key);
     if (!raw) return null;
-    return JSON.parse(raw);
+    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 {
-    const { themes: _themes, ...persisted } = cfg;
-    localStorage.setItem(key, JSON.stringify(persisted));
+    localStorage.setItem(key, JSON.stringify(cfg));
   } catch {
   }
 }
@@ -236,6 +309,17 @@ var ThemeProvider = (props) => {
     ...configProps
   } = props;
   const initialConfig = React__namespace.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,
@@ -249,42 +333,80 @@ var ThemeProvider = (props) => {
     };
     const persisted = loadPersisted(storageKey);
     const seeded = applyThemePreset(fromProps, fromProps.mode ?? DEFAULT_CONFIG.mode);
-    const withExplicitProps = {
-      ...seeded,
-      ...configProps.colorScheme ? { colorScheme: configProps.colorScheme } : null,
-      ...configProps.accent ? { accent: configProps.accent } : null,
-      ...configProps.density ? { density: configProps.density } : null,
-      ...configProps.intensity != null ? { intensity: configProps.intensity } : null,
-      ...configProps.radius != null ? { radius: configProps.radius } : null,
-      ...configProps.font ? { font: configProps.font } : null,
-      ...configProps.tokens ? { tokens: configProps.tokens } : null
-    };
+    const withExplicitProps = applyExplicitProps(seeded);
     if (!persisted) return withExplicitProps;
-    const persistedMode = persisted.mode ?? withExplicitProps.mode ?? DEFAULT_CONFIG.mode;
-    return {
+    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),
-      ...persisted
+      ...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__namespace.useState(initialConfig);
+  const previousPropsRef = React__namespace.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__namespace.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,
-        themes: configProps.themes ?? c.themes
+        ...Object.prototype.hasOwnProperty.call(changedProps, "themes") ? { themes: configProps.themes ?? DEFAULT_CONFIG.themes } : null
       };
-      const mode = configProps.mode ?? c.mode ?? DEFAULT_CONFIG.mode;
-      const nextFromMode = configProps.mode ? applyThemePreset(base, mode) : base;
+      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,
-        colorScheme: configProps.colorScheme ?? nextFromMode.colorScheme,
-        accent: configProps.accent ?? nextFromMode.accent,
-        density: configProps.density ?? nextFromMode.density,
-        intensity: configProps.intensity ?? nextFromMode.intensity,
-        radius: configProps.radius ?? nextFromMode.radius,
-        font: configProps.font ?? nextFromMode.font,
-        tokens: configProps.tokens ?? nextFromMode.tokens
+        ...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;
@@ -380,7 +502,11 @@ var ThemeProvider = (props) => {
       {
         ref: scopeRef,
         className,
-        style,
+        style: {
+          color: "var(--fg)",
+          fontFamily: "var(--font-sans)",
+          ...style
+        },
         children
       }
     ) });

package/dist/{chunk-2TL37AP5.cjs → chunk-N3OLFKV5.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-require('./tokens-BIIUTPKN.css');
+require('./tokens-EF34LSWI.css');
 require('./shared-NJHRNLRH.css');
 require('./Splitter-DHNOY4NC.css');
 var React = require('react');

package/dist/{chunk-5JSDQ6QQ.cjs → chunk-NDO22RER.cjs}

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

package/dist/{chunk-ME5BZ2WA.js → chunk-NE7IUGMK.js}

@@ -1,7 +1,7 @@
-import { Input } from './chunk-UKS23N3L.js';
-import './tokens-BIIUTPKN.css';
+import { Input } from './chunk-XVP7IKLZ.js';
+import './tokens-EF34LSWI.css';
 import './shared-NJHRNLRH.css';
-import './CommandPalette-T45DBMPY.css';
+import './CommandPalette-RTKWNH2D.css';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-F6RYCBQG.js → chunk-NFXHIO3G.js}

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