@buoy-gg/route-events 3.0.1 → 4.0.1

package/lib/module/components/RoutesSitemap.js

@@ -12,9 +12,9 @@
  */
 
 import { useState, useCallback, useMemo, useEffect } from "react";
-import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert } from "react-native";
+import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert, Platform } from "react-native";
 import { useSafeRouter } from "@buoy-gg/shared-ui";
-import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, formatRelativeTime, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+import { Search, ChevronDown, ChevronRight, Home, InlineCopyButton, CopyButton, RefreshCw, formatRelativeTime, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useRouteSitemap } from "../useRouteSitemap";
 
@@ -22,12 +22,35 @@ import { useRouteSitemap } from "../useRouteSitemap";
 // Types
 // ============================================================================
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// On desktop (web) the toolbar has far more room, so scale the action buttons
+// up for easier clicking and a less cramped header.
+const IS_DESKTOP = Platform.OS === "web";
+const ACTION_ICON_SIZE = IS_DESKTOP ? 22 : 16;
+
+// Synthetic route representing the app's home/index ("/"). Used by the
+// "Home" toolbar shortcut so navigation works the same as tapping any route.
+const HOME_ROUTE = {
+  path: "/",
+  name: "index",
+  type: "index",
+  params: [],
+  nodeType: "route",
+  contextKey: "/",
+  isInternal: false,
+  children: [],
+  depth: 0
+};
+
 // ============================================================================
 // Main Component
 // ============================================================================
 
 export function RoutesSitemap({
-  style
+  style,
+  injectedRoutes,
+  injectedSource,
+  injectedLastUpdatedAt,
+  onNavigateRoute
 }) {
   const [searchQuery, setSearchQuery] = useState("");
   const [isSearching, setIsSearching] = useState(false);
@@ -49,6 +72,7 @@ export function RoutesSitemap({
     groups,
     stats,
     isLoaded,
+    isSupported,
     filteredRoutes,
     routes,
     refresh,
@@ -56,7 +80,10 @@ export function RoutesSitemap({
     source
   } = useRouteSitemap({
     searchQuery,
-    sortBy: "path"
+    sortBy: "path",
+    injectedRoutes,
+    injectedSource,
+    injectedLastUpdatedAt
   });
 
   // Prepare copy data - memoized so it only rebuilds when dependencies change
@@ -143,9 +170,16 @@ export function RoutesSitemap({
       }
     }], "plain-text");
   }, [router]);
-  const handleNavigate = useCallback(route => {
-    // Gate behind Pro
-    if (!isPro) {
+  const handleNavigate = useCallback((route, options) => {
+    // When a navigation delegate is supplied (dashboard → device), hand off
+    // entirely: the delegate owns Pro gating and param resolution.
+    if (onNavigateRoute) {
+      onNavigateRoute(route);
+      return;
+    }
+
+    // Gate behind Pro (the Home shortcut bypasses this — it's always free)
+    if (!isPro && !options?.bypassPro) {
       setShowUpgradeModal(true);
       return;
     }
@@ -179,7 +213,12 @@ export function RoutesSitemap({
     } catch (error) {
       Alert.alert("Navigation Error", String(error));
     }
-  }, [router, promptForParams, isPro]);
+  }, [router, promptForParams, isPro, onNavigateRoute]);
+  const handleGoHome = useCallback(() => {
+    handleNavigate(HOME_ROUTE, {
+      bypassPro: true
+    });
+  }, [handleNavigate]);
   const handleManualRefresh = useCallback(() => {
     if (isRefreshing) return;
     setIsRefreshing(true);
@@ -214,7 +253,7 @@ export function RoutesSitemap({
         style: styles.loadingContainer,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.loadingText,
-          children: "Loading routes..."
+          children: isSupported ? "Loading routes..." : "Route sitemap isn't available on the dashboard — the route tree lives on the device. Use the Events tab to see navigation here."
         })
       })
     });
