react-grab 0.0.19 → 0.0.21

package/dist/index.cjs

@@ -12,18 +12,7 @@ var source = require('bippy/dist/source');
  * LICENSE file in the root directory of this source tree.
  */
 
-// src/adapters.ts
-var cursorAdapter = {
-  name: "cursor",
-  open: (promptText) => {
-    if (!promptText) return;
-    const url = new URL("cursor://anysphere.cursor-deeplink/prompt");
-    url.searchParams.set("text", promptText);
-    window.open(url.toString(), "_blank");
-  }
-};
-
-// src/hotkeys.ts
+// src/utils/is-keyboard-event-triggered-by-input.ts
 var FORM_TAGS_AND_ROLES = [
   "input",
   "textarea",
@@ -71,394 +60,51 @@ var isHotkeyEnabledOnTagName = (event, enabledOnTags = false) => {
 var isKeyboardEventTriggeredByInput = (event) => {
   return isHotkeyEnabledOnTagName(event, FORM_TAGS_AND_ROLES);
 };
-var trackHotkeys = () => {
-  const handleKeyDown = (event) => {
-    if (isKeyboardEventTriggeredByInput(event)) {
-      return;
-    }
-    if (event.code === void 0) {
-      return;
-    }
-    libStore.setState((state) => {
-      const newTimestamps = new Map(state.keyPressTimestamps);
-      if (!state.pressedKeys.has(event.key)) {
-        newTimestamps.set(event.key, Date.now());
-      }
-      return {
-        ...state,
-        keyPressTimestamps: newTimestamps,
-        pressedKeys: /* @__PURE__ */ new Set([event.key, ...state.pressedKeys])
-      };
-    });
-  };
-  const handleKeyUp = (event) => {
-    if (event.code === void 0) {
-      return;
-    }
-    libStore.setState((state) => {
-      const newTimestamps = new Map(state.keyPressTimestamps);
-      newTimestamps.delete(event.key);
-      return {
-        ...state,
-        keyPressTimestamps: newTimestamps,
-        pressedKeys: new Set(
-          [...state.pressedKeys].filter((key) => key !== event.key)
-        )
-      };
-    });
-  };
-  const handleBlur = () => {
-    libStore.setState((state) => ({
-      ...state,
-      keyPressTimestamps: /* @__PURE__ */ new Map(),
-      pressedKeys: /* @__PURE__ */ new Set()
-    }));
-  };
-  const handleContextmenu = () => {
-    libStore.setState((state) => ({
-      ...state,
-      keyPressTimestamps: /* @__PURE__ */ new Map(),
-      pressedKeys: /* @__PURE__ */ new Set()
-    }));
-  };
-  document.addEventListener("keydown", handleKeyDown);
-  document.addEventListener("keyup", handleKeyUp);
-  window.addEventListener("blur", handleBlur);
-  window.addEventListener("contextmenu", handleContextmenu);
-  return () => {
-    document.removeEventListener("keydown", handleKeyDown);
-    document.removeEventListener("keyup", handleKeyUp);
-    window.removeEventListener("blur", handleBlur);
-    window.removeEventListener("contextmenu", handleContextmenu);
-  };
-};
-var isKeyPressed = (key) => {
-  const { pressedKeys } = libStore.getState();
-  if (key.length === 1) {
-    return pressedKeys.has(key.toLowerCase()) || pressedKeys.has(key.toUpperCase());
-  }
-  return pressedKeys.has(key);
-};
-var watchKeyHeldFor = (key, duration, onHeld) => {
-  let timeoutId = null;
-  let unsubscribe = null;
-  const watchStartTime = Date.now();
-  const cleanup = () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-    if (unsubscribe !== null) {
-      unsubscribe();
-      unsubscribe = null;
-    }
-  };
-  const checkSingleKeyPressed = (keyToCheck, pressedKeys) => {
-    if (keyToCheck.length === 1) {
-      return pressedKeys.has(keyToCheck.toLowerCase()) || pressedKeys.has(keyToCheck.toUpperCase());
-    }
-    return pressedKeys.has(keyToCheck);
-  };
-  const checkAllKeysPressed = (pressedKeys) => {
-    if (Array.isArray(key)) {
-      return key.every(
-        (keyFromCombo) => checkSingleKeyPressed(keyFromCombo, pressedKeys)
-      );
-    }
-    return checkSingleKeyPressed(key, pressedKeys);
-  };
-  const scheduleCallback = () => {
-    const state = libStore.getState();
-    const { pressedKeys } = state;
-    if (!checkAllKeysPressed(pressedKeys)) {
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-      return;
-    }
-    const elapsed = Date.now() - watchStartTime;
-    const remaining = duration - elapsed;
-    if (remaining <= 0) {
-      onHeld();
-      cleanup();
-      return;
-    }
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      onHeld();
-      cleanup();
-    }, remaining);
-  };
-  unsubscribe = libStore.subscribe(
-    () => {
-      scheduleCallback();
-    },
-    (state) => state.pressedKeys
-  );
-  scheduleCallback();
-  return cleanup;
-};
-var fiberRoots = bippy._fiberRoots;
-bippy.instrument({
-  onCommitFiberRoot(_, fiberRoot) {
-    fiberRoots.add(fiberRoot);
-  }
-});
-var dedupeFileName = (fileName) => {
-  if (!fileName) return fileName;
-  const parts = fileName.split("/");
-  for (let start = 0; start < parts.length / 2; start++) {
-    for (let len = 1; len <= parts.length - start; len++) {
-      const firstSeq = parts.slice(start, start + len);
-      const secondStart = start + len;
-      const secondSeq = parts.slice(secondStart, secondStart + len);
-      if (firstSeq.length > 2 && firstSeq.length === secondSeq.length && firstSeq.every((part, i) => part === secondSeq[i])) {
-        return parts.slice(secondStart).join("/");
-      }
-    }
-  }
-  return fileName;
-};
-var getStack = async (element) => {
-  const fiber = bippy.getFiberFromHostInstance(element);
-  if (!fiber) return null;
-  const stackTrace = source.getFiberStackTrace(fiber);
-  const rawOwnerStack = await source.getOwnerStack(stackTrace);
-  const stack = rawOwnerStack.map((item) => ({
-    componentName: item.name,
-    fileName: dedupeFileName(item.source?.fileName)
-  }));
-  if (stack.length > 0 && fiber) {
-    const fiberSource = await source.getFiberSource(fiber);
-    if (fiberSource) {
-      const fiberType = fiber.type;
-      const displayName = fiberType?.displayName ?? fiberType?.name ?? stack[0].componentName;
-      stack[0].displayName = displayName;
-      const dedupedFileName = dedupeFileName(fiberSource.fileName);
-      stack[0].source = `${dedupedFileName}:${fiberSource.lineNumber}:${fiberSource.columnNumber}`;
-    }
-  }
-  return stack;
-};
-var filterStack = (stack) => {
-  return stack.filter(
-    (item) => item.fileName && !item.fileName.includes("node_modules") && item.componentName.length > 1 && !item.fileName.startsWith("_")
-  );
-};
-var serializeStack = (stack) => {
-  return stack.map((item, index) => {
-    const fileName = item.fileName;
-    const componentName = item.displayName || item.componentName;
-    let result = `${componentName}${fileName ? ` (${fileName})` : ""}`;
-    if (index === 0 && item.source) {
-      result += `
-${item.source}`;
-    }
-    return result;
-  }).join("\n");
-};
-var getHTMLSnippet = (element) => {
-  const semanticTags = /* @__PURE__ */ new Set([
-    "article",
-    "aside",
-    "footer",
-    "form",
-    "header",
-    "main",
-    "nav",
-    "section"
-  ]);
-  const hasDistinguishingFeatures = (el) => {
-    const tagName = el.tagName.toLowerCase();
-    if (semanticTags.has(tagName)) return true;
-    if (el.id) return true;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim();
-      if (classes && classes.length > 0) return true;
-    }
-    return Array.from(el.attributes).some(
-      (attr) => attr.name.startsWith("data-")
-    );
-  };
-  const getAncestorChain = (el, maxDepth = 10) => {
-    const ancestors2 = [];
-    let current = el.parentElement;
-    let depth = 0;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      if (hasDistinguishingFeatures(current)) {
-        ancestors2.push(current);
-        if (ancestors2.length >= 3) break;
-      }
-      current = current.parentElement;
-      depth++;
-    }
-    return ancestors2.reverse();
-  };
-  const getCSSPath = (el) => {
-    const parts = [];
-    let current = el;
-    let depth = 0;
-    const maxDepth = 5;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      let selector = current.tagName.toLowerCase();
-      if (current.id) {
-        selector += `#${current.id}`;
-        parts.unshift(selector);
-        break;
-      } else if (current.className && typeof current.className === "string" && current.className.trim()) {
-        const classes = current.className.trim().split(/\s+/).slice(0, 2);
-        selector += `.${classes.join(".")}`;
-      }
-      if (!current.id && (!current.className || !current.className.trim()) && current.parentElement) {
-        const siblings = Array.from(current.parentElement.children);
-        const index = siblings.indexOf(current);
-        if (index >= 0 && siblings.length > 1) {
-          selector += `:nth-child(${index + 1})`;
-        }
-      }
-      parts.unshift(selector);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(" > ");
-  };
-  const getElementTag = (el, compact = false) => {
-    const tagName = el.tagName.toLowerCase();
-    const attrs = [];
-    if (el.id) {
-      attrs.push(`id="${el.id}"`);
-    }
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        const displayClasses = compact ? classes.slice(0, 3) : classes;
-        let classStr = displayClasses.join(" ");
-        if (classStr.length > 30) {
-          classStr = classStr.substring(0, 30) + "...";
-        }
-        attrs.push(`class="${classStr}"`);
-      }
-    }
-    const dataAttrs = Array.from(el.attributes).filter(
-      (attr) => attr.name.startsWith("data-")
-    );
-    const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
-    for (const attr of displayDataAttrs) {
-      let value = attr.value;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`${attr.name}="${value}"`);
-    }
-    const ariaLabel = el.getAttribute("aria-label");
-    if (ariaLabel && !compact) {
-      let value = ariaLabel;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`aria-label="${value}"`);
-    }
-    return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
-  };
-  const getClosingTag = (el) => {
-    return `</${el.tagName.toLowerCase()}>`;
-  };
-  const getTextContent = (el) => {
-    let text = el.textContent || "";
-    text = text.trim().replace(/\s+/g, " ");
-    const maxLength = 60;
-    if (text.length > maxLength) {
-      text = text.substring(0, maxLength) + "...";
-    }
-    return text;
-  };
-  const getSiblingIdentifier = (el) => {
-    if (el.id) return `#${el.id}`;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        return `.${classes[0]}`;
-      }
-    }
-    return null;
-  };
-  const lines = [];
-  lines.push(`Path: ${getCSSPath(element)}`);
-  lines.push("");
-  const ancestors = getAncestorChain(element);
-  for (let i = 0; i < ancestors.length; i++) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getElementTag(ancestors[i], true));
-  }
-  const parent = element.parentElement;
-  let targetIndex = -1;
-  if (parent) {
-    const siblings = Array.from(parent.children);
-    targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      const prevSibling = siblings[targetIndex - 1];
-      const prevId = getSiblingIdentifier(prevSibling);
-      if (prevId && targetIndex <= 2) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ${getElementTag(prevSibling, true)}`);
-        lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
-      } else if (targetIndex > 0) {
-        const indent2 = "  ".repeat(ancestors.length);
-        lines.push(
-          `${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
-        );
-      }
-    }
-  }
-  const indent = "  ".repeat(ancestors.length);
-  lines.push(indent + "  <!-- SELECTED -->");
-  const textContent = getTextContent(element);
-  const childrenCount = element.children.length;
-  if (textContent && childrenCount === 0 && textContent.length < 40) {
-    lines.push(
-      `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(
-        element
-      )}`
+
+// src/utils/mount-root.ts
+var ATTRIBUTE_NAME = "data-react-grab";
+var mountRoot = () => {
+  const mountedHost = document.querySelector(`[${ATTRIBUTE_NAME}]`);
+  if (mountedHost) {
+    const mountedRoot = mountedHost.shadowRoot?.querySelector(
+      `[${ATTRIBUTE_NAME}]`
     );
-  } else {
-    lines.push(indent + "  " + getElementTag(element));
-    if (textContent) {
-      lines.push(`${indent}    ${textContent}`);
-    }
-    if (childrenCount > 0) {
-      lines.push(
-        `${indent}    ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
-      );
-    }
-    lines.push(indent + "  " + getClosingTag(element));
-  }
-  if (parent && targetIndex >= 0) {
-    const siblings = Array.from(parent.children);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      const nextSibling = siblings[targetIndex + 1];
-      const nextId = getSiblingIdentifier(nextSibling);
-      if (nextId && siblingsAfter <= 2) {
-        lines.push(`${indent}  ${getElementTag(nextSibling, true)}`);
-        lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
-      } else {
-        lines.push(
-          `${indent}  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-        );
-      }
+    if (mountedRoot instanceof HTMLDivElement && mountedHost.shadowRoot) {
+      return mountedRoot;
     }
   }
-  for (let i = ancestors.length - 1; i >= 0; i--) {
-    const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getClosingTag(ancestors[i]));
-  }
-  return lines.join("\n");
+  const host = document.createElement("div");
+  host.setAttribute(ATTRIBUTE_NAME, "true");
+  host.style.zIndex = "2147483646";
+  host.style.position = "fixed";
+  host.style.top = "0";
+  host.style.left = "0";
+  const shadowRoot = host.attachShadow({ mode: "open" });
+  const root = document.createElement("div");
+  root.setAttribute(ATTRIBUTE_NAME, "true");
+  shadowRoot.appendChild(root);
+  const doc = document.body ?? document.documentElement;
+  doc.appendChild(host);
+  return root;
+};
+
+// src/utils/is-element-visible.ts
+var isElementVisible = (element, computedStyle = window.getComputedStyle(element)) => {
+  return computedStyle.display !== "none" && computedStyle.visibility !== "hidden" && computedStyle.opacity !== "0";
 };
 
 // src/overlay.ts
+var templateCache = /* @__PURE__ */ new Map();
+var html = (strings, ...values) => {
+  const key = strings.join("");
+  let template = templateCache.get(key);
+  if (!template) {
+    template = document.createElement("template");
+    template.innerHTML = strings.reduce((acc, str, i) => acc + str + (values[i] ?? ""), "");
+    templateCache.set(key, template);
+  }
+  return template.content.firstElementChild.cloneNode(true);
+};
 var VIEWPORT_MARGIN_PX = 8;
 var LABEL_OFFSET_PX = 6;
 var INDICATOR_CLAMP_PADDING_PX = 4;
@@ -476,20 +122,23 @@ var createSelectionElement = ({
   x,
   y
 }) => {
-  const overlay = document.createElement("div");
-  overlay.style.position = "fixed";
-  overlay.style.top = `${y}px`;
-  overlay.style.left = `${x}px`;
-  overlay.style.width = `${width}px`;
-  overlay.style.height = `${height}px`;
-  overlay.style.borderRadius = borderRadius;
-  overlay.style.transform = transform;
-  overlay.style.pointerEvents = "none";
-  overlay.style.border = "1px solid rgb(210, 57, 192)";
-  overlay.style.backgroundColor = "rgba(210, 57, 192, 0.2)";
-  overlay.style.zIndex = "2147483646";
-  overlay.style.boxSizing = "border-box";
-  overlay.style.display = "none";
+  const overlay = html`
+    <div style="
+      position: fixed;
+      top: ${y}px;
+      left: ${x}px;
+      width: ${width}px;
+      height: ${height}px;
+      border-radius: ${borderRadius};
+      transform: ${transform};
+      pointer-events: auto;
+      border: 1px solid rgb(210, 57, 192);
+      background-color: rgba(210, 57, 192, 0.2);
+      z-index: 2147483646;
+      box-sizing: border-box;
+      display: none;
+    "></div>
+  `;
   return overlay;
 };
 var updateSelectionElement = (element, { borderRadius, height, transform, width, x, y }) => {
@@ -520,7 +169,7 @@ var updateSelectionElement = (element, { borderRadius, height, transform, width,
     element.style.transform = transform;
   }
 };
-var createSelectionOverlay = (root) => {
+var createSelectionOverlay = (root, onSelectionClick) => {
   const element = createSelectionElement({
     borderRadius: "0px",
     height: 0,
@@ -531,9 +180,24 @@ var createSelectionOverlay = (root) => {
   });
   root.appendChild(element);
   let visible = false;
+  let hasBeenShown = false;
+  element.addEventListener(
+    "mousedown",
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      if (onSelectionClick) {
+        onSelectionClick();
+      }
+    },
+    true
+  );
   return {
+    element,
     hide: () => {
       visible = false;
+      hasBeenShown = false;
       element.style.display = "none";
     },
     isVisible: () => visible,
@@ -542,7 +206,17 @@ var createSelectionOverlay = (root) => {
       element.style.display = "block";
     },
     update: (selection) => {
-      updateSelectionElement(element, selection);
+      if (!hasBeenShown) {
+        element.style.top = `${selection.y}px`;
+        element.style.left = `${selection.x}px`;
+        element.style.width = `${selection.width}px`;
+        element.style.height = `${selection.height}px`;
+        element.style.borderRadius = selection.borderRadius;
+        element.style.transform = selection.transform;
+        hasBeenShown = true;
+      } else {
+        updateSelectionElement(element, selection);
+      }
     }
   };
 };
@@ -571,15 +245,18 @@ var createGrabbedOverlay = (root, selection) => {
   }, 300);
 };
 var createSpinner = () => {
-  const spinner = document.createElement("span");
-  spinner.style.display = "inline-block";
-  spinner.style.width = "8px";
-  spinner.style.height = "8px";
-  spinner.style.border = "1.5px solid rgb(210, 57, 192)";
-  spinner.style.borderTopColor = "transparent";
-  spinner.style.borderRadius = "50%";
-  spinner.style.marginRight = "4px";
-  spinner.style.verticalAlign = "middle";
+  const spinner = html`
+    <span style="
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border: 1.5px solid rgb(210, 57, 192);
+      border-top-color: transparent;
+      border-radius: 50%;
+      margin-right: 4px;
+      vertical-align: middle;
+    "></span>
+  `;
   spinner.animate(
     [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
     {
@@ -592,27 +269,30 @@ var createSpinner = () => {
 };
 var activeIndicator = null;
 var createIndicator = () => {
-  const indicator = document.createElement("div");
-  indicator.style.position = "fixed";
-  indicator.style.top = "calc(8px + env(safe-area-inset-top))";
-  indicator.style.padding = "2px 6px";
-  indicator.style.backgroundColor = "#fde7f7";
-  indicator.style.color = "#b21c8e";
-  indicator.style.border = "1px solid #f7c5ec";
-  indicator.style.borderRadius = "4px";
-  indicator.style.fontSize = "11px";
-  indicator.style.fontWeight = "500";
-  indicator.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
-  indicator.style.zIndex = "2147483647";
-  indicator.style.pointerEvents = "none";
-  indicator.style.opacity = "0";
-  indicator.style.transition = "opacity 0.2s ease-in-out";
-  indicator.style.display = "flex";
-  indicator.style.alignItems = "center";
-  indicator.style.maxWidth = "calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)))";
-  indicator.style.overflow = "hidden";
-  indicator.style.textOverflow = "ellipsis";
-  indicator.style.whiteSpace = "nowrap";
+  const indicator = html`
+    <div style="
+      position: fixed;
+      top: calc(8px + env(safe-area-inset-top));
+      padding: 2px 6px;
+      background-color: #fde7f7;
+      color: #b21c8e;
+      border: 1px solid #f7c5ec;
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      z-index: 2147483647;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+      display: flex;
+      align-items: center;
+      max-width: calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    "></div>
+  `;
   return indicator;
 };
 var showLabel = (root, selectionLeftPx, selectionTopPx, tagName) => {
@@ -755,633 +435,496 @@ var cleanupGrabbedIndicators = () => {
   }
   activeGrabbedIndicators.clear();
 };
-var activeProgressIndicator = null;
-var createProgressIndicatorElement = () => {
-  const container = document.createElement("div");
-  container.style.position = "fixed";
-  container.style.zIndex = "2147483647";
-  container.style.pointerEvents = "none";
-  container.style.opacity = "0";
-  container.style.transition = "opacity 0.1s ease-in-out";
-  const progressBarContainer = document.createElement("div");
-  progressBarContainer.style.width = "32px";
-  progressBarContainer.style.height = "2px";
-  progressBarContainer.style.backgroundColor = "rgba(178, 28, 142, 0.2)";
-  progressBarContainer.style.borderRadius = "1px";
-  progressBarContainer.style.overflow = "hidden";
-  progressBarContainer.style.position = "relative";
-  const progressBarFill = document.createElement("div");
-  progressBarFill.style.width = "0%";
-  progressBarFill.style.height = "100%";
-  progressBarFill.style.backgroundColor = "#b21c8e";
-  progressBarFill.style.borderRadius = "1px";
-  progressBarFill.style.transition = "width 0.05s linear";
-  progressBarFill.setAttribute("data-progress-fill", "true");
-  progressBarContainer.appendChild(progressBarFill);
-  container.appendChild(progressBarContainer);
-  return container;
+bippy.instrument({
+  onCommitFiberRoot(_, fiberRoot) {
+    bippy._fiberRoots.add(fiberRoot);
+  }
+});
+var getSourceTrace = async (element) => {
+  const fiber = bippy.getFiberFromHostInstance(element);
+  if (!fiber) return null;
+  const ownerStack = source.getOwnerStack(fiber);
+  const sources = await source.getSourcesFromStack(
+    ownerStack,
+    Number.MAX_SAFE_INTEGER
+  );
+  if (!sources) return null;
+  return sources;
 };
-var showProgressIndicator = (root, progress, mouseX, mouseY) => {
-  if (!activeProgressIndicator) {
-    activeProgressIndicator = createProgressIndicatorElement();
-    root.appendChild(activeProgressIndicator);
-    requestAnimationFrame(() => {
-      if (activeProgressIndicator) {
-        activeProgressIndicator.style.opacity = "1";
+var getHTMLSnippet = (element) => {
+  const semanticTags = /* @__PURE__ */ new Set([
+    "article",
+    "aside",
+    "footer",
+    "form",
+    "header",
+    "main",
+    "nav",
+    "section"
+  ]);
+  const hasDistinguishingFeatures = (el) => {
+    const tagName = el.tagName.toLowerCase();
+    if (semanticTags.has(tagName)) return true;
+    if (el.id) return true;
+    if (el.className && typeof el.className === "string") {
+      const classes = el.className.trim();
+      if (classes && classes.length > 0) return true;
+    }
+    return Array.from(el.attributes).some(
+      (attr) => attr.name.startsWith("data-")
+    );
+  };
+  const getAncestorChain = (el, maxDepth = 10) => {
+    const ancestors2 = [];
+    let current = el.parentElement;
+    let depth = 0;
+    while (current && depth < maxDepth && current.tagName !== "BODY") {
+      if (hasDistinguishingFeatures(current)) {
+        ancestors2.push(current);
+        if (ancestors2.length >= 3) break;
+      }
+      current = current.parentElement;
+      depth++;
+    }
+    return ancestors2.reverse();
+  };
+  const getCSSPath = (el) => {
+    const parts = [];
+    let current = el;
+    let depth = 0;
+    const maxDepth = 5;
+    while (current && depth < maxDepth && current.tagName !== "BODY") {
+      let selector = current.tagName.toLowerCase();
+      if (current.id) {
+        selector += `#${current.id}`;
+        parts.unshift(selector);
+        break;
+      } else if (current.className && typeof current.className === "string" && current.className.trim()) {
+        const classes = current.className.trim().split(/\s+/).slice(0, 2);
+        selector += `.${classes.join(".")}`;
+      }
+      if (!current.id && (!current.className || !current.className.trim()) && current.parentElement) {
+        const siblings = Array.from(current.parentElement.children);
+        const index = siblings.indexOf(current);
+        if (index >= 0 && siblings.length > 1) {
+          selector += `:nth-child(${index + 1})`;
+        }
+      }
+      parts.unshift(selector);
+      current = current.parentElement;
+      depth++;
+    }
+    return parts.join(" > ");
+  };
+  const getElementTag = (el, compact = false) => {
+    const tagName = el.tagName.toLowerCase();
+    const attrs = [];
+    if (el.id) {
+      attrs.push(`id="${el.id}"`);
+    }
+    if (el.className && typeof el.className === "string") {
+      const classes = el.className.trim().split(/\s+/);
+      if (classes.length > 0 && classes[0]) {
+        const displayClasses = compact ? classes.slice(0, 3) : classes;
+        let classStr = displayClasses.join(" ");
+        if (classStr.length > 30) {
+          classStr = classStr.substring(0, 30) + "...";
+        }
+        attrs.push(`class="${classStr}"`);
+      }
+    }
+    const dataAttrs = Array.from(el.attributes).filter(
+      (attr) => attr.name.startsWith("data-")
+    );
+    const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
+    for (const attr of displayDataAttrs) {
+      let value = attr.value;
+      if (value.length > 20) {
+        value = value.substring(0, 20) + "...";
+      }
+      attrs.push(`${attr.name}="${value}"`);
+    }
+    const ariaLabel = el.getAttribute("aria-label");
+    if (ariaLabel && !compact) {
+      let value = ariaLabel;
+      if (value.length > 20) {
+        value = value.substring(0, 20) + "...";
+      }
+      attrs.push(`aria-label="${value}"`);
+    }
+    return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
+  };
+  const getClosingTag = (el) => {
+    return `</${el.tagName.toLowerCase()}>`;
+  };
+  const getTextContent = (el) => {
+    let text = el.textContent || "";
+    text = text.trim().replace(/\s+/g, " ");
+    const maxLength = 60;
+    if (text.length > maxLength) {
+      text = text.substring(0, maxLength) + "...";
+    }
+    return text;
+  };
+  const getSiblingIdentifier = (el) => {
+    if (el.id) return `#${el.id}`;
+    if (el.className && typeof el.className === "string") {
+      const classes = el.className.trim().split(/\s+/);
+      if (classes.length > 0 && classes[0]) {
+        return `.${classes[0]}`;
       }
-    });
+    }
+    return null;
+  };
+  const lines = [];
+  lines.push(`Path: ${getCSSPath(element)}`);
+  lines.push("");
+  const ancestors = getAncestorChain(element);
+  for (let i = 0; i < ancestors.length; i++) {
+    const indent2 = "  ".repeat(i);
+    lines.push(indent2 + getElementTag(ancestors[i], true));
   }
-  const indicator = activeProgressIndicator;
-  const indicatorRect = indicator.getBoundingClientRect();
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  const CURSOR_OFFSET = 14;
-  const VIEWPORT_MARGIN = 8;
-  let indicatorLeft = mouseX - indicatorRect.width / 2;
-  let indicatorTop = mouseY + CURSOR_OFFSET;
-  if (indicatorTop + indicatorRect.height + VIEWPORT_MARGIN > viewportHeight) {
-    indicatorTop = mouseY - indicatorRect.height - CURSOR_OFFSET;
+  const parent = element.parentElement;
+  let targetIndex = -1;
+  if (parent) {
+    const siblings = Array.from(parent.children);
+    targetIndex = siblings.indexOf(element);
+    if (targetIndex > 0) {
+      const prevSibling = siblings[targetIndex - 1];
+      const prevId = getSiblingIdentifier(prevSibling);
+      if (prevId && targetIndex <= 2) {
+        const indent2 = "  ".repeat(ancestors.length);
+        lines.push(`${indent2}  ${getElementTag(prevSibling, true)}`);
+        lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
+      } else if (targetIndex > 0) {
+        const indent2 = "  ".repeat(ancestors.length);
+        lines.push(
+          `${indent2}  ... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
+        );
+      }
+    }
   }
-  indicatorTop = Math.max(
-    VIEWPORT_MARGIN,
-    Math.min(indicatorTop, viewportHeight - indicatorRect.height - VIEWPORT_MARGIN)
-  );
-  indicatorLeft = Math.max(
-    VIEWPORT_MARGIN,
-    Math.min(indicatorLeft, viewportWidth - indicatorRect.width - VIEWPORT_MARGIN)
-  );
-  indicator.style.top = `${indicatorTop}px`;
-  indicator.style.left = `${indicatorLeft}px`;
-  const progressFill = indicator.querySelector(
-    "[data-progress-fill]"
-  );
-  if (progressFill) {
-    const percentage = Math.min(100, Math.max(0, progress * 100));
-    progressFill.style.width = `${percentage}%`;
+  const indent = "  ".repeat(ancestors.length);
+  lines.push(indent + "  <!-- SELECTED -->");
+  const textContent = getTextContent(element);
+  const childrenCount = element.children.length;
+  if (textContent && childrenCount === 0 && textContent.length < 40) {
+    lines.push(
+      `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(
+        element
+      )}`
+    );
+  } else {
+    lines.push(indent + "  " + getElementTag(element));
+    if (textContent) {
+      lines.push(`${indent}    ${textContent}`);
+    }
+    if (childrenCount > 0) {
+      lines.push(
+        `${indent}    ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
+      );
+    }
+    lines.push(indent + "  " + getClosingTag(element));
   }
-};
-var hideProgressIndicator = () => {
-  if (activeProgressIndicator) {
-    activeProgressIndicator.style.opacity = "0";
-    setTimeout(() => {
-      if (activeProgressIndicator) {
-        activeProgressIndicator.remove();
-        activeProgressIndicator = null;
+  if (parent && targetIndex >= 0) {
+    const siblings = Array.from(parent.children);
+    const siblingsAfter = siblings.length - targetIndex - 1;
+    if (siblingsAfter > 0) {
+      const nextSibling = siblings[targetIndex + 1];
+      const nextId = getSiblingIdentifier(nextSibling);
+      if (nextId && siblingsAfter <= 2) {
+        lines.push(`${indent}  ${getElementTag(nextSibling, true)}`);
+        lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
+      } else {
+        lines.push(
+          `${indent}  ... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
+        );
       }
-    }, 100);
+    }
+  }
+  for (let i = ancestors.length - 1; i >= 0; i--) {
+    const indent2 = "  ".repeat(i);
+    lines.push(indent2 + getClosingTag(ancestors[i]));
   }
+  return lines.join("\n");
 };
 
-// src/utils/copy-text.ts
-var IS_NAVIGATOR_CLIPBOARD_AVAILABLE = typeof window !== "undefined" && window.navigator.clipboard && window.isSecureContext;
-var copyTextToClipboard = async (text) => {
-  if (IS_NAVIGATOR_CLIPBOARD_AVAILABLE) {
-    try {
-      await navigator.clipboard.writeText(text);
+// src/utils/copy-content.ts
+var copyContent = async (content) => {
+  try {
+    if (Array.isArray(content)) {
+      if (!navigator?.clipboard?.write) {
+        for (const contentPart of content) {
+          if (typeof contentPart === "string") {
+            const result = copyContentFallback(contentPart);
+            if (!result) return result;
+          }
+        }
+        return true;
+      }
+      await navigator.clipboard.write([
+        new ClipboardItem(
+          Object.fromEntries(
+            content.map((contentPart) => {
+              if (contentPart instanceof Blob) {
+                return [contentPart.type ?? "text/plain", contentPart];
+              } else {
+                return [
+                  "text/plain",
+                  new Blob([contentPart], { type: "text/plain" })
+                ];
+              }
+            })
+          )
+        )
+      ]);
       return true;
-    } catch {
+    } else if (content instanceof Blob) {
+      await navigator.clipboard.write([
+        new ClipboardItem({ [content.type]: content })
+      ]);
+      return true;
+    } else {
+      try {
+        await navigator.clipboard.writeText(String(content));
+        return true;
+      } catch {
+        return copyContentFallback(content);
+      }
     }
+  } catch {
+    return false;
   }
-  const textareaElement = document.createElement("textarea");
-  textareaElement.value = text;
-  textareaElement.setAttribute("readonly", "");
-  textareaElement.style.position = "fixed";
-  textareaElement.style.top = "-9999px";
-  textareaElement.style.opacity = "0";
-  textareaElement.style.pointerEvents = "none";
+};
+var copyContentFallback = (content) => {
+  if (!document.execCommand) return false;
+  const el = document.createElement("textarea");
+  el.value = String(content);
+  el.style.clipPath = "inset(50%)";
+  el.ariaHidden = "true";
   const doc = document.body || document.documentElement;
-  doc.appendChild(textareaElement);
-  textareaElement.select();
-  textareaElement.setSelectionRange(0, textareaElement.value.length);
-  let didCopyToClipboard = false;
+  doc.append(el);
   try {
-    didCopyToClipboard = document.execCommand("copy");
-  } catch {
-    didCopyToClipboard = false;
+    el.select();
+    return document.execCommand("copy");
   } finally {
-    doc.removeChild(textareaElement);
-  }
-  return didCopyToClipboard;
-};
-
-// src/utils/is-element-visible.ts
-var isElementVisible = (element, computedStyle = window.getComputedStyle(element)) => {
-  return computedStyle.display !== "none" && computedStyle.visibility !== "hidden" && computedStyle.opacity !== "0";
-};
-
-// src/utils/mount-root.ts
-var ATTRIBUTE_NAME = "data-react-grab";
-var mountRoot = () => {
-  const mountedHost = document.querySelector(`[${ATTRIBUTE_NAME}]`);
-  if (mountedHost) {
-    const mountedRoot = mountedHost.shadowRoot?.querySelector(
-      `[${ATTRIBUTE_NAME}]`
-    );
-    if (mountedRoot instanceof HTMLDivElement && mountedHost.shadowRoot) {
-      return mountedRoot;
-    }
+    el.remove();
   }
-  const host = document.createElement("div");
-  host.setAttribute(ATTRIBUTE_NAME, "true");
-  host.style.zIndex = "2147483646";
-  host.style.position = "fixed";
-  host.style.top = "0";
-  host.style.left = "0";
-  const shadowRoot = host.attachShadow({ mode: "open" });
-  const root = document.createElement("div");
-  root.setAttribute(ATTRIBUTE_NAME, "true");
-  shadowRoot.appendChild(root);
-  const doc = document.body ?? document.documentElement;
-  doc.appendChild(host);
-  return root;
 };
 
-// src/utils/store.ts
-var createStore = (initializer) => {
-  const subscriberMap = /* @__PURE__ */ new Map();
-  let currentListenerIndex = 0;
-  let currentState;
-  const setState = (maybeStateOrReducer) => {
-    const prevState = currentState;
-    const resolvedState = typeof maybeStateOrReducer === "function" ? maybeStateOrReducer(prevState) : maybeStateOrReducer;
-    const nextState = {
-      ...prevState,
-      ...resolvedState
-    };
-    currentState = nextState;
-    for (const entry of subscriberMap.values()) {
-      if (entry.type === "selected" /* Selected */) {
-        const nextSelectedValue = entry.selector(nextState);
-        const prevSelectedValue = entry.prevSelectedValue;
-        if (!Object.is(prevSelectedValue, nextSelectedValue)) {
-          entry.prevSelectedValue = nextSelectedValue;
-          entry.listener(nextSelectedValue, prevSelectedValue);
-        }
-      } else {
-        entry.listener(nextState, prevState);
-      }
-    }
-    return currentState;
-  };
-  const getState = () => {
-    return currentState;
-  };
-  const initialState = initializer(setState, getState);
-  currentState = initialState;
-  const subscribeWithSelector = (listener, selector) => {
-    const index = String(currentListenerIndex++);
-    const wrappedListener = (value, prevValue) => listener(value, prevValue);
-    const entry = {
-      listener: wrappedListener,
-      prevSelectedValue: selector(currentState),
-      selector,
-      type: "selected" /* Selected */
-    };
-    subscriberMap.set(index, entry);
-    return () => {
-      subscriberMap.delete(index);
-    };
-  };
-  const subscribeToFullState = (listener) => {
-    const index = String(currentListenerIndex++);
-    const entry = {
-      listener,
-      type: "full" /* Full */
-    };
-    subscriberMap.set(index, entry);
-    return () => {
-      subscriberMap.delete(index);
-    };
-  };
-  function subscribe(subscriber, selector) {
-    return selector ? subscribeWithSelector(subscriber, selector) : subscribeToFullState(subscriber);
-  }
-  const store = {
-    getInitialState() {
-      return initialState;
-    },
-    getState,
-    setState,
-    subscribe
+// src/core.ts
+var init = (rawOptions) => {
+  const options = {
+    enabled: true,
+    keyHoldDuration: 500,
+    ...rawOptions
   };
-  return store;
-};
-
-// src/index.ts
-var libStore = createStore(() => ({
-  keyPressTimestamps: /* @__PURE__ */ new Map(),
-  mouseX: -1e3,
-  mouseY: -1e3,
-  overlayMode: "hidden",
-  pressedKeys: /* @__PURE__ */ new Set()
-}));
-var getDefaultHotkey = () => {
-  if (typeof navigator === "undefined") {
-    return ["Meta", "C"];
-  }
-  const isMac = navigator.platform.toLowerCase().includes("mac");
-  return isMac ? ["Meta", "C"] : ["Control", "C"];
-};
-var init = (options = {}) => {
   if (options.enabled === false) {
     return;
   }
-  const resolvedOptions = {
-    adapter: void 0,
-    enabled: true,
-    hotkey: options.hotkey ?? getDefaultHotkey(),
-    keyHoldDuration: 500,
-    ...options
-  };
-  const root = mountRoot();
-  const selectionOverlay = createSelectionOverlay(root);
+  let holdTimer = null;
+  let isHoldingKeys = false;
+  let overlayRoot = null;
+  let selectionOverlay = null;
+  let renderFrameId = null;
+  let isActive = false;
+  let isCopying = false;
   let hoveredElement = null;
   let lastGrabbedElement = null;
-  let isCopying = false;
-  let progressAnimationFrame = null;
-  let progressStartTime = null;
-  const checkIsActivationHotkeyPressed = () => {
-    if (Array.isArray(resolvedOptions.hotkey)) {
-      for (const key of resolvedOptions.hotkey) {
-        if (!isKeyPressed(key)) {
-          return false;
-        }
-      }
-      return true;
-    }
-    return isKeyPressed(resolvedOptions.hotkey);
-  };
-  const updateProgressIndicator = () => {
-    if (progressStartTime === null) return;
-    const elapsed = Date.now() - progressStartTime;
-    const progress = Math.min(1, elapsed / resolvedOptions.keyHoldDuration);
-    const { mouseX, mouseY } = libStore.getState();
-    showProgressIndicator(root, progress, mouseX, mouseY);
-    if (progress < 1) {
-      progressAnimationFrame = requestAnimationFrame(updateProgressIndicator);
-    }
-  };
-  const startProgressTracking = () => {
-    if (progressAnimationFrame !== null) return;
-    progressStartTime = Date.now();
-    const { mouseX, mouseY } = libStore.getState();
-    showProgressIndicator(root, 0, mouseX, mouseY);
-    progressAnimationFrame = requestAnimationFrame(updateProgressIndicator);
-  };
-  const stopProgressTracking = () => {
-    if (progressAnimationFrame !== null) {
-      cancelAnimationFrame(progressAnimationFrame);
-      progressAnimationFrame = null;
-    }
-    progressStartTime = null;
-    hideProgressIndicator();
-  };
-  let cleanupActivationHotkeyWatcher = null;
-  const handleKeyStateChange = (pressedKeys) => {
-    const { overlayMode } = libStore.getState();
-    if (pressedKeys.has("Escape") || pressedKeys.has("Esc")) {
-      libStore.setState((state) => {
-        const nextPressedKeys = new Set(state.pressedKeys);
-        nextPressedKeys.delete("Escape");
-        nextPressedKeys.delete("Esc");
-        const nextTimestamps = new Map(state.keyPressTimestamps);
-        nextTimestamps.delete("Escape");
-        nextTimestamps.delete("Esc");
-        const activationKeys = Array.isArray(resolvedOptions.hotkey) ? resolvedOptions.hotkey : [resolvedOptions.hotkey];
-        for (const activationKey of activationKeys) {
-          if (activationKey.length === 1) {
-            nextPressedKeys.delete(activationKey.toLowerCase());
-            nextPressedKeys.delete(activationKey.toUpperCase());
-            nextTimestamps.delete(activationKey.toLowerCase());
-            nextTimestamps.delete(activationKey.toUpperCase());
-          } else {
-            nextPressedKeys.delete(activationKey);
-            nextTimestamps.delete(activationKey);
-          }
-        }
-        return {
-          ...state,
-          keyPressTimestamps: nextTimestamps,
-          overlayMode: "hidden",
-          pressedKeys: nextPressedKeys
-        };
-      });
-      if (cleanupActivationHotkeyWatcher) {
-        cleanupActivationHotkeyWatcher();
-        cleanupActivationHotkeyWatcher = null;
-      }
-      stopProgressTracking();
-      return;
-    }
-    const isActivationHotkeyPressed = checkIsActivationHotkeyPressed();
-    if (!isActivationHotkeyPressed) {
-      if (cleanupActivationHotkeyWatcher) {
-        cleanupActivationHotkeyWatcher();
-        cleanupActivationHotkeyWatcher = null;
-      }
-      if (overlayMode !== "hidden") {
-        libStore.setState((state) => ({
-          ...state,
-          overlayMode: "hidden"
-        }));
-      }
-      stopProgressTracking();
-      return;
-    }
-    if (overlayMode === "hidden" && !cleanupActivationHotkeyWatcher) {
-      startProgressTracking();
-      cleanupActivationHotkeyWatcher = watchKeyHeldFor(
-        resolvedOptions.hotkey,
-        resolvedOptions.keyHoldDuration,
-        () => {
-          libStore.setState((state) => ({
-            ...state,
-            overlayMode: "visible"
-          }));
-          stopProgressTracking();
-          cleanupActivationHotkeyWatcher = null;
-        }
-      );
-    }
-  };
-  const cleanupKeyStateChangeSubscription = libStore.subscribe(
-    handleKeyStateChange,
-    (state) => state.pressedKeys
-  );
-  let mouseMoveScheduled = false;
-  let pendingMouseX = -1e3;
-  let pendingMouseY = -1e3;
-  const handleMouseMove = (event) => {
-    pendingMouseX = event.clientX;
-    pendingMouseY = event.clientY;
-    if (mouseMoveScheduled) return;
-    mouseMoveScheduled = true;
-    requestAnimationFrame(() => {
-      mouseMoveScheduled = false;
-      libStore.setState((state) => ({
-        ...state,
-        mouseX: pendingMouseX,
-        mouseY: pendingMouseY
-      }));
-    });
-  };
-  const handleMouseDown = (event) => {
-    if (event.button !== 0) {
-      return;
-    }
-    const { overlayMode } = libStore.getState();
-    if (overlayMode === "hidden") {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-    libStore.setState((state) => ({
-      ...state,
-      overlayMode: "copying"
-    }));
-  };
-  const handleClick = (event) => {
-    const { overlayMode } = libStore.getState();
-    if (overlayMode === "hidden") {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-  };
-  const handleVisibilityChange = () => {
-    if (document.hidden) {
-      cleanupGrabbedIndicators();
-      hideLabel();
-    }
-  };
-  let scrollScheduled = false;
-  const handleScroll = () => {
-    if (scrollScheduled) return;
-    scrollScheduled = true;
-    requestAnimationFrame(() => {
-      scrollScheduled = false;
-      scheduleRender();
-    });
-  };
-  let resizeScheduled = false;
-  const handleResize = () => {
-    if (resizeScheduled) return;
-    resizeScheduled = true;
-    requestAnimationFrame(() => {
-      resizeScheduled = false;
-      scheduleRender();
-    });
-  };
-  window.addEventListener("mousemove", handleMouseMove);
-  window.addEventListener("mousedown", handleMouseDown, true);
-  window.addEventListener("click", handleClick, true);
-  window.addEventListener("scroll", handleScroll, true);
-  window.addEventListener("resize", handleResize);
-  document.addEventListener("visibilitychange", handleVisibilityChange);
-  const cleanupTrackHotkeys = trackHotkeys();
+  let mouseX = -1e3;
+  let mouseY = -1e3;
+  const isTargetKeyCombination = (event) => (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c";
   const getElementAtPosition = (x, y) => {
-    const elements = document.elementsFromPoint(x, y);
-    for (const element of elements) {
-      if (element.closest(`[${ATTRIBUTE_NAME}]`)) {
+    const elementsAtPoint = document.elementsFromPoint(x, y);
+    for (const candidateElement of elementsAtPoint) {
+      if (candidateElement.closest(`[${ATTRIBUTE_NAME}]`)) {
         continue;
       }
-      const computedStyle = window.getComputedStyle(element);
-      if (!isElementVisible(element, computedStyle)) {
+      const computedStyle = window.getComputedStyle(candidateElement);
+      if (!isElementVisible(candidateElement, computedStyle)) {
         continue;
       }
-      return element;
+      return candidateElement;
     }
     return null;
   };
-  const handleCopy = async (element) => {
-    const tagName = (element.tagName || "").toLowerCase();
-    const rect = element.getBoundingClientRect();
-    const cleanupIndicator = updateLabelToProcessing(root, rect.left, rect.top);
-    try {
-      const htmlSnippet = getHTMLSnippet(element);
-      await copyTextToClipboard(
-        `
+  const wrapInReferencedElement = (content) => `
 
 <referenced_element>
-${htmlSnippet}
-</referenced_element>`
-      );
-      const stack = await getStack(element);
-      if (stack) {
-        const filteredStack = filterStack(stack);
-        if (filteredStack.length > 0) {
-          const serializedStack = serializeStack(filteredStack);
-          const fullText = `${htmlSnippet}
+${content}
+</referenced_element>`;
+  const handleCopy = async (targetElement) => {
+    const tagName = (targetElement.tagName || "").toLowerCase();
+    const elementBounds = targetElement.getBoundingClientRect();
+    const showSuccessIndicator = updateLabelToProcessing(
+      overlayRoot,
+      elementBounds.left,
+      elementBounds.top
+    );
+    try {
+      const elementHtml = getHTMLSnippet(targetElement);
+      await copyContent(wrapInReferencedElement(elementHtml));
+      const componentStackTrace = await getSourceTrace(targetElement);
+      if (componentStackTrace?.length) {
+        const formattedStackTrace = componentStackTrace.map(
+          (source) => ` ${source.functionName} - ${source.fileName}:${source.lineNumber}:${source.columnNumber}`
+        ).join("\n");
+        await copyContent(
+          wrapInReferencedElement(
+            `${elementHtml}
 
 Component owner stack:
-${serializedStack}`;
-          await copyTextToClipboard(
-            `
-
-<referenced_element>
-${fullText}
-</referenced_element>`
-          ).catch(() => {
-          });
-          if (resolvedOptions.adapter) {
-            resolvedOptions.adapter.open(fullText);
-          }
-        } else if (resolvedOptions.adapter) {
-          resolvedOptions.adapter.open(htmlSnippet);
-        }
-      } else if (resolvedOptions.adapter) {
-        resolvedOptions.adapter.open(htmlSnippet);
+${formattedStackTrace}`
+          )
+        );
       }
-      cleanupIndicator(tagName);
+      showSuccessIndicator(tagName);
     } catch {
-      cleanupIndicator(tagName);
+      showSuccessIndicator(tagName);
     }
   };
-  const handleRender = (state) => {
-    const { mouseX, mouseY, overlayMode } = state;
-    if (overlayMode === "hidden") {
-      if (selectionOverlay.isVisible()) {
-        selectionOverlay.hide();
-      }
-      if (!isCopying) {
-        hideLabel();
-      }
+  const hideOverlayAndLabel = () => {
+    selectionOverlay?.hide();
+    if (!isCopying) hideLabel();
+  };
+  const handleRender = () => {
+    if (!isActive) {
+      hideOverlayAndLabel();
       hoveredElement = null;
       lastGrabbedElement = null;
       return;
     }
-    if (overlayMode === "copying" && hoveredElement) {
-      if (!isCopying) {
-        isCopying = true;
-        lastGrabbedElement = hoveredElement;
-        const computedStyle2 = window.getComputedStyle(hoveredElement);
-        const rect2 = hoveredElement.getBoundingClientRect();
-        createGrabbedOverlay(root, {
-          borderRadius: computedStyle2.borderRadius || "0px",
-          height: rect2.height,
-          transform: computedStyle2.transform || "none",
-          width: rect2.width,
-          x: rect2.left,
-          y: rect2.top
-        });
-        void handleCopy(hoveredElement).finally(() => {
-          isCopying = false;
-        });
-        const isStillPressed = checkIsActivationHotkeyPressed();
-        libStore.setState((state2) => ({
-          ...state2,
-          overlayMode: isStillPressed ? "visible" : "hidden"
-        }));
-      }
-      return;
-    }
-    const element = getElementAtPosition(mouseX, mouseY);
-    if (!element) {
-      if (selectionOverlay.isVisible()) {
-        selectionOverlay.hide();
-      }
-      if (!isCopying) {
-        hideLabel();
-      }
+    if (isCopying) return;
+    const targetElement = getElementAtPosition(mouseX, mouseY);
+    if (!targetElement) {
+      hideOverlayAndLabel();
       hoveredElement = null;
       return;
     }
-    if (lastGrabbedElement && element !== lastGrabbedElement) {
-      lastGrabbedElement = null;
-    }
-    if (element === lastGrabbedElement) {
-      if (selectionOverlay.isVisible()) {
-        selectionOverlay.hide();
-      }
-      if (!isCopying) {
-        hideLabel();
+    if (lastGrabbedElement) {
+      if (targetElement !== lastGrabbedElement) {
+        lastGrabbedElement = null;
+      } else {
+        hideOverlayAndLabel();
+        hoveredElement = targetElement;
+        return;
       }
-      hoveredElement = element;
-      return;
     }
-    const tagName = (element.tagName || "").toLowerCase();
-    hoveredElement = element;
-    const rect = element.getBoundingClientRect();
-    const computedStyle = window.getComputedStyle(element);
-    const borderRadius = computedStyle.borderRadius || "0px";
-    const transform = computedStyle.transform || "none";
-    selectionOverlay.update({
-      borderRadius,
-      height: rect.height,
-      transform,
-      width: rect.width,
-      x: rect.left,
-      y: rect.top
+    hoveredElement = targetElement;
+    const elementBounds = targetElement.getBoundingClientRect();
+    const computedStyle = window.getComputedStyle(targetElement);
+    selectionOverlay?.update({
+      borderRadius: computedStyle.borderRadius || "0px",
+      height: elementBounds.height,
+      transform: computedStyle.transform || "none",
+      width: elementBounds.width,
+      x: elementBounds.left,
+      y: elementBounds.top
     });
-    if (!selectionOverlay.isVisible()) {
-      selectionOverlay.show();
-    }
-    showLabel(root, rect.left, rect.top, tagName);
+    if (!selectionOverlay?.isVisible()) selectionOverlay?.show();
+    showLabel(
+      overlayRoot,
+      elementBounds.left,
+      elementBounds.top,
+      (targetElement.tagName || "").toLowerCase()
+    );
   };
-  let renderScheduled = false;
   const scheduleRender = () => {
-    if (renderScheduled) return;
-    renderScheduled = true;
-    requestAnimationFrame(() => {
-      renderScheduled = false;
-      handleRender(libStore.getState());
+    if (renderFrameId !== null) return;
+    renderFrameId = requestAnimationFrame(() => {
+      renderFrameId = null;
+      handleRender();
     });
   };
-  const cleanupRenderSubscription = libStore.subscribe(() => {
-    scheduleRender();
-  });
   const continuousRender = () => {
     scheduleRender();
     requestAnimationFrame(continuousRender);
   };
-  continuousRender();
+  const handleMouseMove = (event) => {
+    mouseX = event.clientX;
+    mouseY = event.clientY;
+    scheduleRender();
+  };
+  const handleVisibilityChange = () => {
+    if (document.hidden) {
+      cleanupGrabbedIndicators();
+      hideLabel();
+    }
+  };
+  const handleSelectionClick = () => {
+    if (!hoveredElement || isCopying) return;
+    isCopying = true;
+    lastGrabbedElement = hoveredElement;
+    const targetElement = hoveredElement;
+    const computedStyle = window.getComputedStyle(targetElement);
+    const elementBounds = targetElement.getBoundingClientRect();
+    createGrabbedOverlay(overlayRoot, {
+      borderRadius: computedStyle.borderRadius || "0px",
+      height: elementBounds.height,
+      transform: computedStyle.transform || "none",
+      width: elementBounds.width,
+      x: elementBounds.left,
+      y: elementBounds.top
+    });
+    void handleCopy(targetElement).finally(() => {
+      isCopying = false;
+      isActive = isHoldingKeys;
+    });
+  };
+  const activateOverlay = () => {
+    if (!overlayRoot) {
+      overlayRoot = mountRoot();
+      selectionOverlay = createSelectionOverlay(
+        overlayRoot,
+        handleSelectionClick
+      );
+      continuousRender();
+    }
+    isActive = true;
+    handleRender();
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape" && isHoldingKeys) {
+      isHoldingKeys = false;
+      if (holdTimer) window.clearTimeout(holdTimer);
+      isActive = false;
+      return;
+    }
+    if (isKeyboardEventTriggeredByInput(event)) return;
+    if (isTargetKeyCombination(event) && !isHoldingKeys) {
+      isHoldingKeys = true;
+      holdTimer = window.setTimeout(() => {
+        activateOverlay();
+        options.onActivate?.();
+      }, options.keyHoldDuration);
+    }
+  };
+  const handleKeyUp = (event) => {
+    if (isHoldingKeys && (!isTargetKeyCombination(event) || event.key.toLowerCase() === "c")) {
+      isHoldingKeys = false;
+      if (holdTimer) window.clearTimeout(holdTimer);
+      isActive = false;
+    }
+  };
+  window.addEventListener("keydown", handleKeyDown);
+  window.addEventListener("keyup", handleKeyUp);
+  window.addEventListener("mousemove", handleMouseMove);
+  window.addEventListener("scroll", scheduleRender, true);
+  window.addEventListener("resize", scheduleRender);
+  document.addEventListener("visibilitychange", handleVisibilityChange);
   return () => {
+    window.removeEventListener("keydown", handleKeyDown);
+    window.removeEventListener("keyup", handleKeyUp);
     window.removeEventListener("mousemove", handleMouseMove);
-    window.removeEventListener("mousedown", handleMouseDown, true);
-    window.removeEventListener("click", handleClick, true);
-    window.removeEventListener("scroll", handleScroll, true);
-    window.removeEventListener("resize", handleResize);
+    window.removeEventListener("scroll", scheduleRender, true);
+    window.removeEventListener("resize", scheduleRender);
     document.removeEventListener("visibilitychange", handleVisibilityChange);
-    cleanupTrackHotkeys();
-    cleanupRenderSubscription();
-    cleanupKeyStateChangeSubscription();
-    if (cleanupActivationHotkeyWatcher) {
-      cleanupActivationHotkeyWatcher();
-    }
-    stopProgressTracking();
+    if (holdTimer) window.clearTimeout(holdTimer);
+    if (renderFrameId) cancelAnimationFrame(renderFrameId);
     cleanupGrabbedIndicators();
     hideLabel();
   };
 };
-if (typeof window !== "undefined" && typeof document !== "undefined") {
-  const currentScript = document.currentScript;
-  const options = {};
-  if (currentScript?.dataset) {
-    const { adapter, enabled, hotkey, keyHoldDuration } = currentScript.dataset;
-    if (adapter !== void 0) {
-      if (adapter === "cursor") {
-        options.adapter = cursorAdapter;
-      }
-    }
-    if (enabled !== void 0) {
-      options.enabled = enabled === "true";
-    }
-    if (hotkey !== void 0) {
-      const keys = hotkey.split(",").map((key) => key.trim());
-      options.hotkey = keys.length === 1 ? keys[0] : keys;
-    }
-    if (keyHoldDuration !== void 0) {
-      const duration = Number(keyHoldDuration);
-      if (!Number.isNaN(duration)) {
-        options.keyHoldDuration = duration;
-      }
-    }
-  }
-  init(options);
-}
 
-exports.cursorAdapter = cursorAdapter;
-exports.init = init;
-exports.libStore = libStore;
+// src/index.ts
+init();