uivisor 0.1.7 → 0.1.9

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,12 @@ 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"/>'),
+  all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>')
 };
 var SECTIONS = [
   {
@@ -1082,12 +1127,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 +1198,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; }
@@ -1196,11 +1246,15 @@ var CSS = (
 .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; }
@@ -1458,7 +1512,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>
@@ -1643,7 +1697,7 @@ var Uivisor = class {
     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 ${bp}`;
+    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${this.bpLabel(bp)}`;
     this.updateBp();
     this.reposition();
   }
@@ -1724,8 +1778,7 @@ 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);
+    const ch = this.effectiveChange(css);
     if (ch) {
       const v = ch.live ?? ch.after.computed;
       return v.includes("var(") ? this.computedVal(css) || v : v;
@@ -1810,16 +1863,25 @@ var Uivisor = class {
    * inline override leaking across all of them.
    */
   reapplyScope() {
-    const scope = this.activeScope();
+    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) {
-        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);
+        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();
@@ -1832,6 +1894,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();
@@ -1935,6 +2025,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;
     }
@@ -1954,6 +2045,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). */
@@ -2013,12 +2105,20 @@ var Uivisor = class {
     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). */
+   *  · 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(this.bpLabel(from))} \u2014 not set at this breakpoint">\u2923${escapeHtml(this.bpLabel(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) {
@@ -2151,23 +2251,49 @@ var Uivisor = class {
     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() {
+  /** Display label for a breakpoint name — the unprefixed "base" scope reads "all"
+   *  (applies to every size by default); internal key stays "base". */
+  bpLabel(name) {
+    return name === "base" ? "all" : name;
+  }
+  /** A device icon for a breakpoint chip, by its threshold (size proxy). */
+  bpIcon(name) {
+    if (name === "live") return ICONS.live;
+    if (name === "base") return ICONS.all;
+    const px2 = 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 with icons. Order: "all" (base, the default) → Live → each
+   *  project breakpoint. Reused by the panel (Live) and the over-frame bar. */
+  breakpointChipsHtml() {
     const sys = this.bpSystem();
-    const bps = sys.breakpoints;
-    const names = ["base", ...bps.map((b) => b.name)];
     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 chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${n === "live" ? "Live" : this.bpLabel(n)}</span></button>`;
+    const all = chip("base", isActive("base"), "No breakpoint \u2014 applies to every size by default");
+    const live = chip("live", !this.responsive, "Follow your real browser window");
+    const rest = sys.breakpoints.map((b) => chip(b.name, isActive(b.name), sys.dir === "min" ? `\u2265 ${b.minWidth}px` : `\u2264 ${b.minWidth}px`)).join("");
+    return all + live + rest;
+  }
+  /** 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 liveChip = `<button class="uiv-chip${!this.responsive ? " on" : ""}" data-bp="live" title="Follow your real browser window">Live</button>`;
-    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>`;
-    }).join("");
     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>${this.bpLabel(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) {
@@ -2202,7 +2328,7 @@ var Uivisor = class {
     return true;
   }
   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 auto">auto</span></div>`;
+    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 "";
@@ -2284,7 +2410,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${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>`;
+    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. */
@@ -2318,7 +2444,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${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>`;
+      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);
@@ -2336,7 +2462,7 @@ var Uivisor = class {
     }
     if (c.kind === "len") {
       const v = this.liveNum(c.css);
-      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");
+      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);
@@ -2345,10 +2471,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${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>`;
+      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${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");
+    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;

package/package.json

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