@buoy-gg/route-events 3.0.1 → 4.0.1

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,26 +22,39 @@ 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,
+  onCopyValueChange
 }) {
-  const {
-    stack,
-    focusedRoute,
-    stackDepth,
-    isAtRoot,
-    isLoaded,
-    error,
-    navigateToIndex,
-    goBack,
-    popToTop
-  } = (0, _useNavigationStack.useNavigationStack)();
+  const hookResult = (0, _useNavigationStack.useNavigationStack)();
+  const isInjected = injectedStack != null;
+  const insets = (0, _sharedUi.useSafeAreaInsets)({
+    minBottom: 8
+  });
+
+  // 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);
 
   // Check Pro status internally
@@ -66,6 +79,12 @@ function NavigationStack({
     return JSON.stringify(stackData, null, 2);
   }, [stack]);
 
+  // Report the copy payload up so the host can render the copy button in the
+  // shared navbar.
+  (0, _react.useEffect)(() => {
+    onCopyValueChange?.(stackDataForCopy);
+  }, [stackDataForCopy, onCopyValueChange]);
+
   // Determine which route actions should operate on
   // If a stack item is expanded, actions target that route
   // Otherwise, actions target the focused (visible) route
@@ -128,6 +147,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 +189,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,37 +231,17 @@ 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],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        style: [styles.iconButton, showHelp && styles.iconButtonActive],
-        onPress: () => setShowHelp(!showHelp),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
-          size: 16,
-          color: showHelp ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
-        value: stackDataForCopy,
-        buttonStyle: styles.iconButton
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       style: styles.stackScroll,
       contentContainerStyle: [styles.stackContent, {
-        paddingBottom: showHelp ? 72 : 56
+        paddingBottom: styles.stackContent.padding + insets.bottom
       }],
       children: [...stack].reverse().map((item, reverseIndex) => {
         const actualIndex = stack.length - 1 - reverseIndex;
@@ -298,59 +310,56 @@ function NavigationStack({
                   data: item.params,
                   showTypeFilter: false
                 })
+              }), /*#__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.actionButton, isAtRoot && styles.actionButtonDisabled],
+                    onPress: handleGoBack,
+                    disabled: isAtRoot,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: [styles.actionButtonText, isAtRoot && styles.actionButtonTextDisabled],
+                      children: "Back"
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.helpText,
+                    children: "Go back one screen"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.actionWrapper,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    style: [styles.actionButton, item.isFocused && styles.actionButtonDisabled],
+                    onPress: handleGo,
+                    disabled: item.isFocused,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: [styles.actionButtonText, item.isFocused && styles.actionButtonTextDisabled],
+                      children: "Go"
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.helpText,
+                    children: "Navigate to this route"
+                  })]
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+                  style: styles.actionWrapper,
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                    style: [styles.actionButton, (item.isFocused || actualIndex === stackDepth - 1) && styles.actionButtonDisabled],
+                    onPress: handlePopTo,
+                    disabled: item.isFocused || actualIndex === stackDepth - 1,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                      style: [styles.actionButtonText, (item.isFocused || actualIndex === stackDepth - 1) && styles.actionButtonTextDisabled],
+                      children: "Pop To"
+                    })
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                    style: styles.helpText,
+                    children: "Remove screens above this"
+                  })]
+                })]
               })]
             })]
           })
         }, `stack-${actualIndex}-${item.key}`);
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.actionsContainer,
-      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.actionButton, isAtRoot && styles.actionButtonDisabled],
-            onPress: handleGoBack,
-            disabled: isAtRoot,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.actionButtonText, isAtRoot && styles.actionButtonTextDisabled],
-              children: "Back"
-            })
-          }), showHelp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.helpText,
-            children: "Go back one screen"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.actionWrapper,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.actionButton, selectedRoute?.isFocused && styles.actionButtonDisabled],
-            onPress: handleGo,
-            disabled: selectedRoute?.isFocused,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.actionButtonText, selectedRoute?.isFocused && styles.actionButtonTextDisabled],
-              children: "Go"
-            })
-          }), showHelp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.helpText,
-            children: "Navigate to selected route"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.actionWrapper,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.actionButton, (selectedRoute?.isFocused || selectedRoute?.index === stackDepth - 1) && styles.actionButtonDisabled],
-            onPress: handlePopTo,
-            disabled: selectedRoute?.isFocused || selectedRoute?.index === stackDepth - 1,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.actionButtonText, (selectedRoute?.isFocused || selectedRoute?.index === stackDepth - 1) && styles.actionButtonTextDisabled],
-              children: "Pop To"
-            })
-          }), showHelp && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.helpText,
-            children: "Remove screens above selected"
-          })]
-        })]
-      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
       visible: showUpgradeModal,
       onClose: () => setShowUpgradeModal(false),
@@ -417,22 +426,6 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace",
     textAlign: "center"
   },
-  header: {
-    flexDirection: "row",
-    padding: 8,
-    gap: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border,
-    alignItems: "center",
-    justifyContent: "flex-end"
-  },
-  iconButton: {
-    padding: 6,
-    borderRadius: 4
-  },
-  iconButtonActive: {
-    backgroundColor: _sharedUi.buoyColors.input
-  },
   stackScroll: {
     flex: 1
   },
@@ -512,22 +505,10 @@ const styles = _reactNative.StyleSheet.create({
     marginHorizontal: -12,
     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
-  },
   actionsRow: {
     flexDirection: "row",
     gap: 6,
-    marginBottom: 6
+    marginTop: 12
   },
   actionWrapper: {
     flex: 1

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -79,6 +79,9 @@ function RouteEventsModalWithTabs({
   const hasExpoRouter = (0, _sharedUi.isExpoRouterAvailable)();
   const [activeTab, setActiveTab] = (0, _react.useState)("events");
   const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
+  // Serialized stack reported up by NavigationStack so the copy button can live
+  // in the shared navbar.
+  const [stackCopyValue, setStackCopyValue] = (0, _react.useState)("");
 
   // Check Pro status internally
   const isPro = (0, _license.useIsPro)();
@@ -377,7 +380,8 @@ function RouteEventsModalWithTabs({
     }
     if (activeTab === "stack") {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationStack.NavigationStack, {
-        style: styles.contentWrapper
+        style: styles.contentWrapper,
+        onCopyValueChange: setStackCopyValue
       });
     }
 
@@ -482,8 +486,11 @@ function RouteEventsModalWithTabs({
               activeTab: activeTab,
               onTabChange: tab => setActiveTab(tab)
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-            children: activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          }), /*#__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
@@ -506,7 +513,7 @@ function RouteEventsModalWithTabs({
                   color: _sharedUi.buoyColors.error
                 })
               })]
-            })
+            })]
           })]
         })
       },