@buoy-gg/core 3.0.1 → 4.0.1

package/lib/module/floatingMenu/allToolsRegistry.js

@@ -0,0 +1,190 @@
+"use strict";
+
+/**
+ * Canonical registry of ALL dial-eligible tools React Buoy offers on mobile.
+ *
+ * This is the single source of truth used to compute which tools are
+ * "unavailable" (offered but not installed in the current app).  It lives
+ * inside the floating-menu package so nothing outside needs to be imported.
+ *
+ * Rules for this file:
+ *  - Only import from REQUIRED dependencies (@buoy-gg/floating-tools-core,
+ *    @buoy-gg/shared-ui, react-native) so the icons are always resolvable,
+ *    even when the optional tool packages are not installed.
+ *  - Only include tools whose preset slot is NOT "row" (row-only tools never
+ *    appear in the dial and have no "unavailable" state to show).
+ *  - Keep the order intentional: this order is the fallback when no usage
+ *    data exists for new/unavailable tools.
+ */
+
+import React from "react";
+import { View, Text } from "react-native";
+import { EnvIcon, ENV_ICON_COLOR, NetworkIcon, NETWORK_ICON_COLOR, StorageIcon, STORAGE_ICON_COLOR, QueryIcon, QUERY_ICON_COLOR, RoutesIcon, ROUTES_ICON_COLOR, HighlighterIcon, HIGHLIGHTER_ICON_COLOR, ReduxIcon, REDUX_ICON_COLOR, EventsIcon, EVENTS_ICON_COLOR, BenchmarkIcon, BENCHMARK_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+import { ImageOverlayIcon } from "@buoy-gg/shared-ui";
+
+// ─── Color constants for tools whose icons live in optional packages ─────────
+// Copied verbatim from the source icon components so the vendored copies below
+// render identically to the real tool icons.
+
+/** Zustand brand color — copied from @buoy-gg/zustand ZustandIcon.tsx */
+import { jsx as _jsx } from "react/jsx-runtime";
+const ZUSTAND_ICON_COLOR = "#463B3F";
+/** Jotai brand color — copied from @buoy-gg/jotai JotaiIcon.tsx */
+const JOTAI_ICON_COLOR = "#6C47FF";
+/** Image overlay purple — matches the preset */
+const IMAGE_OVERLAY_ICON_COLOR = "#A855F7";
+
+// ─── Vendored copies of optional-package icons ───────────────────────────────
+// Zustand and Jotai ship their real icons inside their own packages (which may
+// not be installed), so we cannot import them from a required dependency.
+//
+// The REAL icons in @buoy-gg/zustand and @buoy-gg/jotai are themselves a single
+// centered letter glyph (verified — there are no SVG logos in those packages).
+// These are faithful copies of those source components, so unavailable items
+// render the ACTUAL tool icon (just dimmed by DialIcon), not a placeholder.
+
+/** Faithful copy of @buoy-gg/zustand `ZustandIcon` */
+const ZustandIcon = ({
+  size,
+  color
+}) => /*#__PURE__*/_jsx(View, {
+  style: {
+    width: size,
+    height: size,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  children: /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: size * 0.75,
+      color: color || ZUSTAND_ICON_COLOR,
+      fontWeight: "700"
+    },
+    children: "Z"
+  })
+});
+
+/** Faithful copy of @buoy-gg/jotai `JotaiIcon` */
+const JotaiIcon = ({
+  size,
+  color
+}) => /*#__PURE__*/_jsx(View, {
+  style: {
+    width: size,
+    height: size,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  children: /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: size * 0.75,
+      color: color || JOTAI_ICON_COLOR,
+      fontWeight: "700"
+    },
+    children: "J"
+  })
+});
+
+// ─── Registry entry type ──────────────────────────────────────────────────────
+
+// ─── Canonical catalog ────────────────────────────────────────────────────────
+
+/**
+ * Full list of every dial-eligible tool React Buoy offers on mobile.
+ *
+ * Available (installed) tools are shown normally in the dial.
+ * Unavailable (not installed) tools are appended at the end of the dial and look
+ * like a normal item (real icon + real name) with a small muted "Unavailable"
+ * caption added; they are non-interactive.
+ *
+ * To add a new tool to Buoy:
+ *  1. Add its preset to autoDiscoverPresets.ts
+ *  2. Add an entry here so it appears in the "unavailable" section for apps
+ *     that haven't installed it yet.
+ */
+export const ALL_TOOLS_REGISTRY = [{
+  id: "env",
+  name: "ENV",
+  color: ENV_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(EnvIcon, {
+    size: size
+  })
+}, {
+  id: "network",
+  name: "NETWORK",
+  color: NETWORK_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(NetworkIcon, {
+    size: size
+  })
+}, {
+  id: "storage",
+  name: "STORAGE",
+  color: STORAGE_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(StorageIcon, {
+    size: size
+  })
+}, {
+  id: "query",
+  name: "QUERY",
+  color: QUERY_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(QueryIcon, {
+    size: size
+  })
+}, {
+  id: "route-events",
+  name: "ROUTES",
+  color: ROUTES_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(RoutesIcon, {
+    size: size
+  })
+}, {
+  id: "highlight-updates-modal",
+  name: "HIGHLIGHT",
+  color: HIGHLIGHTER_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(HighlighterIcon, {
+    size: size
+  })
+}, {
+  id: "redux",
+  name: "REDUX",
+  color: REDUX_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(ReduxIcon, {
+    size: size
+  })
+}, {
+  id: "zustand",
+  name: "ZUSTAND",
+  color: ZUSTAND_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(ZustandIcon, {
+    size: size
+  })
+}, {
+  id: "events",
+  name: "EVENTS",
+  color: EVENTS_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(EventsIcon, {
+    size: size
+  })
+}, {
+  id: "jotai",
+  name: "JOTAI",
+  color: JOTAI_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(JotaiIcon, {
+    size: size
+  })
+}, {
+  id: "image-overlay",
+  name: "IMG",
+  color: IMAGE_OVERLAY_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(ImageOverlayIcon, {
+    size: size,
+    color: IMAGE_OVERLAY_ICON_COLOR
+  })
+}, {
+  id: "perf-monitor-modal",
+  name: "BENCH",
+  color: BENCHMARK_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(BenchmarkIcon, {
+    size: size
+  })
+}];