@@ -226,39 +265,54 @@ export function RoutesSitemap({
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.actionsRow,
         children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.actionWrapper,
-          children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
+          style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
+            onPress: handleGoHome,
+            accessibilityLabel: "Go to home route",
+            children: /*#__PURE__*/_jsx(Home, {
+              size: ACTION_ICON_SIZE,
+              color: buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
+            children: "Home"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
+          children: [/*#__PURE__*/_jsx(CopyButton, {
             value: copyAllData,
-            buttonStyle: styles.actionButtonHeader
+            size: IS_DESKTOP ? ACTION_ICON_SIZE : 14,
+            buttonStyle: IS_DESKTOP ? styles.actionButtonHeaderDesktop : styles.actionButtonHeader
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.actionLabel,
+            style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
             children: "Copy"
           })]
         }), /*#__PURE__*/_jsxs(View, {
-          style: styles.actionWrapper,
+          style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
           children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: [styles.iconButton, isRefreshing && styles.refreshButtonDisabled],
+            style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop, isRefreshing && styles.refreshButtonDisabled],
             onPress: handleManualRefresh,
             disabled: isRefreshing,
             children: /*#__PURE__*/_jsx(RefreshCw, {
-              size: 16,
+              size: ACTION_ICON_SIZE,
               color: isRefreshing ? buoyColors.textMuted : buoyColors.textSecondary
             })
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.actionLabel,
+            style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
             children: "Refresh"
           })]
         }), /*#__PURE__*/_jsxs(View, {
-          style: styles.actionWrapper,
+          style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
           children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.iconButton,
+            style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
             onPress: () => setIsSearching(true),
             children: /*#__PURE__*/_jsx(Search, {
-              size: 16,
+              size: ACTION_ICON_SIZE,
               color: buoyColors.textSecondary
             })
           }), /*#__PURE__*/_jsx(Text, {
-            style: styles.actionLabel,
+            style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
             children: "Search"
           })]
         })]
@@ -404,18 +458,18 @@ function RouteGroupView({
           children: group.routes.length
         })
       })]
-    }), isExpanded && /*#__PURE__*/_jsxs(View, {
+    }), group.description && /*#__PURE__*/_jsx(View, {
+      style: styles.groupDescription,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.groupDescriptionText,
+        children: group.description
+      })
+    }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: styles.routesList,
-      children: [group.description && /*#__PURE__*/_jsx(View, {
-        style: styles.groupDescription,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.groupDescriptionText,
-          children: group.description
-        })
-      }), group.routes.map((route, index) => /*#__PURE__*/_jsx(RouteItemView, {
+      children: group.routes.map((route, index) => /*#__PURE__*/_jsx(RouteItemView, {
         route: route,
         onNavigate: onNavigate
-      }, `${route.path}-${index}`))]
+      }, `${route.path}-${index}`))
     })]
   });
 }
@@ -426,85 +480,85 @@ function RouteItemView({
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const hasChildren = route.children.length > 0;
-  const hasParams = route.params.length > 0;
   const typeColor = getRouteTypeColor(route.type);
   const canNavigate = route.type !== "layout" && route.type !== "group";
-  return /*#__PURE__*/_jsxs(View, {
+
+  // Leaf routes (no children) have nothing to drill into — expanding would only
+  // reveal the Copy/Go actions, so show those inline instead of behind a toggle.
+  const isExpandable = hasChildren;
+  const showDetails = isExpandable ? isExpanded : true;
+  return /*#__PURE__*/_jsx(View, {
     style: [styles.routeItem, {
       marginLeft: depth * 12
     }],
-    children: [/*#__PURE__*/_jsxs(View, {
+    children: /*#__PURE__*/_jsxs(View, {
       style: styles.routeCard,
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: styles.routeHeaderLeft,
-        onPress: () => setIsExpanded(!isExpanded),
-        activeOpacity: 0.7,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.expandIndicator,
-          children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-            size: 14,
-            color: buoyColors.textSecondary
-          }) : /*#__PURE__*/_jsx(ChevronRight, {
-            size: 14,
-            color: buoyColors.textSecondary
-          })
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.routePath,
-          numberOfLines: 1,
-          children: route.path
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.routeHeaderActions,
-        children: [hasChildren && /*#__PURE__*/_jsx(View, {
-          style: styles.childCountBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.childCountText,
-            children: route.children.length
-          })
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.typeTag, {
-            backgroundColor: `${typeColor}15`,
-            borderColor: `${typeColor}40`
-          }],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.typeText, {
-              color: typeColor
-            }],
-            children: route.type.toUpperCase()
-          })
-        })]
-      })]
-    }), isExpanded && /*#__PURE__*/_jsxs(View, {
-      style: styles.routeDetails,
       children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.routeButtons,
-        children: [/*#__PURE__*/_jsx(InlineCopyButton, {
-          value: route.path,
-          buttonStyle: styles.actionButton
-        }), canNavigate && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: [styles.actionButton, styles.navigateButton],
-          onPress: () => onNavigate(route),
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.navigateButtonText,
-            children: "Go"
-          })
-        })]
-      }), hasParams && /*#__PURE__*/_jsxs(View, {
-        style: styles.paramsContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.paramsLabel,
-          children: "Parameters:"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.paramsRow,
-          children: route.params.map(param => /*#__PURE__*/_jsx(View, {
-            style: styles.paramTag,
+        style: styles.routeHeader,
+        children: [isExpandable ? /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: styles.routeHeaderLeft,
+          onPress: () => setIsExpanded(!isExpanded),
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.expandIndicator,
+            children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 14,
+              color: buoyColors.textSecondary
+            }) : /*#__PURE__*/_jsx(ChevronRight, {
+              size: 14,
+              color: buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.routePath,
+            numberOfLines: 3,
+            children: route.path
+          })]
+        }) :
+        /*#__PURE__*/
+        // Non-toggling header for leaf routes (keeps the chevron column as a
+        // spacer so paths stay aligned with expandable siblings).
+        _jsxs(View, {
+          style: styles.routeHeaderLeft,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.expandIndicator
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.routePath,
+            numberOfLines: 3,
+            children: route.path
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.routeHeaderActions,
+          children: [hasChildren && /*#__PURE__*/_jsx(View, {
+            style: styles.childCountBadge,
             children: /*#__PURE__*/_jsx(Text, {
-              style: styles.paramText,
-              children: param
+              style: styles.childCountText,
+              children: route.children.length
             })
-          }, param))
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.typeTag, {
+              backgroundColor: `${typeColor}15`,
+              borderColor: `${typeColor}40`
+            }],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.typeText, {
+                color: typeColor
+              }],
+              children: route.type.toUpperCase()
+            })
+          }), /*#__PURE__*/_jsx(InlineCopyButton, {
+            value: route.path,
+            buttonStyle: styles.iconAction
+          }), canNavigate && /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.goButton,
+            onPress: () => onNavigate(route),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.goButtonText,
+              children: "Go"
+            })
+          })]
         })]
