@ewjdev/anyclick-react 1.1.1 → 1.3.0

package/dist/index.d.ts

@@ -1,9 +1,175 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FeedbackAdapter, FeedbackTriggerEvent, FeedbackType, FeedbackPayload, ScreenshotConfig, ScreenshotData, FeedbackMenuEvent } from '@ewjdev/anyclick-core';
-export { DEFAULT_SCREENSHOT_CONFIG, DEFAULT_SENSITIVE_SELECTORS, ElementContext, FeedbackAdapter, FeedbackPayload, FeedbackType, PageContext, ScreenshotCapture, ScreenshotCaptureMode, ScreenshotConfig, ScreenshotData, captureAllScreenshots, captureScreenshot, estimateTotalSize, formatBytes, isScreenshotSupported } from '@ewjdev/anyclick-core';
-import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+import { AnyclickAdapter, AnyclickTriggerEvent, AnyclickType, AnyclickPayload, ScreenshotConfig, ScreenshotData, AnyclickMenuEvent } from '@ewjdev/anyclick-core';
+export { ALL_CURATED_PROPERTIES, AccessibilityInfo, AnyclickAdapter, AnyclickPayload, AnyclickType, BoxModelInfo, CURATED_STYLE_PROPERTIES, ComputedStylesInfo, DEFAULT_SCREENSHOT_CONFIG, DEFAULT_SENSITIVE_SELECTORS, ElementContext, ElementInspectInfo, PageContext, ScreenshotCapture, ScreenshotCaptureMode, ScreenshotConfig, ScreenshotData, captureAllScreenshots, captureScreenshot, estimateTotalSize, formatBoxModel, formatBytes, formatStylesAsCSS, getAccessibilityInfo, getAttributes, getBoxModelInfo, getComputedStyles, getElementInspectInfo, isScreenshotSupported } from '@ewjdev/anyclick-core';
+import * as React$1 from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
 import * as zustand from 'zustand';
