react-grab 0.0.48 → 0.0.50

package/dist/index.js

@@ -1,7 +1,5 @@
-import { delegateEvents, render, createComponent, memo, template, effect, style, insert, setStyleProperty, use } from 'solid-js/web';
-import { createRoot, createSignal, createMemo, createEffect, on, onCleanup, Show, For, onMount } from 'solid-js';
-import { isInstrumentationActive, getFiberFromHostInstance, traverseFiber, isCompositeFiber, getDisplayName, isFiber, getLatestFiber, isHostFiber } from 'bippy';
-import { getSource, isSourceFile, normalizeFileName } from 'bippy/source';
+import { init } from './chunk-73DWLENH.js';
+export { DEFAULT_THEME, formatStack, getHTMLPreview, getNearestComponentName, getStack, init, Ee as isInstrumentationActive } from './chunk-73DWLENH.js';
 
 /**
  * @license MIT
@@ -12,1900 +10,7 @@ import { getSource, isSourceFile, normalizeFileName } from 'bippy/source';
  * LICENSE file in the root directory of this source tree.
  */
 
-
-// src/utils/is-keyboard-event-triggered-by-input.ts
-var FORM_TAGS_AND_ROLES = [
-  "input",
-  "textarea",
-  "select",
-  "searchbox",
-  "slider",
-  "spinbutton",
-  "menuitem",
-  "menuitemcheckbox",
-  "menuitemradio",
-  "option",
-  "radio",
-  "textbox"
-];
-var isCustomElement = (element) => {
-  return Boolean(element.tagName) && !element.tagName.startsWith("-") && element.tagName.includes("-");
-};
-var isReadonlyArray = (value) => {
-  return Array.isArray(value);
-};
-var isHotkeyEnabledOnTagName = (event, enabledOnTags = false) => {
-  const { composed, target } = event;
-  let targetTagName;
-  let targetRole;
-  if (target instanceof HTMLElement && isCustomElement(target) && composed) {
-    const composedPath = event.composedPath();
-    const targetElement = composedPath[0];
-    if (targetElement instanceof HTMLElement) {
-      targetTagName = targetElement.tagName;
-      targetRole = targetElement.role;
-    }
-  } else if (target instanceof HTMLElement) {
-    targetTagName = target.tagName;
-    targetRole = target.role;
-  }
-  if (isReadonlyArray(enabledOnTags)) {
-    return Boolean(
-      targetTagName && enabledOnTags && enabledOnTags.some(
-        (tag) => typeof targetTagName === "string" && tag.toLowerCase() === targetTagName.toLowerCase() || tag === targetRole
-      )
-    );
-  }
-  return Boolean(targetTagName && enabledOnTags && enabledOnTags);
-};
-var isKeyboardEventTriggeredByInput = (event) => {
-  return isHotkeyEnabledOnTagName(event, FORM_TAGS_AND_ROLES);
-};
-
-// src/utils/mount-root.ts
-var ATTRIBUTE_NAME = "data-react-grab";
-var mountRoot = () => {
-  const mountedHost = document.querySelector(`[${ATTRIBUTE_NAME}]`);
-  if (mountedHost) {
-    const mountedRoot = mountedHost.shadowRoot?.querySelector(
-      `[${ATTRIBUTE_NAME}]`
-    );
-    if (mountedRoot instanceof HTMLDivElement && mountedHost.shadowRoot) {
-      return mountedRoot;
-    }
-  }
-  const host = document.createElement("div");
-  host.setAttribute(ATTRIBUTE_NAME, "true");
-  host.style.zIndex = "2147483646";
-  host.style.position = "fixed";
-  host.style.top = "0";
-  host.style.left = "0";
-  const shadowRoot = host.attachShadow({ mode: "open" });
-  const root = document.createElement("div");
-  root.setAttribute(ATTRIBUTE_NAME, "true");
-  shadowRoot.appendChild(root);
-  const doc = document.body ?? document.documentElement;
-  doc.appendChild(host);
-  return root;
-};
-
-// src/constants.ts
-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 AUTO_SCROLL_EDGE_THRESHOLD_PX = 25;
-var AUTO_SCROLL_SPEED_PX = 10;
-var Z_INDEX_LABEL = 2147483647;
-
-// src/utils/lerp.ts
-var lerp = (start, end, factor) => {
-  return start + (end - start) * factor;
-};
-
-// src/components/selection-box.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var SelectionBox = (props) => {
-  const [currentX, setCurrentX] = createSignal(props.bounds.x);
-  const [currentY, setCurrentY] = createSignal(props.bounds.y);
-  const [currentWidth, setCurrentWidth] = createSignal(props.bounds.width);
-  const [currentHeight, setCurrentHeight] = createSignal(props.bounds.height);
-  const [opacity, setOpacity] = createSignal(1);
-  let hasBeenRenderedOnce = false;
-  let animationFrameId = null;
-  let fadeTimerId = null;
-  let targetBounds = props.bounds;
-  let isAnimating = false;
-  const lerpFactor = () => {
-    if (props.lerpFactor !== void 0) return props.lerpFactor;
-    if (props.variant === "drag") return 0.7;
-    return SELECTION_LERP_FACTOR;
-  };
-  const startAnimation = () => {
-    if (isAnimating) return;
-    isAnimating = true;
-    const animate = () => {
-      const interpolatedX = lerp(currentX(), targetBounds.x, lerpFactor());
-      const interpolatedY = lerp(currentY(), targetBounds.y, lerpFactor());
-      const interpolatedWidth = lerp(currentWidth(), targetBounds.width, lerpFactor());
-      const interpolatedHeight = lerp(currentHeight(), targetBounds.height, lerpFactor());
-      setCurrentX(interpolatedX);
-      setCurrentY(interpolatedY);
-      setCurrentWidth(interpolatedWidth);
-      setCurrentHeight(interpolatedHeight);
-      const hasConvergedToTarget = Math.abs(interpolatedX - targetBounds.x) < 0.5 && Math.abs(interpolatedY - targetBounds.y) < 0.5 && Math.abs(interpolatedWidth - targetBounds.width) < 0.5 && Math.abs(interpolatedHeight - targetBounds.height) < 0.5;
-      if (!hasConvergedToTarget) {
-        animationFrameId = requestAnimationFrame(animate);
-      } else {
-        animationFrameId = null;
-        isAnimating = false;
-      }
-    };
-    animationFrameId = requestAnimationFrame(animate);
-  };
-  createEffect(on(() => props.bounds, (newBounds) => {
-    targetBounds = newBounds;
-    if (!hasBeenRenderedOnce) {
-      setCurrentX(targetBounds.x);
-      setCurrentY(targetBounds.y);
-      setCurrentWidth(targetBounds.width);
-      setCurrentHeight(targetBounds.height);
-      hasBeenRenderedOnce = true;
-      return;
-    }
-    startAnimation();
-  }));
-  createEffect(() => {
-    if (props.variant === "grabbed" && props.createdAt) {
-      fadeTimerId = window.setTimeout(() => {
-        setOpacity(0);
-      }, 1500);
-    }
-  });
-  onCleanup(() => {
-    if (animationFrameId !== null) {
-      cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-    if (fadeTimerId !== null) {
-      window.clearTimeout(fadeTimerId);
-      fadeTimerId = null;
-    }
-    isAnimating = false;
-  });
-  const baseStyle = {
-    position: "fixed",
-    "box-sizing": "border-box",
-    "pointer-events": props.variant === "drag" ? "none" : "auto",
-    "z-index": props.variant === "grabbed" ? "2147483645" : "2147483646"
-  };
-  const variantStyle = () => {
-    if (props.variant === "drag") {
-      return {
-        border: "1px dashed rgba(210, 57, 192, 0.4)",
-        "background-color": "rgba(210, 57, 192, 0.05)",
-        "will-change": "transform, width, height",
-        contain: "layout paint size",
-        cursor: "crosshair"
-      };
-    }
-    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.08)",
-      transition: "opacity 0.3s ease-out"
-    };
-  };
-  return createComponent(Show, {
-    get when() {
-      return props.visible !== false;
-    },
-    get children() {
-      var _el$ = _tmpl$();
-      effect((_$p) => style(_el$, {
-        ...baseStyle,
-        ...variantStyle(),
-        top: `${currentY()}px`,
-        left: `${currentX()}px`,
-        width: `${currentWidth()}px`,
-        height: `${currentHeight()}px`,
-        "border-radius": props.bounds.borderRadius,
-        transform: props.bounds.transform,
-        opacity: opacity()
-      }, _$p));
-      return _el$;
-    }
-  });
-};
-var _tmpl$2 = /* @__PURE__ */ template(`<span style="display:inline-block;width:8px;height:8px;border:1.5px solid rgb(210, 57, 192);border-top-color:transparent;border-radius:50%;margin-right:4px;vertical-align:middle">`);
-var Spinner = (props) => {
-  let spinnerRef;
-  onMount(() => {
-    if (spinnerRef) {
-      spinnerRef.animate([{
-        transform: "rotate(0deg)"
-      }, {
-        transform: "rotate(360deg)"
-      }], {
-        duration: 600,
-        easing: "linear",
-        iterations: Infinity
-      });
-    }
-  });
-  return (() => {
-    var _el$ = _tmpl$2();
-    var _ref$ = spinnerRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : spinnerRef = _el$;
-    effect((_$p) => style(_el$, {
-      ...props.style
-    }, _$p));
-    return _el$;
-  })();
-};
-
-// src/utils/get-clamped-element-position.ts
-var getClampedElementPosition = (positionLeft, positionTop, elementWidth, elementHeight) => {
-  const viewportWidth = window.innerWidth;
-  const viewportHeight = window.innerHeight;
-  const minLeft = VIEWPORT_MARGIN_PX;
-  const minTop = VIEWPORT_MARGIN_PX;
-  const maxLeft = viewportWidth - elementWidth - VIEWPORT_MARGIN_PX;
-  const maxTop = viewportHeight - elementHeight - VIEWPORT_MARGIN_PX;
-  const clampedLeft = Math.max(minLeft, Math.min(positionLeft, maxLeft));
-  const clampedTop = Math.max(minTop, Math.min(positionTop, maxTop));
-  return { left: clampedLeft, top: clampedTop };
-};
-var useAnimatedPosition = (options) => {
-  const lerpFactor = options.lerpFactor ?? 0.3;
-  const convergenceThreshold = options.convergenceThreshold ?? 0.5;
-  const [x, setX] = createSignal(options.x());
-  const [y, setY] = createSignal(options.y());
-  let targetX = options.x();
-  let targetY = options.y();
-  let animationFrameId = null;
-  let hasBeenRenderedOnce = false;
-  const animate = () => {
-    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;
-    }
-  };
-  const startAnimation = () => {
-    if (animationFrameId !== null) return;
-    animationFrameId = requestAnimationFrame(animate);
-  };
-  createEffect(() => {
-    targetX = options.x();
-    targetY = options.y();
-    if (!hasBeenRenderedOnce) {
-      setX(targetX);
-      setY(targetY);
-      hasBeenRenderedOnce = true;
-      return;
-    }
-    startAnimation();
-  });
-  onCleanup(() => {
-    if (animationFrameId !== null) {
-      cancelAnimationFrame(animationFrameId);
-      animationFrameId = null;
-    }
-  });
-  return { x, y };
-};
-var useFadeInOut = (options) => {
-  const [opacity, setOpacity] = createSignal(0);
-  createEffect(
-    on(
-      () => options.visible,
-      (isVisible) => {
-        if (isVisible !== false) {
-          requestAnimationFrame(() => {
-            setOpacity(1);
-          });
-        } else {
-          setOpacity(0);
-          return;
-        }
-        if (options.autoFadeOutAfter !== void 0) {
-          const fadeOutTimer = setTimeout(() => {
-            setOpacity(0);
-          }, options.autoFadeOutAfter);
-          onCleanup(() => clearTimeout(fadeOutTimer));
-        }
-      }
-    )
-  );
-  return opacity;
-};
-
-// src/utils/get-cursor-quadrants.ts
-var getCursorQuadrants = (cursorX, cursorY, elementWidth, elementHeight, offset) => {
-  return [
-    {
-      left: Math.round(cursorX) + offset,
-      top: Math.round(cursorY) + offset
-    },
-    {
-      left: Math.round(cursorX) - elementWidth - offset,
-      top: Math.round(cursorY) + offset
-    },
-    {
-      left: Math.round(cursorX) + offset,
-      top: Math.round(cursorY) - elementHeight - offset
-    },
-    {
-      left: Math.round(cursorX) - elementWidth - offset,
-      top: Math.round(cursorY) - elementHeight - offset
-    }
-  ];
-};
-
-// src/components/label.tsx
-var _tmpl$3 = /* @__PURE__ */ template(`<div style="position:absolute;top:0;left:0;bottom:0;background-color:rgba(178, 28, 142, 0.2);border-radius:3px;transition:width 0.1s ease-out;pointer-events:none">`);
-var _tmpl$22 = /* @__PURE__ */ template(`<span style=display:inline-block;margin-right:4px;font-weight:600>\u2713`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div style=margin-right:4px>Copied`);
-var _tmpl$4 = /* @__PURE__ */ template(`<span style="font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-variant-numeric:tabular-nums;vertical-align:middle">`);
-var _tmpl$5 = /* @__PURE__ */ template(`<span style=font-variant-numeric:tabular-nums;font-size:10px;margin-left:4px;vertical-align:middle>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<div style=margin-left:4px>to clipboard`);
-var _tmpl$7 = /* @__PURE__ */ template(`<div style=font-size:9px;opacity:0.6;text-align:center;margin-top:2px>Click or drag to select`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div style="position:fixed;background-color:#fde7f7;color:#b21c8e;border:1px solid #f7c5ec;border-radius:4px;font-size:11px;font-weight:500;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;pointer-events:none;transition:opacity 0.2s ease-in-out;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden"><div style="position:relative;padding:2px 6px;display:flex;flex-direction:column"><div style=display:flex;align-items:center;text-overflow:ellipsis;white-space:nowrap>`);
-var Label = (props) => {
-  let labelRef;
-  const position = useAnimatedPosition({
-    x: () => props.x,
-    y: () => props.y,
-    lerpFactor: 0.3
-  });
-  const opacity = useFadeInOut({
-    visible: props.visible,
-    autoFadeOutAfter: props.variant === "success" ? SUCCESS_LABEL_DURATION_MS : void 0
-  });
-  const labelBoundingRect = () => labelRef?.getBoundingClientRect();
-  const computedPosition = () => {
-    const boundingRect = labelBoundingRect();
-    if (!boundingRect) return {
-      left: position.x(),
-      top: position.y()
-    };
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    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 position2;
-      }
-    }
-    const fallback = getClampedElementPosition(quadrants[0].left, quadrants[0].top, boundingRect.width, boundingRect.height);
-    fallback.left += INDICATOR_CLAMP_PADDING_PX;
-    fallback.top += INDICATOR_CLAMP_PADDING_PX;
-    return fallback;
-  };
-  const labelSegments = () => {
-    const separator = " in ";
-    const separatorIndex = props.text.indexOf(separator);
-    if (separatorIndex === -1) {
-      return {
-        primary: props.text,
-        secondary: ""
-      };
-    }
-    return {
-      primary: props.text.slice(0, separatorIndex),
-      secondary: props.text.slice(separatorIndex)
-    };
-  };
-  return createComponent(Show, {
-    get when() {
-      return props.visible !== false;
-    },
-    get children() {
-      var _el$ = _tmpl$8(), _el$3 = _el$.firstChild, _el$4 = _el$3.firstChild;
-      var _ref$ = labelRef;
-      typeof _ref$ === "function" ? use(_ref$, _el$) : labelRef = _el$;
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return memo(() => props.variant === "processing")() && props.progress !== void 0;
-        },
-        get children() {
-          var _el$2 = _tmpl$3();
-          effect((_$p) => setStyleProperty(_el$2, "width", `${Math.min(100, Math.max(0, (props.progress ?? 0) * 100))}%`));
-          return _el$2;
-        }
-      }), _el$3);
-      insert(_el$4, createComponent(Show, {
-        get when() {
-          return props.variant === "processing";
-        },
-        get children() {
-          return createComponent(Spinner, {});
-        }
-      }), null);
-      insert(_el$4, createComponent(Show, {
-        get when() {
-          return props.variant === "success";
-        },
-        get children() {
-          return _tmpl$22();
-        }
-      }), null);
-      insert(_el$4, createComponent(Show, {
-        get when() {
-          return props.variant === "success";
-        },
-        get children() {
-          return _tmpl$32();
-        }
-      }), null);
-      insert(_el$4, createComponent(Show, {
-        get when() {
-          return props.variant === "processing";
-        },
-        children: "Please wait\u2026"
-      }), null);
-      insert(_el$4, createComponent(Show, {
-        get when() {
-          return props.variant !== "processing";
-        },
-        get children() {
-          return [(() => {
-            var _el$7 = _tmpl$4();
-            insert(_el$7, () => labelSegments().primary);
-            return _el$7;
-          })(), createComponent(Show, {
-            get when() {
-              return memo(() => props.variant === "hover")() && labelSegments().secondary !== "";
-            },
-            get children() {
-              var _el$8 = _tmpl$5();
-              insert(_el$8, () => labelSegments().secondary);
-              return _el$8;
-            }
-          })];
-        }
-      }), null);
-      insert(_el$4, createComponent(Show, {
-        get when() {
-          return props.variant === "success";
-        },
-        get children() {
-          return _tmpl$6();
-        }
-      }), null);
-      insert(_el$3, createComponent(Show, {
-        get when() {
-          return memo(() => props.variant === "hover")() && props.showHint;
-        },
-        get children() {
-          return _tmpl$7();
-        }
-      }), null);
-      effect((_p$) => {
-        var _v$ = `${computedPosition().top}px`, _v$2 = `${computedPosition().left}px`, _v$3 = props.zIndex?.toString() ?? "2147483647", _v$4 = opacity();
-        _v$ !== _p$.e && setStyleProperty(_el$, "top", _p$.e = _v$);
-        _v$2 !== _p$.t && setStyleProperty(_el$, "left", _p$.t = _v$2);
-        _v$3 !== _p$.a && setStyleProperty(_el$, "z-index", _p$.a = _v$3);
-        _v$4 !== _p$.o && setStyleProperty(_el$, "opacity", _p$.o = _v$4);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0
-      });
-      return _el$;
-    }
-  });
-};
-var _tmpl$9 = /* @__PURE__ */ template(`<canvas style=position:fixed;top:0;left:0;pointer-events:none;z-index:2147483645>`);
-var Crosshair = (props) => {
-  let canvasRef;
-  let context = null;
-  let width = 0;
-  let height = 0;
-  let dpr = 1;
-  const position = useAnimatedPosition({
-    x: () => props.mouseX,
-    y: () => props.mouseY,
-    lerpFactor: 0.3
-  });
-  const setupCanvas = () => {
-    if (!canvasRef) return;
-    dpr = Math.max(window.devicePixelRatio || 1, 2);
-    width = window.innerWidth;
-    height = window.innerHeight;
-    canvasRef.width = width * dpr;
-    canvasRef.height = height * dpr;
-    canvasRef.style.width = `${width}px`;
-    canvasRef.style.height = `${height}px`;
-    context = canvasRef.getContext("2d");
-    if (context) {
-      context.scale(dpr, dpr);
-    }
-  };
-  const render2 = () => {
-    if (!context) return;
-    context.clearRect(0, 0, width, height);
-    context.strokeStyle = "rgba(210, 57, 192)";
-    context.lineWidth = 1;
-    context.beginPath();
-    context.moveTo(position.x(), 0);
-    context.lineTo(position.x(), height);
-    context.moveTo(0, position.y());
-    context.lineTo(width, position.y());
-    context.stroke();
-  };
-  createEffect(() => {
-    setupCanvas();
-    render2();
-    const handleResize = () => {
-      setupCanvas();
-      render2();
-    };
-    window.addEventListener("resize", handleResize);
-    onCleanup(() => {
-      window.removeEventListener("resize", handleResize);
-    });
-  });
-  createEffect(() => {
-    position.x();
-    position.y();
-    render2();
-  });
-  return createComponent(Show, {
-    get when() {
-      return props.visible !== false;
-    },
-    get children() {
-      var _el$ = _tmpl$9();
-      var _ref$ = canvasRef;
-      typeof _ref$ === "function" ? use(_ref$, _el$) : canvasRef = _el$;
-      return _el$;
-    }
-  });
-};
-var _tmpl$10 = /* @__PURE__ */ template(`<div data-react-grab-input style="position:fixed;background-color:#fde7f7;color:#b21c8e;border:1px solid #f7c5ec;border-radius:4px;font-size:11px;font-weight:500;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;max-width:calc(100vw - (16px + env(safe-area-inset-left) + env(safe-area-inset-right)));overflow:hidden"><div style="position:relative;padding:2px 3px;display:flex;flex-direction:column;gap:2px"><textarea placeholder="e.g., Make this button larger"rows=1 style="width:240px;padding:2px 4px;background-color:#ffffff;color:#b21c8e;border:1px solid #f7c5ec;border-radius:3px;font-size:11px;line-height:1.2;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;outline:none;resize:vertical;min-height:18px"></textarea><div style=font-size:9px;opacity:0.6;text-align:center>Enter \u23CE to submit, Escape to cancel`);
-var InputOverlay = (props) => {
-  let containerRef;
-  let inputRef;
-  const position = useAnimatedPosition({
-    x: () => props.x,
-    y: () => props.y,
-    lerpFactor: 0.3
-  });
-  const containerBoundingRect = () => containerRef?.getBoundingClientRect();
-  const computedPosition = () => {
-    const boundingRect = containerBoundingRect();
-    if (!boundingRect) return {
-      left: position.x(),
-      top: position.y()
-    };
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    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 position2;
-      }
-    }
-    const fallback = getClampedElementPosition(quadrants[0].left, quadrants[0].top, boundingRect.width, boundingRect.height);
-    fallback.left += INDICATOR_CLAMP_PADDING_PX;
-    fallback.top += INDICATOR_CLAMP_PADDING_PX;
-    return fallback;
-  };
-  const handleKeyDown = (event) => {
-    if (event.code === "Enter" && !event.shiftKey) {
-      event.preventDefault();
-      event.stopPropagation();
-      props.onSubmit();
-    } else if (event.code === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      props.onCancel();
-    }
-  };
-  const handleInput = (event) => {
-    const target = event.target;
-    props.onInput(target.value);
-  };
-  createEffect(() => {
-    if (props.visible && inputRef) {
-      inputRef.focus();
-    } else if (!props.visible && inputRef) {
-      inputRef.blur();
-    }
-  });
-  return (() => {
-    var _el$ = _tmpl$10(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild; _el$3.nextSibling;
-    var _ref$ = containerRef;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : containerRef = _el$;
-    _el$3.$$keydown = handleKeyDown;
-    _el$3.$$input = handleInput;
-    var _ref$2 = inputRef;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$3) : inputRef = _el$3;
-    effect((_p$) => {
-      var _v$ = props.visible ? "block" : "none", _v$2 = `${computedPosition().top}px`, _v$3 = `${computedPosition().left}px`, _v$4 = props.zIndex?.toString() ?? "2147483647", _v$5 = props.visible ? "auto" : "none";
-      _v$ !== _p$.e && setStyleProperty(_el$, "display", _p$.e = _v$);
-      _v$2 !== _p$.t && setStyleProperty(_el$, "top", _p$.t = _v$2);
-      _v$3 !== _p$.a && setStyleProperty(_el$, "left", _p$.a = _v$3);
-      _v$4 !== _p$.o && setStyleProperty(_el$, "z-index", _p$.o = _v$4);
-      _v$5 !== _p$.i && setStyleProperty(_el$, "pointer-events", _p$.i = _v$5);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    });
-    effect(() => _el$3.value = props.value);
-    return _el$;
-  })();
-};
-delegateEvents(["input", "keydown"]);
-
-// src/components/renderer.tsx
-var ReactGrabRenderer = (props) => {
-  return [createComponent(Show, {
-    get when() {
-      return memo(() => !!props.selectionVisible)() && props.selectionBounds;
-    },
-    get children() {
-      return createComponent(SelectionBox, {
-        variant: "selection",
-        get bounds() {
-          return props.selectionBounds;
-        },
-        get visible() {
-          return props.selectionVisible;
-        }
-      });
-    }
-  }), createComponent(Show, {
-    get when() {
-      return memo(() => !!(props.crosshairVisible === true && props.mouseX !== void 0))() && props.mouseY !== void 0;
-    },
-    get children() {
-      return createComponent(Crosshair, {
-        get mouseX() {
-          return props.mouseX;
-        },
-        get mouseY() {
-          return props.mouseY;
-        },
-        visible: true
-      });
-    }
-  }), createComponent(Show, {
-    get when() {
-      return memo(() => !!props.dragVisible)() && props.dragBounds;
-    },
-    get children() {
-      return createComponent(SelectionBox, {
-        variant: "drag",
-        get bounds() {
-          return props.dragBounds;
-        },
-        get visible() {
-          return props.dragVisible;
-        }
-      });
-    }
-  }), createComponent(For, {
-    get each() {
-      return props.grabbedBoxes ?? [];
-    },
-    children: (box) => createComponent(SelectionBox, {
-      variant: "grabbed",
-      get bounds() {
-        return box.bounds;
-      },
-      get createdAt() {
-        return box.createdAt;
-      }
-    })
-  }), createComponent(Show, {
-    get when() {
-      return props.labelVariant !== "processing";
-    },
-    get children() {
-      return createComponent(For, {
-        get each() {
-          return props.successLabels ?? [];
-        },
-        children: (label) => createComponent(Label, {
-          variant: "success",
-          get text() {
-            return label.text;
-          },
-          get x() {
-            return props.mouseX ?? 0;
-          },
-          get y() {
-            return props.mouseY ?? 0;
-          }
-        })
-      });
-    }
-  }), createComponent(Show, {
-    get when() {
-      return memo(() => !!(props.labelVisible && props.labelVariant && props.labelText && props.labelX !== void 0))() && props.labelY !== void 0;
-    },
-    get children() {
-      return createComponent(Label, {
-        get variant() {
-          return props.labelVariant;
-        },
-        get text() {
-          return props.labelText;
-        },
-        get x() {
-          return props.labelX;
-        },
-        get y() {
-          return props.labelY;
-        },
-        get visible() {
-          return props.labelVisible;
-        },
-        get zIndex() {
-          return props.labelZIndex;
-        },
-        get progress() {
-          return props.progress;
-        },
-        get showHint() {
-          return props.labelShowHint;
-        }
-      });
-    }
-  }), createComponent(InputOverlay, {
-    get x() {
-      return props.inputX ?? 0;
-    },
-    get y() {
-      return props.inputY ?? 0;
-    },
-    get zIndex() {
-      return props.labelZIndex;
-    },
-    get value() {
-      return props.inputValue ?? "";
-    },
-    get visible() {
-      return props.inputVisible ?? false;
-    },
-    get onInput() {
-      return props.onInputChange;
-    },
-    get onSubmit() {
-      return props.onInputSubmit;
-    },
-    get onCancel() {
-      return props.onInputCancel;
-    }
-  })];
-};
-
-// src/utils/is-capitalized.ts
-var isCapitalized = (value) => value.length > 0 && /^[A-Z]/.test(value);
-
-// src/instrumentation.ts
-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 getNearestComponentName = (element) => {
-  if (!isInstrumentationActive()) return null;
-  try {
-    const fiber = getFiberFromHostInstance(element);
-    if (!fiber) return null;
-    let foundComponentName = null;
-    traverseFiber(
-      fiber,
-      (currentFiber) => {
-        if (isCompositeFiber(currentFiber)) {
-          const displayName = getDisplayName(currentFiber);
-          if (displayName && checkIsSourceComponentName(displayName)) {
-            foundComponentName = displayName;
-            return true;
-          }
-        }
-        return false;
-      },
-      true
-    );
-    return foundComponentName;
-  } catch {
-    return null;
-  }
-};
-var getStack = async (element) => {
-  if (!isInstrumentationActive()) return [];
-  try {
-    const maybeFiber = getFiberFromHostInstance(element);
-    if (!maybeFiber || !isFiber(maybeFiber)) return [];
-    const fiber = getLatestFiber(maybeFiber);
-    const unresolvedStack = [];
-    traverseFiber(
-      fiber,
-      (currentFiber) => {
-        const displayName = isHostFiber(currentFiber) ? typeof currentFiber.type === "string" ? currentFiber.type : null : getDisplayName(currentFiber);
-        if (displayName && !checkIsInternalComponentName(displayName)) {
-          unresolvedStack.push({
-            name: displayName,
-            sourcePromise: getSource(currentFiber)
-          });
-        }
-      },
-      true
-    );
-    const resolvedStack = await Promise.all(
-      unresolvedStack.map(async (frame) => ({
-        name: frame.name,
-        source: await frame.sourcePromise
-      }))
-    );
-    return resolvedStack.filter((frame) => frame.source !== null);
-  } catch {
-    return [];
-  }
-};
-var formatStack = (stack) => {
-  const isNextProject = checkIsNextProject();
-  return stack.map(({ name, source }) => {
-    if (!source) return `  at ${name}`;
-    if (source.fileName.startsWith("about://React/Server")) {
-      return `  at ${name} (Server)`;
-    }
-    if (!isSourceFile(source.fileName)) return `  at ${name}`;
-    const framePart = `  at ${name} in ${normalizeFileName(source.fileName)}`;
-    if (isNextProject) {
-      return `${framePart}:${source.lineNumber}:${source.columnNumber}`;
-    }
-    return framePart;
-  }).join("\n");
-};
-var getHTMLPreview = (element) => {
-  const tagName = element.tagName.toLowerCase();
-  if (!(element instanceof HTMLElement)) {
-    return `<${tagName} />`;
-  }
-  const 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)}...`;
-    }
-    attrsText += ` ${name}="${value}"`;
-  }
-  const topElements = [];
-  const bottomElements = [];
-  let foundFirstText = false;
-  const childNodes = Array.from(element.childNodes);
-  for (const node of childNodes) {
-    if (node.nodeType === Node.COMMENT_NODE) continue;
-    if (node.nodeType === Node.TEXT_NODE) {
-      if (node.textContent && node.textContent.trim().length > 0) {
-        foundFirstText = true;
-      }
-    } else if (node instanceof Element) {
-      if (!foundFirstText) {
-        topElements.push(node);
-      } else {
-        bottomElements.push(node);
-      }
-    }
-  }
-  const formatElements = (elements) => {
-    if (elements.length === 0) return "";
-    if (elements.length <= 2) {
-      return elements.map((el) => `<${el.tagName.toLowerCase()} ...>`).join("\n  ");
-    }
-    return `(${elements.length} elements)`;
-  };
-  let content = "";
-  const topElementsStr = formatElements(topElements);
-  if (topElementsStr) content += `
-  ${topElementsStr}`;
-  if (text.length > 0) {
-    const truncatedText = text.length > 100 ? `${text.slice(0, 100)}...` : text;
-    content += `
-  ${truncatedText}`;
-  }
-  const bottomElementsStr = formatElements(bottomElements);
-  if (bottomElementsStr) content += `
-  ${bottomElementsStr}`;
-  if (content.length > 0) {
-    return `<${tagName}${attrsText}>${content}
-</${tagName}>`;
-  }
-  return `<${tagName}${attrsText} />`;
-};
-
-// src/utils/copy-content.ts
-var waitForFocus = () => {
-  if (document.hasFocus()) {
-    return new Promise((resolve) => setTimeout(resolve, 50));
-  }
-  return new Promise((resolve) => {
-    const onFocus = () => {
-      window.removeEventListener("focus", onFocus);
-      setTimeout(resolve, 50);
-    };
-    window.addEventListener("focus", onFocus);
-    window.focus();
-  });
-};
-var copyContent = async (content, onSuccess) => {
-  await waitForFocus();
-  try {
-    try {
-      await navigator.clipboard.writeText(content);
-      onSuccess?.();
-      return true;
-    } catch {
-      const result = copyContentFallback(content, onSuccess);
-      return result;
-    }
-  } catch {
-    return false;
-  }
-};
-var copyContentFallback = (content, onSuccess) => {
-  if (!document.execCommand) return false;
-  const el = document.createElement("textarea");
-  el.value = String(content);
-  el.style.clipPath = "inset(50%)";
-  el.ariaHidden = "true";
-  const doc = document.body || document.documentElement;
-  doc.append(el);
-  try {
-    el.select();
-    const result = document.execCommand("copy");
-    if (result) onSuccess?.();
-    return result;
-  } finally {
-    el.remove();
-  }
-};
-
-// src/utils/play-copy-sound.ts
-var playCopySound = () => {
-  try {
-    const audioContext = new (window.AudioContext || // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access -- window.webkitAudioContext is not typed
-    window.webkitAudioContext)();
-    const masterGain = audioContext.createGain();
-    masterGain.connect(audioContext.destination);
-    const notes = [
-      { freq: 523.25, start: 0, duration: 0.1 },
-      { freq: 659.25, start: 0.05, duration: 0.1 },
-      { freq: 783.99, start: 0.1, duration: 0.15 }
-    ];
-    notes.forEach((note) => {
-      const oscillator = audioContext.createOscillator();
-      const gainNode = audioContext.createGain();
-      oscillator.connect(gainNode);
-      gainNode.connect(masterGain);
-      oscillator.frequency.value = note.freq;
-      oscillator.type = "triangle";
-      const startTime = audioContext.currentTime + note.start;
-      const peakTime = startTime + 0.01;
-      const endTime = startTime + note.duration;
-      gainNode.gain.setValueAtTime(0, startTime);
-      gainNode.gain.linearRampToValueAtTime(0.15, peakTime);
-      gainNode.gain.exponentialRampToValueAtTime(0.01, endTime);
-      oscillator.start(startTime);
-      oscillator.stop(endTime);
-    });
-  } catch {
-  }
-};
-
-// src/utils/is-element-visible.ts
-var isElementVisible = (element, computedStyle = window.getComputedStyle(element)) => {
-  return computedStyle.display !== "none" && computedStyle.visibility !== "hidden" && computedStyle.opacity !== "0";
-};
-
-// src/utils/is-valid-grabbable-element.ts
-var isValidGrabbableElement = (element) => {
-  if (element.closest(`[${ATTRIBUTE_NAME}]`)) {
-    return false;
-  }
-  const computedStyle = window.getComputedStyle(element);
-  if (!isElementVisible(element, computedStyle)) {
-    return false;
-  }
-  if (computedStyle.pointerEvents === "none") {
-    return false;
-  }
-  return true;
-};
-
-// src/utils/get-element-at-position.ts
-var getElementAtPosition = (clientX, clientY) => {
-  const elementsAtPoint = document.elementsFromPoint(clientX, clientY);
-  for (const candidateElement of elementsAtPoint) {
-    if (isValidGrabbableElement(candidateElement)) {
-      return candidateElement;
-    }
-  }
-  return null;
-};
-
-// 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 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();
-      if (tagName === "HTML" || tagName === "BODY") continue;
-    }
-    if (!isValidGrabbableElement2(candidateElement)) {
-      continue;
-    }
-    const elementRect = candidateElement.getBoundingClientRect();
-    const elementBounds = {
-      left: elementRect.left,
-      top: elementRect.top,
-      right: elementRect.left + elementRect.width,
-      bottom: elementRect.top + elementRect.height
-    };
-    if (shouldCheckCoverage) {
-      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 {
-      if (hasIntersection(elementBounds, dragBounds)) {
-        elements.push(candidateElement);
-      }
-    }
-  }
-  return elements;
-};
-var removeNestedElements = (elements) => {
-  return elements.filter((element) => {
-    return !elements.some(
-      (otherElement) => otherElement !== element && otherElement.contains(element)
-    );
-  });
-};
-var getElementsInDrag = (dragRect, isValidGrabbableElement2) => {
-  const elements = filterElementsInDrag(dragRect, isValidGrabbableElement2, true);
-  const uniqueElements = removeNestedElements(elements);
-  return uniqueElements;
-};
-var getElementsInDragLoose = (dragRect, isValidGrabbableElement2) => {
-  const elements = filterElementsInDrag(dragRect, isValidGrabbableElement2, false);
-  const uniqueElements = removeNestedElements(elements);
-  return uniqueElements;
-};
-
-// src/utils/create-element-bounds.ts
-var createElementBounds = (element) => {
-  const boundingRect = element.getBoundingClientRect();
-  const computedStyle = window.getComputedStyle(element);
-  return {
-    borderRadius: computedStyle.borderRadius || "0px",
-    height: boundingRect.height,
-    transform: computedStyle.transform || "none",
-    width: boundingRect.width,
-    x: boundingRect.left,
-    y: boundingRect.top
-  };
-};
-
-// src/core.tsx
-var hasInited = false;
-var init = (rawOptions) => {
-  const options = {
-    enabled: true,
-    keyHoldDuration: 300,
-    allowActivationInsideInput: true,
-    playCopySound: false,
-    ...rawOptions
-  };
-  if (options.enabled === false || hasInited) {
-    return {
-      activate: () => {
-      },
-      deactivate: () => {
-      },
-      toggle: () => {
-      },
-      isActive: () => false,
-      dispose: () => {
-      }
-    };
-  }
-  hasInited = true;
-  const logIntro = () => {
-    try {
-      const version = "0.0.48";
-      const logoSvg = `<svg width="294" height="294" viewBox="0 0 294 294" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_0_3)"><mask id="mask0_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="294" height="294"><path d="M294 0H0V294H294V0Z" fill="white"/></mask><g mask="url(#mask0_0_3)"><path d="M144.599 47.4924C169.712 27.3959 194.548 20.0265 212.132 30.1797C227.847 39.2555 234.881 60.3243 231.926 89.516C231.677 92.0069 231.328 94.5423 230.94 97.1058L228.526 110.14C228.517 110.136 228.505 110.132 228.495 110.127C228.486 110.165 228.479 110.203 228.468 110.24L216.255 105.741C216.256 105.736 216.248 105.728 216.248 105.723C207.915 103.125 199.421 101.075 190.82 99.5888L190.696 99.5588L173.526 97.2648L173.511 97.2631C173.492 97.236 173.467 97.2176 173.447 97.1905C163.862 96.2064 154.233 95.7166 144.599 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8624 138.391 86.939 147.193C90.8624 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245C115.749 197.245 115.758 197.246 115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.507 229.974L144.609 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.472 238.38C154.485 238.392 154.499 238.402 154.513 238.412L143.846 247.482L143.827 247.497C126.56 261.128 109.472 268.745 94.8019 268.745C88.5916 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3164 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3363 185.327 9.52301 167.51 9.52301 147.193C9.52301 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3164 60.3243 61.3496 39.2555 77.0657 30.1797C94.6494 20.0265 119.486 27.3959 144.599 47.4924ZM70.6423 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5176 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8516 207.742 83.0977 205.066 70.6423 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1787 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.9311 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.759 110.203C59.234 110.839 57.7378 111.475 56.27 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9104 147.193C67.822 135.23 63.7566 122.855 60.759 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.854 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.6291 47.6015 67.6975 64.5954 70.0424 87.9446L70.0416 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8263 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.773 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.29 38.512C183.321 38.512 169.34 44.4991 154.444 56.0153C163.93 64.9374 172.634 74.6557 180.462 85.064C193.375 86.6345 206.128 89.3102 218.584 93.0624C218.812 91.4325 219.003 89.8118 219.165 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.552 64.3097C138.104 70.2614 132.054 76.6306 126.443 83.3765C132.39 82.995 138.426 82.8046 144.552 82.8046C150.727 82.8046 156.778 83.0143 162.707 83.3765C157.08 76.6293 151.015 70.2596 144.552 64.3097Z" fill="white"/><path d="M144.598 47.4924C169.712 27.3959 194.547 20.0265 212.131 30.1797C227.847 39.2555 234.88 60.3243 231.926 89.516C231.677 92.0069 231.327 94.5423 230.941 97.1058L228.526 110.14L228.496 110.127C228.487 110.165 228.478 110.203 228.469 110.24L216.255 105.741L216.249 105.723C207.916 103.125 199.42 101.075 190.82 99.5888L190.696 99.5588L173.525 97.2648L173.511 97.263C173.492 97.236 173.468 97.2176 173.447 97.1905C163.863 96.2064 154.234 95.7166 144.598 95.7223C134.943 95.7162 125.295 96.219 115.693 97.2286C110.075 105.033 104.859 113.118 100.063 121.453C95.2426 129.798 90.8622 138.391 86.939 147.193C90.8622 155.996 95.2426 164.588 100.063 172.933C104.866 181.302 110.099 189.417 115.741 197.245L115.766 197.247L115.752 197.27L115.745 197.283L115.754 197.296L126.501 211.013L126.574 211.089C132.136 217.767 138.126 224.075 144.506 229.974L144.61 230.082L154.572 238.287C154.539 238.319 154.506 238.35 154.473 238.38L154.512 238.412L143.847 247.482L143.827 247.497C126.56 261.13 109.472 268.745 94.8018 268.745C88.5915 268.837 82.4687 267.272 77.0657 264.208C61.3496 255.132 54.3162 234.062 57.2707 204.871C57.528 202.307 57.8806 199.694 58.2904 197.054C28.3362 185.327 9.52298 167.51 9.52298 147.193C9.52298 129.042 24.2476 112.396 50.9901 100.375C53.3443 99.3163 55.7938 98.3058 58.2904 97.3526C57.8806 94.7023 57.528 92.0803 57.2707 89.516C54.3162 60.3243 61.3496 39.2555 77.0657 30.1797C94.6493 20.0265 119.486 27.3959 144.598 47.4924ZM70.6422 201.315C70.423 202.955 70.2229 204.566 70.0704 206.168C67.6686 229.567 72.5478 246.628 83.3615 252.988L83.5175 253.062C95.0399 259.717 114.015 254.426 134.782 238.38C125.298 229.45 116.594 219.725 108.764 209.314C95.8515 207.742 83.0977 205.066 70.6422 201.315ZM80.3534 163.438C77.34 171.677 74.8666 180.104 72.9484 188.664C81.1786 191.224 89.5657 193.247 98.0572 194.724L98.4618 194.813C95.2115 189.865 92.0191 184.66 88.931 179.378C85.8433 174.097 83.003 168.768 80.3534 163.438ZM60.7589 110.203C59.234 110.839 57.7378 111.475 56.2699 112.11C34.7788 121.806 22.3891 134.591 22.3891 147.193C22.3891 160.493 36.4657 174.297 60.7494 184.26C63.7439 171.581 67.8124 159.182 72.9103 147.193C67.822 135.23 63.7566 122.855 60.7589 110.203ZM98.4137 99.6404C89.8078 101.145 81.3075 103.206 72.9676 105.809C74.8539 114.203 77.2741 122.468 80.2132 130.554L80.3059 130.939C82.9938 125.6 85.8049 120.338 88.8834 115.008C91.9618 109.679 95.1544 104.569 98.4137 99.6404ZM94.9258 38.5215C90.9331 38.4284 86.9866 39.3955 83.4891 41.3243C72.629 47.6015 67.6975 64.5954 70.0424 87.9446L70.0415 88.2194C70.194 89.8208 70.3941 91.4325 70.6134 93.0624C83.0737 89.3364 95.8262 86.6703 108.736 85.0924C116.57 74.6779 125.28 64.9532 134.772 56.0249C119.877 44.5087 105.895 38.5215 94.9258 38.5215ZM205.737 41.3148C202.268 39.398 198.355 38.4308 194.394 38.5099L194.291 38.512C183.321 38.512 169.34 44.4991 154.443 56.0153C163.929 64.9374 172.634 74.6557 180.462 85.064C193.374 86.6345 206.129 89.3102 218.584 93.0624C218.813 91.4325 219.003 89.8118 219.166 88.2098C221.548 64.7099 216.65 47.6164 205.737 41.3148ZM144.551 64.3097C138.103 70.2614 132.055 76.6306 126.443 83.3765C132.389 82.995 138.427 82.8046 144.551 82.8046C150.727 82.8046 156.779 83.0143 162.707 83.3765C157.079 76.6293 151.015 70.2596 144.551 64.3097Z" fill="#FF40E0"/></g><mask id="mask1_0_3" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="102" y="84" width="161" height="162"><path d="M235.282 84.827L102.261 112.259L129.693 245.28L262.714 217.848L235.282 84.827Z" fill="white"/></mask><g mask="url(#mask1_0_3)"><path d="M136.863 129.916L213.258 141.224C220.669 142.322 222.495 152.179 215.967 155.856L187.592 171.843L184.135 204.227C183.339 211.678 173.564 213.901 169.624 207.526L129.021 141.831C125.503 136.14 130.245 128.936 136.863 129.916Z" fill="#FF40E0" stroke="#FF40E0" stroke-width="0.817337" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="clip0_0_3"><rect width="294" height="294" fill="white"/></clipPath></defs></svg>`;
-      const logoDataUri = `data:image/svg+xml;base64,${btoa(logoSvg)}`;
-      console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
-https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${logoDataUri}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`, "");
-      if (navigator.onLine) {
-        fetch("https://www.react-grab.com/api/version", {
-          referrerPolicy: "origin",
-          keepalive: true,
-          priority: "low",
-          cache: "no-store"
-        }).then((res) => res.text()).catch(() => null);
-      }
-    } catch {
-    }
-  };
-  logIntro();
-  return createRoot((dispose) => {
-    const [isHoldingKeys, setIsHoldingKeys] = createSignal(false);
-    const [mouseX, setMouseX] = createSignal(OFFSCREEN_POSITION);
-    const [mouseY, setMouseY] = createSignal(OFFSCREEN_POSITION);
-    const [isDragging, setIsDragging] = createSignal(false);
-    const [dragStartX, setDragStartX] = createSignal(OFFSCREEN_POSITION);
-    const [dragStartY, setDragStartY] = createSignal(OFFSCREEN_POSITION);
-    const [isCopying, setIsCopying] = createSignal(false);
-    const [lastGrabbedElement, setLastGrabbedElement] = createSignal(null);
-    const [progressStartTime, setProgressStartTime] = createSignal(null);
-    const [progress, setProgress] = createSignal(0);
-    const [grabbedBoxes, setGrabbedBoxes] = createSignal([]);
-    const [successLabels, setSuccessLabels] = createSignal([]);
-    const [isActivated, setIsActivated] = createSignal(false);
-    const [isToggleMode, setIsToggleMode] = createSignal(false);
-    const [showProgressIndicator, setShowProgressIndicator] = createSignal(false);
-    const [didJustDrag, setDidJustDrag] = createSignal(false);
-    const [copyStartX, setCopyStartX] = createSignal(OFFSCREEN_POSITION);
-    const [copyStartY, setCopyStartY] = createSignal(OFFSCREEN_POSITION);
-    const [mouseHasSettled, setMouseHasSettled] = createSignal(false);
-    const [viewportVersion, setViewportVersion] = createSignal(0);
-    const [isInputMode, setIsInputMode] = createSignal(false);
-    const [inputText, setInputText] = createSignal("");
-    let holdTimerId = null;
-    let progressAnimationId = null;
-    let progressDelayTimerId = null;
-    let keydownSpamTimerId = null;
-    let mouseSettleTimerId = null;
-    let autoScrollAnimationId = null;
-    const isRendererActive = createMemo(() => isActivated() && !isCopying());
-    const hasValidMousePosition = createMemo(() => mouseX() > OFFSCREEN_POSITION && mouseY() > OFFSCREEN_POSITION);
-    const isTargetKeyCombination = (event) => (
-      // NOTE: we use event.code instead of event.key for keyboard layout compatibility (e.g., AZERTY, QWERTZ)
-      (event.metaKey || event.ctrlKey) && event.code === "KeyC"
-    );
-    const getAutoScrollDirection = (clientX, clientY) => {
-      return {
-        top: clientY < AUTO_SCROLL_EDGE_THRESHOLD_PX,
-        bottom: clientY > window.innerHeight - AUTO_SCROLL_EDGE_THRESHOLD_PX,
-        left: clientX < AUTO_SCROLL_EDGE_THRESHOLD_PX,
-        right: clientX > window.innerWidth - AUTO_SCROLL_EDGE_THRESHOLD_PX
-      };
-    };
-    const showTemporaryGrabbedBox = (bounds, element) => {
-      const boxId = `grabbed-${Date.now()}-${Math.random()}`;
-      const createdAt = Date.now();
-      const newBox = {
-        id: boxId,
-        bounds,
-        createdAt,
-        element
-      };
-      const currentBoxes = grabbedBoxes();
-      setGrabbedBoxes([...currentBoxes, newBox]);
-      setTimeout(() => {
-        setGrabbedBoxes((previousBoxes) => previousBoxes.filter((box) => box.id !== boxId));
-      }, SUCCESS_LABEL_DURATION_MS);
-    };
-    const showTemporarySuccessLabel = (text) => {
-      const labelId = `success-${Date.now()}-${Math.random()}`;
-      setSuccessLabels((previousLabels) => [...previousLabels, {
-        id: labelId,
-        text
-      }]);
-      setTimeout(() => {
-        setSuccessLabels((previousLabels) => previousLabels.filter((label) => label.id !== labelId));
-      }, SUCCESS_LABEL_DURATION_MS);
-    };
-    const wrapInSelectedElementTags = (context) => `<selected_element>
-${context}
-</selected_element>`;
-    const extractElementTagName = (element) => (element.tagName || "").toLowerCase();
-    const extractElementLabelText = (element) => {
-      const tagName = extractElementTagName(element);
-      const componentName = getNearestComponentName(element);
-      if (tagName && componentName) {
-        return `<${tagName}> in ${componentName}`;
-      }
-      if (tagName) {
-        return `<${tagName}>`;
-      }
-      return "<element>";
-    };
-    const notifyElementsSelected = (elements) => {
-      try {
-        const elementsPayload = elements.map((element) => ({
-          tagName: extractElementTagName(element)
-        }));
-        window.dispatchEvent(new CustomEvent("react-grab:element-selected", {
-          detail: {
-            elements: elementsPayload
-          }
-        }));
-      } catch {
-      }
-    };
-    const executeCopyOperation = async (positionX, positionY, operation) => {
-      setCopyStartX(positionX);
-      setCopyStartY(positionY);
-      setIsCopying(true);
-      startProgressAnimation();
-      await operation().finally(() => {
-        setIsCopying(false);
-        stopProgressAnimation();
-        if (isToggleMode()) {
-          deactivateRenderer();
-        }
-      });
-    };
-    const hasInnerText = (element) => "innerText" in element;
-    const extractElementTextContent = (element) => {
-      if (hasInnerText(element)) {
-        return element.innerText;
-      }
-      return element.textContent ?? "";
-    };
-    const createCombinedTextContent = (elements) => elements.map((element) => extractElementTextContent(element).trim()).filter((textContent) => textContent.length > 0).join("\n\n");
-    const tryCopyWithFallback = async (elements, extraPrompt) => {
-      let didCopy = false;
-      const isReactProject = isInstrumentationActive();
-      try {
-        const elementSnippetResults = await Promise.allSettled(elements.map(async (element) => {
-          const htmlPreview = getHTMLPreview(element);
-          if (!isReactProject) {
-            return `## HTML Frame:
-${htmlPreview}`;
-          }
-          const stack = await getStack(element);
-          const formattedStack = formatStack(stack);
-          if (formattedStack) {
-            return `## HTML Frame:
-${htmlPreview}
-
-## Code Location:
-${formattedStack}`;
-          }
-          return `## HTML Frame:
-${htmlPreview}`;
-        }));
-        const elementSnippets = elementSnippetResults.map((result) => result.status === "fulfilled" ? result.value : "").filter((snippet) => snippet.trim());
-        if (elementSnippets.length > 0) {
-          const wrappedSnippets = elementSnippets.map((snippet) => wrapInSelectedElementTags(snippet)).join("\n\n");
-          const plainTextContent = extraPrompt ? `${extraPrompt}
-
-${wrappedSnippets}` : wrappedSnippets;
-          didCopy = await copyContent(plainTextContent, options.playCopySound ? playCopySound : void 0);
-        }
-        if (!didCopy) {
-          const plainTextContentOnly = createCombinedTextContent(elements);
-          if (plainTextContentOnly.length > 0) {
-            const contentWithPrompt = extraPrompt ? `${extraPrompt}
-
-${plainTextContentOnly}` : plainTextContentOnly;
-            didCopy = await copyContent(contentWithPrompt, options.playCopySound ? playCopySound : void 0);
-          }
-        }
-      } catch {
-        const plainTextContentOnly = createCombinedTextContent(elements);
-        if (plainTextContentOnly.length > 0) {
-          const contentWithPrompt = extraPrompt ? `${extraPrompt}
-
-${plainTextContentOnly}` : plainTextContentOnly;
-          didCopy = await copyContent(contentWithPrompt, options.playCopySound ? playCopySound : void 0);
-        }
-      }
-      return didCopy;
-    };
-    const copySingleElementToClipboard = async (targetElement2, extraPrompt) => {
-      showTemporaryGrabbedBox(createElementBounds(targetElement2), targetElement2);
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-      const didCopy = await tryCopyWithFallback([targetElement2], extraPrompt);
-      if (didCopy) {
-        showTemporarySuccessLabel(extractElementLabelText(targetElement2));
-      }
-      notifyElementsSelected([targetElement2]);
-    };
-    const copyMultipleElementsToClipboard = async (targetElements) => {
-      if (targetElements.length === 0) return;
-      for (const element of targetElements) {
-        showTemporaryGrabbedBox(createElementBounds(element), element);
-      }
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-      const didCopy = await tryCopyWithFallback(targetElements);
-      if (didCopy) {
-        showTemporarySuccessLabel(`${targetElements.length} elements`);
-      }
-      notifyElementsSelected(targetElements);
-    };
-    const targetElement = createMemo(() => {
-      if (!isRendererActive() || isDragging()) return null;
-      return getElementAtPosition(mouseX(), mouseY());
-    });
-    const selectionBounds = createMemo(() => {
-      viewportVersion();
-      const element = targetElement();
-      if (!element) return void 0;
-      const elementBounds = element.getBoundingClientRect();
-      const computedStyle = window.getComputedStyle(element);
-      return {
-        borderRadius: computedStyle.borderRadius || "0px",
-        height: elementBounds.height,
-        transform: computedStyle.transform || "none",
-        width: elementBounds.width,
-        x: elementBounds.left,
-        y: elementBounds.top
-      };
-    });
-    const calculateDragDistance = (endX, endY) => {
-      const endPageX = endX + window.scrollX;
-      const endPageY = endY + window.scrollY;
-      return {
-        x: Math.abs(endPageX - dragStartX()),
-        y: Math.abs(endPageY - dragStartY())
-      };
-    };
-    const isDraggingBeyondThreshold = createMemo(() => {
-      if (!isDragging()) return false;
-      const dragDistance = calculateDragDistance(mouseX(), mouseY());
-      return dragDistance.x > DRAG_THRESHOLD_PX || dragDistance.y > DRAG_THRESHOLD_PX;
-    });
-    const calculateDragRectangle = (endX, endY) => {
-      const endPageX = endX + window.scrollX;
-      const endPageY = endY + window.scrollY;
-      const dragPageX = Math.min(dragStartX(), endPageX);
-      const dragPageY = Math.min(dragStartY(), endPageY);
-      const dragWidth = Math.abs(endPageX - dragStartX());
-      const dragHeight = Math.abs(endPageY - dragStartY());
-      return {
-        x: dragPageX - window.scrollX,
-        y: dragPageY - window.scrollY,
-        width: dragWidth,
-        height: dragHeight
-      };
-    };
-    const dragBounds = createMemo(() => {
-      if (!isDraggingBeyondThreshold()) return void 0;
-      const drag = calculateDragRectangle(mouseX(), mouseY());
-      return {
-        borderRadius: "0px",
-        height: drag.height,
-        transform: "none",
-        width: drag.width,
-        x: drag.x,
-        y: drag.y
-      };
-    });
-    const labelText = createMemo(() => {
-      const element = targetElement();
-      return element ? extractElementLabelText(element) : "<element>";
-    });
-    const labelPosition = createMemo(() => isCopying() ? {
-      x: copyStartX(),
-      y: copyStartY()
-    } : {
-      x: mouseX(),
-      y: mouseY()
-    });
-    const progressPosition = createMemo(() => isCopying() ? {
-      x: copyStartX(),
-      y: copyStartY()
-    } : {
-      x: mouseX(),
-      y: mouseY()
-    });
-    createEffect(on(() => [targetElement(), lastGrabbedElement()], ([currentElement, lastElement]) => {
-      if (lastElement && currentElement && lastElement !== currentElement) {
-        setLastGrabbedElement(null);
-      }
-    }));
-    createEffect(on(() => viewportVersion(), () => {
-      const currentBoxes = grabbedBoxes();
-      if (currentBoxes.length === 0) return;
-      const updatedBoxes = currentBoxes.map((box) => ({
-        ...box,
-        bounds: createElementBounds(box.element)
-      }));
-      setGrabbedBoxes(updatedBoxes);
-    }));
-    const startProgressAnimation = () => {
-      const startTime = Date.now();
-      setProgressStartTime(startTime);
-      setShowProgressIndicator(false);
-      progressDelayTimerId = window.setTimeout(() => {
-        setShowProgressIndicator(true);
-        progressDelayTimerId = null;
-      }, PROGRESS_INDICATOR_DELAY_MS);
-      const animateProgress = () => {
-        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);
-        }
-      };
-      animateProgress();
-    };
-    const stopProgressAnimation = () => {
-      if (progressAnimationId !== null) {
-        cancelAnimationFrame(progressAnimationId);
-        progressAnimationId = null;
-      }
-      if (progressDelayTimerId !== null) {
-        window.clearTimeout(progressDelayTimerId);
-        progressDelayTimerId = null;
-      }
-      setProgressStartTime(null);
-      setProgress(1);
-      setShowProgressIndicator(false);
-    };
-    const startAutoScroll = () => {
-      const scroll = () => {
-        if (!isDragging()) {
-          stopAutoScroll();
-          return;
-        }
-        const direction = getAutoScrollDirection(mouseX(), mouseY());
-        if (direction.top) window.scrollBy(0, -AUTO_SCROLL_SPEED_PX);
-        if (direction.bottom) window.scrollBy(0, AUTO_SCROLL_SPEED_PX);
-        if (direction.left) window.scrollBy(-AUTO_SCROLL_SPEED_PX, 0);
-        if (direction.right) window.scrollBy(AUTO_SCROLL_SPEED_PX, 0);
-        if (direction.top || direction.bottom || direction.left || direction.right) {
-          autoScrollAnimationId = requestAnimationFrame(scroll);
-        } else {
-          autoScrollAnimationId = null;
-        }
-      };
-      scroll();
-    };
-    const stopAutoScroll = () => {
-      if (autoScrollAnimationId !== null) {
-        cancelAnimationFrame(autoScrollAnimationId);
-        autoScrollAnimationId = null;
-      }
-    };
-    const activateRenderer = () => {
-      stopProgressAnimation();
-      setIsActivated(true);
-      document.body.style.cursor = "crosshair";
-      options.onActivate?.();
-    };
-    const deactivateRenderer = () => {
-      setIsToggleMode(false);
-      setIsHoldingKeys(false);
-      setIsActivated(false);
-      setIsInputMode(false);
-      setInputText("");
-      document.body.style.cursor = "";
-      if (isDragging()) {
-        setIsDragging(false);
-        document.body.style.userSelect = "";
-      }
-      if (holdTimerId) window.clearTimeout(holdTimerId);
-      if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
-      if (mouseSettleTimerId) {
-        window.clearTimeout(mouseSettleTimerId);
-        mouseSettleTimerId = null;
-      }
-      setMouseHasSettled(false);
-      stopAutoScroll();
-      stopProgressAnimation();
-      options.onDeactivate?.();
-    };
-    const handleInputChange = (value) => {
-      setInputText(value);
-    };
-    const handleInputSubmit = () => {
-      if (!isInputMode()) return;
-      const element = targetElement();
-      const prompt = inputText().trim();
-      const currentX = mouseX();
-      const currentY = mouseY();
-      setIsInputMode(false);
-      setInputText("");
-      if (element) {
-        void executeCopyOperation(currentX, currentY, () => copySingleElementToClipboard(element, prompt || void 0)).then(() => {
-          deactivateRenderer();
-        });
-      } else {
-        deactivateRenderer();
-      }
-    };
-    const handleInputCancel = () => {
-      if (!isInputMode()) return;
-      deactivateRenderer();
-    };
-    const abortController = new AbortController();
-    const eventListenerSignal = abortController.signal;
-    window.addEventListener("keydown", (event) => {
-      if (event.code === "Escape" && isHoldingKeys()) {
-        if (isInputMode()) {
-          return;
-        }
-        deactivateRenderer();
-        return;
-      }
-      if (event.code === "Enter" && isHoldingKeys() && !isInputMode()) {
-        event.preventDefault();
-        event.stopPropagation();
-        setIsToggleMode(true);
-        if (keydownSpamTimerId !== null) {
-          window.clearTimeout(keydownSpamTimerId);
-          keydownSpamTimerId = null;
-        }
-        if (!isActivated()) {
-          if (holdTimerId) window.clearTimeout(holdTimerId);
-          activateRenderer();
-        }
-        setIsInputMode(true);
-        return;
-      }
-      if (!options.allowActivationInsideInput && isKeyboardEventTriggeredByInput(event)) {
-        return;
-      }
-      if (!isTargetKeyCombination(event)) return;
-      if (isActivated()) {
-        if (isToggleMode()) return;
-        if (keydownSpamTimerId !== null) {
-          window.clearTimeout(keydownSpamTimerId);
-        }
-        keydownSpamTimerId = window.setTimeout(() => {
-          deactivateRenderer();
-        }, 200);
-        return;
-      }
-      if (event.repeat) return;
-      if (holdTimerId !== null) {
-        window.clearTimeout(holdTimerId);
-      }
-      if (!isHoldingKeys()) {
-        setIsHoldingKeys(true);
-      }
-      holdTimerId = window.setTimeout(() => {
-        activateRenderer();
-      }, options.keyHoldDuration);
-    }, {
-      signal: eventListenerSignal,
-      capture: true
-    });
-    window.addEventListener("keyup", (event) => {
-      if (!isHoldingKeys() && !isActivated()) return;
-      const isReleasingModifier = !event.metaKey && !event.ctrlKey;
-      const isReleasingC = event.code === "KeyC";
-      if (isReleasingC || isReleasingModifier) {
-        if (isToggleMode()) return;
-        deactivateRenderer();
-      }
-    }, {
-      signal: eventListenerSignal,
-      capture: true
-    });
-    window.addEventListener("mousemove", (event) => {
-      setMouseX(event.clientX);
-      setMouseY(event.clientY);
-      if (mouseSettleTimerId !== null) {
-        window.clearTimeout(mouseSettleTimerId);
-      }
-      setMouseHasSettled(false);
-      mouseSettleTimerId = window.setTimeout(() => {
-        setMouseHasSettled(true);
-        mouseSettleTimerId = null;
-      }, 300);
-      if (isDragging()) {
-        const direction = getAutoScrollDirection(event.clientX, event.clientY);
-        const isNearEdge = direction.top || direction.bottom || direction.left || direction.right;
-        if (isNearEdge && autoScrollAnimationId === null) {
-          startAutoScroll();
-        } else if (!isNearEdge && autoScrollAnimationId !== null) {
-          stopAutoScroll();
-        }
-      }
-    }, {
-      signal: eventListenerSignal
-    });
-    window.addEventListener("mousedown", (event) => {
-      if (isInputMode()) {
-        const target = event.target;
-        const isClickingInput = target.closest("[data-react-grab-input]");
-        if (!isClickingInput) {
-          handleInputCancel();
-        }
-        return;
-      }
-      if (!isRendererActive() || isCopying()) return;
-      event.preventDefault();
-      setIsDragging(true);
-      setDragStartX(event.clientX + window.scrollX);
-      setDragStartY(event.clientY + window.scrollY);
-      document.body.style.userSelect = "none";
-    }, {
-      signal: eventListenerSignal
-    });
-    window.addEventListener("mouseup", (event) => {
-      if (!isDragging()) return;
-      const dragDistance = calculateDragDistance(event.clientX, event.clientY);
-      const wasDragGesture = dragDistance.x > DRAG_THRESHOLD_PX || dragDistance.y > DRAG_THRESHOLD_PX;
-      setIsDragging(false);
-      stopAutoScroll();
-      document.body.style.userSelect = "";
-      if (wasDragGesture) {
-        setDidJustDrag(true);
-        const dragRect = calculateDragRectangle(event.clientX, event.clientY);
-        const elements = getElementsInDrag(dragRect, isValidGrabbableElement);
-        if (elements.length > 0) {
-          void executeCopyOperation(event.clientX, event.clientY, () => copyMultipleElementsToClipboard(elements));
-        } else {
-          const fallbackElements = getElementsInDragLoose(dragRect, isValidGrabbableElement);
-          if (fallbackElements.length > 0) {
-            void executeCopyOperation(event.clientX, event.clientY, () => copyMultipleElementsToClipboard(fallbackElements));
-          }
-        }
-      } else {
-        const element = getElementAtPosition(event.clientX, event.clientY);
-        if (!element) return;
-        setLastGrabbedElement(element);
-        void executeCopyOperation(event.clientX, event.clientY, () => copySingleElementToClipboard(element));
-      }
-    }, {
-      signal: eventListenerSignal
-    });
-    window.addEventListener("click", (event) => {
-      if (isRendererActive() || isCopying() || didJustDrag()) {
-        event.preventDefault();
-        event.stopPropagation();
-        const hadDrag = didJustDrag();
-        if (hadDrag) {
-          setDidJustDrag(false);
-        }
-        if (isToggleMode() && !isCopying()) {
-          if (!isHoldingKeys()) {
-            deactivateRenderer();
-          } else {
-            setIsToggleMode(false);
-          }
-        }
-      }
-    }, {
-      signal: eventListenerSignal,
-      capture: true
-    });
-    document.addEventListener("visibilitychange", () => {
-      if (document.hidden) {
-        setGrabbedBoxes([]);
-      }
-    }, {
-      signal: eventListenerSignal
-    });
-    window.addEventListener("scroll", () => {
-      setViewportVersion((version) => version + 1);
-    }, {
-      signal: eventListenerSignal,
-      capture: true
-    });
-    window.addEventListener("resize", () => {
-      setViewportVersion((version) => version + 1);
-    }, {
-      signal: eventListenerSignal
-    });
-    onCleanup(() => {
-      abortController.abort();
-      if (holdTimerId) window.clearTimeout(holdTimerId);
-      if (keydownSpamTimerId) window.clearTimeout(keydownSpamTimerId);
-      if (mouseSettleTimerId) window.clearTimeout(mouseSettleTimerId);
-      stopAutoScroll();
-      stopProgressAnimation();
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
-    });
-    const rendererRoot = mountRoot();
-    const selectionVisible = createMemo(() => isRendererActive() && !isDragging() && Boolean(targetElement()));
-    const dragVisible = createMemo(() => isRendererActive() && isDraggingBeyondThreshold());
-    const labelVariant = createMemo(() => isCopying() ? "processing" : "hover");
-    const labelVisible = createMemo(() => {
-      if (isInputMode()) return false;
-      if (isCopying()) return true;
-      if (successLabels().length > 0) return false;
-      return isRendererActive() && !isDragging() && Boolean(targetElement());
-    });
-    const progressVisible = createMemo(() => isCopying() && showProgressIndicator() && hasValidMousePosition());
-    const crosshairVisible = createMemo(() => isRendererActive() && !isDragging());
-    const inputVisible = createMemo(() => isInputMode());
-    render(() => createComponent(ReactGrabRenderer, {
-      get selectionVisible() {
-        return selectionVisible();
-      },
-      get selectionBounds() {
-        return selectionBounds();
-      },
-      get dragVisible() {
-        return dragVisible();
-      },
-      get dragBounds() {
-        return dragBounds();
-      },
-      get grabbedBoxes() {
-        return grabbedBoxes();
-      },
-      get successLabels() {
-        return successLabels();
-      },
-      get labelVariant() {
-        return labelVariant();
-      },
-      get labelText() {
-        return labelText();
-      },
-      get labelX() {
-        return labelPosition().x;
-      },
-      get labelY() {
-        return labelPosition().y;
-      },
-      get labelVisible() {
-        return labelVisible();
-      },
-      labelZIndex: Z_INDEX_LABEL,
-      get labelShowHint() {
-        return mouseHasSettled();
-      },
-      get progressVisible() {
-        return progressVisible();
-      },
-      get progress() {
-        return progress();
-      },
-      get mouseX() {
-        return progressPosition().x;
-      },
-      get mouseY() {
-        return progressPosition().y;
-      },
-      get crosshairVisible() {
-        return crosshairVisible();
-      },
-      get inputVisible() {
-        return inputVisible();
-      },
-      get inputX() {
-        return mouseX();
-      },
-      get inputY() {
-        return mouseY();
-      },
-      get inputValue() {
-        return inputText();
-      },
-      onInputChange: handleInputChange,
-      onInputSubmit: handleInputSubmit,
-      onInputCancel: handleInputCancel
-    }), rendererRoot);
-    return {
-      activate: () => {
-        if (!isActivated()) {
-          activateRenderer();
-        }
-      },
-      deactivate: () => {
-        if (isActivated()) {
-          deactivateRenderer();
-        }
-      },
-      toggle: () => {
-        if (isActivated()) {
-          deactivateRenderer();
-        } else {
-          activateRenderer();
-        }
-      },
-      isActive: () => isActivated(),
-      dispose
-    };
-  });
-};
-
 // src/index.ts
-var globalApi = null;
-var getGlobalApi = () => globalApi;
-globalApi = init();
-
-export { getGlobalApi, init, playCopySound };
+if (typeof window !== "undefined") {
+  init();
+}