react-grab 0.1.18 → 0.1.20

package/dist/react.cjs

@@ -2148,11 +2148,11 @@ var init_store = __esm({
 });
 
 // src/constants.ts
-var VERSION, VIEWPORT_MARGIN_PX, OFFSCREEN_POSITION, SELECTION_LERP_FACTOR, FEEDBACK_DURATION_MS, FADE_DURATION_MS, FADE_COMPLETE_BUFFER_MS, DISMISS_ANIMATION_BUFFER_MS, KEYDOWN_SPAM_TIMEOUT_MS, BLUR_DEACTIVATION_THRESHOLD_MS, WINDOW_REFOCUS_GRACE_PERIOD_MS, INPUT_FOCUS_ACTIVATION_DELAY_MS, INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS, DEFERRED_EXECUTION_DELAY_MS, DEFAULT_KEY_HOLD_DURATION_MS, MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS, RECENT_THRESHOLD_MS, FINDER_TIMEOUT_MS, SELECTOR_ATTR_VALUE_MAX_LENGTH_CHARS, ACTION_CYCLE_IDLE_TRIGGER_MS, DRAG_THRESHOLD_PX, ELEMENT_DETECTION_THROTTLE_MS, COMPONENT_NAME_DEBOUNCE_MS, DRAG_PREVIEW_DEBOUNCE_MS, BOUNDS_CACHE_TTL_MS, BOUNDS_RECALC_INTERVAL_MS, AUTO_SCROLL_EDGE_THRESHOLD_PX, AUTO_SCROLL_SPEED_PX, Z_INDEX_HOST, Z_INDEX_LABEL, Z_INDEX_OVERLAY_CANVAS, DRAG_LERP_FACTOR, LERP_CONVERGENCE_THRESHOLD_PX, FADE_OUT_BUFFER_MS, MIN_DEVICE_PIXEL_RATIO, GRAB_PURPLE_RGB, OVERLAY_CROSSHAIR_COLOR, OVERLAY_BORDER_COLOR_DRAG, OVERLAY_FILL_COLOR_DRAG, OVERLAY_BORDER_COLOR_DEFAULT, OVERLAY_FILL_COLOR_DEFAULT, FROZEN_GLOW_COLOR, FROZEN_GLOW_EDGE_PX, ARROW_HEIGHT_PX, ARROW_MIN_SIZE_PX, ARROW_MAX_LABEL_WIDTH_RATIO, ARROW_CENTER_PERCENT, ARROW_LABEL_MARGIN_PX, LABEL_GAP_PX, PREVIEW_TEXT_MAX_LENGTH, PREVIEW_ATTR_VALUE_MAX_LENGTH, PREVIEW_MAX_ATTRS, PREVIEW_PRIORITY_ATTRS, SYMBOLICATION_TIMEOUT_MS, MODIFIER_KEYS, ARROW_KEYS, FROZEN_ELEMENT_ATTRIBUTE, USER_IGNORE_ATTRIBUTE, VIEWPORT_COVERAGE_THRESHOLD, OVERLAY_Z_INDEX_THRESHOLD, DEV_TOOLS_OVERLAY_Z_INDEX_THRESHOLD, TOOLTIP_DELAY_MS, TOOLTIP_GRACE_PERIOD_MS, TOOLBAR_SNAP_MARGIN_PX, TOOLBAR_FADE_IN_DELAY_MS, TOOLBAR_SNAP_ANIMATION_DURATION_MS, TOOLBAR_DRAG_THRESHOLD_PX, TOOLBAR_VELOCITY_MULTIPLIER_MS, TOOLBAR_COLLAPSED_SHORT_PX, TOOLBAR_COLLAPSED_LONG_PX, TOOLBAR_COLLAPSE_ANIMATION_DURATION_MS, TOGGLE_ANIMATION_BUFFER_MS, TOOLBAR_DEFAULT_WIDTH_PX, TOOLBAR_DEFAULT_HEIGHT_PX, TOOLBAR_SHAKE_TOOLTIP_DURATION_MS, DRAG_SELECTION_COVERAGE_THRESHOLD, DRAG_SELECTION_SAMPLE_SPACING_PX, DRAG_SELECTION_MIN_SAMPLES_PER_AXIS, DRAG_SELECTION_MAX_SAMPLES_PER_AXIS, DRAG_SELECTION_MAX_TOTAL_SAMPLE_POINTS, DRAG_SELECTION_EDGE_INSET_PX, MAX_ARROW_NAVIGATION_HISTORY, MAX_MEMORY_SESSIONS, MAX_TRANSFORM_ANCESTOR_DEPTH, TRANSFORM_EARLY_BAIL_DEPTH, ELEMENT_POSITION_CACHE_DISTANCE_THRESHOLD_PX, ELEMENT_POSITION_THROTTLE_MS, VISIBILITY_CACHE_TTL_MS, ZOOM_DETECTION_THRESHOLD, MOUNT_ROOT_RECHECK_DELAY_MS, MAX_HISTORY_ITEMS, MAX_SESSION_STORAGE_SIZE_BYTES, DROPDOWN_ANIMATION_DURATION_MS, DROPDOWN_HOVER_OPEN_DELAY_MS, DROPDOWN_VIEWPORT_PADDING_PX, DROPDOWN_ANCHOR_GAP_PX, SAFE_POLYGON_BUFFER_PX, DROPDOWN_ICON_SIZE_PX, DROPDOWN_MIN_WIDTH_PX, DROPDOWN_MAX_WIDTH_PX, TOOLBAR_MENU_MIN_WIDTH_PX, PANEL_STYLES, DROPDOWN_OFFSCREEN_POSITION, DROPDOWN_EDGE_TRANSFORM_ORIGIN, LOGO_SVG, NEXTJS_REVALIDATION_DELAY_MS, IME_COMPOSING_KEY_CODE, SELECTION_LABEL_OFFSCREEN_PX, RELEVANT_CSS_PROPERTIES;
+var VERSION, VIEWPORT_MARGIN_PX, OFFSCREEN_POSITION, SELECTION_LERP_FACTOR, FEEDBACK_DURATION_MS, FADE_DURATION_MS, FADE_COMPLETE_BUFFER_MS, DISMISS_ANIMATION_BUFFER_MS, KEYDOWN_SPAM_TIMEOUT_MS, BLUR_DEACTIVATION_THRESHOLD_MS, WINDOW_REFOCUS_GRACE_PERIOD_MS, INPUT_FOCUS_ACTIVATION_DELAY_MS, INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS, DEFERRED_EXECUTION_DELAY_MS, DEFAULT_KEY_HOLD_DURATION_MS, MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS, RECENT_THRESHOLD_MS, FINDER_TIMEOUT_MS, SELECTOR_ATTR_VALUE_MAX_LENGTH_CHARS, ACTION_CYCLE_IDLE_TRIGGER_MS, DRAG_THRESHOLD_PX, ELEMENT_DETECTION_THROTTLE_MS, PENDING_DETECTION_STALENESS_MS, COMPONENT_NAME_DEBOUNCE_MS, DRAG_PREVIEW_DEBOUNCE_MS, BOUNDS_CACHE_TTL_MS, BOUNDS_RECALC_INTERVAL_MS, AUTO_SCROLL_EDGE_THRESHOLD_PX, AUTO_SCROLL_SPEED_PX, Z_INDEX_HOST, Z_INDEX_LABEL, Z_INDEX_OVERLAY_CANVAS, DRAG_LERP_FACTOR, LERP_CONVERGENCE_THRESHOLD_PX, FADE_OUT_BUFFER_MS, MIN_DEVICE_PIXEL_RATIO, GRAB_PURPLE_RGB, OVERLAY_CROSSHAIR_COLOR, OVERLAY_BORDER_COLOR_DRAG, OVERLAY_FILL_COLOR_DRAG, OVERLAY_BORDER_COLOR_DEFAULT, OVERLAY_FILL_COLOR_DEFAULT, FROZEN_GLOW_COLOR, FROZEN_GLOW_EDGE_PX, ARROW_HEIGHT_PX, ARROW_MIN_SIZE_PX, ARROW_MAX_LABEL_WIDTH_RATIO, ARROW_CENTER_PERCENT, ARROW_LABEL_MARGIN_PX, LABEL_GAP_PX, PREVIEW_TEXT_MAX_LENGTH, PREVIEW_ATTR_VALUE_MAX_LENGTH, PREVIEW_MAX_ATTRS, PREVIEW_PRIORITY_ATTRS, SYMBOLICATION_TIMEOUT_MS, MODIFIER_KEYS, ARROW_KEYS, FROZEN_ELEMENT_ATTRIBUTE, USER_IGNORE_ATTRIBUTE, VIEWPORT_COVERAGE_THRESHOLD, OVERLAY_Z_INDEX_THRESHOLD, DEV_TOOLS_OVERLAY_Z_INDEX_THRESHOLD, TOOLTIP_DELAY_MS, TOOLTIP_GRACE_PERIOD_MS, TOOLBAR_SNAP_MARGIN_PX, TOOLBAR_FADE_IN_DELAY_MS, TOOLBAR_SNAP_ANIMATION_DURATION_MS, TOOLBAR_DRAG_THRESHOLD_PX, TOOLBAR_VELOCITY_MULTIPLIER_MS, TOOLBAR_COLLAPSED_SHORT_PX, TOOLBAR_COLLAPSED_LONG_PX, TOOLBAR_COLLAPSE_ANIMATION_DURATION_MS, TOGGLE_ANIMATION_BUFFER_MS, TOOLBAR_DEFAULT_WIDTH_PX, TOOLBAR_DEFAULT_HEIGHT_PX, TOOLBAR_SHAKE_TOOLTIP_DURATION_MS, DRAG_SELECTION_COVERAGE_THRESHOLD, DRAG_SELECTION_SAMPLE_SPACING_PX, DRAG_SELECTION_MIN_SAMPLES_PER_AXIS, DRAG_SELECTION_MAX_SAMPLES_PER_AXIS, DRAG_SELECTION_MAX_TOTAL_SAMPLE_POINTS, DRAG_SELECTION_EDGE_INSET_PX, MAX_ARROW_NAVIGATION_HISTORY, MAX_MEMORY_SESSIONS, MAX_TRANSFORM_ANCESTOR_DEPTH, TRANSFORM_EARLY_BAIL_DEPTH, ELEMENT_POSITION_CACHE_DISTANCE_THRESHOLD_PX, ELEMENT_POSITION_THROTTLE_MS, POINTER_EVENTS_RESUME_DEBOUNCE_MS, VISIBILITY_CACHE_TTL_MS, ZOOM_DETECTION_THRESHOLD, MOUNT_ROOT_RECHECK_DELAY_MS, MAX_HISTORY_ITEMS, MAX_SESSION_STORAGE_SIZE_BYTES, DROPDOWN_ANIMATION_DURATION_MS, DROPDOWN_HOVER_OPEN_DELAY_MS, DROPDOWN_VIEWPORT_PADDING_PX, DROPDOWN_ANCHOR_GAP_PX, SAFE_POLYGON_BUFFER_PX, DROPDOWN_ICON_SIZE_PX, DROPDOWN_MIN_WIDTH_PX, DROPDOWN_MAX_WIDTH_PX, TOOLBAR_MENU_MIN_WIDTH_PX, PANEL_STYLES, DROPDOWN_OFFSCREEN_POSITION, DROPDOWN_EDGE_TRANSFORM_ORIGIN, LOGO_SVG, NEXTJS_REVALIDATION_DELAY_MS, IME_COMPOSING_KEY_CODE, SELECTION_LABEL_OFFSCREEN_PX, RELEVANT_CSS_PROPERTIES;
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.18";
+    VERSION = "0.1.20";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2174,6 +2174,7 @@ var init_constants = __esm({
     ACTION_CYCLE_IDLE_TRIGGER_MS = 600;
     DRAG_THRESHOLD_PX = 2;
     ELEMENT_DETECTION_THROTTLE_MS = 32;
+    PENDING_DETECTION_STALENESS_MS = 200;
     COMPONENT_NAME_DEBOUNCE_MS = 100;
     DRAG_PREVIEW_DEBOUNCE_MS = 32;
     BOUNDS_CACHE_TTL_MS = 16;
@@ -2257,6 +2258,7 @@ var init_constants = __esm({
     TRANSFORM_EARLY_BAIL_DEPTH = 3;
     ELEMENT_POSITION_CACHE_DISTANCE_THRESHOLD_PX = 2;
     ELEMENT_POSITION_THROTTLE_MS = 16;
+    POINTER_EVENTS_RESUME_DEBOUNCE_MS = 100;
     VISIBILITY_CACHE_TTL_MS = 50;
     ZOOM_DETECTION_THRESHOLD = 0.01;
     MOUNT_ROOT_RECHECK_DELAY_MS = 1e3;
@@ -3174,6 +3176,29 @@ var init_mount_root = __esm({
   }
 });
 
+// src/utils/native-raf.ts
+var isClientSide, noopAnimationFrame, noopCancelFrame, nativeRequestAnimationFrame, nativeCancelAnimationFrame, waitUntilNextFrame;
+var init_native_raf = __esm({
+  "src/utils/native-raf.ts"() {
+    "use strict";
+    isClientSide = typeof window !== "undefined";
+    noopAnimationFrame = (_callback) => 0;
+    noopCancelFrame = (_id) => {
+    };
+    nativeRequestAnimationFrame = isClientSide ? (Object.getOwnPropertyDescriptor(
+      Window.prototype,
+      "requestAnimationFrame"
+    )?.value ?? window.requestAnimationFrame).bind(window) : noopAnimationFrame;
+    nativeCancelAnimationFrame = isClientSide ? (Object.getOwnPropertyDescriptor(
+      Window.prototype,
+      "cancelAnimationFrame"
+    )?.value ?? window.cancelAnimationFrame).bind(window) : noopCancelFrame;
+    waitUntilNextFrame = () => isClientSide ? new Promise(
+      (resolve) => nativeRequestAnimationFrame(() => resolve())
+    ) : Promise.resolve();
+  }
+});
+
 // ../../node_modules/.pnpm/bippy@0.5.30_@types+react@19.2.11_react@19.2.3/node_modules/bippy/dist/source.js
 var g3, _3, v2, y2, b2, x2, S2, ee2, C2, w2, te2, T2, ne2, E, re2, ie2, D, ae2, oe2, se2, O2, k2, A2, j2, M2, fe2, I2, L2, pe2, me2, R, z2, B2, he2, V2, H2, ge2, _e2, ve2, U2, W2, G2, K, q, ye2, J, Y, be2, X2, Z, xe2, Se2, Ce2, we2, Te2, Ee2, De2, Oe, Q, $2, je2, Me2, Ne2, Pe2;
 var init_source = __esm({
@@ -4357,6 +4382,7 @@ var init_overlay_canvas = __esm({
     init_solid();
     init_lerp();
     init_constants();
+    init_native_raf();
     _tmpl$ = /* @__PURE__ */ template(`<canvas data-react-grab-overlay-canvas style=position:fixed;top:0;left:0;pointer-events:none>`);
     LAYER_STYLES = {
       drag: {
@@ -4650,14 +4676,14 @@ var init_overlay_canvas = __esm({
         }
         compositeAllLayers();
         if (shouldContinueAnimating) {
-          animationFrameId = requestAnimationFrame(runAnimationFrame);
+          animationFrameId = nativeRequestAnimationFrame(runAnimationFrame);
         } else {
           animationFrameId = null;
         }
       };
       const scheduleAnimationFrame = () => {
         if (animationFrameId !== null) return;
-        animationFrameId = requestAnimationFrame(runAnimationFrame);
+        animationFrameId = nativeRequestAnimationFrame(runAnimationFrame);
       };
       const handleWindowResize = () => {
         initializeCanvas();
@@ -4817,7 +4843,7 @@ var init_overlay_canvas = __esm({
             currentDprMediaQuery.removeEventListener("change", handleDevicePixelRatioChange);
           }
           if (animationFrameId !== null) {
-            cancelAnimationFrame(animationFrameId);
+            nativeCancelAnimationFrame(animationFrameId);
           }
         });
       });
@@ -8344,16 +8370,7 @@ var init_selection_label = __esm({
         }
         return false;
       };
-      const measureContainer = () => {
-        if (containerRef && !isTagCurrentlyHovered) {
-          const rect = containerRef.getBoundingClientRect();
-          setMeasuredWidth(rect.width);
-          setMeasuredHeight(rect.height);
-        }
-        if (panelRef) {
-          setPanelWidth(panelRef.getBoundingClientRect().width);
-        }
-      };
+      let resizeObserver;
       const handleTagHoverChange = (hovered) => {
         isTagCurrentlyHovered = hovered;
       };
@@ -8377,7 +8394,27 @@ var init_selection_label = __esm({
         }
       };
       onMount(() => {
-        measureContainer();
+        resizeObserver = new ResizeObserver((entries) => {
+          for (const entry of entries) {
+            const rect = entry.target.getBoundingClientRect();
+            if (entry.target === containerRef && !isTagCurrentlyHovered) {
+              setMeasuredWidth(rect.width);
+              setMeasuredHeight(rect.height);
+            } else if (entry.target === panelRef) {
+              setPanelWidth(rect.width);
+            }
+          }
+        });
+        if (containerRef) {
+          const rect = containerRef.getBoundingClientRect();
+          setMeasuredWidth(rect.width);
+          setMeasuredHeight(rect.height);
+          resizeObserver.observe(containerRef);
+        }
+        if (panelRef) {
+          setPanelWidth(panelRef.getBoundingClientRect().width);
+          resizeObserver.observe(panelRef);
+        }
         window.addEventListener("scroll", handleViewportChange, true);
         window.addEventListener("resize", handleViewportChange);
         window.addEventListener("keydown", handleGlobalKeyDown, {
@@ -8385,6 +8422,7 @@ var init_selection_label = __esm({
         });
       });
       onCleanup(() => {
+        resizeObserver?.disconnect();
         window.removeEventListener("scroll", handleViewportChange, true);
         window.removeEventListener("resize", handleViewportChange);
         window.removeEventListener("keydown", handleGlobalKeyDown, {
@@ -8398,11 +8436,6 @@ var init_selection_label = __esm({
           lastValidPosition = null;
         }
       });
-      const sizeAffectingSignature = createMemo(() => [props.tagName, props.componentName, props.elementsCount, props.statusText, props.inputValue, props.hasAgent, props.isPromptMode, props.isPendingDismiss, props.error, props.isPendingAbort, props.visible, props.status, props.actionCycleState?.items, props.actionCycleState?.activeIndex, props.actionCycleState?.isVisible]);
-      createEffect(() => {
-        void sizeAffectingSignature();
-        queueMicrotask(measureContainer);
-      });
       createEffect(() => {
         if (props.isPromptMode && inputRef && props.onSubmit) {
           const focusTimeout = setTimeout(() => {
@@ -8605,9 +8638,6 @@ var init_selection_label = __esm({
                 get onFollowUpSubmit() {
                   return props.onFollowUpSubmit;
                 },
-                onCopyStateChange: () => {
-                  queueMicrotask(measureContainer);
-                },
                 onFadingChange: setIsInternalFading,
                 get onShowContextMenu() {
                   return props.onShowContextMenu;
@@ -9526,6 +9556,96 @@ var init_create_style_element = __esm({
   }
 });
 
+// src/utils/freeze-gsap.ts
+var isRafFrozen, pendingRafCallbacks, nextFakeRafId, knownAnimationCallbacks, nativeIdToHeldId, replayedFakeToNativeId, isAnimationLibraryCallback, freezeGsap, unfreezeGsap;
+var init_freeze_gsap = __esm({
+  "src/utils/freeze-gsap.ts"() {
+    "use strict";
+    init_native_raf();
+    isRafFrozen = false;
+    pendingRafCallbacks = /* @__PURE__ */ new Map();
+    nextFakeRafId = -1;
+    knownAnimationCallbacks = /* @__PURE__ */ new WeakSet();
+    nativeIdToHeldId = /* @__PURE__ */ new Map();
+    replayedFakeToNativeId = /* @__PURE__ */ new Map();
+    isAnimationLibraryCallback = (callback) => {
+      if (knownAnimationCallbacks.has(callback)) return true;
+      if (!isRafFrozen || !("gsapVersions" in window)) return false;
+      const stack = new Error().stack ?? "";
+      if (!stack.includes("_tick")) return false;
+      knownAnimationCallbacks.add(callback);
+      return true;
+    };
+    if (typeof window !== "undefined") {
+      window.requestAnimationFrame = (callback) => {
+        if (!isAnimationLibraryCallback(callback)) {
+          return nativeRequestAnimationFrame(callback);
+        }
+        if (isRafFrozen) {
+          const identifier = nextFakeRafId--;
+          pendingRafCallbacks.set(identifier, callback);
+          return identifier;
+        }
+        const nativeId = nativeRequestAnimationFrame(
+          (timestamp) => {
+            if (isRafFrozen) {
+              const identifier = nextFakeRafId--;
+              pendingRafCallbacks.set(identifier, callback);
+              nativeIdToHeldId.set(nativeId, identifier);
+              return;
+            }
+            callback(timestamp);
+          }
+        );
+        return nativeId;
+      };
+      window.cancelAnimationFrame = (identifier) => {
+        if (pendingRafCallbacks.has(identifier)) {
+          pendingRafCallbacks.delete(identifier);
+          return;
+        }
+        const replayed = replayedFakeToNativeId.get(identifier);
+        if (replayed !== void 0) {
+          nativeCancelAnimationFrame(replayed.nativeId);
+          replayedFakeToNativeId.delete(identifier);
+          return;
+        }
+        const heldId = nativeIdToHeldId.get(identifier);
+        if (heldId !== void 0) {
+          pendingRafCallbacks.delete(heldId);
+          nativeIdToHeldId.delete(identifier);
+          return;
+        }
+        nativeCancelAnimationFrame(identifier);
+      };
+    }
+    freezeGsap = () => {
+      if (isRafFrozen) return;
+      isRafFrozen = true;
+      pendingRafCallbacks.clear();
+      nativeIdToHeldId.clear();
+      for (const [fakeId, { nativeId, callback }] of replayedFakeToNativeId) {
+        nativeCancelAnimationFrame(nativeId);
+        pendingRafCallbacks.set(fakeId, callback);
+      }
+      replayedFakeToNativeId.clear();
+    };
+    unfreezeGsap = () => {
+      if (!isRafFrozen) return;
+      isRafFrozen = false;
+      for (const [fakeId, callback] of pendingRafCallbacks.entries()) {
+        const nativeId = nativeRequestAnimationFrame((timestamp) => {
+          replayedFakeToNativeId.delete(fakeId);
+          callback(timestamp);
+        });
+        replayedFakeToNativeId.set(fakeId, { nativeId, callback });
+      }
+      pendingRafCallbacks.clear();
+      nativeIdToHeldId.clear();
+    };
+  }
+});
+
 // src/utils/freeze-animations.ts
 var FROZEN_STYLES, GLOBAL_FREEZE_STYLES, styleElement, frozenElements, lastInputElements, globalAnimationStyleElement, ensureStylesInjected, areElementsSame, freezeAllAnimations, unfreezeAllAnimations, freezeAnimations, freezeGlobalAnimations, unfreezeGlobalAnimations;
 var init_freeze_animations = __esm({
@@ -9533,6 +9653,7 @@ var init_freeze_animations = __esm({
     "use strict";
     init_constants();
     init_create_style_element();
+    init_freeze_gsap();
     FROZEN_STYLES = `
 [${FROZEN_ELEMENT_ATTRIBUTE}],
 [${FROZEN_ELEMENT_ATTRIBUTE}] * {
@@ -9561,8 +9682,8 @@ var init_freeze_animations = __esm({
     freezeAllAnimations = (elements) => {
       if (elements.length === 0) return;
       if (areElementsSame(elements, lastInputElements)) return;
-      lastInputElements = [...elements];
       unfreezeAllAnimations();
+      lastInputElements = [...elements];
       ensureStylesInjected();
       frozenElements = elements;
       for (const element of frozenElements) {
@@ -9592,6 +9713,7 @@ var init_freeze_animations = __esm({
         "data-react-grab-global-freeze",
         GLOBAL_FREEZE_STYLES
       );
+      freezeGsap();
     };
     unfreezeGlobalAnimations = () => {
       if (!globalAnimationStyleElement) return;
@@ -9617,6 +9739,7 @@ var init_freeze_animations = __esm({
       }
       globalAnimationStyleElement.remove();
       globalAnimationStyleElement = null;
+      unfreezeGsap();
     };
   }
 });
@@ -9701,37 +9824,62 @@ var init_is_valid_grabbable_element = __esm({
         return cached.isVisible;
       }
       const computedStyle = window.getComputedStyle(element);
-      if (isDevToolsOverlay(computedStyle)) {
+      const isVisible = isElementVisible(element, computedStyle);
+      if (!isVisible) {
+        visibilityCache.set(element, { isVisible: false, timestamp: now });
         return false;
       }
-      if (isFullViewportOverlay(element, computedStyle)) {
-        return false;
+      const couldBeOverlay = element.clientWidth / window.innerWidth >= VIEWPORT_COVERAGE_THRESHOLD && element.clientHeight / window.innerHeight >= VIEWPORT_COVERAGE_THRESHOLD;
+      if (couldBeOverlay) {
+        if (isDevToolsOverlay(computedStyle)) {
+          return false;
+        }
+        if (isFullViewportOverlay(element, computedStyle)) {
+          return false;
+        }
       }
-      const isVisible = isElementVisible(element, computedStyle);
-      visibilityCache.set(element, { isVisible, timestamp: now });
-      return isVisible;
+      visibilityCache.set(element, { isVisible: true, timestamp: now });
+      return true;
     };
   }
 });
 
 // src/utils/get-element-at-position.ts
-var cache, isWithinThreshold, getElementsAtPoint, getElementAtPosition, clearElementPositionCache;
+var cache, resumeTimerId, scheduleResume, cancelScheduledResume, isWithinThreshold, getElementsAtPoint, getElementAtPosition, clearElementPositionCache;
 var init_get_element_at_position = __esm({
   "src/utils/get-element-at-position.ts"() {
     "use strict";
     init_is_valid_grabbable_element();
     init_constants();
     init_freeze_pseudo_states();
+    init_create_element_bounds();
     cache = null;
+    resumeTimerId = null;
+    scheduleResume = () => {
+      if (resumeTimerId !== null) {
+        clearTimeout(resumeTimerId);
+      }
+      resumeTimerId = setTimeout(() => {
+        resumeTimerId = null;
+        resumePointerEventsFreeze();
+      }, POINTER_EVENTS_RESUME_DEBOUNCE_MS);
+    };
+    cancelScheduledResume = () => {
+      if (resumeTimerId !== null) {
+        clearTimeout(resumeTimerId);
+        resumeTimerId = null;
+      }
+    };
     isWithinThreshold = (x1, y1, x22, y22) => {
       const deltaX = Math.abs(x1 - x22);
       const deltaY = Math.abs(y1 - y22);
       return deltaX <= ELEMENT_POSITION_CACHE_DISTANCE_THRESHOLD_PX && deltaY <= ELEMENT_POSITION_CACHE_DISTANCE_THRESHOLD_PX;
     };
     getElementsAtPoint = (clientX, clientY) => {
+      cancelScheduledResume();
       suspendPointerEventsFreeze();
       const elements = document.elementsFromPoint(clientX, clientY);
-      resumePointerEventsFreeze();
+      scheduleResume();
       return elements;
     };
     getElementAtPosition = (clientX, clientY) => {
@@ -9748,18 +9896,31 @@ var init_get_element_at_position = __esm({
           return cache.element;
         }
       }
-      const elementsAtPoint = getElementsAtPoint(clientX, clientY);
+      cancelScheduledResume();
+      suspendPointerEventsFreeze();
       let result = null;
-      for (const candidateElement of elementsAtPoint) {
-        if (isValidGrabbableElement(candidateElement)) {
-          result = candidateElement;
-          break;
+      const topElement = document.elementFromPoint(clientX, clientY);
+      if (topElement && isValidGrabbableElement(topElement)) {
+        result = topElement;
+      } else {
+        const elementsAtPoint = document.elementsFromPoint(clientX, clientY);
+        for (const candidateElement of elementsAtPoint) {
+          if (candidateElement !== topElement && isValidGrabbableElement(candidateElement)) {
+            result = candidateElement;
+            break;
+          }
         }
       }
+      if (result) {
+        createElementBounds(result);
+      }
+      scheduleResume();
       cache = { clientX, clientY, element: result, timestamp: now };
       return result;
     };
     clearElementPositionCache = () => {
+      cancelScheduledResume();
+      resumePointerEventsFreeze();
       cache = null;
     };
   }
@@ -10046,6 +10207,7 @@ var init_toolbar = __esm({
     init_freeze_pseudo_states();
     init_tooltip();
     init_toolbar_layout();
+    init_native_raf();
     _tmpl$27 = /* @__PURE__ */ template(`<span data-react-grab-unread-indicator class="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-[#404040]">`);
     _tmpl$28 = /* @__PURE__ */ template(`<div style=z-index:2147483647>Enable to continue`);
     _tmpl$35 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar style=z-index:2147483647><div><div><div><div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-toggle></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-history><span class="inline-flex relative"></span></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-copy-all></button></div></div><div><div><button data-react-grab-ignore-events data-react-grab-toolbar-menu></button></div></div></div><div class="relative shrink-0 overflow-visible"><button data-react-grab-ignore-events data-react-grab-toolbar-enabled><div><div></div></div></button></div></div></div><button data-react-grab-ignore-events data-react-grab-toolbar-collapse class="contain-layout shrink-0 flex items-center justify-center cursor-pointer interactive-scale">`);
@@ -10255,8 +10417,8 @@ var init_toolbar = __esm({
         const didPositionChange = clampedX !== currentPos.x || clampedY !== currentPos.y;
         if (didPositionChange) {
           setIsCollapseAnimating(true);
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
+          nativeRequestAnimationFrame(() => {
+            nativeRequestAnimationFrame(() => {
               setPosition({
                 x: clampedX,
                 y: clampedY
@@ -10564,7 +10726,7 @@ var init_toolbar = __esm({
             };
           };
           if (toggleAnimationRafId !== void 0) {
-            cancelAnimationFrame(toggleAnimationRafId);
+            nativeCancelAnimationFrame(toggleAnimationRafId);
           }
           if (isRapidRetoggle()) {
             const finalExpandDimension = isCurrentlyEnabled ? 0 : expandableDimension;
@@ -10582,14 +10744,14 @@ var init_toolbar = __esm({
                 const currentExpandDimension = isVerticalEdge ? expandableButtonsRef.getBoundingClientRect().height : expandableButtonsRef.getBoundingClientRect().width;
                 setPosition(computeClampedPosition(currentExpandDimension));
               }
-              toggleAnimationRafId = requestAnimationFrame(syncPositionWithGrid);
+              toggleAnimationRafId = nativeRequestAnimationFrame(syncPositionWithGrid);
             };
-            toggleAnimationRafId = requestAnimationFrame(syncPositionWithGrid);
+            toggleAnimationRafId = nativeRequestAnimationFrame(syncPositionWithGrid);
           }
           clearTimeout(toggleAnimationTimeout);
           toggleAnimationTimeout = setTimeout(() => {
             if (toggleAnimationRafId !== void 0) {
-              cancelAnimationFrame(toggleAnimationRafId);
+              nativeCancelAnimationFrame(toggleAnimationRafId);
               toggleAnimationRafId = void 0;
             }
             const finalExpandDimension = isCurrentlyEnabled ? 0 : expandableDimension;
@@ -10705,7 +10867,7 @@ var init_toolbar = __esm({
         setSnapEdge(snap.edge);
         setPositionRatio(ratio);
         setIsSnapping(true);
-        requestAnimationFrame(() => {
+        nativeRequestAnimationFrame(() => {
           const postRenderRect = containerRef?.getBoundingClientRect();
           if (postRenderRect) {
             expandedDimensions = {
@@ -10713,7 +10875,7 @@ var init_toolbar = __esm({
               height: postRenderRect.height
             };
           }
-          requestAnimationFrame(() => {
+          nativeRequestAnimationFrame(() => {
             const snappedPosition = getPositionFromEdgeAndRatio(snap.edge, ratio, expandedDimensions.width, expandedDimensions.height);
             setPosition(snappedPosition);
             saveAndNotify({
@@ -10939,7 +11101,7 @@ var init_toolbar = __esm({
         clearTimeout(toggleAnimationTimeout);
         clearTimeout(historyItemCountTimeout);
         if (toggleAnimationRafId !== void 0) {
-          cancelAnimationFrame(toggleAnimationRafId);
+          nativeCancelAnimationFrame(toggleAnimationRafId);
         }
         unfreezeUpdatesCallback?.();
         safePolygonTracker.stop();
@@ -11318,6 +11480,7 @@ var init_toolbar_menu = __esm({
     init_format_shortcut();
     init_is_event_from_overlay();
     init_resolve_action_enabled();
+    init_native_raf();
     _tmpl$29 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-toolbar-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div><div class="flex flex-col py-1">`);
     _tmpl$210 = /* @__PURE__ */ template(`<div><div>`);
     _tmpl$36 = /* @__PURE__ */ template(`<button data-react-grab-ignore-events class="contain-layout flex items-center justify-between w-full px-2 py-1 cursor-pointer transition-colors hover:bg-black/5 text-left border-none bg-transparent disabled:opacity-40 disabled:cursor-default disabled:hover:bg-transparent"><span class="text-[13px] leading-4 font-sans font-medium text-black">`);
@@ -11344,14 +11507,14 @@ var init_toolbar_menu = __esm({
           setLastAnchorEdge(anchor.edge);
           clearTimeout(exitAnimationTimeout);
           setShouldMount(true);
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
-          enterAnimationFrameId = requestAnimationFrame(() => {
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
+          enterAnimationFrameId = nativeRequestAnimationFrame(() => {
             measureContainer();
             void containerRef?.offsetHeight;
             setIsAnimatedIn(true);
           });
         } else {
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
           setIsAnimatedIn(false);
           exitAnimationTimeout = setTimeout(() => {
             setShouldMount(false);
@@ -11419,7 +11582,7 @@ var init_toolbar_menu = __esm({
             props.onDismiss();
           }
         };
-        const frameId = requestAnimationFrame(() => {
+        const frameId = nativeRequestAnimationFrame(() => {
           window.addEventListener("mousedown", handleClickOutside, {
             capture: true
           });
@@ -11431,9 +11594,9 @@ var init_toolbar_menu = __esm({
           capture: true
         });
         onCleanup(() => {
-          cancelAnimationFrame(frameId);
+          nativeCancelAnimationFrame(frameId);
           clearTimeout(exitAnimationTimeout);
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
           window.removeEventListener("mousedown", handleClickOutside, {
             capture: true
           });
@@ -11566,6 +11729,7 @@ var init_context_menu = __esm({
     init_get_tag_display();
     init_resolve_action_enabled();
     init_is_event_from_overlay();
+    init_native_raf();
     _tmpl$30 = /* @__PURE__ */ template(`<div class="flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5">`);
     _tmpl$211 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-context-menu class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none"style=z-index:2147483647;pointer-events:auto><div><div class="contain-layout shrink-0 flex items-center gap-1 pt-1.5 pb-1 w-fit h-fit px-2">`);
     _tmpl$37 = /* @__PURE__ */ template(`<span class="text-[11px] font-sans text-black/50 ml-4">`);
@@ -11588,7 +11752,7 @@ var init_context_menu = __esm({
       };
       createEffect(() => {
         if (isVisible()) {
-          requestAnimationFrame(measureContainer);
+          nativeRequestAnimationFrame(measureContainer);
         }
       });
       const computedPosition = () => {
@@ -11697,7 +11861,7 @@ var init_context_menu = __esm({
             runActionIfAllowed(modifierAction);
           }
         };
-        const frameId = requestAnimationFrame(() => {
+        const frameId = nativeRequestAnimationFrame(() => {
           window.addEventListener("mousedown", handleClickOutside, {
             capture: true
           });
@@ -11709,7 +11873,7 @@ var init_context_menu = __esm({
           capture: true
         });
         onCleanup(() => {
-          cancelAnimationFrame(frameId);
+          nativeCancelAnimationFrame(frameId);
           window.removeEventListener("mousedown", handleClickOutside, {
             capture: true
           });
@@ -11873,6 +12037,7 @@ var init_history_dropdown = __esm({
     init_icon_copy();
     init_icon_check();
     init_tooltip();
+    init_native_raf();
     _tmpl$38 = /* @__PURE__ */ template(`<div class="flex items-center gap-[5px]"><div class=relative><button data-react-grab-ignore-events data-react-grab-history-clear class="contain-layout shrink-0 flex items-center justify-center px-[3px] py-px rounded-sm bg-[#FEF2F2] cursor-pointer transition-all hover:bg-[#FEE2E2] press-scale h-[17px] text-[#B91C1C]"></button></div><div class=relative><button data-react-grab-ignore-events data-react-grab-history-copy-all class="contain-layout shrink-0 flex items-center justify-center gap-1 px-[3px] py-px rounded-sm bg-white [border-width:0.5px] border-solid border-[#B3B3B3] cursor-pointer transition-all hover:bg-[#F5F5F5] press-scale h-[17px] text-black/60">`);
     _tmpl$212 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-history-dropdown class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div><div class="contain-layout shrink-0 flex items-center justify-between px-2 pt-1.5 pb-1"><span class="text-[11px] font-medium text-black/40">History</span></div><div class="min-h-0 [border-top-width:0.5px] border-t-solid border-t-[#D9D9D9] px-2 py-1.5"><div class="flex flex-col max-h-[240px] overflow-y-auto -mx-2 -my-1.5"style="scrollbar-color:rgba(0,0,0,0.15) transparent">`);
     _tmpl$39 = /* @__PURE__ */ template(`<span class="text-[11px] leading-3 font-sans text-black/40 truncate mt-0.5">`);
@@ -11933,14 +12098,14 @@ var init_history_dropdown = __esm({
           if (props.position) setLastAnchorEdge(props.position.edge);
           clearTimeout(exitAnimationTimeout);
           setShouldMount(true);
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
-          enterAnimationFrameId = requestAnimationFrame(() => {
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
+          enterAnimationFrameId = nativeRequestAnimationFrame(() => {
             measureContainer();
             void containerRef?.offsetHeight;
             setIsAnimatedIn(true);
           });
         } else {
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
           setIsAnimatedIn(false);
           exitAnimationTimeout = setTimeout(() => {
             setShouldMount(false);
@@ -12011,7 +12176,7 @@ var init_history_dropdown = __esm({
           clearTimeout(copyAllFeedbackTimeout);
           clearTimeout(copyItemFeedbackTimeout);
           clearTimeout(exitAnimationTimeout);
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
           window.removeEventListener("keydown", handleKeyDown, {
             capture: true
           });
@@ -12256,6 +12421,7 @@ var init_clear_history_prompt = __esm({
     init_is_event_from_overlay();
     init_is_keyboard_event_triggered_by_input();
     init_discard_prompt();
+    init_native_raf();
     _tmpl$40 = /* @__PURE__ */ template(`<div data-react-grab-ignore-events data-react-grab-clear-history-prompt class="fixed font-sans text-[13px] antialiased filter-[drop-shadow(0px_1px_2px_#51515140)] select-none transition-[opacity,transform] duration-100 ease-out will-change-[opacity,transform]"style=z-index:2147483647><div>`);
     ClearHistoryPrompt = (props) => {
       let containerRef;
@@ -12278,14 +12444,14 @@ var init_clear_history_prompt = __esm({
           setLastAnchorEdge(anchor.edge);
           clearTimeout(exitAnimationTimeout);
           setShouldMount(true);
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
-          enterAnimationFrameId = requestAnimationFrame(() => {
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
+          enterAnimationFrameId = nativeRequestAnimationFrame(() => {
             measureContainer();
             void containerRef?.offsetHeight;
             setIsAnimatedIn(true);
           });
         } else {
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
           setIsAnimatedIn(false);
           exitAnimationTimeout = setTimeout(() => {
             setShouldMount(false);
@@ -12354,7 +12520,7 @@ var init_clear_history_prompt = __esm({
           if (!props.position || isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
           props.onCancel();
         };
-        const frameId = requestAnimationFrame(() => {
+        const frameId = nativeRequestAnimationFrame(() => {
           window.addEventListener("mousedown", handleClickOutside, {
             capture: true
           });
@@ -12363,9 +12529,9 @@ var init_clear_history_prompt = __esm({
           });
         });
         onCleanup(() => {
-          cancelAnimationFrame(frameId);
+          nativeCancelAnimationFrame(frameId);
           clearTimeout(exitAnimationTimeout);
-          if (enterAnimationFrameId !== void 0) cancelAnimationFrame(enterAnimationFrameId);
+          if (enterAnimationFrameId !== void 0) nativeCancelAnimationFrame(enterAnimationFrameId);
           window.removeEventListener("keydown", handleKeyDown, {
             capture: true
           });
@@ -14835,6 +15001,7 @@ var init_auto_scroll = __esm({
   "src/core/auto-scroll.ts"() {
     "use strict";
     init_constants();
+    init_native_raf();
     getAutoScrollDirection = (clientX, clientY) => {
       return {
         top: clientY < AUTO_SCROLL_EDGE_THRESHOLD_PX,
@@ -14857,7 +15024,7 @@ var init_auto_scroll = __esm({
         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) {
-          animationId = requestAnimationFrame(scroll);
+          animationId = nativeRequestAnimationFrame(scroll);
         } else {
           animationId = null;
         }
@@ -14867,7 +15034,7 @@ var init_auto_scroll = __esm({
       };
       const stop2 = () => {
         if (animationId !== null) {
-          cancelAnimationFrame(animationId);
+          nativeCancelAnimationFrame(animationId);
           animationId = null;
         }
       };
@@ -14902,7 +15069,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.18";
+        const version = "0.1.20";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -15258,16 +15425,16 @@ ${cssBlock}`;
   }
 });
 
-// src/core/plugins/copy-css.ts
-var copyCssPlugin;
-var init_copy_css = __esm({
-  "src/core/plugins/copy-css.ts"() {
+// src/core/plugins/copy-styles.ts
+var copyStylesPlugin;
+var init_copy_styles = __esm({
+  "src/core/plugins/copy-styles.ts"() {
     "use strict";
     init_append_stack_context();
     init_copy_content();
     init_extract_element_css();
-    copyCssPlugin = {
-      name: "copy-css",
+    copyStylesPlugin = {
+      name: "copy-styles",
       setup: (api) => {
         let isPendingSelection = false;
         return {
@@ -15291,8 +15458,8 @@ var init_copy_css = __esm({
           },
           actions: [
             {
-              id: "copy-css",
-              label: "Copy CSS",
+              id: "copy-styles",
+              label: "Copy styles",
               onAction: async (context) => {
                 await context.performWithFeedback(async () => {
                   const combinedCss = context.elements.map(extractElementCss).join("\n\n");
@@ -15308,8 +15475,8 @@ var init_copy_css = __esm({
               }
             },
             {
-              id: "copy-css-toolbar",
-              label: "Copy CSS",
+              id: "copy-styles-toolbar",
+              label: "Copy styles",
               target: "toolbar",
               onAction: () => {
                 isPendingSelection = true;
@@ -15414,6 +15581,7 @@ var init_core = __esm({
     init_store2();
     init_is_keyboard_event_triggered_by_input();
     init_mount_root();
+    init_native_raf();
     init_renderer();
     init_context();
     init_source();
@@ -15455,7 +15623,7 @@ var init_core = __esm({
     init_comment();
     init_open();
     init_copy_html();
-    init_copy_css();
+    init_copy_styles();
     init_freeze_animations();
     init_freeze_pseudo_states();
     init_freeze_updates();
@@ -15467,7 +15635,7 @@ var init_core = __esm({
     init_theme();
     init_generate_snippet();
     init_copy_content();
-    builtInPlugins = [copyPlugin, commentPlugin, copyHtmlPlugin, copyCssPlugin, openPlugin];
+    builtInPlugins = [copyPlugin, commentPlugin, copyHtmlPlugin, copyStylesPlugin, openPlugin];
     hasInited = false;
     toolbarStateChangeCallbacks = /* @__PURE__ */ new Set();
     init = (rawOptions) => {
@@ -15671,6 +15839,9 @@ var init_core = __esm({
           return createElementBounds(element);
         };
         let lastElementDetectionTime = 0;
+        let pendingDetectionScheduledAt = 0;
+        let latestDetectionX = 0;
+        let latestDetectionY = 0;
         let dragPreviewDebounceTimerId = null;
         const [debouncedDragPointer, setDebouncedDragPointer] = createSignal(null);
         const scheduleDragPreviewUpdate = (clientX, clientY) => {
@@ -15969,7 +16140,7 @@ var init_core = __esm({
               showTemporaryGrabbedBox(createElementBounds(element), element);
             }
           }
-          await new Promise((resolve) => requestAnimationFrame(resolve));
+          await waitUntilNextFrame();
           if (unhandledElements.length > 0) {
             await copyWithFallback(unhandledElements, extraPrompt, resolvedComponentName2);
           } else if (pendingResults.length > 0) {
@@ -16590,12 +16761,19 @@ var init_core = __esm({
             x: clientX,
             y: clientY
           });
+          latestDetectionX = clientX;
+          latestDetectionY = clientY;
           const now = performance.now();
-          if (now - lastElementDetectionTime >= ELEMENT_DETECTION_THROTTLE_MS) {
+          const isDetectionPending = pendingDetectionScheduledAt > 0 && now - pendingDetectionScheduledAt < PENDING_DETECTION_STALENESS_MS;
+          if (now - lastElementDetectionTime >= ELEMENT_DETECTION_THROTTLE_MS && !isDetectionPending) {
             lastElementDetectionTime = now;
+            pendingDetectionScheduledAt = now;
             onIdle(() => {
-              const candidate = getElementAtPosition(clientX, clientY);
-              actions.setDetectedElement(candidate);
+              const candidate = getElementAtPosition(latestDetectionX, latestDetectionY);
+              if (candidate !== store.detectedElement) {
+                actions.setDetectedElement(candidate);
+              }
+              pendingDetectionScheduledAt = 0;
             });
           }
           if (isDragging()) {
@@ -17367,7 +17545,7 @@ var init_core = __esm({
           if (shouldRunInterval && boundsRecalcIntervalId === null) {
             boundsRecalcIntervalId = window.setInterval(() => {
               if (viewportChangeFrameId !== null) return;
-              viewportChangeFrameId = requestAnimationFrame(() => {
+              viewportChangeFrameId = nativeRequestAnimationFrame(() => {
                 viewportChangeFrameId = null;
                 actions.incrementViewportVersion();
                 actions.updateSessionBounds();
@@ -17377,7 +17555,7 @@ var init_core = __esm({
             window.clearInterval(boundsRecalcIntervalId);
             boundsRecalcIntervalId = null;
             if (viewportChangeFrameId !== null) {
-              cancelAnimationFrame(viewportChangeFrameId);
+              nativeCancelAnimationFrame(viewportChangeFrameId);
               viewportChangeFrameId = null;
             }
           }
@@ -17396,7 +17574,7 @@ var init_core = __esm({
             window.clearInterval(boundsRecalcIntervalId);
           }
           if (viewportChangeFrameId !== null) {
-            cancelAnimationFrame(viewportChangeFrameId);
+            nativeCancelAnimationFrame(viewportChangeFrameId);
           }
         });
         eventListenerManager.addDocumentListener("copy", (event) => {
@@ -17420,7 +17598,7 @@ var init_core = __esm({
             window.clearTimeout(actionCycleIdleTimeoutId);
           }
           if (dropdownTrackingFrameId !== null) {
-            cancelAnimationFrame(dropdownTrackingFrameId);
+            nativeCancelAnimationFrame(dropdownTrackingFrameId);
           }
           grabbedBoxTimeouts.forEach((timeoutId) => window.clearTimeout(timeoutId));
           grabbedBoxTimeouts.clear();
@@ -17777,7 +17955,7 @@ var init_core = __esm({
         };
         const stopTrackingDropdownPosition = () => {
           if (dropdownTrackingFrameId !== null) {
-            cancelAnimationFrame(dropdownTrackingFrameId);
+            nativeCancelAnimationFrame(dropdownTrackingFrameId);
             dropdownTrackingFrameId = null;
           }
         };
@@ -17785,7 +17963,7 @@ var init_core = __esm({
           stopTrackingDropdownPosition();
           const updatePosition = () => {
             computePosition();
-            dropdownTrackingFrameId = requestAnimationFrame(updatePosition);
+            dropdownTrackingFrameId = nativeRequestAnimationFrame(updatePosition);
           };
           updatePosition();
         };
@@ -17913,7 +18091,7 @@ var init_core = __esm({
           const element = getFirstConnectedHistoryElement(item);
           if (!element) return;
           actions.clearLabelInstances();
-          requestAnimationFrame(() => {
+          nativeRequestAnimationFrame(() => {
             if (!isElementConnected(element)) return;
             const bounds = createElementBounds(element);
             const instanceId = createLabelInstance(bounds, item.tagName, item.componentName, "copied", {
@@ -17970,7 +18148,7 @@ var init_core = __esm({
           });
           showClearPrompt();
           actions.clearLabelInstances();
-          requestAnimationFrame(() => {
+          nativeRequestAnimationFrame(() => {
             batch(() => {
               for (const historyItem of currentHistoryItems) {
                 const connectedElements = getConnectedHistoryElements(historyItem);