uivisor 0.1.10 → 0.2.1

package/dist/overlay/index.js

@@ -411,7 +411,8 @@ var ICONS = {
   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"/>'),
-  all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>')
+  all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>'),
+  grip: '<svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor"><circle cx="6" cy="4" r="1.05"/><circle cx="6" cy="8" r="1.05"/><circle cx="6" cy="12" r="1.05"/><circle cx="10" cy="4" r="1.05"/><circle cx="10" cy="8" r="1.05"/><circle cx="10" cy="12" r="1.05"/></svg>'
 };
 var SECTIONS = [
   {
@@ -942,8 +943,9 @@ function renderPrompt(records) {
         }
         if (c.after.designToken || c.after.token && /^(text|bg|border|rounded|shadow)-(?!\[)/.test(c.after.token))
           anyDesignToken = true;
+        const from = (c.before.computed ?? "").trim();
         lines.push(
-          `    - ${c.property}: ${c.before.computed} \u2192 ${c.after.computed}${suggestion}`
+          from ? `    - ${c.property}: ${from} \u2192 ${c.after.computed}${suggestion}` : `    - ${c.property}: set to ${c.after.computed}${suggestion}`
         );
       }
     }
@@ -1189,24 +1191,34 @@ var CSS = (
 
 .uiv-panel {
   position: fixed; right: 16px; bottom: 72px; z-index: 2147483647;
-  width: 328px; max-height: 80vh; overflow: auto;
-  background: #18181b; color: #e4e4e7; border: 1px solid #3f3f46;
-  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.45);
+  width: 360px; max-height: 84vh; overflow: auto;
+  background: #141416; color: #e4e4e7; border: 1px solid #2a2a2e;
+  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.5);
   font-size: 12px; display: none;
 }
 .uiv-panel.show { display: block; }
 
 .uiv-head {
-  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
-  border-bottom: 1px solid #27272a; position: sticky; top: 0; background: #18181b;
+  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
+  border-bottom: 1px solid #242428; position: sticky; top: 0; z-index: 5; background: #141416;
 }
