@fiber-pay/react 0.2.4 → 0.2.6

package/dist/index.js

@@ -1,9 +1,9 @@
 // src/index.ts
 import {
-  ChannelState,
+  ChannelState as ChannelState3,
   ConfigBuilder as ConfigBuilder2,
   ckbHash,
-  ckbToShannons,
+  ckbToShannons as ckbToShannons2,
   derivePublicKey,
   FiberBrowserNode as FiberBrowserNode2,
   FiberRpcError,
@@ -14,7 +14,7 @@ import {
   PasswordCredentialProvider as PasswordCredentialProvider2,
   RawKeyCredentialProvider as RawKeyCredentialProvider2,
   scriptToAddress as scriptToAddress2,
-  shannonsToCkb,
+  shannonsToCkb as shannonsToCkb2,
   toHex
 } from "@fiber-pay/sdk/browser";
 
@@ -22,6 +22,7 @@ import {
 import {
   useCallback as useCallback2,
   useEffect as useEffect2,
+  useId,
   useRef as useRef2,
   useState as useState2
 } from "react";
@@ -58,6 +59,7 @@ function asErrorMessage(error) {
 }
 function useFiberNode(options) {
   const walletId = options.walletId ?? `wallet-${options.network}`;
+  const externalWallet = options.externalWallet ?? false;
   const [state, setState] = useState("idle");
   const [nodeInfo, setNodeInfo] = useState(null);
   const [error, setError] = useState(null);
@@ -78,8 +80,9 @@ function useFiberNode(options) {
     node.off("error", nodeListenersRef.current.error);
     nodeListenersRef.current = null;
   }, []);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
       isMountedRef.current = false;
       const node = nodeRef.current;
       nodeRef.current = null;
@@ -88,9 +91,8 @@ function useFiberNode(options) {
         void node.stop().catch(() => {
         });
       }
-    },
-    [detachNodeListeners]
-  );
+    };
+  }, [detachNodeListeners]);
   useEffect(() => {
     if (options.enabled === false) return;
     let cancelled = false;
@@ -111,12 +113,12 @@ function useFiberNode(options) {
         console.warn("[fiber-pay/react] Failed to detect passkey support:", supportError.message);
       }
     });
-    const provider = new PasskeyCredentialProvider(walletId);
+    const provider = new PasskeyCredentialProvider(walletId, { skipCkbKey: externalWallet });
     setHasPasskeyConfigured(provider.isConfigured());
     return () => {
       cancelled = true;
     };
-  }, [walletId, options.enabled]);
+  }, [walletId, options.enabled, externalWallet]);
   const initNode = useCallback(
     (credential) => {
       if (nodeRef.current) {
@@ -188,7 +190,9 @@ function useFiberNode(options) {
       setError(null);
       let node = null;
       try {
-        const credential = new PasswordCredentialProvider(walletId);
+        const credential = new PasswordCredentialProvider(walletId, {
+          skipCkbKey: externalWallet
+        });
         node = initNode(credential);
         const info = await node.start({ unlockParams: { password } });
         if (isMountedRef.current) {
@@ -201,14 +205,16 @@ function useFiberNode(options) {
         await cleanupFailedStart(node);
       }
     },
-    [cleanupFailedStart, initNode, walletId]
+    [cleanupFailedStart, initNode, walletId, externalWallet]
   );
   const createPasskeyAndStart = useCallback(
     async (username = "User") => {
       setError(null);
       let node = null;
       try {
-        const credential = new PasskeyCredentialProvider(walletId);
+        const credential = new PasskeyCredentialProvider(walletId, {
+          skipCkbKey: externalWallet
+        });
         await credential.register(username);
         if (isMountedRef.current) {
           setHasPasskeyConfigured(true);
@@ -225,13 +231,15 @@ function useFiberNode(options) {
         await cleanupFailedStart(node);
       }
     },
-    [cleanupFailedStart, initNode, walletId]
+    [cleanupFailedStart, initNode, walletId, externalWallet]
   );
   const startWithPasskey = useCallback(async () => {
     setError(null);
     let node = null;
     try {
-      const credential = new PasskeyCredentialProvider(walletId);
+      const credential = new PasskeyCredentialProvider(walletId, {
+        skipCkbKey: externalWallet
+      });
       node = initNode(credential);
       const info = await node.start();
       if (isMountedRef.current) {
@@ -243,13 +251,17 @@ function useFiberNode(options) {
       }
       await cleanupFailedStart(node);
     }
-  }, [cleanupFailedStart, initNode, walletId]);
+  }, [cleanupFailedStart, initNode, walletId, externalWallet]);
   const startWithRawKey = useCallback(
     async (fiberKey, ckbSecretKey) => {
       setError(null);
       let node = null;
       try {
-        const credential = new RawKeyCredentialProvider(fiberKey, ckbSecretKey, walletId);
+        const credential = new RawKeyCredentialProvider(
+          fiberKey,
+          externalWallet ? void 0 : ckbSecretKey,
+          walletId
+        );
         node = initNode(credential);
         const info = await node.start();
         if (isMountedRef.current) {
@@ -262,7 +274,7 @@ function useFiberNode(options) {
         await cleanupFailedStart(node);
       }
     },
-    [cleanupFailedStart, initNode, walletId]
+    [cleanupFailedStart, initNode, walletId, externalWallet]
   );
   const stop = useCallback(async () => {
     const node = nodeRef.current;
@@ -461,10 +473,9 @@ function ConnectButton(props) {
   const {
     network = "testnet",
     fiber: externalFiber,
-    strategy = "auto",
+    strategy = "passkey",
+    externalWallet = false,
     password,
-    rawKey,
-    rawCkbKey,
     walletId,
     passkeyUsername = "User",
     wasmFactory,
@@ -482,6 +493,7 @@ function ConnectButton(props) {
     walletId,
     wasmFactory,
     nodeConfig,
+    externalWallet,
     enabled: !externalFiber
   });
   const fiber = externalFiber ?? internalFiber;
@@ -498,13 +510,14 @@ function ConnectButton(props) {
     createPasskeyAndStart,
     startWithPasskey,
     startWithPassword,
-    startWithRawKey,
     stop
   } = fiber;
   const [isConnecting, setIsConnecting] = useState2(false);
   const [showDropdown, setShowDropdown] = useState2(false);
   const [localError, setLocalError] = useState2(null);
   const dropdownRef = useRef2(null);
+  const dropdownId = useId();
+  const lastReportedErrorRef = useRef2(null);
   const effectiveIsStarting = isConnecting || isStarting;
   useEffect2(() => ensureKeyframes(), []);
   useEffect2(() => {
@@ -527,23 +540,27 @@ function ConnectButton(props) {
     }
     prevRunningRef.current = isRunning;
   }, [isRunning, node, nodeInfo, onConnect, onDisconnect]);
+  const effectiveError = error ?? localError;
   useEffect2(() => {
-    if (error) onError?.(error);
-  }, [error, onError]);
-  const resolvedStrategy = strategy === "auto" ? hasPasskeyConfigured && isPasskeySupported ? "passkey" : password ? "password" : rawKey ? "rawKey" : "passkey" : strategy;
+    if (!effectiveError) {
+      lastReportedErrorRef.current = null;
+      return;
+    }
+    if (lastReportedErrorRef.current === effectiveError) {
+      return;
+    }
+    lastReportedErrorRef.current = effectiveError;
+    onError?.(effectiveError);
+  }, [effectiveError, onError]);
   const handleConnect = useCallback2(async () => {
     setIsConnecting(true);
     setLocalError(null);
     try {
-      switch (resolvedStrategy) {
+      switch (strategy) {
         case "password":
           if (!password) throw new Error('Password is required for "password" strategy');
           await startWithPassword(password);
           break;
-        case "rawKey":
-          if (!rawKey) throw new Error('rawKey is required for "rawKey" strategy');
-          await startWithRawKey(rawKey, rawCkbKey);
-          break;
         case "passkey":
           if (hasPasskeyConfigured) {
             await startWithPasskey();
@@ -555,22 +572,17 @@ function ConnectButton(props) {
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       setLocalError(msg);
-      onError?.(msg);
     } finally {
       setIsConnecting(false);
     }
   }, [
-    resolvedStrategy,
+    strategy,
     password,
-    rawKey,
-    rawCkbKey,
     passkeyUsername,
     hasPasskeyConfigured,
     startWithPassword,
     startWithPasskey,
-    startWithRawKey,
-    createPasskeyAndStart,
-    onError
+    createPasskeyAndStart
   ]);
   const handleDisconnect = useCallback2(async () => {
     try {
@@ -578,15 +590,14 @@ function ConnectButton(props) {
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
       setLocalError(msg);
-      onError?.(msg);
     } finally {
       setShowDropdown(false);
     }
-  }, [stop, onError]);
+  }, [stop]);
   const closeDropdown = useCallback2(() => {
     setShowDropdown(false);
   }, []);
-  const hasError = !!(error || localError);
+  const hasError = !!effectiveError;
   let buttonLabel;
   let buttonOnClick;
   let buttonDisabled = false;
@@ -607,7 +618,7 @@ function ConnectButton(props) {
     buttonDisabled = true;
     buttonStyle = { ...styles.button, ...styles.connectButton, ...styles.disabledButton };
   } else {
-    switch (resolvedStrategy) {
+    switch (strategy) {
       case "passkey":
         buttonLabel = hasPasskeyConfigured ? "Connect with Passkey" : "Connect via Passkey";
         if (!isPasskeySupported) {
@@ -618,9 +629,6 @@ function ConnectButton(props) {
       case "password":
         buttonLabel = "Connect";
         break;
-      case "rawKey":
-        buttonLabel = "Connect";
-        break;
     }
     buttonOnClick = handleConnect;
     buttonStyle = {
@@ -630,177 +638,2485 @@ function ConnectButton(props) {
     };
   }
   return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.root, ...style }, "data-fpay-connect-button": "", children: [
-    (hasError || !isPasskeySupported && passkeyUnavailableReason && resolvedStrategy === "passkey") && /* @__PURE__ */ jsx("span", { style: styles.errorText, children: error || localError || passkeyUnavailableReason }),
+    (hasError || !isPasskeySupported && passkeyUnavailableReason && strategy === "passkey") && /* @__PURE__ */ jsx("span", { style: styles.errorText, children: error || localError || passkeyUnavailableReason }),
     isRunning ? /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, ref: dropdownRef, children: [
-      /* @__PURE__ */ jsx("button", { type: "button", onClick: buttonOnClick, style: buttonStyle, children: buttonLabel }),
-      showDropdown && /* @__PURE__ */ jsx("div", { style: { ...styles.dropdown, ...dropdownStyle }, children: renderConnectedDropdown ? renderConnectedDropdown({
-        fiber,
-        closeDropdown,
-        disconnect: handleDisconnect
-      }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        nodeInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { style: styles.infoRow, children: [
-            /* @__PURE__ */ jsx("span", { style: styles.infoLabel, children: "Pubkey" }),
-            /* @__PURE__ */ jsx("span", { style: styles.infoValue, children: truncateNodeId(nodeInfo.pubkey) })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: styles.infoRow, children: [
-            /* @__PURE__ */ jsx("span", { style: styles.infoLabel, children: "State" }),
-            /* @__PURE__ */ jsx("span", { style: styles.infoValue, children: state })
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: buttonOnClick,
+          style: buttonStyle,
+          "aria-haspopup": "dialog",
+          "aria-expanded": showDropdown,
+          "aria-controls": showDropdown ? dropdownId : void 0,
+          children: buttonLabel
+        }
+      ),
+      showDropdown && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: dropdownId,
+          role: "dialog",
+          "aria-label": "Connection panel",
+          style: { ...styles.dropdown, ...dropdownStyle },
+          children: renderConnectedDropdown ? renderConnectedDropdown({
+            fiber,
+            closeDropdown,
+            disconnect: handleDisconnect
+          }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            nodeInfo && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { style: styles.infoRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles.infoLabel, children: "Pubkey" }),
+                /* @__PURE__ */ jsx("span", { style: styles.infoValue, children: truncateNodeId(nodeInfo.pubkey) })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: styles.infoRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles.infoLabel, children: "State" }),
+                /* @__PURE__ */ jsx("span", { style: styles.infoValue, children: state })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: styles.separator }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => void handleDisconnect(),
+                style: styles.disconnectButton,
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: "Disconnect" }),
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+                    }
+                  )
+                ]
+              }
+            )
           ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: styles.separator }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            onClick: () => void handleDisconnect(),
-            style: styles.disconnectButton,
-            children: [
-              /* @__PURE__ */ jsx("span", { children: "Disconnect" }),
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
-                }
-              )
-            ]
-          }
-        )
-      ] }) })
+        }
+      )
     ] }) : /* @__PURE__ */ jsx("button", { type: "button", onClick: buttonOnClick, disabled: buttonDisabled, style: buttonStyle, children: buttonLabel })
   ] });
 }
 
-// src/fiber-pay-quick-card.tsx
-import { useEffect as useEffect4, useId, useState as useState4 } from "react";
+// src/fiber-node-button/index.tsx
+import { useCallback as useCallback6 } from "react";
 
