@ewjdev/anyclick-react 1.2.0 → 1.4.0

package/README.md

@@ -53,12 +53,12 @@ That's it! Users can now right-click any element to submit feedback.
 
 | Prop              | Type                       | Description                                    |
 | ----------------- | -------------------------- | ---------------------------------------------- |
-| `adapter`         | `FeedbackAdapter`          | Required. The adapter for submitting feedback  |
-| `menuItems`       | `FeedbackMenuItem[]`       | Custom menu items                              |
+| `adapter`         | `AnyclickAdapter`          | Required. The adapter for submitting anyclick  |
+| `menuItems`       | `ContextMenuItem[]`        | Custom menu items                              |
 | `metadata`        | `Record<string, unknown>`  | Additional data included with every submission |
 | `theme`           | `AnyclickTheme \| null`    | Theme configuration (inherits from parent)     |
 | `scoped`          | `boolean`                  | Limit capture to this provider's children only |
-| `disabled`        | `boolean`                  | Disable feedback capture                       |
+| `disabled`        | `boolean`                  | Disable anyclick capture                       |
 | `onSubmitSuccess` | `(payload) => void`        | Success callback                               |
 | `onSubmitError`   | `(error, payload) => void` | Error callback                                 |
 
@@ -188,6 +188,34 @@ const userContext = { roles: ["user", "developer"] };
 const menuItems = filterMenuItemsByRole(allMenuItems, userContext);
 ```
 
+## Role-Based Presets
+
+Skip hand-authoring menus by pulling in a preset for common roles. Coming-soon actions stay visible with a badge but are disabled by default.
+
+```tsx
+import { AnyclickProvider, createPresetMenu } from "@ewjdev/anyclick-react";
+
+const qaPreset = createPresetMenu("qa");
+// Or: listPresets() to show available roles, createPresetMenu("developer", { includeComingSoon: false })
+
+<AnyclickProvider
+  adapter={adapter}
+  menuItems={qaPreset.menuItems}
+  screenshotConfig={qaPreset.screenshotConfig}
+  metadata={qaPreset.metadata}
+  theme={qaPreset.theme}
+>
+  {children}
+</AnyclickProvider>;
+```
+
+Preset defaults (examples):
+
+- QA: bug / repro / UX papercut + “Performance trace” (coming soon)
+- PM: feature idea / UX papercut + “Impact sizing” (coming soon)
+- Designer: visual bug / accessibility + “Motion glitch” (coming soon)
+- Developer: bug / refactor + diagnostics submenu (console/network traces marked coming soon)
+
 ## Highlight Configuration
 
 ```tsx

package/dist/index.d.mts

@@ -1,9 +1,175 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AnyclickAdapter, AnyclickTriggerEvent, AnyclickType, AnyclickPayload, ScreenshotConfig, ScreenshotData, AnyclickMenuEvent } from '@ewjdev/anyclick-core';
-export { AnyclickAdapter, AnyclickPayload, AnyclickType, DEFAULT_SCREENSHOT_CONFIG, DEFAULT_SENSITIVE_SELECTORS, ElementContext, PageContext, ScreenshotCapture, ScreenshotCaptureMode, ScreenshotConfig, ScreenshotData, captureAllScreenshots, captureScreenshot, estimateTotalSize, formatBytes, isScreenshotSupported } from '@ewjdev/anyclick-core';
-import * as react from 'react';
-import { ReactNode, CSSProperties } from 'react';
+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
@@ -73,7 +239,7 @@ interface HighlightConfig {
 /**
  * Menu item displayed in the Anyclick context menu
  */
-interface AnyclickMenuItem {
+interface ContextMenuItem {
     /** Feedback type for this option (use unique identifier for parent items with children) */
     type: AnyclickType;
     /** Display label */
@@ -82,10 +248,14 @@ interface AnyclickMenuItem {
     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?: AnyclickMenuItem[];
+    children?: ContextMenuItem[];
     /**
      * Optional click handler for custom behavior.
      * Return `false` (or a Promise resolving to false) to skip the default submission flow.
@@ -96,6 +266,19 @@ interface AnyclickMenuItem {
         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
  */
@@ -110,7 +293,7 @@ interface AnyclickUserContext {
 /**
  * Filter menu items based on user context
  */
-declare function filterMenuItemsByRole(items: AnyclickMenuItem[], userContext?: AnyclickUserContext): AnyclickMenuItem[];
+declare function filterMenuItemsByRole(items: ContextMenuItem[], userContext?: AnyclickUserContext): ContextMenuItem[];
 /**
  * Props for the AnyclickProvider component
  */
@@ -128,7 +311,7 @@ interface AnyclickProviderProps {
      */
     targetFilter?: (event: AnyclickTriggerEvent, target: Element) => boolean;
     /** Custom menu items (defaults to Issue, Feature, Like) */
-    menuItems?: AnyclickMenuItem[];
+    menuItems?: ContextMenuItem[];
     /** Maximum length for innerText capture */
     maxInnerTextLength?: number;
     /** Maximum length for outerHTML capture */
@@ -214,7 +397,7 @@ interface ContextMenuProps {
     /** Container element found by highlight logic */
     containerElement: Element | null;
     /** Menu items to display */
-    items: AnyclickMenuItem[];
+    items: ContextMenuItem[];
     /** Callback when an item is selected */
     onSelect: (type: AnyclickType, comment?: string, screenshots?: ScreenshotData) => void;
     /** Callback when menu is closed */
@@ -284,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
@@ -377,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.
@@ -448,4 +661,212 @@ declare function applyHighlights(targetElement: Element, config?: HighlightConfi
     container: Element | null;
 };
 
-export { AnyclickContext, type AnyclickContextValue, type AnyclickMenuItem, AnyclickProvider, type AnyclickProviderProps, type AnyclickTheme, type AnyclickUserContext, ContextMenu, type ContextMenuProps, FeedbackContext, FeedbackProvider, FunModeBridge, type FunModeThemeConfig, 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 };