@buoy-gg/redux 2.1.11 → 2.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/LICENSE +58 -0
  2. package/lib/commonjs/index.js +1 -179
  3. package/lib/commonjs/preset.js +1 -98
  4. package/lib/commonjs/redux/components/ReduxActionButton.js +1 -129
  5. package/lib/commonjs/redux/components/ReduxActionDetailContent.js +1 -380
  6. package/lib/commonjs/redux/components/ReduxActionDetailView.js +1 -401
  7. package/lib/commonjs/redux/components/ReduxActionInfoView.js +1 -838
  8. package/lib/commonjs/redux/components/ReduxActionItem.js +1 -366
  9. package/lib/commonjs/redux/components/ReduxDetailViewToggle.js +1 -134
  10. package/lib/commonjs/redux/components/ReduxIcon.js +1 -18
  11. package/lib/commonjs/redux/components/ReduxModal.js +1 -530
  12. package/lib/commonjs/redux/components/index.js +1 -52
  13. package/lib/commonjs/redux/hooks/index.js +1 -25
  14. package/lib/commonjs/redux/hooks/useAutoInstrumentRedux.js +1 -197
  15. package/lib/commonjs/redux/hooks/useReduxActions.js +1 -75
  16. package/lib/commonjs/redux/index.js +1 -49
  17. package/lib/commonjs/redux/utils/autoInstrument.js +1 -270
  18. package/lib/commonjs/redux/utils/buoyReduxMiddleware.js +1 -166
  19. package/lib/commonjs/redux/utils/createReduxHistoryAdapter.js +1 -146
  20. package/lib/commonjs/redux/utils/index.js +1 -111
  21. package/lib/commonjs/redux/utils/reduxActionStore.js +1 -358
  22. package/lib/module/index.js +1 -87
  23. package/lib/module/preset.js +1 -94
  24. package/lib/module/redux/components/ReduxActionButton.js +1 -126
  25. package/lib/module/redux/components/ReduxActionDetailContent.js +1 -376
  26. package/lib/module/redux/components/ReduxActionDetailView.js +1 -397
  27. package/lib/module/redux/components/ReduxActionInfoView.js +1 -833
  28. package/lib/module/redux/components/ReduxActionItem.js +1 -362
  29. package/lib/module/redux/components/ReduxDetailViewToggle.js +1 -129
  30. package/lib/module/redux/components/ReduxIcon.js +1 -8
  31. package/lib/module/redux/components/ReduxModal.js +1 -525
  32. package/lib/module/redux/components/index.js +1 -7
  33. package/lib/module/redux/hooks/index.js +1 -4
  34. package/lib/module/redux/hooks/useAutoInstrumentRedux.js +1 -193
  35. package/lib/module/redux/hooks/useReduxActions.js +1 -71
  36. package/lib/module/redux/index.js +1 -13
  37. package/lib/module/redux/utils/autoInstrument.js +1 -260
  38. package/lib/module/redux/utils/buoyReduxMiddleware.js +1 -157
  39. package/lib/module/redux/utils/createReduxHistoryAdapter.js +1 -142
  40. package/lib/module/redux/utils/index.js +1 -8
  41. package/lib/module/redux/utils/reduxActionStore.js +1 -354
  42. package/package.json +12 -12
  43. package/lib/typescript/index.d.ts.map +0 -1
  44. package/lib/typescript/preset.d.ts.map +0 -1
  45. package/lib/typescript/redux/components/ReduxActionButton.d.ts.map +0 -1
  46. package/lib/typescript/redux/components/ReduxActionDetailContent.d.ts.map +0 -1
  47. package/lib/typescript/redux/components/ReduxActionDetailView.d.ts.map +0 -1
  48. package/lib/typescript/redux/components/ReduxActionInfoView.d.ts.map +0 -1
  49. package/lib/typescript/redux/components/ReduxActionItem.d.ts.map +0 -1
  50. package/lib/typescript/redux/components/ReduxDetailViewToggle.d.ts.map +0 -1
  51. package/lib/typescript/redux/components/ReduxIcon.d.ts.map +0 -1
  52. package/lib/typescript/redux/components/ReduxModal.d.ts.map +0 -1
  53. package/lib/typescript/redux/components/index.d.ts.map +0 -1
  54. package/lib/typescript/redux/hooks/index.d.ts.map +0 -1
  55. package/lib/typescript/redux/hooks/useAutoInstrumentRedux.d.ts.map +0 -1
  56. package/lib/typescript/redux/hooks/useReduxActions.d.ts.map +0 -1
  57. package/lib/typescript/redux/index.d.ts.map +0 -1
  58. package/lib/typescript/redux/types/index.d.ts.map +0 -1
  59. package/lib/typescript/redux/utils/autoInstrument.d.ts.map +0 -1
  60. package/lib/typescript/redux/utils/buoyReduxMiddleware.d.ts.map +0 -1
  61. package/lib/typescript/redux/utils/createReduxHistoryAdapter.d.ts.map +0 -1
  62. package/lib/typescript/redux/utils/index.d.ts.map +0 -1
  63. package/lib/typescript/redux/utils/reduxActionStore.d.ts.map +0 -1
