@buoy-gg/storage 7.0.40 → 7.0.41

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

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

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

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StorageScalarKeyEditor = StorageScalarKeyEditor;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _StorageValueEditModal = require("./StorageValueEditModal");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Editing a key whose value is a single string, number or boolean.
- *
- * A tree of one row is not a tree, so there's nothing here to select, reorder
- * or append to — which means none of the structural editor applies. And with
- * one edit producing one write, there's nothing to buffer either: a draft would
- * only add a step between typing the value and storing it.
- *
- * So this is just the value modal over whatever the user was looking at, on
- * both the phone and the dashboard. Changing one string shouldn't black out the
- * screen it came from.
- */
-
-/**
- * The text `setStorageValue` should store.
- *
- * A string is stored AS ITSELF — `JSON.stringify` here was adding quotes a
- * plain string never had. AsyncStorage hid it (the browser reads values back
- * through `JSON.parse`, so the tool agreed with itself) but the app's own
- * `getItem` saw `"dark"` where it had written `dark`; MMKV stores strings
- * natively and showed the quotes right in the row, compounding on every edit.
- *
- * Everything else keeps JSON: for a number or a boolean that IS its text, and
- * containers never reach this editor.
- */
-function serializeScalar(value) {
-  return typeof value === "string" ? value : JSON.stringify(value);
-}
-function StorageScalarKeyEditor({
-  storageKey,
-  value,
-  onSave,
-  onClose
-}) {
-  const [saving, setSaving] = (0, _react.useState)(false);
-  const save = (0, _react.useCallback)(next => {
-    if (saving) return;
-    setSaving(true);
-    onSave(serializeScalar(next)).then(onClose).catch(e => {
-      setSaving(false);
-      _reactNative.Alert.alert("Couldn't save", e instanceof Error ? e.message : String(e));
-    });
-  }, [onClose, onSave, saving]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StorageValueEditModal.StorageValueEditModal, {
-    path: [storageKey.key],
-    value: value,
-    onSave: save,
-    onCancel: onClose,
-    busy: saving
-  });
-}

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StorageValueEditModal = StorageValueEditModal;
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Storage's value-typing panel.
- *
- * 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.
- */
-
-function StorageValueEditModal(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.ValueEditModal, {
-    ...props,
-    testIDPrefix: "buoy-storage-value"
-  });
-}

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

@@ -1,31 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useKeyEditor = useKeyEditor;
-var _react = require("react");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
-/**
- * Storage's view of the shared tree editor.
- *
- * 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({
-  value,
-  save,
-  onClose,
-  confirmDiscard
-}) {
-  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

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTreeDraft = useTreeDraft;
-var _react = require("react");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
-/**
- * Storage's view of the shared buffered tree draft.
- *
- * 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.
- */
-
-/**
- * @param liveValue  the value as storage currently holds it (already parsed)
- * @param save       persists the serialized draft; rejecting keeps edit mode open
- */
-function useTreeDraft(liveValue, save) {
-  const saveValue = (0, _react.useMemo)(() => save ? value => save(JSON.stringify(value)) : undefined, [save]);
-  return (0, _dataViewer.useTreeDraft)(liveValue, saveValue);
-}