@buoy-gg/core 7.0.17 → 7.0.19

package/lib/module/floatingMenu/AppHost.js

@@ -4,6 +4,7 @@ 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";
@@ -64,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,

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,
@@ -281,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}`))]
       })

package/lib/module/floatingMenu/ToolHost.js

@@ -12,7 +12,7 @@
  */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Animated, StyleSheet, Text, View } from "react-native";
-import { JsModal, ModalHeader, HeaderSearchButton, devToolsStorageKeys, buoyColors, gameUIColors } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, HeaderSearchButton, TickProvider, devToolsStorageKeys, buoyColors, gameUIColors } from "@buoy-gg/shared-ui";
 
 /** Per-screen header overrides a tool body can apply (see `useToolHeader`). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -160,6 +160,13 @@ export 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.
+  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).
@@ -176,7 +183,8 @@ export function ToolModalShell({
       title: title,
       subtitle: subtitle
     }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-      children: [!isSearchActive && actions, config.searchable && !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
+      children: [!isSearchActive && actions, searchable && !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
+        testID: `tool-search-${app.id}`,
         onPress: () => setIsSearchActive(true)
       })]
     })]
@@ -204,8 +212,10 @@ export function ToolModalShell({
       styles: {},
       children: /*#__PURE__*/_jsxs(View, {
         style: styles.bodyRoot,
-        children: [/*#__PURE__*/_jsx(Body, {
-          ...bodyProps
+        children: [/*#__PURE__*/_jsx(TickProvider, {
+          children: /*#__PURE__*/_jsx(Body, {
+            ...bodyProps
+          })
         }), toast && /*#__PURE__*/_jsx(ToastView, {
           message: toast.message,
           type: toast.type,

package/lib/module/floatingMenu/autoExternalSync.js

@@ -175,7 +175,8 @@ export function AutoExternalSync({
   options,
   requiredEnvVars,
   isPro,
-  licenseKey
+  licenseKey,
+  customApps
 }) {
   const {
     useExternalSyncSocket,
@@ -288,8 +289,17 @@ export 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/module/floatingMenu/dial/DialDevTools.js

@@ -11,6 +11,7 @@ import { getRankedToolIds, isDialUsageLoaded, loadDialUsage, recordToolUsage } f
 import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
 import { useProAccess } from "@buoy-gg/license";
+import { renderAppIcon } from "../AppIcon.js";
 import { useAppHost } from "../AppHost";
 import { OnboardingTooltip } from "./OnboardingTooltip";
 import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, DIAL_ICON_GLYPH_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
@@ -172,9 +173,14 @@ export 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 : 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 ?? buoyColors.primary,
@@ -188,10 +194,11 @@ export 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 = renderAppIcon(app.icon, {
               slot: "dial",
-              size: 20
-            }) : app.icon;
+              size: 20,
+              color: app.color
+            });
             open({
               id: app.id,
               title: app.name,

package/lib/module/toolkit.js

@@ -6,6 +6,11 @@
  * one dependency and never touch `@buoy-gg/shared-ui` (which stays internal
  * and free to churn).
  *
+ * Design rules for this surface (keep it Tailwind-small):
+ * - Variants over components: a styling difference is a prop, not an export.
+ * - Behavior earns a component (CopyButton); a size preset does not.
+ * - The tool shell owns chrome — header/back/search buttons are not user API.
+ *
  * Everything here is considered API: additions are minor bumps, removals are
  * major. If a component you want is missing, that's deliberate — request it
  * rather than deep-importing.
@@ -14,32 +19,44 @@
 // ---- Theme tokens ---------------------------------------------------------
 export { toolTheme } from "@buoy-gg/shared-ui";
 
-// ---- Layout / lists -------------------------------------------------------
-export { CompactRow, SectionHeader, TabSelector, EmptyState, NoDataEmptyState, NoResultsEmptyState, NoSearchResultsEmptyState } from "@buoy-gg/shared-ui";
-
-// ---- Badges ---------------------------------------------------------------
-export { Badge, StatusBadge, CountBadge, TypeBadge, MethodBadge } from "@buoy-gg/shared-ui";
+// ---- Badges & status ------------------------------------------------------
+// One Badge for every chip job; color it with the semantic helpers.
+export { Badge, StatusDot, statusColor, methodColor, typeColor } from "./toolkitComponents.js";
 
 // ---- Buttons --------------------------------------------------------------
-export { ToolButton, CopyButton, InlineCopyButton, ToolbarCopyButton, ToolbarClearButton, PowerToggleButton, HeaderSearchButton } from "@buoy-gg/shared-ui";
+export { ToolButton as Button, CopyButton, PowerToggleButton as PowerToggle } from "@buoy-gg/shared-ui";
+
+// ---- Rows & cards ---------------------------------------------------------
+export { CompactRow as Row, DevToolsCard as Card } from "@buoy-gg/shared-ui";
+export { InfoRow } from "./toolkitComponents.js";
 
-// ---- Detail / data display ------------------------------------------------
-export { EventStepperFooter } from "@buoy-gg/shared-ui";
+// ---- Structure ------------------------------------------------------------
+export { SectionHeader, CollapsibleSection, TabSelector, EmptyState, SearchBar, EventStepperFooter } from "@buoy-gg/shared-ui";
+
+// ---- Data -----------------------------------------------------------------
 export { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+export { DiffViewer } from "./toolkitComponents.js";
+
+// ---- Stores (event log / observable state for tool data) ------------------
+export { BaseEventStore } from "@buoy-gg/shared-ui";
 
 // ---- Time -----------------------------------------------------------------
-export { RelativeTime, formatRelativeTime } from "@buoy-gg/shared-ui";
+// The tool shell mounts the shared tick clock, so RelativeTime just works.
+export { RelativeTime } from "@buoy-gg/shared-ui";
+
+// ---- Formatting -----------------------------------------------------------
+export { formatBytes, formatDuration, formatNumber, truncateMiddle, safeStringify } from "@buoy-gg/shared-ui";
 
 // ---- Persistence ----------------------------------------------------------
-export { persistentStorage, devToolsStorageKeys, usePersistedState } from "@buoy-gg/shared-ui";
+export { usePersistedState, persistentStorage, devToolsStorageKeys } from "@buoy-gg/shared-ui";
 
 // ---- Hooks / utils --------------------------------------------------------
-export { useSafeAreaInsets, copyToClipboard, displayValue, safeStringify } from "@buoy-gg/shared-ui";
+export { useSafeAreaInsets, copyToClipboard } from "@buoy-gg/shared-ui";
 
-// ---- Manual chrome (advanced) --------------------------------------------
-// Most tools should use `InstalledApp.modal` + `useToolHost` instead; these
-// exist for tools that need full control of their shell.
-export { JsModal, ModalHeader } from "@buoy-gg/shared-ui";
+// ---- Manual chrome (advanced escape hatch) --------------------------------
+// Tools should use `InstalledApp.modal` + `useToolHost` instead; JsModal is
+// for the rare tool that needs full control of its shell.
+export { JsModal } from "@buoy-gg/shared-ui";
 
 // ---- Icons (curated lucide set) ------------------------------------------
-export { Activity, AlertTriangle, Bug, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Copy, Database, Eye, EyeOff, FileJson, FileText, Filter, FlaskConical, Globe, Hash, Info, Key, Layers, Lock, Pause, Play, Plus, Power, RefreshCw, Search, Settings, Shield, Trash2, User, Wifi, X, Zap } from "@buoy-gg/shared-ui";
+export { Activity, AlertTriangle, Bug, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Copy, Database, Eye, EyeOff, FileJson, FileText, Filter, FlaskConical, Globe, Hash, Info, Key, Layers, Lock, Pause, Play, Plus, Power, RefreshCw, Search, Settings, Shield, Trash2, User, Wifi, X, Zap, AlertCircle, BarChart3, Bookmark, Cloud, Download, Edit3, GitBranch, HardDrive, HelpCircle, Home, Image, Link, Maximize2, Minus, Palette, Pin, Route, Server, Smartphone, Square, CheckSquare, Timer, Unlock, Upload, Users, XCircle } from "@buoy-gg/shared-ui";

package/lib/module/toolkitComponents.js

@@ -0,0 +1,230 @@
+"use strict";
+
+/**
+ * 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.
+ */
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { CopyButton, toolTheme } from "@buoy-gg/shared-ui";
+import { TreeDiffViewer, SplitDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
+
+// ---------------------------------------------------------------------------
+// Semantic color helpers — pair with <Badge>/<StatusDot> instead of exporting
+// a preset component per domain.
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STATUS_COLORS = {
+  success: toolTheme.colors.success,
+  active: toolTheme.colors.success,
+  connected: toolTheme.colors.success,
+  error: toolTheme.colors.error,
+  failed: toolTheme.colors.error,
+  warning: toolTheme.colors.warning,
+  stale: toolTheme.colors.warning,
+  pending: toolTheme.colors.info,
+  loading: toolTheme.colors.info,
+  fetching: toolTheme.colors.info,
+  info: toolTheme.colors.info,
+  inactive: toolTheme.colors.textMuted,
+  idle: toolTheme.colors.textMuted
+};
+
+/** Map a status word ("success", "pending", "stale"...) to a semantic color. */
+export function statusColor(status) {
+  return STATUS_COLORS[status.toLowerCase()] ?? toolTheme.colors.textMuted;
+}
+const METHOD_COLORS = {
+  GET: toolTheme.colors.info,
+  POST: toolTheme.colors.success,
+  PUT: toolTheme.colors.warning,
+  PATCH: toolTheme.colors.warning,
+  DELETE: toolTheme.colors.error
+};
+
+/** Map an HTTP method to its conventional color. */
+export function methodColor(method) {
+  return METHOD_COLORS[method.toUpperCase()] ?? toolTheme.colors.textSecondary;
+}
+const TYPE_COLORS = {
+  string: toolTheme.colors.success,
+  number: toolTheme.colors.info,
+  boolean: toolTheme.colors.warning,
+  object: toolTheme.colors.accent,
+  array: toolTheme.colors.accent,
+  function: toolTheme.colors.error,
+  null: toolTheme.colors.textMuted,
+  undefined: toolTheme.colors.textMuted
+};
+
+/** Map a JS value-type name to its display color. */
+export function typeColor(type) {
+  return TYPE_COLORS[type.toLowerCase()] ?? toolTheme.colors.textSecondary;
+}
+
+// ---------------------------------------------------------------------------
+// Badge — the one chip. Color it with statusColor()/methodColor()/typeColor()
+// (or any hex); shape/typography are props, not sibling components.
+// ---------------------------------------------------------------------------
+
+export function Badge({
+  children,
+  color = toolTheme.colors.textSecondary,
+  icon,
+  size = "small",
+  pill = false,
+  mono = false,
+  style
+}) {
+  const isText = typeof children === "string" || typeof children === "number";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [badgeStyles.base, size === "medium" && badgeStyles.medium, pill && badgeStyles.pill, {
+      backgroundColor: color + "1A",
+      borderColor: color + "40"
+    }, style],
+    children: [icon, isText ? /*#__PURE__*/_jsx(Text, {
+      style: [badgeStyles.text, size === "medium" && badgeStyles.textMedium, mono && badgeStyles.textMono, {
+        color
+      }],
+      numberOfLines: 1,
+      children: children
+    }) : children]
+  });
+}
+const badgeStyles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 4,
+    borderWidth: 1,
+    borderRadius: toolTheme.radius.sm,
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  medium: {
+    paddingHorizontal: 8,
+    paddingVertical: 3
+  },
+  pill: {
+    borderRadius: toolTheme.radius.pill,
+    minWidth: 20,
+    justifyContent: "center"
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.3
+  },
+  textMedium: {
+    fontSize: 12
+  },
+  textMono: {
+    fontFamily: toolTheme.text.mono.fontFamily
+  }
+});
+
+// ---------------------------------------------------------------------------
+// StatusDot — the bare status circle (list rows, connection indicators).
+// ---------------------------------------------------------------------------
+
+export function StatusDot({
+  status,
+  color,
+  size = 8,
+  style
+}) {
+  const dotColor = color ?? (status ? statusColor(status) : toolTheme.colors.textMuted);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      backgroundColor: dotColor
+    }, style]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// InfoRow — the label/value line of every detail screen, with optional copy.
+// ---------------------------------------------------------------------------
+
+export function InfoRow({
+  label,
+  value,
+  copyable = false,
+  style
+}) {
+  const isText = typeof value === "string" || typeof value === "number";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [infoRowStyles.row, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: infoRowStyles.label,
+      numberOfLines: 1,
+      children: label
+    }), /*#__PURE__*/_jsx(View, {
+      style: infoRowStyles.value,
+      children: isText ? /*#__PURE__*/_jsx(Text, {
+        style: infoRowStyles.valueText,
+        numberOfLines: 2,
+        children: String(value)
+      }) : value
+    }), copyable && value != null && /*#__PURE__*/_jsx(CopyButton, {
+      value: value,
+      size: 12
+    })]
+  });
+}
+const infoRowStyles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: toolTheme.spacing.sm,
+    paddingVertical: 3
+  },
+  label: {
+    ...toolTheme.text.label,
+    color: toolTheme.colors.textMuted,
+    minWidth: 72
+  },
+  value: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  valueText: {
+    ...toolTheme.text.mono,
+    color: toolTheme.colors.text
+  }
+});
+
+// ---------------------------------------------------------------------------
+// DiffViewer — one before/after component; the rendering strategy is a mode.
+// ---------------------------------------------------------------------------
+
+export function DiffViewer({
+  oldValue,
+  newValue,
+  mode = "tree",
+  showUnchanged = true,
+  scrollEnabled = false,
+  height = 220
+}) {
+  if (mode === "text") {
+    return /*#__PURE__*/_jsx(SplitDiffViewer, {
+      oldValue: oldValue,
+      newValue: newValue,
+      height: height
+    });
+  }
+  return /*#__PURE__*/_jsx(TreeDiffViewer, {
+    oldValue: oldValue,
+    newValue: newValue,
+    showUnchanged: showUnchanged,
+    scrollEnabled: scrollEnabled
+  });
+}

package/lib/typescript/commonjs/floatingMenu/AppHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHost.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/AppHost.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAQZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EAIZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAEL,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,MAAM,CAAC;IACvD,KAAK,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACrC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACxE,4CAA4C;IAC5C,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9C,CAAC;AAaF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sBA4NpE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,2BAgBtB,CAAC;AAkHF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,gCAsFtB,CAAC"}
+{"version":3,"file":"AppHost.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/AppHost.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAQZ,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EAIZ,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAEL,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAIjC,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,YAAY,CAAC,KAAK,MAAM,CAAC;IACvD,KAAK,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACrC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mFAAmF;IACnF,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACxE,4CAA4C;IAC5C,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9C,CAAC;AAaF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,sBA6NpE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,2BAgBtB,CAAC;AAkHF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,gCAsFtB,CAAC"}

package/lib/typescript/commonjs/floatingMenu/AppHost.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHost.web.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/AppHost.web.tsx"],"names":[],"mappings":"AAuBA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,WAAW,EACX,cAAc,EAEf,MAAM,gBAAgB,CAAC;AAGxB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,MAAM,CAAC;IACtC,KAAK,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9C,CAAC;AAuBF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAsNpE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,QAAO,mBAgB7B,CAAC;AAmGF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,0CA8BtB,CAAC"}
+{"version":3,"file":"AppHost.web.d.ts","sourceRoot":"","sources":["../../../../src/floatingMenu/AppHost.web.tsx"],"names":[],"mappings":"AAuBA,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,WAAW,EACX,cAAc,EAEf,MAAM,gBAAgB,CAAC;AAIxB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,MAAM,CAAC;IACtC,KAAK,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACpC,wDAAwD;IACxD,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,4CAA4C;IAC5C,WAAW,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;CAC9C,CAAC;AAuBF;;;;GAIG;AACH,eAAO,MAAM,eAAe,GAAI,cAAc;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,gCAuNpE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,QAAO,mBAgB7B,CAAC;AAmGF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,0CA8BtB,CAAC"}