@buoy-gg/shared-ui 7.0.31 → 7.0.33

package/lib/commonjs/JsModal.js

@@ -437,15 +437,19 @@ const JsModalComponent = ({
     return () => clearTimeout(timeoutId);
   }, [mode, panelHeight, dimensions, visible, persistenceKey, enablePersistence, isStateLoaded]);
 
-  // Sync with external height if provided
+  // Seed the external height ONCE. This used to re-run when `isResizing`
+  // flipped, which snapped an externally-controlled sheet back to
+  // initialHeight the moment a drag-resize ended (the release handler had
+  // just written the real height). The host owns the value after the seed;
+  // persistence restore above may overwrite the seed, which is correct.
+  const externalHeightSeeded = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
-    // Height sync effect
-    if (externalAnimatedHeight && !isResizing) {
+    if (externalAnimatedHeight && !externalHeightSeeded.current) {
+      externalHeightSeeded.current = true;
       currentHeightRef.current = initialHeight;
       externalAnimatedHeight.setValue(initialHeight);
-      // Set external height
     }
-  }, [externalAnimatedHeight, initialHeight, isResizing]);
+  }, [externalAnimatedHeight, initialHeight]);
 
   // Update refs when dimensions change
   (0, _react.useEffect)(() => {
@@ -535,11 +539,14 @@ const JsModalComponent = ({
           onModeChangeRef.current?.(savedState.mode);
         }
 
-        // Restore bottom sheet height
+        // Restore bottom sheet height. The external animated height (when a
+        // host passes one) IS the rendered height, so it must be restored
+        // too or a persisted sheet always reopens at initialHeight.
         if (savedState.panelHeight) {
           setPanelHeight(savedState.panelHeight);
           currentHeightRef.current = savedState.panelHeight;
           animatedBottomPosition.setValue(savedState.panelHeight);
+          externalAnimatedHeight?.setValue(savedState.panelHeight);
         }
 
         // Restore floating dimensions and position

package/lib/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-29T17:41:46.184Z
+ * Generated at: 2026-09-02T23:25:39.783Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/storage/devToolsStorageKeys.js

@@ -257,6 +257,18 @@ const devToolsStorageKeys = exports.devToolsStorageKeys = {
     pausedAt: () => `${devToolsStorageKeys.events.root()}_paused_at`,
     /** Copy/export settings */
     copySettings: () => `${devToolsStorageKeys.events.root()}_copy_settings`
+  },
+  /**
+   * Desktop/MCP sync identity
+   */
+  sync: {
+    root: () => `${devToolsStorageKeys.base}_sync`,
+    /**
+     * The per-install id minted the first time this app dials the broker.
+     * It is what makes two devices on the same build register as two
+     * devices — see core's deviceIdentity.ts.
+     */
+    deviceId: () => `${devToolsStorageKeys.sync.root()}_device_id`
   }
 };
 

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

@@ -9,11 +9,13 @@ exports.NoResultsEmptyState = NoResultsEmptyState;
 exports.NoSearchResultsEmptyState = NoSearchResultsEmptyState;
 var _reactNative = require("react-native");
 var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _index = require("../otto/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable empty state component for consistent empty/no-data displays
  */
 function EmptyState({
+  otto,
   title,
   description,
   icon: Icon,
@@ -28,13 +30,19 @@ function EmptyState({
     style: containerStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.content,
-      children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [otto ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.iconContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Otto, {
+          state: otto,
+          pixelSize: Math.max(2, Math.round(iconSize / 16))
+        })
+      }) : Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.iconContainer,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
           size: iconSize,
           color: iconColor
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: styles.title,
         children: title
       }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {

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
   });
 }

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolEmptyState = ToolEmptyState;
+exports.resolveListEmptyState = resolveListEmptyState;
+var _reactNative = require("react-native");
+var _index = require("../otto/index.js");
+var _nightTheme = require("../night/nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * The one "nothing here" panel, for every tool that shows a list.
+ *
+ * WHY THIS EXISTS
+ *
+ * Every capture tool — network, events, highlight-updates, storage, zustand,
+ * redux, jotai, console — renders the same panel with the same four causes and
+ * different nouns. Written out per tool, that produced four copies of the same
+ * layout (each of which had to be re-inset by hand the first time a sentence
+ * was longer than "No events yet"), and four independent guesses at the
+ * PRECEDENCE between those causes. The guesses disagreed, and the disagreements
+ * were bugs:
+ *
+ *   - A search that matched nothing showed "Enable tracking to start
+ *     capturing" — pointing at a toggle that was already on.
+ *   - Turning every source chip off showed "Events will appear here as they
+ *     occur" — inviting you to go generate events that were already in the
+ *     store, behind your own filter.
+ *   - Typing into a search box while the store was empty produced no
+ *     acknowledgement of the query at all, which reads as a dead search box.
+ *
+ * So the precedence lives here, once, and each tool supplies only what is
+ * genuinely its own: the noun, and what "switched on but waiting" looks like
+ * for it (network fishes, events listens, the highlighter stares).
+ *
+ * SPLIT IN TWO ON PURPOSE
+ *
+ * `resolveListEmptyState` is a pure function returning `{ otto, title,
+ * message }`, and `ToolEmptyState` renders that object. Tools with a cause
+ * nobody else has — storage's "no issues found" (which is a PASS, not a
+ * failure), zustand's unregistered store — resolve the common cases and
+ * substitute their own, or skip the resolver and hand the shell a literal.
+ * Adding a mascot to every tool at once is then one edit in this file, which is
+ * also what makes the Flutter and Swift ports one component to mirror instead
+ * of eight.
+ */
+
+/** What a "nothing here" panel says. */
+
+/**
+ * The panel itself: Otto, a heading, a sentence. Nothing else — this only ever
+ * renders where the alternative is a blank body, so it has no actions and no
+ * decoration to compete with the list it stands in for.
+ */
+function ToolEmptyState({
+  otto,
+  title,
+  message,
+  testID,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    testID: testID,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Otto, {
+      state: otto,
+      pixelSize: 2
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.title,
+      testID: testID ? `${testID}-title` : undefined,
+      numberOfLines: 2,
+      children: title
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.message,
+      testID: testID ? `${testID}-text` : undefined,
+      children: message
+    })]
+  });
+}
+/**
+ * Which "nothing here" this is, in the order the facts answer the question.
+ *
+ * A typed query first (see `search`), then the user's filters, then the
+ * capture switch, then the honest "nothing yet".
+ */
+function resolveListEmptyState(facts) {
+  const {
+    subject,
+    verb = "captured",
+    search,
+    total = 0,
+    capturing,
+    waiting,
+    paused,
+    blocked
+  } = facts;
+  const term = (search ?? "").trim();
+  if (term) {
+    return {
+      otto: "sad",
+      // The query goes in the HEADING because checking what you typed is the
+      // first thing you do; the body names whichever blocker is in the way.
+      title: `No results for “${term}”`,
+      message: blocked ?? (total > 0 ? `None of the ${total} ${verb} ${subject} match. Clear the search to see them.` : capturing === false ? `Nothing is ${verb} to search — capture is off. Turn it on to start.` : `Nothing has been ${verb} yet, so there is nothing to match.`)
+    };
+  }
+  if (blocked) {
+    return {
+      otto: "filtering",
+      title: "Filtered Out",
+      message: blocked
+    };
+  }
+  if (total > 0) {
+    return {
+      otto: "filtering",
+      title: "Filtered Out",
+      message: `${total} ${verb} ${subject} ${total === 1 ? "is" : "are"} hidden by the active filters.`
+    };
+  }
+  if (capturing === false) {
+    return {
+      otto: paused?.otto ?? "paused",
+      title: paused?.title ?? "Not capturing",
+      message: paused?.message ?? "Capture is off. Turn it on to start."
+    };
+  }
+  return waiting;
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    alignItems: "center",
+    paddingVertical: 40,
+    // The generated sentences are full sentences. Every tool that hand-rolled
+    // this panel shipped without an inset and had it run to both edges of the
+    // sheet the first time the copy grew past a few words.
+    paddingHorizontal: 24
+  },
+  title: {
+    color: _nightTheme.night.color.text,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6,
+    textAlign: "center"
+  },
+  message: {
+    color: _nightTheme.night.color.textTertiary,
+    fontSize: 12,
+    textAlign: "center",
+    lineHeight: 17
+  }
+});

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

