@bitovi/vybit 0.4.10 → 0.6.0

package/overlay/dist/overlay.js

@@ -932,8 +932,8 @@
     }
     return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
   }
-  function getClippingElementAncestors(element, cache) {
-    const cachedResult = cache.get(element);
+  function getClippingElementAncestors(element, cache2) {
+    const cachedResult = cache2.get(element);
     if (cachedResult) {
       return cachedResult;
     }
@@ -955,7 +955,7 @@
       }
       currentNode = getParentNode(currentNode);
     }
-    cache.set(element, result);
+    cache2.set(element, result);
     return result;
   }
   function getClippingRect(_ref) {
@@ -1106,14 +1106,14 @@
   var offset2 = offset;
   var flip2 = flip;
   var computePosition2 = (reference, floating, options) => {
-    const cache = /* @__PURE__ */ new Map();
+    const cache2 = /* @__PURE__ */ new Map();
     const mergedOptions = {
       platform,
       ...options
     };
     const platformWithCache = {
       ...mergedOptions.platform,
-      _c: cache
+      _c: cache2
     };
     return computePosition(reference, floating, {
       ...mergedOptions,
@@ -1218,138 +1218,159 @@
     walk(rootFiber);
     return results;
   }
-  function getChildPath(componentFiber, targetFiber) {
-    const path = [];
-    let current = targetFiber;
-    while (current && current !== componentFiber) {
-      const parent = current.return;
-      if (!parent) break;
-      let index = 0;
-      let sibling = parent.child;
-      while (sibling && sibling !== current) {
-        sibling = sibling.sibling;
-        index++;
-      }
-      path.push(index);
-      current = parent;
-    }
-    path.reverse();
-    return path;
-  }
-  function resolvePathToDOM(instanceFiber, path) {
-    let current = instanceFiber;
-    for (const index of path) {
-      if (!current) return null;
-      current = current.child;
-      if (!current) return null;
-      for (let i = 0; i < index; i++) {
-        if (!current) return null;
-        current = current.sibling;
-      }
-    }
-    if (!current) return null;
-    return getDOMNode(current);
-  }
-  function getDOMNode(fiber) {
-    if (fiber.stateNode instanceof HTMLElement) {
-      return fiber.stateNode;
-    }
-    let child = fiber.child;
-    while (child) {
-      if (child.tag === 5 && child.stateNode instanceof HTMLElement) {
-        return child.stateNode;
-      }
-      const result = getDOMNode(child);
-      if (result) return result;
-      child = child.sibling;
+
+  // 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)
+        );
+      }
     }
-    return null;
-  }
-  function findEquivalentDescendant(container, clicked, containerNode) {
-    const chain = [];
-    let el = clicked;
-    while (el && el !== containerNode) {
-      chain.unshift(el);
-      el = el.parentElement;
-    }
-    if (chain.length === 0) return container;
-    let node = container;
-    for (const ancestor of chain) {
-      const match = Array.from(node.children).find(
-        (c) => c instanceof HTMLElement && c.tagName === ancestor.tagName && c.className === ancestor.className
-      ) ?? null;
-      if (!match) return null;
-      node = match;
+    if (!exactMatches.includes(clickedEl)) {
+      exactMatches.unshift(clickedEl);
     }
-    return node;
+    return {
+      exactMatch: exactMatches,
+      nearGroups: [],
+      // Not computed yet — lazy
+      componentName
+    };
   }
-  function findInlineRepeatedNodes(targetFiber, boundaryFiber, minSiblings = 3) {
-    const clickedNode = getDOMNode(targetFiber);
-    if (!clickedNode) return [];
-    let current = targetFiber;
-    let bestResult = [];
-    while (current && current !== boundaryFiber) {
-      const parent = current.return;
-      if (!parent) break;
-      const sameType = [];
-      let child = parent.child;
-      while (child) {
-        if (child.type === current.type) {
-          sameType.push(child);
+  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;
+          }
         }
-        child = child.sibling;
+        if (candidates.length >= MAX_CANDIDATES) break;
       }
-      if (sameType.length >= minSiblings && sameType.length > bestResult.length) {
-        const containerNode = getDOMNode(current);
-        if (!containerNode) {
-          current = parent;
-          continue;
-        }
-        const containerNodes = [];
-        for (const sib of sameType) {
-          const node = getDOMNode(sib);
-          if (node) containerNodes.push(node);
-        }
-        const majorityClass = containerNodes.map((n) => n.className).sort(
-          (a, b) => containerNodes.filter((n) => n.className === b).length - containerNodes.filter((n) => n.className === a).length
-        )[0];
-        const outliers = containerNodes.filter((n) => n.className !== majorityClass);
-        if (outliers.length > 1) {
-          current = parent;
-          continue;
-        }
-        const results = [];
-        for (const sibContainer of containerNodes) {
-          const equiv = findEquivalentDescendant(sibContainer, clickedNode, containerNode);
-          if (equiv) results.push(equiv);
-        }
-        if (results.length > bestResult.length) {
-          bestResult = results;
-        }
+    }
+    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] });
       }
-      current = parent;
-    }
-    return bestResult;
-  }
-  function findDOMEquivalents(el) {
-    const classes = typeof el.className === "string" ? el.className.trim() : "";
-    if (!classes) return [el];
-    const exactMatches = Array.from(
-      document.querySelectorAll(el.tagName.toLowerCase())
-    ).filter((n) => n.className === el.className);
-    if (exactMatches.length >= 2) return exactMatches;
-    const parent = el.parentElement;
-    if (!parent) return [el];
-    const siblings = Array.from(parent.children).filter(
-      (c) => c instanceof HTMLElement && c.tagName === el.tagName
-    );
-    if (siblings.length < 2) return [el];
-    const majorityClass = siblings.map((n) => n.className).sort(
-      (a, b) => siblings.filter((n) => n.className === b).length - siblings.filter((n) => n.className === a).length
-    )[0];
-    const outliers = siblings.filter((n) => n.className !== majorityClass);
-    if (outliers.length > 1) return [el];
-    return siblings.filter((n) => n.className === majorityClass);
+    }
+    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/context.ts
@@ -1464,22 +1485,24 @@ ${pad}</${tag}>`;
         originalClasses: elements.map((n) => n.className)
       };
     }
-    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 (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) {
@@ -1489,7 +1512,48 @@ ${pad}</${tag}>`;
     }
     for (const node of elements) {
       if (oldClass) node.classList.remove(oldClass);
-      node.classList.add(newClass);
+      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)
+      };
+    }
+    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 {
+      }
+    }
+    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) {
+      for (const { oldClass, newClass } of pairs) {
+        if (oldClass) node.classList.remove(oldClass);
+        if (newClass) node.classList.add(newClass);
+      }
     }
   }
   function revertPreview() {
@@ -1548,6 +1612,7 @@ ${pad}</${tag}>`;
     `;
       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);
@@ -1618,6 +1683,7 @@ ${pad}</${tag}>`;
       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");
@@ -1771,6 +1837,7 @@ ${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);
@@ -1842,6 +1909,845 @@ ${pad}</${tag}>`;
     }
   };
 
