@bitovi/vybit 0.8.1 → 0.9.0

package/overlay/dist/overlay.js

@@ -1,5 +1,518 @@
 "use strict";
 (() => {
+  // overlay/src/ws.ts
+  var socket = null;
+  var connected = false;
+  var handlers = [];
+  function connect(url = "ws://localhost:3333") {
+    socket = new WebSocket(url);
+    socket.addEventListener("open", () => {
+      connected = true;
+      send({ type: "REGISTER", role: "overlay" });
+      window.dispatchEvent(new CustomEvent("overlay-ws-connected"));
+    });
+    socket.addEventListener("close", () => {
+      connected = false;
+      socket = null;
+      window.dispatchEvent(new CustomEvent("overlay-ws-disconnected"));
+      setTimeout(() => connect(url), 3e3);
+    });
+    socket.addEventListener("message", (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        for (const handler of handlers) {
+          handler(data);
+        }
+      } catch (err) {
+        console.error("[tw-overlay] Failed to parse message:", err);
+      }
+    });
+    socket.addEventListener("error", (err) => {
+      console.error("[tw-overlay] WebSocket error:", err);
+    });
+  }
+  function send(data) {
+    if (connected && socket) {
+      socket.send(JSON.stringify(data));
+    } else {
+      console.warn("[tw-overlay] Cannot send \u2014 not connected");
+    }
+  }
+  function onMessage(handler) {
+    handlers.push(handler);
+  }
+  function sendTo(role, data) {
+    send({ ...data, to: role });
+  }
+
+  // overlay/src/context.ts
+  function buildContext(target, oldClass, newClass, originalClassMap) {
+    const ancestors = [];
+    let current = target;
+    while (current && current !== document.documentElement) {
+      ancestors.push(current);
+      current = current.parentElement;
+    }
+    ancestors.reverse();
+    return buildLevel(ancestors, 0, target, oldClass, newClass, originalClassMap, 0);
+  }
+  function buildLevel(ancestors, ancestorIndex, target, oldClass, newClass, originalClassMap, indent) {
+    const el = ancestors[ancestorIndex];
+    const pad = "  ".repeat(indent);
+    const tag = el.tagName.toLowerCase();
+    let attrs = "";
+    if (el.id) attrs += ` id="${el.id}"`;
+    const originalClass = originalClassMap.get(el);
+    const classStr = originalClass != null ? originalClass.trim() : typeof el.className === "string" ? el.className.trim() : "";
+    if (classStr) {
+      attrs += ` class="${classStr}"`;
+    }
+    const isTarget = el === target;
+    if (isTarget) {
+      const text = getInnerText(el);
+      const textNode = text ? `
+${pad}  ${text}` : "";
+      return `${pad}<${tag}${attrs}> <!-- TARGET: change ${oldClass} \u2192 ${newClass} -->${textNode}
+${pad}</${tag}>`;
+    }
+    if (ancestorIndex >= ancestors.length - 1) {
+      return `${pad}<${tag}${attrs} />`;
+    }
+    const nextAncestor = ancestors[ancestorIndex + 1];
+    const children = Array.from(el.children);
+    const relevantIndex = children.indexOf(nextAncestor);
+    let inner = "";
+    if (relevantIndex === -1) {
+      inner = buildLevel(ancestors, ancestorIndex + 1, target, oldClass, newClass, originalClassMap, indent + 1);
+    } else {
+      const start = Math.max(0, relevantIndex - 3);
+      const end = Math.min(children.length - 1, relevantIndex + 3);
+      if (start > 0) {
+        inner += `${pad}  ...
+`;
+      }
+      for (let i = start; i <= end; i++) {
+        if (i === relevantIndex) {
+          inner += buildLevel(ancestors, ancestorIndex + 1, target, oldClass, newClass, originalClassMap, indent + 1) + "\n";
+        } else {
+          inner += renderSiblingNode(children[i], indent + 1, originalClassMap) + "\n";
+        }
+      }
+      if (end < children.length - 1) {
+        inner += `${pad}  ...
+`;
+      }
+    }
+    return `${pad}<${tag}${attrs}>
+${inner}${pad}</${tag}>`;
+  }
+  function renderSiblingNode(el, indent, originalClassMap) {
+    const pad = "  ".repeat(indent);
+    const tag = el.tagName.toLowerCase();
+    let attrs = "";
+    if (el.id) attrs += ` id="${el.id}"`;
+    const originalClass = originalClassMap.get(el);
+    const classStr = originalClass != null ? originalClass.trim() : typeof el.className === "string" ? el.className.trim() : "";
+    if (classStr) {
+      attrs += ` class="${classStr}"`;
+    }
+    const text = getInnerText(el);
+    if (!el.id && (!el.className || !el.className.trim()) && !text) {
+      return `${pad}<${tag}>...</${tag}>`;
+    }
+    if (text) {
+      return `${pad}<${tag}${attrs}>
+${pad}  ${text}
+${pad}</${tag}>`;
+    }
+    if (el.children.length > 0) {
+      return `${pad}<${tag}${attrs}>
+${pad}  ...
+${pad}</${tag}>`;
+    }
+    return `${pad}<${tag}${attrs} />`;
+  }
+  function getInnerText(el) {
+    let text = "";
+    for (const node of Array.from(el.childNodes)) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        text += node.textContent || "";
+      }
+    }
+    text = text.trim();
+    if (text.length > 60) text = text.slice(0, 57) + "...";
+    return text;
+  }
+
+  // overlay/src/fiber.ts
+  function getFiber(domNode) {
+    const key = Object.keys(domNode).find((k) => k.startsWith("__reactFiber$"));
+    return key ? domNode[key] : null;
+  }
+  function findComponentBoundary(fiber) {
+    let current = fiber.return;
+    while (current) {
+      if (typeof current.type === "function") {
+        return {
+          componentType: current.type,
+          componentName: current.type.displayName || current.type.name || "Unknown",
+          componentFiber: current
+        };
+      }
+      current = current.return;
+    }
+    return null;
+  }
+  function getRootFiber() {
+    const candidateIds = ["root", "app", "__next"];
+    for (const id of candidateIds) {
+      const el = document.getElementById(id);
+      if (!el) continue;
+      const key = Object.keys(el).find((k) => k.startsWith("__reactContainer$"));
+      if (key) {
+        const container = el[key];
+        if (container?.stateNode?.current) {
+          return container.stateNode.current;
+        }
+        return container;
+      }
+    }
+    const reactRoot = document.querySelector("[data-reactroot]");
+    if (reactRoot) {
+      return getFiber(reactRoot);
+    }
+    return null;
+  }
+  function findAllInstances(rootFiber, componentType) {
+    const results = [];
+    function walk(fiber) {
+      if (!fiber) return;
+      if (fiber.type === componentType) {
+        results.push(fiber);
+      }
+      walk(fiber.child);
+      walk(fiber.sibling);
+    }
+    walk(rootFiber);
+    return results;
+  }
+
+  // overlay/src/drop-zone.ts
+  var active = false;
+  var componentName = "";
+  var storyId = "";
+  var ghostHtml = "";
+  var componentPath = "";
+  var componentArgs = {};
+  var cursorLabelEl = null;
+  var indicatorEl = null;
+  var arrowLeftEl = null;
+  var arrowRightEl = null;
+  var currentTarget = null;
+  var currentPosition = null;
+  var overlayHost = null;
+  var TEAL = "#00848B";
+  function armInsert(msg, shadowHost2) {
+    if (active) cleanup();
+    active = true;
+    componentName = msg.componentName;
+    storyId = msg.storyId;
+    ghostHtml = msg.ghostHtml;
+    componentPath = msg.componentPath ?? "";
+    componentArgs = msg.args ?? {};
+    overlayHost = shadowHost2;
+    document.documentElement.style.cursor = "crosshair";
+    cursorLabelEl = document.createElement("div");
+    cursorLabelEl.style.cssText = `position:fixed;pointer-events:none;z-index:2147483647;background:${TEAL};color:#fff;font-size:11px;font-family:system-ui,sans-serif;padding:3px 8px;border-radius:4px;white-space:nowrap;opacity:0;box-shadow:0 2px 6px rgba(0,0,0,0.3);transition:opacity 0.1s;`;
+    cursorLabelEl.textContent = `Place: ${componentName}`;
+    document.body.appendChild(cursorLabelEl);
+    indicatorEl = document.createElement("div");
+    indicatorEl.style.cssText = "position:fixed;pointer-events:none;z-index:2147483645;display:none;";
+    document.body.appendChild(indicatorEl);
+    document.addEventListener("mousemove", onMouseMove);
+    document.documentElement.addEventListener("mouseleave", onMouseLeave);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("keydown", onKeyDown);
+  }
+  function cancelInsert() {
+    cleanup();
+  }
+  function getAxis(el) {
+    const style = getComputedStyle(el);
+    if (style.display.includes("flex")) {
+      return style.flexDirection.startsWith("row") ? "horizontal" : "vertical";
+    }
+    if (style.display.includes("grid")) {
+      return style.gridAutoFlow.startsWith("column") ? "horizontal" : "vertical";
+    }
+    return "vertical";
+  }
+  function computeDropPosition(cursor, rect, axis) {
+    const ratio = axis === "horizontal" ? (cursor.x - rect.left) / rect.width : (cursor.y - rect.top) / rect.height;
+    if (ratio < 0.25) return "before";
+    if (ratio < 0.5) return "first-child";
+    if (ratio < 0.75) return "last-child";
+    return "after";
+  }
+  function findTarget(x, y) {
+    if (indicatorEl) indicatorEl.style.display = "none";
+    const el = document.elementFromPoint(x, y);
+    if (indicatorEl) indicatorEl.style.display = "";
+    if (!el || el === document.documentElement || el === document.body) return null;
+    if (overlayHost && (el === overlayHost || overlayHost.contains(el))) return null;
+    if (indicatorEl && (el === indicatorEl || indicatorEl.contains(el))) return null;
+    return el;
+  }
+  function showIndicator(target, position, axis) {
+    if (!indicatorEl) return;
+    const rect = target.getBoundingClientRect();
+    const isInside = position === "first-child" || position === "last-child";
+    if (arrowLeftEl) {
+      arrowLeftEl.remove();
+      arrowLeftEl = null;
+    }
+    if (arrowRightEl) {
+      arrowRightEl.remove();
+      arrowRightEl = null;
+    }
+    if (isInside) {
+      indicatorEl.style.cssText = `position:fixed;pointer-events:none;z-index:2147483645;top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;border:2px dashed ${TEAL};border-radius:4px;box-sizing:border-box;display:block;background:none;`;
+      const arrow2 = document.createElement("div");
+      arrow2.style.cssText = "position:absolute;width:0;height:0;border-style:solid;";
+      const size2 = 6;
+      const isVertical = axis === "vertical";
+      if (position === "first-child") {
+        if (isVertical) {
+          arrow2.style.top = "4px";
+          arrow2.style.left = "50%";
+          arrow2.style.transform = "translateX(-50%)";
+          arrow2.style.borderWidth = `${size2}px ${size2}px 0 ${size2}px`;
+          arrow2.style.borderColor = `${TEAL} transparent transparent transparent`;
+        } else {
+          arrow2.style.left = "4px";
+          arrow2.style.top = "50%";
+          arrow2.style.transform = "translateY(-50%)";
+          arrow2.style.borderWidth = `${size2}px 0 ${size2}px ${size2}px`;
+          arrow2.style.borderColor = `transparent transparent transparent ${TEAL}`;
+        }
+      } else {
+        if (isVertical) {
+          arrow2.style.bottom = "4px";
+          arrow2.style.left = "50%";
+          arrow2.style.transform = "translateX(-50%)";
+          arrow2.style.borderWidth = `0 ${size2}px ${size2}px ${size2}px`;
+          arrow2.style.borderColor = `transparent transparent ${TEAL} transparent`;
+        } else {
+          arrow2.style.right = "4px";
+          arrow2.style.top = "50%";
+          arrow2.style.transform = "translateY(-50%)";
+          arrow2.style.borderWidth = `${size2}px ${size2}px ${size2}px 0`;
+          arrow2.style.borderColor = `transparent ${TEAL} transparent transparent`;
+        }
+      }
+      indicatorEl.appendChild(arrow2);
+      arrowLeftEl = arrow2;
+    } else {
+      const lineWidth = 3;
+      const isHorizontalLine = axis === "vertical";
+      if (isHorizontalLine) {
+        const y = position === "before" ? rect.top : rect.bottom;
+        indicatorEl.style.cssText = `position:fixed;pointer-events:none;z-index:2147483645;display:block;top:${y - lineWidth / 2}px;left:${rect.left}px;width:${rect.width}px;height:${lineWidth}px;background:${TEAL};border-radius:${lineWidth}px;`;
+      } else {
+        const x = position === "before" ? rect.left : rect.right;
+        indicatorEl.style.cssText = `position:fixed;pointer-events:none;z-index:2147483645;display:block;top:${rect.top}px;left:${x - lineWidth / 2}px;width:${lineWidth}px;height:${rect.height}px;background:${TEAL};border-radius:${lineWidth}px;`;
+      }
+      const arrowSize = 5;
+      const inset = -2;
+      arrowLeftEl = document.createElement("div");
+      arrowLeftEl.style.cssText = "position:absolute;width:0;height:0;border-style:solid;";
+      arrowRightEl = document.createElement("div");
+      arrowRightEl.style.cssText = "position:absolute;width:0;height:0;border-style:solid;";
+      if (isHorizontalLine) {
+        arrowLeftEl.style.top = "50%";
+        arrowLeftEl.style.left = `${inset}px`;
+        arrowLeftEl.style.transform = "translateY(-50%)";
+        arrowLeftEl.style.borderWidth = `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`;
+        arrowLeftEl.style.borderColor = `transparent transparent transparent ${TEAL}`;
+        arrowRightEl.style.top = "50%";
+        arrowRightEl.style.right = `${inset}px`;
+        arrowRightEl.style.transform = "translateY(-50%)";
+        arrowRightEl.style.borderWidth = `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`;
+        arrowRightEl.style.borderColor = `transparent ${TEAL} transparent transparent`;
+      } else {
+        arrowLeftEl.style.left = "50%";
+        arrowLeftEl.style.top = `${inset}px`;
+        arrowLeftEl.style.transform = "translateX(-50%)";
+        arrowLeftEl.style.borderWidth = `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`;
+        arrowLeftEl.style.borderColor = `${TEAL} transparent transparent transparent`;
+        arrowRightEl.style.left = "50%";
+        arrowRightEl.style.bottom = `${inset}px`;
+        arrowRightEl.style.transform = "translateX(-50%)";
+        arrowRightEl.style.borderWidth = `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`;
+        arrowRightEl.style.borderColor = `transparent transparent ${TEAL} transparent`;
+      }
+      indicatorEl.appendChild(arrowLeftEl);
+      indicatorEl.appendChild(arrowRightEl);
+    }
+  }
+  function hideIndicator() {
+    if (indicatorEl) indicatorEl.style.display = "none";
+    if (arrowLeftEl) {
+      arrowLeftEl.remove();
+      arrowLeftEl = null;
+    }
+    if (arrowRightEl) {
+      arrowRightEl.remove();
+      arrowRightEl = null;
+    }
+    currentTarget = null;
+    currentPosition = null;
+  }
+  function onMouseMove(e) {
+    if (!active) return;
+    if (cursorLabelEl) {
+      cursorLabelEl.style.left = `${e.clientX + 14}px`;
+      cursorLabelEl.style.top = `${e.clientY - 28}px`;
+      cursorLabelEl.style.opacity = "1";
+    }
+    const target = findTarget(e.clientX, e.clientY);
+    if (!target) {
+      hideIndicator();
+      return;
+    }
+    const parentAxis = target.parentElement ? getAxis(target.parentElement) : "vertical";
+    const rect = target.getBoundingClientRect();
+    const position = computeDropPosition(
+      { x: e.clientX, y: e.clientY },
+      rect,
+      parentAxis
+    );
+    currentTarget = target;
+    currentPosition = position;
+    showIndicator(target, position, parentAxis);
+  }
+  function onMouseLeave() {
+    hideIndicator();
+    if (cursorLabelEl) cursorLabelEl.style.opacity = "0";
+  }
+  function onClick(e) {
+    if (!active) return;
+    if (!currentTarget || !currentPosition) {
+      cleanup();
+      sendTo("panel", { type: "COMPONENT_DISARMED" });
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const template = document.createElement("template");
+    template.innerHTML = ghostHtml.trim();
+    const inserted = template.content.firstElementChild;
+    if (!inserted) {
+      cleanup();
+      sendTo("panel", { type: "COMPONENT_DISARMED" });
+      return;
+    }
+    inserted.dataset.twDroppedComponent = componentName;
+    switch (currentPosition) {
+      case "before":
+        currentTarget.insertAdjacentElement("beforebegin", inserted);
+        break;
+      case "after":
+        currentTarget.insertAdjacentElement("afterend", inserted);
+        break;
+      case "first-child":
+        currentTarget.insertAdjacentElement("afterbegin", inserted);
+        break;
+      case "last-child":
+        currentTarget.appendChild(inserted);
+        break;
+    }
+    const targetSelector = buildSelector(currentTarget);
+    const isGhostTarget = !!currentTarget.dataset.twDroppedComponent;
+    const ghostTargetPatchId = currentTarget.dataset.twDroppedPatchId;
+    const ghostTargetName = currentTarget.dataset.twDroppedComponent;
+    const ghostAncestor = !isGhostTarget ? findGhostAncestor(currentTarget) : null;
+    const effectiveGhostName = isGhostTarget ? ghostTargetName : ghostAncestor?.dataset.twDroppedComponent;
+    const effectiveGhostPatchId = isGhostTarget ? ghostTargetPatchId : ghostAncestor?.dataset.twDroppedPatchId;
+    const context = effectiveGhostName ? `Place "${componentName}" ${currentPosition} the <${effectiveGhostName} /> component (pending insertion from an earlier drop)` : buildContext(currentTarget, "", "", /* @__PURE__ */ new Map());
+    let parentComponent;
+    const fiber = getFiber(currentTarget);
+    if (fiber) {
+      const boundary = findComponentBoundary(fiber);
+      if (boundary) {
+        parentComponent = { name: boundary.componentName };
+      }
+    }
+    const patch = {
+      id: crypto.randomUUID(),
+      kind: "component-drop",
+      elementKey: targetSelector,
+      status: "staged",
+      originalClass: "",
+      newClass: "",
+      property: "component-drop",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      component: { name: componentName },
+      target: isGhostTarget ? { tag: ghostTargetName?.toLowerCase() ?? "unknown", classes: "", innerText: "" } : {
+        tag: currentTarget.tagName.toLowerCase(),
+        classes: currentTarget.className,
+        innerText: currentTarget.innerText.slice(0, 100)
+      },
+      ghostHtml,
+      componentStoryId: storyId,
+      componentPath: componentPath || void 0,
+      componentArgs: Object.keys(componentArgs).length > 0 ? componentArgs : void 0,
+      parentComponent,
+      insertMode: currentPosition,
+      context,
+      ...effectiveGhostPatchId ? { targetPatchId: effectiveGhostPatchId, targetComponentName: effectiveGhostName } : {}
+    };
+    inserted.dataset.twDroppedPatchId = patch.id;
+    send({ type: "COMPONENT_DROPPED", patch });
+    sendTo("panel", { type: "COMPONENT_DISARMED" });
+    cleanup();
+  }
+  function onKeyDown(e) {
+    if (e.key === "Escape") {
+      sendTo("panel", { type: "COMPONENT_DISARMED" });
+      cleanup();
+    }
+  }
+  function findGhostAncestor(el) {
+    let current = el.parentElement;
+    while (current && current !== document.body) {
+      if (current.dataset.twDroppedComponent) return current;
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function buildSelector(el) {
+    const tag = el.tagName.toLowerCase();
+    if (el.id) return `#${el.id}`;
+    const classes = Array.from(el.classList).slice(0, 3).join(".");
+    return classes ? `${tag}.${classes}` : tag;
+  }
+  function cleanup() {
+    active = false;
+    document.documentElement.style.cursor = "";
+    document.removeEventListener("mousemove", onMouseMove);
+    document.documentElement.removeEventListener("mouseleave", onMouseLeave);
+    document.removeEventListener("click", onClick, true);
+    document.removeEventListener("keydown", onKeyDown);
+    if (cursorLabelEl) {
+      cursorLabelEl.remove();
+      cursorLabelEl = null;
+    }
+    if (indicatorEl) {
+      indicatorEl.remove();
+      indicatorEl = null;
+    }
+    arrowLeftEl = null;
+    arrowRightEl = null;
+    currentTarget = null;
+    currentPosition = null;
+  }
+
   // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
   var min = Math.min;
   var max = Math.max;
@@ -1442,164 +1955,12 @@
     }
   };
 
-  // overlay/src/context.ts
-  function buildContext(target, oldClass, newClass, originalClassMap) {
-    const ancestors = [];
-    let current = target;
-    while (current && current !== document.documentElement) {
-      ancestors.push(current);
-      current = current.parentElement;
-    }
-    ancestors.reverse();
-    return buildLevel(ancestors, 0, target, oldClass, newClass, originalClassMap, 0);
-  }
-  function buildLevel(ancestors, ancestorIndex, target, oldClass, newClass, originalClassMap, indent) {
-    const el = ancestors[ancestorIndex];
-    const pad = "  ".repeat(indent);
-    const tag = el.tagName.toLowerCase();
-    let attrs = "";
-    if (el.id) attrs += ` id="${el.id}"`;
-    const originalClass = originalClassMap.get(el);
-    const classStr = originalClass != null ? originalClass.trim() : typeof el.className === "string" ? el.className.trim() : "";
-    if (classStr) {
-      attrs += ` class="${classStr}"`;
-    }
-    const isTarget = el === target;
-    if (isTarget) {
-      const text = getInnerText(el);
-      const textNode = text ? `
-${pad}  ${text}` : "";
-      return `${pad}<${tag}${attrs}> <!-- TARGET: change ${oldClass} \u2192 ${newClass} -->${textNode}
-${pad}</${tag}>`;
-    }
-    if (ancestorIndex >= ancestors.length - 1) {
-      return `${pad}<${tag}${attrs} />`;
-    }
-    const nextAncestor = ancestors[ancestorIndex + 1];
-    const children = Array.from(el.children);
-    const relevantIndex = children.indexOf(nextAncestor);
-    let inner = "";
-    if (relevantIndex === -1) {
-      inner = buildLevel(ancestors, ancestorIndex + 1, target, oldClass, newClass, originalClassMap, indent + 1);
-    } else {
-      const start = Math.max(0, relevantIndex - 3);
-      const end = Math.min(children.length - 1, relevantIndex + 3);
-      if (start > 0) {
-        inner += `${pad}  ...
-`;
-      }
-      for (let i = start; i <= end; i++) {
-        if (i === relevantIndex) {
-          inner += buildLevel(ancestors, ancestorIndex + 1, target, oldClass, newClass, originalClassMap, indent + 1) + "\n";
-        } else {
-          inner += renderSiblingNode(children[i], indent + 1, originalClassMap) + "\n";
-        }
-      }
-      if (end < children.length - 1) {
-        inner += `${pad}  ...
-`;
-      }
-    }
-    return `${pad}<${tag}${attrs}>
-${inner}${pad}</${tag}>`;
-  }
-  function renderSiblingNode(el, indent, originalClassMap) {
-    const pad = "  ".repeat(indent);
-    const tag = el.tagName.toLowerCase();
-    let attrs = "";
-    if (el.id) attrs += ` id="${el.id}"`;
-    const originalClass = originalClassMap.get(el);
-    const classStr = originalClass != null ? originalClass.trim() : typeof el.className === "string" ? el.className.trim() : "";
-    if (classStr) {
-      attrs += ` class="${classStr}"`;
-    }
-    const text = getInnerText(el);
-    if (!el.id && (!el.className || !el.className.trim()) && !text) {
-      return `${pad}<${tag}>...</${tag}>`;
-    }
-    if (text) {
-      return `${pad}<${tag}${attrs}>
-${pad}  ${text}
-${pad}</${tag}>`;
-    }
-    if (el.children.length > 0) {
-      return `${pad}<${tag}${attrs}>
-${pad}  ...
-${pad}</${tag}>`;
-    }
-    return `${pad}<${tag}${attrs} />`;
-  }
-  function getInnerText(el) {
-    let text = "";
-    for (const node of Array.from(el.childNodes)) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        text += node.textContent || "";
-      }
-    }
-    text = text.trim();
-    if (text.length > 60) text = text.slice(0, 57) + "...";
-    return text;
-  }
-
-  // overlay/src/fiber.ts
-  function getFiber(domNode) {
-    const key = Object.keys(domNode).find((k) => k.startsWith("__reactFiber$"));
-    return key ? domNode[key] : null;
-  }
-  function findComponentBoundary(fiber) {
-    let current = fiber.return;
-    while (current) {
-      if (typeof current.type === "function") {
-        return {
-          componentType: current.type,
-          componentName: current.type.displayName || current.type.name || "Unknown",
-          componentFiber: current
-        };
-      }
-      current = current.return;
-    }
-    return null;
-  }
-  function getRootFiber() {
-    const candidateIds = ["root", "app", "__next"];
-    for (const id of candidateIds) {
-      const el = document.getElementById(id);
-      if (!el) continue;
-      const key = Object.keys(el).find((k) => k.startsWith("__reactContainer$"));
-      if (key) {
-        const container = el[key];
-        if (container?.stateNode?.current) {
-          return container.stateNode.current;
-        }
-        return container;
-      }
-    }
-    const reactRoot = document.querySelector("[data-reactroot]");
-    if (reactRoot) {
-      return getFiber(reactRoot);
-    }
-    return null;
-  }
-  function findAllInstances(rootFiber, componentType) {
-    const results = [];
-    function walk(fiber) {
-      if (!fiber) return;
-      if (fiber.type === componentType) {
-        results.push(fiber);
-      }
-      walk(fiber.child);
-      walk(fiber.sibling);
-    }
-    walk(rootFiber);
-    return results;
-  }
-
   // overlay/src/grouping.ts
   function cssEscape(cls) {
     if (typeof CSS !== "undefined" && CSS.escape) return CSS.escape(cls);
     return cls.replace(/([^\w-])/g, "\\$1");
   }