-.uiv-head b { font-size: 13px; color: #fff; letter-spacing: .3px; }
-.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 999px;
+.uiv-head b { font-size: 13px; color: #fafafa; letter-spacing: .2px; }
+.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 8px; border-radius: 999px;
   background: #312e81; color: #c7d2fe; font-weight: 600; }
 .uiv-x { cursor: pointer; color: #71717a; padding: 2px 4px; }
 .uiv-x:hover { color: #fff; }
 
-.uiv-sec { padding: 10px 12px; border-bottom: 1px solid #27272a; }
+.uiv-sec { padding: 11px 13px; border-bottom: 1px solid #1f1f22; }
+
+/* ---- Framer-style top alignment toolbar ---- */
+.uiv-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 13px;
+  border-bottom: 1px solid #1f1f22; }
+.uiv-tgroup { display: flex; gap: 2px; }
+.uiv-tbtn { display: flex; align-items: center; justify-content: center; width: 26px; height: 22px;
+  border-radius: 5px; background: transparent; border: 1px solid transparent; color: #8b8b94; cursor: pointer; }
+.uiv-tbtn:hover { background: #1f1f23; color: #e4e4e7; }
+.uiv-tbtn.on { background: #312e81; border-color: #4f46e5; color: #fff; }
+.uiv-tsep { width: 1px; height: 16px; background: #2a2a2e; }
 .uiv-empty { color: #71717a; padding: 18px 12px; text-align: center; }
 
 .uiv-meta { line-height: 1.5; }
@@ -1318,8 +1330,8 @@ var CSS = (
 .uiv-ctl > .cfield { min-width: 0; }
 
 /* numeric field with a scrub handle on the left */
-.uiv-num { display: flex; align-items: stretch; background: #27272a;
-  border: 1px solid #3f3f46; border-radius: 7px; overflow: hidden; }
+.uiv-num { display: flex; align-items: stretch; background: #1c1c20;
+  border: 1px solid #313138; border-radius: 7px; overflow: hidden; }
 .uiv-num.changed { border-color: #4ade80; }
 .uiv-num.changed input { color: #4ade80; } /* uivisor-edited value \u2192 green */
 .uiv-sel.changed, .uiv-color.changed { border-color: #4ade80; }
@@ -1344,7 +1356,7 @@ var CSS = (
 
 .uiv-expand { display: flex; align-items: center; justify-content: center;
   width: 26px; height: 28px; border-radius: 7px; cursor: pointer;
-  background: #27272a; border: 1px solid #3f3f46; color: #8b8b94; }
+  background: #1c1c20; border: 1px solid #313138; color: #8b8b94; }
 .uiv-expand:hover { color: #fff; background: #3f3f46; }
 .uiv-expand.on { color: #c7d2fe; border-color: #4f46e5; background: #312e81; }
 
@@ -1353,13 +1365,13 @@ var CSS = (
 
 /* Weight dropdown only \u2014 must NOT match the unit <select> inside dim fields. */
 .uiv-ctl select.uiv-sel {
-  width: 100%; background: #27272a; border: 1px solid #3f3f46; color: #fff;
+  width: 100%; background: #1c1c20; border: 1px solid #313138; color: #fff;
   border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none;
 }
 .uiv-ctl select.uiv-sel:focus { border-color: #6366f1; }
 .uiv-ctl input[type=color] { width: 100%; height: 28px; padding: 2px; cursor: pointer;
-  background: #27272a; border: 1px solid #3f3f46; border-radius: 7px; }
-.uiv-ctl input.uiv-text { width: 100%; background: #27272a; border: 1px solid #3f3f46;
+  background: #1c1c20; border: 1px solid #313138; border-radius: 7px; }
+.uiv-ctl input.uiv-text { width: 100%; background: #1c1c20; border: 1px solid #313138;
   color: #fff; border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none; }
 .uiv-ctl input.uiv-text:focus { border-color: #6366f1; }
 .uiv-ctl input.uiv-text.changed { border-color: #4ade80; color: #4ade80; }
@@ -1383,7 +1395,7 @@ var CSS = (
 .uiv-btn.primary:hover { background: #4338ca; }
 .uiv-btn.ghost { flex: 0 0 auto; }
 /* floating read-only "all styles" block, docked bottom-right, left of the panel */
-.uiv-info { position: fixed; right: 352px; bottom: 16px; z-index: 2147483646;
+.uiv-info { position: fixed; right: 384px; bottom: 16px; z-index: 2147483646;
   width: 216px; max-height: 52vh; overflow: auto; display: none;
   background: rgba(24,24,27,0.86); color: #e4e4e7;
   border: 1px solid #3f3f46; border-radius: 10px; padding: 8px 10px;
@@ -1392,6 +1404,47 @@ var CSS = (
 .uiv-info-h { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
   color: #8b8b94; font-weight: 600; margin-bottom: 6px; }
 .uiv-info-sub { color: #52525b; }
+/* ---- box-model widget (nested margin / padding, Figma/Framer style) ----
+   Bands are sized so the side inputs NEVER overlap the inner content box:
+   vertical band 26px (> input 18px), horizontal band 46px (> input 36px). */
+.uiv-bm { position: relative; height: 148px; margin: 2px 0 9px;
+  background: #1b1b1f; border: 1px solid #2f2f35; border-radius: 9px; }
+.uiv-bm-pad { position: absolute; top: 26px; bottom: 26px; left: 46px; right: 46px;
+  background: #26262c; border: 1px solid #3a3a42; border-radius: 7px; }
+.uiv-bm-content { position: absolute; z-index: 0; top: 26px; bottom: 26px; left: 46px; right: 46px;
+  background: #34343c; border-radius: 5px; }
+.uiv-bm-tag { position: absolute; z-index: 1; top: 4px; left: 8px; font-size: 7.5px; font-weight: 700;
+  letter-spacing: .5px; color: #6b6b73; pointer-events: none; }
+.uiv-bm-i { position: absolute; z-index: 3; width: 36px; height: 18px; padding: 0; box-sizing: border-box;
+  background: #0e0e11; border: 1px solid #34343c; border-radius: 5px;
+  color: #d4d4d8; text-align: center; text-align-last: center; line-height: 16px; font-size: 10px;
+  outline: none; cursor: ew-resize; font-family: ui-monospace, monospace; -moz-appearance: textfield; }
+.uiv-bm-i::-webkit-outer-spin-button, .uiv-bm-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.uiv-bm-i:hover { border-color: #52525b; }
+.uiv-bm-i:focus { cursor: text; border-color: #6366f1; }
+.uiv-bm-i.bm-top { top: 4px; left: 50%; transform: translateX(-50%); }
+.uiv-bm-i.bm-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
+.uiv-bm-i.bm-left { left: 5px; top: 50%; transform: translateY(-50%); }
+.uiv-bm-i.bm-right { right: 5px; top: 50%; transform: translateY(-50%); }
+.uiv-bm-i.st-file { color: #e4e4e7; }
+.uiv-bm-i.st-edited { color: #4ade80; }
+.uiv-bm-i.st-inherit { color: #38bdf8; }
+.uiv-bm-i.st-auto { color: #6b7280; }
+/* a side bound to a design token \u2014 shown by name, accent-coloured, no spin */
+.uiv-bm-i.uiv-bm-tok { color: #a5b4fc; font-size: 9px; letter-spacing: -0.2px;
+  border-color: #4338ca; background: #1e1b4b40; text-overflow: ellipsis; }
+.uiv-bm-i.uiv-bm-tok.st-edited { color: #818cf8; }
+/* spacing-token dropdown \u2014 opens when a side value is focused/clicked */
+.uiv-bm-pop { display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
+  margin: -3px 0 8px; padding: 8px; background: #1c1c20; border: 1px solid #34343c;
+  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
+.uiv-bm-pop[hidden] { display: none; }
+.uiv-bm-poplabel { width: 100%; font-size: 9px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: .4px; color: #6b6b73; font-family: ui-monospace, monospace; }
+.uiv-bm-chip { background: #1e1b4b55; border: 1px solid #4338ca; color: #c7d2fe; border-radius: 6px;
+  padding: 3px 8px; font-size: 10px; cursor: pointer; font-family: ui-monospace, monospace; }
+.uiv-bm-chip:hover { background: #4f46e5; border-color: #6366f1; color: #fff; }
+
 .uiv-toast { position: fixed; right: 16px; bottom: 128px; z-index: 2147483647;
   background: #22c55e; color: #052e16; padding: 8px 12px; border-radius: 8px;
   font-size: 12px; font-weight: 600; display: none; }
@@ -1422,6 +1475,8 @@ var Uivisor = class {
     this.collapsedSecs = /* @__PURE__ */ new Set();
     /** Controls manually revealed via "+" (hideWhenAuto controls that are auto). */
     this.revealedCtls = /* @__PURE__ */ new Set();
+    /** Box-model widget: the last-focused side the token dropdown targets. */
+    this.lastBmSide = "padding-top";
     /** Undo / redo stacks of full edit-state snapshots. */
     this.undoStack = [];
     this.redoStack = [];
@@ -1439,6 +1494,11 @@ var Uivisor = class {
     // responsive (virtual screen) mode
     this.responsive = false;
     this.frameWidth = 768;
+    /** The breakpoint new edits are scoped to — chosen explicitly via the chips,
+     *  NOT derived from the frame's pixel width. Defaults to 'base' so a casual tweak
+     *  applies to EVERY size (and never "disappears" when you view another size).
+     *  Picking a specific breakpoint chip narrows the scope to that breakpoint. */
+    this.pickedBp = "base";
     // ---- pointer handling ----
     this.onMove = (e) => {
       if (!this.enabled || this.isOurs(e)) {
@@ -1651,6 +1711,7 @@ var Uivisor = class {
     } else {
       this.scheduleBpRefresh();
       if (!this.responsive) {
+        this.pickedBp = "base";
         this.frameWidth = this.defaultFrameWidth();
         this.toggleResponsive(true);
       }
@@ -1660,12 +1721,6 @@ var Uivisor = class {
   defaultFrameWidth() {
     return typeof window !== "undefined" ? window.innerWidth : 1280;
   }
-  /** Frame width for the "all"/base chip: a phone-ish width in the base range. */
-  baseFrameWidth() {
-    const bps = this.bpSystem().breakpoints;
-    const firstBp = bps.length ? bps[0].minWidth : 640;
-    return this.bpSystem().dir === "min" ? Math.min(390, firstBp - 1) : 390;
-  }
   /** Stylesheets (esp. JIT/CDN Tailwind) load async — re-detect breakpoints a few
    *  times after enabling and re-render only if the set actually changed. */
   scheduleBpRefresh() {
@@ -1760,8 +1815,7 @@ var Uivisor = class {
     this.frameWidth = Math.max(280, Math.min(2400, Math.round(w)));
     const host = this.q(".uiv-framehost");
     host.style.width = `${this.frameWidth}px`;
-    const bp = activeBreakpoint(this.frameWidth, this.bpSystem()).name;
-    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${this.bpLabel(bp)}`;
+    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 editing ${this.bpLabel(this.scopeName())}`;
     this.updateBp();
     this.reposition();
   }
@@ -1810,7 +1864,9 @@ var Uivisor = class {
       };
       this.states.set(el, {
         record,
-        original: snapshot(el, ALL_CSS),
+        // Snapshot every registry property (not just the curated set) so a generic
+        // edit's "before" value is known — the All-CSS inspector edits anything.
+        original: snapshot(el, this.snapshotProps()),
         applied: /* @__PURE__ */ new Set(),
         dimUnit: {}
       });
@@ -1819,6 +1875,10 @@ var Uivisor = class {
     this.reposition();
     this.renderBody();
   }
+  /** Properties to snapshot on selection — the curated set the controls can edit. */
+  snapshotProps() {
+    return ALL_CSS;
+  }
   // ---- value helpers ----
   st() {
     return this.selected ? this.states.get(this.selected) ?? null : null;
@@ -1851,6 +1911,14 @@ var Uivisor = class {
     if (inline && !inline.includes("var(")) return inline;
     return this.computedVal(css) || st.original[css] || "";
   }
+  /** If a design token is the effective value for `css`, its short name (e.g. "lg"
+   *  for --space-lg) — so the field shows the token by name, not its resolved px. */
+  tokenNameFor(css) {
+    const ch = this.effectiveChange(css);
+    if (!ch?.after.designToken) return null;
+    const t = this.designSystem().tokens.find((x) => x.cssVar === ch.after.designToken);
+    return t ? t.name : ch.after.designToken;
+  }
   liveNum(css) {
     const v = this.liveVal(css).trim();
     const m = /^(-?\d*\.?\d+)px$/.exec(v);
@@ -1876,8 +1944,10 @@ var Uivisor = class {
   }
   selectCurrent(css) {
     let v = this.liveVal(css).trim();
-    if (v === "normal") v = "400";
-    if (v === "bold") v = "700";
+    if (css === "font-weight") {
+      if (v === "normal") v = "400";
+      if (v === "bold") v = "700";
+    }
     return v;
   }
   // ---- apply / record / revert ----
@@ -1950,18 +2020,37 @@ var Uivisor = class {
     }
     this.reposition();
   }
-  /** The breakpoint recorded edits are scoped to: manual override, else window. */
-  /** The breakpoint edits are scoped to: the virtual screen's width when in
-   *  responsive mode, otherwise the real window. */
+  /** The breakpoint new edits are scoped to. In responsive mode it's the EXPLICITLY
+   *  picked breakpoint (default 'base' = every size), decoupled from the frame's
+   *  pixel width — so editing at a desktop-sized frame still defaults to "all sizes"
+   *  instead of silently scoping to the top breakpoint and vanishing elsewhere. */
   activeScope() {
     const sys = this.bpSystem();
-    if (this.responsive) return activeBreakpoint(this.frameWidth, sys);
-    return currentBreakpoint(sys);
-  }
-  /** The width the inspector is scoped to (virtual screen, else real window). */
+    if (!this.responsive) return currentBreakpoint(sys);
+    const name = this.scopeName();
+    const bp = sys.breakpoints.find((b) => b.name === name);
+    return { name, minWidth: bp ? bp.minWidth : 0 };
+  }
+  /** The picked breakpoint, validated against the current system (falls back to
+   *  'base' if a previously-picked breakpoint no longer exists after re-detection). */
+  scopeName() {
+    if (this.pickedBp === "base") return "base";
+    return this.bpSystem().breakpoints.some((b) => b.name === this.pickedBp) ? this.pickedBp : "base";
+  }
+  /** The width the cascade is evaluated at — the representative width of the PICKED
+   *  scope, not the frame's visual width. base → a width where only base applies (so
+   *  base edits win and show everywhere); a named breakpoint → its threshold. */
   activeWidth() {
-    if (this.responsive) return this.frameWidth;
-    return typeof window !== "undefined" ? window.innerWidth : 0;
+    if (!this.responsive) return typeof window !== "undefined" ? window.innerWidth : 0;
+    return this.scopeWidth(this.scopeName());
+  }
+  scopeWidth(name) {
+    const sys = this.bpSystem();
+    if (name !== "base") {
+      const bp = sys.breakpoints.find((b) => b.name === name);
+      if (bp) return bp.minWidth;
+    }
+    return sys.dir === "min" ? 0 : 1e6;
   }
   /** 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. */
@@ -2021,13 +2110,13 @@ var Uivisor = class {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return;
-    const sibs = this.siblingsOf(el);
+    const scope = this.activeScope();
     for (const css of cssList) {
-      for (const e of sibs) removeOverride(e, css);
-      st.applied.delete(css);
-      st.record.changes = st.record.changes.filter((c) => c.property !== css);
+      st.record.changes = st.record.changes.filter(
+        (c) => !(c.property === css && c.breakpoint === scope.name)
+      );
     }
-    this.reposition();
+    this.reapplyScope();
     this.renderBody();
   }
   commitNumeric(cssList, raw) {
@@ -2103,6 +2192,7 @@ var Uivisor = class {
         <div class="uiv-src">${escapeHtml(src)}</div>
         <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
       </div>
+      ${this.alignToolbarHtml()}
       ${this.dsIndicatorHtml()}
       ${this.breakpointBarHtml()}
       ${this.targetHtml(st)}
@@ -2346,9 +2436,8 @@ var Uivisor = class {
    *  project breakpoint. Reused by the panel (Live) and the over-frame bar. */
   breakpointChipsHtml() {
     const sys = this.bpSystem();
-    const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
     const winBp = currentBreakpoint(sys).name;
-    const isActive = (n) => this.responsive ? n === frameBp : n === winBp;
+    const isActive = (n) => this.responsive ? n === this.scopeName() : n === winBp;
     const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${this.bpLabel(n)}</span></button>`;
     const all = chip("base", isActive("base"), "No breakpoint \u2014 applies to every size by default");
     const rest = sys.breakpoints.map((b) => chip(b.name, isActive(b.name), sys.dir === "min" ? `\u2265 ${b.minWidth}px` : `\u2264 ${b.minWidth}px`)).join("");
@@ -2403,15 +2492,60 @@ var Uivisor = class {
     if (req === "flexgrid") return ctx.flexGrid;
     return true;
   }
+  /** Framer-style top alignment toolbar — justify (horizontal) + align (vertical)
+   *  icon buttons. Shown for flex/grid containers (where they apply). */
+  alignToolbarHtml() {
+    const el = this.selected;
+    if (!el || !this.context(el).flexGrid) return "";
+    const j = this.liveVal("justify-content").trim();
+    const a = this.liveVal("align-items").trim();
+    const g = (r) => `<svg viewBox="0 0 14 14" width="13" height="13" fill="currentColor">${r}</svg>`;
+    const JI = {
+      "flex-start": g('<rect x="1" y="3" width="2" height="8"/><rect x="4" y="3" width="2" height="8"/>'),
+      center: g('<rect x="4" y="3" width="2" height="8"/><rect x="8" y="3" width="2" height="8"/>'),
+      "flex-end": g('<rect x="8" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>'),
+      "space-between": g('<rect x="1" y="3" width="2" height="8"/><rect x="11" y="3" width="2" height="8"/>')
+    };
+    const AI = {
+      "flex-start": g('<rect x="3" y="1" width="8" height="2"/><rect x="3" y="4" width="8" height="2"/>'),
+      center: g('<rect x="3" y="4" width="8" height="2"/><rect x="3" y="8" width="8" height="2"/>'),
+      "flex-end": g('<rect x="3" y="8" width="8" height="2"/><rect x="3" y="11" width="8" height="2"/>'),
+      stretch: g('<rect x="3" y="1" width="8" height="12"/>')
+    };
+    const btn = (prop, val, icon, cur) => `<button class="uiv-tbtn${cur === val ? " on" : ""}" data-prop="${prop}" data-val="${val}" title="${prop}: ${val}">${icon}</button>`;
+    const jb = Object.entries(JI).map(([v, ic]) => btn("justify-content", v, ic, j)).join("");
+    const ab = Object.entries(AI).map(([v, ic]) => btn("align-items", v, ic, a)).join("");
+    return `<div class="uiv-toolbar"><div class="uiv-tgroup">${jb}</div><div class="uiv-tsep"></div><div class="uiv-tgroup">${ab}</div></div>`;
+  }
+  /** Figma/Framer-style nested box-model widget: MARGIN ring around a PADDING ring,
+   *  with an editable number on each of the 8 sides. Commits via the engine. */
+  boxModelHtml() {
+    const num = (css) => {
+      const n = this.liveNum(css);
+      return n == null ? "0" : String(round2(n));
+    };
+    const side = (css, pos) => {
+      const tok = this.tokenNameFor(css);
+      const val = tok ?? num(css);
+      const title = tok ? `${css}: ${tok}` : css;
+      return `<input class="uiv-bm-i ${pos}${this.controlStateClass([css])}${tok ? " uiv-bm-tok" : ""}" data-css="${css}" value="${escapeAttr(val)}" title="${escapeAttr(title)}" inputmode="decimal" spellcheck="false">`;
+    };
+    const spaceTokens = this.designSystem().byCategory["spacing"] ?? [];
+    const pop = spaceTokens.length ? `<div class="uiv-bm-pop" hidden><span class="uiv-bm-poplabel">Token</span>` + spaceTokens.map((t) => `<button class="uiv-bm-chip" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(t.value)}">${escapeHtml(t.name)} \xB7 ${escapeHtml(t.value)}</button>`).join("") + `</div>` : "";
+    return `<div class="uiv-bm"><span class="uiv-bm-tag">MARGIN</span>` + side("margin-top", "bm-top") + side("margin-right", "bm-right") + side("margin-bottom", "bm-bottom") + side("margin-left", "bm-left") + `<div class="uiv-bm-pad"><span class="uiv-bm-tag">PADDING</span>` + side("padding-top", "bm-top") + side("padding-right", "bm-right") + side("padding-bottom", "bm-bottom") + side("padding-left", "bm-left") + `<div class="uiv-bm-content"></div></div></div>` + pop;
+  }
   controlsHtml(ctx) {
     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 "";
       if (this.collapsedSecs.has(sec.title)) return `<div class="uiv-sec">${this.accordionTitle(sec.title)}</div>`;
+      const isSpacing = sec.title === "Spacing";
+      const widget = isSpacing ? this.boxModelHtml() : "";
       const rows = [];
       const adds = [];
       for (const c of controls) {
+        if (isSpacing && c.kind === "box" && (c.key === "padding" || c.key === "margin")) continue;
         const css = c.css;
         if (c.kind === "len" && c.hideWhenAuto && css && !this.revealedCtls.has(css) && this.controlState([css]) === "auto") {
           adds.push(`<button class="uiv-addctl" data-css="${css}">+ ${escapeHtml(c.label)}</button>`);
@@ -2420,7 +2554,7 @@ var Uivisor = class {
         }
       }
       const addRow = adds.length ? `<div class="uiv-adds">${adds.join("")}</div>` : "";
-      return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${rows.join("")}${addRow}</div>`;
+      return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${widget}${rows.join("")}${addRow}</div>`;
     }).join("");
     return legend + secs;
   }
@@ -2568,6 +2702,78 @@ var Uivisor = class {
   }
   bindControls() {
     const root = this.root;
+    root.querySelectorAll(".uiv-tbtn").forEach((node) => {
+      const btn = node;
+      const prop = btn.getAttribute("data-prop");
+      const val = btn.getAttribute("data-val");
+      btn.addEventListener("click", () => {
+        this.pushHistory();
+        this.commitValue([prop], val);
+      });
+    });
+    const bmPop = root.querySelector(".uiv-bm-pop");
+    const bmPopLabel = bmPop?.querySelector(".uiv-bm-poplabel");
+    root.querySelectorAll(".uiv-bm-i").forEach((node) => {
+      const inp = node;
+      const css = inp.getAttribute("data-css");
+      inp.addEventListener("focus", () => {
+        this.lastBmSide = css;
+        if (bmPop) {
+          bmPop.hidden = false;
+          if (bmPopLabel) bmPopLabel.textContent = `${css} \u2192`;
+        }
+      });
+      inp.addEventListener("blur", () => {
+        window.setTimeout(() => {
+          if (bmPop) bmPop.hidden = true;
+        }, 140);
+      });
+      inp.addEventListener("change", () => {
+        this.pushHistory();
+        this.commitNumeric([css], inp.value);
+      });
+      inp.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") inp.blur();
+      });
+      inp.addEventListener("pointerdown", (e) => {
+        const startX = e.clientX;
+        const startVal = parseFloat(inp.value) || 0;
+        let moved = false;
+        let pushed = false;
+        const move = (ev) => {
+          if (!moved && Math.abs(ev.clientX - startX) < 3) return;
+          if (!moved) {
+            moved = true;
+            inp.blur();
+          }
+          if (!pushed) {
+            this.pushHistory();
+            pushed = true;
+          }
+          let nv = startVal + Math.round(ev.clientX - startX);
+          if (ev.shiftKey) nv = Math.round(nv / 10) * 10;
+          nv = Math.max(0, nv);
+          inp.value = String(nv);
+          this.liveSet([css], `${nv}px`);
+        };
+        const up = () => {
+          window.removeEventListener("pointermove", move);
+          window.removeEventListener("pointerup", up);
+          if (moved) this.recordProps([css]);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+      });
+    });
+    root.querySelectorAll(".uiv-bm-chip").forEach((node) => {
+      const btn = node;
+      const cssVar = btn.getAttribute("data-var");
+      btn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
+        if (token) this.applyToken(this.lastBmSide, token);
+      });
+    });
     root.querySelectorAll(".uiv-num:not(.uiv-dim)").forEach((node) => {
       const box = node;
       const cssList = (box.getAttribute("data-css") || "").split(",").filter(Boolean);
@@ -2602,6 +2808,7 @@ var Uivisor = class {
       const input = node;
       const css = input.getAttribute("data-css");
       input.addEventListener("change", () => {
+        if (input.value.toLowerCase() === toHexInput(this.liveVal(css)).toLowerCase()) return;
         this.pushHistory();
         this.commitValue([css], input.value);
       });
@@ -2662,8 +2869,8 @@ var Uivisor = class {
       const btn = node;
       const bp = btn.getAttribute("data-bp");
       btn.addEventListener("click", () => {
-        const w = bp === "base" ? this.baseFrameWidth() : this.bpSystem().breakpoints.find((b) => b.name === bp)?.minWidth ?? 768;
-        this.setFrameWidth(w);
+        this.pickedBp = bp;
+        this.setFrameWidth(bp === "base" ? this.defaultFrameWidth() : this.scopeWidth(bp));
         this.reapplyScope();
         this.renderBody();
       });
@@ -2955,7 +3162,7 @@ function escapeHtml(s) {
   return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
 }
 function escapeAttr(s) {
-  return s.replace(/"/g, "&quot;");
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
 }
 function cssAttrEscape(s) {
   return s.replace(/["\\]/g, "\\$&");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uivisor",
-  "version": "0.1.10",
+  "version": "0.2.1",
   "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",