@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/dataViewer/DataTreeActionBar.js

@@ -1,385 +1 @@
-"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 { monoFont } from "../ui/fonts.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: monoFont
-  },
-  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: 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";import{useState as T}from"react";import{StyleSheet as v,Text as p,TextInput as C,TouchableOpacity as m,View as f}from"react-native";import{ChevronDown as S,ChevronUp as z,Copy as B,Edit3 as I,Minus as w,Plus as D}from"../icons/index.js";import{macOSColors as n}from"../ui/gameUI/index.js";import{breadcrumb as k,treeActionMap as L,treeActionsFor as P,typeLabel as W}from"./treeActions.js";import{monoFont as x}from"../ui/fonts.js";import{jsx as t,jsxs as h}from"react/jsx-runtime";const r={barBg:n.background.card,barBorder:n.border.default,label:n.text.primary,badgeBg:n.background.hover,badgeText:n.text.secondary,hint:n.text.muted,btnBg:n.background.hover,btnBorder:n.border.default,btnText:n.text.primary,btnIcon:n.text.secondary,dangerBorder:n.semantic.error+"55",dangerText:n.semantic.error};const y=13;function g({label:l,onPress:s,icon:u,danger:d,iconOnly:a,disabled:i,style:e}){return h(m,{"sentry-label":"ignore devtools tree action",accessibilityLabel:l,accessibilityState:{disabled:!!i},onPress:i?void 0:s,disabled:i,hitSlop:{top:8,bottom:8,left:6,right:6},style:[o.button,a&&o.buttonIconOnly,d&&{borderColor:r.dangerBorder},i&&o.buttonDisabled,e],children:[u,a?null:t(p,{style:[o.buttonText,d&&{color:r.dangerText}],children:l})]})}export function DataTreeActionBar({root:l,selection:s,onEdit:u,onRequestInlineEdit:d,chipStyle:a}){const i=s!=null;const e=L(P(l,s));const b=c=>c&&u(c);return h(f,{style:o.bar,children:[t(p,{style:[o.selectionLabel,!i&&o.selectionLabelEmpty],numberOfLines:1,children:i?k(s.path):"Select a row to edit"}),t(f,{style:o.badge,children:t(p,{style:o.badgeText,children:i?W(s.value):"\u2014"})}),h(f,{style:o.actions,children:[t(g,{label:e.editValue.label,disabled:!e.editValue.enabled,style:a,icon:t(I,{size:y,color:r.btnIcon}),onPress:()=>e.editValue.op?u(e.editValue.op):d()}),t(g,{label:e.add.label,disabled:!e.add.enabled,style:a,icon:t(D,{size:y,color:r.btnIcon}),onPress:()=>b(e.add.op)}),t(g,{label:e.moveUp.label,iconOnly:true,disabled:!e.moveUp.enabled,style:a,icon:t(z,{size:14,color:r.btnIcon}),onPress:()=>b(e.moveUp.op)}),t(g,{label:e.moveDown.label,iconOnly:true,disabled:!e.moveDown.enabled,style:a,icon:t(S,{size:14,color:r.btnIcon}),onPress:()=>b(e.moveDown.op)}),t(g,{label:e.duplicate.label,disabled:!e.duplicate.enabled,style:a,icon:t(B,{size:y,color:r.btnIcon}),onPress:()=>b(e.duplicate.op)}),t(g,{label:e.remove.label,danger:true,disabled:!e.remove.enabled,style:a,icon:t(w,{size:y,color:r.dangerText}),onPress:()=>b(e.remove.op)})]})]})}export function DataTreeInlineEditor({value:l,onCommit:s,onCancel:u}){const[d,a]=T(()=>l===null||l===void 0?"":String(l));if(typeof l==="boolean"){return h(f,{style:o.inlineRow,children:[[true,false].map(c=>t(m,{accessibilityLabel:`Set ${c}`,onPress:()=>s(c),hitSlop:{top:8,bottom:8,left:6,right:6},style:[o.button,l===c&&o.buttonActive],children:t(p,{style:o.buttonText,children:String(c)})},String(c))),t(m,{accessibilityLabel:"Cancel edit",onPress:u,hitSlop:{top:8,bottom:8,left:6,right:6},style:o.button,children:t(p,{style:o.buttonText,children:"Cancel"})})]})}const i=typeof l==="number";const e=i&&(d.trim()===""||Number.isNaN(Number(d)));const b=()=>{if(e)return;s(i?Number(d):d)};return h(f,{style:o.inlineRow,children:[t(C,{value:d,onChangeText:a,onSubmitEditing:b,autoFocus:true,autoCapitalize:"none",autoCorrect:false,spellCheck:false,keyboardType:i?"numeric":"default",style:[o.input,e&&o.inputInvalid],placeholderTextColor:r.hint}),t(m,{accessibilityLabel:"Save value",onPress:b,hitSlop:{top:8,bottom:8,left:6,right:6},style:[o.saveButton,e&&o.saveButtonDisabled],children:t(p,{style:o.saveText,children:"Save"})}),t(m,{accessibilityLabel:"Cancel edit",onPress:u,hitSlop:{top:8,bottom:8,left:6,right:6},style:o.button,children:t(p,{style:o.buttonText,children:"Cancel"})})]})}const o=v.create({inlineRow:{flex:1,flexDirection:"row",alignItems:"center",gap:6},input:{flex:1,minWidth:0,height:28,color:r.label,backgroundColor:n.background.input,borderWidth:1,borderColor:n.border.input,borderRadius:7,paddingHorizontal:9,paddingVertical:0,fontSize:12,fontFamily:x},inputInvalid:{borderColor:n.semantic.error},saveButton:{height:28,justifyContent:"center",paddingHorizontal:10,borderRadius:7,backgroundColor:n.semantic.success},saveButtonDisabled:{opacity:.4},saveText:{color:n.background.base,fontSize:12,fontWeight:"600"},buttonActive:{borderColor:n.semantic.success},bar:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:8,paddingHorizontal:12,paddingVertical:9,borderTopWidth:1,borderTopColor:r.barBorder,backgroundColor:r.barBg},actions:{flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:6,marginLeft:"auto"},selectionLabelEmpty:{color:r.hint,fontWeight:"400"},selectionLabel:{color:r.label,fontSize:12,fontWeight:"600",fontFamily:x,flexShrink:1},badge:{paddingHorizontal:7,paddingVertical:1,borderRadius:5,backgroundColor:r.badgeBg},badgeText:{color:r.badgeText,fontSize:11,fontWeight:"600"},button:{flexDirection:"row",alignItems:"center",gap:6,minHeight:32,paddingHorizontal:11,borderRadius:8,borderWidth:1,borderColor:r.btnBorder,backgroundColor:r.btnBg},buttonDisabled:{opacity:.35},buttonIconOnly:{paddingHorizontal:0,width:32,justifyContent:"center"},buttonText:{color:r.btnText,fontSize:12,fontWeight:"600"},hint:{color:r.hint,fontSize:12,flexShrink:1}});

