@openreceive/elements 0.3.0 → 0.3.2

package/dist/{chunk-SJEIQZYE.js → chunk-TLX3H2MD.js}

@@ -22,10 +22,10 @@ import {
   createCheckoutStateEvent,
   createCheckoutStatusModel as createCheckoutStatusModel2,
   createPaymentWizardSelection,
-  createSwapDisplayModel as createSwapDisplayModel2,
-  createThemeChangeEvent,
   createQrPayloadSvg,
   createQrSvg,
+  createSwapDisplayModel as createSwapDisplayModel3,
+  createThemeChangeEvent,
   deriveStatus as deriveStatus2,
   enterCheckoutResumePath,
   getSwapRefundFormError,
@@ -33,20 +33,20 @@ import {
   OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3,
   OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS,
   OPENRECEIVE_CHECKOUT_ELEMENT_PART_SELECTORS,
+  OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME,
   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,
   parseBooleanAttribute,
   parseOptionalInteger,
   parsePaymentMethod,
   parseResolvedTheme,
   parseThemePreference,
+  paymentMethods as paymentMethods2,
   resolveWizardSelection,
   selectCurrentSwapInvoice,
   syncStoredThemeControls,
@@ -54,16 +54,147 @@ import {
   updatePaymentWizardSelection
 } from "@openreceive/browser/headless";
 
+// src/dom-helpers.ts
+import {
+  createDetailExternalLink,
+  createTransientFeedbackController,
+  escapeHtml,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES,
+  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_ATTRIBUTES.fiatCurrency);
+  const value = element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES.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_ATTRIBUTES.amountMsats);
+}
+function readElementExpiresAt(element) {
+  return readElementNumberAttribute(element, OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES.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-checkout-session.ts
 import {
   applyCheckoutElementAttributes,
   createCheckoutElementAttributes,
   createCheckoutSession,
   mergeAttemptIntoCheckout,
-  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES,
+  OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2,
   OPENRECEIVE_DEFAULT_PREFIX,
   prepareCheckout,
-  requestCheckout
+  requestCheckout,
+  resumeSwapAttempt
 } from "@openreceive/browser/headless";
 function createElementCheckoutSession(host) {
   let creating = false;
@@ -71,10 +202,10 @@ function createElementCheckoutSession(host) {
   let createError;
   let applyingOwnAttributes = 0;
   function currentPrefix() {
-    return host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES.prefix) ?? OPENRECEIVE_DEFAULT_PREFIX;
+    return host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.prefix) ?? OPENRECEIVE_DEFAULT_PREFIX;
   }
   function currentReference() {
-    const reference = host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES.reference);
+    const reference = host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.reference);
     return reference === null || reference.length === 0 ? void 0 : reference;
   }
   function currentCreateKey() {
@@ -119,18 +250,20 @@ function createElementCheckoutSession(host) {
       });
     },
     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();
