uivisor 0.1.6 → 0.1.7

package/dist/overlay/index.js

@@ -1191,8 +1191,12 @@ 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-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; }
@@ -1299,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;
@@ -1379,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 = () => {
@@ -1645,6 +1661,7 @@ var Uivisor = class {
       const up = () => {
         handle.removeEventListener("pointermove", move);
         handle.removeEventListener("pointerup", up);
+        this.reapplyScope();
         this.renderBody();
       };
       handle.addEventListener("pointermove", move);
@@ -1680,6 +1697,7 @@ var Uivisor = class {
         dimUnit: {}
       });
     }
+    if (el) this.reapplyScope();
     this.reposition();
     this.renderBody();
   }
@@ -1706,6 +1724,12 @@ var Uivisor = class {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return "";
+    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] || "";
@@ -1728,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();
@@ -1773,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.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 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();
   }
@@ -1974,6 +2012,13 @@ var Uivisor = class {
     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) {
@@ -2014,14 +2059,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,10 +2148,7 @@ 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. */
@@ -2165,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) {
@@ -2245,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. */
@@ -2279,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);
@@ -2297,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);
@@ -2306,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;
@@ -2410,6 +2449,7 @@ var Uivisor = class {
           this.toggleResponsive(true);
         } else {
           this.setFrameWidth(w);
+          this.reapplyScope();
           this.renderBody();
         }
       });
@@ -2607,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.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.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",