@buoy-gg/shared-ui 3.0.1 → 4.0.1

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/stores/ignoredPatternsStore.js

@@ -0,0 +1,229 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ignoredPatternsStore = void 0;
+exports.isUrlIgnored = isUrlIgnored;
+exports.urlMatchesIgnoredPattern = urlMatchesIgnoredPattern;
+exports.useIgnoredPatterns = useIgnoredPatterns;
+var _react = require("react");
+var _persistentStorage = require("../utils/persistentStorage.js");
+var _devToolsStorageKeys = require("../storage/devToolsStorageKeys.js");
+/**
+ * Shared "ignored patterns" store for network-style URL filtering.
+ *
+ * This is the SINGLE source of truth for the domains/URL patterns that the
+ * Network tool (and now the Events tool) hide from their lists. Both tools read
+ * and mutate this one singleton, so an ignore toggled in either place is shared
+ * everywhere and persisted to the same storage key.
+ *
+ * Lives in @buoy-gg/shared-ui (a hard dependency of both @buoy-gg/network and
+ * @buoy-gg/events) so the filter logic can be shared without @buoy-gg/events
+ * having to take a hard dependency on @buoy-gg/network (which is optional).
+ */
+
+/**
+ * How an ignored-pattern entry should be compared against captured URLs.
+ *
+ * - `contains`: case-insensitive substring match on the full URL (legacy behavior).
+ * - `exact`: smart equality — if pattern starts with `/`, matches URL.pathname;
+ *   if it starts with `http://`/`https://`, matches origin+pathname; otherwise
+ *   matches URL.host.
+ */
+
+/** A single exclude pattern with its match mode. */
+
+/** Patterns hidden by default — Buoy's own license API traffic. */
+const DEFAULT_PATTERNS = [{
+  value: "api.keygen.sh",
+  mode: "contains"
+}];
+
+/**
+ * Returns true when `url` matches the ignored `pattern` according to its mode.
+ *
+ * `contains` → case-insensitive substring on the full URL (legacy behavior).
+ * `exact`    → smart equality: pattern starting with `/` compares URL.pathname,
+ *              full URLs compare origin+pathname (ignoring query/hash), bare
+ *              values compare URL.host. Falls back to literal equality if URL
+ *              parsing fails (e.g. relative URLs).
+ */
+function urlMatchesIgnoredPattern(url, pattern) {
+  const lowerUrl = url.toLowerCase();
+  const lowerValue = pattern.value.toLowerCase();
+  if (pattern.mode === "contains") {
+    return lowerUrl.includes(lowerValue);
+  }
+  try {
+    const parsed = new URL(url);
+    if (lowerValue.startsWith("/")) {
+      return parsed.pathname.toLowerCase() === lowerValue;
+    }
+    if (lowerValue.startsWith("http://") || lowerValue.startsWith("https://")) {
+      return `${parsed.origin}${parsed.pathname}`.toLowerCase() === lowerValue;
+    }
+    return parsed.host.toLowerCase() === lowerValue;
+  } catch {
+    return lowerUrl === lowerValue;
+  }
+}
+
+/** Convenience: does `url` match ANY of the ignored `patterns`? */
+function isUrlIgnored(url, patterns) {
+  if (!url || patterns.length === 0) return false;
+  return patterns.some(pattern => urlMatchesIgnoredPattern(url, pattern));
+}
+
+/** Tolerate the legacy `string[]` persisted format and stray junk. */
+function migratePatterns(raw) {
+  if (!Array.isArray(raw)) return [];
+  const migrated = [];
+  for (const entry of raw) {
+    if (typeof entry === "string" && entry.trim()) {
+      migrated.push({
+        value: entry,
+        mode: "contains"
+      });
+    } else if (entry && typeof entry === "object" && typeof entry.value === "string") {
+      const e = entry;
+      migrated.push({
+        value: e.value,
+        mode: e.mode === "exact" ? "exact" : "contains"
+      });
+    }
+  }
+  return migrated;
+}
+
+/** Always keep the default patterns present (e.g. Buoy's license API). */
+function ensureDefaults(patterns) {
+  const result = [...patterns];
+  for (const def of DEFAULT_PATTERNS) {
+    if (!result.some(p => p.value === def.value)) {
+      result.push({
+        ...def
+      });
+    }
+  }
+  return result;
+}
+/**
+ * Singleton store. One instance per JS runtime, so every consumer (Network tool,
+ * Events tool, on mobile or on the desktop dashboard) shares the same patterns.
+ */
+class IgnoredPatternsStore {
+  patterns = ensureDefaults(DEFAULT_PATTERNS.map(p => ({
+    ...p
+  })));
+  listeners = new Set();
+  loaded = false;
+  loadPromise = null;
+  /** Set once a mutation happens so a slow initial load can't clobber it. */
+  dirty = false;
+
+  /** Current patterns (stable reference until a mutation occurs). */
+  getPatterns() {
+    return this.patterns;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    // Lazily hydrate from storage the first time anyone cares.
+    void this.ensureLoaded();
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  emit() {
+    this.listeners.forEach(l => l());
+  }
+  ensureLoaded() {
+    if (this.loaded) return Promise.resolve();
+    if (this.loadPromise) return this.loadPromise;
+    this.loadPromise = (async () => {
+      try {
+        const stored = await _persistentStorage.persistentStorage.getItem(_devToolsStorageKeys.devToolsStorageKeys.network.ignoredDomains());
+        // A mutation may have raced this read — never overwrite user intent.
+        if (stored && !this.dirty) {
+          const migrated = ensureDefaults(migratePatterns(JSON.parse(stored)));
+          this.patterns = migrated;
+        }
+      } catch {
+        // Silently fall back to defaults.
+      } finally {
+        this.loaded = true;
+        this.emit();
+      }
+    })();
+    return this.loadPromise;
+  }
+  persist() {
+    _persistentStorage.persistentStorage.setItem(_devToolsStorageKeys.devToolsStorageKeys.network.ignoredDomains(), JSON.stringify(this.patterns)).catch(() => {
+      // Silently fail — patterns remain in memory.
+    });
+  }
+  commit(next) {
+    this.dirty = true;
+    this.patterns = next;
+    this.emit();
+    this.persist();
+  }
+
+  /** Add a pattern (no-op if its value already exists). */
+  add(pattern) {
+    const value = pattern.value.trim();
+    if (!value) return;
+    if (this.patterns.some(p => p.value === value)) return;
+    this.commit([...this.patterns, {
+      value,
+      mode: pattern.mode
+    }]);
+  }
+
+  /** Remove a pattern by value. */
+  remove(value) {
+    if (!this.patterns.some(p => p.value === value)) return;
+    this.commit(this.patterns.filter(p => p.value !== value));
+  }
+
+  /** Add as `contains` if absent, otherwise remove (used by detail-view chips). */
+  toggle(value) {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    this.commit(this.patterns.some(p => p.value === trimmed) ? this.patterns.filter(p => p.value !== trimmed) : [...this.patterns, {
+      value: trimmed,
+      mode: "contains"
+    }]);
+  }
+
+  /** Flip an existing pattern between `contains` and `exact`. */
+  toggleMode(value) {
+    if (!this.patterns.some(p => p.value === value)) return;
+    this.commit(this.patterns.map(p => p.value === value ? {
+      ...p,
+      mode: p.mode === "contains" ? "exact" : "contains"
+    } : p));
+  }
+}
+const ignoredPatternsStore = exports.ignoredPatternsStore = new IgnoredPatternsStore();
+/**
+ * Subscribe to the shared ignored-patterns store. All consumers in a runtime
+ * see the same patterns and the same mutations.
+ */
+function useIgnoredPatterns() {
+  const [patterns, setPatterns] = (0, _react.useState)(() => ignoredPatternsStore.getPatterns());
+  (0, _react.useEffect)(() => {
+    return ignoredPatternsStore.subscribe(() => {
+      setPatterns(ignoredPatternsStore.getPatterns());
+    });
+  }, []);
+  const values = (0, _react.useMemo)(() => new Set(patterns.map(p => p.value)), [patterns]);
+  return {
+    patterns,
+    values,
+    add: pattern => ignoredPatternsStore.add(pattern),
+    remove: value => ignoredPatternsStore.remove(value),
+    toggle: value => ignoredPatternsStore.toggle(value),
+    toggleMode: value => ignoredPatternsStore.toggleMode(value)
+  };
+}

package/lib/commonjs/stores/index.js

@@ -9,4 +9,29 @@ Object.defineProperty(exports, "BaseEventStore", {
     return _BaseEventStore.BaseEventStore;
   }
 });
