@buoy-gg/core 7.0.40 → 7.0.41

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

@@ -8,188 +8,15 @@ 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)
- */
-
-/**
- * Dashed-square glyph for debug-borders (no BIF brand icon exists for it
- * yet). Plain SVG so it renders identically everywhere — emoji icons are
- * banned here: WKWebView (Capacitor/Tauri) renders them as tofu boxes.
- */function DebugBordersGlyph({
-  size
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      x: "3",
-      y: "3",
-      width: "18",
-      height: "18",
-      rx: "2",
-      fill: "none",
-      stroke: "#10b981",
-      strokeWidth: "2",
-      strokeDasharray: "4 3"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-      x: "8",
-      y: "8",
-      width: "8",
-      height: "8",
-      rx: "1",
-      fill: "#10b98155"
-    })]
-  });
-}
-
-// =============================
-// 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.
- * Icons are the BIF brand icon components (same artwork as native) —
- * never emoji strings (tofu in WKWebView).
- */
-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: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
-    size: size
-  }),
-  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: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.QueryIcon, {
-    size: size
-  }),
-  color: '#FF4154'
-}, {
-  id: 'route-events',
-  name: 'ROUTES',
-  description: 'Route tracking & navigation inspector',
-  slot: 'both',
-  icon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RoutesIcon, {
-    size: size
-  }),
-  color: '#FF9F1C'
-}, {
-  id: 'highlight-updates',
-  name: 'RENDERS',
-  description: 'View component render tracking',
-  slot: 'dial',
-  icon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.RendersIcon, {
-    size: size
-  }),
-  color: '#10b981'
-}, {
-  id: 'debug-borders',
-  name: 'DEBUG BORDERS',
-  description: 'Component layout borders',
-  slot: 'dial',
-  icon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersGlyph, {
-    size: size
-  }),
-  color: '#10b981'
-}];
-
-// =============================
-// Auto-Discovery Functions
-// =============================
+/** Browser tools are registered through FloatingDevTools.apps. */
+const defaultToolPresets = exports.defaultToolPresets = [];
 
-/**
- * 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
- */
+/** @deprecated Pass explicitly imported presets through FloatingDevTools.apps. */
 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];
+  return [];
 }
-
-/**
- * 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];
+  return [...new Map(customTools.map(tool => [tool.id, tool])).values()];
 }
 
 /**

package/lib/commonjs/utils/createWebTool.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createWebTool = createWebTool;
+var _react = require("react");
+/** Adapt a shared tool preset to the browser menu's icon renderer. */
+
+function createWebTool(preset) {
+  const icon = preset.icon;
+  return {
+    ...preset,
+    icon: typeof icon === "function" ? size => /*#__PURE__*/(0, _react.createElement)(icon, {
+      size,
+      slot: preset.slot ?? "both",
+      color: preset.color
+    }) : () => icon
+  };
+}

package/lib/commonjs/utils/createWebTools.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createWebTools = createWebTools;
+var _sharedUi = _interopRequireWildcard(require("@buoy-gg/shared-ui"));
+var shared = _sharedUi;
+var _createWebTool = require("./createWebTool.js");
+var _DevToolsVisibilityContext = require("../floatingMenu/DevToolsVisibilityContext.js");
+var license = _interopRequireWildcard(require("@buoy-gg/license"));
+var dataViewer = _interopRequireWildcard(require("@buoy-gg/shared-ui/dataViewer"));
+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); }
+function createWebTools(modules) {
+  (0, _sharedUi.registerToolModules)({
+    core: {
+      useDevToolsVisibility: _DevToolsVisibilityContext.useDevToolsVisibility
+    },
+    license,
+    'shared-ui': shared,
+    'shared-ui/dataViewer': dataViewer,
+    ...modules
+  });
+  const seen = new Set();
+  return Object.values(modules).flatMap(module => Object.entries(module).flatMap(([name, value]) => {
+    if (!name.endsWith('Preset') || !value || typeof value.id !== 'string' || !value.component || seen.has(value.id)) return [];
+    seen.add(value.id);
+    return [(0, _createWebTool.createWebTool)(value)];
+  }));
+}

package/lib/commonjs/version.js

