@buoy-gg/route-events 7.0.40 → 7.0.42

package/lib/commonjs/components/RouteEventsModalWithTabs.js

@@ -1,717 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RouteEventsModalWithTabs = RouteEventsModalWithTabs;
-exports.RoutesToolView = RoutesToolView;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _safeReactNavigation = require("../utils/safeReactNavigation");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _license = require("@buoy-gg/license");
-var _useRouteEvents = require("../hooks/useRouteEvents");
-var _routeEventStore = require("../stores/routeEventStore");
-var _RouteEventDetail = require("./RouteEventDetail");
-var _RouteFilterViewV = require("./RouteFilterViewV2");
-var _RoutesSitemap = require("./RoutesSitemap");
-var _ReactNavigationRoutes = require("./ReactNavigationRoutes");
-var _NavigationStack = require("./NavigationStack");
-var _RouteEventsTimeline = require("./RouteEventsTimeline");
-var _jsxRuntime = require("react/jsx-runtime");
-// Resolved once at module load; null when React Navigation is absent
-// (useSafeNavigationContainerRef then yields undefined, so the dispatch
-// paths below never execute).
-const CommonActions = (0, _safeReactNavigation.getCommonActions)();
-
-// Free tier limit for route events
-
-/** 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) {
-  if (path.length === 0) return null;
-  if (path.length === 1) {
-    return CommonActions.navigate({
-      name: path[0]
-    });
-  }
-
-  // Build nested params from the end
-  let params = {
-    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
-  });
-}
-function RouteEventsModalWithTabs({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  enableSharedModalDimensions = false,
-  inline = false,
-  remote
-}) {
-  const router = (0, _sharedUi.useSafeRouter)();
-  const containerRef = (0, _safeReactNavigation.useSafeNavigationContainerRef)();
-  const hasExpoRouter = (0, _sharedUi.isExpoRouterAvailable)();
-  const [activeTab, setActiveTab] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.activeTab(), "events", TAB_PERSISTENCE);
-  const [showUpgradeModal, setShowUpgradeModal] = (0, _react.useState)(false);
-  // Serialized stack reported up by NavigationStack so the copy button can live
-  // in the shared navbar.
-  const [stackCopyValue, setStackCopyValue] = (0, _react.useState)("");
-
-  // Check Pro status internally
-  const isPro = (0, _license.useIsPro)();
-  const eventLimit = (0, _sharedUi.useLimit)("routeEvents.entries");
-
-  // Auto-close upgrade modal when user becomes Pro
-  (0, _react.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] = (0, _sharedUi.usePersistedState)(_sharedUi.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
-  } = (0, _useRouteEvents.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.
-  (0, _react.useEffect)(() => {
-    _routeEventStore.routeEventStore.setBootCapture(isListeningEnabled);
-  }, [isListeningEnabled]);
-  const [showFilters, setShowFilters] = (0, _react.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] = (0, _react.useState)(null);
-  const [selectedVisitNumber, setSelectedVisitNumber] = (0, _react.useState)(1);
-  const [searchQuery, setSearchQuery] = (0, _react.useState)("");
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters(), new Set(["/_sitemap", "/api", "/__dev"]), STRING_SET_PERSISTENCE);
-  const lastEventRef = (0, _react.useRef)(null);
-  const handleModeChange = (0, _react.useCallback)(_mode => {
-    // Mode changes handled by JsModal
-  }, []);
-  const handleNavigate = (0, _react.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
-        const screenName = pathname.startsWith("/") ? pathname.slice(1) : pathname;
-
-        // 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);
-            if (action) {
-              containerRef.dispatch(action);
-              return;
-            }
-          }
-        }
-
-        // Fallback: try direct navigation (works for top-level screens)
-        containerRef.dispatch(CommonActions.navigate({
-          name: screenName
-        }));
-      } else {
-        // Neither Expo Router nor a navigation container — say so instead
-        // of swallowing the tap.
-        _reactNative.Alert.alert("Navigation Unavailable", "No Expo Router or React Navigation container was found in this app.");
-      }
-    } catch (error) {
-      _reactNative.Alert.alert("Navigation Error", String(error));
-    }
-  }, [router, containerRef, hasExpoRouter, remote, isPro]);
-
-  // Event listener is now managed by useRouteEvents hook
-
-  const handleToggleListening = (0, _react.useCallback)(() => {
-    // Toggle subscription - this actually subscribes/unsubscribes from the store
-    setIsListeningEnabled(prev => !prev);
-  }, []);
-  const handleClearEvents = (0, _react.useCallback)(() => {
-    if (events.length === 0) return;
-
-    // Gate clear behind Pro
-    if (!isPro) {
-      setShowUpgradeModal(true);
-      return;
-    }
-    clearRouteEvents();
-  }, [events.length, isPro, clearRouteEvents]);
-  const handleTogglePattern = (0, _react.useCallback)(pattern => {
-    setIgnoredPatterns(prev => {
-      const next = new Set(prev);
-      if (next.has(pattern)) {
-        next.delete(pattern);
-      } else {
-        next.add(pattern);
-      }
-      return next;
-    });
-  }, []);
-  const handleAddPattern = (0, _react.useCallback)(pattern => {
-    setIgnoredPatterns(prev => new Set([...prev, pattern]));
-  }, []);
-  const handleToggleFilters = (0, _react.useCallback)(() => {
-    setShowFilters(!showFilters);
-  }, [showFilters]);
-  const handleSelectEvent = (0, _react.useCallback)((event, visitNumber) => {
-    setSelectedEvent(event);
-    setSelectedVisitNumber(visitNumber);
-  }, []);
-  const handleBackFromDetail = (0, _react.useCallback)(() => {
-    setSelectedEvent(null);
-  }, []);
-  const handleTabChange = (0, _react.useCallback)(tab => {
-    // Leaving the detail view whenever the tab changes.
-    setSelectedEvent(null);
-    setActiveTab(tab);
-  }, []);
-
-  // Get all unique pathnames from events
-  const allEventPathnames = (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(() => filteredEvents.slice(0, eventLimit), [filteredEvents, eventLimit]);
-  const lockedEventCount = (0, _react.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 = (0, _react.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 = (0, _react.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: (0, _sharedUi.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 ? _sharedUi.devToolsStorageKeys.modal.root() : _sharedUi.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__*/(0, _jsxRuntime.jsx)(_RouteEventDetail.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__*/(0, _jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap, {
-        style: styles.contentWrapper,
-        injectedRoutes: remote?.sitemap?.routes,
-        injectedSource: remote?.sitemap?.source ?? null,
-        injectedLastUpdatedAt: remote?.sitemap?.lastUpdatedAt ?? null,
-        onNavigateRoute: remote ? handleRemoteNavigateRoute : undefined
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactNavigationRoutes.ReactNavigationRoutes, {
-        style: styles.contentWrapper
-      });
-    }
-    if (activeTab === "stack") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationStack.NavigationStack, {
-        style: styles.contentWrapper,
-        injectedStack: remote ? remote.stack ?? [] : undefined,
-        onAction: remote?.onStackAction,
-        onCopyValueChange: setStackCopyValue
-      });
-    }
-
-    // Events tab content
-    if (showFilters) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteFilterViewV.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.contentWrapper,
-        testID: "buoy-routes-events",
-        children: [showSearchBar && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.searchContainer,
-          testID: "buoy-routes-search-field",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SearchBar, {
-            value: searchQuery,
-            onChange: setSearchQuery,
-            placeholder: "Search pathname or params...",
-            testID: "buoy-routes-search"
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-          testID: "buoy-routes-empty",
-          ...(0, _sharedUi.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.contentWrapper,
-      testID: "buoy-routes-events",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.searchContainer,
-        testID: "buoy-routes-search-field",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.SearchBar, {
-          value: searchQuery,
-          onChange: setSearchQuery,
-          placeholder: "Search pathname or params...",
-          testID: "buoy-routes-search"
-        })
-      }), lockedEventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.lockedEventsBanner,
-        testID: "buoy-routes-locked-banner",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
-          size: 14,
-          color: _sharedUi.night.color.warning
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: styles.lockedEventsBannerText,
-          testID: "buoy-routes-locked-banner-text",
-          children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'event' : 'events', " locked"]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.lockedEventsBannerSubtext,
-          children: "Upgrade to Pro for full history"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventsTimeline.RouteEventsTimeline, {
-        events: visibleEvents,
-        visitCounts: visitCounts,
-        onNavigate: handleNavigate,
-        onSelectEvent: handleSelectEvent
-      })]
-    });
-  };
-  const headerContent = selectedEvent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: handleBackFromDetail
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: selectedEvent.pathname,
-      testID: "buoy-routes-detail-title"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: () => setShowFilters(false)
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "Filters",
-      testID: "buoy-routes-filters-title"
-    })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-      children: [activeTab === "stack" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-        value: stackCopyValue,
-        buttonStyle: styles.iconButton,
-        testID: "buoy-routes-stack-copy"
-      }), activeTab === "events" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton, {
-          value: copyAllEventsData,
-          buttonStyle: styles.iconButton,
-          testID: "buoy-routes-copy"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-            size: 14,
-            color: ignoredPatterns.size > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-          isEnabled: isListening,
-          onToggle: handleToggleListening,
-          accessibilityLabel: "Toggle route event monitoring",
-          testID: "buoy-routes-power"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          onPress: handleClearEvents,
-          style: styles.iconButton,
-          testID: "buoy-routes-clear",
-          accessibilityRole: "button",
-          accessibilityLabel: "Clear route events",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-            size: 14,
-            color: _sharedUi.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__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.inlineRoot,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.inlineHeader,
-          ..._sharedUi.windowDragProps,
-          children: headerContent
-        }), renderContent(), footerNode]
-      }), upgradeModal]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TickProvider, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.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.
- */
-function RoutesToolView(props = {}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RouteEventsModalWithTabs, {
-    ...props,
-    inline: true,
-    visible: true,
-    onClose: () => {}
-  });
-}
-const styles = _reactNative.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: _sharedUi.buoyColors.border,
-    // Clear, like Bench — the host's hoisted sky shows through the header.
-    backgroundColor: "transparent"
-  },
-  iconButton: {
-    padding: 6,
-    borderRadius: 6,
-    backgroundColor: _sharedUi.night.color.buttonSurface
-  },
-  activeFilterButton: {
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  emptyState: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 16,
-    fontWeight: "600",
-    marginTop: 16,
-    marginBottom: 8,
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.5,
-    textTransform: "uppercase"
-  },
-  emptySubtitle: {
-    color: _sharedUi.night.color.textSecondary,
-    fontSize: 14,
-    textAlign: "center",
-    fontFamily: _sharedUi.monoFont
-  },
-  contentWrapper: {
-    flex: 1
-  },
-  statsContainer: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.night.color.border
-  },
-  statsText: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textSecondary,
-    fontFamily: _sharedUi.monoFont,
-    textAlign: "center"
-  },
-  statsWarning: {
-    color: _sharedUi.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: _sharedUi.night.color.warningSoft,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.warning + "30",
-    borderRadius: 8,
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    marginHorizontal: 16,
-    marginBottom: 8
-  },
-  lockedEventsBannerText: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: _sharedUi.night.color.warning,
-    fontFamily: _sharedUi.monoFont
-  },
-  lockedEventsBannerSubtext: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textSecondary,
-    marginLeft: "auto"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.RouteEventsModalWithTabs=RouteEventsModalWithTabs;exports.RoutesToolView=RoutesToolView;var _react=require("react");var _reactNative=require("react-native");var _safeReactNavigation=require("../utils/safeReactNavigation");var _sharedUi=require("@buoy-gg/shared-ui");var _license=require("@buoy-gg/license");var _useRouteEvents=require("../hooks/useRouteEvents");var _routeEventStore=require("../stores/routeEventStore");var _RouteEventDetail=require("./RouteEventDetail");var _RouteFilterViewV=require("./RouteFilterViewV2");var _RoutesSitemap=require("./RoutesSitemap");var _ReactNavigationRoutes=require("./ReactNavigationRoutes");var _NavigationStack=require("./NavigationStack");var _RouteEventsTimeline=require("./RouteEventsTimeline");var _routeTemplate=require("../utils/routeTemplate");var _jsxRuntime=require("react/jsx-runtime");const CommonActions=(0,_safeReactNavigation.getCommonActions)();const TAB_PERSISTENCE={parse:t=>t==="routes"||t==="events"||t==="stack"?t:void 0,serialize:t=>t};const BOOLEAN_PERSISTENCE={parse:t=>t==="true",serialize:t=>t.toString()};const STRING_SET_PERSISTENCE={parse:t=>new Set(JSON.parse(t)),serialize:t=>JSON.stringify(Array.from(t))};function findScreenPath(t,u){if(!t||!t.routes)return null;for(const a of t.routes){if(a.name===u){return[a.name]}if(a.state){const d=findScreenPath(a.state,u);if(d){return[a.name,...d]}}}return null}function buildNestedNavigateAction(t,u){if(t.length===0)return null;const a=u&&Object.keys(u).length>0?u:void 0;if(t.length===1){return CommonActions.navigate(a?{name:t[0],params:a}:{name:t[0]})}let d=a?{screen:t[t.length-1],params:a}:{screen:t[t.length-1]};for(let b=t.length-2;b>=1;b--){d={screen:t[b],params:d}}return CommonActions.navigate({name:t[0],params:d})}function RouteEventsModalWithTabs({visible:t,onClose:u,onBack:a,onMinimize:d,enableSharedModalDimensions:b=false,inline:q=false,remote:r}){const I=(0,_sharedUi.useSafeRouter)();const y=(0,_safeReactNavigation.useSafeNavigationContainerRef)();const x=(0,_sharedUi.isExpoRouterAvailable)();const[m,O]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.activeTab(),"events",TAB_PERSISTENCE);const[N,S]=(0,_react.useState)(false);const[U,K]=(0,_react.useState)("");const h=(0,_license.useIsPro)();const E=(0,_sharedUi.useLimit)("routeEvents.entries");(0,_react.useEffect)(()=>{if(N&&h){S(false)}},[N,h]);const[C,J]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.isMonitoring(),true,BOOLEAN_PERSISTENCE);const{events:s,clearEvents:D,isListening:$}=(0,_useRouteEvents.useRouteEvents)({enabled:C});const R=C&&$;(0,_react.useEffect)(()=>{_routeEventStore.routeEventStore.setBootCapture(C)},[C]);const[j,A]=(0,_react.useState)(false);const[i,w]=(0,_react.useState)(null);const[_,G]=(0,_react.useState)(1);const[v,V]=(0,_react.useState)("");const[l,H]=(0,_sharedUi.usePersistedState)(_sharedUi.devToolsStorageKeys.routeEvents.eventFilters(),new Set(["/_sitemap","/api","/__dev"]),STRING_SET_PERSISTENCE);const ue=(0,_react.useRef)(null);const Q=(0,_react.useCallback)(e=>{},[]);const z=(0,_react.useCallback)(e=>{try{if(r){if(!r.onNavigatePath)return;if(!h&&e!=="/"){S(true);return}r.onNavigatePath(e);return}if(x){I.push(e)}else if(y){const{pathname:n,params:o}=(0,_routeTemplate.splitRouteHref)(e);const c=n.startsWith("/")?n.slice(1):n;const p=Object.keys(o).length>0;const k=y.getRootState?.();if(k){const f=findScreenPath(k,c);if(f){const T=buildNestedNavigateAction(f,o);if(T){y.dispatch(T);return}}}y.dispatch(CommonActions.navigate(p?{name:c,params:o}:{name:c}))}else{_reactNative.Alert.alert("Navigation Unavailable","No Expo Router or React Navigation container was found in this app.")}}catch(n){_reactNative.Alert.alert("Navigation Error",String(n))}},[I,y,x,r,h]);const X=(0,_react.useCallback)(()=>{J(e=>!e)},[]);const Y=(0,_react.useCallback)(()=>{if(s.length===0)return;if(!h){S(true);return}D()},[s.length,h,D]);const Z=(0,_react.useCallback)(e=>{H(n=>{const o=new Set(n);if(o.has(e)){o.delete(e)}else{o.add(e)}return o})},[]);const ee=(0,_react.useCallback)(e=>{H(n=>new Set([...n,e]))},[]);const te=(0,_react.useCallback)(()=>{A(!j)},[j]);const ne=(0,_react.useCallback)((e,n)=>{w(e);G(n)},[]);const oe=(0,_react.useCallback)(()=>{w(null)},[]);const se=(0,_react.useCallback)(e=>{w(null);O(e)},[]);const ae=(0,_react.useMemo)(()=>{const e=new Set;s.forEach(n=>{if(n.pathname){e.add(n.pathname)}});return Array.from(e).sort()},[s]);const g=(0,_react.useMemo)(()=>{return s.filter(e=>{if(!e.pathname)return false;const n=Array.from(l).some(o=>e.pathname.includes(o));if(n)return false;if(v.trim()){const o=v.toLowerCase();const c=e.pathname.toLowerCase().includes(o);const p=Object.entries(e.params||{}).some(([k,f])=>{const T=Array.isArray(f)?f.join(" "):f;return k.toLowerCase().includes(o)||T.toLowerCase().includes(o)});return c||p}return true})},[s,l,v]);const re=(0,_react.useMemo)(()=>g.slice(0,E),[g,E]);const P=(0,_react.useMemo)(()=>Math.max(0,g.length-E),[g.length,E]);const M=(0,_react.useMemo)(()=>{const e=new Map;const n=new Map;for(let o=s.length-1;o>=0;o--){const c=s[o];const p=(e.get(c.pathname)||0)+1;e.set(c.pathname,p);n.set(c,p)}return n},[s]);const ie=(0,_react.useMemo)(()=>{return{summary:{total:s.length,filtered:g.length,listening:R,ignoredPatterns:Array.from(l),timestamp:new Date().toISOString()},events:g.map((e,n)=>({index:n,visitNumber:M.get(e)||1,pathname:e.pathname,timestamp:e.timestamp,timestampRelative:(0,_sharedUi.formatRelativeTime)(e.timestamp),params:e.params,segments:e.segments,previousPathname:e.previousPathname,timeSincePrevious:e.timeSincePrevious}))}},[s.length,g,R,l,M]);if(!t)return null;const le=b?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.routeEvents.modal();const B=null;const F=()=>{if(i){return(0,_jsxRuntime.jsx)(_RouteEventDetail.RouteEventDetail,{event:i,visitNumber:_,onNavigate:z})}if(m==="routes"){return x||r?.sitemap?(0,_jsxRuntime.jsx)(_RoutesSitemap.RoutesSitemap,{style:styles.contentWrapper,injectedRoutes:r?.sitemap?.routes,injectedSource:r?.sitemap?.source??null,injectedLastUpdatedAt:r?.sitemap?.lastUpdatedAt??null,onNavigateRoute:r?ce:void 0}):(0,_jsxRuntime.jsx)(_ReactNavigationRoutes.ReactNavigationRoutes,{style:styles.contentWrapper})}if(m==="stack"){return(0,_jsxRuntime.jsx)(_NavigationStack.NavigationStack,{style:styles.contentWrapper,injectedStack:r?r.stack??[]:void 0,onAction:r?.onStackAction,onCopyValueChange:K})}if(j){return(0,_jsxRuntime.jsx)(_RouteFilterViewV.RouteFilterViewV2,{ignoredPatterns:l,onTogglePattern:Z,onAddPattern:ee,availablePathnames:ae})}const e=s.length>0;if(g.length===0){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentWrapper,testID:"buoy-routes-events",children:[e&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.searchContainer,testID:"buoy-routes-search-field",children:(0,_jsxRuntime.jsx)(_sharedUi.SearchBar,{value:v,onChange:V,placeholder:"Search pathname or params...",testID:"buoy-routes-search"})}),(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-routes-empty",...(0,_sharedUi.resolveListEmptyState)({subject:"route events",search:v,total:s.length,capturing:R,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(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentWrapper,testID:"buoy-routes-events",children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.searchContainer,testID:"buoy-routes-search-field",children:(0,_jsxRuntime.jsx)(_sharedUi.SearchBar,{value:v,onChange:V,placeholder:"Search pathname or params...",testID:"buoy-routes-search"})}),P>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.lockedEventsBanner,testID:"buoy-routes-locked-banner",children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedEventsBannerText,testID:"buoy-routes-locked-banner-text",children:[P," older ",P===1?"event":"events"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.lockedEventsBannerSubtext,children:"Upgrade to Pro for full history"})]}),(0,_jsxRuntime.jsx)(_RouteEventsTimeline.RouteEventsTimeline,{events:re,visitCounts:M,onNavigate:z,onSelectEvent:ne})]})};const L=i?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:oe}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:i.pathname,testID:"buoy-routes-detail-title"}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{children:(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{testID:"buoy-routes-detail-copy",value:{pathname:i.pathname,previousPathname:i.previousPathname,params:i.params,segments:i.segments,timestamp:i.timestamp,timestampISO:new Date(i.timestamp).toISOString(),timeSincePrevious:i.timeSincePrevious,visitNumber:_},buttonStyle:styles.iconButton})})]}):j?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>A(false)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Filters",testID:"buoy-routes-filters-title"})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[a&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:a}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:true,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"routes",label:x?"Routes":"Screens"},{key:"events",label:`Events${s.length>0&&m!=="events"?` (${s.length})`:""}`},{key:"stack",label:"Stack"}],activeTab:m,onTabChange:e=>se(e),testIDPrefix:"buoy-routes-tab"})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[m==="stack"&&(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:U,buttonStyle:styles.iconButton,testID:"buoy-routes-stack-copy"}),m==="events"&&(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ToolbarCopyButton,{value:ie,buttonStyle:styles.iconButton,testID:"buoy-routes-copy"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:te,style:[styles.iconButton,l.size>0&&styles.activeFilterButton],testID:"buoy-routes-filters",accessibilityRole:"button",accessibilityLabel:l.size>0?`Route filters, ${l.size} active`:"Route filters",children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:l.size>0?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:R,onToggle:X,accessibilityLabel:"Toggle route event monitoring",testID:"buoy-routes-power"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:Y,style:styles.iconButton,testID:"buoy-routes-clear",accessibilityRole:"button",accessibilityLabel:"Clear route events",children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:_sharedUi.night.color.danger})})]})]})]});const ce=e=>{if(e.type==="layout"||e.type==="group")return;const n=e.type==="index"||e.path==="/";if(!h&&!n){S(true);return}r?.onNavigateRoute?.(e)};const W=(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:N,onClose:()=>S(false),featureName:"Route Event Management"});if(q){return(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:L}),F(),B]}),W]})}return(0,_jsxRuntime.jsx)(_sharedUi.TickProvider,{children:(0,_jsxRuntime.jsxs)(_sharedUi.JsModal,{visible:t,onClose:u,onMinimize:d,persistenceKey:le,header:{showToggleButton:true,customContent:L},onModeChange:Q,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,disableScrollWrapper:true,styles:{},footer:B,footerHeight:B?68:0,children:[F(),W]})})}function RoutesToolView(t={}){return(0,_jsxRuntime.jsx)(RouteEventsModalWithTabs,{...t,inline:true,visible:true,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.border,backgroundColor:"transparent"},iconButton:{padding:6,borderRadius:6,backgroundColor:_sharedUi.night.color.buttonSurface},activeFilterButton:{backgroundColor:_sharedUi.night.color.accentSoft},emptyState:{flex:1,justifyContent:"center",alignItems:"center",padding:32},emptyTitle:{color:_sharedUi.night.color.text,fontSize:16,fontWeight:"600",marginTop:16,marginBottom:8,fontFamily:_sharedUi.monoFont,letterSpacing:.5,textTransform:"uppercase"},emptySubtitle:{color:_sharedUi.night.color.textSecondary,fontSize:14,textAlign:"center",fontFamily:_sharedUi.monoFont},contentWrapper:{flex:1},statsContainer:{paddingHorizontal:16,paddingVertical:8,backgroundColor:_sharedUi.night.color.surface,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.border},statsText:{fontSize:11,color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont,textAlign:"center"},statsWarning:{color:_sharedUi.night.color.warning,fontWeight:"600"},searchContainer:{paddingHorizontal:16,paddingVertical:8,backgroundColor:"transparent"},lockedEventsBanner:{flexDirection:"row",alignItems:"center",gap:8,backgroundColor:_sharedUi.night.color.warningSoft,borderWidth:1,borderColor:_sharedUi.night.color.warning+"30",borderRadius:8,paddingVertical:10,paddingHorizontal:14,marginHorizontal:16,marginBottom:8},lockedEventsBannerText:{fontSize:12,fontWeight:"600",color:_sharedUi.night.color.warning,fontFamily:_sharedUi.monoFont},lockedEventsBannerSubtext:{fontSize:11,color:_sharedUi.night.color.textSecondary,marginLeft:"auto"}});