react-grab 0.1.0-beta.12 → 0.1.0-beta.13

package/dist/{index-bp3m7etC.d.ts → index-S4g1Qwb1.d.ts}

@@ -96,6 +96,7 @@ interface ReactGrabState {
         createdAt: number;
     }>;
     selectionFilePath: string | null;
+    toolbarState: ToolbarState | null;
 }
 type ElementLabelVariant = "hover" | "processing" | "success";
 interface PromptModeContext {
@@ -177,6 +178,12 @@ interface AgentOptions<T = any> {
     onDismiss?: (session: AgentSession, elements: Element[]) => void;
 }
 type ActivationMode = "toggle" | "hold";
+interface ActionContextHooks {
+    transformHtmlContent: (html: string, elements: Element[]) => Promise<string>;
+    transformScreenshot: (blob: Blob, elements: Element[], bounds: ScreenshotBounds) => Promise<Blob>;
+    onOpenFile: (filePath: string, lineNumber?: number) => boolean | void;
+    transformOpenFileUrl: (url: string, filePath: string, lineNumber?: number) => string;
+}
 interface ActionContext {
     element: Element;
     elements: Element[];
@@ -185,15 +192,30 @@ interface ActionContext {
     componentName?: string;
     tagName?: string;
     enterPromptMode?: (agent?: AgentOptions) => void;
+    hooks: ActionContextHooks;
+    performWithFeedback: (action: () => Promise<boolean>) => Promise<void>;
+    hideContextMenu: () => void;
+    hideOverlay: () => void;
+    showOverlay: () => void;
+    cleanup: () => void;
+}
+interface ContextMenuActionContext extends ActionContext {
+    copy?: () => void;
 }
 interface ContextMenuAction {
     id: string;
     label: string;
     shortcut?: string;
     enabled?: boolean | ((context: ActionContext) => boolean);
-    onAction: (context: ActionContext) => void;
+    onAction: (context: ContextMenuActionContext) => void | Promise<void>;
     agent?: AgentOptions;
 }
+interface ScreenshotBounds {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
 interface PluginHooks {
     onActivate?: () => void;
     onDeactivate?: () => void;
@@ -202,6 +224,7 @@ interface PluginHooks {
     onDragStart?: (startX: number, startY: number) => void;
     onDragEnd?: (elements: Element[], bounds: DragRect) => void;
     onBeforeCopy?: (elements: Element[]) => void | Promise<void>;
+    transformCopyContent?: (content: string, elements: Element[]) => string | Promise<string>;
     onAfterCopy?: (elements: Element[], success: boolean) => void;
     onCopySuccess?: (elements: Element[], content: string) => void;
     onCopyError?: (error: Error) => void;
@@ -217,6 +240,12 @@ interface PluginHooks {
         y: number;
     }) => void;
     onOpenFile?: (filePath: string, lineNumber?: number) => boolean | void;
+    transformHtmlContent?: (html: string, elements: Element[]) => string | Promise<string>;
+    transformScreenshot?: (blob: Blob, elements: Element[], bounds: ScreenshotBounds) => Blob | Promise<Blob>;
+    transformAgentContext?: (context: AgentContext, elements: Element[]) => AgentContext | Promise<AgentContext>;
+    transformActionContext?: (context: ActionContext) => ActionContext;
+    transformOpenFileUrl?: (url: string, filePath: string, lineNumber?: number) => string;
+    transformSnippet?: (snippet: string, element: Element) => string | Promise<string>;
 }
 interface PluginConfig {
     theme?: DeepPartial<Theme>;
@@ -241,18 +270,37 @@ interface Options {
     maxContextLines?: number;
     activationKey?: ActivationKey;
     getContent?: (elements: Element[]) => Promise<string> | string;
+    /**
+     * Whether to freeze React state updates while React Grab is active.
+     * This prevents UI changes from interfering with element selection.
+     * @default true
+     */
+    freezeReactUpdates?: boolean;
+}
+interface SettableOptions extends Options {
+    enabled?: never;
 }
-type SettableOptions = Omit<Options, "enabled">;
 interface SourceInfo {
     filePath: string;
     lineNumber: number | null;
     componentName: string | null;
 }
+interface ToolbarState {
+    edge: "top" | "bottom" | "left" | "right";
+    ratio: number;
+    collapsed: boolean;
+    enabled: boolean;
+}
 interface ReactGrabAPI {
     activate: () => void;
     deactivate: () => void;
     toggle: () => void;
     isActive: () => boolean;
+    isEnabled: () => boolean;
+    setEnabled: (enabled: boolean) => void;
+    getToolbarState: () => ToolbarState | null;
+    setToolbarState: (state: Partial<ToolbarState>) => void;
+    onToolbarStateChange: (callback: (state: ToolbarState) => void) => () => void;
     dispose: () => void;
     copyElement: (elements: Element | Element[]) => Promise<boolean>;
     getSource: (element: Element) => Promise<SourceInfo | null>;
@@ -311,6 +359,7 @@ interface ReactGrabRendererProps {
     mouseX?: number;
     mouseY?: number;
     crosshairVisible?: boolean;
+    isFrozen?: boolean;
     inputValue?: string;
     isPromptMode?: boolean;
     replyToPrompt?: string;
@@ -329,6 +378,7 @@ interface ReactGrabRendererProps {
     onRetrySession?: (sessionId: string) => void;
     onShowContextMenuSession?: (sessionId: string) => void;
     onShowContextMenuInstance?: (instanceId: string) => void;
+    onLabelInstanceHoverChange?: (instanceId: string, isHovered: boolean) => void;
     onInputChange?: (value: string) => void;
     onInputSubmit?: () => void;
     onInputCancel?: () => void;
@@ -343,6 +393,10 @@ interface ReactGrabRendererProps {
     onToggleActive?: () => void;
     enabled?: boolean;
     onToggleEnabled?: () => void;
+    shakeCount?: number;
+    onToolbarStateChange?: (state: ToolbarState) => void;
+    onSubscribeToToolbarStateChanges?: (callback: (state: ToolbarState) => void) => () => void;
+    onToolbarSelectHoverChange?: (isHovered: boolean) => void;
     contextMenuPosition?: {
         x: number;
         y: number;
@@ -353,10 +407,6 @@ interface ReactGrabRendererProps {
     contextMenuHasFilePath?: boolean;
     actions?: ContextMenuAction[];
     actionContext?: ActionContext;
-    onContextMenuCopy?: () => void;
-    onContextMenuCopyScreenshot?: () => void;
-    onContextMenuCopyHtml?: () => void;
-    onContextMenuOpen?: () => void;
     onContextMenuDismiss?: () => void;
     onContextMenuHide?: () => void;
 }
@@ -394,10 +444,10 @@ declare const generateSnippet: (elements: Element[], options?: GenerateSnippetOp
 
 interface CopyContentOptions {
     onSuccess?: () => void;
-    prompt?: string;
+    name?: string;
 }
 declare const copyContent: (content: string, options?: CopyContentOptions) => boolean;
 
 declare const init: (rawOptions?: Options) => ReactGrabAPI;
 
-export { type AgentContext as A, type CrosshairContext as C, DEFAULT_THEME as D, type ElementLabelVariant as E, type GrabbedBox as G, type Options as O, type PromptModeContext as P, type ReactGrabAPI as R, type SourceInfo as S, type Theme as T, getElementContext as a, generateSnippet as b, type ReactGrabState as c, type OverlayBounds as d, type DragRect as e, type Rect as f, getStack as g, type DeepPartial as h, init as i, type ElementLabelContext as j, type AgentSession as k, type AgentProvider as l, type AgentSessionStorage as m, type AgentOptions as n, type AgentCompleteResult as o, type SettableOptions as p, type ActivationMode as q, type ContextMenuAction as r, type ActionContext as s, type Plugin as t, type PluginConfig as u, type PluginHooks as v, type ReactGrabRendererProps as w, copyContent as x };
+export { type AgentContext as A, copyContent as B, type CrosshairContext as C, DEFAULT_THEME as D, type ElementLabelVariant as E, type GrabbedBox as G, type Options as O, type Plugin as P, type ReactGrabAPI as R, type SourceInfo as S, type Theme as T, getElementContext as a, generateSnippet as b, type ReactGrabState as c, type ToolbarState as d, type OverlayBounds as e, type DragRect as f, getStack as g, type Rect as h, init as i, type DeepPartial as j, type PromptModeContext as k, type ElementLabelContext as l, type AgentSession as m, type AgentProvider as n, type AgentSessionStorage as o, type AgentOptions as p, type AgentCompleteResult as q, type SettableOptions as r, type ActivationMode as s, type ContextMenuAction as t, type ContextMenuActionContext as u, type ActionContext as v, type ActionContextHooks as w, type PluginConfig as x, type PluginHooks as y, type ReactGrabRendererProps as z };

package/dist/index.cjs

@@ -1,4 +1,4 @@
-'use strict';var chunkIQAOZJY4_cjs=require('./chunk-IQAOZJY4.cjs'),chunkQABZD56C_cjs=require('./chunk-QABZD56C.cjs'),chunkFSCLGHFJ_cjs=require('./chunk-FSCLGHFJ.cjs');/**
+'use strict';var chunk6PEZJBAF_cjs=require('./chunk-6PEZJBAF.cjs'),chunk5TQBD3AH_cjs=require('./chunk-5TQBD3AH.cjs');require('./chunk-G7QPN3E5.cjs');/**
  * @license MIT
  *
  * Copyright (c) 2025 Aiden Bai
@@ -6,4 +6,4 @@
  * 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,f=()=>typeof window>"u"?e:window.__REACT_GRAB__??e??null,m=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=chunkQABZD56C_cjs.j(),window.__REACT_GRAB__=e),window.dispatchEvent(new CustomEvent("react-grab:init",{detail:e})));Object.defineProperty(exports,"renderDesignSystemPreview",{enumerable:true,get:function(){return chunkIQAOZJY4_cjs.a}});Object.defineProperty(exports,"DEFAULT_THEME",{enumerable:true,get:function(){return chunkQABZD56C_cjs.i}});Object.defineProperty(exports,"captureElementScreenshot",{enumerable:true,get:function(){return chunkQABZD56C_cjs.g}});Object.defineProperty(exports,"combineBounds",{enumerable:true,get:function(){return chunkQABZD56C_cjs.f}});Object.defineProperty(exports,"copyImageToClipboard",{enumerable:true,get:function(){return chunkQABZD56C_cjs.h}});Object.defineProperty(exports,"formatElementInfo",{enumerable:true,get:function(){return chunkQABZD56C_cjs.c}});Object.defineProperty(exports,"generateSnippet",{enumerable:true,get:function(){return chunkQABZD56C_cjs.e}});Object.defineProperty(exports,"getStack",{enumerable:true,get:function(){return chunkQABZD56C_cjs.b}});Object.defineProperty(exports,"init",{enumerable:true,get:function(){return chunkQABZD56C_cjs.j}});Object.defineProperty(exports,"isInstrumentationActive",{enumerable:true,get:function(){return chunkQABZD56C_cjs.a}});Object.defineProperty(exports,"isScreenshotSupported",{enumerable:true,get:function(){return chunkFSCLGHFJ_cjs.ia}});exports.getGlobalApi=f;exports.setGlobalApi=m;
+var e=null,x=()=>typeof window>"u"?e:window.__REACT_GRAB__??e??null,R=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=chunk5TQBD3AH_cjs.o(),window.__REACT_GRAB__=e),window.dispatchEvent(new CustomEvent("react-grab:init",{detail:e})));Object.defineProperty(exports,"renderDesignSystemPreview",{enumerable:true,get:function(){return chunk6PEZJBAF_cjs.a}});Object.defineProperty(exports,"DEFAULT_THEME",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.j}});Object.defineProperty(exports,"captureElementScreenshot",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.g}});Object.defineProperty(exports,"combineBounds",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.f}});Object.defineProperty(exports,"commentPlugin",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.n}});Object.defineProperty(exports,"copyHtmlPlugin",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.l}});Object.defineProperty(exports,"copyImageToClipboard",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.h}});Object.defineProperty(exports,"formatElementInfo",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.c}});Object.defineProperty(exports,"generateSnippet",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.e}});Object.defineProperty(exports,"getStack",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.b}});Object.defineProperty(exports,"init",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.o}});Object.defineProperty(exports,"isInstrumentationActive",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.a}});Object.defineProperty(exports,"isScreenshotSupported",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.i}});Object.defineProperty(exports,"openPlugin",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.m}});Object.defineProperty(exports,"screenshotPlugin",{enumerable:true,get:function(){return chunk5TQBD3AH_cjs.k}});exports.getGlobalApi=x;exports.setGlobalApi=R;

package/dist/index.d.cts

@@ -1,9 +1,17 @@
-import { R as ReactGrabAPI } from './index-bp3m7etC.cjs';
-export { s as ActionContext, q as ActivationMode, o as AgentCompleteResult, A as AgentContext, n as AgentOptions, l as AgentProvider, k as AgentSession, m as AgentSessionStorage, r as ContextMenuAction, C as CrosshairContext, D as DEFAULT_THEME, h as DeepPartial, e as DragRect, j as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, O as Options, d as OverlayBounds, t as Plugin, u as PluginConfig, v as PluginHooks, P as PromptModeContext, c as ReactGrabState, f as Rect, p as SettableOptions, S as SourceInfo, T as Theme, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './index-bp3m7etC.cjs';
+import { P as Plugin, R as ReactGrabAPI } from './index-S4g1Qwb1.cjs';
+export { v as ActionContext, w as ActionContextHooks, s as ActivationMode, q as AgentCompleteResult, A as AgentContext, p as AgentOptions, n as AgentProvider, m as AgentSession, o as AgentSessionStorage, t as ContextMenuAction, u as ContextMenuActionContext, C as CrosshairContext, D as DEFAULT_THEME, j as DeepPartial, f as DragRect, l as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, O as Options, e as OverlayBounds, x as PluginConfig, y as PluginHooks, k as PromptModeContext, c as ReactGrabState, h as Rect, r as SettableOptions, S as SourceInfo, T as Theme, d as ToolbarState, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './index-S4g1Qwb1.cjs';
 export { renderDesignSystemPreview } from './design-system.cjs';
 export { isInstrumentationActive } from 'bippy';
 import 'bippy/source';
 
+declare const screenshotPlugin: Plugin;
+
+declare const copyHtmlPlugin: Plugin;
+
+declare const openPlugin: Plugin;
+
+declare const commentPlugin: Plugin;
+
 interface ElementBounds {
     x: number;
     y: number;
@@ -24,4 +32,4 @@ declare global {
 declare const getGlobalApi: () => ReactGrabAPI | null;
 declare const setGlobalApi: (api: ReactGrabAPI | null) => void;
 
-export { type ElementBounds, ReactGrabAPI, captureElementScreenshot, combineBounds, copyImageToClipboard, getGlobalApi, isScreenshotSupported, setGlobalApi };
+export { type ElementBounds, Plugin, ReactGrabAPI, captureElementScreenshot, combineBounds, commentPlugin, copyHtmlPlugin, copyImageToClipboard, getGlobalApi, isScreenshotSupported, openPlugin, screenshotPlugin, setGlobalApi };

package/dist/index.d.ts

@@ -1,9 +1,17 @@
-import { R as ReactGrabAPI } from './index-bp3m7etC.js';
-export { s as ActionContext, q as ActivationMode, o as AgentCompleteResult, A as AgentContext, n as AgentOptions, l as AgentProvider, k as AgentSession, m as AgentSessionStorage, r as ContextMenuAction, C as CrosshairContext, D as DEFAULT_THEME, h as DeepPartial, e as DragRect, j as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, O as Options, d as OverlayBounds, t as Plugin, u as PluginConfig, v as PluginHooks, P as PromptModeContext, c as ReactGrabState, f as Rect, p as SettableOptions, S as SourceInfo, T as Theme, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './index-bp3m7etC.js';
+import { P as Plugin, R as ReactGrabAPI } from './index-S4g1Qwb1.js';
+export { v as ActionContext, w as ActionContextHooks, s as ActivationMode, q as AgentCompleteResult, A as AgentContext, p as AgentOptions, n as AgentProvider, m as AgentSession, o as AgentSessionStorage, t as ContextMenuAction, u as ContextMenuActionContext, C as CrosshairContext, D as DEFAULT_THEME, j as DeepPartial, f as DragRect, l as ElementLabelContext, E as ElementLabelVariant, G as GrabbedBox, O as Options, e as OverlayBounds, x as PluginConfig, y as PluginHooks, k as PromptModeContext, c as ReactGrabState, h as Rect, r as SettableOptions, S as SourceInfo, T as Theme, d as ToolbarState, a as formatElementInfo, b as generateSnippet, g as getStack, i as init } from './index-S4g1Qwb1.js';
 export { renderDesignSystemPreview } from './design-system.js';
 export { isInstrumentationActive } from 'bippy';
 import 'bippy/source';
 
+declare const screenshotPlugin: Plugin;
+
+declare const copyHtmlPlugin: Plugin;
+
+declare const openPlugin: Plugin;
+
+declare const commentPlugin: Plugin;
+
 interface ElementBounds {
     x: number;
     y: number;
@@ -24,4 +32,4 @@ declare global {
 declare const getGlobalApi: () => ReactGrabAPI | null;
 declare const setGlobalApi: (api: ReactGrabAPI | null) => void;
 
-export { type ElementBounds, ReactGrabAPI, captureElementScreenshot, combineBounds, copyImageToClipboard, getGlobalApi, isScreenshotSupported, setGlobalApi };
+export { type ElementBounds, Plugin, ReactGrabAPI, captureElementScreenshot, combineBounds, commentPlugin, copyHtmlPlugin, copyImageToClipboard, getGlobalApi, isScreenshotSupported, openPlugin, screenshotPlugin, setGlobalApi };