@buoy-gg/core 7.0.16 → 7.0.18

package/lib/commonjs/toolkitComponents.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = Badge;
+exports.DiffViewer = DiffViewer;
+exports.InfoRow = InfoRow;
+exports.StatusDot = StatusDot;
+exports.methodColor = methodColor;
+exports.statusColor = statusColor;
+exports.typeColor = typeColor;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Facade primitives for the public custom-tools toolkit (see toolkit.ts).
+ *
+ * shared-ui grew several overlapping treatments of the same jobs (seven badge
+ * variants, four copy buttons, two diff viewers...). The public surface merges
+ * each job into ONE component with variants, implemented here on toolTheme —
+ * shared-ui's internals stay unchanged for first-party tools.
+ */
+
+// ---------------------------------------------------------------------------
+// Semantic color helpers — pair with <Badge>/<StatusDot> instead of exporting
+// a preset component per domain.
+// ---------------------------------------------------------------------------
+const STATUS_COLORS = {
+  success: _sharedUi.toolTheme.colors.success,
+  active: _sharedUi.toolTheme.colors.success,
+  connected: _sharedUi.toolTheme.colors.success,
+  error: _sharedUi.toolTheme.colors.error,
+  failed: _sharedUi.toolTheme.colors.error,
+  warning: _sharedUi.toolTheme.colors.warning,
+  stale: _sharedUi.toolTheme.colors.warning,
+  pending: _sharedUi.toolTheme.colors.info,
+  loading: _sharedUi.toolTheme.colors.info,
+  fetching: _sharedUi.toolTheme.colors.info,
+  info: _sharedUi.toolTheme.colors.info,
+  inactive: _sharedUi.toolTheme.colors.textMuted,
+  idle: _sharedUi.toolTheme.colors.textMuted
+};
+
+/** Map a status word ("success", "pending", "stale"...) to a semantic color. */
+function statusColor(status) {
+  return STATUS_COLORS[status.toLowerCase()] ?? _sharedUi.toolTheme.colors.textMuted;
+}
+const METHOD_COLORS = {
+  GET: _sharedUi.toolTheme.colors.info,
+  POST: _sharedUi.toolTheme.colors.success,
+  PUT: _sharedUi.toolTheme.colors.warning,
+  PATCH: _sharedUi.toolTheme.colors.warning,
+  DELETE: _sharedUi.toolTheme.colors.error
+};
+
+/** Map an HTTP method to its conventional color. */
+function methodColor(method) {
+  return METHOD_COLORS[method.toUpperCase()] ?? _sharedUi.toolTheme.colors.textSecondary;
+}
+const TYPE_COLORS = {
+  string: _sharedUi.toolTheme.colors.success,
+  number: _sharedUi.toolTheme.colors.info,
+  boolean: _sharedUi.toolTheme.colors.warning,
+  object: _sharedUi.toolTheme.colors.accent,
+  array: _sharedUi.toolTheme.colors.accent,
+  function: _sharedUi.toolTheme.colors.error,
+  null: _sharedUi.toolTheme.colors.textMuted,
+  undefined: _sharedUi.toolTheme.colors.textMuted
+};
+
+/** Map a JS value-type name to its display color. */
+function typeColor(type) {
+  return TYPE_COLORS[type.toLowerCase()] ?? _sharedUi.toolTheme.colors.textSecondary;
+}
+
+// ---------------------------------------------------------------------------
+// Badge — the one chip. Color it with statusColor()/methodColor()/typeColor()
+// (or any hex); shape/typography are props, not sibling components.
+// ---------------------------------------------------------------------------
+
+function Badge({
+  children,
+  color = _sharedUi.toolTheme.colors.textSecondary,
+  icon,
+  size = "small",
+  pill = false,
+  mono = false,
+  style
+}) {
+  const isText = typeof children === "string" || typeof children === "number";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [badgeStyles.base, size === "medium" && badgeStyles.medium, pill && badgeStyles.pill, {
+      backgroundColor: color + "1A",
+      borderColor: color + "40"
+    }, style],
+    children: [icon, isText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [badgeStyles.text, size === "medium" && badgeStyles.textMedium, mono && badgeStyles.textMono, {
+        color
+      }],
+      numberOfLines: 1,
+      children: children
+    }) : children]
+  });
+}
+const badgeStyles = _reactNative.StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 4,
+    borderWidth: 1,
+    borderRadius: _sharedUi.toolTheme.radius.sm,
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  medium: {
+    paddingHorizontal: 8,
+    paddingVertical: 3
+  },
+  pill: {
+    borderRadius: _sharedUi.toolTheme.radius.pill,
+    minWidth: 20,
+    justifyContent: "center"
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.3
+  },
+  textMedium: {
+    fontSize: 12
+  },
+  textMono: {
+    fontFamily: _sharedUi.toolTheme.text.mono.fontFamily
+  }
+});
+
+// ---------------------------------------------------------------------------
+// StatusDot — the bare status circle (list rows, connection indicators).
+// ---------------------------------------------------------------------------
+
+function StatusDot({
+  status,
+  color,
+  size = 8,
+  style
+}) {
+  const dotColor = color ?? (status ? statusColor(status) : _sharedUi.toolTheme.colors.textMuted);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: dotColor
+    }, style]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// InfoRow — the label/value line of every detail screen, with optional copy.
+// ---------------------------------------------------------------------------
+
+function InfoRow({
+  label,
+  value,
+  copyable = false,
+  style
+}) {
+  const isText = typeof value === "string" || typeof value === "number";
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [infoRowStyles.row, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: infoRowStyles.label,
+      numberOfLines: 1,
+      children: label
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: infoRowStyles.value,
+      children: isText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: infoRowStyles.valueText,
+        numberOfLines: 2,
+        children: String(value)
+      }) : value
+    }), copyable && value != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
+      value: value,
+      size: 12
+    })]
+  });
+}
+const infoRowStyles = _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: _sharedUi.toolTheme.spacing.sm,
+    paddingVertical: 3
+  },
+  label: {
+    ..._sharedUi.toolTheme.text.label,
+    color: _sharedUi.toolTheme.colors.textMuted,
+    minWidth: 72
+  },
+  value: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  valueText: {
+    ..._sharedUi.toolTheme.text.mono,
+    color: _sharedUi.toolTheme.colors.text
+  }
+});
+
+// ---------------------------------------------------------------------------
+// DiffViewer — one before/after component; the rendering strategy is a mode.
+// ---------------------------------------------------------------------------
+
+function DiffViewer({
+  oldValue,
+  newValue,
+  mode = "tree",
+  showUnchanged = true,
+  scrollEnabled = false,
+  height = 220
+}) {
+  if (mode === "text") {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.SplitDiffViewer, {
+      oldValue: oldValue,
+      newValue: newValue,
+      height: height
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+    oldValue: oldValue,
+    newValue: newValue,
+    showUnchanged: showUnchanged,
+    scrollEnabled: scrollEnabled
+  });
+}

