@buoy-gg/shared-ui 7.0.30 → 7.0.32

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

@@ -12,6 +12,7 @@ var _reactNative = require("react-native");
 var _react = require("react");
 var _index = require("../../icons/index.js");
 var _nightTheme = require("../night/nightTheme.js");
+var _windowDrag = require("./windowDrag.js");
 var _jsxRuntime = require("react/jsx-runtime");
 // Base ModalHeader container component
 // Note: onClose and onMinimize are now handled by WindowControls in JsModal
@@ -19,8 +20,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ModalHeader({
   children
 }) {
+  // Tagged as a window-drag region for Buoy Desktop (see ./windowDrag): on
+  // the desktop dashboard this header is the top edge of a frameless window,
+  // so it moves the app like a title bar. Inert everywhere else.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.headerContainer,
+    ..._windowDrag.windowDragProps,
     children: children
   });
 }
@@ -190,10 +195,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/commonjs/ui/components/index.js

@@ -339,17 +339,30 @@ Object.defineProperty(exports, "WindowControls", {
     return _WindowControls.WindowControls;
   }
 });
+Object.defineProperty(exports, "noWindowDragProps", {
+  enumerable: true,
+  get: function () {
+    return _windowDrag.noWindowDragProps;
+  }
+});
 Object.defineProperty(exports, "setExpandableWindowControls", {
   enumerable: true,
   get: function () {
     return _WindowControls.setExpandableWindowControls;
   }
 });
+Object.defineProperty(exports, "windowDragProps", {
+  enumerable: true,
+  get: function () {
+    return _windowDrag.windowDragProps;
+  }
+});
 var _BackButton = require("./BackButton.js");
 var _ValueTypeBadge = require("./ValueTypeBadge.js");
 var _StorageTypeBadge = require("./StorageTypeBadge.js");
 var _CopyButton = require("./CopyButton.js");
 var _ModalHeader = require("./ModalHeader.js");
+var _windowDrag = require("./windowDrag.js");
 var _ModalHintBanner = require("./ModalHintBanner.js");
 var _ClipboardHintBanner = require("./ClipboardHintBanner.js");
 var _SectionHeader = require("./SectionHeader.js");

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.windowDragProps = exports.noWindowDragProps = void 0;
+/**
+ * Desktop window-drag tagging for tool headers.
+ *
+ * Buoy Desktop runs a FRAMELESS Electron window: nothing but a
+ * `-webkit-app-region: drag` region moves it. The sidebar's own header carries
+ * that duty, but with the sidebar open the content column has no strip of its
+ * own — the TOOL's header is the top edge of the window there, so grabbing it
+ * looked like it should move the app and didn't.
+ *
+ * These spread onto a `View` and mark the region for the desktop stylesheet
+ * (`apps/desktop/src/index.css`, `[data-buoy-window-drag]`). react-native-web
+ * turns `dataSet` into `data-*` attributes; React Native drops the prop on
+ * device, so this is INERT on mobile — the styling that gives it meaning only
+ * exists in the desktop app.
+ *
+ * `dataSet` is a react-native-web extension that RN's own prop types don't
+ * declare; spreading it (rather than passing it inline) is what keeps
+ * TypeScript quiet, and puts the explanation here once instead of a
+ * `@ts-ignore` at every header.
+ *
+ * A drag region SWALLOWS mouse events, so every control inside one has to opt
+ * back out or it stops being clickable. The desktop app does that for itself:
+ * react-native-web renders touchables as featureless `<div>`s, so it finds
+ * them at runtime by their `cursor: pointer` rather than by any selector —
+ * see apps/desktop/src/windowDragRegions.ts. `noWindowDragProps` is here for
+ * a region that must opt out regardless of how it looks.
+ */
+const windowDragProps = exports.windowDragProps = {
+  dataSet: {
+    buoyWindowDrag: "1"
+  }
+};
+
+/** Opt a subtree back out of an enclosing {@link windowDragProps} region. */
+const noWindowDragProps = exports.noWindowDragProps = {
+  dataSet: {
+    buoyNoDrag: "1"
+  }
+};

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