@buoy-gg/redux 7.0.33 → 7.0.35

package/lib/commonjs/redux/utils/reduxActionStore.js

@@ -238,16 +238,9 @@ function extractMeta(action) {
 // Redux Action Store
 // ============================================
 
-class ReduxActionStore {
-  actions = [];
-  listeners = new Set();
-  clearListeners = new Set();
-  maxActions = 200;
-  idCounter = 0;
-  isEnabled = true;
-  captureSuppressed = false;
+class ReduxActionStore extends _sharedUi.ChangeLog {
   addAction(action, prevState, nextState, duration) {
-    if (!this.isEnabled || this.captureSuppressed) {
+    if (!this.canRecord()) {
       return;
     }
     const actionType = action.type || "";
@@ -273,7 +266,7 @@ class ReduxActionStore {
     const isSlowAction = (duration ?? 0) > 16; // Frame budget
 
     const reduxAction = {
-      id: `${Date.now()}-${++this.idCounter}`,
+      id: this.nextId(),
       type: actionType,
       payload: action.payload,
       action,
@@ -293,7 +286,7 @@ class ReduxActionStore {
       changedKeysCount,
       isSlowAction
     };
-    this.actions = [reduxAction, ...this.actions].slice(0, this.maxActions);
+    this.push(reduxAction);
 
     // Bound raw-state retention. Every action holds prevState/nextState by
     // reference; with structural sharing that's normally cheap, but when a
@@ -302,8 +295,8 @@ class ReduxActionStore {
     // pinned by 50 slice-replacing actions, enough to OOM-kill enterprise
     // apps. Detail view + time travel realistically use recent actions, so
     // older ones keep their diff metadata but drop the raw trees.
-    for (let i = STATE_RETENTION_LIMIT; i < this.actions.length; i++) {
-      const a = this.actions[i];
+    for (let i = STATE_RETENTION_LIMIT; i < this.items.length; i++) {
+      const a = this.items[i];
       if (a.prevState !== STATE_EVICTED) {
         a.prevState = STATE_EVICTED;
         a.nextState = STATE_EVICTED;
@@ -314,63 +307,26 @@ class ReduxActionStore {
     this.notifyListeners();
   }
   getActions() {
-    return [...this.actions];
+    return this.getAll();
   }
   getActionById(id) {
-    return this.actions.find(a => a.id === id);
+    return this.getById(id);
   }
   clearActions() {
-    this.actions = [];
-    this.notifyListeners();
-    this.clearListeners.forEach(listener => {
-      try {
-        listener();
-      } catch {
-        // Ignore listener errors
-      }
-    });
-  }
-
-  /**
-   * Listen for clearActions() calls. Used in remote mirror mode to forward a
-   * clear performed in the dashboard UI to the synced device.
-   */
-  onClear(listener) {
-    this.clearListeners.add(listener);
-    return () => {
-      this.clearListeners.delete(listener);
-    };
+    this.clear();
   }
 
   // ============================================
   // Remote Mirror Mode
   // ============================================
 
-  /**
-   * Permanently suppress local capture. Use when this store acts as a mirror
-   * of a remote device's actions (e.g. the desktop dashboard): actions arrive
-   * via replaceActions() and local instrumentation must never record.
-   */
-  disableCapture() {
-    this.captureSuppressed = true;
-  }
-
-  /**
-   * Whether the store is in remote mirror mode (capture suppressed). The UI
-   * uses this to skip local-instrumentation affordances like the
-   * "react-redux not installed" banner.
-   */
-  isCaptureSuppressed() {
-    return this.captureSuppressed;
-  }
-
   /**
    * Replace the entire action list and notify listeners. Used in remote
    * mirror mode where full snapshots arrive from a synced device. Respects
    * the enabled flag so the UI's pause button freezes the mirror.
    */
   replaceActions(actions) {
-    if (!this.isEnabled) {
+    if (!this.getEnabled()) {
       return;
     }
     // Preserve any trees a remote mirror already hydrated via
@@ -378,12 +334,12 @@ class ReduxActionStore {
     // full snapshot arriving after a detail fetch must not blank the detail
     // pane back out.
     const hydrated = new Map();
-    for (const existing of this.actions) {
+    for (const existing of this.items) {
       if (existing.prevState !== undefined && !isEvictedState(existing.prevState)) {
         hydrated.set(existing.id, existing);
       }
     }
-    this.actions = actions.slice(0, this.maxActions).map(a => {
+    const merged = actions.slice(0, this.max).map(a => {
       const h = hydrated.get(a.id);
       if (!h || !isEvictedState(a.prevState)) return a;
       return {
@@ -396,7 +352,7 @@ class ReduxActionStore {
         error: isPayloadOnDevice(a.error) ? h.error : a.error
       };
     });
-    this.notifyListeners();
+    this.setItems(merged);
   }
 
   /**
@@ -405,44 +361,18 @@ class ReduxActionStore {
    * `getActionDetail` action. Remote-mirror (desktop) use only.
    */
   hydrateAction(id, patch) {
-    const index = this.actions.findIndex(a => a.id === id);
-    if (index === -1) return;
-    this.actions = [...this.actions.slice(0, index), {
-      ...this.actions[index],
-      ...patch
-    }, ...this.actions.slice(index + 1)];
-    this.notifyListeners();
-  }
-  setEnabled(enabled) {
-    this.isEnabled = enabled;
-  }
-  getEnabled() {
-    return this.isEnabled;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  notifyListeners() {
-    const actions = this.getActions();
-    this.listeners.forEach(listener => listener(actions));
+    this.hydrateById(id, patch);
   }
   setMaxActions(max) {
-    this.maxActions = max;
-    if (this.actions.length > max) {
-      this.actions = this.actions.slice(0, max);
-      this.notifyListeners();
-    }
+    this.setMax(max);
   }
   getStats() {
-    const total = this.actions.length;
-    const withChanges = this.actions.filter(a => a.hasStateChange).length;
-    const actionTypes = new Set(this.actions.map(a => a.type));
+    const total = this.items.length;
+    const withChanges = this.items.filter(a => a.hasStateChange).length;
+    const actionTypes = new Set(this.items.map(a => a.type));
 
     // Calculate average duration
-    const durations = this.actions.filter(a => a.duration !== undefined).map(a => a.duration);
+    const durations = this.items.filter(a => a.duration !== undefined).map(a => a.duration);
     const avgDuration = durations.length > 0 ? durations.reduce((sum, d) => sum + d, 0) / durations.length : 0;
     return {
       totalActions: total,
@@ -453,7 +383,7 @@ class ReduxActionStore {
     };
   }
   filterActions(filter) {
-    let filtered = [...this.actions];
+    let filtered = [...this.items];
     if (filter.searchText) {
       const search = filter.searchText.toLowerCase();
       filtered = filtered.filter(a => a.type.toLowerCase().includes(search));
@@ -467,14 +397,14 @@ class ReduxActionStore {
     return filtered;
   }
   getUniqueActionTypes() {
-    return Array.from(new Set(this.actions.map(a => a.type))).sort();
+    return Array.from(new Set(this.items.map(a => a.type))).sort();
   }
 
   /**
    * Find related async actions by requestId
    */
   getRelatedActions(requestId) {
-    return this.actions.filter(a => a.meta?.requestId === requestId).sort((a, b) => a.timestamp - b.timestamp); // Sort chronologically
+    return this.items.filter(a => a.meta?.requestId === requestId).sort((a, b) => a.timestamp - b.timestamp); // Sort chronologically
   }
 
   /**
@@ -490,7 +420,7 @@ class ReduxActionStore {
    */
   getLinkedActionsCount(action) {
     if (!action.meta?.requestId) return 0;
-    return this.actions.filter(a => a.meta?.requestId === action.meta?.requestId).length;
+    return this.items.filter(a => a.meta?.requestId === action.meta?.requestId).length;
   }
 
   /**
@@ -528,7 +458,7 @@ class ReduxActionStore {
   getAsyncOperationIndex(requestId) {
     // Get all unique requestIds with their first timestamp
     const requestIdTimestamps = new Map();
-    for (const action of this.actions) {
+    for (const action of this.items) {
       if (action.meta?.requestId && !requestIdTimestamps.has(action.meta.requestId)) {
         requestIdTimestamps.set(action.meta.requestId, action.timestamp);
       }

package/lib/commonjs/redux/utils/snapshotProvider.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _sharedUi = require("@buoy-gg/shared-ui");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
 var _activeStoreRegistry = require("./activeStoreRegistry");
 var _buoyReduxMiddleware = require("./buoyReduxMiddleware");
 /**
@@ -65,36 +64,19 @@ async function restore(data, options) {
   const snapshot = data;
   const store = (0, _activeStoreRegistry.getActiveStore)();
   if (!store || snapshot === undefined || snapshot === null) {
-    return {
-      ok: false,
-      applied: 0,
-      skipped: [{
-        id: "redux",
-        reason: store ? "empty redux snapshot" : "no Redux store instrumented"
-      }],
-      warnings: []
-    };
+    return (0, _sharedUi.skippedRestore)("redux", store ? "empty redux snapshot" : "no Redux store instrumented");
   }
   const {
     mechanism
   } = (0, _activeStoreRegistry.getInstrumentationStatus)();
   if (mechanism === "patch") {
-    return {
-      ok: false,
-      applied: 0,
-      skipped: [{
-        id: "redux",
-        reason: `restore unavailable on auto-instrumented stores — ${ENABLE_HINT}`
-      }],
-      warnings: []
-    };
+    return (0, _sharedUi.skippedRestore)("redux", `restore unavailable on auto-instrumented stores — ${ENABLE_HINT}`);
   }
   // Untouched slices keep their LIVE values inside the jump payload, so the
   // full-state replace leaves them alone. A slice is untouched when it's
   // explicitly excluded OR outside the includeKeys scope.
-  const excludedSet = new Set(options?.excludeKeys ?? []);
-  const includedSet = options?.includeKeys ? new Set(options.includeKeys) : null;
-  const excluded = Object.keys(snapshot.state ?? {}).filter(k => excludedSet.has(k) || includedSet && !includedSet.has(k));
+  const scope = (0, _sharedUi.createRestoreScope)(options);
+  const excluded = Object.keys(snapshot.state ?? {}).filter(k => !scope.touch(k));
   let payload = snapshot.state;
   if (excluded.length > 0) {
     const live = store.getState();
@@ -120,17 +102,8 @@ async function restore(data, options) {
       warnings
     };
   }
-  return {
-    ok: false,
-    applied: 0,
-    skipped: [{
-      id: "redux",
-      reason: `store ignored the state jump — ${ENABLE_HINT}`
-    }],
-    warnings: []
-  };
+  return (0, _sharedUi.skippedRestore)("redux", `store ignored the state jump — ${ENABLE_HINT}`);
 }
-const ITEM_RENDER_BYTE_LIMIT = 256 * 1024;
 
 /** Per-slice restore preview. `base` omitted = compare against the live store. */
 async function previewItems(target, base) {
@@ -155,54 +128,18 @@ async function previewItems(target, base) {
   }
   const oldObj = baseState ?? {};
   const newObj = targetState ?? {};
-  const keys = new Set([...Object.keys(oldObj), ...Object.keys(newObj)]);
-  for (const key of keys) {
-    const inOld = Object.prototype.hasOwnProperty.call(oldObj, key);
-    const inNew = Object.prototype.hasOwnProperty.call(newObj, key);
-    let item;
-    if (!inNew) {
-      item = {
-        key,
-        label: key,
-        verdict: "removed",
-        oldValue: oldObj[key]
-      };
-    } else if (!inOld) {
-      item = {
-        key,
-        label: key,
-        verdict: "added",
-        newValue: newObj[key]
-      };
-    } else if ((0, _dataViewer.boundedDeepEqual)(oldObj[key], newObj[key])) {
-      item = {
-        key,
-        label: key,
-        verdict: "unchanged"
-      };
-    } else if ((0, _dataViewer.jsonLikelyLargerThan)(oldObj[key], ITEM_RENDER_BYTE_LIMIT) || (0, _dataViewer.jsonLikelyLargerThan)(newObj[key], ITEM_RENDER_BYTE_LIMIT)) {
-      item = {
-        key,
-        label: key,
-        verdict: "too-large",
-        reason: "slice too large to render a diff — restore still applies it"
-      };
-    } else {
-      item = {
-        key,
-        label: key,
-        verdict: "changed",
-        oldValue: oldObj[key],
-        newValue: newObj[key]
-      };
-    }
-    if (wontApplyReason && item.verdict !== "unchanged") {
-      item = {
-        ...item,
-        verdict: "wont-apply",
-        reason: wontApplyReason
-      };
-    }
+  for (const key of (0, _sharedUi.unionKeys)(oldObj, newObj)) {
+    let item = (0, _sharedUi.classifyPreviewItem)({
+      key,
+      label: key,
+      oldValue: oldObj[key],
+      newValue: newObj[key],
+      inOld: Object.prototype.hasOwnProperty.call(oldObj, key),
+      inNew: Object.prototype.hasOwnProperty.call(newObj, key)
+    }, {
+      tooLargeReason: "slice too large to render a diff — restore still applies it"
+    });
+    if (wontApplyReason) item = (0, _sharedUi.wontApply)(item, wontApplyReason);
     items.push(item);
   }
   if (wontApplyReason) notes.push(`Redux restore unavailable: ${wontApplyReason}`);

package/lib/module/preset.js

@@ -34,6 +34,7 @@
 
 import { ReduxModal } from "./redux/components/ReduxModal";
 import { ReduxIcon } from "./redux/components/ReduxIcon";
+import { createToolFactory, defineToolPreset } from "@buoy-gg/shared-ui";
 
 /**
  * Pre-configured Redux DevTools preset for FloatingDevTools.
@@ -44,7 +45,7 @@ import { ReduxIcon } from "./redux/components/ReduxIcon";
  * - Filter by action type
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-export const reduxToolPreset = {
+export const reduxToolPreset = defineToolPreset({
   id: "redux",
   name: "REDUX",
   description: "Redux action & state inspector",
@@ -58,7 +59,7 @@ export const reduxToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom Redux DevTools configuration.
@@ -74,21 +75,13 @@ export const reduxToolPreset = {
  * });
  * ```
  */
-export function createReduxTool(options) {
-  return {
-    id: options?.id || "redux",
-    name: options?.name || "REDUX",
-    description: options?.description || "Redux action & state inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/_jsx(ReduxIcon, {
-      size: size,
-      color: options?.iconColor
-    }),
-    component: ReduxModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+export const createReduxTool = createToolFactory(reduxToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}), options => ({
+  icon: ({
+    size
+  }) => /*#__PURE__*/_jsx(ReduxIcon, {
+    size: size,
+    color: options.iconColor
+  })
+}));

package/lib/module/redux/components/ReduxActionButton.js

@@ -8,7 +8,7 @@
  */
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
+import { night, monoFont } from "@buoy-gg/shared-ui";
 
 // Button color configurations matching React Query pattern
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     height: 12
   }
 });

package/lib/module/redux/components/ReduxActionDetailContent.js

@@ -11,7 +11,7 @@
 
 import { View, Text, StyleSheet, ScrollView } from "react-native";
 import { useState, useCallback, useMemo } from "react";
-import { macOSColors, night, EventStepperFooter, formatRelativeTime, parseValue } from "@buoy-gg/shared-ui";
+import { macOSColors, night, EventStepperFooter, formatRelativeTime, parseValue, monoFont } from "@buoy-gg/shared-ui";
 import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
 import { ReduxDetailViewToggle } from "./ReduxDetailViewToggle";
 import { ReduxActionInfoView } from "./ReduxActionInfoView";
@@ -355,7 +355,7 @@ const styles = StyleSheet.create({
   valueLabel: {
     fontSize: 10,
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5,
     fontWeight: "600"
   },
@@ -372,7 +372,7 @@ const styles = StyleSheet.create({
   actionText: {
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   typeBadge: {
@@ -385,7 +385,7 @@ const styles = StyleSheet.create({
     fontSize: 9,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   valueBox: {
     // Inset code box — darker than the card, the night track color.
@@ -403,7 +403,7 @@ const styles = StyleSheet.create({
   valueText: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 18
   },
   // Diff view styles
@@ -423,7 +423,7 @@ const styles = StyleSheet.create({
   actionTextSmall: {
     fontSize: 8,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   dataViewerContainer: {
     marginTop: -12,

package/lib/module/redux/components/ReduxActionDetailView.js

@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { macOSColors, night, TabSelector, DataInspector, CollapsibleSection, CopyButton } from "@buoy-gg/shared-ui";
+import { macOSColors, night, TabSelector, DataInspector, CollapsibleSection, CopyButton, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ReduxActionDetailView({
   action
@@ -298,7 +298,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginBottom: 6
   },
   headerMeta: {
@@ -313,7 +313,7 @@ const styles = StyleSheet.create({
   durationText: {
     fontSize: 11,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   changeBadge: {
     backgroundColor: macOSColors.semantic.warningBackground,
@@ -379,7 +379,7 @@ const styles = StyleSheet.create({
   diffPath: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   diffValues: {
     padding: 8,

package/lib/module/redux/components/ReduxActionInfoView.js

@@ -12,7 +12,7 @@
 
 import React, { memo, useMemo, useCallback, useState, useEffect } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { buoyColors, night, Clock, AlertTriangle, Zap, Hash, Info, Box, AlertCircle, FileText, parseValue, ProUpgradeModal, copyToClipboard } from "@buoy-gg/shared-ui";
+import { buoyColors, night, Clock, AlertTriangle, Zap, Hash, Info, Box, AlertCircle, FileText, parseValue, ProUpgradeModal, copyToClipboard, InfoRow, monoFont } from "@buoy-gg/shared-ui";
 import { useIsPro } from "@buoy-gg/license";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { reduxActionStore, isEvictedState } from "../utils/reduxActionStore";
@@ -104,37 +104,6 @@ function SectionHeader({
   });
 }
 
-/**
- * Info row component for key-value display
- */
-function InfoRow({
-  label,
-  value,
-  valueColor,
-  mono = false,
-  testID
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.infoRow,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.infoLabel,
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.infoValue, mono && styles.infoValueMono, valueColor && {
-        color: valueColor
-      }]
-      // `ellipsizeMode="middle"` truncates the RENDERED text and iOS reports
-      // the truncated string back, so anything a test reads off one of these
-      // rows has to be short enough to fit on the line.
-      ,
-      numberOfLines: 1,
-      ellipsizeMode: "middle",
-      testID: testID,
-      children: value
-    })]
-  });
-}
-
 /**
  * Format timestamp for display
  */
@@ -598,33 +567,12 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     color: night.color.accent,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   cardContent: {
     padding: 14,
     gap: 10
   },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: night.color.textTertiary,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: night.color.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: "monospace"
-  },
   badgeRow: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -657,7 +605,7 @@ const styles = StyleSheet.create({
     fontSize: 9,
     fontWeight: "600",
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   durationTextSlow: {
     color: buoyColors.error
@@ -697,7 +645,7 @@ const styles = StyleSheet.create({
     fontSize: 8,
     fontWeight: "600",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   dataViewerContainer: {
     backgroundColor: night.color.bg,
@@ -722,7 +670,7 @@ const styles = StyleSheet.create({
   argValue: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     padding: 10
   },
   errorBadge: {
@@ -740,7 +688,7 @@ const styles = StyleSheet.create({
   errorText: {
     fontSize: 12,
     color: buoyColors.error,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     padding: 14
   },
   // Async Operation / Related Actions styles
@@ -760,7 +708,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     marginBottom: 8
   },
   totalDurationRow: {
@@ -781,7 +729,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: buoyColors.success,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   timeline: {
     gap: 0
@@ -847,7 +795,7 @@ const styles = StyleSheet.create({
   timelineTime: {
     fontSize: 10,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Action footer - matches React Query DevTools
   actionFooter: {