@buoy-gg/route-events 7.0.34 → 7.0.36

package/lib/commonjs/components/NavigationStack.js

@@ -416,7 +416,7 @@ const styles = _reactNative.StyleSheet.create({
   loadingText: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   errorContainer: {
     flex: 1,
@@ -428,13 +428,13 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.buoyColors.error,
     fontSize: 16,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginBottom: 8
   },
   errorDetail: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textAlign: "center"
   },
   emptyContainer: {
@@ -447,13 +447,13 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.text,
     fontSize: 16,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginBottom: 8
   },
   emptySubtext: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textAlign: "center"
   },
   stackScroll: {
@@ -491,7 +491,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 13,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   copyRouteButton: {
@@ -507,7 +507,7 @@ const styles = _reactNative.StyleSheet.create({
   statusBadgeText: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   expandedContent: {
     paddingHorizontal: 12,
@@ -522,13 +522,13 @@ const styles = _reactNative.StyleSheet.create({
   detailLabel: {
     fontSize: 10,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginBottom: 2
   },
   detailValue: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   dataViewerContainer: {
     marginTop: 4,
@@ -557,7 +557,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   actionButtonTextDisabled: {
     color: _sharedUi.night.color.textTertiary
@@ -565,7 +565,7 @@ const styles = _reactNative.StyleSheet.create({
   helpText: {
     fontSize: 9,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textAlign: "center",
     marginTop: 4,
     lineHeight: 12

package/lib/commonjs/components/ReactNavigationRoutes.js

@@ -550,12 +550,12 @@ const styles = _reactNative.StyleSheet.create({
   emptyText: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   emptySubtext: {
     color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginTop: 8
   },
   header: {
@@ -593,7 +593,7 @@ const styles = _reactNative.StyleSheet.create({
   actionLabel: {
     fontSize: 8,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -620,13 +620,13 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 18,
     fontWeight: "800",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   statLabel: {
     fontSize: 10,
     color: _sharedUi.night.color.textTertiary,
     marginTop: 4,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -642,7 +642,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     color: _sharedUi.night.color.text,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   clearButton: {
     padding: 4
@@ -659,7 +659,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.accent,
     fontSize: 14,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   scrollView: {
     flex: 1
@@ -681,7 +681,7 @@ const styles = _reactNative.StyleSheet.create({
   metaText: {
     fontSize: 12,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   sourceBadge: {
     paddingHorizontal: 8,
@@ -695,7 +695,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
     textTransform: "capitalize",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   groupContainer: {
     marginVertical: 4
@@ -720,7 +720,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.8
   },
@@ -739,7 +739,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: "#3B82F6",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   screensList: {
     // Transparent so the night sheet's star field shows through.
@@ -756,7 +756,7 @@ const styles = _reactNative.StyleSheet.create({
   groupDescriptionText: {
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     lineHeight: 16
   },
   screenItem: {
@@ -795,7 +795,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 13,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   screenHeaderActions: {
@@ -812,7 +812,7 @@ const styles = _reactNative.StyleSheet.create({
   statusText: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   headerActionButton: {
     padding: 6,
@@ -830,7 +830,7 @@ const styles = _reactNative.StyleSheet.create({
   navigateButtonText: {
     fontSize: 12,
     color: _sharedUi.night.color.accent,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "600"
   }
 });

package/lib/commonjs/components/RouteEventDetail.js

@@ -90,7 +90,7 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     // Ink on a filled accent surface — the night accent takes dark ink.
     color: _sharedUi.night.color.onAccent,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   }

package/lib/commonjs/components/RouteEventExpandedContent.js

@@ -172,14 +172,14 @@ const styles = _reactNative.StyleSheet.create({
   detailLabel: {
     fontSize: 10,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "600",
     minWidth: 70
   },
   detailValue: {
     fontSize: 11,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   copyButton: {
@@ -198,7 +198,7 @@ const styles = _reactNative.StyleSheet.create({
   dataViewerTitle: {
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "600"
   }
 });

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -191,7 +191,7 @@ const styles = _reactNative.StyleSheet.create({
   badgeText: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   goButton: {
     backgroundColor: _sharedUi.night.color.accent,
@@ -204,6 +204,6 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     // Ink on a filled accent surface — the night accent takes dark ink.
     color: _sharedUi.night.color.onAccent,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -646,7 +646,7 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     marginTop: 16,
     marginBottom: 8,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.5,
     textTransform: "uppercase"
   },
@@ -654,7 +654,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   contentWrapper: {
     flex: 1
@@ -669,7 +669,7 @@ const styles = _reactNative.StyleSheet.create({
   statsText: {
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textAlign: "center"
   },
   statsWarning: {
@@ -699,7 +699,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _sharedUi.night.color.warning,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   lockedEventsBannerSubtext: {
     fontSize: 11,

package/lib/commonjs/components/RouteEventsTimeline.js

@@ -94,7 +94,7 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     marginTop: 16,
     marginBottom: 8,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.5,
     textTransform: "uppercase"
   },
@@ -102,6 +102,6 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

package/lib/commonjs/components/RoutesSitemap.js

@@ -687,7 +687,7 @@ const styles = _reactNative.StyleSheet.create({
   loadingText: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textAlign: "center",
     lineHeight: 20,
     paddingHorizontal: 32,
@@ -728,13 +728,13 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 18,
     fontWeight: "800",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   statLabel: {
     fontSize: 10,
     color: _sharedUi.night.color.textTertiary,
     marginTop: 4,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -773,7 +773,7 @@ const styles = _reactNative.StyleSheet.create({
   actionLabel: {
     fontSize: 8,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.5
   },
@@ -797,7 +797,7 @@ const styles = _reactNative.StyleSheet.create({
   metaText: {
     fontSize: 12,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   sourceBadge: {
     paddingHorizontal: 8,
@@ -811,7 +811,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
     textTransform: "capitalize",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   searchContainer: {
     flexDirection: "row",
@@ -825,7 +825,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     color: _sharedUi.night.color.text,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   clearButton: {
     padding: 4
@@ -842,7 +842,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.accent,
     fontSize: 14,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   scrollView: {
     flex: 1
@@ -857,7 +857,7 @@ const styles = _reactNative.StyleSheet.create({
   emptyText: {
     color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   groupContainer: {
     marginVertical: 4
@@ -882,7 +882,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textTransform: "uppercase",
     letterSpacing: 0.8
   },
@@ -901,7 +901,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: "#3B82F6",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   routesList: {
     // Transparent so the night sheet's star field shows through.
@@ -918,7 +918,7 @@ const styles = _reactNative.StyleSheet.create({
   groupDescriptionText: {
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     lineHeight: 16
   },
   routeItem: {
@@ -961,7 +961,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 13,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   routeHeaderActions: {
@@ -984,7 +984,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   typeTag: {
     borderRadius: 4,
@@ -995,7 +995,7 @@ const styles = _reactNative.StyleSheet.create({
   typeText: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Compact icon-sized Copy button in the header action cluster.
   iconAction: {
@@ -1022,7 +1022,7 @@ const styles = _reactNative.StyleSheet.create({
   goButtonText: {
     fontSize: 12,
     color: _sharedUi.night.color.accent,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "600"
   },
   childrenContainer: {

package/lib/commonjs/sync/routeEventsSyncAdapter.js

@@ -131,7 +131,21 @@ const routeEventsSyncAdapter = exports.routeEventsSyncAdapter = {
       // BaseEventStore is newest-FIRST, and the store only captures while
       // something is subscribed.
       const latest = _routeEventStore.routeEventStore.getEvents()[0];
-      if (latest) {
+
+      /**
+       * A RECORDED event only wins while the recorder is running.
+       *
+       * The store starts capturing when its first subscriber arrives and stops
+       * with the last one, so an app with Ask Buoy on the phone and no
+       * dashboard attached has NO route events at all — the stack fallback
+       * below is its normal path, not the fresh-launch edge case this code was
+       * written for. Worse, events left over from a closed capture window are
+       * stale the moment the user navigates again: a live QA session read
+       * `/(tabs)/menu` from an event six scenarios after the app had moved to
+       * `/cart`. The live stack cannot be stale, so it wins whenever nothing
+       * is recording.
+       */
+      if (latest && _routeEventStore.routeEventStore.isCapturing()) {
         return {
           path: latest.pathname,
           params: toWireParams(latest.params),
@@ -139,13 +153,12 @@ const routeEventsSyncAdapter = exports.routeEventsSyncAdapter = {
           source: "event"
         };
       }
-      // Nothing has navigated yet — which is exactly the state a freshly
-      // launched app is in, and exactly when a macro recorder needs to know
-      // where it is starting from. The live stack knows even when the history
-      // is empty, so falling back to it is the difference between a macro that
-      // can run from anywhere and one that only works if you happen to be on
-      // the screen it was recorded from.
-      const focused = _navigationStackStore.navigationStackStore.getStack().find(item => item.isFocused) ?? _navigationStackStore.navigationStackStore.getStack().slice(-1)[0];
+
+      // The live stack knows even when the history is empty, which is the
+      // difference between a macro that can run from anywhere and one that
+      // only works if you happen to be on the screen it was recorded from.
+      const stack = _navigationStackStore.navigationStackStore.getStack();
+      const focused = stack.find(item => item.isFocused) ?? stack[stack.length - 1];
       if (focused?.pathname) {
         return {
           path: focused.pathname,
@@ -154,6 +167,19 @@ const routeEventsSyncAdapter = exports.routeEventsSyncAdapter = {
           source: "stack"
         };
       }
+
+      // No live stack (no <RouteTracker/>) and the recorder is off: an old
+      // event is all there is. Say that it may be stale rather than passing it
+      // off as where the app is.
+      if (latest) {
+        return {
+          path: latest.pathname,
+          params: toWireParams(latest.params),
+          at: latest.timestamp,
+          source: "event",
+          stale: true
+        };
+      }
       return {
         path: null,
         params: {},

package/lib/commonjs/useNavigationStack.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.buildStack = buildStack;
 exports.useNavigationStack = useNavigationStack;
 var _react = require("react");
 var _safeReactNavigation = require("./utils/safeReactNavigation");
@@ -85,14 +86,39 @@ function buildNestedNavigateAction(path) {
 // ============================================================================
 
 /**
- * Recursively collect all routes from the navigation state tree
+ * Recursively collect the routes from the navigation state tree.
+ *
+ * FOCUS COMES FROM `state.index`, NEVER FROM POSITION. React Navigation names
+ * the focused route by index within `routes`; the array's order is declaration
+ * order. `buildStack` used to equate the two — "the last route in the collected
+ * list is the focused one" — and a hidden tab declared last (`href: null` on an
+ * expo-router `Tabs.Screen`) then became the reported current screen for the
+ * whole session. Measured on a real app: Home and Rewards both reported as a
+ * hidden Menu tab, in every turn of a 55-scenario QA run, because `menu` was
+ * declared last.
+ *
+ * TAB AND DRAWER SIBLINGS ARE NOT A STACK. They are alternative destinations
+ * that happen to be mounted at the same time; `canPop` and `popToIndex` never
+ * meant anything for them. Only the focused branch of a tab/drawer is
+ * collected, so what comes back is the stack you could actually pop.
  */
-function collectRoutesFromState(state, depth = 0, parentPath = "") {
-  if (!state || !state.routes) return [];
+function collectRoutesFromState(state, depth = 0, parentPath = "", onFocusedChain = true) {
+  if (!state || !Array.isArray(state.routes) || state.routes.length === 0) {
+    return [];
+  }
   const routes = [];
+
+  // An absent or out-of-range `index` is incomplete state (mid-rehydration, a
+  // partially built child). Fall back to the last route — a stack's top — and
+  // never to an arbitrary sibling.
+  const declaredIndex = typeof state.index === "number" ? state.index : NaN;
+  const focusedIndex = Number.isInteger(declaredIndex) && declaredIndex >= 0 && declaredIndex < state.routes.length ? declaredIndex : state.routes.length - 1;
+  const navigatorType = typeof state.type === "string" ? state.type : undefined;
+  const siblingsAreStack = navigatorType !== "tab" && navigatorType !== "drawer";
   for (let i = 0; i < state.routes.length; i++) {
+    if (!siblingsAreStack && i !== focusedIndex) continue;
     const route = state.routes[i];
-    const isFocused = i === state.index;
+    const isFocused = i === focusedIndex;
 
     // Build the path
     let pathname = route.name;
@@ -116,25 +142,30 @@ function collectRoutesFromState(state, depth = 0, parentPath = "") {
         });
       }
     }
+
+    // Descend the focused branch first: whatever it yields owns the focus, and
+    // this route only keeps it when nothing deeper claimed it.
+    const onChain = onFocusedChain && isFocused;
+    const nestedRoutes = onChain && route.state ? collectRoutesFromState(route.state, depth + 1, pathname, true) : [];
     routes.push({
       key: route.key,
       name: route.name,
       path: pathname,
       params: route.params || {},
-      state: route.state
+      state: route.state,
+      isFocused: onChain && nestedRoutes.length === 0
     });
-
-    // If this route has nested state and is focused, recurse
-    if (isFocused && route.state) {
-      const nestedRoutes = collectRoutesFromState(route.state, depth + 1, pathname);
-      routes.push(...nestedRoutes);
-    }
+    routes.push(...nestedRoutes);
   }
   return routes;
 }
 
 /**
- * Transform raw navigation state into display items
+ * Transform raw navigation state into display items.
+ *
+ * Exported for tests: the focus rule below is the one thing every route answer
+ * in the product rests on, and it was previously only reachable by extracting
+ * the function from source with the TypeScript AST.
  */
 function buildStack(navigationState, isExpo) {
   if (!navigationState) return [];
@@ -153,7 +184,14 @@ function buildStack(navigationState, isExpo) {
     // If we filtered everything out, just keep the last route
     const finalRoutes = filteredRoutes.length > 0 ? filteredRoutes : routes.slice(-1);
 
-    // The last route in the collected list is the focused one
+    /**
+     * Focus survives filtering. It is decided in `collectRoutesFromState` from
+     * `state.index`; the only case that falls back to the last item is one
+     * where the filter dropped the focused route itself (an internal expo
+     * layout), which is the one situation the old rule was ever right for.
+     */
+    const collectedFocus = finalRoutes.findIndex(route => route.isFocused);
+    const focusIndex = collectedFocus >= 0 ? collectedFocus : finalRoutes.length - 1;
     return finalRoutes.map((route, index) => {
       let cleanPath = route.path || `/${route.name}`;
       // Clean up Expo Router internal /__root prefix
@@ -169,7 +207,7 @@ function buildStack(navigationState, isExpo) {
         name: route.name,
         pathname: cleanPath,
         params: route.params || {},
-        isFocused: index === finalRoutes.length - 1,
+        isFocused: index === focusIndex,
         index,
         canPop: index > 0
       };