@fangxinyan/lumina 0.6.7 → 0.6.9

package/dist/{chunk-NJCHFXGC.js → chunk-ZTIECMCF.js}

@@ -1,15 +1,15 @@
-import { Slider } from './chunk-HU7T64Y3.js';
+import { Slider } from './chunk-Q5KHJ32P.js';
 import { pickLuminaThemePresets } from './chunk-6SPMHY54.js';
-import { useTheme, ACCENT_PRESETS, FONT_STACKS } from './chunk-7NZ2A4MA.js';
-import { Switch } from './chunk-YJEXAO2I.js';
-import { RadioGroup } from './chunk-HFUHQUPQ.js';
-import { ColorPicker } from './chunk-GZCU6HXD.js';
-import { Input } from './chunk-XVP7IKLZ.js';
-import { Button } from './chunk-CNGKJYGZ.js';
-import { Icon } from './chunk-YT5NLCRC.js';
-import './tokens-EF34LSWI.css';
+import { useTheme, ACCENT_PRESETS, FONT_STACKS } from './chunk-7ZCTEIOW.js';
+import { Switch } from './chunk-6VSNO7IH.js';
+import { RadioGroup } from './chunk-P434GBHP.js';
+import { ColorPicker } from './chunk-AHS2AFTD.js';
+import { Input } from './chunk-QDXBI3PV.js';
+import { Button } from './chunk-VRA4CQCJ.js';
+import { Icon } from './chunk-SNX4FZYB.js';
+import './tokens-RGFJKRC7.css';
 import './shared-NJHRNLRH.css';
-import './ThemePanel-76LB3YA5.css';
+import './ThemePanel-TEHB2JCQ.css';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -50,7 +50,8 @@ var DEFAULT_SECTIONS = [
   "shadow",
   "radius",
   "font",
-  "density"
+  "density",
+  "advanced"
 ];
 var DEFAULT_MODE_OPTIONS = [
   { key: "light", label: "\u6D45\u8272" },
@@ -125,6 +126,10 @@ function createThemeKey(label, themes, prefix) {
   }
   return key;
 }