-  function buildSelector(tag, classes) {
+  function buildSelector2(tag, classes) {
     return tag.toLowerCase() + classes.map((c) => `.${cssEscape(c)}`).join("");
   }
   function parseClassList(className) {
@@ -1632,7 +1993,7 @@ ${pad}</${tag}>`;
     const tag = clickedEl.tagName;
     const fiber = getFiber(clickedEl);
     const boundary = fiber ? findComponentBoundary(fiber) : null;
-    const componentName = boundary?.componentName ?? null;
+    const componentName2 = boundary?.componentName ?? null;
     let exactMatches;
     if (boundary) {
       const rootFiber = getRootFiber();
@@ -1648,7 +2009,7 @@ ${pad}</${tag}>`;
           (n) => (typeof n.className === "string" ? n.className.trim() : "") === "" && !isInShadowHost(n, shadowHost2)
         );
       } else {
-        const selector = buildSelector(tag, classes);
+        const selector = buildSelector2(tag, classes);
         exactMatches = Array.from(
           document.querySelectorAll(selector)
         ).filter(
@@ -1663,7 +2024,7 @@ ${pad}</${tag}>`;
       exactMatch: exactMatches,
       nearGroups: [],
       // Not computed yet — lazy
-      componentName
+      componentName: componentName2
     };
   }
   function computeNearGroups(clickedEl, exactMatchSet, shadowHost2) {
@@ -2703,55 +3064,10 @@ ${pad}</${tag}>`;
     }
   }
 
