@buoy-gg/shared-ui 7.0.41 → 7.0.43

package/lib/commonjs/dataViewer/DataTreeActionBar.js

@@ -1,390 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DataTreeActionBar = DataTreeActionBar;
-exports.DataTreeInlineEditor = DataTreeInlineEditor;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../icons/index.js");
-var _index2 = require("../ui/gameUI/index.js");
-var _treeActions = require("./treeActions.js");
-var _fonts = require("../ui/fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-/**
- * 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: _index2.macOSColors.background.card,
-  barBorder: _index2.macOSColors.border.default,
-  label: _index2.macOSColors.text.primary,
-  badgeBg: _index2.macOSColors.background.hover,
-  badgeText: _index2.macOSColors.text.secondary,
-  hint: _index2.macOSColors.text.muted,
-  btnBg: _index2.macOSColors.background.hover,
-  btnBorder: _index2.macOSColors.border.default,
-  btnText: _index2.macOSColors.text.primary,
-  btnIcon: _index2.macOSColors.text.secondary,
-  dangerBorder: _index2.macOSColors.semantic.error + "55",
-  dangerText: _index2.macOSColors.semantic.error
-};
-const ICON = 13;
-function Button({
-  label,
-  onPress,
-  icon,
-  danger,
-  iconOnly,
-  disabled,
-  style
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.buttonText, danger && {
-        color: T.dangerText
-      }],
-      children: label
-    })]
-  });
-}
-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 = (0, _treeActions.treeActionMap)((0, _treeActions.treeActionsFor)(root, selection));
-  const apply = op => op && onEdit(op);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.bar,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.selectionLabel, !has && styles.selectionLabelEmpty],
-      numberOfLines: 1,
-      children: has ? (0, _treeActions.breadcrumb)(selection.path) : "Select a row to edit"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.badge,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.badgeText,
-        children: has ? (0, _treeActions.typeLabel)(selection.value) : "—"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.actions,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-        label: a.editValue.label,
-        disabled: !a.editValue.enabled,
-        style: chipStyle,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Edit3, {
-          size: ICON,
-          color: T.btnIcon
-        }),
-        onPress: () => a.editValue.op ? onEdit(a.editValue.op) : onRequestInlineEdit()
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-        label: a.add.label,
-        disabled: !a.add.enabled,
-        style: chipStyle,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
-          size: ICON,
-          color: T.btnIcon
-        }),
-        onPress: () => apply(a.add.op)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-        label: a.moveUp.label,
-        iconOnly: true,
-        disabled: !a.moveUp.enabled,
-        style: chipStyle,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
-          size: 14,
-          color: T.btnIcon
-        }),
-        onPress: () => apply(a.moveUp.op)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-        label: a.moveDown.label,
-        iconOnly: true,
-        disabled: !a.moveDown.enabled,
-        style: chipStyle,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-          size: 14,
-          color: T.btnIcon
-        }),
-        onPress: () => apply(a.moveDown.op)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-        label: a.duplicate.label,
-        disabled: !a.duplicate.enabled,
-        style: chipStyle,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Copy, {
-          size: ICON,
-          color: T.btnIcon
-        }),
-        onPress: () => apply(a.duplicate.op)
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, {
-        label: a.remove.label,
-        danger: true,
-        disabled: !a.remove.enabled,
-        style: chipStyle,
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.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.
- */
-function DataTreeInlineEditor({
-  value,
-  onCommit,
-  onCancel
-}) {
-  const [draft, setDraft] = (0, _react.useState)(() => value === null || value === undefined ? "" : String(value));
-  if (typeof value === "boolean") {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.inlineRow,
-      children: [[true, false].map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.buttonText,
-          children: String(option)
-        })
-      }, String(option))), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        accessibilityLabel: "Cancel edit",
-        onPress: onCancel,
-        hitSlop: {
-          top: 8,
-          bottom: 8,
-          left: 6,
-          right: 6
-        },
-        style: styles.button,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.inlineRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      accessibilityLabel: "Save value",
-      onPress: commit,
-      hitSlop: {
-        top: 8,
-        bottom: 8,
-        left: 6,
-        right: 6
-      },
-      style: [styles.saveButton, invalid && styles.saveButtonDisabled],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.saveText,
-        children: "Save"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      accessibilityLabel: "Cancel edit",
-      onPress: onCancel,
-      hitSlop: {
-        top: 8,
-        bottom: 8,
-        left: 6,
-        right: 6
-      },
-      style: styles.button,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.buttonText,
-        children: "Cancel"
-      })
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  inlineRow: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  input: {
-    flex: 1,
-    minWidth: 0,
-    height: 28,
-    color: T.label,
-    backgroundColor: _index2.macOSColors.background.input,
-    borderWidth: 1,
-    borderColor: _index2.macOSColors.border.input,
-    borderRadius: 7,
-    paddingHorizontal: 9,
-    paddingVertical: 0,
-    fontSize: 12,
-    fontFamily: _fonts.monoFont
-  },
-  inputInvalid: {
-    borderColor: _index2.macOSColors.semantic.error
-  },
-  saveButton: {
-    height: 28,
-    justifyContent: "center",
-    paddingHorizontal: 10,
-    borderRadius: 7,
-    backgroundColor: _index2.macOSColors.semantic.success
-  },
-  saveButtonDisabled: {
-    opacity: 0.4
-  },
-  saveText: {
-    color: _index2.macOSColors.background.base,
-    fontSize: 12,
-    fontWeight: "600"
-  },
-  buttonActive: {
-    borderColor: _index2.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: _fonts.monoFont,
-    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
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DataTreeActionBar=DataTreeActionBar;exports.DataTreeInlineEditor=DataTreeInlineEditor;var _react=require("react");var _reactNative=require("react-native");var _index=require("../icons/index.js");var _index2=require("../ui/gameUI/index.js");var _treeActions=require("./treeActions.js");var _fonts=require("../ui/fonts.js");var _jsxRuntime=require("react/jsx-runtime");const T={barBg:_index2.macOSColors.background.card,barBorder:_index2.macOSColors.border.default,label:_index2.macOSColors.text.primary,badgeBg:_index2.macOSColors.background.hover,badgeText:_index2.macOSColors.text.secondary,hint:_index2.macOSColors.text.muted,btnBg:_index2.macOSColors.background.hover,btnBorder:_index2.macOSColors.border.default,btnText:_index2.macOSColors.text.primary,btnIcon:_index2.macOSColors.text.secondary,dangerBorder:_index2.macOSColors.semantic.error+"55",dangerText:_index2.macOSColors.semantic.error};const ICON=13;function Button({label:o,onPress:a,icon:s,danger:n,iconOnly:r,disabled:t,style:e}){return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools tree action",accessibilityLabel:o,accessibilityState:{disabled:!!t},onPress:t?void 0:a,disabled:t,hitSlop:{top:8,bottom:8,left:6,right:6},style:[styles.button,r&&styles.buttonIconOnly,n&&{borderColor:T.dangerBorder},t&&styles.buttonDisabled,e],children:[s,r?null:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.buttonText,n&&{color:T.dangerText}],children:o})]})}function DataTreeActionBar({root:o,selection:a,onEdit:s,onRequestInlineEdit:n,chipStyle:r}){const t=a!=null;const e=(0,_treeActions.treeActionMap)((0,_treeActions.treeActionsFor)(o,a));const i=l=>l&&s(l);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.bar,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.selectionLabel,!t&&styles.selectionLabelEmpty],numberOfLines:1,children:t?(0,_treeActions.breadcrumb)(a.path):"Select a row to edit"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.badge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.badgeText,children:t?(0,_treeActions.typeLabel)(a.value):"\u2014"})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actions,children:[(0,_jsxRuntime.jsx)(Button,{label:e.editValue.label,disabled:!e.editValue.enabled,style:r,icon:(0,_jsxRuntime.jsx)(_index.Edit3,{size:ICON,color:T.btnIcon}),onPress:()=>e.editValue.op?s(e.editValue.op):n()}),(0,_jsxRuntime.jsx)(Button,{label:e.add.label,disabled:!e.add.enabled,style:r,icon:(0,_jsxRuntime.jsx)(_index.Plus,{size:ICON,color:T.btnIcon}),onPress:()=>i(e.add.op)}),(0,_jsxRuntime.jsx)(Button,{label:e.moveUp.label,iconOnly:true,disabled:!e.moveUp.enabled,style:r,icon:(0,_jsxRuntime.jsx)(_index.ChevronUp,{size:14,color:T.btnIcon}),onPress:()=>i(e.moveUp.op)}),(0,_jsxRuntime.jsx)(Button,{label:e.moveDown.label,iconOnly:true,disabled:!e.moveDown.enabled,style:r,icon:(0,_jsxRuntime.jsx)(_index.ChevronDown,{size:14,color:T.btnIcon}),onPress:()=>i(e.moveDown.op)}),(0,_jsxRuntime.jsx)(Button,{label:e.duplicate.label,disabled:!e.duplicate.enabled,style:r,icon:(0,_jsxRuntime.jsx)(_index.Copy,{size:ICON,color:T.btnIcon}),onPress:()=>i(e.duplicate.op)}),(0,_jsxRuntime.jsx)(Button,{label:e.remove.label,danger:true,disabled:!e.remove.enabled,style:r,icon:(0,_jsxRuntime.jsx)(_index.Minus,{size:ICON,color:T.dangerText}),onPress:()=>i(e.remove.op)})]})]})}function DataTreeInlineEditor({value:o,onCommit:a,onCancel:s}){const[n,r]=(0,_react.useState)(()=>o===null||o===void 0?"":String(o));if(typeof o==="boolean"){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRow,children:[[true,false].map(l=>(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{accessibilityLabel:`Set ${l}`,onPress:()=>a(l),hitSlop:{top:8,bottom:8,left:6,right:6},style:[styles.button,o===l&&styles.buttonActive],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.buttonText,children:String(l)})},String(l))),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{accessibilityLabel:"Cancel edit",onPress:s,hitSlop:{top:8,bottom:8,left:6,right:6},style:styles.button,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.buttonText,children:"Cancel"})})]})}const t=typeof o==="number";const e=t&&(n.trim()===""||Number.isNaN(Number(n)));const i=()=>{if(e)return;a(t?Number(n):n)};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRow,children:[(0,_jsxRuntime.jsx)(_reactNative.TextInput,{value:n,onChangeText:r,onSubmitEditing:i,autoFocus:true,autoCapitalize:"none",autoCorrect:false,spellCheck:false,keyboardType:t?"numeric":"default",style:[styles.input,e&&styles.inputInvalid],placeholderTextColor:T.hint}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{accessibilityLabel:"Save value",onPress:i,hitSlop:{top:8,bottom:8,left:6,right:6},style:[styles.saveButton,e&&styles.saveButtonDisabled],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.saveText,children:"Save"})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{accessibilityLabel:"Cancel edit",onPress:s,hitSlop:{top:8,bottom:8,left:6,right:6},style:styles.button,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.buttonText,children:"Cancel"})})]})}const styles=_reactNative.StyleSheet.create({inlineRow:{flex:1,flexDirection:"row",alignItems:"center",gap:6},input:{flex:1,minWidth:0,height:28,color:T.label,backgroundColor:_index2.macOSColors.background.input,borderWidth:1,borderColor:_index2.macOSColors.border.input,borderRadius:7,paddingHorizontal:9,paddingVertical:0,fontSize:12,fontFamily:_fonts.monoFont},inputInvalid:{borderColor:_index2.macOSColors.semantic.error},saveButton:{height:28,justifyContent:"center",paddingHorizontal:10,borderRadius:7,backgroundColor:_index2.macOSColors.semantic.success},saveButtonDisabled:{opacity:.4},saveText:{color:_index2.macOSColors.background.base,fontSize:12,fontWeight:"600"},buttonActive:{borderColor:_index2.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:_fonts.monoFont,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,minHeight:32,paddingHorizontal:11,borderRadius:8,borderWidth:1,borderColor:T.btnBorder,backgroundColor:T.btnBg},buttonDisabled:{opacity:.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/commonjs/dataViewer/DataTreeActionDock.js

@@ -1,226 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DataTreeActionDock = DataTreeActionDock;
-var _reactNative = require("react-native");
-var _index = require("../icons/index.js");
-var _index2 = require("../ui/gameUI/index.js");
-var _treeActions = require("./treeActions.js");
-var _fonts = require("../ui/fonts.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-const T = {
-  dockBg: _index2.macOSColors.background.card,
-  dockBorder: _index2.macOSColors.border.default,
-  tileBg: _index2.macOSColors.background.hover,
-  tileBorder: _index2.macOSColors.border.default,
-  tileText: _index2.macOSColors.text.primary,
-  tileIcon: _index2.macOSColors.text.secondary,
-  hint: _index2.macOSColors.text.muted,
-  label: _index2.macOSColors.text.primary,
-  badgeBg: _index2.macOSColors.background.hover,
-  badgeText: _index2.macOSColors.text.secondary,
-  dangerBorder: _index2.macOSColors.semantic.error + "55",
-  dangerText: _index2.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__*/(0, _jsxRuntime.jsx)(_index.Edit3, {
-        size: ICON,
-        color: color
-      });
-    case "add":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
-        size: ICON,
-        color: color
-      });
-    case "duplicate":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Copy, {
-        size: ICON,
-        color: color
-      });
-    case "moveUp":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronUp, {
-        size: ICON + 2,
-        color: color
-      });
-    case "moveDown":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-        size: ICON + 2,
-        color: color
-      });
-    case "remove":
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.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__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore devtools tree action",
-    testID: `buoy-tree-action-${id}`,
-    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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.tileText, danger && enabled && {
-        color: T.dangerText
-      }],
-      numberOfLines: 1,
-      children: label
-    })]
-  });
-}
-function DataTreeActionDock({
-  root,
-  selection,
-  onEdit,
-  onSelectPath,
-  onEditValue,
-  containersEditable = true,
-  rootEntriesLocked = false
-}) {
-  const actions = (0, _treeActions.treeActionsFor)(root, selection, {
-    containersEditable,
-    rootEntriesLocked
-  });
-  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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.dock,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.header,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.selectionLabel, !has && styles.selectionLabelEmpty],
-        numberOfLines: 1,
-        children: has ? (0, _treeActions.breadcrumb)(selection.path) : "Tap a row to select it"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.badge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.badgeText,
-          children: has ? (0, _treeActions.typeLabel)(selection.value) : "—"
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.grid,
-      children: actions.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tile, {
-        action: action,
-        onPress: () => run(action)
-      }, action.id))
-    })]
-  });
-}
-const styles = _reactNative.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: _fonts.monoFont
-  },
-  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"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.DataTreeActionDock=DataTreeActionDock;var _reactNative=require("react-native");var _index=require("../icons/index.js");var _index2=require("../ui/gameUI/index.js");var _treeActions=require("./treeActions.js");var _fonts=require("../ui/fonts.js");var _jsxRuntime=require("react/jsx-runtime");const T={dockBg:_index2.macOSColors.background.card,dockBorder:_index2.macOSColors.border.default,tileBg:_index2.macOSColors.background.hover,tileBorder:_index2.macOSColors.border.default,tileText:_index2.macOSColors.text.primary,tileIcon:_index2.macOSColors.text.secondary,hint:_index2.macOSColors.text.muted,label:_index2.macOSColors.text.primary,badgeBg:_index2.macOSColors.background.hover,badgeText:_index2.macOSColors.text.secondary,dangerBorder:_index2.macOSColors.semantic.error+"55",dangerText:_index2.macOSColors.semantic.error};const ICON=16;function iconFor(o,e){switch(o){case"editValue":return(0,_jsxRuntime.jsx)(_index.Edit3,{size:ICON,color:e});case"add":return(0,_jsxRuntime.jsx)(_index.Plus,{size:ICON,color:e});case"duplicate":return(0,_jsxRuntime.jsx)(_index.Copy,{size:ICON,color:e});case"moveUp":return(0,_jsxRuntime.jsx)(_index.ChevronUp,{size:ICON+2,color:e});case"moveDown":return(0,_jsxRuntime.jsx)(_index.ChevronDown,{size:ICON+2,color:e});case"remove":return(0,_jsxRuntime.jsx)(_index.Minus,{size:ICON,color:e})}}function Tile({action:o,onPress:e}){const{enabled:r,danger:i,label:a,id:n}=o;const s=i&&r?T.dangerText:T.tileIcon;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools tree action",testID:`buoy-tree-action-${n}`,accessibilityLabel:a,accessibilityState:{disabled:!r},disabled:!r,onPress:r?e:void 0,style:[styles.tile,i&&r&&{borderColor:T.dangerBorder},!r&&styles.tileDisabled],children:[iconFor(n,s),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.tileText,i&&r&&{color:T.dangerText}],numberOfLines:1,children:a})]})}function DataTreeActionDock({root:o,selection:e,onEdit:r,onSelectPath:i,onEditValue:a,containersEditable:n=true,rootEntriesLocked:s=false}){const d=(0,_treeActions.treeActionsFor)(o,e,{containersEditable:n,rootEntriesLocked:s});const l=e!=null;const c=t=>{if(!t.op){a();return}r(t.op);if(t.selectAfter)i(t.selectAfter)};return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.dock,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.header,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.selectionLabel,!l&&styles.selectionLabelEmpty],numberOfLines:1,children:l?(0,_treeActions.breadcrumb)(e.path):"Tap a row to select it"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.badge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.badgeText,children:l?(0,_treeActions.typeLabel)(e.value):"\u2014"})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.grid,children:d.map(t=>(0,_jsxRuntime.jsx)(Tile,{action:t,onPress:()=>c(t)},t.id))})]})}const styles=_reactNative.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:_fonts.monoFont},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:{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:{opacity:.35},tileText:{color:T.tileText,fontSize:11,fontWeight:"600"}});