@buoy-gg/route-events 7.0.41 → 7.0.43

package/lib/module/components/RouteEventsModalWithTabs.js

@@ -1,731 +1 @@
-"use strict";
-
-import { useState, useCallback, useEffect, useRef, useMemo } from "react";
-import { Text, View, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import { getCommonActions, useSafeNavigationContainerRef } from "../utils/safeReactNavigation";
-
-// 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();
-import { useSafeRouter, isExpoRouterAvailable, windowDragProps, ToolEmptyState, resolveListEmptyState, usePersistedState, monoFont } from "@buoy-gg/shared-ui";
-import { JsModal, ModalHeader, TabSelector, formatRelativeTime, devToolsStorageKeys, Trash2, Filter, SearchBar, 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
-
-import { useRouteEvents } from "../hooks/useRouteEvents";
-import { routeEventStore } from "../stores/routeEventStore";
-import { RouteEventDetail } from "./RouteEventDetail";
-import { RouteFilterViewV2 } from "./RouteFilterViewV2";
-import { RoutesSitemap } from "./RoutesSitemap";
-import { ReactNavigationRoutes } from "./ReactNavigationRoutes";
-import { NavigationStack } from "./NavigationStack";
-import { RouteEventsTimeline } from "./RouteEventsTimeline";
-import { splitRouteHref } from "../utils/routeTemplate";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/** Persistence recipes: the tab is stored as its bare name, the flag as "true"/"false". */
-const TAB_PERSISTENCE = {
-  // Every tab the selector offers, including "stack": the save side has
-  // always written it, so leaving it off this list meant the Stack tab
-  // was persisted and then silently discarded on the next launch.
-  parse: raw => raw === "routes" || raw === "events" || raw === "stack" ? raw : undefined,
-  serialize: tab => tab
-};
-const BOOLEAN_PERSISTENCE = {
-  parse: raw => raw === "true",
-  serialize: value => value.toString()
-};
-const STRING_SET_PERSISTENCE = {
-  parse: raw => new Set(JSON.parse(raw)),
-  serialize: set => JSON.stringify(Array.from(set))
-};
-
-/**
- * Find the path from root navigation state to a screen by name.
- * Returns array of route names from root to the target, or null if not found.
- */
-function findScreenPath(state, screenName) {
-  if (!state || !state.routes) return null;
-  for (const route of state.routes) {
-    if (route.name === screenName) {
-      return [route.name];
-    }
-    if (route.state) {
-      const nested = findScreenPath(route.state, screenName);
-      if (nested) {
-        return [route.name, ...nested];
-      }
-    }
-  }
-  return null;
-}
-
-/**
- * Build a nested CommonActions.navigate() from a path of screen names.
- * e.g. ["MainApp", "Settings", "SettingScreen"] becomes:
- * navigate("MainApp", { screen: "Settings", params: { screen: "SettingScreen" } })
- */
-function buildNestedNavigateAction(path, leafParams) {
-  if (path.length === 0) return null;
-  const leaf = leafParams && Object.keys(leafParams).length > 0 ? leafParams : undefined;
-  if (path.length === 1) {
-    return CommonActions.navigate(leaf ? {
-      name: path[0],
-      params: leaf
-    } : {
-      name: path[0]
-    });
-  }
-
-  // Build nested params from the end
-  let params = leaf ? {
-    screen: path[path.length - 1],
-    params: leaf
-  } : {
-    screen: path[path.length - 1]
-  };
-  for (let i = path.length - 2; i >= 1; i--) {
-    params = {
-      screen: path[i],
-      params
-    };
-  }
-  return CommonActions.navigate({
-    name: path[0],
-    params
-  });
-}
-export function RouteEventsModalWithTabs({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  inline = false,
-  remote
-}) {
-  const router = useSafeRouter();
-  const containerRef = useSafeNavigationContainerRef();
-  const hasExpoRouter = isExpoRouterAvailable();
-  const [activeTab, setActiveTab] = usePersistedState(devToolsStorageKeys.routeEvents.activeTab(), "events", TAB_PERSISTENCE);
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-  // Serialized stack reported up by NavigationStack so the copy button can live
-  // in the shared navbar.
-  const [stackCopyValue, setStackCopyValue] = useState("");
-
-  // Check Pro status internally
-  const isPro = useIsPro();
-  const eventLimit = useLimit("routeEvents.entries");
-
-  // Auto-close upgrade modal when user becomes Pro
-  useEffect(() => {
-    if (showUpgradeModal && isPro) {
-      setShowUpgradeModal(false);
-    }
-  }, [showUpgradeModal, isPro]);
-
-  // NOTE: Route tracking requires <RouteTracker /> to be placed inside the navigation tree.
-  // The useRouteObserver hook uses expo-router hooks that only work inside Stack/Tabs/Slot.
-  // See the RouteTracker component export for easy setup.
-
-  // Local state to control subscription (true = subscribed, false = unsubscribed)
-  const [isListeningEnabled, setIsListeningEnabled] = usePersistedState(devToolsStorageKeys.routeEvents.isMonitoring(), true, BOOLEAN_PERSISTENCE);
-
-  // Event Listener state - using centralized store via hook
-  // Pass enabled option to control subscription
-  const {
-    events,
-    clearEvents: clearRouteEvents,
-    isListening: isStoreListening
-  } = useRouteEvents({
-    enabled: isListeningEnabled
-  });
-
-  // isListening = enabled and store is listening
-  const isListening = isListeningEnabled && isStoreListening;
-
-  // The switch above only governs THIS component's subscription; the store
-  // also holds one of its own from boot (routeEventStore.setBootCapture), so
-  // pausing here has to release that too or capture would never stop.
-  useEffect(() => {
-    routeEventStore.setBootCapture(isListeningEnabled);
-  }, [isListeningEnabled]);
-  const [showFilters, setShowFilters] = useState(false);
-  // Selected event drives the full-screen detail view (parity with the Events
-  // tool). null = list view. visitNumber feeds the "Visited N times" section.
-  const [selectedEvent, setSelectedEvent] = useState(null);
-  const [selectedVisitNumber, setSelectedVisitNumber] = useState(1);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [ignoredPatterns, setIgnoredPatterns] = usePersistedState(devToolsStorageKeys.routeEvents.eventFilters(), new Set(["/_sitemap", "/api", "/__dev"]), STRING_SET_PERSISTENCE);
-  const lastEventRef = useRef(null);
-  const handleModeChange = useCallback(_mode => {
-    // Mode changes handled by JsModal
-  }, []);
-  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) {
-        // On RN CLI, pathname is /<ScreenName> — extract the screen name.
-        // A recorded event's href may carry its params as a query string.
-        const {
-          pathname: path,
-          params: routeParams
-        } = splitRouteHref(pathname);
-        const screenName = path.startsWith("/") ? path.slice(1) : path;
-        const hasParams = Object.keys(routeParams).length > 0;
-
-        // Walk the state tree to find the nesting path to this screen
-        const rootState = containerRef.getRootState?.();
-        if (rootState) {
-          const path = findScreenPath(rootState, screenName);
-          if (path) {
-            const action = buildNestedNavigateAction(path, routeParams);
-            if (action) {
-              containerRef.dispatch(action);
-              return;
-            }
-          }
-        }
-
-        // Fallback: try direct navigation (works for top-level screens)
-        containerRef.dispatch(CommonActions.navigate(hasParams ? {
-          name: screenName,
-          params: routeParams
-        } : {
-          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, remote, isPro]);
-
-  // Event listener is now managed by useRouteEvents hook
-
-  const handleToggleListening = useCallback(() => {
-    // Toggle subscription - this actually subscribes/unsubscribes from the store
-    setIsListeningEnabled(prev => !prev);
-  }, []);
-  const handleClearEvents = useCallback(() => {
-    if (events.length === 0) return;
-
-    // Gate clear behind Pro
-    if (!isPro) {
-      setShowUpgradeModal(true);
-      return;
-    }
-    clearRouteEvents();
-  }, [events.length, isPro, clearRouteEvents]);
-  const handleTogglePattern = useCallback(pattern => {
-    setIgnoredPatterns(prev => {
-      const next = new Set(prev);
-      if (next.has(pattern)) {
-        next.delete(pattern);
-      } else {
-        next.add(pattern);
-      }
-      return next;
-    });
-  }, []);
-  const handleAddPattern = useCallback(pattern => {
-    setIgnoredPatterns(prev => new Set([...prev, pattern]));
-  }, []);
-  const handleToggleFilters = useCallback(() => {
-    setShowFilters(!showFilters);
-  }, [showFilters]);
-  const handleSelectEvent = useCallback((event, visitNumber) => {
-    setSelectedEvent(event);
-    setSelectedVisitNumber(visitNumber);
-  }, []);
-  const handleBackFromDetail = useCallback(() => {
-    setSelectedEvent(null);
-  }, []);
-  const handleTabChange = useCallback(tab => {
-    // Leaving the detail view whenever the tab changes.
-    setSelectedEvent(null);
-    setActiveTab(tab);
-  }, []);
-
-  // Get all unique pathnames from events
-  const allEventPathnames = useMemo(() => {
-    const pathnames = new Set();
-    events.forEach(event => {
-      if (event.pathname) {
-        pathnames.add(event.pathname);
-      }
-    });
-    return Array.from(pathnames).sort();
-  }, [events]);
-
-  // Filter events based on ignored patterns and search query
-  const filteredEvents = useMemo(() => {
-    return events.filter(event => {
-      if (!event.pathname) return false;
-
-      // Filter out pathnames that match ignored patterns
-      const shouldIgnore = Array.from(ignoredPatterns).some(pattern => event.pathname.includes(pattern));
-      if (shouldIgnore) return false;
-
-      // Filter by search query (search in pathname and param values)
-      if (searchQuery.trim()) {
-        const query = searchQuery.toLowerCase();
-        const pathnameMatch = event.pathname.toLowerCase().includes(query);
-        const paramsMatch = Object.entries(event.params || {}).some(([key, value]) => {
-          const valueStr = Array.isArray(value) ? value.join(" ") : value;
-          return key.toLowerCase().includes(query) || valueStr.toLowerCase().includes(query);
-        });
-        return pathnameMatch || paramsMatch;
-      }
-      return true;
-    });
-  }, [events, ignoredPatterns, searchQuery]);
-
-  // Pro is Infinity here, so slice() returns everything and the locked count
-  // floors at 0 — no tier branching needed at the call site.
-  const visibleEvents = useMemo(() => filteredEvents.slice(0, eventLimit), [filteredEvents, eventLimit]);
-  const lockedEventCount = useMemo(() => Math.max(0, filteredEvents.length - eventLimit), [filteredEvents.length, eventLimit]);
-
-  /**
-   * "This was the Nth time you were here", per event.
-   *
-   * Keyed by the EVENT, not by its index. Indices belong to the unfiltered
-   * list, and every consumer below reads them off the FILTERED one — so with
-   * a search typed, or any ignore pattern active (there are three by
-   * default), each row was handed the visit count of whatever event sat at
-   * that position in the full history. Rows read plausibly and were simply
-   * about a different navigation.
-   */
-  const visitCounts = useMemo(() => {
-    const counts = new Map();
-    const byEvent = new Map();
-
-    // Oldest to newest, so the first time you visited a route is visit 1.
-    for (let i = events.length - 1; i >= 0; i--) {
-      const event = events[i];
-      const visitNumber = (counts.get(event.pathname) || 0) + 1;
-      counts.set(event.pathname, visitNumber);
-      byEvent.set(event, visitNumber);
-    }
-    return byEvent;
-  }, [events]);
-
-  // Prepare copy data - memoized so it only rebuilds when dependencies change
-  const copyAllEventsData = useMemo(() => {
-    return {
-      summary: {
-        total: events.length,
-        filtered: filteredEvents.length,
-        listening: isListening,
-        ignoredPatterns: Array.from(ignoredPatterns),
-        timestamp: new Date().toISOString()
-      },
-      events: filteredEvents.map((event, index) => ({
-        index,
-        visitNumber: visitCounts.get(event) || 1,
-        pathname: event.pathname,
-        timestamp: event.timestamp,
-        timestampRelative: formatRelativeTime(event.timestamp),
-        params: event.params,
-        segments: event.segments,
-        previousPathname: event.previousPathname,
-        timeSincePrevious: event.timeSincePrevious
-      }))
-    };
-  }, [events.length, filteredEvents, isListening, ignoredPatterns, visitCounts]);
-  if (!visible) return null;
-  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.routeEvents.modal();
-
-  // No footer needed since we're showing a timeline
-  const footerNode = null;
-  const renderContent = () => {
-    // Detail view takes priority — a selected event replaces the list.
-    if (selectedEvent) {
-      return /*#__PURE__*/_jsx(RouteEventDetail, {
-        event: selectedEvent,
-        visitNumber: selectedVisitNumber,
-        onNavigate: handleNavigate
-      });
-    }
-    if (activeTab === "routes") {
-      // A remote host supplies the tree, so its presence — not this process's
-      // router — decides which view can render it.
-      return hasExpoRouter || remote?.sitemap ? /*#__PURE__*/_jsx(RoutesSitemap, {
-        style: styles.contentWrapper,
-        injectedRoutes: remote?.sitemap?.routes,
-        injectedSource: remote?.sitemap?.source ?? null,
-        injectedLastUpdatedAt: remote?.sitemap?.lastUpdatedAt ?? null,
-        onNavigateRoute: remote ? handleRemoteNavigateRoute : undefined
-      }) : /*#__PURE__*/_jsx(ReactNavigationRoutes, {
-        style: styles.contentWrapper
-      });
-    }
-    if (activeTab === "stack") {
-      return /*#__PURE__*/_jsx(NavigationStack, {
-        style: styles.contentWrapper,
-        injectedStack: remote ? remote.stack ?? [] : undefined,
-        onAction: remote?.onStackAction,
-        onCopyValueChange: setStackCopyValue
-      });
-    }
-
-    // Events tab content
-    if (showFilters) {
-      return /*#__PURE__*/_jsx(RouteFilterViewV2, {
-        ignoredPatterns: ignoredPatterns,
-        onTogglePattern: handleTogglePattern,
-        onAddPattern: handleAddPattern,
-        availablePathnames: allEventPathnames
-      });
-    }
-
-    // Show search bar if there are events (even if filtered to 0)
-    const showSearchBar = events.length > 0;
-    if (filteredEvents.length === 0) {
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.contentWrapper,
-        testID: "buoy-routes-events",
-        children: [showSearchBar && /*#__PURE__*/_jsx(View, {
-          style: styles.searchContainer,
-          testID: "buoy-routes-search-field",
-          children: /*#__PURE__*/_jsx(SearchBar, {
-            value: searchQuery,
-            onChange: setSearchQuery,
-            placeholder: "Search pathname or params...",
-            testID: "buoy-routes-search"
-          })
-        }), /*#__PURE__*/_jsx(ToolEmptyState, {
-          testID: "buoy-routes-empty",
-          ...resolveListEmptyState({
-            subject: "route events",
-            search: searchQuery,
-            total: events.length,
-            capturing: isListening,
-            waiting: {
-              otto: "walking",
-              title: "No route events yet",
-              message: "Navigation events will appear here"
-            },
-            paused: {
-              title: "Event listener is paused",
-              message: "Press play to start monitoring"
-            }
-          })
-        })]
-      });
-    }
-
-    // Show chronological timeline of events
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.contentWrapper,
-      testID: "buoy-routes-events",
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.searchContainer,
-        testID: "buoy-routes-search-field",
-        children: /*#__PURE__*/_jsx(SearchBar, {
-          value: searchQuery,
-          onChange: setSearchQuery,
-          placeholder: "Search pathname or params...",
-          testID: "buoy-routes-search"
-        })
-      }), lockedEventCount > 0 && /*#__PURE__*/_jsxs(View, {
-        style: styles.lockedEventsBanner,
-        testID: "buoy-routes-locked-banner",
-        children: [/*#__PURE__*/_jsx(Lock, {
-          size: 14,
-          color: night.color.warning
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.lockedEventsBannerText,
-          testID: "buoy-routes-locked-banner-text",
-          children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.lockedEventsBannerSubtext,
-          children: "Upgrade to Pro for full history"
-        })]
-      }), /*#__PURE__*/_jsx(RouteEventsTimeline, {
-        events: visibleEvents,
-        visitCounts: visitCounts,
-        onNavigate: handleNavigate,
-        onSelectEvent: handleSelectEvent
-      })]
-    });
-  };
-  const headerContent = selectedEvent ? /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: handleBackFromDetail
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: selectedEvent.pathname,
-      testID: "buoy-routes-detail-title"
-    }), /*#__PURE__*/_jsx(ModalHeader.Actions, {
-      children: /*#__PURE__*/_jsx(ToolbarCopyButton, {
-        testID: "buoy-routes-detail-copy",
-        value: {
-          pathname: selectedEvent.pathname,
-          previousPathname: selectedEvent.previousPathname,
-          params: selectedEvent.params,
-          segments: selectedEvent.segments,
-          timestamp: selectedEvent.timestamp,
-          timestampISO: new Date(selectedEvent.timestamp).toISOString(),
-          timeSincePrevious: selectedEvent.timeSincePrevious,
-          visitNumber: selectedVisitNumber
-        },
-        buttonStyle: styles.iconButton
-      })
-    })]
-  }) : showFilters ? /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: () => setShowFilters(false)
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "Filters",
-      testID: "buoy-routes-filters-title"
-    })]
-  }) : /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/_jsx(TabSelector, {
-        tabs: [{
-          key: "routes",
-          label: hasExpoRouter ? "Routes" : "Screens"
-        }, {
-          key: "events",
-          label: `Events${events.length > 0 && activeTab !== "events" ? ` (${events.length})` : ""}`
-        }, {
-          key: "stack",
-          label: "Stack"
-        }],
-        activeTab: activeTab,
-        onTabChange: tab => handleTabChange(tab),
-        testIDPrefix: "buoy-routes-tab"
-      })
-    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-      children: [activeTab === "stack" && /*#__PURE__*/_jsx(ToolbarCopyButton, {
-        value: stackCopyValue,
-        buttonStyle: styles.iconButton,
-        testID: "buoy-routes-stack-copy"
-      }), activeTab === "events" && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
-          value: copyAllEventsData,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-routes-copy"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: handleToggleFilters,
-          style: [styles.iconButton, ignoredPatterns.size > 0 && styles.activeFilterButton],
-          testID: "buoy-routes-filters",
-          accessibilityRole: "button",
-          accessibilityLabel: ignoredPatterns.size > 0 ? `Route filters, ${ignoredPatterns.size} active` : "Route filters",
-          children: /*#__PURE__*/_jsx(Filter, {
-            size: 14,
-            color: ignoredPatterns.size > 0 ? night.color.accent : night.color.textSecondary
-          })
-        }), /*#__PURE__*/_jsx(PowerToggleButton, {
-          isEnabled: isListening,
-          onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle route event monitoring",
-          testID: "buoy-routes-power"
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: handleClearEvents,
-          style: styles.iconButton,
-          testID: "buoy-routes-clear",
-          accessibilityRole: "button",
-          accessibilityLabel: "Clear route events",
-          children: /*#__PURE__*/_jsx(Trash2, {
-            size: 14,
-            color: night.color.danger
-          })
-        })]
-      })]
-    })]
-  });
-
-  /**
-   * Pro gate for remote sitemap navigation. The Home shortcut stays free so a
-   * free user can always get the device back to a known screen; layouts and
-   * groups are not navigable at all.
-   */
-  const handleRemoteNavigateRoute = route => {
-    if (route.type === "layout" || route.type === "group") return;
-    const isHomeRoute = route.type === "index" || route.path === "/";
-    if (!isPro && !isHomeRoute) {
-      setShowUpgradeModal(true);
-      return;
-    }
-    remote?.onNavigateRoute?.(route);
-  };
-  const upgradeModal = /*#__PURE__*/_jsx(ProUpgradeModal, {
-    visible: showUpgradeModal,
-    onClose: () => setShowUpgradeModal(false),
-    featureName: "Route Event Management"
-  });
-
-  // The ONLY difference between the phone and the desktop dashboard is which
-  // shell the header, body and footer go in. Everything above this is shared.
-  if (inline) {
-    return /*#__PURE__*/_jsxs(TickProvider, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.inlineHeader,
-          ...windowDragProps,
-          children: headerContent
-        }), renderContent(), footerNode]
-      }), upgradeModal]
-    });
-  }
-  return /*#__PURE__*/_jsx(TickProvider, {
-    children: /*#__PURE__*/_jsxs(JsModal, {
-      visible: visible,
-      onClose: onClose,
-      onMinimize: onMinimize,
-      persistenceKey: persistenceKey,
-      header: {
-        showToggleButton: true,
-        customContent: headerContent
-      },
-      onModeChange: handleModeChange,
-      enablePersistence: true,
-      initialMode: "bottomSheet",
-      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,
-      children: [renderContent(), upgradeModal]
-    })
-  });
-}
-
-/**
- * The same routes tool as `RouteEventsModalWithTabs`, rendered INLINE for hosts
- * that place tools in a panel rather than a modal. Exists so there is exactly
- * one implementation — the desktop dashboard used to ship its own copy of this
- * component's header and tab router.
- */
-export function RoutesToolView(props = {}) {
-  return /*#__PURE__*/_jsx(RouteEventsModalWithTabs, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = StyleSheet.create({
-  inlineRoot: {
-    flex: 1,
-    minHeight: 0,
-    // 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,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: buoyColors.border,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  iconButton: {
-    padding: 6,
-    borderRadius: 6,
-    backgroundColor: night.color.buttonSurface
-  },
-  activeFilterButton: {
-    backgroundColor: night.color.accentSoft
-  },
-  emptyState: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32
-  },
-  emptyTitle: {
-    color: night.color.text,
-    fontSize: 16,
-    fontWeight: "600",
-    marginTop: 16,
-    marginBottom: 8,
-    fontFamily: monoFont,
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  emptySubtitle: {
-    color: night.color.textSecondary,
-    fontSize: 14,
-    textAlign: "center",
-    fontFamily: monoFont
-  },
-  contentWrapper: {
-    flex: 1
-  },
-  statsContainer: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: night.color.surface,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border
-  },
-  statsText: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    textAlign: "center"
-  },
-  statsWarning: {
-    color: night.color.warning,
-    fontWeight: "600"
-  },
-  searchContainer: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  lockedEventsBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    backgroundColor: night.color.warningSoft,
-    borderWidth: 1,
-    borderColor: night.color.warning + "30",
-    borderRadius: 8,
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    marginHorizontal: 16,
-    marginBottom: 8
-  },
-  lockedEventsBannerText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.warning,
-    fontFamily: monoFont
-  },
-  lockedEventsBannerSubtext: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    marginLeft: "auto"
-  }
-});
+"use strict";import{useState as T,useCallback as g,useEffect as oe,useRef as Ie,useMemo as N}from"react";import{Text as re,View as S,TouchableOpacity as ae,StyleSheet as Ae,Alert as se}from"react-native";import{getCommonActions as De,useSafeNavigationContainerRef as ze}from"../utils/safeReactNavigation";const U=De();import{useSafeRouter as Le,isExpoRouterAvailable as Me,windowDragProps as Fe,ToolEmptyState as We,resolveListEmptyState as je,usePersistedState as J,monoFont as W}from"@buoy-gg/shared-ui";import{JsModal as Ve,ModalHeader as m,TabSelector as He,formatRelativeTime as Oe,devToolsStorageKeys as B,Trash2 as _e,Filter as Ue,SearchBar as ie,ToolbarCopyButton as K,Lock as Je,ProUpgradeModal as Ke,PowerToggleButton as $e,buoyColors as Ge,night as s,TickProvider as le,useLimit as Qe}from"@buoy-gg/shared-ui";import{useIsPro as qe}from"@buoy-gg/license";import{useRouteEvents as Xe}from"../hooks/useRouteEvents";import{routeEventStore as Ye}from"../stores/routeEventStore";import{RouteEventDetail as Ze}from"./RouteEventDetail";import{RouteFilterViewV2 as et}from"./RouteFilterViewV2";import{RoutesSitemap as tt}from"./RoutesSitemap";import{ReactNavigationRoutes as nt}from"./ReactNavigationRoutes";import{NavigationStack as ot}from"./NavigationStack";import{RouteEventsTimeline as rt}from"./RouteEventsTimeline";import{splitRouteHref as at}from"../utils/routeTemplate";import{jsx as n,jsxs as u,Fragment as st}from"react/jsx-runtime";const it={parse:t=>t==="routes"||t==="events"||t==="stack"?t:void 0,serialize:t=>t};const lt={parse:t=>t==="true",serialize:t=>t.toString()};const ct={parse:t=>new Set(JSON.parse(t)),serialize:t=>JSON.stringify(Array.from(t))};function ce(t,f){if(!t||!t.routes)return null;for(const l of t.routes){if(l.name===f){return[l.name]}if(l.state){const v=ce(l.state,f);if(v){return[l.name,...v]}}}return null}function ut(t,f){if(t.length===0)return null;const l=f&&Object.keys(f).length>0?f:void 0;if(t.length===1){return U.navigate(l?{name:t[0],params:l}:{name:t[0]})}let v=l?{screen:t[t.length-1],params:l}:{screen:t[t.length-1]};for(let P=t.length-2;P>=1;P--){v={screen:t[P],params:v}}return U.navigate({name:t[0],params:v})}export function RouteEventsModalWithTabs({visible:t,onClose:f,onBack:l,onMinimize:v,enableSharedModalDimensions:P=false,inline:ue=false,remote:c}){const $=Le();const w=ze();const I=Me();const[E,de]=J(B.routeEvents.activeTab(),"events",it);const[j,x]=T(false);const[me,ge]=T("");const y=qe();const A=Qe("routeEvents.entries");oe(()=>{if(j&&y){x(false)}},[j,y]);const[D,pe]=J(B.routeEvents.isMonitoring(),true,lt);const{events:i,clearEvents:G,isListening:he}=Xe({enabled:D});const z=D&&he;oe(()=>{Ye.setBootCapture(D)},[D]);const[L,Q]=T(false);const[d,V]=T(null);const[q,fe]=T(1);const[C,X]=T("");const[p,Y]=J(B.routeEvents.eventFilters(),new Set(["/_sitemap","/api","/__dev"]),ct);const dt=Ie(null);const ve=g(e=>{},[]);const Z=g(e=>{try{if(c){if(!c.onNavigatePath)return;if(!y&&e!=="/"){x(true);return}c.onNavigatePath(e);return}if(I){$.push(e)}else if(w){const{pathname:o,params:r}=at(e);const h=o.startsWith("/")?o.slice(1):o;const R=Object.keys(r).length>0;const M=w.getRootState?.();if(M){const k=ce(M,h);if(k){const F=ut(k,r);if(F){w.dispatch(F);return}}}w.dispatch(U.navigate(R?{name:h,params:r}:{name:h}))}else{se.alert("Navigation Unavailable","No Expo Router or React Navigation container was found in this app.")}}catch(o){se.alert("Navigation Error",String(o))}},[$,w,I,c,y]);const be=g(()=>{pe(e=>!e)},[]);const ye=g(()=>{if(i.length===0)return;if(!y){x(true);return}G()},[i.length,y,G]);const Se=g(e=>{Y(o=>{const r=new Set(o);if(r.has(e)){r.delete(e)}else{r.add(e)}return r})},[]);const Ee=g(e=>{Y(o=>new Set([...o,e]))},[]);const Ce=g(()=>{Q(!L)},[L]);const Re=g((e,o)=>{V(e);fe(o)},[]);const ke=g(()=>{V(null)},[]);const Te=g(e=>{V(null);de(e)},[]);const Ne=N(()=>{const e=new Set;i.forEach(o=>{if(o.pathname){e.add(o.pathname)}});return Array.from(e).sort()},[i]);const b=N(()=>{return i.filter(e=>{if(!e.pathname)return false;const o=Array.from(p).some(r=>e.pathname.includes(r));if(o)return false;if(C.trim()){const r=C.toLowerCase();const h=e.pathname.toLowerCase().includes(r);const R=Object.entries(e.params||{}).some(([M,k])=>{const F=Array.isArray(k)?k.join(" "):k;return M.toLowerCase().includes(r)||F.toLowerCase().includes(r)});return h||R}return true})},[i,p,C]);const Pe=N(()=>b.slice(0,A),[b,A]);const H=N(()=>Math.max(0,b.length-A),[b.length,A]);const O=N(()=>{const e=new Map;const o=new Map;for(let r=i.length-1;r>=0;r--){const h=i[r];const R=(e.get(h.pathname)||0)+1;e.set(h.pathname,R);o.set(h,R)}return o},[i]);const we=N(()=>{return{summary:{total:i.length,filtered:b.length,listening:z,ignoredPatterns:Array.from(p),timestamp:new Date().toISOString()},events:b.map((e,o)=>({index:o,visitNumber:O.get(e)||1,pathname:e.pathname,timestamp:e.timestamp,timestampRelative:Oe(e.timestamp),params:e.params,segments:e.segments,previousPathname:e.previousPathname,timeSincePrevious:e.timeSincePrevious}))}},[i.length,b,z,p,O]);if(!t)return null;const xe=P?B.modal.root():B.routeEvents.modal();const _=null;const ee=()=>{if(d){return n(Ze,{event:d,visitNumber:q,onNavigate:Z})}if(E==="routes"){return I||c?.sitemap?n(tt,{style:a.contentWrapper,injectedRoutes:c?.sitemap?.routes,injectedSource:c?.sitemap?.source??null,injectedLastUpdatedAt:c?.sitemap?.lastUpdatedAt??null,onNavigateRoute:c?Be:void 0}):n(nt,{style:a.contentWrapper})}if(E==="stack"){return n(ot,{style:a.contentWrapper,injectedStack:c?c.stack??[]:void 0,onAction:c?.onStackAction,onCopyValueChange:ge})}if(L){return n(et,{ignoredPatterns:p,onTogglePattern:Se,onAddPattern:Ee,availablePathnames:Ne})}const e=i.length>0;if(b.length===0){return u(S,{style:a.contentWrapper,testID:"buoy-routes-events",children:[e&&n(S,{style:a.searchContainer,testID:"buoy-routes-search-field",children:n(ie,{value:C,onChange:X,placeholder:"Search pathname or params...",testID:"buoy-routes-search"})}),n(We,{testID:"buoy-routes-empty",...je({subject:"route events",search:C,total:i.length,capturing:z,waiting:{otto:"walking",title:"No route events yet",message:"Navigation events will appear here"},paused:{title:"Event listener is paused",message:"Press play to start monitoring"}})})]})}return u(S,{style:a.contentWrapper,testID:"buoy-routes-events",children:[n(S,{style:a.searchContainer,testID:"buoy-routes-search-field",children:n(ie,{value:C,onChange:X,placeholder:"Search pathname or params...",testID:"buoy-routes-search"})}),H>0&&u(S,{style:a.lockedEventsBanner,testID:"buoy-routes-locked-banner",children:[n(Je,{size:14,color:s.color.warning}),u(re,{style:a.lockedEventsBannerText,testID:"buoy-routes-locked-banner-text",children:[H," older ",H===1?"event":"events"," locked"]}),n(re,{style:a.lockedEventsBannerSubtext,children:"Upgrade to Pro for full history"})]}),n(rt,{events:Pe,visitCounts:O,onNavigate:Z,onSelectEvent:Re})]})};const te=d?u(m,{children:[n(m.Navigation,{onBack:ke}),n(m.Content,{title:d.pathname,testID:"buoy-routes-detail-title"}),n(m.Actions,{children:n(K,{testID:"buoy-routes-detail-copy",value:{pathname:d.pathname,previousPathname:d.previousPathname,params:d.params,segments:d.segments,timestamp:d.timestamp,timestampISO:new Date(d.timestamp).toISOString(),timeSincePrevious:d.timeSincePrevious,visitNumber:q},buttonStyle:a.iconButton})})]}):L?u(m,{children:[n(m.Navigation,{onBack:()=>Q(false)}),n(m.Content,{title:"Filters",testID:"buoy-routes-filters-title"})]}):u(m,{children:[l&&n(m.Navigation,{onBack:l}),n(m.Content,{title:"",noMargin:true,children:n(He,{tabs:[{key:"routes",label:I?"Routes":"Screens"},{key:"events",label:`Events${i.length>0&&E!=="events"?` (${i.length})`:""}`},{key:"stack",label:"Stack"}],activeTab:E,onTabChange:e=>Te(e),testIDPrefix:"buoy-routes-tab"})}),u(m.Actions,{children:[E==="stack"&&n(K,{value:me,buttonStyle:a.iconButton,testID:"buoy-routes-stack-copy"}),E==="events"&&u(st,{children:[n(K,{value:we,buttonStyle:a.iconButton,testID:"buoy-routes-copy"}),n(ae,{onPress:Ce,style:[a.iconButton,p.size>0&&a.activeFilterButton],testID:"buoy-routes-filters",accessibilityRole:"button",accessibilityLabel:p.size>0?`Route filters, ${p.size} active`:"Route filters",children:n(Ue,{size:14,color:p.size>0?s.color.accent:s.color.textSecondary})}),n($e,{isEnabled:z,onToggle:be,accessibilityLabel:"Toggle route event monitoring",testID:"buoy-routes-power"}),n(ae,{onPress:ye,style:a.iconButton,testID:"buoy-routes-clear",accessibilityRole:"button",accessibilityLabel:"Clear route events",children:n(_e,{size:14,color:s.color.danger})})]})]})]});const Be=e=>{if(e.type==="layout"||e.type==="group")return;const o=e.type==="index"||e.path==="/";if(!y&&!o){x(true);return}c?.onNavigateRoute?.(e)};const ne=n(Ke,{visible:j,onClose:()=>x(false),featureName:"Route Event Management"});if(ue){return u(le,{children:[u(S,{style:a.inlineRoot,children:[n(S,{style:a.inlineHeader,...Fe,children:te}),ee(),_]}),ne]})}return n(le,{children:u(Ve,{visible:t,onClose:f,onMinimize:v,persistenceKey:xe,header:{showToggleButton:true,customContent:te},onModeChange:ve,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,disableScrollWrapper:true,styles:{},footer:_,footerHeight:_?68:0,children:[ee(),ne]})})}export function RoutesToolView(t={}){return n(RouteEventsModalWithTabs,{...t,inline:true,visible:true,onClose:()=>{}})}const a=Ae.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:Ge.border,backgroundColor:"transparent"},iconButton:{padding:6,borderRadius:6,backgroundColor:s.color.buttonSurface},activeFilterButton:{backgroundColor:s.color.accentSoft},emptyState:{flex:1,justifyContent:"center",alignItems:"center",padding:32},emptyTitle:{color:s.color.text,fontSize:16,fontWeight:"600",marginTop:16,marginBottom:8,fontFamily:W,letterSpacing:.5,textTransform:"uppercase"},emptySubtitle:{color:s.color.textSecondary,fontSize:14,textAlign:"center",fontFamily:W},contentWrapper:{flex:1},statsContainer:{paddingHorizontal:16,paddingVertical:8,backgroundColor:s.color.surface,borderBottomWidth:1,borderBottomColor:s.color.border},statsText:{fontSize:11,color:s.color.textSecondary,fontFamily:W,textAlign:"center"},statsWarning:{color:s.color.warning,fontWeight:"600"},searchContainer:{paddingHorizontal:16,paddingVertical:8,backgroundColor:"transparent"},lockedEventsBanner:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:s.color.warningSoft,borderWidth:1,borderColor:s.color.warning+"30",borderRadius:8,paddingVertical:10,paddingHorizontal:14,marginHorizontal:16,marginBottom:8},lockedEventsBannerText:{fontSize:12,fontWeight:"600",color:s.color.warning,fontFamily:W},lockedEventsBannerSubtext:{fontSize:11,color:s.color.textSecondary,marginLeft:"auto"}});