@buoy-gg/shared-ui 3.0.1 → 3.0.2

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

@@ -13,7 +13,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 // ============================================================================
 // Global expandable setting — controlled via setExpandableWindowControls()
 // ============================================================================
-let _expandableEnabled = true; // Default ON
+
+// The expandable behavior is a touch affordance (big tap targets). On web a
+// mouse clicks the small dots directly, so it's always off there — the
+// setting only applies to native touch platforms.
+const EXPANDABLE_SUPPORTED = _reactNative.Platform.OS !== "web";
+let _expandableEnabled = true; // Default ON (native touch devices)
 
 /**
  * Set whether window controls use the expandable iPad-style behavior.
@@ -73,8 +78,9 @@ function WindowControls({
   const ToggleModeIcon = mode === "floating" ? _index.DockBottom : _index.FloatWindow;
   const toggleModeLabel = mode === "floating" ? "Dock to bottom sheet" : "Make floating window";
 
-  // When expandable is disabled, render original directly-tappable buttons
-  if (!_expandableEnabled) {
+  // When expandable is disabled (or unsupported on this platform), render
+  // original directly-tappable buttons
+  if (!_expandableEnabled || !EXPANDABLE_SUPPORTED) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
       children: [onMinimize && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {

package/lib/commonjs/ui/console/CyberpunkConsoleSection.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CyberpunkConsoleSection = CyberpunkConsoleSection;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _absoluteFill = require("../../utils/absoluteFill.js");
 var _index = require("../../icons/index.js");
 var _index2 = require("../gameUI/index.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -484,31 +485,31 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: "rgba(5, 5, 10, 0.6)" // Darker glass background
   },
   glassLayer1: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(10, 10, 15, 0.7)",
     opacity: 0.8
   },
   glassLayer2: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(15, 15, 25, 0.5)",
     opacity: 0.6,
     top: "20%",
     left: "20%"
   },
   glassLayer3: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(20, 20, 35, 0.3)",
     opacity: 0.4,
     top: "40%",
     left: "40%"
   },
   glassShimmer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     backgroundColor: "rgba(255, 255, 255, 0.03)",
     opacity: 0.6
   },
   glitchOverlayLayer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     borderRadius: 12,
     borderWidth: 1,
     justifyContent: "center",

package/lib/commonjs/ui/console/GalaxyButton.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GalaxyButton = GalaxyButton;
 var _react = require("react");
 var _reactNative = require("react-native");
+var _absoluteFill = require("../../utils/absoluteFill.js");
 var _jsxRuntime = require("react/jsx-runtime");
 const {
   width: screenWidth
@@ -76,7 +77,7 @@ const styles = _reactNative.StyleSheet.create({
     overflow: "hidden"
   },
   starsContainer: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     overflow: "hidden"
   },
   starsLayer: {

package/lib/commonjs/ui/gameUI/components/GameUIStatusHeader.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GameUIStatusHeader = GameUIStatusHeader;
 var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
 var _gameUIColors = require("../constants/gameUIColors.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -82,7 +83,7 @@ const styles = _reactNative.StyleSheet.create({
     overflow: "hidden"
   },
   glow: {
-    ..._reactNative.StyleSheet.absoluteFillObject,
+    ..._absoluteFill.absoluteFill,
     opacity: 0.5
   },
   content: {

package/lib/commonjs/utils/absoluteFill.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.absoluteFill = void 0;
+/**
+ * Spreadable absolute-fill style.
+ *
+ * Replaces `StyleSheet.absoluteFillObject`, which was REMOVED in React Native
+ * 0.85 (returns `undefined` there). Spreading `undefined` is a silent no-op, so
+ * any overlay/backdrop/full-screen Pressable that relied on it collapses to zero
+ * size on RN 0.85+ — invisible and untappable.
+ *
+ * `StyleSheet.absoluteFill` is not a safe replacement for the spread pattern
+ * because its type changed across versions: it's a registered style *number* on
+ * RN <= 0.84 (spreading a number yields `{}`) and a frozen object only on 0.85+.
+ *
+ * This plain object works identically on every RN version, whether spread
+ * (`{ ...absoluteFill }`) or passed directly (`style={absoluteFill}`).
+ */
+const absoluteFill = exports.absoluteFill = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+};

