@buoy-gg/core 7.0.16 → 7.0.17

package/lib/commonjs/floatingMenu/AppHost.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _AppHostLogic = require("./AppHostLogic.js");
 var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
+var _ToolHost = require("./ToolHost.js");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
@@ -81,6 +82,7 @@ const AppHostProvider = ({
           singleton: appDef.singleton,
           icon: resolvedIcon,
           color: appDef.color,
+          modal: appDef.modal,
           minimized: minimized // Preserve minimized state
         });
       }
@@ -257,6 +259,22 @@ const AppRenderer = ({
       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__*/(0, _jsxRuntime.jsx)(_ToolHost.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__*/(0, _jsxRuntime.jsx)(Comp, {
       ...mergedProps,

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -186,7 +186,8 @@ const FloatingMenu = ({
         launchMode: app.launchMode ?? "self-modal",
         singleton: app.singleton ?? true,
         icon: resolvedIcon,
-        color: app.color
+        color: app.color,
+        modal: app.modal
       });
     }
   };

package/lib/commonjs/floatingMenu/ToolHost.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolModalShell = ToolModalShell;
+exports.useToolHeader = useToolHeader;
+exports.useToolHost = useToolHost;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * ToolHost — the declarative chrome layer for custom tools.
+ *
+ * When an `InstalledApp` declares `modal: {...}`, the AppHost renders its
+ * component inside `ToolModalShell` instead of raw: the shared JsModal
+ * (drag/resize, floating⇄bottom-sheet, minimize, dimension persistence) plus
+ * a managed header (title/subtitle, back navigation, search, actions) and a
+ * lightweight toast layer. The tool body talks back to the shell through
+ * `useToolHost()` / `useToolHeader()`.
+ */
+
+/** Per-screen header overrides a tool body can apply (see `useToolHeader`). */
+
+const noop = () => {};
+const FALLBACK_CONTEXT = {
+  search: "",
+  isSearchActive: false,
+  clearSearch: noop,
+  close: noop,
+  showToast: noop,
+  setHeaderOverride: noop
+};
+const ToolHostContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Access the hosting shell from a custom tool body: search query, toasts,
+ * close. Safe to call outside the shell (returns inert no-ops) so tool
+ * components can also be mounted standalone.
+ */
+function useToolHost() {
+  return (0, _react.useContext)(ToolHostContext) ?? FALLBACK_CONTEXT;
+}
+
+/**
+ * Declare per-screen header state (title/subtitle/actions/back) from inside a
+ * tool body. Applies while the calling component is mounted and reverts to
+ * the preset's static config on unmount — so a detail screen simply mounts
+ * with its own header and the list header returns when it unmounts.
+ *
+ * ```tsx
+ * useToolHeader(
+ *   { title: flag.key, onBack: () => setScreen("list"), actions: <CopyButton value={flag} /> },
+ *   [flag.key]
+ * );
+ * ```
+ */
+function useToolHeader(override, deps) {
+  const {
+    setHeaderOverride
+  } = useToolHost();
+  (0, _react.useEffect)(() => {
+    setHeaderOverride(override);
+    return () => setHeaderOverride(null);
+    // Caller-provided deps intentionally control when the override refreshes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
+
+// ---------------------------------------------------------------------------
+// Toast layer
+// ---------------------------------------------------------------------------
+
+const TOAST_DURATION_MS = 2200;
+const TOAST_COLORS = {
+  success: _sharedUi.gameUIColors.success,
+  error: _sharedUi.gameUIColors.error,
+  info: _sharedUi.gameUIColors.info
+};
+function ToastView({
+  message,
+  type,
+  nonce
+}) {
+  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    opacity.setValue(0);
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(opacity, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true
+    }), _reactNative.Animated.delay(TOAST_DURATION_MS - 450), _reactNative.Animated.timing(opacity, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true
+    })]).start();
+  }, [nonce, opacity]);
+  const color = TOAST_COLORS[type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+    pointerEvents: "none",
+    style: [styles.toast, {
+      opacity,
+      borderColor: color + "60"
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.toastDot, {
+        backgroundColor: color
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.toastText,
+      numberOfLines: 2,
+      children: message
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Shell
+// ---------------------------------------------------------------------------
+
+function ToolModalShell({
+  app,
+  config,
+  visible,
+  zIndex,
+  onClose,
+  onMinimize,
+  initialModalState,
+  enableSharedModalDimensions,
+  bodyProps
+}) {
+  const Body = app.component;
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const [search, setSearch] = (0, _react.useState)("");
+  const [headerOverride, setHeaderOverride] = (0, _react.useState)(null);
+  const [toast, setToast] = (0, _react.useState)(null);
+  const toastTimeoutRef = (0, _react.useRef)(null);
+  const clearSearch = (0, _react.useCallback)(() => {
+    setIsSearchActive(false);
+    setSearch("");
+  }, []);
+  const showToast = (0, _react.useCallback)((message, type = "info") => {
+    if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
+    setToast(prev => ({
+      message,
+      type,
+      nonce: (prev?.nonce ?? 0) + 1
+    }));
+    toastTimeoutRef.current = setTimeout(() => setToast(null), TOAST_DURATION_MS);
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
+    };
+  }, []);
+  const contextValue = (0, _react.useMemo)(() => ({
+    search: isSearchActive ? search : "",
+    isSearchActive,
+    clearSearch,
+    close: onClose,
+    showToast,
+    setHeaderOverride,
+    instanceId: app.instanceId
+  }), [search, isSearchActive, clearSearch, onClose, showToast, app.instanceId]);
+  const title = headerOverride?.title ?? config.title ?? app.title ?? app.id;
+  const subtitle = headerOverride?.subtitle ?? config.subtitle;
+  const onBack = headerOverride?.onBack;
+  const actions = headerOverride?.actions ?? config.headerActions;
+
+  // Tool-scoped persistence via the custom namespace unless the user has the
+  // shared-dimensions global setting on (all tools share one window size).
+  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.devToolsStorageKeys.custom(app.id).modal();
+  const header = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [onBack && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: onBack
+    }), isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+      value: search,
+      onChangeText: setSearch,
+      onCancel: clearSearch,
+      placeholder: config.searchPlaceholder
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: title,
+      subtitle: subtitle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+      children: [!isSearchActive && actions, config.searchable && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HeaderSearchButton, {
+        onPress: () => setIsSearchActive(true)
+      })]
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolHostContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onBack: onBack,
+      onMinimize: onMinimize,
+      initialModalState: initialModalState,
+      zIndex: zIndex,
+      persistenceKey: persistenceKey,
+      enablePersistence: true,
+      initialMode: config.initialMode ?? "bottomSheet",
+      header: {
+        customContent: header,
+        showToggleButton: true
+      }
+      // Tool bodies own their scrolling (ScrollView/FlatList) — the shell
+      // must not add a competing wrapper.
+      ,
+      disableScrollWrapper: true,
+      styles: {},
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.bodyRoot,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+          ...bodyProps
+        }), toast && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastView, {
+          message: toast.message,
+          type: toast.type,
+          nonce: toast.nonce
+        })]
+      })
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  bodyRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  toast: {
+    position: "absolute",
+    bottom: 16,
+    alignSelf: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    maxWidth: "86%",
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    shadowColor: "#000",
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 6
+  },
+  toastDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  toastText: {
+    flex: 1,
+    fontSize: 12,
+    color: _sharedUi.buoyColors.text
+  }
+});

