@buoy-gg/route-events 1.7.8 → 2.1.2

package/lib/commonjs/components/RouteEventDetailContent.js

@@ -28,7 +28,7 @@ function RouteEventDetailContent({
     const loadPreferences = async () => {
       try {
         // Load detail view preference (current/diff)
-        const savedDetailView = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.routeEvents.detailView());
+        const savedDetailView = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.detailView());
         if (savedDetailView === "current" || savedDetailView === "diff") {
           setInternalActiveView(savedDetailView);
         }
@@ -44,7 +44,7 @@ function RouteEventDetailContent({
   const handleViewChange = (0, _react.useCallback)(async view => {
     setInternalActiveView(view);
     try {
-      await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.routeEvents.detailView(), view);
+      await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.detailView(), view);
     } catch (error) {
       // Failed to save detail view preference
     }

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -12,7 +12,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * RouteEventItemCompact - Compact list item for route events
  *
- * Uses CompactRow pattern matching network/storage components
+ * Uses CompactRow pattern matching network/storage/redux components
  */
 
 // Route type for color coding
@@ -53,16 +53,13 @@ function getRouteTypeColor(routeType) {
   switch (routeType) {
     case "home":
       return _sharedUi.buoyColors.success;
-    // Teal
     case "dynamic":
       return _sharedUi.buoyColors.primary;
-    // Teal
     case "with-params":
       return _sharedUi.buoyColors.warning;
-    // Orange
     default:
-      return _sharedUi.buoyColors.border;
-    // Gray
+      return _sharedUi.buoyColors.textSecondary;
+    // More visible than border color
   }
 }
 
@@ -80,15 +77,42 @@ function getStatusLabel(routeType) {
   }
 }
 
-// Get secondary text (param count + route type)
-function getSecondaryText(event, routeType) {
+// Format duration in human-readable format
+function formatDuration(ms) {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.floor(ms % 60000 / 1000);
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+}
+
+// Get status sublabel (time on previous route + depth info)
+function getStatusSublabel(event) {
+  const parts = [];
+
+  // Show time spent on previous route if available
+  if (event.timeSincePrevious !== undefined && event.timeSincePrevious > 0) {
+    parts.push(formatDuration(event.timeSincePrevious));
+  }
+
+  // Show segment depth (e.g., "depth 2" for /users/profile)
+  const depth = event.segments?.length || 0;
+  if (depth > 0) {
+    parts.push(`depth ${depth}`);
+  }
+  return parts.join(" · ") || "root";
+}
+
+// Get badge text - only show when there's additional info beyond the status label
+function getBadgeText(event) {
   const hasParams = event.params && Object.keys(event.params).length > 0;
-  if (!hasParams) {
-    return undefined;
+  if (hasParams) {
+    const paramCount = Object.keys(event.params).length;
+    return `${paramCount} PARAM${paramCount !== 1 ? "S" : ""}`;
   }
-  const paramCount = Object.keys(event.params).length;
-  const paramText = `${paramCount} param${paramCount !== 1 ? 's' : ''}`;
-  return `${paramText} • ${getStatusLabel(routeType)}`;
+
+  // Don't show badge text - route type is already shown in status label
+  return undefined;
 }
 function RouteEventItemCompact({
   event,
@@ -101,7 +125,8 @@ function RouteEventItemCompact({
   const routeTemplate = (0, _react.useMemo)(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
   const statusColor = (0, _react.useMemo)(() => getRouteTypeColor(routeType), [routeType]);
   const statusLabel = (0, _react.useMemo)(() => getStatusLabel(routeType), [routeType]);
-  const secondaryText = (0, _react.useMemo)(() => getSecondaryText(event, routeType), [event, routeType]);
+  const statusSublabel = (0, _react.useMemo)(() => getStatusSublabel(event), [event]);
+  const badgeText = (0, _react.useMemo)(() => getBadgeText(event), [event]);
   const timeLabel = (0, _react.useMemo)(() => (0, _sharedUi.formatRelativeTime)(new Date(event.timestamp)), [event.timestamp]);
   const expandedContent = (0, _react.useMemo)(() => {
     if (!isExpanded) return undefined;
@@ -111,18 +136,17 @@ function RouteEventItemCompact({
       routeTemplate: routeTemplate
     });
   }, [isExpanded, event, visitNumber, routeTemplate]);
+
+  // Custom badge shows Go button (and badge text if present) when onNavigate is provided
   const customBadge = (0, _react.useMemo)(() => {
-    if (!onNavigate) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.timeText,
-        children: timeLabel
-      });
-    }
+    if (!onNavigate) return undefined;
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.timeText,
-        children: timeLabel
+      children: [badgeText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.badgeText, {
+          color: statusColor
+        }],
+        children: badgeText
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         style: styles.goButton,
         onPress: e => {
@@ -135,13 +159,18 @@ function RouteEventItemCompact({
         })
       })]
     });
-  }, [timeLabel, onNavigate, event.pathname]);
+  }, [onNavigate, event.pathname, badgeText, statusColor]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
-    primaryText: event.pathname,
-    secondaryText: secondaryText,
+    statusSublabel: statusSublabel,
+    primaryText: event.pathname
+    // Use badgeText when no customBadge, otherwise badge is inside customBadge
+    ,
+    badgeText: onNavigate ? undefined : badgeText,
+    badgeColor: statusColor,
     customBadge: customBadge,
+    bottomRightText: timeLabel,
     showChevron: true,
     expandedContent: expandedContent,
     isExpanded: isExpanded,
@@ -155,9 +184,9 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     gap: 6
   },
-  timeText: {
-    fontSize: 10,
-    color: _sharedUi.buoyColors.textMuted,
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
     fontFamily: "monospace"
   },
   goButton: {

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -69,7 +69,7 @@ function RouteEventsModalWithTabs({
     if (!visible || hasLoadedTabState.current) return;
     const loadTabState = async () => {
       try {
-        const storedTab = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.routeEvents.activeTab());
+        const storedTab = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.activeTab());
         if (storedTab && (storedTab === "routes" || storedTab === "events")) {
           setActiveTab(storedTab);
         }
@@ -86,7 +86,7 @@ function RouteEventsModalWithTabs({
     if (!visible || hasLoadedMonitoringState.current) return;
     const loadMonitoringState = async () => {
       try {
-        const storedMonitoring = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring());
+        const storedMonitoring = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
           setIsListening(shouldMonitor);
@@ -104,7 +104,7 @@ function RouteEventsModalWithTabs({
     if (!hasLoadedTabState.current) return;
     const saveTabState = async () => {
       try {
-        await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.routeEvents.activeTab(), activeTab);
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.activeTab(), activeTab);
       } catch (error) {
         // Failed to save tab state
       }
@@ -117,7 +117,7 @@ function RouteEventsModalWithTabs({
     if (!hasLoadedMonitoringState.current) return;
     const saveMonitoringState = async () => {
       try {
-        await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
       } catch (error) {
         // Failed to save monitoring state
       }
@@ -130,7 +130,7 @@ function RouteEventsModalWithTabs({
     if (!visible || hasLoadedFilters.current) return;
     const loadFilters = async () => {
       try {
-        const storedFilters = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters());
+        const storedFilters = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters());
         if (storedFilters) {
           const filters = JSON.parse(storedFilters);
           setIgnoredPatterns(new Set(filters));
@@ -149,7 +149,7 @@ function RouteEventsModalWithTabs({
     const saveFilters = async () => {
       try {
         const filters = Array.from(ignoredPatterns);
-        await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
+        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
       } catch (error) {
         // Failed to save filters
       }

package/lib/commonjs/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "NavigationStack", {
     return _NavigationStack.NavigationStack;
   }
 });
+Object.defineProperty(exports, "RouteEventExpandedContent", {
+  enumerable: true,
+  get: function () {
+    return _RouteEventExpandedContent.RouteEventExpandedContent;
+  }
+});
+Object.defineProperty(exports, "RouteEventItemCompact", {
+  enumerable: true,
+  get: function () {
+    return _RouteEventItemCompact.RouteEventItemCompact;
+  }
+});
 Object.defineProperty(exports, "RouteEventsModalWithTabs", {
   enumerable: true,
   get: function () {
@@ -87,13 +99,15 @@ Object.defineProperty(exports, "useRouteSitemap", {
     return _useRouteSitemap.useRouteSitemap;
   }
 });
-var _RouteEventsModalWithTabs = require("./components/RouteEventsModalWithTabs");
 var _preset = require("./preset");
+var _RouteEventsModalWithTabs = require("./components/RouteEventsModalWithTabs");
 var _RouteTracker = require("./RouteTracker");
 var _RoutesSitemap = require("./components/RoutesSitemap");
 var _NavigationStack = require("./components/NavigationStack");
-var _RouteObserver = require("./RouteObserver");
+var _RouteEventItemCompact = require("./components/RouteEventItemCompact");
+var _RouteEventExpandedContent = require("./components/RouteEventExpandedContent");
 var _useRouteObserver = require("./useRouteObserver");
-var _RouteParser = require("./RouteParser");
 var _useRouteSitemap = require("./useRouteSitemap");
-var _useNavigationStack = require("./useNavigationStack");
+var _useNavigationStack = require("./useNavigationStack");
+var _RouteParser = require("./RouteParser");
+var _RouteObserver = require("./RouteObserver");

package/lib/module/components/RouteEventDetailContent.js

@@ -2,7 +2,7 @@
 
 import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
 import { useEffect, useState, useCallback, useRef } from "react";
-import { formatRelativeTime, devToolsStorageKeys, ChevronLeft, ChevronRight, AlertCircle, Navigation as NavigationIcon, GitBranch, safeGetItem, safeSetItem, buoyColors } from "@buoy-gg/shared-ui";
+import { formatRelativeTime, devToolsStorageKeys, ChevronLeft, ChevronRight, AlertCircle, Navigation as NavigationIcon, GitBranch, persistentStorage, buoyColors } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function RouteEventDetailContent({
@@ -23,7 +23,7 @@ export function RouteEventDetailContent({
     const loadPreferences = async () => {
       try {
         // Load detail view preference (current/diff)
-        const savedDetailView = await safeGetItem(devToolsStorageKeys.routeEvents.detailView());
+        const savedDetailView = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.detailView());
         if (savedDetailView === "current" || savedDetailView === "diff") {
           setInternalActiveView(savedDetailView);
         }
@@ -39,7 +39,7 @@ export function RouteEventDetailContent({
   const handleViewChange = useCallback(async view => {
     setInternalActiveView(view);
     try {
-      await safeSetItem(devToolsStorageKeys.routeEvents.detailView(), view);
+      await persistentStorage.setItem(devToolsStorageKeys.routeEvents.detailView(), view);
     } catch (error) {
       // Failed to save detail view preference
     }

package/lib/module/components/RouteEventItemCompact.js

@@ -3,7 +3,7 @@
 /**
  * RouteEventItemCompact - Compact list item for route events
  *
- * Uses CompactRow pattern matching network/storage components
+ * Uses CompactRow pattern matching network/storage/redux components
  */
 
 import { useMemo } from "react";
@@ -49,16 +49,13 @@ function getRouteTypeColor(routeType) {
   switch (routeType) {
     case "home":
       return buoyColors.success;
-    // Teal
     case "dynamic":
       return buoyColors.primary;
-    // Teal
     case "with-params":
       return buoyColors.warning;
-    // Orange
     default:
-      return buoyColors.border;
-    // Gray
+      return buoyColors.textSecondary;
+    // More visible than border color
   }
 }
 
@@ -76,15 +73,42 @@ function getStatusLabel(routeType) {
   }
 }
 
-// Get secondary text (param count + route type)
-function getSecondaryText(event, routeType) {
+// Format duration in human-readable format
+function formatDuration(ms) {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.floor(ms % 60000 / 1000);
+  return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+}
+
+// Get status sublabel (time on previous route + depth info)
+function getStatusSublabel(event) {
+  const parts = [];
+
+  // Show time spent on previous route if available
+  if (event.timeSincePrevious !== undefined && event.timeSincePrevious > 0) {
+    parts.push(formatDuration(event.timeSincePrevious));
+  }
+
+  // Show segment depth (e.g., "depth 2" for /users/profile)
+  const depth = event.segments?.length || 0;
+  if (depth > 0) {
+    parts.push(`depth ${depth}`);
+  }
+  return parts.join(" · ") || "root";
+}
+
+// Get badge text - only show when there's additional info beyond the status label
+function getBadgeText(event) {
   const hasParams = event.params && Object.keys(event.params).length > 0;
-  if (!hasParams) {
-    return undefined;
+  if (hasParams) {
+    const paramCount = Object.keys(event.params).length;
+    return `${paramCount} PARAM${paramCount !== 1 ? "S" : ""}`;
   }
-  const paramCount = Object.keys(event.params).length;
-  const paramText = `${paramCount} param${paramCount !== 1 ? 's' : ''}`;
-  return `${paramText} • ${getStatusLabel(routeType)}`;
+
+  // Don't show badge text - route type is already shown in status label
+  return undefined;
 }
 export function RouteEventItemCompact({
   event,
@@ -97,7 +121,8 @@ export function RouteEventItemCompact({
   const routeTemplate = useMemo(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
   const statusColor = useMemo(() => getRouteTypeColor(routeType), [routeType]);
   const statusLabel = useMemo(() => getStatusLabel(routeType), [routeType]);
-  const secondaryText = useMemo(() => getSecondaryText(event, routeType), [event, routeType]);
+  const statusSublabel = useMemo(() => getStatusSublabel(event), [event]);
+  const badgeText = useMemo(() => getBadgeText(event), [event]);
   const timeLabel = useMemo(() => formatRelativeTime(new Date(event.timestamp)), [event.timestamp]);
   const expandedContent = useMemo(() => {
     if (!isExpanded) return undefined;
@@ -107,18 +132,17 @@ export function RouteEventItemCompact({
       routeTemplate: routeTemplate
     });
   }, [isExpanded, event, visitNumber, routeTemplate]);
+
+  // Custom badge shows Go button (and badge text if present) when onNavigate is provided
   const customBadge = useMemo(() => {
-    if (!onNavigate) {
-      return /*#__PURE__*/_jsx(Text, {
-        style: styles.timeText,
-        children: timeLabel
-      });
-    }
+    if (!onNavigate) return undefined;
     return /*#__PURE__*/_jsxs(View, {
       style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.timeText,
-        children: timeLabel
+      children: [badgeText && /*#__PURE__*/_jsx(Text, {
+        style: [styles.badgeText, {
+          color: statusColor
+        }],
+        children: badgeText
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.goButton,
         onPress: e => {
@@ -131,13 +155,18 @@ export function RouteEventItemCompact({
         })
       })]
     });
-  }, [timeLabel, onNavigate, event.pathname]);
+  }, [onNavigate, event.pathname, badgeText, statusColor]);
   return /*#__PURE__*/_jsx(CompactRow, {
     statusDotColor: statusColor,
     statusLabel: statusLabel,
-    primaryText: event.pathname,
-    secondaryText: secondaryText,
+    statusSublabel: statusSublabel,
+    primaryText: event.pathname
+    // Use badgeText when no customBadge, otherwise badge is inside customBadge
+    ,
+    badgeText: onNavigate ? undefined : badgeText,
+    badgeColor: statusColor,
     customBadge: customBadge,
+    bottomRightText: timeLabel,
     showChevron: true,
     expandedContent: expandedContent,
     isExpanded: isExpanded,
@@ -151,9 +180,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 6
   },
-  timeText: {
-    fontSize: 10,
-    color: buoyColors.textMuted,
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
     fontFamily: "monospace"
   },
   goButton: {

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -3,7 +3,7 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, Alert } from "react-native";
 import { useRouter } from "expo-router";
-import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Pause, Play, Trash2, Filter, SearchBar, safeGetItem, safeSetItem, ToolbarCopyButton, Lock, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Navigation, Pause, Play, Trash2, Filter, SearchBar, persistentStorage, ToolbarCopyButton, Lock, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 
 // Free tier limit for route events
@@ -66,7 +66,7 @@ export function RouteEventsModalWithTabs({
     if (!visible || hasLoadedTabState.current) return;
     const loadTabState = async () => {
       try {
-        const storedTab = await safeGetItem(devToolsStorageKeys.routeEvents.activeTab());
+        const storedTab = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.activeTab());
         if (storedTab && (storedTab === "routes" || storedTab === "events")) {
           setActiveTab(storedTab);
         }
@@ -83,7 +83,7 @@ export function RouteEventsModalWithTabs({
     if (!visible || hasLoadedMonitoringState.current) return;
     const loadMonitoringState = async () => {
       try {
-        const storedMonitoring = await safeGetItem(devToolsStorageKeys.routeEvents.isMonitoring());
+        const storedMonitoring = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
           setIsListening(shouldMonitor);
@@ -101,7 +101,7 @@ export function RouteEventsModalWithTabs({
     if (!hasLoadedTabState.current) return;
     const saveTabState = async () => {
       try {
-        await safeSetItem(devToolsStorageKeys.routeEvents.activeTab(), activeTab);
+        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.activeTab(), activeTab);
       } catch (error) {
         // Failed to save tab state
       }
@@ -114,7 +114,7 @@ export function RouteEventsModalWithTabs({
     if (!hasLoadedMonitoringState.current) return;
     const saveMonitoringState = async () => {
       try {
-        await safeSetItem(devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
+        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.isMonitoring(), isListening.toString());
       } catch (error) {
         // Failed to save monitoring state
       }
@@ -127,7 +127,7 @@ export function RouteEventsModalWithTabs({
     if (!visible || hasLoadedFilters.current) return;
     const loadFilters = async () => {
       try {
-        const storedFilters = await safeGetItem(devToolsStorageKeys.routeEvents.eventFilters());
+        const storedFilters = await persistentStorage.getItem(devToolsStorageKeys.routeEvents.eventFilters());
         if (storedFilters) {
           const filters = JSON.parse(storedFilters);
           setIgnoredPatterns(new Set(filters));
@@ -146,7 +146,7 @@ export function RouteEventsModalWithTabs({
     const saveFilters = async () => {
       try {
         const filters = Array.from(ignoredPatterns);
-        await safeSetItem(devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
+        await persistentStorage.setItem(devToolsStorageKeys.routeEvents.eventFilters(), JSON.stringify(filters));
       } catch (error) {
         // Failed to save filters
       }

package/lib/module/index.js

@@ -1,23 +1,54 @@
 "use strict";
 
-// Export route events modal (primary export - everything you need!)
-export { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs";
-// Export preset configuration (easiest way to add to FloatingDevTools!)
+/**
+ * @buoy-gg/route-events
+ *
+ * Route tracking and navigation DevTools for React Native.
+ * Supports React Navigation and Expo Router.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ */
+
+// =============================================================================
+// PRESET (Primary entry point for users)
+// =============================================================================
 export { routeEventsToolPreset, createRouteEventsTool } from "./preset";
 
-// Export RouteTracker component - place inside your navigation tree for route tracking
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+export { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs";
+// =============================================================================
+// ROUTE TRACKER (Required - place inside your navigation tree)
+// =============================================================================
 export { RouteTracker } from "./RouteTracker";
 
-// Export individual components for advanced usage
+// =============================================================================
+// COMPONENTS (For custom UI implementations)
+// =============================================================================
 export { RoutesSitemap } from "./components/RoutesSitemap";
 export { NavigationStack } from "./components/NavigationStack";
-// Export advanced/optional utilities
-// Note: Most users won't need these - the modal handles everything automatically
-export { RouteObserver, routeObserver } from "./RouteObserver";
+export { RouteEventItemCompact } from "./components/RouteEventItemCompact";
+export { RouteEventExpandedContent } from "./components/RouteEventExpandedContent";
+// =============================================================================
+// HOOKS (For consuming route data)
+// =============================================================================
 export { useRouteObserver } from "./useRouteObserver";
-// Export route parser utilities for advanced use cases
-export { RouteParser } from "./RouteParser";
-// Export route sitemap hooks for advanced use cases
 export { useRouteSitemap, useRoute, useParentRoutes } from "./useRouteSitemap";
-// Export navigation stack utilities for advanced use cases
-export { useNavigationStack } from "./useNavigationStack";
+export { useNavigationStack } from "./useNavigationStack";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+// =============================================================================
+// UTILITIES (For advanced use cases)
+// =============================================================================
+export { RouteParser } from "./RouteParser";
+export { RouteObserver } from "./RouteObserver";
+
+// =============================================================================
+// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
+// =============================================================================
+/** @internal - Singleton instance for cross-package communication */
+export { routeObserver } from "./RouteObserver";

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

@@ -1 +1 @@
-{"version":3,"file":"RouteEventDetailContent.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventDetailContent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAezD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,4BAA4B;IACpC,YAAY,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,kBAAsB,EACtB,kBAA6B,EAC7B,qBAA6B,GAC9B,EAAE,4BAA4B,+BAwT9B;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EACZ,kBAAsB,EACtB,kBAA6B,GAC9B,EAAE;IACD,YAAY,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,sCA2EA"}
+{"version":3,"file":"RouteEventDetailContent.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventDetailContent.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAczD,UAAU,iBAAiB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED,UAAU,4BAA4B;IACpC,YAAY,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,uBAAuB,CAAC,EACtC,YAAY,EACZ,kBAAsB,EACtB,kBAA6B,EAC7B,qBAA6B,GAC9B,EAAE,4BAA4B,+BAwT9B;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,YAAY,EACZ,kBAAsB,EACtB,kBAA6B,GAC9B,EAAE;IACD,YAAY,EAAE,iBAAiB,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,sCA2EA"}

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

@@ -1,7 +1,7 @@
 /**
  * RouteEventItemCompact - Compact list item for route events
  *
- * Uses CompactRow pattern matching network/storage components
+ * Uses CompactRow pattern matching network/storage/redux components
  */
 import type { RouteChangeEvent } from "../RouteObserver";
 export interface RouteEventItemCompactProps {

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;AAmFD,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,WAAW,EACX,UAAU,EACV,OAAO,EACP,UAAU,GACX,EAAE,0BAA0B,+BAyD5B"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AAoCA,OAAO,EACL,aAAa,IAAI,oBAAoB,EAEtC,MAAM,kBAAkB,CAAC;AAU1B,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,oBAAoB,CAAC;CAC7C;AAID,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,aAAoC,GACrC,EAAE,6BAA6B,sCA4hB/B"}
+{"version":3,"file":"RouteEventsModalWithTabs.d.ts","sourceRoot":"","sources":["../../../src/components/RouteEventsModalWithTabs.tsx"],"names":[],"mappings":"AAmCA,OAAO,EACL,aAAa,IAAI,oBAAoB,EAEtC,MAAM,kBAAkB,CAAC;AAU1B,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,oBAAoB,CAAC;CAC7C;AAID,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,EACnC,aAAoC,GACrC,EAAE,6BAA6B,sCA4hB/B"}

package/lib/typescript/index.d.ts

@@ -1,18 +1,32 @@
+/**
+ * @buoy-gg/route-events
+ *
+ * Route tracking and navigation DevTools for React Native.
+ * Supports React Navigation and Expo Router.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ */
+export { routeEventsToolPreset, createRouteEventsTool } from "./preset";
 export { RouteEventsModalWithTabs } from "./components/RouteEventsModalWithTabs";
 export type { RouteEventsModalWithTabsProps } from "./components/RouteEventsModalWithTabs";
-export { routeEventsToolPreset, createRouteEventsTool } from "./preset";
 export { RouteTracker } from "./RouteTracker";
 export { RoutesSitemap } from "./components/RoutesSitemap";
 export type { RoutesSitemapProps } from "./components/RoutesSitemap";
 export { NavigationStack } from "./components/NavigationStack";
 export type { NavigationStackProps } from "./components/NavigationStack";
-export { RouteObserver, routeObserver } from "./RouteObserver";
+export { RouteEventItemCompact } from "./components/RouteEventItemCompact";
+export type { RouteEventItemCompactProps } from "./components/RouteEventItemCompact";
+export { RouteEventExpandedContent } from "./components/RouteEventExpandedContent";
+export type { RouteEventExpandedContentProps } from "./components/RouteEventExpandedContent";
 export { useRouteObserver } from "./useRouteObserver";
-export type { RouteChangeEvent } from "./RouteObserver";
-export { RouteParser } from "./RouteParser";
-export type { RouteInfo, RouteType, RouteGroup, RouteStats, } from "./RouteParser";
 export { useRouteSitemap, useRoute, useParentRoutes } from "./useRouteSitemap";
 export type { UseRouteSitemapOptions, UseRouteSitemapResult, } from "./useRouteSitemap";
 export { useNavigationStack } from "./useNavigationStack";
 export type { UseNavigationStackResult, StackDisplayItem, } from "./useNavigationStack";
+export type { RouteChangeEvent } from "./RouteObserver";
+export type { RouteInfo, RouteType, RouteGroup, RouteStats, } from "./RouteParser";
+export { RouteParser } from "./RouteParser";
+export { RouteObserver } from "./RouteObserver";
+/** @internal - Singleton instance for cross-package communication */
+export { routeObserver } from "./RouteObserver";
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAG3F,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAGxE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAIzE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAKxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,YAAY,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAK3F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,YAAY,EAAE,8BAA8B,EAAE,MAAM,wCAAwC,CAAC;AAK7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/E,YAAY,EACV,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EACV,wBAAwB,EACxB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAK9B,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACxD,YAAY,EACV,SAAS,EACT,SAAS,EACT,UAAU,EACV,UAAU,GACX,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,qEAAqE;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/package.json

@@ -1,19 +1,33 @@
 {
   "name": "@buoy-gg/route-events",
-  "version": "1.7.8",
+  "version": "2.1.2",
   "description": "route-events package",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "lib/module/index.js",
   "source": "src/index.tsx",
+  "exports": {
+    ".": {
+      "react-native": "./lib/module/index.js",
+      "import": {
+        "default": "./lib/module/index.js",
+        "types": "./lib/typescript/index.d.ts"
+      },
+      "require": {
+        "default": "./lib/commonjs/index.js",
+        "types": "./lib/typescript/index.d.ts"
+      }
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "1.7.8",
-    "@buoy-gg/shared-ui": "1.7.8"
+    "@buoy-gg/floating-tools-core": "2.1.2",
+    "@buoy-gg/shared-ui": "2.1.2"
   },
   "peerDependencies": {
     "@buoy-gg/license": "*",
@@ -35,7 +49,7 @@
     "@types/react-native": "^0.73.0",
     "expo-router": "~5.0.7",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "1.7.8"
+    "@buoy-gg/license": "2.1.2"
   },
   "react-native-builder-bob": {
     "source": "src",