react-grab 0.0.25 → 0.0.26

package/dist/index.cjs

@@ -112,11 +112,12 @@ var SelectionBox = (props) => {
   const [opacity, setOpacity] = solidJs.createSignal(1);
   let hasBeenRenderedOnce = false;
   let animationFrameId = null;
+  let fadeTimerId = null;
   let targetBounds = props.bounds;
   let isAnimating = false;
   const lerpFactor = () => {
     if (props.lerpFactor !== void 0) return props.lerpFactor;
-    if (props.variant === "drag") return 0.9;
+    if (props.variant === "drag") return 0.7;
     return SELECTION_LERP_FACTOR;
   };
   const startAnimation = () => {
@@ -153,11 +154,22 @@ var SelectionBox = (props) => {
     }
     startAnimation();
   }));
+  solidJs.createEffect(() => {
+    if (props.variant === "grabbed" && props.createdAt) {
+      fadeTimerId = window.setTimeout(() => {
+        setOpacity(0);
+      }, 1500);
+    }
+  });
   solidJs.onCleanup(() => {
     if (animationFrameId !== null) {
       cancelAnimationFrame(animationFrameId);
       animationFrameId = null;
     }
+    if (fadeTimerId !== null) {
+      window.clearTimeout(fadeTimerId);
+      fadeTimerId = null;
+    }
     isAnimating = false;
   });
   const baseStyle = {
@@ -169,8 +181,8 @@ var SelectionBox = (props) => {
   const variantStyle = () => {
     if (props.variant === "drag") {
       return {
-        border: "1px dashed rgb(210, 57, 192)",
-        "background-color": "rgba(210, 57, 192, 0.15)",
+        border: "1px dashed rgba(210, 57, 192, 0.4)",
+        "background-color": "rgba(210, 57, 192, 0.05)",
         "will-change": "transform, width, height",
         contain: "layout paint size",
         cursor: "crosshair"
@@ -245,11 +257,47 @@ var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elemen
 
 // src/components/label.tsx
 var _tmpl$3 = /* @__PURE__ */ web.template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
-var _tmpl$22 = /* @__PURE__ */ web.template(`<div style=margin-right:4px>Grabbed`);
-var _tmpl$32 = /* @__PURE__ */ web.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 _tmpl$22 = /* @__PURE__ */ web.template(`<div style=margin-right:4px>Copied`);
+var _tmpl$32 = /* @__PURE__ */ web.template(`<div style=margin-left:4px>to clipboard`);
+var _tmpl$4 = /* @__PURE__ */ web.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">`);
+var _tmpl$5 = /* @__PURE__ */ web.template(`<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] = solidJs.createSignal(0);
+  const [positionTick, setPositionTick] = solidJs.createSignal(0);
   let labelRef;
+  let currentX = props.x;
+  let currentY = props.y;
+  let targetX = props.x;
+  let targetY = props.y;
+  let animationFrameId = null;
+  let hasBeenRenderedOnce = false;
+  const animate = () => {
+    currentX = lerp(currentX, targetX, 0.3);
+    currentY = lerp(currentY, targetY, 0.3);
+    setPositionTick((tick) => tick + 1);
+    const hasConvergedToTarget = Math.abs(currentX - targetX) < 0.5 && Math.abs(currentY - targetY) < 0.5;
+    if (!hasConvergedToTarget) {
+      animationFrameId = requestAnimationFrame(animate);
+    } else {
+      animationFrameId = null;
+    }
+  };
+  const startAnimation = () => {
+    if (animationFrameId !== null) return;
+    animationFrameId = requestAnimationFrame(animate);
+  };
+  const updateTarget = () => {
+    targetX = props.x;
+    targetY = props.y;
+    if (!hasBeenRenderedOnce) {
+      currentX = targetX;
+      currentY = targetY;
+      hasBeenRenderedOnce = true;
+      setPositionTick((tick) => tick + 1);
+      return;
+    }
+    startAnimation();
+  };
   solidJs.createEffect(solidJs.on(() => props.visible, (visible) => {
     if (visible !== false) {
       requestAnimationFrame(() => {
@@ -266,16 +314,26 @@ var Label = (props) => {
       solidJs.onCleanup(() => clearTimeout(fadeOutTimer));
     }
   }));
+  solidJs.createEffect(() => {
+    updateTarget();
+  });
+  solidJs.onCleanup(() => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+  });
   const labelBoundingRect = () => labelRef?.getBoundingClientRect();
   const computedPosition = () => {
+    positionTick();
     const boundingRect = labelBoundingRect();
     if (!boundingRect) return {
-      left: props.x,
-      top: props.y
+      left: currentX,
+      top: currentY
     };
     if (props.variant === "success") {
-      const indicatorLeft = Math.round(props.x);
-      const indicatorTop = Math.round(props.y) - boundingRect.height - 6;
+      const indicatorLeft = Math.round(currentX);
+      const indicatorTop = Math.round(currentY) - boundingRect.height - 6;
       const willClampLeft = indicatorLeft < VIEWPORT_MARGIN_PX;
       const willClampTop = indicatorTop < VIEWPORT_MARGIN_PX;
       const isClamped = willClampLeft || willClampTop;
@@ -290,17 +348,17 @@ var Label = (props) => {
     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(currentX) + CROSSHAIR_OFFSET,
+      top: Math.round(currentY) + CROSSHAIR_OFFSET
     }, {
-      left: Math.round(props.x) - boundingRect.width - CROSSHAIR_OFFSET,
-      top: Math.round(props.y) + CROSSHAIR_OFFSET
+      left: Math.round(currentX) - boundingRect.width - CROSSHAIR_OFFSET,
+      top: Math.round(currentY) + CROSSHAIR_OFFSET
     }, {
-      left: Math.round(props.x) + CROSSHAIR_OFFSET,
-      top: Math.round(props.y) - boundingRect.height - CROSSHAIR_OFFSET
+      left: Math.round(currentX) + CROSSHAIR_OFFSET,
+      top: Math.round(currentY) - boundingRect.height - CROSSHAIR_OFFSET
     }, {
-      left: Math.round(props.x) - boundingRect.width - CROSSHAIR_OFFSET,
-      top: Math.round(props.y) - boundingRect.height - CROSSHAIR_OFFSET
+      left: Math.round(currentX) - boundingRect.width - CROSSHAIR_OFFSET,
+      top: Math.round(currentY) - boundingRect.height - CROSSHAIR_OFFSET
     }];
     for (const position of quadrants) {
       const fitsHorizontally = position.left >= VIEWPORT_MARGIN_PX && position.left + boundingRect.width <= viewportWidth - VIEWPORT_MARGIN_PX;
@@ -319,7 +377,7 @@ var Label = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$32(), _el$4 = _el$.firstChild;
+      var _el$ = _tmpl$4();
       var _ref$ = labelRef;
       typeof _ref$ === "function" ? web.use(_ref$, _el$) : labelRef = _el$;
       web.insert(_el$, web.createComponent(solidJs.Show, {
@@ -329,7 +387,7 @@ var Label = (props) => {
         get children() {
           return web.createComponent(Spinner, {});
         }
-      }), _el$4);
+      }), null);
       web.insert(_el$, web.createComponent(solidJs.Show, {
         get when() {
           return props.variant === "success";
@@ -337,7 +395,7 @@ var Label = (props) => {
         get children() {
           return _tmpl$3();
         }
-      }), _el$4);
+      }), null);
       web.insert(_el$, web.createComponent(solidJs.Show, {
         get when() {
           return props.variant === "success";
@@ -345,14 +403,36 @@ var Label = (props) => {
         get children() {
           return _tmpl$22();
         }
-      }), _el$4);
+      }), null);
       web.insert(_el$, web.createComponent(solidJs.Show, {
         get when() {
           return props.variant === "processing";
         },
         children: "Grabbing\u2026"
-      }), _el$4);
-      web.insert(_el$4, () => props.text);
+      }), null);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return props.text.startsWith("(");
+        },
+        get fallback() {
+          return (() => {
+            var _el$5 = _tmpl$5();
+            web.insert(_el$5, () => props.text);
+            return _el$5;
+          })();
+        },
+        get children() {
+          return props.text;
+        }
+      }), null);
+      web.insert(_el$, web.createComponent(solidJs.Show, {
+        get when() {
+          return props.variant === "success";
+        },
+        get children() {
+          return _tmpl$32();
+        }
+      }), null);
       web.effect((_p$) => {
         var _v$ = `${computedPosition().top}px`, _v$2 = `${computedPosition().left}px`, _v$3 = props.zIndex?.toString() ?? "2147483647", _v$4 = opacity();
         _v$ !== _p$.e && web.setStyleProperty(_el$, "top", _p$.e = _v$);
@@ -370,7 +450,7 @@ var Label = (props) => {
     }
   });
 };
-var _tmpl$4 = /* @__PURE__ */ web.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 _tmpl$6 = /* @__PURE__ */ web.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] = solidJs.createSignal(0);
   solidJs.createEffect(solidJs.on(() => visible, (isVisible) => {
@@ -403,7 +483,7 @@ var ProgressIndicator = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+      var _el$ = _tmpl$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
       var _ref$ = progressIndicatorRef;
       typeof _ref$ === "function" ? web.use(_ref$, _el$) : progressIndicatorRef = _el$;
       web.effect((_p$) => {
@@ -423,66 +503,99 @@ var ProgressIndicator = (props) => {
     }
   });
 };
-var _tmpl$5 = /* @__PURE__ */ web.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 _tmpl$7 = /* @__PURE__ */ web.template(`<canvas style=position:fixed;top:0;left:0;pointer-events:none;z-index:2147483645>`);
 var Crosshair = (props) => {
-  const [currentX, setCurrentX] = solidJs.createSignal(props.mouseX);
-  const [currentY, setCurrentY] = solidJs.createSignal(props.mouseY);
-  let hasBeenRenderedOnce = false;
-  let animationFrameId = null;
+  let canvasRef;
+  let context = null;
+  let width = 0;
+  let height = 0;
+  let dpr = 1;
+  let currentX = props.mouseX;
+  let currentY = props.mouseY;
   let targetX = props.mouseX;
   let targetY = props.mouseY;
-  let isAnimating = false;
+  let animationFrameId = null;
+  let hasBeenRenderedOnce = false;
+  const setupCanvas = () => {
+    if (!canvasRef) return;
+    dpr = Math.max(window.devicePixelRatio || 1, 2);
+    width = window.innerWidth;
+    height = window.innerHeight;
+    canvasRef.width = width * dpr;
+    canvasRef.height = height * dpr;
+    canvasRef.style.width = `${width}px`;
+    canvasRef.style.height = `${height}px`;
+    context = canvasRef.getContext("2d");
+    if (context) {
+      context.scale(dpr, dpr);
+    }
+  };
+  const render2 = () => {
+    if (!context) return;
+    context.clearRect(0, 0, width, height);
+    context.strokeStyle = "rgba(210, 57, 192)";
+    context.lineWidth = 1;
+    context.beginPath();
+    context.moveTo(currentX, 0);
+    context.lineTo(currentX, height);
+    context.moveTo(0, currentY);
+    context.lineTo(width, currentY);
+    context.stroke();
+  };
+  const animate = () => {
+    currentX = lerp(currentX, targetX, 0.3);
+    currentY = lerp(currentY, targetY, 0.3);
+    render2();
+    const hasConvergedToTarget = Math.abs(currentX - targetX) < 0.5 && Math.abs(currentY - targetY) < 0.5;
+    if (!hasConvergedToTarget) {
+      animationFrameId = requestAnimationFrame(animate);
+    } else {
+      animationFrameId = null;
+    }
+  };
   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;
-      }
-    };
+    if (animationFrameId !== null) return;
     animationFrameId = requestAnimationFrame(animate);
   };
-  solidJs.createEffect(solidJs.on(() => [props.mouseX, props.mouseY], ([newMouseX, newMouseY]) => {
-    targetX = newMouseX;
-    targetY = newMouseY;
+  const updateTarget = () => {
+    targetX = props.mouseX;
+    targetY = props.mouseY;
     if (!hasBeenRenderedOnce) {
-      setCurrentX(targetX);
-      setCurrentY(targetY);
+      currentX = targetX;
+      currentY = targetY;
       hasBeenRenderedOnce = true;
+      render2();
       return;
     }
     startAnimation();
-  }));
-  solidJs.onCleanup(() => {
-    if (animationFrameId !== null) {
-      cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-    isAnimating = false;
+  };
+  solidJs.createEffect(() => {
+    setupCanvas();
+    render2();
+    const handleResize = () => {
+      setupCanvas();
+      render2();
+    };
+    window.addEventListener("resize", handleResize);
+    solidJs.onCleanup(() => {
+      window.removeEventListener("resize", handleResize);
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+        animationFrameId = null;
+      }
+    });
+  });
+  solidJs.createEffect(() => {
+    updateTarget();
   });
   return web.createComponent(solidJs.Show, {
     get when() {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-      web.effect((_p$) => {
-        var _v$ = `${currentX()}px`, _v$2 = `${currentY()}px`;
-        _v$ !== _p$.e && web.setStyleProperty(_el$2, "left", _p$.e = _v$);
-        _v$2 !== _p$.t && web.setStyleProperty(_el$3, "top", _p$.t = _v$2);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
+      var _el$ = _tmpl$7();
+      var _ref$ = canvasRef;
+      typeof _ref$ === "function" ? web.use(_ref$, _el$) : canvasRef = _el$;
       return _el$;
     }
   });
@@ -543,6 +656,9 @@ var ReactGrabRenderer = (props) => {
       variant: "grabbed",
       get bounds() {
         return box.bounds;
+      },
+      get createdAt() {
+        return box.createdAt;
       }
     })
   }), web.createComponent(solidJs.For, {
@@ -973,11 +1089,65 @@ var filterElementsInDrag = (dragRect, isValidGrabbableElement2, shouldCheckCover
   }
   return elements;
 };
+var removeNestedElements = (elements) => {
+  return elements.filter((element) => {
+    return !elements.some(
+      (otherElement) => otherElement !== element && otherElement.contains(element)
+    );
+  });
+};
+var findBestParentElement = (elements, dragRect, isValidGrabbableElement2) => {
+  if (elements.length <= 1) return null;
+  const dragLeft = dragRect.x;
+  const dragTop = dragRect.y;
+  const dragRight = dragRect.x + dragRect.width;
+  const dragBottom = dragRect.y + dragRect.height;
+  let currentParent = elements[0];
+  while (currentParent) {
+    const parent = currentParent.parentElement;
+    if (!parent) break;
+    const parentRect = parent.getBoundingClientRect();
+    const intersectionLeft = Math.max(dragLeft, parentRect.left);
+    const intersectionTop = Math.max(dragTop, parentRect.top);
+    const intersectionRight = Math.min(dragRight, parentRect.left + parentRect.width);
+    const intersectionBottom = Math.min(dragBottom, parentRect.top + parentRect.height);
+    const intersectionWidth = Math.max(0, intersectionRight - intersectionLeft);
+    const intersectionHeight = Math.max(0, intersectionBottom - intersectionTop);
+    const intersectionArea = intersectionWidth * intersectionHeight;
+    const parentArea = Math.max(0, parentRect.width * parentRect.height);
+    const hasMajorityCoverage = parentArea > 0 && intersectionArea / parentArea >= DRAG_COVERAGE_THRESHOLD;
+    if (!hasMajorityCoverage) break;
+    if (!isValidGrabbableElement2(parent)) {
+      currentParent = parent;
+      continue;
+    }
+    const allChildrenInParent = elements.every(
+      (element) => parent.contains(element)
+    );
+    if (allChildrenInParent) {
+      return parent;
+    }
+    currentParent = parent;
+  }
+  return null;
+};
 var getElementsInDrag = (dragRect, isValidGrabbableElement2) => {
-  return filterElementsInDrag(dragRect, isValidGrabbableElement2, true);
+  const elements = filterElementsInDrag(dragRect, isValidGrabbableElement2, true);
+  const uniqueElements = removeNestedElements(elements);
+  const bestParent = findBestParentElement(uniqueElements, dragRect, isValidGrabbableElement2);
+  if (bestParent) {
+    return [bestParent];
+  }
+  return uniqueElements;
 };
 var getElementsInDragLoose = (dragRect, isValidGrabbableElement2) => {
-  return filterElementsInDrag(dragRect, isValidGrabbableElement2, false);
+  const elements = filterElementsInDrag(dragRect, isValidGrabbableElement2, false);
+  const uniqueElements = removeNestedElements(elements);
+  const bestParent = findBestParentElement(uniqueElements, dragRect, isValidGrabbableElement2);
+  if (bestParent) {
+    return [bestParent];
+  }
+  return uniqueElements;
 };
 
 // src/utils/create-element-bounds.ts
@@ -1022,22 +1192,26 @@ var init = (rawOptions) => {
     const [successLabels, setSuccessLabels] = solidJs.createSignal([]);
     const [isActivated, setIsActivated] = solidJs.createSignal(false);
     const [showProgressIndicator, setShowProgressIndicator] = solidJs.createSignal(false);
-    const [grabMouseX, setGrabMouseX] = solidJs.createSignal(null);
-    const [grabMouseY, setGrabMouseY] = solidJs.createSignal(null);
     let holdTimerId = null;
     let progressAnimationId = null;
     let progressDelayTimerId = null;
+    let keydownSpamTimerId = null;
     const isRendererActive = solidJs.createMemo(() => isActivated() && !isCopying());
     const hasValidMousePosition = solidJs.createMemo(() => mouseX() > OFFSCREEN_POSITION && mouseY() > OFFSCREEN_POSITION);
     const isTargetKeyCombination = (event) => (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "c";
     const addGrabbedBox = (bounds) => {
       const boxId = `grabbed-${Date.now()}-${Math.random()}`;
+      const createdAt = Date.now();
       const newBox = {
         id: boxId,
-        bounds
+        bounds,
+        createdAt
       };
       const currentBoxes = grabbedBoxes();
       setGrabbedBoxes([...currentBoxes, newBox]);
+      setTimeout(() => {
+        setGrabbedBoxes((previousBoxes) => previousBoxes.filter((box) => box.id !== boxId));
+      }, SUCCESS_LABEL_DURATION_MS);
     };
     const addSuccessLabel = (text, positionX, positionY) => {
       const labelId = `success-${Date.now()}-${Math.random()}`;
@@ -1060,6 +1234,9 @@ var init = (rawOptions) => {
         return ` ${functionName} - ${fileName}:${lineNumber}:${columnNumber}`;
       }).join("\n");
     };
+    const wrapContextInXmlTags = (context) => {
+      return `<selected_element>${context}</selected_element>`;
+    };
     const getElementContentWithTrace = async (element) => {
       const elementHtml = getHTMLSnippet(element);
       const componentStackTrace = await getSourceTrace(element);
@@ -1076,12 +1253,10 @@ ${formattedStackTrace}`;
     const handleCopy = async (targetElement2) => {
       const elementBounds = targetElement2.getBoundingClientRect();
       const tagName = getElementTagName(targetElement2);
-      setGrabMouseX(mouseX());
-      setGrabMouseY(mouseY());
       addGrabbedBox(createElementBounds(targetElement2));
       try {
         const content = await getElementContentWithTrace(targetElement2);
-        await copyContent(content);
+        await copyContent(wrapContextInXmlTags(content));
       } catch {
       }
       addSuccessLabel(tagName ? `<${tagName}>` : "<element>", elementBounds.left, elementBounds.top);
@@ -1090,8 +1265,6 @@ ${formattedStackTrace}`;
       if (targetElements.length === 0) return;
       let minPositionX = Infinity;
       let minPositionY = Infinity;
-      setGrabMouseX(mouseX());
-      setGrabMouseY(mouseY());
       for (const element of targetElements) {
         const elementBounds = element.getBoundingClientRect();
         minPositionX = Math.min(minPositionX, elementBounds.left);
@@ -1101,7 +1274,7 @@ ${formattedStackTrace}`;
       try {
         const elementSnippets = await Promise.all(targetElements.map((element) => getElementContentWithTrace(element)));
         const combinedContent = elementSnippets.join("\n\n---\n\n");
-        await copyContent(combinedContent);
+        await copyContent(wrapContextInXmlTags(combinedContent));
       } catch {
       }
       addSuccessLabel(`${targetElements.length} elements`, minPositionX, minPositionY);
@@ -1124,7 +1297,7 @@ ${formattedStackTrace}`;
         y: elementBounds.top
       };
     });
-    const DRAG_THRESHOLD_PX = 5;
+    const DRAG_THRESHOLD_PX = 2;
     const getDragDistance = (endX, endY) => ({
       x: Math.abs(endX - dragStartX()),
       y: Math.abs(endY - dragStartY())
@@ -1160,7 +1333,7 @@ ${formattedStackTrace}`;
     });
     const labelText = solidJs.createMemo(() => {
       const element = targetElement();
-      if (!element) return "";
+      if (!element) return "(click or drag to select element(s))";
       const tagName = getElementTagName(element);
       return tagName ? `<${tagName}>` : "<element>";
     });
@@ -1180,18 +1353,6 @@ ${formattedStackTrace}`;
         setLastGrabbedElement(null);
       }
     }));
-    solidJs.createEffect(solidJs.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 = solidJs.createMemo(() => {
       const startTime = progressStartTime();
       progressTick();
@@ -1233,43 +1394,55 @@ ${formattedStackTrace}`;
       setIsActivated(true);
       document.body.style.cursor = "crosshair";
     };
+    const deactivateRenderer = () => {
+      setIsHoldingKeys(false);
+      setIsActivated(false);
+      document.body.style.cursor = "";
+      if (isDragging()) {
+        setIsDragging(false);
+        document.body.style.userSelect = "";
+      }
+      if (holdTimerId) window.clearTimeout(holdTimerId);
+      if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
+      stopProgressAnimation();
+    };
     const abortController = new AbortController();
     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();
+        deactivateRenderer();
         return;
       }
       if (isKeyboardEventTriggeredByInput(event)) return;
-      if (isTargetKeyCombination(event) && !isHoldingKeys()) {
-        setIsHoldingKeys(true);
-        startProgressAnimation();
-        holdTimerId = window.setTimeout(() => {
-          activateRenderer();
-          options.onActivate?.();
-        }, options.keyHoldDuration);
+      if (isTargetKeyCombination(event)) {
+        if (!isHoldingKeys()) {
+          setIsHoldingKeys(true);
+          startProgressAnimation();
+          holdTimerId = window.setTimeout(() => {
+            activateRenderer();
+            options.onActivate?.();
+          }, options.keyHoldDuration);
+        }
+        if (isActivated()) {
+          if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
+          keydownSpamTimerId = window.setTimeout(() => {
+            deactivateRenderer();
+          }, 200);
+        }
       }
     }, {
       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();
+      if (!isHoldingKeys() && !isActivated()) return;
+      const isReleasingC = event.key.toLowerCase() === "c";
+      const isReleasingModifier = !event.metaKey && !event.ctrlKey;
+      if (isReleasingC || isReleasingModifier) {
+        deactivateRenderer();
       }
     }, {
-      signal: eventListenerSignal
+      signal: eventListenerSignal,
+      capture: true
     });
     window.addEventListener("mousemove", (event) => {
       setMouseX(event.clientX);
@@ -1332,6 +1505,7 @@ ${formattedStackTrace}`;
     solidJs.onCleanup(() => {
       abortController.abort();
       if (holdTimerId) window.clearTimeout(holdTimerId);
+      if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
       stopProgressAnimation();
       document.body.style.userSelect = "";
       document.body.style.cursor = "";
@@ -1340,7 +1514,7 @@ ${formattedStackTrace}`;
     const selectionVisible = solidJs.createMemo(() => false);
     const dragVisible = solidJs.createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
     const labelVariant = solidJs.createMemo(() => isCopying() ? "processing" : "hover");
-    const labelVisible = solidJs.createMemo(() => isRendererActive() && !isDragging() && !!targetElement() && !isSameAsLast() || isCopying());
+    const labelVisible = solidJs.createMemo(() => isRendererActive() && !isDragging() && (!!targetElement() && !isSameAsLast() || !targetElement()) || isCopying());
     const progressVisible = solidJs.createMemo(() => isHoldingKeys() && showProgressIndicator() && hasValidMousePosition());
     const crosshairVisible = solidJs.createMemo(() => isRendererActive() && !isDragging());
     web.render(() => web.createComponent(ReactGrabRenderer, {

package/dist/index.d.cts

@@ -19,6 +19,7 @@ interface ReactGrabRendererProps {
     grabbedBoxes?: Array<{
         id: string;
         bounds: OverlayBounds;
+        createdAt: number;
     }>;
     successLabels?: Array<{
         id: string;

package/dist/index.d.ts

@@ -19,6 +19,7 @@ interface ReactGrabRendererProps {
     grabbedBoxes?: Array<{
         id: string;
         bounds: OverlayBounds;
+        createdAt: number;
     }>;
     successLabels?: Array<{
         id: string;