@buoy-gg/storage 7.0.4 → 7.0.5

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StorageFilterCards = StorageFilterCards;
 var _reactNative = require("react-native");
+var _StorageTypeFilterBar = require("./StorageTypeFilterBar");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _mmkvAvailability = require("../utils/mmkvAvailability");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -22,7 +23,8 @@ function StorageFilterCards({
   activeFilter = "all",
   onFilterChange,
   activeStorageType = "all",
-  onStorageTypeChange
+  onStorageTypeChange,
+  showStatus = true
 }) {
   // Use tabStats if provided (for filtered counts), otherwise fall back to stats
   const displayStats = tabStats || {
@@ -36,7 +38,7 @@ function StorageFilterCards({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [showStatus ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.filtersRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: [styles.filterChip, activeFilter === "all" && [styles.filterChipActive, {
@@ -90,101 +92,15 @@ function StorageFilterCards({
           children: "Issues"
         })]
       })]
-    }), onStorageTypeChange && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.typesRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.typePill, {
-          borderColor: _sharedUi.macOSColors.border.default
-        }, activeStorageType === "all" && [styles.typePillActive, {
-          backgroundColor: _sharedUi.macOSColors.background.hover,
-          borderColor: _sharedUi.macOSColors.border.hover
-        }]],
-        onPress: () => onStorageTypeChange?.("all"),
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillLabel, activeStorageType === "all" && {
-            color: _sharedUi.macOSColors.text.primary,
-            fontWeight: "600"
-          }],
-          children: "All Types"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillValue, activeStorageType === "all" && {
-            color: _sharedUi.macOSColors.text.primary
-          }, activeStorageType !== "all" && {
-            color: _sharedUi.macOSColors.text.muted
-          }],
-          children: displayStats.totalCount
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.typePill, {
-          borderColor: _sharedUi.macOSColors.border.default
-        }, activeStorageType === "async" && [styles.typePillActive, {
-          backgroundColor: _sharedUi.macOSColors.semantic.warning + "15",
-          borderColor: _sharedUi.macOSColors.semantic.warning + "40"
-        }]],
-        onPress: () => onStorageTypeChange?.("async"),
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillLabel, activeStorageType === "async" && {
-            color: _sharedUi.macOSColors.semantic.warning,
-            fontWeight: "600"
-          }],
-          children: "Async"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillValue, activeStorageType === "async" ? {
-            color: _sharedUi.macOSColors.semantic.warning
-          } : {
-            color: _sharedUi.macOSColors.text.muted
-          }],
-          children: displayStats.asyncCount
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.typePill, {
-          borderColor: _sharedUi.macOSColors.border.default
-        }, activeStorageType === "mmkv" && [styles.typePillActive, {
-          backgroundColor: _sharedUi.macOSColors.semantic.info + "15",
-          borderColor: _sharedUi.macOSColors.semantic.info + "40"
-        }]],
-        onPress: () => onStorageTypeChange?.("mmkv"),
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillLabel, activeStorageType === "mmkv" && {
-            color: _sharedUi.macOSColors.semantic.info,
-            fontWeight: "600"
-          }],
-          children: "MMKV"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillValue, activeStorageType === "mmkv" ? {
-            color: _sharedUi.macOSColors.semantic.info
-          } : {
-            color: _sharedUi.macOSColors.text.muted
-          }],
-          children: displayStats.mmkvCount
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.typePill, {
-          borderColor: _sharedUi.macOSColors.border.default
-        }, activeStorageType === "secure" && [styles.typePillActive, {
-          backgroundColor: _sharedUi.macOSColors.semantic.success + "15",
-          borderColor: _sharedUi.macOSColors.semantic.success + "40"
-        }]],
-        onPress: () => onStorageTypeChange?.("secure"),
-        activeOpacity: 0.8,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillLabel, activeStorageType === "secure" && {
-            color: _sharedUi.macOSColors.semantic.success,
-            fontWeight: "600"
-          }],
-          children: "Secure"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.typePillValue, activeStorageType === "secure" ? {
-            color: _sharedUi.macOSColors.semantic.success
-          } : {
-            color: _sharedUi.macOSColors.text.muted
-          }],
-          children: displayStats.secureCount
-        })]
-      })]
+    }) : null, onStorageTypeChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageTypeFilterBar.StorageTypeFilterBar, {
+      active: activeStorageType,
+      onChange: onStorageTypeChange,
+      counts: {
+        all: displayStats.totalCount,
+        async: displayStats.asyncCount,
+        mmkv: displayStats.mmkvCount,
+        secure: displayStats.secureCount
+      }
     })]
   });
 }
@@ -302,43 +218,5 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     fontFamily: "monospace",
     lineHeight: 20
