react-grab 0.1.22 → 0.1.24

package/dist/index.js

@@ -1,4 +1,4 @@
-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';/**
+import {f}from'./chunk-Z5IMKMDB.js';export{c as DEFAULT_THEME,d as commentPlugin,b as generateSnippet,f as init,e as openPlugin}from'./chunk-Z5IMKMDB.js';export{wa as formatElementInfo,ra as getStack,la as isInstrumentationActive}from'./chunk-UERZTOK6.js';/**
  * @license MIT
  *
  * Copyright (c) 2025 Aiden Bai
@@ -6,4 +6,4 @@ import {i}from'./chunk-H7IR3CM4.js';export{f as DEFAULT_THEME,g as commentPlugin
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var e=null,d=()=>typeof window>"u"?e:window.__REACT_GRAB__??e??null,c=t=>{e=t,typeof window<"u"&&(t?window.__REACT_GRAB__=t:delete window.__REACT_GRAB__);};typeof window<"u"&&(window.__REACT_GRAB__?e=window.__REACT_GRAB__:(e=i(),window.__REACT_GRAB__=e),window.dispatchEvent(new CustomEvent("react-grab:init",{detail:e})));export{d as getGlobalApi,c as setGlobalApi};
+var e=null,d=()=>typeof window>"u"?e:window.__REACT_GRAB__??e??null,c=t=>{e=t,typeof window<"u"&&(t?window.__REACT_GRAB__=t:delete window.__REACT_GRAB__);};typeof window<"u"&&(window.__REACT_GRAB__?e=window.__REACT_GRAB__:(e=f(),window.__REACT_GRAB__=e),window.dispatchEvent(new CustomEvent("react-grab:init",{detail:e})));export{d as getGlobalApi,c as setGlobalApi};

package/dist/primitives.cjs

@@ -0,0 +1,9 @@
+'use strict';var chunkXWSK4QRO_cjs=require('./chunk-XWSK4QRO.cjs');/**
+ * @license MIT
+ *
+ * Copyright (c) 2025 Aiden Bai
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var H=async e=>{let t=await chunkXWSK4QRO_cjs.va(e),g=chunkXWSK4QRO_cjs.xa(e),z=chunkXWSK4QRO_cjs.ua(e),F=chunkXWSK4QRO_cjs.ma(e),v=chunkXWSK4QRO_cjs.Oa(e),C=chunkXWSK4QRO_cjs.Pa(e);return {element:e,htmlPreview:g,stackContext:t,componentName:z,fiber:F,selector:v,styles:C}},r=new Set,n=false,R=e=>{n=true,chunkXWSK4QRO_cjs.za(),r.add(chunkXWSK4QRO_cjs.Ba(e??[document.body])),chunkXWSK4QRO_cjs.Ca(),chunkXWSK4QRO_cjs.Ma();},D=()=>{n=false;for(let e of Array.from(r))e();r.clear(),chunkXWSK4QRO_cjs.Ba([]),chunkXWSK4QRO_cjs.Da(),chunkXWSK4QRO_cjs.Na();},I=()=>n,L=async(e,t)=>{await chunkXWSK4QRO_cjs.ya(e,t);};exports.freeze=R;exports.getElementContext=H;exports.isFreezeActive=I;exports.openFile=L;exports.unfreeze=D;

package/dist/primitives.d.cts

@@ -0,0 +1,62 @@
+import { Fiber } from 'bippy';
+
+interface ReactGrabElementContext {
+    element: Element;
+    htmlPreview: string;
+    stackContext: string;
+    componentName: string | null;
+    fiber: Fiber | null;
+    selector: string | null;
+    styles: string;
+}
+/**
+ * Gathers comprehensive context for a DOM element, including its React fiber,
+ * component name, source stack, HTML preview, CSS selector, and computed styles.
+ *
+ * @example
+ * const context = await getElementContext(document.querySelector('.my-button')!);
+ * console.log(context.componentName); // "SubmitButton"
+ * console.log(context.selector);      // "button.my-button"
+ * console.log(context.stackContext);  // "SubmitButton > Form > App"
+ */
+declare const getElementContext: (element: Element) => Promise<ReactGrabElementContext>;
+/**
+ * Freezes the page by halting React updates, pausing CSS/JS animations,
+ * and preserving pseudo-states (e.g. :hover, :focus) on the given elements.
+ *
+ * @example
+ * freeze(); // freezes the entire page
+ * freeze([document.querySelector('.modal')!]); // freezes only the modal subtree
+ */
+declare const freeze: (elements?: Element[]) => void;
+/**
+ * Restores normal page behavior by re-enabling React updates, resuming
+ * animations, and releasing preserved pseudo-states.
+ *
+ * @example
+ * freeze();
+ * // ... capture a snapshot ...
+ * unfreeze(); // page resumes normal behavior
+ */
+declare const unfreeze: () => void;
+/**
+ * Returns whether the page is currently in a frozen state.
+ *
+ * @example
+ * if (isFreezeActive()) {
+ *   console.log('Page is frozen, skipping update');
+ * }
+ */
+declare const isFreezeActive: () => boolean;
+/**
+ * Opens the source file at the given path in the user's editor.
+ * Tries the dev-server endpoint first (Vite / Next.js), then falls back
+ * to a protocol URL (e.g. vscode://file/…).
+ *
+ * @example
+ * openFile("/src/components/Button.tsx");
+ * openFile("/src/components/Button.tsx", 42);
+ */
+declare const openFile: (filePath: string, lineNumber?: number) => Promise<void>;
+
+export { type ReactGrabElementContext, freeze, getElementContext, isFreezeActive, openFile, unfreeze };

