grab 0.1.35 → 0.1.36

package/dist/index-DR5AjI5S.d.cts

@@ -0,0 +1,413 @@
+/**
+ * @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.
+ */
+import { n as StackFrame } from "./copy-content-3pnWacho.cjs";
+
+//#region ../../node_modules/.pnpm/solid-js@1.9.12/node_modules/solid-js/types/reactive/observable.d.ts
+declare global {
+  interface SymbolConstructor {
+    readonly observable: symbol;
+  }
+}
+//#endregion
+//#region ../../node_modules/.pnpm/solid-js@1.9.12/node_modules/solid-js/types/index.d.ts
+declare global {
+  var Solid$$: boolean;
+}
+//#endregion
+//#region src/types.d.ts
+interface Position {
+  x: number;
+  y: number;
+}
+type DeepPartial<T> = { [P in keyof T]?: T[P] extends object ? T[P] extends ((...args: unknown[]) => unknown) ? T[P] : DeepPartial<T[P]> : T[P] };
+interface Theme {
+  /**
+   * Globally toggle the entire overlay
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Base hue (0-360) used to generate colors throughout the interface using HSL color space
+   * @default 0
+   */
+  hue?: number;
+  /**
+   * The highlight box that appears when hovering over an element before selecting it
+   */
+  selectionBox?: {
+    /**
+     * Whether to show the selection highlight
+     * @default true
+     */
+    enabled?: boolean;
+  };
+  /**
+   * The rectangular selection area that appears when clicking and dragging to select multiple elements
+   */
+  dragBox?: {
+    /**
+     * Whether to show the drag selection box
+     * @default true
+     */
+    enabled?: boolean;
+  };
+  /**
+   * Brief flash/highlight boxes that appear on elements immediately after they're successfully grabbed/copied
+   */
+  grabbedBoxes?: {
+    /**
+     * Whether to show these success flash effects
+     * @default true
+     */
+    enabled?: boolean;
+  };
+  /**
+   * The floating label that follows the cursor showing information about the currently hovered element
+   */
+  elementLabel?: {
+    /**
+     * Whether to show the label
+     * @default true
+     */
+    enabled?: boolean;
+  };
+  /**
+   * The floating toolbar that allows toggling React Grab activation
+   */
+  toolbar?: {
+    /**
+     * Whether to show the toolbar
+     * @default true
+     */
+    enabled?: boolean;
+  };
+}
+interface ReactGrabState {
+  isActive: boolean;
+  isDragging: boolean;
+  isCopying: boolean;
+  isPromptMode: boolean;
+  isSelectionBoxVisible: boolean;
+  isDragBoxVisible: boolean;
+  targetElement: Element | null;
+  dragBounds: DragRect | null;
+  /**
+   * Currently visible grabbed boxes (success flash effects).
+   * These are temporary visual indicators shown after elements are grabbed/copied.
+   */
+  grabbedBoxes: Array<{
+    id: string;
+    bounds: OverlayBounds;
+    createdAt: number;
+  }>;
+  labelInstances: Array<{
+    id: string;
+    status: SelectionLabelStatus;
+    tagName: string;
+    componentName?: string;
+    createdAt: number;
+  }>;
+  selectionFilePath: string | null;
+  toolbarState: ToolbarState | null;
+}
+type ElementLabelVariant = "hover" | "processing" | "success";
+interface PromptModeContext {
+  x: number;
+  y: number;
+  targetElement: Element | null;
+}
+interface ElementLabelContext {
+  x: number;
+  y: number;
+  content: string;
+  element?: Element;
+  tagName?: string;
+  componentName?: string;
+  filePath?: string;
+  lineNumber?: number;
+}
+type ActivationKey = string | ((event: KeyboardEvent) => boolean);
+interface AgentContext<T = unknown> {
+  content: string[];
+  prompt: string;
+  options?: T;
+  sessionId?: string;
+}
+type ActivationMode = "toggle" | "hold";
+interface ActionContextHooks {
+  transformHtmlContent: (html: string, elements: Element[]) => Promise<string>;
+  onOpenFile: (filePath: string, lineNumber?: number) => boolean | void;
+  transformOpenFileUrl: (url: string, filePath: string, lineNumber?: number) => string;
+}
+interface ActionContext {
+  element: Element;
+  elements: Element[];
+  filePath?: string;
+  lineNumber?: number;
+  componentName?: string;
+  tagName?: string;
+  enterPromptMode?: () => void;
+  hooks: ActionContextHooks;
+  performWithFeedback: (action: () => Promise<boolean>) => Promise<void>;
+  hideContextMenu: () => void;
+  cleanup: () => void;
+}
+interface ContextMenuActionContext extends ActionContext {
+  copy?: () => void;
+}
+interface ContextMenuAction {
+  id: string;
+  label: string;
+  shortcut?: string;
+  showInToolbarMenu?: boolean;
+  enabled?: boolean | ((context: ActionContext) => boolean);
+  onAction: (context: ContextMenuActionContext) => void | Promise<void>;
+}
+interface ArrowNavigationItem {
+  tagName: string;
+  componentName?: string;
+}
+interface ArrowNavigationState {
+  items: ArrowNavigationItem[];
+  activeIndex: number;
+  isVisible: boolean;
+}
+interface PluginHooks {
+  onActivate?: () => void;
+  onDeactivate?: () => void;
+  onElementHover?: (element: Element) => void;
+  onElementSelect?: (element: Element) => boolean | void | Promise<boolean>;
+  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;
+  onStateChange?: (state: ReactGrabState) => void;
+  onPromptModeChange?: (isPromptMode: boolean, context: PromptModeContext) => void;
+  onSelectionBox?: (visible: boolean, bounds: OverlayBounds | null, element: Element | null) => void;
+  onDragBox?: (visible: boolean, bounds: OverlayBounds | null) => void;
+  onGrabbedBox?: (bounds: OverlayBounds, element: Element) => void;
+  onElementLabel?: (visible: boolean, variant: ElementLabelVariant, context: ElementLabelContext) => void;
+  onContextMenu?: (element: Element, position: Position) => void;
+  onOpenFile?: (filePath: string, lineNumber?: number) => boolean | void;
+  transformHtmlContent?: (html: string, elements: Element[]) => string | Promise<string>;
+  transformAgentContext?: (context: AgentContext, elements: Element[]) => AgentContext | Promise<AgentContext>;
+  transformActionContext?: (context: ActionContext) => ActionContext;
+  transformOpenFileUrl?: (url: string, filePath: string, lineNumber?: number) => string;
+}
+interface PluginConfig {
+  theme?: DeepPartial<Theme>;
+  options?: SettableOptions;
+  actions?: ContextMenuAction[];
+  hooks?: PluginHooks;
+  cleanup?: () => void;
+}
+interface Plugin {
+  name: string;
+  theme?: DeepPartial<Theme>;
+  options?: SettableOptions;
+  actions?: ContextMenuAction[];
+  hooks?: PluginHooks;
+  setup?: (api: ReactGrabAPI, hooks: ActionContextHooks) => PluginConfig | void;
+}
+interface Options {
+  enabled?: boolean;
+  activationMode?: ActivationMode;
+  keyHoldDuration?: number;
+  allowActivationInsideInput?: boolean;
+  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;
+}
+interface SourceInfo {
+  filePath: string;
+  lineNumber: number | null;
+  componentName: string | null;
+}
+interface ToolbarState {
+  edge: "top" | "bottom" | "left" | "right";
+  ratio: number;
+  collapsed: boolean;
+  enabled: boolean;
+  defaultAction?: string;
+}
+interface DropdownAnchor {
+  x: number;
+  y: number;
+  edge: ToolbarState["edge"];
+  toolbarWidth: number;
+}
+interface ReactGrabAPI {
+  activate: () => void;
+  deactivate: () => void;
+  toggle: () => void;
+  comment: () => 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>;
+  getStackContext: (element: Element) => Promise<string>;
+  getState: () => ReactGrabState;
+  setOptions: (options: SettableOptions) => void;
+  registerPlugin: (plugin: Plugin) => void;
+  unregisterPlugin: (name: string) => void;
+  getPlugins: () => string[];
+  getDisplayName: (element: Element) => string | null;
+}
+interface OverlayBounds {
+  borderRadius: string;
+  height: number;
+  transform: string;
+  width: number;
+  x: number;
+  y: number;
+}
+type SelectionLabelStatus = "idle" | "copying" | "copied" | "fading" | "error";
+interface SelectionLabelInstance {
+  id: string;
+  bounds: OverlayBounds;
+  boundsMultiple?: OverlayBounds[];
+  tagName: string;
+  componentName?: string;
+  elementsCount?: number;
+  status: SelectionLabelStatus;
+  statusText?: string;
+  isPromptMode?: boolean;
+  inputValue?: string;
+  createdAt: number;
+  element?: Element;
+  elements?: Element[];
+  mouseX?: number;
+  mouseXOffsetFromCenter?: number;
+  mouseXOffsetRatio?: number;
+  errorMessage?: string;
+  hideArrow?: boolean;
+}
+interface FrozenLabelEntry {
+  tagName: string;
+  componentName?: string;
+  bounds: OverlayBounds;
+  mouseX?: number;
+}
+interface ReactGrabRendererProps {
+  selectionVisible?: boolean;
+  selectionBounds?: OverlayBounds;
+  selectionBoundsMultiple?: OverlayBounds[];
+  selectionShouldSnap?: boolean;
+  selectionElementsCount?: number;
+  frozenLabelEntries?: FrozenLabelEntry[];
+  pendingShiftPreviewEntry?: FrozenLabelEntry;
+  selectionFilePath?: string;
+  selectionLineNumber?: number;
+  selectionTagName?: string;
+  selectionComponentName?: string;
+  selectionLabelVisible?: boolean;
+  selectionLabelStatus?: SelectionLabelStatus;
+  selectionArrowNavigationState?: ArrowNavigationState;
+  onArrowNavigationSelect?: (index: number) => void;
+  labelInstances?: SelectionLabelInstance[];
+  dragVisible?: boolean;
+  dragBounds?: OverlayBounds;
+  grabbedBoxes?: Array<{
+    id: string;
+    bounds: OverlayBounds;
+    createdAt: number;
+  }>;
+  mouseX?: number;
+  isFrozen?: boolean;
+  inputValue?: string;
+  isPromptMode?: boolean;
+  onShowContextMenuInstance?: (instanceId: string) => void;
+  onLabelInstanceHoverChange?: (instanceId: string, isHovered: boolean) => void;
+  onInputChange?: (value: string) => void;
+  onInputSubmit?: () => void;
+  onToggleExpand?: () => void;
+  isPendingDismiss?: boolean;
+  selectionLabelShakeCount?: number;
+  onConfirmDismiss?: () => void;
+  onCancelDismiss?: () => void;
+  toolbarVisible?: boolean;
+  isActive?: boolean;
+  onToggleActive?: () => void;
+  enabled?: boolean;
+  shakeCount?: number;
+  onToolbarStateChange?: (state: ToolbarState) => void;
+  onSubscribeToToolbarStateChanges?: (callback: (state: ToolbarState) => void) => () => void;
+  onToolbarSelectHoverChange?: (isHovered: boolean) => void;
+  onToolbarRef?: (element: HTMLDivElement) => void;
+  contextMenuPosition?: Position | null;
+  contextMenuBounds?: OverlayBounds | null;
+  contextMenuTagName?: string;
+  contextMenuComponentName?: string;
+  contextMenuHasFilePath?: boolean;
+  actions?: ContextMenuAction[];
+  actionContext?: ActionContext;
+  onContextMenuDismiss?: () => void;
+  onContextMenuHide?: () => void;
+  toolbarMenuPosition?: DropdownAnchor | null;
+  toolbarMenuActions?: ContextMenuAction[];
+  defaultActionId?: string;
+  onSetDefaultAction?: (actionId: string) => void;
+  onToggleToolbarMenu?: () => void;
+  onToolbarMenuDismiss?: () => void;
+}
+interface GrabbedBox {
+  id: string;
+  bounds: OverlayBounds;
+  createdAt: number;
+  element?: Element;
+}
+interface Rect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+interface DragRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+//#endregion
+//#region src/core/context.d.ts
+declare const getStack: (element: Element) => Promise<StackFrame[] | null>;
+interface StackContextOptions {
+  maxLines?: number;
+}
+declare const getElementContext: (element: Element, options?: StackContextOptions) => Promise<string>;
+//#endregion
+//#region src/core/theme.d.ts
+declare const DEFAULT_THEME: Required<Theme>;
+//#endregion
+//#region src/utils/generate-snippet.d.ts
+interface GenerateSnippetOptions {
+  maxLines?: number;
+}
+declare const generateSnippet: (elements: Element[], options?: GenerateSnippetOptions) => Promise<string[]>;
+//#endregion
+//#region src/core/index.d.ts
+declare const init: (rawOptions?: Options) => ReactGrabAPI;
+//#endregion
+export { Theme as A, PromptModeContext as C, Rect as D, ReactGrabState as E, SettableOptions as O, Position as S, ReactGrabRendererProps as T, Options as _, getStack as a, PluginConfig as b, ActivationMode as c, ContextMenuActionContext as d, DeepPartial as f, GrabbedBox as g, ElementLabelVariant as h, getElementContext as i, ToolbarState as j, SourceInfo as k, AgentContext as l, ElementLabelContext as m, generateSnippet as n, ActionContext as o, DragRect as p, DEFAULT_THEME as r, ActionContextHooks as s, init as t, ContextMenuAction as u, OverlayBounds as v, ReactGrabAPI as w, PluginHooks as x, Plugin as y };