-  // overlay/src/ws.ts
-  var socket = null;
-  var connected = false;
-  var handlers = [];
-  function connect(url = "ws://localhost:3333") {
-    socket = new WebSocket(url);
-    socket.addEventListener("open", () => {
-      connected = true;
-      send({ type: "REGISTER", role: "overlay" });
-      window.dispatchEvent(new CustomEvent("overlay-ws-connected"));
-    });
-    socket.addEventListener("close", () => {
-      connected = false;
-      socket = null;
-      window.dispatchEvent(new CustomEvent("overlay-ws-disconnected"));
-      setTimeout(() => connect(url), 3e3);
-    });
-    socket.addEventListener("message", (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        for (const handler of handlers) {
-          handler(data);
-        }
-      } catch (err) {
-        console.error("[tw-overlay] Failed to parse message:", err);
-      }
-    });
-    socket.addEventListener("error", (err) => {
-      console.error("[tw-overlay] WebSocket error:", err);
-    });
-  }
-  function send(data) {
-    if (connected && socket) {
-      socket.send(JSON.stringify(data));
-    } else {
-      console.warn("[tw-overlay] Cannot send \u2014 not connected");
-    }
-  }
-  function onMessage(handler) {
-    handlers.push(handler);
-  }
-  function sendTo(role, data) {
-    send({ ...data, to: role });
-  }
-
   // overlay/src/index.ts
   var shadowRoot;
   var shadowHost;
