react-grab 0.0.40 → 0.0.42

package/dist/index.js

@@ -1,9 +1,7 @@
 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, traverseFiber, isCompositeFiber, getDisplayName } from 'bippy';
-import { getSourceFromHostInstance, normalizeFileName, isSourceFile } from 'bippy/dist/source';
-import { finder } from '@medv/finder';
-import TurndownService from 'turndown';
+import { getFiberFromHostInstance, traverseFiber, isCompositeFiber, getDisplayName, isFiber, getLatestFiber, isHostFiber } from 'bippy';
+import { isSourceFile, normalizeFileName, getSource } from 'bippy/source';
 
 /**
  * @license MIT
@@ -95,8 +93,12 @@ var mountRoot = () => {
 var VIEWPORT_MARGIN_PX = 8;
 var INDICATOR_CLAMP_PADDING_PX = 4;
 var CURSOR_OFFSET_PX = 14;
+var OFFSCREEN_POSITION = -1e3;
 var SELECTION_LERP_FACTOR = 0.95;
 var SUCCESS_LABEL_DURATION_MS = 1700;
+var PROGRESS_INDICATOR_DELAY_MS = 150;
+var DRAG_THRESHOLD_PX = 2;
+var Z_INDEX_LABEL = 2147483647;
 
 // src/utils/lerp.ts
 var lerp = (start, end, factor) => {
@@ -261,30 +263,22 @@ var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elemen
   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>Copied`);
-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;vertical-align:middle">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<span style=font-variant-numeric:tabular-nums;font-size:10px;margin-left:4px;vertical-align:middle>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
-var _tmpl$6 = /* @__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);
-  let labelRef;
-  let currentX = props.x;
-  let currentY = props.y;
-  let targetX = props.x;
-  let targetY = props.y;
+var useAnimatedPosition = (options) => {
+  const lerpFactor = options.lerpFactor ?? 0.3;
+  const convergenceThreshold = options.convergenceThreshold ?? 0.5;
+  const [x, setX] = createSignal(options.x());
+  const [y, setY] = createSignal(options.y());
+  let targetX = options.x();
+  let targetY = options.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) {
+    const currentX = lerp(x(), targetX, lerpFactor);
+    const currentY = lerp(y(), targetY, lerpFactor);
+    setX(currentX);
+    setY(currentY);
+    const hasConverged = Math.abs(currentX - targetX) < convergenceThreshold && Math.abs(currentY - targetY) < convergenceThreshold;
+    if (!hasConverged) {
       animationFrameId = requestAnimationFrame(animate);
     } else {
       animationFrameId = null;
@@ -294,36 +288,16 @@ var Label = (props) => {
     if (animationFrameId !== null) return;
     animationFrameId = requestAnimationFrame(animate);
   };
-  const updateTarget = () => {
-    targetX = props.x;
-    targetY = props.y;
+  createEffect(() => {
+    targetX = options.x();
+    targetY = options.y();
     if (!hasBeenRenderedOnce) {
-      currentX = targetX;
-      currentY = targetY;
+      setX(targetX);
+      setY(targetY);
       hasBeenRenderedOnce = true;
-      setPositionTick((tick) => tick + 1);
       return;
     }
     startAnimation();
-  };
-  createEffect(on(() => props.visible, (visible) => {
-    if (visible !== false) {
-      requestAnimationFrame(() => {
-        setOpacity(1);
-      });
-    } else {
-      setOpacity(0);
-      return;
-    }
-    if (props.variant === "success") {
-      const fadeOutTimer = setTimeout(() => {
-        setOpacity(0);
-      }, SUCCESS_LABEL_DURATION_MS);
-      onCleanup(() => clearTimeout(fadeOutTimer));
-    }
-  }));
-  createEffect(() => {
-    updateTarget();
   });
   onCleanup(() => {
     if (animationFrameId !== null) {
@@ -331,34 +305,91 @@ var Label = (props) => {
       animationFrameId = null;
     }
   });
+  return { x, y };
+};
+var useFadeInOut = (options) => {
+  const [opacity, setOpacity] = createSignal(0);
+  createEffect(
+    on(
+      () => options.visible,
+      (isVisible) => {
+        if (isVisible !== false) {
+          requestAnimationFrame(() => {
+            setOpacity(1);
+          });
+        } else {
+          setOpacity(0);
+          return;
+        }
+        if (options.autoFadeOutAfter !== void 0) {
+          const fadeOutTimer = setTimeout(() => {
+            setOpacity(0);
+          }, options.autoFadeOutAfter);
+          onCleanup(() => clearTimeout(fadeOutTimer));
+        }
+      }
+    )
+  );
+  return opacity;
+};
+
+// src/utils/get-cursor-quadrants.ts
+var getCursorQuadrants = (cursorX, cursorY, elementWidth, elementHeight, offset) => {
+  return [
+    {
+      left: Math.round(cursorX) + offset,
+      top: Math.round(cursorY) + offset
+    },
+    {
+      left: Math.round(cursorX) - elementWidth - offset,
+      top: Math.round(cursorY) + offset
+    },
+    {
+      left: Math.round(cursorX) + offset,
+      top: Math.round(cursorY) - elementHeight - offset
+    },
+    {
+      left: Math.round(cursorX) - elementWidth - offset,
+      top: Math.round(cursorY) - elementHeight - offset
+    }
+  ];
+};
+
+// src/components/label.tsx
+var _tmpl$3 = /* @__PURE__ */ template(`<div style="position:absolute;top:0;left:0;bottom:0;background-color:rgba(178, 28, 142, 0.2);border-radius:3px;transition:width 0.1s ease-out;pointer-events:none">`);
+var _tmpl$22 = /* @__PURE__ */ template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
+var _tmpl$32 = /* @__PURE__ */ template(`<div style=margin-right:4px>Copied`);
+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;vertical-align:middle">`);
+var _tmpl$5 = /* @__PURE__ */ template(`<span style=font-variant-numeric:tabular-nums;font-size:10px;margin-left:4px;vertical-align:middle>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div style=font-size:9px;opacity:0.6;text-align:center;margin-top:2px>Click or drag to select`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div style="position:fixed;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;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden"><div style="position:relative;padding:2px 6px;display:flex;flex-direction:column"><div style=display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap>`);
+var Label = (props) => {
+  let labelRef;
+  const position = useAnimatedPosition({
+    x: () => props.x,
+    y: () => props.y,
+    lerpFactor: 0.3
+  });
+  const opacity = useFadeInOut({
+    visible: props.visible,
+    autoFadeOutAfter: props.variant === "success" ? SUCCESS_LABEL_DURATION_MS : void 0
+  });
   const labelBoundingRect = () => labelRef?.getBoundingClientRect();
   const computedPosition = () => {
-    positionTick();
     const boundingRect = labelBoundingRect();
     if (!boundingRect) return {
-      left: currentX,
-      top: currentY
+      left: position.x(),
+      top: position.y()
     };
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    const quadrants = [{
-      left: Math.round(currentX) + CURSOR_OFFSET_PX,
-      top: Math.round(currentY) + CURSOR_OFFSET_PX
-    }, {
-      left: Math.round(currentX) - boundingRect.width - CURSOR_OFFSET_PX,
-      top: Math.round(currentY) + CURSOR_OFFSET_PX
-    }, {
-      left: Math.round(currentX) + CURSOR_OFFSET_PX,
-      top: Math.round(currentY) - boundingRect.height - CURSOR_OFFSET_PX
-    }, {
-      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;
-      const fitsVertically = position.top >= VIEWPORT_MARGIN_PX && position.top + boundingRect.height <= viewportHeight - VIEWPORT_MARGIN_PX;
+    const quadrants = getCursorQuadrants(position.x(), position.y(), boundingRect.width, boundingRect.height, CURSOR_OFFSET_PX);
+    for (const position2 of quadrants) {
+      const fitsHorizontally = position2.left >= VIEWPORT_MARGIN_PX && position2.left + boundingRect.width <= viewportWidth - VIEWPORT_MARGIN_PX;
+      const fitsVertically = position2.top >= VIEWPORT_MARGIN_PX && position2.top + boundingRect.height <= viewportHeight - VIEWPORT_MARGIN_PX;
       if (fitsHorizontally && fitsVertically) {
-        return position;
+        return position2;
       }
     }
     const fallback = getClampedElementPosition(quadrants[0].left, quadrants[0].top, boundingRect.width, boundingRect.height);
@@ -385,10 +416,20 @@ var Label = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$6();
+      var _el$ = _tmpl$8(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild;
       var _ref$ = labelRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : labelRef = _el$;
       insert(_el$, createComponent(Show, {
+        get when() {
+          return memo(() => props.variant === "processing")() && props.progress !== void 0;
+        },
+        get children() {
+          var _el$2 = _tmpl$3();
+          effect((_$p) => setStyleProperty(_el$2, "width", `${Math.min(100, Math.max(0, (props.progress ?? 0) * 100))}%`));
+          return _el$2;
+        }
+      }), _el$3);
+      insert(_el$4, createComponent(Show, {
         get when() {
           return props.variant === "processing";
         },
@@ -396,55 +437,63 @@ var Label = (props) => {
           return createComponent(Spinner, {});
         }
       }), null);
-      insert(_el$, createComponent(Show, {
+      insert(_el$4, createComponent(Show, {
         get when() {
           return props.variant === "success";
         },
         get children() {
-          return _tmpl$3();
+          return _tmpl$22();
         }
       }), null);
-      insert(_el$, createComponent(Show, {
+      insert(_el$4, createComponent(Show, {
         get when() {
           return props.variant === "success";
         },
         get children() {
-          return _tmpl$22();
+          return _tmpl$32();
         }
       }), null);
-      insert(_el$, createComponent(Show, {
+      insert(_el$4, createComponent(Show, {
         get when() {
           return props.variant === "processing";
         },
-        children: "Grabbing\u2026"
+        children: "Please wait\u2026"
       }), null);
-      insert(_el$, createComponent(Show, {
+      insert(_el$4, createComponent(Show, {
         get when() {
           return props.variant !== "processing";
         },
         get children() {
           return [(() => {
-            var _el$4 = _tmpl$32();
-            insert(_el$4, () => labelSegments().primary);
-            return _el$4;
+            var _el$7 = _tmpl$4();
+            insert(_el$7, () => labelSegments().primary);
+            return _el$7;
           })(), createComponent(Show, {
             get when() {
               return memo(() => props.variant === "hover")() && labelSegments().secondary !== "";
             },
             get children() {
-              var _el$5 = _tmpl$4();
-              insert(_el$5, () => labelSegments().secondary);
-              return _el$5;
+              var _el$8 = _tmpl$5();
+              insert(_el$8, () => labelSegments().secondary);
+              return _el$8;
             }
           })];
         }
       }), null);
-      insert(_el$, createComponent(Show, {
+      insert(_el$4, createComponent(Show, {
         get when() {
           return props.variant === "success";
         },
         get children() {
-          return _tmpl$5();
+          return _tmpl$6();
+        }
+      }), null);
+      insert(_el$3, createComponent(Show, {
+        get when() {
+          return memo(() => props.variant === "hover")() && props.showHint;
+        },
+        get children() {
+          return _tmpl$7();
         }
       }), null);
       effect((_p$) => {
@@ -464,22 +513,11 @@ var Label = (props) => {
     }
   });
 };
-var _tmpl$7 = /* @__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);
-  createEffect(on(() => visible, (isVisible) => {
-    if (isVisible !== false) {
-      requestAnimationFrame(() => {
-        setOpacity(1);
-      });
-    } else {
-      setOpacity(0);
-    }
-  }));
-  return opacity;
-};
+var _tmpl$9 = /* @__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 ProgressIndicator = (props) => {
-  const opacity = useFadeInOut(props.visible);
+  const opacity = useFadeInOut({
+    visible: props.visible
+  });
   let progressIndicatorRef;
   const computedPosition = () => {
     const boundingRect = progressIndicatorRef?.getBoundingClientRect();
@@ -497,7 +535,7 @@ var ProgressIndicator = (props) => {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$7(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+      var _el$ = _tmpl$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
       var _ref$ = progressIndicatorRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : progressIndicatorRef = _el$;
       effect((_p$) => {
@@ -517,19 +555,18 @@ var ProgressIndicator = (props) => {
     }
   });
 };
-var _tmpl$8 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;pointer-events:none;z-index:2147483645>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;pointer-events:none;z-index:2147483645>`);
 var Crosshair = (props) => {
   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 animationFrameId = null;
-  let hasBeenRenderedOnce = false;
+  const position = useAnimatedPosition({
+    x: () => props.mouseX,
+    y: () => props.mouseY,
+    lerpFactor: 0.3
+  });
   const setupCanvas = () => {
     if (!canvasRef) return;
     dpr = Math.max(window.devicePixelRatio || 1, 2);
@@ -550,39 +587,12 @@ var Crosshair = (props) => {
     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.moveTo(position.x(), 0);
+    context.lineTo(position.x(), height);
+    context.moveTo(0, position.y());
+    context.lineTo(width, position.y());
     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 (animationFrameId !== null) return;
-    animationFrameId = requestAnimationFrame(animate);
-  };
-  const updateTarget = () => {
-    targetX = props.mouseX;
-    targetY = props.mouseY;
-    if (!hasBeenRenderedOnce) {
-      currentX = targetX;
-      currentY = targetY;
-      hasBeenRenderedOnce = true;
-      render2();
-      return;
-    }
-    startAnimation();
-  };
   createEffect(() => {
     setupCanvas();
     render2();
@@ -593,21 +603,19 @@ var Crosshair = (props) => {
     window.addEventListener("resize", handleResize);
     onCleanup(() => {
       window.removeEventListener("resize", handleResize);
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-        animationFrameId = null;
-      }
     });
   });
   createEffect(() => {
-    updateTarget();
+    position.x();
+    position.y();
+    render2();
   });
   return createComponent(Show, {
     get when() {
       return props.visible !== false;
     },
     get children() {
-      var _el$ = _tmpl$8();
+      var _el$ = _tmpl$10();
       var _ref$ = canvasRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
       return _el$;
@@ -675,22 +683,29 @@ var ReactGrabRenderer = (props) => {
         return box.createdAt;
       }
     })
-  }), createComponent(For, {
-    get each() {
-      return props.successLabels ?? [];
+  }), createComponent(Show, {
+    get when() {
+      return props.labelVariant !== "processing";
     },
-    children: (label) => createComponent(Label, {
-      variant: "success",
-      get text() {
-        return label.text;
-      },
-      get x() {
-        return props.mouseX ?? 0;
-      },
-      get y() {
-        return props.mouseY ?? 0;
-      }
-    })
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return props.successLabels ?? [];
+        },
+        children: (label) => createComponent(Label, {
+          variant: "success",
+          get text() {
+            return label.text;
+          },
+          get x() {
+            return props.mouseX ?? 0;
+          },
+          get y() {
+            return props.mouseY ?? 0;
+          }
+        })
+      });
+    }
   }), createComponent(Show, {
     get when() {
       return memo(() => !!(props.labelVisible && props.labelVariant && props.labelText && props.labelX !== void 0))() && props.labelY !== void 0;
@@ -714,6 +729,12 @@ var ReactGrabRenderer = (props) => {
         },
         get zIndex() {
           return props.labelZIndex;
+        },
+        get progress() {
+          return props.progress;
+        },
+        get showHint() {
+          return props.labelShowHint;
         }
       });
     }
