@buoy-gg/route-events 7.0.26 → 7.0.28

package/lib/module/RouteParser.js

@@ -146,15 +146,19 @@ export 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/module/components/NavigationStack.js

@@ -9,7 +9,7 @@
 
 import { useState, useMemo, useEffect } from "react";
 import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import { ChevronDown, ChevronRight, InlineCopyButton, ProUpgradeModal, buoyColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { ChevronDown, ChevronRight, InlineCopyButton, ProUpgradeModal, buoyColors, night, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useNavigationStack } from "../useNavigationStack";
@@ -255,10 +255,10 @@ export function NavigationStack({
                 style: styles.expandIndicator,
                 children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
                   size: 14,
-                  color: buoyColors.textSecondary
+                  color: night.color.textSecondary
                 }) : /*#__PURE__*/_jsx(ChevronRight, {
                   size: 14,
-                  color: buoyColors.textSecondary
+                  color: night.color.textSecondary
                 })
               }), /*#__PURE__*/_jsx(Text, {
                 style: styles.stackItemPath,
@@ -371,7 +371,8 @@ export function NavigationStack({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
   },
   loadingContainer: {
     flex: 1,
@@ -380,7 +381,7 @@ const styles = StyleSheet.create({
     padding: 32
   },
   loadingText: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     fontFamily: "monospace"
   },
@@ -398,7 +399,7 @@ const styles = StyleSheet.create({
     marginBottom: 8
   },
   errorDetail: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 12,
     fontFamily: "monospace",
     textAlign: "center"
@@ -410,14 +411,14 @@ const styles = StyleSheet.create({
     padding: 32
   },
   emptyText: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 16,
     fontWeight: "600",
     fontFamily: "monospace",
     marginBottom: 8
   },
   emptySubtext: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     fontFamily: "monospace",
     textAlign: "center"
@@ -432,14 +433,14 @@ const styles = StyleSheet.create({
     marginBottom: 6
   },
   stackItem: {
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     overflow: "hidden"
   },
   stackItemSelected: {
-    borderColor: buoyColors.primary,
+    borderColor: night.color.accent,
     borderWidth: 2
   },
   stackItemHeader: {
@@ -456,7 +457,7 @@ const styles = StyleSheet.create({
   stackItemPath: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -480,20 +481,20 @@ const styles = StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 12,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border
+    borderTopColor: night.color.border
   },
   detailRow: {
     marginBottom: 8
   },
   detailLabel: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     marginBottom: 2
   },
   detailValue: {
     fontSize: 12,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   dataViewerContainer: {
@@ -510,7 +511,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   actionButton: {
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     paddingVertical: 8,
     paddingHorizontal: 8,
     borderRadius: 6,
@@ -522,15 +523,15 @@ const styles = StyleSheet.create({
   actionButtonText: {
     fontSize: 12,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   actionButtonTextDisabled: {
-    color: buoyColors.textMuted
+    color: night.color.textTertiary
   },
   helpText: {
     fontSize: 9,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     textAlign: "center",
     marginTop: 4,

package/lib/module/components/ReactNavigationRoutes.js

@@ -10,16 +10,15 @@
  * Provides navigation to any discovered screen using nested screen/params actions.
  */
 
-import { useState, useCallback, useMemo, useEffect, useContext } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert } from "react-native";
-import { getCommonActions, getNavigationContainerRefContext } from "../utils/safeReactNavigation";
+import { getCommonActions, useSafeNavigationContainerRef } from "../utils/safeReactNavigation";
 
-// 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 = getCommonActions();
-const NavigationContainerRefContext = getNavigationContainerRefContext();
-import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, ProUpgradeModal, buoyColors, night } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // ============================================================================
@@ -121,7 +120,7 @@ function buildNestedNavigateAction(path) {
 export function ReactNavigationRoutes({
   style
 }) {
-  const containerRef = useContext(NavigationContainerRefContext);
+  const containerRef = useSafeNavigationContainerRef();
   const [navigationState, setNavigationState] = useState(() => containerRef?.getRootState?.() ?? null);
   const [searchQuery, setSearchQuery] = useState("");
   const [isSearching, setIsSearching] = useState(false);
@@ -275,72 +274,15 @@ export function ReactNavigationRoutes({
   }
   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, {
+    children: [isSearching && /*#__PURE__*/_jsxs(View, {
       style: styles.searchContainer,
       children: [/*#__PURE__*/_jsx(Search, {
         size: 16,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(TextInput, {
         style: styles.searchInput,
         placeholder: "Search screens...",
-        placeholderTextColor: buoyColors.textMuted,
+        placeholderTextColor: night.color.placeholder,
         value: searchQuery,
         onChangeText: setSearchQuery,
         autoCapitalize: "none",
@@ -367,7 +309,64 @@ export function ReactNavigationRoutes({
     }), /*#__PURE__*/_jsxs(ScrollView, {
       style: styles.scrollView,
       contentContainerStyle: styles.scrollContent,
-      children: [filteredGroups.length === 0 ? /*#__PURE__*/_jsx(View, {
+      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 ? night.color.textTertiary : night.color.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: night.color.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"
+          })]
+        })]
+      }), filteredGroups.length === 0 ? /*#__PURE__*/_jsx(View, {
         style: styles.emptyState,
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.emptyText,
@@ -438,10 +437,10 @@ function NavigatorGroupView({
         style: styles.groupHeaderLeft,
         children: [isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
           size: 14,
-          color: buoyColors.textSecondary
+          color: night.color.textSecondary
         }) : /*#__PURE__*/_jsx(ChevronRight, {
           size: 14,
-          color: buoyColors.textSecondary
+          color: night.color.textSecondary
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.groupTitle,
           numberOfLines: 1,
@@ -477,7 +476,7 @@ function ScreenItemView({
   onToggleExpand,
   onNavigate
 }) {
-  const statusColor = screen.isFocused ? buoyColors.success : screen.isMounted ? "#3B82F6" : buoyColors.textMuted;
+  const statusColor = screen.isFocused ? buoyColors.success : screen.isMounted ? "#3B82F6" : night.color.textTertiary;
   const statusLabel = screen.isFocused ? "FOCUSED" : screen.isMounted ? "MOUNTED" : "AVAILABLE";
   return /*#__PURE__*/_jsx(View, {
     style: styles.screenItem,
@@ -491,10 +490,10 @@ function ScreenItemView({
           style: styles.expandIndicator,
           children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
             size: 14,
-            color: buoyColors.textSecondary
+            color: night.color.textSecondary
           }) : /*#__PURE__*/_jsx(ChevronRight, {
             size: 14,
-            color: buoyColors.textSecondary
+            color: night.color.textSecondary
           })
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.screenName,
@@ -537,19 +536,20 @@ function ScreenItemView({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 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: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     fontFamily: "monospace"
   },
   emptySubtext: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 12,
     fontFamily: "monospace",
     marginTop: 8
@@ -558,8 +558,9 @@ const styles = StyleSheet.create({
     flexDirection: "column",
     padding: 8,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border,
-    gap: 12
+    borderBottomColor: night.color.border,
+    gap: 12,
+    marginBottom: 8
   },
   actionsRow: {
     flexDirection: "row",
@@ -577,7 +578,7 @@ const styles = StyleSheet.create({
   actionButtonHeader: {
     padding: 6,
     borderRadius: 4,
-    backgroundColor: buoyColors.input
+    backgroundColor: night.color.surfaceElevated
   },
   iconButton: {
     padding: 6,
@@ -587,7 +588,7 @@ const styles = StyleSheet.create({
   },
   actionLabel: {
     fontSize: 8,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontFamily: "monospace",
     textTransform: "uppercase",
     letterSpacing: 0.5
@@ -605,7 +606,7 @@ const styles = StyleSheet.create({
     flexShrink: 1,
     flexBasis: "20%",
     minWidth: 70,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 8,
     paddingVertical: 10,
     paddingHorizontal: 12,
@@ -614,12 +615,12 @@ const styles = StyleSheet.create({
   statValue: {
     fontSize: 18,
     fontWeight: "800",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace"
   },
   statLabel: {
     fontSize: 10,
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     marginTop: 4,
     fontFamily: "monospace",
     textTransform: "uppercase",
@@ -631,11 +632,11 @@ const styles = StyleSheet.create({
     padding: 8,
     gap: 8,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border
+    borderBottomColor: night.color.border
   },
   searchInput: {
     flex: 1,
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 14,
     fontFamily: "monospace"
   },
@@ -643,7 +644,7 @@ const styles = StyleSheet.create({
     padding: 4
   },
   clearButtonText: {
-    color: buoyColors.textMuted,
+    color: night.color.textTertiary,
     fontSize: 18
   },
   closeSearchButton: {
@@ -651,7 +652,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4
   },
   closeSearchText: {
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontSize: 14,
     fontWeight: "600",
     fontFamily: "monospace"
@@ -660,7 +661,7 @@ const styles = StyleSheet.create({
     flex: 1
   },
   scrollContent: {
-    paddingVertical: 8
+    paddingBottom: 8
   },
   metaFooter: {
     flexDirection: "row",
@@ -671,11 +672,11 @@ const styles = StyleSheet.create({
     paddingVertical: 16,
     marginTop: 16,
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border
+    borderTopColor: night.color.border
   },
   metaText: {
     fontSize: 12,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace"
   },
   sourceBadge: {
@@ -683,12 +684,12 @@ const styles = StyleSheet.create({
     paddingVertical: 2,
     borderRadius: 999,
     borderWidth: 1,
-    borderColor: buoyColors.border,
-    backgroundColor: buoyColors.card
+    borderColor: night.color.border,
+    backgroundColor: night.color.surface
   },
   sourceText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     textTransform: "capitalize",
     fontFamily: "monospace"
   },
@@ -701,9 +702,9 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     padding: 12,
     paddingHorizontal: 16,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderLeftWidth: 3,
-    borderLeftColor: buoyColors.textSecondary
+    borderLeftColor: night.color.fillTertiary
   },
   groupHeaderLeft: {
     flexDirection: "row",
@@ -714,7 +715,7 @@ const styles = StyleSheet.create({
   groupTitle: {
     fontSize: 12,
     fontWeight: "700",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     textTransform: "uppercase",
     letterSpacing: 0.8
@@ -737,19 +738,20 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   screensList: {
-    backgroundColor: buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   groupDescription: {
     paddingHorizontal: 16,
     paddingVertical: 8,
     marginBottom: 8,
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderLeftWidth: 3,
-    borderLeftColor: buoyColors.textSecondary
+    borderLeftColor: night.color.fillTertiary
   },
   groupDescriptionText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     lineHeight: 16
   },
@@ -762,10 +764,10 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingVertical: 10,
     paddingHorizontal: 12,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderRadius: 6,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
@@ -788,7 +790,7 @@ const styles = StyleSheet.create({
   screenName: {
     fontSize: 13,
     fontWeight: "600",
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -811,19 +813,19 @@ const styles = StyleSheet.create({
   headerActionButton: {
     padding: 6,
     borderRadius: 4,
-    backgroundColor: buoyColors.input,
+    backgroundColor: night.color.surfaceElevated,
     borderWidth: 1,
-    borderColor: buoyColors.border,
+    borderColor: night.color.border,
     alignItems: "center",
     justifyContent: "center"
   },
   navigateButton: {
-    backgroundColor: buoyColors.primary + "15",
-    borderColor: buoyColors.primary + "40"
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorder
   },
   navigateButtonText: {
     fontSize: 12,
-    color: buoyColors.primary,
+    color: night.color.accent,
     fontFamily: "monospace",
     fontWeight: "600"
   }

package/lib/module/components/RouteEventDetail.js

@@ -10,7 +10,7 @@
  */
 
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { Navigation, buoyColors } from "@buoy-gg/shared-ui";
+import { Navigation, night } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
 import { getRouteTemplate } from "../utils/routeTemplate";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,7 +39,7 @@ export function RouteEventDetail({
         activeOpacity: 0.8,
         children: [/*#__PURE__*/_jsx(Navigation, {
           size: 16,
-          color: "#FFFFFF"
+          color: night.color.onAccent
         }), /*#__PURE__*/_jsx(Text, {
           style: styles.goButtonText,
           children: "Go to route"
@@ -51,7 +51,8 @@ export function RouteEventDetail({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   scroll: {
     flex: 1
@@ -62,23 +63,25 @@ const styles = StyleSheet.create({
   footer: {
     paddingHorizontal: 16,
     paddingVertical: 12,
-    backgroundColor: buoyColors.base,
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent",
     borderTopWidth: 1,
-    borderTopColor: buoyColors.border
+    borderTopColor: night.color.border
   },
   goButton: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
     gap: 8,
-    backgroundColor: buoyColors.primary,
+    backgroundColor: 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: night.color.onAccent,
     fontFamily: "monospace",
     textTransform: "uppercase",
     letterSpacing: 0.5