react-grab 0.0.61 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +57 -1
  2. package/dist/{chunk-BPIV2CRB.js → chunk-4MQNXZFV.js} +2 -2
  3. package/dist/{chunk-2EGDLG6B.cjs → chunk-YPTT2O3Z.cjs} +2 -2
  4. package/dist/{core-Dpg0VXHq.d.cts → core-CZmmuMr9.d.cts} +1 -1
  5. package/dist/{core-Dpg0VXHq.d.ts → core-CZmmuMr9.d.ts} +1 -1
  6. package/dist/core.cjs +8 -8
  7. package/dist/core.d.cts +1 -1
  8. package/dist/core.d.ts +1 -1
  9. package/dist/core.js +1 -1
  10. package/dist/index.cjs +8 -8
  11. package/dist/index.d.cts +2 -2
  12. package/dist/index.d.ts +2 -2
  13. package/dist/index.global.js +1 -1
  14. package/dist/index.js +2 -2
  15. package/package.json +1 -1
package/README.md CHANGED
@@ -122,7 +122,7 @@ if (process.env.NODE_ENV === "development") {
122
122
 
123
123
  React Grab can send selected element context directly to your coding agent. This enables a workflow where you select a UI element and an agent automatically makes changes to your codebase.
124
124
 
125
- This means **no copying and pasting** - just select the element and let the agent do the rest.
125
+ This means **no copying and pasting** - just select the element and let the agent do the rest. [Learn more →](https://react-grab.com/blog/agent)
126
126
 
127
127
  ### Claude Code
128
128
 
@@ -146,6 +146,34 @@ The server runs on port `4567` and interfaces with the Claude Agent SDK. Add to
146
146
  <script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>
147
147
  ```
148
148
 
149
+ Or using Next.js `Script` component in your `app/layout.tsx`:
150
+
151
+ ```jsx
152
+ import Script from "next/script";
153
+
154
+ export default function RootLayout({ children }) {
155
+ return (
156
+ <html>
157
+ <head>
158
+ {process.env.NODE_ENV === "development" && (
159
+ <>
160
+ <Script
161
+ src="//unpkg.com/react-grab/dist/index.global.js"
162
+ strategy="beforeInteractive"
163
+ />
164
+ <Script
165
+ src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"
166
+ strategy="lazyOnload"
167
+ />
168
+ </>
169
+ )}
170
+ </head>
171
+ <body>{children}</body>
172
+ </html>
173
+ );
174
+ }
175
+ ```
176
+
149
177
  ### Cursor CLI
150
178
 
151
179
  #### Server Setup
@@ -168,6 +196,34 @@ The server runs on port `5567` and interfaces with the `cursor-agent` CLI. Add t
168
196
  <script src="//unpkg.com/@react-grab/cursor/dist/client.global.js"></script>
169
197
  ```
170
198
 
199
+ Or using Next.js `Script` component in your `app/layout.tsx`:
200
+
201
+ ```jsx
202
+ import Script from "next/script";
203
+
204
+ export default function RootLayout({ children }) {
205
+ return (
206
+ <html>
207
+ <head>
208
+ {process.env.NODE_ENV === "development" && (
209
+ <>
210
+ <Script
211
+ src="//unpkg.com/react-grab/dist/index.global.js"
212
+ strategy="beforeInteractive"
213
+ />
214
+ <Script
215
+ src="//unpkg.com/@react-grab/cursor/dist/client.global.js"
216
+ strategy="lazyOnload"
217
+ />
218
+ </>
219
+ )}
220
+ </head>
221
+ <body>{children}</body>
222
+ </html>
223
+ );
224
+ }
225
+ ```
226
+
171
227
  ## Extending React Grab
172
228
 
173
229
  React Grab provides an public customization API. Check out the [type definitions](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) to see all available options for extending React Grab.
package/dist/{chunk-BPIV2CRB.js → chunk-4MQNXZFV.js} RENAMED
@@ -6136,7 +6136,7 @@ var createAgentManager = (initialAgentOptions) => {
6136
6136
  agentOptions?.onResume?.(sessionWithResumeStatus);
6137
6137
  const abortController = new AbortController();
6138
6138
  abortControllers.set(existingSession.id, abortController);
6139
- const streamIterator = agentOptions.provider.resume(existingSession.id, abortController.signal);
6139
+ const streamIterator = agentOptions.provider.resume(existingSession.id, abortController.signal, storage);
6140
6140
  void executeSessionStream(existingSession, streamIterator);
6141
6141
  }
6142
6142
  };
@@ -6312,7 +6312,7 @@ var init = (rawOptions) => {
6312
6312
  hasInited = true;
6313
6313
  const logIntro = () => {
6314
6314
  try {
6315
- const version = "0.0.61";
6315
+ const version = "0.0.62";
6316
6316
  const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
6317
6317
  console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
6318
6318
  https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${logoDataUri}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`, "");
package/dist/{chunk-2EGDLG6B.cjs → chunk-YPTT2O3Z.cjs} RENAMED
@@ -6138,7 +6138,7 @@ var createAgentManager = (initialAgentOptions) => {
6138
6138
  agentOptions?.onResume?.(sessionWithResumeStatus);
6139
6139
  const abortController = new AbortController();
6140
6140
  abortControllers.set(existingSession.id, abortController);
6141
- const streamIterator = agentOptions.provider.resume(existingSession.id, abortController.signal);
6141
+ const streamIterator = agentOptions.provider.resume(existingSession.id, abortController.signal, storage);
6142
6142
  void executeSessionStream(existingSession, streamIterator);
6143
6143
  }
6144
6144
  };
@@ -6314,7 +6314,7 @@ var init = (rawOptions) => {
6314
6314
  hasInited = true;
6315
6315
  const logIntro = () => {
6316
6316
  try {
6317
- const version = "0.0.61";
6317
+ const version = "0.0.62";
6318
6318
  const logoDataUri = `data:image/svg+xml;base64,${btoa(LOGO_SVG)}`;
6319
6319
  console.log(`%cReact Grab${version ? ` v${version}` : ""}%c
6320
6320
  https://react-grab.com`, `background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${logoDataUri}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`, "");
package/dist/{core-Dpg0VXHq.d.cts → core-CZmmuMr9.d.cts} RENAMED
@@ -210,7 +210,7 @@ interface AgentSession {
210
210
  }
211
211
  interface AgentProvider<T = any> {
212
212
  send: (context: AgentContext<T>, signal: AbortSignal) => AsyncIterable<string>;
213
- resume?: (sessionId: string, signal: AbortSignal) => AsyncIterable<string>;
213
+ resume?: (sessionId: string, signal: AbortSignal, storage: AgentSessionStorage) => AsyncIterable<string>;
214
214
  supportsResume?: boolean;
215
215
  }
216
216
  interface AgentSessionStorage {
package/dist/{core-Dpg0VXHq.d.ts → core-CZmmuMr9.d.ts} RENAMED
@@ -210,7 +210,7 @@ interface AgentSession {
210
210
  }
211
211
  interface AgentProvider<T = any> {
212
212
  send: (context: AgentContext<T>, signal: AbortSignal) => AsyncIterable<string>;
213
- resume?: (sessionId: string, signal: AbortSignal) => AsyncIterable<string>;
213
+ resume?: (sessionId: string, signal: AbortSignal, storage: AgentSessionStorage) => AsyncIterable<string>;
214
214
  supportsResume?: boolean;
215
215
  }
216
216
  interface AgentSessionStorage {
package/dist/core.cjs CHANGED
@@ -1,34 +1,34 @@
1
1
  'use strict';
2
2
 
3
- var chunk2EGDLG6B_cjs = require('./chunk-2EGDLG6B.cjs');
3
+ var chunkYPTT2O3Z_cjs = require('./chunk-YPTT2O3Z.cjs');
4
4
 
5
5
 
6
6
 
7
7
  Object.defineProperty(exports, "DEFAULT_THEME", {
8
8
  enumerable: true,
9
- get: function () { return chunk2EGDLG6B_cjs.DEFAULT_THEME; }
9
+ get: function () { return chunkYPTT2O3Z_cjs.DEFAULT_THEME; }
10
10
  });
11
11
  Object.defineProperty(exports, "formatElementInfo", {
12
12
  enumerable: true,
13
- get: function () { return chunk2EGDLG6B_cjs.getElementContext; }
13
+ get: function () { return chunkYPTT2O3Z_cjs.getElementContext; }
14
14
  });
15
15
  Object.defineProperty(exports, "generateSnippet", {
16
16
  enumerable: true,
17
- get: function () { return chunk2EGDLG6B_cjs.generateSnippet; }
17
+ get: function () { return chunkYPTT2O3Z_cjs.generateSnippet; }
18
18
  });
19
19
  Object.defineProperty(exports, "getFileName", {
20
20
  enumerable: true,
21
- get: function () { return chunk2EGDLG6B_cjs.getFileName; }
21
+ get: function () { return chunkYPTT2O3Z_cjs.getFileName; }
22
22
  });
23
23
  Object.defineProperty(exports, "getStack", {
24
24
  enumerable: true,
25
- get: function () { return chunk2EGDLG6B_cjs.getStack; }
25
+ get: function () { return chunkYPTT2O3Z_cjs.getStack; }
26
26
  });
27
27
  Object.defineProperty(exports, "init", {
28
28
  enumerable: true,
29
- get: function () { return chunk2EGDLG6B_cjs.init; }
29
+ get: function () { return chunkYPTT2O3Z_cjs.init; }
30
30
  });
31
31
  Object.defineProperty(exports, "isInstrumentationActive", {
32
32
  enumerable: true,
33
- get: function () { return chunk2EGDLG6B_cjs.Ee; }
33
+ get: function () { return chunkYPTT2O3Z_cjs.Ee; }
34
34
  });
package/dist/core.d.cts CHANGED
@@ -1,3 +1,3 @@
1
- export { A as AgentContext, o as AgentProvider, n as AgentSession, D as DEFAULT_THEME, O as Options, f as OverlayBounds, R as ReactGrabAPI, s as ReactGrabRendererProps, a as formatElementInfo, b as generateSnippet, r as getFileName, g as getStack, i as init } from './core-Dpg0VXHq.cjs';
1
+ export { A as AgentContext, o as AgentProvider, n as AgentSession, p as AgentSessionStorage, D as DEFAULT_THEME, O as Options, f as OverlayBounds, R as ReactGrabAPI, s as ReactGrabRendererProps, a as formatElementInfo, b as generateSnippet, r as getFileName, g as getStack, i as init } from './core-CZmmuMr9.cjs';
2
2
  export { isInstrumentationActive } from 'bippy';
3
3
  import 'bippy/source';
package/dist/core.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { A as AgentContext, o as AgentProvider, n as AgentSession, D as DEFAULT_THEME, O as Options, f as OverlayBounds, R as ReactGrabAPI, s as ReactGrabRendererProps, a as formatElementInfo, b as generateSnippet, r as getFileName, g as getStack, i as init } from './core-Dpg0VXHq.js';
1
+ export { A as AgentContext, o as AgentProvider, n as AgentSession, p as AgentSessionStorage, D as DEFAULT_THEME, O as Options, f as OverlayBounds, R as ReactGrabAPI, s as ReactGrabRendererProps, a as formatElementInfo, b as generateSnippet, r as getFileName, g as getStack, i as init } from './core-CZmmuMr9.js';
2
2
  export { isInstrumentationActive } from 'bippy';
3
3
  import 'bippy/source';
package/dist/core.js CHANGED
@@ -1 +1 @@
1
- export { DEFAULT_THEME, getElementContext as formatElementInfo, generateSnippet, getFileName, getStack, init, Ee as isInstrumentationActive } from './chunk-BPIV2CRB.js';
1
+ export { DEFAULT_THEME, getElementContext as formatElementInfo, generateSnippet, getFileName, getStack, init, Ee as isInstrumentationActive } from './chunk-4MQNXZFV.js';
package/dist/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunk2EGDLG6B_cjs = require('./chunk-2EGDLG6B.cjs');
3
+ var chunkYPTT2O3Z_cjs = require('./chunk-YPTT2O3Z.cjs');
4
4
 
5
5
  /**
6
6
  * @license MIT
@@ -31,7 +31,7 @@ if (typeof window !== "undefined") {
31
31
  if (window.__REACT_GRAB__) {
32
32
  globalApi = window.__REACT_GRAB__;
33
33
  } else {
34
- globalApi = chunk2EGDLG6B_cjs.init();
34
+ globalApi = chunkYPTT2O3Z_cjs.init();
35
35
  window.__REACT_GRAB__ = globalApi;
36
36
  window.dispatchEvent(
37
37
  new CustomEvent("react-grab:init", { detail: globalApi })
@@ -41,27 +41,27 @@ if (typeof window !== "undefined") {
41
41
 
42
42
  Object.defineProperty(exports, "DEFAULT_THEME", {
43
43
  enumerable: true,
44
- get: function () { return chunk2EGDLG6B_cjs.DEFAULT_THEME; }
44
+ get: function () { return chunkYPTT2O3Z_cjs.DEFAULT_THEME; }
45
45
  });
46
46
  Object.defineProperty(exports, "formatElementInfo", {
47
47
  enumerable: true,
48
- get: function () { return chunk2EGDLG6B_cjs.getElementContext; }
48
+ get: function () { return chunkYPTT2O3Z_cjs.getElementContext; }
49
49
  });
50
50
  Object.defineProperty(exports, "generateSnippet", {
51
51
  enumerable: true,
52
- get: function () { return chunk2EGDLG6B_cjs.generateSnippet; }
52
+ get: function () { return chunkYPTT2O3Z_cjs.generateSnippet; }
53
53
  });
54
54
  Object.defineProperty(exports, "getStack", {
55
55
  enumerable: true,
56
- get: function () { return chunk2EGDLG6B_cjs.getStack; }
56
+ get: function () { return chunkYPTT2O3Z_cjs.getStack; }
57
57
  });
58
58
  Object.defineProperty(exports, "init", {
59
59
  enumerable: true,
60
- get: function () { return chunk2EGDLG6B_cjs.init; }
60
+ get: function () { return chunkYPTT2O3Z_cjs.init; }
61
61
  });
62
62
  Object.defineProperty(exports, "isInstrumentationActive", {
63
63
  enumerable: true,
64
- get: function () { return chunk2EGDLG6B_cjs.Ee; }
64
+ get: function () { return chunkYPTT2O3Z_cjs.Ee; }
65
65
  });
66
66
  exports.getGlobalApi = getGlobalApi;
67
67
  exports.setGlobalApi = setGlobalApi;
package/dist/index.d.cts CHANGED
@@ -1,5 +1,5 @@
1
- import { R as ReactGrabAPI } from './core-Dpg0VXHq.cjs';
2
- export { A as AgentContext, q as AgentOptions, o as AgentProvider, n as AgentSession, p as AgentSessionStorage, C as CrosshairContext, D as DEFAULT_THEME, k as DeepPartial, h as DragRect, m as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, I as InputModeContext, O as Options, f as OverlayBounds, P as Position, c as ReactGrabState, j as Rect, e as RenderData, d as RenderType, l as SuccessLabelContext, S as SuccessLabelType, T as Theme, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './core-Dpg0VXHq.cjs';
1
+ import { R as ReactGrabAPI } from './core-CZmmuMr9.cjs';
2
+ export { A as AgentContext, q as AgentOptions, o as AgentProvider, n as AgentSession, p as AgentSessionStorage, C as CrosshairContext, D as DEFAULT_THEME, k as DeepPartial, h as DragRect, m as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, I as InputModeContext, O as Options, f as OverlayBounds, P as Position, c as ReactGrabState, j as Rect, e as RenderData, d as RenderType, l as SuccessLabelContext, S as SuccessLabelType, T as Theme, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './core-CZmmuMr9.cjs';
3
3
  export { isInstrumentationActive } from 'bippy';
4
4
  import 'bippy/source';
5
5
 
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { R as ReactGrabAPI } from './core-Dpg0VXHq.js';
2
- export { A as AgentContext, q as AgentOptions, o as AgentProvider, n as AgentSession, p as AgentSessionStorage, C as CrosshairContext, D as DEFAULT_THEME, k as DeepPartial, h as DragRect, m as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, I as InputModeContext, O as Options, f as OverlayBounds, P as Position, c as ReactGrabState, j as Rect, e as RenderData, d as RenderType, l as SuccessLabelContext, S as SuccessLabelType, T as Theme, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './core-Dpg0VXHq.js';
1
+ import { R as ReactGrabAPI } from './core-CZmmuMr9.js';
2
+ export { A as AgentContext, q as AgentOptions, o as AgentProvider, n as AgentSession, p as AgentSessionStorage, C as CrosshairContext, D as DEFAULT_THEME, k as DeepPartial, h as DragRect, m as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, I as InputModeContext, O as Options, f as OverlayBounds, P as Position, c as ReactGrabState, j as Rect, e as RenderData, d as RenderType, l as SuccessLabelContext, S as SuccessLabelType, T as Theme, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './core-CZmmuMr9.js';
3
3
  export { isInstrumentationActive } from 'bippy';
4
4
  import 'bippy/source';
5
5
 
package/dist/index.global.js CHANGED
@@ -29,7 +29,7 @@ ${t.stack}`:""}},hl=e=>{let t=Error.prepareStackTrace;Error.prepareStackTrace=vo
29
29
  ${N}`),p.length>0?`<${t}${r}>${p}
30
30
  </${t}>`:`<${t}${r} />`};var Tl=()=>document.hasFocus()?new Promise(e=>setTimeout(e,50)):new Promise(e=>{let t=()=>{window.removeEventListener("focus",t),setTimeout(e,50);};window.addEventListener("focus",t),window.focus();}),yn=async(e,t)=>{await Tl();try{try{return await navigator.clipboard.writeText(e),t?.(),!0}catch{return Nl(e,t)}}catch{return false}},Nl=(e,t)=>{if(!document.execCommand)return false;let n=document.createElement("textarea");n.value=String(e),n.style.clipPath="inset(50%)",n.ariaHidden="true",(document.body||document.documentElement).append(n);try{n.select();let i=document.execCommand("copy");return i&&t?.(),i}finally{n.remove();}};var yi=(e,t=window.getComputedStyle(e))=>t.display!=="none"&&t.visibility!=="hidden"&&t.opacity!=="0";var St=e=>{if(e.closest(`[${ht}]`))return false;let t=window.getComputedStyle(e);return !(!yi(e,t)||t.pointerEvents==="none")};var wr=(e,t)=>{let n=document.elementsFromPoint(e,t);for(let r of n)if(St(r))return r;return null};var Al=(e,t)=>{let n=Math.max(e.left,t.left),r=Math.max(e.top,t.top),i=Math.min(e.right,t.right),o=Math.min(e.bottom,t.bottom),a=Math.max(0,i-n),l=Math.max(0,o-r);return a*l},_l=(e,t)=>e.left<t.right&&e.right>t.left&&e.top<t.bottom&&e.bottom>t.top,wi=(e,t,n)=>{let r=[],i=Array.from(document.querySelectorAll("*")),o={left:e.x,top:e.y,right:e.x+e.width,bottom:e.y+e.height};for(let a of i){if(!n){let d=(a.tagName||"").toUpperCase();if(d==="HTML"||d==="BODY")continue}if(!t(a))continue;let l=a.getBoundingClientRect(),c={left:l.left,top:l.top,right:l.left+l.width,bottom:l.top+l.height};if(n){let d=Al(o,c),p=Math.max(0,l.width*l.height);p>0&&d/p>=.75&&r.push(a);}else _l(c,o)&&r.push(a);}return r},xi=e=>e.filter(t=>!e.some(n=>n!==t&&n.contains(t))),vi=(e,t)=>{let n=wi(e,t,true);return xi(n)},Ci=(e,t)=>{let n=wi(e,t,false);return xi(n)};var Rl=e=>typeof e=="number"&&!Number.isNaN(e)&&Number.isFinite(e),Ll=e=>{let t=e.trim();if(!t)return null;let n=parseFloat(t);return Rl(n)?n:null},Si=(e,t)=>{let n=e.split(",");if(n.length!==t)return null;let r=[];for(let i of n){let o=Ll(i);if(o===null)return null;r.push(o);}return r},Ol=(e,t,n,r)=>e===1&&t===0&&n===0&&r===1,Ml=e=>e[0]===1&&e[1]===0&&e[2]===0&&e[3]===0&&e[4]===0&&e[5]===1&&e[6]===0&&e[7]===0&&e[8]===0&&e[9]===0&&e[10]===1&&e[11]===0&&e[15]===1,wn=e=>{try{if(!(e instanceof Element))return "none";let t=window.getComputedStyle(e);if(!t)return "none";let n=t.transform;if(!n||n==="none")return "none";let r=n.match(/^matrix3d\(([^)]+)\)$/);if(r){let o=Si(r[1],16);if(o&&o.length===16){let a=[...o];return a[12]=0,a[13]=0,a[14]=0,Ml(a)?"none":`matrix3d(${a.join(", ")})`}}let i=n.match(/^matrix\(([^)]+)\)$/);if(i){let o=Si(i[1],6);if(o&&o.length===6){let[a,l,c,d]=o;return Ol(a,l,c,d)?"none":`matrix(${a}, ${l}, ${c}, ${d}, 0, 0)`}}return "none"}catch{return "none"}};var Le=e=>{let t=e.getBoundingClientRect();return {borderRadius:window.getComputedStyle(e).borderRadius||"0px",height:t.height,transform:wn(e),width:t.width,x:t.left,y:t.top}};var Il=new Set(["c","C","\u0441","\u0421","\u023C","\u023B","\u2184","\u2183","\u1D04","\u1D9C","\u2C7C","\u217D","\u216D","\xE7","\xC7","\u0107","\u0106","\u010D","\u010C","\u0109","\u0108","\u010B","\u010A"]),xn=(e,t)=>t==="KeyC"?true:!e||e.length!==1?false:Il.has(e);var xr=(e,t)=>{let n=e.toLowerCase();return t.startsWith("Key")?t.slice(3).toLowerCase()===n:t.startsWith("Digit")?t.slice(5)===n:false},Ei=(e,t)=>{if(t.activationShortcut)return t.activationShortcut(e);if(t.activationKey){let{key:n,metaKey:r,ctrlKey:i,shiftKey:o,altKey:a}=t.activationKey;if(!n){if(!un.includes(e.key))return false;let h=r?e.metaKey||e.key==="Meta":true,N=i?e.ctrlKey||e.key==="Control":true,w=o?e.shiftKey||e.key==="Shift":true,C=a?e.altKey||e.key==="Alt":true,T=h&&N&&w&&C,P=[r,i,o,a].filter(Boolean).length,k=[e.metaKey||e.key==="Meta",e.ctrlKey||e.key==="Control",e.shiftKey||e.key==="Shift",e.altKey||e.key==="Alt"].filter(Boolean).length;return T&&k>=P}let c=e.key.toLowerCase()===n.toLowerCase()||xr(n,e.code),p=r||i||o||a?(r?e.metaKey:true)&&(i?e.ctrlKey:true)&&(o?e.shiftKey:true)&&(a?e.altKey:true):e.metaKey||e.ctrlKey;return c&&p}return (e.metaKey||e.ctrlKey)&&xn(e.key,e.code)};var ze=(e,t)=>e.composedPath().some(n=>n instanceof HTMLElement&&n.hasAttribute(t));var vn={enabled:true,hue:0,selectionBox:{enabled:true,color:void 0,borderRadius:void 0},dragBox:{enabled:true,color:void 0},grabbedBoxes:{enabled:true,color:void 0},elementLabel:{enabled:true,backgroundColor:void 0,textColor:void 0,borderColor:void 0,padding:void 0,cursorOffset:void 0},successLabels:{enabled:true},crosshair:{enabled:true,color:void 0},inputOverlay:{enabled:true}},ki=(e,t)=>({enabled:t.enabled??e.enabled,hue:t.hue??e.hue,selectionBox:{enabled:t.selectionBox?.enabled??e.selectionBox.enabled,color:t.selectionBox?.color??e.selectionBox.color,borderRadius:t.selectionBox?.borderRadius??e.selectionBox.borderRadius},dragBox:{enabled:t.dragBox?.enabled??e.dragBox.enabled,color:t.dragBox?.color??e.dragBox.color},grabbedBoxes:{enabled:t.grabbedBoxes?.enabled??e.grabbedBoxes.enabled,color:t.grabbedBoxes?.color??e.grabbedBoxes.color},elementLabel:{enabled:t.elementLabel?.enabled??e.elementLabel.enabled,backgroundColor:t.elementLabel?.backgroundColor??e.elementLabel.backgroundColor,textColor:t.elementLabel?.textColor??e.elementLabel.textColor,borderColor:t.elementLabel?.borderColor??e.elementLabel.borderColor,padding:t.elementLabel?.padding??e.elementLabel.padding,cursorOffset:t.elementLabel?.cursorOffset??e.elementLabel.cursorOffset},successLabels:{enabled:t.successLabels?.enabled??e.successLabels.enabled},crosshair:{enabled:t.crosshair?.enabled??e.crosshair.enabled,color:t.crosshair?.color??e.crosshair.color},inputOverlay:{enabled:t.inputOverlay?.enabled??e.inputOverlay.enabled}}),vr=e=>e?ki(vn,e):vn,Ti=ki;var Cr="react-grab:agent-sessions",Pl=()=>`session-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,Ni=(e,t,n,r,i)=>({id:Pl(),context:e,lastStatus:"",isStreaming:true,createdAt:Date.now(),position:t,selectionBounds:n,tagName:r,componentName:i}),Sr=e=>e||null,lt=new Map,Cn=(e,t)=>{let n=Sr(t);if(!n){lt.clear(),e.forEach((r,i)=>lt.set(i,r));return}try{let r=Object.fromEntries(e);n.setItem(Cr,JSON.stringify(r));}catch{lt.clear(),e.forEach((r,i)=>lt.set(i,r));}},Er=(e,t)=>{let n=Sn(t);n.set(e.id,e),Cn(n,t);},Sn=e=>{let t=Sr(e);if(!t)return new Map(lt);try{let n=t.getItem(Cr);if(!n)return new Map;let r=JSON.parse(n);return new Map(Object.entries(r))}catch{return new Map}};var En=e=>{let t=Sr(e);if(!t){lt.clear();return}try{t.removeItem(Cr);}catch{lt.clear();}},Ai=(e,t)=>{let n=Sn(t);n.delete(e),Cn(n,t);},kn=(e,t,n)=>{let r={...e,...t};return Er(r,n),r};var Tn=async(e,t={})=>{let r=(await Promise.allSettled(e.map(i=>Ct(i,t)))).map(i=>i.status==="fulfilled"?i.value:"").filter(i=>i.trim());return r.length===0?"":r.join(`
31
31
 
32
- `)};var _i=e=>{let[t,n]=R(new Map),r=new Map,i=new Map,o=e,a=k=>{o=k;},l=()=>o,c=()=>t().size>0,d=async(k,v)=>{let A=o?.storage,H=false,M=false,G=false;try{for await(let Y of v){let y=t().get(k.id);if(!y)break;let m=kn(y,{lastStatus:Y},A);n(u=>new Map(u).set(k.id,m)),o?.onStatus?.(Y,m);}H=!0;let K=t().get(k.id);if(K){let Y=kn(K,{isStreaming:!1},A);n(oe=>new Map(oe).set(k.id,Y)),o?.onComplete?.(Y);}}catch(q){let Y=t().get(k.id);if(q instanceof Error&&q.name==="AbortError"){if(M=true,Y){let oe=i.get(k.id);o?.onAbort?.(Y,oe);}}else if(G=true,Y){let oe=q instanceof Error?q.message:"Unknown error",y=kn(Y,{lastStatus:`Error: ${oe}`,isStreaming:false},A);n(m=>new Map(m).set(k.id,y)),q instanceof Error&&o?.onError?.(q,y);}}finally{r.delete(k.id);let q=()=>{i.delete(k.id),Ai(k.id,A),n(K=>{let Y=new Map(K);return Y.delete(k.id),Y});};M?q():(H||G)&&setTimeout(q,1500);}},p=k=>{let{selectionBounds:v,tagName:A}=k;if(!v)return;let H=v.x+v.width/2,M=v.y+v.height/2,G=document.elementFromPoint(H,M);if(G&&!(A&&G.tagName.toLowerCase()!==A))return G};return {sessions:t,isProcessing:c,tryResumeSessions:()=>{let k=o?.storage,v=Sn(k),A=Array.from(v.values()).filter(M=>M.isStreaming);if(A.length===0){En(k);return}if(!o?.provider?.supportsResume||!o.provider.resume){En(k);return}let H=new Map(A.map(M=>[M.id,M]));n(H),Cn(H,k);for(let M of A){let G=p(M);G&&i.set(M.id,G);let q={...M,lastStatus:M.lastStatus||"Resuming...",position:M.position??{x:window.innerWidth/2,y:window.innerHeight/2}};n(oe=>new Map(oe).set(M.id,q)),o?.onResume?.(q);let K=new AbortController;r.set(M.id,K);let Y=o.provider.resume(M.id,K.signal);d(M,Y);}},startSession:async k=>{let{element:v,prompt:A,position:H,selectionBounds:M}=k,G=o?.storage;if(!o?.provider)return;let Y={content:await Tn([v]),prompt:A,options:o?.getOptions?.()},oe=(v.tagName||"").toLowerCase()||void 0,y=await He(v)||void 0,m=Ni(Y,H,M,oe,y);m.lastStatus="Please wait\u2026",i.set(m.id,v),n(L=>new Map(L).set(m.id,m)),Er(m,G),o.onStart?.(m);let u=new AbortController;r.set(m.id,u);let b=o.provider.send(Y,u.signal);d(m,b);},abortSession:k=>{let v=r.get(k);v&&v.abort();},abortAllSessions:()=>{r.forEach(k=>k.abort()),r.clear(),n(new Map),En(o?.storage);},updateSessionBoundsOnViewportChange:()=>{let k=t();if(k.size===0)return;let v=new Map(k),A=false;for(let[H,M]of k){let G=i.get(H);if(!G||!document.contains(G)){let q=p(M);q&&(i.set(H,q),G=q);}if(G&&document.contains(G)){let q=Le(G);q&&(v.set(H,{...M,selectionBounds:q}),A=true);}}A&&n(v);},getSessionElement:k=>i.get(k),setOptions:a,getOptions:l}};var Li=ie('<span class="tabular-nums align-middle">'),Oi=ie('<span class="font-mono tabular-nums align-middle">&lt;<!>>'),Hl=ie('<span class="tabular-nums ml-1 align-middle"> in '),zl=e=>"scheduler"in globalThis?globalThis.scheduler.postTask(e,{priority:"background"}):"requestIdleCallback"in window?requestIdleCallback(e):setTimeout(e,0),kr=false,jl=()=>{if(typeof window>"u")return null;try{let e=document.currentScript?.getAttribute("data-options");return e?JSON.parse(e):null}catch{return null}},Tr=e=>{let t=vr(e?.theme);if(typeof window>"u")return {activate:()=>{},deactivate:()=>{},toggle:()=>{},isActive:()=>false,dispose:()=>{},copyElement:()=>Promise.resolve(false),getState:()=>({isActive:false,isDragging:false,isCopying:false,isInputMode:false,targetElement:null,dragBounds:null}),updateTheme:()=>{},getTheme:()=>t,setAgent:()=>{}};let r={enabled:true,keyHoldDuration:200,allowActivationInsideInput:true,maxContextLines:3,...jl(),...e},i=vr(r.theme);return r.enabled===false||kr?{activate:()=>{},deactivate:()=>{},toggle:()=>{},isActive:()=>false,dispose:()=>{},copyElement:()=>Promise.resolve(false),getState:()=>({isActive:false,isDragging:false,isCopying:false,isInputMode:false,targetElement:null,dragBounds:null}),updateTheme:()=>{},getTheme:()=>i,setAgent:()=>{}}:(kr=true,(()=>{try{let a="0.0.61",l=`data:image/svg+xml;base64,${btoa(To)}`;console.log(`%cReact Grab${a?` v${a}`:""}%c
32
+ `)};var _i=e=>{let[t,n]=R(new Map),r=new Map,i=new Map,o=e,a=k=>{o=k;},l=()=>o,c=()=>t().size>0,d=async(k,v)=>{let A=o?.storage,H=false,M=false,G=false;try{for await(let Y of v){let y=t().get(k.id);if(!y)break;let m=kn(y,{lastStatus:Y},A);n(u=>new Map(u).set(k.id,m)),o?.onStatus?.(Y,m);}H=!0;let K=t().get(k.id);if(K){let Y=kn(K,{isStreaming:!1},A);n(oe=>new Map(oe).set(k.id,Y)),o?.onComplete?.(Y);}}catch(q){let Y=t().get(k.id);if(q instanceof Error&&q.name==="AbortError"){if(M=true,Y){let oe=i.get(k.id);o?.onAbort?.(Y,oe);}}else if(G=true,Y){let oe=q instanceof Error?q.message:"Unknown error",y=kn(Y,{lastStatus:`Error: ${oe}`,isStreaming:false},A);n(m=>new Map(m).set(k.id,y)),q instanceof Error&&o?.onError?.(q,y);}}finally{r.delete(k.id);let q=()=>{i.delete(k.id),Ai(k.id,A),n(K=>{let Y=new Map(K);return Y.delete(k.id),Y});};M?q():(H||G)&&setTimeout(q,1500);}},p=k=>{let{selectionBounds:v,tagName:A}=k;if(!v)return;let H=v.x+v.width/2,M=v.y+v.height/2,G=document.elementFromPoint(H,M);if(G&&!(A&&G.tagName.toLowerCase()!==A))return G};return {sessions:t,isProcessing:c,tryResumeSessions:()=>{let k=o?.storage,v=Sn(k),A=Array.from(v.values()).filter(M=>M.isStreaming);if(A.length===0){En(k);return}if(!o?.provider?.supportsResume||!o.provider.resume){En(k);return}let H=new Map(A.map(M=>[M.id,M]));n(H),Cn(H,k);for(let M of A){let G=p(M);G&&i.set(M.id,G);let q={...M,lastStatus:M.lastStatus||"Resuming...",position:M.position??{x:window.innerWidth/2,y:window.innerHeight/2}};n(oe=>new Map(oe).set(M.id,q)),o?.onResume?.(q);let K=new AbortController;r.set(M.id,K);let Y=o.provider.resume(M.id,K.signal,k);d(M,Y);}},startSession:async k=>{let{element:v,prompt:A,position:H,selectionBounds:M}=k,G=o?.storage;if(!o?.provider)return;let Y={content:await Tn([v]),prompt:A,options:o?.getOptions?.()},oe=(v.tagName||"").toLowerCase()||void 0,y=await He(v)||void 0,m=Ni(Y,H,M,oe,y);m.lastStatus="Please wait\u2026",i.set(m.id,v),n(L=>new Map(L).set(m.id,m)),Er(m,G),o.onStart?.(m);let u=new AbortController;r.set(m.id,u);let b=o.provider.send(Y,u.signal);d(m,b);},abortSession:k=>{let v=r.get(k);v&&v.abort();},abortAllSessions:()=>{r.forEach(k=>k.abort()),r.clear(),n(new Map),En(o?.storage);},updateSessionBoundsOnViewportChange:()=>{let k=t();if(k.size===0)return;let v=new Map(k),A=false;for(let[H,M]of k){let G=i.get(H);if(!G||!document.contains(G)){let q=p(M);q&&(i.set(H,q),G=q);}if(G&&document.contains(G)){let q=Le(G);q&&(v.set(H,{...M,selectionBounds:q}),A=true);}}A&&n(v);},getSessionElement:k=>i.get(k),setOptions:a,getOptions:l}};var Li=ie('<span class="tabular-nums align-middle">'),Oi=ie('<span class="font-mono tabular-nums align-middle">&lt;<!>>'),Hl=ie('<span class="tabular-nums ml-1 align-middle"> in '),zl=e=>"scheduler"in globalThis?globalThis.scheduler.postTask(e,{priority:"background"}):"requestIdleCallback"in window?requestIdleCallback(e):setTimeout(e,0),kr=false,jl=()=>{if(typeof window>"u")return null;try{let e=document.currentScript?.getAttribute("data-options");return e?JSON.parse(e):null}catch{return null}},Tr=e=>{let t=vr(e?.theme);if(typeof window>"u")return {activate:()=>{},deactivate:()=>{},toggle:()=>{},isActive:()=>false,dispose:()=>{},copyElement:()=>Promise.resolve(false),getState:()=>({isActive:false,isDragging:false,isCopying:false,isInputMode:false,targetElement:null,dragBounds:null}),updateTheme:()=>{},getTheme:()=>t,setAgent:()=>{}};let r={enabled:true,keyHoldDuration:200,allowActivationInsideInput:true,maxContextLines:3,...jl(),...e},i=vr(r.theme);return r.enabled===false||kr?{activate:()=>{},deactivate:()=>{},toggle:()=>{},isActive:()=>false,dispose:()=>{},copyElement:()=>Promise.resolve(false),getState:()=>({isActive:false,isDragging:false,isCopying:false,isInputMode:false,targetElement:null,dragBounds:null}),updateTheme:()=>{},getTheme:()=>i,setAgent:()=>{}}:(kr=true,(()=>{try{let a="0.0.62",l=`data:image/svg+xml;base64,${btoa(To)}`;console.log(`%cReact Grab${a?` v${a}`:""}%c
33
33
  https://react-grab.com`,`background: #330039; color: #ffffff; border: 1px solid #d75fcb; padding: 4px 4px 4px 24px; border-radius: 4px; background-image: url("${l}"); background-size: 16px 16px; background-repeat: no-repeat; background-position: 4px center; display: inline-block; margin-bottom: 4px;`,""),navigator.onLine&&a&&fetch(`https://www.react-grab.com/api/version?t=${Date.now()}`,{referrerPolicy:"origin",keepalive:!0,priority:"low",cache:"no-store"}).then(c=>c.text()).then(c=>{c&&c!==a&&console.warn(`[React Grab] v${a} is outdated (latest: v${c})`);}).catch(()=>null);}catch{}})(),ot(a=>{let[l,c]=R(i),[d,p]=R(false),[h,N]=R(-1e3),[w,C]=R(-1e3),[T,P]=R(null),k=0,[v,A]=R(false),[H,M]=R(-1e3),[G,q]=R(-1e3),[K,Y]=R(false),[oe,y]=R("idle"),[m,u]=R([]),[b,L]=R(null),[_,V]=R(null),[I,z]=R([]),[j,B]=R([]),[F,ee]=R(false),[W,ne]=R(false),[be,qe]=R(false),[We,Ze]=R(-1e3),[Vt,Et]=R(-1e3),[Ce,ye]=R(0),[le,Se]=R(false),[Gt,Je]=R(""),[Mi,Rn]=R(false),[Nr,Ar]=R(void 0),[_r,Rr]=R(void 0),[Lr,Qe]=R(false),[Ii,et]=R(false),[Pi,kt]=R(null),[Kt,Fi]=R(!!r.agent?.provider),[Ln,On]=R(-1e3),[Mn,In]=R(-1e3),[Or,Ut]=R(false),[Tt,Pn]=R([]),je=s=>(s.tagName||"").toLowerCase(),Mr=ae(()=>{let s=Tt();if(!(s.length===0||!s[0]))return je(s[0])||void 0}),[Ir]=nn(()=>{let s=Tt();return s.length===0||!s[0]?null:s[0]},async s=>{if(s)return await He(s)||void 0}),Yt=()=>{On(-1e3),In(-1e3),Pn([]);},$i=()=>{let s=window.getSelection();if(!s||s.isCollapsed||s.rangeCount===0)return;let g=s.getRangeAt(0).getClientRects();if(g.length===0)return;let S=(()=>{if(!s.anchorNode||!s.focusNode)return false;let X=s.anchorNode.compareDocumentPosition(s.focusNode);return X&Node.DOCUMENT_POSITION_FOLLOWING?false:X&Node.DOCUMENT_POSITION_PRECEDING?true:s.anchorOffset>s.focusOffset})(),E=S?g[0]:g[g.length-1],$=S?E.left:E.right,D=E.top+E.height/2;On($),In(D);};Q(ge(()=>Ce(),()=>{Or()&&$i();}));let Fn=ae(()=>{Ce();let s=Tt();if(!(s.length===0||!s[0]))return Le(s[0])}),Pe=null,Xt=null,qt=null,ke=null,tt=null,Nt=null,_e=ae(()=>F()&&!K()),Pr=(s,f)=>({top:f<25,bottom:f>window.innerHeight-25,left:s<25,right:s>window.innerWidth-25}),Fr=(s,f)=>{let g=`grabbed-${Date.now()}-${Math.random()}`,S=Date.now(),E={id:g,bounds:s,createdAt:S,element:f},$=I();z([...$,E]),r.onGrabbedBox?.(s,f),setTimeout(()=>{z(D=>D.filter(X=>X.id!==g));},1700);},$r=(s,f)=>{let g=`success-${Date.now()}-${Math.random()}`;B(S=>[...S,{id:g,text:s}]),r.onSuccessLabel?.(s,f,{x:h(),y:w()}),setTimeout(()=>{B(S=>S.filter(E=>E.id!==g));},1700);},Di=s=>{let f=je(s);return f?`<${f}>`:"1 element"},Dr=s=>{let f=s.map(g=>({tagName:je(g)}));window.dispatchEvent(new CustomEvent("react-grab:element-selected",{detail:{elements:f}}));},Bi=(s,f,g,S,E,$)=>{let D=`label-${Date.now()}-${Math.random().toString(36).slice(2)}`;return u(X=>[...X,{id:D,bounds:s,tagName:f,componentName:g,status:S,createdAt:Date.now(),element:E,mouseX:$}]),D},Br=(s,f)=>{u(g=>g.map(S=>S.id===s?{...S,status:f}:S));},Hi=s=>{u(f=>f.filter(g=>g.id!==s));},At=async(s,f,g,S,E,$,D)=>{Ze(s),Et(f),Y(true),Ki();let X=S&&E?Bi(S,E,$,"copying",D,s):null;await g().finally(()=>{Y(false),Wt(),X&&(Br(X,"copied"),setTimeout(()=>{Br(X,"fading"),setTimeout(()=>{Hi(X);},350);},1500)),W()&&Ee();});},zi=s=>"innerText"in s,ji=s=>zi(s)?s.innerText:s.textContent??"",Hr=s=>s.map(f=>ji(f).trim()).filter(f=>f.length>0).join(`
34
34
 
35
35
  `),$n=async(s,f)=>{let g=false,S="";await r.onBeforeCopy?.(s);try{let E=await Promise.allSettled(s.map(D=>Ct(D,{maxLines:r.maxContextLines}))),$=[];for(let D of E)D.status==="fulfilled"&&D.value.trim()&&$.push(D.value);if($.length>0){let D=$.join(`
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { init } from './chunk-BPIV2CRB.js';
2
- export { DEFAULT_THEME, getElementContext as formatElementInfo, generateSnippet, getStack, init, Ee as isInstrumentationActive } from './chunk-BPIV2CRB.js';
1
+ import { init } from './chunk-4MQNXZFV.js';
2
+ export { DEFAULT_THEME, getElementContext as formatElementInfo, generateSnippet, getStack, init, Ee as isInstrumentationActive } from './chunk-4MQNXZFV.js';
3
3
 
4
4
  /**
5
5
  * @license MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-grab",
3
- "version": "0.0.61",
3
+ "version": "0.0.62",
4
4
  "description": "Grab any element in your app and give it to Cursor, Claude Code, or other AI coding agents.",
5
5
  "keywords": [
6
6
  "react",