@lombard.finance/sdk-devtools 0.1.0-canary.0.4

package/dist/index.js

@@ -0,0 +1,1509 @@
+// src/types.ts
+var DEFAULT_DEVTOOLS_CONFIG = {
+  position: "bottom-right",
+  defaultOpen: false,
+  theme: "dark",
+  showEnvironment: true,
+  consoleLogging: false,
+  maxEvents: 100,
+  maxReducerLogs: 50
+};
+
+// src/provider/DevToolsProvider.tsx
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+// src/bridge/DevToolsBridge.ts
+var DevToolsBridge = class {
+  constructor(config) {
+    this.events = [];
+    this.actions = /* @__PURE__ */ new Map();
+    this.unsubscribers = /* @__PURE__ */ new Map();
+    this.eventListeners = /* @__PURE__ */ new Set();
+    this.stateListeners = /* @__PURE__ */ new Set();
+    this.eventIdCounter = 0;
+    // Network logging
+    this.networkLog = /* @__PURE__ */ new Map();
+    this.networkListeners = /* @__PURE__ */ new Set();
+    this.requestIdCounter = 0;
+    this.config = { ...DEFAULT_DEVTOOLS_CONFIG, ...config };
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Action Registration
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Register an SDK action for monitoring
+   *
+   * Automatically subscribes to all standard events:
+   * - status-change
+   * - error
+   * - completed
+   * - failed
+   * - loading
+   * - progress
+   */
+  registerAction(name, action, options) {
+    this.actions.set(name, {
+      name,
+      action,
+      registeredAt: Date.now(),
+      category: options?.category
+    });
+    const eventTypes = [
+      "status-change",
+      "error",
+      "completed",
+      "failed",
+      "loading",
+      "progress"
+    ];
+    const unsubscribers = [];
+    for (const eventType of eventTypes) {
+      try {
+        const unsubscribe = action.on(eventType, (...args) => {
+          this.handleEvent(name, eventType, args[0]);
+        });
+        if (typeof unsubscribe === "function") {
+          unsubscribers.push(unsubscribe);
+        }
+      } catch {
+      }
+    }
+    this.unsubscribers.set(name, unsubscribers);
+    this.notifyStateListeners();
+    this.handleEvent(name, "registered", { status: action.status });
+    return () => {
+      this.unregisterAction(name);
+    };
+  }
+  /**
+   * Unregister an action
+   */
+  unregisterAction(name) {
+    const unsubs = this.unsubscribers.get(name);
+    if (unsubs) {
+      unsubs.forEach((unsub) => {
+        unsub();
+      });
+      this.unsubscribers.delete(name);
+    }
+    this.actions.delete(name);
+    this.notifyStateListeners();
+    this.handleEvent(name, "unregistered", null);
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Event Handling
+  // ─────────────────────────────────────────────────────────────────
+  handleEvent(source, type, data) {
+    const event = {
+      id: `${++this.eventIdCounter}`,
+      type,
+      timestamp: Date.now(),
+      data,
+      source,
+      isSDKEvent: true
+    };
+    this.events.push(event);
+    if (this.events.length > this.config.maxEvents) {
+      this.events.shift();
+    }
+    if (this.config.consoleLogging) {
+      console.log(`[DevTools] ${source} \u2192 ${type}:`, data);
+    }
+    this.notifyEventListeners(event);
+  }
+  notifyEventListeners(event) {
+    this.eventListeners.forEach((listener) => {
+      try {
+        listener(event);
+      } catch (err) {
+        console.error("[DevTools] Event listener error:", err);
+      }
+    });
+  }
+  notifyStateListeners() {
+    this.stateListeners.forEach((listener) => {
+      try {
+        listener(new Map(this.actions));
+      } catch (err) {
+        console.error("[DevTools] State listener error:", err);
+      }
+    });
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Subscriptions
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Subscribe to new events
+   */
+  onEvent(callback) {
+    this.eventListeners.add(callback);
+    return () => this.eventListeners.delete(callback);
+  }
+  /**
+   * Subscribe to action state changes
+   */
+  onStateChange(callback) {
+    this.stateListeners.add(callback);
+    return () => this.stateListeners.delete(callback);
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Getters
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Get all collected events
+   */
+  getEvents() {
+    return [...this.events];
+  }
+  /**
+   * Get all registered actions
+   */
+  getActions() {
+    return new Map(this.actions);
+  }
+  /**
+   * Get current state summary for all actions
+   */
+  getStateSummary() {
+    const summary = {};
+    this.actions.forEach((reg, name) => {
+      summary[name] = {
+        status: reg.action.status,
+        isLoading: reg.action.isLoading,
+        hasError: reg.action.isFailed
+      };
+    });
+    return summary;
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Network Logging (API Requests/Responses)
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Log an API request
+   *
+   * Call this when an HTTP request is initiated.
+   * Returns a request ID to correlate with the response.
+   */
+  logApiRequest(params) {
+    const requestId = `req-${++this.requestIdCounter}`;
+    const request = {
+      id: requestId,
+      type: "api-request",
+      method: params.method,
+      url: params.url,
+      payload: params.payload,
+      headers: params.headers,
+      timestamp: Date.now(),
+      source: params.source
+    };
+    const entry = {
+      request,
+      response: null,
+      isPending: true,
+      isFailed: false
+    };
+    this.networkLog.set(requestId, entry);
+    this.handleEvent(params.source || "api", "api-request", {
+      method: params.method,
+      url: params.url,
+      payload: params.payload
+    });
+    if (this.config.consoleLogging) {
+      console.log(`[DevTools] API ${params.method} ${params.url}`, params.payload);
+    }
+    this.notifyNetworkListeners();
+    return requestId;
+  }
+  /**
+   * Log an API response
+   *
+   * Call this when an HTTP response is received.
+   * Pass the requestId returned from logApiRequest.
+   */
+  logApiResponse(params) {
+    const entry = this.networkLog.get(params.requestId);
+    if (!entry) {
+      console.warn(`[DevTools] No request found for ID: ${params.requestId}`);
+      return;
+    }
+    const response = {
+      id: `res-${params.requestId}`,
+      type: "api-response",
+      requestId: params.requestId,
+      status: params.status,
+      statusText: params.statusText,
+      data: params.data,
+      error: params.error,
+      duration: Date.now() - entry.request.timestamp,
+      timestamp: Date.now()
+    };
+    entry.response = response;
+    entry.isPending = false;
+    entry.isFailed = params.status >= 400 || !!params.error;
+    this.handleEvent(entry.request.source || "api", "api-response", {
+      status: params.status,
+      duration: response.duration,
+      url: entry.request.url,
+      error: params.error
+    });
+    if (this.config.consoleLogging) {
+      const logFn = entry.isFailed ? console.error : console.log;
+      logFn(
+        `[DevTools] API Response ${params.status} (${response.duration}ms) ${entry.request.url}`,
+        params.data || params.error
+      );
+    }
+    this.notifyNetworkListeners();
+  }
+  /**
+   * Subscribe to network log changes
+   */
+  onNetworkChange(callback) {
+    this.networkListeners.add(callback);
+    return () => this.networkListeners.delete(callback);
+  }
+  /**
+   * Get all network log entries
+   */
+  getNetworkLog() {
+    return Array.from(this.networkLog.values()).sort(
+      (a, b) => b.request.timestamp - a.request.timestamp
+    );
+  }
+  /**
+   * Clear network log
+   */
+  clearNetworkLog() {
+    this.networkLog.clear();
+    this.notifyNetworkListeners();
+  }
+  notifyNetworkListeners() {
+    const entries = this.getNetworkLog();
+    this.networkListeners.forEach((listener) => {
+      try {
+        listener(entries);
+      } catch (err) {
+        console.error("[DevTools] Network listener error:", err);
+      }
+    });
+  }
+  // ─────────────────────────────────────────────────────────────────
+  // Utilities
+  // ─────────────────────────────────────────────────────────────────
+  /**
+   * Clear all events
+   */
+  clearEvents() {
+    this.events = [];
+  }
+  /**
+   * Clear all registered actions
+   */
+  clearActions() {
+    this.actions.forEach((_, name) => {
+      this.unregisterAction(name);
+    });
+  }
+  /**
+   * Destroy the bridge
+   */
+  destroy() {
+    this.clearActions();
+    this.clearNetworkLog();
+    this.eventListeners.clear();
+    this.stateListeners.clear();
+    this.networkListeners.clear();
+  }
+};
+var globalBridge = null;
+function getDevToolsBridge(config) {
+  if (!globalBridge) {
+    globalBridge = new DevToolsBridge(config);
+  }
+  return globalBridge;
+}
+function resetDevToolsBridge() {
+  if (globalBridge) {
+    globalBridge.destroy();
+    globalBridge = null;
+  }
+}
+
+// src/provider/DevToolsProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var DevToolsContext = createContext(null);
+function DevToolsProvider({
+  children,
+  config,
+  enabled = process.env.NODE_ENV !== "production"
+}) {
+  const [bridge] = useState(() => new DevToolsBridge(config));
+  const [events, setEvents] = useState([]);
+  const [actions, setActions] = useState(/* @__PURE__ */ new Map());
+  const [networkLog, setNetworkLog] = useState([]);
+  const [mountId, setMountId] = useState(0);
+  useEffect(() => {
+    setMountId((prev) => prev + 1);
+  }, []);
+  useEffect(() => {
+    if (!enabled || mountId === 0) return;
+    console.log("[DevToolsProvider] Setting up event subscriptions, mountId:", mountId);
+    const existingEvents = bridge.getEvents();
+    const existingActions = bridge.getActions();
+    if (existingEvents.length > 0) {
+      console.log("[DevToolsProvider] Syncing existing events:", existingEvents.length);
+      setEvents(existingEvents);
+    }
+    if (existingActions.size > 0) {
+      console.log("[DevToolsProvider] Syncing existing actions:", existingActions.size);
+      setActions(existingActions);
+    }
+    const unsubEvent = bridge.onEvent((event) => {
+      console.log("[DevToolsProvider] Event received:", event);
+      const newEvents = bridge.getEvents();
+      console.log("[DevToolsProvider] Setting events:", newEvents.length);
+      setEvents(newEvents);
+    });
+    const unsubState = bridge.onStateChange((newActions) => {
+      console.log("[DevToolsProvider] State changed:", newActions.size, "actions");
+      setActions(newActions);
+    });
+    const unsubNetwork = bridge.onNetworkChange((entries) => {
+      console.log("[DevToolsProvider] Network log updated:", entries.length, "entries");
+      setNetworkLog(entries);
+    });
+    const existingNetworkLog = bridge.getNetworkLog();
+    if (existingNetworkLog.length > 0) {
+      console.log("[DevToolsProvider] Syncing existing network log:", existingNetworkLog.length);
+      setNetworkLog(existingNetworkLog);
+    }
+    return () => {
+      console.log("[DevToolsProvider] Cleaning up subscriptions");
+      unsubEvent();
+      unsubState();
+      unsubNetwork();
+    };
+  }, [enabled, bridge, mountId]);
+  useEffect(() => {
+    return () => {
+      console.log("[DevToolsProvider] Destroying bridge");
+      bridge.destroy();
+    };
+  }, [bridge]);
+  const registerAction = useCallback(
+    (name, action, options) => {
+      if (!enabled) return () => {
+      };
+      return bridge.registerAction(name, action, options);
+    },
+    [bridge, enabled]
+  );
+  const unregisterAction = useCallback(
+    (name) => {
+      if (!enabled) return;
+      bridge.unregisterAction(name);
+    },
+    [bridge, enabled]
+  );
+  const clearEvents = useCallback(() => {
+    bridge.clearEvents();
+    setEvents([]);
+  }, [bridge]);
+  const clearNetworkLog = useCallback(() => {
+    bridge.clearNetworkLog();
+    setNetworkLog([]);
+  }, [bridge]);
+  const getStateSummary = useCallback(() => {
+    return bridge.getStateSummary();
+  }, [bridge]);
+  const value = useMemo(
+    () => ({
+      events,
+      actions,
+      networkLog,
+      registerAction,
+      unregisterAction,
+      clearEvents,
+      clearNetworkLog,
+      getStateSummary,
+      bridge,
+      isEnabled: enabled
+    }),
+    [
+      events,
+      actions,
+      networkLog,
+      registerAction,
+      unregisterAction,
+      clearEvents,
+      clearNetworkLog,
+      getStateSummary,
+      bridge,
+      enabled
+    ]
+  );
+  return /* @__PURE__ */ jsx(DevToolsContext.Provider, { value, children });
+}
+function useDevToolsContext() {
+  const context = useContext(DevToolsContext);
+  if (!context) {
+    throw new Error(
+      "useDevToolsContext must be used within a DevToolsProvider"
+    );
+  }
+  return context;
+}
+function useRegisterAction(name, action, category) {
+  const { registerAction } = useDevToolsContext();
+  useEffect(() => {
+    if (!action) return;
+    return registerAction(name, action, category ? { category } : void 0);
+  }, [name, action, registerAction]);
+}
+
+// src/components/DevToolsPanel.tsx
+import { Activity as Activity2, Bug, Database, Maximize2, Minimize2, Terminal as Terminal2, Wifi } from "lucide-react";
+import { useMemo as useMemo2, useState as useState5 } from "react";
+
+// src/components/EventLog.tsx
+import { Terminal, Trash2, Zap } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function EventLog({
+  events,
+  onClear,
+  title = "SDK Event Log",
+  showInfoBanner = true,
+  className = ""
+}) {
+  const sdkEventCount = events.filter((e) => e.isSDKEvent).length;
+  return /* @__PURE__ */ jsxs("div", { className: `h-full flex flex-col ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx2(Terminal, { className: "w-3.5 h-3.5" }),
+        /* @__PURE__ */ jsx2("span", { children: title }),
+        events.length > 0 && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 px-1.5 py-0.5 bg-cyan-100 dark:bg-cyan-900/50 border border-cyan-200 dark:border-cyan-700/50 rounded text-[10px] text-cyan-600 dark:text-cyan-400", children: [
+          /* @__PURE__ */ jsx2(Zap, { className: "w-2.5 h-2.5" }),
+          sdkEventCount,
+          " SDK events"
+        ] })
+      ] }),
+      events.length > 0 && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onClear,
+          className: "flex items-center gap-1 text-[10px] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx2(Trash2, { className: "w-3 h-3" }),
+            "Clear"
+          ]
+        }
+      )
+    ] }),
+    showInfoBanner && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1 bg-gray-100 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700/50 text-[10px] text-gray-500", children: [
+      "\u{1F4A1} These events are emitted by the SDK's",
+      " ",
+      /* @__PURE__ */ jsx2("code", { className: "text-gray-900 dark:text-white font-semibold", children: "action.on()" }),
+      " method"
+    ] }),
+    /* @__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)) }) })
+  ] });
+}
+function EventRow({ event }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-2 hover:bg-gray-100 dark:hover:bg-gray-800/50 px-1 py-0.5 rounded", children: [
+    /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-600 flex-shrink-0", children: formatTime(event.timestamp) }),
+    event.isSDKEvent && /* @__PURE__ */ jsx2("span", { className: "flex-shrink-0 text-[9px] px-1 py-0.5 bg-cyan-100 dark:bg-cyan-900/30 text-cyan-600 dark:text-cyan-500 rounded border border-cyan-200 dark:border-cyan-800/50", children: "SDK" }),
+    event.source && /* @__PURE__ */ jsx2("span", { className: "flex-shrink-0 text-[9px] px-1 py-0.5 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded border border-purple-200 dark:border-purple-800/50", children: event.source }),
+    /* @__PURE__ */ jsx2("span", { className: `flex-shrink-0 ${getEventColor(event.type)}`, children: event.type }),
+    /* @__PURE__ */ jsx2("span", { className: "text-gray-400 dark:text-gray-500", children: "\u2192" }),
+    /* @__PURE__ */ jsx2("span", { className: "text-gray-600 dark:text-gray-400 truncate", children: formatEventData(event.data) })
+  ] });
+}
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  const time = date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${time}.${ms}`;
+}
+function getEventColor(type) {
+  if (type === "error" || type === "failed") return "text-red-400";
+  if (type === "completed") return "text-green-400";
+  if (type === "status-change") return "text-cyan-400";
+  if (type === "progress") return "text-blue-400";
+  if (type === "loading") return "text-yellow-400";
+  return "text-gray-400";
+}
+function formatEventData(data) {
+  if (data === null || data === void 0) return "\u2014";
+  if (typeof data === "string") return data;
+  if (typeof data === "boolean") return data ? "true" : "false";
+  if (typeof data === "object") {
+    try {
+      return JSON.stringify(data);
+    } catch {
+      return String(data);
+    }
+  }
+  return String(data);
+}
+
+// src/components/NetworkLog.tsx
+import { AlertCircle, CheckCircle, ChevronDown, ChevronRight, Clock, Loader2 } from "lucide-react";
+import { useState as useState2 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function NetworkLog({ entries, onClear, maxHeight = "400px" }) {
+  const [expandedIds, setExpandedIds] = useState2(/* @__PURE__ */ new Set());
+  const toggleExpand = (id) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-8 text-gray-500 dark:text-gray-400", children: [
+      /* @__PURE__ */ jsx3(Clock, { className: "w-8 h-8 mb-2 opacity-50" }),
+      /* @__PURE__ */ jsx3("p", { className: "text-sm", children: "No API requests yet" }),
+      /* @__PURE__ */ jsx3("p", { className: "text-xs opacity-75 mt-1", children: "Requests will appear here when you use SDK methods" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: [
+        entries.length,
+        " request",
+        entries.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          onClick: onClear,
+          className: "text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",
+          children: "Clear"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "flex-1 overflow-y-auto", style: { maxHeight }, children: entries.map((entry) => /* @__PURE__ */ jsx3(
+      NetworkEntry,
+      {
+        entry,
+        isExpanded: expandedIds.has(entry.request.id),
+        onToggle: () => {
+          toggleExpand(entry.request.id);
+        }
+      },
+      entry.request.id
+    )) })
+  ] });
+}
+function NetworkEntry({ entry, isExpanded, onToggle }) {
+  const { request, response, isPending, isFailed } = entry;
+  const methodColor = {
+    GET: "text-emerald-600 dark:text-emerald-400",
+    POST: "text-blue-600 dark:text-blue-400",
+    PUT: "text-amber-600 dark:text-amber-400",
+    DELETE: "text-red-600 dark:text-red-400",
+    PATCH: "text-purple-600 dark:text-purple-400"
+  }[request.method] || "text-gray-600 dark:text-gray-400";
+  const StatusIcon = isPending ? () => /* @__PURE__ */ jsx3(Loader2, { className: "w-3.5 h-3.5 animate-spin text-blue-500" }) : isFailed ? () => /* @__PURE__ */ jsx3(AlertCircle, { className: "w-3.5 h-3.5 text-red-500" }) : () => /* @__PURE__ */ jsx3(CheckCircle, { className: "w-3.5 h-3.5 text-emerald-500" });
+  const urlPath = (() => {
+    try {
+      const url = new URL(request.url, "http://localhost");
+      return url.pathname + url.search;
+    } catch {
+      return request.url;
+    }
+  })();
+  return /* @__PURE__ */ jsxs2("div", { className: `border-b border-gray-100 dark:border-gray-700/50 ${isFailed ? "bg-red-50/50 dark:bg-red-900/10" : ""}`, children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        onClick: onToggle,
+        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",
+        children: [
+          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" }),
+          /* @__PURE__ */ jsx3(StatusIcon, {}),
+          /* @__PURE__ */ jsx3("span", { className: `text-xs font-mono font-bold ${methodColor} w-10 flex-shrink-0`, children: request.method }),
+          /* @__PURE__ */ jsx3("span", { className: "flex-1 text-xs font-mono text-gray-700 dark:text-gray-300 truncate", children: urlPath }),
+          response && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx3("span", { className: `text-xs font-mono ${isFailed ? "text-red-600 dark:text-red-400" : "text-gray-500 dark:text-gray-400"}`, children: response.status }),
+            /* @__PURE__ */ jsxs2("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: [
+              response.duration,
+              "ms"
+            ] })
+          ] }),
+          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 })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs2("div", { className: "px-3 pb-3 space-y-2", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx3("h4", { style: { fontSize: "10px", lineHeight: "14px" }, className: "font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1", children: "Request" }),
+        /* @__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("pre", { style: { fontSize: "11px", lineHeight: "16px" }, className: "text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-mono m-0", children: JSON.stringify(request.payload, null, 2) }) : /* @__PURE__ */ jsx3("span", { style: { fontSize: "11px" }, className: "text-gray-400 italic", children: "No payload" }) })
+      ] }),
+      response && /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsxs2("h4", { style: { fontSize: "10px", lineHeight: "14px" }, className: "font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1", children: [
+          "Response",
+          response.error && /* @__PURE__ */ jsx3("span", { className: "text-red-500 ml-2", children: "Error" })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { 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"}`, children: response.error ? /* @__PURE__ */ jsx3("pre", { style: { fontSize: "11px", lineHeight: "16px" }, className: "text-red-600 dark:text-red-400 whitespace-pre-wrap break-all font-mono m-0", children: response.error }) : response.data ? /* @__PURE__ */ jsx3("pre", { style: { fontSize: "11px", lineHeight: "16px" }, className: "text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-mono m-0", children: JSON.stringify(response.data, null, 2) }) : /* @__PURE__ */ jsx3("span", { style: { fontSize: "11px" }, className: "text-gray-400 italic", children: "No data" }) })
+      ] }),
+      isPending && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-xs text-blue-600 dark:text-blue-400", children: [
+        /* @__PURE__ */ jsx3(Loader2, { className: "w-3 h-3 animate-spin" }),
+        /* @__PURE__ */ jsx3("span", { children: "Waiting for response..." })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/ReducerLog.tsx
+import { Activity, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Trash2 as Trash22 } from "lucide-react";
+import { useState as useState3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ReducerLog({ logs, onClear, className = "" }) {
+  return /* @__PURE__ */ jsxs3("div", { className: `h-full flex flex-col ${className}`, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between px-3 py-1.5 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsx4(Activity, { className: "w-3.5 h-3.5" }),
+        /* @__PURE__ */ jsx4("span", { children: "Action Log" }),
+        logs.length > 0 && /* @__PURE__ */ jsxs3("span", { className: "px-1.5 py-0.5 bg-gray-200 dark:bg-gray-700 rounded text-[10px]", children: [
+          logs.length,
+          " actions"
+        ] })
+      ] }),
+      logs.length > 0 && /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          onClick: onClear,
+          className: "flex items-center gap-1 text-[10px] text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx4(Trash22, { className: "w-3 h-3" }),
+            "Clear"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-y-auto", children: logs.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "text-gray-400 dark:text-gray-600 text-center py-4 text-xs", children: /* @__PURE__ */ jsx4("p", { children: "Reducer actions will appear here..." }) }) : /* @__PURE__ */ jsx4("div", { className: "divide-y divide-gray-200 dark:divide-gray-800", children: logs.map((log) => /* @__PURE__ */ jsx4(LogEntry, { log }, log.id)) }) })
+  ] });
+}
+function LogEntry({ log }) {
+  const [isExpanded, setIsExpanded] = useState3(false);
+  return /* @__PURE__ */ jsxs3("div", { className: "text-xs", children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: () => {
+          setIsExpanded(!isExpanded);
+        },
+        className: "w-full flex items-center gap-2 px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-800/50 transition-colors",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsx4(ChevronDown2, { className: "w-3 h-3 text-gray-400 dark:text-gray-500" }) : /* @__PURE__ */ jsx4(ChevronRight2, { className: "w-3 h-3 text-gray-400 dark:text-gray-500" }),
+          /* @__PURE__ */ jsx4("span", { className: "text-gray-400 dark:text-gray-600 flex-shrink-0 font-mono", children: formatTime2(log.timestamp) }),
+          /* @__PURE__ */ jsx4("span", { className: "text-cyan-600 dark:text-cyan-400 font-medium", children: log.action.type }),
+          log.action.payload !== void 0 && /* @__PURE__ */ jsx4("span", { className: "text-gray-500 truncate", children: formatPayload(log.action.payload) })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs3("div", { className: "px-3 pb-3 space-y-2", children: [
+      log.action.payload !== void 0 && /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx4("div", { className: "text-[10px] text-gray-500 mb-1", children: "Payload" }),
+        /* @__PURE__ */ jsx4("pre", { className: "p-2 bg-gray-100 dark:bg-gray-800 rounded text-[10px] font-mono text-amber-600 dark:text-yellow-300 overflow-x-auto", children: JSON.stringify(log.action.payload, null, 2) })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx4("div", { className: "text-[10px] text-gray-500 mb-1", children: "Before" }),
+          /* @__PURE__ */ jsx4("pre", { className: "p-2 bg-gray-100 dark:bg-gray-800 rounded text-[10px] font-mono text-gray-600 dark:text-gray-400 overflow-x-auto max-h-32 overflow-y-auto", children: JSON.stringify(log.prevState, null, 2) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx4("div", { className: "text-[10px] text-gray-500 mb-1", children: "After" }),
+          /* @__PURE__ */ jsx4("pre", { className: "p-2 bg-gray-100 dark:bg-gray-800 rounded text-[10px] font-mono text-green-600 dark:text-green-400 overflow-x-auto max-h-32 overflow-y-auto", children: JSON.stringify(log.nextState, null, 2) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function formatTime2(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function formatPayload(payload) {
+  if (payload === null || payload === void 0) return "";
+  if (typeof payload === "string") return `"${payload}"`;
+  if (typeof payload === "object") {
+    try {
+      const str = JSON.stringify(payload);
+      return str.length > 50 ? str.slice(0, 50) + "..." : str;
+    } catch {
+      return String(payload);
+    }
+  }
+  return String(payload);
+}
+
+// src/components/StateInspector.tsx
+import { Check, ChevronDown as ChevronDown3, ChevronRight as ChevronRight3, Copy } from "lucide-react";
+import { useCallback as useCallback2, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function StateInspector({
+  state,
+  title = "State",
+  defaultExpandDepth = 2,
+  className = ""
+}) {
+  const [isExpanded, setIsExpanded] = useState4(true);
+  const [copied, setCopied] = useState4(false);
+  const handleCopy = useCallback2(async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(state, null, 2));
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, [state]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: `bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden h-full flex flex-col ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex-shrink-0 flex items-center justify-between px-3 py-2 bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              onClick: () => {
+                setIsExpanded(!isExpanded);
+              },
+              className: "flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white",
+              children: [
+                isExpanded ? /* @__PURE__ */ jsx5(ChevronDown3, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx5(ChevronRight3, { className: "w-4 h-4" }),
+                title
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => {
+                void handleCopy();
+              },
+              className: "flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors",
+              title: "Copy state as JSON",
+              children: copied ? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx5(Check, { className: "w-3 h-3 text-green-500 dark:text-green-400" }),
+                /* @__PURE__ */ jsx5("span", { className: "text-green-500 dark:text-green-400", children: "Copied" })
+              ] }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                /* @__PURE__ */ jsx5(Copy, { className: "w-3 h-3" }),
+                "Copy"
+              ] })
+            }
+          )
+        ] }),
+        isExpanded && /* @__PURE__ */ jsx5("div", { className: "p-3 flex-1 overflow-auto", children: /* @__PURE__ */ jsx5(StateTree, { value: state, defaultExpandDepth }) })
+      ]
+    }
+  );
+}
+function StateTree({
+  value,
+  depth = 0,
+  keyName,
+  defaultExpandDepth = 2
+}) {
+  const [isOpen, setIsOpen] = useState4(depth < defaultExpandDepth);
+  const indent = depth * 12;
+  const isExpandable = value !== null && typeof value === "object";
+  if (!isExpandable) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: "flex items-baseline gap-1 font-mono text-xs",
+        style: { marginLeft: indent },
+        children: [
+          keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
+            keyName,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx5(ValueDisplay, { value })
+        ]
+      }
+    );
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return /* @__PURE__ */ jsxs4("div", { className: "font-mono text-xs", style: { marginLeft: indent }, children: [
+        keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
+          keyName,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsx5("span", { className: "text-gray-400 dark:text-gray-500", children: "[]" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs4("div", { style: { marginLeft: indent }, children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          onClick: () => {
+            setIsOpen(!isOpen);
+          },
+          className: "flex items-center gap-1 font-mono text-xs hover:bg-gray-200 dark:hover:bg-gray-800 rounded px-1 -ml-1",
+          children: [
+            isOpen ? /* @__PURE__ */ jsx5(ChevronDown3, { className: "w-3 h-3 text-gray-400 dark:text-gray-500" }) : /* @__PURE__ */ jsx5(ChevronRight3, { className: "w-3 h-3 text-gray-400 dark:text-gray-500" }),
+            keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
+              keyName,
+              ":"
+            ] }),
+            /* @__PURE__ */ jsxs4("span", { className: "text-gray-500", children: [
+              "[",
+              value.length,
+              "]"
+            ] })
+          ]
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsx5("div", { className: "ml-2", children: value.map((item, i) => /* @__PURE__ */ jsx5(
+        StateTree,
+        {
+          value: item,
+          depth: depth + 1,
+          keyName: String(i),
+          defaultExpandDepth
+        },
+        i
+      )) })
+    ] });
+  }
+  const entries = Object.entries(value);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxs4("div", { className: "font-mono text-xs", style: { marginLeft: indent }, children: [
+      keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
+        keyName,
+        ": "
+      ] }),
+      /* @__PURE__ */ jsx5("span", { className: "text-gray-400 dark:text-gray-500", children: "{}" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { style: { marginLeft: indent }, children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        onClick: () => {
+          setIsOpen(!isOpen);
+        },
+        className: "flex items-center gap-1 font-mono text-xs hover:bg-gray-200 dark:hover:bg-gray-800 rounded px-1 -ml-1",
+        children: [
+          isOpen ? /* @__PURE__ */ jsx5(ChevronDown3, { className: "w-3 h-3 text-gray-400 dark:text-gray-500" }) : /* @__PURE__ */ jsx5(ChevronRight3, { className: "w-3 h-3 text-gray-400 dark:text-gray-500" }),
+          keyName && /* @__PURE__ */ jsxs4("span", { className: "text-purple-600 dark:text-purple-400", children: [
+            keyName,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx5("span", { className: "text-gray-500", children: `{${entries.length}}` })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx5("div", { className: "ml-2", children: entries.map(([key, val]) => /* @__PURE__ */ jsx5(
+      StateTree,
+      {
+        value: val,
+        depth: depth + 1,
+        keyName: key,
+        defaultExpandDepth
+      },
+      key
+    )) })
+  ] });
+}
+function ValueDisplay({ value }) {
+  if (value === null) {
+    return /* @__PURE__ */ jsx5("span", { className: "text-gray-400 dark:text-gray-500", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ jsx5("span", { className: "text-gray-400 dark:text-gray-500", children: "undefined" });
+  }
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx5("span", { className: "text-blue-600 dark:text-blue-400", children: String(value) });
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx5("span", { className: "text-green-600 dark:text-green-400", children: value });
+  }
+  if (typeof value === "string") {
+    const display = value.length > 50 ? `${value.slice(0, 50)}...` : value;
+    return /* @__PURE__ */ jsxs4("span", { className: "text-amber-600 dark:text-yellow-300", children: [
+      '"',
+      display,
+      '"'
+    ] });
+  }
+  return /* @__PURE__ */ jsx5("span", { className: "text-gray-600 dark:text-gray-400", children: String(value) });
+}
+
+// src/components/DevToolsPanel.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function DevToolsPanel({
+  events,
+  onClearEvents,
+  reducerLogs = [],
+  onClearReducerLogs,
+  state = {},
+  networkLog = [],
+  onClearNetworkLog,
+  initialTab = "events",
+  defaultMinimized = false,
+  className = "",
+  title = "DevTools",
+  onMinimize
+}) {
+  const [activeTab, setActiveTab] = useState5(initialTab);
+  const [isMinimized, setIsMinimized] = useState5(defaultMinimized);
+  const handleMinimize = () => {
+    if (onMinimize) {
+      onMinimize();
+    } else {
+      setIsMinimized(true);
+    }
+  };
+  const tabs = useMemo2(
+    () => [
+      {
+        id: "events",
+        label: "Events",
+        icon: Terminal2,
+        count: events.length
+      },
+      {
+        id: "network",
+        label: "Network",
+        icon: Wifi,
+        count: networkLog.length
+      },
+      {
+        id: "reducer",
+        label: "Actions",
+        icon: Activity2,
+        count: reducerLogs.length
+      },
+      {
+        id: "state",
+        label: "State",
+        icon: Database,
+        count: null
+      }
+    ],
+    [events.length, reducerLogs.length, networkLog.length]
+  );
+  if (isMinimized) {
+    return /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        onClick: () => {
+          setIsMinimized(false);
+        },
+        className: `
+          flex items-center gap-2 px-3 py-2 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg 
+          text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors
+          ${className}
+        `,
+        children: [
+          /* @__PURE__ */ jsx6(Bug, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx6("span", { className: "text-xs font-medium", children: title }),
+          events.length > 0 && /* @__PURE__ */ jsx6("span", { className: "text-[10px] px-1.5 py-0.5 bg-cyan-100 dark:bg-cyan-900/50 text-cyan-600 dark:text-cyan-400 rounded", children: events.length }),
+          /* @__PURE__ */ jsx6(Maximize2, { className: "w-3 h-3 ml-1" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: `h-full flex flex-col bg-white dark:bg-gray-900 ${className}`, children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 px-2", children: [
+        /* @__PURE__ */ jsx6(Bug, { className: "w-3.5 h-3.5 text-gray-400 dark:text-gray-500" }),
+        /* @__PURE__ */ jsx6("span", { className: "text-[10px] text-gray-500 font-medium uppercase tracking-wider", children: title })
+      ] }),
+      /* @__PURE__ */ jsx6("div", { className: "flex-1 flex", children: tabs.map((tab) => /* @__PURE__ */ jsxs5(
+        "button",
+        {
+          onClick: () => {
+            setActiveTab(tab.id);
+          },
+          className: `
+                flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border-b-2 transition-colors
+                ${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"}
+              `,
+          children: [
+            /* @__PURE__ */ jsx6(tab.icon, { className: "w-3.5 h-3.5" }),
+            tab.label,
+            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 })
+          ]
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: handleMinimize,
+          className: "px-2 py-1 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+          title: "Minimize",
+          children: /* @__PURE__ */ jsx6(Minimize2, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-h-0 overflow-hidden", children: [
+      activeTab === "events" && /* @__PURE__ */ jsx6(EventLog, { events, onClear: onClearEvents }),
+      activeTab === "network" && /* @__PURE__ */ jsx6(
+        NetworkLog,
+        {
+          entries: networkLog,
+          onClear: onClearNetworkLog ?? (() => {
+          })
+        }
+      ),
+      activeTab === "reducer" && /* @__PURE__ */ jsx6(
+        ReducerLog,
+        {
+          logs: reducerLogs,
+          onClear: onClearReducerLogs ?? (() => {
+          })
+        }
+      ),
+      activeTab === "state" && /* @__PURE__ */ jsx6("div", { className: "h-full overflow-auto p-2", children: /* @__PURE__ */ jsx6(StateInspector, { state, title: "Current State" }) })
+    ] })
+  ] });
+}
+
+// src/components/StatusBadge.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function StatusBadge({ status, className = "" }) {
+  const safeStatus = typeof status === "string" ? status : String(status ?? "idle");
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: `
+        inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium
+        ${getStatusColor(safeStatus)}
+        ${className}
+      `,
+      children: formatStatus(safeStatus)
+    }
+  );
+}
+function getStatusColor(status) {
+  const lower = status.toLowerCase();
+  if (lower === "idle" || lower === "not_created") {
+    return "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300";
+  }
+  if (lower.includes("address_ready") || lower === "completed") {
+    return "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300";
+  }
+  if (lower.includes("needs") || lower.includes("authorization") || lower.includes("approval")) {
+    return "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300";
+  }
+  if (lower === "confirming") {
+    return "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300";
+  }
+  if (lower === "ready") {
+    return "bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300";
+  }
+  return "bg-teal-100 text-teal-700 dark:bg-teal-900/50 dark:text-teal-300";
+}
+function formatStatus(status) {
+  return status.replace(/[_-]/g, " ").split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+
+// src/components/StepIndicator.tsx
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function StepIndicator({
+  steps,
+  currentStep,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: `flex ${className}`,
+      style: {
+        width: "100%"
+      },
+      children: steps.map((step, index) => {
+        const isCompleted = index < currentStep;
+        const isCurrent = index === currentStep;
+        const isLast = index === steps.length - 1;
+        const circleStyles = {
+          width: "28px",
+          height: "28px",
+          minWidth: "28px",
+          minHeight: "28px",
+          borderRadius: "6px"
+          // Slightly rounded corners
+        };
+        if (isCompleted) {
+          circleStyles.backgroundColor = "#22c55e";
+          circleStyles.color = "white";
+        } else if (isCurrent) {
+          circleStyles.backgroundColor = "var(--lombard-green, #00E676)";
+          circleStyles.color = "#111827";
+          circleStyles.fontWeight = "bold";
+        } else {
+          circleStyles.backgroundColor = "#e5e7eb";
+          circleStyles.color = "#6b7280";
+        }
+        return /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              position: "relative"
+            },
+            children: [
+              !isLast && /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: "14px",
+                    // Half of circle height (28/2)
+                    left: "50%",
+                    right: "-50%",
+                    height: "2px",
+                    backgroundColor: isCompleted ? "#22c55e" : "#e5e7eb",
+                    zIndex: 0
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "div",
+                {
+                  className: "flex items-center justify-center text-sm font-medium transition-colors",
+                  style: {
+                    ...circleStyles,
+                    position: "relative",
+                    zIndex: 1
+                  },
+                  children: isCompleted ? /* @__PURE__ */ jsx8(Check2, { style: { width: "16px", height: "16px" } }) : index + 1
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "span",
+                {
+                  className: "text-xs text-center",
+                  style: {
+                    marginTop: "6px",
+                    color: isCompleted ? "#16a34a" : isCurrent ? "#111827" : "#9ca3af",
+                    // gray-400
+                    fontWeight: isCompleted || isCurrent ? 500 : 400
+                  },
+                  children: step.label
+                }
+              )
+            ]
+          },
+          step.id
+        );
+      })
+    }
+  );
+}
+function createSteps(configs, currentStep) {
+  return configs.map((config, index) => ({
+    ...config,
+    status: index < currentStep ? "completed" : index === currentStep ? "current" : "pending"
+  }));
+}
+
+// src/hooks/useDevTools.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo3, useRef, useState as useState6 } from "react";
+function useDevTools(config) {
+  const bridgeRef = useRef(null);
+  if (!bridgeRef.current) {
+    bridgeRef.current = config ? new DevToolsBridge(config) : getDevToolsBridge();
+  }
+  const bridge = bridgeRef.current;
+  const [events, setEvents] = useState6(() => bridge.getEvents());
+  const [actions, setActions] = useState6(
+    () => bridge.getActions()
+  );
+  useEffect2(() => {
+    const unsubEvent = bridge.onEvent(() => {
+      setEvents(bridge.getEvents());
+    });
+    const unsubState = bridge.onStateChange((newActions) => {
+      setActions(newActions);
+    });
+    return () => {
+      unsubEvent();
+      unsubState();
+    };
+  }, [bridge]);
+  const registerAction = useCallback3(
+    (name, action, options) => {
+      return bridge.registerAction(name, action, options);
+    },
+    [bridge]
+  );
+  const unregisterAction = useCallback3(
+    (name) => {
+      bridge.unregisterAction(name);
+    },
+    [bridge]
+  );
+  const clearEvents = useCallback3(() => {
+    bridge.clearEvents();
+    setEvents([]);
+  }, [bridge]);
+  const clearActions = useCallback3(() => {
+    bridge.clearActions();
+    setActions(/* @__PURE__ */ new Map());
+  }, [bridge]);
+  const stateSummary = useMemo3(() => bridge.getStateSummary(), [actions]);
+  return {
+    events,
+    actions,
+    stateSummary,
+    registerAction,
+    unregisterAction,
+    clearEvents,
+    clearActions,
+    bridge
+  };
+}
+function useMonitoredAction(name, createAction, deps) {
+  const { registerAction } = useDevTools();
+  const [action, setAction] = useState6(null);
+  useEffect2(() => {
+    const newAction = createAction();
+    setAction(newAction);
+    const unregister = registerAction(name, newAction);
+    return () => {
+      unregister();
+      setAction(null);
+    };
+  }, deps);
+  return action;
+}
+function useActionEvents(action) {
+  const [events, setEvents] = useState6([]);
+  const [status, setStatus] = useState6(action?.status ?? "idle");
+  const [isLoading, setIsLoading] = useState6(action?.isLoading ?? false);
+  const [error, setError] = useState6(action?.error ?? null);
+  const eventIdRef = useRef(0);
+  useEffect2(() => {
+    if (!action) return;
+    const unsubscribers = [];
+    unsubscribers.push(
+      action.on("status-change", (newStatus) => {
+        setStatus(String(newStatus));
+        setEvents((prev) => [
+          ...prev,
+          {
+            id: String(++eventIdRef.current),
+            type: "status-change",
+            timestamp: Date.now(),
+            data: newStatus,
+            isSDKEvent: true
+          }
+        ]);
+      })
+    );
+    unsubscribers.push(
+      action.on("loading", (loading) => {
+        setIsLoading(Boolean(loading));
+        setEvents((prev) => [
+          ...prev,
+          {
+            id: String(++eventIdRef.current),
+            type: "loading",
+            timestamp: Date.now(),
+            data: loading,
+            isSDKEvent: true
+          }
+        ]);
+      })
+    );
+    unsubscribers.push(
+      action.on("error", (err) => {
+        setError(err);
+        setEvents((prev) => [
+          ...prev,
+          {
+            id: String(++eventIdRef.current),
+            type: "error",
+            timestamp: Date.now(),
+            data: err,
+            isSDKEvent: true
+          }
+        ]);
+      })
+    );
+    unsubscribers.push(
+      action.on("completed", () => {
+        setEvents((prev) => [
+          ...prev,
+          {
+            id: String(++eventIdRef.current),
+            type: "completed",
+            timestamp: Date.now(),
+            data: null,
+            isSDKEvent: true
+          }
+        ]);
+      })
+    );
+    unsubscribers.push(
+      action.on("failed", () => {
+        setEvents((prev) => [
+          ...prev,
+          {
+            id: String(++eventIdRef.current),
+            type: "failed",
+            timestamp: Date.now(),
+            data: null,
+            isSDKEvent: true
+          }
+        ]);
+      })
+    );
+    return () => {
+      unsubscribers.forEach((unsub) => {
+        unsub();
+      });
+    };
+  }, [action]);
+  const clearEvents = useCallback3(() => {
+    setEvents([]);
+  }, []);
+  return {
+    events,
+    status,
+    isLoading,
+    error,
+    isFailed: error !== null,
+    clearEvents
+  };
+}
+
+// src/hooks/useMockWallet.ts
+import { useCallback as useCallback4, useMemo as useMemo4, useState as useState7 } from "react";
+var MOCK_ADDRESSES = {
+  // Vitalik's address (properly checksummed)
+  evm: "0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045",
+  // Valid mainnet bitcoin address
+  bitcoin: "bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh",
+  // Valid Solana address
+  solana: "DRpbCBMxVnDK7maPMxTm9dRYNLGhPEYALmJY9VvUdWTm",
+  // Valid Sui address
+  sui: "0x7d20dcdb2bca4f508ea9613994683eb4e76e9cc555c8e2d4f8362e10e4eca31b",
+  // Valid Starknet address
+  starknet: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7"
+};
+var MOCK_WALLET_LIMITATIONS = {
+  /** Cannot sign transactions */
+  cannotSign: true,
+  /** Steps that work with mock wallet */
+  supportedSteps: ["Create", "Prepare"],
+  /** Steps that require real wallet */
+  unsupportedSteps: ["Authorize", "Sign", "Execute"],
+  /** User-friendly message */
+  message: "Mock wallet cannot sign transactions. Connect a real wallet for full flow.",
+  /** Short message for badges */
+  shortMessage: "Cannot sign - connect real wallet"
+};
+var STORAGE_KEY = "lombard-devtools-mock-wallet";
+function useMockWallet() {
+  const [isEnabled, setIsEnabled] = useState7(() => {
+    if (typeof window === "undefined") return false;
+    return localStorage.getItem(STORAGE_KEY) === "true";
+  });
+  const [chainId, setChainId] = useState7(1);
+  const enable = useCallback4(() => {
+    setIsEnabled(true);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEY, "true");
+    }
+  }, []);
+  const disable = useCallback4(() => {
+    setIsEnabled(false);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEY, "false");
+    }
+  }, []);
+  const toggle = useCallback4(() => {
+    setIsEnabled((prev) => {
+      const newValue = !prev;
+      if (typeof window !== "undefined") {
+        localStorage.setItem(STORAGE_KEY, String(newValue));
+      }
+      return newValue;
+    });
+  }, []);
+  const setChain = useCallback4((newChainId) => {
+    setChainId(newChainId);
+  }, []);
+  const getAddress = useCallback4((chainType) => {
+    return MOCK_ADDRESSES[chainType];
+  }, []);
+  return useMemo4(
+    () => ({
+      isEnabled,
+      address: MOCK_ADDRESSES.evm,
+      // Default to EVM
+      chainId,
+      canSign: false,
+      // Mock wallet cannot sign - always false
+      enable,
+      disable,
+      toggle,
+      setChain,
+      getAddress
+    }),
+    [isEnabled, chainId, enable, disable, toggle, setChain, getAddress]
+  );
+}
+function getMockAddress(chainType) {
+  return MOCK_ADDRESSES[chainType];
+}
+function requiresRealWallet(stepLabel) {
+  const lower = stepLabel.toLowerCase();
+  return lower.includes("authorize") || lower.includes("sign") || lower.includes("execute");
+}
+export {
+  DEFAULT_DEVTOOLS_CONFIG,
+  DevToolsBridge,
+  DevToolsPanel,
+  DevToolsProvider,
+  EventLog,
+  MOCK_ADDRESSES,
+  MOCK_WALLET_LIMITATIONS,
+  NetworkLog,
+  ReducerLog,
+  StateInspector,
+  StatusBadge,
+  StepIndicator,
+  createSteps,
+  getDevToolsBridge,
+  getMockAddress,
+  requiresRealWallet,
+  resetDevToolsBridge,
+  useActionEvents,
+  useDevTools,
+  useDevToolsContext,
+  useMockWallet,
+  useMonitoredAction,
+  useRegisterAction
+};
+//# sourceMappingURL=index.js.map