@buoy-gg/shared-ui 7.0.34 → 7.0.35

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -8,8 +8,9 @@ import { night } from "../ui/night/nightTheme.js";
 import { CopyButton } from "../ui/components/CopyButton.js";
 import { ChevronRight } from "../icons/index.js";
 import { IndentGuidesOverlay } from "./IndentGuidesOverlay.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { monoFont } from "../ui/fonts.js";
 // Stable constants to prevent re-renders [[memory:4875251]]
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const HIT_SLOP_10 = {
   top: 10,
   bottom: 10,
@@ -174,7 +175,7 @@ const STABLE_STYLES = StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     // font-medium
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginRight: 8,
     flexShrink: 1
   },
@@ -184,12 +185,12 @@ const STABLE_STYLES = StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     // font-medium
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flexShrink: 1
   },
   valueText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1,
     color: gameUIColors.primaryLight // text-gray-300
   },

package/lib/module/dataViewer/tree/TreeDiffViewer.js

@@ -19,7 +19,7 @@ import React, { useMemo, useState, useEffect, useRef } from "react";
 import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
 import { gameUIColors, night } from "@buoy-gg/shared-ui";
 import { isAbsent } from "../lineDiff.js";
-
+import { monoFont } from "../../ui/fonts.js";
 // ============================================
 // TYPES & INTERFACES
 // ============================================
