@buoy-gg/route-events 1.7.2

package/lib/module/components/RouteEventDetailContent.js

@@ -0,0 +1,487 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { formatRelativeTime, devToolsStorageKeys, ChevronLeft, ChevronRight, AlertCircle, Navigation as NavigationIcon, GitBranch, safeGetItem, safeSetItem, buoyColors } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function RouteEventDetailContent({
+  conversation,
+  selectedEventIndex = 0,
+  onEventIndexChange = () => {},
+  disableInternalFooter = false
+}) {
+  // Internal view state
+  const [internalActiveView, setInternalActiveView] = useState("current");
+
+  // Track if preferences have been loaded
+  const hasLoadedPreferences = useRef(false);
+
+  // Load saved preferences on mount
+  useEffect(() => {
+    if (hasLoadedPreferences.current) return;
+    const loadPreferences = async () => {
+      try {
+        // Load detail view preference (current/diff)
+        const savedDetailView = await safeGetItem(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 = useCallback(async view => {
+    setInternalActiveView(view);
+    try {
+      await safeSetItem(devToolsStorageKeys.routeEvents.detailView(), view);
+    } catch (error) {
+      // Failed to save detail view preference
+    }
+  }, []);
+  const renderRouteContent = (event, label) => {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.valueContent,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.valueHeader,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.valueLabel,
+          children: label
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.valueBox,
+        children: /*#__PURE__*/_jsx(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 = 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__*/_jsx(View, {
+      style: styles.fullPageSection,
+      children: /*#__PURE__*/_jsx(View, {
+        style: styles.contentCard,
+        children: renderRouteContent(eventToShow, "CURRENT ROUTE STATE")
+      })
+    });
+  };
+
+  // Render diff tab
+  const renderDiff = () => {
+    if (navigationItems.length === 0) {
+      return /*#__PURE__*/_jsxs(View, {
+        style: styles.emptyState,
+        children: [/*#__PURE__*/_jsx(AlertCircle, {
+          size: 32,
+          color: buoyColors.textMuted
+        }), /*#__PURE__*/_jsx(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__*/_jsx(ScrollView, {
+      style: styles.fullPageSection,
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.diffContainer,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.diffSection,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.diffSectionTitle,
+            children: "PREVIOUS"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.contentCard,
+            children: renderRouteContent(previousEvent, `Event #${prevIndex + 1}`)
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.diffDivider
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.diffSection,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.diffSectionTitle,
+            children: "CURRENT"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.contentCard,
+            children: renderRouteContent(currentEvent, `Event #${currentIndex + 1}`)
+          })]
+        })]
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.contentOnly, {
+        flex: 1,
+        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.viewToggleContainer,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.viewToggleCard, internalActiveView === "current" && styles.viewToggleCardActive],
+          onPress: () => handleViewChange("current"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/_jsx(NavigationIcon, {
+              size: 16,
+              color: internalActiveView === "current" ? buoyColors.primary : buoyColors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.viewToggleLabel, internalActiveView === "current" && styles.viewToggleLabelActive],
+              children: "CURRENT STATE"
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.viewToggleDescription, internalActiveView === "current" && {
+              color: buoyColors.text
+            }],
+            children: "View the current route state"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.viewToggleCard, internalActiveView === "diff" && styles.viewToggleCardActive],
+          onPress: () => handleViewChange("diff"),
+          activeOpacity: 0.8,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.viewToggleContent,
+            children: [/*#__PURE__*/_jsx(GitBranch, {
+              size: 16,
+              color: internalActiveView === "diff" ? buoyColors.success : buoyColors.textSecondary
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.viewToggleLabel, internalActiveView === "diff" && styles.viewToggleLabelActive],
+              children: "DIFF VIEW"
+            })]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.viewToggleDescription, internalActiveView === "diff" && {
+              color: buoyColors.text
+            }],
+            children: "Compare changes between events"
+          })]
+        })]
+      }), internalActiveView === "current" && renderCurrentValue(), internalActiveView === "diff" && renderDiff()]
+    }), totalEvents > 1 && !disableInternalFooter && /*#__PURE__*/_jsxs(View, {
+      style: styles.stickyFooter,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        onPress: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
+        disabled: selectedEventIndex === 0,
+        style: [styles.navButton, selectedEventIndex === 0 && styles.navButtonDisabled],
+        children: [/*#__PURE__*/_jsx(ChevronLeft, {
+          size: 20,
+          color: selectedEventIndex === 0 ? buoyColors.textMuted : buoyColors.text
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.navButtonText, selectedEventIndex === 0 && styles.navButtonTextDisabled],
+          children: "Previous"
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.eventCounterContainer,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.eventCounter,
+          children: ["Event ", selectedEventIndex + 1, " of ", totalEvents]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.eventTimestamp,
+          children: formatRelativeTime(new Date(navigationItems[selectedEventIndex]?.timestamp))
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        onPress: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
+        disabled: selectedEventIndex === totalEvents - 1,
+        style: [styles.navButton, selectedEventIndex === totalEvents - 1 && styles.navButtonDisabled],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.navButtonText, selectedEventIndex === totalEvents - 1 && styles.navButtonTextDisabled],
+          children: "Next"
+        }), /*#__PURE__*/_jsx(ChevronRight, {
+          size: 20,
+          color: selectedEventIndex === totalEvents - 1 ? buoyColors.textMuted : buoyColors.text
+        })]
+      })]
+    })]
+  });
+}
+
+// External footer component to be rendered by the modal outside the ScrollView
+export 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__*/_jsxs(View, {
+    style: styles.externalFooterBar,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      onPress: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
+      disabled: selectedEventIndex === 0,
+      style: [styles.navButton, selectedEventIndex === 0 && styles.navButtonDisabled],
+      children: [/*#__PURE__*/_jsx(ChevronLeft, {
+        size: 20,
+        color: selectedEventIndex === 0 ? buoyColors.textMuted : buoyColors.text
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.navButtonText, selectedEventIndex === 0 && styles.navButtonTextDisabled],
+        children: "Previous"
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.eventCounterContainer,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        style: styles.eventCounter,
+        children: ["Event ", selectedEventIndex + 1, " of ", totalEvents]
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.eventTimestamp,
+        children: formatRelativeTime(new Date(navigationItems[selectedEventIndex]?.timestamp))
+      })]
+    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      onPress: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
+      disabled: selectedEventIndex === totalEvents - 1,
+      style: [styles.navButton, selectedEventIndex === totalEvents - 1 && styles.navButtonDisabled],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.navButtonText, selectedEventIndex === totalEvents - 1 && styles.navButtonTextDisabled],
+        children: "Next"
+      }), /*#__PURE__*/_jsx(ChevronRight, {
+        size: 20,
+        color: selectedEventIndex === totalEvents - 1 ? buoyColors.textMuted : buoyColors.text
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  contentOnly: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  stickyFooter: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: buoyColors.base,
+    borderTopWidth: 1,
+    borderTopColor: 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: buoyColors.base,
+    borderTopWidth: 1,
+    borderTopColor: 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: buoyColors.textSecondary,
+    fontFamily: "monospace"
+  },
+  valueContent: {
+    marginTop: 4
+  },
+  valueHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  valueLabel: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    fontWeight: "600",
+    textTransform: "uppercase"
+  },
+  valueBox: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 8
+  },
+  navButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 6,
+    backgroundColor: buoyColors.card,
+    minWidth: 100,
+    justifyContent: "center"
+  },
+  navButtonDisabled: {
+    opacity: 0.3
+  },
+  navButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  navButtonTextDisabled: {
+    color: buoyColors.textMuted
+  },
+  eventCounterContainer: {
+    alignItems: "center"
+  },
+  eventCounter: {
+    fontSize: 14,
+    fontWeight: "700",
+    color: buoyColors.text,
+    fontFamily: "monospace",
+    textTransform: "uppercase"
+  },
+  eventTimestamp: {
+    fontSize: 11,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    marginTop: 2
+  },
+  contentCard: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: 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: buoyColors.base
+  },
+  viewToggleCard: {
+    flex: 1,
+    backgroundColor: buoyColors.card,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    padding: 14,
+    gap: 8
+  },
+  viewToggleCardActive: {
+    borderWidth: 1.5,
+    borderColor: buoyColors.primary,
+    backgroundColor: buoyColors.primary + "15",
+    shadowColor: 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: buoyColors.textSecondary,
+    textTransform: "uppercase"
+  },
+  viewToggleLabelActive: {
+    color: buoyColors.text
+  },
+  viewToggleDescription: {
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    lineHeight: 16
+  },
+  // Diff view styles
+  diffContainer: {
+    gap: 16
+  },
+  diffSection: {
+    gap: 8
+  },
+  diffSectionTitle: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    paddingHorizontal: 4
+  },
+  diffDivider: {
+    height: 1,
+    backgroundColor: buoyColors.border,
+    marginVertical: 8
+  }
+});

