react-grab 0.0.20 → 0.0.23

package/dist/index.js

@@ -1,5 +1,7 @@
+import { render, createComponent, mergeProps, memo, template, effect, style, insert, setStyleProperty, use } from 'solid-js/web';
+import { createRoot, createSignal, createMemo, createEffect, onCleanup, Show, For } from 'solid-js';
 import { instrument, _fiberRoots, getFiberFromHostInstance } from 'bippy';
-import { getFiberStackTrace, getOwnerStack, getFiberSource } from 'bippy/dist/source';
+import { getOwnerStack, getSourcesFromStack } from 'bippy/dist/source';
 
 /**
  * @license MIT
@@ -10,18 +12,8 @@ import { getFiberStackTrace, getOwnerStack, getFiberSource } from 'bippy/dist/so
  * 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",
@@ -69,194 +61,481 @@ var isHotkeyEnabledOnTagName = (event, enabledOnTags = false) => {
 var isKeyboardEventTriggeredByInput = (event) => {
   return isHotkeyEnabledOnTagName(event, FORM_TAGS_AND_ROLES);
 };
-var trackHotkeys = () => {
-  const handleKeyDown = (event) => {
-    if (isKeyboardEventTriggeredByInput(event)) {
-      return;
+
+// 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;
     }
-    if (event.code === void 0) {
+  }
+  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";
+};
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<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">`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span style="font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-variant-numeric:tabular-nums">`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div style="position:fixed;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;pointer-events:none;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"><span>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div style="position:fixed;z-index:2147483647;pointer-events:none;transition:opacity 0.1s ease-in-out"><div style="width:32px;height:2px;background-color:rgba(178, 28, 142, 0.2);border-radius:1px;overflow:hidden;position:relative"><div style="height:100%;background-color:#b21c8e;border-radius:1px;transition:width 0.05s cubic-bezier(0.165, 0.84, 0.44, 1)">`);
+var VIEWPORT_MARGIN_PX = 8;
+var LABEL_OFFSET_PX = 6;
+var INDICATOR_CLAMP_PADDING_PX = 4;
+var INDICATOR_SUCCESS_VISIBLE_MS = 1500;
+var SELECTION_LERP_FACTOR = 0.95;
+var MARQUEE_LERP_FACTOR = 0.9;
+var lerp = (start, end, factor) => {
+  return start + (end - start) * factor;
+};
+var Overlay = (props) => {
+  const [currentX, setCurrentX] = createSignal(props.bounds.x);
+  const [currentY, setCurrentY] = createSignal(props.bounds.y);
+  const [currentWidth, setCurrentWidth] = createSignal(props.bounds.width);
+  const [currentHeight, setCurrentHeight] = createSignal(props.bounds.height);
+  const [opacity, setOpacity] = createSignal(1);
+  let hasBeenShown = false;
+  let animationFrameId = null;
+  let targetBounds = props.bounds;
+  createEffect(() => {
+    targetBounds = props.bounds;
+    const factor = props.lerpFactor ?? SELECTION_LERP_FACTOR;
+    if (!hasBeenShown) {
+      setCurrentX(targetBounds.x);
+      setCurrentY(targetBounds.y);
+      setCurrentWidth(targetBounds.width);
+      setCurrentHeight(targetBounds.height);
+      hasBeenShown = true;
       return;
     }
-    libStore.setState((state) => {
-      const newTimestamps = new Map(state.keyPressTimestamps);
-      if (!state.pressedKeys.has(event.key)) {
-        newTimestamps.set(event.key, Date.now());
+    const EPSILON = 0.5;
+    const animate = () => {
+      const newX = lerp(currentX(), targetBounds.x, factor);
+      const newY = lerp(currentY(), targetBounds.y, factor);
+      const newWidth = lerp(currentWidth(), targetBounds.width, factor);
+      const newHeight = lerp(currentHeight(), targetBounds.height, factor);
+      setCurrentX(newX);
+      setCurrentY(newY);
+      setCurrentWidth(newWidth);
+      setCurrentHeight(newHeight);
+      const hasConverged = Math.abs(newX - targetBounds.x) < EPSILON && Math.abs(newY - targetBounds.y) < EPSILON && Math.abs(newWidth - targetBounds.width) < EPSILON && Math.abs(newHeight - targetBounds.height) < EPSILON;
+      if (!hasConverged) {
+        animationFrameId = requestAnimationFrame(animate);
+      } else {
+        animationFrameId = null;
+      }
+    };
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+    animationFrameId = requestAnimationFrame(animate);
+    onCleanup(() => {
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
       }
-      return {
-        ...state,
-        keyPressTimestamps: newTimestamps,
-        pressedKeys: /* @__PURE__ */ new Set([event.key, ...state.pressedKeys])
-      };
     });
-  };
-  const handleKeyUp = (event) => {
-    if (event.code === void 0) {
-      return;
+  });
+  createEffect(() => {
+    if (props.variant === "grabbed") {
+      requestAnimationFrame(() => {
+        setOpacity(0);
+      });
     }
-    libStore.setState((state) => {
-      const newTimestamps = new Map(state.keyPressTimestamps);
-      newTimestamps.delete(event.key);
+  });
+  const baseStyle = {
+    position: "fixed",
+    "box-sizing": "border-box",
+    "pointer-events": props.variant === "marquee" ? "none" : "auto",
+    "z-index": "2147483646"
+  };
+  const variantStyle = () => {
+    if (props.variant === "marquee") {
       return {
-        ...state,
-        keyPressTimestamps: newTimestamps,
-        pressedKeys: new Set(
-          [...state.pressedKeys].filter((key) => key !== event.key)
-        )
+        border: "1px dashed rgb(210, 57, 192)",
+        "background-color": "rgba(210, 57, 192, 0.1)",
+        "will-change": "transform, width, height",
+        contain: "layout paint size"
       };
-    });
-  };
-  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);
+    }
+    return {
+      border: "1px solid rgb(210, 57, 192)",
+      "background-color": "rgba(210, 57, 192, 0.2)",
+      transition: props.variant === "grabbed" ? "opacity 0.3s ease-out" : void 0
+    };
   };
+  return createComponent(Show, {
+    get when() {
+      return props.visible !== false;
+    },
+    get children() {
+      var _el$ = _tmpl$();
+      effect((_$p) => style(_el$, {
+        ...baseStyle,
+        ...variantStyle(),
+        top: `${currentY()}px`,
+        left: `${currentX()}px`,
+        width: `${currentWidth()}px`,
+        height: `${currentHeight()}px`,
+        "border-radius": props.bounds.borderRadius,
+        transform: props.bounds.transform,
+        opacity: opacity()
+      }, _$p));
+      return _el$;
+    }
+  });
 };
