@buoy-gg/shared-ui 7.0.4 → 7.0.6

package/lib/commonjs/dataViewer/VirtualizedDataExplorer.js

@@ -25,6 +25,8 @@ const CHUNK_SIZE = 50; // Process data in chunks to avoid blocking UI
 const MAX_DEPTH_LIMIT = 15; // Prevent excessive nesting
 const MAX_ITEMS_PER_LEVEL = 500; // Limit items to prevent memory issues
 const LONG_KEY_THRESHOLD = 30; // Keys longer than this use vertical layout
+/** Two presses inside this window count as a double-tap (RN has no dblclick). */
+const DOUBLE_TAP_MS = 300;
 
 // Pre-computed indent styles (VS Code-style width)
 const INDENT_WIDTH = 16;
@@ -223,8 +225,48 @@ const STABLE_STYLES = _reactNative.StyleSheet.create({
   }
 });
 
+/**
+ * A tree row as the HOST sees it.
+ *
+ * `item.path` is addressed for the TREE, which is seeded with a synthetic
+ * "root" node wrapping the caller's data — so the top row is `["root"]` and its
+ * first child `["root", "0"]`. Ops address the DATA, where those are `[]` and
+ * `["0"]`. Dropping the first segment is what reconciles the two, and doing it
+ * in ONE place is what keeps selection, inline editing and ops all agreeing.
+ */
+function selectionOf(item) {
+  return {
+    path: item.path.slice(1),
+    value: item.value,
+    label: item.key
+  };
+}
+
 // Type definitions for flattened data structure
 
+/**
+ * Node count, capped at `limit`.
+ *
+ * Deliberately short-circuits: this runs on every render to decide which
+ * flattening path to take, so it must cost O(limit), never O(document).
+ */
+function countNodesUpTo(value, limit, seen = 0) {
+  if (seen >= limit) return seen;
+  let n = seen + 1;
+  if (Array.isArray(value)) {
+    for (const child of value) {
+      if (n >= limit) return n;
+      n = countNodesUpTo(child, limit, n);
+    }
+  } else if (value !== null && typeof value === "object") {
+    for (const child of Object.values(value)) {
+      if (n >= limit) return n;
+      n = countNodesUpTo(child, limit, n);
+    }
+  }
+  return n;
+}
+
 // Enhanced type detection optimized for performance
 const getValueType = value => {
   if (value === null) return "null";
@@ -376,6 +418,16 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
   // Store circular cache outside of re-renders to prevent reset
   const circularCacheRef = (0, _react.useRef)(new WeakSet());
   const processingRef = (0, _react.useRef)(false);
+  /**
+   * Monotonic token identifying the newest flatten run.
+   *
+   * WHY: a cancelled run used to `return` without clearing `isProcessing`, so
+   * whenever renders arrived faster than the 10ms debounce + flatten, every run
+   * was superseded before it finished and the spinner never came down — the
+   * viewer sat on "Processing data…" forever. Now each run checks it is still
+   * the current one, and the run that ends up last ALWAYS resolves the flag.
+   */
+  const runIdRef = (0, _react.useRef)(0);
   const dataVersionRef = (0, _react.useRef)(0);
   const lastActionRef = (0, _react.useRef)(undefined);
 
@@ -505,14 +557,16 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
     if (processingRef.current) {
       return;
     }
-    let isCancelled = false;
     let timeoutId;
+    const runId = ++runIdRef.current;
+    /** True while this run is still the newest one scheduled. */
+    const isCurrent = () => runIdRef.current === runId;
     processingRef.current = true;
     setIsProcessing(true);
     const processData = async () => {
       // Failsafe timeout to prevent stuck processing
       timeoutId = setTimeout(() => {
-        if (processingRef.current && !isCancelled) {
+        if (processingRef.current && isCurrent()) {
           setIsProcessing(false);
           processingRef.current = false;
         }
@@ -520,8 +574,10 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
       // Small delay to debounce rapid changes
       // Small delay to batch rapid changes
       await new Promise(resolve => setTimeout(() => resolve(), 10));
-      if (isCancelled) {
-        processingRef.current = false;
+
+      // Superseded by a newer run — that run now owns `isProcessing`, so leave
+      // the flag alone and let it resolve.
+      if (!isCurrent()) {
         return;
       }
       try {
@@ -539,31 +595,26 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
           });
         });
         flatDataMapRef.current = newMap;
-        if (!isCancelled) {
+        if (timeoutId) clearTimeout(timeoutId);
+        if (isCurrent()) {
           setFlatData(newFlatData);
           setIsProcessing(false);
           processingRef.current = false;
-          if (timeoutId) clearTimeout(timeoutId);
-        } else {
-          if (timeoutId) clearTimeout(timeoutId);
         }
       } catch (error) {
         console.error(error);
         // Reset to empty data on error
-        if (!isCancelled) {
+        if (timeoutId) clearTimeout(timeoutId);
+        if (isCurrent()) {
           setFlatData([]);
           flatDataMapRef.current = new Map();
           setIsProcessing(false);
           processingRef.current = false;
-          if (timeoutId) clearTimeout(timeoutId);
-        } else {
-          if (timeoutId) clearTimeout(timeoutId);
         }
       }
     };
     processData();
     return () => {
-      isCancelled = true;
       processingRef.current = false;
       if (timeoutId) clearTimeout(timeoutId);
     };
@@ -715,10 +766,50 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
       return newSet;
     });
   }, [updateFlatDataIncremental]);