-  var active = false;
+  var active2 = false;
   var wasConnected = false;
   var tailwindConfigCache = null;
   var currentEquivalentNodes = [];
@@ -3210,7 +3526,7 @@ ${pad}</${tag}>`;
     hoverTooltipEl = null;
     lastHoveredEl = null;
   }
-  function showHoverPreview(el, componentName) {
+  function showHoverPreview(el, componentName2) {
     const rect = el.getBoundingClientRect();
     if (!hoverOutlineEl) {
       hoverOutlineEl = document.createElement("div");
@@ -3228,7 +3544,7 @@ ${pad}</${tag}>`;
     }
     const tag = el.tagName.toLowerCase();
     const cls = (typeof el.className === "string" ? el.className.trim().split(/\s+/)[0] : "") ?? "";
-    hoverTooltipEl.innerHTML = `<span class="ht-dim">&lt;</span>${componentName}<span class="ht-dim">&gt;</span> <span class="ht-dim">${tag}${cls ? `.${cls}` : ""}</span>`;
+    hoverTooltipEl.innerHTML = `<span class="ht-dim">&lt;</span>${componentName2}<span class="ht-dim">&gt;</span> <span class="ht-dim">${tag}${cls ? `.${cls}` : ""}</span>`;
     const tooltipHeight = 24;
     const ttTop = rect.top - tooltipHeight - 6;
     hoverTooltipEl.style.top = `${ttTop < 4 ? rect.bottom + 6 : ttTop}px`;
