@buoy-gg/shared-ui 7.0.30 → 7.0.32

package/lib/module/dataViewer/ValueEditModal.js

@@ -0,0 +1,381 @@
+"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 these tools, 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.
+ *
+ * Hoisted from the Storage tool (which keeps its testIDs via `testIDPrefix`)
+ * so the Zustand store editor types values through the same rules.
+ */
+
+import { useState } from "react";
+import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { absoluteFill } from "../utils/absoluteFill.js";
+import { macOSColors } from "../ui/gameUI/index.js";
+import { night } from "../ui/night/nightTheme.js";
+import { breadcrumb, typeLabel } from "./treeActions.js";
+
+/**
+ * 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 ValueEditModal({
+  path,
+  value,
+  onSave,
+  onCancel,
+  saveLabel = "Save",
+  busy = false,
+  testIDPrefix = "buoy-data-value"
+}) {
+  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,
+      testID: `${testIDPrefix}-scrim`,
+      accessibilityRole: "button",
+      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,
+          testIDPrefix: testIDPrefix
+        }) : /*#__PURE__*/_jsx(ScrollView, {
+          style: styles.fieldScroll,
+          keyboardShouldPersistTaps: "handled",
+          children: /*#__PURE__*/_jsx(TextInput, {
+            testID: `${testIDPrefix}-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: night.color.placeholder,
+            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,
+            testID: `${testIDPrefix}-cancel`,
+            accessibilityRole: "button",
+            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,
+            testID: `${testIDPrefix}-save`,
+            accessibilityRole: "button",
+            accessibilityLabel: saveLabel,
+            style: [styles.saveButton, blocked && styles.saveDisabled],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.saveText,
+              children: busy ? "Saving…" : saveLabel
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}
+function BooleanChoice({
+  current,
+  onPick,
+  testIDPrefix
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.boolRow,
+    children: [true, false].map(option => /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: () => onPick(option),
+      testID: `${testIDPrefix}-${option}`,
+      accessibilityRole: "button",
+      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: night.color.surface,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: night.color.border,
+    padding: 14,
+    gap: 8
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    flex: 1,
+    color: night.color.text,
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+    backgroundColor: night.color.surfaceElevated
+  },
+  typeBadgeText: {
+    color: macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  path: {
+    color: 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: night.color.text,
+    backgroundColor: night.color.surfaceElevated,
+    borderWidth: 1,
+    borderColor: 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: night.color.danger
+  },
+  hint: {
+    color: night.color.textTertiary,
+    fontSize: 11,
+    lineHeight: 16
+  },
+  error: {
+    color: 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: night.color.border
+  },
+  cancelText: {
+    color: night.color.textSecondary,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  saveButton: {
+    flex: 1.4,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    backgroundColor: night.color.accent
+  },
+  saveDisabled: {
+    opacity: 0.35
+  },
+  saveText: {
+    color: 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: night.color.border,
+    backgroundColor: night.color.surfaceElevated
+  },
+  boolActive: {
+    borderColor: macOSColors.semantic.warning,
+    backgroundColor: macOSColors.semantic.warning + "18"
+  },
+  boolText: {
+    color: night.color.textTertiary,
+    fontSize: 16,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  boolTextActive: {
+    color: macOSColors.semantic.warning
+  }
+});

package/lib/module/dataViewer/index.js

@@ -45,4 +45,13 @@ export { diffThemes, gitClassicTheme, devToolsDefaultTheme } from "./diffThemes.
 export { objectDiff, boundedDeepEqual, toDiffable, jsonLikelyLargerThan } from "./objectDiff.js";
 
 // The production split renderer (folding + virtualization), promoted from storage
-export { ThemedSplitView } from "./ThemedSplitView.js";
+export { ThemedSplitView } from "./ThemedSplitView.js";
+
+// The buffered tree editor (draft + rules + value modal), promoted from storage
+export { useTreeDraft } from "./useTreeDraft.js";
+export { useTreeEditor } from "./useTreeEditor.js";
+export { ValueEditModal } from "./ValueEditModal.js";
+
+// The LIVE data editor (no draft, no Save), hoisted from react-query
+export { LiveExplorer, makeRootWriter } from "./LiveExplorer.js";
+export { updateNestedDataByPath, deleteNestedDataByPath } from "./nestedPath.js";

package/lib/module/dataViewer/nestedPath.js

@@ -0,0 +1,109 @@
+"use strict";
+
+/**
+ * Immutable path writes over arbitrary JSON-ish data — the write kernel the
+ * live explorer edits through.
+ *
+ * Hoisted verbatim from @buoy-gg/react-query (utils/updateNestedDataByPath +
+ * utils/deleteNestedDataByPath), where the RQ Data Editor has run on them in
+ * production; react-query re-exports from here. Handles objects, arrays, and
+ * Map/Set (a Set edit round-trips through an array).
+ */
+
+/**
+ * Returns a copy of `oldData` with the node at `updatePath` replaced by
+ * `value`. An empty path replaces the whole document.
+ */
+export const updateNestedDataByPath = (oldData, updatePath, value) => {
+  if (updatePath.length === 0) {
+    return value;
+  }
+  if (oldData instanceof Map) {
+    const newData = new Map(oldData);
+    if (updatePath.length === 1) {
+      newData.set(updatePath[0], value);
+      return newData;
+    }
+    const [head, ...tail] = updatePath;
+    const currentValue = newData.get(head);
+    newData.set(head, updateNestedDataByPath(currentValue ?? null, tail, value));
+    return newData;
+  }
+  if (oldData instanceof Set) {
+    const setAsArray = updateNestedDataByPath(Array.from(oldData), updatePath, value);
+    return new Set(Array.isArray(setAsArray) ? setAsArray : []);
+  }
+  if (Array.isArray(oldData)) {
+    const newData = [...oldData];
+    if (updatePath.length === 1) {
+      // @ts-expect-error NAS
+      newData[updatePath[0]] = value;
+      return newData;
+    }
+    const [head, ...tail] = updatePath;
+    // @ts-expect-error NAS
+    newData[head] = updateNestedDataByPath(newData[head], tail, value);
+    return newData;
+  }
+  if (oldData instanceof Object) {
+    const newData = {
+      ...oldData
+    };
+    if (updatePath.length === 1) {
+      // @ts-expect-error NAS
+      newData[updatePath[0]] = value;
+      return newData;
+    }
+    const [head, ...tail] = updatePath;
+    // @ts-expect-error NAS
+    newData[head] = updateNestedDataByPath(newData[head], tail, value);
+    return newData;
+  }
+  return oldData;
+};
+
+/**
+ * Returns a copy of `oldData` without the node at `deletePath`.
+ */
+export const deleteNestedDataByPath = (oldData, deletePath) => {
+  if (oldData instanceof Map) {
+    const newData = new Map(oldData);
+    if (deletePath.length === 1) {
+      newData.delete(deletePath[0]);
+      return newData;
+    }
+    const [head, ...tail] = deletePath;
+    newData.set(head, deleteNestedDataByPath(newData.get(head), tail));
+    return newData;
+  }
+  if (oldData instanceof Set) {
+    const setAsArray = deleteNestedDataByPath(Array.from(oldData), deletePath);
+    return new Set(setAsArray);
+  }
+  if (Array.isArray(oldData)) {
+    const newData = [...oldData];
+    if (deletePath.length === 1) {
+      return newData.filter((_, idx) => idx.toString() !== deletePath[0]);
+    }
+    const [head, ...tail] = deletePath;
+
+    // @ts-expect-error NAS
+    newData[head] = deleteNestedDataByPath(newData[head], tail);
+    return newData;
+  }
+  if (oldData instanceof Object) {
+    const newData = {
+      ...oldData
+    };
+    if (deletePath.length === 1) {
+      // @ts-expect-error NAS
+      delete newData[deletePath[0]];
+      return newData;
+    }
+    const [head, ...tail] = deletePath;
+    // @ts-expect-error NAS
+    newData[head] = deleteNestedDataByPath(newData[head], tail);
+    return newData;
+  }
+  return oldData;
+};

package/lib/module/dataViewer/treeActions.js

@@ -69,6 +69,7 @@ export function treeActionsFor(root, selection, options = {}) {
   const value = selection?.value;
   const has = selection != null;
   const isRoot = path.length === 0;
+  const removeLocked = options.rootEntriesLocked === true && path.length === 1;
   const parent = has && !isRoot ? getAtPath(root, path.slice(0, -1)) : undefined;
   const parentIsArray = Array.isArray(parent);
   const index = parentIsArray ? Number(path[path.length - 1]) : -1;
@@ -152,8 +153,8 @@ export function treeActionsFor(root, selection, options = {}) {
     id: "remove",
     label: "Remove",
     danger: true,
-    enabled: has && !isRoot,
-    op: has && !isRoot ? {
+    enabled: has && !isRoot && !removeLocked,
+    op: has && !isRoot && !removeLocked ? {
       kind: "remove",
       path
     } : null

package/lib/module/dataViewer/useTreeDraft.js

@@ -0,0 +1,121 @@
+"use strict";
+
+/**
+ * A local draft of a tree value, edited in place and written ONCE.
+ *
+ * Applying each tree op straight to the owning document was the obvious first
+ * cut and it behaves badly for two compounding reasons:
+ *
+ * 1. **Every op is a round trip.** The write lands, the owner emits an event,
+ *    a snapshot comes back, and the browser re-reads everything — 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 owner writes the same
+ * document 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.
+ *
+ * Grew up as the Storage tool's key editor; hoisted here so the Zustand store
+ * editor is the same editor rather than a drifting copy. The save contract
+ * takes the VALUE — a storage host stringifies it, a zustand host diffs it
+ * into a merge partial.
+ */
+
+import { useCallback, useState } from "react";
+import { applyJsonOp, selectionPathAfterOp } from "./jsonOps.js";
+/**
+ * @param liveValue  the value as its owner currently holds it (already parsed)
+ * @param save       persists the draft VALUE; rejecting keeps edit mode open
+ */
+export function useTreeDraft(liveValue, save) {
+  const [draft, setDraft] = useState(undefined);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectPath, setSelectPath] = useState();
+  /**
+   * The value as it was when editing began. Compared against for dirtiness
+   * rather than against `liveValue`, which can move underneath us if the owner
+   * writes the same document — that would otherwise flip a clean draft to
+   * dirty.
+   */
+  const [baseline, setBaseline] = useState("");
+  const value = isEditing && draft !== undefined ? draft : liveValue;
+  const isDirty = isEditing && JSON.stringify(draft) !== baseline;
+  const begin = useCallback(() => {
+    setDraft(liveValue);
+    setBaseline(JSON.stringify(liveValue));
+    setSelectPath(undefined);
+    setError(null);
+    setIsEditing(true);
+  }, [liveValue]);
+  const apply = 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 => applyJsonOp(prev, op));
+    const next = selectionPathAfterOp(op);
+    if (next !== undefined) setSelectPath(next);
+  }, []);
+  const selectAt = useCallback(path => {
+    setSelectPath(path);
+  }, []);
+
+  /** Leave edit mode entirely. Only correct on the way out (after a write). */
+  const reset = useCallback(() => {
+    setIsEditing(false);
+    setDraft(undefined);
+    setSelectPath(undefined);
+    setError(null);
+  }, []);
+
+  /** Re-seed the draft from what's stored, staying in edit mode. */
+  const discard = useCallback(() => {
+    setDraft(liveValue);
+    setBaseline(JSON.stringify(liveValue));
+    setSelectPath(undefined);
+    setError(null);
+    setIsEditing(true);
+  }, [liveValue]);
+  const commit = useCallback(async () => {
+    if (!isDirty || !save) {
+      reset();
+      return true;
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      await save(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
+  };
+}