design-canvas-plugin-style-kit 0.1.0

package/dist/index.js

@@ -0,0 +1,3191 @@
+// src/token-registry.ts
+var SPACING_H_SCALE = [
+  ["None", "0"],
+  ["XXS", "2px"],
+  ["XS", "4px"],
+  ["SNudge", "6px"],
+  ["S", "8px"],
+  ["MNudge", "10px"],
+  ["M", "12px"],
+  ["L", "16px"],
+  ["XL", "20px"],
+  ["XXL", "24px"],
+  ["XXXL", "32px"]
+];
+var SPACING_V_SCALE = SPACING_H_SCALE;
+var FONT_SIZE_SCALE = [
+  ["Base100", "10px"],
+  ["Base200", "12px"],
+  ["Base300", "14px"],
+  ["Base400", "16px"],
+  ["Base500", "20px"],
+  ["Base600", "24px"],
+  ["Hero700", "28px"],
+  ["Hero800", "32px"],
+  ["Hero900", "40px"],
+  ["Hero1000", "68px"]
+];
+var LINE_HEIGHT_SCALE = [
+  ["Base100", "14px"],
+  ["Base200", "16px"],
+  ["Base300", "20px"],
+  ["Base400", "22px"],
+  ["Base500", "28px"],
+  ["Base600", "32px"],
+  ["Hero700", "36px"],
+  ["Hero800", "40px"],
+  ["Hero900", "52px"],
+  ["Hero1000", "92px"]
+];
+var FONT_WEIGHT_SCALE = [
+  ["Regular", "400"],
+  ["Medium", "500"],
+  ["Semibold", "600"],
+  ["Bold", "700"]
+];
+var BORDER_RADIUS_SCALE = [
+  ["None", "0"],
+  ["Small", "2px"],
+  ["Medium", "4px"],
+  ["Large", "6px"],
+  ["XLarge", "8px"],
+  ["2XLarge", "12px"],
+  ["3XLarge", "16px"],
+  ["4XLarge", "24px"],
+  ["5XLarge", "32px"],
+  ["6XLarge", "40px"],
+  ["Circular", "10000px"]
+];
+var STROKE_WIDTH_SCALE = [
+  ["Thin", "1px"],
+  ["Thick", "2px"],
+  ["Thicker", "3px"],
+  ["Thickest", "4px"]
+];
+var SHADOW_SCALE = [
+  "shadow2",
+  "shadow4",
+  "shadow8",
+  "shadow16",
+  "shadow28",
+  "shadow64",
+  "shadow2Brand",
+  "shadow4Brand",
+  "shadow8Brand",
+  "shadow16Brand",
+  "shadow28Brand",
+  "shadow64Brand"
+];
+var DURATION_SCALE = [
+  ["UltraFast", "50ms"],
+  ["Faster", "100ms"],
+  ["Fast", "150ms"],
+  ["Normal", "200ms"],
+  ["Gentle", "250ms"],
+  ["Slow", "300ms"],
+  ["Slower", "400ms"],
+  ["UltraSlow", "500ms"]
+];
+var CURVE_SCALE = [
+  ["AccelerateMax", "cubic-bezier(1,0,1,1)"],
+  ["AccelerateMid", "cubic-bezier(0.7,0,1,0.5)"],
+  ["AccelerateMin", "cubic-bezier(0.8,0,1,1)"],
+  ["DecelerateMax", "cubic-bezier(0,0,0,1)"],
+  ["DecelerateMid", "cubic-bezier(0.1,0.9,0.2,1)"],
+  ["DecelerateMin", "cubic-bezier(0.33,0,0.1,1)"],
+  ["EasyEaseMax", "cubic-bezier(0.8,0,0.1,1)"],
+  ["EasyEase", "cubic-bezier(0.33,0,0.67,1)"],
+  ["Linear", "cubic-bezier(0,0,1,1)"]
+];
+var FONT_FAMILY_NAMES = [
+  "fontFamilyBase",
+  "fontFamilyMonospace",
+  "fontFamilyNumeric"
+];
+var NEUTRAL_BG = [
+  "colorNeutralBackground1",
+  "colorNeutralBackground2",
+  "colorNeutralBackground3",
+  "colorNeutralBackground4",
+  "colorNeutralBackground5",
+  "colorNeutralBackground6",
+  "colorNeutralBackgroundInverted",
+  "colorNeutralBackgroundStatic",
+  "colorSubtleBackground",
+  "colorTransparentBackground"
+];
+var NEUTRAL_FG = [
+  "colorNeutralForeground1",
+  "colorNeutralForeground2",
+  "colorNeutralForeground3",
+  "colorNeutralForeground4",
+  "colorNeutralForegroundDisabled"
+];
+var BRAND_BG = [
+  "colorBrandBackground",
+  "colorBrandBackground2",
+  "colorBrandBackgroundInverted",
+  "colorBrandBackgroundStatic"
+];
+var BRAND_FG = [
+  "colorBrandForegroundLink",
+  "colorBrandForeground1",
+  "colorBrandForeground2",
+  "colorBrandForegroundInverted"
+];
+var NEUTRAL_STROKE = [
+  "colorNeutralStroke1",
+  "colorNeutralStroke2",
+  "colorNeutralStroke3",
+  "colorNeutralStrokeSubtle",
+  "colorNeutralStrokeDisabled",
+  "colorNeutralStrokeAccessible"
+];
+var BRAND_STROKE = [
+  "colorBrandStroke1",
+  "colorBrandStroke2",
+  "colorCompoundBrandStroke"
+];
+function resolveVar(cssVar) {
+  const provider = document.querySelector(".fui-FluentProvider") ?? document.documentElement;
+  return getComputedStyle(provider).getPropertyValue(cssVar).trim();
+}
+function buildScale(category, label, prefix, entries) {
+  return {
+    category,
+    label,
+    entries: entries.map(([suffix, fallback]) => {
+      const name = `${prefix}${suffix}`;
+      const cssVar = `--${name}`;
+      const value = resolveVar(cssVar) || fallback;
+      return { name, cssVar, value, label: suffix };
+    })
+  };
+}
+function buildColorScale(category, label, names) {
+  return {
+    category,
+    label,
+    entries: names.map((name) => {
+      const cssVar = `--${name}`;
+      const value = resolveVar(cssVar) || "#000";
+      const short = name.replace("colorNeutral", "").replace("colorBrand", "").replace("colorCompound", "").replace("colorSubtle", "Subtle").replace("colorTransparent", "Transparent");
+      return { name, cssVar, value, label: short };
+    })
+  };
+}
+function buildShadowScale() {
+  return {
+    category: "shadow",
+    label: "Shadow",
+    entries: SHADOW_SCALE.map((name) => {
+      const cssVar = `--${name}`;
+      const value = resolveVar(cssVar) || "0 0 0 rgba(0,0,0,0)";
+      const short = name.replace("shadow", "").replace("Brand", " Brand") || name;
+      return { name, cssVar, value, label: short };
+    })
+  };
+}
+function buildFontFamilyScale() {
+  return {
+    category: "fontFamily",
+    label: "Font Family",
+    entries: FONT_FAMILY_NAMES.map((name) => {
+      const cssVar = `--${name}`;
+      const value = resolveVar(cssVar) || "";
+      const short = name.replace("fontFamily", "");
+      return { name, cssVar, value, label: short };
+    })
+  };
+}
+function buildRegistry() {
+  return [
+    buildScale("spacingH", "Horizontal Spacing", "spacingHorizontal", SPACING_H_SCALE),
+    buildScale("spacingV", "Vertical Spacing", "spacingVertical", SPACING_V_SCALE),
+    buildScale("fontSize", "Font Size", "fontSize", FONT_SIZE_SCALE),
+    buildScale("lineHeight", "Line Height", "lineHeight", LINE_HEIGHT_SCALE),
+    buildScale("fontWeight", "Font Weight", "fontWeight", FONT_WEIGHT_SCALE),
+    buildScale("borderRadius", "Border Radius", "borderRadius", BORDER_RADIUS_SCALE),
+    buildScale("strokeWidth", "Stroke Width", "strokeWidth", STROKE_WIDTH_SCALE),
+    buildShadowScale(),
+    buildFontFamilyScale(),
+    buildScale("duration", "Duration", "duration", DURATION_SCALE),
+    buildScale("curve", "Timing Curve", "curve", CURVE_SCALE),
+    buildColorScale("colorNeutralBg", "Neutral Background", NEUTRAL_BG),
+    buildColorScale("colorNeutralFg", "Neutral Foreground", NEUTRAL_FG),
+    buildColorScale("colorBrandBg", "Brand Background", BRAND_BG),
+    buildColorScale("colorBrandFg", "Brand Foreground", BRAND_FG),
+    buildColorScale("colorNeutralStroke", "Neutral Stroke", NEUTRAL_STROKE),
+    buildColorScale("colorBrandStroke", "Brand Stroke", BRAND_STROKE)
+  ];
+}
+function findToken(registry2, tokenName) {
+  for (const scale of registry2) {
+    const idx = scale.entries.findIndex((e) => e.name === tokenName);
+    if (idx !== -1) return { scale, index: idx };
+  }
+  return null;
+}
+function getResolvedValue(cssVar) {
+  return resolveVar(cssVar);
+}
+function serializeForPrompt(registry2) {
+  return registry2.map(
+    (s) => `${s.label}: ${s.entries.map((e) => `${e.label}=${e.value}`).join(", ")}`
+  ).join("\n");
+}
+
+// src/override-engine.ts
+var STYLE_ID = "dc-style-kit-overrides";
+var activeOverrides = /* @__PURE__ */ new Map();
+var activeStaticOverrides = /* @__PURE__ */ new Map();
+var listeners = [];
+function getOrCreateStyleEl() {
+  let el2 = document.getElementById(STYLE_ID);
+  if (!el2) {
+    el2 = document.createElement("style");
+    el2.id = STYLE_ID;
+    el2.setAttribute("data-dc-plugin", "style-kit");
+    document.head.appendChild(el2);
+  }
+  return el2;
+}
+function overrideKey(o) {
+  const scopeKey = o.scope.type === "global" ? "_global_" : o.scope.selector;
+  return `${scopeKey}::${o.tokenName}`;
+}
+function staticKey(o) {
+  const scopeKey = o.scope.type === "global" ? "_global_" : o.scope.selector;
+  return `${scopeKey}::static::${o.property}`;
+}
+var TOKEN_TO_CSS_PROPERTY = {
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  lineHeight: "line-height",
+  fontFamily: "font-family",
+  spacingHorizontal: "padding-inline",
+  spacingVertical: "padding-block",
+  borderRadius: "border-radius",
+  strokeWidth: "border-width",
+  colorNeutralBackground: "background-color",
+  colorBrandBackground: "background-color",
+  colorSubtleBackground: "background-color",
+  colorTransparentBackground: "background-color",
+  colorNeutralForeground: "color",
+  colorBrandForeground: "color",
+  colorNeutralStroke: "border-color",
+  colorBrandStroke: "border-color",
+  colorPaletteRedBackground: "background-color",
+  colorPaletteRedForeground: "color",
+  colorPaletteRedBorder: "border-color",
+  colorPaletteGreenBackground: "background-color",
+  colorPaletteGreenForeground: "color",
+  colorPaletteGreenBorder: "border-color",
+  colorPaletteYellowBackground: "background-color",
+  colorPaletteYellowForeground: "color",
+  colorPaletteBlueForeground: "color",
+  colorPaletteBlueBackground: "background-color",
+  colorPaletteBlueBorder: "border-color",
+  shadow: "box-shadow"
+};
+function cssPropertyForToken(tokenName) {
+  for (const [prefix, prop] of Object.entries(TOKEN_TO_CSS_PROPERTY)) {
+    if (tokenName.startsWith(prefix)) return prop;
+  }
+  return null;
+}
+function renderCSS() {
+  const el2 = getOrCreateStyleEl();
+  const byScope = /* @__PURE__ */ new Map();
+  for (const o of activeOverrides.values()) {
+    const key = o.scope.type === "global" ? "_global_" : o.scope.selector;
+    if (!byScope.has(key)) byScope.set(key, { tokens: [], statics: [] });
+    byScope.get(key).tokens.push(o);
+  }
+  for (const o of activeStaticOverrides.values()) {
+    const key = o.scope.type === "global" ? "_global_" : o.scope.selector;
+    if (!byScope.has(key)) byScope.set(key, { tokens: [], statics: [] });
+    byScope.get(key).statics.push(o);
+  }
+  let css = "/* Style Kit overrides \u2014 auto-generated */\n";
+  for (const [scopeKey, { tokens, statics }] of byScope) {
+    const isGlobal = scopeKey === "_global_";
+    const selector = isGlobal ? ".fui-FluentProvider" : scopeKey;
+    const tokenProps = tokens.map((o) => `  ${o.cssVar}: ${o.newValue};`).join("\n");
+    const concreteProps = isGlobal ? "" : tokens.map((o) => {
+      const prop = cssPropertyForToken(o.tokenName);
+      return prop ? `  ${prop}: ${o.newValue} !important;` : "";
+    }).filter(Boolean).join("\n");
+    const staticProps = statics.map((o) => `  ${o.property}: ${o.newValue} !important;`).join("\n");
+    const allProps = [tokenProps, concreteProps, staticProps].filter(Boolean).join("\n");
+    css += `${selector} {
+${allProps}
+}
+`;
+  }
+  el2.textContent = css;
+  notify();
+}
+function notify() {
+  const list = Array.from(activeOverrides.values());
+  for (const fn of listeners) fn(list);
+}
+function applyOverride(override) {
+  const key = overrideKey(override);
+  activeOverrides.set(key, override);
+  renderCSS();
+}
+function removeOverride(tokenName, scope) {
+  const key = overrideKey({ tokenName, scope });
+  activeOverrides.delete(key);
+  renderCSS();
+}
+function getOverrides() {
+  return Array.from(activeOverrides.values());
+}
+function getOverrideForToken(tokenName, scope) {
+  return activeOverrides.get(overrideKey({ tokenName, scope }));
+}
+function clearAll() {
+  activeOverrides.clear();
+  activeStaticOverrides.clear();
+  renderCSS();
+}
+function bulkReplace(overrides) {
+  activeOverrides.clear();
+  for (const o of overrides) {
+    activeOverrides.set(overrideKey(o), o);
+  }
+  renderCSS();
+}
+function onOverridesChanged(fn) {
+  listeners.push(fn);
+  return () => {
+    listeners = listeners.filter((l) => l !== fn);
+  };
+}
+function applyStaticOverride(override) {
+  const key = staticKey(override);
+  activeStaticOverrides.set(key, override);
+  renderCSS();
+}
+function removeStaticOverride(property, scope) {
+  const key = staticKey({ property, scope });
+  activeStaticOverrides.delete(key);
+  renderCSS();
+}
+function getStaticOverrideForProperty(property, scope) {
+  return activeStaticOverrides.get(staticKey({ property, scope }));
+}
+function getStaticOverridesList() {
+  return Array.from(activeStaticOverrides.values());
+}
+function serializeOverrides() {
+  const list = getOverrides();
+  const staticList = getStaticOverridesList();
+  const registry2 = buildRegistry();
+  const tokenEntries = list.map((o) => {
+    const entry = {
+      token: o.tokenName,
+      from: o.originalValue,
+      to: o.newValue,
+      scope: o.scope.type === "global" ? "Global" : o.scope.label
+    };
+    const match = findToken(registry2, o.tokenName);
+    if (match) {
+      const swapTarget = match.scale.entries.find(
+        (e) => e.value === o.newValue && e.name !== o.tokenName
+      );
+      if (swapTarget) {
+        entry.swapTo = swapTarget.name;
+      }
+    }
+    return entry;
+  });
+  const staticEntries = staticList.map((o) => ({
+    token: `[static] ${o.property}`,
+    from: o.originalValue,
+    to: o.newValue,
+    scope: o.scope.type === "global" ? "Global" : o.scope.label
+  }));
+  const overrides = [...tokenEntries, ...staticEntries];
+  const css = getOrCreateStyleEl().textContent ?? "";
+  const globalOverrides = list.filter((o) => o.scope.type === "global");
+  const themeLines = globalOverrides.map(
+    (o) => `  ${o.tokenName}: '${o.newValue}',`
+  );
+  const themePartial = `const themeOverrides = {
+${themeLines.join("\n")}
+};`;
+  return { overrides, css, themePartial };
+}
+function destroy() {
+  activeOverrides.clear();
+  activeStaticOverrides.clear();
+  listeners = [];
+  const el2 = document.getElementById(STYLE_ID);
+  el2?.remove();
+}
+
+// src/variations.ts
+var STORE_KEY = "style-kit:variations";
+var store = { active: null, variations: [] };
+var storage = null;
+var changeListeners = [];
+function persist() {
+  storage?.set(STORE_KEY, store);
+  for (const fn of changeListeners) fn(store);
+}
+function genId() {
+  return `v_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 6)}`;
+}
+function initVariations(ctx2) {
+  storage = ctx2.storage;
+  const saved = storage.get(STORE_KEY);
+  if (saved && Array.isArray(saved.variations)) {
+    store = saved;
+  }
+}
+function getStore() {
+  return store;
+}
+function saveVariation(name) {
+  const overrides = getOverrides();
+  const v = {
+    id: genId(),
+    name,
+    created: (/* @__PURE__ */ new Date()).toISOString(),
+    overrides: overrides.map((o) => ({
+      tokenName: o.tokenName,
+      cssVar: o.cssVar,
+      originalValue: o.originalValue,
+      newValue: o.newValue,
+      scope: o.scope
+    }))
+  };
+  store.variations.push(v);
+  store.active = v.id;
+  persist();
+  return v;
+}
+function loadVariation(id) {
+  const v = store.variations.find((x) => x.id === id);
+  if (!v) return false;
+  const overrides = v.overrides.map((o) => ({
+    tokenName: o.tokenName,
+    cssVar: o.cssVar,
+    originalValue: o.originalValue,
+    newValue: o.newValue,
+    scope: o.scope
+  }));
+  bulkReplace(overrides);
+  store.active = id;
+  persist();
+  return true;
+}
+function loadBase() {
+  clearAll();
+  store.active = null;
+  persist();
+}
+function deleteVariation(id) {
+  store.variations = store.variations.filter((v) => v.id !== id);
+  if (store.active === id) {
+    clearAll();
+    store.active = null;
+  }
+  persist();
+}
+function updateActiveVariation() {
+  if (!store.active) return;
+  const v = store.variations.find((x) => x.id === store.active);
+  if (!v) return;
+  const overrides = getOverrides();
+  v.overrides = overrides.map((o) => ({
+    tokenName: o.tokenName,
+    cssVar: o.cssVar,
+    originalValue: o.originalValue,
+    newValue: o.newValue,
+    scope: o.scope
+  }));
+  persist();
+}
+function onVariationsChanged(fn) {
+  changeListeners.push(fn);
+  return () => {
+    changeListeners = changeListeners.filter((l) => l !== fn);
+  };
+}
+function destroyVariations() {
+  changeListeners = [];
+}
+
+// src/token-detector.ts
+var PROBES = [
+  ["border-top-left-radius", "Border Radius", ["borderRadius"]],
+  ["padding-left", "Padding Left", ["spacingH"]],
+  ["padding-right", "Padding Right", ["spacingH"]],
+  ["padding-top", "Padding Top", ["spacingV"]],
+  ["padding-bottom", "Padding Bottom", ["spacingV"]],
+  ["margin-left", "Margin Left", ["spacingH"]],
+  ["margin-right", "Margin Right", ["spacingH"]],
+  ["margin-top", "Margin Top", ["spacingV"]],
+  ["margin-bottom", "Margin Bottom", ["spacingV"]],
+  ["column-gap", "Column Gap", ["spacingH"]],
+  ["row-gap", "Row Gap", ["spacingV"]],
+  ["gap", "Gap", ["spacingH"]],
+  ["font-size", "Font Size", ["fontSize"]],
+  ["font-weight", "Font Weight", ["fontWeight"]],
+  ["line-height", "Line Height", ["lineHeight"]],
+  ["border-top-width", "Border Width", ["strokeWidth"]],
+  ["color", "Text Color", ["colorNeutralFg", "colorBrandFg"]],
+  ["background-color", "Background", ["colorNeutralBg", "colorBrandBg"]],
+  ["border-top-color", "Border Color", ["colorNeutralStroke", "colorBrandStroke"]],
+  ["font-family", "Font Family", ["fontFamily"]],
+  ["box-shadow", "Box Shadow", ["shadow"]],
+  ["transition-duration", "Duration", ["duration"]],
+  ["transition-timing-function", "Easing", ["curve"]]
+];
+var EXTRA_STATICS = [
+  ["width", "Width"],
+  ["height", "Height"],
+  ["max-width", "Max Width"],
+  ["min-height", "Min Height"],
+  ["opacity", "Opacity"],
+  ["text-transform", "Text Transform"],
+  ["letter-spacing", "Letter Spacing"],
+  ["text-decoration-line", "Text Decoration"],
+  ["display", "Display"],
+  ["overflow-x", "Overflow X"],
+  ["overflow-y", "Overflow Y"],
+  ["position", "Position"],
+  ["z-index", "Z-Index"],
+  ["cursor", "Cursor"],
+  ["white-space", "White Space"],
+  ["text-overflow", "Text Overflow"],
+  ["text-align", "Text Align"],
+  ["flex-direction", "Flex Direction"],
+  ["align-items", "Align Items"],
+  ["justify-content", "Justify Content"]
+];
+var NOISE_VALUES = /* @__PURE__ */ new Set([
+  "",
+  "auto",
+  "none",
+  "normal",
+  "visible",
+  "0",
+  "0px",
+  "transparent",
+  "rgba(0, 0, 0, 0)",
+  "start",
+  "stretch",
+  "baseline",
+  "static",
+  "clip",
+  "ltr",
+  "row"
+]);
+function isNoiseValue(prop, val) {
+  const v = val.toLowerCase().trim();
+  if (!v || NOISE_VALUES.has(v)) return true;
+  if (prop === "opacity" && v === "1") return true;
+  if (prop === "cursor" && (v === "default" || v === "auto")) return true;
+  if (prop === "display" && v === "block") return true;
+  if (prop === "text-align" && v === "start") return true;
+  return false;
+}
+function isColorVal(val) {
+  return /^(rgb|hsl|#)/i.test(val);
+}
+function normalize(val) {
+  return val.trim().toLowerCase().replace(/\s+/g, " ");
+}
+function valuesMatch(a, b) {
+  return normalize(a) === normalize(b);
+}
+function detectAll(element, registry2) {
+  const cs = getComputedStyle(element);
+  const rawTokens = [];
+  const rawStatics = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const [prop, label, cats] of PROBES) {
+    const val = cs.getPropertyValue(prop).trim();
+    if (!val || val === "none" || val === "normal" || val === "auto" || val === "0px" || val === "0") continue;
+    seen.add(prop);
+    let matched = false;
+    for (const cat of cats) {
+      const scale = registry2.find((s) => s.category === cat);
+      if (!scale) continue;
+      const idx = scale.entries.findIndex((e) => valuesMatch(e.value, val));
+      if (idx !== -1) {
+        rawTokens.push({ property: prop, label, current: scale.entries[idx], scale, index: idx });
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      rawStatics.push({ property: prop, label, value: val, isColor: isColorVal(val), candidateCategories: [...cats] });
+    }
+  }
+  for (const [prop, label] of EXTRA_STATICS) {
+    if (seen.has(prop)) continue;
+    const val = cs.getPropertyValue(prop).trim();
+    if (isNoiseValue(prop, val)) continue;
+    rawStatics.push({ property: prop, label, value: val, isColor: isColorVal(val), candidateCategories: [] });
+  }
+  return { tokens: dedup(rawTokens), statics: dedupStatics(rawStatics) };
+}
+function dedup(items) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const d of items) {
+    const key = `${d.scale.category}::${d.current.name}`;
+    const arr = groups.get(key) ?? [];
+    arr.push(d);
+    groups.set(key, arr);
+  }
+  const result = [];
+  for (const [, group] of groups) {
+    const first = group[0];
+    if (group.length > 1) {
+      first.label = mergeLabel(group);
+    }
+    result.push(first);
+  }
+  return result;
+}
+function mergeLabel(group) {
+  const props = group.map((g) => g.property);
+  const base = props[0].replace(/-left|-right|-top|-bottom|-top-left-radius|-top-right-radius|-bottom-left-radius|-bottom-right-radius/, "");
+  if (base.includes("radius")) return "Border Radius";
+  if (base.includes("padding")) return allSides(props) ? "Padding" : hasSide(props, "horiz") ? "Padding (H)" : "Padding (V)";
+  if (base.includes("margin")) return allSides(props) ? "Margin" : hasSide(props, "horiz") ? "Margin (H)" : "Margin (V)";
+  return group[0].label;
+}
+function allSides(props) {
+  return props.length >= 4 || hasSide(props, "horiz") && hasSide(props, "vert");
+}
+function hasSide(props, dir) {
+  if (dir === "horiz") return props.some((p) => p.includes("left") || p.includes("right"));
+  return props.some((p) => p.includes("top") || p.includes("bottom"));
+}
+function dedupStatics(items) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const sv of items) {
+    const base = sv.property.replace(/-left$|-right$|-top$|-bottom$/, "").replace(/-top-left-radius$|-top-right-radius$|-bottom-left-radius$|-bottom-right-radius$/, "-radius").replace(/-x$|-y$/, "");
+    const key = `${base}::${sv.value}`;
+    const arr = groups.get(key) ?? [];
+    arr.push(sv);
+    groups.set(key, arr);
+  }
+  const result = [];
+  for (const [, group] of groups) {
+    const first = { ...group[0] };
+    if (group.length > 1) {
+      first.label = mergeStaticLabel(group);
+      const cats = /* @__PURE__ */ new Set();
+      for (const sv of group) sv.candidateCategories.forEach((c) => cats.add(c));
+      first.candidateCategories = [...cats];
+    }
+    result.push(first);
+  }
+  return result;
+}
+function mergeStaticLabel(group) {
+  const props = group.map((g) => g.property);
+  if (props.some((p) => p.includes("overflow"))) return "Overflow";
+  if (props.some((p) => p.includes("padding"))) {
+    if (props.length >= 4) return "Padding";
+    if (props.some((p) => p.includes("left") || p.includes("right"))) return "Padding (H)";
+    return "Padding (V)";
+  }
+  if (props.some((p) => p.includes("margin"))) {
+    if (props.length >= 4) return "Margin";
+    if (props.some((p) => p.includes("left") || p.includes("right"))) return "Margin (H)";
+    return "Margin (V)";
+  }
+  if (props.some((p) => p.includes("radius"))) return "Border Radius";
+  if (props.some((p) => p.includes("border") && p.includes("color"))) return "Border Color";
+  if (props.some((p) => p.includes("border") && p.includes("width"))) return "Border Width";
+  return group[0].label;
+}
+function findNearestInScale(value, categories, registry2) {
+  const numMatch = value.match(/^([\d.]+)(px|rem|em)?$/);
+  if (!numMatch) return null;
+  const numVal = parseFloat(numMatch[1]);
+  let best = null;
+  for (const cat of categories) {
+    const scale = registry2.find((s) => s.category === cat);
+    if (!scale) continue;
+    for (const entry of scale.entries) {
+      const entryMatch = entry.value.match(/^([\d.]+)(px|rem|em)?$/);
+      if (!entryMatch) continue;
+      const entryVal = parseFloat(entryMatch[1]);
+      const dist = Math.abs(numVal - entryVal);
+      if (!best || dist < best.distance) {
+        best = { entry, scale, distance: dist };
+      }
+    }
+  }
+  return best;
+}
+
+// src/panel-styles.ts
+var PANEL_STYLES = (
+  /* css */
+  `
+/* \u2500\u2500\u2500 Reset & Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk {
+  --sk-bg: #ffffff;
+  --sk-bg-subtle: #f5f5f5;
+  --sk-bg-hover: #ebebeb;
+  --sk-bg-active: #e0e0e0;
+  --sk-bg-accent: #0078d4;
+  --sk-bg-accent-subtle: #e8f4fd;
+  --sk-fg: #242424;
+  --sk-fg-secondary: #616161;
+  --sk-fg-tertiary: #8a8a8a;
+  --sk-fg-on-accent: #ffffff;
+  --sk-border: #e0e0e0;
+  --sk-border-subtle: #ebebeb;
+  --sk-radius-s: 4px;
+  --sk-radius-m: 6px;
+  --sk-radius-l: 8px;
+  --sk-shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
+  --sk-shadow-md: 0 2px 8px rgba(0,0,0,0.1);
+  --sk-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --sk-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
+  --sk-transition: 150ms ease;
+
+  font-family: var(--sk-font);
+  font-size: 12px;
+  color: var(--sk-fg);
+  line-height: 1.4;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sk.sk--dark {
+  --sk-bg: #1e1e1e;
+  --sk-bg-subtle: #2a2a2a;
+  --sk-bg-hover: #333333;
+  --sk-bg-active: #3d3d3d;
+  --sk-bg-accent: #4dabf5;
+  --sk-bg-accent-subtle: #1a3a52;
+  --sk-fg: #e0e0e0;
+  --sk-fg-secondary: #999999;
+  --sk-fg-tertiary: #666666;
+  --sk-fg-on-accent: #000000;
+  --sk-border: #3d3d3d;
+  --sk-border-subtle: #333333;
+}
+
+/* \u2500\u2500\u2500 Sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-header {
+  padding: 12px 14px 8px;
+  border-bottom: 1px solid var(--sk-border-subtle);
+  flex-shrink: 0;
+}
+
+.sk-header__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.sk-header__badge {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 6px;
+  border-radius: 10px;
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+}
+
+.sk-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--sk-border) transparent;
+}
+
+.sk-footer {
+  padding: 10px 14px;
+  border-top: 1px solid var(--sk-border-subtle);
+  flex-shrink: 0;
+}
+
+/* \u2500\u2500\u2500 Scope Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-scope {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  background: var(--sk-bg-subtle);
+  border-bottom: 1px solid var(--sk-border-subtle);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.sk-scope__label {
+  color: var(--sk-fg-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.sk-scope__value {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: var(--sk-bg);
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-s);
+  cursor: pointer;
+  transition: border-color var(--sk-transition);
+  min-width: 0;
+  flex: 1;
+}
+
+.sk-scope__value:hover {
+  border-color: var(--sk-bg-accent);
+}
+
+.sk-scope__value-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  direction: rtl;
+  text-align: left;
+}
+
+.sk-scope__pick {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: var(--sk-radius-s);
+  border: 1px solid var(--sk-bg-accent);
+  background: var(--sk-bg-accent-subtle);
+  cursor: pointer;
+  color: var(--sk-bg-accent);
+  font-size: 11px;
+  font-weight: 600;
+  font-family: var(--sk-font);
+  transition: all var(--sk-transition);
+}
+
+.sk-scope__pick svg {
+  width: 12px;
+  height: 12px;
+}
+
+.sk-scope__pick:hover {
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  border-color: var(--sk-bg-accent);
+}
+
+.sk-scope__pick--icon-only {
+  padding: 3px;
+  width: 22px;
+  height: 22px;
+  justify-content: center;
+}
+
+.sk-scope__pick.sk-scope__pick--active {
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  border-color: var(--sk-bg-accent);
+  animation: sk-pulse 1.5s ease infinite;
+}
+
+@keyframes sk-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(0,120,212,0.3); }
+  50% { box-shadow: 0 0 0 4px rgba(0,120,212,0); }
+}
+
+/* \u2500\u2500\u2500 Variations Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-variations {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 14px;
+  border-bottom: 1px solid var(--sk-border-subtle);
+  overflow-x: auto;
+  scrollbar-width: none;
+  flex-shrink: 0;
+}
+
+.sk-variations::-webkit-scrollbar { display: none; }
+
+.sk-var-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 10px;
+  border-radius: 100px;
+  border: 1px solid var(--sk-border);
+  background: var(--sk-bg);
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all var(--sk-transition);
+  user-select: none;
+}
+
+.sk-var-chip:hover {
+  border-color: var(--sk-fg-secondary);
+}
+
+.sk-var-chip--active {
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  border-color: var(--sk-bg-accent);
+}
+
+.sk-var-chip--base {
+  font-weight: 500;
+}
+
+.sk-var-chip__x {
+  width: 12px;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  opacity: 0.6;
+  transition: opacity var(--sk-transition);
+  font-size: 10px;
+}
+
+.sk-var-chip__x:hover { opacity: 1; }
+
+.sk-var-add {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px dashed var(--sk-border);
+  background: transparent;
+  cursor: pointer;
+  color: var(--sk-fg-tertiary);
+  font-size: 14px;
+  flex-shrink: 0;
+  transition: all var(--sk-transition);
+}
+
+.sk-var-add:hover {
+  border-color: var(--sk-bg-accent);
+  color: var(--sk-bg-accent);
+  background: var(--sk-bg-accent-subtle);
+}
+
+/* \u2500\u2500\u2500 Inline Input (replaces window.prompt) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-inline-input {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.sk-inline-input__field {
+  width: 120px;
+  padding: 2px 6px;
+  border: 1px solid var(--sk-bg-accent);
+  border-radius: 100px;
+  background: var(--sk-bg);
+  color: var(--sk-fg);
+  font-size: 11px;
+  outline: none;
+  font-family: inherit;
+}
+
+.sk-inline-input__field:focus {
+  border-color: var(--sk-bg-accent);
+  box-shadow: 0 0 0 1px var(--sk-bg-accent);
+}
+
+.sk-inline-input__ok,
+.sk-inline-input__cancel {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--sk-fg-secondary);
+  padding: 0;
+}
+
+.sk-inline-input__ok:hover { color: var(--sk-bg-accent); }
+.sk-inline-input__cancel:hover { color: var(--sk-fg); }
+
+/* \u2500\u2500\u2500 Token Category (collapsible) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-cat {
+  border-bottom: 1px solid var(--sk-border-subtle);
+}
+
+.sk-cat__header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--sk-transition);
+}
+
+.sk-cat__header:hover {
+  background: var(--sk-bg-subtle);
+}
+
+.sk-cat__chevron {
+  width: 12px;
+  height: 12px;
+  color: var(--sk-fg-tertiary);
+  transition: transform var(--sk-transition);
+  flex-shrink: 0;
+}
+
+.sk-cat--open > .sk-cat__header > .sk-cat__chevron {
+  transform: rotate(90deg);
+}
+
+.sk-cat__label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--sk-fg-secondary);
+  flex: 1;
+}
+
+.sk-cat__count {
+  font-size: 10px;
+  padding: 0 5px;
+  border-radius: 8px;
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.sk-cat__body {
+  display: none;
+  padding: 0 14px 8px;
+}
+
+.sk-cat--open > .sk-cat__body {
+  display: block;
+}
+
+/* \u2500\u2500\u2500 Token Stepper (discrete scale control) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-stepper {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+}
+
+.sk-stepper__label {
+  width: 90px;
+  font-size: 11px;
+  color: var(--sk-fg-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sk-stepper__track {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  height: 24px;
+  position: relative;
+}
+
+.sk-stepper__step {
+  flex: 1;
+  height: 6px;
+  background: var(--sk-bg-hover);
+  cursor: pointer;
+  position: relative;
+  transition: background var(--sk-transition);
+}
+
+.sk-stepper__step:first-child {
+  border-radius: 3px 0 0 3px;
+}
+
+.sk-stepper__step:last-child {
+  border-radius: 0 3px 3px 0;
+}
+
+.sk-stepper__step--active {
+  background: var(--sk-bg-accent);
+}
+
+.sk-stepper__step--modified {
+  background: var(--sk-bg-accent);
+  opacity: 0.7;
+}
+
+.sk-stepper__step:hover {
+  background: var(--sk-bg-accent);
+  opacity: 0.85;
+}
+
+.sk-stepper__step:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 3px 8px;
+  background: var(--sk-fg);
+  color: var(--sk-bg);
+  font-size: 10px;
+  border-radius: var(--sk-radius-s);
+  white-space: nowrap;
+  pointer-events: none;
+  z-index: 10;
+  box-shadow: var(--sk-shadow-md);
+}
+
+.sk-stepper__value {
+  width: 48px;
+  font-size: 10px;
+  font-family: var(--sk-mono);
+  color: var(--sk-fg-tertiary);
+  text-align: right;
+  flex-shrink: 0;
+}
+
+.sk-stepper__value--modified {
+  color: var(--sk-bg-accent);
+  font-weight: 600;
+}
+
+/* \u2500\u2500\u2500 Color Swatch (for color tokens) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-swatch-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 0;
+}
+
+.sk-swatch-row__label {
+  width: 90px;
+  font-size: 11px;
+  color: var(--sk-fg-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sk-swatch {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--sk-radius-s);
+  border: 1px solid var(--sk-border);
+  cursor: pointer;
+  transition: transform var(--sk-transition), box-shadow var(--sk-transition);
+  flex-shrink: 0;
+}
+
+.sk-swatch:hover {
+  transform: scale(1.15);
+  box-shadow: var(--sk-shadow-sm);
+}
+
+.sk-swatch--active {
+  outline: 2px solid var(--sk-bg-accent);
+  outline-offset: 1px;
+}
+
+.sk-swatch__hex {
+  font-size: 10px;
+  font-family: var(--sk-mono);
+  color: var(--sk-fg-tertiary);
+  flex: 1;
+}
+
+.sk-swatch__hex--modified {
+  color: var(--sk-bg-accent);
+  font-weight: 600;
+}
+
+.sk-color-input {
+  width: 0;
+  height: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  position: absolute;
+}
+
+/* \u2500\u2500\u2500 Prompt Bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-prompt {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--sk-border-subtle);
+  flex-shrink: 0;
+}
+
+.sk-prompt__wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-m);
+  padding: 0 4px 0 10px;
+  background: var(--sk-bg);
+  transition: border-color var(--sk-transition), box-shadow var(--sk-transition);
+}
+
+.sk-prompt__wrap:focus-within {
+  border-color: var(--sk-bg-accent);
+  box-shadow: 0 0 0 1px var(--sk-bg-accent);
+}
+
+.sk-prompt__icon {
+  flex-shrink: 0;
+  color: var(--sk-fg-tertiary);
+  width: 14px;
+  height: 14px;
+}
+
+.sk-prompt__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--sk-font);
+  font-size: 12px;
+  color: var(--sk-fg);
+  padding: 7px 0;
+  min-width: 0;
+}
+
+.sk-prompt__input::placeholder {
+  color: var(--sk-fg-tertiary);
+}
+
+.sk-prompt__send {
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--sk-radius-s);
+  border: none;
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  cursor: pointer;
+  transition: opacity var(--sk-transition);
+  opacity: 0.4;
+}
+
+.sk-prompt__send--ready {
+  opacity: 1;
+}
+
+.sk-prompt__send:hover {
+  opacity: 0.9;
+}
+
+.sk-prompt__send--loading {
+  opacity: 0.5;
+  cursor: wait;
+}
+
+.sk-prompt__result {
+  margin-top: 6px;
+  padding: 6px 8px;
+  background: var(--sk-bg-accent-subtle);
+  border-radius: var(--sk-radius-s);
+  font-size: 11px;
+  color: var(--sk-fg-secondary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sk-prompt__result-icon {
+  flex-shrink: 0;
+}
+
+/* \u2500\u2500\u2500 Action Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.sk-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px;
+  border-radius: var(--sk-radius-s);
+  border: 1px solid var(--sk-border);
+  background: var(--sk-bg);
+  font-family: var(--sk-font);
+  font-size: 11px;
+  color: var(--sk-fg);
+  cursor: pointer;
+  transition: all var(--sk-transition);
+  user-select: none;
+  white-space: nowrap;
+}
+
+.sk-btn:hover {
+  background: var(--sk-bg-hover);
+  border-color: var(--sk-fg-secondary);
+}
+
+.sk-btn--primary {
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  border-color: var(--sk-bg-accent);
+}
+
+.sk-btn--primary:hover {
+  opacity: 0.9;
+}
+
+.sk-btn--ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.sk-btn--ghost:hover {
+  background: var(--sk-bg-subtle);
+}
+
+.sk-btn--sm {
+  padding: 3px 6px;
+  font-size: 10px;
+}
+
+.sk-btn__icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* \u2500\u2500\u2500 Override Summary Pill \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 14px;
+  background: var(--sk-bg-accent-subtle);
+  border-bottom: 1px solid var(--sk-border-subtle);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.sk-summary__text {
+  color: var(--sk-bg-accent);
+  font-weight: 500;
+}
+
+.sk-summary__actions {
+  display: flex;
+  gap: 4px;
+}
+
+/* \u2500\u2500\u2500 Empty State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 20px;
+  text-align: center;
+  gap: 12px;
+  color: var(--sk-fg-tertiary);
+}
+
+.sk-empty__icon {
+  font-size: 28px;
+  opacity: 0.5;
+}
+
+.sk-empty__text {
+  font-size: 13px;
+  font-weight: 500;
+  max-width: 220px;
+  color: var(--sk-fg-secondary);
+}
+
+.sk-empty__hint {
+  font-size: 11px;
+  opacity: 0.7;
+  max-width: 220px;
+}
+
+.sk-empty__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  padding: 8px 16px;
+  border-radius: var(--sk-radius-m);
+  border: none;
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--sk-font);
+  cursor: pointer;
+  transition: all var(--sk-transition);
+}
+
+.sk-empty__cta svg {
+  width: 14px;
+  height: 14px;
+}
+
+.sk-empty__cta:hover {
+  opacity: 0.9;
+  box-shadow: var(--sk-shadow-sm);
+}
+
+/* \u2500\u2500\u2500 Undo Toast (overlaid) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-toast {
+  position: absolute;
+  bottom: 56px;
+  left: 14px;
+  right: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--sk-fg);
+  color: var(--sk-bg);
+  border-radius: var(--sk-radius-m);
+  box-shadow: var(--sk-shadow-md);
+  font-size: 11px;
+  animation: sk-slideUp 200ms ease;
+  z-index: 100;
+}
+
+.sk-toast__text { flex: 1; }
+
+.sk-toast__action {
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+@keyframes sk-slideUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* \u2500\u2500\u2500 Scrollbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-body::-webkit-scrollbar { width: 4px; }
+.sk-body::-webkit-scrollbar-track { background: transparent; }
+.sk-body::-webkit-scrollbar-thumb {
+  background: var(--sk-border);
+  border-radius: 2px;
+}
+
+/* \u2500\u2500\u2500 Detected Tokens (element-centric view) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-detect {
+  padding: 8px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.sk-detect__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 20px 10px;
+  text-align: center;
+}
+
+.sk-detect__empty-text {
+  font-size: 11px;
+  color: var(--sk-fg-tertiary);
+}
+
+/* \u2500\u2500\u2500 Row (shared between token and static rows) \u2500\u2500\u2500\u2500\u2500 */
+.sk-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 0;
+  border-bottom: 1px solid var(--sk-border-subtle);
+}
+
+.sk-row:last-child { border-bottom: none; }
+
+.sk-row--changed {
+  background: var(--sk-bg-accent-subtle);
+  border-radius: var(--sk-radius-s);
+  margin: 0 -6px;
+  padding: 5px 6px;
+  border-left: 2px solid var(--sk-bg-accent);
+}
+
+.sk-row__label {
+  width: 80px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--sk-fg-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sk-row__trigger {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  min-width: 0;
+  padding: 4px 6px;
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-s);
+  background: var(--sk-bg);
+  cursor: pointer;
+  font-family: var(--sk-font);
+  font-size: 11px;
+  color: var(--sk-fg);
+  transition: border-color var(--sk-transition), box-shadow var(--sk-transition);
+  text-align: left;
+}
+
+.sk-row__trigger:hover {
+  border-color: var(--sk-fg-secondary);
+}
+
+.sk-row__trigger--open {
+  border-color: var(--sk-bg-accent);
+  box-shadow: 0 0 0 1px var(--sk-bg-accent);
+}
+
+.sk-row__trigger--swapped {
+  border-color: var(--sk-bg-accent);
+  background: var(--sk-bg-accent-subtle);
+}
+
+.sk-row__trigger--static {
+  border-style: dashed;
+}
+
+.sk-row__trigger--modified {
+  border-style: solid;
+  border-color: var(--sk-bg-accent);
+  background: var(--sk-bg-accent-subtle);
+}
+
+.sk-row__trigger--readonly {
+  cursor: default;
+  opacity: 0.8;
+  border-style: none;
+  background: transparent;
+  padding-left: 0;
+}
+
+.sk-row__trigger--readonly:hover {
+  border-color: var(--sk-border);
+}
+
+.sk-row__swatch {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+  border: 1px solid var(--sk-border);
+  flex-shrink: 0;
+}
+
+.sk-row__name {
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sk-row__val {
+  font-size: 10px;
+  font-family: var(--sk-mono);
+  color: var(--sk-fg-tertiary);
+  margin-left: auto;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sk-row__val--full {
+  font-weight: 400;
+  flex: 1;
+  margin-left: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sk-row__chev {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--sk-fg-tertiary);
+  transition: transform var(--sk-transition);
+  display: flex;
+  align-items: center;
+}
+
+.sk-row__trigger--open .sk-row__chev {
+  transform: rotate(180deg);
+}
+
+.sk-row__unlink {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-s);
+  background: var(--sk-bg);
+  color: var(--sk-fg-tertiary);
+  cursor: pointer;
+  padding: 0;
+  transition: all var(--sk-transition);
+}
+
+.sk-row__unlink:hover {
+  border-color: var(--sk-bg-accent);
+  color: var(--sk-bg-accent);
+  background: var(--sk-bg-accent-subtle);
+}
+
+.sk-row__unlink--loading {
+  opacity: 0.5;
+  cursor: wait;
+  animation: sk-pulse 1s ease infinite;
+}
+
+/* \u2500\u2500\u2500 Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 80px;
+  right: 0;
+  z-index: 50;
+  margin-top: 2px;
+  padding: 4px 0;
+  background: var(--sk-bg);
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-m);
+  box-shadow: var(--sk-shadow-md);
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--sk-border) transparent;
+  animation: sk-fadeIn 100ms ease;
+}
+
+.sk-dropdown::-webkit-scrollbar { width: 4px; }
+.sk-dropdown::-webkit-scrollbar-track { background: transparent; }
+.sk-dropdown::-webkit-scrollbar-thumb {
+  background: var(--sk-border);
+  border-radius: 2px;
+}
+
+@keyframes sk-fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.sk-dropdown__opt {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--sk-font);
+  font-size: 11px;
+  color: var(--sk-fg);
+  text-align: left;
+  transition: background var(--sk-transition);
+}
+
+.sk-dropdown__opt:hover {
+  background: var(--sk-bg-hover);
+}
+
+.sk-dropdown__opt--active {
+  background: var(--sk-bg-accent-subtle);
+  font-weight: 600;
+}
+
+.sk-dropdown__opt--active:hover {
+  background: var(--sk-bg-accent-subtle);
+}
+
+.sk-dropdown__opt--original {
+  border-left: 2px solid var(--sk-fg-tertiary);
+}
+
+.sk-dropdown__opt--nearest {
+  background: var(--sk-bg-accent-subtle);
+}
+
+.sk-dropdown__swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: 1px solid var(--sk-border);
+  flex-shrink: 0;
+}
+
+.sk-dropdown__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sk-dropdown__val {
+  font-size: 10px;
+  font-family: var(--sk-mono);
+  color: var(--sk-fg-tertiary);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sk-dropdown__badge {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: 8px;
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.sk-dropdown__input-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--sk-border-subtle);
+}
+
+.sk-dropdown__input {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 6px;
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-s);
+  background: var(--sk-bg);
+  font-family: var(--sk-mono);
+  font-size: 11px;
+  color: var(--sk-fg);
+  outline: none;
+  transition: border-color var(--sk-transition);
+}
+
+.sk-dropdown__input:focus {
+  border-color: var(--sk-bg-accent);
+  box-shadow: 0 0 0 1px var(--sk-bg-accent);
+}
+
+.sk-dropdown__apply {
+  padding: 4px 10px;
+  border: none;
+  border-radius: var(--sk-radius-s);
+  background: var(--sk-bg-accent);
+  color: var(--sk-fg-on-accent);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: opacity var(--sk-transition);
+}
+
+.sk-dropdown__apply:hover {
+  opacity: 0.85;
+}
+
+.sk-dropdown__color-pick {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--sk-border);
+  border-radius: var(--sk-radius-s);
+  cursor: pointer;
+  flex-shrink: 0;
+  background: none;
+}
+
+.sk-dropdown__sep {
+  padding: 4px 8px;
+  font-size: 10px;
+  color: var(--sk-fg-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--sk-border-subtle);
+}
+
+/* \u2500\u2500\u2500 Property Groups \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-group {
+  padding: 0 14px;
+}
+
+.sk-group + .sk-group {
+  border-top: 1px solid var(--sk-border-subtle);
+}
+
+.sk-group__label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--sk-fg-tertiary);
+  padding: 8px 0 2px;
+}
+
+/* \u2500\u2500\u2500 Browse All Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sk-browse-toggle {
+  display: block;
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 11px;
+  color: var(--sk-bg-accent);
+  background: transparent;
+  border: none;
+  border-top: 1px solid var(--sk-border-subtle);
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--sk-font);
+  transition: background var(--sk-transition);
+}
+
+.sk-browse-toggle:hover {
+  background: var(--sk-bg-accent-subtle);
+}
+`
+);
+
+// src/panel.ts
+var ICONS = {
+  chevron: '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 2l4 4-4 4"/></svg>',
+  pick: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><circle cx="8" cy="8" r="5"/><path d="M8 3v10M3 8h10"/></svg>',
+  sparkle: '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0l1.5 5.5L15 6l-5.5 1.5L8 13l-1.5-5.5L1 6l5.5-1.5z"/></svg>',
+  send: '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M14.5 8L1 1.5l3.25 6.5L1 14.5z"/></svg>',
+  copy: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="5" y="5" width="8" height="8" rx="1.5"/><path d="M3 11V3.5A1.5 1.5 0 014.5 2H11"/></svg>',
+  github: '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 .2A8 8 0 005.47 15.8c.4.07.55-.17.55-.39V14c-2.24.49-2.71-1.07-2.71-1.07a2.13 2.13 0 00-.9-1.18c-.73-.5.06-.49.06-.49.8.06 1.23.83 1.23.83.72 1.23 1.88.87 2.34.67a1.71 1.71 0 01.51-1.07c-1.78-.2-3.64-.89-3.64-3.95a3.1 3.1 0 01.82-2.15 2.88 2.88 0 01.08-2.12s.67-.22 2.2.82a7.58 7.58 0 014 0c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12a3.1 3.1 0 01.82 2.15c0 3.07-1.87 3.75-3.65 3.95a1.92 1.92 0 01.55 1.49v2.21c0 .26.14.47.55.39A8 8 0 008 .2z"/></svg>',
+  undo: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M3 7l3-3M3 7l3 3M3.5 7H10a3 3 0 010 6H8"/></svg>',
+  save: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M12.5 14.5h-9a1 1 0 01-1-1v-11a1 1 0 011-1h7l3 3v9a1 1 0 01-1 1z"/><path d="M5.5 1.5v3h4v-3M5.5 9.5h5"/></svg>',
+  x: '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3l6 6M9 3l-6 6"/></svg>',
+  plus: '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2v8M2 6h8"/></svg>',
+  code: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M5 4L1.5 8 5 12M11 4l3.5 4L11 12"/></svg>',
+  unlink: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M7 9l-1.5 1.5a2.12 2.12 0 01-3-3L5 5"/><path d="M9 7l1.5-1.5a2.12 2.12 0 013 3L11 11"/></svg>',
+  chevronDown: '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 4.5l3 3 3-3"/></svg>'
+};
+function icon(name, cls = "") {
+  return `<span class="${cls}" style="display:inline-flex;width:1em;height:1em">${ICONS[name]}</span>`;
+}
+function el(tag, cls) {
+  const e = document.createElement(tag);
+  if (cls) e.className = cls;
+  return e;
+}
+function html(parent, content) {
+  parent.innerHTML = content;
+}
+var registry = [];
+var currentScope = { type: "global" };
+var pickedElement = null;
+var detectedTokensCache = [];
+var staticValuesCache = [];
+var promptMessages = [];
+var collapsedCategories = /* @__PURE__ */ new Set();
+var showAllTokens = false;
+var openDropdownId = null;
+var promotedStatics = /* @__PURE__ */ new Map();
+var panelRoot = null;
+var ctx = null;
+var CATEGORY_ORDER = [
+  "spacingH",
+  "spacingV",
+  "fontSize",
+  "fontWeight",
+  "borderRadius",
+  "shadow",
+  "strokeWidth",
+  "colorNeutralBg",
+  "colorNeutralFg",
+  "colorBrandBg",
+  "colorBrandFg",
+  "colorNeutralStroke",
+  "colorBrandStroke",
+  "lineHeight",
+  "duration",
+  "curve"
+];
+function truncatePath(path, maxSegments = 2) {
+  const sep = " > ";
+  const parts = path.split(sep);
+  if (parts.length <= maxSegments) return path;
+  return "\u2026 > " + parts.slice(-maxSegments).join(sep);
+}
+function showInlineInput(anchor, placeholder, onSubmit) {
+  anchor.closest(".sk-variations, .sk-summary")?.querySelector(".sk-inline-input")?.remove();
+  const wrapper = el("div", "sk-inline-input");
+  const input = document.createElement("input");
+  input.type = "text";
+  input.className = "sk-inline-input__field";
+  input.placeholder = placeholder;
+  input.setAttribute("autocomplete", "off");
+  const confirmBtn = el("button", "sk-inline-input__ok");
+  confirmBtn.textContent = "\u2713";
+  confirmBtn.title = "Confirm";
+  const cancelBtn = el("button", "sk-inline-input__cancel");
+  cancelBtn.textContent = "\u2715";
+  cancelBtn.title = "Cancel";
+  function submit() {
+    const val = input.value.trim();
+    wrapper.remove();
+    if (val) onSubmit(val);
+  }
+  function cancel() {
+    wrapper.remove();
+  }
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      submit();
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      cancel();
+    }
+  });
+  confirmBtn.addEventListener("click", submit);
+  cancelBtn.addEventListener("click", cancel);
+  wrapper.appendChild(input);
+  wrapper.appendChild(confirmBtn);
+  wrapper.appendChild(cancelBtn);
+  anchor.parentElement?.insertBefore(wrapper, anchor.nextSibling);
+  input.focus();
+}
+async function triggerPick(activateEl) {
+  if (!ctx) return;
+  activateEl?.classList.add("sk-scope__pick--active");
+  try {
+    const result = await ctx.services.elementPicker.pick({
+      source: "style-kit",
+      prompt: "Click an element to see its design tokens"
+    });
+    if (result) {
+      pickedElement = { element: result.element, selector: result.selector, displayPath: result.displayPath };
+      currentScope = { type: "selector", selector: result.selector, label: result.displayPath };
+      const detection = detectAll(result.element, registry);
+      detectedTokensCache = detection.tokens;
+      staticValuesCache = detection.statics;
+      showAllTokens = false;
+      refresh();
+    }
+  } finally {
+    activateEl?.classList.remove("sk-scope__pick--active");
+  }
+}
+function renderScopeBar() {
+  const bar = el("div", "sk-scope");
+  const label = el("span", "sk-scope__label");
+  label.textContent = "SCOPE";
+  bar.appendChild(label);
+  const valueBtn = el("button", "sk-scope__value");
+  const valueTxt = el("span", "sk-scope__value-text");
+  valueTxt.textContent = currentScope.type === "global" ? "Global (all elements)" : truncatePath(currentScope.label);
+  valueTxt.title = currentScope.type === "global" ? "" : currentScope.label;
+  valueBtn.appendChild(valueTxt);
+  valueBtn.addEventListener("click", () => {
+    if (pickedElement) {
+      if (currentScope.type === "global") {
+        currentScope = { type: "selector", selector: pickedElement.selector, label: pickedElement.displayPath };
+      } else {
+        currentScope = { type: "global" };
+      }
+      refresh();
+    }
+  });
+  bar.appendChild(valueBtn);
+  const pickBtn = el("button", "sk-scope__pick");
+  html(pickBtn, `${icon("pick")} Pick Element`);
+  pickBtn.title = "Pick an element to inspect its design tokens";
+  pickBtn.addEventListener("click", () => triggerPick(pickBtn));
+  bar.appendChild(pickBtn);
+  if (pickedElement) {
+    const clearBtn = el("button", "sk-scope__pick sk-scope__pick--icon-only");
+    html(clearBtn, icon("x"));
+    clearBtn.title = "Clear selection";
+    clearBtn.addEventListener("click", () => {
+      pickedElement = null;
+      currentScope = { type: "global" };
+      detectedTokensCache = [];
+      staticValuesCache = [];
+      promotedStatics.clear();
+      showAllTokens = false;
+      refresh();
+    });
+    bar.appendChild(clearBtn);
+  }
+  return bar;
+}
+function renderVariationsBar() {
+  const bar = el("div", "sk-variations");
+  const store2 = getStore();
+  const baseChip = el("button", `sk-var-chip sk-var-chip--base ${store2.active === null ? "sk-var-chip--active" : ""}`);
+  baseChip.textContent = "Base";
+  baseChip.addEventListener("click", () => {
+    loadBase();
+    refresh();
+  });
+  bar.appendChild(baseChip);
+  for (const v of store2.variations) {
+    const chip = el("button", `sk-var-chip ${store2.active === v.id ? "sk-var-chip--active" : ""}`);
+    const nameSpan = el("span");
+    nameSpan.textContent = v.name;
+    chip.appendChild(nameSpan);
+    if (store2.active === v.id) {
+      const xBtn = el("span", "sk-var-chip__x");
+      html(xBtn, icon("x"));
+      xBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        deleteVariation(v.id);
+        refresh();
+      });
+      chip.appendChild(xBtn);
+    }
+    chip.addEventListener("click", () => {
+      loadVariation(v.id);
+      refresh();
+    });
+    bar.appendChild(chip);
+  }
+  const addBtn = el("button", "sk-var-add");
+  html(addBtn, icon("plus"));
+  addBtn.title = "Save current overrides as a variation";
+  addBtn.addEventListener("click", () => {
+    showInlineInput(addBtn, "Variation name\u2026", (name) => {
+      saveVariation(name);
+      refresh();
+    });
+  });
+  bar.appendChild(addBtn);
+  return bar;
+}
+function renderOverrideSummary() {
+  const overrides = getOverrides();
+  const staticOverrides = getStaticOverridesList();
+  const total = overrides.length + staticOverrides.length;
+  if (total === 0) return null;
+  const bar = el("div", "sk-summary");
+  const text = el("span", "sk-summary__text");
+  text.textContent = `${total} override${total > 1 ? "s" : ""} active`;
+  bar.appendChild(text);
+  const actions = el("div", "sk-summary__actions");
+  const undoBtn = el("button", "sk-btn sk-btn--sm sk-btn--ghost");
+  html(undoBtn, `${icon("undo", "sk-btn__icon")} Reset all`);
+  undoBtn.addEventListener("click", () => {
+    clearAll();
+    refresh();
+  });
+  actions.appendChild(undoBtn);
+  const saveBtn = el("button", "sk-btn sk-btn--sm sk-btn--ghost");
+  html(saveBtn, `${icon("save", "sk-btn__icon")} Save`);
+  saveBtn.addEventListener("click", () => {
+    const store2 = getStore();
+    if (store2.active) {
+      updateActiveVariation();
+      ctx?.services.notify.toast("Variation updated");
+    } else {
+      showInlineInput(saveBtn, "Variation name\u2026", (name) => {
+        saveVariation(name);
+        refresh();
+      });
+    }
+  });
+  actions.appendChild(saveBtn);
+  bar.appendChild(actions);
+  return bar;
+}
+function isColorCategory(cat) {
+  return cat.startsWith("color");
+}
+function renderTokenStepper(scale, entry) {
+  const override = getOverrideForToken(entry.name, currentScope);
+  const currentValue = override?.newValue ?? entry.value;
+  const isModified = !!override;
+  const activeIdx = scale.entries.findIndex(
+    (e) => override ? e.value === override.newValue : e.name === entry.name
+  );
+  const row = el("div", "sk-stepper");
+  const label = el("span", "sk-stepper__label");
+  label.textContent = entry.label;
+  label.title = entry.name;
+  row.appendChild(label);
+  const track = el("div", "sk-stepper__track");
+  scale.entries.forEach((step, i) => {
+    const seg = el("div", "sk-stepper__step");
+    if (i <= activeIdx) {
+      seg.classList.add(i === activeIdx ? "sk-stepper__step--active" : "sk-stepper__step--modified");
+    }
+    seg.setAttribute("data-tooltip", `${step.label}: ${step.value}`);
+    seg.addEventListener("click", () => {
+      if (step.name === entry.name && !override) return;
+      applyOverride({
+        tokenName: entry.name,
+        cssVar: entry.cssVar,
+        originalValue: entry.value,
+        newValue: step.value,
+        scope: currentScope
+      });
+      refresh();
+    });
+    track.appendChild(seg);
+  });
+  row.appendChild(track);
+  const val = el("span", `sk-stepper__value ${isModified ? "sk-stepper__value--modified" : ""}`);
+  val.textContent = currentValue;
+  row.appendChild(val);
+  return row;
+}
+function renderColorSwatch(scale, entry) {
+  const override = getOverrideForToken(entry.name, currentScope);
+  const currentValue = override?.newValue ?? entry.value;
+  const isModified = !!override;
+  const row = el("div", "sk-swatch-row");
+  const label = el("span", "sk-swatch-row__label");
+  label.textContent = entry.label;
+  label.title = entry.name;
+  row.appendChild(label);
+  const swatch = el("div", `sk-swatch ${isModified ? "sk-swatch--active" : ""}`);
+  swatch.style.backgroundColor = currentValue;
+  row.appendChild(swatch);
+  const colorInput = el("input", "sk-color-input");
+  colorInput.type = "color";
+  colorInput.value = currentValue.startsWith("#") ? currentValue : rgbToHex(currentValue);
+  colorInput.addEventListener("input", () => {
+    applyOverride({
+      tokenName: entry.name,
+      cssVar: entry.cssVar,
+      originalValue: entry.value,
+      newValue: colorInput.value,
+      scope: currentScope
+    });
+    refresh();
+  });
+  row.appendChild(colorInput);
+  swatch.addEventListener("click", () => colorInput.click());
+  const hex = el("span", `sk-swatch__hex ${isModified ? "sk-swatch__hex--modified" : ""}`);
+  hex.textContent = currentValue;
+  row.appendChild(hex);
+  if (isModified) {
+    const undo = el("button", "sk-btn sk-btn--sm sk-btn--ghost");
+    html(undo, icon("undo", "sk-btn__icon"));
+    undo.title = "Reset to original";
+    undo.addEventListener("click", () => {
+      removeOverride(entry.name, currentScope);
+      refresh();
+    });
+    row.appendChild(undo);
+  }
+  return row;
+}
+function renderCategory(scale) {
+  const cat = el("div", "sk-cat");
+  const isOpen = !collapsedCategories.has(scale.category);
+  if (isOpen) cat.classList.add("sk-cat--open");
+  const overridesInCat = scale.entries.filter(
+    (e) => getOverrideForToken(e.name, currentScope)
+  ).length;
+  const header = el("div", "sk-cat__header");
+  const chevron = el("span", "sk-cat__chevron");
+  html(chevron, ICONS.chevron);
+  header.appendChild(chevron);
+  const label = el("span", "sk-cat__label");
+  label.textContent = scale.label;
+  header.appendChild(label);
+  if (overridesInCat > 0) {
+    const count = el("span", "sk-cat__count");
+    count.textContent = String(overridesInCat);
+    header.appendChild(count);
+  }
+  header.addEventListener("click", () => {
+    if (collapsedCategories.has(scale.category)) {
+      collapsedCategories.delete(scale.category);
+    } else {
+      collapsedCategories.add(scale.category);
+    }
+    refresh();
+  });
+  cat.appendChild(header);
+  const body = el("div", "sk-cat__body");
+  const isColor = isColorCategory(scale.category);
+  for (const entry of scale.entries) {
+    if (isColor) {
+      body.appendChild(renderColorSwatch(scale, entry));
+    } else {
+      body.appendChild(renderTokenStepper(scale, entry));
+    }
+  }
+  cat.appendChild(body);
+  return cat;
+}
+function renderPromptBar() {
+  const bar = el("div", "sk-prompt");
+  const wrap = el("div", "sk-prompt__wrap");
+  const sparkleIcon = el("span", "sk-prompt__icon");
+  html(sparkleIcon, ICONS.sparkle);
+  wrap.appendChild(sparkleIcon);
+  const input = el("input", "sk-prompt__input");
+  input.type = "text";
+  input.placeholder = getScopePlaceholder();
+  wrap.appendChild(input);
+  const sendBtn = el("button", "sk-prompt__send");
+  html(sendBtn, ICONS.send);
+  wrap.appendChild(sendBtn);
+  input.addEventListener("input", () => {
+    sendBtn.classList.toggle("sk-prompt__send--ready", input.value.trim().length > 0);
+  });
+  const submit = async () => {
+    const text = input.value.trim();
+    if (!text || !ctx?.services.copilot.available) return;
+    sendBtn.classList.add("sk-prompt__send--loading");
+    input.disabled = true;
+    try {
+      const systemPrompt = buildSystemPrompt();
+      promptMessages.push({ role: "user", content: text });
+      const response = await ctx.services.copilot.ask([
+        { role: "system", content: systemPrompt },
+        ...promptMessages
+      ]);
+      promptMessages.push({ role: "assistant", content: response });
+      const parsed = parseOverrideResponse(response);
+      if (parsed.length > 0) {
+        for (const o of parsed) {
+          applyOverride({
+            tokenName: o.token,
+            cssVar: `--${o.token}`,
+            originalValue: getResolvedValue(`--${o.token}`),
+            newValue: o.value,
+            scope: currentScope
+          });
+        }
+        input.value = "";
+        sendBtn.classList.remove("sk-prompt__send--ready");
+        ctx.services.notify.toast(`Applied ${parsed.length} token override${parsed.length > 1 ? "s" : ""}`);
+        refresh();
+      } else {
+        ctx.services.notify.toast("No token changes suggested \u2014 try being more specific");
+      }
+    } catch (err) {
+      ctx.services.notify.toast("Copilot request failed");
+    } finally {
+      sendBtn.classList.remove("sk-prompt__send--loading");
+      input.disabled = false;
+      input.focus();
+    }
+  };
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") submit();
+  });
+  sendBtn.addEventListener("click", submit);
+  bar.appendChild(wrap);
+  return bar;
+}
+function renderFooterActions() {
+  const footer = el("div", "sk-footer");
+  const actions = el("div", "sk-actions");
+  const copyBtn = el("button", "sk-btn");
+  html(copyBtn, `${icon("copy", "sk-btn__icon")} Copy CSS`);
+  copyBtn.addEventListener("click", async () => {
+    const { css } = serializeOverrides();
+    await ctx?.services.clipboard.copy(css);
+    ctx?.services.notify.toast("CSS copied to clipboard");
+  });
+  actions.appendChild(copyBtn);
+  const themeBtn = el("button", "sk-btn");
+  html(themeBtn, `${icon("code", "sk-btn__icon")} Theme`);
+  themeBtn.addEventListener("click", async () => {
+    const { themePartial } = serializeOverrides();
+    await ctx?.services.clipboard.copy(themePartial);
+    ctx?.services.notify.toast("Theme partial copied");
+  });
+  actions.appendChild(themeBtn);
+  if (ctx?.services.github.available) {
+    const issueBtn = el("button", "sk-btn");
+    html(issueBtn, `${icon("github", "sk-btn__icon")} Create Issue`);
+    issueBtn.addEventListener("click", async () => {
+      await applyToCode();
+    });
+    actions.appendChild(issueBtn);
+  }
+  const fixPromptBtn = el("button", "sk-btn sk-btn--primary");
+  html(fixPromptBtn, `${icon("copy", "sk-btn__icon")} Copy Fix Prompt`);
+  fixPromptBtn.addEventListener("click", async () => {
+    await copyFixPrompt();
+  });
+  actions.appendChild(fixPromptBtn);
+  footer.appendChild(actions);
+  return footer;
+}
+function renderEmptyState() {
+  const empty = el("div", "sk-empty");
+  html(empty, `
+    <div class="sk-empty__icon">${ICONS.pick}</div>
+    <div class="sk-empty__text">Pick an element to explore its design tokens</div>
+    <div class="sk-empty__hint">Select any element on the page to see which tokens it uses, swap values, and ship overrides.</div>
+  `);
+  const ctaBtn = el("button", "sk-empty__cta");
+  html(ctaBtn, `${icon("pick")} Pick Element`);
+  ctaBtn.addEventListener("click", () => triggerPick(ctaBtn));
+  empty.appendChild(ctaBtn);
+  return empty;
+}
+var GROUP_ORDER = ["Typography", "Appearance", "Layout"];
+function getPropertyGroup(prop) {
+  if (/^font-|^line-height$|^color$|^letter-spacing$/.test(prop)) return "Typography";
+  if (/^text-|^white-space$/.test(prop)) return "Typography";
+  if (/background|border|shadow|opacity|radius|stroke/.test(prop)) return "Appearance";
+  return "Layout";
+}
+function renderGroupedProperties() {
+  const wrap = el("div", "sk-detect");
+  const total = detectedTokensCache.length + staticValuesCache.length;
+  if (total === 0) {
+    const empty = el("div", "sk-detect__empty");
+    html(empty, `
+      <span class="sk-detect__empty-text">No Fluent tokens detected on this element.</span>
+      <button class="sk-btn sk-btn--sm">Browse all tokens</button>
+    `);
+    empty.querySelector("button")?.addEventListener("click", () => {
+      showAllTokens = true;
+      refresh();
+    });
+    wrap.appendChild(empty);
+    return wrap;
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const g of GROUP_ORDER) groups.set(g, []);
+  for (const dt of detectedTokensCache) {
+    const g = getPropertyGroup(dt.property);
+    groups.get(g)?.push({ kind: "token", token: dt });
+  }
+  for (const sv of staticValuesCache) {
+    const g = getPropertyGroup(sv.property);
+    groups.get(g)?.push({ kind: "static", sv });
+  }
+  for (const groupName of GROUP_ORDER) {
+    const items = groups.get(groupName);
+    if (!items || items.length === 0) continue;
+    const groupEl = el("div", "sk-group");
+    const label = el("div", "sk-group__label");
+    label.textContent = groupName;
+    groupEl.appendChild(label);
+    for (const item of items) {
+      if (item.kind === "token") {
+        groupEl.appendChild(renderScalePicker(item.token));
+      } else {
+        const promotion = promotedStatics.get(item.sv.property);
+        if (promotion) {
+          groupEl.appendChild(renderPromotedRow(item.sv, promotion));
+        } else {
+          groupEl.appendChild(renderStaticRow(item.sv));
+        }
+      }
+    }
+    wrap.appendChild(groupEl);
+  }
+  return wrap;
+}
+function renderScalePicker(dt) {
+  const rowId = `tok-${dt.property}-${dt.scale.category}`;
+  const override = getOverrideForToken(dt.current.name, currentScope);
+  const isSwapped = !!override;
+  const item = el("div", `sk-row${isSwapped ? " sk-row--changed" : ""}`);
+  const isColor = dt.scale.category.startsWith("color");
+  const isOpen = openDropdownId === rowId;
+  let activeIdx = dt.index;
+  let activeEntry = dt.current;
+  if (override) {
+    const swappedIdx = dt.scale.entries.findIndex((e) => cssValuesMatch(e.value, override.newValue));
+    if (swappedIdx !== -1) {
+      activeIdx = swappedIdx;
+      activeEntry = dt.scale.entries[swappedIdx];
+    }
+  }
+  const label = el("span", "sk-row__label");
+  label.textContent = dt.label;
+  item.appendChild(label);
+  const trigger = el("button", `sk-row__trigger ${isSwapped ? "sk-row__trigger--swapped" : ""} ${isOpen ? "sk-row__trigger--open" : ""}`);
+  if (isColor) {
+    const swatch = el("span", "sk-row__swatch");
+    swatch.style.backgroundColor = activeEntry.value;
+    trigger.appendChild(swatch);
+  }
+  const name = el("span", "sk-row__name");
+  name.textContent = activeEntry.label;
+  trigger.appendChild(name);
+  const val = el("span", "sk-row__val");
+  val.textContent = activeEntry.value;
+  trigger.appendChild(val);
+  const chev = el("span", "sk-row__chev");
+  html(chev, ICONS.chevronDown);
+  trigger.appendChild(chev);
+  trigger.addEventListener("click", () => {
+    openDropdownId = isOpen ? null : rowId;
+    refresh();
+  });
+  item.appendChild(trigger);
+  const unlinkBtn = el("button", "sk-row__unlink");
+  html(unlinkBtn, icon("unlink"));
+  unlinkBtn.title = `Unlink token \u2192 static: ${dt.property}: ${activeEntry.value}`;
+  unlinkBtn.addEventListener("click", () => {
+    const css = `${dt.property}: ${activeEntry.value};`;
+    ctx?.services.clipboard.copy(css);
+    ctx?.services.notify.toast(`Unlinked: ${css}`);
+  });
+  item.appendChild(unlinkBtn);
+  if (isOpen) {
+    const dropdown = el("div", "sk-dropdown");
+    for (let i = 0; i < dt.scale.entries.length; i++) {
+      const entry = dt.scale.entries[i];
+      const isActive = i === activeIdx;
+      const isOriginal = i === dt.index && isSwapped;
+      const opt = el("button", `sk-dropdown__opt ${isActive ? "sk-dropdown__opt--active" : ""} ${isOriginal ? "sk-dropdown__opt--original" : ""}`);
+      if (isColor) {
+        const sw = el("span", "sk-dropdown__swatch");
+        sw.style.backgroundColor = entry.value;
+        opt.appendChild(sw);
+      }
+      const optName = el("span", "sk-dropdown__name");
+      optName.textContent = entry.label;
+      opt.appendChild(optName);
+      const optVal = el("span", "sk-dropdown__val");
+      optVal.textContent = entry.value;
+      opt.appendChild(optVal);
+      if (isOriginal) {
+        const badge = el("span", "sk-dropdown__badge");
+        badge.textContent = "original";
+        opt.appendChild(badge);
+      }
+      opt.addEventListener("click", () => {
+        handleTokenSwap(dt, entry, i);
+        openDropdownId = null;
+      });
+      dropdown.appendChild(opt);
+    }
+    item.appendChild(dropdown);
+  }
+  return item;
+}
+function handleTokenSwap(dt, target, targetIdx) {
+  if (targetIdx === dt.index) {
+    removeOverride(dt.current.name, currentScope);
+  } else {
+    applyOverride({
+      tokenName: dt.current.name,
+      cssVar: dt.current.cssVar,
+      originalValue: dt.current.value,
+      newValue: target.value,
+      scope: currentScope
+    });
+  }
+  if (pickedElement) {
+    const d = detectAll(pickedElement.element, registry);
+    detectedTokensCache = d.tokens;
+    staticValuesCache = d.statics;
+  }
+  refresh();
+}
+function cssValuesMatch(a, b) {
+  return a.trim().toLowerCase() === b.trim().toLowerCase();
+}
+function renderPromotedRow(sv, promotion) {
+  const rowId = `promoted-${sv.property}`;
+  const isOpen = openDropdownId === rowId;
+  const isColor = sv.isColor;
+  const item = el("div", "sk-row sk-row--changed");
+  const label = el("span", "sk-row__label");
+  label.textContent = sv.label;
+  label.title = sv.property;
+  item.appendChild(label);
+  const trigger = el("button", `sk-row__trigger sk-row__trigger--swapped ${isOpen ? "sk-row__trigger--open" : ""}`);
+  if (isColor) {
+    const swatch = el("span", "sk-row__swatch");
+    swatch.style.backgroundColor = promotion.entry.value;
+    trigger.appendChild(swatch);
+  }
+  const name = el("span", "sk-row__name");
+  name.textContent = promotion.entry.label;
+  trigger.appendChild(name);
+  const val = el("span", "sk-row__val");
+  val.textContent = promotion.entry.value;
+  trigger.appendChild(val);
+  const chev = el("span", "sk-row__chev");
+  html(chev, ICONS.chevronDown);
+  trigger.appendChild(chev);
+  trigger.addEventListener("click", () => {
+    openDropdownId = isOpen ? null : rowId;
+    refresh();
+  });
+  item.appendChild(trigger);
+  const unlinkBtn = el("button", "sk-row__unlink");
+  html(unlinkBtn, icon("unlink"));
+  unlinkBtn.title = `Unlink: revert to ${sv.property}: ${sv.value}`;
+  unlinkBtn.addEventListener("click", () => {
+    removeOverride(promotion.entry.name, currentScope);
+    promotedStatics.delete(sv.property);
+    refresh();
+  });
+  item.appendChild(unlinkBtn);
+  if (isOpen) {
+    const dropdown = el("div", "sk-dropdown");
+    for (const entry of promotion.scale.entries) {
+      const isActive = entry.name === promotion.entry.name;
+      const opt = el("button", `sk-dropdown__opt ${isActive ? "sk-dropdown__opt--active" : ""}`);
+      if (isColor) {
+        const sw = el("span", "sk-dropdown__swatch");
+        sw.style.backgroundColor = entry.value;
+        opt.appendChild(sw);
+      }
+      const optName = el("span", "sk-dropdown__name");
+      optName.textContent = entry.label;
+      opt.appendChild(optName);
+      const optVal = el("span", "sk-dropdown__val");
+      optVal.textContent = entry.value;
+      opt.appendChild(optVal);
+      opt.addEventListener("click", () => {
+        promotedStatics.set(sv.property, { entry, scale: promotion.scale });
+        applyOverride({
+          tokenName: entry.name,
+          cssVar: entry.cssVar,
+          originalValue: sv.value,
+          newValue: entry.value,
+          scope: currentScope
+        });
+        openDropdownId = null;
+        refresh();
+      });
+      dropdown.appendChild(opt);
+    }
+    item.appendChild(dropdown);
+  }
+  return item;
+}
+function renderStaticRow(sv) {
+  const rowId = `static-${sv.property}`;
+  const hasCandidates = sv.candidateCategories.length > 0;
+  const isOpen = openDropdownId === rowId;
+  const row = el("div", "sk-row");
+  const label = el("span", "sk-row__label");
+  label.textContent = sv.label;
+  label.title = sv.property;
+  row.appendChild(label);
+  const staticOverride = getStaticOverrideForProperty(sv.property, currentScope);
+  const displayValue = staticOverride ? staticOverride.newValue : sv.value;
+  const isModified = !!staticOverride;
+  const trigger = el("button", `sk-row__trigger sk-row__trigger--static ${isOpen ? "sk-row__trigger--open" : ""} ${isModified ? "sk-row__trigger--modified" : ""}`);
+  if (sv.isColor) {
+    const swatch = el("span", "sk-row__swatch");
+    swatch.style.backgroundColor = displayValue;
+    trigger.appendChild(swatch);
+  }
+  const valText = el("span", "sk-row__val sk-row__val--full");
+  valText.textContent = displayValue;
+  trigger.appendChild(valText);
+  const chev = el("span", "sk-row__chev");
+  html(chev, ICONS.chevronDown);
+  trigger.appendChild(chev);
+  trigger.addEventListener("click", () => {
+    openDropdownId = isOpen ? null : rowId;
+    refresh();
+  });
+  row.appendChild(trigger);
+  if (isModified) {
+    const undoBtn = el("button", "sk-row__unlink");
+    html(undoBtn, icon("undo"));
+    undoBtn.title = `Reset to ${sv.value}`;
+    undoBtn.addEventListener("click", () => {
+      removeStaticOverride(sv.property, currentScope);
+      refresh();
+    });
+    row.appendChild(undoBtn);
+  } else if (hasCandidates && ctx?.services.copilot.available) {
+    const findBtn = el("button", "sk-row__unlink");
+    html(findBtn, icon("sparkle"));
+    findBtn.title = "Ask Copilot to find a matching token";
+    findBtn.addEventListener("click", () => handleFindToken(sv, findBtn));
+    row.appendChild(findBtn);
+  }
+  if (isOpen) {
+    const dropdown = el("div", "sk-dropdown");
+    const inputRow = el("div", "sk-dropdown__input-row");
+    if (sv.isColor) {
+      const colorInput = el("input", "sk-dropdown__color-pick");
+      colorInput.type = "color";
+      colorInput.value = displayValue.startsWith("#") ? displayValue : rgbToHex(displayValue);
+      colorInput.addEventListener("input", () => {
+        const txtInput = inputRow.querySelector(".sk-dropdown__input");
+        if (txtInput) txtInput.value = colorInput.value;
+      });
+      inputRow.appendChild(colorInput);
+    }
+    const input = el("input", "sk-dropdown__input");
+    input.type = "text";
+    input.value = displayValue;
+    input.placeholder = "Type a value\u2026";
+    input.setAttribute("autocomplete", "off");
+    const applyBtn = el("button", "sk-dropdown__apply");
+    applyBtn.textContent = "Apply";
+    const submitValue = () => {
+      const val = input.value.trim();
+      if (!val) {
+        openDropdownId = null;
+        refresh();
+        return;
+      }
+      if (val === sv.value && isModified) {
+        removeStaticOverride(sv.property, currentScope);
+      } else if (val !== sv.value) {
+        applyStaticOverride({ property: sv.property, originalValue: sv.value, newValue: val, scope: currentScope });
+      }
+      openDropdownId = null;
+      refresh();
+    };
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        submitValue();
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        openDropdownId = null;
+        refresh();
+      }
+      e.stopPropagation();
+    });
+    applyBtn.addEventListener("click", submitValue);
+    inputRow.appendChild(input);
+    inputRow.appendChild(applyBtn);
+    dropdown.appendChild(inputRow);
+    requestAnimationFrame(() => {
+      input.focus();
+      input.select();
+    });
+    if (hasCandidates) {
+      const sep = el("div", "sk-dropdown__sep");
+      sep.textContent = "or pick a token";
+      dropdown.appendChild(sep);
+      const nearest = findNearestInScale(sv.value, sv.candidateCategories, registry);
+      const relevantScales = registry.filter((s) => sv.candidateCategories.includes(s.category));
+      for (const scale of relevantScales) {
+        const isColor = scale.category.startsWith("color");
+        for (const entry of scale.entries) {
+          const isNearest = nearest && entry.name === nearest.entry.name;
+          const opt = el("button", `sk-dropdown__opt ${isNearest ? "sk-dropdown__opt--nearest" : ""}`);
+          if (isColor) {
+            const sw = el("span", "sk-dropdown__swatch");
+            sw.style.backgroundColor = entry.value;
+            opt.appendChild(sw);
+          }
+          const optName = el("span", "sk-dropdown__name");
+          optName.textContent = entry.label;
+          opt.appendChild(optName);
+          const optVal = el("span", "sk-dropdown__val");
+          optVal.textContent = entry.value;
+          opt.appendChild(optVal);
+          if (isNearest) {
+            const badge = el("span", "sk-dropdown__badge");
+            badge.textContent = "nearest";
+            opt.appendChild(badge);
+          }
+          opt.addEventListener("click", () => {
+            promotedStatics.set(sv.property, { entry, scale });
+            applyOverride({
+              tokenName: entry.name,
+              cssVar: entry.cssVar,
+              originalValue: sv.value,
+              newValue: entry.value,
+              scope: currentScope
+            });
+            openDropdownId = null;
+            refresh();
+          });
+          dropdown.appendChild(opt);
+        }
+      }
+    }
+    row.appendChild(dropdown);
+  }
+  return row;
+}
+async function handleFindToken(sv, btn) {
+  if (!ctx?.services.copilot.available) return;
+  btn.classList.add("sk-row__unlink--loading");
+  const relevantScales = registry.filter((s) => sv.candidateCategories.includes(s.category));
+  const scaleInfo = relevantScales.map(
+    (s) => `${s.label} (${s.category}): ${s.entries.map((e) => `${e.label}=${e.value} [var:${e.cssVar}]`).join(", ")}`
+  ).join("\n");
+  try {
+    const response = await ctx.services.copilot.ask([
+      { role: "system", content: "You are a design token matching assistant. Return ONLY valid JSON, no markdown." },
+      { role: "user", content: `Find the closest Fluent UI design token for:
+Property: ${sv.property}
+Current value: ${sv.value}
+
+Available token scales:
+${scaleInfo}
+
+Return JSON: { "match": { "tokenName": "name", "cssVar": "--var", "value": "resolved" }, "reason": "why" }
+Or if no close match: { "match": null, "reason": "explanation" }` }
+    ]);
+    const jsonStr = response.match(/\{[\s\S]*\}/)?.[0];
+    const json = jsonStr ? JSON.parse(jsonStr) : null;
+    if (json?.match) {
+      const tokenInfo = findToken(registry, json.match.tokenName);
+      if (tokenInfo) {
+        promotedStatics.set(sv.property, {
+          entry: tokenInfo.scale.entries[tokenInfo.index],
+          scale: tokenInfo.scale
+        });
+      }
+      applyOverride({
+        tokenName: json.match.tokenName,
+        cssVar: json.match.cssVar,
+        originalValue: sv.value,
+        newValue: json.match.value,
+        scope: currentScope
+      });
+      ctx.services.notify.toast(`Matched: ${json.match.tokenName}`);
+      refresh();
+    } else {
+      ctx.services.notify.toast(json?.reason ?? "No close token match found");
+    }
+  } catch {
+    ctx.services.notify.toast("Token matching failed");
+  } finally {
+    btn.classList.remove("sk-row__unlink--loading");
+  }
+}
+function buildSystemPrompt() {
+  const overrides = getOverrides();
+  const overrideState = overrides.length > 0 ? `Current overrides:
+${overrides.map((o) => `  ${o.tokenName}: ${o.originalValue} \u2192 ${o.newValue}`).join("\n")}` : "No overrides active.";
+  const scopeDesc = currentScope.type === "global" ? "Changes apply globally." : `Changes scoped to: ${currentScope.label}`;
+  const elementTokens = detectedTokensCache.length > 0 ? `Currently selected element uses these tokens:
+${detectedTokensCache.map((dt) => {
+    const override = getOverrideForToken(dt.current.name, currentScope);
+    const active = override ? dt.scale.entries.find((e) => cssValuesMatch(e.value, override.newValue)) ?? dt.current : dt.current;
+    return `  ${dt.label} (${dt.property}): ${active.label} = ${active.value} [scale: ${dt.scale.entries.map((e) => e.label).join(", ")}]`;
+  }).join("\n")}` : "No element selected.";
+  return `You are a design token advisor for a Fluent UI application.
+The user is inspecting an element and wants to change its design tokens via dropdowns in the Style Kit panel.
+Return token overrides that swap the current token to a different entry in the SAME scale.
+
+${elementTokens}
+
+Available token scales:
+${serializeForPrompt(registry)}
+
+${overrideState}
+
+${scopeDesc}
+
+IMPORTANT: Respond with ONLY valid JSON in this exact format:
+{ "overrides": [ { "token": "currentTokenName", "value": "newCSSValue" } ] }
+
+Rules:
+- "token" must be the token name currently in use on the element (from the list above).
+- "value" must be the exact CSS value of the target entry from the same scale.
+- For example, if the element uses fontSizeBase300=14px and the user says "make font-size 800", respond with: { "overrides": [{ "token": "fontSizeBase300", "value": "28px" }] } (using fontSizeBase800's value).
+- Do not include explanations, markdown, or anything outside the JSON object.
+- Token names must match exactly from the detected element tokens above.
+- Values must be valid CSS values from the scales (use the exact scale values).`;
+}
+function parseOverrideResponse(response) {
+  try {
+    const jsonMatch = response.match(/\{[\s\S]*"overrides"[\s\S]*\}/);
+    if (!jsonMatch) return [];
+    const parsed = JSON.parse(jsonMatch[0]);
+    if (!Array.isArray(parsed.overrides)) return [];
+    return parsed.overrides.filter(
+      (o) => typeof o.token === "string" && typeof o.value === "string"
+    );
+  } catch {
+    return [];
+  }
+}
+function getScopePlaceholder() {
+  if (currentScope.type === "global") {
+    return 'Try "make it more compact" or "darker background"';
+  }
+  return `Adjust ${truncatePath(currentScope.label)}...`;
+}
+async function buildOverrideContext() {
+  const overrides = getOverrides();
+  if (overrides.length === 0) {
+    ctx?.services.notify.toast("No overrides to apply");
+    return null;
+  }
+  const { overrides: serialized, css, themePartial } = serializeOverrides();
+  const depPattern = /___[a-z0-9]+_\d+|\.fui-/;
+  const isDep = (o) => o.scope !== "Global" && depPattern.test(o.scope);
+  const store2 = getStore();
+  const variationName = store2.active ? store2.variations.find((v) => v.id === store2.active)?.name ?? "Unnamed" : "Unsaved";
+  let screenshotUrl = "";
+  try {
+    screenshotUrl = await ctx.services.screenshot.capture();
+  } catch {
+  }
+  const sections = [];
+  sections.push(`## Style Override \u2014 "${variationName}"`);
+  sections.push("");
+  if (screenshotUrl) {
+    sections.push(`### Visual Reference`);
+    sections.push(`![screenshot](${screenshotUrl})`);
+    sections.push("");
+  }
+  sections.push("### Overrides");
+  sections.push("");
+  sections.push("| Token | Original | Target | Swap To | Scope | Location |");
+  sections.push("|-------|----------|--------|---------|-------|----------|");
+  for (const o of serialized) {
+    const loc = isDep(o) ? "\u26A0\uFE0F dependency" : "local";
+    sections.push(`| \`${o.token}\` | \`${o.from}\` | \`${o.to}\` | ${o.swapTo ? `\`${o.swapTo}\`` : "\u2014"} | ${o.scope} | ${loc} |`);
+  }
+  sections.push("");
+  const locals = serialized.filter((o) => !isDep(o));
+  if (locals.length > 0) {
+    const localSwaps = locals.filter((o) => o.swapTo);
+    const localRaw = locals.filter((o) => !o.swapTo);
+    sections.push("### Local changes (in project source)");
+    sections.push("");
+    if (localSwaps.length > 0) {
+      sections.push("**Token swaps** \u2014 replace the token reference in `makeStyles()`:");
+      sections.push("");
+      for (const s of localSwaps) {
+        sections.push(`- \`tokens.${s.token}\` \u2192 \`tokens.${s.swapTo}\``);
+      }
+      sections.push("");
+      sections.push("```bash");
+      sections.push("# Deterministic apply:");
+      const payload = JSON.stringify(localSwaps.map((s) => ({ from: s.token, to: s.swapTo })));
+      sections.push("echo '" + payload + "' | node .dc-plugins/style-kit/scripts/apply-token-swaps.cjs --apply");
+      sections.push("```");
+      sections.push("");
+    }
+    if (localRaw.length > 0) {
+      sections.push("**Value overrides** \u2014 update the token value in a theme partial or `makeStyles()`:");
+      sections.push("");
+      sections.push("```typescript");
+      sections.push(themePartial);
+      sections.push("```");
+      sections.push("");
+    }
+  }
+  const deps = serialized.filter(isDep);
+  if (deps.length > 0) {
+    sections.push("### Dependency component overrides");
+    sections.push("");
+    sections.push("These tokens are styled **inside a library component** (detected from Fluent UI / Griffel generated classnames in the scope selector). The `makeStyles()` call is in the dependency package, not project source.");
+    sections.push("");
+    for (const o of deps) {
+      sections.push(`#### \`${o.token}\`: \`${o.from}\` \u2192 \`${o.to}\`${o.swapTo ? ` (swap to \`${o.swapTo}\`)` : ""}`);
+      sections.push("");
+      sections.push(`**Scope selector:** \`${o.scope}\``);
+      sections.push("");
+      sections.push("**Resolution options (pick one):**");
+      sections.push("");
+      sections.push(`1. **CSS custom property override** \u2014 redefine \`--${o.token}\` on a wrapper \`<div>\` around the dependency component using \`makeStyles()\`. The dependency reads \`var(--${o.token})\` internally, so a closer ancestor wins via CSS inheritance.`);
+      sections.push("   ```tsx");
+      sections.push("   const useStyles = makeStyles({");
+      if (o.swapTo) {
+        sections.push(`     root: { '--${o.token}': tokens.${o.swapTo} },`);
+      } else {
+        sections.push(`     root: { '--${o.token}': '${o.to}' },`);
+      }
+      sections.push("   });");
+      sections.push("   // wrap: <div className={styles.root}><DependencyComponent ... /></div>");
+      sections.push("   ```");
+      sections.push("");
+      sections.push(`2. **Scoped FluentProvider** \u2014 wrap the component in a \`<FluentProvider>\` with a partial theme that redefines \`${o.token}\`. Lighter touch but affects ALL children using that token.`);
+      sections.push("   ```tsx");
+      sections.push(`   <FluentProvider theme={{ ...webLightTheme, ${o.token}: '${o.to}' }}>`);
+      sections.push("     <DependencyComponent ... />");
+      sections.push("   </FluentProvider>");
+      sections.push("   ```");
+      sections.push("");
+      sections.push("3. **Fix upstream** \u2014 open a PR on the component package to expose a prop or change the token.");
+      sections.push("");
+    }
+  }
+  if (css.trim()) {
+    sections.push("<details><summary>Raw CSS overrides (reference only)</summary>");
+    sections.push("");
+    sections.push("```css");
+    sections.push(css);
+    sections.push("```");
+    sections.push("</details>");
+    sections.push("");
+  }
+  sections.push(`<!-- dc:style-kit:overrides:${btoa(JSON.stringify(serialized))} -->`);
+  const body = sections.join("\n");
+  const labels = ["design-canvas", "style-kit"];
+  if (deps.length > 0) labels.push("dependency-override");
+  if (serialized.some((o) => o.swapTo)) labels.push("token-swap");
+  const title = deps.length > 0 ? `style: ${serialized.length} override${serialized.length > 1 ? "s" : ""} (${deps.length} in dependency) \u2014 ${variationName}` : `style: ${serialized.length} token override${serialized.length > 1 ? "s" : ""} \u2014 ${variationName}`;
+  return { title, body, labels };
+}
+async function copyFixPrompt() {
+  const context = await buildOverrideContext();
+  if (!context) return;
+  const prompt = `Apply the following style overrides to the codebase.
+
+${context.body}`;
+  await ctx?.services.clipboard.copy(prompt);
+  ctx?.services.notify.toast("Fix prompt copied \u2014 paste it into Copilot Chat or your preferred LLM to apply.", "info");
+}
+async function applyToCode() {
+  const context = await buildOverrideContext();
+  if (!context) return;
+  if (!ctx?.services.github.available) {
+    ctx?.services.notify.toast("GitHub not configured \u2014 enable it in Design Canvas settings", "warning");
+    return;
+  }
+  try {
+    ctx.services.notify.toast("Creating issue...");
+    const result = await ctx.services.github.createIssue({
+      title: context.title,
+      body: context.body,
+      labels: context.labels
+    });
+    try {
+      await ctx.services.github.assignCopilot(result.number);
+    } catch {
+    }
+    showIssueLinkToast(result.number, result.url);
+  } catch {
+    ctx.services.notify.toast("Failed to create issue");
+  }
+}
+function showIssueLinkToast(issueNumber, url) {
+  if (!panelRoot) return;
+  panelRoot.querySelector(".sk-issue-banner")?.remove();
+  const banner = el("div", "sk-issue-banner");
+  banner.style.cssText = 'display:flex;flex-direction:column;gap:8px;padding:10px 12px;margin:0 12px 8px;background:var(--colorStatusSuccessBackground1,#dff6dd);border:1px solid var(--colorStatusSuccessBorder1,#9fd89f);border-radius:6px;font-family:var(--fontFamilyBase,"Segoe UI",sans-serif);font-size:13px;color:var(--colorNeutralForeground1,#242424);animation:sk-slide-up .2s ease-out';
+  const topRow = el("div", "");
+  topRow.style.cssText = "display:flex;align-items:center;gap:8px";
+  const ghIcon = el("span", "");
+  ghIcon.innerHTML = ICONS.github;
+  ghIcon.style.cssText = "display:inline-flex;width:16px;height:16px;flex-shrink:0";
+  topRow.appendChild(ghIcon);
+  const text = el("span", "");
+  text.style.cssText = "flex:1;font-weight:600";
+  text.textContent = `Issue #${issueNumber} created \xB7 Copilot assigned`;
+  topRow.appendChild(text);
+  const close = el("button", "");
+  close.innerHTML = ICONS.x;
+  close.style.cssText = "display:inline-flex;width:14px;height:14px;background:none;border:none;cursor:pointer;color:var(--colorNeutralForeground3,#707070);padding:0;flex-shrink:0";
+  close.addEventListener("click", () => banner.remove());
+  topRow.appendChild(close);
+  banner.appendChild(topRow);
+  const bottomRow = el("div", "");
+  bottomRow.style.cssText = "display:flex;align-items:center;gap:10px";
+  const link = el("a", "");
+  link.href = url;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.textContent = "View on GitHub \u2192";
+  link.style.cssText = "color:var(--colorBrandForegroundLink,#0078d4);text-decoration:none;font-weight:600;font-size:12px;white-space:nowrap";
+  link.addEventListener("mouseenter", () => {
+    link.style.textDecoration = "underline";
+  });
+  link.addEventListener("mouseleave", () => {
+    link.style.textDecoration = "none";
+  });
+  bottomRow.appendChild(link);
+  banner.appendChild(bottomRow);
+  const actions = panelRoot.querySelector(".sk-actions");
+  if (actions) {
+    actions.parentElement?.insertBefore(banner, actions);
+  } else {
+    panelRoot.appendChild(banner);
+  }
+}
+function rgbToHex(rgb) {
+  const match = rgb.match(/\d+/g);
+  if (!match || match.length < 3) return "#000000";
+  const [r, g, b] = match.map(Number);
+  return "#" + [r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("");
+}
+function refresh() {
+  if (!panelRoot) return;
+  const body = panelRoot.querySelector(".sk-body");
+  const scrollTop = body?.scrollTop ?? 0;
+  render(panelRoot);
+  const newBody = panelRoot.querySelector(".sk-body");
+  if (newBody) newBody.scrollTop = scrollTop;
+}
+function render(root) {
+  root.innerHTML = "";
+  panelRoot = root;
+  const styleTag = document.createElement("style");
+  styleTag.textContent = PANEL_STYLES;
+  root.appendChild(styleTag);
+  const container = el("div", `sk ${ctx?.isDark ? "sk--dark" : ""}`);
+  container.appendChild(renderPromptBar());
+  container.appendChild(renderScopeBar());
+  container.appendChild(renderVariationsBar());
+  const summary = renderOverrideSummary();
+  if (summary) container.appendChild(summary);
+  const body = el("div", "sk-body");
+  if (registry.length === 0) {
+    body.appendChild(renderEmptyState());
+  } else if (pickedElement && !showAllTokens) {
+    body.appendChild(renderGroupedProperties());
+    const browseToggle = el("button", "sk-browse-toggle");
+    browseToggle.textContent = "Browse all token scales \u203A";
+    browseToggle.addEventListener("click", () => {
+      showAllTokens = true;
+      refresh();
+    });
+    body.appendChild(browseToggle);
+  } else if (showAllTokens) {
+    if (pickedElement) {
+      const backLink = el("button", "sk-browse-toggle");
+      backLink.textContent = "\u2039 Back to detected tokens";
+      backLink.addEventListener("click", () => {
+        showAllTokens = false;
+        refresh();
+      });
+      body.appendChild(backLink);
+    }
+    const sorted = [...registry].sort((a, b) => {
+      const aOverrides = a.entries.some((e) => getOverrideForToken(e.name, currentScope));
+      const bOverrides = b.entries.some((e) => getOverrideForToken(e.name, currentScope));
+      if (aOverrides !== bOverrides) return aOverrides ? -1 : 1;
+      return CATEGORY_ORDER.indexOf(a.category) - CATEGORY_ORDER.indexOf(b.category);
+    });
+    for (const scale of sorted) {
+      body.appendChild(renderCategory(scale));
+    }
+  } else {
+    body.appendChild(renderEmptyState());
+    const browseToggle = el("button", "sk-browse-toggle");
+    browseToggle.textContent = "Browse all token scales \u203A";
+    browseToggle.addEventListener("click", () => {
+      showAllTokens = true;
+      refresh();
+    });
+    body.appendChild(browseToggle);
+  }
+  container.appendChild(body);
+  if (getOverrides().length > 0) {
+    container.appendChild(renderFooterActions());
+  }
+  root.appendChild(container);
+}
+function mountPanel(mountPoint, context) {
+  ctx = context;
+  registry = buildRegistry();
+  for (const scale of registry) {
+    collapsedCategories.add(scale.category);
+  }
+  render(mountPoint);
+  const unsubOverrides = onOverridesChanged(() => refresh());
+  const unsubVariations = onVariationsChanged(() => refresh());
+  return () => {
+    unsubOverrides();
+    unsubVariations();
+    panelRoot = null;
+    ctx = null;
+  };
+}
+
+// src/index.ts
+var cleanup = null;
+var plugin = {
+  meta: {
+    id: "style-kit",
+    name: "Style Kit",
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M7.5 2C5.01 2 3 4.01 3 6.5c0 1.47.7 2.77 1.79 3.6L10 17l5.21-6.9A4.48 4.48 0 0 0 17 6.5C17 4.01 14.99 2 12.5 2c-1.25 0-2.37.51-3.18 1.33L10 2.66l-.68-.33A4.47 4.47 0 0 0 7.5 2Zm-2 4.5a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm5.5 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm-2 3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" stroke="currentColor" stroke-width="1.2" fill="none"/></svg>',
+    description: "Token-aware design tuning \u2014 explore scales, override live, save variations, ship changes",
+    version: "1.0.0",
+    panel: {
+      defaultWidth: 340,
+      defaultHeight: 600,
+      minWidth: 300,
+      minHeight: 400
+    }
+  },
+  activate(ctx2) {
+    initVariations(ctx2);
+    cleanup = mountPanel(ctx2.mountPoint, {
+      mountPoint: ctx2.mountPoint,
+      isDark: ctx2.isDark,
+      emit: (type, payload) => ctx2.emit(type, payload),
+      services: ctx2.services,
+      backgroundColor: ctx2.isDark ? "#333333" : "#FFFFFF"
+      // Set background color based on theme
+    });
+    ctx2.services.commands?.register(
+      "style-kit.toggle",
+      "Ctrl+Shift+K",
+      () => ctx2.panel.isOpen ? ctx2.panel.close() : ctx2.panel.open()
+    );
+  },
+  deactivate() {
+    cleanup?.();
+    cleanup = null;
+    destroy();
+    destroyVariations();
+  },
+  getHandoffContext() {
+    return serializeOverrides();
+  }
+};
+var index_default = plugin;
+export {
+  index_default as default
+};