package/lib/module/dataViewer/DataTreeActionDock.js

@@ -1,222 +1 @@
-"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 { monoFont } from "../ui/fonts.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",
-    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__*/_jsx(Text, {
-      style: [styles.tileText, danger && enabled && {
-        color: T.dangerText
-      }],
-      numberOfLines: 1,
-      children: label
-    })]
-  });
-}
-export function DataTreeActionDock({
-  root,
-  selection,
-  onEdit,
-  onSelectPath,
-  onEditValue,
-  containersEditable = true,
-  rootEntriesLocked = false
-}) {
-  const actions = 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__*/_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: 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";import{StyleSheet as y,Text as f,TouchableOpacity as T,View as b}from"react-native";import{ChevronDown as B,ChevronUp as k,Copy as z,Edit3 as C,Minus as v,Plus as w}from"../icons/index.js";import{macOSColors as t}from"../ui/gameUI/index.js";import{breadcrumb as D,treeActionsFor as L,typeLabel as S}from"./treeActions.js";import{monoFont as W}from"../ui/fonts.js";import{jsx as o,jsxs as m}from"react/jsx-runtime";const r={dockBg:t.background.card,dockBorder:t.border.default,tileBg:t.background.hover,tileBorder:t.border.default,tileText:t.text.primary,tileIcon:t.text.secondary,hint:t.text.muted,label:t.text.primary,badgeBg:t.background.hover,badgeText:t.text.secondary,dangerBorder:t.semantic.error+"55",dangerText:t.semantic.error};const l=16;function I(d,e){switch(d){case"editValue":return o(C,{size:l,color:e});case"add":return o(w,{size:l,color:e});case"duplicate":return o(z,{size:l,color:e});case"moveUp":return o(k,{size:l+2,color:e});case"moveDown":return o(B,{size:l+2,color:e});case"remove":return o(v,{size:l,color:e})}}function j({action:d,onPress:e}){const{enabled:n,danger:s,label:c,id:g}=d;const p=s&&n?r.dangerText:r.tileIcon;return m(T,{"sentry-label":"ignore devtools tree action",testID:`buoy-tree-action-${g}`,accessibilityLabel:c,accessibilityState:{disabled:!n},disabled:!n,onPress:n?e:void 0,style:[i.tile,s&&n&&{borderColor:r.dangerBorder},!n&&i.tileDisabled],children:[I(g,p),o(f,{style:[i.tileText,s&&n&&{color:r.dangerText}],numberOfLines:1,children:c})]})}export function DataTreeActionDock({root:d,selection:e,onEdit:n,onSelectPath:s,onEditValue:c,containersEditable:g=true,rootEntriesLocked:p=false}){const h=L(d,e,{containersEditable:g,rootEntriesLocked:p});const u=e!=null;const x=a=>{if(!a.op){c();return}n(a.op);if(a.selectAfter)s(a.selectAfter)};return m(b,{style:i.dock,children:[m(b,{style:i.header,children:[o(f,{style:[i.selectionLabel,!u&&i.selectionLabelEmpty],numberOfLines:1,children:u?D(e.path):"Tap a row to select it"}),o(b,{style:i.badge,children:o(f,{style:i.badgeText,children:u?S(e.value):"\u2014"})})]}),o(b,{style:i.grid,children:h.map(a=>o(j,{action:a,onPress:()=>x(a)},a.id))})]})}const i=y.create({dock:{borderTopWidth:1,borderTopColor:r.dockBorder,backgroundColor:r.dockBg,paddingHorizontal:10,paddingTop:8,paddingBottom:10,gap:8},header:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:2},selectionLabel:{flex:1,color:r.label,fontSize:12,fontWeight:"600",fontFamily:W},selectionLabelEmpty:{color:r.hint,fontWeight:"400"},badge:{paddingHorizontal:7,paddingVertical:1,borderRadius:5,backgroundColor:r.badgeBg},badgeText:{color:r.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:r.tileBorder,backgroundColor:r.tileBg},tileDisabled:{opacity:.35},tileText:{color:r.tileText,fontSize:11,fontWeight:"600"}});