-  },
-  // Storage type pills
-  typesRow: {
-    flexDirection: "row",
-    gap: 8,
-    marginTop: 2
-  },
-  typePill: {
-    flex: 1,
-    backgroundColor: _sharedUi.macOSColors.background.input + "80",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default + "30",
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    alignItems: "center",
-    justifyContent: "center",
-    minHeight: 32
-  },
-  typePillActive: {
-    borderWidth: 1,
-    transform: [{
-      scale: 1.005
-    }]
-  },
-  typePillLabel: {
-    fontSize: 9,
-    color: _sharedUi.macOSColors.text.secondary,
-    textTransform: "uppercase",
-    letterSpacing: 0.4,
-    fontWeight: "500",
-    marginBottom: 1
-  },
-  typePillValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: "monospace",
-    lineHeight: 14
   }
 });

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

@@ -347,7 +347,7 @@ const styles = _reactNative.StyleSheet.create({
     gap: 4
   },
   storageKeyText: {
-    color: "#FFFFFF",
+    color: _sharedUi.macOSColors.text.primary,
     fontWeight: "500",
     fontSize: 12,
     flexWrap: "wrap",

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

@@ -0,0 +1,392 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StorageKeyEditorScreen = StorageKeyEditorScreen;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _useKeyEditor = require("../hooks/useKeyEditor");
+var _StorageValueEditModal = require("./StorageValueEditModal");
+var _StorageScalarKeyEditor = require("./StorageScalarKeyEditor");
+var _storageQueryUtils = require("../utils/storageQueryUtils");
+var _valueType = require("../utils/valueType");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Editing a key, on a screen of its own.
+ *
+ * Editing used to happen inside the expanded card in the key list: a tree a few
+ * rows tall, an action bar wrapped onto three lines, and the rest of the list
+ * still scrolling underneath. Every control was competing for the same ~200px.
+ *
+ * So the card now offers ONE edit button and the actual work happens here, with
+ * the whole viewport: the tree gets the height, the six structural actions get
+ * thumb-sized tiles docked at the bottom where they're always in the same
+ * place, and manual JSON editing — the escape hatch, not the main path — moves
+ * to a single button in the top-right corner.
+ *
+ * Typing a value happens in a modal pinned to the top of the screen, over the
+ * tree rather than instead of it — see {@link StorageValueEditModal}.
+ */
+
+/** Props once the value has been un-stringified — see `parseStorageValue`. */
+
+/**
+ * A container and a scalar are different editors, not one editor with a flag.
+ *
+ * A tree of one row is not a tree, so a scalar key skips the whole structural
+ * editor and gets just the value modal. Splitting here keeps each editor's
+ * state to what it actually needs — see {@link StorageScalarKeyEditor}.
+ */
+function StorageKeyEditorScreen(props) {
+  // Memo justified: this is a JSON.parse of the whole stored value, and the
+  // browser underneath re-renders on every storage event the app emits.
+  const raw = props.storageKey.value;
+  const value = (0, _react.useMemo)(() => (0, _valueType.parseStorageValue)(raw), [raw]);
+  return value !== null && typeof value === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StorageTreeEditor, {
+    ...props,
+    value: value
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageScalarKeyEditor.StorageScalarKeyEditor, {
+    storageKey: props.storageKey,
+    value: value,
+    onSave: props.onSave,
+    onClose: props.onClose
+  });
+}
+
+/* ------------------------------------------------------------------ *
+ * Containers — tree + structural actions, buffered into a draft.
+ * ------------------------------------------------------------------ */
+
+function StorageTreeEditor({
+  storageKey,
+  value,
+  onSave,
+  onClose,
+  applySafeAreaInset
+}) {
+  const insets = (0, _sharedUi.useSafeAreaInsets)();
+  const bottomInset = applySafeAreaInset ? insets.bottom : 0;
+  const editor = (0, _useKeyEditor.useKeyEditor)({
+    value,
+    save: onSave,
+    onClose,
+    confirmDiscard: choices => _reactNative.Alert.alert("Unsaved changes", `"${storageKey.key}" has edits that haven't been written to the device.`, [{
+      text: "Keep editing",
+      style: "cancel"
+    }, {
+      text: "Discard",
+      style: "destructive",
+      onPress: choices.discard
+    }, {
+      text: "Save",
+      onPress: choices.save
+    }])
+  });
+  const {
+    draft,
+    selection,
+    valuePath
+  } = editor;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.screen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EditorHeader, {
+      storageKey: storageKey,
+      state: draft.isSaving ? "Saving…" : draft.isDirty ? "Draft · unsaved" : "In sync with device",
+      dirty: draft.isDirty,
+      onClose: editor.requestClose
+      // Manual editing of the WHOLE value — everything else on this screen is
+      // structural, so raw JSON gets a corner rather than a tile.
+      ,
+      onRaw: editor.openRawEditor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.metaRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+        color: storageTypeColor(storageKey.storageType),
+        children: (0, _storageQueryUtils.getStorageTypeLabel)(storageKey.storageType)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.metaText,
+        children: summarize(draft.value)
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.treeScroll,
+      contentContainerStyle: styles.treeContent,
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.treeCard,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          data: draft.value,
+          title: "",
+          rawMode: true,
+          initialExpanded: true
+          // Type filtering is a READING aid: the filtered view is a
+          // projection whose row paths don't address the real document, so
+          // the explorer stops reporting selection while one is active. An
+          // editor whose actions silently go dead isn't worth the filter.
+          ,
+          showTypeFilter: false,
+          onSelectionChange: editor.setSelection,
+          selectPath: draft.selectPath,
+          onRequestInlineEdit: sel => editor.openValueEditor(sel.path)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.treeHint,
+        children: "Tap a row to select it \xB7 double-tap to edit its value"
+      })]
+    }), draft.error ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.error,
+      numberOfLines: 3,
+      children: draft.error
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.footer, {
+        paddingBottom: bottomInset
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataTreeActionDock, {
+        root: draft.value,
+        selection: selection,
+        onEdit: draft.apply,
+        onSelectPath: draft.selectAt
+        // Booleans never reach this — the dock applies their flip directly.
+        ,
+        onEditValue: () => editor.openValueEditor(selection?.path ?? [])
+      }), draft.isDirty ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.commitRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: draft.discard,
+          disabled: draft.isSaving,
+          accessibilityLabel: "Discard changes",
+          style: styles.discardButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.discardText,
+            children: "Discard"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: editor.saveAndClose,
+          disabled: draft.isSaving,
+          accessibilityLabel: "Save changes",
+          style: [styles.saveButton, draft.isSaving && styles.saveDisabled],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.saveText,
+            children: draft.isSaving ? "Saving…" : "Save changes"
+          })
+        })]
+      }) : null]
+    }), valuePath ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageValueEditModal.StorageValueEditModal, {
+      path: valuePath,
+      value: (0, _dataViewer.getAtPath)(draft.value, valuePath),
+      onSave: editor.applyValue,
+      onCancel: editor.closeValueEditor
+      // It only reaches the draft here — the single write happens on Save.
+      ,
+      saveLabel: "Apply"
+    }) : null]
+  });
+}
+
+/* ------------------------------------------------------------------ *
+ * Shared pieces
+ * ------------------------------------------------------------------ */
+
+function EditorHeader({
+  storageKey,
+  state,
+  dirty,
+  onClose,
+  onRaw
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.header,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onClose,
+      accessibilityLabel: "Close editor",
+      style: styles.headerButton,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+        size: 16,
+        color: _sharedUi.macOSColors.text.secondary
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.headerTitle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.headerKey,
+        numberOfLines: 1,
+        children: storageKey.key
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.headerState, dirty && styles.headerDirty],
+        children: state
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      onPress: onRaw,
+      accessibilityLabel: "Edit raw JSON",
+      style: styles.headerButton,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
+        size: 16,
+        color: _sharedUi.macOSColors.semantic.info
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.headerRawText,
+        children: "Raw"
+      })]
+    })]
+  });
+}
+
+/** `array · 3 items` — what the header says the draft currently is. */
+function summarize(value) {
+  if (Array.isArray(value)) {
+    return `array · ${value.length} item${value.length === 1 ? "" : "s"}`;
+  }
+  if (value !== null && typeof value === "object") {
+    const n = Object.keys(value).length;
+    return `object · ${n} key${n === 1 ? "" : "s"}`;
+  }
+  return typeof value;
+}
+function storageTypeColor(storageType) {
+  switch (storageType) {
+    case "mmkv":
+      return _sharedUi.macOSColors.semantic.info;
+    case "async":
+      return _sharedUi.macOSColors.semantic.warning;
+    case "secure":
+      return _sharedUi.macOSColors.semantic.success;
+    default:
+      return _sharedUi.macOSColors.text.secondary;
+  }
+}
+const styles = _reactNative.StyleSheet.create({
+  screen: {
+    flex: 1,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default
+  },
+  headerButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingVertical: 6,
+    paddingHorizontal: 4
+  },
+  headerRawText: {
+    color: _sharedUi.macOSColors.semantic.info,
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  headerTitle: {
+    flex: 1,
+    alignItems: "center",
+    gap: 2
+  },
+  headerKey: {
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 13,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  headerState: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 10
+  },
+  headerDirty: {
+    color: _sharedUi.macOSColors.semantic.warning
+  },
+  metaRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  metaText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 11,
+    fontFamily: "monospace"
+  },
+  treeScroll: {
+    flex: 1
+  },
+  treeContent: {
+    paddingHorizontal: 12,
+    paddingBottom: 16
+  },
+  treeCard: {
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    padding: 6
+  },
+  treeHint: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4
+  },
+  error: {
+    color: _sharedUi.macOSColors.semantic.error,
+    fontSize: 11,
+    fontFamily: "monospace",
+    paddingHorizontal: 12,
+    paddingBottom: 6
+  },
+  footer: {
+    backgroundColor: _sharedUi.macOSColors.background.card
+  },
+  commitRow: {
+    flexDirection: "row",
+    gap: 8,
+    paddingHorizontal: 10,
+    paddingBottom: 12,
+    paddingTop: 2
+  },
+  discardButton: {
+    flex: 1,
+    minHeight: 46,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  discardText: {
+    color: _sharedUi.macOSColors.text.secondary,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  saveButton: {
+    flex: 1.6,
+    minHeight: 46,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 12,
+    backgroundColor: _sharedUi.macOSColors.semantic.success
+  },
+  saveDisabled: {
+    opacity: 0.5
+  },
+  saveText: {
+    color: _sharedUi.macOSColors.background.base,
+    fontSize: 15,
+    fontWeight: "700"
+  }
+});

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

