@buoy-gg/shared-ui 7.0.4 → 7.0.6

package/lib/module/colors/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+/**
+ * Palette-only entry point.
+ *
+ * WHY THIS EXISTS: the desktop dashboard re-tints the design system by mutating
+ * these objects in place, and that has to happen BEFORE any component module is
+ * evaluated — React Native `StyleSheet.create({...})` calls run at module load
+ * and freeze whatever colors they read.
+ *
+ * Importing the palettes from the package root (`@buoy-gg/shared-ui`) does the
+ * opposite: the root barrel re-exports every component, so pulling one constant
+ * out of it evaluates all of their StyleSheets first, and the re-tint lands too
+ * late — panels keep dark surfaces while inline reads go light.
+ *
+ * This subpath pulls in the two constants modules and nothing else, so the
+ * bootstrap can swap palettes with an empty component graph behind it. Import
+ * from here in anything that runs before the app mounts.
+ */
+export { macOSColors, macOSGameUIColors, refreshMacOSGameUIColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
+export { gameUIColors, buoyColors, dialColors, refreshGameUIColors } from "../ui/gameUI/constants/gameUIColors.js";

package/lib/module/dataViewer/DataTreeActionBar.js

@@ -0,0 +1,384 @@
+"use strict";
+
+/**
+ * Footer bar for the data explorer's selected node — the editor's controls.
+ *
+ * Ports the action strip from the desktop mockup ("Desktop app network dev
+ * tools redesign" → Value card footer): the selected node's label and type on
+ * the left, its available operations on the right, and a hint line when nothing
+ * is selected yet.
+ *
+ * The controls deliberately do NOT live inside the tree rows. A row is 28px
+ * tall and already carries a caret, a key, a value and a copy button, so
+ * per-row icon buttons land around 20px — under the touch target a phone needs,
+ * and immediately beside the copy button, which makes mis-taps easy. Hosting
+ * them in one bar keeps every target full size and in a predictable place.
+ *
+ * So the split is: the tree owns SELECTION, this bar owns ACTIONS.
+ *
+ * Nothing here mutates. Each control emits a {@link JsonOp} against the
+ * selection's path and the host applies it, so the explorer stays a pure view.
+ */
+
+import { useState } from "react";
+import { StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
+import { ChevronDown, ChevronUp, Copy, Edit3, Minus, Plus } from "../icons/index.js";
+import { macOSColors } from "../ui/gameUI/index.js";
+import { breadcrumb, treeActionMap, treeActionsFor, typeLabel } from "./treeActions.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Palette. The explorer renders on the phone's dark modal AND inside the
+ * dashboard's light table, so every value is paired rather than hardcoded —
+ * the light column is the mockup's own ramp.
+ */
+const T = {
+  barBg: macOSColors.background.card,
+  barBorder: macOSColors.border.default,
+  label: macOSColors.text.primary,
+  badgeBg: macOSColors.background.hover,
+  badgeText: macOSColors.text.secondary,
+  hint: macOSColors.text.muted,
+  btnBg: macOSColors.background.hover,
+  btnBorder: macOSColors.border.default,
+  btnText: macOSColors.text.primary,
+  btnIcon: macOSColors.text.secondary,
+  dangerBorder: macOSColors.semantic.error + "55",
+  dangerText: macOSColors.semantic.error
+};
+const ICON = 13;
+function Button({
+  label,
+  onPress,
+  icon,
+  danger,
+  iconOnly,
+  disabled,
+  style
+}) {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    "sentry-label": "ignore devtools tree action",
+    accessibilityLabel: label,
+    accessibilityState: {
+      disabled: !!disabled
+    },
+    onPress: disabled ? undefined : onPress,
+    disabled: disabled,
+    hitSlop: {
+      top: 8,
+      bottom: 8,
+      left: 6,
+      right: 6
+    },
+    style: [styles.button, iconOnly && styles.buttonIconOnly, danger && {
+      borderColor: T.dangerBorder
+    }, disabled && styles.buttonDisabled, style],
+    children: [icon, iconOnly ? null : /*#__PURE__*/_jsx(Text, {
+      style: [styles.buttonText, danger && {
+        color: T.dangerText
+      }],
+      children: label
+    })]
+  });
+}
+export function DataTreeActionBar({
+  root,
+  selection,
+  onEdit,
+  onRequestInlineEdit,
+  chipStyle
+}) {
+  const has = selection != null;
+  // The bar's inline editor is a single-line field in a 28px row, so it can't
+  // take a container — hence `containersEditable` left off.
+  const a = treeActionMap(treeActionsFor(root, selection));
+  const apply = op => op && onEdit(op);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.bar,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.selectionLabel, !has && styles.selectionLabelEmpty],
+      numberOfLines: 1,
+      children: has ? breadcrumb(selection.path) : "Select a row to edit"
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.badge,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.badgeText,
+        children: has ? typeLabel(selection.value) : "—"
+      })
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [/*#__PURE__*/_jsx(Button, {
+        label: a.editValue.label,
+        disabled: !a.editValue.enabled,
+        style: chipStyle,
+        icon: /*#__PURE__*/_jsx(Edit3, {
+          size: ICON,
+          color: T.btnIcon
+        }),
+        onPress: () => a.editValue.op ? onEdit(a.editValue.op) : onRequestInlineEdit()
+      }), /*#__PURE__*/_jsx(Button, {
+        label: a.add.label,
+        disabled: !a.add.enabled,
+        style: chipStyle,
+        icon: /*#__PURE__*/_jsx(Plus, {
+          size: ICON,
+          color: T.btnIcon
+        }),
+        onPress: () => apply(a.add.op)
+      }), /*#__PURE__*/_jsx(Button, {
+        label: a.moveUp.label,
+        iconOnly: true,
+        disabled: !a.moveUp.enabled,
+        style: chipStyle,
+        icon: /*#__PURE__*/_jsx(ChevronUp, {
+          size: 14,
+          color: T.btnIcon
+        }),
+        onPress: () => apply(a.moveUp.op)
+      }), /*#__PURE__*/_jsx(Button, {
+        label: a.moveDown.label,
+        iconOnly: true,
+        disabled: !a.moveDown.enabled,
+        style: chipStyle,
+        icon: /*#__PURE__*/_jsx(ChevronDown, {
+          size: 14,
+          color: T.btnIcon
+        }),
+        onPress: () => apply(a.moveDown.op)
+      }), /*#__PURE__*/_jsx(Button, {
+        label: a.duplicate.label,
+        disabled: !a.duplicate.enabled,
+        style: chipStyle,
+        icon: /*#__PURE__*/_jsx(Copy, {
+          size: ICON,
+          color: T.btnIcon
+        }),
+        onPress: () => apply(a.duplicate.op)
+      }), /*#__PURE__*/_jsx(Button, {
+        label: a.remove.label,
+        danger: true,
+        disabled: !a.remove.enabled,
+        style: chipStyle,
+        icon: /*#__PURE__*/_jsx(Minus, {
+          size: ICON,
+          color: T.dangerText
+        }),
+        onPress: () => apply(a.remove.op)
+      })]
+    })]
+  });
+}
+
+/**
+ * The field that replaces a row's value while editing it, per the mockup.
+ *
+ * Type-preserving by construction rather than by parsing guesswork: the
+ * ORIGINAL value's type decides how the draft is read back, so editing a number
+ * can only ever produce a number. Booleans skip text entirely — there is
+ * nothing to type, so they commit straight from a two-way toggle.
+ */
+export function DataTreeInlineEditor({
+  value,
+  onCommit,
+  onCancel
+}) {
+  const [draft, setDraft] = useState(() => value === null || value === undefined ? "" : String(value));
+  if (typeof value === "boolean") {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.inlineRow,
+      children: [[true, false].map(option => /*#__PURE__*/_jsx(TouchableOpacity, {
+        accessibilityLabel: `Set ${option}`,
+        onPress: () => onCommit(option),
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 6,
+          right: 6
+        },
+        style: [styles.button, value === option && styles.buttonActive],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonText,
+          children: String(option)
+        })
+      }, String(option))), /*#__PURE__*/_jsx(TouchableOpacity, {
+        accessibilityLabel: "Cancel edit",
+        onPress: onCancel,
+        hitSlop: {
+          top: 8,
+          bottom: 8,
+          left: 6,
+          right: 6
+        },
+        style: styles.button,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.buttonText,
+          children: "Cancel"
+        })
+      })]
+    });
+  }
+  const isNumber = typeof value === "number";
+  const invalid = isNumber && (draft.trim() === "" || Number.isNaN(Number(draft)));
+  const commit = () => {
+    if (invalid) return;
+    onCommit(isNumber ? Number(draft) : draft);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.inlineRow,
+    children: [/*#__PURE__*/_jsx(TextInput, {
+      value: draft,
+      onChangeText: setDraft,
+      onSubmitEditing: commit,
+      autoFocus: true,
+      autoCapitalize: "none",
+      autoCorrect: false,
+      spellCheck: false,
+      keyboardType: isNumber ? "numeric" : "default",
+      style: [styles.input, invalid && styles.inputInvalid],
+      placeholderTextColor: T.hint
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      accessibilityLabel: "Save value",
+      onPress: commit,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 6,
+        right: 6
+      },
+      style: [styles.saveButton, invalid && styles.saveButtonDisabled],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.saveText,
+        children: "Save"
+      })
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      accessibilityLabel: "Cancel edit",
+      onPress: onCancel,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 6,
+        right: 6
+      },
+      style: styles.button,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.buttonText,
+        children: "Cancel"
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  inlineRow: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    height: 28,
+    color: T.label,
+    backgroundColor: macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: macOSColors.border.input,
+    borderRadius: 7,
+    paddingHorizontal: 9,
+    paddingVertical: 0,
+    fontSize: 12,
+    fontFamily: "monospace"
+  },
+  inputInvalid: {
+    borderColor: macOSColors.semantic.error
+  },
+  saveButton: {
+    height: 28,
+    justifyContent: "center",
+    paddingHorizontal: 10,
+    borderRadius: 7,
+    backgroundColor: macOSColors.semantic.success
+  },
+  saveButtonDisabled: {
+    opacity: 0.4
+  },
+  saveText: {
+    color: macOSColors.background.base,
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  buttonActive: {
+    borderColor: macOSColors.semantic.success
+  },
+  bar: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 9,
+    borderTopWidth: 1,
+    borderTopColor: T.barBorder,
+    backgroundColor: T.barBg
+  },
+  actions: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 6,
+    marginLeft: "auto"
+  },
+  selectionLabelEmpty: {
+    color: T.hint,
+    fontWeight: "400"
+  },
+  selectionLabel: {
+    color: T.label,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    flexShrink: 1
+  },
+  badge: {
+    paddingHorizontal: 7,
+    paddingVertical: 1,
+    borderRadius: 5,
+    backgroundColor: T.badgeBg
+  },
+  badgeText: {
+    color: T.badgeText,
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    // Sized for a finger, not just a cursor — this bar is shared with the phone.
+    minHeight: 32,
+    paddingHorizontal: 11,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: T.btnBorder,
+    backgroundColor: T.btnBg
+  },
+  buttonDisabled: {
+    // Dimmed, not removed. An action that vanishes when it stops applying
+    // reflows every other control — so moving the selection between siblings
+    // would shuffle the buttons under the user's finger.
+    opacity: 0.35
+  },
+  buttonIconOnly: {
+    paddingHorizontal: 0,
+    width: 32,
+    justifyContent: "center"
+  },
+  buttonText: {
+    color: T.btnText,
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  hint: {
+    color: T.hint,
+    fontSize: 12,
+    flexShrink: 1
+  }
+});

