@buoy-gg/shared-ui 7.0.16 → 7.0.17

package/lib/commonjs/hooks/index.js

@@ -33,6 +33,12 @@ Object.defineProperty(exports, "useFilterManager", {
     return _useFilterManager.useFilterManager;
   }
 });
+Object.defineProperty(exports, "usePersistedState", {
+  enumerable: true,
+  get: function () {
+    return _usePersistedState.usePersistedState;
+  }
+});
 Object.defineProperty(exports, "useSafeAreaInsets", {
   enumerable: true,
   get: function () {
@@ -40,5 +46,6 @@ Object.defineProperty(exports, "useSafeAreaInsets", {
   }
 });
 var _useFilterManager = require("./useFilterManager.js");
+var _usePersistedState = require("./usePersistedState.js");
 var _useSafeAreaInsets = require("./useSafeAreaInsets.js");
 var _useDeviceInfo = require("./useDeviceInfo.js");

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

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-08-06T20:33:57.771Z
+ * Generated at: 2026-08-07T14:32:36.664Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/hooks/usePersistedState.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePersistedState = usePersistedState;
+var _react = require("react");
+var _persistentStorage = require("../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");
+ * ```
+ */
+function usePersistedState(key, defaultValue) {
+  const [value, setValue] = (0, _react.useState)(() => hydratedCache.has(key) ? hydratedCache.get(key) : defaultValue);
+  const [hydrated, setHydrated] = (0, _react.useState)(() => hydratedCache.has(key));
+  const keyRef = (0, _react.useRef)(key);
+  keyRef.current = key;
+  (0, _react.useEffect)(() => {
+    if (hydratedCache.has(key)) {
+      setValue(hydratedCache.get(key));
+      setHydrated(true);
+      return;
+    }
+    let cancelled = false;
+    _persistentStorage.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 = (0, _react.useCallback)(next => {
+    setValue(prev => {
+      const resolved = typeof next === "function" ? next(prev) : next;
+      hydratedCache.set(keyRef.current, resolved);
+      _persistentStorage.persistentStorage.setItem(keyRef.current, JSON.stringify(resolved)).catch(() => {});
+      return resolved;
+    });
+  }, []);
+  return [value, set, hydrated];
+}

package/lib/commonjs/icons/index.js

@@ -10,6 +10,8 @@ var _exportNames = {
   ENV_ICON_COLOR: true,
   ConsoleIcon: true,
   CONSOLE_ICON_COLOR: true,
+  TimeMachineIcon: true,
+  TIME_MACHINE_ICON_COLOR: true,
   ImagesIcon: true,
   IMAGES_ICON_COLOR: true,
   AssetsIcon: true,
@@ -218,6 +220,18 @@ Object.defineProperty(exports, "StorageStackIcon", {
     return _StorageStackIcon.StorageStackIcon;
   }
 });
+Object.defineProperty(exports, "TIME_MACHINE_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.TIME_MACHINE_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "TimeMachineIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.TimeMachineIcon;
+  }
+});
 Object.defineProperty(exports, "WifiCircuitIcon", {
   enumerable: true,
   get: function () {

package/lib/commonjs/index.js

@@ -29,6 +29,12 @@ var _exportNames = {
   getCachedOptionalModule: true,
   setRenderCaptureProvider: true,
   getRenderCaptureProvider: true,
+  registerStateSnapshotProvider: true,
+  getStateSnapshotProviders: true,
+  getStateSnapshotProvider: true,
+  subscribeToStateSnapshotProviders: true,
+  superJsonSerialize: true,
+  superJsonDeserialize: true,
   reloadApp: true,
   scheduleReloadApp: true,
   resolveReloadStrategy: true,
@@ -248,6 +254,18 @@ Object.defineProperty(exports, "getSafeRouter", {
     return _index3.getSafeRouter;
   }
 });
+Object.defineProperty(exports, "getStateSnapshotProvider", {
+  enumerable: true,
+  get: function () {
+    return _index3.getStateSnapshotProvider;
+  }
+});
+Object.defineProperty(exports, "getStateSnapshotProviders", {
+  enumerable: true,
+  get: function () {
+    return _index3.getStateSnapshotProviders;
+  }
+});
 Object.defineProperty(exports, "getStorageBackendType", {
   enumerable: true,
   get: function () {
@@ -380,6 +398,12 @@ Object.defineProperty(exports, "refreshGameUIColors", {
     return _gameUIColors.refreshGameUIColors;
   }
 });
+Object.defineProperty(exports, "registerStateSnapshotProvider", {
+  enumerable: true,
+  get: function () {
+    return _index3.registerStateSnapshotProvider;
+  }
+});
 Object.defineProperty(exports, "reloadApp", {
   enumerable: true,
   get: function () {
@@ -410,6 +434,12 @@ Object.defineProperty(exports, "setRenderCaptureProvider", {
     return _index3.setRenderCaptureProvider;
   }
 });
+Object.defineProperty(exports, "subscribeToStateSnapshotProviders", {
+  enumerable: true,
+  get: function () {
+    return _index3.subscribeToStateSnapshotProviders;
+  }
+});
 Object.defineProperty(exports, "subscribeToSubscriberCountChanges", {
   enumerable: true,
   get: function () {
@@ -422,6 +452,18 @@ Object.defineProperty(exports, "subscriberCountNotifier", {
     return _index3.subscriberCountNotifier;
   }
 });
+Object.defineProperty(exports, "superJsonDeserialize", {
+  enumerable: true,
+  get: function () {
+    return _index3.superJsonDeserialize;
+  }
+});
+Object.defineProperty(exports, "superJsonSerialize", {
+  enumerable: true,
+  get: function () {
+    return _index3.superJsonSerialize;
+  }
+});
 Object.defineProperty(exports, "truncateText", {
   enumerable: true,
   get: function () {

package/lib/commonjs/storage/devToolsStorageKeys.js

@@ -38,6 +38,28 @@ const devToolsStorageKeys = exports.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/commonjs/ui/components/ModalHeader.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Actions = Actions;
 exports.Content = Content;
+exports.HeaderSearch = HeaderSearch;
 exports.ModalHeader = ModalHeader;
 exports.Navigation = Navigation;
 var _reactNative = require("react-native");
+var _react = require("react");
 var _index = require("../../icons/index.js");
 var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -118,10 +120,51 @@ 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).
+
+function HeaderSearch({
+  value,
+  onChangeText,
+  onCancel,
+  placeholder = "Search...",
+  autoFocus = true
+}) {
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (autoFocus) inputRef.current?.focus();
+  }, [autoFocus]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.searchContainer,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
+      size: 12,
+      color: _gameUIColors.buoyColors.textSecondary
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      ref: inputRef,
+      style: styles.searchInput,
+      placeholder: placeholder,
+      placeholderTextColor: _gameUIColors.buoyColors.textMuted,
+      value: value,
+      onChangeText: onChangeText,
+      autoCorrect: false,
+      autoCapitalize: "none"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      onPress: onCancel,
+      style: styles.searchCancelButton,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+        size: 12,
+        color: _gameUIColors.buoyColors.textSecondary
+      })
+    })]
+  });
+}
+
 // Attach sub-components to the main component
 ModalHeader.Navigation = Navigation;
 ModalHeader.Content = Content;
 ModalHeader.Actions = Actions;
+ModalHeader.Search = HeaderSearch;
 const styles = _reactNative.StyleSheet.create({
   headerContainer: {
     flexDirection: "row",
@@ -169,5 +212,31 @@ const styles = _reactNative.StyleSheet.create({
   },
   headerContentNoMargin: {
     marginHorizontal: 0
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    backgroundColor: _gameUIColors.buoyColors.input,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    marginHorizontal: 12,
+    marginVertical: 4,
+    height: 32,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.border
+  },
+  searchInput: {
+    flex: 1,
+    marginLeft: 8,
+    fontSize: 13,
+    color: _gameUIColors.buoyColors.text,
+    padding: 0,
+    height: "100%"
+  },
+  searchCancelButton: {
+    padding: 4,
+    marginLeft: 4
   }
 });

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

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolButton = ToolButton;
+var _reactNative = require("react-native");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("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".
+ */
+function ToolButton({
+  label,
+  onPress,
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  icon,
+  style
+}) {
+  const palette = VARIANTS[variant];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.label, size === "small" && styles.labelSmall, {
+        color: palette.text
+      }],
+      children: label
+    })]
+  });
+}
+const VARIANTS = {
+  primary: {
+    background: _gameUIColors.buoyColors.primary + "22",
+    border: _gameUIColors.buoyColors.primary + "66",
+    text: _gameUIColors.buoyColors.primary
+  },
+  danger: {
+    background: _gameUIColors.gameUIColors.error + "15",
+    border: _gameUIColors.gameUIColors.error + "60",
+    text: _gameUIColors.gameUIColors.error
+  },
+  warning: {
+    background: _gameUIColors.gameUIColors.warning + "15",
+    border: _gameUIColors.gameUIColors.warning + "60",
+    text: _gameUIColors.gameUIColors.warning
+  },
+  ghost: {
+    background: "transparent",
+    border: "transparent",
+    text: _gameUIColors.buoyColors.textSecondary
+  }
+};
+const styles = _reactNative.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/commonjs/ui/components/index.js

@@ -297,6 +297,12 @@ Object.defineProperty(exports, "TimeDisplay", {
     return _TimeDisplay.TimeDisplay;
   }
 });
+Object.defineProperty(exports, "ToolButton", {
+  enumerable: true,
+  get: function () {
+    return _ToolButton.ToolButton;
+  }
+});
 Object.defineProperty(exports, "ToolbarClearButton", {
   enumerable: true,
   get: function () {
@@ -352,6 +358,7 @@ var _FilterComponents = require("./FilterComponents.js");
 var _CompactFilterChips = require("./CompactFilterChips.js");
 var _Badge = require("./Badge.js");
 var _TabSelector = require("./TabSelector.js");
+var _ToolButton = require("./ToolButton.js");
 var _EventListItem = require("./EventListItem.js");
 var _StatsCard = require("./StatsCard.js");
 var _CompactRow = require("./CompactRow.js");

package/lib/commonjs/ui/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  toolTheme: true,
   CyberpunkSectionButton: true
 };
 Object.defineProperty(exports, "CyberpunkSectionButton", {
@@ -12,6 +13,12 @@ Object.defineProperty(exports, "CyberpunkSectionButton", {
     return _CyberpunkSectionButton.CyberpunkSectionButton;
   }
 });
+Object.defineProperty(exports, "toolTheme", {
+  enumerable: true,
+  get: function () {
+    return _toolTheme.toolTheme;
+  }
+});
 var _index = require("./components/index.js");
 Object.keys(_index).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,6 +31,7 @@ Object.keys(_index).forEach(function (key) {
     }
   });
 });
+var _toolTheme = require("./toolTheme.js");
 var _CyberpunkSectionButton = require("./console/CyberpunkSectionButton.js");
 var _index2 = require("./gameUI/index.js");
 Object.keys(_index2).forEach(function (key) {

package/lib/commonjs/ui/toolTheme.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolTheme = void 0;
+var _gameUIColors = require("./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.
+ */
+const toolTheme = exports.toolTheme = {
+  colors: {
+    /** Modal/page background. */
+    surface: _gameUIColors.buoyColors.base,
+    /** Card / row background, one step above surface. */
+    card: _gameUIColors.buoyColors.card,
+    /** Pressed/hover background. */
+    hover: _gameUIColors.buoyColors.hover,
+    /** Text-input background. */
+    input: _gameUIColors.buoyColors.input,
+    border: _gameUIColors.buoyColors.border,
+    borderStrong: _gameUIColors.buoyColors.borderStrong,
+    text: _gameUIColors.buoyColors.text,
+    textSecondary: _gameUIColors.buoyColors.textSecondary,
+    textMuted: _gameUIColors.buoyColors.textMuted,
+    /** Buoy teal — primary accent. */
+    accent: _gameUIColors.buoyColors.primary,
+    success: _gameUIColors.gameUIColors.success,
+    warning: _gameUIColors.gameUIColors.warning,
+    error: _gameUIColors.gameUIColors.error,
+    info: _gameUIColors.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: _gameUIColors.buoyColors.text
+    },
+    /** Default body copy. */
+    body: {
+      fontSize: 13,
+      color: _gameUIColors.buoyColors.text
+    },
+    /** Secondary copy under a primary line. */
+    subtitle: {
+      fontSize: 12,
+      color: _gameUIColors.buoyColors.textSecondary
+    },
+    /** ALL-CAPS section labels ("LOCAL OVERRIDES"). */
+    label: {
+      fontSize: 10,
+      fontWeight: "700",
+      color: _gameUIColors.buoyColors.textMuted,
+      letterSpacing: 1.2,
+      fontFamily: "monospace"
+    },
+    /** Monospace values (keys, ids, payload snippets). */
+    mono: {
+      fontSize: 11,
+      color: _gameUIColors.buoyColors.textSecondary,
+      fontFamily: "monospace"
+    },
+    /** Timestamps and fine print. */
+    small: {
+      fontSize: 9,
+      color: _gameUIColors.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/commonjs/utils/index.js

@@ -81,6 +81,18 @@ Object.defineProperty(exports, "getSafeRouter", {
     return _safeExpoRouter.getSafeRouter;
   }
 });
+Object.defineProperty(exports, "getStateSnapshotProvider", {
+  enumerable: true,
+  get: function () {
+    return _stateSnapshotRegistry.getStateSnapshotProvider;
+  }
+});
+Object.defineProperty(exports, "getStateSnapshotProviders", {
+  enumerable: true,
+  get: function () {
+    return _stateSnapshotRegistry.getStateSnapshotProviders;
+  }
+});
 Object.defineProperty(exports, "getStorageBackendType", {
   enumerable: true,
   get: function () {
@@ -171,6 +183,12 @@ Object.defineProperty(exports, "persistentStorage", {
     return _persistentStorage.persistentStorage;
   }
 });
+Object.defineProperty(exports, "registerStateSnapshotProvider", {
+  enumerable: true,
+  get: function () {
+    return _stateSnapshotRegistry.registerStateSnapshotProvider;
+  }
+});
 Object.defineProperty(exports, "reloadApp", {
   enumerable: true,
   get: function () {
@@ -201,6 +219,12 @@ Object.defineProperty(exports, "setRenderCaptureProvider", {
     return _renderCaptureRegistry.setRenderCaptureProvider;
   }
 });
+Object.defineProperty(exports, "subscribeToStateSnapshotProviders", {
+  enumerable: true,
+  get: function () {
+    return _stateSnapshotRegistry.subscribeToStateSnapshotProviders;
+  }
+});
 Object.defineProperty(exports, "subscribeToSubscriberCountChanges", {
   enumerable: true,
   get: function () {
@@ -213,6 +237,18 @@ Object.defineProperty(exports, "subscriberCountNotifier", {
     return _subscriberCountNotifier.subscriberCountNotifier;
   }
 });
+Object.defineProperty(exports, "superJsonDeserialize", {
+  enumerable: true,
+  get: function () {
+    return _minimalSuperJSON.deserialize;
+  }
+});
+Object.defineProperty(exports, "superJsonSerialize", {
+  enumerable: true,
+  get: function () {
+    return _minimalSuperJSON.serialize;
+  }
+});
 Object.defineProperty(exports, "truncateText", {
   enumerable: true,
   get: function () {
@@ -252,6 +288,8 @@ var _typeHelpers = require("./typeHelpers.js");
 var _valueFormatting = require("./valueFormatting.js");
 var _loadOptionalModule = require("./loadOptionalModule.js");
 var _renderCaptureRegistry = require("./renderCaptureRegistry.js");
+var _stateSnapshotRegistry = require("./stateSnapshotRegistry.js");
+var _minimalSuperJSON = require("./minimalSuperJSON.js");
 var _reloadApp = require("./reloadApp.js");
 var _subscribable = require("./subscribable.js");
 var _subscriberCountNotifier = require("./subscriberCountNotifier.js");