@bitovi/vybit 0.5.0 → 0.7.0

package/overlay/dist/overlay.js

@@ -1121,607 +1121,205 @@
     });
   };
 
-  // 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");
+  // overlay/src/containers/ModalContainer.ts
+  var STORAGE_KEY = "tw-modal-bounds";
+  function loadBounds() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) return JSON.parse(stored);
+    } catch {
     }
+    return { top: 80, left: Math.max(0, window.innerWidth - 440), width: 400, height: 600 };
   }
-  function onMessage(handler) {
-    handlers.push(handler);
-  }
-  function sendTo(role, data) {
-    send({ ...data, to: role });
-  }
-
-  // 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;
+  function saveBounds(bounds) {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(bounds));
+    } catch {
     }
-    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;
-      }
+  var ModalContainer = class {
+    constructor(shadowRoot2) {
+      this.shadowRoot = shadowRoot2;
     }
-    const reactRoot = document.querySelector("[data-reactroot]");
-    if (reactRoot) {
-      return getFiber(reactRoot);
+    name = "modal";
+    host = null;
+    bounds = loadBounds();
+    open(panelUrl) {
+      if (this.host) return;
+      this.bounds = loadBounds();
+      const host = document.createElement("div");
+      host.className = "container-modal";
+      this.applyBounds(host);
+      host.style.position = "fixed";
+      host.style.zIndex = "999999";
+      host.style.background = "#1e1e2e";
+      host.style.borderRadius = "8px";
+      host.style.boxShadow = "0 8px 32px rgba(0,0,0,0.4)";
+      host.style.display = "flex";
+      host.style.flexDirection = "column";
+      host.style.overflow = "hidden";
+      host.style.pointerEvents = "auto";
+      const handle = document.createElement("div");
+      handle.style.cssText = `
+      height: 28px;
+      background: #181825;
+      cursor: move;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      user-select: none;
+    `;
+      handle.innerHTML = `<svg width="32" height="6" viewBox="0 0 32 6" fill="none"><rect x="0" y="0" width="32" height="2" rx="1" fill="#585b70"/><rect x="0" y="4" width="32" height="2" rx="1" fill="#585b70"/></svg>`;
+      this.setupDrag(handle, host);
+      host.appendChild(handle);
+      const iframe = document.createElement("iframe");
+      iframe.src = panelUrl;
+      iframe.allow = "microphone";
+      iframe.style.cssText = "flex:1; border:none; width:100%;";
+      host.appendChild(iframe);
+      const gripper = document.createElement("div");
+      gripper.style.cssText = `
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+      cursor: nwse-resize;
+    `;
+      gripper.innerHTML = '<span style="position:absolute;bottom:2px;right:4px;color:#585b70;font-size:10px;">\u25E2</span>';
+      this.setupResize(gripper, host, iframe);
+      host.appendChild(gripper);
+      this.shadowRoot.appendChild(host);
+      this.host = host;
     }
-    return null;
-  }
-  function findAllInstances(rootFiber, componentType) {
-    const results = [];
-    function walk(fiber) {
-      if (!fiber) return;
-      if (fiber.type === componentType) {
-        results.push(fiber);
+    close() {
+      if (this.host) {
+        this.host.remove();
+        this.host = null;
       }
-      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) {
-    return tag.toLowerCase() + classes.map((c) => `.${cssEscape(c)}`).join("");
-  }
-  function parseClassList(className) {
-    if (typeof className !== "string") return [];
-    return className.trim().split(/\s+/).filter(Boolean).sort();
-  }
-  function classDiff(refClasses, candidateClasses) {
-    const added = [];
-    const removed = [];
-    for (const c of candidateClasses) {
-      if (!refClasses.has(c)) added.push(c);
     }
-    for (const c of refClasses) {
-      if (!candidateClasses.has(c)) removed.push(c);
+    isOpen() {
+      return this.host !== null;
     }
-    added.sort();
-    removed.sort();
-    return { added, removed };
-  }
-  function diffLabel(added, removed) {
-    const parts = [];
-    for (const a of added) parts.push(`+${a}`);
-    for (const r of removed) parts.push(`-${r}`);
-    return parts.join(" ");
-  }
-  var MAX_DIFF = 10;
-  var MAX_CANDIDATES = 200;
-  function findExactMatches(clickedEl, shadowHost2) {
-    const classes = parseClassList(typeof clickedEl.className === "string" ? clickedEl.className : "");
-    const tag = clickedEl.tagName;
-    const fiber = getFiber(clickedEl);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
-    const componentName = boundary?.componentName ?? null;
-    let exactMatches;
-    if (boundary) {
-      const rootFiber = getRootFiber();
-      const allNodes = rootFiber ? collectComponentDOMNodes(rootFiber, boundary.componentType, tag) : [];
-      exactMatches = allNodes.filter(
-        (n) => n.tagName === tag && n.className === clickedEl.className
-      );
-    } else {
-      if (classes.length === 0) {
-        exactMatches = Array.from(
-          document.querySelectorAll(tag.toLowerCase())
-        ).filter(
-          (n) => (typeof n.className === "string" ? n.className.trim() : "") === "" && !isInShadowHost(n, shadowHost2)
-        );
-      } else {
-        const selector = buildSelector(tag, classes);
-        exactMatches = Array.from(
-          document.querySelectorAll(selector)
-        ).filter(
-          (n) => n.className === clickedEl.className && !isInShadowHost(n, shadowHost2)
-        );
-      }
+    applyBounds(el) {
+      el.style.top = `${this.bounds.top}px`;
+      el.style.left = `${this.bounds.left}px`;
+      el.style.width = `${this.bounds.width}px`;
+      el.style.height = `${this.bounds.height}px`;
     }
-    if (!exactMatches.includes(clickedEl)) {
-      exactMatches.unshift(clickedEl);
+    setupDrag(handle, host) {
+      let startX = 0, startY = 0, startLeft = 0, startTop = 0;
+      const onMove = (e) => {
+        this.bounds.left = startLeft + (e.clientX - startX);
+        this.bounds.top = startTop + (e.clientY - startY);
+        host.style.left = `${this.bounds.left}px`;
+        host.style.top = `${this.bounds.top}px`;
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        saveBounds(this.bounds);
+      };
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        startX = e.clientX;
+        startY = e.clientY;
+        startLeft = this.bounds.left;
+        startTop = this.bounds.top;
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      });
     }
-    return {
-      exactMatch: exactMatches,
-      nearGroups: [],
-      // Not computed yet — lazy
-      componentName
-    };
-  }
-  function computeNearGroups(clickedEl, exactMatchSet, shadowHost2) {
-    const rawClassName = typeof clickedEl.className === "string" ? clickedEl.className : "";
-    const classes = parseClassList(rawClassName);
-    const tag = clickedEl.tagName;
-    const refSet = new Set(classes);
-    if (classes.length === 0) return [];
-    const fiber = getFiber(clickedEl);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
-    let candidates;
-    if (boundary) {
-      const rootFiber = getRootFiber();
-      candidates = rootFiber ? collectComponentDOMNodes(rootFiber, boundary.componentType, tag) : [];
-      candidates = candidates.filter((n) => !exactMatchSet.has(n));
-    } else {
-      const seen = new Set(exactMatchSet);
-      candidates = [];
-      for (const cls of classes) {
-        const sel = `${tag.toLowerCase()}.${cssEscape(cls)}`;
-        for (const n of document.querySelectorAll(sel)) {
-          if (!seen.has(n) && !isInShadowHost(n, shadowHost2)) {
-            seen.add(n);
-            candidates.push(n);
-            if (candidates.length >= MAX_CANDIDATES) break;
-          }
-        }
-        if (candidates.length >= MAX_CANDIDATES) break;
-      }
-    }
-    const groupMap = /* @__PURE__ */ new Map();
-    for (const el of candidates) {
-      const candidateClasses = new Set(parseClassList(typeof el.className === "string" ? el.className : ""));
-      const { added, removed } = classDiff(refSet, candidateClasses);
-      const totalDiff = added.length + removed.length;
-      if (totalDiff === 0 || totalDiff > MAX_DIFF) continue;
-      const key = `+${added.join(",")}|-${removed.join(",")}`;
-      const existing = groupMap.get(key);
-      if (existing) {
-        existing.elements.push(el);
-      } else {
-        groupMap.set(key, { added, removed, elements: [el] });
-      }
-    }
-    const groups = [];
-    for (const [, g] of groupMap) {
-      groups.push({
-        label: diffLabel(g.added, g.removed),
-        added: g.added,
-        removed: g.removed,
-        elements: g.elements
+    setupResize(gripper, host, iframe) {
+      let startX = 0, startY = 0, startW = 0, startH = 0;
+      const onMove = (e) => {
+        this.bounds.width = Math.max(300, startW + (e.clientX - startX));
+        this.bounds.height = Math.max(200, startH + (e.clientY - startY));
+        host.style.width = `${this.bounds.width}px`;
+        host.style.height = `${this.bounds.height}px`;
+      };
+      const onUp = () => {
+        iframe.style.pointerEvents = "";
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        saveBounds(this.bounds);
+      };
+      gripper.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        iframe.style.pointerEvents = "none";
+        startX = e.clientX;
+        startY = e.clientY;
+        startW = this.bounds.width;
+        startH = this.bounds.height;
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
       });
     }
-    groups.sort((a, b) => {
-      const diffA = a.added.length + a.removed.length;
-      const diffB = b.added.length + b.removed.length;
-      if (diffA !== diffB) return diffA - diffB;
-      return b.elements.length - a.elements.length;
-    });
-    return groups;
-  }
-  function collectComponentDOMNodes(rootFiber, componentType, tagName) {
-    const instances = findAllInstances(rootFiber, componentType);
-    const results = [];
-    for (const inst of instances) {
-      collectHostNodes(inst.child, tagName, results);
-    }
-    return results;
-  }
-  function collectHostNodes(fiber, tagName, out) {
-    if (!fiber) return;
-    if (fiber.tag === 5 && fiber.stateNode instanceof HTMLElement) {
-      if (fiber.stateNode.tagName === tagName) {
-        out.push(fiber.stateNode);
-      }
-    }
-    collectHostNodes(fiber.child, tagName, out);
-    collectHostNodes(fiber.sibling, tagName, out);
-  }
-  function isInShadowHost(el, shadowHost2) {
-    if (!shadowHost2) return false;
-    return shadowHost2.contains(el);
-  }
+  };
 
-  // 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}>`;
+  // overlay/src/containers/PopoverContainer.ts
+  var PopoverContainer = class {
+    constructor(shadowRoot2) {
+      this.shadowRoot = shadowRoot2;
     }
-    if (ancestorIndex >= ancestors.length - 1) {
-      return `${pad}<${tag}${attrs} />`;
+    name = "popover";
+    host = null;
+    open(panelUrl) {
+      if (this.host) return;
+      const host = document.createElement("div");
+      host.className = "container-popover";
+      host.style.cssText = `
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 400px;
+      height: 100vh;
+      z-index: 999999;
+      background: #1e1e2e;
+      box-shadow: -4px 0 24px rgba(0,0,0,0.3);
+      pointer-events: auto;
+    `;
+      const iframe = document.createElement("iframe");
+      iframe.src = panelUrl;
+      iframe.allow = "microphone";
+      iframe.style.cssText = "width:100%; height:100%; border:none;";
+      host.appendChild(iframe);
+      this.shadowRoot.appendChild(host);
+      this.host = host;
     }
-    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}  ...
-`;
+    close() {
+      if (this.host) {
+        this.host.remove();
+        this.host = null;
       }
     }
-    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}>`;
+    isOpen() {
+      return this.host !== null;
     }
-    if (el.children.length > 0) {
-      return `${pad}<${tag}${attrs}>
-${pad}  ...
-${pad}</${tag}>`;
+  };
+
+  // overlay/src/containers/PopupContainer.ts
+  var PopupContainer = class {
+    name = "popup";
+    popup = null;
+    open(panelUrl) {
+      if (this.popup && !this.popup.closed) {
+        this.popup.focus();
+        return;
+      }
+      this.popup = window.open(panelUrl, "tw-panel", "popup,width=420,height=700");
     }
-    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 || "";
+    close() {
+      if (this.popup && !this.popup.closed) {
+        this.popup.close();
       }
+      this.popup = null;
     }
-    text = text.trim();
-    if (text.length > 60) text = text.slice(0, 57) + "...";
-    return text;
-  }
-
-  // overlay/src/patcher.ts
-  var previewState = null;
-  var previewStyleEl = null;
-  var committedStyleEl = null;
-  var previewGeneration = 0;
-  async function applyPreview(elements, oldClass, newClass, serverOrigin) {
-    const gen = ++previewGeneration;
-    if (!previewState) {
-      previewState = {
-        elements,
-        originalClasses: elements.map((n) => n.className)
-      };
-    }
-    if (newClass) {
-      try {
-        const res = await fetch(`${serverOrigin}/css`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ classes: [newClass] })
-        });
-        if (gen !== previewGeneration) return;
-        const { css } = await res.json();
-        if (gen !== previewGeneration) return;
-        if (!previewStyleEl) {
-          previewStyleEl = document.createElement("style");
-          previewStyleEl.setAttribute("data-tw-preview", "");
-          document.head.appendChild(previewStyleEl);
-        }
-        previewStyleEl.textContent = css;
-      } catch {
-      }
-    }
-    if (gen !== previewGeneration) return;
-    if (previewState) {
-      for (let i = 0; i < previewState.elements.length; i++) {
-        previewState.elements[i].className = previewState.originalClasses[i];
-      }
-    }
-    for (const node of elements) {
-      if (oldClass) node.classList.remove(oldClass);
-      if (newClass) node.classList.add(newClass);
-    }
-  }
-  function revertPreview() {
-    previewGeneration++;
-    if (previewState) {
-      for (let i = 0; i < previewState.elements.length; i++) {
-        previewState.elements[i].className = previewState.originalClasses[i];
-      }
-      previewState = null;
-    }
-    previewStyleEl?.remove();
-    previewStyleEl = null;
-  }
-  function getPreviewState() {
-    return previewState;
-  }
-  function commitPreview() {
-    previewGeneration++;
-    previewState = null;
-    if (previewStyleEl) {
-      const css = previewStyleEl.textContent || "";
-      if (css) {
-        if (!committedStyleEl) {
-          committedStyleEl = document.createElement("style");
-          committedStyleEl.setAttribute("data-tw-committed", "");
-          document.head.appendChild(committedStyleEl);
-        }
-        committedStyleEl.textContent += css;
-      }
-      previewStyleEl.remove();
-      previewStyleEl = null;
-    }
-  }
-
-  // overlay/src/containers/PopoverContainer.ts
-  var PopoverContainer = class {
-    constructor(shadowRoot2) {
-      this.shadowRoot = shadowRoot2;
-    }
-    name = "popover";
-    host = null;
-    open(panelUrl) {
-      if (this.host) return;
-      const host = document.createElement("div");
-      host.className = "container-popover";
-      host.style.cssText = `
-      position: fixed;
-      top: 0;
-      right: 0;
-      width: 400px;
-      height: 100vh;
-      z-index: 999999;
-      background: #1e1e2e;
-      box-shadow: -4px 0 24px rgba(0,0,0,0.3);
-      pointer-events: auto;
-    `;
-      const iframe = document.createElement("iframe");
-      iframe.src = panelUrl;
-      iframe.style.cssText = "width:100%; height:100%; border:none;";
-      host.appendChild(iframe);
-      this.shadowRoot.appendChild(host);
-      this.host = host;
-    }
-    close() {
-      if (this.host) {
-        this.host.remove();
-        this.host = null;
-      }
-    }
-    isOpen() {
-      return this.host !== null;
-    }
-  };
-
-  // overlay/src/containers/ModalContainer.ts
-  var STORAGE_KEY = "tw-modal-bounds";
-  function loadBounds() {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) return JSON.parse(stored);
-    } catch {
-    }
-    return { top: 80, left: Math.max(0, window.innerWidth - 440), width: 400, height: 600 };
-  }
-  function saveBounds(bounds) {
-    try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(bounds));
-    } catch {
-    }
-  }
-  var ModalContainer = class {
-    constructor(shadowRoot2) {
-      this.shadowRoot = shadowRoot2;
-    }
-    name = "modal";
-    host = null;
-    bounds = loadBounds();
-    open(panelUrl) {
-      if (this.host) return;
-      this.bounds = loadBounds();
-      const host = document.createElement("div");
-      host.className = "container-modal";
-      this.applyBounds(host);
-      host.style.position = "fixed";
-      host.style.zIndex = "999999";
-      host.style.background = "#1e1e2e";
-      host.style.borderRadius = "8px";
-      host.style.boxShadow = "0 8px 32px rgba(0,0,0,0.4)";
-      host.style.display = "flex";
-      host.style.flexDirection = "column";
-      host.style.overflow = "hidden";
-      host.style.pointerEvents = "auto";
-      const handle = document.createElement("div");
-      handle.style.cssText = `
-      height: 28px;
-      background: #181825;
-      cursor: move;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      user-select: none;
-    `;
-      handle.innerHTML = '<span style="color:#585b70;font-size:11px;letter-spacing:2px;">\u22EF\u22EF\u22EF</span>';
-      this.setupDrag(handle, host);
-      host.appendChild(handle);
-      const iframe = document.createElement("iframe");
-      iframe.src = panelUrl;
-      iframe.style.cssText = "flex:1; border:none; width:100%;";
-      host.appendChild(iframe);
-      const gripper = document.createElement("div");
-      gripper.style.cssText = `
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 16px;
-      height: 16px;
-      cursor: nwse-resize;
-    `;
-      gripper.innerHTML = '<span style="position:absolute;bottom:2px;right:4px;color:#585b70;font-size:10px;">\u25E2</span>';
-      this.setupResize(gripper, host, iframe);
-      host.appendChild(gripper);
-      this.shadowRoot.appendChild(host);
-      this.host = host;
-    }
-    close() {
-      if (this.host) {
-        this.host.remove();
-        this.host = null;
-      }
-    }
-    isOpen() {
-      return this.host !== null;
-    }
-    applyBounds(el) {
-      el.style.top = `${this.bounds.top}px`;
-      el.style.left = `${this.bounds.left}px`;
-      el.style.width = `${this.bounds.width}px`;
-      el.style.height = `${this.bounds.height}px`;
-    }
-    setupDrag(handle, host) {
-      let startX = 0, startY = 0, startLeft = 0, startTop = 0;
-      const onMove = (e) => {
-        this.bounds.left = startLeft + (e.clientX - startX);
-        this.bounds.top = startTop + (e.clientY - startY);
-        host.style.left = `${this.bounds.left}px`;
-        host.style.top = `${this.bounds.top}px`;
-      };
-      const onUp = () => {
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-        saveBounds(this.bounds);
-      };
-      handle.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        startX = e.clientX;
-        startY = e.clientY;
-        startLeft = this.bounds.left;
-        startTop = this.bounds.top;
-        document.addEventListener("mousemove", onMove);
-        document.addEventListener("mouseup", onUp);
-      });
-    }
-    setupResize(gripper, host, iframe) {
-      let startX = 0, startY = 0, startW = 0, startH = 0;
-      const onMove = (e) => {
-        this.bounds.width = Math.max(300, startW + (e.clientX - startX));
-        this.bounds.height = Math.max(200, startH + (e.clientY - startY));
-        host.style.width = `${this.bounds.width}px`;
-        host.style.height = `${this.bounds.height}px`;
-      };
-      const onUp = () => {
-        iframe.style.pointerEvents = "";
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
-        saveBounds(this.bounds);
-      };
-      gripper.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        iframe.style.pointerEvents = "none";
-        startX = e.clientX;
-        startY = e.clientY;
-        startW = this.bounds.width;
-        startH = this.bounds.height;
-        document.addEventListener("mousemove", onMove);
-        document.addEventListener("mouseup", onUp);
-      });
-    }
-  };
+    isOpen() {
+      return this.popup !== null && !this.popup.closed;
+    }
+  };
 
   // overlay/src/containers/SidebarContainer.ts
   var SidebarContainer = class {
@@ -1794,76 +1392,477 @@ ${pad}</${tag}>`;
       host.appendChild(resizeHandle);
       const iframe = document.createElement("iframe");
       iframe.src = panelUrl;
+      iframe.allow = "microphone";
       iframe.style.cssText = "flex:1; border:none; height:100%;";
       host.appendChild(iframe);
       this.shadowRoot.appendChild(host);
       this.host = host;
     }
-    close() {
-      if (this.host) {
-        this.host.remove();
-        this.host = null;
-        if (this.pageWrapper) {
-          const children = Array.from(this.pageWrapper.childNodes);
-          const shadowHost2 = document.getElementById("tw-visual-editor-host");
-          for (const node of children) {
-            if (shadowHost2 && shadowHost2.parentNode) {
-              shadowHost2.parentNode.insertBefore(node, shadowHost2);
-            } else {
-              document.body.appendChild(node);
-            }
-          }
-          this.pageWrapper.remove();
-          this.pageWrapper = null;
+    close() {
+      if (this.host) {
+        this.host.remove();
+        this.host = null;
+        if (this.pageWrapper) {
+          const children = Array.from(this.pageWrapper.childNodes);
+          const shadowHost2 = document.getElementById("tw-visual-editor-host");
+          for (const node of children) {
+            if (shadowHost2 && shadowHost2.parentNode) {
+              shadowHost2.parentNode.insertBefore(node, shadowHost2);
+            } else {
+              document.body.appendChild(node);
+            }
+          }
+          this.pageWrapper.remove();
+          this.pageWrapper = null;
+        }
+        document.body.style.overflow = this.originalBodyOverflow || "";
+      }
+    }
+    isOpen() {
+      return this.host !== null;
+    }
+    setupResize(handle, host) {
+      let startX = 0, startW = 0;
+      const onMove = (e) => {
+        this.width = Math.max(280, startW - (e.clientX - startX));
+        host.style.width = `${this.width}px`;
+        document.documentElement.style.paddingRight = `${this.width}px`;
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+      handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        startX = e.clientX;
+        startW = this.width;
+        document.addEventListener("mousemove", onMove);
+        document.addEventListener("mouseup", onUp);
+      });
+    }
+  };
+
+  // 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) {
+    return tag.toLowerCase() + classes.map((c) => `.${cssEscape(c)}`).join("");
+  }
+  function parseClassList(className) {
+    if (typeof className !== "string") return [];
+    return className.trim().split(/\s+/).filter(Boolean).sort();
+  }
+  function classDiff(refClasses, candidateClasses) {
+    const added = [];
+    const removed = [];
+    for (const c of candidateClasses) {
+      if (!refClasses.has(c)) added.push(c);
+    }
+    for (const c of refClasses) {
+      if (!candidateClasses.has(c)) removed.push(c);
+    }
+    added.sort();
+    removed.sort();
+    return { added, removed };
+  }
+  function diffLabel(added, removed) {
+    const parts = [];
+    for (const a of added) parts.push(`+${a}`);
+    for (const r of removed) parts.push(`-${r}`);
+    return parts.join(" ");
+  }
+  var MAX_DIFF = 10;
+  var MAX_CANDIDATES = 200;
+  function findExactMatches(clickedEl, shadowHost2) {
+    const classes = parseClassList(typeof clickedEl.className === "string" ? clickedEl.className : "");
+    const tag = clickedEl.tagName;
+    const fiber = getFiber(clickedEl);
+    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    const componentName = boundary?.componentName ?? null;
+    let exactMatches;
+    if (boundary) {
+      const rootFiber = getRootFiber();
+      const allNodes = rootFiber ? collectComponentDOMNodes(rootFiber, boundary.componentType, tag) : [];
+      exactMatches = allNodes.filter(
+        (n) => n.tagName === tag && n.className === clickedEl.className
+      );
+    } else {
+      if (classes.length === 0) {
+        exactMatches = Array.from(
+          document.querySelectorAll(tag.toLowerCase())
+        ).filter(
+          (n) => (typeof n.className === "string" ? n.className.trim() : "") === "" && !isInShadowHost(n, shadowHost2)
+        );
+      } else {
+        const selector = buildSelector(tag, classes);
+        exactMatches = Array.from(
+          document.querySelectorAll(selector)
+        ).filter(
+          (n) => n.className === clickedEl.className && !isInShadowHost(n, shadowHost2)
+        );
+      }
+    }
+    if (!exactMatches.includes(clickedEl)) {
+      exactMatches.unshift(clickedEl);
+    }
+    return {
+      exactMatch: exactMatches,
+      nearGroups: [],
+      // Not computed yet — lazy
+      componentName
+    };
+  }
+  function computeNearGroups(clickedEl, exactMatchSet, shadowHost2) {
+    const rawClassName = typeof clickedEl.className === "string" ? clickedEl.className : "";
+    const classes = parseClassList(rawClassName);
+    const tag = clickedEl.tagName;
+    const refSet = new Set(classes);
+    if (classes.length === 0) return [];
+    const fiber = getFiber(clickedEl);
+    const boundary = fiber ? findComponentBoundary(fiber) : null;
+    let candidates;
+    if (boundary) {
+      const rootFiber = getRootFiber();
+      candidates = rootFiber ? collectComponentDOMNodes(rootFiber, boundary.componentType, tag) : [];
+      candidates = candidates.filter((n) => !exactMatchSet.has(n));
+    } else {
+      const seen = new Set(exactMatchSet);
+      candidates = [];
+      for (const cls of classes) {
+        const sel = `${tag.toLowerCase()}.${cssEscape(cls)}`;
+        for (const n of document.querySelectorAll(sel)) {
+          if (!seen.has(n) && !isInShadowHost(n, shadowHost2)) {
+            seen.add(n);
+            candidates.push(n);
+            if (candidates.length >= MAX_CANDIDATES) break;
+          }
+        }
+        if (candidates.length >= MAX_CANDIDATES) break;
+      }
+    }
+    const groupMap = /* @__PURE__ */ new Map();
+    for (const el of candidates) {
+      const candidateClasses = new Set(parseClassList(typeof el.className === "string" ? el.className : ""));
+      const { added, removed } = classDiff(refSet, candidateClasses);
+      const totalDiff = added.length + removed.length;
+      if (totalDiff === 0 || totalDiff > MAX_DIFF) continue;
+      const key = `+${added.join(",")}|-${removed.join(",")}`;
+      const existing = groupMap.get(key);
+      if (existing) {
+        existing.elements.push(el);
+      } else {
+        groupMap.set(key, { added, removed, elements: [el] });
+      }
+    }
+    const groups = [];
+    for (const [, g] of groupMap) {
+      groups.push({
+        label: diffLabel(g.added, g.removed),
+        added: g.added,
+        removed: g.removed,
+        elements: g.elements
+      });
+    }
+    groups.sort((a, b) => {
+      const diffA = a.added.length + a.removed.length;
+      const diffB = b.added.length + b.removed.length;
+      if (diffA !== diffB) return diffA - diffB;
+      return b.elements.length - a.elements.length;
+    });
+    return groups;
+  }
+  function collectComponentDOMNodes(rootFiber, componentType, tagName) {
+    const instances = findAllInstances(rootFiber, componentType);
+    const results = [];
+    for (const inst of instances) {
+      collectHostNodes(inst.child, tagName, results);
+    }
+    return results;
+  }
+  function collectHostNodes(fiber, tagName, out) {
+    if (!fiber) return;
+    if (fiber.tag === 5 && fiber.stateNode instanceof HTMLElement) {
+      if (fiber.stateNode.tagName === tagName) {
+        out.push(fiber.stateNode);
+      }
+    }
+    collectHostNodes(fiber.child, tagName, out);
+    collectHostNodes(fiber.sibling, tagName, out);
+  }
+  function isInShadowHost(el, shadowHost2) {
+    if (!shadowHost2) return false;
+    return shadowHost2.contains(el);
+  }
+
+  // overlay/src/patcher.ts
+  var previewState = null;
+  var previewStyleEl = null;
+  var committedStyleEl = null;
+  var previewGeneration = 0;
+  async function applyPreview(elements, oldClass, newClass, serverOrigin) {
+    const gen = ++previewGeneration;
+    if (!previewState) {
+      previewState = {
+        elements,
+        originalClasses: elements.map((n) => n.className)
+      };
+    }
+    if (newClass) {
+      try {
+        const res = await fetch(`${serverOrigin}/css`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ classes: [newClass] })
+        });
+        if (gen !== previewGeneration) return;
+        const { css } = await res.json();
+        if (gen !== previewGeneration) return;
+        if (!previewStyleEl) {
+          previewStyleEl = document.createElement("style");
+          previewStyleEl.setAttribute("data-tw-preview", "");
+          document.head.appendChild(previewStyleEl);
         }
-        document.body.style.overflow = this.originalBodyOverflow || "";
+        previewStyleEl.textContent = css;
+      } catch {
       }
     }
-    isOpen() {
-      return this.host !== null;
+    if (gen !== previewGeneration) return;
+    if (previewState) {
+      for (let i = 0; i < previewState.elements.length; i++) {
+        previewState.elements[i].className = previewState.originalClasses[i];
+      }
     }
-    setupResize(handle, host) {
-      let startX = 0, startW = 0;
-      const onMove = (e) => {
-        this.width = Math.max(280, startW - (e.clientX - startX));
-        host.style.width = `${this.width}px`;
-        document.documentElement.style.paddingRight = `${this.width}px`;
-      };
-      const onUp = () => {
-        document.removeEventListener("mousemove", onMove);
-        document.removeEventListener("mouseup", onUp);
+    for (const node of elements) {
+      if (oldClass) node.classList.remove(oldClass);
+      if (newClass) node.classList.add(newClass);
+    }
+  }
+  async function applyPreviewBatch(elements, pairs, serverOrigin) {
+    const gen = ++previewGeneration;
+    if (!previewState) {
+      previewState = {
+        elements,
+        originalClasses: elements.map((n) => n.className)
       };
-      handle.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        startX = e.clientX;
-        startW = this.width;
-        document.addEventListener("mousemove", onMove);
-        document.addEventListener("mouseup", onUp);
-      });
     }
-  };
-
-  // overlay/src/containers/PopupContainer.ts
-  var PopupContainer = class {
-    name = "popup";
-    popup = null;
-    open(panelUrl) {
-      if (this.popup && !this.popup.closed) {
-        this.popup.focus();
-        return;
+    const newClasses = pairs.map((p) => p.newClass).filter(Boolean);
+    if (newClasses.length > 0) {
+      try {
+        const res = await fetch(`${serverOrigin}/css`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ classes: newClasses })
+        });
+        if (gen !== previewGeneration) return;
+        const { css } = await res.json();
+        if (gen !== previewGeneration) return;
+        if (!previewStyleEl) {
+          previewStyleEl = document.createElement("style");
+          previewStyleEl.setAttribute("data-tw-preview", "");
+          document.head.appendChild(previewStyleEl);
+        }
+        previewStyleEl.textContent = css;
+      } catch {
       }
-      this.popup = window.open(panelUrl, "tw-panel", "popup,width=420,height=700");
     }
-    close() {
-      if (this.popup && !this.popup.closed) {
-        this.popup.close();
+    if (gen !== previewGeneration) return;
+    if (previewState) {
+      for (let i = 0; i < previewState.elements.length; i++) {
+        previewState.elements[i].className = previewState.originalClasses[i];
       }
-      this.popup = null;
     }
-    isOpen() {
-      return this.popup !== null && !this.popup.closed;
+    for (const node of elements) {
+      for (const { oldClass, newClass } of pairs) {
+        if (oldClass) node.classList.remove(oldClass);
+        if (newClass) node.classList.add(newClass);
+      }
     }
-  };
+  }
+  function revertPreview() {
+    previewGeneration++;
+    if (previewState) {
+      for (let i = 0; i < previewState.elements.length; i++) {
+        previewState.elements[i].className = previewState.originalClasses[i];
+      }
+      previewState = null;
+    }
+    previewStyleEl?.remove();
+    previewStyleEl = null;
+  }
+  function getPreviewState() {
+    return previewState;
+  }
+  function commitPreview() {
+    previewGeneration++;
+    previewState = null;
+    if (previewStyleEl) {
+      const css = previewStyleEl.textContent || "";
+      if (css) {
+        if (!committedStyleEl) {
+          committedStyleEl = document.createElement("style");
+          committedStyleEl.setAttribute("data-tw-committed", "");
+          document.head.appendChild(committedStyleEl);
+        }
+        committedStyleEl.textContent += css;
+      }
+      previewStyleEl.remove();
+      previewStyleEl = null;
+    }
+  }
 
   // node_modules/html-to-image/es/util.js
   function resolveUrl(url, baseUrl) {
@@ -2704,6 +2703,51 @@ ${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;
@@ -2886,11 +2930,40 @@ ${pad}</${tag}>`;
     z-index: 999998;
   }
   /* \u2500\u2500 Group picker popover (replaces instance picker) \u2500\u2500 */
