@buoy-gg/shared-ui 3.0.1 → 3.0.2

package/lib/commonjs/JsModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.JsModal = void 0;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _absoluteFill = require("./utils/absoluteFill.js");
 var _useSafeAreaInsets = require("./hooks/useSafeAreaInsets.js");
 var _index = require("./ui/gameUI/index.js");
 var _index2 = require("./ui/components/index.js");
@@ -1241,7 +1242,7 @@ const JsModalComponent = ({
 // ============================================================================
 const styles = _reactNative.StyleSheet.create({
   fullScreenContainer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     zIndex: 1000
   },
   bottomSheetWrapper: {

package/lib/commonjs/clipboard/clipboard-impl.js

@@ -20,9 +20,17 @@ exports.isClipboardAvailable = exports.clipboardType = exports.clipboardFunction
  * Fallback chain:
  * 1. expo-clipboard
  * 2. @react-native-clipboard/clipboard
- * 3. Graceful failure
+ * 3. Web clipboard API (navigator.clipboard)
+ * 4. Graceful failure
  */
 
+// navigator.clipboard isn't in React Native's TS lib — narrow it manually
+
+function getWebClipboard() {
+  if (typeof navigator === "undefined") return null;
+  const clipboard = navigator.clipboard;
+  return clipboard && typeof clipboard.writeText === "function" ? clipboard : null;
+}
 // Grab module references at load time (top-level try-catch for Metro)
 // Always require both — we decide which actually works at call time
 let _expoClipboard = null;
@@ -67,6 +75,21 @@ async function detect(text) {
       return true;
     } catch {/* rn-clipboard not functional */}
   }
+
+  // 3. Web fallback (react-native-web / desktop dashboard / browsers)
+  const webClipboard = getWebClipboard();
+  if (webClipboard) {
+    try {
+      await webClipboard.writeText(text);
+      _detectedType = "web";
+      _clipboardFn = async t => {
+        await webClipboard.writeText(t);
+        return true;
+      };
+      _detected = true;
+      return true;
+    } catch {/* clipboard permission denied */}
+  }
   _detected = true;
   return false;
 }
@@ -76,7 +99,10 @@ const clipboardType = () => {
 exports.clipboardType = clipboardType;
 const isClipboardAvailable = () => {
   // Before first use, optimistically return true if we have a module ref
-  if (!_detected) return _expoClipboard != null || _rnClipboard != null;
+  // or the web clipboard API is present
+  if (!_detected) {
+    return _expoClipboard != null || _rnClipboard != null || getWebClipboard() != null;
+  }
   return _clipboardFn != null;
 };
 exports.isClipboardAvailable = isClipboardAvailable;

package/lib/commonjs/dataViewer/VirtualizedDataExplorer.js

@@ -726,7 +726,6 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
 const VirtualizedItemComponent = ({
   item,
   onToggleExpanded,
-  data,
   index,
   onSelect,
   isSelected
@@ -790,9 +789,9 @@ const VirtualizedItemComponent = ({
           children: formatValue(item.value, item.valueType)
         })]
       })]
-    }), item.id === "root" && data !== undefined && data !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
-      value: data,
-      size: 16,
+    }), item.value !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+      value: item.value,
+      size: 14,
       buttonStyle: {
         marginLeft: 8,
         marginRight: 8
@@ -877,7 +876,6 @@ const VirtualizedDataExplorer = ({
     item: item,
     index: index,
     onToggleExpanded: toggleExpanded,
-    data: data,
     onSelect: setSelectedIndex,
     isSelected: selectedIndex === index
   });

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-05-28T20:48:12.491Z
+ * Generated at: 2026-06-23T21:16:34.896Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/icons/lucide-icons.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PlusIcon = exports.Plus = exports.PlayIcon = exports.Play = exports.PhoneIcon = exports.Phone = exports.PauseIcon = exports.Pause = exports.PaletteIcon = exports.Palette = exports.NavigationIcon = exports.Navigation = exports.MusicIcon = exports.Music = exports.MinusIcon = exports.Minus = exports.Maximize2Icon = exports.Maximize2 = exports.LockIcon = exports.Lock = exports.LinkIcon = exports.Link = exports.LayersIcon = exports.Layers = exports.KeyIcon = exports.Key = exports.InfoIcon = exports.Info = exports.ImageIcon = exports.Image = exports.HelpCircle = exports.HashIcon = exports.Hash = exports.HardDriveIcon = exports.HardDrive = exports.HandIcon = exports.Hand = exports.GlobeIcon = exports.Globe = exports.GitBranchIcon = exports.GitBranch = exports.FloatWindow = exports.FlaskConicalIcon = exports.FlaskConical = exports.FilterIcon = exports.Filter = exports.FilmIcon = exports.Film = exports.FileTextIcon = exports.FileText = exports.FileJsonIcon = exports.FileJson = exports.FileCodeIcon = exports.FileCode = exports.EyeOffIcon = exports.EyeOff = exports.EyeIcon = exports.Eye = exports.Edit3Icon = exports.Edit3 = exports.DownloadIcon = exports.Download = exports.DockBottom = exports.DatabaseIcon = exports.Database = exports.CopyIcon = exports.Copy = exports.CloudIcon = exports.Cloud = exports.ClockIcon = exports.Clock = exports.ChevronUpIcon = exports.ChevronUp = exports.ChevronRightIcon = exports.ChevronRight = exports.ChevronLeftIcon = exports.ChevronLeft = exports.ChevronDownIcon = exports.ChevronDown = exports.CheckSquareIcon = exports.CheckSquare = exports.CheckIcon = exports.CheckCircleIcon = exports.CheckCircle2Icon = exports.CheckCircle2 = exports.CheckCircle = exports.Check = exports.BugIcon = exports.Bug = exports.BoxIcon = exports.Box = exports.BarChart3Icon = exports.BarChart3 = exports.AlertTriangleIcon = exports.AlertTriangle = exports.AlertOctagon = exports.AlertCircleIcon = exports.AlertCircle = exports.ActivityIcon = exports.Activity = void 0;
-exports.ZapIcon = exports.Zap = exports.XIcon = exports.XCircleIcon = exports.XCircle = exports.X = exports.WifiIcon = exports.Wifi = exports.VolumeIcon = exports.Volume = exports.UsersIcon = exports.Users = exports.UserIcon = exports.User = exports.UploadIcon = exports.Upload = exports.UnlockIcon = exports.Unlock = exports.TriangleAlertIcon = exports.TriangleAlert = exports.TrashIcon = exports.Trash2Icon = exports.Trash2 = exports.Trash = exports.TouchpadIcon = exports.Touchpad = exports.TimerIcon = exports.Timer = exports.TestTube2Icon = exports.TestTube2 = exports.SquareIcon = exports.SquareDashedIcon = exports.SquareDashed = exports.Square = exports.SmartphoneIcon = exports.Smartphone = exports.ShieldIcon = exports.Shield = exports.SettingsIcon = exports.Settings = exports.ServerIcon = exports.Server = exports.SearchIcon = exports.Search = exports.RouteIcon = exports.Route = exports.RefreshCwIcon = exports.RefreshCw = exports.PowerIcon = exports.Power = void 0;
+exports.PlayIcon = exports.Play = exports.PhoneIcon = exports.Phone = exports.PauseIcon = exports.Pause = exports.PaletteIcon = exports.Palette = exports.NavigationIcon = exports.Navigation = exports.MusicIcon = exports.Music = exports.MinusIcon = exports.Minus = exports.Maximize2Icon = exports.Maximize2 = exports.LockIcon = exports.Lock = exports.LinkIcon = exports.Link = exports.LayersIcon = exports.Layers = exports.KeyIcon = exports.Key = exports.InfoIcon = exports.Info = exports.ImageIcon = exports.Image = exports.HomeIcon = exports.Home = exports.HelpCircle = exports.HashIcon = exports.Hash = exports.HardDriveIcon = exports.HardDrive = exports.HandIcon = exports.Hand = exports.GlobeIcon = exports.Globe = exports.GitBranchIcon = exports.GitBranch = exports.FloatWindow = exports.FlaskConicalIcon = exports.FlaskConical = exports.FilterIcon = exports.Filter = exports.FilmIcon = exports.Film = exports.FileTextIcon = exports.FileText = exports.FileJsonIcon = exports.FileJson = exports.FileCodeIcon = exports.FileCode = exports.EyeOffIcon = exports.EyeOff = exports.EyeIcon = exports.Eye = exports.Edit3Icon = exports.Edit3 = exports.DownloadIcon = exports.Download = exports.DockBottom = exports.DatabaseIcon = exports.Database = exports.CopyIcon = exports.Copy = exports.CloudIcon = exports.Cloud = exports.ClockIcon = exports.Clock = exports.ChevronUpIcon = exports.ChevronUp = exports.ChevronRightIcon = exports.ChevronRight = exports.ChevronLeftIcon = exports.ChevronLeft = exports.ChevronDownIcon = exports.ChevronDown = exports.CheckSquareIcon = exports.CheckSquare = exports.CheckIcon = exports.CheckCircleIcon = exports.CheckCircle2Icon = exports.CheckCircle2 = exports.CheckCircle = exports.Check = exports.BugIcon = exports.Bug = exports.BoxIcon = exports.Box = exports.BarChart3Icon = exports.BarChart3 = exports.AlertTriangleIcon = exports.AlertTriangle = exports.AlertOctagon = exports.AlertCircleIcon = exports.AlertCircle = exports.ActivityIcon = exports.Activity = void 0;
+exports.ZapIcon = exports.Zap = exports.XIcon = exports.XCircleIcon = exports.XCircle = exports.X = exports.WifiIcon = exports.Wifi = exports.VolumeIcon = exports.Volume = exports.UsersIcon = exports.Users = exports.UserIcon = exports.User = exports.UploadIcon = exports.Upload = exports.UnlockIcon = exports.Unlock = exports.TriangleAlertIcon = exports.TriangleAlert = exports.TrashIcon = exports.Trash2Icon = exports.Trash2 = exports.Trash = exports.TouchpadIcon = exports.Touchpad = exports.TimerIcon = exports.Timer = exports.TestTube2Icon = exports.TestTube2 = exports.SquareIcon = exports.SquareDashedIcon = exports.SquareDashed = exports.Square = exports.SmartphoneIcon = exports.Smartphone = exports.ShieldIcon = exports.Shield = exports.SettingsIcon = exports.Settings = exports.ServerIcon = exports.Server = exports.SearchIcon = exports.Search = exports.RouteIcon = exports.Route = exports.RefreshCwIcon = exports.RefreshCw = exports.PowerIcon = exports.Power = exports.PlusIcon = exports.Plus = void 0;
 var _reactNative = require("react-native");
 var OriginalIcons = _interopRequireWildcard(require("./lucide-icons-original-full.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -1398,8 +1398,67 @@ const Plus = ({
     strokeWidth: strokeWidth
   })]
 });
