@buoy-gg/shared-ui 7.0.33 → 7.0.35

package/lib/commonjs/ui/index.js

@@ -5,14 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   toolTheme: true,
-  CyberpunkSectionButton: true
+  monoFont: true,
+  CyberpunkSectionButton: true,
+  EVENT_LIST_PRESET: true,
+  LOG_LIST_PRESET: true,
+  CLIP_OFFSCREEN_CELLS: true
 };
+Object.defineProperty(exports, "CLIP_OFFSCREEN_CELLS", {
+  enumerable: true,
+  get: function () {
+    return _listPresets.CLIP_OFFSCREEN_CELLS;
+  }
+});
 Object.defineProperty(exports, "CyberpunkSectionButton", {
   enumerable: true,
   get: function () {
     return _CyberpunkSectionButton.CyberpunkSectionButton;
   }
 });
+Object.defineProperty(exports, "EVENT_LIST_PRESET", {
+  enumerable: true,
+  get: function () {
+    return _listPresets.EVENT_LIST_PRESET;
+  }
+});
+Object.defineProperty(exports, "LOG_LIST_PRESET", {
+  enumerable: true,
+  get: function () {
+    return _listPresets.LOG_LIST_PRESET;
+  }
+});
+Object.defineProperty(exports, "monoFont", {
+  enumerable: true,
+  get: function () {
+    return _fonts.monoFont;
+  }
+});
 Object.defineProperty(exports, "toolTheme", {
   enumerable: true,
   get: function () {
@@ -44,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) {
@@ -68,4 +97,5 @@ Object.keys(_index4).forEach(function (key) {
       return _index4[key];
     }
   });
-});
+});
+var _listPresets = require("./listPresets.js");

package/lib/commonjs/ui/listPresets.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LOG_LIST_PRESET = exports.EVENT_LIST_PRESET = exports.CLIP_OFFSCREEN_CELLS = void 0;
+/**
+ * FlatList presets for tool lists — the tuned window/batch values and the
+ * E2E clipping guard that eleven list sites carried as copy-pasted props.
+ *
+ * Spread them onto a FlatList: `<FlatList {...EVENT_LIST_PRESET} … />`.
+ * A tool that later moves to FlashList changes this file, not eleven.
+ */
+
+/**
+ * `removeClippedSubviews` is off in E2E bundles: clipped rows leave the
+ * hierarchy entirely, so a row past the fold reads to the test as "the tool
+ * stopped capturing".
+ */
+const CLIP_OFFSCREEN_CELLS = exports.CLIP_OFFSCREEN_CELLS = !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E);
+/**
+ * Event / change / request lists: rows are tall-ish and arrive in bursts.
+ * Window and batch values are the "tuned" winner of the buoy-optimize
+ * batch run on the network tool (2026-07-06, batch-1783396983529-6l7w).
+ */
+const EVENT_LIST_PRESET = exports.EVENT_LIST_PRESET = {
+  initialNumToRender: 12,
+  maxToRenderPerBatch: 8,
+  windowSize: 5,
+  updateCellsBatchingPeriod: 50,
+  removeClippedSubviews: CLIP_OFFSCREEN_CELLS
+};
+
+/**
+ * Log tails (console, sentry): rows are short single lines, the list is
+ * read from the bottom, and a scroll-to-end must not land on blank cells.
+ */
+const LOG_LIST_PRESET = exports.LOG_LIST_PRESET = {
+  initialNumToRender: 30,
+  maxToRenderPerBatch: 30,
+  windowSize: 21,
+  removeClippedSubviews: CLIP_OFFSCREEN_CELLS
+};

package/lib/commonjs/ui/night/primitives.js

