react-grab 0.0.23 → 0.0.25

package/dist/index.js

@@ -1,5 +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 { render, createComponent, memo, template, effect, style, setStyleProperty, insert, use } from 'solid-js/web';
+import { createRoot, createSignal, createMemo, createEffect, on, onCleanup, Show, For, onMount } from 'solid-js';
 import { instrument, _fiberRoots, getFiberFromHostInstance } from 'bippy';
 import { getOwnerStack, getSourcesFromStack } from 'bippy/dist/source';
 
@@ -89,93 +89,89 @@ var mountRoot = () => {
   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)">`);
+// src/constants.ts
 var VIEWPORT_MARGIN_PX = 8;
-var LABEL_OFFSET_PX = 6;
 var INDICATOR_CLAMP_PADDING_PX = 4;
-var INDICATOR_SUCCESS_VISIBLE_MS = 1500;
+var CURSOR_OFFSET_PX = 14;
 var SELECTION_LERP_FACTOR = 0.95;
-var MARQUEE_LERP_FACTOR = 0.9;
+
+// src/utils/lerp.ts
 var lerp = (start, end, factor) => {
   return start + (end - start) * factor;
 };
-var Overlay = (props) => {
+
+// src/components/selection-box.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var SelectionBox = (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 hasBeenRenderedOnce = 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;
-    }
-    const EPSILON = 0.5;
+  let isAnimating = false;
+  const lerpFactor = () => {
+    if (props.lerpFactor !== void 0) return props.lerpFactor;
+    if (props.variant === "drag") return 0.9;
+    return SELECTION_LERP_FACTOR;
+  };
+  const startAnimation = () => {
+    if (isAnimating) return;
+    isAnimating = true;
     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) {
+      const interpolatedX = lerp(currentX(), targetBounds.x, lerpFactor());
+      const interpolatedY = lerp(currentY(), targetBounds.y, lerpFactor());
+      const interpolatedWidth = lerp(currentWidth(), targetBounds.width, lerpFactor());
+      const interpolatedHeight = lerp(currentHeight(), targetBounds.height, lerpFactor());
+      setCurrentX(interpolatedX);
+      setCurrentY(interpolatedY);
+      setCurrentWidth(interpolatedWidth);
+      setCurrentHeight(interpolatedHeight);
+      const hasConvergedToTarget = Math.abs(interpolatedX - targetBounds.x) < 0.5 && Math.abs(interpolatedY - targetBounds.y) < 0.5 && Math.abs(interpolatedWidth - targetBounds.width) < 0.5 && Math.abs(interpolatedHeight - targetBounds.height) < 0.5;
+      if (!hasConvergedToTarget) {
         animationFrameId = requestAnimationFrame(animate);
       } else {
         animationFrameId = null;
+        isAnimating = false;
       }
     };
+    animationFrameId = requestAnimationFrame(animate);
+  };
+  createEffect(on(() => props.bounds, (newBounds) => {
+    targetBounds = newBounds;
+    if (!hasBeenRenderedOnce) {
+      setCurrentX(targetBounds.x);
+      setCurrentY(targetBounds.y);
+      setCurrentWidth(targetBounds.width);
+      setCurrentHeight(targetBounds.height);
+      hasBeenRenderedOnce = true;
+      return;
+    }
+    startAnimation();
+  }));
+  onCleanup(() => {
     if (animationFrameId !== null) {
       cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
     }
-    animationFrameId = requestAnimationFrame(animate);
-    onCleanup(() => {
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-        animationFrameId = null;
-      }
-    });
-  });
-  createEffect(() => {
-    if (props.variant === "grabbed") {
-      requestAnimationFrame(() => {
-        setOpacity(0);
-      });
-    }
+    isAnimating = false;
   });
   const baseStyle = {
     position: "fixed",
     "box-sizing": "border-box",
-    "pointer-events": props.variant === "marquee" ? "none" : "auto",
+    "pointer-events": props.variant === "drag" ? "none" : "auto",
     "z-index": "2147483646"
   };
   const variantStyle = () => {
-    if (props.variant === "marquee") {
+    if (props.variant === "drag") {
       return {
         border: "1px dashed rgb(210, 57, 192)",
-        "background-color": "rgba(210, 57, 192, 0.1)",
+        "background-color": "rgba(210, 57, 192, 0.15)",
         "will-change": "transform, width, height",
-        contain: "layout paint size"
+        contain: "layout paint size",
+        cursor: "crosshair"
       };
     }
     return {
@@ -205,11 +201,12 @@ var Overlay = (props) => {
     }
   });
 };
