@buoy-gg/route-events 7.0.41 → 7.0.43

package/lib/module/components/RoutesSitemap.js

@@ -1,1034 +1,3 @@
-"use strict";
+"use strict";import{useState as B,useCallback as w,useMemo as H,useEffect as de}from"react";import{night as o,ToolEmptyState as pe,monoFont as c}from"@buoy-gg/shared-ui";import{View as n,Text as l,TextInput as ue,TouchableOpacity as C,ScrollView as he,StyleSheet as ye,Alert as T,Platform as ge}from"react-native";import{useSafeRouter as fe}from"@buoy-gg/shared-ui";import{Search as q,ChevronDown as J,ChevronRight as X,Home as me,InlineCopyButton as be,CopyButton as xe,RefreshCw as Ce,formatRelativeTime as Se,ProUpgradeModal as De}from"@buoy-gg/shared-ui";import{useIsPro as Ie}from"@buoy-gg/license";import{useRouteSitemap as Be}from"../useRouteSitemap";import{sitemapGroupTestID as Y,sitemapRouteTestID as Te}from"../utils/testIDs";import{jsx as t,jsxs as i}from"react/jsx-runtime";const d=ge.OS==="web";const F=d?22:16;const Re={path:"/",name:"index",type:"index",params:[],nodeType:"route",contextKey:"/",isInternal:false,children:[],depth:0};export function RoutesSitemap({style:r,injectedRoutes:g,injectedSource:f,injectedLastUpdatedAt:S,onNavigateRoute:b}){const[p,D]=B("");const[z,h]=B(false);const[W,E]=B(new Set(["Static Routes","Dynamic Routes"]));const[x,v]=B(false);const[P,V]=B(false);const $=Ie();de(()=>{if(P&&$){V(false)}},[P,$]);const L=fe();const{groups:k,stats:u,isLoaded:te,isSupported:oe,filteredRoutes:j,routes:_,refresh:K,lastUpdatedAt:O,source:G}=Be({searchQuery:p,sortBy:"path",injectedRoutes:g,injectedSource:f,injectedLastUpdatedAt:S});const re=H(()=>{return{summary:{total:u.total,static:u.static,dynamic:u.dynamic,layouts:u.layouts,groups:u.groups,timestamp:new Date().toISOString()},groups:k.map(a=>({title:a.title,description:a.description,count:a.routes.length,routes:a.routes.map(s=>({path:s.path,name:s.name,type:s.type,params:s.params,depth:s.depth,hasChildren:s.children.length>0,childrenCount:s.children.length}))})),allRoutes:_.map(a=>a.path)}},[k,u,_]);const ae=w(a=>{E(s=>{const y=new Set(s);if(y.has(a)){y.delete(a)}else{y.add(a)}return y})},[]);const N=w((a,s=0,y={})=>{const U=a.params;if(s>=U.length){let m=a.path;Object.entries(y).forEach(([I,Z])=>{if(a.type==="catch-all"){m=m.replace(`[...${I}]`,Z)}else{m=m.replace(`[${I}]`,Z)}});try{L.push(m)}catch(I){T.alert("Navigation Error",String(I))}return}const M=U[s];const ce=a.type==="catch-all"?`[...${M}]`:`[${M}]`;T.prompt("Enter Parameter Value",`Enter value for ${ce}:
 
-/**
- * RoutesSitemap - Visual sitemap of all app routes
- *
- * Displays parsed route information from Expo Router with:
- * - Search/filter
- * - Organized groups
- * - Route details
- * - Copy to clipboard
- * - Navigation
- */
-
-import { useState, useCallback, useMemo, useEffect } from "react";
-import { night, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
-import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert, Platform } from "react-native";
-import { useSafeRouter } from "@buoy-gg/shared-ui";
-import { Search, ChevronDown, ChevronRight, Home, InlineCopyButton, CopyButton, RefreshCw, formatRelativeTime, ProUpgradeModal } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-import { useRouteSitemap } from "../useRouteSitemap";
-import { sitemapGroupTestID, sitemapRouteTestID } from "../utils/testIDs";
-
-// ============================================================================
-// Types
-// ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// On desktop (web) the toolbar has far more room, so scale the action buttons
-// up for easier clicking and a less cramped header.
-const IS_DESKTOP = Platform.OS === "web";
-const ACTION_ICON_SIZE = IS_DESKTOP ? 22 : 16;
-
-// Synthetic route representing the app's home/index ("/"). Used by the
-// "Home" toolbar shortcut so navigation works the same as tapping any route.
-const HOME_ROUTE = {
-  path: "/",
-  name: "index",
-  type: "index",
-  params: [],
-  nodeType: "route",
-  contextKey: "/",
-  isInternal: false,
-  children: [],
-  depth: 0
-};
-
-// ============================================================================
-// Main Component
-// ============================================================================
-
-export function RoutesSitemap({
-  style,
-  injectedRoutes,
-  injectedSource,
-  injectedLastUpdatedAt,
-  onNavigateRoute
-}) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [isSearching, setIsSearching] = useState(false);
-  const [expandedGroups, setExpandedGroups] = useState(new Set(["Static Routes", "Dynamic Routes"]));
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-
-  // Check Pro status internally
-  const isPro = useIsPro();
-
-  // Auto-close upgrade modal when user becomes Pro
-  useEffect(() => {
-    if (showUpgradeModal && isPro) {
-      setShowUpgradeModal(false);
-    }
-  }, [showUpgradeModal, isPro]);
-  const router = useSafeRouter();
-  const {
-    groups,
-    stats,
-    isLoaded,
-    isSupported,
-    filteredRoutes,
-    routes,
-    refresh,
-    lastUpdatedAt,
-    source
-  } = useRouteSitemap({
-    searchQuery,
-    sortBy: "path",
-    injectedRoutes,
-    injectedSource,
-    injectedLastUpdatedAt
-  });
-
-  // Prepare copy data - memoized so it only rebuilds when dependencies change
-  const copyAllData = useMemo(() => {
-    return {
-      summary: {
-        total: stats.total,
-        static: stats.static,
-        dynamic: stats.dynamic,
-        layouts: stats.layouts,
-        groups: stats.groups,
-        timestamp: new Date().toISOString()
-      },
-      groups: groups.map(group => ({
-        title: group.title,
-        description: group.description,
-        count: group.routes.length,
-        routes: group.routes.map(route => ({
-          path: route.path,
-          name: route.name,
-          type: route.type,
-          params: route.params,
-          depth: route.depth,
-          hasChildren: route.children.length > 0,
-          childrenCount: route.children.length
-        }))
-      })),
-      allRoutes: routes.map(route => route.path)
-    };
-  }, [groups, stats, routes]);
-  const handleToggleGroup = useCallback(groupTitle => {
-    setExpandedGroups(prev => {
-      const next = new Set(prev);
-      if (next.has(groupTitle)) {
-        next.delete(groupTitle);
-      } else {
-        next.add(groupTitle);
-      }
-      return next;
-    });
-  }, []);
-  const promptForParams = useCallback((route, paramIndex = 0, collectedParams = {}) => {
-    const params = route.params;
-    if (paramIndex >= params.length) {
-      // All parameters collected, build path and navigate
-      let finalPath = route.path;
-
-      // Replace each parameter in the path
-      Object.entries(collectedParams).forEach(([param, value]) => {
-        if (route.type === "catch-all") {
-          // For catch-all routes, replace [...param] with the value
-          finalPath = finalPath.replace(`[...${param}]`, value);
-        } else {
-          // For regular dynamic routes, replace [param] with the value
-          finalPath = finalPath.replace(`[${param}]`, value);
-        }
-      });
-
-      // Navigate
-      try {
-        router.push(finalPath);
-      } catch (error) {
-        Alert.alert("Navigation Error", String(error));
-      }
-      return;
-    }
-    const currentParam = params[paramIndex];
-    const paramDisplay = route.type === "catch-all" ? `[...${currentParam}]` : `[${currentParam}]`;
-    Alert.prompt("Enter Parameter Value", `Enter value for ${paramDisplay}:\n\nRoute: ${route.path}`, [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: paramIndex < params.length - 1 ? "Next" : "Navigate",
-      onPress: value => {
-        if (value && value.trim()) {
-          const newParams = {
-            ...collectedParams,
-            [currentParam]: value.trim()
-          };
-          promptForParams(route, paramIndex + 1, newParams);
-        } else {
-          Alert.alert("Invalid Value", "Please enter a value for the parameter");
-        }
-      }
-    }], "plain-text");
-  }, [router]);
-  const handleNavigate = useCallback((route, options) => {
-    // When a navigation delegate is supplied (dashboard → device), hand off
-    // entirely: the delegate owns Pro gating and param resolution.
-    if (onNavigateRoute) {
-      onNavigateRoute(route);
-      return;
-    }
-
-    // Gate behind Pro (the Home shortcut bypasses this — it's always free)
-    if (!isPro && !options?.bypassPro) {
-      setShowUpgradeModal(true);
-      return;
-    }
-
-    // Don't navigate to layouts or groups
-    if (route.type === "layout" || route.type === "group") {
-      Alert.alert("Cannot Navigate", `${route.type === "layout" ? "Layouts" : "Route groups"} are not navigable routes`);
-      return;
-    }
-
-    // For dynamic routes, prompt for parameters
-    if (route.type === "dynamic" || route.type === "catch-all") {
-      if (route.params.length === 0) {
-        // No parameters despite being dynamic? Just navigate
-        try {
-          router.push(route.path);
-        } catch (error) {
-          Alert.alert("Navigation Error", String(error));
-        }
-        return;
-      }
-
-      // Start the parameter prompting flow
-      promptForParams(route);
-      return;
-    }
-
-    // Navigate to static route
-    try {
-      router.push(route.path);
-    } catch (error) {
-      Alert.alert("Navigation Error", String(error));
-    }
-  }, [router, promptForParams, isPro, onNavigateRoute]);
-  const handleGoHome = useCallback(() => {
-    handleNavigate(HOME_ROUTE, {
-      bypassPro: true
-    });
-  }, [handleNavigate]);
-  const handleManualRefresh = useCallback(() => {
-    if (isRefreshing) return;
-    setIsRefreshing(true);
-    refresh();
-    setTimeout(() => setIsRefreshing(false), 400);
-  }, [isRefreshing, refresh]);
-  const lastRefreshLabel = useMemo(() => {
-    if (!lastUpdatedAt) return "Awaiting route data";
-    return `Updated ${formatRelativeTime(lastUpdatedAt)}`;
-  }, [lastUpdatedAt]);
-  const sourceLabel = useMemo(() => {
-    if (!source) return "Source: unknown";
-    return `Source: ${source}`;
-  }, [source]);
-
-  // When searching, show filtered routes, otherwise show groups
-  const displayGroups = useMemo(() => {
-    if (searchQuery && filteredRoutes.length > 0) {
-      // Create a single "Search Results" group
-      return [{
-        title: "Search Results",
-        icon: "",
-        routes: filteredRoutes
-      }];
-    }
-    return groups;
-  }, [searchQuery, filteredRoutes, groups]);
-  if (!isLoaded) {
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.container, style],
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.loadingContainer,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.loadingText,
-          testID: "buoy-routes-sitemap-loading",
-          children: isSupported ? "Loading routes..." : "Route sitemap isn't available on the dashboard — the route tree lives on the device. Use the Events tab to see navigation here."
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    children: [isSearching &&
-    /*#__PURE__*/
-    // The wrapper carries the handle as well as the field: a TextInput's
-    // own testID never reaches the XCUITest element tree on this RN
-    // version, so the a11y lane has nothing else to aim at.
-    _jsxs(View, {
-      style: styles.searchContainer,
-      testID: "buoy-routes-sitemap-search-field",
-      children: [/*#__PURE__*/_jsx(Search, {
-        size: 16,
-        color: night.color.textTertiary
-      }), /*#__PURE__*/_jsx(TextInput, {
-        style: styles.searchInput,
-        placeholder: "Search routes...",
-        placeholderTextColor: night.color.placeholder,
-        value: searchQuery,
-        onChangeText: setSearchQuery,
-        autoCapitalize: "none",
-        autoCorrect: false,
-        autoFocus: true,
-        testID: "buoy-routes-sitemap-search",
-        accessibilityLabel: "Search routes"
-      }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => setSearchQuery(""),
-        style: styles.clearButton,
-        testID: "buoy-routes-sitemap-search-clear",
-        accessibilityRole: "button",
-        accessibilityLabel: "Clear route search",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.clearButtonText,
-          children: "\u2715"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.closeSearchButton,
-        onPress: () => {
-          setIsSearching(false);
-          setSearchQuery("");
-        },
-        testID: "buoy-routes-sitemap-search-done",
-        accessibilityRole: "button",
-        accessibilityLabel: "Done searching routes",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.closeSearchText,
-          children: "Done"
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      testID: "buoy-routes-sitemap-scroll",
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContent,
-      children: [!isSearching && /*#__PURE__*/_jsxs(View, {
-        style: styles.header,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.actionsRow,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
-              onPress: handleGoHome,
-              accessibilityLabel: "Go to home route",
-              accessibilityRole: "button",
-              testID: "buoy-routes-sitemap-home",
-              children: /*#__PURE__*/_jsx(Home, {
-                size: ACTION_ICON_SIZE,
-                color: night.color.textSecondary
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
-              children: "Home"
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
-            children: [/*#__PURE__*/_jsx(CopyButton, {
-              value: copyAllData,
-              testID: "buoy-routes-sitemap-copy",
-              size: IS_DESKTOP ? ACTION_ICON_SIZE : 14,
-              buttonStyle: IS_DESKTOP ? styles.actionButtonHeaderDesktop : styles.actionButtonHeader
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
-              children: "Copy"
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop, isRefreshing && styles.refreshButtonDisabled],
-              onPress: handleManualRefresh,
-              disabled: isRefreshing,
-              testID: "buoy-routes-sitemap-refresh",
-              accessibilityRole: "button",
-              accessibilityLabel: "Refresh route tree",
-              children: /*#__PURE__*/_jsx(RefreshCw, {
-                size: ACTION_ICON_SIZE,
-                color: isRefreshing ? night.color.textTertiary : night.color.textSecondary
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
-              children: "Refresh"
-            })]
-          }), /*#__PURE__*/_jsxs(View, {
-            style: [styles.actionWrapper, IS_DESKTOP && styles.actionWrapperDesktop],
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              style: [styles.iconButton, IS_DESKTOP && styles.iconButtonDesktop],
-              onPress: () => setIsSearching(true),
-              testID: "buoy-routes-sitemap-search-open",
-              accessibilityRole: "button",
-              accessibilityLabel: "Search routes",
-              children: /*#__PURE__*/_jsx(Search, {
-                size: ACTION_ICON_SIZE,
-                color: night.color.textSecondary
-              })
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.actionLabel, IS_DESKTOP && styles.actionLabelDesktop],
-              children: "Search"
-            })]
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.statsGrid,
-          children: [/*#__PURE__*/_jsx(StatItem, {
-            value: stats.total,
-            label: "Total",
-            id: "total"
-          }), /*#__PURE__*/_jsx(StatItem, {
-            value: stats.static,
-            label: "Static",
-            id: "static"
-          }), /*#__PURE__*/_jsx(StatItem, {
-            value: stats.dynamic,
-            label: "Dynamic",
-            id: "dynamic"
-          }), /*#__PURE__*/_jsx(StatItem, {
-            value: stats.catchAll,
-            label: "Catch-All",
-            id: "catch-all"
-          }), /*#__PURE__*/_jsx(StatItem, {
-            value: stats.layouts,
-            label: "Layouts",
-            id: "layouts"
-          }), /*#__PURE__*/_jsx(StatItem, {
-            value: stats.groups,
-            label: "Groups",
-            id: "groups"
-          })]
-        })]
-      }), displayGroups.length === 0 ? /*#__PURE__*/_jsx(ToolEmptyState, {
-        testID: "buoy-routes-sitemap-empty"
-        // map = "route inspector; where am I in the navigator" — the one
-        // OTTO_USES sentence written for this screen.
-        ,
-        otto: "map",
-        title: "No routes found",
-        message: "Nothing in the router matches. Clear the search to see the whole tree."
-      }) : displayGroups.map(group => /*#__PURE__*/_jsx(RouteGroupView, {
-        group: group,
-        isExpanded: searchQuery.length > 0 || expandedGroups.has(group.title),
-        onToggleExpand: () => handleToggleGroup(group.title),
-        onNavigate: handleNavigate
-      }, group.title)), /*#__PURE__*/_jsxs(View, {
-        style: styles.metaFooter,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.metaText,
-          testID: "buoy-routes-sitemap-updated",
-          children: lastRefreshLabel
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.sourceBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.sourceText,
-            testID: "buoy-routes-sitemap-source",
-            children: sourceLabel
-          })
-        })]
-      })]
-    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
-      visible: showUpgradeModal,
-      onClose: () => setShowUpgradeModal(false),
-      featureName: "Route Navigation"
-    })]
-  });
-}
-
-// ============================================================================
-// Sub-components
-// ============================================================================
-
-function StatItem({
-  value,
-  label,
-  id
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.statItem,
-    testID: `buoy-routes-stat-${id}`
-    // Fabric merges the number and its caption into this container, so a
-    // stat that isn't spelled out announces as a bare digit.
-    ,
-    accessibilityLabel: `${label}, ${value}`,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.statValue,
-      testID: `buoy-routes-stat-${id}-value`,
-      children: value
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.statLabel,
-      children: label
-    })]
-  });
-}
-function RouteGroupView({
-  group,
-  isExpanded,
-  onToggleExpand,
-  onNavigate
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.groupContainer,
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: styles.groupHeader,
-      onPress: onToggleExpand,
-      activeOpacity: 0.7,
-      testID: sitemapGroupTestID(group.title),
-      accessibilityRole: "button",
-      accessibilityLabel: `${group.title}, ${group.routes.length} routes`,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.groupHeaderLeft,
-        children: [isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-          size: 14,
-          color: night.color.textSecondary
-        }) : /*#__PURE__*/_jsx(ChevronRight, {
-          size: 14,
-          color: night.color.textSecondary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.groupTitle,
-          children: group.title
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.groupBadge,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.groupCount,
-          testID: `${sitemapGroupTestID(group.title)}-count`,
-          children: group.routes.length
-        })
-      })]
-    }), group.description && /*#__PURE__*/_jsx(View, {
-      style: styles.groupDescription,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.groupDescriptionText,
-        children: group.description
-      })
-    }), isExpanded && /*#__PURE__*/_jsx(View, {
-      style: styles.routesList,
-      children: group.routes.map((route, index) => /*#__PURE__*/_jsx(RouteItemView, {
-        route: route,
-        onNavigate: onNavigate
-      }, `${route.path}-${index}`))
-    })]
-  });
-}
-function RouteItemView({
-  route,
-  depth = 0,
-  onNavigate
-}) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const hasChildren = route.children.length > 0;
-  const typeColor = getRouteTypeColor(route.type);
-  const canNavigate = route.type !== "layout" && route.type !== "group";
-  const testID = sitemapRouteTestID(route.path);
-
-  // Leaf routes (no children) have nothing to drill into — expanding would only
-  // reveal the Copy/Go actions, so show those inline instead of behind a toggle.
-  const isExpandable = hasChildren;
-  const showDetails = isExpandable ? isExpanded : true;
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.routeItem, {
-      marginLeft: depth * 12
-    }],
-    testID: testID,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.routeCard,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.routeHeader,
-        children: [isExpandable ? /*#__PURE__*/_jsxs(TouchableOpacity, {
-          style: styles.routeHeaderLeft,
-          onPress: () => setIsExpanded(!isExpanded),
-          activeOpacity: 0.7,
-          testID: `${testID}-toggle`,
-          accessibilityRole: "button",
-          accessibilityLabel: `${route.path}, ${route.type}, ${route.children.length} nested`,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.expandIndicator,
-            children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
-              size: 14,
-              color: night.color.textSecondary
-            }) : /*#__PURE__*/_jsx(ChevronRight, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.routePath,
-            numberOfLines: 3,
-            testID: `${testID}-path`,
-            children: route.path
-          })]
-        }) :
-        /*#__PURE__*/
-        // Non-toggling header for leaf routes (keeps the chevron column as a
-        // spacer so paths stay aligned with expandable siblings).
-        _jsxs(View, {
-          style: styles.routeHeaderLeft
-          // `accessible` as well as the label: a plain View is not an
-          // element, so without it the label is never announced and the
-          // path is read as a bare text node with no type beside it.
-          ,
-          accessible: true,
-          accessibilityLabel: `${route.path}, ${route.type}`,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.expandIndicator
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.routePath,
-            numberOfLines: 3,
-            testID: `${testID}-path`,
-            children: route.path
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.routeHeaderActions,
-          children: [hasChildren && /*#__PURE__*/_jsx(View, {
-            style: styles.childCountBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.childCountText,
-              testID: `${testID}-children-count`,
-              children: route.children.length
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.typeTag, {
-              backgroundColor: `${typeColor}15`,
-              borderColor: `${typeColor}40`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.typeText, {
-                color: typeColor
-              }],
-              testID: `${testID}-type`,
-              children: route.type.toUpperCase()
-            })
-          }), /*#__PURE__*/_jsx(InlineCopyButton, {
-            value: route.path,
-            buttonStyle: styles.iconAction,
-            testID: `${testID}-copy`
-          }), canNavigate && /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.goButton,
-            onPress: () => onNavigate(route),
-            activeOpacity: 0.7,
-            testID: `${testID}-go`,
-            accessibilityRole: "button",
-            accessibilityLabel: `Go to ${route.path}`,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.goButtonText,
-              children: "Go"
-            })
-          })]
-        })]
-      }), showDetails && hasChildren && /*#__PURE__*/_jsx(View, {
-        style: styles.childrenContainer,
-        children: route.children.map((child, index) => /*#__PURE__*/_jsx(RouteItemView, {
-          route: child,
-          depth: depth + 1,
-          onNavigate: onNavigate
-        }, `${child.path}-${index}`))
-      })]
-    })
-  });
-}
-
-// ============================================================================
-// Helpers
-// ============================================================================
-
-function getRouteTypeColor(type) {
-  switch (type) {
-    case "static":
-      return "#3B82F6";
-    // Blue
-    case "dynamic":
-      return "#F59E0B";
-    // Orange
-    case "catch-all":
-      return "#EC4899";
-    // Pink
-    case "index":
-      return "#10B981";
-    // Green
-    case "layout":
-      return "#8B5CF6";
-    // Purple
-    case "group":
-      return "#6366F1";
-    // Indigo
-    case "not-found":
-      return "#EF4444";
-    // Red
-    default:
-      return "#6B7280";
-    // Gray
-  }
-}
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  loadingText: {
-    color: night.color.textSecondary,
-    fontSize: 14,
-    fontFamily: monoFont,
-    textAlign: "center",
-    lineHeight: 20,
-    paddingHorizontal: 32,
-    maxWidth: 420
-  },
-  header: {
-    flexDirection: "column",
-    padding: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border,
-    gap: 12,
-    marginBottom: 8
-  },
-  actionsRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 12,
-    paddingBottom: 4
-  },
-  statsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8
-  },
-  statItem: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: "30%",
-    minWidth: 90,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    alignItems: "center"
-  },
-  statValue: {
-    fontSize: 18,
-    fontWeight: "800",
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  statLabel: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    marginTop: 4,
-    fontFamily: monoFont,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  actionWrapper: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 4,
-    minWidth: 48
-  },
-  actionWrapperDesktop: {
-    gap: 8,
-    minWidth: 72
-  },
-  actionButtonHeader: {
-    padding: 6,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated
-  },
-  actionButtonHeaderDesktop: {
-    padding: 12,
-    borderRadius: 8,
-    backgroundColor: night.color.surfaceElevated
-  },
-  iconButton: {
-    padding: 6,
-    borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  iconButtonDesktop: {
-    padding: 12,
-    borderRadius: 8,
-    backgroundColor: night.color.surfaceElevated
-  },
-  actionLabel: {
-    fontSize: 8,
-    color: night.color.textTertiary,
-    fontFamily: monoFont,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  actionLabelDesktop: {
-    fontSize: 12
-  },
-  refreshButtonDisabled: {
-    opacity: 0.5
-  },
-  metaFooter: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    marginTop: 16,
-    borderTopWidth: 1,
-    borderTopColor: night.color.border
-  },
-  metaText: {
-    fontSize: 12,
-    color: night.color.textSecondary,
-    fontFamily: monoFont
-  },
-  sourceBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 999,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    backgroundColor: night.color.surface
-  },
-  sourceText: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    textTransform: "capitalize",
-    fontFamily: monoFont
-  },
-  searchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 8,
-    gap: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border
-  },
-  searchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 14,
-    fontFamily: monoFont
-  },
-  clearButton: {
-    padding: 4
-  },
-  clearButtonText: {
-    color: night.color.textTertiary,
-    fontSize: 18
-  },
-  closeSearchButton: {
-    paddingHorizontal: 8,
-    paddingVertical: 4
-  },
-  closeSearchText: {
-    color: night.color.accent,
-    fontSize: 14,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollContent: {
-    paddingBottom: 8
-  },
-  emptyState: {
-    padding: 32,
-    alignItems: "center"
-  },
-  emptyText: {
-    color: night.color.textSecondary,
-    fontSize: 14,
-    fontFamily: monoFont
-  },
-  groupContainer: {
-    marginVertical: 4
-  },
-  groupHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: 12,
-    paddingHorizontal: 16,
-    backgroundColor: night.color.surface,
-    borderLeftWidth: 3,
-    borderLeftColor: night.color.fillTertiary
-  },
-  groupHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    flex: 1
-  },
-  groupTitle: {
-    fontSize: 12,
-    fontWeight: "700",
-    color: night.color.text,
-    fontFamily: monoFont,
-    textTransform: "uppercase",
-    letterSpacing: 0.8
-  },
-  groupBadge: {
-    backgroundColor: "#3B82F615",
-    borderColor: "#3B82F640",
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    minWidth: 24,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  groupCount: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: "#3B82F6",
-    fontFamily: monoFont
-  },
-  routesList: {
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  groupDescription: {
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: night.color.surfaceElevated,
-    borderLeftWidth: 3,
-    borderLeftColor: night.color.fillTertiary
-  },
-  groupDescriptionText: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    lineHeight: 16
-  },
-  routeItem: {
-    marginBottom: 6
-  },
-  routeCard: {
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 1
-    },
-    shadowOpacity: 0.05,
-    shadowRadius: 2,
-    elevation: 1
-  },
-  routeHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 7,
-    paddingHorizontal: 10,
-    gap: 8
-  },
-  expandIndicator: {
-    width: 18,
-    alignItems: "center"
-  },
-  routeHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    flex: 1
-  },
-  routePath: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.text,
-    fontFamily: monoFont,
-    flex: 1
-  },
-  routeHeaderActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  childCountBadge: {
-    backgroundColor: "#6B728015",
-    borderColor: "#6B728040",
-    borderWidth: 1,
-    borderRadius: 12,
-    paddingHorizontal: 7,
-    paddingVertical: 2,
-    minWidth: 22,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  childCountText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    fontFamily: monoFont
-  },
-  typeTag: {
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderWidth: 1
-  },
-  typeText: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  // Compact icon-sized Copy button in the header action cluster.
-  iconAction: {
-    width: 28,
-    height: 24,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  // Small "Go" pill in the header action cluster.
-  goButton: {
-    height: 24,
-    paddingHorizontal: 10,
-    borderRadius: 4,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: night.color.accentBorder
-  },
-  goButtonText: {
-    fontSize: 12,
-    color: night.color.accent,
-    fontFamily: monoFont,
-    fontWeight: "600"
-  },
-  childrenContainer: {
-    borderLeftWidth: 2,
-    borderLeftColor: night.color.border,
-    marginLeft: 16,
-    marginRight: 8,
-    marginTop: 2,
-    marginBottom: 8
-  }
-});
+Route: ${a.path}`,[{text:"Cancel",style:"cancel"},{text:s<U.length-1?"Next":"Navigate",onPress:m=>{if(m&&m.trim()){const I={...y,[M]:m.trim()};N(a,s+1,I)}else{T.alert("Invalid Value","Please enter a value for the parameter")}}}],"plain-text")},[L]);const A=w((a,s)=>{if(b){b(a);return}if(!$&&!s?.bypassPro){V(true);return}if(a.type==="layout"||a.type==="group"){T.alert("Cannot Navigate",`${a.type==="layout"?"Layouts":"Route groups"} are not navigable routes`);return}if(a.type==="dynamic"||a.type==="catch-all"){if(a.params.length===0){try{L.push(a.path)}catch(y){T.alert("Navigation Error",String(y))}return}N(a);return}try{L.push(a.path)}catch(y){T.alert("Navigation Error",String(y))}},[L,N,$,b]);const ne=w(()=>{A(Re,{bypassPro:true})},[A]);const ie=w(()=>{if(x)return;v(true);K();setTimeout(()=>v(false),400)},[x,K]);const le=H(()=>{if(!O)return"Awaiting route data";return`Updated ${Se(O)}`},[O]);const se=H(()=>{if(!G)return"Source: unknown";return`Source: ${G}`},[G]);const Q=H(()=>{if(p&&j.length>0){return[{title:"Search Results",icon:"",routes:j}]}return k},[p,j,k]);if(!te){return t(n,{style:[e.container,r],children:t(n,{style:e.loadingContainer,children:t(l,{style:e.loadingText,testID:"buoy-routes-sitemap-loading",children:oe?"Loading routes...":"Route sitemap isn't available on the dashboard \u2014 the route tree lives on the device. Use the Events tab to see navigation here."})})})}return i(n,{style:[e.container,r],children:[z&&i(n,{style:e.searchContainer,testID:"buoy-routes-sitemap-search-field",children:[t(q,{size:16,color:o.color.textTertiary}),t(ue,{style:e.searchInput,placeholder:"Search routes...",placeholderTextColor:o.color.placeholder,value:p,onChangeText:D,autoCapitalize:"none",autoCorrect:false,autoFocus:true,testID:"buoy-routes-sitemap-search",accessibilityLabel:"Search routes"}),p.length>0&&t(C,{onPress:()=>D(""),style:e.clearButton,testID:"buoy-routes-sitemap-search-clear",accessibilityRole:"button",accessibilityLabel:"Clear route search",children:t(l,{style:e.clearButtonText,children:"\u2715"})}),t(C,{style:e.closeSearchButton,onPress:()=>{h(false);D("")},testID:"buoy-routes-sitemap-search-done",accessibilityRole:"button",accessibilityLabel:"Done searching routes",children:t(l,{style:e.closeSearchText,children:"Done"})})]}),i(he,{testID:"buoy-routes-sitemap-scroll",style:e.scrollView,contentContainerStyle:e.scrollContent,children:[!z&&i(n,{style:e.header,children:[i(n,{style:e.actionsRow,children:[i(n,{style:[e.actionWrapper,d&&e.actionWrapperDesktop],children:[t(C,{style:[e.iconButton,d&&e.iconButtonDesktop],onPress:ne,accessibilityLabel:"Go to home route",accessibilityRole:"button",testID:"buoy-routes-sitemap-home",children:t(me,{size:F,color:o.color.textSecondary})}),t(l,{style:[e.actionLabel,d&&e.actionLabelDesktop],children:"Home"})]}),i(n,{style:[e.actionWrapper,d&&e.actionWrapperDesktop],children:[t(xe,{value:re,testID:"buoy-routes-sitemap-copy",size:d?F:14,buttonStyle:d?e.actionButtonHeaderDesktop:e.actionButtonHeader}),t(l,{style:[e.actionLabel,d&&e.actionLabelDesktop],children:"Copy"})]}),i(n,{style:[e.actionWrapper,d&&e.actionWrapperDesktop],children:[t(C,{style:[e.iconButton,d&&e.iconButtonDesktop,x&&e.refreshButtonDisabled],onPress:ie,disabled:x,testID:"buoy-routes-sitemap-refresh",accessibilityRole:"button",accessibilityLabel:"Refresh route tree",children:t(Ce,{size:F,color:x?o.color.textTertiary:o.color.textSecondary})}),t(l,{style:[e.actionLabel,d&&e.actionLabelDesktop],children:"Refresh"})]}),i(n,{style:[e.actionWrapper,d&&e.actionWrapperDesktop],children:[t(C,{style:[e.iconButton,d&&e.iconButtonDesktop],onPress:()=>h(true),testID:"buoy-routes-sitemap-search-open",accessibilityRole:"button",accessibilityLabel:"Search routes",children:t(q,{size:F,color:o.color.textSecondary})}),t(l,{style:[e.actionLabel,d&&e.actionLabelDesktop],children:"Search"})]})]}),i(n,{style:e.statsGrid,children:[t(R,{value:u.total,label:"Total",id:"total"}),t(R,{value:u.static,label:"Static",id:"static"}),t(R,{value:u.dynamic,label:"Dynamic",id:"dynamic"}),t(R,{value:u.catchAll,label:"Catch-All",id:"catch-all"}),t(R,{value:u.layouts,label:"Layouts",id:"layouts"}),t(R,{value:u.groups,label:"Groups",id:"groups"})]})]}),Q.length===0?t(pe,{testID:"buoy-routes-sitemap-empty",otto:"map",title:"No routes found",message:"Nothing in the router matches. Clear the search to see the whole tree."}):Q.map(a=>t(Le,{group:a,isExpanded:p.length>0||W.has(a.title),onToggleExpand:()=>ae(a.title),onNavigate:A},a.title)),i(n,{style:e.metaFooter,children:[t(l,{style:e.metaText,testID:"buoy-routes-sitemap-updated",children:le}),t(n,{style:e.sourceBadge,children:t(l,{style:e.sourceText,testID:"buoy-routes-sitemap-source",children:se})})]})]}),t(De,{visible:P,onClose:()=>V(false),featureName:"Route Navigation"})]})}function R({value:r,label:g,id:f}){return i(n,{style:e.statItem,testID:`buoy-routes-stat-${f}`,accessibilityLabel:`${g}, ${r}`,children:[t(l,{style:e.statValue,testID:`buoy-routes-stat-${f}-value`,children:r}),t(l,{style:e.statLabel,children:g})]})}function Le({group:r,isExpanded:g,onToggleExpand:f,onNavigate:S}){return i(n,{style:e.groupContainer,children:[i(C,{style:e.groupHeader,onPress:f,activeOpacity:.7,testID:Y(r.title),accessibilityRole:"button",accessibilityLabel:`${r.title}, ${r.routes.length} routes`,children:[i(n,{style:e.groupHeaderLeft,children:[g?t(J,{size:14,color:o.color.textSecondary}):t(X,{size:14,color:o.color.textSecondary}),t(l,{style:e.groupTitle,children:r.title})]}),t(n,{style:e.groupBadge,children:t(l,{style:e.groupCount,testID:`${Y(r.title)}-count`,children:r.routes.length})})]}),r.description&&t(n,{style:e.groupDescription,children:t(l,{style:e.groupDescriptionText,children:r.description})}),g&&t(n,{style:e.routesList,children:r.routes.map((b,p)=>t(ee,{route:b,onNavigate:S},`${b.path}-${p}`))})]})}function ee({route:r,depth:g=0,onNavigate:f}){const[S,b]=B(false);const p=r.children.length>0;const D=we(r.type);const z=r.type!=="layout"&&r.type!=="group";const h=Te(r.path);const W=p;const E=W?S:true;return t(n,{style:[e.routeItem,{marginLeft:g*12}],testID:h,children:i(n,{style:e.routeCard,children:[i(n,{style:e.routeHeader,children:[W?i(C,{style:e.routeHeaderLeft,onPress:()=>b(!S),activeOpacity:.7,testID:`${h}-toggle`,accessibilityRole:"button",accessibilityLabel:`${r.path}, ${r.type}, ${r.children.length} nested`,children:[t(n,{style:e.expandIndicator,children:S?t(J,{size:14,color:o.color.textSecondary}):t(X,{size:14,color:o.color.textSecondary})}),t(l,{style:e.routePath,numberOfLines:3,testID:`${h}-path`,children:r.path})]}):i(n,{style:e.routeHeaderLeft,accessible:true,accessibilityLabel:`${r.path}, ${r.type}`,children:[t(n,{style:e.expandIndicator}),t(l,{style:e.routePath,numberOfLines:3,testID:`${h}-path`,children:r.path})]}),i(n,{style:e.routeHeaderActions,children:[p&&t(n,{style:e.childCountBadge,children:t(l,{style:e.childCountText,testID:`${h}-children-count`,children:r.children.length})}),t(n,{style:[e.typeTag,{backgroundColor:`${D}15`,borderColor:`${D}40`}],children:t(l,{style:[e.typeText,{color:D}],testID:`${h}-type`,children:r.type.toUpperCase()})}),t(be,{value:r.path,buttonStyle:e.iconAction,testID:`${h}-copy`}),z&&t(C,{style:e.goButton,onPress:()=>f(r),activeOpacity:.7,testID:`${h}-go`,accessibilityRole:"button",accessibilityLabel:`Go to ${r.path}`,children:t(l,{style:e.goButtonText,children:"Go"})})]})]}),E&&p&&t(n,{style:e.childrenContainer,children:r.children.map((x,v)=>t(ee,{route:x,depth:g+1,onNavigate:f},`${x.path}-${v}`))})]})})}function we(r){switch(r){case"static":return"#3B82F6";case"dynamic":return"#F59E0B";case"catch-all":return"#EC4899";case"index":return"#10B981";case"layout":return"#8B5CF6";case"group":return"#6366F1";case"not-found":return"#EF4444";default:return"#6B7280"}}const e=ye.create({container:{flex:1,backgroundColor:"transparent"},loadingContainer:{flex:1,justifyContent:"center",alignItems:"center"},loadingText:{color:o.color.textSecondary,fontSize:14,fontFamily:c,textAlign:"center",lineHeight:20,paddingHorizontal:32,maxWidth:420},header:{flexDirection:"column",padding:8,borderBottomWidth:1,borderBottomColor:o.color.border,gap:12,marginBottom:8},actionsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:12,paddingBottom:4},statsGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},statItem:{flexGrow:1,flexShrink:1,flexBasis:"30%",minWidth:90,backgroundColor:o.color.surface,borderRadius:8,paddingVertical:10,paddingHorizontal:12,alignItems:"center"},statValue:{fontSize:18,fontWeight:"800",color:o.color.text,fontFamily:c},statLabel:{fontSize:10,color:o.color.textTertiary,marginTop:4,fontFamily:c,textTransform:"uppercase",letterSpacing:.5},actionWrapper:{flex:1,alignItems:"center",justifyContent:"center",gap:4,minWidth:48},actionWrapperDesktop:{gap:8,minWidth:72},actionButtonHeader:{padding:6,borderRadius:4,backgroundColor:o.color.surfaceElevated},actionButtonHeaderDesktop:{padding:12,borderRadius:8,backgroundColor:o.color.surfaceElevated},iconButton:{padding:6,borderRadius:4,alignItems:"center",justifyContent:"center"},iconButtonDesktop:{padding:12,borderRadius:8,backgroundColor:o.color.surfaceElevated},actionLabel:{fontSize:8,color:o.color.textTertiary,fontFamily:c,textTransform:"uppercase",letterSpacing:.5},actionLabelDesktop:{fontSize:12},refreshButtonDisabled:{opacity:.5},metaFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:8,paddingHorizontal:16,paddingVertical:16,marginTop:16,borderTopWidth:1,borderTopColor:o.color.border},metaText:{fontSize:12,color:o.color.textSecondary,fontFamily:c},sourceBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:999,borderWidth:1,borderColor:o.color.border,backgroundColor:o.color.surface},sourceText:{fontSize:11,color:o.color.textSecondary,textTransform:"capitalize",fontFamily:c},searchContainer:{flexDirection:"row",alignItems:"center",padding:8,gap:8,borderBottomWidth:1,borderBottomColor:o.color.border},searchInput:{flex:1,color:o.color.text,fontSize:14,fontFamily:c},clearButton:{padding:4},clearButtonText:{color:o.color.textTertiary,fontSize:18},closeSearchButton:{paddingHorizontal:8,paddingVertical:4},closeSearchText:{color:o.color.accent,fontSize:14,fontWeight:"600",fontFamily:c},scrollView:{flex:1},scrollContent:{paddingBottom:8},emptyState:{padding:32,alignItems:"center"},emptyText:{color:o.color.textSecondary,fontSize:14,fontFamily:c},groupContainer:{marginVertical:4},groupHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:12,paddingHorizontal:16,backgroundColor:o.color.surface,borderLeftWidth:3,borderLeftColor:o.color.fillTertiary},groupHeaderLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1},groupTitle:{fontSize:12,fontWeight:"700",color:o.color.text,fontFamily:c,textTransform:"uppercase",letterSpacing:.8},groupBadge:{backgroundColor:"#3B82F615",borderColor:"#3B82F640",borderWidth:1,borderRadius:12,paddingHorizontal:8,paddingVertical:3,minWidth:24,alignItems:"center",justifyContent:"center"},groupCount:{fontSize:11,fontWeight:"600",color:"#3B82F6",fontFamily:c},routesList:{backgroundColor:"transparent"},groupDescription:{paddingHorizontal:16,paddingVertical:8,marginBottom:8,backgroundColor:o.color.surfaceElevated,borderLeftWidth:3,borderLeftColor:o.color.fillTertiary},groupDescriptionText:{fontSize:11,color:o.color.textSecondary,fontFamily:c,lineHeight:16},routeItem:{marginBottom:6},routeCard:{backgroundColor:o.color.surface,borderRadius:6,borderWidth:1,borderColor:o.color.border,overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2,elevation:1},routeHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:10,gap:8},expandIndicator:{width:18,alignItems:"center"},routeHeaderLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1},routePath:{fontSize:13,fontWeight:"600",color:o.color.text,fontFamily:c,flex:1},routeHeaderActions:{flexDirection:"row",alignItems:"center",gap:6},childCountBadge:{backgroundColor:"#6B728015",borderColor:"#6B728040",borderWidth:1,borderRadius:12,paddingHorizontal:7,paddingVertical:2,minWidth:22,alignItems:"center",justifyContent:"center"},childCountText:{fontSize:11,fontWeight:"600",color:o.color.textSecondary,fontFamily:c},typeTag:{borderRadius:4,paddingHorizontal:6,paddingVertical:2,borderWidth:1},typeText:{fontSize:10,fontWeight:"600",fontFamily:c},iconAction:{width:28,height:24,borderRadius:4,backgroundColor:o.color.surfaceElevated,borderWidth:1,borderColor:o.color.border,alignItems:"center",justifyContent:"center"},goButton:{height:24,paddingHorizontal:10,borderRadius:4,alignItems:"center",justifyContent:"center",backgroundColor:o.color.accentSoft,borderWidth:1,borderColor:o.color.accentBorder},goButtonText:{fontSize:12,color:o.color.accent,fontFamily:c,fontWeight:"600"},childrenContainer:{borderLeftWidth:2,borderLeftColor:o.color.border,marginLeft:16,marginRight:8,marginTop:2,marginBottom:8}});