@@ -1,838 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ReduxActionInfoView = void 0;
7
- var _react = _interopRequireWildcard(require("react"));
8
- var _reactNative = require("react-native");
9
- var _sharedUi = require("@buoy-gg/shared-ui");
10
- var _license = require("@buoy-gg/license");
11
- var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
12
- var _reduxActionStore = require("../utils/reduxActionStore");
13
- var _buoyReduxMiddleware = require("../utils/buoyReduxMiddleware");
14
- var _ReduxActionButton = require("./ReduxActionButton");
15
- var _jsxRuntime = require("react/jsx-runtime");
16
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
17
- /**
18
- * ReduxActionInfoView
19
- *
20
- * Displays comprehensive action information including:
21
- * - Action metadata (type, slice, category, duration)
22
- * - Payload data
23
- * - Async thunk metadata (requestId, status, arg)
24
- * - Error details for rejected actions
25
- */
26
-
27
- /**
28
- * Get category display info
29
- */
30
- function getCategoryInfo(category) {
31
- switch (category) {
32
- case "pending":
33
- return {
34
- label: "PENDING",
35
- color: _sharedUi.buoyColors.warning,
36
- bgColor: _sharedUi.buoyColors.warning + "26"
37
- };
38
- case "fulfilled":
39
- return {
40
- label: "FULFILLED",
41
- color: _sharedUi.buoyColors.success,
42
- bgColor: _sharedUi.buoyColors.success + "26"
43
- };
44
- case "rejected":
45
- return {
46
- label: "REJECTED",
47
- color: _sharedUi.buoyColors.error,
48
- bgColor: _sharedUi.buoyColors.error + "26"
49
- };
50
- case "internal":
51
- return {
52
- label: "INTERNAL",
53
- color: _sharedUi.buoyColors.textMuted,
54
- bgColor: _sharedUi.buoyColors.textMuted + "26"
55
- };
56
- case "query":
57
- return {
58
- label: "QUERY",
59
- color: _sharedUi.buoyColors.info,
60
- bgColor: _sharedUi.buoyColors.info + "26"
61
- };
62
- case "mutation":
63
- return {
64
- label: "MUTATION",
65
- color: _sharedUi.buoyColors.info,
66
- bgColor: _sharedUi.buoyColors.info + "26"
67
- };
68
- default:
69
- return {
70
- label: "ACTION",
71
- color: _sharedUi.buoyColors.info,
72
- bgColor: _sharedUi.buoyColors.info + "26"
73
- };
74
- }
75
- }
76
-
77
- /**
78
- * Format duration for display
79
- */
80
- function formatDuration(duration) {
81
- if (duration === undefined) return "N/A";
82
- if (duration < 1) return "<1ms";
83
- return `${duration.toFixed(1)}ms`;
84
- }
85
-
86
- /**
87
- * Section header component - matches React Query DevTools styling
88
- */
89
- function SectionHeader({
90
- icon: Icon,
91
- title,
92
- badge
93
- }) {
94
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
95
- style: styles.sectionHeader,
96
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
97
- style: styles.sectionHeaderLeft,
98
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
99
- size: 14,
100
- color: _sharedUi.buoyColors.primary
101
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
102
- style: styles.sectionTitle,
103
- children: title
104
- })]
105
- }), badge]
106
- });
107
- }
108
-
109
- /**
110
- * Info row component for key-value display
111
- */
112
- function InfoRow({
113
- label,
114
- value,
115
- valueColor,
116
- mono = false
117
- }) {
118
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
119
- style: styles.infoRow,
120
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
121
- style: styles.infoLabel,
122
- children: label
123
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
124
- style: [styles.infoValue, mono && styles.infoValueMono, valueColor && {
125
- color: valueColor
126
- }],
127
- numberOfLines: 1,
128
- ellipsizeMode: "middle",
129
- children: value
130
- })]
131
- });
132
- }
133
-
134
- /**
135
- * Format timestamp for display
136
- */
137
- function formatTime(timestamp) {
138
- const date = new Date(timestamp);
139
- const hours = date.getHours().toString().padStart(2, "0");
140
- const minutes = date.getMinutes().toString().padStart(2, "0");
141
- const seconds = date.getSeconds().toString().padStart(2, "0");
142
- const ms = date.getMilliseconds().toString().padStart(3, "0");
143
- return `${hours}:${minutes}:${seconds}.${ms}`;
144
- }
145
- const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _react.memo)(function ReduxActionInfoView({
146
- action,
147
- onNavigateToAction
148
- }) {
149
- const isPro = (0, _license.useIsPro)();
150
- const [showProModal, setShowProModal] = (0, _react.useState)(false);
151
-
152
- // Auto-close modal when user becomes Pro
153
- (0, _react.useEffect)(() => {
154
- if (showProModal && isPro) {
155
- setShowProModal(false);
156
- }
157
- }, [showProModal, isPro]);
158
- const categoryInfo = getCategoryInfo(action.category);
159
- const hasPayload = action.payload !== undefined;
160
- const hasMeta = action.meta && Object.keys(action.meta).length > 0;
161
- const hasError = action.error !== undefined;
162
-
163
- // Get related async actions
164
- const relatedActions = (0, _react.useMemo)(() => {
165
- return _reduxActionStore.reduxActionStore.getLinkedActions(action);
166
- }, [action]);
167
- const hasRelatedActions = relatedActions.length > 1;
168
- const baseActionType = hasRelatedActions ? _reduxActionStore.reduxActionStore.getBaseActionType(action.type) : null;
169
- const totalDuration = action.meta?.requestId ? _reduxActionStore.reduxActionStore.getAsyncOperationDuration(action.meta.requestId) : null;
170
-
171
- // Action handlers - copy requires Pro
172
- const handleCopyAction = (0, _react.useCallback)(async () => {
173
- if (!isPro) {
174
- setShowProModal(true);
175
- return;
176
- }
177
- await (0, _sharedUi.copyToClipboard)(action.action);
178
- }, [action, isPro]);
179
- const handleCopyPayload = (0, _react.useCallback)(async () => {
180
- if (!isPro) {
181
- setShowProModal(true);
182
- return;
183
- }
184
- await (0, _sharedUi.copyToClipboard)(action.payload);
185
- }, [action.payload, isPro]);
186
- const handleReplay = (0, _react.useCallback)(() => {
187
- // Replay the original action
188
- if (action.action && typeof action.action === "object" && "type" in action.action) {
189
- (0, _buoyReduxMiddleware.replayAction)(action.action);
190
- }
191
- }, [action]);
192
- const handleJump = (0, _react.useCallback)(() => {
193
- // Jump to the state after this action was applied
194
- if (action.nextState !== undefined) {
195
- (0, _buoyReduxMiddleware.jumpToState)(action.nextState);
196
- }
197
- }, [action]);
198
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
199
- style: styles.container,
200
- contentContainerStyle: styles.contentContainer,
201
- showsVerticalScrollIndicator: false,
202
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
203
- style: styles.card,
204
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
205
- icon: _sharedUi.Info,
206
- title: "ACTION INFO"
207
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
208
- style: styles.cardContent,
209
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
210
- label: "Type",
211
- value: action.type,
212
- mono: true
213
- }), action.sliceName && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
214
- label: "Slice",
215
- value: action.sliceName,
216
- mono: true
217
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
218
- label: "Action",
219
- value: action.actionName,
220
- mono: true
221
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
222
- style: styles.badgeRow,
223
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
224
- style: [styles.categoryBadge, {
225
- backgroundColor: categoryInfo.bgColor
226
- }],
227
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
228
- style: [styles.categoryText, {
229
- color: categoryInfo.color
230
- }],
231
- children: categoryInfo.label
232
- })
233
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
234
- style: [styles.durationBadge, action.isSlowAction && styles.durationBadgeSlow],
235
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
236
- size: 10,
237
- color: action.isSlowAction ? _sharedUi.buoyColors.error : _sharedUi.buoyColors.textSecondary
238
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
239
- style: [styles.durationText, action.isSlowAction && styles.durationTextSlow],
240
- children: formatDuration(action.duration)
241
- }), action.isSlowAction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
242
- size: 10,
243
- color: _sharedUi.buoyColors.error
244
- })]
245
- }), action.hasStateChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
246
- style: styles.changesBadge,
247
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
248
- size: 10,
249
- color: _sharedUi.buoyColors.success
250
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
251
- style: styles.changesText,
252
- children: action.diffSummary || "changed"
253
- })]
254
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
255
- style: styles.noChangesBadge,
256
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
257
- style: styles.noChangesText,
258
- children: "no change"
259
- })
260
- })]
261
- })]
262
- })]
263
- }), hasRelatedActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
264
- style: styles.card,
265
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
266
- icon: _sharedUi.Hash,
267
- title: "ASYNC FLOW",
268
- badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
269
- style: styles.asyncBadge,
270
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
271
- style: styles.asyncBadgeText,
272
- children: [relatedActions.length, " ACTIONS"]
273
- })
274
- })
275
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
276
- style: styles.cardContent,
277
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
278
- style: styles.baseActionType,
279
- children: baseActionType
280
- }), totalDuration !== null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
281
- style: styles.totalDurationRow,
282
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
283
- style: styles.totalDurationLabel,
284
- children: "Total Duration"
285
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
286
- style: styles.totalDurationValue,
287
- children: [totalDuration, "ms"]
288
- })]
289
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
290
- style: styles.timeline,
291
- children: relatedActions.map((relatedAction, index) => {
292
- const relatedCategoryInfo = getCategoryInfo(relatedAction.category);
293
- const isCurrent = relatedAction.id === action.id;
294
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
295
- style: [styles.timelineItem, isCurrent && styles.timelineItemCurrent],
296
- onPress: () => onNavigateToAction?.(relatedAction),
297
- disabled: isCurrent || !onNavigateToAction,
298
- activeOpacity: 0.7,
299
- children: [index < relatedActions.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
300
- style: styles.timelineConnector
301
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
302
- style: [styles.timelineDot, {
303
- backgroundColor: relatedCategoryInfo.color
304
- }]
305
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
306
- style: styles.timelineContent,
307
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
308
- style: styles.timelineHeader,
309
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
310
- style: [styles.timelineStatusBadge, {
311
- backgroundColor: relatedCategoryInfo.bgColor
312
- }],
313
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
314
- style: [styles.timelineStatusText, {
315
- color: relatedCategoryInfo.color
316
- }],
317
- children: relatedCategoryInfo.label
318
- })
319
- }), isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
320
- style: styles.currentBadge,
321
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
322
- style: styles.currentBadgeText,
323
- children: "CURRENT"
324
- })
325
- })]
326
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
327
- style: styles.timelineTime,
328
- children: formatTime(relatedAction.timestamp)
329
- })]
330
- })]
331
- }, relatedAction.id);
332
- })
333
- })]
334
- })]
335
- }), hasPayload && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
336
- style: styles.card,
337
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
338
- icon: _sharedUi.Box,
339
- title: "PAYLOAD",
340
- badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
341
- style: styles.typeBadge,
342
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
343
- style: styles.typeText,
344
- children: Array.isArray(action.payload) ? "ARRAY" : typeof action.payload === "object" ? "OBJECT" : typeof action.payload?.toString().toUpperCase()
345
- })
346
- })
347
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
348
- style: styles.dataViewerContainer,
349
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
350
- title: "",
351
- data: (0, _sharedUi.parseValue)(action.payload),
352
- showTypeFilter: true,
353
- rawMode: true,
354
- initialExpanded: true
355
- })
356
- })]
357
- }), hasMeta && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
358
- style: styles.card,
359
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
360
- icon: _sharedUi.Hash,
361
- title: "ASYNC METADATA",
362
- badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
363
- style: [styles.categoryBadge, {
364
- backgroundColor: categoryInfo.bgColor
365
- }],
366
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
367
- style: [styles.categoryText, {
368
- color: categoryInfo.color
369
- }],
370
- children: "RTK THUNK"
371
- })
372
- })
373
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
374
- style: styles.cardContent,
375
- children: [action.meta?.requestId && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
376
- label: "Request ID",
377
- value: action.meta.requestId,
378
- mono: true
379
- }), action.meta?.requestStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
380
- label: "Status",
381
- value: action.meta.requestStatus.toUpperCase(),
382
- valueColor: categoryInfo.color
383
- }), action.meta?.arg !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
384
- style: styles.argSection,
385
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
386
- style: styles.argLabel,
387
- children: "Original Argument"
388
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
389
- style: styles.argValueContainer,
390
- children: typeof action.meta.arg === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
391
- title: "",
392
- data: (0, _sharedUi.parseValue)(action.meta.arg),
393
- showTypeFilter: true,
394
- rawMode: true,
395
- initialExpanded: true
396
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
397
- style: styles.argValue,
398
- children: JSON.stringify(action.meta.arg)
399
- })
400
- })]
401
- }), action.meta?.rejectedWithValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
402
- label: "Rejected With Value",
403
- value: "true",
404
- valueColor: _sharedUi.buoyColors.error
405
- }), action.meta?.aborted && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
406
- label: "Aborted",
407
- value: "true",
408
- valueColor: _sharedUi.buoyColors.warning
409
- }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
410
- label: "Condition",
411
- value: "true",
412
- valueColor: _sharedUi.buoyColors.textMuted
413
- })]
414
- })]
415
- }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
416
- style: [styles.card, styles.errorCard],
417
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
418
- icon: _sharedUi.AlertCircle,
419
- title: "ERROR",
420
- badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
421
- style: styles.errorBadge,
422
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
423
- style: styles.errorBadgeText,
424
- children: "REJECTED"
425
- })
426
- })
427
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
428
- style: styles.dataViewerContainer,
429
- children: typeof action.error === "object" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
430
- title: "",
431
- data: (0, _sharedUi.parseValue)(action.error),
432
- showTypeFilter: true,
433
- rawMode: true,
434
- initialExpanded: true
435
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
436
- style: styles.errorText,
437
- children: String(action.error)
438
- })
439
- })]
440
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
441
- style: styles.card,
442
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SectionHeader, {
443
- icon: _sharedUi.FileText,
444
- title: "FULL ACTION OBJECT"
445
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
446
- style: styles.dataViewerContainer,
447
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
448
- title: "",
449
- data: (0, _sharedUi.parseValue)(action.action),
450
- showTypeFilter: true,
451
- rawMode: true,
452
- initialExpanded: true
453
- })
454
- })]
455
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
456
- style: styles.actionFooter,
457
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
458
- style: styles.actionsGrid,
459
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
460
- style: styles.actionButtonWrapper,
461
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
462
- type: "replay",
463
- text: "REPLAY",
464
- onPress: handleReplay
465
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
466
- style: styles.actionDescription,
467
- children: "Dispatch again"
468
- })]
469
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
470
- style: styles.actionButtonWrapper,
471
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
472
- type: "jump",
473
- text: "JUMP",
474
- onPress: handleJump
475
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
476
- style: styles.actionDescription,
477
- children: "Restore this state"
478
- })]
479
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
480
- style: styles.actionButtonWrapper,
481
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
482
- type: "copy",
483
- text: "COPY ACTION",
484
- onPress: handleCopyAction
485
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
486
- style: styles.actionDescription,
487
- children: isPro ? "Copy to clipboard" : "Pro feature"
488
- })]
489
- }), hasPayload && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
490
- style: styles.actionButtonWrapper,
491
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton, {
492
- type: "copy",
493
- text: "COPY PAYLOAD",
494
- onPress: handleCopyPayload
495
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
496
- style: styles.actionDescription,
497
- children: isPro ? "Copy payload only" : "Pro feature"
498
- })]
499
- })]
500
- })
501
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
502
- visible: showProModal,
503
- onClose: () => setShowProModal(false),
504
- featureName: "Copy"
505
- })]
506
- });
507
- });
508
- const styles = _reactNative.StyleSheet.create({
509
- container: {
510
- flex: 1
511
- },
512
- contentContainer: {
513
- padding: 8,
514
- paddingBottom: 100,
515
- gap: 16
516
- },
517
- // Card styling - matches React Query DevTools
518
- card: {
519
- backgroundColor: _sharedUi.buoyColors.card,
520
- borderRadius: 6,
521
- borderWidth: 1,
522
- borderColor: _sharedUi.buoyColors.primary + "4D",
523
- overflow: "hidden",
524
- shadowColor: _sharedUi.buoyColors.primary,
525
- shadowOffset: {
526
- width: 0,
527
- height: 0
528
- },
529
- shadowOpacity: 0.1,
530
- shadowRadius: 6
531
- },
532
- errorCard: {
533
- borderColor: _sharedUi.buoyColors.error + "4D",
534
- shadowColor: _sharedUi.buoyColors.error
535
- },
536
- // Section header - green tinted like React Query
537
- sectionHeader: {
538
- flexDirection: "row",
539
- alignItems: "center",
540
- justifyContent: "space-between",
541
- paddingHorizontal: 12,
542
- paddingVertical: 10,
543
- borderBottomWidth: 1,
544
- borderBottomColor: _sharedUi.buoyColors.primary + "33",
545
- backgroundColor: _sharedUi.buoyColors.primary + "15"
546
- },
547
- sectionHeaderLeft: {
548
- flexDirection: "row",
549
- alignItems: "center",
550
- gap: 6
551
- },
552
- sectionTitle: {
553
- fontSize: 12,
554
- fontWeight: "600",
555
- letterSpacing: 0.5,
556
- color: _sharedUi.buoyColors.primary,
557
- fontFamily: "monospace"
558
- },
559
- cardContent: {
560
- padding: 14,
561
- gap: 10
562
- },
563
- infoRow: {
564
- flexDirection: "row",
565
- alignItems: "center",
566
- justifyContent: "space-between"
567
- },
568
- infoLabel: {
569
- fontSize: 11,
570
- color: _sharedUi.buoyColors.textMuted,
571
- fontWeight: "500"
572
- },
573
- infoValue: {
574
- fontSize: 11,
575
- color: _sharedUi.buoyColors.text,
576
- fontWeight: "500",
577
- flex: 1,
578
- textAlign: "right",
579
- marginLeft: 12
580
- },
581
- infoValueMono: {
582
- fontFamily: "monospace"
583
- },
584
- badgeRow: {
585
- flexDirection: "row",
586
- flexWrap: "wrap",
587
- gap: 8,
588
- marginTop: 6
589
- },
590
- categoryBadge: {
591
- paddingHorizontal: 8,
592
- paddingVertical: 3,
593
- borderRadius: 4
594
- },
595
- categoryText: {
596
- fontSize: 9,
597
- fontWeight: "700",
598
- letterSpacing: 0.3
599
- },
600
- durationBadge: {
601
- flexDirection: "row",
602
- alignItems: "center",
603
- gap: 4,
604
- paddingHorizontal: 8,
605
- paddingVertical: 3,
606
- borderRadius: 4,
607
- backgroundColor: _sharedUi.buoyColors.input
608
- },
609
- durationBadgeSlow: {
610
- backgroundColor: _sharedUi.buoyColors.error + "26"
611
- },
612
- durationText: {
613
- fontSize: 9,
614
- fontWeight: "600",
615
- color: _sharedUi.buoyColors.textSecondary,
616
- fontFamily: "monospace"
617
- },
618
- durationTextSlow: {
619
- color: _sharedUi.buoyColors.error
620
- },
621
- changesBadge: {
622
- flexDirection: "row",
623
- alignItems: "center",
624
- gap: 4,
625
- paddingHorizontal: 8,
626
- paddingVertical: 3,
627
- borderRadius: 4,
628
- backgroundColor: _sharedUi.buoyColors.success + "26"
629
- },
630
- changesText: {
631
- fontSize: 9,
632
- fontWeight: "600",
633
- color: _sharedUi.buoyColors.success
634
- },
635
- noChangesBadge: {
636
- paddingHorizontal: 8,
637
- paddingVertical: 3,
638
- borderRadius: 4,
639
- backgroundColor: _sharedUi.buoyColors.input
640
- },
641
- noChangesText: {
642
- fontSize: 9,
643
- fontWeight: "600",
644
- color: _sharedUi.buoyColors.textMuted
645
- },
646
- typeBadge: {
647
- paddingHorizontal: 6,
648
- paddingVertical: 2,
649
- borderRadius: 3,
650
- backgroundColor: _sharedUi.buoyColors.input
651
- },
652
- typeText: {
653
- fontSize: 8,
654
- fontWeight: "600",
655
- color: _sharedUi.buoyColors.textMuted,
656
- fontFamily: "monospace"
657
- },
658
- dataViewerContainer: {
659
- backgroundColor: _sharedUi.buoyColors.base,
660
- minHeight: 60
661
- },
662
- argSection: {
663
- marginTop: 4
664
- },
665
- argLabel: {
666
- fontSize: 11,
667
- color: _sharedUi.buoyColors.textMuted,
668
- fontWeight: "500",
669
- marginBottom: 6
670
- },
671
- argValueContainer: {
672
- backgroundColor: _sharedUi.buoyColors.base,
673
- borderRadius: 6,
674
- borderWidth: 1,
675
- borderColor: _sharedUi.buoyColors.border,
676
- overflow: "hidden"
677
- },
678
- argValue: {
679
- fontSize: 11,
680
- color: _sharedUi.buoyColors.text,
681
- fontFamily: "monospace",
682
- padding: 10
683
- },
684
- errorBadge: {
685
- paddingHorizontal: 8,
686
- paddingVertical: 3,
687
- borderRadius: 4,
688
- backgroundColor: _sharedUi.buoyColors.error + "26"
689
- },
690
- errorBadgeText: {
691
- fontSize: 9,
692
- fontWeight: "700",
693
- color: _sharedUi.buoyColors.error,
694
- letterSpacing: 0.3
695
- },
696
- errorText: {
697
- fontSize: 12,
698
- color: _sharedUi.buoyColors.error,
699
- fontFamily: "monospace",
700
- padding: 14
701
- },
702
- // Async Operation / Related Actions styles
703
- asyncBadge: {
704
- paddingHorizontal: 8,
705
- paddingVertical: 3,
706
- borderRadius: 4,
707
- backgroundColor: _sharedUi.buoyColors.primary + "26"
708
- },
709
- asyncBadgeText: {
710
- fontSize: 9,
711
- fontWeight: "700",
712
- color: _sharedUi.buoyColors.primary,
713
- letterSpacing: 0.3
714
- },
715
- baseActionType: {
716
- fontSize: 12,
717
- fontWeight: "600",
718
- color: _sharedUi.buoyColors.text,
719
- fontFamily: "monospace",
720
- marginBottom: 8
721
- },
722
- totalDurationRow: {
723
- flexDirection: "row",
724
- justifyContent: "space-between",
725
- alignItems: "center",
726
- marginBottom: 12,
727
- paddingBottom: 12,
728
- borderBottomWidth: 1,
729
- borderBottomColor: _sharedUi.buoyColors.border
730
- },
731
- totalDurationLabel: {
732
- fontSize: 11,
733
- color: _sharedUi.buoyColors.textMuted,
734
- fontWeight: "500"
735
- },
736
- totalDurationValue: {
737
- fontSize: 14,
738
- fontWeight: "700",
739
- color: _sharedUi.buoyColors.success,
740
- fontFamily: "monospace"
741
- },
742
- timeline: {
743
- gap: 0
744
- },
745
- timelineItem: {
746
- flexDirection: "row",
747
- alignItems: "flex-start",
748
- paddingVertical: 8,
749
- paddingHorizontal: 8,
750
- borderRadius: 8,
751
- position: "relative"
752
- },
753
- timelineItemCurrent: {
754
- backgroundColor: _sharedUi.buoyColors.primary + "15"
755
- },
756
- timelineConnector: {
757
- position: "absolute",
758
- left: 13,
759
- top: 24,
760
- bottom: -8,
761
- width: 2,
762
- backgroundColor: _sharedUi.buoyColors.border
763
- },
764
- timelineDot: {
765
- width: 12,
766
- height: 12,
767
- borderRadius: 6,
768
- marginRight: 10,
769
- marginTop: 2
770
- },
771
- timelineContent: {
772
- flex: 1
773
- },
774
- timelineHeader: {
775
- flexDirection: "row",
776
- alignItems: "center",
777
- gap: 8,
778
- marginBottom: 2
779
- },
780
- timelineStatusBadge: {
781
- paddingHorizontal: 6,
782
- paddingVertical: 2,
783
- borderRadius: 4
784
- },
785
- timelineStatusText: {
786
- fontSize: 9,
787
- fontWeight: "700",
788
- letterSpacing: 0.3
789
- },
790
- currentBadge: {
791
- paddingHorizontal: 6,
792
- paddingVertical: 2,
793
- borderRadius: 4,
794
- backgroundColor: _sharedUi.buoyColors.primary
795
- },
796
- currentBadgeText: {
797
- fontSize: 8,
798
- fontWeight: "700",
799
- color: "#fff",
800
- letterSpacing: 0.3
801
- },
802
- timelineTime: {
803
- fontSize: 10,
804
- color: _sharedUi.buoyColors.textMuted,
805
- fontFamily: "monospace"
806
- },
807
- // Action footer - matches React Query DevTools
808
- actionFooter: {
809
- backgroundColor: _sharedUi.buoyColors.card,
810
- borderRadius: 6,
811
- borderWidth: 1,
812
- borderColor: _sharedUi.buoyColors.primary + "4D",
813
- paddingVertical: 12,
814
- paddingHorizontal: 12,
815
- shadowColor: _sharedUi.buoyColors.primary,
816
- shadowOffset: {
817
- width: 0,
818
- height: 0
819
- },
820
- shadowOpacity: 0.1,
821
- shadowRadius: 6
822
- },
823
- actionsGrid: {
824
- flexDirection: "row",
825
- flexWrap: "wrap",
826
- gap: 12,
827
- justifyContent: "flex-start"
828
- },
829
- actionButtonWrapper: {
830
- alignItems: "center",
831
- gap: 4
832
- },
833
- actionDescription: {
834
- fontSize: 9,
835
- color: _sharedUi.buoyColors.textMuted,
836
- textAlign: "center"
837
- }
838
- });
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ReduxActionInfoView=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_reduxActionStore=require("../utils/reduxActionStore"),_buoyReduxMiddleware=require("../utils/buoyReduxMiddleware"),_ReduxActionButton=require("./ReduxActionButton"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var o=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var i,a,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=t?r:o){if(i.has(e))return i.get(e);i.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?i(s,t,a):s[t]=e[t]);return s})(e,t)}function getCategoryInfo(e){switch(e){case"pending":return{label:"PENDING",color:_sharedUi.buoyColors.warning,bgColor:_sharedUi.buoyColors.warning+"26"};case"fulfilled":return{label:"FULFILLED",color:_sharedUi.buoyColors.success,bgColor:_sharedUi.buoyColors.success+"26"};case"rejected":return{label:"REJECTED",color:_sharedUi.buoyColors.error,bgColor:_sharedUi.buoyColors.error+"26"};case"internal":return{label:"INTERNAL",color:_sharedUi.buoyColors.textMuted,bgColor:_sharedUi.buoyColors.textMuted+"26"};case"query":return{label:"QUERY",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"};case"mutation":return{label:"MUTATION",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"};default:return{label:"ACTION",color:_sharedUi.buoyColors.info,bgColor:_sharedUi.buoyColors.info+"26"}}}function formatDuration(e){return void 0===e?"N/A":e<1?"<1ms":`${e.toFixed(1)}ms`}function SectionHeader({icon:e,title:t,badge:o}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeader,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.sectionHeaderLeft,children:[(0,_jsxRuntime.jsx)(e,{size:14,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionTitle,children:t})]}),o]})}function InfoRow({label:e,value:t,valueColor:o,mono:r=!1}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.infoLabel,children:e}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.infoValue,r&&styles.infoValueMono,o&&{color:o}],numberOfLines:1,ellipsizeMode:"middle",children:t})]})}function formatTime(e){const t=new Date(e);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}:${t.getSeconds().toString().padStart(2,"0")}.${t.getMilliseconds().toString().padStart(3,"0")}`}const ReduxActionInfoView=exports.ReduxActionInfoView=(0,_react.memo)(function({action:e,onNavigateToAction:t}){const o=(0,_license.useIsPro)(),[r,i]=(0,_react.useState)(!1);(0,_react.useEffect)(()=>{r&&o&&i(!1)},[r,o]);const a=getCategoryInfo(e.category),s=void 0!==e.payload,n=e.meta&&Object.keys(e.meta).length>0,l=void 0!==e.error,d=(0,_react.useMemo)(()=>_reduxActionStore.reduxActionStore.getLinkedActions(e),[e]),c=d.length>1,u=c?_reduxActionStore.reduxActionStore.getBaseActionType(e.type):null,y=e.meta?.requestId?_reduxActionStore.reduxActionStore.getAsyncOperationDuration(e.meta.requestId):null,x=(0,_react.useCallback)(async()=>{o?await(0,_sharedUi.copyToClipboard)(e.action):i(!0)},[e,o]),_=(0,_react.useCallback)(async()=>{o?await(0,_sharedUi.copyToClipboard)(e.payload):i(!0)},[e.payload,o]),m=(0,_react.useCallback)(()=>{e.action&&"object"==typeof e.action&&"type"in e.action&&(0,_buoyReduxMiddleware.replayAction)(e.action)},[e]),g=(0,_react.useCallback)(()=>{void 0!==e.nextState&&(0,_buoyReduxMiddleware.jumpToState)(e.nextState)},[e]);return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.container,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:!1,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Info,title:"ACTION INFO"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(InfoRow,{label:"Type",value:e.type,mono:!0}),e.sliceName&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Slice",value:e.sliceName,mono:!0}),(0,_jsxRuntime.jsx)(InfoRow,{label:"Action",value:e.actionName,mono:!0}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadge,{backgroundColor:a.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryText,{color:a.color}],children:a.label})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.durationBadge,e.isSlowAction&&styles.durationBadgeSlow],children:[(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:10,color:e.isSlowAction?_sharedUi.buoyColors.error:_sharedUi.buoyColors.textSecondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.durationText,e.isSlowAction&&styles.durationTextSlow],children:formatDuration(e.duration)}),e.isSlowAction&&(0,_jsxRuntime.jsx)(_sharedUi.AlertTriangle,{size:10,color:_sharedUi.buoyColors.error})]}),e.hasStateChange?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.changesBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:10,color:_sharedUi.buoyColors.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.changesText,children:e.diffSummary||"changed"})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noChangesBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noChangesText,children:"no change"})})]})]})]}),c&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Hash,title:"ASYNC FLOW",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.asyncBadge,children:(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.asyncBadgeText,children:[d.length," ACTIONS"]})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.baseActionType,children:u}),null!==y&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.totalDurationRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.totalDurationLabel,children:"Total Duration"}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.totalDurationValue,children:[y,"ms"]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.timeline,children:d.map((o,r)=>{const i=getCategoryInfo(o.category),a=o.id===e.id;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.timelineItem,a&&styles.timelineItemCurrent],onPress:()=>t?.(o),disabled:a||!t,activeOpacity:.7,children:[r<d.length-1&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.timelineConnector}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.timelineDot,{backgroundColor:i.color}]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.timelineContent,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.timelineHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.timelineStatusBadge,{backgroundColor:i.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.timelineStatusText,{color:i.color}],children:i.label})}),a&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.currentBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.currentBadgeText,children:"CURRENT"})})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.timelineTime,children:formatTime(o.timestamp)})]})]},o.id)})})]})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Box,title:"PAYLOAD",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,children:Array.isArray(e.payload)?"ARRAY":"object"==typeof e.payload?"OBJECT":typeof e.payload?.toString().toUpperCase()})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.payload),showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]}),n&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.Hash,title:"ASYNC METADATA",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.categoryBadge,{backgroundColor:a.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.categoryText,{color:a.color}],children:"RTK THUNK"})})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[e.meta?.requestId&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Request ID",value:e.meta.requestId,mono:!0}),e.meta?.requestStatus&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Status",value:e.meta.requestStatus.toUpperCase(),valueColor:a.color}),void 0!==e.meta?.arg&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.argSection,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.argLabel,children:"Original Argument"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.argValueContainer,children:"object"==typeof e.meta.arg?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.meta.arg),showTypeFilter:!0,rawMode:!0,initialExpanded:!0}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.argValue,children:JSON.stringify(e.meta.arg)})})]}),e.meta?.rejectedWithValue&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Rejected With Value",value:"true",valueColor:_sharedUi.buoyColors.error}),e.meta?.aborted&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Aborted",value:"true",valueColor:_sharedUi.buoyColors.warning}),e.meta?.condition&&(0,_jsxRuntime.jsx)(InfoRow,{label:"Condition",value:"true",valueColor:_sharedUi.buoyColors.textMuted})]})]}),l&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.card,styles.errorCard],children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.AlertCircle,title:"ERROR",badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.errorBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorBadgeText,children:"REJECTED"})})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:"object"==typeof e.error?(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.error),showTypeFilter:!0,rawMode:!0,initialExpanded:!0}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorText,children:String(e.error)})})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.card,children:[(0,_jsxRuntime.jsx)(SectionHeader,{icon:_sharedUi.FileText,title:"FULL ACTION OBJECT"}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:(0,_sharedUi.parseValue)(e.action),showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.actionFooter,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionsGrid,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"replay",text:"REPLAY",onPress:m}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:"Dispatch again"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"jump",text:"JUMP",onPress:g}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:"Restore this state"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"copy",text:"COPY ACTION",onPress:x}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:o?"Copy to clipboard":"Pro feature"})]}),s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.actionButtonWrapper,children:[(0,_jsxRuntime.jsx)(_ReduxActionButton.ReduxActionButton,{type:"copy",text:"COPY PAYLOAD",onPress:_}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionDescription,children:o?"Copy payload only":"Pro feature"})]})]})}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:r,onClose:()=>i(!1),featureName:"Copy"})]})}),styles=_reactNative.StyleSheet.create({container:{flex:1},contentContainer:{padding:8,paddingBottom:100,gap:16},card:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"4D",overflow:"hidden",shadowColor:_sharedUi.buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},errorCard:{borderColor:_sharedUi.buoyColors.error+"4D",shadowColor:_sharedUi.buoyColors.error},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.primary+"33",backgroundColor:_sharedUi.buoyColors.primary+"15"},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:12,fontWeight:"600",letterSpacing:.5,color:_sharedUi.buoyColors.primary,fontFamily:"monospace"},cardContent:{padding:14,gap:10},infoRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},infoLabel:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontWeight:"500"},infoValue:{fontSize:11,color:_sharedUi.buoyColors.text,fontWeight:"500",flex:1,textAlign:"right",marginLeft:12},infoValueMono:{fontFamily:"monospace"},badgeRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:6},categoryBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4},categoryText:{fontSize:9,fontWeight:"700",letterSpacing:.3},durationBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.input},durationBadgeSlow:{backgroundColor:_sharedUi.buoyColors.error+"26"},durationText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.textSecondary,fontFamily:"monospace"},durationTextSlow:{color:_sharedUi.buoyColors.error},changesBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.success+"26"},changesText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.success},noChangesBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.input},noChangesText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.textMuted},typeBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:3,backgroundColor:_sharedUi.buoyColors.input},typeText:{fontSize:8,fontWeight:"600",color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},dataViewerContainer:{backgroundColor:_sharedUi.buoyColors.base,minHeight:60},argSection:{marginTop:4},argLabel:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontWeight:"500",marginBottom:6},argValueContainer:{backgroundColor:_sharedUi.buoyColors.base,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.border,overflow:"hidden"},argValue:{fontSize:11,color:_sharedUi.buoyColors.text,fontFamily:"monospace",padding:10},errorBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.error+"26"},errorBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.error,letterSpacing:.3},errorText:{fontSize:12,color:_sharedUi.buoyColors.error,fontFamily:"monospace",padding:14},asyncBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.buoyColors.primary+"26"},asyncBadgeText:{fontSize:9,fontWeight:"700",color:_sharedUi.buoyColors.primary,letterSpacing:.3},baseActionType:{fontSize:12,fontWeight:"600",color:_sharedUi.buoyColors.text,fontFamily:"monospace",marginBottom:8},totalDurationRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:12,paddingBottom:12,borderBottomWidth:1,borderBottomColor:_sharedUi.buoyColors.border},totalDurationLabel:{fontSize:11,color:_sharedUi.buoyColors.textMuted,fontWeight:"500"},totalDurationValue:{fontSize:14,fontWeight:"700",color:_sharedUi.buoyColors.success,fontFamily:"monospace"},timeline:{gap:0},timelineItem:{flexDirection:"row",alignItems:"flex-start",paddingVertical:8,paddingHorizontal:8,borderRadius:8,position:"relative"},timelineItemCurrent:{backgroundColor:_sharedUi.buoyColors.primary+"15"},timelineConnector:{position:"absolute",left:13,top:24,bottom:-8,width:2,backgroundColor:_sharedUi.buoyColors.border},timelineDot:{width:12,height:12,borderRadius:6,marginRight:10,marginTop:2},timelineContent:{flex:1},timelineHeader:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:2},timelineStatusBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},timelineStatusText:{fontSize:9,fontWeight:"700",letterSpacing:.3},currentBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,backgroundColor:_sharedUi.buoyColors.primary},currentBadgeText:{fontSize:8,fontWeight:"700",color:"#fff",letterSpacing:.3},timelineTime:{fontSize:10,color:_sharedUi.buoyColors.textMuted,fontFamily:"monospace"},actionFooter:{backgroundColor:_sharedUi.buoyColors.card,borderRadius:6,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"4D",paddingVertical:12,paddingHorizontal:12,shadowColor:_sharedUi.buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},actionsGrid:{flexDirection:"row",flexWrap:"wrap",gap:12,justifyContent:"flex-start"},actionButtonWrapper:{alignItems:"center",gap:4},actionDescription:{fontSize:9,color:_sharedUi.buoyColors.textMuted,textAlign:"center"}});