@@ -167,12 +167,14 @@ function NightChip({
   selected,
   onPress,
   disabled,
-  icon
+  icon,
+  testID
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     activeOpacity: 0.7,
     disabled: disabled || !onPress,
     onPress: onPress,
+    testID: testID,
     style: [styles.chip, selected ? styles.chipSelected : null, disabled ? styles.chipDisabled : null],
     children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.chipText, selected ? styles.chipTextSelected : null],

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/commonjs/utils/snapshotProviderKit.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PREVIEW_ITEM_RENDER_BYTE_LIMIT = void 0;
+exports.classifyPreviewItem = classifyPreviewItem;
+exports.createRestoreScope = createRestoreScope;
+exports.emptyRestoreResult = emptyRestoreResult;
+exports.failedRestore = failedRestore;
+exports.skippedRestore = skippedRestore;
+exports.unionKeys = unionKeys;
+exports.wontApply = wontApply;
+var _objectDiff = require("../dataViewer/objectDiff.js");
+/**
+ * snapshotProviderKit — the parts of a Time Machine `StateSnapshotProvider`
+ * that are the same for every source.
+ *
+ * storage, redux, zustand, jotai and react-query each register a provider
+ * (see stateSnapshotRegistry.ts). What differs is how they read and write
+ * their source. What was copied five times is:
+ *
+ *  - the restore SCOPE gate: `excludeKeys` (touch all but these) and
+ *    `includeKeys` (touch only these), the "N item(s) excluded by you"
+ *    warning, and the empty `StateSnapshotRestoreResult`;
+ *  - the preview VERDICT ladder: removed → added → unchanged → too-large →
+ *    changed, with the 256 KB per-item render cap;
+ *  - the "won't apply" override: a difference restore cannot apply must say
+ *    so instead of rendering as a green change.
+ *
+ * The parts that stay per-tool are the ones that matter: redux verifies the
+ * jump by reference identity, zustand grafts action functions back, jotai
+ * leaves derived atoms to recompute, storage gates MMKV buffers and
+ * biometric keys, react-query diffs a comparable projection.
+ */
+
+/** Beyond this a preview item is "too-large": restore still applies it, the diff isn't drawn. */
+const PREVIEW_ITEM_RENDER_BYTE_LIMIT = exports.PREVIEW_ITEM_RENDER_BYTE_LIMIT = 256 * 1024;
+/**
+ * Both option lists use preview item keys, and both mean "leave everything
+ * else untouched in BOTH directions". `includeKeys` wins when present;
+ * `excludeKeys` still applies on top.
+ */
+function createRestoreScope(options) {
+  const excludedSet = new Set(options?.excludeKeys ?? []);
+  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
+  let excludedHits = 0;
+  const touch = key => !excludedSet.has(key) && (!includedSet || includedSet.has(key));
+  return {
+    touch,
+    allows(key) {
+      if (touch(key)) return true;
+      excludedHits += 1;
+      return false;
+    },
+    countExcluded(n) {
+      excludedHits += n;
+    },
+    get excludedHits() {
+      return excludedHits;
+    },
+    excludedWarning(noun) {
+      return excludedHits > 0 ? `${excludedHits} ${noun} excluded by you` : null;
+    }
+  };
+}
+
+/** A fresh, successful, empty result to accumulate into. */
+function emptyRestoreResult() {
+  return {
+    ok: true,
+    applied: 0,
+    skipped: [],
+    warnings: []
+  };
+}
+
+/** A failed result with one warning (an empty or unusable snapshot). */
+function failedRestore(warning) {
+  return {
+    ok: false,
+    applied: 0,
+    skipped: [],
+    warnings: [warning]
+  };
+}
+
+/** A failed result with one skipped item and its reason. */
+function skippedRestore(id, reason) {
+  return {
+    ok: false,
+    applied: 0,
+    skipped: [{
+      id,
+      reason
+    }],
+    warnings: []
+  };
+}
+/**
+ * The verdict ladder: removed → added → unchanged → too-large → changed.
+ * Callers layer source-specific verdicts (`wont-apply`, `recomputes`) on top
+ * with `wontApply()`.
+ */
+function classifyPreviewItem(input, options = {}) {
+  const {
+    key,
+    label,
+    oldValue,
+    newValue,
+    inOld,
+    inNew
+  } = input;
+  if (!inNew) return {
+    key,
+    label,
+    verdict: "removed",
+    oldValue
+  };
+  if (!inOld) return {
+    key,
+    label,
+    verdict: "added",
+    newValue
+  };
+  const equal = options.equal ?? _objectDiff.boundedDeepEqual;
+  if (equal(oldValue, newValue)) return {
+    key,
+    label,
+    verdict: "unchanged"
+  };
+  const tooLarge = options.tooLarge ?? (value => (0, _objectDiff.jsonLikelyLargerThan)(value, PREVIEW_ITEM_RENDER_BYTE_LIMIT));
+  if (tooLarge(oldValue) || tooLarge(newValue)) {
+    return {
+      key,
+      label,
+      verdict: "too-large",
+      reason: options.tooLargeReason ?? "value too large to render a diff — restore still applies it"
+    };
+  }
+  return {
+    key,
+    label,
+    verdict: "changed",
+    oldValue,
+    newValue
+  };
+}
+
+/**
+ * Mark an item as something restore cannot apply. An unchanged item is left
+ * alone — there is nothing to apply, so nothing is being refused.
+ */
+function wontApply(item, reason) {
+  if (item.verdict === "unchanged") return item;
+  return {
+    ...item,
+    verdict: "wont-apply",
+    reason
+  };
+}
+
+/** Every key present in either record, once. */
+function unionKeys(a, b) {
+  const keysOf = r => r === undefined ? [] : r instanceof Map ? Array.from(r.keys()) : Object.keys(r);
+  return new Set([...keysOf(a), ...keysOf(b)]);
+}

package/lib/commonjs/utils/stateTools.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.entityColor = entityColor;
+exports.formatValuePreview = formatValuePreview;
+exports.shallowDiffSummary = shallowDiffSummary;
+/**
+ * stateTools — helpers the state tools (redux / zustand / jotai) each carried
+ * a private copy of. Pure functions; no React, no RN.
+ */
+
+// ============================================
+// Entity color
+// ============================================
+
+/**
+ * Consistent color for a named entity (a zustand store, a jotai atom, a redux
+ * slice). Exact match on `known` wins, then a substring match, then a stable
+ * HSL hash of the name rendered as `#rrggbb` so the "color + alpha hex"
+ * pattern works everywhere.
+ */
+function entityColor(name, known = {}) {
+  const lower = name.toLowerCase();
+  if (known[lower]) return known[lower];
+  for (const [key, color] of Object.entries(known)) {
+    if (lower.includes(key)) return color;
+  }
+  const hash = name.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const hue = hash * 137 % 360;
+  const s = 0.7;
+  const l = 0.6;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(hue / 60 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (hue < 60) {
+    r = c;
+    g = x;
+  } else if (hue < 120) {
+    r = x;
+    g = c;
+  } else if (hue < 180) {
+    g = c;
+    b = x;
+  } else if (hue < 240) {
+    g = x;
+    b = c;
+  } else if (hue < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = v => Math.round((v + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// ============================================
+// Value preview
+// ============================================
+
+/**
+ * One-line preview of an arbitrary value for a list row: strings quoted and
+ * truncated, arrays and objects stringified when short, otherwise collapsed
+ * to `[N items]` / `{ N keys }`. Never throws.
+ */
+function formatValuePreview(value, options = {}) {
+  const maxLength = options.maxLength ?? 40;
+  if (value === undefined) return options.undefinedLabel ?? "undefined";
+  if (value === null) return "null";
+  try {
+    if (typeof value === "function") return options.functionLabel ?? "(fn)";
+    if (typeof value === "string") {
+      return value.length > maxLength ? `"${value.slice(0, maxLength - 3)}..."` : `"${value}"`;
+    }
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+    if (Array.isArray(value)) {
+      if (value.length === 0) return "[]";
+      const preview = JSON.stringify(value);
+      return preview.length > maxLength ? `[${value.length} items]` : preview;
+    }
+    if (typeof value === "object") {
+      const keys = Object.keys(value);
+      if (keys.length === 0) return "{}";
+      const preview = JSON.stringify(value);
+      if (preview.length <= maxLength) return preview;
+      return `{ ${keys.length} keys }`;
+    }
+    return String(value).slice(0, maxLength);
+  } catch {
+    return "[complex]";
+  }
+}
+
+// ============================================
+// Shallow diff summary
+// ============================================
+
+/**
+ * Top-level, reference-equality diff between two states. Enough for a list
+ * row ("+1 ~2 keys"); the detail view runs the real tree diff.
+ *
+ * A state object that was REPLACED without any top-level value moving —
+ * exactly what zustand's persist middleware does when it rehydrates — is
+ * reported as `"nested change"` with no keys, never as one changed key with
+ * none named.
+ */
+function shallowDiffSummary(prev, next) {
+  if (prev === next) {
+    return {
+      summary: "no change",
+      changedKeys: [],
+      changedCount: 0
+    };
+  }
+  if (typeof prev !== "object" || typeof next !== "object" || prev === null || next === null) {
+    return {
+      summary: "changed",
+      changedKeys: [],
+      changedCount: 0
+    };
+  }
+  const prevRecord = prev;
+  const nextRecord = next;
+  const prevKeys = Object.keys(prevRecord);
+  const nextKeys = Object.keys(nextRecord);
+  const added = nextKeys.filter(k => !prevKeys.includes(k));
+  const removed = prevKeys.filter(k => !nextKeys.includes(k));
+  const changed = [];
+  for (const key of prevKeys) {
+    if (nextKeys.includes(key) && prevRecord[key] !== nextRecord[key]) {
+      changed.push(key);
+    }
+  }
+  const changedKeys = [...added, ...removed, ...changed];
+  const parts = [];
+  if (added.length > 0) parts.push(`+${added.length}`);
+  if (removed.length > 0) parts.push(`-${removed.length}`);
+  if (changed.length > 0) parts.push(`~${changed.length}`);
+  if (parts.length === 0) {
+    return {
+      summary: "nested change",
+      changedKeys: [],
+      changedCount: 0
+    };
+  }
+  const total = changedKeys.length;
+  return {
+    summary: `${parts.join(" ")} ${total === 1 ? "key" : "keys"}`,
+    changedKeys,
+    changedCount: total
+  };
+}

package/lib/module/JsModal.js

@@ -602,7 +602,6 @@ const JsModalComponent = ({
   // ============================================================================
   // REFS for values we need to track
   // ============================================================================
-  const isExternallyControlled = !!externalAnimatedHeight;
   const effectiveMaxHeight = maxHeight || SCREEN.height - insets.top;
 
   // Mode toggle handler
@@ -724,29 +723,57 @@ const JsModalComponent = ({
   // ============================================================================
   // EFFECT: Visibility Animations - All using native driver!
   // ============================================================================
+  const snapVisibility = shown => {
+    if (shown) {
+      if (mode === "bottomSheet") {
+        bottomSheetTranslateY.setValue(0);
+      } else {
+        floatingScale.setValue(1);
+        floatingPosition.setValue({
+          x: currentDimensionsRef.current.left,
+          y: currentDimensionsRef.current.top
+        });
+      }
+      visibilityProgress.setValue(1);
+    } else {
+      if (mode === "bottomSheet") {
+        bottomSheetTranslateY.setValue(SCREEN.height);
+      }
+      visibilityProgress.setValue(0);
+    }
+  };
+
+  /**
+   * Snap DURING RENDER when `visible` flips, not only in the effect below.
+   *
+   * These values drive the sheet's opacity/translate through the native
+   * driver. The React commit for a `visible` change carries whatever the
+   * JS-side values are at render time — the OLD, hidden ones when the snap
+   * only happens in the effect — and on Fabric that commit's mount can land
+   * on the main thread AFTER the effect's native `setValue`, overwriting it.
+   * The Animated node then says "shown" while the UIView sits at opacity 0,
+   * until some unrelated re-render commits the JS-side values again. That
+   * is how "restore tool A: nothing; restore tool B: A appears; hide B: now
+   * B appears" happened — every restore was one commit behind.
+   *
+   * Setting the values before the render's props are computed makes the
+   * commit and the native node agree, whichever lands last. `setValue` is
+   * idempotent, so a re-run render is harmless.
+   */
+  const snappedVisibleRef = useRef(null);
+  if (INSTANT_MODAL_ENTRANCE && snappedVisibleRef.current !== visible) {
+    snappedVisibleRef.current = visible;
+    snapVisibility(visible);
+  }
   useEffect(() => {
     // Visibility effect
     let openAnimation = null;
     let closeAnimation = null;
     if (INSTANT_MODAL_ENTRANCE) {
-      // Snap to the final state — no animation in either direction.
-      if (visible) {
-        if (mode === "bottomSheet") {
-          bottomSheetTranslateY.setValue(0);
-        } else {
-          floatingScale.setValue(1);
-          floatingPosition.setValue({
-            x: currentDimensionsRef.current.left,
-            y: currentDimensionsRef.current.top
-          });
-        }
-        visibilityProgress.setValue(1);
-      } else {
-        if (mode === "bottomSheet") {
-          bottomSheetTranslateY.setValue(SCREEN.height);
-        }
-        visibilityProgress.setValue(0);
-      }
+      // Snap to the final state — no animation in either direction. The
+      // render-phase snap above already did this for a `visible` flip; this
+      // re-applies it for a `mode` change while shown.
+      snapVisibility(visible);
       return;
     }
     if (visible) {
@@ -911,8 +938,15 @@ const JsModalComponent = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [benchMotion, visible]);
   const bottomSheetPanResponder = useMemo(() => PanResponder.create({
-    onStartShouldSetPanResponder: () => !isExternallyControlled && mode === "bottomSheet",
-    onMoveShouldSetPanResponder: (evt, gestureState) => !isExternallyControlled && mode === "bottomSheet" && Math.abs(gestureState.dy) > 3,
+    // An external `animatedHeight` used to disable this responder
+    // outright ("externally controlled"), which left Ask Buoy's sheet —
+    // the one host that passes one, for its peek animation — with a
+    // header that could not be dragged in bottom-sheet mode. The move
+    // and release handlers below already write every height into the
+    // external value, so the host and the finger share one number; the
+    // grab just has to stop whatever the host is animating first.
+    onStartShouldSetPanResponder: () => mode === "bottomSheet",
+    onMoveShouldSetPanResponder: (evt, gestureState) => mode === "bottomSheet" && Math.abs(gestureState.dy) > 3,
     onPanResponderTerminationRequest: () => false,
     onPanResponderGrant: evt => {
       setIsResizing(true);
@@ -924,6 +958,7 @@ const JsModalComponent = ({
       animatedBottomPosition.stopAnimation(val => {
         currentHeightRef.current = val;
       });
+      externalAnimatedHeight?.stopAnimation();
       bottomSheetTranslateY.stopAnimation();
     },
     onPanResponderMove: evt => {
@@ -970,7 +1005,7 @@ const JsModalComponent = ({
       setIsResizing(false);
       // snap back to the last stable height if you want; otherwise no-op
     }
-  }), [mode, isExternallyControlled, minHeight, effectiveMaxHeight, animatedBottomPosition, externalAnimatedHeight, bottomSheetTranslateY, visibilityProgress, onClose]);
+  }), [mode, minHeight, effectiveMaxHeight, animatedBottomPosition, externalAnimatedHeight, bottomSheetTranslateY, visibilityProgress, onClose]);
 
   // ============================================================================
   // CREATE RESIZE HANDLER: For 4-corner resize in floating mode (fixed geometry)

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,