@buoy-gg/redux 7.0.32 → 7.0.34

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/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 } 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
  */
@@ -604,27 +573,6 @@ const styles = StyleSheet.create({
     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",

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

@@ -7,7 +7,7 @@
 
 import { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, Zap, AlertCircle, Clock, RelativeTime } from "@buoy-gg/shared-ui";
+import { ChangeRow, buoyColors, AlertCircle } from "@buoy-gg/shared-ui";
 import { reduxActionStore } from "../utils/reduxActionStore";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -236,119 +236,76 @@ export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
   // Get color for this operation's badge
   const opColor = getOperationColor(operationIndex);
 
-  // Custom badge showing state change, slow action, or linked indicator
-  let customBadge = undefined;
+  // The async-sequence chip ("1/2 #3") sits in front of whatever indicator
+  // the row shows; the ⚡ / 🕒 indicators and the mono action verb are drawn
+  // by the shared ChangeRow.
+  const sequenceChip = hasLinkedActions ? /*#__PURE__*/_jsx(View, {
+    style: [styles.asyncSequenceBadge, {
+      backgroundColor: opColor.bg
+    }],
+    children: /*#__PURE__*/_jsxs(Text, {
+      style: [styles.asyncSequenceText, {
+        color: opColor.text
+      }],
+      testID: testID ? `${testID}-seq` : undefined,
+      children: [asyncPosition, "/", linkedCount, " #", operationIndex]
+    })
+  }) : undefined;
+  const common = {
+    statusColor,
+    statusLabel,
+    sublabel,
+    primaryText,
+    timestamp: action.timestamp,
+    onPress: () => onPress(action),
+    testID,
+    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`
+  };
   if (action.isSlowAction) {
-    // Show slow action warning
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/_jsx(View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.slowBadge,
-        testID: testID ? `${testID}-slow` : undefined,
-        children: /*#__PURE__*/_jsx(Clock, {
-          size: 12,
-          color: buoyColors.error
-        })
-      })]
+    // Slow action warning (with the sequence chip when part of a flow).
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      slow: true
     });
-  } else if (action.category === "rejected") {
-    // Show error badge for rejected actions
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/_jsx(View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.errorBadge,
-        testID: testID ? `${testID}-error` : undefined,
-        children: /*#__PURE__*/_jsx(AlertCircle, {
-          size: 12,
-          color: buoyColors.error
-        })
-      })]
+  }
+  if (action.category === "rejected") {
+    // Error badge for rejected actions.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      customBadge: /*#__PURE__*/_jsxs(View, {
+        style: styles.badgeContainer,
+        children: [sequenceChip, /*#__PURE__*/_jsx(View, {
+          style: styles.errorBadge,
+          testID: testID ? `${testID}-error` : undefined,
+          children: /*#__PURE__*/_jsx(AlertCircle, {
+            size: 12,
+            color: buoyColors.error
+          })
+        })]
+      })
     });
-  } else if (hasLinkedActions) {
-    // Show linked indicator for async actions
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), action.hasStateChange && /*#__PURE__*/_jsx(View, {
-        style: styles.changeBadge,
-        testID: testID ? `${testID}-change` : undefined,
-        children: /*#__PURE__*/_jsx(Zap, {
-          size: 12,
-          color: buoyColors.warning
-        })
-      })]
+  }
+  if (hasLinkedActions) {
+    // Linked indicator for async actions.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      changed: action.hasStateChange
     });
-  } else if (action.hasStateChange) {
-    // Show state change indicator with action badge
-    customBadge = /*#__PURE__*/_jsxs(View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.actionBadgeText, {
-          color: statusColor
-        }],
-        testID: testID ? `${testID}-badge` : undefined,
-        children: actionBadge
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.changeBadge,
-        testID: testID ? `${testID}-change` : undefined,
-        children: /*#__PURE__*/_jsx(Zap, {
-          size: 12,
-          color: buoyColors.warning
-        })
-      })]
+  }
+  if (action.hasStateChange) {
+    // State change indicator with the action verb.
+    return /*#__PURE__*/_jsx(ChangeRow, {
+      ...common,
+      badgeText: actionBadge,
+      changed: true
     });
   }
-  return /*#__PURE__*/_jsx(CompactRow, {
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`,
-    statusDotColor: statusColor,
-    statusLabel: statusLabel,
-    statusSublabel: sublabel,
-    primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
-      timestamp: action.timestamp
-    })
-    // Use customBadge if we have special indicators, otherwise show action badge as text
-    ,
-    customBadge: customBadge,
-    badgeText: customBadge ? undefined : actionBadge,
-    badgeColor: statusColor,
-    showChevron: true,
-    onPress: () => onPress(action)
+  // Nothing special: CompactRow's plain badge with the action verb.
+  return /*#__PURE__*/_jsx(ChangeRow, {
+    ...common,
+    plainBadgeText: actionBadge
   });
 });
 const styles = StyleSheet.create({
@@ -357,17 +314,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 4
   },
-  actionBadgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  },
   errorBadge: {
     paddingHorizontal: 4
   },

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

