@nuvio/overlay 0.5.3 → 0.5.5

package/dist/index.css

@@ -1012,21 +1012,16 @@ select.nuvio-control {
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 .nuvio-color-popover {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  margin-top: 4px;
-  max-height: min(20rem, 50vh);
   overflow: auto;
   border-radius: var(--nuvio-radius-inner);
   border: 1px solid var(--nuvio-border-strong);
-  background: rgba(3, 7, 18, 0.94);
-  -webkit-backdrop-filter: var(--nuvio-inner-blur);
-  backdrop-filter: var(--nuvio-inner-blur);
+  background: rgb(15, 23, 42);
   padding: 10px;
   box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
 }
+.nuvio-color-popover--fixed {
+  pointer-events: auto;
+}
 .nuvio-color-specials {
   display: flex;
   flex-wrap: wrap;
@@ -1136,7 +1131,10 @@ select.nuvio-control {
   color: var(--nuvio-text-muted);
 }
 .nuvio-card--actions {
+  position: relative;
+  z-index: 1;
   border-color: rgba(56, 189, 248, 0.25);
+  background: rgb(15, 23, 42);
 }
 .nuvio-action-stack {
   display: flex;

package/dist/index.js

@@ -28,12 +28,12 @@ function loadOverlayStyles() {
 import {
   useCallback as useCallback3,
   useEffect as useEffect9,
-  useLayoutEffect as useLayoutEffect2,
+  useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo6,
   useRef as useRef5,
   useState as useState9
 } from "react";
-import { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 import {
   NUVIO_WS_PATH,
   PROTOCOL_VERSION,
@@ -409,7 +409,7 @@ function useNuvioShadowMount() {
 import {
   useCallback as useCallback2,
   useEffect as useEffect8,
-  useLayoutEffect,
+  useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo5,
   useRef as useRef4,
   useState as useState8
@@ -641,6 +641,23 @@ function parseClassNameByBreakpoint(className) {
   }
   return buckets;
 }
+function classNameHasResponsiveUtilities(className) {
+  const buckets = parseClassNameByBreakpoint(className);
+  return BREAKPOINT_ORDER.some((bp) => bp !== "base" && buckets[bp].length > 0);
+}
+var INTERACTIVE_VARIANT_RE = /^(?:hover|focus|focus-within|active|disabled|group-hover|peer-hover|first|last|odd|even):/;
+function isInteractiveVariantToken(token) {
+  return INTERACTIVE_VARIANT_RE.test(token);
+}
+function isDarkVariantToken(token) {
+  return /^dark:/.test(token);
+}
+function includeDarkVariantsInRead() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  return document.documentElement.classList.contains("dark");
+}
 function stripVariantPrefixes(token) {
   let t = token;
   for (; ; ) {
@@ -657,18 +674,26 @@ function flattenTokensAtBreakpoint(className, activeBreakpoint) {
   const buckets = parseClassNameByBreakpoint(className);
   const idx = BREAKPOINT_ORDER.indexOf(activeBreakpoint);
   const out = [];
+  const includeDark = includeDarkVariantsInRead();
   for (const tok of buckets.passthrough) {
-    if (/^dark:/.test(tok)) {
-      out.push(stripVariantPrefixes(tok));
+    if (isInteractiveVariantToken(tok)) {
+      continue;
+    }
+    if (isDarkVariantToken(tok)) {
+      if (includeDark) {
+        out.push(stripVariantPrefixes(tok));
+      }
+      continue;
     }
   }
   for (let i = 0; i <= idx; i++) {
     out.push(...buckets[BREAKPOINT_ORDER[i]]);
   }
   for (const tok of buckets.passthrough) {
-    if (!/^dark:/.test(tok)) {
-      out.push(stripVariantPrefixes(tok));
+    if (isInteractiveVariantToken(tok) || isDarkVariantToken(tok)) {
+      continue;
     }
+    out.push(stripVariantPrefixes(tok));
   }
   return out;
 }
@@ -1166,12 +1191,12 @@ function mapUnsupportedReasonToSimple(reason) {
 function getSimpleBlockedEditFallback(selectedId, selectedEntry) {
   const textContext = selectedEntry?.textEditable === true || selectedId != null && /\.(label|value|nameText|name|price|category|status|title|subtitle)$/.test(selectedId) || selectedId != null && selectedId.includes(".header.");
   if (textContext) {
-    return "Nuvio can't safely edit this text yet.";
+    return "nuvio can't safely edit this text yet.";
   }
-  return "Nuvio can't safely edit this element.";
+  return "nuvio can't safely edit this element.";
 }
 function getSimpleIndexEmptyMessage() {
-  return "Nothing is set up to edit yet. Add Nuvio ids to elements in your project, then restart the dev server.";
+  return "Nothing is set up to edit yet. Add nuvio ids to elements in your project, then restart the dev server.";
 }
 function getSimplePatchBlockedMessage(indexIdCount, selectionResolved) {
   if (indexIdCount === 0) {
@@ -1736,7 +1761,7 @@ var REASON_MAP = [
   {
     match: (r) => r.includes("host_not_found") || r.includes("No JSX host"),
     message: {
-      sentence: "Nuvio couldn't find this element in source \u2014 click it again or refresh the page.",
+      sentence: "nuvio couldn't find this element in source \u2014 click it again or refresh the page.",
       suggestedAction: "addId"
     }
   },
@@ -1757,9 +1782,9 @@ var REASON_MAP = [
   {
     match: (r) => r.includes("Unknown or disallowed Tailwind"),
     message: {
-      sentence: "This class uses utilities Nuvio can't edit yet \u2014 simplify the styles on this element or edit in your code editor.",
+      sentence: "This class uses utilities nuvio can't edit yet \u2014 simplify the styles on this element or edit in your code editor.",
       suggestedAction: "useHandoff",
-      handoffStep: "Remove or simplify responsive/dark Tailwind classes on this element so Nuvio can edit padding, radius, and shadow."
+      handoffStep: "Remove or simplify responsive/dark Tailwind classes on this element so nuvio can edit padding, radius, and shadow."
     }
   }
 ];
@@ -1778,7 +1803,7 @@ function mapReasonToPlainMessage(reason) {
 }
 function getPlainPatchHandoffStep(message) {
   if (!message) {
-    return "Review this element in source and fix the styles or Nuvio ids.";
+    return "Review this element in source and fix the styles or nuvio ids.";
   }
   const stripped = message.replace(/^Error:\s*/i, "").trim();
   const mapped = mapReasonToPlainMessage(stripped);
@@ -2417,7 +2442,7 @@ function buildFixHandoffClipboard(ctx) {
   const fileLine = ctx.file != null ? `${ctx.file}${ctx.line != null ? `:${ctx.line}` : ""}` : "(unknown file)";
   const component = ctx.componentName ?? ctx.hostId;
   return [
-    "Nuvio could not apply this edit safely.",
+    "nuvio could not apply this edit safely.",
     "",
     `Component: ${component} (${ctx.hostId})`,
     `File: ${fileLine}`,
@@ -2430,7 +2455,7 @@ function buildFixHandoffClipboard(ctx) {
     `"In ${ctx.file ?? "the component file"}, ${ctx.suggestedNextStep}"`
   ].join("\n");
 }
-var MAKE_TABLE_EDITABLE_SNIPPET = `Add Nuvio table ids (v0.4 contract):
+var MAKE_TABLE_EDITABLE_SNIPPET = `Add nuvio table ids (v0.4 contract):
 - Section wrapper: data-nuvio-id="{host}.section"
 - Title h3: data-nuvio-id="{host}.title"
 - Table scroll area: data-nuvio-id="{host}.table"
@@ -2654,7 +2679,7 @@ function HandoffActionBar({
   file,
   line,
   componentName,
-  userIntent = "edit selection in Nuvio",
+  userIntent = "edit selection in nuvio",
   tableContext = false,
   simpleMode = false,
   onSwitchTarget,
@@ -2756,7 +2781,7 @@ function SimpleModeActionBar({
 // src/selection-guides.ts
 var GUIDE_CONTENT = {
   welcome: {
-    title: "Welcome to Nuvio",
+    title: "Welcome to nuvio",
     body: "Click something on the page \u2192 choose what to change \u2192 Preview Changes \u2192 Apply to Code. Changes save to your source files. Undo anytime. If an area isn't editable, use Copy Fix Prompt."
   },
   "first-selection": {
@@ -3801,7 +3826,14 @@ function dismissGuide(id) {
 }
 
 // src/ColorPickerRow.tsx
-import { useEffect as useEffect7, useId, useRef as useRef3, useState as useState7 } from "react";
+import {
+  useEffect as useEffect7,
+  useId,
+  useLayoutEffect,
+  useRef as useRef3,
+  useState as useState7
+} from "react";
+import { createPortal } from "react-dom";
 import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function hexForUtility(value, options) {
   if (!value) {
@@ -3831,6 +3863,29 @@ function hexForUtility(value, options) {
 function familyLabel(family) {
   return family.charAt(0).toUpperCase() + family.slice(1);
 }
+function getOverlayPortalRoot() {
+  const host = document.getElementById(NUVIO_SHADOW_HOST_ID);
+  const mount = host?.shadowRoot?.querySelector(".nuvio-shadow-mount");
+  return mount instanceof HTMLElement ? mount : null;
+}
+function measurePopoverBox(trigger) {
+  const rect = trigger.getBoundingClientRect();
+  const margin = 8;
+  const preferredMax = 320;
+  const minWidth = 300;
+  const spaceBelow = window.innerHeight - rect.bottom - margin;
+  const spaceAbove = rect.top - margin;
+  const placeAbove = spaceBelow < 200 && spaceAbove > spaceBelow;
+  const maxHeight = Math.max(120, Math.min(preferredMax, placeAbove ? spaceAbove : spaceBelow));
+  const width = Math.min(Math.max(rect.width, minWidth), window.innerWidth - margin * 2);
+  let left = rect.left;
+  if (left + width > window.innerWidth - margin) {
+    left = window.innerWidth - margin - width;
+  }
+  left = Math.max(margin, left);
+  const top = placeAbove ? Math.max(margin, rect.top - maxHeight - 4) : rect.bottom + 4;
+  return { top, left, width, maxHeight };
+}
 function ColorPickerRow({
   label,
   value,
@@ -3840,10 +3895,36 @@ function ColorPickerRow({
   simpleMode = false
 }) {
   const [open, setOpen] = useState7(false);
+  const [popoverBox, setPopoverBox] = useState7(null);
   const rootRef = useRef3(null);
   const listId = useId();
   const swatchHex = hexForUtility(value, options);
   const displayValue = simpleMode ? value ? options.find((o) => o.value === value)?.label ?? "Custom" : "Default" : value || "\u2014";
+  const updatePopoverBox = () => {
+    const row = rootRef.current;
+    if (!row) {
+      return;
+    }
+    const trigger = row.querySelector(".nuvio-color-trigger");
+    if (!(trigger instanceof HTMLElement)) {
+      return;
+    }
+    setPopoverBox(measurePopoverBox(trigger));
+  };
+  useLayoutEffect(() => {
+    if (!open) {
+      setPopoverBox(null);
+      return;
+    }
+    updatePopoverBox();
+    window.addEventListener("resize", updatePopoverBox);
+    const panelBody = rootRef.current?.closest(".nuvio-panel-body");
+    panelBody?.addEventListener("scroll", updatePopoverBox, { passive: true });
+    return () => {
+      window.removeEventListener("resize", updatePopoverBox);
+      panelBody?.removeEventListener("scroll", updatePopoverBox);
+    };
+  }, [open]);
   useEffect7(() => {
     if (!open) {
       return;
@@ -3854,7 +3935,9 @@ function ColorPickerRow({
         return;
       }
       const path = typeof e.composedPath === "function" ? e.composedPath() : [];
-      const clickedInside = path.includes(root) || root.contains(e.target);
+      const clickedInside = path.includes(root) || root.contains(e.target) || path.some(
+        (node) => node instanceof HTMLElement && (node.id === listId || node.classList.contains("nuvio-color-popover"))
+      );
       if (!clickedInside) {
         setOpen(false);
       }
@@ -3869,6 +3952,89 @@ function ColorPickerRow({
     onChange(next);
     setOpen(false);
   };
+  const popoverStyle = popoverBox ? {
+    position: "fixed",
+    top: popoverBox.top,
+    left: popoverBox.left,
+    width: popoverBox.width,
+    maxHeight: popoverBox.maxHeight,
+    zIndex: 2147483640
+  } : void 0;
+  const popover = open && popoverBox ? /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      id: listId,
+      role: "listbox",
+      "aria-label": `${label} palette`,
+      className: "nuvio-color-popover nuvio-color-popover--fixed",
+      style: popoverStyle,
+      children: [
+        !simpleMode ? /* @__PURE__ */ jsxs13(
+          "p",
+          {
+            className: "nuvio-text-3xs nuvio-leading-snug nuvio-text-muted",
+            style: { marginBottom: 8 },
+            children: [
+              "Tailwind palette \u2014 picks a utility class (e.g. ",
+              utilityPrefix,
+              "-sky-500), not a custom hex value."
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx13("div", { className: "nuvio-color-specials", children: specials.map((o) => /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": value === o.value,
+            title: o.label,
+            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 } }),
+              o.label
+            ]
+          },
+          o.value || "__none"
+        )) }),
+        /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: "nuvio-palette-grid",
+            style: {
+              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) }),
+                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(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": selected,
+                      title: simpleMode ? `${familyLabel(family)} ${shade}` : util,
+                      className: `nuvio-palette-swatch ${selected ? "nuvio-palette-swatch--selected" : ""}`,
+                      style: { backgroundColor: hex },
+                      onClick: () => pick(util)
+                    },
+                    util
+                  );
+                })
+              ] }, family))
+            ]
+          }
+        )
+      ]
+    }
+  ) : 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: [
@@ -3899,84 +4065,15 @@ function ColorPickerRow({
           ]
         }
       ),
-      open ? /* @__PURE__ */ jsxs13(
-        "div",
-        {
-          id: listId,
-          role: "listbox",
-          "aria-label": `${label} palette`,
-          className: "nuvio-color-popover",
-          children: [
-            !simpleMode ? /* @__PURE__ */ jsxs13("p", { className: "nuvio-text-3xs nuvio-leading-snug nuvio-text-muted", style: { marginBottom: 8 }, children: [
-              "Tailwind palette \u2014 picks a utility class (e.g. ",
-              utilityPrefix,
-              "-sky-500), not a custom hex value."
-            ] }) : null,
-            /* @__PURE__ */ jsx13("div", { className: "nuvio-color-specials", children: specials.map((o) => /* @__PURE__ */ jsxs13(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                "aria-selected": value === o.value,
-                title: o.label,
-                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 }
-                    }
-                  ),
-                  o.label
-                ]
-              },
-              o.value || "__none"
-            )) }),
-            /* @__PURE__ */ jsxs13(
-              "div",
-              {
-                className: "nuvio-palette-grid",
-                style: {
-                  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) }),
-                    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(
-                        "button",
-                        {
-                          type: "button",
-                          role: "option",
-                          "aria-selected": selected,
-                          title: simpleMode ? `${familyLabel(family)} ${shade}` : util,
-                          className: `nuvio-palette-swatch ${selected ? "nuvio-palette-swatch--selected" : ""}`,
-                          style: { backgroundColor: hex },
-                          onClick: () => pick(util)
-                        },
-                        util
-                      );
-                    })
-                  ] }, family))
-                ]
-              }
-            )
-          ]
-        }
-      ) : null
+      portalRoot && popover ? createPortal(popover, portalRoot) : null
     ] })
   ] });
 }
 
 // src/PropertyPanelShell.tsx
 import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var NUVO_PREVIEW_CHANGES_LABEL = "Preview Changes";
