@buoy-gg/route-events 1.7.2

package/lib/commonjs/components/RouteEventDetailContent.js

@@ -0,0 +1,492 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RouteEventDetailContent = RouteEventDetailContent;
+exports.RouteEventDetailFooter = RouteEventDetailFooter;
+var _reactNative = require("react-native");
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+function RouteEventDetailContent({
+  conversation,
+  selectedEventIndex = 0,
+  onEventIndexChange = () => {},
+  disableInternalFooter = false
+}) {
+  // Internal view state
+  const [internalActiveView, setInternalActiveView] = (0, _react.useState)("current");
+
+  // Track if preferences have been loaded
+  const hasLoadedPreferences = (0, _react.useRef)(false);
+
+  // Load saved preferences on mount
+  (0, _react.useEffect)(() => {
+    if (hasLoadedPreferences.current) return;
+    const loadPreferences = async () => {
+      try {
+        // Load detail view preference (current/diff)
+        const savedDetailView = await (0, _sharedUi.safeGetItem)(_sharedUi.devToolsStorageKeys.routeEvents.detailView());
+        if (savedDetailView === "current" || savedDetailView === "diff") {
+          setInternalActiveView(savedDetailView);
+        }
+        hasLoadedPreferences.current = true;
+      } catch (error) {
+        // Failed to load view preferences
+      }
+    };
+    loadPreferences();
+  }, []);
+
+  // Save detail view preference when changed
+  const handleViewChange = (0, _react.useCallback)(async view => {
+    setInternalActiveView(view);
+    try {
+      await (0, _sharedUi.safeSetItem)(_sharedUi.devToolsStorageKeys.routeEvents.detailView(), view);
+    } catch (error) {
+      // Failed to save detail view preference
+    }
+  }, []);
+  const renderRouteContent = (event, label) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.valueContent,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.valueHeader,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.valueLabel,
+          children: label
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.valueBox,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          title: "",
+          data: {
+            pathname: event.pathname,
+            segments: event.segments,
+            params: event.params,
+            timestamp: new Date(event.timestamp).toISOString()
+          },
+          showTypeFilter: false
+        })
+      })]
+    });
+  };
+
+  // Get all events sorted by time
+  const navigationItems = conversation.events.sort((a, b) => a.timestamp - b.timestamp);
+  const totalEvents = navigationItems.length;
+
+  // Precise time HH:MM:SS.mmm
+  const formatTimeWithMs = (0, _react.useCallback)(timestamp => {
+    const date = new Date(timestamp);
+    const h = String(date.getHours()).padStart(2, "0");
+    const m = String(date.getMinutes()).padStart(2, "0");
+    const s = String(date.getSeconds()).padStart(2, "0");
+    const ms = String(date.getMilliseconds()).padStart(3, "0");
+    return `${h}:${m}:${s}.${ms}`;
+  }, []);
+
+  // Render current value tab
+  const renderCurrentValue = () => {
+    const selectedEvent = navigationItems[selectedEventIndex];
+    const eventToShow = selectedEvent ?? conversation.lastEvent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.fullPageSection,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.contentCard,
+        children: renderRouteContent(eventToShow, "CURRENT ROUTE STATE")
+      })
+    });
+  };
+
+  // Render diff tab
+  const renderDiff = () => {
+    if (navigationItems.length === 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
+          size: 32,
+          color: _sharedUi.buoyColors.textMuted
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.emptyText,
+          children: "No changes to display"
+        })]
+      });
+    }
+    const prevIndex = Math.max(0, selectedEventIndex - 1);
+    const currentIndex = selectedEventIndex;
+    const previousEvent = navigationItems[prevIndex];
+    const currentEvent = navigationItems[currentIndex];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.fullPageSection,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.diffSection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.diffSectionTitle,
+            children: "PREVIOUS"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.contentCard,
+            children: renderRouteContent(previousEvent, `Event #${prevIndex + 1}`)
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.diffDivider
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.diffSection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.diffSectionTitle,
+            children: "CURRENT"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.contentCard,
+            children: renderRouteContent(currentEvent, `Event #${currentIndex + 1}`)
+          })]
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.contentOnly, {
+        flex: 1,
+        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.viewToggleContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: [styles.viewToggleCard, internalActiveView === "current" && styles.viewToggleCardActive],
+          onPress: () => handleViewChange("current"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Navigation, {
+              size: 16,
+              color: internalActiveView === "current" ? _sharedUi.buoyColors.primary : _sharedUi.buoyColors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.viewToggleLabel, internalActiveView === "current" && styles.viewToggleLabelActive],
+              children: "CURRENT STATE"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.viewToggleDescription, internalActiveView === "current" && {
+              color: _sharedUi.buoyColors.text
+            }],
+            children: "View the current route state"
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: [styles.viewToggleCard, internalActiveView === "diff" && styles.viewToggleCardActive],
+          onPress: () => handleViewChange("diff"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.GitBranch, {
+              size: 16,
+              color: internalActiveView === "diff" ? _sharedUi.buoyColors.success : _sharedUi.buoyColors.textSecondary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.viewToggleLabel, internalActiveView === "diff" && styles.viewToggleLabelActive],
+              children: "DIFF VIEW"
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.viewToggleDescription, internalActiveView === "diff" && {
+              color: _sharedUi.buoyColors.text
+            }],
+            children: "Compare changes between events"
+          })]
+        })]
+      }), internalActiveView === "current" && renderCurrentValue(), internalActiveView === "diff" && renderDiff()]
+    }), totalEvents > 1 && !disableInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.stickyFooter,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        onPress: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
+        disabled: selectedEventIndex === 0,
+        style: [styles.navButton, selectedEventIndex === 0 && styles.navButtonDisabled],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
+          size: 20,
+          color: selectedEventIndex === 0 ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.text
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.navButtonText, selectedEventIndex === 0 && styles.navButtonTextDisabled],
+          children: "Previous"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.eventCounterContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.eventCounter,
+          children: ["Event ", selectedEventIndex + 1, " of ", totalEvents]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.eventTimestamp,
+          children: (0, _sharedUi.formatRelativeTime)(new Date(navigationItems[selectedEventIndex]?.timestamp))
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        onPress: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
+        disabled: selectedEventIndex === totalEvents - 1,
+        style: [styles.navButton, selectedEventIndex === totalEvents - 1 && styles.navButtonDisabled],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.navButtonText, selectedEventIndex === totalEvents - 1 && styles.navButtonTextDisabled],
+          children: "Next"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+          size: 20,
+          color: selectedEventIndex === totalEvents - 1 ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.text
+        })]
+      })]
+    })]
+  });
+}
+
+// External footer component to be rendered by the modal outside the ScrollView
+function RouteEventDetailFooter({
+  conversation,
+  selectedEventIndex = 0,
+  onEventIndexChange = () => {}
+}) {
+  const navigationItems = conversation.events.sort((a, b) => a.timestamp - b.timestamp);
+  const totalEvents = navigationItems.length;
+  if (totalEvents <= 1) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.externalFooterBar,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      onPress: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
+      disabled: selectedEventIndex === 0,
+      style: [styles.navButton, selectedEventIndex === 0 && styles.navButtonDisabled],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronLeft, {
+        size: 20,
+        color: selectedEventIndex === 0 ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.text
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.navButtonText, selectedEventIndex === 0 && styles.navButtonTextDisabled],
+        children: "Previous"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.eventCounterContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        style: styles.eventCounter,
+        children: ["Event ", selectedEventIndex + 1, " of ", totalEvents]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.eventTimestamp,
+        children: (0, _sharedUi.formatRelativeTime)(new Date(navigationItems[selectedEventIndex]?.timestamp))
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      onPress: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
+      disabled: selectedEventIndex === totalEvents - 1,
+      style: [styles.navButton, selectedEventIndex === totalEvents - 1 && styles.navButtonDisabled],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.navButtonText, selectedEventIndex === totalEvents - 1 && styles.navButtonTextDisabled],
+        children: "Next"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronRight, {
+        size: 20,
+        color: selectedEventIndex === totalEvents - 1 ? _sharedUi.buoyColors.textMuted : _sharedUi.buoyColors.text
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  contentOnly: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  stickyFooter: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  externalFooterBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: _sharedUi.buoyColors.base,
+    borderTopWidth: 1,
+    borderTopColor: _sharedUi.buoyColors.border,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5
+  },
+  fullPageSection: {
+    flex: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  emptyState: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 48
+  },
+  emptyText: {
+    marginTop: 12,
+    fontSize: 14,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  valueContent: {
+    marginTop: 4
+  },
+  valueHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  valueLabel: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    fontWeight: "600",
+    textTransform: "uppercase"
+  },
+  valueBox: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 8
+  },
+  navButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.buoyColors.card,
+    minWidth: 100,
+    justifyContent: "center"
+  },
+  navButtonDisabled: {
+    opacity: 0.3
+  },
+  navButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  navButtonTextDisabled: {
+    color: _sharedUi.buoyColors.textMuted
+  },
+  eventCounterContainer: {
+    alignItems: "center"
+  },
+  eventCounter: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  eventTimestamp: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace",
+    marginTop: 2
+  },
+  contentCard: {
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.04,
+    shadowRadius: 16,
+    elevation: 2
+  },
+  // View Toggle Cards
+  viewToggleContainer: {
+    flexDirection: "row",
+    gap: 12,
+    padding: 14,
+    backgroundColor: _sharedUi.buoyColors.base
+  },
+  viewToggleCard: {
+    flex: 1,
+    backgroundColor: _sharedUi.buoyColors.card,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.border,
+    padding: 14,
+    gap: 8
+  },
+  viewToggleCardActive: {
+    borderWidth: 1.5,
+    borderColor: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    shadowColor: _sharedUi.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  viewToggleContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  viewToggleLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: _sharedUi.buoyColors.textSecondary,
+    textTransform: "uppercase"
+  },
+  viewToggleLabelActive: {
+    color: _sharedUi.buoyColors.text
+  },
+  viewToggleDescription: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textMuted,
+    lineHeight: 16
+  },
+  // Diff view styles
+  diffContainer: {
+    gap: 16
+  },
+  diffSection: {
+    gap: 8
+  },
+  diffSectionTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    paddingHorizontal: 4
+  },
+  diffDivider: {
+    height: 1,
+    backgroundColor: _sharedUi.buoyColors.border,
+    marginVertical: 8
+  }
+});

