@fangxinyan/lumina 0.6.7 → 0.6.9

package/dist/{chunk-LFTCK2VM.cjs → chunk-F3DN2JGE.cjs}

@@ -1,17 +1,17 @@
 'use strict';
 
-var chunkZWCDB5PP_cjs = require('./chunk-ZWCDB5PP.cjs');
+var chunkXWRQ7ZLT_cjs = require('./chunk-XWRQ7ZLT.cjs');
 var chunk6EOSMK34_cjs = require('./chunk-6EOSMK34.cjs');
-var chunkN2COYOXE_cjs = require('./chunk-N2COYOXE.cjs');
-var chunk6GQPF3EI_cjs = require('./chunk-6GQPF3EI.cjs');
-var chunkVSUMJX6Z_cjs = require('./chunk-VSUMJX6Z.cjs');
-var chunkMYHBC3HA_cjs = require('./chunk-MYHBC3HA.cjs');
-var chunkVAXWWJJP_cjs = require('./chunk-VAXWWJJP.cjs');
-var chunk2ZADGBUN_cjs = require('./chunk-2ZADGBUN.cjs');
-var chunk6LARTGLP_cjs = require('./chunk-6LARTGLP.cjs');
-require('./tokens-EF34LSWI.css');
+var chunkDGB6KVU3_cjs = require('./chunk-DGB6KVU3.cjs');
+var chunkHFM4YKM5_cjs = require('./chunk-HFM4YKM5.cjs');
+var chunkZC5VDX4W_cjs = require('./chunk-ZC5VDX4W.cjs');
+var chunkXPV672EI_cjs = require('./chunk-XPV672EI.cjs');
+var chunk7OYMY22O_cjs = require('./chunk-7OYMY22O.cjs');
+var chunkS4CZ3VO6_cjs = require('./chunk-S4CZ3VO6.cjs');
+var chunkGJAEGIPM_cjs = require('./chunk-GJAEGIPM.cjs');
+require('./tokens-RGFJKRC7.css');
 require('./shared-NJHRNLRH.css');
