@buoy-gg/core 1.7.7 → 2.1.1

package/lib/module/floatingMenu/floatingTools.web.js

@@ -0,0 +1,357 @@
+"use strict";
+
+/**
+ * FloatingTools - Web renderer using shared React bindings.
+ *
+ * This file contains ONLY web-specific code (React DOM):
+ * - Mouse event handling
+ * - requestAnimationFrame animation
+ * - Web JSX (div, span)
+ * - localStorage adapter
+ *
+ * All logic is shared via @buoy-gg/floating-tools-react
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+
+import { useState, useRef, useCallback, useEffect, useMemo, Children } from 'react';
+import {
+// Hook and context
+useFloatingTools, FloatingToolsProvider, useFloatingToolsContext, interleaveWithDividers,
+// Utils from core (re-exported)
+floatingToolsColors, withAlpha, getUserStatusConfig, getGripIconLayout, interpolatePosition, easing, VISIBLE_HANDLE_WIDTH, ANIMATION_DURATION
+// Types
+} from '@buoy-gg/floating-tools-react';
+
+// Re-export for consumers
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================
+// Web Storage Adapter
+// =============================
+const webStorageAdapter = {
+  getItem: key => localStorage.getItem(key),
+  setItem: (key, value) => localStorage.setItem(key, value)
+};
+
+// =============================
+// GripVerticalIcon (web JSX)
+// =============================
+function GripVerticalIcon({
+  size = 24,
+  color = withAlpha(floatingToolsColors.secondary, 'CC')
+}) {
+  const layout = getGripIconLayout(size);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: size,
+      height: size,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: [0, 1].map(col => /*#__PURE__*/_jsx("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: col === 0 ? 0 : layout.columnGap
+      },
+      children: [0, 1, 2].map(row => /*#__PURE__*/_jsx("div", {
+        style: {
+          width: layout.dotSize,
+          height: layout.dotSize,
+          borderRadius: layout.dotSize / 2,
+          backgroundColor: color,
+          marginTop: row === 0 ? 0 : layout.rowGap
+        }
+      }, row))
+    }, col))
+  });
+}
+
+// =============================
+// Divider (web JSX)
+// =============================
+export function Divider() {
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width: 1,
+      height: 12,
+      backgroundColor: withAlpha(floatingToolsColors.muted, '66'),
+      flexShrink: 0
+    }
+  });
+}
+
+// =============================
+// UserStatus (web JSX)
+// =============================
+export function UserStatus({
+  userRole,
+  onPress
+}) {
+  const {
+    isDragging
+  } = useFloatingToolsContext();
+  const config = getUserStatusConfig(userRole, floatingToolsColors);
+  const handleClick = e => {
+    if (!isDragging && onPress) {
+      e.stopPropagation();
+      onPress();
+    }
+  };
+  return /*#__PURE__*/_jsxs("button", {
+    role: "button",
+    "aria-label": `User status: ${config.label}`,
+    onClick: handleClick,
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 8,
+      paddingRight: 8,
+      flexShrink: 0,
+      cursor: onPress && !isDragging ? 'pointer' : 'default',
+      background: 'none',
+      border: 'none'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: config.dotColor,
+        marginRight: 4
+      }
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        fontSize: 10,
+        fontWeight: 500,
+        color: config.textColor,
+        letterSpacing: 0.3
+      },
+      children: config.label
+    })]
+  });
+}
+
+// =============================
+// Web Animation Hook
+// =============================
+function useWebAnimation() {
+  const animationRef = useRef(null);
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const animateTo = useCallback((from, to, onComplete) => {
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    const startTime = performance.now();
+    const animate = currentTime => {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
+      const newPosition = interpolatePosition(from, to, progress, easing.easeOutCubic);
+      setPosition(newPosition);
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate);
+      } else {
+        setPosition(to);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animate);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  return {
+    position,
+    setPosition,
+    animateTo
+  };
+}
+
+// =============================
+// Main FloatingTools Component
+// =============================
+
+export function FloatingTools({
+  enablePositionPersistence = true,
+  children
+}) {
+  const bubbleRef = useRef(null);
+
+  // Use shared hook
+  const {
+    state,
+    actions,
+    isInitialized
+  } = useFloatingTools({
+    screenSize: {
+      width: window.innerWidth,
+      height: window.innerHeight
+    },
+    enablePositionPersistence,
+    storage: webStorageAdapter
+  });
+
+  // Web-specific animation
+  const {
+    position: animatedPosition,
+    setPosition: setAnimatedPosition,
+    animateTo
+  } = useWebAnimation();
+
+  // Sync position when initialized
+  useEffect(() => {
+    if (isInitialized) {
+      setAnimatedPosition(state.position);
+    }
+  }, [isInitialized, state.position, setAnimatedPosition]);
+
+  // Handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      actions.setScreenSize(window.innerWidth, window.innerHeight);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [actions]);
+
+  // Update bubble size on layout
+  const [bubbleMeasured, setBubbleMeasured] = useState(false);
+  useEffect(() => {
+    if (!bubbleMeasured && bubbleRef.current) {
+      const rect = bubbleRef.current.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0) {
+        actions.setBubbleSize({
+          width: rect.width,
+          height: rect.height
+        });
+        setBubbleMeasured(true);
+      }
+    }
+  }, [bubbleMeasured, actions]);
+
+  // Web-specific: mouse event handling
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const handleMouseDown = useCallback(e => {
+    e.preventDefault();
+    setIsMouseDown(true);
+    actions.handleDragStart({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+  }, [actions]);
+  const handleMouseMove = useCallback(e => {
+    const result = actions.handleDragMove({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+    if (result.isDragging) {
+      setAnimatedPosition(result.position);
+    }
+  }, [actions, setAnimatedPosition]);
+  const handleMouseUp = useCallback(e => {
+    setIsMouseDown(false);
+    const result = actions.handleDragEnd({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+    if (result.wasTap) {
+      const toggleResult = actions.toggleHideShow();
+      animateTo(state.position, toggleResult.targetPosition, () => {
+        actions.commitPosition(toggleResult.targetPosition);
+      });
+    } else if (result.shouldHide) {
+      animateTo(state.position, result.position, () => {
+        actions.commitPosition(result.position);
+      });
+    }
+  }, [actions, animateTo, state.position]);
+  useEffect(() => {
+    if (isMouseDown) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isMouseDown, handleMouseMove, handleMouseUp]);
+
+  // Interleave children with dividers
+  const actionsContent = useMemo(() => interleaveWithDividers(Children.toArray(children), key => /*#__PURE__*/_jsx(Divider, {}, key)), [children]);
+  return /*#__PURE__*/_jsxs("div", {
+    ref: bubbleRef,
+    role: "toolbar",
+    "aria-label": "Floating Tools",
+    style: {
+      position: 'fixed',
+      left: animatedPosition.x,
+      top: animatedPosition.y,
+      zIndex: 9999,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: floatingToolsColors.panel,
+      borderRadius: 6,
+      borderWidth: state.isDragging ? 2 : 1,
+      borderStyle: 'solid',
+      borderColor: state.isDragging ? floatingToolsColors.dragActive : withAlpha(floatingToolsColors.muted, '66'),
+      boxShadow: state.isDragging ? `0 6px 12px ${withAlpha(floatingToolsColors.dragActive, '99')}` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+      userSelect: 'none',
+      touchAction: 'none'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      role: "slider",
+      "aria-label": "Drag handle",
+      "aria-valuetext": `Position: ${Math.round(animatedPosition.x)}, ${Math.round(animatedPosition.y)}`,
+      tabIndex: 0,
+      onMouseDown: handleMouseDown,
+      style: {
+        paddingLeft: 6,
+        paddingRight: 6,
+        paddingTop: 6,
+        paddingBottom: 6,
+        backgroundColor: withAlpha(floatingToolsColors.muted, '1A'),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: VISIBLE_HANDLE_WIDTH,
+        borderRight: `1px solid ${withAlpha(floatingToolsColors.muted, '66')}`,
+        borderTopLeftRadius: 5,
+        borderBottomLeftRadius: 5,
+        cursor: state.isDragging ? 'grabbing' : 'grab'
+      },
+      children: /*#__PURE__*/_jsx(GripVerticalIcon, {
+        size: 12
+      })
+    }), /*#__PURE__*/_jsx(FloatingToolsProvider, {
+      value: {
+        isDragging: state.isDragging,
+        isHidden: state.isHidden
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          paddingRight: 8
+        },
+        children: actionsContent
+      })
+    })]
+  });
+}

package/lib/module/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // Export unified component - primary interface
-export { FloatingDevTools } from "./floatingMenu/FloatingDevTools.js";
+export { FloatingDevTools } from "./floatingMenu/FloatingDevTools";
 // Export auto-discovery utilities
 export { autoDiscoverPresets, autoDiscoverPresetsWithCustom } from "./floatingMenu/autoDiscoverPresets.js";
 
@@ -10,7 +10,7 @@ export { createDefaultConfig, validateDialConfig, isFloatingToolId, isDialToolId
 // Export FloatingMenu and its types
 export { FloatingMenu } from "./floatingMenu/FloatingMenu.js";
 export * from "./floatingMenu/types.js";
-export { DevToolsSettingsModal, useDevToolsSettings } from "./floatingMenu/DevToolsSettingsModal.js";
+export { DevToolsSettingsModal, useDevToolsSettings } from "./floatingMenu/DevToolsSettingsModal";
 // Export AppHost components for advanced use cases
 export { AppHostProvider, AppOverlay, useAppHost } from "./floatingMenu/AppHost.js";
 

package/lib/module/index.web.js

@@ -0,0 +1,24 @@
+"use strict";
+
+/**
+ * @buoy-gg/core - Web Entry Point
+ *
+ * This is the entry point for React DOM Web apps (Vite, CRA, Next.js, Electron).
+ * Bundlers will automatically resolve this file over index.tsx for web builds.
+ *
+ * @platform React DOM Web
+ */
+
+// Export unified component - primary interface (web version)
+export { FloatingDevTools } from "./floatingMenu/FloatingDevTools.web.js";
+// Export individual web components for advanced use cases
+export { FloatingTools, UserStatus, Divider } from "./floatingMenu/floatingTools.web.js";
+export { DialMenu } from "./floatingMenu/dial/DialDevTools.web.js";
+export { SettingsModal } from "./floatingMenu/DevToolsSettingsModal.web.js";
+// Export auto-discovery utilities (web version)
+export { autoDiscoverWebPresets, autoDiscoverWithCustom, getToolsBySlot, getEnabledTools, defaultToolPresets } from "./utils/autoDiscoverPresets.web.js";
+
+// Re-export types from floating-tools-react for convenience
+
+// Re-export commonly used utilities from floating-tools-react
+export { useSettings, useFloatingTools, getToolLabel, getToolDescription, getToolColor, settingsColors, settingsStyles, dialColors, dialStyles } from "@buoy-gg/floating-tools-react";

package/lib/module/utils/autoDiscoverPresets.web.js

@@ -0,0 +1,174 @@
+"use strict";
+
+/**
+ * Auto-discovery utility for React DOM Web.
+ *
+ * Uses Vite's import.meta.glob to discover installed @buoy-gg/* packages
+ * at build time. This provides Metro-like auto-discovery behavior for web.
+ *
+ * How it works:
+ * 1. import.meta.glob scans node_modules at build time
+ * 2. Only packages that are actually installed are included
+ * 3. Missing packages don't cause errors (like Metro's try-catch)
+ * 4. Custom tools can override discovered ones by ID
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+
+import { NetworkIcon, EnvIcon } from '@buoy-gg/floating-tools-core';
+
+// =============================
+// Default Tool Presets (Fallback)
+// =============================
+
+/**
+ * Default tool presets for when packages don't export web presets yet.
+ * These will be used until each @buoy-gg/* package exports its own preset.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const defaultToolPresets = [{
+  id: 'env',
+  name: 'ENV',
+  description: 'Environment variables debugger',
+  slot: 'both',
+  icon: size => /*#__PURE__*/_jsx(EnvIcon, {
+    size: size
+  }),
+  color: '#4AFF9F'
+}, {
+  id: 'storage',
+  name: 'STORAGE',
+  description: 'AsyncStorage browser',
+  slot: 'both',
+  icon: '💾',
+  color: '#BA68C8'
+}, {
+  id: 'network',
+  name: 'NET',
+  description: 'Network request logger',
+  slot: 'both',
+  icon: size => /*#__PURE__*/_jsx(NetworkIcon, {
+    size: size
+  }),
+  color: '#4AFF9F'
+}, {
+  id: 'query',
+  name: 'QUERY',
+  description: 'React Query inspector',
+  slot: 'both',
+  icon: '🔍',
+  color: '#FF4154'
+}, {
+  id: 'route-events',
+  name: 'ROUTES',
+  description: 'Route tracking & navigation inspector',
+  slot: 'both',
+  icon: '🗺️',
+  color: '#FF9F1C'
+}, {
+  id: 'highlight-updates',
+  name: 'RENDERS',
+  description: 'View component render tracking',
+  slot: 'dial',
+  icon: '✨',
+  color: '#10b981'
+}, {
+  id: 'debug-borders',
+  name: 'DEBUG BORDERS',
+  description: 'Component layout borders',
+  slot: 'dial',
+  icon: '📐',
+  color: '#10b981'
+}, {
+  id: 'benchmark',
+  name: 'BENCHMARK',
+  description: 'Performance benchmarks',
+  slot: 'dial',
+  icon: '⚡',
+  color: '#F59E0B'
+}];
+
+// =============================
+// Auto-Discovery Functions
+// =============================
+
+/**
+ * Auto-discover installed @buoy-gg/* tool packages.
+ *
+ * Uses Vite's import.meta.glob to find packages at build time.
+ * Only installed packages are included (no errors for missing ones).
+ *
+ * Note: Until packages export web presets, this returns default presets.
+ *
+ * @returns Array of discovered tool configurations
+ */
+export function autoDiscoverWebPresets() {
+  // TODO: When @buoy-gg/* packages export web presets, use import.meta.glob:
+  //
+  // const modules = import.meta.glob(
+  //   '/node_modules/@buoy-gg/*/dist/preset.{js,mjs}',
+  //   { eager: true, import: 'default' }
+  // );
+  //
+  // const presets: WebToolConfig[] = [];
+  // for (const [path, preset] of Object.entries(modules)) {
+  //   if (preset && typeof preset === 'object' && 'id' in preset) {
+  //     presets.push(preset as WebToolConfig);
+  //   }
+  // }
+  // return presets;
+
+  // For now, return default presets
+  return [...defaultToolPresets];
+}
+
+/**
+ * Merge custom tools with auto-discovered ones.
+ *
+ * Custom tools take precedence - if a custom tool has the same ID as
+ * a discovered tool, the custom one is used (same behavior as mobile).
+ *
+ * @param customTools - Custom tools to merge (optional)
+ * @returns Merged array with custom tools taking precedence
+ */
+export function autoDiscoverWithCustom(customTools = []) {
+  const discovered = autoDiscoverWebPresets();
+  if (customTools.length === 0) {
+    return discovered;
+  }
+
+  // Create set of custom tool IDs for quick lookup
+  const customIds = new Set(customTools.map(t => t.id));
+
+  // Filter out discovered tools that have custom overrides
+  const filteredDiscovered = discovered.filter(t => !customIds.has(t.id));
+
+  // Custom tools first, then remaining discovered
+  return [...customTools, ...filteredDiscovered];
+}
+
+/**
+ * Get tools filtered by slot.
+ *
+ * @param tools - Array of tool configurations
+ * @param slot - Slot to filter by ('dial' or 'row')
+ * @returns Filtered array of tools that can appear in the specified slot
+ */
+export function getToolsBySlot(tools, slot) {
+  return tools.filter(tool => {
+    const toolSlot = tool.slot || 'both';
+    return toolSlot === 'both' || toolSlot === slot;
+  });
+}
+
+/**
+ * Get enabled tools based on settings.
+ *
+ * @param tools - Array of all tool configurations
+ * @param enabledIds - Set or array of enabled tool IDs
+ * @returns Filtered array of enabled tools
+ */
+export function getEnabledTools(tools, enabledIds) {
+  const idSet = enabledIds instanceof Set ? enabledIds : new Set(enabledIds);
+  return tools.filter(tool => idSet.has(tool.id));
+}

package/lib/typescript/commonjs/floatingMenu/DevToolsSettingsModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolsSettingsModal.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/DevToolsSettingsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,EAAE,EAAE,MAAM,OAAO,CAAC;AA8MtE;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4EAA4E;IAC5E,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,uFAAuF;IACvF,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QACvC,WAAW,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,kDAAkD;IAClD,cAAc,CAAC,EAAE,sBAAsB,CAAC;CACzC;AAED,UAAU,0BAA0B;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxD,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,aAAa,CAAC,EAAE;QACd,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;KAChC,EAAE,CAAC;CACL;AAsDD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAgrChE,CAAC;AAiDF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAuD/B,CAAC"}
+{"version":3,"file":"DevToolsSettingsModal.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/DevToolsSettingsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6C,EAAE,EAAE,MAAM,OAAO,CAAC;AA4MtE;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4EAA4E;IAC5E,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,uFAAuF;IACvF,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;QACvC,WAAW,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,kDAAkD;IAClD,cAAc,CAAC,EAAE,sBAAsB,CAAC;CACzC;AAED,UAAU,0BAA0B;IAClC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACxD,eAAe,CAAC,EAAE,gBAAgB,CAAC;IACnC,aAAa,CAAC,EAAE;QACd,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;KAChC,EAAE,CAAC;CACL;AA0DD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkrChE,CAAC;AAwDF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB;;;CAuD/B,CAAC"}

package/lib/typescript/commonjs/floatingMenu/DevToolsSettingsModal.web.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DevToolsSettingsModal - Web renderer for the dev tools settings modal.
+ *
+ * Uses shared configuration and logic from @buoy-gg/floating-tools-react.
+ * Platform-specific: CSS, mouse events, web JSX.
+ *
+ * This follows the same pattern as DialDevTools - all colors, labels, descriptions,
+ * and styling constants come from the shared core package.
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+import { type AvailableToolConfig, type DevToolsSettings, type StorageAdapter } from '@buoy-gg/floating-tools-react';
+export interface SettingsModalProps {
+    visible: boolean;
+    onClose: () => void;
+    availableTools?: AvailableToolConfig[];
+    defaultFloatingTools?: string[];
+    defaultDialTools?: string[];
+    storage?: StorageAdapter;
+    onSettingsChange?: (settings: DevToolsSettings) => void;
+}
+export declare function SettingsModal({ visible, onClose, availableTools, defaultFloatingTools, defaultDialTools, storage, onSettingsChange, }: SettingsModalProps): import("react").JSX.Element | null;
+//# sourceMappingURL=DevToolsSettingsModal.web.d.ts.map

package/lib/typescript/commonjs/floatingMenu/DevToolsSettingsModal.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevToolsSettingsModal.web.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/DevToolsSettingsModal.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAiBL,KAAK,mBAAmB,EACxB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EAEpB,MAAM,+BAA+B,CAAC;AAOvC,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACvC,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACzD;AAoQD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,OAAO,EACP,cAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,OAA2B,EAC3B,gBAAgB,GACjB,EAAE,kBAAkB,sCAiYpB"}

package/lib/typescript/commonjs/floatingMenu/FloatingDevTools.d.ts

@@ -222,5 +222,5 @@ export interface FloatingDevToolsProps extends Omit<FloatingMenuProps, "apps"> {
  *
  * @param props - FloatingDevTools props
  */
-export declare const FloatingDevTools: ({ apps, requiredEnvVars, requiredStorageKeys, children, disableHints, defaultFloatingTools, defaultDialTools, ...props }: FloatingDevToolsProps) => React.JSX.Element;
+export declare const FloatingDevTools: ({ apps, requiredEnvVars, requiredStorageKeys, children, disableHints, defaultFloatingTools, defaultDialTools, ...props }: FloatingDevToolsProps) => React.JSX.Element | null;
 //# sourceMappingURL=FloatingDevTools.d.ts.map

package/lib/typescript/commonjs/floatingMenu/FloatingDevTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingDevTools.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/FloatingDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EAEvB,MAAM,iBAAiB,CAAC;AAIzB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GACD;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,OAAO,GACP,KAAK,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEN;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC1C;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC5E;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;IAEjC;;;;;;;;;;;;OAYG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEzC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,CAAC;IAE7C;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IAErC;;;;;;;;;;;;;;;;OAgBG;IACH,qBAAqB,CAAC,EAAE,OAAO,oBAAoB,EAAE,WAAW,EAAE,CAAC;IAEnE;;;;;;;;;;;;;OAaG;IACH,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,oBAAoB,EAAE,WAAW,KAAK,IAAI,CAAC;CAEvF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,gBAAgB,GAAI,0HAS9B,qBAAqB,sBAuIvB,CAAC"}
+{"version":3,"file":"FloatingDevTools.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/FloatingDevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMtE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EAEvB,MAAM,iBAAiB,CAAC;AAIzB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,GACpB,MAAM,GACN;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GACD;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EACR,QAAQ,GACR,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,OAAO,GACP,KAAK,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEN;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC1C;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC5E;;;;;OAKG;IACH,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC;IAEtB;;;;;;;;;;;;;;OAcG;IACH,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;IAEjC;;;;;;;;;;;;OAYG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAEzC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;;;;;;;;OAaG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,CAAC;IAE7C;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC;IAErC;;;;;;;;;;;;;;;;OAgBG;IACH,qBAAqB,CAAC,EAAE,OAAO,oBAAoB,EAAE,WAAW,EAAE,CAAC;IAEnE;;;;;;;;;;;;;OAaG;IACH,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,oBAAoB,EAAE,WAAW,KAAK,IAAI,CAAC;CAEvF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,eAAO,MAAM,gBAAgB,GAAI,0HAS9B,qBAAqB,6BAmJvB,CAAC"}

package/lib/typescript/commonjs/floatingMenu/FloatingDevTools.web.d.ts

@@ -0,0 +1,48 @@
+/**
+ * FloatingDevTools - Unified dev tools component for React DOM Web.
+ *
+ * Matches the mobile FloatingDevTools API exactly:
+ * - Self-contained (doesn't wrap your app)
+ * - Auto-discovers installed tool packages
+ * - Manages dial menu and settings modal state internally
+ *
+ * Usage (same as mobile):
+ * ```tsx
+ * <>
+ *   <YourApp />
+ *   <FloatingDevTools environment="qa" userRole="admin" />
+ * </>
+ * ```
+ *
+ * @platform React DOM Web (Vite, CRA, Next.js, Electron)
+ */
+import { type WebToolConfig, type Environment, type UserRole } from '@buoy-gg/floating-tools-react';
+export interface FloatingDevToolsProps {
+    /** Current environment (local, dev, qa, staging, prod) */
+    environment?: Environment;
+    /** Current user role (admin, internal, user) */
+    userRole?: UserRole;
+    /** Available environments for switching */
+    availableEnvironments?: Environment[];
+    /** Callback when environment is switched */
+    onEnvironmentSwitch?: (env: Environment) => void;
+    /** Custom tools to add (will be merged with auto-discovered) */
+    apps?: WebToolConfig[];
+    /** Disable onboarding hints (not implemented yet) */
+    disableHints?: boolean;
+}
+/**
+ * Unified FloatingDevTools component - self-contained, no wrapping required.
+ *
+ * Matches mobile API exactly:
+ * ```tsx
+ * // Mobile
+ * <FloatingDevTools environment="qa" userRole={userRole} />
+ *
+ * // Web (this component)
+ * <FloatingDevTools environment="qa" userRole="admin" />
+ * ```
+ */
+export declare function FloatingDevTools({ environment: _environment, userRole, availableEnvironments: _availableEnvironments, onEnvironmentSwitch: _onEnvironmentSwitch, apps, disableHints: _disableHints, }: FloatingDevToolsProps): import("react").JSX.Element;
+export type { WebToolConfig, Environment, UserRole };
+//# sourceMappingURL=FloatingDevTools.web.d.ts.map

package/lib/typescript/commonjs/floatingMenu/FloatingDevTools.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingDevTools.web.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/FloatingDevTools.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,WAAW,EAChB,KAAK,QAAQ,EAId,MAAM,+BAA+B,CAAC;AAUvC,MAAM,WAAW,qBAAqB;IAEpC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,WAAW,EAAE,CAAC;IACtC,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IAGjD,gEAAgE;IAChE,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC;IAGvB,qDAAqD;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,WAAW,EAAE,YAAY,EACzB,QAAQ,EACR,qBAAqB,EAAE,sBAAsB,EAC7C,mBAAmB,EAAE,oBAAoB,EACzC,IAAI,EACJ,YAAY,EAAE,aAAa,GAC5B,EAAE,qBAAqB,+BA8GvB;AAMD,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}