@buoy-gg/shared-ui 7.0.15 → 7.0.17

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/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 export { useFilterManager } from "./useFilterManager.js";
+export { usePersistedState } from "./usePersistedState.js";
 export { useSafeAreaInsets } from "./useSafeAreaInsets.js";
 export { getSafeAreaInsets } from "./useSafeAreaInsets.js";
 export { useDeviceInfo, getDeviceInfo, logDeviceInfo } from "./useDeviceInfo.js";

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-07T14:32:36.664Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/hooks/usePersistedState.js

@@ -0,0 +1,68 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { persistentStorage } from "../utils/persistentStorage.js";
+
+/**
+ * Per-key cache so remounts (and multiple consumers of the same key) render
+ * the last-known value immediately instead of flashing the default while the
+ * async backend loads again.
+ */
+const hydratedCache = new Map();
+
+/**
+ * `useState` persisted through `persistentStorage` (FileSystem → AsyncStorage
+ * → memory). Replaces the load-then-`hasLoaded`-guard `useEffect` pattern
+ * every tool used to hand-roll.
+ *
+ * Values are JSON-serialized; the default is returned until hydration
+ * completes (subsequent mounts of the same key hydrate synchronously from an
+ * in-memory cache). The third tuple element reports hydration so callers can
+ * defer writes that must not clobber a not-yet-loaded value.
+ *
+ * ```tsx
+ * const [tab, setTab, tabHydrated] = usePersistedState("@react_buoy_custom_flags_tab", "flags");
+ * ```
+ */
+export function usePersistedState(key, defaultValue) {
+  const [value, setValue] = useState(() => hydratedCache.has(key) ? hydratedCache.get(key) : defaultValue);
+  const [hydrated, setHydrated] = useState(() => hydratedCache.has(key));
+  const keyRef = useRef(key);
+  keyRef.current = key;
+  useEffect(() => {
+    if (hydratedCache.has(key)) {
+      setValue(hydratedCache.get(key));
+      setHydrated(true);
+      return;
+    }
+    let cancelled = false;
+    persistentStorage.getItem(key).then(raw => {
+      if (cancelled) return;
+      if (raw != null) {
+        try {
+          const parsed = JSON.parse(raw);
+          hydratedCache.set(key, parsed);
+          setValue(parsed);
+        } catch {
+          // Corrupt payload — fall back to the default and let the next
+          // write repair it.
+        }
+      }
+      setHydrated(true);
+    }).catch(() => {
+      if (!cancelled) setHydrated(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key]);
+  const set = useCallback(next => {
+    setValue(prev => {
+      const resolved = typeof next === "function" ? next(prev) : next;
+      hydratedCache.set(keyRef.current, resolved);
+      persistentStorage.setItem(keyRef.current, JSON.stringify(resolved)).catch(() => {});
+      return resolved;
+    });
+  }, []);
+  return [value, set, hydrated];
+}

package/lib/module/icons/index.js

@@ -11,7 +11,9 @@ export { EnvIcon, ENV_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 // into core, so these are the same artwork the Flutter build renders. Tool
 // packages re-export from here rather than drawing their own copies.
 export { ConsoleIcon, CONSOLE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { TimeMachineIcon, TIME_MACHINE_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

@@ -26,6 +26,10 @@ parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath,
 loadOptionalModule, getCachedOptionalModule,
 // Render-commit capture bridge (provider: highlight-updates, consumer: perf-monitor)
 setRenderCaptureProvider, getRenderCaptureProvider,
+// State snapshot bridge (providers: storage/redux/zustand/jotai/react-query, consumer: time-machine)
+registerStateSnapshotProvider, getStateSnapshotProviders, getStateSnapshotProvider, subscribeToStateSnapshotProviders,
+// Minimal superjson (Date/Map/Set/BigInt-safe round-trip) for snapshot payloads
+superJsonSerialize, superJsonDeserialize,
 // JS-bundle reload (core's `app` adapter + perf-monitor's batch runner)
 reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS,
 // Subscribable base class for self-managing listeners
@@ -53,7 +57,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 +65,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/storage/devToolsStorageKeys.js

@@ -31,6 +31,28 @@ export const devToolsStorageKeys = {
     dimensions: () => `${devToolsStorageKeys.modal.root()}_dimensions`,
     hintAcknowledged: () => `${devToolsStorageKeys.modal.root()}_hint_acknowledged`
   },
+  /**
+   * Namespace factory for third-party custom tools. Keys share the
+   * `@react_buoy` prefix, so `isDevToolsStorageKey` filtering (and the Storage
+   * tool's internal-key handling) covers custom-tool persistence for free.
+   *
+   * ```ts
+   * const keys = devToolsStorageKeys.custom("feature-flags");
+   * keys.modal();          // "@react_buoy_custom_feature-flags_modal"
+   * keys.key("overrides"); // "@react_buoy_custom_feature-flags_overrides"
+   * ```
+   */
+  custom: toolId => {
+    const root = `${devToolsStorageKeys.base}_custom_${toolId}`;
+    return {
+      root: () => root,
+      /** JsModal `persistenceKey` for this tool's window dimensions. */
+      modal: () => `${root}_modal`,
+      settings: () => `${root}_settings`,
+      /** Arbitrary tool-scoped key. */
+      key: suffix => `${root}_${suffix}`
+    };
+  },
   /**
    * Settings-related storage keys
    */

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