dsh-theme-studio 0.1.0 → 0.3.0

package/lib/theme-studio.web.js

@@ -8,33 +8,44 @@ var zh = {
   presetHint: "\u9009\u62E9\u4E00\u4E2A\u9884\u8BBE\u914D\u8272\u65B9\u6848",
   noPreset: "\u65E0\uFF08\u4F7F\u7528\u9ED8\u8BA4\uFF09",
   accentSection: "\u5F3A\u8C03\u8272",
-  accentHint: "\u81EA\u5B9A\u4E49\u754C\u9762\u5F3A\u8C03\u8272\uFF0C\u8986\u76D6\u9884\u8BBE\u4E2D\u7684\u5F3A\u8C03\u8272",
-  accentPlaceholder: "#4B8BBE",
+  accentHint: "\u540C\u65F6\u4F5C\u7528\u4E8E\u4E3B\u6309\u94AE\u3001\u94FE\u63A5\u3001\u5BFC\u822A\u9009\u4E2D\u6001\u4E0E\u60AC\u505C\u9AD8\u4EAE",
+  accentPlaceholder: "#4d6bfe",
+  accentApplying: "\u5F53\u524D\u751F\u6548\uFF1A",
+  darkAccentSection: "\u6697\u8272\u6A21\u5F0F\u5F3A\u8C03\u8272",
+  darkAccentHint: "\u6697\u8272\u6A21\u5F0F\u4E0B\u4F7F\u7528\u7684\u5F3A\u8C03\u8272\uFF0C\u7559\u7A7A\u5219\u6CBF\u7528\u4E0A\u9762\u7684\u989C\u8272",
+  preserveContrast: "\u5DF2\u81EA\u52A8\u63D0\u4EAE\u4EE5\u4FDD\u8BC1\u6697\u8272\u4E0B\u53EF\u8BFB",
+  tokenNote: "\u672C\u9762\u677F\u53EA\u5199 dsh \u771F\u5B9E\u5B58\u5728\u7684\u8BBE\u8BA1\u4EE4\u724C\uFF08{count} \u4E2A\uFF0C\u5747\u4ECE dsh \u6837\u5F0F\u8868\u6838\u5B9E\uFF09\u3002dsh \u6309\u7EC4\u4EF6\u786C\u7F16\u7801\u4E86\u5706\u89D2\u4E14\u672A\u63D0\u4F9B\u52A8\u753B\u4EE4\u724C\uFF0C\u56E0\u6B64\u4E0D\u63D0\u4F9B\u5706\u89D2\u8C03\u8282\uFF0C\u52A8\u753B\u5F00\u5173\u6539\u7528\u6837\u5F0F\u8868\u5B9E\u73B0\u3002",
   densitySection: "\u5BC6\u5EA6",
   densityCompact: "\u7D27\u51D1",
   densityComfortable: "\u8212\u9002",
   densitySpacious: "\u5BBD\u677E",
   radiusSection: "\u5706\u89D2",
-  radiusSharp: "\u9510\u5229",
-  radiusRounded: "\u5706\u89D2",
-  radiusSoft: "\u67D4\u548C",
   fontSection: "\u5B57\u4F53",
   fontSystem: "\u7CFB\u7EDF",
   fontMono: "\u7B49\u5BBD",
   fontSerif: "\u886C\u7EBF",
   customCssSection: "\u81EA\u5B9A\u4E49 CSS",
-  customCssHint: "\u76F4\u63A5\u8986\u76D6 CSS \u81EA\u5B9A\u4E49\u5C5E\u6027\uFF0C\u6BCF\u884C\u4E00\u4E2A `--property: value;`",
-  customCssPlaceholder: "--accent: #ff0000;\n--border: 1px solid red;",
+  customCssHint: "\u8986\u76D6 dsh \u4EE4\u724C\uFF0C\u6BCF\u884C\u4E00\u4E2A `--dsw-* \u6216 --dsh-*: value;`",
+  customCssPlaceholder: "--dsw-alias-brand-primary: #ff0000;\n--dsw-alias-label-primary: #111111;",
+  behaviorSection: "\u884C\u4E3A",
+  animations: "\u754C\u9762\u52A8\u753B",
+  animationsHint: "\u5173\u95ED\u53EF\u51CF\u5C11\u52A8\u753B\u5E72\u6270\uFF08\u7528\u6837\u5F0F\u8868\u628A\u8FC7\u6E21\u65F6\u957F\u538B\u5230\u8FD1\u96F6\uFF0C\u4E8B\u4EF6\u4ECD\u4F1A\u89E6\u53D1\uFF09",
+  ioSection: "\u5BFC\u5165 / \u5BFC\u51FA",
+  export: "\u5BFC\u51FA\u4E3B\u9898",
+  import: "\u5BFC\u5165\u4E3B\u9898",
+  importHint: "\u7C98\u8D34\u5BFC\u51FA\u7684 JSON\uFF0C\u6216\u4E0A\u4F20 .json \u6587\u4EF6",
+  importPlaceholder: '{"preset":"nord","accentColor":"#5e81ac",...}',
+  importFile: "\u9009\u62E9\u6587\u4EF6",
+  importSuccess: "\u4E3B\u9898\u5DF2\u5BFC\u5165",
+  importFailed: "\u5BFC\u5165\u5931\u8D25\uFF1A\u4E0D\u662F\u6709\u6548\u7684\u4E3B\u9898 JSON",
+  exportSuccess: "\u4E3B\u9898\u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F",
+  exportFailed: "\u590D\u5236\u5931\u8D25\uFF0C\u5DF2\u586B\u5165\u4E0B\u65B9\u6587\u672C\u6846",
   preview: "\u9884\u89C8",
-  apply: "\u5E94\u7528",
   reset: "\u91CD\u7F6E\u4E3A\u9ED8\u8BA4",
   resetConfirm: "\u786E\u5B9A\u8981\u91CD\u7F6E\u6240\u6709\u4E3B\u9898\u8BBE\u7F6E\u5417\uFF1F",
-  applied: "\u4E3B\u9898\u5DF2\u5E94\u7528",
   resetted: "\u5DF2\u91CD\u7F6E\u4E3A\u9ED8\u8BA4\u4E3B\u9898",
-  card: "\u5361\u7247",
-  button: "\u6309\u94AE",
-  badge: "\u6807\u7B7E",
-  text: "\u8FD9\u662F\u4E00\u6BB5\u793A\u4F8B\u6587\u672C\uFF0C\u7528\u4E8E\u9884\u89C8\u4E3B\u9898\u6548\u679C\u3002"
+  link: "\u94FE\u63A5",
+  text: "\u8FD9\u662F\u4E00\u6BB5\u793A\u4F8B\u6587\u672C\uFF0C\u7528\u4E8E\u9884\u89C8\u5B57\u53F7\u4E0E\u5B57\u4F53\u3002"
 };
 var en = {
   nav: "Theme Studio",
@@ -44,164 +55,367 @@ var en = {
   presetHint: "Choose a pre-built color scheme",
   noPreset: "None (use default)",
   accentSection: "Accent Color",
-  accentHint: "Custom accent color, overrides the preset",
-  accentPlaceholder: "#4B8BBE",
+  accentHint: "Custom accent color \u2014 drives buttons, links, the active nav item and hover tints",
+  accentPlaceholder: "#4d6bfe",
+  accentApplying: "Currently applied:",
+  darkAccentSection: "Dark Mode Accent",
+  darkAccentHint: "Accent used in dark mode; leave empty to reuse the color above",
+  preserveContrast: "Lightened automatically for dark-mode readability",
+  tokenNote: "This panel only writes design tokens that actually exist in dsh ({count} verified against its stylesheets). dsh hardcodes per-component corner radii and ships no motion tokens, so there is no radius control and the animation toggle is implemented as a stylesheet.",
   densitySection: "Density",
   densityCompact: "Compact",
   densityComfortable: "Comfortable",
   densitySpacious: "Spacious",
   radiusSection: "Border Radius",
-  radiusSharp: "Sharp",
-  radiusRounded: "Rounded",
-  radiusSoft: "Soft",
+  radiusUnavailable: "dsh ships no radius token, so this cannot be adjusted",
   fontSection: "Font Family",
   fontSystem: "System",
   fontMono: "Monospace",
   fontSerif: "Serif",
   customCssSection: "Custom CSS",
-  customCssHint: "Override CSS custom properties directly, one `--property: value;` per line",
-  customCssPlaceholder: "--accent: #ff0000;\n--border: 1px solid red;",
+  customCssHint: "Override dsh tokens, one `--dsw-* or --dsh-*: value;` per line",
+  customCssPlaceholder: "--dsw-alias-brand-primary: #ff0000;\n--dsw-alias-label-primary: #111111;",
+  behaviorSection: "Behavior",
+  animations: "UI Animations",
+  animationsHint: "Turn off to reduce motion (a stylesheet compresses transition durations to near-zero so events still fire)",
+  ioSection: "Import / Export",
+  export: "Export Theme",
+  import: "Import Theme",
+  importHint: "Paste exported JSON, or upload a .json file",
+  importPlaceholder: '{"preset":"nord","accentColor":"#5e81ac",...}',
+  importFile: "Choose File",
+  importSuccess: "Theme imported",
+  importFailed: "Import failed: not a valid theme JSON",
+  exportSuccess: "Theme copied to clipboard",
+  exportFailed: "Copy failed \u2014 filled into the box below",
   preview: "Preview",
-  apply: "Apply",
   reset: "Reset to Default",
   resetConfirm: "Reset all theme settings to default?",
-  applied: "Theme applied",
   resetted: "Reset to default theme",
-  card: "Card",
-  button: "Button",
-  badge: "Badge",
-  text: "This is sample text to preview the theme."
+  link: "Link",
+  text: "Sample text for previewing size and font family."
 };
 
 // src/client/view.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 
 // src/types.ts
 var DEFAULT_PREFERENCES = {
   preset: null,
   accentColor: null,
+  darkAccentColor: null,
   density: "comfortable",
-  radius: "rounded",
   fontFamily: "system",
+  animations: true,
   customCss: ""
 };
 var STORAGE_KEY = "dsh-theme-studio";
+var STYLE_ELEMENT_ID = "dsh-theme-studio-overrides";
 
-// src/themes.ts
-var PRESETS = [
-  {
-    id: "ocean",
-    name: "Ocean",
-    description: "Deep blue accent with cool neutrals",
-    tokens: {
-      "--accent": "#2563eb",
-      "--accent-hover": "#1d4ed8",
-      "--dsw-alias-state-business-primary": "#2563eb",
-      "--dsw-alias-state-business-secondary": "#dbeafe",
-      "--dsw-alias-interactive-bg-hover": "rgba(37,99,235,0.08)"
-    }
-  },
-  {
-    id: "forest",
-    name: "Forest",
-    description: "Green accent with earthy neutrals",
-    tokens: {
-      "--accent": "#16a34a",
-      "--accent-hover": "#15803d",
-      "--dsw-alias-state-business-primary": "#16a34a",
-      "--dsw-alias-state-business-secondary": "#dcfce7",
-      "--dsw-alias-interactive-bg-hover": "rgba(22,163,74,0.08)"
-    }
-  },
-  {
-    id: "sunset",
-    name: "Sunset",
-    description: "Warm orange accent with amber highlights",
-    tokens: {
-      "--accent": "#ea580c",
-      "--accent-hover": "#c2410c",
-      "--dsw-alias-state-business-primary": "#ea580c",
-      "--dsw-alias-state-business-secondary": "#fed7aa",
-      "--dsw-alias-interactive-bg-hover": "rgba(234,88,12,0.08)"
-    }
-  },
-  {
-    id: "monochrome",
-    name: "Monochrome",
-    description: "Grayscale only \u2014 no color accent",
-    tokens: {
-      "--accent": "#404040",
-      "--accent-hover": "#262626",
-      "--dsw-alias-state-business-primary": "#404040",
-      "--dsw-alias-state-business-secondary": "#e5e5e5",
-      "--dsw-alias-interactive-bg-hover": "rgba(64,64,64,0.08)"
-    }
-  },
-  {
-    id: "nord",
-    name: "Nord",
-    description: "Frost blue inspired by the Nord palette",
-    tokens: {
-      "--accent": "#5e81ac",
-      "--accent-hover": "#4c6f96",
-      "--dsw-alias-state-business-primary": "#5e81ac",
-      "--dsw-alias-state-business-secondary": "#e5ebf1",
-      "--dsw-alias-interactive-bg-hover": "rgba(94,129,172,0.08)"
-    }
-  },
-  {
-    id: "dracula",
-    name: "Dracula",
-    description: "Purple accent with dark mode flair",
-    tokens: {
-      "--accent": "#bd93f9",
-      "--accent-hover": "#a678e8",
-      "--dsw-alias-state-business-primary": "#bd93f9",
-      "--dsw-alias-state-business-secondary": "#3a3a5c",
-      "--dsw-alias-interactive-bg-hover": "rgba(189,147,249,0.12)"
-    }
-  }
+// src/tokens.ts
+var VERIFIED_TOKENS = [
+  // Accent / business
+  "--dsw-alias-state-business-primary",
+  "--dsw-alias-state-business-tertiary",
+  "--dsw-alias-brand-primary",
+  "--dsw-alias-brand-text",
+  "--dsw-alias-link",
+  "--dsw-alias-interactive-bg-hover",
+  "--dsw-alias-interactive-bg-hover-accent",
+  "--dsw-alias-button-primary-fill",
+  "--dsw-alias-button-primary-hover",
+  // Typography
+  "--dsw-font-family",
+  "--dsw-font-mono",
+  "--dsw-font-xs-13",
+  "--dsw-font-xs-strong-13",
+  "--dsw-font-xxs-12",
+  "--dsw-font-xxxs-11",
+  "--dsw-font-s-14",
+  "--dsw-font-l-20",
+  "--dsh-content-font-size",
+  "--dsh-content-font-delta"
 ];
-var DENSITY_TOKENS = {
-  compact: {
-    "--dsh-content-font-size": "13px",
-    "--dsh-spacing-unit": "4px"
-  },
-  comfortable: {
-    "--dsh-content-font-size": "14px",
-    "--dsh-spacing-unit": "6px"
-  },
-  spacious: {
-    "--dsh-content-font-size": "15px",
-    "--dsh-spacing-unit": "8px"
+var VERIFIED = new Set(VERIFIED_TOKENS);
+function tint(hex, alpha) {
+  const value = hex.trim().replace(/^#/, "");
+  let r;
+  let g;
+  let b;
+  if (value.length === 3) {
+    r = parseInt(value[0] + value[0], 16);
+    g = parseInt(value[1] + value[1], 16);
+    b = parseInt(value[2] + value[2], 16);
+  } else if (value.length === 6) {
+    r = parseInt(value.slice(0, 2), 16);
+    g = parseInt(value.slice(2, 4), 16);
+    b = parseInt(value.slice(4, 6), 16);
+  } else {
+    return hex;
   }
+  if ([r, g, b].some((n) => Number.isNaN(n))) return hex;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function accentTokens(hex) {
+  return {
+    "--dsw-alias-state-business-primary": hex,
+    "--dsw-alias-state-business-tertiary": tint(hex, 0.12),
+    "--dsw-alias-brand-primary": hex,
+    "--dsw-alias-brand-text": hex,
+    "--dsw-alias-link": hex,
+    "--dsw-alias-interactive-bg-hover-accent": tint(hex, 0.1),
+    "--dsw-alias-button-primary-fill": hex,
+    "--dsw-alias-button-primary-hover": hex
+  };
+}
+var DENSITY_TOKENS = {
+  compact: { "--dsh-content-font-size": "13px" },
+  comfortable: { "--dsh-content-font-size": "14px" },
+  spacious: { "--dsh-content-font-size": "15px" }
 };
-var RADIUS_TOKENS = {
-  sharp: {
-    "--dsh-radius-small": "2px",
-    "--dsh-radius-medium": "4px",
-    "--dsh-radius-large": "6px"
+var FONT_TOKENS = {
+  system: {
+    "--dsw-font-family": "system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--dsw-font-mono": "'Cascadia Code', 'JetBrains Mono', Consolas, monospace"
   },
-  rounded: {
-    "--dsh-radius-small": "6px",
-    "--dsh-radius-medium": "10px",
-    "--dsh-radius-large": "14px"
+  mono: {
+    "--dsw-font-family": "'Cascadia Code', 'JetBrains Mono', Consolas, monospace",
+    "--dsw-font-mono": "'Cascadia Code', 'JetBrains Mono', Consolas, monospace"
   },
-  soft: {
-    "--dsh-radius-small": "10px",
-    "--dsh-radius-medium": "16px",
-    "--dsh-radius-large": "22px"
+  serif: {
+    "--dsw-font-family": "Georgia, 'Times New Roman', serif",
+    "--dsw-font-mono": "'Cascadia Code', Consolas, monospace"
   }
 };
-var FONT_TOKENS = {
-  system: { "--dsh-font-family": "system-ui, -apple-system, sans-serif" },
-  mono: { "--dsh-font-family": "'JetBrains Mono', 'Fira Code', monospace" },
-  serif: { "--dsh-font-family": "'Georgia', 'Times New Roman', serif" }
-};
+var MOTION_OFF_CSS = `
+*, *::before, *::after {
+  transition-duration: 0.001ms !important;
+  transition-delay: 0ms !important;
+  animation-duration: 0.001ms !important;
+  animation-delay: 0ms !important;
+  animation-iteration-count: 1 !important;
+  scroll-behavior: auto !important;
+}
+`.trim();
+
+// src/themes.ts
+function preset(id, name, description, lightAccent, darkAccent) {
+  const base = { id, name, description, tokens: accentTokens(lightAccent) };
+  if (darkAccent !== void 0 && darkAccent.toLowerCase() !== lightAccent.toLowerCase()) {
+    base.darkTokens = accentTokens(darkAccent);
+  }
+  return base;
+}
+var PRESETS = [
+  preset("ocean", "Ocean", "Deep blue, close to dsh default", "#4d6bfe"),
+  preset("forest", "Forest", "Calm green", "#16a34a", "#22c55e"),
+  preset("sunset", "Sunset", "Warm orange", "#ea580c", "#fb923c"),
+  preset("monochrome", "Monochrome", "No color accent at all", "#5c5c5c", "#9e9e9e"),
+  preset("nord", "Nord", "Frost blue", "#5e81ac", "#88c0d0"),
+  preset("dracula", "Dracula", "Purple, brighter on dark", "#7c5cd6", "#bd93f9"),
+  preset("gruvbox", "Gruvbox", "Retro warm earth tones", "#b57614", "#fe8019"),
+  preset("solarized", "Solarized", "Schoonover precision palette", "#268bd2", "#5fa8d3"),
+  preset("tokyo-night", "Tokyo Night", "City lights blue", "#3d59a1", "#7aa2f7"),
+  preset("catppuccin", "Catppuccin", "Soft pastel", "#7287fd", "#cba6f7"),
+  preset("rose", "Ros\xE9", "Muted pink", "#b3276b", "#f472b6"),
+  preset("ember", "Ember", "Deep red", "#b91c1c", "#ef4444")
+];
 function getPreset(id) {
   return PRESETS.find((p) => p.id === id);
 }
 
+// src/io.ts
+function exportTheme(prefs, name) {
+  const payload = {
+    $schema: "dsh-theme-studio/v1",
+    preferences: prefs,
+    exportedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  if (name !== void 0) payload.name = name;
+  return JSON.stringify(payload, null, 2);
+}
+var DENSITIES = /* @__PURE__ */ new Set(["compact", "comfortable", "spacious"]);
+var FONTS = /* @__PURE__ */ new Set(["system", "mono", "serif"]);
+function asColor(value) {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  if (trimmed === "") return null;
+  return /^#[0-9a-fA-F]{3,8}$/.test(trimmed) ? trimmed : null;
+}
+function parseTheme(raw) {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+  const doc = parsed;
+  const source = doc["preferences"] !== null && typeof doc["preferences"] === "object" && !Array.isArray(doc["preferences"]) ? doc["preferences"] : doc;
+  const result = { ...DEFAULT_PREFERENCES };
+  if (typeof source["preset"] === "string" || source["preset"] === null) {
+    result.preset = source["preset"];
+  }
+  result.accentColor = asColor(source["accentColor"]);
+  result.darkAccentColor = asColor(source["darkAccentColor"]);
+  if (typeof source["density"] === "string" && DENSITIES.has(source["density"])) {
+    result.density = source["density"];
+  }
+  if (typeof source["fontFamily"] === "string" && FONTS.has(source["fontFamily"])) {
+    result.fontFamily = source["fontFamily"];
+  }
+  if (typeof source["animations"] === "boolean") result.animations = source["animations"];
+  if (typeof source["customCss"] === "string") result.customCss = source["customCss"];
+  return result;
+}
+function hexToRgb(hex) {
+  const value = hex.trim().replace(/^#/, "");
+  if (value.length === 3) {
+    const [r, g, b] = value.split("");
+    return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)];
+  }
+  if (value.length === 6) {
+    return [
+      parseInt(value.slice(0, 2), 16),
+      parseInt(value.slice(2, 4), 16),
+      parseInt(value.slice(4, 6), 16)
+    ];
+  }
+  return null;
+}
+function luminance(hex) {
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return 0;
+  const [r, g, b] = rgb.map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rgbToHex(r, g, b) {
+  const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
+  return "#" + [r, g, b].map((n) => clamp(n).toString(16).padStart(2, "0")).join("");
+}
+function lighten(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (rgb === null) return hex;
+  const [r, g, b] = rgb;
+  return rgbToHex(
+    r + (255 - r) * amount,
+    g + (255 - g) * amount,
+    b + (255 - b) * amount
+  );
+}
+function ensureDarkContrast(hex) {
+  const MIN_LUMINANCE = 0.18;
+  if (hexToRgb(hex) === null) return { color: hex, adjusted: false };
+  if (luminance(hex) >= MIN_LUMINANCE) return { color: hex, adjusted: false };
+  let current = hex;
+  for (let i = 0; i < 10; i += 1) {
+    current = lighten(current, 0.12);
+    if (luminance(current) >= MIN_LUMINANCE) return { color: current, adjusted: true };
+  }
+  return { color: current, adjusted: true };
+}
+
+// src/apply.ts
+function themeTarget() {
+  if (typeof document === "undefined") return null;
+  return document.body ?? null;
+}
+function isDshToken(name) {
+  return /^--dsh-\S+$/.test(name) || /^--dsw-\S+$/.test(name);
+}
+function isDarkMode() {
+  if (typeof document === "undefined") return false;
+  return document.body.hasAttribute("data-ds-dark-theme");
+}
+function observeDarkMode(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  const observer = new MutationObserver(() => onChange(isDarkMode()));
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ["data-ds-dark-theme"]
+  });
+  return () => observer.disconnect();
+}
+function resolveAccent(prefs, dark) {
+  const chosen = dark ? prefs.darkAccentColor ?? prefs.accentColor : prefs.accentColor;
+  if (chosen === null || chosen.trim() === "") return { accent: null, adjusted: false };
+  if (!dark) return { accent: chosen, adjusted: false };
+  const guarded = ensureDarkContrast(chosen);
+  return { accent: guarded.color, adjusted: guarded.adjusted };
+}
+function parseCustomCss(css, allow) {
+  const out = {};
+  for (const line of css.split("\n")) {
+    const match = line.match(/^\s*(--[\w-]+)\s*:\s*([^;{}/*]+?)\s*;?\s*$/);
+    if (match === null) continue;
+    if (!allow(match[1])) continue;
+    out[match[1]] = match[2];
+  }
+  return out;
+}
+function clearManagedProperties(fullCustomCss = "") {
+  const target = themeTarget();
+  if (target === null) return;
+  const names = /* @__PURE__ */ new Set([
+    ...Object.keys(accentTokens("#000000")),
+    ...Object.values(DENSITY_TOKENS).flatMap((t) => Object.keys(t)),
+    ...Object.values(FONT_TOKENS).flatMap((t) => Object.keys(t))
+  ]);
+  for (const line of fullCustomCss.split("\n")) {
+    const match = line.match(/^\s*(--[\w-]+)\s*:/);
+    if (match !== null) names.add(match[1]);
+  }
+  for (const name of names) target.style.removeProperty(name);
+}
+function motionStylesheet() {
+  if (typeof document === "undefined") return null;
+  let el = document.getElementById(STYLE_ELEMENT_ID);
+  if (el === null) {
+    el = document.createElement("style");
+    el.id = STYLE_ELEMENT_ID;
+    document.head.appendChild(el);
+  }
+  return el;
+}
+function applyTheme(prefs, dark = isDarkMode()) {
+  const target = themeTarget();
+  if (target === null) return false;
+  clearManagedProperties(prefs.customCss);
+  const tokens = {};
+  if (prefs.preset !== null) {
+    const found = getPreset(prefs.preset);
+    if (found !== void 0) {
+      Object.assign(tokens, found.tokens);
+      if (dark && found.darkTokens !== void 0) Object.assign(tokens, found.darkTokens);
+    }
+  }
+  const { accent, adjusted } = resolveAccent(prefs, dark);
+  if (accent !== null) Object.assign(tokens, accentTokens(accent));
+  Object.assign(tokens, DENSITY_TOKENS[prefs.density] ?? {});
+  Object.assign(tokens, FONT_TOKENS[prefs.fontFamily] ?? {});
+  for (const [name, value] of Object.entries(tokens)) {
+    target.style.setProperty(name, value);
+  }
+  const custom = parseCustomCss(prefs.customCss, isDshToken);
+  for (const [name, value] of Object.entries(custom)) {
+    target.style.setProperty(name, value);
+  }
+  const sheet = motionStylesheet();
+  if (sheet !== null) sheet.textContent = prefs.animations ? "" : MOTION_OFF_CSS;
+  return adjusted;
+}
+function resetTheme() {
+  clearManagedProperties();
+  const sheet = typeof document !== "undefined" ? document.getElementById(STYLE_ELEMENT_ID) : null;
+  if (sheet !== null) sheet.textContent = "";
+}
+
 // src/client/ui.tsx
 import {
   createContext,
@@ -570,7 +784,7 @@ function ToastProvider({ children }) {
               fontWeight: 500,
               boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
               color: "#fff",
-              background: t.type === "success" ? T.success : t.type === "error" ? T.error : T.accent,
+              background: t.type === "success" ? T.success : t.type === "error" ? T.error : t.type === "warning" ? T.warning : T.accent,
               maxWidth: 360
             },
             children: t.message
@@ -669,59 +883,9 @@ function savePreferences(prefs) {
   if (typeof localStorage === "undefined") return;
   localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
 }
-function applyTheme(prefs) {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  const allTokens = {};
-  if (prefs.preset !== null) {
-    const preset = getPreset(prefs.preset);
-    if (preset !== void 0) Object.assign(allTokens, preset.tokens);
-  }
-  if (prefs.accentColor !== null && prefs.accentColor.trim() !== "") {
-    allTokens["--accent"] = prefs.accentColor;
-  }
-  Object.assign(allTokens, DENSITY_TOKENS[prefs.density] ?? {});
-  Object.assign(allTokens, RADIUS_TOKENS[prefs.radius] ?? {});
-  Object.assign(allTokens, FONT_TOKENS[prefs.fontFamily] ?? {});
-  for (const [prop, value] of Object.entries(allTokens)) {
-    root.style.setProperty(prop, value);
-  }
-  if (prefs.customCss.trim() !== "") {
-    for (const line of prefs.customCss.split("\n")) {
-      const match = line.match(/^\s*(--[\w-]+)\s*:\s*(.+?)\s*;?\s*$/);
-      if (match !== null) {
-        root.style.setProperty(match[1], match[2]);
-      }
-    }
-  }
-}
-function clearTheme() {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  const known = /* @__PURE__ */ new Set([
-    "--accent",
-    "--accent-hover",
-    "--dsh-content-font-size",
-    "--dsh-spacing-unit",
-    "--dsh-radius-small",
-    "--dsh-radius-medium",
-    "--dsh-radius-large",
-    "--dsh-font-family",
-    "--dsw-alias-state-business-primary",
-    "--dsw-alias-state-business-secondary",
-    "--dsw-alias-interactive-bg-hover"
-  ]);
-  for (const prop of known) root.style.removeProperty(prop);
-  const prefs = loadPreferences();
-  if (prefs.customCss.trim() !== "") {
-    for (const line of prefs.customCss.split("\n")) {
-      const match = line.match(/^\s*(--[\w-]+)\s*:/);
-      if (match !== null) root.style.removeProperty(match[1]);
-    }
-  }
-}
-function PresetCard({ preset, selected, onClick }) {
-  const accent = preset.tokens["--accent"] ?? "#4B8BBE";
+function PresetCard({ preset: preset2, selected, onClick }) {
+  const accent = preset2.tokens["--dsw-alias-state-business-primary"] ?? "#4d6bfe";
+  const darkAccent = preset2.darkTokens?.["--dsw-alias-state-business-primary"];
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -730,23 +894,31 @@ function PresetCard({ preset, selected, onClick }) {
         cursor: "pointer",
         borderRadius: 10,
         padding: 12,
-        border: selected ? "2px solid var(--accent, #4B8BBE)" : "1px solid var(--border, rgba(128,128,128,0.2))",
-        background: selected ? "rgba(75,139,190,0.06)" : "var(--bg-secondary, rgba(128,128,128,0.04))",
+        border: selected ? `2px solid ${accent}` : "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
+        background: selected ? "var(--dsw-alias-interactive-bg-hover-accent, rgba(77,107,254,0.08))" : "transparent",
         transition: "all 0.15s ease"
       },
       children: [
-        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
-          /* @__PURE__ */ jsx2("div", { style: { width: 16, height: 16, borderRadius: "50%", background: accent, border: "1px solid rgba(128,128,128,0.2)" } }),
-          /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: preset.name }),
-          selected && /* @__PURE__ */ jsx2(Badge, { color: "info", children: "\u2713" })
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }, children: [
+          /* @__PURE__ */ jsxs2("span", { style: { display: "flex", gap: 3 }, children: [
+            /* @__PURE__ */ jsx2("i", { style: { width: 14, height: 14, borderRadius: "50%", background: accent, display: "block" } }),
+            darkAccent !== void 0 && /* @__PURE__ */ jsx2("i", { style: { width: 14, height: 14, borderRadius: "50%", background: darkAccent, display: "block" } })
+          ] }),
+          /* @__PURE__ */ jsx2("strong", { style: { fontSize: 13 }, children: preset2.name }),
+          selected && /* @__PURE__ */ jsx2(Badge, { color: "success", children: "\u2713" })
         ] }),
-        /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.6 }, children: preset.description })
+        /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.65, lineHeight: 1.4 }, children: preset2.description })
       ]
     }
   );
 }
 function Segmented({ value, options, onChange }) {
-  return /* @__PURE__ */ jsx2("div", { style: { display: "inline-flex", borderRadius: 8, overflow: "hidden", border: "1px solid var(--border, rgba(128,128,128,0.2))" }, children: options.map((opt) => /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2("div", { style: {
+    display: "inline-flex",
+    borderRadius: 8,
+    overflow: "hidden",
+    border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))"
+  }, children: options.map((opt) => /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
@@ -758,8 +930,8 @@ function Segmented({ value, options, onChange }) {
         fontSize: 13,
         fontWeight: 500,
         fontFamily: "inherit",
-        background: value === opt.value ? "var(--accent, #4B8BBE)" : "transparent",
-        color: value === opt.value ? "#fff" : "var(--text-primary, inherit)",
+        background: value === opt.value ? "var(--dsw-alias-button-primary-fill, #4d6bfe)" : "transparent",
+        color: value === opt.value ? "#fff" : "inherit",
         transition: "all 0.15s ease"
       },
       children: opt.label
@@ -767,55 +939,265 @@ function Segmented({ value, options, onChange }) {
     opt.value
   )) });
 }
-function PreviewArea({ t }) {
-  return /* @__PURE__ */ jsx2(Card, { title: t("preview"), icon: "\u{1F441}", children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx2(Badge, { color: "info", children: "Info" }),
-      /* @__PURE__ */ jsx2(Badge, { color: "success", children: "Success" }),
-      /* @__PURE__ */ jsx2(Badge, { color: "warning", children: "Warning" }),
-      /* @__PURE__ */ jsx2(Badge, { color: "error", children: "Error" })
-    ] }),
-    /* @__PURE__ */ jsxs2(Card, { children: [
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 13, marginBottom: 8 }, children: t("text") }),
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx2(Button, { variant: "primary", size: "sm", children: t("button") }),
-        /* @__PURE__ */ jsx2(Button, { variant: "secondary", size: "sm", children: "Secondary" }),
-        /* @__PURE__ */ jsx2(Button, { variant: "danger", size: "sm", children: "Danger" })
+function ColorRow({ value, onChange, placeholder }) {
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "color",
+        value: value ?? "#4d6bfe",
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          width: 40,
+          height: 40,
+          cursor: "pointer",
+          borderRadius: 8,
+          border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      Input,
+      {
+        value: value ?? "",
+        onChange: (e) => onChange(e.target.value.trim() === "" ? null : e.target.value),
+        placeholder,
+        style: { maxWidth: 200 }
+      }
+    ),
+    value !== null && /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => onChange(null), children: "\u2715" })
+  ] });
+}
+function PreviewArea({ t, dark, accentApplied }) {
+  return /* @__PURE__ */ jsx2(
+    Card,
+    {
+      title: t("preview"),
+      icon: "\u{1F441}",
+      actions: /* @__PURE__ */ jsx2(Badge, { color: dark ? "info" : "warning", children: dark ? "\u{1F319} dark" : "\u2600 light" }),
+      children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }, children: [
+          /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 12 }, children: [
+            /* @__PURE__ */ jsx2("i", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: 4,
+              display: "block",
+              background: "var(--dsw-alias-state-business-primary, #4d6bfe)"
+            } }),
+            "accent"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 12 }, children: [
+            /* @__PURE__ */ jsx2("i", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: 4,
+              display: "block",
+              background: "var(--dsw-alias-button-primary-fill, #4d6bfe)"
+            } }),
+            "button"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 12 }, children: [
+            /* @__PURE__ */ jsx2("i", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: 4,
+              display: "block",
+              background: "var(--dsw-alias-label-primary, currentColor)"
+            } }),
+            "label"
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 12 }, children: [
+            /* @__PURE__ */ jsx2("i", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: 4,
+              display: "block",
+              background: "var(--dsw-alias-bg-layer-1, rgba(128,128,128,0.1))",
+              border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))"
+            } }),
+            "surface"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: {
+          padding: 12,
+          borderRadius: 10,
+          border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
+          background: "var(--dsw-alias-bg-layer-1, transparent)"
+        }, children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              style: {
+                fontSize: "var(--dsh-content-font-size, 14px)",
+                fontFamily: "var(--dsw-font-family, inherit)",
+                marginBottom: 10
+              },
+              children: t("text")
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx2("span", { style: {
+              display: "inline-block",
+              padding: "7px 16px",
+              borderRadius: 7,
+              background: "var(--dsw-alias-button-primary-fill, #4d6bfe)",
+              color: "var(--dsw-alias-label-primary-inverted, #fff)",
+              fontSize: 13
+            }, children: t("button") }),
+            /* @__PURE__ */ jsx2("span", { style: {
+              display: "inline-block",
+              padding: "7px 16px",
+              borderRadius: 7,
+              border: "1px solid var(--dsw-alias-border-l2, rgba(128,128,128,0.25))",
+              fontSize: 13
+            }, children: t("link") }),
+            /* @__PURE__ */ jsx2(
+              "a",
+              {
+                href: "#preview",
+                onClick: (e) => e.preventDefault(),
+                style: { color: "var(--dsw-alias-link, #4d6bfe)", fontSize: 13 },
+                children: t("link")
+              }
+            )
+          ] })
+        ] }),
+        accentApplied !== null && /* @__PURE__ */ jsxs2("div", { style: { fontSize: 11, opacity: 0.6, fontFamily: "var(--dsw-font-mono, monospace)" }, children: [
+          t("accentApplying"),
+          " ",
+          accentApplied
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
+}
+function TokenCoverage({ t }) {
+  return /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.55, lineHeight: 1.5 }, children: t("tokenNote", { count: VERIFIED_TOKENS.length }) });
 }
 function ThemePanelInner({ t }) {
   const toast = useToast();
   const [prefs, setPrefs] = useState2(loadPreferences);
+  const [dark, setDark] = useState2(isDarkMode);
+  const [contrastAdjusted, setContrastAdjusted] = useState2(false);
   const [confirmReset, setConfirmReset] = useState2(false);
+  const [importText, setImportText] = useState2("");
+  const [importOpen, setImportOpen] = useState2(false);
+  const fileInput = useRef(null);
   useEffect2(() => {
-    applyTheme(prefs);
+    setContrastAdjusted(applyTheme(prefs, dark));
     savePreferences(prefs);
-  }, [prefs]);
+  }, [prefs, dark]);
+  useEffect2(() => observeDarkMode(setDark), []);
+  useEffect2(() => () => {
+    applyTheme(loadPreferences(), isDarkMode());
+  }, []);
   const update = useCallback2((key, value) => {
     setPrefs((p) => ({ ...p, [key]: value }));
   }, []);
   const handleReset = useCallback2(() => {
-    clearTheme();
+    resetTheme();
     setPrefs({ ...DEFAULT_PREFERENCES });
+    setConfirmReset(false);
     toast("success", t("resetted"));
   }, [t, toast]);
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 820 }, children: [
-    /* @__PURE__ */ jsxs2("header", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+  const handleExport = useCallback2(() => {
+    const json = exportTheme(prefs);
+    const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+    if (clipboard === void 0) {
+      setImportText(json);
+      setImportOpen(true);
+      toast("warning", t("exportFailed"));
+      return;
+    }
+    clipboard.writeText(json).then(
+      () => toast("success", t("exportSuccess")),
+      () => {
+        setImportText(json);
+        setImportOpen(true);
+        toast("warning", t("exportFailed"));
+      }
+    );
+  }, [prefs, t, toast]);
+  const runImport = useCallback2((raw) => {
+    const parsed = parseTheme(raw);
+    if (parsed === null) {
+      toast("error", t("importFailed"));
+      return;
+    }
+    setPrefs(parsed);
+    setImportOpen(false);
+    setImportText("");
+    toast("success", t("importSuccess"));
+  }, [t, toast]);
+  const handleFile = useCallback2((file) => {
+    if (file === void 0) return;
+    file.text().then(runImport, () => toast("error", t("importFailed")));
+  }, [runImport, t, toast]);
+  const { accent: accentApplied } = resolveAccent(prefs, dark);
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 16, maxWidth: 860 }, children: [
+    /* @__PURE__ */ jsxs2("header", { style: { display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }, children: [
       /* @__PURE__ */ jsxs2("strong", { style: { fontSize: 15 }, children: [
         "\u{1F3A8} ",
         t("title")
       ] }),
       /* @__PURE__ */ jsx2("span", { style: { fontSize: 12, opacity: 0.6 }, children: t("subtitle") }),
       /* @__PURE__ */ jsx2("span", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsxs2(Button, { variant: "secondary", size: "sm", onClick: handleExport, children: [
+        "\u2934 ",
+        t("export")
+      ] }),
+      /* @__PURE__ */ jsxs2(Button, { variant: "secondary", size: "sm", onClick: () => setImportOpen((v) => !v), children: [
+        "\u2935 ",
+        t("import")
+      ] }),
       /* @__PURE__ */ jsxs2(Button, { variant: "danger", size: "sm", onClick: () => setConfirmReset(true), children: [
         "\u21BA ",
         t("reset")
       ] })
     ] }),
+    importOpen && /* @__PURE__ */ jsxs2(Card, { title: t("import"), icon: "\u2935", children: [
+      /* @__PURE__ */ jsx2(Field, { label: t("import"), hint: t("importHint"), children: /* @__PURE__ */ jsx2(
+        Textarea,
+        {
+          value: importText,
+          onChange: (e) => setImportText(e.target.value),
+          placeholder: t("importPlaceholder"),
+          rows: 5
+        }
+      ) }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: [
+        /* @__PURE__ */ jsx2(
+          Button,
+          {
+            variant: "primary",
+            size: "sm",
+            onClick: () => runImport(importText),
+            disabled: importText.trim() === "",
+            children: t("import")
+          }
+        ),
+        /* @__PURE__ */ jsxs2(Button, { variant: "secondary", size: "sm", onClick: () => fileInput.current?.click(), children: [
+          "\u{1F4C4} ",
+          t("importFile")
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            ref: fileInput,
+            type: "file",
+            accept: "application/json,.json",
+            style: { display: "none" },
+            onChange: (e) => {
+              handleFile(e.target.files?.[0]);
+              e.target.value = "";
+            }
+          }
+        )
+      ] })
+    ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F3AD}", children: t("presetSection") }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 10 }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(190px, 1fr))", gap: 10 }, children: [
       /* @__PURE__ */ jsx2(
         PresetCard,
         {
@@ -836,28 +1218,28 @@ function ThemePanelInner({ t }) {
     ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F308}", children: t("accentSection") }),
     /* @__PURE__ */ jsxs2(Card, { children: [
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "color",
-            value: prefs.accentColor ?? "#4B8BBE",
-            onChange: (e) => update("accentColor", e.target.value),
-            style: { width: 40, height: 40, cursor: "pointer", borderRadius: 8, border: "1px solid var(--border, rgba(128,128,128,0.2))" }
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          Input,
-          {
-            value: prefs.accentColor ?? "",
-            onChange: (e) => update("accentColor", e.target.value || null),
-            placeholder: t("accentPlaceholder"),
-            style: { maxWidth: 200 }
-          }
-        ),
-        prefs.accentColor !== null && /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => update("accentColor", null), children: "\u2715" })
-      ] }),
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6 }, children: t("accentHint") })
+      /* @__PURE__ */ jsx2(
+        ColorRow,
+        {
+          value: prefs.accentColor,
+          onChange: (v) => update("accentColor", v),
+          placeholder: t("accentPlaceholder")
+        }
+      ),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.55, marginTop: 6 }, children: t("accentHint") }),
+      /* @__PURE__ */ jsx2("div", { style: { height: 14 } }),
+      /* @__PURE__ */ jsx2(Field, { label: t("darkAccentSection"), hint: t("darkAccentHint"), children: /* @__PURE__ */ jsx2(
+        ColorRow,
+        {
+          value: prefs.darkAccentColor,
+          onChange: (v) => update("darkAccentColor", v),
+          placeholder: t("accentPlaceholder")
+        }
+      ) }),
+      contrastAdjusted && /* @__PURE__ */ jsx2("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsxs2(Badge, { color: "warning", children: [
+        "\u26A0 ",
+        t("preserveContrast")
+      ] }) })
     ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F4D0}", children: t("densitySection") }),
     /* @__PURE__ */ jsx2(
@@ -872,19 +1254,6 @@ function ThemePanelInner({ t }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u2B1C", children: t("radiusSection") }),
-    /* @__PURE__ */ jsx2(
-      Segmented,
-      {
-        value: prefs.radius,
-        onChange: (v) => update("radius", v),
-        options: [
-          { value: "sharp", label: t("radiusSharp") },
-          { value: "rounded", label: t("radiusRounded") },
-          { value: "soft", label: t("radiusSoft") }
-        ]
-      }
-    ),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u{1F524}", children: t("fontSection") }),
     /* @__PURE__ */ jsx2(
       Segmented,
@@ -898,6 +1267,23 @@ function ThemePanelInner({ t }) {
         ]
       }
     ),
+    /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u2699", children: t("behaviorSection") }),
+    /* @__PURE__ */ jsxs2(Card, { children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "theme-animations",
+            type: "checkbox",
+            checked: prefs.animations,
+            onChange: (e) => update("animations", e.target.checked),
+            style: { width: 16, height: 16, cursor: "pointer" }
+          }
+        ),
+        /* @__PURE__ */ jsx2("label", { htmlFor: "theme-animations", style: { fontSize: 13, cursor: "pointer" }, children: t("animations") })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.55, marginTop: 6, marginLeft: 26 }, children: t("animationsHint") })
+    ] }),
     /* @__PURE__ */ jsx2(SectionTitle, { icon: "\u270F\uFE0F", children: t("customCssSection") }),
     /* @__PURE__ */ jsx2(Card, { children: /* @__PURE__ */ jsx2(Field, { label: t("customCssSection"), hint: t("customCssHint"), children: /* @__PURE__ */ jsx2(
       Textarea,
@@ -908,7 +1294,8 @@ function ThemePanelInner({ t }) {
         rows: 4
       }
     ) }) }),
-    /* @__PURE__ */ jsx2(PreviewArea, { t }),
+    /* @__PURE__ */ jsx2(PreviewArea, { t, dark, accentApplied }),
+    /* @__PURE__ */ jsx2(TokenCoverage, { t }),
     confirmReset && /* @__PURE__ */ jsx2(
       ConfirmDialog,
       {