uivisor 0.1.0

package/dist/overlay/index.js

@@ -0,0 +1,1915 @@
+// src/overlay/breakpoint.ts
+var TAILWIND = {
+  name: "tailwind",
+  breakpoints: [
+    { name: "sm", minWidth: 640 },
+    { name: "md", minWidth: 768 },
+    { name: "lg", minWidth: 1024 },
+    { name: "xl", minWidth: 1280 },
+    { name: "2xl", minWidth: 1536 }
+  ]
+};
+function activeBreakpoint(width, system = TAILWIND) {
+  let active = { name: "base", minWidth: 0 };
+  for (const bp of system.breakpoints) {
+    if (width >= bp.minWidth) active = { name: bp.name, minWidth: bp.minWidth };
+  }
+  return active;
+}
+function currentBreakpoint(system = TAILWIND) {
+  const width = typeof window !== "undefined" ? window.innerWidth : 0;
+  return activeBreakpoint(width, system);
+}
+var KNOWN_NAMES = {
+  640: "sm",
+  768: "md",
+  1024: "lg",
+  1280: "xl",
+  1536: "2xl"
+};
+function nameForWidth(px2) {
+  return KNOWN_NAMES[px2] ?? `${px2}`;
+}
+function detectBreakpoints() {
+  if (typeof document === "undefined") return TAILWIND;
+  const widths = /* @__PURE__ */ new Set();
+  const visit = (rules) => {
+    if (!rules) return;
+    for (let i = 0; i < rules.length; i++) {
+      const rule = rules[i];
+      if (rule.type === 4 && rule.media) {
+        const m = /min-width:\s*(\d*\.?\d+)(px|rem|em)/i.exec(rule.media.mediaText);
+        if (m) {
+          const val = parseFloat(m[1]);
+          const px2 = m[2].toLowerCase() === "px" ? val : val * 16;
+          if (px2 >= 240 && px2 <= 4096) widths.add(Math.round(px2));
+        }
+        visit(rule.cssRules);
+      } else if (rule.cssRules) {
+        visit(rule.cssRules);
+      }
+    }
+  };
+  for (let i = 0; i < document.styleSheets.length; i++) {
+    try {
+      visit(document.styleSheets[i].cssRules);
+    } catch {
+    }
+  }
+  const sorted = [...widths].sort((a, b) => a - b);
+  if (!sorted.length) return TAILWIND;
+  return {
+    name: "detected",
+    breakpoints: sorted.map((w) => ({ name: nameForWidth(w), minWidth: w }))
+  };
+}
+
+// src/overlay/tokens.ts
+var SPACING_PREFIX = {
+  padding: "p",
+  "padding-top": "pt",
+  "padding-right": "pr",
+  "padding-bottom": "pb",
+  "padding-left": "pl",
+  margin: "m",
+  "margin-top": "mt",
+  "margin-right": "mr",
+  "margin-bottom": "mb",
+  "margin-left": "ml",
+  gap: "gap",
+  "row-gap": "gap-y",
+  "column-gap": "gap-x"
+};
+var BORDER_WIDTH = {
+  0: "border-0",
+  1: "border",
+  2: "border-2",
+  4: "border-4",
+  8: "border-8"
+};
+var SPACING_SCALE = /* @__PURE__ */ new Set([
+  0,
+  0.5,
+  1,
+  1.5,
+  2,
+  2.5,
+  3,
+  3.5,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  16,
+  20,
+  24,
+  28,
+  32,
+  36,
+  40,
+  44,
+  48,
+  52,
+  56,
+  60,
+  64,
+  72,
+  80,
+  96
+]);
+var FONT_WEIGHT = {
+  "100": "font-thin",
+  "200": "font-extralight",
+  "300": "font-light",
+  "400": "font-normal",
+  "500": "font-medium",
+  "600": "font-semibold",
+  "700": "font-bold",
+  "800": "font-extrabold",
+  "900": "font-black"
+};
+var FONT_SIZE = {
+  12: "text-xs",
+  14: "text-sm",
+  16: "text-base",
+  18: "text-lg",
+  20: "text-xl",
+  24: "text-2xl",
+  30: "text-3xl",
+  36: "text-4xl",
+  48: "text-5xl",
+  60: "text-6xl"
+};
+var RADIUS = {
+  0: "rounded-none",
+  2: "rounded-sm",
+  4: "rounded",
+  6: "rounded-md",
+  8: "rounded-lg",
+  12: "rounded-xl",
+  16: "rounded-2xl",
+  24: "rounded-3xl",
+  9999: "rounded-full"
+};
+function px(value) {
+  const m = /^(-?\d*\.?\d+)px$/.exec(value.trim());
+  return m ? parseFloat(m[1]) : null;
+}
+function rgbToHex(value) {
+  const m = /rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/i.exec(value);
+  if (!m) return null;
+  const hex = (n) => Number(n).toString(16).padStart(2, "0");
+  return `#${hex(m[1])}${hex(m[2])}${hex(m[3])}`;
+}
+function suggestUtility(property, value) {
+  const spPrefix = SPACING_PREFIX[property];
+  if (spPrefix) {
+    const n = px(value);
+    if (n == null) return null;
+    const scale = n / 4;
+    if (SPACING_SCALE.has(scale)) {
+      const tok = Number.isInteger(scale) ? String(scale) : String(scale);
+      return `${spPrefix}-${tok}`;
+    }
+    return `${spPrefix}-[${n}px]`;
+  }
+  if (property === "font-weight") {
+    return FONT_WEIGHT[value.trim()] ?? `font-[${value.trim()}]`;
+  }
+  if (property === "font-size") {
+    const n = px(value);
+    if (n == null) return null;
+    return FONT_SIZE[n] ?? `text-[${n}px]`;
+  }
+  if (property.endsWith("radius")) {
+    const n = px(value);
+    if (n == null) return null;
+    if (property === "border-radius") return RADIUS[n] ?? `rounded-[${n}px]`;
+    const cp = {
+      "border-top-left-radius": "rounded-tl",
+      "border-top-right-radius": "rounded-tr",
+      "border-bottom-right-radius": "rounded-br",
+      "border-bottom-left-radius": "rounded-bl"
+    }[property];
+    return cp ? `${cp}-[${n}px]` : `rounded-[${n}px]`;
+  }
+  if (property.startsWith("border") && property.endsWith("width")) {
+    const n = px(value);
+    if (n == null) return null;
+    if (property === "border-width") return BORDER_WIDTH[n] ?? `border-[${n}px]`;
+    const sp = {
+      "border-top-width": "border-t",
+      "border-right-width": "border-r",
+      "border-bottom-width": "border-b",
+      "border-left-width": "border-l"
+    }[property];
+    if (!sp) return null;
+    if (n === 1) return sp;
+    if ([0, 2, 4, 8].includes(n)) return `${sp}-${n}`;
+    return `${sp}-[${n}px]`;
+  }
+  if (property === "line-height") {
+    const t = value.trim();
+    const unitless = /^(\d*\.?\d+)$/.exec(t);
+    if (unitless) {
+      const named = {
+        "1": "leading-none",
+        "1.25": "leading-tight",
+        "1.375": "leading-snug",
+        "1.5": "leading-normal",
+        "1.625": "leading-relaxed",
+        "2": "leading-loose"
+      };
+      return named[String(parseFloat(unitless[1]))] ?? `leading-[${t}]`;
+    }
+    const n = px(t);
+    if (n != null) return `leading-[${n}px]`;
+    return `leading-[${t}]`;
+  }
+  if (property === "letter-spacing") {
+    const t = value.trim();
+    if (t === "normal" || t === "0" || t === "0px" || t === "0em") return "tracking-normal";
+    const em = /^(-?\d*\.?\d+)em$/.exec(t);
+    if (em) {
+      const named = {
+        "-0.05": "tracking-tighter",
+        "-0.025": "tracking-tight",
+        "0.025": "tracking-wide",
+        "0.05": "tracking-wider",
+        "0.1": "tracking-widest"
+      };
+      return named[String(parseFloat(em[1]))] ?? `tracking-[${t}]`;
+    }
+    return `tracking-[${t}]`;
+  }
+  if (property === "color" || property === "background-color") {
+    const hex = rgbToHex(value) ?? (value.startsWith("#") ? value : null);
+    if (!hex) return null;
+    return property === "color" ? `text-[${hex}]` : `bg-[${hex}]`;
+  }
+  return null;
+}
+
+// src/overlay/capture.ts
+function snapshot(el, props) {
+  const cs = getComputedStyle(el);
+  const out = {};
+  for (const p of props) out[p] = cs.getPropertyValue(p).trim();
+  return out;
+}
+function applyOverride(el, css, value) {
+  el.style.setProperty(css, value, "important");
+}
+function removeOverride(el, css) {
+  el.style.removeProperty(css);
+}
+function toHexInput(computed) {
+  if (/^#[0-9a-f]{6}$/i.test(computed.trim())) return computed.trim();
+  return rgbToHex(computed) ?? "#000000";
+}
+function valueInfo(property, computed) {
+  return { computed, token: suggestUtility(property, computed) };
+}
+function buildChange(property, originalComputed, appliedValue, bp) {
+  return {
+    property,
+    before: valueInfo(property, originalComputed),
+    after: valueInfo(property, appliedValue),
+    breakpoint: bp.name,
+    breakpointPx: bp.minWidth,
+    state: null
+  };
+}
+
+// src/overlay/fields.ts
+var UNIT_LABELS = {
+  "": "\xD7",
+  px: "px",
+  "%": "%",
+  em: "em",
+  rem: "rem"
+};
+var sv = (paths) => `<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+var ICONS = {
+  padding: sv('<rect x="2" y="2" width="12" height="12" rx="1.5"/><rect x="5" y="5" width="6" height="6" rx="1" opacity=".45"/>'),
+  margin: sv('<rect x="4.5" y="4.5" width="7" height="7" rx="1"/><rect x="1.5" y="1.5" width="13" height="13" rx="1.5" opacity=".45"/>'),
+  radius: sv('<path d="M3 13.5 V7 a4 4 0 0 1 4 -4 h6.5"/>'),
+  gap: sv('<rect x="2.5" y="3" width="3.5" height="10" rx="1"/><rect x="10" y="3" width="3.5" height="10" rx="1"/>'),
+  border: sv('<rect x="2.5" y="2.5" width="11" height="11" rx="1.5" stroke-dasharray="2.2 2"/>'),
+  size: sv('<path d="M3.5 13 L8 3 L12.5 13 M5.4 9 H10.6"/>'),
+  line: sv('<path d="M2.5 3 H13.5 M2.5 8 H13.5 M2.5 13 H13.5"/>'),
+  tracking: sv('<path d="M5 4 V12 M11 4 V12"/><path d="M2.5 8 H4 M1.8 6.6 L0.8 8 L1.8 9.4"/><path d="M13.5 8 H12 M14.2 6.6 L15.2 8 L14.2 9.4"/>'),
+  expand: sv('<rect x="2" y="2" width="4.5" height="4.5" rx="1"/><rect x="9.5" y="2" width="4.5" height="4.5" rx="1"/><rect x="2" y="9.5" width="4.5" height="4.5" rx="1"/><rect x="9.5" y="9.5" width="4.5" height="4.5" rx="1"/>'),
+  collapse: sv('<rect x="3" y="3" width="10" height="10" rx="2"/>')
+};
+var SECTIONS = [
+  {
+    title: "Spacing",
+    controls: [
+      {
+        kind: "box",
+        key: "padding",
+        label: "Padding",
+        icon: ICONS.padding,
+        sides: [
+          { css: "padding-top", label: "T" },
+          { css: "padding-right", label: "R" },
+          { css: "padding-bottom", label: "B" },
+          { css: "padding-left", label: "L" }
+        ]
+      },
+      {
+        kind: "box",
+        key: "margin",
+        label: "Margin",
+        icon: ICONS.margin,
+        sides: [
+          { css: "margin-top", label: "T" },
+          { css: "margin-right", label: "R" },
+          { css: "margin-bottom", label: "B" },
+          { css: "margin-left", label: "L" }
+        ]
+      },
+      // Gap only matters on flex/grid containers.
+      { kind: "len", css: "gap", label: "Gap", icon: ICONS.gap, requires: "flexgrid" }
+    ]
+  },
+  {
+    title: "Border",
+    controls: [
+      {
+        kind: "box",
+        key: "radius",
+        label: "Radius",
+        icon: ICONS.radius,
+        sides: [
+          { css: "border-top-left-radius", label: "TL" },
+          { css: "border-top-right-radius", label: "TR" },
+          { css: "border-bottom-right-radius", label: "BR" },
+          { css: "border-bottom-left-radius", label: "BL" }
+        ]
+      },
+      {
+        kind: "box",
+        key: "border",
+        label: "Border",
+        icon: ICONS.border,
+        sides: [
+          { css: "border-top-width", label: "T" },
+          { css: "border-right-width", label: "R" },
+          { css: "border-bottom-width", label: "B" },
+          { css: "border-left-width", label: "L" }
+        ]
+      }
+    ]
+  },
+  {
+    // Typography only shows when the element renders its own text.
+    title: "Typography",
+    controls: [
+      { kind: "len", css: "font-size", label: "Size", icon: ICONS.size, requires: "text" },
+      {
+        kind: "select",
+        css: "font-weight",
+        label: "Weight",
+        options: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
+        requires: "text"
+      },
+      {
+        kind: "dim",
+        css: "line-height",
+        label: "Line",
+        icon: ICONS.line,
+        units: ["px", "%", ""],
+        defaultUnit: "px",
+        requires: "text"
+      },
+      {
+        kind: "dim",
+        css: "letter-spacing",
+        label: "Spacing",
+        icon: ICONS.tracking,
+        units: ["em", "px"],
+        defaultUnit: "em",
+        requires: "text"
+      },
+      { kind: "color", css: "color", label: "Text", requires: "text" }
+    ]
+  },
+  {
+    title: "Fill",
+    controls: [{ kind: "color", css: "background-color", label: "Background" }]
+  }
+];
+var ALL_CSS = (() => {
+  const set = /* @__PURE__ */ new Set();
+  for (const s of SECTIONS)
+    for (const c of s.controls) {
+      if (c.kind === "box") c.sides.forEach((side) => set.add(side.css));
+      else set.add(c.css);
+    }
+  return [...set];
+})();
+var SHORTHAND_SETS = [
+  { shorthand: "padding", parts: ["padding-top", "padding-right", "padding-bottom", "padding-left"] },
+  { shorthand: "margin", parts: ["margin-top", "margin-right", "margin-bottom", "margin-left"] },
+  {
+    shorthand: "border-radius",
+    parts: [
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius"
+    ]
+  },
+  {
+    shorthand: "border-width",
+    parts: ["border-top-width", "border-right-width", "border-bottom-width", "border-left-width"]
+  }
+];
+
+// 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):/;
+function stripVariants(cls) {
+  let c = cls;
+  while (true) {
+    const next = c.replace(/^[a-z0-9-]+:/, "");
+    if (next === c) break;
+    c = next;
+  }
+  return c;
+}
+var CSS_MODULE = /(?:^|_)[A-Za-z0-9-]+__[A-Za-z0-9_-]{4,}$|^[A-Za-z][\w-]*_[A-Za-z0-9]{4,}$/;
+var STYLED = /^sc-[A-Za-z0-9]+$|^css-[a-z0-9]+(?:-[A-Za-z0-9]+)?$|-emotion-/;
+function detectMechanism(el, authoredInlineLength) {
+  const classes = Array.from(el.classList);
+  const evidence = [];
+  const twClasses = classes.filter((c) => {
+    const bare = stripVariants(c);
+    return TW_UTILITY.test(bare) || TW_VARIANT.test(c) && TW_UTILITY.test(bare);
+  });
+  let hasTwVars = false;
+  try {
+    const cs = getComputedStyle(el);
+    for (let i = 0; i < cs.length; i++) {
+      if (cs[i].startsWith("--tw-")) {
+        hasTwVars = true;
+        break;
+      }
+    }
+  } catch {
+  }
+  if (twClasses.length) {
+    evidence.push(`utility classes: ${twClasses.join(" ")}`);
+    return mk("tailwind", evidence, twClasses);
+  }
+  if (hasTwVars) {
+    evidence.push("--tw-* custom properties present");
+    return mk("tailwind", evidence, classes);
+  }
+  const moduleClasses = classes.filter((c) => CSS_MODULE.test(c));
+  if (moduleClasses.length) {
+    evidence.push(`hashed CSS-module classes: ${moduleClasses.join(" ")}`);
+    return mk("css-modules", evidence, moduleClasses);
+  }
+  const styledClasses = classes.filter((c) => STYLED.test(c));
+  const hasStyledTag = typeof document !== "undefined" && !!document.querySelector("style[data-styled], style[data-emotion]");
+  if (styledClasses.length || hasStyledTag) {
+    if (styledClasses.length)
+      evidence.push(`styled/emotion classes: ${styledClasses.join(" ")}`);
+    else evidence.push("styled-components/emotion <style> tag present");
+    return mk("styled-components", evidence, styledClasses);
+  }
+  if (authoredInlineLength > 0) {
+    evidence.push("authored inline style attribute");
+    return mk("inline", evidence, []);
+  }
+  if (classes.length) {
+    evidence.push(`plain CSS classes: ${classes.join(" ")}`);
+    return mk("plain-css", evidence, classes);
+  }
+  evidence.push("no classes, no inline style \u2014 styled by tag/ancestor selector");
+  return mk("unknown", evidence, []);
+}
+function mk(primaryMechanism, evidence, sourceClassNames) {
+  return { primaryMechanism, evidence, sourceClassNames };
+}
+
+// src/overlay/prompt.ts
+function collapseChanges(changes) {
+  const byBp = groupByBreakpoint(changes);
+  const out = [];
+  for (const bp of Object.keys(byBp)) {
+    const group = byBp[bp];
+    const used = /* @__PURE__ */ new Set();
+    for (const set of SHORTHAND_SETS) {
+      const parts = set.parts.map((p) => group.find((c) => c.property === p));
+      if (parts.every((p) => !!p)) {
+        const after = parts[0].after.computed;
+        if (parts.every((p) => p.after.computed === after)) {
+          parts.forEach((p) => used.add(p));
+          const beforeAllEqual = parts.every((p) => p.before.computed === parts[0].before.computed);
+          out.push({
+            property: set.shorthand,
+            before: { computed: beforeAllEqual ? parts[0].before.computed : "mixed" },
+            after: { computed: after, token: suggestUtility(set.shorthand, after) },
+            breakpoint: parts[0].breakpoint,
+            breakpointPx: parts[0].breakpointPx,
+            state: null
+          });
+        }
+      }
+    }
+    for (const c of group) if (!used.has(c)) out.push(c);
+  }
+  return out;
+}
+function groupByBreakpoint(changes) {
+  const out = {};
+  for (const c of changes) (out[c.breakpoint] ??= []).push(c);
+  return out;
+}
+function locationLabel(r) {
+  const s = r.identity.source;
+  if (s.confidence !== "none") return `${s.file}:${s.line}:${s.column}`;
+  if (r.identity.componentName) return `component <${r.identity.componentName}>`;
+  return r.identity.selector;
+}
+function variant(breakpoint, token) {
+  return breakpoint === "base" ? token : `${breakpoint}:${token}`;
+}
+function renderPrompt(records) {
+  const active = records.filter((r) => r.changes.length > 0);
+  const total = active.reduce((n, r) => n + collapseChanges(r.changes).length, 0);
+  const lines = [];
+  lines.push(
+    `# uivisor \u2014 apply these UI tweaks (${total} change${total !== 1 ? "s" : ""} across ${active.length} element${active.length !== 1 ? "s" : ""})`
+  );
+  lines.push("");
+  lines.push(
+    "These are visual tweaks I made in the running app. Apply them to the source. Do not change anything else."
+  );
+  lines.push("");
+  let anyClassTarget = false;
+  let anyNewClass = false;
+  active.forEach((r, i) => {
+    const id = r.identity;
+    const newClass = r.target?.startsWith("new:") ? r.target.slice(4) : null;
+    const allTarget = !newClass && r.target === "all";
+    const classTarget = !newClass && !allTarget && r.target && r.target !== "element" ? r.target : null;
+    if (classTarget) anyClassTarget = true;
+    if (newClass) anyNewClass = true;
+    const label = newClass ? `<${id.tagName}> \u2192 new class .${newClass}` : allTarget ? `<${id.tagName}> \xD7${id.instanceCount} (all like this)` : classTarget ? `<${id.tagName}> .${classTarget}` : `<${id.tagName}>` + (id.textSnippet ? ` "${id.textSnippet}"` : "");
+    lines.push(`## ${i + 1}. ${label} \u2014 ${locationLabel(r)}`);
+    const where = () => {
+      const w = [];
+      if (id.componentName) w.push(`component <${id.componentName}>`);
+      w.push(`occurrence at ${locationLabel(r)}`);
+      if (id.textSnippet) w.push(`text "${id.textSnippet}"`);
+      return w.join(", ");
+    };
+    if (allTarget) {
+      lines.push(
+        `- TARGET: this element is rendered ${id.instanceCount}\xD7 \u2014 it and its ${id.instanceCount - 1} sibling(s) are the same component/markup. Apply the change to ALL of them at once by editing the shared source/component (or adding one shared class) \u2014 do NOT pin it to a single positional nth-child. You decide whether editing the component or adding a shared class is cleaner.`
+      );
+      lines.push(`- Find them via: ${where()} (the source above is rendered ${id.instanceCount}\xD7)`);
+    } else if (newClass) {
+      lines.push(
+        `- TARGET: create a NEW class \`.${newClass}\` with the styles below and add it to this element. Keep the existing classes as-is \u2014 do NOT pile more utilities onto them. (Tailwind: define it via \`@layer components { .${newClass} { @apply \u2026 } }\` or a CSS rule; reuse \`.${newClass}\` on similar elements.)`
+      );
+      lines.push(`- Add it on: ${where()}`);
+    } else if (classTarget) {
+      lines.push(
+        `- TARGET: the \`.${classTarget}\` style shared by ALL elements with this class. Edit that shared definition (the Tailwind utility, CSS-module/CSS rule, or styled-component) \u2014 NOT just this one node, and NOT via the positional selector.`
+      );
+      lines.push(`- Find it via: ${where()}`);
+    } else {
+      if (id.instanceCount > 1) {
+        lines.push(
+          `- TARGET: THIS instance only. It's rendered ${id.instanceCount}\xD7 from the same source, so editing the shared source would change all ${id.instanceCount}. Scope the change to just this one (a prop/condition or a distinguishing class).`
+        );
+      }
+      const anchors = [];
+      if (id.componentName) anchors.push(`component <${id.componentName}>`);
+      if (id.dataTestId) anchors.push(`data-testid="${id.dataTestId}"`);
+      if (id.id) anchors.push(`#${id.id}`);
+      if (id.selector) anchors.push(`selector \`${id.selector}\``);
+      if (anchors.length) lines.push(`- Identify by: ${anchors.join(", ")}`);
+    }
+    const styleLine = `- Styling: ${r.styling.primaryMechanism}` + (r.styling.sourceClassNames.length ? ` (current classes: \`${r.styling.sourceClassNames.join(" ")}\`)` : "");
+    lines.push(styleLine);
+    const byBp = groupByBreakpoint(collapseChanges(r.changes));
+    for (const bp of Object.keys(byBp)) {
+      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)}\`` : "";
+        lines.push(
+          `    - ${c.property}: ${c.before.computed} \u2192 ${c.after.computed}${suggestion}`
+        );
+      }
+    }
+    lines.push("");
+  });
+  lines.push("### Rules");
+  lines.push(
+    "- Edit the EXISTING className/styles of each element. Do NOT add inline styles and do NOT duplicate the component."
+  );
+  lines.push(
+    "- Scope every change to its breakpoint with a responsive variant (e.g. `lg:`) so other screen sizes stay unchanged."
+  );
+  lines.push(
+    "- For non-Tailwind styling, edit the matching CSS-module / styled-component / CSS rule instead of the suggested utility, keeping the same breakpoint scope."
+  );
+  lines.push("- Confirm each element by its source location, text and data-testid before editing.");
+  if (anyClassTarget) {
+    lines.push(
+      "- For class-targeted edits, change the shared style once so every element using that class updates \u2014 do not hardcode it onto a single positional node."
+    );
+  }
+  if (anyNewClass) {
+    lines.push(
+      "- 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."
+    );
+  }
+  return lines.join("\n");
+}
+function renderSpec(records, meta) {
+  return {
+    specVersion: "1.0",
+    capturedAt: meta.now,
+    url: meta.url,
+    viewport: { width: meta.width, height: meta.height, dpr: meta.dpr },
+    records: records.filter((r) => r.changes.length > 0)
+  };
+}
+
+// src/overlay/source.ts
+function parseSourceAttr(raw) {
+  if (!raw) return null;
+  const m = /^(.*):(\d+):(\d+)$/.exec(raw);
+  if (!m) return null;
+  return { file: m[1], line: Number(m[2]), column: Number(m[3]) };
+}
+function readBuildSource(el) {
+  const holder = el.closest("[data-uiv-src]");
+  if (!holder) return null;
+  return parseSourceAttr(holder.getAttribute("data-uiv-src"));
+}
+function getFiber(el) {
+  const key = Object.keys(el).find(
+    (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
+  );
+  return key ? el[key] : null;
+}
+var INTERNAL_COMPONENTS = /* @__PURE__ */ new Set([
+  "ScrollAndFocusHandler",
+  "RenderFromTemplateContext",
+  "ClientPageRoot",
+  "ClientSegmentRoot",
+  "StaticGenerationSearchParamsBailoutProvider",
+  "ViewTransition",
+  "ReactDevOverlay",
+  "HotReload",
+  "AppDevOverlay",
+  "DevRootHTTPAccessFallbackBoundary",
+  "PathnameContextProviderAdapter"
+]);
+function isInternalName(name) {
+  return INTERNAL_COMPONENTS.has(name) || /(?:Boundary|Router)$/.test(name) || name.startsWith("_");
+}
+function fiberName(t) {
+  if (typeof t === "function") return t.displayName || t.name || null;
+  if (t && typeof t === "object") {
+    const inner = t.type || t.render;
+    if (typeof inner === "function") return t.displayName || inner.displayName || inner.name || null;
+    if (typeof t.displayName === "string") return t.displayName;
+  }
+  return null;
+}
+function readComponentName(el) {
+  let fiber = getFiber(el);
+  let guard = 0;
+  while (fiber && guard++ < 80) {
+    const name = fiberName(fiber.type);
+    if (name && !isInternalName(name)) return name;
+    fiber = fiber.return;
+  }
+  return null;
+}
+function buildSelector(el) {
+  const parts = [];
+  let node = el;
+  let depth = 0;
+  while (node && node.nodeType === 1 && depth++ < 6) {
+    let part = node.tagName.toLowerCase();
+    if (node.id) {
+      parts.unshift(`${part}#${cssEscape(node.id)}`);
+      break;
+    }
+    const testid = node.getAttribute("data-testid");
+    if (testid) {
+      parts.unshift(`${part}[data-testid="${testid}"]`);
+      break;
+    }
+    const parent = node.parentElement;
+    if (parent) {
+      const sameTag = Array.from(parent.children).filter(
+        (c) => c.tagName === node.tagName
+      );
+      if (sameTag.length > 1) {
+        part += `:nth-of-type(${sameTag.indexOf(node) + 1})`;
+      }
+    }
+    parts.unshift(part);
+    node = node.parentElement;
+  }
+  return parts.join(" > ");
+}
+function cssEscape(s) {
+  return s.replace(/[^a-zA-Z0-9_-]/g, (c) => `\\${c}`);
+}
+function componentFromFile(file) {
+  const base = file.split(/[\\/]/).pop() || file;
+  const name = base.replace(/\.[jt]sx?$/, "");
+  if (/^(page|layout|route|template|loading|error|not-found|index)$/.test(name)) return null;
+  return name;
+}
+function countInstances(el) {
+  try {
+    const doc = el.ownerDocument;
+    const holder = el.closest("[data-uiv-src]");
+    const raw = holder?.getAttribute("data-uiv-src");
+    if (raw) {
+      let n2 = 0;
+      doc.querySelectorAll("[data-uiv-src]").forEach((e) => {
+        if (e.getAttribute("data-uiv-src") === raw) n2++;
+      });
+      if (n2 > 0) return n2;
+    }
+    const sig = (e) => `${e.tagName}|${Array.from(e.classList).sort().join(" ")}`;
+    const mine = sig(el);
+    if (!el.classList.length) return 1;
+    let n = 0;
+    doc.querySelectorAll(el.tagName).forEach((e) => {
+      if (sig(e) === mine) n++;
+    });
+    return Math.max(1, n);
+  } catch {
+    return 1;
+  }
+}
+function getIdentity(el) {
+  const build = readBuildSource(el);
+  const source = build ? { ...build, confidence: "build-attr" } : { confidence: "none" };
+  return {
+    // With an exact file:line, derive the name from the file (reliable, RSC-safe);
+    // only walk the fiber tree when there is no build-time source.
+    componentName: build ? componentFromFile(build.file) : readComponentName(el),
+    source,
+    selector: buildSelector(el),
+    dataTestId: el.getAttribute("data-testid"),
+    id: el.id || null,
+    tagName: el.tagName.toLowerCase(),
+    role: el.getAttribute("role"),
+    textSnippet: (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 40),
+    classList: Array.from(el.classList).filter((c) => c !== "uiv-selected"),
+    instanceCount: countInstances(el)
+  };
+}
+
+// src/overlay/ui.css.ts
+var CSS = (
+  /* css */
+  `
+:host { all: initial; }
+* { box-sizing: border-box; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
+
+.uiv-box {
+  position: fixed; pointer-events: none; z-index: 2147483646;
+  border: 1px solid #6366f1; border-radius: 2px;
+  background: rgba(99,102,241,0.12); display: none;
+}
+.uiv-box.sel { border: 1.5px solid #22d3ee; background: rgba(34,211,238,0.10); }
+.uiv-tag {
+  position: fixed; pointer-events: none; z-index: 2147483647;
+  background: #6366f1; color: #fff; font-size: 11px; line-height: 1;
+  padding: 3px 6px; border-radius: 3px; white-space: nowrap; display: none;
+}
+
+/* ---- responsive (virtual screen) ---- */
+.uiv-framewrap {
+  position: fixed; inset: 0; z-index: 2147483640; display: none;
+  background: #0a0a0bf2; flex-direction: column;
+}
+.uiv-framewrap.show { display: flex; }
+.uiv-framebar {
+  display: flex; align-items: center; justify-content: center; gap: 14px;
+  height: 38px; color: #e4e4e7; font-size: 12px; flex: 0 0 auto;
+  border-bottom: 1px solid #27272a;
+}
+.uiv-framew { font-family: ui-monospace, monospace; color: #c7d2fe; font-weight: 600; }
+.uiv-framex { cursor: pointer; color: #a1a1aa; }
+.uiv-framex:hover { color: #fff; }
+.uiv-framestage {
+  flex: 1; display: flex; align-items: stretch; justify-content: center;
+  padding: 16px; overflow: auto;
+}
+.uiv-framehost { position: relative; width: 768px; flex: 0 0 auto; }
+.uiv-frame {
+  width: 100%; height: 100%; border: 0; background: #fff;
+  border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
+}
+.uiv-framehandle {
+  position: absolute; top: 0; right: -7px; width: 14px; height: 100%;
+  cursor: ew-resize; display: flex; align-items: center; justify-content: center;
+}
+.uiv-framehandle::after {
+  content: ''; width: 4px; height: 44px; border-radius: 4px; background: #52525b;
+}
+.uiv-framehandle:hover::after { background: #818cf8; }
+
+.uiv-fab {
+  position: fixed; right: 16px; bottom: 16px; z-index: 2147483647;
+  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
+  background: #18181b; color: #a5b4fc; border: 1px solid #3f3f46;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px; box-shadow: 0 6px 24px rgba(0,0,0,0.35); user-select: none;
+}
+.uiv-fab.on { background: #4f46e5; color: #fff; border-color: #6366f1; }
+
+.uiv-panel {
+  position: fixed; right: 16px; bottom: 72px; z-index: 2147483647;
+  width: 328px; max-height: 80vh; overflow: auto;
+  background: #18181b; color: #e4e4e7; border: 1px solid #3f3f46;
+  border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.45);
+  font-size: 12px; display: none;
+}
+.uiv-panel.show { display: block; }
+
+.uiv-head {
+  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
+  border-bottom: 1px solid #27272a; position: sticky; top: 0; background: #18181b;
+}
+.uiv-head b { font-size: 13px; color: #fff; letter-spacing: .3px; }
+.uiv-bp { margin-left: auto; font-size: 10px; padding: 2px 7px; border-radius: 999px;
+  background: #312e81; color: #c7d2fe; font-weight: 600; }
+.uiv-x { cursor: pointer; color: #71717a; padding: 2px 4px; }
+.uiv-x:hover { color: #fff; }
+
+.uiv-sec { padding: 10px 12px; border-bottom: 1px solid #27272a; }
+.uiv-empty { color: #71717a; padding: 18px 12px; text-align: center; }
+
+.uiv-meta { line-height: 1.5; }
+.uiv-meta .uiv-el { color: #67e8f9; font-weight: 600; }
+.uiv-meta .uiv-src { color: #a1a1aa; word-break: break-all; }
+.uiv-meta .uiv-mech { display: inline-block; margin-top: 4px; font-size: 10px;
+  padding: 1px 6px; border-radius: 4px; background: #27272a; color: #d4d4d8; }
+
+/* ---- breakpoint scope + class target chips ---- */
+.uiv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
+.uiv-chip, .uiv-clschip {
+  cursor: pointer; border: 1px solid #3f3f46; background: #27272a; color: #a1a1aa;
+  border-radius: 6px; padding: 3px 8px; font-size: 11px; font-weight: 600;
+  font-family: ui-monospace, monospace;
+}
+.uiv-chip:hover, .uiv-clschip:hover { color: #fff; background: #3f3f46; }
+.uiv-chip.win { border-color: #52525b; color: #d4d4d8; }
+.uiv-chip.on, .uiv-clschip.on { background: #4f46e5; border-color: #6366f1; color: #fff; }
+.uiv-bphint { margin-top: 7px; font-size: 10px; color: #71717a; line-height: 1.4; }
+.uiv-bphint b { color: #c7d2fe; }
+.uiv-newclass {
+  border: 1px dashed #52525b; background: transparent; color: #a1a1aa;
+  border-radius: 6px; padding: 3px 8px; font-size: 11px; width: 104px; outline: none;
+  font-family: ui-monospace, monospace;
+}
+.uiv-newclass::placeholder { color: #71717a; }
+.uiv-newclass:focus { border-style: solid; border-color: #6366f1; color: #fff; }
+.uiv-newclass.on { border-style: solid; border-color: #22d3ee; color: #fff; }
+
+/* ---- Figma-like sectioned controls ---- */
+.uiv-sectitle { margin: 0 0 8px; font-size: 10px; text-transform: uppercase;
+  letter-spacing: .5px; color: #8b8b94; font-weight: 600; }
+.uiv-sec + .uiv-sec .uiv-sectitle { margin-top: 0; }
+
+.uiv-ctl { display: grid; grid-template-columns: 70px 1fr 26px; gap: 8px;
+  align-items: center; margin-bottom: 7px; }
+.uiv-ctl:last-child { margin-bottom: 0; }
+.uiv-ctl > .clabel { font-size: 11px; color: #a1a1aa; }
+.uiv-ctl > .cfield { min-width: 0; }
+
+/* numeric field with a scrub handle on the left */
+.uiv-num { display: flex; align-items: stretch; background: #27272a;
+  border: 1px solid #3f3f46; border-radius: 7px; overflow: hidden; }
+.uiv-num.changed { border-color: #22d3ee; }
+.uiv-num:focus-within { border-color: #6366f1; }
+.uiv-scrub { display: flex; align-items: center; justify-content: center;
+  width: 24px; color: #8b8b94; cursor: ew-resize; user-select: none;
+  flex: 0 0 auto; touch-action: none; }
+.uiv-scrub:hover { color: #c7d2fe; background: #323238; }
+.uiv-scrub.txt { font-size: 10px; font-weight: 600; }
+.uiv-num input { flex: 1; min-width: 0; background: transparent; border: none;
+  color: #fff; padding: 5px 7px 5px 2px; font-size: 12px; outline: none;
+  -moz-appearance: textfield; }
+.uiv-num input::-webkit-outer-spin-button,
+.uiv-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.uiv-num input::placeholder { color: #6b6b73; }
+
+/* unit selector inside a dim field */
+.uiv-unit { flex: 0 0 auto; width: auto; max-width: 52px; background: #323238; border: none;
+  border-left: 1px solid #3f3f46; color: #a1a1aa; font-size: 11px;
+  padding: 0 3px; outline: none; cursor: pointer; }
+.uiv-unit:hover { color: #fff; }
+
+.uiv-expand { display: flex; align-items: center; justify-content: center;
+  width: 26px; height: 28px; border-radius: 7px; cursor: pointer;
+  background: #27272a; border: 1px solid #3f3f46; color: #8b8b94; }
+.uiv-expand:hover { color: #fff; background: #3f3f46; }
+.uiv-expand.on { color: #c7d2fe; border-color: #4f46e5; background: #312e81; }
+
+.uiv-sides { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr);
+  gap: 6px; margin: -1px 0 8px; }
+
+/* Weight dropdown only \u2014 must NOT match the unit <select> inside dim fields. */
+.uiv-ctl select.uiv-sel {
+  width: 100%; background: #27272a; border: 1px solid #3f3f46; color: #fff;
+  border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none;
+}
+.uiv-ctl select.uiv-sel:focus { border-color: #6366f1; }
+.uiv-ctl input[type=color] { width: 100%; height: 28px; padding: 2px; cursor: pointer;
+  background: #27272a; border: 1px solid #3f3f46; border-radius: 7px; }
+.uiv-ctl input.uiv-text { width: 100%; background: #27272a; border: 1px solid #3f3f46;
+  color: #fff; border-radius: 7px; padding: 6px 7px; font-size: 12px; outline: none; }
+.uiv-ctl input.uiv-text:focus { border-color: #6366f1; }
+.uiv-ctl input.uiv-text.changed { border-color: #22d3ee; }
+
+.uiv-journal { display: flex; flex-direction: column; gap: 8px; }
+.uiv-jitem { background: #1f1f23; border: 1px solid #27272a; border-radius: 8px; padding: 8px; }
+.uiv-jitem .jhead { display: flex; gap: 6px; align-items: baseline; }
+.uiv-jitem .jel { color: #67e8f9; font-weight: 600; }
+.uiv-jitem .jloc { color: #71717a; font-size: 10px; margin-left: auto; word-break: break-all; }
+.uiv-jchg { color: #d4d4d8; margin-top: 3px; font-family: ui-monospace, monospace; font-size: 11px; }
+.uiv-jchg .bp { color: #818cf8; }
+.uiv-jchg .tok { color: #4ade80; }
+
+.uiv-foot { display: flex; gap: 6px; padding: 10px 12px; position: sticky; bottom: 0;
+  background: #18181b; border-top: 1px solid #27272a; flex-wrap: wrap; }
+.uiv-btn { flex: 1; cursor: pointer; border: 1px solid #3f3f46; background: #27272a;
+  color: #e4e4e7; border-radius: 7px; padding: 7px 8px; font-size: 11px; font-weight: 600;
+  white-space: nowrap; }
+.uiv-btn:hover { background: #3f3f46; }
+.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; }
+.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; }
+.uiv-toast.show { display: block; }
+.uiv-hint { font-size: 10px; color: #71717a; padding: 0 12px 10px; }
+`
+);
+
+// src/overlay/index.ts
+var counter = 0;
+var round2 = (n) => Math.round(n * 100) / 100;
+var Uivisor = class {
+  constructor() {
+    this.enabled = false;
+    this.selected = null;
+    this.states = /* @__PURE__ */ new Map();
+    this.expanded = /* @__PURE__ */ new Set();
+    /** Cached project breakpoint system (detected from CSS), refreshed until found. */
+    this._bp = null;
+    // responsive (virtual screen) mode
+    this.responsive = false;
+    this.frameWidth = 768;
+    // ---- pointer handling ----
+    this.onMove = (e) => {
+      if (!this.enabled || this.isOurs(e)) {
+        this.hoverBox.style.display = "none";
+        this.tag.style.display = "none";
+        return;
+      }
+      const el = e.target;
+      const d = this.doc();
+      if (!el || el === d.documentElement || el === d.body) return;
+      const r = el.getBoundingClientRect();
+      const o = this.frameOffset();
+      this.place(this.hoverBox, r);
+      this.hoverBox.style.display = "block";
+      this.tag.textContent = `${el.tagName.toLowerCase()} \xB7 ${Math.round(r.width)}\xD7${Math.round(r.height)}`;
+      this.tag.style.left = `${r.left + o.x}px`;
+      this.tag.style.top = `${Math.max(0, r.top + o.y - 20)}px`;
+      this.tag.style.display = "block";
+    };
+    this.onClick = (e) => {
+      if (!this.enabled || this.isOurs(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      this.select(e.target);
+    };
+    this.onKey = (e) => {
+      if (e.altKey && (e.key === "u" || e.key === "U")) {
+        e.preventDefault();
+        this.toggle();
+      } else if (e.key === "Escape" && this.enabled) {
+        if (this.selected) this.select(null);
+        else this.toggle(false);
+      }
+    };
+    this.lastWinBp = "";
+    this.onResize = () => {
+      this.updateBp();
+      this.reposition();
+      const winBp = currentBreakpoint(this.bpSystem()).name;
+      if (winBp !== this.lastWinBp) {
+        this.lastWinBp = winBp;
+        if (this.enabled && this.selected) this.renderBody();
+      }
+    };
+    this.reposition = () => {
+      if (this.selected) {
+        this.place(this.selBox, this.selected.getBoundingClientRect());
+        this.selBox.style.display = "block";
+      } else {
+        this.selBox.style.display = "none";
+      }
+    };
+  }
+  /** Project breakpoints — re-detect until the stylesheets yield a real set. */
+  bpSystem() {
+    if (!this._bp || this._bp.name !== "detected") this._bp = detectBreakpoints();
+    return this._bp;
+  }
+  mount() {
+    this.host = document.createElement("div");
+    this.host.id = "uivisor-root";
+    this.host.setAttribute("data-uiv-ignore", "");
+    this.root = this.host.attachShadow({ mode: "open" });
+    document.documentElement.appendChild(this.host);
+    this.root.innerHTML = `
+      <style>${CSS}</style>
+      <div class="uiv-framewrap">
+        <div class="uiv-framebar"><span class="uiv-framew">768px</span><span class="uiv-framex" title="Exit responsive">\u2715 exit</span></div>
+        <div class="uiv-framestage">
+          <div class="uiv-framehost">
+            <iframe class="uiv-frame" data-uiv-frame="1"></iframe>
+            <div class="uiv-framehandle" title="Drag to resize"></div>
+          </div>
+        </div>
+      </div>
+      <div class="uiv-box hover"></div>
+      <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-toast"></div>
+      <div class="uiv-panel">
+        <div class="uiv-head">
+          <b>uivisor</b>
+          <span class="uiv-bp">base</span>
+          <span class="uiv-x" title="Close">\u2715</span>
+        </div>
+        <div class="uiv-body"></div>
+        <div class="uiv-foot">
+          <button class="uiv-btn primary copy-prompt">Copy prompt for agent</button>
+          <button class="uiv-btn copy-json">Copy JSON</button>
+          <button class="uiv-btn ghost reset" title="Revert tweaks on selected element">Reset</button>
+          <button class="uiv-btn ghost clear" title="Clear all">Clear</button>
+        </div>
+      </div>
+    `;
+    this.hoverBox = this.q(".uiv-box.hover");
+    this.selBox = this.q(".uiv-box.sel");
+    this.tag = this.q(".uiv-tag");
+    this.fab = this.q(".uiv-fab");
+    this.panel = this.q(".uiv-panel");
+    this.bpBadge = this.q(".uiv-bp");
+    this.toast = this.q(".uiv-toast");
+    this.frameWrap = this.q(".uiv-framewrap");
+    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(".copy-prompt").addEventListener("click", () => this.copyPrompt());
+    this.q(".copy-json").addEventListener("click", () => this.copyJSON());
+    this.q(".reset").addEventListener("click", () => this.resetSelected());
+    this.q(".clear").addEventListener("click", () => this.clearAll());
+    this.bindFrameHandle();
+    this.attachPicker(document);
+    document.addEventListener("keydown", this.onKey, true);
+    window.addEventListener("scroll", this.reposition, true);
+    window.addEventListener("resize", this.onResize, true);
+    this.renderBody();
+    this.updateBp();
+  }
+  q(sel) {
+    return this.root.querySelector(sel);
+  }
+  isOurs(e) {
+    return e.composedPath().includes(this.host);
+  }
+  // ---- enable / disable ----
+  toggle(force) {
+    this.enabled = force ?? !this.enabled;
+    this.fab.classList.toggle("on", this.enabled);
+    this.panel.classList.toggle("show", this.enabled);
+    if (!this.enabled) {
+      this.hoverBox.style.display = "none";
+      this.tag.style.display = "none";
+      if (this.responsive) this.toggleResponsive(false);
+    } else {
+      this.scheduleBpRefresh();
+    }
+  }
+  /** 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() {
+    const key = (s) => s.name + ":" + s.breakpoints.map((b) => b.minWidth).join(",");
+    const refresh = () => {
+      if (!this.enabled) return;
+      const prev = this._bp;
+      this._bp = null;
+      const next = this.bpSystem();
+      if (!prev || key(prev) !== key(next)) this.renderBody();
+    };
+    for (const d of [250, 900, 2200]) window.setTimeout(refresh, d);
+  }
+  // ---- responsive (virtual screen) mode ----
+  /** The document the inspector currently targets: the iframe in responsive mode. */
+  doc() {
+    if (this.responsive && this.frame.contentDocument) return this.frame.contentDocument;
+    return document;
+  }
+  /** Offset of the iframe within the top viewport (for positioning highlight boxes). */
+  frameOffset() {
+    if (this.responsive) {
+      const r = this.frame.getBoundingClientRect();
+      return { x: r.left, y: r.top };
+    }
+    return { x: 0, y: 0 };
+  }
+  attachPicker(d) {
+    d.addEventListener("mousemove", this.onMove, true);
+    d.addEventListener("click", this.onClick, true);
+    d.addEventListener("keydown", this.onKey, true);
+  }
+  detachPicker(d) {
+    d.removeEventListener("mousemove", this.onMove, true);
+    d.removeEventListener("click", this.onClick, true);
+    d.removeEventListener("keydown", this.onKey, true);
+  }
+  toggleResponsive(force) {
+    const next = force ?? !this.responsive;
+    if (next === this.responsive) return;
+    const prevId = this.selected ? this.st()?.record.identity ?? null : null;
+    this.detachPicker(this.doc());
+    this.selected = null;
+    if (next) {
+      this.responsive = true;
+      this.frameWrap.classList.add("show");
+      this.setFrameWidth(this.frameWidth);
+      this.frame.onload = () => {
+        const fd = this.frame.contentDocument;
+        if (fd) {
+          this.attachPicker(fd);
+          this.reselect(prevId, fd);
+        }
+        this.reposition();
+      };
+      this.frame.src = location.href;
+    } else {
+      this.responsive = false;
+      this.frameWrap.classList.remove("show");
+      this.frame.onload = null;
+      this.frame.src = "about:blank";
+      this.attachPicker(document);
+      this.reselect(prevId, document);
+    }
+    this.reposition();
+    this.updateBp();
+    this.renderBody();
+  }
+  /** Find and re-select the element matching a prior identity in the given doc. */
+  reselect(id, doc) {
+    if (!id) return;
+    let el = null;
+    if (id.dataTestId) el = doc.querySelector(`[data-testid="${cssAttrEscape(id.dataTestId)}"]`);
+    if (!el && id.source.confidence !== "none") {
+      const raw = `${id.source.file}:${id.source.line}:${id.source.column}`;
+      el = [...doc.querySelectorAll("[data-uiv-src]")].find(
+        (e) => e.getAttribute("data-uiv-src") === raw && (!id.textSnippet || (e.textContent || "").includes(id.textSnippet))
+      ) || [...doc.querySelectorAll("[data-uiv-src]")].find((e) => e.getAttribute("data-uiv-src") === raw) || null;
+    }
+    if (!el && id.selector) {
+      try {
+        el = doc.querySelector(id.selector);
+      } catch {
+      }
+    }
+    if (el) this.select(el);
+  }
+  setFrameWidth(w) {
+    this.frameWidth = Math.max(280, Math.min(2400, Math.round(w)));
+    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.updateBp();
+    this.reposition();
+  }
+  bindFrameHandle() {
+    const handle = this.q(".uiv-framehandle");
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = this.frameWidth;
+      try {
+        handle.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const move = (ev) => this.setFrameWidth(startW + (ev.clientX - startX) * 2);
+      const up = () => {
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", up);
+        this.retagSelected();
+        this.renderBody();
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", up);
+    });
+  }
+  place(box, r) {
+    const o = this.frameOffset();
+    box.style.left = `${r.left + o.x}px`;
+    box.style.top = `${r.top + o.y}px`;
+    box.style.width = `${r.width}px`;
+    box.style.height = `${r.height}px`;
+  }
+  // ---- selection ----
+  select(el) {
+    this.selected = el;
+    if (el && !this.states.has(el)) {
+      const authoredInlineLen = (el.getAttribute("style") || "").length;
+      const identity = getIdentity(el);
+      const record = {
+        id: `e${++counter}`,
+        identity,
+        styling: detectMechanism(el, authoredInlineLen),
+        changes: [],
+        // Repeated instances default to "all" — editing the shared source/component
+        // updates every sibling, which is what people usually want.
+        target: identity.instanceCount > 1 ? "all" : "element"
+      };
+      this.states.set(el, {
+        record,
+        original: snapshot(el, ALL_CSS),
+        applied: /* @__PURE__ */ new Set(),
+        dimUnit: {}
+      });
+    }
+    this.reposition();
+    this.renderBody();
+  }
+  // ---- value helpers ----
+  st() {
+    return this.selected ? this.states.get(this.selected) ?? null : null;
+  }
+  liveVal(css) {
+    const el = this.selected;
+    const st = this.st();
+    if (!el || !st) return "";
+    return el.style.getPropertyValue(css) || st.original[css] || "";
+  }
+  liveNum(css) {
+    const v = this.liveVal(css).trim();
+    const m = /^(-?\d*\.?\d+)px$/.exec(v);
+    if (m) return parseFloat(m[1]);
+    if (v === "") return null;
+    const n = parseFloat(v);
+    return Number.isFinite(n) ? n : null;
+  }
+  numInfo(cssList) {
+    const nums = cssList.map((c) => this.liveNum(c));
+    if (nums.length === 1) return { value: nums[0] == null ? "" : String(round2(nums[0])), mixed: false };
+    const first = nums[0];
+    const allEqual = nums.every((n) => n != null && n === first);
+    return allEqual ? { value: String(round2(first)), mixed: false } : { value: "", mixed: true };
+  }
+  isChanged(cssList) {
+    const st = this.st();
+    if (!st) return false;
+    return cssList.some((c) => st.record.changes.some((ch) => ch.property === c));
+  }
+  selectCurrent(css) {
+    let v = this.liveVal(css).trim();
+    if (v === "normal") v = "400";
+    if (v === "bold") v = "700";
+    return v;
+  }
+  // ---- apply / record / revert ----
+  /** All elements that share the selected element's JSX origin (or tag+class). */
+  siblingsOf(el) {
+    try {
+      const doc = el.ownerDocument;
+      const raw = el.closest("[data-uiv-src]")?.getAttribute("data-uiv-src");
+      if (raw) {
+        const m = [...doc.querySelectorAll("[data-uiv-src]")].filter(
+          (e) => e.getAttribute("data-uiv-src") === raw
+        );
+        if (m.length) return m;
+      }
+      if (el.classList.length) {
+        const sig = (e) => `${e.tagName}|${[...e.classList].sort().join(" ")}`;
+        const mine = sig(el);
+        const m = [...doc.querySelectorAll(el.tagName)].filter((e) => sig(e) === mine);
+        if (m.length) return m;
+      }
+    } catch {
+    }
+    return [el];
+  }
+  /** Elements the current edit applies to: all siblings when target is "all". */
+  targetEls() {
+    const el = this.selected;
+    if (!el) return [];
+    return this.st()?.record.target === "all" ? this.siblingsOf(el) : [el];
+  }
+  liveSet(cssList, value) {
+    if (!this.selected) return;
+    for (const el of this.targetEls()) {
+      for (const css of cssList) applyOverride(el, css, value);
+    }
+    this.reposition();
+  }
+  /** Re-apply recorded overrides after the target (all ↔ one) changes. */
+  reapplyForTarget() {
+    const el = this.selected;
+    const st = this.st();
+    if (!el || !st) return;
+    const sibs = this.siblingsOf(el);
+    const targets = this.targetEls();
+    const props = new Set(st.record.changes.map((c) => c.property));
+    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);
+    }
+    this.reposition();
+  }
+  /** The breakpoint recorded edits are scoped to: manual override, else window. */
+  /** The breakpoint edits are scoped to: the virtual screen's width when in
+   *  responsive mode, otherwise the real window. */
+  activeScope() {
+    const sys = this.bpSystem();
+    if (this.responsive) return activeBreakpoint(this.frameWidth, sys);
+    return currentBreakpoint(sys);
+  }
+  /** Re-tag the selected element's already-recorded changes to the current scope. */
+  retagSelected() {
+    const st = this.st();
+    if (!st) return;
+    const scope = this.activeScope();
+    for (const c of st.record.changes) {
+      c.breakpoint = scope.name;
+      c.breakpointPx = scope.minWidth;
+    }
+  }
+  recordProps(cssList) {
+    const el = this.selected;
+    const st = this.st();
+    if (!el || !st) return;
+    const scope = this.activeScope();
+    for (const css of cssList) {
+      const applied = el.style.getPropertyValue(css);
+      if (!applied) continue;
+      st.applied.add(css);
+      this.setChange(st.record, buildChange(css, st.original[css], applied, scope));
+    }
+    this.renderBody();
+  }
+  revertProps(cssList) {
+    const el = this.selected;
+    const st = this.st();
+    if (!el || !st) return;
+    const sibs = this.siblingsOf(el);
+    for (const css of cssList) {
+      for (const e of sibs) removeOverride(e, css);
+      st.applied.delete(css);
+      st.record.changes = st.record.changes.filter((c) => c.property !== css);
+    }
+    this.reposition();
+    this.renderBody();
+  }
+  commitNumeric(cssList, raw) {
+    if (raw.trim() === "") {
+      this.revertProps(cssList);
+      return;
+    }
+    const n = parseFloat(raw);
+    if (!Number.isFinite(n)) return;
+    this.liveSet(cssList, `${n}px`);
+    this.recordProps(cssList);
+  }
+  commitValue(cssList, value, allowEmpty = false) {
+    if (allowEmpty && value.trim() === "") {
+      this.revertProps(cssList);
+      return;
+    }
+    this.liveSet(cssList, value);
+    this.recordProps(cssList);
+  }
+  onDimInput(css, box) {
+    const st = this.st();
+    if (!st) return;
+    const input = box.querySelector("input");
+    const unit = box.querySelector(".uiv-unit").value;
+    st.dimUnit[css] = unit;
+    const num = input.value.trim();
+    if (num === "") {
+      this.revertProps([css]);
+      return;
+    }
+    this.liveSet([css], unit === "" ? num : `${num}${unit}`);
+    this.recordProps([css]);
+  }
+  /** Switching the unit only changes how the value is shown — it converts, it
+   *  does not re-apply or clear the number. */
+  onUnitChange(css, box) {
+    const st = this.st();
+    if (!st) return;
+    st.dimUnit[css] = box.querySelector(".uiv-unit").value;
+    this.renderBody();
+  }
+  setChange(record, entry) {
+    record.changes = record.changes.filter(
+      (c) => !(c.property === entry.property && c.breakpoint === entry.breakpoint)
+    );
+    if (entry.before.computed !== entry.after.computed) record.changes.push(entry);
+  }
+  // ---- rendering ----
+  renderBody() {
+    const body = this.q(".uiv-body");
+    if (!this.selected) {
+      body.innerHTML = `
+        ${this.breakpointBarHtml()}
+        <div class="uiv-empty">Click any element ${this.responsive ? "in the frame" : "on the page"} to select it.</div>
+        <div class="uiv-hint">Alt+U toggles \xB7 Esc deselects. Tweaks stay in the browser \u2014 nothing is written to your code.</div>
+        ${this.journalHtml()}
+      `;
+      this.bindControls();
+      return;
+    }
+    const st = this.states.get(this.selected);
+    const id = st.record.identity;
+    const src = id.source.confidence !== "none" ? `${id.source.file}:${id.source.line}:${id.source.column}` : id.componentName ? `&lt;${id.componentName}&gt; (no source map)` : id.selector;
+    body.innerHTML = `
+      <div class="uiv-sec uiv-meta">
+        <div><span class="uiv-el">&lt;${id.tagName}&gt;</span> ${id.textSnippet ? `"${escapeHtml(id.textSnippet)}"` : ""}</div>
+        <div class="uiv-src">${escapeHtml(src)}</div>
+        <span class="uiv-mech">${st.record.styling.primaryMechanism}</span>
+      </div>
+      ${this.breakpointBarHtml()}
+      ${this.targetHtml(st)}
+      ${this.controlsHtml(this.context(this.selected))}
+      ${this.journalHtml()}
+    `;
+    this.bindControls();
+  }
+  /** Breakpoint scope switcher: shows the PROJECT's breakpoints + the live window one. */
+  breakpointBarHtml() {
+    const sys = this.bpSystem();
+    const bps = sys.breakpoints;
+    const names = ["base", ...bps.map((b) => b.name)];
+    const frameBp = this.responsive ? activeBreakpoint(this.frameWidth, sys).name : null;
+    const liveChip = `<button class="uiv-chip${!this.responsive ? " on" : ""}" data-bp="live" title="Your real browser window">Live</button>`;
+    const chips = names.map((n) => {
+      const active = this.responsive && n === frameBp;
+      const px2 = n === "base" ? 0 : bps.find((b) => b.name === n).minWidth;
+      return `<button class="uiv-chip${active ? " on" : ""}" data-bp="${n}" title="Preview at \u2265${px2}px">${n}</button>`;
+    }).join("");
+    const detected = sys.name === "detected" ? "" : " (defaults)";
+    const hint = this.responsive ? `Virtual screen at <b>${this.frameWidth}px</b> (${frameBp}). Edits scoped to <b>${frameBp}:</b>. Drag the frame edge to fine-tune.` : `Click a size to shrink the screen to it & design for that breakpoint. Live = your real window.`;
+    return `<div class="uiv-sec"><div class="uiv-sectitle">Screen / breakpoint${detected}</div><div class="uiv-chips">${liveChip}${chips}</div><div class="uiv-bphint">${hint}</div></div>`;
+  }
+  /** "Apply changes to": this element, an existing shared class, or a NEW class. */
+  targetHtml(st) {
+    const target = st.record.target;
+    const classes = st.record.identity.classList;
+    const isNew = target.startsWith("new:");
+    const newName = isNew ? target.slice(4) : "";
+    const n = st.record.identity.instanceCount;
+    const chip = (val, label, on) => `<button class="uiv-clschip${on ? " on" : ""}" data-target="${escapeAttr(val)}">${escapeHtml(label)}</button>`;
+    const allChip = n > 1 ? chip("all", `All ${n} like this`, target === "all") : "";
+    const elChip = chip("element", n > 1 ? "Only this one" : "This element", target === "element");
+    const classChips = classes.map((c) => chip(c, `.${c}`, target === c)).join("");
+    const newInput = `<input class="uiv-newclass${isNew ? " on" : ""}" placeholder="+ new class" value="${escapeAttr(newName)}" title="Create a new class instead of touching the existing ones">`;
+    return `<div class="uiv-sec"><div class="uiv-sectitle">Apply changes to</div><div class="uiv-chips">${allChip}${elChip}${classChips}${newInput}</div></div>`;
+  }
+  /** Decide which controls are relevant to the selected element. */
+  context(el) {
+    const hasText = Array.from(el.childNodes).some(
+      (n) => n.nodeType === 3 && (n.textContent || "").trim().length > 0
+    );
+    let flexGrid = false;
+    try {
+      flexGrid = /flex|grid/.test(getComputedStyle(el).display);
+    } catch {
+    }
+    return { hasText, flexGrid };
+  }
+  relevant(c, ctx) {
+    const req = c.requires;
+    if (req === "text") return ctx.hasText;
+    if (req === "flexgrid") return ctx.flexGrid;
+    return true;
+  }
+  controlsHtml(ctx) {
+    return SECTIONS.map((sec) => {
+      const controls = sec.controls.filter((c) => this.relevant(c, ctx));
+      if (!controls.length) return "";
+      const rows = controls.map((c) => this.controlRow(c)).join("");
+      return `<div class="uiv-sec"><div class="uiv-sectitle">${sec.title}</div>${rows}</div>`;
+    }).join("");
+  }
+  numField(cssAttr, value, handle, changed, isSide, placeholder) {
+    return `<div class="uiv-num${changed ? " changed" : ""}" data-css="${cssAttr}"><span class="uiv-scrub${isSide ? " txt" : ""}" title="Drag to change">${handle}</span><input type="number" value="${escapeAttr(value)}" placeholder="${escapeAttr(placeholder)}"></div>`;
+  }
+  fontSizePx() {
+    const el = this.selected;
+    if (!el) return 16;
+    try {
+      return parseFloat(getComputedStyle(el).fontSize) || 16;
+    } catch {
+      return 16;
+    }
+  }
+  /** Measure the used px height of `line-height: normal` for the element's font. */
+  measureNormalLineHeight() {
+    const el = this.selected;
+    if (!el) return null;
+    try {
+      const cs = getComputedStyle(el);
+      const probe = document.createElement("div");
+      probe.textContent = "Mg";
+      probe.style.cssText = "position:absolute;left:-99999px;top:0;visibility:hidden;white-space:nowrap;margin:0;padding:0;border:0;line-height:normal";
+      probe.style.fontFamily = cs.fontFamily;
+      probe.style.fontSize = cs.fontSize;
+      probe.style.fontWeight = cs.fontWeight;
+      probe.style.fontStyle = cs.fontStyle;
+      document.body.appendChild(probe);
+      const h = probe.getBoundingClientRect().height;
+      probe.remove();
+      return h || null;
+    } catch {
+      return null;
+    }
+  }
+  /** Resolve a dim property's current value to px. */
+  currentPx(css) {
+    const v = this.liveVal(css).trim();
+    if (v === "" || v === "normal" || v === "auto") {
+      if (css === "letter-spacing") return 0;
+      if (css === "line-height") return this.measureNormalLineHeight();
+      return null;
+    }
+    const fs = this.fontSizePx();
+    let m;
+    if (m = /^(-?\d*\.?\d+)px$/.exec(v)) return parseFloat(m[1]);
+    if (m = /^(-?\d*\.?\d+)em$/.exec(v)) return parseFloat(m[1]) * fs;
+    if (m = /^(-?\d*\.?\d+)rem$/.exec(v)) return parseFloat(m[1]) * 16;
+    if (m = /^(-?\d*\.?\d+)%$/.exec(v)) return parseFloat(m[1]) / 100 * fs;
+    if ((m = /^(-?\d*\.?\d+)$/.exec(v)) && css === "line-height") return parseFloat(m[1]) * fs;
+    return null;
+  }
+  pxToUnit(px2, unit) {
+    const fs = this.fontSizePx();
+    if (unit === "em" || unit === "") return px2 / fs;
+    if (unit === "%") return px2 / fs * 100;
+    return px2;
+  }
+  dimDisplay(c) {
+    const st = this.st();
+    const computed = this.liveVal(c.css);
+    const unit = st.dimUnit[c.css] ?? c.defaultUnit;
+    const px2 = this.currentPx(c.css);
+    if (px2 == null) return { num: "", unit, placeholder: computed || "normal" };
+    return { num: String(round2(this.pxToUnit(px2, unit))), unit, placeholder: computed || "\u2014" };
+  }
+  dimField(c) {
+    const d = this.dimDisplay(c);
+    const changed = this.isChanged([c.css]);
+    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>`;
+  }
+  controlRow(c) {
+    if (c.kind === "box") {
+      const cssList = c.sides.map((s) => s.css);
+      const info = this.numInfo(cssList);
+      const changed = this.isChanged(cssList);
+      const open = this.expanded.has(c.key);
+      let html = `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield">${this.numField(cssList.join(","), info.mixed ? "" : info.value, c.icon, changed, false, info.mixed ? "Mixed" : "\u2014")}</div><button class="uiv-expand${open ? " on" : ""}" data-key="${c.key}" title="Edit each side individually">${open ? ICONS.collapse : ICONS.expand}</button></div>`;
+      if (open) {
+        html += `<div class="uiv-sides">` + c.sides.map((s) => {
+          const v = this.liveNum(s.css);
+          return this.numField(
+            s.css,
+            v == null ? "" : String(round2(v)),
+            s.label,
+            this.isChanged([s.css]),
+            true,
+            "\u2014"
+          );
+        }).join("") + `</div>`;
+      }
+      return html;
+    }
+    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>`;
+    }
+    if (c.kind === "dim") {
+      return this.dimField(c);
+    }
+    if (c.kind === "select") {
+      const cur = this.selectCurrent(c.css);
+      const opts = c.options.map((o) => `<option value="${o}"${o === cur ? " selected" : ""}>${o}</option>`).join("");
+      return `<div class="uiv-ctl"><span class="clabel">${c.label}</span><div class="cfield"><select class="uiv-sel" 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" data-css="${c.css}" value="${val}"></div><span></span></div>`;
+  }
+  bindControls() {
+    const root = this.root;
+    root.querySelectorAll(".uiv-num:not(.uiv-dim)").forEach((node) => {
+      const box = node;
+      const cssList = (box.getAttribute("data-css") || "").split(",").filter(Boolean);
+      const input = box.querySelector("input");
+      const handle = box.querySelector(".uiv-scrub");
+      input.addEventListener("change", () => this.commitNumeric(cssList, input.value));
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") input.blur();
+      });
+      if (handle) this.bindScrub(handle, input, cssList);
+    });
+    root.querySelectorAll(".uiv-dim").forEach((node) => {
+      const box = node;
+      const css = box.getAttribute("data-css");
+      const input = box.querySelector("input");
+      const unitSel = box.querySelector(".uiv-unit");
+      const handle = box.querySelector(".uiv-scrub");
+      input.addEventListener("change", () => this.onDimInput(css, box));
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") input.blur();
+      });
+      unitSel.addEventListener("change", () => this.onUnitChange(css, box));
+      if (handle) this.bindDimScrub(handle, input, unitSel, css, box);
+    });
+    root.querySelectorAll(".uiv-color").forEach((node) => {
+      const input = node;
+      const css = input.getAttribute("data-css");
+      input.addEventListener("change", () => this.commitValue([css], input.value));
+    });
+    root.querySelectorAll(".uiv-sel").forEach((node) => {
+      const sel = node;
+      const css = sel.getAttribute("data-css");
+      sel.addEventListener("change", () => this.commitValue([css], sel.value));
+    });
+    root.querySelectorAll(".uiv-expand").forEach((node) => {
+      const btn = node;
+      const key = btn.getAttribute("data-key");
+      btn.addEventListener("click", () => {
+        if (this.expanded.has(key)) this.expanded.delete(key);
+        else this.expanded.add(key);
+        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.retagSelected();
+          this.renderBody();
+        }
+      });
+    });
+    root.querySelectorAll(".uiv-clschip").forEach((node) => {
+      const btn = node;
+      const target = btn.getAttribute("data-target");
+      btn.addEventListener("click", () => {
+        const st = this.st();
+        if (st) st.record.target = target;
+        this.reapplyForTarget();
+        this.renderBody();
+      });
+    });
+    root.querySelectorAll(".uiv-newclass").forEach((node) => {
+      const input = node;
+      input.addEventListener("change", () => {
+        const st = this.st();
+        if (!st) return;
+        const name = input.value.trim().replace(/^\./, "").replace(/\s+/g, "-");
+        st.record.target = name ? `new:${name}` : "element";
+        this.renderBody();
+      });
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") input.blur();
+      });
+    });
+  }
+  bindScrub(handle, input, cssList) {
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const start2 = parseFloat(input.value) || 0;
+      try {
+        handle.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const move = (ev) => {
+        const dx = ev.clientX - startX;
+        let nv = start2 + Math.round(dx);
+        if (ev.shiftKey) nv = Math.round(nv / 10) * 10;
+        input.value = String(nv);
+        this.liveSet(cssList, `${nv}px`);
+      };
+      const up = () => {
+        try {
+          handle.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", up);
+        this.recordProps(cssList);
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", up);
+    });
+  }
+  bindDimScrub(handle, input, unitSel, css, box) {
+    handle.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const start2 = parseFloat(input.value) || 0;
+      try {
+        handle.setPointerCapture(e.pointerId);
+      } catch {
+      }
+      const stepFor = (u) => u === "" ? 0.1 : u === "em" ? 0.01 : 1;
+      const move = (ev) => {
+        const u = unitSel.value;
+        const step = stepFor(u) * (ev.shiftKey ? 10 : 1);
+        const dec = step < 0.1 ? 2 : step < 1 ? 1 : 0;
+        const nv = +(start2 + (ev.clientX - startX) * step).toFixed(dec);
+        input.value = String(nv);
+        this.liveSet([css], u === "" ? String(nv) : `${nv}${u}`);
+      };
+      const up = () => {
+        try {
+          handle.releasePointerCapture(e.pointerId);
+        } catch {
+        }
+        handle.removeEventListener("pointermove", move);
+        handle.removeEventListener("pointerup", up);
+        this.onDimInput(css, box);
+      };
+      handle.addEventListener("pointermove", move);
+      handle.addEventListener("pointerup", up);
+    });
+  }
+  journalHtml() {
+    const records = [...this.states.values()].map((s) => s.record).filter((r) => r.changes.length > 0);
+    if (!records.length) return "";
+    const count = records.reduce((n, r) => n + collapseChanges(r.changes).length, 0);
+    const items = records.map((r) => this.journalItem(r)).join("");
+    return `<div class="uiv-sec"><div class="uiv-sectitle">Recorded (${count})</div><div class="uiv-journal">${items}</div></div>`;
+  }
+  journalItem(r) {
+    const id = r.identity;
+    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>` : "";
+      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>`;
+  }
+  // ---- actions ----
+  records() {
+    return [...this.states.values()].map((s) => s.record).filter((r) => r.changes.length > 0);
+  }
+  async copyPrompt() {
+    const recs = this.records();
+    if (!recs.length) return this.showToast("No tweaks recorded yet");
+    await this.copy(renderPrompt(recs));
+    this.showToast("Prompt copied \u2713");
+  }
+  async copyJSON() {
+    const recs = this.records();
+    if (!recs.length) return this.showToast("No tweaks recorded yet");
+    const spec = renderSpec(recs, {
+      url: location.href,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      dpr: window.devicePixelRatio,
+      now: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    await this.copy(JSON.stringify(spec, null, 2));
+    this.showToast("JSON copied \u2713");
+  }
+  resetSelected() {
+    const el = this.selected;
+    if (!el) return;
+    const st = this.states.get(el);
+    if (!st) return;
+    const sibs = this.siblingsOf(el);
+    for (const css of st.applied) for (const e of sibs) removeOverride(e, css);
+    st.applied.clear();
+    st.record.changes = [];
+    this.reposition();
+    this.renderBody();
+  }
+  clearAll() {
+    for (const [el, st] of this.states) {
+      const sibs = this.siblingsOf(el);
+      for (const css of st.applied) for (const e of sibs) removeOverride(e, css);
+    }
+    this.states.clear();
+    this.selected = null;
+    this.reposition();
+    this.renderBody();
+  }
+  async copy(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      this.root.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      ta.remove();
+    }
+  }
+  updateBp() {
+    if (this.responsive) {
+      const bp = activeBreakpoint(this.frameWidth, this.bpSystem()).name;
+      this.bpBadge.textContent = `${bp} \xB7 ${this.frameWidth}px`;
+    } else {
+      const bp = currentBreakpoint(this.bpSystem());
+      this.bpBadge.textContent = `${bp.name} \xB7 ${window.innerWidth}px`;
+    }
+  }
+  showToast(msg) {
+    this.toast.textContent = msg;
+    this.toast.classList.add("show");
+    window.setTimeout(() => this.toast.classList.remove("show"), 1600);
+  }
+};
+function escapeHtml(s) {
+  return s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+}
+function escapeAttr(s) {
+  return s.replace(/"/g, "&quot;");
+}
+function cssAttrEscape(s) {
+  return s.replace(/["\\]/g, "\\$&");
+}
+var instance = null;
+function start() {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  try {
+    if (window.frameElement?.getAttribute("data-uiv-frame")) return;
+  } catch {
+  }
+  if (instance || document.getElementById("uivisor-root")) return;
+  instance = new Uivisor();
+  const boot = () => instance.mount();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", boot, { once: true });
+  } else {
+    boot();
+  }
+}
+start();
+export {
+  start
+};