-require('./ThemePanel-76LB3YA5.css');
+require('./ThemePanel-TEHB2JCQ.css');
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -72,7 +72,8 @@ var DEFAULT_SECTIONS = [
   "shadow",
   "radius",
   "font",
-  "density"
+  "density",
+  "advanced"
 ];
 var DEFAULT_MODE_OPTIONS = [
   { key: "light", label: "\u6D45\u8272" },
@@ -123,7 +124,7 @@ var ACCENT_PALETTE_FIELDS = [
 function accentFromPreset(preset) {
   const accent = preset?.accent ?? "sky";
   if (typeof accent === "string") {
-    return chunkN2COYOXE_cjs.ACCENT_PRESETS[accent]?.accent ?? accent;
+    return chunkDGB6KVU3_cjs.ACCENT_PRESETS[accent]?.accent ?? accent;
   }
   return accent.accent;
 }
@@ -147,6 +148,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(/^#/, "");
@@ -253,6 +258,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);
@@ -301,8 +312,8 @@ function fontConfigToText(font) {
   return typeof font === "string" ? font : JSON.stringify(font);
 }
 function fontToStack(font) {
-  if (typeof font === "string") return chunkN2COYOXE_cjs.FONT_STACKS[font] ?? font;
-  return font.sans ?? font.display ?? chunkN2COYOXE_cjs.FONT_STACKS.system;
+  if (typeof font === "string") return chunkDGB6KVU3_cjs.FONT_STACKS[font] ?? font;
+  return font.sans ?? font.display ?? chunkDGB6KVU3_cjs.FONT_STACKS.system;
 }
 function tokenPickerValue(value, fallback) {
   return cssColorToHex(value ?? fallback, fallback);
@@ -328,18 +339,23 @@ var ThemePanel = React__namespace.forwardRef(
     onCreateTheme,
     allowDeleteTheme = true,
     onDeleteTheme,
+    allowUpdateTheme = true,
+    onUpdateTheme,
     showReset = true,
     compact,
     className = "",
     ...rest
   }, ref) => {
-    const theme = chunkN2COYOXE_cjs.useTheme();
+    const theme = chunkDGB6KVU3_cjs.useTheme();
     const rootRef = React__namespace.useRef(null);
     const previewSnapshotRef = React__namespace.useRef(null);
     const updateThemeRef = React__namespace.useRef(theme.update);
     updateThemeRef.current = theme.update;
     const [customAccent, setCustomAccent] = React__namespace.useState(defaultCustomAccent);
     const [createdThemeMeta, setCreatedThemeMeta] = React__namespace.useState({});
+    const [advancedOpen, setAdvancedOpen] = React__namespace.useState(false);
+    const [saveAsName, setSaveAsName] = React__namespace.useState("");
+    const [saveAsDescription, setSaveAsDescription] = React__namespace.useState("");
     const [isCreatingTheme, setIsCreatingTheme] = React__namespace.useState(false);
     const [previewDraft, setPreviewDraft] = React__namespace.useState(true);
     const [draftName, setDraftName] = React__namespace.useState(defaultCreateThemeName);
@@ -366,6 +382,7 @@ var ThemePanel = React__namespace.forwardRef(
     const [draftFont, setDraftFont] = React__namespace.useState("sf");
     const [createMode, setCreateMode] = React__namespace.useState("simple");
     const [advancedFontMode, setAdvancedFontMode] = React__namespace.useState("preset");
+    const [liveAdvancedFontMode, setLiveAdvancedFontMode] = React__namespace.useState("preset");
     const [draftBasePresets, setDraftBasePresets] = React__namespace.useState(() => ({
       light: THEME_PANEL_DEFAULT_THEME_PRESETS.light,
       dark: THEME_PANEL_DEFAULT_THEME_PRESETS.dark
@@ -375,6 +392,9 @@ var ThemePanel = React__namespace.forwardRef(
       () => /* @__PURE__ */ new Set(["system", ...THEME_PANEL_DEFAULT_PRESET_OPTIONS.map((option) => String(option.key))]),
       []
     );
+    React__namespace.useEffect(() => {
+      setLiveAdvancedFontMode(toFontKey(theme.font) === theme.font ? "preset" : "custom");
+    }, [theme.font]);
     const setRootRef = React__namespace.useCallback(
       (node) => {
         rootRef.current = node;
@@ -413,6 +433,17 @@ var ThemePanel = React__namespace.forwardRef(
       }));
       return [...builtIns, ...customOptions];
     }, [createdThemeMeta, presetOptions, theme.themes]);
+    const activePresetOption = React__namespace.useMemo(
+      () => resolvedPresetOptions.find((option) => String(option.key) === modeValue),
+      [modeValue, resolvedPresetOptions]
+    );
+    const liveAdvancedTokens = React__namespace.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__namespace.useEffect(() => {
       if (!isCreatingTheme || !previewDraft) return;
       updateThemeRef.current({
@@ -512,6 +543,123 @@ var ThemePanel = React__namespace.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__namespace.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;
@@ -565,6 +713,7 @@ var ThemePanel = React__namespace.forwardRef(
       setCreateMode("simple");
       setCustomAccent(accent);
       setPreviewDraft(true);
+      setAdvancedOpen(false);
       setIsCreatingTheme(true);
     };
     const cancelCreateTheme = () => {
@@ -650,10 +799,196 @@ var ThemePanel = React__namespace.forwardRef(
     const updateThemeToken = (key, value) => {
       theme.setTokens({ ...theme.tokens, [key]: value });
     };
+    const renderAdvancedEditor = ({
+      font,
+      fontMode,
+      tokens,
+      accentPalette,
+      surfaceFallback,
+      accentFallback,
+      onFontModeChange,
+      onFontChange,
+      onTokenChange,
+      onAccentSlotChange
+    }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section compact", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53" }),
+          /* @__PURE__ */ jsxRuntime.jsx("small", { children: fontMode === "preset" ? "\u9009\u62E9\u5185\u7F6E\u5B57\u4F53" : "\u586B\u5199 CSS font-family" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkZC5VDX4W_cjs.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53\u6808" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            chunk7OYMY22O_cjs.Input,
+            {
+              size: "sm",
+              value: fontConfigToText(font),
+              onValueChange: (value) => onFontChange(value || "system"),
+              placeholder: "CSS font-family"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8868\u9762 tokens" }),
+          /* @__PURE__ */ jsxRuntime.jsx("small", { children: "\u5B8C\u6574\u8986\u5199 --bg / --fg" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-token-grid", children: SURFACE_TOKEN_FIELDS.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+              "--",
+              field.key
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkXPV672EI_cjs.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__ */ jsxRuntime.jsx("span", { className: "theme-panel-token-swatch", style: { background: tokens[field.key] } })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunk7OYMY22O_cjs.Input,
+              {
+                size: "sm",
+                value: tokens[field.key] ?? "",
+                onValueChange: (value) => onTokenChange(field.key, value)
+              }
+            )
+          ] })
+        ] }, field.key)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9634\u5F71\u7CFB\u7EDF" }),
+          /* @__PURE__ */ jsxRuntime.jsx("small", { children: "\u6697/\u4EAE\u9634\u5F71\u4E0E\u5C42\u7EA7\u7F29\u653E" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-token-grid", children: SHADOW_TOKEN_FIELDS.map(
+          (field) => field.kind === "color" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
+              /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+                "--",
+                field.key
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkXPV672EI_cjs.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__ */ jsxRuntime.jsx("span", { className: "theme-panel-token-swatch", style: { background: tokens[field.key] } })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunk7OYMY22O_cjs.Input,
+                {
+                  size: "sm",
+                  value: tokens[field.key] ?? "",
+                  onValueChange: (value) => onTokenChange(field.key, value)
+                }
+              )
+            ] })
+          ] }, field.key) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field scale", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
+              /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+                "--",
+                field.key
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-scale", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunk7OYMY22O_cjs.Input,
+                {
+                  size: "sm",
+                  value: tokens[field.key] ?? "1",
+                  onValueChange: (value) => onTokenChange(field.key, value || "1")
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkXWRQ7ZLT_cjs.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5F3A\u8C03 palette" }),
+          /* @__PURE__ */ jsxRuntime.jsx("small", { children: "\u5B8C\u6574\u8986\u5199 accent / ink / soft / glow" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-token-grid", children: ACCENT_PALETTE_FIELDS.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
+              "accent.",
+              field.key
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkXPV672EI_cjs.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__ */ jsxRuntime.jsx("span", { className: "theme-panel-token-swatch", style: { background: accentPalette[field.key] } })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunk7OYMY22O_cjs.Input,
+              {
+                size: "sm",
+                value: accentPalette[field.key],
+                onValueChange: (value) => onAccentSlotChange(field.key, value)
+              }
+            )
+          ] })
+        ] }, field.key)) })
+      ] })
+    ] });
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setRootRef, className: rootClass, ...rest, children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-head", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-title", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(chunk6LARTGLP_cjs.Icon, { name: "sliders", size: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(chunkGJAEGIPM_cjs.Icon, { name: "sliders", size: 14 }),
           title && /* @__PURE__ */ jsxRuntime.jsx("span", { children: title })
         ] }),
         description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-desc", children: description })
