@buoy-gg/route-events 7.0.4 → 7.0.6

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RouteEventsModalWithTabs = RouteEventsModalWithTabs;
+exports.RoutesToolView = RoutesToolView;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _safeReactNavigation = require("../utils/safeReactNavigation");
@@ -77,7 +78,9 @@ function RouteEventsModalWithTabs({
   onClose,
   onBack,
   onMinimize,
-  enableSharedModalDimensions = false
+  enableSharedModalDimensions = false,
+  inline = false,
+  remote
 }) {
   const router = (0, _sharedUi.useSafeRouter)();
   const containerRef = (0, _react.useContext)(NavigationContainerRefContext);
@@ -401,8 +404,14 @@ function RouteEventsModalWithTabs({
       });
     }
     if (activeTab === "routes") {
-      return hasExpoRouter ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap, {
-        style: styles.contentWrapper
+      // A remote host supplies the tree, so its presence — not this process's
+      // router — decides which view can render it.
+      return hasExpoRouter || remote?.sitemap ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap, {
+        style: styles.contentWrapper,
+        injectedRoutes: remote?.sitemap?.routes,
+        injectedSource: remote?.sitemap?.source ?? null,
+        injectedLastUpdatedAt: remote?.sitemap?.lastUpdatedAt ?? null,
+        onNavigateRoute: remote ? handleRemoteNavigateRoute : undefined
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactNavigationRoutes.ReactNavigationRoutes, {
         style: styles.contentWrapper
       });
@@ -410,6 +419,8 @@ function RouteEventsModalWithTabs({
     if (activeTab === "stack") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationStack.NavigationStack, {
         style: styles.contentWrapper,
+        injectedStack: remote ? remote.stack ?? [] : undefined,
+        onAction: remote?.onStackAction,
         onCopyValueChange: setStackCopyValue
       });
     }
@@ -482,6 +493,116 @@ function RouteEventsModalWithTabs({
       })]
     });
   };