package/dist/index.cjs

@@ -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.
  */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core-DxmUPSuY.cjs`),t=require(`./freeze-updates-DoHSWGYP.cjs`);let n=null;const r=()=>typeof window>`u`?n:window.__REACT_GRAB__??n??null,i=e=>{n=e,typeof window<`u`&&(e?window.__REACT_GRAB__=e:delete window.__REACT_GRAB__)},a=[],o=e=>{for(;a.length>0;){let t=a.shift();t&&e.registerPlugin(t)}},s=e=>{let t=r();if(t){t.registerPlugin(e);return}a.push(e)},c=e=>{let t=r();if(t){t.unregisterPlugin(e);return}let n=a.findIndex(t=>t.name===e);n!==-1&&a.splice(n,1)};typeof window<`u`&&!window.__REACT_GRAB_DISABLED__&&(window.__REACT_GRAB__?n=window.__REACT_GRAB__:(n=e.t(),window.__REACT_GRAB__=n),o(n),window.dispatchEvent(new CustomEvent(`react-grab:init`,{detail:n}))),exports.DEFAULT_THEME=e.a,exports.commentPlugin=e.i,exports.formatElementInfo=t.x,exports.generateSnippet=e.n,exports.getGlobalApi=r,exports.getStack=t.T,exports.init=e.t,exports.isInstrumentationActive=t.k,exports.openPlugin=e.r,exports.registerPlugin=s,exports.setGlobalApi=i,exports.unregisterPlugin=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./core-BaM4pWDg.cjs`),t=require(`./freeze-updates-DdIqMW8Y.cjs`);let n=null;const r=()=>typeof window>`u`?n:window.__REACT_GRAB__??n??null,i=e=>{n=e,typeof window<`u`&&(e?window.__REACT_GRAB__=e:delete window.__REACT_GRAB__)},a=[],o=e=>{for(;a.length>0;){let t=a.shift();t&&e.registerPlugin(t)}},s=e=>{let t=r();if(t){t.registerPlugin(e);return}a.push(e)},c=e=>{let t=r();if(t){t.unregisterPlugin(e);return}let n=a.findIndex(t=>t.name===e);n!==-1&&a.splice(n,1)};typeof window<`u`&&!window.__REACT_GRAB_DISABLED__&&(window.__REACT_GRAB__?n=window.__REACT_GRAB__:(n=e.t(),window.__REACT_GRAB__=n),o(n),window.dispatchEvent(new CustomEvent(`react-grab:init`,{detail:n}))),exports.DEFAULT_THEME=e.a,exports.commentPlugin=e.i,exports.formatElementInfo=t.x,exports.generateSnippet=e.n,exports.getGlobalApi=r,exports.getStack=t.T,exports.init=e.t,exports.isInstrumentationActive=t.k,exports.openPlugin=e.r,exports.registerPlugin=s,exports.setGlobalApi=i,exports.unregisterPlugin=c;

