@buoy-gg/storage 7.0.30 → 7.0.31

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

@@ -4,374 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StorageValueEditModal = StorageValueEditModal;
-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 _jsxRuntime = require("react/jsx-runtime");
 /**
- * Editing one value: a panel at the top of the screen, with Cancel and Save.
+ * Storage's value-typing panel.
  *
- * 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.
+ * The panel itself — top-pinned so the keyboard can't reach it, type preserved
+ * by construction, raw-JSON shape check — lives in shared-ui's
+ * {@link ValueEditModal}, shared with the Zustand store editor. This wrapper
+ * only pins storage's testID namespace so the Detox suite's handles
+ * (`buoy-storage-value-input`, `-save`, …) stay exactly what they were.
  */
 
-/**
- * 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.
- */
-
-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.";
-  }
-}
-function StorageValueEditModal({
-  path,
-  value,
-  onSave,
-  onCancel,
-  saveLabel = "Save",
-  busy = false
-}) {
-  const mode = modeFor(value);
-  const type = (0, _dataViewer.typeLabel)(value);
-  const [text, setText] = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.overlay,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      style: styles.scrim,
-      activeOpacity: 1,
-      onPress: busy ? undefined : onCancel,
-      testID: "buoy-storage-value-scrim",
-      accessibilityRole: "button",
-      accessibilityLabel: "Dismiss editor"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.panel,
-      pointerEvents: "box-none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.card,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.headerRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.title,
-            children: "Edit value"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.typeBadgeText,
-              children: type
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.path,
-          numberOfLines: 1,
-          children: (0, _dataViewer.breadcrumb)(path)
-        }), mode === "boolean" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BooleanChoice, {
-          current: value === true,
-          onPick: onSave
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-          style: styles.fieldScroll,
-          keyboardShouldPersistTaps: "handled",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            testID: "buoy-storage-value-input",
-            accessibilityLabel: "Value",
-            value: text,
-            onChangeText: setText,
-            autoFocus: true,
-            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"
-            // ASCII for raw JSON, because iOS Smart Punctuation is ON by
-            // default and rewrites the quotes you type as curly ones —
-            // which makes the text unparseable, disables Save, and leaves
-            // an "invalid JSON" message whose cause is invisible at a
-            // glance. An ASCII keyboard doesn't do the substitution.
-            ,
-            keyboardType: mode === "number" ? "numeric" : mode === "raw" ? "ascii-capable" : "default",
-            onSubmitEditing: mode === "number" ? commit : undefined,
-            placeholder: mode === "raw" ? "{ }" : "value",
-            placeholderTextColor: _sharedUi.night.color.placeholder,
-            style: [styles.input, mode === "raw" && styles.inputRaw, mode !== "number" && styles.inputMultiline, error != null && styles.inputInvalid]
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: error != null ? styles.error : styles.hint,
-          children: error ?? hintFor(mode, type)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.actions,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: onCancel,
-            disabled: busy,
-            testID: "buoy-storage-value-cancel",
-            accessibilityRole: "button",
-            accessibilityLabel: "Cancel edit",
-            style: styles.cancelButton,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.cancelText,
-              children: "Cancel"
-            })
-          }), mode === "boolean" ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: commit,
-            disabled: blocked,
-            testID: "buoy-storage-value-save",
-            accessibilityRole: "button",
-            accessibilityLabel: saveLabel,
-            style: [styles.saveButton, blocked && styles.saveDisabled],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.saveText,
-              children: busy ? "Saving…" : saveLabel
-            })
-          })]
-        })]
-      })
-    })]
+function StorageValueEditModal(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.ValueEditModal, {
+    ...props,
+    testIDPrefix: "buoy-storage-value"
   });
