@fangxinyan/lumina 0.6.3 → 0.6.5

package/dist/chunk-NJCHFXGC.js

@@ -0,0 +1,1170 @@
+import { Slider } from './chunk-HU7T64Y3.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 './shared-NJHRNLRH.css';
+import './ThemePanel-76LB3YA5.css';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var THEME_PANEL_DEFAULT_THEME_PRESETS = pickLuminaThemePresets(["light", "dark", "porcelain", "assistant", "assistantDark"]);
+var THEME_PANEL_DEFAULT_PRESET_OPTIONS = [
+  { key: "light", label: "\u6D45\u8272", description: "\u9ED8\u8BA4", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.light },
+  { key: "dark", label: "\u6DF1\u8272", description: "\u9ED8\u8BA4", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.dark },
+  { key: "porcelain", label: "\u74F7\u767D", description: "\u6E05\u4EAE", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.porcelain },
+  { key: "assistant", label: "\u52A9\u624B", description: "Soft", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.assistant },
+  { key: "assistantDark", label: "\u52A9\u624B\u6697", description: "Soft", preset: THEME_PANEL_DEFAULT_THEME_PRESETS.assistantDark }
+];
+var DRAFT_THEME_MODE = "__theme_panel_draft__";
+var DEFAULT_SURFACE_BY_BASE = {
+  light: THEME_PANEL_DEFAULT_THEME_PRESETS.light.tokens.bg,
+  dark: THEME_PANEL_DEFAULT_THEME_PRESETS.dark.tokens.bg
+};
+var SURFACE_TOKEN_KEYS = [
+  "bg",
+  "bg-raised",
+  "bg-sunken",
+  "fg",
+  "fg-muted",
+  "fg-subtle",
+  "border",
+  "divider"
+];
+var SHADOW_TOKEN_KEYS = [
+  "shadow-dark",
+  "shadow-light",
+  "shadow-scale",
+  "shadow-float-scale"
+];
+var THEME_TOKEN_KEYS = [...SURFACE_TOKEN_KEYS, ...SHADOW_TOKEN_KEYS];
+var DEFAULT_SECTIONS = [
+  "mode",
+  "presets",
+  "accent",
+  "shadow",
+  "radius",
+  "font",
+  "density"
+];
+var DEFAULT_MODE_OPTIONS = [
+  { key: "light", label: "\u6D45\u8272" },
+  { key: "dark", label: "\u6DF1\u8272" },
+  { key: "system", label: "\u7CFB\u7EDF" }
+];
+var DENSITY_OPTIONS = [
+  { value: "compact", label: "\u7D27\u51D1" },
+  { value: "comfortable", label: "\u8212\u9002" },
+  { value: "spacious", label: "\u5BBD\u677E" }
+];
+var FONT_OPTIONS = [
+  { value: "system", label: "\u7CFB\u7EDF" },
+  { value: "sf", label: "SF Pro" },
+  { value: "serif", label: "\u886C\u7EBF" },
+  { value: "mono", label: "\u7B49\u5BBD" }
+];
+var THEME_CREATE_MODE_OPTIONS = [
+  { value: "simple", label: "\u7B80\u6D01" },
+  { value: "advanced", label: "\u6DF1\u5EA6" }
+];
+var ADVANCED_FONT_MODE_OPTIONS = [
+  { value: "preset", label: "\u9884\u8BBE\u5B57\u4F53" },
+  { value: "custom", label: "\u81EA\u5B9A\u4E49\u6808" }
+];
+var SURFACE_TOKEN_FIELDS = [
+  { key: "bg", label: "\u80CC\u666F" },
+  { key: "bg-raised", label: "\u51F8\u8D77\u9762" },
+  { key: "bg-sunken", label: "\u51F9\u9677\u9762" },
+  { key: "fg", label: "\u6B63\u6587" },
+  { key: "fg-muted", label: "\u6B21\u7EA7\u6587\u5B57" },
+  { key: "fg-subtle", label: "\u5F31\u6587\u5B57" },
+  { key: "border", label: "\u63CF\u8FB9" },
+  { key: "divider", label: "\u5206\u5272\u7EBF" }
+];
+var SHADOW_TOKEN_FIELDS = [
+  { key: "shadow-dark", label: "\u6697\u9634\u5F71", kind: "color" },
+  { key: "shadow-light", label: "\u4EAE\u9634\u5F71", kind: "color" },
+  { key: "shadow-scale", label: "\u9634\u5F71\u6269\u6563", kind: "scale" },
+  { key: "shadow-float-scale", label: "\u6D6E\u5C42\u6DF1\u5EA6", kind: "scale" }
+];
+var ACCENT_PALETTE_FIELDS = [
+  { key: "accent", label: "\u4E3B\u8272" },
+  { key: "ink", label: "\u6587\u5B57\u8272" },
+  { key: "soft", label: "\u67D4\u548C\u5E95" },
+  { key: "glow", label: "\u5149\u6655" }
+];
+function accentFromPreset(preset) {
+  const accent = preset?.accent ?? "sky";
+  if (typeof accent === "string") {
+    return ACCENT_PRESETS[accent]?.accent ?? accent;
+  }
+  return accent.accent;
+}
+function fallbackPresetLabel(key) {
+  return key.replace(/^user-/, "").replace(/[-_]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+function nodeToText(node, fallback) {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  return fallback;
+}
+function createThemeKey(label, themes, prefix) {
+  const normalizedPrefix = prefix.trim().replace(/[^a-z0-9-]+/gi, "-").replace(/^-+|-+$/g, "") || "user";
+  const slug = label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  const base = `${normalizedPrefix}-${slug || "custom-theme"}`;
+  let key = base;
+  let i = 2;
+  while (key in themes || key in THEME_PANEL_DEFAULT_THEME_PRESETS || key === DRAFT_THEME_MODE) {
+    key = `${base}-${i}`;
+    i += 1;
+  }
+  return key;
+}
+var clampColor = (value) => Math.min(1, Math.max(0, value));
+function normalizeHexColor(input) {
+  const value = input.trim().replace(/^#/, "");
+  if (!/^([\da-f]{3}|[\da-f]{6})$/i.test(value)) return null;
+  const hex = value.length === 3 ? value.split("").map((part) => part + part).join("") : value;
+  return `#${hex.toLowerCase()}`;
+}
+function hexToRgbColor(hex) {
+  const normalized = normalizeHexColor(hex);
+  if (!normalized) return null;
+  const value = Number.parseInt(normalized.slice(1), 16);
+  return [value >> 16 & 255, value >> 8 & 255, value & 255];
+}
+function rgbToHexColor(red, green, blue) {
+  const toHex = (value) => Math.round(Math.min(255, Math.max(0, value))).toString(16).padStart(2, "0");
+  return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+}
+function parseRgbColor(value) {
+  const match = value.trim().match(/^rgba?\((.+)\)$/i);
+  if (!match) return null;
+  const parts = match[1].replace(/\s*\/\s*[\d.]+%?$/, "").split(/[\s,]+/).filter(Boolean).slice(0, 3);
+  if (parts.length < 3) return null;
+  const channels = parts.map((part) => {
+    const numeric = Number.parseFloat(part);
+    return part.endsWith("%") ? numeric / 100 * 255 : numeric;
+  });
+  return channels.every(Number.isFinite) ? rgbToHexColor(channels[0], channels[1], channels[2]) : null;
+}
+function parseOklchColor(value) {
+  const match = value.trim().match(/^oklch\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)\s+([+-]?\d*\.?\d+)(deg|rad|turn)?(?:\s*\/\s*[^)]+)?\s*\)$/i);
+  if (!match) return null;
+  const lightness = Number.parseFloat(match[1]);
+  const chroma = Number.parseFloat(match[3]);
+  const hueValue = Number.parseFloat(match[4]);
+  if (![lightness, chroma, hueValue].every(Number.isFinite)) return null;
+  const hue = match[5] === "rad" ? hueValue * 180 / Math.PI : match[5] === "turn" ? hueValue * 360 : hueValue;
+  const l = match[2] ? lightness / 100 : lightness;
+  const a = chroma * Math.cos(hue * Math.PI / 180);
+  const b = chroma * Math.sin(hue * Math.PI / 180);
+  const lmsL = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const lmsM = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const lmsS = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const linearR = 4.0767416621 * lmsL - 3.3077115913 * lmsM + 0.2309699292 * lmsS;
+  const linearG = -1.2684380046 * lmsL + 2.6097574011 * lmsM - 0.3413193965 * lmsS;
+  const linearB = -0.0041960863 * lmsL - 0.7034186147 * lmsM + 1.707614701 * lmsS;
+  const encode = (channel) => {
+    const c = clampColor(channel);
+    return c <= 31308e-7 ? c * 12.92 : 1.055 * c ** (1 / 2.4) - 0.055;
+  };
+  return rgbToHexColor(encode(linearR) * 255, encode(linearG) * 255, encode(linearB) * 255);
+}
+function cssColorToHex(value, fallback) {
+  return normalizeHexColor(value) ?? parseRgbColor(value) ?? parseOklchColor(value) ?? fallback;
+}
+function sameHexColor(a, b) {
+  const left = normalizeHexColor(a);
+  const right = normalizeHexColor(b);
+  return !!left && left === right;
+}
+function shiftHexColor(value, delta) {
+  if (!value) return void 0;
+  const rgb = hexToRgbColor(value);
+  if (!rgb) return value;
+  return rgbToHexColor(rgb[0] + delta[0], rgb[1] + delta[1], rgb[2] + delta[2]);
+}
+function createAccentPalette(accent, base) {
+  return {
+    accent,
+    ink: base === "dark" ? `color-mix(in oklch, ${accent} 68%, white)` : `color-mix(in oklch, ${accent} 65%, black)`,
+    soft: base === "dark" ? `color-mix(in oklch, ${accent} 28%, black)` : `color-mix(in oklch, ${accent} 15%, white)`,
+    glow: base === "dark" ? `color-mix(in oklch, ${accent} 18%, transparent)` : `color-mix(in oklch, ${accent} 35%, transparent)`
+  };
+}
+function createSurfaceTokens(surface, base) {
+  return base === "dark" ? {
+    bg: surface,
+    "bg-raised": `color-mix(in oklch, ${surface} 88%, white)`,
+    "bg-sunken": `color-mix(in oklch, ${surface} 84%, black)`,
+    fg: `color-mix(in oklch, ${surface} 18%, white)`,
+    "fg-muted": `color-mix(in oklch, ${surface} 48%, white)`,
+    "fg-subtle": `color-mix(in oklch, ${surface} 66%, white)`,
+    border: "rgba(255, 255, 255, 0.08)",
+    divider: "rgba(255, 255, 255, 0.08)",
+    "shadow-dark": "rgba(0, 0, 0, 0.56)",
+    "shadow-light": "rgba(130, 145, 180, 0.06)",
+    "shadow-scale": "1",
+    "shadow-float-scale": "1"
+  } : {
+    bg: surface,
+    "bg-raised": `color-mix(in oklch, ${surface} 82%, white)`,
+    "bg-sunken": `color-mix(in oklch, ${surface} 88%, black)`,
+    fg: `color-mix(in oklch, ${surface} 24%, black)`,
+    "fg-muted": `color-mix(in oklch, ${surface} 48%, black)`,
+    "fg-subtle": `color-mix(in oklch, ${surface} 66%, black)`,
+    border: "rgba(110, 130, 150, 0.14)",
+    divider: "rgba(110, 130, 150, 0.18)",
+    "shadow-dark": `color-mix(in oklch, ${surface} 68%, black)`,
+    "shadow-light": "rgba(255, 255, 255, 0.96)",
+    "shadow-scale": "1",
+    "shadow-float-scale": "1"
+  };
+}
+function defaultBaseTokens(base) {
+  const tokens = THEME_PANEL_DEFAULT_THEME_PRESETS[base].tokens;
+  return { ...tokens };
+}
+function createDraftSurfaceTokens(surface, base, sourceSurface, sourceTokens) {
+  if (sameHexColor(surface, sourceSurface)) return { ...sourceTokens };
+  const current = hexToRgbColor(surface);
+  const source = hexToRgbColor(sourceSurface);
+  if (!current || !source) return createSurfaceTokens(surface, base);
+  const delta = [
+    current[0] - source[0],
+    current[1] - source[1],
+    current[2] - source[2]
+  ];
+  return {
+    ...sourceTokens,
+    bg: normalizeHexColor(surface) ?? surface,
+    "bg-raised": shiftHexColor(sourceTokens["bg-raised"], delta) ?? sourceTokens["bg-raised"],
+    "bg-sunken": shiftHexColor(sourceTokens["bg-sunken"], delta) ?? sourceTokens["bg-sunken"]
+  };
+}
+function createDraftAccentPalette(accent, base, sourceAccent, sourcePalette) {
+  return sameHexColor(accent, sourceAccent) ? { ...sourcePalette } : createAccentPalette(accent, base);
+}
+function readCssVar(element, name, fallback) {
+  if (!element || typeof window === "undefined") return fallback;
+  return getComputedStyle(element).getPropertyValue(name).trim() || fallback;
+}
+function readCurrentThemeTokens(element, base) {
+  const fallbackTokens = defaultBaseTokens(base);
+  return Object.fromEntries(
+    THEME_TOKEN_KEYS.map((key) => [
+      key,
+      readCssVar(element, `--${key}`, fallbackTokens[key] ?? DEFAULT_SURFACE_BY_BASE[base])
+    ])
+  );
+}
+function readCurrentAccentPalette(element, fallback) {
+  return {
+    accent: readCssVar(element, "--accent", fallback.accent),
+    ink: readCssVar(element, "--accent-ink", fallback.ink),
+    soft: readCssVar(element, "--accent-soft", fallback.soft),
+    glow: readCssVar(element, "--accent-glow", fallback.glow)
+  };
+}
+function toFontKey(font) {
+  return typeof font === "string" && FONT_OPTIONS.some((option) => option.value === font) ? font : "system";
+}
+function fontConfigToText(font) {
+  return typeof font === "string" ? font : JSON.stringify(font);
+}
+function fontToStack(font) {
+  if (typeof font === "string") return FONT_STACKS[font] ?? font;
+  return font.sans ?? font.display ?? FONT_STACKS.system;
+}
+function tokenPickerValue(value, fallback) {
+  return cssColorToHex(value ?? fallback, fallback);
+}
+function parseScaleToken(value, fallback = 1) {
+  const parsed = Number.parseFloat(value ?? "");
+  return Number.isFinite(parsed) ? Math.min(2, Math.max(0.2, parsed)) : fallback;
+}
+function formatScaleToken(value) {
+  return value.toFixed(2).replace(/\.?0+$/, "");
+}
+var ThemePanel = React.forwardRef(
+  ({
+    title = "\u4E3B\u9898",
+    description = "\u5FEB\u901F\u8C03\u6574\u5F53\u524D Lumina \u4E3B\u9898",
+    sections = DEFAULT_SECTIONS,
+    modeOptions = DEFAULT_MODE_OPTIONS,
+    presetOptions,
+    defaultCustomAccent = "#845ef7",
+    allowCreateTheme = true,
+    defaultCreateThemeName = "\u6211\u7684\u4E3B\u9898",
+    createThemeKeyPrefix = "user",
+    onCreateTheme,
+    allowDeleteTheme = true,
+    onDeleteTheme,
+    showReset = true,
+    compact,
+    className = "",
+    ...rest
+  }, ref) => {
+    const theme = useTheme();
+    const rootRef = React.useRef(null);
+    const previewSnapshotRef = React.useRef(null);
+    const updateThemeRef = React.useRef(theme.update);
+    updateThemeRef.current = theme.update;
+    const [customAccent, setCustomAccent] = React.useState(defaultCustomAccent);
+    const [createdThemeMeta, setCreatedThemeMeta] = React.useState({});
+    const [isCreatingTheme, setIsCreatingTheme] = React.useState(false);
+    const [previewDraft, setPreviewDraft] = React.useState(true);
+    const [draftName, setDraftName] = React.useState(defaultCreateThemeName);
+    const [draftBase, setDraftBase] = React.useState("light");
+    const [draftSurface, setDraftSurface] = React.useState(DEFAULT_SURFACE_BY_BASE.light);
+    const [draftAccent, setDraftAccent] = React.useState(defaultCustomAccent);
+    const [draftTokens, setDraftTokens] = React.useState(
+      () => defaultBaseTokens("light")
+    );
+    const [draftSourceSurface, setDraftSourceSurface] = React.useState(DEFAULT_SURFACE_BY_BASE.light);
+    const [draftSourceTokens, setDraftSourceTokens] = React.useState(
+      () => defaultBaseTokens("light")
+    );
+    const [draftAccentPalette, setDraftAccentPalette] = React.useState(
+      () => createAccentPalette(defaultCustomAccent, "light")
+    );
+    const [draftSourceAccent, setDraftSourceAccent] = React.useState(defaultCustomAccent);
+    const [draftSourceAccentPalette, setDraftSourceAccentPalette] = React.useState(
+      () => createAccentPalette(defaultCustomAccent, "light")
+    );
+    const [draftDensity, setDraftDensity] = React.useState("comfortable");
+    const [draftIntensity, setDraftIntensity] = React.useState(5);
+    const [draftRadius, setDraftRadius] = React.useState(20);
+    const [draftFont, setDraftFont] = React.useState("sf");
+    const [createMode, setCreateMode] = React.useState("simple");
+    const [advancedFontMode, setAdvancedFontMode] = React.useState("preset");
+    const [draftBasePresets, setDraftBasePresets] = React.useState(() => ({
+      light: THEME_PANEL_DEFAULT_THEME_PRESETS.light,
+      dark: THEME_PANEL_DEFAULT_THEME_PRESETS.dark
+    }));
+    const modeValue = String(theme.mode);
+    const protectedPresetKeys = React.useMemo(
+      () => /* @__PURE__ */ new Set(["system", ...THEME_PANEL_DEFAULT_PRESET_OPTIONS.map((option) => String(option.key))]),
+      []
+    );
+    const setRootRef = React.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const draftPreset = React.useMemo(
+      () => ({
+        base: draftBase,
+        accent: draftAccentPalette,
+        density: draftDensity,
+        intensity: draftIntensity,
+        radius: draftRadius,
+        font: draftFont,
+        tokens: draftTokens
+      }),
+      [draftAccentPalette, draftBase, draftDensity, draftFont, draftIntensity, draftRadius, draftTokens]
+    );
+    const resolvedPresetOptions = React.useMemo(() => {
+      if (presetOptions) return presetOptions;
+      const defaultKeys = new Set(THEME_PANEL_DEFAULT_PRESET_OPTIONS.map((option) => String(option.key)));
+      const builtIns = THEME_PANEL_DEFAULT_PRESET_OPTIONS.map((option) => {
+        const key = String(option.key);
+        return {
+          ...option,
+          preset: theme.themes[key] ?? option.preset
+        };
+      });
+      const customOptions = Object.entries(theme.themes).filter(([key]) => !defaultKeys.has(key)).map(([key, preset]) => ({
+        key,
+        label: createdThemeMeta[key]?.label ?? preset.label ?? fallbackPresetLabel(key),
+        description: createdThemeMeta[key]?.description ?? preset.description ?? (preset.base === "dark" ? "\u6DF1\u8272" : "\u6D45\u8272"),
+        preset
+      }));
+      return [...builtIns, ...customOptions];
+    }, [createdThemeMeta, presetOptions, theme.themes]);
+    React.useEffect(() => {
+      if (!isCreatingTheme || !previewDraft) return;
+      updateThemeRef.current({
+        mode: DRAFT_THEME_MODE,
+        colorScheme: draftPreset.base,
+        accent: draftPreset.accent,
+        density: draftPreset.density,
+        intensity: draftPreset.intensity,
+        radius: draftPreset.radius,
+        font: draftPreset.font,
+        tokens: draftPreset.tokens
+      });
+    }, [draftPreset, isCreatingTheme, previewDraft]);
+    const clearCreateState = () => {
+      previewSnapshotRef.current = null;
+      setIsCreatingTheme(false);
+      setPreviewDraft(true);
+    };
+    const restorePreviewSnapshot = () => {
+      const snapshot = previewSnapshotRef.current;
+      if (!snapshot) return;
+      updateThemeRef.current({
+        ...snapshot,
+        mode: snapshot.mode === DRAFT_THEME_MODE ? snapshot.colorScheme ?? "light" : snapshot.mode
+      });
+    };
+    React.useEffect(() => {
+      return () => {
+        restorePreviewSnapshot();
+      };
+    }, []);
+    const applyMode = (mode) => {
+      clearCreateState();
+      if (mode === "light" || mode === "dark" || mode === "system") {
+        theme.update({ mode, colorScheme: mode === "system" ? theme.colorScheme : mode, tokens: {} });
+        return;
+      }
+      theme.setMode(mode);
+    };
+    const applyPreset = (option) => {
+      clearCreateState();
+      const key = String(option.key);
+      const preset = option.preset ?? theme.themes[key];
+      if (!preset) {
+        theme.setMode(option.key);
+        return;
+      }
+      const isBuiltInMode = key === "light" || key === "dark" || key === "system";
+      const fallbackAccent = theme.accent === "custom" ? theme.accentPalette : theme.accent;
+      theme.update({
+        ...!isBuiltInMode ? { themes: { ...theme.themes, [key]: preset } } : null,
+        mode: option.key,
+        colorScheme: preset.base ?? theme.colorScheme,
+        accent: preset.accent ?? fallbackAccent,
+        density: preset.density ?? theme.density,
+        intensity: preset.intensity ?? theme.intensity,
+        radius: preset.radius ?? theme.radius,
+        font: preset.font ?? theme.font,
+        tokens: preset.tokens ?? {}
+      });
+    };
+    const deletePreset = (option) => {
+      clearCreateState();
+      const key = String(option.key);
+      if (protectedPresetKeys.has(key) || !(key in theme.themes)) return;
+      const preset = option.preset ?? theme.themes[key];
+      const { [key]: _removed, ...nextThemes } = theme.themes;
+      const active = modeValue === key;
+      const nextBase = theme.colorScheme === "dark" ? "dark" : "light";
+      const fallbackPreset = THEME_PANEL_DEFAULT_THEME_PRESETS[nextBase];
+      const nextConfig = active ? {
+        mode: nextBase,
+        colorScheme: fallbackPreset.base,
+        accent: fallbackPreset.accent,
+        density: fallbackPreset.density,
+        intensity: fallbackPreset.intensity,
+        radius: fallbackPreset.radius,
+        font: fallbackPreset.font,
+        tokens: fallbackPreset.tokens
+      } : {};
+      theme.update({
+        ...nextConfig,
+        themes: nextThemes
+      });
+      setCreatedThemeMeta((current) => {
+        if (!(key in current)) return current;
+        const { [key]: _meta, ...next } = current;
+        return next;
+      });
+      onDeleteTheme?.({
+        key,
+        label: nodeToText(option.label, preset?.label ?? fallbackPresetLabel(key)),
+        description: nodeToText(
+          option.description,
+          preset?.description ?? (preset?.base === "dark" ? "\u6DF1\u8272" : "\u6D45\u8272")
+        ),
+        preset
+      });
+    };
+    const beginCreateTheme = () => {
+      const root = rootRef.current;
+      const base = theme.colorScheme;
+      const surface = cssColorToHex(
+        readCssVar(root, "--bg", DEFAULT_SURFACE_BY_BASE[base]),
+        DEFAULT_SURFACE_BY_BASE[base]
+      );
+      const accentPalette = readCurrentAccentPalette(root, theme.accentPalette);
+      const accent = cssColorToHex(accentPalette.accent, defaultCustomAccent);
+      const currentTokens = readCurrentThemeTokens(root, base);
+      const currentPreset = {
+        base,
+        accent: accentPalette,
+        density: theme.density,
+        intensity: theme.intensity,
+        radius: theme.radius,
+        font: theme.font,
+        tokens: currentTokens
+      };
+      const basePresets = {
+        light: base === "light" ? currentPreset : THEME_PANEL_DEFAULT_THEME_PRESETS.light,
+        dark: base === "dark" ? currentPreset : THEME_PANEL_DEFAULT_THEME_PRESETS.dark
+      };
+      previewSnapshotRef.current = {
+        mode: theme.mode,
+        colorScheme: theme.colorScheme,
+        accent: theme.accent === "custom" ? theme.accentPalette : theme.accent,
+        density: theme.density,
+        intensity: theme.intensity,
+        radius: theme.radius,
+        font: theme.font,
+        tokens: theme.tokens,
+        themes: theme.themes
+      };
+      setDraftBasePresets(basePresets);
+      setDraftName(defaultCreateThemeName);
+      setDraftBase(base);
+      setDraftSurface(cssColorToHex(currentTokens.bg ?? surface, surface));
+      setDraftTokens(currentTokens);
+      setDraftSourceSurface(cssColorToHex(currentTokens.bg ?? surface, surface));
+      setDraftSourceTokens(currentTokens);
+      setDraftAccent(accent);
+      setDraftAccentPalette(accentPalette);
+      setDraftSourceAccent(accent);
+      setDraftSourceAccentPalette(accentPalette);
+      setDraftDensity(theme.density);
+      setDraftIntensity(theme.intensity);
+      setDraftRadius(theme.radius);
+      setDraftFont(theme.font ?? "sf");
+      setAdvancedFontMode(toFontKey(theme.font) === theme.font ? "preset" : "custom");
+      setCreateMode("simple");
+      setCustomAccent(accent);
+      setPreviewDraft(true);
+      setIsCreatingTheme(true);
+    };
+    const cancelCreateTheme = () => {
+      restorePreviewSnapshot();
+      clearCreateState();
+    };
+    const toggleDraftPreview = (checked) => {
+      setPreviewDraft(checked);
+      if (!checked) restorePreviewSnapshot();
+    };
+    const updateDraftBase = (base) => {
+      const preset = draftBasePresets[base] ?? THEME_PANEL_DEFAULT_THEME_PRESETS[base];
+      const tokens = { ...preset.tokens ?? defaultBaseTokens(base) };
+      const surface = cssColorToHex(tokens.bg ?? DEFAULT_SURFACE_BY_BASE[base], DEFAULT_SURFACE_BY_BASE[base]);
+      setDraftBase(base);
+      setDraftSurface(surface);
+      setDraftTokens(tokens);
+      setDraftSourceSurface(surface);
+      setDraftSourceTokens(tokens);
+      const nextAccent = cssColorToHex(draftAccent, defaultCustomAccent);
+      const accentPalette = createAccentPalette(nextAccent, base);
+      setDraftAccent(nextAccent);
+      setDraftAccentPalette(accentPalette);
+      setDraftSourceAccent(nextAccent);
+      setDraftSourceAccentPalette(accentPalette);
+    };
+    const updateDraftSurface = (surface) => {
+      setDraftSurface(surface);
+      setDraftTokens(createDraftSurfaceTokens(surface, draftBase, draftSourceSurface, draftSourceTokens));
+    };
+    const updateDraftToken = (key, value) => {
+      setDraftTokens((current) => ({ ...current, [key]: value }));
+      if (key === "bg") setDraftSurface(cssColorToHex(value, draftSurface));
+    };
+    const updateDraftAccent = (accent) => {
+      setDraftAccent(accent);
+      setDraftAccentPalette(createDraftAccentPalette(accent, draftBase, draftSourceAccent, draftSourceAccentPalette));
+      if (previewDraft) setCustomAccent(accent);
+    };
+    const updateDraftAccentSlot = (key, value) => {
+      setDraftAccentPalette((current) => ({ ...current, [key]: value }));
+      if (key === "accent") {
+        const accent = cssColorToHex(value, draftAccent);
+        setDraftAccent(accent);
+        if (previewDraft) setCustomAccent(accent);
+      }
+    };
+    const saveCustomTheme = () => {
+      const label = draftName.trim() || defaultCreateThemeName || "\u81EA\u5B9A\u4E49\u4E3B\u9898";
+      const key = createThemeKey(label, theme.themes, createThemeKeyPrefix);
+      const description2 = draftBase === "dark" ? "\u81EA\u5EFA\u6697" : "\u81EA\u5EFA\u4EAE";
+      const preset = { ...draftPreset, label, description: description2 };
+      const presetOption = { key, label, description: description2, preset };
+      const nextThemes = { ...theme.themes, [String(key)]: preset };
+      const meta = { key, label, description: description2 };
+      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
+      });
+      setCustomAccent(draftAccent);
+      onCreateTheme?.({ ...meta, preset, presetOption });
+      clearCreateState();
+    };
+    const resetTheme = () => {
+      clearCreateState();
+      theme.reset();
+    };
+    const rootClass = ["theme-panel", compact && "compact", className].filter(Boolean).join(" ");
+    const shadowScale = parseScaleToken(
+      theme.tokens["shadow-scale"] ?? readCssVar(rootRef.current, "--shadow-scale", "1")
+    );
+    const shadowFloatScale = parseScaleToken(
+      theme.tokens["shadow-float-scale"] ?? readCssVar(rootRef.current, "--shadow-float-scale", "1")
+    );
+    const updateThemeToken = (key, value) => {
+      theme.setTokens({ ...theme.tokens, [key]: value });
+    };
+    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: [
+          /* @__PURE__ */ jsx(Icon, { name: "sliders", size: 14 }),
+          title && /* @__PURE__ */ jsx("span", { children: title })
+        ] }),
+        description && /* @__PURE__ */ jsx("div", { className: "theme-panel-desc", children: description })
+      ] }),
+      sections.includes("mode") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u6A21\u5F0F" }),
+          /* @__PURE__ */ jsx("span", { children: theme.colorScheme })
+        ] }),
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            variant: "segmented",
+            size: "sm",
+            value: modeValue,
+            options: modeOptions.map((option) => ({
+              value: String(option.key),
+              label: option.label
+            })),
+            onChange: applyMode
+          }
+        )
+      ] }),
+      sections.includes("presets") && (resolvedPresetOptions.length > 0 || allowCreateTheme) && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u4E3B\u9898\u9884\u8BBE" }),
+          /* @__PURE__ */ jsx("span", { children: modeValue })
+        ] }),
+        resolvedPresetOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "theme-panel-presets", children: resolvedPresetOptions.map((option) => {
+          const key = String(option.key);
+          const preset = option.preset ?? theme.themes[key];
+          const active = modeValue === key;
+          const deletable = allowDeleteTheme && !protectedPresetKeys.has(key) && key in theme.themes;
+          return /* @__PURE__ */ jsxs("div", { className: `theme-panel-preset-shell ${deletable ? "deletable" : ""}`, children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: `theme-panel-preset ${active ? "active" : ""}`,
+                onClick: () => applyPreset(option),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "theme-panel-preset-ink", "aria-hidden": true, children: [
+                    /* @__PURE__ */ jsx("span", { style: { background: preset?.tokens?.bg ?? "var(--bg)" } }),
+                    /* @__PURE__ */ jsx("span", { style: { background: preset?.tokens?.["bg-raised"] ?? "var(--bg-raised)" } }),
+                    /* @__PURE__ */ jsx("span", { style: { background: accentFromPreset(preset) } })
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "theme-panel-preset-copy", children: [
+                    /* @__PURE__ */ jsx("span", { children: option.label }),
+                    option.description && /* @__PURE__ */ jsx("small", { children: option.description })
+                  ] })
+                ]
+              }
+            ),
+            deletable && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "danger",
+                size: "sm",
+                icon: "trash",
+                iconOnly: true,
+                tip: `\u5220\u9664 ${nodeToText(option.label, fallbackPresetLabel(key))}`,
+                className: "theme-panel-preset-delete",
+                onClick: () => deletePreset(option)
+              }
+            )
+          ] }, key);
+        }) }),
+        allowCreateTheme && !isCreatingTheme && /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", icon: "plus", block: true, onClick: beginCreateTheme, children: "\u65B0\u5EFA\u4E3B\u9898" }),
+        allowCreateTheme && isCreatingTheme && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create", children: [
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-head", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { children: "\u65B0\u5EFA\u4E3B\u9898" }),
+              /* @__PURE__ */ jsx("small", { children: previewDraft ? "\u5B9E\u65F6\u9884\u89C8\u4E2D" : "\u9884\u89C8\u5DF2\u6682\u505C" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                size: "sm",
+                checked: previewDraft,
+                onChange: toggleDraftPreview,
+                checkedChildren: "\u9884\u89C8",
+                unCheckedChildren: "\u505C"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              value: draftName,
+              onValueChange: setDraftName,
+              placeholder: "\u8F93\u5165\u4E3B\u9898\u540D\u79F0",
+              leadingIcon: "palette",
+              allowClear: true
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              className: "theme-panel-create-mode",
+              variant: "segmented",
+              size: "sm",
+              value: createMode,
+              options: THEME_CREATE_MODE_OPTIONS.map((option) => ({
+                value: option.value,
+                label: option.label
+              })),
+              onChange: setCreateMode
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u57FA\u5E95" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                variant: "segmented",
+                size: "sm",
+                value: draftBase,
+                options: [
+                  { value: "light", label: "\u6D45" },
+                  { value: "dark", label: "\u6DF1" }
+                ],
+                onChange: updateDraftBase
+              }
+            )
+          ] }),
+          createMode === "simple" && /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-grid", children: [
+            /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+              /* @__PURE__ */ jsx("span", { children: "\u8868\u9762" }),
+              /* @__PURE__ */ jsx(ColorPicker, { size: "sm", value: draftSurface, onChange: updateDraftSurface })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+              /* @__PURE__ */ jsx("span", { children: "\u5F3A\u8C03" }),
+              /* @__PURE__ */ jsx(ColorPicker, { size: "sm", value: draftAccent, onChange: updateDraftAccent })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-sliders", children: [
+            /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+              /* @__PURE__ */ jsx("span", { children: "\u9634\u5F71\u5F3A\u5EA6" }),
+              /* @__PURE__ */ jsx("span", { children: draftIntensity })
+            ] }),
+            /* @__PURE__ */ jsx(Slider, { value: draftIntensity, onChange: setDraftIntensity, min: 1, max: 10, step: 1 }),
+            /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+              /* @__PURE__ */ jsx("span", { children: "\u5706\u89D2" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                draftRadius,
+                "px"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Slider, { value: draftRadius, onChange: setDraftRadius, min: 8, max: 36, step: 2 })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u5BC6\u5EA6" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                variant: "segmented",
+                size: "sm",
+                value: draftDensity,
+                options: DENSITY_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+                onChange: setDraftDensity
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-field", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53" }),
+            /* @__PURE__ */ jsx(
+              RadioGroup,
+              {
+                variant: "segmented",
+                size: "sm",
+                value: toFontKey(draftFont),
+                options: FONT_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+                onChange: (value) => setDraftFont(value)
+              }
+            )
+          ] }),
+          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)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "theme-panel-create-preview",
+              style: {
+                "--preview-bg": draftTokens.bg,
+                "--preview-fg": draftTokens.fg,
+                "--preview-accent": draftAccentPalette.accent,
+                "--preview-radius": `${draftRadius}px`,
+                "--preview-shadow-dark": draftTokens["shadow-dark"],
+                "--preview-shadow-light": draftTokens["shadow-light"],
+                "--preview-shadow-scale": draftTokens["shadow-scale"] ?? "1",
+                "--preview-accent-glow": draftAccentPalette.glow,
+                "--preview-font": fontToStack(draftFont)
+              },
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "theme-panel-create-preview-label", children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "palette", size: 13 }),
+                  /* @__PURE__ */ jsx("span", { children: draftName.trim() || "\u81EA\u5B9A\u4E49\u4E3B\u9898" })
+                ] }),
+                /* @__PURE__ */ jsx("i", { "aria-hidden": true })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "theme-panel-create-actions", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "x", onClick: cancelCreateTheme, children: "\u53D6\u6D88" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "primary",
+                size: "sm",
+                icon: "check",
+                onClick: saveCustomTheme,
+                disabled: !draftName.trim(),
+                children: "\u4FDD\u5B58\u4E3B\u9898"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      sections.includes("accent") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5F3A\u8C03\u8272" }),
+          /* @__PURE__ */ jsx("span", { children: theme.accent === "custom" ? customAccent : theme.accent })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-swatches", children: [
+          Object.keys(ACCENT_PRESETS).map((key) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              "aria-label": key,
+              className: `theme-panel-swatch ${theme.accent === key ? "active" : ""}`,
+              style: { background: ACCENT_PRESETS[key].accent },
+              onClick: () => theme.setAccent(key)
+            },
+            key
+          )),
+          /* @__PURE__ */ jsx(
+            ColorPicker,
+            {
+              size: "sm",
+              value: customAccent,
+              onChange: (value) => {
+                setCustomAccent(value);
+                theme.setAccent(value);
+              }
+            }
+          )
+        ] })
+      ] }),
+      sections.includes("shadow") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row theme-panel-shadow", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u9634\u5F71\u5F3A\u5EA6" }),
+          /* @__PURE__ */ jsx("span", { children: theme.intensity })
+        ] }),
+        /* @__PURE__ */ jsx(Slider, { value: theme.intensity, onChange: theme.setIntensity, min: 1, max: 10, step: 1 }),
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u9634\u5F71\u6269\u6563" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            formatScaleToken(shadowScale),
+            "x"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            value: shadowScale,
+            onChange: (value) => updateThemeToken("shadow-scale", formatScaleToken(value)),
+            min: 0.6,
+            max: 1.6,
+            step: 0.05
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u6D6E\u5C42\u6DF1\u5EA6" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            formatScaleToken(shadowFloatScale),
+            "x"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            value: shadowFloatScale,
+            onChange: (value) => updateThemeToken("shadow-float-scale", formatScaleToken(value)),
+            min: 0.6,
+            max: 1.8,
+            step: 0.05
+          }
+        )
+      ] }),
+      sections.includes("intensity") && !sections.includes("shadow") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u9634\u5F71" }),
+          /* @__PURE__ */ jsx("span", { children: theme.intensity })
+        ] }),
+        /* @__PURE__ */ jsx(Slider, { value: theme.intensity, onChange: theme.setIntensity, min: 1, max: 10, step: 1 })
+      ] }),
+      sections.includes("radius") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsxs("div", { className: "theme-panel-label", children: [
+          /* @__PURE__ */ jsx("span", { children: "\u5706\u89D2" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            theme.radius,
+            "px"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Slider, { value: theme.radius, onChange: theme.setRadius, min: 8, max: 36, step: 2 })
+      ] }),
+      sections.includes("font") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsx("span", { children: "\u5B57\u4F53" }) }),
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            variant: "segmented",
+            size: "sm",
+            value: typeof theme.font === "string" ? theme.font : "system",
+            options: FONT_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+            onChange: (value) => theme.setFont(value)
+          }
+        )
+      ] }),
+      sections.includes("density") && /* @__PURE__ */ jsxs("div", { className: "theme-panel-row", children: [
+        /* @__PURE__ */ jsx("div", { className: "theme-panel-label", children: /* @__PURE__ */ jsx("span", { children: "\u5BC6\u5EA6" }) }),
+        /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            variant: "segmented",
+            size: "sm",
+            value: theme.density,
+            options: DENSITY_OPTIONS.map((option) => ({ value: option.value, label: option.label })),
+            onChange: theme.setDensity
+          }
+        )
+      ] }),
+      showReset && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", icon: "reload", block: true, onClick: resetTheme, children: "\u91CD\u7F6E\u4E3B\u9898" })
+    ] });
+  }
+);
+ThemePanel.displayName = "ThemePanel";
+
+export { THEME_PANEL_DEFAULT_PRESET_OPTIONS, THEME_PANEL_DEFAULT_THEME_PRESETS, ThemePanel };