react-grab 0.0.21 → 0.0.24

package/dist/index.js

@@ -1,3 +1,5 @@
+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 { getOwnerStack, getSourcesFromStack } from 'bippy/dist/source';
 
@@ -10,6 +12,7 @@ import { getOwnerStack, getSourcesFromStack } from 'bippy/dist/source';
  * LICENSE file in the root directory of this source tree.
  */
 
+
 // src/utils/is-keyboard-event-triggered-by-input.ts
 var FORM_TAGS_AND_ROLES = [
   "input",
@@ -90,354 +93,448 @@ var mountRoot = () => {
 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 _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 INDICATOR_FADE_MS = 200;
+var SELECTION_LERP_FACTOR = 0.95;
+var MARQUEE_LERP_FACTOR = 0.9;
 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 = 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 }) => {
-  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, onSelectionClick) => {
-  const element = createSelectionElement({
-    borderRadius: "0px",
-    height: 0,
-    transform: "none",
-    width: 0,
-    x: -1e3,
-    y: -1e3
-  });
-  root.appendChild(element);
-  let visible = false;
+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;
-  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,
-    show: () => {
-      visible = true;
-      element.style.display = "block";
-    },
-    update: (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;
+  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;
+    }
+    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 {
-        updateSelectionElement(element, selection);
+        animationFrameId = null;
+      }
+    };
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+    animationFrameId = requestAnimationFrame(animate);
+    onCleanup(() => {
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
       }
+    });
+  });
+  createEffect(() => {
+    if (props.variant === "grabbed") {
+      requestAnimationFrame(() => {
+        setOpacity(0);
+      });
     }
+  });
+  const baseStyle = {
+    position: "fixed",
+    "box-sizing": "border-box",
+    "pointer-events": props.variant === "marquee" ? "none" : "auto",
+    "z-index": "2147483646"
   };
-};
-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";
+  const variantStyle = () => {
+    if (props.variant === "marquee") {
+      return {
+        border: "1px dashed rgb(210, 57, 192)",
+        "background-color": "rgba(210, 57, 192, 0.1)",
+        "will-change": "transform, width, height",
+        contain: "layout paint size"
+      };
+    }
+    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$;
+    }
   });
-  setTimeout(() => {
-    element.remove();
-  }, 300);
 };
-var createSpinner = () => {
-  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)" }],
-    {
-      duration: 600,
-      easing: "linear",
-      iterations: Infinity
+var Spinner = (props) => {
+  let ref;
+  createEffect(() => {
+    if (ref) {
+      ref.animate([{
+        transform: "rotate(0deg)"
+      }, {
+        transform: "rotate(360deg)"
+      }], {
+        duration: 600,
+        easing: "linear",
+        iterations: Infinity
+      });
     }
-  );
-  return spinner;
-};
-var activeIndicator = null;
-var createIndicator = () => {
-  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;
+  });
+  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 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);
+var Label = (props) => {
+  const [opacity, setOpacity] = createSignal(0);
+  let ref;
+  createEffect(() => {
+    if (props.visible !== false) {
+      requestAnimationFrame(() => {
+        setOpacity(1);
+      });
     } 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);
+      setOpacity(0);
     }
-  }
-  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();
+  });
+  createEffect(() => {
+    if (props.variant === "success") {
+      const fadeOutTimer = setTimeout(() => {
+        setOpacity(0);
+      }, INDICATOR_SUCCESS_VISIBLE_MS);
+      onCleanup(() => clearTimeout(fadeOutTimer));
+    }
+  });
+  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(selectionLeftPx);
-    let indicatorTopPx = Math.round(selectionTopPx) - indicatorRect.height - LABEL_OFFSET_PX;
-    const CLAMPED_PADDING = INDICATOR_CLAMP_PADDING_PX;
+    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 - indicatorRect.width - VIEWPORT_MARGIN_PX;
-    const maxTop = viewportHeightPx - indicatorRect.height - 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 += CLAMPED_PADDING;
-      indicatorTopPx += CLAMPED_PADDING;
+      indicatorLeftPx += INDICATOR_CLAMP_PADDING_PX;
+      indicatorTopPx += INDICATOR_CLAMP_PADDING_PX;
     }
