uivisor 0.1.8 → 0.1.9

package/dist/overlay/index.js

@@ -410,7 +410,8 @@ var ICONS = {
   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"/>')
+  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 = [
   {
@@ -1696,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();
   }
@@ -2115,7 +2116,7 @@ var Uivisor = class {
   /** 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>` : "";
+    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
@@ -2250,29 +2251,32 @@ 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>`;
   }
+  /** 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;
-    const px2 = name === "base" ? 0 : this.bpSystem().breakpoints.find((b) => b.name === name)?.minWidth ?? 0;
+    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 (Live + each project breakpoint) with device icons. Reused by
-   *  the panel (Live mode) and the bar over the virtual screen (responsive mode). */
+  /** 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 names = ["base", ...sys.breakpoints.map((b) => b.name)];
     const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
     const winBp = currentBreakpoint(sys).name;
-    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 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 chips = names.map((n) => {
-      const active = this.responsive ? n === frameBp : n === winBp;
-      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;
+    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). */
@@ -2283,7 +2287,7 @@ var Uivisor = class {
     const liveW = typeof window !== "undefined" ? window.innerWidth : 0;
     const detected = sys.name === "detected" ? "" : " (defaults)";
     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.`;
+    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. */

package/package.json

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