@buoy-gg/core 1.7.7 → 1.7.8

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

@@ -0,0 +1,357 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+exports.FloatingTools = FloatingTools;
+exports.UserStatus = UserStatus;
+var _react = require("react");
+var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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)
+ */
+
+// Re-export for consumers
+
+// =============================
+// 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 = (0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.secondary, 'CC')
+}) {
+  const layout = (0, _floatingToolsReact.getGripIconLayout)(size);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: size,
+      height: size,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: [0, 1].map(col => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: col === 0 ? 0 : layout.columnGap
+      },
+      children: [0, 1, 2].map(row => /*#__PURE__*/(0, _jsxRuntime.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)
+// =============================
+function Divider() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      width: 1,
+      height: 12,
+      backgroundColor: (0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.muted, '66'),
+      flexShrink: 0
+    }
+  });
+}
+
+// =============================
+// UserStatus (web JSX)
+// =============================
+function UserStatus({
+  userRole,
+  onPress
+}) {
+  const {
+    isDragging
+  } = (0, _floatingToolsReact.useFloatingToolsContext)();
+  const config = (0, _floatingToolsReact.getUserStatusConfig)(userRole, _floatingToolsReact.floatingToolsColors);
+  const handleClick = e => {
+    if (!isDragging && onPress) {
+      e.stopPropagation();
+      onPress();
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: config.dotColor,
+        marginRight: 4
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      style: {
+        fontSize: 10,
+        fontWeight: 500,
+        color: config.textColor,
+        letterSpacing: 0.3
+      },
+      children: config.label
+    })]
+  });
+}
+
+// =============================
+// Web Animation Hook
+// =============================
+function useWebAnimation() {
+  const animationRef = (0, _react.useRef)(null);
+  const [position, setPosition] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const animateTo = (0, _react.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 / _floatingToolsReact.ANIMATION_DURATION, 1);
+      const newPosition = (0, _floatingToolsReact.interpolatePosition)(from, to, progress, _floatingToolsReact.easing.easeOutCubic);
+      setPosition(newPosition);
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate);
+      } else {
+        setPosition(to);
+        onComplete?.();
+      }
+    };
+    animationRef.current = requestAnimationFrame(animate);
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, []);
+  return {
+    position,
+    setPosition,
+    animateTo
+  };
+}
+
+// =============================
+// Main FloatingTools Component
+// =============================
+
+function FloatingTools({
+  enablePositionPersistence = true,
+  children
+}) {
+  const bubbleRef = (0, _react.useRef)(null);
+
+  // Use shared hook
+  const {
+    state,
+    actions,
+    isInitialized
+  } = (0, _floatingToolsReact.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
+  (0, _react.useEffect)(() => {
+    if (isInitialized) {
+      setAnimatedPosition(state.position);
+    }
+  }, [isInitialized, state.position, setAnimatedPosition]);
+
+  // Handle window resize
+  (0, _react.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] = (0, _react.useState)(false);
+  (0, _react.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] = (0, _react.useState)(false);
+  const handleMouseDown = (0, _react.useCallback)(e => {
+    e.preventDefault();
+    setIsMouseDown(true);
+    actions.handleDragStart({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+  }, [actions]);
+  const handleMouseMove = (0, _react.useCallback)(e => {
+    const result = actions.handleDragMove({
+      clientX: e.clientX,
+      clientY: e.clientY
+    });
+    if (result.isDragging) {
+      setAnimatedPosition(result.position);
+    }
+  }, [actions, setAnimatedPosition]);
+  const handleMouseUp = (0, _react.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]);
+  (0, _react.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 = (0, _react.useMemo)(() => (0, _floatingToolsReact.interleaveWithDividers)(_react.Children.toArray(children), key => /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}, key)), [children]);
+  return /*#__PURE__*/(0, _jsxRuntime.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: _floatingToolsReact.floatingToolsColors.panel,
+      borderRadius: 6,
+      borderWidth: state.isDragging ? 2 : 1,
+      borderStyle: 'solid',
+      borderColor: state.isDragging ? _floatingToolsReact.floatingToolsColors.dragActive : (0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.muted, '66'),
+      boxShadow: state.isDragging ? `0 6px 12px ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.dragActive, '99')}` : '0 4px 8px rgba(0, 0, 0, 0.3)',
+      userSelect: 'none',
+      touchAction: 'none'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.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: (0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.muted, '1A'),
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: _floatingToolsReact.VISIBLE_HANDLE_WIDTH,
+        borderRight: `1px solid ${(0, _floatingToolsReact.withAlpha)(_floatingToolsReact.floatingToolsColors.muted, '66')}`,
+        borderTopLeftRadius: 5,
+        borderBottomLeftRadius: 5,
+        cursor: state.isDragging ? 'grabbing' : 'grab'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GripVerticalIcon, {
+        size: 12
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsReact.FloatingToolsProvider, {
+      value: {
+        isDragging: state.isDragging,
+        isHidden: state.isHidden
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: {
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 6,
+          paddingRight: 8
+        },
+        children: actionsContent
+      })
+    })]
+  });
+}

package/lib/commonjs/index.js

@@ -215,7 +215,7 @@ Object.defineProperty(exports, "validateDialConfig", {
     return _defaultConfig.validateDialConfig;
   }
 });
