@buoy-gg/shared-ui 3.0.1 → 4.0.1

package/lib/module/license/FeatureGate.js

@@ -7,24 +7,40 @@
  */
 
 import React, { useState, useCallback } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, Linking, Modal } from "react-native";
+import { View, Text, StyleSheet, TouchableOpacity, Modal } from "react-native";
 import { gameUIColors, buoyColors } from "../ui/gameUI/constants/gameUIColors.js";
 import { LockIcon, X, Zap, Shield, Clock, Check } from "../icons/lucide-icons.js";
 import { LicenseEntryModal } from "./LicenseEntryModal.js";
-import { useIsPro, useLicense } from "@buoy-gg/license";
+import { openPricing, isWeb } from "./openPricing.js";
+import { useIsPro, useLicense, useProAccess } from "@buoy-gg/license";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Weekend Pass branding — a distinct violet so it never reads as the gold PRO.
+export const WEEKEND_PASS_LABEL = "WEEKEND PASS";
+const WEEKEND_VIOLET = "#BF5AF2";
+
 /**
- * Simple Pro badge for marking premium features
+ * Simple Pro badge for marking premium features.
+ *
+ * Reason-aware: when the free Weekend Pass is the active unlock (a free user on
+ * a weekend), it shows a violet "WEEKEND PASS" badge instead of the gold "PRO"
+ * so people know Pro is free this weekend. A real license — or a free user on a
+ * weekday seeing the badge as a Pro-feature marker — shows "PRO".
  */
 export const ProBadge = ({
   style
-}) => /*#__PURE__*/_jsx(View, {
-  style: [styles.proBadge, style],
-  children: /*#__PURE__*/_jsx(Text, {
-    style: styles.proBadgeText,
-    children: "PRO"
-  })
-});
+}) => {
+  const {
+    reason
+  } = useProAccess();
+  const weekend = reason === "weekend";
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.proBadge, weekend && styles.weekendBadge, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.proBadgeText, weekend && styles.weekendBadgeText],
+      children: weekend ? WEEKEND_PASS_LABEL : "PRO"
+    })
+  });
+};
 
 /**
  * Simple Pro upgrade modal - minimal modal with just upgrade button
@@ -56,6 +72,10 @@ export const UpgradePrompt = ({
   const handlePress = useCallback(() => {
     if (onUpgradePress) {
       onUpgradePress();
+    } else if (isWeb) {
+      // Desktop dashboard: buy on the website, not via the mobile Buoy.init()
+      // code path. (Already have a key? Enter it from the toolbar Upgrade button.)
+      openPricing();
     } else {
       setShowLicenseModal(true);
     }
@@ -181,13 +201,21 @@ export const FeatureGate = ({
  * Returns { hasAccess, isPro, showUpgrade }
  */
 export function useFeatureGate() {
-  const isPro = useIsPro();
+  const {
+    isPro,
+    isLicensed,
+    isWeekendFree,
+    reason
+  } = useProAccess();
   const showUpgrade = () => {
-    Linking.openURL("https://buoy.gg/pro");
+    openPricing("https://buoy.gg/pro");
   };
   return {
     hasAccess: isPro,
     isPro,
+    isLicensed,
+    isWeekendFree,
+    reason,
     showUpgrade
   };
 }