@@ -89,8 +89,12 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
   onViewHistory,
   onHideKey,
   isPinned = false,
-  onTogglePin
+  onTogglePin,
+  onEditKey,
+  onToggleKey,
+  editBlockedReason
 }) {
+  const canEdit = onEditKey != null && editBlockedReason == null;
   const config = getStatusConfig(storageKey.status);
   const hasValue = storageKey.value !== undefined && storageKey.value !== null;
 
@@ -104,18 +108,12 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
   // Show storage type as secondary text
   const storageTypeLabel = (0, _storageQueryUtils.getStorageTypeLabel)(storageKey.storageType);
 
-  // Check if value is JSON object/array for DataViewer
-  const isJsonData = storageKey.value && (typeof storageKey.value === "object" || typeof storageKey.value === "string" && (storageKey.value.startsWith("{") || storageKey.value.startsWith("[")));
+  // Shared with the editor screen, so the card and the thing it opens can't
+  // disagree about whether a key holds a container.
+  const parsedValue = (0, _valueType.parseStorageValue)(storageKey.value);
 
-  // Parse JSON string if needed
-  let parsedValue = storageKey.value;
-  if (typeof storageKey.value === "string" && isJsonData) {
-    try {
-      parsedValue = JSON.parse(storageKey.value);
-    } catch {
-      // Keep original if parse fails
-    }
-  }
+  /** The tree only renders for containers. */
+  const showsTree = parsedValue !== null && typeof parsedValue === "object";
 
   // Create expanded content for value and storage details
   const expandedContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -155,7 +153,7 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
           children: "view history \u2192"
         })
       })]