-}
-function BooleanChoice({
-  current,
-  onPick
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.boolRow,
-    children: [true, false].map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      onPress: () => onPick(option),
-      testID: `buoy-storage-value-${option}`,
-      accessibilityRole: "button",
-      accessibilityLabel: `Set ${option}`,
-      style: [styles.boolButton, current === option && styles.boolActive],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        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 ((0, _dataViewer.typeLabel)(parsed) !== type) {
-      return `Must stay ${type} — that parses as ${(0, _dataViewer.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 = _reactNative.StyleSheet.create({
-  overlay: {
-    ..._sharedUi.absoluteFill,
-    zIndex: 20
-  },
-  scrim: {
-    ..._sharedUi.absoluteFill,
-    backgroundColor: "rgba(0,0,0,0.55)"
-  },
-  /** Pinned to the top so the keyboard can't reach it. */
-  panel: {
-    padding: 12
-  },
-  card: {
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 14,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    padding: 14,
-    gap: 8
-  },
-  headerRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  title: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "700"
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 6,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  typeBadgeText: {
-    color: _sharedUi.macOSColors.semantic.warning,
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: "monospace"
-  },
-  path: {
-    color: _sharedUi.night.color.textTertiary,
-    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: _sharedUi.night.color.text,
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    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: _sharedUi.night.color.danger
-  },
-  hint: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 11,
-    lineHeight: 16
-  },
-  error: {
-    color: _sharedUi.night.color.danger,
-    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: _sharedUi.night.color.border
-  },
-  cancelText: {
-    color: _sharedUi.night.color.textSecondary,
-    fontSize: 14,
-    fontWeight: "600"
-  },
-  saveButton: {
-    flex: 1.4,
-    minHeight: 44,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 10,
-    backgroundColor: _sharedUi.night.color.accent
-  },
-  saveDisabled: {
-    opacity: 0.35
-  },
-  saveText: {
-    color: _sharedUi.night.color.onAccent,
-    fontSize: 15,
-    fontWeight: "700"
-  },
-  boolRow: {
-    flexDirection: "row",
-    gap: 10
-  },
-  boolButton: {
-    flex: 1,
-    minHeight: 64,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  boolActive: {
-    borderColor: _sharedUi.macOSColors.semantic.warning,
-    backgroundColor: _sharedUi.macOSColors.semantic.warning + "18"
-  },
-  boolText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 16,
-    fontWeight: "700",
-    fontFamily: "monospace"
-  },
-  boolTextActive: {
-    color: _sharedUi.macOSColors.semantic.warning
-  }
-});
+}

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

@@ -6,19 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useKeyEditor = useKeyEditor;
 var _react = require("react");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
-var _useTreeDraft = require("./useTreeDraft");
 /**
- * Everything editing a key involves, minus how it looks.
+ * Storage's view of the shared tree editor.
  *
- * 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.
+ * Everything editing a key involves — buffered draft, selection, value modal,
+ * dirty-close guard — lives in shared-ui's `useTreeEditor`, shared with the
+ * Zustand store editor so the two can't drift. Storage's single write takes
+ * the SERIALIZED value, so this wrapper is exactly the stringify.
  */
 
 function useKeyEditor({
@@ -27,78 +21,11 @@ function useKeyEditor({
   onClose,
   confirmDiscard
 }) {
-  const draft = (0, _useTreeDraft.useTreeDraft)(value, save);
-  const [selection, setSelection] = (0, _react.useState)(null);
-  const [valuePath, setValuePath] = (0, _react.useState)(null);
-  const {
-    begin
-  } = draft;
-  (0, _react.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 = (0, _react.useCallback)(path => {
-    const current = (0, _dataViewer.getAtPath)(draft.value, path);
-    if (typeof current === "boolean") {
-      draft.apply({
-        kind: "replace",
-        path,
-        value: !current
-      });
-      return;
-    }
-    setValuePath(path);
-  }, [draft]);
-  const applyValue = (0, _react.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 = (0, _react.useCallback)(() => {
-    void draft.commit().then(saved => saved && onClose());
-  }, [draft, onClose]);
-  const requestClose = (0, _react.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
-  };
+  const saveValue = (0, _react.useMemo)(() => next => save(JSON.stringify(next)), [save]);
+  return (0, _dataViewer.useTreeEditor)({
+    value,
+    save: saveValue,
+    onClose,
+    confirmDiscard
+  });
 }

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

@@ -7,28 +7,12 @@ exports.useTreeDraft = useTreeDraft;
 var _react = require("react");
 var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 /**
- * A local draft of a storage value, edited in place and written ONCE.
+ * Storage's view of the shared buffered tree draft.
  *
- * Applying each tree op straight to the device was the obvious first cut and it
- * behaves badly for two compounding reasons:
- *
- * 1. **Every op is a round trip.** The write lands, the device emits a storage
- *    event, a snapshot comes back, and the browser re-reads every backend — so
- *    a six-tap reorder is six writes and six full refreshes. The tree rebuilds
- *    under the user mid-gesture.
- * 2. **The highlight and the value fall out of step.** Selection is local and
- *    moves instantly; the value it points at only catches up when the round
- *    trip completes, so for a beat the highlight sits on the old contents.
- *
- * Optimistic updates — the React Query pattern of rendering the expected result
- * and reconciling later — fix (2) but not (1): they still write per change.
- * Buffering fixes both, and it's what every editor that owns a document does
- * (a form's dirty state, an IDE's unsaved buffer, JSON Editor's in-memory doc
- * with an explicit save).
- *
- * The trade is that the buffer can go stale if the app writes the same key
- * while you're editing. That's the same last-write-wins a text editor has, and
- * `isDirty` at least makes it visible that you're holding unsaved changes.
+ * The draft itself lives in shared-ui (`useTreeDraft` there — one editor for
+ * storage keys and zustand stores, so the rules can't drift). Storage's write
+ * path takes the SERIALIZED value — `setItem(key, raw)` — so this wrapper is
+ * exactly the stringify.
  */
 
 /**
@@ -36,83 +20,6 @@ var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
  * @param save       persists the serialized draft; rejecting keeps edit mode open
  */
 function useTreeDraft(liveValue, save) {
-  const [draft, setDraft] = (0, _react.useState)(undefined);
-  const [isEditing, setIsEditing] = (0, _react.useState)(false);
-  const [isSaving, setIsSaving] = (0, _react.useState)(false);
-  const [error, setError] = (0, _react.useState)(null);
-  const [selectPath, setSelectPath] = (0, _react.useState)();
-  /**
-   * The value as it was when editing began. Compared against for dirtiness
-   * rather than against `liveValue`, which can move underneath us if the app
-   * writes the same key — that would otherwise flip a clean draft to dirty.
-   */
-  const [baseline, setBaseline] = (0, _react.useState)("");
-  const value = isEditing && draft !== undefined ? draft : liveValue;
-  const isDirty = isEditing && JSON.stringify(draft) !== baseline;
-  const begin = (0, _react.useCallback)(() => {
-    setDraft(liveValue);
-    setBaseline(JSON.stringify(liveValue));
-    setSelectPath(undefined);
-    setError(null);
-    setIsEditing(true);
-  }, [liveValue]);
-  const apply = (0, _react.useCallback)(op => {
-    // Purely local — this is the whole point. No write, so no event, no
-    // snapshot, no refresh, and the tree re-renders from state synchronously.
-    setDraft(prev => (0, _dataViewer.applyJsonOp)(prev, op));
-    const next = (0, _dataViewer.selectionPathAfterOp)(op);
-    if (next !== undefined) setSelectPath(next);
-  }, []);
-  const selectAt = (0, _react.useCallback)(path => {
-    setSelectPath(path);
-  }, []);
-
-  /** Leave edit mode entirely. Only correct on the way out (after a write). */
-  const reset = (0, _react.useCallback)(() => {
-    setIsEditing(false);
-    setDraft(undefined);
-    setSelectPath(undefined);
-    setError(null);
-  }, []);
-
-  /** Re-seed the draft from what's stored, staying in edit mode. */
-  const discard = (0, _react.useCallback)(() => {
-    setDraft(liveValue);
-    setBaseline(JSON.stringify(liveValue));
-    setSelectPath(undefined);
-    setError(null);
-    setIsEditing(true);
-  }, [liveValue]);
-  const commit = (0, _react.useCallback)(async () => {
-    if (!isDirty || !save) {
-      reset();
-      return true;
-    }
-    setIsSaving(true);
-    setError(null);
-    try {
-      await save(JSON.stringify(draft));
-      reset();
-      return true;
-    } catch (e) {
-      // Stay in edit mode so the work isn't lost to a failed write.
-      setError(e instanceof Error ? e.message : String(e));
-      return false;
-    } finally {
-      setIsSaving(false);
-    }
-  }, [draft, isDirty, reset, save]);
-  return {
-    isEditing,
-    value,
-    isDirty,
-    isSaving,
-    error,
-    selectPath,
-    begin,
-    apply,
-    selectAt,
-    commit,
-    discard
-  };
+  const saveValue = (0, _react.useMemo)(() => save ? value => save(JSON.stringify(value)) : undefined, [save]);
+  return (0, _dataViewer.useTreeDraft)(liveValue, saveValue);
 }