-// src/use-fiber-payment.ts
-import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
-function asErrorMessage2(error) {
-  if (error instanceof Error) {
-    return error.message;
+// src/fiber-node-button/panel.tsx
+import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef5 } from "react";
+
+// src/fiber-node-button/styles.ts
+var styles2 = {
+  shell: {
+    position: "relative",
+    display: "grid",
+    gridTemplateRows: "auto auto minmax(0, 1fr)",
+    gap: "0.7rem",
+    minWidth: "280px",
+    width: "min(460px, calc(100vw - 1rem))",
+    maxHeight: "72vh"
+  },
+  globalBar: {
+    border: "1px solid var(--fpay-border, #d8dee8)",
+    borderRadius: "0.72rem",
+    background: "linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)",
+    padding: "0.52rem 0.56rem",
+    display: "grid",
+    gap: "0.45rem"
+  },
+  globalRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.35rem",
+    flexWrap: "wrap"
+  },
+  globalMetrics: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    flexWrap: "wrap",
+    minWidth: 0
+  },
+  metricInline: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.24rem",
+    whiteSpace: "nowrap"
+  },
+  metricDot: {
+    display: "inline-flex",
+    width: "0.34rem",
+    height: "0.34rem",
+    borderRadius: "999px",
+    flexShrink: 0,
+    background: "#94a3b8"
+  },
+  metricMain: {
+    fontSize: "0.82rem",
+    fontWeight: 750,
+    color: "var(--fpay-text-primary, #0f172a)",
+    lineHeight: 1.1
+  },
+  metricSub: {
+    fontSize: "0.72rem",
+    color: "var(--fpay-text-secondary, #64748b)",
+    lineHeight: 1.1
+  },
+  metricDivider: {
+    fontSize: "0.7rem",
+    color: "#94a3b8",
+    lineHeight: 1
+  },
+  globalMeta: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.5rem",
+    flexWrap: "wrap"
+  },
+  globalErrorInline: {
+    margin: 0,
+    fontSize: "0.71rem",
+    color: "#9f1239",
+    lineHeight: 1.25
+  },
+  statusDot: {
+    display: "inline-flex",
+    width: "0.45rem",
+    height: "0.45rem",
+    borderRadius: "999px",
+    flexShrink: 0
+  },
+  globalActions: {
+    display: "flex",
+    gap: "0.36rem",
+    justifyContent: "flex-end",
+    flexWrap: "wrap"
+  },
+  globalActionButton: {
+    border: "1px solid var(--fpay-border, #cbd5e1)",
+    borderRadius: "0.45rem",
+    padding: "0.28rem 0.48rem",
+    fontSize: "0.72rem",
+    fontWeight: 650,
+    background: "#fff",
+    color: "var(--fpay-text-primary, #111827)",
+    cursor: "pointer"
+  },
+  tabList: {
+    borderRadius: "0.68rem",
+    border: "none",
+    background: "#e9eef6",
+    padding: "0.14rem",
+    display: "grid",
+    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+    gap: "0.14rem",
+    boxShadow: "inset 0 0 0 1px var(--fpay-border, #d8dee8)"
+  },
+  tabButton: {
+    border: "none",
+    borderRadius: "0.5rem",
+    background: "transparent",
+    color: "#334155",
+    fontSize: "0.74rem",
+    fontWeight: 700,
+    padding: "0.44rem 0.45rem",
+    cursor: "pointer"
+  },
+  tabButtonActive: {
+    border: "none",
+    borderRadius: "0.5rem",
+    background: "var(--fpay-accent, #1d4ed8)",
+    color: "#fff",
+    fontSize: "0.74rem",
+    fontWeight: 700,
+    padding: "0.44rem 0.45rem",
+    cursor: "pointer",
+    boxShadow: "none"
+  },
+  content: {
+    overflowY: "auto",
+    paddingRight: "0.15rem",
+    display: "grid",
+    gap: "0.7rem",
+    minHeight: 0
+  },
+  section: {
+    border: "none",
+    borderBottom: "1px solid var(--fpay-border, #e2e8f0)",
+    borderRadius: 0,
+    padding: "0.15rem 0 0.55rem",
+    background: "transparent",
+    display: "grid",
+    gap: "0.44rem"
+  },
+  sectionTitle: {
+    margin: 0,
+    fontSize: "0.8rem",
+    fontWeight: 750,
+    color: "var(--fpay-text-primary, #0f172a)",
+    letterSpacing: "0.01em"
+  },
+  row: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.45rem",
+    flexWrap: "wrap"
+  },
+  rowBetween: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.45rem",
+    flexWrap: "wrap"
+  },
+  compactText: {
+    margin: 0,
+    fontSize: "0.74rem",
+    color: "var(--fpay-text-secondary, #64748b)",
+    lineHeight: 1.4
+  },
+  inlineCode: {
+    margin: 0,
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: "0.72rem",
+    color: "var(--fpay-text-primary, #111827)",
+    wordBreak: "break-all",
+    lineHeight: 1.4
+  },
+  fieldLabel: {
+    display: "grid",
+    gap: "0.25rem",
+    fontSize: "0.68rem",
+    fontWeight: 700,
+    color: "var(--fpay-text-secondary, #64748b)",
+    textTransform: "uppercase"
+  },
+  input: {
+    width: "100%",
+    border: "1px solid var(--fpay-border, #cbd5e1)",
+    borderRadius: "0.45rem",
+    padding: "0.38rem 0.48rem",
+    fontSize: "0.8rem",
+    background: "#fff",
+    color: "var(--fpay-text-primary, #0f172a)"
+  },
+  actionButton: {
+    border: "1px solid var(--fpay-border, #cbd5e1)",
+    borderRadius: "0.45rem",
+    padding: "0.35rem 0.55rem",
+    fontSize: "0.74rem",
+    fontWeight: 650,
+    background: "#fff",
+    color: "var(--fpay-text-primary, #111827)",
+    cursor: "pointer"
+  },
+  primaryButton: {
+    border: "1px solid var(--fpay-accent, #1d4ed8)",
+    borderRadius: "0.45rem",
+    padding: "0.35rem 0.55rem",
+    fontSize: "0.74rem",
+    fontWeight: 750,
+    background: "var(--fpay-accent, #1d4ed8)",
+    color: "#fff",
+    cursor: "pointer"
+  },
+  ghostButton: {
+    border: "1px solid transparent",
+    borderRadius: "0.45rem",
+    padding: "0.32rem 0.5rem",
+    fontSize: "0.74rem",
+    fontWeight: 650,
+    background: "transparent",
+    color: "var(--fpay-text-secondary, #475569)",
+    cursor: "pointer"
+  },
+  dangerButton: {
+    border: "1px solid #fecaca",
+    borderRadius: "0.45rem",
+    padding: "0.35rem 0.55rem",
+    fontSize: "0.74rem",
+    fontWeight: 750,
+    background: "#fff1f2",
+    color: "#9f1239",
+    cursor: "pointer"
+  },
+  badge: {
+    display: "inline-flex",
+    alignItems: "center",
+    width: "fit-content",
+    borderRadius: "999px",
+    border: "1px solid var(--fpay-border, #cbd5e1)",
+    background: "#f8fafc",
+    color: "var(--fpay-text-secondary, #475569)",
+    padding: "0.12rem 0.4rem",
+    fontSize: "0.66rem",
+    fontWeight: 700,
+    lineHeight: 1.1
+  },
+  notice: {
+    border: "1px solid #bfdbfe",
+    background: "#eff6ff",
+    color: "#1d4ed8",
+    borderRadius: "0.52rem",
+    padding: "0.46rem 0.52rem",
+    fontSize: "0.74rem",
+    lineHeight: 1.35
+  },
+  successNotice: {
+    borderColor: "#86efac",
+    background: "#f0fdf4",
+    color: "#166534"
+  },
+  errorNotice: {
+    border: "1px solid #fecaca",
+    background: "#fff1f2",
+    color: "#9f1239",
+    borderRadius: "0.52rem",
+    padding: "0.46rem 0.52rem",
+    fontSize: "0.74rem",
+    lineHeight: 1.35
+  },
+  summaryGrid: {
+    display: "none"
+  },
+  summaryTile: {
+    display: "none"
+  },
+  summaryValue: {
+    display: "block",
+    fontSize: "0.92rem",
+    fontWeight: 750,
+    color: "var(--fpay-text-primary, #0f172a)",
+    lineHeight: 1.1
+  },
+  summaryLabel: {
+    display: "block",
+    marginTop: "0.12rem",
+    fontSize: "0.64rem",
+    color: "var(--fpay-text-secondary, #64748b)"
+  },
+  summaryInline: {
+    margin: 0,
+    fontSize: "0.76rem",
+    color: "var(--fpay-text-secondary, #475569)",
+    lineHeight: 1.35
+  },
+  filterBar: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "0.28rem"
+  },
+  list: {
+    display: "grid",
+    gap: "0.34rem",
+    maxHeight: "240px",
+    overflowY: "auto",
+    paddingRight: "0.1rem"
+  },
+  compactChannelRow: {
+    border: "1px solid var(--fpay-border, #d8dee8)",
+    borderRadius: "0.5rem",
+    background: "#fff",
+    padding: "0.42rem 0.46rem",
+    cursor: "pointer",
+    display: "grid",
+    gap: "0.22rem",
+    textAlign: "left"
+  },
+  compactChannelRowActive: {
+    borderColor: "var(--fpay-accent, #1d4ed8)",
+    boxShadow: "0 0 0 1px rgba(29, 78, 216, 0.12) inset",
+    background: "#f8fbff"
+  },
+  compactChannelTop: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto",
+    alignItems: "center",
+    gap: "0.35rem"
+  },
+  detailPanel: {
+    border: "1px solid var(--fpay-border, #d8dee8)",
+    borderRadius: "0.6rem",
+    background: "#f8fafc",
+    padding: "0.6rem",
+    display: "grid",
+    gap: "0.45rem"
+  },
+  dialogBackdrop: {
+    position: "absolute",
+    inset: 0,
+    background: "rgba(15, 23, 42, 0.36)",
+    display: "grid",
+    placeItems: "center",
+    padding: "0.75rem",
+    zIndex: 3
+  },
+  dialogCard: {
+    width: "min(100%, 360px)",
+    borderRadius: "0.68rem",
+    border: "1px solid #fecaca",
+    background: "#fff",
+    padding: "0.72rem",
+    display: "grid",
+    gap: "0.55rem"
+  },
+  srOnly: {
+    position: "absolute",
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    border: 0
   }
-  return String(error);
+};
+
+// src/fiber-node-button/utils.ts
+import { ChannelState, shannonsToCkb } from "@fiber-pay/sdk/browser";
+function shorten(value, head = 10, tail = 8) {
+  if (!value || value.length <= head + tail + 3) {
+    return value;
+  }
+  return `${value.slice(0, head)}...${value.slice(-tail)}`;
 }
-function useFiberPayment(node) {
-  const [isPaying, setIsPaying] = useState3(false);
-  const [paymentResult, setPaymentResult] = useState3(null);
-  const [error, setError] = useState3(null);
-  const isMountedRef = useRef3(true);
-  useEffect3(
-    () => () => {
-      isMountedRef.current = false;
-    },
-    []
-  );
-  const payInvoice = useCallback3(
-    async (invoice) => {
-      if (!node) {
-        if (isMountedRef.current) {
-          setError("Node is not initialized");
-        }
-        return;
-      }
-      if (isMountedRef.current) {
-        setIsPaying(true);
-        setError(null);
-        setPaymentResult(null);
-      }
-      try {
-        const parsed = await node.parseInvoice({ invoice });
-        await node.sendPayment({ invoice });
-        const paymentHash = parsed.invoice.data.payment_hash;
-        const result = await node.waitForPayment(paymentHash);
-        if (result.status === "Failed") {
-          throw new Error(result.failed_error ?? "Payment failed during routing/execution");
-        }
-        if (isMountedRef.current) {
-          setPaymentResult(result);
-        }
-      } catch (payError) {
-        if (isMountedRef.current) {
-          setError(asErrorMessage2(payError));
-        }
-      } finally {
-        if (isMountedRef.current) {
-          setIsPaying(false);
-        }
-      }
-    },
-    [node]
-  );
+function summarizeError(message, max = 72) {
+  const trimmed = message.trim();
+  if (trimmed.length <= max) {
+    return trimmed;
+  }
+  return `${trimmed.slice(0, max - 3)}...`;
+}
+function toHexPrefixed(value) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    throw new Error("Hex value is empty.");
+  }
+  return /^0x/i.test(trimmed) ? trimmed : `0x${trimmed}`;
+}
+function isPendingChannelState(state) {
+  return state === ChannelState.NegotiatingFunding || state === ChannelState.CollaboratingFundingTx || state === ChannelState.SigningCommitment || state === ChannelState.AwaitingTxSignatures || state === ChannelState.AwaitingChannelReady;
+}
+function formatChannelBalance(shannonsHex) {
+  const ckb = shannonsToCkb(shannonsHex);
+  return Number.isFinite(ckb) ? ckb.toFixed(4) : "0.0000";
+}
+function isClosedChannelState(state) {
+  return state === ChannelState.Closed || state === ChannelState.ShuttingDown;
+}
+function getChannelFilterState(channel) {
+  const state = channel.state.state_name;
+  if (isPendingChannelState(state)) return "pending";
+  if (isClosedChannelState(state)) return "closed";
+  return "active";
+}
+function withDisabledStyle(style, disabled) {
+  if (!disabled) {
+    return style;
+  }
   return {
-    payInvoice,
-    isPaying,
-    paymentResult,
-    error
+    ...style,
+    opacity: 0.55,
+    cursor: "not-allowed"
   };
 }
 