+    swap: {
+      selection: host.swapSelection,
+      prefix: () => host.resolvePollPrefix(currentReference()),
+      fetch: () => globalThis.fetch,
+      // 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.
+      onStarted: (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),
@@ -152,11 +285,19 @@ function createElementCheckoutSession(host) {
     try {
       createError = void 0;
       host.syncResumePath(reference);
-      const checkout = await prepareCheckout({
+      const prepared = await prepareCheckout({
         prefix,
         reference,
         fetch: globalThis.fetch
       });
+      const resumeHash = host.resumePaymentHash();
+      const checkout = resumeHash === void 0 ? prepared : await resumeSwapAttempt({
+        fetch: globalThis.fetch,
+        prefix,
+        reference,
+        paymentHash: resumeHash,
+        snapshot: prepared
+      });
       if (currentCreateKey() !== key) return;
       host.handleControllerSnapshot(checkout);
       applyOwnAttributes(
@@ -223,136 +364,6 @@ function createElementCheckoutSession(host) {
   };
 }
 
-// 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>`;
@@ -406,10 +417,13 @@ import {
   checkoutLabels as checkoutLabels5,
   createMethodGridDisplay,
   createPaymentWizardModel,
+  createSwapDisplayModel as createSwapDisplayModel2,
   createSwapUnavailableModel,
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
+  currentCheckoutUrl as currentCheckoutUrl2,
   escapeHtml as escapeHtml5,
+  formatMethodNetworkDetail,
   formatNetworkSummary,
   getNetworkIcon,
   getPaymentMethodIcon,
@@ -524,13 +538,14 @@ function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex,
 
 // src/render-swap-panel.ts
 import {
+  checkoutLabels as checkoutLabels4,
   createSwapDisplayModel,
+  currentCheckoutUrl,
   escapeHtml as escapeHtml4,
   OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4,
-  checkoutLabels as checkoutLabels4,
+  orClasses as orClasses4,
   swapAssetMatchesRoute,
-  swapOptionLimitMessage,
-  orClasses as orClasses4
+  swapOptionLimitMessage
 } from "@openreceive/browser/headless";
 
 // src/transaction-details.ts
@@ -626,7 +641,9 @@ function elementsSwapLimitMessage(option, view) {
   return swapOptionLimitMessage(option, elementsSwapLimitContext(view));
 }
 function renderElementSwapPanelHtml(invoice, view = {}) {
-  const display = createSwapDisplayModel(invoice);
+  const display = createSwapDisplayModel(invoice, {
+    ...view.resumable === void 0 ? {} : { resumable: view.resumable }
+  });
   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>
@@ -638,6 +655,15 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
       <span class="${orClasses4.swapHeadingDetail}">${escapeHtml4(display.providerStateDetail)}</span>
     </div>
   `;
+  const refundHeading = `
+    <div part="swap-heading" class="${orClasses4.swapRefundHeading}" role="alert">
+      ${renderElementAlertIconHtml("warning")}
+      <div class="${orClasses4.swapNetworkWarningContent}">
+        <strong class="${orClasses4.swapHeadingTitle}">${escapeHtml4(display.providerStateLabel)}</strong>
+        <span class="${orClasses4.swapHeadingDetail}">${escapeHtml4(display.providerStateDetail)}</span>
+      </div>
+    </div>
+  `;
   if (display.state === "creating") {
     return `
       <section part="swap-panel" class="${orClasses4.swapPanel}">
@@ -671,7 +697,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
         <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-qr" class="${orClasses4.swapQrFrame}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapQr}="${escapeHtml4(display.qrPayload)}"></div>
           <div part="swap-deposit-side" class="${orClasses4.swapDepositSide}">
             <dl part="swap-details" class="${orClasses4.swapDetails}">
               ${display.copyRows.map(
@@ -728,12 +754,24 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
   }
   if (display.state === "refund_required") {
     const stagedRefundAddress = display.refundAddress;
-    const refundFacts = renderElementSwapRefundFactsHtml(display);
+    const refundFacts = renderElementSwapAmountFactsHtml(display);
+    const refundFormIntro = `
+      <p class="${orClasses4.swapSectionTitle}">${escapeHtml4(checkoutLabels4.refundSectionTitle)}</p>
+      ${display.refundReason === void 0 ? "" : `<p class="${orClasses4.swapRefundReason}">${escapeHtml4(
+      checkoutLabels4.refundReasonLabel.replace(
+        "{reason}",
+        display.refundReason.replace(/_/g, " ")
+      )
+    )}</p>`}
+      <p class="${orClasses4.swapRefundInstruction}">${escapeHtml4(
+      checkoutLabels4.refundAddressOwnership.replace("{network}", display.networkLabel)
+    )}</p>
+    `;
     return `
       <section part="swap-panel" class="${orClasses4.swapPanel}">
-        ${heading}
+        ${refundHeading}
+        ${renderElementSwapRefundReturnWarningHtml(display)}
         ${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"
@@ -744,6 +782,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundNetworkLabel}="${escapeHtml4(display.networkLabel)}"
             ${display.refundAllowed ? `${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAllowed}="true"` : ""}
           >
+            ${refundFormIntro}
             <input
               class="${orClasses4.swapRefundInput}"
               ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
@@ -773,7 +812,8 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
             ${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>
+            ${refundFormIntro}
+            <p class="${orClasses4.swapRefundInstruction}">${escapeHtml4(checkoutLabels4.confirmRefundTo.replace("{address}", stagedRefundAddress))}</p>
             <input
               ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES4.swapRefundAddress}
               name="refund_address"
@@ -784,56 +824,74 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
           </form>
         `}
         ${supportDetails}
-        ${renderElementSwapRefundReturnWarningHtml()}
       </section>
     `;
   }
   if (display.state === "refund_pending" || display.state === "refunded") {
-    const refundFacts = renderElementSwapRefundFactsHtml(display);
+    const refundFacts = renderElementSwapAmountFactsHtml(display);
     return `
       <section part="swap-panel" class="${orClasses4.swapPanel}">
-        ${heading}
+        ${refundHeading}
+        ${renderElementSwapRefundReturnWarningHtml(display)}
         ${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}
+      <p part="swap-warning" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.supportReviewFacts)}</p>
+      ${renderElementSwapAmountFactsHtml(display)}
+      ${renderElementSwapSupportDetailsHtml(display, { open: true })}
       ${backButton}
     </section>
   `;
 }
-function renderElementSwapRefundReturnWarningHtml() {
+function renderElementSwapRefundReturnWarningHtml(display) {
+  const url = display.resumable ? currentCheckoutUrl() : void 0;
   return `
-    <p part="swap-refund-return" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.refundReturnWarning)}</p>
+    <div part="swap-refund-return" class="${orClasses4.swapRefundReturn}">
+      ${renderElementAlertIconHtml("bookmark")}
+      <div class="${orClasses4.swapNetworkWarningContent}">
+        <p class="${orClasses4.swapRefundReturnTitle}">${escapeHtml4(checkoutLabels4.refundReturnTitle)}</p>
+        <p class="${orClasses4.swapRefundReturnBody}">${escapeHtml4(display.refundReturnLabel)}</p>
+        ${url === void 0 ? "" : `<dl part="swap-details" class="${orClasses4.swapDetails}">${renderElementSwapCopyDetailHtml(
+    checkoutLabels4.refundReturnUrlLabel,
+    url,
+    { selectable: true }
+  )}</dl>`}
+      </div>
+    </div>
   `;
 }
-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 renderElementSwapAmountFactsHtml(display) {
+  const facts = [
+    ...display.depositReceivedAmount === void 0 ? [] : [
+      ["Amount received", `${display.depositReceivedAmount} ${display.assetLabel}`],
+      ["Amount required", `${display.depositAmount} ${display.assetLabel}`]
+    ],
+    ...display.refundAmount === void 0 ? [] : [["Estimated refund", `${display.refundAmount} ${display.assetLabel}`]]
+  ];
+  if (facts.length === 0) return "";
+  const rows = facts.map(
+    ([label, value]) => `
+        <div class="${orClasses4.swapFactsRow}">
+          <dt class="${orClasses4.swapFactsLabel}">${escapeHtml4(label)}</dt>
+          <dd class="${orClasses4.swapFactsValue}">${escapeHtml4(value)}</dd>
+        </div>`
+  ).join("");
+  return `<dl part="swap-facts" class="${orClasses4.swapFacts}">${rows}</dl>`;
+}
+function renderElementAlertIconHtml(kind) {
+  const path = kind === "warning" ? "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" : "M17 3H7a2 2 0 00-2 2v16l7-3.5L19 21V5a2 2 0 00-2-2z";
+  return `<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="${path}" />
+    </svg>`;
 }
 function renderElementSwapNetworkWarningHtml(display) {
   const alarm = display.depositRisk !== "pinned";
@@ -891,12 +949,12 @@ function renderElementSwapFeeBreakdownHtml(breakdown) {
     </div>
   `;
 }
-function renderElementSwapSupportDetailsHtml(display) {
+function renderElementSwapSupportDetailsHtml(display, options = {}) {
   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}">
+    <details part="swap-support" class="${orClasses4.swapSupport}"${options.open === true ? " open" : ""}>
       <summary class="${orClasses4.swapSupportTitle}">Payment details</summary>
       <div class="${orClasses4.swapSupportContent}">
         <dl part="swap-details" class="${orClasses4.swapDetails}">
@@ -927,6 +985,7 @@ function renderElementSwapUnavailableHtml(quote, checkout) {
     </section>`;
 }
 function renderPaymentWizardHtml(view = {}) {
+  const keepOrderNote = renderElementKeepOrderNoteHtml(view);
   const selection = {
     selectedMethod: view.selectedMethod ?? null,
     selectedBitcoinRoute: view.selectedBitcoinRoute ?? null
@@ -952,10 +1011,15 @@ function renderPaymentWizardHtml(view = {}) {
   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;
+    const activeSwapState = activeSwap === void 0 ? void 0 : createSwapDisplayModel2(activeSwap, {
+      ...view.resumable === void 0 ? {} : { resumable: view.resumable }
+    })?.state;
+    const refundOwed = activeSwapState === "refund_required";
+    const refundStage = activeSwapState?.startsWith("refund") ?? false;
     return `
       <section part="wizard" class="${orClasses5.wizard}" ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.root}>
         <div class="${orClasses5.wizardBody}">
-        <div part="wizard-breadcrumbs" class="${orClasses5.breadcrumbs}">
+        ${refundOwed ? "" : `<div part="wizard-breadcrumbs" class="${orClasses5.breadcrumbs}">
           <button
             part="wizard-breadcrumb"
             class="${orClasses5.btnGhost}"
@@ -964,7 +1028,7 @@ function renderPaymentWizardHtml(view = {}) {
           >${escapeHtml5(checkoutLabels5.switchPaymentMethod)}</button>
           <span aria-hidden="true">/</span>
           <span part="wizard-breadcrumb-current" class="${orClasses5.breadcrumbCurrent}">${escapeHtml5(label)}</span>
-        </div>
+        </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}">
@@ -997,6 +1061,7 @@ function renderPaymentWizardHtml(view = {}) {
                     </div>
                   </section>`}
         </div>
+        ${refundStage ? "" : keepOrderNote}
         </div>
       </section>
     `;
@@ -1006,6 +1071,7 @@ function renderPaymentWizardHtml(view = {}) {
     <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 && keepOrderNote.length > 0 ? `<div class="${orClasses5.wizardBody}">${keepOrderNote}</div>` : ""}
       ${selection.selectedMethod === null ? "" : `
       <div class="${orClasses5.wizardBody}">
       ${breadcrumbs}
@@ -1062,6 +1128,7 @@ function renderPaymentWizardHtml(view = {}) {
   }).join("")}
         </div>
       `}
+      ${keepOrderNote}
       </div>
       `}
       ${renderTutorialModalHtml(
@@ -1075,12 +1142,32 @@ function renderPaymentWizardHtml(view = {}) {
     </section>
   `;
 }
+function renderElementKeepOrderNoteHtml(view) {
+  if (view.resumable !== true) return "";
+  const reference = view.reference ?? "";
+  const url = currentCheckoutUrl2();
+  if (reference.length === 0 && url === void 0) return "";
+  return `
+    <div part="keep-order" class="${orClasses5.keepOrder}">
+      <p class="${orClasses5.swapSectionTitle}">${escapeHtml5(checkoutLabels5.keepOrderTitle)}</p>
+      <p class="${orClasses5.keepOrderBody}">${escapeHtml5(checkoutLabels5.keepOrderBody)}</p>
+      <dl part="swap-details" class="${orClasses5.swapDetails}">
+        ${reference.length === 0 ? "" : renderElementSwapCopyDetailHtml(checkoutLabels5.keepOrderIdLabel, reference, {
+    selectable: true
+  })}
+        ${url === void 0 ? "" : renderElementSwapCopyDetailHtml(checkoutLabels5.keepOrderUrlLabel, url, {
+    selectable: true
+  })}
+      </dl>
+    </div>
+  `;
+}
 function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
   const limitContext = elementsSwapLimitContext(view);
   const display = createMethodGridDisplay({
     entries: buildMethodGridEntries(paymentMethods, swapAssetOptions),
     selectedPickerKey: view.selectedPickerKey ?? null,
-    selectedNetworks: view.selectedSwapNetworks ?? {},
+    selectedAssetByGroup: view.selectedSwapAssetByGroup ?? {},
     startingAsset: wizardStartingAsset(view) ?? null,
     ...limitContext === void 0 ? {} : { checkout: limitContext }
   });
@@ -1109,6 +1196,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
             </span>
             <span class="${orClasses5.methodTitleWrap}">
               <span class="${orClasses5.methodTitle}">${escapeHtml5(method.title)}</span>
+              <span class="${orClasses5.methodTileDetail}">${escapeHtml5(method.detail)}</span>
             </span>
           </button>`;
     }
@@ -1217,7 +1305,6 @@ function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonH
     pickerKey,
     selected,
     displayOption,
-    selectedOption,
     multiNetwork,
     starting,
     disabled,
@@ -1225,7 +1312,7 @@ function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonH
     limitMessage,
     panelId
   } = group;
-  const networkDetail = !disabled && multiNetwork ? selected && selectedOption !== void 0 ? `${escapeHtml5(selectedOption.network_label)} network` : escapeHtml5(checkoutLabels5.selectNetwork) : void 0;
+  const networkDetail = formatMethodNetworkDetail(group.options);
   const mobileReveal = multiNetwork ? `
       <div class="${orClasses5.methodNetworkRevealAnim} ${selected ? orClasses5.methodNetworkRevealAnimOpen : orClasses5.methodNetworkRevealAnimClosed}">
         <div class="${orClasses5.methodNetworkRevealInner}">
@@ -1253,7 +1340,7 @@ function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonH
         </span>
         <span class="${orClasses5.methodTitleWrap}">
           <span class="${orClasses5.methodTitle}">${escapeHtml5(group.label)}</span>
-          ${networkDetail === void 0 ? "" : `<span class="${orClasses5.methodDetailMobile}">${networkDetail}</span>`}
+          ${networkDetail.length === 0 ? "" : `<span class="${orClasses5.methodTileDetail}">${escapeHtml5(networkDetail)}</span>`}
         </span>
       </button>
       ${disabled && limitMessage !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml5(limitMessage)}</span>` : ""}
