@buoy-gg/shared-ui 7.0.15 → 7.0.16

package/lib/module/env/EnvironmentIndicator.web.js

@@ -0,0 +1,108 @@
+"use strict";
+
+/**
+ * EnvironmentIndicator — Web (React DOM) twin of EnvironmentIndicator.tsx.
+ * Same env→color/label map and layout; lucide glyph icons are omitted from
+ * the badge on native too (dot + label only), so parity holds.
+ */
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { normalizeEnvironment } from "../types/types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function getEnvironmentConfig(environment) {
+  switch (normalizeEnvironment(String(environment))) {
+    case 'dev':
+      return {
+        label: 'DEV',
+        backgroundColor: gameUIColors.warning
+      };
+    case 'qa':
+      return {
+        label: 'QA',
+        backgroundColor: gameUIColors.optional
+      };
+    case 'staging':
+      return {
+        label: 'STAGING',
+        backgroundColor: gameUIColors.success
+      };
+    case 'prod':
+      return {
+        label: 'PROD',
+        backgroundColor: gameUIColors.error
+      };
+    case 'local':
+    default:
+      return {
+        label: 'LOCAL',
+        backgroundColor: gameUIColors.info
+      };
+  }
+}
+function ChevronDownGlyph({
+  color
+}) {
+  // native: ChevronDown size 12 from shared lucide icons
+  return /*#__PURE__*/_jsx("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M6 9l6 6 6-6",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+export function EnvironmentIndicator({
+  environment,
+  interactive = false,
+  onPress
+}) {
+  const envConfig = getEnvironmentConfig(environment);
+  return /*#__PURE__*/_jsxs("button", {
+    onClick: interactive ? onPress : undefined,
+    "aria-label": `Environment: ${envConfig.label}`,
+    style: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // native: paddingVertical 6, paddingLeft 8, paddingRight interactive?4:8
+      padding: `6px ${interactive ? 4 : 8}px 6px 8px`,
+      flexShrink: 0,
+      background: 'none',
+      border: 'none',
+      cursor: interactive ? 'pointer' : 'default'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: envConfig.backgroundColor,
+        marginRight: 6,
+        // native: shadowOpacity 0.6, shadowRadius 4 glow
+        boxShadow: `0 0 4px ${envConfig.backgroundColor}99`
+      }
+    }), /*#__PURE__*/_jsx("span", {
+      style: {
+        fontSize: 11,
+        fontWeight: 600,
+        color: gameUIColors.primaryLight,
+        letterSpacing: 0.5
+      },
+      children: envConfig.label
+    }), interactive && /*#__PURE__*/_jsx("span", {
+      style: {
+        marginLeft: 2,
+        display: 'flex'
+      },
+      children: /*#__PURE__*/_jsx(ChevronDownGlyph, {
+        color: "#7A8599"
+      })
+    })]
+  });
+}

package/lib/module/env/EnvironmentSelectorInline.web.js

