@buoy-gg/core 1.7.2

package/lib/commonjs/floatingMenu/settingsBus.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.settingsBus = void 0;
+class SimpleEventBus {
+  listeners = new Set();
+  emit(payload) {
+    this.listeners.forEach(l => {
+      try {
+        l(payload);
+      } catch (e) {
+        console.error("Error emitting event:", e);
+      }
+    });
+  }
+  addListener(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+}
+const settingsBus = exports.settingsBus = new SimpleEventBus();

package/lib/commonjs/floatingMenu/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/commonjs/index.js

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  FloatingDevTools: true,
+  autoDiscoverPresets: true,
+  autoDiscoverPresetsWithCustom: true,
+  createDefaultConfig: true,
+  validateDialConfig: true,
+  isFloatingToolId: true,
+  isDialToolId: true,
+  MAX_DIAL_TOOLS: true,
+  FloatingMenu: true,
+  DevToolsSettingsModal: true,
+  useDevToolsSettings: true,
+  AppHostProvider: true,
+  AppOverlay: true,
+  useAppHost: true,
+  DevToolsVisibilityProvider: true,
+  useDevToolsVisibility: true,
+  toggleStateManager: true,
+  MinimizedToolsProvider: true,
+  useMinimizedTools: true,
+  getIconPosition: true,
+  getIconSize: true,
+  MinimizedToolsStack: true,
+  LicenseManager: true,
+  useLicense: true,
+  useFeatureAccess: true,
+  useSeats: true,
+  useIsPro: true,
+  setLicenseKey: true,
+  isPro: true,
+  hasEntitlement: true
+};
+Object.defineProperty(exports, "AppHostProvider", {
+  enumerable: true,
+  get: function () {
+    return _AppHost.AppHostProvider;
+  }
+});
+Object.defineProperty(exports, "AppOverlay", {
+  enumerable: true,
+  get: function () {
+    return _AppHost.AppOverlay;
+  }
+});
+Object.defineProperty(exports, "DevToolsSettingsModal", {
+  enumerable: true,
+  get: function () {
+    return _DevToolsSettingsModal.DevToolsSettingsModal;
+  }
+});
+Object.defineProperty(exports, "DevToolsVisibilityProvider", {
+  enumerable: true,
+  get: function () {
+    return _DevToolsVisibilityContext.DevToolsVisibilityProvider;
+  }
+});
+Object.defineProperty(exports, "FloatingDevTools", {
+  enumerable: true,
+  get: function () {
+    return _FloatingDevTools.FloatingDevTools;
+  }
+});
+Object.defineProperty(exports, "FloatingMenu", {
+  enumerable: true,
+  get: function () {
+    return _FloatingMenu.FloatingMenu;
+  }
+});
+Object.defineProperty(exports, "LicenseManager", {
+  enumerable: true,
+  get: function () {
+    return _license.LicenseManager;
+  }
+});
+Object.defineProperty(exports, "MAX_DIAL_TOOLS", {
+  enumerable: true,
+  get: function () {
+    return _defaultConfig.MAX_DIAL_TOOLS;
+  }
+});
+Object.defineProperty(exports, "MinimizedToolsProvider", {
+  enumerable: true,
+  get: function () {
+    return _MinimizedToolsContext.MinimizedToolsProvider;
+  }
+});
+Object.defineProperty(exports, "MinimizedToolsStack", {
+  enumerable: true,
+  get: function () {
+    return _MinimizedToolsStack.MinimizedToolsStack;
+  }
+});
+Object.defineProperty(exports, "autoDiscoverPresets", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresets.autoDiscoverPresets;
+  }
+});
+Object.defineProperty(exports, "autoDiscoverPresetsWithCustom", {
+  enumerable: true,
+  get: function () {
+    return _autoDiscoverPresets.autoDiscoverPresetsWithCustom;
+  }
+});
+Object.defineProperty(exports, "createDefaultConfig", {
+  enumerable: true,
+  get: function () {
+    return _defaultConfig.createDefaultConfig;
+  }
+});
+Object.defineProperty(exports, "getIconPosition", {
+  enumerable: true,
+  get: function () {
+    return _MinimizedToolsContext.getIconPosition;
+  }
+});
+Object.defineProperty(exports, "getIconSize", {
+  enumerable: true,
+  get: function () {
+    return _MinimizedToolsContext.getIconSize;
+  }
+});
+Object.defineProperty(exports, "hasEntitlement", {
+  enumerable: true,
+  get: function () {
+    return _license.hasEntitlement;
+  }
+});
+Object.defineProperty(exports, "isDialToolId", {
+  enumerable: true,
+  get: function () {
+    return _defaultConfig.isDialToolId;
+  }
+});
+Object.defineProperty(exports, "isFloatingToolId", {
+  enumerable: true,
+  get: function () {
+    return _defaultConfig.isFloatingToolId;
+  }
+});
+Object.defineProperty(exports, "isPro", {
+  enumerable: true,
+  get: function () {
+    return _license.isPro;
+  }
+});
+Object.defineProperty(exports, "setLicenseKey", {
+  enumerable: true,
+  get: function () {
+    return _license.setLicenseKey;
+  }
+});
+Object.defineProperty(exports, "toggleStateManager", {
+  enumerable: true,
+  get: function () {
+    return _ToggleStateManager.toggleStateManager;
+  }
+});
+Object.defineProperty(exports, "useAppHost", {
+  enumerable: true,
+  get: function () {
+    return _AppHost.useAppHost;
+  }
+});
+Object.defineProperty(exports, "useDevToolsSettings", {
+  enumerable: true,
+  get: function () {
+    return _DevToolsSettingsModal.useDevToolsSettings;
+  }
+});
+Object.defineProperty(exports, "useDevToolsVisibility", {
+  enumerable: true,
+  get: function () {
+    return _DevToolsVisibilityContext.useDevToolsVisibility;
+  }
+});
+Object.defineProperty(exports, "useFeatureAccess", {
+  enumerable: true,
+  get: function () {
+    return _license.useFeatureAccess;
+  }
+});
+Object.defineProperty(exports, "useIsPro", {
+  enumerable: true,
+  get: function () {
+    return _license.useIsPro;
+  }
+});
+Object.defineProperty(exports, "useLicense", {
+  enumerable: true,
+  get: function () {
+    return _license.useLicense;
+  }
+});
+Object.defineProperty(exports, "useMinimizedTools", {
+  enumerable: true,
+  get: function () {
+    return _MinimizedToolsContext.useMinimizedTools;
+  }
+});
+Object.defineProperty(exports, "useSeats", {
+  enumerable: true,
+  get: function () {
+    return _license.useSeats;
+  }
+});
+Object.defineProperty(exports, "validateDialConfig", {
+  enumerable: true,
+  get: function () {
+    return _defaultConfig.validateDialConfig;
+  }
+});
+var _FloatingDevTools = require("./floatingMenu/FloatingDevTools.js");
+var _autoDiscoverPresets = require("./floatingMenu/autoDiscoverPresets.js");
+var _defaultConfig = require("./floatingMenu/defaultConfig.js");
+var _FloatingMenu = require("./floatingMenu/FloatingMenu.js");
+var _types = require("./floatingMenu/types.js");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _DevToolsSettingsModal = require("./floatingMenu/DevToolsSettingsModal.js");
+var _AppHost = require("./floatingMenu/AppHost.js");
+var _DevToolsVisibilityContext = require("./floatingMenu/DevToolsVisibilityContext.js");
+var _ToggleStateManager = require("./floatingMenu/ToggleStateManager.js");
+var _MinimizedToolsContext = require("./floatingMenu/MinimizedToolsContext.js");
+var _MinimizedToolsStack = require("./floatingMenu/MinimizedToolsStack.js");
+var _license = require("@buoy-gg/license");

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/module/floatingMenu/AppHost.js