@@ -74,7 +74,8 @@ function WindowControls({
   onMinimize,
   onToggleMode,
   mode,
-  variant = "night"
+  variant = "night",
+  defaultExpanded
 }) {
   // Show action-based icon: what will happen when clicked
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
@@ -129,7 +130,8 @@ function WindowControls({
     onMinimize: onMinimize,
     onToggleMode: onToggleMode,
     mode: mode,
-    variant: variant
+    variant: variant,
+    defaultExpanded: defaultExpanded
   });
 }
 function ExpandableWindowControls({
@@ -137,11 +139,12 @@ function ExpandableWindowControls({
   onMinimize,
   onToggleMode,
   mode,
-  variant = "night"
+  variant = "night",
+  defaultExpanded = false
 }) {
   const isNight = variant === "night";
-  const [expanded, setExpanded] = (0, _react.useState)(false);
-  const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const [expanded, setExpanded] = (0, _react.useState)(defaultExpanded);
+  const expandAnim = (0, _react.useRef)(new _reactNative.Animated.Value(defaultExpanded ? 1 : 0)).current;
   const dismissTimeout = (0, _react.useRef)(null);
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";

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

@@ -303,6 +303,12 @@ Object.defineProperty(exports, "ToolButton", {
     return _ToolButton.ToolButton;
   }
 });
+Object.defineProperty(exports, "ToolEmptyState", {
+  enumerable: true,
+  get: function () {
+    return _ToolEmptyState.ToolEmptyState;
+  }
+});
 Object.defineProperty(exports, "ToolbarClearButton", {
   enumerable: true,
   get: function () {
@@ -339,17 +345,36 @@ Object.defineProperty(exports, "WindowControls", {
     return _WindowControls.WindowControls;
   }
 });
+Object.defineProperty(exports, "noWindowDragProps", {
+  enumerable: true,
+  get: function () {
+    return _windowDrag.noWindowDragProps;
+  }
+});
+Object.defineProperty(exports, "resolveListEmptyState", {
+  enumerable: true,
+  get: function () {
+    return _ToolEmptyState.resolveListEmptyState;
+  }
+});
 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");
@@ -365,6 +390,7 @@ var _CompactRow = require("./CompactRow.js");
 var _DevToolsCard = require("./DevToolsCard.js");
 var _HeaderSearchButton = require("./HeaderSearchButton.js");
 var _EmptyState = require("./EmptyState.js");
+var _ToolEmptyState = require("./ToolEmptyState.js");
 var _StatusIndicator = require("./StatusIndicator.js");
 var _TimeDisplay = require("./TimeDisplay.js");
 var _DetailView = require("./DetailView.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/commonjs/ui/index.js

@@ -56,4 +56,16 @@ Object.keys(_index3).forEach(function (key) {
       return _index3[key];
     }
   });
+});
+var _index4 = require("./otto/index.js");
+Object.keys(_index4).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index4[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index4[key];
+    }
+  });
 });