@@ -0,0 +1,173 @@
+"use strict";
+
+/**
+ * EnvironmentSelectorInline — Web (React DOM) twin of
+ * EnvironmentSelectorInline.tsx: the interactive environment badge that
+ * expands a drop-UP panel (absolute bottom:100%, opens upward so the bubble
+ * layout doesn't shift). Same geometry: OPTION_HEIGHT 36, 200ms animation,
+ * selected row gets a green check.
+ */
+import { useState } from 'react';
+import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
+import { getEnvironmentConfig } from "./EnvironmentIndicator.web.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const OPTION_HEIGHT = 36; // native EnvironmentSelectorInline OPTION_HEIGHT
+
+function ChevronUpGlyph({
+  color,
+  flipped
+}) {
+  return /*#__PURE__*/_jsx("svg", {
+    width: 10,
+    height: 10,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    style: {
+      transform: flipped ? 'rotate(180deg)' : 'rotate(0deg)',
+      transition: 'transform 200ms ease' // native: 200ms rotation
+    },
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M18 15l-6-6-6 6",
+      fill: "none",
+      stroke: color,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+function CheckGlyph() {
+  // native: Check size 12 color #4AFF9F strokeWidth 3
+  return /*#__PURE__*/_jsx("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M20 6L9 17l-5-5",
+      fill: "none",
+      stroke: "#4AFF9F",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+export function EnvironmentSelectorInline({
+  currentEnvironment,
+  availableEnvironments,
+  onSelect
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [hoveredEnv, setHoveredEnv] = useState(null);
+  const current = getEnvironmentConfig(currentEnvironment);
+  const panelHeight = availableEnvironments.length * OPTION_HEIGHT;
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      position: 'relative',
+      zIndex: 1000,
+      flexShrink: 0
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        bottom: '100%',
+        left: 0,
+        right: 0,
+        height: expanded ? panelHeight : 0,
+        opacity: expanded ? 1 : 0,
+        overflow: 'hidden',
+        transition: 'height 200ms ease, opacity 200ms ease',
+        backgroundColor: 'rgba(8,12,21,0.95)',
+        border: '1px solid #00B8E666',
+        borderBottomWidth: 0,
+        borderTopLeftRadius: 6,
+        borderTopRightRadius: 6,
+        boxShadow: '0 -4px 8px rgba(0,0,0,0.3)'
+      },
+      children: availableEnvironments.map(env => {
+        const config = getEnvironmentConfig(env);
+        const isSelected = String(env).toLowerCase() === String(currentEnvironment).toLowerCase();
+        return /*#__PURE__*/_jsxs("button", {
+          onClick: () => {
+            setExpanded(false);
+            onSelect(env);
+          },
+          onMouseEnter: () => setHoveredEnv(String(env)),
+          onMouseLeave: () => setHoveredEnv(null),
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: '100%',
+            height: OPTION_HEIGHT,
+            padding: '0 10px',
+            background: isSelected ? 'rgba(128,128,128,0.1)' : hoveredEnv === String(env) ? 'rgba(128,128,128,0.2)' : 'none',
+            border: 'none',
+            cursor: 'pointer'
+          },
+          children: [/*#__PURE__*/_jsxs("span", {
+            style: {
+              display: 'flex',
+              alignItems: 'center'
+            },
+            children: [/*#__PURE__*/_jsx("span", {
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: 3,
+                backgroundColor: config.backgroundColor,
+                marginRight: 8
+              }
+            }), /*#__PURE__*/_jsx("span", {
+              style: {
+                fontSize: 10,
+                fontWeight: 600,
+                color: gameUIColors.primaryLight,
+                letterSpacing: 0.5
+              },
+              children: config.label
+            })]
+          }), isSelected && /*#__PURE__*/_jsx(CheckGlyph, {})]
+        }, String(env));
+      })
+    }), /*#__PURE__*/_jsxs("button", {
+      onClick: () => setExpanded(e => !e),
+      "aria-expanded": expanded,
+      "aria-label": `Environment: ${current.label}. Click to switch.`,
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 6,
+        padding: '6px 6px 6px 8px',
+        borderRadius: 6,
+        // native: expanded trigger fuses with panel (squared top corners)
+        borderTopLeftRadius: expanded ? 0 : 6,
+        borderTopRightRadius: expanded ? 0 : 6,
+        backgroundColor: expanded ? 'rgba(8,12,21,0.95)' : 'transparent',
+        border: 'none',
+        cursor: 'pointer'
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        style: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: current.backgroundColor,
+          boxShadow: `0 0 4px ${current.backgroundColor}99`
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          fontSize: 11,
+          fontWeight: 600,
+          color: gameUIColors.primaryLight,
+          letterSpacing: 0.5
+        },
+        children: current.label
+      }), /*#__PURE__*/_jsx(ChevronUpGlyph, {
+        color: "#7A8599",
+        flipped: expanded
+      })]
+    })]
+  });
+}

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

@@ -3,7 +3,7 @@
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-05T21:40:54.216Z
+ * Generated at: 2026-08-06T20:33:57.771Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/icons/index.js