package/lib/module/floatingMenu/AppHost.js

@@ -4,7 +4,9 @@ import { persistentStorage, setExpandableWindowControls } from "@buoy-gg/shared-
 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.js";
 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);
@@ -63,10 +65,11 @@ export const AppHostProvider = ({
     }) => {
       const appDef = installedAppsRef.current.find(app => app.id === appId);
       if (appDef) {
-        const resolvedIcon = typeof appDef.icon === "function" ? appDef.icon({
+        const resolvedIcon = renderAppIcon(appDef.icon, {
           slot: "dial",
-          size: 20
-        }) : appDef.icon;
+          size: 20,
+          color: appDef.color
+        });
         open({
           id: appDef.id,
           title: appDef.name,
@@ -76,6 +79,7 @@ export const AppHostProvider = ({
           singleton: appDef.singleton,
           icon: resolvedIcon,
           color: appDef.color,
+          modal: appDef.modal,
           minimized: minimized // Preserve minimized state
         });
       }
@@ -250,6 +254,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__*/_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,

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

@@ -25,6 +25,7 @@
 import { persistentStorage } from "@buoy-gg/shared-ui";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { resolveOpenAppsState } from "./AppHostLogic.js";
+import { renderAppIcon } from "./AppIcon.js";
 import { getBubbleAnchorPosition } from "./floatingTools.web.js";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const AppHostContext = /*#__PURE__*/createContext(null);
@@ -81,7 +82,11 @@ export 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 = renderAppIcon(appDef.icon, {
+          slot: "dial",
+          size: 20,
+          color: appDef.color
+        });
         open({
           id: appDef.id,
           title: appDef.name,

package/lib/module/floatingMenu/AppIcon.js

@@ -0,0 +1,84 @@
+"use strict";
+
+/**
+ * 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.
+ */
+import React from "react";
+import { Text, View } from "react-native";
+import { toolTheme } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** 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);
+}
+export function AppTextIcon({
+  label,
+  size,
+  color = 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__*/_jsx(View, {
+    style: {
+      minWidth: size,
+      maxWidth,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: /*#__PURE__*/_jsx(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.
+ */
+export function renderAppIcon(icon, ctx) {
+  if (icon == null) return icon;
+  if (typeof icon === "function") {
+    return /*#__PURE__*/React.createElement(icon, {
+      slot: ctx.slot,
+      size: ctx.size,
+      state: ctx.state,
+      actions: ctx.actions
+    });
+  }
+  if (typeof icon === "string" || typeof icon === "number") {
+    return /*#__PURE__*/_jsx(AppTextIcon, {
+      label: String(icon),
+      size: ctx.size,
+      color: ctx.color
+    });
+  }
+  return icon;
+}

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -6,6 +6,7 @@ import { AppHostProvider } from "./AppHost";
 import { FloatingMenu } from "./FloatingMenu.js";
 import { AppOverlay } from "./AppHost";
 import { autoDiscoverPresets, autoDiscoverPresetsWithCustom } from "./autoDiscoverPresets.js";
+import { renderAppIcon } from "./AppIcon.js";
 import { DevToolsVisibilityProvider } from "./DevToolsVisibilityContext.js";
 import { reportOptionalRequireError } from "./optionalRequire.js";
 import { HintsProvider, LicenseEntryModal, normalizeEnvironment } from "@buoy-gg/shared-ui";
@@ -226,6 +227,11 @@ export const FloatingDevTools = ({
   // identity (and re-ran discovery) on every parent render.
   const finalApps = useMemo(() => userApps ? autoDiscoverPresetsWithCustom(userApps) : 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 = useMemo(() => finalApps.filter(app => app.sync), [finalApps]);
+
   // Check if debug-borders is installed and auto-render the overlay
   const DebugBordersOverlay = useMemo(() => {
     try {
@@ -362,13 +368,11 @@ export const FloatingDevTools = ({
   const getToolIcon = 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 renderAppIcon(tool.icon, {
+      slot: "dial",
+      size: 20,
+      color: tool.color
+    });
   }, [finalApps]);
 
   // Gate: Free tier only works in development mode
@@ -390,7 +394,8 @@ export const FloatingDevTools = ({
         options: typeof externalSync === "object" ? externalSync : undefined,
         requiredEnvVars: requiredEnvVars,
         isPro: isLicensed,
-        licenseKey: licenseKey
+        licenseKey: licenseKey,
+        customApps: syncApps
       })]
     });
   }
@@ -430,7 +435,8 @@ export const FloatingDevTools = ({
             options: typeof externalSync === "object" ? externalSync : undefined,
             requiredEnvVars: requiredEnvVars,
             isPro: isLicensed,
-            licenseKey: licenseKey
+            licenseKey: licenseKey,
+            customApps: syncApps
           })]
         })
       })

package/lib/module/floatingMenu/FloatingMenu.js

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { TouchableOpacity, StyleSheet, View } from "react-native";
 import { absoluteFill } from "@buoy-gg/shared-ui";
 import { FloatingTools, UserStatus } from "./floatingTools";
+import { renderAppIcon } from "./AppIcon.js";
 import { DialDevTools } from "./dial/DialDevTools";
 import { EnvironmentIndicator, persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { useDevToolsSettings } from "./DevToolsSettingsModal";
@@ -168,12 +169,13 @@ export 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.createElement(app.icon, {
+      // Resolve the icon for minimize stack display (createElement keeps
+      // function-icon hooks working; strings become text icons).
+      const resolvedIcon = renderAppIcon(app.icon, {
         slot: "dial",
-        size: 20
-      }) : app.icon;
+        size: 20,
+        color: app.color
+      });
       open({
         id: app.id,
         title: app.name,
@@ -182,7 +184,8 @@ export const FloatingMenu = ({
         launchMode: app.launchMode ?? "self-modal",
         singleton: app.singleton ?? true,
         icon: resolvedIcon,
-        color: app.color
+        color: app.color,
+        modal: app.modal
       });
     }
   };
@@ -280,7 +283,11 @@ export const FloatingMenu = ({
                 actions: mergedActions
               });
             }
-            return app.icon;
+            return renderAppIcon(app.icon, {
+              slot: "row",
+              size: 16,
+              color: app.color
+            });
           })()
         }, `row-${app.id}`))]
       })