@buoy-gg/shared-ui 7.0.15 → 7.0.17

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";

package/lib/module/ui/components/ModalHeader.js

@@ -1,7 +1,8 @@
 "use strict";
 
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { ChevronLeft, X } from "../../icons/index.js";
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { useEffect, useRef } from "react";
+import { ChevronLeft, Search as SearchIcon, X } from "../../icons/index.js";
 import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 
 // Base ModalHeader container component
@@ -111,10 +112,51 @@ export function Actions({
 }
 Actions.displayName = "ModalHeaderActions";
 
+// Expanding search input for the header. Render this IN PLACE OF
+// `ModalHeader.Content` while search is active — it fills the same flex slot.
+// Extracts the idiom env/network/storage each hand-rolled (~50 lines apiece).
+
+export function HeaderSearch({
+  value,
+  onChangeText,
+  onCancel,
+  placeholder = "Search...",
+  autoFocus = true
+}) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (autoFocus) inputRef.current?.focus();
+  }, [autoFocus]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.searchContainer,
+    children: [/*#__PURE__*/_jsx(SearchIcon, {
+      size: 12,
+      color: buoyColors.textSecondary
+    }), /*#__PURE__*/_jsx(TextInput, {
+      ref: inputRef,
+      style: styles.searchInput,
+      placeholder: placeholder,
+      placeholderTextColor: buoyColors.textMuted,
+      value: value,
+      onChangeText: onChangeText,
+      autoCorrect: false,
+      autoCapitalize: "none"
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: onCancel,
+      style: styles.searchCancelButton,
+      children: /*#__PURE__*/_jsx(X, {
+        size: 12,
+        color: buoyColors.textSecondary
+      })
+    })]
+  });
+}
+
 // Attach sub-components to the main component
 ModalHeader.Navigation = Navigation;
 ModalHeader.Content = Content;
 ModalHeader.Actions = Actions;
+ModalHeader.Search = HeaderSearch;
 const styles = StyleSheet.create({
   headerContainer: {
     flexDirection: "row",
@@ -162,5 +204,31 @@ const styles = StyleSheet.create({
   },
   headerContentNoMargin: {
     marginHorizontal: 0
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    backgroundColor: buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    marginHorizontal: 12,
+    marginVertical: 4,
+    height: 32,
+    borderWidth: 1,
+    borderColor: buoyColors.border
+  },
+  searchInput: {
+    flex: 1,
+    marginLeft: 8,
+    fontSize: 13,
+    color: buoyColors.text,
+    padding: 0,
+    height: "100%"
+  },
+  searchCancelButton: {
+    padding: 4,
+    marginLeft: 4
   }
 });

package/lib/module/ui/components/ToolButton.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { buoyColors, gameUIColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The shared action button for dev-tool surfaces. Fills the gap where every
+ * tool hand-styled its own TouchableOpacity for "Clear", "Apply", "Reset".
+ */
+export function ToolButton({
+  label,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  icon,
+  style
+}) {
+  const palette = VARIANTS[variant];
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    onPress: onPress,
+    disabled: disabled,
+    style: [styles.base, size === "small" ? styles.small : styles.medium, {
+      backgroundColor: palette.background,
+      borderColor: palette.border,
+      borderWidth: variant === "ghost" ? 0 : 1
+    }, disabled && styles.disabled, style],
+    children: [icon, /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, size === "small" && styles.labelSmall, {
+        color: palette.text
+      }],
+      children: label
+    })]
+  });
+}
+const VARIANTS = {
+  primary: {
+    background: buoyColors.primary + "22",
+    border: buoyColors.primary + "66",
+    text: buoyColors.primary
+  },
+  danger: {
+    background: gameUIColors.error + "15",
+    border: gameUIColors.error + "60",
+    text: gameUIColors.error
+  },
+  warning: {
+    background: gameUIColors.warning + "15",
+    border: gameUIColors.warning + "60",
+    text: gameUIColors.warning
+  },
+  ghost: {
+    background: "transparent",
+    border: "transparent",
+    text: buoyColors.textSecondary
+  }
+};
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderRadius: 8
+  },
+  medium: {
+    paddingVertical: 8,
+    paddingHorizontal: 14
+  },
+  small: {
+    paddingVertical: 5,
+    paddingHorizontal: 10
+  },
+  disabled: {
+    opacity: 0.4
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  labelSmall: {
+    fontSize: 11
+  }
+});

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