+
+  /**
+   * Small documents flatten SYNCHRONOUSLY, during render.
+   *
+   * The chunked effect above exists so a 500-node payload can't block a frame,
+   * and it pays for that with an async, multi-commit rebuild every time `data`
+   * changes identity. Editing is immutable, so that's every single op — which
+   * made a three-item array rebuild itself in stages on every tap, visibly, for
+   * machinery it never needed. Below the chunk threshold the entire flatten is
+   * cheaper than one of those commits, so derive it inline and let React
+   * reconcile the rows normally. The chunked path is untouched above that size.
+   */
+  const isSmallDocument = countNodesUpTo(data, CHUNK_SIZE, 0) < CHUNK_SIZE;
+  const syncFlatData = (0, _react.useMemo)(() => {
+    if (!isSmallDocument) return null;
+    return flattenDataStable(data, expandedItems, new WeakSet(), "root", 0, undefined, [], 0, 1, []);
+  }, [isSmallDocument, data, expandedItems, flattenDataStable]);
+
+  /**
+   * Expand a set of ancestor ids so a node deeper in the tree becomes visible.
+   *
+   * Needed because a host can relocate the selection to a node the user never
+   * expanded their way to — append into a collapsed array and the new entry is
+   * selected but off-tree, which reads as "nothing happened". Unlike
+   * `toggleExpanded` this doesn't patch `flatData` incrementally; the full
+   * flatten effect already re-runs on `expandedItems`, and a reveal is rare
+   * enough that the extra pass isn't worth a second incremental code path.
+   */
+  const revealPath = (0, _react.useCallback)(ancestorIds => {
+    if (ancestorIds.length === 0) return;
+    setExpandedItems(prev => {
+      if (ancestorIds.every(id => prev.has(id))) return prev;
+      const next = new Set(prev);
+      for (const id of ancestorIds) next.add(id);
+      return next;
+    });
+  }, []);
   return {
-    flatData,
-    isProcessing,
-    toggleExpanded
+    flatData: syncFlatData ?? flatData,
+    // A synchronous list is never "processing" — the spinner would flash on
+    // every keystroke otherwise.
+    isProcessing: syncFlatData ? false : isProcessing,
+    toggleExpanded,
+    revealPath
   };
 };
 
