@lombard.finance/sdk-devtools 0.1.0-canary.2 → 0.1.0-canary.9
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.
- package/LICENSE +21 -0
- package/README.md +46 -42
- package/dist/index.d.ts +1 -1
- package/dist/index.js +242 -107
- package/dist/index.js.map +1 -1
- package/package.json +7 -2
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-2026 Lombard Finance
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ The SDK DevTools automatically hooks into SDK actions to collect events and stat
|
|
|
15
15
|
│ │ Lombard SDK │ │ DevTools │ │
|
|
16
16
|
│ │ │ │ │ │
|
|
17
17
|
│ │ const stake = sdk │───────▶│ Automatically │ │
|
|
18
|
-
│ │
|
|
18
|
+
│ │ .chain.btc.stake() │ events │ collects events, │ │
|
|
19
19
|
│ │ │ │ tracks status │ │
|
|
20
20
|
│ └─────────────────────┘ └──────────┬──────────┘ │
|
|
21
21
|
│ │ │
|
|
@@ -70,7 +70,7 @@ function StakeComponent() {
|
|
|
70
70
|
providers: { evm: () => window.ethereum },
|
|
71
71
|
});
|
|
72
72
|
|
|
73
|
-
const action = sdk.btc.stake({
|
|
73
|
+
const action = sdk.chain.btc.stake({
|
|
74
74
|
destChain: Chain.ETHEREUM,
|
|
75
75
|
assetOut: AssetId.LBTC,
|
|
76
76
|
});
|
|
@@ -103,7 +103,10 @@ function StakeComponent() {
|
|
|
103
103
|
### 3. Display DevTools Panel
|
|
104
104
|
|
|
105
105
|
```tsx
|
|
106
|
-
import {
|
|
106
|
+
import {
|
|
107
|
+
DevToolsPanel,
|
|
108
|
+
useDevToolsContext,
|
|
109
|
+
} from '@lombard.finance/sdk-devtools';
|
|
107
110
|
|
|
108
111
|
function DebugPanel() {
|
|
109
112
|
const { events, clearEvents, actions } = useDevToolsContext();
|
|
@@ -141,7 +144,7 @@ import { DevToolsBridge, DevToolsPanel } from '@lombard.finance/sdk-devtools';
|
|
|
141
144
|
const bridge = new DevToolsBridge({ consoleLogging: true });
|
|
142
145
|
|
|
143
146
|
// Register action
|
|
144
|
-
const stake = sdk.btc.stake({ ... });
|
|
147
|
+
const stake = sdk.chain.btc.stake({ ... });
|
|
145
148
|
const unregister = bridge.registerAction('stake', stake);
|
|
146
149
|
|
|
147
150
|
// Get events for display
|
|
@@ -174,7 +177,8 @@ For monitoring a single action with full state:
|
|
|
174
177
|
import { useActionEvents } from '@lombard.finance/sdk-devtools';
|
|
175
178
|
|
|
176
179
|
function StakeProgress({ action }) {
|
|
177
|
-
const { events, status, isLoading, error, isFailed } =
|
|
180
|
+
const { events, status, isLoading, error, isFailed } =
|
|
181
|
+
useActionEvents(action);
|
|
178
182
|
|
|
179
183
|
return (
|
|
180
184
|
<div>
|
|
@@ -197,11 +201,11 @@ Full debug panel with tabs for events, actions, and state:
|
|
|
197
201
|
<DevToolsPanel
|
|
198
202
|
events={events}
|
|
199
203
|
onClearEvents={clearEvents}
|
|
200
|
-
reducerLogs={logs}
|
|
204
|
+
reducerLogs={logs} // Optional: Redux-style action log
|
|
201
205
|
onClearReducerLogs={clearLogs} // Optional
|
|
202
|
-
state={{ status: 'ready' }}
|
|
203
|
-
initialTab="events"
|
|
204
|
-
title="SDK Debug"
|
|
206
|
+
state={{ status: 'ready' }} // Optional: State to inspect
|
|
207
|
+
initialTab="events" // Optional: 'events' | 'reducer' | 'state'
|
|
208
|
+
title="SDK Debug" // Optional
|
|
205
209
|
/>
|
|
206
210
|
```
|
|
207
211
|
|
|
@@ -265,61 +269,61 @@ function WalletSection() {
|
|
|
265
269
|
}
|
|
266
270
|
|
|
267
271
|
// Available mock addresses
|
|
268
|
-
console.log(MOCK_ADDRESSES.evm);
|
|
269
|
-
console.log(MOCK_ADDRESSES.bitcoin);
|
|
270
|
-
console.log(MOCK_ADDRESSES.solana);
|
|
272
|
+
console.log(MOCK_ADDRESSES.evm); // 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045
|
|
273
|
+
console.log(MOCK_ADDRESSES.bitcoin); // bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
|
|
274
|
+
console.log(MOCK_ADDRESSES.solana); // DRpbCBMxVnDK7maPMxTm9dRYNLGhPEYALmJY9VvUdWTm
|
|
271
275
|
```
|
|
272
276
|
|
|
273
277
|
## SDK Events Collected
|
|
274
278
|
|
|
275
279
|
The bridge automatically subscribes to these SDK events:
|
|
276
280
|
|
|
277
|
-
| Event
|
|
278
|
-
|
|
281
|
+
| Event | Description |
|
|
282
|
+
| --------------- | ---------------------------------------------------------------- |
|
|
279
283
|
| `status-change` | Action status changed (e.g., `idle` → `needs_fee_authorization`) |
|
|
280
|
-
| `loading`
|
|
281
|
-
| `error`
|
|
282
|
-
| `completed`
|
|
283
|
-
| `failed`
|
|
284
|
-
| `progress`
|
|
284
|
+
| `loading` | Loading state changed |
|
|
285
|
+
| `error` | An error occurred |
|
|
286
|
+
| `completed` | Action completed successfully |
|
|
287
|
+
| `failed` | Action failed |
|
|
288
|
+
| `progress` | Progress update with step details |
|
|
285
289
|
|
|
286
290
|
## API Reference
|
|
287
291
|
|
|
288
292
|
### Provider
|
|
289
293
|
|
|
290
|
-
| Export
|
|
291
|
-
|
|
292
|
-
| `DevToolsProvider`
|
|
294
|
+
| Export | Description |
|
|
295
|
+
| -------------------- | ------------------------------- |
|
|
296
|
+
| `DevToolsProvider` | React context provider |
|
|
293
297
|
| `useDevToolsContext` | Hook to access DevTools context |
|
|
294
|
-
| `useRegisterAction`
|
|
298
|
+
| `useRegisterAction` | Hook to register an action |
|
|
295
299
|
|
|
296
300
|
### Bridge
|
|
297
301
|
|
|
298
|
-
| Export
|
|
299
|
-
|
|
300
|
-
| `DevToolsBridge`
|
|
301
|
-
| `getDevToolsBridge`
|
|
302
|
-
| `resetDevToolsBridge` | Reset global bridge
|
|
302
|
+
| Export | Description |
|
|
303
|
+
| --------------------- | --------------------------- |
|
|
304
|
+
| `DevToolsBridge` | Core bridge class |
|
|
305
|
+
| `getDevToolsBridge` | Get global singleton bridge |
|
|
306
|
+
| `resetDevToolsBridge` | Reset global bridge |
|
|
303
307
|
|
|
304
308
|
### Hooks
|
|
305
309
|
|
|
306
|
-
| Hook
|
|
307
|
-
|
|
308
|
-
| `useDevTools`
|
|
309
|
-
| `useMonitoredAction` | Create and auto-register an action
|
|
310
|
-
| `useActionEvents`
|
|
311
|
-
| `useMockWallet`
|
|
310
|
+
| Hook | Description |
|
|
311
|
+
| -------------------- | ---------------------------------------- |
|
|
312
|
+
| `useDevTools` | Full DevTools state and methods |
|
|
313
|
+
| `useMonitoredAction` | Create and auto-register an action |
|
|
314
|
+
| `useActionEvents` | Subscribe to events from a single action |
|
|
315
|
+
| `useMockWallet` | Mock wallet for testing |
|
|
312
316
|
|
|
313
317
|
### Components
|
|
314
318
|
|
|
315
|
-
| Component
|
|
316
|
-
|
|
317
|
-
| `DevToolsPanel`
|
|
318
|
-
| `EventLog`
|
|
319
|
-
| `ReducerLog`
|
|
320
|
-
| `StateInspector` | JSON tree viewer
|
|
321
|
-
| `StatusBadge`
|
|
322
|
-
| `StepIndicator`
|
|
319
|
+
| Component | Description |
|
|
320
|
+
| ---------------- | ----------------------- |
|
|
321
|
+
| `DevToolsPanel` | Full tabbed debug panel |
|
|
322
|
+
| `EventLog` | SDK event stream |
|
|
323
|
+
| `ReducerLog` | Redux-style action log |
|
|
324
|
+
| `StateInspector` | JSON tree viewer |
|
|
325
|
+
| `StatusBadge` | Status indicator |
|
|
326
|
+
| `StepIndicator` | Progress steps |
|
|
323
327
|
|
|
324
328
|
## Styling
|
|
325
329
|
|
package/dist/index.d.ts
CHANGED
|
@@ -563,7 +563,7 @@ interface NetworkLogProps {
|
|
|
563
563
|
/** Maximum height for scrolling */
|
|
564
564
|
maxHeight?: string;
|
|
565
565
|
}
|
|
566
|
-
declare function NetworkLog({ entries, onClear, maxHeight }: NetworkLogProps): react_jsx_runtime.JSX.Element;
|
|
566
|
+
declare function NetworkLog({ entries, onClear, maxHeight, }: NetworkLogProps): react_jsx_runtime.JSX.Element;
|
|
567
567
|
|
|
568
568
|
interface ReducerLogProps {
|
|
569
569
|
/** Log entries to display */
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,14 @@ var DEFAULT_DEVTOOLS_CONFIG = {
|
|
|
10
10
|
};
|
|
11
11
|
|
|
12
12
|
// src/provider/DevToolsProvider.tsx
|
|
13
|
-
import {
|
|
13
|
+
import {
|
|
14
|
+
createContext,
|
|
15
|
+
useCallback,
|
|
16
|
+
useContext,
|
|
17
|
+
useEffect,
|
|
18
|
+
useMemo,
|
|
19
|
+
useState
|
|
20
|
+
} from "react";
|
|
14
21
|
|
|
15
22
|
// src/bridge/DevToolsBridge.ts
|
|
16
23
|
var DevToolsBridge = class {
|
|
@@ -209,7 +216,10 @@ var DevToolsBridge = class {
|
|
|
209
216
|
payload: params.payload
|
|
210
217
|
});
|
|
211
218
|
if (this.config.consoleLogging) {
|
|
212
|
-
console.log(
|
|
219
|
+
console.log(
|
|
220
|
+
`[DevTools] API ${params.method} ${params.url}`,
|
|
221
|
+
params.payload
|
|
222
|
+
);
|
|
213
223
|
}
|
|
214
224
|
this.notifyNetworkListeners();
|
|
215
225
|
return requestId;
|
|
@@ -339,7 +349,9 @@ function DevToolsProvider({
|
|
|
339
349
|
}) {
|
|
340
350
|
const [bridge] = useState(() => new DevToolsBridge(config));
|
|
341
351
|
const [events, setEvents] = useState([]);
|
|
342
|
-
const [actions, setActions] = useState(
|
|
352
|
+
const [actions, setActions] = useState(
|
|
353
|
+
/* @__PURE__ */ new Map()
|
|
354
|
+
);
|
|
343
355
|
const [networkLog, setNetworkLog] = useState([]);
|
|
344
356
|
const [mountId, setMountId] = useState(0);
|
|
345
357
|
useEffect(() => {
|
|
@@ -347,15 +359,24 @@ function DevToolsProvider({
|
|
|
347
359
|
}, []);
|
|
348
360
|
useEffect(() => {
|
|
349
361
|
if (!enabled || mountId === 0) return;
|
|
350
|
-
console.log(
|
|
362
|
+
console.log(
|
|
363
|
+
"[DevToolsProvider] Setting up event subscriptions, mountId:",
|
|
364
|
+
mountId
|
|
365
|
+
);
|
|
351
366
|
const existingEvents = bridge.getEvents();
|
|
352
367
|
const existingActions = bridge.getActions();
|
|
353
368
|
if (existingEvents.length > 0) {
|
|
354
|
-
console.log(
|
|
369
|
+
console.log(
|
|
370
|
+
"[DevToolsProvider] Syncing existing events:",
|
|
371
|
+
existingEvents.length
|
|
372
|
+
);
|
|
355
373
|
setEvents(existingEvents);
|
|
356
374
|
}
|
|
357
375
|
if (existingActions.size > 0) {
|
|
358
|
-
console.log(
|
|
376
|
+
console.log(
|
|
377
|
+
"[DevToolsProvider] Syncing existing actions:",
|
|
378
|
+
existingActions.size
|
|
379
|
+
);
|
|
359
380
|
setActions(existingActions);
|
|
360
381
|
}
|
|
361
382
|
const unsubEvent = bridge.onEvent((event) => {
|
|
@@ -365,16 +386,27 @@ function DevToolsProvider({
|
|
|
365
386
|
setEvents(newEvents);
|
|
366
387
|
});
|
|
367
388
|
const unsubState = bridge.onStateChange((newActions) => {
|
|
368
|
-
console.log(
|
|
389
|
+
console.log(
|
|
390
|
+
"[DevToolsProvider] State changed:",
|
|
391
|
+
newActions.size,
|
|
392
|
+
"actions"
|
|
393
|
+
);
|
|
369
394
|
setActions(newActions);
|
|
370
395
|
});
|
|
371
396
|
const unsubNetwork = bridge.onNetworkChange((entries) => {
|
|
372
|
-
console.log(
|
|
397
|
+
console.log(
|
|
398
|
+
"[DevToolsProvider] Network log updated:",
|
|
399
|
+
entries.length,
|
|
400
|
+
"entries"
|
|
401
|
+
);
|
|
373
402
|
setNetworkLog(entries);
|
|
374
403
|
});
|
|
375
404
|
const existingNetworkLog = bridge.getNetworkLog();
|
|
376
405
|
if (existingNetworkLog.length > 0) {
|
|
377
|
-
console.log(
|
|
406
|
+
console.log(
|
|
407
|
+
"[DevToolsProvider] Syncing existing network log:",
|
|
408
|
+
existingNetworkLog.length
|
|
409
|
+
);
|
|
378
410
|
setNetworkLog(existingNetworkLog);
|
|
379
411
|
}
|
|
380
412
|
return () => {
|
|
@@ -462,7 +494,15 @@ function useRegisterAction(name, action, category) {
|
|
|
462
494
|
}
|
|
463
495
|
|
|
464
496
|
// src/components/DevToolsPanel.tsx
|
|
465
|
-
import {
|
|
497
|
+
import {
|
|
498
|
+
Activity as Activity2,
|
|
499
|
+
Bug,
|
|
500
|
+
Database,
|
|
501
|
+
Maximize2,
|
|
502
|
+
Minimize2,
|
|
503
|
+
Terminal as Terminal2,
|
|
504
|
+
Wifi
|
|
505
|
+
} from "lucide-react";
|
|
466
506
|
import { useMemo as useMemo2, useState as useState5 } from "react";
|
|
467
507
|
|
|
468
508
|
// src/components/EventLog.tsx
|
|
@@ -503,7 +543,8 @@ function EventLog({
|
|
|
503
543
|
"\u{1F4A1} These events are emitted by the SDK's",
|
|
504
544
|
" ",
|
|
505
545
|
/* @__PURE__ */ jsx2("code", { className: "text-gray-900 dark:text-white font-semibold", children: "action.on()" }),
|
|
506
|
-
"
|
|
546
|
+
" ",
|
|
547
|
+
"method"
|
|
507
548
|
] }),
|
|
508
549
|
/* @__PURE__ */ jsx2("div", { className: "flex-1 overflow-y-auto p-2 font-mono text-[11px] leading-relaxed", children: events.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "text-gray-400 dark:text-gray-600 text-center py-4", children: /* @__PURE__ */ jsx2("p", { children: "SDK events will appear here..." }) }) : /* @__PURE__ */ jsx2("div", { className: "space-y-0.5", children: events.map((event) => /* @__PURE__ */ jsx2(EventRow, { event }, event.id)) }) })
|
|
509
550
|
] });
|
|
@@ -552,10 +593,21 @@ function formatEventData(data) {
|
|
|
552
593
|
}
|
|
553
594
|
|
|
554
595
|
// src/components/NetworkLog.tsx
|
|
555
|
-
import {
|
|
596
|
+
import {
|
|
597
|
+
AlertCircle,
|
|
598
|
+
CheckCircle,
|
|
599
|
+
ChevronDown,
|
|
600
|
+
ChevronRight,
|
|
601
|
+
Clock,
|
|
602
|
+
Loader2
|
|
603
|
+
} from "lucide-react";
|
|
556
604
|
import { useState as useState2 } from "react";
|
|
557
605
|
import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
558
|
-
function NetworkLog({
|
|
606
|
+
function NetworkLog({
|
|
607
|
+
entries,
|
|
608
|
+
onClear,
|
|
609
|
+
maxHeight = "400px"
|
|
610
|
+
}) {
|
|
559
611
|
const [expandedIds, setExpandedIds] = useState2(/* @__PURE__ */ new Set());
|
|
560
612
|
const toggleExpand = (id) => {
|
|
561
613
|
setExpandedIds((prev) => {
|
|
@@ -622,46 +674,119 @@ function NetworkEntry({ entry, isExpanded, onToggle }) {
|
|
|
622
674
|
return request.url;
|
|
623
675
|
}
|
|
624
676
|
})();
|
|
625
|
-
return /* @__PURE__ */ jsxs2(
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
{
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
677
|
+
return /* @__PURE__ */ jsxs2(
|
|
678
|
+
"div",
|
|
679
|
+
{
|
|
680
|
+
className: `border-b border-gray-100 dark:border-gray-700/50 ${isFailed ? "bg-red-50/50 dark:bg-red-900/10" : ""}`,
|
|
681
|
+
children: [
|
|
682
|
+
/* @__PURE__ */ jsxs2(
|
|
683
|
+
"button",
|
|
684
|
+
{
|
|
685
|
+
onClick: onToggle,
|
|
686
|
+
className: "w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors",
|
|
687
|
+
children: [
|
|
688
|
+
isExpanded ? /* @__PURE__ */ jsx3(ChevronDown, { className: "w-3.5 h-3.5 text-gray-400 flex-shrink-0" }) : /* @__PURE__ */ jsx3(ChevronRight, { className: "w-3.5 h-3.5 text-gray-400 flex-shrink-0" }),
|
|
689
|
+
/* @__PURE__ */ jsx3(StatusIcon, {}),
|
|
690
|
+
/* @__PURE__ */ jsx3(
|
|
691
|
+
"span",
|
|
692
|
+
{
|
|
693
|
+
className: `text-xs font-mono font-bold ${methodColor} w-10 flex-shrink-0`,
|
|
694
|
+
children: request.method
|
|
695
|
+
}
|
|
696
|
+
),
|
|
697
|
+
/* @__PURE__ */ jsx3("span", { className: "flex-1 text-xs font-mono text-gray-700 dark:text-gray-300 truncate", children: urlPath }),
|
|
698
|
+
response && /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
699
|
+
/* @__PURE__ */ jsx3(
|
|
700
|
+
"span",
|
|
701
|
+
{
|
|
702
|
+
className: `text-xs font-mono ${isFailed ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`,
|
|
703
|
+
children: response.status
|
|
704
|
+
}
|
|
705
|
+
),
|
|
706
|
+
/* @__PURE__ */ jsxs2("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: [
|
|
707
|
+
response.duration,
|
|
708
|
+
"ms"
|
|
709
|
+
] })
|
|
710
|
+
] }),
|
|
711
|
+
request.source && /* @__PURE__ */ jsx3("span", { className: "text-[10px] px-1.5 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded", children: request.source })
|
|
712
|
+
]
|
|
713
|
+
}
|
|
714
|
+
),
|
|
715
|
+
isExpanded && /* @__PURE__ */ jsxs2("div", { className: "px-3 pb-3 space-y-2", children: [
|
|
716
|
+
/* @__PURE__ */ jsxs2("div", { children: [
|
|
717
|
+
/* @__PURE__ */ jsx3(
|
|
718
|
+
"h4",
|
|
719
|
+
{
|
|
720
|
+
style: { fontSize: "10px", lineHeight: "14px" },
|
|
721
|
+
className: "font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1",
|
|
722
|
+
children: "Request"
|
|
723
|
+
}
|
|
724
|
+
),
|
|
725
|
+
/* @__PURE__ */ jsx3("div", { className: "bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-x-auto max-w-full", children: request.payload ? /* @__PURE__ */ jsx3(
|
|
726
|
+
"pre",
|
|
727
|
+
{
|
|
728
|
+
style: { fontSize: "11px", lineHeight: "16px" },
|
|
729
|
+
className: "text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-mono m-0",
|
|
730
|
+
children: JSON.stringify(request.payload, null, 2)
|
|
731
|
+
}
|
|
732
|
+
) : /* @__PURE__ */ jsx3(
|
|
733
|
+
"span",
|
|
734
|
+
{
|
|
735
|
+
style: { fontSize: "11px" },
|
|
736
|
+
className: "text-gray-400 italic",
|
|
737
|
+
children: "No payload"
|
|
738
|
+
}
|
|
739
|
+
) })
|
|
642
740
|
] }),
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
741
|
+
response && /* @__PURE__ */ jsxs2("div", { children: [
|
|
742
|
+
/* @__PURE__ */ jsxs2(
|
|
743
|
+
"h4",
|
|
744
|
+
{
|
|
745
|
+
style: { fontSize: "10px", lineHeight: "14px" },
|
|
746
|
+
className: "font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1",
|
|
747
|
+
children: [
|
|
748
|
+
"Response",
|
|
749
|
+
response.error && /* @__PURE__ */ jsx3("span", { className: "text-red-500 ml-2", children: "Error" })
|
|
750
|
+
]
|
|
751
|
+
}
|
|
752
|
+
),
|
|
753
|
+
/* @__PURE__ */ jsx3(
|
|
754
|
+
"div",
|
|
755
|
+
{
|
|
756
|
+
className: `rounded p-2 overflow-x-auto max-w-full ${isFailed ? "bg-red-50 dark:bg-red-900/20" : "bg-gray-50 dark:bg-gray-800"}`,
|
|
757
|
+
children: response.error ? /* @__PURE__ */ jsx3(
|
|
758
|
+
"pre",
|
|
759
|
+
{
|
|
760
|
+
style: { fontSize: "11px", lineHeight: "16px" },
|
|
761
|
+
className: "text-red-600 dark:text-red-400 whitespace-pre-wrap break-all font-mono m-0",
|
|
762
|
+
children: response.error
|
|
763
|
+
}
|
|
764
|
+
) : response.data ? /* @__PURE__ */ jsx3(
|
|
765
|
+
"pre",
|
|
766
|
+
{
|
|
767
|
+
style: { fontSize: "11px", lineHeight: "16px" },
|
|
768
|
+
className: "text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-mono m-0",
|
|
769
|
+
children: JSON.stringify(response.data, null, 2)
|
|
770
|
+
}
|
|
771
|
+
) : /* @__PURE__ */ jsx3(
|
|
772
|
+
"span",
|
|
773
|
+
{
|
|
774
|
+
style: { fontSize: "11px" },
|
|
775
|
+
className: "text-gray-400 italic",
|
|
776
|
+
children: "No data"
|
|
777
|
+
}
|
|
778
|
+
)
|
|
779
|
+
}
|
|
780
|
+
)
|
|
781
|
+
] }),
|
|
782
|
+
isPending && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400", children: [
|
|
783
|
+
/* @__PURE__ */ jsx3(Loader2, { className: "w-3 h-3 animate-spin" }),
|
|
784
|
+
/* @__PURE__ */ jsx3("span", { children: "Waiting for response..." })
|
|
785
|
+
] })
|
|
786
|
+
] })
|
|
787
|
+
]
|
|
788
|
+
}
|
|
789
|
+
);
|
|
665
790
|
}
|
|
666
791
|
|
|
667
792
|
// src/components/ReducerLog.tsx
|
|
@@ -848,7 +973,8 @@ function StateTree({
|
|
|
848
973
|
return /* @__PURE__ */ jsxs4("div", { className: "font-mono text-xs", style: { marginLeft: indent }, children: [
|
|
849
974
|
keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
|
|
850
975
|
keyName,
|
|
851
|
-
":
|
|
976
|
+
":",
|
|
977
|
+
" "
|
|
852
978
|
] }),
|
|
853
979
|
/* @__PURE__ */ jsx5("span", { className: "text-gray-400 dark:text-gray-500", children: "[]" })
|
|
854
980
|
] });
|
|
@@ -892,7 +1018,8 @@ function StateTree({
|
|
|
892
1018
|
return /* @__PURE__ */ jsxs4("div", { className: "font-mono text-xs", style: { marginLeft: indent }, children: [
|
|
893
1019
|
keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
|
|
894
1020
|
keyName,
|
|
895
|
-
":
|
|
1021
|
+
":",
|
|
1022
|
+
" "
|
|
896
1023
|
] }),
|
|
897
1024
|
/* @__PURE__ */ jsx5("span", { className: "text-gray-400 dark:text-gray-500", children: "{}" })
|
|
898
1025
|
] });
|
|
@@ -1026,61 +1153,67 @@ function DevToolsPanel({
|
|
|
1026
1153
|
}
|
|
1027
1154
|
);
|
|
1028
1155
|
}
|
|
1029
|
-
return /* @__PURE__ */ jsxs5(
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1156
|
+
return /* @__PURE__ */ jsxs5(
|
|
1157
|
+
"div",
|
|
1158
|
+
{
|
|
1159
|
+
className: `h-full flex flex-col bg-white dark:bg-gray-900 ${className}`,
|
|
1160
|
+
children: [
|
|
1161
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex items-center border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: [
|
|
1162
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 px-2", children: [
|
|
1163
|
+
/* @__PURE__ */ jsx6(Bug, { className: "w-3.5 h-3.5 text-gray-400 dark:text-gray-500" }),
|
|
1164
|
+
/* @__PURE__ */ jsx6("span", { className: "text-[10px] text-gray-500 font-medium uppercase tracking-wider", children: title })
|
|
1165
|
+
] }),
|
|
1166
|
+
/* @__PURE__ */ jsx6("div", { className: "flex-1 flex", children: tabs.map((tab) => /* @__PURE__ */ jsxs5(
|
|
1167
|
+
"button",
|
|
1168
|
+
{
|
|
1169
|
+
onClick: () => {
|
|
1170
|
+
setActiveTab(tab.id);
|
|
1171
|
+
},
|
|
1172
|
+
className: `
|
|
1042
1173
|
flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors
|
|
1043
1174
|
${activeTab === tab.id ? "text-cyan-600 dark:text-cyan-400 border-cyan-500 dark:border-cyan-400 bg-white dark:bg-gray-900/50" : "text-gray-500 dark:text-gray-400 border-transparent hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700/30"}
|
|
1044
1175
|
`,
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1176
|
+
children: [
|
|
1177
|
+
/* @__PURE__ */ jsx6(tab.icon, { className: "w-3.5 h-3.5" }),
|
|
1178
|
+
tab.label,
|
|
1179
|
+
tab.count !== null && tab.count > 0 && /* @__PURE__ */ jsx6("span", { className: "ml-1 px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-[9px]", children: tab.count })
|
|
1180
|
+
]
|
|
1181
|
+
},
|
|
1182
|
+
tab.id
|
|
1183
|
+
)) }),
|
|
1184
|
+
/* @__PURE__ */ jsx6(
|
|
1185
|
+
"button",
|
|
1186
|
+
{
|
|
1187
|
+
onClick: handleMinimize,
|
|
1188
|
+
className: "px-2 py-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
|
|
1189
|
+
title: "Minimize",
|
|
1190
|
+
children: /* @__PURE__ */ jsx6(Minimize2, { className: "w-3.5 h-3.5" })
|
|
1191
|
+
}
|
|
1192
|
+
)
|
|
1193
|
+
] }),
|
|
1194
|
+
/* @__PURE__ */ jsxs5("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
|
|
1195
|
+
activeTab === "events" && /* @__PURE__ */ jsx6(EventLog, { events, onClear: onClearEvents }),
|
|
1196
|
+
activeTab === "network" && /* @__PURE__ */ jsx6(
|
|
1197
|
+
NetworkLog,
|
|
1198
|
+
{
|
|
1199
|
+
entries: networkLog,
|
|
1200
|
+
onClear: onClearNetworkLog ?? (() => {
|
|
1201
|
+
})
|
|
1202
|
+
}
|
|
1203
|
+
),
|
|
1204
|
+
activeTab === "reducer" && /* @__PURE__ */ jsx6(
|
|
1205
|
+
ReducerLog,
|
|
1206
|
+
{
|
|
1207
|
+
logs: reducerLogs,
|
|
1208
|
+
onClear: onClearReducerLogs ?? (() => {
|
|
1209
|
+
})
|
|
1210
|
+
}
|
|
1211
|
+
),
|
|
1212
|
+
activeTab === "state" && /* @__PURE__ */ jsx6("div", { className: "h-full overflow-auto p-2", children: /* @__PURE__ */ jsx6(StateInspector, { state, title: "Current State" }) })
|
|
1213
|
+
] })
|
|
1214
|
+
]
|
|
1215
|
+
}
|
|
1216
|
+
);
|
|
1084
1217
|
}
|
|
1085
1218
|
|
|
1086
1219
|
// src/components/StatusBadge.tsx
|
|
@@ -1234,7 +1367,9 @@ function useDevTools(config) {
|
|
|
1234
1367
|
bridgeRef.current = config ? new DevToolsBridge(config) : getDevToolsBridge();
|
|
1235
1368
|
}
|
|
1236
1369
|
const bridge = bridgeRef.current;
|
|
1237
|
-
const [events, setEvents] = useState6(
|
|
1370
|
+
const [events, setEvents] = useState6(
|
|
1371
|
+
() => bridge.getEvents()
|
|
1372
|
+
);
|
|
1238
1373
|
const [actions, setActions] = useState6(
|
|
1239
1374
|
() => bridge.getActions()
|
|
1240
1375
|
);
|