@buoy-gg/shared-ui 7.0.33 → 7.0.35

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

@@ -0,0 +1,355 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EntityFilterView = EntityFilterView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _nightTheme = require("../night/nightTheme.js");
+var _SectionHeader = require("./SectionHeader.js");
+var _FilterComponents = require("./FilterComponents.js");
+var _fonts = require("../fonts.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * EntityFilterView — the "hide these by name" filter screen the state tools
+ * share: a list of registered entities (stores, atoms) you can tap to hide,
+ * the active name patterns with a remove ✕, an add-pattern affordance, and
+ * a how-it-works card.
+ *
+ * zustand and jotai each shipped their own copy (~370 lines apiece). The
+ * tool supplies the entities, the nouns and the testID prefix; the screen
+ * is drawn once.
+ *
+ * testID convention (unchanged from zustand's):
+ *   `${prefix}-filters-scroll`, `${prefix}-filters-${entityKey}-count`,
+ *   `${prefix}-filters-${entityKey}-${slug(name)}`, `${prefix}-filters-count`,
+ *   `${prefix}-filters-add-open`, `${prefix}-filters-add-input`,
+ *   `${prefix}-filters-chip-${slug(pattern)}`.
+ */
+
+/** True if any active pattern hides this entity. */
+function isHidden(entity, ignoredPatterns) {
+  return Array.from(ignoredPatterns).some(p => entity.name.toLowerCase().includes(p.toLowerCase()));
+}
+
+/** The entity color for a pattern that exactly names a registered entity. */
+function colorForPattern(pattern, entities) {
+  const match = entities.find(e => e.name.toLowerCase() === pattern.toLowerCase());
+  return match ? match.color : null;
+}
+function EntityFilterView({
+  entities,
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  entityNoun,
+  entitySingular,
+  entityKey,
+  testIDPrefix,
+  slug,
+  howItWorks,
+  examples,
+  addPlaceholder,
+  emptyMessage
+}) {
+  const [showAddInput, setShowAddInput] = (0, _react.useState)(false);
+  const [inputValue, setInputValue] = (0, _react.useState)("");
+  const handleAddPattern = () => {
+    const trimmed = inputValue.trim();
+    if (trimmed) {
+      onAddPattern(trimmed);
+      setInputValue("");
+      setShowAddInput(false);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    style: styles.container,
+    contentContainerStyle: styles.scrollContent,
+    showsVerticalScrollIndicator: false,
+    nestedScrollEnabled: true,
+    testID: `${testIDPrefix}-filters-scroll`,
+    children: [entities.length === 0 && emptyMessage ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader.Title, {
+          children: ["REGISTERED ", entityNoun]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.emptyText,
+        testID: `${testIDPrefix}-filters-${entityKey}s-empty`,
+        children: emptyMessage
+      })]
+    }) : null, entities.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader.Title, {
+          children: ["REGISTERED ", entityNoun]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Badge, {
+          count: entities.length,
+          color: _nightTheme.night.color.accent,
+          testID: `${testIDPrefix}-filters-${entityKey}-count`
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: styles.entityList,
+        contentContainerStyle: styles.entityListContent,
+        showsVerticalScrollIndicator: true,
+        nestedScrollEnabled: true,
+        testID: `${testIDPrefix}-filters-${entityKey}-list`,
+        children: entities.map(entity => {
+          const hidden = isHidden(entity, ignoredPatterns);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.entityRow, hidden && styles.entityRowHidden],
+            onPress: () => onAddPattern(entity.name),
+            disabled: hidden,
+            testID: `${testIDPrefix}-filters-${entityKey}-${slug(entity.name)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Hide ${entity.name}`,
+            accessibilityState: {
+              disabled: hidden
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.dot, {
+                backgroundColor: hidden ? _nightTheme.night.color.textTertiary : entity.color
+              }]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.entityText, hidden ? styles.entityTextHidden : {
+                color: entity.color
+              }],
+              numberOfLines: 1,
+              children: entity.name
+            }), hidden ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.hiddenLabel,
+              children: "hidden"
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.addLabel, {
+                color: entity.color + "99"
+              }],
+              children: "+ hide"
+            })]
+          }, entity.name);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Icon, {
+          icon: _index.Filter,
+          color: _nightTheme.night.color.accent,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader.Title, {
+          children: [entitySingular.toUpperCase(), " NAME FILTERS"]
+        }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Badge, {
+          count: ignoredPatterns.size,
+          color: _nightTheme.night.color.accent,
+          testID: `${testIDPrefix}-filters-count`
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.addInputWrapper,
+        children: !showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterButton, {
+          onPress: () => setShowAddInput(true),
+          color: _nightTheme.night.color.accent,
+          label: `Add ${entitySingular} name pattern`,
+          testID: `${testIDPrefix}-filters-add-open`
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterInput, {
+          value: inputValue,
+          onChange: setInputValue,
+          onSubmit: handleAddPattern,
+          onCancel: () => {
+            setShowAddInput(false);
+            setInputValue("");
+          },
+          placeholder: addPlaceholder ?? `Enter ${entitySingular} name pattern to hide...`,
+          color: _nightTheme.night.color.accent,
+          testID: `${testIDPrefix}-filters-add-input`
+        })
+      }), ignoredPatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.patternList,
+        children: Array.from(ignoredPatterns).map(pattern => {
+          const color = colorForPattern(pattern, entities);
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.patternRow,
+            onPress: () => onTogglePattern(pattern),
+            activeOpacity: 0.8,
+            testID: `${testIDPrefix}-filters-chip-${slug(pattern)}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Remove filter ${pattern}`,
+            children: [color ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.dot, {
+                backgroundColor: color
+              }]
+            }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.patternText, color ? {
+                color
+              } : null],
+              numberOfLines: 1,
+              children: pattern
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+              size: 12,
+              color: _nightTheme.night.color.accent + "80"
+            })]
+          }, pattern);
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.section,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SectionHeader.SectionHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Icon, {
+          icon: _index.Filter,
+          color: _nightTheme.night.color.textSecondary,
+          size: 12
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SectionHeader.SectionHeader.Title, {
+          children: "HOW EVENT FILTERS WORK"
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.howItWorksText,
+        children: howItWorks
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.examplesContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.examplesTitle,
+          children: "EXAMPLES:"
+        }), examples.map(ex => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.exampleItem,
+          children: ex
+        }, ex))]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.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: _nightTheme.night.color.surface,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    overflow: "hidden"
+  },
+  entityList: {
+    maxHeight: 180
+  },
+  entityListContent: {
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    gap: 10
+  },
+  entityRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border
+  },
+  entityRowHidden: {
+    opacity: 0.45
+  },
+  dot: {
+    width: 7,
+    height: 7,
+    borderRadius: 3.5
+  },
+  entityText: {
+    flex: 1,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: _fonts.monoFont
+  },
+  entityTextHidden: {
+    color: _nightTheme.night.color.textTertiary,
+    textDecorationLine: "line-through"
+  },
+  hiddenLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: _fonts.monoFont
+  },
+  addLabel: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: _fonts.monoFont
+  },
+  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: _nightTheme.night.color.surfaceElevated,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    gap: 8
+  },
+  patternText: {
+    flex: 1,
+    fontSize: 12,
+    fontFamily: _fonts.monoFont,
+    color: _nightTheme.night.color.text
+  },
+  emptyText: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textTertiary,
+    paddingHorizontal: 16,
+    paddingTop: 8,
+    paddingBottom: 16,
+    fontFamily: _fonts.monoFont
+  },
+  howItWorksText: {
+    fontSize: 11,
+    color: _nightTheme.night.color.textSecondary,
+    lineHeight: 16,
+    marginTop: 8,
+    paddingHorizontal: 16,
+    fontFamily: _fonts.monoFont
+  },
+  examplesContainer: {
+    paddingTop: 8,
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+    borderTopWidth: 1,
+    borderTopColor: _nightTheme.night.color.border,
+    marginTop: 12
+  },
+  examplesTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: _fonts.monoFont,
+    letterSpacing: 0.5,
+    marginBottom: 6
+  },
+  exampleItem: {
+    fontSize: 10,
+    color: _nightTheme.night.color.textTertiary,
+    fontFamily: _fonts.monoFont,
+    lineHeight: 16
+  }
+});

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../../../icons/lucide-icons.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -155,7 +156,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   label: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "700",
     letterSpacing: 0.5,
     textTransform: "uppercase"
