react-grab 0.1.19 → 0.1.20

package/dist/index.js

@@ -1,4 +1,4 @@
-import {i}from'./chunk-F2RYLP4R.js';export{f as DEFAULT_THEME,g as commentPlugin,c as formatElementInfo,e as generateSnippet,b as getStack,i as init,a as isInstrumentationActive,h as openPlugin}from'./chunk-F2RYLP4R.js';/**
+import {i}from'./chunk-5NNTSQ2N.js';export{f as DEFAULT_THEME,g as commentPlugin,c as formatElementInfo,e as generateSnippet,b as getStack,i as init,a as isInstrumentationActive,h as openPlugin}from'./chunk-5NNTSQ2N.js';/**
  * @license MIT
  *
  * Copyright (c) 2025 Aiden Bai

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.19";
+    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;
@@ -8368,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;
       };
@@ -8401,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, {
@@ -8409,6 +8422,7 @@ var init_selection_label = __esm({
         });
       });
       onCleanup(() => {
+        resizeObserver?.disconnect();
         window.removeEventListener("scroll", handleViewportChange, true);
         window.removeEventListener("resize", handleViewportChange);
         window.removeEventListener("keydown", handleGlobalKeyDown, {
@@ -8422,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(() => {
@@ -8629,9 +8638,6 @@ var init_selection_label = __esm({
                 get onFollowUpSubmit() {
                   return props.onFollowUpSubmit;
                 },
-                onCopyStateChange: () => {
-                  queueMicrotask(measureContainer);
-                },
                 onFadingChange: setIsInternalFading,
                 get onShowContextMenu() {
                   return props.onShowContextMenu;
@@ -9818,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) => {
@@ -9865,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;
     };
   }
@@ -15025,7 +15069,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.19";
+        const version = "0.1.20";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -15795,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) => {
@@ -16714,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()) {

package/dist/react.js

@@ -2136,11 +2136,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.19";
+    VERSION = "0.1.20";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2162,6 +2162,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;
@@ -2245,6 +2246,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;
@@ -8356,16 +8358,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;
       };
@@ -8389,7 +8382,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, {
@@ -8397,6 +8410,7 @@ var init_selection_label = __esm({
         });
       });
       onCleanup(() => {
+        resizeObserver?.disconnect();
         window.removeEventListener("scroll", handleViewportChange, true);
         window.removeEventListener("resize", handleViewportChange);
         window.removeEventListener("keydown", handleGlobalKeyDown, {
@@ -8410,11 +8424,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(() => {
@@ -8617,9 +8626,6 @@ var init_selection_label = __esm({
                 get onFollowUpSubmit() {
                   return props.onFollowUpSubmit;
                 },
-                onCopyStateChange: () => {
-                  queueMicrotask(measureContainer);
-                },
                 onFadingChange: setIsInternalFading,
                 get onShowContextMenu() {
                   return props.onShowContextMenu;
@@ -9806,37 +9812,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) => {
@@ -9853,18 +9884,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;
     };
   }
@@ -15013,7 +15057,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.19";
+        const version = "0.1.20";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -15783,6 +15827,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) => {
@@ -16702,12 +16749,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()) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-grab",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Select context for coding agents directly from your website",
   "keywords": [
     "agent",