@@ -744,27 +765,62 @@ var ReactGrabRenderer = (props) => {
 var isCapitalized = (value) => value.length > 0 && /^[A-Z]/.test(value);
 
 // src/instrumentation.ts
-instrument({
-  onCommitFiberRoot(_, fiberRoot) {
-    _fiberRoots.add(fiberRoot);
-  }
-});
-var generateCSSSelector = (element) => {
-  return finder(element);
+var NEXT_INTERNAL_COMPONENT_NAMES = [
+  "InnerLayoutRouter",
+  "RedirectErrorBoundary",
+  "RedirectBoundary",
+  "HTTPAccessFallbackErrorBoundary",
+  "HTTPAccessFallbackBoundary",
+  "LoadingBoundary",
+  "ErrorBoundary",
+  "InnerScrollAndFocusHandler",
+  "ScrollAndFocusHandler",
+  "RenderFromTemplateContext",
+  "OuterLayoutRouter",
+  "body",
+  "html",
+  "RedirectErrorBoundary",
+  "RedirectBoundary",
+  "HTTPAccessFallbackErrorBoundary",
+  "HTTPAccessFallbackBoundary",
+  "DevRootHTTPAccessFallbackBoundary",
+  "AppDevOverlayErrorBoundary",
+  "AppDevOverlay",
+  "HotReload",
+  "Router",
+  "ErrorBoundaryHandler",
+  "ErrorBoundary",
+  "AppRouter",
+  "ServerRoot",
+  "SegmentStateProvider",
+  "RootErrorBoundary"
+];
+var checkIsNextProject = () => {
+  return Boolean(document.getElementById("__NEXT_DATA__"));
+};
+var checkIsInternalComponentName = (name) => {
+  if (name.startsWith("_")) return true;
+  if (NEXT_INTERNAL_COMPONENT_NAMES.includes(name)) return true;
+  return false;
 };
-var truncateString = (string, maxLength) => string.length > maxLength ? `${string.substring(0, maxLength)}...` : string;
-var isInternalComponent = (name) => !isCapitalized(name) || name.startsWith("_") || name.startsWith("Primitive.") || name.includes("Provider") && name.includes("Context");
-var getNearestComponentDisplayName = (element) => {
+var checkIsSourceComponentName = (name) => {
+  if (checkIsInternalComponentName(name)) return false;
+  if (!isCapitalized(name)) return false;
+  if (name.startsWith("Primitive.")) return false;
+  if (name.includes("Provider") && name.includes("Context")) return false;
+  return true;
+};
+var getNearestComponentName = (element) => {
   const fiber = getFiberFromHostInstance(element);
   if (!fiber) return null;
-  let componentName = null;
+  let foundComponentName = null;
   traverseFiber(
     fiber,
     (currentFiber) => {
       if (isCompositeFiber(currentFiber)) {
         const displayName = getDisplayName(currentFiber);
-        if (displayName && !isInternalComponent(displayName)) {
-          componentName = displayName;
+        if (displayName && checkIsSourceComponentName(displayName)) {
+          foundComponentName = displayName;
           return true;
         }
       }
@@ -772,231 +828,107 @@ var getNearestComponentDisplayName = (element) => {
     },
     true
   );
-  return componentName;
-};
-var formatComponentSourceLocation = async (el) => {
-  const source = await getSourceFromHostInstance(el);
-  if (!source) return null;
-  const fileName = normalizeFileName(source.fileName);
-  if (isSourceFile(fileName)) {
-    return `${fileName}:${source.lineNumber}:${source.columnNumber}`;
-  }
-  if (fileName && (fileName.includes(".tsx") || fileName.includes(".ts") || fileName.includes(".jsx") || fileName.includes(".js"))) {
-    const cleanedFileName = fileName.replace(/^webpack:\/\/_N_E\//, "").replace(/^webpack:\/\/\//, "").replace(/^webpack:\/\//, "").replace(/^\.\//, "");
-    if (cleanedFileName && !cleanedFileName.startsWith("node_modules") && !cleanedFileName.includes(".next") && !cleanedFileName.startsWith("webpack")) {
-      return `${cleanedFileName}:${source.lineNumber}:${source.columnNumber}`;
-    }
-  }
-  return null;
+  return foundComponentName;
 };
-var getHTMLSnippet = async (element) => {
-  const semanticTags = /* @__PURE__ */ new Set([
-    "article",
-    "aside",
-    "footer",
-    "form",
-    "header",
-    "main",
-    "nav",
-    "section"
-  ]);
-  const hasDistinguishingFeatures = (el) => {
-    const tagName = el.tagName.toLowerCase();
-    if (semanticTags.has(tagName)) return true;
-    if (el.id) return true;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim();
-      if (classes && classes.length > 0) return true;
-    }
-    return Array.from(el.attributes).some(
-      (attr) => attr.name.startsWith("data-")
-    );
-  };
-  const collectDistinguishingAncestors = (el, maxDepth = 10) => {
-    const ancestors2 = [];
-    let current = el.parentElement;
-    let depth = 0;
-    while (current && depth < maxDepth && current.tagName !== "BODY") {
-      if (hasDistinguishingFeatures(current)) {
-        ancestors2.push(current);
-        if (ancestors2.length >= 3) break;
-      }
-      current = current.parentElement;
-      depth++;
-    }
-    return ancestors2.reverse();
-  };
-  const formatElementOpeningTag = (el, compact = false) => {
-    const tagName = el.tagName.toLowerCase();
-    const attrs = [];
-    if (el.id) {
-      attrs.push(`id="${el.id}"`);
-    }
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        const displayClasses = compact ? classes.slice(0, 3) : classes;
-        const classStr = truncateString(displayClasses.join(" "), 30);
-        attrs.push(`class="${classStr}"`);
-      }
-    }
-    const dataAttrs = Array.from(el.attributes).filter(
-      (attr) => attr.name.startsWith("data-")
-    );
-    const displayDataAttrs = compact ? dataAttrs.slice(0, 1) : dataAttrs;
-    for (const attr of displayDataAttrs) {
-      attrs.push(`${attr.name}="${truncateString(attr.value, 20)}"`);
-    }
-    const ariaLabel = el.getAttribute("aria-label");
-    if (ariaLabel && !compact) {
-      attrs.push(`aria-label="${truncateString(ariaLabel, 20)}"`);
-    }
-    return attrs.length > 0 ? `<${tagName} ${attrs.join(" ")}>` : `<${tagName}>`;
-  };
-  const formatElementClosingTag = (el) => `</${el.tagName.toLowerCase()}>`;
-  const extractTruncatedTextContent = (el) => {
-    const text = (el.textContent || "").trim().replace(/\s+/g, " ");
-    return truncateString(text, 60);
-  };
-  const extractSiblingIdentifier = (el) => {
-    if (el.id) return `#${el.id}`;
-    if (el.className && typeof el.className === "string") {
-      const classes = el.className.trim().split(/\s+/);
-      if (classes.length > 0 && classes[0]) {
-        return `.${classes[0]}`;
+var getStack = async (element) => {
+  const maybeFiber = getFiberFromHostInstance(element);
+  if (!maybeFiber || !isFiber(maybeFiber)) return [];
+  const fiber = getLatestFiber(maybeFiber);
+  const unresolvedStack = [];
+  traverseFiber(
+    fiber,
+    (currentFiber) => {
+      const displayName = isHostFiber(currentFiber) ? typeof currentFiber.type === "string" ? currentFiber.type : null : getDisplayName(currentFiber);
+      if (displayName && !checkIsInternalComponentName(displayName)) {
+        unresolvedStack.push({
+          name: displayName,
+          sourcePromise: getSource(currentFiber)
+        });
       }
-    }
-    return null;
-  };
-  const lines = [];
-  const selector = generateCSSSelector(element);
-  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) => getNearestComponentDisplayName(ancestor)
+    },
+    true
   );
-  const elementComponent = getNearestComponentDisplayName(element);
-  const ancestorSources = await Promise.all(
-    ancestors.map((ancestor) => formatComponentSourceLocation(ancestor))
+  const resolvedStack = await Promise.all(
+    unresolvedStack.map(async (frame) => ({
+      name: frame.name,
+      source: await frame.sourcePromise
+    }))
   );
-  const elementSource = await formatComponentSourceLocation(element);
-  const ancestorElementIndents = [];
-  const ancestorComponentIndents = [];
-  let currentIndentLevel = 0;
-  const getIndent = (level) => "  ".repeat(level);
-  for (let i = 0; i < ancestors.length; i++) {
-    const componentName = ancestorComponents[i];
-    const source = ancestorSources[i];
-    const isNewComponent = componentName && source && (i === 0 || ancestorComponents[i - 1] !== componentName);
-    if (isNewComponent) {
-      ancestorComponentIndents[i] = currentIndentLevel;
-      lines.push(
-        `${getIndent(currentIndentLevel)}<${componentName} used-at="${source}">`
-      );
-      currentIndentLevel++;
+  return resolvedStack.filter((frame) => frame.source !== null);
+};
+var formatStack = (stack) => {
+  const isNextProject = checkIsNextProject();
+  return stack.map(({ name, source }) => {
+    if (!source) return `  at ${name}`;
+    if (source.fileName.startsWith("about://React/Server")) {
+      return `  at ${name} (Server)`;
     }
-    ancestorElementIndents[i] = currentIndentLevel;
-    lines.push(
-      `${getIndent(currentIndentLevel)}${formatElementOpeningTag(ancestors[i], true)}`
-    );
-    currentIndentLevel++;
-  }
-  const parent = element.parentElement;
-  let targetIndex = -1;
-  if (parent) {
-    const siblings = Array.from(parent.children);
-    targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      const indent = getIndent(currentIndentLevel);
-      if (targetIndex <= 2) {
-        for (let i = 0; i < targetIndex; i++) {
-          const sibling = siblings[i];
-          const siblingId = extractSiblingIdentifier(sibling);
-          if (siblingId) {
-            lines.push(`${indent}${formatElementOpeningTag(sibling, true)}`);
-            lines.push(`${indent}</${sibling.tagName.toLowerCase()}>`);
-          }
-        }
-      } else {
-        lines.push(
-          `${indent}... (${targetIndex} element${targetIndex === 1 ? "" : "s"})`
-        );
-      }
+    if (!isSourceFile(source.fileName)) return `  at ${name}`;
+    const framePart = `  at ${name} in ${normalizeFileName(source.fileName)}`;
+    if (isNextProject) {
+      return `${framePart}:${source.lineNumber}:${source.columnNumber}`;
     }
+    return framePart;
+  }).join("\n");
+};
+var getHTMLPreview = (element) => {
+  const tagName = element.tagName.toLowerCase();
+  if (!(element instanceof HTMLElement)) {
+    return `<${tagName} />`;
   }
-  const lastAncestorComponent = ancestors.length > 0 ? ancestorComponents[ancestorComponents.length - 1] : null;
-  const showElementComponent = elementComponent && elementSource && elementComponent !== lastAncestorComponent;
-  let elementIndentLevel = currentIndentLevel;
-  const elementComponentIndentLevel = currentIndentLevel;
-  if (showElementComponent) {
-    lines.push(
-      `${getIndent(elementIndentLevel)}<${elementComponent} used-at="${elementSource}">`
-    );
-    elementIndentLevel++;
-  }
-  const elementIndent = getIndent(elementIndentLevel);
-  lines.push(`${elementIndent}<!-- IMPORTANT: selected element -->`);
-  const textContent = extractTruncatedTextContent(element);
-  const childrenCount = element.children.length;
-  if (textContent && childrenCount === 0 && textContent.length < 40) {
-    lines.push(
-      `${elementIndent}${formatElementOpeningTag(element)}${textContent}${formatElementClosingTag(
-        element
-      )}`
-    );
-  } else {
-    lines.push(`${elementIndent}${formatElementOpeningTag(element)}`);
-    if (textContent) {
-      lines.push(`${elementIndent}  ${textContent}`);
-    }
-    if (childrenCount > 0) {
-      lines.push(
-        `${elementIndent}  ... (${childrenCount} element${childrenCount === 1 ? "" : "s"})`
-      );
+  const text = element.innerText?.trim() ?? element.textContent?.trim() ?? "";
+  let attrsText = "";
+  const attributes = Array.from(element.attributes);
+  for (const attribute of attributes) {
+    const name = attribute.name;
+    let value = attribute.value;
+    if (value.length > 20) {
+      value = `${value.slice(0, 20)}...`;
     }
-    lines.push(`${elementIndent}${formatElementClosingTag(element)}`);
+    attrsText += ` ${name}="${value}"`;
   }
-  if (showElementComponent) {
-    lines.push(
-      `${getIndent(elementComponentIndentLevel)}</${elementComponent}>`
-    );
-  }
-  if (parent && targetIndex >= 0) {
-    const siblings = Array.from(parent.children);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      const indent = getIndent(currentIndentLevel);
-      if (siblingsAfter <= 2) {
-        for (let i = targetIndex + 1; i < siblings.length; i++) {
-          const sibling = siblings[i];
-          const siblingId = extractSiblingIdentifier(sibling);
-          if (siblingId) {
-            lines.push(`${indent}${formatElementOpeningTag(sibling, true)}`);
-            lines.push(`${indent}</${sibling.tagName.toLowerCase()}>`);
-          }
-        }
+  const topElements = [];
+  const bottomElements = [];
+  let foundFirstText = false;
+  const childNodes = Array.from(element.childNodes);
+  for (const node of childNodes) {
+    if (node.nodeType === Node.COMMENT_NODE) continue;
+    if (node.nodeType === Node.TEXT_NODE) {
+      if (node.textContent && node.textContent.trim().length > 0) {
+        foundFirstText = true;
+      }
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (!foundFirstText) {
+        topElements.push(node);
       } else {
-        lines.push(
-          `${indent}... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-        );
+        bottomElements.push(node);
       }
     }
   }
-  for (let i = ancestors.length - 1; i >= 0; i--) {
-    const elementIndent2 = getIndent(ancestorElementIndents[i]);
-    lines.push(`${elementIndent2}${formatElementClosingTag(ancestors[i])}`);
-    if (ancestorComponentIndents[i] !== void 0) {
-      const compIndent = getIndent(ancestorComponentIndents[i]);
-      lines.push(`${compIndent}</${ancestorComponents[i]}>`);
+  const formatElements = (elements) => {
+    if (elements.length === 0) return "";
+    if (elements.length <= 2) {
+      return elements.map((el) => `<${el.tagName.toLowerCase()} ...>`).join("\n  ");
     }
+    return `(${elements.length} elements)`;
+  };
+  let content = "";
+  const topElementsStr = formatElements(topElements);
+  if (topElementsStr) content += `
+  ${topElementsStr}`;
+  if (text.length > 0) {
+    const truncatedText = text.length > 100 ? `${text.slice(0, 100)}...` : text;
+    content += `
+  ${truncatedText}`;
   }
-  lines.push("```");
-  return lines.join("\n");
+  const bottomElementsStr = formatElements(bottomElements);
+  if (bottomElementsStr) content += `
+  ${bottomElementsStr}`;
+  if (content.length > 0) {
+    return `<${tagName}${attrsText}>${content}
+</${tagName}>`;
+  }
+  return `<${tagName}${attrsText} />`;
 };
 
 // src/utils/copy-content.ts
@@ -1016,73 +948,13 @@ var waitForFocus = () => {
 var copyContent = async (content, onSuccess) => {
   await waitForFocus();
   try {
-    if (Array.isArray(content)) {
-      if (!navigator?.clipboard?.write) {
-        for (const contentPart of content) {
-          if (typeof contentPart === "string") {
-            const result = copyContentFallback(contentPart, onSuccess);
-            if (!result) return result;
-          }
-        }
-        onSuccess?.();
-        return true;
-      }
-      const mimeTypeMap = /* @__PURE__ */ new Map();
-      for (const contentPart of content) {
-        if (contentPart instanceof Blob) {
-          const mimeType = contentPart.type || "text/plain";
-          if (!mimeTypeMap.has(mimeType)) {
-            mimeTypeMap.set(mimeType, contentPart);
-          }
-        } else {
-          if (!mimeTypeMap.has("text/plain")) {
-            mimeTypeMap.set(
-              "text/plain",
-              new Blob([contentPart], { type: "text/plain" })
-            );
-          }
-        }
-      }
-      if (mimeTypeMap.size === 0) {
-        const plainTextFallback = content.find(
-          (contentPart) => typeof contentPart === "string"
-        );
-        if (typeof plainTextFallback === "string") {
-          return copyContentFallback(plainTextFallback, onSuccess);
-        }
-        return false;
-      }
-      try {
-        await navigator.clipboard.write([
-          new ClipboardItem(Object.fromEntries(mimeTypeMap))
-        ]);
-        onSuccess?.();
-        return true;
-      } catch {
-        const plainTextParts = content.filter(
-          (contentPart) => typeof contentPart === "string"
-        );
-        if (plainTextParts.length > 0) {
-          const combinedText = plainTextParts.join("\n\n");
-          return copyContentFallback(combinedText, onSuccess);
-        }
-        return false;
-      }
-    } else if (content instanceof Blob) {
-      await navigator.clipboard.write([
-        new ClipboardItem({ [content.type]: content })
-      ]);
+    try {
+      await navigator.clipboard.writeText(content);
       onSuccess?.();
       return true;
-    } else {
-      try {
-        await navigator.clipboard.writeText(String(content));
-        onSuccess?.();
-        return true;
-      } catch {
-        const result = copyContentFallback(content, onSuccess);
-        return result;
-      }
+    } catch {
+      const result = copyContentFallback(content, onSuccess);
+      return result;
     }
   } catch {
     return false;
@@ -1171,13 +1043,27 @@ var getElementAtPosition = (clientX, clientY) => {
 
 // src/utils/get-elements-in-drag.ts
 var DRAG_COVERAGE_THRESHOLD = 0.75;
+var calculateIntersectionArea = (rect1, rect2) => {
+  const intersectionLeft = Math.max(rect1.left, rect2.left);
+  const intersectionTop = Math.max(rect1.top, rect2.top);
+  const intersectionRight = Math.min(rect1.right, rect2.right);
+  const intersectionBottom = Math.min(rect1.bottom, rect2.bottom);
+  const intersectionWidth = Math.max(0, intersectionRight - intersectionLeft);
+  const intersectionHeight = Math.max(0, intersectionBottom - intersectionTop);
+  return intersectionWidth * intersectionHeight;
+};
+var hasIntersection = (rect1, rect2) => {
+  return rect1.left < rect2.right && rect1.right > rect2.left && rect1.top < rect2.bottom && rect1.bottom > rect2.top;
+};
 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;
+  const dragBounds = {
+    left: dragRect.x,
+    top: dragRect.y,
+    right: dragRect.x + dragRect.width,
+    bottom: dragRect.y + dragRect.height
+  };
   for (const candidateElement of allElements) {
     if (!shouldCheckCoverage) {
       const tagName = (candidateElement.tagName || "").toUpperCase();
@@ -1187,26 +1073,21 @@ var filterElementsInDrag = (dragRect, isValidGrabbableElement2, shouldCheckCover
       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;
+    const elementBounds = {
+      left: elementRect.left,
+      top: elementRect.top,
+      right: elementRect.left + elementRect.width,
+      bottom: 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 intersectionArea = calculateIntersectionArea(dragBounds, elementBounds);
       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) {
+      if (hasIntersection(elementBounds, dragBounds)) {
         elements.push(candidateElement);
       }
     }
@@ -1245,70 +1126,7 @@ var createElementBounds = (element) => {
   };
 };
 
-// src/utils/is-localhost.ts
-var isLocalhost = () => {
-  const hostname = window.location.hostname;
-  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
-};
-var turndownService = null;
-var getTurndownService = () => {
-  if (!turndownService) {
-    turndownService = new TurndownService({
-      headingStyle: "atx",
-      codeBlockStyle: "fenced",
-      emDelimiter: "_",
-      bulletListMarker: "-",
-      linkStyle: "inlined",
-      linkReferenceStyle: "full"
-    });
-    turndownService.addRule("strikethrough", {
-      filter: ["del", "s"],
-      replacement: (content) => `~~${content}~~`
-    });
-    turndownService.addRule("removeHidden", {
-      filter: (node) => {
-        if (node instanceof HTMLElement) {
-          const style = window.getComputedStyle(node);
-          return style.display === "none" || style.visibility === "hidden" || style.opacity === "0";
-        }
-        return false;
-      },
-      replacement: () => ""
-    });
-    turndownService.addRule("preserveButtons", {
-      filter: ["button"],
-      replacement: (content) => content ? `[${content}]` : ""
-    });
-    turndownService.addRule("preserveInputs", {
-      filter: (node) => {
-        if (node.nodeName === "INPUT" && node instanceof HTMLInputElement) {
-          return true;
-        }
-        return false;
-      },
-      replacement: (_, node) => {
-        if (node instanceof HTMLInputElement) {
-          const value = node.value || node.placeholder;
-          return value ? `[${value}]` : "";
-        }
-        return "";
-      }
-    });
-  }
-  return turndownService;
-};
-var htmlToMarkdown = (html) => {
-  const service = getTurndownService();
-  return service.turndown(html).trim();
-};
-var elementToMarkdown = (element) => {
-  const clonedElement = element.cloneNode(true);
-  const service = getTurndownService();
-  return service.turndown(clonedElement).trim();
-};
-
 // src/core.tsx
-var PROGRESS_INDICATOR_DELAY_MS = 150;
 var init = (rawOptions) => {
   const options = {
     enabled: true,
@@ -1331,7 +1149,6 @@ var init = (rawOptions) => {
     };
   }
   return createRoot((dispose) => {
-    const OFFSCREEN_POSITION = -1e3;
     const [isHoldingKeys, setIsHoldingKeys] = createSignal(false);
     const [mouseX, setMouseX] = createSignal(OFFSCREEN_POSITION);
     const [mouseY, setMouseY] = createSignal(OFFSCREEN_POSITION);
@@ -1341,7 +1158,7 @@ var init = (rawOptions) => {
     const [isCopying, setIsCopying] = createSignal(false);
     const [lastGrabbedElement, setLastGrabbedElement] = createSignal(null);
     const [progressStartTime, setProgressStartTime] = createSignal(null);
-    const [progressTick, setProgressTick] = createSignal(0);
+    const [progress, setProgress] = createSignal(0);
     const [grabbedBoxes, setGrabbedBoxes] = createSignal([]);
     const [successLabels, setSuccessLabels] = createSignal([]);
     const [isActivated, setIsActivated] = createSignal(false);
@@ -1356,8 +1173,6 @@ var init = (rawOptions) => {
     let progressDelayTimerId = null;
     let keydownSpamTimerId = null;
     let mouseSettleTimerId = null;
-    let referenceMouseX = OFFSCREEN_POSITION;
-    let referenceMouseY = OFFSCREEN_POSITION;
     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";
@@ -1388,55 +1203,10 @@ var init = (rawOptions) => {
     const wrapInSelectedElementTags = (context) => `<selected_element>
 ${context}
 </selected_element>`;
-    const extractRelevantComputedStyles = (element) => {
-      const computed = window.getComputedStyle(element);
-      const rect = element.getBoundingClientRect();
-      return {
-        width: `${Math.round(rect.width)}px`,
-        height: `${Math.round(rect.height)}px`,
-        paddingTop: computed.paddingTop,
-        paddingRight: computed.paddingRight,
-        paddingBottom: computed.paddingBottom,
-        paddingLeft: computed.paddingLeft,
-        background: computed.background,
-        opacity: computed.opacity
-      };
-    };
-    const createStructuredClipboardHtmlBlob = (elements) => {
-      const structuredData = {
-        elements: elements.map((element) => ({
-          tagName: element.tagName,
-          content: element.content,
-          computedStyles: element.computedStyles
-        }))
-      };
-      const jsonString = JSON.stringify(structuredData);
-      const base64Data = btoa(encodeURIComponent(jsonString).replace(/%([0-9A-F]{2})/g, (_match, p1) => String.fromCharCode(parseInt(p1, 16))));
-      const htmlContent = `<div data-react-grab="${base64Data}"></div>`;
-      return new Blob([htmlContent], {
-        type: "text/html"
-      });
-    };
     const extractElementTagName = (element) => (element.tagName || "").toLowerCase();
-    const extractNearestComponentName = (element) => {
-      const fiber = getFiberFromHostInstance(element);
-      if (!fiber) return null;
-      let componentName = null;
-      traverseFiber(fiber, (currentFiber) => {
-        if (isCompositeFiber(currentFiber)) {
-          const displayName = getDisplayName(currentFiber);
-          if (displayName && isCapitalized(displayName) && !displayName.startsWith("_") && !displayName.startsWith("Primitive.")) {
-            componentName = displayName;
-            return true;
-          }
-        }
-        return false;
-      }, true);
-      return componentName;
-    };
     const extractElementLabelText = (element) => {
       const tagName = extractElementTagName(element);
-      const componentName = extractNearestComponentName(element);
+      const componentName = getNearestComponentName(element);
       if (tagName && componentName) {
         return `<${tagName}> in ${componentName}`;
       }
@@ -1458,8 +1228,6 @@ ${context}
       } catch {
       }
     };
-    const isExtensionEnvironment = () => window.__REACT_GRAB_EXTENSION_ACTIVE__ === true || options.isExtension === true;
-    const isExtensionTextOnlyMode = () => isExtensionEnvironment() && !isLocalhost();
     const executeCopyOperation = async (positionX, positionY, operation) => {
       setCopyStartX(positionX);
       setCopyStartY(positionY);
@@ -1485,39 +1253,37 @@ ${context}
       return element.textContent ?? "";
     };
     const createCombinedTextContent = (elements) => elements.map((element) => extractElementTextContent(element).trim()).filter((textContent) => textContent.length > 0).join("\n\n");
-    const createCombinedMarkdownContent = (elements) => elements.map((element) => elementToMarkdown(element).trim()).filter((markdownContent) => markdownContent.length > 0).join("\n\n");
-    const copySingleElementToClipboard = async (targetElement2) => {
-      showTemporaryGrabbedBox(createElementBounds(targetElement2));
-      await new Promise((resolve) => requestAnimationFrame(resolve));
+    const tryCopyWithFallback = async (elements) => {
       let didCopy = false;
       try {
-        if (isExtensionTextOnlyMode()) {
-          const markdownContent = createCombinedMarkdownContent([targetElement2]);
-          if (markdownContent.length > 0) {
-            didCopy = await copyContent(markdownContent, options.playCopySound ? playCopySound : void 0);
-          }
-        } else {
-          const content = await getHTMLSnippet(targetElement2);
-          const plainTextContent = wrapInSelectedElementTags(content);
-          const htmlContent = createStructuredClipboardHtmlBlob([{
-            tagName: extractElementTagName(targetElement2),
-            content,
-            computedStyles: extractRelevantComputedStyles(targetElement2)
-          }]);
-          didCopy = await copyContent([plainTextContent, htmlContent], options.playCopySound ? playCopySound : void 0);
-          if (!didCopy) {
-            const plainTextContentOnly = createCombinedTextContent([targetElement2]);
-            if (plainTextContentOnly.length > 0) {
-              didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
-            }
+        const elementSnippetResults = await Promise.allSettled(elements.map(async (element) => `## HTML Frame:
+${getHTMLPreview(element)}
+
+## Code Location:
+${formatStack(await getStack(element))}`));
+        const elementSnippets = elementSnippetResults.map((result) => result.status === "fulfilled" ? result.value : "").filter((snippet) => snippet.trim());
+        if (elementSnippets.length > 0) {
+          const plainTextContent = elementSnippets.map((snippet) => wrapInSelectedElementTags(snippet)).join("\n\n");
+          didCopy = await copyContent(plainTextContent, options.playCopySound ? playCopySound : void 0);
+        }
+        if (!didCopy) {
+          const plainTextContentOnly = createCombinedTextContent(elements);
+          if (plainTextContentOnly.length > 0) {
+            didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
           }
         }
       } catch {
-        const plainTextContentOnly = createCombinedTextContent([targetElement2]);
+        const plainTextContentOnly = createCombinedTextContent(elements);
         if (plainTextContentOnly.length > 0) {
           didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
         }
       }
+      return didCopy;
+    };
+    const copySingleElementToClipboard = async (targetElement2) => {
+      showTemporaryGrabbedBox(createElementBounds(targetElement2));
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const didCopy = await tryCopyWithFallback([targetElement2]);
       if (didCopy) {
         showTemporarySuccessLabel(extractElementLabelText(targetElement2));
       }
@@ -1529,40 +1295,7 @@ ${context}
         showTemporaryGrabbedBox(createElementBounds(element));
       }
       await new Promise((resolve) => requestAnimationFrame(resolve));
-      let didCopy = false;
-      try {
-        if (isExtensionTextOnlyMode()) {
-          const markdownContent = createCombinedMarkdownContent(targetElements);
-          if (markdownContent.length > 0) {
-            didCopy = await copyContent(markdownContent, options.playCopySound ? playCopySound : void 0);
-          }
-        } else {
-          const elementSnippetResults = await Promise.allSettled(targetElements.map((element) => getHTMLSnippet(element)));
-          const elementSnippets = elementSnippetResults.map((result) => result.status === "fulfilled" ? result.value : "").filter((snippet) => snippet.trim());
-          if (elementSnippets.length > 0) {
-            const plainTextContent = elementSnippets.map((snippet) => wrapInSelectedElementTags(snippet)).join("\n\n");
-            const structuredElements = elementSnippets.map((content, elementIndex) => ({
-              tagName: extractElementTagName(targetElements[elementIndex]),
-              content,
-              computedStyles: extractRelevantComputedStyles(targetElements[elementIndex])
-            }));
-            const htmlContent = createStructuredClipboardHtmlBlob(structuredElements);
-            didCopy = await copyContent([plainTextContent, htmlContent], options.playCopySound ? playCopySound : void 0);
-            if (!didCopy) {
-              const plainTextContentOnly = createCombinedTextContent(targetElements);
-              if (plainTextContentOnly.length > 0) {
-                didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
-              }
-            }
-          } else {
-            const plainTextContentOnly = createCombinedTextContent(targetElements);
-            if (plainTextContentOnly.length > 0) {
-              didCopy = await copyContent(plainTextContentOnly, options.playCopySound ? playCopySound : void 0);
-            }
-          }
-        }
-      } catch {
-      }
+      const didCopy = await tryCopyWithFallback(targetElements);
       if (didCopy) {
         showTemporarySuccessLabel(`${targetElements.length} elements`);
       }
@@ -1586,7 +1319,6 @@ ${context}
         y: elementBounds.top
       };
     });
-    const DRAG_THRESHOLD_PX = 2;
     const calculateDragDistance = (endX, endY) => ({
       x: Math.abs(endX - dragStartX()),
       y: Math.abs(endY - dragStartY())
@@ -1638,36 +1370,28 @@ ${context}
       x: mouseX(),
       y: mouseY()
     });
-    const isSameAsLast = createMemo(() => Boolean(targetElement() && targetElement() === lastGrabbedElement()));
     createEffect(on(() => [targetElement(), lastGrabbedElement()], ([currentElement, lastElement]) => {
       if (lastElement && currentElement && lastElement !== currentElement) {
         setLastGrabbedElement(null);
       }
     }));
-    const progress = createMemo(() => {
-      const startTime = progressStartTime();
-      progressTick();
-      if (startTime === null) return 0;
-      const elapsedTime = Date.now() - startTime;
-      const normalizedTime = elapsedTime / options.keyHoldDuration;
-      const easedProgress = 1 - Math.exp(-normalizedTime);
-      const maxProgressBeforeCompletion = 0.95;
-      if (isCopying()) {
-        return Math.min(easedProgress, maxProgressBeforeCompletion);
-      }
-      return 1;
-    });
     const startProgressAnimation = () => {
-      setProgressStartTime(Date.now());
+      const startTime = Date.now();
+      setProgressStartTime(startTime);
       setShowProgressIndicator(false);
       progressDelayTimerId = window.setTimeout(() => {
         setShowProgressIndicator(true);
         progressDelayTimerId = null;
       }, PROGRESS_INDICATOR_DELAY_MS);
       const animateProgress = () => {
-        if (progressStartTime() === null) return;
-        setProgressTick((tick) => tick + 1);
-        const currentProgress = progress();
+        const currentStartTime = progressStartTime();
+        if (currentStartTime === null) return;
+        const elapsedTime = Date.now() - currentStartTime;
+        const normalizedTime = elapsedTime / options.keyHoldDuration;
+        const easedProgress = 1 - Math.exp(-normalizedTime);
+        const maxProgressBeforeCompletion = 0.95;
+        const currentProgress = isCopying() ? Math.min(easedProgress, maxProgressBeforeCompletion) : 1;
+        setProgress(currentProgress);
         if (currentProgress < 1) {
           progressAnimationId = requestAnimationFrame(animateProgress);
         }
@@ -1684,6 +1408,7 @@ ${context}
         progressDelayTimerId = null;
       }
       setProgressStartTime(null);
+      setProgress(1);
       setShowProgressIndicator(false);
     };
     const activateRenderer = () => {
@@ -1707,8 +1432,6 @@ ${context}
         mouseSettleTimerId = null;
       }
       setMouseHasSettled(false);
-      referenceMouseX = OFFSCREEN_POSITION;
-      referenceMouseY = OFFSCREEN_POSITION;
       stopProgressAnimation();
     };
     const abortController = new AbortController();
@@ -1775,34 +1498,14 @@ ${context}
     window.addEventListener("mousemove", (event) => {
       setMouseX(event.clientX);
       setMouseY(event.clientY);
-      if (referenceMouseX === OFFSCREEN_POSITION) {
-        referenceMouseX = event.clientX;
-        referenceMouseY = event.clientY;
-      }
-      const deltaX = event.clientX - referenceMouseX;
-      const deltaY = event.clientY - referenceMouseY;
-      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-      if (distance >= 200) {
-        if (mouseSettleTimerId !== null) {
-          window.clearTimeout(mouseSettleTimerId);
-        }
-        setMouseHasSettled(false);
-        referenceMouseX = event.clientX;
-        referenceMouseY = event.clientY;
-        mouseSettleTimerId = window.setTimeout(() => {
-          setMouseHasSettled(true);
-          referenceMouseX = mouseX();
-          referenceMouseY = mouseY();
-          mouseSettleTimerId = null;
-        }, 100);
-      } else if (mouseSettleTimerId === null && !mouseHasSettled()) {
-        mouseSettleTimerId = window.setTimeout(() => {
-          setMouseHasSettled(true);
-          referenceMouseX = mouseX();
-          referenceMouseY = mouseY();
-          mouseSettleTimerId = null;
-        }, 100);
+      if (mouseSettleTimerId !== null) {
+        window.clearTimeout(mouseSettleTimerId);
       }
+      setMouseHasSettled(false);
+      mouseSettleTimerId = window.setTimeout(() => {
+        setMouseHasSettled(true);
+        mouseSettleTimerId = null;
+      }, 300);
     }, {
       signal: eventListenerSignal
     });
@@ -1886,7 +1589,7 @@ ${context}
     const labelVisible = createMemo(() => {
       if (isCopying()) return true;
       if (successLabels().length > 0) return false;
-      return isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement());
+      return isRendererActive() && !isDragging() && Boolean(targetElement());
     });
     const progressVisible = createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
     const crosshairVisible = createMemo(() => isRendererActive() && !isDragging());
@@ -1924,7 +1627,10 @@ ${context}
       get labelVisible() {
         return labelVisible();
       },
-      labelZIndex: 2147483646,
+      labelZIndex: Z_INDEX_LABEL,
+      get labelShowHint() {
+        return mouseHasSettled();
+      },
       get progressVisible() {
         return progressVisible();
       },
@@ -1970,9 +1676,6 @@ ${context}
 // src/index.ts
 var globalApi = null;
 var getGlobalApi = () => globalApi;
-var EXTENSION_MARKER = "__REACT_GRAB_EXTENSION_ACTIVE__";
-if (!window[EXTENSION_MARKER]) {
-  globalApi = init();
-}
+globalApi = init();
 
-export { elementToMarkdown, getGlobalApi, htmlToMarkdown, init, playCopySound };
+export { getGlobalApi, init, playCopySound };