+
+// Refresh / reload icon: a smooth 270° ring (open on the right) with a
+// clockwise triangle arrowhead. Built from the buoy icon-editor design
+// (smootharc ring + triangle) using the View-based border trick so it stays
+// crisp at any size. `strokeWidth` is accepted for API compatibility but the
+// proportions are fixed to keep the perfected look.
 exports.Plus = Plus;
 const RefreshCw = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth: _strokeWidth = 2,
+  ...props
+}) => {
+  const RING_RADIUS = 7; // outer radius, centered in the 24x24 viewBox
+  const RING_STROKE = 2.4;
+  const ARROW_SIZE = 5.2;
+  const ARROW_HALF = ARROW_SIZE * 0.577; // equilateral-ish half-width
+  // Arrowhead anchor (from the editor design, mapped into the 0..24 viewBox)
+  const arrowLeft = 12 + 3.162277660168379;
+  const arrowTop = 12 - 2.846049894151541 - ARROW_HALF;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: 12 - RING_RADIUS,
+        top: 12 - RING_RADIUS,
+        width: RING_RADIUS * 2,
+        height: RING_RADIUS * 2,
+        borderRadius: RING_RADIUS,
+        borderWidth: RING_STROKE,
+        borderTopColor: color,
+        borderLeftColor: color,
+        borderBottomColor: color,
+        borderRightColor: "transparent"
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: arrowLeft,
+        top: arrowTop,
+        width: 0,
+        height: 0,
+        borderTopWidth: ARROW_HALF,
+        borderBottomWidth: ARROW_HALF,
+        borderLeftWidth: ARROW_SIZE,
+        borderTopColor: "transparent",
+        borderBottomColor: "transparent",
+        borderLeftColor: color,
+        transform: [{
+          rotate: "45deg"
+        }]
+      }
+    })]
+  });
+};
+exports.RefreshCw = RefreshCw;
+const Home = ({
   size = 24,
   color = "currentColor",
   strokeWidth = 2,
@@ -1410,42 +1469,65 @@ const RefreshCw = ({
   viewBox: "0 0 24 24",
   ...props,
   children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 23,
-    y1: 4,
-    x2: 23,
-    y2: 10,
+    x1: 3,
+    y1: 10,
+    x2: 12,
+    y2: 3,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 23,
-    y1: 10,
-    x2: 17,
+    x1: 12,
+    y1: 3,
+    x2: 21,
     y2: 10,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 1,
-    y1: 20,
-    x2: 1,
-    y2: 14,
+    x1: 5,
+    y1: 9,
+    x2: 5,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-    x1: 1,
-    y1: 14,
-    x2: 7,
-    y2: 14,
+    x1: 19,
+    y1: 9,
+    x2: 19,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, {
-    cx: 12,
-    cy: 12,
-    r: 9,
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 5,
+    y1: 21,
+    x2: 19,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 10,
+    y1: 21,
+    x2: 10,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 10,
+    y1: 15,
+    x2: 14,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 14,
+    y1: 15,
+    x2: 14,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
   })]
 });
