@buoy-gg/route-events 2.1.3 → 2.1.4-beta.3

package/lib/commonjs/RouteTracker.js

@@ -4,19 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RouteTracker = RouteTracker;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _useRouteObserver = require("./useRouteObserver");
+var _useRouteObserverReactNavigation = require("./useRouteObserverReactNavigation");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * RouteTracker - A component to place inside your navigation tree
  *
- * This component calls useRouteObserver() which uses expo-router hooks
- * (usePathname, useSegments, etc.) to track navigation changes.
+ * Automatically detects whether Expo Router or React Navigation is available
+ * and uses the appropriate route observation method.
  *
  * IMPORTANT: This component MUST be placed inside your navigation tree
- * (as a child of Stack, Tabs, or Slot) for route tracking to work.
+ * (as a child of Stack, Tabs, Slot, or NavigationContainer) for route tracking to work.
  *
  * @example
  * ```tsx
- * // In your _layout.tsx
+ * // Expo Router - in your _layout.tsx
  * import { RouteTracker } from '@buoy-gg/route-events';
  *
  * export default function RootLayout() {
@@ -30,10 +33,33 @@ var _useRouteObserver = require("./useRouteObserver");
  *     </>
  *   );
  * }
+ *
+ * // React Navigation (RN CLI) - inside NavigationContainer
+ * import { RouteTracker } from '@buoy-gg/route-events';
+ *
+ * function App() {
+ *   return (
+ *     <NavigationContainer>
+ *       <RootNavigator />
+ *       <RouteTracker />
+ *       <FloatingDevTools ... />
+ *     </NavigationContainer>
+ *   );
+ * }
  * ```
  */
 
-function RouteTracker() {
+function ExpoRouteTracker() {
   (0, _useRouteObserver.useRouteObserver)();
   return null;
+}
+function ReactNavigationRouteTracker() {
+  (0, _useRouteObserverReactNavigation.useRouteObserverReactNavigation)();
+  return null;
+}
+function RouteTracker() {
+  if ((0, _sharedUi.isExpoRouterAvailable)()) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpoRouteTracker, {});
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactNavigationRouteTracker, {});
 }

package/lib/commonjs/components/NavigationStack.js

@@ -10,7 +10,6 @@ var _sharedUi = require("@buoy-gg/shared-ui");
 var _license = require("@buoy-gg/license");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _useNavigationStack = require("../useNavigationStack");
-var _expoRouter = require("expo-router");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * NavigationStack - Visual representation of current navigation stack
@@ -41,7 +40,6 @@ function NavigationStack({
     goBack,
     popToTop
   } = (0, _useNavigationStack.useNavigationStack)();
-  const router = (0, _expoRouter.useRouter)();
   const [expandedIndex, setExpandedIndex] = (0, _react.useState)(null);
   const [showHelp, setShowHelp] = (0, _react.useState)(false);
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
@@ -230,7 +228,9 @@ function NavigationStack({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       style: styles.stackScroll,
-      contentContainerStyle: styles.stackContent,
+      contentContainerStyle: [styles.stackContent, {
+        paddingBottom: showHelp ? 72 : 56
+      }],
       children: [...stack].reverse().map((item, reverseIndex) => {
         const actualIndex = stack.length - 1 - reverseIndex;
         const isExpanded = expandedIndex === actualIndex;
@@ -259,17 +259,16 @@ function NavigationStack({
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
                 value: item.pathname,
                 buttonStyle: styles.copyRouteButton
-              }), item.isFocused ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.focusedBadge,
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [styles.statusBadge, {
+                  backgroundColor: item.isFocused ? `${_sharedUi.buoyColors.success}15` : "#3B82F615",
+                  borderColor: item.isFocused ? `${_sharedUi.buoyColors.success}40` : "#3B82F640"
+                }],
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.focusedBadgeText,
-                  children: "VISIBLE"
-                })
-              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: styles.memoryBadge,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                  style: styles.memoryBadgeText,
-                  children: "MEMORY"
+                  style: [styles.statusBadgeText, {
+                    color: item.isFocused ? _sharedUi.buoyColors.success : "#3B82F6"
+                  }],
+                  children: item.isFocused ? "FOCUSED" : "MOUNTED"
                 })
               })]
             }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -476,28 +475,15 @@ const styles = _reactNative.StyleSheet.create({
     padding: 4,
     marginLeft: 4
   },
-  focusedBadge: {
-    backgroundColor: _sharedUi.buoyColors.success,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  focusedBadgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: _sharedUi.buoyColors.base,
-    fontFamily: "monospace"
-  },
-  memoryBadge: {
-    backgroundColor: _sharedUi.buoyColors.input,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
+  statusBadge: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderWidth: 1
   },
-  memoryBadgeText: {
-    fontSize: 9,
+  statusBadgeText: {
+    fontSize: 10,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.textSecondary,
     fontFamily: "monospace"
   },
   expandedContent: {
@@ -527,8 +513,13 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 8
   },
   actionsContainer: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
     borderTopWidth: 1,
     borderTopColor: _sharedUi.buoyColors.border,
+    backgroundColor: _sharedUi.buoyColors.base,
     paddingHorizontal: 8,
     paddingTop: 8,
     paddingBottom: 8