+  // node_modules/html-to-image/es/util.js
+  function resolveUrl(url, baseUrl) {
+    if (url.match(/^[a-z]+:\/\//i)) {
+      return url;
+    }
+    if (url.match(/^\/\//)) {
+      return window.location.protocol + url;
+    }
+    if (url.match(/^[a-z]+:/i)) {
+      return url;
+    }
+    const doc = document.implementation.createHTMLDocument();
+    const base = doc.createElement("base");
+    const a = doc.createElement("a");
+    doc.head.appendChild(base);
+    doc.body.appendChild(a);
+    if (baseUrl) {
+      base.href = baseUrl;
+    }
+    a.href = url;
+    return a.href;
+  }
+  var uuid = /* @__PURE__ */ (() => {
+    let counter = 0;
+    const random = () => (
+      // eslint-disable-next-line no-bitwise
+      `0000${(Math.random() * 36 ** 4 << 0).toString(36)}`.slice(-4)
+    );
+    return () => {
+      counter += 1;
+      return `u${random()}${counter}`;
+    };
+  })();
+  function toArray(arrayLike) {
+    const arr = [];
+    for (let i = 0, l = arrayLike.length; i < l; i++) {
+      arr.push(arrayLike[i]);
+    }
+    return arr;
+  }
+  var styleProps = null;
+  function getStyleProperties(options = {}) {
+    if (styleProps) {
+      return styleProps;
+    }
+    if (options.includeStyleProperties) {
+      styleProps = options.includeStyleProperties;
+      return styleProps;
+    }
+    styleProps = toArray(window.getComputedStyle(document.documentElement));
+    return styleProps;
+  }
+  function px(node, styleProperty) {
+    const win = node.ownerDocument.defaultView || window;
+    const val = win.getComputedStyle(node).getPropertyValue(styleProperty);
+    return val ? parseFloat(val.replace("px", "")) : 0;
+  }
+  function getNodeWidth(node) {
+    const leftBorder = px(node, "border-left-width");
+    const rightBorder = px(node, "border-right-width");
+    return node.clientWidth + leftBorder + rightBorder;
+  }
+  function getNodeHeight(node) {
+    const topBorder = px(node, "border-top-width");
+    const bottomBorder = px(node, "border-bottom-width");
+    return node.clientHeight + topBorder + bottomBorder;
+  }
+  function getImageSize(targetNode, options = {}) {
+    const width = options.width || getNodeWidth(targetNode);
+    const height = options.height || getNodeHeight(targetNode);
+    return { width, height };
+  }
+  function getPixelRatio() {
+    let ratio;
+    let FINAL_PROCESS;
+    try {
+      FINAL_PROCESS = process;
+    } catch (e) {
+    }
+    const val = FINAL_PROCESS && FINAL_PROCESS.env ? FINAL_PROCESS.env.devicePixelRatio : null;
+    if (val) {
+      ratio = parseInt(val, 10);
+      if (Number.isNaN(ratio)) {
+        ratio = 1;
+      }
+    }
+    return ratio || window.devicePixelRatio || 1;
+  }
+  var canvasDimensionLimit = 16384;
+  function checkCanvasDimensions(canvas) {
+    if (canvas.width > canvasDimensionLimit || canvas.height > canvasDimensionLimit) {
+      if (canvas.width > canvasDimensionLimit && canvas.height > canvasDimensionLimit) {
+        if (canvas.width > canvas.height) {
+          canvas.height *= canvasDimensionLimit / canvas.width;
+          canvas.width = canvasDimensionLimit;
+        } else {
+          canvas.width *= canvasDimensionLimit / canvas.height;
+          canvas.height = canvasDimensionLimit;
+        }
+      } else if (canvas.width > canvasDimensionLimit) {
+        canvas.height *= canvasDimensionLimit / canvas.width;
+        canvas.width = canvasDimensionLimit;
+      } else {
+        canvas.width *= canvasDimensionLimit / canvas.height;
+        canvas.height = canvasDimensionLimit;
+      }
+    }
+  }
+  function createImage(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => {
+        img.decode().then(() => {
+          requestAnimationFrame(() => resolve(img));
+        });
+      };
+      img.onerror = reject;
+      img.crossOrigin = "anonymous";
+      img.decoding = "async";
+      img.src = url;
+    });
+  }
+  async function svgToDataURL(svg) {
+    return Promise.resolve().then(() => new XMLSerializer().serializeToString(svg)).then(encodeURIComponent).then((html) => `data:image/svg+xml;charset=utf-8,${html}`);
+  }
+  async function nodeToDataURL(node, width, height) {
+    const xmlns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(xmlns, "svg");
+    const foreignObject = document.createElementNS(xmlns, "foreignObject");
+    svg.setAttribute("width", `${width}`);
+    svg.setAttribute("height", `${height}`);
+    svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    foreignObject.setAttribute("width", "100%");
+    foreignObject.setAttribute("height", "100%");
+    foreignObject.setAttribute("x", "0");
+    foreignObject.setAttribute("y", "0");
+    foreignObject.setAttribute("externalResourcesRequired", "true");
+    svg.appendChild(foreignObject);
+    foreignObject.appendChild(node);
+    return svgToDataURL(svg);
+  }
+  var isInstanceOfElement = (node, instance) => {
+    if (node instanceof instance)
+      return true;
+    const nodePrototype = Object.getPrototypeOf(node);
+    if (nodePrototype === null)
+      return false;
+    return nodePrototype.constructor.name === instance.name || isInstanceOfElement(nodePrototype, instance);
+  };
+
+  // node_modules/html-to-image/es/clone-pseudos.js
+  function formatCSSText(style) {
+    const content = style.getPropertyValue("content");
+    return `${style.cssText} content: '${content.replace(/'|"/g, "")}';`;
+  }
+  function formatCSSProperties(style, options) {
+    return getStyleProperties(options).map((name) => {
+      const value = style.getPropertyValue(name);
+      const priority = style.getPropertyPriority(name);
+      return `${name}: ${value}${priority ? " !important" : ""};`;
+    }).join(" ");
+  }
+  function getPseudoElementStyle(className, pseudo, style, options) {
+    const selector = `.${className}:${pseudo}`;
+    const cssText = style.cssText ? formatCSSText(style) : formatCSSProperties(style, options);
+    return document.createTextNode(`${selector}{${cssText}}`);
+  }
+  function clonePseudoElement(nativeNode, clonedNode, pseudo, options) {
+    const style = window.getComputedStyle(nativeNode, pseudo);
+    const content = style.getPropertyValue("content");
+    if (content === "" || content === "none") {
+      return;
+    }
+    const className = uuid();
+    try {
+      clonedNode.className = `${clonedNode.className} ${className}`;
+    } catch (err) {
+      return;
+    }
+    const styleElement = document.createElement("style");
+    styleElement.appendChild(getPseudoElementStyle(className, pseudo, style, options));
+    clonedNode.appendChild(styleElement);
+  }
+  function clonePseudoElements(nativeNode, clonedNode, options) {
+    clonePseudoElement(nativeNode, clonedNode, ":before", options);
+    clonePseudoElement(nativeNode, clonedNode, ":after", options);
+  }
+
+  // node_modules/html-to-image/es/mimes.js
+  var WOFF = "application/font-woff";
+  var JPEG = "image/jpeg";
+  var mimes = {
+    woff: WOFF,
+    woff2: WOFF,
+    ttf: "application/font-truetype",
+    eot: "application/vnd.ms-fontobject",
+    png: "image/png",
+    jpg: JPEG,
+    jpeg: JPEG,
+    gif: "image/gif",
+    tiff: "image/tiff",
+    svg: "image/svg+xml",
+    webp: "image/webp"
+  };
+  function getExtension(url) {
+    const match = /\.([^./]*?)$/g.exec(url);
+    return match ? match[1] : "";
+  }
+  function getMimeType(url) {
+    const extension = getExtension(url).toLowerCase();
+    return mimes[extension] || "";
+  }
+
+  // node_modules/html-to-image/es/dataurl.js
+  function getContentFromDataUrl(dataURL) {
+    return dataURL.split(/,/)[1];
+  }
+  function isDataUrl(url) {
+    return url.search(/^(data:)/) !== -1;
+  }
+  function makeDataUrl(content, mimeType) {
+    return `data:${mimeType};base64,${content}`;
+  }
+  async function fetchAsDataURL(url, init2, process2) {
+    const res = await fetch(url, init2);
+    if (res.status === 404) {
+      throw new Error(`Resource "${res.url}" not found`);
+    }
+    const blob = await res.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onerror = reject;
+      reader.onloadend = () => {
+        try {
+          resolve(process2({ res, result: reader.result }));
+        } catch (error) {
+          reject(error);
+        }
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+  var cache = {};
+  function getCacheKey(url, contentType, includeQueryParams) {
+    let key = url.replace(/\?.*/, "");
+    if (includeQueryParams) {
+      key = url;
+    }
+    if (/ttf|otf|eot|woff2?/i.test(key)) {
+      key = key.replace(/.*\//, "");
+    }
+    return contentType ? `[${contentType}]${key}` : key;
+  }
+  async function resourceToDataURL(resourceUrl, contentType, options) {
+    const cacheKey = getCacheKey(resourceUrl, contentType, options.includeQueryParams);
+    if (cache[cacheKey] != null) {
+      return cache[cacheKey];
+    }
+    if (options.cacheBust) {
+      resourceUrl += (/\?/.test(resourceUrl) ? "&" : "?") + (/* @__PURE__ */ new Date()).getTime();
+    }
+    let dataURL;
+    try {
+      const content = await fetchAsDataURL(resourceUrl, options.fetchRequestInit, ({ res, result }) => {
+        if (!contentType) {
+          contentType = res.headers.get("Content-Type") || "";
+        }
+        return getContentFromDataUrl(result);
+      });
+      dataURL = makeDataUrl(content, contentType);
+    } catch (error) {
+      dataURL = options.imagePlaceholder || "";
+      let msg = `Failed to fetch resource: ${resourceUrl}`;
+      if (error) {
+        msg = typeof error === "string" ? error : error.message;
+      }
+      if (msg) {
+        console.warn(msg);
+      }
+    }
+    cache[cacheKey] = dataURL;
+    return dataURL;
+  }
+
+  // node_modules/html-to-image/es/clone-node.js
+  async function cloneCanvasElement(canvas) {
+    const dataURL = canvas.toDataURL();
+    if (dataURL === "data:,") {
+      return canvas.cloneNode(false);
+    }
+    return createImage(dataURL);
+  }
+  async function cloneVideoElement(video, options) {
+    if (video.currentSrc) {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      canvas.width = video.clientWidth;
+      canvas.height = video.clientHeight;
+      ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      const dataURL2 = canvas.toDataURL();
+      return createImage(dataURL2);
+    }
+    const poster = video.poster;
+    const contentType = getMimeType(poster);
+    const dataURL = await resourceToDataURL(poster, contentType, options);
+    return createImage(dataURL);
+  }
+  async function cloneIFrameElement(iframe, options) {
+    var _a;
+    try {
+      if ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentDocument) === null || _a === void 0 ? void 0 : _a.body) {
+        return await cloneNode(iframe.contentDocument.body, options, true);
+      }
+    } catch (_b) {
+    }
+    return iframe.cloneNode(false);
+  }
+  async function cloneSingleNode(node, options) {
+    if (isInstanceOfElement(node, HTMLCanvasElement)) {
+      return cloneCanvasElement(node);
+    }
+    if (isInstanceOfElement(node, HTMLVideoElement)) {
+      return cloneVideoElement(node, options);
+    }
+    if (isInstanceOfElement(node, HTMLIFrameElement)) {
+      return cloneIFrameElement(node, options);
+    }
+    return node.cloneNode(isSVGElement(node));
+  }
+  var isSlotElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SLOT";
+  var isSVGElement = (node) => node.tagName != null && node.tagName.toUpperCase() === "SVG";
+  async function cloneChildren(nativeNode, clonedNode, options) {
+    var _a, _b;
+    if (isSVGElement(clonedNode)) {
+      return clonedNode;
+    }
+    let children = [];
+    if (isSlotElement(nativeNode) && nativeNode.assignedNodes) {
+      children = toArray(nativeNode.assignedNodes());
+    } else if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && ((_a = nativeNode.contentDocument) === null || _a === void 0 ? void 0 : _a.body)) {
+      children = toArray(nativeNode.contentDocument.body.childNodes);
+    } else {
+      children = toArray(((_b = nativeNode.shadowRoot) !== null && _b !== void 0 ? _b : nativeNode).childNodes);
+    }
+    if (children.length === 0 || isInstanceOfElement(nativeNode, HTMLVideoElement)) {
+      return clonedNode;
+    }
+    await children.reduce((deferred, child) => deferred.then(() => cloneNode(child, options)).then((clonedChild) => {
+      if (clonedChild) {
+        clonedNode.appendChild(clonedChild);
+      }
+    }), Promise.resolve());
+    return clonedNode;
+  }
+  function cloneCSSStyle(nativeNode, clonedNode, options) {
+    const targetStyle = clonedNode.style;
+    if (!targetStyle) {
+      return;
+    }
+    const sourceStyle = window.getComputedStyle(nativeNode);
+    if (sourceStyle.cssText) {
+      targetStyle.cssText = sourceStyle.cssText;
+      targetStyle.transformOrigin = sourceStyle.transformOrigin;
+    } else {
+      getStyleProperties(options).forEach((name) => {
+        let value = sourceStyle.getPropertyValue(name);
+        if (name === "font-size" && value.endsWith("px")) {
+          const reducedFont = Math.floor(parseFloat(value.substring(0, value.length - 2))) - 0.1;
+          value = `${reducedFont}px`;
+        }
+        if (isInstanceOfElement(nativeNode, HTMLIFrameElement) && name === "display" && value === "inline") {
+          value = "block";
+        }
+        if (name === "d" && clonedNode.getAttribute("d")) {
+          value = `path(${clonedNode.getAttribute("d")})`;
+        }
+        targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
+      });
+    }
+  }
+  function cloneInputValue(nativeNode, clonedNode) {
+    if (isInstanceOfElement(nativeNode, HTMLTextAreaElement)) {
+      clonedNode.innerHTML = nativeNode.value;
+    }
+    if (isInstanceOfElement(nativeNode, HTMLInputElement)) {
+      clonedNode.setAttribute("value", nativeNode.value);
+    }
+  }
+  function cloneSelectValue(nativeNode, clonedNode) {
+    if (isInstanceOfElement(nativeNode, HTMLSelectElement)) {
+      const clonedSelect = clonedNode;
+      const selectedOption = Array.from(clonedSelect.children).find((child) => nativeNode.value === child.getAttribute("value"));
+      if (selectedOption) {
+        selectedOption.setAttribute("selected", "");
+      }
+    }
+  }
+  function decorate(nativeNode, clonedNode, options) {
+    if (isInstanceOfElement(clonedNode, Element)) {
+      cloneCSSStyle(nativeNode, clonedNode, options);
+      clonePseudoElements(nativeNode, clonedNode, options);
+      cloneInputValue(nativeNode, clonedNode);
+      cloneSelectValue(nativeNode, clonedNode);
+    }
+    return clonedNode;
+  }
+  async function ensureSVGSymbols(clone, options) {
+    const uses = clone.querySelectorAll ? clone.querySelectorAll("use") : [];
+    if (uses.length === 0) {
+      return clone;
+    }
+    const processedDefs = {};
+    for (let i = 0; i < uses.length; i++) {
+      const use = uses[i];
+      const id = use.getAttribute("xlink:href");
+      if (id) {
+        const exist = clone.querySelector(id);
+        const definition = document.querySelector(id);
+        if (!exist && definition && !processedDefs[id]) {
+          processedDefs[id] = await cloneNode(definition, options, true);
+        }
+      }
+    }
+    const nodes = Object.values(processedDefs);
+    if (nodes.length) {
+      const ns = "http://www.w3.org/1999/xhtml";
+      const svg = document.createElementNS(ns, "svg");
+      svg.setAttribute("xmlns", ns);
+      svg.style.position = "absolute";
+      svg.style.width = "0";
+      svg.style.height = "0";
+      svg.style.overflow = "hidden";
+      svg.style.display = "none";
+      const defs = document.createElementNS(ns, "defs");
+      svg.appendChild(defs);
+      for (let i = 0; i < nodes.length; i++) {
+        defs.appendChild(nodes[i]);
+      }
+      clone.appendChild(svg);
+    }
+    return clone;
+  }
+  async function cloneNode(node, options, isRoot) {
+    if (!isRoot && options.filter && !options.filter(node)) {
+      return null;
+    }
+    return Promise.resolve(node).then((clonedNode) => cloneSingleNode(clonedNode, options)).then((clonedNode) => cloneChildren(node, clonedNode, options)).then((clonedNode) => decorate(node, clonedNode, options)).then((clonedNode) => ensureSVGSymbols(clonedNode, options));
+  }
+
+  // node_modules/html-to-image/es/embed-resources.js
+  var URL_REGEX = /url\((['"]?)([^'"]+?)\1\)/g;
+  var URL_WITH_FORMAT_REGEX = /url\([^)]+\)\s*format\((["']?)([^"']+)\1\)/g;
+  var FONT_SRC_REGEX = /src:\s*(?:url\([^)]+\)\s*format\([^)]+\)[,;]\s*)+/g;
+  function toRegex(url) {
+    const escaped = url.replace(/([.*+?^${}()|\[\]\/\\])/g, "\\$1");
+    return new RegExp(`(url\\(['"]?)(${escaped})(['"]?\\))`, "g");
+  }
+  function parseURLs(cssText) {
+    const urls = [];
+    cssText.replace(URL_REGEX, (raw, quotation, url) => {
+      urls.push(url);
+      return raw;
+    });
+    return urls.filter((url) => !isDataUrl(url));
+  }
+  async function embed(cssText, resourceURL, baseURL, options, getContentFromUrl) {
+    try {
+      const resolvedURL = baseURL ? resolveUrl(resourceURL, baseURL) : resourceURL;
+      const contentType = getMimeType(resourceURL);
+      let dataURL;
+      if (getContentFromUrl) {
+        const content = await getContentFromUrl(resolvedURL);
+        dataURL = makeDataUrl(content, contentType);
+      } else {
+        dataURL = await resourceToDataURL(resolvedURL, contentType, options);
+      }
+      return cssText.replace(toRegex(resourceURL), `$1${dataURL}$3`);
+    } catch (error) {
+    }
+    return cssText;
+  }
+  function filterPreferredFontFormat(str, { preferredFontFormat }) {
+    return !preferredFontFormat ? str : str.replace(FONT_SRC_REGEX, (match) => {
+      while (true) {
+        const [src, , format] = URL_WITH_FORMAT_REGEX.exec(match) || [];
+        if (!format) {
+          return "";
+        }
+        if (format === preferredFontFormat) {
+          return `src: ${src};`;
+        }
+      }
+    });
+  }
+  function shouldEmbed(url) {
+    return url.search(URL_REGEX) !== -1;
+  }
+  async function embedResources(cssText, baseUrl, options) {
+    if (!shouldEmbed(cssText)) {
+      return cssText;
+    }
+    const filteredCSSText = filterPreferredFontFormat(cssText, options);
+    const urls = parseURLs(filteredCSSText);
+    return urls.reduce((deferred, url) => deferred.then((css) => embed(css, url, baseUrl, options)), Promise.resolve(filteredCSSText));
+  }
+
+  // node_modules/html-to-image/es/embed-images.js
+  async function embedProp(propName, node, options) {
+    var _a;
+    const propValue = (_a = node.style) === null || _a === void 0 ? void 0 : _a.getPropertyValue(propName);
+    if (propValue) {
+      const cssString = await embedResources(propValue, null, options);
+      node.style.setProperty(propName, cssString, node.style.getPropertyPriority(propName));
+      return true;
+    }
+    return false;
+  }
+  async function embedBackground(clonedNode, options) {
+    ;
+    await embedProp("background", clonedNode, options) || await embedProp("background-image", clonedNode, options);
+    await embedProp("mask", clonedNode, options) || await embedProp("-webkit-mask", clonedNode, options) || await embedProp("mask-image", clonedNode, options) || await embedProp("-webkit-mask-image", clonedNode, options);
+  }
+  async function embedImageNode(clonedNode, options) {
+    const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement);
+    if (!(isImageElement && !isDataUrl(clonedNode.src)) && !(isInstanceOfElement(clonedNode, SVGImageElement) && !isDataUrl(clonedNode.href.baseVal))) {
+      return;
+    }
+    const url = isImageElement ? clonedNode.src : clonedNode.href.baseVal;
+    const dataURL = await resourceToDataURL(url, getMimeType(url), options);
+    await new Promise((resolve, reject) => {
+      clonedNode.onload = resolve;
+      clonedNode.onerror = options.onImageErrorHandler ? (...attributes) => {
+        try {
+          resolve(options.onImageErrorHandler(...attributes));
+        } catch (error) {
+          reject(error);
+        }
+      } : reject;
+      const image = clonedNode;
+      if (image.decode) {
+        image.decode = resolve;
+      }
+      if (image.loading === "lazy") {
+        image.loading = "eager";
+      }
+      if (isImageElement) {
+        clonedNode.srcset = "";
+        clonedNode.src = dataURL;
+      } else {
+        clonedNode.href.baseVal = dataURL;
+      }
+    });
+  }
+  async function embedChildren(clonedNode, options) {
+    const children = toArray(clonedNode.childNodes);
+    const deferreds = children.map((child) => embedImages(child, options));
+    await Promise.all(deferreds).then(() => clonedNode);
+  }
+  async function embedImages(clonedNode, options) {
+    if (isInstanceOfElement(clonedNode, Element)) {
+      await embedBackground(clonedNode, options);
+      await embedImageNode(clonedNode, options);
+      await embedChildren(clonedNode, options);
+    }
+  }
+
+  // node_modules/html-to-image/es/apply-style.js
+  function applyStyle(node, options) {
+    const { style } = node;
+    if (options.backgroundColor) {
+      style.backgroundColor = options.backgroundColor;
+    }
+    if (options.width) {
+      style.width = `${options.width}px`;
+    }
+    if (options.height) {
+      style.height = `${options.height}px`;
+    }
+    const manual = options.style;
+    if (manual != null) {
+      Object.keys(manual).forEach((key) => {
+        style[key] = manual[key];
+      });
+    }
+    return node;
+  }
+
+  // node_modules/html-to-image/es/embed-webfonts.js
+  var cssFetchCache = {};
+  async function fetchCSS(url) {
+    let cache2 = cssFetchCache[url];
+    if (cache2 != null) {
+      return cache2;
+    }
+    const res = await fetch(url);
+    const cssText = await res.text();
+    cache2 = { url, cssText };
+    cssFetchCache[url] = cache2;
+    return cache2;
+  }
+  async function embedFonts(data, options) {
+    let cssText = data.cssText;
+    const regexUrl = /url\(["']?([^"')]+)["']?\)/g;
+    const fontLocs = cssText.match(/url\([^)]+\)/g) || [];
+    const loadFonts = fontLocs.map(async (loc) => {
+      let url = loc.replace(regexUrl, "$1");
+      if (!url.startsWith("https://")) {
+        url = new URL(url, data.url).href;
+      }
+      return fetchAsDataURL(url, options.fetchRequestInit, ({ result }) => {
+        cssText = cssText.replace(loc, `url(${result})`);
+        return [loc, result];
+      });
+    });
+    return Promise.all(loadFonts).then(() => cssText);
+  }
+  function parseCSS(source) {
+    if (source == null) {
+      return [];
+    }
+    const result = [];
+    const commentsRegex = /(\/\*[\s\S]*?\*\/)/gi;
+    let cssText = source.replace(commentsRegex, "");
+    const keyframesRegex = new RegExp("((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})", "gi");
+    while (true) {
+      const matches = keyframesRegex.exec(cssText);
+      if (matches === null) {
+        break;
+      }
+      result.push(matches[0]);
+    }
+    cssText = cssText.replace(keyframesRegex, "");
+    const importRegex = /@import[\s\S]*?url\([^)]*\)[\s\S]*?;/gi;
+    const combinedCSSRegex = "((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})";
+    const unifiedRegex = new RegExp(combinedCSSRegex, "gi");
+    while (true) {
+      let matches = importRegex.exec(cssText);
+      if (matches === null) {
+        matches = unifiedRegex.exec(cssText);
+        if (matches === null) {
+          break;
+        } else {
+          importRegex.lastIndex = unifiedRegex.lastIndex;
+        }
+      } else {
+        unifiedRegex.lastIndex = importRegex.lastIndex;
+      }
+      result.push(matches[0]);
+    }
+    return result;
+  }
+  async function getCSSRules(styleSheets, options) {
+    const ret = [];
+    const deferreds = [];
+    styleSheets.forEach((sheet) => {
+      if ("cssRules" in sheet) {
+        try {
+          toArray(sheet.cssRules || []).forEach((item, index) => {
+            if (item.type === CSSRule.IMPORT_RULE) {
+              let importIndex = index + 1;
+              const url = item.href;
+              const deferred = fetchCSS(url).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
+                try {
+                  sheet.insertRule(rule, rule.startsWith("@import") ? importIndex += 1 : sheet.cssRules.length);
+                } catch (error) {
+                  console.error("Error inserting rule from remote css", {
+                    rule,
+                    error
+                  });
+                }
+              })).catch((e) => {
+                console.error("Error loading remote css", e.toString());
+              });
+              deferreds.push(deferred);
+            }
+          });
+        } catch (e) {
+          const inline2 = styleSheets.find((a) => a.href == null) || document.styleSheets[0];
+          if (sheet.href != null) {
+            deferreds.push(fetchCSS(sheet.href).then((metadata) => embedFonts(metadata, options)).then((cssText) => parseCSS(cssText).forEach((rule) => {
+              inline2.insertRule(rule, inline2.cssRules.length);
+            })).catch((err) => {
+              console.error("Error loading remote stylesheet", err);
+            }));
+          }
+          console.error("Error inlining remote css file", e);
+        }
+      }
+    });
+    return Promise.all(deferreds).then(() => {
+      styleSheets.forEach((sheet) => {
+        if ("cssRules" in sheet) {
+          try {
+            toArray(sheet.cssRules || []).forEach((item) => {
+              ret.push(item);
+            });
+          } catch (e) {
+            console.error(`Error while reading CSS rules from ${sheet.href}`, e);
+          }
+        }
+      });
+      return ret;
+    });
+  }
+  function getWebFontRules(cssRules) {
+    return cssRules.filter((rule) => rule.type === CSSRule.FONT_FACE_RULE).filter((rule) => shouldEmbed(rule.style.getPropertyValue("src")));
+  }
+  async function parseWebFontRules(node, options) {
+    if (node.ownerDocument == null) {
+      throw new Error("Provided element is not within a Document");
+    }
+    const styleSheets = toArray(node.ownerDocument.styleSheets);
+    const cssRules = await getCSSRules(styleSheets, options);
+    return getWebFontRules(cssRules);
+  }
+  function normalizeFontFamily(font) {
+    return font.trim().replace(/["']/g, "");
+  }
+  function getUsedFonts(node) {
+    const fonts = /* @__PURE__ */ new Set();
+    function traverse(node2) {
+      const fontFamily = node2.style.fontFamily || getComputedStyle(node2).fontFamily;
+      fontFamily.split(",").forEach((font) => {
+        fonts.add(normalizeFontFamily(font));
+      });
+      Array.from(node2.children).forEach((child) => {
+        if (child instanceof HTMLElement) {
+          traverse(child);
+        }
+      });
+    }
+    traverse(node);
+    return fonts;
+  }
+  async function getWebFontCSS(node, options) {
+    const rules = await parseWebFontRules(node, options);
+    const usedFonts = getUsedFonts(node);
+    const cssTexts = await Promise.all(rules.filter((rule) => usedFonts.has(normalizeFontFamily(rule.style.fontFamily))).map((rule) => {
+      const baseUrl = rule.parentStyleSheet ? rule.parentStyleSheet.href : null;
+      return embedResources(rule.cssText, baseUrl, options);
+    }));
+    return cssTexts.join("\n");
+  }
+  async function embedWebFonts(clonedNode, options) {
+    const cssText = options.fontEmbedCSS != null ? options.fontEmbedCSS : options.skipFonts ? null : await getWebFontCSS(clonedNode, options);
+    if (cssText) {
+      const styleNode = document.createElement("style");
+      const sytleContent = document.createTextNode(cssText);
+      styleNode.appendChild(sytleContent);
+      if (clonedNode.firstChild) {
+        clonedNode.insertBefore(styleNode, clonedNode.firstChild);
+      } else {
+        clonedNode.appendChild(styleNode);
+      }
+    }
+  }
+
+  // node_modules/html-to-image/es/index.js
+  async function toSvg(node, options = {}) {
+    const { width, height } = getImageSize(node, options);
+    const clonedNode = await cloneNode(node, options, true);
+    await embedWebFonts(clonedNode, options);
+    await embedImages(clonedNode, options);
+    applyStyle(clonedNode, options);
+    const datauri = await nodeToDataURL(clonedNode, width, height);
+    return datauri;
+  }
+  async function toCanvas(node, options = {}) {
+    const { width, height } = getImageSize(node, options);
+    const svg = await toSvg(node, options);
+    const img = await createImage(svg);
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    const ratio = options.pixelRatio || getPixelRatio();
+    const canvasWidth = options.canvasWidth || width;
+    const canvasHeight = options.canvasHeight || height;
+    canvas.width = canvasWidth * ratio;
+    canvas.height = canvasHeight * ratio;
+    if (!options.skipAutoScale) {
+      checkCanvasDimensions(canvas);
+    }
+    canvas.style.width = `${canvasWidth}`;
+    canvas.style.height = `${canvasHeight}`;
+    if (options.backgroundColor) {
+      context.fillStyle = options.backgroundColor;
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    context.drawImage(img, 0, 0, canvas.width, canvas.height);
+    return canvas;
+  }
+  async function toPng(node, options = {}) {
+    const canvas = await toCanvas(node, options);
+    return canvas.toDataURL();
+  }
+
+  // overlay/src/screenshot.ts
+  function areSiblings(nodes) {
+    if (nodes.length === 0) return false;
+    const parent = nodes[0].parentElement;
+    return nodes.every((n) => n.parentElement === parent);
+  }
+  async function captureRegion(nodes) {
+    if (nodes.length === 1) {
+      const rect = nodes[0].getBoundingClientRect();
+      const width2 = Math.round(rect.width);
+      const height2 = Math.round(rect.height);
+      const dataUrl = await toPng(nodes[0], { skipFonts: true, width: width2, height: height2 });
+      return { dataUrl, width: width2, height: height2 };
+    }
+    const parent = nodes[0].parentElement;
+    const rects = nodes.map((n) => n.getBoundingClientRect());
+    const top = Math.min(...rects.map((r) => r.top));
+    const left = Math.min(...rects.map((r) => r.left));
+    const right = Math.max(...rects.map((r) => r.right));
+    const bottom = Math.max(...rects.map((r) => r.bottom));
+    const width = Math.round(right - left);
+    const height = Math.round(bottom - top);
+    const ghost = parent.cloneNode(false);
+    ghost.style.padding = "0";
+    ghost.style.border = "none";
+    ghost.style.margin = "0";
+    ghost.style.width = `${width}px`;
+    for (const node of nodes) {
+      ghost.appendChild(node.cloneNode(true));
+    }
+    ghost.style.position = "fixed";
+    ghost.style.left = "0";
+    ghost.style.top = "0";
+    ghost.style.zIndex = "999999";
+    ghost.style.pointerEvents = "none";
+    document.body.appendChild(ghost);
+    try {
+      const dataUrl = await toPng(ghost, { skipFonts: true, width, height });
+      return { dataUrl, width, height };
+    } finally {
+      ghost.remove();
+    }
+  }
+
   // overlay/src/index.ts
   var shadowRoot;
   var shadowHost;
@@ -1852,7 +2758,7 @@ ${pad}</${tag}>`;
   var currentTargetEl = null;
   var currentBoundary = null;
   var currentInstances = [];
-  var addingMode = false;
+  var cachedNearGroups = null;
   var hoverOutlineEl = null;
   var hoverTooltipEl = null;
   var lastHoveredEl = null;
@@ -1985,7 +2891,7 @@ ${pad}</${tag}>`;
     align-self: stretch;
   }
   /* Base style for all buttons inside the toolbar */
-  .draw-btn, .el-pick-btn, .el-add-btn {
+  .draw-btn, .el-reselect-btn, .el-pick-btn, .el-add-btn {
     background: transparent;
     border: none;
     border-radius: 0;
@@ -2009,10 +2915,59 @@ ${pad}</${tag}>`;
   .el-pick-btn { gap: 3px; padding: 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
   .el-pick-btn svg { opacity: 0.7; flex-shrink: 0; }
   .el-add-btn { padding: 0 10px; font-size: 15px; font-weight: 400; }
-  .draw-btn:hover, .el-pick-btn:hover, .el-add-btn:hover,
+  .el-reselect-btn { padding: 0 9px; }
+  .draw-btn:hover, .el-reselect-btn:hover, .el-pick-btn:hover, .el-add-btn:hover,
   .el-pick-btn.open {
     background: rgba(255,255,255,0.12);
   }
+  /* \u2500\u2500 Hover preview highlight (dashed, for group hover) \u2500\u2500 */
+  .highlight-preview {
+    position: fixed;
+    pointer-events: none;
+    border: 2px dashed #00848B;
+    border-radius: 2px;
+    box-sizing: border-box;
+    z-index: 999998;
+  }
+  /* \u2500\u2500 Group picker popover (replaces instance picker) \u2500\u2500 */
+  .el-group-empty {
+    padding: 12px 14px;
+    font-size: 11px;
+    color: #687879;
+    text-align: center;
+  }
+  .el-group-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 5px 12px;
+    cursor: pointer;
+    transition: background 0.1s;
+  }
+  .el-group-row:hover { background: rgba(0,132,139,0.05); }
+  .el-group-row input[type=checkbox] {
+    accent-color: #00848B;
+    width: 13px;
+    height: 13px;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+  .el-group-count {
+    font-size: 11px;
+    font-weight: 600;
+    color: #334041;
+    min-width: 20px;
+  }
+  .el-group-diff {
+    flex: 1;
+    font-size: 10px;
+    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .el-group-diff .diff-add { color: #16a34a; }
+  .el-group-diff .diff-rem { color: #dc2626; }
   /* \u2500\u2500 Instance picker popover \u2500\u2500 */
   .el-picker {
     position: fixed;
@@ -2211,7 +3166,6 @@ ${pad}</${tag}>`;
   var drawPopoverEl = null;
   var pickerEl = null;
   var pickerCloseHandler = null;
-  var selectedInstanceIndices = /* @__PURE__ */ new Set();
   function removeDrawButton() {
     toolbarEl?.remove();
     toolbarEl = null;
@@ -2281,7 +3235,7 @@ ${pad}</${tag}>`;
   <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 CHEVRON_SVG = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></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>`;
   async function positionWithFlip(anchor, floating, placement = "top-start") {
     const { x, y } = await computePosition2(anchor, floating, {
       placement,
@@ -2292,14 +3246,23 @@ ${pad}</${tag}>`;
   }
   function showDrawButton(targetEl) {
     removeDrawButton();
-    const allEquivalentNodes = [...currentEquivalentNodes];
-    const instanceCount = allEquivalentNodes.length;
+    const instanceCount = currentEquivalentNodes.length;
     const toolbar = document.createElement("div");
     toolbar.className = "el-toolbar";
     toolbar.style.left = "0px";
     toolbar.style.top = "0px";
     shadowRoot.appendChild(toolbar);
     toolbarEl = toolbar;
+    const reselectBtn = document.createElement("button");
+    reselectBtn.className = "el-reselect-btn";
+    reselectBtn.innerHTML = RESELECT_SVG;
+    reselectBtn.title = "Re-select element";
+    toolbar.appendChild(reselectBtn);
+    reselectBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      clearHighlights();
+      setSelectMode(true);
+    });
     const drawBtn = document.createElement("button");
     drawBtn.className = "draw-btn";
     drawBtn.innerHTML = PENCIL_SVG;
@@ -2316,69 +3279,47 @@ ${pad}</${tag}>`;
         showDrawPopover(drawBtn);
       }
     });
-    if (instanceCount > 1) {
-      const sep = document.createElement("div");
-      sep.className = "el-toolbar-sep";
-      toolbar.appendChild(sep);
-      const countBtn = document.createElement("button");
-      countBtn.className = "el-pick-btn";
-      const updateCountBtn = (n) => {
-        countBtn.innerHTML = `${n} ${CHEVRON_SVG}`;
-      };
-      updateCountBtn(instanceCount);
-      countBtn.title = "Select which instances to edit";
-      toolbar.appendChild(countBtn);
-      countBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        drawPopoverEl?.remove();
-        drawPopoverEl = null;
-        if (pickerEl) {
-          pickerEl.remove();
-          pickerEl = null;
-          countBtn.classList.remove("open");
-        } else {
-          countBtn.classList.add("open");
-          showInstancePicker(
-            countBtn,
-            () => countBtn.classList.remove("open"),
-            (indices) => {
-              currentEquivalentNodes = indices.map((i) => allEquivalentNodes[i]).filter(Boolean);
-              shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
-              currentEquivalentNodes.forEach((n) => highlightElement(n));
-              updateCountBtn(currentEquivalentNodes.length);
-            }
-          );
-        }
-      });
-      const addBtn = document.createElement("button");
-      addBtn.className = "el-add-btn";
-      addBtn.textContent = "+";
-      addBtn.title = "Add a different element to selection";
-      toolbar.appendChild(addBtn);
-      addBtn.addEventListener("click", (e) => {
-        e.stopPropagation();
-        pickerEl?.remove();
+    const sep = document.createElement("div");
+    sep.className = "el-toolbar-sep";
+    toolbar.appendChild(sep);
+    const addGroupBtn = document.createElement("button");
+    addGroupBtn.className = "el-add-btn";
+    addGroupBtn.textContent = `${instanceCount} +`;
+    addGroupBtn.title = `${instanceCount} matching element${instanceCount !== 1 ? "s" : ""} selected \u2014 click to add similar`;
+    toolbar.appendChild(addGroupBtn);
+    addGroupBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      drawPopoverEl?.remove();
+      drawPopoverEl = null;
+      if (pickerEl) {
+        pickerEl.remove();
         pickerEl = null;
-        drawPopoverEl?.remove();
-        drawPopoverEl = null;
-        addingMode = true;
-        setSelectMode(true);
-        showToast("Click another element to add it to the selection", 2500);
-      });
-    }
+        addGroupBtn.classList.remove("open");
+      } else {
+        addGroupBtn.classList.add("open");
+        showGroupPicker(
+          addGroupBtn,
+          () => addGroupBtn.classList.remove("open"),
+          (totalCount) => {
+            addGroupBtn.textContent = `${totalCount} +`;
+            addGroupBtn.title = `${totalCount} matching element${totalCount !== 1 ? "s" : ""} selected \u2014 click to add similar`;
+          }
+        );
+      }
+    });
     positionWithFlip(targetEl, toolbar);
   }
