@nuvio/overlay 0.5.4 → 1.0.0

package/dist/index.js

@@ -69,6 +69,71 @@ function isNuvioChromeComposedPath(event) {
   return false;
 }
 
+// src/nuvio-loc-dom.ts
+var LOC_ATTR = "data-nuvio-loc";
+function parseNuvioLocAttribute(value) {
+  const match = /^(.+):(\d+):(\d+)$/.exec(value.trim());
+  if (!match) {
+    return null;
+  }
+  return {
+    file: match[1],
+    line: Number(match[2]),
+    column: Number(match[3])
+  };
+}
+function readUntaggedLocTarget(el) {
+  const host = el.closest(`[${LOC_ATTR}]`);
+  if (!(host instanceof HTMLElement)) {
+    return null;
+  }
+  if (host.hasAttribute("data-nuvio-id")) {
+    return null;
+  }
+  const raw = host.getAttribute(LOC_ATTR);
+  if (!raw) {
+    return null;
+  }
+  const parsed = parseNuvioLocAttribute(raw);
+  if (!parsed) {
+    return null;
+  }
+  return {
+    ...parsed,
+    tagName: host.tagName.toLowerCase()
+  };
+}
+function pickUntaggedClickTarget(clientX, clientY, chromeRootRefs, knownIds) {
+  const stack = document.elementsFromPoint(clientX, clientY);
+  for (const node of stack) {
+    if (!(node instanceof HTMLElement)) {
+      continue;
+    }
+    let underChrome = false;
+    for (const ref of chromeRootRefs) {
+      if (ref.current?.contains(node)) {
+        underChrome = true;
+        break;
+      }
+    }
+    if (underChrome) {
+      continue;
+    }
+    const withId = node.closest("[data-nuvio-id]");
+    if (withId instanceof HTMLElement) {
+      const id = withId.getAttribute("data-nuvio-id")?.trim() ?? "";
+      if (id && knownIds.has(id)) {
+        return null;
+      }
+    }
+    const withLoc = node.closest(`[${LOC_ATTR}]`);
+    if (withLoc instanceof HTMLElement && !withLoc.hasAttribute("data-nuvio-id")) {
+      return withLoc;
+    }
+  }
+  return null;
+}
+
 // src/nuvio-dom.ts
 function escapeAttrSelector(id) {
   if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
@@ -195,6 +260,8 @@ function InteractionLayer({
   knownIds,
   selectedId,
   onSelectId,
+  untaggedTarget,
+  onSelectUntagged,
   textTargetHostId = null,
   textTargets = [],
   activeTextTargetKey = null,
@@ -202,34 +269,66 @@ function InteractionLayer({
   suppressTextTargetHints = false
 }) {
   const [hoverId, setHoverId] = useState(null);
+  const [hoverUntagged, setHoverUntagged] = useState(null);
   useEffect(() => {
     if (!enabled) {
       setHoverId(null);
+      setHoverUntagged(null);
       return;
     }
     const onMove = (e) => {
       if (isNuvioChromeComposedPath(e)) {
         setHoverId(null);
+        setHoverUntagged(null);
         return;
       }
       const el = pickIndexedTarget(e.clientX, e.clientY, chromeRootRefs, knownIds);
-      const id = el?.getAttribute("data-nuvio-id") ?? null;
-      setHoverId(id);
+      if (el) {
+        setHoverId(el.getAttribute("data-nuvio-id"));
+        setHoverUntagged(null);
+        return;
+      }
+      const untagged = pickUntaggedClickTarget(
+        e.clientX,
+        e.clientY,
+        chromeRootRefs,
+        knownIds
+      );
+      setHoverId(null);
+      setHoverUntagged(untagged);
     };
     const onClick = (e) => {
       if (isNuvioChromeComposedPath(e)) {
         return;
       }
       const el = pickIndexedTarget(e.clientX, e.clientY, chromeRootRefs, knownIds);
-      if (!el) {
+      if (el) {
+        e.preventDefault();
+        e.stopPropagation();
+        const id = el.getAttribute("data-nuvio-id");
+        if (id) {
+          onSelectUntagged(null);
+          onSelectId(id);
+        }
+        return;
+      }
+      const untaggedEl = pickUntaggedClickTarget(
+        e.clientX,
+        e.clientY,
+        chromeRootRefs,
+        knownIds
+      );
+      if (!untaggedEl) {
+        return;
+      }
+      const target = readUntaggedLocTarget(untaggedEl);
+      if (!target) {
         return;
       }
       e.preventDefault();
       e.stopPropagation();
-      const id = el.getAttribute("data-nuvio-id");
-      if (id) {
-        onSelectId(id);
-      }
+      onSelectId(null);
+      onSelectUntagged(target);
     };
     window.addEventListener("mousemove", onMove, true);
     window.addEventListener("click", onClick, true);
@@ -237,8 +336,9 @@ function InteractionLayer({
       window.removeEventListener("mousemove", onMove, true);
       window.removeEventListener("click", onClick, true);
       setHoverId(null);
+      setHoverUntagged(null);
     };
-  }, [chromeRootRefs, enabled, knownIds, onSelectId]);
+  }, [chromeRootRefs, enabled, knownIds, onSelectId, onSelectUntagged]);
   useEffect(() => {
     clearNuvioOutlines();
     if (!enabled) {
@@ -247,6 +347,8 @@ function InteractionLayer({
     const hoverPaint = hoverId && hoverId !== selectedId ? hoverId : null;
     if (hoverPaint) {
       paintNuvioOutline(hoverPaint, "hover");
+    } else if (hoverUntagged) {
+      paintNuvioOutlineElement(hoverUntagged, "hover");
     }
     const showTargetHints = !suppressTextTargetHints && textTargetHostId && selectedId === textTargetHostId && textTargets.length > 1;
     if (showTargetHints && textTargetHostId) {
@@ -264,11 +366,20 @@ function InteractionLayer({
       paintNuvioOutline(textTargetHostId, "selected");
     } else if (selectedId) {
       paintNuvioOutline(selectedId, "selected");
+    } else if (untaggedTarget) {
+      const el = document.querySelector(
+        `[data-nuvio-loc="${CSS.escape(`${untaggedTarget.file}:${untaggedTarget.line}:${untaggedTarget.column}`)}"]`
+      );
+      if (el instanceof HTMLElement) {
+        paintNuvioOutlineElement(el, "selected");
+      }
     }
   }, [
     enabled,
     hoverId,
+    hoverUntagged,
     selectedId,
+    untaggedTarget,
     textTargetHostId,
     textTargets,
     activeTextTargetKey,
@@ -277,6 +388,75 @@ function InteractionLayer({
   return null;
 }
 
+// src/suggest-nuvio-id.ts
+import {
+  isValidNuvioId,
+  NUVIO_ID_PATTERN,
+  suggestNuvioId
+} from "@nuvio/shared";
+
+// src/MakeEditablePanel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MakeEditablePanel({
+  target,
+  suggestedId,
+  onSuggestedIdChange,
+  onConfirm,
+  onCancel,
+  busy,
+  error
+}) {
+  const idOk = isValidNuvioId(suggestedId.trim());
+  return /* @__PURE__ */ jsxs("div", { className: "nuvio-make-editable", children: [
+    /* @__PURE__ */ jsxs("p", { className: "nuvio-make-editable-lead", children: [
+      "This ",
+      /* @__PURE__ */ jsx("strong", { children: target.tagName }),
+      " element is not editable yet."
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "nuvio-make-editable-hint", children: [
+      "nuvio will add a ",
+      /* @__PURE__ */ jsx("code", { children: "data-nuvio-id" }),
+      " in your source file so you can edit it visually."
+    ] }),
+    /* @__PURE__ */ jsx("label", { className: "nuvio-field-label", htmlFor: "nuvio-suggested-id", children: "Editable id" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: "nuvio-suggested-id",
+        className: "nuvio-input",
+        value: suggestedId,
+        onChange: (e) => onSuggestedIdChange(e.target.value),
+        disabled: busy,
+        spellCheck: false
+      }
+    ),
+    !idOk ? /* @__PURE__ */ jsx("p", { className: "nuvio-field-error", children: "Use lowercase segments like page.title or hero.button" }) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "nuvio-field-error", children: error }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "nuvio-make-editable-actions", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "nuvio-button nuvio-button-primary",
+          disabled: busy || !idOk,
+          onClick: onConfirm,
+          children: busy ? "Tagging\u2026" : "Make Editable"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "nuvio-button nuvio-button-secondary",
+          disabled: busy,
+          onClick: onCancel,
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+
 // src/overlay-chrome-storage.ts
 var OVERLAY_CHROME_STORAGE_KEY = "nuvio:overlay-chrome:v2";
 var OVERLAY_CHROME_MARGIN = 24;
@@ -1191,12 +1371,12 @@ function mapUnsupportedReasonToSimple(reason) {
 function getSimpleBlockedEditFallback(selectedId, selectedEntry) {
   const textContext = selectedEntry?.textEditable === true || selectedId != null && /\.(label|value|nameText|name|price|category|status|title|subtitle)$/.test(selectedId) || selectedId != null && selectedId.includes(".header.");
   if (textContext) {
-    return "Nuvio can't safely edit this text yet.";
+    return "nuvio can't safely edit this text yet.";
   }
-  return "Nuvio can't safely edit this element.";
+  return "nuvio can't safely edit this element.";
 }
 function getSimpleIndexEmptyMessage() {
-  return "Nothing is set up to edit yet. Add Nuvio ids to elements in your project, then restart the dev server.";
+  return "Nothing is set up to edit yet. Add nuvio ids to elements in your project, then restart the dev server.";
 }
 function getSimplePatchBlockedMessage(indexIdCount, selectionResolved) {
   if (indexIdCount === 0) {
@@ -1238,7 +1418,7 @@ function getSimpleSelectErrorMessage(selectError) {
 }
 
 // src/ComponentTree.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function shortPath(file) {
   const norm = file.replace(/\\/g, "/");
   const parts = norm.split("/");
@@ -1320,11 +1500,11 @@ function ComponentTree({
     }
     return [...map.entries()].sort(([a], [b]) => a.localeCompare(b));
   }, [filtered]);
-  return /* @__PURE__ */ jsxs("section", { children: [
-    !friendlyLabels ? /* @__PURE__ */ jsx("h3", { className: "nuvio-tree-title", children: "Indexed elements" }) : null,
-    friendlyLabels ? /* @__PURE__ */ jsxs("label", { className: "nuvio-block nuvio-stack-1 nuvio-mb-2", children: [
-      /* @__PURE__ */ jsx("span", { className: "nuvio-label", children: "Search outline" }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("section", { children: [
+    !friendlyLabels ? /* @__PURE__ */ jsx2("h3", { className: "nuvio-tree-title", children: "Indexed elements" }) : null,
+    friendlyLabels ? /* @__PURE__ */ jsxs2("label", { className: "nuvio-block nuvio-stack-1 nuvio-mb-2", children: [
+      /* @__PURE__ */ jsx2("span", { className: "nuvio-label", children: "Search outline" }),
+      /* @__PURE__ */ jsx2(
         "input",
         {
           type: "search",
@@ -1335,7 +1515,7 @@ function ComponentTree({
         }
       )
     ] }) : null,
-    !friendlyLabels ? /* @__PURE__ */ jsx("div", { className: "nuvio-tree-filters", children: ["all", "text", "style", "structure", "unsupported", "duplicates"].map((key) => /* @__PURE__ */ jsx(
+    !friendlyLabels ? /* @__PURE__ */ jsx2("div", { className: "nuvio-tree-filters", children: ["all", "text", "style", "structure", "unsupported", "duplicates"].map((key) => /* @__PURE__ */ jsx2(
       "button",
       {
         type: "button",
@@ -1345,26 +1525,26 @@ function ComponentTree({
       },
       key
     )) }) : null,
-    filter === "duplicates" ? duplicateErrors.length === 0 ? /* @__PURE__ */ jsx("p", { className: "nuvio-text-xs nuvio-text-muted-dim", children: "No duplicate ids reported." }) : /* @__PURE__ */ jsx("ul", { className: "nuvio-tree-list", children: duplicateErrors.map((dup) => /* @__PURE__ */ jsxs("li", { className: "nuvio-tree-item", children: [
-      /* @__PURE__ */ jsx("p", { className: "nuvio-tree-dup-title", children: dup.id }),
-      dup.occurrences.map((occ, i) => /* @__PURE__ */ jsxs("p", { className: "nuvio-tree-btn-path", children: [
+    filter === "duplicates" ? duplicateErrors.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "nuvio-text-xs nuvio-text-muted-dim", children: "No duplicate ids reported." }) : /* @__PURE__ */ jsx2("ul", { className: "nuvio-tree-list", children: duplicateErrors.map((dup) => /* @__PURE__ */ jsxs2("li", { className: "nuvio-tree-item", children: [
+      /* @__PURE__ */ jsx2("p", { className: "nuvio-tree-dup-title", children: dup.id }),
+      dup.occurrences.map((occ, i) => /* @__PURE__ */ jsxs2("p", { className: "nuvio-tree-btn-path", children: [
         shortPath(occ.file),
         ":",
         occ.line
       ] }, `${dup.id}-${i}`))
-    ] }, dup.id)) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "nuvio-text-xs nuvio-text-muted-dim", children: "No ids in dev index." }) : groups.map(([groupKey, group]) => /* @__PURE__ */ jsxs("div", { className: "nuvio-tree-group", children: [
-      !friendlyLabels ? /* @__PURE__ */ jsx("p", { className: "nuvio-tree-group-title", children: groupKey === "__root__" ? "Top-level hosts" : `Host: ${groupKey}` }) : null,
-      /* @__PURE__ */ jsx("ul", { className: "nuvio-tree-list", children: group.map((e) => {
+    ] }, dup.id)) }) : filtered.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "nuvio-text-xs nuvio-text-muted-dim", children: "No ids in dev index." }) : groups.map(([groupKey, group]) => /* @__PURE__ */ jsxs2("div", { className: "nuvio-tree-group", children: [
+      !friendlyLabels ? /* @__PURE__ */ jsx2("p", { className: "nuvio-tree-group-title", children: groupKey === "__root__" ? "Top-level hosts" : `Host: ${groupKey}` }) : null,
+      /* @__PURE__ */ jsx2("ul", { className: "nuvio-tree-list", children: group.map((e) => {
         const active = e.id === selectedId;
-        return /* @__PURE__ */ jsx("li", { className: "nuvio-tree-item", children: /* @__PURE__ */ jsxs(
+        return /* @__PURE__ */ jsx2("li", { className: "nuvio-tree-item", children: /* @__PURE__ */ jsxs2(
           "button",
           {
             type: "button",
             className: `nuvio-tree-btn ${active ? "nuvio-tree-btn--active" : ""}`,
             onClick: () => onSelectId(e.id),
             children: [
-              /* @__PURE__ */ jsxs("span", { className: "nuvio-tree-btn-row", children: [
-                !friendlyLabels && e.riskLevel ? /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs2("span", { className: "nuvio-tree-btn-row", children: [
+                !friendlyLabels && e.riskLevel ? /* @__PURE__ */ jsx2(
                   "span",
                   {
                     className: riskDotClass(e.riskLevel),
@@ -1372,10 +1552,10 @@ function ComponentTree({
                     "aria-hidden": "true"
                   }
                 ) : null,
-                !friendlyLabels ? /* @__PURE__ */ jsx("span", { className: "nuvio-tree-role", children: e.hierarchyRole ?? "unknown" }) : null,
-                /* @__PURE__ */ jsx("span", { className: friendlyLabels ? "nuvio-break-all" : "nuvio-break-all nuvio-text-mono", children: friendlyLabels ? formatFriendlyId(e.id, e) : e.id })
+                !friendlyLabels ? /* @__PURE__ */ jsx2("span", { className: "nuvio-tree-role", children: e.hierarchyRole ?? "unknown" }) : null,
+                /* @__PURE__ */ jsx2("span", { className: friendlyLabels ? "nuvio-break-all" : "nuvio-break-all nuvio-text-mono", children: friendlyLabels ? formatFriendlyId(e.id, e) : e.id })
               ] }),
-              !friendlyLabels ? /* @__PURE__ */ jsxs("span", { className: "nuvio-tree-btn-path", children: [
+              !friendlyLabels ? /* @__PURE__ */ jsxs2("span", { className: "nuvio-tree-btn-path", children: [
                 e.tagName ? `${e.tagName} \xB7 ` : "",
                 shortPath(e.file),
                 ":",
@@ -1390,7 +1570,7 @@ function ComponentTree({
 }
 
 // src/RuntimeDiagnosticsBlock.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function statusDotClass(channel, indexedCount) {
   if (indexedCount === 0 && channel === "ready") {
     return "nuvio-status-dot nuvio-status-dot--warn";
@@ -1421,15 +1601,19 @@ function statusLabel(channel, channelLabel) {
 function EditorStackVersions({
   diagnostics
 }) {
-  if (!diagnostics?.viteVersion && !diagnostics?.reactVersion && !diagnostics?.tailwindVersion) {
+  const hasVersions = diagnostics?.viteVersion || diagnostics?.reactVersion || diagnostics?.tailwindVersion;
+  const hasLibraries = (diagnostics?.detectedLibraries?.length ?? 0) > 0;
+  if (!hasVersions && !hasLibraries) {
     return null;
   }
-  return /* @__PURE__ */ jsxs2("p", { className: "nuvio-editor-versions", children: [
-    diagnostics.viteVersion ? `Vite ${diagnostics.viteVersion}` : null,
-    diagnostics.viteVersion && diagnostics.reactVersion ? " \xB7 " : null,
-    diagnostics.reactVersion ? `React ${diagnostics.reactVersion}` : null,
-    (diagnostics.viteVersion || diagnostics.reactVersion) && diagnostics.tailwindVersion ? " \xB7 " : null,
-    diagnostics.tailwindVersion ? `Tailwind ${diagnostics.tailwindVersion}` : null
+  return /* @__PURE__ */ jsxs3("p", { className: "nuvio-editor-versions", children: [
+    diagnostics?.viteVersion ? `Vite ${diagnostics.viteVersion}` : null,
+    diagnostics?.viteVersion && diagnostics?.reactVersion ? " \xB7 " : null,
+    diagnostics?.reactVersion ? `React ${diagnostics.reactVersion}` : null,
+    (diagnostics?.viteVersion || diagnostics?.reactVersion) && diagnostics?.tailwindVersion ? " \xB7 " : null,
+    diagnostics?.tailwindVersion ? `Tailwind ${diagnostics.tailwindVersion}` : null,
+    hasVersions && hasLibraries ? " \xB7 " : null,
+    hasLibraries ? `Libraries: ${diagnostics.detectedLibraries.join(", ")}` : null
   ] });
 }
 function NuvioChipStatus({
@@ -1468,25 +1652,25 @@ function NuvioChipStatus({
     }
   }
   const indexedLabel = developerDetails ? `${indexedCount} id${indexedCount === 1 ? "" : "s"}` : getSimpleChipIndexedLabel(indexedCount);
-  return /* @__PURE__ */ jsxs2("div", { className: "nuvio-chip-status", children: [
-    /* @__PURE__ */ jsxs2("p", { className: "nuvio-chip-status-line", children: [
-      /* @__PURE__ */ jsx2("span", { className: statusDotClass(channel, indexedCount), "aria-hidden": "true" }),
-      /* @__PURE__ */ jsxs2("span", { className: "nuvio-chip-status-text", children: [
-        /* @__PURE__ */ jsx2("span", { className: channel === "ready" ? "nuvio-text-success" : "nuvio-text-muted", children: status }),
-        /* @__PURE__ */ jsx2("span", { className: "nuvio-text-dim", children: " \xB7 " }),
-        /* @__PURE__ */ jsx2("span", { className: "nuvio-text-muted", children: indexedLabel })
+  return /* @__PURE__ */ jsxs3("div", { className: "nuvio-chip-status", children: [
+    /* @__PURE__ */ jsxs3("p", { className: "nuvio-chip-status-line", children: [
+      /* @__PURE__ */ jsx3("span", { className: statusDotClass(channel, indexedCount), "aria-hidden": "true" }),
+      /* @__PURE__ */ jsxs3("span", { className: "nuvio-chip-status-text", children: [
+        /* @__PURE__ */ jsx3("span", { className: channel === "ready" ? "nuvio-text-success" : "nuvio-text-muted", children: status }),
+        /* @__PURE__ */ jsx3("span", { className: "nuvio-text-dim", children: " \xB7 " }),
+        /* @__PURE__ */ jsx3("span", { className: "nuvio-text-muted", children: indexedLabel })
       ] })
     ] }),
-    selectedId ? /* @__PURE__ */ jsxs2("p", { className: "nuvio-chip-selected nuvio-truncate", children: [
-      /* @__PURE__ */ jsx2("span", { className: "nuvio-text-muted", children: "Selected " }),
-      /* @__PURE__ */ jsx2("span", { className: developerDetails ? "nuvio-text-mono nuvio-text-accent" : "nuvio-text-accent", children: developerDetails ? selectedId : formatSelectionTitle(selectedId, selectedEntry, indexEntries) })
+    selectedId ? /* @__PURE__ */ jsxs3("p", { className: "nuvio-chip-selected nuvio-truncate", children: [
+      /* @__PURE__ */ jsx3("span", { className: "nuvio-text-muted", children: "Selected " }),
+      /* @__PURE__ */ jsx3("span", { className: developerDetails ? "nuvio-text-mono nuvio-text-accent" : "nuvio-text-accent", children: developerDetails ? selectedId : formatSelectionTitle(selectedId, selectedEntry, indexEntries) })
     ] }) : null,
-    warnings.length > 0 ? /* @__PURE__ */ jsx2("div", { className: "nuvio-chip-warnings", children: warnings.map((w) => /* @__PURE__ */ jsx2("p", { className: "nuvio-chip-warning-line", children: w }, w)) }) : null
+    warnings.length > 0 ? /* @__PURE__ */ jsx3("div", { className: "nuvio-chip-warnings", children: warnings.map((w) => /* @__PURE__ */ jsx3("p", { className: "nuvio-chip-warning-line", children: w }, w)) }) : null
   ] });
 }
 
 // src/SelectionMetadata.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function riskClass(level) {
   if (level === "unsupported") {
     return "nuvio-risk-unsupported";
@@ -1501,7 +1685,16 @@ function riskClass(level) {
 }
 function classNamePatchLabel(entry) {
   if (entry.hasLiteralClassName === false) {
-    return "className not patchable (computed expression)";
+    return "className not patchable (unsupported expression)";
+  }
+  if (entry.classNameMode === "cn-conditional") {
+    return "className patchable (cn conditional)";
+  }
+  if (entry.classNameMode === "classnames-static") {
+    return "className patchable (classnames map)";
+  }
+  if (entry.classNameMode === "cn-basic") {
+    return "className patchable (cn string list)";
   }
   if (entry.hasLiteralClassName === true) {
     return "className patchable (string literal)";
@@ -1513,38 +1706,42 @@ function SelectionMetadata({
 }) {
   const risk = entry.riskLevel ?? "safe";
   const reasons = entry.unsupportedReasons ?? [];
-  return /* @__PURE__ */ jsxs3("div", { className: "nuvio-card nuvio-card--strong", children: [
-    /* @__PURE__ */ jsxs3("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
-      /* @__PURE__ */ jsx3("span", { className: "nuvio-text-mono", children: entry.tagName ?? "element" }),
-      entry.componentName ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "nuvio-card nuvio-card--strong", children: [
+    /* @__PURE__ */ jsxs4("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
+      /* @__PURE__ */ jsx4("span", { className: "nuvio-text-mono", children: entry.tagName ?? "element" }),
+      entry.componentName ? /* @__PURE__ */ jsxs4(Fragment, { children: [
         " ",
         "\xB7 component ",
-        /* @__PURE__ */ jsx3("span", { className: "nuvio-text-mono", children: entry.componentName })
+        /* @__PURE__ */ jsx4("span", { className: "nuvio-text-mono", children: entry.componentName })
       ] }) : null,
-      entry.insideMap ? /* @__PURE__ */ jsx3("span", { className: "nuvio-text-warn", children: " \xB7 inside .map()" }) : null
+      entry.insideMap ? /* @__PURE__ */ jsx4("span", { className: "nuvio-text-warn", children: " \xB7 inside .map()" }) : null
     ] }),
-    /* @__PURE__ */ jsxs3("p", { className: "nuvio-text-2xs", children: [
-      /* @__PURE__ */ jsx3("span", { className: "nuvio-text-muted", children: "Risk " }),
-      /* @__PURE__ */ jsx3("span", { className: riskClass(entry.riskLevel), children: risk }),
-      /* @__PURE__ */ jsx3("span", { className: "nuvio-text-muted-dim", children: " \xB7 " }),
-      /* @__PURE__ */ jsx3("span", { className: "nuvio-text-muted", children: classNamePatchLabel(entry) })
+    /* @__PURE__ */ jsxs4("p", { className: "nuvio-text-2xs", children: [
+      /* @__PURE__ */ jsx4("span", { className: "nuvio-text-muted", children: "Risk " }),
+      /* @__PURE__ */ jsx4("span", { className: riskClass(entry.riskLevel), children: risk }),
+      /* @__PURE__ */ jsx4("span", { className: "nuvio-text-muted-dim", children: " \xB7 " }),
+      /* @__PURE__ */ jsx4("span", { className: "nuvio-text-muted", children: classNamePatchLabel(entry) }),
+      entry.libraryHint ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4("span", { className: "nuvio-text-muted-dim", children: " \xB7 " }),
+        /* @__PURE__ */ jsx4("span", { className: "nuvio-text-muted", children: entry.libraryHint })
+      ] }) : null
     ] }),
-    /* @__PURE__ */ jsxs3("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
+    /* @__PURE__ */ jsxs4("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
       "Text",
       " ",
-      entry.textEditable === false ? /* @__PURE__ */ jsx3("span", { className: "nuvio-text-warn", children: "not editable (container)" }) : /* @__PURE__ */ jsx3("span", { className: "nuvio-text-success", children: "editable" }),
-      entry.structuralEditable === false ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      entry.textEditable === false ? /* @__PURE__ */ jsx4("span", { className: "nuvio-text-warn", children: "not editable (container)" }) : /* @__PURE__ */ jsx4("span", { className: "nuvio-text-success", children: "editable" }),
+      entry.structuralEditable === false ? /* @__PURE__ */ jsxs4(Fragment, { children: [
         " ",
         "\xB7 ",
-        /* @__PURE__ */ jsx3("span", { className: "nuvio-text-warn", children: "structure limited" })
+        /* @__PURE__ */ jsx4("span", { className: "nuvio-text-warn", children: "structure limited" })
       ] }) : null
     ] }),
-    reasons.length > 0 ? /* @__PURE__ */ jsx3("ul", { className: "nuvio-meta-reasons", children: reasons.map((r) => /* @__PURE__ */ jsx3("li", { children: r }, r)) }) : null
+    reasons.length > 0 ? /* @__PURE__ */ jsx4("ul", { className: "nuvio-meta-reasons", children: reasons.map((r) => /* @__PURE__ */ jsx4("li", { children: r }, r)) }) : null
   ] });
 }
 
 // src/SelectionSummary.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function toneClass(tone) {
   if (tone === "success") {
     return "nuvio-text-success";
@@ -1557,32 +1754,32 @@ function toneClass(tone) {
 function SelectionSummary({ entry }) {
   const { message, tone } = getSimpleSelectionStatus(entry);
   const plainReasons = (entry.unsupportedReasons ?? []).slice(0, 2).map(mapUnsupportedReasonToSimple);
-  return /* @__PURE__ */ jsxs4("div", { className: "nuvio-card nuvio-card--strong", children: [
-    /* @__PURE__ */ jsx4("p", { className: `nuvio-text-xs nuvio-leading-snug ${toneClass(tone)}`, children: message }),
-    plainReasons.length > 0 ? /* @__PURE__ */ jsx4("ul", { className: "nuvio-meta-reasons", children: plainReasons.map((reason, idx) => /* @__PURE__ */ jsx4("li", { children: reason }, `${idx}-${reason}`)) }) : null
+  return /* @__PURE__ */ jsxs5("div", { className: "nuvio-card nuvio-card--strong", children: [
+    /* @__PURE__ */ jsx5("p", { className: `nuvio-text-xs nuvio-leading-snug ${toneClass(tone)}`, children: message }),
+    plainReasons.length > 0 ? /* @__PURE__ */ jsx5("ul", { className: "nuvio-meta-reasons", children: plainReasons.map((reason, idx) => /* @__PURE__ */ jsx5("li", { children: reason }, `${idx}-${reason}`)) }) : null
   ] });
 }
 
 // src/TextTargetPicker.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function TextTargetPicker(props) {
   const { targets, activeKey, onActiveKeyChange, developerDetails, onHoverKeyChange } = props;
   if (targets.length <= 1) {
-    return /* @__PURE__ */ jsx5(Fragment2, {});
-  }
-  return /* @__PURE__ */ jsxs5("div", { className: "nuvio-card nuvio-stack-2", children: [
-    /* @__PURE__ */ jsx5("h3", { className: "nuvio-section-title", children: "Edit target" }),
-    /* @__PURE__ */ jsx5("p", { className: "nuvio-text-2xs nuvio-text-muted nuvio-leading-snug", children: "This area contains multiple pieces of text. Choose which one to edit." }),
-    /* @__PURE__ */ jsxs5("label", { className: "nuvio-block nuvio-stack-1", children: [
-      /* @__PURE__ */ jsx5("span", { className: "nuvio-label", children: "Text to edit" }),
-      /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(Fragment2, {});
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "nuvio-card nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx6("h3", { className: "nuvio-section-title", children: "Edit target" }),
+    /* @__PURE__ */ jsx6("p", { className: "nuvio-text-2xs nuvio-text-muted nuvio-leading-snug", children: "This area contains multiple pieces of text. Choose which one to edit." }),
+    /* @__PURE__ */ jsxs6("label", { className: "nuvio-block nuvio-stack-1", children: [
+      /* @__PURE__ */ jsx6("span", { className: "nuvio-label", children: "Text to edit" }),
+      /* @__PURE__ */ jsx6(
         "select",
         {
           className: "nuvio-control nuvio-select",
           value: activeKey,
           onChange: (e) => onActiveKeyChange(e.target.value),
           onMouseLeave: () => onHoverKeyChange?.(null),
-          children: targets.map((t) => /* @__PURE__ */ jsx5(
+          children: targets.map((t) => /* @__PURE__ */ jsx6(
             "option",
             {
               value: t.key,
@@ -1761,7 +1958,7 @@ var REASON_MAP = [
   {
     match: (r) => r.includes("host_not_found") || r.includes("No JSX host"),
     message: {
-      sentence: "Nuvio couldn't find this element in source \u2014 click it again or refresh the page.",
+      sentence: "nuvio couldn't find this element in source \u2014 click it again or refresh the page.",
       suggestedAction: "addId"
     }
   },
@@ -1782,9 +1979,9 @@ var REASON_MAP = [
   {
     match: (r) => r.includes("Unknown or disallowed Tailwind"),
     message: {
-      sentence: "This class uses utilities Nuvio can't edit yet \u2014 simplify the styles on this element or edit in your code editor.",
+      sentence: "This class uses utilities nuvio can't edit yet \u2014 simplify the styles on this element or edit in your code editor.",
       suggestedAction: "useHandoff",
-      handoffStep: "Remove or simplify responsive/dark Tailwind classes on this element so Nuvio can edit padding, radius, and shadow."
+      handoffStep: "Remove or simplify responsive/dark Tailwind classes on this element so nuvio can edit padding, radius, and shadow."
     }
   }
 ];
@@ -1803,7 +2000,7 @@ function mapReasonToPlainMessage(reason) {
 }
 function getPlainPatchHandoffStep(message) {
   if (!message) {
-    return "Review this element in source and fix the styles or Nuvio ids.";
+    return "Review this element in source and fix the styles or nuvio ids.";
   }
   const stripped = message.replace(/^Error:\s*/i, "").trim();
   const mapped = mapReasonToPlainMessage(stripped);
@@ -1836,9 +2033,12 @@ function formatPlainBreakpointLabel(bp) {
   return BREAKPOINT_LABELS[bp] ?? bp;
 }
 
+// src/task-router-modes.ts
+import { detectShadcnComponentMode } from "@nuvio/shared";
+
 // src/table-panel.tsx
 import { useEffect as useEffect5, useMemo as useMemo2, useState as useState5 } from "react";
-import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function headerEntries(entry, all) {
   const prefix = entry.id.replace(/\.(section|table)$/, "");
   return all.filter((e) => e.id.startsWith(`${prefix}.header.`) && e.id !== `${prefix}.header.row`);
@@ -1879,9 +2079,9 @@ function TableColumnHeaderPicker({
   if (headers.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs6("label", { className: "nuvio-block nuvio-stack-1", children: [
-    /* @__PURE__ */ jsx6("span", { className: "nuvio-label", children: "Column" }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("label", { className: "nuvio-block nuvio-stack-1", children: [
+    /* @__PURE__ */ jsx7("span", { className: "nuvio-label", children: "Column" }),
+    /* @__PURE__ */ jsxs7(
       "select",
       {
         className: "nuvio-control nuvio-select",
@@ -1892,8 +2092,8 @@ function TableColumnHeaderPicker({
           }
         },
         children: [
-          /* @__PURE__ */ jsx6("option", { value: "", children: "Choose a column\u2026" }),
-          headers.map((h) => /* @__PURE__ */ jsx6("option", { value: h.id, children: developerDetails ? h.id : formatFriendlyId(h.id, h) }, h.id))
+          /* @__PURE__ */ jsx7("option", { value: "", children: "Choose a column\u2026" }),
+          headers.map((h) => /* @__PURE__ */ jsx7("option", { value: h.id, children: developerDetails ? h.id : formatFriendlyId(h.id, h) }, h.id))
         ]
       }
     )
@@ -1908,9 +2108,9 @@ function TableRowPicker({
     return null;
   }
   const activeRow = rows.find((r) => r.nuvioId === selectedId || selectedId.startsWith(`${r.nuvioId}.`))?.nuvioId ?? "";
-  return /* @__PURE__ */ jsxs6("label", { className: "nuvio-block nuvio-stack-1", children: [
-    /* @__PURE__ */ jsx6("span", { className: "nuvio-label", children: "Row" }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7("label", { className: "nuvio-block nuvio-stack-1", children: [
+    /* @__PURE__ */ jsx7("span", { className: "nuvio-label", children: "Row" }),
+    /* @__PURE__ */ jsxs7(
       "select",
       {
         className: "nuvio-control nuvio-select",
@@ -1921,8 +2121,8 @@ function TableRowPicker({
           }
         },
         children: [
-          /* @__PURE__ */ jsx6("option", { value: "", children: "Choose a row\u2026" }),
-          rows.map((r) => /* @__PURE__ */ jsx6("option", { value: r.nuvioId, children: r.label }, r.nuvioId))
+          /* @__PURE__ */ jsx7("option", { value: "", children: "Choose a row\u2026" }),
+          rows.map((r) => /* @__PURE__ */ jsx7("option", { value: r.nuvioId, children: r.label }, r.nuvioId))
         ]
       }
     )
@@ -1957,13 +2157,13 @@ function TablePanel({
   }
   const sectionEntry = indexEntries.find((e) => e.id === sectionId) ?? entry;
   const titleEntry = indexEntries.find((e) => e.id === `${prefix}.title`);
-  return /* @__PURE__ */ jsxs6("section", { className: "nuvio-card nuvio-stack-2", children: [
-    /* @__PURE__ */ jsx6("h3", { className: "nuvio-section-title", children: developerDetails ? "Table mode" : `Editing: ${formatFriendlyId(prefix, titleEntry ?? sectionEntry)} table` }),
-    /* @__PURE__ */ jsx6("div", { className: "nuvio-row-wrap", children: [
+  return /* @__PURE__ */ jsxs7("section", { className: "nuvio-card nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx7("h3", { className: "nuvio-section-title", children: developerDetails ? "Table mode" : `Editing: ${formatFriendlyId(prefix, titleEntry ?? sectionEntry)} table` }),
+    /* @__PURE__ */ jsx7("div", { className: "nuvio-row-wrap", children: [
       ["section", developerDetails ? "Section" : "Table Style"],
       ["headers", developerDetails ? "Column headers" : "Column Headers"],
       ["rows", "Rows"]
-    ].map(([value, label]) => /* @__PURE__ */ jsx6(
+    ].map(([value, label]) => /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -1978,8 +2178,8 @@ function TablePanel({
       },
       value
     )) }),
-    subTarget === "section" ? /* @__PURE__ */ jsxs6("div", { className: "nuvio-row-wrap", children: [
-      /* @__PURE__ */ jsx6(
+    subTarget === "section" ? /* @__PURE__ */ jsxs7("div", { className: "nuvio-row-wrap", children: [
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1988,7 +2188,7 @@ function TablePanel({
           children: "Card Style"
         }
       ),
-      titleEntry ? /* @__PURE__ */ jsx6(
+      titleEntry ? /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -1998,7 +2198,7 @@ function TablePanel({
         }
       ) : null
     ] }) : null,
-    subTarget === "headers" ? /* @__PURE__ */ jsx6(
+    subTarget === "headers" ? /* @__PURE__ */ jsx7(
       TableColumnHeaderPicker,
       {
         headers,
@@ -2007,9 +2207,9 @@ function TablePanel({
         onSelectId
       }
     ) : null,
-    subTarget === "rows" ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      /* @__PURE__ */ jsx6(TableRowPicker, { rows, selectedId, onSelectId }),
-      selectedId.includes(".nameText") || selectedId.includes(".name") ? /* @__PURE__ */ jsx6("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "Edit the product name below." }) : null
+    subTarget === "rows" ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsx7(TableRowPicker, { rows, selectedId, onSelectId }),
+      selectedId.includes(".nameText") || selectedId.includes(".name") ? /* @__PURE__ */ jsx7("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "Edit the product name below." }) : null
     ] }) : null
   ] });
 }
@@ -2081,6 +2281,21 @@ function detectSimpleRouterMode(entry, selectedId, indexEntries) {
   if (detectTableMode(entry)) {
     return "table";
   }
+  if (entry.libraryHint === "shadcn") {
+    const shadcnMode = detectShadcnComponentMode(entry.tagName);
+    if (shadcnMode === "card") {
+      return "card";
+    }
+    if (shadcnMode === "button") {
+      return "button";
+    }
+    if (shadcnMode === "table") {
+      return "table";
+    }
+    if (shadcnMode === "form") {
+      return "form";
+    }
+  }
   if (resolveCardContext(selectedId, indexEntries) || entry.id.endsWith(".card") || entry.hierarchyRole === "card") {
     return "card";
   }
@@ -2302,7 +2517,7 @@ function listNavTargets(indexEntries) {
 }
 
 // src/container-guidance.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function shouldShowContainerGuidance(entry, selectedId, indexEntries, developerDetails, taskRouterActive) {
   if (developerDetails || taskRouterActive) {
     return false;
@@ -2389,14 +2604,14 @@ function ContainerGuidance({
   if (developerDetails && choices.length === 1) {
     const target = choices[0];
     const label = target.nuvioId ? formatFriendlyId(target.nuvioId, entry) : textTargets.find((t) => t.key === target.key)?.textPreview ?? target.label;
-    return /* @__PURE__ */ jsxs7("div", { className: "nuvio-banner nuvio-banner--info nuvio-stack-2", children: [
-      /* @__PURE__ */ jsxs7("p", { className: "nuvio-text-2xs nuvio-leading-snug", children: [
+    return /* @__PURE__ */ jsxs8("div", { className: "nuvio-banner nuvio-banner--info nuvio-stack-2", children: [
+      /* @__PURE__ */ jsxs8("p", { className: "nuvio-text-2xs nuvio-leading-snug", children: [
         "This area is a layout container. Edit the",
         " ",
-        /* @__PURE__ */ jsx7("span", { className: "nuvio-font-medium", children: label }),
+        /* @__PURE__ */ jsx8("span", { className: "nuvio-font-medium", children: label }),
         " instead?"
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -2413,10 +2628,10 @@ function ContainerGuidance({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "nuvio-banner nuvio-banner--info nuvio-stack-2", children: [
-    /* @__PURE__ */ jsx7("p", { className: "nuvio-text-2xs nuvio-leading-snug", children: "This area has editable parts." }),
-    /* @__PURE__ */ jsxs7("div", { className: "nuvio-stack-1", children: [
-      choices.map((choice) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs8("div", { className: "nuvio-banner nuvio-banner--info nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx8("p", { className: "nuvio-text-2xs nuvio-leading-snug", children: "This area has editable parts." }),
+    /* @__PURE__ */ jsxs8("div", { className: "nuvio-stack-1", children: [
+      choices.map((choice) => /* @__PURE__ */ jsx8(
         "button",
         {
           type: "button",
@@ -2432,7 +2647,7 @@ function ContainerGuidance({
         },
         `${choice.label}-${choice.nuvioId ?? choice.key}`
       )),
-      onCopyFixPrompt ? /* @__PURE__ */ jsx7("button", { type: "button", className: "nuvio-button nuvio-button-ghost nuvio-button--block", onClick: onCopyFixPrompt, children: "Copy Fix Prompt" }) : null
+      onCopyFixPrompt ? /* @__PURE__ */ jsx8("button", { type: "button", className: "nuvio-button nuvio-button-ghost nuvio-button--block", onClick: onCopyFixPrompt, children: "Copy Fix Prompt" }) : null
     ] })
   ] });
 }
@@ -2442,7 +2657,7 @@ function buildFixHandoffClipboard(ctx) {
   const fileLine = ctx.file != null ? `${ctx.file}${ctx.line != null ? `:${ctx.line}` : ""}` : "(unknown file)";
   const component = ctx.componentName ?? ctx.hostId;
   return [
-    "Nuvio could not apply this edit safely.",
+    "nuvio could not apply this edit safely.",
     "",
     `Component: ${component} (${ctx.hostId})`,
     `File: ${fileLine}`,
@@ -2455,7 +2670,7 @@ function buildFixHandoffClipboard(ctx) {
     `"In ${ctx.file ?? "the component file"}, ${ctx.suggestedNextStep}"`
   ].join("\n");
 }
-var MAKE_TABLE_EDITABLE_SNIPPET = `Add Nuvio table ids (v0.4 contract):
+var MAKE_TABLE_EDITABLE_SNIPPET = `Add nuvio table ids (v0.4 contract):
 - Section wrapper: data-nuvio-id="{host}.section"
 - Title h3: data-nuvio-id="{host}.title"
 - Table scroll area: data-nuvio-id="{host}.table"
@@ -2495,8 +2710,9 @@ function buildEditorUrl(file, line) {
 }
 
 // src/component-mode.tsx
+import { detectShadcnComponentMode as detectShadcnComponentMode2 } from "@nuvio/shared";
 import { useMemo as useMemo3 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function detectComponentMode(entry) {
   if (!entry) {
     return null;
@@ -2504,6 +2720,12 @@ function detectComponentMode(entry) {
   if (detectTableMode(entry)) {
     return "table";
   }
+  if (entry.libraryHint === "shadcn") {
+    const shadcnMode = detectShadcnComponentMode2(entry.tagName);
+    if (shadcnMode) {
+      return shadcnMode;
+    }
+  }
   const role = entry.hierarchyRole;
   if (role === "card" || entry.id.endsWith(".card")) {
     return "card";
@@ -2548,7 +2770,7 @@ function ModeHeader({
     button: "button"
   };
   const prefix = entry.id.replace(/\.(section|card|table|button)$/, "");
-  return /* @__PURE__ */ jsx8("h3", { className: "nuvio-section-title", children: developerDetails ? `${kind} mode` : `Editing: ${formatFriendlyId(prefix, entry)} ${labels[kind]}` });
+  return /* @__PURE__ */ jsx9("h3", { className: "nuvio-section-title", children: developerDetails ? `${kind} mode` : `Editing: ${formatFriendlyId(prefix, entry)} ${labels[kind]}` });
 }
 function TargetChips({
   targets,
@@ -2559,7 +2781,7 @@ function TargetChips({
   if (targets.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx8("div", { className: "nuvio-row-wrap", children: targets.map((t) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: "nuvio-row-wrap", children: targets.map((t) => /* @__PURE__ */ jsx9(
     "button",
     {
       type: "button",
@@ -2587,15 +2809,15 @@ function ComponentModePanel(props) {
     return childTargets(entry, indexEntries, map[kind]);
   }, [entry, indexEntries, kind]);
   if (kind === "table") {
-    return /* @__PURE__ */ jsx8(TablePanel, { ...props });
+    return /* @__PURE__ */ jsx9(TablePanel, { ...props });
   }
   if (!kind || quickTargets.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("section", { className: "nuvio-card nuvio-stack-2", children: [
-    /* @__PURE__ */ jsx8(ModeHeader, { kind, entry, developerDetails }),
-    /* @__PURE__ */ jsx8("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "Pick the part you want to change:" }),
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9("section", { className: "nuvio-card nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx9(ModeHeader, { kind, entry, developerDetails }),
+    /* @__PURE__ */ jsx9("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "Pick the part you want to change:" }),
+    /* @__PURE__ */ jsx9(
       TargetChips,
       {
         targets: quickTargets,
@@ -2671,7 +2893,7 @@ function applyStylePresetToPicks(current, fragment) {
 }
 
 // src/handoff-actions.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function HandoffActionBar({
   reason,
   suggestedAction,
@@ -2679,7 +2901,7 @@ function HandoffActionBar({
   file,
   line,
   componentName,
-  userIntent = "edit selection in Nuvio",
+  userIntent = "edit selection in nuvio",
   tableContext = false,
   simpleMode = false,
   onSwitchTarget,
@@ -2701,14 +2923,14 @@ function HandoffActionBar({
       })
     );
   };
-  return /* @__PURE__ */ jsxs9("div", { className: "nuvio-stack-2", children: [
-    simpleMode ? /* @__PURE__ */ jsx9("p", { className: "nuvio-text-xs nuvio-leading-snug", children: reason }) : null,
-    /* @__PURE__ */ jsxs9("div", { className: "nuvio-row-wrap", children: [
-      suggestedAction === "switchTarget" && onSwitchTarget ? /* @__PURE__ */ jsx9("button", { type: "button", className: "nuvio-button nuvio-button-primary", onClick: onSwitchTarget, children: simpleMode ? "Edit title instead" : "Pick text target" }) : null,
-      suggestedAction === "changeBreakpoint" && onChangeBreakpoint ? /* @__PURE__ */ jsx9("button", { type: "button", className: "nuvio-button", onClick: onChangeBreakpoint, children: "Check breakpoint" }) : null,
-      !simpleMode && suggestedAction === "addId" && onAddIdHint ? /* @__PURE__ */ jsx9("button", { type: "button", className: "nuvio-button", onClick: onAddIdHint, children: "How to add ids" }) : null,
-      (suggestedAction === "useHandoff" || suggestedAction === "addId") && /* @__PURE__ */ jsx9("button", { type: "button", className: "nuvio-button nuvio-button-primary", onClick: copyHandoff, children: "Copy Fix Prompt" }),
-      !simpleMode && editorUrl ? /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs10("div", { className: "nuvio-stack-2", children: [
+    simpleMode ? /* @__PURE__ */ jsx10("p", { className: "nuvio-text-xs nuvio-leading-snug", children: reason }) : null,
+    /* @__PURE__ */ jsxs10("div", { className: "nuvio-row-wrap", children: [
+      suggestedAction === "switchTarget" && onSwitchTarget ? /* @__PURE__ */ jsx10("button", { type: "button", className: "nuvio-button nuvio-button-primary", onClick: onSwitchTarget, children: simpleMode ? "Edit title instead" : "Pick text target" }) : null,
+      suggestedAction === "changeBreakpoint" && onChangeBreakpoint ? /* @__PURE__ */ jsx10("button", { type: "button", className: "nuvio-button", onClick: onChangeBreakpoint, children: "Check breakpoint" }) : null,
+      !simpleMode && suggestedAction === "addId" && onAddIdHint ? /* @__PURE__ */ jsx10("button", { type: "button", className: "nuvio-button", onClick: onAddIdHint, children: "How to add ids" }) : null,
+      (suggestedAction === "useHandoff" || suggestedAction === "addId") && /* @__PURE__ */ jsx10("button", { type: "button", className: "nuvio-button nuvio-button-primary", onClick: copyHandoff, children: "Copy Fix Prompt" }),
+      !simpleMode && editorUrl ? /* @__PURE__ */ jsx10(
         "a",
         {
           href: editorUrl,
@@ -2723,7 +2945,7 @@ function HandoffActionBar({
 }
 
 // src/simple-mode-actions.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function SimpleModeActionBar({
   previewLabel,
   applyLabel,
@@ -2740,11 +2962,11 @@ function SimpleModeActionBar({
   onUndo
 }) {
   const pendingLabel = hasStagedOps ? previewReady ? "Changes to apply" : "1 pending change" : "No pending changes";
-  return /* @__PURE__ */ jsxs10("section", { className: "nuvio-card nuvio-card--actions nuvio-stack-2", children: [
-    previewBusy ? /* @__PURE__ */ jsx10("p", { className: "nuvio-banner nuvio-banner--info nuvio-text-2xs", children: "Checking your changes\u2026" }) : /* @__PURE__ */ jsx10("p", { className: "nuvio-pending-label", children: pendingLabel }),
-    !structuralPreviewActive && previewReady && humanPreviewBlock ? /* @__PURE__ */ jsx10("div", { className: "nuvio-preview-box nuvio-preview-box--compact", children: /* @__PURE__ */ jsx10("p", { className: "nuvio-preview-box-body", children: humanPreviewBlock }) }) : null,
-    /* @__PURE__ */ jsxs10("div", { className: "nuvio-action-stack", children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs11("section", { className: "nuvio-card nuvio-card--actions nuvio-stack-2", children: [
+    previewBusy ? /* @__PURE__ */ jsx11("p", { className: "nuvio-banner nuvio-banner--info nuvio-text-2xs", children: "Checking your changes\u2026" }) : /* @__PURE__ */ jsx11("p", { className: "nuvio-pending-label", children: pendingLabel }),
+    !structuralPreviewActive && previewReady && humanPreviewBlock ? /* @__PURE__ */ jsx11("div", { className: "nuvio-preview-box nuvio-preview-box--compact", children: /* @__PURE__ */ jsx11("p", { className: "nuvio-preview-box-body", children: humanPreviewBlock }) }) : null,
+    /* @__PURE__ */ jsxs11("div", { className: "nuvio-action-stack", children: [
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2754,7 +2976,7 @@ function SimpleModeActionBar({
           children: previewLabel
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2764,7 +2986,7 @@ function SimpleModeActionBar({
           children: applyLabel
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
@@ -2781,7 +3003,7 @@ function SimpleModeActionBar({
 // src/selection-guides.ts
 var GUIDE_CONTENT = {
   welcome: {
-    title: "Welcome to Nuvio",
+    title: "Welcome to nuvio",
     body: "Click something on the page \u2192 choose what to change \u2192 Preview Changes \u2192 Apply to Code. Changes save to your source files. Undo anytime. If an area isn't editable, use Copy Fix Prompt."
   },
   "first-selection": {
@@ -2868,11 +3090,11 @@ function shouldShowWelcome(ctx) {
 }
 
 // src/OnboardingGuide.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function GuideBody({ content }) {
-  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
-    /* @__PURE__ */ jsx11("p", { className: "nuvio-font-medium nuvio-text-xs", children: content.title }),
-    /* @__PURE__ */ jsx11("p", { className: "nuvio-text-2xs nuvio-leading-snug nuvio-text-muted", children: content.body })
+  return /* @__PURE__ */ jsxs12(Fragment4, { children: [
+    /* @__PURE__ */ jsx12("p", { className: "nuvio-font-medium nuvio-text-xs", children: content.title }),
+    /* @__PURE__ */ jsx12("p", { className: "nuvio-text-2xs nuvio-leading-snug nuvio-text-muted", children: content.body })
   ] });
 }
 function OnboardingGuide({
@@ -2882,19 +3104,19 @@ function OnboardingGuide({
 }) {
   const content = GUIDE_CONTENT[guideId];
   if (variant === "welcome") {
-    return /* @__PURE__ */ jsxs11("section", { className: "nuvio-card nuvio-stack-2 nuvio-onboarding-welcome", children: [
-      /* @__PURE__ */ jsx11(GuideBody, { content }),
-      /* @__PURE__ */ jsxs11("ol", { className: "nuvio-onboarding-steps nuvio-text-2xs nuvio-text-muted", children: [
-        /* @__PURE__ */ jsx11("li", { children: "Click an element on the page" }),
-        /* @__PURE__ */ jsx11("li", { children: "Choose what to change" }),
-        /* @__PURE__ */ jsx11("li", { children: "Preview Changes, then Apply to Code" })
+    return /* @__PURE__ */ jsxs12("section", { className: "nuvio-card nuvio-stack-2 nuvio-onboarding-welcome", children: [
+      /* @__PURE__ */ jsx12(GuideBody, { content }),
+      /* @__PURE__ */ jsxs12("ol", { className: "nuvio-onboarding-steps nuvio-text-2xs nuvio-text-muted", children: [
+        /* @__PURE__ */ jsx12("li", { children: "Click an element on the page" }),
+        /* @__PURE__ */ jsx12("li", { children: "Choose what to change" }),
+        /* @__PURE__ */ jsx12("li", { children: "Preview Changes, then Apply to Code" })
       ] }),
-      /* @__PURE__ */ jsx11("button", { type: "button", className: "nuvio-button nuvio-button-primary", onClick: onDismiss, children: "Got it" })
+      /* @__PURE__ */ jsx12("button", { type: "button", className: "nuvio-button nuvio-button-primary", onClick: onDismiss, children: "Got it" })
     ] });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "nuvio-banner nuvio-banner--info nuvio-stack-2 nuvio-onboarding-contextual", children: [
-    /* @__PURE__ */ jsx11(GuideBody, { content }),
-    /* @__PURE__ */ jsx11("button", { type: "button", className: "nuvio-button", onClick: onDismiss, children: "Got it" })
+  return /* @__PURE__ */ jsxs12("div", { className: "nuvio-banner nuvio-banner--info nuvio-stack-2 nuvio-onboarding-contextual", children: [
+    /* @__PURE__ */ jsx12(GuideBody, { content }),
+    /* @__PURE__ */ jsx12("button", { type: "button", className: "nuvio-button", onClick: onDismiss, children: "Got it" })
   ] });
 }
 
@@ -3244,7 +3466,7 @@ function buildSimpleBackNav(args) {
 }
 
 // src/task-router.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function resolveCardContext2(selectedId, indexEntries) {
   const match = selectedId.match(/^(.+)\.(card|label|value)$/);
   if (!match) {
@@ -3458,31 +3680,31 @@ function TaskMenu({
   if (activeTask !== "menu") {
     const activeItem = items.find((i) => i.task === activeTask);
     const activeLabel = activeItem?.label ?? title;
-    return /* @__PURE__ */ jsx12("section", { className: "nuvio-card nuvio-stack-2", children: /* @__PURE__ */ jsxs12("div", { className: "nuvio-row-wrap nuvio-row-wrap--between", children: [
-      /* @__PURE__ */ jsx12("h3", { className: "nuvio-section-title", children: simpleMode && activeItem?.icon ? `${activeItem.icon} ${activeLabel}` : activeLabel }),
-      onBack ? /* @__PURE__ */ jsx12("button", { type: "button", className: "nuvio-button-chip", onClick: onBack, children: "\u2190 Back" }) : null
+    return /* @__PURE__ */ jsx13("section", { className: "nuvio-card nuvio-stack-2", children: /* @__PURE__ */ jsxs13("div", { className: "nuvio-row-wrap nuvio-row-wrap--between", children: [
+      /* @__PURE__ */ jsx13("h3", { className: "nuvio-section-title", children: simpleMode && activeItem?.icon ? `${activeItem.icon} ${activeLabel}` : activeLabel }),
+      onBack ? /* @__PURE__ */ jsx13("button", { type: "button", className: "nuvio-button-chip", onClick: onBack, children: "\u2190 Back" }) : null
     ] }) });
   }
-  return /* @__PURE__ */ jsxs12("section", { className: "nuvio-card nuvio-stack-2", children: [
-    /* @__PURE__ */ jsx12("h3", { className: "nuvio-section-title", children: title }),
-    /* @__PURE__ */ jsx12("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "What would you like to change?" }),
-    /* @__PURE__ */ jsx12("div", { className: "nuvio-stack-1", children: items.map(
-      (item) => simpleMode ? /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13("section", { className: "nuvio-card nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx13("h3", { className: "nuvio-section-title", children: title }),
+    /* @__PURE__ */ jsx13("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "What would you like to change?" }),
+    /* @__PURE__ */ jsx13("div", { className: "nuvio-stack-1", children: items.map(
+      (item) => simpleMode ? /* @__PURE__ */ jsxs13(
         "button",
         {
           type: "button",
           className: "nuvio-task-card",
           onClick: () => onPick(item.task),
           children: [
-            /* @__PURE__ */ jsx12("span", { className: "nuvio-task-card-icon", "aria-hidden": "true", children: item.icon ?? "\u270F\uFE0F" }),
-            /* @__PURE__ */ jsxs12("span", { className: "nuvio-task-card-body", children: [
-              /* @__PURE__ */ jsx12("span", { className: "nuvio-task-card-title", children: item.label }),
-              item.hint ? /* @__PURE__ */ jsx12("span", { className: "nuvio-task-card-hint", children: item.hint }) : null
+            /* @__PURE__ */ jsx13("span", { className: "nuvio-task-card-icon", "aria-hidden": "true", children: item.icon ?? "\u270F\uFE0F" }),
+            /* @__PURE__ */ jsxs13("span", { className: "nuvio-task-card-body", children: [
+              /* @__PURE__ */ jsx13("span", { className: "nuvio-task-card-title", children: item.label }),
+              item.hint ? /* @__PURE__ */ jsx13("span", { className: "nuvio-task-card-hint", children: item.hint }) : null
             ] })
           ]
         },
         item.task
-      ) : /* @__PURE__ */ jsx12(
+      ) : /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -3633,7 +3855,7 @@ function useSimpleTaskRouter({
   const navTitle = "Navigation";
   const chartTitle = `${formatCardGroupName(chartPrefix, indexEntries)} Chart`;
   const sectionTitle = formatCardGroupName(selectedId.replace(/\.(title|heading|lead|description)$/, ""), indexEntries);
-  const cardMenu = mode === "card" && cardCtx ? /* @__PURE__ */ jsx12(
+  const cardMenu = mode === "card" && cardCtx ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: cardTitle,
@@ -3644,7 +3866,7 @@ function useSimpleTaskRouter({
       simpleMode: true
     }
   ) : null;
-  const tableMenu = mode === "table" ? /* @__PURE__ */ jsx12(
+  const tableMenu = mode === "table" ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: tableTitle,
@@ -3655,7 +3877,7 @@ function useSimpleTaskRouter({
       simpleMode: true
     }
   ) : null;
-  const buttonMenu = mode === "button" ? /* @__PURE__ */ jsx12(
+  const buttonMenu = mode === "button" ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: buttonTitle,
@@ -3670,7 +3892,7 @@ function useSimpleTaskRouter({
       simpleMode: true
     }
   ) : null;
-  const formMenu = mode === "form" ? /* @__PURE__ */ jsx12(
+  const formMenu = mode === "form" ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: formTitle,
@@ -3685,7 +3907,7 @@ function useSimpleTaskRouter({
       simpleMode: true
     }
   ) : null;
-  const navMenu = mode === "nav" ? /* @__PURE__ */ jsx12(
+  const navMenu = mode === "nav" ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: navTitle,
@@ -3700,7 +3922,7 @@ function useSimpleTaskRouter({
       simpleMode: true
     }
   ) : null;
-  const chartMenu = mode === "chart" ? /* @__PURE__ */ jsx12(
+  const chartMenu = mode === "chart" ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: chartTitle,
@@ -3711,7 +3933,7 @@ function useSimpleTaskRouter({
       simpleMode: true
     }
   ) : null;
-  const sectionMenu = mode === "section" ? /* @__PURE__ */ jsx12(
+  const sectionMenu = mode === "section" ? /* @__PURE__ */ jsx13(
     TaskMenu,
     {
       title: sectionTitle,
@@ -3834,7 +4056,7 @@ import {
   useState as useState7
 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
 function hexForUtility(value, options) {
   if (!value) {
     return "transparent";
@@ -3960,7 +4182,7 @@ function ColorPickerRow({
     maxHeight: popoverBox.maxHeight,
     zIndex: 2147483640
   } : void 0;
-  const popover = open && popoverBox ? /* @__PURE__ */ jsxs13(
+  const popover = open && popoverBox ? /* @__PURE__ */ jsxs14(
     "div",
     {
       id: listId,
@@ -3969,7 +4191,7 @@ function ColorPickerRow({
       className: "nuvio-color-popover nuvio-color-popover--fixed",
       style: popoverStyle,
       children: [
-        !simpleMode ? /* @__PURE__ */ jsxs13(
+        !simpleMode ? /* @__PURE__ */ jsxs14(
           "p",
           {
             className: "nuvio-text-3xs nuvio-leading-snug nuvio-text-muted",
@@ -3981,7 +4203,7 @@ function ColorPickerRow({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx13("div", { className: "nuvio-color-specials", children: specials.map((o) => /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsx14("div", { className: "nuvio-color-specials", children: specials.map((o) => /* @__PURE__ */ jsxs14(
           "button",
           {
             type: "button",
@@ -3991,13 +4213,13 @@ function ColorPickerRow({
             className: `nuvio-color-special-btn ${value === o.value ? "nuvio-color-special-btn--active" : ""}`,
             onClick: () => pick(o.value),
             children: [
-              /* @__PURE__ */ jsx13("span", { className: "nuvio-color-swatch--sm", style: { backgroundColor: o.hex } }),
+              /* @__PURE__ */ jsx14("span", { className: "nuvio-color-swatch--sm", style: { backgroundColor: o.hex } }),
               o.label
             ]
           },
           o.value || "__none"
         )) }),
-        /* @__PURE__ */ jsxs13(
+        /* @__PURE__ */ jsxs14(
           "div",
           {
             className: "nuvio-palette-grid",
@@ -4005,15 +4227,15 @@ function ColorPickerRow({
               gridTemplateColumns: `3.25rem repeat(${TAILWIND_COLOR_SHADES.length}, minmax(0, 1fr))`
             },
             children: [
-              /* @__PURE__ */ jsx13("span", {}),
-              TAILWIND_COLOR_SHADES.map((s) => /* @__PURE__ */ jsx13("span", { className: "nuvio-palette-shade", children: s }, s)),
-              TAILWIND_COLOR_FAMILIES.map((family) => /* @__PURE__ */ jsxs13("div", { className: "nuvio-palette-contents", children: [
-                /* @__PURE__ */ jsx13("span", { className: "nuvio-palette-family", children: familyLabel(family) }),
+              /* @__PURE__ */ jsx14("span", {}),
+              TAILWIND_COLOR_SHADES.map((s) => /* @__PURE__ */ jsx14("span", { className: "nuvio-palette-shade", children: s }, s)),
+              TAILWIND_COLOR_FAMILIES.map((family) => /* @__PURE__ */ jsxs14("div", { className: "nuvio-palette-contents", children: [
+                /* @__PURE__ */ jsx14("span", { className: "nuvio-palette-family", children: familyLabel(family) }),
                 TAILWIND_COLOR_SHADES.map((shade) => {
                   const util = `${utilityPrefix}-${family}-${shade}`;
                   const hex = TAILWIND_PALETTE_HEX[family][String(shade)];
                   const selected = value === util || value.replace(/\/(?:\d+|\[[\d.]+\])$/, "") === util;
-                  return /* @__PURE__ */ jsx13(
+                  return /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
@@ -4035,10 +4257,10 @@ function ColorPickerRow({
     }
   ) : null;
   const portalRoot = open ? getOverlayPortalRoot() : null;
-  return /* @__PURE__ */ jsxs13("div", { ref: rootRef, className: "nuvio-field-row nuvio-field-row--start", children: [
-    /* @__PURE__ */ jsx13("span", { className: "nuvio-label nuvio-label--pad-top", children: label }),
-    /* @__PURE__ */ jsxs13("div", { className: "nuvio-min-w-0 nuvio-relative", children: [
-      /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14("div", { ref: rootRef, className: "nuvio-field-row nuvio-field-row--start", children: [
+    /* @__PURE__ */ jsx14("span", { className: "nuvio-label nuvio-label--pad-top", children: label }),
+    /* @__PURE__ */ jsxs14("div", { className: "nuvio-min-w-0 nuvio-relative", children: [
+      /* @__PURE__ */ jsxs14(
         "button",
         {
           type: "button",
@@ -4048,7 +4270,7 @@ function ColorPickerRow({
           className: "nuvio-color-trigger",
           onClick: () => setOpen((v) => !v),
           children: [
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               "span",
               {
                 className: "nuvio-color-swatch",
@@ -4061,7 +4283,7 @@ function ColorPickerRow({
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ jsx13("span", { className: "nuvio-min-w-0 nuvio-truncate nuvio-text-2xs", children: displayValue })
+            /* @__PURE__ */ jsx14("span", { className: "nuvio-min-w-0 nuvio-truncate nuvio-text-2xs", children: displayValue })
           ]
         }
       ),
@@ -4071,7 +4293,7 @@ function ColorPickerRow({
 }
 
 // src/PropertyPanelShell.tsx
-import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 var NUVO_PREVIEW_CHANGES_LABEL = "Preview Changes";
 var NUVO_APPLY_TO_CODE_LABEL = "Apply to Code";
 function assignShellRef(shellRef, el) {
@@ -4099,15 +4321,15 @@ function SelectRow({
       label: mapSelectOptionsForSimpleMode([{ value, label: value }], simpleCategory, false)[0]?.label ?? "Custom"
     });
   }
-  return /* @__PURE__ */ jsxs14("label", { className: "nuvio-field-row", children: [
-    /* @__PURE__ */ jsx14("span", { className: "nuvio-label", children: label }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs15("label", { className: "nuvio-field-row", children: [
+    /* @__PURE__ */ jsx15("span", { className: "nuvio-label", children: label }),
+    /* @__PURE__ */ jsx15(
       "select",
       {
         value,
         onChange: (e) => onChange(e.target.value),
         className: "nuvio-control nuvio-select",
-        children: resolvedOptions.map((o) => /* @__PURE__ */ jsx14("option", { value: o.value, children: o.label }, o.value || "__none"))
+        children: resolvedOptions.map((o) => /* @__PURE__ */ jsx15("option", { value: o.value, children: o.label }, o.value || "__none"))
       }
     )
   ] });
@@ -4120,9 +4342,9 @@ function DeviceBreakpointPanel({
   developerDetails,
   variant
 }) {
-  const controls = /* @__PURE__ */ jsxs14(Fragment5, { children: [
-    /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap", children: [
-      /* @__PURE__ */ jsx14(
+  const controls = /* @__PURE__ */ jsxs15(Fragment5, { children: [
+    /* @__PURE__ */ jsxs15("div", { className: "nuvio-row-wrap", children: [
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -4131,7 +4353,7 @@ function DeviceBreakpointPanel({
           children: "Desktop"
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -4140,7 +4362,7 @@ function DeviceBreakpointPanel({
           children: "Tablet"
         }
       ),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         "button",
         {
           type: "button",
@@ -4150,7 +4372,7 @@ function DeviceBreakpointPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       SelectRow,
       {
         label: developerDetails ? "Active BP" : "Applies on",
@@ -4166,20 +4388,20 @@ function DeviceBreakpointPanel({
         developerDetails
       }
     ),
-    !developerDetails ? /* @__PURE__ */ jsxs14("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
+    !developerDetails ? /* @__PURE__ */ jsxs15("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
       "Applies on:",
       " ",
-      /* @__PURE__ */ jsx14("span", { className: "nuvio-font-medium", children: formatPlainBreakpointLabel(activeBreakpoint) })
+      /* @__PURE__ */ jsx15("span", { className: "nuvio-font-medium", children: formatPlainBreakpointLabel(activeBreakpoint) })
     ] }) : null
   ] });
   if (variant === "compact") {
-    return /* @__PURE__ */ jsxs14("div", { className: "nuvio-stack-1", children: [
-      /* @__PURE__ */ jsx14("p", { className: "nuvio-label", children: "Responsive preview" }),
+    return /* @__PURE__ */ jsxs15("div", { className: "nuvio-stack-1", children: [
+      /* @__PURE__ */ jsx15("p", { className: "nuvio-label", children: "Responsive preview" }),
       controls
     ] });
   }
-  return /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-stack-2", children: [
-    /* @__PURE__ */ jsx14("h3", { className: "nuvio-section-title", children: "Device + breakpoint" }),
+  return /* @__PURE__ */ jsxs15("section", { className: "nuvio-card nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx15("h3", { className: "nuvio-section-title", children: "Device + breakpoint" }),
     controls
   ] });
 }
@@ -4485,12 +4707,12 @@ function PropertyPanelShell({
     }
     if (hasText && !patchTextId) {
       return {
-        error: developerDetails ? "Text cannot be patched for this target \u2014 add a data-nuvio-id on the text element." : "Nuvio can't safely edit this text yet."
+        error: developerDetails ? "Text cannot be patched for this target \u2014 add a data-nuvio-id on the text element." : "nuvio can't safely edit this text yet."
       };
     }
     if (hasStyle && !patchStyleId) {
       return {
-        error: developerDetails ? "Styles cannot be patched for this target." : "Nuvio can't safely edit this area yet."
+        error: developerDetails ? "Styles cannot be patched for this target." : "nuvio can't safely edit this area yet."
       };
     }
     if (hasText && patchTextId) {
@@ -4604,7 +4826,7 @@ function PropertyPanelShell({
     ]
   );
   const showWelcome = shouldShowWelcome({ developerDetails, dismissed: dismissedGuides });
-  const patchBlockedReason = indexIdCount === 0 ? "Source index has 0 ids \u2014 the dev server cannot map data-nuvio-id to files. Run pnpm dev from the repo root (builds packages), then hard-refresh. Check the terminal for [Nuvio] index warnings." : selectedId && !selectionResolved ? selectError ?? "Server did not confirm this id (no source file). Patches stay disabled until selection succeeds." : null;
+  const patchBlockedReason = indexIdCount === 0 ? "Source index has 0 ids \u2014 the dev server cannot map data-nuvio-id to files. Run pnpm dev from the repo root (builds packages), then hard-refresh. Check the terminal for [nuvio] index warnings." : selectedId && !selectionResolved ? selectError ?? "Server did not confirm this id (no source file). Patches stay disabled until selection succeeds." : null;
   const displayPatchBlockedReason = developerDetails ? patchBlockedReason : getSimplePatchBlockedMessage(indexIdCount, selectionResolved) ?? (selectError ? getSimpleSelectErrorMessage(selectError) : null);
   const previewApplyMismatch = hasStagedOps && selectionResolved && channelReady && indexIdCount > 0 && (!previewSummary || previewError != null || previewValidatedFingerprint !== stagedOpsFingerprint);
   const patchTargetConflict = textEditable && draftText !== baselineText && alphaPicksDiffer(picks, baselinePicks) && patchTextId != null && patchStyleId != null && patchTextId !== patchStyleId;
@@ -4865,7 +5087,7 @@ function PropertyPanelShell({
     { value: "ring-white", label: "ring-white" }
   ];
   if (panelCollapsed) {
-    return /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsxs15(
       "button",
       {
         type: "button",
@@ -4883,8 +5105,8 @@ function PropertyPanelShell({
         title: "Expand Editor panel",
         onClick: () => onPanelCollapsedChange(false),
         children: [
-          /* @__PURE__ */ jsx14("span", { className: tabOnRight ? "" : "nuvio-flip-x", "aria-hidden": "true", children: "\u203A" }),
-          /* @__PURE__ */ jsx14("span", { className: "nuvio-sr-only", children: "Expand Editor" })
+          /* @__PURE__ */ jsx15("span", { className: tabOnRight ? "" : "nuvio-flip-x", "aria-hidden": "true", children: "\u203A" }),
+          /* @__PURE__ */ jsx15("span", { className: "nuvio-sr-only", children: "Expand Editor" })
         ]
       }
     );
@@ -4895,22 +5117,22 @@ function PropertyPanelShell({
     top: displayPanelPosition.y,
     maxHeight: "calc(100vh - 48px)"
   };
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "aside",
     {
       ref: setShellElement,
       style: { ...NUVO_GLASS_SHELL_INLINE, ...panelStyle },
       className: `${NUVO_ROOT} nuvio-panel ${NUVO_GLASS_SHELL} ${docked ? "nuvio-panel--docked" : ""} ${panelDragging ? "nuvio-panel--dragging" : ""}`,
       onPointerDown: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsxs14("div", { className: NUVO_GLASS_CONTENT, children: [
-        /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs15("div", { className: NUVO_GLASS_CONTENT, children: [
+        /* @__PURE__ */ jsxs15(
           "header",
           {
             className: `nuvio-panel-header ${panelDragging ? "nuvio-panel-header--grabbing" : ""}`,
             onPointerDown: onHeaderPointerDown,
             children: [
-              /* @__PURE__ */ jsx14("span", { className: "nuvio-panel-header-title", children: "Editor" }),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15("span", { className: "nuvio-panel-header-title", children: "Editor" }),
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -4923,7 +5145,7 @@ function PropertyPanelShell({
                   children: "Developer details"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -4935,7 +5157,7 @@ function PropertyPanelShell({
                   children: "Reset"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -4950,9 +5172,9 @@ function PropertyPanelShell({
             ]
           }
         ),
-        developerDetails ? /* @__PURE__ */ jsx14(EditorStackVersions, { diagnostics: runtimeDiagnostics }) : null,
-        /* @__PURE__ */ jsxs14("div", { className: "nuvio-panel-body", children: [
-          showWelcome ? /* @__PURE__ */ jsx14(
+        developerDetails ? /* @__PURE__ */ jsx15(EditorStackVersions, { diagnostics: runtimeDiagnostics }) : null,
+        /* @__PURE__ */ jsxs15("div", { className: "nuvio-panel-body", children: [
+          showWelcome ? /* @__PURE__ */ jsx15(
             OnboardingGuide,
             {
               guideId: "welcome",
@@ -4960,15 +5182,15 @@ function PropertyPanelShell({
               onDismiss: () => dismissOnboardingGuide("welcome")
             }
           ) : null,
-          /* @__PURE__ */ jsx14("div", { className: "nuvio-selection-strip", children: selectedId ? developerDetails ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-            /* @__PURE__ */ jsx14("span", { className: "nuvio-selection-strip-id", children: selectedId }),
-            resolvedFile ? /* @__PURE__ */ jsxs14("span", { className: "nuvio-selection-strip-path", children: [
+          /* @__PURE__ */ jsx15("div", { className: "nuvio-selection-strip", children: selectedId ? developerDetails ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+            /* @__PURE__ */ jsx15("span", { className: "nuvio-selection-strip-id", children: selectedId }),
+            resolvedFile ? /* @__PURE__ */ jsxs15("span", { className: "nuvio-selection-strip-path", children: [
               resolvedFile,
               resolvedLine != null ? `:${resolvedLine}` : ""
             ] }) : null
-          ] }) : /* @__PURE__ */ jsxs14(Fragment5, { children: [
-            /* @__PURE__ */ jsx14("span", { className: "nuvio-selection-strip-id nuvio-selection-strip-id--friendly", children: selectionTitle }),
-            taskRouter.backNav ? /* @__PURE__ */ jsx14(
+          ] }) : /* @__PURE__ */ jsxs15(Fragment5, { children: [
+            /* @__PURE__ */ jsx15("span", { className: "nuvio-selection-strip-id nuvio-selection-strip-id--friendly", children: selectionTitle }),
+            taskRouter.backNav ? /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -4977,11 +5199,11 @@ function PropertyPanelShell({
                 children: taskRouter.backNav.label
               }
             ) : null
-          ] }) : /* @__PURE__ */ jsx14("span", { className: "nuvio-text-muted", children: "Click something on the page to edit it." }) }),
-          indexIdCount === 0 ? /* @__PURE__ */ jsx14("p", { className: "nuvio-text-xs nuvio-text-warn", children: developerDetails ? "Index empty \u2014 restart dev server." : getSimpleIndexEmptyMessage() }) : null,
-          developerDetails && selectedId && !resolvedFile && selectError ? /* @__PURE__ */ jsx14("p", { className: "nuvio-text-xs nuvio-text-error", children: selectError }) : null,
-          !developerDetails && selectedId && !resolvedFile && selectError ? /* @__PURE__ */ jsx14("p", { className: "nuvio-text-xs nuvio-text-error", children: getSimpleSelectErrorMessage(selectError) }) : null,
-          selectedEntry ? developerDetails ? /* @__PURE__ */ jsx14(SelectionMetadata, { entry: selectedEntry }) : !taskRouter.active && !simpleRouterMode ? /* @__PURE__ */ jsx14(SelectionSummary, { entry: selectedEntry }) : null : null,
+          ] }) : /* @__PURE__ */ jsx15("span", { className: "nuvio-text-muted", children: "Click something on the page to edit it." }) }),
+          indexIdCount === 0 ? /* @__PURE__ */ jsx15("p", { className: "nuvio-text-xs nuvio-text-warn", children: developerDetails ? "Index empty \u2014 restart dev server." : getSimpleIndexEmptyMessage() }) : null,
+          developerDetails && selectedId && !resolvedFile && selectError ? /* @__PURE__ */ jsx15("p", { className: "nuvio-text-xs nuvio-text-error", children: selectError }) : null,
+          !developerDetails && selectedId && !resolvedFile && selectError ? /* @__PURE__ */ jsx15("p", { className: "nuvio-text-xs nuvio-text-error", children: getSimpleSelectErrorMessage(selectError) }) : null,
+          selectedEntry ? developerDetails ? /* @__PURE__ */ jsx15(SelectionMetadata, { entry: selectedEntry }) : !taskRouter.active && !simpleRouterMode ? /* @__PURE__ */ jsx15(SelectionSummary, { entry: selectedEntry }) : null : null,
           taskRouter.active ? taskRouter.cardMenu : null,
           taskRouter.active ? taskRouter.tableMenu : null,
           taskRouter.active ? taskRouter.buttonMenu : null,
@@ -4989,9 +5211,9 @@ function PropertyPanelShell({
           taskRouter.active ? taskRouter.navMenu : null,
           taskRouter.active ? taskRouter.chartMenu : null,
           taskRouter.active ? taskRouter.sectionMenu : null,
-          taskRouter.active && simpleRouterMode === "nav" && taskRouter.navTask === "navigationItems" && taskRouter.navTargets.length > 0 ? /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-stack-2", children: [
-            /* @__PURE__ */ jsx14("p", { className: "nuvio-label", children: "Pick a link" }),
-            /* @__PURE__ */ jsx14("div", { className: "nuvio-stack-1", children: taskRouter.navTargets.map((navEntry) => /* @__PURE__ */ jsx14(
+          taskRouter.active && simpleRouterMode === "nav" && taskRouter.navTask === "navigationItems" && taskRouter.navTargets.length > 0 ? /* @__PURE__ */ jsxs15("section", { className: "nuvio-card nuvio-stack-2", children: [
+            /* @__PURE__ */ jsx15("p", { className: "nuvio-label", children: "Pick a link" }),
+            /* @__PURE__ */ jsx15("div", { className: "nuvio-stack-1", children: taskRouter.navTargets.map((navEntry) => /* @__PURE__ */ jsx15(
               "button",
               {
                 type: "button",
@@ -5002,7 +5224,7 @@ function PropertyPanelShell({
               navEntry.id
             )) })
           ] }) : null,
-          taskRouter.active && simpleRouterMode === "table" && taskRouter.tableTask === "columnHeaders" && !taskRouter.isDirectTableFieldEdit ? /* @__PURE__ */ jsx14(
+          taskRouter.active && simpleRouterMode === "table" && taskRouter.tableTask === "columnHeaders" && !taskRouter.isDirectTableFieldEdit ? /* @__PURE__ */ jsx15(
             TableColumnHeaderPicker,
             {
               headers: taskRouter.tableHeaders,
@@ -5011,7 +5233,7 @@ function PropertyPanelShell({
               onSelectId: onSelectIndexedId
             }
           ) : null,
-          taskRouter.active && simpleRouterMode === "table" && taskRouter.tableTask === "rows" && !taskRouter.isDirectTableFieldEdit ? /* @__PURE__ */ jsx14(
+          taskRouter.active && simpleRouterMode === "table" && taskRouter.tableTask === "rows" && !taskRouter.isDirectTableFieldEdit ? /* @__PURE__ */ jsx15(
             TableRowPicker,
             {
               rows: taskRouter.tableRows,
@@ -5022,7 +5244,7 @@ function PropertyPanelShell({
               }
             }
           ) : null,
-          contextualGuideId ? /* @__PURE__ */ jsx14(
+          contextualGuideId ? /* @__PURE__ */ jsx15(
             OnboardingGuide,
             {
               guideId: contextualGuideId,
@@ -5030,7 +5252,7 @@ function PropertyPanelShell({
               onDismiss: () => dismissOnboardingGuide(contextualGuideId)
             }
           ) : null,
-          developerDetails && selectedId && textTargets.length > 1 && activeTextTargetKey ? /* @__PURE__ */ jsx14(
+          developerDetails && selectedId && textTargets.length > 1 && activeTextTargetKey ? /* @__PURE__ */ jsx15(
             TextTargetPicker,
             {
               hostId: selectedId,
@@ -5041,7 +5263,7 @@ function PropertyPanelShell({
               onHoverKeyChange: onHoverTextTargetKeyChange
             }
           ) : null,
-          selectedEntry && selectedId && !missing ? /* @__PURE__ */ jsx14(
+          selectedEntry && selectedId && !missing ? /* @__PURE__ */ jsx15(
             ContainerGuidance,
             {
               entry: selectedEntry,
@@ -5063,7 +5285,7 @@ function PropertyPanelShell({
               }
             }
           ) : null,
-          selectedEntry && selectedId && !missing && developerDetails && !taskRouter.active ? /* @__PURE__ */ jsx14(
+          selectedEntry && selectedId && !missing && developerDetails && !taskRouter.active ? /* @__PURE__ */ jsx15(
             ComponentModePanel,
             {
               entry: selectedEntry,
@@ -5073,18 +5295,18 @@ function PropertyPanelShell({
               onSelectId: onSelectIndexedId
             }
           ) : null,
-          selectedId && missing ? /* @__PURE__ */ jsx14("p", { className: "nuvio-text-xs nuvio-text-warn", children: developerDetails ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
+          selectedId && missing ? /* @__PURE__ */ jsx15("p", { className: "nuvio-text-xs nuvio-text-warn", children: developerDetails ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
             "No matching ",
-            /* @__PURE__ */ jsx14("span", { className: "nuvio-text-mono", children: "data-nuvio-id" }),
+            /* @__PURE__ */ jsx15("span", { className: "nuvio-text-mono", children: "data-nuvio-id" }),
             " node in the document."
           ] }) : "This element isn't on the page anymore. Click it again or pick another." }) : null,
-          developerDetails && selectedId && !missing ? /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-stack-2", children: [
-            /* @__PURE__ */ jsx14("h3", { className: "nuvio-section-title", children: "Structure" }),
-            previewBusy && structuralPreviewActive ? /* @__PURE__ */ jsx14("p", { className: "nuvio-text-2xs nuvio-text-accent", children: "Updating layout\u2026" }) : null,
-            structuralPreviewMessage ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--error", children: structuralPreviewMessage }) : null,
-            structuralPreviewOk ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--success nuvio-banner--success-mono", children: structuralPreviewOk }) : null,
-            /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap", children: [
-              /* @__PURE__ */ jsx14(
+          developerDetails && selectedId && !missing ? /* @__PURE__ */ jsxs15("section", { className: "nuvio-card nuvio-stack-2", children: [
+            /* @__PURE__ */ jsx15("h3", { className: "nuvio-section-title", children: "Structure" }),
+            previewBusy && structuralPreviewActive ? /* @__PURE__ */ jsx15("p", { className: "nuvio-text-2xs nuvio-text-accent", children: "Updating layout\u2026" }) : null,
+            structuralPreviewMessage ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--error", children: structuralPreviewMessage }) : null,
+            structuralPreviewOk ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--success nuvio-banner--success-mono", children: structuralPreviewOk }) : null,
+            /* @__PURE__ */ jsxs15("div", { className: "nuvio-row-wrap", children: [
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5095,7 +5317,7 @@ function PropertyPanelShell({
                   children: "Move up"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5106,7 +5328,7 @@ function PropertyPanelShell({
                   children: "Move down"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5116,7 +5338,7 @@ function PropertyPanelShell({
                   children: "Hide"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5128,52 +5350,52 @@ function PropertyPanelShell({
               )
             ] })
           ] }) : null,
-          showEditSection && (developerDetails || showSimpleEditControls) ? /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-stack-2", children: [
-            developerDetails ? /* @__PURE__ */ jsx14("h3", { className: "nuvio-section-title", children: "Quick edits" }) : null,
-            hasStyleTargetChoice && developerDetails ? /* @__PURE__ */ jsxs14("label", { className: "nuvio-block nuvio-stack-1", children: [
-              /* @__PURE__ */ jsx14("span", { className: "nuvio-label", children: "Style target" }),
-              /* @__PURE__ */ jsxs14(
+          showEditSection && (developerDetails || showSimpleEditControls) ? /* @__PURE__ */ jsxs15("section", { className: "nuvio-card nuvio-stack-2", children: [
+            developerDetails ? /* @__PURE__ */ jsx15("h3", { className: "nuvio-section-title", children: "Quick edits" }) : null,
+            hasStyleTargetChoice && developerDetails ? /* @__PURE__ */ jsxs15("label", { className: "nuvio-block nuvio-stack-1", children: [
+              /* @__PURE__ */ jsx15("span", { className: "nuvio-label", children: "Style target" }),
+              /* @__PURE__ */ jsxs15(
                 "select",
                 {
                   className: "nuvio-control nuvio-select",
                   value: styleTargetMode,
                   onChange: (e) => setStyleTargetMode(e.target.value),
                   children: [
-                    /* @__PURE__ */ jsx14("option", { value: "container", children: "Card/container" }),
-                    /* @__PURE__ */ jsx14("option", { value: "text", children: "Text target" })
+                    /* @__PURE__ */ jsx15("option", { value: "container", children: "Card/container" }),
+                    /* @__PURE__ */ jsx15("option", { value: "text", children: "Text target" })
                   ]
                 }
               )
             ] }) : null,
-            previewBusy ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--info nuvio-text-2xs", children: developerDetails ? "Validating patch with the dev server\u2026" : "Checking your changes\u2026" }) : null,
-            lastPatchError ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--error", children: developerDetails ? lastPatchError : formatPatchUserMessagePlain(lastPatchError) ?? getSimpleSelectErrorMessage(lastPatchError) }) : null,
-            displayPreviewError && !structuralPreviewActive && developerDetails ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--error", children: displayPreviewError }) : null,
-            displayPatchBlockedReason && developerDetails ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--warn", children: displayPatchBlockedReason }) : null,
-            hasStagedOps && !displayPatchBlockedReason && previewApplyMismatch && developerDetails ? /* @__PURE__ */ jsxs14("p", { className: "nuvio-banner nuvio-banner--neutral nuvio-text-2xs nuvio-leading-snug", children: [
+            previewBusy ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--info nuvio-text-2xs", children: developerDetails ? "Validating patch with the dev server\u2026" : "Checking your changes\u2026" }) : null,
+            lastPatchError ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--error", children: developerDetails ? lastPatchError : formatPatchUserMessagePlain(lastPatchError) ?? getSimpleSelectErrorMessage(lastPatchError) }) : null,
+            displayPreviewError && !structuralPreviewActive && developerDetails ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--error", children: displayPreviewError }) : null,
+            displayPatchBlockedReason && developerDetails ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--warn", children: displayPatchBlockedReason }) : null,
+            hasStagedOps && !displayPatchBlockedReason && previewApplyMismatch && developerDetails ? /* @__PURE__ */ jsxs15("p", { className: "nuvio-banner nuvio-banner--neutral nuvio-text-2xs nuvio-leading-snug", children: [
               "Run ",
-              /* @__PURE__ */ jsx14("span", { className: "nuvio-font-medium", children: previewButtonLabel }),
+              /* @__PURE__ */ jsx15("span", { className: "nuvio-font-medium", children: previewButtonLabel }),
               " after each edit so the summary matches what you apply."
             ] }) : null,
-            hasStagedOps && !displayPatchBlockedReason && previewApplyMismatch && simpleMode ? /* @__PURE__ */ jsx14("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "Preview your changes before applying." }) : null,
-            patchTargetConflict ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--warn nuvio-text-2xs nuvio-leading-snug", children: developerDetails ? "Text and styles apply to different elements. Preview text first, then change styles \u2014 or pick one target in Edit target." : "Text and styles apply to different parts. Preview text first, then change styles." }) : null,
-            patchTargetError ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--error nuvio-text-2xs", children: developerDetails ? patchTargetError : patchTargetError.startsWith("Nuvio can't") || patchTargetError.startsWith("Nothing") || patchTargetError.startsWith("No changes") || patchTargetError.startsWith("Text and styles") || patchTargetError.startsWith("This part") ? patchTargetError : getSimpleSelectErrorMessage(patchTargetError) ?? patchTargetError }) : null,
-            patchStyleId && selectedId && patchStyleId !== selectedId && developerDetails ? /* @__PURE__ */ jsxs14("p", { className: "nuvio-text-2xs nuvio-text-muted nuvio-leading-snug", children: [
+            hasStagedOps && !displayPatchBlockedReason && previewApplyMismatch && simpleMode ? /* @__PURE__ */ jsx15("p", { className: "nuvio-text-2xs nuvio-text-muted", children: "Preview your changes before applying." }) : null,
+            patchTargetConflict ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--warn nuvio-text-2xs nuvio-leading-snug", children: developerDetails ? "Text and styles apply to different elements. Preview text first, then change styles \u2014 or pick one target in Edit target." : "Text and styles apply to different parts. Preview text first, then change styles." }) : null,
+            patchTargetError ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--error nuvio-text-2xs", children: developerDetails ? patchTargetError : patchTargetError.startsWith("nuvio can't") || patchTargetError.startsWith("Nothing") || patchTargetError.startsWith("No changes") || patchTargetError.startsWith("Text and styles") || patchTargetError.startsWith("This part") ? patchTargetError : getSimpleSelectErrorMessage(patchTargetError) ?? patchTargetError }) : null,
+            patchStyleId && selectedId && patchStyleId !== selectedId && developerDetails ? /* @__PURE__ */ jsxs15("p", { className: "nuvio-text-2xs nuvio-text-muted nuvio-leading-snug", children: [
               "Styles apply to",
               " ",
-              /* @__PURE__ */ jsx14("span", { className: "nuvio-font-medium", children: developerDetails ? patchStyleId : formatFriendlyId(patchStyleId, selectedEntry) }),
+              /* @__PURE__ */ jsx15("span", { className: "nuvio-font-medium", children: developerDetails ? patchStyleId : formatFriendlyId(patchStyleId, selectedEntry) }),
               developerDetails ? " (not the outer container you clicked)" : "",
               "."
             ] }) : null,
-            patchTextId && developerDetails ? /* @__PURE__ */ jsxs14("p", { className: "nuvio-text-2xs nuvio-text-muted nuvio-leading-snug", children: [
+            patchTextId && developerDetails ? /* @__PURE__ */ jsxs15("p", { className: "nuvio-text-2xs nuvio-text-muted nuvio-leading-snug", children: [
               "Text applies to",
               " ",
-              /* @__PURE__ */ jsx14("span", { className: "nuvio-font-medium", children: developerDetails ? patchTextId : formatFriendlyId(patchTextId, selectedEntry) }),
+              /* @__PURE__ */ jsx15("span", { className: "nuvio-font-medium", children: developerDetails ? patchTextId : formatFriendlyId(patchTextId, selectedEntry) }),
               "."
             ] }) : null,
-            developerDetails && !textEditable && textEditReason ? /* @__PURE__ */ jsx14("p", { className: "nuvio-banner nuvio-banner--neutral nuvio-text-2xs", children: textEditReason }) : null,
-            (!panelControls || panelControls.showText) && /* @__PURE__ */ jsxs14("label", { className: "nuvio-block nuvio-stack-1", children: [
-              /* @__PURE__ */ jsx14("span", { className: "nuvio-label", children: "Text" }),
-              /* @__PURE__ */ jsx14(
+            developerDetails && !textEditable && textEditReason ? /* @__PURE__ */ jsx15("p", { className: "nuvio-banner nuvio-banner--neutral nuvio-text-2xs", children: textEditReason }) : null,
+            (!panelControls || panelControls.showText) && /* @__PURE__ */ jsxs15("label", { className: "nuvio-block nuvio-stack-1", children: [
+              /* @__PURE__ */ jsx15("span", { className: "nuvio-label", children: "Text" }),
+              /* @__PURE__ */ jsx15(
                 "textarea",
                 {
                   value: draftText,
@@ -5184,9 +5406,9 @@ function PropertyPanelShell({
                 }
               )
             ] }),
-            showQuickStyle ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-stack-1", children: [
-              /* @__PURE__ */ jsx14("p", { className: "nuvio-label", children: "Quick Style" }),
-              /* @__PURE__ */ jsx14("div", { className: "nuvio-row-wrap", children: QUICK_TEXT_STYLE_PRESETS.map((preset) => /* @__PURE__ */ jsx14(
+            showQuickStyle ? /* @__PURE__ */ jsxs15("div", { className: "nuvio-stack-1", children: [
+              /* @__PURE__ */ jsx15("p", { className: "nuvio-label", children: "Quick Style" }),
+              /* @__PURE__ */ jsx15("div", { className: "nuvio-row-wrap", children: QUICK_TEXT_STYLE_PRESETS.map((preset) => /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5203,7 +5425,7 @@ function PropertyPanelShell({
                 preset.id
               )) })
             ] }) : null,
-            (!panelControls || panelControls.showTextColor) && (developerDetails || !showQuickStyle) && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showTextColor) && (developerDetails || !showQuickStyle) && /* @__PURE__ */ jsx15(
               ColorPickerRow,
               {
                 label: "Text color",
@@ -5214,7 +5436,7 @@ function PropertyPanelShell({
                 simpleMode: !developerDetails
               }
             ),
-            (!panelControls || panelControls.showBackground) && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showBackground) && /* @__PURE__ */ jsx15(
               ColorPickerRow,
               {
                 label: "Background",
@@ -5225,7 +5447,7 @@ function PropertyPanelShell({
                 simpleMode: !developerDetails
               }
             ),
-            (!panelControls || panelControls.showPadding) && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showPadding) && /* @__PURE__ */ jsx15(
               SelectRow,
               {
                 label: "Padding",
@@ -5236,7 +5458,7 @@ function PropertyPanelShell({
                 simpleCategory: "padding"
               }
             ),
-            (!panelControls || panelControls.showRadius) && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showRadius) && /* @__PURE__ */ jsx15(
               SelectRow,
               {
                 label: "Radius",
@@ -5247,7 +5469,7 @@ function PropertyPanelShell({
                 simpleCategory: "rounded"
               }
             ),
-            (!panelControls || panelControls.showFontSize) && developerDetails && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showFontSize) && developerDetails && /* @__PURE__ */ jsx15(
               SelectRow,
               {
                 label: "Size",
@@ -5258,7 +5480,7 @@ function PropertyPanelShell({
                 simpleCategory: "fontSize"
               }
             ),
-            (!panelControls || panelControls.showFontWeight) && developerDetails && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showFontWeight) && developerDetails && /* @__PURE__ */ jsx15(
               SelectRow,
               {
                 label: "Weight",
@@ -5269,7 +5491,7 @@ function PropertyPanelShell({
                 simpleCategory: "fontWeight"
               }
             ),
-            (!panelControls || panelControls.showWidth) && !developerDetails ? /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showWidth) && !developerDetails ? /* @__PURE__ */ jsx15(
               SelectRow,
               {
                 label: "Width",
@@ -5280,7 +5502,7 @@ function PropertyPanelShell({
                 simpleCategory: "width"
               }
             ) : null,
-            (!panelControls || panelControls.showShadow) && !developerDetails && /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showShadow) && !developerDetails && /* @__PURE__ */ jsx15(
               SelectRow,
               {
                 label: "Shadow",
@@ -5291,8 +5513,8 @@ function PropertyPanelShell({
                 simpleCategory: "shadow"
               }
             ),
-            (!panelControls || panelControls.showHideShow) && !developerDetails ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap", children: [
-              /* @__PURE__ */ jsx14(
+            (!panelControls || panelControls.showHideShow) && !developerDetails ? /* @__PURE__ */ jsxs15("div", { className: "nuvio-row-wrap", children: [
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5302,7 +5524,7 @@ function PropertyPanelShell({
                   children: "Hide"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5313,9 +5535,9 @@ function PropertyPanelShell({
                 }
               )
             ] }) : null,
-            developerDetails && LAYOUT_HELPERS.length > 0 ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-stack-1", children: [
-              /* @__PURE__ */ jsx14("p", { className: "nuvio-label", children: "Layout" }),
-              /* @__PURE__ */ jsx14("div", { className: "nuvio-row-wrap", children: LAYOUT_HELPERS.map((helper) => /* @__PURE__ */ jsx14(
+            developerDetails && LAYOUT_HELPERS.length > 0 ? /* @__PURE__ */ jsxs15("div", { className: "nuvio-stack-1", children: [
+              /* @__PURE__ */ jsx15("p", { className: "nuvio-label", children: "Layout" }),
+              /* @__PURE__ */ jsx15("div", { className: "nuvio-row-wrap", children: LAYOUT_HELPERS.map((helper) => /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5326,11 +5548,11 @@ function PropertyPanelShell({
                 helper.id
               )) })
             ] }) : null,
-            developerDetails ? /* @__PURE__ */ jsxs14("details", { className: "nuvio-more-styles", children: [
-              /* @__PURE__ */ jsx14("summary", { className: "nuvio-section-title nuvio-more-styles-summary", children: "More styles" }),
-              /* @__PURE__ */ jsxs14("div", { className: "nuvio-stack-2 nuvio-pt-1", children: [
-                /* @__PURE__ */ jsx14("p", { className: "nuvio-group-title", children: "Typography" }),
-                /* @__PURE__ */ jsx14(
+            developerDetails ? /* @__PURE__ */ jsxs15("details", { className: "nuvio-more-styles", children: [
+              /* @__PURE__ */ jsx15("summary", { className: "nuvio-section-title nuvio-more-styles-summary", children: "More styles" }),
+              /* @__PURE__ */ jsxs15("div", { className: "nuvio-stack-2 nuvio-pt-1", children: [
+                /* @__PURE__ */ jsx15("p", { className: "nuvio-group-title", children: "Typography" }),
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Font size",
@@ -5339,7 +5561,7 @@ function PropertyPanelShell({
                     options: fontSizeOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Weight",
@@ -5348,7 +5570,7 @@ function PropertyPanelShell({
                     options: fontWeightOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Line height",
@@ -5357,7 +5579,7 @@ function PropertyPanelShell({
                     options: lineHeightOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Letter spacing",
@@ -5366,7 +5588,7 @@ function PropertyPanelShell({
                     options: letterSpacingOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Text align",
@@ -5375,8 +5597,8 @@ function PropertyPanelShell({
                     options: textAlignOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14("p", { className: "nuvio-group-title", children: "Spacing" }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("p", { className: "nuvio-group-title", children: "Spacing" }),
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Padding X",
@@ -5385,7 +5607,7 @@ function PropertyPanelShell({
                     options: padXOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Padding Y",
@@ -5394,7 +5616,7 @@ function PropertyPanelShell({
                     options: padYOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Margin",
@@ -5403,7 +5625,7 @@ function PropertyPanelShell({
                     options: marginOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Margin X",
@@ -5412,7 +5634,7 @@ function PropertyPanelShell({
                     options: marginXOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Margin Y",
@@ -5421,8 +5643,8 @@ function PropertyPanelShell({
                     options: marginYOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14("p", { className: "nuvio-group-title", children: "Layout" }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("p", { className: "nuvio-group-title", children: "Layout" }),
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Flex direction",
@@ -5431,7 +5653,7 @@ function PropertyPanelShell({
                     options: flexDirectionOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Justify",
@@ -5440,7 +5662,7 @@ function PropertyPanelShell({
                     options: justifyOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Items align",
@@ -5449,7 +5671,7 @@ function PropertyPanelShell({
                     options: itemsOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Grid columns",
@@ -5458,7 +5680,7 @@ function PropertyPanelShell({
                     options: gridColsOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Gap",
@@ -5467,7 +5689,7 @@ function PropertyPanelShell({
                     options: gapOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Width",
@@ -5476,7 +5698,7 @@ function PropertyPanelShell({
                     options: widthOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Max width",
@@ -5485,7 +5707,7 @@ function PropertyPanelShell({
                     options: maxWidthOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Height",
@@ -5494,7 +5716,7 @@ function PropertyPanelShell({
                     options: heightOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Min height",
@@ -5503,8 +5725,8 @@ function PropertyPanelShell({
                     options: minHeightOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14("p", { className: "nuvio-group-title", children: "Visual" }),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15("p", { className: "nuvio-group-title", children: "Visual" }),
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Opacity",
@@ -5513,7 +5735,7 @@ function PropertyPanelShell({
                     options: opacityOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Shadow",
@@ -5522,7 +5744,7 @@ function PropertyPanelShell({
                     options: shadowOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Border width",
@@ -5531,7 +5753,7 @@ function PropertyPanelShell({
                     options: borderWidthOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Border color",
@@ -5540,7 +5762,7 @@ function PropertyPanelShell({
                     options: borderColorOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Ring width",
@@ -5549,7 +5771,7 @@ function PropertyPanelShell({
                     options: ringWidthOpts
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Ring color",
@@ -5560,12 +5782,12 @@ function PropertyPanelShell({
                 )
               ] })
             ] }) : null,
-            previewSummary && !structuralPreviewActive && developerDetails ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-preview-box", children: [
-              /* @__PURE__ */ jsx14("p", { className: "nuvio-preview-box-title", children: "Ready to apply" }),
-              /* @__PURE__ */ jsx14("p", { className: "nuvio-preview-box-body", children: developerDetails ? previewSummary : humanPreviewBlock || previewSummary })
+            previewSummary && !structuralPreviewActive && developerDetails ? /* @__PURE__ */ jsxs15("div", { className: "nuvio-preview-box", children: [
+              /* @__PURE__ */ jsx15("p", { className: "nuvio-preview-box-title", children: "Ready to apply" }),
+              /* @__PURE__ */ jsx15("p", { className: "nuvio-preview-box-body", children: developerDetails ? previewSummary : humanPreviewBlock || previewSummary })
             ] }) : null,
-            developerDetails ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap nuvio-pt-2", children: [
-              /* @__PURE__ */ jsx14(
+            developerDetails ? /* @__PURE__ */ jsxs15("div", { className: "nuvio-row-wrap nuvio-pt-2", children: [
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5583,7 +5805,7 @@ function PropertyPanelShell({
                   children: previewButtonLabel
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5603,7 +5825,7 @@ function PropertyPanelShell({
                   children: applyButtonLabel
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5613,7 +5835,7 @@ function PropertyPanelShell({
                   children: "Undo"
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5624,7 +5846,7 @@ function PropertyPanelShell({
               )
             ] }) : null
           ] }) : null,
-          simpleMode && selectedId && (displayPreviewError || displayPatchBlockedReason || selectedEntry?.riskLevel === "unsupported" && selectedEntry?.textEditable !== true) ? /* @__PURE__ */ jsx14(
+          simpleMode && selectedId && (displayPreviewError || displayPatchBlockedReason || selectedEntry?.riskLevel === "unsupported" && selectedEntry?.textEditable !== true) ? /* @__PURE__ */ jsx15(
             HandoffActionBar,
             {
               reason: displayPreviewError ?? displayPatchBlockedReason ?? getSimpleBlockedEditFallback(selectedId, selectedEntry),
@@ -5649,7 +5871,7 @@ function PropertyPanelShell({
               onChangeBreakpoint: () => onActiveBreakpointChange("base")
             }
           ) : null,
-          simpleMode && selectedId && !missing ? /* @__PURE__ */ jsx14(
+          simpleMode && selectedId && !missing ? /* @__PURE__ */ jsx15(
             SimpleModeActionBar,
             {
               previewLabel: previewButtonLabel,
@@ -5685,10 +5907,10 @@ function PropertyPanelShell({
               onUndo: () => onRequestUndo()
             }
           ) : null,
-          simpleMode && selectedId ? /* @__PURE__ */ jsxs14("details", { className: "nuvio-card nuvio-advanced-panel", children: [
-            /* @__PURE__ */ jsx14("summary", { className: "nuvio-section-title nuvio-advanced-summary", children: "Advanced" }),
-            /* @__PURE__ */ jsxs14("div", { className: "nuvio-stack-2 nuvio-pt-1", children: [
-              showResponsiveDeviceControls ? /* @__PURE__ */ jsx14(
+          simpleMode && selectedId ? /* @__PURE__ */ jsxs15("details", { className: "nuvio-card nuvio-advanced-panel", children: [
+            /* @__PURE__ */ jsx15("summary", { className: "nuvio-section-title nuvio-advanced-summary", children: "Advanced" }),
+            /* @__PURE__ */ jsxs15("div", { className: "nuvio-stack-2 nuvio-pt-1", children: [
+              showResponsiveDeviceControls ? /* @__PURE__ */ jsx15(
                 DeviceBreakpointPanel,
                 {
                   variant: "compact",
@@ -5699,8 +5921,8 @@ function PropertyPanelShell({
                   developerDetails: false
                 }
               ) : null,
-              showQuickStyle ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-                /* @__PURE__ */ jsx14(
+              showQuickStyle ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+                /* @__PURE__ */ jsx15(
                   ColorPickerRow,
                   {
                     label: "Text color",
@@ -5711,7 +5933,7 @@ function PropertyPanelShell({
                     simpleMode: true
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Size",
@@ -5722,7 +5944,7 @@ function PropertyPanelShell({
                     simpleCategory: "fontSize"
                   }
                 ),
-                /* @__PURE__ */ jsx14(
+                /* @__PURE__ */ jsx15(
                   SelectRow,
                   {
                     label: "Weight",
@@ -5734,7 +5956,7 @@ function PropertyPanelShell({
                   }
                 )
               ] }) : null,
-              showSimpleEditControls && taskRouter.presetContext === "card" ? /* @__PURE__ */ jsx14("div", { className: "nuvio-row-wrap", children: presetsForContext("card").map((preset) => /* @__PURE__ */ jsx14(
+              showSimpleEditControls && taskRouter.presetContext === "card" ? /* @__PURE__ */ jsx15("div", { className: "nuvio-row-wrap", children: presetsForContext("card").map((preset) => /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5744,9 +5966,9 @@ function PropertyPanelShell({
                 },
                 preset.id
               )) }) : null,
-              /* @__PURE__ */ jsxs14("details", { className: "nuvio-outline-panel", children: [
-                /* @__PURE__ */ jsx14("summary", { className: "nuvio-label", children: "Outline" }),
-                /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsxs15("details", { className: "nuvio-outline-panel", children: [
+                /* @__PURE__ */ jsx15("summary", { className: "nuvio-label", children: "Outline" }),
+                /* @__PURE__ */ jsx15(
                   ComponentTree,
                   {
                     entries: indexEntries,
@@ -5757,7 +5979,7 @@ function PropertyPanelShell({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   type: "button",
@@ -5768,8 +5990,8 @@ function PropertyPanelShell({
               )
             ] })
           ] }) : null,
-          !simpleMode ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-            showResponsiveDeviceControls ? /* @__PURE__ */ jsx14(
+          !simpleMode ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+            showResponsiveDeviceControls ? /* @__PURE__ */ jsx15(
               DeviceBreakpointPanel,
               {
                 variant: "section",
@@ -5780,9 +6002,9 @@ function PropertyPanelShell({
                 developerDetails
               }
             ) : null,
-            selectedId ? /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-card--tree", children: [
-              /* @__PURE__ */ jsx14("h3", { className: "nuvio-section-title", children: "Component tree" }),
-              /* @__PURE__ */ jsx14(
+            selectedId ? /* @__PURE__ */ jsxs15("section", { className: "nuvio-card nuvio-card--tree", children: [
+              /* @__PURE__ */ jsx15("h3", { className: "nuvio-section-title", children: "Component tree" }),
+              /* @__PURE__ */ jsx15(
                 ComponentTree,
                 {
                   entries: indexEntries,
@@ -5910,6 +6132,25 @@ function captureFirstSelection() {
   firstSelectionSent = true;
   captureOverlayEvent("first_selection");
 }
+function mapTagElementFailureReason(errorCode) {
+  if (errorCode === "duplicate_id") return "duplicate_id";
+  if (errorCode === "invalid_id") return "invalid_id";
+  if (errorCode === "node_not_found" || errorCode === "parse_error") return "node_not_found";
+  if (errorCode === "already_tagged") return "already_tagged";
+  if (errorCode === "write_error" || errorCode === "read_error") return "write_error";
+  return "tag_error";
+}
+function captureTagElementStarted() {
+  captureOverlayEvent("tag_element_started");
+}
+function captureTagElementCompleted() {
+  captureOverlayEvent("tag_element_completed");
+}
+function captureTagElementFailed(errorCode) {
+  captureOverlayEvent("tag_element_failed", {
+    reason: mapTagElementFailureReason(errorCode)
+  });
+}
 function captureApplyFailed(errorCode, options) {
   captureOverlayEvent("apply_failed", {
     reason: mapApplyFailureReason(errorCode, options)
@@ -5917,7 +6158,7 @@ function captureApplyFailed(errorCode, options) {
 }
 
 // src/NuvioDevShell.tsx
-import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
 function shortDisplayPath(absPath) {
   const norm = absPath.replace(/\\/g, "/");
   const idx = norm.lastIndexOf("/");
@@ -6156,6 +6397,11 @@ function NuvioDevShellInner() {
   const [resolvedFile, setResolvedFile] = useState9(void 0);
   const [resolvedLine, setResolvedLine] = useState9(void 0);
   const [selectError, setSelectError] = useState9(null);
+  const [untaggedTarget, setUntaggedTarget] = useState9(null);
+  const [tagSuggestedId, setTagSuggestedId] = useState9("");
+  const [tagBusy, setTagBusy] = useState9(false);
+  const [tagError, setTagError] = useState9(null);
+  const tagPendingRequestIdRef = useRef5(null);
   const [previewSummary, setPreviewSummary] = useState9(null);
   const [previewError, setPreviewError] = useState9(null);
   const [lastPatchError, setLastPatchError] = useState9(null);
@@ -6203,6 +6449,9 @@ function NuvioDevShellInner() {
       if (prev) {
         clearNuvioOutlines();
         setSelectedId(null);
+        setUntaggedTarget(null);
+        setTagError(null);
+        setTagBusy(false);
       }
       return !prev;
     });
@@ -6243,7 +6492,7 @@ function NuvioDevShellInner() {
           }
           patchPendingMapRef.current.delete(requestId);
           setPreviewBusy(false);
-          setPreviewError("No validation response from the dev server (timed out). Check the terminal for [Nuvio] errors.");
+          setPreviewError("No validation response from the dev server (timed out). Check the terminal for [nuvio] errors.");
         }, 15e3);
       }
       ws.send(
@@ -6359,11 +6608,63 @@ function NuvioDevShellInner() {
       })
     );
   }, []);
+  const onSelectUntagged = useCallback3(
+    (target) => {
+      setUntaggedTarget(target);
+      setTagError(null);
+      setTagBusy(false);
+      if (target) {
+        setTagSuggestedId(
+          suggestNuvioId({
+            tagName: target.tagName,
+            existingIds: knownIds,
+            libraryHint: runtimeDiagnostics?.detectedLibraries?.[0]
+          })
+        );
+        setSelectedId(null);
+        setSelectError(null);
+        setResolvedFile(void 0);
+        setResolvedLine(void 0);
+      }
+    },
+    [knownIds, runtimeDiagnostics?.detectedLibraries]
+  );
+  const onCancelUntagged = useCallback3(() => {
+    setUntaggedTarget(null);
+    setTagError(null);
+    setTagBusy(false);
+  }, []);
+  const onConfirmMakeEditable = useCallback3(() => {
+    const ws = wsRef.current;
+    const target = untaggedTarget;
+    const id = tagSuggestedId.trim();
+    if (!ws || ws.readyState !== WebSocket.OPEN || !target || !id) {
+      return;
+    }
+    const requestId = `tag-${globalThis.crypto?.randomUUID?.() ?? Date.now()}`;
+    tagPendingRequestIdRef.current = requestId;
+    setTagBusy(true);
+    setTagError(null);
+    captureTagElementStarted();
+    ws.send(
+      JSON.stringify({
+        type: "tagElement",
+        protocolVersion: PROTOCOL_VERSION,
+        requestId,
+        file: target.file,
+        line: target.line,
+        column: target.column,
+        nuvioId: id
+      })
+    );
+  }, [tagSuggestedId, untaggedTarget]);
   const onSelectId = useCallback3(
     (id) => {
       if (!id) {
         return;
       }
+      setUntaggedTarget(null);
+      setTagError(null);
       lastStagedOpsFpRef.current = null;
       patchPendingMapRef.current.clear();
       if (previewTimeoutRef.current) {
@@ -6475,6 +6776,25 @@ function NuvioDevShellInner() {
             setRuntimeDiagnostics(msg.diagnostics);
             return;
           }
+          if (msg.type === "tagElementAck") {
+            if (tagPendingRequestIdRef.current !== msg.requestId) {
+              return;
+            }
+            tagPendingRequestIdRef.current = null;
+            setTagBusy(false);
+            if (msg.ok && msg.id) {
+              captureTagElementCompleted();
+              setUntaggedTarget(null);
+              setTagError(null);
+              setSelectedId(msg.id);
+              captureFirstSelection();
+              sendSelect(msg.id);
+            } else {
+              captureTagElementFailed(msg.errorCode);
+              setTagError(msg.errorMessage ?? "Could not tag this element");
+            }
+            return;
+          }
           if (msg.type === "selectAck") {
             if (msg.ok && msg.file != null && msg.line != null) {
               setResolvedFile(shortDisplayPath(msg.file));
@@ -6642,8 +6962,32 @@ function NuvioDevShellInner() {
   }, [devicePreset]);
   const channelLabel = channel === "ready" ? "connected" : channel;
   const channelState = channel === "ready" ? "ready" : channel === "connecting" ? "connecting" : channel === "error" ? "error" : "idle";
-  const chromeUi = /* @__PURE__ */ jsxs15(Fragment6, { children: [
-    editMode ? /* @__PURE__ */ jsx15(
+  const chromeUi = /* @__PURE__ */ jsxs16(Fragment6, { children: [
+    editMode && untaggedTarget ? /* @__PURE__ */ jsx16(
+      "aside",
+      {
+        ref: (el) => assignRef(panelRef, el),
+        style: NUVO_GLASS_SHELL_INLINE,
+        className: `${NUVO_ROOT} nuvio-panel ${NUVO_GLASS_SHELL}`,
+        onPointerDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs16("div", { className: NUVO_GLASS_CONTENT, children: [
+          /* @__PURE__ */ jsx16("header", { className: "nuvio-panel-header", children: /* @__PURE__ */ jsx16("span", { className: "nuvio-panel-header-title", children: "Make Editable" }) }),
+          /* @__PURE__ */ jsx16(
+            MakeEditablePanel,
+            {
+              target: untaggedTarget,
+              suggestedId: tagSuggestedId,
+              onSuggestedIdChange: setTagSuggestedId,
+              onConfirm: onConfirmMakeEditable,
+              onCancel: onCancelUntagged,
+              busy: tagBusy,
+              error: tagError
+            }
+          )
+        ] })
+      }
+    ) : null,
+    editMode && !untaggedTarget ? /* @__PURE__ */ jsx16(
       PropertyPanelShell,
       {
         shellRef: panelRef,
@@ -6690,7 +7034,7 @@ function NuvioDevShellInner() {
         onActiveBreakpointChange: setActiveBreakpoint
       }
     ) : null,
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       "div",
       {
         ref: (el) => assignRef(chipRef, el),
@@ -6699,28 +7043,28 @@ function NuvioDevShellInner() {
           ...chipPos ? { left: chipPos.x, top: chipPos.y, right: "auto", bottom: "auto" } : {}
         },
         className: `${NUVO_ROOT} nuvio-chip ${NUVO_GLASS_SHELL} ${chromeLayout.chip.collapsed ? "nuvio-chip--collapsed" : ""} ${chipDragging ? "nuvio-chip--dragging" : ""}`,
-        children: /* @__PURE__ */ jsxs15("div", { className: NUVO_GLASS_CONTENT, children: [
-          /* @__PURE__ */ jsxs15(
+        children: /* @__PURE__ */ jsxs16("div", { className: NUVO_GLASS_CONTENT, children: [
+          /* @__PURE__ */ jsxs16(
             "div",
             {
               className: `nuvio-chip-header ${chipDragging ? "nuvio-chip-header--grabbing" : ""}`,
               onPointerDown: onChipHeaderPointerDown,
               children: [
-                /* @__PURE__ */ jsx15("span", { className: "nuvio-chip-title", children: "Nuvio" }),
-                /* @__PURE__ */ jsx15("span", { className: "nuvio-chip-spacer", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16("span", { className: "nuvio-chip-title", children: "nuvio" }),
+                /* @__PURE__ */ jsx16("span", { className: "nuvio-chip-spacer", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx16(
                   "button",
                   {
                     type: "button",
                     className: "nuvio-button-icon",
                     title: chromeLayout.chip.collapsed ? "Expand chip" : "Collapse chip",
-                    "aria-label": chromeLayout.chip.collapsed ? "Expand Nuvio chip" : "Collapse Nuvio chip",
+                    "aria-label": chromeLayout.chip.collapsed ? "Expand nuvio chip" : "Collapse nuvio chip",
                     onPointerDown: (e) => e.stopPropagation(),
                     onClick: () => onChipCollapsedChange(!chromeLayout.chip.collapsed),
                     children: chromeLayout.chip.collapsed ? "+" : "\u2212"
                   }
                 ),
-                chromeLayout.chip.collapsed ? null : /* @__PURE__ */ jsx15(
+                chromeLayout.chip.collapsed ? null : /* @__PURE__ */ jsx16(
                   "button",
                   {
                     type: "button",
@@ -6732,7 +7076,7 @@ function NuvioDevShellInner() {
                     children: "Reset"
                   }
                 ),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   "button",
                   {
                     type: "button",
@@ -6748,7 +7092,7 @@ function NuvioDevShellInner() {
               ]
             }
           ),
-          !chromeLayout.chip.collapsed ? /* @__PURE__ */ jsx15(
+          !chromeLayout.chip.collapsed ? /* @__PURE__ */ jsx16(
             NuvioChipStatus,
             {
               channel: channelState,
@@ -6766,8 +7110,8 @@ function NuvioDevShellInner() {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs15(Fragment6, { children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs16(Fragment6, { children: [
+    /* @__PURE__ */ jsx16(
       InteractionLayer,
       {
         enabled: editMode,
@@ -6775,6 +7119,8 @@ function NuvioDevShellInner() {
         knownIds,
         selectedId,
         onSelectId,
+        untaggedTarget,
+        onSelectUntagged,
         textTargetHostId: selectedId,
         textTargets: selectedEntry?.textTargets,
         activeTextTargetKey,
@@ -6787,7 +7133,7 @@ function NuvioDevShellInner() {
 }
 
 // src/index.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 loadOverlayStyles();
 function nuvioDevEnabled() {
   const env = import.meta.env;
@@ -6797,7 +7143,7 @@ function NuvioDevShell() {
   if (!nuvioDevEnabled()) {
     return null;
   }
-  return /* @__PURE__ */ jsx16(NuvioDevShellInner, {});
+  return /* @__PURE__ */ jsx17(NuvioDevShellInner, {});
 }
 export {
   NuvioDevShell