uivisor 0.1.9 → 0.1.10

package/dist/overlay/index.js

@@ -456,10 +456,10 @@ var SECTIONS = [
   {
     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 }
+      { kind: "len", css: "width", label: "Width", icon: ICONS.width, hideWhenAuto: true },
+      { kind: "len", css: "height", label: "Height", icon: ICONS.height, hideWhenAuto: true },
+      { kind: "len", css: "max-width", label: "Max W", icon: ICONS.width, hideWhenAuto: true },
+      { kind: "len", css: "min-height", label: "Min H", icon: ICONS.height, hideWhenAuto: true }
     ]
   },
   {
@@ -856,9 +856,29 @@ function renderPrompt(records) {
   );
   lines.push("");
   lines.push(
-    "These are visual tweaks I made in the running app. Apply them to the source. Do not change anything else."
+    "These are visual tweaks I made in the running app. Apply them to the source \u2014 but do NOT just mechanically apply them. First analyze the markup: if a change exposes dead, redundant, or contradictory code, stop and tell me (or propose the cleanup) instead of blindly applying."
   );
   lines.push("");
+  lines.push("## Analyze the markup first (don\u2019t just change values)");
+  lines.push(
+    "- If a change effectively HIDES or empties an element (display:none, visibility:hidden, opacity:0, or collapsing its size to 0) and it isn\u2019t shown conditionally somewhere else, question whether the element/component is needed at all. Prefer DELETING the element and its now-unused styles/classes over leaving a permanently hidden node."
+  );
+  lines.push(
+    "- Flag CSS that has no effect in its context and ask why it\u2019s there \u2014 don\u2019t silently keep it:"
+  );
+  lines.push(
+    "    \u2022 flex-direction / justify-content / align-items / flex-wrap / gap on an element whose display is NOT flex/grid (e.g. block);"
+  );
+  lines.push("    \u2022 flex-grow / flex-shrink / flex-basis / align-self / order when the PARENT isn\u2019t flex/grid;");
+  lines.push("    \u2022 top / right / bottom / left / z-index when position is static;");
+  lines.push(
+    "    \u2022 width / height on an inline element; a value identical to the inherited/default (a no-op)."
+  );
+  lines.push(
+    "- If a tweak only makes sense because of an underlying layout problem, fix the cause, don\u2019t patch the symptom. Remove dead code rather than piling on more utilities/overrides."
+  );
+  lines.push("- Per-element notes flagged below (\u26A0) are concrete instances I already detected \u2014 address them.");
+  lines.push("");
   let anyClassTarget = false;
   let anyNewClass = false;
   let anyDesignToken = false;
@@ -927,6 +947,10 @@ function renderPrompt(records) {
         );
       }
     }
+    if (r.smells?.length) {
+      lines.push(`- \u26A0 Analyze this element (don\u2019t just apply \u2014 these look off):`);
+      for (const s of r.smells) lines.push(`    - ${s}`);
+    }
     lines.push("");
   });
   lines.push("### Rules");
