@buoy-gg/floating-tools-react 1.7.2

package/dist/index.d.mts

@@ -0,0 +1,529 @@
+import { FloatingToolsOptions, FloatingToolsState, FloatingToolsStore, DragEventData, Position, DragEndResult, AvailableToolConfig, StorageAdapter, DevToolsSettings, DevToolsStateManager, DevToolsState, SettingsTabKey, WebToolConfig, Environment, UserRole } from '@buoy-gg/floating-tools-core';
+export { ANIMATION_DURATION, AvailableToolConfig, BaseToolConfig, DIAL_BUTTON_SIZE, DIAL_GRID_LINE_COUNT, DIAL_ICON_PADDING, DIAL_ICON_SIZE, DIAL_START_ANGLE, DRAG_THRESHOLD, DevToolsAction, DevToolsSettings, DevToolsState, DevToolsStateManager, DialAnimationConfigType, DialCSSBezierKey, DialColorKey, DialEasingName, DialLayout, DialLayoutConfig, DragEndResult, DragEventData, EDGE_PADDING, EasingFunction, Environment, FloatingToolsState, FloatingToolsStore, GlobalDevToolsSettings, GlobalSettingConfig, GripIconLayout, IconPosition, MAX_DIAL_SLOTS, MAX_SETTINGS_DIAL_SLOTS, MergeSettingsOptions, Position, SETTINGS_STORAGE_KEY, SettingsColorKey, SettingsEventBus, SettingsTab, SettingsTabKey, Size, SpiralPosition, SpringConfig, StorageAdapter, ToolMetadata, ToolSlot, UserRole, UserStatusConfig, VISIBLE_HANDLE_WIDTH, WebToolConfig, canEnableDialTool, countEnabledTools, devToolsReducer, devToolsStateManager, dialAnimationConfig, dialCSSBeziers, dialColors, dialStyles, easing, enforceDialLimit, floatingToolsColors, generateDefaultSettings, generateDialCSSKeyframes, getAllIconPositions, getDialCSSAnimationStyles, getDialCSSKeyframesString, getDialLayout, getEnabledToolIds, getGridLineRotations, getGripIconLayout, getIconAngle, getIconPosition, getIconStaggerInputRange, getSpiralAnimationPosition, getStaggeredIconProgress, getToolColor, getToolDescription, getToolLabel, getUserStatusConfig, globalSettingsConfig, interpolate, interpolatePosition, mergeSettingsWithDefaults, sanitizeFloatingSettings, settingsColors, settingsEventBus, settingsStyles, settingsTabs, toolColors, toolDescriptions, toolLabels, withAlpha } from '@buoy-gg/floating-tools-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * useFloatingTools - React hook for floating tools state management.
+ * Works with both web and React Native.
+ */
+
+interface UseFloatingToolsOptions extends Omit<FloatingToolsOptions, 'screenWidth' | 'screenHeight'> {
+    /**
+     * Screen dimensions. Required for boundary calculations.
+     * On web: { width: window.innerWidth, height: window.innerHeight }
+     * On RN: Dimensions.get('window')
+     */
+    screenSize: {
+        width: number;
+        height: number;
+    };
+}
+interface UseFloatingToolsReturn {
+    /** Current state (position, isDragging, isHidden, bubbleSize) */
+    state: FloatingToolsState;
+    /** The underlying store instance */
+    store: FloatingToolsStore;
+    /** Whether the store has been initialized (position loaded from storage) */
+    isInitialized: boolean;
+    /** Actions */
+    actions: {
+        /** Start a drag operation */
+        handleDragStart: (event: DragEventData) => void;
+        /** Process drag movement */
+        handleDragMove: (event: DragEventData) => {
+            position: Position;
+            isDragging: boolean;
+        };
+        /** End a drag operation */
+        handleDragEnd: (event: DragEventData) => DragEndResult;
+        /** Toggle between hidden and visible states */
+        toggleHideShow: () => {
+            targetPosition: Position;
+            isHiding: boolean;
+        };
+        /** Commit position after animation completes */
+        commitPosition: (position: Position) => void;
+        /** Update bubble size (call on layout) */
+        setBubbleSize: (size: {
+            width: number;
+            height: number;
+        }) => void;
+        /** Update screen size (call on resize/orientation change) */
+        setScreenSize: (width: number, height: number) => void;
+        /** Update min position (for safe area insets) */
+        setMinPosition: (minPos: Position) => void;
+    };
+}
+/**
+ * React hook for managing floating tools state.
+ *
+ * @example
+ * ```tsx
+ * // Web
+ * const { state, actions } = useFloatingTools({
+ *   screenSize: { width: window.innerWidth, height: window.innerHeight },
+ *   storage: webStorageAdapter,
+ * });
+ *
+ * // React Native
+ * const { state, actions } = useFloatingTools({
+ *   screenSize: Dimensions.get('window'),
+ *   storage: asyncStorageAdapter,
+ * });
+ * ```
+ */
+declare function useFloatingTools(options: UseFloatingToolsOptions): UseFloatingToolsReturn;
+
+interface FloatingToolsContextValue {
+    /** Whether the user is currently dragging */
+    isDragging: boolean;
+    /** Whether the floating tools are hidden */
+    isHidden: boolean;
+}
+declare const FloatingToolsContext: react.Context<FloatingToolsContextValue>;
+/**
+ * Hook to access floating tools context.
+ * Must be used within a FloatingToolsProvider.
+ */
+declare function useFloatingToolsContext(): FloatingToolsContextValue;
+/**
+ * Provider component for floating tools context.
+ */
+interface FloatingToolsProviderProps {
+    value: FloatingToolsContextValue;
+    children: ReactNode;
+}
+declare function FloatingToolsProvider({ value, children, }: FloatingToolsProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useSettings - React hook for managing dev tools settings.
+ *
+ * Provides a complete settings management solution with:
+ * - Loading/persisting settings from storage
+ * - Toggle functions for dial and floating tools
+ * - Automatic enforcement of dial slot limits
+ * - Event bus integration for cross-component sync
+ */
+
+interface UseSettingsOptions {
+    /**
+     * Available tools/apps from auto-discovery or manual configuration.
+     */
+    availableTools?: AvailableToolConfig[];
+    /**
+     * Default tool IDs to enable in the floating bubble.
+     */
+    defaultFloatingTools?: string[];
+    /**
+     * Default tool IDs to enable in the dial menu.
+     */
+    defaultDialTools?: string[];
+    /**
+     * Storage adapter for persisting settings.
+     * Must implement getItem and setItem (sync or async).
+     */
+    storage?: StorageAdapter;
+    /**
+     * Initial settings to use before loading from storage.
+     */
+    initialSettings?: DevToolsSettings;
+    /**
+     * Callback when settings change.
+     */
+    onSettingsChange?: (settings: DevToolsSettings) => void;
+    /**
+     * Whether to subscribe to settings event bus for cross-component updates.
+     * @default true
+     */
+    subscribeToEventBus?: boolean;
+}
+interface UseSettingsReturn {
+    /**
+     * Current settings state.
+     */
+    settings: DevToolsSettings;
+    /**
+     * Whether settings are currently loading from storage.
+     */
+    isLoading: boolean;
+    /**
+     * Whether initial load from storage is complete.
+     */
+    isInitialized: boolean;
+    /**
+     * Error message if loading failed.
+     */
+    error: string | null;
+    /**
+     * Actions for modifying settings.
+     */
+    actions: {
+        /**
+         * Toggle a dial tool on/off.
+         * Respects MAX_SETTINGS_DIAL_SLOTS limit.
+         */
+        toggleDialTool: (toolId: string) => void;
+        /**
+         * Toggle a floating tool on/off.
+         */
+        toggleFloatingTool: (toolId: string) => void;
+        /**
+         * Toggle the environment indicator.
+         */
+        toggleEnvironment: () => void;
+        /**
+         * Toggle a global setting.
+         */
+        toggleGlobalSetting: (setting: keyof NonNullable<DevToolsSettings['globalSettings']>) => void;
+        /**
+         * Save arbitrary settings changes.
+         */
+        saveSettings: (newSettings: DevToolsSettings) => Promise<void>;
+        /**
+         * Reset settings to defaults.
+         */
+        resetToDefaults: () => Promise<void>;
+        /**
+         * Reload settings from storage.
+         */
+        reloadSettings: () => Promise<void>;
+    };
+    /**
+     * Derived state helpers.
+     */
+    helpers: {
+        /**
+         * Number of enabled dial tools.
+         */
+        dialToolCount: number;
+        /**
+         * Whether the dial is at max capacity.
+         */
+        isDialFull: boolean;
+        /**
+         * Array of enabled dial tool IDs.
+         */
+        enabledDialTools: string[];
+        /**
+         * Array of enabled floating tool IDs.
+         */
+        enabledFloatingTools: string[];
+        /**
+         * Check if a specific dial tool can be enabled.
+         */
+        canEnableDialTool: (toolId: string) => boolean;
+    };
+}
+declare function useSettings(options?: UseSettingsOptions): UseSettingsReturn;
+
+interface SettingsContextValue extends UseSettingsReturn {
+    /**
+     * Available tools for configuration.
+     */
+    availableTools: AvailableToolConfig[];
+}
+interface SettingsProviderProps {
+    /**
+     * Child components that will have access to settings.
+     */
+    children: ReactNode;
+    /**
+     * Available tools/apps from auto-discovery or manual configuration.
+     */
+    availableTools?: AvailableToolConfig[];
+    /**
+     * Default tool IDs to enable in the floating bubble.
+     */
+    defaultFloatingTools?: string[];
+    /**
+     * Default tool IDs to enable in the dial menu.
+     */
+    defaultDialTools?: string[];
+    /**
+     * Storage adapter for persisting settings.
+     */
+    storage?: StorageAdapter;
+    /**
+     * Initial settings to use before loading from storage.
+     */
+    initialSettings?: DevToolsSettings;
+    /**
+     * Callback when settings change.
+     */
+    onSettingsChange?: (settings: DevToolsSettings) => void;
+}
+declare const SettingsContext: react.Context<SettingsContextValue | null>;
+declare function SettingsProvider({ children, availableTools, defaultFloatingTools, defaultDialTools, storage, initialSettings, onSettingsChange, }: SettingsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access settings context.
+ * Must be used within a SettingsProvider.
+ *
+ * @throws Error if used outside of SettingsProvider
+ */
+declare function useSettingsContext(): SettingsContextValue;
+/**
+ * Hook to optionally access settings context.
+ * Returns null if used outside of SettingsProvider.
+ *
+ * Useful for components that work both with and without a provider.
+ */
+declare function useOptionalSettingsContext(): SettingsContextValue | null;
+
+/**
+ * useDevToolsState - React hook for DevTools state management.
+ *
+ * Provides a React-friendly interface to the DevToolsStateManager.
+ * Uses useSyncExternalStore for efficient subscription management.
+ */
+
+/**
+ * Actions available for controlling DevTools state.
+ */
+interface DevToolsActions {
+    /** Open the dial menu */
+    openDial: () => void;
+    /** Close the dial menu */
+    closeDial: () => void;
+    /** Toggle the dial menu open/closed */
+    toggleDial: () => void;
+    /** Open the settings modal */
+    openSettings: () => void;
+    /** Close the settings modal */
+    closeSettings: () => void;
+    /** Set the active settings tab */
+    setSettingsTab: (tab: SettingsTabKey) => void;
+    /** Mark state as initialized */
+    initialize: () => void;
+    /** Reset state to initial values */
+    reset: () => void;
+}
+/**
+ * Return type of the useDevToolsState hook.
+ */
+interface UseDevToolsStateReturn {
+    /** Current state snapshot */
+    state: DevToolsState;
+    /** Action dispatchers */
+    actions: DevToolsActions;
+    /** The underlying state manager (for advanced use cases) */
+    manager: DevToolsStateManager;
+}
+/**
+ * Options for the useDevToolsState hook.
+ */
+interface UseDevToolsStateOptions {
+    /**
+     * Custom state manager instance.
+     * If not provided, uses the global devToolsStateManager.
+     */
+    manager?: DevToolsStateManager;
+}
+/**
+ * React hook for managing DevTools state.
+ *
+ * Uses useSyncExternalStore for efficient re-renders only when state changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { state, actions } = useDevToolsState();
+ *
+ *   return (
+ *     <>
+ *       <button onClick={actions.toggleDial}>
+ *         {state.isDialOpen ? 'Close' : 'Open'} Dial
+ *       </button>
+ *       {state.isDialOpen && <DialMenu />}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useDevToolsState(options?: UseDevToolsStateOptions): UseDevToolsStateReturn;
+/**
+ * Hook that returns only the dial open state and toggle action.
+ * Use when you only need dial functionality.
+ */
+declare function useDialState(options?: UseDevToolsStateOptions): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+/**
+ * Hook that returns only the settings modal state and actions.
+ * Use when you only need settings functionality.
+ */
+declare function useSettingsModalState(options?: UseDevToolsStateOptions): {
+    isOpen: boolean;
+    activeTab: SettingsTabKey;
+    open: () => void;
+    close: () => void;
+    setTab: (tab: SettingsTabKey) => void;
+};
+
+/**
+ * Combined context value for the DevTools system.
+ */
+interface DevToolsContextValue {
+    /** Current DevTools state (dial open, settings open, etc.) */
+    devToolsState: DevToolsState;
+    /** Actions for controlling DevTools state */
+    devToolsActions: DevToolsActions;
+    /** Current settings (tool configurations) */
+    settings: DevToolsSettings;
+    /** Loading state for settings */
+    isSettingsLoading: boolean;
+    /** Settings actions (toggle tools, etc.) */
+    settingsActions: UseSettingsReturn['actions'];
+    /** Settings helpers (dialToolCount, isDialFull, etc.) */
+    settingsHelpers: UseSettingsReturn['helpers'];
+    /** Available tools (from auto-discovery + custom) */
+    tools: WebToolConfig[];
+    /** Current environment (local, dev, qa, staging, prod) */
+    environment?: Environment;
+    /** Current user role */
+    userRole?: UserRole;
+    /** Available environments for switching */
+    availableEnvironments?: Environment[];
+    /** Callback when environment is switched */
+    onEnvironmentSwitch?: (env: Environment) => void;
+}
+/**
+ * Props for the DevToolsProvider component.
+ */
+interface DevToolsProviderProps {
+    children: ReactNode;
+    /** Available tools (from auto-discovery + custom) */
+    tools?: WebToolConfig[];
+    /** Default tools to enable in floating toolbar */
+    defaultFloatingTools?: string[];
+    /** Default tools to enable in dial menu */
+    defaultDialTools?: string[];
+    /** Current environment */
+    environment?: Environment;
+    /** Current user role */
+    userRole?: UserRole;
+    /** Available environments for switching */
+    availableEnvironments?: Environment[];
+    /** Callback when environment is switched */
+    onEnvironmentSwitch?: (env: Environment) => void;
+    /** Custom state manager instance */
+    stateManager?: DevToolsStateManager;
+}
+declare const DevToolsContext: react.Context<DevToolsContextValue | null>;
+/**
+ * Provider component for the DevTools system.
+ *
+ * Combines DevTools state, settings, and tool registry into a single context.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <DevToolsProvider
+ *       tools={myTools}
+ *       environment="dev"
+ *       userRole="admin"
+ *       defaultDialTools={['env', 'network', 'storage']}
+ *     >
+ *       <MyApp />
+ *     </DevToolsProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function DevToolsProvider({ children, tools, defaultFloatingTools, defaultDialTools, environment, userRole, availableEnvironments, onEnvironmentSwitch, stateManager, }: DevToolsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the DevTools context.
+ * Must be used within a DevToolsProvider.
+ *
+ * @throws Error if used outside of DevToolsProvider
+ */
+declare function useDevToolsContext(): DevToolsContextValue;
+/**
+ * Hook to access the DevTools context without throwing.
+ * Returns null if not within a DevToolsProvider.
+ *
+ * Useful for components that may or may not be within the provider.
+ */
+declare function useOptionalDevToolsContext(): DevToolsContextValue | null;
+/**
+ * Hook to get the current environment and role.
+ */
+declare function useDevToolsEnvironment(): {
+    environment: Environment | undefined;
+    userRole: UserRole | undefined;
+    availableEnvironments: Environment[] | undefined;
+    onEnvironmentSwitch: ((env: Environment) => void) | undefined;
+};
+/**
+ * Hook to get the available tools.
+ */
+declare function useDevTools(): {
+    tools: WebToolConfig[];
+    settings: DevToolsSettings;
+    isLoading: boolean;
+};
+/**
+ * Hook to control the dial menu.
+ */
+declare function useDevToolsDial(): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+/**
+ * Hook to control the settings modal.
+ */
+declare function useDevToolsSettings(): {
+    isOpen: boolean;
+    activeTab: SettingsTabKey;
+    open: () => void;
+    close: () => void;
+    setTab: (tab: SettingsTabKey) => void;
+    settings: DevToolsSettings;
+    actions: {
+        toggleDialTool: (toolId: string) => void;
+        toggleFloatingTool: (toolId: string) => void;
+        toggleEnvironment: () => void;
+        toggleGlobalSetting: (setting: keyof NonNullable<DevToolsSettings["globalSettings"]>) => void;
+        saveSettings: (newSettings: DevToolsSettings) => Promise<void>;
+        resetToDefaults: () => Promise<void>;
+        reloadSettings: () => Promise<void>;
+    };
+    helpers: {
+        dialToolCount: number;
+        isDialFull: boolean;
+        enabledDialTools: string[];
+        enabledFloatingTools: string[];
+        canEnableDialTool: (toolId: string) => boolean;
+    };
+};
+
+/**
+ * React-specific utility functions for floating tools.
+ */
+
+/**
+ * Interleave children with divider elements.
+ * Used to add separators between tool items.
+ *
+ * @param children - Array of React children
+ * @param renderDivider - Function to render a divider element with a unique key
+ * @returns Array of children interleaved with dividers
+ *
+ * @example
+ * ```tsx
+ * const items = interleaveWithDividers(
+ *   Children.toArray(children),
+ *   (key) => <Divider key={key} />
+ * );
+ * ```
+ */
+declare function interleaveWithDividers(children: ReactNode[], renderDivider: (key: string) => ReactElement): ReactNode[];
+
+export { type DevToolsActions, DevToolsContext, type DevToolsContextValue, DevToolsProvider, type DevToolsProviderProps, FloatingToolsContext, type FloatingToolsContextValue, FloatingToolsProvider, type FloatingToolsProviderProps, SettingsContext, type SettingsContextValue, SettingsProvider, type SettingsProviderProps, type UseDevToolsStateOptions, type UseDevToolsStateReturn, type UseFloatingToolsOptions, type UseFloatingToolsReturn, type UseSettingsOptions, type UseSettingsReturn, interleaveWithDividers, useDevTools, useDevToolsContext, useDevToolsDial, useDevToolsEnvironment, useDevToolsSettings, useDevToolsState, useDialState, useFloatingTools, useFloatingToolsContext, useOptionalDevToolsContext, useOptionalSettingsContext, useSettings, useSettingsContext, useSettingsModalState };

package/dist/index.d.ts

@@ -0,0 +1,529 @@
+import { FloatingToolsOptions, FloatingToolsState, FloatingToolsStore, DragEventData, Position, DragEndResult, AvailableToolConfig, StorageAdapter, DevToolsSettings, DevToolsStateManager, DevToolsState, SettingsTabKey, WebToolConfig, Environment, UserRole } from '@buoy-gg/floating-tools-core';
+export { ANIMATION_DURATION, AvailableToolConfig, BaseToolConfig, DIAL_BUTTON_SIZE, DIAL_GRID_LINE_COUNT, DIAL_ICON_PADDING, DIAL_ICON_SIZE, DIAL_START_ANGLE, DRAG_THRESHOLD, DevToolsAction, DevToolsSettings, DevToolsState, DevToolsStateManager, DialAnimationConfigType, DialCSSBezierKey, DialColorKey, DialEasingName, DialLayout, DialLayoutConfig, DragEndResult, DragEventData, EDGE_PADDING, EasingFunction, Environment, FloatingToolsState, FloatingToolsStore, GlobalDevToolsSettings, GlobalSettingConfig, GripIconLayout, IconPosition, MAX_DIAL_SLOTS, MAX_SETTINGS_DIAL_SLOTS, MergeSettingsOptions, Position, SETTINGS_STORAGE_KEY, SettingsColorKey, SettingsEventBus, SettingsTab, SettingsTabKey, Size, SpiralPosition, SpringConfig, StorageAdapter, ToolMetadata, ToolSlot, UserRole, UserStatusConfig, VISIBLE_HANDLE_WIDTH, WebToolConfig, canEnableDialTool, countEnabledTools, devToolsReducer, devToolsStateManager, dialAnimationConfig, dialCSSBeziers, dialColors, dialStyles, easing, enforceDialLimit, floatingToolsColors, generateDefaultSettings, generateDialCSSKeyframes, getAllIconPositions, getDialCSSAnimationStyles, getDialCSSKeyframesString, getDialLayout, getEnabledToolIds, getGridLineRotations, getGripIconLayout, getIconAngle, getIconPosition, getIconStaggerInputRange, getSpiralAnimationPosition, getStaggeredIconProgress, getToolColor, getToolDescription, getToolLabel, getUserStatusConfig, globalSettingsConfig, interpolate, interpolatePosition, mergeSettingsWithDefaults, sanitizeFloatingSettings, settingsColors, settingsEventBus, settingsStyles, settingsTabs, toolColors, toolDescriptions, toolLabels, withAlpha } from '@buoy-gg/floating-tools-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, ReactElement } from 'react';
+
+/**
+ * useFloatingTools - React hook for floating tools state management.
+ * Works with both web and React Native.
+ */
+
+interface UseFloatingToolsOptions extends Omit<FloatingToolsOptions, 'screenWidth' | 'screenHeight'> {
+    /**
+     * Screen dimensions. Required for boundary calculations.
+     * On web: { width: window.innerWidth, height: window.innerHeight }
+     * On RN: Dimensions.get('window')
+     */
+    screenSize: {
+        width: number;
+        height: number;
+    };
+}
+interface UseFloatingToolsReturn {
+    /** Current state (position, isDragging, isHidden, bubbleSize) */
+    state: FloatingToolsState;
+    /** The underlying store instance */
+    store: FloatingToolsStore;
+    /** Whether the store has been initialized (position loaded from storage) */
+    isInitialized: boolean;
+    /** Actions */
+    actions: {
+        /** Start a drag operation */
+        handleDragStart: (event: DragEventData) => void;
+        /** Process drag movement */
+        handleDragMove: (event: DragEventData) => {
+            position: Position;
+            isDragging: boolean;
+        };
+        /** End a drag operation */
+        handleDragEnd: (event: DragEventData) => DragEndResult;
+        /** Toggle between hidden and visible states */
+        toggleHideShow: () => {
+            targetPosition: Position;
+            isHiding: boolean;
+        };
+        /** Commit position after animation completes */
+        commitPosition: (position: Position) => void;
+        /** Update bubble size (call on layout) */
+        setBubbleSize: (size: {
+            width: number;
+            height: number;
+        }) => void;
+        /** Update screen size (call on resize/orientation change) */
+        setScreenSize: (width: number, height: number) => void;
+        /** Update min position (for safe area insets) */
+        setMinPosition: (minPos: Position) => void;
+    };
+}
+/**
+ * React hook for managing floating tools state.
+ *
+ * @example
+ * ```tsx
+ * // Web
+ * const { state, actions } = useFloatingTools({
+ *   screenSize: { width: window.innerWidth, height: window.innerHeight },
+ *   storage: webStorageAdapter,
+ * });
+ *
+ * // React Native
+ * const { state, actions } = useFloatingTools({
+ *   screenSize: Dimensions.get('window'),
+ *   storage: asyncStorageAdapter,
+ * });
+ * ```
+ */
+declare function useFloatingTools(options: UseFloatingToolsOptions): UseFloatingToolsReturn;
+
+interface FloatingToolsContextValue {
+    /** Whether the user is currently dragging */
+    isDragging: boolean;
+    /** Whether the floating tools are hidden */
+    isHidden: boolean;
+}
+declare const FloatingToolsContext: react.Context<FloatingToolsContextValue>;
+/**
+ * Hook to access floating tools context.
+ * Must be used within a FloatingToolsProvider.
+ */
+declare function useFloatingToolsContext(): FloatingToolsContextValue;
+/**
+ * Provider component for floating tools context.
+ */
+interface FloatingToolsProviderProps {
+    value: FloatingToolsContextValue;
+    children: ReactNode;
+}
+declare function FloatingToolsProvider({ value, children, }: FloatingToolsProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * useSettings - React hook for managing dev tools settings.
+ *
+ * Provides a complete settings management solution with:
+ * - Loading/persisting settings from storage
+ * - Toggle functions for dial and floating tools
+ * - Automatic enforcement of dial slot limits
+ * - Event bus integration for cross-component sync
+ */
+
+interface UseSettingsOptions {
+    /**
+     * Available tools/apps from auto-discovery or manual configuration.
+     */
+    availableTools?: AvailableToolConfig[];
+    /**
+     * Default tool IDs to enable in the floating bubble.
+     */
+    defaultFloatingTools?: string[];
+    /**
+     * Default tool IDs to enable in the dial menu.
+     */
+    defaultDialTools?: string[];
+    /**
+     * Storage adapter for persisting settings.
+     * Must implement getItem and setItem (sync or async).
+     */
+    storage?: StorageAdapter;
+    /**
+     * Initial settings to use before loading from storage.
+     */
+    initialSettings?: DevToolsSettings;
+    /**
+     * Callback when settings change.
+     */
+    onSettingsChange?: (settings: DevToolsSettings) => void;
+    /**
+     * Whether to subscribe to settings event bus for cross-component updates.
+     * @default true
+     */
+    subscribeToEventBus?: boolean;
+}
+interface UseSettingsReturn {
+    /**
+     * Current settings state.
+     */
+    settings: DevToolsSettings;
+    /**
+     * Whether settings are currently loading from storage.
+     */
+    isLoading: boolean;
+    /**
+     * Whether initial load from storage is complete.
+     */
+    isInitialized: boolean;
+    /**
+     * Error message if loading failed.
+     */
+    error: string | null;
+    /**
+     * Actions for modifying settings.
+     */
+    actions: {
+        /**
+         * Toggle a dial tool on/off.
+         * Respects MAX_SETTINGS_DIAL_SLOTS limit.
+         */
+        toggleDialTool: (toolId: string) => void;
+        /**
+         * Toggle a floating tool on/off.
+         */
+        toggleFloatingTool: (toolId: string) => void;
+        /**
+         * Toggle the environment indicator.
+         */
+        toggleEnvironment: () => void;
+        /**
+         * Toggle a global setting.
+         */
+        toggleGlobalSetting: (setting: keyof NonNullable<DevToolsSettings['globalSettings']>) => void;
+        /**
+         * Save arbitrary settings changes.
+         */
+        saveSettings: (newSettings: DevToolsSettings) => Promise<void>;
+        /**
+         * Reset settings to defaults.
+         */
+        resetToDefaults: () => Promise<void>;
+        /**
+         * Reload settings from storage.
+         */
+        reloadSettings: () => Promise<void>;
+    };
+    /**
+     * Derived state helpers.
+     */
+    helpers: {
+        /**
+         * Number of enabled dial tools.
+         */
+        dialToolCount: number;
+        /**
+         * Whether the dial is at max capacity.
+         */
+        isDialFull: boolean;
+        /**
+         * Array of enabled dial tool IDs.
+         */
+        enabledDialTools: string[];
+        /**
+         * Array of enabled floating tool IDs.
+         */
+        enabledFloatingTools: string[];
+        /**
+         * Check if a specific dial tool can be enabled.
+         */
+        canEnableDialTool: (toolId: string) => boolean;
+    };
+}
+declare function useSettings(options?: UseSettingsOptions): UseSettingsReturn;
+
+interface SettingsContextValue extends UseSettingsReturn {
+    /**
+     * Available tools for configuration.
+     */
+    availableTools: AvailableToolConfig[];
+}
+interface SettingsProviderProps {
+    /**
+     * Child components that will have access to settings.
+     */
+    children: ReactNode;
+    /**
+     * Available tools/apps from auto-discovery or manual configuration.
+     */
+    availableTools?: AvailableToolConfig[];
+    /**
+     * Default tool IDs to enable in the floating bubble.
+     */
+    defaultFloatingTools?: string[];
+    /**
+     * Default tool IDs to enable in the dial menu.
+     */
+    defaultDialTools?: string[];
+    /**
+     * Storage adapter for persisting settings.
+     */
+    storage?: StorageAdapter;
+    /**
+     * Initial settings to use before loading from storage.
+     */
+    initialSettings?: DevToolsSettings;
+    /**
+     * Callback when settings change.
+     */
+    onSettingsChange?: (settings: DevToolsSettings) => void;
+}
+declare const SettingsContext: react.Context<SettingsContextValue | null>;
+declare function SettingsProvider({ children, availableTools, defaultFloatingTools, defaultDialTools, storage, initialSettings, onSettingsChange, }: SettingsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access settings context.
+ * Must be used within a SettingsProvider.
+ *
+ * @throws Error if used outside of SettingsProvider
+ */
+declare function useSettingsContext(): SettingsContextValue;
+/**
+ * Hook to optionally access settings context.
+ * Returns null if used outside of SettingsProvider.
+ *
+ * Useful for components that work both with and without a provider.
+ */
+declare function useOptionalSettingsContext(): SettingsContextValue | null;
+
+/**
+ * useDevToolsState - React hook for DevTools state management.
+ *
+ * Provides a React-friendly interface to the DevToolsStateManager.
+ * Uses useSyncExternalStore for efficient subscription management.
+ */
+
+/**
+ * Actions available for controlling DevTools state.
+ */
+interface DevToolsActions {
+    /** Open the dial menu */
+    openDial: () => void;
+    /** Close the dial menu */
+    closeDial: () => void;
+    /** Toggle the dial menu open/closed */
+    toggleDial: () => void;
+    /** Open the settings modal */
+    openSettings: () => void;
+    /** Close the settings modal */
+    closeSettings: () => void;
+    /** Set the active settings tab */
+    setSettingsTab: (tab: SettingsTabKey) => void;
+    /** Mark state as initialized */
+    initialize: () => void;
+    /** Reset state to initial values */
+    reset: () => void;
+}
+/**
+ * Return type of the useDevToolsState hook.
+ */
+interface UseDevToolsStateReturn {
+    /** Current state snapshot */
+    state: DevToolsState;
+    /** Action dispatchers */
+    actions: DevToolsActions;
+    /** The underlying state manager (for advanced use cases) */
+    manager: DevToolsStateManager;
+}
+/**
+ * Options for the useDevToolsState hook.
+ */
+interface UseDevToolsStateOptions {
+    /**
+     * Custom state manager instance.
+     * If not provided, uses the global devToolsStateManager.
+     */
+    manager?: DevToolsStateManager;
+}
+/**
+ * React hook for managing DevTools state.
+ *
+ * Uses useSyncExternalStore for efficient re-renders only when state changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { state, actions } = useDevToolsState();
+ *
+ *   return (
+ *     <>
+ *       <button onClick={actions.toggleDial}>
+ *         {state.isDialOpen ? 'Close' : 'Open'} Dial
+ *       </button>
+ *       {state.isDialOpen && <DialMenu />}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useDevToolsState(options?: UseDevToolsStateOptions): UseDevToolsStateReturn;
+/**
+ * Hook that returns only the dial open state and toggle action.
+ * Use when you only need dial functionality.
+ */
+declare function useDialState(options?: UseDevToolsStateOptions): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+/**
+ * Hook that returns only the settings modal state and actions.
+ * Use when you only need settings functionality.
+ */
+declare function useSettingsModalState(options?: UseDevToolsStateOptions): {
+    isOpen: boolean;
+    activeTab: SettingsTabKey;
+    open: () => void;
+    close: () => void;
+    setTab: (tab: SettingsTabKey) => void;
+};
+
+/**
+ * Combined context value for the DevTools system.
+ */
+interface DevToolsContextValue {
+    /** Current DevTools state (dial open, settings open, etc.) */
+    devToolsState: DevToolsState;
+    /** Actions for controlling DevTools state */
+    devToolsActions: DevToolsActions;
+    /** Current settings (tool configurations) */
+    settings: DevToolsSettings;
+    /** Loading state for settings */
+    isSettingsLoading: boolean;
+    /** Settings actions (toggle tools, etc.) */
+    settingsActions: UseSettingsReturn['actions'];
+    /** Settings helpers (dialToolCount, isDialFull, etc.) */
+    settingsHelpers: UseSettingsReturn['helpers'];
+    /** Available tools (from auto-discovery + custom) */
+    tools: WebToolConfig[];
+    /** Current environment (local, dev, qa, staging, prod) */
+    environment?: Environment;
+    /** Current user role */
+    userRole?: UserRole;
+    /** Available environments for switching */
+    availableEnvironments?: Environment[];
+    /** Callback when environment is switched */
+    onEnvironmentSwitch?: (env: Environment) => void;
+}
+/**
+ * Props for the DevToolsProvider component.
+ */
+interface DevToolsProviderProps {
+    children: ReactNode;
+    /** Available tools (from auto-discovery + custom) */
+    tools?: WebToolConfig[];
+    /** Default tools to enable in floating toolbar */
+    defaultFloatingTools?: string[];
+    /** Default tools to enable in dial menu */
+    defaultDialTools?: string[];
+    /** Current environment */
+    environment?: Environment;
+    /** Current user role */
+    userRole?: UserRole;
+    /** Available environments for switching */
+    availableEnvironments?: Environment[];
+    /** Callback when environment is switched */
+    onEnvironmentSwitch?: (env: Environment) => void;
+    /** Custom state manager instance */
+    stateManager?: DevToolsStateManager;
+}
+declare const DevToolsContext: react.Context<DevToolsContextValue | null>;
+/**
+ * Provider component for the DevTools system.
+ *
+ * Combines DevTools state, settings, and tool registry into a single context.
+ *
+ * @example
+ * ```tsx
+ * function App() {
+ *   return (
+ *     <DevToolsProvider
+ *       tools={myTools}
+ *       environment="dev"
+ *       userRole="admin"
+ *       defaultDialTools={['env', 'network', 'storage']}
+ *     >
+ *       <MyApp />
+ *     </DevToolsProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function DevToolsProvider({ children, tools, defaultFloatingTools, defaultDialTools, environment, userRole, availableEnvironments, onEnvironmentSwitch, stateManager, }: DevToolsProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the DevTools context.
+ * Must be used within a DevToolsProvider.
+ *
+ * @throws Error if used outside of DevToolsProvider
+ */
+declare function useDevToolsContext(): DevToolsContextValue;
+/**
+ * Hook to access the DevTools context without throwing.
+ * Returns null if not within a DevToolsProvider.
+ *
+ * Useful for components that may or may not be within the provider.
+ */
+declare function useOptionalDevToolsContext(): DevToolsContextValue | null;
+/**
+ * Hook to get the current environment and role.
+ */
+declare function useDevToolsEnvironment(): {
+    environment: Environment | undefined;
+    userRole: UserRole | undefined;
+    availableEnvironments: Environment[] | undefined;
+    onEnvironmentSwitch: ((env: Environment) => void) | undefined;
+};
+/**
+ * Hook to get the available tools.
+ */
+declare function useDevTools(): {
+    tools: WebToolConfig[];
+    settings: DevToolsSettings;
+    isLoading: boolean;
+};
+/**
+ * Hook to control the dial menu.
+ */
+declare function useDevToolsDial(): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+};
+/**
+ * Hook to control the settings modal.
+ */
+declare function useDevToolsSettings(): {
+    isOpen: boolean;
+    activeTab: SettingsTabKey;
+    open: () => void;
+    close: () => void;
+    setTab: (tab: SettingsTabKey) => void;
+    settings: DevToolsSettings;
+    actions: {
+        toggleDialTool: (toolId: string) => void;
+        toggleFloatingTool: (toolId: string) => void;
+        toggleEnvironment: () => void;
+        toggleGlobalSetting: (setting: keyof NonNullable<DevToolsSettings["globalSettings"]>) => void;
+        saveSettings: (newSettings: DevToolsSettings) => Promise<void>;
+        resetToDefaults: () => Promise<void>;
+        reloadSettings: () => Promise<void>;
+    };
+    helpers: {
+        dialToolCount: number;
+        isDialFull: boolean;
+        enabledDialTools: string[];
+        enabledFloatingTools: string[];
+        canEnableDialTool: (toolId: string) => boolean;
+    };
+};
+
+/**
+ * React-specific utility functions for floating tools.
+ */
+
+/**
+ * Interleave children with divider elements.
+ * Used to add separators between tool items.
+ *
+ * @param children - Array of React children
+ * @param renderDivider - Function to render a divider element with a unique key
+ * @returns Array of children interleaved with dividers
+ *
+ * @example
+ * ```tsx
+ * const items = interleaveWithDividers(
+ *   Children.toArray(children),
+ *   (key) => <Divider key={key} />
+ * );
+ * ```
+ */
+declare function interleaveWithDividers(children: ReactNode[], renderDivider: (key: string) => ReactElement): ReactNode[];
+
+export { type DevToolsActions, DevToolsContext, type DevToolsContextValue, DevToolsProvider, type DevToolsProviderProps, FloatingToolsContext, type FloatingToolsContextValue, FloatingToolsProvider, type FloatingToolsProviderProps, SettingsContext, type SettingsContextValue, SettingsProvider, type SettingsProviderProps, type UseDevToolsStateOptions, type UseDevToolsStateReturn, type UseFloatingToolsOptions, type UseFloatingToolsReturn, type UseSettingsOptions, type UseSettingsReturn, interleaveWithDividers, useDevTools, useDevToolsContext, useDevToolsDial, useDevToolsEnvironment, useDevToolsSettings, useDevToolsState, useDialState, useFloatingTools, useFloatingToolsContext, useOptionalDevToolsContext, useOptionalSettingsContext, useSettings, useSettingsContext, useSettingsModalState };

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var k=Object.defineProperty;var ye=Object.getOwnPropertyDescriptor;var Ee=Object.getOwnPropertyNames;var he=Object.prototype.hasOwnProperty;var Pe=(t,o)=>{for(var s in o)k(t,s,{get:o[s],enumerable:!0})},Ae=(t,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let a of Ee(o))!he.call(t,a)&&a!==s&&k(t,a,{get:()=>o[a],enumerable:!(n=ye(o,a))||n.enumerable});return t};var Fe=t=>Ae(k({},"__esModule",{value:!0}),t);var Re={};Pe(Re,{ANIMATION_DURATION:()=>e.ANIMATION_DURATION,DIAL_BUTTON_SIZE:()=>e.DIAL_BUTTON_SIZE,DIAL_GRID_LINE_COUNT:()=>e.DIAL_GRID_LINE_COUNT,DIAL_ICON_PADDING:()=>e.DIAL_ICON_PADDING,DIAL_ICON_SIZE:()=>e.DIAL_ICON_SIZE,DIAL_START_ANGLE:()=>e.DIAL_START_ANGLE,DRAG_THRESHOLD:()=>e.DRAG_THRESHOLD,DevToolsContext:()=>R,DevToolsProvider:()=>le,DevToolsStateManager:()=>L.DevToolsStateManager,EDGE_PADDING:()=>e.EDGE_PADDING,FloatingToolsContext:()=>z,FloatingToolsProvider:()=>$,FloatingToolsStore:()=>e.FloatingToolsStore,MAX_DIAL_SLOTS:()=>e.MAX_DIAL_SLOTS,MAX_SETTINGS_DIAL_SLOTS:()=>G.MAX_SETTINGS_DIAL_SLOTS,SETTINGS_STORAGE_KEY:()=>G.SETTINGS_STORAGE_KEY,SettingsContext:()=>U,SettingsEventBus:()=>H.SettingsEventBus,SettingsProvider:()=>Q,VISIBLE_HANDLE_WIDTH:()=>e.VISIBLE_HANDLE_WIDTH,canEnableDialTool:()=>c.canEnableDialTool,countEnabledTools:()=>c.countEnabledTools,devToolsReducer:()=>L.devToolsReducer,devToolsStateManager:()=>L.devToolsStateManager,dialAnimationConfig:()=>e.dialAnimationConfig,dialCSSBeziers:()=>e.dialCSSBeziers,dialColors:()=>e.dialColors,dialStyles:()=>e.dialStyles,easing:()=>e.easing,enforceDialLimit:()=>c.enforceDialLimit,floatingToolsColors:()=>e.floatingToolsColors,generateDefaultSettings:()=>c.generateDefaultSettings,generateDialCSSKeyframes:()=>e.generateDialCSSKeyframes,getAllIconPositions:()=>e.getAllIconPositions,getDialCSSAnimationStyles:()=>e.getDialCSSAnimationStyles,getDialCSSKeyframesString:()=>e.getDialCSSKeyframesString,getDialLayout:()=>e.getDialLayout,getEnabledToolIds:()=>c.getEnabledToolIds,getGridLineRotations:()=>e.getGridLineRotations,getGripIconLayout:()=>e.getGripIconLayout,getIconAngle:()=>e.getIconAngle,getIconPosition:()=>e.getIconPosition,getIconStaggerInputRange:()=>e.getIconStaggerInputRange,getSpiralAnimationPosition:()=>e.getSpiralAnimationPosition,getStaggeredIconProgress:()=>e.getStaggeredIconProgress,getToolColor:()=>C.getToolColor,getToolDescription:()=>y.getToolDescription,getToolLabel:()=>y.getToolLabel,getUserStatusConfig:()=>e.getUserStatusConfig,globalSettingsConfig:()=>pe.globalSettingsConfig,interleaveWithDividers:()=>ve,interpolate:()=>e.interpolate,interpolatePosition:()=>e.interpolatePosition,mergeSettingsWithDefaults:()=>c.mergeSettingsWithDefaults,sanitizeFloatingSettings:()=>c.sanitizeFloatingSettings,settingsColors:()=>C.settingsColors,settingsEventBus:()=>H.settingsEventBus,settingsStyles:()=>C.settingsStyles,settingsTabs:()=>de.settingsTabs,toolColors:()=>C.toolColors,toolDescriptions:()=>y.toolDescriptions,toolLabels:()=>y.toolLabels,useDevTools:()=>ge,useDevToolsContext:()=>O,useDevToolsDial:()=>Se,useDevToolsEnvironment:()=>re,useDevToolsSettings:()=>Te,useDevToolsState:()=>I,useDialState:()=>ne,useFloatingTools:()=>J,useFloatingToolsContext:()=>Z,useOptionalDevToolsContext:()=>ae,useOptionalSettingsContext:()=>ee,useSettings:()=>F,useSettingsContext:()=>j,useSettingsModalState:()=>se,withAlpha:()=>e.withAlpha});module.exports=Fe(Re);var D=require("react"),X=require("@buoy-gg/floating-tools-core"),Y=require("react");function J(t){let{screenSize:o,...s}=t,n=(0,D.useMemo)(()=>new X.FloatingToolsStore({...s,screenWidth:o.width,screenHeight:o.height}),[s.enablePositionPersistence,s.storage,s.visibleHandleWidth,s.dragThreshold,s.edgePadding]),a=(0,D.useRef)(!1),[v,f]=(0,Y.useState)(!1);(0,D.useEffect)(()=>(a.current||(a.current=!0,n.initialize().then(()=>{f(!0)})),()=>{n.destroy()}),[n]),(0,D.useEffect)(()=>{n.setScreenSize(o.width,o.height)},[n,o.width,o.height]);let p=(0,D.useSyncExternalStore)(n.subscribe,n.getSnapshot),T=(0,D.useMemo)(()=>({handleDragStart:S=>n.handleDragStart(S),handleDragMove:S=>n.handleDragMove(S),handleDragEnd:S=>n.handleDragEnd(S),toggleHideShow:()=>n.toggleHideShow(),commitPosition:S=>n.commitPosition(S),setBubbleSize:S=>n.setBubbleSize(S),setScreenSize:(S,E)=>n.setScreenSize(S,E),setMinPosition:S=>n.setMinPosition(S)}),[n]);return{state:p,store:n,isInitialized:v,actions:T}}var _=require("react"),q=require("react/jsx-runtime"),Ie={isDragging:!1,isHidden:!1},z=(0,_.createContext)(Ie);function Z(){return(0,_.useContext)(z)}function $({value:t,children:o}){return(0,q.jsx)(z.Provider,{value:t,children:o})}var r=require("react"),g=require("@buoy-gg/floating-tools-core");function F(t={}){let{availableTools:o=[],defaultFloatingTools:s,defaultDialTools:n,storage:a,initialSettings:v,onSettingsChange:f,subscribeToEventBus:p=!0}=t,T=(0,r.useMemo)(()=>(0,g.generateDefaultSettings)(o,s,n),[o,s,n]),S=(0,r.useMemo)(()=>Object.keys(T.dialTools),[T]),E=(0,r.useMemo)(()=>Object.keys(T.floatingTools).filter(i=>i!=="environment"),[T]),[l,b]=(0,r.useState)(v??T),[N,P]=(0,r.useState)(!0),[w,M]=(0,r.useState)(!1),[A,K]=(0,r.useState)(null),W=(0,r.useCallback)(async()=>{if(!a){P(!1),M(!0);return}try{P(!0),K(null);let i=await a.getItem(g.SETTINGS_STORAGE_KEY);if(i){let u=JSON.parse(i),m=(0,g.mergeSettingsWithDefaults)(T,u,{allowedDialKeys:S,allowedFloatingKeys:E});b(m)}else b(T)}catch(i){console.error("Failed to load dev tools settings:",i),K(i instanceof Error?i.message:"Failed to load settings"),b(T)}finally{P(!1),M(!0)}},[a,T,S,E]),d=(0,r.useCallback)(async i=>{let u={...i,dialTools:(0,g.enforceDialLimit)(i.dialTools)};try{a&&await a.setItem(g.SETTINGS_STORAGE_KEY,JSON.stringify(u)),b(u),f?.(u),g.settingsEventBus.emit(u)}catch(m){throw console.error("Failed to save dev tools settings:",m),K(m instanceof Error?m.message:"Failed to save settings"),m}},[a,f]),De=(0,r.useCallback)(i=>{let u=(0,g.countEnabledTools)(l.dialTools);if(!l.dialTools[i]&&u>=g.MAX_SETTINGS_DIAL_SLOTS)return;let B={...l,dialTools:{...l.dialTools,[i]:!l.dialTools[i]}};d(B)},[l,d]),fe=(0,r.useCallback)(i=>{let u={...l,floatingTools:{...l.floatingTools,[i]:!l.floatingTools[i]}};d(u)},[l,d]),me=(0,r.useCallback)(()=>{let i={...l,floatingTools:{...l.floatingTools,environment:!l.floatingTools.environment}};d(i)},[l,d]),be=(0,r.useCallback)(i=>{let u={...l,globalSettings:{...l.globalSettings,[i]:!l.globalSettings?.[i]}};d(u)},[l,d]),xe=(0,r.useCallback)(async()=>{await d(T)},[T,d]);(0,r.useEffect)(()=>{W()},[W]),(0,r.useEffect)(()=>p?g.settingsEventBus.addListener(u=>{b(u)}):void 0,[p]);let Ce=(0,r.useMemo)(()=>{let i=(0,g.countEnabledTools)(l.dialTools),{dial:u,floating:m}=(0,g.getEnabledToolIds)(l);return{dialToolCount:i,isDialFull:i>=g.MAX_SETTINGS_DIAL_SLOTS,enabledDialTools:u,enabledFloatingTools:m,canEnableDialTool:B=>l.dialTools[B]?!0:i<g.MAX_SETTINGS_DIAL_SLOTS}},[l]);return{settings:l,isLoading:N,isInitialized:w,error:A,actions:{toggleDialTool:De,toggleFloatingTool:fe,toggleEnvironment:me,toggleGlobalSetting:be,saveSettings:d,resetToDefaults:xe,reloadSettings:W},helpers:Ce}}var h=require("react");var te=require("react/jsx-runtime"),U=(0,h.createContext)(null);function Q({children:t,availableTools:o=[],defaultFloatingTools:s,defaultDialTools:n,storage:a,initialSettings:v,onSettingsChange:f}){let p=F({availableTools:o,defaultFloatingTools:s,defaultDialTools:n,storage:a,initialSettings:v,onSettingsChange:f}),T=(0,h.useMemo)(()=>({...p,availableTools:o}),[p,o]);return(0,te.jsx)(U.Provider,{value:T,children:t})}function j(){let t=(0,h.useContext)(U);if(!t)throw new Error("useSettingsContext must be used within a SettingsProvider");return t}function ee(){return(0,h.useContext)(U)}var V=require("react"),oe=require("@buoy-gg/floating-tools-core");function I(t={}){let{manager:o=oe.devToolsStateManager}=t,s=(0,V.useSyncExternalStore)(o.subscribe,o.getState,o.getServerState),n=(0,V.useMemo)(()=>({openDial:()=>o.openDial(),closeDial:()=>o.closeDial(),toggleDial:()=>o.toggleDial(),openSettings:()=>o.openSettings(),closeSettings:()=>o.closeSettings(),setSettingsTab:a=>o.setSettingsTab(a),initialize:()=>o.initialize(),reset:()=>o.reset()}),[o]);return{state:s,actions:n,manager:o}}function ne(t={}){let{state:o,actions:s}=I(t);return{isOpen:o.isDialOpen,open:s.openDial,close:s.closeDial,toggle:s.toggleDial}}function se(t={}){let{state:o,actions:s}=I(t);return{isOpen:o.isSettingsOpen,activeTab:o.activeSettingsTab,open:s.openSettings,close:s.closeSettings,setTab:s.setSettingsTab}}var x=require("react"),ie=require("@buoy-gg/floating-tools-core");var ue=require("react/jsx-runtime"),R=(0,x.createContext)(null);R.displayName="DevToolsContext";function le({children:t,tools:o=[],defaultFloatingTools:s,defaultDialTools:n,environment:a,userRole:v,availableEnvironments:f,onEnvironmentSwitch:p,stateManager:T=ie.devToolsStateManager}){let{state:S,actions:E}=I({manager:T}),l=(0,x.useMemo)(()=>o.map(A=>({id:A.id,name:A.name,description:A.description,slot:A.slot})),[o]),{settings:b,isLoading:N,actions:P,helpers:w}=F({availableTools:l,defaultFloatingTools:s,defaultDialTools:n}),M=(0,x.useMemo)(()=>({devToolsState:S,devToolsActions:E,settings:b,isSettingsLoading:N,settingsActions:P,settingsHelpers:w,tools:o,environment:a,userRole:v,availableEnvironments:f,onEnvironmentSwitch:p}),[S,E,b,N,P,w,o,a,v,f,p]);return(0,ue.jsx)(R.Provider,{value:M,children:t})}function O(){let t=(0,x.useContext)(R);if(!t)throw new Error("useDevToolsContext must be used within a DevToolsProvider. Wrap your app with <DevToolsProvider> or <FloatingDevTools>.");return t}function ae(){return(0,x.useContext)(R)}function re(){let t=O();return{environment:t.environment,userRole:t.userRole,availableEnvironments:t.availableEnvironments,onEnvironmentSwitch:t.onEnvironmentSwitch}}function ge(){let t=O();return{tools:t.tools,settings:t.settings,isLoading:t.isSettingsLoading}}function Se(){let t=O();return{isOpen:t.devToolsState.isDialOpen,open:t.devToolsActions.openDial,close:t.devToolsActions.closeDial,toggle:t.devToolsActions.toggleDial}}function Te(){let t=O();return{isOpen:t.devToolsState.isSettingsOpen,activeTab:t.devToolsState.activeSettingsTab,open:t.devToolsActions.openSettings,close:t.devToolsActions.closeSettings,setTab:t.devToolsActions.setSettingsTab,settings:t.settings,actions:t.settingsActions,helpers:t.settingsHelpers}}var ce=require("@buoy-gg/floating-tools-core");function ve(t,o){let s=(0,ce.filterValidChildren)(t),n=[];return s.forEach((a,v)=>{n.push(a),v<s.length-1&&n.push(o(`divider-${v}`))}),n}var L=require("@buoy-gg/floating-tools-core"),e=require("@buoy-gg/floating-tools-core"),G=require("@buoy-gg/floating-tools-core"),de=require("@buoy-gg/floating-tools-core"),C=require("@buoy-gg/floating-tools-core"),y=require("@buoy-gg/floating-tools-core"),pe=require("@buoy-gg/floating-tools-core"),c=require("@buoy-gg/floating-tools-core"),H=require("@buoy-gg/floating-tools-core");0&&(module.exports={ANIMATION_DURATION,DIAL_BUTTON_SIZE,DIAL_GRID_LINE_COUNT,DIAL_ICON_PADDING,DIAL_ICON_SIZE,DIAL_START_ANGLE,DRAG_THRESHOLD,DevToolsContext,DevToolsProvider,DevToolsStateManager,EDGE_PADDING,FloatingToolsContext,FloatingToolsProvider,FloatingToolsStore,MAX_DIAL_SLOTS,MAX_SETTINGS_DIAL_SLOTS,SETTINGS_STORAGE_KEY,SettingsContext,SettingsEventBus,SettingsProvider,VISIBLE_HANDLE_WIDTH,canEnableDialTool,countEnabledTools,devToolsReducer,devToolsStateManager,dialAnimationConfig,dialCSSBeziers,dialColors,dialStyles,easing,enforceDialLimit,floatingToolsColors,generateDefaultSettings,generateDialCSSKeyframes,getAllIconPositions,getDialCSSAnimationStyles,getDialCSSKeyframesString,getDialLayout,getEnabledToolIds,getGridLineRotations,getGripIconLayout,getIconAngle,getIconPosition,getIconStaggerInputRange,getSpiralAnimationPosition,getStaggeredIconProgress,getToolColor,getToolDescription,getToolLabel,getUserStatusConfig,globalSettingsConfig,interleaveWithDividers,interpolate,interpolatePosition,mergeSettingsWithDefaults,sanitizeFloatingSettings,settingsColors,settingsEventBus,settingsStyles,settingsTabs,toolColors,toolDescriptions,toolLabels,useDevTools,useDevToolsContext,useDevToolsDial,useDevToolsEnvironment,useDevToolsSettings,useDevToolsState,useDialState,useFloatingTools,useFloatingToolsContext,useOptionalDevToolsContext,useOptionalSettingsContext,useSettings,useSettingsContext,useSettingsModalState,withAlpha});

package/dist/index.mjs

@@ -0,0 +1 @@
+import{useMemo as w,useSyncExternalStore as $,useEffect as M,useRef as q}from"react";import{FloatingToolsStore as Q}from"@buoy-gg/floating-tools-core";import{useState as ee}from"react";function j(e){let{screenSize:t,...s}=e,o=w(()=>new Q({...s,screenWidth:t.width,screenHeight:t.height}),[s.enablePositionPersistence,s.storage,s.visibleHandleWidth,s.dragThreshold,s.edgePadding]),a=q(!1),[S,c]=ee(!1);M(()=>(a.current||(a.current=!0,o.initialize().then(()=>{c(!0)})),()=>{o.destroy()}),[o]),M(()=>{o.setScreenSize(t.width,t.height)},[o,t.width,t.height]);let u=$(o.subscribe,o.getSnapshot),r=w(()=>({handleDragStart:l=>o.handleDragStart(l),handleDragMove:l=>o.handleDragMove(l),handleDragEnd:l=>o.handleDragEnd(l),toggleHideShow:()=>o.toggleHideShow(),commitPosition:l=>o.commitPosition(l),setBubbleSize:l=>o.setBubbleSize(l),setScreenSize:(l,p)=>o.setScreenSize(l,p),setMinPosition:l=>o.setMinPosition(l)}),[o]);return{state:u,store:o,isInitialized:S,actions:r}}import{createContext as te,useContext as oe}from"react";import{jsx as le}from"react/jsx-runtime";var ne={isDragging:!1,isHidden:!1},U=te(ne);function se(){return oe(U)}function ie({value:e,children:t}){return le(U.Provider,{value:e,children:t})}import{useState as A,useEffect as _,useCallback as D,useMemo as F}from"react";import{settingsEventBus as z,SETTINGS_STORAGE_KEY as V,MAX_SETTINGS_DIAL_SLOTS as N,enforceDialLimit as ae,mergeSettingsWithDefaults as re,generateDefaultSettings as ge,countEnabledTools as G,getEnabledToolIds as Se}from"@buoy-gg/floating-tools-core";function b(e={}){let{availableTools:t=[],defaultFloatingTools:s,defaultDialTools:o,storage:a,initialSettings:S,onSettingsChange:c,subscribeToEventBus:u=!0}=e,r=F(()=>ge(t,s,o),[t,s,o]),l=F(()=>Object.keys(r.dialTools),[r]),p=F(()=>Object.keys(r.floatingTools).filter(n=>n!=="environment"),[r]),[i,d]=A(S??r),[E,f]=A(!0),[h,P]=A(!1),[m,R]=A(null),O=D(async()=>{if(!a){f(!1),P(!0);return}try{f(!0),R(null);let n=await a.getItem(V);if(n){let g=JSON.parse(n),v=re(r,g,{allowedDialKeys:l,allowedFloatingKeys:p});d(v)}else d(r)}catch(n){console.error("Failed to load dev tools settings:",n),R(n instanceof Error?n.message:"Failed to load settings"),d(r)}finally{f(!1),P(!0)}},[a,r,l,p]),T=D(async n=>{let g={...n,dialTools:ae(n.dialTools)};try{a&&await a.setItem(V,JSON.stringify(g)),d(g),c?.(g),z.emit(g)}catch(v){throw console.error("Failed to save dev tools settings:",v),R(v instanceof Error?v.message:"Failed to save settings"),v}},[a,c]),B=D(n=>{let g=G(i.dialTools);if(!i.dialTools[n]&&g>=N)return;let L={...i,dialTools:{...i.dialTools,[n]:!i.dialTools[n]}};T(L)},[i,T]),k=D(n=>{let g={...i,floatingTools:{...i.floatingTools,[n]:!i.floatingTools[n]}};T(g)},[i,T]),X=D(()=>{let n={...i,floatingTools:{...i.floatingTools,environment:!i.floatingTools.environment}};T(n)},[i,T]),J=D(n=>{let g={...i,globalSettings:{...i.globalSettings,[n]:!i.globalSettings?.[n]}};T(g)},[i,T]),Y=D(async()=>{await T(r)},[r,T]);_(()=>{O()},[O]),_(()=>u?z.addListener(g=>{d(g)}):void 0,[u]);let Z=F(()=>{let n=G(i.dialTools),{dial:g,floating:v}=Se(i);return{dialToolCount:n,isDialFull:n>=N,enabledDialTools:g,enabledFloatingTools:v,canEnableDialTool:L=>i.dialTools[L]?!0:n<N}},[i]);return{settings:i,isLoading:E,isInitialized:h,error:m,actions:{toggleDialTool:B,toggleFloatingTool:k,toggleEnvironment:X,toggleGlobalSetting:J,saveSettings:T,resetToDefaults:Y,reloadSettings:O},helpers:Z}}import{createContext as Te,useContext as H,useMemo as ue}from"react";import{jsx as pe}from"react/jsx-runtime";var I=Te(null);function ce({children:e,availableTools:t=[],defaultFloatingTools:s,defaultDialTools:o,storage:a,initialSettings:S,onSettingsChange:c}){let u=b({availableTools:t,defaultFloatingTools:s,defaultDialTools:o,storage:a,initialSettings:S,onSettingsChange:c}),r=ue(()=>({...u,availableTools:t}),[u,t]);return pe(I.Provider,{value:r,children:e})}function ve(){let e=H(I);if(!e)throw new Error("useSettingsContext must be used within a SettingsProvider");return e}function de(){return H(I)}import{useSyncExternalStore as De,useMemo as fe}from"react";import{devToolsStateManager as me}from"@buoy-gg/floating-tools-core";function x(e={}){let{manager:t=me}=e,s=De(t.subscribe,t.getState,t.getServerState),o=fe(()=>({openDial:()=>t.openDial(),closeDial:()=>t.closeDial(),toggleDial:()=>t.toggleDial(),openSettings:()=>t.openSettings(),closeSettings:()=>t.closeSettings(),setSettingsTab:a=>t.setSettingsTab(a),initialize:()=>t.initialize(),reset:()=>t.reset()}),[t]);return{state:s,actions:o,manager:t}}function be(e={}){let{state:t,actions:s}=x(e);return{isOpen:t.isDialOpen,open:s.openDial,close:s.closeDial,toggle:s.toggleDial}}function xe(e={}){let{state:t,actions:s}=x(e);return{isOpen:t.isSettingsOpen,activeTab:t.activeSettingsTab,open:s.openSettings,close:s.closeSettings,setTab:s.setSettingsTab}}import{createContext as Ce,useContext as W,useMemo as K}from"react";import{devToolsStateManager as ye}from"@buoy-gg/floating-tools-core";import{jsx as Re}from"react/jsx-runtime";var C=Ce(null);C.displayName="DevToolsContext";function Ee({children:e,tools:t=[],defaultFloatingTools:s,defaultDialTools:o,environment:a,userRole:S,availableEnvironments:c,onEnvironmentSwitch:u,stateManager:r=ye}){let{state:l,actions:p}=x({manager:r}),i=K(()=>t.map(m=>({id:m.id,name:m.name,description:m.description,slot:m.slot})),[t]),{settings:d,isLoading:E,actions:f,helpers:h}=b({availableTools:i,defaultFloatingTools:s,defaultDialTools:o}),P=K(()=>({devToolsState:l,devToolsActions:p,settings:d,isSettingsLoading:E,settingsActions:f,settingsHelpers:h,tools:t,environment:a,userRole:S,availableEnvironments:c,onEnvironmentSwitch:u}),[l,p,d,E,f,h,t,a,S,c,u]);return Re(C.Provider,{value:P,children:e})}function y(){let e=W(C);if(!e)throw new Error("useDevToolsContext must be used within a DevToolsProvider. Wrap your app with <DevToolsProvider> or <FloatingDevTools>.");return e}function he(){return W(C)}function Pe(){let e=y();return{environment:e.environment,userRole:e.userRole,availableEnvironments:e.availableEnvironments,onEnvironmentSwitch:e.onEnvironmentSwitch}}function Ae(){let e=y();return{tools:e.tools,settings:e.settings,isLoading:e.isSettingsLoading}}function Fe(){let e=y();return{isOpen:e.devToolsState.isDialOpen,open:e.devToolsActions.openDial,close:e.devToolsActions.closeDial,toggle:e.devToolsActions.toggleDial}}function Ie(){let e=y();return{isOpen:e.devToolsState.isSettingsOpen,activeTab:e.devToolsState.activeSettingsTab,open:e.devToolsActions.openSettings,close:e.devToolsActions.closeSettings,setTab:e.devToolsActions.setSettingsTab,settings:e.settings,actions:e.settingsActions,helpers:e.settingsHelpers}}import{filterValidChildren as Oe}from"@buoy-gg/floating-tools-core";function Le(e,t){let s=Oe(e),o=[];return s.forEach((a,S)=>{o.push(a),S<s.length-1&&o.push(t(`divider-${S}`))}),o}import{DevToolsStateManager as bt,devToolsStateManager as xt,devToolsReducer as Ct}from"@buoy-gg/floating-tools-core";import{FloatingToolsStore as Et,floatingToolsColors as ht,withAlpha as Pt,getUserStatusConfig as At,getGripIconLayout as Ft,easing as It,interpolate as Rt,interpolatePosition as Ot,VISIBLE_HANDLE_WIDTH as Lt,ANIMATION_DURATION as Ut,DRAG_THRESHOLD as Nt,EDGE_PADDING as wt,MAX_DIAL_SLOTS as Mt,DIAL_START_ANGLE as _t,DIAL_BUTTON_SIZE as zt,DIAL_ICON_SIZE as Vt,DIAL_ICON_PADDING as Gt,DIAL_GRID_LINE_COUNT as Ht,dialColors as Kt,dialStyles as Wt,getGridLineRotations as Bt,getDialLayout as kt,getIconAngle as Xt,getIconPosition as Jt,getAllIconPositions as Yt,dialAnimationConfig as Zt,getIconStaggerInputRange as $t,dialCSSBeziers as qt,generateDialCSSKeyframes as Qt,getDialCSSAnimationStyles as jt,getDialCSSKeyframesString as eo,getSpiralAnimationPosition as to,getStaggeredIconProgress as oo}from"@buoy-gg/floating-tools-core";import{SETTINGS_STORAGE_KEY as so,MAX_SETTINGS_DIAL_SLOTS as io}from"@buoy-gg/floating-tools-core";import{settingsTabs as ao}from"@buoy-gg/floating-tools-core";import{settingsColors as go,toolColors as So,getToolColor as To,settingsStyles as uo}from"@buoy-gg/floating-tools-core";import{toolLabels as vo,getToolLabel as po,toolDescriptions as Do,getToolDescription as fo}from"@buoy-gg/floating-tools-core";import{globalSettingsConfig as bo}from"@buoy-gg/floating-tools-core";import{enforceDialLimit as Co,sanitizeFloatingSettings as yo,mergeSettingsWithDefaults as Eo,generateDefaultSettings as ho,countEnabledTools as Po,canEnableDialTool as Ao,getEnabledToolIds as Fo}from"@buoy-gg/floating-tools-core";import{SettingsEventBus as Ro,settingsEventBus as Oo}from"@buoy-gg/floating-tools-core";export{Ut as ANIMATION_DURATION,zt as DIAL_BUTTON_SIZE,Ht as DIAL_GRID_LINE_COUNT,Gt as DIAL_ICON_PADDING,Vt as DIAL_ICON_SIZE,_t as DIAL_START_ANGLE,Nt as DRAG_THRESHOLD,C as DevToolsContext,Ee as DevToolsProvider,bt as DevToolsStateManager,wt as EDGE_PADDING,U as FloatingToolsContext,ie as FloatingToolsProvider,Et as FloatingToolsStore,Mt as MAX_DIAL_SLOTS,io as MAX_SETTINGS_DIAL_SLOTS,so as SETTINGS_STORAGE_KEY,I as SettingsContext,Ro as SettingsEventBus,ce as SettingsProvider,Lt as VISIBLE_HANDLE_WIDTH,Ao as canEnableDialTool,Po as countEnabledTools,Ct as devToolsReducer,xt as devToolsStateManager,Zt as dialAnimationConfig,qt as dialCSSBeziers,Kt as dialColors,Wt as dialStyles,It as easing,Co as enforceDialLimit,ht as floatingToolsColors,ho as generateDefaultSettings,Qt as generateDialCSSKeyframes,Yt as getAllIconPositions,jt as getDialCSSAnimationStyles,eo as getDialCSSKeyframesString,kt as getDialLayout,Fo as getEnabledToolIds,Bt as getGridLineRotations,Ft as getGripIconLayout,Xt as getIconAngle,Jt as getIconPosition,$t as getIconStaggerInputRange,to as getSpiralAnimationPosition,oo as getStaggeredIconProgress,To as getToolColor,fo as getToolDescription,po as getToolLabel,At as getUserStatusConfig,bo as globalSettingsConfig,Le as interleaveWithDividers,Rt as interpolate,Ot as interpolatePosition,Eo as mergeSettingsWithDefaults,yo as sanitizeFloatingSettings,go as settingsColors,Oo as settingsEventBus,uo as settingsStyles,ao as settingsTabs,So as toolColors,Do as toolDescriptions,vo as toolLabels,Ae as useDevTools,y as useDevToolsContext,Fe as useDevToolsDial,Pe as useDevToolsEnvironment,Ie as useDevToolsSettings,x as useDevToolsState,be as useDialState,j as useFloatingTools,se as useFloatingToolsContext,he as useOptionalDevToolsContext,de as useOptionalSettingsContext,b as useSettings,ve as useSettingsContext,xe as useSettingsModalState,Pt as withAlpha};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@buoy-gg/floating-tools-react",
+  "version": "1.7.2",
+  "description": "React bindings for floating tools - shared hooks and context for web and React Native",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --no-sourcemap --minify",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@buoy-gg/floating-tools-core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "~5.8.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  }
+}