@buoy-gg/route-events 7.0.26 → 7.0.28

package/lib/module/components/RouteEventExpandedContent.js

@@ -10,7 +10,7 @@
  */
 
 import { View, Text, StyleSheet } from "react-native";
-import { InlineCopyButton, buoyColors } from "@buoy-gg/shared-ui";
+import { InlineCopyButton, night } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Format duration in milliseconds to human-readable string
@@ -152,14 +152,14 @@ const styles = StyleSheet.create({
   },
   detailLabel: {
     fontSize: 10,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     fontWeight: "600",
     minWidth: 70
   },
   detailValue: {
     fontSize: 11,
-    color: buoyColors.text,
+    color: night.color.text,
     fontFamily: "monospace",
     flex: 1
   },
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
   },
   dataViewerTitle: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     fontWeight: "600"
   }

package/lib/module/components/RouteEventItemCompact.js

@@ -8,7 +8,7 @@
 
 import { memo, useMemo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { CompactRow, RelativeTime, buoyColors } from "@buoy-gg/shared-ui";
+import { CompactRow, RelativeTime, buoyColors, night } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
 import { getRouteTemplate } from "../utils/routeTemplate";
 
@@ -34,11 +34,11 @@ function getRouteTypeColor(routeType) {
     case "home":
       return buoyColors.success;
     case "dynamic":
-      return buoyColors.primary;
+      return night.color.accent;
     case "with-params":
       return buoyColors.warning;
     default:
-      return buoyColors.textSecondary;
+      return night.color.textSecondary;
     // More visible than border color
   }
 }
