@buoy-gg/shared-ui 7.0.30 → 7.0.31

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

@@ -190,10 +190,13 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     gap: 8,
     minHeight: 32,
-    paddingLeft: 4,
-    // Traffic-light window controls sit absolutely in this corner. Reserve
-    // space so Copy / search / extra actions never paint under them.
-    paddingRight: 56
+    paddingLeft: 4
+    // No right inset: the traffic-light window controls are cleared
+    // VERTICALLY — JsModal's drag-indicator strip owns their band (see
+    // WINDOW_CONTROLS_BAND) — so nothing here has to be pushed sideways to
+    // stay out from under them. `headerActions` already ends 4pt off the
+    // edge, matching the left, and hosts that render this header with no
+    // window controls at all (the desktop inline panels) get no phantom gap.
   },
   navigationButton: {
     padding: 4

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

@@ -14,8 +14,6 @@ function SearchBar({
   onChange,
   onClear,
   placeholder = "Search...",
-  suggestions = [],
-  recentSearches = [],
   showFilters = false,
   onFilterPress,
   style,
@@ -26,30 +24,13 @@ function SearchBar({
   returnKeyType
 }) {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [showSuggestions, setShowSuggestions] = (0, _react.useState)(false);
-  const blurTimeoutRef = (0, _react.useRef)(null);
-
-  // Cleanup timeout on unmount
-  (0, _react.useEffect)(() => {
-    return () => {
-      if (blurTimeoutRef.current) {
-        clearTimeout(blurTimeoutRef.current);
-      }
-    };
-  }, []);
   const handleClear = () => {
     onChange("");
     onClear?.();
   };
-  const handleSuggestionPress = suggestion => {
-    onChange(suggestion);
-    setShowSuggestions(false);
-  };
-  const filteredSuggestions = suggestions.filter(s => s.toLowerCase().includes(value.toLowerCase()));
-  const shouldShowSuggestions = isFocused && (filteredSuggestions.length > 0 || value === "" && recentSearches.length > 0);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [styles.container, containerStyle],
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.searchBar, isFocused && styles.searchBarFocused],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
         size: 16,
@@ -60,22 +41,8 @@ function SearchBar({
         placeholderTextColor: _index2.gameUIColors.tertiary,
         value: value,
         onChangeText: onChange,
-        onFocus: () => {
-          setIsFocused(true);
-          setShowSuggestions(true);
-        },
-        onBlur: () => {
-          setIsFocused(false);
-          // Clear any existing timeout
-          if (blurTimeoutRef.current) {
-            clearTimeout(blurTimeoutRef.current);
-          }
-          // Set new timeout with proper cleanup
-          blurTimeoutRef.current = setTimeout(() => {
-            setShowSuggestions(false);
-            blurTimeoutRef.current = null;
-          }, 200);
-        },
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
         autoFocus: autoFocus,
         autoCapitalize: "none",
         autoCorrect: false,
@@ -100,40 +67,7 @@ function SearchBar({
           color: _index2.gameUIColors.primary
         })
       })]
-    }), shouldShowSuggestions && showSuggestions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.suggestionsContainer,
-      children: [value === "" && recentSearches.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.suggestionsTitle,
-          children: "Recent"
-        }), recentSearches.slice(0, 5).map((search, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.suggestionItem,
-          onPress: () => handleSuggestionPress(search),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Clock, {
-            size: 12,
-            color: _index2.gameUIColors.tertiary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.suggestionText,
-            children: search
-          })]
-        }, index))]
-      }), filteredSuggestions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [value !== "" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.suggestionsTitle,
-          children: "Suggestions"
-        }), filteredSuggestions.slice(0, 5).map((suggestion, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-          style: styles.suggestionItem,
-          onPress: () => handleSuggestionPress(suggestion),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
-            size: 12,
-            color: _index2.gameUIColors.tertiary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.suggestionText,
-            children: suggestion
-          })]
-        }, index))]
-      })]
-    })]
+    })
   });
 }
 SearchBar.Quick = function QuickSearch({
@@ -208,44 +142,6 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 4,
     backgroundColor: _index2.gameUIColors.primary + "20"
   },
-  suggestionsContainer: {
-    position: "absolute",
-    top: "100%",
-    left: 0,
-    right: 0,
-    backgroundColor: _index2.gameUIColors.panel,
-    borderRadius: 8,
-    marginTop: 4,
-    paddingVertical: 4,
-    maxHeight: 200,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  suggestionsTitle: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: _index2.gameUIColors.secondary,
-    textTransform: "uppercase",
-    paddingHorizontal: 12,
-    paddingVertical: 4
-  },
-  suggestionItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    gap: 8
-  },
-  suggestionText: {
-    fontSize: 13,
-    color: _index2.gameUIColors.text
-  },
   withFiltersContainer: {
     position: "relative"
   },

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

