@buoy-gg/storage 7.0.4 → 7.0.5

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

@@ -0,0 +1,136 @@
+"use strict";
+
+/**
+ * "Which backend?" — the pill row shared by the Keys and Events tabs.
+ *
+ * Both tabs answer questions about the same three backends, so asking the
+ * question two different ways (or, as it was, only on one tab) is a gap rather
+ * than a simplification: you filter the key list to Keychain, switch to Events
+ * to see what wrote to it, and you're looking at everything again.
+ *
+ * The selection is owned by the modal and passed to both, so switching tabs
+ * keeps the filter you set.
+ *
+ * Each pill carries the count it WOULD show, computed before the type filter is
+ * applied — a count that collapsed to zero the moment you picked another type
+ * would tell you nothing about where to look next.
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One entry per pill. This was four near-identical blocks of JSX differing only
+ * in three colours and a label, which is how "All Types" ended up with a
+ * hover-grey active state while the others used their own hue.
+ */
+const SEGMENTS = [{
+  id: "all",
+  label: "All Types",
+  color: null
+}, {
+  id: "async",
+  label: "Async",
+  color: macOSColors.semantic.warning
+}, {
+  id: "mmkv",
+  label: "MMKV",
+  color: macOSColors.semantic.info
+}, {
+  id: "secure",
+  label: "Secure",
+  color: macOSColors.semantic.success
+}];
+export function StorageTypeFilterBar({
+  active,
+  onChange,
+  counts
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.row,
+    children: SEGMENTS.map(segment => {
+      const isActive = active === segment.id;
+      const accent = segment.color ?? macOSColors.text.primary;
+      return /*#__PURE__*/_jsxs(TouchableOpacity, {
+        accessibilityLabel: `Filter by ${segment.label}`,
+        accessibilityState: {
+          selected: isActive
+        },
+        activeOpacity: 0.8,
+        onPress: () => onChange(segment.id),
+        style: [styles.pill, {
+          borderColor: macOSColors.border.default
+        }, isActive && [styles.pillActive, segment.color ? {
+          backgroundColor: segment.color + "15",
+          borderColor: segment.color + "40"
+        } : {
+          backgroundColor: macOSColors.background.hover,
+          borderColor: macOSColors.border.hover
+        }]],
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.label, isActive && {
+            color: accent,
+            fontWeight: "600"
+          }],
+          children: segment.label
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.value, {
+            color: isActive ? accent : macOSColors.text.muted
+          }],
+          children: counts[segment.id]
+        })]
+      }, segment.id);
+    })
+  });
+}
+
+/** Tally a list of things that each know which backend they came from. */
+export function countByStorageType(items) {
+  const counts = {
+    all: items.length,
+    async: 0,
+    mmkv: 0,
+    secure: 0
+  };
+  for (const item of items) counts[item.storageType] += 1;
+  return counts;
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    gap: 8,
+    marginTop: 2
+  },
+  pill: {
+    flex: 1,
+    backgroundColor: macOSColors.background.input + "80",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default + "30",
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 32
+  },
+  pillActive: {
+    borderWidth: 1,
+    transform: [{
+      scale: 1.005
+    }]
+  },
+  label: {
+    fontSize: 9,
+    color: macOSColors.text.secondary,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    fontWeight: "500",
+    marginBottom: 1
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    lineHeight: 14
+  }
+});

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

