react-grab 0.0.40 → 0.0.41

package/dist/index.cjs

@@ -3,13 +3,7 @@
 var web = require('solid-js/web');
 var solidJs = require('solid-js');
 var bippy = require('bippy');
-var source = require('bippy/dist/source');
-var finder = require('@medv/finder');
-var TurndownService = require('turndown');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var TurndownService__default = /*#__PURE__*/_interopDefault(TurndownService);
+var source = require('bippy/source');
 
 /**
  * @license MIT
@@ -101,8 +95,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) => {
@@ -267,30 +265,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__ */ web.template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
-var _tmpl$22 = /* @__PURE__ */ web.template(`<div style=margin-right:4px>Copied`);
-var _tmpl$32 = /* @__PURE__ */ web.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__ */ web.template(`<span style=font-variant-numeric:tabular-nums;font-size:10px;margin-left:4px;vertical-align:middle>`);
-var _tmpl$5 = /* @__PURE__ */ web.template(`<div style=margin-left:4px>to clipboard`);
-var _tmpl$6 = /* @__PURE__ */ web.template(`<div style="position:fixed;padding:2px 6px;background-color:#fde7f7;color:#b21c8e;border:1px solid #f7c5ec;border-radius:4px;font-size:11px;font-weight:500;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;pointer-events:none;transition:opacity 0.2s ease-in-out;display:flex;align-items:center;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap">`);
-var Label = (props) => {
-  const [opacity, setOpacity] = solidJs.createSignal(0);
-  const [positionTick, setPositionTick] = solidJs.createSignal(0);
-  let labelRef;
-  let currentX = props.x;
-  let currentY = props.y;
-  let targetX = props.x;
-  let targetY = props.y;
+var useAnimatedPosition = (options) => {
+  const lerpFactor = options.lerpFactor ?? 0.3;
+  const convergenceThreshold = options.convergenceThreshold ?? 0.5;
+  const [x, setX] = solidJs.createSignal(options.x());
+  const [y, setY] = solidJs.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;
@@ -300,36 +290,16 @@ var Label = (props) => {
     if (animationFrameId !== null) return;
     animationFrameId = requestAnimationFrame(animate);
   };
-  const updateTarget = () => {
-    targetX = props.x;
-    targetY = props.y;
+  solidJs.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();
-  };
-  solidJs.createEffect(solidJs.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);
-      solidJs.onCleanup(() => clearTimeout(fadeOutTimer));
-    }
-  }));
-  solidJs.createEffect(() => {
-    updateTarget();
   });
   solidJs.onCleanup(() => {
     if (animationFrameId !== null) {
@@ -337,34 +307,89 @@ var Label = (props) => {
       animationFrameId = null;
     }
   });
+  return { x, y };
+};
+var useFadeInOut = (options) => {
+  const [opacity, setOpacity] = solidJs.createSignal(0);
+  solidJs.createEffect(
+    solidJs.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);
+          solidJs.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__ */ web.template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
+var _tmpl$22 = /* @__PURE__ */ web.template(`<div style=margin-right:4px>Copied`);
+var _tmpl$32 = /* @__PURE__ */ web.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__ */ web.template(`<span style=font-variant-numeric:tabular-nums;font-size:10px;margin-left:4px;vertical-align:middle>`);
+var _tmpl$5 = /* @__PURE__ */ web.template(`<div style=margin-left:4px>to clipboard`);
+var _tmpl$6 = /* @__PURE__ */ web.template(`<div style="position:fixed;padding:2px 6px;background-color:#fde7f7;color:#b21c8e;border:1px solid #f7c5ec;border-radius:4px;font-size:11px;font-weight:500;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;pointer-events:none;transition:opacity 0.2s ease-in-out;display:flex;align-items:center;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden;text-overflow:ellipsis;white-space:nowrap">`);
+var 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);
@@ -471,21 +496,10 @@ var Label = (props) => {
   });
 };
 var _tmpl$7 = /* @__PURE__ */ web.template(`<div style="position:fixed;z-index:2147483647;pointer-events:none;transition:opacity 0.1s ease-in-out"><div style="width:32px;height:2px;background-color:rgba(178, 28, 142, 0.2);border-radius:1px;overflow:hidden;position:relative"><div style="height:100%;background-color:#b21c8e;border-radius:1px;transition:width 0.05s cubic-bezier(0.165, 0.84, 0.44, 1)">`);
