@buoy-gg/route-events 3.0.1 → 3.0.2

package/lib/commonjs/RouteTracker.js

@@ -4,9 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RouteTracker = RouteTracker;
+var _react = require("react");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _useRouteObserver = require("./useRouteObserver");
 var _useRouteObserverReactNavigation = require("./useRouteObserverReactNavigation");
+var _useNavigationStack = require("./useNavigationStack");
+var _navigationStackStore = require("./stores/navigationStackStore");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * RouteTracker - A component to place inside your navigation tree
@@ -57,10 +60,41 @@ function ReactNavigationRouteTracker() {
   (0, _useRouteObserverReactNavigation.useRouteObserverReactNavigation)();
   return null;
 }
+
+/**
+ * Mirrors the live navigation stack (and its action functions) into
+ * navigationStackStore so the route-events sync adapter can expose the Stack
+ * tab to the dashboard. Runs inside the navigation tree where the container ref
+ * context is available.
+ */
+function NavigationStackCapture() {
+  const {
+    stack,
+    navigateToIndex,
+    popToIndex,
+    goBack,
+    popToTop
+  } = (0, _useNavigationStack.useNavigationStack)();
+  (0, _react.useEffect)(() => {
+    _navigationStackStore.navigationStackStore.setStack(stack);
+  }, [stack]);
+
+  // Keep the action references fresh (they change as the stack changes) so a
+  // remote action always operates on the current navigation state.
+  (0, _react.useEffect)(() => {
+    _navigationStackStore.navigationStackStore.setActions({
+      navigateToIndex,
+      popToIndex,
+      goBack,
+      popToTop
+    });
+    return () => _navigationStackStore.navigationStackStore.setActions(null);
+  });
+  return null;
+}
 function RouteTracker() {
   const hasExpo = (0, _sharedUi.isExpoRouterAvailable)();
-  if (hasExpo) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpoRouteTracker, {});
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactNavigationRouteTracker, {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [hasExpo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpoRouteTracker, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactNavigationRouteTracker, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationStackCapture, {})]
+  });
 }

package/lib/commonjs/components/NavigationStack.js

@@ -22,24 +22,34 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Types
 // ============================================================================
 
