@buoy-gg/highlight-updates 7.0.33 → 7.0.34

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/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,71 +448,6 @@ 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
   },

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/components/ModalHeaderContent.js

@@ -10,8 +10,8 @@
  */
 
 import React, { memo } from "react";
-import { View, TouchableOpacity, TextInput, StyleSheet } from "react-native";
-import { Trash2, Search, Filter, X, Pause, Copy, ModalHeader, TabSelector, night, PowerToggleButton } from "@buoy-gg/shared-ui";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Trash2, Search, Filter, Pause, Copy, ModalHeader, TabSelector, night, PowerToggleButton } from "@buoy-gg/shared-ui";
 import { StatsDisplay } from "./StatsDisplay";
 
 // ============================================================================
@@ -25,41 +25,23 @@ const SearchSectionInner = /*#__PURE__*/memo(function SearchSection({
   onSearchClose
 }) {
   if (!isActive) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    nativeID: "__rn_buoy__search-container",
-    testID: "buoy-highlight-search-container",
-    style: styles.headerSearchContainer,
-    children: [/*#__PURE__*/_jsx(Search, {
-      size: 14,
-      color: night.color.textSecondary
-    }), /*#__PURE__*/_jsx(TextInput, {
-      testID: "buoy-highlight-search-field",
-      style: styles.headerSearchInput,
-      placeholder: "Search testID, nativeID, component...",
-      placeholderTextColor: 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__*/_jsx(TouchableOpacity, {
-      testID: "buoy-highlight-search-clear",
-      accessibilityRole: "button",
-      accessibilityLabel: "Clear search",
-      onPress: () => {
-        onSearchChange("");
-        onSearchClose();
-      },
-      style: styles.headerSearchClear,
-      children: /*#__PURE__*/_jsx(X, {
-        size: 14,
-        color: night.color.textSecondary
-      })
-    }) : null]
+  return /*#__PURE__*/_jsx(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"
   });
 });
 export const SearchSection = SearchSectionInner;
@@ -282,27 +264,6 @@ export const CopySettingsViewHeader = /*#__PURE__*/memo(function CopySettingsVie
 // ============================================================================
 
 const styles = StyleSheet.create({
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerActionButton: {
     width: 32,
     height: 32,

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

@@ -8,12 +8,12 @@
  */
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Text, StyleSheet, ScrollView, View, TouchableOpacity } from "react-native";
-import { DynamicFilterView, macOSColors, night, FileText, FileCode, Zap, Settings, Eye, ChevronDown, ChevronUp, AlertTriangle, Layers, ToolbarCopyButton } from "@buoy-gg/shared-ui";
+import { Text, StyleSheet, ScrollView } from "react-native";
+import { DynamicFilterView, macOSColors, night, FileText, FileCode, Zap, Settings, Eye, Layers, ToolbarCopyButton, ExportPreview } from "@buoy-gg/shared-ui";
 import { DEFAULT_COPY_SETTINGS, COPY_PRESETS, PRESET_METADATA, detectActivePreset } from "../types/copySettings";
 import { generateExport, estimateExportSize, getExportSummary } from "../utils/rendersExportFormatter";
 import { loadCopySettings, saveCopySettings } from "../utils/copySettingsStorage";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_WARNING_THRESHOLD = 50 * 1024;
 const SIZE_DANGER_THRESHOLD = 200 * 1024;
 const CAUSE_OPTIONS = [{
@@ -191,77 +191,35 @@ export function RendersCopySettingsView({
       totalComponents,
       totalRenders
     } = getExportSummary(previewRenders);
-    if (!isPreviewExpanded) {
-      const warningColor = sizeWarningLevel === "danger" ? night.color.danger : sizeWarningLevel === "warning" ? night.color.warning : night.color.textSecondary;
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.collapsedPreview,
-        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-          testID: "buoy-highlight-copy-preview-show",
-          accessibilityRole: "button",
-          accessibilityLabel: "Show preview",
-          style: styles.expandButton,
-          onPress: () => setIsPreviewExpanded(true),
-          children: /*#__PURE__*/_jsxs(View, {
-            style: styles.expandButtonContent,
-            children: [/*#__PURE__*/_jsx(Eye, {
-              size: 16,
-              color: night.color.info
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.expandButtonTextContainer,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.expandButtonTitle,
-                children: "Show Preview"
-              }), /*#__PURE__*/_jsxs(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__*/_jsx(ChevronDown, {
-              size: 16,
-              color: night.color.textTertiary
-            })]
+    return /*#__PURE__*/_jsx(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__*/_jsx(ScrollView, {
+          testID: "buoy-highlight-copy-preview-scroll",
+          style: styles.previewScroll,
+          nestedScrollEnabled: true,
+          children: /*#__PURE__*/_jsx(Text, {
+            testID: "buoy-highlight-copy-preview-text",
+            style: styles.previewText,
+            selectable: true,
+            children: exportText
           })
-        }), sizeWarningLevel !== "none" && /*#__PURE__*/_jsxs(View, {
-          testID: "buoy-highlight-copy-size-warning",
-          style: [styles.sizeWarning, sizeWarningLevel === "danger" && styles.sizeWarningDanger],
-          children: [/*#__PURE__*/_jsx(AlertTriangle, {
-            size: 12,
-            color: warningColor
-          }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-        testID: "buoy-highlight-copy-preview-hide",
-        accessibilityRole: "button",
-        accessibilityLabel: "Hide preview",
-        style: styles.collapseButton,
-        onPress: () => setIsPreviewExpanded(false),
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.collapseButtonText,
-          children: "Hide Preview"
-        }), /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: night.color.textSecondary
-        })]
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        testID: "buoy-highlight-copy-preview-scroll",
-        style: styles.previewScroll,
-        nestedScrollEnabled: true,
-        children: /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-copy-preview-text",
-          style: styles.previewText,
-          selectable: true,
-          children: exportText
-        })
-      })]
+        });
+      }
     });
   }, [isPreviewExpanded, previewRenders, estimatedSize, sizeWarningLevel, hasLiveData, generateCopyText]);
   const renderPreviewHeaderActions = useCallback(() => {
@@ -486,71 +444,6 @@ export function RendersCopySettingsView({
   });
 }
 const styles = StyleSheet.create({
-  collapsedPreview: {
-    gap: 8
-  },
-  expandButton: {
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12
-  },
-  expandButtonContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10
-  },
-  expandButtonTextContainer: {
-    flex: 1
-  },
-  expandButtonTitle: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  expandButtonSubtitle: {
-    fontSize: 11,
-    color: night.color.textSecondary,
-    marginTop: 2
-  },
-  collapseButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 6,
-    paddingVertical: 8,
-    marginBottom: 8,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  collapseButtonText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: night.color.textSecondary
-  },
-  sizeWarning: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    backgroundColor: night.color.warningSoft,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.warning + "30"
-  },
-  sizeWarningDanger: {
-    backgroundColor: night.color.dangerSoft,
-    borderColor: night.color.danger + "30"
-  },
-  sizeWarningText: {
-    fontSize: 11,
-    fontWeight: "500",
-    flex: 1
-  },
   previewScroll: {
     maxHeight: 360
   },

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