package/lib/commonjs/components/RouteEventExpandedContent.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RouteEventExpandedContent = RouteEventExpandedContent;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * RouteEventExpandedContent - Expanded view for route event details
+ *
+ * Shows 3 organized sections:
+ * - Section A: Route Information (Template, From, To)
+ * - Section B: Timing Information (Duration, Time)
+ * - Section C: Parameters & Metadata (Segments, Parameters, Visit count)
+ */
+
+// Format duration in milliseconds to human-readable string
+function formatDuration(ms) {
+  if (ms < 1000) {
+    return `${ms}ms`;
+  }
+  if (ms < 60000) {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+  const minutes = Math.floor(ms / 60000);
+  const seconds = (ms % 60000 / 1000).toFixed(0);
+  return `${minutes}m ${seconds}s`;
+}
+function RouteEventExpandedContent({
+  event,
+  visitNumber,
+  routeTemplate
+}) {
+  const hasParams = event.params && Object.keys(event.params).length > 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [routeTemplate && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "Template:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: routeTemplate
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
+          value: routeTemplate,
+          buttonStyle: styles.copyButton
+        })]
+      }), event.previousPathname && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "From:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: event.previousPathname
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
+          value: event.previousPathname,
+          buttonStyle: styles.copyButton
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "To:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: event.pathname
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
+          value: event.pathname,
+          buttonStyle: styles.copyButton
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [event.timeSincePrevious !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "Duration:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: formatDuration(event.timeSincePrevious)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "Time:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: new Date(event.timestamp).toLocaleString()
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [event.segments && event.segments.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "Segments:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: event.segments.join(' → ')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
+          value: JSON.stringify(event.segments),
+          buttonStyle: styles.copyButton
+        })]
+      }), hasParams && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.dataViewerContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.dataViewerHeader,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.dataViewerTitle,
+            children: ["Parameters (", Object.keys(event.params).length, ")"]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InlineCopyButton, {
+            value: JSON.stringify(event.params, null, 2),
+            buttonStyle: styles.copyButton
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          data: event.params,
+          title: "",
+          showTypeFilter: false
+        })]
+      }), visitNumber > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.detailLabel,
+          children: "Visited:"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.detailValue,
+          children: [visitNumber, " time", visitNumber !== 1 ? 's' : '']
+        })]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    gap: 12
+  },
+  section: {
+    gap: 8
+  },
+  detailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  detailLabel: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    minWidth: 70
+  },
+  detailValue: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.text,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  copyButton: {
+    padding: 4,
+    borderRadius: 4
+  },
+  dataViewerContainer: {
+    marginTop: 4
+  },
+  dataViewerHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 8
+  },
+  dataViewerTitle: {
+    fontSize: 11,
+    color: _sharedUi.buoyColors.textSecondary,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  }
+});