@buoy-gg/zustand 7.0.33 → 7.0.35

package/lib/module/zustand/components/ZustandEventFilterView.js

@@ -1,303 +1,39 @@
 "use strict";
 
-import { useState } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { Filter, X, SectionHeader, AddFilterButton, AddFilterInput, night } from "@buoy-gg/shared-ui";
+/**
+ * ZustandEventFilterView
+ *
+ * The shared `EntityFilterView` with zustand's nouns: registered stores you
+ * can tap to hide, active store-name patterns, and how it works.
+ */
+
+import { useMemo } from "react";
+import { EntityFilterView } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
 import { ZUSTAND_TEST_ID, slugForTestID } from "../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Returns the store color for a given pattern if it exactly matches a registered store name */
-function getStoreColorForPattern(pattern, stores) {
-  const match = stores.find(s => s.name.toLowerCase() === pattern.toLowerCase());
-  return match ? zustandStateStore.getStoreColor(match.name) : null;
-}
-
-/** True if any active pattern filters out this store */
-function isStoreFiltered(store, ignoredPatterns) {
-  return Array.from(ignoredPatterns).some(p => store.name.toLowerCase().includes(p.toLowerCase()));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+const EXAMPLES = ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"];
 export function ZustandEventFilterView({
   ignoredPatterns,
   onTogglePattern,
   onAddPattern,
   stores
 }) {
-  const [showAddInput, setShowAddInput] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const handleAddPattern = () => {
-    const trimmed = inputValue.trim();
-    if (trimmed) {
-      onAddPattern(trimmed);
-      setInputValue("");
-      setShowAddInput(false);
-    }
-  };
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.scrollContent,
-    showsVerticalScrollIndicator: false,
-    testID: `${ZUSTAND_TEST_ID}-filters-scroll`,
-    children: [stores.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: "REGISTERED STORES"
-        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
-          count: stores.length,
-          color: night.color.accent,
-          testID: `${ZUSTAND_TEST_ID}-filters-store-count`
-        })]
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        style: styles.storeList,
-        contentContainerStyle: styles.storeListContent,
-        showsVerticalScrollIndicator: true,
-        nestedScrollEnabled: true,
-        children: stores.map(store => {
-          const storeColor = zustandStateStore.getStoreColor(store.name);
-          const filtered = isStoreFiltered(store, ignoredPatterns);
-          return /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: [styles.storeRow, filtered && styles.storeRowFiltered],
-            onPress: () => onAddPattern(store.name),
-            disabled: filtered,
-            testID: `${ZUSTAND_TEST_ID}-filters-store-${slugForTestID(store.name)}`,
-            accessibilityRole: "button",
-            accessibilityLabel: `Hide ${store.name}`,
-            accessibilityState: {
-              disabled: filtered
-            },
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.storeDot, {
-                backgroundColor: filtered ? night.color.textTertiary : storeColor
-              }]
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.storeRowText, filtered && styles.storeRowTextFiltered, !filtered && {
-                color: storeColor
-              }],
-              numberOfLines: 1,
-              children: store.name
-            }), filtered ? /*#__PURE__*/_jsx(Text, {
-              style: styles.filteredLabel,
-              children: "hidden"
-            }) : /*#__PURE__*/_jsx(Text, {
-              style: [styles.addLabel, {
-                color: storeColor + "99"
-              }],
-              children: "+ hide"
-            })]
-          }, store.name);
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-          icon: Filter,
-          color: night.color.accent,
-          size: 12
-        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: "STORE NAME FILTERS"
-        }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
-          count: ignoredPatterns.size,
-          color: night.color.accent,
-          testID: `${ZUSTAND_TEST_ID}-filters-count`
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.addInputWrapper,
-        children: !showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
-          onPress: () => setShowAddInput(true),
-          color: night.color.accent,
-          label: "Add store name pattern",
-          testID: `${ZUSTAND_TEST_ID}-filters-add-open`
-        }) : /*#__PURE__*/_jsx(AddFilterInput, {
-          value: inputValue,
-          onChange: setInputValue,
-          onSubmit: handleAddPattern,
-          onCancel: () => {
-            setShowAddInput(false);
-            setInputValue("");
-          },
-          placeholder: "Enter store name pattern to hide...",
-          color: night.color.accent,
-          testID: `${ZUSTAND_TEST_ID}-filters-add-input`
-        })
-      }), ignoredPatterns.size > 0 && /*#__PURE__*/_jsx(View, {
-        style: styles.patternList,
-        children: Array.from(ignoredPatterns).map(pattern => {
-          const storeColor = getStoreColorForPattern(pattern, stores);
-          return /*#__PURE__*/_jsxs(TouchableOpacity, {
-            style: styles.patternRow,
-            onPress: () => onTogglePattern(pattern),
-            activeOpacity: 0.8,
-            testID: `${ZUSTAND_TEST_ID}-filters-chip-${slugForTestID(pattern)}`,
-            accessibilityRole: "button",
-            accessibilityLabel: `Remove filter ${pattern}`,
-            children: [storeColor ? /*#__PURE__*/_jsx(View, {
-              style: [styles.storeDot, {
-                backgroundColor: storeColor
-              }]
-            }) : null, /*#__PURE__*/_jsx(Text, {
-              style: [styles.patternText, storeColor ? {
-                color: storeColor
-              } : null],
-              numberOfLines: 1,
-              children: pattern
-            }), /*#__PURE__*/_jsx(X, {
-              size: 12,
-              color: night.color.accent + "80"
-            })]
-          }, pattern);
-        })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-          icon: Filter,
-          color: night.color.textSecondary,
-          size: 12
-        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: "HOW EVENT FILTERS WORK"
-        })]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.howItWorksText,
-        children: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter."
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.examplesContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.examplesTitle,
-          children: "EXAMPLES:"
-        }), ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"].map(ex => /*#__PURE__*/_jsx(Text, {
-          style: styles.exampleItem,
-          children: ex
-        }, ex))]
-      })]
-    })]
+  const entities = useMemo(() => stores.map(store => ({
+    name: store.name,
+    color: zustandStateStore.getStoreColor(store.name)
+  })), [stores]);
+  return /*#__PURE__*/_jsx(EntityFilterView, {
+    entities: entities,
+    ignoredPatterns: ignoredPatterns,
+    onTogglePattern: onTogglePattern,
+    onAddPattern: onAddPattern,
+    entityNoun: "STORES",
+    entitySingular: "store",
+    entityKey: "store",
+    testIDPrefix: ZUSTAND_TEST_ID,
+    slug: slugForTestID,
+    howItWorks: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter.",
+    examples: EXAMPLES
   });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  scrollContent: {
-    paddingTop: 16,
-    paddingHorizontal: 16,
-    paddingBottom: 24,
-    gap: 16
-  },
-  section: {
-    backgroundColor: night.color.surface,
-    borderRadius: 16,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  storeList: {
-    maxHeight: 180
-  },
-  storeListContent: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 16,
-    gap: 10
-  },
-  storeRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  storeRowFiltered: {
-    opacity: 0.45
-  },
-  storeDot: {
-    width: 7,
-    height: 7,
-    borderRadius: 3.5
-  },
-  storeRowText: {
-    flex: 1,
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  storeRowTextFiltered: {
-    color: night.color.textTertiary,
-    textDecorationLine: "line-through"
-  },
-  filteredLabel: {
-    fontSize: 10,
-    fontWeight: "500",
-    color: night.color.textTertiary,
-    fontFamily: "monospace"
-  },
-  addLabel: {
-    fontSize: 10,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  addInputWrapper: {
-    paddingHorizontal: 16,
-    paddingTop: 8,
-    paddingBottom: 8
-  },
-  patternList: {
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    gap: 8
-  },
-  patternRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    gap: 8
-  },
-  patternText: {
-    flex: 1,
-    fontSize: 12,
-    fontFamily: "monospace",
-    color: night.color.text
-  },
-  howItWorksText: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    lineHeight: 16,
-    marginTop: 8,
-    paddingHorizontal: 16,
-    fontFamily: "monospace"
-  },
-  examplesContainer: {
-    paddingTop: 8,
-    paddingHorizontal: 16,
-    paddingBottom: 16,
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    marginTop: 12
-  },
-  examplesTitle: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    fontFamily: "monospace",
-    letterSpacing: 0.5,
-    marginBottom: 6
-  },
-  exampleItem: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    fontFamily: "monospace",
-    lineHeight: 16
-  }
-});
+}