+  const headerContent = selectedEvent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: handleBackFromDetail
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: selectedEvent.pathname
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+        value: {
+          pathname: selectedEvent.pathname,
+          previousPathname: selectedEvent.previousPathname,
+          params: selectedEvent.params,
+          segments: selectedEvent.segments,
+          timestamp: selectedEvent.timestamp,
+          timestampISO: new Date(selectedEvent.timestamp).toISOString(),
+          timeSincePrevious: selectedEvent.timeSincePrevious,
+          visitNumber: selectedVisitNumber
+        },
+        buttonStyle: styles.iconButton
+      })
+    })]
+  }) : showFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: () => setShowFilters(false)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "Filters"
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+    children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+      title: "",
+      noMargin: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+        tabs: [{
+          key: "routes",
+          label: hasExpoRouter ? "Routes" : "Screens"
+        }, {
+          key: "events",
+          label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
+        }, {
+          key: "stack",
+          label: "Stack"
+        }],
+        activeTab: activeTab,
+        onTabChange: tab => handleTabChange(tab)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+      children: [activeTab === "stack" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+        value: stackCopyValue,
+        buttonStyle: styles.iconButton
+      }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
+          value: copyAllEventsData,
+          buttonStyle: styles.iconButton
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: handleToggleFilters,
+          style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
+            size: 14,
+            color: ignoredPatterns.size > 0 ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+          isEnabled: isListening,
+          onToggle: handleToggleListening,
+          accessibilityLabel: "Toggle route event monitoring"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: handleClearEvents,
+          style: styles.iconButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+            size: 14,
+            color: _sharedUi.buoyColors.error
+          })
+        })]
+      })]
+    })]
+  });
+
+  /**
+   * Pro gate for remote sitemap navigation. The Home shortcut stays free so a
+   * free user can always get the device back to a known screen; layouts and
+   * groups are not navigable at all.
+   */
+  const handleRemoteNavigateRoute = route => {
+    if (route.type === "layout" || route.type === "group") return;
+    const isHomeRoute = route.type === "index" || route.path === "/";
+    if (!isPro && !isHomeRoute) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    remote?.onNavigateRoute?.(route);
+  };
+  const upgradeModal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+    visible: showUpgradeModal,
+    onClose: () => setShowUpgradeModal(false),
+    featureName: "Route Event Management"
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.inlineHeader,
+          children: headerContent
+        }), renderContent(), footerNode]
+      }), upgradeModal]
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.JsModal, {
       visible: visible,
@@ -490,82 +611,7 @@ function RouteEventsModalWithTabs({
       persistenceKey: persistenceKey,
       header: {
         showToggleButton: true,
-        customContent: selectedEvent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-            onBack: handleBackFromDetail
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-            title: selectedEvent.pathname
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-              value: {
-                pathname: selectedEvent.pathname,
-                previousPathname: selectedEvent.previousPathname,
-                params: selectedEvent.params,
-                segments: selectedEvent.segments,
-                timestamp: selectedEvent.timestamp,
-                timestampISO: new Date(selectedEvent.timestamp).toISOString(),
-                timeSincePrevious: selectedEvent.timeSincePrevious,
-                visitNumber: selectedVisitNumber
-              },
-              buttonStyle: styles.iconButton
-            })
-          })]
-        }) : showFilters ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-            onBack: () => setShowFilters(false)
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-            title: "Filters"
-          })]
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-          children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-            onBack: onBack
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-            title: "",
-            noMargin: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-              tabs: [{
-                key: "routes",
-                label: hasExpoRouter ? "Routes" : "Screens"
-              }, {
-                key: "events",
-                label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
-              }, {
-                key: "stack",
-                label: "Stack"
-              }],
-              activeTab: activeTab,
-              onTabChange: tab => handleTabChange(tab)
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-            children: [activeTab === "stack" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-              value: stackCopyValue,
-              buttonStyle: styles.iconButton
-            }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-                value: copyAllEventsData,
-                buttonStyle: styles.iconButton
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                onPress: handleToggleFilters,
-                style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-                  size: 14,
-                  color: ignoredPatterns.size > 0 ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
-                })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-                isEnabled: isListening,
-                onToggle: handleToggleListening,
-                accessibilityLabel: "Toggle route event monitoring"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                onPress: handleClearEvents,
-                style: styles.iconButton,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-                  size: 14,
-                  color: _sharedUi.buoyColors.error
-                })
-              })]
-            })]
-          })]
-        })
+        customContent: headerContent
       },
       onModeChange: handleModeChange,
       enablePersistence: true,
@@ -574,15 +620,38 @@ function RouteEventsModalWithTabs({
       styles: {},
       footer: footerNode,
       footerHeight: footerNode ? 68 : 0,
-      children: [renderContent(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
-        visible: showUpgradeModal,
-        onClose: () => setShowUpgradeModal(false),
-        featureName: "Route Event Management"
-      })]
+      children: [renderContent(), upgradeModal]
     })
   });
 }
