uivisor 0.1.8 → 0.1.10

package/dist/overlay/index.js

@@ -410,7 +410,8 @@ var ICONS = {
   phone: sv('<rect x="5" y="1.8" width="6" height="12.4" rx="1.6"/><path d="M7 12.4h2"/>'),
   tablet: sv('<rect x="3.3" y="2.2" width="9.4" height="11.6" rx="1.6"/><path d="M7 11.7h2"/>'),
   desktop: sv('<rect x="1.8" y="2.8" width="12.4" height="8" rx="1"/><path d="M5.8 14h4.4 M8 10.8v3.2"/>'),
-  live: sv('<circle cx="8" cy="8" r="2"/><path d="M4.6 4.6a4.8 4.8 0 0 0 0 6.8 M11.4 4.6a4.8 4.8 0 0 1 0 6.8"/>')
+  live: sv('<circle cx="8" cy="8" r="2"/><path d="M4.6 4.6a4.8 4.8 0 0 0 0 6.8 M11.4 4.6a4.8 4.8 0 0 1 0 6.8"/>'),
+  all: sv('<path d="M8 2.5v11 M3.2 5.2l9.6 5.6 M12.8 5.2l-9.6 5.6"/>')
 };
 var SECTIONS = [
   {
@@ -455,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 }
     ]
   },
   {
@@ -855,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;
@@ -926,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");
@@ -1242,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;
@@ -1345,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; }
@@ -1373,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 = [];
@@ -1511,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>
@@ -1523,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">
@@ -1550,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());
@@ -1596,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() {
@@ -1696,7 +1761,7 @@ var Uivisor = class {
     const host = this.q(".uiv-framehost");
     host.style.width = `${this.frameWidth}px`;
     const bp = activeBreakpoint(this.frameWidth, this.bpSystem()).name;
-    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${bp}`;
+    this.q(".uiv-framew").textContent = `${this.frameWidth}px \xB7 ${this.bpLabel(bp)}`;
     this.updateBp();
     this.reposition();
   }
@@ -2025,6 +2090,7 @@ var Uivisor = class {
         ${this.journalHtml()}
       `;
       if (this.responsive) this.renderFrameBar();
+      this.renderInfo();
       this.bindControls();
       return;
     }
@@ -2038,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). */
@@ -2103,19 +2169,22 @@ 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) {
     const from = this.inheritedFrom(props);
-    const badge = from ? ` <span class="uiv-inh" title="inherited from ${escapeAttr(from)} \u2014 not set at this breakpoint">\u2923${escapeHtml(from)}</span>` : "";
+    const badge = from ? ` <span class="uiv-inh" title="inherited from ${escapeAttr(this.bpLabel(from))} \u2014 not set at this breakpoint">\u2923${escapeHtml(this.bpLabel(from))}</span>` : "";
     return `<span class="clabel">${label}${badge}</span>`;
   }
   /** Is any of `props` authored in the project CSS? For inherited properties we
@@ -2130,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;
@@ -2246,33 +2314,45 @@ 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". */
+  bpLabel(name) {
+    return name === "base" ? "all" : name;
   }
   /** A device icon for a breakpoint chip, by its threshold (size proxy). */
   bpIcon(name) {
     if (name === "live") return ICONS.live;
-    const px2 = name === "base" ? 0 : this.bpSystem().breakpoints.find((b) => b.name === name)?.minWidth ?? 0;
+    if (name === "base") return ICONS.all;
+    const px2 = this.bpSystem().breakpoints.find((b) => b.name === name)?.minWidth ?? 0;
     if (px2 < 768) return ICONS.phone;
     if (px2 < 1024) return ICONS.tablet;
     return ICONS.desktop;
   }
-  /** Breakpoint chips (Live + each project breakpoint) with device icons. Reused by
-   *  the panel (Live mode) and the bar over the virtual screen (responsive mode). */
+  /** Breakpoint chips with icons. Order: "all" (base, the default) → Live → each
+   *  project breakpoint. Reused by the panel (Live) and the over-frame bar. */
   breakpointChipsHtml() {
     const sys = this.bpSystem();
-    const names = ["base", ...sys.breakpoints.map((b) => b.name)];
     const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
     const winBp = currentBreakpoint(sys).name;
-    const chip = (n, on, title) => `<button class="uiv-chip${on ? " on" : ""}" data-bp="${n}" title="${escapeAttr(title)}">${this.bpIcon(n)}<span>${n === "live" ? "Live" : n}</span></button>`;
-    const live = chip("live", !this.responsive, "Follow your real browser window");
-    const chips = names.map((n) => {
-      const active = this.responsive ? n === frameBp : n === winBp;
-      const px2 = n === "base" ? 0 : sys.breakpoints.find((b) => b.name === n).minWidth;
-      return chip(n, active, sys.dir === "min" ? `\u2265 ${px2}px` : `\u2264 ${px2}px`);
-    }).join("");
-    return live + chips;
+    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>${this.bpLabel(n)}</span></button>`;
+    const all = chip("base", isActive("base"), "No breakpoint \u2014 applies to every size by default");
+    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 + rest;
   }
   /** Panel breakpoint bar — shown only in Live mode (in responsive mode the bar
    *  lives over the virtual screen instead). */
@@ -2283,7 +2363,7 @@ var Uivisor = class {
     const liveW = typeof window !== "undefined" ? window.innerWidth : 0;
     const detected = sys.name === "detected" ? "" : " (defaults)";
     const cascade = sys.dir === "min" ? `Mobile-first: an edit applies to this breakpoint and <b>wider</b>.` : `Desktop-first: an edit applies to this breakpoint and <b>narrower</b>.`;
-    const hint = `Live \u2014 window <b>${liveW}px</b> = <b>${winBp}</b>. ${cascade} Click a size to shrink the screen.`;
+    const hint = `Live \u2014 window <b>${liveW}px</b> = <b>${this.bpLabel(winBp)}</b>. ${cascade} Click a size to shrink the screen.`;
     return `<div class="uiv-sec"><div class="uiv-sectitle">Screen / breakpoint${detected}</div><div class="uiv-chips">${this.breakpointChipsHtml()}</div><div class="uiv-bphint">${hint}</div></div>`;
   }
   /** Populate the bar over the virtual screen (responsive mode) with the chips. */
@@ -2328,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;
   }
@@ -2458,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);
@@ -2556,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) => {
@@ -2693,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.8",
+  "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",