@@ -0,0 +1,357 @@
+"use strict";
+
+/**
+ * Editing one value: a panel at the top of the screen, with Cancel and Save.
+ *
+ * This started as a pushed full screen and that was more ceremony than the task
+ * deserves — changing one string is the most ordinary thing in this tool, and
+ * it shouldn't cost a navigation. A modal is what people expect, and the reason
+ * it's pinned to the TOP rather than centred is the keyboard: a centred panel
+ * gets shoved up or covered the moment the field focuses, and a bottom sheet is
+ * simply underneath it. At the top it stays put and stays readable.
+ *
+ * The field is multiline for anything textual. Stored values are routinely
+ * tokens, URLs and serialized blobs, and a single line shows you roughly forty
+ * characters of them, scrolling sideways — which is how you edit the wrong part
+ * of a string without noticing.
+ *
+ * Type is preserved by construction: the ORIGINAL value's type picks the editor
+ * AND decides how the draft is read back, so editing a number can only produce
+ * a number. Raw JSON — the escape hatch for containers — re-checks the parsed
+ * result and refuses a different shape.
+ *
+ * Nothing here writes. `onSave` hands the value to whoever owns it.
+ */
+
+import { useState } from "react";
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { absoluteFill, macOSColors } from "@buoy-gg/shared-ui";
+import { breadcrumb, typeLabel } from "@buoy-gg/shared-ui/dataViewer";
+
+/**
+ * How this value gets edited. Driven by the value's own type, which is also
+ * what makes the result type-safe without asking the user to declare anything.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function modeFor(value) {
+  if (typeof value === "boolean") return "boolean";
+  if (typeof value === "number") return "number";
+  if (value !== null && typeof value === "object") return "raw";
+  return "text";
+}
+function initialText(value, mode) {
+  if (mode === "raw") return JSON.stringify(value, null, 2);
+  if (value === null || value === undefined) return "";
+  return String(value);
+}
+function hintFor(mode, type) {
+  switch (mode) {
+    case "number":
+      return "Numeric only — anything else is refused, so this stays a number.";
+    case "raw":
+      return `Raw JSON. Must stay ${type === "array" ? "an array" : "an object"} — a different shape is refused.`;
+    default:
+      return "Saves as a string. The type never changes here.";
+  }
+}
+export function StorageValueEditModal({
+  path,
+  value,
+  onSave,
+  onCancel,
+  saveLabel = "Save",
+  busy = false
+}) {
+  const mode = modeFor(value);
+  const type = typeLabel(value);
+  const [text, setText] = useState(() => initialText(value, mode));
+
+  /**
+   * Advisory only — {@link commit} re-derives it, so a disabled button and a
+   * refused save can never disagree about what's valid.
+   */
+  const error = validate(text, mode, type);
+  const blocked = busy || error != null;
+  const commit = () => {
+    if (busy || validate(text, mode, type) != null) return;
+    onSave(parse(text, mode, value));
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.scrim,
+      activeOpacity: 1,
+      onPress: busy ? undefined : onCancel,
+      accessibilityLabel: "Dismiss editor"
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.panel,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.card,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.headerRow,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: "Edit value"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.typeBadge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.typeBadgeText,
+              children: type
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.path,
+          numberOfLines: 1,
+          children: breadcrumb(path)
+        }), mode === "boolean" ? /*#__PURE__*/_jsx(BooleanChoice, {
+          current: value === true,
+          onPick: onSave
+        }) : /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.fieldScroll,
+          keyboardShouldPersistTaps: "handled",
+          children: /*#__PURE__*/_jsx(TextInput, {
+            value: text,
+            onChangeText: setText,
+            autoFocus: true,
+            autoCapitalize: "none",
+            autoCorrect: false,
+            spellCheck: false,
+            editable: !busy
+            // 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",
+            onSubmitEditing: mode === "number" ? commit : undefined,
+            placeholder: mode === "raw" ? "{ }" : "value",
+            placeholderTextColor: macOSColors.text.muted,
+            style: [styles.input, mode === "raw" && styles.inputRaw, mode !== "number" && styles.inputMultiline, error != null && styles.inputInvalid]
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: error != null ? styles.error : styles.hint,
+          children: error ?? hintFor(mode, type)
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.actions,
+          children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: onCancel,
+            disabled: busy,
+            accessibilityLabel: "Cancel edit",
+            style: styles.cancelButton,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.cancelText,
+              children: "Cancel"
+            })
+          }), mode === "boolean" ? null : /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: commit,
+            disabled: blocked,
+            accessibilityLabel: saveLabel,
+            style: [styles.saveButton, blocked && styles.saveDisabled],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.saveText,
+              children: busy ? "Saving…" : saveLabel
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}
+function BooleanChoice({
+  current,
+  onPick
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.boolRow,
+    children: [true, false].map(option => /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: () => onPick(option),
+      accessibilityLabel: `Set ${option}`,
+      style: [styles.boolButton, current === option && styles.boolActive],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.boolText, current === option && styles.boolTextActive],
+        children: String(option)
+      })
+    }, String(option)))
+  });
+}
+
+/** Null when the draft is applicable, else why it isn't. */
+function validate(text, mode, type) {
+  if (mode === "number") {
+    if (text.trim() === "") return "Enter a number.";
+    if (Number.isNaN(Number(text))) return `"${text}" isn't a number.`;
+    return null;
+  }
+  if (mode === "raw") {
+    let parsed;
+    try {
+      parsed = JSON.parse(text);
+    } catch (e) {
+      return e instanceof Error ? e.message : "Invalid JSON.";
+    }
+    if (typeLabel(parsed) !== type) {
+      return `Must stay ${type} — that parses as ${typeLabel(parsed)}.`;
+    }
+    return null;
+  }
+  return null;
+}
+function parse(text, mode, original) {
+  if (mode === "number") return Number(text);
+  if (mode === "raw") return JSON.parse(text);
+  // An emptied field on a null keeps it null rather than silently minting an
+  // empty string, which would change the type this promised to preserve.
+  if (original === null && text === "") return null;
+  return text;
+}
+const styles = StyleSheet.create({
+  overlay: {
+    ...absoluteFill,
+    zIndex: 20
+  },
+  scrim: {
+    ...absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.55)"
+  },
+  /** Pinned to the top so the keyboard can't reach it. */
+  panel: {
+    padding: 12
+  },
+  card: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 14,
+    gap: 8
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    flex: 1,
+    color: macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+    backgroundColor: macOSColors.background.hover
+  },
+  typeBadgeText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  path: {
+    color: macOSColors.text.muted,
+    fontSize: 11,
+    fontFamily: "monospace"
+  },
+  /** Caps the panel's height so a huge blob can't push the buttons off-screen. */
+  fieldScroll: {
+    maxHeight: 240
+  },
+  input: {
+    color: macOSColors.text.primary,
+    backgroundColor: macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+    fontFamily: "monospace"
+  },
+  inputMultiline: {
+    minHeight: 110,
+    lineHeight: 20,
+    textAlignVertical: "top"
+  },
+  inputRaw: {
+    minHeight: 180,
+    fontSize: 12,
+    lineHeight: 18
+  },
+  inputInvalid: {
+    borderColor: macOSColors.semantic.error
+  },
+  hint: {
+    color: macOSColors.text.muted,
+    fontSize: 11,
+    lineHeight: 16
+  },
+  error: {
+    color: macOSColors.semantic.error,
+    fontSize: 11,
+    lineHeight: 16,
+    fontFamily: "monospace"
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 8,
+    paddingTop: 2
+  },
+  cancelButton: {
+    flex: 1,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  cancelText: {
+    color: macOSColors.text.secondary,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  saveButton: {
+    flex: 1.4,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    backgroundColor: macOSColors.semantic.success
+  },
+  saveDisabled: {
+    opacity: 0.35
+  },
+  saveText: {
+    color: macOSColors.background.base,
+    fontSize: 15,
+    fontWeight: "700"
+  },
+  boolRow: {
+    flexDirection: "row",
+    gap: 10
+  },
+  boolButton: {
+    flex: 1,
+    minHeight: 64,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    backgroundColor: macOSColors.background.base
+  },
+  boolActive: {
+    borderColor: macOSColors.semantic.warning,
+    backgroundColor: macOSColors.semantic.warning + "18"
+  },
+  boolText: {
+    color: macOSColors.text.muted,
+    fontSize: 16,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  boolTextActive: {
+    color: macOSColors.semantic.warning
+  }
+});

package/lib/module/storage/hooks/useKeyEditor.js

@@ -0,0 +1,100 @@
+"use strict";
+
+/**
+ * Everything editing a key involves, minus how it looks.
+ *
+ * The phone and the dashboard run the same editor: one buffered draft, one
+ * write on save, a selection the structural actions operate on, a modal for
+ * typing a value, and a guard so closing can't silently drop unsaved work.
+ * What differs is presentation — thumb-sized tiles under a full screen versus
+ * chips docked in a panel — which is a rendering concern and nothing more.
+ *
+ * Keeping the rules here means the two surfaces can't drift on the things that
+ * would actually hurt: whether a boolean opens an editor, whether a failed
+ * write closes the editor anyway, what "dirty" means.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { getAtPath } from "@buoy-gg/shared-ui/dataViewer";
+import { useTreeDraft } from "./useTreeDraft";
+export function useKeyEditor({
+  value,
+  save,
+  onClose,
+  confirmDiscard
+}) {
+  const draft = useTreeDraft(value, save);
+  const [selection, setSelection] = useState(null);
+  const [valuePath, setValuePath] = useState(null);
+  const {
+    begin
+  } = draft;
+  useEffect(() => {
+    begin();
+    // Seed the draft ONCE, when the editor opens. `begin` closes over the live
+    // value, whose identity changes every time the key list refreshes
+    // underneath us (a parsed JSON string is a new object each pass), so
+    // re-running would reset the draft mid-edit and discard the user's work.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /**
+   * "Change this node". For a boolean that's a flip rather than a modal — the
+   * same rule `treeActionsFor` applies to the action controls, so the gesture
+   * and the button can't mean different things.
+   */
+  const openValueEditor = useCallback(path => {
+    const current = getAtPath(draft.value, path);
+    if (typeof current === "boolean") {
+      draft.apply({
+        kind: "replace",
+        path,
+        value: !current
+      });
+      return;
+    }
+    setValuePath(path);
+  }, [draft]);
+  const applyValue = useCallback(next => {
+    draft.apply({
+      kind: "replace",
+      path: valuePath ?? [],
+      value: next
+    });
+    setValuePath(null);
+  }, [draft, valuePath]);
+
+  // Only leave once the write actually landed — `commit` resolves false and
+  // keeps the draft on screen when the device refuses it, and closing anyway
+  // would throw the work away while showing an error nobody ever sees.
+  const saveAndClose = useCallback(() => {
+    void draft.commit().then(saved => saved && onClose());
+  }, [draft, onClose]);
+  const requestClose = useCallback(() => {
+    if (!draft.isDirty) {
+      onClose();
+      return;
+    }
+    // The draft is the only copy of this work, so closing over it silently is
+    // the one way this editor can lose something the user can't get back.
+    confirmDiscard({
+      save: saveAndClose,
+      discard: () => {
+        draft.discard();
+        onClose();
+      }
+    });
+  }, [confirmDiscard, draft, onClose, saveAndClose]);
+  return {
+    draft,
+    selection,
+    setSelection,
+    valuePath,
+    openValueEditor,
+    closeValueEditor: () => setValuePath(null),
+    applyValue,
+    openRawEditor: () => setValuePath([]),
+    requestClose,
+    saveAndClose
+  };
+}

