react-grab 0.1.11 → 0.1.13

package/dist/index.js

@@ -1,4 +1,4 @@
-import {o}from'./chunk-FP2224XW.js';export{j as DEFAULT_THEME,g as captureElementScreenshot,f as combineBounds,n as commentPlugin,l as copyHtmlPlugin,h as copyImageToClipboard,c as formatElementInfo,e as generateSnippet,b as getStack,o as init,a as isInstrumentationActive,i as isScreenshotSupported,m as openPlugin,k as screenshotPlugin}from'./chunk-FP2224XW.js';/**
+import {o}from'./chunk-VR2ILUMN.js';export{j as DEFAULT_THEME,g as captureElementScreenshot,f as combineBounds,n as commentPlugin,l as copyHtmlPlugin,h as copyImageToClipboard,c as formatElementInfo,e as generateSnippet,b as getStack,o as init,a as isInstrumentationActive,i as isScreenshotSupported,m as openPlugin,k as screenshotPlugin}from'./chunk-VR2ILUMN.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, INPUT_FOCUS_ACTIVATION_DELAY_MS, INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS, DEFAULT_KEY_HOLD_DURATION_MS, MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS, RECENT_THRESHOLD_MS, ACTION_CYCLE_IDLE_TRIGGER_MS, ACTION_CYCLE_INPUT_THROTTLE_MS, ACTION_CYCLE_SCROLL_THRESHOLD_PX, ACTION_CYCLE_SCROLL_LINE_HEIGHT_PX, ACTION_CYCLE_ACTION_IDS, 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_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_CENTER_PERCENT, LABEL_GAP_PX, PREVIEW_ATTR_VALUE_MAX_LENGTH, PREVIEW_MAX_ATTRS, PREVIEW_PRIORITY_ATTRS, SCREENSHOT_CAPTURE_DELAY_MS, VIDEO_METADATA_TIMEOUT_MS, VIDEO_READY_POLL_INTERVAL_MS, VIDEO_READY_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_WIDTH_PX, TOOLBAR_COLLAPSED_HEIGHT_PX, TOOLBAR_COLLAPSE_ANIMATION_DURATION_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_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, PANEL_STYLES, LOGO_SVG;
+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, INPUT_FOCUS_ACTIVATION_DELAY_MS, INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS, DEFAULT_KEY_HOLD_DURATION_MS, MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS, RECENT_THRESHOLD_MS, ACTION_CYCLE_IDLE_TRIGGER_MS, ACTION_CYCLE_INPUT_THROTTLE_MS, ACTION_CYCLE_SCROLL_THRESHOLD_PX, ACTION_CYCLE_SCROLL_LINE_HEIGHT_PX, ACTION_CYCLE_ACTION_IDS, 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_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_CENTER_PERCENT, LABEL_GAP_PX, PREVIEW_ATTR_VALUE_MAX_LENGTH, PREVIEW_MAX_ATTRS, PREVIEW_PRIORITY_ATTRS, SCREENSHOT_CAPTURE_DELAY_MS, VIDEO_METADATA_TIMEOUT_MS, VIDEO_READY_POLL_INTERVAL_MS, VIDEO_READY_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, 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_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, PANEL_STYLES, LOGO_SVG;
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.11";
+    VERSION = "0.1.13";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2242,8 +2242,8 @@ var init_constants = __esm({
     TOOLBAR_SNAP_ANIMATION_DURATION_MS = 300;
     TOOLBAR_DRAG_THRESHOLD_PX = 5;
     TOOLBAR_VELOCITY_MULTIPLIER_MS = 150;
-    TOOLBAR_COLLAPSED_WIDTH_PX = 14;
-    TOOLBAR_COLLAPSED_HEIGHT_PX = 14;
+    TOOLBAR_COLLAPSED_SHORT_PX = 14;
+    TOOLBAR_COLLAPSED_LONG_PX = 28;
     TOOLBAR_COLLAPSE_ANIMATION_DURATION_MS = 150;
     TOOLBAR_DEFAULT_WIDTH_PX = 78;
     TOOLBAR_DEFAULT_HEIGHT_PX = 28;
@@ -8697,8 +8697,8 @@ var init_toolbar = __esm({
         height: TOOLBAR_DEFAULT_HEIGHT_PX
       };
       const [collapsedDimensions, setCollapsedDimensions] = createSignal({
-        width: TOOLBAR_COLLAPSED_WIDTH_PX,
-        height: TOOLBAR_COLLAPSED_HEIGHT_PX
+        width: TOOLBAR_COLLAPSED_SHORT_PX,
+        height: TOOLBAR_COLLAPSED_SHORT_PX
       });
       const clampToViewport = (value, min, max) => Math.max(min, Math.min(value, max));
       const getVisualViewport = () => {
@@ -8727,8 +8727,8 @@ var init_toolbar = __esm({
           height: expandedHeight
         } = expandedDimensions;
         const actualRect = containerRef?.getBoundingClientRect();
-        const actualCollapsedWidth = actualRect?.width ?? TOOLBAR_COLLAPSED_WIDTH_PX;
-        const actualCollapsedHeight = actualRect?.height ?? TOOLBAR_COLLAPSED_HEIGHT_PX;
+        const actualCollapsedWidth = actualRect?.width ?? TOOLBAR_COLLAPSED_SHORT_PX;
+        const actualCollapsedHeight = actualRect?.height ?? TOOLBAR_COLLAPSED_SHORT_PX;
         let newPosition;
         if (edge === "top" || edge === "bottom") {
           const xOffset = (expandedWidth - actualCollapsedWidth) / 2;
@@ -8794,9 +8794,7 @@ var init_toolbar = __esm({
         return Math.max(0, Math.min(1, (positionY - viewport.offsetTop - TOOLBAR_SNAP_MARGIN_PX) / availableHeight));
       };
       const recalculatePosition = () => {
-        const rect = containerRef?.getBoundingClientRect();
-        if (!rect) return;
-        const newPosition = getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), rect.width, rect.height);
+        const newPosition = getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), expandedDimensions.width, expandedDimensions.height);
         setPosition(newPosition);
       };
       let didDragOccur = false;
@@ -9048,17 +9046,14 @@ var init_toolbar = __esm({
         }
         resizeTimeout = setTimeout(() => {
           setIsResizing(false);
-          const rect = containerRef?.getBoundingClientRect();
-          if (rect) {
-            const newRatio = getRatioFromPosition(snapEdge(), position().x, position().y, rect.width, rect.height);
-            setPositionRatio(newRatio);
-            saveAndNotify({
-              edge: snapEdge(),
-              ratio: newRatio,
-              collapsed: isCollapsed(),
-              enabled: props.enabled ?? true
-            });
-          }
+          const newRatio = getRatioFromPosition(snapEdge(), position().x, position().y, expandedDimensions.width, expandedDimensions.height);
+          setPositionRatio(newRatio);
+          saveAndNotify({
+            edge: snapEdge(),
+            ratio: newRatio,
+            collapsed: isCollapsed(),
+            enabled: props.enabled ?? true
+          });
         }, TOOLBAR_FADE_IN_DELAY_MS);
       };
       const saveAndNotify = (state) => {
@@ -9072,26 +9067,22 @@ var init_toolbar = __esm({
         if (savedState) {
           setSnapEdge(savedState.edge);
           setPositionRatio(savedState.ratio);
-          setIsCollapsed(savedState.collapsed);
           if (rect) {
             expandedDimensions = {
               width: rect.width,
               height: rect.height
             };
           }
-          const newPosition = getPositionFromEdgeAndRatio(savedState.edge, savedState.ratio, expandedDimensions.width, expandedDimensions.height);
-          setPosition(newPosition);
           if (savedState.collapsed) {
-            requestAnimationFrame(() => {
-              const collapsedRect = containerRef?.getBoundingClientRect();
-              if (collapsedRect) {
-                setCollapsedDimensions({
-                  width: collapsedRect.width,
-                  height: collapsedRect.height
-                });
-              }
+            const isHorizontalEdge = savedState.edge === "top" || savedState.edge === "bottom";
+            setCollapsedDimensions({
+              width: isHorizontalEdge ? TOOLBAR_COLLAPSED_LONG_PX : TOOLBAR_COLLAPSED_SHORT_PX,
+              height: isHorizontalEdge ? TOOLBAR_COLLAPSED_SHORT_PX : TOOLBAR_COLLAPSED_LONG_PX
             });
           }
+          setIsCollapsed(savedState.collapsed);
+          const newPosition = getPositionFromEdgeAndRatio(savedState.edge, savedState.ratio, expandedDimensions.width, expandedDimensions.height);
+          setPosition(newPosition);
         } else if (rect) {
           expandedDimensions = {
             width: rect.width,
@@ -12950,7 +12941,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.11";
+        const version = "0.1.13";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c

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, INPUT_FOCUS_ACTIVATION_DELAY_MS, INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS, DEFAULT_KEY_HOLD_DURATION_MS, MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS, RECENT_THRESHOLD_MS, ACTION_CYCLE_IDLE_TRIGGER_MS, ACTION_CYCLE_INPUT_THROTTLE_MS, ACTION_CYCLE_SCROLL_THRESHOLD_PX, ACTION_CYCLE_SCROLL_LINE_HEIGHT_PX, ACTION_CYCLE_ACTION_IDS, 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_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_CENTER_PERCENT, LABEL_GAP_PX, PREVIEW_ATTR_VALUE_MAX_LENGTH, PREVIEW_MAX_ATTRS, PREVIEW_PRIORITY_ATTRS, SCREENSHOT_CAPTURE_DELAY_MS, VIDEO_METADATA_TIMEOUT_MS, VIDEO_READY_POLL_INTERVAL_MS, VIDEO_READY_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_WIDTH_PX, TOOLBAR_COLLAPSED_HEIGHT_PX, TOOLBAR_COLLAPSE_ANIMATION_DURATION_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_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, PANEL_STYLES, LOGO_SVG;
+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, INPUT_FOCUS_ACTIVATION_DELAY_MS, INPUT_TEXT_SELECTION_ACTIVATION_DELAY_MS, DEFAULT_KEY_HOLD_DURATION_MS, MIN_HOLD_FOR_ACTIVATION_AFTER_COPY_MS, RECENT_THRESHOLD_MS, ACTION_CYCLE_IDLE_TRIGGER_MS, ACTION_CYCLE_INPUT_THROTTLE_MS, ACTION_CYCLE_SCROLL_THRESHOLD_PX, ACTION_CYCLE_SCROLL_LINE_HEIGHT_PX, ACTION_CYCLE_ACTION_IDS, 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_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_CENTER_PERCENT, LABEL_GAP_PX, PREVIEW_ATTR_VALUE_MAX_LENGTH, PREVIEW_MAX_ATTRS, PREVIEW_PRIORITY_ATTRS, SCREENSHOT_CAPTURE_DELAY_MS, VIDEO_METADATA_TIMEOUT_MS, VIDEO_READY_POLL_INTERVAL_MS, VIDEO_READY_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, 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_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, PANEL_STYLES, LOGO_SVG;
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
-    VERSION = "0.1.11";
+    VERSION = "0.1.13";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2230,8 +2230,8 @@ var init_constants = __esm({
     TOOLBAR_SNAP_ANIMATION_DURATION_MS = 300;
     TOOLBAR_DRAG_THRESHOLD_PX = 5;
     TOOLBAR_VELOCITY_MULTIPLIER_MS = 150;
-    TOOLBAR_COLLAPSED_WIDTH_PX = 14;
-    TOOLBAR_COLLAPSED_HEIGHT_PX = 14;
+    TOOLBAR_COLLAPSED_SHORT_PX = 14;
+    TOOLBAR_COLLAPSED_LONG_PX = 28;
     TOOLBAR_COLLAPSE_ANIMATION_DURATION_MS = 150;
     TOOLBAR_DEFAULT_WIDTH_PX = 78;
     TOOLBAR_DEFAULT_HEIGHT_PX = 28;
@@ -8685,8 +8685,8 @@ var init_toolbar = __esm({
         height: TOOLBAR_DEFAULT_HEIGHT_PX
       };
       const [collapsedDimensions, setCollapsedDimensions] = createSignal({
-        width: TOOLBAR_COLLAPSED_WIDTH_PX,
-        height: TOOLBAR_COLLAPSED_HEIGHT_PX
+        width: TOOLBAR_COLLAPSED_SHORT_PX,
+        height: TOOLBAR_COLLAPSED_SHORT_PX
       });
       const clampToViewport = (value, min, max) => Math.max(min, Math.min(value, max));
       const getVisualViewport = () => {
@@ -8715,8 +8715,8 @@ var init_toolbar = __esm({
           height: expandedHeight
         } = expandedDimensions;
         const actualRect = containerRef?.getBoundingClientRect();
-        const actualCollapsedWidth = actualRect?.width ?? TOOLBAR_COLLAPSED_WIDTH_PX;
-        const actualCollapsedHeight = actualRect?.height ?? TOOLBAR_COLLAPSED_HEIGHT_PX;
+        const actualCollapsedWidth = actualRect?.width ?? TOOLBAR_COLLAPSED_SHORT_PX;
+        const actualCollapsedHeight = actualRect?.height ?? TOOLBAR_COLLAPSED_SHORT_PX;
         let newPosition;
         if (edge === "top" || edge === "bottom") {
           const xOffset = (expandedWidth - actualCollapsedWidth) / 2;
@@ -8782,9 +8782,7 @@ var init_toolbar = __esm({
         return Math.max(0, Math.min(1, (positionY - viewport.offsetTop - TOOLBAR_SNAP_MARGIN_PX) / availableHeight));
       };
       const recalculatePosition = () => {
-        const rect = containerRef?.getBoundingClientRect();
-        if (!rect) return;
-        const newPosition = getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), rect.width, rect.height);
+        const newPosition = getPositionFromEdgeAndRatio(snapEdge(), positionRatio(), expandedDimensions.width, expandedDimensions.height);
         setPosition(newPosition);
       };
       let didDragOccur = false;
@@ -9036,17 +9034,14 @@ var init_toolbar = __esm({
         }
         resizeTimeout = setTimeout(() => {
           setIsResizing(false);
-          const rect = containerRef?.getBoundingClientRect();
-          if (rect) {
-            const newRatio = getRatioFromPosition(snapEdge(), position().x, position().y, rect.width, rect.height);
-            setPositionRatio(newRatio);
-            saveAndNotify({
-              edge: snapEdge(),
-              ratio: newRatio,
-              collapsed: isCollapsed(),
-              enabled: props.enabled ?? true
-            });
-          }
+          const newRatio = getRatioFromPosition(snapEdge(), position().x, position().y, expandedDimensions.width, expandedDimensions.height);
+          setPositionRatio(newRatio);
+          saveAndNotify({
+            edge: snapEdge(),
+            ratio: newRatio,
+            collapsed: isCollapsed(),
+            enabled: props.enabled ?? true
+          });
         }, TOOLBAR_FADE_IN_DELAY_MS);
       };
       const saveAndNotify = (state) => {
@@ -9060,26 +9055,22 @@ var init_toolbar = __esm({
         if (savedState) {
           setSnapEdge(savedState.edge);
           setPositionRatio(savedState.ratio);
-          setIsCollapsed(savedState.collapsed);
           if (rect) {
             expandedDimensions = {
               width: rect.width,
               height: rect.height
             };
           }
-          const newPosition = getPositionFromEdgeAndRatio(savedState.edge, savedState.ratio, expandedDimensions.width, expandedDimensions.height);
-          setPosition(newPosition);
           if (savedState.collapsed) {
-            requestAnimationFrame(() => {
-              const collapsedRect = containerRef?.getBoundingClientRect();
-              if (collapsedRect) {
-                setCollapsedDimensions({
-                  width: collapsedRect.width,
-                  height: collapsedRect.height
-                });
-              }
+            const isHorizontalEdge = savedState.edge === "top" || savedState.edge === "bottom";
+            setCollapsedDimensions({
+              width: isHorizontalEdge ? TOOLBAR_COLLAPSED_LONG_PX : TOOLBAR_COLLAPSED_SHORT_PX,
+              height: isHorizontalEdge ? TOOLBAR_COLLAPSED_SHORT_PX : TOOLBAR_COLLAPSED_LONG_PX
             });
           }
+          setIsCollapsed(savedState.collapsed);
+          const newPosition = getPositionFromEdgeAndRatio(savedState.edge, savedState.ratio, expandedDimensions.width, expandedDimensions.height);
+          setPosition(newPosition);
         } else if (rect) {
           expandedDimensions = {
             width: rect.width,
@@ -12938,7 +12929,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.11";
+        const version = "0.1.13";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c

package/package.json

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