@buoy-gg/core 7.0.15 → 7.0.17

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingDevTools = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
-var _AppHost = require("./AppHost.js");
+var _AppHost = require("./AppHost");
 var _FloatingMenu = require("./FloatingMenu.js");
 var _autoDiscoverPresets = require("./autoDiscoverPresets.js");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");

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

@@ -6,11 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.FloatingDevTools = FloatingDevTools;
 var _react = require("react");
 var _floatingToolsReact = require("@buoy-gg/floating-tools-react");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _autoDiscoverPresetsWeb = require("../utils/autoDiscoverPresets.web.js");
 var _floatingToolsWeb = require("./floatingTools.web.js");
 var _DialDevToolsWeb = require("./dial/DialDevTools.web.js");
 var _dialUsageStore = require("./dial/dialUsageStore.js");
+var _OnboardingTooltipWeb = require("./dial/OnboardingTooltip.web.js");
 var _DevToolsSettingsModalWeb = require("./DevToolsSettingsModal.web.js");
+var _AppHostWeb = require("./AppHost.web.js");
+var _MinimizedToolsStackWeb = require("./MinimizedToolsStack.web.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * FloatingDevTools - Unified dev tools component for React DOM Web.
@@ -31,42 +35,94 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @platform React DOM Web (Vite, CRA, Next.js, Electron)
  */
 
+// native FloatingMenu.tsx TOOLTIP_SHOWN_KEY
+const MENU_TOOLTIP_KEY = '@react_buoy_floating_menu_tooltip_shown';
+
+// Same localStorage adapter the settings modal uses — without it, useSettings
+// never loads persisted settings and this instance sits on defaults across
+// launches (live changes still arrive via the settings event bus).
+const webSettingsStorage = {
+  getItem: key => localStorage.getItem(key),
+  setItem: (key, value) => localStorage.setItem(key, value)
+};
+
 // =============================
 // Types
 // =============================
 
+// =============================
+// MenuLauncherIcon — native FloatingMenu.tsx:446-478: 3×3 dot grid rendered
+// when no userRole is set, so the dial/settings stay reachable.
+// =============================
+function MenuLauncherIcon({
+  size = 14,
+  color = '#20C997'
+}) {
+  const dot = Math.max(2, size / 4);
+  const gap = Math.max(1, size / 16);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: `repeat(3, ${dot}px)`,
+      gap,
+      width: size,
+      height: size,
+      alignContent: 'center',
+      justifyContent: 'center'
+    },
+    children: Array.from({
+      length: 9
+    }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: dot,
+        height: dot,
+        borderRadius: dot / 2,
+        backgroundColor: color
+      }
+    }, i))
+  });
+}
+
 // =============================
 // Main Component
 // =============================
 
-/**
- * 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" />
- * ```
- */
-function FloatingDevTools({
-  environment: _environment,
+function FloatingDevTools(props) {
+  // The tool host wraps everything so dial presses can open tool components
+  // into the AppOverlay (web twin of the native AppHostProvider/AppOverlay).
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppHostProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingDevToolsInner, {
+      ...props
+    })
+  });
+}
+function FloatingDevToolsInner({
+  environment,
   userRole,
-  availableEnvironments: _availableEnvironments,
-  onEnvironmentSwitch: _onEnvironmentSwitch,
+  availableEnvironments,
+  onEnvironmentSwitch,
   apps,
-  disableHints: _disableHints,
+  disableHints = false,
   headless = false
 }) {
   // Internal state for dial and settings
   const [isDialOpen, setIsDialOpen] = (0, _react.useState)(false);
   const [isSettingsOpen, setIsSettingsOpen] = (0, _react.useState)(false);
+  const stateRestoredRef = (0, _react.useRef)(false);
+  const appHost = (0, _AppHostWeb.useAppHost)();
 
   // Auto-discover tools and merge with custom apps
   const tools = (0, _react.useMemo)(() => (0, _autoDiscoverPresetsWeb.autoDiscoverWithCustom)(apps), [apps]);
 
+  // Let the host restore `@react_buoy_open_apps` from the previous session
+  // once it knows which tools exist (native registerApps parity).
+  const {
+    registerApps
+  } = appHost;
+  (0, _react.useEffect)(() => {
+    registerApps(tools);
+  }, [registerApps, tools]);
+
   // Convert to available tools config for settings
   const availableToolsConfig = (0, _react.useMemo)(() => tools.map(tool => ({
     id: tool.id,
@@ -76,11 +132,62 @@ function FloatingDevTools({
   })), [tools]);
 
   // Register available tools with the shared settings hook (used by the
-  // settings modal). The dial no longer reads per-tool show/hide state.
-  (0, _floatingToolsReact.useSettings)({
-    availableTools: availableToolsConfig
+  // settings modal and the bubble-row visibility gating).
+  const {
+    settings
+  } = (0, _floatingToolsReact.useSettings)({
+    availableTools: availableToolsConfig,
+    storage: webSettingsStorage
   });
 
+  // Dial/settings open-state persistence — native FloatingMenu.tsx:95-122 and
+  // DialDevTools.tsx:136-164 restore these across reloads.
+  (0, _react.useEffect)(() => {
+    let cancelled = false;
+    const restore = async () => {
+      const [dialOpen, settingsOpen] = await Promise.all([_sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.dial.isOpen()), _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.settings.modalOpen())]);
+      if (cancelled) return;
+      if (dialOpen === 'true') setIsDialOpen(true);
+      if (settingsOpen === 'true') {
+        setIsDialOpen(true); // settings lives above the dial (native structure)
+        setIsSettingsOpen(true);
+      }
+      stateRestoredRef.current = true;
+    };
+    void restore();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!stateRestoredRef.current) return;
+    void _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.dial.isOpen(), isDialOpen ? 'true' : 'false');
+  }, [isDialOpen]);
+  (0, _react.useEffect)(() => {
+    if (!stateRestoredRef.current) return;
+    void _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.settings.modalOpen(), isSettingsOpen ? 'true' : 'false');
+  }, [isSettingsOpen]);
+
+  // Shared open path for dial + bubble-row tools.
+  const openTool = (0, _react.useCallback)(tool => {
+    void (0, _dialUsageStore.recordToolUsage)(tool.id);
+    if (tool.component) {
+      const dockIcon = typeof tool.icon === 'function' ? tool.icon(20) : tool.icon;
+      appHost.open({
+        id: tool.id,
+        title: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
+        component: tool.component,
+        props: tool.props,
+        launchMode: tool.launchMode || 'self-modal',
+        singleton: tool.singleton ?? true,
+        icon: dockIcon,
+        color: tool.color || (0, _floatingToolsReact.getToolColor)(tool.id)
+      });
+    } else {
+      tool.onPress?.();
+    }
+  }, [appHost]);
+
   // Build dial icons for every dial-eligible tool. The dial paginates and
   // ranks them by usage, so there is no per-tool show/hide setting.
   const dialIcons = (0, _react.useMemo)(() => {
@@ -95,22 +202,26 @@ function FloatingDevTools({
         // It's a render function - call it with size
         icon = tool.icon(32);
       } else {
-        icon = '🔧';
+        icon = null;
       }
       return {
         id: tool.id,
-        name: (0, _floatingToolsReact.getToolLabel)(tool.id),
+        // The tool's own name wins (native parity); the registry label is
+        // the fallback for preset tools that don't set one.
+        name: tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
         icon,
+        // Preset tools with no component and no onPress can't do anything on
+        // web — render them like native's uninstalled tools ("Unavailable"
+        // caption, non-interactive) instead of a tile that silently no-ops.
+        unavailable: !tool.component && !tool.onPress,
         color,
         onPress: () => {
-          // Record usage so frequently/recently used tools rank toward page 1.
-          void (0, _dialUsageStore.recordToolUsage)(tool.id);
-          tool.onPress?.();
+          openTool(tool);
           setIsDialOpen(false);
         }
       };
     });
-  }, [tools]);
+  }, [tools, openTool]);
 
   // Snapshot the usage-ranked order each time the dial opens. It stays stable
   // while open so icons don't jump positions mid-interaction.