-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 Spinner = (props) => {
+  let ref;
+  createEffect(() => {
+    if (ref) {
+      ref.animate([{
+        transform: "rotate(0deg)"
+      }, {
+        transform: "rotate(360deg)"
+      }], {
+        duration: 600,
+        easing: "linear",
+        iterations: Infinity
+      });
+    }
+  });
+  return (() => {
+    var _el$2 = _tmpl$2();
+    var _ref$ = ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : ref = _el$2;
+    effect((_$p) => style(_el$2, {
+      ...props.style
+    }, _$p));
+    return _el$2;
+  })();
 };
-var watchKeyHeldFor = (key, duration, onHeld) => {
-  let timeoutId = null;
-  let unsubscribe = null;
-  const watchStartTime = Date.now();
-  const cleanup = () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
+var Label = (props) => {
+  const [opacity, setOpacity] = createSignal(0);
+  let ref;
+  createEffect(() => {
+    if (props.visible !== false) {
+      requestAnimationFrame(() => {
+        setOpacity(1);
+      });
+    } else {
+      setOpacity(0);
     }
-    if (unsubscribe !== null) {
-      unsubscribe();
-      unsubscribe = null;
+  });
+  createEffect(() => {
+    if (props.variant === "success") {
+      const fadeOutTimer = setTimeout(() => {
+        setOpacity(0);
+      }, INDICATOR_SUCCESS_VISIBLE_MS);
+      onCleanup(() => clearTimeout(fadeOutTimer));
     }
-  };
-  const checkSingleKeyPressed = (keyToCheck, pressedKeys) => {
-    if (keyToCheck.length === 1) {
-      return pressedKeys.has(keyToCheck.toLowerCase()) || pressedKeys.has(keyToCheck.toUpperCase());
+  });
+  const indicatorRect = () => ref?.getBoundingClientRect();
+  const computedPosition = () => {
+    const rect = indicatorRect();
+    if (!rect) return {
+      left: props.x,
+      top: props.y
+    };
+    const viewportWidthPx = window.innerWidth;
+    const viewportHeightPx = window.innerHeight;
+    let indicatorLeftPx = Math.round(props.x);
+    let indicatorTopPx = Math.round(props.y) - rect.height - LABEL_OFFSET_PX;
+    const minLeft = VIEWPORT_MARGIN_PX;
+    const minTop = VIEWPORT_MARGIN_PX;
+    const maxLeft = viewportWidthPx - rect.width - VIEWPORT_MARGIN_PX;
+    const maxTop = viewportHeightPx - rect.height - VIEWPORT_MARGIN_PX;
+    const willClampLeft = indicatorLeftPx < minLeft;
+    const willClampTop = indicatorTopPx < minTop;
+    const isClamped = willClampLeft || willClampTop;
+    indicatorLeftPx = Math.max(minLeft, Math.min(indicatorLeftPx, maxLeft));
+    indicatorTopPx = Math.max(minTop, Math.min(indicatorTopPx, maxTop));
+    if (isClamped) {
+      indicatorLeftPx += INDICATOR_CLAMP_PADDING_PX;
+      indicatorTopPx += INDICATOR_CLAMP_PADDING_PX;
     }
-    return pressedKeys.has(keyToCheck);
+    return {
+      left: indicatorLeftPx,
+      top: indicatorTopPx
+    };
   };
-  const checkAllKeysPressed = (pressedKeys) => {
-    if (Array.isArray(key)) {
-      return key.every(
-        (keyFromCombo) => checkSingleKeyPressed(keyFromCombo, pressedKeys)
-      );
+  return createComponent(Show, {
+    get when() {
+      return props.visible !== false;
+    },
+    get children() {
+      var _el$3 = _tmpl$5(), _el$5 = _el$3.firstChild;
+      var _ref$2 = ref;
+      typeof _ref$2 === "function" ? use(_ref$2, _el$3) : ref = _el$3;
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return props.variant === "processing";
+        },
+        get children() {
+          return createComponent(Spinner, {});
+        }
+      }), _el$5);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return props.variant === "success";
+        },
+        get children() {
+          return _tmpl$3();
+        }
+      }), _el$5);
+      insert(_el$5, createComponent(Show, {
+        get when() {
+          return props.variant === "success";
+        },
+        children: "Grabbed "
+      }), null);
+      insert(_el$5, createComponent(Show, {
+        get when() {
+          return props.variant === "processing";
+        },
+        children: "Grabbing\u2026"
+      }), null);
+      insert(_el$5, createComponent(Show, {
+        get when() {
+          return props.variant === "hover";
+        },
+        get children() {
+          var _el$6 = _tmpl$4();
+          insert(_el$6, () => props.text);
+          return _el$6;
+        }
+      }), null);
+      insert(_el$5, createComponent(Show, {
+        get when() {
+          return props.variant !== "hover";
+        },
+        get children() {
+          var _el$7 = _tmpl$4();
+          insert(_el$7, () => props.text);
+          return _el$7;
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = `${computedPosition().top}px`, _v$2 = `${computedPosition().left}px`, _v$3 = props.zIndex?.toString() ?? "2147483647", _v$4 = opacity();
+        _v$ !== _p$.e && setStyleProperty(_el$3, "top", _p$.e = _v$);
+        _v$2 !== _p$.t && setStyleProperty(_el$3, "left", _p$.t = _v$2);
+        _v$3 !== _p$.a && setStyleProperty(_el$3, "z-index", _p$.a = _v$3);
+        _v$4 !== _p$.o && setStyleProperty(_el$3, "opacity", _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
+      });
+      return _el$3;
+    }
+  });
+};
+var ProgressIndicator = (props) => {
+  const [opacity, setOpacity] = createSignal(0);
+  let ref;
+  createEffect(() => {
+    if (props.visible !== false) {
+      requestAnimationFrame(() => {
+        setOpacity(1);
+      });
+    } else {
+      setOpacity(0);
+    }
+  });
+  const computedPosition = () => {
+    const rect = ref?.getBoundingClientRect();
+    if (!rect) return {
+      left: props.mouseX,
+      top: props.mouseY
+    };
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const CURSOR_OFFSET = 14;
+    const VIEWPORT_MARGIN = 8;
+    let indicatorLeft = props.mouseX - rect.width / 2;
+    let indicatorTop = props.mouseY + CURSOR_OFFSET;
+    if (indicatorTop + rect.height + VIEWPORT_MARGIN > viewportHeight) {
+      indicatorTop = props.mouseY - rect.height - CURSOR_OFFSET;
     }
-    return checkSingleKeyPressed(key, pressedKeys);
+    indicatorTop = Math.max(VIEWPORT_MARGIN, Math.min(indicatorTop, viewportHeight - rect.height - VIEWPORT_MARGIN));
+    indicatorLeft = Math.max(VIEWPORT_MARGIN, Math.min(indicatorLeft, viewportWidth - rect.width - VIEWPORT_MARGIN));
+    return {
+      left: indicatorLeft,
+      top: indicatorTop
+    };
   };
-  const scheduleCallback = () => {
-    const state = libStore.getState();
-    const { pressedKeys } = state;
-    if (!checkAllKeysPressed(pressedKeys)) {
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-        timeoutId = null;
-      }
-      return;
+  return createComponent(Show, {
+    get when() {
+      return props.visible !== false;
+    },
+    get children() {
+      var _el$8 = _tmpl$6(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild;
+      var _ref$3 = ref;
+      typeof _ref$3 === "function" ? use(_ref$3, _el$8) : ref = _el$8;
+      effect((_p$) => {
+        var _v$5 = `${computedPosition().top}px`, _v$6 = `${computedPosition().left}px`, _v$7 = opacity(), _v$8 = `${Math.min(100, Math.max(0, props.progress * 100))}%`;
+        _v$5 !== _p$.e && setStyleProperty(_el$8, "top", _p$.e = _v$5);
+        _v$6 !== _p$.t && setStyleProperty(_el$8, "left", _p$.t = _v$6);
+        _v$7 !== _p$.a && setStyleProperty(_el$8, "opacity", _p$.a = _v$7);
+        _v$8 !== _p$.o && setStyleProperty(_el$0, "width", _p$.o = _v$8);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0
+      });
+      return _el$8;
     }
-    const elapsed = Date.now() - watchStartTime;
-    const remaining = duration - elapsed;
-    if (remaining <= 0) {
-      onHeld();
-      cleanup();
-      return;
+  });
+};
+var ReactGrabOverlay = (props) => {
+  return [createComponent(Show, {
+    get when() {
+      return memo(() => !!props.selectionVisible)() && props.selectionBounds;
+    },
+    get children() {
+      return createComponent(Overlay, {
+        variant: "selection",
+        get bounds() {
+          return props.selectionBounds;
+        },
+        get visible() {
+          return props.selectionVisible;
+        },
+        lerpFactor: SELECTION_LERP_FACTOR
+      });
     }
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!props.marqueeVisible)() && props.marqueeBounds;
+    },
+    get children() {
+      return createComponent(Overlay, {
+        variant: "marquee",
+        get bounds() {
+          return props.marqueeBounds;
+        },
+        get visible() {
+          return props.marqueeVisible;
+        },
+        lerpFactor: MARQUEE_LERP_FACTOR
+      });
     }
-    timeoutId = setTimeout(() => {
-      onHeld();
-      cleanup();
-    }, remaining);
-  };
-  unsubscribe = libStore.subscribe(
-    () => {
-      scheduleCallback();
+  }), createComponent(For, {
+    get each() {
+      return props.grabbedOverlays ?? [];
     },
-    (state) => state.pressedKeys
-  );
-  scheduleCallback();
-  return cleanup;
+    children: (overlay) => createComponent(Overlay, {
+      variant: "grabbed",
+      get bounds() {
+        return overlay.bounds;
+      },
+      visible: true
+    })
+  }), createComponent(For, {
+    get each() {
+      return props.successLabels ?? [];
+    },
+    children: (label) => createComponent(Label, {
+      variant: "success",
+      get text() {
+        return label.text;
+      },
+      get x() {
+        return label.x;
+      },
+      get y() {
+        return label.y;
+      },
+      visible: true,
+      zIndex: 2147483648
+    })
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!(props.labelVisible && props.labelVariant && props.labelText && props.labelX !== void 0))() && props.labelY !== void 0;
+    },
+    get children() {
+      return createComponent(Label, {
+        get variant() {
+          return props.labelVariant;
+        },
+        get text() {
+          return props.labelText;
+        },
+        get x() {
+          return props.labelX;
+        },
+        get y() {
+          return props.labelY;
+        },
+        get visible() {
+          return props.labelVisible;
+        },
+        get zIndex() {
+          return props.labelZIndex;
+        }
+      });
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!(props.progressVisible && props.progress !== void 0 && props.mouseX !== void 0))() && props.mouseY !== void 0;
+    },
+    get children() {
+      return createComponent(ProgressIndicator, {
+        get progress() {
+          return props.progress;
+        },
+        get mouseX() {
+          return props.mouseX;
+        },
+        get mouseY() {
+          return props.mouseY;
+        },
+        get visible() {
+          return props.progressVisible;
+        }
+      });
+    }
+  })];
 };
