@buoy-gg/floating-tools-core 1.7.2

package/dist/index.d.mts

@@ -0,0 +1,1779 @@
+import * as react from 'react';
+import { FC } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Core types for the floating tools headless system.
+ */
+interface Position {
+    x: number;
+    y: number;
+}
+interface Size {
+    width: number;
+    height: number;
+}
+interface Bounds {
+    minX: number;
+    maxX: number;
+    minY: number;
+    maxY: number;
+}
+/**
+ * Platform-agnostic storage adapter.
+ * Implement this interface for your platform (localStorage, AsyncStorage, etc.)
+ */
+interface StorageAdapter {
+    getItem: (key: string) => Promise<string | null> | string | null;
+    setItem: (key: string, value: string) => Promise<void> | void;
+}
+/**
+ * State managed by the floating tools core.
+ */
+interface FloatingToolsState {
+    position: Position;
+    isDragging: boolean;
+    isHidden: boolean;
+    bubbleSize: Size;
+}
+/**
+ * Options for creating a floating tools store.
+ */
+interface FloatingToolsOptions {
+    /** Screen dimensions - required for boundary calculations */
+    screenWidth: number;
+    screenHeight: number;
+    /** Initial bubble size (will be updated on layout) */
+    initialBubbleSize?: Size;
+    /** Initial position (before loading from storage) */
+    initialPosition?: Position;
+    /** Minimum position boundaries */
+    minPosition?: Position;
+    /** Whether to persist position to storage */
+    enablePositionPersistence?: boolean;
+    /** Width of visible handle when hidden (default: 32) */
+    visibleHandleWidth?: number;
+    /** Drag threshold in pixels (default: 5) */
+    dragThreshold?: number;
+    /** Animation duration in ms (default: 200) */
+    animationDuration?: number;
+    /** Edge padding in pixels (default: 10) */
+    edgePadding?: number;
+    /** Storage adapter for position persistence */
+    storage?: StorageAdapter;
+    /** Callback when position changes */
+    onPositionChange?: (position: Position) => void;
+    /** Callback when hidden state changes */
+    onHiddenChange?: (hidden: boolean) => void;
+    /** Callback when dragging state changes */
+    onDraggingChange?: (dragging: boolean) => void;
+}
+/**
+ * Drag event data passed to handlers.
+ */
+interface DragEventData {
+    /** Current mouse/touch position */
+    clientX: number;
+    clientY: number;
+}
+/**
+ * Result of a drag end operation.
+ */
+interface DragEndResult {
+    /** Final clamped position */
+    position: Position;
+    /** Whether the bubble should animate to hidden state */
+    shouldHide: boolean;
+    /** Whether this was a tap (not a drag) */
+    wasTap: boolean;
+}
+/**
+ * Slot where a tool can appear.
+ * - 'dial': Only in the circular dial menu
+ * - 'row': Only in the floating toolbar row
+ * - 'both': Can appear in either location
+ */
+type ToolSlot = 'dial' | 'row' | 'both';
+/**
+ * Base tool configuration - platform agnostic.
+ *
+ * Contains the minimum configuration needed to identify and
+ * describe a tool. Platform-specific configs extend this.
+ *
+ * Note: name, description, and color are optional because they
+ * can fall back to shared defaults from toolLabels, toolDescriptions,
+ * and toolColors in the settings module.
+ */
+interface BaseToolConfig {
+    /** Unique identifier for the tool */
+    id: string;
+    /** Display name (falls back to toolLabels[id]) */
+    name?: string;
+    /** Short description (falls back to toolDescriptions[id]) */
+    description?: string;
+    /** Where the tool can appear (default: 'both') */
+    slot?: ToolSlot;
+    /** Accent color (falls back to toolColors[id]) */
+    color?: string;
+}
+/**
+ * Web tool configuration.
+ *
+ * Extends BaseToolConfig with web-specific rendering options.
+ * Does not use React Native's ComponentType or other RN-specific types.
+ */
+interface WebToolConfig extends BaseToolConfig {
+    /**
+     * Icon to display.
+     * Can be:
+     * - A string (emoji or text)
+     * - A function that returns a React node given the size
+     */
+    icon: string | ((size: number) => unknown);
+    /**
+     * React component to render when tool is activated.
+     * Optional - some tools may just have an onPress handler.
+     */
+    component?: unknown;
+    /**
+     * Callback when tool icon is pressed.
+     * For toggle-only tools or tools with custom launch behavior.
+     */
+    onPress?: () => void;
+}
+/**
+ * Environment type for the dev tools.
+ */
+type Environment = 'local' | 'dev' | 'qa' | 'staging' | 'prod';
+
+/**
+ * FloatingToolsStore - Headless state management for floating tools.
+ *
+ * This class manages all the business logic for the floating tools bubble:
+ * - Position state and validation
+ * - Drag detection (tap vs drag)
+ * - Hide/show toggle
+ * - Auto-hide when dragged past edge
+ * - Position persistence
+ *
+ * Platform-specific code (animation, event handling) is NOT included here.
+ * Use this with platform-specific hooks/bindings.
+ */
+
+type Listener$1 = () => void;
+declare class FloatingToolsStore {
+    private position;
+    private isDragging;
+    private isHidden;
+    private bubbleSize;
+    private screenWidth;
+    private screenHeight;
+    private minPosition;
+    private visibleHandleWidth;
+    private dragThreshold;
+    private edgePadding;
+    private enablePositionPersistence;
+    private storage?;
+    private onPositionChange?;
+    private onHiddenChange?;
+    private onDraggingChange?;
+    private dragStartPos;
+    private dragStartMouse;
+    private hasMoved;
+    private savedPosition;
+    private saveTimeout;
+    private isInitialized;
+    private listeners;
+    private stateSnapshot;
+    constructor(options: FloatingToolsOptions);
+    subscribe: (listener: Listener$1) => (() => void);
+    getSnapshot: () => FloatingToolsState;
+    private createSnapshot;
+    private notify;
+    /**
+     * Initialize the store by loading persisted position.
+     * Call this after setting up storage adapter.
+     */
+    initialize(): Promise<void>;
+    /**
+     * Get current bounds for position validation.
+     */
+    getBounds(): Bounds;
+    /**
+     * Validate and clamp a position to screen boundaries.
+     */
+    validatePosition(pos: Position): Position;
+    /**
+     * Set position directly (for animation callbacks).
+     */
+    setPosition(pos: Position): void;
+    /**
+     * Update bubble size (call on layout).
+     * Only notifies if size actually changed.
+     */
+    setBubbleSize(size: Size): void;
+    /**
+     * Update screen dimensions (call on resize).
+     */
+    setScreenSize(width: number, height: number): void;
+    /**
+     * Update min position (e.g., for safe area insets).
+     */
+    setMinPosition(minPos: Position): void;
+    private savePosition;
+    private debouncedSavePosition;
+    /**
+     * Toggle between hidden and visible states.
+     * Returns the target position for animation.
+     */
+    toggleHideShow(): {
+        targetPosition: Position;
+        isHiding: boolean;
+    };
+    /**
+     * Force hide (for pushToSide behavior).
+     */
+    forceHide(): {
+        targetPosition: Position;
+    };
+    /**
+     * Force show (restore from pushToSide).
+     */
+    forceShow(): {
+        targetPosition: Position;
+    };
+    /**
+     * Start a drag operation.
+     */
+    handleDragStart(event: DragEventData): void;
+    /**
+     * Process drag movement.
+     * Returns the new position (for animation) and whether drag threshold was exceeded.
+     */
+    handleDragMove(event: DragEventData): {
+        position: Position;
+        isDragging: boolean;
+    };
+    /**
+     * End a drag operation.
+     * Returns the result including whether to animate to hidden state.
+     */
+    handleDragEnd(event: DragEventData): DragEndResult;
+    /**
+     * Commit position after animation completes.
+     */
+    commitPosition(pos: Position): void;
+    destroy(): void;
+}
+
+/**
+ * Shared constants for floating tools behavior.
+ * These values ensure consistent behavior across platforms.
+ */
+/** Width of the visible grip handle when bubble is hidden (pixels) */
+declare const VISIBLE_HANDLE_WIDTH = 32;
+/** Minimum movement to distinguish drag from tap (pixels) */
+declare const DRAG_THRESHOLD = 5;
+/** Animation duration for hide/show transitions (milliseconds) */
+declare const ANIMATION_DURATION = 200;
+/** Padding from screen edges (pixels) */
+declare const EDGE_PADDING = 10;
+/** Debounce delay for position persistence (milliseconds) */
+declare const SAVE_DEBOUNCE_MS = 500;
+/** Storage keys for position persistence */
+declare const STORAGE_KEYS: {
+    readonly POSITION_X: "@react_buoy_bubble_position_x";
+    readonly POSITION_Y: "@react_buoy_bubble_position_y";
+};
+
+/**
+ * Settings - Shared settings types, constants, and utilities.
+ *
+ * Pure configuration and logic functions for dev tools settings.
+ * No React or platform-specific code.
+ *
+ * This module provides:
+ * - Storage keys and constants
+ * - Tab configuration
+ * - Tool colors, labels, descriptions
+ * - Styling constants for cards and toggles
+ * - Settings logic (enforce limits, merge, etc.)
+ * - Event bus for cross-component sync
+ */
+/** Storage key for dev tools settings */
+declare const SETTINGS_STORAGE_KEY = "@react_buoy_dev_tools_settings";
+/** Maximum number of tools in the dial menu */
+declare const MAX_SETTINGS_DIAL_SLOTS = 6;
+type SettingsTabKey = 'dial' | 'floating' | 'settings' | 'pro';
+interface SettingsTab {
+    key: SettingsTabKey;
+    label: string;
+}
+/** Tab configuration - shared across mobile and web */
+declare const settingsTabs: SettingsTab[];
+/**
+ * Color palette for the settings modal.
+ * Matches the mobile implementation for consistency.
+ */
+declare const settingsColors: {
+    readonly background: "rgba(8, 12, 21, 0.98)";
+    readonly panel: "rgba(16, 22, 35, 0.98)";
+    readonly backdrop: "rgba(0, 0, 0, 0.85)";
+    readonly cardBackground: "#0F172A";
+    readonly cardBorder: "#25324A";
+    readonly cardBorderHover: "#3b4c6b";
+    readonly text: "#E6EEFF";
+    readonly textSecondary: "#B8BFC9";
+    readonly textMuted: "#7F91B2";
+    readonly textDim: "#7A8599";
+    readonly success: "#4AFF9F";
+    readonly warning: "#FFEB3B";
+    readonly error: "#FF5252";
+    readonly info: "#00B8E6";
+    readonly toggleOnBg: (color: string) => string;
+    readonly toggleOnBorder: (color: string) => string;
+    readonly toggleOffBg: "#1b2334";
+    readonly toggleOffBorder: "#2a3550";
+    readonly toggleOffText: "#8CA2C8";
+    readonly tabActiveBg: "rgba(0, 184, 230, 0.13)";
+    readonly tabActiveBorder: "#00B8E6";
+    readonly tabInactiveBg: "transparent";
+    readonly tabInactiveText: "#7A8599";
+};
+type SettingsColorKey = keyof typeof settingsColors;
+/**
+ * Color mapping for each tool type.
+ * Used for card accents, toggle states, and icons.
+ */
+declare const toolColors: Record<string, string>;
+/**
+ * Get the color for a specific tool.
+ *
+ * @param toolId - Tool identifier
+ * @returns Color string for the tool
+ */
+declare const getToolColor: (toolId: string) => string;
+/**
+ * Display labels for each tool.
+ * These are shown in the settings card headers.
+ */
+declare const toolLabels: Record<string, string>;
+/**
+ * Get the display label for a tool.
+ *
+ * @param toolId - Tool identifier
+ * @param availableApps - Optional list of available apps to check for custom names
+ * @returns Display label for the tool
+ */
+declare const getToolLabel: (toolId: string, availableApps?: {
+    id: string;
+    name?: string;
+}[]) => string;
+/**
+ * Descriptions for each tool.
+ * These are shown in the settings card subtitles.
+ */
+declare const toolDescriptions: Record<string, string>;
+/**
+ * Get the description for a tool.
+ *
+ * @param toolId - Tool identifier
+ * @param availableApps - Optional list of available apps to check for custom descriptions
+ * @returns Description for the tool
+ */
+declare const getToolDescription: (toolId: string, availableApps?: {
+    id: string;
+    description?: string;
+}[]) => string;
+/**
+ * Styling configuration for settings UI elements.
+ * All numeric values that affect appearance.
+ */
+declare const settingsStyles: {
+    readonly card: {
+        readonly borderRadius: 999;
+        readonly paddingVertical: 10;
+        readonly paddingHorizontal: 14;
+        readonly marginBottom: 10;
+        readonly borderWidth: 1;
+    };
+    readonly cardInner: {
+        readonly gap: 10;
+    };
+    readonly iconContainer: {
+        readonly width: 28;
+        readonly height: 28;
+    };
+    readonly toolName: {
+        readonly fontSize: 13;
+        readonly fontWeight: "800";
+    };
+    readonly toolDescription: {
+        readonly fontSize: 11;
+    };
+    readonly toggle: {
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 6;
+        readonly borderRadius: 999;
+        readonly borderWidth: 1;
+        readonly fontSize: 11;
+        readonly fontWeight: "700";
+    };
+    readonly tab: {
+        readonly paddingHorizontal: 8;
+        readonly paddingVertical: 5;
+        readonly borderRadius: 4;
+        readonly fontSize: 12;
+        readonly fontWeight: "600";
+        readonly letterSpacing: 0.5;
+    };
+    readonly sectionHeader: {
+        readonly marginBottom: 12;
+        readonly paddingHorizontal: 4;
+    };
+    readonly sectionTitle: {
+        readonly fontSize: 10;
+        readonly fontWeight: "700";
+        readonly letterSpacing: 1;
+        readonly textTransform: "uppercase";
+    };
+    readonly scrollContent: {
+        readonly paddingTop: 16;
+        readonly paddingBottom: 24;
+    };
+    readonly section: {
+        readonly marginHorizontal: 16;
+        readonly marginBottom: 24;
+    };
+};
+interface GlobalSettingConfig {
+    key: keyof GlobalDevToolsSettings;
+    label: string;
+    category: string;
+    shortDescription: string;
+    fullDescription: string;
+    recommendation: string;
+}
+/**
+ * Configuration for global settings cards.
+ */
+declare const globalSettingsConfig: GlobalSettingConfig[];
+/**
+ * Global settings that apply to all dev tools.
+ * These settings override individual tool configurations.
+ */
+interface GlobalDevToolsSettings {
+    /**
+     * When true, all modals share the same dimensions/position.
+     * When false (default), each modal has its own independent persistence.
+     * Priority: Settings UI > Prop override > Default (false)
+     */
+    enableSharedModalDimensions?: boolean;
+}
+/**
+ * Serialized preferences that power the floating dev tools UI.
+ * Values persist across sessions via storage so teams can tailor
+ * which tools appear in the dial or floating row.
+ */
+interface DevToolsSettings {
+    /** Map of dial tool ids to enabled state (max slots enforced elsewhere). */
+    dialTools: Record<string, boolean>;
+    /** Map of floating tool ids to enabled state plus the environment indicator toggle. */
+    floatingTools: Record<string, boolean> & {
+        environment: boolean;
+    };
+    /** Global settings that apply to all dev tools */
+    globalSettings?: GlobalDevToolsSettings;
+}
+/**
+ * Configuration for an available tool/app.
+ * Note: name and description are optional - if not provided,
+ * getToolLabel() and getToolDescription() will use shared defaults.
+ */
+interface AvailableToolConfig {
+    id: string;
+    name?: string;
+    description?: string;
+    slot?: 'dial' | 'row' | 'both';
+}
+/**
+ * Tool metadata for display in settings.
+ */
+interface ToolMetadata {
+    id: string;
+    name: string;
+    description?: string;
+    category?: string;
+    color?: string;
+}
+/**
+ * Enforces the dial slot limit by enabling only the first N tools.
+ * Tools are processed in order, so tools appearing first in the Record
+ * have priority when the limit is reached.
+ *
+ * @param dialTools - Map of tool ids to enabled state
+ * @param maxSlots - Maximum number of enabled tools (default: MAX_SETTINGS_DIAL_SLOTS)
+ * @returns New record with limit enforced
+ */
+declare const enforceDialLimit: (dialTools: Record<string, boolean>, maxSlots?: number) => Record<string, boolean>;
+/**
+ * Sanitizes floating tools settings by removing unknown keys and ensuring
+ * the environment field is always present.
+ *
+ * @param floating - Floating tools settings object
+ * @param allowedKeys - Optional list of allowed tool keys (environment is always allowed)
+ * @returns Sanitized floating tools settings
+ */
+declare const sanitizeFloatingSettings: (floating: DevToolsSettings["floatingTools"], allowedKeys?: string[]) => DevToolsSettings["floatingTools"];
+/**
+ * Options for merging settings with defaults.
+ */
+interface MergeSettingsOptions {
+    allowedDialKeys?: string[];
+    allowedFloatingKeys?: string[];
+}
+/**
+ * Merges stored settings with defaults, ensuring all required fields exist
+ * and limits are enforced.
+ *
+ * @param defaults - Default settings to use as base
+ * @param stored - Stored settings to merge (optional)
+ * @param options - Optional filtering options
+ * @returns Merged settings with all fields and limits enforced
+ */
+declare const mergeSettingsWithDefaults: (defaults: DevToolsSettings, stored?: Partial<DevToolsSettings> | null, options?: MergeSettingsOptions) => DevToolsSettings;
+/**
+ * Generates default settings based on available tools and optional team defaults.
+ *
+ * @param availableTools - List of available tools from auto-discovery
+ * @param defaultFloatingTools - Optional array of tool IDs to enable by default in floating bubble
+ * @param defaultDialTools - Optional array of tool IDs to enable by default in dial menu
+ * @returns Default settings with specified tools enabled
+ */
+declare const generateDefaultSettings: (availableTools?: AvailableToolConfig[], defaultFloatingTools?: string[], defaultDialTools?: string[]) => DevToolsSettings;
+/**
+ * Counts the number of enabled tools in a settings record.
+ *
+ * @param tools - Record of tool ids to enabled state
+ * @returns Count of enabled tools
+ */
+declare const countEnabledTools: (tools: Record<string, boolean>) => number;
+/**
+ * Checks if a dial tool can be enabled (respects slot limit).
+ *
+ * @param dialTools - Current dial tools settings
+ * @param toolId - ID of the tool to check
+ * @param maxSlots - Maximum number of slots (default: MAX_SETTINGS_DIAL_SLOTS)
+ * @returns true if the tool can be enabled
+ */
+declare const canEnableDialTool: (dialTools: Record<string, boolean>, toolId: string, maxSlots?: number) => boolean;
+/**
+ * Extracts enabled tool IDs from a settings record.
+ *
+ * @param settings - DevTools settings
+ * @returns Object with arrays of enabled floating and dial tool IDs
+ */
+declare const getEnabledToolIds: (settings: DevToolsSettings) => {
+    floating: string[];
+    dial: string[];
+};
+type SettingsListener<T> = (payload: T) => void;
+/**
+ * Generic event bus for broadcasting settings changes.
+ * Platform-agnostic implementation for synchronizing settings
+ * across components.
+ */
+declare class SettingsEventBus<T = DevToolsSettings> {
+    private listeners;
+    /**
+     * Emit a settings change to all listeners.
+     *
+     * @param payload - The new settings value
+     */
+    emit(payload: T): void;
+    /**
+     * Add a listener for settings changes.
+     *
+     * @param listener - Callback function to invoke on changes
+     * @returns Unsubscribe function
+     */
+    addListener(listener: SettingsListener<T>): () => void;
+    /**
+     * Remove all listeners.
+     */
+    clear(): void;
+    /**
+     * Get the number of active listeners.
+     */
+    get listenerCount(): number;
+}
+/**
+ * Default settings event bus instance.
+ * Use this for broadcasting settings changes across the app.
+ */
+declare const settingsEventBus: SettingsEventBus<DevToolsSettings>;
+
+/**
+ * DevToolsState - Pure state management for floating dev tools.
+ *
+ * Platform-agnostic state machine for managing:
+ * - Dial menu open/closed state
+ * - Settings modal open/closed state
+ * - Active settings tab
+ *
+ * This is a headless state manager with no React or platform dependencies.
+ * Use with useSyncExternalStore or similar subscription patterns.
+ */
+
+/**
+ * Complete state of the floating dev tools system.
+ */
+interface DevToolsState {
+    /** Whether the dial menu is open */
+    isDialOpen: boolean;
+    /** Whether the settings modal is open */
+    isSettingsOpen: boolean;
+    /** Currently active settings tab */
+    activeSettingsTab: SettingsTabKey;
+    /** Whether state has been initialized (e.g., loaded from storage) */
+    isInitialized: boolean;
+}
+/**
+ * Actions that can be dispatched to modify state.
+ */
+type DevToolsAction = {
+    type: 'OPEN_DIAL';
+} | {
+    type: 'CLOSE_DIAL';
+} | {
+    type: 'TOGGLE_DIAL';
+} | {
+    type: 'OPEN_SETTINGS';
+} | {
+    type: 'CLOSE_SETTINGS';
+} | {
+    type: 'SET_SETTINGS_TAB';
+    tab: SettingsTabKey;
+} | {
+    type: 'INITIALIZE';
+};
+/**
+ * Pure reducer function for DevTools state.
+ * Can be used standalone or with any state management library.
+ */
+declare function devToolsReducer(state: DevToolsState, action: DevToolsAction): DevToolsState;
+type Listener = () => void;
+/**
+ * DevToolsStateManager - Subscribable state container.
+ *
+ * Follows the external store pattern for compatibility with
+ * React's useSyncExternalStore and similar patterns.
+ *
+ * @example
+ * ```ts
+ * const manager = new DevToolsStateManager();
+ *
+ * // Subscribe to changes
+ * const unsubscribe = manager.subscribe(() => {
+ *   console.log('State changed:', manager.getState());
+ * });
+ *
+ * // Dispatch actions
+ * manager.openDial();
+ * manager.openSettings();
+ *
+ * // Clean up
+ * unsubscribe();
+ * ```
+ */
+declare class DevToolsStateManager {
+    private state;
+    private listeners;
+    constructor(initialStateOverride?: Partial<DevToolsState>);
+    /**
+     * Get the current state snapshot.
+     * Safe to call at any time.
+     */
+    getState: () => DevToolsState;
+    /**
+     * Get server snapshot for SSR.
+     * Returns initial state for hydration consistency.
+     */
+    getServerState: () => DevToolsState;
+    /**
+     * Check if dial menu is open.
+     */
+    isDialOpen(): boolean;
+    /**
+     * Check if settings modal is open.
+     */
+    isSettingsOpen(): boolean;
+    /**
+     * Check if state has been initialized.
+     */
+    isInitialized(): boolean;
+    /**
+     * Get active settings tab.
+     */
+    getActiveSettingsTab(): SettingsTabKey;
+    /**
+     * Dispatch an action to update state.
+     */
+    dispatch(action: DevToolsAction): void;
+    /**
+     * Open the dial menu.
+     */
+    openDial(): void;
+    /**
+     * Close the dial menu.
+     */
+    closeDial(): void;
+    /**
+     * Toggle the dial menu open/closed.
+     */
+    toggleDial(): void;
+    /**
+     * Open the settings modal.
+     * Also closes the dial menu if open.
+     */
+    openSettings(): void;
+    /**
+     * Close the settings modal.
+     */
+    closeSettings(): void;
+    /**
+     * Set the active settings tab.
+     */
+    setSettingsTab(tab: SettingsTabKey): void;
+    /**
+     * Mark state as initialized.
+     * Call after loading persisted state.
+     */
+    initialize(): void;
+    /**
+     * Subscribe to state changes.
+     * Returns an unsubscribe function.
+     *
+     * Compatible with React's useSyncExternalStore.
+     */
+    subscribe: (listener: Listener) => (() => void);
+    /**
+     * Notify all listeners of state change.
+     */
+    private notifyListeners;
+    /**
+     * Get the number of active listeners.
+     * Useful for debugging.
+     */
+    get listenerCount(): number;
+    /**
+     * Reset state to initial values.
+     * Useful for testing.
+     */
+    reset(): void;
+}
+/**
+ * Default global DevToolsStateManager instance.
+ * Use this for app-wide state management.
+ *
+ * For isolated testing or multiple instances,
+ * create a new DevToolsStateManager instead.
+ */
+declare const devToolsStateManager: DevToolsStateManager;
+
+/**
+ * Shared utility functions for floating tools.
+ * Platform-agnostic - no React or DOM dependencies.
+ */
+type UserRole = 'admin' | 'internal' | 'user';
+interface UserStatusConfig {
+    label: string;
+    dotColor: string;
+    textColor: string;
+}
+/**
+ * Get display configuration for a user role.
+ * Used by both web and mobile renderers.
+ */
+declare function getUserStatusConfig(userRole: UserRole, colors: {
+    success: string;
+    optional: string;
+    muted: string;
+    secondary: string;
+}): UserStatusConfig;
+interface GripIconLayout {
+    dotSize: number;
+    columnGap: number;
+    rowGap: number;
+}
+/**
+ * Calculate grip icon layout dimensions based on size.
+ * Creates a 2x3 dot grid pattern.
+ */
+declare function getGripIconLayout(size: number): GripIconLayout;
+/**
+ * Filter valid React children (removes null, undefined, false).
+ * Works with both web and React Native.
+ */
+declare function filterValidChildren<T>(children: T[]): T[];
+
+/**
+ * Animation easing functions.
+ * Platform-agnostic - used by both web (RAF) and mobile (Animated).
+ */
+/**
+ * Easing functions for animations.
+ * All functions take progress (0-1) and return eased value (0-1).
+ */
+declare const easing: {
+    /**
+     * Linear - no easing.
+     */
+    readonly linear: (t: number) => number;
+    /**
+     * Ease out cubic - decelerates towards end.
+     * Used for hide/show animations.
+     */
+    readonly easeOutCubic: (t: number) => number;
+    /**
+     * Ease in cubic - accelerates from start.
+     */
+    readonly easeInCubic: (t: number) => number;
+    /**
+     * Ease in-out cubic - smooth acceleration and deceleration.
+     */
+    readonly easeInOutCubic: (t: number) => number;
+    /**
+     * Ease out quad - lighter deceleration than cubic.
+     */
+    readonly easeOutQuad: (t: number) => number;
+    /**
+     * Ease out expo - strong deceleration (snappy feel).
+     */
+    readonly easeOutExpo: (t: number) => number;
+};
+type EasingFunction = (t: number) => number;
+type EasingName = keyof typeof easing;
+/**
+ * Get an easing function by name.
+ */
+declare function getEasing(name: EasingName): EasingFunction;
+/**
+ * Interpolate between two values using an easing function.
+ */
+declare function interpolate(from: number, to: number, progress: number, easingFn?: EasingFunction): number;
+/**
+ * Interpolate a position (x, y) using an easing function.
+ */
+declare function interpolatePosition(from: {
+    x: number;
+    y: number;
+}, to: {
+    x: number;
+    y: number;
+}, progress: number, easingFn?: EasingFunction): {
+    x: number;
+    y: number;
+};
+
+/**
+ * Shared color palette for floating tools.
+ * Matches the gameUIColors from @buoy-gg/shared-ui.
+ *
+ * These are duplicated here to avoid requiring @buoy-gg/shared-ui
+ * as a dependency (which has React Native dependencies).
+ *
+ * TODO: Consider extracting colors to a truly platform-agnostic package
+ * that both shared-ui and floating-tools-core can depend on.
+ */
+/**
+ * Buoy brand colors - EXACT values from web docs site dark theme
+ */
+declare const floatingToolsColors: {
+    /** Dark panel background */
+    readonly panel: "#1A1A1A";
+    /** Muted gray for secondary elements */
+    readonly muted: "#888888";
+    /** Primary text color */
+    readonly secondary: "#E0E0E0";
+    /** Info/active state color (Buoy teal) */
+    readonly info: "#20C997";
+    /** Success/admin color (Buoy teal) */
+    readonly success: "#20C997";
+    /** Warning/optional color (Buoy orange) */
+    readonly optional: "#FFA94D";
+    /** Error color (Buoy red) */
+    readonly error: "#EF4444";
+    /** Primary accent color (Buoy teal) */
+    readonly primary: "#20C997";
+    /** Color used when dragging the floating tools (Buoy teal) */
+    readonly dragActive: "#20C997";
+};
+type FloatingToolsColorKey = keyof typeof floatingToolsColors;
+/**
+ * Get a color with optional alpha.
+ * @param color - The base color (hex)
+ * @param alpha - Alpha value as hex string (00-FF) or number (0-1)
+ */
+declare function withAlpha(color: string, alpha: string | number): string;
+
+/**
+ * Dial Menu - Shared layout calculations, colors, and styling.
+ *
+ * Pure configuration and math functions for the dial menu.
+ * No React or platform-specific code.
+ */
+/** Maximum number of slots in the dial */
+declare const MAX_DIAL_SLOTS = 6;
+/** Starting angle for first icon (top of circle, -90 degrees in radians) */
+declare const DIAL_START_ANGLE: number;
+/** Default button size in the center */
+declare const DIAL_BUTTON_SIZE = 80;
+/** Default icon view size */
+declare const DIAL_ICON_SIZE = 60;
+/** Padding from edge of circle to icons */
+declare const DIAL_ICON_PADDING = 20;
+/** Number of grid lines in the dial */
+declare const DIAL_GRID_LINE_COUNT = 6;
+/**
+ * Color palette for the dial menu.
+ * Derived from floatingToolsColors for consistency.
+ *
+ * Property names match existing mobile implementation for compatibility.
+ */
+declare const dialColors: {
+    /** Background color for the dial circle */
+    readonly dialBackground: "#000000";
+    /** Gradient layer colors (with alpha) */
+    readonly dialGradient1: string;
+    readonly dialGradient2: string;
+    readonly dialGradient3: string;
+    /** Border color for dial and buttons */
+    readonly dialBorder: string;
+    /** Shadow/glow color */
+    readonly dialShadow: "#20C997";
+    /** Grid line color */
+    readonly dialGridLine: string;
+    /** Backdrop overlay color */
+    readonly dialBackdrop: "rgba(0, 0, 0, 0.85)";
+    /** Center button text color */
+    readonly centerText: "#E0E0E0";
+    /** Center button text glow */
+    readonly centerTextGlow: "#20C997";
+    /** Icon label color */
+    readonly iconLabel: "#E0E0E0";
+    /** Empty slot dot background */
+    readonly emptyDotBackground: string;
+    /** Empty slot dot border */
+    readonly emptyDotBorder: string;
+};
+type DialColorKey = keyof typeof dialColors;
+/**
+ * Styling configuration for the dial menu.
+ * All numeric values that affect appearance.
+ */
+declare const dialStyles: {
+    readonly backdrop: {
+        readonly opacity: 0.85;
+    };
+    readonly circle: {
+        readonly borderWidth: 1;
+        readonly shadowOpacity: 0.5;
+        readonly shadowRadius: 20;
+    };
+    readonly gradientLayers: readonly [{
+        readonly opacity: 0.6;
+        readonly offsetPercent: 0;
+    }, {
+        readonly opacity: 0.4;
+        readonly offsetPercent: 30;
+    }, {
+        readonly opacity: 0.3;
+        readonly offsetPercent: 50;
+    }];
+    readonly grid: {
+        readonly lineCount: 6;
+        readonly lineHeight: 1;
+        /** Rotation angles in degrees for each line */
+        readonly getLineRotations: () => number[];
+    };
+    readonly centerButton: {
+        /** Button container is this multiple of button size */
+        readonly containerRatio: 1.5;
+        /** Button border wrapper is this multiple of button size */
+        readonly borderRatio: 1.2;
+        /** Border radius ratio */
+        readonly borderRadiusRatio: 0.6;
+        readonly borderWidth: 2;
+        readonly text: {
+            readonly fontSize: 10;
+            readonly fontWeight: "900";
+            readonly letterSpacing: 1;
+            readonly fontFamily: "monospace";
+        };
+        readonly proText: {
+            readonly fontSize: 8;
+            readonly letterSpacing: 2;
+        };
+    };
+    readonly icon: {
+        /** Background gradient size as percent of icon size */
+        readonly gradientBgSizePercent: 85;
+        readonly gradientBgBorderRadius: 12;
+        readonly gradientBgOpacity: 0.3;
+        /** Inner glow size as percent of icon size */
+        readonly innerGlowSizePercent: 70;
+        readonly innerGlowBorderRadius: 10;
+        readonly innerGlowOpacity: 0.5;
+        readonly label: {
+            readonly fontSize: 8;
+            readonly fontWeight: "900";
+            readonly letterSpacing: 0.3;
+            readonly fontFamily: "monospace";
+            readonly marginTop: 2;
+        };
+        /** Icon wrapper margin bottom */
+        readonly wrapperMarginBottom: 4;
+    };
+    readonly emptySlot: {
+        readonly dotSize: 12;
+        readonly borderWidth: 1;
+    };
+};
+/**
+ * Get rotation angles for grid lines.
+ * @param count - Number of grid lines (default: 6)
+ * @returns Array of rotation angles in degrees
+ */
+declare function getGridLineRotations(count?: number): number[];
+interface DialLayoutConfig {
+    /** Screen width for responsive sizing */
+    screenWidth: number;
+    /** Maximum circle size (default: 320) */
+    maxCircleSize?: number;
+    /** Circle size as percentage of screen width (default: 0.75) */
+    circleSizeRatio?: number;
+    /** Size of each icon slot (default: 60) */
+    iconSize?: number;
+    /** Padding from circle edge to icons (default: 20) */
+    iconPadding?: number;
+}
+interface DialLayout {
+    /** Calculated circle diameter */
+    circleSize: number;
+    /** Circle radius */
+    circleRadius: number;
+    /** Radius at which icons are positioned */
+    iconRadius: number;
+    /** Size of each icon slot */
+    iconSize: number;
+    /** Center button size */
+    buttonSize: number;
+}
+/**
+ * Calculate dial layout dimensions based on screen size.
+ */
+declare function getDialLayout(config: DialLayoutConfig): DialLayout;
+interface IconPosition {
+    /** X offset from center */
+    x: number;
+    /** Y offset from center */
+    y: number;
+    /** Angle in radians */
+    angle: number;
+}
+/**
+ * Get the angle for an icon at a given index.
+ *
+ * @param index - Icon index (0-based)
+ * @param totalIcons - Total number of icon slots
+ * @param startAngle - Starting angle in radians (default: top of circle)
+ */
+declare function getIconAngle(index: number, totalIcons: number, startAngle?: number): number;
+/**
+ * Get the position for an icon at a given index.
+ *
+ * @param index - Icon index (0-based)
+ * @param totalIcons - Total number of icon slots
+ * @param radius - Distance from center to icon
+ * @param startAngle - Starting angle in radians (default: top of circle)
+ */
+declare function getIconPosition(index: number, totalIcons: number, radius: number, startAngle?: number): IconPosition;
+/**
+ * Get positions for all icons in the dial.
+ *
+ * @param totalIcons - Total number of icon slots
+ * @param radius - Distance from center to icons
+ * @param startAngle - Starting angle in radians (default: top of circle)
+ */
+declare function getAllIconPositions(totalIcons: number, radius: number, startAngle?: number): IconPosition[];
+/**
+ * Get the interpolation input range for staggered icon animation.
+ * Used to create smooth entrance animations with stagger.
+ *
+ * @param index - Icon index (0-based)
+ * @param totalIcons - Total number of icons
+ * @param staggerRatio - Delay ratio per icon (default: 0.1)
+ */
+declare function getIconStaggerInputRange(index: number, totalIcons: number, staggerRatio?: number): [number, number, number, number];
+/**
+ * Easing function names used in animations.
+ */
+type DialEasingName = 'linear' | 'easeOutCubic' | 'easeInCubic' | 'easeInOutCubic';
+/**
+ * Spring animation configuration.
+ */
+interface SpringConfig {
+    type: 'spring';
+    damping: number;
+    stiffness: number;
+    mass?: number;
+}
+/**
+ * Comprehensive animation configuration for the dial menu.
+ * All timing, easing, and effect parameters in one place.
+ */
+declare const dialAnimationConfig: {
+    /** Entrance animation sequence */
+    readonly entrance: {
+        /** Backdrop fade in */
+        readonly backdrop: {
+            readonly duration: 400;
+            readonly easing: DialEasingName;
+        };
+        /** Dial circle animations */
+        readonly dial: {
+            /** Spring scale from 0 to 1 */
+            readonly scale: {
+                readonly type: "spring";
+                readonly damping: 15;
+                readonly stiffness: 150;
+                readonly mass: 1;
+            };
+            /** 360 degree rotation on entrance */
+            readonly rotation: {
+                readonly duration: 800;
+                readonly degrees: 360;
+                readonly easing: DialEasingName;
+            };
+        };
+        /** Center button spring scale with delay */
+        readonly centerButton: {
+            readonly delay: 300;
+            readonly type: "spring";
+            readonly damping: 10;
+            readonly stiffness: 200;
+        };
+        /** Icons stagger entrance */
+        readonly icons: {
+            readonly delay: 500;
+            readonly duration: 600;
+            readonly easing: DialEasingName;
+        };
+        /** Circuit traces fade in */
+        readonly circuitTraces: {
+            readonly delay: 600;
+            readonly duration: 1000;
+        };
+    };
+    /** Exit animation sequence */
+    readonly exit: {
+        /** Icons collapse back to center */
+        readonly icons: {
+            readonly duration: 300;
+            readonly easing: DialEasingName;
+        };
+        /** Center button scale down */
+        readonly centerButton: {
+            readonly duration: 200;
+            readonly easing: DialEasingName;
+        };
+        /** Dial scale down */
+        readonly dialScale: {
+            readonly duration: 250;
+            readonly easing: DialEasingName;
+        };
+        /** Backdrop fade out */
+        readonly backdrop: {
+            readonly duration: 200;
+        };
+    };
+    /** Continuous looping effects */
+    readonly continuous: {
+        /** Glitch effect - horizontal jitter */
+        readonly glitch: {
+            readonly interval: 3000;
+            readonly offset: 2;
+            readonly stepDuration: 50;
+        };
+        /** Pulse effect - subtle scale oscillation */
+        readonly pulse: {
+            readonly minScale: 0.98;
+            readonly maxScale: 1.02;
+            readonly duration: 1000;
+            readonly easing: DialEasingName;
+        };
+        /** Floating effect - vertical bobbing */
+        readonly floating: {
+            readonly minY: 0;
+            readonly maxY: -8;
+            readonly duration: 3000;
+            readonly easing: DialEasingName;
+        };
+        /** Breathing effect - scale on center button */
+        readonly breathing: {
+            readonly minScale: 0.98;
+            readonly maxScale: 1.05;
+            readonly duration: 2500;
+            readonly easing: DialEasingName;
+        };
+    };
+    /** Icon-specific animations */
+    readonly icons: {
+        /** Stagger ratio for entrance (0-1 per icon) */
+        readonly staggerRatio: 0.1;
+        /** Spiral effect parameters */
+        readonly spiral: {
+            /** Start rotation in radians (2π = full rotation) */
+            readonly startRotation: number;
+            /** End rotation in radians */
+            readonly endRotation: 0;
+        };
+        /** Opacity interpolation during entrance */
+        readonly opacity: {
+            readonly inputRange: readonly [number, number, number];
+            readonly outputRange: readonly [number, number, number];
+        };
+        /** Press in animation */
+        readonly pressIn: {
+            readonly scale: 0.95;
+            readonly type: "spring";
+            readonly damping: 15;
+            readonly stiffness: 400;
+        };
+        /** Press out animation */
+        readonly pressOut: {
+            readonly scale: 1;
+            readonly type: "spring";
+            readonly damping: 15;
+            readonly stiffness: 400;
+        };
+    };
+    /** User interaction animations */
+    readonly interaction: {
+        /** Icon selection pulse effect */
+        readonly iconSelect: {
+            readonly pulse: readonly [{
+                readonly scale: 0.9;
+                readonly damping: 15;
+                readonly stiffness: 500;
+            }, {
+                readonly scale: 1;
+                readonly damping: 10;
+                readonly stiffness: 200;
+            }];
+            readonly actionDelay: 50;
+        };
+        /** Center button hover effect */
+        readonly centerHover: {
+            readonly scale: 1.05;
+            readonly duration: 150;
+        };
+    };
+};
+type DialAnimationConfigType = typeof dialAnimationConfig;
+/**
+ * CSS cubic-bezier approximations for React Native springs.
+ * These provide similar visual feel in CSS transitions/animations.
+ */
+declare const dialCSSBeziers: {
+    /** Spring: damping 15, stiffness 150 (dial scale) */
+    readonly dialScale: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    /** Spring: damping 10, stiffness 200 (center button) */
+    readonly centerButton: "cubic-bezier(0.25, 1.7, 0.55, 1)";
+    /** Spring: damping 15, stiffness 400 (icon press) */
+    readonly iconPress: "cubic-bezier(0.22, 1.2, 0.36, 1)";
+    /** Spring: damping 15, stiffness 500 (icon select pulse) */
+    readonly iconSelectPulse: "cubic-bezier(0.18, 1.15, 0.32, 1)";
+    /** Decelerate - for entrance animations */
+    readonly easeOutCubic: "cubic-bezier(0.33, 1, 0.68, 1)";
+    /** Accelerate - for exit animations */
+    readonly easeInCubic: "cubic-bezier(0.32, 0, 0.67, 0)";
+    /** Smooth in-out - for continuous effects */
+    readonly easeInOutCubic: "cubic-bezier(0.65, 0, 0.35, 1)";
+    /** Linear */
+    readonly linear: "linear";
+};
+type DialCSSBezierKey = keyof typeof dialCSSBeziers;
+/**
+ * Generate CSS @keyframes definitions for dial animations.
+ * Can be injected into a <style> tag or used with CSS-in-JS.
+ */
+declare function generateDialCSSKeyframes(): Record<string, string>;
+/**
+ * Get CSS animation shorthand values for continuous effects.
+ * Use these in the `animation` CSS property.
+ */
+declare function getDialCSSAnimationStyles(): Record<string, string>;
+/**
+ * Get all keyframes as a single CSS string for injection.
+ */
+declare function getDialCSSKeyframesString(): string;
+/**
+ * Position and visual state during spiral animation.
+ */
+interface SpiralPosition {
+    /** X offset from center */
+    x: number;
+    /** Y offset from center */
+    y: number;
+    /** Current rotation in radians */
+    rotation: number;
+    /** Scale factor (0 to 1) */
+    scale: number;
+    /** Opacity (0 to 1) */
+    opacity: number;
+}
+/**
+ * Calculate icon position during spiral entrance animation.
+ *
+ * @param progress - Animation progress (0 = start at center, 1 = final position)
+ * @param index - Icon index (0-based)
+ * @param totalIcons - Total number of icons
+ * @param radius - Final radius from center
+ * @param startAngle - Starting angle for icon layout (default: top of circle)
+ */
+declare function getSpiralAnimationPosition(progress: number, index: number, totalIcons: number, radius: number, startAngle?: number): SpiralPosition;
+/**
+ * Calculate staggered progress for an icon based on master progress.
+ * Applies the stagger delay so icons animate in sequence.
+ *
+ * @param masterProgress - Overall animation progress (0-1)
+ * @param index - Icon index (0-based)
+ * @param totalIcons - Total number of icons
+ */
+declare function getStaggeredIconProgress(masterProgress: number, index: number, totalIcons: number): number;
+
+interface CircleElement$1 {
+    type: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: 'color' | 'bg' | string;
+    border?: boolean;
+    borderWidth?: number;
+    opacity?: number;
+    scaleX?: number;
+    scaleY?: number;
+    glow?: boolean;
+    glowRadius?: number;
+    rotation?: number;
+}
+interface RectElement$1 {
+    type: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill?: 'color' | 'bg' | string;
+    border?: boolean;
+    borderWidth?: number;
+    borderRadius?: number;
+    opacity?: number;
+    glow?: boolean;
+    glowRadius?: number;
+    rotation?: number;
+    rotateFromCenter?: boolean;
+}
+/**
+ * Line element - draws a line between two points
+ * Much cleaner than using rotated rectangles!
+ */
+interface LineElement$1 {
+    type: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke?: 'color' | 'bg' | string;
+    strokeWidth?: number;
+    opacity?: number;
+    glow?: boolean;
+    glowRadius?: number;
+    rotation?: number;
+}
+/**
+ * Triangle element - creates arrows/chevrons using CSS border trick
+ * Works in pure React Native!
+ */
+interface TriangleElement$1 {
+    type: 'triangle';
+    x: number;
+    y: number;
+    size: number;
+    direction: 'up' | 'down' | 'left' | 'right';
+    fill?: 'color' | 'bg' | string;
+    opacity?: number;
+    rotation?: number;
+}
+/**
+ * Arc element - creates curved segments (WiFi bars, circular progress)
+ * Rendered as multiple line segments approximating a curve.
+ */
+interface ArcElement {
+    type: 'arc';
+    cx: number;
+    cy: number;
+    r: number;
+    startAngle: number;
+    endAngle: number;
+    stroke?: 'color' | 'bg' | string;
+    strokeWidth?: number;
+    opacity?: number;
+    segments?: number;
+}
+/**
+ * Semicircle element - creates a half circle (filled)
+ * Perfect for pokeball-style split designs!
+ */
+interface SemicircleElement {
+    type: 'semicircle';
+    cx: number;
+    cy: number;
+    r: number;
+    half: 'top' | 'bottom' | 'left' | 'right';
+    fill?: 'color' | 'bg' | string;
+    border?: boolean;
+    borderWidth?: number;
+    opacity?: number;
+    glow?: boolean;
+    glowRadius?: number;
+}
+/**
+ * SmoothArc element - creates a smooth arc using the border trick
+ * Uses bordered circles with partial borders hidden - gives perfect anti-aliased curves!
+ * This is the "clever trick" for WiFi-style arcs.
+ */
+interface SmoothArcElement {
+    type: 'smootharc';
+    cx: number;
+    cy: number;
+    r: number;
+    stroke?: 'color' | 'bg' | string;
+    strokeWidth?: number;
+    opacity?: number;
+    /** Which portion to show: 'bottom' shows bottom half (like WiFi), 'top' shows top half */
+    portion?: 'bottom' | 'top' | 'left' | 'right';
+}
+type IconElement = CircleElement$1 | RectElement$1 | LineElement$1 | TriangleElement$1 | ArcElement | SemicircleElement | SmoothArcElement;
+interface IconData {
+    color: string;
+    bgColor: string;
+    elements: IconElement[];
+}
+declare function renderIconData(data: IconData, size: number, colorOverride?: string): react_jsx_runtime.JSX.Element;
+declare function createIcon(data: IconData): FC<{
+    size?: number;
+    color?: string;
+}>;
+
+/**
+ * Icon Data Definitions - PURE DATA, NO JSX
+ *
+ * Each icon is just data. The renderer transforms it to components.
+ * Change colors here = changes everywhere.
+ *
+ * Coordinates are relative to center (0,0 = center of icon)
+ * Sizes are based on 24x24 base size, scaled automatically.
+ */
+
+declare const NETWORK_ICON_COLOR = "#00D4FF";
+declare const ENV_ICON_COLOR = "#4AFF9F";
+declare const STORAGE_ICON_COLOR = "#FFB800";
+declare const ROUTES_ICON_COLOR = "#FF9F1C";
+declare const QUERY_ICON_COLOR = "#FF3366";
+declare const HIGHLIGHTER_ICON_COLOR = "#10B981";
+declare const RENDERS_ICON_COLOR = "#10B981";
+declare const BENCHMARK_ICON_COLOR = "#F59E0B";
+declare const SENTRY_ICON_COLOR = "#FF3366";
+declare const WIFI_ICON_COLOR = "#00D4FF";
+declare const HIGHLIGHT_ICON_COLOR = "#10B981";
+
+declare const NetworkIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const EnvIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const StorageIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const RoutesIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const RoutePinIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const RoutePathIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const RouteDotIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const RouteTwoPinsIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestA: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestB: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestC: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestD: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestE: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestF: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestG: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestH: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestI: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestJ: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestK: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestL: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestM: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestN: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestO: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const CurveTestP: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const QueryIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const HighlighterIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+declare const RendersIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const BenchmarkIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const SentryIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const WifiIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+declare const HighlightIcon: react.FC<{
+    size?: number;
+    color?: string;
+}>;
+
+/**
+ * Icon Factories - Helper functions to create icon elements
+ *
+ * These factories reduce verbosity and provide sensible defaults
+ * for common icon patterns.
+ */
+interface CircleElement {
+    type: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+    fill?: 'color' | 'bg' | string;
+    border?: boolean;
+    borderWidth?: number;
+    opacity?: number;
+    scaleX?: number;
+    scaleY?: number;
+    glow?: boolean;
+    glowRadius?: number;
+}
+interface LineElement {
+    type: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stroke?: 'color' | 'bg' | string;
+    strokeWidth?: number;
+    opacity?: number;
+    glow?: boolean;
+    glowRadius?: number;
+}
+interface RectElement {
+    type: 'rect';
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    fill?: 'color' | 'bg' | string;
+    border?: boolean;
+    borderWidth?: number;
+    borderRadius?: number;
+    opacity?: number;
+    glow?: boolean;
+    glowRadius?: number;
+    rotation?: number;
+    rotateFromCenter?: boolean;
+}
+interface TriangleElement {
+    type: 'triangle';
+    x: number;
+    y: number;
+    size: number;
+    direction: 'up' | 'down' | 'left' | 'right';
+    fill?: 'color' | 'bg' | string;
+    opacity?: number;
+    rotation?: number;
+}
+interface NodeOptions {
+    fill?: 'color' | 'bg' | string;
+    glow?: boolean;
+    glowRadius?: number;
+    opacity?: number;
+    scaleX?: number;
+    scaleY?: number;
+}
+interface LineOptions {
+    stroke?: 'color' | 'bg' | string;
+    strokeWidth?: number;
+    glow?: boolean;
+    glowRadius?: number;
+    opacity?: number;
+}
+interface RingOptions {
+    borderWidth?: number;
+    opacity?: number;
+    scaleX?: number;
+    scaleY?: number;
+}
+/**
+ * Creates a filled circle node (common pattern: glowing center point)
+ *
+ * @example
+ * createNode(0, -4, 3)           // Simple 3px radius node at center-top
+ * createNode(0, 0, 4, { glow: true })  // Glowing center node
+ */
+declare function createNode(cx: number, cy: number, r: number, options?: NodeOptions): CircleElement;
+/**
+ * Creates a line connection between two points
+ *
+ * @example
+ * createLine(0, -4, -6, 4)       // Simple connection line
+ * createLine(0, 0, 5, 5, { opacity: 0.6, strokeWidth: 1.5 })
+ */
+declare function createLine(x1: number, y1: number, x2: number, y2: number, options?: LineOptions): LineElement;
+/**
+ * Creates a ring (circle with border only, no fill)
+ *
+ * @example
+ * createRing(0, 0, 8)            // Simple ring
+ * createRing(0, 0, 6, { borderWidth: 2, opacity: 0.5 })
+ */
+declare function createRing(cx: number, cy: number, r: number, options?: RingOptions): CircleElement;
+/**
+ * Creates a small indicator dot
+ *
+ * @example
+ * createDot(5, 5)                // Default 2px dot
+ * createDot(5, 5, 1.5)           // Custom size
+ */
+declare function createDot(cx: number, cy: number, r?: number): CircleElement;
+/**
+ * Creates a glow effect circle (background element)
+ *
+ * @example
+ * createGlow(0, 0, 6)            // Subtle glow behind other elements
+ */
+declare function createGlow(cx: number, cy: number, r: number, opacity?: number): CircleElement;
+/**
+ * Creates an arrow/chevron triangle
+ *
+ * @example
+ * createArrow(0, 5, 4, 'down')   // Downward arrow
+ * createArrow(3, 0, 3, 'right')  // Right-pointing chevron
+ */
+declare function createArrow(x: number, y: number, size: number, direction: 'up' | 'down' | 'left' | 'right', options?: {
+    fill?: 'color' | 'bg' | string;
+    opacity?: number;
+    rotation?: number;
+}): TriangleElement;
+/**
+ * Creates a rectangle bar (useful for charts, progress indicators)
+ *
+ * @example
+ * createBar(-4, 2, 8, 2)         // Horizontal bar
+ * createBar(0, -3, 2, 6)         // Vertical bar
+ */
+declare function createBar(x: number, y: number, width: number, height: number, options?: {
+    fill?: 'color' | 'bg' | string;
+    opacity?: number;
+    borderRadius?: number;
+}): RectElement;
+
+export { ANIMATION_DURATION, type AvailableToolConfig, BENCHMARK_ICON_COLOR, type BaseToolConfig, BenchmarkIcon, type Bounds, CurveTestA, CurveTestB, CurveTestC, CurveTestD, CurveTestE, CurveTestF, CurveTestG, CurveTestH, CurveTestI, CurveTestJ, CurveTestK, CurveTestL, CurveTestM, CurveTestN, CurveTestO, CurveTestP, DIAL_BUTTON_SIZE, DIAL_GRID_LINE_COUNT, DIAL_ICON_PADDING, DIAL_ICON_SIZE, DIAL_START_ANGLE, DRAG_THRESHOLD, type DevToolsAction, type DevToolsSettings, type DevToolsState, DevToolsStateManager, type DialAnimationConfigType, type DialCSSBezierKey, type DialColorKey, type DialEasingName, type DialLayout, type DialLayoutConfig, type DragEndResult, type DragEventData, EDGE_PADDING, ENV_ICON_COLOR, type EasingFunction, type EasingName, EnvIcon, type Environment, type FloatingToolsColorKey, type FloatingToolsOptions, type FloatingToolsState, FloatingToolsStore, type GlobalDevToolsSettings, type GlobalSettingConfig, type GripIconLayout, HIGHLIGHTER_ICON_COLOR, HIGHLIGHT_ICON_COLOR, HighlightIcon, HighlighterIcon, type IconData, type IconPosition, type LineOptions, MAX_DIAL_SLOTS, MAX_SETTINGS_DIAL_SLOTS, type MergeSettingsOptions, NETWORK_ICON_COLOR, NetworkIcon, type NodeOptions, type Position, QUERY_ICON_COLOR, QueryIcon, RENDERS_ICON_COLOR, ROUTES_ICON_COLOR, RendersIcon, type RingOptions, RouteDotIcon, RoutePathIcon, RoutePinIcon, RouteTwoPinsIcon, RoutesIcon, SAVE_DEBOUNCE_MS, SENTRY_ICON_COLOR, SETTINGS_STORAGE_KEY, STORAGE_ICON_COLOR, STORAGE_KEYS, SentryIcon, type SettingsColorKey, SettingsEventBus, type SettingsTab, type SettingsTabKey, type Size, type SpiralPosition, type SpringConfig, type StorageAdapter, StorageIcon, type ToolMetadata, type ToolSlot, type UserRole, type UserStatusConfig, VISIBLE_HANDLE_WIDTH, WIFI_ICON_COLOR, type WebToolConfig, WifiIcon, canEnableDialTool, countEnabledTools, createArrow, createBar, createDot, createGlow, createIcon, createLine, createNode, createRing, devToolsReducer, devToolsStateManager, dialAnimationConfig, dialCSSBeziers, dialColors, dialStyles, easing, enforceDialLimit, filterValidChildren, floatingToolsColors, generateDefaultSettings, generateDialCSSKeyframes, getAllIconPositions, getDialCSSAnimationStyles, getDialCSSKeyframesString, getDialLayout, getEasing, getEnabledToolIds, getGridLineRotations, getGripIconLayout, getIconAngle, getIconPosition, getIconStaggerInputRange, getSpiralAnimationPosition, getStaggeredIconProgress, getToolColor, getToolDescription, getToolLabel, getUserStatusConfig, globalSettingsConfig, interpolate, interpolatePosition, mergeSettingsWithDefaults, renderIconData, sanitizeFloatingSettings, settingsColors, settingsEventBus, settingsStyles, settingsTabs, toolColors, toolDescriptions, toolLabels, withAlpha };