@buoy-gg/shared-ui 7.0.16 → 7.0.18

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

@@ -12,12 +12,17 @@ function HeaderSearchButton({
   onPress,
   size = 14,
   color = _index2.gameUIColors.secondary,
-  style
+  style,
+  accessibilityLabel = "Search",
+  testID
 }) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
     onPress: onPress,
     style: [styles.button, style],
     activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
       size: size,
       color: color

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

package/lib/commonjs/utils/persistentStorage.js

@@ -492,6 +492,12 @@ async function initStorage() {
       await migrateFromAsyncStorage();
     }
     storageBackend = "filesystem";
+  } else if (isWebEnvironment()) {
+    // Prefer localStorage on web (marketing site, RN-web, Electron renderer)
+    // BEFORE AsyncStorage. Hosts often alias AsyncStorage to a demo/remote
+    // shim that must not own buoy prefs — and must not trip the "fallback"
+    // warning on every page load.
+    storageBackend = "localstorage";
   } else {
     // Try AsyncStorage (React Native)
     const asyncStorage = loadAsyncStorage();
@@ -501,9 +507,6 @@ async function initStorage() {
         initWarningShown = true;
         console.warn("[React Buoy] Using AsyncStorage fallback. " + "Settings may be lost if AsyncStorage is cleared. " + "Install expo-file-system for persistent storage.");
       }
-    } else if (isWebEnvironment()) {
-      // Try localStorage (Web)
-      storageBackend = "localstorage";
     } else {
       storageBackend = "memory";
       if (!initWarningShown) {

package/lib/commonjs/utils/stateSnapshotRegistry.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStateSnapshotProvider = getStateSnapshotProvider;
+exports.getStateSnapshotProviders = getStateSnapshotProviders;
+exports.registerStateSnapshotProvider = registerStateSnapshotProvider;
+exports.subscribeToStateSnapshotProviders = subscribeToStateSnapshotProviders;
+/**
+ * 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.
+ */
+
+/**
+ * Per-item verdict in a Restore Preview. The critical distinction:
+ * "changed" means the restore WILL apply this difference; "wont-apply" means
+ * a difference exists (or an item does) that restore can NOT apply, with the
+ * reason. A preview that shows raw diffs without this distinction lies.
+ */
+
+// beyond diff budgets; treated as changed, not rendered
+
+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).
+ */
+function registerStateSnapshotProvider(provider) {
+  providers.set(provider.id, provider);
+  notify();
+  return () => {
+    if (providers.get(provider.id) === provider) {
+      providers.delete(provider.id);
+      notify();
+    }
+  };
+}
+function getStateSnapshotProviders() {
+  return Array.from(providers.values());
+}
+function getStateSnapshotProvider(id) {
+  return providers.get(id) ?? null;
+}
+
+/** Notifies when providers register/unregister (query registers late). */
+function subscribeToStateSnapshotProviders(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}