@ewjdev/anyclick-react 1.4.0 → 2.0.0

package/dist/index.d.ts

@@ -1,10 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-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 { AnyclickAdapter, AnyclickType, AnyclickPayload, ScreenshotConfig, AnyclickTriggerEvent, 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 zustand from 'zustand';
-import * as zustand_middleware from 'zustand/middleware';
 
 /**
  * IDE protocol handler integration for opening files directly in IDEs.
@@ -76,18 +75,9 @@ declare function createIDEOpener(config?: Partial<IDEConfig>): (location: Source
  */
 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;
@@ -99,7 +89,6 @@ interface CompactModeConfig {
         styleRow: number;
         button: number;
     };
-    /** Spacing (padding/margins) as CSS values */
     spacing: {
         headerPadding: string;
         identityPadding: string;
@@ -114,7 +103,6 @@ interface CompactModeConfig {
         propertyRowPadding: string;
         styleRowPadding: string;
     };
-    /** Gap values as CSS values */
     gaps: {
         headerTitle: string;
         pinButtons: string;
@@ -123,7 +111,6 @@ interface CompactModeConfig {
         button: string;
         footer: string;
     };
-    /** Size values in pixels */
     sizes: {
         dialogWidth: number;
         closeButton: number;
@@ -132,58 +119,59 @@ interface CompactModeConfig {
         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 */
+interface InspectSimpleProps {
     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;
+declare function InspectSimple({ visible, targetElement, onClose, ideConfig, style, className, highlightColors, }: InspectSimpleProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Type definitions for @ewjdev/anyclick-react.
+ *
+ * Contains all public interfaces, types, and utility functions
+ * for configuring anyclick providers, menus, and themes.
+ *
+ * @module types
+ * @since 1.0.0
+ */
 
 /**
- * Theme configuration for AnyclickProvider
- * Supports nested theming with inheritance
+ * Theme configuration for AnyclickProvider.
+ *
+ * Supports nested theming with inheritance - child providers automatically
+ * inherit and can override parent theme settings.
+ *
+ * @example
+ * ```tsx
+ * const theme: AnyclickTheme = {
+ *   menuStyle: { backgroundColor: "#1a1a1a" },
+ *   highlightConfig: {
+ *     colors: { targetColor: "#ef4444" },
+ *   },
+ * };
+ *
+ * <AnyclickProvider adapter={adapter} theme={theme}>
+ *   <App />
+ * </AnyclickProvider>
+ * ```
+ *
+ * @since 1.0.0
  */
 interface AnyclickTheme {
-    /** Custom styles for the context menu */
-    menuStyle?: CSSProperties;
-    /** Custom class name for the context menu */
-    menuClassName?: string;
-    /** Configuration for element highlighting */
-    highlightConfig?: HighlightConfig;
-    /** Configuration for screenshot capture */
-    screenshotConfig?: ScreenshotConfig;
     /** Whether anyclick functionality is disabled in this theme */
     disabled?: boolean;
     /**
@@ -191,159 +179,282 @@ interface AnyclickTheme {
      * When true/configured, a FunModeBridge can hand off the track to the pointer.
      */
     funMode?: boolean | FunModeThemeConfig;
+    /** Configuration for element highlighting */
+    highlightConfig?: HighlightConfig;
+    /** Custom class name for the context menu */
+    menuClassName?: string;
+    /** Custom styles for the context menu */
+    menuStyle?: CSSProperties;
+    /** Configuration for screenshot capture */
+    screenshotConfig?: ScreenshotConfig;
 }
 /**
- * Optional fun mode configuration (forwarded to pointer fun mode)
+ * Optional fun mode configuration (forwarded to pointer fun mode).
+ *
+ * @since 1.3.0
  */
 interface FunModeThemeConfig {
+    /** Optional acceleration override */
+    acceleration?: number;
     /** 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
- * - static: Menu stays at exact click position (may go off-screen)
- * - inView: Menu adjusts position to stay fully visible in viewport
- * - dynamic: User can drag the menu to reposition it
- */
-type MenuPositionMode = "static" | "inView" | "dynamic";
-/**
- * Configuration for highlight colors
- */
-interface HighlightColors {
-    /** Color for the target element highlight (default: #3b82f6 - blue) */
-    targetColor?: string;
-    /** Color for the container element highlight (default: #8b5cf6 - purple) */
-    containerColor?: string;
-    /** Opacity for the target shadow (default: 0.25) */
-    targetShadowOpacity?: number;
-    /** Opacity for the container shadow (default: 0.1) */
-    containerShadowOpacity?: number;
-}
-/**
- * Configuration for highlight behavior
+ * Menu positioning modes for the context menu.
+ *
+ * - `static` - Menu stays at exact click position (may go off-screen)
+ * - `inView` - Menu adjusts position to stay fully visible in viewport
+ * - `dynamic` - User can drag the menu to reposition it
+ *
+ * @since 1.1.0
  */
-interface HighlightConfig {
-    /** Whether to show highlights (default: true) */
-    enabled?: boolean;
-    /** Custom colors for highlights */
-    colors?: HighlightColors;
-    /** CSS selectors to identify container elements */
-    containerSelectors?: string[];
-    /** Minimum number of children for an element to be considered a container (default: 2) */
-    minChildrenForContainer?: number;
-}
+type MenuPositionMode = "dynamic" | "inView" | "static";
 /**
- * Menu item displayed in the Anyclick context menu
+ * Menu item displayed in the Anyclick context menu.
+ *
+ * @example
+ * ```tsx
+ * const menuItems: ContextMenuItem[] = [
+ *   {
+ *     type: "bug",
+ *     label: "Report Bug",
+ *     icon: <BugIcon />,
+ *     showComment: true,
+ *   },
+ *   {
+ *     type: "feature",
+ *     label: "Request Feature",
+ *     showComment: true,
+ *     requiredRoles: ["admin", "developer"],
+ *   },
+ * ];
+ * ```
+ *
+ * @since 1.0.0
  */
 interface ContextMenuItem {
-    /** Feedback type for this option (use unique identifier for parent items with children) */
-    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?: ContextMenuItem[];
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Display label */
+    label: string;
     /**
      * 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>;
+        containerElement: Element | null;
+        targetElement: Element | null;
+    }) => boolean | Promise<boolean | void> | void;
+    /** Optional role(s) required to see this menu item */
+    requiredRoles?: string[];
+    /** Whether to show a comment input for this type */
+    showComment?: boolean;
+    /** Optional status to signal availability (e.g., coming soon) */
+    status?: FeedbackMenuStatus;
+    /** Feedback type for this option (use unique identifier for parent items with children) */
+    type: AnyclickType;
 }
 /**
- * Visual badge for menu items
+ * Visual badge for menu items.
+ *
+ * @example
+ * ```tsx
+ * const badge: FeedbackMenuBadge = {
+ *   label: "New",
+ *   tone: "success",
+ * };
+ * ```
+ *
+ * @since 1.2.0
  */
 interface FeedbackMenuBadge {
     /** Text shown inside the badge */
     label: string;
     /** Optional tone to drive styling */
-    tone?: "neutral" | "info" | "warning" | "success";
+    tone?: "info" | "neutral" | "success" | "warning";
 }
 /**
- * Status of a menu item used for presets (e.g., coming soon)
+ * Status of a menu item used for presets.
+ *
+ * - `available` - Item is fully functional
+ * - `comingSoon` - Item is visible but disabled
+ *
+ * @since 1.2.0
  */
 type FeedbackMenuStatus = "available" | "comingSoon";
 /**
- * User context for role-based menu filtering
+ * Configuration for highlight colors.
+ *
+ * @example
+ * ```tsx
+ * const colors: HighlightColors = {
+ *   targetColor: "#ef4444",      // Red for target
+ *   containerColor: "#3b82f6",   // Blue for container
+ *   targetShadowOpacity: 0.3,
+ *   containerShadowOpacity: 0.15,
+ * };
+ * ```
+ *
+ * @since 1.0.0
+ */
+interface HighlightColors {
+    /** Color for the container element highlight (default: #8b5cf6 - purple) */
+    containerColor?: string;
+    /** Opacity for the container shadow (default: 0.1) */
+    containerShadowOpacity?: number;
+    /** Color for the target element highlight (default: #3b82f6 - blue) */
+    targetColor?: string;
+    /** Opacity for the target shadow (default: 0.25) */
+    targetShadowOpacity?: number;
+}
+/**
+ * Configuration for highlight behavior.
+ *
+ * @example
+ * ```tsx
+ * const highlightConfig: HighlightConfig = {
+ *   enabled: true,
+ *   colors: { targetColor: "#ef4444" },
+ *   containerSelectors: [".card", ".modal", "[data-container]"],
+ *   minChildrenForContainer: 3,
+ * };
+ * ```
+ *
+ * @since 1.0.0
+ */
+interface HighlightConfig {
+    /** Custom colors for highlights */
+    colors?: HighlightColors;
+    /** CSS selectors to identify container elements */
+    containerSelectors?: string[];
+    /** Whether to show highlights (default: true) */
+    enabled?: boolean;
+    /** Minimum number of children for an element to be considered a container (default: 2) */
+    minChildrenForContainer?: number;
+}
+/**
+ * User context for role-based menu filtering.
+ *
+ * @example
+ * ```tsx
+ * const userContext: AnyclickUserContext = {
+ *   id: "user-123",
+ *   email: "user@example.com",
+ *   roles: ["admin", "developer"],
+ * };
+ *
+ * const visibleItems = filterMenuItemsByRole(allMenuItems, userContext);
+ * ```
+ *
+ * @since 1.2.0
  */
 interface AnyclickUserContext {
-    /** User's role(s) */
-    roles?: string[];
-    /** User ID */
-    id?: string;
     /** User email */
     email?: string;
+    /** User ID */
+    id?: string;
+    /** User's role(s) */
+    roles?: string[];
 }
 /**
- * Filter menu items based on user context
+ * Filters menu items based on user context and required roles.
+ *
+ * Items without required roles are shown to everyone.
+ * Items with required roles are only shown to users who have at least one matching role.
+ *
+ * @param items - Menu items to filter
+ * @param userContext - Optional user context with roles
+ * @returns Filtered menu items visible to the user
+ *
+ * @example
+ * ```tsx
+ * const allItems: ContextMenuItem[] = [
+ *   { type: "bug", label: "Report Bug" },
+ *   { type: "admin", label: "Admin Panel", requiredRoles: ["admin"] },
+ * ];
+ *
+ * const userContext = { roles: ["user"] };
+ * const visibleItems = filterMenuItemsByRole(allItems, userContext);
+ * // => [{ type: "bug", label: "Report Bug" }]
+ * ```
+ *
+ * @since 1.2.0
  */
 declare function filterMenuItemsByRole(items: ContextMenuItem[], userContext?: AnyclickUserContext): ContextMenuItem[];
 /**
- * Props for the AnyclickProvider component
+ * Props for the AnyclickProvider component.
+ *
+ * @example
+ * ```tsx
+ * <AnyclickProvider
+ *   adapter={myAdapter}
+ *   menuItems={customMenuItems}
+ *   highlightConfig={{ colors: { targetColor: "#ef4444" } }}
+ *   screenshotConfig={{ enabled: true, showPreview: true }}
+ *   onSubmitSuccess={(payload) => console.log("Submitted:", payload)}
+ * >
+ *   <App />
+ * </AnyclickProvider>
+ * ```
+ *
+ * @since 1.0.0
  */
 interface AnyclickProviderProps {
-    /** Header content */
-    header?: ReactNode | null;
     /** The adapter to use for submitting anyclick */
     adapter: AnyclickAdapter;
     /** Child components */
     children: ReactNode;
-    /**
-     * 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: AnyclickTriggerEvent, target: Element) => boolean;
-    /** Custom menu items (defaults to Issue, Feature, Like) */
-    menuItems?: ContextMenuItem[];
+    /** Cooldown in milliseconds between submissions (rate limiting) */
+    cooldownMs?: number;
+    /** Whether the provider is disabled */
+    disabled?: boolean;
+    /** Header content */
+    header?: ReactNode | null;
+    /** Configuration for element highlighting */
+    highlightConfig?: HighlightConfig;
+    /** Maximum number of ancestors to capture */
+    maxAncestors?: number;
     /** Maximum length for innerText capture */
     maxInnerTextLength?: number;
     /** Maximum length for outerHTML capture */
     maxOuterHTMLLength?: number;
-    /** Maximum number of ancestors to capture */
-    maxAncestors?: number;
-    /** Cooldown in milliseconds between submissions (rate limiting) */
-    cooldownMs?: number;
-    /** Attributes to strip from outerHTML for privacy */
-    stripAttributes?: string[];
+    /** Custom class name for the context menu */
+    menuClassName?: string;
+    /** Custom menu items (defaults to Issue, Feature, Like) */
+    menuItems?: ContextMenuItem[];
+    /** Menu positioning mode (default: 'inView') */
+    menuPositionMode?: MenuPositionMode;
+    /** Custom styles for the context menu */
+    menuStyle?: CSSProperties;
     /** Additional metadata to include with every submission */
     metadata?: Record<string, unknown>;
-    /** Callback after successful submission */
-    onSubmitSuccess?: (payload: AnyclickPayload) => void;
     /** Callback after failed submission */
     onSubmitError?: (error: Error, payload: AnyclickPayload) => void;
-    /** Custom styles for the context menu */
-    menuStyle?: CSSProperties;
-    /** Custom class name for the context menu */
-    menuClassName?: string;
-    /** Whether the provider is disabled */
-    disabled?: boolean;
-    /** Configuration for element highlighting */
-    highlightConfig?: HighlightConfig;
-    /** Configuration for screenshot capture */
-    screenshotConfig?: ScreenshotConfig;
+    /** Callback after successful submission */
+    onSubmitSuccess?: (payload: AnyclickPayload) => void;
     /**
      * Whether to scope this provider to its children only.
      * When true, events will only be captured for elements within this provider's subtree.
      * When false (default), events are captured for the entire document.
      */
     scoped?: boolean;
+    /** Configuration for screenshot capture */
+    screenshotConfig?: ScreenshotConfig;
+    /** Attributes to strip from outerHTML for privacy */
+    stripAttributes?: string[];
+    /**
+     * 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: AnyclickTriggerEvent, target: Element) => boolean;
     /**
      * Theme configuration for this provider.
      * Themes are inherited from parent providers and merged (child overrides parent).
@@ -354,96 +465,135 @@ interface AnyclickProviderProps {
     touchHoldDurationMs?: number;
     /** Maximum movement in px before touch hold is cancelled (default: 10) */
     touchMoveThreshold?: number;
-    /** Menu positioning mode (default: 'inView') */
-    menuPositionMode?: MenuPositionMode;
 }
 /**
- * Context value exposed by AnyclickProvider
+ * Context value exposed by AnyclickProvider.
+ *
+ * Access via the {@link useAnyclick} hook.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const {
+ *     isEnabled,
+ *     isSubmitting,
+ *     openMenu,
+ *     closeMenu,
+ *     submitAnyclick,
+ *     theme,
+ *   } = useAnyclick();
+ *
+ *   // ...
+ * }
+ * ```
+ *
+ * @since 1.0.0
  */
 interface AnyclickContextValue {
+    /** Close the anyclick menu */
+    closeMenu: () => void;
     /** Whether anyclick is currently enabled */
     isEnabled: boolean;
     /** Whether a submission is in progress */
     isSubmitting: boolean;
-    /** 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 anyclick menu */
-    closeMenu: () => void;
-    /** The current merged theme (inherited from ancestors) */
-    theme: AnyclickTheme;
-    /** Whether this provider is scoped */
-    scoped: boolean;
     /** The provider's unique ID */
     providerId: string;
+    /** Whether this provider is scoped */
+    scoped: boolean;
+    /** Submit anyclick for a specific element */
+    submitAnyclick: (element: Element, type: AnyclickType, comment?: string) => Promise<void>;
+    /** The current merged theme (inherited from ancestors) */
+    theme: AnyclickTheme;
 }
 /**
- * Props for the context menu component
+ * Props for the ContextMenu component.
+ *
+ * @since 1.0.0
  */
 interface ContextMenuProps {
-    /** Whether the menu is visible */
-    visible: boolean;
-    /** Position of the menu */
-    position: {
-        x: number;
-        y: number;
-    };
-    /** Target element for anyclick */
-    targetElement: Element | null;
+    /** Custom class name */
+    className?: string;
     /** Container element found by highlight logic */
     containerElement: Element | null;
+    /** Footer content */
+    footer?: ReactNode;
+    /** Header content */
+    header?: ReactNode;
+    /** Configuration for element highlighting */
+    highlightConfig?: HighlightConfig;
+    /** Whether submission is in progress */
+    isSubmitting: boolean;
     /** Menu items to display */
     items: ContextMenuItem[];
-    /** Callback when an item is selected */
-    onSelect: (type: AnyclickType, comment?: string, screenshots?: ScreenshotData) => void;
     /** Callback when menu is closed */
     onClose: () => void;
-    /** Whether submission is in progress */
-    isSubmitting: boolean;
-    /** Custom styles */
-    style?: CSSProperties;
-    /** Custom class name */
-    className?: string;
-    /** Configuration for element highlighting */
-    highlightConfig?: HighlightConfig;
-    /** Configuration for screenshot capture */
-    screenshotConfig?: ScreenshotConfig;
+    /** Callback when an item is selected */
+    onSelect: (type: AnyclickType, comment?: string, screenshots?: ScreenshotData) => void;
+    /** Position of the menu */
+    position: {
+        x: number;
+        y: number;
+    };
     /** Menu positioning mode (default: 'inView') */
     positionMode?: MenuPositionMode;
-    /** Header content */
-    header?: ReactNode;
-    /** Footer content */
-    footer?: ReactNode;
+    /** Configuration for screenshot capture */
+    screenshotConfig?: ScreenshotConfig;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Target element for anyclick */
+    targetElement: Element | null;
+    /** Whether the menu is visible */
+    visible: boolean;
 }
 /**
- * Props for the screenshot preview component
+ * Props for the ScreenshotPreview component.
+ *
+ * @since 1.0.0
  */
 interface ScreenshotPreviewProps {
-    /** Captured screenshot data */
-    screenshots: ScreenshotData | null;
     /** Whether screenshots are loading */
     isLoading: boolean;
-    /** Callback when user confirms screenshots */
-    onConfirm: (screenshots: ScreenshotData) => void;
+    /** Whether submission is in progress */
+    isSubmitting: boolean;
     /** Callback when user cancels */
     onCancel: () => void;
+    /** Callback when user confirms screenshots */
+    onConfirm: (screenshots: ScreenshotData) => void;
     /** Callback when user wants to retake screenshots */
     onRetake: () => void;
-    /** Whether submission is in progress */
-    isSubmitting: boolean;
+    /** Captured screenshot data */
+    screenshots: ScreenshotData | null;
 }
 
 /**
- * AnyclickProvider component - wraps your app to enable feedback capture
- * Supports scoped providers and nested theming
+ * AnyclickProvider component - wraps your app to enable feedback capture.
+ *
+ * Supports scoped providers and nested theming with inheritance.
+ * Child providers automatically inherit and can override parent themes.
+ *
+ * @example
+ * ```tsx
+ * <AnyclickProvider
+ *   adapter={myAdapter}
+ *   menuItems={[
+ *     { type: "bug", label: "Report Bug", showComment: true },
+ *   ]}
+ *   onSubmitSuccess={(payload) => console.log("Submitted:", payload)}
+ * >
+ *   <App />
+ * </AnyclickProvider>
+ * ```
+ *
+ * @since 1.0.0
  */
-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;
+declare function AnyclickProvider({ adapter, children, cooldownMs, disabled, header, highlightConfig, maxAncestors, maxInnerTextLength, maxOuterHTMLLength, menuClassName, menuItems, menuStyle, metadata, onSubmitError, onSubmitSuccess, scoped, screenshotConfig, stripAttributes, targetFilter, theme, touchHoldDurationMs, touchMoveThreshold, }: AnyclickProviderProps): react_jsx_runtime.JSX.Element;
 /**
- * @deprecated Use AnyclickProvider instead
+ * @deprecated Use {@link AnyclickProvider} instead. Will be removed in v2.0.0.
  */
 declare const FeedbackProvider: typeof AnyclickProvider;
 
@@ -455,146 +605,404 @@ declare const FeedbackProvider: typeof AnyclickProvider;
 declare function FunModeBridge(): null;
 
 /**
- * Context menu component for selecting feedback type
+ * Context menu component for selecting feedback type.
+ *
+ * Displays a customizable context menu with support for:
+ * - Custom menu items with icons and badges
+ * - Submenus for organizing options
+ * - Comment input for detailed feedback
+ * - Screenshot preview before sending
+ * - Touch-friendly interactions
+ * - Dynamic positioning modes
+ *
+ * @since 1.0.0
  */
-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;
+declare function ContextMenu({ className, containerElement, footer, header, highlightConfig, isSubmitting, items, onClose, onSelect, position, positionMode, screenshotConfig, style, targetElement, visible, }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Screenshot preview component - shows captured screenshots before sending
+ * Screenshot preview component - shows captured screenshots before sending.
+ *
+ * Displays a preview of captured screenshots with tabs for element, container,
+ * and viewport captures. Allows users to review, retake, or proceed without
+ * screenshots.
+ *
+ * @since 1.0.0
  */
-declare function ScreenshotPreview({ screenshots, isLoading, onConfirm, onCancel, onRetake, isSubmitting, }: ScreenshotPreviewProps): react_jsx_runtime.JSX.Element;
+declare const ScreenshotPreview: React__default.NamedExoticComponent<ScreenshotPreviewProps>;
 
 /**
- * React context for anyclick functionality
+ * React context for anyclick functionality.
+ *
+ * Provides access to anyclick state and methods throughout the component tree.
+ * Use the {@link useAnyclick} hook for type-safe access.
+ *
+ * @example
+ * ```tsx
+ * // Using the context directly (advanced)
+ * const context = useContext(AnyclickContext);
+ * if (context) {
+ *   context.openMenu(element, { x: 100, y: 100 });
+ * }
+ * ```
+ *
+ * @see {@link useAnyclick} for the recommended way to access this context
+ * @since 1.0.0
  */
 declare const AnyclickContext: React$1.Context<AnyclickContextValue | null>;
 /**
- * @deprecated Use AnyclickContext instead
+ * @deprecated Use {@link AnyclickContext} instead. Will be removed in v2.0.0.
+ * @see {@link AnyclickContext}
  */
 declare const FeedbackContext: React$1.Context<AnyclickContextValue | null>;
 /**
- * Hook to access anyclick context
- * @throws Error if used outside of AnyclickProvider
+ * Hook to access anyclick context values and methods.
+ *
+ * Provides access to:
+ * - `isEnabled` - Whether anyclick is currently enabled
+ * - `isSubmitting` - Whether a submission is in progress
+ * - `submitAnyclick` - Function to submit feedback programmatically
+ * - `openMenu` - Function to open the context menu programmatically
+ * - `closeMenu` - Function to close the context menu
+ * - `theme` - The current merged theme configuration
+ * - `scoped` - Whether the current provider is scoped
+ * - `providerId` - The unique ID of the current provider
+ *
+ * @returns {AnyclickContextValue} The anyclick context value
+ * @throws {Error} When used outside of an AnyclickProvider
+ *
+ * @example
+ * ```tsx
+ * function FeedbackButton() {
+ *   const { openMenu, isSubmitting, isEnabled } = useAnyclick();
+ *
+ *   const handleClick = (event: React.MouseEvent) => {
+ *     if (isEnabled && !isSubmitting) {
+ *       openMenu(event.currentTarget, {
+ *         x: event.clientX,
+ *         y: event.clientY,
+ *       });
+ *     }
+ *   };
+ *
+ *   return (
+ *     <button onClick={handleClick} disabled={!isEnabled || isSubmitting}>
+ *       Send Feedback
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function useAnyclick(): AnyclickContextValue;
 /**
- * @deprecated Use useAnyclick instead
+ * @deprecated Use {@link useAnyclick} instead. Will be removed in v2.0.0.
+ * @see {@link useAnyclick}
  */
 declare function useFeedback(): AnyclickContextValue;
 
 /**
- * Registered provider instance
+ * Registered provider instance in the provider registry.
+ *
+ * Each AnyclickProvider creates an instance of this type when mounted,
+ * enabling the store to track and manage provider hierarchies.
+ *
+ * @since 1.0.0
  */
 interface ProviderInstance {
-    /** Unique identifier for this provider instance */
-    id: string;
     /** Reference to the provider's container element (null if not scoped) */
     containerRef: React.RefObject<Element | null>;
-    /** Whether this provider is scoped to its container */
-    scoped: boolean;
-    /** The provider's theme configuration */
-    theme: AnyclickTheme | null;
-    /** Whether this provider is disabled */
-    disabled: boolean;
-    /** Parent provider ID (if nested) */
-    parentId: string | null;
     /** Depth in the provider hierarchy (0 = root) */
     depth: number;
+    /** Whether this provider is disabled */
+    disabled: boolean;
+    /** Unique identifier for this provider instance */
+    id: string;
     /** Handler to call when an event occurs in this provider's scope */
     onContextMenu?: (event: AnyclickMenuEvent, element: Element) => boolean | void;
+    /** Parent provider ID (if nested) */
+    parentId: string | null;
+    /** Whether this provider is scoped to its container */
+    scoped: boolean;
+    /** The provider's theme configuration */
+    theme: AnyclickTheme | null;
 }
 /**
- * Provider registry store state
+ * Provider registry store state and actions.
+ * @internal
  */
 interface ProviderStore {
     /** Map of provider ID to provider instance */
     providers: Map<string, ProviderInstance>;
     /**
-     * Register a new provider
+     * Finds all providers that contain a given element, sorted by depth (nearest first).
+     * @param element - The DOM element to find providers for
+     * @returns Array of matching providers, sorted by depth (deepest first)
      */
-    registerProvider: (provider: ProviderInstance) => void;
+    findProvidersForElement: (element: Element) => ProviderInstance[];
     /**
-     * Unregister a provider
+     * Finds the nearest parent provider for a given container.
+     * @param container - The container element to find a parent for
+     * @param excludeId - Optional provider ID to exclude from search
+     * @returns The nearest parent provider, or null if none found
      */
-    unregisterProvider: (id: string) => void;
+    findParentProvider: (container: Element | null, excludeId?: string) => ProviderInstance | null;
     /**
-     * Update a provider's configuration
+     * Gets the merged theme for a provider (includes inherited parent themes).
+     * @param providerId - The ID of the provider to get the merged theme for
+     * @returns The merged theme configuration
      */
-    updateProvider: (id: string, updates: Partial<ProviderInstance>) => void;
+    getMergedTheme: (providerId: string) => AnyclickTheme;
     /**
-     * Find all providers that contain a given element, sorted by depth (nearest first)
+     * Checks if any ancestor provider has disabled anyclick.
+     * @param providerId - The ID of the provider to check
+     * @returns True if any ancestor is disabled
      */
-    findProvidersForElement: (element: Element) => ProviderInstance[];
+    isDisabledByAncestor: (providerId: string) => boolean;
     /**
-     * Find the nearest parent provider for a given container
+     * Checks if an element is inside any scoped provider's container.
+     * Used to prevent the global provider from handling touch events.
+     * @param element - The element to check
+     * @returns True if element is inside any scoped provider
      */
-    findParentProvider: (container: Element | null, excludeId?: string) => ProviderInstance | null;
+    isElementInAnyScopedProvider: (element: Element) => boolean;
     /**
-     * Get merged theme for a provider (includes inherited parent themes)
+     * Checks if an element is inside a disabled scoped provider's container.
+     * @param element - The element to check
+     * @returns True if element is inside a disabled scope
      */
-    getMergedTheme: (providerId: string) => AnyclickTheme;
+    isElementInDisabledScope: (element: Element) => boolean;
     /**
-     * Check if any ancestor provider has disabled anyclick
+     * Registers a new provider in the store.
+     * @param provider - The provider instance to register
      */
-    isDisabledByAncestor: (providerId: string) => boolean;
+    registerProvider: (provider: ProviderInstance) => void;
     /**
-     * Check if an element is inside a disabled scoped provider's container
-     * This is used to prevent the global provider from handling events
-     * in areas where a disabled scoped provider should block them
+     * Unregisters a provider from the store.
+     * @param id - The ID of the provider to unregister
      */
-    isElementInDisabledScope: (element: Element) => boolean;
+    unregisterProvider: (id: string) => void;
     /**
-     * Check if an element is inside any scoped provider's container (enabled or not)
-     * This is used to prevent the global provider from handling touch events
-     * that should be handled by a scoped provider instead
+     * Updates a provider's configuration.
+     * @param id - The ID of the provider to update
+     * @param updates - Partial updates to apply
      */
-    isElementInAnyScopedProvider: (element: Element) => boolean;
+    updateProvider: (id: string, updates: Partial<ProviderInstance>) => void;
 }
+/**
+ * Generates a unique ID for a provider instance.
+ *
+ * @returns A unique provider ID string
+ *
+ * @example
+ * ```ts
+ * const id = generateProviderId();
+ * // => "anyclick-provider-1"
+ * ```
+ *
+ * @since 1.0.0
+ */
 declare function generateProviderId(): string;
 /**
- * Zustand store for managing provider instances
+ * Zustand store hook for managing provider instances.
+ *
+ * This store maintains a global registry of all AnyclickProvider instances,
+ * enabling features like:
+ * - Nested provider hierarchies
+ * - Theme inheritance
+ * - Scoped contexts
+ * - Event routing
+ *
+ * @example
+ * ```ts
+ * // Get providers for an element
+ * const providers = useProviderStore.getState().findProvidersForElement(element);
+ *
+ * // Get merged theme for a provider
+ * const { getMergedTheme } = useProviderStore();
+ * const theme = getMergedTheme(providerId);
+ * ```
+ *
+ * @since 1.0.0
  */
 declare const useProviderStore: zustand.UseBoundStore<zustand.StoreApi<ProviderStore>>;
 /**
- * Dispatch a context menu event to all matching providers (bubble up)
+ * Dispatches a context menu event to all matching providers.
+ *
+ * Routes the event through the provider hierarchy, calling handlers
+ * from the nearest (deepest) provider first.
+ *
+ * @param event - The original mouse event
+ * @param element - The target element
+ *
+ * @example
+ * ```ts
+ * document.addEventListener("contextmenu", (event) => {
+ *   dispatchContextMenuEvent(event, event.target as Element);
+ * });
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function dispatchContextMenuEvent(event: MouseEvent, element: Element): void;
 
-type PresetRole = "qa" | "pm" | "designer" | "developer" | "chrome";
+/**
+ * Available preset role identifiers.
+ *
+ * - `qa` - QA/Testing focused menu with bug reporting and repro steps
+ * - `pm` - Product Manager focused menu with feature ideas and impact sizing
+ * - `designer` - Designer focused menu with visual QA and accessibility
+ * - `developer` - Developer focused menu with diagnostics and debugging
+ * - `chrome` - Chrome-like context menu with browser actions
+ *
+ * @since 1.2.0
+ */
+type PresetRole = "chrome" | "designer" | "developer" | "pm" | "qa";
+/**
+ * Complete preset configuration for a role.
+ *
+ * Contains all the settings needed to configure an AnyclickProvider
+ * for a specific user role.
+ *
+ * @since 1.2.0
+ */
 interface PresetConfig {
-    role: PresetRole;
-    label: string;
+    /** Human-readable description of the preset */
     description: string;
+    /** Optional highlight configuration */
+    highlightConfig?: HighlightConfig;
+    /** Human-readable label for the preset */
+    label: string;
+    /** Context menu items for this preset */
     menuItems: ContextMenuItem[];
-    screenshotConfig?: Partial<ScreenshotConfig>;
+    /** Additional metadata to include with submissions */
     metadata?: Record<string, unknown>;
+    /** The preset role identifier */
+    role: PresetRole;
+    /** Screenshot capture configuration */
+    screenshotConfig?: Partial<ScreenshotConfig>;
+    /** Theme configuration including styles and highlighting */
     theme?: AnyclickTheme;
-    highlightConfig?: HighlightConfig;
 }
+/**
+ * Options for customizing preset menu creation.
+ *
+ * @since 1.2.0
+ */
 interface CreatePresetMenuOptions {
-    /** Whether to include coming-soon items (defaults to true) */
+    /**
+     * Whether to include coming-soon items in the menu.
+     * Coming-soon items are shown but disabled.
+     * @default 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.
+     *
+     * @example
+     * ```ts
+     * const qaPreset = createPresetMenu("qa", {
+     *   overrides: {
+     *     screenshotConfig: { quality: 0.9 },
+     *     theme: { highlightConfig: { colors: { targetColor: "#ef4444" } } },
+     *   },
+     * });
+     * ```
      */
-    overrides?: Partial<Omit<PresetConfig, "role" | "label" | "description">>;
+    overrides?: Partial<Omit<PresetConfig, "description" | "label" | "role">>;
 }
+/**
+ * Default preset configurations for each role.
+ *
+ * These are the base configurations that {@link createPresetMenu} uses.
+ * You can use them directly if you don't need any customization.
+ *
+ * @since 1.2.0
+ */
 declare const presetDefaults: Record<PresetRole, PresetConfig>;
 /**
- * Create a preset menu for a given role. Coming-soon items remain visible but disabled.
+ * Creates a preset menu configuration for a specific role.
+ *
+ * Returns a complete configuration that can be spread into AnyclickProvider props.
+ * Coming-soon items are included by default but shown as disabled.
+ *
+ * @param role - The preset role to create a menu for
+ * @param options - Optional customization options
+ * @returns A complete preset configuration
+ * @throws {Error} If an unknown role is specified
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const qaPreset = createPresetMenu("qa");
+ *
+ * // With customization
+ * const devPreset = createPresetMenu("developer", {
+ *   includeComingSoon: false,
+ *   overrides: {
+ *     screenshotConfig: { quality: 0.9 },
+ *   },
+ * });
+ *
+ * <AnyclickProvider
+ *   adapter={adapter}
+ *   menuItems={qaPreset.menuItems}
+ *   screenshotConfig={qaPreset.screenshotConfig}
+ *   theme={qaPreset.theme}
+ * >
+ *   <App />
+ * </AnyclickProvider>
+ * ```
+ *
+ * @since 1.2.0
  */
 declare function createPresetMenu(role: PresetRole, options?: CreatePresetMenuOptions): PresetConfig;
 /**
- * List all available presets with their defaults.
+ * Lists all available preset configurations.
+ *
+ * Returns cloned copies of all presets so they can be safely modified.
+ * Useful for displaying available options or building custom preset selectors.
+ *
+ * @returns Array of all preset configurations
+ *
+ * @example
+ * ```tsx
+ * const presets = listPresets();
+ *
+ * function PresetSelector({ onSelect }) {
+ *   return (
+ *     <select onChange={(e) => onSelect(e.target.value)}>
+ *       {presets.map((preset) => (
+ *         <option key={preset.role} value={preset.role}>
+ *           {preset.label} - {preset.description}
+ *         </option>
+ *       ))}
+ *     </select>
+ *   );
+ * }
+ * ```
+ *
+ * @since 1.2.0
  */
 declare function listPresets(): PresetConfig[];
 
+/**
+ * Style definitions for anyclick-react components.
+ *
+ * This module provides consolidated styling for all UI components,
+ * including CSS custom properties for theming and dark mode support.
+ *
+ * @module styles
+ * @since 1.0.0
+ */
+
 /**
  * CSS custom properties for menu theming.
+ *
  * These can be overridden via the `style` prop on AnyclickProvider.
  *
- * Example:
+ * @example
  * ```tsx
  * <AnyclickProvider
  *   theme={{
@@ -608,57 +1016,194 @@ declare function listPresets(): PresetConfig[];
  *   }}
  * />
  * ```
+ *
+ * @since 1.0.0
  */
 declare const menuCSSVariables: {
-    readonly "--anyclick-menu-bg": "#ffffff";
-    readonly "--anyclick-menu-hover": "#f5f5f5";
-    readonly "--anyclick-menu-text": "#333333";
-    readonly "--anyclick-menu-text-muted": "#666666";
-    readonly "--anyclick-menu-border": "#e5e5e5";
     readonly "--anyclick-menu-accent": "#0066cc";
     readonly "--anyclick-menu-accent-text": "#ffffff";
-    readonly "--anyclick-menu-input-bg": "#ffffff";
-    readonly "--anyclick-menu-input-border": "#dddddd";
+    readonly "--anyclick-menu-bg": "#ffffff";
+    readonly "--anyclick-menu-border": "#e5e5e5";
     readonly "--anyclick-menu-cancel-bg": "#f0f0f0";
     readonly "--anyclick-menu-cancel-text": "#666666";
+    readonly "--anyclick-menu-hover": "#f5f5f5";
+    readonly "--anyclick-menu-input-bg": "#ffffff";
+    readonly "--anyclick-menu-input-border": "#dddddd";
+    readonly "--anyclick-menu-text": "#333333";
+    readonly "--anyclick-menu-text-muted": "#666666";
 };
+/**
+ * Gets badge styles for a specific tone.
+ *
+ * @param tone - The badge tone (info, neutral, success, warning)
+ * @returns CSSProperties for the badge
+ *
+ * @example
+ * ```tsx
+ * const style = getBadgeStyle("success");
+ * // => { backgroundColor: "rgba(34, 197, 94, 0.15)", ... }
+ * ```
+ *
+ * @since 1.2.0
+ */
+declare function getBadgeStyle(tone?: "info" | "neutral" | "success" | "warning"): CSSProperties;
+/**
+ * Core menu component styles.
+ *
+ * @since 1.0.0
+ */
 declare const menuStyles: Record<string, CSSProperties>;
+/**
+ * Dark mode menu styles.
+ *
+ * Apply these styles for dark theme support.
+ *
+ * @since 1.0.0
+ */
 declare const darkMenuStyles: Record<string, CSSProperties>;
 
 /**
- * Highlight utilities for feedback target elements
+ * Highlight utilities for feedback target elements.
+ *
+ * Provides functions to visually highlight DOM elements during feedback selection.
+ * Highlights are applied using CSS classes and dynamically generated styles.
+ *
+ * @module highlight
+ * @since 1.0.0
  */
 
 /**
- * Default highlight colors
+ * Default highlight colors used when no custom colors are specified.
+ *
+ * @example
+ * ```ts
+ * // Override specific colors
+ * const customColors = {
+ *   ...defaultHighlightColors,
+ *   targetColor: "#ef4444", // Red instead of blue
+ * };
+ * ```
+ *
+ * @since 1.0.0
  */
 declare const defaultHighlightColors: Required<HighlightColors>;
 /**
- * Default container selectors
+ * Default CSS selectors used to identify container elements.
+ *
+ * These selectors are checked when traversing up the DOM tree to find
+ * a suitable container element to highlight alongside the target.
+ *
+ * @example
+ * ```ts
+ * // Add custom selectors
+ * const customSelectors = [
+ *   ...defaultContainerSelectors,
+ *   "[data-component]",
+ *   ".my-custom-container",
+ * ];
+ * ```
+ *
+ * @since 1.0.0
  */
 declare const defaultContainerSelectors: string[];
 /**
- * Find the closest container parent element
+ * Finds the closest container parent element for a given target element.
+ *
+ * Traverses up the DOM tree looking for elements that match container selectors
+ * or have multiple meaningful child elements.
+ *
+ * @param element - The target element to find a container for
+ * @param config - Optional highlight configuration with custom selectors
+ * @returns The found container element, or null if none found
+ *
+ * @example
+ * ```ts
+ * const target = document.querySelector(".my-button");
+ * const container = findContainerParent(target, {
+ *   containerSelectors: [".card", ".panel"],
+ *   minChildrenForContainer: 3,
+ * });
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function findContainerParent(element: Element, config?: HighlightConfig): Element | null;
 /**
- * Apply highlight to target element
+ * Applies highlight styling to a target element.
+ *
+ * Injects the necessary CSS styles and adds the highlight class to the element.
+ *
+ * @param element - The element to highlight
+ * @param colors - Optional custom highlight colors
+ *
+ * @example
+ * ```ts
+ * const target = document.querySelector(".my-button");
+ * highlightTarget(target, { targetColor: "#ef4444" });
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function highlightTarget(element: Element, colors?: HighlightColors): void;
 /**
- * Apply highlight to container element
+ * Applies highlight styling to a container element.
+ *
+ * Container highlights are visually distinct from target highlights,
+ * typically with a larger outline offset and different color.
+ *
+ * @param element - The container element to highlight
+ * @param colors - Optional custom highlight colors
+ *
+ * @example
+ * ```ts
+ * const container = document.querySelector(".card");
+ * highlightContainer(container, { containerColor: "#22c55e" });
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function highlightContainer(element: Element, colors?: HighlightColors): void;
 /**
- * Remove all highlights from the document
+ * Removes all highlight styling from the document.
+ *
+ * Clears both target and container highlights from all elements.
+ *
+ * @example
+ * ```ts
+ * // Remove highlights when closing the context menu
+ * clearHighlights();
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function clearHighlights(): void;
 /**
- * Apply highlights to target element and its container parent
+ * Applies highlights to both a target element and its container parent.
+ *
+ * This is the main function for applying highlights during feedback selection.
+ * It automatically finds the container parent and applies appropriate styling.
+ *
+ * @param targetElement - The element to highlight as the target
+ * @param config - Optional highlight configuration
+ * @returns Object containing the target and container elements
+ *
+ * @example
+ * ```ts
+ * const result = applyHighlights(clickedElement, {
+ *   enabled: true,
+ *   colors: { targetColor: "#3b82f6", containerColor: "#8b5cf6" },
+ *   containerSelectors: [".card", ".modal"],
+ * });
+ *
+ * console.log(result.target);    // The highlighted target
+ * console.log(result.container); // The highlighted container (or null)
+ * ```
+ *
+ * @since 1.0.0
  */
 declare function applyHighlights(targetElement: Element, config?: HighlightConfig): {
-    target: Element;
     container: Element | null;
+    target: Element;
 };
 
 /**
@@ -710,118 +1255,6 @@ interface InspectDialogManagerProps {
  */
 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;
@@ -844,29 +1277,4 @@ interface AnyclickLogoProps {
  */
 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 };
+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, FeedbackContext, type FeedbackMenuBadge, type FeedbackMenuStatus, FeedbackProvider, FunModeBridge, type FunModeThemeConfig, type HighlightColors, type HighlightConfig, type IDEConfig, type IDEProtocol, INSPECT_DIALOG_EVENT, type InspectDialogEventDetail, InspectDialogManager, type InspectDialogManagerProps, InspectSimple, type InspectSimpleProps, type MenuPositionMode, 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, generateProviderId, getBadgeStyle, getSourceLocationFromElement, highlightContainer, highlightTarget, isIDEProtocolSupported, listPresets, menuCSSVariables, menuStyles, openInIDE, openInspectDialog, presetDefaults, useAnyclick, useFeedback, useProviderStore };