+
+/**
+ * The same routes tool as `RouteEventsModalWithTabs`, rendered INLINE for hosts
+ * that place tools in a panel rather than a modal. Exists so there is exactly
+ * one implementation — the desktop dashboard used to ship its own copy of this
+ * component's header and tab router.
+ */
+function RoutesToolView(props = {}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteEventsModalWithTabs, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
 const styles = _reactNative.StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.buoyColors.border,
+    backgroundColor: _sharedUi.buoyColors.card
+  },
   iconButton: {
     padding: 6,
     borderRadius: 6,

package/lib/commonjs/components/RoutesSitemap.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.RoutesSitemap = RoutesSitemap;
 var _react = require("react");
-var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
+var _reactNative = require("react-native");
 var _license = require("@buoy-gg/license");
 var _useRouteSitemap = require("../useRouteSitemap");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -917,7 +917,7 @@ const styles = _reactNative.StyleSheet.create({
   childCountText: {
     fontSize: 11,
     fontWeight: "600",
-    color: "#6B7280",
+    color: _sharedUi.macOSColors.text.icon,
     fontFamily: "monospace"
   },
   typeTag: {

package/lib/commonjs/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "RoutesSitemap", {
     return _RoutesSitemap.RoutesSitemap;
   }
 });
+Object.defineProperty(exports, "RoutesToolView", {
+  enumerable: true,
+  get: function () {
+    return _RouteEventsModalWithTabs.RoutesToolView;
+  }
+});
 Object.defineProperty(exports, "createRouteEventsTool", {
   enumerable: true,
   get: function () {

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -76,7 +76,9 @@ export function RouteEventsModalWithTabs({
   onClose,
   onBack,
   onMinimize,
-  enableSharedModalDimensions = false
+  enableSharedModalDimensions = false,
+  inline = false,
+  remote
 }) {
   const router = useSafeRouter();
   const containerRef = useContext(NavigationContainerRefContext);
@@ -400,8 +402,14 @@ export function RouteEventsModalWithTabs({
       });
     }
     if (activeTab === "routes") {
-      return hasExpoRouter ? /*#__PURE__*/_jsx(RoutesSitemap, {
-        style: styles.contentWrapper
+      // A remote host supplies the tree, so its presence — not this process's
+      // router — decides which view can render it.
+      return hasExpoRouter || remote?.sitemap ? /*#__PURE__*/_jsx(RoutesSitemap, {
+        style: styles.contentWrapper,
+        injectedRoutes: remote?.sitemap?.routes,
+        injectedSource: remote?.sitemap?.source ?? null,
+        injectedLastUpdatedAt: remote?.sitemap?.lastUpdatedAt ?? null,
+        onNavigateRoute: remote ? handleRemoteNavigateRoute : undefined
       }) : /*#__PURE__*/_jsx(ReactNavigationRoutes, {
         style: styles.contentWrapper
       });
@@ -409,6 +417,8 @@ export function RouteEventsModalWithTabs({
     if (activeTab === "stack") {
       return /*#__PURE__*/_jsx(NavigationStack, {
         style: styles.contentWrapper,
+        injectedStack: remote ? remote.stack ?? [] : undefined,
+        onAction: remote?.onStackAction,
         onCopyValueChange: setStackCopyValue
       });
     }
@@ -481,6 +491,116 @@ export function RouteEventsModalWithTabs({
       })]
     });
   };
+  const headerContent = selectedEvent ? /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: handleBackFromDetail
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: selectedEvent.pathname
+    }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
+      children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
+        value: {
+          pathname: selectedEvent.pathname,
+          previousPathname: selectedEvent.previousPathname,
+          params: selectedEvent.params,
+          segments: selectedEvent.segments,
+          timestamp: selectedEvent.timestamp,
+          timestampISO: new Date(selectedEvent.timestamp).toISOString(),
+          timeSincePrevious: selectedEvent.timeSincePrevious,
+          visitNumber: selectedVisitNumber
+        },
+        buttonStyle: styles.iconButton
+      })
+    })]
+  }) : showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: () => setShowFilters(false)
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: "Filters"
+    })]
+  }) : /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: onBack
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: "",
+      noMargin: true,
+      children: /*#__PURE__*/_jsx(TabSelector, {
+        tabs: [{
+          key: "routes",
+          label: hasExpoRouter ? "Routes" : "Screens"
+        }, {
+          key: "events",
+          label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
+        }, {
+          key: "stack",
+          label: "Stack"
+        }],
+        activeTab: activeTab,
+        onTabChange: tab => handleTabChange(tab)
+      })
+    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+      children: [activeTab === "stack" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
+        value: stackCopyValue,
+        buttonStyle: styles.iconButton
+      }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
+          value: copyAllEventsData,
+          buttonStyle: styles.iconButton
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleToggleFilters,
+          style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
+          children: /*#__PURE__*/_jsx(Filter, {
+            size: 14,
+            color: ignoredPatterns.size > 0 ? buoyColors.primary : buoyColors.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(PowerToggleButton, {
+          isEnabled: isListening,
+          onToggle: handleToggleListening,
+          accessibilityLabel: "Toggle route event monitoring"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleClearEvents,
+          style: styles.iconButton,
+          children: /*#__PURE__*/_jsx(Trash2, {
+            size: 14,
+            color: buoyColors.error
+          })
+        })]
+      })]
+    })]
+  });
+
+  /**
+   * Pro gate for remote sitemap navigation. The Home shortcut stays free so a
+   * free user can always get the device back to a known screen; layouts and
+   * groups are not navigable at all.
+   */
+  const handleRemoteNavigateRoute = route => {
+    if (route.type === "layout" || route.type === "group") return;
+    const isHomeRoute = route.type === "index" || route.path === "/";
+    if (!isPro && !isHomeRoute) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    remote?.onNavigateRoute?.(route);
+  };
+  const upgradeModal = /*#__PURE__*/_jsx(ProUpgradeModal, {
+    visible: showUpgradeModal,
+    onClose: () => setShowUpgradeModal(false),
+    featureName: "Route Event Management"
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/_jsxs(TickProvider, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.inlineHeader,
+          children: headerContent
+        }), renderContent(), footerNode]
+      }), upgradeModal]
+    });
+  }
   return /*#__PURE__*/_jsx(TickProvider, {
     children: /*#__PURE__*/_jsxs(JsModal, {
       visible: visible,
@@ -489,82 +609,7 @@ export function RouteEventsModalWithTabs({
       persistenceKey: persistenceKey,
       header: {
         showToggleButton: true,
-        customContent: selectedEvent ? /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: handleBackFromDetail
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: selectedEvent.pathname
-          }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
-            children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
-              value: {
-                pathname: selectedEvent.pathname,
-                previousPathname: selectedEvent.previousPathname,
-                params: selectedEvent.params,
-                segments: selectedEvent.segments,
-                timestamp: selectedEvent.timestamp,
-                timestampISO: new Date(selectedEvent.timestamp).toISOString(),
-                timeSincePrevious: selectedEvent.timeSincePrevious,
-                visitNumber: selectedVisitNumber
-              },
-              buttonStyle: styles.iconButton
-            })
-          })]
-        }) : showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: () => setShowFilters(false)
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: "Filters"
-          })]
-        }) : /*#__PURE__*/_jsxs(ModalHeader, {
-          children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-            onBack: onBack
-          }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-            title: "",
-            noMargin: true,
-            children: /*#__PURE__*/_jsx(TabSelector, {
-              tabs: [{
-                key: "routes",
-                label: hasExpoRouter ? "Routes" : "Screens"
-              }, {
-                key: "events",
-                label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
-              }, {
-                key: "stack",
-                label: "Stack"
-              }],
-              activeTab: activeTab,
-              onTabChange: tab => handleTabChange(tab)
-            })
-          }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-            children: [activeTab === "stack" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
-              value: stackCopyValue,
-              buttonStyle: styles.iconButton
-            }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
-                value: copyAllEventsData,
-                buttonStyle: styles.iconButton
-              }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                onPress: handleToggleFilters,
-                style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
-                children: /*#__PURE__*/_jsx(Filter, {
-                  size: 14,
-                  color: ignoredPatterns.size > 0 ? buoyColors.primary : buoyColors.textSecondary
-                })
-              }), /*#__PURE__*/_jsx(PowerToggleButton, {
-                isEnabled: isListening,
-                onToggle: handleToggleListening,
-                accessibilityLabel: "Toggle route event monitoring"
-              }), /*#__PURE__*/_jsx(TouchableOpacity, {
-                onPress: handleClearEvents,
-                style: styles.iconButton,
-                children: /*#__PURE__*/_jsx(Trash2, {
-                  size: 14,
-                  color: buoyColors.error
-                })
-              })]
-            })]
-          })]
-        })
+        customContent: headerContent
       },
       onModeChange: handleModeChange,
       enablePersistence: true,
