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

package/lib/module/components/ReactNavigationRoutes.js

@@ -0,0 +1,825 @@
+"use strict";
+
+/**
+ * ReactNavigationRoutes - Visual sitemap of all screens in a React Navigation app
+ *
+ * Discovers all registered screens by walking the navigation state tree.
+ * Each navigator's state includes a `routeNames` array listing ALL screens
+ * registered with it — even ones not currently mounted in the stack.
+ *
+ * Provides navigation to any discovered screen using nested screen/params actions.
+ */
+
+import { useState, useCallback, useMemo, useEffect, useContext } from "react";
+import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert } from "react-native";
+import { CommonActions } from "@react-navigation/native";
+import { NavigationContainerRefContext } from "@react-navigation/core";
+import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+import { useIsPro } from "@buoy-gg/license";
+
+// ============================================================================
+// Types
+// ============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// State Tree Walking
+// ============================================================================
+
+/**
+ * Walk the navigation state tree and collect all navigators with their registered screens.
+ */
+function collectNavigatorGroups(state, parentPath = "Root") {
+  if (!state) return [];
+  const groups = [];
+
+  // routeNames lists ALL screens registered with this navigator
+  const routeNames = state.routeNames || [];
+  const mountedRouteNames = new Set((state.routes || []).map(r => r.name));
+  const focusedIndex = state.index ?? 0;
+  const focusedRouteName = state.routes?.[focusedIndex]?.name;
+  if (routeNames.length > 0) {
+    const screens = routeNames.map(name => ({
+      name,
+      isMounted: mountedRouteNames.has(name),
+      isFocused: name === focusedRouteName
+    }));
+    groups.push({
+      name: parentPath === "Root" ? "Root" : parentPath.split(" > ").pop(),
+      path: parentPath,
+      screens,
+      totalScreens: screens.length
+    });
+  }
+
+  // Recurse into mounted routes that have nested navigator state
+  for (const route of state.routes || []) {
+    if (route.state) {
+      const childPath = `${parentPath} > ${route.name}`;
+      const nestedGroups = collectNavigatorGroups(route.state, childPath);
+      groups.push(...nestedGroups);
+    }
+  }
+  return groups;
+}
+
+/**
+ * Find the path from root navigation state to a screen by name.
+ */
+function findScreenPath(state, screenName) {
+  if (!state || !state.routes) return null;
+
+  // Check routeNames (all registered screens) not just mounted routes
+  const routeNames = state.routeNames || [];
+  if (routeNames.includes(screenName)) {
+    return [screenName];
+  }
+  for (const route of state.routes) {
+    if (route.state) {
+      const nested = findScreenPath(route.state, screenName);
+      if (nested) {
+        return [route.name, ...nested];
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Build a nested CommonActions.navigate() from a path of screen names.
+ */
+function buildNestedNavigateAction(path) {
+  if (path.length === 0) return null;
+  if (path.length === 1) {
+    return CommonActions.navigate({
+      name: path[0]
+    });
+  }
+  let params = {
+    screen: path[path.length - 1]
+  };
+  for (let i = path.length - 2; i >= 1; i--) {
+    params = {
+      screen: path[i],
+      params
+    };
+  }
+  return CommonActions.navigate({
+    name: path[0],
+    params
+  });
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function ReactNavigationRoutes({
+  style
+}) {
+  const containerRef = useContext(NavigationContainerRefContext);
+  const [navigationState, setNavigationState] = useState(() => containerRef?.getRootState?.() ?? null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [expandedGroup, setExpandedGroup] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const isPro = useIsPro();
+  useEffect(() => {
+    if (showUpgradeModal && isPro) {
+      setShowUpgradeModal(false);
+    }
+  }, [showUpgradeModal, isPro]);
+
+  // Subscribe to navigation state changes
+  useEffect(() => {
+    if (!containerRef) return;
+    const initialState = containerRef.getRootState?.();
+    if (initialState) {
+      setNavigationState(initialState);
+    }
+    const unsubscribe = containerRef.addListener?.("state", () => {
+      const state = containerRef.getRootState?.();
+      if (state) {
+        setNavigationState(state);
+      }
+    });
+    return () => {
+      unsubscribe?.();
+    };
+  }, [containerRef]);
+
+  // Build navigator groups from state
+  const groups = useMemo(() => collectNavigatorGroups(navigationState), [navigationState]);
+
+  // Auto-expand first group on first load
+  useEffect(() => {
+    if (groups.length > 0 && expandedGroup === null) {
+      setExpandedGroup(groups[0].path);
+    }
+  }, [groups.length]);
+
+  // Flatten all screens for stats and search
+  const allScreens = useMemo(() => {
+    const screens = [];
+    for (const group of groups) {
+      for (const screen of group.screens) {
+        screens.push({
+          name: screen.name,
+          navigatorPath: group.path,
+          isMounted: screen.isMounted,
+          isFocused: screen.isFocused
+        });
+      }
+    }
+    return screens;
+  }, [groups]);
+
+  // Filter groups by search
+  const filteredGroups = useMemo(() => {
+    if (!searchQuery.trim()) return groups;
+    const query = searchQuery.toLowerCase();
+    return groups.map(group => ({
+      ...group,
+      screens: group.screens.filter(s => s.name.toLowerCase().includes(query))
+    })).filter(group => group.screens.length > 0);
+  }, [groups, searchQuery]);
+
+  // Stats
+  const stats = useMemo(() => {
+    const total = allScreens.length;
+    const mounted = allScreens.filter(s => s.isMounted).length;
+    const available = total - mounted;
+    const navigators = groups.length;
+    return {
+      total,
+      mounted,
+      available,
+      navigators
+    };
+  }, [allScreens, groups]);
+
+  // Copy data
+  const copyAllData = useMemo(() => {
+    return {
+      summary: {
+        totalScreens: stats.total,
+        mounted: stats.mounted,
+        available: stats.available,
+        navigators: stats.navigators,
+        timestamp: new Date().toISOString()
+      },
+      navigators: groups.map(group => ({
+        path: group.path,
+        screens: group.screens.map(s => ({
+          name: s.name,
+          isMounted: s.isMounted,
+          isFocused: s.isFocused
+        }))
+      }))
+    };
+  }, [groups, stats]);
+  const handleToggleGroup = useCallback(groupPath => {
+    setExpandedGroup(prev => prev === groupPath ? null : groupPath);
+  }, []);
+  const handleNavigate = useCallback(screenName => {
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    if (!containerRef || !navigationState) return;
+    try {
+      const path = findScreenPath(navigationState, screenName);
+      if (path) {
+        const action = buildNestedNavigateAction(path);
+        if (action) {
+          containerRef.dispatch(action);
+          return;
+        }
+      }
+      // Fallback
+      containerRef.dispatch(CommonActions.navigate({
+        name: screenName
+      }));
+    } catch (error) {
+      Alert.alert("Navigation Error", String(error));
+    }
+  }, [containerRef, navigationState, isPro]);
+  const handleRefresh = useCallback(() => {
+    if (isRefreshing || !containerRef) return;
+    setIsRefreshing(true);
+    const state = containerRef.getRootState?.();
+    if (state) {
+      setNavigationState(state);
+    }
+    setTimeout(() => setIsRefreshing(false), 400);
+  }, [isRefreshing, containerRef]);
+  if (!navigationState) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.container, style],
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "No navigation state available"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySubtext,
+          children: "Ensure you are inside a NavigationContainer"
+        })]
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [!isSearching ? /*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.actionsRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
+            value: copyAllData,
+            buttonStyle: styles.actionButtonHeader
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.actionLabel,
+            children: "Copy"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.iconButton, isRefreshing && styles.refreshButtonDisabled],
+            onPress: handleRefresh,
+            disabled: isRefreshing,
+            children: /*#__PURE__*/_jsx(RefreshCw, {
+              size: 16,
+              color: isRefreshing ? buoyColors.textMuted : buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.actionLabel,
+            children: "Refresh"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.iconButton,
+            onPress: () => setIsSearching(true),
+            children: /*#__PURE__*/_jsx(Search, {
+              size: 16,
+              color: buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.actionLabel,
+            children: "Search"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.statsGrid,
+        children: [/*#__PURE__*/_jsx(StatItem, {
+          value: stats.total,
+          label: "Screens"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.mounted,
+          label: "Mounted"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.available,
+          label: "Available"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.navigators,
+          label: "Navigators"
+        })]
+      })]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: styles.searchContainer,
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: 16,
+        color: buoyColors.textMuted
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: styles.searchInput,
+        placeholder: "Search screens...",
+        placeholderTextColor: buoyColors.textMuted,
+        value: searchQuery,
+        onChangeText: setSearchQuery,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        autoFocus: true
+      }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setSearchQuery(""),
+        style: styles.clearButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.clearButtonText,
+          children: "\u2715"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeSearchButton,
+        onPress: () => {
+          setIsSearching(false);
+          setSearchQuery("");
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.closeSearchText,
+          children: "Done"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scrollView,
+      contentContainerStyle: styles.scrollContent,
+      children: [filteredGroups.length === 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.emptyState,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: searchQuery ? "No matching screens" : "No screens found"
+        })
+      }) : filteredGroups.map(group => /*#__PURE__*/_jsx(NavigatorGroupView, {
+        group: group,
+        isExpanded: searchQuery.length > 0 || expandedGroup === group.path,
+        onToggleExpand: () => handleToggleGroup(group.path),
+        onNavigate: handleNavigate
+      }, group.path)), /*#__PURE__*/_jsxs(View, {
+        style: styles.metaFooter,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.metaText,
+          children: "Source: navigation state"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.sourceBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.sourceText,
+            children: "React Navigation"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Route Navigation"
+    })]
+  });
+}
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+
+function StatItem({
+  value,
+  label
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.statItem,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.statValue,
+      children: value
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.statLabel,
+      children: label
+    })]
+  });
+}
+function NavigatorGroupView({
+  group,
+  isExpanded,
+  onToggleExpand,
+  onNavigate
+}) {
+  const [expandedScreen, setExpandedScreen] = useState(null);
+  const handleToggleScreen = useCallback(screenName => {
+    setExpandedScreen(prev => prev === screenName ? null : screenName);
+  }, []);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.groupContainer,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: styles.groupHeader,
+      onPress: onToggleExpand,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.groupHeaderLeft,
+        children: [isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+          size: 14,
+          color: buoyColors.textSecondary
+        }) : /*#__PURE__*/_jsx(ChevronRight, {
+          size: 14,
+          color: buoyColors.textSecondary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.groupTitle,
+          numberOfLines: 1,
+          children: group.name
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.groupBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.groupCount,
+          children: group.screens.length
+        })
+      })]
+    }), isExpanded && /*#__PURE__*/_jsxs(View, {
+      style: styles.screensList,
+      children: [group.path !== "Root" && group.path.includes(" > ") && /*#__PURE__*/_jsx(View, {
+        style: styles.groupDescription,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.groupDescriptionText,
+          children: group.path
+        })
+      }), group.screens.map(screen => /*#__PURE__*/_jsx(ScreenItemView, {
+        screen: screen,
+        isExpanded: expandedScreen === screen.name,
+        onToggleExpand: () => handleToggleScreen(screen.name),
+        onNavigate: onNavigate
+      }, screen.name))]
+    })]
+  });
+}
+function ScreenItemView({
+  screen,
+  isExpanded,
+  onToggleExpand,
+  onNavigate
+}) {
+  const statusColor = screen.isFocused ? buoyColors.success : screen.isMounted ? "#3B82F6" : buoyColors.textMuted;
+  const statusLabel = screen.isFocused ? "FOCUSED" : screen.isMounted ? "MOUNTED" : "AVAILABLE";
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.screenItem,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.screenCard,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.screenHeaderLeft,
+        onPress: onToggleExpand,
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.expandIndicator,
+          children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+            size: 14,
+            color: buoyColors.textSecondary
+          }) : /*#__PURE__*/_jsx(ChevronRight, {
+            size: 14,
+            color: buoyColors.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.screenName,
+          numberOfLines: 1,
+          children: screen.name
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.screenHeaderActions,
+        children: [/*#__PURE__*/_jsx(InlineCopyButton, {
+          value: screen.name,
+          buttonStyle: styles.headerActionButton
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.headerActionButton, styles.navigateButton],
+          onPress: () => onNavigate(screen.name),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.navigateButtonText,
+            children: "Go"
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: [styles.statusBadge, {
+            backgroundColor: `${statusColor}15`,
+            borderColor: `${statusColor}40`
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.statusText, {
+              color: statusColor
+            }],
+            children: statusLabel
+          })
+        })]
+      })]
+    })
+  });
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  emptyState: {
+    padding: 32,
+    alignItems: "center"
+  },
+  emptyText: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  emptySubtext: {
+    color: buoyColors.textMuted,
+    fontSize: 12,
+    fontFamily: "monospace",
+    marginTop: 8
+  },
+  header: {
+    flexDirection: "column",
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border,
+    gap: 12
+  },
+  actionsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 12,
+    paddingBottom: 4
+  },
+  actionWrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    minWidth: 48
+  },
+  actionButtonHeader: {
+    padding: 6,
+    borderRadius: 4,
+    backgroundColor: buoyColors.input
+  },
+  iconButton: {
+    padding: 6,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionLabel: {
+    fontSize: 8,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  refreshButtonDisabled: {
+    opacity: 0.5
+  },
+  statsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  statItem: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "20%",
+    minWidth: 70,
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: "center"
+  },
+  statValue: {
+    fontSize: 18,
+    fontWeight: "800",
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  statLabel: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 4,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    gap: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border
+  },
+  searchInput: {
+    flex: 1,
+    color: buoyColors.text,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  clearButton: {
+    padding: 4
+  },
+  clearButtonText: {
+    color: buoyColors.textMuted,
+    fontSize: 18
+  },
+  closeSearchButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  closeSearchText: {
+    color: buoyColors.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingVertical: 8
+  },
+  metaFooter: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    marginTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border
+  },
+  metaText: {
+    fontSize: 12,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  sourceBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    backgroundColor: buoyColors.card
+  },
+  sourceText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    textTransform: "capitalize",
+    fontFamily: "monospace"
+  },
+  groupContainer: {
+    marginVertical: 4
+  },
+  groupHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 12,
+    paddingHorizontal: 16,
+    backgroundColor: buoyColors.card,
+    borderLeftWidth: 3,
+    borderLeftColor: buoyColors.textSecondary
+  },
+  groupHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  groupTitle: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.8
+  },
+  groupBadge: {
+    backgroundColor: "#3B82F615",
+    borderColor: "#3B82F640",
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    minWidth: 24,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  groupCount: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#3B82F6",
+    fontFamily: "monospace"
+  },
+  screensList: {
+    backgroundColor: buoyColors.base
+  },
+  groupDescription: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: buoyColors.input,
+    borderLeftWidth: 3,
+    borderLeftColor: buoyColors.textSecondary
+  },
+  groupDescriptionText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    lineHeight: 16
+  },
+  screenItem: {
+    marginBottom: 6
+  },
+  screenCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  screenHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  expandIndicator: {
+    width: 20,
+    alignItems: "center"
+  },
+  screenName: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  screenHeaderActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  statusBadge: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderWidth: 1
+  },
+  statusText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  headerActionButton: {
+    padding: 6,
+    borderRadius: 4,
+    backgroundColor: buoyColors.input,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  navigateButton: {
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "40"
+  },
+  navigateButtonText: {
+    fontSize: 12,
+    color: buoyColors.primary,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  }
+});