+function createSaveAsLabel(label, fallback) {
+  const base = label.trim() || fallback.trim() || "\u81EA\u5B9A\u4E49\u4E3B\u9898";
+  return `${base} \u526F\u672C`;
+}
 var clampColor = (value) => Math.min(1, Math.max(0, value));
 function normalizeHexColor(input) {
   const value = input.trim().replace(/^#/, "");
@@ -231,6 +236,12 @@ function defaultBaseTokens(base) {
   const tokens = THEME_PANEL_DEFAULT_THEME_PRESETS[base].tokens;
   return { ...tokens };
 }
+function mergeBaseTokens(base, tokens) {
+  return {
+    ...defaultBaseTokens(base),
+    ...tokens ?? {}
+  };
+}
 function createDraftSurfaceTokens(surface, base, sourceSurface, sourceTokens) {
   if (sameHexColor(surface, sourceSurface)) return { ...sourceTokens };
   const current = hexToRgbColor(surface);
@@ -306,6 +317,8 @@ var ThemePanel = React.forwardRef(
     onCreateTheme,
     allowDeleteTheme = true,
     onDeleteTheme,
+    allowUpdateTheme = true,
+    onUpdateTheme,
     showReset = true,
     compact,
     className = "",
@@ -318,6 +331,9 @@ var ThemePanel = React.forwardRef(
     updateThemeRef.current = theme.update;
     const [customAccent, setCustomAccent] = React.useState(defaultCustomAccent);
     const [createdThemeMeta, setCreatedThemeMeta] = React.useState({});
+    const [advancedOpen, setAdvancedOpen] = React.useState(false);
+    const [saveAsName, setSaveAsName] = React.useState("");
+    const [saveAsDescription, setSaveAsDescription] = React.useState("");
     const [isCreatingTheme, setIsCreatingTheme] = React.useState(false);
     const [previewDraft, setPreviewDraft] = React.useState(true);
     const [draftName, setDraftName] = React.useState(defaultCreateThemeName);
@@ -344,6 +360,7 @@ var ThemePanel = React.forwardRef(
     const [draftFont, setDraftFont] = React.useState("sf");
     const [createMode, setCreateMode] = React.useState("simple");
     const [advancedFontMode, setAdvancedFontMode] = React.useState("preset");
+    const [liveAdvancedFontMode, setLiveAdvancedFontMode] = React.useState("preset");
     const [draftBasePresets, setDraftBasePresets] = React.useState(() => ({
       light: THEME_PANEL_DEFAULT_THEME_PRESETS.light,
       dark: THEME_PANEL_DEFAULT_THEME_PRESETS.dark
@@ -353,6 +370,9 @@ var ThemePanel = React.forwardRef(
       () => /* @__PURE__ */ new Set(["system", ...THEME_PANEL_DEFAULT_PRESET_OPTIONS.map((option) => String(option.key))]),
       []
     );
+    React.useEffect(() => {
+      setLiveAdvancedFontMode(toFontKey(theme.font) === theme.font ? "preset" : "custom");
+    }, [theme.font]);
     const setRootRef = React.useCallback(
       (node) => {
         rootRef.current = node;
@@ -391,6 +411,17 @@ var ThemePanel = React.forwardRef(
       }));
       return [...builtIns, ...customOptions];
     }, [createdThemeMeta, presetOptions, theme.themes]);
+    const activePresetOption = React.useMemo(
+      () => resolvedPresetOptions.find((option) => String(option.key) === modeValue),
+      [modeValue, resolvedPresetOptions]
+    );
+    const liveAdvancedTokens = React.useMemo(
+      () => mergeBaseTokens(theme.colorScheme, theme.tokens),
+      [theme.colorScheme, theme.tokens]
+    );
+    const isCurrentSavedTheme = !protectedPresetKeys.has(modeValue) && Object.prototype.hasOwnProperty.call(theme.themes, modeValue);
+    const canUpdateCurrentTheme = allowUpdateTheme && isCurrentSavedTheme;
+    const canSaveCurrentThemeAsNew = allowCreateTheme;
     React.useEffect(() => {
       if (!isCreatingTheme || !previewDraft) return;
       updateThemeRef.current({
@@ -490,6 +521,123 @@ var ThemePanel = React.forwardRef(
         preset
       });
     };
+    const getActiveThemeMeta = () => {
+      const preset = theme.themes[modeValue] ?? theme.activeTheme ?? activePresetOption?.preset;
+      const fallbackLabel = preset?.label ?? fallbackPresetLabel(modeValue);
+      const fallbackDescription = preset?.description ?? (theme.colorScheme === "dark" ? "\u6DF1\u8272" : "\u6D45\u8272");
+      return {
+        key: modeValue,
+        label: nodeToText(activePresetOption?.label, fallbackLabel),
+        description: nodeToText(activePresetOption?.description, fallbackDescription)
+      };
+    };
+    const getAdvancedThemeName = () => {
+      const label = getActiveThemeMeta().label;
+      return isCurrentSavedTheme ? label || defaultCreateThemeName : createSaveAsLabel(label, defaultCreateThemeName);
+    };
+    const getAdvancedThemeDescription = () => {
+      const description2 = getActiveThemeMeta().description;
+      if (isCurrentSavedTheme) return description2;
+      return theme.colorScheme === "dark" ? "\u53E6\u5B58\u6697" : "\u53E6\u5B58\u4EAE";
+    };
+    const suggestedSaveAsName = getAdvancedThemeName();
+    const suggestedSaveAsDescription = getAdvancedThemeDescription();
+    React.useEffect(() => {
+      if (!advancedOpen) return;
+      setSaveAsName(getAdvancedThemeName());
+      setSaveAsDescription(getAdvancedThemeDescription());
+    }, [
+      activePresetOption,
+      advancedOpen,
+      defaultCreateThemeName,
+      isCurrentSavedTheme,
+      modeValue,
+      theme.activeTheme,
+      theme.colorScheme,
+      theme.themes
+    ]);
+    const createPresetFromCurrentTheme = (meta, basePreset, tokens = theme.tokens) => ({
+      ...basePreset,
+      label: meta.label,
+      description: meta.description,
+      base: theme.colorScheme,
+      accent: theme.accent === "custom" ? { ...theme.accentPalette } : theme.accent,
+      density: theme.density,
+      intensity: theme.intensity,
+      radius: theme.radius,
+      font: theme.font,
+      tokens: { ...tokens }
+    });
+    const updateLiveBase = (base) => {
+      clearCreateState();
+      if (theme.mode === "light" || theme.mode === "dark") {
+        applyMode(base);
+        return;
+      }
+      theme.update({ colorScheme: base });
+    };
+    const updateLiveToken = (key, value) => {
+      clearCreateState();
+      theme.setTokens({ ...theme.tokens, [key]: value });
+    };
+    const updateLiveAccentSlot = (key, value) => {
+      clearCreateState();
+      const nextPalette = { ...theme.accentPalette, [key]: value };
+      theme.setAccent(nextPalette);
+      if (key === "accent") setCustomAccent(cssColorToHex(value, customAccent));
+    };
+    const saveCurrentThemeUpdate = () => {
+      if (!canUpdateCurrentTheme) return;
+      const key = modeValue;
+      const previousPreset = theme.themes[key];
+      const currentMeta = getActiveThemeMeta();
+      const meta = {
+        ...currentMeta,
+        label: saveAsName.trim() || currentMeta.label || defaultCreateThemeName || fallbackPresetLabel(key),
+        description: saveAsDescription.trim()
+      };
+      const preset = createPresetFromCurrentTheme(meta, previousPreset);
+      const presetOption = { key, label: meta.label, description: meta.description, preset };
+      const nextThemes = { ...theme.themes, [key]: preset };
+      theme.update({
+        themes: nextThemes,
+        mode: key,
+        colorScheme: preset.base,
+        accent: preset.accent,
+        density: preset.density,
+        intensity: preset.intensity,
+        radius: preset.radius,
+        font: preset.font,
+        tokens: preset.tokens
+      });
+      setCreatedThemeMeta((current) => ({ ...current, [key]: meta }));
+      onUpdateTheme?.({ ...meta, preset, previousPreset, presetOption });
+    };
+    const saveCurrentThemeAsNew = () => {
+      if (!canSaveCurrentThemeAsNew) return;
+      clearCreateState();
+      const sourceMeta = getActiveThemeMeta();
+      const label = saveAsName.trim() || (isCurrentSavedTheme ? sourceMeta.label || defaultCreateThemeName : createSaveAsLabel(sourceMeta.label, defaultCreateThemeName));
+      const description2 = saveAsDescription.trim();
+      const key = createThemeKey(label, theme.themes, createThemeKeyPrefix);
+      const meta = { key, label, description: description2 };
+      const preset = createPresetFromCurrentTheme(meta, void 0, liveAdvancedTokens);
+      const presetOption = { key, label, description: description2, preset };
+      const nextThemes = { ...theme.themes, [String(key)]: preset };
+      setCreatedThemeMeta((current) => ({ ...current, [String(key)]: meta }));
+      theme.update({
+        themes: nextThemes,
+        mode: key,
+        colorScheme: preset.base,
+        accent: preset.accent,
+        density: preset.density,
+        intensity: preset.intensity,
+        radius: preset.radius,
+        font: preset.font,
+        tokens: preset.tokens
+      });
+      onCreateTheme?.({ ...meta, preset, presetOption });
+    };
     const beginCreateTheme = () => {
       const root = rootRef.current;
       const base = theme.colorScheme;
@@ -543,6 +691,7 @@ var ThemePanel = React.forwardRef(
       setCreateMode("simple");
       setCustomAccent(accent);
       setPreviewDraft(true);
+      setAdvancedOpen(false);
       setIsCreatingTheme(true);
     };
     const cancelCreateTheme = () => {
@@ -628,6 +777,192 @@ var ThemePanel = React.forwardRef(
     const updateThemeToken = (key, value) => {
       theme.setTokens({ ...theme.tokens, [key]: value });
     };
+    const renderAdvancedEditor = ({
+      font,
+      fontMode,
+      tokens,
+      accentPalette,
+      surfaceFallback,
+      accentFallback,
+      onFontModeChange,
+      onFontChange,
+      onTokenChange,
+      onAccentSlotChange
+    }) => /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced", children: [
+      /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section compact", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53" }),
+          /* @__PURE__ */ jsx("small", { children: fontMode === "preset" ? "\u9009\u62E9\u5185\u7F6E\u5B57\u4F53" : "\u586B\u5199 CSS font-family" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            className: "theme-panel-create-mode",
+            variant: "segmented",
+            size: "sm",
+            value: fontMode,
+            options: ADVANCED_FONT_MODE_OPTIONS.map((option) => ({
+              value: option.value,
+              label: option.label
+            })),
+            onChange: (value) => {
+              onFontModeChange(value);
+              if (value === "preset") onFontChange(toFontKey(font));
+            }
+          }
+        ),
+        fontMode === "custom" && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53\u6808" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              value: fontConfigToText(font),
+              onValueChange: (value) => onFontChange(value || "system"),
+              placeholder: "CSS font-family"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u8868\u9762 tokens" }),
+          /* @__PURE__ */ jsx("small", { children: "\u5B8C\u6574\u8986\u5199 --bg / --fg" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "theme-panel-token-grid", children: SURFACE_TOKEN_FIELDS.map((field) => /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field", children: [
+          /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
+            /* @__PURE__ */ jsx("span", { children: field.label }),
+            /* @__PURE__ */ jsxs("code", { children: [
+              "--",
+              field.key
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
+            /* @__PURE__ */ jsx(
+              ColorPicker,
+              {
+                className: "theme-panel-token-picker",
+                value: tokenPickerValue(tokens[field.key], surfaceFallback),
+                onChange: (value) => onTokenChange(field.key, value),
+                placement: "left",
+                "aria-label": `\u9009\u62E9 ${field.label}`,
+                children: /* @__PURE__ */ jsx("span", { className: "theme-panel-token-swatch", style: { background: tokens[field.key] } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                size: "sm",
+                value: tokens[field.key] ?? "",
+                onValueChange: (value) => onTokenChange(field.key, value)
+              }
+            )
+          ] })
+        ] }, field.key)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u9634\u5F71\u7CFB\u7EDF" }),
+          /* @__PURE__ */ jsx("small", { children: "\u6697/\u4EAE\u9634\u5F71\u4E0E\u5C42\u7EA7\u7F29\u653E" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "theme-panel-token-grid", children: SHADOW_TOKEN_FIELDS.map(
+          (field) => field.kind === "color" ? /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field", children: [
+            /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
+              /* @__PURE__ */ jsx("span", { children: field.label }),
+              /* @__PURE__ */ jsxs("code", { children: [
+                "--",
+                field.key
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
+              /* @__PURE__ */ jsx(
+                ColorPicker,
+                {
+                  className: "theme-panel-token-picker",
+                  value: tokenPickerValue(tokens[field.key], surfaceFallback),
+                  onChange: (value) => onTokenChange(field.key, value),
+                  placement: "left",
+                  "aria-label": `\u9009\u62E9 ${field.label}`,
+                  children: /* @__PURE__ */ jsx("span", { className: "theme-panel-token-swatch", style: { background: tokens[field.key] } })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  value: tokens[field.key] ?? "",
+                  onValueChange: (value) => onTokenChange(field.key, value)
+                }
+              )
+            ] })
+          ] }, field.key) : /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field scale", children: [
+            /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
+              /* @__PURE__ */ jsx("span", { children: field.label }),
+              /* @__PURE__ */ jsxs("code", { children: [
+                "--",
+                field.key
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-scale", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  value: tokens[field.key] ?? "1",
+                  onValueChange: (value) => onTokenChange(field.key, value || "1")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Slider,
+                {
+                  value: parseScaleToken(tokens[field.key]),
+                  onChange: (value) => onTokenChange(field.key, formatScaleToken(value)),
+                  min: 0.6,
+                  max: field.key === "shadow-float-scale" ? 1.8 : 1.6,
+                  step: 0.05
+                }
+              )
+            ] })
+          ] }, field.key)
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5F3A\u8C03 palette" }),
+          /* @__PURE__ */ jsx("small", { children: "\u5B8C\u6574\u8986\u5199 accent / ink / soft / glow" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "theme-panel-token-grid", children: ACCENT_PALETTE_FIELDS.map((field) => /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field", children: [
+          /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
+            /* @__PURE__ */ jsx("span", { children: field.label }),
+            /* @__PURE__ */ jsxs("code", { children: [
+              "accent.",
+              field.key
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
+            /* @__PURE__ */ jsx(
+              ColorPicker,
+              {
+                className: "theme-panel-token-picker",
+                value: tokenPickerValue(accentPalette[field.key], accentFallback),
+                onChange: (value) => onAccentSlotChange(field.key, value),
+                placement: "left",
+                "aria-label": `\u9009\u62E9 ${field.label}`,
+                children: /* @__PURE__ */ jsx("span", { className: "theme-panel-token-swatch", style: { background: accentPalette[field.key] } })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                size: "sm",
+                value: accentPalette[field.key],
+                onValueChange: (value) => onAccentSlotChange(field.key, value)
+              }
+            )
+          ] })
+        ] }, field.key)) })
+      ] })
+    ] });
     return /* @__PURE__ */ jsxs("div", { ref: setRootRef, className: rootClass, ...rest, children: [
       (title || description) && /* @__PURE__ */ jsxs("div", { className: "theme-panel-head", children: [
         /* @__PURE__ */ jsxs("div", { className: "theme-panel-title", children: [
@@ -812,199 +1147,18 @@ var ThemePanel = React.forwardRef(
               }
             )
           ] }),
-          createMode === "advanced" && /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced", children: [
-            /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section compact", children: [
-              /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53" }),
-                /* @__PURE__ */ jsx("small", { children: advancedFontMode === "preset" ? "\u9009\u62E9\u5185\u7F6E\u5B57\u4F53" : "\u586B\u5199 CSS font-family" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                RadioGroup,
-                {
-                  className: "theme-panel-create-mode",
-                  variant: "segmented",
-                  size: "sm",
-                  value: advancedFontMode,
-                  options: ADVANCED_FONT_MODE_OPTIONS.map((option) => ({
-                    value: option.value,
-                    label: option.label
-                  })),
-                  onChange: (value) => {
-                    setAdvancedFontMode(value);
-                    if (value === "preset") setDraftFont(toFontKey(draftFont));
-                  }
-                }
-              ),
-              advancedFontMode === "custom" && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
-                /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53\u6808" }),
-                /* @__PURE__ */ jsx(
-                  Input,
-                  {
-                    size: "sm",
-                    value: fontConfigToText(draftFont),
-                    onValueChange: (value) => setDraftFont(value || "system"),
-                    placeholder: "CSS font-family"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section", children: [
-              /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsx("span", { children: "\u8868\u9762 tokens" }),
-                /* @__PURE__ */ jsx("small", { children: "\u5B8C\u6574\u8986\u5199 --bg / --fg" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "theme-panel-token-grid", children: SURFACE_TOKEN_FIELDS.map((field) => /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field", children: [
-                /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
-                  /* @__PURE__ */ jsx("span", { children: field.label }),
-                  /* @__PURE__ */ jsxs("code", { children: [
-                    "--",
-                    field.key
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
-                  /* @__PURE__ */ jsx(
-                    ColorPicker,
-                    {
-                      className: "theme-panel-token-picker",
-                      value: tokenPickerValue(draftTokens[field.key], draftSurface),
-                      onChange: (value) => updateDraftToken(field.key, value),
-                      placement: "left",
-                      "aria-label": `\u9009\u62E9 ${field.label}`,
-                      children: /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "theme-panel-token-swatch",
-                          style: { background: draftTokens[field.key] }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      size: "sm",
-                      value: draftTokens[field.key] ?? "",
-                      onValueChange: (value) => updateDraftToken(field.key, value)
-                    }
-                  )
-                ] })
-              ] }, field.key)) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section", children: [
-              /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsx("span", { children: "\u9634\u5F71\u7CFB\u7EDF" }),
-                /* @__PURE__ */ jsx("small", { children: "\u6697/\u4EAE\u9634\u5F71\u4E0E\u5C42\u7EA7\u7F29\u653E" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "theme-panel-token-grid", children: SHADOW_TOKEN_FIELDS.map(
-                (field) => field.kind === "color" ? /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
-                    /* @__PURE__ */ jsx("span", { children: field.label }),
-                    /* @__PURE__ */ jsxs("code", { children: [
-                      "--",
-                      field.key
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
-                    /* @__PURE__ */ jsx(
-                      ColorPicker,
-                      {
-                        className: "theme-panel-token-picker",
-                        value: tokenPickerValue(draftTokens[field.key], draftSurface),
-                        onChange: (value) => updateDraftToken(field.key, value),
-                        placement: "left",
-                        "aria-label": `\u9009\u62E9 ${field.label}`,
-                        children: /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: "theme-panel-token-swatch",
-                            style: { background: draftTokens[field.key] }
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        size: "sm",
-                        value: draftTokens[field.key] ?? "",
-                        onValueChange: (value) => updateDraftToken(field.key, value)
-                      }
-                    )
-                  ] })
-                ] }, field.key) : /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field scale", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
-                    /* @__PURE__ */ jsx("span", { children: field.label }),
-                    /* @__PURE__ */ jsxs("code", { children: [
-                      "--",
-                      field.key
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-scale", children: [
-                    /* @__PURE__ */ jsx(
-                      Input,
-                      {
-                        size: "sm",
-                        value: draftTokens[field.key] ?? "1",
-                        onValueChange: (value) => updateDraftToken(field.key, value || "1")
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      Slider,
-                      {
-                        value: parseScaleToken(draftTokens[field.key]),
-                        onChange: (value) => updateDraftToken(field.key, formatScaleToken(value)),
-                        min: 0.6,
-                        max: field.key === "shadow-float-scale" ? 1.8 : 1.6,
-                        step: 0.05
-                      }
-                    )
-                  ] })
-                ] }, field.key)
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-section", children: [
-              /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsx("span", { children: "\u5F3A\u8C03 palette" }),
-                /* @__PURE__ */ jsx("small", { children: "\u5B8C\u6574\u8986\u5199 accent / ink / soft / glow" })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "theme-panel-token-grid", children: ACCENT_PALETTE_FIELDS.map((field) => /* @__PURE__ */ jsxs("div", { className: "theme-panel-token-field", children: [
-                /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-label", children: [
-                  /* @__PURE__ */ jsx("span", { children: field.label }),
-                  /* @__PURE__ */ jsxs("code", { children: [
-                    "accent.",
-                    field.key
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs("span", { className: "theme-panel-token-input", children: [
-                  /* @__PURE__ */ jsx(
-                    ColorPicker,
-                    {
-                      className: "theme-panel-token-picker",
-                      value: tokenPickerValue(draftAccentPalette[field.key], draftAccent),
-                      onChange: (value) => updateDraftAccentSlot(field.key, value),
-                      placement: "left",
-                      "aria-label": `\u9009\u62E9 ${field.label}`,
-                      children: /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: "theme-panel-token-swatch",
-                          style: { background: draftAccentPalette[field.key] }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Input,
-                    {
-                      size: "sm",
-                      value: draftAccentPalette[field.key],
-                      onValueChange: (value) => updateDraftAccentSlot(field.key, value)
-                    }
-                  )
-                ] })
-              ] }, field.key)) })
-            ] })
-          ] }),
+          createMode === "advanced" && renderAdvancedEditor({
+            font: draftFont,
+            fontMode: advancedFontMode,
+            tokens: draftTokens,
+            accentPalette: draftAccentPalette,
+            surfaceFallback: draftSurface,
+            accentFallback: draftAccent,
+            onFontModeChange: setAdvancedFontMode,
+            onFontChange: setDraftFont,
+            onTokenChange: updateDraftToken,
+            onAccentSlotChange: updateDraftAccentSlot
+          }),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -1161,6 +1315,103 @@ var ThemePanel = React.forwardRef(
           }
         )
       ] }),