@@ -3,41 +3,24 @@
 /**
  * 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).
  */
 
-import { persistentStorage, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+import { definePersistedSetting, devToolsStorageKeys } from "@buoy-gg/shared-ui";
 import { DEFAULT_COPY_SETTINGS } from "../types/copySettings";
+const copySettings = definePersistedSetting(devToolsStorageKeys.highlightUpdates.copySettings(), DEFAULT_COPY_SETTINGS, {
+  sanitize: (merged, stored) => ({
+    ...merged,
+    filterCauses: stored?.filterCauses ?? DEFAULT_COPY_SETTINGS.filterCauses
+  })
+});
 export async function saveCopySettings(settings) {
-  try {
-    const key = devToolsStorageKeys.highlightUpdates.copySettings();
-    await persistentStorage.setItem(key, JSON.stringify(settings));
-  } catch {
-    // Silently fail — persistence is optional
-  }
+  await copySettings.save(settings);
 }
 export async function loadCopySettings() {
-  try {
-    const key = devToolsStorageKeys.highlightUpdates.copySettings();
-    const value = await persistentStorage.getItem(key);
-    if (value && value !== "") {
-      const parsed = JSON.parse(value);
-      return {
-        ...DEFAULT_COPY_SETTINGS,
-        ...parsed,
-        filterCauses: parsed.filterCauses ?? DEFAULT_COPY_SETTINGS.filterCauses
-      };
-    }
-    return null;
-  } catch {
-    return null;
-  }
+  return copySettings.loadOrNull();
 }
 export async function clearCopySettings() {
-  try {
-    const key = devToolsStorageKeys.highlightUpdates.copySettings();
-    await persistentStorage.removeItem(key);
-  } catch {
-    // Silently fail
-  }
+  await copySettings.clear();
 }

package/lib/typescript/highlight-updates/components/ModalHeaderContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/components/ModalHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAIL,SAAS,EAEV,MAAM,cAAc,CAAC;AAmBtB,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;CACnD;AAkDD,eAAO,MAAM,aAAa,gDAAqB,CAAC;AAMhD,UAAU,kBAAkB;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;CACrB;AAyHD,eAAO,MAAM,aAAa,gDAAqB,CAAC;AAMhD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,iDAgDzB,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,mDA4B3B,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,mDAyB3B,CAAC;AAMH,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,yDAYjC,CAAC"}
+{"version":3,"file":"ModalHeaderContent.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/components/ModalHeaderContent.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,EAIL,SAAS,EAEV,MAAM,cAAc,CAAC;AAmBtB,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;CACnD;AAgCD,eAAO,MAAM,aAAa,gDAAqB,CAAC;AAMhD,UAAU,kBAAkB;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;CACrB;AAyHD,eAAO,MAAM,aAAa,gDAAqB,CAAC;AAMhD,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,iDAgDzB,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,mDA4B3B,CAAC;AAMH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAElD,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,aAAa,CAAC;IACzB,WAAW,EAAE,CAAC,GAAG,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,mDAyB3B,CAAC;AAMH,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,sBAAsB,yDAYjC,CAAC"}

package/lib/typescript/highlight-updates/components/RendersCopySettingsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RendersCopySettingsView.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/components/RendersCopySettingsView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAqBH,OAAO,KAAK,EAAE,aAAa,EAAmB,MAAM,wBAAwB,CAAC;AAmB7E,UAAU,4BAA4B;IACpC,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA+ED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,GACR,EAAE,4BAA4B,+BAsb9B"}
+{"version":3,"file":"RendersCopySettingsView.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/components/RendersCopySettingsView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAsBH,OAAO,KAAK,EAAE,aAAa,EAAmB,MAAM,wBAAwB,CAAC;AAmB7E,UAAU,4BAA4B;IACpC,OAAO,EAAE,aAAa,EAAE,CAAC;CAC1B;AA+ED,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,GACR,EAAE,4BAA4B,+BAuY9B"}

package/lib/typescript/highlight-updates/utils/copySettingsStorage.d.ts

@@ -1,7 +1,8 @@
 /**
  * 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).
  */
 import type { RendersCopySettings } from "../types/copySettings";
 export declare function saveCopySettings(settings: RendersCopySettings): Promise<void>;

package/lib/typescript/highlight-updates/utils/copySettingsStorage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"copySettingsStorage.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/utils/copySettingsStorage.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGjE,wBAAsB,gBAAgB,CACpC,QAAQ,EAAE,mBAAmB,GAC5B,OAAO,CAAC,IAAI,CAAC,CAOf;AAED,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAiB5E;AAED,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC,CAOvD"}
+{"version":3,"file":"copySettingsStorage.d.ts","sourceRoot":"","sources":["../../../../src/highlight-updates/utils/copySettingsStorage.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAgBjE,wBAAsB,gBAAgB,CAAC,QAAQ,EAAE,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,CAEnF;AAED,wBAAsB,gBAAgB,IAAI,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAE5E;AAED,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC,CAEvD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/highlight-updates",
-  "version": "7.0.33",
+  "version": "7.0.34",
   "description": "Render highlighter for React Native — see every render with its cause: mount, state, props, or parent. Part of Buoy devtools.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,14 +26,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "^7.0.33",
-    "@buoy-gg/shared-ui": "^7.0.33"
+    "@buoy-gg/shared-ui": "^7.0.34",
+    "@buoy-gg/floating-tools-core": "^7.0.34"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "7.0.33",
+    "@buoy-gg/license": "7.0.34",
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/core": "^7.0.33"
+    "@buoy-gg/core": "^7.0.34"
   },
   "peerDependenciesMeta": {
     "@buoy-gg/core": {
@@ -44,8 +44,8 @@
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/core": "^7.0.33",
-    "@buoy-gg/license": "^7.0.33"
+    "@buoy-gg/core": "^7.0.34",
+    "@buoy-gg/license": "^7.0.34"
   },
   "react-native-builder-bob": {
     "source": "src",