package/dist/index.d.cts

@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { A as Theme, C as PromptModeContext, D as Rect, E as ReactGrabState, O as SettableOptions, S as Position, _ as Options, a as getStack, b as PluginConfig, c as ActivationMode, d as ContextMenuActionContext, f as DeepPartial, g as GrabbedBox, h as ElementLabelVariant, i as getElementContext, j as ToolbarState, k as SourceInfo, l as AgentContext, m as ElementLabelContext, n as generateSnippet, o as ActionContext, p as DragRect, r as DEFAULT_THEME, s as ActionContextHooks, t as init, u as ContextMenuAction, v as OverlayBounds, w as ReactGrabAPI, x as PluginHooks, y as Plugin } from "./index-B8DfIkir.cjs";
-import { i as isInstrumentationActive } from "./copy-content-Ci71Rj3Z.cjs";
+import { A as Theme, C as PromptModeContext, D as Rect, E as ReactGrabState, O as SettableOptions, S as Position, _ as Options, a as getStack, b as PluginConfig, c as ActivationMode, d as ContextMenuActionContext, f as DeepPartial, g as GrabbedBox, h as ElementLabelVariant, i as getElementContext, j as ToolbarState, k as SourceInfo, l as AgentContext, m as ElementLabelContext, n as generateSnippet, o as ActionContext, p as DragRect, r as DEFAULT_THEME, s as ActionContextHooks, t as init, u as ContextMenuAction, v as OverlayBounds, w as ReactGrabAPI, x as PluginHooks, y as Plugin } from "./index-DR5AjI5S.cjs";
+import { i as isInstrumentationActive } from "./copy-content-3pnWacho.cjs";
 
 //#region src/core/plugins/comment.d.ts
 declare const commentPlugin: Plugin;

