react-grab 0.1.21 → 0.1.22

package/dist/index.js

@@ -1,4 +1,4 @@
-import {i}from'./chunk-GYJRJR7H.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-GYJRJR7H.js';/**
+import {i}from'./chunk-H7IR3CM4.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-H7IR3CM4.js';/**
  * @license MIT
  *
  * Copyright (c) 2025 Aiden Bai

package/dist/react.cjs

@@ -2152,7 +2152,7 @@ var VERSION, VIEWPORT_MARGIN_PX, OFFSCREEN_POSITION, SELECTION_LERP_FACTOR, FEED
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.21";
+    VERSION = "0.1.22";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -3927,7 +3927,7 @@ var init_truncate_string = __esm({
 });
 
 // src/core/context.ts
-var NON_COMPONENT_PREFIXES, NEXT_INTERNAL_COMPONENT_NAMES, REACT_INTERNAL_COMPONENT_NAMES, cachedIsNextProject, checkIsNextProject, checkIsInternalComponentName, checkIsSourceComponentName, SERVER_COMPONENT_URL_PREFIXES, isServerComponentUrl, devirtualizeServerUrl, symbolicateServerFrames, extractServerFramesFromDebugStack, enrichServerFrameLocations, stackCache, fetchStackForElement, getStack, getNearestComponentName, resolveSourceFromStack, isUsefulComponentName, getComponentDisplayName, hasSourceFiles, getComponentNamesFromFiber, formatStackContext, getStackContext, getElementContext, getFallbackContext, truncateAttrValue, formatPriorityAttrs, getHTMLPreview;
+var NON_COMPONENT_PREFIXES, NEXT_INTERNAL_COMPONENT_NAMES, REACT_INTERNAL_COMPONENT_NAMES, cachedIsNextProject, checkIsNextProject, checkIsInternalComponentName, checkIsSourceComponentName, SERVER_COMPONENT_URL_PREFIXES, isServerComponentUrl, devirtualizeServerUrl, symbolicateServerFrames, extractServerFramesFromDebugStack, enrichServerFrameLocations, findNearestFiberElement, stackCache, fetchStackForElement, getStack, getNearestComponentName, resolveSourceFromStack, isUsefulComponentName, getComponentDisplayName, hasSourceFiles, getComponentNamesFromFiber, formatStackContext, getStackContext, getElementContext, getFallbackContext, truncateAttrValue, formatPriorityAttrs, getHTMLPreview;
 var init_context = __esm({
   "src/core/context.ts"() {
     "use strict";
@@ -4118,6 +4118,15 @@ var init_context = __esm({
         };
       });
     };
+    findNearestFiberElement = (element) => {
+      if (!Ee()) return element;
+      let current = element;
+      while (current) {
+        if (Pe(current)) return current;
+        current = current.parentElement;
+      }
+      return element;
+    };
     stackCache = /* @__PURE__ */ new WeakMap();
     fetchStackForElement = async (element) => {
       try {
@@ -4135,10 +4144,11 @@ var init_context = __esm({
     };
     getStack = (element) => {
       if (!Ee()) return Promise.resolve([]);
-      const cached = stackCache.get(element);
+      const resolvedElement = findNearestFiberElement(element);
+      const cached = stackCache.get(resolvedElement);
       if (cached) return cached;
-      const promise = fetchStackForElement(element);
-      stackCache.set(element, promise);
+      const promise = fetchStackForElement(resolvedElement);
+      stackCache.set(resolvedElement, promise);
       return promise;
     };
     getNearestComponentName = async (element) => {
@@ -4174,7 +4184,8 @@ var init_context = __esm({
     };
     getComponentDisplayName = (element) => {
       if (!Ee()) return null;
-      const fiber = Pe(element);
+      const resolvedElement = findNearestFiberElement(element);
+      const fiber = Pe(resolvedElement);
       if (!fiber) return null;
       let currentFiber = fiber.return;
       while (currentFiber) {
@@ -4261,12 +4272,13 @@ var init_context = __esm({
       return "";
     };
     getElementContext = async (element, options = {}) => {
-      const html = getHTMLPreview(element);
-      const stackContext = await getStackContext(element, options);
+      const resolvedElement = findNearestFiberElement(element);
+      const html = getHTMLPreview(resolvedElement);
+      const stackContext = await getStackContext(resolvedElement, options);
       if (stackContext) {
         return `${html}${stackContext}`;
       }
-      return getFallbackContext(element);
+      return getFallbackContext(resolvedElement);
     };
     getFallbackContext = (element) => {
       const tagName = getTagName(element);
@@ -8660,8 +8672,8 @@ var init_selection_label = __esm({
             computedArrowPosition: null
           };
         }
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
         const isSelectionVisibleInViewport = bounds.x + bounds.width > 0 && bounds.x < viewportWidth && bounds.y + bounds.height > 0 && bounds.y < viewportHeight;
         if (!isSelectionVisibleInViewport) {
           return {
@@ -9378,7 +9390,7 @@ var init_safe_polygon = __esm({
 });
 
 // src/utils/freeze-updates.ts
-var isUpdatesPaused, getOrCache, patchedDispatchers, wrappedDispatchCache, wrappedStartTransitionCache, pendingStoreCallbacks, pendingTransitionCallbacks, pendingStateUpdates, pausedQueueStates, pausedContextStates, renderersWithPatchedDispatcher, typedFiberRoots, getFiberRoot, collectFiberRoots, mergePendingChains, pauseHookQueue, resumeHookQueue, pauseContextDependency, resumeContextDependency, forEachHookQueue, forEachContextDependency, traverseFibers, pauseFiber, resumeFiber, patchDispatcher, installDispatcherPatching, scheduleReactUpdate, invokeCallbacks, initializeFreezeSupport, freezeUpdates;
+var isUpdatesPaused, getOrCache, patchedDispatchers, wrappedDispatchCache, wrappedStartTransitionCache, pendingStoreCallbacks, pendingTransitionCallbacks, pendingStateUpdates, pausedQueueStates, pausedContextStates, renderersWithPatchedDispatcher, typedFiberRoots, getFiberRoot, collectFiberRoots, mergePendingChains, pauseHookQueue, extractActionsFromChain, resumeHookQueue, pauseContextDependency, resumeContextDependency, forEachHookQueue, forEachContextDependency, traverseFibers, pauseFiber, resumeFiber, patchDispatcher, installDispatcherPatching, scheduleReactUpdate, invokeCallbacks, initializeFreezeSupport, freezeUpdates;
 var init_freeze_updates = __esm({
   "src/utils/freeze-updates.ts"() {
     "use strict";
@@ -9470,26 +9482,42 @@ var init_freeze_updates = __esm({
       Object.defineProperty(queue, "pending", {
         configurable: true,
         enumerable: true,
-        get: () => isUpdatesPaused ? pauseState.bufferedPending : currentPendingValue,
+        get: () => isUpdatesPaused ? null : currentPendingValue,
         set: (newValue) => {
           if (isUpdatesPaused) {
-            pauseState.bufferedPending = newValue;
+            if (newValue !== null) {
+              pauseState.bufferedPending = mergePendingChains(
+                pauseState.bufferedPending ?? null,
+                newValue
+              );
+            }
+            return;
           }
           currentPendingValue = newValue;
         }
       });
       pausedQueueStates.set(queue, pauseState);
     };
+    extractActionsFromChain = (pending) => {
+      if (!pending) return [];
+      const actions = [];
+      const first = pending.next;
+      if (!first) return [];
+      let current = first;
+      do {
+        if (current) {
+          actions.push(current.action);
+          current = current.next;
+        }
+      } while (current && current !== first);
+      return actions;
+    };
     resumeHookQueue = (queue) => {
       const pauseState = pausedQueueStates.get(queue);
       if (!pauseState) return;
       if (pauseState.originalGetSnapshot) {
         queue.getSnapshot = pauseState.originalGetSnapshot;
       }
-      const mergedPending = mergePendingChains(
-        pauseState.pendingValueAtPause ?? null,
-        pauseState.bufferedPending ?? null
-      );
       if (pauseState.originalPendingDescriptor) {
         Object.defineProperty(
           queue,
@@ -9499,7 +9527,19 @@ var init_freeze_updates = __esm({
       } else {
         delete queue.pending;
       }
-      queue.pending = mergedPending;
+      queue.pending = null;
+      const dispatch = queue.dispatch;
+      if (typeof dispatch === "function") {
+        const pendingActions = extractActionsFromChain(
+          pauseState.pendingValueAtPause ?? null
+        );
+        const bufferedActions = extractActionsFromChain(
+          pauseState.bufferedPending ?? null
+        );
+        for (const action of [...pendingActions, ...bufferedActions]) {
+          pendingStateUpdates.push(() => dispatch(action));
+        }
+      }
       pausedQueueStates.delete(queue);
     };
     pauseContextDependency = (contextDependency) => {
@@ -15418,7 +15458,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.21";
+        const version = "0.1.22";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -17818,8 +17858,13 @@ var init_core = __esm({
           if (!event.isPrimary) return;
           if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
           if (store.contextMenuPosition !== null) return;
+          const isActive = isRendererActive() || isCopying() || isDragging();
           const hasModifierKeyHeld = event.metaKey || event.ctrlKey;
           handlePointerUp(event.clientX, event.clientY, hasModifierKeyHeld);
+          if (isActive) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+          }
         }, {
           capture: true
         });
@@ -17936,6 +17981,18 @@ var init_core = __esm({
           previousViewportHeight = currentViewportHeight;
           handleViewportChange();
         });
+        const visualViewport = window.visualViewport;
+        if (visualViewport) {
+          const {
+            signal
+          } = eventListenerManager;
+          visualViewport.addEventListener("resize", handleViewportChange, {
+            signal
+          });
+          visualViewport.addEventListener("scroll", handleViewportChange, {
+            signal
+          });
+        }
         let boundsRecalcIntervalId = null;
         let viewportChangeFrameId = null;
         const startBoundsRecalcIntervalIfNeeded = () => {

package/dist/react.js

@@ -2140,7 +2140,7 @@ var VERSION, VIEWPORT_MARGIN_PX, OFFSCREEN_POSITION, SELECTION_LERP_FACTOR, FEED
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.21";
+    VERSION = "0.1.22";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -3915,7 +3915,7 @@ var init_truncate_string = __esm({
 });
 
 // src/core/context.ts
-var NON_COMPONENT_PREFIXES, NEXT_INTERNAL_COMPONENT_NAMES, REACT_INTERNAL_COMPONENT_NAMES, cachedIsNextProject, checkIsNextProject, checkIsInternalComponentName, checkIsSourceComponentName, SERVER_COMPONENT_URL_PREFIXES, isServerComponentUrl, devirtualizeServerUrl, symbolicateServerFrames, extractServerFramesFromDebugStack, enrichServerFrameLocations, stackCache, fetchStackForElement, getStack, getNearestComponentName, resolveSourceFromStack, isUsefulComponentName, getComponentDisplayName, hasSourceFiles, getComponentNamesFromFiber, formatStackContext, getStackContext, getElementContext, getFallbackContext, truncateAttrValue, formatPriorityAttrs, getHTMLPreview;
+var NON_COMPONENT_PREFIXES, NEXT_INTERNAL_COMPONENT_NAMES, REACT_INTERNAL_COMPONENT_NAMES, cachedIsNextProject, checkIsNextProject, checkIsInternalComponentName, checkIsSourceComponentName, SERVER_COMPONENT_URL_PREFIXES, isServerComponentUrl, devirtualizeServerUrl, symbolicateServerFrames, extractServerFramesFromDebugStack, enrichServerFrameLocations, findNearestFiberElement, stackCache, fetchStackForElement, getStack, getNearestComponentName, resolveSourceFromStack, isUsefulComponentName, getComponentDisplayName, hasSourceFiles, getComponentNamesFromFiber, formatStackContext, getStackContext, getElementContext, getFallbackContext, truncateAttrValue, formatPriorityAttrs, getHTMLPreview;
 var init_context = __esm({
   "src/core/context.ts"() {
     "use strict";
@@ -4106,6 +4106,15 @@ var init_context = __esm({
         };
       });
     };
+    findNearestFiberElement = (element) => {
+      if (!Ee()) return element;
+      let current = element;
+      while (current) {
+        if (Pe(current)) return current;
+        current = current.parentElement;
+      }
+      return element;
+    };
     stackCache = /* @__PURE__ */ new WeakMap();
     fetchStackForElement = async (element) => {
       try {
@@ -4123,10 +4132,11 @@ var init_context = __esm({
     };
     getStack = (element) => {
       if (!Ee()) return Promise.resolve([]);
-      const cached = stackCache.get(element);
+      const resolvedElement = findNearestFiberElement(element);
+      const cached = stackCache.get(resolvedElement);
       if (cached) return cached;
-      const promise = fetchStackForElement(element);
-      stackCache.set(element, promise);
+      const promise = fetchStackForElement(resolvedElement);
+      stackCache.set(resolvedElement, promise);
       return promise;
     };
     getNearestComponentName = async (element) => {
@@ -4162,7 +4172,8 @@ var init_context = __esm({
     };
     getComponentDisplayName = (element) => {
       if (!Ee()) return null;
-      const fiber = Pe(element);
+      const resolvedElement = findNearestFiberElement(element);
+      const fiber = Pe(resolvedElement);
       if (!fiber) return null;
       let currentFiber = fiber.return;
       while (currentFiber) {
@@ -4249,12 +4260,13 @@ var init_context = __esm({
       return "";
     };
     getElementContext = async (element, options = {}) => {
-      const html = getHTMLPreview(element);
-      const stackContext = await getStackContext(element, options);
+      const resolvedElement = findNearestFiberElement(element);
+      const html = getHTMLPreview(resolvedElement);
+      const stackContext = await getStackContext(resolvedElement, options);
       if (stackContext) {
         return `${html}${stackContext}`;
       }
-      return getFallbackContext(element);
+      return getFallbackContext(resolvedElement);
     };
     getFallbackContext = (element) => {
       const tagName = getTagName(element);
@@ -8648,8 +8660,8 @@ var init_selection_label = __esm({
             computedArrowPosition: null
           };
         }
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
         const isSelectionVisibleInViewport = bounds.x + bounds.width > 0 && bounds.x < viewportWidth && bounds.y + bounds.height > 0 && bounds.y < viewportHeight;
         if (!isSelectionVisibleInViewport) {
           return {
@@ -9366,7 +9378,7 @@ var init_safe_polygon = __esm({
 });
 
 // src/utils/freeze-updates.ts
-var isUpdatesPaused, getOrCache, patchedDispatchers, wrappedDispatchCache, wrappedStartTransitionCache, pendingStoreCallbacks, pendingTransitionCallbacks, pendingStateUpdates, pausedQueueStates, pausedContextStates, renderersWithPatchedDispatcher, typedFiberRoots, getFiberRoot, collectFiberRoots, mergePendingChains, pauseHookQueue, resumeHookQueue, pauseContextDependency, resumeContextDependency, forEachHookQueue, forEachContextDependency, traverseFibers, pauseFiber, resumeFiber, patchDispatcher, installDispatcherPatching, scheduleReactUpdate, invokeCallbacks, initializeFreezeSupport, freezeUpdates;
+var isUpdatesPaused, getOrCache, patchedDispatchers, wrappedDispatchCache, wrappedStartTransitionCache, pendingStoreCallbacks, pendingTransitionCallbacks, pendingStateUpdates, pausedQueueStates, pausedContextStates, renderersWithPatchedDispatcher, typedFiberRoots, getFiberRoot, collectFiberRoots, mergePendingChains, pauseHookQueue, extractActionsFromChain, resumeHookQueue, pauseContextDependency, resumeContextDependency, forEachHookQueue, forEachContextDependency, traverseFibers, pauseFiber, resumeFiber, patchDispatcher, installDispatcherPatching, scheduleReactUpdate, invokeCallbacks, initializeFreezeSupport, freezeUpdates;
 var init_freeze_updates = __esm({
   "src/utils/freeze-updates.ts"() {
     "use strict";
@@ -9458,26 +9470,42 @@ var init_freeze_updates = __esm({
       Object.defineProperty(queue, "pending", {
         configurable: true,
         enumerable: true,
-        get: () => isUpdatesPaused ? pauseState.bufferedPending : currentPendingValue,
+        get: () => isUpdatesPaused ? null : currentPendingValue,
         set: (newValue) => {
           if (isUpdatesPaused) {
-            pauseState.bufferedPending = newValue;
+            if (newValue !== null) {
+              pauseState.bufferedPending = mergePendingChains(
+                pauseState.bufferedPending ?? null,
+                newValue
+              );
+            }
+            return;
           }
           currentPendingValue = newValue;
         }
       });
       pausedQueueStates.set(queue, pauseState);
     };
+    extractActionsFromChain = (pending) => {
+      if (!pending) return [];
+      const actions = [];
+      const first = pending.next;
+      if (!first) return [];
+      let current = first;
+      do {
+        if (current) {
+          actions.push(current.action);
+          current = current.next;
+        }
+      } while (current && current !== first);
+      return actions;
+    };
     resumeHookQueue = (queue) => {
       const pauseState = pausedQueueStates.get(queue);
       if (!pauseState) return;
       if (pauseState.originalGetSnapshot) {
         queue.getSnapshot = pauseState.originalGetSnapshot;
       }
-      const mergedPending = mergePendingChains(
-        pauseState.pendingValueAtPause ?? null,
-        pauseState.bufferedPending ?? null
-      );
       if (pauseState.originalPendingDescriptor) {
         Object.defineProperty(
           queue,
@@ -9487,7 +9515,19 @@ var init_freeze_updates = __esm({
       } else {
         delete queue.pending;
       }
-      queue.pending = mergedPending;
+      queue.pending = null;
+      const dispatch = queue.dispatch;
+      if (typeof dispatch === "function") {
+        const pendingActions = extractActionsFromChain(
+          pauseState.pendingValueAtPause ?? null
+        );
+        const bufferedActions = extractActionsFromChain(
+          pauseState.bufferedPending ?? null
+        );
+        for (const action of [...pendingActions, ...bufferedActions]) {
+          pendingStateUpdates.push(() => dispatch(action));
+        }
+      }
       pausedQueueStates.delete(queue);
     };
     pauseContextDependency = (contextDependency) => {
@@ -15406,7 +15446,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.21";
+        const version = "0.1.22";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c
@@ -17806,8 +17846,13 @@ var init_core = __esm({
           if (!event.isPrimary) return;
           if (isEventFromOverlay(event, "data-react-grab-ignore-events")) return;
           if (store.contextMenuPosition !== null) return;
+          const isActive = isRendererActive() || isCopying() || isDragging();
           const hasModifierKeyHeld = event.metaKey || event.ctrlKey;
           handlePointerUp(event.clientX, event.clientY, hasModifierKeyHeld);
+          if (isActive) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+          }
         }, {
           capture: true
         });
@@ -17924,6 +17969,18 @@ var init_core = __esm({
           previousViewportHeight = currentViewportHeight;
           handleViewportChange();
         });
+        const visualViewport = window.visualViewport;
+        if (visualViewport) {
+          const {
+            signal
+          } = eventListenerManager;
+          visualViewport.addEventListener("resize", handleViewportChange, {
+            signal
+          });
+          visualViewport.addEventListener("scroll", handleViewportChange, {
+            signal
+          });
+        }
         let boundsRecalcIntervalId = null;
         let viewportChangeFrameId = null;
         const startBoundsRecalcIntervalIfNeeded = () => {

package/package.json

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