@@ -205,6 +233,12 @@ export const ProFeatureBanner = ({
   const [showLicenseModal, setShowLicenseModal] = useState(false);
   const license = useLicense();
   const handleUpgrade = useCallback(() => {
+    // Desktop dashboard: open pricing in the browser instead of the mobile
+    // license-entry modal.
+    if (isWeb) {
+      openPricing();
+      return;
+    }
     setShowLicenseModal(true);
   }, []);
   const handleCloseModal = useCallback(() => {
@@ -280,6 +314,12 @@ export const UpgradeModal = ({
   const [showLicenseModal, setShowLicenseModal] = useState(false);
   const license = useLicense();
   const handleUpgrade = useCallback(() => {
+    // Desktop dashboard: send users straight to the pricing page in their
+    // browser instead of the mobile Buoy.init() license-entry modal.
+    if (isWeb) {
+      openPricing();
+      return;
+    }
     setShowLicenseModal(true);
   }, []);
   const handleCloseLicenseModal = useCallback(() => {
@@ -414,6 +454,15 @@ const styles = StyleSheet.create({
     color: buoyColors.primary,
     letterSpacing: 0.5
   },
+  // Weekend Pass variant — violet instead of the gold/primary PRO.
+  weekendBadge: {
+    backgroundColor: WEEKEND_VIOLET + "1A",
+    borderColor: WEEKEND_VIOLET + "55"
+  },
+  weekendBadgeText: {
+    color: WEEKEND_VIOLET,
+    letterSpacing: 0.4
+  },
   container: {
     padding: 20,
     alignItems: "center",

package/lib/module/license/LicenseEntryModal.js

@@ -9,8 +9,10 @@
  */
 
 import React, { useCallback } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Linking, Modal, Platform } from "react-native";
+import { View, Text, TouchableOpacity, StyleSheet, Modal, Platform } from "react-native";
+import { absoluteFill } from "../utils/absoluteFill.js";
 import { macOSColors } from "../ui/gameUI/constants/macOSDesignSystemColors.js";
+import { openPricing, isWeb } from "./openPricing.js";
 import { X, Key, Link, FileCode, Copy } from "../icons/lucide-icons.js";
 
 // For clipboard functionality
@@ -36,7 +38,7 @@ export const LicenseEntryModal = ({
 }) => {
   const [copied, setCopied] = React.useState(false);
   const handleGetLicense = useCallback(() => {
-    Linking.openURL(purchaseUrl);
+    openPricing(purchaseUrl);
   }, [purchaseUrl]);
   const handleCopyCode = useCallback(() => {
     if (Clipboard?.setString) {
@@ -102,7 +104,16 @@ export const LicenseEntryModal = ({
           }), /*#__PURE__*/_jsx(View, {
             style: styles.dividerLine
           })]
-        }), /*#__PURE__*/_jsxs(View, {
+        }), isWeb ? /*#__PURE__*/_jsx(View, {
+          style: styles.instructionsContainer,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.instructionsNote,
+            children: "Click the Upgrade button in the top toolbar and paste your license key. It also unlocks automatically when a connected device is running Buoy Pro."
+          })
+        }) :
+        /*#__PURE__*/
+        /* Option 2: Instructions */
+        _jsxs(View, {
           style: styles.instructionsContainer,
           children: [/*#__PURE__*/_jsxs(View, {
             style: styles.instructionsHeader,
@@ -194,7 +205,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/license/openPricing.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import { Linking, Platform } from "react-native";
+export const PRICING_URL = "https://buoy.gg/pricing";
+
+/** True when running on the desktop dashboard / web (react-native-web). */
+export const isWeb = Platform.OS === "web";
+
+/**
+ * Open an upgrade/pricing URL.
+ *
+ * On the desktop dashboard (web) the upgrade flow is NOT the mobile
+ * `Buoy.init()` code path — the user buys on the website (or enters a key in
+ * the toolbar). Route the link through the Electron shell bridge so it lands in
+ * the user's DEFAULT browser instead of a bare in-app window; fall back to
+ * window.open for a plain browser tab. On native, use React Native Linking.
+ */
+export function openPricing(url = PRICING_URL) {
+  // Access the browser globals via globalThis so this file doesn't depend on
+  // the DOM lib (the shared package targets React Native).
+  const win = globalThis.window;
+  if (isWeb && win) {
+    if (win.buoyShell?.openExternal) {
+      win.buoyShell.openExternal(url);
+      return;
+    }
+    win.open?.(url, "_blank", "noopener");
+    return;
+  }
+  Linking.openURL(url);
+}

package/lib/module/storage/devToolsStorageKeys.js

@@ -91,6 +91,7 @@ export const devToolsStorageKeys = {
     filters: () => `${devToolsStorageKeys.storage.root()}_filters`,
     eventFilters: () => `${devToolsStorageKeys.storage.root()}_event_filters`,
     keyFilters: () => `${devToolsStorageKeys.storage.root()}_key_filters`,
+    pinnedKeys: () => `${devToolsStorageKeys.storage.root()}_pinned_keys`,
     preferences: () => `${devToolsStorageKeys.storage.root()}_preferences`,
     activeTab: () => `${devToolsStorageKeys.storage.root()}_active_tab`,
     isMonitoring: () => `${devToolsStorageKeys.storage.root()}_is_monitoring`,

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;
   }
 
   /**

package/lib/module/stores/ignoredPatternsStore.js

@@ -0,0 +1,223 @@
+"use strict";
+
+/**
+ * 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).
+ */
+
+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));
+}
+
+/** 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.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();
+/**
+ * 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: pattern => ignoredPatternsStore.add(pattern),
+    remove: value => ignoredPatternsStore.remove(value),
+    toggle: value => ignoredPatternsStore.toggle(value),
+    toggleMode: value => ignoredPatternsStore.toggleMode(value)
+  };
+}

package/lib/module/stores/index.js

@@ -4,4 +4,5 @@
  * Shared store utilities and base classes
  */
 
-export { BaseEventStore } from "./BaseEventStore.js";
+export { BaseEventStore } from "./BaseEventStore.js";
+export { ignoredPatternsStore, useIgnoredPatterns, urlMatchesIgnoredPattern, isUrlIgnored } from "./ignoredPatternsStore.js";