uivisor 0.1.6 → 0.1.8

package/dist/overlay/index.js

@@ -1,6 +1,7 @@
 // src/overlay/breakpoint.ts
 var TAILWIND = {
   name: "tailwind",
+  dir: "min",
   breakpoints: [
     { name: "sm", minWidth: 640 },
     { name: "md", minWidth: 768 },
@@ -9,13 +10,44 @@ var TAILWIND = {
     { name: "2xl", minWidth: 1536 }
   ]
 };
+function appliesAt(dir, threshold, width) {
+  return dir === "min" ? width >= threshold : width <= threshold;
+}
+function priority(dir, threshold) {
+  return dir === "min" ? threshold : -threshold;
+}
+function baseThreshold(dir) {
+  return dir === "min" ? 0 : Infinity;
+}
 function activeBreakpoint(width, system = TAILWIND) {
-  let active = { name: "base", minWidth: 0 };
+  let active = { name: "base", minWidth: baseThreshold(system.dir) };
+  let best = priority(system.dir, active.minWidth);
   for (const bp of system.breakpoints) {
-    if (width >= bp.minWidth) active = { name: bp.name, minWidth: bp.minWidth };
+    if (!appliesAt(system.dir, bp.minWidth, width)) continue;
+    const p = priority(system.dir, bp.minWidth);
+    if (p > best) {
+      best = p;
+      active = { name: bp.name, minWidth: bp.minWidth };
+    }
   }
   return active;
 }
+function effectiveBreakpoint(editedNames, width, system = TAILWIND) {
+  const stops = { base: baseThreshold(system.dir) };
+  for (const bp of system.breakpoints) stops[bp.name] = bp.minWidth;
+  let winner = null;
+  let best = -Infinity;
+  for (const name of editedNames) {
+    const threshold = stops[name];
+    if (threshold == null || !appliesAt(system.dir, threshold, width)) continue;
+    const p = priority(system.dir, threshold);
+    if (winner === null || p > best) {
+      best = p;
+      winner = name;
+    }
+  }
+  return winner;
+}
 function currentBreakpoint(system = TAILWIND) {
   const width = typeof window !== "undefined" ? window.innerWidth : 0;
   return activeBreakpoint(width, system);
@@ -32,18 +64,23 @@ function nameForWidth(px2) {
 }
 function detectBreakpoints() {
   if (typeof document === "undefined") return TAILWIND;
-  const widths = /* @__PURE__ */ new Set();
+  const mins = /* @__PURE__ */ new Set();
+  const maxes = /* @__PURE__ */ new Set();
+  const grab = (text, re, into) => {
+    const m = re.exec(text);
+    if (m) {
+      const val = parseFloat(m[1]);
+      const px2 = m[2].toLowerCase() === "px" ? val : val * 16;
+      if (px2 >= 240 && px2 <= 4096) into.add(Math.round(px2));
+    }
+  };
   const visit = (rules) => {
     if (!rules) return;
     for (let i = 0; i < rules.length; i++) {
       const rule = rules[i];
       if (rule.type === 4 && rule.media) {
-        const m = /min-width:\s*(\d*\.?\d+)(px|rem|em)/i.exec(rule.media.mediaText);
-        if (m) {
-          const val = parseFloat(m[1]);
-          const px2 = m[2].toLowerCase() === "px" ? val : val * 16;
-          if (px2 >= 240 && px2 <= 4096) widths.add(Math.round(px2));
-        }
+        grab(rule.media.mediaText, /min-width:\s*(\d*\.?\d+)(px|rem|em)/i, mins);
+        grab(rule.media.mediaText, /max-width:\s*(\d*\.?\d+)(px|rem|em)/i, maxes);
         visit(rule.cssRules);
       } else if (rule.cssRules) {
         visit(rule.cssRules);
@@ -56,10 +93,13 @@ function detectBreakpoints() {
     } catch {
     }
   }
+  const useMax = maxes.size > mins.size;
+  const widths = useMax ? maxes : mins;
   const sorted = [...widths].sort((a, b) => a - b);
   if (!sorted.length) return TAILWIND;
   return {
     name: "detected",
+    dir: useMax ? "max" : "min",
     breakpoints: sorted.map((w) => ({ name: nameForWidth(w), minWidth: w }))
   };
 }
@@ -366,7 +406,11 @@ var ICONS = {
   layout: sv('<rect x="2" y="2" width="12" height="12" rx="1.5"/><path d="M6 2.5 V13.5 M6 6 H13.5"/>'),
   width: sv('<path d="M1.5 8 H14.5 M4 5 L1.5 8 L4 11 M12 5 L14.5 8 L12 11"/>'),
   height: sv('<path d="M8 1.5 V14.5 M5 4 L8 1.5 L11 4 M5 12 L8 14.5 L11 12"/>'),
-  chevron: sv('<path d="M6 4 L10 8 L6 12"/>')
+  chevron: sv('<path d="M6 4 L10 8 L6 12"/>'),
+  phone: sv('<rect x="5" y="1.8" width="6" height="12.4" rx="1.6"/><path d="M7 12.4h2"/>'),
+  tablet: sv('<rect x="3.3" y="2.2" width="9.4" height="11.6" rx="1.6"/><path d="M7 11.7h2"/>'),
+  desktop: sv('<rect x="1.8" y="2.8" width="12.4" height="8" rx="1"/><path d="M5.8 14h4.4 M8 10.8v3.2"/>'),
+  live: sv('<circle cx="8" cy="8" r="2"/><path d="M4.6 4.6a4.8 4.8 0 0 0 0 6.8 M11.4 4.6a4.8 4.8 0 0 1 0 6.8"/>')
 };
 var SECTIONS = [
   {
@@ -1082,12 +1126,14 @@ var CSS = (
 }
 .uiv-framewrap.show { display: flex; }
 .uiv-framebar {
-  display: flex; align-items: center; justify-content: center; gap: 14px;
-  height: 38px; color: #e4e4e7; font-size: 12px; flex: 0 0 auto;
+  display: flex; align-items: center; gap: 12px;
+  height: 46px; padding: 0 14px; color: #e4e4e7; font-size: 12px; flex: 0 0 auto;
   border-bottom: 1px solid #27272a;
 }
-.uiv-framew { font-family: ui-monospace, monospace; color: #c7d2fe; font-weight: 600; }
-.uiv-framex { cursor: pointer; color: #a1a1aa; }
+.uiv-framechips { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
+.uiv-framew { font-family: ui-monospace, monospace; color: #c7d2fe; font-weight: 600;
+  white-space: nowrap; flex: 0 0 auto; }
+.uiv-framex { cursor: pointer; color: #a1a1aa; font-size: 14px; flex: 0 0 auto; }
 .uiv-framex:hover { color: #fff; }
 .uiv-framestage {
   flex: 1; display: flex; align-items: stretch; justify-content: center;
@@ -1151,7 +1197,10 @@ var CSS = (
   border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600;
   font-family: ui-monospace, monospace;
 }
+.uiv-chip { display: inline-flex; align-items: center; gap: 4px; }
+.uiv-chip svg { width: 13px; height: 13px; opacity: .85; }
 .uiv-chip:hover, .uiv-clschip:hover { color: #fff; background: #3f3f46; }
+.uiv-chip.on svg { opacity: 1; }
 .uiv-chip.win { border-color: #52525b; color: #d4d4d8; }
 .uiv-chip.on, .uiv-clschip.on { background: #4f46e5; border-color: #6366f1; color: #fff; }
 .uiv-bphint { margin-top: 7px; font-size: 10px; color: #71717a; line-height: 1.4; }
@@ -1191,12 +1240,20 @@ 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 */
-.uiv-rv.auto { color: #6b7280; } /* browser-computed / default \u2192 grey */
-.uiv-leg { display: flex; gap: 10px; padding: 1px 0 6px; font-size: 9px;
+
+/* 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-ctl.st-inherit > .clabel { color: #38bdf8; } /* value cascaded from another bp */
+.uiv-inh { font-size: 9px; font-weight: 700; color: #38bdf8; font-family: ui-monospace, monospace;
+  background: #0c4a6e55; border: 1px solid #0369a1; border-radius: 4px; padding: 0 3px; margin-left: 2px; }
+.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.inh { color: #38bdf8; }
 .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; }
@@ -1299,6 +1356,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;
@@ -1379,7 +1445,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 = () => {
@@ -1442,7 +1511,7 @@ var Uivisor = class {
     this.root.innerHTML = `
       <style>${CSS}</style>
       <div class="uiv-framewrap">
-        <div class="uiv-framebar"><span class="uiv-framew">768px</span><span class="uiv-framex" title="Exit responsive">\u2715 exit</span></div>
+        <div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="Exit responsive">\u2715</span></div>
         <div class="uiv-framestage">
           <div class="uiv-framehost">
             <iframe class="uiv-frame" data-uiv-frame="1"></iframe>
@@ -1645,6 +1714,7 @@ var Uivisor = class {
       const up = () => {
         handle.removeEventListener("pointermove", move);
         handle.removeEventListener("pointerup", up);
+        this.reapplyScope();
         this.renderBody();
       };
       handle.addEventListener("pointermove", move);
@@ -1680,6 +1750,7 @@ var Uivisor = class {
         dimUnit: {}
       });
     }
+    if (el) this.reapplyScope();
     this.reposition();
     this.renderBody();
   }
@@ -1706,6 +1777,11 @@ var Uivisor = class {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return "";
+    const ch = this.effectiveChange(css);
+    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] || "";
@@ -1728,7 +1804,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();
@@ -1773,16 +1852,36 @@ 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.live ?? 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 width = this.activeWidth();
+    const sys = this.bpSystem();
+    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();
+      const byProp = /* @__PURE__ */ new Map();
+      for (const c of st.record.changes) {
+        const arr = byProp.get(c.property) ?? [];
+        arr.push(c);
+        byProp.set(c.property, arr);
+      }
+      for (const [prop, changes] of byProp) {
+        const eff = effectiveBreakpoint(changes.map((c2) => c2.breakpoint), width, sys);
+        if (!eff) continue;
+        const c = changes.find((x) => x.breakpoint === eff);
+        for (const e of targets) applyOverride(e, prop, c.live ?? c.after.computed);
+        st.applied.add(prop);
+      }
     }
     this.reposition();
   }
@@ -1794,6 +1893,34 @@ var Uivisor = class {
     if (this.responsive) return activeBreakpoint(this.frameWidth, sys);
     return currentBreakpoint(sys);
   }
+  /** The width the inspector is scoped to (virtual screen, else real window). */
+  activeWidth() {
+    if (this.responsive) return this.frameWidth;
+    return typeof window !== "undefined" ? window.innerWidth : 0;
+  }
+  /** The recorded change that wins the breakpoint cascade for `css` at the active
+   *  width — i.e. the value effective here, set on this breakpoint or inherited. */
+  effectiveChange(css) {
+    const st = this.st();
+    if (!st) return null;
+    const changes = st.record.changes.filter((c) => c.property === css);
+    if (!changes.length) return null;
+    const eff = effectiveBreakpoint(
+      changes.map((c) => c.breakpoint),
+      this.activeWidth(),
+      this.bpSystem()
+    );
+    return eff ? changes.find((c) => c.breakpoint === eff) ?? null : null;
+  }
+  /** If `css`'s effective value is INHERITED from another breakpoint, its name. */
+  inheritedFrom(props) {
+    const scope = this.activeScope();
+    for (const p of props) {
+      const e = this.effectiveChange(p);
+      if (e && e.breakpoint !== scope.name) return e.breakpoint;
+    }
+    return null;
+  }
   recordProps(cssList) {
     const el = this.selected;
     const st = this.st();
@@ -1897,6 +2024,7 @@ var Uivisor = class {
         <div class="uiv-hint">Alt+U toggles \xB7 Esc deselects \xB7 \u2318/Ctrl+Z undo, \u21E7 to redo. Tweaks stay in the browser \u2014 nothing is written to your code.</div>
         ${this.journalHtml()}
       `;
+      if (this.responsive) this.renderFrameBar();
       this.bindControls();
       return;
     }
@@ -1916,6 +2044,7 @@ var Uivisor = class {
       ${this.controlsHtml(this.context(this.selected))}
       ${this.journalHtml()}
     `;
+    if (this.responsive) this.renderFrameBar();
     this.bindControls();
   }
   /** Small indicator: how many design tokens were detected (or a hint if none). */
@@ -1974,6 +2103,21 @@ var Uivisor = class {
     cache.set(el, out);
     return out;
   }
+  /** State class for an editable control's row: edited (green, at this breakpoint)
+   *  · inherit (a value cascaded from another breakpoint) · file (white, authored
+   *  in CSS) · auto (grey, browser-computed/default). */
+  controlStateClass(props) {
+    if (this.isChanged(props)) return " st-edited";
+    if (this.inheritedFrom(props)) return " st-inherit";
+    const inherit = props.some((p) => INHERITED_PROPS.has(p));
+    return this.isAuthored(props, inherit) ? " st-file" : " st-auto";
+  }
+  /** A control's label, with an "inherited from {bp}" badge when the value cascaded. */
+  ctlLabel(label, props) {
+    const from = this.inheritedFrom(props);
+    const badge = from ? ` <span class="uiv-inh" title="inherited from ${escapeAttr(from)} \u2014 not set at this breakpoint">\u2923${escapeHtml(from)}</span>` : "";
+    return `<span class="clabel">${label}${badge}</span>`;
+  }
   /** 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) {
@@ -2014,14 +2158,9 @@ var Uivisor = class {
     };
     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 changedSet = new Set(this.st()?.record.changes.map((c) => c.property) ?? []);
-    const stateCls = (props, inherit = false) => {
-      if (props.some((p) => changedSet.has(p))) return " changed";
-      return this.isAuthored(props, inherit) ? "" : " auto";
-    };
     const rows = [];
-    const add = (k, v, props, inherit = false) => {
-      if (v !== "" && v != null) rows.push({ k, v, cls: stateCls(props, inherit) });
+    const add = (k, v, _props = [], _inherit = false) => {
+      if (v !== "" && v != null) rows.push({ k, v });
     };
     const disp = g("display");
     add("display", disp, ["display"]);
@@ -2108,29 +2247,49 @@ var Uivisor = class {
     const tr = g("transform");
     if (tr && tr !== "none") add("transform", clip(tr, 22), ["transform"]);
     const collapsed = this.collapsedSecs.has("Current styles");
-    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 items = collapsed ? "" : legend + rows.map(
-      (r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv${r.cls}">${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. */
-  breakpointBarHtml() {
+  /** A device icon for a breakpoint chip, by its threshold (size proxy). */
+  bpIcon(name) {
+    if (name === "live") return ICONS.live;
+    const px2 = name === "base" ? 0 : this.bpSystem().breakpoints.find((b) => b.name === name)?.minWidth ?? 0;
+    if (px2 < 768) return ICONS.phone;
+    if (px2 < 1024) return ICONS.tablet;
+    return ICONS.desktop;
+  }
+  /** Breakpoint chips (Live + each project breakpoint) with device icons. Reused by
+   *  the panel (Live mode) and the bar over the virtual screen (responsive mode). */
+  breakpointChipsHtml() {
     const sys = this.bpSystem();
-    const bps = sys.breakpoints;
-    const names = ["base", ...bps.map((b) => b.name)];
+    const names = ["base", ...sys.breakpoints.map((b) => b.name)];
     const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
     const winBp = currentBreakpoint(sys).name;
-    const liveW = typeof window !== "undefined" ? window.innerWidth : 0;
-    const liveChip = `<button class="uiv-chip${!this.responsive ? " on" : ""}" data-bp="live" title="Follow your real browser window">Live</button>`;
+    const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${n === "live" ? "Live" : n}</span></button>`;
+    const live = chip("live", !this.responsive, "Follow your real browser window");
     const chips = names.map((n) => {
       const active = this.responsive ? n === frameBp : n === winBp;
-      const px2 = n === "base" ? 0 : bps.find((b) => b.name === n).minWidth;
-      return `<button class="uiv-chip${active ? " on" : ""}" data-bp="${n}" title="Preview at \u2265${px2}px">${n}</button>`;
+      const px2 = n === "base" ? 0 : sys.breakpoints.find((b) => b.name === n).minWidth;
+      return chip(n, active, sys.dir === "min" ? `\u2265 ${px2}px` : `\u2264 ${px2}px`);
     }).join("");
+    return live + chips;
+  }
+  /** Panel breakpoint bar — shown only in Live mode (in responsive mode the bar
+   *  lives over the virtual screen instead). */
+  breakpointBarHtml() {
+    if (this.responsive) return "";
+    const sys = this.bpSystem();
+    const winBp = currentBreakpoint(sys).name;
+    const liveW = typeof window !== "undefined" ? window.innerWidth : 0;
     const detected = sys.name === "detected" ? "" : " (defaults)";
-    const hint = this.responsive ? `Virtual screen at <b>${this.frameWidth}px</b> (${frameBp}). Edits scoped to <b>${frameBp}:</b>. Drag the frame edge to fine-tune.` : `Live \u2014 your window is <b>${liveW}px</b> = <b>${winBp}</b> range, edits scoped to <b>${winBp}:</b>. Click another size to shrink the screen to it.`;
-    return `<div class="uiv-sec"><div class="uiv-sectitle">Screen / breakpoint${detected}</div><div class="uiv-chips">${liveChip}${chips}</div><div class="uiv-bphint">${hint}</div></div>`;
+    const cascade = sys.dir === "min" ? `Mobile-first: an edit applies to this breakpoint and <b>wider</b>.` : `Desktop-first: an edit applies to this breakpoint and <b>narrower</b>.`;
+    const hint = `Live \u2014 window <b>${liveW}px</b> = <b>${winBp}</b>. ${cascade} Click a size to shrink the screen.`;
+    return `<div class="uiv-sec"><div class="uiv-sectitle">Screen / breakpoint${detected}</div><div class="uiv-chips">${this.breakpointChipsHtml()}</div><div class="uiv-bphint">${hint}</div></div>`;
+  }
+  /** Populate the bar over the virtual screen (responsive mode) with the chips. */
+  renderFrameBar() {
+    const host = this.root.querySelector(".uiv-framechips");
+    if (host) host.innerHTML = this.breakpointChipsHtml();
   }
   /** "Apply changes to": this element, an existing shared class, or a NEW class. */
   targetHtml(st) {
@@ -2165,12 +2324,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 inh">inherited</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) {
@@ -2245,7 +2406,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])}">${this.ctlLabel(c.label, [c.css])}<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. */
@@ -2279,7 +2440,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)}">` + this.ctlLabel(c.label, cssList) + `<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);
@@ -2297,7 +2458,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])}">${this.ctlLabel(c.label, [c.css])}<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);
@@ -2306,10 +2467,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])}">${this.ctlLabel(c.label, [c.css])}<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])}">${this.ctlLabel(c.label, [c.css])}<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;
@@ -2410,6 +2571,7 @@ var Uivisor = class {
           this.toggleResponsive(true);
         } else {
           this.setFrameWidth(w);
+          this.reapplyScope();
           this.renderBody();
         }
       });
@@ -2607,13 +2769,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.live ?? 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.6",
+  "version": "0.1.8",
   "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",