@buoy-gg/shared-ui 7.0.16 → 7.0.18

package/lib/module/dataViewer/objectDiff.js

@@ -0,0 +1,297 @@
+"use strict";
+
+/**
+ * objectDiff — the bounded, cycle-safe diff KERNEL the dataViewer never had.
+ *
+ * Every diff consumer so far either hand-rolled a private summary helper or
+ * fed whole values into the render-layer viewers (which compute eagerly, have
+ * no cycle guards, and mis-compare rich types — TreeDiffViewer treats two
+ * different Dates/Maps/Sets as EQUAL because they have zero own keys).
+ *
+ * This kernel is for VERDICTS and BADGES, not rendering:
+ * - correct equality for Date / RegExp / Map / Set / BigInt / NaN /
+ *   TypedArray / URL / Error, and `undefined`-value vs absent-key
+ * - WeakSet cycle guard (a revisited pair reports unequal-safe truncation,
+ *   never a stack overflow)
+ * - hard depth + node budgets with an explicit `truncated` flag; when the
+ *   budget runs out a subtree is reported as CHANGED (a false "changed" is
+ *   recoverable — a false "unchanged" hides a real difference, the worst
+ *   failure mode for a restore preview)
+ *
+ * `toDiffable` is the companion RENDER normalizer: it converts rich types to
+ * plain-JSON stand-ins so the existing viewers (which only handle plain JSON
+ * faithfully) never see a Date/Map/Set/BigInt/cycle at all.
+ */
+
+function isPlainObjectLike(v) {
+  if (typeof v !== "object" || v === null) return false;
+  const proto = Object.getPrototypeOf(v);
+  return proto === Object.prototype || proto === null;
+}
+function isTypedArray(v) {
+  return ArrayBuffer.isView(v) && !(v instanceof DataView);
+}
+
+/**
+ * Bounded deep equality. Returns false on budget exhaustion (conservative:
+ * report changed rather than hide a change) and marks the budget truncated.
+ */
+export function boundedDeepEqual(a, b, options) {
+  const budget = {
+    nodes: options?.maxNodes ?? 2000,
+    truncated: false
+  };
+  return deepEqual(a, b, options?.maxDepth ?? 8, budget, new WeakSet());
+}
+function deepEqual(a, b, depth, budget, seen) {
+  if (budget.nodes-- <= 0) {
+    budget.truncated = true;
+    return false;
+  }
+  // NaN-equal, -0-distinct — Object.is has the right scalar semantics.
+  if (Object.is(a, b)) return true;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== "object" || a === null || b === null) {
+    // Distinct functions: treated as EQUAL — providers strip/preserve them
+    // and reference inequality across a serialization boundary is pure noise.
+    return typeof a === "function" && typeof b === "function";
+  }
+
+  // Rich types the render-layer viewers get wrong:
+  if (a instanceof Date || b instanceof Date) {
+    return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+  }
+  if (a instanceof RegExp || b instanceof RegExp) {
+    return a instanceof RegExp && b instanceof RegExp && a.source === b.source && a.flags === b.flags;
+  }
+  if (a instanceof Error || b instanceof Error) {
+    return a instanceof Error && b instanceof Error && a.name === b.name && a.message === b.message;
+  }
+  if (typeof URL !== "undefined" && (a instanceof URL || b instanceof URL)) {
+    return a instanceof URL && b instanceof URL && a.href === b.href;
+  }
+  if (isTypedArray(a) || isTypedArray(b)) {
+    if (!isTypedArray(a) || !isTypedArray(b)) return false;
+    if (a.constructor !== b.constructor || a.byteLength !== b.byteLength) {
+      return false;
+    }
+    const ua = new Uint8Array(a.buffer, a.byteOffset, a.byteLength);
+    const ub = new Uint8Array(b.buffer, b.byteOffset, b.byteLength);
+    for (let i = 0; i < ua.length; i++) if (ua[i] !== ub[i]) return false;
+    return true;
+  }
+  if (depth <= 0) {
+    budget.truncated = true;
+    return false;
+  }
+  // Cycle guard: a revisited left-side object ends the walk for this branch.
+  // Reporting unequal here is the conservative direction.
+  if (seen.has(a)) {
+    budget.truncated = true;
+    return false;
+  }
+  seen.add(a);
+  if (a instanceof Map || b instanceof Map) {
+    if (!(a instanceof Map) || !(b instanceof Map) || a.size !== b.size) {
+      return false;
+    }
+    // Insertion-order comparison — superjson round-trips preserve it, and
+    // order-insensitive matching with object keys is quadratic.
+    const ea = Array.from(a.entries());
+    const eb = Array.from(b.entries());
+    for (let i = 0; i < ea.length; i++) {
+      if (!deepEqual(ea[i][0], eb[i][0], depth - 1, budget, seen)) return false;
+      if (!deepEqual(ea[i][1], eb[i][1], depth - 1, budget, seen)) return false;
+    }
+    return true;
+  }
+  if (a instanceof Set || b instanceof Set) {
+    if (!(a instanceof Set) || !(b instanceof Set) || a.size !== b.size) {
+      return false;
+    }
+    const va = Array.from(a.values());
+    const vb = Array.from(b.values());
+    for (let i = 0; i < va.length; i++) {
+      if (!deepEqual(va[i], vb[i], depth - 1, budget, seen)) return false;
+    }
+    return true;
+  }
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i], depth - 1, budget, seen)) return false;
+    }
+    return true;
+  }
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  for (const k of ka) {
+    if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+    if (!deepEqual(a[k], b[k], depth - 1, budget, seen)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * Top-level key diff of two values with bounded deep equality per key.
+ * Non-object inputs degrade to a single implicit "value" comparison.
+ */
+export function objectDiff(oldValue, newValue, options) {
+  const maxDepth = options?.maxDepth ?? 8;
+  const budget = {
+    nodes: options?.maxNodes ?? 2000,
+    truncated: false
+  };
+  const oldIsObj = isPlainObjectLike(oldValue);
+  const newIsObj = isPlainObjectLike(newValue);
+  if (!oldIsObj || !newIsObj) {
+    const equal = deepEqual(oldValue, newValue, maxDepth, budget, new WeakSet());
+    return {
+      equal,
+      addedKeys: [],
+      removedKeys: [],
+      changedKeys: equal ? [] : ["value"],
+      truncated: budget.truncated
+    };
+  }
+  const addedKeys = [];
+  const removedKeys = [];
+  const changedKeys = [];
+  const oldObj = oldValue;
+  const newObj = newValue;
+  for (const k of Object.keys(oldObj)) {
+    if (!Object.prototype.hasOwnProperty.call(newObj, k)) {
+      removedKeys.push(k);
+    } else if (!deepEqual(oldObj[k], newObj[k], maxDepth - 1, budget, new WeakSet())) {
+      changedKeys.push(k);
+    }
+  }
+  for (const k of Object.keys(newObj)) {
+    if (!Object.prototype.hasOwnProperty.call(oldObj, k)) addedKeys.push(k);
+  }
+  return {
+    equal: addedKeys.length === 0 && removedKeys.length === 0 && changedKeys.length === 0,
+    addedKeys,
+    removedKeys,
+    changedKeys,
+    truncated: budget.truncated
+  };
+}
+
+// ============================================================================
+// toDiffable — render normalizer
+// ============================================================================
+
+const TO_DIFFABLE_MAX_DEPTH = 12;
+
+/**
+ * Convert a value tree into plain JSON the render-layer diff viewers handle
+ * faithfully. Dates → ISO strings, Maps → objects, Sets → arrays,
+ * BigInt → "123n", TypedArrays/cycles/depth-overflow → placeholder strings.
+ * Functions become "[Function]" (providers have already recorded real ones).
+ */
+export function toDiffable(value) {
+  return normalizeForDiff(value, TO_DIFFABLE_MAX_DEPTH, new WeakSet());
+}
+function normalizeForDiff(value, depth, seen) {
+  if (value === null || value === undefined) return value;
+  const t = typeof value;
+  if (t === "string" || t === "boolean") return value;
+  if (t === "number") {
+    return Number.isFinite(value) ? value : String(value);
+  }
+  if (t === "bigint") return `${String(value)}n`;
+  if (t === "function") return "[Function]";
+  if (t === "symbol") return String(value);
+  if (t !== "object") return String(value);
+  if (value instanceof Date) return value.toISOString();
+  if (value instanceof RegExp) return String(value);
+  if (value instanceof Error) return `[${value.name}: ${value.message}]`;
+  if (typeof URL !== "undefined" && value instanceof URL) return value.href;
+  if (isTypedArray(value)) {
+    return `<${value.constructor.name} ${value.byteLength} bytes>`;
+  }
+  if (depth <= 0) return "[Max depth]";
+  if (seen.has(value)) return "[Circular]";
+  seen.add(value);
+  if (value instanceof Map) {
+    const out = {};
+    for (const [k, v] of value.entries()) {
+      const key = typeof k === "string" ? k : JSON.stringify(toDiffable(k));
+      out[key] = normalizeForDiff(v, depth - 1, seen);
+    }
+    return out;
+  }
+  if (value instanceof Set) {
+    return Array.from(value.values()).map(v => normalizeForDiff(v, depth - 1, seen));
+  }
+  if (Array.isArray(value)) {
+    return value.map(v => normalizeForDiff(v, depth - 1, seen));
+  }
+  const out = {};
+  for (const [k, v] of Object.entries(value)) {
+    out[k] = normalizeForDiff(v, depth - 1, seen);
+  }
+  return out;
+}
+
+// ============================================================================
+// Size probe — O(limit) early-bail, cycle-safe
+// ============================================================================
+
+/**
+ * True when `value`'s JSON form is likely larger than `limitBytes`. Iterative
+ * walk that bails the moment the running estimate crosses the limit, so cost
+ * is O(limit) regardless of payload size (the redux store's `jsonLongerThan`
+ * lesson: a full stringify per check froze enterprise-scale apps).
+ */
+export function jsonLikelyLargerThan(value, limitBytes) {
+  let size = 0;
+  const stack = [value];
+  const seenObjects = new Set();
+  while (stack.length > 0) {
+    const v = stack.pop();
+    if (v === null || v === undefined) {
+      size += 4;
+    } else if (typeof v === "string") {
+      size += v.length + 2;
+    } else if (typeof v === "number" || typeof v === "boolean") {
+      size += 8;
+    } else if (typeof v === "bigint") {
+      size += String(v).length + 1;
+    } else if (typeof v === "object") {
+      if (seenObjects.has(v)) continue;
+      seenObjects.add(v);
+      if (v instanceof Date || v instanceof RegExp) {
+        size += 32;
+      } else if (isTypedArray(v)) {
+        size += v.byteLength;
+      } else if (v instanceof Map) {
+        for (const [k, val] of v.entries()) {
+          stack.push(k, val);
+          size += 4;
+        }
+      } else if (v instanceof Set) {
+        for (const val of v.values()) {
+          stack.push(val);
+          size += 2;
+        }
+      } else if (Array.isArray(v)) {
+        for (const item of v) stack.push(item);
+        size += 2 * v.length + 2;
+      } else {
+        for (const [k, val] of Object.entries(v)) {
+          size += k.length + 4;
+          stack.push(val);
+        }
+      }
+    }
+    if (size > limitBytes) return true;
+  }
+  return false;
+}

package/lib/module/hooks/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 export { useFilterManager } from "./useFilterManager.js";
+export { usePersistedState } from "./usePersistedState.js";
 export { useSafeAreaInsets } from "./useSafeAreaInsets.js";
 export { getSafeAreaInsets } from "./useSafeAreaInsets.js";
 export { useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./useDeviceInfo.js";

package/lib/module/hooks/safe-area-impl.js

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-06T20:33:57.771Z
+ * Generated at: 2026-08-14T00:03:32.153Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/hooks/usePersistedState.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { persistentStorage } from "../utils/persistentStorage.js";
+
+/**
+ * Per-key cache so remounts (and multiple consumers of the same key) render
+ * the last-known value immediately instead of flashing the default while the
+ * async backend loads again.
+ */
+const hydratedCache = new Map();
+
+/**
+ * `useState` persisted through `persistentStorage` (FileSystem → AsyncStorage
+ * → memory). Replaces the load-then-`hasLoaded`-guard `useEffect` pattern
+ * every tool used to hand-roll.
+ *
+ * Values are JSON-serialized; the default is returned until hydration
+ * completes (subsequent mounts of the same key hydrate synchronously from an
+ * in-memory cache). The third tuple element reports hydration so callers can
+ * defer writes that must not clobber a not-yet-loaded value.
+ *
+ * ```tsx
+ * const [tab, setTab, tabHydrated] = usePersistedState("@react_buoy_custom_flags_tab", "flags");
+ * ```
+ */
+export function usePersistedState(key, defaultValue) {
+  const [value, setValue] = useState(() => hydratedCache.has(key) ? hydratedCache.get(key) : defaultValue);
+  const [hydrated, setHydrated] = useState(() => hydratedCache.has(key));
+  const keyRef = useRef(key);
+  keyRef.current = key;
+  useEffect(() => {
+    if (hydratedCache.has(key)) {
+      setValue(hydratedCache.get(key));
+      setHydrated(true);
+      return;
+    }
+    let cancelled = false;
+    persistentStorage.getItem(key).then(raw => {
+      if (cancelled) return;
+      if (raw != null) {
+        try {
+          const parsed = JSON.parse(raw);
+          hydratedCache.set(key, parsed);
+          setValue(parsed);
+        } catch {
+          // Corrupt payload — fall back to the default and let the next
+          // write repair it.
+        }
+      }
+      setHydrated(true);
+    }).catch(() => {
+      if (!cancelled) setHydrated(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key]);
+  const set = useCallback(next => {
+    setValue(prev => {
+      const resolved = typeof next === "function" ? next(prev) : next;
+      hydratedCache.set(keyRef.current, resolved);
+      persistentStorage.setItem(keyRef.current, JSON.stringify(resolved)).catch(() => {});
+      return resolved;
+    });
+  }, []);
+  return [value, set, hydrated];
+}

package/lib/module/icons/index.js

@@ -11,6 +11,7 @@ export { EnvIcon, ENV_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 // into core, so these are the same artwork the Flutter build renders. Tool
 // packages re-export from here rather than drawing their own copies.
 export { ConsoleIcon, CONSOLE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { TimeMachineIcon, TIME_MACHINE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { ImagesIcon, IMAGES_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { AssetsIcon, ASSETS_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { ImpersonateIcon, IMPERSONATE_ICON_COLOR } from "@buoy-gg/floating-tools-core";

package/lib/module/index.js

@@ -5,6 +5,7 @@ export * from "./ui/index.js";
 
 // Store base classes
 export * from "./stores/index.js";
+export * from "./sync/wireBudget.js";
 
 // Utils exports - selectively export to avoid conflicts
 export {
@@ -26,6 +27,10 @@ parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath,
 loadOptionalModule, getCachedOptionalModule,
 // Render-commit capture bridge (provider: highlight-updates, consumer: perf-monitor)
 setRenderCaptureProvider, getRenderCaptureProvider,
+// State snapshot bridge (providers: storage/redux/zustand/jotai/react-query, consumer: time-machine)
+registerStateSnapshotProvider, getStateSnapshotProviders, getStateSnapshotProvider, subscribeToStateSnapshotProviders,
+// Minimal superjson (Date/Map/Set/BigInt-safe round-trip) for snapshot payloads
+superJsonSerialize, superJsonDeserialize,
 // JS-bundle reload (core's `app` adapter + perf-monitor's batch runner)
 reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS,
 // Subscribable base class for self-managing listeners
@@ -50,7 +55,7 @@ export * from "./clipboard/index.js";
 export * from "./logger/index.js";
 export * from "./settings/index.js";
 export * from "./storage/index.js";
-export { useSafeAreaInsets, useFilterManager, useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./hooks/index.js";
+export { useSafeAreaInsets, useFilterManager, usePersistedState, useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./hooks/index.js";
 
 // JsModal
 export { JsModal } from "./JsModal";

package/lib/module/storage/devToolsStorageKeys.js

@@ -31,6 +31,28 @@ export const devToolsStorageKeys = {
     dimensions: () => `${devToolsStorageKeys.modal.root()}_dimensions`,
     hintAcknowledged: () => `${devToolsStorageKeys.modal.root()}_hint_acknowledged`
   },
+  /**
+   * Namespace factory for third-party custom tools. Keys share the
+   * `@react_buoy` prefix, so `isDevToolsStorageKey` filtering (and the Storage
+   * tool's internal-key handling) covers custom-tool persistence for free.
+   *
+   * ```ts
+   * const keys = devToolsStorageKeys.custom("feature-flags");
+   * keys.modal();          // "@react_buoy_custom_feature-flags_modal"
+   * keys.key("overrides"); // "@react_buoy_custom_feature-flags_overrides"
+   * ```
+   */
+  custom: toolId => {
+    const root = `${devToolsStorageKeys.base}_custom_${toolId}`;
+    return {
+      root: () => root,
+      /** JsModal `persistenceKey` for this tool's window dimensions. */
+      modal: () => `${root}_modal`,
+      settings: () => `${root}_settings`,
+      /** Arbitrary tool-scoped key. */
+      key: suffix => `${root}_${suffix}`
+    };
+  },
   /**
    * Settings-related storage keys
    */
@@ -97,6 +119,15 @@ export const devToolsStorageKeys = {
     isMonitoring: () => `${devToolsStorageKeys.storage.root()}_is_monitoring`,
     diffViewerMode: () => `${devToolsStorageKeys.storage.root()}_diff_viewer_mode` // 'split' | 'tree'
   },
+  /**
+   * Time Machine storage keys. NOTE: the snapshot VAULT keys
+   * (`@react_buoy_time_machine:index` / `:snap:*`) predate this namespace and
+   * stay as-is — only preferences live here.
+   */
+  timeMachine: {
+    root: () => `${devToolsStorageKeys.base}_time_machine`,
+    diffViewerMode: () => `${devToolsStorageKeys.timeMachine.root()}_diff_viewer_mode` // 'split' | 'tree'
+  },
   /**
    * React Query-related storage keys
    */

package/lib/module/sync/wireBudget.js

@@ -0,0 +1,92 @@
+"use strict";
+
+/**
+ * Size guards for anything a tool puts on the sync wire.
+ *
+ * Every adapter faces the same problem: a snapshot is rebuilt and serialized
+ * on the device's JS thread ~5x/sec while a dashboard watches, and one fat or
+ * unserializable field can either freeze that thread or blow the emit layer's
+ * budget — which drops the WHOLE snapshot and leaves the panel stale.
+ *
+ * Two rules make that safe, and both are easy to get subtly wrong, which is
+ * why they live here instead of being copied per adapter:
+ *
+ *  1. NEVER measure by serializing. `JSON.stringify(value).length` is
+ *     O(payload) and allocates the whole string — an unbounded cost to
+ *     enforce a 16KB cap, i.e. the protection becomes the freeze. Walk with
+ *     an early abort instead: the cost is O(limit) no matter how big the
+ *     value, and a string costs a length read rather than a scan.
+ *
+ *  2. Only reach for `JSON.stringify` when the walk saw something that could
+ *     actually make it throw. A value straight out of `JSON.parse` — which is
+ *     what a network body or a stored string is — is a finite tree of plain
+ *     values and can never throw, so the check is pure waste on the common
+ *     path.
+ */
+
+import { isJsonSerializable } from "../utils/typeHelpers.js";
+/**
+ * Approximate JSON size, aborting as soon as `limit` is passed — O(limit),
+ * never O(payload). Returns the bytes counted so far, so one walk can both
+ * threshold ("over the per-field cap?") and accumulate ("how much of the
+ * snapshot budget is left?").
+ */
+export function approxJsonSize(value, limit) {
+  let bytes = 0;
+  let sawRepeat = false;
+  let sawBigInt = false;
+  const stack = [value];
+  const seen = new Set();
+  while (stack.length > 0) {
+    if (bytes > limit) return {
+      bytes,
+      sawRepeat,
+      sawBigInt
+    };
+    const v = stack.pop();
+    if (v === null || v === undefined) bytes += 4;else if (typeof v === "string") bytes += v.length + 2; // O(1), no scan
+    else if (typeof v === "number") bytes += 8;else if (typeof v === "boolean") bytes += 5;else if (typeof v === "object") {
+      if (seen.has(v)) {
+        sawRepeat = true;
+        continue;
+      }
+      seen.add(v);
+      if (Array.isArray(v)) {
+        bytes += 2 + v.length;
+        for (let i = 0; i < v.length; i++) stack.push(v[i]);
+      } else {
+        bytes += 2;
+        for (const k in v) {
+          bytes += k.length + 4;
+          stack.push(v[k]);
+        }
+      }
+    } else {
+      if (typeof v === "bigint") sawBigInt = true;
+      bytes += 4;
+    }
+  }
+  return {
+    bytes,
+    sawRepeat,
+    sawBigInt
+  };
+}
+
+/**
+ * Should this value be withheld from the wire — too big, or unserializable?
+ *
+ * The ordering is the point: measure with the early-abort walk, and only pay
+ * for `JSON.stringify` when the walk found a reason it might throw.
+ */
+export function isOverWireBudget(value, limit) {
+  const walk = approxJsonSize(value, limit);
+  if (walk.bytes > limit) return true;
+  // A finished walk with no repeated reference and no bigint cannot throw.
+  //
+  // Not exhaustive even then: a `toJSON`/getter that throws is invisible to
+  // the walk, so callers handling hostile payloads should still guard their
+  // own conversion. `safeEmit` is the last backstop.
+  if (!walk.sawRepeat && !walk.sawBigInt) return false;
+  return !isJsonSerializable(value);
+}

package/lib/module/ui/components/HeaderSearchButton.js

@@ -8,12 +8,17 @@ export function HeaderSearchButton({
   onPress,
   size = 14,
   color = gameUIColors.secondary,
-  style
+  style,
+  accessibilityLabel = "Search",
+  testID
 }) {
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     onPress: onPress,
     style: [styles.button, style],
     activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
     children: /*#__PURE__*/_jsx(Search, {
       size: size,
       color: color

package/lib/module/ui/components/ModalHeader.js

@@ -1,7 +1,8 @@
 "use strict";
 
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { ChevronLeft, X } from "../../icons/index.js";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { useEffect, useRef } from "react";
+import { ChevronLeft, Search as SearchIcon, X } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 
 // Base ModalHeader container component
@@ -111,10 +112,51 @@ export function Actions({
 }
 Actions.displayName = "ModalHeaderActions";
 
+// Expanding search input for the header. Render this IN PLACE OF
+// `ModalHeader.Content` while search is active — it fills the same flex slot.
+// Extracts the idiom env/network/storage each hand-rolled (~50 lines apiece).
+
+export function HeaderSearch({
+  value,
+  onChangeText,
+  onCancel,
+  placeholder = "Search...",
+  autoFocus = true
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus) inputRef.current?.focus();
+  }, [autoFocus]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.searchContainer,
+    children: [/*#__PURE__*/_jsx(SearchIcon, {
+      size: 12,
+      color: buoyColors.textSecondary
+    }), /*#__PURE__*/_jsx(TextInput, {
+      ref: inputRef,
+      style: styles.searchInput,
+      placeholder: placeholder,
+      placeholderTextColor: buoyColors.textMuted,
+      value: value,
+      onChangeText: onChangeText,
+      autoCorrect: false,
+      autoCapitalize: "none"
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onCancel,
+      style: styles.searchCancelButton,
+      children: /*#__PURE__*/_jsx(X, {
+        size: 12,
+        color: buoyColors.textSecondary
+      })
+    })]
+  });
+}
+
 // Attach sub-components to the main component
 ModalHeader.Navigation = Navigation;
 ModalHeader.Content = Content;
 ModalHeader.Actions = Actions;
+ModalHeader.Search = HeaderSearch;
 const styles = StyleSheet.create({
   headerContainer: {
     flexDirection: "row",
@@ -162,5 +204,31 @@ const styles = StyleSheet.create({
   },
   headerContentNoMargin: {
     marginHorizontal: 0
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    backgroundColor: buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    marginHorizontal: 12,
+    marginVertical: 4,
+    height: 32,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  searchInput: {
+    flex: 1,
+    marginLeft: 8,
+    fontSize: 13,
+    color: buoyColors.text,
+    padding: 0,
+    height: "100%"
+  },
+  searchCancelButton: {
+    padding: 4,
+    marginLeft: 4
   }
 });