+  .el-group-exact {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    font-size: 11px;
+    color: #A0ABAB;
+  }
+  .el-group-exact .el-count-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    padding: 1px 6px;
+    font-size: 10px;
+    font-weight: 600;
+    color: #fff;
+    background: #00848B;
+    border-radius: 9999px;
+  }
+  .el-group-divider {
+    padding: 6px 12px 4px;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #687879;
+    border-top: 1px solid #DFE2E2;
+  }
   .el-group-empty {
     padding: 12px 14px;
     font-size: 11px;
     color: #687879;
-    text-align: center;
+    text-align: left;
   }
   .el-group-row {
     display: flex;
@@ -3187,11 +3260,8 @@ ${pad}</${tag}>`;
     const label = boundary?.componentName ?? target.tagName.toLowerCase();
     showHoverPreview(target, label);
   }
-  var PENCIL_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
-  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-</svg>`;
-  var RESELECT_SVG = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 12l2.5 6 1.5-3 3-1.5z"/></svg>`;
+  var PENCIL_SVG = `<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M15,0H1C0.448,0,0,0.448,0,1v9c0,0.552,0.448,1,1,1h2.882l-1.776,3.553c-0.247,0.494-0.047,1.095,0.447,1.342C2.696,15.966,2.849,16,2.999,16c0.367,0,0.72-0.202,0.896-0.553L4.618,14h6.764l0.724,1.447C12.281,15.798,12.634,16,13.001,16c0.15,0,0.303-0.034,0.446-0.105c0.494-0.247,0.694-0.848,0.447-1.342L12.118,11H15c0.552,0,1-0.448,1-1V1C16,0.448,15.552,0,15,0z M5.618,12l0.5-1h3.764l0.5,1H5.618z M14,9H2V2h12V9z"/></svg>`;
+  var RESELECT_SVG = `<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M14,0H2C.895,0,0,.895,0,2V14c0,1.105,.895,2,2,2H6c.552,0,1-.448,1-1h0c0-.552-.448-1-1-1H2V2H14V6c0,.552,.448,1,1,1h0c.552,0,1-.448,1-1V2c0-1.105-.895-2-2-2Z"/><path d="M12.043,10.629l2.578-.644c.268-.068,.43-.339,.362-.607-.043-.172-.175-.308-.345-.358l-7-2c-.175-.051-.363-.002-.492,.126-.128,.129-.177,.317-.126,.492l2,7c.061,.214,.257,.362,.48,.362h.009c.226-.004,.421-.16,.476-.379l.644-2.578,3.664,3.664c.397,.384,1.03,.373,1.414-.025,.374-.388,.374-1.002,0-1.389l-3.664-3.664Z"/></svg>`;
   async function positionWithFlip(anchor, floating, placement = "top-start") {
     const { x, y } = await computePosition2(anchor, floating, {
       placement,
@@ -3267,7 +3337,9 @@ ${pad}</${tag}>`;
   }
   function showGroupPicker(anchorBtn, onClose, onCountChange) {
     if (pickerCloseHandler) {
-      document.removeEventListener("click", pickerCloseHandler, { capture: true });
+      document.removeEventListener("click", pickerCloseHandler, {
+        capture: true
+      });
       pickerCloseHandler = null;
     }
     pickerEl?.remove();
@@ -3286,13 +3358,28 @@ ${pad}</${tag}>`;
     header.className = "el-picker-header";
     const title = document.createElement("span");
     title.className = "el-picker-title";
-    title.textContent = "Similar elements";
+    title.textContent = "Selection";
     header.appendChild(title);
     picker.appendChild(header);
+    const exactCount = currentEquivalentNodes.length;
+    const exactRow = document.createElement("div");
+    exactRow.className = "el-group-exact";
+    const chip = document.createElement("span");
+    chip.className = "el-count-chip";
+    chip.textContent = String(exactCount);
+    exactRow.appendChild(chip);
+    const exactLabel = document.createElement("span");
+    exactLabel.textContent = `exact match${exactCount !== 1 ? "es" : ""} selected`;
+    exactRow.appendChild(exactLabel);
+    picker.appendChild(exactRow);
+    const divider = document.createElement("div");
+    divider.className = "el-group-divider";
+    divider.textContent = "Similar";
+    picker.appendChild(divider);
     if (groups.length === 0) {
       const empty = document.createElement("div");
       empty.className = "el-group-empty";
-      empty.textContent = "No similar elements found";
+      empty.textContent = "No additional similar elements found";
       picker.appendChild(empty);
     } else {
       let clearPreviewHighlights2 = function() {
@@ -3341,8 +3428,10 @@ ${pad}</${tag}>`;
         const diff = document.createElement("span");
         diff.className = "el-group-diff";
         const parts = [];
-        for (const a of group.added) parts.push(`<span class="diff-add">+${a}</span>`);
-        for (const r of group.removed) parts.push(`<span class="diff-rem">-${r}</span>`);
+        for (const a of group.added)
+          parts.push(`<span class="diff-add">+${a}</span>`);
+        for (const r of group.removed)
+          parts.push(`<span class="diff-rem">-${r}</span>`);
         diff.innerHTML = parts.join(" ");
         row.appendChild(cb);
         row.appendChild(count);
@@ -3370,7 +3459,9 @@ ${pad}</${tag}>`;
     const removePicker = () => {
       shadowRoot.querySelectorAll(".highlight-preview").forEach((el) => el.remove());
       if (pickerCloseHandler) {
-        document.removeEventListener("click", pickerCloseHandler, { capture: true });
+        document.removeEventListener("click", pickerCloseHandler, {
+          capture: true
+        });
         pickerCloseHandler = null;
       }
       pickerEl?.remove();
@@ -3429,7 +3520,7 @@ ${pad}</${tag}>`;
     const screenshotRow = document.createElement("button");
     screenshotRow.className = "draw-popover-item";
     screenshotRow.innerHTML = `
-    <span class="draw-popover-icon">\u{1F4F7}</span>
+    <span class="draw-popover-icon"><svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><rect x="4" y="4" width="8" height="8" rx="1" ry="1"/><path d="M2,2H6V0H2C.895,0,0,.895,0,2V6H2V2Z"/><path d="M14,0h-4V2h4V6h2V2c0-1.105-.895-2-2-2Z"/><path d="M14,14h-4v2h4c1.105,0,2-.895,2-2v-4h-2v4Z"/><path d="M2,10H0v4c0,1.105,.895,2,2,2H6v-2H2v-4Z"/></svg></span>
     <span class="draw-popover-label">Screenshot & Annotate</span>
   `;
     screenshotRow.addEventListener("click", (e) => {
@@ -3483,7 +3574,10 @@ ${pad}</${tag}>`;
   async function clickHandler(e) {
     const composed = e.composedPath();
     if (composed.some((el) => el === shadowHost)) return;
-    if (composed.some((el) => el instanceof HTMLElement && el.hasAttribute("data-tw-design-canvas"))) return;
+    if (composed.some(
+      (el) => el instanceof HTMLElement && el.hasAttribute("data-tw-design-canvas")
+    ))
+      return;
     e.preventDefault();
     e.stopPropagation();
     const target = e.target;
@@ -3495,7 +3589,6 @@ ${pad}</${tag}>`;
     for (const node of result.exactMatch) {
       highlightElement(node);
     }
-    console.log(`[overlay] ${componentName} \u2014 ${result.exactMatch.length} exact matches highlighted`);
     const config = await fetchTailwindConfig();
     currentEquivalentNodes = result.exactMatch;
     currentTargetEl = targetEl;
@@ -3590,6 +3683,7 @@ ${pad}</${tag}>`;
   `;
     const iframe = document.createElement("iframe");
     iframe.src = `${SERVER_ORIGIN}/panel/?mode=design`;
+    iframe.allow = "microphone";
     iframe.style.cssText = `
     width: 100%;
     height: 100%;
@@ -3702,7 +3796,12 @@ ${pad}</${tag}>`;
       default:
         targetEl.insertAdjacentElement("beforebegin", wrapper);
     }
-    designCanvasWrappers.push({ wrapper, replacedNodes: null, parent: null, anchor: null });
+    designCanvasWrappers.push({
+      wrapper,
+      replacedNodes: null,
+      parent: null,
+      anchor: null
+    });
     iframe.addEventListener("load", () => {
       const contextMsg = {
         type: "ELEMENT_CONTEXT",
@@ -3731,23 +3830,36 @@ ${pad}</${tag}>`;
       return;
     }
     if (!areSiblings(currentEquivalentNodes)) {
-      showToast("Screenshot & Annotate requires all selected elements to be siblings in the DOM.");
+      showToast(
+        "Screenshot & Annotate requires all selected elements to be siblings in the DOM."
+      );
       return;
     }
     let screenshot;
     let screenshotWidth;
     let screenshotHeight;
     try {
-      ({ dataUrl: screenshot, width: screenshotWidth, height: screenshotHeight } = await captureRegion(currentEquivalentNodes));
+      ({
+        dataUrl: screenshot,
+        width: screenshotWidth,
+        height: screenshotHeight
+      } = await captureRegion(currentEquivalentNodes));
     } catch (err) {
       showToast("Screenshot capture failed");
       console.error("[overlay] captureRegion error:", err);
       return;
     }
     const parent = currentEquivalentNodes[0].parentElement;
-    const anchor = currentEquivalentNodes[0].nextSibling;
+    if (!parent) {
+      showToast("Cannot find parent element");
+      return;
+    }
+    const marker = document.createComment("tw-placeholder");
+    parent.insertBefore(marker, currentEquivalentNodes[0]);
     const firstStyle = getComputedStyle(currentEquivalentNodes[0]);
-    const lastStyle = getComputedStyle(currentEquivalentNodes[currentEquivalentNodes.length - 1]);
+    const lastStyle = getComputedStyle(
+      currentEquivalentNodes[currentEquivalentNodes.length - 1]
+    );
     const marginTop = firstStyle.marginTop;
     const marginBottom = lastStyle.marginBottom;
     const marginLeft = firstStyle.marginLeft;
@@ -3789,12 +3901,9 @@ ${pad}</${tag}>`;
     display: block;
   `;
     wrapper.appendChild(iframe);
-    if (anchor) {
-      parent.insertBefore(wrapper, anchor);
-    } else {
-      parent.appendChild(wrapper);
-    }
-    designCanvasWrappers.push({ wrapper, replacedNodes, parent, anchor });
+    parent.insertBefore(wrapper, marker);
+    marker.remove();
+    designCanvasWrappers.push({ wrapper, replacedNodes, parent, anchor: wrapper.nextSibling });
     iframe.addEventListener("load", () => {
       const contextMsg = {
         type: "ELEMENT_CONTEXT",
@@ -3867,9 +3976,18 @@ ${pad}</${tag}>`;
           setSelectMode(false);
         }
       } else if (msg.type === "PATCH_PREVIEW" && currentEquivalentNodes.length > 0) {
-        applyPreview(currentEquivalentNodes, msg.oldClass, msg.newClass, SERVER_ORIGIN);
+        applyPreview(
+          currentEquivalentNodes,
+          msg.oldClass,
+          msg.newClass,
+          SERVER_ORIGIN
+        );
+      } else if (msg.type === "PATCH_PREVIEW_BATCH" && currentEquivalentNodes.length > 0) {
+        applyPreviewBatch(currentEquivalentNodes, msg.pairs, SERVER_ORIGIN);
       } else if (msg.type === "PATCH_REVERT") {
         revertPreview();
+      } else if (msg.type === "PATCH_REVERT_STAGED" && currentEquivalentNodes.length > 0) {
+        applyPreview(currentEquivalentNodes, msg.oldClass, msg.newClass, SERVER_ORIGIN).then(() => commitPreview());
       } else if (msg.type === "PATCH_STAGE" && currentTargetEl && currentBoundary) {
         const state = getPreviewState();
         const originalClassMap = /* @__PURE__ */ new Map();
@@ -3880,7 +3998,12 @@ ${pad}</${tag}>`;
         }
         const targetElIndex = currentEquivalentNodes.indexOf(currentTargetEl);
         const originalClassString = state && targetElIndex !== -1 ? state.originalClasses[targetElIndex] : currentTargetEl.className;
-        const context = buildContext(currentTargetEl, msg.oldClass, msg.newClass, originalClassMap);
+        const context = buildContext(
+          currentTargetEl,
+          msg.oldClass,
+          msg.newClass,
+          originalClassMap
+        );
         send({
           type: "PATCH_STAGED",
           patch: {
@@ -3940,6 +4063,8 @@ ${pad}</${tag}>`;
             last.appendChild(img);
           }
         }
+      } else if (msg.type === "CLOSE_PANEL") {
+        if (active) toggleInspect(btn);
       } else if (msg.type === "DESIGN_CLOSE") {
         const last = designCanvasWrappers.pop();
         if (last) {
@@ -3953,6 +4078,12 @@ ${pad}</${tag}>`;
             }
           }
           last.wrapper.remove();
+          if (currentTargetEl && currentEquivalentNodes.length > 0) {
+            for (const n of currentEquivalentNodes) {
+              highlightElement(n);
+            }
+            showDrawButton(currentTargetEl);
+          }
         }
       }
     });
@@ -3965,15 +4096,19 @@ ${pad}</${tag}>`;
         positionWithFlip(currentTargetEl, toolbarEl);
       }
     });
-    window.addEventListener("scroll", () => {
-      if (currentEquivalentNodes.length > 0) {
-        shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
-        currentEquivalentNodes.forEach((n) => highlightElement(n));
-      }
-      if (toolbarEl && currentTargetEl) {
-        positionWithFlip(currentTargetEl, toolbarEl);
-      }
-    }, { capture: true, passive: true });
+    window.addEventListener(
+      "scroll",
+      () => {
+        if (currentEquivalentNodes.length > 0) {
+          shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
+          currentEquivalentNodes.forEach((n) => highlightElement(n));
+        }
+        if (toolbarEl && currentTargetEl) {
+          positionWithFlip(currentTargetEl, toolbarEl);
+        }
+      },
+      { capture: true, passive: true }
+    );
     if (sessionStorage.getItem(PANEL_OPEN_KEY) === "1") {
       active = true;
       btn.classList.add("active");