react-grab 0.0.50 → 0.0.52

package/dist/core-CHAbsaHv.d.ts

@@ -0,0 +1,272 @@
+import { FiberSource } from 'bippy/source';
+import 'bippy';
+
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? 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
+     * @default true
+     */
+    selectionBox?: {
+        /**
+         * Whether to show the selection highlight
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * The border/outline color of the selection box.
+         * When undefined, falls back to grab-purple (rgb(210, 57, 192)) with opacity modifiers (50% border, 8% fill).
+         * When set, this color is used as the base for both the border and fill with the same opacity modifiers.
+         * @default undefined
+         */
+        color?: string;
+        /**
+         * Rounded corners of the selection box (e.g., "4px")
+         * @default 0px
+         */
+        borderRadius?: string;
+    };
+    /**
+     * The rectangular selection area that appears when clicking and dragging to select multiple elements
+     * @default true
+     */
+    dragBox?: {
+        /**
+         * Whether to show the drag selection box
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * The fill color and border of the drag rectangle.
+         * When undefined, falls back to grab-purple (rgb(210, 57, 192)) with opacity modifiers (40% border, 5% fill).
+         * When set, this color is used as the base for both the border and fill with the same opacity modifiers.
+         * @default undefined
+         */
+        color?: string;
+    };
+    /**
+     * Brief flash/highlight boxes that appear on elements immediately after they're successfully grabbed/copied
+     * @default true
+     */
+    grabbedBoxes?: {
+        /**
+         * Whether to show these success flash effects
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * The color of the flash boxes.
+         * When undefined, falls back to grab-purple (rgb(210, 57, 192)) with opacity modifiers (100% border, 8% fill).
+         * When set, this color is used as the base for both the border and fill with the same opacity modifiers.
+         * @default undefined
+         */
+        color?: string;
+    };
+    /**
+     * The floating label that follows the cursor showing information about the currently hovered element
+     * @default true
+     */
+    elementLabel?: {
+        /**
+         * Whether to show the label
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * Background color of the label box
+         * @default #fde7f7 (grab-pink-light)
+         */
+        backgroundColor?: string;
+        /**
+         * Color of the text inside the label
+         * @default #b21c8e (grab-pink)
+         */
+        textColor?: string;
+        /**
+         * Border color around the label
+         * @default #f7c5ec (grab-pink-border)
+         */
+        borderColor?: string;
+        /**
+         * Internal spacing of the label (e.g., "4px 8px")
+         * @default "2px 6px"
+         */
+        padding?: string;
+        /**
+         * Distance in pixels the label appears from the cursor
+         * @default 14
+         */
+        cursorOffset?: number;
+    };
+    /**
+     * Text labels that appear after successful operations (like "Copied!" messages)
+     * @default true
+     */
+    successLabels?: {
+        /**
+         * Whether to show success feedback labels
+         * @default true
+         */
+        enabled?: boolean;
+    };
+    /**
+     * The crosshair cursor overlay that helps with precise element targeting
+     * @default true
+     */
+    crosshair?: {
+        /**
+         * Whether to show the crosshair
+         * @default true
+         */
+        enabled?: boolean;
+        /**
+         * Color of the crosshair lines
+         * @default rgba(210, 57, 192) (grab-purple)
+         */
+        color?: string;
+    };
+    /**
+     * An input field overlay that can appear for text entry during selection
+     * @default true
+     */
+    inputOverlay?: {
+        /**
+         * Whether to show the input overlay when needed
+         * @default true
+         */
+        enabled?: boolean;
+    };
+}
+interface ReactGrabState {
+    isActive: boolean;
+    isDragging: boolean;
+    isCopying: boolean;
+    targetElement: Element | null;
+    dragBounds: DragRect | null;
+}
+type RenderType = "selectionBox" | "dragBox" | "grabbedBox" | "elementLabel" | "successLabel" | "crosshair" | "inputOverlay";
+interface RenderData {
+    ref: HTMLElement | undefined;
+    props: Record<string, unknown>;
+}
+interface Options {
+    enabled?: boolean;
+    keyHoldDuration?: number;
+    allowActivationInsideInput?: boolean;
+    theme?: Theme;
+    onActivate?: () => void;
+    onDeactivate?: () => void;
+    onElementHover?: (element: Element) => void;
+    onElementSelect?: (element: Element) => void;
+    onDragStart?: (startX: number, startY: number) => void;
+    onDragEnd?: (elements: Element[], bounds: DragRect) => void;
+    onBeforeCopy?: (elements: Element[]) => void | Promise<void>;
+    onAfterCopy?: (elements: Element[], success: boolean) => void;
+    onCopySuccess?: (elements: Element[], content: string) => void;
+    onCopyError?: (error: Error) => void;
+    onStateChange?: (state: ReactGrabState) => void;
+    onRender?: (type: RenderType, data: RenderData) => void;
+}
+interface ReactGrabAPI {
+    activate: () => void;
+    deactivate: () => void;
+    toggle: () => void;
+    isActive: () => boolean;
+    dispose: () => void;
+    copyElement: (elements: Element | Element[]) => Promise<boolean>;
+    getState: () => ReactGrabState;
+    updateTheme: (theme: DeepPartial<Theme>) => void;
+    getTheme: () => Required<Theme>;
+}
+interface OverlayBounds {
+    borderRadius: string;
+    height: number;
+    transform: string;
+    width: number;
+    x: number;
+    y: number;
+}
+interface ReactGrabRendererProps {
+    selectionVisible?: boolean;
+    selectionBounds?: OverlayBounds;
+    dragVisible?: boolean;
+    dragBounds?: OverlayBounds;
+    grabbedBoxes?: Array<{
+        id: string;
+        bounds: OverlayBounds;
+        createdAt: number;
+    }>;
+    successLabels?: Array<{
+        id: string;
+        text: string;
+    }>;
+    labelVariant?: "hover" | "processing" | "success";
+    labelContent?: unknown;
+    labelX?: number;
+    labelY?: number;
+    labelVisible?: boolean;
+    labelZIndex?: number;
+    labelShowHint?: boolean;
+    progressVisible?: boolean;
+    progress?: number;
+    mouseX?: number;
+    mouseY?: number;
+    crosshairVisible?: boolean;
+    inputVisible?: boolean;
+    inputX?: number;
+    inputY?: number;
+    inputValue?: string;
+    onInputChange?: (value: string) => void;
+    onInputSubmit?: () => void;
+    onInputCancel?: () => void;
+    theme?: Required<Theme>;
+}
+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;
+}
+interface Position {
+    left: number;
+    top: number;
+}
+
+declare const getNearestComponentName: (element: Element) => string | null;
+interface StackFrame {
+    name: string;
+    source: FiberSource | null;
+}
+declare const getStack: (element: Element) => Promise<Array<StackFrame>>;
+declare const formatStack: (stack: Array<StackFrame>) => string;
+declare const getHTMLPreview: (element: Element) => string;
+
+declare const DEFAULT_THEME: Required<Theme>;
+
+declare const init: (rawOptions?: Options) => ReactGrabAPI;
+
+export { DEFAULT_THEME as D, type GrabbedBox as G, type Options as O, type Position as P, type ReactGrabAPI as R, type Theme as T, getHTMLPreview as a, getNearestComponentName as b, type ReactGrabState as c, type RenderType as d, type RenderData as e, formatStack as f, getStack as g, type OverlayBounds as h, init as i, type DragRect as j, type Rect as k, type DeepPartial as l, type ReactGrabRendererProps as m };

