uivisor 0.1.5 → 0.1.6

package/dist/overlay/index.js

@@ -632,8 +632,12 @@ function nearestToken(ds, category, target) {
   const list = ds.byCategory[category];
   if (!list || !list.length) return null;
   if (target.value != null) {
-    const norm = (s) => s.replace(/\s+/g, "").toLowerCase();
-    const hit = list.find((t) => norm(t.value) === norm(target.value));
+    const norm = (s) => {
+      const t = s.trim();
+      return (rgbToHex(t) || t).replace(/\s+/g, "").toLowerCase();
+    };
+    const want = norm(target.value);
+    const hit = list.find((t) => norm(t.value) === want);
     if (hit) return { token: hit, exact: true };
   }
   if (target.px != null && list.some((t) => t.px != null)) {
@@ -1173,6 +1177,12 @@ var CSS = (
 .uiv-ctl select.uiv-tokensel:hover { border-color: #6366f1; color: #fff; }
 .uiv-ctl select.uiv-tokensel:focus { border-color: #818cf8; }
 .uiv-ctl select.uiv-tokensel.changed { border-color: #4ade80; color: #86efac; }
+.uiv-swatches { display: flex; flex-wrap: wrap; gap: 5px; }
+.uiv-swatch { width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
+  border: 1px solid rgba(255,255,255,0.18); padding: 0; outline: none;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
+.uiv-swatch:hover { transform: scale(1.12); border-color: #fff; }
+.uiv-swatch.on { box-shadow: 0 0 0 2px #18181b, 0 0 0 3.5px #4ade80; border-color: #4ade80; }
 
 /* ---- current-styles readout ---- */
 .uiv-readout { display: flex; flex-direction: column; gap: 3px; }
@@ -1181,6 +1191,13 @@ 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;
+  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.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; }
 
@@ -1293,9 +1310,11 @@ var Uivisor = class {
     /** Undo / redo stacks of full edit-state snapshots. */
     this.undoStack = [];
     this.redoStack = [];
-    /** Cached live computed-style for the selected element (invalidated on reselect). */
+    /** Cached live computed-style for the selected element (invalidated each render). */
     this._cs = null;
     this._csEl = null;
+    /** Per-render memo of authored longhands per element (for the styles readout). */
+    this._matched = null;
     /** Cached project breakpoint system (detected from CSS), refreshed until found. */
     this._bp = null;
     /** Cached project design system (detected from CSS variables), refreshed until found. */
@@ -1687,7 +1706,9 @@ var Uivisor = class {
     const el = this.selected;
     const st = this.st();
     if (!el || !st) return "";
-    return el.style.getPropertyValue(css) || this.computedVal(css) || st.original[css] || "";
+    const inline = el.style.getPropertyValue(css);
+    if (inline && !inline.includes("var(")) return inline;
+    return this.computedVal(css) || st.original[css] || "";
   }
   liveNum(css) {
     const v = this.liveVal(css).trim();
@@ -1761,7 +1782,7 @@ var Uivisor = class {
     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.after.computed);
+      if (c) for (const e of targets) applyOverride(e, css, c.live ?? c.after.computed);
     }
     this.reposition();
   }
@@ -1786,20 +1807,22 @@ var Uivisor = class {
     }
     this.renderBody();
   }
-  /** Apply a design-system token to a property: set its resolved value live and
-   *  annotate the recorded change so the prompt asks the agent for the token. */
+  /** Apply a design-system token to a property. The LIVE override is `var(--token)`
+   *  so a responsive token keeps adapting as you move across breakpoints; the
+   *  recorded value shows the token's value, tagged so the prompt asks for the token. */
   applyToken(css, token) {
     this.pushHistory();
-    this.liveSet([css], token.value);
-    this.recordProps([css]);
+    const live = `var(${token.cssVar})`;
+    this.liveSet([css], live);
     const st = this.st();
     if (!st) return;
     const scope = this.activeScope();
-    const ch = st.record.changes.find((c) => c.property === css && c.breakpoint === scope.name);
-    if (ch) {
-      ch.after.designToken = token.cssVar;
-      ch.after.token = st.record.styling.primaryMechanism === "tailwind" ? this.dsUtility(css, token) : null;
-    }
+    st.applied.add(css);
+    const change = buildChange(css, st.original[css], token.value, scope);
+    change.live = live;
+    change.after.designToken = token.cssVar;
+    change.after.token = st.record.styling.primaryMechanism === "tailwind" ? this.dsUtility(css, token) : null;
+    this.setChange(st.record, change);
     this.renderBody();
   }
   revertProps(cssList) {
@@ -1863,6 +1886,9 @@ var Uivisor = class {
   }
   // ---- rendering ----
   renderBody() {
+    this._cs = null;
+    this._csEl = null;
+    this._matched = null;
     const body = this.q(".uiv-body");
     if (!this.selected) {
       body.innerHTML = `
@@ -1899,7 +1925,72 @@ var Uivisor = class {
     const cats = Object.keys(ds.byCategory).map((c) => `${ds.byCategory[c].length} ${c}`).join(" \xB7 ");
     return `<div class="uiv-dsbar" title="${escapeAttr(cats)}">\u25C6 Design system \xB7 ${ds.tokens.length} tokens detected</div>`;
   }
-  /** Read-only readout of the element's actual current styles — so you don't guess. */
+  /** Longhand properties an authoring rule (or non-uivisor inline) sets on `el`.
+   *  Reimplements getMatchedCSSRules over same-origin sheets (incl. matching
+   *  @media), so we can tell "set in the project's CSS" from "browser default". */
+  matchedProps(el) {
+    const cache = this._matched ||= /* @__PURE__ */ new Map();
+    const cached = cache.get(el);
+    if (cached) return cached;
+    const out = /* @__PURE__ */ new Set();
+    const he = el;
+    const applied = el === this.selected ? this.st()?.applied ?? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set();
+    if (he.style) for (let i = 0; i < he.style.length; i++) {
+      const p = he.style[i];
+      if (!applied.has(p)) out.add(p);
+    }
+    const win = el.ownerDocument.defaultView || window;
+    const walk = (rules) => {
+      for (let i = 0; i < rules.length; i++) {
+        const r = rules[i];
+        if (r.selectorText && r.style) {
+          let m = false;
+          try {
+            m = el.matches(r.selectorText);
+          } catch {
+            m = false;
+          }
+          if (m) for (let j = 0; j < r.style.length; j++) out.add(r.style[j]);
+        } else if (r.media && r.cssRules) {
+          let ok = true;
+          try {
+            ok = win.matchMedia(r.media.mediaText).matches;
+          } catch {
+            ok = true;
+          }
+          if (ok) walk(r.cssRules);
+        } else if (r.cssRules) {
+          walk(r.cssRules);
+        }
+      }
+    };
+    const sheets = el.ownerDocument.styleSheets;
+    for (let i = 0; i < sheets.length; i++) {
+      try {
+        walk(sheets[i].cssRules);
+      } catch {
+      }
+    }
+    cache.set(el, out);
+    return out;
+  }
+  /** 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) {
+    let node = this.selected;
+    while (node) {
+      const set = this.matchedProps(node);
+      if (props.some((p) => set.has(p))) return true;
+      node = inherit ? node.parentElement : null;
+    }
+    return false;
+  }
+  /**
+   * Read-only readout of the element's ACTUAL current styles, three-state coloured:
+   *   white = authored in the project CSS · green = edited in uivisor ·
+   *   grey  = browser-computed/auto (e.g. a width a flex item derived, a default).
+   * Comprehensive + context-aware (flex/grid/position rows only when relevant).
+   */
   currentStylesHtml() {
     const el = this.selected;
     if (!el) return "";
@@ -1915,47 +2006,75 @@ var Uivisor = class {
       const h = hex(v);
       return /^#|rgb/.test(h) ? `<span class="uiv-sw" style="background:${h}"></span>${h}` : h;
     };
-    const box = (prefix) => {
-      const t = g(`${prefix}-top`);
-      const r = g(`${prefix}-right`);
-      const b = g(`${prefix}-bottom`);
-      const l = g(`${prefix}-left`);
+    const sides = (parts) => {
+      const [t, r, b, l] = parts.map(g);
       if (t === r && r === b && b === l) return t;
       if (t === b && r === l) return `${t} ${r}`;
       return `${t} ${r} ${b} ${l}`;
     };
+    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 changed = (props) => props.some((p) => changedSet.has(p));
-    const px4 = (pre) => [`${pre}-top`, `${pre}-right`, `${pre}-bottom`, `${pre}-left`];
+    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 = []) => {
-      if (v) rows.push({ k, v, edited: changed(props) });
+    const add = (k, v, props, inherit = false) => {
+      if (v !== "" && v != null) rows.push({ k, v, cls: stateCls(props, inherit) });
     };
-    add("display", g("display"));
-    add("size", `${Math.round(parseFloat(g("width")) || 0)} \xD7 ${Math.round(parseFloat(g("height")) || 0)}`);
-    const pad = box("padding");
-    if (pad && pad !== "0px") add("padding", pad, px4("padding"));
-    const mar = box("margin");
-    if (mar && mar !== "0px") add("margin", mar, px4("margin"));
-    if (/flex|grid/.test(g("display"))) {
+    const disp = g("display");
+    add("display", disp, ["display"]);
+    const pos = g("position");
+    if (pos && pos !== "static") {
+      add("position", pos, ["position"]);
+      const inset = ["top", "right", "bottom", "left"].filter((s) => g(s) !== "auto").map((s) => `${s[0]} ${g(s)}`).join("  ");
+      if (inset) add("inset", inset, ["top", "right", "bottom", "left"]);
+    }
+    add("width", `${Math.round(parseFloat(g("width")) || 0)}px`, ["width"]);
+    add("height", `${Math.round(parseFloat(g("height")) || 0)}px`, ["height"]);
+    const maxw = g("max-width");
+    if (maxw && maxw !== "none") add("max-w", maxw, ["max-width"]);
+    const minh = g("min-height");
+    if (minh && minh !== "0px" && minh !== "auto") add("min-h", minh, ["min-height"]);
+    if (/flex|grid/.test(disp)) {
+      if (disp.includes("flex")) add("direction", g("flex-direction"), ["flex-direction"]);
+      add("justify", g("justify-content"), ["justify-content"]);
+      add("align", g("align-items"), ["align-items"]);
+      if (disp.includes("flex")) {
+        const w = g("flex-wrap");
+        if (w && w !== "nowrap") add("wrap", w, ["flex-wrap"]);
+      }
+      if (disp.includes("grid")) {
+        const c = g("grid-template-columns");
+        if (c && c !== "none") add("grid-cols", clip(c), ["grid-template-columns"]);
+      }
       const gap = g("gap");
-      if (gap && gap !== "normal" && gap !== "0px") add("gap", gap, ["gap"]);
+      if (gap && gap !== "normal") add("gap", gap, ["gap", "row-gap", "column-gap"]);
     }
-    add("font", `${g("font-size")} \xB7 ${g("font-weight")} \xB7 lh ${g("line-height")}`, [
-      "font-size",
-      "font-weight",
-      "line-height"
-    ]);
-    const ls = g("letter-spacing");
-    if (ls && ls !== "normal") add("tracking", ls, ["letter-spacing"]);
-    add("color", swatch(g("color")), ["color"]);
-    const bg = g("background-color");
-    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent")
-      add("background", swatch(bg), ["background-color"]);
+    let parentDisp = "";
+    try {
+      if (el.parentElement) parentDisp = getComputedStyle(el.parentElement).display;
+    } catch {
+    }
+    if (/flex|grid/.test(parentDisp)) {
+      add("flex", `${g("flex-grow")} ${g("flex-shrink")} ${g("flex-basis")}`, ["flex-grow", "flex-shrink", "flex-basis"]);
+      const as = g("align-self");
+      if (as && as !== "auto" && as !== "normal") add("self", as, ["align-self"]);
+    }
+    const pad = sides(px4("padding"));
+    if (pad && pad !== "0px") add("padding", pad, px4("padding"));
+    const mar = sides(px4("margin"));
+    if (mar && mar !== "0px") add("margin", mar, px4("margin"));
     const bw = g("border-top-width");
     if (bw && parseFloat(bw) > 0)
-      add("border", `${bw} ${g("border-top-style")} ${hex(g("border-top-color"))}`, px4("border").map((p) => `${p}-width`));
-    const br = g("border-radius");
+      add("border", `${bw} ${g("border-top-style")} ${swatch(g("border-top-color"))}`, px4("border", "-width"));
+    const br = sides([
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius"
+    ]);
     if (br && br !== "0px")
       add("radius", br, [
         "border-radius",
@@ -1964,11 +2083,35 @@ var Uivisor = class {
         "border-bottom-right-radius",
         "border-bottom-left-radius"
       ]);
-    if (g("box-shadow") !== "none" && g("box-shadow")) add("shadow", "yes");
+    if (this.context(el).hasText) {
+      add("font-size", g("font-size"), ["font-size"], true);
+      add("weight", g("font-weight"), ["font-weight"], true);
+      add("line", g("line-height"), ["line-height"], true);
+      const ls = g("letter-spacing");
+      if (ls && ls !== "normal") add("tracking", ls, ["letter-spacing"], true);
+      add("color", swatch(g("color")), ["color"], true);
+      const ta = g("text-align");
+      if (ta && ta !== "start" && ta !== "left") add("text-align", ta, ["text-align"], true);
+    }
+    const bg = g("background-color");
+    if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") add("background", swatch(bg), ["background-color"]);
+    const bgi = g("background-image");
+    if (bgi && bgi !== "none") add("bg-image", clip(bgi, 26), ["background-image"]);
+    const sh = g("box-shadow");
+    if (sh && sh !== "none") add("shadow", clip(sh, 26), ["box-shadow"]);
     const op = g("opacity");
-    if (op && parseFloat(op) < 1) add("opacity", op);
+    if (op && parseFloat(op) < 1) add("opacity", op, ["opacity"]);
+    const ov = g("overflow");
+    if (ov && ov !== "visible") add("overflow", ov, ["overflow", "overflow-x", "overflow-y"]);
+    const z = g("z-index");
+    if (z && z !== "auto") add("z-index", z, ["z-index"]);
+    const tr = g("transform");
+    if (tr && tr !== "none") add("transform", clip(tr, 22), ["transform"]);
     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("");
+    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("");
     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. */
@@ -2117,6 +2260,13 @@ var Uivisor = class {
     const edited = this.st()?.record.changes.some(
       (c) => c.property === css && c.after.designToken
     );
+    if (cat === "color") {
+      const swatches = list.map((t) => {
+        const on = near?.exact && near.token.cssVar === t.cssVar;
+        return `<button class="uiv-swatch${on ? " on" : ""}" data-css="${css}" data-var="${escapeAttr(t.cssVar)}" title="${escapeAttr(`${t.name} \xB7 ${t.value}`)}" style="background:${escapeAttr(t.value)}"></button>`;
+      }).join("");
+      return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${label}</span><div class="cfield uiv-swatches">${swatches}</div><span></span></div>`;
+    }
     const head = `<option value="">${near && !near.exact ? `\u2248 ${escapeHtml(near.token.name)} \xB7 pick token` : "\u2014 pick token \u2014"}</option>`;
     const opts = list.map(
       (t) => `<option value="${escapeAttr(t.cssVar)}"${near?.exact && near.token.cssVar === t.cssVar ? " selected" : ""}>${escapeHtml(`${t.name} \xB7 ${t.value}`)}</option>`
@@ -2218,6 +2368,15 @@ var Uivisor = class {
         if (token) this.applyToken(css, token);
       });
     });
+    root.querySelectorAll(".uiv-swatch").forEach((node) => {
+      const btn = node;
+      const css = btn.getAttribute("data-css");
+      const cssVar = btn.getAttribute("data-var");
+      btn.addEventListener("click", () => {
+        const token = this.designSystem().tokens.find((t) => t.cssVar === cssVar);
+        if (token) this.applyToken(css, token);
+      });
+    });
     root.querySelectorAll(".uiv-expand").forEach((node) => {
       const btn = node;
       const key = btn.getAttribute("data-key");
@@ -2364,7 +2523,8 @@ var Uivisor = class {
     const loc = id.source.confidence !== "none" ? `${id.source.file}:${id.source.line}` : id.componentName || "";
     const chgs = collapseChanges(r.changes).map((c) => {
       const bp = c.breakpoint === "base" ? "" : `<span class="bp">${c.breakpoint}:</span> `;
-      const tok = c.after.token ? ` <span class="tok">${escapeHtml(c.after.token)}</span>` : "";
+      const tokLabel = c.after.token || (c.after.designToken ? `var(${c.after.designToken})` : "");
+      const tok = tokLabel ? ` <span class="tok">${escapeHtml(tokLabel)}</span>` : "";
       return `<div class="uiv-jchg">${bp}${c.property}: ${c.before.computed} \u2192 ${c.after.computed}${tok}</div>`;
     }).join("");
     return `<div class="uiv-jitem"><div class="jhead"><span class="jel">&lt;${id.tagName}&gt;</span><span class="jloc">${escapeHtml(loc)}</span></div>${chgs}</div>`;
@@ -2449,7 +2609,7 @@ var Uivisor = class {
       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);
+        for (const e of targets) applyOverride(e, c.property, c.live ?? c.after.computed);
         st.applied.add(c.property);
       }
     }

package/package.json

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