uivisor 0.1.3 → 0.1.5

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

@@ -542,6 +542,151 @@ 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) => s.replace(/\s+/g, "").toLowerCase();
+    const hit = list.find((t) => norm(t.value) === norm(target.value));
+    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 +812,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 +864,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 +901,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 +1161,19 @@ 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; }
+
 /* ---- 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;
@@ -1126,6 +1298,10 @@ var Uivisor = class {
     this._csEl = 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 +1377,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 +1522,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);
   }
@@ -1570,6 +1786,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. */
+  applyToken(css, token) {
+    this.pushHistory();
+    this.liveSet([css], token.value);
+    this.recordProps([css]);
+    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;
+    }
+    this.renderBody();
+  }
   revertProps(cssList) {
     const el = this.selected;
     const st = this.st();
@@ -1651,6 +1883,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,6 +1892,13 @@ var Uivisor = class {
     `;
     this.bindControls();
   }
+  /** 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>`;
+  }
   /** Read-only readout of the element's actual current styles — so you don't guess. */
   currentStylesHtml() {
     const el = this.selected;
@@ -1864,6 +2104,25 @@ 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
+    );
+    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 +2147,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 +2159,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 +2201,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 +2209,15 @@ 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-expand").forEach((node) => {
       const btn = node;
       const key = btn.getAttribute("data-key");

package/package.json

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