@buoy-gg/storage 7.0.30 → 7.0.32

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

@@ -0,0 +1,570 @@
+"use strict";
+
+/**
+ * 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.
+ */
+
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { EyeOff, FileJson, HardDrive, night, macOSColors, Pin, PillBadge, Trash2, TypeBadge, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { DataViewer, LiveExplorer, ValueEditModal, updateNestedDataByPath, deleteNestedDataByPath } from "@buoy-gg/shared-ui/dataViewer";
+import { getStorageTypeLabel } from "../utils/storageQueryUtils";
+import { getValueTypeLabel, parseStorageValue } from "../utils/valueType";
+import { getStatusConfig, getStorageTypeColor } from "./StorageKeyRow";
+
+/** How long typed edits coalesce before the single write fires. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 = [macOSColors.semantic.info, macOSColors.semantic.success, macOSColors.semantic.warning, 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];
+}
+export function StorageKeyDetailScreen({
+  storageKey,
+  editBlockedReason,
+  eventCount,
+  onSave,
+  onViewHistory,
+  onDeleteKey,
+  onHideKey,
+  isPinned = false,
+  onTogglePin,
+  applySafeAreaInset
+}) {
+  const insets = useSafeAreaInsets();
+  const bottomInset = applySafeAreaInset ? insets.bottom : 0;
+  const canEdit = editBlockedReason == null;
+  const config = getStatusConfig(storageKey.status);
+  const storageTypeLabel = getStorageTypeLabel(storageKey.storageType);
+  const [rawOpen, setRawOpen] = useState(false);
+  // Force the explorer to re-sync focused inputs after a Raw-hatch apply.
+  const [rawVersion, setRawVersion] = 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 = useRef(null);
+  const propParsed = useMemo(() => 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 = 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;
+      Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
+    });
+  }, [onSave]);
+  const baseRef = useRef(baseValue);
+  baseRef.current = baseValue;
+  const writer = useMemo(() => {
+    if (!canEdit) return undefined;
+    return {
+      update: (path, value) => {
+        const next = path.length === 0 ? value : updateNestedDataByPath(baseRef.current, path, value);
+        write(next);
+      },
+      remove: path => {
+        if (path.length === 0) return;
+        write(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__*/_jsxs(View, {
+    style: styles.screen,
+    children: [/*#__PURE__*/_jsx(View, {
+      testID: `${DETAIL_ID}-key`,
+      accessibilityLabel: storageKey.key
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      testID: `${DETAIL_ID}-scroll`,
+      style: styles.scroll,
+      contentContainerStyle: [styles.scrollContent, {
+        paddingBottom: 24 + bottomInset
+      }],
+      keyboardShouldPersistTaps: "handled",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.editorContainer,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.sectionHeaderRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              testID: `${DETAIL_ID}-editor-header`,
+              style: styles.sectionHeaderAccentText,
+              children: "Value Editor"
+            }), canEdit ? /*#__PURE__*/_jsxs(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__*/_jsx(FileJson, {
+                size: 13,
+                color: night.color.accent
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.rawButtonText,
+                children: "Raw"
+              })]
+            }) : null]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.sectionBody,
+            children: [/*#__PURE__*/_jsx(LiveExplorer, {
+              editable: canEdit,
+              label: "Value",
+              value: baseValue,
+              defaultExpanded: ["Value"],
+              writer: writer,
+              dataVersion: rawVersion,
+              testIDForPath: detailExplorerTestID,
+              debounceMs: TYPING_COMMIT_MS
+            }), canEdit ? /*#__PURE__*/_jsx(Text, {
+              style: styles.editorHint,
+              children: "Edits write to the device as you make them \u2014 undo lives in the key's history."
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.blockedText,
+              testID: `${DETAIL_ID}-edit-blocked`,
+              children: editBlockedReason
+            })]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionHeaderPlain,
+            children: "Key Details"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.infoBody,
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Status:"
+              }), /*#__PURE__*/_jsx(PillBadge, {
+                color: config.color,
+                testID: `${DETAIL_ID}-status`,
+                children: config.label
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.infoDim,
+                children: config.sublabel
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Storage:"
+              }), /*#__PURE__*/_jsx(PillBadge, {
+                color: getStorageTypeColor(storageKey.storageType),
+                children: storageTypeLabel
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.infoDim,
+                children: getValueTypeLabel(storageKey.value)
+              })]
+            }), storageKey.storageType === "mmkv" && storageKey.instanceId && /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Instance:"
+              }), /*#__PURE__*/_jsx(PillBadge, {
+                color: getInstanceColor(storageKey.instanceId),
+                icon: /*#__PURE__*/_jsx(HardDrive, {
+                  size: 9,
+                  color: getInstanceColor(storageKey.instanceId)
+                }),
+                children: storageKey.instanceId
+              })]
+            }), eventCount != null && eventCount > 0 && /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Updates:"
+              }), /*#__PURE__*/_jsx(PillBadge, {
+                color: macOSColors.semantic.warning,
+                children: String(eventCount)
+              }), eventCount > 1 && onViewHistory && /*#__PURE__*/_jsx(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__*/_jsx(Text, {
+                  style: styles.inlineLinkText,
+                  children: "view history \u2192"
+                })
+              })]
+            }), storageKey.status === "required_wrong_type" && storageKey.expectedType && /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Expected:"
+              }), /*#__PURE__*/_jsx(TypeBadge, {
+                type: storageKey.expectedType
+              }), /*#__PURE__*/_jsxs(Text, {
+                style: styles.infoDim,
+                children: ["got ", getValueTypeLabel(storageKey.value)]
+              })]
+            }), storageKey.status === "required_wrong_value" && storageKey.expectedValue && /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Expected:"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.infoExpected,
+                children: String(storageKey.expectedValue)
+              })]
+            }), storageKey.description ? /*#__PURE__*/_jsxs(View, {
+              style: styles.infoRow,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.infoLabel,
+                children: "Info:"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.infoDescription,
+                children: storageKey.description
+              })]
+            }) : null]
+          })]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.infoContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.sectionHeaderPlain,
+            children: "Value Explorer"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.viewerBody,
+            testID: `${DETAIL_ID}-viewer`,
+            children: baseValue !== null && typeof baseValue === "object" ? /*#__PURE__*/_jsx(DataViewer, {
+              title: "",
+              data: baseValue,
+              showTypeFilter: true,
+              rawMode: true,
+              initialExpanded: false
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.rawValueText,
+              selectable: true,
+              children: propRaw ?? "undefined"
+            })
+          })]
+        })
+      }), showHousekeeping ? /*#__PURE__*/_jsxs(View, {
+        style: styles.actionRow,
+        children: [onTogglePin ? /*#__PURE__*/_jsxs(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__*/_jsx(Pin, {
+            size: 12,
+            active: isPinned,
+            color: night.color.accent
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.actionChipText, {
+              color: night.color.accent
+            }],
+            children: isPinned ? "Unpin" : "Pin to top"
+          })]
+        }) : null, onHideKey ? /*#__PURE__*/_jsxs(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__*/_jsx(EyeOff, {
+            size: 12,
+            color: night.color.warning
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.actionChipText, {
+              color: night.color.warning
+            }],
+            children: "Hide from list"
+          })]
+        }) : null, canEdit && onDeleteKey ? /*#__PURE__*/_jsxs(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__*/_jsx(Trash2, {
+            size: 12,
+            color: night.color.danger
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.actionChipText, {
+              color: night.color.danger
+            }],
+            children: "Delete key"
+          })]
+        }) : null]
+      }) : null]
+    }), rawOpen && canEdit ? /*#__PURE__*/_jsx(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 = 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: night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.accent + "4D",
+    overflow: "hidden",
+    shadowColor: night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6
+  },
+  sectionHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: night.color.accent + "1A",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: night.color.accent + "33"
+  },
+  sectionHeaderAccentText: {
+    fontWeight: "600",
+    fontSize: 12,
+    color: night.color.accent,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace"
+  },
+  rawButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  rawButtonText: {
+    color: night.color.accent,
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  sectionBody: {
+    padding: 8
+  },
+  editorHint: {
+    color: night.color.textTertiary,
+    fontSize: 10,
+    paddingTop: 8,
+    paddingHorizontal: 4,
+    lineHeight: 14
+  },
+  blockedText: {
+    color: night.color.textSecondary,
+    fontSize: 12,
+    padding: 12,
+    lineHeight: 18
+  },
+  infoContainer: {
+    minWidth: 200,
+    backgroundColor: night.color.surface,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    overflow: "hidden"
+  },
+  sectionHeaderPlain: {
+    backgroundColor: night.color.surfaceElevated,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontWeight: "600",
+    fontSize: 12,
+    color: night.color.textSecondary,
+    borderBottomWidth: 1,
+    borderBottomColor: 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: night.color.textTertiary,
+    fontWeight: "600",
+    minWidth: 64,
+    fontFamily: "monospace"
+  },
+  infoDim: {
+    color: night.color.textTertiary,
+    fontSize: 10,
+    fontFamily: "monospace"
+  },
+  infoExpected: {
+    fontSize: 11,
+    color: macOSColors.semantic.warning,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  infoDescription: {
+    fontSize: 11,
+    color: night.color.textSecondary,
+    flex: 1
+  },
+  rawValueText: {
+    color: night.color.textSecondary,
+    fontSize: 11,
+    fontFamily: "monospace",
+    lineHeight: 16,
+    padding: 12
+  },
+  viewerBody: {
+    backgroundColor: night.color.bg,
+    minHeight: 48
+  },
+  inlineLinkButton: {
+    marginLeft: 4
+  },
+  inlineLinkText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    color: 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: night.color.surface,
+    borderWidth: 1,
+    borderColor: night.color.border
+  },
+  dangerChip: {
+    borderColor: night.color.danger + "55"
+  },
+  actionChipActive: {
+    backgroundColor: night.color.accentSoft,
+    borderColor: night.color.accentBorderStrong
+  },
+  actionChipText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  }
+});

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