package/dist/core.cjs

@@ -1,34 +1,34 @@
 'use strict';
 
-var chunkV3NBFNRU_cjs = require('./chunk-V3NBFNRU.cjs');
+var chunkZCGA27A6_cjs = require('./chunk-ZCGA27A6.cjs');
 
 
 
 Object.defineProperty(exports, "DEFAULT_THEME", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.DEFAULT_THEME; }
+  get: function () { return chunkZCGA27A6_cjs.DEFAULT_THEME; }
 });
 Object.defineProperty(exports, "formatStack", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.formatStack; }
+  get: function () { return chunkZCGA27A6_cjs.formatStack; }
 });
 Object.defineProperty(exports, "getHTMLPreview", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.getHTMLPreview; }
+  get: function () { return chunkZCGA27A6_cjs.getHTMLPreview; }
 });
 Object.defineProperty(exports, "getNearestComponentName", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.getNearestComponentName; }
+  get: function () { return chunkZCGA27A6_cjs.getNearestComponentName; }
 });
 Object.defineProperty(exports, "getStack", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.getStack; }
+  get: function () { return chunkZCGA27A6_cjs.getStack; }
 });
 Object.defineProperty(exports, "init", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.init; }
+  get: function () { return chunkZCGA27A6_cjs.init; }
 });
 Object.defineProperty(exports, "isInstrumentationActive", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.Ee; }