package/lib/module/dataViewer/DataTreeActionDock.js

@@ -0,0 +1,218 @@
+"use strict";
+
+/**
+ * The phone's edit controls — a fixed grid of six thumb-sized tiles, docked
+ * under a full-screen tree.
+ *
+ * The dashboard renders the same six actions as {@link DataTreeActionBar}: a
+ * row of small chips, which is right beside a cursor and wrong under a thumb.
+ * Both read their list from `treeActionsFor`, so what's legal can't drift
+ * between them — only the shape does.
+ *
+ * Two tiles per row of three, always in the same slots, disabled rather than
+ * hidden. See `treeActionsFor` for why the list is fixed-length.
+ */
+
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ChevronDown, ChevronUp, Copy, Edit3, Minus, Plus } from "../icons/index.js";
+import { macOSColors } from "../ui/gameUI/index.js";
+import { breadcrumb, treeActionsFor, typeLabel } from "./treeActions.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const T = {
+  dockBg: macOSColors.background.card,
+  dockBorder: macOSColors.border.default,
+  tileBg: macOSColors.background.hover,
+  tileBorder: macOSColors.border.default,
+  tileText: macOSColors.text.primary,
+  tileIcon: macOSColors.text.secondary,
+  hint: macOSColors.text.muted,
+  label: macOSColors.text.primary,
+  badgeBg: macOSColors.background.hover,
+  badgeText: macOSColors.text.secondary,
+  dangerBorder: macOSColors.semantic.error + "55",
+  dangerText: macOSColors.semantic.error
+};
+const ICON = 16;
+
+/** Icons live with the renderer, not the action list — see `treeActions`. */
+function iconFor(id, color) {
+  switch (id) {
+    case "editValue":
+      return /*#__PURE__*/_jsx(Edit3, {
+        size: ICON,
+        color: color
+      });
+    case "add":
+      return /*#__PURE__*/_jsx(Plus, {
+        size: ICON,
+        color: color
+      });
+    case "duplicate":
+      return /*#__PURE__*/_jsx(Copy, {
+        size: ICON,
+        color: color
+      });
+    case "moveUp":
+      return /*#__PURE__*/_jsx(ChevronUp, {
+        size: ICON + 2,
+        color: color
+      });
+    case "moveDown":
+      return /*#__PURE__*/_jsx(ChevronDown, {
+        size: ICON + 2,
+        color: color
+      });
+    case "remove":
+      return /*#__PURE__*/_jsx(Minus, {
+        size: ICON,
+        color: color
+      });
+  }
+}
+function Tile({
+  action,
+  onPress
+}) {
+  const {
+    enabled,
+    danger,
+    label,
+    id
+  } = action;
+  const color = danger && enabled ? T.dangerText : T.tileIcon;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    "sentry-label": "ignore devtools tree action",
+    accessibilityLabel: label,
+    accessibilityState: {
+      disabled: !enabled
+    },
+    disabled: !enabled,
+    onPress: enabled ? onPress : undefined,
+    style: [styles.tile, danger && enabled && {
+      borderColor: T.dangerBorder
+    }, !enabled && styles.tileDisabled],
+    children: [iconFor(id, color), /*#__PURE__*/_jsx(Text, {
+      style: [styles.tileText, danger && enabled && {
+        color: T.dangerText
+      }],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+}
+export function DataTreeActionDock({
+  root,
+  selection,
+  onEdit,
+  onSelectPath,
+  onEditValue,
+  containersEditable = true
+}) {
+  const actions = treeActionsFor(root, selection, {
+    containersEditable
+  });
+  const has = selection != null;
+  const run = action => {
+    // No op means the host has to ask the user something — today that's only
+    // "edit this value". A boolean arrives here WITH an op and so just flips.
+    if (!action.op) {
+      onEditValue();
+      return;
+    }
+    onEdit(action.op);
+    // Ops that CREATE a node say where it landed; the ones that move or delete
+    // one are handled by `selectionPathAfterOp` inside the host's draft.
+    if (action.selectAfter) onSelectPath(action.selectAfter);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.dock,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: [styles.selectionLabel, !has && styles.selectionLabelEmpty],
+        numberOfLines: 1,
+        children: has ? breadcrumb(selection.path) : "Tap a row to select it"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.badge,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.badgeText,
+          children: has ? typeLabel(selection.value) : "—"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.grid,
+      children: actions.map(action => /*#__PURE__*/_jsx(Tile, {
+        action: action,
+        onPress: () => run(action)
+      }, action.id))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  dock: {
+    borderTopWidth: 1,
+    borderTopColor: T.dockBorder,
+    backgroundColor: T.dockBg,
+    paddingHorizontal: 10,
+    paddingTop: 8,
+    paddingBottom: 10,
+    gap: 8
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 2
+  },
+  selectionLabel: {
+    flex: 1,
+    color: T.label,
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  selectionLabelEmpty: {
+    color: T.hint,
+    fontWeight: "400"
+  },
+  badge: {
+    paddingHorizontal: 7,
+    paddingVertical: 1,
+    borderRadius: 5,
+    backgroundColor: T.badgeBg
+  },
+  badgeText: {
+    color: T.badgeText,
+    fontSize: 11,
+    fontWeight: "600"
+  },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  },
+  tile: {
+    // Three per row, sized off the gaps rather than a fixed width so the grid
+    // survives a narrow phone and a tablet split view alike.
+    flexBasis: "31%",
+    flexGrow: 1,
+    minHeight: 54,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    paddingHorizontal: 6,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: T.tileBorder,
+    backgroundColor: T.tileBg
+  },
+  tileDisabled: {
+    // Dimmed, not removed — see `treeActionsFor`.
+    opacity: 0.35
+  },
+  tileText: {
+    color: T.tileText,
+    fontSize: 11,
+    fontWeight: "600"
+  }
+});

package/lib/module/dataViewer/DataViewer.js

@@ -22,7 +22,12 @@ export const DataViewer = ({
   rawMode = true,
   showTypeFilter = true,
   initialExpanded = false,
-  disableCopy = false
+  disableCopy = false,
+  onSelectionChange,
+  onRequestInlineEdit,
+  inlineEditPath,
+  renderInlineEditor,
+  selectPath
 }) => {
   const [activeFilter, setActiveFilter] = useState(null);
 
@@ -91,7 +96,12 @@ export const DataViewer = ({
 
   // Render content based on filter state
   const renderContent = () => {
-    // Show filtered results if filter is active
+    // Show filtered results if filter is active.
+    //
+    // Selection is deliberately NOT forwarded here: the filtered view is a
+    // DERIVED object, so its row paths address that projection rather than the
+    // real document. An op built from one would edit an unrelated node —
+    // silently, and with a plausible-looking result.
     if (activeFilter && getFilteredData) {
       return /*#__PURE__*/_jsx(VirtualizedDataExplorer, {
         title: `${activeFilter} values`,
@@ -110,7 +120,12 @@ export const DataViewer = ({
       maxDepth: maxDepth,
       rawMode: rawMode,
       initialExpanded: initialExpanded,
-      disableCopy: disableCopy
+      disableCopy: disableCopy,
+      onSelectionChange: onSelectionChange,
+      onRequestInlineEdit: onRequestInlineEdit,
+      inlineEditPath: inlineEditPath,
+      renderInlineEditor: renderInlineEditor,
+      selectPath: selectPath
     });
   };
   return /*#__PURE__*/_jsxs(View, {