-  function showInstancePicker(anchorBtn, onClose, onApply) {
+  function showGroupPicker(anchorBtn, onClose, onCountChange) {
     if (pickerCloseHandler) {
       document.removeEventListener("click", pickerCloseHandler, { capture: true });
       pickerCloseHandler = null;
     }
     pickerEl?.remove();
-    const instances = currentInstances;
-    const allIndices = instances.map((_, i) => i);
-    const selected = new Set(
-      selectedInstanceIndices.size > 0 && selectedInstanceIndices.size <= instances.length ? [...selectedInstanceIndices].filter((i) => i < instances.length) : allIndices
-    );
+    if (!cachedNearGroups && currentTargetEl) {
+      const exactSet = new Set(currentEquivalentNodes);
+      cachedNearGroups = computeNearGroups(currentTargetEl, exactSet, shadowHost);
+    }
+    const groups = cachedNearGroups ?? [];
     const picker = document.createElement("div");
     picker.className = "el-picker";
     picker.style.left = "0px";
@@ -2389,72 +3330,89 @@ ${pad}</${tag}>`;
     header.className = "el-picker-header";
     const title = document.createElement("span");
     title.className = "el-picker-title";
-    title.textContent = currentBoundary?.componentName ?? "Instances";
-    const actions = document.createElement("div");
-    actions.className = "el-picker-actions";
-    const allLink = document.createElement("a");
-    allLink.textContent = "All";
-    const noneLink = document.createElement("a");
-    noneLink.textContent = "None";
-    actions.appendChild(allLink);
-    actions.appendChild(noneLink);
+    title.textContent = "Similar elements";
     header.appendChild(title);
-    header.appendChild(actions);
     picker.appendChild(header);
-    const list = document.createElement("div");
-    list.className = "el-picker-list";
-    picker.appendChild(list);
-    const checkboxes = [];
-    function renderRows() {
-      list.innerHTML = "";
-      checkboxes.length = 0;
-      instances.forEach((inst, i) => {
+    if (groups.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "el-group-empty";
+      empty.textContent = "No similar elements found";
+      picker.appendChild(empty);
+    } else {
+      let clearPreviewHighlights2 = function() {
+        shadowRoot.querySelectorAll(".highlight-preview").forEach((el) => el.remove());
+      }, updateSelection2 = function() {
+        const allNodes = [...baseNodes];
+        for (const idx of checkedGroups) {
+          for (const el of groups[idx].elements) {
+            if (!allNodes.includes(el)) allNodes.push(el);
+          }
+        }
+        currentEquivalentNodes = allNodes;
+        shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
+        currentEquivalentNodes.forEach((n) => highlightElement(n));
+        onCountChange(currentEquivalentNodes.length);
+        if (currentTargetEl && currentBoundary) {
+          sendTo("panel", {
+            type: "ELEMENT_SELECTED",
+            componentName: currentBoundary.componentName,
+            instanceCount: currentEquivalentNodes.length,
+            classes: typeof currentTargetEl.className === "string" ? currentTargetEl.className : "",
+            tailwindConfig: tailwindConfigCache
+          });
+        }
+      };
+      var clearPreviewHighlights = clearPreviewHighlights2, updateSelection = updateSelection2;
+      const list = document.createElement("div");
+      list.className = "el-picker-list";
+      picker.appendChild(list);
+      const checkedGroups = /* @__PURE__ */ new Set();
+      const baseNodes = [...currentEquivalentNodes];
+      groups.forEach((group, idx) => {
         const row = document.createElement("label");
-        row.className = "el-picker-row";
+        row.className = "el-group-row";
         const cb = document.createElement("input");
         cb.type = "checkbox";
-        cb.checked = selected.has(i);
+        cb.checked = false;
         cb.addEventListener("change", () => {
-          if (cb.checked) selected.add(i);
-          else selected.delete(i);
-          badge.className = "el-picker-badge" + (cb.checked ? " checked" : "");
-          updateApply();
+          if (cb.checked) checkedGroups.add(idx);
+          else checkedGroups.delete(idx);
+          updateSelection2();
         });
-        checkboxes.push(cb);
-        const badge = document.createElement("span");
-        badge.className = "el-picker-badge" + (cb.checked ? " checked" : "");
-        badge.textContent = String(i + 1);
-        const label = document.createElement("span");
-        label.className = "el-picker-label";
-        label.innerHTML = `${inst.label} <span class="el-picker-tag">${inst.parent}</span>`;
+        const count = document.createElement("span");
+        count.className = "el-group-count";
+        count.textContent = `(${group.elements.length})`;
+        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>`);
+        diff.innerHTML = parts.join(" ");
         row.appendChild(cb);
-        row.appendChild(badge);
-        row.appendChild(label);
+        row.appendChild(count);
+        row.appendChild(diff);
         list.appendChild(row);
+        row.addEventListener("mouseenter", () => {
+          clearPreviewHighlights2();
+          for (const el of group.elements) {
+            const rect = el.getBoundingClientRect();
+            const preview = document.createElement("div");
+            preview.className = "highlight-preview";
+            preview.style.top = `${rect.top - 3}px`;
+            preview.style.left = `${rect.left - 3}px`;
+            preview.style.width = `${rect.width + 6}px`;
+            preview.style.height = `${rect.height + 6}px`;
+            shadowRoot.appendChild(preview);
+          }
+        });
+        row.addEventListener("mouseleave", () => {
+          clearPreviewHighlights2();
+        });
       });
     }
