@nuvio/overlay 0.5.3 → 0.5.4

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;
 }
@@ -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);
@@ -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;
@@ -4465,7 +4647,7 @@ function PropertyPanelShell({
     canMoveDown: false,
     peerCount: 0
   }));
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!selectedId || missing) {
       setSiblingMove({ canMoveUp: false, canMoveDown: false, peerCount: 0 });
       return;
@@ -4973,7 +5155,7 @@ 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,
+            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(
@@ -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;
             }
@@ -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.4",
   "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.4"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",