package/lib/module/components/RouteEventExpandedContent.js

@@ -0,0 +1,183 @@
+"use strict";
+
+/**
+ * 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)
+ */
+
+import { View, Text, StyleSheet } from "react-native";
+import { InlineCopyButton, buoyColors } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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`;
+}
+export function RouteEventExpandedContent({
+  event,
+  visitNumber,
+  routeTemplate
+}) {
+  const hasParams = event.params && Object.keys(event.params).length > 0;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [routeTemplate && /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "Template:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.detailValue,
+          children: routeTemplate
+        }), /*#__PURE__*/_jsx(InlineCopyButton, {
+          value: routeTemplate,
+          buttonStyle: styles.copyButton
+        })]
+      }), event.previousPathname && /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "From:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.detailValue,
+          children: event.previousPathname
+        }), /*#__PURE__*/_jsx(InlineCopyButton, {
+          value: event.previousPathname,
+          buttonStyle: styles.copyButton
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "To:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.detailValue,
+          children: event.pathname
+        }), /*#__PURE__*/_jsx(InlineCopyButton, {
+          value: event.pathname,
+          buttonStyle: styles.copyButton
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [event.timeSincePrevious !== undefined && /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "Duration:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.detailValue,
+          children: formatDuration(event.timeSincePrevious)
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "Time:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.detailValue,
+          children: new Date(event.timestamp).toLocaleString()
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.section,
+      children: [event.segments && event.segments.length > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "Segments:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.detailValue,
+          children: event.segments.join(' → ')
+        }), /*#__PURE__*/_jsx(InlineCopyButton, {
+          value: JSON.stringify(event.segments),
+          buttonStyle: styles.copyButton
+        })]
+      }), hasParams && /*#__PURE__*/_jsxs(View, {
+        style: styles.dataViewerContainer,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.dataViewerHeader,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.dataViewerTitle,
+            children: ["Parameters (", Object.keys(event.params).length, ")"]
+          }), /*#__PURE__*/_jsx(InlineCopyButton, {
+            value: JSON.stringify(event.params, null, 2),
+            buttonStyle: styles.copyButton
+          })]
+        }), /*#__PURE__*/_jsx(DataViewer, {
+          data: event.params,
+          title: "",
+          showTypeFilter: false
+        })]
+      }), visitNumber > 1 && /*#__PURE__*/_jsxs(View, {
+        style: styles.detailRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.detailLabel,
+          children: "Visited:"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.detailValue,
+          children: [visitNumber, " time", visitNumber !== 1 ? 's' : '']
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    gap: 12
+  },
+  section: {
+    gap: 8
+  },
+  detailRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  detailLabel: {
+    fontSize: 10,
+    color: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    minWidth: 70
+  },
+  detailValue: {
+    fontSize: 11,
+    color: 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: buoyColors.textSecondary,
+    fontFamily: "monospace",
+    fontWeight: "600"
+  }
+});