+import * as zustand_middleware from 'zustand/middleware';
+
+/**
+ * IDE protocol handler integration for opening files directly in IDEs.
+ * Supports VS Code, Cursor, WebStorm, and other IDEs that support URL protocols.
+ */
+/**
+ * Supported IDE protocol types
+ */
+type IDEProtocol = "vscode" | "cursor" | "webstorm" | "intellij" | "phpstorm" | "sublime" | "atom" | "custom";
+/**
+ * Configuration for IDE integration
+ */
+interface IDEConfig {
+    /** The IDE protocol to use */
+    protocol: IDEProtocol;
+    /** Custom protocol string (only used when protocol is 'custom') */
+    customProtocol?: string;
+    /** Base path to prepend to file paths (for mapping web paths to file system) */
+    basePath?: string;
+    /** Path transformations to apply (regex find/replace) */
+    pathTransforms?: Array<{
+        find: string | RegExp;
+        replace: string;
+    }>;
+}
+/**
+ * Source location information
+ */
+interface SourceLocation {
+    /** File path */
+    file: string;
+    /** Line number (1-indexed) */
+    line: number;
+    /** Column number (1-indexed, optional) */
+    column?: number;
+}
+/**
+ * Build the URL for opening a file in an IDE
+ */
+declare function buildIDEUrl(location: SourceLocation, config?: Partial<IDEConfig>): string;
+/**
+ * Open a file in the IDE using the protocol handler
+ */
+declare function openInIDE(location: SourceLocation, config?: Partial<IDEConfig>): boolean;
+/**
+ * Check if the current environment likely supports IDE protocol handlers
+ * Note: This is a heuristic and may not be 100% accurate
+ */
+declare function isIDEProtocolSupported(): boolean;
+/**
+ * Detect the most likely IDE based on environment
+ * This is a heuristic based on common development setups
+ */
+declare function detectPreferredIDE(): IDEProtocol;
+/**
+ * Try to extract source location from element data attributes
+ */
+declare function getSourceLocationFromElement(element: Element): SourceLocation | null;
+/**
+ * Walk up the DOM tree to find source location from any ancestor
+ */
+declare function findSourceLocationInAncestors(element: Element, maxDepth?: number): SourceLocation | null;
+/**
+ * Create a configured IDE opener function
+ */
+declare function createIDEOpener(config?: Partial<IDEConfig>): (location: SourceLocation) => boolean;
+/**
+ * Format a source location as a readable string
+ */
+declare function formatSourceLocation(location: SourceLocation): string;
+
+/**
+ * Position where the dialog is pinned
+ */
+type PinnedPosition = "left" | "right" | "top" | "bottom" | "floating";
+/**
+ * Compact mode configuration type
+ * Adjust these values to control compact styling
+ */
+interface CompactModeConfig {
+    /** Base scaling factor (0.75 = 75% of normal size) */
+    scale: number;
+    /** Font sizes in pixels */
+    fonts: {
+        base: number;
+        title: number;
+        tag: number;
+        selector: number;
+        section: number;
+        badge: number;
+        property: number;
+        styleRow: number;
+        button: number;
+    };
+    /** Spacing (padding/margins) as CSS values */
+    spacing: {
+        headerPadding: string;
+        identityPadding: string;
+        sectionHeaderPadding: string;
+        sectionContentPadding: string;
+        footerPadding: string;
+        selectorCodePadding: string;
+        buttonPadding: string;
+        buttonPrimaryPadding: string;
+        buttonDangerPadding: string;
+        badgePadding: string;
+        propertyRowPadding: string;
+        styleRowPadding: string;
+    };
+    /** Gap values as CSS values */
+    gaps: {
+        headerTitle: string;
+        pinButtons: string;
+        propertyRow: string;
+        propertyValue: string;
+        button: string;
+        footer: string;
+    };
+    /** Size values in pixels */
+    sizes: {
+        dialogWidth: number;
+        closeButton: number;
+        copyButtonSmall: number;
+        styleValueMaxWidth: number;
+        categoryMarginBottom: number;
+        styleCategoryHeaderMarginBottom: number;
+    };
+    /** Letter spacing values */
+    letterSpacing: {
+        sectionTitle: string;
+    };
+}
+/**
+ * Default compact mode configuration
+ * Use this as a base to create custom configurations
+ */
+declare const DEFAULT_COMPACT_CONFIG: CompactModeConfig;
+/**
+ * Props for the InspectDialog component
+ */
+interface InspectDialogProps {
+    /** Whether the dialog is visible */
+    visible: boolean;
+    /** The element being inspected */
+    targetElement: Element | null;
+    /** Callback when dialog is closed */
+    onClose: () => void;
+    /** Callback when selecting a different element (e.g., from modified elements list) */
+    onSelectElement?: (element: Element) => void;
+    /** IDE configuration for "Open in IDE" feature */
+    ideConfig?: Partial<IDEConfig>;
+    /** Custom styles for the dialog */
+    style?: React__default.CSSProperties;
+    /** Custom class name */
+    className?: string;
+    /** Custom highlight colors */
+    highlightColors?: HighlightColors;
+    /** Whether to show box model overlay (padding/margin visualization) */
+    showBoxModelOverlay?: boolean;
+    /** Initial pinned position. Defaults to "floating" (centered) */
+    initialPinnedPosition?: PinnedPosition;
+    /** Custom compact mode configuration. Partially override DEFAULT_COMPACT_CONFIG */
+    compactConfig?: Partial<CompactModeConfig>;
+}
+declare function InspectDialog({ visible, targetElement, onClose, onSelectElement, ideConfig, style, className, highlightColors, showBoxModelOverlay, initialPinnedPosition, compactConfig, }: InspectDialogProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Theme configuration for AnyclickProvider
@@ -20,6 +186,22 @@ interface AnyclickTheme {
     screenshotConfig?: ScreenshotConfig;
     /** Whether anyclick functionality is disabled in this theme */
     disabled?: boolean;
+    /**
+     * Enable fun mode (go-kart cursor) within this scoped provider.
+     * When true/configured, a FunModeBridge can hand off the track to the pointer.
+     */
+    funMode?: boolean | FunModeThemeConfig;
+}
+/**
+ * Optional fun mode configuration (forwarded to pointer fun mode)
+ */
+interface FunModeThemeConfig {
+    /** Whether fun mode is enabled (default: true) */
+    enabled?: boolean;
+    /** Optional max speed override for this provider */
+    maxSpeed?: number;
+    /** Optional acceleration override */
+    acceleration?: number;
 }
 /**
  * Menu positioning modes
@@ -55,26 +237,52 @@ interface HighlightConfig {
     minChildrenForContainer?: number;
 }
 /**
- * Menu item displayed in the feedback context menu
+ * Menu item displayed in the Anyclick context menu
  */
-interface FeedbackMenuItem {
+interface ContextMenuItem {
     /** Feedback type for this option (use unique identifier for parent items with children) */
-    type: FeedbackType;
+    type: AnyclickType;
     /** Display label */
     label: string;
     /** Optional icon */
     icon?: ReactNode;
     /** Whether to show a comment input for this type */
     showComment?: boolean;
+    /** Optional status to signal availability (e.g., coming soon) */
+    status?: FeedbackMenuStatus;
+    /** Optional badge to render next to the label */
+    badge?: FeedbackMenuBadge;
     /** Optional role(s) required to see this menu item */
     requiredRoles?: string[];
     /** Child menu items (creates a submenu) */
-    children?: FeedbackMenuItem[];
+    children?: ContextMenuItem[];
+    /**
+     * Optional click handler for custom behavior.
+     * Return `false` (or a Promise resolving to false) to skip the default submission flow.
+     */
+    onClick?: (context: {
+        targetElement: Element | null;
+        containerElement: Element | null;
+        closeMenu: () => void;
+    }) => void | boolean | Promise<void | boolean>;
 }
+/**
+ * Visual badge for menu items
+ */
+interface FeedbackMenuBadge {
+    /** Text shown inside the badge */
+    label: string;
+    /** Optional tone to drive styling */
+    tone?: "neutral" | "info" | "warning" | "success";
+}
+/**
+ * Status of a menu item used for presets (e.g., coming soon)
+ */
+type FeedbackMenuStatus = "available" | "comingSoon";
 /**
  * User context for role-based menu filtering
  */
-interface FeedbackUserContext {
+interface AnyclickUserContext {
     /** User's role(s) */
     roles?: string[];
     /** User ID */
@@ -85,23 +293,25 @@ interface FeedbackUserContext {
 /**
  * Filter menu items based on user context
  */
-declare function filterMenuItemsByRole(items: FeedbackMenuItem[], userContext?: FeedbackUserContext): FeedbackMenuItem[];
+declare function filterMenuItemsByRole(items: ContextMenuItem[], userContext?: AnyclickUserContext): ContextMenuItem[];
 /**
  * Props for the AnyclickProvider component
  */
 interface AnyclickProviderProps {
-    /** The adapter to use for submitting feedback */
-    adapter: FeedbackAdapter;
+    /** Header content */
+    header?: ReactNode | null;
+    /** The adapter to use for submitting anyclick */
+    adapter: AnyclickAdapter;
     /** Child components */
     children: ReactNode;
     /**
-     * Filter function to determine if feedback should be captured for a target element
-     * Return true to allow feedback, false to ignore
+     * Filter function to determine if anyclick should be captured for a target element
+     * Return true to allow anyclick, false to ignore
      * Accepts both MouseEvent (right-click) and TouchEvent (press-and-hold)
      */
-    targetFilter?: (event: FeedbackTriggerEvent, target: Element) => boolean;
+    targetFilter?: (event: AnyclickTriggerEvent, target: Element) => boolean;
     /** Custom menu items (defaults to Issue, Feature, Like) */
-    menuItems?: FeedbackMenuItem[];
+    menuItems?: ContextMenuItem[];
     /** Maximum length for innerText capture */
     maxInnerTextLength?: number;
     /** Maximum length for outerHTML capture */
@@ -115,9 +325,9 @@ interface AnyclickProviderProps {
     /** Additional metadata to include with every submission */
     metadata?: Record<string, unknown>;
     /** Callback after successful submission */
-    onSubmitSuccess?: (payload: FeedbackPayload) => void;
+    onSubmitSuccess?: (payload: AnyclickPayload) => void;
     /** Callback after failed submission */
-    onSubmitError?: (error: Error, payload: FeedbackPayload) => void;
+    onSubmitError?: (error: Error, payload: AnyclickPayload) => void;
     /** Custom styles for the context menu */
     menuStyle?: CSSProperties;
     /** Custom class name for the context menu */
@@ -147,26 +357,22 @@ interface AnyclickProviderProps {
     /** Menu positioning mode (default: 'inView') */
     menuPositionMode?: MenuPositionMode;
 }
-/**
- * @deprecated Use AnyclickProviderProps instead
- */
-type FeedbackProviderProps = AnyclickProviderProps;
 /**
  * Context value exposed by AnyclickProvider
  */
 interface AnyclickContextValue {
-    /** Whether feedback is currently enabled */
+    /** Whether anyclick is currently enabled */
     isEnabled: boolean;
     /** Whether a submission is in progress */
     isSubmitting: boolean;
-    /** Submit feedback for a specific element */
-    submitFeedback: (element: Element, type: FeedbackType, comment?: string) => Promise<void>;
-    /** Open the feedback menu programmatically */
+    /** Submit anyclick for a specific element */
+    submitAnyclick: (element: Element, type: AnyclickType, comment?: string) => Promise<void>;
+    /** Open the anyclick menu programmatically */
     openMenu: (element: Element, position: {
         x: number;
         y: number;
     }) => void;
-    /** Close the feedback menu */
+    /** Close the anyclick menu */
     closeMenu: () => void;
     /** The current merged theme (inherited from ancestors) */
     theme: AnyclickTheme;
@@ -175,10 +381,6 @@ interface AnyclickContextValue {
     /** The provider's unique ID */
     providerId: string;
 }
-/**
- * @deprecated Use AnyclickContextValue instead
- */
-type FeedbackContextValue = AnyclickContextValue;
 /**
  * Props for the context menu component
  */
@@ -190,14 +392,14 @@ interface ContextMenuProps {
         x: number;
         y: number;
     };
-    /** Target element for feedback */
+    /** Target element for anyclick */
     targetElement: Element | null;
     /** Container element found by highlight logic */
     containerElement: Element | null;
     /** Menu items to display */
-    items: FeedbackMenuItem[];
+    items: ContextMenuItem[];
     /** Callback when an item is selected */
-    onSelect: (type: FeedbackType, comment?: string, screenshots?: ScreenshotData) => void;
+    onSelect: (type: AnyclickType, comment?: string, screenshots?: ScreenshotData) => void;
     /** Callback when menu is closed */
     onClose: () => void;
     /** Whether submission is in progress */
@@ -212,6 +414,10 @@ interface ContextMenuProps {
     screenshotConfig?: ScreenshotConfig;
     /** Menu positioning mode (default: 'inView') */
     positionMode?: MenuPositionMode;
+    /** Header content */
+    header?: ReactNode;
+    /** Footer content */
+    footer?: ReactNode;
 }
 /**
  * Props for the screenshot preview component
@@ -235,16 +441,23 @@ interface ScreenshotPreviewProps {
  * AnyclickProvider component - wraps your app to enable feedback capture
  * Supports scoped providers and nested theming
  */
-declare function AnyclickProvider({ adapter, children, targetFilter, menuItems, maxInnerTextLength, maxOuterHTMLLength, maxAncestors, cooldownMs, stripAttributes, metadata, onSubmitSuccess, onSubmitError, menuStyle, menuClassName, disabled, highlightConfig, screenshotConfig, scoped, theme, touchHoldDurationMs, touchMoveThreshold, }: AnyclickProviderProps): react_jsx_runtime.JSX.Element;
+declare function AnyclickProvider({ adapter, children, targetFilter, menuItems, maxInnerTextLength, maxOuterHTMLLength, maxAncestors, cooldownMs, stripAttributes, metadata, onSubmitSuccess, onSubmitError, menuStyle, menuClassName, disabled, highlightConfig, header, screenshotConfig, scoped, theme, touchHoldDurationMs, touchMoveThreshold, }: AnyclickProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * @deprecated Use AnyclickProvider instead
  */
 declare const FeedbackProvider: typeof AnyclickProvider;
 
+/**
+ * FunModeBridge watches Anyclick scoped providers and toggles the pointer
+ * into fun mode (go-kart) when the cursor is within a provider with funMode enabled.
+ * Requires a PointerProvider higher in the tree.
+ */
+declare function FunModeBridge(): null;
+
 /**
  * Context menu component for selecting feedback type
  */
-declare function ContextMenu({ visible, position, targetElement, containerElement, items, onSelect, onClose, isSubmitting, style, className, highlightConfig, screenshotConfig, positionMode, }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
+declare function ContextMenu({ visible, position, targetElement, containerElement, items, onSelect, onClose, isSubmitting, style, className, highlightConfig, screenshotConfig, positionMode, header, footer, }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Screenshot preview component - shows captured screenshots before sending
@@ -254,11 +467,11 @@ declare function ScreenshotPreview({ screenshots, isLoading, onConfirm, onCancel
 /**
  * React context for anyclick functionality
  */
-declare const AnyclickContext: react.Context<AnyclickContextValue | null>;
+declare const AnyclickContext: React$1.Context<AnyclickContextValue | null>;
 /**
  * @deprecated Use AnyclickContext instead
  */
-declare const FeedbackContext: react.Context<AnyclickContextValue | null>;
+declare const FeedbackContext: React$1.Context<AnyclickContextValue | null>;
 /**
  * Hook to access anyclick context
  * @throws Error if used outside of AnyclickProvider
@@ -288,7 +501,7 @@ interface ProviderInstance {
     /** Depth in the provider hierarchy (0 = root) */
     depth: number;
     /** Handler to call when an event occurs in this provider's scope */
-    onContextMenu?: (event: FeedbackMenuEvent, element: Element) => boolean | void;
+    onContextMenu?: (event: AnyclickMenuEvent, element: Element) => boolean | void;
 }
 /**
  * Provider registry store state
@@ -347,6 +560,36 @@ declare const useProviderStore: zustand.UseBoundStore<zustand.StoreApi<ProviderS
  */
 declare function dispatchContextMenuEvent(event: MouseEvent, element: Element): void;
 
+type PresetRole = "qa" | "pm" | "designer" | "developer" | "chrome";
+interface PresetConfig {
+    role: PresetRole;
+    label: string;
+    description: string;
+    menuItems: ContextMenuItem[];
+    screenshotConfig?: Partial<ScreenshotConfig>;
+    metadata?: Record<string, unknown>;
+    theme?: AnyclickTheme;
+    highlightConfig?: HighlightConfig;
+}
+interface CreatePresetMenuOptions {
+    /** Whether to include coming-soon items (defaults to true) */
+    includeComingSoon?: boolean;
+    /**
+     * Optional overrides for menu items, screenshot config, metadata, or theme.
+     * Useful when you want to tweak a preset without rebuilding it manually.
+     */
+    overrides?: Partial<Omit<PresetConfig, "role" | "label" | "description">>;
+}
+declare const presetDefaults: Record<PresetRole, PresetConfig>;
+/**
+ * Create a preset menu for a given role. Coming-soon items remain visible but disabled.
+ */
+declare function createPresetMenu(role: PresetRole, options?: CreatePresetMenuOptions): PresetConfig;
+/**
+ * List all available presets with their defaults.
+ */
+declare function listPresets(): PresetConfig[];
+
 /**
  * CSS custom properties for menu theming.
  * These can be overridden via the `style` prop on AnyclickProvider.
@@ -418,4 +661,212 @@ declare function applyHighlights(targetElement: Element, config?: HighlightConfi
     container: Element | null;
 };
 
-export { AnyclickContext, type AnyclickContextValue, AnyclickProvider, type AnyclickProviderProps, type AnyclickTheme, ContextMenu, type ContextMenuProps, FeedbackContext, type FeedbackContextValue, type FeedbackMenuItem, FeedbackProvider, type FeedbackProviderProps, type FeedbackUserContext, type HighlightColors, type HighlightConfig, type MenuPositionMode, type ProviderInstance, ScreenshotPreview, type ScreenshotPreviewProps, applyHighlights, clearHighlights, darkMenuStyles, defaultContainerSelectors, defaultHighlightColors, dispatchContextMenuEvent, filterMenuItemsByRole, findContainerParent, generateProviderId, highlightContainer, highlightTarget, menuCSSVariables, menuStyles, useAnyclick, useFeedback, useProviderStore };
+/**
+ * Custom event name for triggering the inspect dialog
+ */
+declare const INSPECT_DIALOG_EVENT = "anyclick:inspect";
+/**
+ * Custom event detail for the inspect dialog
+ */
+interface InspectDialogEventDetail {
+    targetElement: Element;
+}
+/**
+ * Dispatch an event to open the inspect dialog for an element
+ */
+declare function openInspectDialog(targetElement: Element): void;
+/**
+ * Props for InspectDialogManager
+ */
+interface InspectDialogManagerProps {
+    /** IDE configuration for "Open in IDE" feature */
+    ideConfig?: Partial<IDEConfig>;
+    /** Custom styles for the dialog */
+    dialogStyle?: React__default.CSSProperties;
+    /** Custom class name for the dialog */
+    dialogClassName?: string;
+    /** Custom highlight colors for the element highlight */
+    highlightColors?: HighlightColors;
+    /** Whether to show box model overlay (padding/margin visualization). Defaults to true. */
+    showBoxModelOverlay?: boolean;
+    /** Initial pinned position for the dialog. Defaults to "floating" (centered) */
+    initialPinnedPosition?: PinnedPosition;
+    /** Custom compact mode configuration. Partially override DEFAULT_COMPACT_CONFIG */
+    compactConfig?: Partial<CompactModeConfig>;
+}
+/**
+ * InspectDialogManager - A component that listens for inspect events and renders the dialog
+ *
+ * Place this component once in your app (e.g., alongside AnyclickProvider) to enable
+ * the inspect dialog functionality from the chrome preset.
+ *
+ * @example
+ * ```tsx
+ * <AnyclickProvider adapter={adapter}>
+ *   <InspectDialogManager ideConfig={{ protocol: "cursor", basePath: "/Users/me/project" }} />
+ *   {children}
+ * </AnyclickProvider>
+ * ```
+ */
+declare function InspectDialogManager({ ideConfig, dialogStyle, dialogClassName, highlightColors, showBoxModelOverlay, initialPinnedPosition, compactConfig, }: InspectDialogManagerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a modification made to an element
+ */
+interface ElementModification {
+    /** Unique identifier for the element (generated selector or path) */
+    elementId: string;
+    /** CSS selector to find the element */
+    selector: string;
+    /** Human-readable description of the element */
+    description: string;
+    /** Timestamp of the last modification */
+    lastModified: number;
+    /** Original inline styles before modification */
+    originalStyles: Record<string, string>;
+    /** Current modified inline styles */
+    modifiedStyles: Record<string, string>;
+    /** Original attributes before modification */
+    originalAttributes: Record<string, string>;
+    /** Current modified attributes */
+    modifiedAttributes: Record<string, string>;
+    /** Whether the element was deleted */
+    isDeleted?: boolean;
+}
+/**
+ * Represents a deleted (hidden) element that can be restored
+ * Elements are hidden with display:none rather than removed from DOM
+ * for easier persistence and recovery
+ */
+interface DeletedElement {
+    /** Unique identifier for the element */
+    elementId: string;
+    /** CSS selector to find the element */
+    selector: string;
+    /** Human-readable description */
+    description: string;
+    /** Original display value before hiding */
+    originalDisplay: string;
+    /** Timestamp of deletion */
+    deletedAt: number;
+}
+/**
+ * Generate a unique ID for an element based on its position in the DOM
+ * Uses only simple, reliable selectors to avoid issues with special characters
+ */
+declare function generateElementId(element: Element): string;
+/**
+ * Get a human-readable description of an element
+ */
+declare function getElementDescription(element: Element): string;
+/**
+ * Persisted state shape (what gets saved to localStorage)
+ */
+interface PersistedState {
+    pinnedPosition: PinnedPosition;
+    modifiedElements: Record<string, ElementModification>;
+    deletedElements: Record<string, DeletedElement>;
+}
+interface InspectStore extends PersistedState {
+    /** Persisted pinned position */
+    setPinnedPosition: (position: PinnedPosition) => void;
+    /** Whether the store has been hydrated from storage */
+    _hasHydrated: boolean;
+    setHasHydrated: (state: boolean) => void;
+    /** Whether modifications were auto-applied on page load */
+    hasAutoAppliedModifications: boolean;
+    setHasAutoAppliedModifications: (value: boolean) => void;
+    /** Track a modification to an element */
+    trackModification: (element: Element, type: "style" | "attribute", key: string, oldValue: string | null, newValue: string | null) => void;
+    /** Track an element deletion */
+    trackDeletion: (element: Element) => void;
+    /** Get modification record for an element */
+    getModification: (element: Element) => ElementModification | null;
+    /** Reset all modifications for a specific element */
+    resetElement: (elementId: string) => void;
+    /** Reset all modifications for all elements (including restoring deleted elements) */
+    resetAllElements: () => void;
+    /** Get all modified elements that still exist in the DOM */
+    getModifiedElementsInDOM: () => Array<{
+        modification: ElementModification;
+        element: Element | null;
+    }>;
+    /** Get count of deleted elements */
+    getDeletedCount: () => number;
+    /** Apply persisted modifications to the DOM */
+    applyPersistedModifications: () => number;
+    /** Clear persisted state (for testing) */
+    clearPersistedState: () => void;
+}
+declare const useInspectStore: zustand.UseBoundStore<Omit<zustand.StoreApi<InspectStore>, "setState" | "persist"> & {
+    setState(partial: InspectStore | Partial<InspectStore> | ((state: InspectStore) => InspectStore | Partial<InspectStore>), replace?: false | undefined): unknown;
+    setState(state: InspectStore | ((state: InspectStore) => InspectStore), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<zustand_middleware.PersistOptions<InspectStore, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: InspectStore) => void) => () => void;
+        onFinishHydration: (fn: (state: InspectStore) => void) => () => void;
+        getOptions: () => Partial<zustand_middleware.PersistOptions<InspectStore, unknown, unknown>>;
+    };
+}>;
+/**
+ * Custom hook to check if the store has been hydrated
+ * Use this to prevent hydration mismatches in SSR
+ */
+declare function useHasHydrated(): boolean;
+/**
+ * Wait for hydration to complete before accessing persisted data
+ * Useful for ensuring data is available before rendering
+ */
+declare function waitForHydration(): Promise<void>;
+
+interface AnyclickLogoProps {
+    /** Size of the logo in pixels. Defaults to 64 */
+    size?: number;
+    /** Border width in pixels. Defaults to 2 (same as default cursor stroke) */
+    borderWidth?: number;
+    /** Primary color for the circle border and cursor. Defaults to #3b82f6 (blue-500) */
+    primaryColor?: string;
+    /** Background color of the circle. Defaults to rgba(59, 130, 246, 0.1) */
+    backgroundColor?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: React__default.CSSProperties;
+    /** Click handler */
+    onClick?: () => void;
+}
+/**
+ * Anyclick Logo - A circle with a cursor pointer in the center
+ * The cursor is styled similarly to the default system cursor
+ */
+declare function AnyclickLogo({ size, borderWidth, primaryColor, backgroundColor, className, style, onClick, }: AnyclickLogoProps): react_jsx_runtime.JSX.Element;
+
+interface ModificationIndicatorProps {
+    /** Position of the indicator. Defaults to "bottom-right" */
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    /** Size of the logo in pixels. Defaults to 48 */
+    size?: number;
+    /** Whether to auto-apply persisted modifications on mount. Defaults to true */
+    autoApply?: boolean;
+    /** Offset from edge in pixels. Defaults to 16 */
+    offset?: number;
+    /** Primary color for the logo */
+    primaryColor?: string;
+    /** Background color for the logo */
+    backgroundColor?: string;
+}
+/**
+ * ModificationIndicator - Shows the Anyclick logo when modifications are active
+ *
+ * This component:
+ * 1. Waits for Zustand hydration before applying modifications
+ * 2. Auto-applies persisted modifications on mount (if autoApply is true)
+ * 3. Shows the Anyclick logo in the corner when modifications are active
+ * 4. Clicking the logo opens a quick menu to view/reset modifications
+ */
+declare function ModificationIndicator({ position, size, autoApply, offset, primaryColor, backgroundColor, }: ModificationIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
+export { AnyclickContext, type AnyclickContextValue, AnyclickLogo, type AnyclickLogoProps, AnyclickProvider, type AnyclickProviderProps, type AnyclickTheme, type AnyclickUserContext, type CompactModeConfig, ContextMenu, type ContextMenuItem, type ContextMenuProps, type CreatePresetMenuOptions, DEFAULT_COMPACT_CONFIG, type DeletedElement, type ElementModification, FeedbackContext, type FeedbackMenuBadge, type FeedbackMenuStatus, FeedbackProvider, FunModeBridge, type FunModeThemeConfig, type HighlightColors, type HighlightConfig, type IDEConfig, type IDEProtocol, INSPECT_DIALOG_EVENT, InspectDialog, type InspectDialogEventDetail, InspectDialogManager, type InspectDialogManagerProps, type InspectDialogProps, type MenuPositionMode, ModificationIndicator, type ModificationIndicatorProps, type PinnedPosition, type PresetConfig, type PresetRole, type ProviderInstance, ScreenshotPreview, type ScreenshotPreviewProps, type SourceLocation, applyHighlights, buildIDEUrl, clearHighlights, createIDEOpener, createPresetMenu, darkMenuStyles, defaultContainerSelectors, defaultHighlightColors, detectPreferredIDE, dispatchContextMenuEvent, filterMenuItemsByRole, findContainerParent, findSourceLocationInAncestors, formatSourceLocation, generateElementId, generateProviderId, getElementDescription, getSourceLocationFromElement, highlightContainer, highlightTarget, isIDEProtocolSupported, listPresets, menuCSSVariables, menuStyles, openInIDE, openInspectDialog, presetDefaults, useAnyclick, useFeedback, useHasHydrated, useInspectStore, useProviderStore, waitForHydration };