@@ -728,10 +819,28 @@ const VirtualizedItemComponent = ({
   onToggleExpanded,
   index,
   onSelect,
-  isSelected
+  isSelected,
+  selectable,
+  onRequestInlineEdit,
+  isInlineEditing,
+  inlineEditor
 }) => {
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
   const [showFullKey, setShowFullKey] = (0, _react.useState)(false);
+  const canEdit = selectable === true;
+  const lastPressRef = (0, _react.useRef)(0);
+
+  /**
+   * `item.path` is addressed for the TREE, which is seeded with a synthetic
+   * "root" node wrapping the caller's data — so the top row is `["root"]` and
+   * its first child `["root", "0"]`. Ops address the DATA, where those are `[]`
+   * and `["0"]`. Dropping the first segment is what reconciles the two.
+   *
+   * Worth stating plainly because getting it wrong fails silently: `applyJsonOp`
+   * treats an unresolvable path as a no-op, so every button would simply have
+   * done nothing rather than erroring.
+   */
+  const dataPath = item.path.slice(1);
 
   // Use pre-computed styles to avoid inline calculations [[memory:4875251]]
   const indentStyle = INDENT_STYLES[Math.min(item.depth, MAX_DEPTH_LIMIT)] || INDENT_STYLES[0];
@@ -741,11 +850,40 @@ const VirtualizedItemComponent = ({
   const isLongKey = false;
 
   // Use inline handler since component is already memoized [[memory:4875251]]
+
+  /**
+   * Row body. In editable mode this SELECTS only — pressing a container to see
+   * its actions would otherwise collapse the very subtree you're editing, and
+   * the expander already exists to do the toggling (the same split every tree
+   * view makes). Read-only mode keeps the original toggle-on-row-press.
+   */
   const handlePress = () => {
+    if (canEdit) {
+      // Double-tap opens the inline editor, matching the mockup's
+      // double-click. Detected by hand because RN has no dblclick: two presses
+      // inside DOUBLE_TAP_MS on an already-selected scalar row.
+      const now = Date.now();
+      const isDouble = now - lastPressRef.current < DOUBLE_TAP_MS;
+      lastPressRef.current = now;
+      if (isDouble && !item.isExpandable && onRequestInlineEdit) {
+        onRequestInlineEdit(item);
+        return;
+      }
+      onSelect(item);
+      return;
+    }
+    if (item.isExpandable) {
+      onToggleExpanded(item.id);
+    }
+    onSelect(item);
+  };
+
+  /** The chevron always toggles, in both modes. */
+  const handleExpanderPress = () => {
     if (item.isExpandable) {
       onToggleExpanded(item.id);
     }
-    onSelect(index);
+    onSelect(item);
   };
   const handleKeyPress = () => {};
 
@@ -762,11 +900,16 @@ const VirtualizedItemComponent = ({
       onPress: handlePress,
       onPressIn: () => setIsPressed(true),
       onPressOut: () => setIsPressed(false),
-      activeOpacity: item.isExpandable ? 0.7 : 1,
-      disabled: !item.isExpandable,
+      activeOpacity: item.isExpandable || canEdit ? 0.7 : 1
+      // A leaf row has nothing to expand, so it was left unpressable. In
+      // editable mode the press IS the selection that reveals this row's
+      // actions, so scalars — the ones you most want to edit — have to be
+      // pressable too.
+      ,
+      disabled: !item.isExpandable && !canEdit,
       children: [item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Expander, {
         expanded: item.isExpanded,
-        onPress: handlePress
+        onPress: handleExpanderPress
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: STABLE_STYLES.expanderContainer
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -775,7 +918,7 @@ const VirtualizedItemComponent = ({
           style: STABLE_STYLES.labelText,
           numberOfLines: 1,
           children: [item.key, ":"]
-        }), item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        }), isInlineEditing && inlineEditor ? inlineEditor : item.isExpandable ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
           style: [STABLE_STYLES.valueText, {
             color: _index.gameUIColors.secondary
           }],
@@ -812,13 +955,19 @@ const VirtualizedDataExplorer = ({
   rawMode = false,
   initialExpanded = false,
   // disableCopy is accepted for API compatibility but CopyButton handles Pro gating internally
-  disableCopy: _disableCopy = false
+  disableCopy: _disableCopy = false,
+  onSelectionChange,
+  onRequestInlineEdit,
+  inlineEditPath,
+  renderInlineEditor,
+  selectPath
 }) => {
   const [isExpanded, setIsExpanded] = (0, _react.useState)(rawMode); // Auto-expand in raw mode
   const {
     flatData,
     isProcessing,
-    toggleExpanded
+    toggleExpanded,
+    revealPath
   } = useDataFlattening(data, maxDepth, initialExpanded);
 
   // Track visible range for overlay rendering
@@ -867,8 +1016,54 @@ const VirtualizedDataExplorer = ({
   };
 
   // Stable renderItem using module-scope function [[memory:4875251]]
-  const [selectedIndex, setSelectedIndex] = (0, _react.useState)(null);
-  const activeDepth = selectedIndex != null ? flatData[selectedIndex]?.depth : undefined;
+  /**
+   * Selection is tracked by the row's stable id (its path), NOT its index.
+   *
+   * An edit reshapes the list — removing item 1 slides everything up — so an
+   * index-based selection would silently start pointing at a different node
+   * and the action bar would operate on the wrong one. An id survives that, and
+   * resolves to nothing when the node it named is gone.
+   */
+  const [selectedId, setSelectedId] = (0, _react.useState)(null);
+  const selectedItem = (0, _react.useMemo)(() => selectedId == null ? undefined : flatData.find(it => it.id === selectedId), [flatData, selectedId]);
+  const activeDepth = selectedItem?.depth;
+
+  // Report the selection outward, re-emitting after each data change so the
+  // action bar is looking at the CURRENT value of the node it has selected.
+  (0, _react.useEffect)(() => {
+    if (!onSelectionChange) return;
+    onSelectionChange(selectedItem ? selectionOf(selectedItem) : null);
+  }, [selectedItem, onSelectionChange]);
+
+  /** Tapping the selected row again clears it, so the bar can be dismissed. */
+  const handleSelect = (0, _react.useCallback)(item => {
+    setSelectedId(prev => prev === item.id ? null : item.id);
+  }, []);
+
+  // Re-sync when the host relocates the selection. Keyed on the joined path so
+  // an unchanged array identity (a fresh render) doesn't clobber a user's tap.
+  const selectPathKey = selectPath === undefined ? undefined : selectPath === null ? "\u0000null" : selectPath.join(".");
+  const lastSelectPathKey = (0, _react.useRef)(selectPathKey);
+  (0, _react.useEffect)(() => {
+    if (selectPathKey === lastSelectPathKey.current) return;
+    lastSelectPathKey.current = selectPathKey;
+    if (selectPathKey === undefined) return;
+    if (selectPath == null) {
+      setSelectedId(null);
+      return;
+    }
+    // Reveal it first — a selection the user can't see reads as a no-op.
+    const ancestors = ["root"];
+    for (const segment of selectPath.slice(0, -1)) {
+      ancestors.push(`${ancestors[ancestors.length - 1]}.${segment}`);
+    }
+    revealPath(ancestors);
+    setSelectedId(["root", ...selectPath].join("."));
+  }, [selectPathKey, selectPath, revealPath]);
+  const handleRequestInlineEdit = (0, _react.useCallback)(item => {
+    setSelectedId(item.id);
+    onRequestInlineEdit?.(selectionOf(item));
+  }, [onRequestInlineEdit]);
   const renderItem = ({
     item,
     index
@@ -876,8 +1071,12 @@ const VirtualizedDataExplorer = ({
     item: item,
     index: index,
     onToggleExpanded: toggleExpanded,
-    onSelect: setSelectedIndex,
-    isSelected: selectedIndex === index
+    onSelect: handleSelect,
+    isSelected: selectedItem?.id === item.id,
+    selectable: onSelectionChange != null,
+    onRequestInlineEdit: handleRequestInlineEdit,
+    isInlineEditing: inlineEditPath != null && inlineEditPath.join(".") === item.path.slice(1).join("."),
+    inlineEditor: renderInlineEditor ? renderInlineEditor(selectionOf(item)) : null
   });
 
   // Uniform row height for crisp guide geometry

package/lib/commonjs/dataViewer/index.js

@@ -3,12 +3,36 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ABSENT_VALUE", {
+  enumerable: true,
+  get: function () {
+    return _lineDiff.ABSENT_VALUE;
+  }
+});
 Object.defineProperty(exports, "CyberpunkInput", {
   enumerable: true,
   get: function () {
     return _CyberpunkInput.CyberpunkInput;
   }
 });
+Object.defineProperty(exports, "DataTreeActionBar", {
+  enumerable: true,
+  get: function () {
+    return _DataTreeActionBar.DataTreeActionBar;
+  }
+});
+Object.defineProperty(exports, "DataTreeActionDock", {
+  enumerable: true,
+  get: function () {
+    return _DataTreeActionDock.DataTreeActionDock;
+  }
+});
+Object.defineProperty(exports, "DataTreeInlineEditor", {
+  enumerable: true,
+  get: function () {
+    return _DataTreeActionBar.DataTreeInlineEditor;
+  }
+});
 Object.defineProperty(exports, "DataViewer", {
   enumerable: true,
   get: function () {
@@ -63,6 +87,18 @@ Object.defineProperty(exports, "VirtualizedDataExplorer", {
     return _VirtualizedDataExplorer.VirtualizedDataExplorer;
   }
 });
+Object.defineProperty(exports, "applyJsonOp", {
+  enumerable: true,
+  get: function () {
+    return _jsonOps.applyJsonOp;
+  }
+});
+Object.defineProperty(exports, "breadcrumb", {
+  enumerable: true,
+  get: function () {
+    return _treeActions.breadcrumb;
+  }
+});
 Object.defineProperty(exports, "computeLineDiff", {
   enumerable: true,
   get: function () {
@@ -81,12 +117,60 @@ Object.defineProperty(exports, "diffThemes", {
     return _diffThemes.diffThemes;
   }
 });
+Object.defineProperty(exports, "getAtPath", {
+  enumerable: true,
+  get: function () {
+    return _jsonOps.getAtPath;
+  }
+});
 Object.defineProperty(exports, "gitClassicTheme", {
   enumerable: true,
   get: function () {
     return _diffThemes.gitClassicTheme;
   }
 });
+Object.defineProperty(exports, "isAbsent", {
+  enumerable: true,
+  get: function () {
+    return _lineDiff.isAbsent;
+  }
+});
+Object.defineProperty(exports, "isEditableContainer", {
+  enumerable: true,
+  get: function () {
+    return _jsonOps.isEditableContainer;
+  }
+});
+Object.defineProperty(exports, "selectionPathAfterOp", {
+  enumerable: true,
+  get: function () {
+    return _jsonOps.selectionPathAfterOp;
+  }
+});
+Object.defineProperty(exports, "suggestedNewValue", {
+  enumerable: true,
+  get: function () {
+    return _jsonOps.suggestedNewValue;
+  }
+});
+Object.defineProperty(exports, "treeActionMap", {
+  enumerable: true,
+  get: function () {
+    return _treeActions.treeActionMap;
+  }
+});
+Object.defineProperty(exports, "treeActionsFor", {
+  enumerable: true,
+  get: function () {
+    return _treeActions.treeActionsFor;
+  }
+});
+Object.defineProperty(exports, "typeLabel", {
+  enumerable: true,
+  get: function () {
+    return _treeActions.typeLabel;
+  }
+});
 var _DataViewer = require("./DataViewer.js");
 var _VirtualizedDataExplorer = require("./VirtualizedDataExplorer.js");
 var _TypeLegend = require("./TypeLegend.js");
@@ -94,6 +178,10 @@ var _CyberpunkInput = require("./CyberpunkInput.js");
 var _IndentGuides = require("./IndentGuides.js");
 var _IndentGuidesOverlay = require("./IndentGuidesOverlay.js");
 var _TreeDiffViewer = _interopRequireDefault(require("./tree/TreeDiffViewer.js"));
+var _jsonOps = require("./jsonOps.js");
+var _treeActions = require("./treeActions.js");
+var _DataTreeActionBar = require("./DataTreeActionBar.js");
+var _DataTreeActionDock = require("./DataTreeActionDock.js");
 var _SplitDiffViewer = require("./SplitDiffViewer.js");
 var _DiffSummary = require("./DiffSummary.js");
 var _lineDiff = require("./lineDiff.js");