package/lib/commonjs/floatingMenu/allToolsRegistry.js

@@ -113,6 +113,13 @@ const ALL_TOOLS_REGISTRY = exports.ALL_TOOLS_REGISTRY = [{
   renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EventsIcon, {
     size: size
   })
+}, {
+  id: "time-machine",
+  name: "TIME MACHINE",
+  color: _floatingToolsCore.TIME_MACHINE_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.TimeMachineIcon, {
+    size: size
+  })
 }, {
   id: "jotai",
   name: "JOTAI",

package/lib/commonjs/floatingMenu/autoDiscoverPresets.js

@@ -189,6 +189,22 @@ function autoDiscoverPresets() {
       }
     }
   },
+  // Time Machine
+  {
+    name: "@buoy-gg/time-machine",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          timeMachineToolPreset
+        } = require("@buoy-gg/time-machine");
+        return timeMachineToolPreset;
+      } catch (e) {
+        (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/time-machine", e);
+        return null;
+      }
+    }
+  },
   // Redux DevTools
   {
     name: "@buoy-gg/redux",

package/lib/commonjs/floatingMenu/autoExternalSync.js

@@ -44,6 +44,7 @@ let zustandModule = null;
 let jotaiModule = null;
 let eventsModule = null;
 let consoleModule = null;
+let timeMachineModule = null;
 let envModule = null;
 let highlightUpdatesModule = null;
 let debugBordersModule = null;
@@ -107,6 +108,11 @@ try {
 } catch (e) {
   (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/console", e);
 }
+try {
+  timeMachineModule = require("@buoy-gg/time-machine");
+} catch (e) {
+  (0, _optionalRequire.reportOptionalRequireError)("@buoy-gg/time-machine", e);
+}
 try {
   envModule = require("@buoy-gg/env");
 } catch (e) {
@@ -260,6 +266,9 @@ function AutoExternalSync({
     if (consoleModule?.consoleSyncAdapter) {
       map.console = consoleModule.consoleSyncAdapter;
     }
+    if (timeMachineModule?.timeMachineSyncAdapter) {
+      map["time-machine"] = timeMachineModule.timeMachineSyncAdapter;
+    }
     if (envModule?.createEnvSyncAdapter) {
       map.env = envModule.createEnvSyncAdapter(requiredEnvVars ?? []);
     }

package/lib/commonjs/floatingMenu/dial/DialDevTools.js

@@ -203,7 +203,8 @@ const DialDevTools = ({
               launchMode: app.launchMode ?? "self-modal",
               singleton: app.singleton ?? true,
               icon: resolvedIcon,
-              color: app.color
+              color: app.color,
+              modal: app.modal
             });
           }
 

package/lib/commonjs/index.js

@@ -21,6 +21,8 @@ var _exportNames = {
   AppHostProvider: true,
   AppOverlay: true,
   useAppHost: true,
+  useToolHost: true,
+  useToolHeader: true,
   DevToolsVisibilityProvider: true,
   useDevToolsVisibility: true,
   toggleStateManager: true,
@@ -230,6 +232,18 @@ Object.defineProperty(exports, "useMinimizedTools", {
     return _MinimizedToolsContext.useMinimizedTools;
   }
 });
+Object.defineProperty(exports, "useToolHeader", {
+  enumerable: true,
+  get: function () {
+    return _ToolHost.useToolHeader;
+  }
+});
+Object.defineProperty(exports, "useToolHost", {
+  enumerable: true,
+  get: function () {
+    return _ToolHost.useToolHost;
+  }
+});
 Object.defineProperty(exports, "validateDialConfig", {
   enumerable: true,
   get: function () {
@@ -256,6 +270,19 @@ Object.keys(_types).forEach(function (key) {
 });
 var _DevToolsSettingsModal = require("./floatingMenu/DevToolsSettingsModal");
 var _AppHost = require("./floatingMenu/AppHost");
+var _ToolHost = require("./floatingMenu/ToolHost.js");
+var _toolkit = require("./toolkit.js");
+Object.keys(_toolkit).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _toolkit[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _toolkit[key];
+    }
+  });
+});
 var _DevToolsVisibilityContext = require("./floatingMenu/DevToolsVisibilityContext.js");
 var _ToggleStateManager = require("./floatingMenu/ToggleStateManager.js");
 var _MinimizedToolsContext = require("./floatingMenu/MinimizedToolsContext.js");