+  get: function () { return chunkZCGA27A6_cjs.Ee; }
 });

package/dist/core.d.cts

@@ -1,157 +1,3 @@
-import { FiberSource } from 'bippy/source';
+export { D as DEFAULT_THEME, O as Options, h as OverlayBounds, R as ReactGrabAPI, m as ReactGrabRendererProps, f as formatStack, a as getHTMLPreview, b as getNearestComponentName, g as getStack, i as init } from './core-CHAbsaHv.cjs';
 export { isInstrumentationActive } from 'bippy';
-
-interface Theme {
-    enabled?: boolean;
-    hue?: number;
-    selectionBox?: {
-        enabled?: boolean;
-        color?: string;
-        borderRadius?: string;
-    };
-    dragBox?: {
-        enabled?: boolean;
-        color?: string;
-    };
-    grabbedBoxes?: {
-        enabled?: boolean;
-        color?: string;
-    };
-    elementLabel?: {
-        enabled?: boolean;
-        backgroundColor?: string;
-        textColor?: string;
-        borderColor?: string;
-        padding?: string;
-        cursorOffset?: number;
-    };
-    successLabels?: {
-        enabled?: boolean;
-    };
-    crosshair?: {
-        enabled?: boolean;
-        color?: string;
-    };
-    inputOverlay?: {
-        enabled?: boolean;
-    };
-}
-interface ReactGrabState {
-    isActive: boolean;
-    isDragging: boolean;
-    isCopying: boolean;
-    targetElement: Element | null;
-    dragBounds: DragRect | null;
-}
-type RenderType = 'selectionBox' | 'dragBox' | 'grabbedBox' | 'elementLabel' | 'successLabel' | 'crosshair' | 'inputOverlay';
-interface RenderData {
-    ref: HTMLElement | undefined;
-    props: Record<string, unknown>;
-}
-interface Options {
-    enabled?: boolean;
-    keyHoldDuration?: number;
-    allowActivationInsideInput?: boolean;
-    theme?: Theme;
-    onActivate?: () => void;
-    onDeactivate?: () => void;
-    onElementHover?: (element: Element) => void;
-    onElementSelect?: (element: Element) => void;
-    onDragStart?: (startX: number, startY: number) => void;
-    onDragEnd?: (elements: Element[], bounds: DragRect) => void;
-    onBeforeCopy?: (elements: Element[]) => void | Promise<void>;
-    onAfterCopy?: (elements: Element[], success: boolean) => void;
-    onCopySuccess?: (elements: Element[], content: string) => void;
-    onCopyError?: (error: Error) => void;
-    onStateChange?: (state: ReactGrabState) => void;
-    onRender?: (type: RenderType, data: RenderData) => void;
-}
-interface ReactGrabAPI {
-    activate: () => void;
-    deactivate: () => void;
-    toggle: () => void;
-    isActive: () => boolean;
-    dispose: () => void;
-    copyElement: (elements: Element | Element[]) => Promise<boolean>;
-    getState: () => ReactGrabState;
-}
-interface OverlayBounds {
-    borderRadius: string;
-    height: number;
-    transform: string;
-    width: number;
-    x: number;
-    y: number;
-}
-interface ReactGrabRendererProps {
-    selectionVisible?: boolean;
-    selectionBounds?: OverlayBounds;
-    dragVisible?: boolean;
-    dragBounds?: OverlayBounds;
-    grabbedBoxes?: Array<{
-        id: string;
-        bounds: OverlayBounds;
-        createdAt: number;
-    }>;
-    successLabels?: Array<{
-        id: string;
-        text: string;
-    }>;
-    labelVariant?: "hover" | "processing" | "success";
-    labelContent?: unknown;
-    labelX?: number;
-    labelY?: number;
-    labelVisible?: boolean;
-    labelZIndex?: number;
-    labelShowHint?: boolean;
-    progressVisible?: boolean;
-    progress?: number;
-    mouseX?: number;
-    mouseY?: number;
-    crosshairVisible?: boolean;
-    inputVisible?: boolean;
-    inputX?: number;
-    inputY?: number;
-    inputValue?: string;
-    onInputChange?: (value: string) => void;
-    onInputSubmit?: () => void;
-    onInputCancel?: () => void;
-    theme?: Required<Theme>;
-}
-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;
-}
-interface Position {
-    left: number;
-    top: number;
-}
-
-declare const getNearestComponentName: (element: Element) => string | null;
-interface StackFrame {
-    name: string;
-    source: FiberSource | null;
-}
-declare const getStack: (element: Element) => Promise<Array<StackFrame>>;
-declare const formatStack: (stack: Array<StackFrame>) => string;
-declare const getHTMLPreview: (element: Element) => string;
-
-declare const DEFAULT_THEME: Required<Theme>;
-
-declare const init: (rawOptions?: Options) => ReactGrabAPI;
-
-export { type DragRect as D, DEFAULT_THEME, type GrabbedBox as G, type Options, type OverlayBounds, type Position as P, type ReactGrabState as R, type ReactGrabAPI, type ReactGrabRendererProps, type Theme as T, type RenderType as a, type RenderData as b, type Rect as c, formatStack, getHTMLPreview, getNearestComponentName, getStack, init };
+import 'bippy/source';