package/lib/module/zustand/components/ZustandModal.js

@@ -9,8 +9,8 @@
  */
 
 import { useState, useMemo, useRef, useCallback, useEffect } from "react";
-import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
-import { JsModal, ModalHeader, TabSelector, macOSColors, night, ToolEmptyState, resolveListEmptyState, Search, Filter, Power, X, Lock, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps } from "@buoy-gg/shared-ui";
+import { View, Text, StyleSheet, FlatList, TouchableOpacity } from "react-native";
+import { JsModal, ModalHeader, TabSelector, macOSColors, night, ToolEmptyState, resolveListEmptyState, Search, Filter, Power, Lock, devToolsStorageKeys, ProUpgradeModal, PowerToggleButton, ToolbarCopyButton, ToolbarClearButton, truncatePayload, TickProvider, useLimit, windowDragProps, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { useZustandStateChanges } from "../hooks/useZustandStateChanges";
 import { ZustandStateChangeItem } from "./ZustandStateChangeItem";
@@ -20,17 +20,6 @@ import { ZustandStoreDetailContent } from "./ZustandStoreDetailContent";
 import { ZustandEventFilterView } from "./ZustandEventFilterView";
 import { ZUSTAND_TEST_ID, buildChangeRowTestIDs } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Cell clipping, off in e2e bundles only.
- *
- * `removeClippedSubviews` unmounts the views of rows scrolled out of the
- * window, which is what makes a long change list cheap — and which makes
- * Detox report a perfectly rendered row as un-hittable. The env var is
- * inlined at bundle time, so a bundler that does NOT inline it leaves the
- * production behaviour exactly as it was.
- */
-const CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
-
 /**
  * The change log's "nothing here". Everything but the nouns is the shared
  * precedence — see `ToolEmptyState` in shared-ui for why it lives there.
@@ -385,49 +374,24 @@ export function ZustandModal({
         onBack: onBack
       }), /*#__PURE__*/_jsx(ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-          style: styles.headerSearchContainer,
-          testID: `${ZUSTAND_TEST_ID}-search`,
-          children: [/*#__PURE__*/_jsx(Search, {
-            size: 14,
-            color: night.color.textSecondary
-          }), /*#__PURE__*/_jsx(TextInput, {
-            ref: searchInputRef,
-            testID: `${ZUSTAND_TEST_ID}-search-field`,
-            style: styles.headerSearchInput,
-            placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
-            placeholderTextColor: night.color.placeholder,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => searchInputRef.current?.blur()
-            // Stay open while the query is still narrowing the list.
-            //
-            // Collapsing on blur hid the reason rows were missing: the
-            // header went back to its TABS — whose counts are of the
-            // WHOLE capture on the stores side — while the list stayed
-            // filtered, so the tool showed "Stores (4)" above a single
-            // row and offered nothing to explain the gap. The only way
-            // back was to reopen a field the user had no reason to think
-            // was still armed.
-            ,
-            onBlur: () => {
-              if (searchText.length === 0) setIsSearchActive(false);
-            },
-            accessibilityLabel: "Search Zustand stores and events",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), /*#__PURE__*/_jsx(TouchableOpacity, {
-            onPress: closeSearch,
-            style: styles.headerSearchClear,
-            testID: `${ZUSTAND_TEST_ID}-search-clear`,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close search",
-            children: /*#__PURE__*/_jsx(X, {
-              size: 14,
-              color: night.color.textSecondary
-            })
-          })]
+        children: isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: activeTab === "stores" ? "Search stores..." : "Search events...",
+          accessibilityLabel: "Search Zustand stores and events",
+          iconSize: 14,
+          testID: `${ZUSTAND_TEST_ID}-search-field`,
+          containerTestID: `${ZUSTAND_TEST_ID}-search`,
+          clearTestID: `${ZUSTAND_TEST_ID}-search-clear`
+          // Stay open while the query is still narrowing the list: the
+          // header would otherwise go back to its TABS — whose counts are
+          // of the WHOLE capture — above a filtered list, with nothing to
+          // explain the gap.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
         }) : /*#__PURE__*/_jsx(TabSelector, {
           tabs: [{
             key: "stores",
@@ -522,11 +486,7 @@ export function ZustandModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ...EVENT_LIST_PRESET
       }) : /*#__PURE__*/_jsx(ToolEmptyState, {
         testID: `${ZUSTAND_TEST_ID}-history-empty`,
         ...resolveListEmptyState({
@@ -622,11 +582,7 @@ export function ZustandModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: CLIP_OFFSCREEN_CELLS,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ...EVENT_LIST_PRESET
       }) : /*#__PURE__*/_jsx(EventsEmptyState, {
         isEnabled: isEnabled,
         searchText: searchText,
@@ -739,27 +695,6 @@ const styles = StyleSheet.create({
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
     backgroundColor: "transparent"
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: night.radius.row,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,

package/lib/module/zustand/components/ZustandStateChangeItem.js

@@ -7,10 +7,9 @@
  */
 
 import { memo } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, night, Zap, Clock, RelativeTime } from "@buoy-gg/shared-ui";
+import { ChangeRow, buoyColors, night } from "@buoy-gg/shared-ui";
 import { zustandStateStore } from "../utils/zustandStateStore";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Get status label based on category
  */
@@ -99,68 +98,16 @@ export const ZustandStateChangeItem = /*#__PURE__*/memo(function ZustandStateCha
   const sublabel = getSublabel(change);
   const primaryText = getPrimaryText(change);
   const badgeText = getBadgeText(change);
-
-  // Always a custom badge, even when there is no icon to hang off it. The
-  // alternative — letting CompactRow draw `badgeText` itself — leaves the one
-  // row whose badge matters most (a set that changed NOTHING) as the only row
-  // in the list with no handle on its badge.
-  const customBadge = /*#__PURE__*/_jsxs(View, {
-    style: styles.badgeContainer,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: [styles.badgeText, {
-        color: statusColor
-      }],
-      testID: testID ? `${testID}-badge` : undefined,
-      children: badgeText
-    }), change.isSlowUpdate ? /*#__PURE__*/_jsx(View, {
-      style: styles.slowBadge,
-      testID: testID ? `${testID}-slow` : undefined,
-      children: /*#__PURE__*/_jsx(Clock, {
-        size: 12,
-        color: buoyColors.error
-      })
-    }) : change.hasStateChange ? /*#__PURE__*/_jsx(View, {
-      style: styles.changeBadge,
-      testID: testID ? `${testID}-change` : undefined,
-      children: /*#__PURE__*/_jsx(Zap, {
-        size: 12,
-        color: buoyColors.warning
-      })
-    }) : null]
-  });
-  return /*#__PURE__*/_jsx(CompactRow, {
-    statusDotColor: statusColor,
+  return /*#__PURE__*/_jsx(ChangeRow, {
+    statusColor: statusColor,
     statusLabel: statusLabel,
-    statusSublabel: sublabel,
+    sublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
-      timestamp: change.timestamp
-    }),
-    customBadge: customBadge,
-    badgeColor: statusColor,
-    showChevron: true,
+    timestamp: change.timestamp,
+    badgeText: badgeText,
+    changed: change.hasStateChange,
+    slow: change.isSlowUpdate,
     onPress: () => onPress(change),
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    primaryTestID: testID ? `${testID}-keys` : undefined
+    testID: testID
   });
-});
-const styles = StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  }
 });

package/lib/module/zustand/components/ZustandStateDetailContent.js

@@ -13,7 +13,7 @@
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { useState, useCallback, useMemo } from "react";
-import { night, EventStepperFooter, formatRelativeTime, parseValue } from "@buoy-gg/shared-ui";
+import { night, EventStepperFooter, formatRelativeTime, parseValue, monoFont } from "@buoy-gg/shared-ui";
 import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
 import { ZustandDetailViewToggle } from "./ZustandDetailViewToggle";
 import { ZustandStateInfoView } from "./ZustandStateInfoView";
@@ -297,7 +297,7 @@ const styles = StyleSheet.create({
   valueLabel: {
     fontSize: 10,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     fontWeight: "600"
   },
@@ -314,7 +314,7 @@ const styles = StyleSheet.create({
   changeText: {
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   typeBadge: {
@@ -327,7 +327,7 @@ const styles = StyleSheet.create({
     fontSize: 9,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   valueBox: {
     // Inset code box — darker than the card, the night track color.
@@ -340,7 +340,7 @@ const styles = StyleSheet.create({
   valueText: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 18
   },
   diffContainer: {
@@ -358,7 +358,7 @@ const styles = StyleSheet.create({
   changeTextSmall: {
     fontSize: 8,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   dataViewerContainer: {
     marginTop: -12,