@@ -190,17 +191,17 @@ const styles = _reactNative.StyleSheet.create({
   index: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   time: {
     fontSize: 11,
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   relative: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   divider: {
     width: 1,

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

@@ -7,6 +7,7 @@ exports.DiffModeTabs = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -84,7 +85,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   tabText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     fontWeight: "600",
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
     letterSpacing: 0.5

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

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _absoluteFill = require("../../../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../../../icons/lucide-icons.js");
+var _fonts = require("../../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -123,7 +124,7 @@ const styles = _reactNative.StyleSheet.create({
   title: {
     fontSize: 13,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase",
     marginBottom: 8,
     letterSpacing: 0.6
@@ -190,18 +191,18 @@ const styles = _reactNative.StyleSheet.create({
   itemIndex: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     width: 40
   },
   itemTime: {
     fontSize: 11,
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     flex: 1
   },
   itemRelative: {
     fontSize: 10,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   }
 });

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

@@ -10,6 +10,7 @@ var _lucideIcons = require("../../icons/lucide-icons.js");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
 var _nightTheme = require("../night/nightTheme.js");
 var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 /**
@@ -137,7 +138,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase"
   },
   navButtonTextDisabled: {
@@ -150,13 +151,13 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: _macOSDesignSystemColors.macOSColors.text.primary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     textTransform: "uppercase"
   },
   subtitleText: {
     fontSize: 11,
     color: _macOSDesignSystemColors.macOSColors.text.secondary,
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     marginTop: 2
   },
   // ── Night variant (see ui/night/nightTheme.ts): near-black glass bar with

package/lib/commonjs/ui/components/ExpandablePopover.js

@@ -31,7 +31,8 @@ function CollapsedPeek({
   width,
   height,
   customContent,
-  label
+  label,
+  testID
 }) {
   // When progress=0 (collapsed): peek is visible (opacity=1, scale=1)
   // When progress=1 (expanded): peek is hidden (opacity=0, scale=0.9)
@@ -60,6 +61,7 @@ function CollapsedPeek({
       }],
       accessibilityLabel: label || `Expand options`,
       accessibilityRole: "button",
+      testID: testID,
       children: customContent || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
           size: 12,
@@ -85,7 +87,8 @@ function ExpandedWrapper({
   width,
   expandedHeight,
   isExpanded,
-  style
+  style,
+  collapseTestID
 }) {
   // Animate height from 0 to full height
   const animatedHeight = progress.interpolate({
@@ -108,6 +111,7 @@ function ExpandedWrapper({
         style: styles.collapseButton,
         accessibilityLabel: "Collapse",
         accessibilityRole: "button",
+        testID: collapseTestID,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
           size: 12,
           color: _gameUIColors.buoyColors.textMuted,
@@ -140,7 +144,9 @@ function ExpandablePopover({
   expandedStyle,
   persistState = false,
   storageKey,
-  peekHeight = DEFAULT_PEEK_HEIGHT
+  peekHeight = DEFAULT_PEEK_HEIGHT,
+  testID,
+  collapseTestID
 }) {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(defaultExpanded);
   const [isStateRestored, setIsStateRestored] = (0, _react.useState)(!persistState);
@@ -243,6 +249,7 @@ function ExpandablePopover({
       style: styles.expandedWrapper,
       pointerEvents: isExpanded ? "box-none" : "none",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandedWrapper, {
+        collapseTestID: collapseTestID,
         onCollapse: handleCollapse,
         progress: progress,
         width: width,
@@ -262,7 +269,8 @@ function ExpandablePopover({
         width: width,
         height: peekHeight,
         customContent: collapsedContent,
-        label: collapsedLabel
+        label: collapsedLabel,
+        testID: testID
       })
     })]
   });

package/lib/commonjs/ui/components/ExpandedInfoRow.js

@@ -7,6 +7,7 @@ exports.ExpandedInfoRow = ExpandedInfoRow;
 exports.PillBadge = PillBadge;
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _fonts = require("../fonts.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * ExpandedInfoRow
@@ -77,7 +78,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _macOSDesignSystemColors.macOSColors.text.muted,
     fontWeight: "600",
     minWidth: 70,
-    fontFamily: "monospace"
+    fontFamily: _fonts.monoFont
   },
   pill: {
     flexDirection: "row",
@@ -97,7 +98,7 @@ const styles = _reactNative.StyleSheet.create({
   pillText: {
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _fonts.monoFont,
     letterSpacing: 0.5
   },
   pillTextSm: {