@@ -573,15 +618,38 @@ export function RouteEventsModalWithTabs({
       styles: {},
       footer: footerNode,
       footerHeight: footerNode ? 68 : 0,
-      children: [renderContent(), /*#__PURE__*/_jsx(ProUpgradeModal, {
-        visible: showUpgradeModal,
-        onClose: () => setShowUpgradeModal(false),
-        featureName: "Route Event Management"
-      })]
+      children: [renderContent(), upgradeModal]
     })
   });
 }
+
+/**
+ * The same routes tool as `RouteEventsModalWithTabs`, rendered INLINE for hosts
+ * that place tools in a panel rather than a modal. Exists so there is exactly
+ * one implementation — the desktop dashboard used to ship its own copy of this
+ * component's header and tab router.
+ */
+export function RoutesToolView(props = {}) {
+  return /*#__PURE__*/_jsx(RouteEventsModalWithTabs, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
 const styles = StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: buoyColors.base
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border,
+    backgroundColor: buoyColors.card
+  },
   iconButton: {
     padding: 6,
     borderRadius: 6,

package/lib/module/components/RoutesSitemap.js

@@ -12,6 +12,7 @@
  */
 
 import { useState, useCallback, useMemo, useEffect } from "react";
+import { macOSColors } from "@buoy-gg/shared-ui";
 import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert, Platform } from "react-native";
 import { useSafeRouter } from "@buoy-gg/shared-ui";
 import { Search, ChevronDown, ChevronRight, Home, InlineCopyButton, CopyButton, RefreshCw, formatRelativeTime, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
@@ -914,7 +915,7 @@ const styles = StyleSheet.create({
   childCountText: {
     fontSize: 11,
     fontWeight: "600",
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontFamily: "monospace"
   },
   typeTag: {

package/lib/module/index.js

@@ -17,7 +17,9 @@ export { routeEventsToolPreset, createRouteEventsTool } from "./preset";
 // =============================================================================
 // MAIN COMPONENT
 // =============================================================================
-export { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs";
+// `RoutesToolView` is the same tool rendered inline (header bar + body + footer)
+// instead of inside a JsModal — for hosts that show tools in a panel.
+export { RouteEventsModalWithTabs, RoutesToolView } from "./components/RouteEventsModalWithTabs";
 // =============================================================================
 // ROUTE TRACKER (Required - place inside your navigation tree)
 // =============================================================================

package/lib/typescript/components/RouteEventsModalWithTabs.d.ts

@@ -1,9 +1,50 @@
+import type { RouteInfo } from "../RouteParser";
+import type { StackDisplayItem } from "../useNavigationStack";
+import type { NavigationStackActionType } from "./NavigationStack";
 export interface RouteEventsModalWithTabsProps {
     visible: boolean;
     onClose: () => void;
     onBack?: () => void;
     onMinimize?: (modalState: any) => void;
     enableSharedModalDimensions?: boolean;
+    /**
+     * Render as a header-bar + body (+ footer) stack instead of inside `JsModal`,
+     * for hosts that place tools in a panel rather than a modal (Buoy Desktop).
+     * Only the shell differs — header, tabs and state are shared. See
+     * `RoutesToolView` at the bottom of this file.
+     */
+    inline?: boolean;
+    /**
+     * Data and actions supplied by a REMOTE host (Buoy Desktop), where the route
+     * tree and navigation stack belong to a synced device rather than to this
+     * process. On device every one of these is discovered locally, so the whole
+     * object is omitted and the components fall back to their own hooks.
+     */
+    remote?: {
+        sitemap?: {
+            routes?: RouteInfo[];
+            source?: "build" | "src" | null;
+            lastUpdatedAt?: number | null;
+        };
+        stack?: StackDisplayItem[];
+        /**
+         * Navigate the device to a route from the sitemap. Pro gating is applied
+         * HERE before this is called, because the upgrade modal it needs to open
+         * lives in this component — the host only has to perform the navigation.
+         */
+        onNavigateRoute?: (route: RouteInfo) => void;
+        /** Drive the device's navigation stack (pop, goBack, navigateToIndex…). */
+        onStackAction?: (action: NavigationStackActionType, payload?: {
+            index?: number;
+        }) => void;
+    };
 }
-export declare function RouteEventsModalWithTabs({ visible, onClose, onBack, onMinimize, enableSharedModalDimensions, }: RouteEventsModalWithTabsProps): import("react").JSX.Element | null;
+export declare function RouteEventsModalWithTabs({ visible, onClose, onBack, onMinimize, enableSharedModalDimensions, inline, remote, }: RouteEventsModalWithTabsProps): import("react").JSX.Element | null;
+/**
+ * The same routes tool as `RouteEventsModalWithTabs`, rendered INLINE for hosts
+ * that place tools in a panel rather than a modal. Exists so there is exactly
+ * one implementation — the desktop dashboard used to ship its own copy of this
+ * component's header and tab router.
+ */
+export declare function RoutesToolView(props?: Omit<RouteEventsModalWithTabsProps, "visible" | "onClose" | "inline">): import("react").JSX.Element;
 //# sourceMappingURL=RouteEventsModalWithTabs.d.ts.map

package/lib/typescript/components/RouteEventsModalWithTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AA0DA,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AA8CD,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,6BAA6B,sCAwmB/B"}
+{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AAsDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAGnE,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE;YACR,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;YACrB,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;YAChC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;SAC/B,CAAC;QACF,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;QAC3B;;;;WAIG;QACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;QAC7C,2EAA2E;QAC3E,aAAa,CAAC,EAAE,CACd,MAAM,EAAE,yBAAyB,EACjC,OAAO,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,KACzB,IAAI,CAAC;KACX,CAAC;CACH;AA8CD,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,MAAc,EACd,MAAM,GACP,EAAE,6BAA6B,sCAqpB/B;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,GAAE,IAAI,CAAC,6BAA6B,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAM,+BAKlF"}

package/lib/typescript/components/RoutesSitemap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoutesSitemap.d.ts","sourceRoot":"","sources":["../../../src/components/RoutesSitemap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA4BH,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAM5D,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,GAAG,CAAC;IAEZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;IAE7B,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IAExC,8DAA8D;IAC9D,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC9C;AAsCD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,eAAe,GAChB,EAAE,kBAAkB,+BA8YpB"}
+{"version":3,"file":"RoutesSitemap.d.ts","sourceRoot":"","sources":["../../../src/components/RoutesSitemap.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA6BH,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,gBAAgB,CAAC;AAM5D,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,GAAG,CAAC;IAEZ;;;;OAIG;IACH,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;IAE7B,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;IAExC,8DAA8D;IAC9D,qBAAqB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtC;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC9C;AAsCD,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,eAAe,GAChB,EAAE,kBAAkB,+BA8YpB"}

package/lib/typescript/index.d.ts

@@ -7,7 +7,7 @@
  * PUBLIC API - Only these exports are supported for external use.
  */
 export { routeEventsToolPreset, createRouteEventsTool } from "./preset";
-export { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs";
+export { RouteEventsModalWithTabs, RoutesToolView, } from "./components/RouteEventsModalWithTabs";
 export type { RouteEventsModalWithTabsProps } from "./components/RouteEventsModalWithTabs";
 export { RouteTracker } from "./RouteTracker";
 export { RoutesSitemap } from "./components/RoutesSitemap";

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAK3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EACV,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,YAAY,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAK3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EACV,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,YAAY,EACV,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,+BAA+B,CAAC;AAKvC,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,qEAAqE;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,qEAAqE;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAOxE,OAAO,EACL,wBAAwB,EACxB,cAAc,GACf,MAAM,uCAAuC,CAAC;AAC/C,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAK3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EACV,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,YAAY,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,YAAY,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAK3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,+BAA+B,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,YAAY,EACV,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAK9B,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,YAAY,EACV,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,+BAA+B,CAAC;AAKvC,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,qEAAqE;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,qEAAqE;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/route-events",
-  "version": "7.0.4",
+  "version": "7.0.6",
   "description": "Navigation devtool for React Native — live stack, full sitemap, jump to any screen. Expo Router & React Navigation. Part of Buoy devtools.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,11 +26,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "7.0.4",
-    "@buoy-gg/shared-ui": "7.0.4"
+    "@buoy-gg/floating-tools-core": "7.0.6",
+    "@buoy-gg/shared-ui": "7.0.6"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "7.0.4",
+    "@buoy-gg/license": "7.0.6",
     "@react-native-async-storage/async-storage": "^2.0.0 || ^3.1.0",
     "@react-navigation/native": "*",
     "expo-router": "*",
@@ -52,7 +52,7 @@
     "@types/react-native": "^0.73.0",
     "expo-router": "~5.0.7",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "7.0.4"
+    "@buoy-gg/license": "7.0.6"
   },
   "react-native-builder-bob": {
     "source": "src",