-var useFadeInOut = (visible) => {
-  const [opacity, setOpacity] = solidJs.createSignal(0);
-  solidJs.createEffect(solidJs.on(() => visible, (isVisible) => {
-    if (isVisible !== false) {
-      requestAnimationFrame(() => {
-        setOpacity(1);
-      });
-    } else {
-      setOpacity(0);
-    }
-  }));
-  return opacity;
-};
 var ProgressIndicator = (props) => {
-  const opacity = useFadeInOut(props.visible);
+  const opacity = useFadeInOut({
+    visible: props.visible
+  });
   let progressIndicatorRef;
   const computedPosition = () => {
     const boundingRect = progressIndicatorRef?.getBoundingClientRect();
@@ -530,12 +544,11 @@ var Crosshair = (props) => {
   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);
@@ -556,39 +569,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();
-  };
   solidJs.createEffect(() => {
     setupCanvas();
     render2();
@@ -599,14 +585,12 @@ var Crosshair = (props) => {
     window.addEventListener("resize", handleResize);
     solidJs.onCleanup(() => {
       window.removeEventListener("resize", handleResize);
-      if (animationFrameId !== null) {
-        cancelAnimationFrame(animationFrameId);
-        animationFrameId = null;
-      }
     });
   });
   solidJs.createEffect(() => {
-    updateTarget();
+    position.x();
+    position.y();
+    render2();
   });
   return web.createComponent(solidJs.Show, {
     get when() {
@@ -750,27 +734,62 @@ var ReactGrabRenderer = (props) => {
 var isCapitalized = (value) => value.length > 0 && /^[A-Z]/.test(value);
 
 // src/instrumentation.ts
-bippy.instrument({
-  onCommitFiberRoot(_, fiberRoot) {
-    bippy._fiberRoots.add(fiberRoot);
-  }
-});
-var generateCSSSelector = (element) => {
-  return finder.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 = bippy.getFiberFromHostInstance(element);
   if (!fiber) return null;
-  let componentName = null;
+  let foundComponentName = null;
   bippy.traverseFiber(
     fiber,
     (currentFiber) => {
       if (bippy.isCompositeFiber(currentFiber)) {
         const displayName = bippy.getDisplayName(currentFiber);
-        if (displayName && !isInternalComponent(displayName)) {
-          componentName = displayName;
+        if (displayName && checkIsSourceComponentName(displayName)) {
+          foundComponentName = displayName;
           return true;
         }
       }
@@ -778,231 +797,95 @@ var getNearestComponentDisplayName = (element) => {
     },
     true
   );
-  return componentName;
-};
-var formatComponentSourceLocation = async (el) => {
-  const source$1 = await source.getSourceFromHostInstance(el);
-  if (!source$1) return null;
-  const fileName = source.normalizeFileName(source$1.fileName);
-  if (source.isSourceFile(fileName)) {
-    return `${fileName}:${source$1.lineNumber}:${source$1.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$1.lineNumber}:${source$1.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 = bippy.getFiberFromHostInstance(element);
+  if (!maybeFiber || !bippy.isFiber(maybeFiber)) return [];
+  const fiber = bippy.getLatestFiber(maybeFiber);
+  const unresolvedStack = [];
+  bippy.traverseFiber(
+    fiber,
+    (currentFiber) => {
+      const displayName = bippy.isHostFiber(currentFiber) ? typeof currentFiber.type === "string" ? currentFiber.type : null : bippy.getDisplayName(currentFiber);
+      if (displayName && !checkIsInternalComponentName(displayName)) {
+        unresolvedStack.push({
+          name: displayName,
+          sourcePromise: source.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: source$1 }) => {
+    if (!source$1) return `  at ${name}`;
+    if (source$1.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 (!source.isSourceFile(source$1.fileName)) return `  at ${name}`;
+    const framePart = `  at ${name} in ${source.normalizeFileName(source$1.fileName)}`;
+    if (isNextProject) {
+      return `${framePart}:${source$1.lineNumber}:${source$1.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()}>`);
-          }
-        }
+  let topElements = 0;
+  let bottomElements = 0;
+  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++;
       } else {
-        lines.push(
-          `${indent}... (${siblingsAfter} element${siblingsAfter === 1 ? "" : "s"})`
-        );
+        bottomElements++;
       }
     }
   }
-  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]}>`);
-    }
+  let content = "";
+  if (topElements > 0) content += `
+  (${topElements} elements)`;
+  if (text.length > 0) content += `
+  ${text}`;
+  if (bottomElements > 0) content += `
+  (${bottomElements} elements)`;
+  if (content.length > 0) {
+    return `<${tagName}${attrsText}>${content}
+</${tagName}>`;
   }
-  lines.push("```");
-  return lines.join("\n");
+  return `<${tagName}${attrsText} />`;
 };
 
 // src/utils/copy-content.ts
@@ -1022,73 +905,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;
@@ -1177,13 +1000,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();
@@ -1193,26 +1030,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);
       }
     }
@@ -1251,70 +1083,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__default.default({
-      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,
@@ -1337,7 +1106,6 @@ var init = (rawOptions) => {
     };
   }
   return solidJs.createRoot((dispose) => {
-    const OFFSCREEN_POSITION = -1e3;
     const [isHoldingKeys, setIsHoldingKeys] = solidJs.createSignal(false);
     const [mouseX, setMouseX] = solidJs.createSignal(OFFSCREEN_POSITION);
     const [mouseY, setMouseY] = solidJs.createSignal(OFFSCREEN_POSITION);
@@ -1347,7 +1115,7 @@ var init = (rawOptions) => {
     const [isCopying, setIsCopying] = solidJs.createSignal(false);
     const [lastGrabbedElement, setLastGrabbedElement] = solidJs.createSignal(null);
     const [progressStartTime, setProgressStartTime] = solidJs.createSignal(null);
-    const [progressTick, setProgressTick] = solidJs.createSignal(0);
+    const [progress, setProgress] = solidJs.createSignal(0);
     const [grabbedBoxes, setGrabbedBoxes] = solidJs.createSignal([]);
     const [successLabels, setSuccessLabels] = solidJs.createSignal([]);
     const [isActivated, setIsActivated] = solidJs.createSignal(false);
@@ -1394,55 +1162,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 = bippy.getFiberFromHostInstance(element);
-      if (!fiber) return null;
-      let componentName = null;
-      bippy.traverseFiber(fiber, (currentFiber) => {
-        if (bippy.isCompositeFiber(currentFiber)) {
-          const displayName = bippy.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}`;
       }
@@ -1464,8 +1187,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);
@@ -1491,39 +1212,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));
       }
@@ -1535,40 +1254,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`);
       }
@@ -1592,7 +1278,6 @@ ${context}
         y: elementBounds.top
       };
     });
-    const DRAG_THRESHOLD_PX = 2;
     const calculateDragDistance = (endX, endY) => ({
       x: Math.abs(endX - dragStartX()),
       y: Math.abs(endY - dragStartY())
@@ -1650,30 +1335,23 @@ ${context}
         setLastGrabbedElement(null);
       }
     }));
-    const progress = solidJs.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);
         }
@@ -1690,6 +1368,7 @@ ${context}
         progressDelayTimerId = null;
       }
       setProgressStartTime(null);
+      setProgress(1);
       setShowProgressIndicator(false);
     };
     const activateRenderer = () => {
@@ -1930,7 +1609,7 @@ ${context}
       get labelVisible() {
         return labelVisible();
       },
-      labelZIndex: 2147483646,
+      labelZIndex: Z_INDEX_LABEL,
       get progressVisible() {
         return progressVisible();
       },
@@ -1976,13 +1655,8 @@ ${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();
 
-exports.elementToMarkdown = elementToMarkdown;
 exports.getGlobalApi = getGlobalApi;
-exports.htmlToMarkdown = htmlToMarkdown;
 exports.init = init;
 exports.playCopySound = playCopySound;