@buoy-gg/shared-ui 7.0.27 → 7.0.29

package/lib/module/ui/components/CopyButton.js

@@ -184,10 +184,10 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       onPress: copyState === "idle" || !isPro ? handlePress : undefined,
       activeOpacity: 0.7,
       hitSlop: {
-        top: 8,
-        bottom: 8,
-        left: 8,
-        right: 8
+        top: 4,
+        bottom: 4,
+        left: 4,
+        right: 4
       },
       accessibilityLabel: copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
       accessibilityRole: "button",
@@ -212,6 +212,8 @@ const styles = StyleSheet.create({
     padding: 4,
     justifyContent: "center",
     alignItems: "center",
+    alignSelf: "flex-start",
+    overflow: "hidden",
     // Only relevant when a `label` is present; a bare icon button has one
     // child, so the row direction and gap cost it nothing.
     flexDirection: "row",
@@ -259,7 +261,8 @@ export const ActionCopyButton = /*#__PURE__*/memo(function ActionCopyButton(prop
 export const ToolbarClearButton = /*#__PURE__*/memo(function ToolbarClearButton({
   onPress,
   disabled = false,
-  buttonStyle
+  buttonStyle,
+  testID
 }) {
   return /*#__PURE__*/_jsx(TouchableOpacity, {
     onPress: onPress,
@@ -271,6 +274,7 @@ export const ToolbarClearButton = /*#__PURE__*/memo(function ToolbarClearButton(
       left: 8,
       right: 8
     },
+    testID: testID,
     accessibilityLabel: "Clear",
     accessibilityRole: "button",
     children: /*#__PURE__*/_jsx(Trash2, {

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

@@ -44,7 +44,8 @@ export function DevToolsCard({
   activeOpacity = 0.8,
   style,
   contentStyle,
-  testID
+  testID,
+  accessibilityLabel
 }) {
   const isInteractive = !!onPress || !!onLongPress;
 
@@ -53,6 +54,7 @@ export function DevToolsCard({
     return /*#__PURE__*/_jsx(View, {
       style: [styles.wrapper, style],
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: /*#__PURE__*/_jsx(View, {
         style: [styles.card, isSelected && styles.selectedCard, contentStyle],
         children: children
@@ -70,6 +72,7 @@ export function DevToolsCard({
       activeOpacity: activeOpacity,
       disabled: disabled,
       testID: testID,
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

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

@@ -36,7 +36,9 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
   },
   style,
   enabled = true,
-  maxOverflowX = 0
+  maxOverflowX = 0,
+  testID,
+  accessibilityLabel
 }) {
   const isDraggingRef = useRef(false);
   const dragDistanceRef = useRef(0);
@@ -186,6 +188,8 @@ export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
   }, [position]);
   return /*#__PURE__*/_jsx(View, {
     style: style,
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
     ...panResponder.panHandlers,
     children: children
   });

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

@@ -103,6 +103,9 @@ export function DynamicFilterView({
           const countIsZero = hasCount && option.count === 0;
           const showLabel = section.type !== "method" || option.icon;
           return /*#__PURE__*/_jsxs(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__*/_jsx(option.icon, {
@@ -187,7 +190,8 @@ export function DynamicFilterView({
           children: !includeFilterManager.showAddInput ? /*#__PURE__*/_jsx(AddFilterButton, {
             onPress: () => includeFilterManager.setShowAddInput(true),
             color: buoyColors.success,
-            label: "Add include pattern"
+            label: "Add include pattern",
+            testID: "buoy-filter-include-add-open"
           }) : /*#__PURE__*/_jsx(AddFilterInput, {
             value: includeFilterManager.newFilter,
             onChange: includeFilterManager.setNewFilter,
@@ -197,9 +201,11 @@ export function DynamicFilterView({
               includeFilterManager.setNewFilter("");
             },
             placeholder: includeOnlySection.placeholder || "Enter pattern to include...",
-            color: buoyColors.success
+            color: buoyColors.success,
+            testID: "buoy-filter-include-input"
           })
         }), includeOnlySection.patterns.size > 0 && /*#__PURE__*/_jsx(ScrollView, {
+          testID: "buoy-filter-include-scroll",
           style: styles.includeOnlyFiltersContent,
           showsVerticalScrollIndicator: true,
           nestedScrollEnabled: true,
@@ -244,7 +250,11 @@ export function DynamicFilterView({
               color: buoyColors.primary
             })]
           })
-        }), activePatterns.size > 0 && /*#__PURE__*/_jsx(ScrollView, {
+        }), activePatterns.size > 0 && /*#__PURE__*/_jsx(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,
@@ -283,6 +293,9 @@ export function DynamicFilterView({
             },
             style: styles.availableKeyItem,
             "sentry-label": "ignore-touchable-opacity",
+            testID: `buoy-filter-available-${item}`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Add filter ${item}`,
             children: [/*#__PURE__*/_jsx(Text, {
               style: styles.availableKeyText,
               numberOfLines: 1,
@@ -340,7 +353,13 @@ export function DynamicFilterView({
   };
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
-    children: [renderTabs(), /*#__PURE__*/_jsx(ScrollView, {
+    children: [renderTabs(), /*#__PURE__*/_jsx(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/module/ui/components/EventStepperFooter.js

@@ -48,6 +48,9 @@ export const EventStepperFooter = /*#__PURE__*/memo(function EventStepperFooter(
     children: [/*#__PURE__*/_jsxs(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__*/_jsx(ChevronLeft, {
@@ -60,15 +63,20 @@ export const EventStepperFooter = /*#__PURE__*/memo(function EventStepperFooter(
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.counterContainer,
       children: [/*#__PURE__*/_jsxs(Text, {
+        testID: "tool-stepper-counter",
         style: [styles.counterText, isNight && styles.nightCounterText],
         children: [itemLabel, " ", currentIndex + 1, " of ", totalItems]
       }), subtitle && /*#__PURE__*/_jsx(Text, {
+        testID: "tool-stepper-subtitle",
         style: [styles.subtitleText, isNight && styles.nightSubtitleText],
         children: subtitle
       })]
     }), /*#__PURE__*/_jsxs(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__*/_jsx(Text, {

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

@@ -59,13 +59,16 @@ export function AddFilterInput({
   onSubmit,
   onCancel,
   placeholder = "Add filter...",
-  color = "#E5E7EB"
+  color = "#E5E7EB",
+  testID = "buoy-filter-input"
 }) {
   return /*#__PURE__*/_jsxs(View, {
     style: [styles.inputContainer, {
       borderColor: `${color}40`
     }],
     children: [/*#__PURE__*/_jsx(TextInput, {
+      testID: testID,
+      accessibilityLabel: placeholder,
       value: value,
       onChangeText: onChange,
       onSubmitEditing: onSubmit,
@@ -84,6 +87,9 @@ export function AddFilterInput({
       style: styles.inputButtons,
       children: [value.trim() && /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onSubmit,
+        testID: `${testID}-add`,
+        accessibilityLabel: "Add filter",
+        accessibilityRole: "button",
         style: [styles.inlineAddButton, {
           backgroundColor: `${color}15`,
           borderColor: `${color}40`
@@ -96,6 +102,9 @@ export function AddFilterInput({
         })
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onCancel,
+        testID: `${testID}-cancel`,
+        accessibilityLabel: "Cancel adding filter",
+        accessibilityRole: "button",
         style: styles.cancelButton,
         children: /*#__PURE__*/_jsx(X, {
           size: 16,
@@ -111,13 +120,17 @@ export function AddFilterInput({
 export function AddFilterButton({
   onPress,
   color = "#E5E7EB",
-  label = "Add Filter"
+  label = "Add Filter",
+  testID = "buoy-filter-add-open"
 }) {
   return /*#__PURE__*/_jsxs(TouchableOpacity, {
     style: [styles.addButton, {
       borderColor: `${color}40`
     }],
     onPress: onPress,
+    testID: testID,
+    accessibilityLabel: label,
+    accessibilityRole: "button",
     children: [/*#__PURE__*/_jsx(Plus, {
       size: 14,
       color: color
@@ -146,6 +159,9 @@ export function FilterList({
       style: styles.filterItemRow,
       onPress: () => onRemoveFilter?.(filter),
       activeOpacity: 0.8,
+      testID: `buoy-filter-active-${filter}`,
+      accessibilityLabel: `Remove filter ${filter}`,
+      accessibilityRole: "button",
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.filterItemText, {
           color

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

@@ -35,6 +35,9 @@ export function Navigation({
       }), /*#__PURE__*/_jsx(TouchableOpacity, {
         onPress: onClose,
         style: styles.navigationButton,
+        testID: "tool-close",
+        accessibilityLabel: "Close",
+        accessibilityRole: "button",
         children: closeIcon || /*#__PURE__*/_jsx(X, {
           size: 20,
           color: night.color.textSecondary
@@ -48,6 +51,9 @@ export function Navigation({
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
         color: night.color.textSecondary
@@ -61,6 +67,9 @@ export function Navigation({
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onBack,
       style: styles.navigationButton,
+      testID: "tool-back",
+      accessibilityLabel: "Back",
+      accessibilityRole: "button",
       children: backIcon || /*#__PURE__*/_jsx(ChevronLeft, {
         size: 20,
         color: night.color.textSecondary
@@ -77,7 +86,8 @@ export function Content({
   subtitle,
   children,
   centered,
-  noMargin
+  noMargin,
+  testID
 }) {
   if (children) {
     return /*#__PURE__*/_jsx(View, {
@@ -90,10 +100,12 @@ export function Content({
     children: [title && /*#__PURE__*/_jsx(Text, {
       style: [styles.headerTitle, centered && styles.headerTitleCentered],
       numberOfLines: 1,
+      testID: testID,
       children: title
     }), subtitle && /*#__PURE__*/_jsx(Text, {
       style: [styles.headerSubtitle, centered && styles.headerSubtitleCentered],
       numberOfLines: 1,
+      testID: testID ? `${testID}-subtitle` : undefined,
       children: subtitle
     })]
   });
@@ -121,7 +133,8 @@ export function HeaderSearch({
   onChangeText,
   onCancel,
   placeholder = "Search...",
-  autoFocus = true
+  autoFocus = true,
+  testID
 }) {
   const inputRef = useRef(null);
   useEffect(() => {
@@ -140,10 +153,15 @@ export function HeaderSearch({
       value: value,
       onChangeText: onChangeText,
       autoCorrect: false,
-      autoCapitalize: "none"
+      autoCapitalize: "none",
+      testID: testID,
+      accessibilityLabel: placeholder
     }), /*#__PURE__*/_jsx(TouchableOpacity, {
       onPress: onCancel,
       style: styles.searchCancelButton,
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear search",
+      testID: testID ? `${testID}-clear` : undefined,
       children: /*#__PURE__*/_jsx(X, {
         size: 12,
         color: night.color.textSecondary
@@ -164,7 +182,10 @@ const styles = 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
@@ -200,7 +221,8 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     gap: 6,
     marginLeft: "auto",
-    marginRight: 4
+    marginRight: 4,
+    flexShrink: 0
   },
   headerContentNoMargin: {
     marginHorizontal: 0

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

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

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

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

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

@@ -50,7 +50,8 @@ function Title({
 function Badge({
   count,
   color = buoyColors.primary,
-  children
+  children,
+  testID
 }) {
   const backgroundColor = `${color}15`;
   const borderColor = `${color}33`;
@@ -60,6 +61,7 @@ function Badge({
       borderColor
     }],
     children: count !== undefined ? /*#__PURE__*/_jsx(Text, {
+      testID: testID,
       style: [styles.badgeText, {
         color
       }],

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

@@ -15,24 +15,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function TabSelector({
   tabs,
   activeTab,
-  onTabChange
+  onTabChange,
+  testIDPrefix
 }) {
   return /*#__PURE__*/_jsx(View, {
     style: styles.container,
     children: tabs.map(tab => {
       const active = activeTab === tab.key;
+      const disabled = !!tab.disabled && !active;
       return /*#__PURE__*/_jsxs(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__*/_jsx(Text, {
-          style: [styles.tabButtonText, active && styles.tabButtonTextActive],
+          style: [styles.tabButtonText, active && styles.tabButtonTextActive, disabled && styles.tabButtonTextDisabled],
           children: tab.label
         }), active ? /*#__PURE__*/_jsx(View, {
           style: styles.underline
@@ -69,6 +74,12 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     color: night.color.text
   },
+  tabButtonDisabled: {
+    opacity: 0.45
+  },
+  tabButtonTextDisabled: {
+    color: night.color.textTertiary
+  },
   underline: {
     position: "absolute",
     bottom: 1.5,