@buoy-gg/shared-ui 7.0.15 → 7.0.17

package/lib/commonjs/stores/ignoredPatternsStore.js

@@ -4,12 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ignoredPatternsStore = void 0;
-exports.isUrlIgnored = isUrlIgnored;
-exports.urlMatchesIgnoredPattern = urlMatchesIgnoredPattern;
+Object.defineProperty(exports, "isUrlIgnored", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsCore.isUrlIgnored;
+  }
+});
+Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsCore.urlMatchesIgnoredPattern;
+  }
+});
 exports.useIgnoredPatterns = useIgnoredPatterns;
 var _react = require("react");
 var _persistentStorage = require("../utils/persistentStorage.js");
 var _devToolsStorageKeys = require("../storage/devToolsStorageKeys.js");
+var _ignoredPatternsCore = require("./ignoredPatternsCore.js");
 /**
  * Shared "ignored patterns" store for network-style URL filtering.
  *
@@ -23,57 +34,10 @@ var _devToolsStorageKeys = require("../storage/devToolsStorageKeys.js");
  * having to take a hard dependency on @buoy-gg/network (which is optional).
  */
 
-/**
- * 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. */
+// Pure matching types/helpers live in ignoredPatternsCore.ts (web-shim-safe);
+// re-exported here so the shared-ui barrel surface is unchanged.
 
-/** 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).
- */
-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`? */
-function isUrlIgnored(url, patterns) {
-  if (!url || patterns.length === 0) return false;
-  return patterns.some(pattern => urlMatchesIgnoredPattern(url, pattern));
-}
+const DEFAULT_PATTERNS = _ignoredPatternsCore.DEFAULT_IGNORED_PATTERNS;
 
 /** Tolerate the legacy `string[]` persisted format and stray junk. */
 function migratePatterns(raw) {

package/lib/commonjs/stores/ignoredPatternsStore.web.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ignoredPatternsStore = void 0;
+Object.defineProperty(exports, "isUrlIgnored", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsCore.isUrlIgnored;
+  }
+});
+Object.defineProperty(exports, "urlMatchesIgnoredPattern", {
+  enumerable: true,
+  get: function () {
+    return _ignoredPatternsCore.urlMatchesIgnoredPattern;
+  }
+});
+exports.useIgnoredPatterns = useIgnoredPatterns;
+var _react = require("react");
+var _devToolsStorageKeys = require("../storage/devToolsStorageKeys.js");
+var _ignoredPatternsCore = require("./ignoredPatternsCore.js");
+/**
+ * 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
+ */
+
+// Pure matching types/helpers live in ignoredPatternsCore.ts (web-shim-safe);
+// re-exported here so this module's surface twins the native store's.
+
+/**
+ * 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 = _ignoredPatternsCore.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.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.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));
+  }
+}
+const ignoredPatternsStore = exports.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.
+ */
+function useIgnoredPatterns() {
+  const [patterns, setPatterns] = (0, _react.useState)(() => ignoredPatternsStore.getPatterns());
+  (0, _react.useEffect)(() => {
+    return ignoredPatternsStore.subscribe(() => {
+      setPatterns(ignoredPatternsStore.getPatterns());
+    });
+  }, []);
+  const values = (0, _react.useMemo)(() => new Set(patterns.map(p => p.value)), [patterns]);
+  return {
+    patterns,
+    values,
+    add: addPattern,
+    remove: removePattern,
+    toggle: togglePattern,
+    toggleMode: togglePatternMode
+  };
+}

package/lib/commonjs/stores/index.js

@@ -34,4 +34,4 @@ Object.defineProperty(exports, "useIgnoredPatterns", {
   }
 });
 var _BaseEventStore = require("./BaseEventStore.js");
-var _ignoredPatternsStore = require("./ignoredPatternsStore.js");
+var _ignoredPatternsStore = require("./ignoredPatternsStore");

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/gameUI/constants/gameUIColors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.refreshGameUIColors = exports.gameUIColors = exports.dialColors = exports.buoyColors = void 0;
+exports.refreshGameUIColors = exports.gameUIColors = exports.dialColors = exports.buoyColors = exports._defaultTheme = void 0;
 var _macOSDesignSystemColors = require("./macOSDesignSystemColors.js");
 /**
  * Game UI Color Palette - Simple Theme Swapping
@@ -18,7 +18,9 @@ var _macOSDesignSystemColors = require("./macOSDesignSystemColors.js");
 // THEME DEFINITIONS
 // ============================================
 
-const defaultTheme = {
+// Kept (and exported) as the reference palette for theme swapping — see the
+// header comment. Unused by the active theme selection.
+const _defaultTheme = exports._defaultTheme = {
   // Base colors
   border: "#00B8E666",
   blackTint1: "rgba(8, 12, 21, 0.95)",
@@ -122,7 +124,7 @@ const macOSTheme = _macOSDesignSystemColors.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/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
+  }
+};