@seatlayer/js 0.37.0 → 0.38.0

package/dist/index.cjs

@@ -8,6 +8,14 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -35,6 +43,354 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
+// src/hostedCheckout.ts
+var hostedCheckout_exports = {};
+__export(hostedCheckout_exports, {
+  errorCopy: () => errorCopy,
+  formatMoney: () => formatMoney,
+  mountCheckout: () => mountCheckout,
+  unavailableCopy: () => unavailableCopy
+});
+function ensureStyle() {
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID)) return;
+  const el2 = document.createElement("style");
+  el2.id = STYLE_ID;
+  el2.textContent = CSS;
+  document.head.appendChild(el2);
+}
+function formatMoney(amount, currency) {
+  try {
+    return new Intl.NumberFormat(void 0, { style: "currency", currency }).format(amount);
+  } catch {
+    return `${amount.toFixed(2)} ${currency}`;
+  }
+}
+function unavailableCopy(reason, seatCount) {
+  const held = `${seatCount} ${seatCount === 1 ? "seat is" : "seats are"} held for a limited time.`;
+  if (reason === "payments_off_for_event") {
+    return {
+      title: "This event isn\u2019t sold online",
+      body: `${held} The organiser isn\u2019t taking payment for this event here.`,
+      detail: "Nothing has been charged. Check where you found this event for how to get tickets."
+    };
+  }
+  if (reason === "unavailable_for_event") {
+    return {
+      title: "This event isn\u2019t taking payment yet",
+      body: `${held} Online payment is not switched on for this event.`,
+      detail: "Nothing has been charged. If you were sent here to pay, let the organiser know \u2014 only they can turn payment on for this event."
+    };
+  }
+  return {
+    title: "Finish in the ticketing checkout",
+    body: `${held} Payment for this event is taken elsewhere.`,
+    detail: "Nothing has been charged. Continue in the checkout on this page to pay for your seats."
+  };
+}
+function errorCopy(code) {
+  switch (code) {
+    case "gateway_not_connected":
+    case "payments_not_enabled_for_event":
+      return "This event is not taking online payments. Contact the organiser to buy these seats.";
+    case "provider_mismatch":
+      return "This event\u2019s payment setup changed while you were choosing. Nothing was charged \u2014 please try again.";
+    case "hold_not_active":
+    case "hold_not_found":
+      return "Your seats were released before checkout started. Nothing was charged \u2014 please pick again.";
+    case "checkout_already_started":
+      return "A payment for these seats is already in progress. Finish that one, or wait for it to time out before starting again.";
+    case "event_closed":
+      return "Sales for this event have closed.";
+    case "gateway_currency_mismatch":
+    case "unsupported_currency":
+    case "mixed_currency_hold":
+    case "price_unusable":
+      return "These seats cannot be checked out right now because of a pricing configuration problem. Nothing was charged \u2014 please contact the organiser.";
+    case "rate_limited":
+      return "Too many attempts. Wait a moment and try again.";
+    default:
+      return "We could not start the payment. Nothing was charged \u2014 please try again.";
+  }
+}
+function loadRazorpay() {
+  const existing = window.Razorpay;
+  if (existing) return Promise.resolve(existing);
+  return new Promise((resolve, reject) => {
+    const previous = document.querySelector(`script[src="${RAZORPAY_SCRIPT}"]`);
+    const tag = previous ?? document.createElement("script");
+    const done = () => {
+      const ctor = window.Razorpay;
+      if (ctor) resolve(ctor);
+      else reject(new Error("razorpay_unavailable"));
+    };
+    tag.addEventListener("load", done, { once: true });
+    tag.addEventListener("error", () => reject(new Error("razorpay_script_failed")), { once: true });
+    if (previous) return;
+    tag.src = RAZORPAY_SCRIPT;
+    tag.async = true;
+    document.head.appendChild(tag);
+  });
+}
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== void 0) node.textContent = text;
+  return node;
+}
+function mountCheckout(mount) {
+  ensureStyle();
+  let live = true;
+  let confirmed = false;
+  const scrim = el("div", "sl-hco");
+  scrim.setAttribute("role", "dialog");
+  scrim.setAttribute("aria-modal", "true");
+  const card = el("div", "sl-hco-card");
+  scrim.appendChild(card);
+  const destroy = () => {
+    live = false;
+    scrim.remove();
+    document.removeEventListener("keydown", onKey, true);
+  };
+  const cancel = () => {
+    destroy();
+    mount.onCancel();
+  };
+  function onKey(event) {
+    if (event.key !== "Escape" || !scrim.isConnected) return;
+    event.stopPropagation();
+    event.preventDefault();
+    cancel();
+  }
+  document.addEventListener("keydown", onKey, true);
+  const title = el("h2", "sl-hco-title", "Checkout");
+  const titleId = `sl-hco-t-${Math.random().toString(36).slice(2, 8)}`;
+  title.id = titleId;
+  scrim.setAttribute("aria-labelledby", titleId);
+  const show = (...nodes) => {
+    card.replaceChildren(title, ...nodes);
+  };
+  const fail = (message) => {
+    if (!live) return;
+    const status = el("p", "sl-hco-status sl-hco-error", message);
+    status.setAttribute("role", "alert");
+    const back2 = el("button", "sl-hco-back", "Back to seats");
+    back2.type = "button";
+    back2.addEventListener("click", cancel);
+    show(status, back2);
+  };
+  const waiting = (message) => {
+    if (!live) return;
+    const status = el("p", "sl-hco-status", message);
+    status.setAttribute("role", "status");
+    show(status);
+  };
+  const awaitConfirmation = async (orderId) => {
+    waiting("Payment received \u2014 confirming your seats\u2026");
+    const deadline = Date.now() + CONFIRM_TIMEOUT_MS;
+    while (live && Date.now() < deadline) {
+      try {
+        const body = await mount.orderStatus(orderId);
+        if (!live) return;
+        if (body.status === "confirmed") {
+          confirmed = true;
+          title.textContent = "Your tickets are confirmed";
+          const status = el(
+            "p",
+            "sl-hco-status",
+            `${body.seatCount} ${body.seatCount === 1 ? "seat" : "seats"} confirmed. We have emailed your tickets.`
+          );
+          const receipt = el("dl", "sl-hco-receipt");
+          receipt.append(
+            el("dt", void 0, "Paid"),
+            el("dd", void 0, `${body.amountFormatted} ${body.currency}`),
+            el("dt", void 0, "Order"),
+            el("dd", "sl-hco-ref", body.orderId)
+          );
+          const close = el("button", "sl-hco-back", "Close");
+          close.type = "button";
+          close.addEventListener("click", cancel);
+          show(status, receipt, close);
+          mount.onConfirmed(body);
+          return;
+        }
+        if (body.status === "failed" || body.status === "expired") {
+          fail(body.status === "expired" ? "Your seats were released before payment completed. Nothing was charged \u2014 please pick again." : "The payment did not complete. If you were charged, it has been refunded automatically.");
+          return;
+        }
+      } catch {
+      }
+      await new Promise((resolve) => setTimeout(resolve, CONFIRM_POLL_MS));
+    }
+    if (!live || confirmed) return;
+    fail("Still confirming with the payment provider. If your payment went through, your tickets will arrive by email shortly \u2014 you do not need to pay again.");
+  };
+  if (mount.state.kind === "unavailable") {
+    const copy = unavailableCopy(mount.state.reason, mount.state.seatCount);
+    title.textContent = copy.title;
+    const kicker = el("p", "sl-hco-label", "Seats held");
+    const back2 = el("button", "sl-hco-back", "Back to seat map");
+    back2.type = "button";
+    back2.addEventListener("click", cancel);
+    card.replaceChildren(
+      kicker,
+      title,
+      el("p", "sl-hco-status", copy.body),
+      el("p", "sl-hco-note", copy.detail),
+      back2
+    );
+    mount.root.appendChild(scrim);
+    back2.focus();
+    return { destroy };
+  }
+  if (mount.state.kind === "resume") {
+    mount.root.appendChild(scrim);
+    void awaitConfirmation(mount.state.orderId);
+    return { destroy };
+  }
+  const { order, provider } = mount.state;
+  const summary = el("div", "sl-hco-summary");
+  const seats = el("div", "sl-hco-seats");
+  for (const label of order.labels) seats.appendChild(el("span", "sl-hco-seat", label));
+  const totalText = formatMoney(order.total, order.currency);
+  const totalRow = el("div", "sl-hco-total");
+  totalRow.append(el("span", void 0, "Total"), el("strong", void 0, totalText));
+  summary.append(seats, totalRow);
+  const form = el("form", "sl-hco-form");
+  const emailLabel = el("label", "sl-hco-label", "Email \u2014 your tickets go here");
+  const email = el("input", "sl-hco-input");
+  email.type = "email";
+  email.required = true;
+  email.autocomplete = "email";
+  email.placeholder = "you@example.com";
+  email.id = `${titleId}-email`;
+  emailLabel.htmlFor = email.id;
+  const nameLabel = el("label", "sl-hco-label", "Name (optional)");
+  const name = el("input", "sl-hco-input");
+  name.type = "text";
+  name.autocomplete = "name";
+  name.placeholder = "Your name";
+  name.id = `${titleId}-name`;
+  nameLabel.htmlFor = name.id;
+  const pay = el("button", "sl-hco-pay", `Pay ${totalText}`);
+  pay.type = "submit";
+  pay.disabled = true;
+  const back = el("button", "sl-hco-back", "Back to seats");
+  back.type = "button";
+  back.addEventListener("click", cancel);
+  const until = new Date(order.expiresAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const note = el(
+    "p",
+    "sl-hco-note",
+    `Your seats are held until ${until}. Payment is handled by ${provider === "razorpay" ? "Razorpay" : "Stripe"} \u2014 we never see your card details.`
+  );
+  const emailValid = () => /.+@.+\..+/.test(email.value.trim());
+  email.addEventListener("input", () => {
+    pay.disabled = !emailValid();
+  });
+  const start = async () => {
+    waiting("Opening secure payment\u2026");
+    try {
+      const body = await mount.startSession({
+        holdId: order.holdId,
+        buyerEmail: email.value.trim(),
+        // Deliberately no `provider`: since W2 the EVENT row decides which
+        // gateway charges, and naming one here can only ever 409 on a mismatch
+        // the buyer cannot do anything about.
+        ...name.value.trim() ? { buyerName: name.value.trim() } : {}
+      });
+      if (!live) return;
+      if (body.redirectUrl) {
+        waiting("Taking you to secure payment\u2026");
+        window.location.assign(body.redirectUrl);
+        return;
+      }
+      if (body.clientPayload) {
+        const payload = body.clientPayload;
+        const Razorpay = await loadRazorpay();
+        if (!live) return;
+        waiting("Waiting for payment\u2026");
+        new Razorpay({
+          key: payload.key,
+          order_id: payload.orderId,
+          amount: payload.amount,
+          currency: payload.currency,
+          name: payload.name,
+          prefill: payload.prefill,
+          // The handler fires on the browser's word alone, so it only starts the
+          // wait — the webhook is what actually confirms the order.
+          handler: () => {
+            void awaitConfirmation(body.orderId);
+          },
+          modal: { ondismiss: () => {
+            if (live) details();
+          } }
+        }).open();
+        return;
+      }
+      fail(errorCopy("gateway_unavailable"));
+    } catch (err) {
+      mount.onError?.(err);
+      fail(errorCopy(err?.code));
+    }
+  };
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    if (emailValid()) void start();
+  });
+  form.append(emailLabel, email, nameLabel, name, pay, back, note);
+  const details = () => {
+    title.textContent = "Checkout";
+    show(summary, form);
+    pay.disabled = !emailValid();
+  };
+  details();
+  mount.root.appendChild(scrim);
+  email.focus();
+  return { destroy };
+}
+var CONFIRM_TIMEOUT_MS, CONFIRM_POLL_MS, RAZORPAY_SCRIPT, STYLE_ID, CSS;
+var init_hostedCheckout = __esm({
+  "src/hostedCheckout.ts"() {
+    "use strict";
+    CONFIRM_TIMEOUT_MS = 9e4;
+    CONFIRM_POLL_MS = 2e3;
+    RAZORPAY_SCRIPT = "https://checkout.razorpay.com/v1/checkout.js";
+    STYLE_ID = "seatlayer-checkout-style";
+    CSS = /* @sl-css */
+    `
+.sl-hco{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
+  padding:16px;background:color-mix(in srgb, var(--sl-bg) 82%, transparent);backdrop-filter:blur(3px)}
+.sl-hco-card{width:100%;max-width:380px;max-height:100%;overflow:auto;padding:22px;
+  background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);
+  border-radius:var(--sl-radius);box-shadow:0 18px 48px rgba(0,0,0,.28)}
+.sl-hco-title{margin:0 0 14px;font-size:19px;font-weight:650;letter-spacing:-.01em}
+.sl-hco-summary{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--sl-line)}
+.sl-hco-seats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
+.sl-hco-seat{padding:3px 8px;font-size:12px;font-weight:600;border-radius:calc(var(--sl-radius) * .5);
+  background:var(--sl-bg);border:1px solid var(--sl-line)}
+.sl-hco-total{display:flex;justify-content:space-between;align-items:baseline;font-size:14px}
+.sl-hco-total strong{font-size:17px;font-weight:700}
+.sl-hco-label{display:block;margin:12px 0 5px;font-size:12px;font-weight:600;color:var(--sl-muted)}
+.sl-hco-input{width:100%;padding:10px 11px;font:inherit;font-size:15px;color:var(--sl-text);
+  background:var(--sl-bg);border:1px solid var(--sl-line);border-radius:calc(var(--sl-radius) * .55)}
+.sl-hco-input:focus-visible{outline:2px solid var(--sl-accent);outline-offset:1px}
+.sl-hco-pay{width:100%;margin-top:16px;padding:12px;font:inherit;font-size:15px;font-weight:650;
+  color:var(--sl-accent-ink);background:var(--sl-accent);border:0;
+  border-radius:calc(var(--sl-radius) * .55);cursor:pointer}
+.sl-hco-pay[disabled]{opacity:.5;cursor:default}
+.sl-hco-back{width:100%;margin-top:8px;padding:10px;font:inherit;font-size:14px;color:var(--sl-muted);
+  background:none;border:0;cursor:pointer;text-decoration:underline}
+.sl-hco-note{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--sl-muted)}
+.sl-hco-status{margin:8px 0 0;font-size:14px;line-height:1.55}
+.sl-hco-error{color:var(--sl-danger, #c0392b)}
+.sl-hco-receipt{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:14px 0 0;font-size:13px}
+.sl-hco-receipt dt{color:var(--sl-muted)}
+.sl-hco-receipt dd{margin:0;text-align:right}
+.sl-hco-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
+`;
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
@@ -185,6 +541,41 @@ var PubApi = class {
       body: { holdId, ...ttlMs ? { ttlMs } : {} }
     });
   }
+  /**
+   * Which gateways this event can actually take money through — the question
+   * `checkout: 'hosted'` has to answer BEFORE it shows a buyer a Pay button, so
+   * the answer is never discovered by failing a payment.
+   *
+   * Anonymous, and it discloses no account, key, mode or currency for a gateway
+   * that did not match.
+   */
+  paymentOptions(key) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/payment-options`);
+  }
+  /**
+   * Turn a live hold into an order and start a payment.
+   *
+   * The amount is NOT sent: the server recomputes it from the hold's own items,
+   * which is the only reason a browser cannot alter what it pays. Nor is the
+   * PROVIDER — the event row decides which gateway charges, and a `provider` in
+   * the body is checked rather than obeyed (409 `provider_mismatch`). Omitting
+   * it is the shape that cannot disagree.
+   */
+  startCheckout(key, input) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/checkout`, {
+      method: "POST",
+      body: input
+    });
+  }
+  /**
+   * Poll an order while its gateway webhook lands. The order id is an
+   * unguessable token the buyer already holds, so it acts as the capability —
+   * which is also why a buyer returning from a gateway page can be told what
+   * happened with nothing but the id in the return URL.
+   */
+  orderStatus(orderId) {
+    return this.request(`/pub/orders/${encodeURIComponent(orderId)}/status`);
+  }
   /**
    * Mint a one-use subscribe ticket for the next socket attempt (protocol doc
    * §3). The bearer travels here, over ordinary HTTPS where CORS and Origin
@@ -845,9 +1236,9 @@ var DEFAULT_API_BASE = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION = 10;
 function resolveContainer(container) {
   if (typeof container === "string") {
-    const el = document.querySelector(container);
-    if (!el) throw new Error(`seatmap: container "${container}" not found`);
-    return el;
+    const el2 = document.querySelector(container);
+    if (!el2) throw new Error(`seatmap: container "${container}" not found`);
+    return el2;
   }
   if (!(container instanceof HTMLElement)) {
     throw new Error("seatmap: container must be a CSS selector or an HTMLElement");
@@ -1738,7 +2129,8 @@ var EmbeddedDesigner = class {
   }
   buildSkeleton(overlay) {
     const style = document.createElement("style");
-    style.textContent = `
+    style.textContent = /* @sl-css */
+    `
 @media (prefers-reduced-motion: no-preference) {
   @keyframes seatlayer-designer-shimmer {
     0% { background-position: -320px 0; }
@@ -1877,9 +2269,9 @@ function pointInPolygon(x, y, poly) {
 }
 function resolveContainer3(container) {
   if (typeof container === "string") {
-    const el = document.querySelector(container);
-    if (!el) throw new Error(`seatmap: container "${container}" not found`);
-    return el;
+    const el2 = document.querySelector(container);
+    if (!el2) throw new Error(`seatmap: container "${container}" not found`);
+    return el2;
   }
   if (!(container instanceof HTMLElement)) {
     throw new Error("seatmap: container must be a CSS selector or an HTMLElement");
@@ -1918,20 +2310,45 @@ function hasWebGL2() {
   }
   return _webgl2Cache;
 }
+function cdnChunkUrl(fileName) {
+  const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
+  if (!base) throw new Error(`seatlayer: cannot resolve the ${fileName} chunk URL`);
+  return new URL(`./${fileName}`, base).href;
+}
 async function loadVenue3d() {
   if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
-    const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
-    if (!base) throw new Error("seatlayer: cannot resolve the 3D view chunk URL");
-    const url = new URL("./seatlayer-view3d.mjs", base).href;
     return import(
       /* @vite-ignore */
-      url
+      cdnChunkUrl("seatlayer-view3d.mjs")
     );
   }
   return import("@seatlayer/core/view3d");
 }
-var STYLE_ID = "seatlayer-picker-style";
-var CSS = `
+async function loadPanorama() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-panorama.mjs")
+    );
+  }
+  return import("@seatlayer/core");
+}
+async function loadHostedCheckout() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-checkout.mjs")
+    );
+  }
+  return Promise.resolve().then(() => (init_hostedCheckout(), hostedCheckout_exports));
+}
+function paymentsOffReason(reason) {
+  return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
+}
+var STYLE_ID2 = "seatlayer-picker-style";
+var CSS2 = (
+  /* @sl-css */
+  `
 .sl-picker{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:420px;overflow:hidden;
   background:var(--sl-bg);color:var(--sl-text);font-family:var(--sl-font);border-radius:var(--sl-radius);
   --sl-r-sm:calc(var(--sl-radius) * .55);
@@ -2668,13 +3085,14 @@ var CSS = `
 .sl-modal-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(5,7,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
 .sl-modal-frame{width:min(1200px,100%);height:min(820px,100%);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
 @media(max-width:640px){.sl-modal-scrim{padding:0}.sl-modal-frame{width:100%;height:100%;border-radius:0}}
-`;
-function ensureStyle() {
-  if (document.getElementById(STYLE_ID)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID;
-  el.textContent = CSS;
-  document.head.appendChild(el);
+`
+);
+function ensureStyle2() {
+  if (document.getElementById(STYLE_ID2)) return;
+  const el2 = document.createElement("style");
+  el2.id = STYLE_ID2;
+  el2.textContent = CSS2;
+  document.head.appendChild(el2);
 }
 function resolveTokens(chart, host) {
   const accent = host?.accent ?? chart?.accent ?? "#f4b740";
@@ -2733,6 +3151,14 @@ var SeatPicker = class _SeatPicker {
     this.handedOff = false;
     /** Guards single onBooked + single success overlay per hold. */
     this.bookedShown = false;
+    /**
+     * In-flight or settled `payment-options` for this event, started at render in
+     * hosted mode. One request, kicked off while the buyer is still choosing, so
+     * pressing Pay does not wait on a lookup whose answer never changes mid-session.
+     */
+    this.paymentOptions = null;
+    /** The mounted payment card, while one is up. */
+    this.checkoutPanel = null;
     this.extendEl = null;
     this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
@@ -2847,6 +3273,12 @@ var SeatPicker = class _SeatPicker {
       onObjectUnavailable: (event) => this.opts.onSelectedObjectUnavailable?.(event)
     });
     this.api = options.transport ?? this.pubApi;
+    if (options.checkout === "hosted" && !this.pubApi) {
+      console.warn(
+        'seatlayer: checkout: "hosted" needs the widget\'s own transport \u2014 a custom `transport` owns its backend, so the picker is staying on onCheckout for this mount.'
+      );
+    }
+    this.checkoutMode = options.checkout === "hosted" && this.pubApi ? "hosted" : "handoff";
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new import_core2.PickerController({
@@ -3152,7 +3584,7 @@ var SeatPicker = class _SeatPicker {
   }
   /** Mount the full picker as a document-level modal. Resolves after render. */
   static async open(options) {
-    ensureStyle();
+    ensureStyle2();
     const scrim = document.createElement("div");
     scrim.className = "sl-modal-scrim";
     const frame = document.createElement("div");
@@ -3207,9 +3639,10 @@ var SeatPicker = class _SeatPicker {
   async render() {
     if (this.rendered) return this;
     this.rendered = true;
-    ensureStyle();
+    ensureStyle2();
     await (0, import_core2.loadLocale)(this.opts.locale);
     if (this.opts.messages) (0, import_core2.setStringOverrides)(this.opts.messages);
+    if (this.checkoutMode === "hosted") this.paymentOptions = this.pubApi.paymentOptions(this.opts.event);
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
@@ -3294,8 +3727,8 @@ var SeatPicker = class _SeatPicker {
           </div>
         </div>
       </div>`;
-    root.querySelectorAll("[data-ref]").forEach((el) => {
-      this.els[el.dataset.ref] = el;
+    root.querySelectorAll("[data-ref]").forEach((el2) => {
+      this.els[el2.dataset.ref] = el2;
     });
     this.mapHost = this.els.map;
     const applyLayout = () => {
@@ -3507,8 +3940,40 @@ var SeatPicker = class _SeatPicker {
     if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
+    this.resumeHostedOrder();
     return this;
   }
+  /**
+   * A hosted gateway returned this buyer to a page that runs the widget, with
+   * `?order=…&status=…` in the URL. Pick the order up and finish the story.
+   *
+   * Only `success` resumes. `cancelled` means the buyer backed out at the
+   * gateway and their seats are still held — the map they are looking at IS the
+   * right screen, and opening a card to say "you cancelled" would be noise.
+   *
+   * The two parameters are then stripped with `replaceState`, because they are a
+   * one-shot instruction: leaving them in place would re-open the confirmation
+   * on every later navigation, and would carry an order id into browser history
+   * and any Referer this page later sends. `status` is only ever removed
+   * alongside an `order` we actually consumed, so a host page that uses a
+   * `status` parameter of its own keeps it.
+   */
+  resumeHostedOrder() {
+    if (this.checkoutMode !== "hosted" || typeof location === "undefined") return;
+    const params = new URLSearchParams(location.search);
+    const orderId = params.get("order");
+    if (!orderId) return;
+    const status = params.get("status");
+    params.delete("order");
+    params.delete("status");
+    try {
+      const query = params.toString();
+      history.replaceState(history.state, "", `${location.pathname}${query ? `?${query}` : ""}${location.hash}`);
+    } catch {
+    }
+    if (status !== "success") return;
+    void this.openCheckoutPanel({ kind: "resume", orderId });
+  }
   /**
    * Move layout-dependent chrome between its wide dock (map regions / zoom
    * column) and its narrow dock (the sheet's consolidated Filters row), and
@@ -3534,27 +3999,27 @@ var SeatPicker = class _SeatPicker {
   }
   /** The "Need more time?" prompt shown in the hold's final EXTEND_PROMPT_MS. */
   buildExtendPrompt() {
-    const el = document.createElement("div");
-    el.className = "sl-extend";
-    el.setAttribute("role", "status");
-    el.innerHTML = `<span class="sl-extend-txt" data-ref="extendTxt"></span><button type="button" class="sl-extend-btn" data-ref="extendBtn"></button>`;
-    (this.regions["bottom-center"] ?? this.els.map).appendChild(el);
-    this.extendEl = el;
-    this.els.extendTxt = el.querySelector('[data-ref="extendTxt"]');
-    this.els.extendBtn = el.querySelector('[data-ref="extendBtn"]');
+    const el2 = document.createElement("div");
+    el2.className = "sl-extend";
+    el2.setAttribute("role", "status");
+    el2.innerHTML = `<span class="sl-extend-txt" data-ref="extendTxt"></span><button type="button" class="sl-extend-btn" data-ref="extendBtn"></button>`;
+    (this.regions["bottom-center"] ?? this.els.map).appendChild(el2);
+    this.extendEl = el2;
+    this.els.extendTxt = el2.querySelector('[data-ref="extendTxt"]');
+    this.els.extendBtn = el2.querySelector('[data-ref="extendBtn"]');
     this.els.extendBtn.textContent = "Add time";
     this.els.extendBtn.addEventListener("click", () => void this.handleExtend());
   }
   /** Success overlay + onBooked fire when the held seats settle to booked. */
   buildBookedOverlay() {
-    const el = document.createElement("div");
-    el.className = "sl-booked";
-    el.setAttribute("role", "status");
-    el.setAttribute("aria-live", "polite");
-    el.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">You're all set</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
-    this.root.appendChild(el);
-    this.bookedEl = el;
-    this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
+    const el2 = document.createElement("div");
+    el2.className = "sl-booked";
+    el2.setAttribute("role", "status");
+    el2.setAttribute("aria-live", "polite");
+    el2.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">You're all set</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
+    this.root.appendChild(el2);
+    this.bookedEl = el2;
+    this.els.bookedSub = el2.querySelector('[data-ref="bookedSub"]');
   }
   /**
    * Localized string with a literal fallback. `t()` returns the key itself for
@@ -3568,13 +4033,13 @@ var SeatPicker = class _SeatPicker {
   /** Sold-out overlay — centered over the map, disabled waitlist stub (Gap 2). */
   buildSoldoutOverlay() {
     if (!this.els.map) return;
-    const el = document.createElement("div");
-    el.className = "sl-soldout";
-    el.setAttribute("role", "status");
+    const el2 = document.createElement("div");
+    el2.className = "sl-soldout";
+    el2.setAttribute("role", "status");
     const name = (this.controller.doc?.theme?.brandName ?? this.opts.theme?.brandName ?? this.els.name?.textContent ?? this.tf("picker.soldOutEyebrow", "This event")).toUpperCase();
-    el.innerHTML = `<div class="sl-soldout-eyebrow">${name}</div><div class="sl-soldout-title">${this.tf("picker.soldOutTitle", "Sold out")}</div><p class="sl-soldout-copy">${this.tf("picker.soldOutCopy", "Every seat is gone. Join the waitlist and we\u2019ll email you if seats are released.")}</p><button type="button" class="sl-soldout-btn" disabled>${this.tf("picker.waitlist", "Join waitlist")}</button>`;
-    this.els.map.appendChild(el);
-    this.soldoutEl = el;
+    el2.innerHTML = `<div class="sl-soldout-eyebrow">${name}</div><div class="sl-soldout-title">${this.tf("picker.soldOutTitle", "Sold out")}</div><p class="sl-soldout-copy">${this.tf("picker.soldOutCopy", "Every seat is gone. Join the waitlist and we\u2019ll email you if seats are released.")}</p><button type="button" class="sl-soldout-btn" disabled>${this.tf("picker.waitlist", "Join waitlist")}</button>`;
+    this.els.map.appendChild(el2);
+    this.soldoutEl = el2;
   }
   /**
    * Recompute the sold-out state on every price/availability sync. Sold-out ⇔
@@ -3631,10 +4096,10 @@ var SeatPicker = class _SeatPicker {
     if (this.badgeHidden(chartTheme)) return;
     const foot = this.els.foot;
     if (!foot) return;
-    const el = document.createElement("div");
-    el.className = "sl-powered";
-    el.innerHTML = `<span class="sl-powered-mark" aria-hidden="true">` + SEATLAYER_ATTRIBUTION_MARK_SVG + `</span><span>${this.tf("picker.poweredBy", "Powered by SeatLayer")}</span>`;
-    foot.appendChild(el);
+    const el2 = document.createElement("div");
+    el2.className = "sl-powered";
+    el2.innerHTML = `<span class="sl-powered-mark" aria-hidden="true">` + SEATLAYER_ATTRIBUTION_MARK_SVG + `</span><span>${this.tf("picker.poweredBy", "Powered by SeatLayer")}</span>`;
+    foot.appendChild(el2);
   }
   // ---- Feature 6: chrome anchor regions -------------------------------------
   /**
@@ -3648,11 +4113,11 @@ var SeatPicker = class _SeatPicker {
     if (!this.els.map) return;
     const REGIONS = ["top-left", "top-center", "top-right", "left-rail", "bottom-left", "bottom-center", "bottom-right"];
     for (const region of REGIONS) {
-      const el = document.createElement("div");
-      el.className = "sl-anchor";
-      el.dataset.region = region;
-      this.els.map.appendChild(el);
-      this.regions[region] = el;
+      const el2 = document.createElement("div");
+      el2.className = "sl-anchor";
+      el2.dataset.region = region;
+      this.els.map.appendChild(el2);
+      this.regions[region] = el2;
     }
   }
   // ---- F3 minimap -----------------------------------------------------------
@@ -3672,12 +4137,12 @@ var SeatPicker = class _SeatPicker {
     this.motionTimers.add(timer);
   }
   /** Restart one finite CSS animation without leaving a permanent state class. */
-  animateOnce(el, className, duration = 600) {
-    if (!el || this.reducedMotion()) return;
-    el.classList.remove(className);
-    void el.offsetWidth;
-    el.classList.add(className);
-    this.scheduleMotion(() => el.classList.remove(className), duration);
+  animateOnce(el2, className, duration = 600) {
+    if (!el2 || this.reducedMotion()) return;
+    el2.classList.remove(className);
+    void el2.offsetWidth;
+    el2.classList.add(className);
+    this.scheduleMotion(() => el2.classList.remove(className), duration);
   }
   /** Selection feedback belongs on the selected seat, not across the whole map. */
   flashPickedSeat(id) {
@@ -4331,13 +4796,13 @@ var SeatPicker = class _SeatPicker {
     const cat = this.controller.doc?.categories.find((candidate) => candidate.key === table.categoryKey);
     const variable = table.bookingMode === "variable";
     const typeWord = this.rowTypeWord(table);
-    const el = document.createElement("div");
-    el.className = "sl-table-scrim";
-    el.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc3(variable ? `Flexible party \xB7 ${typeWord}` : `Whole ${typeWord}`)}</div><h2 class="sl-table-title" id="sl-table-title">${esc3(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? `Choose how many guests will sit together. This table is held exclusively for your party.` : `All ${table.capacity} places are booked together as one exclusive table.`}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc3(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price))} per guest</b><span class="muted">Table capacity</span><span>${table.capacity} guests</span><span class="muted">Total</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">Number of guests</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="Fewer guests">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="More guests">+</button></div><div class="sl-table-range">Choose ${table.minOccupancy}\u2013${table.maxOccupancy} guests</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">Cancel</button><button type="button" class="sl-table-confirm">${held ? "Update table" : variable ? "Select table" : "Select whole table"}</button></div></div></section>`;
-    this.root.appendChild(el);
-    this.tableDialogEl = el;
+    const el2 = document.createElement("div");
+    el2.className = "sl-table-scrim";
+    el2.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc3(variable ? `Flexible party \xB7 ${typeWord}` : `Whole ${typeWord}`)}</div><h2 class="sl-table-title" id="sl-table-title">${esc3(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? `Choose how many guests will sit together. This table is held exclusively for your party.` : `All ${table.capacity} places are booked together as one exclusive table.`}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc3(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price))} per guest</b><span class="muted">Table capacity</span><span>${table.capacity} guests</span><span class="muted">Total</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">Number of guests</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="Fewer guests">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="More guests">+</button></div><div class="sl-table-range">Choose ${table.minOccupancy}\u2013${table.maxOccupancy} guests</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">Cancel</button><button type="button" class="sl-table-confirm">${held ? "Update table" : variable ? "Select table" : "Select whole table"}</button></div></div></section>`;
+    this.root.appendChild(el2);
+    this.tableDialogEl = el2;
     this.renderTableDialogState();
-    el.querySelectorAll("[data-table-step]").forEach((button) => {
+    el2.querySelectorAll("[data-table-step]").forEach((button) => {
       button.addEventListener("click", () => {
         if (!this.tableDialog) return;
         const next = Math.max(
@@ -4348,14 +4813,14 @@ var SeatPicker = class _SeatPicker {
         this.renderTableDialogState();
       });
     });
-    el.querySelector(".sl-table-cancel").addEventListener("click", () => this.cancelTableDialog());
-    el.querySelector(".sl-table-confirm").addEventListener("click", () => void this.confirmTableDialog());
-    el.addEventListener("mousedown", (event) => {
-      if (event.target === el) this.cancelTableDialog();
+    el2.querySelector(".sl-table-cancel").addEventListener("click", () => this.cancelTableDialog());
+    el2.querySelector(".sl-table-confirm").addEventListener("click", () => void this.confirmTableDialog());
+    el2.addEventListener("mousedown", (event) => {
+      if (event.target === el2) this.cancelTableDialog();
     });
-    el.addEventListener("keydown", (event) => {
+    el2.addEventListener("keydown", (event) => {
       if (event.key !== "Tab") return;
-      const focusable = [...el.querySelectorAll('button:not(:disabled),[tabindex]:not([tabindex="-1"])')];
+      const focusable = [...el2.querySelectorAll('button:not(:disabled),[tabindex]:not([tabindex="-1"])')];
       if (!focusable.length) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
@@ -4367,22 +4832,22 @@ var SeatPicker = class _SeatPicker {
         first.focus();
       }
     });
-    requestAnimationFrame(() => el.querySelector(variable ? '[data-table-step="-1"]' : ".sl-table-confirm")?.focus());
+    requestAnimationFrame(() => el2.querySelector(variable ? '[data-table-step="-1"]' : ".sl-table-confirm")?.focus());
   }
   renderTableDialogState() {
     const table = this.tableDialog;
-    const el = this.tableDialogEl;
-    if (!table || !el) return;
-    const output = el.querySelector("output[data-table-qty]");
+    const el2 = this.tableDialogEl;
+    if (!table || !el2) return;
+    const output = el2.querySelector("output[data-table-qty]");
     if (output) output.value = String(table.quantity);
-    const hidden = el.querySelector("input[data-table-qty]");
+    const hidden = el2.querySelector("input[data-table-qty]");
     if (hidden) hidden.value = String(table.quantity);
-    el.querySelectorAll("[data-table-step]").forEach((button) => {
+    el2.querySelectorAll("[data-table-step]").forEach((button) => {
       const delta = Number(button.dataset.tableStep);
       button.disabled = delta < 0 ? table.quantity <= table.minOccupancy : table.quantity >= table.maxOccupancy;
     });
     const unit = this.paidPrice(table.categoryKey, table.tierId ?? null, table.price);
-    const total = el.querySelector("[data-table-total]");
+    const total = el2.querySelector("[data-table-total]");
     if (total) total.textContent = this.money(unit * table.quantity);
   }
   async confirmTableDialog() {
@@ -4478,18 +4943,18 @@ var SeatPicker = class _SeatPicker {
       details?.rowLabel || details?.objectType === "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${safe(this.rowTypeWord(details))}</span><span class="sl-confirm-value">${safe(this.rowShort(details) ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : "",
       details?.objectType !== "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : ""
     ].filter(Boolean).join("");
-    const el = document.createElement("div");
-    el.className = "sl-confirm";
-    el.setAttribute("role", "dialog");
-    el.setAttribute("aria-modal", "true");
-    el.setAttribute("aria-label", `Confirm seat ${seat.label}`);
-    el.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
-    el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() ? this.confirmThumbHtml(seat) : "") + this.see3dConfirmHtml() + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
-    this.els.map.appendChild(el);
-    this.confirmEl = el;
+    const el2 = document.createElement("div");
+    el2.className = "sl-confirm";
+    el2.setAttribute("role", "dialog");
+    el2.setAttribute("aria-modal", "true");
+    el2.setAttribute("aria-label", `Confirm seat ${seat.label}`);
+    el2.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
+    el2.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() ? this.confirmThumbHtml(seat) : "") + this.see3dConfirmHtml() + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
+    this.els.map.appendChild(el2);
+    this.confirmEl = el2;
     this.reanchorConfirm();
-    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => this.openSeatView(seat));
-    el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
+    el2.querySelector(".sl-confirm-view")?.addEventListener("click", () => void this.openSeatView(seat));
+    el2.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         void this.view3dHandle?.flyToSeat(seat.id);
       } else {
@@ -4498,9 +4963,9 @@ var SeatPicker = class _SeatPicker {
         void this.enter3d(seat.id);
       }
     });
-    el.querySelector(".sl-confirm-add").addEventListener("click", () => this.commitConfirm());
-    el.querySelector(".sl-confirm-cancel").addEventListener("click", () => this.cancelConfirm());
-    requestAnimationFrame(() => el.querySelector(".sl-confirm-add")?.focus());
+    el2.querySelector(".sl-confirm-add").addEventListener("click", () => this.commitConfirm());
+    el2.querySelector(".sl-confirm-cancel").addEventListener("click", () => this.cancelConfirm());
+    requestAnimationFrame(() => el2.querySelector(".sl-confirm-add")?.focus());
   }
   reanchorConfirm() {
     if (!this.confirmEl || !this.confirmSeat) return;
@@ -4559,10 +5024,13 @@ var SeatPicker = class _SeatPicker {
    * uploaded photo (seat.viewUrl) when present, else a panorama generated from
    * the chart geometry — the stage placed at this seat's true bearing + size.
    * Zero extra dependencies: an equirectangular image panned with `repeat-x`.
+   *
+   * Async only because the generator is a lazy chunk (see `loadPanorama`); an
+   * organizer photo needs no generator and never waits on it. The two callers
+   * are click handlers, so nothing observes the promise.
    */
-  openSeatView(seat) {
+  async openSeatView(seat) {
     if (!this.root || !this.seatViewEnabled()) return;
-    this.closeSeatView();
     const doc = this.controller.doc;
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc?.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc?.focalPoint ?? { x: 0, y: 0 };
@@ -4574,18 +5042,27 @@ var SeatPicker = class _SeatPicker {
       caption = (0, import_core2.t)("picker.panorama360");
       real = true;
     } else {
-      const pano2 = (0, import_core2.generateSeatPanorama)(seat, focal, this.allSeats());
+      let pano2;
+      try {
+        const { generateSeatPanorama } = await loadPanorama();
+        pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      } catch (err) {
+        this.opts.onError?.(err);
+        return;
+      }
+      if (!this.root || !this.seatViewEnabled()) return;
       panoUrl = pano2.url;
       caption = (0, import_core2.t)("picker.illustrationCaption", { m: pano2.distanceM });
     }
-    const el = document.createElement("div");
-    el.className = "sl-view";
-    el.setAttribute("role", "dialog");
-    el.setAttribute("aria-label", (0, import_core2.t)("picker.viewFromSeat", { label: seat.label }));
-    el.innerHTML = `<div class="sl-view-head"><span class="sl-view-title">${(0, import_core2.t)("picker.viewFromSeat", { label: seat.label })}</span><span class="sl-view-cap">${caption}</span><button type="button" class="sl-view-x" aria-label="Close"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="sl-view-pano"><span class="sl-view-badge">${real ? (0, import_core2.t)("picker.real360") : (0, import_core2.t)("picker.preview")}</span><span class="sl-view-hint">Drag to look around \xB7 scroll to zoom</span></div>`;
-    this.root.appendChild(el);
-    this.viewEl = el;
-    const pano = el.querySelector(".sl-view-pano");
+    this.closeSeatView();
+    const el2 = document.createElement("div");
+    el2.className = "sl-view";
+    el2.setAttribute("role", "dialog");
+    el2.setAttribute("aria-label", (0, import_core2.t)("picker.viewFromSeat", { label: seat.label }));
+    el2.innerHTML = `<div class="sl-view-head"><span class="sl-view-title">${(0, import_core2.t)("picker.viewFromSeat", { label: seat.label })}</span><span class="sl-view-cap">${caption}</span><button type="button" class="sl-view-x" aria-label="Close"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="sl-view-pano"><span class="sl-view-badge">${real ? (0, import_core2.t)("picker.real360") : (0, import_core2.t)("picker.preview")}</span><span class="sl-view-hint">Drag to look around \xB7 scroll to zoom</span></div>`;
+    this.root.appendChild(el2);
+    this.viewEl = el2;
+    const pano = el2.querySelector(".sl-view-pano");
     pano.style.backgroundImage = `url("${panoUrl}")`;
     const VFOV_DEG = 70;
     const MAX_PITCH_DEG = 35;
@@ -4637,7 +5114,7 @@ var SeatPicker = class _SeatPicker {
     pano.addEventListener("pointerup", onUp);
     pano.addEventListener("pointercancel", onUp);
     pano.addEventListener("wheel", onWheel, { passive: false });
-    const closeBtn = el.querySelector(".sl-view-x");
+    const closeBtn = el2.querySelector(".sl-view-x");
     closeBtn.addEventListener("click", () => this.closeSeatView());
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -4645,7 +5122,7 @@ var SeatPicker = class _SeatPicker {
         this.closeSeatView();
       }
     };
-    el.addEventListener("keydown", onKey);
+    el2.addEventListener("keydown", onKey);
     closeBtn.focus();
     this.viewCleanup = () => {
       pano.removeEventListener("pointerdown", onDown);
@@ -4653,7 +5130,7 @@ var SeatPicker = class _SeatPicker {
       pano.removeEventListener("pointerup", onUp);
       pano.removeEventListener("pointercancel", onUp);
       pano.removeEventListener("wheel", onWheel);
-      el.removeEventListener("keydown", onKey);
+      el2.removeEventListener("keydown", onKey);
     };
   }
   closeSeatView() {
@@ -4943,7 +5420,7 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelectorAll(".sl-chip .view[data-view-label]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const seat = this.controller.seatByLabel(btn.dataset.viewLabel);
-        if (seat) this.openSeatView(seat);
+        if (seat) void this.openSeatView(seat);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip[data-locate]").forEach((chip) => {
@@ -4964,8 +5441,8 @@ var SeatPicker = class _SeatPicker {
       });
     });
     if (this.salesClosed) {
-      this.els.tray.querySelectorAll(".sl-ba-go,[data-ba],[data-ba-cat],[data-ba-zone],[data-ba-replace],.sl-ga button").forEach((el) => {
-        el.disabled = true;
+      this.els.tray.querySelectorAll(".sl-ba-go,[data-ba],[data-ba-cat],[data-ba-zone],[data-ba-replace],.sl-ga button").forEach((el2) => {
+        el2.disabled = true;
       });
     }
     const gaTotal = this.pendingGATotal(gaAreas);
@@ -5086,7 +5563,7 @@ var SeatPicker = class _SeatPicker {
       const seats = this.hold.seats ?? committed;
       this.handedOff = true;
       this.setCtaPhase("checkout");
-      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
+      this.checkoutHandoff(this.hold, seats);
       return;
     }
     this.holdingLabels = new Set(committed.map((seat) => seat.label));
@@ -5115,7 +5592,7 @@ var SeatPicker = class _SeatPicker {
       this.flashHeldSeats(hold);
       this.setCtaPhase("checkout");
       this.emitHoldChange();
-      this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
+      this.checkoutHandoff(hold, hold.seats ?? chosenSeats);
     } catch (err) {
       this.opts.onError?.(err);
       const problem = err;
@@ -5220,6 +5697,109 @@ var SeatPicker = class _SeatPicker {
     this.bookedEl?.classList.add("on");
     this.opts.onBooked?.(handoff);
   }
+  /**
+   * The seats are held. Send the buyer wherever this picker's `checkout` option
+   * says they go.
+   *
+   * The default branch is the literal call that stood here before hosted
+   * checkout existed, unchanged, so nothing about an existing integration moves.
+   */
+  checkoutHandoff(hold, seats) {
+    if (this.checkoutMode === "hosted") {
+      void this.startHostedCheckout(hold, seats);
+      return;
+    }
+    this.opts.onCheckout?.(hold, seats, this.buildHandoff(hold));
+  }
+  /**
+   * Take the money ourselves, through the organizer's own gateway.
+   *
+   * Order of operations matters: ASK FIRST, load second. `payment-options` is
+   * already in flight from render, and its answer decides whether any payment
+   * code is fetched at all — an event that cannot charge never downloads the
+   * card that would have charged it.
+   *
+   * An empty list is not a failure and never dead-ends the buyer. It routes them
+   * to whatever the host has: `onCheckoutUnavailable` (with the server's reason,
+   * so the host can say the right one of three very different sentences), then
+   * `onCheckout` with the ordinary handoff. A host that supplied neither gets
+   * the widget's own honest card instead of a press that did nothing.
+   */
+  async startHostedCheckout(hold, seats) {
+    const handoff = this.buildHandoff(hold);
+    let options = null;
+    try {
+      options = await (this.paymentOptions ??= this.pubApi.paymentOptions(this.opts.event));
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+    if (this.destroyed) return;
+    const provider = options?.providers?.[0];
+    if (!provider) {
+      const reason = paymentsOffReason(options?.reason);
+      const handled = !!this.opts.onCheckoutUnavailable || !!this.opts.onCheckout;
+      this.opts.onCheckoutUnavailable?.({ reason, handoff });
+      this.opts.onCheckout?.(hold, seats, handoff);
+      if (!handled) {
+        void this.openCheckoutPanel({
+          kind: "unavailable",
+          reason,
+          seatCount: handoff.lineItems.reduce((sum, item) => sum + item.quantity, 0)
+        });
+      }
+      return;
+    }
+    await this.openCheckoutPanel({
+      kind: "pay",
+      provider,
+      order: {
+        holdId: handoff.holdId,
+        expiresAt: handoff.expiresAt,
+        currency: handoff.currency,
+        total: handoff.total,
+        labels: handoff.lineItems.map((item) => item.displayLabel ?? item.label)
+      }
+    });
+  }
+  /**
+   * Fetch the checkout chunk and put its card over the map.
+   *
+   * Every failure here lands the buyer back on a map with their seats still
+   * held, which is a place they can act from — a blocked chunk request must not
+   * leave them staring at a CTA that no longer does anything.
+   */
+  async openCheckoutPanel(state) {
+    let mountCheckout2;
+    try {
+      ({ mountCheckout: mountCheckout2 } = await loadHostedCheckout());
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Checkout could not be opened. Your seats are still held \u2014 please try again.", "error");
+      this.setCtaPhase("idle");
+      return;
+    }
+    if (this.destroyed || !this.root) return;
+    this.closeCheckoutPanel();
+    this.checkoutPanel = mountCheckout2({
+      root: this.root,
+      state,
+      startSession: (input) => this.pubApi.startCheckout(this.opts.event, input),
+      orderStatus: (orderId) => this.pubApi.orderStatus(orderId),
+      onCancel: () => {
+        this.checkoutPanel = null;
+        if (!this.hold) this.setCtaPhase("idle");
+      },
+      onConfirmed: (order) => {
+        this.opts.onOrderConfirmed?.(order);
+        void this.controller.refresh();
+      },
+      onError: (err) => this.opts.onError?.(err)
+    });
+  }
+  closeCheckoutPanel() {
+    this.checkoutPanel?.destroy();
+    this.checkoutPanel = null;
+  }
   /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
   buildHandoff(hold) {
     const items = hold.items ?? [];
@@ -5251,28 +5831,28 @@ var SeatPicker = class _SeatPicker {
     );
   }
   toast(msg, tone = "neutral", action) {
-    const el = this.els.toast;
-    if (!el) return;
-    el.replaceChildren();
+    const el2 = this.els.toast;
+    if (!el2) return;
+    el2.replaceChildren();
     const copy = document.createElement("span");
     copy.textContent = msg;
-    el.appendChild(copy);
-    el.classList.toggle("has-action", !!action);
+    el2.appendChild(copy);
+    el2.classList.toggle("has-action", !!action);
     if (action) {
       const button = document.createElement("button");
       button.type = "button";
       button.className = "sl-toast-action";
       button.textContent = action.label;
       button.addEventListener("click", action.onClick, { once: true });
-      el.appendChild(button);
+      el2.appendChild(button);
     }
-    el.dataset.tone = tone;
-    el.classList.add("on");
+    el2.dataset.tone = tone;
+    el2.classList.add("on");
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.toastTimer = setTimeout(() => {
-      el.classList.remove("on");
-      el.classList.remove("has-action");
-      el.dataset.tone = "neutral";
+      el2.classList.remove("on");
+      el2.classList.remove("has-action");
+      el2.dataset.tone = "neutral";
     }, 4200);
   }
   placeTooltip() {
@@ -5454,7 +6034,7 @@ var SeatPicker = class _SeatPicker {
   }
   /** Build the view-from-seat panorama the cinematic dissolves into — reuses the
    *  exact input path as the 2D `openSeatView` (organizer photo, else generated). */
-  seatViewFor3d(seatId) {
+  async seatViewFor3d(seatId) {
     const seat = this.allSeats().find((s) => s.id === seatId);
     if (!seat) return null;
     if (seat.viewUrl) return { url: seat.viewUrl };
@@ -5463,7 +6043,8 @@ var SeatPicker = class _SeatPicker {
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc.focalPoint ?? { x: 0, y: 0 };
     try {
-      return { url: (0, import_core2.generateSeatPanorama)(seat, focal, this.allSeats()).url };
+      const { generateSeatPanorama } = await loadPanorama();
+      return { url: generateSeatPanorama(seat, focal, this.allSeats()).url };
     } catch {
       return null;
     }
@@ -5602,9 +6183,10 @@ var SeatPicker = class _SeatPicker {
         // in orbit instead of dissolving into an empty overlay.
         getSeatView: (id) => new Promise((resolve, reject) => {
           const run = () => {
-            const view = this.seatViewFor3d(id);
-            if (view) resolve(view);
-            else reject(new Error("seat_view_unavailable"));
+            void this.seatViewFor3d(id).then((view) => {
+              if (view) resolve(view);
+              else reject(new Error("seat_view_unavailable"));
+            });
           };
           const ric = globalThis.requestIdleCallback;
           if (typeof ric === "function") ric(run, { timeout: 1500 });
@@ -5882,6 +6464,7 @@ var SeatPicker = class _SeatPicker {
     this.closeConfirm();
     this.dismissTableDialog(false);
     this.closeSeatView();
+    this.closeCheckoutPanel();
     this.exit3d();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
@@ -6603,7 +7186,9 @@ var PREVIEW_ELIGIBLE_STROKE = "#b9c0ff";
 var PREVIEW_UNAVAILABLE_FILL = "#303846";
 var PREVIEW_UNAVAILABLE_STROKE = "#4b5669";
 var ALLOCATION_STROKE = "#101723";
-var CHANNELS_CSS = `
+var CHANNELS_CSS = (
+  /* @sl-css */
+  `
 .slm{--slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;--slm-mo-ambient:2000ms;
   --slm-mo-out:cubic-bezier(.2,.8,.2,1);--slm-mo-in-out:cubic-bezier(.4,0,.2,1);--slm-mo-exit:cubic-bezier(.4,0,1,1);
   --slm-mo-spring:cubic-bezier(.34,1.3,.64,1)}
@@ -6792,7 +7377,8 @@ var CHANNELS_CSS = `
   .slm-ch-staged.shake{outline:2px solid #e5484d;outline-offset:2px}
   .slm-ch-staged.done{outline:2px solid #5bd39b;outline-offset:2px}
 }
-`;
+`
+);
 function bucketRowsHtml(rows) {
   return rows.map((row, index) => `
     <div class="slm-ch-bucket" style="animation-delay:${Math.min(index, 4) * 30}ms">
@@ -7258,7 +7844,7 @@ var ChannelsMode = class {
   paintSectionTargets(sections) {
     const layer = this.layer;
     if (!layer) return;
-    layer.querySelectorAll(".slm-ch-section-target").forEach((el) => el.remove());
+    layer.querySelectorAll(".slm-ch-section-target").forEach((el2) => el2.remove());
     if (!sections) return;
     for (const [id, section] of sections) {
       const width = section.maxX - section.minX;
@@ -7304,7 +7890,7 @@ var ChannelsMode = class {
   paintFlags(clusters) {
     const layer = this.layer;
     if (!layer) return;
-    layer.querySelectorAll(".slm-ch-flag").forEach((el) => el.remove());
+    layer.querySelectorAll(".slm-ch-flag").forEach((el2) => el2.remove());
     if (this.view === "preview") return;
     const ranked = [...clusters.entries()].sort((a, b) => b[1].n - a[1].n).slice(0, MAX_FLAGS);
     for (const [channelId, cluster] of ranked) {
@@ -8667,9 +9253,9 @@ function toLocalInput(ms) {
 }
 function resolveContainer4(container) {
   if (typeof container === "string") {
-    const el = document.querySelector(container);
-    if (!el) throw new Error(`seatmanager: container "${container}" not found`);
-    return el;
+    const el2 = document.querySelector(container);
+    if (!el2) throw new Error(`seatmanager: container "${container}" not found`);
+    return el2;
   }
   if (!(container instanceof HTMLElement)) {
     throw new Error("seatmanager: container must be a CSS selector or an HTMLElement");
@@ -8680,7 +9266,7 @@ function toRenderStatus(s) {
   return s === "blocked" ? "not_for_sale" : s;
 }
 var DEFAULT_API_BASE3 = "https://api.seatlayer.io";
-var STYLE_ID2 = "seatlayer-manager-style";
+var STYLE_ID3 = "seatlayer-manager-style";
 var FEED_CAP = 80;
 var MAX_LIVE_SEAT_PULSES = 16;
 var MAX_LIVE_SECTION_PULSES = 4;
@@ -8690,7 +9276,9 @@ var LEGEND = [
   { key: "booked", label: "Booked", color: "#22a06b" },
   { key: "blocked", label: "Blocked", color: "#8b94ac" }
 ];
-var MANAGER_CSS = `
+var MANAGER_CSS = (
+  /* @sl-css */
+  `
 .slm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:480px;overflow:hidden;
   background:var(--slm-bg);color:var(--slm-text);font-family:var(--slm-font);border-radius:var(--slm-radius);
   /* Motion tokens (motion-system \xA72), declared by the cockpit ROOT rather than
@@ -8932,13 +9520,14 @@ var MANAGER_CSS = `
     transition:none!important;
     scroll-behavior:auto!important}
 }
-${CHANNELS_CSS}`;
+${CHANNELS_CSS}`
+);
 function injectStyle() {
-  if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
-  const el = document.createElement("style");
-  el.id = STYLE_ID2;
-  el.textContent = MANAGER_CSS;
-  document.head.appendChild(el);
+  if (typeof document === "undefined" || document.getElementById(STYLE_ID3)) return;
+  const el2 = document.createElement("style");
+  el2.id = STYLE_ID3;
+  el2.textContent = MANAGER_CSS;
+  document.head.appendChild(el2);
 }
 function themeVars(theme) {
   const t3 = theme ?? {};
@@ -10089,16 +10678,16 @@ var SeatManager = class {
   paintModeTabs() {
     const available = [];
     this.els.modes?.querySelectorAll("[data-mode]").forEach((b) => {
-      const el = b;
-      const mode = el.dataset.mode;
+      const el2 = b;
+      const mode = el2.dataset.mode;
       const permitted = mode !== "channels" || !!this.channels;
-      el.hidden = !permitted;
+      el2.hidden = !permitted;
       if (!permitted) return;
-      available.push({ mode, label: el.textContent ?? mode });
+      available.push({ mode, label: el2.textContent ?? mode });
       const active = mode === this.mode;
-      el.classList.toggle("on", active);
-      el.setAttribute("aria-selected", String(active));
-      el.tabIndex = active ? 0 : -1;
+      el2.classList.toggle("on", active);
+      el2.setAttribute("aria-selected", String(active));
+      el2.tabIndex = active ? 0 : -1;
     });
     const tools = this.els.tools;
     if (tools) {
@@ -10884,13 +11473,13 @@ var SeatManager = class {
     this.toast(msg, "err");
   }
   toast(msg, kind) {
-    const el = this.els.toast;
-    if (!el) return;
-    el.textContent = msg;
-    el.className = `slm-toast on ${kind}`;
+    const el2 = this.els.toast;
+    if (!el2) return;
+    el2.textContent = msg;
+    el2.className = `slm-toast on ${kind}`;
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.toastTimer = setTimeout(() => {
-      el.className = "slm-toast";
+      el2.className = "slm-toast";
     }, 3200);
   }
   fail(err) {