@buoy-gg/storage 7.0.30 → 7.0.32

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

@@ -0,0 +1,572 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StorageKeyDetailScreen = StorageKeyDetailScreen;
+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 _storageQueryUtils = require("../utils/storageQueryUtils");
+var _valueType = require("../utils/valueType");
+var _StorageKeyRow = require("./StorageKeyRow");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * One storage key, on a screen of its own — the React Query detail-screen
+ * shape (and the Zustand tool's twin), pointed at a stored value.
+ *
+ * Tapping a key card opens this instead of expanding in place. Top to bottom:
+ *
+ *   1. VALUE EDITOR — the shared LiveExplorer. No draft, no Save: an edit
+ *      re-serializes the whole value and writes it as you make it. Typing
+ *      commits on a short debounce (~300ms, flushed on blur) so a word is one
+ *      storage write, not one per keystroke — storage writes hit disk and
+ *      land in the events timeline, which is the one way this tool differs
+ *      from RQ's unlogged cache writes. A scalar key is just the root leaf's
+ *      input; a boolean key is a one-tap toggle.
+ *   2. KEY DETAILS — what the expanded card used to say: status, backend,
+ *      MMKV instance, updates (with the road to history), schema diagnostics.
+ *   3. RAW VALUE — the serialized string exactly as the backend holds it.
+ *   4. The card's housekeeping actions: pin, hide, delete.
+ *
+ * THE ROUND-TRIP WRINKLE zustand doesn't have: a storage write is async —
+ * write, device event, snapshot, refreshed prop. Between an edit and its
+ * echo, `storageKey.value` is STALE, so basing the next edit on the prop
+ * would silently revert the previous one (edit qty, then name, and qty snaps
+ * back). `lastWrittenRef` holds the most recent written document and is the
+ * base for every edit until the prop catches up to it — last-write-wins
+ * against the app, exactly once, and never against the editor itself.
+ */
+
+/** How long typed edits coalesce before the single write fires. */const TYPING_COMMIT_MS = 300;
+const DETAIL_ID = "buoy-storage-detail";
+function detailExplorerTestID(dataPath) {
+  const slug = part => part.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return dataPath.length === 0 ? `${DETAIL_ID}-explorer-root` : `${DETAIL_ID}-explorer-${dataPath.map(slug).filter(Boolean).join("-")}`;
+}
+
+/** Same MMKV instance-color rule the card uses. */
+const INSTANCE_COLORS = [_sharedUi.macOSColors.semantic.info, _sharedUi.macOSColors.semantic.success, _sharedUi.macOSColors.semantic.warning, _sharedUi.macOSColors.semantic.debug, "#FF6B9D", "#00D9FF"];
+function getInstanceColor(instanceId) {
+  const hash = instanceId.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
+}
+function StorageKeyDetailScreen({
+  storageKey,
+  editBlockedReason,
+  eventCount,
+  onSave,
+  onViewHistory,
+  onDeleteKey,
+  onHideKey,
+  isPinned = false,
+  onTogglePin,
+  applySafeAreaInset
+}) {
+  const insets = (0, _sharedUi.useSafeAreaInsets)();
+  const bottomInset = applySafeAreaInset ? insets.bottom : 0;
+  const canEdit = editBlockedReason == null;
+  const config = (0, _StorageKeyRow.getStatusConfig)(storageKey.status);
+  const storageTypeLabel = (0, _storageQueryUtils.getStorageTypeLabel)(storageKey.storageType);
+  const [rawOpen, setRawOpen] = (0, _react.useState)(false);
+  // Force the explorer to re-sync focused inputs after a Raw-hatch apply.
+  const [rawVersion, setRawVersion] = (0, _react.useState)(0);
+
+  /**
+   * The most recent document THIS screen wrote, until the refreshed prop
+   * catches up to it — see the module docstring's round-trip wrinkle. Held
+   * as its serialized form so "caught up" is one string compare against the
+   * same serialization the write used.
+   */
+  const lastWrittenRef = (0, _react.useRef)(null);
+  const propParsed = (0, _react.useMemo)(() => (0, _valueType.parseStorageValue)(storageKey.value), [storageKey.value]);
+  const propRaw = typeof storageKey.value === "string" ? storageKey.value : JSON.stringify(storageKey.value);
+  if (lastWrittenRef.current && lastWrittenRef.current.raw === propRaw) {
+    // The device echoed our write back — the prop is current again.
+    lastWrittenRef.current = null;
+  }
+  const baseValue = lastWrittenRef.current ? lastWrittenRef.current.value : propParsed;
+  const write = (0, _react.useCallback)(next => {
+    const raw = JSON.stringify(next);
+    lastWrittenRef.current = {
+      raw,
+      value: next
+    };
+    onSave(raw).catch(e => {
+      // The write was refused (the Pro gate, a dead backend) — the base
+      // must fall back to what's actually stored, or the tree keeps
+      // showing an edit that never landed.
+      lastWrittenRef.current = null;
+      _reactNative.Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
+    });
+  }, [onSave]);
+  const baseRef = (0, _react.useRef)(baseValue);
+  baseRef.current = baseValue;
+  const writer = (0, _react.useMemo)(() => {
+    if (!canEdit) return undefined;
+    return {
+      update: (path, value) => {
+        const next = path.length === 0 ? value : (0, _dataViewer.updateNestedDataByPath)(baseRef.current, path, value);
+        write(next);
+      },
+      remove: path => {
+        if (path.length === 0) return;
+        write((0, _dataViewer.deleteNestedDataByPath)(baseRef.current, path));
+      }
+      // Storage replaces the whole key on every write, so any node may go.
+    };
+  }, [canEdit, write]);
+  const showHousekeeping = onTogglePin || onHideKey || canEdit && onDeleteKey;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.screen,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      testID: `${DETAIL_ID}-key`,
+      accessibilityLabel: storageKey.key
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      testID: `${DETAIL_ID}-scroll`,
+      style: styles.scroll,
+      contentContainerStyle: [styles.scrollContent, {
+        paddingBottom: 24 + bottomInset
+      }],
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.editorContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.sectionHeaderRow,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              testID: `${DETAIL_ID}-editor-header`,
+              style: styles.sectionHeaderAccentText,
+              children: "Value Editor"
+            }), canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+              onPress: () => setRawOpen(true),
+              testID: `${DETAIL_ID}-raw`,
+              accessibilityRole: "button",
+              accessibilityLabel: "Edit raw JSON",
+              style: styles.rawButton,
+              hitSlop: {
+                top: 6,
+                bottom: 6,
+                left: 6,
+                right: 6
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.FileJson, {
+                size: 13,
+                color: _sharedUi.night.color.accent
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.rawButtonText,
+                children: "Raw"
+              })]
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.sectionBody,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.LiveExplorer, {
+              editable: canEdit,
+              label: "Value",
+              value: baseValue,
+              defaultExpanded: ["Value"],
+              writer: writer,
+              dataVersion: rawVersion,
+              testIDForPath: detailExplorerTestID,
+              debounceMs: TYPING_COMMIT_MS
+            }), canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.editorHint,
+              children: "Edits write to the device as you make them \u2014 undo lives in the key's history."
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.blockedText,
+              testID: `${DETAIL_ID}-edit-blocked`,
+              children: editBlockedReason
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionHeaderPlain,
+            children: "Key Details"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.infoBody,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Status:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: config.color,
+                testID: `${DETAIL_ID}-status`,
+                children: config.label
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoDim,
+                children: config.sublabel
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Storage:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: (0, _StorageKeyRow.getStorageTypeColor)(storageKey.storageType),
+                children: storageTypeLabel
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoDim,
+                children: (0, _valueType.getValueTypeLabel)(storageKey.value)
+              })]
+            }), storageKey.storageType === "mmkv" && storageKey.instanceId && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Instance:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: getInstanceColor(storageKey.instanceId),
+                icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.HardDrive, {
+                  size: 9,
+                  color: getInstanceColor(storageKey.instanceId)
+                }),
+                children: storageKey.instanceId
+              })]
+            }), eventCount != null && eventCount > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Updates:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PillBadge, {
+                color: _sharedUi.macOSColors.semantic.warning,
+                children: String(eventCount)
+              }), eventCount > 1 && onViewHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+                onPress: onViewHistory,
+                testID: "buoy-storage-key-history",
+                accessibilityLabel: `View history for ${storageKey.key}`,
+                accessibilityRole: "button",
+                style: styles.inlineLinkButton,
+                hitSlop: {
+                  top: 6,
+                  bottom: 6,
+                  left: 6,
+                  right: 6
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                  style: styles.inlineLinkText,
+                  children: "view history \u2192"
+                })
+              })]
+            }), storageKey.status === "required_wrong_type" && storageKey.expectedType && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Expected:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TypeBadge, {
+                type: storageKey.expectedType
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+                style: styles.infoDim,
+                children: ["got ", (0, _valueType.getValueTypeLabel)(storageKey.value)]
+              })]
+            }), storageKey.status === "required_wrong_value" && storageKey.expectedValue && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Expected:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoExpected,
+                children: String(storageKey.expectedValue)
+              })]
+            }), storageKey.description ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoLabel,
+                children: "Info:"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.infoDescription,
+                children: storageKey.description
+              })]
+            }) : null]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.sectionHeaderPlain,
+            children: "Value Explorer"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.viewerBody,
+            testID: `${DETAIL_ID}-viewer`,
+            children: baseValue !== null && typeof baseValue === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+              title: "",
+              data: baseValue,
+              showTypeFilter: true,
+              rawMode: true,
+              initialExpanded: false
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.rawValueText,
+              selectable: true,
+              children: propRaw ?? "undefined"
+            })
+          })]
+        })
+      }), showHousekeeping ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.actionRow,
+        children: [onTogglePin ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: [styles.actionChip, isPinned && styles.actionChipActive],
+          testID: "buoy-storage-key-pin",
+          accessibilityLabel: isPinned ? `Unpin ${storageKey.key}` : `Pin ${storageKey.key} to top`,
+          accessibilityRole: "button",
+          onPress: () => onTogglePin(storageKey.key),
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pin, {
+            size: 12,
+            active: isPinned,
+            color: _sharedUi.night.color.accent
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.actionChipText, {
+              color: _sharedUi.night.color.accent
+            }],
+            children: isPinned ? "Unpin" : "Pin to top"
+          })]
+        }) : null, onHideKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: styles.actionChip,
+          testID: "buoy-storage-key-hide",
+          accessibilityLabel: `Hide ${storageKey.key} from list`,
+          accessibilityRole: "button",
+          onPress: () => onHideKey(storageKey),
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EyeOff, {
+            size: 12,
+            color: _sharedUi.night.color.warning
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.actionChipText, {
+              color: _sharedUi.night.color.warning
+            }],
+            children: "Hide from list"
+          })]
+        }) : null, canEdit && onDeleteKey ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+          style: [styles.actionChip, styles.dangerChip],
+          testID: "buoy-storage-key-delete",
+          accessibilityLabel: `Delete key ${storageKey.key}`,
+          accessibilityRole: "button",
+          onPress: () => onDeleteKey(storageKey),
+          hitSlop: {
+            top: 6,
+            bottom: 6,
+            left: 6,
+            right: 6
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+            size: 12,
+            color: _sharedUi.night.color.danger
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.actionChipText, {
+              color: _sharedUi.night.color.danger
+            }],
+            children: "Delete key"
+          })]
+        }) : null]
+      }) : null]
+    }), rawOpen && canEdit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.ValueEditModal, {
+      path: [],
+      value: baseValue,
+      onSave: next => {
+        write(next);
+        setRawVersion(v => v + 1);
+        setRawOpen(false);
+      },
+      onCancel: () => setRawOpen(false),
+      saveLabel: "Apply",
+      testIDPrefix: "buoy-storage-value"
+    }) : null]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  screen: {
+    flex: 1,
+    minHeight: 0
+    // Transparent — this is the modal's body, and the modal paints its own
+    // background (the same contract as the Zustand detail screen).
+  },
+  scroll: {
+    flex: 1
+  },
+  scrollContent: {
+    paddingHorizontal: 8,
+    paddingTop: 8
+  },
+  section: {
+    marginBottom: 16
+  },
+  editorContainer: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.accent + "4D",
+    overflow: "hidden",
+    shadowColor: _sharedUi.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  sectionHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: _sharedUi.night.color.accent + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.accent + "33"
+  },
+  sectionHeaderAccentText: {
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.night.color.accent,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  rawButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  rawButtonText: {
+    color: _sharedUi.night.color.accent,
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  sectionBody: {
+    padding: 8
+  },
+  editorHint: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4,
+    lineHeight: 14
+  },
+  blockedText: {
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: 12,
+    padding: 12,
+    lineHeight: 18
+  },
+  infoContainer: {
+    minWidth: 200,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    overflow: "hidden"
+  },
+  sectionHeaderPlain: {
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontWeight: "600",
+    fontSize: 12,
+    color: _sharedUi.night.color.textSecondary,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.night.color.border,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  infoBody: {
+    padding: 12,
+    gap: 10
+  },
+  infoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  infoLabel: {
+    fontSize: 10,
+    color: _sharedUi.night.color.textTertiary,
+    fontWeight: "600",
+    minWidth: 64,
+    fontFamily: "monospace"
+  },
+  infoDim: {
+    color: _sharedUi.night.color.textTertiary,
+    fontSize: 10,
+    fontFamily: "monospace"
+  },
+  infoExpected: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  infoDescription: {
+    fontSize: 11,
+    color: _sharedUi.night.color.textSecondary,
+    flex: 1
+  },
+  rawValueText: {
+    color: _sharedUi.night.color.textSecondary,
+    fontSize: 11,
+    fontFamily: "monospace",
+    lineHeight: 16,
+    padding: 12
+  },
+  viewerBody: {
+    backgroundColor: _sharedUi.night.color.bg,
+    minHeight: 48
+  },
+  inlineLinkButton: {
+    marginLeft: 4
+  },
+  inlineLinkText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    color: _sharedUi.night.color.accent
+  },
+  actionRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: 8,
+    paddingHorizontal: 4
+  },
+  actionChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    borderRadius: 6,
+    backgroundColor: _sharedUi.night.color.surface,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border
+  },
+  dangerChip: {
+    borderColor: _sharedUi.night.color.danger + "55"
+  },
+  actionChipActive: {
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  },
+  actionChipText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  }
+});

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StorageKeyRow = void 0;
+exports.getStorageTypeColor = exports.getStatusConfig = exports.StorageKeyRow = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
@@ -33,6 +33,8 @@ function getInstanceColor(instanceId) {
   const hash = instanceId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
   return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
 }