package/dist/primitives.d.ts

@@ -0,0 +1,62 @@
+import { Fiber } from 'bippy';
+
+interface ReactGrabElementContext {
+    element: Element;
+    htmlPreview: string;
+    stackContext: string;
+    componentName: string | null;
+    fiber: Fiber | null;
+    selector: string | null;
+    styles: string;
+}
+/**
+ * Gathers comprehensive context for a DOM element, including its React fiber,
+ * component name, source stack, HTML preview, CSS selector, and computed styles.
+ *
+ * @example
+ * const context = await getElementContext(document.querySelector('.my-button')!);
+ * console.log(context.componentName); // "SubmitButton"
+ * console.log(context.selector);      // "button.my-button"
+ * console.log(context.stackContext);  // "SubmitButton > Form > App"
+ */
+declare const getElementContext: (element: Element) => Promise<ReactGrabElementContext>;
+/**
+ * Freezes the page by halting React updates, pausing CSS/JS animations,
+ * and preserving pseudo-states (e.g. :hover, :focus) on the given elements.
+ *
+ * @example
+ * freeze(); // freezes the entire page
+ * freeze([document.querySelector('.modal')!]); // freezes only the modal subtree
+ */
+declare const freeze: (elements?: Element[]) => void;
+/**
+ * Restores normal page behavior by re-enabling React updates, resuming
+ * animations, and releasing preserved pseudo-states.
+ *
+ * @example
+ * freeze();
+ * // ... capture a snapshot ...
+ * unfreeze(); // page resumes normal behavior
+ */
+declare const unfreeze: () => void;
+/**
+ * Returns whether the page is currently in a frozen state.
+ *
+ * @example
+ * if (isFreezeActive()) {
+ *   console.log('Page is frozen, skipping update');
+ * }
+ */
+declare const isFreezeActive: () => boolean;
+/**
+ * Opens the source file at the given path in the user's editor.
+ * Tries the dev-server endpoint first (Vite / Next.js), then falls back
+ * to a protocol URL (e.g. vscode://file/…).
+ *
+ * @example
+ * openFile("/src/components/Button.tsx");
+ * openFile("/src/components/Button.tsx", 42);
+ */
+declare const openFile: (filePath: string, lineNumber?: number) => Promise<void>;
+
+export { type ReactGrabElementContext, freeze, getElementContext, isFreezeActive, openFile, unfreeze };

