@buoy-gg/shared-ui 7.0.33 → 7.0.35

package/lib/module/dataViewer/DiffSummary.js

@@ -9,6 +9,7 @@
 
 import React, { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * DiffSummary displays a summary bar showing diff statistics.
@@ -112,17 +113,17 @@ const styles = StyleSheet.create({
   },
   icon: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700"
   },
   count: {
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   label: {
     fontSize: 9,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.9
   }
 });

package/lib/module/dataViewer/LiveExplorer.js

@@ -35,7 +35,7 @@ import { CopyButton as SharedCopyButton } from "../ui/components/CopyButton.js";
 import { ChevronRight, ChevronDown, Trash } from "../icons/index.js";
 import { CyberpunkInput } from "./CyberpunkInput.js";
 import { updateNestedDataByPath, deleteNestedDataByPath } from "./nestedPath.js";
-
+import { monoFont } from "../ui/fonts.js";
 /**
  * How the explorer writes into whatever owns the data. The tree never mutates
  * anything itself — every edit is handed to the host through this.
@@ -654,7 +654,7 @@ const styles = StyleSheet.create({
   clearButtonText: {
     fontSize: 12,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   expanderIcon: {
     width: 18,
@@ -741,7 +741,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     marginRight: 4,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4
   },
   labelTextFocused: {
@@ -757,14 +757,14 @@ const styles = StyleSheet.create({
     color: night.color.textTertiary,
     fontSize: 10,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.7
   },
   pageRangeText: {
     color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   flexRowGapItemsCenter: {
     flexDirection: "row",
@@ -817,11 +817,11 @@ const styles = StyleSheet.create({
   textNumber: {
     color: night.color.text,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   textString: {
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   flexRowGapFullWidth: {
     flexDirection: "row",
@@ -838,7 +838,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     fontSize: 9,
     minWidth: 50,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4,
     opacity: 0.8
   },
@@ -851,7 +851,7 @@ const styles = StyleSheet.create({
     flex: 1,
     color: night.color.text,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     paddingVertical: 6,
     paddingHorizontal: 10,
@@ -885,7 +885,7 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     textTransform: "uppercase",
     letterSpacing: 0.8,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   toggleBadgeTrue: {
     backgroundColor: night.color.accent + "1A",
@@ -914,7 +914,7 @@ const styles = StyleSheet.create({
     color: night.color.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4,
     minWidth: 60,
     flexShrink: 0

package/lib/module/dataViewer/SplitDiffViewer.js

@@ -13,6 +13,7 @@ import { View, Text, ScrollView, StyleSheet } from "react-native";
 import { computeLineDiff, DiffType } from "./lineDiff.js";
 import { DiffSummary } from "./DiffSummary.js";
 import { devToolsDefaultTheme } from "./diffThemes.js";
+import { monoFont } from "../ui/fonts.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * SplitDiffViewer displays a side-by-side diff comparison.
@@ -281,13 +282,13 @@ function createDynamicStyles(theme, height) {
       fontSize: 12,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5
     },
     themeDescription: {
       fontSize: 10,
       color: theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       marginTop: 2,
       opacity: 0.8
     },
@@ -311,7 +312,7 @@ function createDynamicStyles(theme, height) {
       fontSize: 10,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5,
       textTransform: "uppercase"
     },
@@ -355,7 +356,7 @@ function createDynamicStyles(theme, height) {
     },
     lineNumber: {
       fontSize: 9,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       color: theme.lineNumberText
     },
     marker: {
@@ -368,7 +369,7 @@ function createDynamicStyles(theme, height) {
     },
     markerText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       fontWeight: "600"
     },
     contentCell: {
@@ -381,12 +382,12 @@ function createDynamicStyles(theme, height) {
     },
     content: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       lineHeight: 16
     },
     wordDiff: {
       fontSize: 10,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     },
     separator: {
       height: 20,
@@ -397,7 +398,7 @@ function createDynamicStyles(theme, height) {
     separatorText: {
       fontSize: 8,
       color: theme.separatorText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 2
     },
     emptyState: {
@@ -409,7 +410,7 @@ function createDynamicStyles(theme, height) {
       fontSize: 11,
       color: theme.emptyStateText,
       fontStyle: "italic",
-      fontFamily: "monospace"
+      fontFamily: monoFont
     }
   });
 }

package/lib/module/dataViewer/ThemedSplitView.js

@@ -18,6 +18,7 @@ import { TimestampDeltaBar } from "./TimestampDeltaBar.js";
 import { describeTimestampDeltas } from "./timestampDiff.js";
 import { JsonStringNotice } from "./JsonStringNotice.js";
 import { decodeJsonStringPair } from "./jsonStringValue.js";
+import { monoFont } from "../ui/fonts.js";
 
 /** Rendering options (the shape storage's DiffOptionsPanel edits). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -469,13 +470,13 @@ function createDynamicStyles(theme, scrollEnabled) {
       fontSize: 12,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5
     },
     themeDescription: {
       fontSize: 10,
       color: theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       marginTop: 2,
       opacity: 0.8
     },
@@ -499,7 +500,7 @@ function createDynamicStyles(theme, scrollEnabled) {
       fontSize: 10,
       fontWeight: "700",
       color: theme.accentColor || theme.unchangedText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5,
       textTransform: "uppercase"
     },
@@ -543,7 +544,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     lineNumber: {
       fontSize: 9,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       color: theme.lineNumberText
     },
     marker: {
@@ -556,7 +557,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     markerText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       fontWeight: "600"
     },
     contentCell: {
@@ -569,12 +570,12 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     content: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       lineHeight: 16
     },
     wordDiff: {
       fontSize: 10,
-      fontFamily: "monospace"
+      fontFamily: monoFont
     },
     summaryBar: {
       flexDirection: "row",
@@ -592,7 +593,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     summaryText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       fontWeight: "700"
     },
     separator: {
@@ -604,7 +605,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     separatorText: {
       fontSize: 8,
       color: theme.separatorText,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 2
     },
     foldHeader: {
@@ -618,7 +619,7 @@ function createDynamicStyles(theme, scrollEnabled) {
     },
     foldHeaderText: {
       fontSize: 10,
-      fontFamily: "monospace",
+      fontFamily: monoFont,
       letterSpacing: 0.5
     },
     emptyState: {
@@ -630,7 +631,7 @@ function createDynamicStyles(theme, scrollEnabled) {
       fontSize: 11,
       color: theme.emptyStateText,
       fontStyle: "italic",
-      fontFamily: "monospace"
+      fontFamily: monoFont
     }
   });
 }

package/lib/module/dataViewer/ValueEditModal.js

@@ -32,6 +32,7 @@ import { absoluteFill } from "../utils/absoluteFill.js";
 import { macOSColors } from "../ui/gameUI/index.js";
 import { night } from "../ui/night/nightTheme.js";
 import { breadcrumb, typeLabel } from "./treeActions.js";
+import { monoFont } from "../ui/fonts.js";
 
 /**
  * How this value gets edited. Driven by the value's own type, which is also
@@ -270,12 +271,12 @@ const styles = StyleSheet.create({
     color: macOSColors.semantic.warning,
     fontSize: 10,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   path: {
     color: night.color.textTertiary,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   /** Caps the panel's height so a huge blob can't push the buttons off-screen. */
   fieldScroll: {
@@ -290,7 +291,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 10,
     fontSize: 14,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   inputMultiline: {
     minHeight: 110,
@@ -314,7 +315,7 @@ const styles = StyleSheet.create({
     color: night.color.danger,
     fontSize: 11,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   actions: {
     flexDirection: "row",
@@ -373,7 +374,7 @@ const styles = StyleSheet.create({
     color: night.color.textTertiary,
     fontSize: 16,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   boolTextActive: {
     color: macOSColors.semantic.warning

package/lib/module/dataViewer/VirtualizedDataExplorer.js

@@ -8,8 +8,9 @@ import { night } from "../ui/night/nightTheme.js";
 import { CopyButton } from "../ui/components/CopyButton.js";
 import { ChevronRight } from "../icons/index.js";
 import { IndentGuidesOverlay } from "./IndentGuidesOverlay.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { monoFont } from "../ui/fonts.js";
 // Stable constants to prevent re-renders [[memory:4875251]]
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const HIT_SLOP_10 = {
   top: 10,
   bottom: 10,
@@ -174,7 +175,7 @@ const STABLE_STYLES = StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     // font-medium
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginRight: 8,
     flexShrink: 1
   },
@@ -184,12 +185,12 @@ const STABLE_STYLES = StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     // font-medium
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flexShrink: 1
   },
   valueText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1,
     color: gameUIColors.primaryLight // text-gray-300
   },

package/lib/module/dataViewer/tree/TreeDiffViewer.js

@@ -19,7 +19,7 @@ import React, { useMemo, useState, useEffect, useRef } from "react";
 import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from "react-native";
 import { gameUIColors, night } from "@buoy-gg/shared-ui";
 import { isAbsent } from "../lineDiff.js";
-
+import { monoFont } from "../../ui/fonts.js";
 // ============================================
 // TYPES & INTERFACES
 // ============================================
@@ -785,16 +785,16 @@ const styles = StyleSheet.create({
   summaryIcon: {
     fontSize: 14,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   summaryCount: {
     fontSize: 13,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   summaryLabel: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.9
   },
   scrollView: {
@@ -818,7 +818,7 @@ const styles = StyleSheet.create({
   },
   lineNumberText: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "right"
   },
   marker: {
@@ -830,7 +830,7 @@ const styles = StyleSheet.create({
   },
   markerText: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   content: {
@@ -851,33 +851,33 @@ const styles = StyleSheet.create({
   },
   expandIcon: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   colon: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginHorizontal: 4
   },
   key: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "500",
     opacity: 0.9
   },
   value: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     maxWidth: "80%"
   },
   arrow: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   badge: {
     fontSize: 11,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     marginLeft: 8
   },
@@ -889,19 +889,19 @@ const styles = StyleSheet.create({
   },
   emptyIcon: {
     fontSize: 48,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.2,
     marginBottom: 12
   },
   emptyTitle: {
     fontSize: 14,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600",
     marginBottom: 4
   },
   emptySubtitle: {
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.6
   }
 });

package/lib/module/hooks/index.js

@@ -1,7 +1,9 @@
 "use strict";
 
 export { useFilterManager } from "./useFilterManager.js";
-export { usePersistedState } from "./usePersistedState.js";
+export { usePersistedState, resetPersistedStateCache } from "./usePersistedState.js";
+export { useChangeLog, useSubscribedValue } from "./useChangeLog.js";
+export { useEventStoreEvents } from "./useEventStoreEvents.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-09-02T23:25:39.783Z
+ * Generated at: 2026-09-04T23:36:20.710Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/module/hooks/useChangeLog.js

@@ -0,0 +1,50 @@
+"use strict";
+
+/**
+ * React bindings for `ChangeLog` — what useReduxActions, useZustandStateChanges
+ * and useJotaiAtomChanges each re-derived: seed state from the log, subscribe
+ * for the lifetime of the component, hold a filter, memoize the filtered
+ * list, and expose clear / pause / lookup.
+ *
+ * Tool-specific stats and registries (stores, atoms) compose on top — see
+ * `useSubscribedValue` for the registry half.
+ */
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+export function useChangeLog(log, options = {}) {
+  const [items, setItems] = useState(() => log.getAll());
+  const [filter, setFilter] = useState(() => options.initialFilter ?? {});
+  const [isEnabled, setIsEnabled] = useState(() => log.getEnabled());
+  useEffect(() => log.subscribe(setItems), [log]);
+  const filterItems = options.filterItems;
+  const filteredItems = useMemo(() => filterItems ? filterItems(items, filter) : items, [items, filter, filterItems]);
+  const clear = useCallback(() => {
+    log.clear();
+  }, [log]);
+  const toggleCapture = useCallback(() => {
+    const next = !isEnabled;
+    log.setEnabled(next);
+    setIsEnabled(next);
+  }, [log, isEnabled]);
+  const getById = useCallback(id => log.getById(id), [log]);
+  return {
+    items,
+    filteredItems,
+    filter,
+    setFilter,
+    isEnabled,
+    toggleCapture,
+    clear,
+    getById
+  };
+}
+
+/**
+ * Hold a value that a store pushes through a `(value) => void` listener —
+ * a registry of stores, atoms, sources. Seeded synchronously from `read`.
+ */
+export function useSubscribedValue(read, subscribe) {
+  const [value, setValue] = useState(read);
+  useEffect(() => subscribe(setValue), [subscribe]);
+  return value;
+}

package/lib/module/hooks/useEventStoreEvents.js

@@ -0,0 +1,61 @@
+"use strict";
+
+/**
+ * React bindings for a `BaseEventStore` — what useRouteEvents and
+ * useStorageEvents each hand-rolled: subscribe while enabled (which
+ * auto-starts the store's capture), coalesce bursts onto one animation
+ * frame so a storm of writes is one commit instead of one per emission,
+ * select/limit the list, and report whether capture is live.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+export function useEventStoreEvents(store, options = {}) {
+  const {
+    enabled = true,
+    maxEvents = 500,
+    select
+  } = options;
+  const [events, setEvents] = useState([]);
+  // Tracked locally so it updates reactively with the subscription.
+  const [isActive, setIsActive] = useState(enabled);
+  useEffect(() => {
+    if (!enabled) {
+      setIsActive(false);
+      return;
+    }
+
+    // Frame-coalesced: bursts land as ONE commit per frame instead of one
+    // per emission — the dominant live-churn cost measured on the network
+    // tool (tool-bench 2026-07-06).
+    let rafId = null;
+    let pending = null;
+    const unsubscribe = store.subscribeToEvents(all => {
+      pending = all;
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        if (!pending) return;
+        let next = pending;
+        pending = null;
+        if (select) next = select(next);
+        if (next.length > maxEvents) next = next.slice(0, maxEvents);
+        setEvents(next);
+      });
+    });
+    setIsActive(true);
+    return () => {
+      unsubscribe();
+      if (rafId != null) cancelAnimationFrame(rafId);
+      // Not setting isActive=false here: a dependency change re-subscribes
+      // immediately, and that is not "stopped".
+    };
+  }, [store, enabled, maxEvents, select]);
+  const clearEvents = useCallback(() => {
+    store.clearEvents();
+  }, [store]);
+  return {
+    events,
+    clearEvents,
+    isActive
+  };
+}