-var fiberRoots = _fiberRoots;
 instrument({
   onCommitFiberRoot(_, fiberRoot) {
-    fiberRoots.add(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) => {
+var getSourceTrace = async (element) => {
   const fiber = getFiberFromHostInstance(element);
   if (!fiber) return null;
-  const stackTrace = getFiberStackTrace(fiber);
-  const rawOwnerStack = await getOwnerStack(stackTrace);
-  const stack = rawOwnerStack.map((item) => ({
-    componentName: item.name,
-    fileName: dedupeFileName(item.source?.fileName)
-  }));
-  if (stack.length > 0 && fiber) {
-    const fiberSource = await 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("_")
+  const ownerStack = getOwnerStack(fiber);
+  const sources = await getSourcesFromStack(
+    ownerStack,
+    Number.MAX_SAFE_INTEGER
   );
-};
-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");
+  if (!sources) return null;
+  return sources;
 };
 var getHTMLSnippet = (element) => {
   const semanticTags = /* @__PURE__ */ new Set([
@@ -456,951 +735,531 @@ var getHTMLSnippet = (element) => {
   return lines.join("\n");
 };
 
-// src/overlay.ts
-var VIEWPORT_MARGIN_PX = 8;
-var LABEL_OFFSET_PX = 6;
-var INDICATOR_CLAMP_PADDING_PX = 4;
-var INDICATOR_SUCCESS_VISIBLE_MS = 1500;
-var INDICATOR_FADE_MS = 200;
-var lerp = (start, end, factor) => {
-  return start + (end - start) * factor;
-};
-var SELECTION_LERP_FACTOR = 0.95;
-var createSelectionElement = ({
-  borderRadius,
-  height,
-  transform,
-  width,
-  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";
-  return overlay;
-};
-var updateSelectionElement = (element, { borderRadius, height, transform, width, x, y }) => {
-  const currentTop = parseFloat(element.style.top) || 0;
-  const currentLeft = parseFloat(element.style.left) || 0;
-  const currentWidth = parseFloat(element.style.width) || 0;
-  const currentHeight = parseFloat(element.style.height) || 0;
-  const topValue = `${lerp(currentTop, y, SELECTION_LERP_FACTOR)}px`;
-  const leftValue = `${lerp(currentLeft, x, SELECTION_LERP_FACTOR)}px`;
-  const widthValue = `${lerp(currentWidth, width, SELECTION_LERP_FACTOR)}px`;
-  const heightValue = `${lerp(currentHeight, height, SELECTION_LERP_FACTOR)}px`;
-  if (element.style.top !== topValue) {
-    element.style.top = topValue;
-  }
-  if (element.style.left !== leftValue) {
-    element.style.left = leftValue;
-  }
-  if (element.style.width !== widthValue) {
-    element.style.width = widthValue;
-  }
-  if (element.style.height !== heightValue) {
-    element.style.height = heightValue;
-  }
-  if (element.style.borderRadius !== borderRadius) {
-    element.style.borderRadius = borderRadius;
-  }
-  if (element.style.transform !== transform) {
-    element.style.transform = transform;
-  }
-};
-var createSelectionOverlay = (root) => {
-  const element = createSelectionElement({
-    borderRadius: "0px",
-    height: 0,
-    transform: "none",
-    width: 0,
-    x: -1e3,
-    y: -1e3
-  });
-  root.appendChild(element);
-  let visible = false;
-  element.addEventListener("mousedown", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-    const { overlayMode } = libStore.getState();
-    if (overlayMode === "visible") {
-      libStore.setState((state) => ({
-        ...state,
-        overlayMode: "copying"
-      }));
-    }
-  }, true);
-  return {
-    element,
-    hide: () => {
-      visible = false;
-      element.style.display = "none";
-    },
-    isVisible: () => visible,
-    show: () => {
-      visible = true;
-      element.style.display = "block";
-    },
-    update: (selection) => {
-      updateSelectionElement(element, selection);
-    }
-  };
-};
-var createGrabbedOverlay = (root, selection) => {
-  const element = document.createElement("div");
-  element.style.position = "fixed";
-  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;
-  element.style.pointerEvents = "none";
-  element.style.border = "1px solid rgb(210, 57, 192)";
-  element.style.backgroundColor = "rgba(210, 57, 192, 0.2)";
-  element.style.zIndex = "2147483646";
-  element.style.boxSizing = "border-box";
-  element.style.transition = "opacity 0.3s ease-out";
-  element.style.opacity = "1";
-  root.appendChild(element);
-  requestAnimationFrame(() => {
-    element.style.opacity = "0";
-  });
-  setTimeout(() => {
-    element.remove();
-  }, 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";
-  spinner.animate(
-    [{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
-    {
-      duration: 600,
-      easing: "linear",
-      iterations: Infinity
-    }
-  );
-  return spinner;
-};
-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";
-  return indicator;
-};
-var showLabel = (root, selectionLeftPx, selectionTopPx, tagName) => {
-  let indicator = activeIndicator;
-  let isNewIndicator = false;
-  if (!indicator) {
-    indicator = createIndicator();
-    root.appendChild(indicator);
-    activeIndicator = indicator;
-    isNewIndicator = true;
-    isProcessing = false;
-  }
-  if (!isProcessing) {
-    const labelText = indicator.querySelector("span");
-    if (labelText) {
-      const tagNameMonospace = document.createElement("span");
-      tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
-      tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
-      tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
-      labelText.replaceChildren(tagNameMonospace);
-    } else {
-      const newLabelText = document.createElement("span");
-      const tagNameMonospace = document.createElement("span");
-      tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
-      tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
-      tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
-      newLabelText.appendChild(tagNameMonospace);
-      indicator.appendChild(newLabelText);
-    }
-  }
-  const indicatorRect = indicator.getBoundingClientRect();
-  const viewportWidthPx = window.innerWidth;
-  const viewportHeightPx = window.innerHeight;
-  let indicatorLeftPx = Math.round(selectionLeftPx);
-  let indicatorTopPx = Math.round(selectionTopPx) - indicatorRect.height - LABEL_OFFSET_PX;
-  const CLAMPED_PADDING = INDICATOR_CLAMP_PADDING_PX;
-  const minLeft = VIEWPORT_MARGIN_PX;
-  const minTop = VIEWPORT_MARGIN_PX;
-  const maxLeft = viewportWidthPx - indicatorRect.width - VIEWPORT_MARGIN_PX;
-  const maxTop = viewportHeightPx - indicatorRect.height - VIEWPORT_MARGIN_PX;
-  const willClampLeft = indicatorLeftPx < minLeft;
-  const willClampTop = indicatorTopPx < minTop;
-  const isClamped = willClampLeft || willClampTop;
-  indicatorLeftPx = Math.max(minLeft, Math.min(indicatorLeftPx, maxLeft));
-  indicatorTopPx = Math.max(minTop, Math.min(indicatorTopPx, maxTop));
-  if (isClamped) {
-    indicatorLeftPx += CLAMPED_PADDING;
-    indicatorTopPx += CLAMPED_PADDING;
-  }
-  indicator.style.left = `${indicatorLeftPx}px`;
-  indicator.style.top = `${indicatorTopPx}px`;
-  indicator.style.right = "auto";
-  if (isNewIndicator) {
-    requestAnimationFrame(() => {
-      indicator.style.opacity = "1";
-    });
-  } else if (indicator.style.opacity !== "1") {
-    indicator.style.opacity = "1";
-  }
-};
-var isProcessing = false;
-var activeGrabbedIndicators = /* @__PURE__ */ new Set();
-var updateLabelToProcessing = (root, selectionLeftPx, selectionTopPx) => {
-  const indicator = createIndicator();
-  indicator.style.zIndex = "2147483648";
-  root.appendChild(indicator);
-  activeGrabbedIndicators.add(indicator);
-  const positionIndicator = () => {
-    if (selectionLeftPx === void 0 || selectionTopPx === void 0) return;
-    const indicatorRect = indicator.getBoundingClientRect();
-    const viewportWidthPx = window.innerWidth;
-    const viewportHeightPx = window.innerHeight;
-    let indicatorLeftPx = Math.round(selectionLeftPx);
-    let indicatorTopPx = Math.round(selectionTopPx) - indicatorRect.height - LABEL_OFFSET_PX;
-    const CLAMPED_PADDING = INDICATOR_CLAMP_PADDING_PX;
-    const minLeft = VIEWPORT_MARGIN_PX;
-    const minTop = VIEWPORT_MARGIN_PX;
-    const maxLeft = viewportWidthPx - indicatorRect.width - VIEWPORT_MARGIN_PX;
-    const maxTop = viewportHeightPx - indicatorRect.height - VIEWPORT_MARGIN_PX;
-    const willClampLeft = indicatorLeftPx < minLeft;
-    const willClampTop = indicatorTopPx < minTop;
-    const isClamped = willClampLeft || willClampTop;
-    indicatorLeftPx = Math.max(minLeft, Math.min(indicatorLeftPx, maxLeft));
-    indicatorTopPx = Math.max(minTop, Math.min(indicatorTopPx, maxTop));
-    if (isClamped) {
-      indicatorLeftPx += CLAMPED_PADDING;
-      indicatorTopPx += CLAMPED_PADDING;
-    }
-    indicator.style.left = `${indicatorLeftPx}px`;
-    indicator.style.top = `${indicatorTopPx}px`;
-    indicator.style.right = "auto";
-  };
-  const loadingSpinner = createSpinner();
-  const labelText = document.createElement("span");
-  labelText.textContent = "Grabbing\u2026";
-  indicator.appendChild(loadingSpinner);
-  indicator.appendChild(labelText);
-  positionIndicator();
-  requestAnimationFrame(() => {
-    indicator.style.opacity = "1";
+// src/utils/copy-content.ts
+var waitForFocus = () => {
+  if (document.hasFocus()) return Promise.resolve();
+  return new Promise((resolve) => {
+    const onFocus = () => {
+      window.removeEventListener("focus", onFocus);
+      resolve();
+    };
+    window.addEventListener("focus", onFocus);
+    window.focus();
   });
-  return (tagName) => {
-    indicator.textContent = "";
-    const checkmarkIcon = document.createElement("span");
-    checkmarkIcon.textContent = "\u2713";
-    checkmarkIcon.style.display = "inline-block";
-    checkmarkIcon.style.marginRight = "4px";
-    checkmarkIcon.style.fontWeight = "600";
-    const newLabelText = document.createElement("span");
-    const tagNameMonospace = document.createElement("span");
-    tagNameMonospace.textContent = tagName ? `<${tagName}>` : "<element>";
-    tagNameMonospace.style.fontFamily = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
-    tagNameMonospace.style.fontVariantNumeric = "tabular-nums";
-    newLabelText.appendChild(document.createTextNode("Grabbed "));
-    newLabelText.appendChild(tagNameMonospace);
-    indicator.appendChild(checkmarkIcon);
-    indicator.appendChild(newLabelText);
-    requestAnimationFrame(() => {
-      positionIndicator();
-    });
-    setTimeout(() => {
-      indicator.style.opacity = "0";
-      setTimeout(() => {
-        indicator.remove();
-        activeGrabbedIndicators.delete(indicator);
-      }, INDICATOR_FADE_MS);
-    }, INDICATOR_SUCCESS_VISIBLE_MS);
-  };
-};
-var hideLabel = () => {
-  if (activeIndicator) {
-    activeIndicator.remove();
-    activeIndicator = null;
-  }
-  isProcessing = false;
-};
-var cleanupGrabbedIndicators = () => {
-  for (const indicator of activeGrabbedIndicators) {
-    indicator.remove();
-  }
-  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;
-};
-var showProgressIndicator = (root, progress, mouseX, mouseY) => {
-  if (!activeProgressIndicator) {
-    activeProgressIndicator = createProgressIndicatorElement();
-    root.appendChild(activeProgressIndicator);
-    requestAnimationFrame(() => {
-      if (activeProgressIndicator) {
-        activeProgressIndicator.style.opacity = "1";
-      }
-    });
-  }
-  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;
-  }
-  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}%`;
-  }
 };
-var hideProgressIndicator = () => {
-  if (activeProgressIndicator) {
-    activeProgressIndicator.style.opacity = "0";
-    setTimeout(() => {
-      if (activeProgressIndicator) {
-        activeProgressIndicator.remove();
-        activeProgressIndicator = null;
+var copyContent = async (content) => {
+  await waitForFocus();
+  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;
       }
-    }, 100);
-  }
-};
-
-// 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);
+      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;
+    } else if (content instanceof Blob) {
+      await navigator.clipboard.write([
+        new ClipboardItem({ [content.type]: content })
+      ]);
       return true;
-    } catch {
+    } 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);
+    el.remove();
   }
-  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;
-    }
+// src/core.tsx
+var init = (rawOptions) => {
+  const options = {
+    enabled: true,
+    keyHoldDuration: 300,
+    ...rawOptions
+  };
+  if (options.enabled === false) {
+    return;
   }
-  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
+  return createRoot((dispose) => {
+    const [isHoldingKeys, setIsHoldingKeys] = createSignal(false);
+    const [mouseX, setMouseX] = createSignal(-1e3);
+    const [mouseY, setMouseY] = createSignal(-1e3);
+    const [isDragging, setIsDragging] = createSignal(false);
+    const [dragStartX, setDragStartX] = createSignal(-1e3);
+    const [dragStartY, setDragStartY] = createSignal(-1e3);
+    const [isCopying, setIsCopying] = createSignal(false);
+    const [lastGrabbedElement, setLastGrabbedElement] = createSignal(null);
+    const [progressStartTime, setProgressStartTime] = createSignal(null);
+    const [progressTick, setProgressTick] = createSignal(0);
+    const [grabbedOverlays, setGrabbedOverlays] = createSignal([]);
+    const [successLabels, setSuccessLabels] = createSignal([]);
+    const [isActivated, setIsActivated] = createSignal(false);
+    const [showProgressIndicator, setShowProgressIndicator] = createSignal(false);
+    let holdTimerId = null;
+    let progressAnimationId = null;
+    let progressDelayTimerId = null;
+    const isOverlayActive = createMemo(() => isActivated() && !isCopying());
+    const isTargetKeyCombination = (event) => (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c";
+    const getElementAtPosition = (x, y) => {
+      const elementsAtPoint = document.elementsFromPoint(x, y);
+      for (const candidateElement of elementsAtPoint) {
+        if (candidateElement.closest(`[${ATTRIBUTE_NAME}]`)) {
+          continue;
+        }
+        const computedStyle = window.getComputedStyle(candidateElement);
+        if (!isElementVisible(candidateElement, computedStyle)) {
+          continue;
+        }
+        return candidateElement;
+      }
+      return null;
     };
-    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);
+    const getElementsInMarquee = (marqueeRect) => {
+      const elements = [];
+      const allElements = Array.from(document.querySelectorAll("*"));
+      const marqueeLeft = marqueeRect.x;
+      const marqueeTop = marqueeRect.y;
+      const marqueeRight = marqueeRect.x + marqueeRect.width;
+      const marqueeBottom = marqueeRect.y + marqueeRect.height;
+      for (const candidateElement of allElements) {
+        if (candidateElement.closest(`[${ATTRIBUTE_NAME}]`)) {
+          continue;
+        }
+        const computedStyle = window.getComputedStyle(candidateElement);
+        if (!isElementVisible(candidateElement, computedStyle)) {
+          continue;
+        }
+        const rect = candidateElement.getBoundingClientRect();
+        const elementLeft = rect.left;
+        const elementTop = rect.top;
+        const elementRight = rect.left + rect.width;
+        const elementBottom = rect.top + rect.height;
+        const intersectionLeft = Math.max(marqueeLeft, elementLeft);
+        const intersectionTop = Math.max(marqueeTop, elementTop);
+        const intersectionRight = Math.min(marqueeRight, elementRight);
+        const intersectionBottom = Math.min(marqueeBottom, elementBottom);
+        const intersectionWidth = Math.max(0, intersectionRight - intersectionLeft);
+        const intersectionHeight = Math.max(0, intersectionBottom - intersectionTop);
+        const intersectionArea = intersectionWidth * intersectionHeight;
+        const elementArea = Math.max(0, rect.width * rect.height);
+        const COVERAGE_THRESHOLD = 0.75;
+        const hasMajorityCoverage = elementArea > 0 && intersectionArea / elementArea >= COVERAGE_THRESHOLD;
+        if (hasMajorityCoverage) {
+          elements.push(candidateElement);
         }
-      } 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 */
+      return elements;
     };
-    subscriberMap.set(index, entry);
-    return () => {
-      subscriberMap.delete(index);
+    const getElementsInMarqueeLoose = (marqueeRect) => {
+      const elements = [];
+      const allElements = Array.from(document.querySelectorAll("*"));
+      const marqueeLeft = marqueeRect.x;
+      const marqueeTop = marqueeRect.y;
+      const marqueeRight = marqueeRect.x + marqueeRect.width;
+      const marqueeBottom = marqueeRect.y + marqueeRect.height;
+      for (const candidateElement of allElements) {
+        if (candidateElement.closest(`[${ATTRIBUTE_NAME}]`)) {
+          continue;
+        }
+        const tag = (candidateElement.tagName || "").toUpperCase();
+        if (tag === "HTML" || tag === "BODY") continue;
+        const computedStyle = window.getComputedStyle(candidateElement);
+        if (!isElementVisible(candidateElement, computedStyle)) {
+          continue;
+        }
+        const rect = candidateElement.getBoundingClientRect();
+        const elementLeft = rect.left;
+        const elementTop = rect.top;
+        const elementRight = rect.left + rect.width;
+        const elementBottom = rect.top + rect.height;
+        const intersects = elementLeft < marqueeRight && elementRight > marqueeLeft && elementTop < marqueeBottom && elementBottom > marqueeTop;
+        if (intersects) {
+          elements.push(candidateElement);
+        }
+      }
+      return elements;
     };
-  };
-  const subscribeToFullState = (listener) => {
-    const index = String(currentListenerIndex++);
-    const entry = {
-      listener,
-      type: "full" /* Full */
+    const wrapInReferencedElement = (content) => `
+
+<referenced_element>
+${content}
+</referenced_element>`;
+    const wrapInReferencedElements = (content) => `
+
+<referenced_elements>
+${content}
+</referenced_elements>`;
+    const addGrabbedOverlay = (bounds) => {
+      const id = `grabbed-${Date.now()}-${Math.random()}`;
+      setGrabbedOverlays((prev) => [...prev, {
+        id,
+        bounds
+      }]);
+      setTimeout(() => {
+        setGrabbedOverlays((prev) => prev.filter((overlay) => overlay.id !== id));
+      }, 300);
     };
-    subscriberMap.set(index, entry);
-    return () => {
-      subscriberMap.delete(index);
+    const addSuccessLabel = (text, x, y) => {
+      const id = `success-${Date.now()}-${Math.random()}`;
+      setSuccessLabels((prev) => [...prev, {
+        id,
+        text,
+        x,
+        y
+      }]);
+      setTimeout(() => {
+        setSuccessLabels((prev) => prev.filter((label) => label.id !== id));
+      }, 1700);
     };
-  };
-  function subscribe(subscriber, selector) {
-    return selector ? subscribeWithSelector(subscriber, selector) : subscribeToFullState(subscriber);
-  }
-  const store = {
-    getInitialState() {
-      return initialState;
-    },
-    getState,
-    setState,
-    subscribe
-  };
-  return store;
-};
+    const handleCopy = async (targetElement2) => {
+      const elementBounds = targetElement2.getBoundingClientRect();
+      const tagName = (targetElement2.tagName || "").toLowerCase();
+      addGrabbedOverlay({
+        borderRadius: window.getComputedStyle(targetElement2).borderRadius || "0px",
+        height: elementBounds.height,
+        transform: window.getComputedStyle(targetElement2).transform || "none",
+        width: elementBounds.width,
+        x: elementBounds.left,
+        y: elementBounds.top
+      });
+      try {
+        const elementHtml = getHTMLSnippet(targetElement2);
+        await copyContent(wrapInReferencedElement(elementHtml));
+        const componentStackTrace = await getSourceTrace(targetElement2);
+        if (componentStackTrace?.length) {
+          const formattedStackTrace = componentStackTrace.map((source) => ` ${source.functionName} - ${source.fileName}:${source.lineNumber}:${source.columnNumber}`).join("\n");
+          await copyContent(wrapInReferencedElement(`${elementHtml}
 
-// 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 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;
+Component owner stack:
+${formattedStackTrace}`));
         }
+      } catch {
       }
-      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());
+      addSuccessLabel(tagName ? `<${tagName}>` : "<element>", elementBounds.left, elementBounds.top);
+    };
+    const handleMultipleCopy = async (targetElements) => {
+      if (targetElements.length === 0) return;
+      let minX = Infinity;
+      let minY = Infinity;
+      for (const element of targetElements) {
+        const elementBounds = element.getBoundingClientRect();
+        minX = Math.min(minX, elementBounds.left);
+        minY = Math.min(minY, elementBounds.top);
+        addGrabbedOverlay({
+          borderRadius: window.getComputedStyle(element).borderRadius || "0px",
+          height: elementBounds.height,
+          transform: window.getComputedStyle(element).transform || "none",
+          width: elementBounds.width,
+          x: elementBounds.left,
+          y: elementBounds.top
+        });
+      }
+      try {
+        const elementSnippets = [];
+        for (const element of targetElements) {
+          const elementHtml = getHTMLSnippet(element);
+          const componentStackTrace = await getSourceTrace(element);
+          if (componentStackTrace?.length) {
+            const formattedStackTrace = componentStackTrace.map((source) => ` ${source.functionName} - ${source.fileName}:${source.lineNumber}:${source.columnNumber}`).join("\n");
+            elementSnippets.push(`${elementHtml}
+
+Component owner stack:
+${formattedStackTrace}`);
           } else {
-            nextPressedKeys.delete(activationKey);
-            nextTimestamps.delete(activationKey);
+            elementSnippets.push(elementHtml);
           }
         }
+        const combinedContent = elementSnippets.join("\n\n---\n\n");
+        await copyContent(wrapInReferencedElements(combinedContent));
+      } catch {
+      }
+      addSuccessLabel(`${targetElements.length} elements`, minX, minY);
+    };
+    const targetElement = createMemo(() => {
+      if (!isOverlayActive() || isDragging()) return null;
+      return getElementAtPosition(mouseX(), mouseY());
+    });
+    const selectionBounds = createMemo(() => {
+      const element = targetElement();
+      if (!element) return void 0;
+      const last = lastGrabbedElement();
+      if (last && element === last) return void 0;
+      const elementBounds = element.getBoundingClientRect();
+      const computedStyle = window.getComputedStyle(element);
+      return {
+        borderRadius: computedStyle.borderRadius || "0px",
+        height: elementBounds.height,
+        transform: computedStyle.transform || "none",
+        width: elementBounds.width,
+        x: elementBounds.left,
+        y: elementBounds.top
+      };
+    });
+    const marqueeBounds = createMemo(() => {
+      if (!isDragging()) return void 0;
+      const marqueeX = Math.min(dragStartX(), mouseX());
+      const marqueeY = Math.min(dragStartY(), mouseY());
+      const marqueeWidth = Math.abs(mouseX() - dragStartX());
+      const marqueeHeight = Math.abs(mouseY() - dragStartY());
+      return {
+        borderRadius: "0px",
+        height: marqueeHeight,
+        transform: "none",
+        width: marqueeWidth,
+        x: marqueeX,
+        y: marqueeY
+      };
+    });
+    const labelText = createMemo(() => {
+      const element = targetElement();
+      if (!element) return "";
+      const tagName = (element.tagName || "").toLowerCase();
+      return tagName ? `<${tagName}>` : "<element>";
+    });
+    const labelPosition = createMemo(() => {
+      const element = targetElement() ?? lastGrabbedElement();
+      if (element) {
+        const rect = element.getBoundingClientRect();
         return {
-          ...state,
-          keyPressTimestamps: nextTimestamps,
-          overlayMode: "hidden",
-          pressedKeys: nextPressedKeys
+          x: rect.left,
+          y: rect.top
         };
-      });
-      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
-      }));
+      return {
+        x: mouseX(),
+        y: mouseY()
+      };
     });
-  };
-  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();
+    const isSameAsLast = createMemo(() => {
+      const current = targetElement();
+      const last = lastGrabbedElement();
+      return !!current && current === last;
     });
-  };
-  let resizeScheduled = false;
-  const handleResize = () => {
-    if (resizeScheduled) return;
-    resizeScheduled = true;
-    requestAnimationFrame(() => {
-      resizeScheduled = false;
-      scheduleRender();
+    createEffect(() => {
+      const current = targetElement();
+      const last = lastGrabbedElement();
+      if (last && current && last !== current) {
+        setLastGrabbedElement(null);
+      }
     });
-  };
-  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();
-  const getElementAtPosition = (x, y) => {
-    const elements = document.elementsFromPoint(x, y);
-    for (const element of elements) {
-      if (element.closest(`[${ATTRIBUTE_NAME}]`)) {
-        continue;
+    const progress = createMemo(() => {
+      const startTime = progressStartTime();
+      progressTick();
+      if (startTime === null) return 0;
+      const elapsed = Date.now() - startTime;
+      return Math.min(elapsed / options.keyHoldDuration, 1);
+    });
+    const startProgressAnimation = () => {
+      setProgressStartTime(Date.now());
+      setShowProgressIndicator(false);
+      progressDelayTimerId = window.setTimeout(() => {
+        setShowProgressIndicator(true);
+        progressDelayTimerId = null;
+      }, 150);
+      const animateProgress = () => {
+        if (progressStartTime() === null) return;
+        setProgressTick((t) => t + 1);
+        const currentProgress = progress();
+        if (currentProgress < 1) {
+          progressAnimationId = requestAnimationFrame(animateProgress);
+        }
+      };
+      animateProgress();
+    };
+    const stopProgressAnimation = () => {
+      if (progressAnimationId !== null) {
+        cancelAnimationFrame(progressAnimationId);
+        progressAnimationId = null;
       }
-      const computedStyle = window.getComputedStyle(element);
-      if (!isElementVisible(element, computedStyle)) {
-        continue;
+      if (progressDelayTimerId !== null) {
+        window.clearTimeout(progressDelayTimerId);
+        progressDelayTimerId = null;
       }
-      return element;
-    }
-    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(
-        `
-
-<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}
-
-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);
+      setProgressStartTime(null);
+      setShowProgressIndicator(false);
+    };
+    const activateOverlay = () => {
+      stopProgressAnimation();
+      setIsActivated(true);
+    };
+    const abortController = new AbortController();
+    const signal = abortController.signal;
+    window.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && isHoldingKeys()) {
+        setIsHoldingKeys(false);
+        setIsActivated(false);
+        if (holdTimerId) window.clearTimeout(holdTimerId);
+        stopProgressAnimation();
+        return;
       }
-      cleanupIndicator(tagName);
-    } catch {
-      cleanupIndicator(tagName);
-    }
-  };
-  const handleRender = (state) => {
-    const { mouseX, mouseY, overlayMode } = state;
-    if (overlayMode === "hidden") {
-      if (selectionOverlay.isVisible()) {
-        selectionOverlay.hide();
+      if (isKeyboardEventTriggeredByInput(event)) return;
+      if (isTargetKeyCombination(event) && !isHoldingKeys()) {
+        setIsHoldingKeys(true);
+        startProgressAnimation();
+        holdTimerId = window.setTimeout(() => {
+          activateOverlay();
+          options.onActivate?.();
+        }, options.keyHoldDuration);
       }
-      if (!isCopying) {
-        hideLabel();
+    }, {
+      signal
+    });
+    window.addEventListener("keyup", (event) => {
+      if (isHoldingKeys() && (!isTargetKeyCombination(event) || event.key.toLowerCase() === "c")) {
+        setIsHoldingKeys(false);
+        setIsActivated(false);
+        if (holdTimerId) window.clearTimeout(holdTimerId);
+        stopProgressAnimation();
       }
-      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
+    }, {
+      signal
+    });
+    window.addEventListener("mousemove", (event) => {
+      setMouseX(event.clientX);
+      setMouseY(event.clientY);
+    }, {
+      signal
+    });
+    window.addEventListener("mousedown", (event) => {
+      if (!isOverlayActive() || isCopying()) return;
+      setIsDragging(true);
+      setDragStartX(event.clientX);
+      setDragStartY(event.clientY);
+    }, {
+      signal
+    });
+    window.addEventListener("mouseup", (event) => {
+      if (!isDragging()) return;
+      const dragDistanceX = Math.abs(event.clientX - dragStartX());
+      const dragDistanceY = Math.abs(event.clientY - dragStartY());
+      const DRAG_THRESHOLD = 5;
+      const wasDrag = dragDistanceX > DRAG_THRESHOLD || dragDistanceY > DRAG_THRESHOLD;
+      setIsDragging(false);
+      if (wasDrag) {
+        const marqueeX = Math.min(dragStartX(), event.clientX);
+        const marqueeY = Math.min(dragStartY(), event.clientY);
+        const marqueeWidth = Math.abs(event.clientX - dragStartX());
+        const marqueeHeight = Math.abs(event.clientY - dragStartY());
+        const elements = getElementsInMarquee({
+          x: marqueeX,
+          y: marqueeY,
+          width: marqueeWidth,
+          height: marqueeHeight
         });
-        void handleCopy(hoveredElement).finally(() => {
-          isCopying = false;
+        if (elements.length > 0) {
+          setIsCopying(true);
+          void handleMultipleCopy(elements).finally(() => {
+            setIsCopying(false);
+          });
+        } else {
+          const fallbackElements = getElementsInMarqueeLoose({
+            x: marqueeX,
+            y: marqueeY,
+            width: marqueeWidth,
+            height: marqueeHeight
+          });
+          if (fallbackElements.length > 0) {
+            setIsCopying(true);
+            void handleMultipleCopy(fallbackElements).finally(() => {
+              setIsCopying(false);
+            });
+          }
+        }
+      } else {
+        const element = getElementAtPosition(event.clientX, event.clientY);
+        if (!element) return;
+        setIsCopying(true);
+        setLastGrabbedElement(element);
+        void handleCopy(element).finally(() => {
+          setIsCopying(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();
-      }
-      hoveredElement = null;
-      return;
-    }
-    if (lastGrabbedElement && element !== lastGrabbedElement) {
-      lastGrabbedElement = null;
-    }
-    if (element === lastGrabbedElement) {
-      if (selectionOverlay.isVisible()) {
-        selectionOverlay.hide();
       }
-      if (!isCopying) {
-        hideLabel();
-      }
-      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
+    }, {
+      signal
     });
-    if (!selectionOverlay.isVisible()) {
-      selectionOverlay.show();
-    }
-    showLabel(root, rect.left, rect.top, tagName);
-    const isDisabled = (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access -- we do any because typing this will be a massive fucking headache
-      Boolean(element.disabled) || computedStyle.pointerEvents === "none"
-    );
-    if (isDisabled) {
-      const overlayElement = selectionOverlay.element;
-      if (overlayElement) {
-        overlayElement.style.pointerEvents = "auto";
+    window.addEventListener("scroll", () => {
+    }, {
+      signal,
+      capture: true
+    });
+    window.addEventListener("resize", () => {
+    }, {
+      signal
+    });
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) {
+        setGrabbedOverlays([]);
       }
-    }
-  };
-  let renderScheduled = false;
-  const scheduleRender = () => {
-    if (renderScheduled) return;
-    renderScheduled = true;
-    requestAnimationFrame(() => {
-      renderScheduled = false;
-      handleRender(libStore.getState());
+    }, {
+      signal
     });
-  };
-  const cleanupRenderSubscription = libStore.subscribe(() => {
-    scheduleRender();
+    onCleanup(() => {
+      abortController.abort();
+      if (holdTimerId) window.clearTimeout(holdTimerId);
+      stopProgressAnimation();
+    });
+    const overlayRoot = mountRoot();
+    const overlayProps = createMemo(() => ({
+      selectionVisible: isOverlayActive() && !isDragging() && !!selectionBounds(),
+      selectionBounds: selectionBounds(),
+      marqueeVisible: isOverlayActive() && isDragging(),
+      marqueeBounds: marqueeBounds(),
+      grabbedOverlays: grabbedOverlays(),
+      successLabels: successLabels(),
+      labelVariant: isCopying() ? "processing" : "hover",
+      labelText: labelText(),
+      labelX: labelPosition().x,
+      labelY: labelPosition().y,
+      labelVisible: isOverlayActive() && !isDragging() && !!targetElement() && !isSameAsLast() || isCopying(),
+      progressVisible: isHoldingKeys() && showProgressIndicator(),
+      progress: progress(),
+      mouseX: mouseX(),
+      mouseY: mouseY()
+    }));
+    render(() => createComponent(ReactGrabOverlay, mergeProps(overlayProps)), overlayRoot);
+    return dispose;
   });
-  const continuousRender = () => {
-    scheduleRender();
-    requestAnimationFrame(continuousRender);
-  };
-  continuousRender();
-  return () => {
-    window.removeEventListener("mousemove", handleMouseMove);
-    window.removeEventListener("mousedown", handleMouseDown, true);
-    window.removeEventListener("click", handleClick, true);
-    window.removeEventListener("scroll", handleScroll, true);
-    window.removeEventListener("resize", handleResize);
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-    cleanupTrackHotkeys();
-    cleanupRenderSubscription();
-    cleanupKeyStateChangeSubscription();
-    if (cleanupActivationHotkeyWatcher) {
-      cleanupActivationHotkeyWatcher();
-    }
-    stopProgressTracking();
-    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);
-}
 
-export { cursorAdapter, init, libStore };
+// src/index.ts
+init();