@openreceive/elements 0.4.2 → 0.4.5

package/README.md

@@ -26,11 +26,12 @@ It dispatches plain DOM `CustomEvent`s (`openreceive-settled`,
 handler props over the shared binding at
 `@openreceive/elements/wrapper-shared`.
 
-## Icon assets
+## Images
 
-The checkout loads its payment-method icons by URL at runtime; your app must
-serve them where the resolution lands. See
-[Icon assets in `@openreceive/browser`](https://github.com/openreceive/openreceive/blob/master/packages/js/browser/README.md#icon-assets)
-for the per-bundler recipes.
+Everything the checkout draws — payment-method icons, wallet logos, pay
+tutorials — ships inside the JavaScript; nothing to copy, serve or configure,
+under any bundler. If your Content-Security-Policy has a strict `img-src`,
+allow `data:`. See
+[Images in `@openreceive/browser`](https://github.com/openreceive/openreceive/blob/master/packages/js/browser/README.md#images).
 
 Part of [OpenReceive](https://openreceive.org). Start with the [Node quickstart](https://github.com/openreceive/openreceive/blob/master/docs/guides/quickstart-node.md); the full API is in the [API reference](https://github.com/openreceive/openreceive/blob/master/docs/guides/api-reference.md).

package/dist/{chunk-VJBC57J6.js → chunk-4APDZW7L.js}

@@ -13,7 +13,6 @@ import {
 import {
   buildMethodGridEntries as buildMethodGridEntries2,
   copyInvoice,
-  createAssetBaseUrlResolver,
   createCheckoutActionEvent,
   createCheckoutController,
   createCheckoutErrorEvent,
@@ -29,6 +28,7 @@ import {
   deriveStatus as deriveStatus2,
   enterCheckoutResumePath,
   getSwapRefundFormError,
+  loadPayTutorialImages,
   OPENRECEIVE_CHECKOUT_DATA_SELECTORS,
   OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES as OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3,
   OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS,
@@ -204,6 +204,10 @@ function createElementCheckoutSession(host) {
   function currentPrefix() {
     return host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.prefix) ?? OPENRECEIVE_DEFAULT_PREFIX;
   }
+  function currentCsrfHeader() {
+    const name = host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.csrfHeader);
+    return name === null || name.length === 0 ? void 0 : name;
+  }
   function currentReference() {
     const reference = host.element.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES2.reference);
     return reference === null || reference.length === 0 ? void 0 : reference;
@@ -242,10 +246,12 @@ function createElementCheckoutSession(host) {
     reference: currentReference,
     requestCheckout: (reference) => {
       const metadata = host.createMetadata();
+      const csrfHeader = currentCsrfHeader();
       return requestCheckout({
         prefix: currentPrefix(),
         reference,
         ...metadata === void 0 ? {} : { metadata },
+        ...csrfHeader === void 0 ? {} : { csrfHeader },
         fetch: globalThis.fetch
       });
     },
@@ -254,6 +260,7 @@ function createElementCheckoutSession(host) {
       selection: host.swapSelection,
       prefix: () => host.resolvePollPrefix(currentReference()),
       fetch: () => globalThis.fetch,
+      csrfHeader: currentCsrfHeader,
       // 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.
@@ -273,6 +280,7 @@ function createElementCheckoutSession(host) {
     const reference = currentReference();
     if (reference === void 0) return;
     const prefix = currentPrefix();
+    const csrfHeader = currentCsrfHeader();
     const key = `${prefix}::${reference}`;
     if (creating) return;
     if (createdKey === key) {
@@ -288,17 +296,23 @@ function createElementCheckoutSession(host) {
       const prepared = await prepareCheckout({
         prefix,
         reference,
+        ...csrfHeader === void 0 ? {} : { csrfHeader },
         fetch: globalThis.fetch
       });
       const resumeHash = host.resumePaymentHash();
       const checkout = resumeHash === void 0 ? prepared : await resumeSwapAttempt({
         fetch: globalThis.fetch,
         prefix,
+        ...csrfHeader === void 0 ? {} : { csrfHeader },
         reference,
         paymentHash: resumeHash,
         snapshot: prepared
       });
       if (currentCreateKey() !== key) return;
+      if (checkout.active?.swap !== void 0) {
+        host.swapSelection.setSelectedAsset(checkout.active.swap.pay_in_asset);
+        host.swapSelection.setDismissedInvoiceId(null);
+      }
       host.handleControllerSnapshot(checkout);
       applyOwnAttributes(
         createCheckoutElementAttributes(checkout, {
@@ -440,16 +454,8 @@ import {
 } from "@openreceive/browser/headless";
 
 // src/payment-icon.ts
-import {
-  escapeHtml as escapeHtml2,
-  paymentIconPaths,
-  paymentIconSvgs
-} from "@openreceive/browser/headless";
+import { escapeHtml as escapeHtml2, paymentIconSvgs } from "@openreceive/browser/headless";
 function renderPaymentIconHtml(id, options) {
-  if (options.resolveAssetUrl !== void 0) {
-    const src = escapeHtml2(options.resolveAssetUrl(paymentIconPaths[id]));
-    return `<img class="${options.className}" alt="" src="${src}">`;
-  }
   return paymentIconSvgs[id].replace(
     /^<svg\b([^>]*)>/,
     (_match, attributes) => `<svg${attributes.replace(/\s(?:class|role|aria-label)="[^"]*"/g, "")} class="${options.className}" role="img" aria-label="${escapeHtml2(options.label)}">`
@@ -501,7 +507,9 @@ function renderTutorialModalHtml(routes, activeProviderId, activeTutorialIndex,
         </div>
       ` : `
         <div part="tutorial-frame" class="${orClasses2.tutorialFrame}">
-          <img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${escapeHtml3(tutorial?.caption ?? "")}" src="${escapeHtml3(tutorial?.image ?? "")}">
+          ${// No `<img>` until the lazily loaded screenshot is in hand: an
+  // empty src is a request for the page itself.
+  tutorial?.image === void 0 ? "" : `<img part="tutorial-image" class="${orClasses2.tutorialImage}" alt="${escapeHtml3(tutorial.caption)}" src="${escapeHtml3(tutorial.image)}">`}
         </div>
         <p part="tutorial-caption" class="${orClasses2.tutorialCaption}">${escapeHtml3(tutorial?.caption ?? "")}</p>
       `;
@@ -1010,12 +1018,9 @@ function renderPaymentWizardHtml(view = {}) {
   const model = createPaymentWizardModel(selection);
   const { wizard } = model;
   const routeAssetDisplays = createWizardRouteAssetDisplays(model.routeAssets, {
-    selectedRoute: model.selectedRoute,
-    ...view.resolveAssetUrl === void 0 ? {} : { resolveAssetUrl: view.resolveAssetUrl }
-  });
-  const routeDisplays = createWizardRouteDisplays(wizard.routes, {
-    ...view.resolveAssetUrl === void 0 ? {} : { resolveAssetUrl: view.resolveAssetUrl }
+    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,
@@ -1104,8 +1109,7 @@ function renderPaymentWizardHtml(view = {}) {
               >
                 ${renderPaymentIconHtml(asset.iconId, {
       className: orClasses5.methodIcon,
-      label: asset.label,
-      resolveAssetUrl: view.resolveAssetUrl
+      label: asset.label
     })}
                 <strong class="${orClasses5.methodTitle}">${escapeHtml6(asset.label)}</strong>
                 <small class="${orClasses5.methodDetail}">${escapeHtml6(asset.subtitle)}</small>
@@ -1215,8 +1219,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
             <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
               ${renderPaymentIconHtml(getPaymentMethodIconId(method.id), {
         className: orClasses5.methodIcon,
-        label: method.title,
-        resolveAssetUrl: view.resolveAssetUrl
+        label: method.title
       })}
             </span>
             <span class="${orClasses5.methodTitleWrap}">
@@ -1278,8 +1281,7 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
             <span aria-hidden="true" class="grid size-6 shrink-0 place-items-center">
               ${renderPaymentIconHtml(getNetworkIconId(option.network_label), {
       className: orClasses5.methodNetworkIcon,
-      label: option.network_label,
-      resolveAssetUrl: view.resolveAssetUrl
+      label: option.network_label
     })}
             </span>
             <span class="truncate">${escapeHtml6(option.network_label)}</span>
@@ -1367,8 +1369,7 @@ function renderElementSwapMethodGroupHtml(group, view, gridBusy, continueButtonH
         <span aria-hidden="true" class="${orClasses5.methodIconWrap}">
           ${starting ? `<span part="spinner" class="${orClasses5.spinner}" aria-hidden="true"></span>` : renderPaymentIconHtml(getSwapOptionIconId(displayOption), {
     className: orClasses5.methodIcon,
-    label: group.label,
-    resolveAssetUrl: view.resolveAssetUrl
+    label: group.label
   })}
         </span>
         <span class="${orClasses5.methodTitleWrap}">
@@ -1596,7 +1597,6 @@ function checkoutSnapshotDisplayKey(snapshot) {
     )
   });
 }
-var warnedAssetSeamConflict = false;
 function defineElements(options = {}) {
   const registry = options.registry ?? globalThis.customElements;
   const HTMLElementCtor = globalThis.HTMLElement;
@@ -1631,6 +1631,7 @@ function defineElements(options = {}) {
     refundAddressDraftSelectionEnd = null;
     /** Tutorial provider whose dialog was last focused, so re-renders don't re-steal focus. */
     focusedTutorialProviderId = null;
+    tutorialImagesRequested = false;
     /**
      * Create mode's whole request lifecycle — prepare-once, the deferred
      * Lightning mint, the swap start — plus the guard that keeps attributes the
@@ -1683,6 +1684,7 @@ function defineElements(options = {}) {
       return [
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.reference,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.prefix,
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.csrfHeader,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoiceId,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.invoice,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.rail,
@@ -1701,8 +1703,7 @@ function defineElements(options = {}) {
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.resumable,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling,
         OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs,
-        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl,
-        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.assetBaseUrl
+        OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.decodeLinkUrl
       ];
     }
     connectedCallback() {
@@ -1717,13 +1718,13 @@ 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.resumable || 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;
       if (displayOnly) {
         this.render();
         this.syncThemeAncestorObserver();
         return;
       }
-      const pollingChanged = name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs;
+      const pollingChanged = name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.polling || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs || name === OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.csrfHeader;
       if (pollingChanged) {
         this.render();
         this.syncThemeAncestorObserver();
@@ -1751,25 +1752,19 @@ function defineElements(options = {}) {
       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.
+     * The tutorial screenshots are the one image set behind a dynamic import.
+     * The first tutorial open fetches them and re-renders; until then (or if
+     * the chunk never arrives) the dialog draws the caption alone.
      */
-    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);
+    loadTutorialImages() {
+      if (this.tutorialImagesRequested) return;
+      this.tutorialImagesRequested = true;
+      loadPayTutorialImages().then(
+        () => {
+          if (this.isConnected) this.render();
+        },
+        () => void 0
+      );
     }
     // Create mode: a `reference` is set but no `invoice` snapshot is provided. The element
     // owns the whole lifecycle — it prepares the checkout against
@@ -1899,7 +1894,6 @@ 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();
@@ -1941,7 +1935,6 @@ function defineElements(options = {}) {
           ...this.latestCheckoutSnapshot?.checkout_id === void 0 ? {} : { checkoutId: this.latestCheckoutSnapshot.checkout_id },
           lightningInvoice: invoice,
           ...decodeLinkUrl === void 0 ? {} : { decodeLinkUrl },
-          ...assetUrlResolver === void 0 ? {} : { resolveAssetUrl: assetUrlResolver },
           ...this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) === null ? {} : {
             paymentHash: this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentHash) ?? void 0
           },
@@ -2029,10 +2022,12 @@ function defineElements(options = {}) {
         this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.pollIntervalMs),
         { label: "poll-interval-ms" }
       );
+      const csrfHeader = this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.csrfHeader);
       this.stopCheckoutController();
       this.controller = createCheckoutController({
         snapshot,
         ...prefix === void 0 ? {} : { prefix },
+        ...csrfHeader === null || csrfHeader.length === 0 ? {} : { csrfHeader },
         polling,
         ...pollIntervalMs === void 0 ? {} : { pollIntervalMs },
         logger: options.logger,
@@ -2384,6 +2379,7 @@ function defineElements(options = {}) {
           }
           this.activeTutorialProviderId = providerId;
           this.activeTutorialIndex = Number.isSafeInteger(index) && index >= 0 ? index : 0;
+          this.loadTutorialImages();
           this.render();
         });
       });

package/dist/{define-elements-ClzBXJCH.d.ts → define-elements-bLhlu_xC.d.ts}

@@ -1,4 +1,4 @@
-import { Status, PaymentMethod, CheckoutPaymentMethod, AssetUrlResolver, CheckoutInvoiceSnapshot, SwapLimitContext, CheckoutState, QrEncoder, BrowserLoggerOption } from '@openreceive/browser/headless';
+import { Status, PaymentMethod, CheckoutPaymentMethod, CheckoutInvoiceSnapshot, SwapLimitContext, CheckoutState, QrEncoder, BrowserLoggerOption } from '@openreceive/browser/headless';
 
 interface CheckoutView {
     readonly invoice_id?: string;
@@ -81,16 +81,6 @@ interface ElementsWizardView {
     readonly lightningInvoice?: string;
     /** Host-chosen bolt11 decoder base URL; omitted, the tutorial shows no decode link. */
     readonly decodeLinkUrl?: string;
-    /**
-     * Rewrite a packaged asset path (`assets/provider-icons/strike.png`,
-     * `assets/pay_tutorials/strike-1.webp`) into a URL this host can serve. The
-     * packaged URLs only resolve under Vite/Rollup; every other bundler needs
-     * this or the provider images come out as dead `file://` links. The
-     * payment-method icons are drawn inline from compiled-in markup and need
-     * nothing; given a resolver they are served as files through it instead.
-     * `defineElements` passes its own down to here.
-     */
-    readonly resolveAssetUrl?: AssetUrlResolver;
     readonly paymentHash?: string;
     readonly swapInvoice?: CheckoutInvoiceSnapshot;
     readonly activeTutorialProviderId?: string | null;
@@ -116,13 +106,6 @@ interface DefineElementsOptions {
     readonly registry?: CustomElementRegistry;
     readonly qrEncoder?: QrEncoder;
     readonly logger?: BrowserLoggerOption;
-    /**
-     * Element-owned, like `qrEncoder` and `logger`: how this host resolves the
-     * packaged provider-image paths. Omitted, the packaged URLs are used —
-     * correct under Vite/Rollup and dead `file://` links under anything else.
-     * (Payment-method icons are compiled in and unaffected.)
-     */
-    readonly resolveAssetUrl?: AssetUrlResolver;
 }
 
 /**

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { TransactionDetailsSource } from '@openreceive/browser/headless';
 export { OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES, OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS, OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES, OPENRECEIVE_THEME_TOGGLE_ELEMENT_EVENTS, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, TransactionDetailsSource, createThemeToggleElement } from '@openreceive/browser/headless';
-import { C as CheckoutView } from './define-elements-ClzBXJCH.js';
-export { D as DefineElementsOptions, E as ElementsWizardView, d as defineElements } from './define-elements-ClzBXJCH.js';
+import { C as CheckoutView } from './define-elements-bLhlu_xC.js';
+export { D as DefineElementsOptions, E as ElementsWizardView, d as defineElements } from './define-elements-bLhlu_xC.js';
 
 declare function renderCheckoutHtml(view: CheckoutView): string;
 /**

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   renderCheckoutHtml,
   renderThemeToggleHtml,
   renderTransactionDetailsHtml
-} from "./chunk-VJBC57J6.js";
+} from "./chunk-4APDZW7L.js";
 export {
   OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES,
   OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS,