@buoy-gg/core 7.0.15 → 7.0.16

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -2,9 +2,9 @@
 
 import React, { useMemo, useCallback, useEffect, useState } from "react";
 import { View, StyleSheet } from "react-native";
-import { AppHostProvider } from "./AppHost.js";
+import { AppHostProvider } from "./AppHost";
 import { FloatingMenu } from "./FloatingMenu.js";
-import { AppOverlay } from "./AppHost.js";
+import { AppOverlay } from "./AppHost";
 import { autoDiscoverPresets, autoDiscoverPresetsWithCustom } from "./autoDiscoverPresets.js";
 import { DevToolsVisibilityProvider } from "./DevToolsVisibilityContext.js";
 import { reportOptionalRequireError } from "./optionalRequire.js";

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

@@ -19,50 +19,107 @@
  * @platform React DOM Web (Vite, CRA, Next.js, Electron)
  */
 
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
 import { useSettings, getToolLabel, getToolDescription, getToolColor } from '@buoy-gg/floating-tools-react';
+import { persistentStorage, devToolsStorageKeys, EnvironmentIndicator, EnvironmentSelectorInline } from '@buoy-gg/shared-ui';
 import { autoDiscoverWithCustom, getToolsBySlot } from "../utils/autoDiscoverPresets.web.js";
 import { FloatingTools, UserStatus } from "./floatingTools.web.js";
 import { DialMenu } from "./dial/DialDevTools.web.js";
 import { getRankedToolIds, recordToolUsage } from "./dial/dialUsageStore.js";
+import { OnboardingTooltip } from "./dial/OnboardingTooltip.web.js";
 import { SettingsModal } from "./DevToolsSettingsModal.web.js";