@@ -13,6 +13,7 @@ export { FilterSection, FilterBadge, AddFilterInput, AddFilterButton, FilterList
 export { CompactFilterChips } from "./CompactFilterChips.js";
 export { Badge, StatusBadge, CountBadge, TypeBadge, MethodBadge } from "./Badge.js";
 export { TabSelector } from "./TabSelector.js";
+export { ToolButton } from "./ToolButton.js";
 export { EventListItem } from "./EventListItem.js";
 export { StatsCard } from "./StatsCard.js";
 export { CompactRow } from "./CompactRow.js";

package/lib/module/ui/gameUI/constants/gameUIColors.js

@@ -15,7 +15,9 @@ import { macOSGameUIColors, refreshMacOSGameUIColors } from "./macOSDesignSystem
 // THEME DEFINITIONS
 // ============================================
 
-const defaultTheme = {
+// Kept (and exported) as the reference palette for theme swapping — see the
+// header comment. Unused by the active theme selection.
+export const _defaultTheme = {
   // Base colors
   border: "#00B8E666",
   blackTint1: "rgba(8, 12, 21, 0.95)",
@@ -119,7 +121,7 @@ const macOSTheme = macOSGameUIColors;
 // THEME SELECTION - Just change this one line!
 // ============================================
 
-// const activeTheme = defaultTheme; // DEFAULT - Mixed colors (original)
+// const activeTheme = _defaultTheme; // DEFAULT - Mixed colors (original)
 const activeTheme = macOSTheme; // macOS - Apple HIG design system
 
 // ============================================

package/lib/module/ui/index.js

@@ -5,6 +5,9 @@
 // Components
 export * from "./components/index.js";
 
+// Semantic design tokens for tool surfaces
+export { toolTheme } from "./toolTheme.js";
+
 // Console UI bits
 export { CyberpunkSectionButton } from "./console/CyberpunkSectionButton.js";
 

package/lib/module/ui/toolTheme.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import { buoyColors, gameUIColors } from "./gameUI/constants/gameUIColors.js";
+
+/**
+ * Semantic design tokens for dev-tool surfaces — the single documented entry
+ * point for custom-tool authors (and, over time, internal tools).
+ *
+ * Buoy historically grew three color systems (`buoyColors`, `gameUIColors`,
+ * `macOSColors`) with tribal knowledge about which to use where. `toolTheme`
+ * encodes that knowledge: surfaces/text come from the brand palette, semantic
+ * status colors from the gameUI palette. Consumers should not need to know
+ * that split exists.
+ */
+export const toolTheme = {
+  colors: {
+    /** Modal/page background. */
+    surface: buoyColors.base,
+    /** Card / row background, one step above surface. */
+    card: buoyColors.card,
+    /** Pressed/hover background. */
+    hover: buoyColors.hover,
+    /** Text-input background. */
+    input: buoyColors.input,
+    border: buoyColors.border,
+    borderStrong: buoyColors.borderStrong,
+    text: buoyColors.text,
+    textSecondary: buoyColors.textSecondary,
+    textMuted: buoyColors.textMuted,
+    /** Buoy teal — primary accent. */
+    accent: buoyColors.primary,
+    success: gameUIColors.success,
+    warning: gameUIColors.warning,
+    error: gameUIColors.error,
+    info: gameUIColors.info
+  },
+  /**
+   * Text presets matching the styles internal tools re-declare per file.
+   * Spread into a style: `style={[toolTheme.text.label, { color: ... }]}`.
+   */
+  text: {
+    /** Modal/section titles. */
+    title: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: buoyColors.text
+    },
+    /** Default body copy. */
+    body: {
+      fontSize: 13,
+      color: buoyColors.text
+    },
+    /** Secondary copy under a primary line. */
+    subtitle: {
+      fontSize: 12,
+      color: buoyColors.textSecondary
+    },
+    /** ALL-CAPS section labels ("LOCAL OVERRIDES"). */
+    label: {
+      fontSize: 10,
+      fontWeight: "700",
+      color: buoyColors.textMuted,
+      letterSpacing: 1.2,
+      fontFamily: "monospace"
+    },
+    /** Monospace values (keys, ids, payload snippets). */
+    mono: {
+      fontSize: 11,
+      color: buoyColors.textSecondary,
+      fontFamily: "monospace"
+    },
+    /** Timestamps and fine print. */
+    small: {
+      fontSize: 9,
+      color: buoyColors.textMuted,
+      fontFamily: "monospace"
+    }
+  },
+  /** 4-based spacing scale used across tool surfaces. */
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24
+  },
+  radius: {
+    sm: 6,
+    md: 8,
+    lg: 12,
+    pill: 9999
+  }
+};

package/lib/module/utils/index.js

@@ -9,6 +9,8 @@ export { getValueType, isPrimitive, isJsonSerializable, isValidJson, getConstruc
 export { parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath } from "./valueFormatting.js";
 export { loadOptionalModule, getCachedOptionalModule } from "./loadOptionalModule.js";
 export { setRenderCaptureProvider, getRenderCaptureProvider } from "./renderCaptureRegistry.js";
+export { registerStateSnapshotProvider, getStateSnapshotProviders, getStateSnapshotProvider, subscribeToStateSnapshotProviders } from "./stateSnapshotRegistry.js";
+export { serialize as superJsonSerialize, deserialize as superJsonDeserialize } from "./minimalSuperJSON.js";
 export { reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS } from "./reloadApp.js";
 export { Subscribable } from "./subscribable.js";
 export { subscriberCountNotifier, subscribeToSubscriberCountChanges, notifySubscriberCountChange } from "./subscriberCountNotifier.js";

package/lib/module/utils/stateSnapshotRegistry.js

@@ -0,0 +1,55 @@
+"use strict";
+
+/**
+ * Cross-package bridge for app-state snapshot & restore (Time Machine).
+ *
+ * Each state tool (`@buoy-gg/storage`, `@buoy-gg/redux`, `@buoy-gg/zustand`,
+ * `@buoy-gg/jotai`, `@buoy-gg/react-query`) registers a provider here at
+ * module init (or from its app-lifetime sync hook); `@buoy-gg/time-machine`
+ * consumes the registry. Neither side imports the other — same
+ * optional-capability pattern as renderCaptureRegistry.
+ *
+ * Apps can also register custom providers for state Buoy doesn't know about.
+ */
+
+const providers = new Map();
+const listeners = new Set();
+function notify() {
+  listeners.forEach(l => {
+    try {
+      l();
+    } catch {
+      // listener errors must not break registration
+    }
+  });
+}
+
+/**
+ * Register a provider. Last registration wins for a given id.
+ * Returns an unregister function (only removes the provider if it is still
+ * the registered one for that id).
+ */
+export function registerStateSnapshotProvider(provider) {
+  providers.set(provider.id, provider);
+  notify();
+  return () => {
+    if (providers.get(provider.id) === provider) {
+      providers.delete(provider.id);
+      notify();
+    }
+  };
+}
+export function getStateSnapshotProviders() {
+  return Array.from(providers.values());
+}
+export function getStateSnapshotProvider(id) {
+  return providers.get(id) ?? null;
+}
+
+/** Notifies when providers register/unregister (query registers late). */
+export function subscribeToStateSnapshotProviders(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}