@@ -0,0 +1,402 @@
+"use strict";
+
+import { safeGetItem, safeSetItem } from "@buoy-gg/shared-ui";
+import React, { createContext, useCallback, useContext, useMemo, useState, useEffect, useRef } from "react";
+import { BackHandler, Modal, StyleSheet, View } from "react-native";
+import { resolveOpenAppsState } from "./AppHostLogic.js";
+import { useMinimizedTools } from "./MinimizedToolsContext.js";
+import { useDevToolsSettings } from "./DevToolsSettingsModal.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;
+
+// Type for persisted app state
+
+/**
+ * Provides the floating dev tools application host. Tracks open tool instances, restores
+ * persisted state, and exposes imperative helpers used by `FloatingMenu` and friends.
+ */
+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 {
+    restore: removeFromMinimizedStack
+  } = useMinimizedTools();
+  const open = useCallback(def => {
+    let resolvedId = "";
+    setOpenApps(current => {
+      const {
+        apps,
+        instanceId,
+        wasMinimized
+      } = resolveOpenAppsState(current, def, () => `${def.id}-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+      resolvedId = instanceId;
+
+      // If the app was minimized, remove it from the minimized stack
+      // This needs to be done outside of setOpenApps to avoid nested state updates
+      if (wasMinimized) {
+        // Schedule the removal for after this state update completes
+        setTimeout(() => removeFromMinimizedStack(instanceId), 0);
+      }
+      return apps;
+    });
+    return resolvedId;
+  }, [removeFromMinimizedStack]);
+  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) {
+        const resolvedIcon = typeof appDef.icon === "function" ? appDef.icon({
+          slot: "dial",
+          size: 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: minimized // Preserve minimized state
+        });
+      }
+    });
+    setIsRestored(true);
+  }, [isRestored, open]);
+
+  // Restore open apps on mount
+  useEffect(() => {
+    const restoreOpenApps = async () => {
+      try {
+        const saved = await safeGetItem(STORAGE_KEY_OPEN_APPS);
+        if (saved) {
+          const parsed = JSON.parse(saved);
+          // Handle both old format (string[]) and new format (PersistedAppState[])
+          let savedApps;
+          if (Array.isArray(parsed) && parsed.length > 0) {
+            if (typeof parsed[0] === "string") {
+              // Old format: convert string[] to PersistedAppState[]
+              savedApps = parsed.map(id => ({
+                id,
+                minimized: false
+              }));
+            } else {
+              // New format: already PersistedAppState[]
+              savedApps = parsed;
+            }
+            if (savedApps.length) {
+              pendingRestoreRef.current = savedApps;
+              tryRestorePending();
+              return;
+            }
+          }
+        }
+      } catch (error) {
+        // Failed to restore open apps - continue with fresh state
+      }
+      setIsRestored(true);
+    };
+    restoreOpenApps();
+  }, [tryRestorePending]);
+
+  // Save open apps with debounce
+  useEffect(() => {
+    if (!isRestored) return;
+
+    // Clear existing timeout
+    if (persistenceTimeoutRef.current) {
+      clearTimeout(persistenceTimeoutRef.current);
+    }
+
+    // Set new timeout to save
+    persistenceTimeoutRef.current = setTimeout(() => {
+      const appStates = openApps.map(app => ({
+        id: app.id,
+        minimized: app.minimized ?? false
+      }));
+      safeSetItem(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, restoreState) => {
+    setOpenApps(s => s.map(app => app.instanceId === instanceId ? {
+      ...app,
+      minimized: false,
+      restoreState
+    } : app));
+  }, []);
+  const isMinimized = useCallback(instanceId => {
+    const app = openApps.find(a => a.instanceId === instanceId);
+    return app?.minimized ?? false;
+  }, [openApps]);
+  React.useEffect(() => {
+    if (openApps.length === 0) return;
+    const handler = () => {
+      close();
+      return true;
+    };
+    const sub = BackHandler.addEventListener("hardwareBackPress", handler);
+    return () => sub.remove();
+  }, [openApps.length, close]);
+  const value = useMemo(() => ({
+    openApps,
+    // Only count non-toggle-only and non-minimized tools as "open"
+    isAnyOpen: openApps.filter(app => app.launchMode !== "toggle-only" && !app.minimized).length > 0,
+    open,
+    close,
+    closeAll,
+    registerApps,
+    minimize,
+    restore,
+    isMinimized
+  }), [openApps, open, close, closeAll, registerApps, minimize, restore, isMinimized]);
+  return /*#__PURE__*/_jsx(AppHostContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+/**
+ * Accessor hook for the dev tools app host. Components can open/close tools or inspect
+ * the active stack. Falls back to a no-op implementation when rendered outside the provider.
+ */
+export const useAppHost = () => {
+  const ctx = useContext(AppHostContext);
+  // Return a default value if not in provider (for backwards compatibility)
+  if (!ctx) {
+    return {
+      openApps: [],
+      isAnyOpen: false,
+      open: () => "",
+      close: () => {},
+      closeAll: () => {},
+      minimize: () => {},
+      restore: (_instanceId, _restoreState) => {},
+      isMinimized: () => false
+    };
+  }
+  return ctx;
+};
+
+/**
+ * Renders a single app instance. Keeps component mounted even when minimized
+ * by passing visible={false} instead of unmounting.
+ *
+ * Supports multiple simultaneous modals - each gets its own z-index based on
+ * position in the open apps stack (later opened = higher z-index).
+ */
+const AppRenderer = ({
+  app,
+  zIndex,
+  onClose,
+  onMinimize,
+  minimizeTargetPosition,
+  globalEnableSharedModalDimensions
+}) => {
+  const Comp = app.component;
+  // All non-minimized apps are visible - supports multiple simultaneous modals
+  const isVisible = !app.minimized;
+
+  // Merge props with global settings override
+  // Priority: Global settings (if defined) > Tool prop > Default (false)
+  const mergedProps = {
+    ...(app.props ?? {}),
+    // Only override if globalEnableSharedModalDimensions is explicitly true
+    // (when the user turns it on in settings)
+    ...(globalEnableSharedModalDimensions === true ? {
+      enableSharedModalDimensions: true
+    } : {})
+  };
+  if (app.launchMode === "self-modal") {
+    return /*#__PURE__*/_jsx(Comp, {
+      ...mergedProps,
+      visible: isVisible,
+      onClose: onClose,
+      onRequestClose: onClose,
+      onMinimize: onMinimize,
+      minimizeTargetPosition: minimizeTargetPosition,
+      initialModalState: app.restoreState,
+      instanceId: app.instanceId,
+      zIndex: zIndex
+    });
+  }
+  if (app.launchMode === "inline") {
+    if (!isVisible) return null;
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: [StyleSheet.absoluteFill, {
+        zIndex
+      }],
+      children: /*#__PURE__*/_jsx(Comp, {
+        ...mergedProps,
+        onClose: onClose,
+        onMinimize: onMinimize,
+        minimizeTargetPosition: minimizeTargetPosition,
+        initialModalState: app.restoreState,
+        instanceId: app.instanceId
+      })
+    });
+  }
+
+  // host-modal mode
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: isVisible,
+    transparent: true,
+    animationType: "slide",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.backdrop,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.card,
+        children: /*#__PURE__*/_jsx(Comp, {
+          ...mergedProps,
+          onClose: onClose,
+          onMinimize: onMinimize,
+          minimizeTargetPosition: minimizeTargetPosition,
+          initialModalState: app.restoreState,
+          instanceId: app.instanceId
+        })
+      })
+    })
+  });
+};
+
+/**
+ * Renders all dev tool surfaces. Keeps minimized apps mounted but hidden
+ * so their state and listeners are preserved (similar to React Navigation screens).
+ *
+ * Supports multiple simultaneous modals - each modal gets a z-index based on
+ * its position in the stack (later opened modals appear on top).
+ */
+export const AppOverlay = () => {
+  const {
+    openApps,
+    close,
+    minimize
+  } = useAppHost();
+  const {
+    minimize: addToMinimizedStack,
+    getNextIconPosition,
+    minimizedTools
+  } = useMinimizedTools();
+  const {
+    settings
+  } = useDevToolsSettings();
+
+  // Sync restored minimized apps to MinimizedToolsContext
+  // This handles apps that were restored from persistence with minimized=true
+  React.useEffect(() => {
+    openApps.forEach(app => {
+      if (app.minimized && app.launchMode !== "toggle-only") {
+        // Check if this app is already in the minimized stack
+        const isInStack = minimizedTools.some(t => t.instanceId === app.instanceId);
+        if (!isInStack) {
+          // Add to minimized stack (restored from persistence)
+          addToMinimizedStack({
+            instanceId: app.instanceId,
+            id: app.id,
+            title: app.title || app.id,
+            icon: app.icon,
+            color: app.color
+          });
+        }
+      }
+    });
+  }, [openApps, minimizedTools, addToMinimizedStack]);
+
+  // Filter to renderable apps (exclude toggle-only)
+  const renderableApps = openApps.filter(app => app.launchMode !== "toggle-only");
+  if (renderableApps.length === 0) return null;
+
+  // Base z-index for modals - each subsequent modal gets +1
+  const BASE_ZINDEX = 9000;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: renderableApps.map((app, index) => {
+      // z-index based on position - later in array = higher z-index (on top)
+      const zIndex = BASE_ZINDEX + index;
+      const minimizeTargetPosition = getNextIconPosition();
+      const handleMinimize = modalState => {
+        // IMPORTANT: Order matters here!
+        // 1. First mark the app as minimized in AppHost - this updates isAnyOpen
+        //    so that pushToSide becomes false before the icon component mounts
+        minimize(app.instanceId);
+        // 2. Then add to the minimized stack - this triggers the icon to mount
+        //    By now isAnyOpen is false, so the icon mounts with pushToSide=false
+        addToMinimizedStack({
+          instanceId: app.instanceId,
+          id: app.id,
+          title: app.title || app.id,
+          icon: app.icon,
+          color: app.color,
+          modalState: modalState
+        });
+      };
+      return /*#__PURE__*/_jsx(AppRenderer, {
+        app: app,
+        zIndex: zIndex,
+        onClose: () => close(app.instanceId),
+        onMinimize: handleMinimize,
+        minimizeTargetPosition: minimizeTargetPosition,
+        globalEnableSharedModalDimensions: settings.globalSettings?.enableSharedModalDimensions
+      }, app.instanceId);
+    })
+  });
+};
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.28)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  card: {
+    maxHeight: "90%",
+    width: "94%",
+    borderRadius: 12,
+    backgroundColor: "white",
+    overflow: "hidden"
+  }
+});

package/lib/module/floatingMenu/AppHostLogic.js

@@ -0,0 +1,39 @@
+"use strict";
+
+/**
+ * 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
+ * provided `generateId` helper.
+ *
+ * @param current - Current stack of open app instances.
+ * @param def - Descriptor of the tool to launch (without runtime instance id).
+ * @param generateId - Callback used to generate a unique instance identifier.
+ * @returns Updated instance list alongside the resolved instance id.
+ */
+export const resolveOpenAppsState = (current, def, generateId) => {
+  if (def.singleton) {
+    const existing = current.find(app => app.id === def.id);
+    if (existing) {
+      const wasMinimized = existing.minimized ?? false;
+      return {
+        instanceId: existing.instanceId,
+        wasMinimized,
+        apps: [...current.filter(app => app.instanceId !== existing.instanceId),
+        // Un-minimize the existing app when re-opening it
+        {
+          ...existing,
+          minimized: false
+        }]
+      };
+    }
+  }
+  const instanceId = generateId();
+  return {
+    instanceId,
+    wasMinimized: false,
+    apps: [...current, {
+      ...def,
+      instanceId
+    }]
+  };
+};