@buoy-gg/shared-ui 7.0.27 → 7.0.29

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

@@ -48,7 +48,8 @@ function DevToolsCard({
   activeOpacity = 0.8,
   style,
   contentStyle,
-  testID
+  testID,
+  accessibilityLabel
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -57,6 +58,7 @@ function DevToolsCard({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],
         children: children
@@ -74,6 +76,7 @@ function DevToolsCard({
       activeOpacity: activeOpacity,
       disabled: disabled,
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

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

@@ -40,7 +40,9 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
   },
   style,
   enabled = true,
-  maxOverflowX = 0
+  maxOverflowX = 0,
+  testID,
+  accessibilityLabel
 }) {
   const isDraggingRef = (0, _react.useRef)(false);
   const dragDistanceRef = (0, _react.useRef)(0);
@@ -190,6 +192,8 @@ const DraggableHeader = exports.DraggableHeader = /*#__PURE__*/(0, _react.memo)(
   }, [position]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: style,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
     ...panResponder.panHandlers,
     children: children
   });

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

@@ -43,6 +43,9 @@ function Navigation({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
         onPress: onClose,
         style: styles.navigationButton,
+        testID: "tool-close",
+        accessibilityLabel: "Close",
+        accessibilityRole: "button",
         children: closeIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
           size: 20,
           color: _nightTheme.night.color.textSecondary
@@ -56,6 +59,9 @@ function Navigation({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
         size: 20,
         color: _nightTheme.night.color.textSecondary
@@ -69,6 +75,9 @@ function Navigation({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft, {
         size: 20,
         color: _nightTheme.night.color.textSecondary
@@ -85,7 +94,8 @@ function Content({
   subtitle,
   children,
   centered,
-  noMargin
+  noMargin,
+  testID
 }) {
   if (children) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -98,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
     })]
   });
@@ -129,7 +141,8 @@ function HeaderSearch({
   onChangeText,
   onCancel,
   placeholder = "Search...",
-  autoFocus = true
+  autoFocus = true,
+  testID
 }) {
   const inputRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
@@ -148,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
@@ -172,7 +190,10 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     gap: 8,
     minHeight: 32,
-    paddingLeft: 4
+    paddingLeft: 4,
+    // Traffic-light window controls sit absolutely in this corner. Reserve
+    // space so Copy / search / extra actions never paint under them.
+    paddingRight: 56
   },
   navigationButton: {
     padding: 4
@@ -208,7 +229,8 @@ const styles = _reactNative.StyleSheet.create({
     flexDirection: "row",
     gap: 6,
     marginLeft: "auto",
-    marginRight: 4
+    marginRight: 4,
+    flexShrink: 0
   },
   headerContentNoMargin: {
     marginHorizontal: 0

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: {