+/** Stack manipulation a host can be asked to perform on the device. */
+
 // ============================================================================
 // Main Component
 // ============================================================================
 
 function NavigationStack({
-  style
+  style,
+  injectedStack,
+  onAction
 }) {
-  const {
-    stack,
-    focusedRoute,
-    stackDepth,
-    isAtRoot,
-    isLoaded,
-    error,
-    navigateToIndex,
-    goBack,
-    popToTop
-  } = (0, _useNavigationStack.useNavigationStack)();
+  const hookResult = (0, _useNavigationStack.useNavigationStack)();
+  const isInjected = injectedStack != null;
+
+  // Data source: injected (dashboard) or the local navigation container.
+  const stack = isInjected ? injectedStack : hookResult.stack;
+  const isLoaded = isInjected ? true : hookResult.isLoaded;
+  const error = isInjected ? null : hookResult.error;
+  const focusedRoute = (0, _react.useMemo)(() => stack.find(item => item.isFocused) ?? null, [stack]);
+  const stackDepth = stack.length;
+  const isAtRoot = stackDepth <= 1;
+
+  // Action wrappers: delegate to the host when provided, else act locally.
+  const navigateToIndex = index => onAction ? onAction("navigateToIndex", {
+    index
+  }) : hookResult.navigateToIndex(index);
+  const goBack = () => onAction ? onAction("goBack") : hookResult.goBack();
+  const popToTop = () => onAction ? onAction("popToTop") : hookResult.popToTop();
   const [expandedIndex, setExpandedIndex] = (0, _react.useState)(null);
   const [showHelp, setShowHelp] = (0, _react.useState)(false);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
@@ -128,6 +138,26 @@ function NavigationStack({
   }
 
   // Handlers
+  // Confirm a destructive action. On device we use the native Alert; when an
+  // action delegate is set (dashboard, react-native-web) Alert button presses
+  // don't fire, so fall back to window.confirm.
+  const confirmDestructive = (title, message, confirmLabel, onConfirm) => {
+    if (onAction) {
+      const confirmFn = globalThis.window?.confirm;
+      if (!confirmFn || confirmFn(`${title}\n\n${message}`)) {
+        onConfirm();
+      }
+      return;
+    }
+    _reactNative.Alert.alert(title, message, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: confirmLabel,
+      style: "destructive",
+      onPress: onConfirm
+    }]);
+  };
   const handleGoBack = () => {
     // Gate behind Pro
     if (!isPro) {
@@ -150,14 +180,7 @@ function NavigationStack({
       _reactNative.Alert.alert("Already at Top", "Stack only has one screen");
       return;
     }
-    _reactNative.Alert.alert("Pop to Top", "This will remove all screens except the root screen.", [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Pop to Top",
-      style: "destructive",
-      onPress: popToTop
-    }]);
+    confirmDestructive("Pop to Top", "This will remove all screens except the root screen.", "Pop to Top", popToTop);
   };
   const toggleExpand = index => {
     setExpandedIndex(expandedIndex === index ? null : index);
@@ -199,17 +222,10 @@ function NavigationStack({
       return;
     }
     const screensToRemove = stackDepth - 1 - selectedRoute.index;
-    _reactNative.Alert.alert("Pop to Route", `Remove ${screensToRemove} screen${screensToRemove !== 1 ? "s" : ""} above ${selectedRoute.pathname}?`, [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Pop",
-      style: "destructive",
-      onPress: () => {
-        // Navigate to the selected route, which effectively pops everything above it
-        navigateToIndex(selectedRoute.index);
-      }
-    }]);
+    const targetIndex = selectedRoute.index;
+    confirmDestructive("Pop to Route", `Remove ${screensToRemove} screen${screensToRemove !== 1 ? "s" : ""} above ${selectedRoute.pathname}?`, "Pop",
+    // Navigate to the selected route, which effectively pops everything above it
+    () => navigateToIndex(targetIndex));
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, style],

package/lib/commonjs/components/RoutesSitemap.js

@@ -25,12 +25,30 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Types
 // ============================================================================
 
+// 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
 // ============================================================================
 
 function RoutesSitemap({
-  style
+  style,
+  injectedRoutes,
+  injectedSource,
+  injectedLastUpdatedAt,
+  onNavigateRoute
 }) {
   const [searchQuery, setSearchQuery] = (0, _react.useState)("");
   const [isSearching, setIsSearching] = (0, _react.useState)(false);
@@ -52,6 +70,7 @@ function RoutesSitemap({
     groups,
     stats,
     isLoaded,
+    isSupported,
     filteredRoutes,
     routes,
     refresh,
@@ -59,7 +78,10 @@ function RoutesSitemap({
     source
   } = (0, _useRouteSitemap.useRouteSitemap)({
     searchQuery,
-    sortBy: "path"
+    sortBy: "path",
+    injectedRoutes,
+    injectedSource,
+    injectedLastUpdatedAt
   });
 
   // Prepare copy data - memoized so it only rebuilds when dependencies change
@@ -147,6 +169,13 @@ function RoutesSitemap({
     }], "plain-text");
   }, [router]);
   const handleNavigate = (0, _react.useCallback)(route => {
+    // 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
     if (!isPro) {
       setShowUpgradeModal(true);
@@ -182,7 +211,10 @@ function RoutesSitemap({
     } catch (error) {
       _reactNative.Alert.alert("Navigation Error", String(error));
     }
-  }, [router, promptForParams, isPro]);
+  }, [router, promptForParams, isPro, onNavigateRoute]);
+  const handleGoHome = (0, _react.useCallback)(() => {
+    handleNavigate(HOME_ROUTE);
+  }, [handleNavigate]);
   const handleManualRefresh = (0, _react.useCallback)(() => {
     if (isRefreshing) return;
     setIsRefreshing(true);
@@ -217,7 +249,7 @@ function RoutesSitemap({
         style: styles.loadingContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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."
         })
       })
     });