package/lib/commonjs/utils/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Subscribable", {
     return _subscribable.Subscribable;
   }
 });
+Object.defineProperty(exports, "absoluteFill", {
+  enumerable: true,
+  get: function () {
+    return _absoluteFill.absoluteFill;
+  }
+});
 Object.defineProperty(exports, "displayValue", {
   enumerable: true,
   get: function () {
@@ -195,6 +201,7 @@ Object.defineProperty(exports, "useSafeSegments", {
     return _safeExpoRouter.useSafeSegments;
   }
 });
+var _absoluteFill = require("./absoluteFill.js");
 var _displayValue = require("./displayValue.js");
 var _getSafeAreaInsets = require("./getSafeAreaInsets.js");
 var _persistentStorage = require("./persistentStorage.js");

package/lib/module/JsModal.js

@@ -14,6 +14,7 @@
 
 import { useState, useRef, useEffect, useMemo, useCallback, memo, isValidElement, cloneElement } from "react";
 import { View, StyleSheet, TouchableWithoutFeedback, Dimensions, PanResponder, Animated, ScrollView, Text } from "react-native";
+import { absoluteFill } from "./utils/absoluteFill.js";
 import { useSafeAreaInsets } from "./hooks/useSafeAreaInsets.js";
 import { gameUIColors, buoyColors } from "./ui/gameUI/index.js";
 import { DraggableHeader, ModalHintBanner, WindowControls } from "./ui/components/index.js";
@@ -1237,7 +1238,7 @@ const JsModalComponent = ({
 // ============================================================================
 const styles = StyleSheet.create({
   fullScreenContainer: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     zIndex: 1000
   },
   bottomSheetWrapper: {

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

@@ -16,9 +16,17 @@
  * 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;
@@ -63,6 +71,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;
 }
@@ -71,7 +94,10 @@ export const clipboardType = () => {
 };
 export 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;
 };
 export const clipboardFunction = async text => {

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -723,7 +723,6 @@ const useDataFlattening = (data, maxDepth = 10, autoExpandFirstLevel = false) =>
 const VirtualizedItemComponent = ({
   item,
   onToggleExpanded,
-  data,
   index,
   onSelect,
   isSelected
@@ -787,9 +786,9 @@ const VirtualizedItemComponent = ({
           children: formatValue(item.value, item.valueType)
         })]
       })]
-    }), item.id === "root" && data !== undefined && data !== null ? /*#__PURE__*/_jsx(CopyButton, {
-      value: data,
-      size: 16,
+    }), item.value !== undefined ? /*#__PURE__*/_jsx(CopyButton, {
+      value: item.value,
+      size: 14,
       buttonStyle: {
         marginLeft: 8,
         marginRight: 8
@@ -874,7 +873,6 @@ export const VirtualizedDataExplorer = ({
     item: item,
     index: index,
     onToggleExpanded: toggleExpanded,
-    data: data,
     onSelect: setSelectedIndex,
     isSelected: selectedIndex === index
   });

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

@@ -3,7 +3,7 @@
 /**
  * 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/module/icons/lucide-icons.js

@@ -1361,7 +1361,65 @@ export 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.
 export 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__*/_jsxs(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/_jsx(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__*/_jsx(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"
+        }]
+      }
+    })]
+  });
+};
+export const Home = ({
   size = 24,
   color = "currentColor",
   strokeWidth = 2,
@@ -1372,41 +1430,64 @@ export const RefreshCw = ({
   viewBox: "0 0 24 24",
   ...props,
   children: [/*#__PURE__*/_jsx(Line, {
-    x1: 23,
-    y1: 4,
-    x2: 23,
-    y2: 10,
+    x1: 3,
+    y1: 10,
+    x2: 12,
+    y2: 3,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/_jsx(Line, {
-    x1: 23,
-    y1: 10,
-    x2: 17,
+    x1: 12,
+    y1: 3,
+    x2: 21,
     y2: 10,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/_jsx(Line, {
-    x1: 1,
-    y1: 20,
-    x2: 1,
-    y2: 14,
+    x1: 5,
+    y1: 9,
+    x2: 5,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
   }), /*#__PURE__*/_jsx(Line, {
-    x1: 1,
-    y1: 14,
-    x2: 7,
-    y2: 14,
+    x1: 19,
+    y1: 9,
+    x2: 19,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
-  }), /*#__PURE__*/_jsx(Circle, {
-    cx: 12,
-    cy: 12,
-    r: 9,
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 5,
+    y1: 21,
+    x2: 19,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 10,
+    y1: 21,
+    x2: 10,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 10,
+    y1: 15,
+    x2: 14,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 14,
+    y1: 15,
+    x2: 14,
+    y2: 21,
     stroke: color,
     strokeWidth: strokeWidth
   })]
 });
+export const HomeIcon = Home;
 export const Search = ({
   size = 24,
   color = "currentColor",

package/lib/module/index.js

@@ -8,6 +8,8 @@ export * from "./stores/index.js";
 
 // Utils exports - selectively export to avoid conflicts
 export {
+// Absolute-fill style (replaces StyleSheet.absoluteFillObject, removed in RN 0.85)
+absoluteFill,
 // Display utilities
 displayValue, parseDisplayValue,
 // Safe area utilities

package/lib/module/license/DeviceLimitModal.js

@@ -8,6 +8,7 @@
 
 import React, { useState, useEffect, useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Modal, ActivityIndicator, ScrollView, Alert, Platform, Linking } from "react-native";
+import { absoluteFill } from "../utils/absoluteFill.js";
 import { macOSColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
 import { X, Smartphone, Trash2, RefreshCw, AlertTriangle } from "../icons/lucide-icons.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -266,7 +267,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   modal: {

package/lib/module/license/LicenseEntryModal.js

@@ -10,6 +10,7 @@
 
 import React, { useCallback } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, Linking, Modal, Platform } from "react-native";
+import { absoluteFill } from "../utils/absoluteFill.js";
 import { macOSColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
 import { X, Key, Link, FileCode, Copy } from "../icons/lucide-icons.js";
 
@@ -194,7 +195,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.8)"
   },
   modal: {

package/lib/module/license/ManageDevicesModal.js

@@ -9,6 +9,7 @@
 
 import React, { useState, useCallback, useEffect } from "react";
 import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Modal, ScrollView, Alert, Platform } from "react-native";
+import { absoluteFill } from "../utils/absoluteFill.js";
 import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
 import { X, Smartphone, Trash2, RefreshCw, CheckCircle, AlertTriangle } from "../icons/lucide-icons.js";
 
@@ -337,7 +338,7 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   backdrop: {
-    ...StyleSheet.absoluteFillObject,
+    ...absoluteFill,
     backgroundColor: "rgba(0, 0, 0, 0.7)"
   },
   modal: {

package/lib/module/stores/BaseEventStore.js

@@ -59,6 +59,8 @@ import { notifySubscriberCountChange } from "../utils/subscriberCountNotifier.js
 export class BaseEventStore extends Subscribable {
   events = [];
   arrayListeners = new Set();
+  captureSuppressed = false;
+  clearListeners = new Set();
   constructor(options) {
     super();
     this.maxEvents = options.maxEvents ?? 500;
@@ -92,7 +94,7 @@ export class BaseEventStore extends Subscribable {
    * Starts capturing if no one was subscribed.
    */
   onSubscribe() {
-    if (this.getTotalSubscriberCount() === 1) {
+    if (this.getTotalSubscriberCount() === 1 && !this.captureSuppressed) {
       this.startCapturing();
     }
     notifySubscriberCountChange(this.storeName);
@@ -132,7 +134,7 @@ export class BaseEventStore extends Subscribable {
     this.arrayListeners.add(listener);
 
     // Start capturing if this is the first subscriber
-    if (wasEmpty) {
+    if (wasEmpty && !this.captureSuppressed) {
       this.startCapturing();
     }
 
@@ -223,6 +225,74 @@ export class BaseEventStore extends 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;
   }
 
   /**