-exports.RefreshCw = RefreshCw;
+exports.Home = Home;
+const HomeIcon = exports.HomeIcon = Home;
 const Search = ({
   size = 24,
   color = "currentColor",

package/lib/commonjs/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  absoluteFill: true,
   displayValue: true,
   parseDisplayValue: true,
   getSafeAreaInsets: true,
@@ -143,6 +144,12 @@ Object.defineProperty(exports, "UpgradePrompt", {
     return _index12.UpgradePrompt;
   }
 });
+Object.defineProperty(exports, "absoluteFill", {
+  enumerable: true,
+  get: function () {
+    return _index3.absoluteFill;
+  }
+});
 Object.defineProperty(exports, "buoyColors", {
   enumerable: true,
   get: function () {

package/lib/commonjs/license/DeviceLimitModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeviceLimitModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../ui/gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../icons/lucide-icons.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -272,7 +273,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   modal: {

package/lib/commonjs/license/LicenseEntryModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LicenseEntryModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../ui/gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../icons/lucide-icons.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -199,7 +200,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   modal: {

package/lib/commonjs/license/ManageDevicesModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ManageDevicesModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../utils/absoluteFill.js");
 var _gameUIColors = require("../ui/gameUI/constants/gameUIColors.js");
 var _lucideIcons = require("../icons/lucide-icons.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -343,7 +344,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.7)"
   },
   modal: {

package/lib/commonjs/stores/BaseEventStore.js

@@ -62,6 +62,8 @@ var _subscriberCountNotifier = require("../utils/subscriberCountNotifier.js");
 class BaseEventStore extends _subscribable.Subscribable {
   events = [];
   arrayListeners = new Set();
+  captureSuppressed = false;
+  clearListeners = new Set();
   constructor(options) {
     super();
     this.maxEvents = options.maxEvents ?? 500;
@@ -95,7 +97,7 @@ class BaseEventStore extends _subscribable.Subscribable {
    * Starts capturing if no one was subscribed.
    */
   onSubscribe() {
-    if (this.getTotalSubscriberCount() === 1) {
+    if (this.getTotalSubscriberCount() === 1 && !this.captureSuppressed) {
       this.startCapturing();
     }
     (0, _subscriberCountNotifier.notifySubscriberCountChange)(this.storeName);
@@ -135,7 +137,7 @@ class BaseEventStore extends _subscribable.Subscribable {
     this.arrayListeners.add(listener);
 
     // Start capturing if this is the first subscriber
-    if (wasEmpty) {
+    if (wasEmpty && !this.captureSuppressed) {
       this.startCapturing();
     }
 
@@ -226,6 +228,74 @@ class BaseEventStore extends _subscribable.Subscribable {
   clearEvents() {
     this.events = [];
     this.notifyArrayListeners();
+    this.clearListeners.forEach(listener => {
+      try {
+        listener();
+      } catch {
+        // Ignore listener errors
+      }
+    });
+  }
+
+  /**
+   * Listen for clearEvents() calls. Used in remote mirror mode to forward a
+   * clear performed in the dashboard UI to the synced device.
+   */
+  onClear(listener) {
+    this.clearListeners.add(listener);
+    return () => {
+      this.clearListeners.delete(listener);
+    };
+  }
+
+  // ===========================================================================
+  // REMOTE MIRROR MODE
+  // ===========================================================================
+
+  /**
+   * Suppress the auto start/stop capture lifecycle. Use when this store acts
+   * as a mirror of a remote device's events (e.g. the desktop dashboard):
+   * events arrive via replaceEvents() and the local interceptors must never
+   * start — on the dashboard they would capture the dashboard's own traffic.
+   */
+  disableCapture() {
+    this.captureSuppressed = true;
+    if (this.isCapturing()) {
+      this.stopCapturing();
+    }
+  }
+
+  /**
+   * Replace the entire event list and notify array listeners. Used in remote
+   * mirror mode where full snapshots arrive from a synced device.
+   */
+  replaceEvents(events) {
+    this.events = this.dedupeById(events).slice(0, this.maxEvents);
+    this.notifyArrayListeners();
+  }
+
+  /**
+   * Drop events that share an `id` with an earlier event, keeping the first
+   * (newest, since events are newest-first) occurrence. Remote snapshots can
+   * momentarily carry duplicate ids — e.g. a device's request counter resets
+   * on reload while older events with the same id are still in the buffer —
+   * which makes React list keys (keyed on `id`) collide. Events without an
+   * `id` are passed through untouched.
+   */
+  dedupeById(events) {
+    const seen = new Set();
+    const result = [];
+    for (const event of events) {
+      const id = event?.id;
+      if (id == null) {
+        result.push(event);
+        continue;
+      }
+      if (seen.has(id)) continue;
+      seen.add(id);
+      result.push(event);
+    }
+    return result;
   }
 
   /**

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

@@ -28,77 +28,77 @@ function CompactRow({
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: styles.rowWrapper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
         borderColor: expandedGlowColor || _gameUIColors.buoyColors.primary,
         shadowColor: expandedGlowColor || _gameUIColors.buoyColors.primary
       }]],
-      onPress: onPress,
-      activeOpacity: 0.8,
-      disabled: disabled || !onPress,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.rowContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.statusSection,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.statusDot, {
-              backgroundColor: statusDotColor
-            }]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        onPress: onPress,
+        activeOpacity: 0.8,
+        disabled: disabled || !onPress,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.rowContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.statusSection,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.statusDot, {
+                backgroundColor: statusDotColor
+              }]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.statusInfo,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.statusLabel, {
+                  color: statusDotColor
+                }],
+                numberOfLines: 1,
+                children: statusLabel
+              }), statusSublabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.observerText,
+                numberOfLines: 1,
+                children: statusSublabel
+              }) : null]
+            })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.statusInfo,
+            style: styles.querySection,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.statusLabel, {
-                color: statusDotColor
-              }],
-              numberOfLines: 1,
-              children: statusLabel
-            }), statusSublabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.observerText,
+              style: styles.queryHash,
+              numberOfLines: isExpanded ? undefined : 2,
+              children: primaryText
+            }), !isExpanded && secondaryText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.secondaryText,
               numberOfLines: 1,
-              children: statusSublabel
+              children: secondaryText
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.rightSection,
+            children: [(customBadge || badgeText !== undefined || !isExpanded && bottomRightText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.badgeContainer,
+              children: [customBadge ? customBadge : badgeText !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: [styles.statusBadge, {
+                  color: badgeColor || statusDotColor
+                }],
+                children: badgeText
+              }) : null, !isExpanded && bottomRightText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.bottomRightText,
+                numberOfLines: 1,
+                children: bottomRightText
+              }) : null]
+            }), showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.chevronContainer,
+              children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+                size: 14,
+                color: _gameUIColors.buoyColors.textMuted
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
+                size: 14,
+                color: _gameUIColors.buoyColors.textMuted
+              })
             })]
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.querySection,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.queryHash,
-            numberOfLines: isExpanded ? undefined : 2,
-            children: primaryText
-          }), !isExpanded && secondaryText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: styles.secondaryText,
-            numberOfLines: 1,
-            children: secondaryText
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.rightSection,
-          children: [(customBadge || badgeText !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.badgeContainer,
-            children: customBadge ? customBadge : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.statusBadge, {
-                color: badgeColor || statusDotColor
-              }],
-              children: badgeText
-            })
-          }), showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.chevronContainer,
-            children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
-              size: 14,
-              color: _gameUIColors.buoyColors.textMuted
-            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
-              size: 14,
-              color: _gameUIColors.buoyColors.textMuted
-            })
-          })]
-        })]
+        })
       }), isExpanded && expandedContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: styles.expandedContent,
         children: expandedContent
-      }), !isExpanded && bottomRightText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.bottomRightContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.bottomRightText,
-          children: bottomRightText
-        })
       })]
     })
   });
@@ -200,7 +200,9 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   badgeContainer: {
-    alignItems: "flex-end"
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: 2
   },
   statusBadge: {
     fontSize: 12,
@@ -217,11 +219,6 @@ const styles = _reactNative.StyleSheet.create({
     borderTopColor: _gameUIColors.buoyColors.border + "20",
     marginLeft: 24 // Align with content after status dot
   },
-  bottomRightContainer: {
-    position: "absolute",
-    bottom: 4,
-    right: 8
-  },
   bottomRightText: {
     fontSize: 9,
     color: _gameUIColors.buoyColors.textMuted,

package/lib/commonjs/ui/components/EventHistoryViewer/EventPickerModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EventPickerModal = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
 var _macOSDesignSystemColors = require("../../gameUI/constants/macOSDesignSystemColors.js");
 var _lucideIcons = require("../../../icons/lucide-icons.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -82,13 +83,13 @@ const EventPickerModal = exports.EventPickerModal = /*#__PURE__*/(0, _react.memo
 });
 const styles = _reactNative.StyleSheet.create({
   overlay: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     zIndex: 20,
     justifyContent: "center",
     alignItems: "center"
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0,0,0,0.65)"
   },
   card: {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ExpandableSectionWithModal = ExpandableSectionWithModal;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _absoluteFill = require("../../utils/absoluteFill.js");
 var _useSafeAreaInsets = require("../../hooks/useSafeAreaInsets.js");
 var _index = require("../../icons/index.js");
 var _ExpandableSection = require("./ExpandableSection.js");
@@ -125,7 +126,7 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   backdrop: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   backdropTouchable: {