@openreceive/elements 0.2.4 → 0.3.1

package/dist/{chunk-P5HNOT3S.js → chunk-MKA6MJU5.js}

@@ -13,6 +13,7 @@ import {
 import {
   buildMethodGridEntries as buildMethodGridEntries2,
   copyInvoice,
+  createAssetBaseUrlResolver,
   createCheckoutActionEvent,
   createCheckoutController,
   createCheckoutErrorEvent,
@@ -27,7 +28,6 @@ import {
   createQrSvg,
   deriveStatus as deriveStatus2,
   enterCheckoutResumePath,
-  findSwapGridGroup as findSwapGridGroup2,
   getSwapRefundFormError,
   OPENRECEIVE_CHECKOUT_DATA_SELECTORS,
   OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3,
@@ -42,18 +42,16 @@ import {
   OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME,
   paymentMethods as paymentMethods2,
   orClasses as orClasses7,
-  overlaySwapRefundStaging,
   parseBooleanAttribute,
-  parseMethodPickerKey,
   parseOptionalInteger,
   parsePaymentMethod,
   parseResolvedTheme,
   parseThemePreference,
-  requestSwapRefund,
+  resolveWizardSelection,
+  selectCurrentSwapInvoice,
   syncStoredThemeControls,
   toggleStoredThemeControls,
-  updatePaymentWizardSelection,
-  updateSelectedSwapNetworks
+  updatePaymentWizardSelection
 } from "@openreceive/browser/headless";
 
 // src/element-checkout-session.ts
@@ -121,18 +119,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),
@@ -393,6 +393,7 @@ import {
   escapeHtml as escapeHtml6,
   formatAmountCaption,
   OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES,
+  OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS,
   OPENRECEIVE_CHECKOUT_ELEMENT_PARTS,
   OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES6,
   OPENRECEIVE_THEME_TOGGLE_ELEMENT_PARTS,
@@ -405,13 +406,12 @@ import {
   assetButtonClasses,
   buildMethodGridEntries,
   checkoutLabels as checkoutLabels5,
+  createMethodGridDisplay,
   createPaymentWizardModel,
   createSwapUnavailableModel,
   createWizardRouteAssetDisplays,
   createWizardRouteDisplays,
   escapeHtml as escapeHtml5,
-  findSwapGridGroup,
-  formatChooseNetworkHeading,
   formatNetworkSummary,
   getNetworkIcon,
   getPaymentMethodIcon,
@@ -423,12 +423,8 @@ import {
   networkSummaryIconClasses,
   OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES as OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5,
   orClasses as orClasses5,
-  paymentAccentId,
   paymentMethods,
-  swapAssetMatchesRoute as swapAssetMatchesRoute2,
-  swapGroupLimitOption,
-  swapPickerKey,
-  wizardNetworkGroupIds
+  swapAssetMatchesRoute as swapAssetMatchesRoute2
 } from "@openreceive/browser/headless";
 
 // src/render-provider-tutorial.ts
@@ -621,15 +617,20 @@ function renderElementSwapActionsHtml(routeKey, options, view) {
     </div>
   `;
 }
-function elementsSwapLimitMessage(option, view) {
-  const checkout = view.amountMsats === void 0 ? void 0 : {
+function elementsSwapLimitContext(view) {
+  if (view.amountMsats === void 0) return void 0;
+  return {
     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 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>
@@ -677,11 +678,12 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
           <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 })}
+              ${display.copyRows.map(
+      (row) => renderElementSwapCopyDetailHtml(row.label, row.copyValue ?? row.value, {
+        selectable: row.selectable,
+        displayValue: row.value
+      })
+    ).join("")}
             </dl>
             ${waitingStatus}
             ${feeBreakdown}
@@ -786,7 +788,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
           </form>
         `}
         ${supportDetails}
-        ${renderElementSwapRefundReturnWarningHtml()}
+        ${renderElementSwapRefundReturnWarningHtml(display)}
       </section>
     `;
   }
@@ -801,7 +803,7 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
           ${display.refundTxId === void 0 ? "" : renderElementSwapCopyDetailHtml("Refund transaction", display.refundTxId, { kind: "tx", payInAsset: display.payInAsset })}
         </dl>
         ${supportDetails}
-        ${renderElementSwapRefundReturnWarningHtml()}
+        ${renderElementSwapRefundReturnWarningHtml(display)}
       </section>
     `;
   }
@@ -814,9 +816,9 @@ function renderElementSwapPanelHtml(invoice, view = {}) {
     </section>
   `;
 }
-function renderElementSwapRefundReturnWarningHtml() {
+function renderElementSwapRefundReturnWarningHtml(display) {
   return `
-    <p part="swap-refund-return" class="${orClasses4.swapWarning}">${escapeHtml4(checkoutLabels4.refundReturnWarning)}</p>
+    <p part="swap-refund-return" class="${orClasses4.swapWarning}">${escapeHtml4(display.refundReturnLabel)}</p>
   `;
 }
 function renderElementSwapRefundFactsHtml(display) {
@@ -917,9 +919,6 @@ 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}">
@@ -1081,49 +1080,33 @@ function renderPaymentWizardHtml(view = {}) {
   `;
 }
 function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
-  const entries = buildMethodGridEntries(paymentMethods, swapAssetOptions);
+  const limitContext = elementsSwapLimitContext(view);
+  const display = createMethodGridDisplay({
+    entries: buildMethodGridEntries(paymentMethods, swapAssetOptions),
+    selectedPickerKey: view.selectedPickerKey ?? null,
+    selectedAssetByGroup: view.selectedSwapAssetByGroup ?? {},
+    startingAsset: wizardStartingAsset(view) ?? null,
+    ...limitContext === void 0 ? {} : { checkout: limitContext }
+  });
   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 { gridBusy, networkRequired, selectedGroup, continueTarget } = display;
   const continueButton = (className) => renderElementMethodConfirmHtml({
     className,
-    disabled: continueDisabled,
-    starting: continueStarting,
-    swapStartAsset: continueAttr.length === 0 || selectedNetworkOption === void 0 ? void 0 : selectedNetworkOption.pay_in_asset,
-    label: continueLabel
+    disabled: continueTarget === void 0 || continueTarget.disabled,
+    starting: continueTarget?.starting === true,
+    swapStartAsset: continueTarget === void 0 || continueTarget.disabled ? void 0 : continueTarget.payInAsset,
+    label: escapeHtml5(continueTarget?.label ?? checkoutLabels5.continue)
   });
-  const tiles = entries.map((entry) => {
+  const tiles = display.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 })}"
+            class="${assetButtonClasses({ accent: entry.accent, selected: false, disabled: entry.disabled })}"
             ${OPENRECEIVE_PAYMENT_WIZARD_ATTRIBUTES5.method}="${escapeHtml5(method.id)}"
-            ${gridBusy ? 'disabled aria-disabled="true"' : ""}
+            ${entry.disabled ? 'disabled aria-disabled="true"' : ""}
           >
             <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
               <img class="${orClasses5.methodIcon}" alt="" src="${escapeHtml5(getPaymentMethodIcon(method.id, view.resolveAssetUrl))}">
@@ -1136,8 +1119,8 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
     return renderElementSwapMethodGroupHtml(
       entry.group,
       view,
-      selectedKey,
-      selectedKey === swapPickerKey(entry.group.label) ? continueButton(orClasses5.methodConfirmDesktop) : void 0
+      gridBusy,
+      entry.group.selected ? continueButton(orClasses5.methodConfirmDesktop) : void 0
     );
   }).join("");
   const loadingTile = currenciesLoading ? `<div part="currencies-loading" role="status" aria-live="polite" class="${orClasses5.methodCurrenciesLoading}">
@@ -1164,12 +1147,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
     `;
 }
 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 { accent, groupKey, panelId, headingId, selectedOption } = group;
   const networkButtons = group.options.map((option) => {
     const optionDisabled = option.available === false;
     const optionSelected = option.pay_in_asset === selectedOption?.pay_in_asset;
@@ -1211,7 +1189,7 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
       <div class="${orClasses5.methodNetworkLayout}">
         <div>
           <h3 id="${headingId}" class="${orClasses5.methodNetworkHeading}">${escapeHtml5(
-    formatChooseNetworkHeading(group.label)
+    group.heading
   )}</h3>
           <p class="${orClasses5.methodNetworkHint}">${escapeHtml5(
     checkoutLabels5.selectNetworkToContinue
@@ -1238,25 +1216,19 @@ function renderElementMethodConfirmHtml(options) {
       ${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);
+function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonHtml) {
+  const {
+    pickerKey,
+    selected,
+    displayOption,
+    selectedOption,
+    multiNetwork,
+    starting,
+    disabled,
+    accent,
+    limitMessage,
+    panelId
+  } = group;
   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}">
@@ -1408,9 +1380,12 @@ function renderCheckoutHtml(view) {
     renderTransactionDetailsHtml(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";
+  const orderDescription = view.description === void 0 || view.description === "" ? "" : `<p part="order-description" ${OPENRECEIVE_CHECKOUT_DATA_ATTRIBUTES.orderDescription} class="${orClasses6.orderDescription}">${escapeHtml6(view.description)}</p>`;
   return `
     ${styleTag(view.inlineStyles)}
     <section part="root" data-theme="${escapeHtml6(resolvedTheme)}" class="${orClasses6.root}">
+      <slot name="${OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS.order}"></slot>
+      ${orderDescription}
       ${hideLightning ? "" : `<div part="payment-layout" class="${paymentLayoutClass}">
             ${lightningPane}
             <div part="payment-info" class="${orClasses6.paymentInfo}">
@@ -1505,6 +1480,7 @@ function checkoutSnapshotDisplayKey(snapshot) {
     )
   });
 }
+var warnedAssetSeamConflict = false;
 function defineElements(options = {}) {
   const registry = options.registry ?? globalThis.customElements;
   const HTMLElementCtor = globalThis.HTMLElement;
@@ -1520,7 +1496,7 @@ function defineElements(options = {}) {
     activeTutorialCopied = false;
     swapOptions = [];
     swapOptionsLoaded = false;
-    selectedSwapNetworks = {};
+    selectedSwapAssetByGroup = {};
     selectedPickerKey = null;
     selectedSwapAsset = null;
     startedSwapInvoice;
@@ -1604,9 +1580,11 @@ function defineElements(options = {}) {
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.syncUrl,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumePathPrefix,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.routeReference,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumable,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs,
-        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.assetBaseUrl
       ];
     }
     connectedCallback() {
@@ -1621,7 +1599,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;
+      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();
@@ -1654,6 +1632,27 @@ function defineElements(options = {}) {
       this.stopCheckoutController();
       this.stopThemeAncestorObserver();
     }
+    /**
+     * The asset seam for this element. `resolveAssetUrl` on `defineElements` is
+     * the explicit, programmatic answer and wins; `asset-base-url` is the string
+     * every host can reach — plain markup and the Vue/Svelte/Angular wrappers
+     * included, since `defineElements` is first-write-wins and all three call it
+     * with no options. Setting both is a host mistake worth naming once.
+     */
+    resolveAssetUrlResolver() {
+      const base = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.assetBaseUrl);
+      if (options.resolveAssetUrl !== void 0) {
+        if (base !== null && !warnedAssetSeamConflict) {
+          warnedAssetSeamConflict = true;
+          globalThis.console?.warn(
+            "[openreceive] Both defineElements({ resolveAssetUrl }) and asset-base-url are set; resolveAssetUrl wins. Drop one."
+          );
+        }
+        return options.resolveAssetUrl;
+      }
+      if (base === null || base.trim() === "") return void 0;
+      return createAssetBaseUrlResolver(base);
+    }
     // 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
@@ -1692,11 +1691,29 @@ 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;
+    }
     /** 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;
@@ -1716,7 +1733,7 @@ function defineElements(options = {}) {
         (invoice) => invoice.rail === "swap" && invoice.swap !== void 0
       );
       if (swapInvoice !== void 0) {
-        this.startedSwapInvoice = overlaySwapRefundStaging(swapInvoice, this.startedSwapInvoice);
+        this.startedSwapInvoice = swapInvoice;
       }
       const displayKey = checkoutSnapshotDisplayKey(snapshot);
       if (this.lastSnapshotDisplayKey === displayKey) return;
@@ -1753,6 +1770,7 @@ function defineElements(options = {}) {
       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 assetUrlResolver = this.resolveAssetUrlResolver();
       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();
@@ -1769,6 +1787,10 @@ function defineElements(options = {}) {
           this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.status)
         ),
         expires_at: readElementExpiresAt(this),
+        // Host-owned order context, straight off the polled snapshot: the
+        // element has no attribute for it because the payer must never be able
+        // to write the copy next to the amount.
+        ...this.latestCheckoutSnapshot?.description === void 0 ? {} : { description: this.latestCheckoutSnapshot.description },
         theme: this.resolveTheme(),
         payment_wizard: parseBooleanAttribute(
           this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentWizard)
@@ -1779,17 +1801,18 @@ 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 },
           ...this.latestCheckoutSnapshot?.checkout_id === void 0 ? {} : { checkoutId: this.latestCheckoutSnapshot.checkout_id },
           lightningInvoice: invoice,
           ...decodeLinkUrl === void 0 ? {} : { decodeLinkUrl },
-          ...options.resolveAssetUrl === void 0 ? {} : { resolveAssetUrl: options.resolveAssetUrl },
+          ...assetUrlResolver === void 0 ? {} : { resolveAssetUrl: assetUrlResolver },
           ...this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) === null ? {} : {
             paymentHash: this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) ?? void 0
           },
@@ -1863,7 +1886,8 @@ function defineElements(options = {}) {
     startCheckoutController() {
       const attributeSnapshot = this.currentCheckoutSnapshot();
       const latest = this.latestCheckoutSnapshot;
-      const snapshot = latest?.active?.rail === "swap" ? latest : attributeSnapshot ?? latest;
+      const chosen = latest?.active?.rail === "swap" ? latest : attributeSnapshot ?? latest;
+      const snapshot = chosen !== void 0 && chosen.description === void 0 && latest?.description !== void 0 && latest.reference === chosen.reference ? { ...chosen, description: latest.description } : chosen;
       const prefix = this.resolvePollPrefix(snapshot?.reference);
       if (snapshot === void 0) {
         this.stopCheckoutController();
@@ -1879,7 +1903,8 @@ function defineElements(options = {}) {
       this.stopCheckoutController();
       this.controller = createCheckoutController({
         snapshot,
-        ...prefix === void 0 || !polling ? {} : { prefix },
+        ...prefix === void 0 ? {} : { prefix },
+        polling,
         ...pollIntervalMs === void 0 ? {} : { pollIntervalMs },
         logger: options.logger,
         onError: (error) => this.dispatchError(error),
@@ -1974,7 +1999,7 @@ function defineElements(options = {}) {
       }
       const swapInvoice = this.currentSwapInvoice();
       if (swapInvoice !== void 0) {
-        const display = createSwapDisplayModel2(swapInvoice, {});
+        const display = createSwapDisplayModel2(swapInvoice, { resumable: this.isResumable() });
         const swapCountdown = root.querySelector('[part="swap-countdown"]');
         if (swapCountdown !== null && display !== void 0) {
           swapCountdown.textContent = display.countdownLabel;
@@ -2009,9 +2034,15 @@ function defineElements(options = {}) {
           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);
+          const selection = resolveWizardSelection({
+            pickerKey: key,
+            previousKey: this.selectedPickerKey,
+            entries: buildMethodGridEntries2(paymentMethods2, this.swapOptions),
+            selectedAssetByGroup: this.selectedSwapAssetByGroup
+          });
+          if (selection.kind === "none") return;
+          if (selection.kind === "select_method") {
+            const method = parsePaymentMethod(selection.methodId);
             if (method === null) return;
             this.selectedPickerKey = null;
             this.selection = updatePaymentWizardSelection(this.selection, {
@@ -2024,23 +2055,13 @@ function defineElements(options = {}) {
             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;
+          if (selection.kind === "start_swap") {
             this.selectedPickerKey = null;
-            void this.session.startSwap(option.pay_in_asset);
+            void this.session.startSwap(selection.payInAsset);
             return;
           }
-          this.selectedSwapNetworks = updateSelectedSwapNetworks({
-            entries,
-            nextKey: key,
-            previousKey,
-            selectedNetworks: this.selectedSwapNetworks
-          });
+          this.selectedPickerKey = key;
+          this.selectedSwapAssetByGroup = selection.selectedAssetByGroup;
           this.render();
         });
       });
@@ -2070,7 +2091,7 @@ function defineElements(options = {}) {
           if (target === "swap-asset") {
             this.selectedSwapAsset = null;
             this.selectedPickerKey = null;
-            this.selectedSwapNetworks = {};
+            this.selectedSwapAssetByGroup = {};
             this.render();
             return;
           }
@@ -2119,8 +2140,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();
@@ -2131,8 +2152,9 @@ 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();
         this.render();
       });
@@ -2271,20 +2293,10 @@ function defineElements(options = {}) {
       }
     }
     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;
+      const controller = this.controller;
+      if (controller === 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.startedSwapInvoice = confirm ? await controller.confirmSwapRefund({ attemptId, refundAddress }) : await controller.stageSwapRefund({ attemptId, refundAddress });
         this.dismissedSwapInvoiceId = null;
         this.render();
       } catch (error) {
@@ -2292,16 +2304,10 @@ function defineElements(options = {}) {
       }
     }
     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);
+      return selectCurrentSwapInvoice(this.latestCheckoutSnapshot, {
+        started: this.startedSwapInvoice,
+        dismissedInvoiceId: this.dismissedSwapInvoiceId
+      });
     }
     renderSwapQrCodes(root) {
       root.querySelectorAll(OPENRECEIVE_PAYMENT_WIZARD_SELECTORS3.swapQr).forEach((target) => {