@buoy-gg/shared-ui 7.0.29 → 7.0.31

package/lib/commonjs/dataViewer/ValueEditModal.js

@@ -0,0 +1,385 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValueEditModal = ValueEditModal;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
+var _index = require("../ui/gameUI/index.js");
+var _nightTheme = require("../ui/night/nightTheme.js");
+var _treeActions = require("./treeActions.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+/**
+ * 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 ValueEditModal({
+  path,
+  value,
+  onSave,
+  onCancel,
+  saveLabel = "Save",
+  busy = false,
+  testIDPrefix = "buoy-data-value"
+}) {
+  const mode = modeFor(value);
+  const type = (0, _treeActions.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: `${testIDPrefix}-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, _treeActions.breadcrumb)(path)
+        }), mode === "boolean" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BooleanChoice, {
+          current: value === true,
+          onPick: onSave,
+          testIDPrefix: testIDPrefix
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          style: styles.fieldScroll,
+          keyboardShouldPersistTaps: "handled",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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: _nightTheme.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: `${testIDPrefix}-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: `${testIDPrefix}-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 BooleanChoice({
+  current,
+  onPick,
+  testIDPrefix
+}) {
+  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: `${testIDPrefix}-${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, _treeActions.typeLabel)(parsed) !== type) {
+      return `Must stay ${type} — that parses as ${(0, _treeActions.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: {
+    ..._absoluteFill.absoluteFill,
+    zIndex: 20
+  },
+  scrim: {
+    ..._absoluteFill.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.55)"
+  },
+  /** Pinned to the top so the keyboard can't reach it. */
+  panel: {
+    padding: 12
+  },
+  card: {
+    backgroundColor: _nightTheme.night.color.surface,
+    borderRadius: 14,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    padding: 14,
+    gap: 8
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    flex: 1,
+    color: _nightTheme.night.color.text,
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+    backgroundColor: _nightTheme.night.color.surfaceElevated
+  },
+  typeBadgeText: {
+    color: _index.macOSColors.semantic.warning,
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  path: {
+    color: _nightTheme.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: _nightTheme.night.color.text,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    borderWidth: 1,
+    borderColor: _nightTheme.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: _nightTheme.night.color.danger
+  },
+  hint: {
+    color: _nightTheme.night.color.textTertiary,
+    fontSize: 11,
+    lineHeight: 16
+  },
+  error: {
+    color: _nightTheme.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: _nightTheme.night.color.border
+  },
+  cancelText: {
+    color: _nightTheme.night.color.textSecondary,
+    fontSize: 14,
+    fontWeight: "600"
+  },
+  saveButton: {
+    flex: 1.4,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 10,
+    backgroundColor: _nightTheme.night.color.accent
+  },
+  saveDisabled: {
+    opacity: 0.35
+  },
+  saveText: {
+    color: _nightTheme.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: _nightTheme.night.color.border,
+    backgroundColor: _nightTheme.night.color.surfaceElevated
+  },
+  boolActive: {
+    borderColor: _index.macOSColors.semantic.warning,
+    backgroundColor: _index.macOSColors.semantic.warning + "18"
+  },
+  boolText: {
+    color: _nightTheme.night.color.textTertiary,
+    fontSize: 16,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  boolTextActive: {
+    color: _index.macOSColors.semantic.warning
+  }
+});

package/lib/commonjs/dataViewer/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "JsonStringNotice", {
     return _JsonStringNotice.JsonStringNotice;
   }
 });
+Object.defineProperty(exports, "LiveExplorer", {
+  enumerable: true,
+  get: function () {
+    return _LiveExplorer.LiveExplorer;
+  }
+});
 Object.defineProperty(exports, "SplitDiffViewer", {
   enumerable: true,
   get: function () {
@@ -99,6 +105,12 @@ Object.defineProperty(exports, "TypeLegend", {
     return _TypeLegend.TypeLegend;
   }
 });
+Object.defineProperty(exports, "ValueEditModal", {
+  enumerable: true,
+  get: function () {
+    return _ValueEditModal.ValueEditModal;
+  }
+});
 Object.defineProperty(exports, "VirtualizedDataExplorer", {
   enumerable: true,
   get: function () {
@@ -135,6 +147,12 @@ Object.defineProperty(exports, "decodeJsonStringPair", {
     return _jsonStringValue.decodeJsonStringPair;
   }
 });
+Object.defineProperty(exports, "deleteNestedDataByPath", {
+  enumerable: true,
+  get: function () {
+    return _nestedPath.deleteNestedDataByPath;
+  }
+});
 Object.defineProperty(exports, "describeTimestampDeltas", {
   enumerable: true,
   get: function () {
@@ -201,6 +219,12 @@ Object.defineProperty(exports, "jsonLikelyLargerThan", {
     return _objectDiff.jsonLikelyLargerThan;
   }
 });
+Object.defineProperty(exports, "makeRootWriter", {
+  enumerable: true,
+  get: function () {
+    return _LiveExplorer.makeRootWriter;
+  }
+});
 Object.defineProperty(exports, "objectDiff", {
   enumerable: true,
   get: function () {
@@ -249,6 +273,24 @@ Object.defineProperty(exports, "typeLabel", {
     return _treeActions.typeLabel;
   }
 });
+Object.defineProperty(exports, "updateNestedDataByPath", {
+  enumerable: true,
+  get: function () {
+    return _nestedPath.updateNestedDataByPath;
+  }
+});
+Object.defineProperty(exports, "useTreeDraft", {
+  enumerable: true,
+  get: function () {
+    return _useTreeDraft.useTreeDraft;
+  }
+});
+Object.defineProperty(exports, "useTreeEditor", {
+  enumerable: true,
+  get: function () {
+    return _useTreeEditor.useTreeEditor;
+  }
+});
 var _DataViewer = require("./DataViewer.js");
 var _VirtualizedDataExplorer = require("./VirtualizedDataExplorer.js");
 var _TypeLegend = require("./TypeLegend.js");
@@ -270,4 +312,9 @@ var _lineDiff = require("./lineDiff.js");
 var _diffThemes = require("./diffThemes.js");
 var _objectDiff = require("./objectDiff.js");
 var _ThemedSplitView = require("./ThemedSplitView.js");
+var _useTreeDraft = require("./useTreeDraft.js");
+var _useTreeEditor = require("./useTreeEditor.js");
+var _ValueEditModal = require("./ValueEditModal.js");
+var _LiveExplorer = require("./LiveExplorer.js");
+var _nestedPath = require("./nestedPath.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/commonjs/dataViewer/nestedPath.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateNestedDataByPath = exports.deleteNestedDataByPath = void 0;
+/**
+ * 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.
+ */
+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`.
+ */
+exports.updateNestedDataByPath = updateNestedDataByPath;
+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;
+};
+exports.deleteNestedDataByPath = deleteNestedDataByPath;

package/lib/commonjs/dataViewer/treeActions.js

@@ -75,6 +75,7 @@ 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 ? (0, _jsonOps.getAtPath)(root, path.slice(0, -1)) : undefined;
   const parentIsArray = Array.isArray(parent);
   const index = parentIsArray ? Number(path[path.length - 1]) : -1;
@@ -158,8 +159,8 @@ 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