+var NUVO_APPLY_TO_CODE_LABEL = "Apply to Code";
 function assignShellRef(shellRef, el) {
   shellRef.current = el;
 }
@@ -4015,6 +4112,77 @@ function SelectRow({
     )
   ] });
 }
+function DeviceBreakpointPanel({
+  devicePreset,
+  onDevicePresetChange,
+  activeBreakpoint,
+  onActiveBreakpointChange,
+  developerDetails,
+  variant
+}) {
+  const controls = /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap", children: [
+      /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: `nuvio-button-chip ${devicePreset === "desktop" ? "nuvio-button-chip--active" : ""}`,
+          onClick: () => onDevicePresetChange("desktop"),
+          children: "Desktop"
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: `nuvio-button-chip ${devicePreset === "tablet" ? "nuvio-button-chip--active" : ""}`,
+          onClick: () => onDevicePresetChange("tablet"),
+          children: "Tablet"
+        }
+      ),
+      /* @__PURE__ */ jsx14(
+        "button",
+        {
+          type: "button",
+          className: `nuvio-button-chip ${devicePreset === "mobile" ? "nuvio-button-chip--active" : ""}`,
+          onClick: () => onDevicePresetChange("mobile"),
+          children: "Mobile"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx14(
+      SelectRow,
+      {
+        label: developerDetails ? "Active BP" : "Applies on",
+        value: activeBreakpoint,
+        onChange: (v) => onActiveBreakpointChange(v),
+        options: [
+          { value: "base", label: developerDetails ? "base" : formatPlainBreakpointLabel("base") },
+          { value: "sm", label: developerDetails ? "sm" : formatPlainBreakpointLabel("sm") },
+          { value: "md", label: developerDetails ? "md" : formatPlainBreakpointLabel("md") },
+          { value: "lg", label: developerDetails ? "lg" : formatPlainBreakpointLabel("lg") },
+          { value: "xl", label: developerDetails ? "xl" : formatPlainBreakpointLabel("xl") }
+        ],
+        developerDetails
+      }
+    ),
+    !developerDetails ? /* @__PURE__ */ jsxs14("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
+      "Applies on:",
+      " ",
+      /* @__PURE__ */ jsx14("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" }),
+      controls
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-stack-2", children: [
+    /* @__PURE__ */ jsx14("h3", { className: "nuvio-section-title", children: "Device + breakpoint" }),
+    controls
+  ] });
+}
 function PropertyPanelShell({
   devicePreset,
   onDevicePresetChange,
@@ -4130,8 +4298,8 @@ function PropertyPanelShell({
       buildHumanPreviewLines({ baselineText, draftText, baselinePicks, draftPicks: picks })
     );
   }, [baselinePicks, baselineText, developerDetails, draftText, picks]);
-  const previewButtonLabel = developerDetails ? "Validate" : "Preview Changes";
-  const applyButtonLabel = developerDetails ? "Apply" : "Apply to Code";
+  const previewButtonLabel = NUVO_PREVIEW_CHANGES_LABEL;
+  const applyButtonLabel = NUVO_APPLY_TO_CODE_LABEL;
   const simpleMode = !developerDetails;
   const selectionTitle = selectedId && selectedEntry ? formatSelectionTitle(selectedId, selectedEntry, indexEntries) : null;
   const showEditSection = selectedId && !missing && (developerDetails || !taskRouter.active || taskRouter.showTaskControls);
@@ -4197,6 +4365,20 @@ function PropertyPanelShell({
     }
     return containerStyleId ?? textStyleId ?? selectedId;
   }, [containerStyleId, selectedId, styleTargetMode, textStyleId]);
