@buoy-gg/redux 7.0.33 → 7.0.35

package/lib/commonjs/preset.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createReduxTool = createReduxTool;
-exports.reduxToolPreset = void 0;
+exports.reduxToolPreset = exports.createReduxTool = void 0;
 var _ReduxModal = require("./redux/components/ReduxModal");
 var _ReduxIcon = require("./redux/components/ReduxIcon");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured Redux DevTools preset for FloatingDevTools
@@ -48,7 +48,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - State diff visualization
  * - Filter by action type
  */
-const reduxToolPreset = exports.reduxToolPreset = {
+const reduxToolPreset = exports.reduxToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "redux",
   name: "REDUX",
   description: "Redux action & state inspector",
@@ -62,7 +62,7 @@ const reduxToolPreset = exports.reduxToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom Redux DevTools configuration.
@@ -78,21 +78,13 @@ const reduxToolPreset = exports.reduxToolPreset = {
  * });
  * ```
  */
-function createReduxTool(options) {
-  return {
-    id: options?.id || "redux",
-    name: options?.name || "REDUX",
-    description: options?.description || "Redux action & state inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxIcon.ReduxIcon, {
-      size: size,
-      color: options?.iconColor
-    }),
-    component: _ReduxModal.ReduxModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createReduxTool = exports.createReduxTool = (0, _sharedUi.createToolFactory)(reduxToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}), options => ({
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxIcon.ReduxIcon, {
+    size: size,
+    color: options.iconColor
+  })
+}));

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

@@ -125,7 +125,7 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     height: 12
   }
 });

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

@@ -359,7 +359,7 @@ const styles = _reactNative.StyleSheet.create({
   valueLabel: {
     fontSize: 10,
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.5,
     fontWeight: "600"
   },
@@ -376,7 +376,7 @@ const styles = _reactNative.StyleSheet.create({
   actionText: {
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.3
   },
   typeBadge: {
@@ -389,7 +389,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 9,
     fontWeight: "600",
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   valueBox: {
     // Inset code box — darker than the card, the night track color.
@@ -407,7 +407,7 @@ const styles = _reactNative.StyleSheet.create({
   valueText: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     lineHeight: 18
   },
   // Diff view styles
@@ -427,7 +427,7 @@ const styles = _reactNative.StyleSheet.create({
   actionTextSmall: {
     fontSize: 8,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   dataViewerContainer: {
     marginTop: -12,

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

@@ -302,7 +302,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginBottom: 6
   },
   headerMeta: {
@@ -317,7 +317,7 @@ const styles = _reactNative.StyleSheet.create({
   durationText: {
     fontSize: 11,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   changeBadge: {
     backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
@@ -383,7 +383,7 @@ const styles = _reactNative.StyleSheet.create({
   diffPath: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   diffValues: {
     padding: 8,

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

@@ -109,37 +109,6 @@ function SectionHeader({
   });
 }
 
-/**
- * Info row component for key-value display
- */
-function InfoRow({
-  label,
-  value,
-  valueColor,
-  mono = false,
-  testID
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.infoRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.infoLabel,
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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
  */
@@ -229,17 +198,17 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
         title: "ACTION INFO"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.cardContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Type",
           value: action.type,
           mono: true,
           testID: `${_testIDs.REDUX_TEST_ID}-info-type`
-        }), action.sliceName && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.sliceName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Slice",
           value: action.sliceName,
           mono: true,
           testID: `${_testIDs.REDUX_TEST_ID}-info-slice`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Action",
           value: action.actionName,
           mono: true,
@@ -411,11 +380,11 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.cardContent,
-        children: [action.meta?.requestId && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        children: [action.meta?.requestId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Request ID",
           value: action.meta.requestId,
           mono: true
-        }), action.meta?.requestStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.requestStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Status",
           value: action.meta.requestStatus.toUpperCase(),
           valueColor: categoryInfo.color,
@@ -438,15 +407,15 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
               children: JSON.stringify(action.meta.arg)
             })
           })]
-        }), action.meta?.rejectedWithValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.rejectedWithValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Rejected With Value",
           value: "true",
           valueColor: _sharedUi.buoyColors.error
-        }), action.meta?.aborted && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.aborted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Aborted",
           value: "true",
           valueColor: _sharedUi.buoyColors.warning
-        }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Condition",
           value: "true",
           valueColor: _sharedUi.night.color.textTertiary
@@ -603,33 +572,12 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     color: _sharedUi.night.color.accent,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   cardContent: {
     padding: 14,
     gap: 10
   },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: _sharedUi.night.color.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: "monospace"
-  },
   badgeRow: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -662,7 +610,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 9,
     fontWeight: "600",
     color: _sharedUi.night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   durationTextSlow: {
     color: _sharedUi.buoyColors.error
@@ -702,7 +650,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 8,
     fontWeight: "600",
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   dataViewerContainer: {
     backgroundColor: _sharedUi.night.color.bg,
@@ -727,7 +675,7 @@ const styles = _reactNative.StyleSheet.create({
   argValue: {
     fontSize: 11,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     padding: 10
   },
   errorBadge: {
@@ -745,7 +693,7 @@ const styles = _reactNative.StyleSheet.create({
   errorText: {
     fontSize: 12,
     color: _sharedUi.buoyColors.error,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     padding: 14
   },
   // Async Operation / Related Actions styles
@@ -765,7 +713,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     marginBottom: 8
   },
   totalDurationRow: {
@@ -786,7 +734,7 @@ const styles = _reactNative.StyleSheet.create({
     fontSize: 14,
     fontWeight: "700",
     color: _sharedUi.buoyColors.success,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   timeline: {
     gap: 0
@@ -852,7 +800,7 @@ const styles = _reactNative.StyleSheet.create({
   timelineTime: {
     fontSize: 10,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   // Action footer - matches React Query DevTools
   actionFooter: {

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

@@ -240,119 +240,76 @@ const ReduxActionItem = exports.ReduxActionItem = /*#__PURE__*/(0, _react.memo)(
   // 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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.asyncSequenceBadge, {
+      backgroundColor: opColor.bg
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.slowBadge,
-        testID: testID ? `${testID}-slow` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-          size: 12,
-          color: _sharedUi.buoyColors.error
-        })
-      })]
+    // Slow action warning (with the sequence chip when part of a flow).
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      slow: true
     });
-  } else if (action.category === "rejected") {
-    // Show error badge for rejected actions
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.errorBadge,
-        testID: testID ? `${testID}-error` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
-          size: 12,
-          color: _sharedUi.buoyColors.error
-        })
-      })]
+  }
+  if (action.category === "rejected") {
+    // Error badge for rejected actions.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      customBadge: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.badgeContainer,
+        children: [sequenceChip, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.errorBadge,
+          testID: testID ? `${testID}-error` : undefined,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
+            size: 12,
+            color: _sharedUi.buoyColors.error
+          })
+        })]
+      })
     });
-  } else if (hasLinkedActions) {
-    // Show linked indicator for async actions
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), action.hasStateChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.changeBadge,
-        testID: testID ? `${testID}-change` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-          size: 12,
-          color: _sharedUi.buoyColors.warning
-        })
-      })]
+  }
+  if (hasLinkedActions) {
+    // Linked indicator for async actions.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      changed: action.hasStateChange
     });
-  } else if (action.hasStateChange) {
-    // Show state change indicator with action badge
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.actionBadgeText, {
-          color: statusColor
-        }],
-        testID: testID ? `${testID}-badge` : undefined,
-        children: actionBadge
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.changeBadge,
-        testID: testID ? `${testID}-change` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-          size: 12,
-          color: _sharedUi.buoyColors.warning
-        })
-      })]
+  }
+  if (action.hasStateChange) {
+    // State change indicator with the action verb.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      badgeText: actionBadge,
+      changed: true
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsx)(_sharedUi.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__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+    ...common,
+    plainBadgeText: actionBadge
   });
 });
 const styles = _reactNative.StyleSheet.create({
@@ -361,17 +318,6 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     gap: 4
   },
-  actionBadgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  },
   errorBadge: {
     paddingHorizontal: 4
   },
@@ -383,6 +329,6 @@ const styles = _reactNative.StyleSheet.create({
   asyncSequenceText: {
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });