dsh-theme-studio 0.2.0 → 0.3.0

package/lib/theme-studio.web.js

@@ -8,29 +8,28 @@ 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\uFF0C\u63D0\u5347\u54CD\u5E94\u901F\u5EA6",
+  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",
@@ -40,18 +39,13 @@ var zh = {
   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\u8BF7\u624B\u52A8\u590D\u5236",
-  copy: "\u590D\u5236",
+  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",
@@ -61,29 +55,29 @@ 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 and speed up interaction",
+  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",
@@ -93,18 +87,13 @@ var en = {
   importSuccess: "Theme imported",
   importFailed: "Import failed: not a valid theme JSON",
   exportSuccess: "Theme copied to clipboard",
-  exportFailed: "Copy failed, please copy manually",
-  copy: "Copy",
+  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
@@ -116,207 +105,121 @@ var DEFAULT_PREFERENCES = {
   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)"
-    },
-    darkTokens: {
-      "--dsw-alias-state-business-secondary": "#44475a",
-      "--dsw-alias-interactive-bg-hover": "rgba(189,147,249,0.18)"
-    }
-  },
-  {
-    id: "gruvbox",
-    name: "Gruvbox",
-    description: "Retro groove with warm earthy tones",
-    tokens: {
-      "--accent": "#d65d0e",
-      "--accent-hover": "#cc241d",
-      "--dsw-alias-state-business-primary": "#d65d0e",
-      "--dsw-alias-state-business-secondary": "#fabd2f",
-      "--dsw-alias-interactive-bg-hover": "rgba(214,93,14,0.08)"
-    },
-    darkTokens: {
-      "--accent": "#fe8019",
-      "--accent-hover": "#fabd2f",
-      "--dsw-alias-state-business-primary": "#fe8019",
-      "--dsw-alias-state-business-secondary": "#3c3836"
-    }
-  },
-  {
-    id: "solarized",
-    name: "Solarized",
-    description: "Ethan Schoonover's precision palette",
-    tokens: {
-      "--accent": "#268bd2",
-      "--accent-hover": "#1e6fa8",
-      "--dsw-alias-state-business-primary": "#268bd2",
-      "--dsw-alias-state-business-secondary": "#eee8d5",
-      "--dsw-alias-interactive-bg-hover": "rgba(38,139,210,0.08)"
-    },
-    darkTokens: {
-      "--accent": "#839496",
-      "--accent-hover": "#93a1a1",
-      "--dsw-alias-state-business-primary": "#268bd2",
-      "--dsw-alias-state-business-secondary": "#073642"
-    }
-  },
-  {
-    id: "tokyo-night",
-    name: "Tokyo Night",
-    description: "Inspired by the lights of downtown Tokyo at night",
-    tokens: {
-      "--accent": "#7aa2f7",
-      "--accent-hover": "#6183f0",
-      "--dsw-alias-state-business-primary": "#7aa2f7",
-      "--dsw-alias-state-business-secondary": "#bb9af7",
-      "--dsw-alias-interactive-bg-hover": "rgba(122,162,247,0.08)"
-    },
-    darkTokens: {
-      "--dsw-alias-state-business-secondary": "#1a1b26",
-      "--dsw-alias-interactive-bg-hover": "rgba(122,162,247,0.15)"
-    }
-  },
-  {
-    id: "catppuccin",
-    name: "Catppuccin",
-    description: "Soothing pastel theme for high contrast",
-    tokens: {
-      "--accent": "#89b4fa",
-      "--accent-hover": "#74a8fc",
-      "--dsw-alias-state-business-primary": "#89b4fa",
-      "--dsw-alias-state-business-secondary": "#f5e0dc",
-      "--dsw-alias-interactive-bg-hover": "rgba(137,180,250,0.08)"
-    },
-    darkTokens: {
-      "--accent": "#cba6f7",
-      "--accent-hover": "#b48bef",
-      "--dsw-alias-state-business-primary": "#cba6f7",
-      "--dsw-alias-state-business-secondary": "#313244",
-      "--dsw-alias-interactive-bg-hover": "rgba(203,166,247,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 ANIMATION_ON_TOKENS = {
-  "--dsh-transition-fast": "0.15s ease",
-  "--dsh-transition-normal": "0.25s ease"
-};
-var ANIMATION_OFF_TOKENS = {
-  "--dsh-transition-fast": "0s",
-  "--dsh-transition-normal": "0s"
-};
+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);
 }