@@ -15,4 +15,4 @@ exports.SDK_VERSION = void 0;
  * Drift is prevented by a test that fails when this disagrees with
  * package.json, so a version bump that forgets this file cannot ship.
  */
-const SDK_VERSION = exports.SDK_VERSION = "7.0.40";
+const SDK_VERSION = exports.SDK_VERSION = "7.0.41";

package/lib/module/browserRegister.js

@@ -0,0 +1,44 @@
+"use strict";
+
+import * as ReactDevtools from 'react-devtools-core';
+
+/** Call before importing React DOM so render and element inspectors can see app roots. */
+export function registerBrowserDevTools(options = {}) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') return false;
+  const dev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
+  if (!dev && !options.enableInRelease) return false;
+  const target = window;
+  const previous = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  // Fast Refresh installs a minimal hook before the application's entry runs.
+  // Preserve its callbacks and renderer IDs when installing the full backend.
+  const refreshHook = previous && previous.supportsFiber && !previous.getFiberRoots && !previous.sub && Object.getOwnPropertyDescriptor(target, '__REACT_DEVTOOLS_GLOBAL_HOOK__')?.configurable;
+  if (refreshHook) delete target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!target.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
+    const initialize = ReactDevtools.initialize ?? ReactDevtools.default?.initialize;
+    initialize({
+      appendComponentStack: false,
+      breakOnConsoleErrors: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: false
+    });
+    if (refreshHook) {
+      const hook = target.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      const inject = hook.inject;
+      const ids = new Map();
+      hook.inject = renderer => {
+        const id = inject(renderer);
+        ids.set(id, previous.inject(renderer));
+        return id;
+      };
+      for (const name of ['onScheduleFiberRoot', 'onCommitFiberRoot', 'onCommitFiberUnmount']) {
+        const current = hook[name];
+        hook[name] = (id, ...args) => {
+          previous[name]?.(ids.get(id) ?? id, ...args);
+          return current?.(id, ...args);
+        };
+      }
+    }
+  }
+  return Boolean(target.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+}
+registerBrowserDevTools();

package/lib/module/browserRegister.server.js

@@ -0,0 +1,6 @@
+"use strict";
+
+/** The server entry does not load the browser's React DevTools backend. */
+export function registerBrowserDevTools(_options = {}) {
+  return false;
+}

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

@@ -1,36 +1,20 @@
 "use strict";
 
 /**
- * AppHost.web.tsx — DOM port of AppHost.tsx (React Native).
- *
- * Same state machine (shared `AppHostLogic.ts`), same `@react_buoy_open_apps`
- * persistence key + JSON shape (`{id, minimized}[]`, 500ms debounce), same
- * launch modes and z-order model (base 9000 + stack index).
- *
- * Intentional deviations from the native file (all logged):
- * - No `MinimizedToolsContext`/`MinimizedToolsStack` second store: the
- *   minimized dock derives directly from `openApps` (`minimized === true`),
- *   the same simplification the Flutter port made deliberately
- *   (packages-flutter/buoy_core — see FLUTTER_TOOLS_PORT/MASTER_PLAN.md).
- *   `@react_buoy_minimized_tools` is therefore not written on web.
- * - `BackHandler` (Android hardware back) → `Escape` keydown closes the
- *   top-most open tool.
- * - No `setExpandableWindowControls` / global settings bridge — the web
- *   settings modal has no global-settings tab yet.
- * - `minimizeTargetPosition` is computed from the dock layout below instead
- *   of `MinimizedToolsContext.getNextIconPosition()`.
- *
- * @platform React DOM Web
+ * Browser tool host using the shared open-app state machine and persistence.
+ * Minimized tools derive from openApps. Escape closes the top visible tool;
+ * the minimized stack remains attached to the floating menu.
  */
 import { persistentStorage } from "@buoy-gg/shared-ui";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { resolveOpenAppsState } from "./AppHostLogic.js";
 import { renderAppIcon } from "./AppIcon";
+import { ToolModalShell } from "./ToolHost.js";
+import { useDevToolsSettings } from "./DevToolsSettingsModal.shared.js";
 import { getBubbleAnchorPosition } from "./floatingTools.web.js";
 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";
-const PERSISTENCE_DELAY = 500;
 
 // Minimized dock geometry — mirrors MinimizedToolsContext.tsx constants.
 const ICON_SIZE = 44;