@@ -664,7 +999,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.colorScheme })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkVSUMJX6Z_cjs.RadioGroup,
+          chunkZC5VDX4W_cjs.RadioGroup,
           {
             variant: "segmented",
             size: "sm",
@@ -689,7 +1024,7 @@ var ThemePanel = React__namespace.forwardRef(
           const deletable = allowDeleteTheme && !protectedPresetKeys.has(key) && key in theme.themes;
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `theme-panel-preset-shell ${deletable ? "deletable" : ""}`, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
-              chunk2ZADGBUN_cjs.Button,
+              chunkS4CZ3VO6_cjs.Button,
               {
                 type: "button",
                 variant: "ghost",
@@ -710,7 +1045,7 @@ var ThemePanel = React__namespace.forwardRef(
               }
             ),
             deletable && /* @__PURE__ */ jsxRuntime.jsx(
-              chunk2ZADGBUN_cjs.Button,
+              chunkS4CZ3VO6_cjs.Button,
               {
                 type: "button",
                 variant: "danger",
@@ -724,7 +1059,7 @@ var ThemePanel = React__namespace.forwardRef(
             )
           ] }, key);
         }) }),
-        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsx(chunk2ZADGBUN_cjs.Button, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
+        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsx(chunkS4CZ3VO6_cjs.Button, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
         allowCreateTheme && isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-head", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -732,7 +1067,7 @@ var ThemePanel = React__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("small", { children: previewDraft ? "\u5B9E\u65F6\u9884\u89C8\u4E2D" : "\u9884\u89C8\u5DF2\u6682\u505C" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunk6GQPF3EI_cjs.Switch,
+              chunkHFM4YKM5_cjs.Switch,
               {
                 size: "sm",
                 checked: previewDraft,
@@ -743,7 +1078,7 @@ var ThemePanel = React__namespace.forwardRef(
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkVAXWWJJP_cjs.Input,
+            chunk7OYMY22O_cjs.Input,
             {
               size: "sm",
               value: draftName,
@@ -754,7 +1089,7 @@ var ThemePanel = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkVSUMJX6Z_cjs.RadioGroup,
+            chunkZC5VDX4W_cjs.RadioGroup,
             {
               className: "theme-panel-create-mode",
               variant: "segmented",
@@ -770,7 +1105,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u57FA\u5E95" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkVSUMJX6Z_cjs.RadioGroup,
+              chunkZC5VDX4W_cjs.RadioGroup,
               {
                 variant: "segmented",
                 size: "sm",
@@ -786,11 +1121,11 @@ var ThemePanel = React__namespace.forwardRef(
           createMode === "simple" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-grid", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8868\u9762" }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkMYHBC3HA_cjs.ColorPicker, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
+              /* @__PURE__ */ jsxRuntime.jsx(chunkXPV672EI_cjs.ColorPicker, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5F3A\u8C03" }),
-              /* @__PURE__ */ jsxRuntime.jsx(chunkMYHBC3HA_cjs.ColorPicker, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
+              /* @__PURE__ */ jsxRuntime.jsx(chunkXPV672EI_cjs.ColorPicker, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-sliders", children: [
@@ -798,7 +1133,7 @@ var ThemePanel = React__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9634\u5F71\u5F3A\u5EA6" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: draftIntensity })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkZWCDB5PP_cjs.Slider, { value: draftIntensity, onChange: setDraftIntensity, min: 1, max: 10, step: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkXWRQ7ZLT_cjs.Slider, { value: draftIntensity, onChange: setDraftIntensity, min: 1, max: 10, step: 1 }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-label", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5706\u89D2" }),
               /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -806,12 +1141,12 @@ var ThemePanel = React__namespace.forwardRef(
                 "px"
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(chunkZWCDB5PP_cjs.Slider, { value: draftRadius, onChange: setDraftRadius, min: 8, max: 36, step: 2 })
+            /* @__PURE__ */ jsxRuntime.jsx(chunkXWRQ7ZLT_cjs.Slider, { value: draftRadius, onChange: setDraftRadius, min: 8, max: 36, step: 2 })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5BC6\u5EA6" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkVSUMJX6Z_cjs.RadioGroup,
+              chunkZC5VDX4W_cjs.RadioGroup,
               {
                 variant: "segmented",
                 size: "sm",
@@ -824,7 +1159,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkVSUMJX6Z_cjs.RadioGroup,
+              chunkZC5VDX4W_cjs.RadioGroup,
               {
                 variant: "segmented",
                 size: "sm",
@@ -834,199 +1169,18 @@ var ThemePanel = React__namespace.forwardRef(
               }
             )
           ] }),
-          createMode === "advanced" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section compact", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53" }),
-                /* @__PURE__ */ jsxRuntime.jsx("small", { children: advancedFontMode === "preset" ? "\u9009\u62E9\u5185\u7F6E\u5B57\u4F53" : "\u586B\u5199 CSS font-family" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                chunkVSUMJX6Z_cjs.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53\u6808" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkVAXWWJJP_cjs.Input,
-                  {
-                    size: "sm",
-                    value: fontConfigToText(draftFont),
-                    onValueChange: (value) => setDraftFont(value || "system"),
-                    placeholder: "CSS font-family"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u8868\u9762 tokens" }),
-                /* @__PURE__ */ jsxRuntime.jsx("small", { children: "\u5B8C\u6574\u8986\u5199 --bg / --fg" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-token-grid", children: SURFACE_TOKEN_FIELDS.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
-                    "--",
-                    field.key
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkMYHBC3HA_cjs.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__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "theme-panel-token-swatch",
-                          style: { background: draftTokens[field.key] }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkVAXWWJJP_cjs.Input,
-                    {
-                      size: "sm",
-                      value: draftTokens[field.key] ?? "",
-                      onValueChange: (value) => updateDraftToken(field.key, value)
-                    }
-                  )
-                ] })
-              ] }, field.key)) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9634\u5F71\u7CFB\u7EDF" }),
-                /* @__PURE__ */ jsxRuntime.jsx("small", { children: "\u6697/\u4EAE\u9634\u5F71\u4E0E\u5C42\u7EA7\u7F29\u653E" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-token-grid", children: SHADOW_TOKEN_FIELDS.map(
-                (field) => field.kind === "color" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
-                      "--",
-                      field.key
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkMYHBC3HA_cjs.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__ */ jsxRuntime.jsx(
-                          "span",
-                          {
-                            className: "theme-panel-token-swatch",
-                            style: { background: draftTokens[field.key] }
-                          }
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkVAXWWJJP_cjs.Input,
-                      {
-                        size: "sm",
-                        value: draftTokens[field.key] ?? "",
-                        onValueChange: (value) => updateDraftToken(field.key, value)
-                      }
-                    )
-                  ] })
-                ] }, field.key) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field scale", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
-                    /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
-                      "--",
-                      field.key
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-scale", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkVAXWWJJP_cjs.Input,
-                      {
-                        size: "sm",
-                        value: draftTokens[field.key] ?? "1",
-                        onValueChange: (value) => updateDraftToken(field.key, value || "1")
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkZWCDB5PP_cjs.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-section", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-title", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5F3A\u8C03 palette" }),
-                /* @__PURE__ */ jsxRuntime.jsx("small", { children: "\u5B8C\u6574\u8986\u5199 accent / ink / soft / glow" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-token-grid", children: ACCENT_PALETTE_FIELDS.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-token-field", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-label", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: field.label }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("code", { children: [
-                    "accent.",
-                    field.key
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-token-input", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkMYHBC3HA_cjs.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__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: "theme-panel-token-swatch",
-                          style: { background: draftAccentPalette[field.key] }
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    chunkVAXWWJJP_cjs.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__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -1044,7 +1198,7 @@ var ThemePanel = React__namespace.forwardRef(
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "theme-panel-create-preview-label", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(chunk6LARTGLP_cjs.Icon, { name: "palette", size: 13 }),
+                  /* @__PURE__ */ jsxRuntime.jsx(chunkGJAEGIPM_cjs.Icon, { name: "palette", size: 13 }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: draftName.trim() || "\u81EA\u5B9A\u4E49\u4E3B\u9898" })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("i", { "aria-hidden": true })
@@ -1052,9 +1206,9 @@ var ThemePanel = React__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-actions", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(chunk2ZADGBUN_cjs.Button, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
+            /* @__PURE__ */ jsxRuntime.jsx(chunkS4CZ3VO6_cjs.Button, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunk2ZADGBUN_cjs.Button,
+              chunkS4CZ3VO6_cjs.Button,
               {
                 type: "button",
                 variant: "primary",
@@ -1074,20 +1228,20 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.accent === "custom" ? customAccent : theme.accent })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-swatches", children: [
-          Object.keys(chunkN2COYOXE_cjs.ACCENT_PRESETS).map((key) => /* @__PURE__ */ jsxRuntime.jsx(
-            chunk2ZADGBUN_cjs.Button,
+          Object.keys(chunkDGB6KVU3_cjs.ACCENT_PRESETS).map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+            chunkS4CZ3VO6_cjs.Button,
             {
               type: "button",
               size: "sm",
               "aria-label": key,
               className: `theme-panel-swatch ${theme.accent === key ? "active" : ""}`,
-              style: { background: chunkN2COYOXE_cjs.ACCENT_PRESETS[key].accent },
+              style: { background: chunkDGB6KVU3_cjs.ACCENT_PRESETS[key].accent },
               onClick: () => theme.setAccent(key)
             },
             key
           )),
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkMYHBC3HA_cjs.ColorPicker,
+            chunkXPV672EI_cjs.ColorPicker,
             {
               size: "sm",
               value: customAccent,
@@ -1104,7 +1258,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9634\u5F71\u5F3A\u5EA6" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.intensity })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkZWCDB5PP_cjs.Slider, { value: theme.intensity, onChange: theme.setIntensity, min: 1, max: 10, step: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(chunkXWRQ7ZLT_cjs.Slider, { value: theme.intensity, onChange: theme.setIntensity, min: 1, max: 10, step: 1 }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-label", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9634\u5F71\u6269\u6563" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -1113,7 +1267,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkZWCDB5PP_cjs.Slider,
+          chunkXWRQ7ZLT_cjs.Slider,
           {
             value: shadowScale,
             onChange: (value) => updateThemeToken("shadow-scale", formatScaleToken(value)),
@@ -1130,7 +1284,7 @@ var ThemePanel = React__namespace.forwardRef(
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkZWCDB5PP_cjs.Slider,
+          chunkXWRQ7ZLT_cjs.Slider,
           {
             value: shadowFloatScale,
             onChange: (value) => updateThemeToken("shadow-float-scale", formatScaleToken(value)),
@@ -1145,7 +1299,7 @@ var ThemePanel = React__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u9634\u5F71" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: theme.intensity })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkZWCDB5PP_cjs.Slider, { value: theme.intensity, onChange: theme.setIntensity, min: 1, max: 10, step: 1 })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkXWRQ7ZLT_cjs.Slider, { value: theme.intensity, onChange: theme.setIntensity, min: 1, max: 10, step: 1 })
       ] }),
       sections.includes("radius") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-label", children: [
@@ -1155,12 +1309,12 @@ var ThemePanel = React__namespace.forwardRef(
             "px"
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkZWCDB5PP_cjs.Slider, { value: theme.radius, onChange: theme.setRadius, min: 8, max: 36, step: 2 })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkXWRQ7ZLT_cjs.Slider, { value: theme.radius, onChange: theme.setRadius, min: 8, max: 36, step: 2 })
       ] }),
       sections.includes("font") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5B57\u4F53" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkVSUMJX6Z_cjs.RadioGroup,