-    renderRows();
-    allLink.addEventListener("click", () => {
-      instances.forEach((_, i) => selected.add(i));
-      renderRows();
-      updateApply();
-    });
-    noneLink.addEventListener("click", () => {
-      selected.clear();
-      renderRows();
-      updateApply();
-    });
-    const footer = document.createElement("div");
-    footer.className = "el-picker-footer";
-    const applyBtn = document.createElement("button");
-    applyBtn.className = "el-picker-apply";
-    footer.appendChild(applyBtn);
-    picker.appendChild(footer);
-    function updateApply() {
-      applyBtn.textContent = `Apply (${selected.size} selected)`;
-    }
-    updateApply();
+    positionWithFlip(anchorBtn, picker);
     const removePicker = () => {
+      shadowRoot.querySelectorAll(".highlight-preview").forEach((el) => el.remove());
       if (pickerCloseHandler) {
         document.removeEventListener("click", pickerCloseHandler, { capture: true });
         pickerCloseHandler = null;
@@ -2462,16 +3420,6 @@ ${pad}</${tag}>`;
       pickerEl?.remove();
       pickerEl = null;
     };
-    applyBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      const selectedIndices = [...selected];
-      selectedInstanceIndices = new Set(selectedIndices);
-      sendTo("panel", { type: "SELECT_MATCHING", indices: selectedIndices });
-      onApply?.(selectedIndices);
-      removePicker();
-      onClose();
-    });
-    positionWithFlip(anchorBtn, picker);
     setTimeout(() => {
       pickerCloseHandler = (e) => {
         const path = e.composedPath();
@@ -2515,6 +3463,26 @@ ${pad}</${tag}>`;
       });
       popover.appendChild(row);
     }
