@buoy-gg/core 7.0.15 → 7.0.16

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

@@ -0,0 +1,359 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAppHost = exports.AppOverlay = exports.AppHostProvider = void 0;
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _react = require("react");
+var _AppHostLogic = require("./AppHostLogic.js");
+var _floatingToolsWeb = require("./floatingTools.web.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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
+ */
+
+const AppHostContext = /*#__PURE__*/(0, _react.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`.
+ */
+const AppHostProvider = ({
+  children
+}) => {
+  const [openApps, setOpenApps] = (0, _react.useState)([]);
+  const [isRestored, setIsRestored] = (0, _react.useState)(false);
+  const persistenceTimeoutRef = (0, _react.useRef)(null);
+  const installedAppsRef = (0, _react.useRef)([]);
+  const pendingRestoreRef = (0, _react.useRef)(null);
+  const open = (0, _react.useCallback)(def => {
+    let resolvedId = "";
+    setOpenApps(current => {
+      const {
+        apps,
+        instanceId
+      } = (0, _AppHostLogic.resolveOpenAppsState)(current, def, () => `${def.id}-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+      resolvedId = instanceId;
+      return apps;
+    });
+    return resolvedId;
+  }, []);
+  const tryRestorePending = (0, _react.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.
+  (0, _react.useEffect)(() => {
+    const restoreOpenApps = async () => {
+      try {
+        const saved = await _sharedUi.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
+  (0, _react.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
+      }));
+      _sharedUi.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 = (0, _react.useCallback)(apps => {
+    installedAppsRef.current = apps;
+    tryRestorePending();
+  }, [tryRestorePending]);
+  const close = (0, _react.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 = (0, _react.useCallback)(() => setOpenApps([]), []);
+  const minimize = (0, _react.useCallback)(instanceId => {
+    setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
+      ...app,
+      minimized: true
+    } : app));
+  }, []);
+  const restore = (0, _react.useCallback)(instanceId => {
+    setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
+      ...app,
+      minimized: false
+    } : app));
+  }, []);
+  const isMinimized = (0, _react.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);
+  (0, _react.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 = (0, _react.useMemo)(() => ({
+    openApps,
+    isAnyOpen: hasVisibleApps,
+    open,
+    close,
+    closeAll,
+    registerApps,
+    minimize,
+    restore,
+    isMinimized
+  }), [openApps, hasVisibleApps, open, close, closeAll, registerApps, minimize, restore, isMinimized]);
+  return /*#__PURE__*/(0, _jsxRuntime.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.
+ */
+exports.AppHostProvider = AppHostProvider;
+const useAppHost = () => {
+  const ctx = (0, _react.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.
+exports.useAppHost = useAppHost;
+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__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex,
+        pointerEvents: "none"
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, {
+        ...(app.props ?? {}),
+        onClose: onClose,
+        onMinimize: onMinimize,
+        minimizeTargetPosition: minimizeTargetPosition,
+        instanceId: app.instanceId
+      })
+    });
+  }
+
+  // host-modal mode
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      ...backdropStyle,
+      zIndex,
+      display: isVisible ? "flex" : "none"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: cardStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.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.
+ */
+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 = (0, _floatingToolsWeb.getBubbleAnchorPosition)() ?? dockIconPosition(minimizedCount);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: renderableApps.map((app, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(AppRenderer, {
+      app: app,
+      zIndex: BASE_ZINDEX + index,
+      onClose: () => close(app.instanceId),
+      onMinimize: () => minimize(app.instanceId),
+      minimizeTargetPosition: minimizeTarget
+    }, app.instanceId))
+  });
+};
+exports.AppOverlay = AppOverlay;

package/lib/commonjs/floatingMenu/AppHostLogic.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resolveOpenAppsState = void 0;
+/**
+ * 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