@@ -176,7 +176,7 @@ const styles = StyleSheet.create({
     fontFamily: "monospace"
   },
   goButton: {
-    backgroundColor: buoyColors.primary,
+    backgroundColor: night.color.accent,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderRadius: 4
@@ -184,7 +184,8 @@ const styles = StyleSheet.create({
   goButtonText: {
     fontSize: 10,
     fontWeight: "600",
-    color: "#FFFFFF",
+    // Ink on a filled accent surface — the night accent takes dark ink.
+    color: night.color.onAccent,
     fontFamily: "monospace"
   }
 });

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -1,16 +1,15 @@
 "use strict";
 
-import { useState, useCallback, useContext, useEffect, useRef, useMemo } from "react";
+import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, 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 { useSafeRouter, isExpoRouterAvailable } from "@buoy-gg/shared-ui";
-import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors, TickProvider, useLimit } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, PowerToggleButton, buoyColors, night, TickProvider, useLimit } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // Free tier limit for route events
@@ -81,7 +80,7 @@ export function RouteEventsModalWithTabs({
   remote
 }) {
   const router = useSafeRouter();
-  const containerRef = useContext(NavigationContainerRefContext);
+  const containerRef = useSafeNavigationContainerRef();
   const hasExpoRouter = isExpoRouterAvailable();
   const [activeTab, setActiveTab] = useState("events");
   const [showUpgradeModal, setShowUpgradeModal] = useState(false);
@@ -135,6 +134,19 @@ export function RouteEventsModalWithTabs({
   }, []);
   const handleNavigate = useCallback(pathname => {
     try {
+      // A remote host (Buoy Desktop) means the events belong to a synced
+      // device — this process has no router, so delegate over the socket.
+      // Same Pro gate as remote sitemap navigation: Home stays free so a
+      // free user can always get the device back to a known screen.
+      if (remote) {
+        if (!remote.onNavigatePath) return;
+        if (!isPro && pathname !== "/") {
+          setShowUpgradeModal(true);
+          return;
+        }
+        remote.onNavigatePath(pathname);
+        return;
+      }
       if (hasExpoRouter) {
         router.push(pathname);
       } else if (containerRef) {
@@ -158,11 +170,15 @@ export function RouteEventsModalWithTabs({
         containerRef.dispatch(CommonActions.navigate({
           name: screenName
         }));
+      } else {
+        // Neither Expo Router nor a navigation container — say so instead
+        // of swallowing the tap.
+        Alert.alert("Navigation Unavailable", "No Expo Router or React Navigation container was found in this app.");
       }
     } catch (error) {
       Alert.alert("Navigation Error", String(error));
     }
-  }, [router, containerRef, hasExpoRouter]);
+  }, [router, containerRef, hasExpoRouter, remote, isPro]);
 
   // Load persisted tab state on mount
   useEffect(() => {
@@ -443,7 +459,7 @@ export function RouteEventsModalWithTabs({
           style: styles.emptyState,
           children: [/*#__PURE__*/_jsx(Navigation, {
             size: 48,
-            color: buoyColors.textMuted
+            color: night.color.textTertiary
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.emptyTitle,
             children: searchQuery.trim() ? "No matching events" : isListening ? "No route events yet" : "Event listener is paused"
@@ -469,7 +485,7 @@ export function RouteEventsModalWithTabs({
         style: styles.lockedEventsBanner,
         children: [/*#__PURE__*/_jsx(Lock, {
           size: 14,
-          color: buoyColors.warning
+          color: night.color.warning
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.lockedEventsBannerText,
           children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
@@ -544,7 +560,7 @@ export function RouteEventsModalWithTabs({
           style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
           children: /*#__PURE__*/_jsx(Filter, {
             size: 14,
-            color: ignoredPatterns.size > 0 ? buoyColors.primary : buoyColors.textSecondary
+            color: ignoredPatterns.size > 0 ? night.color.accent : night.color.textSecondary
           })
         }), /*#__PURE__*/_jsx(PowerToggleButton, {
           isEnabled: isListening,
@@ -555,7 +571,7 @@ export function RouteEventsModalWithTabs({
           style: styles.iconButton,
           children: /*#__PURE__*/_jsx(Trash2, {
             size: 14,
-            color: buoyColors.error
+            color: night.color.danger
           })
         })]
       })]
@@ -608,7 +624,11 @@ export function RouteEventsModalWithTabs({
       onModeChange: handleModeChange,
       enablePersistence: true,
       initialMode: "bottomSheet",
-      enableGlitchEffects: true,
+      enableGlitchEffects: true
+      // Every screen owns its scrolling (timeline FlatList, sitemap/stack/
+      // detail/filter ScrollViews) — the default wrapper would nest them.
+      ,
+      disableScrollWrapper: true,
       styles: {},
       footer: footerNode,
       footerHeight: footerNode ? 68 : 0,
@@ -635,7 +655,9 @@ const styles = StyleSheet.create({
   inlineRoot: {
     flex: 1,
     minHeight: 0,
-    backgroundColor: buoyColors.base
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
   },
   inlineHeader: {
     paddingHorizontal: 12,
@@ -647,10 +669,10 @@ const styles = StyleSheet.create({
   iconButton: {
     padding: 6,
     borderRadius: 6,
-    backgroundColor: buoyColors.input
+    backgroundColor: night.color.buttonSurface
   },
   activeFilterButton: {
-    backgroundColor: buoyColors.primary + "1A"
+    backgroundColor: night.color.accentSoft
   },
   emptyState: {
     flex: 1,
@@ -659,7 +681,7 @@ const styles = StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 16,
     fontWeight: "600",
     marginTop: 16,
@@ -669,7 +691,7 @@ const styles = StyleSheet.create({
     textTransform: "uppercase"
   },
   emptySubtitle: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     fontFamily: "monospace"
@@ -680,32 +702,33 @@ const styles = StyleSheet.create({
   statsContainer: {
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: buoyColors.card,
+    backgroundColor: night.color.surface,
     borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border
+    borderBottomColor: night.color.border
   },
   statsText: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontFamily: "monospace",
     textAlign: "center"
   },
   statsWarning: {
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontWeight: "600"
   },
   searchContainer: {
     paddingHorizontal: 16,
     paddingVertical: 8,
-    backgroundColor: buoyColors.base
+    // Transparent so the night sheet's star field shows through.
+    backgroundColor: "transparent"
   },
   lockedEventsBanner: {
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
-    backgroundColor: buoyColors.warning + "15",
+    backgroundColor: night.color.warningSoft,
     borderWidth: 1,
-    borderColor: buoyColors.warning + "30",
+    borderColor: night.color.warning + "30",
     borderRadius: 8,
     paddingVertical: 10,
     paddingHorizontal: 14,
@@ -715,12 +738,12 @@ const styles = StyleSheet.create({
   lockedEventsBannerText: {
     fontSize: 12,
     fontWeight: "600",
-    color: buoyColors.warning,
+    color: night.color.warning,
     fontFamily: "monospace"
   },
   lockedEventsBannerSubtext: {
     fontSize: 11,
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     marginLeft: "auto"
   }
 });

package/lib/module/components/RouteEventsTimeline.js

@@ -12,7 +12,7 @@
 
 import { useCallback } from "react";
 import { View, Text, FlatList, StyleSheet } from "react-native";
-import { Navigation, buoyColors } from "@buoy-gg/shared-ui";
+import { Navigation, night } from "@buoy-gg/shared-ui";
 import { RouteEventItemCompact } from "./RouteEventItemCompact";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function RouteEventsTimeline({
@@ -31,7 +31,7 @@ export function RouteEventsTimeline({
       style: styles.emptyState,
       children: [/*#__PURE__*/_jsx(Navigation, {
         size: 48,
-        color: buoyColors.textMuted
+        color: night.color.textTertiary
       }), /*#__PURE__*/_jsx(Text, {
         style: styles.emptyTitle,
         children: "No events yet"
@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
     padding: 32
   },
   emptyTitle: {
-    color: buoyColors.text,
+    color: night.color.text,
     fontSize: 16,
     fontWeight: "600",
     marginTop: 16,
@@ -95,7 +95,7 @@ const styles = StyleSheet.create({
     textTransform: "uppercase"
   },
   emptySubtitle: {
-    color: buoyColors.textSecondary,
+    color: night.color.textSecondary,
     fontSize: 14,
     textAlign: "center",
     fontFamily: "monospace"