@buoy-gg/shared-ui 7.0.34 → 7.0.35

package/lib/commonjs/ui/gameUI/components/GameUICompactStats.js

@@ -7,6 +7,7 @@ exports.GameUICompactStats = GameUICompactStats;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _gameUIColors = require("../constants/gameUIColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable compact stats display component
@@ -180,13 +181,13 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 1.5
   },
   headerSubtitle: {
     fontSize: 8,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     opacity: 0.7
   },
   statusIndicator: {
@@ -202,7 +203,7 @@ const styles = _reactNative.StyleSheet.create({
   statusText: {
     fontSize: 9,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5
   },
   // Health section
@@ -215,7 +216,7 @@ const styles = _reactNative.StyleSheet.create({
   healthLabel: {
     fontSize: 8,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5
   },
   healthBarWrapper: {
@@ -234,7 +235,7 @@ const styles = _reactNative.StyleSheet.create({
   healthPercentage: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   // Stats grid
   statsGrid: {
@@ -261,20 +262,20 @@ const styles = _reactNative.StyleSheet.create({
   cardLabel: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     color: _gameUIColors.gameUIColors.primary
   },
   cardSubtitle: {
     fontSize: 8,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     opacity: 0.7
   },
   statNumber: {
     fontSize: 16,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     minWidth: 28
   },
   valueBlock: {
@@ -283,7 +284,7 @@ const styles = _reactNative.StyleSheet.create({
   percentText: {
     fontSize: 9,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   statBar: {
     height: 3,
@@ -309,7 +310,7 @@ const styles = _reactNative.StyleSheet.create({
   bottomStatLabel: {
     fontSize: 7,
     color: _gameUIColors.gameUIColors.muted,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5,
     marginBottom: 1
   },
@@ -317,7 +318,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   bottomDivider: {
     width: 1,

package/lib/commonjs/ui/gameUI/components/GameUIIssuesList.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var _reactNative = require("react-native");
 var _index = require("../../../icons/index.js");
 var _gameUIColors = require("../constants/gameUIColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable issues list component with expandable details
@@ -190,18 +191,18 @@ const styles = _reactNative.StyleSheet.create({
   issueKey: {
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   issueDesc: {
     fontSize: 10,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     flex: 1
   },
   hint: {
     fontSize: 9,
     color: _gameUIColors.gameUIColors.muted,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textAlign: "center",
     marginTop: 8,
     paddingTop: 8,
@@ -230,14 +231,14 @@ const styles = _reactNative.StyleSheet.create({
   detailLabel: {
     fontSize: 10,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "600",
     width: 70
   },
   detailValue: {
     fontSize: 11,
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     flex: 1,
     lineHeight: 16
   },
@@ -252,7 +253,7 @@ const styles = _reactNative.StyleSheet.create({
   fixLabel: {
     fontSize: 10,
     color: _gameUIColors.gameUIColors.info,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "700",
     marginBottom: 6,
     letterSpacing: 0.5
@@ -260,7 +261,7 @@ const styles = _reactNative.StyleSheet.create({
   fixText: {
     fontSize: 11,
     color: _gameUIColors.gameUIColors.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     lineHeight: 18,
     backgroundColor: _gameUIColors.gameUIColors.background + "66",
     padding: 8,
@@ -276,7 +277,7 @@ const styles = _reactNative.StyleSheet.create({
   descText: {
     fontSize: 10,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 4,
     lineHeight: 14
   }

package/lib/commonjs/ui/gameUI/components/GameUIStatusHeader.js

@@ -7,6 +7,7 @@ exports.GameUIStatusHeader = GameUIStatusHeader;
 var _reactNative = require("react-native");
 var _absoluteFill = require("../../../utils/absoluteFill.js");
 var _gameUIColors = require("../constants/gameUIColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable status header component showing system health
@@ -105,7 +106,7 @@ const styles = _reactNative.StyleSheet.create({
   label: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 1.5,
     textShadowOffset: {
       width: 0,
@@ -116,7 +117,7 @@ const styles = _reactNative.StyleSheet.create({
   subtitle: {
     fontSize: 10,
     color: _gameUIColors.gameUIColors.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   badge: {
     paddingHorizontal: 8,
@@ -126,7 +127,7 @@ const styles = _reactNative.StyleSheet.create({
   badgeText: {
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 1
   },
   indicators: {

package/lib/commonjs/ui/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   toolTheme: true,
+  monoFont: true,
   CyberpunkSectionButton: true,
   EVENT_LIST_PRESET: true,
   LOG_LIST_PRESET: true,
@@ -34,6 +35,12 @@ Object.defineProperty(exports, "LOG_LIST_PRESET", {
     return _listPresets.LOG_LIST_PRESET;
   }
 });
+Object.defineProperty(exports, "monoFont", {
+  enumerable: true,
+  get: function () {
+    return _fonts.monoFont;
+  }
+});
 Object.defineProperty(exports, "toolTheme", {
   enumerable: true,
   get: function () {
@@ -65,6 +72,7 @@ Object.keys(_index2).forEach(function (key) {
   });
 });
 var _toolTheme = require("./toolTheme.js");
+var _fonts = require("./fonts.js");
 var _CyberpunkSectionButton = require("./console/CyberpunkSectionButton.js");
 var _index3 = require("./gameUI/index.js");
 Object.keys(_index3).forEach(function (key) {

package/lib/commonjs/ui/toolTheme.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toolTheme = void 0;
 var _gameUIColors = require("./gameUI/constants/gameUIColors.js");
+var _fonts = require("./fonts.js");
 /**
  * Semantic design tokens for dev-tool surfaces — the single documented entry
  * point for custom-tool authors (and, over time, internal tools).
@@ -64,19 +65,19 @@ const toolTheme = exports.toolTheme = {
       fontWeight: "700",
       color: _gameUIColors.buoyColors.textMuted,
       letterSpacing: 1.2,
-      fontFamily: "monospace"
+      fontFamily: _fonts.monoFont
     },
     /** Monospace values (keys, ids, payload snippets). */
     mono: {
       fontSize: 11,
       color: _gameUIColors.buoyColors.textSecondary,
-      fontFamily: "monospace"
+      fontFamily: _fonts.monoFont
     },
     /** Timestamps and fine print. */
     small: {
       fontSize: 9,
       color: _gameUIColors.buoyColors.textMuted,
-      fontFamily: "monospace"
+      fontFamily: _fonts.monoFont
     }
   },
   /** 4-based spacing scale used across tool surfaces. */

package/lib/module/dataViewer/CyberpunkInput.js

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { View, TextInput, StyleSheet, TouchableOpacity, Text, Animated } from "react-native";
 import { ChevronUp, ChevronDown, Trash } from "../icons/index.js";
 import { buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function CyberpunkInput({
   label,
@@ -253,7 +254,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: buoyColors.textMuted,
     letterSpacing: 0.5,
     minWidth: 60
@@ -288,7 +289,7 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     color: buoyColors.text,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     backgroundColor: "transparent",
     zIndex: 1
   },

package/lib/module/dataViewer/DataTreeActionBar.js

@@ -25,6 +25,7 @@ import { StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-nativ
 import { ChevronDown, ChevronUp, Copy, Edit3, Minus, Plus } from "../icons/index.js";
 import { macOSColors } from "../ui/gameUI/index.js";
 import { breadcrumb, treeActionMap, treeActionsFor, typeLabel } from "./treeActions.js";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Palette. The explorer renders on the phone's dark modal AND inside the
@@ -285,7 +286,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 9,
     paddingVertical: 0,
     fontSize: 12,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   inputInvalid: {
     borderColor: macOSColors.semantic.error
@@ -334,7 +335,7 @@ const styles = StyleSheet.create({
     color: T.label,
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flexShrink: 1
   },
   badge: {

package/lib/module/dataViewer/DataTreeActionDock.js

@@ -17,6 +17,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { ChevronDown, ChevronUp, Copy, Edit3, Minus, Plus } from "../icons/index.js";
 import { macOSColors } from "../ui/gameUI/index.js";
 import { breadcrumb, treeActionsFor, typeLabel } from "./treeActions.js";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const T = {
   dockBg: macOSColors.background.card,
@@ -172,7 +173,7 @@ const styles = StyleSheet.create({
     color: T.label,
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   selectionLabelEmpty: {
     color: T.hint,

package/lib/module/dataViewer/DiffSummary.js

@@ -9,6 +9,7 @@
 
 import React, { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * DiffSummary displays a summary bar showing diff statistics.
@@ -112,17 +113,17 @@ const styles = StyleSheet.create({
   },
   icon: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700"
   },
   count: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   label: {
     fontSize: 9,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.9
   }
 });

package/lib/module/dataViewer/LiveExplorer.js

@@ -35,7 +35,7 @@ import { CopyButton as SharedCopyButton } from "../ui/components/CopyButton.js";
 import { ChevronRight, ChevronDown, Trash } from "../icons/index.js";
 import { CyberpunkInput } from "./CyberpunkInput.js";
 import { updateNestedDataByPath, deleteNestedDataByPath } from "./nestedPath.js";
-
+import { monoFont } from "../ui/fonts.js";
 /**
  * How the explorer writes into whatever owns the data. The tree never mutates
  * anything itself — every edit is handed to the host through this.
@@ -654,7 +654,7 @@ const styles = StyleSheet.create({
   clearButtonText: {
     fontSize: 12,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   expanderIcon: {
     width: 18,
@@ -741,7 +741,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     marginRight: 4,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4
   },
   labelTextFocused: {
@@ -757,14 +757,14 @@ const styles = StyleSheet.create({
     color: night.color.textTertiary,
     fontSize: 10,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.7
   },
   pageRangeText: {
     color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   flexRowGapItemsCenter: {
     flexDirection: "row",
@@ -817,11 +817,11 @@ const styles = StyleSheet.create({
   textNumber: {
     color: night.color.text,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   textString: {
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   flexRowGapFullWidth: {
     flexDirection: "row",
@@ -838,7 +838,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     fontSize: 9,
     minWidth: 50,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4,
     opacity: 0.8
   },
@@ -851,7 +851,7 @@ const styles = StyleSheet.create({
     flex: 1,
     color: night.color.text,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     paddingVertical: 6,
     paddingHorizontal: 10,
@@ -885,7 +885,7 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     textTransform: "uppercase",
     letterSpacing: 0.8,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   toggleBadgeTrue: {
     backgroundColor: night.color.accent + "1A",
@@ -914,7 +914,7 @@ const styles = StyleSheet.create({
     color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4,
     minWidth: 60,
     flexShrink: 0

package/lib/module/dataViewer/SplitDiffViewer.js

@@ -13,6 +13,7 @@ import { View, Text, ScrollView, StyleSheet } from "react-native";
 import { computeLineDiff, DiffType } from "./lineDiff.js";
 import { DiffSummary } from "./DiffSummary.js";
 import { devToolsDefaultTheme } from "./diffThemes.js";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * SplitDiffViewer displays a side-by-side diff comparison.
@@ -281,13 +282,13 @@ function createDynamicStyles(theme, height) {
       fontSize: 12,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5
     },
     themeDescription: {
       fontSize: 10,
       color: theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       marginTop: 2,
       opacity: 0.8
     },
@@ -311,7 +312,7 @@ function createDynamicStyles(theme, height) {
       fontSize: 10,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5,
       textTransform: "uppercase"
     },
@@ -355,7 +356,7 @@ function createDynamicStyles(theme, height) {
     },
     lineNumber: {
       fontSize: 9,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       color: theme.lineNumberText
     },
     marker: {
@@ -368,7 +369,7 @@ function createDynamicStyles(theme, height) {
     },
     markerText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       fontWeight: "600"
     },
     contentCell: {
@@ -381,12 +382,12 @@ function createDynamicStyles(theme, height) {
     },
     content: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       lineHeight: 16
     },
     wordDiff: {
       fontSize: 10,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     },
     separator: {
       height: 20,
@@ -397,7 +398,7 @@ function createDynamicStyles(theme, height) {
     separatorText: {
       fontSize: 8,
       color: theme.separatorText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 2
     },
     emptyState: {
@@ -409,7 +410,7 @@ function createDynamicStyles(theme, height) {
       fontSize: 11,
       color: theme.emptyStateText,
       fontStyle: "italic",
-      fontFamily: "monospace"
+      fontFamily: monoFont
     }
   });
 }

package/lib/module/dataViewer/ThemedSplitView.js

@@ -18,6 +18,7 @@ import { TimestampDeltaBar } from "./TimestampDeltaBar.js";
 import { describeTimestampDeltas } from "./timestampDiff.js";
 import { JsonStringNotice } from "./JsonStringNotice.js";
 import { decodeJsonStringPair } from "./jsonStringValue.js";
+import { monoFont } from "../ui/fonts.js";
 
 /** Rendering options (the shape storage's DiffOptionsPanel edits). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -469,13 +470,13 @@ function createDynamicStyles(theme, scrollEnabled) {
       fontSize: 12,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5
     },
     themeDescription: {
       fontSize: 10,
       color: theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       marginTop: 2,
       opacity: 0.8
     },
@@ -499,7 +500,7 @@ function createDynamicStyles(theme, scrollEnabled) {
       fontSize: 10,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5,
       textTransform: "uppercase"
     },
@@ -543,7 +544,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     lineNumber: {
       fontSize: 9,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       color: theme.lineNumberText
     },
     marker: {
@@ -556,7 +557,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     markerText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       fontWeight: "600"
     },
     contentCell: {
@@ -569,12 +570,12 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     content: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       lineHeight: 16
     },
     wordDiff: {
       fontSize: 10,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     },
     summaryBar: {
       flexDirection: "row",
@@ -592,7 +593,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     summaryText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       fontWeight: "700"
     },
     separator: {
@@ -604,7 +605,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     separatorText: {
       fontSize: 8,
       color: theme.separatorText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 2
     },
     foldHeader: {
@@ -618,7 +619,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     foldHeaderText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5
     },
     emptyState: {
@@ -630,7 +631,7 @@ function createDynamicStyles(theme, scrollEnabled) {
       fontSize: 11,
       color: theme.emptyStateText,
       fontStyle: "italic",
-      fontFamily: "monospace"
+      fontFamily: monoFont
     }
   });
 }

package/lib/module/dataViewer/ValueEditModal.js

@@ -32,6 +32,7 @@ import { absoluteFill } from "../utils/absoluteFill.js";
 import { macOSColors } from "../ui/gameUI/index.js";
 import { night } from "../ui/night/nightTheme.js";
 import { breadcrumb, typeLabel } from "./treeActions.js";
+import { monoFont } from "../ui/fonts.js";
 
 /**
  * How this value gets edited. Driven by the value's own type, which is also
@@ -270,12 +271,12 @@ const styles = StyleSheet.create({
     color: macOSColors.semantic.warning,
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   path: {
     color: night.color.textTertiary,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   /** Caps the panel's height so a huge blob can't push the buttons off-screen. */
   fieldScroll: {
@@ -290,7 +291,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   inputMultiline: {
     minHeight: 110,
@@ -314,7 +315,7 @@ const styles = StyleSheet.create({
     color: night.color.danger,
     fontSize: 11,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   actions: {
     flexDirection: "row",
@@ -373,7 +374,7 @@ const styles = StyleSheet.create({
     color: night.color.textTertiary,
     fontSize: 16,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   boolTextActive: {
     color: macOSColors.semantic.warning