package/dist/core.d.ts

@@ -1,157 +1,3 @@
-import { FiberSource } from 'bippy/source';
+export { D as DEFAULT_THEME, O as Options, h as OverlayBounds, R as ReactGrabAPI, m as ReactGrabRendererProps, f as formatStack, a as getHTMLPreview, b as getNearestComponentName, g as getStack, i as init } from './core-CHAbsaHv.js';
 export { isInstrumentationActive } from 'bippy';
-
-interface Theme {
-    enabled?: boolean;
-    hue?: number;
-    selectionBox?: {
-        enabled?: boolean;
-        color?: string;
-        borderRadius?: string;
-    };
-    dragBox?: {
-        enabled?: boolean;
-        color?: string;
-    };
-    grabbedBoxes?: {
-        enabled?: boolean;
-        color?: string;
-    };
-    elementLabel?: {
-        enabled?: boolean;
-        backgroundColor?: string;
-        textColor?: string;
-        borderColor?: string;
-        padding?: string;
-        cursorOffset?: number;
-    };
-    successLabels?: {
-        enabled?: boolean;
-    };
-    crosshair?: {
-        enabled?: boolean;
-        color?: string;
-    };
-    inputOverlay?: {
-        enabled?: boolean;
-    };
-}
-interface ReactGrabState {
-    isActive: boolean;
-    isDragging: boolean;
-    isCopying: boolean;
-    targetElement: Element | null;
-    dragBounds: DragRect | null;
-}
-type RenderType = 'selectionBox' | 'dragBox' | 'grabbedBox' | 'elementLabel' | 'successLabel' | 'crosshair' | 'inputOverlay';
-interface RenderData {
-    ref: HTMLElement | undefined;
-    props: Record<string, unknown>;
-}
-interface Options {
-    enabled?: boolean;
-    keyHoldDuration?: number;
-    allowActivationInsideInput?: boolean;
-    theme?: Theme;
-    onActivate?: () => void;
-    onDeactivate?: () => void;
-    onElementHover?: (element: Element) => void;
-    onElementSelect?: (element: Element) => void;
-    onDragStart?: (startX: number, startY: number) => void;
-    onDragEnd?: (elements: Element[], bounds: DragRect) => void;
-    onBeforeCopy?: (elements: Element[]) => void | Promise<void>;
-    onAfterCopy?: (elements: Element[], success: boolean) => void;
-    onCopySuccess?: (elements: Element[], content: string) => void;
-    onCopyError?: (error: Error) => void;
-    onStateChange?: (state: ReactGrabState) => void;
-    onRender?: (type: RenderType, data: RenderData) => void;
-}
-interface ReactGrabAPI {
-    activate: () => void;
-    deactivate: () => void;
-    toggle: () => void;
-    isActive: () => boolean;
-    dispose: () => void;
-    copyElement: (elements: Element | Element[]) => Promise<boolean>;
-    getState: () => ReactGrabState;
-}
-interface OverlayBounds {
-    borderRadius: string;
-    height: number;
-    transform: string;
-    width: number;
-    x: number;
-    y: number;
-}
-interface ReactGrabRendererProps {
-    selectionVisible?: boolean;
-    selectionBounds?: OverlayBounds;
-    dragVisible?: boolean;
-    dragBounds?: OverlayBounds;
-    grabbedBoxes?: Array<{
-        id: string;
-        bounds: OverlayBounds;
-        createdAt: number;
-    }>;
-    successLabels?: Array<{
-        id: string;
-        text: string;
-    }>;
-    labelVariant?: "hover" | "processing" | "success";
-    labelContent?: unknown;
-    labelX?: number;
-    labelY?: number;
-    labelVisible?: boolean;
-    labelZIndex?: number;
-    labelShowHint?: boolean;
-    progressVisible?: boolean;
-    progress?: number;
-    mouseX?: number;
-    mouseY?: number;
-    crosshairVisible?: boolean;
-    inputVisible?: boolean;
-    inputX?: number;
-    inputY?: number;
-    inputValue?: string;
-    onInputChange?: (value: string) => void;
-    onInputSubmit?: () => void;
-    onInputCancel?: () => void;
-    theme?: Required<Theme>;
-}
-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;
-}
-interface Position {
-    left: number;
-    top: number;
-}
-
-declare const getNearestComponentName: (element: Element) => string | null;
-interface StackFrame {
-    name: string;
-    source: FiberSource | null;
-}
-declare const getStack: (element: Element) => Promise<Array<StackFrame>>;
-declare const formatStack: (stack: Array<StackFrame>) => string;
-declare const getHTMLPreview: (element: Element) => string;
-
-declare const DEFAULT_THEME: Required<Theme>;
-
-declare const init: (rawOptions?: Options) => ReactGrabAPI;
-
-export { type DragRect as D, DEFAULT_THEME, type GrabbedBox as G, type Options, type OverlayBounds, type Position as P, type ReactGrabState as R, type ReactGrabAPI, type ReactGrabRendererProps, type Theme as T, type RenderType as a, type RenderData as b, type Rect as c, formatStack, getHTMLPreview, getNearestComponentName, getStack, init };
+import 'bippy/source';

