@buoy-gg/core 7.0.17 → 7.0.18

package/lib/commonjs/floatingMenu/AppHost.js

@@ -8,6 +8,7 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _AppHostLogic = require("./AppHostLogic.js");
+var _AppIcon = require("./AppIcon.js");
 var _MinimizedToolsContext = require("./MinimizedToolsContext.js");
 var _ToolHost = require("./ToolHost.js");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
@@ -69,10 +70,11 @@ const AppHostProvider = ({
     }) => {
       const appDef = installedAppsRef.current.find(app => app.id === appId);
       if (appDef) {
-        const resolvedIcon = typeof appDef.icon === "function" ? appDef.icon({
+        const resolvedIcon = (0, _AppIcon.renderAppIcon)(appDef.icon, {
           slot: "dial",
-          size: 20
-        }) : appDef.icon;
+          size: 20,
+          color: appDef.color
+        });
         open({
           id: appDef.id,
           title: appDef.name,

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

@@ -7,6 +7,7 @@ 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 _AppIcon = require("./AppIcon.js");
 var _floatingToolsWeb = require("./floatingTools.web.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -86,7 +87,11 @@ const AppHostProvider = ({
     }) => {
       const appDef = installedAppsRef.current.find(app => app.id === appId);
       if (appDef && appDef.component) {
-        const resolvedIcon = typeof appDef.icon === "function" ? appDef.icon(20) : appDef.icon;
+        const resolvedIcon = (0, _AppIcon.renderAppIcon)(appDef.icon, {
+          slot: "dial",
+          size: 20,
+          color: appDef.color
+        });
         open({
           id: appDef.id,
           title: appDef.name,

package/lib/commonjs/floatingMenu/AppIcon.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AppTextIcon = AppTextIcon;
+exports.renderAppIcon = renderAppIcon;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Icon resolution for `InstalledApp.icon`.
+ *
+ * Custom tools may provide an icon three ways:
+ *  - a component `({ slot, size }) => node` (dynamic, hook-capable)
+ *  - a pre-built ReactNode
+ *  - a PLAIN STRING — "AUTH", "KIT", "🗑️" — rendered as an auto-fitting text
+ *    icon so simple tools never need an icon library.
+ *
+ * Every menu surface (dial, row, minimize stack, restore path) resolves icons
+ * through `renderAppIcon` so all three forms behave identically.
+ */
+
+/** Visible glyphs, not UTF-16 units — "🗑️" is one glyph, not three. */
+function glyphCount(label) {
+  // Strip variation selectors + zero-width joiners before counting.
+  const stripped = label.replace(/[\uFE00-\uFE0F\u200D]/g, "");
+  return Math.max(Array.from(stripped).length, 1);
+}
+function AppTextIcon({
+  label,
+  size,
+  color = _sharedUi.toolTheme.colors.text
+}) {
+  const chars = glyphCount(label);
+  // Short labels stay square; longer ones ("AUTH") get a wider box — the
+  // dial/row layouts have breathing room and the label reads better than a
+  // squashed square would. The computed font size is what fits the box on
+  // web; adjustsFontSizeToFit covers native font-metric drift.
+  const maxWidth = chars <= 2 ? size : size * 1.6;
+  const fontSize = Math.max(7, Math.min(size * (chars === 1 ? 0.7 : 0.62), maxWidth / (0.62 * chars)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      minWidth: size,
+      maxWidth,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      adjustsFontSizeToFit: true,
+      minimumFontScale: 0.5,
+      style: {
+        color,
+        fontSize,
+        fontWeight: "800",
+        letterSpacing: 0.5,
+        textAlign: "center"
+      },
+      children: label
+    })
+  });
+}
+
+/**
+ * Resolve any `InstalledApp.icon` form to a renderable node. Function icons
+ * become elements (createElement — hooks keep working); strings become
+ * auto-fitting text icons; nodes pass through.
+ */
+function renderAppIcon(icon, ctx) {
+  if (icon == null) return icon;
+  if (typeof icon === "function") {
+    return /*#__PURE__*/_react.default.createElement(icon, {
+      slot: ctx.slot,
+      size: ctx.size,
+      state: ctx.state,
+      actions: ctx.actions
+    });
+  }
+  if (typeof icon === "string" || typeof icon === "number") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(AppTextIcon, {
+      label: String(icon),
+      size: ctx.size,
+      color: ctx.color
+    });
+  }
+  return icon;
+}

package/lib/commonjs/floatingMenu/FloatingDevTools.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _AppHost = require("./AppHost");
 var _FloatingMenu = require("./FloatingMenu.js");
 var _autoDiscoverPresets = require("./autoDiscoverPresets.js");
+var _AppIcon = require("./AppIcon.js");
 var _DevToolsVisibilityContext = require("./DevToolsVisibilityContext.js");
 var _optionalRequire = require("./optionalRequire.js");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -230,6 +231,11 @@ const FloatingDevTools = ({
   // identity (and re-ran discovery) on every parent render.
   const finalApps = (0, _react.useMemo)(() => userApps ? (0, _autoDiscoverPresets.autoDiscoverPresetsWithCustom)(userApps) : (0, _autoDiscoverPresets.autoDiscoverPresets)(), [userApps]);
 
+  // Custom tools that declared a sync adapter — registered with the broker as
+  // `custom:<id>` by AutoExternalSync. Memoized so the sync tools map (keyed
+  // by identity) doesn't rebuild every render.
+  const syncApps = (0, _react.useMemo)(() => finalApps.filter(app => app.sync), [finalApps]);
+
   // Check if debug-borders is installed and auto-render the overlay
   const DebugBordersOverlay = (0, _react.useMemo)(() => {
     try {
@@ -366,13 +372,11 @@ const FloatingDevTools = ({
   const getToolIcon = (0, _react.useCallback)(id => {
     const tool = finalApps.find(app => app.id === id);
     if (!tool) return null;
-    if (typeof tool.icon === "function") {
-      return tool.icon({
-        slot: "dial",
-        size: 20
-      });
-    }
-    return tool.icon;
+    return (0, _AppIcon.renderAppIcon)(tool.icon, {
+      slot: "dial",
+      size: 20,
+      color: tool.color
+    });
   }, [finalApps]);
 
   // Gate: Free tier only works in development mode
@@ -394,7 +398,8 @@ const FloatingDevTools = ({
         options: typeof externalSync === "object" ? externalSync : undefined,
         requiredEnvVars: requiredEnvVars,
         isPro: isLicensed,
-        licenseKey: licenseKey
+        licenseKey: licenseKey,
+        customApps: syncApps
       })]
     });
   }
@@ -434,7 +439,8 @@ const FloatingDevTools = ({
             options: typeof externalSync === "object" ? externalSync : undefined,
             requiredEnvVars: requiredEnvVars,
             isPro: isLicensed,
-            licenseKey: licenseKey
+            licenseKey: licenseKey,
+            customApps: syncApps
           })]
         })
       })

package/lib/commonjs/floatingMenu/FloatingMenu.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _floatingTools = require("./floatingTools");
+var _AppIcon = require("./AppIcon.js");
 var _DialDevTools = require("./dial/DialDevTools");
 var _DevToolsSettingsModal = require("./DevToolsSettingsModal");
 var _AppHost = require("./AppHost");
@@ -172,12 +173,13 @@ const FloatingMenu = ({
 
     // Only open modal if not a toggle-only tool
     if (app.launchMode !== "toggle-only") {
-      // Resolve the icon for minimize stack display
-      // IMPORTANT: Use React.createElement for function components to preserve hooks
-      const resolvedIcon = typeof app.icon === "function" ? /*#__PURE__*/_react.default.createElement(app.icon, {
+      // Resolve the icon for minimize stack display (createElement keeps
+      // function-icon hooks working; strings become text icons).
+      const resolvedIcon = (0, _AppIcon.renderAppIcon)(app.icon, {
         slot: "dial",
-        size: 20
-      }) : app.icon;
+        size: 20,
+        color: app.color
+      });
       open({
         id: app.id,
         title: app.name,
@@ -285,7 +287,11 @@ const FloatingMenu = ({
                 actions: mergedActions
               });
             }
-            return app.icon;
+            return (0, _AppIcon.renderAppIcon)(app.icon, {
+              slot: "row",
+              size: 16,
+              color: app.color
+            });
           })()
         }, `row-${app.id}`))]
       })

