@buoy-gg/shared-ui 2.1.1 → 2.1.3

package/lib/commonjs/license/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "LicenseEntryModal", {
     return _LicenseEntryModal.LicenseEntryModal;
   }
 });
-Object.defineProperty(exports, "ManageDevicesModal", {
-  enumerable: true,
-  get: function () {
-    return _ManageDevicesModal.ManageDevicesModal;
-  }
-});
 Object.defineProperty(exports, "ProBadge", {
   enumerable: true,
   get: function () {
@@ -61,7 +55,6 @@ Object.defineProperty(exports, "useFeatureGate", {
 });
 var _FeatureGate = require("./FeatureGate.js");
 var _LicenseEntryModal = require("./LicenseEntryModal.js");
-var _ManageDevicesModal = require("./ManageDevicesModal.js");
 // Centralized lazy loading for license hooks to avoid duplication across packages
 // This is the SINGLE source of truth - all packages should import from here
 let _useIsPro = null;

package/lib/commonjs/storage/devToolsStorageKeys.js

@@ -171,6 +171,8 @@ const devToolsStorageKeys = exports.devToolsStorageKeys = {
     modal: () => `${devToolsStorageKeys.events.root()}_modal`,
     /** Selected badge/source filters */
     enabledSources: () => `${devToolsStorageKeys.events.root()}_enabled_sources`,
+    /** Whether event capturing is active */
+    isCapturing: () => `${devToolsStorageKeys.events.root()}_is_capturing`,
     /** Copy/export settings */
     copySettings: () => `${devToolsStorageKeys.events.root()}_copy_settings`
   }

package/lib/commonjs/stores/BaseEventStore.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseEventStore = void 0;
+var _subscribable = require("../utils/subscribable.js");
+var _subscriberCountNotifier = require("../utils/subscriberCountNotifier.js");
+/**
+ * BaseEventStore - Abstract base class for event aggregation stores
+ *
+ * Handles dual subscription patterns (array listeners + individual event callbacks)
+ * and automatically manages start/stop lifecycle based on subscriber count.
+ *
+ * Follows TanStack Query's Subscribable pattern with extensions for:
+ * - Array subscriptions (get full event list on each update)
+ * - Individual event subscriptions (get each event as it occurs)
+ * - Auto-start capturing when first subscriber joins
+ * - Auto-stop capturing when last subscriber leaves
+ * - Subscriber count notifications for debugging UI
+ *
+ * @example
+ * ```typescript
+ * class StorageEventStore extends BaseEventStore<StorageEvent> {
+ *   protected storeName = 'storage';
+ *
+ *   protected startCapturing(): void {
+ *     // Start listening to storage changes
+ *   }
+ *
+ *   protected stopCapturing(): void {
+ *     // Stop listening to storage changes
+ *   }
+ *
+ *   isCapturing(): boolean {
+ *     return this.unsubscribe !== null;
+ *   }
+ * }
+ * ```
+ */
+
+/**
+ * Callback type for receiving full events array
+ */
+
+/**
+ * Callback type for receiving individual events
+ */
+
+/**
+ * Configuration options for BaseEventStore
+ */
+
+/**
+ * Abstract base class for event stores.
+ *
+ * Subclasses must implement:
+ * - `startCapturing()` - Begin listening to the underlying event source
+ * - `stopCapturing()` - Stop listening to the underlying event source
+ * - `isCapturing()` - Check if currently capturing events
+ */
+class BaseEventStore extends _subscribable.Subscribable {
+  events = [];
+  arrayListeners = new Set();
+  constructor(options) {
+    super();
+    this.maxEvents = options.maxEvents ?? 500;
+    this.storeName = options.storeName;
+  }
+
+  // ===========================================================================
+  // ABSTRACT METHODS - Must be implemented by subclasses
+  // ===========================================================================
+
+  /**
+   * Start capturing events from the underlying source.
+   * Called automatically when first subscriber joins.
+   */
+
+  /**
+   * Stop capturing events from the underlying source.
+   * Called automatically when last subscriber leaves.
+   */
+
+  /**
+   * Check if the store is actively capturing events.
+   */
+
+  // ===========================================================================
+  // LIFECYCLE HOOKS - Called by Subscribable base class
+  // ===========================================================================
+
+  /**
+   * Called when first subscriber joins (via onEvent).
+   * Starts capturing if no one was subscribed.
+   */
+  onSubscribe() {
+    if (this.getTotalSubscriberCount() === 1) {
+      this.startCapturing();
+    }
+    (0, _subscriberCountNotifier.notifySubscriberCountChange)(this.storeName);
+  }
+
+  /**
+   * Called when a subscriber leaves (via onEvent unsubscribe).
+   * Stops capturing if no one is subscribed anymore.
+   */
+  onUnsubscribe() {
+    if (this.getTotalSubscriberCount() === 0) {
+      this.stopCapturing();
+    }
+    (0, _subscriberCountNotifier.notifySubscriberCountChange)(this.storeName);
+  }
+
+  // ===========================================================================
+  // SUBSCRIPTION METHODS
+  // ===========================================================================
+
+  /**
+   * Get total count of all subscribers (both individual and array listeners)
+   */
+  getTotalSubscriberCount() {
+    return this.listeners.size + this.arrayListeners.size;
+  }
+
+  /**
+   * Subscribe to the full events array.
+   * Automatically starts capturing when first subscriber joins.
+   *
+   * @param listener - Callback that receives the full events array on each update
+   * @returns Unsubscribe function
+   */
+  subscribeToEvents(listener) {
+    const wasEmpty = this.getTotalSubscriberCount() === 0;
+    this.arrayListeners.add(listener);
+
+    // Start capturing if this is the first subscriber
+    if (wasEmpty) {
+      this.startCapturing();
+    }
+
+    // Notify subscriber count change
+    (0, _subscriberCountNotifier.notifySubscriberCountChange)(this.storeName);
+
+    // Immediately call with current events
+    listener(this.getEvents());
+
+    // Return unsubscribe function
+    return () => {
+      this.arrayListeners.delete(listener);
+
+      // Stop capturing if no one is subscribed anymore
+      if (this.getTotalSubscriberCount() === 0) {
+        this.stopCapturing();
+      }
+
+      // Notify subscriber count change
+      (0, _subscriberCountNotifier.notifySubscriberCountChange)(this.storeName);
+    };
+  }
+
+  /**
+   * Subscribe to individual events as they occur.
+   * Automatically starts capturing when first subscriber joins.
+   *
+   * @param callback - Callback that receives each event as it occurs
+   * @returns Unsubscribe function
+   */
+  onEvent(callback) {
+    // Use Subscribable's subscribe method (triggers onSubscribe hook)
+    return this.subscribe(callback);
+  }
+
+  // ===========================================================================
+  // EVENT MANAGEMENT
+  // ===========================================================================
+
+  /**
+   * Add an event to the store.
+   * Call this from subclasses when a new event is received.
+   *
+   * @param event - The event to add
+   */
+  addEvent(event) {
+    // Add to beginning (newest first) and limit to maxEvents
+    this.events = [event, ...this.events].slice(0, this.maxEvents);
+
+    // Notify individual event callbacks (via Subscribable)
+    this.notify(event);
+
+    // Notify array listeners
+    this.notifyArrayListeners();
+  }
+
+  /**
+   * Notify all array listeners of changes
+   */
+  notifyArrayListeners() {
+    const events = this.getEvents();
+    this.arrayListeners.forEach(listener => {
+      try {
+        listener(events);
+      } catch {
+        // Ignore listener errors
+      }
+    });
+  }
+
+  /**
+   * Get all events (newest first)
+   */
+  getEvents() {
+    return this.events;
+  }
+
+  /**
+   * Get event count
+   */
+  getEventCount() {
+    return this.events.length;
+  }
+
+  /**
+   * Clear all events
+   */
+  clearEvents() {
+    this.events = [];
+    this.notifyArrayListeners();
+  }
+
+  /**
+   * Set maximum number of events to keep
+   */
+  setMaxEvents(max) {
+    this.maxEvents = max;
+    if (this.events.length > max) {
+      this.events = this.events.slice(0, max);
+      this.notifyArrayListeners();
+    }
+  }
+
+  // ===========================================================================
+  // DEBUGGING
+  // ===========================================================================
+
+  /**
+   * Get current subscriber counts for debugging
+   */
+  getSubscriberCounts() {
+    return {
+      eventCallbacks: this.listeners.size,
+      arrayListeners: this.arrayListeners.size,
+      total: this.getTotalSubscriberCount()
+    };
+  }
+}
+exports.BaseEventStore = BaseEventStore;

package/lib/commonjs/stores/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BaseEventStore", {
+  enumerable: true,
+  get: function () {
+    return _BaseEventStore.BaseEventStore;
+  }
+});
+var _BaseEventStore = require("./BaseEventStore.js");

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PowerToggleButton = PowerToggleButton;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * PowerToggleButton Component
+ *
+ * A reusable power button for toggling capture/recording state across dev tools.
+ * Displays green when enabled, red when disabled.
+ */
+
+/**
+ * Power toggle button used across dev tools for start/stop functionality.
+ *
+ * @example
+ * ```tsx
+ * <PowerToggleButton
+ *   isEnabled={isRecording}
+ *   onToggle={() => setIsRecording(!isRecording)}
+ *   accessibilityLabel="Toggle network recording"
+ * />
+ * ```
+ */
+function PowerToggleButton({
+  isEnabled,
+  onToggle,
+  size = "medium",
+  accessibilityLabel,
+  disabled = false
+}) {
+  const buttonSize = size === "small" ? 28 : 32;
+  const iconSize = size === "small" ? 12 : 14;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    onPress: onToggle,
+    disabled: disabled,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: "button",
+    style: [styles.button, {
+      width: buttonSize,
+      height: buttonSize
+    }, isEnabled ? styles.enabledButton : styles.disabledButton, disabled && styles.buttonDisabled],
+    activeOpacity: 0.7,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Power, {
+      size: iconSize,
+      color: isEnabled ? _macOSDesignSystemColors.macOSColors.semantic.success : _macOSDesignSystemColors.macOSColors.semantic.error
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    borderRadius: 8,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  enabledButton: {
+    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.successBackground,
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.success + "40"
+  },
+  disabledButton: {
+    backgroundColor: _macOSDesignSystemColors.macOSColors.semantic.errorBackground,
+    borderColor: _macOSDesignSystemColors.macOSColors.semantic.error + "40"
+  },
+  buttonDisabled: {
+    opacity: 0.55
+  }
+});

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

@@ -225,6 +225,12 @@ Object.defineProperty(exports, "NoSearchResultsEmptyState", {
     return _EmptyState.NoSearchResultsEmptyState;
   }
 });