package/dist/primitives.js

@@ -0,0 +1,9 @@
+import {va,xa,ua,ma,Oa,Pa,za,Ba,Ca,Ma,Da,Na,ya}from'./chunk-UERZTOK6.js';/**
+ * @license MIT
+ *
+ * Copyright (c) 2025 Aiden Bai
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var H=async e=>{let t=await va(e),g=xa(e),z=ua(e),F=ma(e),v=Oa(e),C=Pa(e);return {element:e,htmlPreview:g,stackContext:t,componentName:z,fiber:F,selector:v,styles:C}},r=new Set,n=false,R=e=>{n=true,za(),r.add(Ba(e??[document.body])),Ca(),Ma();},D=()=>{n=false;for(let e of Array.from(r))e();r.clear(),Ba([]),Da(),Na();},I=()=>n,L=async(e,t)=>{await ya(e,t);};export{R as freeze,H as getElementContext,I as isFreezeActive,L as openFile,D as unfreeze};

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.22";
+    VERSION = "0.1.24";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2799,6 +2799,7 @@ var init_store2 = __esm({
           if (store.current.state === "justCopied") {
             const shouldReturnToActive = store.current.wasActive && !store.wasActivatedByToggle;
             if (shouldReturnToActive) {
+              actions.clearFrozenElement();
               setStore("current", {
                 state: "active",
                 phase: "hovering",
@@ -4746,13 +4747,6 @@ var init_overlay_canvas = __esm({
         initializeCanvas();
         scheduleAnimationFrame();
       };
-      createEffect(on(() => [props.mouseX, props.mouseY], ([mouseX, mouseY]) => {
-        const targetX = mouseX ?? 0;
-        const targetY = mouseY ?? 0;
-        crosshairCurrentPosition.x = targetX;
-        crosshairCurrentPosition.y = targetY;
-        scheduleAnimationFrame();
-      }));
       createEffect(on(() => props.crosshairVisible, () => {
         scheduleAnimationFrame();
       }));
@@ -4877,6 +4871,15 @@ var init_overlay_canvas = __esm({
       onMount(() => {
         initializeCanvas();
         scheduleAnimationFrame();
+        const handlePointerMove = (event) => {
+          if (!event.isPrimary) return;
+          crosshairCurrentPosition.x = event.clientX;
+          crosshairCurrentPosition.y = event.clientY;
+          scheduleAnimationFrame();
+        };
+        window.addEventListener("pointermove", handlePointerMove, {
+          passive: true
+        });
         window.addEventListener("resize", handleWindowResize);
         let currentDprMediaQuery = null;
         const handleDevicePixelRatioChange = () => {
@@ -4895,6 +4898,7 @@ var init_overlay_canvas = __esm({
         };
         setupDprMediaQuery();
         onCleanup(() => {
+          window.removeEventListener("pointermove", handlePointerMove);
           window.removeEventListener("resize", handleWindowResize);
           if (currentDprMediaQuery) {
             currentDprMediaQuery.removeEventListener("change", handleDevicePixelRatioChange);
@@ -13021,12 +13025,6 @@ var init_renderer = __esm({
         get crosshairVisible() {
           return props.crosshairVisible;
         },
-        get mouseX() {
-          return props.mouseX;
-        },
-        get mouseY() {
-          return props.mouseY;
-        },
         get selectionVisible() {
           return props.selectionVisible;
         },
@@ -15458,7 +15456,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.22";
+        const version = "0.1.24";
         const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
         console.log(
           `%cReact Grab${version ? ` v${version}` : ""}%c

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.22";
+    VERSION = "0.1.24";
     VIEWPORT_MARGIN_PX = 8;
     OFFSCREEN_POSITION = -1e3;
     SELECTION_LERP_FACTOR = 0.95;
@@ -2787,6 +2787,7 @@ var init_store2 = __esm({
           if (store.current.state === "justCopied") {
             const shouldReturnToActive = store.current.wasActive && !store.wasActivatedByToggle;
             if (shouldReturnToActive) {
+              actions.clearFrozenElement();
               setStore("current", {
                 state: "active",
                 phase: "hovering",
@@ -4734,13 +4735,6 @@ var init_overlay_canvas = __esm({
         initializeCanvas();
         scheduleAnimationFrame();
       };
-      createEffect(on(() => [props.mouseX, props.mouseY], ([mouseX, mouseY]) => {
-        const targetX = mouseX ?? 0;
-        const targetY = mouseY ?? 0;
-        crosshairCurrentPosition.x = targetX;
-        crosshairCurrentPosition.y = targetY;
-        scheduleAnimationFrame();
-      }));
       createEffect(on(() => props.crosshairVisible, () => {
         scheduleAnimationFrame();
       }));
@@ -4865,6 +4859,15 @@ var init_overlay_canvas = __esm({
       onMount(() => {
         initializeCanvas();
         scheduleAnimationFrame();
+        const handlePointerMove = (event) => {
+          if (!event.isPrimary) return;
+          crosshairCurrentPosition.x = event.clientX;
+          crosshairCurrentPosition.y = event.clientY;
+          scheduleAnimationFrame();
+        };
+        window.addEventListener("pointermove", handlePointerMove, {
+          passive: true
+        });
         window.addEventListener("resize", handleWindowResize);
         let currentDprMediaQuery = null;
         const handleDevicePixelRatioChange = () => {
@@ -4883,6 +4886,7 @@ var init_overlay_canvas = __esm({
         };
         setupDprMediaQuery();
         onCleanup(() => {
+          window.removeEventListener("pointermove", handlePointerMove);
           window.removeEventListener("resize", handleWindowResize);
           if (currentDprMediaQuery) {
             currentDprMediaQuery.removeEventListener("change", handleDevicePixelRatioChange);
@@ -13009,12 +13013,6 @@ var init_renderer = __esm({
         get crosshairVisible() {
           return props.crosshairVisible;
         },
-        get mouseX() {
-          return props.mouseX;
-        },
-        get mouseY() {
-          return props.mouseY;
-        },
         get selectionVisible() {
           return props.selectionVisible;
         },
@@ -15446,7 +15444,7 @@ var init_log_intro = __esm({
     init_is_extension_context();
     logIntro = () => {
       try {
-        const version = "0.1.22";
+        const version = "0.1.24";
         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.22",
+  "version": "0.1.24",
   "description": "Select context for coding agents directly from your website",
   "keywords": [
     "agent",
@@ -22,7 +22,11 @@
     "type": "git",
     "url": "git+https://github.com/aidenybai/react-grab.git"
   },
+  "bin": {
+    "react-grab": "./bin/cli.js"
+  },
   "files": [
+    "bin",
     "dist",
     "package.json",
     "README.md",
@@ -65,6 +69,16 @@
         "default": "./dist/react.cjs"
       }
     },
+    "./primitives": {
+      "import": {
+        "types": "./dist/primitives.d.ts",
+        "default": "./dist/primitives.js"
+      },
+      "require": {
+        "types": "./dist/primitives.d.cts",
+        "default": "./dist/primitives.cjs"
+      }
+    },
     "./src/*": "./src/*",
     "./styles.css": "./dist/styles.css",
     "./dist/styles.css": "./dist/styles.css",
@@ -79,7 +93,8 @@
   "dependencies": {
     "@medv/finder": "^4.0.2",
     "bippy": "^0.5.30",
-    "solid-js": "^1.9.10"
+    "solid-js": "^1.9.10",
+    "@react-grab/cli": "0.1.24"
   },
   "devDependencies": {
     "@babel/core": "^7.28.5",