-// src/fiber-pay-quick-card.tsx
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var ONE_CKB_SHANNONS = "0x5f5e100";
-var cardStyle = {
-  border: "1px solid #ddd",
-  borderRadius: 8,
-  padding: 16,
-  maxWidth: 520
-};
-var rowStyle = {
-  display: "flex",
-  gap: 8
-};
-var rowWithMarginStyle = {
-  ...rowStyle,
-  marginBottom: 8
-};
-function FiberPayQuickCard(props) {
-  const network = props.network ?? "testnet";
-  const passkeyUsername = props.passkeyUsername ?? "User";
-  const title = props.title ?? "FiberPay Quick Card";
-  const onError = props.onError;
-  const onInvoiceCreated = props.onInvoiceCreated;
-  const onPaymentResult = props.onPaymentResult;
-  const passwordInputId = useId();
-  const invoiceInputId = useId();
+// src/fiber-node-button/render-action.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function renderPanelAction(options) {
   const {
-    node,
-    nodeInfo,
+    id,
+    defaultProps,
+    fiber,
     state,
-    error: nodeError,
-    isPasskeySupported,
-    hasPasskeyConfigured,
-    startWithPassword,
-    startWithPasskey,
-    createPasskeyAndStart,
-    stop
-  } = useFiberNode({ network, walletId: props.walletId });
-  const { payInvoice, isPaying, error: payError, paymentResult } = useFiberPayment(node);
-  const [password, setPassword] = useState4("");
-  const [invoiceInput, setInvoiceInput] = useState4("");
-  const [createdInvoice, setCreatedInvoice] = useState4("");
-  const [isCreatingInvoice, setIsCreatingInvoice] = useState4(false);
-  const [invoiceError, setInvoiceError] = useState4(null);
-  useEffect4(() => {
-    if (nodeError) {
-      onError?.({ scope: "node", message: nodeError });
+    renderAction,
+    t,
+    buttonStyle = styles2.actionButton
+  } = options;
+  const customAction = renderAction?.({
+    id,
+    defaultProps,
+    fiber,
+    state,
+    t
+  });
+  if (customAction !== void 0) {
+    return customAction;
+  }
+  const loadingText = defaultProps.loadingLabel ?? t("actions.loading.default", "Processing...");
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      style: withDisabledStyle(buttonStyle, defaultProps.disabled),
+      disabled: defaultProps.disabled,
+      onClick: () => {
+        void defaultProps.onTrigger();
+      },
+      children: defaultProps.loading ? loadingText : defaultProps.label
     }
-  }, [nodeError, onError]);
-  useEffect4(() => {
+  );
+}
+
+// src/fiber-node-button/types.ts
+var ONE_CKB_SHANNONS = "0x5f5e100";
+var TAB_ITEMS = [
+  { id: "workbench", label: "Workbench" },
+  { id: "channels", label: "Channels" },
+  { id: "diagnostics", label: "Diagnostics" }
+];
+var FILTER_ITEMS = ["active", "pending", "closed", "all"];
+
+// src/fiber-node-button/channels-tab.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChannelsTab({ state, fiber, onLog, renderAction, t }) {
+  const {
+    isRefreshingChannels,
+    refreshChannels,
+    channelCounts,
+    channelFilter,
+    setChannelFilter,
+    visibleChannels,
+    selectedChannelId,
+    setSelectedChannelId,
+    setForceCloseConfirmOpen,
+    selectedChannel,
+    selectedCanClose,
+    selectedIsClosing,
+    selectedPending,
+    closeChannel
+  } = state;
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2("section", { style: styles2.section, children: [
+      /* @__PURE__ */ jsxs2("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx3("h4", { style: styles2.sectionTitle, children: t("channels.summary.title", "Channel Summary") }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            style: withDisabledStyle(styles2.actionButton, isRefreshingChannels),
+            disabled: isRefreshingChannels,
+            onClick: () => {
+              void refreshChannels();
+            },
+            children: isRefreshingChannels ? t("channels.summary.refresh.loading", "Refreshing...") : t("channels.summary.refresh", "Refresh")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { style: styles2.summaryInline, children: [
+        t("channels.summary.active", "Active"),
+        " ",
+        channelCounts.active,
+        " |",
+        " ",
+        t("channels.summary.pending", "Pending"),
+        " ",
+        channelCounts.pending,
+        " |",
+        " ",
+        t("channels.summary.closed", "Closed"),
+        " ",
+        channelCounts.closed,
+        " |",
+        " ",
+        t("channels.summary.total", "Total"),
+        " ",
+        channelCounts.all
+      ] }),
+      /* @__PURE__ */ jsx3("div", { style: styles2.filterBar, children: FILTER_ITEMS.map((filter) => /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          style: channelFilter === filter ? styles2.primaryButton : styles2.actionButton,
+          onClick: () => setChannelFilter(filter),
+          children: filter === "all" ? `${t("channels.filter.all", "All")} (${channelCounts.all})` : `${filter} (${channelCounts[filter]})`
+        },
+        filter
+      )) }),
+      /* @__PURE__ */ jsx3("div", { style: styles2.list, children: visibleChannels.length === 0 ? /* @__PURE__ */ jsx3("p", { style: styles2.compactText, children: t("channels.list.empty", "No channels found for this filter.") }) : visibleChannels.map((channel) => {
+        const selected = channel.channel_id === selectedChannelId;
+        return /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            style: {
+              ...styles2.compactChannelRow,
+              ...selected ? styles2.compactChannelRowActive : {}
+            },
+            onClick: () => {
+              setSelectedChannelId(channel.channel_id);
+              setForceCloseConfirmOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx3("span", { style: styles2.srOnly, children: selected ? t("channels.list.selected", "Selected channel") : t("channels.list.select", "Select channel") }),
+              /* @__PURE__ */ jsxs2("span", { style: styles2.compactChannelTop, children: [
+                /* @__PURE__ */ jsxs2("span", { style: styles2.inlineCode, children: [
+                  t("channels.list.id", "ID"),
+                  ": ",
+                  shorten(channel.channel_id, 12, 8)
+                ] }),
+                /* @__PURE__ */ jsx3("span", { style: styles2.badge, children: channel.state.state_name })
+              ] }),
+              /* @__PURE__ */ jsxs2("span", { style: styles2.compactText, children: [
+                t("channels.list.peer", "Peer"),
+                ": ",
+                shorten(channel.pubkey, 16, 10)
+              ] }),
+              /* @__PURE__ */ jsxs2("span", { style: styles2.compactText, children: [
+                "L ",
+                formatChannelBalance(channel.local_balance),
+                " / R",
+                " ",
+                formatChannelBalance(channel.remote_balance),
+                " CKB"
+              ] })
+            ]
+          },
+          channel.channel_id
+        );
+      }) })
+    ] }),
+    selectedChannel ? /* @__PURE__ */ jsxs2("section", { style: styles2.detailPanel, children: [
+      /* @__PURE__ */ jsxs2("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx3("h4", { style: styles2.sectionTitle, children: t("channels.details.title", "Channel Details") }),
+        /* @__PURE__ */ jsx3("span", { style: styles2.badge, children: selectedChannel.state.state_name })
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { style: styles2.inlineCode, children: [
+        t("channels.details.channelId", "Channel ID"),
+        ": ",
+        selectedChannel.channel_id
+      ] }),
+      /* @__PURE__ */ jsxs2("p", { style: styles2.inlineCode, children: [
+        t("channels.details.peer", "Peer"),
+        ": ",
+        selectedChannel.pubkey
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { style: styles2.row, children: [
+        /* @__PURE__ */ jsxs2("span", { style: styles2.badge, children: [
+          t("channels.details.local", "Local"),
+          " ",
+          formatChannelBalance(selectedChannel.local_balance),
+          " CKB"
+        ] }),
+        /* @__PURE__ */ jsxs2("span", { style: styles2.badge, children: [
+          t("channels.details.remote", "Remote"),
+          " ",
+          formatChannelBalance(selectedChannel.remote_balance),
+          " CKB"
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "span",
+          {
+            style: styles2.badge,
+            title: "Pending TLCs are in-flight payment locks associated with this channel.",
+            children: [
+              t("channels.details.tlcs", "TLCs"),
+              " ",
+              selectedChannel.pending_tlcs.length
+            ]
+          }
+        )
+      ] }),
+      selectedChannel.failure_detail ? /* @__PURE__ */ jsxs2("p", { style: styles2.compactText, children: [
+        t("channels.details.failure", "Failure"),
+        ": ",
+        selectedChannel.failure_detail
+      ] }) : null,
+      selectedChannel.shutdown_transaction_hash ? /* @__PURE__ */ jsxs2("p", { style: styles2.inlineCode, children: [
+        t("channels.details.shutdownTx", "Shutdown TX"),
+        ":",
+        " ",
+        selectedChannel.shutdown_transaction_hash
+      ] }) : null,
+      /* @__PURE__ */ jsxs2("div", { style: { ...styles2.row, justifyContent: "flex-end" }, children: [
+        renderPanelAction({
+          id: "close-channel",
+          fiber,
+          state,
+          renderAction,
+          t,
+          defaultProps: {
+            id: "close-channel",
+            channelId: selectedChannel.channel_id,
+            label: selectedPending ? t("actions.abandonPending", "Abandon Pending") : t("actions.closeChannel", "Close Channel"),
+            loadingLabel: t("actions.closeChannel.loading", "Closing..."),
+            disabled: !selectedCanClose || selectedIsClosing,
+            loading: selectedIsClosing,
+            onTrigger: async () => {
+              await closeChannel(selectedChannel.channel_id, false);
+            }
+          }
+        }),
+        renderPanelAction({
+          id: "force-close-channel",
+          fiber,
+          state,
+          renderAction,
+          t,
+          buttonStyle: styles2.dangerButton,
+          defaultProps: {
+            id: "force-close-channel",
+            channelId: selectedChannel.channel_id,
+            label: t("actions.forceClose", "Force Close"),
+            disabled: !selectedCanClose || selectedPending || selectedIsClosing,
+            onTrigger: () => {
+              setForceCloseConfirmOpen(true);
+              onLog?.("fiber_channel_force_close_confirm_opened");
+            }
+          }
+        })
+      ] })
+    ] }) : null
+  ] });
+}
+
+// src/fiber-node-button/diagnostics-tab.tsx
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DiagnosticsTab({ state, t }) {
+  const {
+    isRefreshingPeers,
+    refreshConnectedPeers,
+    connectedPeers,
+    setPeerPubkey,
+    switchTab,
+    peerAddress,
+    setPeerAddress,
+    isConnectingPeer,
+    connectPeerByAddress,
+    isRefreshingGraph,
+    refreshDiagnostics,
+    refreshGraph,
+    graphNodes,
+    graphChannels,
+    channelOpenFlow
+  } = state;
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    /* @__PURE__ */ jsxs3("section", { style: styles2.section, children: [
+      /* @__PURE__ */ jsxs3("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx4("h4", { style: styles2.sectionTitle, children: t("diagnostics.peers.title", "Connected Peers") }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            style: withDisabledStyle(styles2.actionButton, isRefreshingPeers),
+            disabled: isRefreshingPeers,
+            onClick: () => {
+              void refreshConnectedPeers();
+            },
+            children: isRefreshingPeers ? t("diagnostics.peers.refresh.loading", "Refreshing...") : t("diagnostics.peers.refresh", "Refresh Peers")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { style: styles2.compactText, children: [
+        t("diagnostics.peers.count", "Peers"),
+        ": ",
+        connectedPeers.length
+      ] }),
+      /* @__PURE__ */ jsx4("div", { style: { ...styles2.list, maxHeight: "190px" }, children: connectedPeers.length === 0 ? /* @__PURE__ */ jsx4("p", { style: styles2.compactText, children: t("diagnostics.peers.empty", "No connected peers.") }) : connectedPeers.map((peer) => /* @__PURE__ */ jsxs3("article", { style: styles2.compactChannelRow, children: [
+        /* @__PURE__ */ jsx4("p", { style: styles2.inlineCode, children: shorten(peer.pubkey, 18, 12) }),
+        /* @__PURE__ */ jsxs3("details", { children: [
+          /* @__PURE__ */ jsx4("summary", { style: { ...styles2.compactText, cursor: "pointer" }, children: t("diagnostics.peers.address", "Address") }),
+          /* @__PURE__ */ jsx4("p", { style: styles2.inlineCode, children: peer.address })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { style: styles2.row, children: /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            style: styles2.ghostButton,
+            onClick: () => {
+              setPeerPubkey(peer.pubkey);
+              switchTab("workbench");
+            },
+            children: t("diagnostics.peers.useForOpenChannel", "Use for Open Channel")
+          }
+        ) })
+      ] }, peer.pubkey)) }),
+      /* @__PURE__ */ jsxs3("label", { style: styles2.fieldLabel, children: [
+        t("diagnostics.peers.connectPeerAddress", "Connect Peer Address"),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            style: styles2.input,
+            value: peerAddress,
+            onChange: (event) => setPeerAddress(event.target.value),
+            placeholder: "/dns4/.../wss/p2p/..."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            style: withDisabledStyle(styles2.primaryButton, isConnectingPeer || !peerAddress.trim()),
+            disabled: isConnectingPeer || !peerAddress.trim(),
+            onClick: () => {
+              void connectPeerByAddress();
+            },
+            children: isConnectingPeer ? t("diagnostics.peers.connect.loading", "Connecting...") : t("diagnostics.peers.connect", "Connect Peer")
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            style: withDisabledStyle(styles2.actionButton, isRefreshingPeers || isRefreshingGraph),
+            disabled: isRefreshingPeers || isRefreshingGraph,
+            onClick: () => {
+              void refreshDiagnostics();
+            },
+            children: isRefreshingPeers || isRefreshingGraph ? t("diagnostics.peers.refreshAll.loading", "Refreshing...") : t("diagnostics.peers.refreshAll", "Refresh All")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("section", { style: styles2.section, children: [
+      /* @__PURE__ */ jsxs3("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx4("h4", { style: styles2.sectionTitle, children: t("diagnostics.graph.title", "Graph Snapshot") }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            style: withDisabledStyle(styles2.actionButton, isRefreshingGraph),
+            disabled: isRefreshingGraph,
+            onClick: () => {
+              void refreshGraph();
+            },
+            children: isRefreshingGraph ? t("diagnostics.graph.refresh.loading", "Refreshing...") : t("diagnostics.graph.refresh", "Refresh Graph")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("p", { style: styles2.compactText, children: [
+        t("diagnostics.graph.showing", "showing"),
+        " ",
+        Math.min(graphNodes.length, 3),
+        " ",
+        t("diagnostics.graph.of", "of"),
+        " ",
+        graphNodes.length,
+        " ",
+        t("diagnostics.graph.nodes", "nodes"),
+        ", ",
+        Math.min(graphChannels.length, 2),
+        " ",
+        t("diagnostics.graph.of", "of"),
+        " ",
+        graphChannels.length,
+        " ",
+        t("diagnostics.graph.channels", "channels"),
+        "."
+      ] }),
+      graphNodes.slice(0, 3).map((node) => /* @__PURE__ */ jsxs3("p", { style: styles2.inlineCode, children: [
+        "Node: ",
+        node.node_name || shorten(node.pubkey, 18, 10)
+      ] }, node.pubkey)),
+      graphChannels.slice(0, 2).map((channel) => /* @__PURE__ */ jsxs3(
+        "p",
+        {
+          style: styles2.inlineCode,
+          children: [
+            shorten(channel.node1, 10, 6),
+            " to ",
+            shorten(channel.node2, 10, 6),
+            ";",
+            " ",
+            formatChannelBalance(channel.capacity),
+            " CKB"
+          ]
+        },
+        `${channel.node1}-${channel.node2}-${channel.channel_outpoint.tx_hash}`
+      )),
+      /* @__PURE__ */ jsxs3("details", { children: [
+        /* @__PURE__ */ jsx4("summary", { style: { ...styles2.compactText, cursor: "pointer" }, children: t("diagnostics.graph.rawSnapshot", "Raw graph snapshot") }),
+        /* @__PURE__ */ jsx4(
+          "pre",
+          {
+            style: {
+              ...styles2.inlineCode,
+              marginTop: "0.45rem",
+              maxHeight: "160px",
+              overflow: "auto",
+              background: "#f1f5f9",
+              borderRadius: "0.45rem",
+              padding: "0.45rem"
+            },
+            children: JSON.stringify(
+              {
+                nodes: graphNodes,
+                channels: graphChannels
+              },
+              null,
+              2
+            )
+          }
+        )
+      ] })
+    ] }),
+    channelOpenFlow.diagnostic ? /* @__PURE__ */ jsx4("div", { style: styles2.notice, children: channelOpenFlow.diagnostic }) : null
+  ] });
+}
+
+// src/fiber-node-button/i18n.ts
+function applyVariables(template, vars) {
+  if (!vars) {
+    return template;
+  }
+  return template.replace(/\{(\w+)\}/g, (full, key) => {
+    const value = vars[key];
+    return value === void 0 ? full : String(value);
+  });
+}
+var defaultFiberNodeButtonI18n = (_key, fallback, vars) => applyVariables(fallback, vars);
+
+// src/fiber-node-button/use-panel-state.ts
+import { ChannelState as ChannelState2 } from "@fiber-pay/sdk/browser";
+import {
+  useCallback as useCallback5,
+  useEffect as useEffect4,
+  useId as useId2,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+
+// src/use-channel-open-flow.ts
+import {
+  computeSuggestedFundingAmountCkb,
+  diagnoseExternalFundingFailure,
+  extractRequiredCapacityCkbFromFundingError,
+  openChannelWithExternalFundingFlow,
+  shouldDiagnoseFundingAbortError
+} from "@fiber-pay/sdk/browser";
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState3 } from "react";
+var SHANNONS_PER_CKB = 100000000n;
+function toHexPrefixed2(value) {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    throw new Error("Hex value is empty.");
+  }
+  return trimmed.startsWith("0x") ? trimmed : `0x${trimmed}`;
+}
+function ckbToShannons(amountCkb) {
+  const normalized = amountCkb.trim();
+  if (!/^\d+(\.\d+)?$/.test(normalized)) {
+    throw new Error("Funding amount must be a valid CKB number.");
+  }
+  const [wholePart, fracPart = ""] = normalized.split(".");
+  if (fracPart.length > 8 && /[1-9]/.test(fracPart.slice(8))) {
+    throw new Error("Funding amount supports up to 8 decimal places.");
+  }
+  const fracPadded = `${fracPart}00000000`.slice(0, 8);
+  const shannons = BigInt(wholePart) * SHANNONS_PER_CKB + BigInt(fracPadded || "0");
+  if (shannons <= 0n) {
+    throw new Error("Funding amount must be greater than 0.");
+  }
+  return shannons;
+}
+function toHookResultFromExternal(result) {
+  return {
+    mode: "external",
+    channelId: result.channelId,
+    fundingTxHash: result.fundingTxHash,
+    unsignedFundingTx: result.unsignedFundingTx,
+    signedFundingTx: result.signedFundingTx
+  };
+}
+function useChannelOpenFlow(options) {
+  const { node, onLog } = options;
+  const [isOpening, setIsOpening] = useState3(false);
+  const [error, setError] = useState3(null);
+  const [diagnostic, setDiagnostic] = useState3(null);
+  const [suggestedFundingAmountCkb, setSuggestedFundingAmountCkb] = useState3(null);
+  const [lastResult, setLastResult] = useState3(null);
+  const reset = useCallback3(() => {
+    setError(null);
+    setDiagnostic(null);
+    setSuggestedFundingAmountCkb(null);
+    setLastResult(null);
+  }, []);
+  const openChannel = useCallback3(
+    async (params) => {
+      if (!node) {
+        setError("Node is not connected.");
+        return null;
+      }
+      setIsOpening(true);
+      setError(null);
+      setDiagnostic(null);
+      setSuggestedFundingAmountCkb(null);
+      let requestedFundingShannons;
+      let effectiveFundingLockScript = params.fundingLockScript;
+      try {
+        requestedFundingShannons = ckbToShannons(params.fundingAmountCkb);
+        const pubkey = toHexPrefixed2(params.pubkey);
+        if (!params.externalWallet) {
+          const openResult = await node.openChannel({
+            pubkey,
+            funding_amount: `0x${requestedFundingShannons.toString(16)}`
+          });
+          const result2 = {
+            mode: "internal",
+            channelId: openResult.temporary_channel_id
+          };
+          setLastResult(result2);
+          onLog?.(`Internal channel open requested: ${openResult.temporary_channel_id}`);
+          return result2;
+        }
+        if (!params.signFundingTx) {
+          throw new Error("Missing signFundingTx callback for external wallet funding flow.");
+        }
+        const nodeInfo = await node.nodeInfo();
+        const defaultScript = nodeInfo.default_funding_lock_script;
+        const shutdownScript = params.shutdownScript ?? defaultScript;
+        effectiveFundingLockScript = params.fundingLockScript ?? defaultScript;
+        const flowResult = await openChannelWithExternalFundingFlow({
+          node,
+          params: {
+            pubkey,
+            funding_amount: `0x${requestedFundingShannons.toString(16)}`,
+            shutdown_script: shutdownScript,
+            funding_lock_script: effectiveFundingLockScript,
+            funding_lock_script_cell_deps: params.fundingLockScriptCellDeps
+          },
+          signFundingTx: params.signFundingTx
+        });
+        const result = toHookResultFromExternal(flowResult);
+        setLastResult(result);
+        onLog?.(
+          `External funding completed: channel=${flowResult.channelId}, tx=${flowResult.fundingTxHash}`
+        );
+        return result;
+      } catch (unknownError) {
+        const message = unknownError instanceof Error ? unknownError.message : String(unknownError);
+        let displayMessage = message;
+        const requiredCapacity = extractRequiredCapacityCkbFromFundingError(message);
+        if (requiredCapacity) {
+          try {
+            const suggested = computeSuggestedFundingAmountCkb(
+              params.fundingAmountCkb,
+              requiredCapacity
+            );
+            if (suggested) {
+              setSuggestedFundingAmountCkb(suggested);
+              displayMessage = `Insufficient capacity: current amount ${params.fundingAmountCkb} CKB may not cover fee. Suggested amount: ${suggested} CKB. Original error: ${message}`;
+            }
+          } catch {
+          }
+        }
+        setError(displayMessage);
+        if (params.externalWallet) {
+          const hasKnownAbortPattern = shouldDiagnoseFundingAbortError(message);
+          if (!hasKnownAbortPattern) {
+            onLog?.(
+              "External funding error did not match known abort patterns; running best-effort diagnostics."
+            );
+          }
+          const targetPubkey = (() => {
+            try {
+              return toHexPrefixed2(params.pubkey);
+            } catch {
+              return void 0;
+            }
+          })();
+          try {
+            const diagnoseResult = await diagnoseExternalFundingFailure({
+              node,
+              rawError: message,
+              targetPubkey,
+              fundingLockScript: effectiveFundingLockScript,
+              requestedFundingShannons,
+              ckbRpcUrl: params.ckbRpcUrl
+            });
+            if (diagnoseResult.summary) {
+              setDiagnostic(diagnoseResult.summary);
+              onLog?.(`External funding diagnostic: ${diagnoseResult.summary}`);
+            } else {
+              const fallbackDiagnostic = "No additional channel diagnostics were available for this external funding error.";
+              setDiagnostic(fallbackDiagnostic);
+              onLog?.(fallbackDiagnostic);
+            }
+          } catch (diagnosticError) {
+            const diagnosticMessage = diagnosticError instanceof Error ? diagnosticError.message : String(diagnosticError);
+            const fallbackDiagnostic = "External funding diagnostics failed; no additional diagnostic details are available.";
+            setDiagnostic(fallbackDiagnostic);
+            onLog?.(`External funding diagnostics failed: ${diagnosticMessage}`);
+          }
+        }
+        onLog?.(`Channel open flow failed: ${message}`);
+        return null;
+      } finally {
+        setIsOpening(false);
+      }
+    },
+    [node, onLog]
+  );
+  return useMemo2(
+    () => ({
+      openChannel,
+      reset,
+      isOpening,
+      error,
+      diagnostic,
+      suggestedFundingAmountCkb,
+      lastResult
+    }),
+    [openChannel, reset, isOpening, error, diagnostic, suggestedFundingAmountCkb, lastResult]
+  );
+}
+
+// src/use-fiber-payment.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+function asErrorMessage2(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+function useFiberPayment(node) {
+  const [isPaying, setIsPaying] = useState4(false);
+  const [paymentResult, setPaymentResult] = useState4(null);
+  const [error, setError] = useState4(null);
+  const isMountedRef = useRef3(true);
+  useEffect3(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    []
+  );
+  const ensureNode = useCallback4(() => {
+    if (!node) {
+      throw new Error("Node is not initialized");
+    }
+    return node;
+  }, [node]);
+  const parseInvoiceInternal = useCallback4(
+    async (invoice) => {
+      const activeNode = ensureNode();
+      return activeNode.parseInvoice({ invoice });
+    },
+    [ensureNode]
+  );
+  const sendPaymentInternal = useCallback4(
+    async (invoice) => {
+      const activeNode = ensureNode();
+      return activeNode.sendPayment({ invoice });
+    },
+    [ensureNode]
+  );
+  const waitForPaymentInternal = useCallback4(
+    async (paymentHash) => {
+      const activeNode = ensureNode();
+      return activeNode.waitForPayment(paymentHash);
+    },
+    [ensureNode]
+  );
+  const parseInvoice = useCallback4(
+    async (invoice) => {
+      if (isMountedRef.current) {
+        setError(null);
+      }
+      try {
+        return await parseInvoiceInternal(invoice);
+      } catch (parseError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage2(parseError));
+        }
+        throw parseError;
+      }
+    },
+    [parseInvoiceInternal]
+  );
+  const sendPayment = useCallback4(
+    async (invoice) => {
+      if (isMountedRef.current) {
+        setIsPaying(true);
+        setError(null);
+        setPaymentResult(null);
+      }
+      try {
+        return await sendPaymentInternal(invoice);
+      } catch (sendError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage2(sendError));
+        }
+        throw sendError;
+      } finally {
+        if (isMountedRef.current) {
+          setIsPaying(false);
+        }
+      }
+    },
+    [sendPaymentInternal]
+  );
+  const waitForPayment = useCallback4(
+    async (paymentHash) => {
+      if (isMountedRef.current) {
+        setIsPaying(true);
+        setError(null);
+        setPaymentResult(null);
+      }
+      try {
+        const result = await waitForPaymentInternal(paymentHash);
+        if (isMountedRef.current) {
+          setPaymentResult(result);
+        }
+        return result;
+      } catch (waitError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage2(waitError));
+        }
+        throw waitError;
+      } finally {
+        if (isMountedRef.current) {
+          setIsPaying(false);
+        }
+      }
+    },
+    [waitForPaymentInternal]
+  );
+  const payInvoice = useCallback4(
+    async (invoice) => {
+      if (isMountedRef.current) {
+        setIsPaying(true);
+        setError(null);
+        setPaymentResult(null);
+      }
+      try {
+        const parsed = await parseInvoiceInternal(invoice);
+        await sendPaymentInternal(invoice);
+        const paymentHash = parsed.invoice.data.payment_hash;
+        const result = await waitForPaymentInternal(paymentHash);
+        if (result.status === "Failed") {
+          throw new Error(result.failed_error ?? "Payment failed during routing/execution");
+        }
+        if (isMountedRef.current) {
+          setPaymentResult(result);
+        }
+      } catch (payError) {
+        if (isMountedRef.current) {
+          setError(asErrorMessage2(payError));
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setIsPaying(false);
+        }
+      }
+    },
+    [parseInvoiceInternal, sendPaymentInternal, waitForPaymentInternal]
+  );
+  return {
+    parseInvoice,
+    sendPayment,
+    waitForPayment,
+    payInvoice,
+    isPaying,
+    paymentResult,
+    error
+  };
+}
+
+// src/fiber-node-button/use-panel-state.ts
+function useFiberNodeButtonPanelState(props) {
+  const {
+    network,
+    fiber,
+    onLog,
+    onError,
+    initialPeerPubkey,
+    initialPeerAddress,
+    initialFundingAmountCkb,
+    externalFunding
+  } = props;
+  const [activeTab, setActiveTab] = useState5("workbench");
+  const [peerPubkey, setPeerPubkey] = useState5(initialPeerPubkey);
+  const [peerAddress, setPeerAddress] = useState5(initialPeerAddress);
+  const [fundingAmountCkb, setFundingAmountCkb] = useState5(initialFundingAmountCkb);
+  const [connectedPeers, setConnectedPeers] = useState5([]);
+  const [isRefreshingPeers, setIsRefreshingPeers] = useState5(false);
+  const [isConnectingPeer, setIsConnectingPeer] = useState5(false);
+  const [graphNodes, setGraphNodes] = useState5([]);
+  const [graphChannels, setGraphChannels] = useState5([]);
+  const [isRefreshingGraph, setIsRefreshingGraph] = useState5(false);
+  const [channels, setChannels] = useState5([]);
+  const [channelFilter, setChannelFilter] = useState5("active");
+  const [isRefreshingChannels, setIsRefreshingChannels] = useState5(false);
+  const [closingChannelId, setClosingChannelId] = useState5(null);
+  const [selectedChannelId, setSelectedChannelId] = useState5(null);
+  const [forceCloseConfirmOpen, setForceCloseConfirmOpen] = useState5(false);
+  const [invoiceInput, setInvoiceInput] = useState5("");
+  const [createdInvoice, setCreatedInvoice] = useState5("");
+  const [isCreatingInvoice, setIsCreatingInvoice] = useState5(false);
+  const [latestError, setLatestError] = useState5(null);
+  const [statusNotice, setStatusNotice] = useState5(null);
+  const statusTimerRef = useRef4(null);
+  const mountedRef = useRef4(true);
+  const peerListId = useId2();
+  const tabPanelId = useId2();
+  const channelOpenFlow = useChannelOpenFlow({
+    node: fiber.node,
+    onLog
+  });
+  const { payInvoice, isPaying, paymentResult, error: paymentError } = useFiberPayment(fiber.node);
+  const isNodeReady = fiber.isRunning && !!fiber.node;
+  useEffect4(() => {
+    return () => {
+      mountedRef.current = false;
+      if (statusTimerRef.current !== null) {
+        window.clearTimeout(statusTimerRef.current);
+      }
+    };
+  }, []);
+  const flashStatus = useCallback5((text, tone = "info") => {
+    setStatusNotice({ tone, text });
+    if (statusTimerRef.current !== null) {
+      window.clearTimeout(statusTimerRef.current);
+    }
+    statusTimerRef.current = window.setTimeout(() => {
+      setStatusNotice(null);
+      statusTimerRef.current = null;
+    }, 3200);
+  }, []);
+  const reportError = useCallback5(
+    (message) => {
+      setLatestError(message);
+      onError?.(message);
+      onLog?.(`fiber_panel_error_shown: ${summarizeError(message, 120)}`);
+    },
+    [onError, onLog]
+  );
+  const refreshConnectedPeers = useCallback5(async () => {
+    if (!fiber.node) {
+      if (mountedRef.current) {
+        setConnectedPeers([]);
+      }
+      return;
+    }
+    if (!mountedRef.current) {
+      return;
+    }
+    setIsRefreshingPeers(true);
+    try {
+      const peers = await fiber.node.listPeers();
+      if (!mountedRef.current) {
+        return;
+      }
+      setConnectedPeers(peers.peers);
+      setPeerPubkey((prev) => prev.trim() ? prev : peers.peers[0]?.pubkey ?? prev);
+      onLog?.(`Loaded connected peers: ${peers.peers.length}.`);
+    } catch (error) {
+      if (!mountedRef.current) {
+        return;
+      }
+      const message = error instanceof Error ? error.message : String(error);
+      reportError(message);
+      onLog?.(`Refresh peers failed: ${message}`);
+    } finally {
+      if (mountedRef.current) {
+        setIsRefreshingPeers(false);
+      }
+    }
+  }, [fiber.node, onLog, reportError]);
+  const refreshGraph = useCallback5(async () => {
+    if (!fiber.node) {
+      if (mountedRef.current) {
+        setGraphNodes([]);
+        setGraphChannels([]);
+      }
+      return;
+    }
+    if (!mountedRef.current) {
+      return;
+    }
+    setIsRefreshingGraph(true);
+    try {
+      const [nodesResult, channelsResult] = await Promise.all([
+        fiber.node.graphNodes({ limit: "0x8" }),
+        fiber.node.graphChannels({ limit: "0x8" })
+      ]);
+      if (!mountedRef.current) {
+        return;
+      }
+      setGraphNodes(nodesResult.nodes);
+      setGraphChannels(channelsResult.channels);
+      onLog?.(
+        `Loaded graph: ${nodesResult.nodes.length} nodes, ${channelsResult.channels.length} channels.`
+      );
+    } catch (error) {
+      if (!mountedRef.current) {
+        return;
+      }
+      const message = error instanceof Error ? error.message : String(error);
+      reportError(message);
+      onLog?.(`Refresh graph failed: ${message}`);
+    } finally {
+      if (mountedRef.current) {
+        setIsRefreshingGraph(false);
+      }
+    }
+  }, [fiber.node, onLog, reportError]);
+  const refreshChannels = useCallback5(async () => {
+    if (!fiber.node) {
+      if (mountedRef.current) {
+        setChannels([]);
+      }
+      return;
+    }
+    if (!mountedRef.current) {
+      return;
+    }
+    setIsRefreshingChannels(true);
+    try {
+      const result = await fiber.node.listChannels({ include_closed: true });
+      if (!mountedRef.current) {
+        return;
+      }
+      setChannels(result.channels);
+      onLog?.(`Loaded channels: ${result.channels.length}.`);
+    } catch (error) {
+      if (!mountedRef.current) {
+        return;
+      }
+      const message = error instanceof Error ? error.message : String(error);
+      reportError(message);
+      onLog?.(`Refresh channels failed: ${message}`);
+    } finally {
+      if (mountedRef.current) {
+        setIsRefreshingChannels(false);
+      }
+    }
+  }, [fiber.node, onLog, reportError]);
+  const closeChannel = useCallback5(
+    async (channelId, force = false) => {
+      if (!fiber.node) {
+        reportError("Node is not connected.");
+        return;
+      }
+      setClosingChannelId(channelId);
+      try {
+        const latest = await fiber.node.listChannels({ include_closed: true });
+        const target = latest.channels.find((item) => item.channel_id === channelId);
+        if (!target) {
+          throw new Error(`Channel not found in latest snapshot: ${channelId}.`);
+        }
+        if (target.state.state_name === ChannelState2.Closed) {
+          setChannels(latest.channels);
+          flashStatus("Channel is already closed.", "info");
+          onLog?.(`Channel already closed: ${channelId}`);
+          return;
+        }
+        if (target.state.state_name === ChannelState2.ShuttingDown) {
+          setChannels(latest.channels);
+          flashStatus("Channel is already shutting down.", "info");
+          onLog?.(`Channel is already shutting down: ${channelId}`);
+          return;
+        }
+        if (isPendingChannelState(target.state.state_name)) {
+          const params = {
+            channel_id: channelId
+          };
+          await fiber.node.abandonChannel(params);
+          flashStatus("Pending channel abandoned.", "success");
+          onLog?.(`Pending channel abandoned: ${channelId}`);
+        } else {
+          const params = {
+            channel_id: channelId,
+            force
+          };
+          await fiber.node.shutdownChannel(params);
+          flashStatus(force ? "Force close requested." : "Close requested.", "success");
+          onLog?.(`${force ? "Force close" : "Close"} channel requested: ${channelId}`);
+        }
+        await refreshChannels();
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        reportError(message);
+      } finally {
+        setClosingChannelId(null);
+      }
+    },
+    [fiber.node, flashStatus, onLog, refreshChannels, reportError]
+  );
+  const connectPeerByAddress = useCallback5(async () => {
+    if (!fiber.node) {
+      reportError("Node is not connected.");
+      return;
+    }
+    if (!peerAddress.trim()) {
+      reportError("Peer address is empty.");
+      return;
+    }
+    setIsConnectingPeer(true);
+    try {
+      await fiber.node.connectPeer({
+        address: peerAddress.trim(),
+        save: true
+      });
+      flashStatus("Peer connected.", "success");
+      onLog?.("Peer connected from address input.");
+      await refreshConnectedPeers();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      reportError(message);
+      onLog?.(`Connect peer failed: ${message}`);
+    } finally {
+      setIsConnectingPeer(false);
+    }
+  }, [fiber.node, flashStatus, onLog, peerAddress, refreshConnectedPeers, reportError]);
+  const openChannel = useCallback5(async () => {
+    if (!fiber.node) {
+      reportError("Node is not connected.");
+      return;
+    }
+    if (!peerPubkey.trim()) {
+      reportError("Target peer pubkey is empty.");
+      return;
+    }
+    channelOpenFlow.reset();
+    try {
+      const pubkey = toHexPrefixed(peerPubkey);
+      if (!externalFunding?.enabled) {
+        const openResult2 = await channelOpenFlow.openChannel({
+          pubkey,
+          fundingAmountCkb,
+          externalWallet: false
+        });
+        if (!openResult2) {
+          return;
+        }
+        flashStatus("Open channel submitted.", "success");
+        onLog?.("fiber_panel_primary_action_clicked: open_channel");
+        await refreshChannels();
+        return;
+      }
+      const resolved = await externalFunding.resolve({
+        node: fiber.node,
+        pubkey,
+        fundingAmountCkb
+      });
+      const openResult = await channelOpenFlow.openChannel({
+        pubkey,
+        fundingAmountCkb,
+        externalWallet: true,
+        shutdownScript: resolved.shutdownScript,
+        fundingLockScript: resolved.fundingLockScript,
+        fundingLockScriptCellDeps: resolved.fundingLockScriptCellDeps,
+        signFundingTx: resolved.signFundingTx,
+        ckbRpcUrl: resolved.ckbRpcUrl
+      });
+      if (!openResult) {
+        return;
+      }
+      flashStatus("Open channel submitted.", "success");
+      onLog?.("fiber_panel_primary_action_clicked: open_channel");
+      await refreshChannels();
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      reportError(message);
+      onLog?.(`Open channel failed: ${message}`);
+    }
+  }, [
+    channelOpenFlow,
+    externalFunding,
+    fiber.node,
+    flashStatus,
+    fundingAmountCkb,
+    onLog,
+    peerPubkey,
+    refreshChannels,
+    reportError
+  ]);
+  const createInvoice = useCallback5(async () => {
+    if (!fiber.node) {
+      reportError("Node is not connected.");
+      return;
+    }
+    setIsCreatingInvoice(true);
+    try {
+      const created = await fiber.node.newInvoice({
+        amount: ONE_CKB_SHANNONS,
+        currency: network === "mainnet" ? "Fibb" : "Fibt",
+        description: "FiberNodeButton invoice"
+      });
+      setCreatedInvoice(created.invoice_address);
+      flashStatus("Invoice created.", "success");
+      onLog?.("fiber_panel_primary_action_clicked: create_invoice");
+      onLog?.(`Invoice created: ${shorten(created.invoice_address, 20, 8)}`);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      reportError(message);
+    } finally {
+      setIsCreatingInvoice(false);
+    }
+  }, [fiber.node, flashStatus, network, onLog, reportError]);
+  const submitPayment = useCallback5(async () => {
+    if (!invoiceInput.trim()) {
+      reportError("Invoice is empty.");
+      return;
+    }
+    onLog?.("fiber_panel_primary_action_clicked: pay_invoice");
+    await payInvoice(invoiceInput);
+  }, [invoiceInput, onLog, payInvoice, reportError]);
+  useEffect4(() => {
+    if (!fiber.isRunning || !fiber.node) {
+      setConnectedPeers([]);
+      setGraphNodes([]);
+      setGraphChannels([]);
+      setChannels([]);
+      setSelectedChannelId(null);
+      return;
+    }
+    void refreshConnectedPeers();
+    void refreshGraph();
+    void refreshChannels();
+  }, [fiber.isRunning, fiber.node, refreshChannels, refreshConnectedPeers, refreshGraph]);
+  useEffect4(() => {
+    if (paymentError) {
+      reportError(paymentError);
+    }
+  }, [paymentError, reportError]);
+  useEffect4(() => {
+    if (channelOpenFlow.error) {
+      reportError(channelOpenFlow.error);
+    }
+  }, [channelOpenFlow.error, reportError]);
+  useEffect4(() => {
+    if (!paymentResult) {
+      return;
+    }
+    flashStatus(`Payment ${paymentResult.status}.`, "success");
+    onLog?.(`Payment status: ${paymentResult.status}`);
+  }, [flashStatus, onLog, paymentResult]);
+  const channelCounts = useMemo3(() => {
+    const counts = { active: 0, pending: 0, closed: 0, all: channels.length };
+    for (const channel of channels) {
+      counts[getChannelFilterState(channel)] += 1;
+    }
+    return counts;
+  }, [channels]);
+  const visibleChannels = useMemo3(
+    () => channelFilter === "all" ? channels : channels.filter((channel) => getChannelFilterState(channel) === channelFilter),
+    [channelFilter, channels]
+  );
+  const activeChannelCount = channelCounts.active;
+  const selectedChannel = useMemo3(
+    () => channels.find((channel) => channel.channel_id === selectedChannelId) ?? null,
+    [channels, selectedChannelId]
+  );
+  useEffect4(() => {
+    if (!selectedChannelId) {
+      return;
+    }
+    if (!channels.some((channel) => channel.channel_id === selectedChannelId)) {
+      setSelectedChannelId(null);
+      setForceCloseConfirmOpen(false);
+    }
+  }, [channels, selectedChannelId]);
+  useEffect4(() => {
+    const isSelectedVisible = selectedChannelId ? visibleChannels.some((channel) => channel.channel_id === selectedChannelId) : false;
+    if (!isSelectedVisible) {
+      setSelectedChannelId(visibleChannels[0]?.channel_id ?? null);
+      setForceCloseConfirmOpen(false);
+    }
+  }, [selectedChannelId, visibleChannels]);
+  const selectedState = selectedChannel?.state.state_name;
+  const selectedPending = selectedChannel ? isPendingChannelState(selectedState) : false;
+  const selectedCanClose = !!selectedChannel && selectedState !== ChannelState2.Closed && selectedState !== ChannelState2.ShuttingDown;
+  const selectedIsClosing = !!selectedChannel && closingChannelId === selectedChannel.channel_id;
+  const connectorContext = useMemo3(
+    () => ({
+      fiber,
+      externalFundingEnabled: !!externalFunding?.enabled,
+      isOpeningChannel: channelOpenFlow.isOpening
+    }),
+    [channelOpenFlow.isOpening, externalFunding?.enabled, fiber]
+  );
+  const switchTab = useCallback5(
+    (next) => {
+      setActiveTab(next);
+      onLog?.(`fiber_panel_tab_switched: ${next}`);
+    },
+    [onLog]
+  );
+  const refreshDiagnostics = useCallback5(async () => {
+    await Promise.all([refreshConnectedPeers(), refreshGraph()]);
+    flashStatus("Diagnostics refreshed.", "info");
+  }, [flashStatus, refreshConnectedPeers, refreshGraph]);
+  return {
+    // tab
+    activeTab,
+    switchTab,
+    tabPanelId,
+    // inputs
+    peerPubkey,
+    setPeerPubkey,
+    peerAddress,
+    setPeerAddress,
+    fundingAmountCkb,
+    setFundingAmountCkb,
+    peerListId,
+    // peers
+    connectedPeers,
+    isRefreshingPeers,
+    isConnectingPeer,
+    refreshConnectedPeers,
+    connectPeerByAddress,
+    // graph
+    graphNodes,
+    graphChannels,
+    isRefreshingGraph,
+    refreshGraph,
+    // channels
+    channels,
+    channelFilter,
+    setChannelFilter,
+    isRefreshingChannels,
+    refreshChannels,
+    closeChannel,
+    selectedChannelId,
+    setSelectedChannelId,
+    selectedChannel,
+    selectedPending,
+    selectedCanClose,
+    selectedIsClosing,
+    forceCloseConfirmOpen,
+    setForceCloseConfirmOpen,
+    channelCounts,
+    visibleChannels,
+    activeChannelCount,
+    // payments
+    invoiceInput,
+    setInvoiceInput,
+    createdInvoice,
+    isCreatingInvoice,
+    createInvoice,
+    submitPayment,
+    isPaying,
+    paymentResult,
+    // flow
+    channelOpenFlow,
+    openChannel,
+    // notices
+    latestError,
+    statusNotice,
+    // diagnostics aggregate
+    refreshDiagnostics,
+    // misc
+    isNodeReady,
+    connectorContext
+  };
+}
+
+// src/fiber-node-button/workbench-tab.tsx
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function WorkbenchTab({
+  state,
+  fiber,
+  externalFunding,
+  renderConnectorSection,
+  renderAction,
+  t
+}) {
+  const {
+    isNodeReady,
+    connectorContext,
+    channelOpenFlow,
+    peerListId,
+    peerPubkey,
+    setPeerPubkey,
+    connectedPeers,
+    fundingAmountCkb,
+    setFundingAmountCkb,
+    openChannel,
+    isCreatingInvoice,
+    createInvoice,
+    createdInvoice,
+    invoiceInput,
+    setInvoiceInput,
+    isPaying,
+    submitPayment,
+    paymentResult
+  } = state;
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsxs4("section", { style: styles2.section, children: [
+      /* @__PURE__ */ jsxs4("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx5("h4", { style: styles2.sectionTitle, children: t("workbench.connectionPrep.title", "Connection Prep") }),
+        /* @__PURE__ */ jsx5("span", { style: styles2.badge, children: isNodeReady ? t("workbench.connectionPrep.connected", "Connected") : t("workbench.connectionPrep.disconnected", "Disconnected") })
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { style: styles2.compactText, children: [
+        t("workbench.connectionPrep.node", "Node"),
+        ":",
+        " ",
+        fiber.nodeInfo?.pubkey ? shorten(fiber.nodeInfo.pubkey, 18, 12) : t("meta.na", "N/A")
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { style: styles2.compactText, children: [
+        t("workbench.connectionPrep.externalWallet", "External wallet"),
+        ":",
+        " ",
+        externalFunding?.enabled ? t("workbench.connectionPrep.enabled", "Enabled") : t("workbench.connectionPrep.disabled", "Disabled")
+      ] }),
+      renderConnectorSection ? /* @__PURE__ */ jsx5("div", { style: { borderTop: "1px solid #e2e8f0", paddingTop: "0.55rem" }, children: renderConnectorSection(connectorContext) }) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("section", { style: styles2.section, children: [
+      /* @__PURE__ */ jsxs4("div", { style: styles2.rowBetween, children: [
+        /* @__PURE__ */ jsx5("h4", { style: styles2.sectionTitle, children: t("workbench.openChannel.title", "Open Channel") }),
+        channelOpenFlow.lastResult ? /* @__PURE__ */ jsx5("span", { style: styles2.badge, children: t("workbench.openChannel.recentSuccess", "Recent Success") }) : null
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { style: styles2.fieldLabel, children: [
+        t("workbench.openChannel.targetPeerPubkey", "Target Peer Pubkey"),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            style: styles2.input,
+            list: peerListId,
+            value: peerPubkey,
+            onChange: (event) => setPeerPubkey(event.target.value),
+            placeholder: connectedPeers[0]?.pubkey ?? "0x..."
+          }
+        ),
+        /* @__PURE__ */ jsx5("datalist", { id: peerListId, children: connectedPeers.map((peer) => /* @__PURE__ */ jsx5("option", { value: peer.pubkey }, peer.pubkey)) })
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { style: styles2.fieldLabel, children: [
+        t("workbench.openChannel.fundingAmount", "Funding Amount (CKB)"),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            style: styles2.input,
+            value: fundingAmountCkb,
+            onChange: (event) => setFundingAmountCkb(event.target.value),
+            placeholder: "1000"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5("div", { style: styles2.row, children: renderPanelAction({
+        id: "open-channel",
+        fiber,
+        state,
+        renderAction,
+        t,
+        buttonStyle: styles2.primaryButton,
+        defaultProps: {
+          id: "open-channel",
+          label: t("actions.openChannel", "Open Channel"),
+          loadingLabel: t("actions.openChannel.loading", "Opening..."),
+          disabled: !isNodeReady || channelOpenFlow.isOpening || !peerPubkey.trim(),
+          loading: channelOpenFlow.isOpening,
+          onTrigger: openChannel
+        }
+      }) }),
+      channelOpenFlow.lastResult ? /* @__PURE__ */ jsxs4("p", { style: styles2.compactText, children: [
+        t("workbench.openChannel.lastChannel", "Last channel"),
+        ":",
+        " ",
+        shorten(channelOpenFlow.lastResult.channelId, 14, 8)
+      ] }) : null,
+      channelOpenFlow.suggestedFundingAmountCkb ? /* @__PURE__ */ jsxs4("p", { style: styles2.compactText, children: [
+        t("workbench.openChannel.suggestedAmount", "Suggested amount"),
+        ":",
+        " ",
+        channelOpenFlow.suggestedFundingAmountCkb,
+        " CKB"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs4("section", { style: styles2.section, children: [
+      /* @__PURE__ */ jsx5("h4", { style: styles2.sectionTitle, children: t("workbench.payments.title", "Payments") }),
+      /* @__PURE__ */ jsxs4("div", { style: styles2.row, children: [
+        renderPanelAction({
+          id: "create-invoice",
+          fiber,
+          state,
+          renderAction,
+          t,
+          defaultProps: {
+            id: "create-invoice",
+            label: t("actions.createInvoice", "Create Invoice (1 CKB)"),
+            loadingLabel: t("actions.createInvoice.loading", "Creating..."),
+            disabled: isCreatingInvoice || !isNodeReady,
+            loading: isCreatingInvoice,
+            onTrigger: createInvoice
+          }
+        }),
+        createdInvoice ? /* @__PURE__ */ jsx5("span", { style: styles2.compactText, children: shorten(createdInvoice, 20, 10) }) : null
+      ] }),
+      /* @__PURE__ */ jsxs4("label", { style: styles2.fieldLabel, children: [
+        t("workbench.payments.invoice", "Invoice"),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            style: styles2.input,
+            value: invoiceInput,
+            onChange: (event) => setInvoiceInput(event.target.value),
+            placeholder: t("workbench.payments.invoicePlaceholder", "Paste invoice to pay")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { style: styles2.rowBetween, children: [
+        renderPanelAction({
+          id: "pay-invoice",
+          fiber,
+          state,
+          renderAction,
+          t,
+          buttonStyle: styles2.primaryButton,
+          defaultProps: {
+            id: "pay-invoice",
+            label: t("actions.payInvoice", "Pay Invoice"),
+            loadingLabel: t("actions.payInvoice.loading", "Paying..."),
+            disabled: isPaying || !isNodeReady || !invoiceInput.trim(),
+            loading: isPaying,
+            onTrigger: submitPayment
+          }
+        }),
+        /* @__PURE__ */ jsxs4("span", { style: styles2.compactText, children: [
+          t("workbench.payments.status", "Status"),
+          ":",
+          " ",
+          paymentResult?.status ?? t("workbench.payments.idle", "Idle")
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/fiber-node-button/panel.tsx
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function toDomSafeTabId(tabId, index) {
+  const normalized = tabId.trim().replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  const safeBase = normalized.length > 0 ? normalized : "tab";
+  return `${safeBase}-${index + 1}`;
+}
+function resolveTabLabel(tabId, t) {
+  const builtIn = TAB_ITEMS.find((item) => item.id === tabId);
+  if (!builtIn) {
+    return tabId;
+  }
+  if (builtIn.id === "workbench") {
+    return t("tabs.workbench", builtIn.label);
+  }
+  if (builtIn.id === "channels") {
+    return t("tabs.channels", builtIn.label);
+  }
+  return t("tabs.diagnostics", builtIn.label);
+}
+function resolveTabs(tabs, t) {
+  const defaultIds = TAB_ITEMS.map((item) => item.id);
+  if (!tabs || tabs.length === 0) {
+    return defaultIds.map((id, index) => ({
+      id,
+      domId: toDomSafeTabId(id, index),
+      label: resolveTabLabel(id, t)
+    }));
+  }
+  const tabConfigById = /* @__PURE__ */ new Map();
+  const orderedIds = [];
+  for (const tabConfig of tabs) {
+    tabConfigById.set(tabConfig.id, tabConfig);
+    if (!orderedIds.includes(tabConfig.id)) {
+      orderedIds.push(tabConfig.id);
+    }
+  }
+  for (const id of defaultIds) {
+    if (!orderedIds.includes(id)) {
+      orderedIds.push(id);
+    }
+  }
+  const resolvedTabs = [];
+  for (const [index, id] of orderedIds.entries()) {
+    const config = tabConfigById.get(id);
+    if (config?.hidden) {
+      continue;
+    }
+    const label = typeof config?.label === "function" ? config.label(t) : config?.label ?? resolveTabLabel(id, t);
+    const tabItem = {
+      id,
+      domId: toDomSafeTabId(id, index),
+      label
+    };
+    if (config?.render) {
+      tabItem.render = config.render;
+    }
+    resolvedTabs.push(tabItem);
+  }
+  return resolvedTabs;
+}
+function FiberNodeButtonPanel(props) {
+  const {
+    dropdownContext,
+    fiber,
+    onLog,
+    externalFunding,
+    renderConnectorSection,
+    tabs,
+    renderTabContent,
+    renderAction
+  } = props;
+  const t = props.t ?? defaultFiberNodeButtonI18n;
+  const state = useFiberNodeButtonPanelState(props);
+  const forceCloseDialogRef = useRef5(null);
+  const {
+    activeTab,
+    switchTab,
+    tabPanelId,
+    statusNotice,
+    latestError,
+    activeChannelCount,
+    connectedPeers,
+    forceCloseConfirmOpen,
+    setForceCloseConfirmOpen,
+    selectedChannel,
+    closeChannel,
+    openChannel,
+    createInvoice,
+    submitPayment
+  } = state;
+  const tabActions = useMemo4(
+    () => ({
+      openChannel: async () => {
+        await openChannel();
+      },
+      createInvoice: async () => {
+        await createInvoice();
+      },
+      payInvoice: async () => {
+        await submitPayment();
+      },
+      closeChannel: async (channelId) => {
+        await closeChannel(channelId, false);
+      },
+      forceCloseChannel: async (channelId) => {
+        await closeChannel(channelId, true);
+      }
+    }),
+    [closeChannel, createInvoice, openChannel, submitPayment]
+  );
+  const tabContext = useMemo4(
+    () => ({
+      fiber,
+      state,
+      externalFundingEnabled: !!externalFunding?.enabled,
+      t,
+      actions: tabActions
+    }),
+    [externalFunding?.enabled, fiber, state, t, tabActions]
+  );
+  const resolvedTabs = useMemo4(() => resolveTabs(tabs, t), [t, tabs]);
+  const effectiveActiveTab = useMemo4(
+    () => resolvedTabs.some((tab) => tab.id === activeTab) ? activeTab : resolvedTabs[0]?.id ?? null,
+    [activeTab, resolvedTabs]
+  );
+  const selectedResolvedTab = useMemo4(
+    () => resolvedTabs.find((tab) => tab.id === effectiveActiveTab) ?? null,
+    [effectiveActiveTab, resolvedTabs]
+  );
+  const tabListStyle = useMemo4(
+    () => ({
+      ...styles2.tabList,
+      gridTemplateColumns: `repeat(${Math.max(1, resolvedTabs.length)}, minmax(112px, 1fr))`,
+      overflowX: "auto"
+    }),
+    [resolvedTabs.length]
+  );
+  const overriddenTabContent = effectiveActiveTab ? renderTabContent?.(effectiveActiveTab, tabContext) : void 0;
+  let tabContent = overriddenTabContent;
+  if (tabContent === void 0) {
+    if (selectedResolvedTab?.render) {
+      tabContent = selectedResolvedTab.render(tabContext);
+    } else if (effectiveActiveTab === "workbench") {
+      tabContent = /* @__PURE__ */ jsx6(
+        WorkbenchTab,
+        {
+          state,
+          fiber,
+          externalFunding,
+          renderConnectorSection,
+          renderAction,
+          t
+        }
+      );
+    } else if (effectiveActiveTab === "channels") {
+      tabContent = /* @__PURE__ */ jsx6(ChannelsTab, { state, onLog, renderAction, t, fiber });
+    } else if (effectiveActiveTab === "diagnostics") {
+      tabContent = /* @__PURE__ */ jsx6(DiagnosticsTab, { state, t });
+    } else if (effectiveActiveTab === null) {
+      tabContent = /* @__PURE__ */ jsx6("div", { style: styles2.notice, children: t("tabs.empty", "No visible tabs are configured.") });
+    } else {
+      tabContent = /* @__PURE__ */ jsx6("div", { style: styles2.notice, children: t("tabs.unimplemented", "Tab content is not implemented.") });
+    }
+  }
+  useEffect5(() => {
+    if (forceCloseConfirmOpen) {
+      forceCloseDialogRef.current?.focus();
+    }
+  }, [forceCloseConfirmOpen]);
+  useEffect5(() => {
+    if (resolvedTabs.length === 0) {
+      return;
+    }
+    if (!resolvedTabs.some((tab) => tab.id === activeTab)) {
+      switchTab(resolvedTabs[0].id);
+    }
+  }, [activeTab, resolvedTabs, switchTab]);
+  return /* @__PURE__ */ jsxs5("div", { style: styles2.shell, children: [
+    /* @__PURE__ */ jsxs5("header", { style: styles2.globalBar, children: [
+      /* @__PURE__ */ jsxs5("div", { style: styles2.globalRow, children: [
+        /* @__PURE__ */ jsxs5("div", { style: styles2.globalMetrics, children: [
+          /* @__PURE__ */ jsxs5("span", { style: styles2.metricInline, children: [
+            /* @__PURE__ */ jsx6(
+              "span",
+              {
+                style: {
+                  ...styles2.metricDot,
+                  background: fiber.state === "running" ? "#16a34a" : fiber.state === "error" ? "#dc2626" : "#64748b"
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricMain, children: fiber.state }),
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricSub, children: t("metrics.node", "Node") })
+          ] }),
+          /* @__PURE__ */ jsx6("span", { style: styles2.metricDivider, "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsxs5("span", { style: styles2.metricInline, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricMain, children: externalFunding?.enabled ? t("metrics.funding.external", "External") : t("metrics.funding.internal", "Internal") }),
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricSub, children: t("metrics.funding", "Funding") })
+          ] }),
+          /* @__PURE__ */ jsx6("span", { style: styles2.metricDivider, "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsxs5("span", { style: styles2.metricInline, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricMain, children: activeChannelCount }),
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricSub, children: t("metrics.active", "Active") })
+          ] }),
+          /* @__PURE__ */ jsx6("span", { style: styles2.metricDivider, "aria-hidden": "true", children: "|" }),
+          /* @__PURE__ */ jsxs5("span", { style: styles2.metricInline, children: [
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricMain, children: connectedPeers.length }),
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricSub, children: t("metrics.peers", "Peers") })
+          ] }),
+          latestError ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+            /* @__PURE__ */ jsx6("span", { style: styles2.metricDivider, "aria-hidden": "true", children: "|" }),
+            /* @__PURE__ */ jsxs5("span", { style: styles2.metricInline, children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  style: {
+                    ...styles2.metricDot,
+                    background: "#dc2626"
+                  },
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsx6("span", { style: styles2.metricMain, children: t("metrics.error", "Error") })
+            ] })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { style: styles2.globalActions, children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              style: styles2.globalActionButton,
+              onClick: () => {
+                void dropdownContext.disconnect();
+              },
+              "aria-label": t("actions.disconnect.aria", "Disconnect node"),
+              children: t("actions.disconnect", "Disconnect")
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              style: styles2.globalActionButton,
+              onClick: () => {
+                dropdownContext.closeDropdown();
+              },
+              "aria-label": t("actions.closePanel.aria", "Close panel"),
+              children: t("actions.closePanel", "Close Panel")
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: styles2.globalMeta, children: [
+        /* @__PURE__ */ jsxs5("p", { style: styles2.inlineCode, children: [
+          t("meta.node", "Node"),
+          ":",
+          " ",
+          fiber.nodeInfo?.pubkey ? shorten(fiber.nodeInfo.pubkey, 18, 12) : t("meta.na", "N/A")
+        ] }),
+        latestError ? /* @__PURE__ */ jsxs5("p", { style: styles2.globalErrorInline, children: [
+          t("meta.recentError", "Recent error"),
+          ": ",
+          summarizeError(latestError, 92)
+        ] }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6("div", { role: "tablist", "aria-label": t("tabs.aria", "Fiber panel tabs"), style: tabListStyle, children: resolvedTabs.map((tab) => {
+      const selected = effectiveActiveTab === tab.id;
+      return /* @__PURE__ */ jsx6(
+        "button",
+        {
+          id: `${tabPanelId}-tab-${tab.domId}`,
+          type: "button",
+          role: "tab",
+          "aria-selected": selected,
+          "aria-controls": selected ? `${tabPanelId}-panel-${tab.domId}` : void 0,
+          style: selected ? styles2.tabButtonActive : styles2.tabButton,
+          onClick: () => switchTab(tab.id),
+          children: tab.label
+        },
+        tab.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        id: `${tabPanelId}-panel-${selectedResolvedTab?.domId ?? "empty"}`,
+        role: "tabpanel",
+        "aria-labelledby": selectedResolvedTab ? `${tabPanelId}-tab-${selectedResolvedTab.domId}` : void 0,
+        style: styles2.content,
+        children: [
+          statusNotice ? /* @__PURE__ */ jsx6(
+            "div",
+            {
+              style: {
+                ...styles2.notice,
+                ...statusNotice.tone === "success" ? styles2.successNotice : {}
+              },
+              children: statusNotice.text
+            }
+          ) : null,
+          tabContent,
+          latestError ? /* @__PURE__ */ jsx6("div", { style: styles2.errorNotice, children: latestError }) : null
+        ]
+      }
+    ),
+    forceCloseConfirmOpen && selectedChannel ? /* @__PURE__ */ jsx6("div", { style: styles2.dialogBackdrop, children: /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: forceCloseDialogRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": t("dialog.forceClose.aria", "Force close confirmation"),
+        tabIndex: -1,
+        style: styles2.dialogCard,
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            setForceCloseConfirmOpen(false);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx6("h4", { style: styles2.sectionTitle, children: t("dialog.forceClose.title", "Force close this channel?") }),
+          /* @__PURE__ */ jsx6("p", { style: styles2.compactText, children: t(
+            "dialog.forceClose.description",
+            "This action may immediately broadcast a unilateral close transaction, can lock liquidity until settlement, and may produce additional fees. Continue only if normal close cannot proceed."
+          ) }),
+          /* @__PURE__ */ jsxs5("p", { style: styles2.inlineCode, children: [
+            t("dialog.forceClose.channel", "Channel"),
+            ":",
+            " ",
+            shorten(selectedChannel.channel_id, 20, 12)
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { style: { ...styles2.row, justifyContent: "flex-end" }, children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                style: styles2.actionButton,
+                onClick: () => {
+                  setForceCloseConfirmOpen(false);
+                },
+                children: t("dialog.forceClose.cancel", "Cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                style: styles2.dangerButton,
+                onClick: () => {
+                  setForceCloseConfirmOpen(false);
+                  onLog?.("fiber_channel_force_close_confirmed");
+                  void closeChannel(selectedChannel.channel_id, true);
+                },
+                children: t("dialog.forceClose.confirm", "Confirm Force Close")
+              }
+            )
+          ] })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+
+// src/fiber-node-button/index.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function FiberNodeButton(props) {
+  const {
+    network = "testnet",
+    fiber: externalFiber,
+    strategy = "passkey",
+    externalWallet = false,
+    password,
+    walletId,
+    passkeyUsername = "User",
+    wasmFactory,
+    nodeConfig,
+    className,
+    style,
+    dropdownStyle,
+    onConnect,
+    onDisconnect,
+    onError,
+    onLog,
+    initialPeerPubkey = "",
+    initialPeerAddress = "",
+    initialFundingAmountCkb = "1000",
+    externalFunding,
+    renderConnectorSection,
+    tabs,
+    renderTabContent,
+    renderAction,
+    t
+  } = props;
+  const managedFiber = useFiberNode({
+    network,
+    walletId,
+    wasmFactory,
+    nodeConfig,
+    externalWallet,
+    enabled: !externalFiber
+  });
+  const fiber = externalFiber ?? managedFiber;
+  const handleConnectButtonError = useCallback6(
+    (error) => {
+      onError?.(error);
+    },
+    [onError]
+  );
+  const renderDropdown = useCallback6(
+    (dropdownContext) => /* @__PURE__ */ jsx7(
+      FiberNodeButtonPanel,
+      {
+        dropdownContext,
+        network,
+        fiber,
+        onLog,
+        onError,
+        initialPeerPubkey,
+        initialPeerAddress,
+        initialFundingAmountCkb,
+        externalFunding,
+        renderConnectorSection,
+        tabs,
+        renderTabContent,
+        renderAction,
+        t
+      }
+    ),
+    [
+      externalFunding,
+      fiber,
+      initialFundingAmountCkb,
+      initialPeerAddress,
+      initialPeerPubkey,
+      network,
+      onError,
+      onLog,
+      renderAction,
+      renderConnectorSection,
+      renderTabContent,
+      t,
+      tabs
+    ]
+  );
+  return /* @__PURE__ */ jsx7(
+    ConnectButton,
+    {
+      fiber,
+      strategy,
+      password,
+      passkeyUsername,
+      onConnect,
+      onDisconnect,
+      onError: handleConnectButtonError,
+      className,
+      style,
+      dropdownStyle: { maxWidth: 460, width: "calc(100vw - 1rem)", ...dropdownStyle },
+      renderConnectedDropdown: renderDropdown
+    }
+  );
+}
+
+// src/fiber-pay-quick-card.tsx
+import { useEffect as useEffect6, useId as useId3, useState as useState6 } from "react";
+import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var ONE_CKB_SHANNONS2 = "0x5f5e100";
+var cardStyle = {
+  border: "1px solid #ddd",
+  borderRadius: 8,
+  padding: 16,
+  maxWidth: 520
+};
+var rowStyle = {
+  display: "flex",
+  gap: 8
+};
+var rowWithMarginStyle = {
+  ...rowStyle,
+  marginBottom: 8
+};
+function FiberPayQuickCard(props) {
+  const network = props.network ?? "testnet";
+  const passkeyUsername = props.passkeyUsername ?? "User";
+  const title = props.title ?? "FiberPay Quick Card";
+  const usesExternalFiber = !!props.fiber;
+  const onError = props.onError;
+  const onInvoiceCreated = props.onInvoiceCreated;
+  const onPaymentResult = props.onPaymentResult;
+  const passwordInputId = useId3();
+  const invoiceInputId = useId3();
+  const managedFiber = useFiberNode({
+    network,
+    walletId: props.walletId,
+    enabled: !usesExternalFiber
+  });
+  const fiber = props.fiber ?? managedFiber;
+  const {
+    node,
+    nodeInfo,
+    state,
+    error: nodeError,
+    isPasskeySupported,
+    hasPasskeyConfigured,
+    startWithPassword,
+    startWithPasskey,
+    createPasskeyAndStart,
+    stop
+  } = fiber;
+  const { payInvoice, isPaying, error: payError, paymentResult } = useFiberPayment(node);
+  const [password, setPassword] = useState6("");
+  const [invoiceInput, setInvoiceInput] = useState6("");
+  const [createdInvoice, setCreatedInvoice] = useState6("");
+  const [isCreatingInvoice, setIsCreatingInvoice] = useState6(false);
+  const [invoiceError, setInvoiceError] = useState6(null);
+  useEffect6(() => {
+    if (nodeError) {
+      onError?.({ scope: "node", message: nodeError });
+    }
+  }, [nodeError, onError]);
+  useEffect6(() => {
     if (payError) {
       onError?.({ scope: "payment", message: payError });
     }
   }, [onError, payError]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (paymentResult) {
       onPaymentResult?.(paymentResult);
     }
@@ -813,7 +3129,7 @@ function FiberPayQuickCard(props) {
     setInvoiceError(null);
     try {
       const created = await node.newInvoice({
-        amount: ONE_CKB_SHANNONS,
+        amount: ONE_CKB_SHANNONS2,
         currency: network === "mainnet" ? "Fibb" : "Fibt",
         description: "FiberPay QuickCard invoice"
       });
@@ -827,18 +3143,21 @@ function FiberPayQuickCard(props) {
       setIsCreatingInvoice(false);
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { style: { ...cardStyle, ...props.style }, className: props.className, children: [
-    /* @__PURE__ */ jsxs2("h3", { children: [
+  return /* @__PURE__ */ jsxs6("div", { style: { ...cardStyle, ...props.style }, className: props.className, children: [
+    /* @__PURE__ */ jsxs6("h3", { children: [
       title,
       " (",
       network,
       ")"
     ] }),
-    !nodeInfo ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      isPasskeySupported ? /* @__PURE__ */ jsx2("div", { style: rowWithMarginStyle, children: hasPasskeyConfigured ? /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void startWithPasskey(), children: "Login with Passkey" }) : /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void createPasskeyAndStart(passkeyUsername), children: "Register Passkey" }) }) : null,
-      /* @__PURE__ */ jsx2("label", { htmlFor: passwordInputId, children: "Password" }),
-      /* @__PURE__ */ jsxs2("div", { style: rowStyle, children: [
-        /* @__PURE__ */ jsx2(
+    !nodeInfo ? usesExternalFiber ? /* @__PURE__ */ jsxs6("p", { children: [
+      /* @__PURE__ */ jsx8("strong", { children: "Connection required:" }),
+      " connect the shared node first, then return here to create or pay invoices."
+    ] }) : /* @__PURE__ */ jsxs6(Fragment6, { children: [
+      isPasskeySupported ? /* @__PURE__ */ jsx8("div", { style: rowWithMarginStyle, children: hasPasskeyConfigured ? /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void startWithPasskey(), children: "Login with Passkey" }) : /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void createPasskeyAndStart(passkeyUsername), children: "Register Passkey" }) }) : null,
+      /* @__PURE__ */ jsx8("label", { htmlFor: passwordInputId, children: "Password" }),
+      /* @__PURE__ */ jsxs6("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx8(
           "input",
           {
             id: passwordInputId,
@@ -850,31 +3169,31 @@ function FiberPayQuickCard(props) {
             placeholder: "Password"
           }
         ),
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void startWithPassword(password), children: "Start with Password" })
+        /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void startWithPassword(password), children: "Start with Password" })
       ] })
-    ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsxs2("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "State:" }),
+    ] }) : /* @__PURE__ */ jsxs6(Fragment6, { children: [
+      /* @__PURE__ */ jsxs6("p", { children: [
+        /* @__PURE__ */ jsx8("strong", { children: "State:" }),
         " ",
         state
       ] }),
-      /* @__PURE__ */ jsxs2("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Pubkey:" }),
+      /* @__PURE__ */ jsxs6("p", { children: [
+        /* @__PURE__ */ jsx8("strong", { children: "Pubkey:" }),
         " ",
         nodeInfo.pubkey
       ] }),
-      /* @__PURE__ */ jsxs2("div", { style: rowWithMarginStyle, children: [
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void createInvoice(), disabled: isCreatingInvoice, children: isCreatingInvoice ? "Creating..." : "Create Invoice (1 CKB)" }),
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void stop(), children: "Stop Node" })
+      /* @__PURE__ */ jsxs6("div", { style: rowWithMarginStyle, children: [
+        /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void createInvoice(), disabled: isCreatingInvoice, children: isCreatingInvoice ? "Creating..." : "Create Invoice (1 CKB)" }),
+        /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void stop(), children: "Stop Node" })
       ] }),
-      createdInvoice ? /* @__PURE__ */ jsxs2("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Created invoice:" }),
+      createdInvoice ? /* @__PURE__ */ jsxs6("p", { children: [
+        /* @__PURE__ */ jsx8("strong", { children: "Created invoice:" }),
         " ",
         createdInvoice
       ] }) : null,
-      /* @__PURE__ */ jsx2("label", { htmlFor: invoiceInputId, children: "Invoice" }),
-      /* @__PURE__ */ jsxs2("div", { style: rowStyle, children: [
-        /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx8("label", { htmlFor: invoiceInputId, children: "Invoice" }),
+      /* @__PURE__ */ jsxs6("div", { style: rowStyle, children: [
+        /* @__PURE__ */ jsx8(
           "input",
           {
             id: invoiceInputId,
@@ -884,26 +3203,26 @@ function FiberPayQuickCard(props) {
             placeholder: "Paste invoice to pay"
           }
         ),
-        /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => void payInvoice(invoiceInput), disabled: isPaying, children: isPaying ? "Paying..." : "Pay" })
+        /* @__PURE__ */ jsx8("button", { type: "button", onClick: () => void payInvoice(invoiceInput), disabled: isPaying, children: isPaying ? "Paying..." : "Pay" })
       ] }),
-      paymentResult ? /* @__PURE__ */ jsxs2("p", { children: [
-        /* @__PURE__ */ jsx2("strong", { children: "Payment:" }),
+      paymentResult ? /* @__PURE__ */ jsxs6("p", { children: [
+        /* @__PURE__ */ jsx8("strong", { children: "Payment:" }),
         " ",
         paymentResult.status
       ] }) : null
     ] }),
-    nodeError ? /* @__PURE__ */ jsxs2("p", { style: { color: "#b91c1c" }, children: [
-      /* @__PURE__ */ jsx2("strong", { children: "Node error:" }),
+    nodeError ? /* @__PURE__ */ jsxs6("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx8("strong", { children: "Node error:" }),
       " ",
       nodeError
     ] }) : null,
-    payError ? /* @__PURE__ */ jsxs2("p", { style: { color: "#b91c1c" }, children: [
-      /* @__PURE__ */ jsx2("strong", { children: "Payment error:" }),
+    payError ? /* @__PURE__ */ jsxs6("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx8("strong", { children: "Payment error:" }),
       " ",
       payError
     ] }) : null,
-    invoiceError ? /* @__PURE__ */ jsxs2("p", { style: { color: "#b91c1c" }, children: [
-      /* @__PURE__ */ jsx2("strong", { children: "Invoice error:" }),
+    invoiceError ? /* @__PURE__ */ jsxs6("p", { style: { color: "#b91c1c" }, children: [
+      /* @__PURE__ */ jsx8("strong", { children: "Invoice error:" }),
       " ",
       invoiceError
     ] }) : null
@@ -918,12 +3237,12 @@ import {
   scriptToAddress
 } from "@fiber-pay/sdk/browser";
 import {
-  useCallback as useCallback4,
-  useEffect as useEffect5,
-  useRef as useRef4,
-  useState as useState5
+  useCallback as useCallback7,
+  useEffect as useEffect7,
+  useRef as useRef6,
+  useState as useState7
 } from "react";
-import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function truncateMiddle(str, left = 8, right = 8) {
   if (str.length <= left + right + 3) return str;
   return `${str.slice(0, left)}\u2026${str.slice(-right)}`;
@@ -961,7 +3280,7 @@ async function fetchNodeStats(node, network) {
     externalFunding: false
   };
 }
-var styles2 = {
+var styles3 = {
   root: {
     fontFamily: "system-ui, -apple-system, sans-serif",
     fontSize: "0.875rem",
@@ -1090,7 +3409,7 @@ var STATUS_COLORS = {
   error: { bg: "rgba(239,68,68,0.1)", fg: "#dc2626", dot: "#ef4444" }
 };
 function CopyIcon() {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs7(
     "svg",
     {
       width: "12",
@@ -1103,26 +3422,26 @@ function CopyIcon() {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx3("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx3("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+        /* @__PURE__ */ jsx9("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx9("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
       ]
     }
   );
 }
 function InfoRow({ label, value, copyable }) {
-  return /* @__PURE__ */ jsxs3("div", { style: styles2.infoRow, children: [
-    /* @__PURE__ */ jsx3("span", { style: styles2.infoLabel, children: label }),
-    /* @__PURE__ */ jsxs3("div", { style: styles2.infoValueWrapper, children: [
-      /* @__PURE__ */ jsx3("span", { style: styles2.infoValue, children: truncateMiddle(value, 6, 6) }),
-      copyable && /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs7("div", { style: styles3.infoRow, children: [
+    /* @__PURE__ */ jsx9("span", { style: styles3.infoLabel, children: label }),
+    /* @__PURE__ */ jsxs7("div", { style: styles3.infoValueWrapper, children: [
+      /* @__PURE__ */ jsx9("span", { style: styles3.infoValue, children: truncateMiddle(value, 6, 6) }),
+      copyable && /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
           onClick: () => copyToClipboard(value),
-          style: styles2.copyButton,
+          style: styles3.copyButton,
           title: "Copy to clipboard",
           "aria-label": `Copy ${label}`,
-          children: /* @__PURE__ */ jsx3(CopyIcon, {})
+          children: /* @__PURE__ */ jsx9(CopyIcon, {})
         }
       )
     ] })
@@ -1138,12 +3457,12 @@ function NodeInfoPanel(props) {
     className,
     style
   } = props;
-  const [stats, setStats] = useState5(null);
-  const [statsError, setStatsError] = useState5(null);
-  const [statsLoading, setStatsLoading] = useState5(false);
-  const cancelledRef = useRef4(false);
-  const [QRComponent, setQRComponent] = useState5(null);
-  useEffect5(() => {
+  const [stats, setStats] = useState7(null);
+  const [statsError, setStatsError] = useState7(null);
+  const [statsLoading, setStatsLoading] = useState7(false);
+  const cancelledRef = useRef6(false);
+  const [QRComponent, setQRComponent] = useState7(null);
+  useEffect7(() => {
     let cancelled = false;
     if (!showQrCode || renderQrCode) return;
     import("qrcode.react").then((mod) => {
@@ -1156,8 +3475,8 @@ function NodeInfoPanel(props) {
       cancelled = true;
     };
   }, [showQrCode, renderQrCode]);
-  const loadingRef = useRef4(false);
-  const loadStats = useCallback4(async () => {
+  const loadingRef = useRef6(false);
+  const loadStats = useCallback7(async () => {
     if (!node || node.state !== "running" || loadingRef.current) return;
     loadingRef.current = true;
     setStatsLoading(true);
@@ -1174,7 +3493,7 @@ function NodeInfoPanel(props) {
       if (!cancelledRef.current) setStatsLoading(false);
     }
   }, [node, network]);
-  useEffect5(() => {
+  useEffect7(() => {
     cancelledRef.current = false;
     if (!node || node.state !== "running") {
       setStats(null);
@@ -1189,21 +3508,21 @@ function NodeInfoPanel(props) {
     };
   }, [node, node?.state, pollInterval, loadStats]);
   if (!node) {
-    return /* @__PURE__ */ jsx3("div", { className, style: { ...styles2.root, ...style }, "data-fpay-node-info": "", children: /* @__PURE__ */ jsx3("div", { style: styles2.idle, children: "No node connected" }) });
+    return /* @__PURE__ */ jsx9("div", { className, style: { ...styles3.root, ...style }, "data-fpay-node-info": "", children: /* @__PURE__ */ jsx9("div", { style: styles3.idle, children: "No node connected" }) });
   }
   const nodeState = node.state;
   const statusColor = STATUS_COLORS[nodeState] ?? STATUS_COLORS.idle;
-  return /* @__PURE__ */ jsxs3("div", { className, style: { ...styles2.root, ...style }, "data-fpay-node-info": "", children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs7("div", { className, style: { ...styles3.root, ...style }, "data-fpay-node-info": "", children: [
+    /* @__PURE__ */ jsxs7(
       "div",
       {
         style: {
-          ...styles2.statusBadge,
+          ...styles3.statusBadge,
           backgroundColor: statusColor.bg,
           color: statusColor.fg
         },
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx9(
             "span",
             {
               style: {
@@ -1219,8 +3538,8 @@ function NodeInfoPanel(props) {
         ]
       }
     ),
-    statsLoading && !stats && /* @__PURE__ */ jsxs3("div", { style: styles2.loading, children: [
-      /* @__PURE__ */ jsxs3(
+    statsLoading && !stats && /* @__PURE__ */ jsxs7("div", { style: styles3.loading, children: [
+      /* @__PURE__ */ jsxs7(
         "svg",
         {
           width: "12",
@@ -1234,8 +3553,8 @@ function NodeInfoPanel(props) {
           role: "img",
           "aria-label": "Loading",
           children: [
-            /* @__PURE__ */ jsx3("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx9("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }),
+            /* @__PURE__ */ jsx9(
               "animateTransform",
               {
                 attributeName: "transform",
@@ -1251,22 +3570,22 @@ function NodeInfoPanel(props) {
       ),
       "Loading\u2026"
     ] }),
-    statsError && /* @__PURE__ */ jsx3("div", { style: styles2.errorBox, children: statsError }),
-    stats && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-      /* @__PURE__ */ jsx3(InfoRow, { label: "Pubkey", value: stats.pubkey, copyable: true }),
-      stats.externalFunding ? /* @__PURE__ */ jsx3("div", { style: { padding: "0.25rem 0", fontSize: "0.75rem", color: "#6b7280" }, children: "External funding mode" }) : stats.ckbAddress ? /* @__PURE__ */ jsx3(InfoRow, { label: "CKB Address", value: stats.ckbAddress, copyable: true }) : null,
-      /* @__PURE__ */ jsxs3("div", { style: styles2.statsGrid, children: [
-        /* @__PURE__ */ jsxs3("div", { style: styles2.statCard, children: [
-          /* @__PURE__ */ jsx3("div", { style: styles2.statLabel, children: "Peers" }),
-          /* @__PURE__ */ jsx3("div", { style: styles2.statValue, children: stats.peers })
+    statsError && /* @__PURE__ */ jsx9("div", { style: styles3.errorBox, children: statsError }),
+    stats && /* @__PURE__ */ jsxs7(Fragment7, { children: [
+      /* @__PURE__ */ jsx9(InfoRow, { label: "Pubkey", value: stats.pubkey, copyable: true }),
+      stats.externalFunding ? /* @__PURE__ */ jsx9("div", { style: { padding: "0.25rem 0", fontSize: "0.75rem", color: "#6b7280" }, children: "External funding mode" }) : stats.ckbAddress ? /* @__PURE__ */ jsx9(InfoRow, { label: "CKB Address", value: stats.ckbAddress, copyable: true }) : null,
+      /* @__PURE__ */ jsxs7("div", { style: styles3.statsGrid, children: [
+        /* @__PURE__ */ jsxs7("div", { style: styles3.statCard, children: [
+          /* @__PURE__ */ jsx9("div", { style: styles3.statLabel, children: "Peers" }),
+          /* @__PURE__ */ jsx9("div", { style: styles3.statValue, children: stats.peers })
         ] }),
-        /* @__PURE__ */ jsxs3("div", { style: styles2.statCard, children: [
-          /* @__PURE__ */ jsx3("div", { style: styles2.statLabel, children: "Channels" }),
-          /* @__PURE__ */ jsx3("div", { style: styles2.statValue, children: stats.channels })
+        /* @__PURE__ */ jsxs7("div", { style: styles3.statCard, children: [
+          /* @__PURE__ */ jsx9("div", { style: styles3.statLabel, children: "Channels" }),
+          /* @__PURE__ */ jsx9("div", { style: styles3.statValue, children: stats.channels })
         ] })
       ] }),
-      showQrCode && stats.ckbAddress && /* @__PURE__ */ jsxs3("div", { style: styles2.qrContainer, children: [
-        renderQrCode ? renderQrCode(stats.ckbAddress) : QRComponent ? /* @__PURE__ */ jsx3(
+      showQrCode && stats.ckbAddress && /* @__PURE__ */ jsxs7("div", { style: styles3.qrContainer, children: [
+        renderQrCode ? renderQrCode(stats.ckbAddress) : QRComponent ? /* @__PURE__ */ jsx9(
           QRComponent,
           {
             value: stats.ckbAddress,
@@ -1274,11 +3593,11 @@ function NodeInfoPanel(props) {
             bgColor: "transparent",
             fgColor: "currentColor"
           }
-        ) : /* @__PURE__ */ jsx3("div", { style: { fontSize: "0.625rem", color: "#9ca3af" }, children: "Install qrcode.react for QR code" }),
-        /* @__PURE__ */ jsx3("span", { style: styles2.qrCaption, children: "Scan to deposit CKB" }),
-        /* @__PURE__ */ jsxs3("div", { style: styles2.balanceRow, children: [
-          /* @__PURE__ */ jsx3("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: "Balance" }),
-          /* @__PURE__ */ jsxs3(
+        ) : /* @__PURE__ */ jsx9("div", { style: { fontSize: "0.625rem", color: "#9ca3af" }, children: "Install qrcode.react for QR code" }),
+        /* @__PURE__ */ jsx9("span", { style: styles3.qrCaption, children: "Scan to deposit CKB" }),
+        /* @__PURE__ */ jsxs7("div", { style: styles3.balanceRow, children: [
+          /* @__PURE__ */ jsx9("span", { style: { fontSize: "0.75rem", color: "#6b7280" }, children: "Balance" }),
+          /* @__PURE__ */ jsxs7(
             "span",
             {
               style: {
@@ -1298,10 +3617,11 @@ function NodeInfoPanel(props) {
   ] });
 }
 export {
-  ChannelState,
+  ChannelState3 as ChannelState,
   ConfigBuilder2 as ConfigBuilder,
   ConnectButton,
   FiberBrowserNode2 as FiberBrowserNode,
+  FiberNodeButton,
   FiberPayQuickCard,
   FiberRpcError,
   NodeInfoPanel,
@@ -1309,14 +3629,15 @@ export {
   PasswordCredentialProvider2 as PasswordCredentialProvider,
   RawKeyCredentialProvider2 as RawKeyCredentialProvider,
   ckbHash,
-  ckbToShannons,
+  ckbToShannons2 as ckbToShannons,
   derivePublicKey,
   formatShannonsAsCkb2 as formatShannonsAsCkb,
   fromHex,
   getLockBalanceShannons2 as getLockBalanceShannons,
   scriptToAddress2 as scriptToAddress,
-  shannonsToCkb,
+  shannonsToCkb2 as shannonsToCkb,
   toHex,
+  useChannelOpenFlow,
   useFiberNode,
   useFiberPayment
 };