@buoy-gg/storage 7.0.28 → 7.0.30

package/lib/commonjs/storage/components/StorageScalarKeyEditor.js

@@ -21,6 +21,21 @@ var _jsxRuntime = require("react/jsx-runtime");
  * screen it came from.
  */
 
+/**
+ * The text `setStorageValue` should store.
+ *
+ * A string is stored AS ITSELF — `JSON.stringify` here was adding quotes a
+ * plain string never had. AsyncStorage hid it (the browser reads values back
+ * through `JSON.parse`, so the tool agreed with itself) but the app's own
+ * `getItem` saw `"dark"` where it had written `dark`; MMKV stores strings
+ * natively and showed the quotes right in the row, compounding on every edit.
+ *
+ * Everything else keeps JSON: for a number or a boolean that IS its text, and
+ * containers never reach this editor.
+ */
+function serializeScalar(value) {
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
 function StorageScalarKeyEditor({
   storageKey,
   value,
@@ -31,7 +46,7 @@ function StorageScalarKeyEditor({
   const save = (0, _react.useCallback)(next => {
     if (saving) return;
     setSaving(true);
-    onSave(JSON.stringify(next)).then(onClose).catch(e => {
+    onSave(serializeScalar(next)).then(onClose).catch(e => {
       setSaving(false);
       _reactNative.Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
     });

package/lib/commonjs/storage/components/StorageTypeFilterBar.js

@@ -57,6 +57,8 @@ function StorageTypeFilterBar({
       const isActive = active === segment.id;
       const accent = segment.color ?? _sharedUi.night.color.accent;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        testID: `buoy-storage-type-${segment.id}`,
+        accessibilityRole: "button",
         accessibilityLabel: `Filter by ${segment.label}`,
         accessibilityState: {
           selected: isActive

package/lib/commonjs/storage/components/StorageValueEditModal.js

@@ -86,6 +86,8 @@ function StorageValueEditModal({
       style: styles.scrim,
       activeOpacity: 1,
       onPress: busy ? undefined : onCancel,
+      testID: "buoy-storage-value-scrim",
+      accessibilityRole: "button",
       accessibilityLabel: "Dismiss editor"
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.panel,
@@ -115,6 +117,8 @@ function StorageValueEditModal({
           style: styles.fieldScroll,
           keyboardShouldPersistTaps: "handled",
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            testID: "buoy-storage-value-input",
+            accessibilityLabel: "Value",
             value: text,
             onChangeText: setText,
             autoFocus: true,
@@ -125,8 +129,14 @@ function StorageValueEditModal({
             // Multiline for anything textual: stored values are long more
             // often than they're short, and a single line hides that.
             ,
-            multiline: mode !== "number",
-            keyboardType: mode === "number" ? "numeric" : "default",
+            multiline: mode !== "number"
+            // ASCII for raw JSON, because iOS Smart Punctuation is ON by
+            // default and rewrites the quotes you type as curly ones —
+            // which makes the text unparseable, disables Save, and leaves
+            // an "invalid JSON" message whose cause is invisible at a
+            // glance. An ASCII keyboard doesn't do the substitution.
+            ,
+            keyboardType: mode === "number" ? "numeric" : mode === "raw" ? "ascii-capable" : "default",
             onSubmitEditing: mode === "number" ? commit : undefined,
             placeholder: mode === "raw" ? "{ }" : "value",
             placeholderTextColor: _sharedUi.night.color.placeholder,
@@ -140,6 +150,8 @@ function StorageValueEditModal({
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             onPress: onCancel,
             disabled: busy,
+            testID: "buoy-storage-value-cancel",
+            accessibilityRole: "button",
             accessibilityLabel: "Cancel edit",
             style: styles.cancelButton,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -149,6 +161,8 @@ function StorageValueEditModal({
           }), mode === "boolean" ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
             onPress: commit,
             disabled: blocked,
+            testID: "buoy-storage-value-save",
+            accessibilityRole: "button",
             accessibilityLabel: saveLabel,
             style: [styles.saveButton, blocked && styles.saveDisabled],
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -169,6 +183,8 @@ function BooleanChoice({
     style: styles.boolRow,
     children: [true, false].map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: () => onPick(option),
+      testID: `buoy-storage-value-${option}`,
+      accessibilityRole: "button",
       accessibilityLabel: `Set ${option}`,
       style: [styles.boolButton, current === option && styles.boolActive],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {

package/lib/commonjs/storage/hooks/useTreeDraft.js

@@ -66,12 +66,23 @@ function useTreeDraft(liveValue, save) {
   const selectAt = (0, _react.useCallback)(path => {
     setSelectPath(path);
   }, []);
+
+  /** Leave edit mode entirely. Only correct on the way out (after a write). */
   const reset = (0, _react.useCallback)(() => {
     setIsEditing(false);
     setDraft(undefined);
     setSelectPath(undefined);
     setError(null);
   }, []);
+
+  /** Re-seed the draft from what's stored, staying in edit mode. */
+  const discard = (0, _react.useCallback)(() => {
+    setDraft(liveValue);
+    setBaseline(JSON.stringify(liveValue));
+    setSelectPath(undefined);
+    setError(null);
+    setIsEditing(true);
+  }, [liveValue]);
   const commit = (0, _react.useCallback)(async () => {
     if (!isDirty || !save) {
       reset();
@@ -102,6 +113,6 @@ function useTreeDraft(liveValue, save) {
     apply,
     selectAt,
     commit,
-    discard: reset
+    discard
   };
 }

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

@@ -11,15 +11,44 @@ var _SecureStoreRegistry = require("./SecureStoreRegistry");
  *
  * Each backend removes keys differently — AsyncStorage takes a batch,
  * SecureStore has to go through the registry (only it knows each key's
- * `keychainService` options), and MMKV deletes per registered instance. Two call
- * sites need this (the selection action bar and a single row's "Delete key"),
- * and a second copy of that fan-out is exactly how one backend quietly stops
- * being cleaned up.
+ * `keychainService` options), and MMKV deletes per registered instance. A
+ * second copy of that fan-out is exactly how one backend quietly stops being
+ * cleaned up — which is not hypothetical: the MMKV branch called a method
+ * react-native-mmkv v4 had renamed, and deleting an MMKV key silently did
+ * nothing until an e2e test deleted from all three backends at once.
+ *
+ * One call site today: the selection action bar. Deleting is deliberately not
+ * an affordance on the row itself — see `StorageKeyRow`, whose expanded card
+ * carries three actions and only one of them changes anything.
  *
  * Pro gating and confirmation are deliberately NOT here: they belong to the UI
  * that has the user's attention. This function assumes the caller already asked.
  */
 
+/**
+ * Remove one key from an MMKV instance, whichever version it is.
+ *
+ * react-native-mmkv v4 renamed `delete(key)` to `remove(key)`. Calling the old
+ * name on a v4 instance throws, and because the callers wrap deletion in a
+ * try/catch that only surfaces an alert, the visible result was a key that
+ * refused to delete — the same shape as a permissions problem or a read-only
+ * instance, and nothing to point at the real cause.
+ *
+ * `storageSyncAdapter` and `snapshotProvider` already did this; this path was
+ * the one that missed it.
+ */
+function removeMMKVKey(instance, key) {
+  if (typeof instance.remove === "function") {
+    instance.remove(key);
+    return;
+  }
+  if (typeof instance.delete === "function") {
+    instance.delete(key);
+    return;
+  }
+  throw new Error("MMKV instance exposes neither remove() nor delete()");
+}
+
 /**
  * Removes every key from whichever backend holds it. Rejects on the first
  * failure — callers surface that, rather than reporting a partial delete as
@@ -46,7 +75,7 @@ async function deleteStorageKeys(keys, mmkvInstances) {
     Object.entries(byInstance).forEach(([instanceId, instanceKeys]) => {
       const inst = mmkvInstances.find(i => i.id === instanceId);
       if (inst) {
-        instanceKeys.forEach(key => inst.instance.delete(key));
+        instanceKeys.forEach(key => removeMMKVKey(inst.instance, key));
       }
     });
   }

package/lib/module/storage/components/GameUIStorageBrowser.js

@@ -19,6 +19,7 @@ import { SelectionActionBar } from "./SelectionActionBar";
 // instance, including remote-backed wrappers on the desktop dashboard.
 import { addMMKVListener } from "../utils/MMKVListener";
 import { onStorageBrowserRefresh } from "../utils/storageBrowserRefresh";
+import { deleteStorageKeys } from "../utils/deleteStorageKeys";
 import { setStorageValue, storageEditBlockedReason } from "../utils/setStorageValue";
 
 // Import shared Game UI components
@@ -254,6 +255,42 @@ export function GameUIStorageBrowser({
     });
   }, [handleSaveValue]);
 
+  /**
+   * Delete ONE key, from its own card.
+   *
+   * Routed through `deleteStorageKeys` exactly like the selection bar, so the
+   * per-backend fan-out keeps having a single implementation — the last time
+   * that fan-out was wrong (an MMKV method renamed upstream) it was wrong in
+   * silence, and a second copy is how one backend quietly stops being deleted.
+   *
+   * Pro is checked here rather than on the button because it's an upsell, not
+   * a capability: the row shows the action and explains the wall on press.
+   */
+  const handleDeleteKey = useCallback(storageKey => {
+    if (!isPro) {
+      setShowUpgradeModal(true);
+      return;
+    }
+    Alert.alert("Delete key", `Delete "${storageKey.key}"? This cannot be undone.`, [{
+      text: "Cancel",
+      style: "cancel"
+    }, {
+      text: "Delete",
+      style: "destructive",
+      onPress: async () => {
+        try {
+          await deleteStorageKeys([storageKey], mmkvInstances.map(inst => ({
+            id: inst.id,
+            instance: inst.instance
+          })));
+          refresh();
+        } catch (error) {
+          Alert.alert("Error", `Failed to delete key: ${error}`);
+        }
+      }
+    }]);
+  }, [isPro, mmkvInstances, refresh]);
+
   /** Permanent, per-key reasons a value can't be edited (never the licence). */
   const editBlockedFor = useCallback(storageKey => storageEditBlockedReason(storageKey, mmkvInstances), [mmkvInstances]);
 
@@ -642,6 +679,9 @@ export function GameUIStorageBrowser({
         contentContainerStyle: styles.instanceNavbarScroll,
         children: [(isPro || mmkvInstances.length === 1) && /*#__PURE__*/_jsxs(TouchableOpacity, {
           onPress: () => setSelectedMMKVInstance(null),
+          testID: "buoy-storage-instance-all",
+          accessibilityRole: "button",
+          accessibilityLabel: "All MMKV instances",
           style: [styles.instanceNavbarButton, selectedMMKVInstance === null && styles.instanceNavbarButtonActive],
           children: [/*#__PURE__*/_jsx(HardDrive, {
             size: 12,
@@ -659,6 +699,9 @@ export function GameUIStorageBrowser({
         }), mmkvInstances.map((inst, index) => {
           const isLocked = index >= mmkvInstanceLimit;
           return /*#__PURE__*/_jsxs(TouchableOpacity, {
+            testID: `buoy-storage-instance-${inst.id}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `MMKV instance ${inst.id}`,
             onPress: () => {
               if (isLocked) {
                 setShowUpgradeModal(true);
@@ -726,6 +769,8 @@ export function GameUIStorageBrowser({
     style: styles.limitBanner,
     onPress: () => setShowUpgradeModal(true),
     activeOpacity: 0.8,
+    testID: "buoy-storage-locked-banner",
+    accessibilityRole: "button",
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.limitBannerContent,
       children: [/*#__PURE__*/_jsxs(View, {
@@ -763,7 +808,11 @@ export function GameUIStorageBrowser({
   });
   return /*#__PURE__*/_jsxs(View, {
     style: styles.root,
-    children: [/*#__PURE__*/_jsxs(ScrollView, {
+    children: [/*#__PURE__*/_jsxs(ScrollView
+    // Named because `by.type("RCTScrollView")` doesn't match on Fabric
+    // (renamed class) — automation scrolls below-the-fold rows by this id.
+    , {
+      testID: "buoy-storage-scroll",
       style: styles.scrollContainer,
       contentContainerStyle: styles.container,
       showsVerticalScrollIndicator: false,
@@ -813,6 +862,7 @@ export function GameUIStorageBrowser({
           onHideKey: key => handleHideKeys([key]),
           onEditKey: setEditingKey,
           onToggleKey: handleToggleKey,
+          onDeleteKey: handleDeleteKey,
           editBlockedFor: editBlockedFor,
           pinnedKeys: pinnedKeys,
           onTogglePin: onTogglePin

package/lib/module/storage/components/SelectionActionBar.js

@@ -83,6 +83,9 @@ export function SelectionActionBar({
       children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
         style: styles.selectAllButton,
         onPress: allSelected ? onClearSelection : onSelectAll,
+        testID: "buoy-storage-select-all",
+        accessibilityLabel: allSelected ? "Deselect all keys" : "Select all keys",
+        accessibilityRole: "button",
         children: [/*#__PURE__*/_jsx(CheckSquare, {
           size: 14,
           color: allSelected ? night.color.accent : night.color.textSecondary
@@ -102,6 +105,7 @@ export function SelectionActionBar({
       children: [/*#__PURE__*/_jsx(CopyButton, {
         value: getCopyData(),
         size: 14,
+        testID: "buoy-storage-selection-copy",
         buttonStyle: styles.actionButton,
         colors: {
           idle: night.color.accent,
@@ -111,6 +115,9 @@ export function SelectionActionBar({
       }), onHideKeys && /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleHideSelected,
+        testID: "buoy-storage-selection-hide",
+        accessibilityLabel: "Hide selected keys",
+        accessibilityRole: "button",
         children: /*#__PURE__*/_jsx(EyeOff, {
           size: 14,
           color: night.color.warning
@@ -118,6 +125,9 @@ export function SelectionActionBar({
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         style: styles.actionButton,
         onPress: handleDeleteSelected,
+        testID: "buoy-storage-selection-delete",
+        accessibilityLabel: "Delete selected keys",
+        accessibilityRole: "button",
         children: /*#__PURE__*/_jsx(Trash2, {
           size: 14,
           color: night.color.danger

package/lib/module/storage/components/StorageActionButtons.js

@@ -129,6 +129,9 @@ export function StorageActionButtons({
     style: styles.container,
     children: [onToggleSelectMode && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onToggleSelectMode,
+      testID: "buoy-storage-select-mode",
+      accessibilityLabel: isSelectMode ? "Exit selection mode" : "Select keys",
+      accessibilityRole: "button",
       style: [styles.actionButton, isSelectMode && styles.actionButtonActive],
       children: isSelectMode ? /*#__PURE__*/_jsxs(View, {
         style: styles.selectModeActiveContainer,
@@ -146,6 +149,7 @@ export function StorageActionButtons({
     }), !isSelectMode && /*#__PURE__*/_jsx(CopyButton, {
       value: copyValue,
       size: 16,
+      testID: "buoy-storage-export-copy",
       buttonStyle: styles.actionButton,
       colors: {
         idle: night.color.textSecondary,
@@ -154,6 +158,9 @@ export function StorageActionButtons({
       }
     }), !isSelectMode && showClearAll && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: handleClearAll,
+      testID: "buoy-storage-clear-all",
+      accessibilityLabel: "Clear all storage",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
@@ -161,6 +168,9 @@ export function StorageActionButtons({
       })
     }), !isSelectMode && showClearAsync && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: handleClearAsyncStorage,
+      testID: "buoy-storage-clear-async",
+      accessibilityLabel: "Clear AsyncStorage",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
@@ -168,6 +178,9 @@ export function StorageActionButtons({
       })
     }), !isSelectMode && showClearAllMMKV && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: handleClearAllMMKV,
+      testID: "buoy-storage-clear-mmkv-all",
+      accessibilityLabel: "Clear all MMKV instances",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,
@@ -175,6 +188,9 @@ export function StorageActionButtons({
       })
     }), !isSelectMode && showClearMMKVIndividual && mmkvInstances.length === 1 && /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: () => handleClearMMKV(mmkvInstances[0].id, mmkvInstances[0].id),
+      testID: "buoy-storage-clear-mmkv",
+      accessibilityLabel: "Clear MMKV instance",
+      accessibilityRole: "button",
       style: styles.actionButton,
       children: /*#__PURE__*/_jsx(Trash2, {
         size: 16,

package/lib/module/storage/components/StorageEventActionButton.js

@@ -50,6 +50,7 @@ export function StorageEventActionButton({
       opacity: disabled ? 0.5 : 1
     }],
     activeOpacity: 0.7,
+    testID: `buoy-storage-action-${type}`,
     accessibilityRole: "button",
     accessibilityLabel: text,
     accessibilityState: {

package/lib/module/storage/components/StorageEventCard.js

@@ -77,7 +77,8 @@ export const StorageEventCard = /*#__PURE__*/memo(function StorageEventCard({
   data,
   onPress,
   isSelected = false,
-  showChevron = true
+  showChevron = true,
+  testID
 }) {
   const actionColor = getActionColor(data.lastAction);
   const actionLabel = translateStorageAction(data.lastAction);
@@ -104,6 +105,8 @@ export const StorageEventCard = /*#__PURE__*/memo(function StorageEventCard({
     // Interaction
     ,
     isSelected: isSelected,
-    onPress: onPress
+    onPress: onPress,
+    testID: testID,
+    accessibilityLabel: `${actionLabel} ${data.key}`
   });
 });

package/lib/module/storage/components/StorageEventFilterView.js

@@ -49,6 +49,12 @@ export function StorageEventFilterView({
             borderColor: macOSColors.semantic.warning + '40'
           }],
           onPress: () => onToggleStorageType('async'),
+          testID: "buoy-storage-backend-async",
+          accessibilityRole: "button",
+          accessibilityLabel: "Toggle AsyncStorage capture",
+          accessibilityState: {
+            selected: enabledStorageTypes.has('async')
+          },
           children: [/*#__PURE__*/_jsx(Database, {
             size: 16,
             color: enabledStorageTypes.has('async') ? macOSColors.semantic.warning : night.color.textTertiary
@@ -63,6 +69,12 @@ export function StorageEventFilterView({
             borderColor: macOSColors.semantic.info + '40'
           }],
           onPress: () => onToggleStorageType('mmkv'),
+          testID: "buoy-storage-backend-mmkv",
+          accessibilityRole: "button",
+          accessibilityLabel: "Toggle MMKV capture",
+          accessibilityState: {
+            selected: enabledStorageTypes.has('mmkv')
+          },
           children: [/*#__PURE__*/_jsx(HardDrive, {
             size: 16,
             color: enabledStorageTypes.has('mmkv') ? macOSColors.semantic.info : night.color.textTertiary
@@ -77,6 +89,12 @@ export function StorageEventFilterView({
             borderColor: macOSColors.semantic.success + '40'
           }],
           onPress: () => onToggleStorageType('secure'),
+          testID: "buoy-storage-backend-secure",
+          accessibilityRole: "button",
+          accessibilityLabel: "Toggle Secure Storage capture",
+          accessibilityState: {
+            selected: enabledStorageTypes.has('secure')
+          },
           children: [/*#__PURE__*/_jsx(Shield, {
             size: 16,
             color: enabledStorageTypes.has('secure') ? macOSColors.semantic.success : night.color.textTertiary

package/lib/module/storage/components/StorageFilterCards.js

@@ -44,6 +44,9 @@ export function StorageFilterCards({
         }]],
         onPress: () => onFilterChange?.("all"),
         activeOpacity: 0.8,
+        testID: "buoy-storage-status-all",
+        accessibilityRole: "button",
+        accessibilityLabel: "Valid keys",
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.filterValue, {
             color: night.color.text
@@ -61,6 +64,9 @@ export function StorageFilterCards({
         }]],
         onPress: () => onFilterChange?.("missing"),
         activeOpacity: 0.8,
+        testID: "buoy-storage-status-missing",
+        accessibilityRole: "button",
+        accessibilityLabel: "Missing keys",
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.filterValue, {
             color: displayStats.missingCount > 0 ? macOSColors.semantic.error : night.color.textTertiary
@@ -78,6 +84,9 @@ export function StorageFilterCards({
         }]],
         onPress: () => onFilterChange?.("issues"),
         activeOpacity: 0.8,
+        testID: "buoy-storage-status-issues",
+        accessibilityRole: "button",
+        accessibilityLabel: "Issues keys",
         children: [/*#__PURE__*/_jsx(Text, {
           style: [styles.filterValue, {
             color: displayStats.issuesCount > 0 ? macOSColors.semantic.warning : night.color.textTertiary

package/lib/module/storage/components/StorageKeyEditorScreen.js

@@ -19,7 +19,7 @@
 
 import { useMemo } from "react";
 import { Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { macOSColors, night, FileJson, PillBadge, useSafeAreaInsets, X } from "@buoy-gg/shared-ui";
+import { macOSColors, night, FileJson, PillBadge, ToolBackground, useSafeAreaInsets, X } from "@buoy-gg/shared-ui";
 import { DataViewer, DataTreeActionDock, getAtPath } from "@buoy-gg/shared-ui/dataViewer";
 import { useKeyEditor } from "../hooks/useKeyEditor";
 import { StorageValueEditModal } from "./StorageValueEditModal";
@@ -88,7 +88,7 @@ function StorageTreeEditor({
   } = editor;
   return /*#__PURE__*/_jsxs(View, {
     style: styles.screen,
-    children: [/*#__PURE__*/_jsx(EditorHeader, {
+    children: [/*#__PURE__*/_jsx(ToolBackground, {}), /*#__PURE__*/_jsx(EditorHeader, {
       storageKey: storageKey,
       state: draft.isSaving ? "Saving…" : draft.isDirty ? "Draft · unsaved" : "In sync with device",
       dirty: draft.isDirty,
@@ -107,6 +107,7 @@ function StorageTreeEditor({
         children: summarize(draft.value)
       })]
     }), /*#__PURE__*/_jsxs(ScrollView, {
+      testID: "buoy-storage-editor-scroll",
       style: styles.treeScroll,
       contentContainerStyle: styles.treeContent,
       keyboardShouldPersistTaps: "handled",
@@ -124,7 +125,11 @@ function StorageTreeEditor({
           ,
           showTypeFilter: false,
           onSelectionChange: editor.setSelection,
-          selectPath: draft.selectPath,
+          selectPath: draft.selectPath
+          // Its own handle root: the card that opened this editor is still
+          // mounted underneath, rendering the same value in its preview tree.
+          ,
+          testIDPrefix: "buoy-storage-editor-row",
           onRequestInlineEdit: sel => editor.openValueEditor(sel.path)
         })
       }), /*#__PURE__*/_jsx(Text, {
@@ -152,6 +157,8 @@ function StorageTreeEditor({
         children: [/*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: draft.discard,
           disabled: draft.isSaving,
+          testID: "buoy-storage-editor-discard",
+          accessibilityRole: "button",
           accessibilityLabel: "Discard changes",
           style: styles.discardButton,
           children: /*#__PURE__*/_jsx(Text, {
@@ -161,6 +168,8 @@ function StorageTreeEditor({
         }), /*#__PURE__*/_jsx(TouchableOpacity, {
           onPress: editor.saveAndClose,
           disabled: draft.isSaving,
+          testID: "buoy-storage-editor-save",
+          accessibilityRole: "button",
           accessibilityLabel: "Save changes",
           style: [styles.saveButton, draft.isSaving && styles.saveDisabled],
           children: /*#__PURE__*/_jsx(Text, {
@@ -196,6 +205,8 @@ function EditorHeader({
     style: styles.header,
     children: [/*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onClose,
+      testID: "buoy-storage-editor-close",
+      accessibilityRole: "button",
       accessibilityLabel: "Close editor",
       style: styles.headerButton,
       hitSlop: {
@@ -210,7 +221,13 @@ function EditorHeader({
       })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.headerTitle,
-      children: [/*#__PURE__*/_jsx(Text, {
+      children: [/*#__PURE__*/_jsx(Text
+      // Which key this editor is pointed at. Worth a handle of its own:
+      // the editor is reached by expanding a card in a list of hundreds,
+      // and opening it on the wrong one looks exactly like opening it on
+      // the right one until a write lands somewhere unexpected.
+      , {
+        testID: "buoy-storage-editor-key",
         style: styles.headerKey,
         numberOfLines: 1,
         children: storageKey.key
@@ -220,6 +237,8 @@ function EditorHeader({
       })]
     }), /*#__PURE__*/_jsxs(TouchableOpacity, {
       onPress: onRaw,
+      testID: "buoy-storage-editor-raw",
+      accessibilityRole: "button",
       accessibilityLabel: "Edit raw JSON",
       style: styles.headerButton,
       hitSlop: {
@@ -265,8 +284,10 @@ function storageTypeColor(storageType) {
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
+    // Opaque on purpose: transparency here showed the whole key list through
+    // the editor, not just the sheet's star field. The screen paints its own
+    // ToolBackground instead — see the mount site above.
+    backgroundColor: night.color.bg
   },
   header: {
     flexDirection: "row",