+      sections.includes("advanced") && !isCreatingTheme && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row theme-panel-advanced-row", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            icon: "sliders",
+            trailingIcon: advancedOpen ? "chevUp" : "chevDown",
+            block: true,
+            className: "theme-panel-advanced-toggle",
+            onClick: () => setAdvancedOpen((open) => !open),
+            "aria-expanded": advancedOpen,
+            children: "\u9AD8\u7EA7\u8C03\u6574"
+          }
+        ),
+        advancedOpen && /* @__PURE__ */ jsxs("div", { className: "theme-panel-live-advanced", children: [
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u57FA\u5E95" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                variant: "segmented",
+                size: "sm",
+                value: theme.colorScheme,
+                options: [
+                  { value: "light", label: "\u6D45" },
+                  { value: "dark", label: "\u6DF1" }
+                ],
+                onChange: updateLiveBase
+              }
+            )
+          ] }),
+          renderAdvancedEditor({
+            font: theme.font,
+            fontMode: liveAdvancedFontMode,
+            tokens: liveAdvancedTokens,
+            accentPalette: theme.accentPalette,
+            surfaceFallback: cssColorToHex(
+              liveAdvancedTokens.bg ?? DEFAULT_SURFACE_BY_BASE[theme.colorScheme],
+              DEFAULT_SURFACE_BY_BASE[theme.colorScheme]
+            ),
+            accentFallback: cssColorToHex(theme.accentPalette.accent, customAccent),
+            onFontModeChange: setLiveAdvancedFontMode,
+            onFontChange: (font) => theme.setFont(font),
+            onTokenChange: updateLiveToken,
+            onAccentSlotChange: updateLiveAccentSlot
+          }),
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-actions", children: [
+            canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxs("div", { className: "theme-panel-save-as-field", children: [
+              /* @__PURE__ */ jsx("span", { children: isCurrentSavedTheme ? "\u4E3B\u9898\u540D" : "\u65B0\u4E3B\u9898\u540D" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  value: saveAsName,
+                  onValueChange: setSaveAsName,
+                  placeholder: suggestedSaveAsName,
+                  leadingIcon: "palette",
+                  allowClear: true
+                }
+              )
+            ] }),
+            canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxs("div", { className: "theme-panel-save-as-field", children: [
+              /* @__PURE__ */ jsx("span", { children: "\u526F\u6807\u9898" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  value: saveAsDescription,
+                  onValueChange: setSaveAsDescription,
+                  placeholder: suggestedSaveAsDescription,
+                  leadingIcon: "edit",
+                  allowClear: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-footer", children: [
+              /* @__PURE__ */ jsx("span", { children: isCurrentSavedTheme ? `\u5F53\u524D\u9884\u8BBE: ${getActiveThemeMeta().label}` : canSaveCurrentThemeAsNew ? "\u9ED8\u8BA4\u9884\u8BBE\u4F1A\u4FDD\u5B58\u4E3A\u65B0\u4E3B\u9898" : "\u5F53\u524D\u8C03\u6574\u4EC5\u8FD0\u884C\u65F6\u751F\u6548" }),
+              /* @__PURE__ */ jsxs("div", { className: "theme-panel-advanced-buttons", children: [
+                canUpdateCurrentTheme && /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", icon: "check", onClick: saveCurrentThemeUpdate, children: "\u4FDD\u5B58\u4FEE\u6539" }),
+                canSaveCurrentThemeAsNew && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: canUpdateCurrentTheme ? "ghost" : "primary",
+                    size: "sm",
+                    icon: "copy",
+                    onClick: saveCurrentThemeAsNew,
+                    children: isCurrentSavedTheme ? "\u53E6\u5B58\u4E3A" : "\u4FDD\u5B58\u4E3A\u65B0\u4E3B\u9898"
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] })
+      ] }),
       showReset && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
     ] });
   }