+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 Spinner = (props) => {
-  let ref;
-  createEffect(() => {
-    if (ref) {
-      ref.animate([{
+  let spinnerRef;
+  onMount(() => {
+    if (spinnerRef) {
+      spinnerRef.animate([{
         transform: "rotate(0deg)"
       }, {
         transform: "rotate(360deg)"
@@ -221,126 +218,145 @@ var Spinner = (props) => {
     }
   });
   return (() => {
-    var _el$2 = _tmpl$2();
-    var _ref$ = ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$2) : ref = _el$2;
-    effect((_$p) => style(_el$2, {
+    var _el$ = _tmpl$2();
+    var _ref$ = spinnerRef;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : spinnerRef = _el$;
+    effect((_$p) => style(_el$, {
       ...props.style
     }, _$p));
-    return _el$2;
+    return _el$;
   })();
 };
+
+// src/utils/get-clamped-element-position.ts
+var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elementHeight) => {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const minLeft = VIEWPORT_MARGIN_PX;
+  const minTop = VIEWPORT_MARGIN_PX;
+  const maxLeft = viewportWidth - elementWidth - VIEWPORT_MARGIN_PX;
+  const maxTop = viewportHeight - elementHeight - VIEWPORT_MARGIN_PX;
+  const clampedLeft = Math.max(minLeft, Math.min(positionLeft, maxLeft));
+  const clampedTop = Math.max(minTop, Math.min(positionTop, maxTop));
+  return { left: clampedLeft, top: clampedTop };
+};
+
+// src/components/label.tsx
+var _tmpl$3 = /* @__PURE__ */ template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
+var _tmpl$22 = /* @__PURE__ */ template(`<div style=margin-right:4px>Grabbed`);
+var _tmpl$32 = /* @__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 style="font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-variant-numeric:tabular-nums">`);
 var Label = (props) => {
   const [opacity, setOpacity] = createSignal(0);
-  let ref;
-  createEffect(() => {
-    if (props.visible !== false) {
+  let labelRef;
+  createEffect(on(() => props.visible, (visible) => {
+    if (visible !== false) {
       requestAnimationFrame(() => {
         setOpacity(1);
       });
     } else {
       setOpacity(0);
+      return;
     }
-  });
-  createEffect(() => {
     if (props.variant === "success") {
       const fadeOutTimer = setTimeout(() => {
         setOpacity(0);
-      }, INDICATOR_SUCCESS_VISIBLE_MS);
+      }, 1500);
       onCleanup(() => clearTimeout(fadeOutTimer));
     }
-  });
-  const indicatorRect = () => ref?.getBoundingClientRect();
+  }));
+  const labelBoundingRect = () => labelRef?.getBoundingClientRect();
   const computedPosition = () => {
-    const rect = indicatorRect();
-    if (!rect) return {
+    const boundingRect = labelBoundingRect();
+    if (!boundingRect) 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;
+    if (props.variant === "success") {
+      const indicatorLeft = Math.round(props.x);
+      const indicatorTop = Math.round(props.y) - boundingRect.height - 6;
+      const willClampLeft = indicatorLeft < VIEWPORT_MARGIN_PX;
+      const willClampTop = indicatorTop < VIEWPORT_MARGIN_PX;
+      const isClamped = willClampLeft || willClampTop;
+      const clamped = getClampedElementPosition(indicatorLeft, indicatorTop, boundingRect.width, boundingRect.height);
+      if (isClamped) {
+        clamped.left += INDICATOR_CLAMP_PADDING_PX;
+        clamped.top += INDICATOR_CLAMP_PADDING_PX;
+      }
+      return clamped;
     }
-    return {
-      left: indicatorLeftPx,
-      top: indicatorTopPx
-    };
+    const CROSSHAIR_OFFSET = 12;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const quadrants = [{
+      left: Math.round(props.x) + CROSSHAIR_OFFSET,
+      top: Math.round(props.y) + CROSSHAIR_OFFSET
+    }, {
+      left: Math.round(props.x) - boundingRect.width - CROSSHAIR_OFFSET,
+      top: Math.round(props.y) + CROSSHAIR_OFFSET
+    }, {
+      left: Math.round(props.x) + CROSSHAIR_OFFSET,
+      top: Math.round(props.y) - boundingRect.height - CROSSHAIR_OFFSET
+    }, {
+      left: Math.round(props.x) - boundingRect.width - CROSSHAIR_OFFSET,
+      top: Math.round(props.y) - boundingRect.height - CROSSHAIR_OFFSET
+    }];
+    for (const position of quadrants) {
+      const fitsHorizontally = position.left >= VIEWPORT_MARGIN_PX && position.left + boundingRect.width <= viewportWidth - VIEWPORT_MARGIN_PX;
+      const fitsVertically = position.top >= VIEWPORT_MARGIN_PX && position.top + boundingRect.height <= viewportHeight - VIEWPORT_MARGIN_PX;
+      if (fitsHorizontally && fitsVertically) {
+        return position;
+      }
+    }
+    const fallback = getClampedElementPosition(quadrants[0].left, quadrants[0].top, boundingRect.width, boundingRect.height);
+    fallback.left += INDICATOR_CLAMP_PADDING_PX;
+    fallback.top += INDICATOR_CLAMP_PADDING_PX;
+    return fallback;
   };
   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, {
+      var _el$ = _tmpl$32(), _el$4 = _el$.firstChild;
+      var _ref$ = labelRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : labelRef = _el$;
+      insert(_el$, createComponent(Show, {
         get when() {
           return props.variant === "processing";
         },
         get children() {
           return createComponent(Spinner, {});
         }
-      }), _el$5);
-      insert(_el$3, createComponent(Show, {
+      }), _el$4);
+      insert(_el$, createComponent(Show, {
         get when() {
           return props.variant === "success";
         },
         get children() {
           return _tmpl$3();
         }
-      }), _el$5);
-      insert(_el$5, createComponent(Show, {
+      }), _el$4);
+      insert(_el$, 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;
+          return _tmpl$22();
         }
-      }), null);
-      insert(_el$5, createComponent(Show, {
+      }), _el$4);
+      insert(_el$, createComponent(Show, {
         get when() {
-          return props.variant !== "hover";
+          return props.variant === "processing";
         },
-        get children() {
-          var _el$7 = _tmpl$4();
-          insert(_el$7, () => props.text);
-          return _el$7;
-        }
-      }), null);
+        children: "Grabbing\u2026"
+      }), _el$4);
+      insert(_el$4, () => props.text);
       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);
+        _v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
+        _v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
+        _v$3 !== _p$.a && setStyleProperty(_el$, "z-index", _p$.a = _v$3);
+        _v$4 !== _p$.o && setStyleProperty(_el$, "opacity", _p$.o = _v$4);
         return _p$;
       }, {
         e: void 0,
@@ -348,58 +364,52 @@ var Label = (props) => {
         a: void 0,
         o: void 0
       });
-      return _el$3;
+      return _el$;
     }
   });
 };
-var ProgressIndicator = (props) => {
+var _tmpl$4 = /* @__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 useFadeInOut = (visible) => {
   const [opacity, setOpacity] = createSignal(0);
-  let ref;
-  createEffect(() => {
-    if (props.visible !== false) {
+  createEffect(on(() => visible, (isVisible) => {
+    if (isVisible !== false) {
       requestAnimationFrame(() => {
         setOpacity(1);
       });
     } else {
       setOpacity(0);
     }
-  });
+  }));
+  return opacity;
+};
+var ProgressIndicator = (props) => {
+  const opacity = useFadeInOut(props.visible);
+  let progressIndicatorRef;
   const computedPosition = () => {
-    const rect = ref?.getBoundingClientRect();
-    if (!rect) return {
+    const boundingRect = progressIndicatorRef?.getBoundingClientRect();
+    if (!boundingRect) 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
-    };
+    const indicatorLeft = props.mouseX - boundingRect.width / 2;
+    const indicatorTop = props.mouseY + CURSOR_OFFSET_PX + boundingRect.height + VIEWPORT_MARGIN_PX > viewportHeight ? props.mouseY - boundingRect.height - CURSOR_OFFSET_PX : props.mouseY + CURSOR_OFFSET_PX;
+    return getClampedElementPosition(indicatorLeft, indicatorTop, boundingRect.width, boundingRect.height);
   };
   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;
+      var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+      var _ref$ = progressIndicatorRef;
+      typeof _ref$ === "function" ? use(_ref$, _el$) : progressIndicatorRef = _el$;
       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);
+        var _v$ = `${computedPosition().top}px`, _v$2 = `${computedPosition().left}px`, _v$3 = opacity(), _v$4 = `${Math.min(100, Math.max(0, props.progress * 100))}%`;
+        _v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
+        _v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
+        _v$3 !== _p$.a && setStyleProperty(_el$, "opacity", _p$.a = _v$3);
+        _v$4 !== _p$.o && setStyleProperty(_el$3, "width", _p$.o = _v$4);
         return _p$;
       }, {
         e: void 0,
@@ -407,53 +417,131 @@ var ProgressIndicator = (props) => {
         a: void 0,
         o: void 0
       });
-      return _el$8;
+      return _el$;
+    }
+  });
+};
+var _tmpl$5 = /* @__PURE__ */ template(`<div style=position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483645><div style="position:absolute;top:0;width:1px;height:100%;background-color:rgba(210, 57, 192, 0.5);will-change:transform"></div><div style="position:absolute;left:0;width:100%;height:1px;background-color:rgba(210, 57, 192, 0.5);will-change:transform">`);
+var Crosshair = (props) => {
+  const [currentX, setCurrentX] = createSignal(props.mouseX);
+  const [currentY, setCurrentY] = createSignal(props.mouseY);
+  let hasBeenRenderedOnce = false;
+  let animationFrameId = null;
+  let targetX = props.mouseX;
+  let targetY = props.mouseY;
+  let isAnimating = false;
+  const startAnimation = () => {
+    if (isAnimating) return;
+    isAnimating = true;
+    const animate = () => {
+      const interpolatedX = lerp(currentX(), targetX, 0.3);
+      const interpolatedY = lerp(currentY(), targetY, 0.3);
+      setCurrentX(interpolatedX);
+      setCurrentY(interpolatedY);
+      const hasConvergedToTarget = Math.abs(interpolatedX - targetX) < 0.5 && Math.abs(interpolatedY - targetY) < 0.5;
+      if (!hasConvergedToTarget) {
+        animationFrameId = requestAnimationFrame(animate);
+      } else {
+        animationFrameId = null;
+        isAnimating = false;
+      }
+    };
+    animationFrameId = requestAnimationFrame(animate);
+  };
+  createEffect(on(() => [props.mouseX, props.mouseY], ([newMouseX, newMouseY]) => {
+    targetX = newMouseX;
+    targetY = newMouseY;
+    if (!hasBeenRenderedOnce) {
+      setCurrentX(targetX);
+      setCurrentY(targetY);
+      hasBeenRenderedOnce = true;
+      return;
+    }
+    startAnimation();
+  }));
+  onCleanup(() => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+    isAnimating = false;
+  });
+  return createComponent(Show, {
+    get when() {
+      return props.visible !== false;
+    },
+    get children() {
+      var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+      effect((_p$) => {
+        var _v$ = `${currentX()}px`, _v$2 = `${currentY()}px`;
+        _v$ !== _p$.e && setStyleProperty(_el$2, "left", _p$.e = _v$);
+        _v$2 !== _p$.t && setStyleProperty(_el$3, "top", _p$.t = _v$2);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0
+      });
+      return _el$;
     }
   });
 };
-var ReactGrabOverlay = (props) => {
+
+// src/components/renderer.tsx
+var ReactGrabRenderer = (props) => {
   return [createComponent(Show, {
     get when() {
       return memo(() => !!props.selectionVisible)() && props.selectionBounds;
     },
     get children() {
-      return createComponent(Overlay, {
+      return createComponent(SelectionBox, {
         variant: "selection",
         get bounds() {
           return props.selectionBounds;
         },
         get visible() {
           return props.selectionVisible;
+        }
+      });
+    }
+  }), createComponent(Show, {
+    get when() {
+      return memo(() => !!(props.crosshairVisible === true && props.mouseX !== void 0))() && props.mouseY !== void 0;
+    },
+    get children() {
+      return createComponent(Crosshair, {
+        get mouseX() {
+          return props.mouseX;
         },
-        lerpFactor: SELECTION_LERP_FACTOR
+        get mouseY() {
+          return props.mouseY;
+        },
+        visible: true
       });
     }
   }), createComponent(Show, {
     get when() {
-      return memo(() => !!props.marqueeVisible)() && props.marqueeBounds;
+      return memo(() => !!props.dragVisible)() && props.dragBounds;
     },
     get children() {
-      return createComponent(Overlay, {
-        variant: "marquee",
+      return createComponent(SelectionBox, {
+        variant: "drag",
         get bounds() {
-          return props.marqueeBounds;
+          return props.dragBounds;
         },
         get visible() {
-          return props.marqueeVisible;
-        },
-        lerpFactor: MARQUEE_LERP_FACTOR
+          return props.dragVisible;
+        }
       });
     }
   }), createComponent(For, {
     get each() {
-      return props.grabbedOverlays ?? [];
+      return props.grabbedBoxes ?? [];
     },
-    children: (overlay) => createComponent(Overlay, {
+    children: (box) => createComponent(SelectionBox, {
       variant: "grabbed",
       get bounds() {
-        return overlay.bounds;
-      },
-      visible: true
+        return box.bounds;
+      }
     })
   }), createComponent(For, {
     get each() {
@@ -469,9 +557,7 @@ var ReactGrabOverlay = (props) => {
       },
       get y() {
         return label.y;
-      },
-      visible: true,
-      zIndex: 2147483648
+      }
     })
   }), createComponent(Show, {
     get when() {
@@ -810,7 +896,105 @@ var copyContentFallback = (content) => {
   }
 };
 
+// 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/is-valid-grabbable-element.ts
+var isValidGrabbableElement = (element) => {
+  if (element.closest(`[${ATTRIBUTE_NAME}]`)) {
+    return false;
+  }
+  const computedStyle = window.getComputedStyle(element);
+  if (!isElementVisible(element, computedStyle)) {
+    return false;
+  }
+  if (computedStyle.pointerEvents === "none") {
+    return false;
+  }
+  return true;
+};
+
+// src/utils/get-element-at-position.ts
+var getElementAtPosition = (clientX, clientY) => {
+  const elementsAtPoint = document.elementsFromPoint(clientX, clientY);
+  for (const candidateElement of elementsAtPoint) {
+    if (isValidGrabbableElement(candidateElement)) {
+      return candidateElement;
+    }
+  }
+  return null;
+};
+
+// src/utils/get-elements-in-drag.ts
+var DRAG_COVERAGE_THRESHOLD = 0.75;
+var filterElementsInDrag = (dragRect, isValidGrabbableElement2, shouldCheckCoverage) => {
+  const elements = [];
+  const allElements = Array.from(document.querySelectorAll("*"));
+  const dragLeft = dragRect.x;
+  const dragTop = dragRect.y;
+  const dragRight = dragRect.x + dragRect.width;
+  const dragBottom = dragRect.y + dragRect.height;
+  for (const candidateElement of allElements) {
+    if (!shouldCheckCoverage) {
+      const tagName = (candidateElement.tagName || "").toUpperCase();
+      if (tagName === "HTML" || tagName === "BODY") continue;
+    }
+    if (!isValidGrabbableElement2(candidateElement)) {
+      continue;
+    }
+    const elementRect = candidateElement.getBoundingClientRect();
+    const elementLeft = elementRect.left;
+    const elementTop = elementRect.top;
+    const elementRight = elementRect.left + elementRect.width;
+    const elementBottom = elementRect.top + elementRect.height;
+    if (shouldCheckCoverage) {
+      const intersectionLeft = Math.max(dragLeft, elementLeft);
+      const intersectionTop = Math.max(dragTop, elementTop);
+      const intersectionRight = Math.min(dragRight, elementRight);
+      const intersectionBottom = Math.min(dragBottom, elementBottom);
+      const intersectionWidth = Math.max(0, intersectionRight - intersectionLeft);
+      const intersectionHeight = Math.max(0, intersectionBottom - intersectionTop);
+      const intersectionArea = intersectionWidth * intersectionHeight;
+      const elementArea = Math.max(0, elementRect.width * elementRect.height);
+      const hasMajorityCoverage = elementArea > 0 && intersectionArea / elementArea >= DRAG_COVERAGE_THRESHOLD;
+      if (hasMajorityCoverage) {
+        elements.push(candidateElement);
+      }
+    } else {
+      const hasIntersection = elementLeft < dragRight && elementRight > dragLeft && elementTop < dragBottom && elementBottom > dragTop;
+      if (hasIntersection) {
+        elements.push(candidateElement);
+      }
+    }
+  }
+  return elements;
+};
+var getElementsInDrag = (dragRect, isValidGrabbableElement2) => {
+  return filterElementsInDrag(dragRect, isValidGrabbableElement2, true);
+};
+var getElementsInDragLoose = (dragRect, isValidGrabbableElement2) => {
+  return filterElementsInDrag(dragRect, isValidGrabbableElement2, false);
+};
+
+// src/utils/create-element-bounds.ts
+var createElementBounds = (element) => {
+  const boundingRect = element.getBoundingClientRect();
+  const computedStyle = window.getComputedStyle(element);
+  return {
+    borderRadius: computedStyle.borderRadius || "0px",
+    height: boundingRect.height,
+    transform: computedStyle.transform || "none",
+    width: boundingRect.width,
+    x: boundingRect.left,
+    y: boundingRect.top
+  };
+};
+
 // src/core.tsx
+var SUCCESS_LABEL_DURATION_MS = 1700;
+var PROGRESS_INDICATOR_DELAY_MS = 150;
 var init = (rawOptions) => {
   const options = {
     enabled: true,
@@ -821,209 +1005,112 @@ var init = (rawOptions) => {
     return;
   }
   return createRoot((dispose) => {
+    const OFFSCREEN_POSITION = -1e3;
     const [isHoldingKeys, setIsHoldingKeys] = createSignal(false);
-    const [mouseX, setMouseX] = createSignal(-1e3);
-    const [mouseY, setMouseY] = createSignal(-1e3);
+    const [mouseX, setMouseX] = createSignal(OFFSCREEN_POSITION);
+    const [mouseY, setMouseY] = createSignal(OFFSCREEN_POSITION);
     const [isDragging, setIsDragging] = createSignal(false);
-    const [dragStartX, setDragStartX] = createSignal(-1e3);
-    const [dragStartY, setDragStartY] = createSignal(-1e3);
+    const [dragStartX, setDragStartX] = createSignal(OFFSCREEN_POSITION);
+    const [dragStartY, setDragStartY] = createSignal(OFFSCREEN_POSITION);
     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 [grabbedBoxes, setGrabbedBoxes] = createSignal([]);
     const [successLabels, setSuccessLabels] = createSignal([]);
     const [isActivated, setIsActivated] = createSignal(false);
     const [showProgressIndicator, setShowProgressIndicator] = createSignal(false);
+    const [grabMouseX, setGrabMouseX] = createSignal(null);
+    const [grabMouseY, setGrabMouseY] = createSignal(null);
     let holdTimerId = null;
     let progressAnimationId = null;
     let progressDelayTimerId = null;
-    const isOverlayActive = createMemo(() => isActivated() && !isCopying());
+    const isRendererActive = createMemo(() => isActivated() && !isCopying());
+    const hasValidMousePosition = createMemo(() => mouseX() > OFFSCREEN_POSITION && mouseY() > OFFSCREEN_POSITION);
     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;
-    };
-    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);
-        }
-      }
-      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;
-        }
-        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 wrapInReferencedElements = (content) => `
-
-<referenced_elements>
-${content}
-</referenced_elements>`;
-    const addGrabbedOverlay = (bounds) => {
-      const id = `grabbed-${Date.now()}-${Math.random()}`;
-      setGrabbedOverlays((prev) => [...prev, {
-        id,
+    const addGrabbedBox = (bounds) => {
+      const boxId = `grabbed-${Date.now()}-${Math.random()}`;
+      const newBox = {
+        id: boxId,
         bounds
-      }]);
-      setTimeout(() => {
-        setGrabbedOverlays((prev) => prev.filter((overlay) => overlay.id !== id));
-      }, 300);
+      };
+      const currentBoxes = grabbedBoxes();
+      setGrabbedBoxes([...currentBoxes, newBox]);
     };
-    const addSuccessLabel = (text, x, y) => {
-      const id = `success-${Date.now()}-${Math.random()}`;
-      setSuccessLabels((prev) => [...prev, {
-        id,
+    const addSuccessLabel = (text, positionX, positionY) => {
+      const labelId = `success-${Date.now()}-${Math.random()}`;
+      setSuccessLabels((previousLabels) => [...previousLabels, {
+        id: labelId,
         text,
-        x,
-        y
+        x: positionX,
+        y: positionY
       }]);
       setTimeout(() => {
-        setSuccessLabels((prev) => prev.filter((label) => label.id !== id));
-      }, 1700);
+        setSuccessLabels((previousLabels) => previousLabels.filter((label) => label.id !== labelId));
+      }, SUCCESS_LABEL_DURATION_MS);
+    };
+    const formatStackTrace = (stackTrace) => {
+      return stackTrace.map((source) => {
+        const functionName = source.functionName ?? "anonymous";
+        const fileName = source.fileName ?? "unknown";
+        const lineNumber = source.lineNumber ?? 0;
+        const columnNumber = source.columnNumber ?? 0;
+        return ` ${functionName} - ${fileName}:${lineNumber}:${columnNumber}`;
+      }).join("\n");
+    };
+    const getElementContentWithTrace = async (element) => {
+      const elementHtml = getHTMLSnippet(element);
+      const componentStackTrace = await getSourceTrace(element);
+      if (componentStackTrace?.length) {
+        const formattedStackTrace = formatStackTrace(componentStackTrace);
+        return `${elementHtml}
+
+Component owner stack:
+${formattedStackTrace}`;
+      }
+      return elementHtml;
     };
+    const getElementTagName = (element) => (element.tagName || "").toLowerCase();
     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
-      });
+      const tagName = getElementTagName(targetElement2);
+      setGrabMouseX(mouseX());
+      setGrabMouseY(mouseY());
+      addGrabbedBox(createElementBounds(targetElement2));
       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}`));
-        }
+        const content = await getElementContentWithTrace(targetElement2);
+        await copyContent(content);
       } catch {
       }
       addSuccessLabel(tagName ? `<${tagName}>` : "<element>", elementBounds.left, elementBounds.top);
     };
     const handleMultipleCopy = async (targetElements) => {
       if (targetElements.length === 0) return;
-      let minX = Infinity;
-      let minY = Infinity;
+      let minPositionX = Infinity;
+      let minPositionY = Infinity;
+      setGrabMouseX(mouseX());
+      setGrabMouseY(mouseY());
       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
-        });
+        minPositionX = Math.min(minPositionX, elementBounds.left);
+        minPositionY = Math.min(minPositionY, elementBounds.top);
+        addGrabbedBox(createElementBounds(element));
       }
       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 elementSnippets = await Promise.all(targetElements.map((element) => getElementContentWithTrace(element)));
         const combinedContent = elementSnippets.join("\n\n---\n\n");
-        await copyContent(wrapInReferencedElements(combinedContent));
+        await copyContent(combinedContent);
       } catch {
       }
-      addSuccessLabel(`${targetElements.length} elements`, minX, minY);
+      addSuccessLabel(`${targetElements.length} elements`, minPositionX, minPositionY);
     };
     const targetElement = createMemo(() => {
-      if (!isOverlayActive() || isDragging()) return null;
+      if (!isRendererActive() || 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 {
@@ -1035,59 +1122,80 @@ ${formattedStackTrace}`);
         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());
+    const DRAG_THRESHOLD_PX = 5;
+    const getDragDistance = (endX, endY) => ({
+      x: Math.abs(endX - dragStartX()),
+      y: Math.abs(endY - dragStartY())
+    });
+    const isDraggingBeyondThreshold = createMemo(() => {
+      if (!isDragging()) return false;
+      const dragDistance = getDragDistance(mouseX(), mouseY());
+      return dragDistance.x > DRAG_THRESHOLD_PX || dragDistance.y > DRAG_THRESHOLD_PX;
+    });
+    const getDragRect = (endX, endY) => {
+      const dragX = Math.min(dragStartX(), endX);
+      const dragY = Math.min(dragStartY(), endY);
+      const dragWidth = Math.abs(endX - dragStartX());
+      const dragHeight = Math.abs(endY - dragStartY());
+      return {
+        x: dragX,
+        y: dragY,
+        width: dragWidth,
+        height: dragHeight
+      };
+    };
+    const dragBounds = createMemo(() => {
+      if (!isDraggingBeyondThreshold()) return void 0;
+      const drag = getDragRect(mouseX(), mouseY());
       return {
         borderRadius: "0px",
-        height: marqueeHeight,
+        height: drag.height,
         transform: "none",
-        width: marqueeWidth,
-        x: marqueeX,
-        y: marqueeY
+        width: drag.width,
+        x: drag.x,
+        y: drag.y
       };
     });
     const labelText = createMemo(() => {
       const element = targetElement();
       if (!element) return "";
-      const tagName = (element.tagName || "").toLowerCase();
+      const tagName = getElementTagName(element);
       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()
       };
     });
     const isSameAsLast = createMemo(() => {
-      const current = targetElement();
-      const last = lastGrabbedElement();
-      return !!current && current === last;
+      const currentElement = targetElement();
+      const lastElement = lastGrabbedElement();
+      return !!currentElement && currentElement === lastElement;
     });
-    createEffect(() => {
-      const current = targetElement();
-      const last = lastGrabbedElement();
-      if (last && current && last !== current) {
+    createEffect(on(() => [targetElement(), lastGrabbedElement()], ([currentElement, lastElement]) => {
+      if (lastElement && currentElement && lastElement !== currentElement) {
         setLastGrabbedElement(null);
       }
-    });
+    }));
+    createEffect(on(() => [mouseX(), mouseY(), grabMouseX(), grabMouseY()], ([currentMouseX, currentMouseY, initialGrabMouseX, initialGrabMouseY]) => {
+      if (initialGrabMouseX === null || initialGrabMouseY === null) return;
+      if (grabbedBoxes().length === 0) return;
+      const MOUSE_MOVE_THRESHOLD_PX = 5;
+      const distanceX = Math.abs(currentMouseX - initialGrabMouseX);
+      const distanceY = Math.abs(currentMouseY - initialGrabMouseY);
+      if (distanceX > MOUSE_MOVE_THRESHOLD_PX || distanceY > MOUSE_MOVE_THRESHOLD_PX) {
+        setGrabbedBoxes([]);
+        setGrabMouseX(null);
+        setGrabMouseY(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 elapsedTime = Date.now() - startTime;
+      return Math.min(elapsedTime / options.keyHoldDuration, 1);
     });
     const startProgressAnimation = () => {
       setProgressStartTime(Date.now());
@@ -1095,10 +1203,10 @@ ${formattedStackTrace}`);
       progressDelayTimerId = window.setTimeout(() => {
         setShowProgressIndicator(true);
         progressDelayTimerId = null;
-      }, 150);
+      }, PROGRESS_INDICATOR_DELAY_MS);
       const animateProgress = () => {
         if (progressStartTime() === null) return;
-        setProgressTick((t) => t + 1);
+        setProgressTick((tick) => tick + 1);
         const currentProgress = progress();
         if (currentProgress < 1) {
           progressAnimationId = requestAnimationFrame(animateProgress);
@@ -1118,16 +1226,22 @@ ${formattedStackTrace}`);
       setProgressStartTime(null);
       setShowProgressIndicator(false);
     };
-    const activateOverlay = () => {
+    const activateRenderer = () => {
       stopProgressAnimation();
       setIsActivated(true);
+      document.body.style.cursor = "crosshair";
     };
     const abortController = new AbortController();
-    const signal = abortController.signal;
+    const eventListenerSignal = abortController.signal;
     window.addEventListener("keydown", (event) => {
       if (event.key === "Escape" && isHoldingKeys()) {
         setIsHoldingKeys(false);
         setIsActivated(false);
+        document.body.style.cursor = "";
+        if (isDragging()) {
+          setIsDragging(false);
+          document.body.style.userSelect = "";
+        }
         if (holdTimerId) window.clearTimeout(holdTimerId);
         stopProgressAnimation();
         return;
@@ -1137,67 +1251,56 @@ ${formattedStackTrace}`);
         setIsHoldingKeys(true);
         startProgressAnimation();
         holdTimerId = window.setTimeout(() => {
-          activateOverlay();
+          activateRenderer();
           options.onActivate?.();
         }, options.keyHoldDuration);
       }
     }, {
-      signal
+      signal: eventListenerSignal
     });
     window.addEventListener("keyup", (event) => {
       if (isHoldingKeys() && (!isTargetKeyCombination(event) || event.key.toLowerCase() === "c")) {
         setIsHoldingKeys(false);
         setIsActivated(false);
+        document.body.style.cursor = "";
         if (holdTimerId) window.clearTimeout(holdTimerId);
         stopProgressAnimation();
       }
     }, {
-      signal
+      signal: eventListenerSignal
     });
     window.addEventListener("mousemove", (event) => {
       setMouseX(event.clientX);
       setMouseY(event.clientY);
     }, {
-      signal
+      signal: eventListenerSignal
     });
     window.addEventListener("mousedown", (event) => {
-      if (!isOverlayActive() || isCopying()) return;
+      if (!isRendererActive() || isCopying()) return;
+      event.preventDefault();
       setIsDragging(true);
       setDragStartX(event.clientX);
       setDragStartY(event.clientY);
+      document.body.style.userSelect = "none";
     }, {
-      signal
+      signal: eventListenerSignal
     });
     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;
+      const dragDistance = getDragDistance(event.clientX, event.clientY);
+      const wasDragGesture = dragDistance.x > DRAG_THRESHOLD_PX || dragDistance.y > DRAG_THRESHOLD_PX;
       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
-        });
+      document.body.style.userSelect = "";
+      if (wasDragGesture) {
+        const dragRect = getDragRect(event.clientX, event.clientY);
+        const elements = getElementsInDrag(dragRect, isValidGrabbableElement);
         if (elements.length > 0) {
           setIsCopying(true);
           void handleMultipleCopy(elements).finally(() => {
             setIsCopying(false);
           });
         } else {
-          const fallbackElements = getElementsInMarqueeLoose({
-            x: marqueeX,
-            y: marqueeY,
-            width: marqueeWidth,
-            height: marqueeHeight
-          });
+          const fallbackElements = getElementsInDragLoose(dragRect, isValidGrabbableElement);
           if (fallbackElements.length > 0) {
             setIsCopying(true);
             void handleMultipleCopy(fallbackElements).finally(() => {
@@ -1215,51 +1318,84 @@ ${formattedStackTrace}`);
         });
       }
     }, {
-      signal
-    });
-    window.addEventListener("scroll", () => {
-    }, {
-      signal,
-      capture: true
-    });
-    window.addEventListener("resize", () => {
-    }, {
-      signal
+      signal: eventListenerSignal
     });
     document.addEventListener("visibilitychange", () => {
       if (document.hidden) {
-        setGrabbedOverlays([]);
+        setGrabbedBoxes([]);
       }
     }, {
-      signal
+      signal: eventListenerSignal
     });
     onCleanup(() => {
       abortController.abort();
       if (holdTimerId) window.clearTimeout(holdTimerId);
       stopProgressAnimation();
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
     });
-    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);
+    const rendererRoot = mountRoot();
+    const selectionVisible = createMemo(() => false);
+    const dragVisible = createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
+    const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
+    const labelVisible = createMemo(() => isRendererActive() && !isDragging() && !!targetElement() && !isSameAsLast() || isCopying());
+    const progressVisible = createMemo(() => isHoldingKeys() && showProgressIndicator() && hasValidMousePosition());
+    const crosshairVisible = createMemo(() => isRendererActive() && !isDragging());
+    render(() => createComponent(ReactGrabRenderer, {
+      get selectionVisible() {
+        return selectionVisible();
+      },
+      get selectionBounds() {
+        return selectionBounds();
+      },
+      get dragVisible() {
+        return dragVisible();
+      },
+      get dragBounds() {
+        return dragBounds();
+      },
+      get grabbedBoxes() {
+        return grabbedBoxes();
+      },
+      get successLabels() {
+        return successLabels();
+      },
+      get labelVariant() {
+        return labelVariant();
+      },
+      get labelText() {
+        return labelText();
+      },
+      get labelX() {
+        return labelPosition().x;
+      },
+      get labelY() {
+        return labelPosition().y;
+      },
+      get labelVisible() {
+        return labelVisible();
+      },
+      get progressVisible() {
+        return progressVisible();
+      },
+      get progress() {
+        return progress();
+      },
+      get mouseX() {
+        return mouseX();
+      },
+      get mouseY() {
+        return mouseY();
+      },
+      get crosshairVisible() {
+        return crosshairVisible();
+      }
+    }), rendererRoot);
     return dispose;
   });
 };
 
 // src/index.ts
 init();
+
+export { init };