+import { AppHostProvider, AppOverlay, useAppHost } from "./AppHost.web.js";
+import { MinimizedToolsStack } from "./MinimizedToolsStack.web.js";
+
+// native FloatingMenu.tsx TOOLTIP_SHOWN_KEY
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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
 // =============================
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
+// =============================
+// 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__*/_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__*/_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" />
- * ```
- */
-export function FloatingDevTools({
-  environment: _environment,
+export 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__*/_jsx(AppHostProvider, {
+    children: /*#__PURE__*/_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] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const stateRestoredRef = useRef(false);
+  const appHost = useAppHost();
 
   // Auto-discover tools and merge with custom apps
   const tools = useMemo(() => 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;
+  useEffect(() => {
+    registerApps(tools);
+  }, [registerApps, tools]);
+
   // Convert to available tools config for settings
   const availableToolsConfig = useMemo(() => tools.map(tool => ({
     id: tool.id,
@@ -72,11 +129,62 @@ export 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.
-  useSettings({
-    availableTools: availableToolsConfig
+  // settings modal and the bubble-row visibility gating).
+  const {
+    settings
+  } = useSettings({
+    availableTools: availableToolsConfig,
+    storage: webSettingsStorage
   });
 
+  // Dial/settings open-state persistence — native FloatingMenu.tsx:95-122 and
+  // DialDevTools.tsx:136-164 restore these across reloads.
+  useEffect(() => {
+    let cancelled = false;
+    const restore = async () => {
+      const [dialOpen, settingsOpen] = await Promise.all([persistentStorage.getItem(devToolsStorageKeys.dial.isOpen()), persistentStorage.getItem(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;
+    };
+  }, []);
+  useEffect(() => {
+    if (!stateRestoredRef.current) return;
+    void persistentStorage.setItem(devToolsStorageKeys.dial.isOpen(), isDialOpen ? 'true' : 'false');
+  }, [isDialOpen]);
+  useEffect(() => {
+    if (!stateRestoredRef.current) return;
+    void persistentStorage.setItem(devToolsStorageKeys.settings.modalOpen(), isSettingsOpen ? 'true' : 'false');
+  }, [isSettingsOpen]);
+
+  // Shared open path for dial + bubble-row tools.
+  const openTool = useCallback(tool => {
+    void 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 || getToolLabel(tool.id),
+        component: tool.component,
+        props: tool.props,
+        launchMode: tool.launchMode || 'self-modal',
+        singleton: tool.singleton ?? true,
+        icon: dockIcon,
+        color: tool.color || 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 = useMemo(() => {
@@ -91,22 +199,26 @@ export function FloatingDevTools({
         // It's a render function - call it with size
         icon = tool.icon(32);
       } else {
-        icon = '🔧';
+        icon = null;
       }
       return {
         id: tool.id,
-        name: 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 || 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 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.
@@ -116,6 +228,10 @@ export function FloatingDevTools({
     return 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 = useMemo(() => 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 = useMemo(() => tools.map(tool => ({
     id: tool.id,
@@ -124,31 +240,124 @@ export 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] = useState(false);
+  const isAnyToolOpen = appHost.openApps.some(app => !app.minimized);
+  useEffect(() => {
+    if (disableHints) return;
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      const seen = await persistentStorage.getItem(MENU_TOOLTIP_KEY);
+      if (!cancelled && !seen) setShowWelcomeTooltip(true);
+    }, 1000);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [disableHints]);
+  const dismissWelcomeTooltip = useCallback(() => {
+    setShowWelcomeTooltip(false);
+    void persistentStorage.setItem(MENU_TOOLTIP_KEY, 'true');
+  }, []);
+
   // Callbacks
-  const handleOpenDial = useCallback(() => setIsDialOpen(true), []);
-  const handleCloseDial = useCallback(() => setIsDialOpen(false), []);
-  const handleOpenSettings = useCallback(() => {
+  const handleOpenDial = useCallback(() => {
+    // Opening the dial dismisses the welcome tooltip (native handleDialOpen).
+    if (showWelcomeTooltip) dismissWelcomeTooltip();
+    setIsDialOpen(true);
+  }, [showWelcomeTooltip, dismissWelcomeTooltip]);
+  const handleCloseDial = 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 = useCallback(() => {
+    setIsSettingsOpen(open => !open);
   }, []);
   const handleCloseSettings = 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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(FloatingTools, {
-      enablePositionPersistence: true,
-      children: userRole && /*#__PURE__*/_jsx(UserStatus, {
+    children: [welcomeActive && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'fixed',
+        inset: 0,
+        backgroundColor: 'rgba(0,0,0,0.85)',
+        zIndex: 10000
+      }
+    }), /*#__PURE__*/_jsxs(FloatingTools, {
+      enablePositionPersistence: !welcomeActive,
+      pushToSide: isDialOpen || isAnyToolOpen,
+      suspendPointerEvents: isDialOpen,
+      centerOnboarding: welcomeActive,
+      minimizedStack: hasMinimizedTools ? /*#__PURE__*/_jsx(MinimizedToolsStack, {}) : undefined,
+      hasMinimizedStack: hasMinimizedTools,
+      children: [environment && environmentEnabled && !showEnvironmentSelector && /*#__PURE__*/_jsx(EnvironmentIndicator, {
+        environment: environment
+      }), showEnvironmentSelector && environmentEnabled && /*#__PURE__*/_jsx(EnvironmentSelectorInline, {
+        currentEnvironment: environment ?? 'local',
+        availableEnvironments: availableEnvironments,
+        onSelect: onEnvironmentSwitch
+      }), userRole ? /*#__PURE__*/_jsx(UserStatus, {
         userRole: userRole,
         onPress: handleOpenDial
-      })
+      }) :
+      /*#__PURE__*/
+      // native MenuLauncherIcon fallback: dial stays reachable without a
+      // userRole pill.
+      _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__*/_jsx(MenuLauncherIcon, {})
+      }), rowTools.map(tool =>
+      /*#__PURE__*/
+      // native FloatingMenu fab: paddingH 6, paddingV 4, r6, transparent
+      _jsx("button", {
+        "aria-label": tool.name || 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__*/_jsx(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__*/_jsx(DialMenu, {
       icons: rankedDialIcons,
       onClose: handleCloseDial,
       centerLabel: "BUOY",
-      onCenterPress: handleOpenSettings
+      onCenterPress: handleCenterPress,
+      settingsOpen: isSettingsOpen,
+      hintsDisabled: disableHints
     }), /*#__PURE__*/_jsx(SettingsModal, {
       visible: isSettingsOpen,
       onClose: handleCloseSettings,
@@ -156,7 +365,7 @@ export function FloatingDevTools({
       onSettingsChange: _newSettings => {
         // Settings are already saved by the hook
       }
-    })]
+    }), /*#__PURE__*/_jsx(AppOverlay, {})]
   });
 }
 

package/lib/module/floatingMenu/FloatingMenu.js

@@ -7,10 +7,10 @@ import { FloatingTools, UserStatus } from "./floatingTools";
 import { DialDevTools } from "./dial/DialDevTools";
 import { EnvironmentIndicator, persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { useDevToolsSettings } from "./DevToolsSettingsModal";
-import { useAppHost } from "./AppHost.js";
+import { useAppHost } from "./AppHost";
 import { useDevToolsVisibility } from "./DevToolsVisibilityContext.js";
 import { toggleStateManager } from "./ToggleStateManager.js";
-import { OnboardingTooltip } from "./dial/OnboardingTooltip.js";
+import { OnboardingTooltip } from "./dial/OnboardingTooltip";
 
 /**
  * Props for the floating developer tools launcher. Controls which apps are shown and

package/lib/module/floatingMenu/MinimizedToolsContext.js

@@ -8,9 +8,8 @@ import { persistentStorage, getSafeAreaInsets } from "@buoy-gg/shared-ui";
 // 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