@buoy-gg/route-events 5.0.0 → 6.0.0

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RouteEventItemCompact = RouteEventItemCompact;
+exports.RouteEventItemCompact = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -114,12 +114,17 @@ function getBadgeText(event) {
   // Don't show badge text - route type is already shown in status label
   return undefined;
 }
-function RouteEventItemCompact({
+
+// Memo justified by profiling (tool-bench 2026-07-06): 400 row renders
+// during a 5s dwell at 500 events (timeline re-renders cascaded into all
+// mounted rows via an inline onPress closure).
+const RouteEventItemCompact = exports.RouteEventItemCompact = /*#__PURE__*/(0, _react.memo)(function RouteEventItemCompact({
   event,
   visitNumber,
   isExpanded,
   onPress,
-  onNavigate
+  onNavigate,
+  index
 }) {
   const routeType = (0, _react.useMemo)(() => getRouteType(event), [event]);
   const routeTemplate = (0, _react.useMemo)(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
@@ -127,7 +132,6 @@ function RouteEventItemCompact({
   const statusLabel = (0, _react.useMemo)(() => getStatusLabel(routeType), [routeType]);
   const statusSublabel = (0, _react.useMemo)(() => getStatusSublabel(event), [event]);
   const badgeText = (0, _react.useMemo)(() => getBadgeText(event), [event]);
-  const timeLabel = (0, _sharedUi.useRelativeTime)(event.timestamp);
   const expandedContent = (0, _react.useMemo)(() => {
     if (!isExpanded) return undefined;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventExpandedContent.RouteEventExpandedContent, {
@@ -170,14 +174,16 @@ function RouteEventItemCompact({
     badgeText: onNavigate ? undefined : badgeText,
     badgeColor: statusColor,
     customBadge: customBadge,
-    bottomRightText: timeLabel,
+    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
+      timestamp: event.timestamp
+    }),
     showChevron: true,
     expandedContent: expandedContent,
     isExpanded: isExpanded,
     expandedGlowColor: statusColor,
-    onPress: onPress
+    onPress: () => onPress(index)
   });
-}
+});
 const styles = _reactNative.StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

package/lib/commonjs/components/RouteEventsTimeline.js

@@ -42,16 +42,40 @@ function RouteEventsTimeline({
       })]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-    contentContainerStyle: styles.listContent,
-    children: events.map((event, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventItemCompact.RouteEventItemCompact, {
-      event: event,
-      visitNumber: visitCounts.get(index) || 1,
-      isExpanded: expandedIndex === index,
-      onPress: () => handleItemPress(index),
-      onNavigate: onNavigate
-    }, `event-${index}-${event.timestamp}`))
-  });
+  return (
+    /*#__PURE__*/
+    // Virtualized — the previous ScrollView + map mounted ALL events (at
+    // the 500-event cap that measured 32.8 JS FPS during an idle dwell,
+    // tool-bench 2026-07-06). extraData re-renders visible rows when the
+    // expanded row changes.
+    (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+      contentContainerStyle: styles.listContent,
+      data: events
+      // STABLE content keys — index-based keys remount every row when a new
+      // event prepends (measured 4 JS FPS during automation, which emits
+      // route events on every bounce; tool-bench 2026-07-06).
+      ,
+      keyExtractor: event => `${event.timestamp}-${event.pathname}`,
+      extraData: expandedIndex,
+      renderItem: ({
+        item: event,
+        index
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventItemCompact.RouteEventItemCompact, {
+        event: event,
+        visitNumber: visitCounts.get(index) || 1,
+        isExpanded: expandedIndex === index,
+        index: index,
+        onPress: handleItemPress,
+        onNavigate: onNavigate
+      }),
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      updateCellsBatchingPeriod: 50
+    })
+  );
 }
 const styles = _reactNative.StyleSheet.create({
   listContent: {

package/lib/commonjs/hooks/useRouteEvents.js

@@ -51,19 +51,28 @@ function useRouteEvents(options = {}) {
       setIsListening(false);
       return;
     }
+
+    // Frame-coalesced (see network's useNetworkEventList): navigation
+    // bursts land as one commit per frame instead of one per emission.
+    let rafId = null;
+    let pending = null;
     const unsubscribe = _routeEventStore.routeEventStore.subscribeToEvents(allEvents => {
-      // Limit events
-      if (allEvents.length > maxEvents) {
-        setEvents(allEvents.slice(0, maxEvents));
-      } else {
-        setEvents(allEvents);
-      }
+      pending = allEvents;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (!pending) return;
+        const latest = pending;
+        pending = null;
+        setEvents(latest.length > maxEvents ? latest.slice(0, maxEvents) : latest);
+      });
     });
 
     // Mark as listening after successful subscription
     setIsListening(true);
     return () => {
       unsubscribe();
+      if (rafId != null) cancelAnimationFrame(rafId);
       // Note: Don't set isListening=false here because we might be
       // re-subscribing due to dependency change, not actually stopping
     };

package/lib/module/components/RouteEventItemCompact.js

@@ -6,9 +6,9 @@
  * Uses CompactRow pattern matching network/storage/redux components
  */
 
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { CompactRow, useRelativeTime, buoyColors } from "@buoy-gg/shared-ui";
+import { CompactRow, RelativeTime, buoyColors } from "@buoy-gg/shared-ui";
 import { RouteEventExpandedContent } from "./RouteEventExpandedContent";
 
 // Route type for color coding
@@ -110,12 +110,17 @@ function getBadgeText(event) {
   // Don't show badge text - route type is already shown in status label
   return undefined;
 }
-export function RouteEventItemCompact({
+
+// Memo justified by profiling (tool-bench 2026-07-06): 400 row renders
+// during a 5s dwell at 500 events (timeline re-renders cascaded into all
+// mounted rows via an inline onPress closure).
+export const RouteEventItemCompact = /*#__PURE__*/memo(function RouteEventItemCompact({
   event,
   visitNumber,
   isExpanded,
   onPress,
-  onNavigate
+  onNavigate,
+  index
 }) {
   const routeType = useMemo(() => getRouteType(event), [event]);
   const routeTemplate = useMemo(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
@@ -123,7 +128,6 @@ export function RouteEventItemCompact({
   const statusLabel = useMemo(() => getStatusLabel(routeType), [routeType]);
   const statusSublabel = useMemo(() => getStatusSublabel(event), [event]);
   const badgeText = useMemo(() => getBadgeText(event), [event]);
-  const timeLabel = useRelativeTime(event.timestamp);
   const expandedContent = useMemo(() => {
     if (!isExpanded) return undefined;
     return /*#__PURE__*/_jsx(RouteEventExpandedContent, {
@@ -166,14 +170,16 @@ export function RouteEventItemCompact({
     badgeText: onNavigate ? undefined : badgeText,
     badgeColor: statusColor,
     customBadge: customBadge,
-    bottomRightText: timeLabel,
+    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
+      timestamp: event.timestamp
+    }),
     showChevron: true,
     expandedContent: expandedContent,
     isExpanded: isExpanded,
     expandedGlowColor: statusColor,
-    onPress: onPress
+    onPress: () => onPress(index)
   });
-}
+});
 const styles = StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

package/lib/module/components/RouteEventsTimeline.js

@@ -10,7 +10,7 @@
  */
 
 import { useCallback, useState } from "react";
-import { View, Text, ScrollView, StyleSheet } from "react-native";
+import { View, Text, FlatList, StyleSheet } from "react-native";
 import { Navigation, buoyColors } from "@buoy-gg/shared-ui";
 import { RouteEventItemCompact } from "./RouteEventItemCompact";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -38,16 +38,40 @@ export function RouteEventsTimeline({
       })]
     });
   }
-  return /*#__PURE__*/_jsx(ScrollView, {
-    contentContainerStyle: styles.listContent,
-    children: events.map((event, index) => /*#__PURE__*/_jsx(RouteEventItemCompact, {
-      event: event,
-      visitNumber: visitCounts.get(index) || 1,
-      isExpanded: expandedIndex === index,
-      onPress: () => handleItemPress(index),
-      onNavigate: onNavigate
-    }, `event-${index}-${event.timestamp}`))
-  });
+  return (
+    /*#__PURE__*/
+    // Virtualized — the previous ScrollView + map mounted ALL events (at
+    // the 500-event cap that measured 32.8 JS FPS during an idle dwell,
+    // tool-bench 2026-07-06). extraData re-renders visible rows when the
+    // expanded row changes.
+    _jsx(FlatList, {
+      contentContainerStyle: styles.listContent,
+      data: events
+      // STABLE content keys — index-based keys remount every row when a new
+      // event prepends (measured 4 JS FPS during automation, which emits
+      // route events on every bounce; tool-bench 2026-07-06).
+      ,
+      keyExtractor: event => `${event.timestamp}-${event.pathname}`,
+      extraData: expandedIndex,
+      renderItem: ({
+        item: event,
+        index
+      }) => /*#__PURE__*/_jsx(RouteEventItemCompact, {
+        event: event,
+        visitNumber: visitCounts.get(index) || 1,
+        isExpanded: expandedIndex === index,
+        index: index,
+        onPress: handleItemPress,
+        onNavigate: onNavigate
+      }),
+      showsVerticalScrollIndicator: true,
+      removeClippedSubviews: true,
+      initialNumToRender: 12,
+      maxToRenderPerBatch: 8,
+      windowSize: 5,
+      updateCellsBatchingPeriod: 50
+    })
+  );
 }
 const styles = StyleSheet.create({
   listContent: {

package/lib/module/hooks/useRouteEvents.js

@@ -48,19 +48,28 @@ export function useRouteEvents(options = {}) {
       setIsListening(false);
       return;
     }
+
+    // Frame-coalesced (see network's useNetworkEventList): navigation
+    // bursts land as one commit per frame instead of one per emission.
+    let rafId = null;
+    let pending = null;
     const unsubscribe = routeEventStore.subscribeToEvents(allEvents => {
-      // Limit events
-      if (allEvents.length > maxEvents) {
-        setEvents(allEvents.slice(0, maxEvents));
-      } else {
-        setEvents(allEvents);
-      }
+      pending = allEvents;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (!pending) return;
+        const latest = pending;
+        pending = null;
+        setEvents(latest.length > maxEvents ? latest.slice(0, maxEvents) : latest);
+      });
     });
 
     // Mark as listening after successful subscription
     setIsListening(true);
     return () => {
       unsubscribe();
+      if (rafId != null) cancelAnimationFrame(rafId);
       // Note: Don't set isListening=false here because we might be
       // re-subscribing due to dependency change, not actually stopping
     };

package/lib/typescript/components/RouteEventItemCompact.d.ts

@@ -8,8 +8,11 @@ export interface RouteEventItemCompactProps {
     event: RouteChangeEvent;
     visitNumber: number;
     isExpanded: boolean;
-    onPress: () => void;
+    /** Row's list index — passed back through onPress so the handler can
+     * stay a single stable callback (memo-compatible). */
+    index: number;
+    onPress: (index: number) => void;
     onNavigate?: (pathname: string) => void;
 }
-export declare function RouteEventItemCompact({ event, visitNumber, isExpanded, onPress, onNavigate, }: RouteEventItemCompactProps): import("react").JSX.Element;
+export declare const RouteEventItemCompact: import("react").NamedExoticComponent<RouteEventItemCompactProps>;
 //# sourceMappingURL=RouteEventItemCompact.d.ts.map

package/lib/typescript/components/RouteEventItemCompact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventItemCompact.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventItemCompact.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AA6GD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,WAAW,EACX,UAAU,EACV,OAAO,EACP,UAAU,GACX,EAAE,0BAA0B,+BA6D5B"}
+{"version":3,"file":"RouteEventItemCompact.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventItemCompact.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAKH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,MAAM,WAAW,0BAA0B;IACzC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB;0DACsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAgHD,eAAO,MAAM,qBAAqB,kEAmEhC,CAAC"}

package/lib/typescript/components/RouteEventsTimeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteEventsTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsTimeline.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAaH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,UAAU,wBAAwB;IAChC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,WAAW,EACX,UAAU,GACX,EAAE,wBAAwB,+BAiC1B"}
+{"version":3,"file":"RouteEventsTimeline.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsTimeline.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAaH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD,UAAU,wBAAwB;IAChC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,WAAW,EACX,UAAU,GACX,EAAE,wBAAwB,+BAoD1B"}

package/lib/typescript/hooks/useRouteEvents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRouteEvents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRouteEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAGH,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uBAAuB;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6DAA6D;IAC7D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CA4CtB"}
+{"version":3,"file":"useRouteEvents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRouteEvents.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAGH,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,2BAA2B,CAAC;AAGnC,YAAY,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAElE,MAAM,WAAW,qBAAqB;IACpC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,sCAAsC;IACtC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,uBAAuB;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6DAA6D;IAC7D,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAC5B,OAAO,GAAE,qBAA0B,GAClC,oBAAoB,CAoDtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/route-events",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "route-events package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,11 +26,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "5.0.0",
-    "@buoy-gg/shared-ui": "5.0.0"
+    "@buoy-gg/shared-ui": "6.0.0",
+    "@buoy-gg/floating-tools-core": "6.0.0"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "5.0.0",
+    "@buoy-gg/license": "6.0.0",
     "@react-native-async-storage/async-storage": "^2.0.0 || ^3.1.0",
     "@react-navigation/native": "*",
     "expo-router": "*",
@@ -49,7 +49,7 @@
     "@types/react-native": "^0.73.0",
     "expo-router": "~5.0.7",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "5.0.0"
+    "@buoy-gg/license": "6.0.0"
   },
   "react-native-builder-bob": {
     "source": "src",