@nuvio/overlay 0.5.5 → 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;
@@ -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,
@@ -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
     ] })
   ] });
 }
@@ -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,
@@ -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",
@@ -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
   ] });
 }
@@ -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;
     });
@@ -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,16 +7043,16 @@ 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",
@@ -6720,7 +7064,7 @@ function NuvioDevShellInner() {
                     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