+    const sep = document.createElement("div");
+    sep.style.cssText = "height:1px;background:#DFE2E2;margin:4px 0;";
+    popover.appendChild(sep);
+    const screenshotHeader = document.createElement("div");
+    screenshotHeader.className = "draw-popover-header";
+    screenshotHeader.textContent = "Screenshot & Annotate";
+    popover.appendChild(screenshotHeader);
+    const screenshotRow = document.createElement("button");
+    screenshotRow.className = "draw-popover-item";
+    screenshotRow.innerHTML = `
+    <span class="draw-popover-icon">\u{1F4F7}</span>
+    <span class="draw-popover-label">Screenshot & Annotate</span>
+  `;
+    screenshotRow.addEventListener("click", (e) => {
+      e.stopPropagation();
+      drawPopoverEl?.remove();
+      drawPopoverEl = null;
+      handleCaptureScreenshot();
+    });
+    popover.appendChild(screenshotRow);
     drawPopoverEl = popover;
     shadowRoot.appendChild(popover);
     positionWithFlip(anchorBtn, popover, "top-start");
@@ -2563,86 +3531,25 @@ ${pad}</${tag}>`;
     e.preventDefault();
     e.stopPropagation();
     const target = e.target;
-    const fiber = getFiber(target);
-    const boundary = fiber ? findComponentBoundary(fiber) : null;
-    const hasFiber = fiber !== null && boundary !== null;
-    const newNodes = [];
-    let componentName;
-    if (hasFiber) {
-      const rootFiber = getRootFiber();
-      if (!rootFiber) {
-        showToast("Could not find React root.");
-        return;
-      }
-      const instances = findAllInstances(rootFiber, boundary.componentType);
-      const path = getChildPath(boundary.componentFiber, fiber);
-      for (const inst of instances) {
-        const node = resolvePathToDOM(inst, path);
-        if (node) newNodes.push(node);
-      }
-      componentName = boundary.componentName;
-    } else {
-      const targetEl2 = target;
-      newNodes.push(...findDOMEquivalents(targetEl2));
-      componentName = targetEl2.tagName.toLowerCase();
-    }
-    if (addingMode && currentEquivalentNodes.length > 0) {
-      addingMode = false;
-      const merged = [...currentEquivalentNodes];
-      for (const n of newNodes) {
-        if (!merged.includes(n)) merged.push(n);
-      }
-      clearHighlights();
-      merged.forEach((n) => highlightElement(n));
-      currentEquivalentNodes = merged;
-      selectedInstanceIndices = /* @__PURE__ */ new Set();
-      if (currentTargetEl) showDrawButton(currentTargetEl);
-      sendTo("panel", { type: "ELEMENT_SELECTED", componentName: currentBoundary?.componentName ?? componentName, instanceCount: merged.length, classes: currentTargetEl?.className ?? "", tailwindConfig: await fetchTailwindConfig() });
-      return;
-    }
+    const targetEl = target;
+    const classString = typeof targetEl.className === "string" ? targetEl.className : "";
+    const result = findExactMatches(targetEl, shadowHost);
+    const componentName = result.componentName ?? targetEl.tagName.toLowerCase();
     clearHighlights();
-    const equivalentNodes = [];
-    for (const node of newNodes) {
-      equivalentNodes.push(node);
+    for (const node of result.exactMatch) {
       highlightElement(node);
     }
-    if (hasFiber && equivalentNodes.length <= 1) {
-      const repeated = findInlineRepeatedNodes(fiber, boundary.componentFiber);
-      if (repeated.length > 0) {
-        clearHighlights();
-        equivalentNodes.length = 0;
-        for (const node of repeated) {
-          equivalentNodes.push(node);
-          highlightElement(node);
-        }
-      }
-    }
-    console.log(`[overlay] ${componentName} \u2014 ${equivalentNodes.length} highlighted`);
+    console.log(`[overlay] ${componentName} \u2014 ${result.exactMatch.length} exact matches highlighted`);
     const config = await fetchTailwindConfig();
-    const targetEl = target;
-    const classString = targetEl.className;
-    if (typeof classString !== "string") return;
-    currentEquivalentNodes = equivalentNodes;
+    currentEquivalentNodes = result.exactMatch;
     currentTargetEl = targetEl;
     currentBoundary = { componentName };
-    selectedInstanceIndices = /* @__PURE__ */ new Set();
-    if (hasFiber) {
-      const rootFiber = getRootFiber();
-      const instances = rootFiber ? findAllInstances(rootFiber, boundary.componentType) : [];
-      currentInstances = instances.map((inst, i) => {
-        const domNode = inst.stateNode instanceof HTMLElement ? inst.stateNode : null;
-        const label = domNode ? (domNode.innerText || "").trim().slice(0, 40) || `#${i + 1}` : `#${i + 1}`;
-        const parentFiber = inst.return;
-        const parent = parentFiber?.type?.name ?? "";
-        return { index: i, label, parent };
-      });
-    } else {
-      currentInstances = equivalentNodes.map((node, i) => ({
-        index: i,
-        label: (node.innerText || "").trim().slice(0, 40) || `#${i + 1}`,
-        parent: node.parentElement?.tagName.toLowerCase() ?? ""
-      }));
-    }
+    cachedNearGroups = null;
+    currentInstances = result.exactMatch.map((node, i) => ({
+      index: i,
+      label: (node.innerText || "").trim().slice(0, 40) || `#${i + 1}`,
+      parent: node.parentElement?.tagName.toLowerCase() ?? ""
+    }));
     clearHoverPreview();
     setSelectMode(false);
     showDrawButton(targetEl);