@@ -1243,10 +1267,22 @@ var CSS = (
 .uiv-rv.changed { color: #4ade80; } /* edited in uivisor \u2192 green */
 
 /* control-row state: file (authored) \xB7 edited (this breakpoint) \xB7 auto (computed) */
-.uiv-ctl.st-file > .clabel { color: #e4e4e7; }
-.uiv-ctl.st-edited > .clabel { color: #4ade80; }
-.uiv-ctl.st-auto > .clabel { color: #6b7280; }
-.uiv-ctl.st-inherit > .clabel { color: #38bdf8; } /* value cascaded from another bp */
+/* 3-state colour on BOTH the label and the value (input / select text) */
+.uiv-ctl.st-file > .clabel,
+.uiv-ctl.st-file .uiv-num input, .uiv-ctl.st-file select.uiv-sel { color: #e4e4e7; }
+.uiv-ctl.st-edited > .clabel,
+.uiv-ctl.st-edited .uiv-num input, .uiv-ctl.st-edited select.uiv-sel { color: #4ade80; }
+.uiv-ctl.st-inherit > .clabel,
+.uiv-ctl.st-inherit .uiv-num input, .uiv-ctl.st-inherit select.uiv-sel { color: #38bdf8; } /* cascaded */
+.uiv-ctl.st-auto > .clabel,
+.uiv-ctl.st-auto .uiv-num input, .uiv-ctl.st-auto select.uiv-sel { color: #6b7280; }
+
+/* "+" chips for hidden auto controls (width/height when not set) */
+.uiv-adds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
+.uiv-addctl { cursor: pointer; border: 1px dashed #52525b; background: transparent;
+  color: #71717a; border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600;
+  font-family: ui-monospace, monospace; }
+.uiv-addctl:hover { color: #fff; border-color: #6366f1; }
 .uiv-inh { font-size: 9px; font-weight: 700; color: #38bdf8; font-family: ui-monospace, monospace;
   background: #0c4a6e55; border: 1px solid #0369a1; border-radius: 4px; padding: 0 3px; margin-left: 2px; }
 .uiv-leg { display: flex; gap: 12px; padding: 8px 12px 2px; font-size: 9px;
@@ -1346,6 +1382,16 @@ var CSS = (
 .uiv-btn.primary { background: #4f46e5; border-color: #6366f1; color: #fff; flex-basis: 100%; }
 .uiv-btn.primary:hover { background: #4338ca; }
 .uiv-btn.ghost { flex: 0 0 auto; }
+/* floating read-only "all styles" block, docked bottom-right, left of the panel */
+.uiv-info { position: fixed; right: 352px; bottom: 16px; z-index: 2147483646;
+  width: 216px; max-height: 52vh; overflow: auto; display: none;
+  background: rgba(24,24,27,0.86); color: #e4e4e7;
+  border: 1px solid #3f3f46; border-radius: 10px; padding: 8px 10px;
+  font-size: 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
+.uiv-info.show { display: block; }
+.uiv-info-h { font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
+  color: #8b8b94; font-weight: 600; margin-bottom: 6px; }
+.uiv-info-sub { color: #52525b; }
 .uiv-toast { position: fixed; right: 16px; bottom: 128px; z-index: 2147483647;
   background: #22c55e; color: #052e16; padding: 8px 12px; border-radius: 8px;
   font-size: 12px; font-weight: 600; display: none; }
@@ -1374,6 +1420,8 @@ var Uivisor = class {
     this.expanded = /* @__PURE__ */ new Set();
     /** Section titles collapsed in the accordion (per session). */
     this.collapsedSecs = /* @__PURE__ */ new Set();
+    /** Controls manually revealed via "+" (hideWhenAuto controls that are auto). */
+    this.revealedCtls = /* @__PURE__ */ new Set();
     /** Undo / redo stacks of full edit-state snapshots. */
     this.undoStack = [];
     this.redoStack = [];
@@ -1512,7 +1560,7 @@ var Uivisor = class {
     this.root.innerHTML = `
       <style>${CSS}</style>
       <div class="uiv-framewrap">
-        <div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="Exit responsive">\u2715</span></div>
+        <div class="uiv-framebar"><div class="uiv-framechips uiv-chips"></div><span class="uiv-framew">768px</span><span class="uiv-framex" title="Turn uivisor off (Alt+U)">\u2715</span></div>
         <div class="uiv-framestage">
           <div class="uiv-framehost">
             <iframe class="uiv-frame" data-uiv-frame="1"></iframe>
@@ -1524,6 +1572,7 @@ var Uivisor = class {
       <div class="uiv-box sel"></div>
       <div class="uiv-tag"></div>
       <div class="uiv-fab" title="Toggle uivisor (Alt+U)">\u25CE</div>
+      <div class="uiv-info"></div>
       <div class="uiv-toast"></div>
       <div class="uiv-panel">
         <div class="uiv-head">
@@ -1551,7 +1600,7 @@ var Uivisor = class {
     this.frame = this.q(".uiv-frame");
     this.fab.addEventListener("click", () => this.toggle());
     this.q(".uiv-x").addEventListener("click", () => this.toggle(false));
-    this.q(".uiv-framex").addEventListener("click", () => this.toggleResponsive(false));
+    this.q(".uiv-framex").addEventListener("click", () => this.toggle(false));
     this.q(".copy-prompt").addEventListener("click", () => this.copyPrompt());
     this.q(".copy-json").addEventListener("click", () => this.copyJSON());
     this.q(".reset").addEventListener("click", () => this.resetSelected());
@@ -1597,11 +1646,26 @@ var Uivisor = class {
     if (!this.enabled) {
       this.hoverBox.style.display = "none";
       this.tag.style.display = "none";
+      this.renderInfo();
       if (this.responsive) this.toggleResponsive(false);
     } else {
       this.scheduleBpRefresh();
+      if (!this.responsive) {
+        this.frameWidth = this.defaultFrameWidth();
+        this.toggleResponsive(true);
+      }
     }
   }
+  /** Frame width on enable: the real window width (≈ the current breakpoint). */
+  defaultFrameWidth() {
+    return typeof window !== "undefined" ? window.innerWidth : 1280;
+  }
+  /** Frame width for the "all"/base chip: a phone-ish width in the base range. */
+  baseFrameWidth() {
+    const bps = this.bpSystem().breakpoints;
+    const firstBp = bps.length ? bps[0].minWidth : 640;
+    return this.bpSystem().dir === "min" ? Math.min(390, firstBp - 1) : 390;
+  }
   /** Stylesheets (esp. JIT/CDN Tailwind) load async — re-detect breakpoints a few
    *  times after enabling and re-render only if the set actually changed. */
   scheduleBpRefresh() {
@@ -2026,6 +2090,7 @@ var Uivisor = class {
         ${this.journalHtml()}
       `;
       if (this.responsive) this.renderFrameBar();
+      this.renderInfo();
       this.bindControls();
       return;
     }
@@ -2039,13 +2104,13 @@ var Uivisor = class {
         <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
       </div>
       ${this.dsIndicatorHtml()}
-      ${this.currentStylesHtml()}
       ${this.breakpointBarHtml()}
       ${this.targetHtml(st)}
       ${this.controlsHtml(this.context(this.selected))}
       ${this.journalHtml()}
     `;
     if (this.responsive) this.renderFrameBar();
+    this.renderInfo();
     this.bindControls();
   }
   /** Small indicator: how many design tokens were detected (or a hint if none). */
@@ -2104,14 +2169,17 @@ var Uivisor = class {
     cache.set(el, out);
     return out;
   }
-  /** State class for an editable control's row: edited (green, at this breakpoint)
-   *  · inherit (a value cascaded from another breakpoint) · file (white, authored
-   *  in CSS) · auto (grey, browser-computed/default). */
-  controlStateClass(props) {
-    if (this.isChanged(props)) return " st-edited";
-    if (this.inheritedFrom(props)) return " st-inherit";
+  /** Editing state of a property set: edited (set at this breakpoint) · inherit
+   *  (cascaded from another breakpoint) · file (authored in CSS) · auto
+   *  (browser-computed / default, not set anywhere). */
+  controlState(props) {
+    if (this.isChanged(props)) return "edited";
+    if (this.inheritedFrom(props)) return "inherit";
     const inherit = props.some((p) => INHERITED_PROPS.has(p));
-    return this.isAuthored(props, inherit) ? " st-file" : " st-auto";
+    return this.isAuthored(props, inherit) ? "file" : "auto";
+  }
+  controlStateClass(props) {
+    return ` st-${this.controlState(props)}`;
   }
   /** A control's label, with an "inherited from {bp}" badge when the value cascaded. */
   ctlLabel(label, props) {
@@ -2131,12 +2199,11 @@ var Uivisor = class {
     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).
+   * Comprehensive read-only readout of the element's ACTUAL current styles
+   * (context-aware: flex/grid/position rows only when relevant). Rendered into the
+   * floating info block at the corner, not the panel. Returns the `<div.uiv-rrow>` rows.
    */
-  currentStylesHtml() {
+  styleRows() {
     const el = this.selected;
     if (!el) return "";
     let cs;
@@ -2247,9 +2314,19 @@ var Uivisor = class {
     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.v}</span></div>`).join("");
-    return `<div class="uiv-sec">${this.accordionTitle("Current styles")}<div class="uiv-readout">${items}</div></div>`;
+    return rows.map((r) => `<div class="uiv-rrow"><span class="uiv-rk">${r.k}</span><span class="uiv-rv">${r.v}</span></div>`).join("");
+  }
+  /** Floating read-only "all styles" block, docked at the bottom-right corner so it
+   *  doesn't take space in the panel. Shown only while an element is selected. */
+  renderInfo() {
+    const info = this.q(".uiv-info");
+    if (!this.enabled || !this.selected) {
+      info.classList.remove("show");
+      info.innerHTML = "";
+      return;
+    }
+    info.innerHTML = `<div class="uiv-info-h">all styles <span class="uiv-info-sub">computed</span></div><div class="uiv-readout">${this.styleRows()}</div>`;
+    info.classList.add("show");
   }
   /** Display label for a breakpoint name — the unprefixed "base" scope reads "all"
    *  (applies to every size by default); internal key stays "base". */
@@ -2272,11 +2349,10 @@ var Uivisor = class {
     const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
     const winBp = currentBreakpoint(sys).name;
     const isActive = (n) => this.responsive ? n === frameBp : n === winBp;
-    const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${n === "live" ? "Live" : this.bpLabel(n)}</span></button>`;
+    const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${this.bpLabel(n)}</span></button>`;
     const all = chip("base", isActive("base"), "No breakpoint \u2014 applies to every size by default");
-    const live = chip("live", !this.responsive, "Follow your real browser window");
     const rest = sys.breakpoints.map((b) => chip(b.name, isActive(b.name), sys.dir === "min" ? `\u2265 ${b.minWidth}px` : `\u2264 ${b.minWidth}px`)).join("");
-    return all + live + rest;
+    return all + rest;
   }
   /** Panel breakpoint bar — shown only in Live mode (in responsive mode the bar
    *  lives over the virtual screen instead). */
@@ -2332,8 +2408,19 @@ var Uivisor = class {
     const secs = SECTIONS.map((sec) => {
       const controls = sec.controls.filter((c) => this.relevant(c, ctx));
       if (!controls.length) return "";
-      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>`;
+      if (this.collapsedSecs.has(sec.title)) return `<div class="uiv-sec">${this.accordionTitle(sec.title)}</div>`;
+      const rows = [];
+      const adds = [];
+      for (const c of controls) {
+        const css = c.css;
+        if (c.kind === "len" && c.hideWhenAuto && css && !this.revealedCtls.has(css) && this.controlState([css]) === "auto") {
+          adds.push(`<button class="uiv-addctl" data-css="${css}">+ ${escapeHtml(c.label)}</button>`);
+        } else {
+          rows.push(this.controlRow(c));
+        }
+      }
+      const addRow = adds.length ? `<div class="uiv-adds">${adds.join("")}</div>` : "";
+      return `<div class="uiv-sec">${this.accordionTitle(sec.title)}${rows.join("")}${addRow}</div>`;
     }).join("");
     return legend + secs;
   }
@@ -2462,7 +2549,10 @@ var Uivisor = class {
     }
     if (c.kind === "len") {
       const v = this.liveNum(c.css);
-      return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<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");
+      const auto = c.hideWhenAuto && this.controlState([c.css]) === "auto";
+      const value = auto || v == null ? "" : String(round2(v));
+      const placeholder = auto && v != null ? `${round2(v)} (auto)` : "\u2014";
+      return `<div class="uiv-ctl${this.controlStateClass([c.css])}">${this.ctlLabel(c.label, [c.css])}<div class="cfield">${this.numField(c.css, value, c.icon, this.isChanged([c.css]), false, placeholder)}</div><span></span></div>` + this.tokenRowHtml(c.css, "Token");
     }
     if (c.kind === "dim") {
       return this.dimField(c);
@@ -2560,24 +2650,22 @@ var Uivisor = class {
         this.renderBody();
       });
     });
+    root.querySelectorAll(".uiv-addctl").forEach((node) => {
+      const btn = node;
+      const css = btn.getAttribute("data-css");
+      btn.addEventListener("click", () => {
+        this.revealedCtls.add(css);
+        this.renderBody();
+      });
+    });
     root.querySelectorAll(".uiv-chip").forEach((node) => {
       const btn = node;
       const bp = btn.getAttribute("data-bp");
       btn.addEventListener("click", () => {
-        if (bp === "live") {
-          if (this.responsive) this.toggleResponsive(false);
-          else this.renderBody();
-          return;
-        }
-        const w = bp === "base" ? 390 : this.bpSystem().breakpoints.find((b) => b.name === bp)?.minWidth ?? 768;
-        this.frameWidth = w;
-        if (!this.responsive) {
-          this.toggleResponsive(true);
-        } else {
-          this.setFrameWidth(w);
-          this.reapplyScope();
-          this.renderBody();
-        }
+        const w = bp === "base" ? this.baseFrameWidth() : this.bpSystem().breakpoints.find((b) => b.name === bp)?.minWidth ?? 768;
+        this.setFrameWidth(w);
+        this.reapplyScope();
+        this.renderBody();
       });
     });
     root.querySelectorAll(".uiv-clschip").forEach((node) => {
@@ -2697,7 +2785,52 @@ var Uivisor = class {
   }
   // ---- actions ----
   records() {
-    return [...this.states.values()].map((s) => s.record).filter((r) => r.changes.length > 0);
+    return [...this.states.entries()].filter(([, s]) => s.record.changes.length > 0).map(([el, s]) => ({ ...s.record, smells: this.detectSmells(el) }));
+  }
+  /**
+   * Detect dead / redundant / contradictory CSS on an element so the prompt can ask
+   * the agent to QUESTION it instead of blindly applying — e.g. flex-direction on a
+   * non-flex element, offsets without positioning, a display:none node that may be
+   * deletable. Only flags properties the project actually AUTHORED (matchedProps).
+   */
+  detectSmells(el) {
+    const out = [];
+    try {
+      const cs = getComputedStyle(el);
+      const authored = this.matchedProps(el);
+      const disp = cs.display;
+      const flexGrid = /flex|grid/.test(disp);
+      const parent = el.parentElement;
+      const parentFlexGrid = parent ? /flex|grid/.test(getComputedStyle(parent).display) : false;
+      const has = (p) => authored.has(p);
+      if (disp === "none")
+        out.push(
+          `It computes to \`display:none\` \u2014 it renders nothing here. If it isn't toggled visible elsewhere, prefer DELETING the element and its now-dead styles/classes over shipping a permanently hidden node.`
+        );
+      if (cs.visibility === "hidden" || parseFloat(cs.opacity) === 0)
+        out.push(`It's invisible (visibility/opacity 0) \u2014 question whether it's needed at all.`);
+      if (!flexGrid) {
+        for (const p of ["flex-direction", "justify-content", "align-items", "flex-wrap"])
+          if (has(p))
+            out.push(`\`${p}\` is set but \`display\` is \`${disp}\` (not flex/grid) \u2192 it has NO effect. Remove it, or the display is wrong \u2014 ask which.`);
+      }
+      if (!parentFlexGrid) {
+        for (const p of ["flex-grow", "flex-shrink", "flex-basis", "align-self", "order"])
+          if (has(p))
+            out.push(`\`${p}\` is set but the PARENT isn't flex/grid \u2192 no effect. Remove it or fix the parent.`);
+      }
+      if (cs.position === "static") {
+        for (const p of ["top", "right", "bottom", "left", "z-index"])
+          if (has(p))
+            out.push(`\`${p}\` is set but \`position\` is \`static\` \u2192 no effect. Add positioning or drop it.`);
+      }
+      if (disp === "inline") {
+        for (const p of ["width", "height"])
+          if (has(p)) out.push(`\`${p}\` on an \`inline\` element has no effect (needs inline-block/block).`);
+      }
+    } catch {
+    }
+    return [...new Set(out)].slice(0, 6);
   }
   async copyPrompt() {
     const recs = this.records();

package/package.json

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