@@ -1492,7 +1579,7 @@ function defineElements(options = {}) {
     activeTutorialCopied = false;
     swapOptions = [];
     swapOptionsLoaded = false;
-    selectedSwapNetworks = {};
+    selectedSwapAssetByGroup = {};
     selectedPickerKey = null;
     selectedSwapAsset = null;
     startedSwapInvoice;
@@ -1550,6 +1637,7 @@ function defineElements(options = {}) {
       syncResumePath: (reference) => {
         this.syncResumePath(reference);
       },
+      resumePaymentHash: () => this.resumePaymentHash(),
       resolvePollPrefix: (reference) => this.resolvePollPrefix(reference),
       dispatchError: (error) => {
         this.dispatchError(error);
@@ -1576,6 +1664,8 @@ function defineElements(options = {}) {
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.syncUrl,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePathPrefix,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePaymentHash,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumable,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl,
@@ -1594,7 +1684,7 @@ function defineElements(options = {}) {
     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 || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.assetBaseUrl;
+      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.resumable || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.assetBaseUrl;
       if (displayOnly) {
         this.render();
         this.syncThemeAncestorObserver();
@@ -1686,11 +1776,40 @@ function defineElements(options = {}) {
       }
       return parsed;
     }
+    /**
+     * Whether a payer who closes this tab has a URL to come back to. Only
+     * `sync-url` puts one there — the refund screen's copy has to say the true
+     * thing either way, so this is read rather than assumed.
+     */
+    isResumable() {
+      const declared = parseBooleanAttribute(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumable)
+      );
+      if (declared !== void 0) return declared;
+      const routeReference = this.getAttribute(
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference
+      );
+      if (routeReference !== null && routeReference.length > 0) return true;
+      return parseBooleanAttribute(
+        this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.syncUrl)
+      ) === true;
+    }
+    /**
+     * The swap attempt this order already has in flight, if the host named one.
+     *
+     * Read from the attribute at prepare time rather than captured at
+     * construction: a host that learns the hash asynchronously (its own order
+     * fetch) sets the attribute late, and the create lifecycle re-runs.
+     */
+    resumePaymentHash() {
+      const value = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePaymentHash);
+      return value === null || value.length === 0 ? void 0 : value;
+    }
     /** 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)
-      );
+      ) === true;
       if (syncUrl) {
         const resumePathPrefix = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePathPrefix) ?? "/checkout";
         const routeReference = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference) ?? void 0;
@@ -1778,10 +1897,11 @@ function defineElements(options = {}) {
           selectedBitcoinRoute: this.selection.selectedBitcoinRoute,
           swapOptions: this.swapOptions,
           currenciesLoading: !this.swapOptionsLoaded,
-          selectedSwapNetworks: this.selectedSwapNetworks,
+          selectedSwapAssetByGroup: this.selectedSwapAssetByGroup,
           selectedPickerKey: this.selectedPickerKey,
           startingSwapAsset: this.session.startingSwapAsset,
           selectedSwapAsset: this.selectedSwapAsset,
+          resumable: this.isResumable(),
           ...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 },
@@ -1975,7 +2095,7 @@ function defineElements(options = {}) {
       }
       const swapInvoice = this.currentSwapInvoice();
       if (swapInvoice !== void 0) {
-        const display = createSwapDisplayModel2(swapInvoice, {});
+        const display = createSwapDisplayModel3(swapInvoice, { resumable: this.isResumable() });
         const swapCountdown = root.querySelector('[part="swap-countdown"]');
         if (swapCountdown !== null && display !== void 0) {
           swapCountdown.textContent = display.countdownLabel;
@@ -2014,7 +2134,7 @@ function defineElements(options = {}) {
             pickerKey: key,
             previousKey: this.selectedPickerKey,
             entries: buildMethodGridEntries2(paymentMethods2, this.swapOptions),
-            selectedNetworks: this.selectedSwapNetworks
+            selectedAssetByGroup: this.selectedSwapAssetByGroup
           });
           if (selection.kind === "none") return;
           if (selection.kind === "select_method") {
@@ -2037,7 +2157,7 @@ function defineElements(options = {}) {
             return;
           }
           this.selectedPickerKey = key;
-          this.selectedSwapNetworks = selection.selectedNetworks;
+          this.selectedSwapAssetByGroup = selection.selectedAssetByGroup;
           this.render();
         });
       });
@@ -2067,7 +2187,7 @@ function defineElements(options = {}) {
           if (target === "swap-asset") {
             this.selectedSwapAsset = null;
             this.selectedPickerKey = null;
-            this.selectedSwapNetworks = {};
+            this.selectedSwapAssetByGroup = {};
             this.render();
             return;
           }
@@ -2116,8 +2236,8 @@ function defineElements(options = {}) {
           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,
+          this.selectedSwapAssetByGroup = {
+            ...this.selectedSwapAssetByGroup,
             [groupKey]: payInAsset
           };
           this.render();
@@ -2128,7 +2248,7 @@ function defineElements(options = {}) {
         this.dismissedSwapInvoiceId = current?.invoice_id ?? null;
         this.selectedSwapAsset = null;
         this.selectedPickerKey = null;
-        this.selectedSwapNetworks = {};
+        this.selectedSwapAssetByGroup = {};
         this.clearRefundAddressDraft();
         this.controller?.clearSwapRefundStaging();
         void this.session.ensureLightning();