-      }), hasChildren && /*#__PURE__*/_jsx(View, {
+      }), showDetails && hasChildren && /*#__PURE__*/_jsx(View, {
         style: styles.childrenContainer,
         children: route.children.map((child, index) => /*#__PURE__*/_jsx(RouteItemView, {
           route: child,
@@ -512,7 +566,7 @@ function RouteItemView({
           onNavigate: onNavigate
         }, `${child.path}-${index}`))
       })]
-    })]
+    })
   });
 }
 
@@ -566,7 +620,11 @@ const styles = StyleSheet.create({
   loadingText: {
     color: buoyColors.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: "monospace",
+    textAlign: "center",
+    lineHeight: 20,
+    paddingHorizontal: 32,
+    maxWidth: 420
   },
   header: {
     flexDirection: "column",
@@ -578,7 +636,7 @@ const styles = StyleSheet.create({
   actionsRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
     gap: 12,
     paddingBottom: 4
   },
@@ -613,22 +671,37 @@ const styles = StyleSheet.create({
     letterSpacing: 0.5
   },
   actionWrapper: {
+    flex: 1,
     alignItems: "center",
     justifyContent: "center",
     gap: 4,
     minWidth: 48
   },
+  actionWrapperDesktop: {
+    gap: 8,
+    minWidth: 72
+  },
   actionButtonHeader: {
     padding: 6,
     borderRadius: 4,
     backgroundColor: buoyColors.input
   },
+  actionButtonHeaderDesktop: {
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: buoyColors.input
+  },
   iconButton: {
     padding: 6,
     borderRadius: 4,
     alignItems: "center",
     justifyContent: "center"
   },
+  iconButtonDesktop: {
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: buoyColors.input
+  },
   actionLabel: {
     fontSize: 8,
     color: buoyColors.textMuted,
@@ -636,6 +709,9 @@ const styles = StyleSheet.create({
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
+  actionLabelDesktop: {
+    fontSize: 12
+  },
   refreshButtonDisabled: {
     opacity: 0.5
   },
@@ -780,15 +856,11 @@ const styles = StyleSheet.create({
     marginBottom: 6
   },
   routeCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
     backgroundColor: buoyColors.card,
     borderRadius: 6,
     borderWidth: 1,
     borderColor: buoyColors.border,
+    overflow: "hidden",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -798,8 +870,16 @@ const styles = StyleSheet.create({
     shadowRadius: 2,
     elevation: 1
   },
+  routeHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 7,
+    paddingHorizontal: 10,
+    gap: 8
+  },
   expandIndicator: {
-    width: 20,
+    width: 18,
     alignItems: "center"
   },
   routeHeaderLeft: {
@@ -848,76 +928,29 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     fontFamily: "monospace"
   },
-  routeDetails: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 12,
-    gap: 12,
-    borderTopWidth: 1,
-    borderTopColor: buoyColors.border,
-    backgroundColor: buoyColors.card,
-    borderRadius: 6,
+  // Compact icon-sized Copy button in the header action cluster.
+  iconAction: {
+    width: 28,
+    height: 24,
+    borderRadius: 4,
+    backgroundColor: buoyColors.input,
     borderWidth: 1,
     borderColor: buoyColors.border,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    marginTop: -6
-  },
-  paramsContainer: {
-    gap: 6
-  },
-  paramsLabel: {
-    fontSize: 10,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace",
-    marginBottom: 4
-  },
-  paramsRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6
+    alignItems: "center",
+    justifyContent: "center"
   },
-  paramTag: {
-    backgroundColor: "#F59E0B15",
-    borderColor: "#F59E0B40",
-    borderWidth: 1,
+  // Small "Go" pill in the header action cluster.
+  goButton: {
+    height: 24,
+    paddingHorizontal: 10,
     borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2
-  },
-  paramText: {
-    fontSize: 10,
-    color: "#F59E0B",
-    fontFamily: "monospace",
-    fontWeight: "600"
-  },
-  routeButtons: {
-    flexDirection: "row",
-    gap: 6,
-    marginBottom: 12
-  },
-  actionButton: {
-    flexDirection: "row",
     alignItems: "center",
-    gap: 4,
-    backgroundColor: buoyColors.input,
-    borderRadius: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.border
-  },
-  actionButtonText: {
-    fontSize: 12,
-    color: buoyColors.textSecondary,
-    fontFamily: "monospace",
-    fontWeight: "600"
-  },
-  navigateButton: {
+    justifyContent: "center",
     backgroundColor: buoyColors.primary + "15",
+    borderWidth: 1,
     borderColor: buoyColors.primary + "40"
   },
-  navigateButtonText: {
+  goButtonText: {
     fontSize: 12,
     color: buoyColors.primary,
     fontFamily: "monospace",
@@ -926,6 +959,9 @@ const styles = StyleSheet.create({
   childrenContainer: {
     borderLeftWidth: 2,
     borderLeftColor: buoyColors.border,
-    marginLeft: 16
+    marginLeft: 16,
+    marginRight: 8,
+    marginTop: 2,
+    marginBottom: 8
   }
 });

package/lib/module/expoRouterStore.js

@@ -24,10 +24,26 @@ function logOnce(message, error) {
  * The storeRef gets populated when Expo Router's useStore() hook runs.
  * So we cache the store reference but its property values update over time.
  */
+/**
+ * Whether the expo-router store can be loaded in this runtime. The store is
+ * pulled in via CommonJS `require`, which only exists under Metro/Node. On the
+ * web (e.g. the desktop dashboard rendering these RN tools via react-native-web)
+ * `require` is undefined, the route tree lives on the device — not here — and
+ * there is nothing to load. Callers use this to skip polling/logging.
+ */
+export function isExpoRouterStoreSupported() {
+  return typeof require !== "undefined";
+}
 export function getExpoRouterStore() {
   if (cachedStore) {
     return cachedStore;
   }
+
+  // No `require` (web): bail quietly rather than throwing ReferenceError and
+  // logging a misleading "install expo-router" message on the dashboard.
+  if (!isExpoRouterStoreSupported()) {
+    return null;
+  }
   const loadFromBuild = () => {
     try {
       const module = require("expo-router/build/global-state/router-store");

package/lib/module/index.js

@@ -38,6 +38,10 @@ export { useRouteObserverReactNavigation } from "./useRouteObserverReactNavigati
 export { useRouteEvents } from "./hooks/useRouteEvents";
 export { useRouteSitemap, useRoute, useParentRoutes } from "./useRouteSitemap";
 export { useNavigationStack } from "./useNavigationStack";
+// =============================================================================
+// EXTERNAL SYNC (Adapter for @buoy-gg/external-sync's useExternalSync)
+// =============================================================================
+export { routeEventsSyncAdapter } from "./sync/routeEventsSyncAdapter";
 
 // =============================================================================
 // TYPES

package/lib/module/stores/navigationStackStore.js

@@ -0,0 +1,41 @@
+"use strict";
+
+/**
+ * Navigation Stack Store
+ *
+ * Holds the latest serializable navigation stack plus references to the live
+ * navigation action functions. The stack is captured inside the navigation tree
+ * by <RouteTracker /> (which runs useNavigationStack), and read by the
+ * route-events sync adapter so the dashboard can render the Stack tab and drive
+ * navigation on the device remotely.
+ *
+ * The stack itself (StackDisplayItem[]) is JSON-serializable and synced to the
+ * dashboard. The action functions are NOT serialized — they stay on the device
+ * and are invoked when the dashboard sends a remote action.
+ */
+
+class NavigationStackStore {
+  stack = [];
+  actions = null;
+  listeners = new Set();
+  getStack() {
+    return this.stack;
+  }
+  setStack(stack) {
+    this.stack = stack;
+    this.listeners.forEach(listener => listener());
+  }
+  getActions() {
+    return this.actions;
+  }
+  setActions(actions) {
+    this.actions = actions;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+}
+export const navigationStackStore = new NavigationStackStore();