@nuvio/overlay 0.1.0

package/dist/index.js

@@ -0,0 +1,2132 @@
+// src/NuvioDevShell.tsx
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+import {
+  NUVIO_WS_PATH,
+  PROTOCOL_VERSION,
+  parseServerMessage
+} from "@nuvio/shared";
+
+// src/InteractionLayer.tsx
+import { useEffect, useState } from "react";
+
+// src/nuvio-dom.ts
+function escapeAttrSelector(id) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(id);
+  }
+  return id.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+// src/nuvio-outlines.ts
+function clearNuvioOutlines() {
+  document.querySelectorAll("[data-nuvio-outline]").forEach((n) => {
+    const el = n;
+    el.style.outline = "";
+    el.removeAttribute("data-nuvio-outline");
+  });
+}
+function paintNuvioOutline(id, mode) {
+  const el = document.querySelector(
+    `[data-nuvio-id="${escapeAttrSelector(id)}"]`
+  );
+  if (!el) {
+    return;
+  }
+  el.setAttribute("data-nuvio-outline", mode);
+  if (mode === "selected") {
+    el.style.outline = "2px solid rgb(14 165 233)";
+  } else {
+    el.style.outline = "2px dashed rgb(56 189 248)";
+  }
+}
+
+// src/InteractionLayer.tsx
+function isUnderOverlayChrome(node, chromeRootRefs) {
+  for (const ref of chromeRootRefs) {
+    const root = ref.current;
+    if (root?.contains(node)) {
+      return true;
+    }
+  }
+  return false;
+}
+function pickIndexedTarget(clientX, clientY, chromeRootRefs, knownIds) {
+  const stack = document.elementsFromPoint(clientX, clientY);
+  for (const node of stack) {
+    if (!(node instanceof HTMLElement)) {
+      continue;
+    }
+    if (isUnderOverlayChrome(node, chromeRootRefs)) {
+      continue;
+    }
+    const host = node.closest("[data-nuvio-id]");
+    if (!(host instanceof HTMLElement)) {
+      continue;
+    }
+    const id = host.getAttribute("data-nuvio-id")?.trim() ?? "";
+    if (!id) {
+      continue;
+    }
+    if (knownIds.size > 0 && !knownIds.has(id)) {
+      continue;
+    }
+    return host;
+  }
+  return null;
+}
+function InteractionLayer({
+  enabled,
+  chromeRootRefs,
+  knownIds,
+  selectedId,
+  onSelectId
+}) {
+  const [hoverId, setHoverId] = useState(null);
+  useEffect(() => {
+    if (!enabled) {
+      setHoverId(null);
+      return;
+    }
+    const onMove = (e) => {
+      const el = pickIndexedTarget(e.clientX, e.clientY, chromeRootRefs, knownIds);
+      const id = el?.getAttribute("data-nuvio-id") ?? null;
+      setHoverId(id);
+    };
+    const onClick = (e) => {
+      const el = pickIndexedTarget(e.clientX, e.clientY, chromeRootRefs, knownIds);
+      if (!el) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const id = el.getAttribute("data-nuvio-id");
+      if (id) {
+        onSelectId(id);
+      }
+    };
+    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("click", onClick, true);
+    return () => {
+      window.removeEventListener("mousemove", onMove, true);
+      window.removeEventListener("click", onClick, true);
+      setHoverId(null);
+    };
+  }, [chromeRootRefs, enabled, knownIds, onSelectId]);
+  useEffect(() => {
+    clearNuvioOutlines();
+    if (!enabled) {
+      return;
+    }
+    const hoverPaint = hoverId && hoverId !== selectedId ? hoverId : null;
+    if (hoverPaint) {
+      paintNuvioOutline(hoverPaint, "hover");
+    }
+    if (selectedId) {
+      paintNuvioOutline(selectedId, "selected");
+    }
+  }, [enabled, hoverId, selectedId]);
+  return null;
+}
+
+// src/overlay-chrome-storage.ts
+var OVERLAY_CHROME_STORAGE_KEY = "nuvio:overlay-chrome:v1";
+var DEFAULT_OVERLAY_CHROME = {
+  panel: { collapsed: false, position: null },
+  chip: { collapsed: false, corner: "bottom-right" }
+};
+var CHIP_CORNERS = [
+  "bottom-right",
+  "bottom-left",
+  "top-right",
+  "top-left"
+];
+function isChipCorner(v) {
+  return typeof v === "string" && CHIP_CORNERS.includes(v);
+}
+function isPoint(v) {
+  return typeof v === "object" && v !== null && typeof v.x === "number" && typeof v.y === "number" && Number.isFinite(v.x) && Number.isFinite(v.y);
+}
+function parseOverlayChromePersist(raw) {
+  if (!raw) {
+    return DEFAULT_OVERLAY_CHROME;
+  }
+  try {
+    const data = JSON.parse(raw);
+    const panel = data.panel;
+    const chip = data.chip;
+    return {
+      panel: {
+        collapsed: panel?.collapsed === true,
+        position: isPoint(panel?.position) ? panel.position : null
+      },
+      chip: {
+        collapsed: chip?.collapsed === true,
+        corner: isChipCorner(chip?.corner) ? chip.corner : DEFAULT_OVERLAY_CHROME.chip.corner
+      }
+    };
+  } catch {
+    return DEFAULT_OVERLAY_CHROME;
+  }
+}
+function loadOverlayChromePersist() {
+  if (typeof localStorage === "undefined") {
+    return DEFAULT_OVERLAY_CHROME;
+  }
+  return parseOverlayChromePersist(localStorage.getItem(OVERLAY_CHROME_STORAGE_KEY));
+}
+function saveOverlayChromePersist(state) {
+  if (typeof localStorage === "undefined") {
+    return;
+  }
+  try {
+    localStorage.setItem(OVERLAY_CHROME_STORAGE_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+function clampToViewport(x, y, width, height, margin = 16) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1920;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 1080;
+  const maxX = Math.max(margin, vw - width - margin);
+  const maxY = Math.max(margin, vh - height - margin);
+  return {
+    x: Math.max(margin, Math.min(x, maxX)),
+    y: Math.max(margin, Math.min(y, maxY))
+  };
+}
+function snapToNearestCorner(centerX, centerY) {
+  const midX = (typeof window !== "undefined" ? window.innerWidth : 1920) / 2;
+  const midY = (typeof window !== "undefined" ? window.innerHeight : 1080) / 2;
+  const right = centerX >= midX;
+  const bottom = centerY >= midY;
+  if (bottom && right) {
+    return "bottom-right";
+  }
+  if (bottom && !right) {
+    return "bottom-left";
+  }
+  if (!bottom && right) {
+    return "top-right";
+  }
+  return "top-left";
+}
+function cornerAnchorPosition(corner, width, height, margin = 16) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1920;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 1080;
+  switch (corner) {
+    case "bottom-right":
+      return { x: vw - width - margin, y: vh - height - margin };
+    case "bottom-left":
+      return { x: margin, y: vh - height - margin };
+    case "top-right":
+      return { x: vw - width - margin, y: margin };
+    case "top-left":
+      return { x: margin, y: margin };
+  }
+}
+
+// src/overlay-chrome-classes.ts
+var NUVO_GLASS_FRAME = "border border-white/20 shadow-2xl shadow-black/50 ring-1 ring-white/10";
+var NUVO_GLASS_HEADER = "border-b border-white/10";
+var NUVO_GLASS_SECTION = "rounded-lg border border-white/10 bg-slate-950/30 backdrop-blur-md";
+var NUVO_GLASS_SURFACE_STYLE = {
+  backgroundColor: "rgba(2, 6, 23, 0.45)",
+  WebkitBackdropFilter: "blur(24px) saturate(180%)",
+  backdropFilter: "blur(24px) saturate(180%)"
+};
+var NUVO_GLASS_CHIP = NUVO_GLASS_FRAME;
+
+// src/PropertyPanelShell.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+
+// src/useChromeDrag.ts
+import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+function useChromeDrag({
+  shellRef,
+  enabled,
+  position,
+  setPosition,
+  onDragEnd,
+  margin = 16
+}) {
+  const [dragging, setDragging] = useState2(false);
+  const offsetRef = useRef({ x: 0, y: 0 });
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  const onHeaderPointerDown = useCallback(
+    (e) => {
+      if (!enabled || e.button !== 0) {
+        return;
+      }
+      const shell = shellRef.current;
+      if (!shell) {
+        return;
+      }
+      e.preventDefault();
+      const rect = shell.getBoundingClientRect();
+      const startPos = positionRef.current ?? { x: rect.left, y: rect.top };
+      if (positionRef.current === null) {
+        setPosition(startPos);
+      }
+      offsetRef.current = {
+        x: e.clientX - startPos.x,
+        y: e.clientY - startPos.y
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+      setDragging(true);
+    },
+    [enabled, shellRef, setPosition]
+  );
+  useEffect2(() => {
+    if (!dragging) {
+      return;
+    }
+    const onMove = (e) => {
+      const shell = shellRef.current;
+      if (!shell) {
+        return;
+      }
+      const w = shell.offsetWidth;
+      const h = shell.offsetHeight;
+      const rawX = e.clientX - offsetRef.current.x;
+      const rawY = e.clientY - offsetRef.current.y;
+      const next = clampToViewport(rawX, rawY, w, h, margin);
+      setPosition(next);
+    };
+    const onUp = () => {
+      setDragging(false);
+      const shell = shellRef.current;
+      const pos = positionRef.current;
+      if (shell && pos) {
+        const w = shell.offsetWidth;
+        const h = shell.offsetHeight;
+        const clamped = clampToViewport(pos.x, pos.y, w, h, margin);
+        setPosition(clamped);
+        onDragEnd?.(clamped);
+      }
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [dragging, margin, onDragEnd, setPosition, shellRef]);
+  return { dragging, onHeaderPointerDown };
+}
+
+// src/alpha-patch-ops.ts
+var EMPTY_ALPHA_PICKS = {
+  fontSize: "",
+  fontWeight: "",
+  textColor: "",
+  bgColor: "",
+  rounded: "",
+  padding: "",
+  margin: "",
+  textAlign: "",
+  gap: "",
+  width: "",
+  maxWidth: "",
+  height: "",
+  minHeight: "",
+  opacity: "",
+  shadow: ""
+};
+function buildAlphaPatchOps(baselineText, draftText, baselinePicks, draftPicks) {
+  const ops = [];
+  if (draftText !== baselineText) {
+    ops.push({ kind: "setText", text: draftText });
+  }
+  const keys = Object.keys(EMPTY_ALPHA_PICKS);
+  for (const key of keys) {
+    const next = draftPicks[key].trim();
+    if (!next || next === baselinePicks[key]) {
+      continue;
+    }
+    ops.push({ kind: "mergeTailwindClassName", classNameFragment: next });
+  }
+  return ops;
+}
+
+// src/tailwind-palette-hex.ts
+var TAILWIND_COLOR_FAMILIES = ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+var TAILWIND_COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+var TAILWIND_PALETTE_HEX = { "slate": { "50": "#f8fafc", "100": "#f1f5f9", "200": "#e2e8f0", "300": "#cbd5e1", "400": "#94a3b8", "500": "#64748b", "600": "#475569", "700": "#334155", "800": "#1e293b", "900": "#0f172a", "950": "#020617" }, "gray": { "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db", "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151", "800": "#1f2937", "900": "#111827", "950": "#030712" }, "zinc": { "50": "#fafafa", "100": "#f4f4f5", "200": "#e4e4e7", "300": "#d4d4d8", "400": "#a1a1aa", "500": "#71717a", "600": "#52525b", "700": "#3f3f46", "800": "#27272a", "900": "#18181b", "950": "#09090b" }, "neutral": { "50": "#fafafa", "100": "#f5f5f5", "200": "#e5e5e5", "300": "#d4d4d4", "400": "#a3a3a3", "500": "#737373", "600": "#525252", "700": "#404040", "800": "#262626", "900": "#171717", "950": "#0a0a0a" }, "stone": { "50": "#fafaf9", "100": "#f5f5f4", "200": "#e7e5e4", "300": "#d6d3d1", "400": "#a8a29e", "500": "#78716c", "600": "#57534e", "700": "#44403c", "800": "#292524", "900": "#1c1917", "950": "#0c0a09" }, "red": { "50": "#fef2f2", "100": "#fee2e2", "200": "#fecaca", "300": "#fca5a5", "400": "#f87171", "500": "#ef4444", "600": "#dc2626", "700": "#b91c1c", "800": "#991b1b", "900": "#7f1d1d", "950": "#450a0a" }, "orange": { "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74", "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c", "800": "#9a3412", "900": "#7c2d12", "950": "#431407" }, "amber": { "50": "#fffbeb", "100": "#fef3c7", "200": "#fde68a", "300": "#fcd34d", "400": "#fbbf24", "500": "#f59e0b", "600": "#d97706", "700": "#b45309", "800": "#92400e", "900": "#78350f", "950": "#451a03" }, "yellow": { "50": "#fefce8", "100": "#fef9c3", "200": "#fef08a", "300": "#fde047", "400": "#facc15", "500": "#eab308", "600": "#ca8a04", "700": "#a16207", "800": "#854d0e", "900": "#713f12", "950": "#422006" }, "lime": { "50": "#f7fee7", "100": "#ecfccb", "200": "#d9f99d", "300": "#bef264", "400": "#a3e635", "500": "#84cc16", "600": "#65a30d", "700": "#4d7c0f", "800": "#3f6212", "900": "#365314", "950": "#1a2e05" }, "green": { "50": "#f0fdf4", "100": "#dcfce7", "200": "#bbf7d0", "300": "#86efac", "400": "#4ade80", "500": "#22c55e", "600": "#16a34a", "700": "#15803d", "800": "#166534", "900": "#14532d", "950": "#052e16" }, "emerald": { "50": "#ecfdf5", "100": "#d1fae5", "200": "#a7f3d0", "300": "#6ee7b7", "400": "#34d399", "500": "#10b981", "600": "#059669", "700": "#047857", "800": "#065f46", "900": "#064e3b", "950": "#022c22" }, "teal": { "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4", "400": "#2dd4bf", "500": "#14b8a6", "600": "#0d9488", "700": "#0f766e", "800": "#115e59", "900": "#134e4a", "950": "#042f2e" }, "cyan": { "50": "#ecfeff", "100": "#cffafe", "200": "#a5f3fc", "300": "#67e8f9", "400": "#22d3ee", "500": "#06b6d4", "600": "#0891b2", "700": "#0e7490", "800": "#155e75", "900": "#164e63", "950": "#083344" }, "sky": { "50": "#f0f9ff", "100": "#e0f2fe", "200": "#bae6fd", "300": "#7dd3fc", "400": "#38bdf8", "500": "#0ea5e9", "600": "#0284c7", "700": "#0369a1", "800": "#075985", "900": "#0c4a6e", "950": "#082f49" }, "blue": { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a", "950": "#172554" }, "indigo": { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b" }, "violet": { "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd", "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9", "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065" }, "purple": { "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe", "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce", "800": "#6b21a8", "900": "#581c87", "950": "#3b0764" }, "fuchsia": { "50": "#fdf4ff", "100": "#fae8ff", "200": "#f5d0fe", "300": "#f0abfc", "400": "#e879f9", "500": "#d946ef", "600": "#c026d3", "700": "#a21caf", "800": "#86198f", "900": "#701a75", "950": "#4a044e" }, "pink": { "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4", "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d", "800": "#9d174d", "900": "#831843", "950": "#500724" }, "rose": { "50": "#fff1f2", "100": "#ffe4e6", "200": "#fecdd3", "300": "#fda4af", "400": "#fb7185", "500": "#f43f5e", "600": "#e11d48", "700": "#be123c", "800": "#9f1239", "900": "#881337", "950": "#4c0519" } };
+
+// src/tailwind-color-options.ts
+function hexFor(family, shade) {
+  return TAILWIND_PALETTE_HEX[family]?.[String(shade)] ?? "#888";
+}
+function buildScaleOptions(prefix) {
+  const opts = [];
+  for (const family of TAILWIND_COLOR_FAMILIES) {
+    for (const shade of TAILWIND_COLOR_SHADES) {
+      const value = `${prefix}-${family}-${shade}`;
+      opts.push({ value, label: value, hex: hexFor(family, shade) });
+    }
+  }
+  return opts;
+}
+var TEXT_COLOR_OPTIONS = [
+  { value: "", label: "\u2014", hex: "transparent" },
+  { value: "text-white", label: "text-white", hex: "#ffffff" },
+  { value: "text-black", label: "text-black", hex: "#000000" },
+  ...buildScaleOptions("text")
+];
+function buildBgOpacityOptions() {
+  const families = ["slate", "sky", "neutral"];
+  const shades = [800, 900, 950];
+  const ops = [50, 75, 80];
+  const out = [];
+  for (const family of families) {
+    for (const shade of shades) {
+      for (const op of ops) {
+        const value = `bg-${family}-${shade}/${op}`;
+        out.push({ value, label: value, hex: hexFor(family, shade) });
+      }
+    }
+  }
+  return out;
+}
+var BACKGROUND_COLOR_OPTIONS = [
+  { value: "", label: "\u2014", hex: "transparent" },
+  { value: "bg-transparent", label: "bg-transparent", hex: "transparent" },
+  { value: "bg-white", label: "bg-white", hex: "#ffffff" },
+  { value: "bg-black", label: "bg-black", hex: "#000000" },
+  ...buildScaleOptions("bg"),
+  ...buildBgOpacityOptions()
+];
+var TEXT_COLOR_VALUES = TEXT_COLOR_OPTIONS.map((o) => o.value).filter(Boolean);
+var BACKGROUND_COLOR_VALUES = BACKGROUND_COLOR_OPTIONS.map((o) => o.value).filter(
+  Boolean
+);
+
+// src/read-alpha-picks.ts
+var FONT_SIZE = ["text-sm", "text-base", "text-lg", "text-xl", "text-2xl"];
+var FONT_WEIGHT = ["font-medium", "font-semibold", "font-bold"];
+var TEXT_COLOR = TEXT_COLOR_VALUES;
+var BG_COLOR = BACKGROUND_COLOR_VALUES;
+var ROUNDED = ["rounded-md", "rounded-lg", "rounded-xl", "rounded-full"];
+var PADDING = ["p-2", "p-4", "p-6", "px-4 py-2"];
+var MARGIN = ["m-2", "m-4", "mx-auto", "mt-4", "mb-4"];
+var TEXT_ALIGN = ["text-left", "text-center", "text-right", "text-justify"];
+var GAP = ["gap-1", "gap-2", "gap-4", "gap-6", "gap-8"];
+var WIDTH = ["w-auto", "w-full", "w-1/2", "w-1/3", "w-2/3", "w-1/4", "w-3/4"];
+var MAX_WIDTH = [
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-4xl",
+  "max-w-prose",
+  "max-w-full"
+];
+var HEIGHT = ["h-auto", "h-full", "h-8", "h-12", "h-16", "h-24", "h-screen"];
+var MIN_HEIGHT = ["min-h-0", "min-h-full", "min-h-screen", "min-h-16", "min-h-24"];
+var OPACITY = [
+  "opacity-0",
+  "opacity-25",
+  "opacity-50",
+  "opacity-75",
+  "opacity-100"
+];
+var SHADOW = ["shadow-none", "shadow-sm", "shadow", "shadow-md", "shadow-lg", "shadow-xl"];
+function tokenizeClassName(className) {
+  return className.trim().split(/\s+/).filter(Boolean);
+}
+function lastLiteralMatch(tokens, candidates) {
+  let hit = "";
+  for (const t of tokens) {
+    if (candidates.includes(t)) {
+      hit = t;
+    }
+  }
+  return hit;
+}
+function lastCompositeMatch(tokens, composites) {
+  let hit = "";
+  for (const composite of composites) {
+    const parts = composite.split(/\s+/).filter(Boolean);
+    if (parts.length > 0 && parts.every((p) => tokens.includes(p))) {
+      hit = composite;
+    }
+  }
+  return hit;
+}
+function readAlphaPicksFromClassName(className) {
+  const tokens = tokenizeClassName(className);
+  if (tokens.length === 0) {
+    return { ...EMPTY_ALPHA_PICKS };
+  }
+  return {
+    fontSize: lastLiteralMatch(tokens, FONT_SIZE),
+    fontWeight: lastLiteralMatch(tokens, FONT_WEIGHT),
+    textColor: lastLiteralMatch(tokens, TEXT_COLOR),
+    bgColor: lastLiteralMatch(tokens, BG_COLOR),
+    rounded: lastLiteralMatch(tokens, ROUNDED),
+    padding: lastCompositeMatch(tokens, PADDING) || lastLiteralMatch(tokens, PADDING),
+    margin: lastLiteralMatch(tokens, MARGIN),
+    textAlign: lastLiteralMatch(tokens, TEXT_ALIGN),
+    gap: lastLiteralMatch(tokens, GAP),
+    width: lastLiteralMatch(tokens, WIDTH),
+    maxWidth: lastLiteralMatch(tokens, MAX_WIDTH),
+    height: lastLiteralMatch(tokens, HEIGHT),
+    minHeight: lastLiteralMatch(tokens, MIN_HEIGHT),
+    opacity: lastLiteralMatch(tokens, OPACITY),
+    shadow: lastLiteralMatch(tokens, SHADOW)
+  };
+}
+function readAlphaPicksFromElement(el) {
+  return readAlphaPicksFromClassName(el.className);
+}
+function alphaPicksDiffer(a, b) {
+  return Object.keys(EMPTY_ALPHA_PICKS).some((k) => a[k] !== b[k]);
+}
+
+// src/ComponentTree.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function shortPath(file) {
+  const norm = file.replace(/\\/g, "/");
+  const parts = norm.split("/");
+  return parts.length <= 2 ? norm : parts.slice(-2).join("/");
+}
+function ComponentTree({
+  entries,
+  selectedId,
+  onSelectId
+}) {
+  const sorted = [...entries].sort((a, b) => a.id.localeCompare(b.id));
+  return /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xs font-medium uppercase tracking-wide text-slate-500", children: "Indexed elements" }),
+    sorted.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-600", children: "No ids in dev index." }) : /* @__PURE__ */ jsx("ul", { className: "max-h-40 space-y-0.5 overflow-y-auto rounded border border-slate-800/80 bg-slate-950/50 p-1", children: sorted.map((e) => {
+      const active = e.id === selectedId;
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: `w-full rounded px-2 py-1 text-left text-[11px] leading-snug ${active ? "bg-sky-900/50 font-medium text-sky-200" : "text-slate-400 hover:bg-slate-800/80 hover:text-slate-200"}`,
+          onClick: () => onSelectId(e.id),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "block break-all font-mono", children: e.id }),
+            /* @__PURE__ */ jsxs("span", { className: "block text-[10px] text-slate-500", children: [
+              shortPath(e.file),
+              ":",
+              e.line
+            ] })
+          ]
+        }
+      ) }, e.id);
+    }) })
+  ] });
+}
+
+// src/structural-patch-ops.ts
+var STRUCTURAL_KINDS = /* @__PURE__ */ new Set([
+  "moveSibling",
+  "setHidden",
+  "duplicateHost"
+]);
+function isStructuralOnlyOps(ops) {
+  return ops.length > 0 && ops.every((op) => STRUCTURAL_KINDS.has(op.kind));
+}
+function buildMoveSiblingOp(direction) {
+  return [{ kind: "moveSibling", direction }];
+}
+function buildHideOp() {
+  return [{ kind: "setHidden", hidden: true }];
+}
+function buildShowOp() {
+  return [{ kind: "setHidden", hidden: false }];
+}
+function buildDuplicateOp() {
+  return [{ kind: "duplicateHost" }];
+}
+
+// src/sibling-move.ts
+function getIndexedSiblingMoveAvailability(selectedId) {
+  const el = document.querySelector(
+    `[data-nuvio-id="${escapeAttrSelector(selectedId)}"]`
+  );
+  if (!(el instanceof HTMLElement)) {
+    return { canMoveUp: false, canMoveDown: false, peerCount: 0 };
+  }
+  const parent = el.parentElement;
+  if (!parent) {
+    return { canMoveUp: false, canMoveDown: false, peerCount: 0 };
+  }
+  const peers = [...parent.children].filter(
+    (c) => c instanceof HTMLElement && c.hasAttribute("data-nuvio-id")
+  );
+  const idx = peers.indexOf(el);
+  if (idx < 0) {
+    return { canMoveUp: false, canMoveDown: false, peerCount: peers.length };
+  }
+  return {
+    canMoveUp: idx > 0,
+    canMoveDown: idx < peers.length - 1,
+    peerCount: peers.length
+  };
+}
+function formatPatchUserMessage(message) {
+  if (!message) {
+    return null;
+  }
+  return message.replace(/^Error:\s*/i, "").trim();
+}
+
+// src/ColorPickerRow.tsx
+import { useEffect as useEffect3, useId, useRef as useRef2, useState as useState3 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function hexForUtility(value, options) {
+  if (!value) {
+    return "transparent";
+  }
+  const hit = options.find((o) => o.value === value);
+  if (hit) {
+    return hit.hex;
+  }
+  const m = value.match(/^(text|bg)-([a-z]+)-(\d+)$/);
+  if (m) {
+    return TAILWIND_PALETTE_HEX[m[2]]?.[m[3]] ?? "#64748b";
+  }
+  if (value === "text-white" || value === "bg-white") {
+    return "#ffffff";
+  }
+  if (value === "text-black" || value === "bg-black") {
+    return "#000000";
+  }
+  return "#64748b";
+}
+function familyLabel(family) {
+  return family.charAt(0).toUpperCase() + family.slice(1);
+}
+function ColorPickerRow({
+  label,
+  value,
+  onChange,
+  options,
+  utilityPrefix
+}) {
+  const [open, setOpen] = useState3(false);
+  const rootRef = useRef2(null);
+  const listId = useId();
+  const swatchHex = hexForUtility(value, options);
+  useEffect3(() => {
+    if (!open) {
+      return;
+    }
+    const onDoc = (e) => {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [open]);
+  const specials = options.filter(
+    (o) => !o.value || o.value === `${utilityPrefix}-white` || o.value === `${utilityPrefix}-black` || o.value === "bg-transparent"
+  );
+  const pick = (next) => {
+    onChange(next);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs2("div", { ref: rootRef, className: "relative grid grid-cols-[minmax(0,6.5rem)_1fr] items-start gap-x-2 gap-y-1", children: [
+    /* @__PURE__ */ jsx2("span", { className: "pt-1 text-xs text-slate-500", children: label }),
+    /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          type: "button",
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-controls": open ? listId : void 0,
+          className: "flex w-full items-center gap-2 rounded border border-slate-600 bg-slate-950 px-2 py-1 text-left text-xs text-slate-100 hover:border-slate-500",
+          onClick: () => setOpen((v) => !v),
+          children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "h-5 w-5 shrink-0 rounded border border-slate-600/80",
+                style: {
+                  backgroundColor: swatchHex,
+                  backgroundImage: !value || value.includes("transparent") ? "linear-gradient(45deg, #475569 25%, transparent 25%), linear-gradient(-45deg, #475569 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #475569 75%), linear-gradient(-45deg, transparent 75%, #475569 75%)" : void 0,
+                  backgroundSize: !value || value.includes("transparent") ? "6px 6px" : void 0,
+                  backgroundPosition: !value || value.includes("transparent") ? "0 0, 0 3px, 3px -3px, -3px 0" : void 0
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate font-mono text-[11px]", children: value || "\u2014" })
+          ]
+        }
+      ),
+      open ? /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          id: listId,
+          role: "listbox",
+          "aria-label": `${label} palette`,
+          className: "absolute left-0 right-0 z-20 mt-1 max-h-[min(20rem,50vh)] overflow-auto rounded-lg border border-slate-600 bg-slate-950 p-2 shadow-2xl ring-1 ring-slate-700/80",
+          children: [
+            /* @__PURE__ */ jsxs2("p", { className: "mb-2 text-[10px] leading-snug text-slate-500", children: [
+              "Tailwind palette \u2014 picks a utility class (e.g. ",
+              utilityPrefix,
+              "-sky-500), not a custom hex value."
+            ] }),
+            /* @__PURE__ */ jsx2("div", { className: "mb-2 flex flex-wrap gap-1", children: specials.map((o) => /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": value === o.value,
+                title: o.label,
+                className: `flex items-center gap-1 rounded px-1.5 py-0.5 text-[10px] ${value === o.value ? "bg-sky-900/60 text-sky-100 ring-1 ring-sky-500/50" : "text-slate-400 hover:bg-slate-800"}`,
+                onClick: () => pick(o.value),
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: "inline-block h-3.5 w-3.5 rounded border border-slate-600/60",
+                      style: { backgroundColor: o.hex }
+                    }
+                  ),
+                  o.label
+                ]
+              },
+              o.value || "__none"
+            )) }),
+            /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "grid gap-px text-[9px] text-slate-600",
+                style: {
+                  gridTemplateColumns: `3.25rem repeat(${TAILWIND_COLOR_SHADES.length}, minmax(0, 1fr))`
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("span", {}),
+                  TAILWIND_COLOR_SHADES.map((s) => /* @__PURE__ */ jsx2("span", { className: "text-center tabular-nums", children: s }, s)),
+                  TAILWIND_COLOR_FAMILIES.map((family) => /* @__PURE__ */ jsxs2("div", { className: "contents", children: [
+                    /* @__PURE__ */ jsx2("span", { className: "truncate pr-1 text-right text-slate-500", 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;
+                      return /* @__PURE__ */ jsx2(
+                        "button",
+                        {
+                          type: "button",
+                          role: "option",
+                          "aria-selected": selected,
+                          title: util,
+                          className: `aspect-square min-h-[1.125rem] min-w-0 rounded-sm border ${selected ? "border-sky-400 ring-2 ring-sky-400/80 ring-offset-1 ring-offset-slate-950" : "border-slate-800/80 hover:scale-110 hover:border-slate-500"}`,
+                          style: { backgroundColor: hex },
+                          onClick: () => pick(util)
+                        },
+                        util
+                      );
+                    })
+                  ] }, family))
+                ]
+              }
+            )
+          ]
+        }
+      ) : null
+    ] })
+  ] });
+}
+
+// src/PropertyPanelShell.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function assignShellRef(shellRef, el) {
+  shellRef.current = el;
+}
+function SelectRow({
+  label,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsxs3("label", { className: "grid grid-cols-[minmax(0,6.5rem)_1fr] items-center gap-x-2 gap-y-1", children: [
+    /* @__PURE__ */ jsx3("span", { className: "text-xs text-slate-500", children: label }),
+    /* @__PURE__ */ jsx3(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        className: "rounded border border-slate-600 bg-slate-950 px-2 py-1 text-xs text-slate-100",
+        children: options.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value || "__none"))
+      }
+    )
+  ] });
+}
+function PropertyPanelShell({
+  selectedId,
+  resolvedFile,
+  resolvedLine,
+  indexIdCount,
+  selectError,
+  channelReady,
+  previewSummary,
+  previewError,
+  lastPatchError,
+  stagedVersion,
+  previewValidatedFingerprint,
+  previewValidatedOps,
+  structuralPreviewActive,
+  undoStackDepth,
+  previewBusy,
+  onStagedPatchFingerprint,
+  onRequestPreview,
+  onRequestApply,
+  onRequestUndo,
+  onCancelPreview,
+  shellRef,
+  panelCollapsed,
+  panelPosition,
+  onPanelCollapsedChange,
+  onPanelPositionChange,
+  indexEntries,
+  onSelectIndexedId,
+  onRequestStructuralPreview
+}) {
+  const internalShellRef = useRef3(null);
+  const [missing, setMissing] = useState4(false);
+  const [draftText, setDraftText] = useState4("");
+  const [baselineText, setBaselineText] = useState4("");
+  const [baselinePicks, setBaselinePicks] = useState4(EMPTY_ALPHA_PICKS);
+  const [picks, setPicks] = useState4(EMPTY_ALPHA_PICKS);
+  const selectedIdRef = useRef3(selectedId);
+  selectedIdRef.current = selectedId;
+  const setShellElement = useCallback2(
+    (el) => {
+      internalShellRef.current = el;
+      assignShellRef(shellRef, el);
+    },
+    [shellRef]
+  );
+  const [livePanelPosition, setLivePanelPosition] = useState4(panelPosition);
+  const { dragging: panelDragging, onHeaderPointerDown } = useChromeDrag({
+    shellRef: internalShellRef,
+    enabled: !panelCollapsed,
+    position: livePanelPosition,
+    setPosition: (next) => {
+      if (next) {
+        setLivePanelPosition(next);
+      }
+    },
+    onDragEnd: onPanelPositionChange
+  });
+  useEffect4(() => {
+    if (!panelDragging) {
+      setLivePanelPosition(panelPosition);
+    }
+  }, [panelPosition, panelDragging]);
+  const displayPanelPosition = livePanelPosition;
+  const tabOnRight = displayPanelPosition != null && typeof window !== "undefined" && displayPanelPosition.x > window.innerWidth / 2;
+  useEffect4(() => {
+    if (!selectedId) {
+      setMissing(false);
+      return;
+    }
+    const el = document.querySelector(`[data-nuvio-id="${escapeAttrSelector(selectedId)}"]`);
+    setMissing(!(el instanceof HTMLElement));
+  }, [selectedId]);
+  const syncFromSelectedElement = useCallback2(() => {
+    const id = selectedIdRef.current;
+    if (!id) {
+      return;
+    }
+    const el = document.querySelector(`[data-nuvio-id="${escapeAttrSelector(id)}"]`);
+    if (!(el instanceof HTMLElement)) {
+      return;
+    }
+    const text = (el.textContent ?? "").trim();
+    const fromClass = readAlphaPicksFromElement(el);
+    setBaselineText(text);
+    setDraftText(text);
+    setBaselinePicks(fromClass);
+    setPicks(fromClass);
+  }, []);
+  useEffect4(() => {
+    if (!selectedId) {
+      setDraftText("");
+      setBaselineText("");
+      setBaselinePicks(EMPTY_ALPHA_PICKS);
+      setPicks(EMPTY_ALPHA_PICKS);
+      return;
+    }
+    syncFromSelectedElement();
+  }, [selectedId, syncFromSelectedElement]);
+  useEffect4(() => {
+    if (stagedVersion === 0) {
+      return;
+    }
+    const id = selectedIdRef.current;
+    if (!id) {
+      return;
+    }
+    const t = window.setTimeout(syncFromSelectedElement, 280);
+    return () => window.clearTimeout(t);
+  }, [stagedVersion, syncFromSelectedElement]);
+  const stagedOps = useMemo(
+    () => buildAlphaPatchOps(baselineText, draftText, baselinePicks, picks),
+    [baselineText, draftText, baselinePicks, picks]
+  );
+  const stagedOpsFingerprint = useMemo(() => JSON.stringify(stagedOps), [stagedOps]);
+  useEffect4(() => {
+    if (!selectedId) {
+      return;
+    }
+    onStagedPatchFingerprint(stagedOpsFingerprint);
+  }, [selectedId, stagedOpsFingerprint, onStagedPatchFingerprint]);
+  const hasStagedOps = draftText !== baselineText || alphaPicksDiffer(picks, baselinePicks);
+  const selectionResolved = Boolean(resolvedFile);
+  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 previewApplyMismatch = hasStagedOps && selectionResolved && channelReady && indexIdCount > 0 && (!previewSummary || previewError != null || previewValidatedFingerprint !== stagedOpsFingerprint);
+  const patchActionsDisabled = !channelReady || !hasStagedOps || indexIdCount === 0 || !selectionResolved;
+  const structuralActionsDisabled = !channelReady || indexIdCount === 0 || !selectedId || !selectionResolved || missing;
+  const applyReady = channelReady && indexIdCount > 0 && selectionResolved && previewValidatedOps != null && previewValidatedOps.length > 0 && previewValidatedFingerprint != null && !previewError && !previewBusy;
+  const applyDisabled = !applyReady;
+  const [siblingMove, setSiblingMove] = useState4(() => ({
+    canMoveUp: false,
+    canMoveDown: false,
+    peerCount: 0
+  }));
+  useLayoutEffect(() => {
+    if (!selectedId || missing) {
+      setSiblingMove({ canMoveUp: false, canMoveDown: false, peerCount: 0 });
+      return;
+    }
+    setSiblingMove(getIndexedSiblingMoveAvailability(selectedId));
+  }, [selectedId, missing, stagedVersion]);
+  const structuralPreviewMessage = structuralPreviewActive ? formatPatchUserMessage(previewError) : null;
+  const structuralPreviewOk = structuralPreviewActive && !previewError && previewSummary ? previewSummary : null;
+  const fontSizeOpts = [
+    { value: "", label: "\u2014" },
+    { value: "text-sm", label: "text-sm" },
+    { value: "text-base", label: "text-base" },
+    { value: "text-lg", label: "text-lg" },
+    { value: "text-xl", label: "text-xl" },
+    { value: "text-2xl", label: "text-2xl" }
+  ];
+  const fontWeightOpts = [
+    { value: "", label: "\u2014" },
+    { value: "font-medium", label: "font-medium" },
+    { value: "font-semibold", label: "font-semibold" },
+    { value: "font-bold", label: "font-bold" }
+  ];
+  const roundedOpts = [
+    { value: "", label: "\u2014" },
+    { value: "rounded-md", label: "rounded-md" },
+    { value: "rounded-lg", label: "rounded-lg" },
+    { value: "rounded-xl", label: "rounded-xl" },
+    { value: "rounded-full", label: "rounded-full" }
+  ];
+  const padOpts = [
+    { value: "", label: "\u2014" },
+    { value: "p-2", label: "p-2" },
+    { value: "p-4", label: "p-4" },
+    { value: "p-6", label: "p-6" },
+    { value: "px-4 py-2", label: "px-4 py-2" }
+  ];
+  const marginOpts = [
+    { value: "", label: "\u2014" },
+    { value: "m-2", label: "m-2" },
+    { value: "m-4", label: "m-4" },
+    { value: "mx-auto", label: "mx-auto" },
+    { value: "mt-4", label: "mt-4" },
+    { value: "mb-4", label: "mb-4" }
+  ];
+  const textAlignOpts = [
+    { value: "", label: "\u2014" },
+    { value: "text-left", label: "text-left" },
+    { value: "text-center", label: "text-center" },
+    { value: "text-right", label: "text-right" },
+    { value: "text-justify", label: "text-justify" }
+  ];
+  const gapOpts = [
+    { value: "", label: "\u2014" },
+    { value: "gap-1", label: "gap-1" },
+    { value: "gap-2", label: "gap-2" },
+    { value: "gap-4", label: "gap-4" },
+    { value: "gap-6", label: "gap-6" },
+    { value: "gap-8", label: "gap-8" }
+  ];
+  const widthOpts = [
+    { value: "", label: "\u2014" },
+    { value: "w-auto", label: "w-auto" },
+    { value: "w-full", label: "w-full" },
+    { value: "w-1/2", label: "w-1/2" },
+    { value: "w-1/3", label: "w-1/3" },
+    { value: "w-2/3", label: "w-2/3" },
+    { value: "w-1/4", label: "w-1/4" },
+    { value: "w-3/4", label: "w-3/4" }
+  ];
+  const maxWidthOpts = [
+    { value: "", label: "\u2014" },
+    { value: "max-w-sm", label: "max-w-sm" },
+    { value: "max-w-md", label: "max-w-md" },
+    { value: "max-w-lg", label: "max-w-lg" },
+    { value: "max-w-xl", label: "max-w-xl" },
+    { value: "max-w-2xl", label: "max-w-2xl" },
+    { value: "max-w-4xl", label: "max-w-4xl" },
+    { value: "max-w-prose", label: "max-w-prose" },
+    { value: "max-w-full", label: "max-w-full" }
+  ];
+  const heightOpts = [
+    { value: "", label: "\u2014" },
+    { value: "h-auto", label: "h-auto" },
+    { value: "h-full", label: "h-full" },
+    { value: "h-8", label: "h-8" },
+    { value: "h-12", label: "h-12" },
+    { value: "h-16", label: "h-16" },
+    { value: "h-24", label: "h-24" },
+    { value: "h-screen", label: "h-screen" }
+  ];
+  const minHeightOpts = [
+    { value: "", label: "\u2014" },
+    { value: "min-h-0", label: "min-h-0" },
+    { value: "min-h-full", label: "min-h-full" },
+    { value: "min-h-screen", label: "min-h-screen" },
+    { value: "min-h-16", label: "min-h-16" },
+    { value: "min-h-24", label: "min-h-24" }
+  ];
+  const opacityOpts = [
+    { value: "", label: "\u2014" },
+    { value: "opacity-0", label: "opacity-0" },
+    { value: "opacity-25", label: "opacity-25" },
+    { value: "opacity-50", label: "opacity-50" },
+    { value: "opacity-75", label: "opacity-75" },
+    { value: "opacity-100", label: "opacity-100" }
+  ];
+  const shadowOpts = [
+    { value: "", label: "\u2014" },
+    { value: "shadow-none", label: "shadow-none" },
+    { value: "shadow-sm", label: "shadow-sm" },
+    { value: "shadow", label: "shadow" },
+    { value: "shadow-md", label: "shadow-md" },
+    { value: "shadow-lg", label: "shadow-lg" },
+    { value: "shadow-xl", label: "shadow-xl" }
+  ];
+  if (panelCollapsed) {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        ref: (el) => setShellElement(el),
+        className: `pointer-events-auto fixed z-[9998] rounded-2xl px-2 py-3 text-xs font-semibold text-slate-100 ${NUVO_GLASS_FRAME} ${tabOnRight ? "right-4 top-1/2 -translate-y-1/2" : "left-4 top-1/2 -translate-y-1/2"}`,
+        style: {
+          ...NUVO_GLASS_SURFACE_STYLE,
+          ...displayPanelPosition ? {
+            left: tabOnRight ? void 0 : displayPanelPosition.x,
+            right: tabOnRight ? window.innerWidth - displayPanelPosition.x - 40 : void 0,
+            top: displayPanelPosition.y,
+            transform: "none"
+          } : {}
+        },
+        title: "Expand Editor panel",
+        onClick: () => onPanelCollapsedChange(false),
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: tabOnRight ? "" : "inline-block -scale-x-100", "aria-hidden": "true", children: "\u203A" }),
+          /* @__PURE__ */ jsx3("span", { className: "sr-only", children: "Expand Editor" })
+        ]
+      }
+    );
+  }
+  const docked = displayPanelPosition === null;
+  const panelStyle = docked ? void 0 : {
+    left: displayPanelPosition.x,
+    top: displayPanelPosition.y,
+    maxHeight: "min(calc(100vh - 2rem), 720px)",
+    height: "min(calc(100vh - 2rem), 720px)"
+  };
+  return /* @__PURE__ */ jsxs3(
+    "aside",
+    {
+      ref: setShellElement,
+      style: { ...NUVO_GLASS_SURFACE_STYLE, ...panelStyle },
+      className: `pointer-events-auto fixed z-[9998] flex w-[min(100vw-2rem,20rem)] flex-col overflow-hidden rounded-2xl text-sm text-slate-100 ${NUVO_GLASS_FRAME} ${docked ? "left-4 top-4 max-h-[calc(100vh-2rem)]" : ""} ${panelDragging ? "select-none" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "header",
+          {
+            className: `flex shrink-0 items-center gap-2 px-3 py-2 ${NUVO_GLASS_HEADER} ${panelDragging ? "cursor-grabbing" : "cursor-grab"}`,
+            onPointerDown: onHeaderPointerDown,
+            children: [
+              /* @__PURE__ */ jsx3("span", { className: "min-w-0 flex-1 font-semibold", children: "Editor" }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "shrink-0 rounded px-1.5 py-0.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-slate-200",
+                  title: "Collapse panel",
+                  "aria-label": "Collapse Editor panel",
+                  onPointerDown: (e) => e.stopPropagation(),
+                  onClick: () => onPanelCollapsedChange(true),
+                  children: "\u2212"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "flex-1 space-y-4 overflow-y-auto px-3 py-3", children: [
+          selectedId ? /* @__PURE__ */ jsxs3("p", { className: "text-xs text-slate-400", children: [
+            /* @__PURE__ */ jsx3("span", { className: "font-mono text-sky-300/95", children: selectedId }),
+            resolvedFile ? /* @__PURE__ */ jsxs3("span", { className: "text-slate-500", children: [
+              " ",
+              "\xB7",
+              " ",
+              /* @__PURE__ */ jsxs3("span", { className: "font-mono text-slate-300", children: [
+                resolvedFile,
+                resolvedLine != null ? `:${resolvedLine}` : ""
+              ] })
+            ] }) : null
+          ] }) : /* @__PURE__ */ jsx3("p", { className: "text-xs text-slate-500", children: "Select an element on the page." }),
+          indexIdCount === 0 ? /* @__PURE__ */ jsx3("p", { className: "text-xs text-amber-200/90", children: "Index empty \u2014 restart dev server." }) : null,
+          selectedId && !resolvedFile && selectError ? /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-300/95", children: selectError }) : null,
+          selectedId && missing ? /* @__PURE__ */ jsxs3("p", { className: "text-xs text-amber-300/90", children: [
+            "No matching ",
+            /* @__PURE__ */ jsx3("span", { className: "font-mono", children: "data-nuvio-id" }),
+            " node in the document."
+          ] }) : null,
+          selectedId && !missing ? /* @__PURE__ */ jsxs3("section", { className: `space-y-2 p-2 ${NUVO_GLASS_SECTION}`, children: [
+            /* @__PURE__ */ jsx3("h3", { className: "text-xs font-medium text-slate-400", children: "Structure" }),
+            previewBusy && structuralPreviewActive ? /* @__PURE__ */ jsx3("p", { className: "text-[11px] text-sky-200/90", children: "Updating layout\u2026" }) : null,
+            structuralPreviewMessage ? /* @__PURE__ */ jsx3("p", { className: "rounded border border-red-800/70 bg-red-950/50 px-2 py-1.5 text-xs text-red-200", children: structuralPreviewMessage }) : null,
+            structuralPreviewOk ? /* @__PURE__ */ jsx3("p", { className: "rounded border border-emerald-700/50 bg-emerald-950/25 px-2 py-1.5 font-mono text-[11px] text-emerald-100/95", children: structuralPreviewOk }) : null,
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2", children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: structuralActionsDisabled || !siblingMove.canMoveUp,
+                  title: siblingMove.canMoveUp ? "Move earlier in source / left in row" : "Already first in this row",
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestStructuralPreview(buildMoveSiblingOp("up")),
+                  children: "Move up"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: structuralActionsDisabled || !siblingMove.canMoveDown,
+                  title: siblingMove.canMoveDown ? "Move later in source / right in row" : "Already last in this row",
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestStructuralPreview(buildMoveSiblingOp("down")),
+                  children: "Move down"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: structuralActionsDisabled,
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestStructuralPreview(buildHideOp()),
+                  children: "Hide"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: structuralActionsDisabled,
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestStructuralPreview(buildShowOp()),
+                  children: "Show"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: structuralActionsDisabled,
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestStructuralPreview(buildDuplicateOp()),
+                  children: "Duplicate"
+                }
+              )
+            ] })
+          ] }) : null,
+          selectedId && !missing ? /* @__PURE__ */ jsxs3("section", { className: `space-y-2 p-2 ${NUVO_GLASS_SECTION}`, children: [
+            /* @__PURE__ */ jsx3("h3", { className: "text-xs font-medium text-slate-400", children: "Style" }),
+            previewBusy ? /* @__PURE__ */ jsx3("p", { className: "rounded border border-sky-800/50 bg-sky-950/40 px-2 py-1.5 text-[11px] text-sky-100/95", children: "Validating patch with the dev server\u2026" }) : null,
+            lastPatchError ? /* @__PURE__ */ jsx3("p", { className: "rounded border border-red-800/70 bg-red-950/50 px-2 py-1.5 text-xs text-red-200", children: lastPatchError }) : null,
+            previewError && !structuralPreviewActive ? /* @__PURE__ */ jsx3("p", { className: "rounded border border-red-800/70 bg-red-950/50 px-2 py-1.5 text-xs text-red-200", children: formatPatchUserMessage(previewError) }) : null,
+            patchBlockedReason ? /* @__PURE__ */ jsx3("p", { className: "rounded border border-amber-800/60 bg-amber-950/40 px-2 py-1.5 text-xs text-amber-100/95", children: patchBlockedReason }) : null,
+            hasStagedOps && !patchBlockedReason && previewApplyMismatch ? /* @__PURE__ */ jsxs3("p", { className: "rounded border border-slate-600/80 bg-slate-900/60 px-2 py-1.5 text-[11px] leading-snug text-slate-300", children: [
+              "Run ",
+              /* @__PURE__ */ jsx3("span", { className: "font-medium text-slate-200", children: "Validate" }),
+              " after each edit so the summary matches what you apply."
+            ] }) : null,
+            /* @__PURE__ */ jsxs3("label", { className: "block space-y-1", children: [
+              /* @__PURE__ */ jsx3("span", { className: "text-xs text-slate-500", children: "Text" }),
+              /* @__PURE__ */ jsx3(
+                "textarea",
+                {
+                  value: draftText,
+                  onChange: (e) => setDraftText(e.target.value),
+                  rows: 2,
+                  className: "w-full resize-y rounded border border-slate-600 bg-slate-950 px-2 py-1 font-mono text-xs text-slate-100"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "space-y-2 pt-1", children: [
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Font size",
+                  value: picks.fontSize,
+                  onChange: (v) => setPicks((p) => ({ ...p, fontSize: v })),
+                  options: fontSizeOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Weight",
+                  value: picks.fontWeight,
+                  onChange: (v) => setPicks((p) => ({ ...p, fontWeight: v })),
+                  options: fontWeightOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                ColorPickerRow,
+                {
+                  label: "Text color",
+                  value: picks.textColor,
+                  onChange: (v) => setPicks((p) => ({ ...p, textColor: v })),
+                  options: TEXT_COLOR_OPTIONS,
+                  utilityPrefix: "text"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                ColorPickerRow,
+                {
+                  label: "Background",
+                  value: picks.bgColor,
+                  onChange: (v) => setPicks((p) => ({ ...p, bgColor: v })),
+                  options: BACKGROUND_COLOR_OPTIONS,
+                  utilityPrefix: "bg"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Radius",
+                  value: picks.rounded,
+                  onChange: (v) => setPicks((p) => ({ ...p, rounded: v })),
+                  options: roundedOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Padding",
+                  value: picks.padding,
+                  onChange: (v) => setPicks((p) => ({ ...p, padding: v })),
+                  options: padOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Margin",
+                  value: picks.margin,
+                  onChange: (v) => setPicks((p) => ({ ...p, margin: v })),
+                  options: marginOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3("p", { className: "pt-1 text-[10px] font-medium text-slate-500", children: "Layout & effects" }),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Text align",
+                  value: picks.textAlign,
+                  onChange: (v) => setPicks((p) => ({ ...p, textAlign: v })),
+                  options: textAlignOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Gap",
+                  value: picks.gap,
+                  onChange: (v) => setPicks((p) => ({ ...p, gap: v })),
+                  options: gapOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Width",
+                  value: picks.width,
+                  onChange: (v) => setPicks((p) => ({ ...p, width: v })),
+                  options: widthOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Max width",
+                  value: picks.maxWidth,
+                  onChange: (v) => setPicks((p) => ({ ...p, maxWidth: v })),
+                  options: maxWidthOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Height",
+                  value: picks.height,
+                  onChange: (v) => setPicks((p) => ({ ...p, height: v })),
+                  options: heightOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Min height",
+                  value: picks.minHeight,
+                  onChange: (v) => setPicks((p) => ({ ...p, minHeight: v })),
+                  options: minHeightOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Opacity",
+                  value: picks.opacity,
+                  onChange: (v) => setPicks((p) => ({ ...p, opacity: v })),
+                  options: opacityOpts
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                SelectRow,
+                {
+                  label: "Shadow",
+                  value: picks.shadow,
+                  onChange: (v) => setPicks((p) => ({ ...p, shadow: v })),
+                  options: shadowOpts
+                }
+              )
+            ] }),
+            previewSummary && !structuralPreviewActive ? /* @__PURE__ */ jsxs3("div", { className: "rounded border border-emerald-700/50 bg-emerald-950/25 p-2 ring-1 ring-emerald-500/20", children: [
+              /* @__PURE__ */ jsx3("p", { className: "text-[10px] font-medium uppercase tracking-wide text-emerald-400/90", children: "Validated change" }),
+              /* @__PURE__ */ jsx3("p", { className: "mt-1 font-mono text-[11px] leading-snug text-emerald-100/95", children: previewSummary })
+            ] }) : null,
+            /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-2 pt-2", children: [
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: patchActionsDisabled,
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs font-medium text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestPreview(stagedOps),
+                  children: "Validate"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: applyDisabled,
+                  className: "rounded bg-sky-700 px-2 py-1 text-xs font-medium text-white enabled:hover:bg-sky-600 disabled:opacity-40",
+                  onClick: () => {
+                    if (previewValidatedOps?.length) {
+                      onRequestApply([...previewValidatedOps]);
+                    }
+                  },
+                  children: "Apply"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  disabled: !channelReady || undoStackDepth <= 0,
+                  className: "rounded bg-slate-700 px-2 py-1 text-xs font-medium text-slate-100 enabled:hover:bg-slate-600 disabled:opacity-40",
+                  onClick: () => onRequestUndo(),
+                  children: "Undo last"
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded border border-slate-600 px-2 py-1 text-xs text-slate-300 hover:bg-slate-800",
+                  onClick: () => onCancelPreview(),
+                  children: "Cancel"
+                }
+              )
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsx3(
+            ComponentTree,
+            {
+              entries: indexEntries,
+              selectedId,
+              onSelectId: onSelectIndexedId
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/NuvioDevShell.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function shortDisplayPath(absPath) {
+  const norm = absPath.replace(/\\/g, "/");
+  const idx = norm.lastIndexOf("/");
+  if (idx === -1) {
+    return absPath;
+  }
+  const parent = norm.slice(0, idx).split("/").pop() ?? "";
+  const base = norm.slice(idx + 1);
+  return parent ? `${parent}/${base}` : base;
+}
+function safeCloseWebSocket(socket) {
+  if (socket.readyState === WebSocket.CLOSING || socket.readyState === WebSocket.CLOSED) {
+    return;
+  }
+  if (socket.readyState === WebSocket.CONNECTING) {
+    socket.addEventListener(
+      "open",
+      () => {
+        socket.close(1e3, "nuvio-dispose");
+      },
+      { once: true }
+    );
+    return;
+  }
+  socket.close(1e3, "nuvio-dispose");
+}
+function wsPayloadToString(data) {
+  if (typeof data === "string") {
+    return data;
+  }
+  if (data instanceof ArrayBuffer) {
+    return new TextDecoder("utf-8").decode(data);
+  }
+  if (ArrayBuffer.isView(data)) {
+    const v = data;
+    return new TextDecoder("utf-8").decode(
+      new Uint8Array(v.buffer, v.byteOffset, v.byteLength)
+    );
+  }
+  if (data instanceof Blob) {
+    return null;
+  }
+  return null;
+}
+function assignRef(ref, el) {
+  ref.current = el;
+}
+function NuvioDevShellInner() {
+  const panelRef = useRef4(null);
+  const chipRef = useRef4(null);
+  const chromeRootRefs = useMemo2(
+    () => [panelRef, chipRef],
+    []
+  );
+  const wsRef = useRef4(null);
+  const connectGenRef = useRef4(0);
+  const [chromeLayout, setChromeLayout] = useState5(loadOverlayChromePersist);
+  const [chipPos, setChipPos] = useState5(
+    () => cornerAnchorPosition(loadOverlayChromePersist().chip.corner, 220, 120)
+  );
+  const patchChrome = useCallback3(
+    (patch) => {
+      setChromeLayout((prev) => {
+        const next = {
+          panel: patch.panel ? { ...prev.panel, ...patch.panel } : prev.panel,
+          chip: patch.chip ? { ...prev.chip, ...patch.chip } : prev.chip
+        };
+        saveOverlayChromePersist(next);
+        return next;
+      });
+    },
+    []
+  );
+  const onPanelCollapsedChange = useCallback3(
+    (collapsed) => {
+      patchChrome({ panel: { collapsed } });
+    },
+    [patchChrome]
+  );
+  const onPanelPositionChange = useCallback3(
+    (position) => {
+      patchChrome({ panel: { position } });
+    },
+    [patchChrome]
+  );
+  const onChipCollapsedChange = useCallback3(
+    (collapsed) => {
+      patchChrome({ chip: { collapsed } });
+    },
+    [patchChrome]
+  );
+  const onChipCornerChange = useCallback3(
+    (corner) => {
+      patchChrome({ chip: { corner } });
+    },
+    [patchChrome]
+  );
+  const anchorChipToCorner = useCallback3(
+    (corner) => {
+      const el = chipRef.current;
+      if (!el) {
+        return;
+      }
+      setChipPos(cornerAnchorPosition(corner, el.offsetWidth, el.offsetHeight));
+    },
+    []
+  );
+  const commitChipDrag = useCallback3(
+    (pos) => {
+      const el = chipRef.current;
+      if (!el) {
+        return;
+      }
+      const centerX = pos.x + el.offsetWidth / 2;
+      const centerY = pos.y + el.offsetHeight / 2;
+      const corner = snapToNearestCorner(centerX, centerY);
+      onChipCornerChange(corner);
+      setChipPos(cornerAnchorPosition(corner, el.offsetWidth, el.offsetHeight));
+    },
+    [onChipCornerChange]
+  );
+  const { dragging: chipDragging, onHeaderPointerDown: onChipHeaderPointerDown } = useChromeDrag({
+    shellRef: chipRef,
+    enabled: true,
+    position: chipPos,
+    setPosition: (next) => {
+      if (next) {
+        setChipPos(next);
+      }
+    },
+    onDragEnd: commitChipDrag
+  });
+  useLayoutEffect2(() => {
+    if (chipDragging) {
+      return;
+    }
+    anchorChipToCorner(chromeLayout.chip.corner);
+  }, [
+    anchorChipToCorner,
+    chipDragging,
+    chromeLayout.chip.collapsed,
+    chromeLayout.chip.corner
+  ]);
+  useEffect5(() => {
+    const onResize = () => {
+      if (!chipDragging) {
+        anchorChipToCorner(chromeLayout.chip.corner);
+      }
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [anchorChipToCorner, chipDragging, chromeLayout.chip.corner]);
+  const [editMode, setEditMode] = useState5(false);
+  const [channel, setChannel] = useState5("idle");
+  const [knownIds, setKnownIds] = useState5(/* @__PURE__ */ new Set());
+  const [indexEntries, setIndexEntries] = useState5([]);
+  const [duplicateErrors, setDuplicateErrors] = useState5([]);
+  const [selectedId, setSelectedId] = useState5(null);
+  const [resolvedFile, setResolvedFile] = useState5(void 0);
+  const [resolvedLine, setResolvedLine] = useState5(void 0);
+  const [selectError, setSelectError] = useState5(null);
+  const [previewSummary, setPreviewSummary] = useState5(null);
+  const [previewError, setPreviewError] = useState5(null);
+  const [lastPatchError, setLastPatchError] = useState5(null);
+  const [stagedVersion, setStagedVersion] = useState5(0);
+  const [previewValidatedFingerprint, setPreviewValidatedFingerprint] = useState5(
+    null
+  );
+  const [previewValidatedOps, setPreviewValidatedOps] = useState5(null);
+  const [undoStackDepth, setUndoStackDepth] = useState5(0);
+  const [previewBusy, setPreviewBusy] = useState5(false);
+  const patchPendingMapRef = useRef4(/* @__PURE__ */ new Map());
+  const previewTimeoutRef = useRef4(null);
+  const undoPendingRef = useRef4(null);
+  const resolvedFileRef = useRef4(void 0);
+  const selectedIdRef = useRef4(null);
+  const lastIndexEntriesRef = useRef4([]);
+  const lastStagedOpsFpRef = useRef4(null);
+  const autoApplyStructuralRef = useRef4(false);
+  const [structuralPreviewActive, setStructuralPreviewActive] = useState5(false);
+  useEffect5(() => {
+    resolvedFileRef.current = resolvedFile;
+  }, [resolvedFile]);
+  useEffect5(() => {
+    selectedIdRef.current = selectedId;
+  }, [selectedId]);
+  const toggleEditMode = useCallback3(() => {
+    setEditMode((prev) => {
+      if (prev) {
+        clearNuvioOutlines();
+        setSelectedId(null);
+      }
+      return !prev;
+    });
+  }, []);
+  const sendPatchMessage = useCallback3((ops, dryRun) => {
+    const ws = wsRef.current;
+    const id = selectedIdRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN || !id) {
+      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."
+        );
+      } else {
+        setLastPatchError(
+          !ws || ws.readyState !== WebSocket.OPEN ? "Dev channel is not connected." : "Nothing is selected."
+        );
+      }
+      return;
+    }
+    const requestId = `patch-${globalThis.crypto?.randomUUID?.() ?? Date.now()}`;
+    const opsFingerprint = JSON.stringify(ops);
+    patchPendingMapRef.current.set(requestId, {
+      kind: dryRun ? "preview" : "apply",
+      opsFingerprint,
+      ops
+    });
+    if (dryRun) {
+      setPreviewBusy(true);
+      if (previewTimeoutRef.current) {
+        clearTimeout(previewTimeoutRef.current);
+      }
+      previewTimeoutRef.current = setTimeout(() => {
+        previewTimeoutRef.current = null;
+        if (!patchPendingMapRef.current.has(requestId)) {
+          return;
+        }
+        patchPendingMapRef.current.delete(requestId);
+        setPreviewBusy(false);
+        setPreviewError("No validation response from the dev server (timed out). Check the terminal for [Nuvio] errors.");
+      }, 15e3);
+    }
+    ws.send(
+      JSON.stringify({
+        type: "patchApply",
+        protocolVersion: PROTOCOL_VERSION,
+        requestId,
+        id,
+        ops,
+        ...dryRun ? { dryRun: true } : {}
+      })
+    );
+  }, []);
+  const onRequestPreview = useCallback3(
+    (ops) => {
+      setStructuralPreviewActive(false);
+      autoApplyStructuralRef.current = false;
+      setPreviewValidatedFingerprint(null);
+      setPreviewValidatedOps(null);
+      setPreviewSummary(null);
+      setPreviewError(null);
+      setLastPatchError(null);
+      sendPatchMessage(ops, true);
+    },
+    [sendPatchMessage]
+  );
+  const onRequestStructuralPreview = useCallback3(
+    (ops) => {
+      lastStagedOpsFpRef.current = null;
+      setStructuralPreviewActive(true);
+      autoApplyStructuralRef.current = isStructuralOnlyOps(ops);
+      setPreviewValidatedFingerprint(null);
+      setPreviewValidatedOps(null);
+      setPreviewSummary(null);
+      setPreviewError(null);
+      setLastPatchError(null);
+      sendPatchMessage(ops, true);
+    },
+    [sendPatchMessage]
+  );
+  const onRequestApply = useCallback3(
+    (ops) => {
+      const fp = JSON.stringify(ops);
+      if (fp !== previewValidatedFingerprint) {
+        setLastPatchError(
+          "Run Validate first \u2014 staged edits changed since the last successful validation."
+        );
+        return;
+      }
+      setLastPatchError(null);
+      sendPatchMessage(ops, false);
+    },
+    [previewValidatedFingerprint, sendPatchMessage]
+  );
+  const onRequestUndo = useCallback3(() => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    const requestId = `undo-${globalThis.crypto?.randomUUID?.() ?? Date.now()}`;
+    undoPendingRef.current = requestId;
+    ws.send(
+      JSON.stringify({
+        type: "patchUndo",
+        protocolVersion: PROTOCOL_VERSION,
+        requestId
+      })
+    );
+  }, []);
+  const onCancelPreview = useCallback3(() => {
+    patchPendingMapRef.current.clear();
+    if (previewTimeoutRef.current) {
+      clearTimeout(previewTimeoutRef.current);
+      previewTimeoutRef.current = null;
+    }
+    setPreviewBusy(false);
+    setPreviewSummary(null);
+    setPreviewError(null);
+    setLastPatchError(null);
+    setPreviewValidatedFingerprint(null);
+    setPreviewValidatedOps(null);
+  }, []);
+  const onStagedPatchFingerprint = useCallback3((fp) => {
+    if (lastStagedOpsFpRef.current === fp) {
+      return;
+    }
+    lastStagedOpsFpRef.current = fp;
+    patchPendingMapRef.current.clear();
+    if (previewTimeoutRef.current) {
+      clearTimeout(previewTimeoutRef.current);
+      previewTimeoutRef.current = null;
+    }
+    setPreviewBusy(false);
+    setPreviewSummary(null);
+    setPreviewError(null);
+    setPreviewValidatedFingerprint(null);
+    setPreviewValidatedOps(null);
+  }, []);
+  const sendSelect = useCallback3((id) => {
+    const ws = wsRef.current;
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    ws.send(
+      JSON.stringify({
+        type: "select",
+        protocolVersion: PROTOCOL_VERSION,
+        requestId: `select-${globalThis.crypto?.randomUUID?.() ?? Date.now()}`,
+        id
+      })
+    );
+  }, []);
+  const onSelectId = useCallback3(
+    (id) => {
+      if (!id) {
+        return;
+      }
+      lastStagedOpsFpRef.current = null;
+      patchPendingMapRef.current.clear();
+      if (previewTimeoutRef.current) {
+        clearTimeout(previewTimeoutRef.current);
+        previewTimeoutRef.current = null;
+      }
+      setPreviewBusy(false);
+      setPreviewSummary(null);
+      setPreviewError(null);
+      setPreviewValidatedFingerprint(null);
+      setPreviewValidatedOps(null);
+      setLastPatchError(null);
+      setSelectedId(id);
+      setSelectError(null);
+      const hit = lastIndexEntriesRef.current.find((e) => e.id === id);
+      if (hit) {
+        setResolvedFile(shortDisplayPath(hit.file));
+        setResolvedLine(hit.line);
+      } else {
+        setResolvedFile(void 0);
+        setResolvedLine(void 0);
+      }
+      sendSelect(id);
+    },
+    [sendSelect]
+  );
+  useEffect5(() => {
+    let ws = null;
+    let cancelled = false;
+    let retryMs = 400;
+    let reconnectTimer;
+    const connect = () => {
+      if (cancelled) {
+        return;
+      }
+      const myGen = ++connectGenRef.current;
+      setChannel("connecting");
+      const proto = location.protocol === "https:" ? "wss:" : "ws:";
+      ws = new WebSocket(`${proto}//${location.host}${NUVIO_WS_PATH}`);
+      wsRef.current = ws;
+      ws.addEventListener("open", () => {
+        if (cancelled || connectGenRef.current !== myGen) {
+          safeCloseWebSocket(ws);
+          return;
+        }
+        retryMs = 400;
+        setChannel("ready");
+        patchPendingMapRef.current.clear();
+        if (previewTimeoutRef.current) {
+          clearTimeout(previewTimeoutRef.current);
+          previewTimeoutRef.current = null;
+        }
+        setPreviewBusy(false);
+        undoPendingRef.current = null;
+        setUndoStackDepth(0);
+        ws?.send(
+          JSON.stringify({
+            type: "ping",
+            protocolVersion: PROTOCOL_VERSION,
+            requestId: "overlay-mount"
+          })
+        );
+        const sid = selectedIdRef.current;
+        if (sid) {
+          ws?.send(
+            JSON.stringify({
+              type: "select",
+              protocolVersion: PROTOCOL_VERSION,
+              requestId: `select-${globalThis.crypto?.randomUUID?.() ?? Date.now()}`,
+              id: sid
+            })
+          );
+        }
+      });
+      ws.addEventListener("message", (ev) => {
+        const raw = wsPayloadToString(ev.data);
+        const parsePayload = (text) => {
+          const msg = parseServerMessage(text);
+          if (!msg) {
+            return;
+          }
+          if (msg.type === "indexReady") {
+            lastIndexEntriesRef.current = msg.entries;
+            setIndexEntries(msg.entries);
+            setKnownIds(new Set(msg.entries.map((e) => e.id)));
+            setDuplicateErrors(msg.duplicateErrors);
+            const sid = selectedIdRef.current;
+            if (sid) {
+              const hit = msg.entries.find((e) => e.id === sid);
+              if (hit) {
+                setResolvedFile(shortDisplayPath(hit.file));
+                setResolvedLine(hit.line);
+                setSelectError(null);
+              }
+            }
+            if (sid && msg.entries.some((e) => e.id === sid)) {
+              queueMicrotask(() => {
+                sendSelect(sid);
+              });
+            }
+            return;
+          }
+          if (msg.type === "selectAck") {
+            if (msg.ok && msg.file != null && msg.line != null) {
+              setResolvedFile(shortDisplayPath(msg.file));
+              setResolvedLine(msg.line);
+              setSelectError(null);
+            } else {
+              const hit = lastIndexEntriesRef.current.find((e) => e.id === msg.id);
+              if (hit) {
+                setResolvedFile(shortDisplayPath(hit.file));
+                setResolvedLine(hit.line);
+                setSelectError(null);
+              } else {
+                setResolvedFile(void 0);
+                setResolvedLine(void 0);
+                setSelectError(msg.errorMessage ?? msg.errorCode ?? "Selection failed");
+              }
+            }
+            return;
+          }
+          if (msg.type === "patchAck") {
+            const pending = patchPendingMapRef.current.get(msg.requestId);
+            if (!pending) {
+              return;
+            }
+            patchPendingMapRef.current.delete(msg.requestId);
+            const savedFp = pending.opsFingerprint;
+            if (pending.kind === "preview") {
+              if (previewTimeoutRef.current) {
+                clearTimeout(previewTimeoutRef.current);
+                previewTimeoutRef.current = null;
+              }
+              setPreviewBusy(false);
+              if (msg.ok) {
+                const summary = msg.diffSummary?.trim() || "Validation OK \u2014 server did not return a change summary line.";
+                setPreviewSummary(summary);
+                setPreviewError(null);
+                setPreviewValidatedFingerprint(savedFp);
+                setPreviewValidatedOps(pending.ops);
+                if (autoApplyStructuralRef.current && isStructuralOnlyOps(pending.ops)) {
+                  autoApplyStructuralRef.current = false;
+                  sendPatchMessage(pending.ops, false);
+                }
+              } else {
+                autoApplyStructuralRef.current = false;
+                setPreviewSummary(null);
+                setPreviewValidatedFingerprint(null);
+                setPreviewValidatedOps(null);
+                setPreviewError(msg.errorMessage ?? msg.errorCode ?? "Validation failed");
+              }
+              return;
+            }
+            if (pending.kind === "apply") {
+              if (msg.ok) {
+                setStructuralPreviewActive(false);
+                setLastPatchError(null);
+                setPreviewSummary(null);
+                setPreviewError(null);
+                setPreviewValidatedFingerprint(null);
+                setPreviewValidatedOps(null);
+                setStagedVersion((v) => v + 1);
+                if (msg.undoStackDepth !== void 0) {
+                  setUndoStackDepth(msg.undoStackDepth);
+                }
+              } else {
+                setLastPatchError(msg.errorMessage ?? msg.errorCode ?? "Apply failed");
+              }
+              return;
+            }
+          }
+          if (msg.type === "patchUndoAck") {
+            const rid = undoPendingRef.current;
+            if (!rid || rid !== msg.requestId) {
+              return;
+            }
+            undoPendingRef.current = null;
+            if (msg.ok) {
+              if (msg.undoStackDepth !== void 0) {
+                setUndoStackDepth(msg.undoStackDepth);
+              }
+              setStagedVersion((v) => v + 1);
+              setLastPatchError(null);
+            } else {
+              setLastPatchError(msg.errorMessage ?? msg.errorCode ?? "Undo failed");
+            }
+            return;
+          }
+          if (cancelled || connectGenRef.current !== myGen) {
+            return;
+          }
+          if (msg.type === "error") {
+            setChannel("error");
+          }
+        };
+        if (raw !== null) {
+          parsePayload(raw);
+          return;
+        }
+        if (ev.data instanceof Blob) {
+          void ev.data.text().then((text) => {
+            parsePayload(text);
+          });
+          return;
+        }
+        parsePayload(String(ev.data));
+      });
+      ws.addEventListener("error", () => {
+        if (cancelled || connectGenRef.current !== myGen) {
+          return;
+        }
+        setChannel("error");
+      });
+      ws.addEventListener("close", () => {
+        const wasActiveSocket = wsRef.current === ws;
+        if (wasActiveSocket) {
+          wsRef.current = null;
+        }
+        if (cancelled || connectGenRef.current !== myGen) {
+          return;
+        }
+        if (!wasActiveSocket) {
+          return;
+        }
+        const hadPending = patchPendingMapRef.current.size > 0;
+        if (hadPending) {
+          patchPendingMapRef.current.clear();
+          if (previewTimeoutRef.current) {
+            clearTimeout(previewTimeoutRef.current);
+            previewTimeoutRef.current = null;
+          }
+          setPreviewBusy(false);
+          setPreviewError("Dev channel closed before validation finished.");
+        }
+        setChannel("idle");
+        reconnectTimer = setTimeout(() => {
+          retryMs = Math.min(retryMs * 2, 1e4);
+          connect();
+        }, retryMs);
+      });
+    };
+    connect();
+    return () => {
+      cancelled = true;
+      connectGenRef.current += 1;
+      clearTimeout(reconnectTimer);
+      if (ws) {
+        safeCloseWebSocket(ws);
+      }
+      wsRef.current = null;
+    };
+  }, [sendSelect]);
+  const channelLabel = channel === "ready" ? "connected" : channel;
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    editMode ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx4(
+        InteractionLayer,
+        {
+          enabled: editMode,
+          chromeRootRefs,
+          knownIds,
+          selectedId,
+          onSelectId
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        PropertyPanelShell,
+        {
+          shellRef: panelRef,
+          panelCollapsed: chromeLayout.panel.collapsed,
+          panelPosition: chromeLayout.panel.position,
+          onPanelCollapsedChange,
+          onPanelPositionChange,
+          indexEntries,
+          onSelectIndexedId: onSelectId,
+          onRequestStructuralPreview,
+          selectedId,
+          resolvedFile,
+          resolvedLine,
+          indexIdCount: knownIds.size,
+          selectError,
+          channelReady: channel === "ready",
+          previewSummary,
+          previewError,
+          lastPatchError,
+          stagedVersion,
+          previewValidatedFingerprint,
+          previewValidatedOps,
+          structuralPreviewActive,
+          undoStackDepth,
+          previewBusy,
+          onStagedPatchFingerprint,
+          onRequestPreview,
+          onRequestApply,
+          onRequestUndo,
+          onCancelPreview
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref: (el) => assignRef(chipRef, el),
+        style: {
+          ...NUVO_GLASS_SURFACE_STYLE,
+          ...chipPos ? { left: chipPos.x, top: chipPos.y, right: "auto", bottom: "auto" } : {}
+        },
+        className: `pointer-events-auto fixed z-[9999] flex flex-col gap-2 rounded-2xl text-left text-sm text-slate-100 ${NUVO_GLASS_CHIP} ${chromeLayout.chip.collapsed ? "min-w-0 max-w-[10rem] p-2" : "min-w-[200px] max-w-sm p-3"} ${chipDragging ? "select-none" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              className: `flex items-center gap-2 ${chipDragging ? "cursor-grabbing" : "cursor-grab"}`,
+              onPointerDown: onChipHeaderPointerDown,
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "shrink-0 font-semibold tracking-tight", children: "Nuvio" }),
+                /* @__PURE__ */ jsx4("span", { className: "flex-1", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: "shrink-0 rounded px-1.5 py-0.5 text-xs text-slate-400 hover:bg-slate-800 hover:text-slate-200",
+                    title: chromeLayout.chip.collapsed ? "Expand chip" : "Collapse 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"
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    className: `shrink-0 rounded px-2 py-1 text-xs font-medium ${editMode ? "bg-sky-600 text-white" : "bg-slate-700 text-slate-200 hover:bg-slate-600"}`,
+                    onPointerDown: (e) => e.stopPropagation(),
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleEditMode();
+                    },
+                    children: editMode ? "Editing" : "Edit"
+                  }
+                )
+              ]
+            }
+          ),
+          !chromeLayout.chip.collapsed ? /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsxs4("div", { className: "space-y-1 text-xs text-slate-300/90", children: [
+            /* @__PURE__ */ jsxs4("p", { children: [
+              /* @__PURE__ */ jsx4("span", { className: "text-slate-500", children: "Channel " }),
+              /* @__PURE__ */ jsx4("span", { className: channel === "ready" ? "text-emerald-300" : "text-slate-200", children: channelLabel }),
+              /* @__PURE__ */ jsx4("span", { className: "text-slate-600", children: " \xB7 " }),
+              /* @__PURE__ */ jsxs4("span", { className: "text-slate-500", children: [
+                knownIds.size,
+                " ids"
+              ] })
+            ] }),
+            knownIds.size === 0 ? /* @__PURE__ */ jsx4("p", { className: "text-[11px] text-amber-200/90", children: "Restart dev server if index stays empty." }) : null,
+            duplicateErrors.length > 0 ? /* @__PURE__ */ jsxs4("p", { className: "text-amber-300/90", children: [
+              "Duplicate ids: ",
+              duplicateErrors.map((d) => d.id).join(", ")
+            ] }) : null,
+            selectError ? /* @__PURE__ */ jsx4("p", { className: "text-red-300/95", children: selectError }) : null
+          ] }) }) : /* @__PURE__ */ jsxs4("p", { className: "text-[11px] text-slate-500", children: [
+            channelLabel,
+            editMode ? " \xB7 edit on" : ""
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function nuvioDevEnabled() {
+  const env = import.meta.env;
+  return env?.DEV === true;
+}
+function NuvioDevShell() {
+  if (!nuvioDevEnabled()) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(NuvioDevShellInner, {});
+}
+export {
+  NuvioDevShell
+};