package/lib/module/floatingMenu/autoExternalSync.js

@@ -0,0 +1,248 @@
+"use strict";
+
+/**
+ * Zero-config device→desktop sync for FloatingDevTools.
+ *
+ * When @buoy-gg/external-sync is installed, FloatingDevTools renders
+ * <AutoExternalSync /> in dev builds: it connects to the Buoy Desktop broker
+ * (localhost:42831 — a silent no-op when the desktop app isn't running) and
+ * registers a sync adapter for every installed tool package, discovered with
+ * the same guarded-require pattern as autoDiscoverPresets. No <DevToolsSync>
+ * wiring needed in the app.
+ *
+ * Identity defaults come from expo-constants when available (app name →
+ * "MyApp (ios)" / "myapp-ios"), overridable via the `externalSync` prop.
+ */
+import { useEffect, useMemo, useRef } from "react";
+import { Platform } from "react-native";
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// Module-level guarded requires: presence is constant for the app lifetime,
+// so hooks pulled from these modules keep a stable call order.
+//
+// IMPORTANT: each require() must sit LEXICALLY inside its own try block
+// (same pattern as autoDiscoverPresets) — Metro only marks a dependency as
+// optional when the require is directly inside a try statement. Wrapping it
+// in a helper/arrow makes Metro hard-fail the bundle for apps that don't
+// install that package.
+let externalSyncModule = null;
+let storageModule = null;
+let networkModule = null;
+let reactQueryModule = null;
+let routeEventsModule = null;
+let reduxModule = null;
+let zustandModule = null;
+let jotaiModule = null;
+let eventsModule = null;
+let consoleModule = null;
+let envModule = null;
+let highlightUpdatesModule = null;
+let debugBordersModule = null;
+let impersonateModule = null;
+let perfMonitorModule = null;
+let expoConstantsModule = null;
+try {
+  externalSyncModule = require("@buoy-gg/external-sync");
+} catch {
+  // not installed
+}
+try {
+  storageModule = require("@buoy-gg/storage");
+} catch {
+  // not installed
+}
+try {
+  networkModule = require("@buoy-gg/network");
+} catch {
+  // not installed
+}
+try {
+  reactQueryModule = require("@buoy-gg/react-query");
+} catch {
+  // not installed
+}
+try {
+  routeEventsModule = require("@buoy-gg/route-events");
+} catch {
+  // not installed
+}
+try {
+  reduxModule = require("@buoy-gg/redux");
+} catch {
+  // not installed
+}
+try {
+  zustandModule = require("@buoy-gg/zustand");
+} catch {
+  // not installed
+}
+try {
+  jotaiModule = require("@buoy-gg/jotai");
+} catch {
+  // not installed
+}
+try {
+  eventsModule = require("@buoy-gg/events");
+} catch {
+  // not installed
+}
+try {
+  consoleModule = require("@buoy-gg/console");
+} catch {
+  // not installed
+}
+try {
+  envModule = require("@buoy-gg/env");
+} catch {
+  // not installed
+}
+try {
+  highlightUpdatesModule = require("@buoy-gg/highlight-updates");
+} catch {
+  // not installed
+}
+try {
+  debugBordersModule = require("@buoy-gg/debug-borders");
+} catch {
+  // not installed
+}
+try {
+  impersonateModule = require("@buoy-gg/impersonate");
+} catch {
+  // not installed
+}
+try {
+  perfMonitorModule = require("@buoy-gg/perf-monitor");
+} catch {
+  // not installed
+}
+try {
+  expoConstantsModule = require("expo-constants");
+} catch {
+  // not installed (RN CLI apps)
+}
+
+/** Whether zero-config sync can run (the external-sync package is installed). */
+export function isExternalSyncAvailable() {
+  return !!externalSyncModule?.useExternalSyncSocket;
+}
+function getAppName() {
+  const constants = expoConstantsModule?.default ?? expoConstantsModule;
+  return constants?.expoConfig?.name ?? constants?.manifest2?.extra?.expoClient?.name ?? null;
+}
+function defaultIdentity() {
+  const appName = getAppName();
+  const slug = (appName ?? "buoy").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+  return {
+    deviceName: `${appName ?? "Buoy Device"} (${Platform.OS})`,
+    deviceId: `${slug || "buoy"}-${Platform.OS}`
+  };
+}
+export function AutoExternalSync({
+  options,
+  requiredEnvVars,
+  isPro,
+  licenseKey
+}) {
+  const {
+    useExternalSyncSocket,
+    useExternalSync
+  } = externalSyncModule;
+
+  // Context-based query adapter; null when there is no QueryClientProvider
+  // above FloatingDevTools (or the installed @buoy-gg/react-query predates
+  // the hook).
+  const queryAdapter = reactQueryModule?.useReactQuerySyncAdapter ? reactQueryModule.useReactQuerySyncAdapter() : null;
+  const identity = useMemo(defaultIdentity, []);
+  const deviceId = options?.deviceId ?? identity.deviceId;
+  const {
+    socket
+  } = useExternalSyncSocket({
+    deviceName: options?.deviceName ?? identity.deviceName,
+    socketURL: options?.socketURL ?? "http://localhost:42831",
+    persistentDeviceId: deviceId,
+    platform: Platform.OS,
+    enableLogs: options?.enableLogs
+  });
+
+  // The license validates asynchronously (Keygen call on mount), usually AFTER
+  // the socket handshake is already sent — so the one-shot handshake query
+  // can't carry Pro status reliably. Emit it as an event whenever it resolves
+  // or changes, and on every (re)connect. The broker stores it on the device
+  // record and rebroadcasts, so the desktop dashboard can auto-adopt the key.
+  const licenseRef = useRef({
+    isPro,
+    licenseKey
+  });
+  licenseRef.current = {
+    isPro,
+    licenseKey
+  };
+  useEffect(() => {
+    if (!socket) return;
+    const emitLicense = () => {
+      socket.emit("device-license", {
+        isPro: licenseRef.current.isPro ? "1" : "0",
+        licenseKey: licenseRef.current.licenseKey ?? ""
+      });
+    };
+    if (socket.connected) emitLicense();
+    socket.on("connect", emitLicense);
+    return () => {
+      socket.off("connect", emitLicense);
+    };
+  }, [socket, isPro, licenseKey]);
+  const tools = useMemo(() => {
+    const map = {};
+    if (storageModule?.storageSyncAdapter) {
+      map.storage = storageModule.storageSyncAdapter;
+    }
+    if (networkModule?.networkSyncAdapter) {
+      map.network = networkModule.networkSyncAdapter;
+    }
+    if (queryAdapter) {
+      map.query = queryAdapter;
+    }
+    if (routeEventsModule?.routeEventsSyncAdapter) {
+      map["route-events"] = routeEventsModule.routeEventsSyncAdapter;
+    }
+    if (reduxModule?.reduxSyncAdapter) {
+      map.redux = reduxModule.reduxSyncAdapter;
+    }
+    if (zustandModule?.zustandSyncAdapter) {
+      map.zustand = zustandModule.zustandSyncAdapter;
+    }
+    if (jotaiModule?.jotaiSyncAdapter) {
+      map.jotai = jotaiModule.jotaiSyncAdapter;
+    }
+    if (eventsModule?.eventsSyncAdapter) {
+      map.events = eventsModule.eventsSyncAdapter;
+    }
+    if (consoleModule?.consoleSyncAdapter) {
+      map.console = consoleModule.consoleSyncAdapter;
+    }
+    if (envModule?.createEnvSyncAdapter) {
+      map.env = envModule.createEnvSyncAdapter(requiredEnvVars ?? []);
+    }
+    if (highlightUpdatesModule?.highlightUpdatesSyncAdapter) {
+      map["highlight-updates"] = highlightUpdatesModule.highlightUpdatesSyncAdapter;
+    }
+    if (debugBordersModule?.debugBordersSyncAdapter) {
+      map["debug-borders"] = debugBordersModule.debugBordersSyncAdapter;
+    }
+    if (impersonateModule?.impersonateSyncAdapter) {
+      map.impersonate = impersonateModule.impersonateSyncAdapter;
+    }
+    if (perfMonitorModule?.perfMonitorSyncAdapter) {
+      map["perf-monitor"] = perfMonitorModule.perfMonitorSyncAdapter;
+    }
+    return map;
+  }, [queryAdapter, requiredEnvVars]);
+  useExternalSync({
+    tools,
+    socket,
+    deviceId,
+    enableLogs: options?.enableLogs
+  });
+  return null;
+}

package/lib/module/floatingMenu/defaultConfig.js

@@ -23,7 +23,7 @@
  * This is a union type of all auto-discovered tool IDs.
  */
 
-// Render count analysis modal (@buoy-gg/highlight-updates)
+// Benchmark recording modal (@buoy-gg/perf-monitor)
 
 /**
  * Special floating-only tool IDs that only appear in the floating bubble row.