-var _BaseEventStore = require("./BaseEventStore.js");
+Object.defineProperty(exports, "ignoredPatternsStore", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsStore.ignoredPatternsStore;
+  }
+});
+Object.defineProperty(exports, "isUrlIgnored", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsStore.isUrlIgnored;
+  }
+});
+Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsStore.urlMatchesIgnoredPattern;
+  }
+});
+Object.defineProperty(exports, "useIgnoredPatterns", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsStore.useIgnoredPatterns;
+  }
+});
+var _BaseEventStore = require("./BaseEventStore.js");
+var _ignoredPatternsStore = require("./ignoredPatternsStore.js");

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

@@ -14,6 +14,7 @@ function CompactRow({
   statusSublabel,
   primaryText,
   secondaryText,
+  secondaryAccessory,
   expandedContent,
   isExpanded,
   badgeText,
@@ -28,77 +29,80 @@ 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,
-              numberOfLines: 1,
-              children: statusSublabel
+              style: styles.queryHash,
+              numberOfLines: isExpanded ? undefined : 2,
+              children: primaryText
+            }), !isExpanded && (secondaryText || secondaryAccessory) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+              style: styles.secondaryRow,
+              children: [secondaryText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.secondaryText,
+                numberOfLines: 1,
+                children: secondaryText
+              }) : null, secondaryAccessory]
+            }) : 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
-        })
       })]
     })
   });