@@ -4,136 +4,42 @@
  * ReduxDetailViewToggle
  *
  * Three-card toggle for switching between Action, State, and Diff views.
- * Redux-specific component for the enhanced detail view.
+ * The cards themselves are the shared `DetailViewToggle`; this file owns
+ * the redux view list and testID prefix.
  */
 
 import React, { memo } from "react";
-import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
-import { night, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VIEW_CONFIGS = [{
+import { DetailViewToggle, FileText, Database, GitBranch } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+// Active-card chrome takes the single night accent (the per-view
+// warning/info/success tints were selection chrome, not data).
+const VIEWS = [{
   key: "action",
   label: "ACTION",
   description: "View action details",
-  icon: FileText,
-  // Active-card chrome takes the single night accent (the per-view
-  // warning/info/success tints were selection chrome, not data).
-  activeColor: night.color.accent
+  icon: FileText
 }, {
   key: "state",
   label: "STATE",
   description: "View current state",
-  icon: Database,
-  activeColor: night.color.accent
+  icon: Database
 }, {
   key: "diff",
   label: "DIFF",
   description: "Compare changes",
-  icon: GitBranch,
-  activeColor: night.color.accent
+  icon: GitBranch
 }];
+const DIFF_DISABLED = ["diff"];
 export const ReduxDetailViewToggle = /*#__PURE__*/memo(function ReduxDetailViewToggle({
   activeView,
   onViewChange,
   diffDisabled = false
 }) {
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/_jsxs(TouchableOpacity, {
-        style: [styles.card, isActive && [styles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && styles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(config.key),
-        activeOpacity: isDisabled ? 1 : 0.8,
-        disabled: isDisabled,
-        testID: `buoy-redux-view-${config.key}`,
-        accessibilityRole: "button",
-        accessibilityLabel: config.label,
-        accessibilityState: {
-          selected: isActive,
-          disabled: isDisabled
-        },
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.cardContent,
-          children: [/*#__PURE__*/_jsx(IconComponent, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? night.color.textTertiary : night.color.textSecondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
-              color: config.activeColor
-            }], isDisabled && styles.cardLabelDisabled],
-            children: config.label
-          })]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
-          children: config.description
-        })]
-      }, config.key);
-    })
+  return /*#__PURE__*/_jsx(DetailViewToggle, {
+    views: VIEWS,
+    activeView: activeView,
+    onViewChange: onViewChange,
+    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
+    testIDPrefix: "buoy-redux"
   });
-});
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  card: {
-    flex: 1,
-    backgroundColor: night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: night.color.accentSoft,
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: night.color.textSecondary
-  },
-  cardLabelActive: {
-    color: night.color.text
-  },
-  cardLabelDisabled: {
-    color: night.color.textTertiary
-  },
-  cardDescription: {
-    fontSize: 9,
-    color: night.color.textTertiary,
-    lineHeight: 12
-  },
-  cardDescriptionActive: {
-    color: night.color.textSecondary
-  },
-  cardDescriptionDisabled: {
-    color: night.color.textTertiary
-  }
 });