@ewjdev/anyclick-react 1.4.1 → 2.0.0

package/README.md

@@ -43,6 +43,29 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 That's it! Users can now right-click any element to submit feedback.
 
+### Advanced inspector (DevTools UI)
+
+For the full Chrome DevTools-style inspector (modification tracking, box model overlay, accessibility deep dive), install the dedicated package:
+
+```bash
+npm install @ewjdev/anyclick-devtools
+```
+
+```tsx
+import {
+  InspectDialogManager,
+  openInspectDialog,
+} from "@ewjdev/anyclick-devtools";
+
+// Place once near the root
+<InspectDialogManager />;
+
+// Trigger from a menu item or button
+openInspectDialog(targetElement);
+```
+
+`@ewjdev/anyclick-react` keeps the tiny inspector for quick selector/copy/screenshot flows, while `@ewjdev/anyclick-devtools` hosts the full-featured experience.
+
 ## Features
 
 - 🖱️ **Right-Click Context Menu** - Native feel with customizable items
@@ -53,7 +76,7 @@ That's it! Users can now right-click any element to submit feedback.
 - 📁 **Submenus** - Organize menu items with nested submenus
 - 🎯 **Scoped Providers** - Limit feedback capture to specific components
 - 🎨 **Nested Theming** - Override themes for specific sections of your app
-- 🔍 **Element Inspector** - Chrome DevTools-style inspect dialog
+- 🔍 **Tiny Inspector** - Built-in lightweight inspector (selector, contents, screenshot); full DevTools UI now lives in `@ewjdev/anyclick-devtools`
 - ⚡ **Performance Optimized** - Memoized components and efficient re-renders
 
 ## API Reference

package/dist/index.d.mts

@@ -4,7 +4,6 @@ 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,44 +119,25 @@ 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.
@@ -1287,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;
@@ -1421,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, getBadgeStyle, 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 };

package/dist/index.d.ts

@@ -4,7 +4,6 @@ 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,44 +119,25 @@ 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.
@@ -1287,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;
@@ -1421,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, getBadgeStyle, 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 };