-    indicator.style.left = `${indicatorLeftPx}px`;
-    indicator.style.top = `${indicatorTopPx}px`;
-    indicator.style.right = "auto";
+    return {
+      left: indicatorLeftPx,
+      top: indicatorTopPx
+    };
   };
-  const loadingSpinner = createSpinner();
-  const labelText = document.createElement("span");
-  labelText.textContent = "Grabbing\u2026";
-  indicator.appendChild(loadingSpinner);
-  indicator.appendChild(labelText);
-  positionIndicator();
-  requestAnimationFrame(() => {
-    indicator.style.opacity = "1";
+  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;
+    }
   });
-  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 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;
+    }
+    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
+    };
+  };
+  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;
+    }
+  });
 };
-var cleanupGrabbedIndicators = () => {
-  for (const indicator of activeGrabbedIndicators) {
-    indicator.remove();
-  }
-  activeGrabbedIndicators.clear();
+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
+      });
+    }
+  }), 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
+      });
+    }
+  }), createComponent(For, {
+    get each() {
+      return props.grabbedOverlays ?? [];
+    },
+    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;
+        }
+      });
+    }
+  })];
 };
 instrument({
   onCommitFiberRoot(_, fiberRoot) {
     _fiberRoots.add(fiberRoot);
   }
 });
+var isValidSource = (source) => {
+  const fileName = source.fileName;
+  if (fileName.includes("node_modules")) return false;
+  if (fileName.includes("/dist/")) return false;
+  if (fileName.includes("/.next/")) return false;
+  if (fileName.includes("/build/")) return false;
+  if (fileName.includes("webpack-internal:")) return false;
+  return true;
+};
 var getSourceTrace = async (element) => {
   const fiber = getFiberFromHostInstance(element);
   if (!fiber) return null;
@@ -447,7 +544,7 @@ var getSourceTrace = async (element) => {
     Number.MAX_SAFE_INTEGER
   );
   if (!sources) return null;
-  return sources;
+  return sources.filter(isValidSource);
 };
 var getHTMLSnippet = (element) => {
   const semanticTags = /* @__PURE__ */ new Set([
@@ -648,7 +745,19 @@ var getHTMLSnippet = (element) => {
 };
 
 // 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();
+  });
+};
 var copyContent = async (content) => {
+  await waitForFocus();
   try {
     if (Array.isArray(content)) {
       if (!navigator?.clipboard?.write) {
@@ -710,218 +819,457 @@ var copyContentFallback = (content) => {
   }
 };
 
-// src/core.ts
+// src/core.tsx
 var init = (rawOptions) => {
   const options = {
     enabled: true,
-    keyHoldDuration: 500,
+    keyHoldDuration: 300,
     ...rawOptions
   };
   if (options.enabled === false) {
     return;
   }
-  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 mouseX = -1e3;
-  let mouseY = -1e3;
-  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;
+  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;
+        }
+        if (computedStyle.pointerEvents === "none") {
+          continue;
+        }
+        return candidateElement;
       }
-      const computedStyle = window.getComputedStyle(candidateElement);
-      if (!isElementVisible(candidateElement, computedStyle)) {
-        continue;
+      return null;
+    };
+    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;
+        }
+        if (computedStyle.pointerEvents === "none") {
+          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);
+        }
       }
-      return candidateElement;
-    }
-    return null;
-  };
-  const wrapInReferencedElement = (content) => `
+      return elements;
+    };
+    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;
+        }
+        if (computedStyle.pointerEvents === "none") {
+          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 wrapInReferencedElement = (content) => `
 
 <referenced_element>
 ${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}
+    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);
+    };
+    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);
+    };
+    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}
 
 Component owner stack:
-${formattedStackTrace}`
-          )
-        );
+${formattedStackTrace}`));
+        }
+      } catch {
       }
