@buoy-gg/highlight-updates 7.0.33 → 7.0.35

package/lib/commonjs/highlight-updates/HighlightUpdatesOverlay.js

@@ -275,7 +275,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.accent,
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });
 var _default = exports.default = HighlightUpdatesOverlay;

package/lib/commonjs/highlight-updates/components/HighlightFilterView.js

@@ -1101,7 +1101,7 @@ const styles = _reactNative.StyleSheet.create({
   patternChipValue: {
     fontSize: 11,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flexShrink: 1
   },
   patternChipX: {
@@ -1244,7 +1244,7 @@ const styles = _reactNative.StyleSheet.create({
   detectedItemText: {
     fontSize: 11,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   emptyText: {
     fontSize: 11,
@@ -1262,7 +1262,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     color: _sharedUi.night.color.textTertiary,
     lineHeight: 18,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   howItWorksBold: {
     fontWeight: "700",
@@ -1362,7 +1362,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   settingDescription: {
     fontSize: 11,
@@ -1405,7 +1405,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   batchSizePresetTextActive: {
     color: _sharedUi.night.color.textTertiary,
@@ -1444,7 +1444,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     textAlign: "center"
   },
   renderCountSeparator: {

package/lib/commonjs/highlight-updates/components/IdentifierBadge.js

@@ -206,7 +206,7 @@ const styles = _reactNative.StyleSheet.create({
   value: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   valueCompact: {
@@ -239,7 +239,7 @@ const styles = _reactNative.StyleSheet.create({
   // Value only
   valueOnly: {
     fontSize: 12,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   valueOnlyCompact: {
     fontSize: 11

package/lib/commonjs/highlight-updates/components/ModalHeaderContent.js

@@ -30,41 +30,23 @@ const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection(
   onSearchClose
 }) {
   if (!isActive) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    nativeID: "__rn_buoy__search-container",
-    testID: "buoy-highlight-search-container",
-    style: styles.headerSearchContainer,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-      size: 14,
-      color: _sharedUi.night.color.textSecondary
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-      testID: "buoy-highlight-search-field",
-      style: styles.headerSearchInput,
-      placeholder: "Search testID, nativeID, component...",
-      placeholderTextColor: _sharedUi.night.color.placeholder,
-      value: searchText,
-      onChangeText: onSearchChange,
-      onSubmitEditing: onSearchClose,
-      onBlur: onSearchClose,
-      accessibilityLabel: "Search renders",
-      autoCapitalize: "none",
-      autoCorrect: false,
-      returnKeyType: "search",
-      autoFocus: true
-    }), searchText.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      testID: "buoy-highlight-search-clear",
-      accessibilityRole: "button",
-      accessibilityLabel: "Clear search",
-      onPress: () => {
-        onSearchChange("");
-        onSearchClose();
-      },
-      style: styles.headerSearchClear,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-        size: 14,
-        color: _sharedUi.night.color.textSecondary
-      })
-    }) : null]
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+    value: searchText,
+    onChangeText: onSearchChange,
+    onCancel: () => {
+      onSearchChange("");
+      onSearchClose();
+    },
+    onDismiss: onSearchClose,
+    dismissOnBlur: true,
+    clearOnlyWhenText: true,
+    placeholder: "Search testID, nativeID, component...",
+    accessibilityLabel: "Search renders",
+    iconSize: 14,
+    testID: "buoy-highlight-search-field",
+    containerTestID: "buoy-highlight-search-container",
+    containerNativeID: "__rn_buoy__search-container",
+    clearTestID: "buoy-highlight-search-clear"
   });
 });
 const SearchSection = exports.SearchSection = SearchSectionInner;
@@ -287,27 +269,6 @@ const CopySettingsViewHeader = exports.CopySettingsViewHeader = /*#__PURE__*/(0,
 // ============================================================================
 
 const styles = _reactNative.StyleSheet.create({
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,

package/lib/commonjs/highlight-updates/components/RenderCauseBadge.js

@@ -376,7 +376,7 @@ const styles = _reactNative.StyleSheet.create({
   keysText: {
     fontSize: 11,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   keysTextCompact: {
@@ -402,7 +402,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   twoLevelText: {
     fontSize: 11,
@@ -411,7 +411,7 @@ const styles = _reactNative.StyleSheet.create({
   twoLevelKeys: {
     fontSize: 10,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Enhanced cause display styles (Phase 5)
   enhancedContainer: {
@@ -427,7 +427,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   enhancedNativeTag: {
     // Inset display chip — the night track color.
@@ -440,7 +440,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   enhancedFlowContainer: {
     flexDirection: "row",
@@ -489,13 +489,13 @@ const styles = _reactNative.StyleSheet.create({
   enhancedChangeIcon: {
     fontSize: 12,
     color: _sharedUi.night.color.warning,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     width: 16
   },
   enhancedChangeText: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   enhancedNoChanges: {

package/lib/commonjs/highlight-updates/components/RenderDetailView.js

@@ -579,7 +579,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Answer Card
   answerCard: {
@@ -634,7 +634,7 @@ const styles = _reactNative.StyleSheet.create({
   propChangeText: {
     fontSize: 11,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Details Section
   detailsSection: {
@@ -670,7 +670,7 @@ const styles = _reactNative.StyleSheet.create({
   detailValue: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   // Stats Row
@@ -693,7 +693,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 16,
     fontWeight: "700",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   statLabel: {
     fontSize: 10,
@@ -733,7 +733,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Quick Actions Section
   quickActionsSection: {
@@ -782,7 +782,7 @@ const styles = _reactNative.StyleSheet.create({
   filterOptionValue: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     flex: 1
   },
   filterOptionValueSelected: {

package/lib/commonjs/highlight-updates/components/RenderHistoryViewer.js

@@ -635,7 +635,7 @@ const styles = _reactNative.StyleSheet.create({
   eventTime: {
     fontSize: 11,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   eventBadge: {
     flexDirection: "row",
@@ -653,7 +653,7 @@ const styles = _reactNative.StyleSheet.create({
   eventBadgeText: {
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   section: {
     backgroundColor: _sharedUi.night.color.surface,
@@ -682,7 +682,7 @@ const styles = _reactNative.StyleSheet.create({
   changedItem: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginBottom: 3,
     paddingLeft: 8
   },
@@ -691,7 +691,7 @@ const styles = _reactNative.StyleSheet.create({
   },
   propsJson: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     color: _sharedUi.night.color.text,
     // Inset code box — the night track color.
     backgroundColor: _sharedUi.night.color.bg,
@@ -745,7 +745,7 @@ const styles = _reactNative.StyleSheet.create({
   compareTime: {
     fontSize: 10,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   compareDivider: {
     width: 30,
@@ -781,12 +781,12 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: _sharedUi.night.color.warning,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   diffChangeKey: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   diffNoChanges: {
     fontSize: 12,
@@ -854,7 +854,7 @@ const styles = _reactNative.StyleSheet.create({
   causeDiffValue: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontWeight: "500"
   },
   diffChangesTitle: {

package/lib/commonjs/highlight-updates/components/RenderListItem.js

@@ -195,7 +195,7 @@ const styles = _reactNative.StyleSheet.create({
   nativeType: {
     fontSize: 10,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginTop: 1
   },
   accessibilityLabel: {
@@ -212,7 +212,7 @@ const styles = _reactNative.StyleSheet.create({
   renderCount: {
     fontSize: 11,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   bottomRow: {
     flexDirection: "row",

package/lib/commonjs/highlight-updates/components/RendersCopySettingsView.js

@@ -195,77 +195,35 @@ function RendersCopySettingsView({
       totalComponents,
       totalRenders
     } = (0, _rendersExportFormatter.getExportSummary)(previewRenders);
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? _sharedUi.night.color.danger : sizeWarningLevel === "warning" ? _sharedUi.night.color.warning : _sharedUi.night.color.textSecondary;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-          testID: "buoy-highlight-copy-preview-show",
-          accessibilityRole: "button",
-          accessibilityLabel: "Show preview",
-          style: styles.expandButton,
-          onPress: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Eye, {
-              size: 16,
-              color: _sharedUi.night.color.info
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-                testID: "buoy-highlight-copy-preview-summary",
-                style: styles.expandButtonSubtitle,
-                children: [totalComponents, " component", totalComponents !== 1 ? "s" : "", " \xB7 ", totalRenders, " renders \xB7 ~", formatBytes(estimatedSize), !hasLiveData ? " (mock data)" : ""]
-              })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronDown, {
-              size: 16,
-              color: _sharedUi.night.color.textTertiary
-            })]
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ExportPreview, {
+      expanded: isPreviewExpanded,
+      onExpandedChange: setIsPreviewExpanded,
+      summary: `${totalComponents} component${totalComponents !== 1 ? "s" : ""} · ${totalRenders} renders · ~${formatBytes(estimatedSize)}${!hasLiveData ? " (mock data)" : ""}`,
+      warningLevel: sizeWarningLevel,
+      warningText: {
+        warning: "Large payload — preview may be slow",
+        danger: "Very large payload — try a smaller topN or turn off history"
+      },
+      testIDs: {
+        expand: "buoy-highlight-copy-preview-show",
+        collapse: "buoy-highlight-copy-preview-hide",
+        summary: "buoy-highlight-copy-preview-summary",
+        warning: "buoy-highlight-copy-size-warning"
+      },
+      renderBody: () => {
+        const exportText = generateCopyText();
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          testID: "buoy-highlight-copy-preview-scroll",
+          style: styles.previewScroll,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            testID: "buoy-highlight-copy-preview-text",
+            style: styles.previewText,
+            selectable: true,
+            children: exportText
           })
-        }), sizeWarningLevel !== "none" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          testID: "buoy-highlight-copy-size-warning",
-          style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.sizeWarningText, {
-              color: warningColor
-            }],
-            children: sizeWarningLevel === "danger" ? "Very large payload — try a smaller topN or turn off history" : "Large payload — preview may be slow"
-          })]
-        })]
-      });
-    }
-    const exportText = generateCopyText();
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        testID: "buoy-highlight-copy-preview-hide",
-        accessibilityRole: "button",
-        accessibilityLabel: "Hide preview",
-        style: styles.collapseButton,
-        onPress: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChevronUp, {
-          size: 14,
-          color: _sharedUi.night.color.textSecondary
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        testID: "buoy-highlight-copy-preview-scroll",
-        style: styles.previewScroll,
-        nestedScrollEnabled: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          testID: "buoy-highlight-copy-preview-text",
-          style: styles.previewText,
-          selectable: true,
-          children: exportText
-        })
-      })]
+        });
+      }
     });
   }, [isPreviewExpanded, previewRenders, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText]);
   const renderPreviewHeaderActions = (0, _react.useCallback)(() => {
@@ -490,76 +448,11 @@ function RendersCopySettingsView({
   });
 }
 const styles = _reactNative.StyleSheet.create({
-  collapsedPreview: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: _sharedUi.night.color.text
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textSecondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: _sharedUi.night.color.textSecondary
-  },
-  sizeWarning: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: _sharedUi.night.color.warningSoft,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.warning + "30"
-  },
-  sizeWarningDanger: {
-    backgroundColor: _sharedUi.night.color.dangerSoft,
-    borderColor: _sharedUi.night.color.danger + "30"
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
   previewScroll: {
     maxHeight: 360
   },
   previewText: {
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontSize: 11,
     color: _sharedUi.night.color.text,
     lineHeight: 18

package/lib/commonjs/highlight-updates/components/StatsDisplay.js

@@ -67,7 +67,7 @@ const styles = _reactNative.StyleSheet.create({
   headerChipValue: {
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });
 var _default = exports.default = StatsDisplay;

package/lib/commonjs/highlight-updates/utils/copySettingsStorage.js

@@ -11,39 +11,22 @@ var _copySettings = require("../types/copySettings");
 /**
  * Copy Settings Storage
  *
- * Persists the highlight-updates copy/export settings.
+ * Persists the highlight-updates copy/export settings through the shared
+ * `definePersistedSetting` (merge-over-defaults, best-effort save/clear).
  */
 
+const copySettings = (0, _sharedUi.definePersistedSetting)(_sharedUi.devToolsStorageKeys.highlightUpdates.copySettings(), _copySettings.DEFAULT_COPY_SETTINGS, {
+  sanitize: (merged, stored) => ({
+    ...merged,
+    filterCauses: stored?.filterCauses ?? _copySettings.DEFAULT_COPY_SETTINGS.filterCauses
+  })
+});
 async function saveCopySettings(settings) {
-  try {
-    const key = _sharedUi.devToolsStorageKeys.highlightUpdates.copySettings();
-    await _sharedUi.persistentStorage.setItem(key, JSON.stringify(settings));
-  } catch {
-    // Silently fail — persistence is optional
-  }
+  await copySettings.save(settings);
 }
 async function loadCopySettings() {
-  try {
-    const key = _sharedUi.devToolsStorageKeys.highlightUpdates.copySettings();
-    const value = await _sharedUi.persistentStorage.getItem(key);
-    if (value && value !== "") {
-      const parsed = JSON.parse(value);
-      return {
-        ..._copySettings.DEFAULT_COPY_SETTINGS,
-        ...parsed,
-        filterCauses: parsed.filterCauses ?? _copySettings.DEFAULT_COPY_SETTINGS.filterCauses
-      };
-    }
-    return null;
-  } catch {
-    return null;
-  }
+  return copySettings.loadOrNull();
 }
 async function clearCopySettings() {
-  try {
-    const key = _sharedUi.devToolsStorageKeys.highlightUpdates.copySettings();
-    await _sharedUi.persistentStorage.removeItem(key);
-  } catch {
-    // Silently fail
-  }
+  await copySettings.clear();
 }

package/lib/module/highlight-updates/HighlightUpdatesOverlay.js

@@ -10,7 +10,7 @@
 
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
+import { night, monoFont } from "@buoy-gg/shared-ui";
 import HighlightUpdatesController from "./utils/HighlightUpdatesController";
 import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
 import { RenderTracker } from "./utils/RenderTracker";
@@ -268,7 +268,7 @@ const styles = StyleSheet.create({
     color: night.color.accent,
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });
 export default HighlightUpdatesOverlay;