react-grab 0.0.28 → 0.0.30

package/dist/index.js

@@ -1,7 +1,9 @@
 import { render, createComponent, memo, template, effect, style, insert, setStyleProperty, 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, normalizeFileName, isSourceFile } from 'bippy/dist/source';
+import { domToPng } from 'modern-screenshot';
+import { instrument, _fiberRoots, getFiberFromHostInstance, traverseFiber, isCompositeFiber, getDisplayName } from 'bippy';
+import { getSourceFromHostInstance, normalizeFileName, isSourceFile } from 'bippy/dist/source';
+import { finder } from '@medv/finder';
 
 /**
  * @license MIT
@@ -94,6 +96,7 @@ var VIEWPORT_MARGIN_PX = 8;
 var INDICATOR_CLAMP_PADDING_PX = 4;
 var CURSOR_OFFSET_PX = 14;
 var SELECTION_LERP_FACTOR = 0.95;
+var SUCCESS_LABEL_DURATION_MS = 1700;
 
 // src/utils/lerp.ts
 var lerp = (start, end, factor) => {
@@ -256,9 +259,9 @@ var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elemen
 // 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>Copied`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
-var _tmpl$4 = /* @__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">`);
-var _tmpl$5 = /* @__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$32 = /* @__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$4 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
+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">`);
 var Label = (props) => {
   const [opacity, setOpacity] = createSignal(0);
   const [positionTick, setPositionTick] = createSignal(0);
@@ -308,7 +311,7 @@ var Label = (props) => {
     if (props.variant === "success") {
       const fadeOutTimer = setTimeout(() => {
         setOpacity(0);
-      }, 1500);
+      }, SUCCESS_LABEL_DURATION_MS);
       onCleanup(() => clearTimeout(fadeOutTimer));
     }
   }));
@@ -329,34 +332,20 @@ var Label = (props) => {
       left: currentX,
       top: currentY
     };
-    if (props.variant === "success") {
-      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;
-      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;
-    }
-    const CROSSHAIR_OFFSET = 12;
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
     const quadrants = [{
-      left: Math.round(currentX) + CROSSHAIR_OFFSET,
-      top: Math.round(currentY) + CROSSHAIR_OFFSET
+      left: Math.round(currentX) + CURSOR_OFFSET_PX,
+      top: Math.round(currentY) + CURSOR_OFFSET_PX
     }, {
-      left: Math.round(currentX) - boundingRect.width - CROSSHAIR_OFFSET,
-      top: Math.round(currentY) + CROSSHAIR_OFFSET
+      left: Math.round(currentX) - boundingRect.width - CURSOR_OFFSET_PX,
+      top: Math.round(currentY) + CURSOR_OFFSET_PX
     }, {
-      left: Math.round(currentX) + CROSSHAIR_OFFSET,
-      top: Math.round(currentY) - boundingRect.height - CROSSHAIR_OFFSET
+      left: Math.round(currentX) + CURSOR_OFFSET_PX,
+      top: Math.round(currentY) - boundingRect.height - CURSOR_OFFSET_PX
     }, {
-      left: Math.round(currentX) - boundingRect.width - CROSSHAIR_OFFSET,
-      top: Math.round(currentY) - boundingRect.height - CROSSHAIR_OFFSET
+      left: Math.round(currentX) - boundingRect.width - CURSOR_OFFSET_PX,
+      top: Math.round(currentY) - boundingRect.height - CURSOR_OFFSET_PX
     }];
     for (const position of quadrants) {
       const fitsHorizontally = position.left >= VIEWPORT_MARGIN_PX && position.left + boundingRect.width <= viewportWidth - VIEWPORT_MARGIN_PX;
@@ -375,7 +364,7 @@ var Label = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$4();
+      var _el$ = _tmpl$5();
       var _ref$ = labelRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : labelRef = _el$;
       insert(_el$, createComponent(Show, {
@@ -410,17 +399,12 @@ var Label = (props) => {
       }), null);
       insert(_el$, createComponent(Show, {
         get when() {
-          return props.text.startsWith("(");
-        },
-        get fallback() {
-          return (() => {
-            var _el$5 = _tmpl$5();
-            insert(_el$5, () => props.text);
-            return _el$5;
-          })();
+          return props.variant !== "processing";
         },
         get children() {
-          return props.text;
+          var _el$4 = _tmpl$32();
+          insert(_el$4, () => props.text);
+          return _el$4;
         }
       }), null);
       insert(_el$, createComponent(Show, {
@@ -428,7 +412,7 @@ var Label = (props) => {
           return props.variant === "success";
         },
         get children() {
-          return _tmpl$32();
+          return _tmpl$4();
         }
       }), null);
       effect((_p$) => {
@@ -728,26 +712,43 @@ instrument({
     _fiberRoots.add(fiberRoot);
   }
 });
-var getSourceTrace = async (element) => {
-  const fiber = getFiberFromHostInstance(element);
-  if (!fiber) return null;
-  const ownerStack = getOwnerStack(fiber);
-  const sources = await getSourcesFromStack(
-    ownerStack,
-    Number.MAX_SAFE_INTEGER
-  );
-  if (!sources) return null;
-  console.log(sources);
-  return sources.map((source) => {
-    return {
-      ...source,
-      fileName: normalizeFileName(source.fileName)
-    };
-  }).filter((source) => {
-    return isSourceFile(source.fileName);
-  });
+var generateCSSSelector = (element) => {
+  return finder(element);
 };
-var getHTMLSnippet = (element) => {
+var getHTMLSnippet = async (element) => {
+  const truncateString = (string, maxLength) => string.length > maxLength ? `${string.substring(0, maxLength)}...` : string;
+  const isInternalComponent = (name) => {
+    if (name.startsWith("_")) return true;
+    if (name.includes("Provider") && name.includes("Context")) return true;
+    return false;
+  };
+  const extractReactComponentName = (el) => {
+    const fiber = getFiberFromHostInstance(el);
+    if (!fiber) return null;
+    let componentName = null;
+    traverseFiber(
+      fiber,
+      (currentFiber) => {
+        if (isCompositeFiber(currentFiber)) {
+          const displayName = getDisplayName(currentFiber);
+          if (displayName && !isInternalComponent(displayName)) {
+            componentName = displayName;
+            return true;
+          }
+        }
+        return false;
+      },
+      true
+    );
+    return componentName;
+  };
+  const formatComponentSourceLocation = async (el) => {
+    const source = await getSourceFromHostInstance(el);
+    if (!source) return null;
+    const fileName = normalizeFileName(source.fileName);
+    if (!isSourceFile(fileName)) return null;
+    return `${fileName}:${source.lineNumber}:${source.columnNumber}`;
+  };
   const semanticTags = /* @__PURE__ */ new Set([
     "article",
     "aside",
@@ -770,7 +771,7 @@ var getHTMLSnippet = (element) => {
       (attr) => attr.name.startsWith("data-")
     );
   };
-  const getAncestorChain = (el, maxDepth = 10) => {
+  const collectDistinguishingAncestors = (el, maxDepth = 10) => {
     const ancestors2 = [];
     let current = el.parentElement;
     let depth = 0;
@@ -784,35 +785,7 @@ var getHTMLSnippet = (element) => {
     }
     return ancestors2.reverse();
   };
-  const getCSSPath = (el) => {
-    const parts = [];
-    let current = el;
-    let depth = 0;
-    const maxDepth = 5;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      let selector = current.tagName.toLowerCase();
-      if (current.id) {
-        selector += `#${current.id}`;
-        parts.unshift(selector);
-        break;
-      } else if (current.className && typeof current.className === "string" && current.className.trim()) {
-        const classes = current.className.trim().split(/\s+/).slice(0, 2);
-        selector += `.${classes.join(".")}`;
-      }
-      if (!current.id && (!current.className || !current.className.trim()) && current.parentElement) {
-        const siblings = Array.from(current.parentElement.children);
-        const index = siblings.indexOf(current);
-        if (index >= 0 && siblings.length > 1) {
-          selector += `:nth-child(${index + 1})`;
-        }
-      }
-      parts.unshift(selector);
-      current = current.parentElement;
-      depth++;
-    }
-    return parts.join(" > ");
-  };
-  const getElementTag = (el, compact = false) => {
+  const formatElementOpeningTag = (el, compact = false) => {
     const tagName = el.tagName.toLowerCase();
     const attrs = [];
     if (el.id) {
@@ -822,10 +795,7 @@ var getHTMLSnippet = (element) => {
       const classes = el.className.trim().split(/\s+/);
       if (classes.length > 0 && classes[0]) {
         const displayClasses = compact ? classes.slice(0, 3) : classes;
-        let classStr = displayClasses.join(" ");
-        if (classStr.length > 30) {
-          classStr = classStr.substring(0, 30) + "...";
-        }
+        const classStr = truncateString(displayClasses.join(" "), 30);
         attrs.push(`class="${classStr}"`);
       }
     }
@@ -834,35 +804,20 @@ var getHTMLSnippet = (element) => {
     );
     const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
     for (const attr of displayDataAttrs) {
-      let value = attr.value;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`${attr.name}="${value}"`);
+      attrs.push(`${attr.name}="${truncateString(attr.value, 20)}"`);
     }
     const ariaLabel = el.getAttribute("aria-label");
     if (ariaLabel && !compact) {
-      let value = ariaLabel;
-      if (value.length > 20) {
-        value = value.substring(0, 20) + "...";
-      }
-      attrs.push(`aria-label="${value}"`);
+      attrs.push(`aria-label="${truncateString(ariaLabel, 20)}"`);
     }
     return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
   };
-  const getClosingTag = (el) => {
-    return `</${el.tagName.toLowerCase()}>`;
+  const formatElementClosingTag = (el) => `</${el.tagName.toLowerCase()}>`;
+  const extractTruncatedTextContent = (el) => {
+    const text = (el.textContent || "").trim().replace(/\s+/g, " ");
+    return truncateString(text, 60);
   };
-  const getTextContent = (el) => {
-    let text = el.textContent || "";
-    text = text.trim().replace(/\s+/g, " ");
-    const maxLength = 60;
-    if (text.length > maxLength) {
-      text = text.substring(0, maxLength) + "...";
-    }
-    return text;
-  };
-  const getSiblingIdentifier = (el) => {
+  const extractSiblingIdentifier = (el) => {
     if (el.id) return `#${el.id}`;
     if (el.className && typeof el.className === "string") {
       const classes = el.className.trim().split(/\s+/);
@@ -873,12 +828,31 @@ var getHTMLSnippet = (element) => {
     return null;
   };
   const lines = [];
-  lines.push(`Path: ${getCSSPath(element)}`);
-  lines.push("");
-  const ancestors = getAncestorChain(element);
+  const selector = generateCSSSelector(element);
+  lines.push(`Locate this element in the codebase:`);
+  lines.push(`- selector: ${selector}`);
+  const rect = element.getBoundingClientRect();
+  lines.push(`- width: ${Math.round(rect.width)}`);
+  lines.push(`- height: ${Math.round(rect.height)}`);
+  lines.push("HTML snippet:");
+  lines.push("```html");
+  const ancestors = collectDistinguishingAncestors(element);
+  const ancestorComponents = ancestors.map(
+    (ancestor) => extractReactComponentName(ancestor)
+  );
+  const elementComponent = extractReactComponentName(element);
+  const ancestorSources = await Promise.all(
+    ancestors.map((ancestor) => formatComponentSourceLocation(ancestor))
+  );
+  const elementSource = await formatComponentSourceLocation(element);
   for (let i = 0; i < ancestors.length; i++) {
     const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getElementTag(ancestors[i], true));
+    const componentName = ancestorComponents[i];
+    const source = ancestorSources[i];
+    if (componentName && source && (i === 0 || ancestorComponents[i - 1] !== componentName)) {
+      lines.push(`${indent2}<${componentName} source="${source}">`);
+    }
+    lines.push(`${indent2}${formatElementOpeningTag(ancestors[i], true)}`);
   }
   const parent = element.parentElement;
   let targetIndex = -1;
@@ -887,10 +861,10 @@ var getHTMLSnippet = (element) => {
     targetIndex = siblings.indexOf(element);
     if (targetIndex > 0) {
       const prevSibling = siblings[targetIndex - 1];
-      const prevId = getSiblingIdentifier(prevSibling);
+      const prevId = extractSiblingIdentifier(prevSibling);
       if (prevId && targetIndex <= 2) {
         const indent2 = "  ".repeat(ancestors.length);
-        lines.push(`${indent2}  ${getElementTag(prevSibling, true)}`);
+        lines.push(`${indent2}  ${formatElementOpeningTag(prevSibling, true)}`);
         lines.push(`${indent2}  </${prevSibling.tagName.toLowerCase()}>`);
       } else if (targetIndex > 0) {
         const indent2 = "  ".repeat(ancestors.length);
@@ -901,35 +875,44 @@ var getHTMLSnippet = (element) => {
     }
   }
   const indent = "  ".repeat(ancestors.length);
-  lines.push(indent + "  <!-- SELECTED -->");
-  const textContent = getTextContent(element);
+  const lastAncestorComponent = ancestors.length > 0 ? ancestorComponents[ancestorComponents.length - 1] : null;
+  const showElementComponent = elementComponent && elementSource && elementComponent !== lastAncestorComponent;
+  if (showElementComponent) {
+    lines.push(`${indent}  <${elementComponent} used-at="${elementSource}">`);
+  }
+  lines.push(`${indent}  <!-- IMPORTANT: selected element -->`);
+  const textContent = extractTruncatedTextContent(element);
   const childrenCount = element.children.length;
+  const elementIndent = `${indent}${showElementComponent ? "    " : "  "}`;
   if (textContent && childrenCount === 0 && textContent.length < 40) {
     lines.push(
-      `${indent}  ${getElementTag(element)}${textContent}${getClosingTag(
+      `${elementIndent}${formatElementOpeningTag(element)}${textContent}${formatElementClosingTag(
         element
       )}`
     );
   } else {
-    lines.push(indent + "  " + getElementTag(element));
+    lines.push(`${elementIndent}${formatElementOpeningTag(element)}`);
     if (textContent) {
-      lines.push(`${indent}    ${textContent}`);
+      lines.push(`${elementIndent}  ${textContent}`);
     }
     if (childrenCount > 0) {
       lines.push(
-        `${indent}    ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
+        `${elementIndent}  ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
       );
     }
-    lines.push(indent + "  " + getClosingTag(element));
+    lines.push(`${elementIndent}${formatElementClosingTag(element)}`);
+  }
+  if (showElementComponent) {
+    lines.push(`${indent}  </${elementComponent}>`);
   }
   if (parent && targetIndex >= 0) {
     const siblings = Array.from(parent.children);
     const siblingsAfter = siblings.length - targetIndex - 1;
     if (siblingsAfter > 0) {
       const nextSibling = siblings[targetIndex + 1];
-      const nextId = getSiblingIdentifier(nextSibling);
+      const nextId = extractSiblingIdentifier(nextSibling);
       if (nextId && siblingsAfter <= 2) {
-        lines.push(`${indent}  ${getElementTag(nextSibling, true)}`);
+        lines.push(`${indent}  ${formatElementOpeningTag(nextSibling, true)}`);
         lines.push(`${indent}  </${nextSibling.tagName.toLowerCase()}>`);
       } else {
         lines.push(
@@ -940,8 +923,14 @@ var getHTMLSnippet = (element) => {
   }
   for (let i = ancestors.length - 1; i >= 0; i--) {
     const indent2 = "  ".repeat(i);
-    lines.push(indent2 + getClosingTag(ancestors[i]));
+    lines.push(`${indent2}${formatElementClosingTag(ancestors[i])}`);
+    const componentName = ancestorComponents[i];
+    const source = ancestorSources[i];
+    if (componentName && source && (i === ancestors.length - 1 || ancestorComponents[i + 1] !== componentName)) {
+      lines.push(`${indent2}</${componentName}>`);
+    }
   }
+  lines.push("```");
   return lines.join("\n");
 };
 
@@ -1171,8 +1160,8 @@ var createElementBounds = (element) => {
 };
 
 // src/core.tsx
-var SUCCESS_LABEL_DURATION_MS = 1700;
 var PROGRESS_INDICATOR_DELAY_MS = 150;
+var QUICK_REPRESS_THRESHOLD_MS = 150;
 var init = (rawOptions) => {
   const options = {
     enabled: true,
@@ -1198,14 +1187,19 @@ var init = (rawOptions) => {
     const [successLabels, setSuccessLabels] = createSignal([]);
     const [isActivated, setIsActivated] = createSignal(false);
     const [showProgressIndicator, setShowProgressIndicator] = createSignal(false);
+    const [didJustDrag, setDidJustDrag] = createSignal(false);
+    const [isModifierHeld, setIsModifierHeld] = createSignal(false);
+    const [copyStartX, setCopyStartX] = createSignal(OFFSCREEN_POSITION);
+    const [copyStartY, setCopyStartY] = createSignal(OFFSCREEN_POSITION);
     let holdTimerId = null;
     let progressAnimationId = null;
     let progressDelayTimerId = null;
     let keydownSpamTimerId = null;
+    let lastDeactivationTime = null;
     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 addGrabbedBox = (bounds) => {
+    const showTemporaryGrabbedBox = (bounds) => {
       const boxId = `grabbed-${Date.now()}-${Math.random()}`;
       const createdAt = Date.now();
       const newBox = {
@@ -1219,7 +1213,7 @@ var init = (rawOptions) => {
         setGrabbedBoxes((previousBoxes) => previousBoxes.filter((box) => box.id !== boxId));
       }, SUCCESS_LABEL_DURATION_MS);
     };
-    const addSuccessLabel = (text, positionX, positionY) => {
+    const showTemporarySuccessLabel = (text, positionX, positionY) => {
       const labelId = `success-${Date.now()}-${Math.random()}`;
       setSuccessLabels((previousLabels) => [...previousLabels, {
         id: labelId,
@@ -1231,24 +1225,15 @@ var init = (rawOptions) => {
         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 `    at ${functionName} (${fileName}:${lineNumber}:${columnNumber})`;
-      }).join("\n");
-    };
-    const wrapContextInXmlTags = (context) => {
-      return `<selected_element>${context}</selected_element>`;
-    };
-    const getComputedStyles = (element) => {
+    const wrapInSelectedElementTags = (context) => `<selected_element>
+${context}
+</selected_element>`;
+    const extractRelevantComputedStyles = (element) => {
       const computed = window.getComputedStyle(element);
       const rect = element.getBoundingClientRect();
       return {
-        width: `${rect.width}px`,
-        height: `${rect.height}px`,
+        width: `${Math.round(rect.width)}px`,
+        height: `${Math.round(rect.height)}px`,
         paddingTop: computed.paddingTop,
         paddingRight: computed.paddingRight,
         paddingBottom: computed.paddingBottom,
@@ -1257,7 +1242,7 @@ var init = (rawOptions) => {
         opacity: computed.opacity
       };
     };
-    const createStructuredClipboardHtml = (elements) => {
+    const createStructuredClipboardHtmlBlob = (elements) => {
       const structuredData = {
         elements: elements.map((element) => ({
           tagName: element.tagName,
@@ -1271,60 +1256,74 @@ var init = (rawOptions) => {
         type: "text/html"
       });
     };
-    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 extractElementTagName = (element) => (element.tagName || "").toLowerCase();
+    const executeCopyOperation = async (positionX, positionY, operation) => {
+      setCopyStartX(positionX);
+      setCopyStartY(positionY);
+      setIsCopying(true);
+      await operation().finally(() => {
+        setIsCopying(false);
+      });
     };
-    const getElementTagName = (element) => (element.tagName || "").toLowerCase();
-    const handleCopy = async (targetElement2) => {
-      const elementBounds = targetElement2.getBoundingClientRect();
-      const tagName = getElementTagName(targetElement2);
-      addGrabbedBox(createElementBounds(targetElement2));
+    const copySingleElementToClipboard = async (targetElement2) => {
+      const tagName = extractElementTagName(targetElement2);
+      showTemporaryGrabbedBox(createElementBounds(targetElement2));
       try {
-        const content = await getElementContentWithTrace(targetElement2);
-        const plainTextContent = wrapContextInXmlTags(content);
-        const htmlContent = createStructuredClipboardHtml([{
+        const content = await getHTMLSnippet(targetElement2);
+        const plainTextContent = wrapInSelectedElementTags(content);
+        const htmlContent = createStructuredClipboardHtmlBlob([{
           tagName,
-          content: await getElementContentWithTrace(targetElement2),
-          computedStyles: getComputedStyles(targetElement2)
+          content,
+          computedStyles: extractRelevantComputedStyles(targetElement2)
         }]);
-        await copyContent([plainTextContent, htmlContent]);
+        const clipboardData = [plainTextContent, htmlContent];
+        try {
+          const screenshotDataUrl = await domToPng(targetElement2);
+          const response = await fetch(screenshotDataUrl);
+          const pngBlob = await response.blob();
+          const imagePngBlob = new Blob([pngBlob], {
+            type: "image/png"
+          });
+          clipboardData.push(imagePngBlob);
+        } catch {
+        }
+        await copyContent(clipboardData);
       } catch {
       }
-      addSuccessLabel(tagName ? `<${tagName}>` : "<element>", elementBounds.left, elementBounds.top);
+      showTemporarySuccessLabel(tagName ? `<${tagName}>` : "<element>", copyStartX(), copyStartY());
     };
-    const handleMultipleCopy = async (targetElements) => {
+    const copyMultipleElementsToClipboard = async (targetElements) => {
       if (targetElements.length === 0) return;
-      let minPositionX = Infinity;
-      let minPositionY = Infinity;
       for (const element of targetElements) {
-        const elementBounds = element.getBoundingClientRect();
-        minPositionX = Math.min(minPositionX, elementBounds.left);
-        minPositionY = Math.min(minPositionY, elementBounds.top);
-        addGrabbedBox(createElementBounds(element));
+        showTemporaryGrabbedBox(createElementBounds(element));
       }
       try {
-        const elementSnippets = await Promise.all(targetElements.map((element) => getElementContentWithTrace(element)));
+        const elementSnippets = await Promise.all(targetElements.map((element) => getHTMLSnippet(element)));
         const combinedContent = elementSnippets.join("\n\n---\n\n");
-        const plainTextContent = wrapContextInXmlTags(combinedContent);
-        const structuredElements = await Promise.all(targetElements.map(async (element) => ({
-          tagName: getElementTagName(element),
-          content: await getElementContentWithTrace(element),
-          computedStyles: getComputedStyles(element)
-        })));
-        const htmlContent = createStructuredClipboardHtml(structuredElements);
-        await copyContent([plainTextContent, htmlContent]);
+        const plainTextContent = wrapInSelectedElementTags(combinedContent);
+        const structuredElements = elementSnippets.map((content, index) => ({
+          tagName: extractElementTagName(targetElements[index]),
+          content,
+          computedStyles: extractRelevantComputedStyles(targetElements[index])
+        }));
+        const htmlContent = createStructuredClipboardHtmlBlob(structuredElements);
+        const clipboardData = [plainTextContent, htmlContent];
+        if (targetElements.length > 0) {
+          try {
+            const screenshotDataUrl = await domToPng(targetElements[0]);
+            const response = await fetch(screenshotDataUrl);
+            const pngBlob = await response.blob();
+            const imagePngBlob = new Blob([pngBlob], {
+              type: "image/png"
+            });
+            clipboardData.push(imagePngBlob);
+          } catch {
+          }
+        }
+        await copyContent(clipboardData);
       } catch {
       }
-      addSuccessLabel(`${targetElements.length} elements`, minPositionX, minPositionY);
+      showTemporarySuccessLabel(`${targetElements.length} elements`, copyStartX(), copyStartY());
     };
     const targetElement = createMemo(() => {
       if (!isRendererActive() || isDragging()) return null;
@@ -1345,16 +1344,16 @@ ${formattedStackTrace}`;
       };
     });
     const DRAG_THRESHOLD_PX = 2;
-    const getDragDistance = (endX, endY) => ({
+    const calculateDragDistance = (endX, endY) => ({
       x: Math.abs(endX - dragStartX()),
       y: Math.abs(endY - dragStartY())
     });
     const isDraggingBeyondThreshold = createMemo(() => {
       if (!isDragging()) return false;
-      const dragDistance = getDragDistance(mouseX(), mouseY());
+      const dragDistance = calculateDragDistance(mouseX(), mouseY());
       return dragDistance.x > DRAG_THRESHOLD_PX || dragDistance.y > DRAG_THRESHOLD_PX;
     });
-    const getDragRect = (endX, endY) => {
+    const calculateDragRectangle = (endX, endY) => {
       const dragX = Math.min(dragStartX(), endX);
       const dragY = Math.min(dragStartY(), endY);
       const dragWidth = Math.abs(endX - dragStartX());
@@ -1368,7 +1367,7 @@ ${formattedStackTrace}`;
     };
     const dragBounds = createMemo(() => {
       if (!isDraggingBeyondThreshold()) return void 0;
-      const drag = getDragRect(mouseX(), mouseY());
+      const drag = calculateDragRectangle(mouseX(), mouseY());
       return {
         borderRadius: "0px",
         height: drag.height,
@@ -1380,21 +1379,16 @@ ${formattedStackTrace}`;
     });
     const labelText = createMemo(() => {
       const element = targetElement();
-      if (!element) return "(click or drag to select element(s))";
-      const tagName = getElementTagName(element);
-      return tagName ? `<${tagName}>` : "<element>";
-    });
-    const labelPosition = createMemo(() => {
-      return {
-        x: mouseX(),
-        y: mouseY()
-      };
+      return element ? `<${extractElementTagName(element)}>` : "<element>";
     });
-    const isSameAsLast = createMemo(() => {
-      const currentElement = targetElement();
-      const lastElement = lastGrabbedElement();
-      return !!currentElement && currentElement === lastElement;
+    const labelPosition = createMemo(() => isCopying() ? {
+      x: copyStartX(),
+      y: copyStartY()
+    } : {
+      x: mouseX(),
+      y: mouseY()
     });
+    const isSameAsLast = createMemo(() => Boolean(targetElement() && targetElement() === lastGrabbedElement()));
     createEffect(on(() => [targetElement(), lastGrabbedElement()], ([currentElement, lastElement]) => {
       if (lastElement && currentElement && lastElement !== currentElement) {
         setLastGrabbedElement(null);
@@ -1441,9 +1435,12 @@ ${formattedStackTrace}`;
       setIsActivated(true);
       document.body.style.cursor = "crosshair";
     };
-    const deactivateRenderer = () => {
+    const deactivateRenderer = (shouldResetModifier = true) => {
       setIsHoldingKeys(false);
       setIsActivated(false);
+      if (shouldResetModifier) {
+        setIsModifierHeld(false);
+      }
       document.body.style.cursor = "";
       if (isDragging()) {
         setIsDragging(false);
@@ -1452,23 +1449,38 @@ ${formattedStackTrace}`;
       if (holdTimerId) window.clearTimeout(holdTimerId);
       if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
       stopProgressAnimation();
+      lastDeactivationTime = Date.now();
     };
     const abortController = new AbortController();
     const eventListenerSignal = abortController.signal;
     window.addEventListener("keydown", (event) => {
+      if (event.metaKey || event.ctrlKey) {
+        setIsModifierHeld(true);
+      }
       if (event.key === "Escape" && isHoldingKeys()) {
         deactivateRenderer();
         return;
       }
       if (isKeyboardEventTriggeredByInput(event)) return;
       if (isTargetKeyCombination(event)) {
+        const wasRecentlyDeactivated = lastDeactivationTime !== null && Date.now() - lastDeactivationTime < QUICK_REPRESS_THRESHOLD_MS;
         if (!isHoldingKeys()) {
           setIsHoldingKeys(true);
-          startProgressAnimation();
-          holdTimerId = window.setTimeout(() => {
+          if (wasRecentlyDeactivated && isModifierHeld()) {
             activateRenderer();
             options.onActivate?.();
-          }, options.keyHoldDuration);
+            const element = getElementAtPosition(mouseX(), mouseY());
+            if (element) {
+              setLastGrabbedElement(element);
+              void executeCopyOperation(mouseX(), mouseY(), () => copySingleElementToClipboard(element));
+            }
+          } else {
+            startProgressAnimation();
+            holdTimerId = window.setTimeout(() => {
+              activateRenderer();
+              options.onActivate?.();
+            }, options.keyHoldDuration);
+          }
         }
         if (isActivated()) {
           if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
@@ -1481,11 +1493,16 @@ ${formattedStackTrace}`;
       signal: eventListenerSignal
     });
     window.addEventListener("keyup", (event) => {
-      if (!isHoldingKeys() && !isActivated()) return;
-      const isReleasingC = event.key.toLowerCase() === "c";
       const isReleasingModifier = !event.metaKey && !event.ctrlKey;
-      if (isReleasingC || isReleasingModifier) {
-        deactivateRenderer();
+      const isReleasingC = event.key.toLowerCase() === "c";
+      if (isReleasingModifier) {
+        setIsModifierHeld(false);
+      }
+      if (!isHoldingKeys() && !isActivated()) return;
+      if (isReleasingC) {
+        deactivateRenderer(false);
+      } else if (isReleasingModifier) {
+        deactivateRenderer(true);
       }
     }, {
       signal: eventListenerSignal,
@@ -1509,39 +1526,41 @@ ${formattedStackTrace}`;
     });
     window.addEventListener("mouseup", (event) => {
       if (!isDragging()) return;
-      const dragDistance = getDragDistance(event.clientX, event.clientY);
+      const dragDistance = calculateDragDistance(event.clientX, event.clientY);
       const wasDragGesture = dragDistance.x > DRAG_THRESHOLD_PX || dragDistance.y > DRAG_THRESHOLD_PX;
       setIsDragging(false);
       document.body.style.userSelect = "";
       if (wasDragGesture) {
-        const dragRect = getDragRect(event.clientX, event.clientY);
+        setDidJustDrag(true);
+        const dragRect = calculateDragRectangle(event.clientX, event.clientY);
         const elements = getElementsInDrag(dragRect, isValidGrabbableElement);
         if (elements.length > 0) {
-          setIsCopying(true);
-          void handleMultipleCopy(elements).finally(() => {
-            setIsCopying(false);
-          });
+          void executeCopyOperation(event.clientX, event.clientY, () => copyMultipleElementsToClipboard(elements));
         } else {
           const fallbackElements = getElementsInDragLoose(dragRect, isValidGrabbableElement);
           if (fallbackElements.length > 0) {
-            setIsCopying(true);
-            void handleMultipleCopy(fallbackElements).finally(() => {
-              setIsCopying(false);
-            });
+            void executeCopyOperation(event.clientX, event.clientY, () => copyMultipleElementsToClipboard(fallbackElements));
           }
         }
       } else {
         const element = getElementAtPosition(event.clientX, event.clientY);
         if (!element) return;
-        setIsCopying(true);
         setLastGrabbedElement(element);
-        void handleCopy(element).finally(() => {
-          setIsCopying(false);
-        });
+        void executeCopyOperation(event.clientX, event.clientY, () => copySingleElementToClipboard(element));
       }
     }, {
       signal: eventListenerSignal
     });
+    window.addEventListener("click", (event) => {
+      if (didJustDrag()) {
+        event.preventDefault();
+        event.stopPropagation();
+        setDidJustDrag(false);
+      }
+    }, {
+      signal: eventListenerSignal,
+      capture: true
+    });
     document.addEventListener("visibilitychange", () => {
       if (document.hidden) {
         setGrabbedBoxes([]);
@@ -1561,7 +1580,7 @@ ${formattedStackTrace}`;
     const selectionVisible = createMemo(() => false);
     const dragVisible = createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
     const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
-    const labelVisible = createMemo(() => isRendererActive() && !isDragging() && (!!targetElement() && !isSameAsLast() || !targetElement()) || isCopying());
+    const labelVisible = createMemo(() => isRendererActive() && !isDragging() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement()) || isCopying());
     const progressVisible = createMemo(() => isHoldingKeys() && showProgressIndicator() && hasValidMousePosition());
     const crosshairVisible = createMemo(() => isRendererActive() && !isDragging());
     render(() => createComponent(ReactGrabRenderer, {