package/dist/index.d.ts

@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { A as Theme, C as PromptModeContext, D as Rect, E as ReactGrabState, O as SettableOptions, S as Position, _ as Options, a as getStack, b as PluginConfig, c as ActivationMode, d as ContextMenuActionContext, f as DeepPartial, g as GrabbedBox, h as ElementLabelVariant, i as getElementContext, j as ToolbarState, k as SourceInfo, l as AgentContext, m as ElementLabelContext, n as generateSnippet, o as ActionContext, p as DragRect, r as DEFAULT_THEME, s as ActionContextHooks, t as init, u as ContextMenuAction, v as OverlayBounds, w as ReactGrabAPI, x as PluginHooks, y as Plugin } from "./index-Dtq-0YKo.js";
-import { i as isInstrumentationActive } from "./copy-content-DyBlqw55.js";
+import { A as Theme, C as PromptModeContext, D as Rect, E as ReactGrabState, O as SettableOptions, S as Position, _ as Options, a as getStack, b as PluginConfig, c as ActivationMode, d as ContextMenuActionContext, f as DeepPartial, g as GrabbedBox, h as ElementLabelVariant, i as getElementContext, j as ToolbarState, k as SourceInfo, l as AgentContext, m as ElementLabelContext, n as generateSnippet, o as ActionContext, p as DragRect, r as DEFAULT_THEME, s as ActionContextHooks, t as init, u as ContextMenuAction, v as OverlayBounds, w as ReactGrabAPI, x as PluginHooks, y as Plugin } from "./index-CkMIwkYj.js";
+import { i as isInstrumentationActive } from "./copy-content-DH6fBB50.js";
 
 //#region src/core/plugins/comment.d.ts
 declare const commentPlugin: Plugin;