@buoy-gg/shared-ui 7.0.28 → 7.0.29

package/lib/commonjs/ui/components/DynamicFilterView.js

@@ -107,6 +107,9 @@ function DynamicFilterView({
           const countIsZero = hasCount && option.count === 0;
           const showLabel = section.type !== "method" || option.icon;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            testID: `buoy-filter-option-${option.id}`,
+            accessibilityRole: "button",
+            accessibilityLabel: String(option.label ?? option.id),
             style: [styles.filterCard, option.isActive && styles.activeFilterCard],
             onPress: () => onFilterChange?.(option.id, option.value),
             children: [option.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(option.icon, {
@@ -191,7 +194,8 @@ function DynamicFilterView({
           children: !includeFilterManager.showAddInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterButton, {
             onPress: () => includeFilterManager.setShowAddInput(true),
             color: _gameUIColors.buoyColors.success,
-            label: "Add include pattern"
+            label: "Add include pattern",
+            testID: "buoy-filter-include-add-open"
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_FilterComponents.AddFilterInput, {
             value: includeFilterManager.newFilter,
             onChange: includeFilterManager.setNewFilter,
@@ -201,9 +205,11 @@ function DynamicFilterView({
               includeFilterManager.setNewFilter("");
             },
             placeholder: includeOnlySection.placeholder || "Enter pattern to include...",
-            color: _gameUIColors.buoyColors.success
+            color: _gameUIColors.buoyColors.success,
+            testID: "buoy-filter-include-input"
           })
         }), includeOnlySection.patterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          testID: "buoy-filter-include-scroll",
           style: styles.includeOnlyFiltersContent,
           showsVerticalScrollIndicator: true,
           nestedScrollEnabled: true,
@@ -248,7 +254,11 @@ function DynamicFilterView({
               color: _gameUIColors.buoyColors.primary
             })]
           })
-        }), activePatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        }), activePatterns.size > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView
+        // The active patterns live in their own short scroller, so a
+        // pattern added a moment ago is usually below its fold.
+        , {
+          testID: "buoy-filter-active-scroll",
           style: styles.excludeFiltersContent,
           showsVerticalScrollIndicator: true,
           nestedScrollEnabled: true,
@@ -287,6 +297,9 @@ function DynamicFilterView({
             },
             style: styles.availableKeyItem,
             "sentry-label": "ignore-touchable-opacity",
+            testID: `buoy-filter-available-${item}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Add filter ${item}`,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: styles.availableKeyText,
               numberOfLines: 1,
@@ -344,7 +357,13 @@ function DynamicFilterView({
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: styles.container,
-    children: [renderTabs(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    children: [renderTabs(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView
+    // The filter screen's own scroller. Named because the sections it
+    // holds — including the active-pattern list — run past the bottom of
+    // a docked sheet, so reaching one means scrolling THIS, not the short
+    // nested scroller the pattern happens to sit in.
+    , {
+      testID: "buoy-filter-scroll",
       style: styles.content,
       contentContainerStyle: styles.scrollContent,
       showsVerticalScrollIndicator: false,

package/lib/commonjs/ui/components/EventStepperFooter.js

@@ -53,6 +53,9 @@ const EventStepperFooter = exports.EventStepperFooter = /*#__PURE__*/(0, _react.
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onPrevious,
       disabled: isFirstItem,
+      testID: "tool-stepper-previous",
+      accessibilityRole: "button",
+      accessibilityLabel: "Previous",
       style: [styles.navButton, isNight && styles.nightNavButton, isFirstItem && styles.navButtonDisabled],
       activeOpacity: 0.7,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.ChevronLeft, {
@@ -65,15 +68,20 @@ const EventStepperFooter = exports.EventStepperFooter = /*#__PURE__*/(0, _react.
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.counterContainer,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+        testID: "tool-stepper-counter",
         style: [styles.counterText, isNight && styles.nightCounterText],
         children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
       }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        testID: "tool-stepper-subtitle",
         style: [styles.subtitleText, isNight && styles.nightSubtitleText],
         children: subtitle
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       onPress: onNext,
       disabled: isLastItem,
+      testID: "tool-stepper-next",
+      accessibilityRole: "button",
+      accessibilityLabel: "Next",
       style: [styles.navButton, isNight && styles.nightNavButton, isLastItem && styles.navButtonDisabled],
       activeOpacity: 0.7,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {

package/lib/commonjs/ui/components/FilterComponents.js

@@ -67,13 +67,16 @@ function AddFilterInput({
   onSubmit,
   onCancel,
   placeholder = "Add filter...",
-  color = "#E5E7EB"
+  color = "#E5E7EB",
+  testID = "buoy-filter-input"
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [styles.inputContainer, {
       borderColor: `${color}40`
     }],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      testID: testID,
+      accessibilityLabel: placeholder,
       value: value,
       onChangeText: onChange,
       onSubmitEditing: onSubmit,
@@ -92,6 +95,9 @@ function AddFilterInput({
       style: styles.inputButtons,
       children: [value.trim() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onSubmit,
+        testID: `${testID}-add`,
+        accessibilityLabel: "Add filter",
+        accessibilityRole: "button",
         style: [styles.inlineAddButton, {
           backgroundColor: `${color}15`,
           borderColor: `${color}40`
@@ -104,6 +110,9 @@ function AddFilterInput({
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onCancel,
+        testID: `${testID}-cancel`,
+        accessibilityLabel: "Cancel adding filter",
+        accessibilityRole: "button",
         style: styles.cancelButton,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
           size: 16,
@@ -119,13 +128,17 @@ function AddFilterInput({
 function AddFilterButton({
   onPress,
   color = "#E5E7EB",
-  label = "Add Filter"
+  label = "Add Filter",
+  testID = "buoy-filter-add-open"
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     style: [styles.addButton, {
       borderColor: `${color}40`
     }],
     onPress: onPress,
+    testID: testID,
+    accessibilityLabel: label,
+    accessibilityRole: "button",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Plus, {
       size: 14,
       color: color
@@ -154,6 +167,9 @@ function FilterList({
       style: styles.filterItemRow,
       onPress: () => onRemoveFilter?.(filter),
       activeOpacity: 0.8,
+      testID: `buoy-filter-active-${filter}`,
+      accessibilityLabel: `Remove filter ${filter}`,
+      accessibilityRole: "button",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.filterItemText, {
           color

package/lib/commonjs/ui/components/ModalHeader.js

@@ -94,7 +94,8 @@ function Content({
   subtitle,
   children,
   centered,
-  noMargin
+  noMargin,
+  testID
 }) {
   if (children) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -107,10 +108,12 @@ function Content({
     children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.headerTitle, centered && styles.headerTitleCentered],
       numberOfLines: 1,
+      testID: testID,
       children: title
     }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.headerSubtitle, centered && styles.headerSubtitleCentered],
       numberOfLines: 1,
+      testID: testID ? `${testID}-subtitle` : undefined,
       children: subtitle
     })]
   });
@@ -138,7 +141,8 @@ function HeaderSearch({
   onChangeText,
   onCancel,
   placeholder = "Search...",
-  autoFocus = true
+  autoFocus = true,
+  testID
 }) {
   const inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
@@ -157,10 +161,15 @@ function HeaderSearch({
       value: value,
       onChangeText: onChangeText,
       autoCorrect: false,
-      autoCapitalize: "none"
+      autoCapitalize: "none",
+      testID: testID,
+      accessibilityLabel: placeholder
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onCancel,
       style: styles.searchCancelButton,
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear search",
+      testID: testID ? `${testID}-clear` : undefined,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
         size: 12,
         color: _nightTheme.night.color.textSecondary

package/lib/commonjs/ui/components/PowerToggleButton.js

@@ -32,6 +32,7 @@ function PowerToggleButton({
   onToggle,
   size = "medium",
   accessibilityLabel,
+  testID,
   disabled = false
 }) {
   const buttonSize = size === "small" ? 28 : 32;
@@ -40,6 +41,7 @@ function PowerToggleButton({
     onPress: onToggle,
     disabled: disabled,
     accessibilityLabel: accessibilityLabel,
+    testID: testID,
     accessibilityRole: "button",
     style: [styles.button, {
       width: buttonSize,

package/lib/commonjs/ui/components/SearchBar.js

@@ -22,6 +22,7 @@ function SearchBar({
   containerStyle,
   autoFocus = false,
   onSubmitEditing,
+  testID,
   returnKeyType
 }) {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
@@ -79,10 +80,14 @@ function SearchBar({
         autoCapitalize: "none",
         autoCorrect: false,
         onSubmitEditing: onSubmitEditing,
-        returnKeyType: returnKeyType
+        returnKeyType: returnKeyType,
+        testID: testID
       }), value.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: handleClear,
         style: styles.clearButton,
+        testID: testID ? `${testID}-clear` : undefined,
+        accessibilityLabel: "Clear search",
+        accessibilityRole: "button",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
           size: 14,
           color: _index2.gameUIColors.secondary

package/lib/commonjs/ui/components/SectionHeader.js

@@ -54,7 +54,8 @@ function Title({
 function Badge({
   count,
   color = _gameUIColors.buoyColors.primary,
-  children
+  children,
+  testID
 }) {
   const backgroundColor = `${color}15`;
   const borderColor = `${color}33`;
@@ -64,6 +65,7 @@ function Badge({
       borderColor
     }],
     children: count !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      testID: testID,
       style: [styles.badgeText, {
         color
       }],

package/lib/commonjs/ui/components/TabSelector.js

@@ -19,24 +19,29 @@ var _jsxRuntime = require("react/jsx-runtime");
 function TabSelector({
   tabs,
   activeTab,
-  onTabChange
+  onTabChange,
+  testIDPrefix
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.container,
     children: tabs.map(tab => {
       const active = activeTab === tab.key;
+      const disabled = !!tab.disabled && !active;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
         "sentry-label": "ignore user interaction",
+        testID: testIDPrefix ? `${testIDPrefix}-${tab.key}` : undefined,
         accessibilityRole: "tab",
         accessibilityState: {
-          selected: active
+          selected: active,
+          disabled
         },
         accessibilityLabel: tab.label,
         accessibilityHint: `View ${tab.label.toLowerCase()}`,
+        disabled: disabled,
         onPress: () => onTabChange(tab.key),
-        style: [styles.tabButton, active && styles.tabButtonActive],
+        style: [styles.tabButton, active && styles.tabButtonActive, disabled && styles.tabButtonDisabled],
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.tabButtonText, active && styles.tabButtonTextActive],
+          style: [styles.tabButtonText, active && styles.tabButtonTextActive, disabled && styles.tabButtonTextDisabled],
           children: tab.label
         }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: styles.underline
@@ -73,6 +78,12 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     color: _nightTheme.night.color.text
   },
+  tabButtonDisabled: {
+    opacity: 0.45
+  },
+  tabButtonTextDisabled: {
+    color: _nightTheme.night.color.textTertiary
+  },
   underline: {
     position: "absolute",
     bottom: 1.5,

package/lib/commonjs/ui/components/WindowControls.js

@@ -112,6 +112,7 @@ function WindowControls({
         style: [styles.dot, styles.closeDot],
         activeOpacity: 0.8,
         accessibilityLabel: "Close modal",
+        testID: "tool-window-close",
         accessibilityRole: "button",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
           size: ICON_SIZE,
@@ -140,10 +141,8 @@ function ExpandableWindowControls({
 }) {
   const isNight = variant === "night";
   const [expanded, setExpanded] = (0, _react.useState)(false);
-  const [triggerLayout, setTriggerLayout] = (0, _react.useState)(null);
   const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
   const dismissTimeout = (0, _react.useRef)(null);
-  const triggerRef = (0, _react.useRef)(null);
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
   const clearDismissTimer = (0, _react.useCallback)(() => {
@@ -152,38 +151,34 @@ function ExpandableWindowControls({
       dismissTimeout.current = null;
     }
   }, []);
+
+  // JS driver on purpose: native-driven animations on this node silently
+  // never run inside JsModal's subtree (the panel sat at opacity 0 forever,
+  // making the expanded controls unreachable). The popover is tiny and the
+  // animation is 150ms — the JS driver is fine.
   const collapse = (0, _react.useCallback)(() => {
     clearDismissTimer();
     _reactNative.Animated.spring(expandAnim, {
       toValue: 0,
       tension: 200,
       friction: 20,
-      useNativeDriver: true
+      useNativeDriver: false
     }).start(() => {
       setExpanded(false);
     });
   }, [expandAnim, clearDismissTimer]);
   const expand = (0, _react.useCallback)(() => {
-    // Measure trigger position on screen before expanding
-    triggerRef.current?.measureInWindow((x, y, width, height) => {
-      setTriggerLayout({
-        x,
-        y,
-        width,
-        height
-      });
-      setExpanded(true);
-      _reactNative.Animated.spring(expandAnim, {
-        toValue: 1,
-        tension: 180,
-        friction: 18,
-        useNativeDriver: true
-      }).start();
+    setExpanded(true);
+    _reactNative.Animated.spring(expandAnim, {
+      toValue: 1,
+      tension: 180,
+      friction: 18,
+      useNativeDriver: false
+    }).start();
 
-      // Auto-dismiss
-      clearDismissTimer();
-      dismissTimeout.current = setTimeout(collapse, AUTO_DISMISS_MS);
-    });
+    // Auto-dismiss
+    clearDismissTimer();
+    dismissTimeout.current = setTimeout(collapse, AUTO_DISMISS_MS);
   }, [expandAnim, collapse, clearDismissTimer]);
   (0, _react.useEffect)(() => {
     return clearDismissTimer;
@@ -202,17 +197,12 @@ function ExpandableWindowControls({
     inputRange: [0, 0.5, 1],
     outputRange: [0, 0.8, 1]
   });
-
-  // Count visible buttons for layout calculation
-  const buttonCount = 1 + (onMinimize ? 1 : 0) + (onToggleMode ? 1 : 0);
-  const expandedWidth = buttonCount * EXPANDED_BUTTON_SIZE + (buttonCount - 1) * EXPANDED_BUTTON_SPACING + EXPANDED_PADDING * 2;
-  const expandedHeight = EXPANDED_BUTTON_SIZE + EXPANDED_PADDING * 2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      ref: triggerRef,
       onPress: expand,
       activeOpacity: 0.7,
       accessibilityLabel: "Open window controls",
+      testID: "tool-window-controls",
       accessibilityRole: "button",
       style: styles.trigger,
       hitSlop: {
@@ -246,71 +236,52 @@ function ExpandableWindowControls({
           })
         })]
       })
-    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
-      transparent: true,
-      visible: true,
-      statusBarTranslucent: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-        onPress: collapse,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.overlay,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-            style: [styles.expandedPanel, {
-              transform: [{
-                scale
-              }],
-              opacity,
-              // Position the expanded panel anchored to trigger's top-right
-              top: triggerLayout ? triggerLayout.y - EXPANDED_PADDING : 0,
-              right: triggerLayout ? Math.max(4,
-              // screen width minus trigger's right edge
-              // We don't need Dimensions here since we use measureInWindow
-              // which gives absolute coords. right = screenWidth - (x + width)
-              0) : 0,
-              // Position using left instead, anchored to trigger's right edge
-              left: triggerLayout ? triggerLayout.x + triggerLayout.width - expandedWidth : undefined
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-                style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
-                children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  onPress: () => handleAction(onMinimize),
-                  style: [styles.expandedButton, isNight ? styles.nightMinimizeButton : styles.minimizeButtonExpanded],
-                  activeOpacity: 0.7,
-                  accessibilityLabel: "Minimize modal",
-                  accessibilityRole: "button",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
-                    size: EXPANDED_ICON_SIZE,
-                    color: isNight ? _nightTheme.night.color.warning : "#7A5A00",
-                    strokeWidth: 2
-                  })
-                }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  onPress: () => handleAction(onToggleMode),
-                  style: [styles.expandedButton, isNight ? styles.nightToggleButton : styles.expandButtonExpanded],
-                  activeOpacity: 0.7,
-                  accessibilityLabel: toggleModeLabel,
-                  accessibilityRole: "button",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
-                    size: EXPANDED_ICON_SIZE,
-                    color: isNight ? _nightTheme.night.color.accent : "#004A1A",
-                    strokeWidth: 2
-                  })
-                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-                  onPress: () => handleAction(onClose),
-                  style: [styles.expandedButton, isNight ? styles.nightCloseButton : styles.closeButtonExpanded],
-                  activeOpacity: 0.7,
-                  accessibilityLabel: "Close modal",
-                  accessibilityRole: "button",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
-                    size: EXPANDED_ICON_SIZE,
-                    color: isNight ? _nightTheme.night.color.danger : "#4A0000",
-                    strokeWidth: 2
-                  })
-                })]
-              })
-            })
+    }), expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.expandedPanelInline, {
+        transform: [{
+          scale
+        }],
+        opacity
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.expandedContainer, isNight && styles.nightExpandedContainer],
+        children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => handleAction(onMinimize),
+          style: [styles.expandedButton, isNight ? styles.nightMinimizeButton : styles.minimizeButtonExpanded],
+          activeOpacity: 0.7,
+          accessibilityLabel: "Minimize modal",
+          testID: "tool-window-minimize",
+          accessibilityRole: "button",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Minus, {
+            size: EXPANDED_ICON_SIZE,
+            color: isNight ? _nightTheme.night.color.warning : "#7A5A00",
+            strokeWidth: 2
           })
-        })
+        }), onToggleMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => handleAction(onToggleMode),
+          style: [styles.expandedButton, isNight ? styles.nightToggleButton : styles.expandButtonExpanded],
+          activeOpacity: 0.7,
+          accessibilityLabel: toggleModeLabel,
+          testID: "tool-window-mode",
+          accessibilityRole: "button",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ToggleModeIcon, {
+            size: EXPANDED_ICON_SIZE,
+            color: isNight ? _nightTheme.night.color.accent : "#004A1A",
+            strokeWidth: 2
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => handleAction(onClose),
+          style: [styles.expandedButton, isNight ? styles.nightCloseButton : styles.closeButtonExpanded],
+          activeOpacity: 0.7,
+          accessibilityLabel: "Close modal",
+          testID: "tool-window-close",
+          accessibilityRole: "button",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+            size: EXPANDED_ICON_SIZE,
+            color: isNight ? _nightTheme.night.color.danger : "#4A0000",
+            strokeWidth: 2
+          })
+        })]
       })
     })]
   });
@@ -345,11 +316,12 @@ const styles = _reactNative.StyleSheet.create({
   expandDot: {
     backgroundColor: COLORS.toggleMode
   },
-  overlay: {
-    flex: 1
-  },
-  expandedPanel: {
+  // Anchored to the windowControlsContainer (absolute top-right of the
+  // modal chrome); grows leftward/downward over the header.
+  expandedPanelInline: {
     position: "absolute",
+    top: -EXPANDED_PADDING,
+    right: -EXPANDED_PADDING,
     zIndex: 9999
   },
   expandedContainer: {

package/lib/commonjs/ui/gameUI/constants/gameUIColors.js

@@ -206,13 +206,17 @@ const buoyColors = exports.buoyColors = {
   // Red
   info: "#00B8E6" // Cyan for info/devices
 };
-// Fixed dial colors for cyberpunk theme
+/**
+ * LEGACY copy of the dial palette — the source of truth is `dialColors` in
+ * @buoy-gg/floating-tools-core (`src/dial.ts`); keep the two in sync.
+ * Values mirror the night theme (see `ui/night/nightTheme.ts`).
+ */
 const dialColors = exports.dialColors = {
-  dialBackground: gameUIColors.pureBlack,
-  dialGradient1: `${gameUIColors.info}10`,
-  dialGradient2: `${gameUIColors.info}08`,
-  dialGradient3: `${gameUIColors.info}15`,
-  dialBorder: `${gameUIColors.info}40`,
-  dialShadow: gameUIColors.info,
-  dialGridLine: `${gameUIColors.info}26`
+  dialBackground: "#050505",
+  dialGradient1: "rgba(255, 255, 255, 0.05)",
+  dialGradient2: "rgba(255, 255, 255, 0.03)",
+  dialGradient3: "rgba(255, 255, 255, 0.06)",
+  dialBorder: "rgba(255, 255, 255, 0.12)",
+  dialShadow: "#000000",
+  dialGridLine: "rgba(255, 255, 255, 0.08)"
 };

package/lib/module/JsModal.js

@@ -494,6 +494,16 @@ const JsModalComponent = ({
     }
   }, []);
 
+  // Parents routinely pass an inline `onModeChange` (a new identity every
+  // render). The persisted-state load below is mount/key-scoped — if the
+  // callback identity re-triggered it, every parent re-render would reload
+  // the OLD persisted mode and stomp a live toggleMode() before the 500ms
+  // save debounce could write the new one (mode flipped to floating, then
+  // snapped back ~50ms later). So the callback rides in a ref instead of
+  // the dependency list.
+  const onModeChangeRef = useRef(onModeChange);
+  onModeChangeRef.current = onModeChange;
+
   // Load persisted state on mount
   useEffect(() => {
     if (!enablePersistence || !persistenceKey) {
@@ -508,7 +518,7 @@ const JsModalComponent = ({
         if (savedState.mode) {
           setMode(savedState.mode);
           // Notify parent of loaded mode
-          onModeChange?.(savedState.mode);
+          onModeChangeRef.current?.(savedState.mode);
         }
 
         // Restore bottom sheet height
@@ -535,7 +545,7 @@ const JsModalComponent = ({
     return () => {
       mounted = false;
     };
-  }, [persistenceKey, enablePersistence, onModeChange, animatedBottomPosition, animatedFloatingHeight, animatedWidth, floatingPosition]);
+  }, [persistenceKey, enablePersistence, animatedBottomPosition, animatedFloatingHeight, animatedWidth, floatingPosition]);
 
   // Cleanup on unmount
   useEffect(() => {

package/lib/module/dataViewer/DataTreeActionDock.js

@@ -82,6 +82,7 @@ function Tile({
   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

package/lib/module/dataViewer/DataViewer.js

@@ -27,7 +27,8 @@ export const DataViewer = ({
   onRequestInlineEdit,
   inlineEditPath,
   renderInlineEditor,
-  selectPath
+  selectPath,
+  testIDPrefix
 }) => {
   const [activeFilter, setActiveFilter] = useState(null);
 
@@ -109,7 +110,8 @@ export const DataViewer = ({
         maxDepth: maxDepth,
         rawMode: rawMode,
         initialExpanded: initialExpanded,
-        disableCopy: disableCopy
+        disableCopy: disableCopy,
+        testIDPrefix: testIDPrefix
       });
     }
 
@@ -125,7 +127,8 @@ export const DataViewer = ({
       onRequestInlineEdit: onRequestInlineEdit,
       inlineEditPath: inlineEditPath,
       renderInlineEditor: renderInlineEditor,
-      selectPath: selectPath
+      selectPath: selectPath,
+      testIDPrefix: testIDPrefix
     });
   };
   return /*#__PURE__*/_jsxs(View, {