+  const [styleHostClassName, setStyleHostClassName] = useState8("");
+  useEffect8(() => {
+    if (!selectedId) {
+      setStyleHostClassName("");
+      return;
+    }
+    const styleId = patchStyleId ?? selectedId;
+    const el = document.querySelector(`[data-nuvio-id="${escapeAttrSelector(styleId)}"]`);
+    setStyleHostClassName(el instanceof HTMLElement ? el.className : "");
+  }, [selectedId, patchStyleId, stagedVersion]);
+  const showResponsiveDeviceControls = useMemo5(
+    () => classNameHasResponsiveUtilities(styleHostClassName),
+    [styleHostClassName]
+  );
   useEffect8(() => {
     if (!selectedId) {
       setMissing(false);
@@ -4303,12 +4485,12 @@ function PropertyPanelShell({
     }
     if (hasText && !patchTextId) {
       return {
-        error: developerDetails ? "Text cannot be patched for this target \u2014 add a data-nuvio-id on the text element." : "Nuvio can't safely edit this text yet."
+        error: developerDetails ? "Text cannot be patched for this target \u2014 add a data-nuvio-id on the text element." : "nuvio can't safely edit this text yet."
       };
     }
     if (hasStyle && !patchStyleId) {
       return {
-        error: developerDetails ? "Styles cannot be patched for this target." : "Nuvio can't safely edit this area yet."
+        error: developerDetails ? "Styles cannot be patched for this target." : "nuvio can't safely edit this area yet."
       };
     }
     if (hasText && patchTextId) {
@@ -4325,7 +4507,7 @@ function PropertyPanelShell({
     }
     if (hasText && hasStyle && patchTextId !== patchStyleId) {
       return {
-        error: developerDetails ? "Text and styles target different elements. Validate and apply text first, then edit styles (or pick a single element in Edit target)." : "Text and styles apply to different parts. Preview text first, then change styles."
+        error: developerDetails ? "Text and styles target different elements. Preview and apply text first, then edit styles (or pick a single element in Edit target)." : "Text and styles apply to different parts. Preview text first, then change styles."
       };
     }
     const id = hasText ? patchTextId : patchStyleId;
@@ -4422,7 +4604,7 @@ function PropertyPanelShell({
     ]
   );
   const showWelcome = shouldShowWelcome({ developerDetails, dismissed: dismissedGuides });
-  const patchBlockedReason = indexIdCount === 0 ? "Source index has 0 ids \u2014 the dev server cannot map data-nuvio-id to files. Run pnpm dev from the repo root (builds packages), then hard-refresh. Check the terminal for [Nuvio] index warnings." : selectedId && !selectionResolved ? selectError ?? "Server did not confirm this id (no source file). Patches stay disabled until selection succeeds." : null;
+  const patchBlockedReason = indexIdCount === 0 ? "Source index has 0 ids \u2014 the dev server cannot map data-nuvio-id to files. Run pnpm dev from the repo root (builds packages), then hard-refresh. Check the terminal for [nuvio] index warnings." : selectedId && !selectionResolved ? selectError ?? "Server did not confirm this id (no source file). Patches stay disabled until selection succeeds." : null;
   const displayPatchBlockedReason = developerDetails ? patchBlockedReason : getSimplePatchBlockedMessage(indexIdCount, selectionResolved) ?? (selectError ? getSimpleSelectErrorMessage(selectError) : null);
   const previewApplyMismatch = hasStagedOps && selectionResolved && channelReady && indexIdCount > 0 && (!previewSummary || previewError != null || previewValidatedFingerprint !== stagedOpsFingerprint);
   const patchTargetConflict = textEditable && draftText !== baselineText && alphaPicksDiffer(picks, baselinePicks) && patchTextId != null && patchStyleId != null && patchTextId !== patchStyleId;
@@ -4465,7 +4647,7 @@ function PropertyPanelShell({
     canMoveDown: false,
     peerCount: 0
   }));
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!selectedId || missing) {
       setSiblingMove({ canMoveUp: false, canMoveDown: false, peerCount: 0 });
       return;
@@ -4973,8 +5155,8 @@ function PropertyPanelShell({
               " 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. Validate 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,
+            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: [
               "Styles apply to",
               " ",
@@ -5379,7 +5561,7 @@ function PropertyPanelShell({
               ] })
             ] }) : null,
             previewSummary && !structuralPreviewActive && developerDetails ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-preview-box", children: [
-              /* @__PURE__ */ jsx14("p", { className: "nuvio-preview-box-title", children: developerDetails ? "Validated change" : "Preview Changes" }),
+              /* @__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 })
             ] }) : null,
             developerDetails ? /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap nuvio-pt-2", children: [
@@ -5506,29 +5688,17 @@ function PropertyPanelShell({
           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: [
-              /* @__PURE__ */ jsxs14("div", { className: "nuvio-stack-1", children: [
-                /* @__PURE__ */ jsx14("p", { className: "nuvio-label", children: "Responsive preview" }),
-                /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap", children: [
-                  /* @__PURE__ */ jsx14(
-                    "button",
-                    {
-                      type: "button",
-                      className: `nuvio-button-chip ${devicePreset === "desktop" ? "nuvio-button-chip--active" : ""}`,
-                      onClick: () => onDevicePresetChange("desktop"),
-                      children: "Desktop"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx14(
-                    "button",
-                    {
-                      type: "button",
-                      className: `nuvio-button-chip ${devicePreset === "mobile" ? "nuvio-button-chip--active" : ""}`,
-                      onClick: () => onDevicePresetChange("mobile"),
-                      children: "Mobile"
-                    }
-                  )
-                ] })
-              ] }),
+              showResponsiveDeviceControls ? /* @__PURE__ */ jsx14(
+                DeviceBreakpointPanel,
+                {
+                  variant: "compact",
+                  devicePreset,
+                  onDevicePresetChange,
+                  activeBreakpoint,
+                  onActiveBreakpointChange,
+                  developerDetails: false
+                }
+              ) : null,
               showQuickStyle ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
                 /* @__PURE__ */ jsx14(
                   ColorPickerRow,
@@ -5599,58 +5769,17 @@ function PropertyPanelShell({
             ] })
           ] }) : null,
           !simpleMode ? /* @__PURE__ */ jsxs14(Fragment5, { children: [
-            /* @__PURE__ */ jsxs14("section", { className: "nuvio-card nuvio-stack-2", children: [
-              /* @__PURE__ */ jsx14("h3", { className: "nuvio-section-title", children: "Device + breakpoint" }),
-              /* @__PURE__ */ jsxs14("div", { className: "nuvio-row-wrap", children: [
-                /* @__PURE__ */ jsx14(
-                  "button",
-                  {
-                    type: "button",
-                    className: `nuvio-button-chip ${devicePreset === "desktop" ? "nuvio-button-chip--active" : ""}`,
-                    onClick: () => onDevicePresetChange("desktop"),
-                    children: "Desktop"
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  "button",
-                  {
-                    type: "button",
-                    className: `nuvio-button-chip ${devicePreset === "tablet" ? "nuvio-button-chip--active" : ""}`,
-                    onClick: () => onDevicePresetChange("tablet"),
-                    children: "Tablet"
-                  }
-                ),
-                /* @__PURE__ */ jsx14(
-                  "button",
-                  {
-                    type: "button",
-                    className: `nuvio-button-chip ${devicePreset === "mobile" ? "nuvio-button-chip--active" : ""}`,
-                    onClick: () => onDevicePresetChange("mobile"),
-                    children: "Mobile"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx14(
-                SelectRow,
-                {
-                  label: developerDetails ? "Active BP" : "Applies on",
-                  value: activeBreakpoint,
-                  onChange: (v) => onActiveBreakpointChange(v),
-                  options: [
-                    { value: "base", label: developerDetails ? "base" : formatPlainBreakpointLabel("base") },
-                    { value: "sm", label: developerDetails ? "sm" : formatPlainBreakpointLabel("sm") },
-                    { value: "md", label: developerDetails ? "md" : formatPlainBreakpointLabel("md") },
-                    { value: "lg", label: developerDetails ? "lg" : formatPlainBreakpointLabel("lg") },
-                    { value: "xl", label: developerDetails ? "xl" : formatPlainBreakpointLabel("xl") }
-                  ]
-                }
-              ),
-              !developerDetails ? /* @__PURE__ */ jsxs14("p", { className: "nuvio-text-2xs nuvio-text-muted", children: [
-                "Applies on:",
-                " ",
-                /* @__PURE__ */ jsx14("span", { className: "nuvio-font-medium", children: formatPlainBreakpointLabel(activeBreakpoint) })
-              ] }) : null
-            ] }),
+            showResponsiveDeviceControls ? /* @__PURE__ */ jsx14(
+              DeviceBreakpointPanel,
+              {
+                variant: "section",
+                devicePreset,
+                onDevicePresetChange,
+                activeBreakpoint,
+                onActiveBreakpointChange,
+                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(
@@ -5693,6 +5822,100 @@ function saveDeveloperDetails(enabled) {
   }
 }
 
+// src/telemetry.ts
+import { posthog } from "posthog-js";
+
+// src/nuvio-posthog-token.ts
+var NUVIO_POSTHOG_TOKEN = "phc_CJnWrLU4hB4aA88DJrPnma2WBMQqVHxUMVvrsye3R6x2";
+
+// src/telemetry.ts
+var POSTHOG_HOST = "https://us.i.posthog.com";
+var initialized = false;
+var firstSelectionSent = false;
+var overlayConnectedSent = false;
+function posthogToken() {
+  return NUVIO_POSTHOG_TOKEN;
+}
+function tokenIsConfigured(token) {
+  return Boolean(token && token.startsWith("phc_"));
+}
+function isOverlayTelemetryOptedOut(flags) {
+  return flags.localStorageTelemetry === "0" || flags.viteTelemetry === "0";
+}
+function isOverlayTelemetryEnabled() {
+  try {
+    const localStorageTelemetry = typeof localStorage !== "undefined" ? localStorage.getItem("nuvio.telemetry") : null;
+    const env = import.meta;
+    if (isOverlayTelemetryOptedOut({
+      localStorageTelemetry,
+      viteTelemetry: env.env?.VITE_NUVIO_TELEMETRY
+    })) {
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function ensureInitialized() {
+  if (!isOverlayTelemetryEnabled()) return false;
+  const token = posthogToken();
+  if (!tokenIsConfigured(token)) return false;
+  if (!initialized) {
+    const debug = typeof localStorage !== "undefined" && localStorage.getItem("nuvio.telemetry.debug") === "1";
+    posthog.init(token, {
+      api_host: POSTHOG_HOST,
+      ui_host: "https://us.posthog.com",
+      autocapture: false,
+      capture_pageview: false,
+      disable_session_recording: true,
+      person_profiles: "identified_only",
+      persistence: "localStorage",
+      debug
+    });
+    initialized = true;
+  }
+  return true;
+}
+function mapApplyFailureReason(errorCode, options) {
+  if (options?.duplicateIdsActive && errorCode === "unknown_id") {
+    return "duplicate_id";
+  }
+  if (errorCode === "unknown_id" || errorCode === "host_not_found") {
+    return "no_patch_target";
+  }
+  if (errorCode === "patch_rejected") {
+    return "unsupported_classname";
+  }
+  return "apply_error";
+}
+function captureOverlayEvent(event, props) {
+  try {
+    if (!ensureInitialized()) return;
+    const payload = {};
+    if (props?.reason) {
+      payload.reason = props.reason;
+    }
+    posthog.capture(event, Object.keys(payload).length > 0 ? payload : void 0);
+  } catch {
+  }
+}
+function captureOverlayConnected() {
+  if (overlayConnectedSent) return;
+  overlayConnectedSent = true;
+  captureOverlayEvent("overlay_connected");
+}
+function captureFirstSelection() {
+  if (firstSelectionSent) return;
+  firstSelectionSent = true;
+  captureOverlayEvent("first_selection");
+}
+function captureApplyFailed(errorCode, options) {
+  captureOverlayEvent("apply_failed", {
+    reason: mapApplyFailureReason(errorCode, options)
+  });
+}
+
 // src/NuvioDevShell.tsx
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
 function shortDisplayPath(absPath) {
@@ -5848,7 +6071,7 @@ function NuvioDevShellInner() {
     },
     onDragEnd: commitChipDrag
   });
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (chipDragging) {
       return;
     }
@@ -5887,7 +6110,7 @@ function NuvioDevShellInner() {
     chromeLayout.panel.position,
     onPanelPositionChange
   ]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const panelPos = chromeLayout.panel.position;
     if (!panelPos || !panelRef.current) {
       return;
@@ -5904,7 +6127,7 @@ function NuvioDevShellInner() {
       onPanelPositionChange(clamped);
     }
   }, [chromeLayout.panel.position, onPanelPositionChange]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!chipPos || !chipRef.current || chipDragging) {
       return;
     }
@@ -5949,6 +6172,7 @@ function NuvioDevShellInner() {
   const resolvedFileRef = useRef5(void 0);
   const selectedIdRef = useRef5(null);
   const lastIndexEntriesRef = useRef5([]);
+  const duplicateErrorsRef = useRef5([]);
   const lastStagedOpsFpRef = useRef5(null);
   const autoApplyStructuralRef = useRef5(false);
   const [structuralPreviewActive, setStructuralPreviewActive] = useState9(false);
@@ -5958,6 +6182,9 @@ function NuvioDevShellInner() {
   useEffect9(() => {
     selectedIdRef.current = selectedId;
   }, [selectedId]);
+  useEffect9(() => {
+    duplicateErrorsRef.current = duplicateErrors;
+  }, [duplicateErrors]);
   const selectedEntry = useMemo6(
     () => selectedId ? indexEntries.find((e) => e.id === selectedId) : void 0,
     [indexEntries, selectedId]
@@ -5988,7 +6215,7 @@ function NuvioDevShellInner() {
         if (dryRun) {
           setPreviewBusy(false);
           setPreviewError(
-            !ws || ws.readyState !== WebSocket.OPEN ? "Dev channel is not connected \u2014 wait for \u201Cconnected\u201D in the chip, then try Validate again." : "Nothing is selected \u2014 click an element on the page first."
+            !ws || ws.readyState !== WebSocket.OPEN ? "Dev channel is not connected \u2014 wait for \u201Cconnected\u201D in the chip, then try Preview Changes again." : "Nothing is selected \u2014 click an element on the page first."
           );
         } else {
           setLastPatchError(
@@ -6016,7 +6243,7 @@ function NuvioDevShellInner() {
           }
           patchPendingMapRef.current.delete(requestId);
           setPreviewBusy(false);
-          setPreviewError("No validation response from the dev server (timed out). Check the terminal for [Nuvio] errors.");
+          setPreviewError("No validation response from the dev server (timed out). Check the terminal for [nuvio] errors.");
         }, 15e3);
       }
       ws.send(
@@ -6065,7 +6292,7 @@ function NuvioDevShellInner() {
       const fp = JSON.stringify(ops);
       if (fp !== previewValidatedFingerprint) {
         setLastPatchError(
-          "Run Validate first \u2014 staged edits changed since the last successful validation."
+          "Run Preview Changes first \u2014 staged edits changed since the last successful preview."
         );
         return;
       }
@@ -6151,6 +6378,7 @@ function NuvioDevShellInner() {
       setLastPatchError(null);
       setSelectedId(id);
       setSelectError(null);
+      captureFirstSelection();
       const hit = lastIndexEntriesRef.current.find((e) => e.id === id);
       if (hit) {
         setResolvedFile(shortDisplayPath(hit.file));
@@ -6184,6 +6412,7 @@ function NuvioDevShellInner() {
         }
         retryMs = 400;
         setChannel("ready");
+        captureOverlayConnected();
         patchPendingMapRef.current.clear();
         if (previewTimeoutRef.current) {
           clearTimeout(previewTimeoutRef.current);
@@ -6284,6 +6513,7 @@ function NuvioDevShellInner() {
                 setPreviewError(null);
                 setPreviewValidatedFingerprint(savedFp);
                 setPreviewValidatedOps(pending.ops);
+                captureOverlayEvent("preview_changes");
                 if (autoApplyStructuralRef.current && isStructuralOnlyOps(pending.ops)) {
                   autoApplyStructuralRef.current = false;
                   sendPatchMessage(
@@ -6314,8 +6544,12 @@ function NuvioDevShellInner() {
                 if (msg.undoStackDepth !== void 0) {
                   setUndoStackDepth(msg.undoStackDepth);
                 }
+                captureOverlayEvent("apply_to_code");
               } else {
                 setLastPatchError(msg.errorMessage ?? msg.errorCode ?? "Apply failed");
+                captureApplyFailed(msg.errorCode, {
+                  duplicateIdsActive: duplicateErrorsRef.current.length > 0
+                });
               }
               return;
             }
@@ -6472,7 +6706,7 @@ function NuvioDevShellInner() {
               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-title", children: "nuvio" }),
                 /* @__PURE__ */ jsx15("span", { className: "nuvio-chip-spacer", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsx15(
                   "button",
@@ -6480,7 +6714,7 @@ function NuvioDevShellInner() {
                     type: "button",
                     className: "nuvio-button-icon",
                     title: chromeLayout.chip.collapsed ? "Expand chip" : "Collapse chip",
-                    "aria-label": chromeLayout.chip.collapsed ? "Expand Nuvio chip" : "Collapse Nuvio chip",
+                    "aria-label": chromeLayout.chip.collapsed ? "Expand nuvio chip" : "Collapse nuvio chip",
                     onPointerDown: (e) => e.stopPropagation(),
                     onClick: () => onChipCollapsedChange(!chromeLayout.chip.collapsed),
                     children: chromeLayout.chip.collapsed ? "+" : "\u2212"
@@ -6548,7 +6782,7 @@ function NuvioDevShellInner() {
         suppressTextTargetHints: !developerDetails
       }
     ),
-    shadowMount ? createPortal(chromeUi, shadowMount.mount) : chromeUi
+    shadowMount ? createPortal2(chromeUi, shadowMount.mount) : chromeUi
   ] });
 }
 

package/dist/style.css

@@ -1102,22 +1102,18 @@ select.nuvio-control {
 }
 
 .nuvio-color-popover {
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  margin-top: 4px;
-  max-height: min(20rem, 50vh);
   overflow: auto;
   border-radius: var(--nuvio-radius-inner);
   border: 1px solid var(--nuvio-border-strong);
-  background: rgba(3, 7, 18, 0.94);
-  -webkit-backdrop-filter: var(--nuvio-inner-blur);
-  backdrop-filter: var(--nuvio-inner-blur);
+  background: rgb(15, 23, 42);
   padding: 10px;
   box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
 }
 
+.nuvio-color-popover--fixed {
+  pointer-events: auto;
+}
+
 .nuvio-color-specials {
   display: flex;
   flex-wrap: wrap;
@@ -1247,7 +1243,10 @@ select.nuvio-control {
 }
 
 .nuvio-card--actions {
+  position: relative;
+  z-index: 1;
   border-color: rgba(56, 189, 248, 0.25);
+  background: rgb(15, 23, 42);
 }
 
 .nuvio-action-stack {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvio/overlay",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Nuvio dev overlay: edit mode, selection, Editor panel, Validate/Apply/Undo against the Vite dev server.",
   "license": "MIT",
   "repository": {
@@ -44,7 +44,8 @@
     "react-dom": "^18.3.1 || ^19.0.0"
   },
   "dependencies": {
-    "@nuvio/shared": "0.5.3"
+    "posthog-js": "^1.380.1",
+    "@nuvio/shared": "0.5.5"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",