@@ -2653,7 +3560,7 @@ ${pad}</${tag}>`;
     sendTo("panel", {
       type: "ELEMENT_SELECTED",
       componentName,
-      instanceCount: equivalentNodes.length,
+      instanceCount: result.exactMatch.length,
       classes: classString,
       tailwindConfig: config
     });
@@ -2664,7 +3571,6 @@ ${pad}</${tag}>`;
       document.addEventListener("click", clickHandler, { capture: true });
       document.addEventListener("mousemove", mouseMoveHandler, { passive: true });
     } else {
-      addingMode = false;
       document.documentElement.style.cursor = "";
       document.removeEventListener("click", clickHandler, { capture: true });
       document.removeEventListener("mousemove", mouseMoveHandler);
@@ -2672,16 +3578,19 @@ ${pad}</${tag}>`;
     }
     sendTo("panel", { type: "SELECT_MODE_CHANGED", active: on });
   }
+  var PANEL_OPEN_KEY = "tw-inspector-panel-open";
   function toggleInspect(btn) {
     active = !active;
     if (active) {
       btn.classList.add("active");
+      sessionStorage.setItem(PANEL_OPEN_KEY, "1");
       const panelUrl = `${SERVER_ORIGIN}/panel`;
       if (!activeContainer.isOpen()) {
         activeContainer.open(panelUrl);
       }
     } else {
       btn.classList.remove("active");
+      sessionStorage.removeItem(PANEL_OPEN_KEY);
       setSelectMode(false);
       activeContainer.close();
       revertPreview();
@@ -2710,7 +3619,8 @@ ${pad}</${tag}>`;
     const wrapper = document.createElement("div");
     wrapper.setAttribute("data-tw-design-canvas", "true");
     wrapper.style.cssText = `
-    border: 2px dashed #00848B;
+    outline: 2px dashed #00848B;
+    outline-offset: 2px;
     border-radius: 6px;
     background: #FAFBFB;
     position: relative;
@@ -2724,6 +3634,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%;
@@ -2836,7 +3747,7 @@ ${pad}</${tag}>`;
       default:
         targetEl.insertAdjacentElement("beforebegin", wrapper);
     }