@@ -120,6 +231,10 @@ function FloatingDevTools({
     return (0, _dialUsageStore.getRankedToolIds)(dialIcons.map(i => i.id)).map(id => byId.get(id)).filter(i => Boolean(i));
   }, [isDialOpen, dialIcons]);
 
+  // Bubble-row tools — native FloatingMenu.tsx:349-386: slot !== 'dial',
+  // explicitly enabled in settings, rendered as small icon buttons.
+  const rowTools = (0, _react.useMemo)(() => (0, _autoDiscoverPresetsWeb.getToolsBySlot)(tools, 'row').filter(tool => settings.floatingTools[tool.id] === true && (tool.component || tool.onPress)), [tools, settings.floatingTools]);
+
   // Build available tools for settings modal
   const availableTools = (0, _react.useMemo)(() => tools.map(tool => ({
     id: tool.id,
@@ -128,31 +243,124 @@ function FloatingDevTools({
     slot: tool.slot
   })), [tools]);
 
+  // Welcome tooltip — native FloatingMenu.tsx:134-157: 1000ms after mount,
+  // once ever, only while nothing else is open; the bubble centers under the
+  // arrow while it shows.
+  const [showWelcomeTooltip, setShowWelcomeTooltip] = (0, _react.useState)(false);
+  const isAnyToolOpen = appHost.openApps.some(app => !app.minimized);
+  (0, _react.useEffect)(() => {
+    if (disableHints) return;
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      const seen = await _sharedUi.persistentStorage.getItem(MENU_TOOLTIP_KEY);
+      if (!cancelled && !seen) setShowWelcomeTooltip(true);
+    }, 1000);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [disableHints]);
+  const dismissWelcomeTooltip = (0, _react.useCallback)(() => {
+    setShowWelcomeTooltip(false);
+    void _sharedUi.persistentStorage.setItem(MENU_TOOLTIP_KEY, 'true');
+  }, []);
+
   // Callbacks
-  const handleOpenDial = (0, _react.useCallback)(() => setIsDialOpen(true), []);
-  const handleCloseDial = (0, _react.useCallback)(() => setIsDialOpen(false), []);
-  const handleOpenSettings = (0, _react.useCallback)(() => {
+  const handleOpenDial = (0, _react.useCallback)(() => {
+    // Opening the dial dismisses the welcome tooltip (native handleDialOpen).
+    if (showWelcomeTooltip) dismissWelcomeTooltip();
+    setIsDialOpen(true);
+  }, [showWelcomeTooltip, dismissWelcomeTooltip]);
+  const handleCloseDial = (0, _react.useCallback)(() => {
     setIsDialOpen(false);
-    setIsSettingsOpen(true);
+    setIsSettingsOpen(false); // settings lives above the dial
+  }, []);
+  // Center press toggles settings while the dial STAYS OPEN underneath —
+  // the center label flips to CLOSE/SETTINGS (native DialDevTools behavior).
+  const handleCenterPress = (0, _react.useCallback)(() => {
+    setIsSettingsOpen(open => !open);
   }, []);
   const handleCloseSettings = (0, _react.useCallback)(() => setIsSettingsOpen(false), []);
+  const showEnvironmentSelector = Boolean(availableEnvironments?.length && onEnvironmentSwitch);
+  const environmentEnabled = settings.floatingTools.environment !== false;
+  const welcomeActive = showWelcomeTooltip && !isDialOpen && !isAnyToolOpen;
+  const hasMinimizedTools = appHost.openApps.some(app => app.minimized && app.launchMode !== 'toggle-only');
 
   // Headless: desktop sync is native-only, so there is nothing to mount on
   // web — accept the prop for API parity and render nothing. (After all
   // hooks so hook order is preserved.)
   if (headless) return null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsWeb.FloatingTools, {
-      enablePositionPersistence: true,
-      children: userRole && /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsWeb.UserStatus, {
+    children: [welcomeActive && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.85)',
+        zIndex: 10000
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_floatingToolsWeb.FloatingTools, {
+      enablePositionPersistence: !welcomeActive,
+      pushToSide: isDialOpen || isAnyToolOpen,
+      suspendPointerEvents: isDialOpen,
+      centerOnboarding: welcomeActive,
+      minimizedStack: hasMinimizedTools ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MinimizedToolsStackWeb.MinimizedToolsStack, {}) : undefined,
+      hasMinimizedStack: hasMinimizedTools,
+      children: [environment && environmentEnabled && !showEnvironmentSelector && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EnvironmentIndicator, {
+        environment: environment
+      }), showEnvironmentSelector && environmentEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EnvironmentSelectorInline, {
+        currentEnvironment: environment ?? 'local',
+        availableEnvironments: availableEnvironments,
+        onSelect: onEnvironmentSwitch
+      }), userRole ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsWeb.UserStatus, {
         userRole: userRole,
         onPress: handleOpenDial
-      })
+      }) :
+      /*#__PURE__*/
+      // native MenuLauncherIcon fallback: dial stays reachable without a
+      // userRole pill.
+      (0, _jsxRuntime.jsx)("button", {
+        "aria-label": "Open dev tools",
+        onClick: handleOpenDial,
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '6px 8px',
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer'
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuLauncherIcon, {})
+      }), rowTools.map(tool =>
+      /*#__PURE__*/
+      // native FloatingMenu fab: paddingH 6, paddingV 4, r6, transparent
+      (0, _jsxRuntime.jsx)("button", {
+        "aria-label": tool.name || (0, _floatingToolsReact.getToolLabel)(tool.id),
+        title: tool.description,
+        onClick: () => openTool(tool),
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '4px 6px',
+          borderRadius: 6,
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer'
+        },
+        children: typeof tool.icon === 'function' ? tool.icon(16) : tool.icon
+      }, tool.id))]
+    }), welcomeActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OnboardingTooltipWeb.OnboardingTooltip, {
+      title: "Welcome to Buoy!",
+      message: "Grab and position this menu wherever you want, then tap the icon to open your tools.",
+      onDismiss: dismissWelcomeTooltip
     }), isDialOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialDevToolsWeb.DialMenu, {
       icons: rankedDialIcons,
       onClose: handleCloseDial,
       centerLabel: "BUOY",
-      onCenterPress: handleOpenSettings
+      onCenterPress: handleCenterPress,
+      settingsOpen: isSettingsOpen,
+      hintsDisabled: disableHints
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DevToolsSettingsModalWeb.SettingsModal, {
       visible: isSettingsOpen,
       onClose: handleCloseSettings,
@@ -160,7 +368,7 @@ function FloatingDevTools({
       onSettingsChange: _newSettings => {
         // Settings are already saved by the hook
       }
-    })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppHostWeb.AppOverlay, {})]
   });
 }
 

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -10,10 +10,10 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingTools = require("./floatingTools");
 var _DialDevTools = require("./dial/DialDevTools");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
-var _AppHost = require("./AppHost.js");
+var _AppHost = require("./AppHost");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
 var _ToggleStateManager = require("./ToggleStateManager.js");
-var _OnboardingTooltip = require("./dial/OnboardingTooltip.js");
+var _OnboardingTooltip = require("./dial/OnboardingTooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -186,7 +186,8 @@ const FloatingMenu = ({
         launchMode: app.launchMode ?? "self-modal",
         singleton: app.singleton ?? true,
         icon: resolvedIcon,
-        color: app.color
+        color: app.color,
+        modal: app.modal
       });
     }
   };

package/lib/commonjs/floatingMenu/MinimizedToolsContext.js

@@ -16,9 +16,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Types
 // ============================================================================
 
-/**
- * Modal state to restore when reopening a minimized tool
- */
+// Type moved to the platform-free AppHostLogic.ts (so the web host can use
+// it without importing this react-native file); re-exported for back-compat.
 
 /**
  * Represents a minimized tool that can be restored