@@ -52,9 +36,11 @@ export const AppHostProvider = ({
 }) => {
   const [openApps, setOpenApps] = useState([]);
   const [isRestored, setIsRestored] = useState(false);
-  const persistenceTimeoutRef = useRef(null);
   const installedAppsRef = useRef([]);
   const pendingRestoreRef = useRef(null);
+  const restoredRef = useRef(false);
+  const storageReadRef = useRef(false);
+  const registeredRef = useRef(false);
   const open = useCallback(def => {
     let resolvedId = "";
     setOpenApps(current => {
@@ -68,8 +54,8 @@ export const AppHostProvider = ({
     return resolvedId;
   }, []);
   const tryRestorePending = useCallback(() => {
-    if (isRestored) return;
-    if (!installedAppsRef.current.length) return;
+    if (restoredRef.current || !storageReadRef.current || !registeredRef.current) return;
+    restoredRef.current = true;
     const pendingApps = pendingRestoreRef.current;
     if (!pendingApps || pendingApps.length === 0) {
       setIsRestored(true);
@@ -92,8 +78,9 @@ export const AppHostProvider = ({
           title: appDef.name,
           component: appDef.component,
           props: appDef.props,
+          modal: appDef.modal,
           launchMode: appDef.launchMode || "self-modal",
-          singleton: appDef.singleton,
+          singleton: appDef.singleton ?? true,
           icon: resolvedIcon,
           color: appDef.color,
           minimized
@@ -101,14 +88,16 @@ export const AppHostProvider = ({
       }
     });
     setIsRestored(true);
-  }, [isRestored, open]);
+  }, [open]);
 
   // Restore open apps on mount. Handles both the legacy `string[]` shape and
   // the current `{id, minimized}[]` shape — same tolerance as native.
   useEffect(() => {
+    let cancelled = false;
     const restoreOpenApps = async () => {
       try {
         const saved = await persistentStorage.getItem(STORAGE_KEY_OPEN_APPS);
+        if (cancelled) return;
         if (saved) {
           const parsed = JSON.parse(saved);
           let savedApps;
@@ -119,46 +108,40 @@ export const AppHostProvider = ({
                 minimized: false
               }));
             } else {
-              savedApps = parsed;
+              savedApps = parsed.filter(item => typeof item === "object" && item !== null && typeof item.id === "string");
             }
             if (savedApps.length) {
               pendingRestoreRef.current = savedApps;
-              tryRestorePending();
-              return;
             }
           }
         }
       } catch {
         // Failed to restore open apps - continue with fresh state
       }
-      setIsRestored(true);
+      if (cancelled) return;
+      storageReadRef.current = true;
+      tryRestorePending();
+    };
+    void restoreOpenApps();
+    return () => {
+      cancelled = true;
     };
-    restoreOpenApps();
   }, [tryRestorePending]);
 
-  // Save open apps with debounce
+  // Save discrete open/minimize/close changes before a reload can lose them.
   useEffect(() => {
     if (!isRestored) return;
-    if (persistenceTimeoutRef.current) {
-      clearTimeout(persistenceTimeoutRef.current);
-    }
-    persistenceTimeoutRef.current = setTimeout(() => {
-      const appStates = openApps.map(app => ({
-        id: app.id,
-        minimized: app.minimized ?? false
-      }));
-      persistentStorage.setItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
-    }, PERSISTENCE_DELAY);
-    return () => {
-      if (persistenceTimeoutRef.current) {
-        clearTimeout(persistenceTimeoutRef.current);
-      }
-    };
+    const appStates = openApps.map(app => ({
+      id: app.id,
+      minimized: app.minimized ?? false
+    }));
+    void persistentStorage.setItem(STORAGE_KEY_OPEN_APPS, JSON.stringify(appStates));
   }, [openApps, isRestored]);
 
   // Store reference to installed apps for restoration
   const registerApps = useCallback(apps => {
     installedAppsRef.current = apps;
+    registeredRef.current = true;
     tryRestorePending();
   }, [tryRestorePending]);
   const close = useCallback(instanceId => {
@@ -169,16 +152,18 @@ export const AppHostProvider = ({
     });
   }, []);
   const closeAll = useCallback(() => setOpenApps([]), []);
-  const minimize = useCallback(instanceId => {
+  const minimize = useCallback((instanceId, restoreState) => {
     setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
       ...app,
-      minimized: true
+      minimized: true,
+      restoreState
     } : app));
   }, []);
-  const restore = useCallback(instanceId => {
+  const restore = useCallback((instanceId, restoreState) => {
     setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
       ...app,
-      minimized: false
+      minimized: false,
+      restoreState: restoreState ?? app.restoreState
     } : app));
   }, []);
   const isMinimized = useCallback(instanceId => {
@@ -193,11 +178,13 @@ export const AppHostProvider = ({
     if (!hasVisibleApps) return;
     const handler = event => {
       if (event.key !== "Escape") return;
-      close();
+      if (event.defaultPrevented) return;
+      const top = [...openApps].reverse().find(app => app.launchMode !== "toggle-only" && !app.minimized);
+      if (top) close(top.instanceId);
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [hasVisibleApps, close]);
+  }, [hasVisibleApps, close, openApps]);
   const value = useMemo(() => ({
     openApps,
     isAnyOpen: hasVisibleApps,
@@ -267,20 +254,41 @@ const AppRenderer = ({
   zIndex,
   onClose,
   onMinimize,
-  minimizeTargetPosition
+  minimizeTargetPosition,
+  enableSharedModalDimensions
 }) => {
   const Comp = app.component;
   const isVisible = !app.minimized;
+  const bodyProps = {
+    ...(app.props ?? {}),
+    ...(enableSharedModalDimensions ? {
+      enableSharedModalDimensions: true
+    } : {})
+  };
+  if (app.modal && (!app.launchMode || app.launchMode === "self-modal")) {
+    return /*#__PURE__*/_jsx(ToolModalShell, {
+      app: app,
+      config: app.modal,
+      visible: isVisible,
+      zIndex: zIndex,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      initialModalState: app.restoreState,
+      enableSharedModalDimensions: enableSharedModalDimensions,
+      bodyProps: bodyProps
+    });
+  }
   if (app.launchMode === "self-modal") {
     return /*#__PURE__*/_jsx(Comp, {
-      ...(app.props ?? {}),
+      ...bodyProps,
       visible: isVisible,
       onClose: onClose,
       onRequestClose: onClose,
       onMinimize: onMinimize,
       minimizeTargetPosition: minimizeTargetPosition,
       instanceId: app.instanceId,
-      zIndex: zIndex
+      zIndex: zIndex,
+      initialModalState: app.restoreState
     });
   }
   if (app.launchMode === "inline") {
@@ -296,7 +304,7 @@ const AppRenderer = ({
         pointerEvents: "none"
       },
       children: /*#__PURE__*/_jsx(Comp, {
-        ...(app.props ?? {}),
+        ...bodyProps,
         onClose: onClose,
         onMinimize: onMinimize,
         minimizeTargetPosition: minimizeTargetPosition,
@@ -315,7 +323,7 @@ const AppRenderer = ({
     children: /*#__PURE__*/_jsx("div", {
       style: cardStyle,
       children: /*#__PURE__*/_jsx(Comp, {
-        ...(app.props ?? {}),
+        ...bodyProps,
         onClose: onClose,
         onMinimize: onMinimize,
         minimizeTargetPosition: minimizeTargetPosition,
@@ -337,6 +345,9 @@ export const AppOverlay = () => {
     close,
     minimize
   } = useAppHost();
+  const {
+    settings
+  } = useDevToolsSettings();
   const renderableApps = openApps.filter(app => app.launchMode !== "toggle-only");
   if (renderableApps.length === 0) return null;
   const minimizedCount = renderableApps.filter(app => app.minimized).length;
@@ -349,7 +360,8 @@ export const AppOverlay = () => {
       app: app,
       zIndex: BASE_ZINDEX + index,
       onClose: () => close(app.instanceId),
-      onMinimize: () => minimize(app.instanceId),
+      onMinimize: state => minimize(app.instanceId, state),
+      enableSharedModalDimensions: settings.globalSettings?.enableSharedModalDimensions === true,
       minimizeTargetPosition: minimizeTarget
     }, app.instanceId))
   });