@buoy-gg/core 7.0.41 → 7.0.43

package/lib/module/floatingMenu/AppHost.js

@@ -1,452 +1 @@
-"use strict";
-
-import { persistentStorage, setExpandableWindowControls } 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 { renderAppIcon } from "./AppIcon";
-import { useMinimizedTools } from "./MinimizedToolsContext.js";
-import { ToolModalShell } from "./ToolHost.js";
-import { useDevToolsSettings } from "./DevToolsSettingsModal";
-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 = renderAppIcon(appDef.icon, {
-          slot: "dial",
-          size: 20,
-          color: appDef.color
-        });
-        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,
-          modal: appDef.modal,
-          minimized: minimized // Preserve minimized state
-        });
-      }
-    });
-    setIsRestored(true);
-  }, [isRestored, open]);
-
-  // Restore open apps on mount
-  useEffect(() => {
-    const restoreOpenApps = async () => {
-      try {
-        const saved = await persistentStorage.getItem(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
-      }));
-      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, 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
-    } : {})
-  };
-
-  // Declarative chrome: the component is a plain body — wrap it in the shared
-  // modal shell (JsModal + managed header + search + toasts).
-  if (app.modal && (app.launchMode === "self-modal" || !app.launchMode)) {
-    return /*#__PURE__*/_jsx(ToolModalShell, {
-      app: app,
-      config: app.modal,
-      visible: isVisible,
-      zIndex: zIndex,
-      onClose: onClose,
-      onMinimize: onMinimize,
-      initialModalState: app.restoreState,
-      enableSharedModalDimensions: globalEnableSharedModalDimensions === true,
-      bodyProps: mergedProps
-    });
-  }
-  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,
-    restore: removeFromMinimizedStack,
-    getNextIconPosition,
-    minimizedTools
-  } = useMinimizedTools();
-  const {
-    settings
-  } = useDevToolsSettings();
-
-  // Sync expandable window controls setting to WindowControls module
-  useEffect(() => {
-    // Default to true (expandable ON) when setting is undefined
-    setExpandableWindowControls(settings.globalSettings?.expandableWindowControls !== false);
-  }, [settings.globalSettings?.expandableWindowControls]);
-
-  // 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
-          });
-        }
-      }
-    });
-
-    // ...and take out anything the rail is still showing that is no longer
-    // minimized, or no longer open at all.
-    //
-    // WHY THIS HALF EXISTS. `openApps` and the rail are two separate stores
-    // for one fact, and only the ADD side was reliable. Minimizing goes
-    // through an event handler; un-minimizing happens inside `open`, which
-    // schedules the rail removal with a `setTimeout` from INSIDE a
-    // `setOpenApps` updater. Updaters are not a safe place for side effects —
-    // React may double-invoke or discard them — so the removal could be
-    // skipped while `minimized: false` still landed. The rail then kept an
-    // icon for an already-open tool, and tapping it did nothing except delete
-    // the icon: the tool looked like it vanished, with no way back to it, and
-    // both stores are persisted so it survived every reload.
-    //
-    // Reconciling here makes the rail eventually consistent with `openApps`
-    // whichever way the state moved, without moving the side effect.
-    minimizedTools.forEach(tool => {
-      const app = openApps.find(a => a.instanceId === tool.instanceId);
-      if (!app || !app.minimized) {
-        removeFromMinimizedStack(tool.instanceId);
-      }
-    });
-  }, [openApps, minimizedTools, addToMinimizedStack, removeFromMinimizedStack]);
-
-  // 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"
-  }
-});
+"use strict";import{persistentStorage as T,setExpandableWindowControls as F}from"@buoy-gg/shared-ui";import R,{createContext as H,useCallback as z,useContext as j,useMemo as B,useState as C,useEffect as y,useRef as v}from"react";import{BackHandler as W,Modal as $,StyleSheet as P,View as x}from"react-native";import{resolveOpenAppsState as q}from"./AppHostLogic.js";import{renderAppIcon as J}from"./AppIcon";import{useMinimizedTools as _}from"./MinimizedToolsContext.js";import{ToolModalShell as L}from"./ToolHost.js";import{useDevToolsSettings as V}from"./DevToolsSettingsModal";import{jsx as m,Fragment as Y}from"react/jsx-runtime";const k=H(null);const w="@react_buoy_open_apps";const G=500;export const AppHostProvider=({children:n})=>{const[s,l]=C([]);const[c,u]=C(false);const f=v(null);const a=v([]);const d=v(null);const{restore:g}=_();const M=z(t=>{let i="";l(r=>{const{apps:o,instanceId:S,wasMinimized:N}=q(r,t,()=>`${t.id}-${Date.now()}-${Math.random().toString(36).slice(2)}`);i=S;if(N){setTimeout(()=>g(S),0)}return o});return i},[g]);const e=z(()=>{if(c)return;if(!a.current.length)return;const t=d.current;if(!t||t.length===0){u(true);return}d.current=null;t.forEach(({id:i,minimized:r})=>{const o=a.current.find(S=>S.id===i);if(o){const S=J(o.icon,{slot:"dial",size:20,color:o.color});M({id:o.id,title:o.name,component:o.component,props:o.props,launchMode:o.launchMode||"self-modal",singleton:o.singleton,icon:S,color:o.color,modal:o.modal,minimized:r})}});u(true)},[c,M]);y(()=>{const t=async()=>{try{const i=await T.getItem(w);if(i){const r=JSON.parse(i);let o;if(Array.isArray(r)&&r.length>0){if(typeof r[0]==="string"){o=r.map(S=>({id:S,minimized:false}))}else{o=r}if(o.length){d.current=o;e();return}}}}catch(i){}u(true)};t()},[e]);y(()=>{if(!c)return;if(f.current){clearTimeout(f.current)}f.current=setTimeout(()=>{const t=s.map(i=>({id:i.id,minimized:i.minimized??false}));T.setItem(w,JSON.stringify(t))},G);return()=>{if(f.current){clearTimeout(f.current)}}},[s,c]);const I=z(t=>{a.current=t;e()},[e]);const h=z(t=>{l(i=>{if(!i.length)return i;if(!t)return i.slice(0,-1);return i.filter(r=>r.instanceId!==t)})},[]);const p=z(()=>l([]),[]);const A=z(t=>{l(i=>i.map(r=>r.instanceId===t?{...r,minimized:true}:r))},[]);const b=z((t,i)=>{l(r=>r.map(o=>o.instanceId===t?{...o,minimized:false,restoreState:i}:o))},[]);const E=z(t=>{const i=s.find(r=>r.instanceId===t);return i?.minimized??false},[s]);R.useEffect(()=>{if(s.length===0)return;const t=()=>{h();return true};const i=W.addEventListener("hardwareBackPress",t);return()=>i.remove()},[s.length,h]);const D=B(()=>({openApps:s,isAnyOpen:s.filter(t=>t.launchMode!=="toggle-only"&&!t.minimized).length>0,open:M,close:h,closeAll:p,registerApps:I,minimize:A,restore:b,isMinimized:E}),[s,M,h,p,I,A,b,E]);return m(k.Provider,{value:D,children:n})};export const useAppHost=()=>{const n=j(k);if(!n){return{openApps:[],isAnyOpen:false,open:()=>"",close:()=>{},closeAll:()=>{},minimize:()=>{},restore:(s,l)=>{},isMinimized:()=>false}}return n};const K=({app:n,zIndex:s,onClose:l,onMinimize:c,minimizeTargetPosition:u,globalEnableSharedModalDimensions:f})=>{const a=n.component;const d=!n.minimized;const g={...n.props??{},...f===true?{enableSharedModalDimensions:true}:{}};if(n.modal&&(n.launchMode==="self-modal"||!n.launchMode)){return m(L,{app:n,config:n.modal,visible:d,zIndex:s,onClose:l,onMinimize:c,initialModalState:n.restoreState,enableSharedModalDimensions:f===true,bodyProps:g})}if(n.launchMode==="self-modal"){return m(a,{...g,visible:d,onClose:l,onRequestClose:l,onMinimize:c,minimizeTargetPosition:u,initialModalState:n.restoreState,instanceId:n.instanceId,zIndex:s})}if(n.launchMode==="inline"){if(!d)return null;return m(x,{pointerEvents:"box-none",style:[P.absoluteFill,{zIndex:s}],children:m(a,{...g,onClose:l,onMinimize:c,minimizeTargetPosition:u,initialModalState:n.restoreState,instanceId:n.instanceId})})}return m($,{visible:d,transparent:true,animationType:"slide",onRequestClose:l,children:m(x,{style:O.backdrop,children:m(x,{style:O.card,children:m(a,{...g,onClose:l,onMinimize:c,minimizeTargetPosition:u,initialModalState:n.restoreState,instanceId:n.instanceId})})})})};export const AppOverlay=()=>{const{openApps:n,close:s,minimize:l}=useAppHost();const{minimize:c,restore:u,getNextIconPosition:f,minimizedTools:a}=_();const{settings:d}=V();y(()=>{F(d.globalSettings?.expandableWindowControls!==false)},[d.globalSettings?.expandableWindowControls]);R.useEffect(()=>{n.forEach(e=>{if(e.minimized&&e.launchMode!=="toggle-only"){const I=a.some(h=>h.instanceId===e.instanceId);if(!I){c({instanceId:e.instanceId,id:e.id,title:e.title||e.id,icon:e.icon,color:e.color})}}});a.forEach(e=>{const I=n.find(h=>h.instanceId===e.instanceId);if(!I||!I.minimized){u(e.instanceId)}})},[n,a,c,u]);const g=n.filter(e=>e.launchMode!=="toggle-only");if(g.length===0)return null;const M=9e3;return m(Y,{children:g.map((e,I)=>{const h=M+I;const p=f();const A=b=>{l(e.instanceId);c({instanceId:e.instanceId,id:e.id,title:e.title||e.id,icon:e.icon,color:e.color,modalState:b})};return m(K,{app:e,zIndex:h,onClose:()=>s(e.instanceId),onMinimize:A,minimizeTargetPosition:p,globalEnableSharedModalDimensions:d.globalSettings?.enableSharedModalDimensions},e.instanceId)})})};const O=P.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"}});