+          chunkZC5VDX4W_cjs.RadioGroup,
           {
             variant: "segmented",
             size: "sm",
@@ -1173,7 +1327,7 @@ var ThemePanel = React__namespace.forwardRef(
       sections.includes("density") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u5BC6\u5EA6" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          chunkVSUMJX6Z_cjs.RadioGroup,
+          chunkZC5VDX4W_cjs.RadioGroup,
           {
             variant: "segmented",
             size: "sm",
@@ -1183,7 +1337,104 @@ var ThemePanel = React__namespace.forwardRef(
           }
         )
       ] }),
-      showReset && /* @__PURE__ */ jsxRuntime.jsx(chunk2ZADGBUN_cjs.Button, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
+      sections.includes("advanced") && !isCreatingTheme && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-row theme-panel-advanced-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          chunkS4CZ3VO6_cjs.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-live-advanced", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-create-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u57FA\u5E95" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              chunkZC5VDX4W_cjs.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-actions", children: [
+            canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-save-as-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentSavedTheme ? "\u4E3B\u9898\u540D" : "\u65B0\u4E3B\u9898\u540D" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunk7OYMY22O_cjs.Input,
+                {
+                  size: "sm",
+                  value: saveAsName,
+                  onValueChange: setSaveAsName,
+                  placeholder: suggestedSaveAsName,
+                  leadingIcon: "palette",
+                  allowClear: true
+                }
+              )
+            ] }),
+            canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-save-as-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u526F\u6807\u9898" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunk7OYMY22O_cjs.Input,
+                {
+                  size: "sm",
+                  value: saveAsDescription,
+                  onValueChange: setSaveAsDescription,
+                  placeholder: suggestedSaveAsDescription,
+                  leadingIcon: "edit",
+                  allowClear: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-footer", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "theme-panel-advanced-buttons", children: [
+                canUpdateCurrentTheme && /* @__PURE__ */ jsxRuntime.jsx(chunkS4CZ3VO6_cjs.Button, { type: "button", variant: "primary", size: "sm", icon: "check", onClick: saveCurrentThemeUpdate, children: "\u4FDD\u5B58\u4FEE\u6539" }),
+                canSaveCurrentThemeAsNew && /* @__PURE__ */ jsxRuntime.jsx(
+                  chunkS4CZ3VO6_cjs.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__ */ jsxRuntime.jsx(chunkS4CZ3VO6_cjs.Button, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
     ] });
   }
 );