@openreceive/elements 0.1.1 → 0.2.2

package/dist/chunk-46RMHGRA.js

@@ -0,0 +1,2488 @@
+// src/index.ts
+import {
+  createThemeToggleElement,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES4,
+  OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS as OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS2,
+  OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME as OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME2,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES as OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES2,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_EVENTS,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME as OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME2
+} from "@openreceive/browser/headless";
+
+// src/define-elements.ts
+import {
+  buildMethodGridEntries as buildMethodGridEntries2,
+  copyInvoice,
+  createCheckoutActionEvent,
+  createCheckoutController,
+  createCheckoutErrorEvent,
+  createCheckoutProviderCopyEvent,
+  createCheckoutSnapshotFromInvoice as createCheckoutSnapshotFromInvoice2,
+  createCheckoutStateEvent,
+  createCheckoutStatusModel as createCheckoutStatusModel2,
+  createPaymentWizardSelection,
+  createSwapDisplayModel as createSwapDisplayModel2,
+  createThemeChangeEvent,
+  createQrPayloadSvg,
+  createQrSvg,
+  deriveStatus as deriveStatus2,
+  enterCheckoutResumePath,
+  findSwapGridGroup as findSwapGridGroup2,
+  getSwapRefundFormError,
+  OPENRECEIVE_CHECKOUT_DATA_SELECTORS,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3,
+  OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS,
+  OPENRECEIVE_CHECKOUT_ELEMENT_PART_SELECTORS,
+  OPENRECEIVE_DEFAULT_PREFIX as OPENRECEIVE_DEFAULT_PREFIX2,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7,
+  OPENRECEIVE_PAYMENT_WIZARD_SELECTORS as OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_PART_SELECTORS,
+  OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME,
+  paymentMethods as paymentMethods2,
+  orClasses as orClasses7,
+  overlaySwapRefundStaging,
+  parseBooleanAttribute,
+  parseMethodPickerKey,
+  parseOptionalInteger,
+  parsePaymentMethod,
+  parseResolvedTheme,
+  parseThemePreference,
+  requestSwapRefund,
+  syncStoredThemeControls,
+  toggleStoredThemeControls,
+  updatePaymentWizardSelection,
+  updateSelectedSwapNetworks
+} from "@openreceive/browser/headless";
+
+// src/element-checkout-session.ts
+import {
+  applyCheckoutElementAttributes,
+  createCheckoutElementAttributes,
+  createCheckoutSession,
+  mergeAttemptIntoCheckout,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES,
+  OPENRECEIVE_DEFAULT_PREFIX,
+  prepareCheckout,
+  requestCheckout
+} from "@openreceive/browser/headless";
+function createElementCheckoutSession(host) {
+  let creating = false;
+  let createdKey;
+  let createError;
+  let applyingOwnAttributes = 0;
+  function currentPrefix() {
+    return host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES.prefix) ?? OPENRECEIVE_DEFAULT_PREFIX;
+  }
+  function currentReference() {
+    const reference = host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES.reference);
+    return reference === null || reference.length === 0 ? void 0 : reference;
+  }
+  function currentCreateKey() {
+    const reference = currentReference();
+    return reference === void 0 ? void 0 : `${currentPrefix()}::${reference}`;
+  }
+  function writeOwnAttributes(write) {
+    applyingOwnAttributes += 1;
+    try {
+      write();
+    } finally {
+      applyingOwnAttributes -= 1;
+    }
+  }
+  function applyOwnAttributes(attributes) {
+    writeOwnAttributes(() => {
+      applyCheckoutElementAttributes(host.element, attributes);
+    });
+  }
+  function publishSnapshot(snapshot) {
+    host.handleControllerSnapshot(snapshot);
+    const prefix = currentPrefix();
+    applyOwnAttributes(
+      createCheckoutElementAttributes(snapshot, {
+        prefix,
+        ...host.currentThemeOption()
+      })
+    );
+    host.render();
+    host.startCheckoutController();
+  }
+  const session = createCheckoutSession({
+    snapshot: () => host.latestCheckoutSnapshot(),
+    reference: currentReference,
+    requestCheckout: (reference) => {
+      const metadata = host.createMetadata();
+      return requestCheckout({
+        prefix: currentPrefix(),
+        reference,
+        ...metadata === void 0 ? {} : { metadata },
+        fetch: globalThis.fetch
+      });
+    },
+    onSnapshot: publishSnapshot,
+    swapPrefix: () => host.resolvePollPrefix(currentReference()),
+    fetch: () => globalThis.fetch,
+    swapSelection: host.swapSelection,
+    // A swap attempt is NOT written back as attributes: a bolt11 attribute
+    // would take the element out of create mode. It re-keys the poll
+    // controller onto the merged snapshot and nothing else.
+    onSwapStarted: (invoice) => {
+      const reference = currentReference();
+      if (reference === void 0) return;
+      const previous = host.latestCheckoutSnapshot() ?? host.currentCheckoutSnapshot();
+      host.handleControllerSnapshot(mergeAttemptIntoCheckout(invoice, previous, reference));
+      host.startCheckoutController();
+    },
+    logger: host.logger,
+    onError: (error) => host.dispatchError(error),
+    onChange: () => host.render()
+  });
+  async function createCheckout() {
+    const reference = currentReference();
+    if (reference === void 0) return;
+    const prefix = currentPrefix();
+    const key = `${prefix}::${reference}`;
+    if (creating) return;
+    if (createdKey === key) {
+      host.startCheckoutController();
+      return;
+    }
+    creating = true;
+    createdKey = key;
+    session.resetLightningRequest();
+    try {
+      createError = void 0;
+      host.syncResumePath(reference);
+      const checkout = await prepareCheckout({
+        prefix,
+        reference,
+        fetch: globalThis.fetch
+      });
+      if (currentCreateKey() !== key) return;
+      host.handleControllerSnapshot(checkout);
+      applyOwnAttributes(
+        createCheckoutElementAttributes(checkout, {
+          prefix,
+          ...host.currentThemeOption()
+        })
+      );
+      host.render();
+      host.startCheckoutController();
+    } catch (error) {
+      if (currentCreateKey() !== key) return;
+      createError = error instanceof Error && error.message.length > 0 ? error.message : "Could not start checkout.";
+      host.dispatchError(error);
+      host.render();
+    } finally {
+      creating = false;
+      const current = currentCreateKey();
+      if (host.element.isConnected && current !== void 0 && current !== key && host.isCreateMode()) {
+        void createCheckout();
+      }
+    }
+  }
+  function retryCreateCheckout() {
+    createdKey = void 0;
+    createError = void 0;
+    host.render();
+    void createCheckout();
+  }
+  return {
+    get createError() {
+      return createError;
+    },
+    get wizardError() {
+      return session.wizardError;
+    },
+    get swapStartError() {
+      return session.swapStartError;
+    },
+    get lightningRequested() {
+      return session.lightningRequested;
+    },
+    get mintingLightning() {
+      return session.mintingLightning;
+    },
+    get startingSwapAsset() {
+      return session.startingSwapAsset;
+    },
+    get swapQuotes() {
+      return session.swapQuotes;
+    },
+    get applyingOwnAttributes() {
+      return applyingOwnAttributes > 0;
+    },
+    createCheckout,
+    retryCreateCheckout,
+    ensureLightning: () => session.ensureLightning(),
+    startSwap: (payInAsset) => session.startSwap(payInAsset),
+    applyOwnAttributes,
+    writeOwnAttributes,
+    forgetCreateKey() {
+      createdKey = void 0;
+    }
+  };
+}
+
+// src/dom-helpers.ts
+import {
+  createDetailExternalLink,
+  createTransientFeedbackController,
+  escapeHtml,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES,
+  OPENRECEIVE_PAYMENT_WIZARD_SELECTORS,
+  checkoutLabels,
+  orClasses
+} from "@openreceive/browser/headless";
+var COPY_INVOICE_ICON = `<svg class="${orClasses.copyIcon}" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false"><rect x="5" y="5" width="8" height="9" rx="1.5" stroke="currentColor" stroke-width="1.5"/><path d="M3.5 11V3.5A1.5 1.5 0 0 1 5 2h5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+var elementCopyFeedbackControllers = /* @__PURE__ */ new WeakMap();
+function readElementFiatQuote(element) {
+  const currency = element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.fiatCurrency);
+  const value = element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.fiatValue);
+  if (currency === null || value === null) return void 0;
+  return {
+    fiat: {
+      currency,
+      value
+    }
+  };
+}
+function readElementNumberAttribute(element, attribute) {
+  const raw = element.getAttribute(attribute);
+  if (raw === null || raw.trim() === "") return void 0;
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) ? parsed : void 0;
+}
+function readElementAmountMsats(element) {
+  return readElementNumberAttribute(element, OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.amountMsats);
+}
+function readElementExpiresAt(element) {
+  return readElementNumberAttribute(element, OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.expiresAt);
+}
+function parseElementRail(value) {
+  if (value === "swap") return "swap";
+  if (value === "checkout_lock") return "checkout_lock";
+  return "lightning";
+}
+function showElementCopyFeedback(button) {
+  if (button === null) return;
+  let controller = elementCopyFeedbackControllers.get(button);
+  if (controller === void 0) {
+    const labelEl = button.querySelector(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS.swapCopyLabel);
+    const resetValue = button.getAttribute("aria-label")?.trim() || labelEl?.textContent?.trim() || button.textContent?.trim() || checkoutLabels.copyInvoice;
+    controller = createTransientFeedbackController({
+      resetValue,
+      onValue: (label) => {
+        if (!button.isConnected) return;
+        if (button instanceof HTMLElement && button.hasAttribute("aria-label")) {
+          button.setAttribute("aria-label", label);
+          button.setAttribute("title", label);
+        }
+        if (labelEl instanceof HTMLElement) {
+          labelEl.textContent = label;
+          return;
+        }
+        if (!(button instanceof HTMLElement && button.querySelector("svg"))) {
+          button.textContent = label;
+        }
+      }
+    });
+    elementCopyFeedbackControllers.set(button, controller);
+  }
+  controller.show(checkoutLabels.copied);
+}
+function wireSwapSelectAllInputs(root) {
+  for (const input of root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS.swapSelectAll)) {
+    if (!(input instanceof HTMLInputElement)) continue;
+    const selectAll = () => {
+      input.select();
+    };
+    input.addEventListener("focus", selectAll);
+    input.addEventListener("click", selectAll);
+    input.addEventListener("mouseup", (event) => {
+      event.preventDefault();
+    });
+    input.addEventListener("select", () => {
+      if (input.selectionStart !== 0 || input.selectionEnd !== input.value.length) {
+        input.setSelectionRange(0, input.value.length);
+      }
+    });
+  }
+}
+function renderElementSwapCopyDetailHtml(label, value, options = {}) {
+  const displayValue = 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 ?? checkoutLabels.viewOnExplorer
+  };
+  const external = link === void 0 ? "" : `<a
+        part="swap-external"
+        class="${orClasses.swapDetailsLink}"
+        href="${escapeHtml(link.href)}"
+        rel="noreferrer"
+        target="_blank"
+      >${escapeHtml(link.hrefLabel)}</a>`;
+  const valueField = options.selectable === true ? `<input
+          class="${orClasses.swapDetailsInput}"
+          type="text"
+          readonly
+          value="${escapeHtml(displayValue)}"
+          aria-label="${escapeHtml(label)}"
+          ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES.swapSelectAll}
+        />` : `<code class="${orClasses.swapDetailsCode}">${escapeHtml(displayValue)}</code>`;
+  return `
+    <dt class="${orClasses.swapDetailsDt}">${escapeHtml(label)}</dt>
+    <dd class="${orClasses.swapDetailsDd}">
+      ${valueField}
+      <div class="${orClasses.swapDetailsActions}">
+        <button
+          part="swap-copy"
+          class="${orClasses.detailCopy}"
+          aria-label="Copy"
+          title="Copy"
+          ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES.swapCopy}="${escapeHtml(value)}"
+          type="button"
+        >${COPY_INVOICE_ICON}</button>
+        ${external}
+      </div>
+    </dd>
+  `;
+}
+
+// src/element-styles.ts
+import { checkoutElementStyles } from "@openreceive/browser/headless";
+var checkoutStyleTag = `<style>${checkoutElementStyles}</style>`;
+var sheetsByDocument = /* @__PURE__ */ new WeakMap();
+function adoptCheckoutStyles(root) {
+  const ownerDocument = root.ownerDocument;
+  if (ownerDocument === null) return false;
+  const view = ownerDocument.defaultView;
+  const SheetConstructor = view?.CSSStyleSheet ?? globalThis.CSSStyleSheet;
+  if (SheetConstructor === void 0 || !Array.isArray(root.adoptedStyleSheets)) return false;
+  let sheet = sheetsByDocument.get(ownerDocument);
+  if (sheet === void 0) {
+    try {
+      const created = new SheetConstructor();
+      if (typeof created.replaceSync !== "function") return false;
+      created.replaceSync(checkoutElementStyles);
+      sheet = created;
+    } catch {
+      return false;
+    }
+    sheetsByDocument.set(ownerDocument, sheet);
+  }
+  if (!root.adoptedStyleSheets.includes(sheet)) {
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+  }
+  return true;
+}
+
+// src/render-checkout.ts
+import {
+  assertDisplayInvoice,
+  createCheckoutStatusModel,
+  createLightningInvoiceDecodeUrl as createLightningInvoiceDecodeUrl2,
+  createPaymentDataEntries,
+  deriveCheckoutStateLabels,
+  deriveStatus,
+  escapeHtml as escapeHtml6,
+  formatAmountCaption,
+  OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
+  OPENRECEIVE_CHECKOUT_ELEMENT_PARTS,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES6,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_PARTS,
+  checkoutLabels as checkoutLabels6,
+  orClasses as orClasses6
+} from "@openreceive/browser/headless";
+
+// src/render-wizard.ts
+import {
+  assetButtonClasses,
+  buildMethodGridEntries,
+  checkoutLabels as checkoutLabels5,
+  createPaymentWizardModel,
+  createSwapUnavailableModel,
+  createWizardRouteAssetDisplays,
+  createWizardRouteDisplays,
+  escapeHtml as escapeHtml5,
+  findSwapGridGroup,
+  formatChooseNetworkHeading,
+  formatNetworkSummary,
+  getNetworkIcon,
+  getPaymentMethodIcon,
+  getSwapOptionIcon,
+  getWizardEmptyMessage,
+  networkButtonClasses,
+  networkCheckClasses,
+  networkMobileRevealClasses,
+  networkSummaryIconClasses,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5,
+  orClasses as orClasses5,
+  paymentAccentId,
+  paymentMethods,
+  swapAssetMatchesRoute as swapAssetMatchesRoute2,
+  swapGroupLimitOption,
+  swapPickerKey,
+  wizardNetworkGroupIds
+} from "@openreceive/browser/headless";
+
+// src/render-provider-tutorial.ts
+import {
+  createLightningInvoiceDecodeUrl,
+  escapeHtml as escapeHtml2,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2,
+  checkoutLabels as checkoutLabels2,
+  orClasses as orClasses2
+} from "@openreceive/browser/headless";
+function renderProviderOpenActionHtml(provider) {
+  if (provider.tutorials.length === 0) {
+    return `<a class="${orClasses2.providerOpen}" href="${escapeHtml2(provider.url)}" rel="noreferrer" target="_blank">${escapeHtml2(provider.openLabel)}</a>`;
+  }
+  return `
+    <button
+      part="provider-open"
+      class="${orClasses2.providerOpen}"
+      ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml2(provider.id)}"
+      ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="0"
+      type="button"
+    >${escapeHtml2(provider.openLabel)}</button>
+  `;
+}
+function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex, copied, lightningInvoice, decodeLinkUrl) {
+  if (activeProviderId === null) return "";
+  const provider = routes.flatMap((route) => route.providers).find((candidate) => candidate.id === activeProviderId);
+  if (provider === void 0 || provider.tutorials.length === 0) return "";
+  const totalSteps = provider.tutorials.length + 1;
+  const stepIndex = Math.max(0, Math.min(provider.tutorials.length, activeTutorialIndex));
+  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 = lightningInvoice === void 0 || lightningInvoice.trim() === "" ? void 0 : createLightningInvoiceDecodeUrl(lightningInvoice, decodeLinkUrl);
+  const decodeButton = decodeHref === void 0 ? "" : `<a part="tutorial-decode" class="${orClasses2.tutorialCopy}" href="${escapeHtml2(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml2(checkoutLabels2.decodeInvoice)}</a>`;
+  const body = stepIndex === 0 ? `
+        <div part="tutorial-intro" class="${orClasses2.tutorialIntro}">
+          <img part="tutorial-provider-logo" alt="" src="${escapeHtml2(provider.icon)}" class="${orClasses2.tutorialProviderLogo}">
+          <p>${escapeHtml2(checkoutLabels2.tutorialIntroPrefix)} ${escapeHtml2(provider.name)}.</p>
+          <p>${escapeHtml2(checkoutLabels2.tutorialIntroCopy)}</p>
+          <button part="tutorial-copy" class="${orClasses2.tutorialCopy}" type="button">${escapeHtml2(checkoutLabels2.copyInvoice)}</button>
+          ${decodeButton}
+          ${copied ? `<p part="tutorial-copy-message" class="${orClasses2.tutorialCopyMessage}">${escapeHtml2(checkoutLabels2.tutorialCopiedContinue)}</p>` : ""}
+        </div>
+      ` : `
+        <div part="tutorial-frame" class="${orClasses2.tutorialFrame}">
+          <img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${escapeHtml2(tutorial?.caption ?? "")}" src="${escapeHtml2(tutorial?.image ?? "")}">
+        </div>
+        <p part="tutorial-caption" class="${orClasses2.tutorialCaption}">${escapeHtml2(tutorial?.caption ?? "")}</p>
+      `;
+  return `
+    <div part="tutorial" class="${orClasses2.tutorialModal}" role="dialog" aria-modal="true" aria-label="${escapeHtml2(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml2(provider.name)}" tabindex="-1">
+      <div part="tutorial-dialog" class="${orClasses2.tutorialBox}">
+        <div part="tutorial-header" class="${orClasses2.tutorialHeader}">
+          <div part="tutorial-title" class="${orClasses2.tutorialTitle}">
+            <img part="tutorial-header-logo" alt="" src="${escapeHtml2(provider.icon)}" class="${orClasses2.tutorialHeaderLogo}">
+            <h3>${escapeHtml2(checkoutLabels2.tutorialTitlePrefix)} ${escapeHtml2(provider.name)}</h3>
+          </div>
+          <button
+            part="tutorial-close"
+            class="${orClasses2.tutorialClose}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}=""
+            type="button"
+            aria-label="${escapeHtml2(checkoutLabels2.tutorialClose)}"
+          >X</button>
+        </div>
+        ${body}
+        <div part="tutorial-steps" class="${orClasses2.tutorialSteps}" aria-hidden="true">
+          ${Array.from(
+    { length: totalSteps },
+    (_, index) => `
+            <span part="${index === stepIndex ? "tutorial-step-active" : "tutorial-step"}" class="${index === stepIndex ? orClasses2.tutorialStepActive : orClasses2.tutorialStep}"></span>
+          `
+  ).join("")}
+        </div>
+        <p part="tutorial-progress" class="${orClasses2.tutorialProgress}">Step ${stepIndex + 1} of ${totalSteps}</p>
+        <div part="tutorial-controls" class="${orClasses2.tutorialControls}">
+          <button
+            part="tutorial-nav"
+            class="${orClasses2.btn}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${escapeHtml2(provider.id)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="${previousIndex}"
+            type="button"
+            ${stepIndex === 0 ? "disabled" : ""}
+          >${escapeHtml2(checkoutLabels2.tutorialBack)}</button>
+          <button
+            part="tutorial-nav"
+            class="${orClasses2.btn}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorial}="${isFinalStep ? "" : escapeHtml2(provider.id)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES2.providerTutorialIndex}="${nextIndex}"
+            type="button"
+          >${escapeHtml2(isFinalStep ? checkoutLabels2.tutorialExit : checkoutLabels2.tutorialNext)}</button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// src/render-swap-panel.ts
+import {
+  createSwapDisplayModel,
+  escapeHtml as escapeHtml4,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4,
+  checkoutLabels as checkoutLabels4,
+  swapAssetMatchesRoute,
+  swapOptionLimitMessage,
+  orClasses as orClasses4
+} from "@openreceive/browser/headless";
+
+// src/transaction-details.ts
+import {
+  escapeHtml as escapeHtml3,
+  OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES3,
+  OPENRECEIVE_PAYMENT_WIZARD_SELECTORS as OPENRECEIVE_PAYMENT_WIZARD_SELECTORS2,
+  checkoutLabels as checkoutLabels3,
+  orClasses as orClasses3,
+  resolveTransactionDetailRows
+} from "@openreceive/browser/headless";
+function renderTransactionDetailsHtml(source, options = {}) {
+  const rows = resolveTransactionDetailRows(source);
+  if (rows.length === 0) return "";
+  const openAttr = options.open === true ? " open" : "";
+  const className = options.className ?? orClasses3.transactionDetails;
+  return `
+    <details part="transaction-details" class="${escapeHtml3(className)}"${openAttr}>
+      <summary class="${orClasses3.transactionDetailsTitle}">${escapeHtml3(checkoutLabels3.transactionDetails)}</summary>
+      <div class="${orClasses3.transactionDetailsContent}">
+        <dl part="swap-details" class="${orClasses3.swapDetails}">
+          ${rows.map(
+    (row) => renderElementSwapCopyDetailHtml(row.label, row.copyValue ?? row.value, {
+      displayValue: row.value,
+      ...row.href === void 0 ? {} : { href: row.href },
+      ...row.hrefLabel === void 0 ? {} : { hrefLabel: row.hrefLabel }
+    })
+  ).join("")}
+        </dl>
+      </div>
+    </details>
+  `;
+}
+function createTransactionDetailsElement(source, options = {}) {
+  const html = renderTransactionDetailsHtml(source, options);
+  if (html === "") return null;
+  const doc = options.document ?? globalThis.document;
+  const host = doc.createElement("div");
+  host.innerHTML = html.trim();
+  const details = host.firstElementChild;
+  if (!(details instanceof HTMLElement)) return null;
+  wireTransactionDetailsCopy(details, options.onCopyError);
+  return details;
+}
+function wireTransactionDetailsCopy(root, onCopyError) {
+  wireSwapSelectAllInputs(root);
+  for (const button of root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS2.swapCopy)) {
+    if (!(button instanceof HTMLButtonElement)) continue;
+    button.addEventListener("click", () => {
+      const value = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES3.swapCopy);
+      if (value === null || value === "") return;
+      void globalThis.navigator?.clipboard?.writeText(value).then(() => showElementCopyFeedback(button)).catch((error) => onCopyError?.(error));
+    });
+  }
+}
+
+// src/render-swap-panel.ts
+function renderElementSwapActionsHtml(routeKey, options, view) {
+  const shown = options.filter((option) => option.provider.length > 0).filter((option) => swapAssetMatchesRoute(routeKey, option.pay_in_asset));
+  if (shown.length === 0) return "";
+  return `
+    <div part="swap-actions" class="${orClasses4.swapActions}">
+      ${shown.map((option) => {
+    const disabled = option.available === false;
+    const limitMessage = elementsSwapLimitMessage(option, view);
+    const info = disabled ? limitMessage === void 0 ? "" : `<p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml4(limitMessage)}</p>` : option.pay_amount === void 0 ? "" : `<p part="swap-estimate" class="${orClasses4.swapEstimate}">Estimated ${escapeHtml4(option.pay_amount)} ${escapeHtml4(option.label)} to settle this checkout.</p>`;
+    return `
+        <div class="${orClasses4.swapAction}">
+        ${info}
+        <button
+          part="swap-start"
+          class="${orClasses4.swapStart}"
+          ${disabled ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapStart}="${escapeHtml4(option.pay_in_asset)}"`}
+          ${disabled ? 'disabled aria-disabled="true"' : ""}
+          type="button"
+        >${escapeHtml4(
+      checkoutLabels4.createPaymentAddress.replace("{asset}", option.label).replace("{network}", option.network_label)
+    )}</button>
+        </div>
+      `;
+  }).join("")}
+    </div>
+  `;
+}
+function elementsSwapLimitMessage(option, view) {
+  const checkout = view.amountMsats === void 0 ? void 0 : {
+    amount_msats: view.amountMsats,
+    ...view.fiat?.currency === void 0 || view.fiat.value === void 0 ? {} : { fiat: { currency: view.fiat.currency, value: view.fiat.value } }
+  };
+  return swapOptionLimitMessage(option, checkout);
+}
+function renderElementSwapPanelHtml(invoice, view = {}) {
+  const display = createSwapDisplayModel(invoice);
+  if (display === void 0) return "";
+  const backButton = `
+    <button part="swap-back" class="${orClasses4.swapBack}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapBack} type="button">${escapeHtml4(checkoutLabels4.payWithLightningInstead)}</button>
+  `;
+  const supportDetails = renderElementSwapSupportDetailsHtml(display);
+  const heading = `
+    <div part="swap-heading" class="${orClasses4.swapHeading}">
+      <strong class="${orClasses4.swapHeadingTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
+      <span class="${orClasses4.swapHeadingDetail}">${escapeHtml4(display.providerStateDetail)}</span>
+    </div>
+  `;
+  if (display.state === "creating") {
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        <div part="status" class="${orClasses4.paymentStatus}">
+          <span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
+          <div class="${orClasses4.paymentStatusBody}">
+            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
+            <p class="${orClasses4.paymentStatusDetail}">${escapeHtml4(display.providerStateDetail)}</p>
+          </div>
+        </div>
+        ${backButton}
+      </section>
+    `;
+  }
+  if (display.state === "deposit") {
+    const feeBreakdown = renderElementSwapFeeBreakdownHtml(display.feeBreakdown);
+    const waitingStatus = `
+      <div part="status" class="${orClasses4.paymentStatus}">
+        <span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
+        <div class="${orClasses4.paymentStatusBody}">
+          <div class="${orClasses4.swapWaitingTitle}">
+            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
+            <strong part="swap-countdown" class="${orClasses4.swapCountdown}">${escapeHtml4(display.countdownLabel)}</strong>
+          </div>
+          <p class="${orClasses4.paymentStatusDetail}">${escapeHtml4(display.providerStateDetail)}</p>
+        </div>
+      </div>
+    `;
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        <p part="swap-instruction" class="${orClasses4.swapInstruction}">Pay <strong>${escapeHtml4(display.depositAmount)} ${escapeHtml4(display.assetLabel)}</strong> to this address</p>
+        ${renderElementSwapNetworkWarningHtml(display)}
+        <div part="swap-deposit-layout" class="${orClasses4.swapDepositLayout}">
+          <div part="swap-qr" class="${orClasses4.swapQr}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapQr}="${escapeHtml4(display.qrPayload)}"></div>
+          <div part="swap-deposit-side" class="${orClasses4.swapDepositSide}">
+            <dl part="swap-details" class="${orClasses4.swapDetails}">
+              ${renderElementSwapCopyDetailHtml("Address", display.depositAddress, {
+      selectable: true
+    })}
+              ${display.depositMemo === void 0 ? "" : renderElementSwapCopyDetailHtml("Memo", display.depositMemo)}
+              ${renderElementSwapCopyDetailHtml("Amount", display.depositAmount, { selectable: true })}
+            </dl>
+            ${waitingStatus}
+            ${feeBreakdown}
+          </div>
+        </div>
+        ${backButton}
+      </section>
+    `;
+  }
+  if (display.state === "settled") {
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        ${heading}
+        <dl part="swap-details" class="${orClasses4.swapDetails}">
+          ${display.depositTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Deposit transaction", display.depositTxId, { kind: "tx", payInAsset: display.payInAsset })}
+          ${display.payoutTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Lightning payout", display.payoutTxId)}
+          ${display.providerOrderId === void 0 ? "" : renderElementSwapCopyDetailHtml("Provider order", display.providerOrderId)}
+        </dl>
+        ${renderElementTransactionDetailsHtml(invoice, view)}
+      </section>
+    `;
+  }
+  if (display.state === "progress") {
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        <div part="status" class="${orClasses4.paymentStatus}">
+          <span part="spinner" class="${orClasses4.spinner}" aria-hidden="true"></span>
+          <div class="${orClasses4.paymentStatusBody}">
+            <strong class="${orClasses4.paymentStatusTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
+            <p class="${orClasses4.paymentStatusDetail}">${escapeHtml4(display.providerStateDetail)}</p>
+          </div>
+        </div>
+        ${supportDetails}
+      </section>
+    `;
+  }
+  if (display.state === "expired") {
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        ${heading}
+        <p part="swap-warning" class="${orClasses4.swapWarning}">This payment address expired without a detected payment. Create a new payment address to try again.</p>
+        ${supportDetails}
+        ${backButton}
+      </section>
+    `;
+  }
+  if (display.state === "refund_required") {
+    const stagedRefundAddress = display.refundAddress;
+    const refundFacts = renderElementSwapRefundFactsHtml(display);
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        ${heading}
+        ${refundFacts}
+        <p part="swap-warning" class="${orClasses4.swapWarning}">Use a ${escapeHtml4(display.networkLabel)} address you control. Do not paste the deposit address.</p>
+        ${stagedRefundAddress === void 0 ? `
+          <form
+            part="swap-refund"
+            class="${orClasses4.swapRefund}"
+            novalidate
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml4(display.attemptId)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml4(display.payInAsset)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml4(display.networkLabel)}"
+            ${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
+          >
+            <input
+              class="${orClasses4.swapRefundInput}"
+              ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
+              name="refund_address"
+              placeholder="${escapeHtml4(checkoutLabels4.refundAddressPlaceholder.replace("{network}", display.networkLabel))}"
+              type="text"
+              autocomplete="off"
+              required
+            >
+            <p
+              part="swap-refund-error"
+              class="${orClasses4.swapRefundError}"
+              ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundError}
+              hidden
+              role="alert"
+            ></p>
+            <p part="swap-refund-hint" class="${orClasses4.swapRefundHint}">Make sure you control this ${escapeHtml4(display.networkLabel)} address. Refunds sent to the wrong address usually cannot be recovered.</p>
+            <button class="${orClasses4.btn}" type="submit">${escapeHtml4(checkoutLabels4.reviewRefundAddress)}</button>
+          </form>
+        ` : `
+          <form
+            part="swap-refund"
+            class="${orClasses4.swapRefund}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundForm}="${escapeHtml4(display.attemptId)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundPayInAsset}="${escapeHtml4(display.payInAsset)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml4(display.networkLabel)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundConfirm}="true"
+            ${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
+          >
+            <p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.confirmRefundTo.replace("{address}", stagedRefundAddress))}</p>
+            <input
+              ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
+              name="refund_address"
+              type="hidden"
+              value="${escapeHtml4(stagedRefundAddress)}"
+            >
+            <button class="${orClasses4.btn}" type="submit">${escapeHtml4(checkoutLabels4.confirmRefund)}</button>
+          </form>
+        `}
+        ${supportDetails}
+        ${renderElementSwapRefundReturnWarningHtml()}
+      </section>
+    `;
+  }
+  if (display.state === "refund_pending" || display.state === "refunded") {
+    const refundFacts = renderElementSwapRefundFactsHtml(display);
+    return `
+      <section part="swap-panel" class="${orClasses4.swapPanel}">
+        ${heading}
+        ${refundFacts}
+        <dl part="swap-details" class="${orClasses4.swapDetails}">
+          ${display.refundAddress === void 0 ? "" : renderElementSwapCopyDetailHtml("Refund address", display.refundAddress, { kind: "address", payInAsset: display.payInAsset })}
+          ${display.refundTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Refund transaction", display.refundTxId, { kind: "tx", payInAsset: display.payInAsset })}
+        </dl>
+        ${supportDetails}
+        ${renderElementSwapRefundReturnWarningHtml()}
+      </section>
+    `;
+  }
+  return `
+    <section part="swap-panel" class="${orClasses4.swapPanel}">
+      ${heading}
+      <p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.supportReviewNeeded)}</p>
+      ${supportDetails}
+      ${backButton}
+    </section>
+  `;
+}
+function renderElementSwapRefundReturnWarningHtml() {
+  return `
+    <p part="swap-refund-return" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.refundReturnWarning)}</p>
+  `;
+}
+function renderElementSwapRefundFactsHtml(display) {
+  const rows = [
+    display.depositReceivedAmount === void 0 ? "" : renderElementSwapCopyDetailHtml(
+      "Amount received",
+      `${display.depositReceivedAmount} ${display.assetLabel}`
+    ),
+    display.depositReceivedAmount === void 0 ? "" : renderElementSwapCopyDetailHtml(
+      "Amount required",
+      `${display.depositAmount} ${display.assetLabel}`
+    ),
+    display.refundAmount === void 0 ? "" : renderElementSwapCopyDetailHtml(
+      "Estimated refund",
+      `${display.refundAmount} ${display.assetLabel}`
+    )
+  ].join("");
+  if (rows.length === 0) return "";
+  return `<dl part="swap-details" class="${orClasses4.swapDetails}">${rows}</dl>`;
+}
+function renderElementSwapNetworkWarningHtml(display) {
+  const emphasisStart = display.networkWarning.indexOf(display.networkWarningEmphasis);
+  const before = emphasisStart === -1 ? escapeHtml4(display.networkWarning) : escapeHtml4(display.networkWarning.slice(0, emphasisStart));
+  const after = emphasisStart === -1 ? "" : escapeHtml4(
+    display.networkWarning.slice(emphasisStart + display.networkWarningEmphasis.length)
+  );
+  const emphasis = emphasisStart === -1 ? "" : `<strong class="${orClasses4.swapNetworkWarningEmphasis}">${escapeHtml4(display.networkWarningEmphasis)}</strong>`;
+  return `
+    <div part="swap-network-warning" role="alert" class="${orClasses4.swapNetworkWarning}">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="${orClasses4.swapNetworkWarningIcon}" aria-hidden="true">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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" />
+      </svg>
+      <div class="${orClasses4.swapNetworkWarningContent}">
+        <p class="${orClasses4.swapNetworkWarningTitle}">${escapeHtml4(display.networkWarningTitle)}</p>
+        <p class="${orClasses4.swapNetworkWarningBody}">${before}${emphasis}${after}</p>
+      </div>
+    </div>
+  `;
+}
+function renderElementTransactionDetailsHtml(invoice, view) {
+  const bolt11 = typeof invoice.invoice === "string" ? invoice.invoice : view.lightningInvoice;
+  return renderTransactionDetailsHtml({
+    ...view.reference === void 0 ? {} : { reference: view.reference },
+    ...view.checkoutId === void 0 ? {} : { checkout_id: view.checkoutId },
+    invoice_id: invoice.invoice_id,
+    ...bolt11 === void 0 ? {} : { invoice: bolt11 },
+    rail: invoice.rail,
+    ...invoice.payment_hash === void 0 ? view.paymentHash === void 0 ? {} : { payment_hash: view.paymentHash } : { payment_hash: invoice.payment_hash },
+    ...invoice.amount_msats === void 0 ? view.amountMsats === void 0 ? {} : { amount_msats: view.amountMsats } : { amount_msats: invoice.amount_msats },
+    ...invoice.fiat_quote === void 0 ? view.fiat?.currency === void 0 || view.fiat.value === void 0 ? {} : { fiat_quote: { fiat: { currency: view.fiat.currency, value: view.fiat.value } } } : { fiat_quote: invoice.fiat_quote },
+    ...invoice.transaction_state === void 0 ? {} : { transaction_state: invoice.transaction_state },
+    ...invoice.workflow_state === void 0 ? {} : { workflow_state: invoice.workflow_state },
+    ...invoice.expires_at === void 0 ? {} : { expires_at: invoice.expires_at },
+    ...invoice.settled_at === void 0 ? {} : { settled_at: invoice.settled_at },
+    ...invoice.swap === void 0 ? {} : { swap: invoice.swap }
+  });
+}
+function renderElementSwapFeeBreakdownHtml(breakdown) {
+  if (breakdown === void 0) return "";
+  const feeValue = breakdown.feePercent === void 0 ? breakdown.fee : `${breakdown.fee} (${breakdown.feePercent})`;
+  return `
+    <div part="swap-breakdown" class="${orClasses4.swapBreakdown}">
+      <p part="swap-breakdown-title" class="${orClasses4.swapBreakdownTitle}">${escapeHtml4(checkoutLabels4.paymentBreakdown)}</p>
+      <dl part="swap-details" class="${orClasses4.swapBreakdownRows}">
+        <dt>${escapeHtml4(checkoutLabels4.cartTotal)}</dt>
+        <dd>${escapeHtml4(breakdown.cartTotal)}</dd>
+        <dt>${escapeHtml4(checkoutLabels4.youSend)}</dt>
+        <dd>${escapeHtml4(breakdown.youSend)}</dd>
+        <dt>${escapeHtml4(checkoutLabels4.swapAndNetworkFees)}</dt>
+        <dd>${escapeHtml4(feeValue)}</dd>
+      </dl>
+    </div>
+  `;
+}
+function renderElementSwapSupportDetailsHtml(display) {
+  if (display.depositTxId === void 0 && display.payoutTxId === void 0 && display.refundTxId === void 0 && display.providerOrderId === void 0) {
+    return "";
+  }
+  return `
+    <details part="swap-support" class="${orClasses4.swapSupport}">
+      <summary class="${orClasses4.swapSupportTitle}">Payment details</summary>
+      <div class="${orClasses4.swapSupportContent}">
+        <dl part="swap-details" class="${orClasses4.swapDetails}">
+          ${display.depositTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Deposit transaction", display.depositTxId, { kind: "tx", payInAsset: display.payInAsset })}
+          ${display.payoutTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Lightning payout", display.payoutTxId)}
+          ${display.refundTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Refund transaction", display.refundTxId, { kind: "tx", payInAsset: display.payInAsset })}
+          ${display.providerOrderId === void 0 ? "" : renderElementSwapCopyDetailHtml("Provider order", display.providerOrderId)}
+        </dl>
+      </div>
+    </details>
+  `;
+}
+
+// src/render-wizard.ts
+function wizardStartingAsset(view) {
+  const asset = view.startingSwapAsset;
+  return asset !== void 0 && asset !== null && asset.length > 0 ? asset : void 0;
+}
+function swapGroupIsStarting(group, startingAsset) {
+  return startingAsset !== void 0 && group.options.some((option) => option.pay_in_asset === startingAsset);
+}
+function renderElementSwapUnavailableHtml(quote, checkout) {
+  const model = createSwapUnavailableModel(quote, checkout);
+  return `<section part="swap-panel" class="${orClasses5.swapPanel}">
+      <div part="swap-heading" class="${orClasses5.swapHeading}">
+        <strong class="${orClasses5.swapHeadingTitle}">${escapeHtml5(model.title)}</strong>
+      </div>
+      <p part="swap-warning" class="${orClasses5.swapWarning}">${escapeHtml5(model.detail)}</p>
+      ${model.range === void 0 ? "" : `<p class="${orClasses5.swapWarning}">${escapeHtml5(model.range)}</p>`}
+      <p class="${orClasses5.swapProgress}">${escapeHtml5(model.hint)}</p>
+    </section>`;
+}
+function renderPaymentWizardHtml(view = {}) {
+  const selection = {
+    selectedMethod: view.selectedMethod ?? null,
+    selectedBitcoinRoute: view.selectedBitcoinRoute ?? null
+  };
+  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 breadcrumbs = selection.selectedMethod === null ? "" : renderWizardBreadcrumbsHtml({
+    method: selection.selectedMethod,
+    selectedRoute: model.selectedRoute,
+    routeAssets: routeAssetDisplays
+  });
+  const swapAssetOptions = (view.swapOptions ?? []).filter((option) => option.provider.length > 0);
+  const selectedSwapAsset = view.selectedSwapAsset ?? null;
+  const selectedSwapOption = selectedSwapAsset === null ? void 0 : swapAssetOptions.find((option) => option.pay_in_asset === selectedSwapAsset);
+  if (selectedSwapAsset !== null) {
+    const label = selectedSwapOption === void 0 ? "this coin" : `${selectedSwapOption.label} \xB7 ${selectedSwapOption.network_label}`;
+    const activeSwap = view.swapInvoice !== void 0 && view.swapInvoice.swap?.pay_in_asset === selectedSwapAsset ? view.swapInvoice : void 0;
+    return `
+      <section part="wizard" class="${orClasses5.wizard}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.root}>
+        <div class="${orClasses5.wizardBody}">
+        <div part="wizard-breadcrumbs" class="${orClasses5.breadcrumbs}">
+          <button
+            part="wizard-breadcrumb"
+            class="${orClasses5.btnGhost}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="swap-asset"
+            type="button"
+          >${escapeHtml5(checkoutLabels5.switchPaymentMethod)}</button>
+          <span aria-hidden="true">/</span>
+          <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(label)}</span>
+        </div>
+        <div part="wizard-results" class="${orClasses5.wizardResults}">
+          ${activeSwap !== void 0 ? renderElementSwapPanelHtml(activeSwap, view) : view.swapStartError !== void 0 ? `<section part="swap-panel" class="${orClasses5.swapPanel}">
+                    <div part="swap-error" role="alert" class="${orClasses5.paymentStatus}">
+                      <div class="${orClasses5.paymentStatusBody}">
+                        <strong class="${orClasses5.paymentStatusTitle}">${escapeHtml5(checkoutLabels5.swapStartFailedTitle)}</strong>
+                        <p class="${orClasses5.paymentStatusDetail}">${escapeHtml5(view.swapStartError)}</p>
+                        <button
+                          part="swap-retry"
+                          class="${orClasses5.btn}"
+                          type="button"
+                          ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(selectedSwapAsset)}"
+                        >${escapeHtml5(checkoutLabels5.tryAgain)}</button>
+                      </div>
+                    </div>
+                  </section>` : view.unavailableSwapQuote !== void 0 ? renderElementSwapUnavailableHtml(
+      view.unavailableSwapQuote,
+      view.swapLimitContext
+    ) : `<section part="swap-panel" class="${orClasses5.swapPanel}">
+                    <div part="status" class="${orClasses5.paymentStatus}">
+                      <span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>
+                      <div class="${orClasses5.paymentStatusBody}">
+                        <strong class="${orClasses5.paymentStatusTitle}">${escapeHtml5(checkoutLabels5.preparingPaymentAddress)}</strong>
+                        <p class="${orClasses5.paymentStatusDetail}">${escapeHtml5(
+      checkoutLabels5.preparingPaymentAddressDetail.replace(
+        "{asset}",
+        selectedSwapOption?.label ?? "coin"
+      )
+    )}</p>
+                      </div>
+                    </div>
+                  </section>`}
+        </div>
+        </div>
+      </section>
+    `;
+  }
+  const methodPicker = selection.selectedMethod === null ? renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) : "";
+  return `
+    <section part="wizard" class="${orClasses5.wizard}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.root}>
+      ${view.wizardError === void 0 ? "" : `<p part="wizard-error" role="alert" class="${orClasses5.paymentStatusDetail}">${escapeHtml5(view.wizardError)}</p>`}
+      ${methodPicker}
+      ${selection.selectedMethod === null ? "" : `
+      <div class="${orClasses5.wizardBody}">
+      ${breadcrumbs}
+      ${showRoutePicker ? `
+        <div part="route-picker" class="${orClasses5.routePicker}">
+          ${routeAssetDisplays.map(
+    (asset) => `
+              <button
+                part="route${asset.selected ? " selected" : ""}"
+                class="${asset.selected ? orClasses5.routeButtonSelected : orClasses5.routeButton}"
+                ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.route}="${escapeHtml5(asset.id)}"
+                type="button"
+              >
+                <img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(asset.icon)}">
+                <strong class="${orClasses5.methodTitle}">${escapeHtml5(asset.label)}</strong>
+                <small class="${orClasses5.methodDetail}">${escapeHtml5(asset.subtitle)}</small>
+              </button>
+            `
+  ).join("")}
+        </div>
+      ` : ""}
+      ${`
+        <div part="wizard-results" class="${orClasses5.wizardResults}">
+          ${routeDisplays.length === 0 ? `
+            <p part="wizard-empty" class="${orClasses5.wizardEmpty}">${escapeHtml5(
+    getWizardEmptyMessage()
+  )}</p>
+	          ` : routeDisplays.map((route) => {
+    const activeSwap = view.swapInvoice !== void 0 && swapAssetMatchesRoute2(route.key, view.swapInvoice.swap?.pay_in_asset) ? view.swapInvoice : void 0;
+    return `
+	            <section part="wizard-route" class="${orClasses5.wizardRoute}">
+                <h3 class="${orClasses5.wizardRouteHeading}">
+                  ${escapeHtml5(route.title)}
+                </h3>
+              ${activeSwap === void 0 ? renderElementSwapActionsHtml(route.key, view.swapOptions ?? [], view) : renderElementSwapPanelHtml(activeSwap, view)}
+              ${activeSwap === void 0 ? `<div part="provider-grid" class="${orClasses5.providerGrid}">
+                ${route.providers.map(
+      (provider) => `
+                  <article part="provider" class="${orClasses5.providerCard}">
+                    <div part="provider-heading" class="${orClasses5.providerHeading}">
+                      <img class="${orClasses5.providerIcon}" alt="" src="${escapeHtml5(provider.icon)}">
+                      <h4 class="${orClasses5.providerName}">${escapeHtml5(provider.name)}</h4>
+	                    </div>
+                    <p part="provider-kind" class="${orClasses5.providerKind}">${escapeHtml5(provider.kind)}</p>
+	                    <div part="provider-actions" class="${orClasses5.providerActions}">
+                      ${renderProviderOpenActionHtml(provider)}
+                    </div>
+                  </article>
+                `
+    ).join("")}
+              </div>` : ""}
+            </section>
+          `;
+  }).join("")}
+        </div>
+      `}
+      </div>
+      `}
+      ${renderTutorialModalHtml(
+    routeDisplays,
+    view.activeTutorialProviderId ?? null,
+    view.activeTutorialIndex ?? 0,
+    view.activeTutorialCopied ?? false,
+    view.lightningInvoice,
+    view.decodeLinkUrl
+  )}
+    </section>
+  `;
+}
+function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
+  const entries = buildMethodGridEntries(paymentMethods, swapAssetOptions);
+  const currenciesLoading = view.currenciesLoading === true && swapAssetOptions.length === 0;
+  const selectedKey = view.selectedPickerKey ?? null;
+  const selectedGroup = findSwapGridGroup(entries, selectedKey);
+  const networkRequired = selectedGroup !== void 0 && selectedGroup.options.length > 1;
+  const selectedNetworks = view.selectedSwapNetworks ?? {};
+  const selectedGroupKey = selectedGroup?.label.trim().toUpperCase();
+  const selectedNetworkAsset = selectedGroupKey === void 0 ? void 0 : selectedNetworks[selectedGroupKey];
+  const selectedNetworkOption = selectedGroup === void 0 || selectedNetworkAsset === void 0 ? void 0 : selectedGroup.options.find((option) => option.pay_in_asset === selectedNetworkAsset);
+  const startingAsset = wizardStartingAsset(view);
+  const gridBusy = startingAsset !== void 0;
+  let continueDisabled = selectedNetworkOption === void 0 || gridBusy;
+  let continueAttr = "";
+  let continueLabel = escapeHtml5(checkoutLabels5.continue);
+  const continueStarting = selectedNetworkOption !== void 0 && selectedNetworkOption.pay_in_asset === startingAsset;
+  if (selectedNetworkOption !== void 0) {
+    const disabled = selectedNetworkOption.available === false;
+    const limitMessage = elementsSwapLimitMessage(selectedNetworkOption, view);
+    continueDisabled = disabled || gridBusy;
+    continueAttr = disabled || gridBusy ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(selectedNetworkOption.pay_in_asset)}"`;
+    if (disabled && limitMessage !== void 0) continueLabel = escapeHtml5(limitMessage);
+    else if (continueStarting) continueLabel = escapeHtml5(checkoutLabels5.preparingPayment);
+  } else if (networkRequired) {
+    continueDisabled = true;
+  }
+  const continueButton = (className) => renderElementMethodConfirmHtml({
+    className,
+    disabled: continueDisabled,
+    starting: continueStarting,
+    swapStartAsset: continueAttr.length === 0 || selectedNetworkOption === void 0 ? void 0 : selectedNetworkOption.pay_in_asset,
+    label: continueLabel
+  });
+  const tiles = entries.map((entry) => {
+    if (entry.kind === "method") {
+      const method = entry.method;
+      const accent = paymentAccentId(method.id);
+      return `
+          <button
+            part="method"
+            type="button"
+            class="${assetButtonClasses({ accent, selected: false, disabled: gridBusy })}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.method}="${escapeHtml5(method.id)}"
+            ${gridBusy ? 'disabled aria-disabled="true"' : ""}
+          >
+            <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
+              <img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(getPaymentMethodIcon(method.id))}">
+            </span>
+            <span class="${orClasses5.methodTitleWrap}">
+              <span class="${orClasses5.methodTitle}">${escapeHtml5(method.title)}</span>
+            </span>
+          </button>`;
+    }
+    return renderElementSwapMethodGroupHtml(
+      entry.group,
+      view,
+      selectedKey,
+      selectedKey === swapPickerKey(entry.group.label) ? continueButton(orClasses5.methodConfirmDesktop) : void 0
+    );
+  }).join("");
+  const loadingTile = currenciesLoading ? `<div part="currencies-loading" role="status" aria-live="polite" class="${orClasses5.methodCurrenciesLoading}">
+        <span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>
+        <span class="${orClasses5.methodTitle}">${escapeHtml5(checkoutLabels5.loadingCurrencies)}</span>
+      </div>` : "";
+  const desktopReveal = networkRequired && selectedGroup !== void 0 ? `<div class="${orClasses5.methodNetworkRevealDesktop}">${renderElementNetworkSelectorHtml(
+    selectedGroup,
+    view,
+    continueButton(orClasses5.methodConfirmDesktop),
+    false
+  )}</div>` : "";
+  return `
+      <header class="${orClasses5.wizardHeader}">
+        <h2 id="payment-method-heading" class="${orClasses5.wizardHeaderTitle}">${escapeHtml5(checkoutLabels5.wizardTitle)}</h2>
+        <p class="${orClasses5.wizardHeaderSubtitle}">${escapeHtml5(checkoutLabels5.wizardSubtitle)}</p>
+      </header>
+      <div class="${orClasses5.wizardBody}" aria-labelledby="payment-method-heading">
+        <div part="method-grid" role="group" aria-label="${escapeHtml5(checkoutLabels5.paymentMethod)}" class="${orClasses5.methodGrid}">
+          ${tiles}${loadingTile}
+        </div>
+        ${desktopReveal}
+      </div>
+    `;
+}
+function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobile) {
+  const accent = paymentAccentId(group.label);
+  const groupKey = group.label.trim().toUpperCase();
+  const selectedNetworks = view.selectedSwapNetworks ?? {};
+  const selectedAsset = selectedNetworks[groupKey];
+  const selectedOption = selectedAsset === void 0 ? void 0 : group.options.find((option) => option.pay_in_asset === selectedAsset);
+  const { panelId, headingId } = wizardNetworkGroupIds(groupKey);
+  const networkButtons = group.options.map((option) => {
+    const optionDisabled = option.available === false;
+    const optionSelected = option.pay_in_asset === selectedOption?.pay_in_asset;
+    const optionLimit = elementsSwapLimitMessage(option, view);
+    return `
+        <div class="${orClasses5.methodTile}">
+          <button
+            type="button"
+            aria-pressed="${optionSelected ? "true" : "false"}"
+            class="${networkButtonClasses({
+      accent,
+      selected: optionSelected,
+      disabled: optionDisabled
+    })}"
+            ${optionDisabled ? 'disabled aria-disabled="true"' : ""}
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetwork}="${escapeHtml5(groupKey)}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapNetworkValue}="${escapeHtml5(option.pay_in_asset)}"
+          >
+            <span aria-hidden="true" class="grid size-6 shrink-0 place-items-center">
+              <img class="${orClasses5.methodNetworkIcon}" alt="" src="${escapeHtml5(getNetworkIcon(option.network_label))}">
+            </span>
+            <span class="truncate">${escapeHtml5(option.network_label)}</span>
+            ${optionSelected ? `<span aria-hidden="true" class="${networkCheckClasses(accent)}">\u2713</span>` : ""}
+          </button>
+          ${optionDisabled && optionLimit !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml5(optionLimit)}</span>` : ""}
+        </div>`;
+  }).join("");
+  const summary = selectedOption === void 0 ? "" : `<p aria-live="polite" class="${orClasses5.methodNetworkSummary}">
+          <span aria-hidden="true" class="${networkSummaryIconClasses(accent)}">\u2713</span>
+          ${escapeHtml5(formatNetworkSummary(group.label, selectedOption.network_label))}
+        </p>`;
+  return `
+    <div
+      id="${panelId}"
+      role="group"
+      aria-labelledby="${headingId}"
+      class="${mobile ? networkMobileRevealClasses(accent) : orClasses5.methodNetworkReveal}"
+    >
+      <div class="${orClasses5.methodNetworkLayout}">
+        <div>
+          <h3 id="${headingId}" class="${orClasses5.methodNetworkHeading}">${escapeHtml5(
+    formatChooseNetworkHeading(group.label)
+  )}</h3>
+          <p class="${orClasses5.methodNetworkHint}">${escapeHtml5(
+    checkoutLabels5.selectNetworkToContinue
+  )}</p>
+        </div>
+        <div role="group" aria-labelledby="${headingId}" class="${orClasses5.methodNetworkGrid}">
+          ${networkButtons}
+        </div>
+        ${continueButtonHtml}
+      </div>
+      ${summary}
+    </div>`;
+}
+function renderElementMethodConfirmHtml(options) {
+  const swapStart = options.disabled || options.swapStartAsset === void 0 ? "" : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(options.swapStartAsset)}"`;
+  return `
+    <button
+      type="button"
+      part="method-confirm"
+      class="${options.className}"
+      ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.pickerContinue}=""
+      ${swapStart}
+      ${options.disabled ? 'disabled aria-disabled="true"' : ""}
+      ${options.starting ? 'aria-busy="true"' : ""}
+    >${options.starting ? `<span part="spinner" class="${orClasses5.continueSpinner}" aria-hidden="true"></span>` : ""}${options.label}</button>`;
+}
+function renderElementSwapMethodGroupHtml(group, view, selectedKey, continueButtonHtml) {
+  const selectedNetworks = view.selectedSwapNetworks ?? {};
+  const groupKey = group.label.trim().toUpperCase();
+  const pickerKey = swapPickerKey(group.label);
+  const selected = selectedKey === pickerKey;
+  const displayOption = group.options.find((option) => option.available !== false) ?? group.options[0];
+  if (displayOption === void 0) return "";
+  const multiNetwork = group.options.length > 1;
+  const selectedAsset = selectedNetworks[groupKey];
+  const selectedOption = selectedAsset === void 0 ? void 0 : group.options.find((option) => option.pay_in_asset === selectedAsset);
+  const activeOption = selectedOption ?? displayOption;
+  const startingAsset = wizardStartingAsset(view);
+  const starting = swapGroupIsStarting(group, startingAsset);
+  const gridBusy = startingAsset !== void 0;
+  const disabled = group.options.every((option) => option.available === false);
+  const accent = paymentAccentId(group.label);
+  const limitOption = disabled ? swapGroupLimitOption(group.options) ?? activeOption : activeOption;
+  const limitMessage = elementsSwapLimitMessage(limitOption, view);
+  const { panelId } = wizardNetworkGroupIds(groupKey);
+  const networkDetail = !disabled && multiNetwork ? selected && selectedOption !== void 0 ? `${escapeHtml5(selectedOption.network_label)} network` : escapeHtml5(checkoutLabels5.selectNetwork) : void 0;
+  const mobileReveal = multiNetwork ? `
+      <div class="${orClasses5.methodNetworkRevealAnim} ${selected ? orClasses5.methodNetworkRevealAnimOpen : orClasses5.methodNetworkRevealAnimClosed}">
+        <div class="${orClasses5.methodNetworkRevealInner}">
+          ${selected ? renderElementNetworkSelectorHtml(group, view, continueButtonHtml ?? "", true) : ""}
+        </div>
+      </div>` : "";
+  return `
+    <div class="${orClasses5.methodTile}">
+      <button
+        part="method"
+        type="button"
+        aria-pressed="${starting || multiNetwork && selected ? "true" : "false"}"
+        ${multiNetwork ? `aria-expanded="${selected ? "true" : "false"}" aria-controls="${panelId}"` : ""}
+        class="${assetButtonClasses({
+    accent,
+    selected: starting || multiNetwork && selected,
+    disabled: disabled || gridBusy && !starting
+  })}"
+        ${disabled || gridBusy ? 'disabled aria-disabled="true"' : ""}
+        ${starting ? 'aria-busy="true"' : ""}
+        ${disabled || gridBusy ? "" : multiNetwork ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.pickerSelect}="${escapeHtml5(pickerKey)}"` : `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.swapStart}="${escapeHtml5(displayOption.pay_in_asset)}"`}
+      >
+        <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
+          ${starting ? `<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>` : `<img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(getSwapOptionIcon(displayOption))}">`}
+        </span>
+        <span class="${orClasses5.methodTitleWrap}">
+          <span class="${orClasses5.methodTitle}">${escapeHtml5(group.label)}</span>
+          ${networkDetail === void 0 ? "" : `<span class="${orClasses5.methodDetailMobile}">${networkDetail}</span>`}
+        </span>
+      </button>
+      ${disabled && limitMessage !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml5(limitMessage)}</span>` : ""}
+      ${mobileReveal}
+    </div>`;
+}
+function renderWizardBreadcrumbsHtml(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 `
+    <nav part="wizard-breadcrumbs" class="${orClasses5.breadcrumbs}" aria-label="Payment path">
+      <button
+        part="wizard-breadcrumb"
+        class="${orClasses5.btnGhost}"
+        ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="method"
+        type="button"
+      >
+        <span>${escapeHtml5(checkoutLabels5.switchPaymentMethod)}</span>
+      </button>
+      <span part="wizard-breadcrumb-separator" aria-hidden="true">/</span>
+      ${routeLabel === null ? `<span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(methodLabel)}</span>` : `
+          <button
+            part="wizard-breadcrumb"
+            class="${orClasses5.btnGhost}"
+            ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.breadcrumb}="route"
+            type="button"
+          >
+            <span>${escapeHtml5(methodLabel)}</span>
+          </button>
+          <span part="wizard-breadcrumb-separator" aria-hidden="true">/</span>
+          <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(routeLabel)}</span>
+        `}
+    </nav>
+  `;
+}
+
+// src/views.ts
+import {
+  createCheckoutSnapshotFromInvoice,
+  createCheckoutState
+} from "@openreceive/browser/headless";
+function parseElementInvoiceId(value) {
+  if (value === null || value.trim() === "") return void 0;
+  return value;
+}
+function createElementCheckoutState(view) {
+  const invoiceId = parseElementInvoiceId(view.invoice_id ?? null);
+  if (invoiceId === void 0) return void 0;
+  return createCheckoutState(
+    createCheckoutSnapshotFromInvoice({
+      invoice_id: invoiceId,
+      invoice: view.invoice,
+      rail: view.rail ?? "lightning",
+      ...view.payment_hash === void 0 ? {} : { payment_hash: view.payment_hash },
+      ...view.amount_msats === void 0 ? {} : { amount_msats: view.amount_msats },
+      ...view.fiat_quote === void 0 ? {} : { fiat_quote: view.fiat_quote },
+      ...view.status === void 0 ? {} : { transaction_state: transactionStateFromStatus(view.status) },
+      ...view.expires_at === void 0 ? {} : { expires_at: view.expires_at }
+    })
+  );
+}
+function transactionStateFromStatus(status) {
+  if (status === "settled") return "settled";
+  if (status === "expired") return "expired";
+  if (status === "failed") return "failed";
+  return "pending";
+}
+function parseElementStatus(value) {
+  if (value === "pending" || value === "settled" || value === "expired" || value === "failed") {
+    return value;
+  }
+  return void 0;
+}
+
+// src/render-checkout.ts
+function renderCheckoutHtml(view) {
+  if (view.invoice !== "") assertDisplayInvoice(view.invoice);
+  const checkoutState = view.liveState ?? createElementCheckoutState(view);
+  const labels = deriveCheckoutStateLabels(view);
+  const amountCaption = formatAmountCaption({
+    amountLabel: labels.amountLabel,
+    fiatLabel: labels.fiatLabel,
+    fiatCurrency: view.fiat_quote?.fiat?.currency
+  });
+  const satsDetail = amountCaption === void 0 ? "" : `<div part="sats-detail" class="${orClasses6.satsDetail}">${escapeHtml6(amountCaption)}</div>`;
+  const statusLabel = view.status ?? (checkoutState === void 0 ? deriveStatus(view) : deriveStatus(checkoutState));
+  const showSummaryMeta = statusLabel === "settled" || statusLabel === "expired";
+  const stateClass = statusLabel === "settled" ? orClasses6.stateSettled : orClasses6.statePending;
+  const stateLabel = showSummaryMeta ? `<span part="state" class="${stateClass}" data-state="${escapeHtml6(statusLabel)}">${escapeHtml6(statusLabel)}</span>` : "";
+  const status = checkoutState === void 0 ? "" : renderElementPaymentStatusHtml(checkoutState);
+  const statusModel = checkoutState === void 0 ? void 0 : createCheckoutStatusModel(checkoutState);
+  const expired = statusModel?.phase === "expired";
+  const settled = statusLabel === "settled";
+  const swapFocused = (view.wizard?.selectedSwapAsset ?? null) !== null;
+  const hideLightning = !settled && (view.lightningRequested === false || swapFocused && !expired);
+  const wizard = expired && !swapFocused || settled || view.payment_wizard === false ? "" : renderPaymentWizardHtml(view.wizard);
+  const copyButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.copy}" class="${orClasses6.btn}" type="button">${COPY_INVOICE_ICON}<span ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES6.swapCopyLabel}>${escapeHtml6(checkoutLabels6.copyInvoice)}</span></button>`;
+  const decodeInvoice = view.invoice.trim() !== "" ? view.invoice : typeof view.wizard?.lightningInvoice === "string" && view.wizard.lightningInvoice.trim() !== "" ? view.wizard.lightningInvoice : void 0;
+  const decodeHref = decodeInvoice === void 0 ? void 0 : createLightningInvoiceDecodeUrl2(decodeInvoice, view.decodeLinkUrl);
+  const decodeButton = decodeHref === void 0 ? "" : `<a part="decode-invoice" class="${orClasses6.btn}" href="${escapeHtml6(decodeHref)}" rel="noreferrer" target="_blank">${escapeHtml6(checkoutLabels6.decodeInvoice)}</a>`;
+  const startOverButton = `<button part="${OPENRECEIVE_CHECKOUT_ELEMENT_PARTS.startOver}" class="${orClasses6.btn}" type="button">${escapeHtml6(checkoutLabels6.startOver)}</button>`;
+  const lightningPane = hideLightning || expired || settled ? "" : `<div part="lightning-pane" class="${orClasses6.lightningPane}">
+          <div part="qr" class="${orClasses6.qr}" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.qr}></div>
+          ${satsDetail}
+        </div>`;
+  const paymentLayoutClass = expired || settled ? orClasses6.paymentLayoutExpired : orClasses6.paymentLayout;
+  const metaRow = stateLabel === "" ? "" : `<div part="meta" class="${orClasses6.meta}">${stateLabel}</div>`;
+  const invoiceTitle = expired || settled ? "" : `<p part="invoice-title" class="${orClasses6.invoiceTitle}">${escapeHtml6(checkoutLabels6.bitcoinLightningInvoice)}</p>`;
+  const actions = settled ? (
+    // No state means no attempt to derive one from (a standalone caller that
+    // passed `status: "settled"` and no invoice-id), so the panel reads the
+    // attributes directly.
+    renderElementPaymentDataHtml(checkoutState ?? { ...view, rail: view.rail ?? "lightning" })
+  ) : expired ? `<div part="actions" class="${orClasses6.actions}">${startOverButton}</div>` : `<div part="actions" class="${orClasses6.actions}">${copyButton}${decodeButton}</div>`;
+  const resolvedTheme = view.theme ?? "light";
+  return `
+    ${styleTag(view.inlineStyles)}
+    <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}">
+      ${hideLightning ? "" : `<div part="payment-layout" class="${paymentLayoutClass}">
+            ${lightningPane}
+            <div part="payment-info" class="${orClasses6.paymentInfo}">
+              ${invoiceTitle}
+              ${status}
+              ${metaRow}
+              ${actions}
+            </div>
+          </div>`}
+      ${wizard}
+    </section>
+  `;
+}
+function styleTag(inlineStyles) {
+  return inlineStyles === false ? "" : checkoutStyleTag;
+}
+function renderCheckoutCreateErrorHtml(message, options = {}) {
+  const resolvedTheme = options.theme ?? "light";
+  const retryButton = `<button part="retry" class="${orClasses6.btn}" type="button">Try again</button>`;
+  return `
+    ${styleTag(options.inlineStyles)}
+    <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-create-error>
+      <div part="status" role="alert" class="${orClasses6.creating}">
+        <div><strong>Could not start checkout.</strong></div>
+        <p>${escapeHtml6(message)}</p>
+        ${retryButton}
+      </div>
+    </section>
+  `;
+}
+function renderCheckoutCreatingHtml(options = {}) {
+  const resolvedTheme = options.theme ?? "light";
+  return `
+    ${styleTag(options.inlineStyles)}
+    <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}" data-openreceive-creating>
+      <div part="status" class="${orClasses6.creating}">
+        <span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>
+        <div><strong>Creating checkout\u2026</strong></div>
+      </div>
+    </section>
+  `;
+}
+function renderThemeToggleHtml(label, options = {}) {
+  return `
+    ${styleTag(options.inlineStyles)}
+    <button
+      aria-label="${escapeHtml6(label)}"
+      class="${orClasses6.themeToggle}"
+      part="${OPENRECEIVE_THEME_TOGGLE_ELEMENT_PARTS.button}"
+      title="${escapeHtml6(label)}"
+      type="button"
+      ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.themeToggle}
+    >${escapeHtml6(label)}</button>
+  `;
+}
+var SETTLED_CHECK_ICON = `<svg part="settled-icon" class="${orClasses6.settledIcon}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true" focusable="false"><path stroke-linecap="round" stroke-linejoin="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"/></svg>`;
+function renderElementPaymentStatusHtml(state) {
+  const status = createCheckoutStatusModel(state);
+  const countdown = status.countdownLabel === void 0 ? "" : `<small part="countdown" class="${orClasses6.countdown}">${escapeHtml6(status.countdownPrefix)} <strong class="${orClasses6.countdownStrong}">${escapeHtml6(status.countdownLabel)}</strong></small>`;
+  return `
+    <div part="status" role="status" aria-live="polite" class="${orClasses6.paymentStatus}">
+      ${status.waiting ? `<span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>` : ""}
+      ${status.phase === "settled" ? SETTLED_CHECK_ICON : ""}
+      <div class="${orClasses6.paymentStatusBody}">
+        <strong class="${orClasses6.paymentStatusTitle}">${escapeHtml6(status.title)}</strong>
+        <p class="${orClasses6.paymentStatusDetail}">${escapeHtml6(status.detail)}</p>
+        ${countdown}
+      </div>
+    </div>
+  `;
+}
+function renderElementPaymentDataHtml(source) {
+  const entries = createPaymentDataEntries(source);
+  if (entries.length === 0) return "";
+  const rows = entries.map(
+    (entry) => `
+        <div part="payment-data-row" class="${orClasses6.paymentDataRow}">
+          <span class="${orClasses6.paymentDataKey}">${escapeHtml6(entry.label)}</span>
+          <p class="${orClasses6.paymentDataValue}">${escapeHtml6(entry.value)}</p>
+        </div>`
+  ).join("");
+  return `
+    <details part="payment-data" class="${orClasses6.paymentData}">
+      <summary part="payment-data-summary" class="${orClasses6.paymentDataTitle}">${escapeHtml6(checkoutLabels6.viewPaymentData)}</summary>
+      <div class="${orClasses6.paymentDataBody}">${rows}</div>
+    </details>
+  `;
+}
+
+// src/define-elements.ts
+var DEFAULT_TAG_NAME = OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME;
+function markElementConfirmButtonBusy(button) {
+  button.disabled = true;
+  button.setAttribute("aria-disabled", "true");
+  button.setAttribute("aria-busy", "true");
+  if (button.querySelector('[part="spinner"]') !== null) return;
+  const spinner = button.ownerDocument.createElement("span");
+  spinner.setAttribute("part", "spinner");
+  spinner.className = orClasses7.continueSpinner;
+  spinner.setAttribute("aria-hidden", "true");
+  button.prepend(spinner);
+}
+function checkoutSnapshotDisplayKey(snapshot) {
+  const { active: _active, paid_at: _paidAt, invoices, ...display } = snapshot;
+  return JSON.stringify({
+    ...display,
+    invoices: invoices.map(
+      ({ amount_msats: _amountMsats, fiat_quote: _fiatQuote, ...invoice }) => invoice
+    )
+  });
+}
+function defineElements(options = {}) {
+  const registry = options.registry ?? globalThis.customElements;
+  const HTMLElementCtor = globalThis.HTMLElement;
+  const tagName = options.tagName ?? DEFAULT_TAG_NAME;
+  const themeToggleTagName = options.themeToggleTagName ?? OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME;
+  if (registry === void 0 || HTMLElementCtor === void 0) {
+    throw new Error("Custom elements are unavailable in this environment.");
+  }
+  class CheckoutElement extends HTMLElementCtor {
+    selection = createPaymentWizardSelection();
+    activeTutorialProviderId = null;
+    activeTutorialIndex = 0;
+    activeTutorialCopied = false;
+    swapOptions = [];
+    swapOptionsLoaded = false;
+    selectedSwapNetworks = {};
+    selectedPickerKey = null;
+    selectedSwapAsset = null;
+    startedSwapInvoice;
+    latestCheckoutSnapshot;
+    /** Skip full shadow rebuilds when a poll returns the same payable UI. */
+    lastSnapshotDisplayKey;
+    dismissedSwapInvoiceId = null;
+    controller;
+    announcedSettledReference;
+    /** Last applied state, used to detect countdown-only ticks (partial DOM update). */
+    lastCheckoutState;
+    /** Refund-address draft survives poll rebuilds of the shadow tree. */
+    refundAddressDraft = "";
+    refundAddressDraftFocused = false;
+    refundAddressDraftSelectionStart = null;
+    refundAddressDraftSelectionEnd = null;
+    /** Tutorial provider whose dialog was last focused, so re-renders don't re-steal focus. */
+    focusedTutorialProviderId = null;
+    /**
+     * Create mode's whole request lifecycle — prepare-once, the deferred
+     * Lightning mint, the swap start — plus the guard that keeps attributes the
+     * element writes itself out of attributeChangedCallback. Every one of those
+     * is a double-POST guard, which is why they live together.
+     */
+    session = createElementCheckoutSession({
+      element: this,
+      logger: options.logger,
+      swapSelection: {
+        started: () => this.startedSwapInvoice,
+        setStarted: (invoice) => {
+          this.startedSwapInvoice = invoice;
+        },
+        dismissedInvoiceId: () => this.dismissedSwapInvoiceId,
+        setDismissedInvoiceId: (invoiceId) => {
+          this.dismissedSwapInvoiceId = invoiceId;
+        },
+        setSelectedAsset: (payInAsset) => {
+          this.selectedSwapAsset = payInAsset;
+        }
+      },
+      isCreateMode: () => this.isCreateMode(),
+      render: () => {
+        this.render();
+      },
+      startCheckoutController: () => {
+        this.startCheckoutController();
+      },
+      handleControllerSnapshot: (snapshot) => {
+        this.handleControllerSnapshot(snapshot);
+      },
+      latestCheckoutSnapshot: () => this.latestCheckoutSnapshot,
+      currentCheckoutSnapshot: () => this.currentCheckoutSnapshot(),
+      currentThemeOption: () => this.currentThemeOption(),
+      createMetadata: () => this.createMetadata(),
+      syncResumePath: (reference) => {
+        this.syncResumePath(reference);
+      },
+      resolvePollPrefix: (reference) => this.resolvePollPrefix(reference),
+      dispatchError: (error) => {
+        this.dispatchError(error);
+      }
+    });
+    /** When `theme` is unset, follow the nearest ancestor `[data-theme]` (e.g. ThemeScope). */
+    themeAncestorObserver;
+    observedThemeAncestor = null;
+    static get observedAttributes() {
+      return [
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.prefix,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoiceId,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.rail,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.amountMsats,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.fiatCurrency,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.fiatValue,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.status,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.expiresAt,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.theme,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentWizard,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.syncUrl,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePathPrefix,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl
+      ];
+    }
+    connectedCallback() {
+      this.render();
+      this.syncThemeAncestorObserver();
+      if (this.isCreateMode()) {
+        void this.session.createCheckout();
+        return;
+      }
+      this.startCheckoutController();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (!this.isConnected || this.session.applyingOwnAttributes) return;
+      if (oldValue === newValue) return;
+      const displayOnly = name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.theme || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.syncUrl || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePathPrefix || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl;
+      if (displayOnly) {
+        this.render();
+        this.syncThemeAncestorObserver();
+        return;
+      }
+      const pollingChanged = name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs;
+      if (pollingChanged) {
+        this.render();
+        this.syncThemeAncestorObserver();
+        this.startCheckoutController();
+        return;
+      }
+      const createInputChanged = name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.prefix || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice;
+      if (createInputChanged) {
+        this.session.forgetCreateKey();
+      }
+      if (this.isCreateMode()) {
+        this.render();
+        this.syncThemeAncestorObserver();
+        if (createInputChanged) {
+          void this.session.createCheckout();
+        }
+        return;
+      }
+      this.render();
+      this.syncThemeAncestorObserver();
+      this.startCheckoutController();
+    }
+    disconnectedCallback() {
+      this.stopCheckoutController();
+      this.stopThemeAncestorObserver();
+    }
+    // Create mode: a `reference` is set but no `invoice` snapshot is provided. The element
+    // owns the whole lifecycle — it prepares the checkout against
+    // `${prefix}/checkouts/prepare` (locking the amount without minting), mints a Lightning
+    // invoice only when the payer picks Bitcoin, then polls status against
+    // `${prefix}/payments/check` and drives swaps under the prefix.
+    isCreateMode() {
+      const invoice = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice);
+      const reference = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference);
+      return (invoice === null || invoice === "") && reference !== null && reference.length > 0;
+    }
+    /**
+     * Create-time metadata from the JSON `metadata` attribute.
+     *
+     * Read lazily, at mint time — which is why `metadata` is deliberately NOT a
+     * create input: a host that changes it after mount is picked up by the next
+     * mint, and re-keying the prepared checkout for it would orphan the
+     * prepared attempt for nothing.
+     *
+     * Host-authored like `poll-interval-ms`, and ruled the same way: a value
+     * that is not a JSON object is a host typo and must be heard, not silently
+     * dropped from the create request.
+     */
+    createMetadata() {
+      const raw = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.metadata);
+      if (raw === null || raw.length === 0) return void 0;
+      let parsed;
+      try {
+        parsed = JSON.parse(raw);
+      } catch (error) {
+        throw new TypeError(
+          `metadata must be a JSON object: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+      if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
+        throw new TypeError("metadata must be a JSON object");
+      }
+      return parsed;
+    }
+    /** Order data belongs to the host; this only performs optional History API sync. */
+    syncResumePath(reference) {
+      const syncUrl = parseBooleanAttribute(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.syncUrl)
+      );
+      if (syncUrl) {
+        const resumePathPrefix = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePathPrefix) ?? "/checkout";
+        const routeReference = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference) ?? void 0;
+        enterCheckoutResumePath(reference, {
+          pathPrefix: resumePathPrefix,
+          ...routeReference === void 0 || routeReference.length === 0 ? {} : { routeReference }
+        });
+      }
+    }
+    handleControllerSnapshot(snapshot) {
+      this.latestCheckoutSnapshot = snapshot;
+      if (snapshot.payment_methods !== void 0) {
+        this.swapOptions = snapshot.payment_methods;
+        this.swapOptionsLoaded = true;
+      }
+      const swapInvoice = snapshot.invoices.find(
+        (invoice) => invoice.rail === "swap" && invoice.swap !== void 0
+      );
+      if (swapInvoice !== void 0) {
+        this.startedSwapInvoice = overlaySwapRefundStaging(swapInvoice, this.startedSwapInvoice);
+      }
+      const displayKey = checkoutSnapshotDisplayKey(snapshot);
+      if (this.lastSnapshotDisplayKey === displayKey) return;
+      this.lastSnapshotDisplayKey = displayKey;
+      this.render();
+    }
+    render() {
+      this.captureRefundAddressDraft();
+      const invoiceAttr = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice);
+      const deferredReady = this.isCreateMode() && this.latestCheckoutSnapshot !== void 0 && (invoiceAttr === null || invoiceAttr === "");
+      if ((invoiceAttr === null || invoiceAttr === "") && !deferredReady) {
+        if (this.isCreateMode()) {
+          const { root: root2, inlineStyles: inlineStyles2 } = this.prepareShadowRoot();
+          if (this.session.createError !== void 0) {
+            root2.innerHTML = renderCheckoutCreateErrorHtml(this.session.createError, {
+              theme: this.resolveTheme(),
+              inlineStyles: inlineStyles2
+            });
+            root2.querySelector('[part="retry"]')?.addEventListener("click", () => this.session.retryCreateCheckout());
+            return;
+          }
+          root2.innerHTML = renderCheckoutCreatingHtml({
+            theme: this.resolveTheme(),
+            inlineStyles: inlineStyles2
+          });
+          return;
+        }
+        this.replaceChildren();
+        return;
+      }
+      const invoiceId = parseElementInvoiceId(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoiceId)
+      );
+      const invoice = invoiceAttr ?? "";
+      const lightningRequested = !this.isCreateMode() || this.session.lightningRequested || invoice.length > 0;
+      const decodeLinkUrl = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl) ?? void 0;
+      const selectedQuote = this.selectedSwapAsset === null ? void 0 : this.session.swapQuotes[this.selectedSwapAsset];
+      const unavailableSwapQuote = selectedQuote?.available === false ? selectedQuote : void 0;
+      const { root, inlineStyles } = this.prepareShadowRoot();
+      root.innerHTML = renderCheckoutHtml({
+        inlineStyles,
+        ...decodeLinkUrl === void 0 ? {} : { decodeLinkUrl },
+        invoice_id: invoiceId,
+        invoice,
+        rail: parseElementRail(this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.rail)),
+        payment_hash: this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) ?? void 0,
+        amount_msats: readElementAmountMsats(this),
+        fiat_quote: readElementFiatQuote(this),
+        status: parseElementStatus(
+          this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.status)
+        ),
+        expires_at: readElementExpiresAt(this),
+        theme: this.resolveTheme(),
+        payment_wizard: parseBooleanAttribute(
+          this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentWizard)
+        ),
+        lightningRequested: this.session.mintingLightning ? false : lightningRequested,
+        wizard: {
+          selectedMethod: this.selection.selectedMethod,
+          selectedBitcoinRoute: this.selection.selectedBitcoinRoute,
+          swapOptions: this.swapOptions,
+          currenciesLoading: !this.swapOptionsLoaded,
+          selectedSwapNetworks: this.selectedSwapNetworks,
+          selectedPickerKey: this.selectedPickerKey,
+          startingSwapAsset: this.session.startingSwapAsset,
+          selectedSwapAsset: this.selectedSwapAsset,
+          ...this.latestCheckoutSnapshot?.amount_msats === void 0 ? {} : { amountMsats: this.latestCheckoutSnapshot.amount_msats },
+          ...this.latestCheckoutSnapshot?.fiat === void 0 ? {} : { fiat: this.latestCheckoutSnapshot.fiat },
+          ...this.latestCheckoutSnapshot?.reference === void 0 ? {} : { reference: this.latestCheckoutSnapshot.reference },
+          ...this.latestCheckoutSnapshot?.checkout_id === void 0 ? {} : { checkoutId: this.latestCheckoutSnapshot.checkout_id },
+          lightningInvoice: invoice,
+          ...decodeLinkUrl === void 0 ? {} : { decodeLinkUrl },
+          ...this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) === null ? {} : {
+            paymentHash: this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) ?? void 0
+          },
+          swapInvoice: this.currentSwapInvoice(),
+          activeTutorialProviderId: this.activeTutorialProviderId,
+          activeTutorialIndex: this.activeTutorialIndex,
+          activeTutorialCopied: this.activeTutorialCopied,
+          ...this.session.swapStartError === void 0 ? {} : { swapStartError: this.session.swapStartError },
+          ...unavailableSwapQuote === void 0 ? {} : { unavailableSwapQuote },
+          ...this.latestCheckoutSnapshot === void 0 ? {} : { swapLimitContext: this.latestCheckoutSnapshot },
+          ...this.session.wizardError === void 0 ? {} : { wizardError: this.session.wizardError }
+        },
+        ...this.lastCheckoutState === void 0 ? {} : { liveState: this.lastCheckoutState }
+      });
+      const copyButton = root.querySelector(OPENRECEIVE_CHECKOUT_ELEMENT_PART_SELECTORS.copy);
+      if (invoice.length > 0) {
+        copyButton?.addEventListener("click", () => {
+          void (this.controller?.copyInvoice() ?? copyInvoice({ invoice, logger: options.logger })).then(() => {
+            showElementCopyFeedback(copyButton);
+            this.dispatchEvent(
+              createCheckoutActionEvent(OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS.copy)
+            );
+          }).catch((error) => this.dispatchError(error));
+        });
+      }
+      root.querySelector(OPENRECEIVE_CHECKOUT_ELEMENT_PART_SELECTORS.startOver)?.addEventListener("click", () => {
+        this.dispatchEvent(
+          createCheckoutActionEvent(OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS.startOver)
+        );
+      });
+      const qrTarget = root.querySelector(OPENRECEIVE_CHECKOUT_DATA_SELECTORS.qr);
+      if (qrTarget !== null && invoice.length > 0) {
+        void createQrSvg(invoice, {
+          encoder: options.qrEncoder,
+          width: 256
+        }).then((svg) => {
+          if (this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice) !== invoice) {
+            return;
+          }
+          qrTarget.innerHTML = svg;
+        }).catch((error) => this.dispatchError(error));
+      }
+      this.bindWizard(root, invoice, options.logger);
+      this.renderSwapQrCodes(root);
+    }
+    /**
+     * Shadow root plus the shared compiled stylesheet. `inlineStyles` is true only
+     * where constructable stylesheets are unavailable and the markup must carry a
+     * `<style>` of its own.
+     */
+    prepareShadowRoot() {
+      const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+      return { root, inlineStyles: !adoptCheckoutStyles(root) };
+    }
+    captureRefundAddressDraft() {
+      const root = this.shadowRoot;
+      if (root === null) return;
+      const input = root.querySelector(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapRefundAddress);
+      if (!(input instanceof HTMLInputElement) || input.type === "hidden") return;
+      this.refundAddressDraft = input.value;
+      this.refundAddressDraftFocused = root.activeElement === input;
+      this.refundAddressDraftSelectionStart = input.selectionStart;
+      this.refundAddressDraftSelectionEnd = input.selectionEnd;
+    }
+    clearRefundAddressDraft() {
+      this.refundAddressDraft = "";
+      this.refundAddressDraftFocused = false;
+      this.refundAddressDraftSelectionStart = null;
+      this.refundAddressDraftSelectionEnd = null;
+    }
+    startCheckoutController() {
+      const attributeSnapshot = this.currentCheckoutSnapshot();
+      const latest = this.latestCheckoutSnapshot;
+      const snapshot = latest?.active?.rail === "swap" ? latest : attributeSnapshot ?? latest;
+      const prefix = this.resolvePollPrefix(snapshot?.reference);
+      if (snapshot === void 0) {
+        this.stopCheckoutController();
+        return;
+      }
+      const polling = parseBooleanAttribute(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling)
+      ) !== false;
+      const pollIntervalMs = parseOptionalInteger(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs),
+        { label: "poll-interval-ms" }
+      );
+      this.stopCheckoutController();
+      this.controller = createCheckoutController({
+        snapshot,
+        ...prefix === void 0 || !polling ? {} : { prefix },
+        ...pollIntervalMs === void 0 ? {} : { pollIntervalMs },
+        logger: options.logger,
+        onError: (error) => this.dispatchError(error),
+        onState: (nextState) => this.applyCheckoutState(nextState),
+        onSnapshot: (snapshot2) => this.handleControllerSnapshot(snapshot2)
+      });
+      this.controller.start();
+      void this.controller.reloadState().catch((error) => this.dispatchError(error));
+    }
+    stopCheckoutController() {
+      this.controller?.stop();
+      this.controller = void 0;
+    }
+    /**
+     * The mount every server route is derived from, matching React snapshot
+     * mode: the `prefix` attribute, default `/openreceive`. Answers `undefined`
+     * when there is no order to act on — nothing to poll, nothing to swap.
+     */
+    resolvePollPrefix(reference) {
+      const id = reference ?? this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference);
+      if (id === null || id === void 0 || id.length === 0) return void 0;
+      return this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.prefix) ?? OPENRECEIVE_DEFAULT_PREFIX2;
+    }
+    currentCheckoutSnapshot() {
+      const reference = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference);
+      const invoiceId = parseElementInvoiceId(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoiceId)
+      );
+      const invoice = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice);
+      if (invoiceId === void 0 || invoice === null) return void 0;
+      const amountMsats = readElementAmountMsats(this);
+      const expiresAt = readElementExpiresAt(this);
+      const fiatQuote = readElementFiatQuote(this);
+      const paymentHash = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash);
+      return createCheckoutSnapshotFromInvoice2(
+        {
+          invoice_id: invoiceId,
+          invoice,
+          rail: parseElementRail(this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.rail)),
+          ...paymentHash === null ? {} : { payment_hash: paymentHash },
+          ...amountMsats === void 0 ? {} : { amount_msats: amountMsats },
+          ...fiatQuote === void 0 ? {} : { fiat_quote: fiatQuote },
+          transaction_state: transactionStateFromStatus(
+            parseElementStatus(this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.status)) ?? "pending"
+          ),
+          ...expiresAt === void 0 ? {} : { expires_at: expiresAt }
+        },
+        { ...reference === null ? {} : { reference } }
+      );
+    }
+    applyCheckoutState(state) {
+      const previous = this.lastCheckoutState;
+      this.lastCheckoutState = state;
+      this.session.writeOwnAttributes(() => {
+        this.setAttributeIfChanged(
+          OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.status,
+          deriveStatus2(state)
+        );
+        if (state.expires_at !== void 0) {
+          this.setAttributeIfChanged(
+            OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.expiresAt,
+            String(state.expires_at)
+          );
+        }
+      });
+      if (previous !== void 0 && this.isCountdownOnlyTick(previous, state)) {
+        this.updateCountdownText(state);
+      } else {
+        this.render();
+      }
+      this.dispatchEvent(
+        createCheckoutStateEvent(OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS.state, state)
+      );
+      if (state.settled && state.reference !== this.announcedSettledReference) {
+        this.announcedSettledReference = state.reference;
+        this.dispatchEvent(
+          createCheckoutStateEvent(OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS.settled, state)
+        );
+      }
+    }
+    isCountdownOnlyTick(previous, next) {
+      return previous.checkout_id === next.checkout_id && previous.invoice_id === next.invoice_id && previous.invoice === next.invoice && previous.rail === next.rail && previous.payment_hash === next.payment_hash && previous.transaction_state === next.transaction_state && previous.workflow_state === next.workflow_state && previous.phase === next.phase && previous.settled === next.settled && previous.terminal === next.terminal && previous.paid === next.paid && previous.expires_at === next.expires_at && previous.swap?.provider_state === next.swap?.provider_state;
+    }
+    /** Patch the countdown text nodes without rebuilding the shadow DOM. */
+    updateCountdownText(state) {
+      const root = this.shadowRoot;
+      if (root === null) return;
+      const model = createCheckoutStatusModel2(state);
+      const countdown = root.querySelector('[part="countdown"] strong');
+      if (countdown !== null && model.countdownLabel !== void 0) {
+        countdown.textContent = model.countdownLabel;
+      }
+      const swapInvoice = this.currentSwapInvoice();
+      if (swapInvoice !== void 0) {
+        const display = createSwapDisplayModel2(swapInvoice, {});
+        const swapCountdown = root.querySelector('[part="swap-countdown"]');
+        if (swapCountdown !== null && display !== void 0) {
+          swapCountdown.textContent = display.countdownLabel;
+        }
+      }
+    }
+    setAttributeIfChanged(name, value) {
+      if (this.getAttribute(name) !== value) this.setAttribute(name, value);
+    }
+    bindWizard(root, invoice, logger) {
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.method).forEach((button) => {
+        button.addEventListener("click", () => {
+          if (button.hasAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.pickerContinue)) return;
+          if (button.hasAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.pickerSelect)) return;
+          const method = parsePaymentMethod(
+            button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.method)
+          );
+          if (method === null) return;
+          this.selectedPickerKey = null;
+          this.selection = updatePaymentWizardSelection(this.selection, {
+            type: "select_method",
+            method
+          });
+          if (method === "bitcoin") {
+            void this.session.ensureLightning();
+          }
+          this.render();
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.pickerSelect).forEach((button) => {
+        button.addEventListener("click", () => {
+          if (!(button instanceof HTMLButtonElement) || button.disabled) return;
+          const key = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.pickerSelect);
+          if (key === null || key.length === 0) return;
+          const methodPick = parseMethodPickerKey(key);
+          if (methodPick !== null) {
+            const method = parsePaymentMethod(methodPick.methodId);
+            if (method === null) return;
+            this.selectedPickerKey = null;
+            this.selection = updatePaymentWizardSelection(this.selection, {
+              type: "select_method",
+              method
+            });
+            if (method === "bitcoin") {
+              void this.session.ensureLightning();
+            }
+            this.render();
+            return;
+          }
+          const previousKey = this.selectedPickerKey;
+          this.selectedPickerKey = key;
+          const entries = buildMethodGridEntries2(paymentMethods2, this.swapOptions);
+          const nextGroup = findSwapGridGroup2(entries, key);
+          if (nextGroup !== void 0 && nextGroup.options.length === 1) {
+            const option = nextGroup.options.find((entry) => entry.available !== false) ?? nextGroup.options[0];
+            if (option === void 0 || option.available === false) return;
+            this.selectedPickerKey = null;
+            void this.session.startSwap(option.pay_in_asset);
+            return;
+          }
+          this.selectedSwapNetworks = updateSelectedSwapNetworks({
+            entries,
+            nextKey: key,
+            previousKey,
+            selectedNetworks: this.selectedSwapNetworks
+          });
+          this.render();
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.pickerContinue).forEach((button) => {
+        button.addEventListener("click", () => {
+          if (!(button instanceof HTMLButtonElement) || button.disabled) return;
+          const method = parsePaymentMethod(
+            button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.method)
+          );
+          if (method !== null) {
+            this.selection = updatePaymentWizardSelection(this.selection, {
+              type: "select_method",
+              method
+            });
+            this.render();
+            return;
+          }
+          const payInAsset = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapStart);
+          if (payInAsset === null) return;
+          markElementConfirmButtonBusy(button);
+          void this.session.startSwap(payInAsset);
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.breadcrumb).forEach((button) => {
+        button.addEventListener("click", () => {
+          const target = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.breadcrumb);
+          if (target === "swap-asset") {
+            this.selectedSwapAsset = null;
+            this.selectedPickerKey = null;
+            this.selectedSwapNetworks = {};
+            this.render();
+            return;
+          }
+          if (target === "method") {
+            this.selection = updatePaymentWizardSelection(this.selection, {
+              type: "change_method"
+            });
+            this.render();
+            return;
+          }
+          if (target === "route") {
+            this.selection = updatePaymentWizardSelection(this.selection, {
+              type: "change_route"
+            });
+            this.render();
+          }
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.route).forEach((button) => {
+        button.addEventListener("click", () => {
+          const route = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.route);
+          if (route === null) return;
+          this.selection = updatePaymentWizardSelection(this.selection, {
+            type: "select_route",
+            route
+          });
+          this.render();
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapStart).forEach((button) => {
+        button.addEventListener("click", () => {
+          if (button.hasAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.pickerContinue)) return;
+          const payInAsset = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapStart);
+          if (payInAsset === null) return;
+          if (button instanceof HTMLButtonElement) markElementConfirmButtonBusy(button);
+          void this.session.startSwap(payInAsset);
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapNetworkValue).forEach((button) => {
+        button.addEventListener("click", () => {
+          if (!(button instanceof HTMLButtonElement) || button.disabled) return;
+          const groupKey = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapNetwork);
+          const payInAsset = button.getAttribute(
+            OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapNetworkValue
+          );
+          if (groupKey === null || groupKey.length === 0 || payInAsset === null) return;
+          const details = button.closest("details");
+          if (details instanceof HTMLDetailsElement) details.open = false;
+          this.selectedSwapNetworks = {
+            ...this.selectedSwapNetworks,
+            [groupKey]: payInAsset
+          };
+          this.render();
+        });
+      });
+      root.querySelector(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapBack)?.addEventListener("click", () => {
+        const current = this.currentSwapInvoice();
+        this.dismissedSwapInvoiceId = current?.invoice_id ?? null;
+        this.selectedSwapAsset = null;
+        this.selectedPickerKey = null;
+        this.selectedSwapNetworks = {};
+        this.clearRefundAddressDraft();
+        void this.session.ensureLightning();
+        this.render();
+      });
+      wireSwapSelectAllInputs(root);
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapCopy).forEach((button) => {
+        button.addEventListener("click", () => {
+          const value = button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapCopy);
+          if (value === null) return;
+          void globalThis.navigator?.clipboard?.writeText(value).then(() => showElementCopyFeedback(button)).catch((error) => this.dispatchError(error));
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapRefundForm).forEach((form) => {
+        const input = form.querySelector(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapRefundAddress);
+        const errorEl = form.querySelector(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapRefundError);
+        const payInAsset = form.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapRefundPayInAsset) ?? "";
+        const networkLabel = form.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapRefundNetworkLabel) ?? "refund";
+        const setRefundAddressError = (message) => {
+          if (input instanceof HTMLInputElement) {
+            input.className = message === void 0 ? orClasses7.swapRefundInput : orClasses7.swapRefundInputInvalid;
+            if (message === void 0) input.removeAttribute("aria-invalid");
+            else input.setAttribute("aria-invalid", "true");
+          }
+          if (errorEl instanceof HTMLElement) {
+            if (message === void 0) {
+              errorEl.textContent = "";
+              errorEl.hidden = true;
+            } else {
+              errorEl.textContent = message;
+              errorEl.hidden = false;
+            }
+          }
+        };
+        const validateRefundAddress = (address, showEmpty) => {
+          if (address.length === 0 && !showEmpty) return void 0;
+          return getSwapRefundFormError(payInAsset, address, networkLabel);
+        };
+        if (input instanceof HTMLInputElement && input.type !== "hidden") {
+          if (this.refundAddressDraft.length > 0) {
+            input.value = this.refundAddressDraft;
+          }
+          input.addEventListener("input", () => {
+            this.refundAddressDraft = input.value;
+            const address = input.value.trim();
+            if (address.length === 0) {
+              setRefundAddressError(void 0);
+              return;
+            }
+            setRefundAddressError(validateRefundAddress(address, false));
+          });
+          input.addEventListener("blur", () => {
+            const address = input.value.trim();
+            if (address.length === 0) return;
+            setRefundAddressError(validateRefundAddress(address, false));
+          });
+          if (this.refundAddressDraftFocused) {
+            input.focus();
+            const start = this.refundAddressDraftSelectionStart ?? input.value.length;
+            const end = this.refundAddressDraftSelectionEnd ?? input.value.length;
+            input.setSelectionRange(start, end);
+          }
+          const restoredError = validateRefundAddress(input.value.trim(), false);
+          if (restoredError !== void 0) setRefundAddressError(restoredError);
+        }
+        form.addEventListener("submit", (event) => {
+          event.preventDefault();
+          const attemptId = form.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapRefundForm);
+          const refundAllowed = form.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapRefundAllowed) === "true";
+          const confirm = form.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapRefundConfirm) === "true";
+          const refundAddress = input instanceof HTMLInputElement ? input.value.trim() : "";
+          if (attemptId === null || !refundAllowed) return;
+          const error = validateRefundAddress(refundAddress, true);
+          if (error !== void 0) {
+            setRefundAddressError(error);
+            return;
+          }
+          setRefundAddressError(void 0);
+          void this.refundSwap(attemptId, refundAddress, confirm);
+        });
+      });
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.providerTutorial).forEach((button) => {
+        button.addEventListener("click", () => {
+          const providerId = button.getAttribute(
+            OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.providerTutorial
+          );
+          if (providerId === null) return;
+          if (providerId === "") {
+            this.activeTutorialProviderId = null;
+            this.activeTutorialIndex = 0;
+            this.activeTutorialCopied = false;
+            this.render();
+            return;
+          }
+          const index = Number(
+            button.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.providerTutorialIndex) ?? "0"
+          );
+          if (this.activeTutorialProviderId !== providerId) {
+            this.activeTutorialCopied = false;
+          }
+          this.activeTutorialProviderId = providerId;
+          this.activeTutorialIndex = Number.isSafeInteger(index) && index >= 0 ? index : 0;
+          this.render();
+        });
+      });
+      root.querySelector('[part="tutorial-copy"]')?.addEventListener("click", () => {
+        void copyInvoice({ invoice, logger }).then(() => {
+          this.activeTutorialCopied = true;
+          if (this.activeTutorialProviderId !== null) {
+            this.dispatchEvent(createCheckoutProviderCopyEvent(this.activeTutorialProviderId));
+          }
+          this.dispatchEvent(createCheckoutActionEvent(OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS.copy));
+          this.render();
+        }).catch((error) => this.dispatchError(error));
+      });
+      const tutorial = root.querySelector('[part="tutorial"]');
+      tutorial?.addEventListener("click", (event) => {
+        if (event.target !== event.currentTarget) return;
+        this.activeTutorialProviderId = null;
+        this.activeTutorialIndex = 0;
+        this.activeTutorialCopied = false;
+        this.render();
+      });
+      tutorial?.addEventListener("keydown", (event) => {
+        if (!(event instanceof KeyboardEvent)) return;
+        if (event.key !== "Escape" || this.activeTutorialProviderId === null) return;
+        this.activeTutorialProviderId = null;
+        this.activeTutorialIndex = 0;
+        this.activeTutorialCopied = false;
+        this.render();
+      });
+      if (tutorial instanceof HTMLElement && this.activeTutorialProviderId !== null && this.focusedTutorialProviderId !== this.activeTutorialProviderId) {
+        this.focusedTutorialProviderId = this.activeTutorialProviderId;
+        tutorial.focus();
+      }
+      if (this.activeTutorialProviderId === null) {
+        this.focusedTutorialProviderId = null;
+      }
+    }
+    async refundSwap(attemptId, refundAddress, confirm) {
+      const reference = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference);
+      const prefix = this.resolvePollPrefix(reference ?? void 0);
+      if (prefix === void 0) return;
+      try {
+        this.startedSwapInvoice = await requestSwapRefund({
+          fetch: globalThis.fetch,
+          prefix,
+          ...reference === null ? {} : { reference },
+          invoices: [this.startedSwapInvoice, ...this.latestCheckoutSnapshot?.invoices ?? []],
+          attemptId,
+          refundAddress,
+          confirm,
+          logger: options.logger
+        });
+        this.dismissedSwapInvoiceId = null;
+        this.render();
+      } catch (error) {
+        this.dispatchError(error);
+      }
+    }
+    currentSwapInvoice() {
+      const fromSnapshot = this.latestCheckoutSnapshot?.invoices.find(
+        (invoice) => invoice.rail === "swap" && invoice.swap !== void 0 && invoice.invoice_id !== this.dismissedSwapInvoiceId
+      );
+      if (this.startedSwapInvoice === void 0 || this.startedSwapInvoice.invoice_id === this.dismissedSwapInvoiceId) {
+        return fromSnapshot;
+      }
+      const matched = this.latestCheckoutSnapshot?.invoices.find(
+        (invoice) => invoice.invoice_id === this.startedSwapInvoice?.invoice_id
+      ) ?? this.startedSwapInvoice;
+      return overlaySwapRefundStaging(matched, this.startedSwapInvoice);
+    }
+    renderSwapQrCodes(root) {
+      root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapQr).forEach((target) => {
+        const payload = target.getAttribute(OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES7.swapQr);
+        if (payload === null) return;
+        void createQrPayloadSvg(payload, {
+          encoder: options.qrEncoder,
+          width: 220
+        }).then((svg) => {
+          target.innerHTML = svg;
+        }).catch((error) => this.dispatchError(error));
+      });
+    }
+    currentThemeOption() {
+      const theme = parseResolvedTheme(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.theme)
+      );
+      return theme === void 0 ? {} : { theme };
+    }
+    /** Explicit `theme` attr wins; otherwise inherit nearest ancestor `[data-theme]`. */
+    resolveTheme() {
+      const attr = parseResolvedTheme(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.theme)
+      );
+      if (attr !== void 0) return attr;
+      const ancestor = this.closest("[data-theme]");
+      const inherited = parseResolvedTheme(ancestor?.getAttribute("data-theme"));
+      if (inherited !== void 0) return inherited;
+      return "light";
+    }
+    syncThemeAncestorObserver() {
+      const hasOwnTheme = parseResolvedTheme(this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.theme)) !== void 0;
+      if (hasOwnTheme) {
+        this.stopThemeAncestorObserver();
+        return;
+      }
+      const ancestor = this.closest("[data-theme]");
+      if (ancestor === this.observedThemeAncestor && this.themeAncestorObserver !== void 0) {
+        return;
+      }
+      this.stopThemeAncestorObserver();
+      if (ancestor === null) return;
+      const MutationObserverCtor = globalThis.MutationObserver;
+      if (MutationObserverCtor === void 0) return;
+      this.observedThemeAncestor = ancestor;
+      this.themeAncestorObserver = new MutationObserverCtor(() => {
+        this.render();
+        this.syncThemeAncestorObserver();
+      });
+      this.themeAncestorObserver.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["data-theme"]
+      });
+    }
+    stopThemeAncestorObserver() {
+      this.themeAncestorObserver?.disconnect();
+      this.themeAncestorObserver = void 0;
+      this.observedThemeAncestor = null;
+    }
+    dispatchError(error) {
+      this.dispatchEvent(createCheckoutErrorEvent(error));
+    }
+  }
+  class ThemeToggleElement extends HTMLElementCtor {
+    observer;
+    observedTarget = null;
+    static get observedAttributes() {
+      return [
+        OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.rootSelector,
+        OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.checkoutSelector,
+        OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.defaultTheme,
+        OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.storageKey
+      ];
+    }
+    connectedCallback() {
+      this.render();
+      this.startObserver();
+    }
+    attributeChangedCallback() {
+      if (!this.isConnected) return;
+      this.render();
+      this.startObserver();
+    }
+    disconnectedCallback() {
+      this.stopObserver();
+    }
+    render() {
+      const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+      const inlineStyles = !adoptCheckoutStyles(root);
+      const theme = this.syncTheme();
+      root.innerHTML = renderThemeToggleHtml(theme.toggleLabel, { inlineStyles });
+      root.querySelector(OPENRECEIVE_THEME_TOGGLE_ELEMENT_PART_SELECTORS.button)?.addEventListener("click", () => {
+        const nextTheme = toggleStoredThemeControls(this.themeTargets(), this.themeOptions());
+        this.dispatchEvent(createThemeChangeEvent(nextTheme));
+        this.render();
+      });
+    }
+    syncTheme() {
+      return syncStoredThemeControls(this.themeTargets(), this.themeOptions());
+    }
+    /**
+     * Watch only what can invalidate the toggle: the theme attributes it mirrors,
+     * and children arriving under the same wrapper (a checkout element mounted
+     * after the toggle). Observing the whole page body with `subtree` ran a
+     * querySelector sweep on every unrelated DOM mutation on the host page.
+     */
+    startObserver() {
+      const MutationObserverCtor = globalThis.MutationObserver;
+      if (MutationObserverCtor === void 0) return;
+      const target = this.themeTargets().root ?? this.ownerDocument.documentElement;
+      if (target === null || target === void 0) return;
+      if (this.observer !== void 0 && this.observedTarget === target) return;
+      this.stopObserver();
+      this.observedTarget = target;
+      this.observer = new MutationObserverCtor(() => {
+        this.syncTheme();
+      });
+      this.observer.observe(target, {
+        attributes: true,
+        attributeFilter: ["data-theme", "data-openreceive-theme"],
+        childList: true
+      });
+    }
+    stopObserver() {
+      this.observer?.disconnect();
+      this.observer = void 0;
+      this.observedTarget = null;
+    }
+    themeTargets() {
+      const rootSelector = this.getAttribute(
+        OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.rootSelector
+      );
+      const checkoutSelector = this.getAttribute(
+        OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.checkoutSelector
+      );
+      const button = this.shadowRoot?.querySelector(OPENRECEIVE_THEME_TOGGLE_ELEMENT_PART_SELECTORS.button) ?? null;
+      const defaultRoot = this.closest("[data-openreceive-theme]");
+      return {
+        root: rootSelector === null ? defaultRoot ?? void 0 : this.ownerDocument.querySelector(rootSelector) ?? void 0,
+        checkout: checkoutSelector === null ? defaultRoot?.querySelector(tagName) ?? void 0 : this.ownerDocument.querySelector(checkoutSelector) ?? void 0,
+        toggle: button
+      };
+    }
+    themeOptions() {
+      const defaultTheme = parseThemePreference(
+        this.getAttribute(OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.defaultTheme)
+      );
+      return {
+        ...defaultTheme === void 0 ? {} : { defaultTheme },
+        ...this.getAttribute(OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.storageKey) === null ? {} : {
+          storageKey: this.getAttribute(OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES.storageKey) ?? void 0
+        }
+      };
+    }
+  }
+  if (registry.get(tagName) === void 0) {
+    registry.define(tagName, CheckoutElement);
+  }
+  if (registry.get(themeToggleTagName) === void 0) {
+    registry.define(themeToggleTagName, ThemeToggleElement);
+  }
+}
+
+export {
+  renderTransactionDetailsHtml,
+  createTransactionDetailsElement,
+  renderCheckoutHtml,
+  renderCheckoutCreateErrorHtml,
+  renderThemeToggleHtml,
+  defineElements,
+  createThemeToggleElement,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES4 as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES,
+  OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS2 as OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS,
+  OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME2 as OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES2 as OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_EVENTS,
+  OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME2 as OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME
+};