uivisor 0.1.2 → 0.1.4

package/dist/next/index.cjs

@@ -96,12 +96,13 @@ function withUivisor(nextConfig = {}, options = {}) {
   }
   if (useTurbopack) {
     const ld = [{ loader: "uivisor/next/loader", options: { attr } }];
+    const major = nextMajor();
+    const modern = major === 0 || major >= 15;
     const rules = {
-      "*.tsx": { loaders: ld, as: "*.tsx" },
-      "*.jsx": { loaders: ld, as: "*.jsx" }
+      "*.tsx": modern ? { loaders: ld } : { loaders: ld, as: "*.tsx" },
+      "*.jsx": modern ? { loaders: ld } : { loaders: ld, as: "*.jsx" }
     };
-    const major = nextMajor();
-    if (major === 0 || major >= 15) {
+    if (modern) {
       out.turbopack = {
         ...nextConfig.turbopack,
         rules: { ...nextConfig.turbopack?.rules ?? {}, ...rules }

package/dist/next/index.js

@@ -68,12 +68,13 @@ function withUivisor(nextConfig = {}, options = {}) {
   }
   if (useTurbopack) {
     const ld = [{ loader: "uivisor/next/loader", options: { attr } }];
+    const major = nextMajor();
+    const modern = major === 0 || major >= 15;
     const rules = {
-      "*.tsx": { loaders: ld, as: "*.tsx" },
-      "*.jsx": { loaders: ld, as: "*.jsx" }
+      "*.tsx": modern ? { loaders: ld } : { loaders: ld, as: "*.tsx" },
+      "*.jsx": modern ? { loaders: ld } : { loaders: ld, as: "*.jsx" }
     };
-    const major = nextMajor();
-    if (major === 0 || major >= 15) {
+    if (modern) {
       out.turbopack = {
         ...nextConfig.turbopack,
         rules: { ...nextConfig.turbopack?.rules ?? {}, ...rules }

package/dist/overlay/index.js

@@ -253,6 +253,62 @@ function suggestUtility(property, value) {
     if (!hex) return null;
     return property === "color" ? `text-[${hex}]` : `bg-[${hex}]`;
   }
+  const LAYOUT = {
+    display: {
+      block: "block",
+      "inline-block": "inline-block",
+      inline: "inline",
+      flex: "flex",
+      "inline-flex": "inline-flex",
+      grid: "grid",
+      "inline-grid": "inline-grid",
+      none: "hidden"
+    },
+    "flex-direction": {
+      row: "flex-row",
+      "row-reverse": "flex-row-reverse",
+      column: "flex-col",
+      "column-reverse": "flex-col-reverse"
+    },
+    "flex-wrap": { nowrap: "flex-nowrap", wrap: "flex-wrap", "wrap-reverse": "flex-wrap-reverse" },
+    "justify-content": {
+      normal: "justify-normal",
+      "flex-start": "justify-start",
+      center: "justify-center",
+      "flex-end": "justify-end",
+      "space-between": "justify-between",
+      "space-around": "justify-around",
+      "space-evenly": "justify-evenly"
+    },
+    "align-items": {
+      normal: "items-normal",
+      stretch: "items-stretch",
+      "flex-start": "items-start",
+      center: "items-center",
+      "flex-end": "items-end",
+      baseline: "items-baseline"
+    }
+  };
+  if (LAYOUT[property]) return LAYOUT[property][value.trim()] ?? null;
+  const SIZE_PREFIX = {
+    width: "w",
+    height: "h",
+    "min-width": "min-w",
+    "max-width": "max-w",
+    "min-height": "min-h",
+    "max-height": "max-h"
+  };
+  if (SIZE_PREFIX[property]) {
+    const pre = SIZE_PREFIX[property];
+    const t = value.trim();
+    if (t === "auto") return `${pre}-auto`;
+    if (t === "100%") return `${pre}-full`;
+    const n = px(t);
+    if (n == null) return `${pre}-[${t}]`;
+    const scale = n / 4;
+    if (Number.isInteger(scale) && scale >= 0 && scale <= 96) return `${pre}-${scale}`;
+    return `${pre}-[${n}px]`;
+  }
   return null;
 }
 
@@ -306,9 +362,61 @@ var ICONS = {
   line: sv('<path d="M2.5 3 H13.5 M2.5 8 H13.5 M2.5 13 H13.5"/>'),
   tracking: sv('<path d="M5 4 V12 M11 4 V12"/><path d="M2.5 8 H4 M1.8 6.6 L0.8 8 L1.8 9.4"/><path d="M13.5 8 H12 M14.2 6.6 L15.2 8 L14.2 9.4"/>'),
   expand: sv('<rect x="2" y="2" width="4.5" height="4.5" rx="1"/><rect x="9.5" y="2" width="4.5" height="4.5" rx="1"/><rect x="2" y="9.5" width="4.5" height="4.5" rx="1"/><rect x="9.5" y="9.5" width="4.5" height="4.5" rx="1"/>'),
-  collapse: sv('<rect x="3" y="3" width="10" height="10" rx="2"/>')
+  collapse: sv('<rect x="3" y="3" width="10" height="10" rx="2"/>'),
+  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"/>')
 };
 var SECTIONS = [
+  {
+    title: "Layout",
+    controls: [
+      {
+        kind: "select",
+        css: "display",
+        label: "Display",
+        options: ["block", "inline-block", "inline", "flex", "inline-flex", "grid", "inline-grid", "none"]
+      },
+      {
+        kind: "select",
+        css: "flex-direction",
+        label: "Direction",
+        options: ["row", "row-reverse", "column", "column-reverse"],
+        requires: "flexgrid"
+      },
+      {
+        kind: "select",
+        css: "justify-content",
+        label: "Justify",
+        options: ["normal", "flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"],
+        requires: "flexgrid"
+      },
+      {
+        kind: "select",
+        css: "align-items",
+        label: "Align",
+        options: ["normal", "stretch", "flex-start", "center", "flex-end", "baseline"],
+        requires: "flexgrid"
+      },
+      {
+        kind: "select",
+        css: "flex-wrap",
+        label: "Wrap",
+        options: ["nowrap", "wrap", "wrap-reverse"],
+        requires: "flexgrid"
+      }
+    ]
+  },
+  {
+    title: "Size",
+    controls: [
+      { kind: "len", css: "width", label: "Width", icon: ICONS.width },
+      { kind: "len", css: "height", label: "Height", icon: ICONS.height },
+      { kind: "len", css: "max-width", label: "Max W", icon: ICONS.width },
+      { kind: "len", css: "min-height", label: "Min H", icon: ICONS.height }
+    ]
+  },
   {
     title: "Spacing",
     controls: [
@@ -909,6 +1017,17 @@ var CSS = (
   letter-spacing: .5px; color: #8b8b94; font-weight: 600; }
 .uiv-sec + .uiv-sec .uiv-sectitle { margin-top: 0; }
 
+/* collapsible (accordion) section header */
+.uiv-acc { display: flex; align-items: center; gap: 5px; width: 100%;
+  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
+  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
+  color: #8b8b94; font-weight: 600; }
+.uiv-acc:hover { color: #c7d2fe; }
+.uiv-acc.collapsed { margin-bottom: 0; }
+.uiv-chev { display: inline-flex; color: #6b6b73; transition: transform .15s ease; }
+.uiv-acc:hover .uiv-chev { color: #818cf8; }
+.uiv-acc:not(.collapsed) .uiv-chev { transform: rotate(90deg); }
+
 .uiv-ctl { display: grid; grid-template-columns: 70px 1fr 26px; gap: 8px;
   align-items: center; margin-bottom: 7px; }
 .uiv-ctl:last-child { margin-bottom: 0; }
@@ -997,6 +1116,14 @@ var Uivisor = class {
     this.selected = null;
     this.states = /* @__PURE__ */ new Map();
     this.expanded = /* @__PURE__ */ new Set();
+    /** Section titles collapsed in the accordion (per session). */
+    this.collapsedSecs = /* @__PURE__ */ new Set();
+    /** Undo / redo stacks of full edit-state snapshots. */
+    this.undoStack = [];
+    this.redoStack = [];
+    /** Cached live computed-style for the selected element (invalidated on reselect). */
+    this._cs = null;
+    this._csEl = null;
     /** Cached project breakpoint system (detected from CSS), refreshed until found. */
     this._bp = null;
     // responsive (virtual screen) mode
@@ -1032,7 +1159,20 @@ var Uivisor = class {
       if (e.altKey && (e.key === "u" || e.key === "U")) {
         e.preventDefault();
         this.toggle();
-      } else if (e.key === "Escape" && this.enabled) {
+        return;
+      }
+      if (!this.enabled) return;
+      if ((e.metaKey || e.ctrlKey) && (e.key === "z" || e.key === "Z")) {
+        e.preventDefault();
+        e.shiftKey ? this.redo() : this.undo();
+        return;
+      }
+      if ((e.metaKey || e.ctrlKey) && (e.key === "y" || e.key === "Y")) {
+        e.preventDefault();
+        this.redo();
+        return;
+      }
+      if (e.key === "Escape") {
         if (this.selected) this.select(null);
         else this.toggle(false);
       }
@@ -1270,7 +1410,6 @@ var Uivisor = class {
       const up = () => {
         handle.removeEventListener("pointermove", move);
         handle.removeEventListener("pointerup", up);
-        this.retagSelected();
         this.renderBody();
       };
       handle.addEventListener("pointermove", move);
@@ -1313,11 +1452,26 @@ var Uivisor = class {
   st() {
     return this.selected ? this.states.get(this.selected) ?? null : null;
   }
+  /** Live computed value of the selected element — reflects the CURRENT breakpoint
+   *  (the virtual screen's width / real window), unlike the at-selection snapshot. */
+  computedVal(css) {
+    const el = this.selected;
+    if (!el) return "";
+    if (this._csEl !== el || !this._cs) {
+      try {
+        this._cs = getComputedStyle(el);
+        this._csEl = el;
+      } catch {
+        return "";
+      }
+    }
+    return this._cs.getPropertyValue(css).trim();
+  }
   liveVal(css) {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return "";
-    return el.style.getPropertyValue(css) || st.original[css] || "";
+    return el.style.getPropertyValue(css) || this.computedVal(css) || st.original[css] || "";
   }
   liveNum(css) {
     const v = this.liveVal(css).trim();
@@ -1403,16 +1557,6 @@ var Uivisor = class {
     if (this.responsive) return activeBreakpoint(this.frameWidth, sys);
     return currentBreakpoint(sys);
   }
-  /** Re-tag the selected element's already-recorded changes to the current scope. */
-  retagSelected() {
-    const st = this.st();
-    if (!st) return;
-    const scope = this.activeScope();
-    for (const c of st.record.changes) {
-      c.breakpoint = scope.name;
-      c.breakpointPx = scope.minWidth;
-    }
-  }
   recordProps(cssList) {
     const el = this.selected;
     const st = this.st();
@@ -1492,7 +1636,7 @@ var Uivisor = class {
       body.innerHTML = `
         ${this.breakpointBarHtml()}
         <div class="uiv-empty">Click any element ${this.responsive ? "in the frame" : "on the page"} to select it.</div>
-        <div class="uiv-hint">Alt+U toggles \xB7 Esc deselects. Tweaks stay in the browser \u2014 nothing is written to your code.</div>
+        <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()}
       `;
       this.bindControls();
@@ -1583,8 +1727,9 @@ var Uivisor = class {
     if (g("box-shadow") !== "none" && g("box-shadow")) add("shadow", "yes");
     const op = g("opacity");
     if (op && parseFloat(op) < 1) add("opacity", op);
-    const items = rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv${r.edited ? " changed" : ""}">${r.v}</span></div>`).join("");
-    return `<div class="uiv-sec"><div class="uiv-sectitle">Current styles</div><div class="uiv-readout">${items}</div></div>`;
+    const collapsed = this.collapsedSecs.has("Current styles");
+    const items = collapsed ? "" : rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv${r.edited ? " changed" : ""}">${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() {
@@ -1640,10 +1785,15 @@ var Uivisor = class {
     return SECTIONS.map((sec) => {
       const controls = sec.controls.filter((c) => this.relevant(c, ctx));
       if (!controls.length) return "";
-      const rows = controls.map((c) => this.controlRow(c)).join("");
-      return `<div class="uiv-sec"><div class="uiv-sectitle">${sec.title}</div>${rows}</div>`;
+      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("");
   }
+  /** A collapsible section header. Clicking it hides/shows the section's controls. */
+  accordionTitle(title) {
+    const collapsed = this.collapsedSecs.has(title);
+    return `<button class="uiv-sectitle uiv-acc${collapsed ? " collapsed" : ""}" data-sec="${escapeAttr(title)}"><span class="uiv-chev">${ICONS.chevron}</span>${title}</button>`;
+  }
   numField(cssAttr, value, handle, changed, isSide, placeholder) {
     return `<div class="uiv-num${changed ? " changed" : ""}" data-css="${cssAttr}"><span class="uiv-scrub${isSide ? " txt" : ""}" title="Drag to change">${handle}</span><input type="number" value="${escapeAttr(value)}" placeholder="${escapeAttr(placeholder)}"></div>`;
   }
@@ -1745,7 +1895,8 @@ var Uivisor = class {
     }
     if (c.kind === "select") {
       const cur = this.selectCurrent(c.css);
-      const opts = c.options.map((o) => `<option value="${o}"${o === cur ? " selected" : ""}>${o}</option>`).join("");
+      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>`;
     }
     const val = toHexInput(this.liveVal(c.css));
@@ -1758,7 +1909,10 @@ var Uivisor = class {
       const cssList = (box.getAttribute("data-css") || "").split(",").filter(Boolean);
       const input = box.querySelector("input");
       const handle = box.querySelector(".uiv-scrub");
-      input.addEventListener("change", () => this.commitNumeric(cssList, input.value));
+      input.addEventListener("change", () => {
+        this.pushHistory();
+        this.commitNumeric(cssList, input.value);
+      });
       input.addEventListener("keydown", (e) => {
         if (e.key === "Enter") input.blur();
       });
@@ -1770,7 +1924,10 @@ var Uivisor = class {
       const input = box.querySelector("input");
       const unitSel = box.querySelector(".uiv-unit");
       const handle = box.querySelector(".uiv-scrub");
-      input.addEventListener("change", () => this.onDimInput(css, box));
+      input.addEventListener("change", () => {
+        this.pushHistory();
+        this.onDimInput(css, box);
+      });
       input.addEventListener("keydown", (e) => {
         if (e.key === "Enter") input.blur();
       });
@@ -1780,12 +1937,18 @@ var Uivisor = class {
     root.querySelectorAll(".uiv-color").forEach((node) => {
       const input = node;
       const css = input.getAttribute("data-css");
-      input.addEventListener("change", () => this.commitValue([css], input.value));
+      input.addEventListener("change", () => {
+        this.pushHistory();
+        this.commitValue([css], input.value);
+      });
     });
     root.querySelectorAll(".uiv-sel").forEach((node) => {
       const sel = node;
       const css = sel.getAttribute("data-css");
-      sel.addEventListener("change", () => this.commitValue([css], sel.value));
+      sel.addEventListener("change", () => {
+        this.pushHistory();
+        this.commitValue([css], sel.value);
+      });
     });
     root.querySelectorAll(".uiv-expand").forEach((node) => {
       const btn = node;
@@ -1796,6 +1959,15 @@ var Uivisor = class {
         this.renderBody();
       });
     });
+    root.querySelectorAll(".uiv-acc").forEach((node) => {
+      const btn = node;
+      const sec = btn.getAttribute("data-sec");
+      btn.addEventListener("click", () => {
+        if (this.collapsedSecs.has(sec)) this.collapsedSecs.delete(sec);
+        else this.collapsedSecs.add(sec);
+        this.renderBody();
+      });
+    });
     root.querySelectorAll(".uiv-chip").forEach((node) => {
       const btn = node;
       const bp = btn.getAttribute("data-bp");
@@ -1811,7 +1983,6 @@ var Uivisor = class {
           this.toggleResponsive(true);
         } else {
           this.setFrameWidth(w);
-          this.retagSelected();
           this.renderBody();
         }
       });
@@ -1821,6 +1992,7 @@ var Uivisor = class {
       const target = btn.getAttribute("data-target");
       btn.addEventListener("click", () => {
         const st = this.st();
+        if (st && st.record.target !== target) this.pushHistory();
         if (st) st.record.target = target;
         this.reapplyForTarget();
         this.renderBody();
@@ -1832,7 +2004,9 @@ var Uivisor = class {
         const st = this.st();
         if (!st) return;
         const name = input.value.trim().replace(/^\./, "").replace(/\s+/g, "-");
-        st.record.target = name ? `new:${name}` : "element";
+        const next = name ? `new:${name}` : "element";
+        if (st.record.target !== next) this.pushHistory();
+        st.record.target = next;
         this.renderBody();
       });
       input.addEventListener("keydown", (e) => {
@@ -1849,7 +2023,12 @@ var Uivisor = class {
         handle.setPointerCapture(e.pointerId);
       } catch {
       }
+      let pushed = false;
       const move = (ev) => {
+        if (!pushed) {
+          this.pushHistory();
+          pushed = true;
+        }
         const dx = ev.clientX - startX;
         let nv = start2 + Math.round(dx);
         if (ev.shiftKey) nv = Math.round(nv / 10) * 10;
@@ -1879,7 +2058,12 @@ var Uivisor = class {
       } catch {
       }
       const stepFor = (u) => u === "" ? 0.1 : u === "em" ? 0.01 : 1;
+      let pushed = false;
       const move = (ev) => {
+        if (!pushed) {
+          this.pushHistory();
+          pushed = true;
+        }
         const u = unitSel.value;
         const step = stepFor(u) * (ev.shiftKey ? 10 : 1);
         const dec = step < 0.1 ? 2 : step < 1 ? 1 : 0;
@@ -1945,6 +2129,7 @@ var Uivisor = class {
     if (!el) return;
     const st = this.states.get(el);
     if (!st) return;
+    if (st.record.changes.length) this.pushHistory();
     const sibs = this.siblingsOf(el);
     for (const css of st.applied) for (const e of sibs) removeOverride(e, css);
     st.applied.clear();
@@ -1953,6 +2138,7 @@ var Uivisor = class {
     this.renderBody();
   }
   clearAll() {
+    if (this.states.size) this.pushHistory();
     for (const [el, st] of this.states) {
       const sibs = this.siblingsOf(el);
       for (const css of st.applied) for (const e of sibs) removeOverride(e, css);
@@ -1962,6 +2148,59 @@ var Uivisor = class {
     this.reposition();
     this.renderBody();
   }
+  // ---- undo / redo ----
+  /** Deep snapshot of all edit state (element refs kept; data JSON-cloned). */
+  cloneSnap() {
+    const clone = (v) => JSON.parse(JSON.stringify(v));
+    return {
+      selected: this.selected,
+      entries: [...this.states.entries()].map(([el, st]) => ({
+        el,
+        record: clone(st.record),
+        original: { ...st.original },
+        dimUnit: { ...st.dimUnit }
+      }))
+    };
+  }
+  /** Record the current state so the next mutation can be undone. */
+  pushHistory() {
+    this.undoStack.push(this.cloneSnap());
+    if (this.undoStack.length > 100) this.undoStack.shift();
+    this.redoStack = [];
+  }
+  /** Rebuild all edit state from a snapshot and re-apply its live overrides. */
+  applySnap(snap) {
+    const clone = (v) => JSON.parse(JSON.stringify(v));
+    for (const [el, st] of this.states) {
+      const sibs = this.siblingsOf(el);
+      for (const css of st.applied) for (const e of sibs) removeOverride(e, css);
+    }
+    this.states = /* @__PURE__ */ new Map();
+    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.after.computed);
+        st.applied.add(c.property);
+      }
+    }
+    this.selected = snap.selected && this.states.has(snap.selected) ? snap.selected : null;
+    this.reposition();
+    this.renderBody();
+  }
+  undo() {
+    if (!this.undoStack.length) return this.showToast("Nothing to undo");
+    this.redoStack.push(this.cloneSnap());
+    this.applySnap(this.undoStack.pop());
+    this.showToast("Undo \u21A9");
+  }
+  redo() {
+    if (!this.redoStack.length) return this.showToast("Nothing to redo");
+    this.undoStack.push(this.cloneSnap());
+    this.applySnap(this.redoStack.pop());
+    this.showToast("Redo \u21AA");
+  }
   async copy(text) {
     try {
       await navigator.clipboard.writeText(text);

package/package.json

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