@@ -12,6 +12,7 @@ export { EnvIcon, ENV_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 // packages re-export from here rather than drawing their own copies.
 export { ConsoleIcon, CONSOLE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { ImagesIcon, IMAGES_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { AssetsIcon, ASSETS_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { ImpersonateIcon, IMPERSONATE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { ImageOverlayIcon, IMAGE_OVERLAY_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { ZustandIcon, ZUSTAND_ICON_COLOR } from "@buoy-gg/floating-tools-core";

package/lib/module/index.js

@@ -53,7 +53,7 @@ export * from "./storage/index.js";
 export { useSafeAreaInsets, useFilterManager, useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./hooks/index.js";
 
 // JsModal
-export { JsModal } from "./JsModal.js";
+export { JsModal } from "./JsModal";
 // game ui colors
 export { gameUIColors, buoyColors } from "./ui/gameUI/constants/gameUIColors.js";
 // Runtime re-tint hook — only the desktop dashboard's theme switcher uses it.
@@ -61,11 +61,11 @@ export { refreshGameUIColors } from "./ui/gameUI/constants/gameUIColors.js";
 export { macOSColors } from "./ui/gameUI/constants/macOSDesignSystemColors.js";
 export { dialColors } from "./ui/gameUI/constants/gameUIColors.js";
 //EnvironmentIndicator
-export { EnvironmentIndicator } from "./env/EnvironmentIndicator.js";
+export { EnvironmentIndicator } from "./env/EnvironmentIndicator";
 // EnvironmentSelector
 export { EnvironmentSelector } from "./env/EnvironmentSelector.js";
 // EnvironmentSelectorInline
-export { EnvironmentSelectorInline } from "./env/EnvironmentSelectorInline.js";
+export { EnvironmentSelectorInline } from "./env/EnvironmentSelectorInline";
 export { normalizeEnvironment } from "./types/types.js";
 
 // Context exports

package/lib/module/stores/ignoredPatternsCore.js

@@ -0,0 +1,62 @@
+"use strict";
+
+/**
+ * Pure, dependency-free part of the ignored-patterns feature — split from
+ * ignoredPatternsStore.ts so web consumers (which shim `@buoy-gg/shared-ui`
+ * and must not pull the store's relative `../utils/persistentStorage` import
+ * with its expo/async-storage requires into the bundle graph) can share the
+ * exact matching semantics. The store imports and re-exports everything here;
+ * the native barrel is unchanged.
+ */
+
+/**
+ * How a pattern matches a URL:
+ *
+ * - `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. */
+export const DEFAULT_IGNORED_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).
+ */
+export 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`? */
+export function isUrlIgnored(url, patterns) {
+  if (!url || patterns.length === 0) return false;
+  return patterns.some(pattern => urlMatchesIgnoredPattern(url, pattern));
+}

package/lib/module/stores/ignoredPatternsStore.js

@@ -17,57 +17,11 @@ import { useEffect, useMemo, useState } from "react";
 import { persistentStorage } from "../utils/persistentStorage.js";
 import { devToolsStorageKeys } from "../storage/devToolsStorageKeys.js";
 
-/**
- * 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).
- */
-export 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`? */
-export function isUrlIgnored(url, patterns) {
-  if (!url || patterns.length === 0) return false;
-  return patterns.some(pattern => urlMatchesIgnoredPattern(url, pattern));
-}
+// Pure matching types/helpers live in ignoredPatternsCore.ts (web-shim-safe);
+// re-exported here so the shared-ui barrel surface is unchanged.
+import { DEFAULT_IGNORED_PATTERNS } from "./ignoredPatternsCore.js";
+export { urlMatchesIgnoredPattern, isUrlIgnored } from "./ignoredPatternsCore.js";
+const DEFAULT_PATTERNS = DEFAULT_IGNORED_PATTERNS;
 
 /** Tolerate the legacy `string[]` persisted format and stray junk. */
 function migratePatterns(raw) {

package/lib/module/stores/ignoredPatternsStore.web.js

@@ -0,0 +1,221 @@
+"use strict";
+
+/**
+ * ignoredPatternsStore.web — web twin of ignoredPatternsStore.ts (the shared
+ * persisted "ignored patterns" singleton for network-style URL filtering).
+ *
+ * The native store imports shared's RN `persistentStorage` (whose module graph
+ * carries guarded expo-file-system / async-storage requires), which is why the
+ * web shims never re-exported it. This twin keeps the ENTIRE store class, hook
+ * and persistence contract identical — same class shape, same
+ * `devToolsStorageKeys.network.ignoredDomains()` storage key, same persisted
+ * JSON shape (`IgnoredPattern[]`, with the legacy `string[]` migration) — and
+ * swaps only the storage backing: a file-local localStorage adapter that
+ * matches the `persistentStorage` API (async getItem/setItem, best-effort,
+ * provenance: example-tauri/src/shims/shared-ui.web.ts's adapter — web Buoy
+ * chrome persistence lives in webview localStorage).
+ *
+ * Everything else — pure matching (`ignoredPatternsCore`), the migration +
+ * ensure-defaults logic, the dirty-flag load race guard, the module-scope
+ * stable mutation identities — is the native code, not a fork of its
+ * semantics. Web consumers get the same shared, persisted pattern list the
+ * phone has, keyed identically, so a DOM port and a react-native-web port of
+ * the same app read/write the same entry.
+ *
+ * @platform React DOM Web
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { devToolsStorageKeys } from "../storage/devToolsStorageKeys.js";
+
+// Pure matching types/helpers live in ignoredPatternsCore.ts (web-shim-safe);
+// re-exported here so this module's surface twins the native store's.
+import { DEFAULT_IGNORED_PATTERNS } from "./ignoredPatternsCore.js";
+export { urlMatchesIgnoredPattern, isUrlIgnored } from "./ignoredPatternsCore.js";
+
+/**
+ * localStorage-backed implementation of the shared `persistentStorage` API
+ * (getItem/setItem returning promises, silent best-effort failure) — the same
+ * adapter recipe the web shared-ui shims use for Buoy chrome persistence.
+ * Local to this file so the web store pulls zero RN/expo modules.
+ */
+const persistentStorage = {
+  async getItem(key) {
+    try {
+      return window.localStorage.getItem(key);
+    } catch {
+      return null;
+    }
+  },
+  async setItem(key, value) {
+    try {
+      window.localStorage.setItem(key, value);
+    } catch {
+      // Ignore quota/availability errors — callers treat this as best-effort.
+    }
+  }
+};
+const DEFAULT_PATTERNS = DEFAULT_IGNORED_PATTERNS;
+
+/** 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, any web panel) 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.getItem(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.setItem(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));
+  }
+}
+export const ignoredPatternsStore = new IgnoredPatternsStore();
+/**
+ * Mutations live at module scope so they keep a STABLE identity across
+ * renders (same rationale as native: inline arrows handed every consumer a
+ * fresh `toggle` per render and defeated `memo` downstream).
+ */
+const addPattern = pattern => ignoredPatternsStore.add(pattern);
+const removePattern = value => ignoredPatternsStore.remove(value);
+const togglePattern = value => ignoredPatternsStore.toggle(value);
+const togglePatternMode = value => ignoredPatternsStore.toggleMode(value);
+
+/**
+ * Subscribe to the shared ignored-patterns store. All consumers in a runtime
+ * see the same patterns and the same mutations.
+ */
+export function useIgnoredPatterns() {
+  const [patterns, setPatterns] = useState(() => ignoredPatternsStore.getPatterns());
+  useEffect(() => {
+    return ignoredPatternsStore.subscribe(() => {
+      setPatterns(ignoredPatternsStore.getPatterns());
+    });
+  }, []);
+  const values = useMemo(() => new Set(patterns.map(p => p.value)), [patterns]);
+  return {
+    patterns,
+    values,
+    add: addPattern,
+    remove: removePattern,
+    toggle: togglePattern,
+    toggleMode: togglePatternMode
+  };
+}

package/lib/module/stores/index.js

@@ -5,4 +5,4 @@
  */
 
 export { BaseEventStore } from "./BaseEventStore.js";
-export { ignoredPatternsStore, useIgnoredPatterns, urlMatchesIgnoredPattern, isUrlIgnored } from "./ignoredPatternsStore.js";
+export { ignoredPatternsStore, useIgnoredPatterns, urlMatchesIgnoredPattern, isUrlIgnored } from "./ignoredPatternsStore";