+Object.defineProperty(exports, "PowerToggleButton", {
+  enumerable: true,
+  get: function () {
+    return _PowerToggleButton.PowerToggleButton;
+  }
+});
 Object.defineProperty(exports, "SearchBar", {
   enumerable: true,
   get: function () {
@@ -333,4 +339,5 @@ var _DynamicFilterView = require("./DynamicFilterView.js");
 var _WindowControls = require("./WindowControls.js");
 var _EventStepperFooter = require("./EventStepperFooter.js");
 var _ExpandablePopover = require("./ExpandablePopover.js");
+var _PowerToggleButton = require("./PowerToggleButton.js");
 var _index = require("./EventHistoryViewer/index.js");

package/lib/commonjs/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Subscribable", {
+  enumerable: true,
+  get: function () {
+    return _subscribable.Subscribable;
+  }
+});
 Object.defineProperty(exports, "displayValue", {
   enumerable: true,
   get: function () {
@@ -105,6 +111,12 @@ Object.defineProperty(exports, "loadOptionalModule", {
     return _loadOptionalModule.loadOptionalModule;
   }
 });
+Object.defineProperty(exports, "notifySubscriberCountChange", {
+  enumerable: true,
+  get: function () {
+    return _subscriberCountNotifier.notifySubscriberCountChange;
+  }
+});
 Object.defineProperty(exports, "parseDisplayValue", {
   enumerable: true,
   get: function () {
@@ -129,6 +141,18 @@ Object.defineProperty(exports, "safeStringify", {
     return _safeStringify.safeStringify;
   }
 });
+Object.defineProperty(exports, "subscribeToSubscriberCountChanges", {
+  enumerable: true,
+  get: function () {
+    return _subscriberCountNotifier.subscribeToSubscriberCountChanges;
+  }
+});
+Object.defineProperty(exports, "subscriberCountNotifier", {
+  enumerable: true,
+  get: function () {
+    return _subscriberCountNotifier.subscriberCountNotifier;
+  }
+});
 Object.defineProperty(exports, "truncateText", {
   enumerable: true,
   get: function () {
@@ -141,4 +165,6 @@ var _persistentStorage = require("./persistentStorage.js");
 var _safeStringify = require("./safeStringify.js");
 var _typeHelpers = require("./typeHelpers.js");
 var _valueFormatting = require("./valueFormatting.js");
-var _loadOptionalModule = require("./loadOptionalModule.js");
+var _loadOptionalModule = require("./loadOptionalModule.js");
+var _subscribable = require("./subscribable.js");
+var _subscriberCountNotifier = require("./subscriberCountNotifier.js");

package/lib/commonjs/utils/subscribable.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Subscribable = void 0;
+/**
+ * Subscribable - Base class for pub/sub pattern with lifecycle hooks
+ *
+ * Ported from TanStack Query's subscription architecture.
+ * Provides a foundation for self-managing listeners that automatically
+ * start when the first subscriber joins and stop when the last leaves.
+ *
+ * @example
+ * ```typescript
+ * class NetworkEventStore extends Subscribable<NetworkEventListener> {
+ *   protected onSubscribe(): void {
+ *     if (this.listeners.size === 1) {
+ *       // First subscriber - start listening
+ *       this.startNetworkListener();
+ *     }
+ *   }
+ *
+ *   protected onUnsubscribe(): void {
+ *     if (this.listeners.size === 0) {
+ *       // Last subscriber left - stop listening
+ *       this.stopNetworkListener();
+ *     }
+ *   }
+ * }
+ * ```
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+class Subscribable {
+  listeners = new Set();
+  constructor() {
+    this.subscribe = this.subscribe.bind(this);
+  }
+
+  /**
+   * Subscribe to updates.
+   * @param listener - Callback function to receive updates
+   * @returns Unsubscribe function
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    this.onSubscribe();
+    return () => {
+      this.listeners.delete(listener);
+      this.onUnsubscribe();
+    };
+  }
+
+  /**
+   * Check if there are any active listeners.
+   */
+  hasListeners() {
+    return this.listeners.size > 0;
+  }
+
+  /**
+   * Get the current number of listeners.
+   */
+  getListenerCount() {
+    return this.listeners.size;
+  }
+
+  /**
+   * Notify all listeners with given arguments.
+   */
+  notify(...args) {
+    this.listeners.forEach(listener => {
+      listener(...args);
+    });
+  }
+
+  /**
+   * Called when a listener is added.
+   * Override to start resources when first subscriber joins.
+   *
+   * @example
+   * ```typescript
+   * protected onSubscribe(): void {
+   *   if (this.listeners.size === 1) {
+   *     this.startCapturing();
+   *   }
+   * }
+   * ```
+   */
+  onSubscribe() {
+    // Override in subclasses
+  }
+
+  /**
+   * Called when a listener is removed.
+   * Override to stop resources when last subscriber leaves.
+   *
+   * @example
+   * ```typescript
+   * protected onUnsubscribe(): void {
+   *   if (this.listeners.size === 0) {
+   *     this.stopCapturing();
+   *   }
+   * }
+   * ```
+   */
+  onUnsubscribe() {
+    // Override in subclasses
+  }
+}
+exports.Subscribable = Subscribable;

package/lib/commonjs/utils/subscriberCountNotifier.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscriberCountNotifier = exports.subscribeToSubscriberCountChanges = exports.notifySubscriberCountChange = void 0;
+/**
+ * Subscriber Count Notifier
+ *
+ * Global notification system for subscriber count changes across all event stores.
+ * Follows TanStack Query's pattern where stores notify when observers are added/removed,
+ * allowing UI to update instantly instead of polling.
+ *
+ * This is in shared-ui to avoid circular dependencies between packages.
+ *
+ * Usage in event stores:
+ * ```typescript
+ * import { notifySubscriberCountChange } from '@buoy-gg/shared-ui';
+ *
+ * protected onSubscribe(): void {
+ *   // ... existing logic
+ *   notifySubscriberCountChange('storage');
+ * }
+ * ```
+ *
+ * Usage in UI:
+ * ```typescript
+ * useEffect(() => {
+ *   return subscribeToSubscriberCountChanges(() => {
+ *     // Refresh subscriber counts
+ *   });
+ * }, []);
+ * ```
+ */
+
+class SubscriberCountNotifier {
+  listeners = new Set();
+
+  /**
+   * Subscribe to subscriber count changes.
+   * Called whenever any event store's subscriber count changes.
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Notify all listeners that a store's subscriber count changed.
+   * Called by event stores in their onSubscribe/onUnsubscribe hooks.
+   */
+  notify(sourceId) {
+    this.listeners.forEach(listener => {
+      try {
+        listener(sourceId);
+      } catch {
+        // Ignore listener errors
+      }
+    });
+  }
+}
+
+// Singleton instance
+const subscriberCountNotifier = exports.subscriberCountNotifier = new SubscriberCountNotifier();
+
+// Convenience exports
+const subscribeToSubscriberCountChanges = listener => subscriberCountNotifier.subscribe(listener);
+exports.subscribeToSubscriberCountChanges = subscribeToSubscriberCountChanges;
+const notifySubscriberCountChange = sourceId => subscriberCountNotifier.notify(sourceId);
+exports.notifySubscriberCountChange = notifySubscriberCountChange;

package/lib/module/JsModal.js

@@ -20,10 +20,10 @@ import { DraggableHeader, ModalHintBanner, WindowControls } from "./ui/component
 import { persistentStorage } from "./utils/persistentStorage.js";
 import { devToolsStorageKeys } from "./storage/devToolsStorageKeys.js";
 import { useHintsDisabled } from "./context/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ============================================================================
 // CONSTANTS - Modal dimensions and configuration
 // ============================================================================
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SCREEN = Dimensions.get("window");
 const MIN_HEIGHT = 100;
 const DEFAULT_HEIGHT = 400;

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

@@ -3,7 +3,7 @@
 /**
  * Auto-generated clipboard implementation
  * Detected: none
- * Generated at: 2026-01-12T04:02:16.197Z
+ * Generated at: 2026-02-03T00:33:15.804Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-clipboard.js
  *