package/dist/core.js

@@ -1 +1 @@
-export { DEFAULT_THEME, formatStack, getHTMLPreview, getNearestComponentName, getStack, init, Ee as isInstrumentationActive } from './chunk-73DWLENH.js';
+export { DEFAULT_THEME, formatStack, getHTMLPreview, getNearestComponentName, getStack, init, Ee as isInstrumentationActive } from './chunk-CBPK6MDL.js';

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkV3NBFNRU_cjs = require('./chunk-V3NBFNRU.cjs');
+var chunkZCGA27A6_cjs = require('./chunk-ZCGA27A6.cjs');
 
 /**
  * @license MIT
@@ -12,35 +12,40 @@ var chunkV3NBFNRU_cjs = require('./chunk-V3NBFNRU.cjs');
  */
 
 // src/index.ts
+var globalApi = null;
+var getGlobalApi = () => {
+  return globalApi;
+};
 if (typeof window !== "undefined") {
-  chunkV3NBFNRU_cjs.init();
+  globalApi = chunkZCGA27A6_cjs.init();
 }
 
 Object.defineProperty(exports, "DEFAULT_THEME", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.DEFAULT_THEME; }
+  get: function () { return chunkZCGA27A6_cjs.DEFAULT_THEME; }
 });
 Object.defineProperty(exports, "formatStack", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.formatStack; }
+  get: function () { return chunkZCGA27A6_cjs.formatStack; }
 });
 Object.defineProperty(exports, "getHTMLPreview", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.getHTMLPreview; }
+  get: function () { return chunkZCGA27A6_cjs.getHTMLPreview; }
 });
 Object.defineProperty(exports, "getNearestComponentName", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.getNearestComponentName; }
+  get: function () { return chunkZCGA27A6_cjs.getNearestComponentName; }
 });
 Object.defineProperty(exports, "getStack", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.getStack; }
+  get: function () { return chunkZCGA27A6_cjs.getStack; }
 });
 Object.defineProperty(exports, "init", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.init; }
+  get: function () { return chunkZCGA27A6_cjs.init; }
 });
 Object.defineProperty(exports, "isInstrumentationActive", {
   enumerable: true,
-  get: function () { return chunkV3NBFNRU_cjs.Ee; }
+  get: function () { return chunkZCGA27A6_cjs.Ee; }
 });
+exports.getGlobalApi = getGlobalApi;