+/** Exported for the key DETAIL screen, so card and detail can't disagree
+ * about what a status is called or what color it wears. */
 const getStatusConfig = status => {
   switch (status) {
     case "required_present":
@@ -65,8 +67,17 @@ const getStatusConfig = status => {
         color: _sharedUi.macOSColors.semantic.debug,
         sublabel: "Optional"
       };
+    // Runtime data can carry a status the union doesn't know (a stale
+    // snapshot, a newer adapter) — a devtool must render it, not redbox.
+    default:
+      return {
+        label: "Set",
+        color: _sharedUi.macOSColors.text.secondary,
+        sublabel: String(status)
+      };
   }
 };
+exports.getStatusConfig = getStatusConfig;
 const formatValue = value => {
   if (value === undefined || value === null) {
     return "undefined";
@@ -377,7 +388,7 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
         testID: `buoy-storage-row-${storageKey.storageType}-${storageKey.key}`,
         accessibilityLabel: `${storageKey.storageType} ${storageKey.key}`
       }), eventCount != null && eventCount > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.absCountBadge, {
+        style: [styles.absCountBadge, isExpanded && styles.absCountBadgeExpanded, {
           backgroundColor: _sharedUi.macOSColors.semantic.warning + "22",
           borderColor: _sharedUi.macOSColors.semantic.warning + "55"
         }],
@@ -392,6 +403,8 @@ const StorageKeyRow = exports.StorageKeyRow = /*#__PURE__*/(0, _react.memo)(func
     })]
   });
 });
+
+/** Exported for the key DETAIL screen — same reason as getStatusConfig. */
 const getStorageTypeColor = storageType => {
   switch (storageType) {
     case "mmkv":
@@ -404,6 +417,7 @@ const getStorageTypeColor = storageType => {
       return _sharedUi.macOSColors.text.secondary;
   }
 };
+exports.getStorageTypeColor = getStorageTypeColor;
 const styles = _reactNative.StyleSheet.create({
   badgeRow: {
     flexDirection: "row",
@@ -478,6 +492,11 @@ const styles = _reactNative.StyleSheet.create({
     borderWidth: 1,
     zIndex: 1
   },
+  // The expanded CompactRow grows its wrapper margin from 3 to 12, so the
+  // badge has to drop with it or it floats above the card border.
+  absCountBadgeExpanded: {
+    top: 13
+  },
   absCountText: {
     fontSize: 9,
     fontWeight: "700",