@@ -229,6 +261,20 @@ function RoutesSitemap({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.actionsRow,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: styles.iconButton,
+            onPress: handleGoHome,
+            accessibilityLabel: "Go to home route",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Home, {
+              size: 16,
+              color: _sharedUi.buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.actionLabel,
+            children: "Home"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.actionWrapper,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
             value: copyAllData,
@@ -432,82 +478,92 @@ function RouteItemView({
   const hasParams = route.params.length > 0;
   const typeColor = getRouteTypeColor(route.type);
   const canNavigate = route.type !== "layout" && route.type !== "group";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.routeItem, {
       marginLeft: depth * 12
     }],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.routeCard,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: styles.routeHeaderLeft,
-        onPress: () => setIsExpanded(!isExpanded),
-        activeOpacity: 0.7,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.expandIndicator,
-          children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
-            size: 14,
-            color: _sharedUi.buoyColors.textSecondary
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
-            size: 14,
-            color: _sharedUi.buoyColors.textSecondary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.routePath,
-          numberOfLines: 1,
-          children: route.path
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.routeHeaderActions,
-        children: [hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.childCountBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.childCountText,
-            children: route.children.length
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: [styles.typeTag, {
-            backgroundColor: `${typeColor}15`,
-            borderColor: `${typeColor}40`
-          }],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.typeText, {
-              color: typeColor
-            }],
-            children: route.type.toUpperCase()
-          })
-        })]
-      })]
-    }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.routeDetails,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.routeButtons,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
-          value: route.path,
-          buttonStyle: styles.actionButton
-        }), canNavigate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          style: [styles.actionButton, styles.navigateButton],
-          onPress: () => onNavigate(route),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.navigateButtonText,
-            children: "Go"
-          })
-        })]
-      }), hasParams && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.paramsContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.paramsLabel,
-          children: "Parameters:"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.paramsRow,
-          children: route.params.map(param => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.paramTag,
+        style: styles.routeHeader,
+        children: [isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: styles.routeHeaderLeft,
+          onPress: () => setIsExpanded(!isExpanded),
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.expandIndicator,
+            children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
+              size: 14,
+              color: _sharedUi.buoyColors.textSecondary
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+              size: 14,
+              color: _sharedUi.buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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).
+        (0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.routeHeaderLeft,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.expandIndicator
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.routePath,
+            numberOfLines: 3,
+            children: route.path
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.routeHeaderActions,
+          children: [hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.childCountBadge,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.paramText,
-              children: param
+              style: styles.childCountText,
+              children: route.children.length
             })
-          }, param))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.typeTag, {
+              backgroundColor: `${typeColor}15`,
+              borderColor: `${typeColor}40`
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.typeText, {
+                color: typeColor
+              }],
+              children: route.type.toUpperCase()
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
+            value: route.path,
+            buttonStyle: styles.iconAction
+          }), canNavigate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            style: styles.goButton,
+            onPress: () => onNavigate(route),
+            activeOpacity: 0.7,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.goButtonText,
+              children: "Go"
+            })
+          })]
         })]
-      }), hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      }), showDetails && hasParams && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.paramsRow,
+        children: route.params.map(param => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.paramTag,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.paramText,
+            children: param
+          })
+        }, param))
+      }), showDetails && hasChildren && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.childrenContainer,
         children: route.children.map((child, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteItemView, {
           route: child,
@@ -515,7 +571,7 @@ function RouteItemView({
           onNavigate: onNavigate
         }, `${child.path}-${index}`))
       })]
-    })]
+    })
   });
 }
 
