uivisor 0.1.5 → 0.1.7

package/dist/overlay/index.js

@@ -632,8 +632,12 @@ function nearestToken(ds, category, target) {
   const list = ds.byCategory[category];
   if (!list || !list.length) return null;
   if (target.value != null) {
-    const norm = (s) => s.replace(/\s+/g, "").toLowerCase();
-    const hit = list.find((t) => norm(t.value) === norm(target.value));
+    const norm = (s) => {
+      const t = s.trim();
+      return (rgbToHex(t) || t).replace(/\s+/g, "").toLowerCase();
+    };
+    const want = norm(target.value);
+    const hit = list.find((t) => norm(t.value) === want);
     if (hit) return { token: hit, exact: true };
   }
   if (target.px != null && list.some((t) => t.px != null)) {
@@ -1173,6 +1177,12 @@ var CSS = (
 .uiv-ctl select.uiv-tokensel:hover { border-color: #6366f1; color: #fff; }
 .uiv-ctl select.uiv-tokensel:focus { border-color: #818cf8; }
 .uiv-ctl select.uiv-tokensel.changed { border-color: #4ade80; color: #86efac; }
+.uiv-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
+.uiv-swatch { width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
+  border: 1px solid rgba(255,255,255,0.18); padding: 0; outline: none;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
+.uiv-swatch:hover { transform: scale(1.12); border-color: #fff; }
+.uiv-swatch.on { box-shadow: 0 0 0 2px #18181b, 0 0 0 3.5px #4ade80; border-color: #4ade80; }
 
 /* ---- current-styles readout ---- */
 .uiv-readout { display: flex; flex-direction: column; gap: 3px; }
@@ -1181,6 +1191,17 @@ var CSS = (
 .uiv-rk { color: #71717a; }
 .uiv-rv { color: #fff; word-break: break-all; display: flex; align-items: center; gap: 6px; }
 .uiv-rv.changed { color: #4ade80; } /* edited in uivisor \u2192 green */
+
+/* control-row state: file (authored) \xB7 edited (this breakpoint) \xB7 auto (computed) */
+.uiv-ctl.st-file > .clabel { color: #e4e4e7; }
+.uiv-ctl.st-edited > .clabel { color: #4ade80; }
+.uiv-ctl.st-auto > .clabel { color: #6b7280; }
+.uiv-leg { display: flex; gap: 12px; padding: 8px 12px 2px; font-size: 9px;
+  text-transform: uppercase; letter-spacing: .4px; }
+.uiv-lg { color: #e4e4e7; display: flex; align-items: center; gap: 4px; } /* file = white */
+.uiv-lg::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
+.uiv-lg.edit { color: #4ade80; }
+.uiv-lg.auto { color: #6b7280; }
 .uiv-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
   border: 1px solid rgba(255,255,255,0.2); flex: 0 0 auto; }
 
@@ -1282,6 +1303,15 @@ var CSS = (
 // src/overlay/index.ts
 var counter = 0;
 var round2 = (n) => Math.round(n * 100) / 100;
+var INHERITED_PROPS = /* @__PURE__ */ new Set([
+  "font-size",
+  "font-weight",
+  "line-height",
+  "letter-spacing",
+  "color",
+  "text-align",
+  "font-family"
+]);
 var Uivisor = class {
   constructor() {
     this.enabled = false;
@@ -1293,9 +1323,11 @@ var Uivisor = class {
     /** Undo / redo stacks of full edit-state snapshots. */
     this.undoStack = [];
     this.redoStack = [];
-    /** Cached live computed-style for the selected element (invalidated on reselect). */
+    /** Cached live computed-style for the selected element (invalidated each render). */
     this._cs = null;
     this._csEl = null;
+    /** Per-render memo of authored longhands per element (for the styles readout). */
+    this._matched = null;
     /** Cached project breakpoint system (detected from CSS), refreshed until found. */
     this._bp = null;
     /** Cached project design system (detected from CSS variables), refreshed until found. */
@@ -1360,7 +1392,10 @@ var Uivisor = class {
       const winBp = currentBreakpoint(this.bpSystem()).name;
       if (winBp !== this.lastWinBp) {
         this.lastWinBp = winBp;
-        if (this.enabled && this.selected) this.renderBody();
+        if (this.enabled && this.selected) {
+          this.reapplyScope();
+          this.renderBody();
+        }
       }
     };
     this.reposition = () => {
@@ -1626,6 +1661,7 @@ var Uivisor = class {
       const up = () => {
         handle.removeEventListener("pointermove", move);
         handle.removeEventListener("pointerup", up);
+        this.reapplyScope();
         this.renderBody();
       };
       handle.addEventListener("pointermove", move);
@@ -1661,6 +1697,7 @@ var Uivisor = class {
         dimUnit: {}
       });
     }
+    if (el) this.reapplyScope();
     this.reposition();
     this.renderBody();
   }
@@ -1687,7 +1724,15 @@ var Uivisor = class {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return "";
-    return el.style.getPropertyValue(css) || this.computedVal(css) || st.original[css] || "";
+    const scope = this.activeScope();
+    const ch = st.record.changes.find((c) => c.property === css && c.breakpoint === scope.name);
+    if (ch) {
+      const v = ch.live ?? ch.after.computed;
+      return v.includes("var(") ? this.computedVal(css) || v : v;
+    }
+    const inline = el.style.getPropertyValue(css);
+    if (inline && !inline.includes("var(")) return inline;
+    return this.computedVal(css) || st.original[css] || "";
   }
   liveNum(css) {
     const v = this.liveVal(css).trim();
@@ -1707,7 +1752,10 @@ var Uivisor = class {
   isChanged(cssList) {
     const st = this.st();
     if (!st) return false;
-    return cssList.some((c) => st.record.changes.some((ch) => ch.property === c));
+    const scope = this.activeScope();
+    return cssList.some(
+      (c) => st.record.changes.some((ch) => ch.property === c && ch.breakpoint === scope.name)
+    );
   }
   selectCurrent(css) {
     let v = this.liveVal(css).trim();
@@ -1752,16 +1800,27 @@ var Uivisor = class {
   }
   /** Re-apply recorded overrides after the target (all ↔ one) changes. */
   reapplyForTarget() {
-    const el = this.selected;
-    const st = this.st();
-    if (!el || !st) return;
-    const sibs = this.siblingsOf(el);
-    const targets = this.targetEls();
-    const props = new Set(st.record.changes.map((c) => c.property));
-    for (const css of props) {
-      for (const e of sibs) removeOverride(e, css);
-      const c = st.record.changes.find((ch) => ch.property === css);
-      if (c) for (const e of targets) applyOverride(e, css, c.after.computed);
+    this.reapplyScope();
+  }
+  /**
+   * Project the live preview for the ACTIVE breakpoint: strip every override we
+   * applied, then re-apply ONLY the changes recorded for the current scope. This
+   * is what makes per-breakpoint edits behave — set padding 20 at xl, 10 at md,
+   * and each breakpoint shows (and previews) its own value instead of one global
+   * inline override leaking across all of them.
+   */
+  reapplyScope() {
+    const scope = this.activeScope();
+    for (const [el, st] of this.states) {
+      const sibs = this.siblingsOf(el);
+      const targets = st.record.target === "all" ? sibs : [el];
+      for (const css of st.applied) for (const e of sibs) removeOverride(e, css);
+      st.applied = /* @__PURE__ */ new Set();
+      for (const c of st.record.changes) {
+        if (c.breakpoint !== scope.name) continue;
+        for (const e of targets) applyOverride(e, c.property, c.live ?? c.after.computed);
+        st.applied.add(c.property);
+      }
     }
     this.reposition();
   }
@@ -1786,20 +1845,22 @@ var Uivisor = class {
     }
     this.renderBody();
   }
-  /** Apply a design-system token to a property: set its resolved value live and
-   *  annotate the recorded change so the prompt asks the agent for the token. */
+  /** Apply a design-system token to a property. The LIVE override is `var(--token)`
+   *  so a responsive token keeps adapting as you move across breakpoints; the
+   *  recorded value shows the token's value, tagged so the prompt asks for the token. */
   applyToken(css, token) {
     this.pushHistory();
-    this.liveSet([css], token.value);
-    this.recordProps([css]);
+    const live = `var(${token.cssVar})`;
+    this.liveSet([css], live);
     const st = this.st();
     if (!st) return;
     const scope = this.activeScope();
-    const ch = st.record.changes.find((c) => c.property === css && c.breakpoint === scope.name);
-    if (ch) {
-      ch.after.designToken = token.cssVar;
-      ch.after.token = st.record.styling.primaryMechanism === "tailwind" ? this.dsUtility(css, token) : null;
-    }
+    st.applied.add(css);
+    const change = buildChange(css, st.original[css], token.value, scope);
+    change.live = live;
+    change.after.designToken = token.cssVar;
+    change.after.token = st.record.styling.primaryMechanism === "tailwind" ? this.dsUtility(css, token) : null;
+    this.setChange(st.record, change);
     this.renderBody();
   }
   revertProps(cssList) {
@@ -1863,6 +1924,9 @@ var Uivisor = class {
   }
   // ---- rendering ----
   renderBody() {
+    this._cs = null;
+    this._csEl = null;
+    this._matched = null;
     const body = this.q(".uiv-body");
     if (!this.selected) {
       body.innerHTML = `
@@ -1899,7 +1963,79 @@ var Uivisor = class {
     const cats = Object.keys(ds.byCategory).map((c) => `${ds.byCategory[c].length} ${c}`).join(" \xB7 ");
     return `<div class="uiv-dsbar" title="${escapeAttr(cats)}">\u25C6 Design system \xB7 ${ds.tokens.length} tokens detected</div>`;
   }
-  /** Read-only readout of the element's actual current styles — so you don't guess. */
+  /** Longhand properties an authoring rule (or non-uivisor inline) sets on `el`.
+   *  Reimplements getMatchedCSSRules over same-origin sheets (incl. matching
+   *  @media), so we can tell "set in the project's CSS" from "browser default". */
+  matchedProps(el) {
+    const cache = this._matched ||= /* @__PURE__ */ new Map();
+    const cached = cache.get(el);
+    if (cached) return cached;
+    const out = /* @__PURE__ */ new Set();
+    const he = el;
+    const applied = el === this.selected ? this.st()?.applied ?? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+    if (he.style) for (let i = 0; i < he.style.length; i++) {
+      const p = he.style[i];
+      if (!applied.has(p)) out.add(p);
+    }
+    const win = el.ownerDocument.defaultView || window;
+    const walk = (rules) => {
+      for (let i = 0; i < rules.length; i++) {
+        const r = rules[i];
+        if (r.selectorText && r.style) {
+          let m = false;
+          try {
+            m = el.matches(r.selectorText);
+          } catch {
+            m = false;
+          }
+          if (m) for (let j = 0; j < r.style.length; j++) out.add(r.style[j]);
+        } else if (r.media && r.cssRules) {
+          let ok = true;
+          try {
+            ok = win.matchMedia(r.media.mediaText).matches;
+          } catch {
+            ok = true;
+          }
+          if (ok) walk(r.cssRules);
+        } else if (r.cssRules) {
+          walk(r.cssRules);
+        }
+      }
+    };
+    const sheets = el.ownerDocument.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        walk(sheets[i].cssRules);
+      } catch {
+      }
+    }
+    cache.set(el, out);
+    return out;
+  }
+  /** State class for an editable control's row: edited (green, at this breakpoint)
+   *  · file (white, authored in CSS) · auto (grey, browser-computed/default). */
+  controlStateClass(props) {
+    if (this.isChanged(props)) return " st-edited";
+    const inherit = props.some((p) => INHERITED_PROPS.has(p));
+    return this.isAuthored(props, inherit) ? " st-file" : " st-auto";
+  }
+  /** Is any of `props` authored in the project CSS? For inherited properties we
+   *  also walk ancestors (a body/parent font rule still counts as "from the file"). */
+  isAuthored(props, inherit) {
+    let node = this.selected;
+    while (node) {
+      const set = this.matchedProps(node);
+      if (props.some((p) => set.has(p))) return true;
+      node = inherit ? node.parentElement : null;
+    }
+    return false;
+  }
+  /**
+   * Read-only readout of the element's ACTUAL current styles, three-state coloured:
+   *   white = authored in the project CSS · green = edited in uivisor ·
+   *   grey  = browser-computed/auto (e.g. a width a flex item derived, a default).
+   * Comprehensive + context-aware (flex/grid/position rows only when relevant).
+   */
   currentStylesHtml() {
     const el = this.selected;
     if (!el) return "";
@@ -1915,47 +2051,70 @@ var Uivisor = class {
       const h = hex(v);
       return /^#|rgb/.test(h) ? `<span class="uiv-sw" style="background:${h}"></span>${h}` : h;
     };
-    const box = (prefix) => {
-      const t = g(`${prefix}-top`);
-      const r = g(`${prefix}-right`);
-      const b = g(`${prefix}-bottom`);
-      const l = g(`${prefix}-left`);
+    const sides = (parts) => {
+      const [t, r, b, l] = parts.map(g);
       if (t === r && r === b && b === l) return t;
       if (t === b && r === l) return `${t} ${r}`;
       return `${t} ${r} ${b} ${l}`;
     };
-    const changedSet = new Set(this.st()?.record.changes.map((c) => c.property) ?? []);
-    const changed = (props) => props.some((p) => changedSet.has(p));
-    const px4 = (pre) => [`${pre}-top`, `${pre}-right`, `${pre}-bottom`, `${pre}-left`];
+    const px4 = (pre, suf = "") => [`${pre}-top${suf}`, `${pre}-right${suf}`, `${pre}-bottom${suf}`, `${pre}-left${suf}`];
+    const clip = (s, n = 30) => s.length > n ? s.slice(0, n - 1) + "\u2026" : s;
     const rows = [];
-    const add = (k, v, props = []) => {
-      if (v) rows.push({ k, v, edited: changed(props) });
+    const add = (k, v, _props = [], _inherit = false) => {
+      if (v !== "" && v != null) rows.push({ k, v });
     };
-    add("display", g("display"));
-    add("size", `${Math.round(parseFloat(g("width")) || 0)} \xD7 ${Math.round(parseFloat(g("height")) || 0)}`);
-    const pad = box("padding");
-    if (pad && pad !== "0px") add("padding", pad, px4("padding"));
-    const mar = box("margin");
-    if (mar && mar !== "0px") add("margin", mar, px4("margin"));
-    if (/flex|grid/.test(g("display"))) {
+    const disp = g("display");
+    add("display", disp, ["display"]);
+    const pos = g("position");
+    if (pos && pos !== "static") {
+      add("position", pos, ["position"]);
+      const inset = ["top", "right", "bottom", "left"].filter((s) => g(s) !== "auto").map((s) => `${s[0]} ${g(s)}`).join("  ");
+      if (inset) add("inset", inset, ["top", "right", "bottom", "left"]);
+    }
+    add("width", `${Math.round(parseFloat(g("width")) || 0)}px`, ["width"]);
+    add("height", `${Math.round(parseFloat(g("height")) || 0)}px`, ["height"]);
+    const maxw = g("max-width");
+    if (maxw && maxw !== "none") add("max-w", maxw, ["max-width"]);
+    const minh = g("min-height");
+    if (minh && minh !== "0px" && minh !== "auto") add("min-h", minh, ["min-height"]);
+    if (/flex|grid/.test(disp)) {
+      if (disp.includes("flex")) add("direction", g("flex-direction"), ["flex-direction"]);
+      add("justify", g("justify-content"), ["justify-content"]);
+      add("align", g("align-items"), ["align-items"]);
+      if (disp.includes("flex")) {
+        const w = g("flex-wrap");
+        if (w && w !== "nowrap") add("wrap", w, ["flex-wrap"]);
+      }
+      if (disp.includes("grid")) {
+        const c = g("grid-template-columns");
+        if (c && c !== "none") add("grid-cols", clip(c), ["grid-template-columns"]);
+      }
       const gap = g("gap");
-      if (gap && gap !== "normal" && gap !== "0px") add("gap", gap, ["gap"]);
+      if (gap && gap !== "normal") add("gap", gap, ["gap", "row-gap", "column-gap"]);
     }
-    add("font", `${g("font-size")} \xB7 ${g("font-weight")} \xB7 lh ${g("line-height")}`, [
-      "font-size",
-      "font-weight",
-      "line-height"
-    ]);
-    const ls = g("letter-spacing");
-    if (ls && ls !== "normal") add("tracking", ls, ["letter-spacing"]);
-    add("color", swatch(g("color")), ["color"]);
-    const bg = g("background-color");
-    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent")
-      add("background", swatch(bg), ["background-color"]);
+    let parentDisp = "";
+    try {
+      if (el.parentElement) parentDisp = getComputedStyle(el.parentElement).display;
+    } catch {
+    }
+    if (/flex|grid/.test(parentDisp)) {
+      add("flex", `${g("flex-grow")} ${g("flex-shrink")} ${g("flex-basis")}`, ["flex-grow", "flex-shrink", "flex-basis"]);
+      const as = g("align-self");
+      if (as && as !== "auto" && as !== "normal") add("self", as, ["align-self"]);
+    }
+    const pad = sides(px4("padding"));
+    if (pad && pad !== "0px") add("padding", pad, px4("padding"));
+    const mar = sides(px4("margin"));
+    if (mar && mar !== "0px") add("margin", mar, px4("margin"));
     const bw = g("border-top-width");
     if (bw && parseFloat(bw) > 0)
-      add("border", `${bw} ${g("border-top-style")} ${hex(g("border-top-color"))}`, px4("border").map((p) => `${p}-width`));
-    const br = g("border-radius");
+      add("border", `${bw} ${g("border-top-style")} ${swatch(g("border-top-color"))}`, px4("border", "-width"));
+    const br = sides([
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius"
+    ]);
     if (br && br !== "0px")
       add("radius", br, [
         "border-radius",
@@ -1964,11 +2123,32 @@ var Uivisor = class {
         "border-bottom-right-radius",
         "border-bottom-left-radius"
       ]);
-    if (g("box-shadow") !== "none" && g("box-shadow")) add("shadow", "yes");
+    if (this.context(el).hasText) {
+      add("font-size", g("font-size"), ["font-size"], true);
+      add("weight", g("font-weight"), ["font-weight"], true);
+      add("line", g("line-height"), ["line-height"], true);
+      const ls = g("letter-spacing");
+      if (ls && ls !== "normal") add("tracking", ls, ["letter-spacing"], true);
+      add("color", swatch(g("color")), ["color"], true);
+      const ta = g("text-align");
+      if (ta && ta !== "start" && ta !== "left") add("text-align", ta, ["text-align"], true);
+    }
+    const bg = g("background-color");
+    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") add("background", swatch(bg), ["background-color"]);
+    const bgi = g("background-image");
+    if (bgi && bgi !== "none") add("bg-image", clip(bgi, 26), ["background-image"]);
+    const sh = g("box-shadow");
+    if (sh && sh !== "none") add("shadow", clip(sh, 26), ["box-shadow"]);
     const op = g("opacity");
-    if (op && parseFloat(op) < 1) add("opacity", op);
+    if (op && parseFloat(op) < 1) add("opacity", op, ["opacity"]);
+    const ov = g("overflow");
+    if (ov && ov !== "visible") add("overflow", ov, ["overflow", "overflow-x", "overflow-y"]);
+    const z = g("z-index");
+    if (z && z !== "auto") add("z-index", z, ["z-index"]);
+    const tr = g("transform");
+    if (tr && tr !== "none") add("transform", clip(tr, 22), ["transform"]);
     const collapsed = this.collapsedSecs.has("Current styles");
-    const items = collapsed ? "" : rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv${r.edited ? " changed" : ""}">${r.v}</span></div>`).join("");
+    const items = collapsed ? "" : rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv">${r.v}</span></div>`).join("");
     return `<div class="uiv-sec">${this.accordionTitle("Current styles")}<div class="uiv-readout">${items}</div></div>`;
   }
   /** Breakpoint scope switcher: shows the PROJECT's breakpoints + the live window one. */
@@ -2022,12 +2202,14 @@ var Uivisor = class {
     return true;
   }
   controlsHtml(ctx) {
-    return SECTIONS.map((sec) => {
+    const legend = `<div class="uiv-leg"><span class="uiv-lg">file</span><span class="uiv-lg edit">edited</span><span class="uiv-lg auto">auto</span></div>`;
+    const secs = SECTIONS.map((sec) => {
       const controls = sec.controls.filter((c) => this.relevant(c, ctx));
       if (!controls.length) return "";
       const rows = this.collapsedSecs.has(sec.title) ? "" : controls.map((c) => this.controlRow(c)).join("");
       return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${rows}</div>`;
     }).join("");
+    return legend + secs;
   }
   /** A collapsible section header. Clicking it hides/shows the section's controls. */
   accordionTitle(title) {
@@ -2102,7 +2284,7 @@ var Uivisor = class {
     const d = this.dimDisplay(c);
     const changed = this.isChanged([c.css]);
     const units = c.units.map((u) => `<option value="${u}"${u === d.unit ? " selected" : ""}>${UNIT_LABELS[u] ?? u}</option>`).join("");
-    return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><div class="uiv-num uiv-dim${changed ? " changed" : ""}" data-css="${c.css}"><span class="uiv-scrub" title="Drag to change">${c.icon}</span><input type="number" step="any" value="${escapeAttr(d.num)}" placeholder="${escapeAttr(d.placeholder)}"><select class="uiv-unit" title="Unit">${units}</select></div></div><span></span></div>`;
+    return `<div class="uiv-ctl${this.controlStateClass([c.css])}"><span class="clabel">${c.label}</span><div class="cfield"><div class="uiv-num uiv-dim${changed ? " changed" : ""}" data-css="${c.css}"><span class="uiv-scrub" title="Drag to change">${c.icon}</span><input type="number" step="any" value="${escapeAttr(d.num)}" placeholder="${escapeAttr(d.placeholder)}"><select class="uiv-unit" title="Unit">${units}</select></div></div><span></span></div>`;
   }
   /** A design-token picker row for a property, shown only when the project exposes
    *  tokens for that category. Picking a token applies its value + tags the prompt. */
@@ -2117,6 +2299,13 @@ var Uivisor = class {
     const edited = this.st()?.record.changes.some(
       (c) => c.property === css && c.after.designToken
     );
+    if (cat === "color") {
+      const swatches = list.map((t) => {
+        const on = near?.exact && near.token.cssVar === t.cssVar;
+        return `<button class="uiv-swatch${on ? " on" : ""}" data-css="${css}" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(`${t.name} \xB7 ${t.value}`)}" style="background:${escapeAttr(t.value)}"></button>`;
+      }).join("");
+      return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${label}</span><div class="cfield uiv-swatches">${swatches}</div><span></span></div>`;
+    }
     const head = `<option value="">${near && !near.exact ? `\u2248 ${escapeHtml(near.token.name)} \xB7 pick token` : "\u2014 pick token \u2014"}</option>`;
     const opts = list.map(
       (t) => `<option value="${escapeAttr(t.cssVar)}"${near?.exact && near.token.cssVar === t.cssVar ? " selected" : ""}>${escapeHtml(`${t.name} \xB7 ${t.value}`)}</option>`
@@ -2129,7 +2318,7 @@ var Uivisor = class {
       const info = this.numInfo(cssList);
       const changed = this.isChanged(cssList);
       const open = this.expanded.has(c.key);
-      let html = `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield">${this.numField(cssList.join(","), info.mixed ? "" : info.value, c.icon, changed, false, info.mixed ? "Mixed" : "\u2014")}</div><button class="uiv-expand${open ? " on" : ""}" data-key="${c.key}" title="Edit each side individually">${open ? ICONS.collapse : ICONS.expand}</button></div>`;
+      let html = `<div class="uiv-ctl${this.controlStateClass(cssList)}"><span class="clabel">${c.label}</span><div class="cfield">${this.numField(cssList.join(","), info.mixed ? "" : info.value, c.icon, changed, false, info.mixed ? "Mixed" : "\u2014")}</div><button class="uiv-expand${open ? " on" : ""}" data-key="${c.key}" title="Edit each side individually">${open ? ICONS.collapse : ICONS.expand}</button></div>`;
       if (open) {
         html += `<div class="uiv-sides">` + c.sides.map((s) => {
           const v = this.liveNum(s.css);
@@ -2147,7 +2336,7 @@ var Uivisor = class {
     }
     if (c.kind === "len") {
       const v = this.liveNum(c.css);
-      return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield">${this.numField(c.css, v == null ? "" : String(round2(v)), c.icon, this.isChanged([c.css]), false, "\u2014")}</div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
+      return `<div class="uiv-ctl${this.controlStateClass([c.css])}"><span class="clabel">${c.label}</span><div class="cfield">${this.numField(c.css, v == null ? "" : String(round2(v)), c.icon, this.isChanged([c.css]), false, "\u2014")}</div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
     }
     if (c.kind === "dim") {
       return this.dimField(c);
@@ -2156,10 +2345,10 @@ var Uivisor = class {
       const cur = this.selectCurrent(c.css);
       const optList = cur && !c.options.includes(cur) ? [cur, ...c.options] : c.options;
       const opts = optList.map((o) => `<option value="${o}"${o === cur ? " selected" : ""}>${o}</option>`).join("");
-      return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><select class="uiv-sel${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}">${opts}</select></div><span></span></div>`;
+      return `<div class="uiv-ctl${this.controlStateClass([c.css])}"><span class="clabel">${c.label}</span><div class="cfield"><select class="uiv-sel${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}">${opts}</select></div><span></span></div>`;
     }
     const val = toHexInput(this.liveVal(c.css));
-    return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><input type="color" class="uiv-color${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}" value="${val}"></div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
+    return `<div class="uiv-ctl${this.controlStateClass([c.css])}"><span class="clabel">${c.label}</span><div class="cfield"><input type="color" class="uiv-color${this.isChanged([c.css]) ? " changed" : ""}" data-css="${c.css}" value="${val}"></div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
   }
   bindControls() {
     const root = this.root;
@@ -2218,6 +2407,15 @@ var Uivisor = class {
         if (token) this.applyToken(css, token);
       });
     });
+    root.querySelectorAll(".uiv-swatch").forEach((node) => {
+      const btn = node;
+      const css = btn.getAttribute("data-css");
+      const cssVar = btn.getAttribute("data-var");
+      btn.addEventListener("click", () => {
+        const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
+        if (token) this.applyToken(css, token);
+      });
+    });
     root.querySelectorAll(".uiv-expand").forEach((node) => {
       const btn = node;
       const key = btn.getAttribute("data-key");
@@ -2251,6 +2449,7 @@ var Uivisor = class {
           this.toggleResponsive(true);
         } else {
           this.setFrameWidth(w);
+          this.reapplyScope();
           this.renderBody();
         }
       });
@@ -2364,7 +2563,8 @@ var Uivisor = class {
     const loc = id.source.confidence !== "none" ? `${id.source.file}:${id.source.line}` : id.componentName || "";
     const chgs = collapseChanges(r.changes).map((c) => {
       const bp = c.breakpoint === "base" ? "" : `<span class="bp">${c.breakpoint}:</span> `;
-      const tok = c.after.token ? ` <span class="tok">${escapeHtml(c.after.token)}</span>` : "";
+      const tokLabel = c.after.token || (c.after.designToken ? `var(${c.after.designToken})` : "");
+      const tok = tokLabel ? ` <span class="tok">${escapeHtml(tokLabel)}</span>` : "";
       return `<div class="uiv-jchg">${bp}${c.property}: ${c.before.computed} \u2192 ${c.after.computed}${tok}</div>`;
     }).join("");
     return `<div class="uiv-jitem"><div class="jhead"><span class="jel">&lt;${id.tagName}&gt;</span><span class="jloc">${escapeHtml(loc)}</span></div>${chgs}</div>`;
@@ -2447,13 +2647,9 @@ var Uivisor = class {
     for (const ent of snap.entries) {
       const st = { record: clone(ent.record), original: { ...ent.original }, applied: /* @__PURE__ */ new Set(), dimUnit: { ...ent.dimUnit } };
       this.states.set(ent.el, st);
-      const targets = st.record.target === "all" ? this.siblingsOf(ent.el) : [ent.el];
-      for (const c of st.record.changes) {
-        for (const e of targets) applyOverride(e, c.property, c.after.computed);
-        st.applied.add(c.property);
-      }
     }
     this.selected = snap.selected && this.states.has(snap.selected) ? snap.selected : null;
+    this.reapplyScope();
     this.reposition();
     this.renderBody();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uivisor",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
   "description": "Dev-only visual UI tweaker that turns mouse edits into a precise, breakpoint-aware prompt for your AI coding agent — without touching your source.",
   "license": "MIT",