uivisor 0.1.4 → 0.1.6

package/dist/overlay/index.js

@@ -542,6 +542,155 @@ var SHORTHAND_SETS = [
   }
 ];
 
+// src/overlay/designtokens.ts
+var COLOR_RE = /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\()/i;
+var LEN_RE = /^-?\d*\.?\d+(px|rem|em)$/i;
+var SHADOW_RE = /\d+px.*(rgba?\(|hsla?\(|#[0-9a-f]{3,8})/i;
+var FONT_STACK_RE = /(sans-serif|serif|monospace|system-ui|,)/i;
+var isColor = (v) => COLOR_RE.test(v.trim());
+var isLen = (v) => LEN_RE.test(v.trim());
+function lenToPx(value, rootPx = 16) {
+  const m = /^(-?\d*\.?\d+)(px|rem|em)$/i.exec(value.trim());
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  const unit = m[2].toLowerCase();
+  if (unit === "px") return n;
+  return n * rootPx;
+}
+var PREFIXES = [
+  { re: /^--font-size-/, cat: "font-size" },
+  { re: /^--fs-/, cat: "font-size" },
+  { re: /^--text-/, cat: "font-size" },
+  // only when value is a length (handled below)
+  { re: /^--leading-/, cat: "line-height" },
+  { re: /^--line-height-/, cat: "line-height" },
+  { re: /^--tracking-/, cat: "letter-spacing" },
+  { re: /^--letter-spacing-/, cat: "letter-spacing" },
+  { re: /^--radius-/, cat: "radius" },
+  { re: /^--rounded-/, cat: "radius" },
+  { re: /^--shadow-/, cat: "shadow" },
+  { re: /^--space-/, cat: "spacing" },
+  { re: /^--spacing-/, cat: "spacing" },
+  { re: /^--gap-/, cat: "spacing" },
+  { re: /^--airy-/, cat: "spacing" },
+  { re: /^--color-/, cat: "color" },
+  { re: /^--bg-/, cat: "color" },
+  { re: /^--border-/, cat: "color" },
+  { re: /^--font-/, cat: "font-family" }
+];
+var FONTSIZE_HINT = /(^|[-_])(fs|font-size|text|headline|title|body|label|display|caption|heading)([-_]|$)/i;
+var SPACING_HINT = /(^|[-_])(space|spacing|gap|airy|inset)([-_]|$)/i;
+function classifyVar(name, value) {
+  const v = value.trim();
+  const n = name.toLowerCase();
+  if (!v) return null;
+  if (n.includes("shadow") || SHADOW_RE.test(v)) return "shadow";
+  if (isColor(v)) return "color";
+  if (FONT_STACK_RE.test(v) && !isLen(v)) {
+    if (n.includes("family") || /^--font(-|$)/.test(n) || FONT_STACK_RE.test(v)) return "font-family";
+  }
+  if (isLen(v)) {
+    if (n.includes("radius") || n.includes("rounded")) return "radius";
+    if (n.includes("leading") || n.includes("line-height")) return "line-height";
+    if (n.includes("tracking") || n.includes("letter")) return "letter-spacing";
+    if (FONTSIZE_HINT.test(n)) return "font-size";
+    if (SPACING_HINT.test(n)) return "spacing";
+    return null;
+  }
+  return null;
+}
+function tokenName(cssVar, _category) {
+  for (const p of PREFIXES) {
+    if (p.re.test(cssVar)) return cssVar.replace(p.re, "");
+  }
+  return cssVar.replace(/^--/, "");
+}
+function buildDesignSystem(vars, rootPx = 16) {
+  const tokens = [];
+  for (const [cssVar, value] of Object.entries(vars)) {
+    const category = classifyVar(cssVar, value);
+    if (!category) continue;
+    const scalar = category === "font-size" || category === "radius" || category === "spacing";
+    tokens.push({
+      cssVar,
+      name: tokenName(cssVar, category),
+      category,
+      value: value.trim(),
+      px: scalar ? lenToPx(value, rootPx) : null
+    });
+  }
+  const byCategory = {};
+  for (const t of tokens) (byCategory[t.category] ||= []).push(t);
+  for (const cat of Object.keys(byCategory)) {
+    byCategory[cat].sort(
+      (a, b) => a.px != null && b.px != null ? a.px - b.px : a.name.localeCompare(b.name)
+    );
+  }
+  return { tokens, byCategory, source: tokens.length ? "css-vars" : "none" };
+}
+function nearestToken(ds, category, target) {
+  const list = ds.byCategory[category];
+  if (!list || !list.length) return null;
+  if (target.value != null) {
+    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)) {
+    let best = list[0];
+    let bestD = Infinity;
+    for (const t of list) {
+      if (t.px == null) continue;
+      const d = Math.abs(t.px - target.px);
+      if (d < bestD) {
+        bestD = d;
+        best = t;
+      }
+    }
+    return { token: best, exact: bestD < 0.5 };
+  }
+  return null;
+}
+var SCALAR_VAR_SELECTOR = /(^|[\s,>])(:root|html|\[data-theme)/i;
+function detectDesignSystem() {
+  if (typeof document === "undefined") return { tokens: [], byCategory: {}, source: "none" };
+  const names = /* @__PURE__ */ new Set();
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    for (const rule of Array.from(rules)) collectVarNames(rule, names);
+  }
+  const root = document.documentElement;
+  const cs = getComputedStyle(root);
+  const rootPx = parseFloat(cs.fontSize) || 16;
+  const vars = {};
+  for (const name of names) {
+    const resolved = cs.getPropertyValue(name).trim();
+    if (resolved) vars[name] = resolved;
+  }
+  return buildDesignSystem(vars, rootPx);
+}
+function collectVarNames(rule, out) {
+  const style = rule.style;
+  const selector = rule.selectorText;
+  if (style && selector && SCALAR_VAR_SELECTOR.test(selector)) {
+    for (let i = 0; i < style.length; i++) {
+      const prop = style[i];
+      if (prop.startsWith("--")) out.add(prop);
+    }
+  }
+  const inner = rule.cssRules;
+  if (inner) for (const r of Array.from(inner)) collectVarNames(r, out);
+}
+
 // src/overlay/mechanism.ts
 var TW_UTILITY = /^-?(?:p|m|px|py|pt|pr|pb|pl|mx|my|mt|mr|mb|ml|gap|w|h|min-w|max-w|min-h|max-h|text|bg|border|rounded|flex|grid|gap-x|gap-y|items|justify|self|place|font|leading|tracking|space|inline|block|inline-block|hidden|table|absolute|relative|fixed|sticky|static|top|bottom|left|right|inset|z|shadow|opacity|transition|duration|ease|scale|rotate|translate|cursor|overflow|object|aspect|order|col|row|basis|grow|shrink|divide|ring|outline)(?:-|$)/;
 var TW_VARIANT = /^(?:sm|md|lg|xl|2xl|hover|focus|focus-visible|focus-within|active|visited|disabled|dark|group|group-hover|peer|first|last|odd|even|motion-safe|motion-reduce|print|rtl|ltr)::?|^(?:sm|md|lg|xl|2xl|hover|focus|active|disabled|dark|group-hover):/;
@@ -667,6 +816,7 @@ function renderPrompt(records) {
   lines.push("");
   let anyClassTarget = false;
   let anyNewClass = false;
+  let anyDesignToken = false;
   active.forEach((r, i) => {
     const id = r.identity;
     const newClass = r.target?.startsWith("new:") ? r.target.slice(4) : null;
@@ -718,7 +868,15 @@ function renderPrompt(records) {
       const scope = bp === "base" ? "all sizes (base)" : `${bp} breakpoint (\u2265${byBp[bp][0].breakpointPx}px)`;
       lines.push(`- At ${scope}:`);
       for (const c of byBp[bp]) {
-        const suggestion = c.after.token ? `  \u2192 \`${variant(bp, c.after.token)}\`` : "";
+        let suggestion = "";
+        if (c.after.token) {
+          suggestion = `  \u2192 \`${variant(bp, c.after.token)}\``;
+        } else if (c.after.designToken) {
+          const at = bp === "base" ? "" : ` (scope to ${bp})`;
+          suggestion = `  \u2192 use design token \`${c.after.designToken}\` (\`var(${c.after.designToken})\`)${at}`;
+        }
+        if (c.after.designToken || c.after.token && /^(text|bg|border|rounded|shadow)-(?!\[)/.test(c.after.token))
+          anyDesignToken = true;
         lines.push(
           `    - ${c.property}: ${c.before.computed} \u2192 ${c.after.computed}${suggestion}`
         );
@@ -747,6 +905,11 @@ function renderPrompt(records) {
       "- When creating a new class, leave the current classes untouched and add the new class alongside them; pick the styling mechanism the project already uses."
     );
   }
+  if (anyDesignToken) {
+    lines.push(
+      "- Prefer the project DESIGN TOKEN shown for each change (a Tailwind utility like `text-headline-l`, or the CSS variable `var(--\u2026)`) over a hardcoded px/hex value \u2014 these come from the project\u2019s own design system."
+    );
+  }
   return lines.join("\n");
 }
 function renderSpec(records, meta) {
@@ -1002,6 +1165,25 @@ var CSS = (
 .uiv-newclass:focus { border-style: solid; border-color: #6366f1; color: #fff; }
 .uiv-newclass.on { border-style: solid; border-color: #22d3ee; color: #fff; }
 
+/* ---- design-system indicator + token pickers ---- */
+.uiv-dsbar { padding: 7px 12px; border-bottom: 1px solid #27272a;
+  font-size: 10px; font-weight: 600; letter-spacing: .3px; color: #a5b4fc;
+  background: #1e1b4b33; display: flex; align-items: center; gap: 6px; }
+.uiv-tlabel { color: #818cf8 !important; font-size: 10px; }
+.uiv-ctl select.uiv-tokensel {
+  width: 100%; background: #1e1b4b55; border: 1px solid #4338ca; color: #c7d2fe;
+  border-radius: 7px; padding: 6px 7px; font-size: 11px; outline: none;
+  font-family: ui-monospace, monospace; }
+.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; }
 .uiv-rrow { display: grid; grid-template-columns: 70px 1fr; gap: 8px; align-items: center;
@@ -1009,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; }
 
@@ -1121,11 +1310,17 @@ 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. */
+    this._ds = null;
+    /** Memoised Tailwind-utility probes: candidate class → resolved class or null. */
+    this.utilCache = /* @__PURE__ */ new Map();
     // responsive (virtual screen) mode
     this.responsive = false;
     this.frameWidth = 768;
@@ -1201,6 +1396,43 @@ var Uivisor = class {
     if (!this._bp || this._bp.name !== "detected") this._bp = detectBreakpoints();
     return this._bp;
   }
+  /** Project design tokens — re-detect until the CSS variables resolve. */
+  designSystem() {
+    if (!this._ds || this._ds.source === "none") this._ds = detectDesignSystem();
+    return this._ds;
+  }
+  /** Which token category (if any) a CSS property picks tokens from. */
+  dsCategoryFor(css) {
+    if (css === "font-size") return "font-size";
+    if (css === "color" || css === "background-color") return "color";
+    return null;
+  }
+  /** Does a Tailwind utility for this token actually exist in the project CSS?
+   *  Probe a hidden element in the page document and compare the resolved value. */
+  dsUtility(css, token) {
+    const prefix = css === "background-color" ? "bg" : "text";
+    const cls = `${prefix}-${token.name}`;
+    if (this.utilCache.has(cls)) return this.utilCache.get(cls) ?? null;
+    let res = null;
+    try {
+      const probe = document.createElement("span");
+      probe.className = cls;
+      probe.style.cssText = "position:absolute;left:-99999px;top:0;visibility:hidden";
+      document.body.appendChild(probe);
+      const got = getComputedStyle(probe).getPropertyValue(css).trim();
+      probe.remove();
+      if (token.category === "color") {
+        const a = (rgbToHex(got) || got).toLowerCase();
+        const b = (rgbToHex(token.value) || token.value).toLowerCase();
+        if (a && a === b) res = cls;
+      } else if (token.px != null && Math.abs(parseFloat(got) - token.px) < 0.5) {
+        res = cls;
+      }
+    } catch {
+    }
+    this.utilCache.set(cls, res);
+    return res;
+  }
   mount() {
     this.host = document.createElement("div");
     this.host.id = "uivisor-root";
@@ -1309,7 +1541,10 @@ var Uivisor = class {
       const prev = this._bp;
       this._bp = null;
       const next = this.bpSystem();
-      if (!prev || key(prev) !== key(next)) this.renderBody();
+      const prevDsN = this._ds?.tokens.length ?? -1;
+      this._ds = null;
+      const nextDs = this.designSystem();
+      if (!prev || key(prev) !== key(next) || prevDsN !== nextDs.tokens.length) this.renderBody();
     };
     for (const d of [250, 900, 2200]) window.setTimeout(refresh, d);
   }
@@ -1471,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();
@@ -1545,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();
   }
@@ -1570,6 +1807,24 @@ var Uivisor = class {
     }
     this.renderBody();
   }
+  /** 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();
+    const live = `var(${token.cssVar})`;
+    this.liveSet([css], live);
+    const st = this.st();
+    if (!st) return;
+    const scope = this.activeScope();
+    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) {
     const el = this.selected;
     const st = this.st();
@@ -1631,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 = `
@@ -1651,6 +1909,7 @@ var Uivisor = class {
         <div class="uiv-src">${escapeHtml(src)}</div>
         <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
       </div>
+      ${this.dsIndicatorHtml()}
       ${this.currentStylesHtml()}
       ${this.breakpointBarHtml()}
       ${this.targetHtml(st)}
@@ -1659,7 +1918,79 @@ var Uivisor = class {
     `;
     this.bindControls();
   }
-  /** Read-only readout of the element's actual current styles — so you don't guess. */
+  /** Small indicator: how many design tokens were detected (or a hint if none). */
+  dsIndicatorHtml() {
+    const ds = this.designSystem();
+    if (ds.source === "none") return "";
+    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>`;
+  }
+  /** 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 "";
@@ -1675,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",
@@ -1724,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. */
@@ -1864,6 +2247,32 @@ var Uivisor = class {
     const units = c.units.map((u) => `<option value="${u}"${u === d.unit ? " selected" : ""}>${UNIT_LABELS[u] ?? u}</option>`).join("");
     return `<div class="uiv-ctl"><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>`;
   }
+  /** 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. */
+  tokenRowHtml(css, label) {
+    const cat = this.dsCategoryFor(css);
+    if (!cat) return "";
+    const ds = this.designSystem();
+    const list = ds.byCategory[cat];
+    if (!list || !list.length) return "";
+    const target = cat === "font-size" ? { px: this.currentPx(css) ?? void 0 } : { value: this.computedVal(css) };
+    const near = nearestToken(ds, cat, target);
+    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>`
+    ).join("");
+    return `<div class="uiv-ctl"><span class="clabel uiv-tlabel">${label}</span><div class="cfield"><select class="uiv-sel uiv-tokensel${edited ? " changed" : ""}" data-css="${css}">${head}${opts}</select></div><span></span></div>`;
+  }
   controlRow(c) {
     if (c.kind === "box") {
       const cssList = c.sides.map((s) => s.css);
@@ -1888,7 +2297,7 @@ var Uivisor = class {
     }
     if (c.kind === "len") {
       const v = this.liveNum(c.css);
-      return `<div class="uiv-ctl"><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>`;
+      return `<div class="uiv-ctl"><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");
     }
     if (c.kind === "dim") {
       return this.dimField(c);
@@ -1900,7 +2309,7 @@ var Uivisor = class {
       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));
-    return `<div class="uiv-ctl"><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>`;
+    return `<div class="uiv-ctl"><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");
   }
   bindControls() {
     const root = this.root;
@@ -1942,7 +2351,7 @@ var Uivisor = class {
         this.commitValue([css], input.value);
       });
     });
-    root.querySelectorAll(".uiv-sel").forEach((node) => {
+    root.querySelectorAll(".uiv-sel:not(.uiv-tokensel)").forEach((node) => {
       const sel = node;
       const css = sel.getAttribute("data-css");
       sel.addEventListener("change", () => {
@@ -1950,6 +2359,24 @@ var Uivisor = class {
         this.commitValue([css], sel.value);
       });
     });
+    root.querySelectorAll(".uiv-tokensel").forEach((node) => {
+      const sel = node;
+      const css = sel.getAttribute("data-css");
+      sel.addEventListener("change", () => {
+        if (!sel.value) return;
+        const token = this.designSystem().tokens.find((t) => t.cssVar === sel.value);
+        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");
@@ -2096,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>`;
@@ -2181,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.4",
+  "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",