@buoy-gg/core 7.0.14 → 7.0.16

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

@@ -25,6 +25,39 @@ var _jsxRuntime = require("react/jsx-runtime");
  * @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)
 // =============================
@@ -32,6 +65,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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',
@@ -47,7 +82,9 @@ const defaultToolPresets = exports.defaultToolPresets = [{
   name: 'STORAGE',
   description: 'AsyncStorage browser',
   slot: 'both',
-  icon: '💾',
+  icon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.StorageIcon, {
+    size: size
+  }),
   color: '#BA68C8'
 }, {
   id: 'network',
@@ -63,28 +100,36 @@ const defaultToolPresets = exports.defaultToolPresets = [{
   name: 'QUERY',
   description: 'React Query inspector',
   slot: 'both',
-  icon: '🔍',
+  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: '🗺️',
+  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: '✨',
+  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: '📐',
+  icon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(DebugBordersGlyph, {
+    size: size
+  }),
   color: '#10b981'
 }];
 

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

@@ -0,0 +1,351 @@
+"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
+ */
+import { persistentStorage } from "@buoy-gg/shared-ui";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { resolveOpenAppsState } from "./AppHostLogic.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;
+const ICON_GAP = 12;
+const BOTTOM_OFFSET = 100;
+const RIGHT_OFFSET = 16;
+const dockIconPosition = index => ({
+  x: window.innerWidth - ICON_SIZE - RIGHT_OFFSET,
+  y: window.innerHeight - BOTTOM_OFFSET - ICON_SIZE - index * (ICON_SIZE + ICON_GAP)
+});
+
+/**
+ * Provides the floating dev tools application host for web. Tracks open tool
+ * instances, restores persisted state, and exposes the same imperative
+ * helpers as the native `AppHostProvider`.
+ */
+export const AppHostProvider = ({
+  children
+}) => {
+  const [openApps, setOpenApps] = useState([]);
+  const [isRestored, setIsRestored] = useState(false);
+  const persistenceTimeoutRef = useRef(null);
+  const installedAppsRef = useRef([]);
+  const pendingRestoreRef = useRef(null);
+  const open = useCallback(def => {
+    let resolvedId = "";
+    setOpenApps(current => {
+      const {
+        apps,
+        instanceId
+      } = resolveOpenAppsState(current, def, () => `${def.id}-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+      resolvedId = instanceId;
+      return apps;
+    });
+    return resolvedId;
+  }, []);
+  const tryRestorePending = useCallback(() => {
+    if (isRestored) return;
+    if (!installedAppsRef.current.length) return;
+    const pendingApps = pendingRestoreRef.current;
+    if (!pendingApps || pendingApps.length === 0) {
+      setIsRestored(true);
+      return;
+    }
+    pendingRestoreRef.current = null;
+    pendingApps.forEach(({
+      id: appId,
+      minimized
+    }) => {
+      const appDef = installedAppsRef.current.find(app => app.id === appId);
+      if (appDef && appDef.component) {
+        const resolvedIcon = typeof appDef.icon === "function" ? appDef.icon(20) : appDef.icon;
+        open({
+          id: appDef.id,
+          title: appDef.name,
+          component: appDef.component,
+          props: appDef.props,
+          launchMode: appDef.launchMode || "self-modal",
+          singleton: appDef.singleton,
+          icon: resolvedIcon,
+          color: appDef.color,
+          minimized
+        });
+      }
+    });
+    setIsRestored(true);
+  }, [isRestored, open]);
+
+  // Restore open apps on mount. Handles both the legacy `string[]` shape and
+  // the current `{id, minimized}[]` shape — same tolerance as native.
+  useEffect(() => {
+    const restoreOpenApps = async () => {
+      try {
+        const saved = await persistentStorage.getItem(STORAGE_KEY_OPEN_APPS);
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          let savedApps;
+          if (Array.isArray(parsed) && parsed.length > 0) {
+            if (typeof parsed[0] === "string") {
+              savedApps = parsed.map(id => ({
+                id,
+                minimized: false
+              }));
+            } else {
+              savedApps = parsed;
+            }
+            if (savedApps.length) {
+              pendingRestoreRef.current = savedApps;
+              tryRestorePending();
+              return;
+            }
+          }
+        }
+      } catch {
+        // Failed to restore open apps - continue with fresh state
+      }
+      setIsRestored(true);
+    };
+    restoreOpenApps();
+  }, [tryRestorePending]);
+
+  // Save open apps with debounce
+  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);
+      }
+    };
+  }, [openApps, isRestored]);
+
+  // Store reference to installed apps for restoration
+  const registerApps = useCallback(apps => {
+    installedAppsRef.current = apps;
+    tryRestorePending();
+  }, [tryRestorePending]);
+  const close = useCallback(instanceId => {
+    setOpenApps(s => {
+      if (!s.length) return s;
+      if (!instanceId) return s.slice(0, -1);
+      return s.filter(a => a.instanceId !== instanceId);
+    });
+  }, []);
+  const closeAll = useCallback(() => setOpenApps([]), []);
+  const minimize = useCallback(instanceId => {
+    setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
+      ...app,
+      minimized: true
+    } : app));
+  }, []);
+  const restore = useCallback(instanceId => {
+    setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
+      ...app,
+      minimized: false
+    } : app));
+  }, []);
+  const isMinimized = useCallback(instanceId => {
+    const app = openApps.find(a => a.instanceId === instanceId);
+    return app?.minimized ?? false;
+  }, [openApps]);
+
+  // Escape closes the top-most open tool — web analog of the native
+  // hardware-back handler.
+  const hasVisibleApps = openApps.some(app => app.launchMode !== "toggle-only" && !app.minimized);
+  useEffect(() => {
+    if (!hasVisibleApps) return;
+    const handler = event => {
+      if (event.key !== "Escape") return;
+      close();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [hasVisibleApps, close]);
+  const value = useMemo(() => ({
+    openApps,
+    isAnyOpen: hasVisibleApps,
+    open,
+    close,
+    closeAll,
+    registerApps,
+    minimize,
+    restore,
+    isMinimized
+  }), [openApps, hasVisibleApps, open, close, closeAll, registerApps, minimize, restore, isMinimized]);
+  return /*#__PURE__*/_jsx(AppHostContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+/**
+ * Accessor hook for the web app host. Falls back to a no-op implementation
+ * when rendered outside the provider — same contract as native.
+ */
+export const useAppHost = () => {
+  const ctx = useContext(AppHostContext);
+  if (!ctx) {
+    return {
+      openApps: [],
+      isAnyOpen: false,
+      open: () => "",
+      close: () => {},
+      closeAll: () => {},
+      registerApps: () => {},
+      minimize: () => {},
+      restore: () => {},
+      isMinimized: () => false
+    };
+  }
+  return ctx;
+};
+
+// Base z-index for tool surfaces — parity with native AppOverlay.
+const BASE_ZINDEX = 9000;
+// The dock sits above tool panels but below the dial/settings overlays (10000).
+
+const backdropStyle = {
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0,0,0,0.28)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+const cardStyle = {
+  maxHeight: "90%",
+  width: "94%",
+  borderRadius: 12,
+  backgroundColor: "white",
+  overflow: "hidden"
+};
+
+/**
+ * Renders a single app instance — DOM twin of the native `AppRenderer`.
+ * Keeps the component mounted while minimized (visible={false} /
+ * display:none) so tool state and listeners survive, like native.
+ */
+const AppRenderer = ({
+  app,
+  zIndex,
+  onClose,
+  onMinimize,
+  minimizeTargetPosition
+}) => {
+  const Comp = app.component;
+  const isVisible = !app.minimized;
+  if (app.launchMode === "self-modal") {
+    return /*#__PURE__*/_jsx(Comp, {
+      ...(app.props ?? {}),
+      visible: isVisible,
+      onClose: onClose,
+      onRequestClose: onClose,
+      onMinimize: onMinimize,
+      minimizeTargetPosition: minimizeTargetPosition,
+      instanceId: app.instanceId,
+      zIndex: zIndex
+    });
+  }
+  if (app.launchMode === "inline") {
+    if (!isVisible) return null;
+    // pointerEvents:none matches native box-none: the layer never eats input;
+    // inline tool components opt back in with pointerEvents:auto on their own
+    // interactive surfaces.
+    return /*#__PURE__*/_jsx("div", {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex,
+        pointerEvents: "none"
+      },
+      children: /*#__PURE__*/_jsx(Comp, {
+        ...(app.props ?? {}),
+        onClose: onClose,
+        onMinimize: onMinimize,
+        minimizeTargetPosition: minimizeTargetPosition,
+        instanceId: app.instanceId
+      })
+    });
+  }
+
+  // host-modal mode
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      ...backdropStyle,
+      zIndex,
+      display: isVisible ? "flex" : "none"
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      style: cardStyle,
+      children: /*#__PURE__*/_jsx(Comp, {
+        ...(app.props ?? {}),
+        onClose: onClose,
+        onMinimize: onMinimize,
+        minimizeTargetPosition: minimizeTargetPosition,
+        instanceId: app.instanceId
+      })
+    })
+  });
+};
+
+/**
+ * Renders all open dev tool surfaces — DOM twin of the native `AppOverlay`.
+ * Later-opened tools stack on top (base z 9000 + index). Minimized tools are
+ * shown by the MinimizedToolsStack fused to the floating bubble (native
+ * parity) — the old fixed bottom-right MinimizedDock was replaced by it.
+ */
+export const AppOverlay = () => {
+  const {
+    openApps,
+    close,
+    minimize
+  } = useAppHost();
+  const renderableApps = openApps.filter(app => app.launchMode !== "toggle-only");
+  if (renderableApps.length === 0) return null;
+  const minimizedCount = renderableApps.filter(app => app.minimized).length;
+
+  // Minimize animation shrinks toward the bubble (where the stack lives);
+  // fall back to the legacy dock slot if the bubble hasn't mounted yet.
+  const minimizeTarget = getBubbleAnchorPosition() ?? dockIconPosition(minimizedCount);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: renderableApps.map((app, index) => /*#__PURE__*/_jsx(AppRenderer, {
+      app: app,
+      zIndex: BASE_ZINDEX + index,
+      onClose: () => close(app.instanceId),
+      onMinimize: () => minimize(app.instanceId),
+      minimizeTargetPosition: minimizeTarget
+    }, app.instanceId))
+  });
+};

package/lib/module/floatingMenu/AppHostLogic.js

@@ -1,5 +1,11 @@
 "use strict";
 
+/**
+ * Modal state to restore when reopening a minimized tool. Defined here (the
+ * platform-free logic module) so the web host doesn't pull in the native
+ * MinimizedToolsContext; that file re-exports this type for back-compat.
+ */
+
 /**
  * Computes the new list of open tool instances when a user launches a dev app. Singleton
  * tools reuse their existing instance while non-singletons create a new entry using the