@@ -189,6 +193,12 @@ const styles = _reactNative.StyleSheet.create({
     color: _gameUIColors.buoyColors.text,
     lineHeight: 16
   },
+  secondaryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 1
+  },
   secondaryText: {
     fontSize: 10,
     color: _gameUIColors.buoyColors.textMuted,
@@ -200,7 +210,9 @@ const styles = _reactNative.StyleSheet.create({
     gap: 8
   },
   badgeContainer: {
-    alignItems: "flex-end"
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: 2
   },
   statusBadge: {
     fontSize: 12,
@@ -217,11 +229,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: {

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

@@ -44,10 +44,12 @@ function ExpandedInfoRow({
 function PillBadge({
   color,
   children,
-  icon
+  icon,
+  size = "md"
 }) {
+  const isSm = size === "sm";
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.pill, {
+    style: [styles.pill, isSm && styles.pillSm, {
       backgroundColor: color + "20",
       borderColor: color + "40"
     }],
@@ -55,7 +57,7 @@ function PillBadge({
       style: styles.pillIcon,
       children: icon
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.pillText, {
+      style: [styles.pillText, isSm && styles.pillTextSm, {
         color
       }],
       children: children
@@ -83,6 +85,10 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 999,
     borderWidth: 1
   },
+  pillSm: {
+    paddingHorizontal: 5,
+    paddingVertical: 1
+  },
   pillIcon: {
     marginRight: 4
   },
@@ -91,5 +97,9 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "700",
     fontFamily: "monospace",
     letterSpacing: 0.5
+  },
+  pillTextSm: {
+    fontSize: 9,
+    letterSpacing: 0.3
   }
 });

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