@buoy-gg/storage 7.0.3 → 7.0.5

package/lib/commonjs/storage/utils/setStorageValue.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setStorageValue = setStorageValue;
+exports.storageEditBlockedReason = storageEditBlockedReason;
+exports.storageValueToEditableText = storageValueToEditableText;
+exports.structuredStorageValue = structuredStorageValue;
+exports.validateStorageValue = validateStorageValue;
+var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
+var _SecureStoreRegistry = require("./SecureStoreRegistry");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Writing a storage value back, in one place.
+ *
+ * The counterpart to `deleteStorageKeys` — and the same reasoning applies: each
+ * backend writes differently, and a second copy of that fan-out is how one
+ * backend quietly starts corrupting values.
+ *
+ * The hard part is NOT the write, it's the types:
+ *
+ * - **AsyncStorage** stores strings only. A value that was stored as JSON must
+ *   stay valid JSON, or an object silently becomes a quoted string and the app
+ *   that reads it breaks in a way that looks nothing like a devtools edit.
+ * - **MMKV** is natively typed (string / number / boolean / buffer). Writing
+ *   `"42"` over a number turns it into a string, so the original type is
+ *   restored from `valueType`. Buffers can't round-trip at all — the snapshot
+ *   only ever carried a `<ArrayBuffer n bytes>` placeholder.
+ * - **SecureStore** stores strings, and biometric-protected keys are never
+ *   touched (writing needs the same auth prompt reading does).
+ *
+ * Pro gating and confirmation are deliberately NOT here; they belong to the UI
+ * that has the user's attention. This assumes the caller already asked.
+ */
+
+/**
+ * Why a key can't be edited, or null when it can. UI uses this both to hide the
+ * edit affordance and to explain itself, rather than failing at save time.
+ */
+function storageEditBlockedReason(storageKey, mmkvInstances = []) {
+  if (storageKey.storageType === "mmkv") {
+    if (storageKey.valueType === "buffer") {
+      return "Buffer values can't be edited — the tool only ever sees their byte length, not their contents.";
+    }
+    const instance = mmkvInstances.find(i => i.id === (storageKey.instanceId || "default"));
+    if (instance?.readOnly) {
+      return `MMKV instance "${instance.id}" is registered read-only.`;
+    }
+  }
+  if (storageKey.storageType === "secure") {
+    const entry = _SecureStoreRegistry.secureStoreRegistry.getAll().find(e => e.key === storageKey.key);
+    if (entry?.options.requireAuthentication) {
+      return "Biometric-protected keys can't be edited — writing one would fire an auth prompt.";
+    }
+    if (!_SecureStoreRegistry.secureStoreRegistry.getModule()) {
+      return "No SecureStore module is registered.";
+    }
+  }
+  return null;
+}
+
+/**
+ * Validate `raw` for this key WITHOUT writing. Returns an error message, or
+ * null when the text is acceptable. The editor calls this as you type.
+ */
+function validateStorageValue(storageKey, raw) {
+  if (storageKey.storageType === "mmkv") {
+    const type = mmkvTargetType(storageKey);
+    if (type === "number") {
+      if (raw.trim() === "" || Number.isNaN(Number(raw))) {
+        return "Must be a number — this MMKV key is stored as a number.";
+      }
+    }
+    if (type === "boolean") {
+      const t = raw.trim().toLowerCase();
+      if (t !== "true" && t !== "false") {
+        return 'Must be "true" or "false" — this MMKV key is stored as a boolean.';
+      }
+    }
+    return null;
+  }
+
+  // AsyncStorage + SecureStore are string-valued. Only guard the case where
+  // the CURRENT value is structured: silently flattening an object into a
+  // string is the corruption worth preventing. A plain string stays free-form.
+  if (isStructured(storageKey.value)) {
+    try {
+      JSON.parse(raw);
+    } catch (e) {
+      return `This key holds JSON — ${e instanceof Error ? e.message : "invalid JSON"}`;
+    }
+  }
+  return null;
+}
+
+/**
+ * The text an editor should open with: JSON pretty-printed so it's actually
+ * editable, everything else verbatim.
+ */
+function storageValueToEditableText(value) {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "string") {
+    // Values arrive already parsed when they were JSON, so a string here is a
+    // real string — except AsyncStorage hands back raw JSON text sometimes.
+    const trimmed = value.trim();
+    if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+      try {
+        return JSON.stringify(JSON.parse(value), null, 2);
+      } catch {
+        return value;
+      }
+    }
+    return value;
+  }
+  if (typeof value === "object") return JSON.stringify(value, null, 2);
+  return String(value);
+}
+
+/**
+ * The value as a STRUCTURE, for the tree editor to apply ops against.
+ *
+ * Backends disagree on how far they've already parsed: `useAsyncStorageKeys`
+ * hands back a parsed object, while MMKV reports its native type so a JSON blob
+ * arrives as the raw string. Both have to end up as the same thing before an op
+ * can address a path inside them.
+ *
+ * Returns `undefined` when the value isn't a container — scalars are edited
+ * through the plain value editor, not the tree.
+ */
+function structuredStorageValue(storageKey) {
+  const {
+    value
+  } = storageKey;
+  if (value !== null && typeof value === "object") return value;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return undefined;
+    try {
+      const parsed = JSON.parse(value);
+      return parsed !== null && typeof parsed === "object" ? parsed : undefined;
+    } catch {
+      return undefined;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Write `raw` to whichever backend holds this key, restoring the value's
+ * original type. Rejects (rather than writing something lossy) when the key
+ * isn't editable or the text doesn't fit the type — callers surface that.
+ */
+async function setStorageValue(storageKey, raw, mmkvInstances = []) {
+  const blocked = storageEditBlockedReason(storageKey, mmkvInstances);
+  if (blocked) throw new Error(blocked);
+  const invalid = validateStorageValue(storageKey, raw);
+  if (invalid) throw new Error(invalid);
+  switch (storageKey.storageType) {
+    case "async":
+      {
+        await _asyncStorage.default.setItem(storageKey.key, normalizeJsonText(storageKey, raw));
+        return;
+      }
+    case "secure":
+      {
+        await _SecureStoreRegistry.secureStoreRegistry.setValue(storageKey.key, normalizeJsonText(storageKey, raw));
+        return;
+      }
+    case "mmkv":
+      {
+        const instanceId = storageKey.instanceId || "default";
+        const target = mmkvInstances.find(i => i.id === instanceId);
+        if (!target) {
+          throw new Error(`MMKV instance "${instanceId}" is not registered.`);
+        }
+        target.instance.set(storageKey.key, coerceMMKV(storageKey, raw));
+        return;
+      }
+    default:
+      {
+        throw new Error(`Unsupported storage type "${String(storageKey.storageType)}"`);
+      }
+  }
+}
+
+/** True when the value is an object/array (so its text must stay valid JSON). */
+function isStructured(value) {
+  return value !== null && typeof value === "object";
+}
+
+/**
+ * Re-serialize JSON so the stored string is compact and canonical, matching
+ * what the app itself would have written with `JSON.stringify`. Free-form
+ * strings pass through untouched.
+ */
+function normalizeJsonText(storageKey, raw) {
+  if (!isStructured(storageKey.value)) return raw;
+  return JSON.stringify(JSON.parse(raw));
+}
+
+/** The MMKV native type to write back, defaulting to the current JS type. */
+function mmkvTargetType(storageKey) {
+  if (storageKey.valueType) return storageKey.valueType;
+  if (typeof storageKey.value === "number") return "number";
+  if (typeof storageKey.value === "boolean") return "boolean";
+  return "string";
+}
+function coerceMMKV(storageKey, raw) {
+  switch (mmkvTargetType(storageKey)) {
+    case "number":
+      return Number(raw);
+    case "boolean":
+      return raw.trim().toLowerCase() === "true";
+    default:
+      return raw;
+  }
+}

package/lib/commonjs/storage/utils/storageBrowserRefresh.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.onStorageBrowserRefresh = onStorageBrowserRefresh;
+exports.requestStorageBrowserRefresh = requestStorageBrowserRefresh;
+/**
+ * A "the underlying storage changed, re-read it" signal for the storage
+ * browser.
+ *
+ * On device the browser refreshes itself from the AsyncStorage/MMKV listeners,
+ * but those never fire in remote-mirror mode (the desktop dashboard suppresses
+ * local capture and receives the device's events as snapshots instead). Without
+ * this seam the browse tab is a one-shot read at mount — values stay frozen
+ * until the panel remounts, which is exactly the "shows old data until I switch
+ * tools and come back" behaviour.
+ *
+ * The dashboard calls {@link requestStorageBrowserRefresh} whenever a fresh
+ * device snapshot lands; the browser re-reads all three backends (debounced).
+ * It is a no-op when nothing is listening.
+ */
+
+const listeners = new Set();
+
+/**
+ * Subscribe to external refresh requests. Returns an unsubscribe function.
+ * @internal — used by the storage browser.
+ */
+function onStorageBrowserRefresh(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/**
+ * Ask any mounted storage browser to re-read AsyncStorage, MMKV and
+ * SecureStore. Safe to call at any rate — the browser debounces.
+ */
+function requestStorageBrowserRefresh() {
+  listeners.forEach(listener => {
+    try {
+      listener();
+    } catch {
+      // Listener errors are not ours
+    }
+  });
+}

package/lib/commonjs/storage/utils/storageOps.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STORAGE_OPS = void 0;
+exports.isInitialScan = isInitialScan;
+exports.storageOpDot = storageOpDot;
+exports.storageOpOf = storageOpOf;
+var _sharedUi = require("@buoy-gg/shared-ui");
+/**
+ * The five operations a storage event can be, and how to recognise one.
+ *
+ * AsyncStorage and MMKV each have their own action union, and neither maps
+ * cleanly onto what a reader wants to see — `multiRemove`, `removeItem` and
+ * `delete` are one idea wearing three names. These collapse both onto a single
+ * vocabulary so every surface labels, filters and colours events the same way.
+ *
+ * This is semantics, not presentation: it lives in `utils` rather than beside
+ * any one view, so a view can be deleted without taking the vocabulary with it.
+ */
+
+const STORAGE_OPS = exports.STORAGE_OPS = ["SET", "GET", "MERGE", "DELETE", "CLEAR"];
+const OP_DOT = {
+  SET: _sharedUi.macOSColors.semantic.info,
+  GET: _sharedUi.macOSColors.text.muted,
+  MERGE: _sharedUi.macOSColors.semantic.debug,
+  DELETE: _sharedUi.macOSColors.semantic.error,
+  CLEAR: _sharedUi.macOSColors.semantic.warning
+};
+function storageOpDot(op) {
+  return OP_DOT[op];
+}
+
+/** Both backends' action unions, collapsed onto the five display operations. */
+function storageOpOf(event) {
+  const action = event.action;
+  if (action === "clear" || action === "clearAll") return "CLEAR";
+  if (action.startsWith("get.")) return "GET";
+  if (action === "removeItem" || action === "multiRemove" || action === "delete") return "DELETE";
+  if (action === "mergeItem" || action === "multiMerge") return "MERGE";
+  return "SET";
+}
+
+/**
+ * The store synthesises one event per existing key when it first subscribes, so
+ * the list isn't empty on open. Those are a SNAPSHOT, not a write: the key
+ * already held that value, so there is no "before" to diff against and showing
+ * one would invent a change that never happened.
+ */
+function isInitialScan(event) {
+  return Boolean(event.data?.initialScan);
+}

package/lib/commonjs/storage/utils/storageTimeTravelUtils.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.canUndo = canUndo;
 exports.jumpToState = jumpToState;
 exports.undoOperation = undoOperation;
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _asyncStorage = _interopRequireDefault(require("@react-native-async-storage/async-storage"));
 var _asyncStorageCompat = require("./asyncStorageCompat");
-var _AsyncStorageListener = require("./AsyncStorageListener");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Storage Time-Travel Utilities
@@ -20,7 +20,13 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * Undo a single storage operation
  *
  * Restores the previous value(s) before the operation occurred.
- * This pauses event capture to avoid creating new events during restoration.
+ *
+ * The restore is deliberately NOT capture-paused. Pausing it meant the write
+ * landed but emitted no event, so the modal's event list and current-value
+ * panel never changed — UNDO looked like a dead button even though it had
+ * worked. Letting the restore emit normally makes it visible and keeps the
+ * history honest about what the storage actually did. There is no feedback
+ * loop: a write emits an event, and an event never triggers a write.
  *
  * @param event - The storage event to undo
  */
@@ -29,10 +35,7 @@ async function undoOperation(event) {
     action,
     data
   } = event;
-
-  // Pause capture to avoid creating events during restoration
-  (0, _AsyncStorageListener.pauseCapture)();
-  try {
+  {
     switch (action) {
       case "setItem":
       case "mergeItem":
@@ -87,20 +90,21 @@ async function undoOperation(event) {
       default:
         throw new Error(`Cannot undo unknown action type: ${action}`);
     }
-  } finally {
-    // Always resume capture, even if an error occurred
-    (0, _AsyncStorageListener.resumeCapture)();
   }
 }
 
 /**
  * Jump to a specific point in storage history
  *
- * This reconstructs the storage state as it was after a specific event
- * by clearing storage and replaying all events up to that point.
+ * Reconstructs the state as of `targetEventIndex` by replaying `events` up to
+ * that point, then reconciling ONLY the keys that timeline governs.
  *
- * Note: This is a destructive operation - it will clear current storage
- * and replay events to reach the target state.
+ * This used to begin with `AsyncStorage.clear()`, which was badly out of
+ * proportion: the modal's JUMP button passes one key's history, so clearing
+ * wiped every unrelated app key — and Buoy's own `@react_buoy*` settings with
+ * them — to restore a single value. Now a jump touches exactly the keys that
+ * appear in the events it was given, and never Buoy's own keys. Like
+ * [undoOperation], the writes emit normally so the change is visible.
  *
  * @param events - All events in chronological order (oldest first)
  * @param targetEventIndex - The index of the event to jump to (0-based)
@@ -110,34 +114,52 @@ async function jumpToState(events, targetEventIndex) {
     throw new Error(`Invalid event index: ${targetEventIndex}`);
   }
 
-  // Pause capture to avoid creating events during replay
-  (0, _AsyncStorageListener.pauseCapture)();
-  try {
-    // Clear all storage first
-    await _asyncStorage.default.clear();
-
-    // Build up the state by applying each event up to and including the target
-    // We use the final values from each event, not the operations themselves
-    const stateMap = new Map();
-    for (let i = 0; i <= targetEventIndex; i++) {
-      const event = events[i];
-      applyEventToStateMap(event, stateMap);
-    }
+  // Build up the state by applying each event up to and including the target.
+  // We use the final values from each event, not the operations themselves.
+  const stateMap = new Map();
+  for (let i = 0; i <= targetEventIndex; i++) {
+    applyEventToStateMap(events[i], stateMap);
+  }
 
-    // Apply the final state
-    const pairsToSet = [];
-    for (const [key, value] of stateMap) {
-      if (value !== null) {
-        pairsToSet.push([key, value]);
-      }
-    }
-    if (pairsToSet.length > 0) {
-      await (0, _asyncStorageCompat.writeMany)(pairsToSet);
+  // Every key the WHOLE timeline touches — including events after the target,
+  // so a key created later is removed rather than left behind.
+  const governedKeys = new Set();
+  for (const event of events) {
+    collectEventKeys(event, governedKeys);
+  }
+  const pairsToSet = [];
+  const keysToRemove = [];
+  for (const key of governedKeys) {
+    // Buoy's own settings are never app state to travel through.
+    if ((0, _sharedUi.isDevToolsStorageKey)(key)) continue;
+    const value = stateMap.get(key);
+    if (value === undefined || value === null) {
+      keysToRemove.push(key);
+    } else {
+      pairsToSet.push([key, value]);
     }
-  } finally {
-    // Always resume capture
-    (0, _AsyncStorageListener.resumeCapture)();
   }
+  if (keysToRemove.length > 0) {
+    await (0, _asyncStorageCompat.removeMany)(keysToRemove);
+  }
+  if (pairsToSet.length > 0) {
+    await (0, _asyncStorageCompat.writeMany)(pairsToSet);
+  }
+}
+
+/**
+ * Collect every key an event refers to, across all action shapes — including
+ * `prevPairs`, so keys a `clear` removed are still governed by the timeline.
+ */
+function collectEventKeys(event, into) {
+  const {
+    data
+  } = event;
+  if (!data) return;
+  if (data.key) into.add(data.key);
+  if (data.keys) for (const key of data.keys) into.add(key);
+  if (data.pairs) for (const [key] of data.pairs) into.add(key);
+  if (data.prevPairs) for (const [key] of data.prevPairs) into.add(key);
 }
 
 /**

package/lib/commonjs/storage/utils/valueType.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getValuePreview = getValuePreview;
 exports.getValueTypeLabel = getValueTypeLabel;
 exports.getValueTypeWithPreview = getValueTypeWithPreview;
+exports.parseStorageValue = parseStorageValue;
 /** Return a concise string describing the JavaScript type of the provided value. */
 function getValueTypeLabel(value) {
   if (value === null) return "null";
@@ -19,6 +20,29 @@ function getValueTypeLabel(value) {
   return "unknown";
 }
 
+/**
+ * A stored value as a tree can show it.
+ *
+ * AsyncStorage and SecureStore hold strings, so an object arrives as the text
+ * `{"a":1}` — displaying that as a string is technically true and useless. Any
+ * surface that renders or edits a value structurally has to do this same
+ * un-stringify first, so it lives here rather than being re-derived (slightly
+ * differently) in each one.
+ *
+ * A string that doesn't parse comes back untouched: it was just a string that
+ * happened to start with a brace.
+ */
+function parseStorageValue(value) {
+  if (typeof value !== "string") return value;
+  const trimmed = value.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
 /** Longest value preview rendered inline next to the type label. */
 const MAX_INLINE_PREVIEW = 40;
 

package/lib/module/index.js

@@ -20,12 +20,19 @@ export { storageToolPreset, createStorageTool } from "./preset";
 // COMPONENTS (For custom UI implementations)
 // =============================================================================
 export { StorageSection } from "./storage/components/StorageSection";
-export { StorageModalWithTabs } from "./storage/components/StorageModalWithTabs";
+// `StorageToolView` is the same tool rendered inline (header bar + body +
+// footer) instead of inside a JsModal — for hosts that show tools in a panel.
+export { StorageModalWithTabs, StorageToolView } from "./storage/components/StorageModalWithTabs";
 export { StorageKeyCard } from "./storage/components/StorageKeyCard";
 export { StorageKeyStatsSection } from "./storage/components/StorageKeyStats";
 export { StorageKeySection } from "./storage/components/StorageKeySection";
 export { StorageBrowserMode } from "./storage/components/StorageBrowserMode";
+// The backend filter, shared by the Keys and Events tabs.
+export { StorageTypeFilterBar, countByStorageType } from "./storage/components/StorageTypeFilterBar";
 export { StorageEventsSection } from "./storage/components/StorageEventsSection";
+// The five display operations a storage event collapses onto — semantics, not
+// presentation, so hosts can filter or group by the same vocabulary the UI uses.
+export { STORAGE_OPS, storageOpOf, storageOpDot, isInitialScan } from "./storage/utils/storageOps";
 export { StorageEventCard, getValueType } from "./storage/components/StorageEventCard";
 export { StorageEventDetailContent, StorageEventDetailFooter } from "./storage/components/StorageEventDetailContent";
 export { MMKVInstanceSelector } from "./storage/components/MMKVInstanceSelector";
@@ -47,6 +54,9 @@ export { useStorageEvents } from "./storage/hooks/useStorageEvents";
 // UTILITIES (Public helpers only)
 // =============================================================================
 export { clearAllAppStorage } from "./storage/utils/clearAllStorage";
+// Writing a value back, with the per-backend type rules in one place. Exported
+// so a host with its own storage UI edits through the same path the tool does.
+export { setStorageValue, storageEditBlockedReason, validateStorageValue, storageValueToEditableText } from "./storage/utils/setStorageValue";
 export { isMMKVAvailable, getMMKVClass, getMMKVUnavailableMessage } from "./storage/utils/mmkvAvailability";
 export { detectMMKVType, formatMMKVValue, isTypeMatch } from "./storage/utils/mmkvTypeDetection";
 export { undoOperation, jumpToState, canUndo } from "./storage/utils/storageTimeTravelUtils";
@@ -70,6 +80,13 @@ export { storageSyncAdapter } from "./storage/sync/storageSyncAdapter";
 // =============================================================================
 /** @internal */
 export { storageEventStore } from "./storage/stores/storageEventStore";
+/**
+ * Tell a mounted storage browser to re-read every backend. Used by the desktop
+ * dashboard, where local storage listeners are suppressed and device data
+ * arrives as snapshots instead.
+ * @internal
+ */
+export { requestStorageBrowserRefresh } from "./storage/utils/storageBrowserRefresh";
 
 // =============================================================================
 // NOT EXPORTED (Internal capture controls)

package/lib/module/storage/components/DiffViewer/TreeDiffViewer.js

@@ -6,14 +6,16 @@ import { TreeDiffViewer as SharedTreeDiffViewer } from "@buoy-gg/shared-ui/dataV
 import { jsx as _jsx } from "react/jsx-runtime";
 export function TreeDiffViewer({
   oldValue,
-  newValue
+  newValue,
+  scrollEnabled = true
 }) {
   return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
+    style: scrollEnabled ? styles.container : styles.containerInline,
     children: /*#__PURE__*/_jsx(SharedTreeDiffViewer, {
       oldValue: oldValue,
       newValue: newValue,
-      theme: "dark"
+      theme: "dark",
+      scrollEnabled: scrollEnabled
     })
   });
 }
@@ -21,5 +23,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: gameUIColors.background
+  },
+  // Inline: size to the tree so the page scroll reveals it, rather than
+  // stretching to the pane and clipping the rows.
+  containerInline: {
+    backgroundColor: gameUIColors.background
   }
 });

package/lib/module/storage/components/DiffViewer/modes/ThemedSplitView.js

@@ -18,9 +18,12 @@ export function ThemedSplitView({
   newValue,
   theme,
   options = DEFAULT_OPTIONS,
-  showThemeName = false
+  showThemeName = false,
+  scrollEnabled = true
 }) {
-  const dynamicStyles = useMemo(() => createDynamicStyles(theme), [theme]);
+  // Inline mode drops the fixed 400pt pane so the container grows with the
+  // rows; the ancestor ScrollView is what scrolls them.
+  const dynamicStyles = useMemo(() => createDynamicStyles(theme, scrollEnabled), [theme, scrollEnabled]);
   const diffComputeOptions = useMemo(() => ({
     compareMethod: options.compareMethod,
     disableWordDiff: options.disableWordDiff,
@@ -69,9 +72,7 @@ export function ThemedSplitView({
     });
   }, []);
   const keyExtractor = useCallback(item => item.kind === "row" ? `r:${item.diffIndex}` : `f:${item.foldId}`, []);
-  const renderItem = useCallback(({
-    item
-  }) => {
+  const renderSplitItem = useCallback(item => {
     if (item.kind === "fold") {
       return /*#__PURE__*/_jsx(FoldHeader, {
         foldId: item.foldId,
@@ -90,6 +91,9 @@ export function ThemedSplitView({
       styles: dynamicStyles
     });
   }, [theme, options, dynamicStyles, toggleFold]);
+  const renderItem = useCallback(({
+    item
+  }) => renderSplitItem(item), [renderSplitItem]);
   return /*#__PURE__*/_jsxs(View, {
     style: [dynamicStyles.container, theme.glowColor && {
       shadowColor: theme.glowColor,
@@ -137,7 +141,7 @@ export function ThemedSplitView({
         style: dynamicStyles.emptyText,
         children: options.showDiffOnly ? "No differences found" : "No content to display"
       })
-    }) : /*#__PURE__*/_jsx(FlatList, {
+    }) : scrollEnabled ? /*#__PURE__*/_jsx(FlatList, {
       style: dynamicStyles.scrollView,
       contentContainerStyle: dynamicStyles.scrollContent,
       data: items,
@@ -148,6 +152,16 @@ export function ThemedSplitView({
       maxToRenderPerBatch: 20,
       windowSize: 7,
       removeClippedSubviews: true
+    }) :
+    /*#__PURE__*/
+    // A FlatList can't virtualize inside a page ScrollView — it has no
+    // viewport of its own to measure against — so render the rows directly.
+    // Folding already keeps this list short (unchanged runs collapse).
+    _jsx(View, {
+      style: dynamicStyles.scrollContent,
+      children: items.map(item => /*#__PURE__*/_jsx(Fragment, {
+        children: renderSplitItem(item)
+      }, keyExtractor(item)))
     })]
   });
 }
@@ -399,10 +413,14 @@ function getDiffColors(type, theme) {
 }
 
 // Create dynamic styles based on theme
-function createDynamicStyles(theme) {
+function createDynamicStyles(theme, scrollEnabled) {
   return StyleSheet.create({
     container: {
-      height: 400,
+      // Fixed pane only when the rows scroll themselves; inline mode sizes to
+      // content so the page scroll reveals it.
+      ...(scrollEnabled ? {
+        height: 400
+      } : null),
       backgroundColor: theme.background,
       borderRadius: 8,
       overflow: "hidden",