@openreceive/react 0.1.0 → 0.2.1

package/dist/index.js

@@ -1,919 +1,3171 @@
+// src/checkout.ts
+import {
+  createLightningInvoiceDecodeUrl as createLightningInvoiceDecodeUrl2,
+  enterCheckoutResumePath,
+  mergeAttemptIntoCheckout,
+  mergeAttemptIntoSnapshot,
+  OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3,
+  OPENRECEIVE_DEFAULT_PREFIX,
+  checkoutLabels as checkoutLabels6,
+  orClasses as orClasses7,
+  prepareCheckout,
+  requestCheckout,
+  validateCheckoutProps
+} from "@openreceive/browser/headless";
+import * as React10 from "react";
+
+// src/checkout-session.ts
+import {
+  createCheckoutSession
+} from "@openreceive/browser/headless";
 import * as React from "react";
-import { OPENRECEIVE_COPY_FEEDBACK_MS, OPENRECEIVE_COUNTRY_STORAGE_KEY, OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES, OPENRECEIVE_THEME_STORAGE_KEY, copyInvoice as copyInvoiceHelper, createCheckoutController, createCheckoutDisplayModel, createCheckoutSnapshotFromDisplayData, createCheckoutStatusModel, createCheckoutStateFromDisplayData, createOpenReceivePaymentWizardModel, createOpenReceivePaymentWizardController, createCheckoutProviderCopyEvent, createOpenReceiveWizardRouteAssetDisplays, createOpenReceiveWizardRouteDisplays, createQrSvg, createOpenReceiveThemeModel, createOpenReceiveTransientFeedbackController, getOpenReceiveDefaultCountryCode, getOpenReceivePaymentMethodIcon, getOpenReceiveWizardEmptyMessage, openReceiveCheckoutLabels, openReceivePaymentMethods, openWallet as openWalletHelper, readOpenReceiveThemePreference, status as deriveStatus, writeOpenReceiveThemePreference } from "@openreceive/browser/internal";
-const DEFAULT_LOOKUP_URL = "/openreceive/v1/invoices/lookup";
-function useOpenReceiveTransientValue(resetValue, delayMs = OPENRECEIVE_COPY_FEEDBACK_MS) {
-    const [value, setValue] = React.useState(resetValue);
-    const controller = React.useRef(null);
-    React.useEffect(() => {
-        controller.current?.clear();
-        controller.current = createOpenReceiveTransientFeedbackController({
-            resetValue,
-            delayMs,
-            onValue: setValue
-        });
-        return () => controller.current?.clear();
-    }, [resetValue, delayMs]);
-    const showValue = React.useCallback((nextValue) => {
-        if (controller.current === null) {
-            setValue(nextValue);
-            return;
-        }
-        controller.current.show(nextValue);
-    }, []);
-    return [value, showValue];
-}
-function toCheckoutDisplayData(invoice) {
-    return {
-        invoice_id: invoice.invoice_id,
-        invoice: invoice.invoice,
-        ...(invoice.payment_hash === undefined ? {} : { payment_hash: invoice.payment_hash }),
-        ...(invoice.amount_msats === undefined ? {} : { amount_msats: invoice.amount_msats }),
-        ...(invoice.fiat_quote === undefined ? {} : { fiat_quote: invoice.fiat_quote }),
-        ...(invoice.transaction_state === undefined
-            ? {}
-            : { transaction_state: invoice.transaction_state }),
-        ...(invoice.workflow_state === undefined ? {} : { workflow_state: invoice.workflow_state }),
-        ...(invoice.expires_at === undefined ? {} : { expires_at: invoice.expires_at }),
-        ...(invoice.settled_at === undefined ? {} : { settled_at: invoice.settled_at })
-    };
+function useCheckoutSession(options) {
+  const [, rerender] = React.useReducer((count) => count + 1, 0);
+  const optionsRef = React.useRef(options);
+  optionsRef.current = options;
+  const sessionRef = React.useRef(void 0);
+  if (sessionRef.current === void 0) {
+    sessionRef.current = createCheckoutSession({
+      snapshot: () => optionsRef.current.snapshot(),
+      reference: () => optionsRef.current.reference(),
+      requestCheckout: (reference) => optionsRef.current.requestCheckout?.(reference),
+      onSnapshot: (snapshot) => optionsRef.current.onSnapshot?.(snapshot),
+      swapPrefix: () => optionsRef.current.swapPrefix?.(),
+      fetch: () => optionsRef.current.fetch?.(),
+      swapSelection: {
+        started: () => optionsRef.current.swapSelection?.started(),
+        setStarted: (invoice) => optionsRef.current.swapSelection?.setStarted(invoice),
+        dismissedInvoiceId: () => optionsRef.current.swapSelection?.dismissedInvoiceId() ?? null,
+        setDismissedInvoiceId: (invoiceId) => optionsRef.current.swapSelection?.setDismissedInvoiceId(invoiceId),
+        setSelectedAsset: (payInAsset) => optionsRef.current.swapSelection?.setSelectedAsset(payInAsset)
+      },
+      onSwapStarted: (invoice) => optionsRef.current.onSwapStarted?.(invoice),
+      get logger() {
+        return optionsRef.current.logger;
+      },
+      onError: (error) => optionsRef.current.onError(error),
+      onChange: rerender
+    });
+  }
+  return sessionRef.current;
 }
-function toCheckoutViewModel(display, currentStatus) {
-    return {
-        invoice_id: display.invoice_id,
-        invoice: display.invoice,
-        ...(display.payment_hash === undefined ? {} : { payment_hash: display.payment_hash }),
-        ...(display.amount_msats === undefined ? {} : { amount_msats: display.amount_msats }),
-        ...(display.fiat_quote === undefined ? {} : { fiat_quote: display.fiat_quote }),
-        ...(display.expires_at === undefined ? {} : { expires_at: display.expires_at }),
-        ...(display.settled_at === undefined ? {} : { settled_at: display.settled_at }),
-        lightningUri: display.lightningUri,
-        ...(display.amountLabel === undefined ? {} : { amountLabel: display.amountLabel }),
-        ...(display.fiatLabel === undefined ? {} : { fiatLabel: display.fiatLabel }),
-        ...(display.paymentHashLabel === undefined ? {} : { paymentHashLabel: display.paymentHashLabel }),
-        status: currentStatus
-    };
+
+// src/components.ts
+import * as React3 from "react";
+import {
+  OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
+  copyInvoice as copyInvoiceHelper,
+  createCheckoutStatusModel,
+  createPaymentDataEntries,
+  createQrSvg,
+  formatAmountCaption,
+  checkoutLabels,
+  openWallet as openWalletHelper,
+  orClasses
+} from "@openreceive/browser/headless";
+
+// src/hooks.ts
+import * as React2 from "react";
+import {
+  OPENRECEIVE_COPY_FEEDBACK_MS,
+  createTickingValueController,
+  createTransientFeedbackController
+} from "@openreceive/browser/headless";
+function useTransientValue(resetValue, delayMs = OPENRECEIVE_COPY_FEEDBACK_MS) {
+  const [value, setValue] = React2.useState(resetValue);
+  const controller = React2.useRef(null);
+  React2.useEffect(() => {
+    controller.current?.clear();
+    controller.current = createTransientFeedbackController({
+      resetValue,
+      delayMs,
+      onValue: setValue
+    });
+    return () => controller.current?.clear();
+  }, [resetValue, delayMs]);
+  const showValue = React2.useCallback((nextValue) => {
+    if (controller.current === null) {
+      setValue(nextValue);
+      return;
+    }
+    controller.current.show(nextValue);
+  }, []);
+  return [value, showValue];
 }
-export function createCheckoutViewModel(data) {
-    return toCheckoutViewModel(createCheckoutDisplayModel(toCheckoutDisplayData(data.invoice)), deriveStatus(data.invoice));
-}
-function resolveCheckoutLookupUrl(options) {
-    if (options.polling === false || options.lookupUrl === false)
-        return undefined;
-    return options.lookupUrl ?? DEFAULT_LOOKUP_URL;
-}
-export function useCheckout(options) {
-    const [copied, showCopied] = useOpenReceiveTransientValue(false);
-    const displayData = React.useMemo(() => toCheckoutDisplayData(options.invoice), [options.invoice]);
-    const model = React.useMemo(() => toCheckoutViewModel(createCheckoutDisplayModel(displayData), deriveStatus(options.invoice)), [
-        displayData,
-        options.invoice
-    ]);
-    const snapshot = React.useMemo(() => createCheckoutSnapshotFromDisplayData(displayData), [
-        displayData
-    ]);
-    const [state, setState] = React.useState(() => createCheckoutStateFromDisplayData(displayData, {
-        logger: options.logger
-    }));
-    const controllerRef = React.useRef(null);
-    const onStateRef = React.useRef(options.onState);
-    onStateRef.current = options.onState;
-    const onPaidRef = React.useRef(options.onPaid);
-    onPaidRef.current = options.onPaid;
-    const paidAnnouncementRef = React.useRef({
-        invoiceId: snapshot.invoice_id,
-        fired: false
+function useTickingUnixSeconds(active) {
+  const [now, setNow] = React2.useState(void 0);
+  React2.useEffect(() => {
+    if (!active) {
+      setNow(void 0);
+      return;
+    }
+    const controller = createTickingValueController({
+      onValue: setNow
     });
-    const logContext = React.useMemo(() => getCheckoutLogContext(displayData), [
-        displayData
-    ]);
-    React.useEffect(() => {
-        const lookupInvoice = options.polling === false ? undefined : options.lookupInvoice;
-        const lookupUrl = resolveCheckoutLookupUrl(options);
-        const controller = createCheckoutController({
-            snapshot,
-            ...(lookupInvoice === undefined ? {} : { lookupInvoice }),
-            ...(lookupUrl === undefined ? {} : { lookupUrl }),
-            ...(options.refreshInvoice === undefined ? {} : { refreshInvoice: options.refreshInvoice }),
-            ...(options.refreshUrl === undefined ? {} : { refreshUrl: options.refreshUrl }),
-            ...(options.refreshHeaders === undefined ? {} : { refreshHeaders: options.refreshHeaders }),
-            ...(options.refreshIdempotencyKey === undefined
-                ? {}
-                : { refreshIdempotencyKey: options.refreshIdempotencyKey }),
-            ...(options.refreshReason === undefined ? {} : { refreshReason: options.refreshReason }),
-            pollIntervalMs: options.pollIntervalMs,
-            logger: options.logger,
-            onError: options.onError,
-            clipboard: options.clipboard,
-            open: options.open,
-            onState: (nextState) => {
-                setState(nextState);
-                onStateRef.current?.(nextState);
-            }
-        });
-        controllerRef.current = controller;
-        controller.start();
-        return () => {
-            controller.stop();
-            if (controllerRef.current === controller)
-                controllerRef.current = null;
-        };
-    }, [
-        snapshot,
-        options.lookupInvoice,
-        options.lookupUrl,
-        options.polling,
-        options.refreshInvoice,
-        options.refreshUrl,
-        options.refreshHeaders,
-        options.refreshIdempotencyKey,
-        options.refreshReason,
-        options.pollIntervalMs,
-        options.logger,
-        options.onError,
-        options.clipboard,
-        options.open
-    ]);
-    const publicStatus = deriveStatus(state);
-    const richStatus = createCheckoutStatusModel(state);
-    React.useEffect(() => {
-        const announced = paidAnnouncementRef.current;
-        if (announced.invoiceId !== snapshot.invoice_id) {
-            paidAnnouncementRef.current = {
-                invoiceId: snapshot.invoice_id,
-                fired: false
-            };
-        }
-    }, [snapshot.invoice_id]);
-    React.useEffect(() => {
-        const announced = paidAnnouncementRef.current;
-        if (publicStatus !== "paid" || announced.fired)
-            return;
-        paidAnnouncementRef.current = {
-            invoiceId: snapshot.invoice_id,
-            fired: true
-        };
-        // UI hint only; server-side fulfillment must use the backend onPaid hook.
-        onPaidRef.current?.();
-    }, [publicStatus, snapshot.invoice_id]);
-    const copyInvoice = React.useCallback(async () => {
-        try {
-            const controller = controllerRef.current;
-            if (controller === null) {
-                await copyInvoiceHelper({
-                    invoice: displayData.invoice,
-                    clipboard: options.clipboard,
-                    logger: options.logger,
-                    logContext
-                });
-            }
-            else {
-                await controller.copyInvoice();
-            }
-            showCopied(true);
-        }
-        catch (error) {
-            options.onError?.(error);
-            throw error;
-        }
-    }, [logContext, displayData.invoice, options.clipboard, options.logger, options.onError, showCopied]);
-    const openWallet = React.useCallback(() => {
-        try {
-            const controller = controllerRef.current;
-            return controller === null
-                ? openWalletHelper({
-                    invoice: displayData.invoice,
-                    open: options.open,
-                    logger: options.logger,
-                    logContext
-                })
-                : controller.openWallet();
-        }
-        catch (error) {
-            options.onError?.(error);
-            throw error;
-        }
-    }, [logContext, displayData.invoice, options.open, options.logger, options.onError]);
-    const reloadState = React.useCallback(async () => {
-        try {
-            const next = await controllerRef.current?.reloadState();
-            if (next !== undefined)
-                setState(next);
-        }
-        catch (error) {
-            options.onError?.(error);
-            throw error;
-        }
-    }, [options.onError]);
-    const retry = React.useCallback(async () => {
-        try {
-            const next = await controllerRef.current?.retry();
-            if (next !== undefined)
-                setState(next);
-        }
-        catch (error) {
-            options.onError?.(error);
-            throw error;
-        }
-    }, [options.onError]);
-    const refreshExpiredInvoice = React.useCallback(async () => {
-        try {
-            const next = await controllerRef.current?.refreshExpiredInvoice();
-            if (next !== undefined)
-                setState(next);
-        }
-        catch (error) {
-            options.onError?.(error);
-            throw error;
-        }
-    }, [options.onError]);
-    const cancel = React.useCallback(() => {
-        const next = controllerRef.current?.cancel();
-        if (next !== undefined)
-            setState(next);
-    }, []);
-    return {
-        ...model,
-        copied,
-        status: publicStatus,
-        expiresInSeconds: richStatus.expiresInSeconds,
-        countdownLabel: richStatus.countdownLabel,
-        countdownPrefix: richStatus.countdownPrefix,
-        statusTitle: richStatus.title,
-        statusDetail: richStatus.detail,
-        waiting: richStatus.waiting,
-        reloadState,
-        retry,
-        refreshExpiredInvoice,
-        cancel,
-        copyInvoice,
-        openWallet
-    };
+    controller.start();
+    return () => controller.stop();
+  }, [active]);
+  return now;
 }
-const CheckoutContext = React.createContext(null);
-export function useCheckoutContext() {
-    const checkout = React.useContext(CheckoutContext);
-    if (checkout === null) {
-        throw new Error("useCheckoutContext must be used within CheckoutProvider.");
+
+// src/utils.ts
+function joinClassNames(...values) {
+  const joined = values.filter(Boolean).join(" ");
+  return joined === "" ? void 0 : joined;
+}
+function selectAllInputHandlers() {
+  const selectAll = (input) => {
+    input.select();
+  };
+  return {
+    onFocus: (event) => {
+      selectAll(event.currentTarget);
+    },
+    onClick: (event) => {
+      selectAll(event.currentTarget);
+    },
+    onMouseUp: (event) => {
+      event.preventDefault();
+    },
+    onSelect: (event) => {
+      const input = event.currentTarget;
+      if (input.selectionStart !== 0 || input.selectionEnd !== input.value.length) {
+        input.setSelectionRange(0, input.value.length);
+      }
     }
-    return checkout;
-}
-export function CheckoutProvider(props) {
-    const { children, ...options } = props;
-    const checkout = useCheckout(options);
-    const content = typeof children === "function" ? children(checkout) : children;
-    return React.createElement(CheckoutContext.Provider, { value: checkout }, content);
-}
-export function QRCode(props) {
-    const { invoice, encoder, width = 256, onError, ...divProps } = props;
-    const [svg, setSvg] = React.useState("");
-    React.useEffect(() => {
-        let cancelled = false;
-        createQrSvg(invoice, { encoder, width })
-            .then((nextSvg) => {
-            if (!cancelled)
-                setSvg(nextSvg);
-        })
-            .catch((error) => {
-            if (!cancelled)
-                onError?.(error);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [invoice, encoder, width, onError]);
-    return React.createElement("div", {
-        ...divProps,
-        [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.qr]: "",
-        dangerouslySetInnerHTML: {
-            __html: svg
-        }
+  };
+}
+async function copyText(text, clipboard) {
+  const target = clipboard ?? globalThis.navigator?.clipboard;
+  if (target === void 0) throw new Error("Clipboard API is unavailable.");
+  await target.writeText(text);
+}
+function getCheckoutLogContext(data) {
+  return {
+    ...data.invoice_id === void 0 ? {} : { invoice_id: data.invoice_id },
+    ...data.payment_hash === void 0 ? {} : { payment_hash: data.payment_hash },
+    ...data.amount_msats === void 0 ? {} : { amount_msats: data.amount_msats },
+    ...data.transaction_state === void 0 ? {} : { transaction_state: data.transaction_state },
+    ...data.workflow_state === void 0 ? {} : { workflow_state: data.workflow_state }
+  };
+}
+
+// src/components.ts
+function ClipboardIcon() {
+  return React3.createElement(
+    "svg",
+    {
+      className: orClasses.copyIcon,
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    React3.createElement("rect", {
+      x: 5,
+      y: 5,
+      width: 8,
+      height: 9,
+      rx: 1.5,
+      stroke: "currentColor",
+      strokeWidth: 1.5
+    }),
+    React3.createElement("path", {
+      d: "M3.5 11V3.5A1.5 1.5 0 0 1 5 2h5.5",
+      stroke: "currentColor",
+      strokeWidth: 1.5,
+      strokeLinecap: "round"
+    })
+  );
+}
+function QRCode(props) {
+  const { invoice, encoder, width = 256, onError, ...divProps } = props;
+  const [svg, setSvg] = React3.useState("");
+  const onErrorRef = React3.useRef(onError);
+  onErrorRef.current = onError;
+  React3.useEffect(() => {
+    let cancelled = false;
+    createQrSvg(invoice, { encoder, width }).then((nextSvg) => {
+      if (!cancelled) setSvg(nextSvg);
+    }).catch((error) => {
+      if (!cancelled) onErrorRef.current?.(error);
     });
+    return () => {
+      cancelled = true;
+    };
+  }, [invoice, encoder, width]);
+  return React3.createElement("div", {
+    ...divProps,
+    [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.qr]: "",
+    dangerouslySetInnerHTML: {
+      __html: svg
+    }
+  });
 }
-export function CopyInvoiceButton(props) {
-    const { invoice, copyInvoice, clipboard, logger, onCopied, onError, onClick, copiedLabel = openReceiveCheckoutLabels.copied, ButtonComponent = "button", children, type = "button", ...buttonProps } = props;
-    const [copied, showCopied] = useOpenReceiveTransientValue(false);
-    return React.createElement(ButtonComponent, {
-        ...buttonProps,
-        type,
-        onClick: async (event) => {
-            onClick?.(event);
-            if (event.defaultPrevented)
-                return;
-            try {
-                if (copyInvoice === undefined) {
-                    await copyInvoiceHelper({ invoice, clipboard, logger });
-                }
-                else {
-                    await copyInvoice();
-                }
-                showCopied(true);
-                onCopied?.();
-            }
-            catch (error) {
-                onError?.(error);
-            }
+function CopyInvoiceButton(props) {
+  const {
+    invoice,
+    copyInvoice,
+    clipboard,
+    logger,
+    onCopied,
+    onError,
+    onClick,
+    copiedLabel = checkoutLabels.copied,
+    ButtonComponent = "button",
+    children,
+    type = "button",
+    className,
+    ...buttonProps
+  } = props;
+  const [copied, showCopied] = useTransientValue(false);
+  return React3.createElement(
+    ButtonComponent,
+    {
+      ...buttonProps,
+      className: joinClassNames(orClasses.btn, className),
+      type,
+      onClick: async (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        try {
+          if (copyInvoice === void 0) {
+            await copyInvoiceHelper({ invoice, clipboard, logger });
+          } else {
+            await copyInvoice();
+          }
+          showCopied(true);
+          onCopied?.();
+        } catch (error) {
+          onError?.(error);
         }
-    }, children ?? (copied ? copiedLabel : openReceiveCheckoutLabels.copyInvoice));
-}
-export function OpenWalletButton(props) {
-    const { invoice, openWallet, open, logger, onOpened, onError, onClick, ButtonComponent = "button", children = openReceiveCheckoutLabels.openWallet, type = "button", ...buttonProps } = props;
-    return React.createElement(ButtonComponent, {
-        ...buttonProps,
-        type,
-        onClick: (event) => {
-            onClick?.(event);
-            if (event.defaultPrevented)
-                return;
-            try {
-                const uri = openWallet === undefined
-                    ? openWalletHelper({ invoice, open, logger })
-                    : openWallet();
-                onOpened?.(uri);
-            }
-            catch (error) {
-                onError?.(error);
-            }
+      }
+    },
+    children ?? React3.createElement(
+      React3.Fragment,
+      null,
+      React3.createElement(ClipboardIcon),
+      copied ? copiedLabel : checkoutLabels.copyInvoice
+    )
+  );
+}
+function OpenWalletButton(props) {
+  const {
+    invoice,
+    openWallet,
+    open,
+    logger,
+    onOpened,
+    onError,
+    onClick,
+    ButtonComponent = "button",
+    children = checkoutLabels.openWallet,
+    type = "button",
+    className,
+    ...buttonProps
+  } = props;
+  return React3.createElement(
+    ButtonComponent,
+    {
+      ...buttonProps,
+      className: joinClassNames(orClasses.btn, className),
+      type,
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        try {
+          const uri = openWallet === void 0 ? openWalletHelper({ invoice, open, logger }) : openWallet();
+          onOpened?.(uri);
+        } catch (error) {
+          onError?.(error);
         }
-    }, children);
-}
-export function PaymentState(props) {
-    const { state = "pending", ...spanProps } = props;
-    return React.createElement("span", {
-        ...spanProps,
-        [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.state]: state
-    }, state);
-}
-export function useTheme(options = {}) {
-    const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
-    const [theme, setThemeState] = React.useState(() => readOpenReceiveThemePreference({
-        storage: options.storage,
+      }
+    },
+    children
+  );
+}
+function PaymentState(props) {
+  const { state = "pending", className, ...spanProps } = props;
+  return React3.createElement(
+    "span",
+    {
+      ...spanProps,
+      className: joinClassNames(
+        state === "settled" ? orClasses.stateSettled : orClasses.statePending,
+        className
+      ),
+      [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.state]: state
+    },
+    state
+  );
+}
+function SettledCheckIcon() {
+  return React3.createElement(
+    "svg",
+    {
+      className: orClasses.settledIcon,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.8,
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    React3.createElement("path", {
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+    })
+  );
+}
+function PaymentData(props) {
+  const entries = createPaymentDataEntries(props.source);
+  if (entries.length === 0) return null;
+  return React3.createElement(
+    "details",
+    { className: joinClassNames(orClasses.paymentData, props.className) },
+    React3.createElement(
+      "summary",
+      { className: orClasses.paymentDataTitle },
+      checkoutLabels.viewPaymentData
+    ),
+    React3.createElement(
+      "div",
+      { className: orClasses.paymentDataBody },
+      entries.map(
+        (entry) => React3.createElement(
+          "div",
+          { key: entry.label, className: orClasses.paymentDataRow },
+          React3.createElement("span", { className: orClasses.paymentDataKey }, entry.label),
+          React3.createElement("p", { className: orClasses.paymentDataValue }, entry.value)
+        )
+      )
+    )
+  );
+}
+function WaitingState(props) {
+  const status = props.status ?? createCheckoutStatusModel({
+    phase: props.phase,
+    waiting: props.waiting ?? false
+  });
+  const title = props.statusTitle ?? status.title;
+  const titleRow = props.countdownLabel === void 0 ? React3.createElement("strong", { className: orClasses.paymentStatusTitle }, title) : React3.createElement(
+    "div",
+    { className: orClasses.swapWaitingTitle },
+    React3.createElement("strong", { className: orClasses.paymentStatusTitle }, title),
+    React3.createElement(
+      "strong",
+      { className: orClasses.swapCountdown },
+      props.countdownLabel
+    )
+  );
+  return React3.createElement(
+    "div",
+    {
+      // Settlement and status transitions are announced to assistive tech.
+      role: "status",
+      "aria-live": "polite",
+      className: joinClassNames(orClasses.paymentStatus, props.className)
+    },
+    status.waiting ? React3.createElement("span", {
+      className: orClasses.spinner,
+      "aria-hidden": "true"
+    }) : null,
+    props.settled ?? status.phase === "settled" ? React3.createElement(SettledCheckIcon, { key: "settled-icon" }) : null,
+    React3.createElement(
+      "div",
+      {
+        className: orClasses.paymentStatusBody
+      },
+      titleRow,
+      React3.createElement(
+        "span",
+        { className: orClasses.paymentStatusDetail },
+        props.statusDetail ?? status.detail
+      )
+    )
+  );
+}
+function InvoiceSummary(props) {
+  const {
+    amountLabel,
+    fiatLabel,
+    paymentHashLabel,
+    status,
+    PaymentStateComponent = PaymentState,
+    classNames,
+    className,
+    ...divProps
+  } = props;
+  return React3.createElement(
+    "div",
+    {
+      ...divProps,
+      className: joinClassNames(orClasses.meta, className),
+      [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.meta]: ""
+    },
+    amountLabel === void 0 ? null : React3.createElement(
+      "span",
+      {
+        className: joinClassNames(orClasses.metaItem, classNames?.amount)
+      },
+      amountLabel
+    ),
+    fiatLabel === void 0 ? null : React3.createElement(
+      "span",
+      {
+        className: joinClassNames(orClasses.metaItem, classNames?.fiat)
+      },
+      fiatLabel
+    ),
+    paymentHashLabel === void 0 ? null : React3.createElement(
+      "span",
+      {
+        className: joinClassNames(orClasses.metaItem, classNames?.paymentHash)
+      },
+      paymentHashLabel
+    ),
+    status === void 0 ? null : React3.createElement(PaymentStateComponent, {
+      state: status,
+      className: classNames?.paymentState
+    })
+  );
+}
+function SatsDetail(props) {
+  const { amountLabel, fiatLabel, fiatCurrency, className, ...divProps } = props;
+  const caption = formatAmountCaption({ amountLabel, fiatLabel, fiatCurrency });
+  if (caption === void 0) return null;
+  return React3.createElement(
+    "div",
+    {
+      ...divProps,
+      className: joinClassNames(orClasses.satsDetail, className)
+    },
+    caption
+  );
+}
+
+// src/theme.ts
+import * as React4 from "react";
+import {
+  OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES as OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2,
+  OPENRECEIVE_THEME_STORAGE_KEY,
+  createThemeModel,
+  orClasses as orClasses2,
+  readThemePreference,
+  writeThemePreference
+} from "@openreceive/browser/headless";
+var ThemeContext = React4.createContext(null);
+var storedThemeListeners = /* @__PURE__ */ new Set();
+var lastSetTheme = /* @__PURE__ */ new Map();
+function notifyStoredThemeChange() {
+  for (const listener of storedThemeListeners) listener();
+}
+function getSystemDark() {
+  return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
+}
+function getServerSystemDark() {
+  return false;
+}
+function subscribeStoredTheme(onStoreChange) {
+  storedThemeListeners.add(onStoreChange);
+  globalThis.addEventListener?.("storage", onStoreChange);
+  return () => {
+    storedThemeListeners.delete(onStoreChange);
+    globalThis.removeEventListener?.("storage", onStoreChange);
+  };
+}
+function subscribeSystemDark(onStoreChange) {
+  const media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+  media?.addEventListener?.("change", onStoreChange);
+  return () => media?.removeEventListener?.("change", onStoreChange);
+}
+function useLocalTheme(options = {}) {
+  const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
+  const storage = options.storage;
+  const defaultTheme = options.defaultTheme;
+  const theme = React4.useSyncExternalStore(
+    subscribeStoredTheme,
+    React4.useCallback(
+      () => readThemePreference({
+        storage,
         storageKey,
-        defaultTheme: options.defaultTheme
-    }));
-    const [systemDark, setSystemDark] = React.useState(() => globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false);
-    React.useEffect(() => {
-        const media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
-        if (media === undefined)
-            return undefined;
-        const update = () => setSystemDark(media.matches);
-        media.addEventListener?.("change", update);
-        return () => media.removeEventListener?.("change", update);
-    }, []);
-    const themeModel = createOpenReceiveThemeModel(theme, { systemDark });
-    const setTheme = React.useCallback((nextTheme) => {
-        setThemeState(nextTheme);
-        writeOpenReceiveThemePreference(nextTheme, {
-            storage: options.storage,
-            storageKey
-        });
-    }, [options.storage, storageKey]);
-    const toggleTheme = React.useCallback(() => {
-        setTheme(themeModel.nextTheme);
-    }, [setTheme, themeModel.nextTheme]);
-    return {
-        theme,
-        resolvedTheme: themeModel.resolvedTheme,
-        model: themeModel,
-        nextTheme: themeModel.nextTheme,
-        toggleLabel: themeModel.toggleLabel,
-        attributes: themeModel.attributes,
-        checkoutElementAttributes: themeModel.checkoutElementAttributes,
-        setTheme,
-        toggleTheme
-    };
+        defaultTheme: lastSetTheme.get(storageKey) ?? defaultTheme
+      }),
+      [storage, storageKey, defaultTheme]
+    ),
+    React4.useCallback(
+      () => (
+        // A host-supplied storage is readable on the server (that is how SSR theming is
+        // wired); the implicit browser localStorage is not, so fall back to the default.
+        storage === void 0 ? defaultTheme ?? "system" : readThemePreference({ storage, storageKey, defaultTheme })
+      ),
+      [storage, storageKey, defaultTheme]
+    )
+  );
+  const systemDark = React4.useSyncExternalStore(
+    subscribeSystemDark,
+    getSystemDark,
+    getServerSystemDark
+  );
+  const themeModel = createThemeModel(theme, { systemDark });
+  const setTheme = React4.useCallback(
+    (nextTheme) => {
+      lastSetTheme.set(storageKey, nextTheme);
+      writeThemePreference(nextTheme, {
+        storage,
+        storageKey
+      });
+      notifyStoredThemeChange();
+    },
+    [storage, storageKey]
+  );
+  const toggleTheme = React4.useCallback(() => {
+    setTheme(themeModel.nextTheme);
+  }, [setTheme, themeModel.nextTheme]);
+  return {
+    theme,
+    resolvedTheme: themeModel.resolvedTheme,
+    model: themeModel,
+    nextTheme: themeModel.nextTheme,
+    toggleLabel: themeModel.toggleLabel,
+    attributes: themeModel.attributes,
+    checkoutElementAttributes: themeModel.checkoutElementAttributes,
+    fromScope: false,
+    setTheme,
+    toggleTheme
+  };
 }
-export function ThemeToggle(props) {
-    const { theme, resolvedTheme, onThemeChange, ButtonComponent = "button", children, type = "button", onClick, ...buttonProps } = props;
-    const fallback = useTheme({
-        defaultTheme: theme
-    });
-    const activeTheme = resolvedTheme ?? fallback.resolvedTheme;
-    const themeModel = createOpenReceiveThemeModel(activeTheme);
-    const componentProps = {
-        ...buttonProps,
-        "aria-label": themeModel.toggleLabel,
-        className: joinClassNames("or-theme-toggle-button", `or-theme-toggle-${themeModel.resolvedTheme}`, buttonProps.className),
-        title: themeModel.toggleLabel,
-        type,
-        [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.themeToggle]: "",
-        onClick: (event) => {
-            onClick?.(event);
-            if (event.defaultPrevented)
-                return;
-            onThemeChange?.(themeModel.nextTheme);
-            if (onThemeChange === undefined)
-                fallback.setTheme(themeModel.nextTheme);
-        }
-    };
-    const defaultChildren = React.createElement(React.Fragment, null, React.createElement("span", {
-        "aria-hidden": true,
-        className: "or-theme-toggle-track"
-    }, React.createElement("span", {
-        className: "or-theme-toggle-icon or-theme-toggle-icon-light"
-    })), React.createElement("span", {
-        className: "or-theme-toggle-label"
-    }, themeModel.toggleLabel));
-    return React.createElement(ButtonComponent, componentProps, children ?? defaultChildren);
-}
-export function ThemeScope(props) {
-    const { as: Element = "div", defaultTheme, themeStorageKey, storage, themeToggle = false, topbarClassName, themeToggleClassName, ButtonComponent, children, ...elementProps } = props;
-    const theme = useTheme({
-        defaultTheme,
-        storageKey: themeStorageKey,
-        storage
-    });
-    const scopedChildren = typeof children === "function" ? children(theme) : children;
-    return React.createElement(Element, {
+function useTheme(options = {}) {
+  const scoped = React4.useContext(ThemeContext);
+  const local = useLocalTheme(options);
+  const storageKey = options.storageKey ?? OPENRECEIVE_THEME_STORAGE_KEY;
+  if (scoped !== null && options.storage === void 0 && (options.storageKey === void 0 || options.storageKey === storageKey) && options.defaultTheme === void 0) {
+    return { ...scoped, fromScope: true };
+  }
+  return local;
+}
+function ThemeToggle(props) {
+  const {
+    theme,
+    resolvedTheme,
+    onThemeChange,
+    ButtonComponent = "button",
+    children,
+    type = "button",
+    onClick,
+    ...buttonProps
+  } = props;
+  const fallback = useTheme({
+    defaultTheme: theme
+  });
+  const activeTheme = resolvedTheme ?? fallback.resolvedTheme;
+  const themeModel = createThemeModel(activeTheme);
+  const componentProps = {
+    ...buttonProps,
+    "aria-label": themeModel.toggleLabel,
+    className: joinClassNames(orClasses2.themeToggle, buttonProps.className),
+    title: themeModel.toggleLabel,
+    type,
+    [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES2.themeToggle]: "",
+    onClick: (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      onThemeChange?.(themeModel.nextTheme);
+      if (onThemeChange === void 0) fallback.setTheme(themeModel.nextTheme);
+    }
+  };
+  return React4.createElement(ButtonComponent, componentProps, children ?? themeModel.toggleLabel);
+}
+function ThemeScope(props) {
+  const {
+    as: Element = "div",
+    defaultTheme,
+    storageKey,
+    storage,
+    themeToggle = false,
+    topbarClassName,
+    themeToggleClassName,
+    ButtonComponent,
+    children,
+    ...elementProps
+  } = props;
+  const theme = useLocalTheme({
+    defaultTheme,
+    storageKey,
+    storage
+  });
+  const scopedChildren = typeof children === "function" ? children(theme) : children;
+  return React4.createElement(
+    ThemeContext.Provider,
+    { value: theme },
+    // Variadic children, not an array: an array child needs a key on every entry.
+    React4.createElement(
+      Element,
+      {
         ...elementProps,
         ...theme.attributes
-    }, [
-        themeToggle
-            ? React.createElement("div", {
-                className: topbarClassName,
-                key: "openreceive-theme-scope-toggle"
-            }, React.createElement(ThemeToggle, {
-                className: themeToggleClassName,
-                theme: theme.theme,
-                resolvedTheme: theme.resolvedTheme,
-                onThemeChange: theme.setTheme,
-                ButtonComponent
-            }))
-            : null,
-        scopedChildren
-    ]);
-}
-export function WaitingState(props) {
-    const status = props.status ??
-        createCheckoutStatusModel({
-            phase: props.phase,
-            waiting: props.waiting ?? false
-        });
-    return React.createElement("div", {
-        className: joinClassNames("or-payment-status", props.className)
-    }, status.waiting
-        ? React.createElement("span", {
-            className: "or-spinner",
-            "aria-hidden": "true"
+      },
+      themeToggle ? React4.createElement(
+        "div",
+        {
+          className: topbarClassName
+        },
+        React4.createElement(ThemeToggle, {
+          className: themeToggleClassName,
+          theme: theme.theme,
+          resolvedTheme: theme.resolvedTheme,
+          onThemeChange: theme.setTheme,
+          ButtonComponent
         })
-        : null, React.createElement("div", null, React.createElement("strong", null, props.statusTitle ?? status.title), React.createElement("span", null, props.statusDetail ?? status.detail)));
-}
-export function PaymentWizard(props) {
-    const countryStorageKey = props.countryStorageKey ?? OPENRECEIVE_COUNTRY_STORAGE_KEY;
-    const [selection, setSelection] = React.useState(() => createOpenReceivePaymentWizardController({
-        storageKey: countryStorageKey,
-        defaultCountryCode: getOpenReceiveDefaultCountryCode()
-    }).getSelection());
-    const [activeTutorial, setActiveTutorial] = React.useState(null);
-    const updateWizardSelection = React.useCallback((apply) => {
-        setSelection((current) => apply(createOpenReceivePaymentWizardController({
-            selection: current,
-            storageKey: countryStorageKey
-        })));
-    }, [countryStorageKey]);
-    const model = createOpenReceivePaymentWizardModel(selection);
-    const { wizard } = model;
-    const routeAssetDisplays = createOpenReceiveWizardRouteAssetDisplays(model.routeAssets, {
-        selectedRoute: model.selectedRoute
+      ) : null,
+      scopedChildren
+    )
+  );
+}
+
+// src/use-checkout.ts
+import * as React5 from "react";
+import {
+  copyInvoice as copyInvoiceHelper2,
+  createCheckoutController,
+  createCheckoutState,
+  createCheckoutStatusModel as createCheckoutStatusModel2,
+  openWallet as openWalletHelper2,
+  deriveStatus
+} from "@openreceive/browser/headless";
+function useCheckout(options) {
+  const checkout = options.checkout;
+  const [copied, showCopied] = useTransientValue(false);
+  const [latestSnapshot, setLatestSnapshot] = React5.useState(checkout);
+  const incomingIdentity = `${checkout.checkout_id} ${checkout.reference}`;
+  const checkoutRef = React5.useRef(checkout);
+  checkoutRef.current = checkout;
+  React5.useEffect(() => {
+    setLatestSnapshot(checkoutRef.current);
+  }, [incomingIdentity]);
+  const snapshot = latestSnapshot;
+  const [state, setState] = React5.useState(
+    () => createCheckoutState(snapshot, {
+      logger: options.logger
+    })
+  );
+  const controllerRef = React5.useRef(null);
+  const onStateRef = React5.useRef(options.onState);
+  onStateRef.current = options.onState;
+  const onSettledRef = React5.useRef(options.onSettled);
+  onSettledRef.current = options.onSettled;
+  const loggerRef = React5.useRef(options.logger);
+  loggerRef.current = options.logger;
+  const onErrorRef = React5.useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const onCopyRef = React5.useRef(options.onCopy);
+  onCopyRef.current = options.onCopy;
+  const onOpenWalletRef = React5.useRef(options.onOpenWallet);
+  onOpenWalletRef.current = options.onOpenWallet;
+  const settledAnnouncementRef = React5.useRef({
+    reference: snapshot.reference,
+    fired: false
+  });
+  const logContext = React5.useMemo(() => getCheckoutLogContext(state), [state]);
+  const refreshStatus = options.polling === false ? void 0 : options.refreshStatus;
+  const refreshStatusRef = React5.useRef(refreshStatus);
+  refreshStatusRef.current = refreshStatus;
+  const polls = refreshStatus !== void 0;
+  const prefix = options.polling === false ? void 0 : options.prefix;
+  const snapshotRef = React5.useRef(snapshot);
+  snapshotRef.current = snapshot;
+  const checkoutIdentity = `${snapshot.checkout_id} ${snapshot.reference}`;
+  React5.useEffect(() => {
+    const controller = createCheckoutController({
+      snapshot: snapshotRef.current,
+      ...polls ? {
+        refreshStatus: async (reference) => await refreshStatusRef.current?.(reference) ?? null
+      } : {},
+      ...prefix === void 0 ? {} : { prefix },
+      pollIntervalMs: options.pollIntervalMs,
+      // Omit logger when unset so @openreceive/browser attaches its default console sink.
+      // Pass `false` through to disable; wrap custom sinks so inline host callbacks stay stable.
+      ...loggerRef.current === false ? { logger: false } : loggerRef.current !== void 0 ? {
+        logger: (entry) => {
+          const current = loggerRef.current;
+          if (typeof current === "function") current(entry);
+        }
+      } : {},
+      onError: (error) => {
+        onErrorRef.current?.(error);
+      },
+      clipboard: options.clipboard,
+      open: options.open,
+      onState: (nextState) => {
+        setState(nextState);
+        onStateRef.current?.(nextState);
+      },
+      onSnapshot: setLatestSnapshot
     });
-    const routeDisplays = createOpenReceiveWizardRouteDisplays(wizard.routes);
-    const showRoutePicker = routeAssetDisplays.length > 0 &&
-        (model.selectedRoute === null || routeDisplays.length === 0);
-    const activeTutorialProvider = activeTutorial === null
-        ? undefined
-        : routeDisplays
-            .flatMap((route) => route.providers)
-            .find((provider) => provider.id === activeTutorial.providerId);
-    return React.createElement("div", {
-        className: joinClassNames("or-wizard", props.className)
-    }, selection.selectedMethod === null
-        ? React.createElement(React.Fragment, null, React.createElement("div", {
-            className: "or-wizard-header"
-        }, React.createElement("div", null, React.createElement("h2", null, openReceiveCheckoutLabels.wizardTitle), React.createElement("p", null, openReceiveCheckoutLabels.wizardSubtitle))), React.createElement("div", {
-            className: "or-method-grid"
-        }, openReceivePaymentMethods.map((method) => React.createElement("button", {
-            key: method.id,
-            onClick: () => {
-                updateWizardSelection((controller) => controller.selectMethod(method.id));
-            },
-            type: "button"
-        }, React.createElement("img", { alt: "", src: getOpenReceivePaymentMethodIcon(method.id) }), React.createElement("span", null, method.title), React.createElement("small", null, method.detail)))))
-        : null, selection.selectedMethod === null
-        ? null
-        : renderWizardBreadcrumbs({
-            method: selection.selectedMethod,
-            selectedRoute: model.selectedRoute,
-            routeAssets: routeAssetDisplays,
-            onChangeMethod: () => {
-                updateWizardSelection((controller) => controller.changeMethod());
-            },
-            onChangeRoute: () => {
-                updateWizardSelection((controller) => controller.update({ type: "change_route" }));
-            }
-        }), showRoutePicker && selection.selectedMethod === "bitcoin"
-        ? renderRoutePicker({
-            assets: routeAssetDisplays,
-            method: "bitcoin",
-            onSelectRoute: (route) => {
-                updateWizardSelection((controller) => controller.selectRoute(route));
-            }
-        })
-        : null, showRoutePicker && selection.selectedMethod === "crypto"
-        ? renderRoutePicker({
-            assets: routeAssetDisplays,
-            method: "crypto",
-            onSelectRoute: (route) => {
-                updateWizardSelection((controller) => controller.selectRoute(route));
-            }
-        })
-        : null, selection.selectedMethod === null
-        ? null
-        : React.createElement("div", {
-            className: "or-wizard-results"
-        }, routeDisplays.length === 0
-            ? React.createElement("p", {
-                className: "or-wizard-empty"
-            }, getOpenReceiveWizardEmptyMessage(selection.selectedMethod))
-            : routeDisplays.map((route) => React.createElement("section", {
-                className: "or-wizard-route",
-                key: route.key
-            }, React.createElement("div", {
-                className: "or-wizard-route-heading"
-            }, React.createElement("div", null, React.createElement("h3", null, route.title, wizard.selectedRail === null
-                ? null
-                : renderCountrySelect({
-                    countries: model.countryDisplays,
-                    selectedCountryCode: selection.selectedCountryCode,
-                    onSelectCountry: (countryCode) => {
-                        updateWizardSelection((controller) => controller.selectCountry(countryCode));
-                    }
-                })))), React.createElement("div", {
-                className: "or-provider-grid"
-            }, route.providers.map((provider) => React.createElement("article", {
-                className: provider.recommended
-                    ? "or-provider-card recommended"
-                    : "or-provider-card",
-                key: provider.id
-            }, React.createElement("div", {
-                className: "or-provider-heading"
-            }, React.createElement("img", {
-                alt: "",
-                src: provider.icon
-            }), React.createElement("h4", null, provider.name), provider.recommendedLabel === null
-                ? null
-                : React.createElement("span", null, provider.recommendedLabel)), React.createElement("p", {
-                className: "or-provider-kind"
-            }, provider.kind), React.createElement("div", {
-                className: "or-provider-actions"
-            }, renderProviderOpenAction(provider, () => setActiveTutorial({
-                providerId: provider.id,
-                index: 0,
-                copied: false
-            }))))))))), activeTutorialProvider === undefined || activeTutorial === null
-        ? null
-        : renderProviderTutorialModal({
-            provider: activeTutorialProvider,
-            index: activeTutorial.index,
-            copied: activeTutorial.copied,
-            onClose: () => setActiveTutorial(null),
-            onCopy: async () => {
-                try {
-                    await copyInvoiceHelper({
-                        invoice: props.invoice,
-                        logger: props.logger,
-                        logContext: props.logContext
-                    });
-                    globalThis.dispatchEvent?.(createCheckoutProviderCopyEvent(activeTutorialProvider.id));
-                    setActiveTutorial({
-                        providerId: activeTutorialProvider.id,
-                        index: 0,
-                        copied: true
-                    });
-                }
-                catch (error) {
-                    props.onError?.(error);
-                }
-            },
-            onStep: (index) => setActiveTutorial({
-                providerId: activeTutorialProvider.id,
-                index,
-                copied: activeTutorial.copied
-            })
-        }));
+    controllerRef.current = controller;
+    controller.start();
+    void controller.reloadState().catch(() => void 0);
+    return () => {
+      controller.stop();
+      if (controllerRef.current === controller) controllerRef.current = null;
+    };
+  }, [checkoutIdentity, polls, prefix, options.pollIntervalMs]);
+  const publicStatus = deriveStatus(state);
+  const richStatus = createCheckoutStatusModel2(state);
+  React5.useEffect(() => {
+    const announced = settledAnnouncementRef.current;
+    if (announced.reference !== snapshot.reference) {
+      settledAnnouncementRef.current = {
+        reference: snapshot.reference,
+        fired: false
+      };
+    }
+  }, [snapshot.reference]);
+  React5.useEffect(() => {
+    const announced = settledAnnouncementRef.current;
+    if (publicStatus !== "settled" || announced.fired) return;
+    settledAnnouncementRef.current = {
+      reference: snapshot.reference,
+      fired: true
+    };
+    onSettledRef.current?.();
+  }, [publicStatus, snapshot.reference]);
+  const copyInvoice = React5.useCallback(async () => {
+    try {
+      const controller = controllerRef.current;
+      if (controller === null) {
+        await copyInvoiceHelper2({
+          invoice: state.invoice,
+          clipboard: options.clipboard,
+          logger: options.logger,
+          logContext
+        });
+      } else {
+        await controller.copyInvoice();
+      }
+      showCopied(true);
+      onCopyRef.current?.();
+    } catch (error) {
+      onErrorRef.current?.(error);
+      throw error;
+    }
+  }, [logContext, state.invoice, options.clipboard, options.logger, showCopied]);
+  const openWallet = React5.useCallback(() => {
+    try {
+      const controller = controllerRef.current;
+      const uri = controller === null ? openWalletHelper2({
+        invoice: state.invoice,
+        open: options.open,
+        logger: options.logger,
+        logContext
+      }) : controller.openWallet();
+      onOpenWalletRef.current?.(uri);
+      return uri;
+    } catch (error) {
+      onErrorRef.current?.(error);
+      throw error;
+    }
+  }, [logContext, state.invoice, options.open, options.logger]);
+  const reloadState = React5.useCallback(async () => {
+    try {
+      const next = await controllerRef.current?.reloadState();
+      if (next !== void 0) setState(next);
+    } catch (error) {
+      onErrorRef.current?.(error);
+      throw error;
+    }
+  }, []);
+  const retry = reloadState;
+  const cancel = React5.useCallback(() => {
+    const next = controllerRef.current?.cancel();
+    if (next !== void 0) setState(next);
+  }, []);
+  return {
+    // The state IS the view model now: one derivation, one set of display
+    // fields. `status` stays on top of it because the component's terminal
+    // branches read the checkout's coarse status, not the attempt's phase.
+    ...state,
+    checkout: latestSnapshot,
+    copied,
+    status: publicStatus,
+    expires_in_seconds: richStatus.expires_in_seconds,
+    countdownLabel: richStatus.countdownLabel,
+    countdownPrefix: richStatus.countdownPrefix,
+    statusTitle: richStatus.title,
+    statusDetail: richStatus.detail,
+    waiting: richStatus.waiting,
+    reloadState,
+    retry,
+    cancel,
+    copyInvoice,
+    openWallet
+  };
 }
-function renderWizardBreadcrumbs(options) {
-    const method = openReceivePaymentMethods.find((candidate) => candidate.id === options.method);
-    const methodLabel = method?.title ?? openReceiveCheckoutLabels.paymentMethod;
-    const routeLabel = options.selectedRoute === null || options.routeAssets.length <= 1
-        ? null
-        : options.routeAssets.find((asset) => asset.id === options.selectedRoute)?.label ?? options.selectedRoute;
-    return React.createElement("nav", {
-        "aria-label": "Payment path",
-        className: "or-wizard-breadcrumbs"
-    }, React.createElement("button", {
-        className: "or-wizard-breadcrumb",
-        onClick: options.onChangeMethod,
-        type: "button"
-    }, openReceiveCheckoutLabels.paymentMethod), React.createElement("span", { "aria-hidden": "true" }, "/"), routeLabel === null
-        ? React.createElement("span", { className: "or-wizard-breadcrumb-current" }, methodLabel)
-        : React.createElement(React.Fragment, null, React.createElement("button", {
-            className: "or-wizard-breadcrumb",
-            onClick: options.onChangeRoute,
-            type: "button"
-        }, methodLabel), React.createElement("span", { "aria-hidden": "true" }, "/"), React.createElement("span", { className: "or-wizard-breadcrumb-current" }, routeLabel)));
+var CheckoutContext = React5.createContext(null);
+function useCheckoutContext() {
+  const checkout = React5.useContext(CheckoutContext);
+  if (checkout === null) {
+    throw new Error("useCheckoutContext must be used within CheckoutProvider.");
+  }
+  return checkout;
+}
+function CheckoutProvider(props) {
+  const { children, ...options } = props;
+  const checkout = useCheckout(options);
+  const content = typeof children === "function" ? children(checkout) : children;
+  return React5.createElement(CheckoutContext.Provider, { value: checkout }, content);
 }
+
+// src/wizard.ts
+import {
+  assetButtonClasses,
+  buildMethodGridEntries,
+  checkoutLabels as checkoutLabels5,
+  copyInvoice as copyInvoiceHelper3,
+  createPaymentWizardController,
+  createPaymentWizardModel,
+  createWizardRouteAssetDisplays,
+  createWizardRouteDisplays,
+  findSwapGridGroup,
+  formatChooseNetworkHeading,
+  formatNetworkSummary,
+  getNetworkIcon,
+  getPaymentMethodIcon,
+  getSwapOptionIcon,
+  getWizardEmptyMessage,
+  networkButtonClasses,
+  networkCheckClasses,
+  networkMobileRevealClasses,
+  networkSummaryIconClasses,
+  orClasses as orClasses6,
+  overlaySwapRefundStaging,
+  paymentAccentId,
+  paymentMethods,
+  requestSwapRefund,
+  swapAssetMatchesRoute,
+  swapGroupLimitOption,
+  swapOptionLimitMessage as swapOptionLimitMessage2,
+  swapPickerKey,
+  updateSelectedSwapNetworks,
+  wizardNetworkGroupIds
+} from "@openreceive/browser/headless";
+import * as React9 from "react";
+
+// src/provider-tutorial.ts
+import {
+  createLightningInvoiceDecodeUrl,
+  checkoutLabels as checkoutLabels2,
+  orClasses as orClasses3
+} from "@openreceive/browser/headless";
+import * as React6 from "react";
 function renderProviderOpenAction(provider, onOpenTutorial) {
-    if (provider.tutorials.length === 0) {
-        return React.createElement("a", {
-            href: provider.url,
-            rel: "noreferrer",
-            target: "_blank"
-        }, provider.openLabel);
+  if (provider.tutorials.length === 0) {
+    return React6.createElement(
+      "a",
+      {
+        className: orClasses3.providerOpen,
+        href: provider.url,
+        rel: "noreferrer",
+        target: "_blank"
+      },
+      provider.openLabel
+    );
+  }
+  return React6.createElement(
+    "button",
+    {
+      className: orClasses3.providerOpen,
+      onClick: onOpenTutorial,
+      type: "button"
+    },
+    provider.openLabel
+  );
+}
+function ProviderTutorialModal(options) {
+  const { provider } = options;
+  const dialogRef = React6.useRef(null);
+  React6.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) return;
+    const opener = dialog.ownerDocument.activeElement instanceof HTMLElement ? dialog.ownerDocument.activeElement : null;
+    dialog.focus();
+    return () => {
+      opener?.focus();
+    };
+  }, []);
+  const trapTab = (event) => {
+    if (event.key !== "Tab") return;
+    const dialog = dialogRef.current;
+    if (dialog === null) return;
+    const focusables = Array.from(
+      dialog.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((element) => !element.hasAttribute("disabled"));
+    if (focusables.length === 0) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = dialog.ownerDocument.activeElement;
+    if (event.shiftKey && (active === first || active === dialog)) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
     }
-    return React.createElement("button", {
-        className: "or-provider-open",
-        onClick: onOpenTutorial,
-        type: "button"
-    }, provider.openLabel);
-}
-function renderProviderTutorialModal(options) {
-    const { provider } = options;
-    if (provider.tutorials.length === 0)
-        return null;
-    const totalSteps = provider.tutorials.length + 1;
-    const stepIndex = Math.max(0, Math.min(provider.tutorials.length, options.index));
-    const tutorial = stepIndex === 0 ? undefined : provider.tutorials[stepIndex - 1];
-    const previousIndex = Math.max(0, stepIndex - 1);
-    const nextIndex = Math.min(provider.tutorials.length, stepIndex + 1);
-    const isFinalStep = stepIndex === provider.tutorials.length;
-    return React.createElement("div", {
-        "aria-label": `${openReceiveCheckoutLabels.tutorialTitlePrefix} ${provider.name}`,
-        "aria-modal": true,
-        className: "or-tutorial-modal",
-        onClick: (event) => {
-            if (event.target === event.currentTarget)
-                options.onClose();
+  };
+  if (provider.tutorials.length === 0) return null;
+  const totalSteps = provider.tutorials.length + 1;
+  const stepIndex = Math.max(0, Math.min(provider.tutorials.length, options.index));
+  const tutorial = stepIndex === 0 ? void 0 : provider.tutorials[stepIndex - 1];
+  const previousIndex = Math.max(0, stepIndex - 1);
+  const nextIndex = Math.min(provider.tutorials.length, stepIndex + 1);
+  const isFinalStep = stepIndex === provider.tutorials.length;
+  const decodeHref = createLightningInvoiceDecodeUrl(options.invoice, options.decodeLinkUrl);
+  return React6.createElement(
+    "div",
+    {
+      ref: dialogRef,
+      "aria-label": `${checkoutLabels2.tutorialTitlePrefix} ${provider.name}`,
+      "aria-modal": true,
+      className: orClasses3.tutorialModal,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) options.onClose();
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Escape") options.onClose();
+        trapTab(event);
+      },
+      role: "dialog",
+      tabIndex: -1
+    },
+    React6.createElement(
+      "div",
+      {
+        className: orClasses3.tutorialBox
+      },
+      React6.createElement(
+        "div",
+        {
+          className: orClasses3.tutorialHeader
         },
-        onKeyDown: (event) => {
-            if (event.key === "Escape")
-                options.onClose();
-        },
-        role: "dialog",
-        tabIndex: -1
-    }, React.createElement("div", {
-        className: "or-tutorial-dialog"
-    }, React.createElement("div", {
-        className: "or-tutorial-header"
-    }, React.createElement("div", {
-        className: "or-tutorial-title"
-    }, React.createElement("img", {
-        alt: "",
-        className: "or-tutorial-header-logo",
-        src: provider.icon
-    }), React.createElement("h3", null, `${openReceiveCheckoutLabels.tutorialTitlePrefix} ${provider.name}`)), React.createElement("button", {
-        "aria-label": "Close",
-        className: "or-tutorial-close",
-        onClick: options.onClose,
-        type: "button"
-    }, "X")), stepIndex === 0
-        ? React.createElement("div", {
-            className: "or-tutorial-intro"
-        }, React.createElement("img", {
+        React6.createElement(
+          "div",
+          {
+            className: orClasses3.tutorialTitle
+          },
+          React6.createElement("img", {
             alt: "",
-            className: "or-tutorial-provider-logo",
+            className: orClasses3.tutorialHeaderLogo,
             src: provider.icon
-        }), React.createElement("p", null, `${openReceiveCheckoutLabels.tutorialIntroPrefix} ${provider.name}.`), React.createElement("p", null, openReceiveCheckoutLabels.tutorialIntroCopy), React.createElement("button", {
-            className: "or-tutorial-copy",
+          }),
+          React6.createElement("h3", null, `${checkoutLabels2.tutorialTitlePrefix} ${provider.name}`)
+        ),
+        React6.createElement(
+          "button",
+          {
+            "aria-label": checkoutLabels2.tutorialClose,
+            className: orClasses3.tutorialClose,
+            onClick: options.onClose,
+            type: "button"
+          },
+          "X"
+        )
+      ),
+      stepIndex === 0 ? React6.createElement(
+        "div",
+        {
+          className: orClasses3.tutorialIntro
+        },
+        React6.createElement("img", {
+          alt: "",
+          className: orClasses3.tutorialProviderLogo,
+          src: provider.icon
+        }),
+        React6.createElement(
+          "p",
+          null,
+          `${checkoutLabels2.tutorialIntroPrefix} ${provider.name}.`
+        ),
+        React6.createElement("p", null, checkoutLabels2.tutorialIntroCopy),
+        React6.createElement(
+          "button",
+          {
+            className: orClasses3.tutorialCopy,
             onClick: () => void options.onCopy(),
             type: "button"
-        }, openReceiveCheckoutLabels.copyInvoice), options.copied
-            ? React.createElement("p", {
-                className: "or-tutorial-copy-message"
-            }, openReceiveCheckoutLabels.tutorialCopiedContinue)
-            : null)
-        : React.createElement(React.Fragment, null, React.createElement("div", {
-            className: "or-tutorial-frame"
-        }, React.createElement("img", {
+          },
+          checkoutLabels2.copyInvoice
+        ),
+        decodeHref === void 0 ? null : React6.createElement(
+          "a",
+          {
+            className: orClasses3.tutorialCopy,
+            href: decodeHref,
+            rel: "noreferrer",
+            target: "_blank"
+          },
+          checkoutLabels2.decodeInvoice
+        ),
+        options.copied ? React6.createElement(
+          "p",
+          {
+            className: orClasses3.tutorialCopyMessage
+          },
+          checkoutLabels2.tutorialCopiedContinue
+        ) : null
+      ) : React6.createElement(
+        React6.Fragment,
+        null,
+        React6.createElement(
+          "div",
+          {
+            className: orClasses3.tutorialFrame
+          },
+          React6.createElement("img", {
             alt: tutorial?.caption ?? "",
-            className: "or-tutorial-image",
+            className: orClasses3.tutorialImage,
             src: tutorial?.image ?? ""
-        })), React.createElement("p", {
-            className: "or-tutorial-caption"
-        }, tutorial?.caption ?? "")), React.createElement("div", {
-        "aria-hidden": "true",
-        className: "or-tutorial-steps"
-    }, Array.from({ length: totalSteps }, (_, index) => React.createElement("span", {
-        className: index === stepIndex
-            ? "or-tutorial-step active"
-            : "or-tutorial-step",
-        key: index
-    }))), React.createElement("p", {
-        className: "or-tutorial-progress"
-    }, `Step ${stepIndex + 1} of ${totalSteps}`), React.createElement("div", {
-        className: "or-tutorial-controls"
-    }, React.createElement("button", {
-        disabled: stepIndex === 0,
-        onClick: () => options.onStep(previousIndex),
-        type: "button"
-    }, "Back"), React.createElement("button", {
-        onClick: () => {
-            if (isFinalStep) {
+          })
+        ),
+        React6.createElement(
+          "p",
+          {
+            className: orClasses3.tutorialCaption
+          },
+          tutorial?.caption ?? ""
+        )
+      ),
+      React6.createElement(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: orClasses3.tutorialSteps
+        },
+        Array.from(
+          { length: totalSteps },
+          (_, index) => React6.createElement("span", {
+            className: index === stepIndex ? orClasses3.tutorialStepActive : orClasses3.tutorialStep,
+            key: index
+          })
+        )
+      ),
+      React6.createElement(
+        "p",
+        {
+          className: orClasses3.tutorialProgress
+        },
+        `Step ${stepIndex + 1} of ${totalSteps}`
+      ),
+      React6.createElement(
+        "div",
+        {
+          className: orClasses3.tutorialControls
+        },
+        React6.createElement(
+          "button",
+          {
+            className: orClasses3.btn,
+            disabled: stepIndex === 0,
+            onClick: () => options.onStep(previousIndex),
+            type: "button"
+          },
+          checkoutLabels2.tutorialBack
+        ),
+        React6.createElement(
+          "button",
+          {
+            className: orClasses3.btn,
+            onClick: () => {
+              if (isFinalStep) {
                 options.onClose();
                 return;
-            }
-            options.onStep(nextIndex);
+              }
+              options.onStep(nextIndex);
+            },
+            type: "button"
+          },
+          isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext
+        )
+      )
+    )
+  );
+}
+
+// src/swap.ts
+import {
+  createDetailExternalLink,
+  createSwapDisplayModel,
+  createTransactionDetails,
+  createQrPayloadSvg,
+  getSwapRefundFormError,
+  checkoutLabels as checkoutLabels4,
+  createSwapUnavailableModel,
+  swapOptionLimitMessage,
+  orClasses as orClasses5,
+  selectCheckoutDisplayInvoice
+} from "@openreceive/browser/headless";
+import * as React8 from "react";
+
+// src/transaction-details.ts
+import {
+  checkoutLabels as checkoutLabels3,
+  orClasses as orClasses4,
+  resolveTransactionDetailRows
+} from "@openreceive/browser/headless";
+import * as React7 from "react";
+function TransactionDetails(props) {
+  const rows = resolveTransactionDetailRows(props.state);
+  if (rows.length === 0) return null;
+  return React7.createElement(
+    "details",
+    {
+      className: joinClassNames(orClasses4.transactionDetails, props.className),
+      open: props.open === true ? true : void 0
+    },
+    React7.createElement(
+      "summary",
+      { className: orClasses4.transactionDetailsTitle },
+      checkoutLabels3.transactionDetails
+    ),
+    React7.createElement(
+      "div",
+      { className: orClasses4.transactionDetailsContent },
+      React7.createElement(
+        "dl",
+        { className: orClasses4.swapDetails },
+        rows.flatMap(
+          (row) => renderTransactionDetailRow(row, {
+            clipboard: props.clipboard,
+            onError: props.onError
+          })
+        )
+      )
+    )
+  );
+}
+function renderTransactionDetailRow(row, options) {
+  const copyValue = row.copyValue ?? row.value;
+  return [
+    React7.createElement(
+      "dt",
+      { key: `${row.label}-label`, className: orClasses4.swapDetailsDt },
+      row.label
+    ),
+    React7.createElement(
+      "dd",
+      { key: `${row.label}-value`, className: orClasses4.swapDetailsDd },
+      React7.createElement("code", { className: orClasses4.swapDetailsCode }, row.value),
+      React7.createElement(
+        "div",
+        { className: orClasses4.swapDetailsActions },
+        React7.createElement(TransactionDetailCopyButton, {
+          value: copyValue,
+          clipboard: options.clipboard,
+          onError: options.onError
+        }),
+        row.href === void 0 ? null : React7.createElement(
+          "a",
+          {
+            className: orClasses4.swapDetailsLink,
+            href: row.href,
+            rel: "noreferrer",
+            target: "_blank"
+          },
+          row.hrefLabel ?? checkoutLabels3.viewOnExplorer
+        )
+      )
+    )
+  ];
+}
+function TransactionDetailCopyButton(props) {
+  const [copied, setCopied] = useTransientValue(false);
+  const label = copied ? checkoutLabels3.copied : "Copy";
+  return React7.createElement(
+    "button",
+    {
+      className: orClasses4.detailCopy,
+      type: "button",
+      "aria-label": label,
+      title: label,
+      onClick: () => {
+        void copyText(props.value, props.clipboard).then(() => setCopied(true)).catch((error) => props.onError?.(error));
+      }
+    },
+    React7.createElement(ClipboardIcon)
+  );
+}
+
+// src/swap.ts
+function renderSwapActions(options) {
+  const shown = options.options.filter((option) => option.provider.length > 0);
+  if (!options.enabled || shown.length === 0) return null;
+  return React8.createElement(
+    "div",
+    {
+      className: orClasses5.swapActions
+    },
+    shown.map((option) => {
+      const disabled = option.available === false;
+      const limitMessage = swapOptionLimitMessage(option, options.checkout);
+      return React8.createElement(
+        "div",
+        {
+          className: orClasses5.swapAction,
+          key: option.pay_in_asset
         },
-        type: "button"
-    }, isFinalStep ? openReceiveCheckoutLabels.tutorialExit : "Next"))));
+        disabled ? limitMessage === void 0 ? null : React8.createElement("p", { className: orClasses5.swapWarning }, limitMessage) : option.pay_amount === void 0 ? null : React8.createElement(
+          "p",
+          {
+            className: orClasses5.swapEstimate
+          },
+          `Estimated ${option.pay_amount} ${option.label} to settle this checkout.`
+        ),
+        React8.createElement(
+          "button",
+          {
+            className: orClasses5.swapStart,
+            disabled: disabled || options.startingAsset !== null,
+            onClick: disabled ? void 0 : () => options.onStart(option.pay_in_asset),
+            type: "button"
+          },
+          options.startingAsset === option.pay_in_asset ? checkoutLabels4.preparingPayment : checkoutLabels4.createPaymentAddress.replace("{asset}", option.label).replace("{network}", option.network_label)
+        )
+      );
+    })
+  );
 }
-export function InvoiceSummary(props) {
-    const { amountLabel, fiatLabel, status, PaymentStateComponent = PaymentState, classNames, className, ...divProps } = props;
-    return React.createElement("div", {
-        ...divProps,
-        className,
-        [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.meta]: ""
-    }, amountLabel === undefined
-        ? null
-        : React.createElement("span", {
-            className: classNames?.amount
-        }, amountLabel), fiatLabel === undefined
-        ? null
-        : React.createElement("span", {
-            className: classNames?.fiat
-        }, fiatLabel), status === undefined
-        ? null
-        : React.createElement(PaymentStateComponent, {
-            state: status,
-            className: classNames?.paymentState
-        }));
+function renderSwapStartError(message, onRetry) {
+  return React8.createElement(
+    "section",
+    {
+      className: orClasses5.swapPanel
+    },
+    React8.createElement(
+      "div",
+      { role: "alert" },
+      React8.createElement(
+        "strong",
+        { className: orClasses5.swapHeadingTitle },
+        checkoutLabels4.swapStartFailedTitle
+      ),
+      React8.createElement("p", { className: orClasses5.swapWarning }, message),
+      React8.createElement(
+        "button",
+        {
+          className: orClasses5.btn,
+          type: "button",
+          onClick: onRetry
+        },
+        checkoutLabels4.tryAgain
+      )
+    )
+  );
 }
-export function Checkout(props) {
-    const { invoice, qrEncoder, logger, onError, lookupInvoice, lookupUrl, refreshInvoice, refreshUrl, refreshHeaders, refreshIdempotencyKey, refreshReason, onState, onPaid, onStartOver, polling, paymentWizard = true, themeSwitcher = false, defaultTheme, themeStorageKey, countryStorageKey, components, classNames, children, className, ...sectionProps } = props;
-    const checkoutModel = useCheckout({
-        invoice,
-        logger,
-        onError,
-        lookupInvoice,
-        lookupUrl,
-        refreshInvoice,
-        refreshUrl,
-        refreshHeaders,
-        refreshIdempotencyKey,
-        refreshReason,
-        onState,
-        onPaid,
-        polling
-    });
-    const theme = useTheme({
-        defaultTheme,
-        storageKey: themeStorageKey
-    });
-    const QRCodeComponent = components?.QRCode ?? QRCode;
-    const InvoiceSummaryComponent = components?.InvoiceSummary ?? InvoiceSummary;
-    const CopyButton = components?.CopyButton ?? CopyInvoiceButton;
-    const ButtonComponent = components?.Button;
-    const PaymentStateComponent = components?.PaymentState ?? PaymentState;
-    const customChildren = typeof children === "function" ? children(checkoutModel) : children;
-    const expired = checkoutModel.status === "expired";
-    const startOver = () => {
-        if (onStartOver !== undefined) {
-            onStartOver();
-            return;
+function renderSwapPreparing(assetLabel) {
+  return React8.createElement(
+    "section",
+    {
+      className: orClasses5.swapPanel
+    },
+    React8.createElement(WaitingState, {
+      waiting: true,
+      statusTitle: checkoutLabels4.preparingPaymentAddress,
+      statusDetail: checkoutLabels4.preparingPaymentAddressDetail.replace("{asset}", assetLabel)
+    })
+  );
+}
+function renderSwapUnavailable(quote, checkout) {
+  const model = createSwapUnavailableModel(quote, checkout);
+  return React8.createElement(
+    "section",
+    {
+      className: orClasses5.swapPanel
+    },
+    React8.createElement(
+      "div",
+      {
+        className: orClasses5.swapHeading
+      },
+      React8.createElement("strong", { className: orClasses5.swapHeadingTitle }, model.title)
+    ),
+    React8.createElement("p", { className: orClasses5.swapWarning }, model.detail),
+    model.range === void 0 ? null : React8.createElement("p", { className: orClasses5.swapWarning }, model.range),
+    React8.createElement("p", { className: orClasses5.swapProgress }, model.hint)
+  );
+}
+function renderSwapDepositPanel(options) {
+  const display = createSwapDisplayModel(
+    options.invoice,
+    options.now === void 0 ? {} : { now: options.now }
+  );
+  if (display === void 0) return null;
+  const memo = display.depositMemo;
+  const backButton = React8.createElement(
+    "button",
+    {
+      className: orClasses5.swapBack,
+      onClick: options.onBackToLightning,
+      type: "button"
+    },
+    checkoutLabels4.payWithLightningInstead
+  );
+  const heading = React8.createElement(
+    "div",
+    {
+      className: orClasses5.swapHeading
+    },
+    React8.createElement(
+      "strong",
+      { className: orClasses5.swapHeadingTitle },
+      display.providerStateLabel
+    ),
+    React8.createElement(
+      "span",
+      { className: orClasses5.swapHeadingDetail },
+      display.providerStateDetail
+    )
+  );
+  const waitingCard = (countdownLabel) => React8.createElement(WaitingState, {
+    waiting: true,
+    statusTitle: display.providerStateLabel,
+    statusDetail: display.providerStateDetail,
+    ...countdownLabel === void 0 ? {} : { countdownLabel }
+  });
+  if (display.state === "creating") {
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      waitingCard(),
+      backButton
+    );
+  }
+  if (display.state === "settled") {
+    const highlightRows = [
+      ...display.depositTxId === void 0 ? [] : renderSwapCopyRow("Deposit transaction", display.depositTxId, {
+        ...options,
+        kind: "tx",
+        payInAsset: display.payInAsset
+      }),
+      ...display.payoutTxId === void 0 ? [] : renderSwapCopyRow("Lightning payout", display.payoutTxId, options),
+      ...display.providerOrderId === void 0 ? [] : renderSwapCopyRow("Provider order", display.providerOrderId, options)
+    ];
+    const displayInvoice = options.checkout === void 0 ? void 0 : selectCheckoutDisplayInvoice(options.checkout);
+    const bolt11 = typeof options.invoice.invoice === "string" ? options.invoice.invoice : typeof displayInvoice?.invoice === "string" ? displayInvoice.invoice : void 0;
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      React8.createElement(WaitingState, {
+        waiting: false,
+        statusTitle: display.providerStateLabel,
+        statusDetail: display.providerStateDetail
+      }),
+      highlightRows.length === 0 ? null : React8.createElement(
+        "dl",
+        {
+          className: orClasses5.swapDetails
+        },
+        highlightRows
+      ),
+      React8.createElement(TransactionDetails, {
+        state: createTransactionDetails({
+          ...options.checkout === void 0 ? {} : {
+            reference: options.checkout.reference,
+            checkout_id: options.checkout.checkout_id,
+            ...options.checkout.fiat === void 0 ? {} : { fiat_quote: { fiat: options.checkout.fiat } },
+            ...options.checkout.amount_msats === void 0 ? {} : { amount_msats: options.checkout.amount_msats }
+          },
+          invoice_id: options.invoice.invoice_id,
+          ...bolt11 === void 0 ? {} : { invoice: bolt11 },
+          rail: options.invoice.rail,
+          ...options.invoice.payment_hash === void 0 ? displayInvoice?.payment_hash === void 0 ? {} : { payment_hash: displayInvoice.payment_hash } : { payment_hash: options.invoice.payment_hash },
+          ...options.invoice.amount_msats === void 0 ? {} : { amount_msats: options.invoice.amount_msats },
+          ...options.invoice.fiat_quote === void 0 ? {} : { fiat_quote: options.invoice.fiat_quote },
+          ...options.invoice.transaction_state === void 0 ? {} : { transaction_state: options.invoice.transaction_state },
+          ...options.invoice.workflow_state === void 0 ? {} : { workflow_state: options.invoice.workflow_state },
+          ...options.invoice.expires_at === void 0 ? {} : { expires_at: options.invoice.expires_at },
+          ...(options.checkout?.paid_at ?? options.invoice.settled_at) === void 0 ? {} : { settled_at: options.checkout?.paid_at ?? options.invoice.settled_at },
+          ...options.invoice.swap === void 0 ? {} : { swap: options.invoice.swap }
+        }),
+        clipboard: options.clipboard,
+        onError: options.onError
+      })
+    );
+  }
+  if (display.state === "progress") {
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      waitingCard(),
+      renderSwapSupportDetails(display, options)
+    );
+  }
+  if (display.state === "expired") {
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      heading,
+      React8.createElement(
+        "p",
+        {
+          className: orClasses5.swapWarning
+        },
+        "This payment address expired without a detected payment. Create a new payment address to try again."
+      ),
+      renderSwapSupportDetails(display, options),
+      backButton
+    );
+  }
+  if (display.state === "refund_required") {
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      heading,
+      renderSwapRefundFacts(display, options),
+      React8.createElement(
+        "p",
+        {
+          className: orClasses5.swapWarning
+        },
+        `Use a ${display.networkLabel} address you control. Do not paste the deposit address.`
+      ),
+      React8.createElement(SwapRefundForm, {
+        attemptId: display.attemptId,
+        payInAsset: display.payInAsset,
+        networkLabel: display.networkLabel,
+        submittedRefundAddress: display.refundAddress,
+        refundAllowed: display.refundAllowed,
+        onRefund: options.onRefund,
+        onError: options.onError
+      }),
+      renderSwapSupportDetails(display, options),
+      renderSwapRefundReturnWarning()
+    );
+  }
+  if (display.state === "refund_pending" || display.state === "refunded") {
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      heading,
+      renderSwapRefundFacts(display, options),
+      React8.createElement(
+        "dl",
+        {
+          className: orClasses5.swapDetails
+        },
+        display.refundAddress === void 0 ? null : renderSwapCopyRow("Refund address", display.refundAddress, {
+          ...options,
+          kind: "address",
+          payInAsset: display.payInAsset
+        }),
+        display.refundTxId === void 0 ? null : renderSwapCopyRow("Refund transaction", display.refundTxId, {
+          ...options,
+          kind: "tx",
+          payInAsset: display.payInAsset
+        })
+      ),
+      renderSwapSupportDetails(display, options),
+      renderSwapRefundReturnWarning()
+    );
+  }
+  if (display.state === "deposit") {
+    return React8.createElement(
+      "section",
+      {
+        className: orClasses5.swapPanel
+      },
+      React8.createElement(
+        "p",
+        {
+          className: orClasses5.swapInstruction
+        },
+        "Pay ",
+        React8.createElement("strong", null, `${display.depositAmount} ${display.assetLabel}`),
+        " to this address"
+      ),
+      renderSwapNetworkWarning(display),
+      React8.createElement(
+        "div",
+        {
+          className: orClasses5.swapDepositLayout
+        },
+        React8.createElement(SwapPayloadQRCode, {
+          payload: display.qrPayload,
+          encoder: options.encoder,
+          onError: options.onError
+        }),
+        React8.createElement(
+          "div",
+          {
+            className: orClasses5.swapDepositSide
+          },
+          React8.createElement(
+            "dl",
+            {
+              className: orClasses5.swapDetails
+            },
+            // Explorer stays hidden until payment completes (tx ids / settled details).
+            // No explorer link on the LIVE deposit row: the address has nothing on
+            // chain yet, and sending the payer to a third-party explorer mid-payment
+            // is not something this pane does. The settled/refund panes link theirs.
+            renderSwapCopyRow("Address", display.depositAddress, {
+              ...options,
+              selectable: true
+            }),
+            memo === void 0 ? null : renderSwapCopyRow("Memo", memo, options),
+            renderSwapCopyRow("Amount", display.depositAmount, { ...options, selectable: true })
+          ),
+          waitingCard(display.countdownLabel),
+          renderSwapFeeBreakdown(display.feeBreakdown)
+        )
+      ),
+      backButton
+    );
+  }
+  return React8.createElement(
+    "section",
+    {
+      className: orClasses5.swapPanel
+    },
+    heading,
+    React8.createElement(
+      "p",
+      { className: orClasses5.swapWarning },
+      checkoutLabels4.supportReviewNeeded
+    ),
+    renderSwapSupportDetails(display, options),
+    backButton
+  );
+}
+function renderSwapNetworkWarning(display) {
+  const emphasisStart = display.networkWarning.indexOf(display.networkWarningEmphasis);
+  const before = emphasisStart === -1 ? display.networkWarning : display.networkWarning.slice(0, emphasisStart);
+  const after = emphasisStart === -1 ? "" : display.networkWarning.slice(emphasisStart + display.networkWarningEmphasis.length);
+  return React8.createElement(
+    "div",
+    {
+      role: "alert",
+      className: orClasses5.swapNetworkWarning
+    },
+    React8.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        className: orClasses5.swapNetworkWarningIcon,
+        "aria-hidden": "true"
+      },
+      React8.createElement("path", {
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      })
+    ),
+    React8.createElement(
+      "div",
+      { className: orClasses5.swapNetworkWarningContent },
+      React8.createElement(
+        "p",
+        { className: orClasses5.swapNetworkWarningTitle },
+        display.networkWarningTitle
+      ),
+      React8.createElement(
+        "p",
+        { className: orClasses5.swapNetworkWarningBody },
+        before,
+        emphasisStart === -1 ? null : React8.createElement(
+          "strong",
+          { className: orClasses5.swapNetworkWarningEmphasis },
+          display.networkWarningEmphasis
+        ),
+        after
+      )
+    )
+  );
+}
+function renderSwapRefundFacts(display, options) {
+  const rows = [
+    ...display.depositReceivedAmount === void 0 ? [] : renderSwapCopyRow(
+      "Amount received",
+      `${display.depositReceivedAmount} ${display.assetLabel}`,
+      options
+    ),
+    ...display.depositReceivedAmount === void 0 ? [] : renderSwapCopyRow(
+      "Amount required",
+      `${display.depositAmount} ${display.assetLabel}`,
+      options
+    ),
+    ...display.refundAmount === void 0 ? [] : renderSwapCopyRow(
+      "Estimated refund",
+      `${display.refundAmount} ${display.assetLabel}`,
+      options
+    )
+  ];
+  if (rows.length === 0) return null;
+  return React8.createElement("dl", { className: orClasses5.swapDetails }, rows);
+}
+function renderSwapFeeBreakdown(breakdown) {
+  if (breakdown === void 0) return null;
+  const feeValue = breakdown.feePercent === void 0 ? breakdown.fee : `${breakdown.fee} (${breakdown.feePercent})`;
+  return React8.createElement(
+    "div",
+    { className: orClasses5.swapBreakdown },
+    React8.createElement(
+      "p",
+      { className: orClasses5.swapBreakdownTitle },
+      checkoutLabels4.paymentBreakdown
+    ),
+    React8.createElement(
+      "dl",
+      { className: joinClassNames(orClasses5.swapDetails, orClasses5.swapBreakdownRows) },
+      React8.createElement(
+        "dt",
+        { key: "cart-label", className: orClasses5.swapDetailsDt },
+        checkoutLabels4.cartTotal
+      ),
+      React8.createElement("dd", { key: "cart-value" }, breakdown.cartTotal),
+      React8.createElement(
+        "dt",
+        { key: "send-label", className: orClasses5.swapDetailsDt },
+        checkoutLabels4.youSend
+      ),
+      React8.createElement("dd", { key: "send-value" }, breakdown.youSend),
+      React8.createElement(
+        "dt",
+        { key: "fee-label", className: orClasses5.swapDetailsDt },
+        checkoutLabels4.swapAndNetworkFees
+      ),
+      React8.createElement("dd", { key: "fee-value" }, feeValue)
+    )
+  );
+}
+function renderSwapCopyRow(label, value, options, displayValue = value) {
+  const link = options.href === void 0 ? options.kind === void 0 ? void 0 : createDetailExternalLink({
+    kind: options.kind,
+    value,
+    ...options.payInAsset === void 0 ? {} : { payInAsset: options.payInAsset }
+  }) : {
+    href: options.href,
+    hrefLabel: options.hrefLabel ?? checkoutLabels4.viewOnExplorer
+  };
+  const valueField = options.selectable === true ? React8.createElement("input", {
+    className: orClasses5.swapDetailsInput,
+    type: "text",
+    readOnly: true,
+    value: displayValue,
+    "aria-label": label,
+    ...selectAllInputHandlers()
+  }) : React8.createElement("code", { className: orClasses5.swapDetailsCode }, displayValue);
+  return [
+    React8.createElement("dt", { key: `${label}-label`, className: orClasses5.swapDetailsDt }, label),
+    React8.createElement(
+      "dd",
+      { key: `${label}-value`, className: orClasses5.swapDetailsDd },
+      valueField,
+      React8.createElement(
+        "div",
+        { className: orClasses5.swapDetailsActions },
+        React8.createElement(SwapCopyButton, {
+          value,
+          clipboard: options.clipboard,
+          onError: options.onError
+        }),
+        link === void 0 ? null : React8.createElement(
+          "a",
+          {
+            className: orClasses5.swapDetailsLink,
+            href: link.href,
+            rel: "noreferrer",
+            target: "_blank"
+          },
+          link.hrefLabel
+        )
+      )
+    )
+  ];
+}
+function SwapCopyButton(props) {
+  const [copied, showCopied] = useTransientValue(false);
+  const label = copied ? checkoutLabels4.copied : "Copy";
+  return React8.createElement(
+    "button",
+    {
+      className: orClasses5.detailCopy,
+      onClick: () => {
+        void copyText(props.value, props.clipboard).then(() => showCopied(true)).catch(props.onError);
+      },
+      type: "button",
+      "aria-label": label,
+      title: label
+    },
+    React8.createElement(ClipboardIcon)
+  );
+}
+function renderSwapSupportDetails(display, options) {
+  const rowOptions = { ...options, payInAsset: display.payInAsset };
+  const rows = [
+    ...display.depositTxId === void 0 ? [] : renderSwapCopyRow("Deposit transaction", display.depositTxId, rowOptions),
+    ...display.payoutTxId === void 0 ? [] : renderSwapCopyRow("Lightning payout", display.payoutTxId, options),
+    ...display.refundTxId === void 0 ? [] : renderSwapCopyRow("Refund transaction", display.refundTxId, rowOptions),
+    ...display.providerOrderId === void 0 ? [] : renderSwapCopyRow("Provider order", display.providerOrderId, options)
+  ];
+  if (rows.length === 0) return null;
+  return React8.createElement(
+    "details",
+    {
+      className: orClasses5.swapSupport
+    },
+    React8.createElement("summary", { className: orClasses5.swapSupportTitle }, "Payment details"),
+    React8.createElement(
+      "div",
+      { className: orClasses5.swapSupportContent },
+      React8.createElement("dl", { className: orClasses5.swapDetails }, rows)
+    )
+  );
+}
+function renderSwapRefundReturnWarning() {
+  return React8.createElement(
+    "p",
+    {
+      className: orClasses5.swapWarning
+    },
+    checkoutLabels4.refundReturnWarning
+  );
+}
+var REFUND_ADDRESS_DRAFT_LIMIT = 8;
+var refundAddressDraftByAttempt = /* @__PURE__ */ new Map();
+function setRefundAddressDraft(attemptId, value) {
+  refundAddressDraftByAttempt.delete(attemptId);
+  refundAddressDraftByAttempt.set(attemptId, value);
+  while (refundAddressDraftByAttempt.size > REFUND_ADDRESS_DRAFT_LIMIT) {
+    const oldest = refundAddressDraftByAttempt.keys().next().value;
+    if (oldest === void 0) break;
+    refundAddressDraftByAttempt.delete(oldest);
+  }
+}
+function SwapRefundForm(props) {
+  const [refundAddress, setRefundAddress] = React8.useState(
+    () => refundAddressDraftByAttempt.get(props.attemptId) ?? ""
+  );
+  React8.useEffect(() => {
+    setRefundAddress(refundAddressDraftByAttempt.get(props.attemptId) ?? "");
+  }, [props.attemptId]);
+  const [submitting, setSubmitting] = React8.useState(false);
+  const [showAddressError, setShowAddressError] = React8.useState(false);
+  const address = refundAddress.trim();
+  const addressError = getSwapRefundFormError(props.payInAsset, address, props.networkLabel);
+  const confirm = address.length > 0 && props.submittedRefundAddress !== void 0 && props.submittedRefundAddress === address;
+  const disabled = submitting || !props.refundAllowed;
+  const showError = showAddressError && addressError !== void 0;
+  return React8.createElement(
+    "form",
+    {
+      className: orClasses5.swapRefund,
+      noValidate: true,
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (addressError !== void 0 || !props.refundAllowed) {
+          setShowAddressError(true);
+          return;
         }
-        void checkoutModel.refreshExpiredInvoice().catch((error) => {
-            onError?.(error);
-        });
+        setSubmitting(true);
+        void props.onRefund(props.attemptId, address, confirm).catch(props.onError).finally(() => setSubmitting(false));
+      }
+    },
+    props.submittedRefundAddress === void 0 ? null : React8.createElement(
+      "p",
+      {
+        className: orClasses5.swapWarning
+      },
+      checkoutLabels4.confirmRefundTo.replace("{address}", props.submittedRefundAddress)
+    ),
+    React8.createElement("input", {
+      autoComplete: "off",
+      "aria-invalid": showError ? true : void 0,
+      className: showError ? orClasses5.swapRefundInputInvalid : orClasses5.swapRefundInput,
+      onChange: (event) => {
+        const value = event.currentTarget.value;
+        setRefundAddressDraft(props.attemptId, value);
+        setRefundAddress(value);
+      },
+      onBlur: () => {
+        if (refundAddress.trim().length > 0) setShowAddressError(true);
+      },
+      placeholder: checkoutLabels4.refundAddressPlaceholder.replace("{network}", props.networkLabel),
+      required: true,
+      type: "text",
+      value: refundAddress
+    }),
+    showError ? React8.createElement(
+      "p",
+      {
+        className: orClasses5.swapRefundError,
+        role: "alert"
+      },
+      addressError
+    ) : null,
+    props.submittedRefundAddress === void 0 ? React8.createElement(
+      "p",
+      {
+        className: orClasses5.swapRefundHint
+      },
+      `Make sure you control this ${props.networkLabel} address. Refunds sent to the wrong address usually cannot be recovered.`
+    ) : null,
+    React8.createElement(
+      "button",
+      {
+        className: orClasses5.btn,
+        disabled,
+        type: "submit"
+      },
+      submitting ? checkoutLabels4.submitting : confirm ? checkoutLabels4.confirmRefund : checkoutLabels4.reviewRefundAddress
+    )
+  );
+}
+function SwapPayloadQRCode(props) {
+  const [svg, setSvg] = React8.useState("");
+  const onErrorRef = React8.useRef(props.onError);
+  onErrorRef.current = props.onError;
+  React8.useEffect(() => {
+    let cancelled = false;
+    createQrPayloadSvg(props.payload, { encoder: props.encoder, width: 220 }).then((nextSvg) => {
+      if (!cancelled) setSvg(nextSvg);
+    }).catch((error) => {
+      if (!cancelled) onErrorRef.current?.(error);
+    });
+    return () => {
+      cancelled = true;
     };
-    return React.createElement("section", {
-        ...sectionProps,
-        className: joinClassNames(className, classNames?.root),
-        [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.root]: "",
-        ...theme.attributes
-    }, customChildren === undefined
-        ? [
-            themeSwitcher
-                ? React.createElement(ThemeToggle, {
-                    key: "theme",
-                    className: classNames?.themeToggle,
-                    theme: theme.theme,
-                    resolvedTheme: theme.resolvedTheme,
-                    onThemeChange: theme.setTheme,
-                    ButtonComponent
+  }, [props.payload, props.encoder]);
+  const imageSource = svg.length === 0 ? void 0 : `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  return React8.createElement("img", {
+    alt: "",
+    className: orClasses5.swapQr,
+    src: imageSource
+  });
+}
+
+// src/wizard.ts
+function PaymentWizard(props) {
+  const [selection, setSelection] = React9.useState(
+    () => createPaymentWizardController().getSelection()
+  );
+  const [activeTutorial, setActiveTutorial] = React9.useState(null);
+  const [startedSwapInvoice, setStartedSwapInvoice] = React9.useState(null);
+  const [dismissedSwapInvoiceId, setDismissedSwapInvoiceId] = React9.useState(null);
+  const [selectedSwapAsset, setSelectedSwapAsset] = React9.useState(null);
+  const [selectedSwapNetworks, setSelectedSwapNetworks] = React9.useState(
+    {}
+  );
+  const [selectedPickerKey, setSelectedPickerKey] = React9.useState(null);
+  const autoSwapAttemptedRef = React9.useRef(/* @__PURE__ */ new Set());
+  const fetcher = props.fetch ?? globalThis.fetch;
+  const checkout = props.checkout;
+  const reference = checkout?.reference;
+  const session = useCheckoutSession({
+    snapshot: () => checkout,
+    reference: () => reference,
+    swapPrefix: () => props.prefix,
+    fetch: () => fetcher,
+    swapSelection: {
+      started: () => startedSwapInvoice ?? void 0,
+      setStarted: setStartedSwapInvoice,
+      dismissedInvoiceId: () => dismissedSwapInvoiceId,
+      setDismissedInvoiceId: setDismissedSwapInvoiceId,
+      setSelectedAsset: setSelectedSwapAsset
+    },
+    onSwapStarted: (invoice) => props.onSwapStarted?.(invoice),
+    ...props.logger === void 0 ? {} : { logger: props.logger },
+    onError: (error) => props.onError?.(error)
+  });
+  const { startSwap, swapStartError, startingSwapAsset: swapStartingAsset } = session;
+  const clearSwapFocus = React9.useCallback(() => {
+    setSelectedSwapAsset(null);
+    setSelectedPickerKey(null);
+    setSelectedSwapNetworks({});
+    session.clearSwapStartError();
+  }, [session]);
+  const onSwapFocusChange = props.onSwapFocusChange;
+  React9.useEffect(() => {
+    onSwapFocusChange?.(selectedSwapAsset !== null);
+    return () => onSwapFocusChange?.(false);
+  }, [selectedSwapAsset, onSwapFocusChange]);
+  const swapOptions = React9.useMemo(() => {
+    const methods = checkout?.payment_methods ?? [];
+    return { enabled: methods.length > 0, options: methods };
+  }, [checkout]);
+  const currentSwapInvoice = React9.useMemo(
+    () => selectCurrentSwapInvoice(checkout, startedSwapInvoice, dismissedSwapInvoiceId),
+    [checkout, startedSwapInvoice, dismissedSwapInvoiceId]
+  );
+  const now = useTickingUnixSeconds(currentSwapInvoice !== void 0);
+  const selectSwapAsset = React9.useCallback(
+    (payInAsset) => {
+      if (props.prefix === void 0) return;
+      autoSwapAttemptedRef.current.delete(payInAsset);
+      session.clearSwapStartError();
+      setSelectedSwapAsset(payInAsset);
+    },
+    [props.prefix, session]
+  );
+  const refundSwap = React9.useCallback(
+    async (attemptId, refundAddress, confirm) => {
+      const prefix = props.prefix;
+      if (prefix === void 0 || reference === void 0 || fetcher === void 0) {
+        return;
+      }
+      try {
+        const invoice = await requestSwapRefund({
+          fetch: fetcher,
+          prefix,
+          reference,
+          invoices: [startedSwapInvoice, ...checkout?.invoices ?? []],
+          attemptId,
+          refundAddress,
+          confirm,
+          ...props.logger === void 0 ? {} : { logger: props.logger }
+        });
+        setStartedSwapInvoice(invoice);
+        setDismissedSwapInvoiceId(null);
+      } catch (error) {
+        props.onError?.(error);
+      }
+    },
+    [
+      props.prefix,
+      reference,
+      fetcher,
+      props.onError,
+      props.logger,
+      startedSwapInvoice,
+      checkout?.invoices
+    ]
+  );
+  const updateWizardSelection = React9.useCallback(
+    (apply) => {
+      setSelection((current) => apply(createPaymentWizardController({ selection: current })));
+    },
+    []
+  );
+  const model = createPaymentWizardModel(selection);
+  const { wizard } = model;
+  const routeAssetDisplays = createWizardRouteAssetDisplays(model.routeAssets, {
+    selectedRoute: model.selectedRoute
+  });
+  const routeDisplays = createWizardRouteDisplays(wizard.routes);
+  const showRoutePicker = routeAssetDisplays.length > 0 && (model.selectedRoute === null || routeDisplays.length === 0);
+  const activeTutorialProvider = activeTutorial === null ? void 0 : routeDisplays.flatMap((route) => route.providers).find((provider) => provider.id === activeTutorial.providerId);
+  const swapAssetOptions = swapOptions.enabled ? swapOptions.options.filter((option) => option.provider.length > 0) : [];
+  const stickySwapInvoiceRef = React9.useRef(void 0);
+  if (currentSwapInvoice !== void 0 && currentSwapInvoice.invoice_id !== dismissedSwapInvoiceId) {
+    stickySwapInvoiceRef.current = currentSwapInvoice;
+  } else if (stickySwapInvoiceRef.current?.invoice_id === dismissedSwapInvoiceId) {
+    stickySwapInvoiceRef.current = void 0;
+  }
+  const activeSwapForAsset = selectedSwapAsset === null ? void 0 : currentSwapInvoice !== void 0 && currentSwapInvoice.swap?.pay_in_asset === selectedSwapAsset ? currentSwapInvoice : stickySwapInvoiceRef.current?.swap?.pay_in_asset === selectedSwapAsset ? stickySwapInvoiceRef.current : void 0;
+  React9.useEffect(() => {
+    if (selectedSwapAsset === null) return;
+    if (props.prefix === void 0) return;
+    if (activeSwapForAsset !== void 0) return;
+    if (autoSwapAttemptedRef.current.has(selectedSwapAsset)) return;
+    autoSwapAttemptedRef.current.add(selectedSwapAsset);
+    void startSwap(selectedSwapAsset);
+  }, [selectedSwapAsset, activeSwapForAsset, props.prefix, startSwap]);
+  const selectedSwapOption = selectedSwapAsset === null ? void 0 : swapAssetOptions.find((option) => option.pay_in_asset === selectedSwapAsset) ?? session.swapQuotes[selectedSwapAsset];
+  const selectedSwapQuote = selectedSwapAsset === null ? void 0 : session.swapQuotes[selectedSwapAsset];
+  const selectedSwapLabel = selectedSwapOption?.label ?? "this coin";
+  if (selectedSwapAsset !== null) {
+    return React9.createElement(
+      "div",
+      {
+        className: joinClassNames(orClasses6.wizard, props.className)
+      },
+      React9.createElement(
+        "div",
+        { className: orClasses6.wizardBody },
+        renderWizardBackBreadcrumb(
+          selectedSwapOption === void 0 ? selectedSwapLabel : `${selectedSwapOption.label} \xB7 ${selectedSwapOption.network_label}`,
+          clearSwapFocus
+        ),
+        React9.createElement(
+          "div",
+          {
+            className: orClasses6.wizardResults
+          },
+          swapStartError !== void 0 && activeSwapForAsset === void 0 ? renderSwapStartError(swapStartError, () => {
+            autoSwapAttemptedRef.current.delete(selectedSwapAsset);
+            void startSwap(selectedSwapAsset);
+          }) : activeSwapForAsset !== void 0 ? renderSwapDepositPanel({
+            invoice: activeSwapForAsset,
+            checkout,
+            now,
+            encoder: props.qrEncoder,
+            clipboard: props.clipboard,
+            logger: props.logger,
+            onError: props.onError,
+            onRefund: refundSwap,
+            onBackToLightning: () => {
+              setDismissedSwapInvoiceId(activeSwapForAsset.invoice_id);
+              clearSwapFocus();
+              void props.onRequestLightning?.();
+            }
+          }) : selectedSwapQuote !== void 0 && !selectedSwapQuote.available ? renderSwapUnavailable(selectedSwapQuote, checkout) : renderSwapPreparing(selectedSwapLabel)
+        )
+      )
+    );
+  }
+  return React9.createElement(
+    "div",
+    {
+      className: joinClassNames(orClasses6.wizard, props.className)
+    },
+    selection.selectedMethod === null ? renderCompactPaymentMethodSelector({
+      swapAssetOptions,
+      // Create-checkout snapshot has no payment_methods yet; order status fills them
+      // after the provider catalog (ccies) warms. Show a loader instead of Crypto.
+      currenciesLoading: checkout?.payment_methods === void 0,
+      checkout: checkout ?? void 0,
+      selectedPickerKey,
+      startingAsset: swapStartingAsset,
+      selectedSwapNetworks,
+      onSelectPicker: (key, previousKey) => {
+        setSelectedPickerKey(key);
+        const entries = buildMethodGridEntries(paymentMethods, swapAssetOptions);
+        setSelectedSwapNetworks(
+          (current) => updateSelectedSwapNetworks({
+            entries,
+            nextKey: key,
+            previousKey,
+            selectedNetworks: current
+          })
+        );
+      },
+      onSelectNetwork: (groupKey, payInAsset) => {
+        setSelectedSwapNetworks((current) => ({
+          ...current,
+          [groupKey]: payInAsset
+        }));
+      },
+      onContinueMethod: (methodId) => {
+        updateWizardSelection(
+          (controller) => controller.selectMethod(methodId)
+        );
+        if (methodId === "bitcoin") {
+          void props.onRequestLightning?.();
+        }
+      },
+      onContinueSwap: selectSwapAsset
+    }) : null,
+    selection.selectedMethod === null ? null : React9.createElement(
+      "div",
+      { className: orClasses6.wizardBody },
+      renderWizardBreadcrumbs({
+        method: selection.selectedMethod,
+        selectedRoute: model.selectedRoute,
+        routeAssets: routeAssetDisplays,
+        onChangeMethod: () => {
+          updateWizardSelection((controller) => controller.changeMethod());
+        },
+        onChangeRoute: () => {
+          updateWizardSelection((controller) => controller.update({ type: "change_route" }));
+        }
+      }),
+      showRoutePicker && selection.selectedMethod === "bitcoin" ? renderRoutePicker({
+        assets: routeAssetDisplays,
+        method: "bitcoin",
+        onSelectRoute: (route) => {
+          updateWizardSelection((controller) => controller.selectRoute(route));
+        }
+      }) : null,
+      React9.createElement(
+        "div",
+        {
+          className: orClasses6.wizardResults
+        },
+        routeDisplays.length === 0 ? React9.createElement(
+          "p",
+          {
+            className: orClasses6.wizardEmpty
+          },
+          getWizardEmptyMessage()
+        ) : routeDisplays.map((route) => {
+          const routeSwapOptions = swapOptionsForRoute(route.key, swapOptions.options);
+          const activeSwapForRoute = currentSwapInvoice !== void 0 && swapAssetMatchesRoute(route.key, currentSwapInvoice.swap?.pay_in_asset) ? currentSwapInvoice : void 0;
+          return React9.createElement(
+            "section",
+            {
+              className: orClasses6.wizardRoute,
+              key: route.key
+            },
+            React9.createElement(
+              "div",
+              {
+                className: orClasses6.wizardRouteHeading
+              },
+              React9.createElement(
+                "div",
+                null,
+                React9.createElement("h3", null, route.title)
+              )
+            ),
+            activeSwapForRoute === void 0 ? renderSwapActions({
+              options: routeSwapOptions,
+              enabled: swapOptions.enabled,
+              startingAsset: swapStartingAsset,
+              onStart: selectSwapAsset,
+              checkout
+            }) : renderSwapDepositPanel({
+              invoice: activeSwapForRoute,
+              checkout,
+              now,
+              encoder: props.qrEncoder,
+              clipboard: props.clipboard,
+              logger: props.logger,
+              onError: props.onError,
+              onRefund: refundSwap,
+              onBackToLightning: () => {
+                setDismissedSwapInvoiceId(activeSwapForRoute.invoice_id);
+                clearSwapFocus();
+                void props.onRequestLightning?.();
+              }
+            }),
+            activeSwapForRoute === void 0 ? React9.createElement(
+              "div",
+              {
+                className: orClasses6.providerGrid
+              },
+              route.providers.map(
+                (provider) => React9.createElement(
+                  "article",
+                  {
+                    className: orClasses6.providerCard,
+                    key: provider.id
+                  },
+                  React9.createElement(
+                    "div",
+                    {
+                      className: orClasses6.providerHeading
+                    },
+                    React9.createElement("img", {
+                      alt: "",
+                      className: orClasses6.providerIcon,
+                      src: provider.icon
+                    }),
+                    React9.createElement(
+                      "h4",
+                      { className: orClasses6.providerName },
+                      provider.name
+                    )
+                  ),
+                  React9.createElement(
+                    "p",
+                    {
+                      className: orClasses6.providerKind
+                    },
+                    provider.kind
+                  ),
+                  React9.createElement(
+                    "div",
+                    {
+                      className: orClasses6.providerActions
+                    },
+                    renderProviderOpenAction(
+                      provider,
+                      () => setActiveTutorial({
+                        providerId: provider.id,
+                        index: 0,
+                        copied: false
+                      })
+                    )
+                  )
+                )
+              )
+            ) : null
+          );
+        })
+      )
+    ),
+    activeTutorialProvider === void 0 || activeTutorial === null ? null : React9.createElement(ProviderTutorialModal, {
+      key: "provider-tutorial",
+      provider: activeTutorialProvider,
+      index: activeTutorial.index,
+      copied: activeTutorial.copied,
+      invoice: props.invoice ?? "",
+      ...props.decodeLinkUrl === void 0 ? {} : { decodeLinkUrl: props.decodeLinkUrl },
+      onClose: () => setActiveTutorial(null),
+      onCopy: async () => {
+        try {
+          if (!props.invoice) return;
+          await copyInvoiceHelper3({
+            invoice: props.invoice,
+            logger: props.logger,
+            logContext: props.logContext
+          });
+          props.onProviderCopy?.(activeTutorialProvider.id);
+          props.onCopy?.();
+          setActiveTutorial({
+            providerId: activeTutorialProvider.id,
+            index: 0,
+            copied: true
+          });
+        } catch (error) {
+          props.onError?.(error);
+        }
+      },
+      onStep: (index) => setActiveTutorial({
+        providerId: activeTutorialProvider.id,
+        index,
+        copied: activeTutorial.copied
+      })
+    })
+  );
+}
+function renderCompactPaymentMethodSelector(options) {
+  const entries = buildMethodGridEntries(paymentMethods, options.swapAssetOptions);
+  const currenciesLoading = options.currenciesLoading === true && options.swapAssetOptions.length === 0;
+  const selectedKey = options.selectedPickerKey;
+  const selectedGroup = findSwapGridGroup(entries, selectedKey);
+  const networkRequired = selectedGroup !== void 0 && selectedGroup.options.length > 1;
+  const selectedGroupKey = selectedGroup?.label.trim().toUpperCase();
+  const selectedNetworkAsset = selectedGroupKey === void 0 ? void 0 : options.selectedSwapNetworks[selectedGroupKey];
+  const selectedNetworkOption = selectedGroup === void 0 || selectedNetworkAsset === void 0 ? void 0 : selectedGroup.options.find((option) => option.pay_in_asset === selectedNetworkAsset);
+  const continueTarget = selectedNetworkOption !== void 0 ? {
+    payInAsset: selectedNetworkOption.pay_in_asset,
+    disabled: selectedNetworkOption.available === false,
+    limitMessage: swapOptionLimitMessage2(selectedNetworkOption, options.checkout)
+  } : null;
+  const startingAsset = options.startingAsset;
+  const gridBusy = startingAsset !== null;
+  const continueStarting = continueTarget !== null && continueTarget.payInAsset === startingAsset;
+  const canContinue = continueTarget !== null && !continueTarget.disabled && selectedNetworkOption !== void 0 && !gridBusy;
+  const continueButton = (className) => React9.createElement(
+    "button",
+    {
+      type: "button",
+      className,
+      disabled: !canContinue,
+      "aria-disabled": canContinue ? void 0 : "true",
+      "aria-busy": continueStarting ? "true" : void 0,
+      onClick: !canContinue ? void 0 : () => {
+        if (continueTarget === null) return;
+        options.onContinueSwap(continueTarget.payInAsset);
+      }
+    },
+    continueStarting ? React9.createElement(
+      React9.Fragment,
+      null,
+      React9.createElement("span", {
+        className: orClasses6.continueSpinner,
+        "aria-hidden": "true"
+      }),
+      checkoutLabels5.preparingPayment
+    ) : continueTarget?.disabled && continueTarget.limitMessage !== void 0 ? continueTarget.limitMessage : checkoutLabels5.continue
+  );
+  const renderNetworkSelector = (group, mobile) => {
+    const accent = paymentAccentId(group.label);
+    const groupKey = group.label.trim().toUpperCase();
+    const selectedAsset = options.selectedSwapNetworks[groupKey];
+    const selectedOption = selectedAsset === void 0 ? void 0 : group.options.find((option) => option.pay_in_asset === selectedAsset);
+    const { panelId, headingId } = wizardNetworkGroupIds(groupKey);
+    return React9.createElement(
+      "div",
+      {
+        id: panelId,
+        role: "group",
+        "aria-labelledby": headingId,
+        className: mobile ? networkMobileRevealClasses(accent) : orClasses6.methodNetworkReveal
+      },
+      React9.createElement(
+        "div",
+        { className: orClasses6.methodNetworkLayout },
+        React9.createElement(
+          "div",
+          null,
+          React9.createElement(
+            "h3",
+            {
+              id: headingId,
+              className: orClasses6.methodNetworkHeading
+            },
+            formatChooseNetworkHeading(group.label)
+          ),
+          React9.createElement(
+            "p",
+            { className: orClasses6.methodNetworkHint },
+            checkoutLabels5.selectNetworkToContinue
+          )
+        ),
+        React9.createElement(
+          "div",
+          {
+            role: "group",
+            "aria-labelledby": headingId,
+            className: orClasses6.methodNetworkGrid
+          },
+          group.options.map((option) => {
+            const optionDisabled = option.available === false;
+            const optionSelected = option.pay_in_asset === selectedOption?.pay_in_asset;
+            const optionLimit = swapOptionLimitMessage2(option, options.checkout);
+            return React9.createElement(
+              "div",
+              { key: option.pay_in_asset, className: orClasses6.methodTile },
+              React9.createElement(
+                "button",
+                {
+                  type: "button",
+                  "aria-pressed": optionSelected,
+                  disabled: optionDisabled,
+                  "aria-disabled": optionDisabled ? "true" : void 0,
+                  className: networkButtonClasses({
+                    accent,
+                    selected: optionSelected,
+                    disabled: optionDisabled
+                  }),
+                  onClick: optionDisabled ? void 0 : () => options.onSelectNetwork(groupKey, option.pay_in_asset)
+                },
+                React9.createElement(
+                  "span",
+                  { "aria-hidden": "true", className: "grid size-6 shrink-0 place-items-center" },
+                  React9.createElement("img", {
+                    alt: "",
+                    className: orClasses6.methodNetworkIcon,
+                    src: getNetworkIcon(option.network_label)
+                  })
+                ),
+                React9.createElement("span", { className: "truncate" }, option.network_label),
+                optionSelected ? React9.createElement(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: networkCheckClasses(accent)
+                  },
+                  "\u2713"
+                ) : null
+              ),
+              optionDisabled && optionLimit !== void 0 ? React9.createElement("span", { className: orClasses6.methodLimitHint }, optionLimit) : null
+            );
+          })
+        ),
+        continueButton(orClasses6.methodConfirmDesktop)
+      ),
+      selectedOption !== void 0 ? React9.createElement(
+        "p",
+        {
+          "aria-live": "polite",
+          className: orClasses6.methodNetworkSummary
+        },
+        React9.createElement(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: networkSummaryIconClasses(accent)
+          },
+          "\u2713"
+        ),
+        formatNetworkSummary(group.label, selectedOption.network_label)
+      ) : null
+    );
+  };
+  return React9.createElement(
+    React9.Fragment,
+    null,
+    React9.createElement(
+      "header",
+      {
+        className: orClasses6.wizardHeader
+      },
+      React9.createElement(
+        "h2",
+        {
+          id: "payment-method-heading",
+          className: orClasses6.wizardHeaderTitle
+        },
+        checkoutLabels5.wizardTitle
+      ),
+      React9.createElement(
+        "p",
+        { className: orClasses6.wizardHeaderSubtitle },
+        checkoutLabels5.wizardSubtitle
+      )
+    ),
+    React9.createElement(
+      "div",
+      {
+        className: orClasses6.wizardBody,
+        "aria-labelledby": "payment-method-heading"
+      },
+      React9.createElement(
+        "div",
+        {
+          role: "group",
+          "aria-label": checkoutLabels5.paymentMethod,
+          className: orClasses6.methodGrid
+        },
+        ...entries.map((entry) => {
+          if (entry.kind === "method") {
+            const method = entry.method;
+            const accent2 = paymentAccentId(method.id);
+            return React9.createElement(
+              "button",
+              {
+                key: method.id,
+                type: "button",
+                className: assetButtonClasses({
+                  accent: accent2,
+                  selected: false,
+                  disabled: gridBusy
+                }),
+                disabled: gridBusy,
+                "aria-disabled": gridBusy ? "true" : void 0,
+                onClick: gridBusy ? void 0 : () => options.onContinueMethod(method.id)
+              },
+              React9.createElement(
+                "span",
+                { "aria-hidden": "true", className: orClasses6.methodIconWrap },
+                React9.createElement("img", {
+                  alt: "",
+                  className: orClasses6.methodIcon,
+                  src: getPaymentMethodIcon(method.id)
                 })
-                : null,
-            expired
-                ? null
-                : React.createElement(QRCodeComponent, {
-                    key: "qr",
-                    invoice: checkoutModel.invoice,
-                    encoder: qrEncoder,
-                    onError,
-                    className: classNames?.qr,
-                    style: {
-                        aspectRatio: "1",
-                        justifySelf: "center",
-                        maxWidth: 420,
-                        width: "min(100%, 420px)"
-                    }
+              ),
+              React9.createElement(
+                "span",
+                { className: orClasses6.methodTitleWrap },
+                React9.createElement("span", { className: orClasses6.methodTitle }, method.title)
+              )
+            );
+          }
+          const group = entry.group;
+          const groupKey = group.label.trim().toUpperCase();
+          const pickerKey = swapPickerKey(group.label);
+          const selected = selectedKey === pickerKey;
+          const multiNetwork = group.options.length > 1;
+          const displayOption = group.options.find((option) => option.available !== false) ?? group.options[0];
+          if (displayOption === void 0) return null;
+          const selectedAsset = options.selectedSwapNetworks[groupKey];
+          const selectedOption = selectedAsset === void 0 ? void 0 : group.options.find((option) => option.pay_in_asset === selectedAsset);
+          const activeOption = selectedOption ?? displayOption;
+          const starting = group.options.some((option) => option.pay_in_asset === startingAsset);
+          const disabled = group.options.every((option) => option.available === false);
+          const accent = paymentAccentId(group.label);
+          const limitOption = disabled ? swapGroupLimitOption(group.options) ?? activeOption : activeOption;
+          const limitMessage = swapOptionLimitMessage2(limitOption, options.checkout);
+          const { panelId } = wizardNetworkGroupIds(groupKey);
+          return React9.createElement(
+            "div",
+            { key: pickerKey, className: orClasses6.methodTile },
+            React9.createElement(
+              "button",
+              {
+                type: "button",
+                "aria-pressed": starting || multiNetwork && selected,
+                "aria-expanded": multiNetwork ? selected : void 0,
+                "aria-controls": multiNetwork ? panelId : void 0,
+                "aria-busy": starting ? "true" : void 0,
+                disabled: disabled || gridBusy,
+                "aria-disabled": disabled || gridBusy ? "true" : void 0,
+                className: assetButtonClasses({
+                  accent,
+                  selected: starting || multiNetwork && selected,
+                  disabled: disabled || gridBusy && !starting
                 }),
-            React.createElement(WaitingState, {
-                key: "waiting",
-                waiting: checkoutModel.waiting,
-                statusTitle: checkoutModel.statusTitle,
-                statusDetail: checkoutModel.statusDetail,
-                className: classNames?.waiting
-            }),
-            checkoutModel.countdownLabel === undefined
-                ? null
-                : React.createElement("div", {
-                    key: "countdown",
-                    className: joinClassNames("or-countdown", classNames?.countdown)
-                }, checkoutModel.countdownPrefix, " ", React.createElement("strong", null, checkoutModel.countdownLabel)),
-            React.createElement(InvoiceSummaryComponent, {
-                key: "summary",
-                amountLabel: checkoutModel.amountLabel,
-                fiatLabel: checkoutModel.fiatLabel,
-                status: checkoutModel.status,
-                PaymentStateComponent,
-                className: classNames?.summary,
-                classNames
-            }),
-            React.createElement("div", {
-                key: "actions",
-                className: classNames?.actions,
-                [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.actions]: ""
-            }, expired
-                ? React.createElement(ButtonComponent ?? "button", {
-                    type: "button",
-                    onClick: startOver
-                }, openReceiveCheckoutLabels.startOver)
-                : React.createElement(CopyButton, {
-                    invoice: checkoutModel.invoice,
-                    copyInvoice: checkoutModel.copyInvoice,
-                    onError,
-                    logger,
-                    ButtonComponent,
-                    className: classNames?.copyButton
-                })),
-            paymentWizard && !expired
-                ? React.createElement(PaymentWizard, {
-                    key: "wizard",
-                    invoice: checkoutModel.invoice,
-                    className: classNames?.wizard,
-                    logger,
-                    onError,
-                    countryStorageKey,
-                    logContext: getCheckoutLogContext({
-                        invoice_id: checkoutModel.invoice_id,
-                        payment_hash: checkoutModel.payment_hash,
-                        amount_msats: checkoutModel.amount_msats
-                    })
+                onClick: disabled || gridBusy ? void 0 : multiNetwork ? () => options.onSelectPicker(pickerKey, selectedKey) : () => options.onContinueSwap(displayOption.pay_in_asset)
+              },
+              React9.createElement(
+                "span",
+                { "aria-hidden": "true", className: orClasses6.methodIconWrap },
+                starting ? React9.createElement("span", {
+                  className: orClasses6.spinner,
+                  "aria-hidden": "true"
+                }) : React9.createElement("img", {
+                  alt: "",
+                  className: orClasses6.methodIcon,
+                  src: getSwapOptionIcon(displayOption)
                 })
-                : null
-        ]
-        : customChildren);
+              ),
+              React9.createElement(
+                "span",
+                { className: orClasses6.methodTitleWrap },
+                React9.createElement("span", { className: orClasses6.methodTitle }, group.label),
+                !disabled && multiNetwork ? React9.createElement(
+                  "span",
+                  { className: orClasses6.methodDetailMobile },
+                  selected && selectedOption !== void 0 ? `${selectedOption.network_label} network` : checkoutLabels5.selectNetwork
+                ) : null
+              )
+            ),
+            disabled && limitMessage !== void 0 ? React9.createElement("span", { className: orClasses6.methodLimitHint }, limitMessage) : null,
+            multiNetwork ? React9.createElement(
+              "div",
+              {
+                className: joinClassNames(
+                  orClasses6.methodNetworkRevealAnim,
+                  selected ? orClasses6.methodNetworkRevealAnimOpen : orClasses6.methodNetworkRevealAnimClosed
+                )
+              },
+              React9.createElement(
+                "div",
+                { className: orClasses6.methodNetworkRevealInner },
+                selected ? renderNetworkSelector(group, true) : null
+              )
+            ) : null
+          );
+        }),
+        currenciesLoading ? React9.createElement(
+          "div",
+          {
+            key: "currencies-loading",
+            role: "status",
+            "aria-live": "polite",
+            className: orClasses6.methodCurrenciesLoading
+          },
+          React9.createElement("span", {
+            className: orClasses6.spinner,
+            "aria-hidden": "true"
+          }),
+          React9.createElement(
+            "span",
+            { className: orClasses6.methodTitle },
+            checkoutLabels5.loadingCurrencies
+          )
+        ) : null
+      ),
+      networkRequired && selectedGroup !== void 0 ? React9.createElement(
+        "div",
+        { className: orClasses6.methodNetworkRevealDesktop },
+        renderNetworkSelector(selectedGroup, false)
+      ) : null
+    )
+  );
 }
-function getCheckoutLogContext(data) {
-    return {
-        ...(data.invoice_id === undefined ? {} : { invoice_id: data.invoice_id }),
-        ...(data.payment_hash === undefined ? {} : { payment_hash: data.payment_hash }),
-        ...(data.amount_msats === undefined ? {} : { amount_msats: data.amount_msats }),
-        ...(data.transaction_state === undefined
-            ? {}
-            : { transaction_state: data.transaction_state }),
-        ...(data.workflow_state === undefined
-            ? {}
-            : { workflow_state: data.workflow_state })
-    };
+function renderWizardBackBreadcrumb(currentLabel, onBack) {
+  return React9.createElement(
+    "div",
+    {
+      className: orClasses6.breadcrumbs
+    },
+    React9.createElement(
+      "ul",
+      null,
+      React9.createElement(
+        "li",
+        null,
+        React9.createElement(
+          "button",
+          {
+            className: "link link-hover",
+            onClick: onBack,
+            type: "button"
+          },
+          checkoutLabels5.switchPaymentMethod
+        )
+      ),
+      React9.createElement(
+        "li",
+        null,
+        React9.createElement("span", { className: orClasses6.breadcrumbCurrent }, currentLabel)
+      )
+    )
+  );
 }
-function renderCountrySelect(options) {
-    return React.createElement("label", {
-        className: "or-country-select"
-    }, React.createElement("span", null, openReceiveCheckoutLabels.chooseCountry), React.createElement("select", {
-        value: options.selectedCountryCode,
-        onChange: (event) => {
-            options.onSelectCountry(event.currentTarget.value);
-        }
-    }, options.countries.map((country) => React.createElement("option", {
-        key: country.code,
-        value: country.code
-    }, country.label))));
+function renderWizardBreadcrumbs(options) {
+  const method = paymentMethods.find((candidate) => candidate.id === options.method);
+  const methodLabel = method?.title ?? checkoutLabels5.paymentMethod;
+  const routeLabel = options.selectedRoute === null || options.routeAssets.length <= 1 ? null : options.routeAssets.find((asset) => asset.id === options.selectedRoute)?.label ?? options.selectedRoute;
+  return React9.createElement(
+    "nav",
+    {
+      "aria-label": "Payment path",
+      className: orClasses6.breadcrumbs
+    },
+    React9.createElement(
+      "ul",
+      null,
+      React9.createElement(
+        "li",
+        null,
+        React9.createElement(
+          "button",
+          {
+            className: "link link-hover",
+            onClick: options.onChangeMethod,
+            type: "button"
+          },
+          checkoutLabels5.switchPaymentMethod
+        )
+      ),
+      routeLabel === null ? React9.createElement(
+        "li",
+        null,
+        React9.createElement("span", { className: orClasses6.breadcrumbCurrent }, methodLabel)
+      ) : React9.createElement(
+        React9.Fragment,
+        null,
+        React9.createElement(
+          "li",
+          null,
+          React9.createElement(
+            "button",
+            {
+              className: "link link-hover",
+              onClick: options.onChangeRoute,
+              type: "button"
+            },
+            methodLabel
+          )
+        ),
+        React9.createElement(
+          "li",
+          null,
+          React9.createElement("span", { className: orClasses6.breadcrumbCurrent }, routeLabel)
+        )
+      )
+    )
+  );
+}
+function swapOptionsForRoute(routeKey, options) {
+  return options.filter((option) => swapAssetMatchesRoute(routeKey, option.pay_in_asset));
+}
+function selectCurrentSwapInvoice(checkout, local, dismissedInvoiceId) {
+  const fromCheckout = checkout?.invoices.find(
+    (invoice) => invoice.rail === "swap" && invoice.swap !== void 0 && invoice.invoice_id !== dismissedInvoiceId
+  );
+  if (local === null || local.invoice_id === dismissedInvoiceId) return fromCheckout;
+  const matched = checkout?.invoices.find((invoice) => invoice.invoice_id === local.invoice_id) ?? local;
+  return overlaySwapRefundStaging(matched, local);
 }
 function renderRoutePicker(options) {
-    return React.createElement("div", {
-        className: `or-route-picker or-route-picker-${options.method}`
-    }, options.assets.map((asset) => {
-        return React.createElement("button", {
-            className: asset.selected ? "selected" : "",
-            key: asset.id,
-            onClick: () => options.onSelectRoute(asset.id),
-            type: "button"
-        }, React.createElement("img", {
-            alt: "",
-            src: asset.icon
-        }), React.createElement("span", null, asset.label), React.createElement("small", null, asset.subtitle));
-    }));
+  return React9.createElement(
+    "div",
+    {
+      className: orClasses6.routePicker,
+      "data-method": options.method
+    },
+    options.assets.map((asset) => {
+      return React9.createElement(
+        "button",
+        {
+          className: asset.selected ? orClasses6.routeButtonSelected : orClasses6.routeButton,
+          key: asset.id,
+          onClick: () => options.onSelectRoute(asset.id),
+          type: "button"
+        },
+        React9.createElement("img", {
+          alt: "",
+          className: orClasses6.methodIcon,
+          src: asset.icon
+        }),
+        React9.createElement("span", { className: orClasses6.methodTitle }, asset.label),
+        React9.createElement("small", { className: orClasses6.methodDetail }, asset.subtitle)
+      );
+    })
+  );
 }
-function joinClassNames(...values) {
-    const joined = values.filter(Boolean).join(" ");
-    return joined === "" ? undefined : joined;
+
+// src/checkout.ts
+function Checkout(props) {
+  validateCheckoutProps({
+    framework: "@openreceive/react",
+    checkout: props.checkout,
+    reference: props.reference,
+    metadata: props.metadata,
+    syncUrl: props.syncUrl,
+    resumePathPrefix: props.resumePathPrefix,
+    routeReference: props.routeReference
+  });
+  const { checkout } = props;
+  if (checkout !== void 0) {
+    return React10.createElement(CheckoutSnapshotMode, {
+      ...props,
+      checkout,
+      prefix: props.prefix ?? OPENRECEIVE_DEFAULT_PREFIX
+    });
+  }
+  return React10.createElement(CheckoutCreate, props);
+}
+function CheckoutSnapshotMode(props) {
+  const { checkout } = props;
+  const identity = `${checkout.checkout_id} ${checkout.reference}`;
+  const [current, setCurrent] = React10.useState(checkout);
+  const lastIdentityRef = React10.useRef(identity);
+  React10.useEffect(() => {
+    if (lastIdentityRef.current !== identity) {
+      lastIdentityRef.current = identity;
+      setCurrent(checkout);
+    }
+  }, [identity, checkout]);
+  const onSwapStarted = React10.useCallback((invoice) => {
+    setCurrent((previous) => mergeAttemptIntoSnapshot(invoice, previous));
+  }, []);
+  return React10.createElement(CheckoutView, {
+    ...props,
+    checkout: current,
+    onSwapStarted
+  });
+}
+function CheckoutCreate(props) {
+  const reference = props.reference;
+  const resolvedPrefix = props.prefix ?? OPENRECEIVE_DEFAULT_PREFIX;
+  const {
+    onError,
+    metadata,
+    createFetch,
+    className,
+    classNames,
+    syncUrl = false,
+    resumePathPrefix = "/checkout",
+    routeReference
+  } = props;
+  const [created, setCreated] = React10.useState({ status: "pending" });
+  const [attempt, setAttempt] = React10.useState(0);
+  const onErrorRef = React10.useRef(onError);
+  onErrorRef.current = onError;
+  const metadataRef = React10.useRef(metadata);
+  metadataRef.current = metadata;
+  const createFetchRef = React10.useRef(createFetch);
+  createFetchRef.current = createFetch;
+  const createdCheckoutRef = React10.useRef(created.checkout);
+  createdCheckoutRef.current = created.checkout;
+  const session = useCheckoutSession({
+    snapshot: () => createdCheckoutRef.current,
+    reference: () => reference,
+    requestCheckout: (id) => requestCheckout({
+      prefix: resolvedPrefix,
+      reference: id,
+      ...metadataRef.current === void 0 ? {} : { metadata: metadataRef.current },
+      ...createFetchRef.current === void 0 ? {} : { fetch: createFetchRef.current }
+    }),
+    // One stable CheckoutView across the mint: swapping the rendered shell
+    // remounted PaymentWizard and wiped the payer's method selection.
+    onSnapshot: (checkout) => setCreated({ status: "ready", checkout }),
+    onError: (error) => onErrorRef.current?.(error)
+  });
+  React10.useEffect(() => {
+    if (syncUrl) {
+      enterCheckoutResumePath(reference, {
+        pathPrefix: resumePathPrefix,
+        ...routeReference === void 0 ? {} : { routeReference }
+      });
+    }
+  }, [syncUrl, reference, resumePathPrefix, routeReference]);
+  React10.useEffect(() => {
+    let cancelled = false;
+    setCreated({ status: "pending" });
+    prepareCheckout({
+      prefix: resolvedPrefix,
+      reference,
+      ...createFetchRef.current === void 0 ? {} : { fetch: createFetchRef.current }
+    }).then((checkout) => {
+      if (!cancelled) setCreated({ status: "ready", checkout });
+    }).catch((error) => {
+      if (cancelled) return;
+      onErrorRef.current?.(error);
+      setCreated({
+        status: "error",
+        ...error instanceof Error && error.message.length > 0 ? { errorMessage: error.message } : {}
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [reference, resolvedPrefix, attempt]);
+  const onSwapStarted = React10.useCallback(
+    (invoice) => {
+      setCreated((current) => {
+        if (current.status !== "ready") return current;
+        return {
+          status: "ready",
+          checkout: mergeAttemptIntoCheckout(invoice, current.checkout, reference)
+        };
+      });
+    },
+    [reference]
+  );
+  if (created.status === "ready" && created.checkout !== void 0) {
+    return React10.createElement(CheckoutView, {
+      ...props,
+      checkout: created.checkout,
+      prefix: resolvedPrefix,
+      mintingLightning: session.mintingLightning,
+      onRequestLightning: session.ensureLightning,
+      onSwapStarted
+    });
+  }
+  if (created.status === "error") {
+    return React10.createElement(
+      "section",
+      {
+        className: joinClassNames(
+          className,
+          classNames?.root,
+          orClasses7.creating,
+          "openreceive-checkout-error"
+        ),
+        [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.root]: ""
+      },
+      React10.createElement("p", { role: "alert" }, "Could not start checkout."),
+      // The thrown error carries the server's payer-facing text (e.g. the
+      // rate-limit message or "Exchange rates are temporarily unavailable").
+      created.errorMessage === void 0 ? null : React10.createElement("p", null, created.errorMessage),
+      React10.createElement(
+        "button",
+        {
+          type: "button",
+          className: orClasses7.btn,
+          onClick: () => setAttempt((count) => count + 1)
+        },
+        "Try again"
+      )
+    );
+  }
+  return React10.createElement(
+    "section",
+    {
+      className: joinClassNames(
+        className,
+        classNames?.root,
+        orClasses7.creating,
+        "openreceive-checkout-creating"
+      ),
+      [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.root]: ""
+    },
+    React10.createElement("span", {
+      className: orClasses7.spinner,
+      "aria-hidden": "true"
+    }),
+    React10.createElement("p", null, "Creating checkout\u2026")
+  );
+}
+function CheckoutView(props) {
+  const {
+    checkout,
+    // Create-mode props are consumed by the Checkout dispatcher / CheckoutCreate wrapper; drop
+    // them here so they never leak onto the rendered <section>.
+    reference: _reference,
+    // The dispatcher and CheckoutCreate both resolve this before rendering the
+    // view, so the default below only guards a direct CheckoutView call.
+    prefix = OPENRECEIVE_DEFAULT_PREFIX,
+    metadata: _metadata,
+    createFetch: _createFetch,
+    syncUrl: _syncUrl,
+    resumePathPrefix: _resumePathPrefix,
+    routeReference: _routeReference,
+    onRequestLightning,
+    onSwapStarted,
+    mintingLightning = false,
+    qrEncoder,
+    logger,
+    decodeLinkUrl,
+    onCopy,
+    onOpenWallet,
+    onError,
+    refreshStatus,
+    onState,
+    onSettled,
+    onProviderCopy,
+    onStartOver,
+    polling,
+    pollIntervalMs,
+    paymentWizard = true,
+    themeToggle = true,
+    defaultTheme,
+    storageKey,
+    components,
+    classNames,
+    children,
+    className,
+    ...sectionProps
+  } = props;
+  const checkoutModel = useCheckout({
+    checkout,
+    logger,
+    onCopy,
+    onOpenWallet,
+    onError,
+    refreshStatus,
+    prefix,
+    onState,
+    onSettled,
+    polling,
+    ...pollIntervalMs === void 0 ? {} : { pollIntervalMs }
+  });
+  const theme = useTheme({
+    defaultTheme,
+    storageKey
+  });
+  const ownsTheme = themeToggle && !theme.fromScope;
+  const [swapFocused, setSwapFocused] = React10.useState(false);
+  const QRCodeComponent = components?.QRCode ?? QRCode;
+  const InvoiceSummaryComponent = components?.InvoiceSummary ?? InvoiceSummary;
+  const CopyButton = components?.CopyButton ?? CopyInvoiceButton;
+  const OpenWalletButtonComponent = components?.OpenWalletButton;
+  const ButtonComponent = components?.Button;
+  const PaymentStateComponent = components?.PaymentState ?? PaymentState;
+  const customChildren = typeof children === "function" ? children(checkoutModel) : children;
+  const expired = checkoutModel.status === "expired";
+  const settled = checkoutModel.status === "settled";
+  const showLightning = !!checkoutModel.invoice && !swapFocused && !expired;
+  const hideLightning = !showLightning && !expired && !settled;
+  const showSummaryMeta = checkoutModel.status === "settled" || checkoutModel.status === "expired";
+  const fiatCurrency = checkoutModel.fiat_quote?.fiat?.currency;
+  const decodeInvoiceHref = createLightningInvoiceDecodeUrl2(checkoutModel.invoice, decodeLinkUrl);
+  const startOver = () => {
+    onStartOver?.();
+  };
+  const lightningPane = hideLightning || expired || settled ? null : React10.createElement(
+    "div",
+    {
+      key: "lightning-pane",
+      className: joinClassNames(orClasses7.lightningPane, classNames?.lightningPane)
+    },
+    React10.createElement(QRCodeComponent, {
+      key: "qr",
+      invoice: checkoutModel.invoice,
+      encoder: qrEncoder,
+      onError,
+      className: joinClassNames(orClasses7.qr, classNames?.qr)
+    }),
+    React10.createElement(SatsDetail, {
+      key: "sats-detail",
+      amountLabel: checkoutModel.amountLabel,
+      fiatLabel: checkoutModel.fiatLabel,
+      fiatCurrency,
+      className: classNames?.satsDetail
+    })
+  );
+  return React10.createElement(
+    "section",
+    {
+      ...sectionProps,
+      className: joinClassNames(className, orClasses7.root, classNames?.root),
+      [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.root]: "",
+      // Under ThemeScope, inherit data-theme from the page. Standalone Checkout owns it.
+      ...ownsTheme ? theme.attributes : {}
+    },
+    customChildren === void 0 ? [
+      ownsTheme ? React10.createElement(ThemeToggle, {
+        key: "theme",
+        className: classNames?.themeToggle,
+        theme: theme.theme,
+        resolvedTheme: theme.resolvedTheme,
+        onThemeChange: theme.setTheme,
+        ButtonComponent
+      }) : null,
+      mintingLightning ? React10.createElement(
+        "div",
+        {
+          key: "minting-lightning",
+          className: orClasses7.creating
+        },
+        React10.createElement("span", {
+          className: orClasses7.spinner,
+          "aria-hidden": "true"
+        }),
+        React10.createElement("p", null, checkoutLabels6.preparingPayment)
+      ) : null,
+      hideLightning ? null : React10.createElement(
+        "div",
+        {
+          key: "payment-layout",
+          className: expired || settled ? orClasses7.paymentLayoutExpired : orClasses7.paymentLayout
+        },
+        lightningPane,
+        React10.createElement(
+          "div",
+          {
+            key: "payment-info",
+            className: orClasses7.paymentInfo
+          },
+          expired || settled ? null : React10.createElement(
+            "p",
+            {
+              key: "invoice-title",
+              className: joinClassNames(
+                orClasses7.invoiceTitle,
+                classNames?.invoiceTitle
+              )
+            },
+            checkoutLabels6.bitcoinLightningInvoice
+          ),
+          React10.createElement(WaitingState, {
+            key: "waiting",
+            waiting: checkoutModel.waiting,
+            statusTitle: checkoutModel.statusTitle,
+            statusDetail: checkoutModel.statusDetail,
+            settled,
+            className: classNames?.waiting
+          }),
+          checkoutModel.countdownLabel === void 0 ? null : React10.createElement(
+            "div",
+            {
+              key: "countdown",
+              className: joinClassNames(orClasses7.countdown, classNames?.countdown)
+            },
+            checkoutModel.countdownPrefix,
+            " ",
+            React10.createElement(
+              "strong",
+              { className: orClasses7.countdownStrong },
+              checkoutModel.countdownLabel
+            )
+          ),
+          showSummaryMeta ? React10.createElement(InvoiceSummaryComponent, {
+            key: "summary",
+            status: checkoutModel.status,
+            PaymentStateComponent,
+            className: classNames?.summary,
+            classNames
+          }) : null,
+          settled ? React10.createElement(PaymentData, {
+            key: "payment-data",
+            // The model IS the checkout state, so the payment-data
+            // panel reads the same derivation the rest of the screen
+            // does. It used to re-flatten the snapshot separately,
+            // which reported the displayed ATTEMPT's transaction /
+            // workflow state on a checkout the state already knows
+            // is paid.
+            source: checkoutModel,
+            className: classNames?.details
+          }) : expired ? React10.createElement(
+            "div",
+            {
+              key: "expired-actions",
+              className: joinClassNames(orClasses7.actions, classNames?.actions),
+              [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.actions]: ""
+            },
+            React10.createElement(
+              ButtonComponent ?? "button",
+              {
+                type: "button",
+                className: orClasses7.btn,
+                onClick: startOver
+              },
+              checkoutLabels6.startOver
+            )
+          ) : React10.createElement(
+            "div",
+            {
+              key: "actions",
+              className: joinClassNames(orClasses7.actions, classNames?.actions),
+              [OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES3.actions]: ""
+            },
+            React10.createElement(CopyButton, {
+              key: "copy-invoice",
+              invoice: checkoutModel.invoice,
+              copyInvoice: checkoutModel.copyInvoice,
+              onError,
+              logger,
+              ButtonComponent,
+              className: classNames?.copyButton
+            }),
+            // Opt-in slot: the default checkout ships no wallet button, so a
+            // desktop payer is never sent to a handler that does not exist.
+            OpenWalletButtonComponent === void 0 ? null : React10.createElement(OpenWalletButtonComponent, {
+              key: "open-wallet",
+              invoice: checkoutModel.invoice,
+              openWallet: checkoutModel.openWallet,
+              onError,
+              logger,
+              ButtonComponent,
+              className: classNames?.openWalletButton
+            }),
+            decodeInvoiceHref === void 0 ? null : React10.createElement(
+              "a",
+              {
+                key: "decode-invoice",
+                className: orClasses7.btn,
+                href: decodeInvoiceHref,
+                rel: "noreferrer",
+                target: "_blank"
+              },
+              checkoutLabels6.decodeInvoice
+            )
+          )
+        )
+      ),
+      paymentWizard && !settled && (!expired || swapFocused) ? React10.createElement(PaymentWizard, {
+        key: "wizard",
+        // Only pass invoice when it's a real bolt11 (non-empty, non-deferred).
+        invoice: checkoutModel.invoice || void 0,
+        checkout: checkoutModel.checkout,
+        className: classNames?.wizard,
+        logger,
+        onError,
+        onSwapFocusChange: setSwapFocused,
+        prefix,
+        qrEncoder,
+        decodeLinkUrl,
+        logContext: getCheckoutLogContext({
+          invoice_id: checkoutModel.invoice_id,
+          payment_hash: checkoutModel.payment_hash,
+          amount_msats: checkoutModel.amount_msats
+        }),
+        onProviderCopy,
+        onCopy,
+        onRequestLightning,
+        onSwapStarted
+      }) : null
+    ] : customChildren
+  );
+}
+
+// src/index.ts
+import { resolveTransactionDetailRows as resolveTransactionDetailRows2 } from "@openreceive/browser/headless";
+
+// src/view-model.ts
+import {
+  createCheckoutState as createCheckoutState2,
+  selectCheckoutDisplayInvoice as selectCheckoutDisplayInvoice2,
+  deriveStatus as deriveStatus2
+} from "@openreceive/browser/headless";
+function deriveCheckoutOrderStatus(snapshot) {
+  if (snapshot.status === "paid") return "settled";
+  if (snapshot.status === "expired") return "expired";
+  const invoice = selectCheckoutDisplayInvoice2(snapshot);
+  return invoice === void 0 ? "pending" : deriveStatus2(invoice);
+}
+function createCheckoutViewModel(data) {
+  return {
+    ...createCheckoutState2(data.checkout, { logger: false }),
+    status: deriveCheckoutOrderStatus(data.checkout)
+  };
 }
+export {
+  Checkout,
+  CheckoutProvider,
+  CopyInvoiceButton,
+  InvoiceSummary,
+  OpenWalletButton,
+  PaymentData,
+  PaymentState,
+  PaymentWizard,
+  QRCode,
+  SatsDetail,
+  ThemeScope,
+  ThemeToggle,
+  TransactionDetails,
+  WaitingState,
+  createCheckoutViewModel,
+  renderSwapDepositPanel,
+  resolveTransactionDetailRows2 as resolveTransactionDetailRows,
+  useCheckout,
+  useCheckoutContext,
+  useTheme
+};