@buoy-gg/route-events 7.0.26 → 7.0.27

package/lib/commonjs/RouteParser.js

@@ -150,15 +150,19 @@ class RouteParser {
    */
   static organizeRoutes(routes) {
     const groups = [];
-    const rootRoutes = routes.filter(r => r.depth === 0 && r.type !== 'dynamic' && r.type !== 'layout');
+
+    // Flatten before grouping, like every other bucket — static/index screens
+    // nested under layouts (e.g. (tabs)/about at depth 2) must still be listed,
+    // or the stats header counts routes the list never shows.
+    const staticRoutes = this.flattenRoutes(routes).filter(r => r.type === 'static' || r.type === 'index');
     const dynamicRoutes = this.flattenRoutes(routes).filter(r => r.type === 'dynamic' || r.type === 'catch-all');
     const layoutRoutes = this.flattenRoutes(routes).filter(r => r.type === 'layout');
     const groupedRoutes = this.flattenRoutes(routes).filter(r => r.type === 'group');
-    if (rootRoutes.length > 0) {
+    if (staticRoutes.length > 0) {
       groups.push({
-        title: 'Root Routes',
+        title: 'Static Routes',
         icon: '',
-        routes: rootRoutes
+        routes: staticRoutes
       });
     }
     if (dynamicRoutes.length > 0) {

package/lib/commonjs/components/NavigationStack.js

@@ -259,10 +259,10 @@ function NavigationStack({
                 style: styles.expandIndicator,
                 children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
                   size: 14,
-                  color: _sharedUi.buoyColors.textSecondary
+                  color: _sharedUi.night.color.textSecondary
                 }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
                   size: 14,
-                  color: _sharedUi.buoyColors.textSecondary
+                  color: _sharedUi.night.color.textSecondary
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
                 style: styles.stackItemPath,
@@ -375,7 +375,8 @@ function NavigationStack({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   loadingContainer: {
     flex: 1,
@@ -384,7 +385,7 @@ const styles = _reactNative.StyleSheet.create({
     padding: 32
   },
   loadingText: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     fontFamily: "monospace"
   },
@@ -402,7 +403,7 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 8
   },
   errorDetail: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 12,
     fontFamily: "monospace",
     textAlign: "center"
@@ -414,14 +415,14 @@ const styles = _reactNative.StyleSheet.create({
     padding: 32
   },
   emptyText: {
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 16,
     fontWeight: "600",
     fontFamily: "monospace",
     marginBottom: 8
   },
   emptySubtext: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     fontFamily: "monospace",
     textAlign: "center"
@@ -436,14 +437,14 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 6
   },
   stackItem: {
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     overflow: "hidden"
   },
   stackItemSelected: {
-    borderColor: _sharedUi.buoyColors.primary,
+    borderColor: _sharedUi.night.color.accent,
     borderWidth: 2
   },
   stackItemHeader: {
@@ -460,7 +461,7 @@ const styles = _reactNative.StyleSheet.create({
   stackItemPath: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -484,20 +485,20 @@ const styles = _reactNative.StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 12,
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border
+    borderTopColor: _sharedUi.night.color.border
   },
   detailRow: {
     marginBottom: 8
   },
   detailLabel: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     marginBottom: 2
   },
   detailValue: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   dataViewerContainer: {
@@ -514,7 +515,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   actionButton: {
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     paddingVertical: 8,
     paddingHorizontal: 8,
     borderRadius: 6,
@@ -526,15 +527,15 @@ const styles = _reactNative.StyleSheet.create({
   actionButtonText: {
     fontSize: 12,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   actionButtonTextDisabled: {
-    color: _sharedUi.buoyColors.textMuted
+    color: _sharedUi.night.color.textTertiary
   },
   helpText: {
     fontSize: 9,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     textAlign: "center",
     marginTop: 4,

package/lib/commonjs/components/ReactNavigationRoutes.js

@@ -20,11 +20,10 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Provides navigation to any discovered screen using nested screen/params actions.
  */
 
-// Resolved once at module load; null when @react-navigation/native is absent
-// (the fallback context then yields an undefined containerRef, so the
-// dispatch paths below never execute).
+// Resolved once at module load; null when React Navigation is absent
+// (useSafeNavigationContainerRef then yields undefined, so the dispatch
+// paths below never execute).
 const CommonActions = (0, _safeReactNavigation.getCommonActions)();
-const NavigationContainerRefContext = (0, _safeReactNavigation.getNavigationContainerRefContext)();
 
 // ============================================================================
 // Types
@@ -125,7 +124,7 @@ function buildNestedNavigateAction(path) {
 function ReactNavigationRoutes({
   style
 }) {
-  const containerRef = (0, _react.useContext)(NavigationContainerRefContext);
+  const containerRef = (0, _safeReactNavigation.useSafeNavigationContainerRef)();
   const [navigationState, setNavigationState] = (0, _react.useState)(() => containerRef?.getRootState?.() ?? null);
   const [searchQuery, setSearchQuery] = (0, _react.useState)("");
   const [isSearching, setIsSearching] = (0, _react.useState)(false);
@@ -279,72 +278,15 @@ function ReactNavigationRoutes({
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.container, style],
-    children: [!isSearching ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.header,
-      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)(_sharedUi.ToolbarCopyButton, {
-            value: copyAllData,
-            buttonStyle: styles.actionButtonHeader
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.actionLabel,
-            children: "Copy"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.actionWrapper,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: [styles.iconButton, isRefreshing && styles.refreshButtonDisabled],
-            onPress: handleRefresh,
-            disabled: isRefreshing,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
-              size: 16,
-              color: isRefreshing ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.textSecondary
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.actionLabel,
-            children: "Refresh"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.actionWrapper,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            style: styles.iconButton,
-            onPress: () => setIsSearching(true),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-              size: 16,
-              color: _sharedUi.buoyColors.textSecondary
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.actionLabel,
-            children: "Search"
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.statsGrid,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
-          value: stats.total,
-          label: "Screens"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
-          value: stats.mounted,
-          label: "Mounted"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
-          value: stats.available,
-          label: "Available"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
-          value: stats.navigators,
-          label: "Navigators"
-        })]
-      })]
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [isSearching && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.searchContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
         size: 16,
-        color: _sharedUi.buoyColors.textMuted
+        color: _sharedUi.night.color.textTertiary
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
         style: styles.searchInput,
         placeholder: "Search screens...",
-        placeholderTextColor: _sharedUi.buoyColors.textMuted,
+        placeholderTextColor: _sharedUi.night.color.placeholder,
         value: searchQuery,
         onChangeText: setSearchQuery,
         autoCapitalize: "none",
@@ -371,7 +313,64 @@ function ReactNavigationRoutes({
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContent,
-      children: [filteredGroups.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [!isSearching && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.header,
+        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)(_sharedUi.ToolbarCopyButton, {
+              value: copyAllData,
+              buttonStyle: styles.actionButtonHeader
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.actionLabel,
+              children: "Copy"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.actionWrapper,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: [styles.iconButton, isRefreshing && styles.refreshButtonDisabled],
+              onPress: handleRefresh,
+              disabled: isRefreshing,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RefreshCw, {
+                size: 16,
+                color: isRefreshing ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.actionLabel,
+              children: "Refresh"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.actionWrapper,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+              style: styles.iconButton,
+              onPress: () => setIsSearching(true),
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+                size: 16,
+                color: _sharedUi.night.color.textSecondary
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.actionLabel,
+              children: "Search"
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statsGrid,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
+            value: stats.total,
+            label: "Screens"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
+            value: stats.mounted,
+            label: "Mounted"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
+            value: stats.available,
+            label: "Available"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StatItem, {
+            value: stats.navigators,
+            label: "Navigators"
+          })]
+        })]
+      }), filteredGroups.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.emptyState,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.emptyText,
@@ -442,10 +441,10 @@ function NavigatorGroupView({
         style: styles.groupHeaderLeft,
         children: [isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
           size: 14,
-          color: _sharedUi.buoyColors.textSecondary
+          color: _sharedUi.night.color.textSecondary
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
           size: 14,
-          color: _sharedUi.buoyColors.textSecondary
+          color: _sharedUi.night.color.textSecondary
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.groupTitle,
           numberOfLines: 1,
@@ -481,7 +480,7 @@ function ScreenItemView({
   onToggleExpand,
   onNavigate
 }) {
-  const statusColor = screen.isFocused ? _sharedUi.buoyColors.success : screen.isMounted ? "#3B82F6" : _sharedUi.buoyColors.textMuted;
+  const statusColor = screen.isFocused ? _sharedUi.buoyColors.success : screen.isMounted ? "#3B82F6" : _sharedUi.night.color.textTertiary;
   const statusLabel = screen.isFocused ? "FOCUSED" : screen.isMounted ? "MOUNTED" : "AVAILABLE";
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.screenItem,
@@ -495,10 +494,10 @@ function ScreenItemView({
           style: styles.expandIndicator,
           children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
             size: 14,
-            color: _sharedUi.buoyColors.textSecondary
+            color: _sharedUi.night.color.textSecondary
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
             size: 14,
-            color: _sharedUi.buoyColors.textSecondary
+            color: _sharedUi.night.color.textSecondary
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.screenName,
@@ -541,19 +540,20 @@ function ScreenItemView({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   emptyState: {
     padding: 32,
     alignItems: "center"
   },
   emptyText: {
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontSize: 14,
     fontFamily: "monospace"
   },
   emptySubtext: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 12,
     fontFamily: "monospace",
     marginTop: 8
@@ -562,8 +562,9 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "column",
     padding: 8,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border,
-    gap: 12
+    borderBottomColor: _sharedUi.night.color.border,
+    gap: 12,
+    marginBottom: 8
   },
   actionsRow: {
     flexDirection: "row",
@@ -581,7 +582,7 @@ const styles = _reactNative.StyleSheet.create({
   actionButtonHeader: {
     padding: 6,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input
+    backgroundColor: _sharedUi.night.color.surfaceElevated
   },
   iconButton: {
     padding: 6,
@@ -591,7 +592,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   actionLabel: {
     fontSize: 8,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontFamily: "monospace",
     textTransform: "uppercase",
     letterSpacing: 0.5
@@ -609,7 +610,7 @@ const styles = _reactNative.StyleSheet.create({
     flexShrink: 1,
     flexBasis: "20%",
     minWidth: 70,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 8,
     paddingVertical: 10,
     paddingHorizontal: 12,
@@ -618,12 +619,12 @@ const styles = _reactNative.StyleSheet.create({
   statValue: {
     fontSize: 18,
     fontWeight: "800",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace"
   },
   statLabel: {
     fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     marginTop: 4,
     fontFamily: "monospace",
     textTransform: "uppercase",
@@ -635,11 +636,11 @@ const styles = _reactNative.StyleSheet.create({
     padding: 8,
     gap: 8,
     borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.buoyColors.border
+    borderBottomColor: _sharedUi.night.color.border
   },
   searchInput: {
     flex: 1,
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontSize: 14,
     fontFamily: "monospace"
   },
@@ -647,7 +648,7 @@ const styles = _reactNative.StyleSheet.create({
     padding: 4
   },
   clearButtonText: {
-    color: _sharedUi.buoyColors.textMuted,
+    color: _sharedUi.night.color.textTertiary,
     fontSize: 18
   },
   closeSearchButton: {
@@ -655,7 +656,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 4
   },
   closeSearchText: {
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontSize: 14,
     fontWeight: "600",
     fontFamily: "monospace"
@@ -664,7 +665,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   scrollContent: {
-    paddingVertical: 8
+    paddingBottom: 8
   },
   metaFooter: {
     flexDirection: "row",
@@ -675,11 +676,11 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 16,
     marginTop: 16,
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border
+    borderTopColor: _sharedUi.night.color.border
   },
   metaText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace"
   },
   sourceBadge: {
@@ -687,12 +688,12 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 2,
     borderRadius: 999,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
-    backgroundColor: _sharedUi.buoyColors.card
+    borderColor: _sharedUi.night.color.border,
+    backgroundColor: _sharedUi.night.color.surface
   },
   sourceText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     textTransform: "capitalize",
     fontFamily: "monospace"
   },
@@ -705,9 +706,9 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     padding: 12,
     paddingHorizontal: 16,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderLeftWidth: 3,
-    borderLeftColor: _sharedUi.buoyColors.textSecondary
+    borderLeftColor: _sharedUi.night.color.fillTertiary
   },
   groupHeaderLeft: {
     flexDirection: "row",
@@ -718,7 +719,7 @@ const styles = _reactNative.StyleSheet.create({
   groupTitle: {
     fontSize: 12,
     fontWeight: "700",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     textTransform: "uppercase",
     letterSpacing: 0.8
@@ -741,19 +742,20 @@ const styles = _reactNative.StyleSheet.create({
     fontFamily: "monospace"
   },
   screensList: {
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   groupDescription: {
     paddingHorizontal: 16,
     paddingVertical: 8,
     marginBottom: 8,
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderLeftWidth: 3,
-    borderLeftColor: _sharedUi.buoyColors.textSecondary
+    borderLeftColor: _sharedUi.night.color.fillTertiary
   },
   groupDescriptionText: {
     fontSize: 11,
-    color: _sharedUi.buoyColors.textSecondary,
+    color: _sharedUi.night.color.textSecondary,
     fontFamily: "monospace",
     lineHeight: 16
   },
@@ -766,10 +768,10 @@ const styles = _reactNative.StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: _sharedUi.buoyColors.card,
+    backgroundColor: _sharedUi.night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -792,7 +794,7 @@ const styles = _reactNative.StyleSheet.create({
   screenName: {
     fontSize: 13,
     fontWeight: "600",
-    color: _sharedUi.buoyColors.text,
+    color: _sharedUi.night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -815,19 +817,19 @@ const styles = _reactNative.StyleSheet.create({
   headerActionButton: {
     padding: 6,
     borderRadius: 4,
-    backgroundColor: _sharedUi.buoyColors.input,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: _sharedUi.buoyColors.border,
+    borderColor: _sharedUi.night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   navigateButton: {
-    backgroundColor: _sharedUi.buoyColors.primary + "15",
-    borderColor: _sharedUi.buoyColors.primary + "40"
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorder
   },
   navigateButtonText: {
     fontSize: 12,
-    color: _sharedUi.buoyColors.primary,
+    color: _sharedUi.night.color.accent,
     fontFamily: "monospace",
     fontWeight: "600"
   }

package/lib/commonjs/components/RouteEventDetail.js

@@ -43,7 +43,7 @@ function RouteEventDetail({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Navigation, {
           size: 16,
-          color: "#FFFFFF"
+          color: _sharedUi.night.color.onAccent
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: styles.goButtonText,
           children: "Go to route"
@@ -55,7 +55,8 @@ function RouteEventDetail({
 const styles = _reactNative.StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: _sharedUi.buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scroll: {
     flex: 1
@@ -66,23 +67,25 @@ const styles = _reactNative.StyleSheet.create({
   footer: {
     paddingHorizontal: 16,
     paddingVertical: 12,
-    backgroundColor: _sharedUi.buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent",
     borderTopWidth: 1,
-    borderTopColor: _sharedUi.buoyColors.border
+    borderTopColor: _sharedUi.night.color.border
   },
   goButton: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     gap: 8,
-    backgroundColor: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.night.color.accent,
     paddingVertical: 12,
     borderRadius: 8
   },
   goButtonText: {
     fontSize: 13,
     fontWeight: "600",
-    color: "#FFFFFF",
+    // Ink on a filled accent surface — the night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
     fontFamily: "monospace",
     textTransform: "uppercase",
     letterSpacing: 0.5

package/lib/commonjs/components/RouteEventExpandedContent.js

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