react-grab 0.0.39 → 0.0.41

package/dist/index.cjs

@@ -3,8 +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 source = require('bippy/source');
 
 /**
  * @license MIT
@@ -96,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) => {
@@ -178,7 +181,7 @@ var SelectionBox = (props) => {
     position: "fixed",
     "box-sizing": "border-box",
     "pointer-events": props.variant === "drag" ? "none" : "auto",
-    "z-index": "2147483646"
+    "z-index": props.variant === "grabbed" ? "2147483645" : "2147483646"
   };
   const variantStyle = () => {
     if (props.variant === "drag") {
@@ -190,10 +193,16 @@ var SelectionBox = (props) => {
         cursor: "crosshair"
       };
     }
+    if (props.variant === "selection") {
+      return {
+        border: "1px dashed rgba(210, 57, 192, 0.5)",
+        "background-color": "rgba(210, 57, 192, 0.08)"
+      };
+    }
     return {
       border: "1px solid rgb(210, 57, 192)",
-      "background-color": "rgba(210, 57, 192, 0.2)",
-      transition: props.variant === "grabbed" ? "opacity 0.3s ease-out" : void 0
+      "background-color": "rgba(210, 57, 192, 0.08)",
+      transition: "opacity 0.3s ease-out"
     };
   };
   return web.createComponent(solidJs.Show, {
@@ -256,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;
@@ -289,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) {
@@ -326,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);
@@ -460,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();
@@ -519,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);
@@ -545,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();
@@ -588,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() {
@@ -739,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 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 truncateString = (string, maxLength) => string.length > maxLength ? `${string.substring(0, maxLength)}...` : string;
-var isInternalComponent = (name) => !isCapitalized(name) || name.startsWith("_") || name.includes("Provider") && name.includes("Context");
-var getNearestComponentDisplayName = (element) => {
+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;
         }
       }
@@ -767,213 +797,95 @@ var getNearestComponentDisplayName = (element) => {
     },
     true
   );
-  return componentName;
+  return foundComponentName;
 };
-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;
-};
-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);
-  for (let i = 0; i < ancestors.length; i++) {
-    const indent2 = "  ".repeat(i);
-    const componentName = ancestorComponents[i];
-    const source = ancestorSources[i];
-    if (componentName && source && (i === 0 || ancestorComponents[i - 1] !== componentName)) {
-      lines.push(`${indent2}<${componentName} source="${source}">`);
+  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)`;
     }
-    lines.push(`${indent2}${formatElementOpeningTag(ancestors[i], true)}`);
-  }
-  const parent = element.parentElement;
-  let targetIndex = -1;
-  if (parent) {
-    const siblings = Array.from(parent.children);
-    targetIndex = siblings.indexOf(element);
-    if (targetIndex > 0) {
-      const indent2 = "  ".repeat(ancestors.length);
-      if (targetIndex <= 2) {
-        for (let i = 0; i < targetIndex; i++) {
-          const sibling = siblings[i];
-          const siblingId = extractSiblingIdentifier(sibling);
-          if (siblingId) {
-            lines.push(`${indent2}  ${formatElementOpeningTag(sibling, true)}`);
-            lines.push(`${indent2}  </${sibling.tagName.toLowerCase()}>`);
-          }
-        }
-      } else {
-        lines.push(
-          `${indent2}  ... (${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 indent = "  ".repeat(ancestors.length);
-  const lastAncestorComponent = ancestors.length > 0 ? ancestorComponents[ancestorComponents.length - 1] : null;
-  const showElementComponent = elementComponent && elementSource && elementComponent !== lastAncestorComponent;
-  if (showElementComponent) {
-    lines.push(`${indent}  <${elementComponent} used-at="${elementSource}">`);
-  }
-  lines.push(`${indent}  <!-- IMPORTANT: selected element -->`);
-  const textContent = extractTruncatedTextContent(element);
-  const childrenCount = element.children.length;
-  const elementIndent = `${indent}${showElementComponent ? "    " : "  "}`;
-  if (textContent && childrenCount === 0 && textContent.length < 40) {
-    lines.push(
-      `${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)}`);
-  }
-  if (showElementComponent) {
-    lines.push(`${indent}  </${elementComponent}>`);
+    attrsText += ` ${name}="${value}"`;
   }
-  if (parent && targetIndex >= 0) {
-    const siblings = Array.from(parent.children);
-    const siblingsAfter = siblings.length - targetIndex - 1;
-    if (siblingsAfter > 0) {
-      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 indent2 = "  ".repeat(i);
-    lines.push(`${indent2}${formatElementClosingTag(ancestors[i])}`);
-    const componentName = ancestorComponents[i];
-    const source = ancestorSources[i];
-    if (componentName && source && (i === ancestors.length - 1 || ancestorComponents[i + 1] !== componentName)) {
-      lines.push(`${indent2}</${componentName}>`);
-    }
+  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
@@ -993,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;
@@ -1148,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();
@@ -1164,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);
       }
     }
@@ -1222,14 +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]";
-};
-
 // src/core.tsx
-var PROGRESS_INDICATOR_DELAY_MS = 150;
 var init = (rawOptions) => {
   const options = {
     enabled: true,
@@ -1252,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);
@@ -1262,10 +1115,11 @@ 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);
+    const [isToggleMode, setIsToggleMode] = solidJs.createSignal(false);
     const [showProgressIndicator, setShowProgressIndicator] = solidJs.createSignal(false);
     const [didJustDrag, setDidJustDrag] = solidJs.createSignal(false);
     const [copyStartX, setCopyStartX] = solidJs.createSignal(OFFSCREEN_POSITION);
@@ -1308,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("_")) {
-            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}`;
       }
@@ -1378,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);
@@ -1388,6 +1195,13 @@ ${context}
       await operation().finally(() => {
         setIsCopying(false);
         stopProgressAnimation();
+        if (isToggleMode()) {
+          if (!isHoldingKeys()) {
+            deactivateRenderer();
+          } else {
+            setIsToggleMode(false);
+          }
+        }
       });
     };
     const hasInnerText = (element) => "innerText" in element;
@@ -1398,38 +1212,37 @@ ${context}
       return element.textContent ?? "";
     };
     const createCombinedTextContent = (elements) => elements.map((element) => extractElementTextContent(element).trim()).filter((textContent) => textContent.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 plainTextContent = createCombinedTextContent([targetElement2]);
-          if (plainTextContent.length > 0) {
-            didCopy = await copyContent(plainTextContent, 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));
       }
@@ -1441,40 +1254,7 @@ ${context}
         showTemporaryGrabbedBox(createElementBounds(element));
       }
       await new Promise((resolve) => requestAnimationFrame(resolve));
-      let didCopy = false;
-      try {
-        if (isExtensionTextOnlyMode()) {
-          const plainTextContent = createCombinedTextContent(targetElements);
-          if (plainTextContent.length > 0) {
-            didCopy = await copyContent(plainTextContent, 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`);
       }
@@ -1498,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())
@@ -1556,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);
         }
@@ -1596,6 +1368,7 @@ ${context}
         progressDelayTimerId = null;
       }
       setProgressStartTime(null);
+      setProgress(1);
       setShowProgressIndicator(false);
     };
     const activateRenderer = () => {
@@ -1604,6 +1377,7 @@ ${context}
       document.body.style.cursor = "crosshair";
     };
     const deactivateRenderer = () => {
+      setIsToggleMode(false);
       setIsHoldingKeys(false);
       setIsActivated(false);
       document.body.style.cursor = "";
@@ -1629,11 +1403,25 @@ ${context}
         deactivateRenderer();
         return;
       }
+      if (event.key === "Enter" && isHoldingKeys()) {
+        setIsToggleMode(true);
+        if (keydownSpamTimerId !== null) {
+          window.clearTimeout(keydownSpamTimerId);
+          keydownSpamTimerId = null;
+        }
+        if (!isActivated()) {
+          if (holdTimerId) window.clearTimeout(holdTimerId);
+          activateRenderer();
+          options.onActivate?.();
+        }
+        return;
+      }
       if (!options.allowActivationInsideInput && isKeyboardEventTriggeredByInput(event)) {
         return;
       }
       if (!isTargetKeyCombination(event)) return;
       if (isActivated()) {
+        if (isToggleMode()) return;
         if (keydownSpamTimerId !== null) {
           window.clearTimeout(keydownSpamTimerId);
         }
@@ -1654,13 +1442,15 @@ ${context}
         options.onActivate?.();
       }, options.keyHoldDuration);
     }, {
-      signal: eventListenerSignal
+      signal: eventListenerSignal,
+      capture: true
     });
     window.addEventListener("keyup", (event) => {
       if (!isHoldingKeys() && !isActivated()) return;
       const isReleasingModifier = !event.metaKey && !event.ctrlKey;
       const isReleasingC = event.key.toLowerCase() === "c";
       if (isReleasingC || isReleasingModifier) {
+        if (isToggleMode()) return;
         deactivateRenderer();
       }
     }, {
@@ -1742,9 +1532,17 @@ ${context}
       if (isRendererActive() || isCopying() || didJustDrag()) {
         event.preventDefault();
         event.stopPropagation();
-        if (didJustDrag()) {
+        const hadDrag = didJustDrag();
+        if (hadDrag) {
           setDidJustDrag(false);
         }
+        if (isToggleMode() && !isCopying()) {
+          if (!isHoldingKeys()) {
+            deactivateRenderer();
+          } else {
+            setIsToggleMode(false);
+          }
+        }
       }
     }, {
       signal: eventListenerSignal,
@@ -1767,10 +1565,14 @@ ${context}
       document.body.style.cursor = "";
     });
     const rendererRoot = mountRoot();
-    const selectionVisible = solidJs.createMemo(() => false);
+    const selectionVisible = solidJs.createMemo(() => isRendererActive() && !isDragging() && Boolean(targetElement()));
     const dragVisible = solidJs.createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
     const labelVariant = solidJs.createMemo(() => isCopying() ? "processing" : "hover");
-    const labelVisible = solidJs.createMemo(() => isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement()) || isCopying());
+    const labelVisible = solidJs.createMemo(() => {
+      if (isCopying()) return true;
+      if (successLabels().length > 0) return false;
+      return isRendererActive() && !isDragging() && mouseHasSettled() && (Boolean(targetElement()) && !isSameAsLast() || !targetElement());
+    });
     const progressVisible = solidJs.createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
     const crosshairVisible = solidJs.createMemo(() => isRendererActive() && !isDragging());
     web.render(() => web.createComponent(ReactGrabRenderer, {
@@ -1807,6 +1609,7 @@ ${context}
       get labelVisible() {
         return labelVisible();
       },
+      labelZIndex: Z_INDEX_LABEL,
       get progressVisible() {
         return progressVisible();
       },
@@ -1852,10 +1655,7 @@ ${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.getGlobalApi = getGlobalApi;
 exports.init = init;