@@ -785,16 +785,16 @@ const styles = StyleSheet.create({
   summaryIcon: {
     fontSize: 14,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   summaryCount: {
     fontSize: 13,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   summaryLabel: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.9
   },
   scrollView: {
@@ -818,7 +818,7 @@ const styles = StyleSheet.create({
   },
   lineNumberText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "right"
   },
   marker: {
@@ -830,7 +830,7 @@ const styles = StyleSheet.create({
   },
   markerText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   content: {
@@ -851,33 +851,33 @@ const styles = StyleSheet.create({
   },
   expandIcon: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   colon: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginHorizontal: 4
   },
   key: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "500",
     opacity: 0.9
   },
   value: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     maxWidth: "80%"
   },
   arrow: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   badge: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     marginLeft: 8
   },
@@ -889,19 +889,19 @@ const styles = StyleSheet.create({
   },
   emptyIcon: {
     fontSize: 48,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.2,
     marginBottom: 12
   },
   emptyTitle: {
     fontSize: 14,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     marginBottom: 4
   },
   emptySubtitle: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.6
   }
 });

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-09-04T01:21:28.486Z
+ * Generated at: 2026-09-04T23:36:20.710Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/icons/index.js

@@ -28,8 +28,33 @@ export { WifiCircuitIcon } from "./WifiCircuitIcon.js";
 export { RouteMapIcon, RouteIcon, NavigationIcon } from "./RouteMapIcon.js";
 export { StackPulseIcon, RenderPulseIcon, HighlightUpdatesIcon } from "./StackPulseIcon.js";
 export { RenderCountIcon } from "./RenderCountIcon.js";
-export { BenchmarkIcon } from "./BenchmarkIcon.js";
+// The hand-drawn stopwatch is legacy; `BenchmarkIcon` is the BIF artwork (same on every port).
+export { BenchmarkIcon as BenchmarkLegacyIcon } from "./BenchmarkIcon.js";
 export { IconBackground } from "./IconBackground.js";
 
 // Export lucide icons
-export * from "./lucide-icons.js";
+export * from "./lucide-icons.js";
+
+// The lucide glyph tier, drawn from shared/icons/glyphs/*.json — the SAME data
+// the Flutter and Swift renderers read. React Native used to carry a second,
+// hand-drawn copy of these icons (`./lucide-icons`), so `Globe` was one drawing
+// on RN and another on every port; the cross-framework parity sheet measured
+// `icons/globe-24` 10.8 % apart on both. These explicit exports shadow the
+// `export * from "./lucide-icons"` above (the same trick `WifiBifIcon` uses),
+// so one edit to a JSON now moves all three frameworks. The hand-drawn
+// originals stay reachable as `<Name>Icon` from `./lucide-icons`.
+//
+// `Pin` is deliberately NOT here: RN's pin carries an extra `active` prop that
+// stands it upright, which the glyph data has no way to express (the ports draw
+// the resting pose only). `WifiIcon` stays lucide for the same kind of reason —
+// see the `WifiBifIcon` note below.
+export { ActivityGlyph as Activity, AlertCircleGlyph as AlertCircle, AlertTriangleGlyph as AlertTriangle, BookmarkGlyph as Bookmark, BoxGlyph as Box, BugGlyph as Bug, CheckCircleGlyph as CheckCircle, CheckGlyph as Check, ChevronDownGlyph as ChevronDown, ChevronLeftGlyph as ChevronLeft, ChevronRightGlyph as ChevronRight, ChevronUpGlyph as ChevronUp, ClockGlyph as Clock, CopyGlyph as Copy, DatabaseGlyph as Database, DockBottomGlyph as DockBottom, DownloadGlyph as Download, Edit3Glyph as Edit3, EyeOffGlyph as EyeOff, EyeGlyph as Eye, FileJsonGlyph as FileJson, FileTextGlyph as FileText, FilmGlyph as Film, FilterGlyph as Filter, FlaskConicalGlyph as FlaskConical, FloatWindowGlyph as FloatWindow, GitBranchGlyph as GitBranch, GlobeGlyph as Globe, HashGlyph as Hash, HomeGlyph as Home, ImageGlyph as Image, InfoGlyph as Info, KeyGlyph as Key, LayersGlyph as Layers, LinkGlyph as Link, LockGlyph as Lock, MinusGlyph as Minus, MusicGlyph as Music, NavigationGlyph as Navigation, PaletteGlyph as Palette, PauseGlyph as Pause, PlayGlyph as Play, PlusGlyph as Plus, PowerGlyph as Power, RefreshCwGlyph as RefreshCw, SearchGlyph as Search, ServerGlyph as Server, SettingsGlyph as Settings, ShieldGlyph as Shield, Trash2Glyph as Trash2,
+// RN aliases `Trash` onto `Trash2Icon`; the glyph has to shadow both.
+Trash2Glyph as Trash, UnlockGlyph as Unlock, UploadGlyph as Upload, UserGlyph as User, WifiGlyph as Wifi, XCircleGlyph as XCircle, XGlyph as X, ZapGlyph as Zap } from "@buoy-gg/floating-tools-core";
+
+// Every BIF brand icon the dial can show, re-exported so the parity sheet (and tools) render
+// the same artwork by name — see shared/parity/specimens.json `icons/bif-*`.
+export { SentryIcon, EventsIcon, RoutesIcon, RoutePinIcon, RoutePathIcon, RouteDotIcon, RouteTwoPinsIcon, CameraIcon, HighlightIcon, ReduxIcon, StorageIcon, AskBuoyIcon, HighlighterIcon, QueryIcon, ScenariosIcon } from "@buoy-gg/floating-tools-core";
+// `WifiIcon` here stays the lucide glyph (react-query's online toggle); the BIF wifi ships as
+// `WifiBifIcon`. `BenchmarkIcon` IS the BIF stopwatch since 2026-09-04 (perf-monitor's dial icon).
+export { WifiIcon as WifiBifIcon, BenchmarkIcon, BENCHMARK_ICON_COLOR } from "@buoy-gg/floating-tools-core";

package/lib/module/license/FreeAccountPrompt.js

@@ -19,7 +19,7 @@ import { buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
 import { Check, Copy, X } from "../icons/lucide-icons.js";
 import { copyToClipboard } from "../clipboard/index.js";
 import { openPricing } from "./openPricing.js";
-
+import { monoFont } from "../ui/fonts.js";
 /** The one thing a reader has to be able to act on. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const LOGIN_COMMAND = "npx buoy login";
@@ -155,7 +155,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: buoyColors.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   reassure: {
     fontSize: 12,

package/lib/module/license/LicenseEntryModal.js

@@ -9,12 +9,12 @@
  */
 
 import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Modal, Platform } from "react-native";
+import { View, Text, TouchableOpacity, StyleSheet, Modal } from "react-native";
 import { absoluteFill } from "../utils/absoluteFill.js";
 import { macOSColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
 import { openPricing, isWeb } from "./openPricing.js";
 import { X, Key, Link, FileCode, Copy } from "../icons/lucide-icons.js";
-
+import { monoFont } from "../ui/fonts.js";
 // For clipboard functionality
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 let Clipboard = null;
@@ -339,7 +339,7 @@ const styles = StyleSheet.create({
   },
   codeText: {
     fontSize: 11,
-    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    fontFamily: monoFont,
     lineHeight: 18,
     color: macOSColors.text.primary
   },

package/lib/module/ui/components/ChangeRow.js

@@ -23,6 +23,7 @@ import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { CompactRow } from "./CompactRow.js";
 import { Clock, Zap } from "../../icons/index.js";
 import { RelativeTime } from "../../utils/time/RelativeTime.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ChangeRow({
   statusColor,
@@ -97,7 +98,7 @@ const styles = StyleSheet.create({
   badgeText: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   iconBadge: {
     paddingHorizontal: 4

package/lib/module/ui/components/ClipboardHintBanner.js

@@ -11,6 +11,7 @@
 import { memo, useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Modal, Pressable } from "react-native";
 import { gameUIColors } from "../gameUI/index.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A modal hint that teaches users about iOS Simulator clipboard sync
@@ -125,7 +126,7 @@ const styles = StyleSheet.create({
     textAlign: "center"
   },
   menuPath: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     color: gameUIColors.primary,
     fontWeight: "600"

package/lib/module/ui/components/CompactRow.js

@@ -3,6 +3,7 @@
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { ChevronDown, ChevronRight } from "../../icons/index.js";
 import { night } from "../night/nightTheme.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CompactRow({
   statusDotColor,
@@ -221,7 +222,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12
   },
   queryHash: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     color: night.color.text,
     lineHeight: 16
@@ -265,6 +266,6 @@ const styles = StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/ui/components/DataInspector.js

@@ -5,6 +5,7 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput } from
 import { Search, Edit3, Check, X } from "../../icons/index.js";
 import { gameUIColors } from "../gameUI/index.js";
 import { CopyButton } from "./CopyButton.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function DataInspector({
   data,
@@ -264,14 +265,14 @@ const styles = StyleSheet.create({
     maxHeight: 300
   },
   codeText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: gameUIColors.text,
     padding: 12,
     lineHeight: 16
   },
   editor: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: gameUIColors.text,
     padding: 12,

package/lib/module/ui/components/DetailView.js

@@ -5,6 +5,7 @@ import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-nati
 import { gameUIColors } from "../gameUI/index.js";
 import { ModalHeader } from "./ModalHeader.js";
 import { CopyButton } from "./CopyButton.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function DetailView({
   children,
@@ -293,7 +294,7 @@ const styles = StyleSheet.create({
   },
   dataText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: gameUIColors.text
   },
   statusBar: {

package/lib/module/ui/components/DynamicFilterView.js

@@ -8,6 +8,7 @@ import { FilterList, AddFilterInput, AddFilterButton } from "./FilterComponents.
 import { useFilterManager } from "../../hooks/useFilterManager.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { night } from "../night/nightTheme.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function DynamicFilterView({
   sections = [],
@@ -489,7 +490,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 3,
     marginBottom: 1,
     textShadowColor: "rgba(0, 0, 0, 0.2)",
@@ -503,7 +504,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "500",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 3,
     marginBottom: 1
   },
@@ -547,7 +548,7 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: "700",
     letterSpacing: 0.3,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   activeFiltersSection: {
     backgroundColor: night.color.surface,
@@ -686,7 +687,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginRight: 8
   },
   howItWorksSection: {
@@ -705,7 +706,7 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -718,14 +719,14 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 16
   },
   previewSection: {

package/lib/module/ui/components/EntityFilterView.js

@@ -23,6 +23,7 @@ import { Filter, X } from "../../icons/index.js";
 import { night } from "../night/nightTheme.js";
 import { SectionHeader } from "./SectionHeader.js";
 import { AddFilterButton, AddFilterInput } from "./FilterComponents.js";
+import { monoFont } from "../fonts.js";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /** True if any active pattern hides this entity. */
 function isHidden(entity, ignoredPatterns) {
@@ -264,7 +265,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   entityTextHidden: {
     color: night.color.textTertiary,
@@ -274,12 +275,12 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "500",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   addLabel: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   addInputWrapper: {
     paddingHorizontal: 16,
@@ -306,7 +307,7 @@ const styles = StyleSheet.create({
   patternText: {
     flex: 1,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: night.color.text
   },
   emptyText: {
@@ -315,7 +316,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingTop: 8,
     paddingBottom: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   howItWorksText: {
     fontSize: 11,
@@ -323,7 +324,7 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     marginTop: 8,
     paddingHorizontal: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   examplesContainer: {
     paddingTop: 8,
@@ -337,14 +338,14 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     marginBottom: 6
   },
   exampleItem: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 16
   }
 });

package/lib/module/ui/components/EventHistoryViewer/CompareBar.js

@@ -12,11 +12,12 @@ import React, { memo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
 import { ChevronLeft, ChevronRight } from "../../../icons/lucide-icons.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { monoFont } from "../../fonts.js";
 /**
  * CompareBar displays a side-by-side comparison of two events
  * with optional navigation controls for any-to-any compare mode.
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CompareBar = /*#__PURE__*/memo(function CompareBar({
   leftEvent,
   rightEvent,
@@ -150,7 +151,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     letterSpacing: 0.5,
     textTransform: "uppercase"
@@ -185,17 +186,17 @@ const styles = StyleSheet.create({
   index: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   time: {
     fontSize: 11,
     color: macOSColors.text.primary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   relative: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   divider: {
     width: 1,

package/lib/module/ui/components/EventHistoryViewer/DiffModeTabs.js

@@ -11,11 +11,12 @@
 import React, { memo } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { monoFont } from "../../fonts.js";
 /**
  * DiffModeTabs displays a horizontal tab bar for switching
  * between different diff visualization modes.
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 export const DiffModeTabs = /*#__PURE__*/memo(function DiffModeTabs({
   tabs,
   activeTab,
@@ -79,7 +80,7 @@ const styles = StyleSheet.create({
   },
   tabText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     color: macOSColors.text.secondary,
     letterSpacing: 0.5

package/lib/module/ui/components/EventHistoryViewer/EventPickerModal.js

@@ -13,11 +13,12 @@ import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-nati
 import { absoluteFill } from "../../../utils/absoluteFill.js";
 import { macOSColors } from "../../gameUI/constants/macOSDesignSystemColors.js";
 import { X } from "../../../icons/lucide-icons.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { monoFont } from "../../fonts.js";
 /**
  * EventPickerModal displays a modal for selecting events
  * with color-coded styling based on position (left/right).
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const EventPickerModal = /*#__PURE__*/memo(function EventPickerModal({
   isOpen,
   onClose,
@@ -118,7 +119,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase",
     marginBottom: 8,
     letterSpacing: 0.6
@@ -185,18 +186,18 @@ const styles = StyleSheet.create({
   itemIndex: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     width: 40
   },
   itemTime: {
     fontSize: 11,
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   itemRelative: {
     fontSize: 10,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/ui/components/EventStepperFooter.js

@@ -14,6 +14,7 @@ import { ChevronLeft, ChevronRight } from "../../icons/lucide-icons.js";
 import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
 import { night } from "../night/nightTheme.js";
 import { useSafeAreaInsets } from "../../hooks/useSafeAreaInsets.js";
+import { monoFont } from "../fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A footer component for navigating through a list of events/items.
@@ -132,7 +133,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase"
   },
   navButtonTextDisabled: {
@@ -145,13 +146,13 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textTransform: "uppercase"
   },
   subtitleText: {
     fontSize: 11,
     color: macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginTop: 2
   },
   // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with