@@ -332,7 +235,6 @@ function exportTheme(prefs, name) {
   return JSON.stringify(payload, null, 2);
 }
 var DENSITIES = /* @__PURE__ */ new Set(["compact", "comfortable", "spacious"]);
-var RADII = /* @__PURE__ */ new Set(["sharp", "rounded", "soft"]);
 var FONTS = /* @__PURE__ */ new Set(["system", "mono", "serif"]);
 function asColor(value) {
   if (typeof value !== "string") return null;
@@ -359,9 +261,6 @@ function parseTheme(raw) {
   if (typeof source["density"] === "string" && DENSITIES.has(source["density"])) {
     result.density = source["density"];
   }
-  if (typeof source["radius"] === "string" && RADII.has(source["radius"])) {
-    result.radius = source["radius"];
-  }
   if (typeof source["fontFamily"] === "string" && FONTS.has(source["fontFamily"])) {
     result.fontFamily = source["fontFamily"];
   }
@@ -419,6 +318,104 @@ function ensureDarkContrast(hex) {
   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,
@@ -787,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
@@ -872,21 +869,6 @@ function Field({
 
 // src/client/view.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var MANAGED_PROPERTIES = [
-  "--accent",
-  "--accent-hover",
-  "--dsh-content-font-size",
-  "--dsh-spacing-unit",
-  "--dsh-radius-small",
-  "--dsh-radius-medium",
-  "--dsh-radius-large",
-  "--dsh-font-family",
-  "--dsh-transition-fast",
-  "--dsh-transition-normal",
-  "--dsw-alias-state-business-primary",
-  "--dsw-alias-state-business-secondary",
-  "--dsw-alias-interactive-bg-hover"
-];
 function loadPreferences() {
   if (typeof localStorage === "undefined") return { ...DEFAULT_PREFERENCES };
   try {
@@ -901,71 +883,9 @@ function savePreferences(prefs) {
   if (typeof localStorage === "undefined") return;
   localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
 }
-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 resolveTokens(prefs, dark) {
-  const tokens = {};
-  let contrastAdjusted = false;
-  const preset = prefs.preset !== null ? getPreset(prefs.preset) : void 0;
-  if (preset !== void 0) {
-    Object.assign(tokens, preset.tokens);
-    if (dark && preset.darkTokens !== void 0) Object.assign(tokens, preset.darkTokens);
-  }
-  const chosenAccent = dark ? prefs.darkAccentColor ?? prefs.accentColor : prefs.accentColor;
-  if (chosenAccent !== null && chosenAccent.trim() !== "") {
-    let accent = chosenAccent;
-    if (dark) {
-      const guarded = ensureDarkContrast(accent);
-      accent = guarded.color;
-      contrastAdjusted = guarded.adjusted;
-    }
-    tokens["--accent"] = accent;
-  }
-  Object.assign(tokens, DENSITY_TOKENS[prefs.density] ?? {});
-  Object.assign(tokens, RADIUS_TOKENS[prefs.radius] ?? {});
-  Object.assign(tokens, FONT_TOKENS[prefs.fontFamily] ?? {});
-  Object.assign(tokens, prefs.animations ? ANIMATION_ON_TOKENS : ANIMATION_OFF_TOKENS);
-  return { tokens, contrastAdjusted };
-}
-function parseCustomCss(css) {
-  const out = {};
-  for (const line of css.split("\n")) {
-    const match = line.match(/^\s*(--[\w-]+)\s*:\s*(.+?)\s*;?\s*$/);
-    if (match !== null) out[match[1]] = match[2];
-  }
-  return out;
-}
-function applyTheme(prefs, dark = isDarkMode()) {
-  if (typeof document === "undefined") return false;
-  const root = document.documentElement;
-  const { tokens, contrastAdjusted } = resolveTokens(prefs, dark);
-  const custom = parseCustomCss(prefs.customCss);
-  const merged = { ...tokens, ...custom };
-  for (const prop of MANAGED_PROPERTIES) {
-    if (!(prop in merged)) root.style.removeProperty(prop);
-  }
-  for (const [prop, value] of Object.entries(merged)) root.style.setProperty(prop, value);
-  return contrastAdjusted;
-}
-function clearTheme() {
-  if (typeof document === "undefined") return;
-  const root = document.documentElement;
-  for (const prop of MANAGED_PROPERTIES) root.style.removeProperty(prop);
-}
-function PresetCard({ preset, selected, onClick }) {
-  const accent = preset.tokens["--accent"] ?? "#4B8BBE";
-  const secondary = preset.tokens["--dsw-alias-state-business-secondary"] ?? "#e5e5e5";
+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",
     {
@@ -974,27 +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: 6 }, children: [
-          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 3 }, children: [
-            /* @__PURE__ */ jsx2("div", { style: { width: 14, height: 14, borderRadius: "50%", background: accent, border: "1px solid rgba(128,128,128,0.2)" } }),
-            /* @__PURE__ */ jsx2("div", { style: { width: 14, height: 14, borderRadius: "50%", background: secondary, border: "1px solid rgba(128,128,128,0.2)" } })
+          /* @__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: preset.name }),
-          preset.darkTokens !== void 0 && /* @__PURE__ */ jsx2(Badge, { color: "info", children: "\u25D0" }),
+          /* @__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, lineHeight: 1.4 }, 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",
@@ -1006,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
@@ -1021,9 +945,15 @@ function ColorRow({ value, onChange, placeholder }) {
       "input",
       {
         type: "color",
-        value: value ?? "#4B8BBE",
+        value: value ?? "#4d6bfe",
         onChange: (e) => onChange(e.target.value),
-        style: { width: 40, height: 40, cursor: "pointer", borderRadius: 8, border: "1px solid var(--border, rgba(128,128,128,0.2))" }
+        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(
@@ -1038,32 +968,113 @@ function ColorRow({ value, onChange, placeholder }) {
     value !== null && /* @__PURE__ */ jsx2(Button, { variant: "ghost", size: "sm", onClick: () => onChange(null), children: "\u2715" })
   ] });
 }
-function PreviewArea({ t, dark }) {
+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: 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" })
+      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(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" })
+        /* @__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);
@@ -1078,11 +1089,14 @@ function ThemePanelInner({ t }) {
     savePreferences(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"));
@@ -1120,6 +1134,7 @@ function ThemePanelInner({ t }) {
     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: [
@@ -1211,7 +1226,7 @@ function ThemePanelInner({ t }) {
           placeholder: t("accentPlaceholder")
         }
       ),
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6 }, children: t("accentHint") }),
+      /* @__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,
@@ -1239,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,
@@ -1280,7 +1282,7 @@ function ThemePanelInner({ t }) {
         ),
         /* @__PURE__ */ jsx2("label", { htmlFor: "theme-animations", style: { fontSize: 13, cursor: "pointer" }, children: t("animations") })
       ] }),
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 11, opacity: 0.5, marginTop: 6, marginLeft: 26 }, children: t("animationsHint") })
+      /* @__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(
@@ -1292,7 +1294,8 @@ function ThemePanelInner({ t }) {
         rows: 4
       }
     ) }) }),
-    /* @__PURE__ */ jsx2(PreviewArea, { t, dark }),
+    /* @__PURE__ */ jsx2(PreviewArea, { t, dark, accentApplied }),
+    /* @__PURE__ */ jsx2(TokenCoverage, { t }),
     confirmReset && /* @__PURE__ */ jsx2(
       ConfirmDialog,
       {