@buoy-gg/route-events 1.7.2

package/lib/module/components/RoutesSitemap.js

@@ -0,0 +1,944 @@
+"use strict";
+
+/**
+ * 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 } from "react";
+import { View, Text, TextInput, TouchableOpacity, ScrollView, StyleSheet, Alert } from "react-native";
+import { useRouter } from "expo-router";
+import { Search, ChevronDown, ChevronRight, InlineCopyButton, ToolbarCopyButton, RefreshCw, formatRelativeTime, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
+
+// Lazy load the license hooks to avoid circular dependencies
+let _useIsPro = null;
+let _licenseLoadAttempted = false;
+function loadLicenseModule() {
+  if (_licenseLoadAttempted) return;
+  _licenseLoadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+    }
+  } catch {
+    // License package not available
+  }
+}
+function getUseIsPro() {
+  loadLicenseModule();
+  return _useIsPro ?? (() => false);
+}
+import { useRouteSitemap } from "../useRouteSitemap";
+
+// ============================================================================
+// Types
+// ============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function RoutesSitemap({
+  style
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [expandedGroups, setExpandedGroups] = useState(new Set(["Root Routes", "Dynamic Routes"]));
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  // Check Pro status internally
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+  const router = useRouter();
+  const {
+    groups,
+    stats,
+    isLoaded,
+    filteredRoutes,
+    routes,
+    refresh,
+    lastUpdatedAt,
+    source
+  } = useRouteSitemap({
+    searchQuery,
+    sortBy: "path"
+  });
+
+  // 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 => {
+    // Gate behind Pro
+    if (!isPro) {
+      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]);
+  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,
+          children: "Loading routes..."
+        })
+      })
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [!isSearching ? /*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.actionsRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(ToolbarCopyButton, {
+            value: copyAllData,
+            buttonStyle: styles.actionButtonHeader
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.actionLabel,
+            children: "Copy"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.iconButton, isRefreshing && styles.refreshButtonDisabled],
+            onPress: handleManualRefresh,
+            disabled: isRefreshing,
+            children: /*#__PURE__*/_jsx(RefreshCw, {
+              size: 16,
+              color: isRefreshing ? buoyColors.textMuted : buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.actionLabel,
+            children: "Refresh"
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actionWrapper,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            style: styles.iconButton,
+            onPress: () => setIsSearching(true),
+            children: /*#__PURE__*/_jsx(Search, {
+              size: 16,
+              color: buoyColors.textSecondary
+            })
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.actionLabel,
+            children: "Search"
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.statsGrid,
+        children: [/*#__PURE__*/_jsx(StatItem, {
+          value: stats.total,
+          label: "Total"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.static,
+          label: "Static"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.dynamic,
+          label: "Dynamic"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.catchAll,
+          label: "Catch-All"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.layouts,
+          label: "Layouts"
+        }), /*#__PURE__*/_jsx(StatItem, {
+          value: stats.groups,
+          label: "Groups"
+        })]
+      })]
+    }) :
+    /*#__PURE__*/
+    /* Search mode - full width search bar */
+    _jsxs(View, {
+      style: styles.searchContainer,
+      children: [/*#__PURE__*/_jsx(Search, {
+        size: 16,
+        color: buoyColors.textMuted
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: styles.searchInput,
+        placeholder: "Search routes...",
+        placeholderTextColor: buoyColors.textMuted,
+        value: searchQuery,
+        onChangeText: setSearchQuery,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        autoFocus: true
+      }), searchQuery.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setSearchQuery(""),
+        style: styles.clearButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.clearButtonText,
+          children: "\u2715"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.closeSearchButton,
+        onPress: () => {
+          setIsSearching(false);
+          setSearchQuery("");
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.closeSearchText,
+          children: "Done"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.scrollView,
+      contentContainerStyle: styles.scrollContent,
+      children: [displayGroups.length === 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.emptyState,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: "No routes found"
+        })
+      }) : 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,
+          children: lastRefreshLabel
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.sourceBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.sourceText,
+            children: sourceLabel
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
+      visible: showUpgradeModal,
+      onClose: () => setShowUpgradeModal(false),
+      featureName: "Route Navigation"
+    })]
+  });
+}
+
+// ============================================================================
+// Sub-components
+// ============================================================================
+
+function StatItem({
+  value,
+  label
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.statItem,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.statValue,
+      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,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.groupHeaderLeft,
+        children: [isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+          size: 14,
+          color: buoyColors.textSecondary
+        }) : /*#__PURE__*/_jsx(ChevronRight, {
+          size: 14,
+          color: buoyColors.textSecondary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.groupTitle,
+          children: group.title
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.groupBadge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.groupCount,
+          children: group.routes.length
+        })
+      })]
+    }), isExpanded && /*#__PURE__*/_jsxs(View, {
+      style: styles.routesList,
+      children: [group.description && /*#__PURE__*/_jsx(View, {
+        style: styles.groupDescription,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.groupDescriptionText,
+          children: group.description
+        })
+      }), 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 hasParams = route.params.length > 0;
+  const typeColor = getRouteTypeColor(route.type);
+  const canNavigate = route.type !== "layout" && route.type !== "group";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.routeItem, {
+      marginLeft: depth * 12
+    }],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.routeCard,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.routeHeaderLeft,
+        onPress: () => setIsExpanded(!isExpanded),
+        activeOpacity: 0.7,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.expandIndicator,
+          children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+            size: 14,
+            color: buoyColors.textSecondary
+          }) : /*#__PURE__*/_jsx(ChevronRight, {
+            size: 14,
+            color: buoyColors.textSecondary
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.routePath,
+          numberOfLines: 1,
+          children: route.path
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.routeHeaderActions,
+        children: [hasChildren && /*#__PURE__*/_jsx(View, {
+          style: styles.childCountBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.childCountText,
+            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
+            }],
+            children: route.type.toUpperCase()
+          })
+        })]
+      })]
+    }), isExpanded && /*#__PURE__*/_jsxs(View, {
+      style: styles.routeDetails,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.routeButtons,
+        children: [/*#__PURE__*/_jsx(InlineCopyButton, {
+          value: route.path,
+          buttonStyle: styles.actionButton
+        }), canNavigate && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.actionButton, styles.navigateButton],
+          onPress: () => onNavigate(route),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.navigateButtonText,
+            children: "Go"
+          })
+        })]
+      }), hasParams && /*#__PURE__*/_jsxs(View, {
+        style: styles.paramsContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.paramsLabel,
+          children: "Parameters:"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.paramsRow,
+          children: route.params.map(param => /*#__PURE__*/_jsx(View, {
+            style: styles.paramTag,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.paramText,
+              children: param
+            })
+          }, param))
+        })]
+      }), 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,
+    backgroundColor: buoyColors.base
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  loadingText: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  header: {
+    flexDirection: "column",
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border,
+    gap: 12
+  },
+  actionsRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: 12,
+    paddingBottom: 4
+  },
+  statsGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  statItem: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "30%",
+    minWidth: 90,
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: "center"
+  },
+  statValue: {
+    fontSize: 18,
+    fontWeight: "800",
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  statLabel: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 4,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  actionWrapper: {
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 4,
+    minWidth: 48
+  },
+  actionButtonHeader: {
+    padding: 6,
+    borderRadius: 4,
+    backgroundColor: buoyColors.input
+  },
+  iconButton: {
+    padding: 6,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionLabel: {
+    fontSize: 8,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  refreshButtonDisabled: {
+    opacity: 0.5
+  },
+  metaFooter: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    marginTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border
+  },
+  metaText: {
+    fontSize: 12,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  sourceBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    backgroundColor: buoyColors.card
+  },
+  sourceText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    textTransform: "capitalize",
+    fontFamily: "monospace"
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    gap: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border
+  },
+  searchInput: {
+    flex: 1,
+    color: buoyColors.text,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  clearButton: {
+    padding: 4
+  },
+  clearButtonText: {
+    color: buoyColors.textMuted,
+    fontSize: 18
+  },
+  closeSearchButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4
+  },
+  closeSearchText: {
+    color: buoyColors.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingVertical: 8
+  },
+  emptyState: {
+    padding: 32,
+    alignItems: "center"
+  },
+  emptyText: {
+    color: buoyColors.textSecondary,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  groupContainer: {
+    marginVertical: 4
+  },
+  groupHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: 12,
+    paddingHorizontal: 16,
+    backgroundColor: buoyColors.card,
+    borderLeftWidth: 3,
+    borderLeftColor: buoyColors.textSecondary
+  },
+  groupHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  groupTitle: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    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: "monospace"
+  },
+  routesList: {
+    backgroundColor: buoyColors.base
+  },
+  groupDescription: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    marginBottom: 8,
+    backgroundColor: buoyColors.input,
+    borderLeftWidth: 3,
+    borderLeftColor: buoyColors.textSecondary
+  },
+  groupDescriptionText: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    lineHeight: 16
+  },
+  routeItem: {
+    marginBottom: 6
+  },
+  routeCard: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1
+  },
+  expandIndicator: {
+    width: 20,
+    alignItems: "center"
+  },
+  routeHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1
+  },
+  routePath: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    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: "#6B7280",
+    fontFamily: "monospace"
+  },
+  typeTag: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderWidth: 1
+  },
+  typeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  routeDetails: {
+    paddingHorizontal: 12,
+    paddingTop: 8,
+    paddingBottom: 12,
+    gap: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    marginTop: -6
+  },
+  paramsContainer: {
+    gap: 6
+  },
+  paramsLabel: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    marginBottom: 4
+  },
+  paramsRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 6
+  },
+  paramTag: {
+    backgroundColor: "#F59E0B15",
+    borderColor: "#F59E0B40",
+    borderWidth: 1,
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  paramText: {
+    fontSize: 10,
+    color: "#F59E0B",
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  routeButtons: {
+    flexDirection: "row",
+    gap: 6,
+    marginBottom: 12
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: buoyColors.input,
+    borderRadius: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  actionButtonText: {
+    fontSize: 12,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  navigateButton: {
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "40"
+  },
+  navigateButtonText: {
+    fontSize: 12,
+    color: buoyColors.primary,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  },
+  childrenContainer: {
+    borderLeftWidth: 2,
+    borderLeftColor: buoyColors.border,
+    marginLeft: 16
+  }
+});