-var _FloatingDevTools = require("./floatingMenu/FloatingDevTools.js");
+var _FloatingDevTools = require("./floatingMenu/FloatingDevTools");
 var _autoDiscoverPresets = require("./floatingMenu/autoDiscoverPresets.js");
 var _defaultConfig = require("./floatingMenu/defaultConfig.js");
 var _FloatingMenu = require("./floatingMenu/FloatingMenu.js");
@@ -231,7 +231,7 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-var _DevToolsSettingsModal = require("./floatingMenu/DevToolsSettingsModal.js");
+var _DevToolsSettingsModal = require("./floatingMenu/DevToolsSettingsModal");
 var _AppHost = require("./floatingMenu/AppHost.js");
 var _DevToolsVisibilityContext = require("./floatingMenu/DevToolsVisibilityContext.js");
 var _ToggleStateManager = require("./floatingMenu/ToggleStateManager.js");

package/lib/commonjs/index.web.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DialMenu", {
+  enumerable: true,
+  get: function () {
+    return _DialDevToolsWeb.DialMenu;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsWeb.Divider;
+  }
+});
+Object.defineProperty(exports, "FloatingDevTools", {
+  enumerable: true,
+  get: function () {
+    return _FloatingDevToolsWeb.FloatingDevTools;
+  }
+});
+Object.defineProperty(exports, "FloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsWeb.FloatingTools;
+  }
+});
+Object.defineProperty(exports, "SettingsModal", {
+  enumerable: true,
+  get: function () {
+    return _DevToolsSettingsModalWeb.SettingsModal;
+  }
+});
+Object.defineProperty(exports, "UserStatus", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsWeb.UserStatus;
+  }
+});
+Object.defineProperty(exports, "autoDiscoverWebPresets", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresetsWeb.autoDiscoverWebPresets;
+  }
+});
+Object.defineProperty(exports, "autoDiscoverWithCustom", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresetsWeb.autoDiscoverWithCustom;
+  }
+});
+Object.defineProperty(exports, "defaultToolPresets", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresetsWeb.defaultToolPresets;
+  }
+});
+Object.defineProperty(exports, "dialColors", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.dialColors;
+  }
+});
+Object.defineProperty(exports, "dialStyles", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.dialStyles;
+  }
+});
+Object.defineProperty(exports, "getEnabledTools", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresetsWeb.getEnabledTools;
+  }
+});
+Object.defineProperty(exports, "getToolColor", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.getToolColor;
+  }
+});
+Object.defineProperty(exports, "getToolDescription", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.getToolDescription;
+  }
+});
+Object.defineProperty(exports, "getToolLabel", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.getToolLabel;
+  }
+});
+Object.defineProperty(exports, "getToolsBySlot", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresetsWeb.getToolsBySlot;
+  }
+});
+Object.defineProperty(exports, "settingsColors", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.settingsColors;
+  }
+});
+Object.defineProperty(exports, "settingsStyles", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.settingsStyles;
+  }
+});
+Object.defineProperty(exports, "useFloatingTools", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.useFloatingTools;
+  }
+});
+Object.defineProperty(exports, "useSettings", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsReact.useSettings;
+  }
+});
+var _FloatingDevToolsWeb = require("./floatingMenu/FloatingDevTools.web.js");
+var _floatingToolsWeb = require("./floatingMenu/floatingTools.web.js");
+var _DialDevToolsWeb = require("./floatingMenu/dial/DialDevTools.web.js");
+var _DevToolsSettingsModalWeb = require("./floatingMenu/DevToolsSettingsModal.web.js");
+var _autoDiscoverPresetsWeb = require("./utils/autoDiscoverPresets.web.js");
+var _floatingToolsReact = require("@buoy-gg/floating-tools-react");

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

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.autoDiscoverWebPresets = autoDiscoverWebPresets;
+exports.autoDiscoverWithCustom = autoDiscoverWithCustom;
+exports.defaultToolPresets = void 0;
+exports.getEnabledTools = getEnabledTools;
+exports.getToolsBySlot = getToolsBySlot;
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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)
+ */
+
+// =============================
+// 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.
+ */
+const defaultToolPresets = exports.defaultToolPresets = [{
+  id: 'env',
+  name: 'ENV',
+  description: 'Environment variables debugger',
+  slot: 'both',
+  icon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.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__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.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
+ */
+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
+ */
+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
+ */
+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
+ */
+function getEnabledTools(tools, enabledIds) {
+  const idSet = enabledIds instanceof Set ? enabledIds : new Set(enabledIds);
+  return tools.filter(tool => idSet.has(tool.id));
+}

package/lib/module/floatingMenu/AppHost.js

@@ -5,7 +5,7 @@ import React, { createContext, useCallback, useContext, useMemo, useState, useEf
 import { BackHandler, Modal, StyleSheet, View } from "react-native";
 import { resolveOpenAppsState } from "./AppHostLogic.js";
 import { useMinimizedTools } from "./MinimizedToolsContext.js";
-import { useDevToolsSettings } from "./DevToolsSettingsModal.js";
+import { useDevToolsSettings } from "./DevToolsSettingsModal";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const AppHostContext = /*#__PURE__*/createContext(null);
 const STORAGE_KEY_OPEN_APPS = "@react_buoy_open_apps";