-      showSuccessIndicator(tagName);
-    } catch {
-      showSuccessIndicator(tagName);
-    }
-  };
-  const hideOverlayAndLabel = () => {
-    selectionOverlay?.hide();
-    if (!isCopying) hideLabel();
-  };
-  const handleRender = () => {
-    if (!isActive) {
-      hideOverlayAndLabel();
-      hoveredElement = null;
-      lastGrabbedElement = null;
-      return;
-    }
-    if (isCopying) return;
-    const targetElement = getElementAtPosition(mouseX, mouseY);
-    if (!targetElement) {
-      hideOverlayAndLabel();
-      hoveredElement = null;
-      return;
-    }
-    if (lastGrabbedElement) {
-      if (targetElement !== lastGrabbedElement) {
-        lastGrabbedElement = null;
-      } else {
-        hideOverlayAndLabel();
-        hoveredElement = targetElement;
+      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 {
+            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() ?? lastGrabbedElement();
+      if (!element) 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 {
+          x: rect.left,
+          y: rect.top
+        };
+      }
+      return {
+        x: mouseX(),
+        y: mouseY()
+      };
+    });
+    createEffect(() => {
+      const current = targetElement();
+      const last = lastGrabbedElement();
+      if (last && current && last !== current) {
+        setLastGrabbedElement(null);
+      }
+    });
+    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;
+      }
+      if (progressDelayTimerId !== null) {
+        window.clearTimeout(progressDelayTimerId);
+        progressDelayTimerId = null;
+      }
+      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;
       }
-    }
-    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 (isKeyboardEventTriggeredByInput(event)) return;
+      if (isTargetKeyCombination(event) && !isHoldingKeys()) {
+        setIsHoldingKeys(true);
+        startProgressAnimation();
+        holdTimerId = window.setTimeout(() => {
+          activateOverlay();
+          options.onActivate?.();
+        }, options.keyHoldDuration);
+      }
+    }, {
+      signal
     });
-    if (!selectionOverlay?.isVisible()) selectionOverlay?.show();
-    showLabel(
-      overlayRoot,
-      elementBounds.left,
-      elementBounds.top,
-      (targetElement.tagName || "").toLowerCase()
-    );
-  };
-  const scheduleRender = () => {
-    if (renderFrameId !== null) return;
-    renderFrameId = requestAnimationFrame(() => {
-      renderFrameId = null;
-      handleRender();
+    window.addEventListener("keyup", (event) => {
+      if (isHoldingKeys() && (!isTargetKeyCombination(event) || event.key.toLowerCase() === "c")) {
+        setIsHoldingKeys(false);
+        setIsActivated(false);
+        if (holdTimerId) window.clearTimeout(holdTimerId);
+        stopProgressAnimation();
+      }
+    }, {
+      signal
     });
-  };
-  const continuousRender = () => {
-    scheduleRender();
-    requestAnimationFrame(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
+    window.addEventListener("mousemove", (event) => {
+      setMouseX(event.clientX);
+      setMouseY(event.clientY);
+    }, {
+      signal
     });
-    void handleCopy(targetElement).finally(() => {
-      isCopying = false;
-      isActive = isHoldingKeys;
+    window.addEventListener("mousedown", (event) => {
+      if (!isOverlayActive() || isCopying()) return;
+      setIsDragging(true);
+      setDragStartX(event.clientX);
+      setDragStartY(event.clientY);
+    }, {
+      signal
     });
-  };
-  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("scroll", scheduleRender, true);
-    window.removeEventListener("resize", scheduleRender);
-    document.removeEventListener("visibilitychange", handleVisibilityChange);
-    if (holdTimer) window.clearTimeout(holdTimer);
-    if (renderFrameId) cancelAnimationFrame(renderFrameId);
-    cleanupGrabbedIndicators();
-    hideLabel();
-  };
+    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
+        });
+        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);
+        });
+      }
+    }, {
+      signal
+    });
+    window.addEventListener("scroll", () => {
+    }, {
+      signal,
+      capture: true
+    });
+    window.addEventListener("resize", () => {
+    }, {
+      signal
+    });
+    document.addEventListener("visibilitychange", () => {
+      if (document.hidden) {
+        setGrabbedOverlays([]);
+      }
+    }, {
+      signal
+    });
+    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() || isCopying(),
+      progressVisible: isHoldingKeys() && showProgressIndicator(),
+      progress: progress(),
+      mouseX: mouseX(),
+      mouseY: mouseY()
+    }));
+    render(() => createComponent(ReactGrabOverlay, mergeProps(overlayProps)), overlayRoot);
+    return dispose;
+  });
 };
 
 // src/index.ts