package/lib/module/storage/hooks/useMeasuredWidth.js

@@ -0,0 +1,71 @@
+"use strict";
+
+/**
+ * Measure a container's width, for the layouts that switch between a card list
+ * and a wide table.
+ *
+ * Three things went wrong before this landed on a callback ref; all three are
+ * worth knowing, because the same trap is waiting in any other tool that wants
+ * a width-driven layout.
+ *
+ * 1. `onLayout` ALONE IS NOT ENOUGH. On react-native-web it never delivered its
+ *    first callback for these subtrees. The node carries RNW's
+ *    `__reactLayoutHandler`, and a ResizeObserver attached by hand fires on that
+ *    very same node — so the handler is wired and the observer works; RNW's
+ *    shared observer just never calls it. `width` stayed 0 and the table never
+ *    appeared, silently. `onLayout` is still wired here because it works on
+ *    native.
+ *
+ * 2. RE-MEASURING EVERY RENDER DEADLOCKS THE RENDERER. Filtering a list changes
+ *    whether its scrollbar is present, which changes the container width, which
+ *    re-renders, which re-measures — with no fixed point. An observer only fires
+ *    when the size genuinely changes, so layout settles.
+ *
+ * 3. A MOUNT-ONLY EFFECT MISSES THE NODE. These components early-return a
+ *    loading state before the measured container exists, so `ref.current` is
+ *    null when a `useEffect(…, [])` runs, and it never runs again. A callback
+ *    ref fires whenever the node actually attaches — including the second time.
+ */
+
+import { useCallback, useRef, useState } from "react";
+
+/** The bits of a DOM node we need. This package has no `dom` lib. */
+
+function getResizeObserver() {
+  return globalThis.ResizeObserver;
+}
+function isMeasurable(node) {
+  return typeof node?.getBoundingClientRect === "function";
+}
+export function useMeasuredWidth() {
+  const [width, setWidth] = useState(0);
+  const observerRef = useRef(null);
+
+  // A sub-pixel wobble is not a layout change; anything larger is.
+  const apply = useCallback(measured => {
+    setWidth(prev => Math.abs(prev - measured) > 1 ? measured : prev);
+  }, []);
+  const ref = useCallback(node => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+
+    // Detach (node === null) or a platform without DOM measurement: leave the
+    // last width in place so a remount doesn't flash the wrong layout.
+    if (!isMeasurable(node)) return;
+    apply(node.getBoundingClientRect().width);
+    const Observer = getResizeObserver();
+    if (!Observer) return;
+    const observer = new Observer(entries => {
+      const measured = entries[0]?.contentRect?.width;
+      if (typeof measured === "number") apply(measured);
+    });
+    observer.observe(node);
+    observerRef.current = observer;
+  }, [apply]);
+  const onLayout = useCallback(event => apply(event.nativeEvent.layout.width), [apply]);
+  return {
+    ref,
+    width,
+    onLayout
+  };
+}