@@ -3584,7 +3900,7 @@ ${pad}</${tag}>`;
     const targetEl = target;
     const classString = typeof targetEl.className === "string" ? targetEl.className : "";
     const result = findExactMatches(targetEl, shadowHost);
-    const componentName = result.componentName ?? targetEl.tagName.toLowerCase();
+    const componentName2 = result.componentName ?? targetEl.tagName.toLowerCase();
     clearHighlights();
     for (const node of result.exactMatch) {
       highlightElement(node);
@@ -3592,7 +3908,7 @@ ${pad}</${tag}>`;
     const config = await fetchTailwindConfig();
     currentEquivalentNodes = result.exactMatch;
     currentTargetEl = targetEl;
-    currentBoundary = { componentName };
+    currentBoundary = { componentName: componentName2 };
     cachedNearGroups = null;
     currentInstances = result.exactMatch.map((node, i) => ({
       index: i,
@@ -3608,7 +3924,7 @@ ${pad}</${tag}>`;
     }
     sendTo("panel", {
       type: "ELEMENT_SELECTED",
-      componentName,
+      componentName: componentName2,
       instanceCount: result.exactMatch.length,
       classes: classString,
       tailwindConfig: config
@@ -3629,8 +3945,8 @@ ${pad}</${tag}>`;
   }
   var PANEL_OPEN_KEY = "tw-inspector-panel-open";
   function toggleInspect(btn) {
-    active = !active;
-    if (active) {
+    active2 = !active2;
+    if (active2) {
       btn.classList.add("active");
       sessionStorage.setItem(PANEL_OPEN_KEY, "1");
       const panelUrl = `${SERVER_ORIGIN}/panel`;
@@ -3721,12 +4037,14 @@ ${pad}</${tag}>`;
       wrapper.style.height = `${newHeight}px`;
     };
     const onResizeUp = () => {
+      iframe.style.pointerEvents = "";
       document.removeEventListener("mousemove", onResizeMove);
       document.removeEventListener("mouseup", onResizeUp);
       document.documentElement.style.cursor = "";
     };
     resizeHandle.addEventListener("mousedown", (e) => {
       e.preventDefault();
+      iframe.style.pointerEvents = "none";
       startY = e.clientY;
       startHeight = wrapper.offsetHeight;
       document.documentElement.style.cursor = "ns-resize";
@@ -3766,12 +4084,14 @@ ${pad}</${tag}>`;
       wrapper.style.height = `${Math.max(150, cornerStartHeight + dh)}px`;
     };
     const onCornerUp = () => {
+      iframe.style.pointerEvents = "";
       document.removeEventListener("mousemove", onCornerMove);
       document.removeEventListener("mouseup", onCornerUp);
       document.documentElement.style.cursor = "";
     };
     cornerHandle.addEventListener("mousedown", (e) => {
       e.preventDefault();
+      iframe.style.pointerEvents = "none";
       cornerStartX = e.clientX;
       cornerStartY = e.clientY;
       cornerStartWidth = wrapper.offsetWidth;
@@ -4025,7 +4345,11 @@ ${pad}</${tag}>`;
           }
         });
         showToast("Change staged");
-        commitPreview();
+        if (!state && !msg.oldClass && msg.newClass) {
+          applyPreview(currentEquivalentNodes, "", msg.newClass, SERVER_ORIGIN).then(() => commitPreview());
+        } else {
+          commitPreview();
+        }
       } else if (msg.type === "CLEAR_HIGHLIGHTS") {
         clearHighlights();
       } else if (msg.type === "SWITCH_CONTAINER") {
@@ -4064,7 +4388,11 @@ ${pad}</${tag}>`;
           }
         }
       } else if (msg.type === "CLOSE_PANEL") {
-        if (active) toggleInspect(btn);
+        if (active2) toggleInspect(btn);
+      } else if (msg.type === "COMPONENT_ARM") {
+        armInsert(msg, shadowHost);
+      } else if (msg.type === "COMPONENT_DISARM") {
+        cancelInsert();
       } else if (msg.type === "DESIGN_CLOSE") {
         const last = designCanvasWrappers.pop();
         if (last) {
@@ -4110,7 +4438,7 @@ ${pad}</${tag}>`;
       { capture: true, passive: true }
     );
     if (sessionStorage.getItem(PANEL_OPEN_KEY) === "1") {
-      active = true;
+      active2 = true;
       btn.classList.add("active");
       activeContainer.open(`${SERVER_ORIGIN}/panel`);
     }