-    }), isJsonData && typeof parsedValue === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), showsTree ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.dataViewerContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
         data: parsedValue,
@@ -210,9 +208,34 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         style: styles.expandedDescription,
         children: storageKey.description
       })]
-    }) : null, onTogglePin || onHideKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    }) : null, editBlockedReason ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.expandedLabel,
+        children: "Edit:"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.expandedDescription,
+        children: editBlockedReason
+      })]
+    }) : null, onTogglePin || onHideKey || canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.actionRow,
-      children: [onTogglePin ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      children: [canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.editButton,
+        onPress: () => isBoolean && onToggleKey ? onToggleKey(storageKey) : onEditKey?.(storageKey),
+        hitSlop: {
+          top: 6,
+          bottom: 6,
+          left: 6,
+          right: 6
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Edit3, {
+          size: 13,
+          color: _sharedUi.macOSColors.background.base
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.editButtonText,
+          children: isBoolean && onToggleKey ? "Toggle" : "Edit"
+        })]
+      }) : null, onTogglePin ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         style: [styles.actionChip, isPinned && styles.actionChipActive],
         onPress: () => onTogglePin(storageKey.key),
         hitSlop: {
@@ -434,6 +457,21 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _sharedUi.macOSColors.semantic.info + "15",
     borderColor: _sharedUi.macOSColors.semantic.info + "44"
   },
+  /** Filled, and first — the one action in this row that changes anything. */
+  editButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.macOSColors.semantic.success
+  },
+  editButtonText: {
+    color: _sharedUi.macOSColors.background.base,
+    fontSize: 12,
+    fontWeight: "700"
+  },
   actionChipText: {
     fontSize: 11,
     fontWeight: "600",