-    designCanvasWrappers.push(wrapper);
+    designCanvasWrappers.push({ wrapper, replacedNodes: null, parent: null, anchor: null });
     iframe.addEventListener("load", () => {
       const contextMsg = {
         type: "ELEMENT_CONTEXT",
@@ -2859,6 +3770,99 @@ ${pad}</${tag}>`;
       setTimeout(trySend, 200);
     });
   }
+  async function handleCaptureScreenshot() {
+    if (!currentTargetEl || !currentBoundary) {
+      showToast("Select an element first");
+      return;
+    }
+    if (!areSiblings(currentEquivalentNodes)) {
+      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));
+    } catch (err) {
+      showToast("Screenshot capture failed");
+      console.error("[overlay] captureRegion error:", err);
+      return;
+    }
+    const parent = currentEquivalentNodes[0].parentElement;
+    const anchor = currentEquivalentNodes[0].nextSibling;
+    const firstStyle = getComputedStyle(currentEquivalentNodes[0]);
+    const lastStyle = getComputedStyle(currentEquivalentNodes[currentEquivalentNodes.length - 1]);
+    const marginTop = firstStyle.marginTop;
+    const marginBottom = lastStyle.marginBottom;
+    const marginLeft = firstStyle.marginLeft;
+    const marginRight = firstStyle.marginRight;
+    const replacedNodes = [...currentEquivalentNodes];
+    const targetEl = currentTargetEl;
+    const boundary = currentBoundary;
+    const instanceCount = currentEquivalentNodes.length;
+    clearHighlights();
+    for (const node of currentEquivalentNodes) {
+      node.remove();
+    }
+    const PANEL_CHROME_HEIGHT = 40;
+    const wrapper = document.createElement("div");
+    wrapper.setAttribute("data-tw-design-canvas", "true");
+    wrapper.style.cssText = `
+    outline: 2px dashed #00848B;
+    outline-offset: 2px;
+    border-radius: 6px;
+    background: #FAFBFB;
+    position: relative;
+    overflow: hidden;
+    width: ${screenshotWidth}px;
+    height: ${screenshotHeight + PANEL_CHROME_HEIGHT}px;
+    min-width: 300px;
+    margin-top: ${marginTop};
+    margin-bottom: ${marginBottom};
+    margin-left: ${marginLeft};
+    margin-right: ${marginRight};
+    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
+    box-sizing: border-box;
+  `;
+    const iframe = document.createElement("iframe");
+    iframe.src = `${SERVER_ORIGIN}/panel/?mode=design`;
+    iframe.style.cssText = `
+    width: 100%;
+    height: 100%;
+    border: none;
+    display: block;
+  `;
+    wrapper.appendChild(iframe);
+    if (anchor) {
+      parent.insertBefore(wrapper, anchor);
+    } else {
+      parent.appendChild(wrapper);
+    }
+    designCanvasWrappers.push({ wrapper, replacedNodes, parent, anchor });
+    iframe.addEventListener("load", () => {
+      const contextMsg = {
+        type: "ELEMENT_CONTEXT",
+        componentName: boundary.componentName,
+        instanceCount,
+        target: {
+          tag: targetEl.tagName.toLowerCase(),
+          classes: typeof targetEl.className === "string" ? targetEl.className : "",
+          innerText: (targetEl.innerText || "").trim().slice(0, 60)
+        },
+        context: buildContext(targetEl, "", "", /* @__PURE__ */ new Map()),
+        insertMode: "replace",
+        screenshot
+      };
+      let attempts = 0;
+      const trySend = () => {
+        sendTo("design", contextMsg);
+        attempts++;
+        if (attempts < 5) setTimeout(trySend, 300);
+      };
+      setTimeout(trySend, 200);
+    });
+  }
   function getDefaultContainer() {
     try {
       const stored = localStorage.getItem("tw-panel-container");
@@ -2909,6 +3913,8 @@ ${pad}</${tag}>`;
         }
       } else if (msg.type === "PATCH_PREVIEW" && currentEquivalentNodes.length > 0) {
         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_STAGE" && currentTargetEl && currentBoundary) {
@@ -2958,8 +3964,11 @@ ${pad}</${tag}>`;
         }
       } else if (msg.type === "INSERT_DESIGN_CANVAS") {
         injectDesignCanvas(msg.insertMode);
+      } else if (msg.type === "CAPTURE_SCREENSHOT") {
+        handleCaptureScreenshot();
       } else if (msg.type === "DESIGN_SUBMITTED") {
-        const last = designCanvasWrappers[designCanvasWrappers.length - 1];
+        const lastEntry = designCanvasWrappers[designCanvasWrappers.length - 1];
+        const last = lastEntry?.wrapper;
         if (last) {
           const iframe = last.querySelector("iframe");
           if (iframe && msg.image) {
@@ -2978,9 +3987,22 @@ ${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) last.remove();
+        if (last) {
+          if (last.replacedNodes && last.parent) {
+            for (const node of last.replacedNodes) {
+              if (last.anchor) {
+                last.parent.insertBefore(node, last.anchor);
+              } else {
+                last.parent.appendChild(node);
+              }
+            }
+          }
+          last.wrapper.remove();
+        }
       }
     });
     window.addEventListener("resize", () => {
@@ -2988,13 +4010,24 @@ ${pad}</${tag}>`;
         shadowRoot.querySelectorAll(".highlight-overlay").forEach((el) => el.remove());
         currentEquivalentNodes.forEach((n) => highlightElement(n));
       }
+      if (toolbarEl && currentTargetEl) {
+        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 });
+    if (sessionStorage.getItem(PANEL_OPEN_KEY) === "1") {
+      active = true;
+      btn.classList.add("active");
+      activeContainer.open(`${SERVER_ORIGIN}/panel`);
+    }
     window.addEventListener("overlay-ws-connected", () => {
       if (wasConnected) {
         showToast("Reconnected");