@@ -569,7 +625,11 @@ const styles = _reactNative.StyleSheet.create({
   loadingText: {
     color: _sharedUi.buoyColors.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: "monospace",
+    textAlign: "center",
+    lineHeight: 20,
+    paddingHorizontal: 32,
+    maxWidth: 420
   },
   header: {
     flexDirection: "column",
@@ -581,7 +641,7 @@ const styles = _reactNative.StyleSheet.create({
   actionsRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "flex-end",
+    justifyContent: "space-between",
     gap: 12,
     paddingBottom: 4
   },
@@ -616,6 +676,7 @@ const styles = _reactNative.StyleSheet.create({
     letterSpacing: 0.5
   },
   actionWrapper: {
+    flex: 1,
     alignItems: "center",
     justifyContent: "center",
     gap: 4,
@@ -783,15 +844,11 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 6
   },
   routeCard: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
     backgroundColor: _sharedUi.buoyColors.card,
     borderRadius: 6,
     borderWidth: 1,
     borderColor: _sharedUi.buoyColors.border,
+    overflow: "hidden",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -801,8 +858,16 @@ const styles = _reactNative.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: {
@@ -851,34 +916,41 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     fontFamily: "monospace"
   },
-  routeDetails: {
-    paddingHorizontal: 12,
-    paddingTop: 8,
-    paddingBottom: 12,
-    gap: 12,
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border,
-    backgroundColor: _sharedUi.buoyColors.card,
-    borderRadius: 6,
+  // Compact icon-sized Copy button in the header action cluster.
+  iconAction: {
+    width: 28,
+    height: 24,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.buoyColors.input,
     borderWidth: 1,
     borderColor: _sharedUi.buoyColors.border,
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0,
-    marginTop: -6
+    alignItems: "center",
+    justifyContent: "center"
   },
-  paramsContainer: {
-    gap: 6
+  // Small "Go" pill in the header action cluster.
+  goButton: {
+    height: 24,
+    paddingHorizontal: 10,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "40"
   },
-  paramsLabel: {
-    fontSize: 10,
-    color: _sharedUi.buoyColors.textSecondary,
+  goButtonText: {
+    fontSize: 12,
+    color: _sharedUi.buoyColors.primary,
     fontFamily: "monospace",
-    marginBottom: 4
+    fontWeight: "600"
   },
   paramsRow: {
     flexDirection: "row",
     flexWrap: "wrap",
-    gap: 6
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingTop: 2,
+    paddingBottom: 8
   },
   paramTag: {
     backgroundColor: "#F59E0B15",
@@ -894,41 +966,12 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace",
     fontWeight: "600"
   },
-  routeButtons: {
-    flexDirection: "row",
-    gap: 6,
-    marginBottom: 12
-  },
-  actionButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: _sharedUi.buoyColors.input,
-    borderRadius: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border
-  },
-  actionButtonText: {
-    fontSize: 12,
-    color: _sharedUi.buoyColors.textSecondary,
-    fontFamily: "monospace",
-    fontWeight: "600"
-  },
-  navigateButton: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40"
-  },
-  navigateButtonText: {
-    fontSize: 12,
-    color: _sharedUi.buoyColors.primary,
-    fontFamily: "monospace",
-    fontWeight: "600"
-  },
   childrenContainer: {
     borderLeftWidth: 2,
     borderLeftColor: _sharedUi.buoyColors.border,
-    marginLeft: 16
+    marginLeft: 16,
+    marginRight: 8,
+    marginTop: 2,
+    marginBottom: 8
   }
 });

package/lib/commonjs/expoRouterStore.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getExpoRouterStore = getExpoRouterStore;
 exports.getRouteNodeMetadata = getRouteNodeMetadata;
+exports.isExpoRouterStoreSupported = isExpoRouterStoreSupported;
 exports.loadRouteNode = loadRouteNode;
 let cachedStore = null;
 let cachedStoreSource = null;
@@ -30,10 +31,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.
+ */
+function isExpoRouterStoreSupported() {
+  return typeof require !== "undefined";
+}
 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/commonjs/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "routeEventStore", {
     return _routeEventStore.routeEventStore;
   }
 });
+Object.defineProperty(exports, "routeEventsSyncAdapter", {
+  enumerable: true,
+  get: function () {
+    return _routeEventsSyncAdapter.routeEventsSyncAdapter;
+  }
+});
 Object.defineProperty(exports, "routeEventsToolPreset", {
   enumerable: true,
   get: function () {
@@ -129,6 +135,7 @@ var _useRouteObserverReactNavigation = require("./useRouteObserverReactNavigatio
 var _useRouteEvents = require("./hooks/useRouteEvents");
 var _useRouteSitemap = require("./useRouteSitemap");
 var _useNavigationStack = require("./useNavigationStack");
+var _routeEventsSyncAdapter = require("./sync/routeEventsSyncAdapter");
 var _RouteParser = require("./RouteParser");
 var _RouteObserver = require("./RouteObserver");
 var _routeEventStore = require("./stores/routeEventStore");