@@ -18,12 +18,15 @@ function ToolButton({
   size = "medium",
   disabled = false,
   icon,
-  style
+  style,
+  testID,
+  accessibilityLabel
 }) {
   const palette = VARIANTS[variant];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
     accessibilityRole: "button",
-    accessibilityLabel: label,
+    accessibilityLabel: accessibilityLabel ?? label,
+    testID: testID,
     onPress: onPress,
     disabled: disabled,
     style: [styles.base, size === "small" ? styles.small : styles.medium, {

package/lib/module/JsModal.js

@@ -50,6 +50,16 @@ const FLOATING_HEIGHT = 500;
 const FLOATING_MIN_WIDTH = SCREEN.width * 0.25; // 1/4 of screen width
 const FLOATING_MIN_HEIGHT = 80; // Just a bit more than header height (60px header + 20px content)
 
+/**
+ * Vertical band the absolutely-positioned window controls occupy at the top
+ * right of the chrome: `windowControlsContainer` top 4 + the expandable
+ * trigger's 2pt padding + a 12pt dot + 2 = 20. The drag-indicator strip above
+ * custom header content reserves exactly this, which is what lets a tool's
+ * header row below run the FULL width instead of buying its clearance with a
+ * right inset (that inset read as a hole on the right of every tool's nav).
+ */
+const WINDOW_CONTROLS_BAND = 20;
+
 // ============================================================================
 // STORAGE - Modal state persistence with AsyncStorage
 // ============================================================================
@@ -1572,9 +1582,15 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     backgroundColor: "transparent"
   },
+  /**
+   * With custom header content the pill shares the top band with the window
+   * controls, so the strip claims that band (and centres the pill in it)
+   * rather than the header row below paying for the clearance sideways.
+   */
   dragIndicatorContainerCustom: {
-    paddingTop: 6,
-    paddingBottom: 2,
+    minHeight: WINDOW_CONTROLS_BAND,
+    justifyContent: "center",
+    paddingVertical: 0,
     backgroundColor: "transparent"
   },
   dragIndicator: {

package/lib/module/JsModal.web.js

@@ -485,10 +485,13 @@ const DragIndicator = /*#__PURE__*/memo(function DragIndicator({
       flexDirection: "column",
       alignItems: "center",
       position: "relative",
-      // native dragIndicatorContainer: paddingVertical 8;
-      // custom variant: paddingTop 6, paddingBottom 2
-      paddingTop: hasCustomContent ? 6 : 8,
-      paddingBottom: hasCustomContent ? 2 : 8,
+      // native dragIndicatorContainer: paddingVertical 8; custom variant
+      // claims the 20pt window-controls band (native WINDOW_CONTROLS_BAND)
+      // so the header row below can run the full width.
+      justifyContent: hasCustomContent ? "center" : undefined,
+      minHeight: hasCustomContent ? 20 : undefined,
+      paddingTop: hasCustomContent ? 0 : 8,
+      paddingBottom: hasCustomContent ? 0 : 8,
       backgroundColor: "transparent"
     },
     children: [/*#__PURE__*/_jsx("div", {

package/lib/module/dataViewer/DataTreeActionDock.js

@@ -107,10 +107,12 @@ export function DataTreeActionDock({
   onEdit,
   onSelectPath,
   onEditValue,
-  containersEditable = true
+  containersEditable = true,
+  rootEntriesLocked = false
 }) {
   const actions = treeActionsFor(root, selection, {
-    containersEditable
+    containersEditable,
+    rootEntriesLocked
   });
   const has = selection != null;
   const run = action => {