package/lib/commonjs/floatingMenu/ToolHost.js

@@ -168,6 +168,13 @@ function ToolModalShell({
   const subtitle = headerOverride?.subtitle ?? config.subtitle;
   const onBack = headerOverride?.onBack;
   const actions = headerOverride?.actions ?? config.headerActions;
+  const searchable = headerOverride?.searchable ?? config.searchable;
+
+  // A screen that hides search while it's open would strand the input with
+  // no way to dismiss it — close it on entry instead.
+  (0, _react.useEffect)(() => {
+    if (!searchable && isSearchActive) clearSearch();
+  }, [searchable, isSearchActive, clearSearch]);
 
   // Tool-scoped persistence via the custom namespace unless the user has the
   // shared-dimensions global setting on (all tools share one window size).
@@ -184,7 +191,8 @@ function ToolModalShell({
       title: title,
       subtitle: subtitle
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-      children: [!isSearchActive && actions, config.searchable && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HeaderSearchButton, {
+      children: [!isSearchActive && actions, searchable && !isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HeaderSearchButton, {
+        testID: `tool-search-${app.id}`,
         onPress: () => setIsSearchActive(true)
       })]
     })]
@@ -212,8 +220,10 @@ function ToolModalShell({
       styles: {},
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.bodyRoot,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
-          ...bodyProps
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Body, {
+            ...bodyProps
+          })
         }), toast && /*#__PURE__*/(0, _jsxRuntime.jsx)(ToastView, {
           message: toast.message,
           type: toast.type,

package/lib/commonjs/floatingMenu/autoExternalSync.js

@@ -180,7 +180,8 @@ function AutoExternalSync({
   options,
   requiredEnvVars,
   isPro,
-  licenseKey
+  licenseKey,
+  customApps
 }) {
   const {
     useExternalSyncSocket,
@@ -293,8 +294,17 @@ function AutoExternalSync({
     if (assetsModule?.assetsSyncAdapter) {
       map.assets = assetsModule.assetsSyncAdapter;
     }
+
+    // Third-party custom tools that declared InstalledApp.sync. Namespaced so
+    // a custom tool named "network" can't shadow the first-party adapter on
+    // the broker, in MCP call_action, or in desktop watch state.
+    for (const app of customApps ?? []) {
+      if (app?.sync) {
+        map[`custom:${app.id}`] = app.sync;
+      }
+    }
     return map;
-  }, [queryAdapter, requiredEnvVars]);
+  }, [queryAdapter, requiredEnvVars, customApps]);
   useExternalSync({
     tools,
     socket,

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

@@ -13,6 +13,7 @@ var _DialPagination = require("./DialPagination.js");
 var _dialUsageStore = require("./dialUsageStore.js");
 var _DevToolsSettingsModal = require("../DevToolsSettingsModal");
 var _license = require("@buoy-gg/license");
+var _AppIcon = require("../AppIcon.js");
 var _AppHost = require("../AppHost");
 var _OnboardingTooltip = require("./OnboardingTooltip");
 var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
@@ -175,9 +176,14 @@ const DialDevTools = ({
       map.set(app.id, {
         id: app.id,
         name: app.name,
-        // Pass both the pre-rendered icon (for non-function icons) and the
-        // component (for dynamic rendering).
-        icon: typeof app.icon === "function" ? null : app.icon,
+        // Pass both the pre-rendered icon (for non-function icons; strings
+        // resolve to auto-fitting text icons) and the component (for dynamic
+        // rendering).
+        icon: typeof app.icon === "function" ? null : (0, _AppIcon.renderAppIcon)(app.icon, {
+          slot: "dial",
+          size: 20,
+          color: app.color
+        }),
         // Cast to the expected type - the signature is compatible at runtime.
         iconComponent: typeof app.icon === "function" ? app.icon : undefined,
         color: app.color ?? _sharedUi.buoyColors.primary,
@@ -191,10 +197,11 @@ const DialDevTools = ({
 
           // Only open modal if not a toggle-only tool.
           if (app.launchMode !== "toggle-only") {
-            const resolvedIcon = typeof app.icon === "function" ? app.icon({
+            const resolvedIcon = (0, _AppIcon.renderAppIcon)(app.icon, {
               slot: "dial",
-              size: 20
-            }) : app.icon;
+              size: 20,
+              color: app.color
+            });
             open({
               id: app.id,
               title: app.name,