@@ -30,7 +30,9 @@ function getInstanceColor(instanceId) {
   const hash = instanceId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
   return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
 }
-const getStatusConfig = status => {
+/** Exported for the key DETAIL screen, so card and detail can't disagree
+ * about what a status is called or what color it wears. */
+export const getStatusConfig = status => {
   switch (status) {
     case "required_present":
       return {
@@ -62,6 +64,14 @@ const getStatusConfig = status => {
         color: 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: macOSColors.text.secondary,
+        sublabel: String(status)
+      };
   }
 };
 const formatValue = value => {
@@ -374,7 +384,7 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
         testID: `buoy-storage-row-${storageKey.storageType}-${storageKey.key}`,
         accessibilityLabel: `${storageKey.storageType} ${storageKey.key}`
       }), eventCount != null && eventCount > 1 && /*#__PURE__*/_jsx(View, {
-        style: [styles.absCountBadge, {
+        style: [styles.absCountBadge, isExpanded && styles.absCountBadgeExpanded, {
           backgroundColor: macOSColors.semantic.warning + "22",
           borderColor: macOSColors.semantic.warning + "55"
         }],
@@ -389,7 +399,9 @@ export const StorageKeyRow = /*#__PURE__*/memo(function StorageKeyRow({
     })]
   });
 });
-const getStorageTypeColor = storageType => {
+
+/** Exported for the key DETAIL screen — same reason as getStatusConfig. */
+export const getStorageTypeColor = storageType => {
   switch (storageType) {
     case "mmkv":
       return macOSColors.semantic.info;
@@ -475,6 +487,11 @@ const styles = 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",