@seatlayer/js 0.46.0 → 0.47.0

package/dist/index.js

@@ -270,8 +270,12 @@ var BuyerRealtimeClient = class {
       const next = projectionFromSnapshot(frame);
       const changes = diffProjections(this.projection, next);
       this.projection = next;
-      if (changes === null) void this.opts.sink.resync();
-      else if (changes.length) this.opts.sink.applyStatuses(changes);
+      if (changes === null) {
+        if (this.opts.sink.applyProjection) this.opts.sink.applyProjection(next);
+        else void this.opts.sink.resync();
+      } else if (changes.length) {
+        this.opts.sink.applyStatuses(changes);
+      }
       return;
     }
     if (type === "delta" && Array.isArray(frame.changes)) {
@@ -524,7 +528,7 @@ var PubApi = class {
     return this.request(`/pub/events/${encodeURIComponent(key)}/chart`);
   }
   objects(key) {
-    return this.request(`/pub/events/${encodeURIComponent(key)}/objects`);
+    return this.request(`/pub/events/${encodeURIComponent(key)}/objects?compact=1`);
   }
   hold(key, selections, ttlMs, replaceHoldId) {
     return this.request(`/pub/events/${encodeURIComponent(key)}/hold`, {
@@ -1981,10 +1985,17 @@ import {
   t as t2,
   tCount
 } from "@seatlayer/core";
+import { isAuthoredSeatView, seatViewDisclosure } from "@seatlayer/core/view3d/crossfade/panorama";
+import {
+  browserPanoramaConstraints,
+  loadPanoramaImage,
+  planPanoramaDelivery,
+  schedulePanoramaUpgrade
+} from "@seatlayer/core/view/panoramaDelivery";
 var DEFAULT_API_BASE2 = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION2 = 10;
 var EXTEND_PROMPT_MS = 6e4;
-var MAX_3D_SEATS_DEFAULT = 15e3;
+var MAX_3D_SEATS_DEFAULT = 6e4;
 var MAX_3D_SECTION_PILLS = 12;
 function pointInPolygon(x, y, poly) {
   let inside = false;
@@ -2067,7 +2078,7 @@ async function loadHostedCheckout() {
       cdnChunkUrl("seatlayer-checkout.mjs")
     );
   }
-  return import("./hostedCheckout-PLHKPT6W.js");
+  return import("./hostedCheckout-SHQCWN5Y.js");
 }
 function paymentsOffReason(reason) {
   return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
@@ -2328,7 +2339,12 @@ var CSS = (
    INTO one of these positioned flex containers and flows/stacks within it, so no
    two pieces of chrome free-float on top of each other. Regions never overlap:
    the top strip splits into left/center/right; rails + corners own their edge. */
-.sl-anchor{position:absolute;z-index:5;display:flex;gap:8px;pointer-events:none}
+/* align-items:center, not the flex default of stretch. Without it a short pill
+   beside a taller control (TEST MODE next to the Map/3D toggle) is stretched to
+   the row's height, so two pills that should read as a matched pair end up
+   different shapes on different baselines. Column regions set their own
+   cross-axis alignment below and are unaffected. */
+.sl-anchor{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;pointer-events:none}
 .sl-anchor > *{pointer-events:auto}
 .sl-anchor[data-region="top-left"]{top:12px;left:12px;flex-wrap:wrap;max-width:38%}
 .sl-anchor[data-region="top-center"]{top:12px;left:50%;transform:translateX(-50%);flex-direction:column;
@@ -2344,10 +2360,17 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-center"]{max-width:44%}
 
 /* TEST MODE badge \u2014 a small pill in the top-right region (shrinks on narrow) */
-.sl-testbadge{padding:5px 11px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.1em;
+/* align-self:stretch, not a hardcoded height: the badge sits beside the Map/3D
+   toggle, whose height comes from its own border + padding + button metrics.
+   Stretching matches that row exactly and keeps matching if the toggle ever
+   changes, while the badge's own inline-flex keeps the label centred inside
+   whatever height it gets. Alone in the region it simply takes its natural
+   size. */
+.sl-testbadge{display:inline-flex;align-items:center;align-self:stretch;padding:0 12px;border-radius:999px;
+  font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1;
   text-transform:uppercase;white-space:nowrap;background:var(--sl-accent);color:var(--sl-accent-ink);
   box-shadow:0 2px 8px rgba(0,0,0,.25)}
-.sl-picker[data-layout="narrow"] .sl-testbadge{padding:3px 8px;font-size:8.5px;letter-spacing:.06em}
+.sl-picker[data-layout="narrow"] .sl-testbadge{padding:0 8px;font-size:8.5px;letter-spacing:.06em}
 
 /* zoom column (flows within the bottom-right region) */
 .sl-zoom{display:flex;flex-direction:column;gap:6px}
@@ -2439,7 +2462,11 @@ var CSS = (
    Layered Rows mark + wordmark. Hidden when the host opts out or the org's paid
    theme sets hideBadge. */
 .sl-powered{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
-  font-size:11px;letter-spacing:.03em;color:var(--sl-muted)}
+  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sl-text);opacity:.72;
+  text-decoration:none;padding:6px 10px;border-radius:999px;width:fit-content;margin-inline:auto;
+  transition:opacity .15s ease,background-color .15s ease}
+.sl-powered:hover{opacity:1;background:color-mix(in srgb,var(--sl-text) 8%,transparent)}
+.sl-powered:focus-visible{opacity:1;outline:2px solid var(--sl-accent);outline-offset:2px}
 .sl-powered-mark{width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;
   background:#0c1220;color:#fcf7ee}
 .sl-powered-mark svg{width:12px;height:11px}
@@ -2618,18 +2645,27 @@ var CSS = (
 .sl-view3d{position:absolute;inset:0;z-index:4;opacity:0;touch-action:none;
   transition:opacity .3s ease;background:radial-gradient(120% 120% at 50% 0%,#191f28 0%,#0d1014 70%)}
 .sl-view3d canvas{display:block;width:100%;height:100%}
+.sl-view3d canvas:focus-visible{outline:2px solid var(--sl-accent);outline-offset:-3px}
+.sl-view3d-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
+  z-index:1;color:#d9e2f2;font-size:13px;font-weight:700;letter-spacing:.02em;pointer-events:none}
+.sl-view3d-loading::before{content:"";width:18px;height:18px;border-radius:50%;
+  border:2px solid rgba(217,226,242,.28);border-top-color:#d9e2f2;animation:slSpin .8s linear infinite}
 [data-view3d=on] .sl-chips,[data-view3d=on] .sl-rungs{display:none}
 .sl-view3d-back{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
   padding:7px 13px 7px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;
   color:#e6edf3;background:rgba(10,14,20,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
 .sl-view3d-back:hover,.sl-view3d-back:focus-visible{background:rgba(16,22,30,.82);border-color:rgba(255,255,255,.4)}
 .sl-view3d-back svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-view3d-fs{position:absolute;top:12px;right:12px;z-index:2;min-width:44px;min-height:44px;padding:8px 12px;
+  border-radius:999px;font-size:16px;color:#e6edf3;background:rgba(10,14,20,.62);
+  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
+.sl-view3d-fs:hover,.sl-view3d-fs:focus-visible{background:rgba(16,22,30,.82);border-color:rgba(255,255,255,.4)}
 /* Venue navigation inside 3D: levels (isolate a floor) and areas (fly to a zone).
    Bottom-LEFT, clear of the module's own chips (Overview bottom-right, 360
    bottom-centre) and of the bottom-sheeted confirm card. Horizontally scrollable
    so a venue with many zones never pushes the rail off a phone screen. */
 .sl-view3d-nav{position:absolute;left:12px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:6px;
-  max-width:calc(100% - 24px);pointer-events:none}
+  max-width:calc(100% - 150px);pointer-events:none}
 .sl-view3d-nav > div{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;
   padding:1px;-webkit-overflow-scrolling:touch}
 .sl-view3d-nav > div::-webkit-scrollbar{display:none}
@@ -2638,6 +2674,21 @@ var CSS = (
   border:1px solid rgba(150,165,205,.35);backdrop-filter:blur(6px);cursor:pointer}
 .sl-view3d-nav button:hover,.sl-view3d-nav button:focus-visible{color:#eef1f8;border-color:rgba(190,205,240,.6)}
 .sl-view3d-nav button[aria-pressed="true"]{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
+.sl-view3d-nav button:disabled{opacity:.45;cursor:not-allowed}
+.sl-view3d-nav select{min-height:38px;max-width:min(280px,calc(100vw - 40px));padding:7px 34px 7px 12px;
+  border-radius:999px;font:700 11.5px/1 inherit;color:#eef1f8;background:rgba(12,18,32,.86);
+  border:1px solid rgba(150,165,205,.45);backdrop-filter:blur(6px);cursor:pointer}
+.sl-view3d-nav select:focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}
+.sl-view3d-nav .sl-view3d-locator{display:grid;grid-template-columns:minmax(150px,1.25fr) minmax(110px,.8fr) minmax(105px,.7fr) auto;
+  width:min(720px,calc(100vw - 180px));overflow:visible}
+.sl-view3d-nav.is-seat-focused .sl-view3d-locator{display:none}
+.sl-view3d-locator select{width:100%;min-width:0}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav .sl-view3d-locator{display:flex;width:calc(100vw - 24px);overflow-x:auto}
+.sl-picker[data-layout="narrow"] .sl-view3d-locator select{flex:0 0 155px}
+/* On phones the library owns the bottom edge for seat/panorama/overview actions.
+   Keep venue navigation in a separate top rail so those control families never
+   stack over one another. */
+.sl-picker[data-layout="narrow"] .sl-view3d-nav{top:68px;bottom:auto;max-width:calc(100% - 24px)}
 /* While immersed, the 2D-only chrome is meaningless \u2014 hide it, keep Map|3D. */
 .sl-picker[data-view3d="on"] .sl-rungs,
 .sl-picker[data-view3d="on"] .sl-floors,
@@ -2716,7 +2767,6 @@ var CSS = (
 .sl-confirm-thumb-badge{position:absolute;right:7px;top:7px;display:inline-flex;align-items:center;gap:5px;
   font-size:10px;font-weight:700;color:#fff;background:rgba(10,14,22,0.72);border-radius:12px;padding:4px 9px;backdrop-filter:blur(3px)}
 .sl-confirm-sight{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sl-muted);margin-bottom:2px}
-.sl-confirm-sight span{color:#22a06b;font-weight:800}
 .sl-confirm-view{width:100%;margin-top:9px;padding:8px;border-radius:8px;border:1px solid var(--sl-line);
   color:var(--sl-text);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:7px}
 .sl-confirm-view:hover{border-color:var(--sl-muted)}
@@ -2811,6 +2861,11 @@ var CSS = (
 /* modal host */
 .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)}
+/* The frame already clips to 16px. A picker rounding itself to --sl-radius
+   (14px) inside it leaves a sliver of scrim showing at each corner, which
+   reads as a rendering fault rather than as a rounded card. One owner of the
+   corners, and it is the frame. */
+.sl-modal-frame > .sl-picker{border-radius:0}
 @media(max-width:640px){.sl-modal-scrim{padding:0}.sl-modal-frame{width:100%;height:100%;border-radius:0}}
 `
 );
@@ -2821,6 +2876,17 @@ function ensureStyle() {
   el.textContent = CSS;
   document.head.appendChild(el);
 }
+function formatWhen(startsAt, timezone, locale) {
+  const options = { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" };
+  const at = new Date(startsAt);
+  if (timezone) {
+    try {
+      return at.toLocaleString(locale, { ...options, timeZone: timezone });
+    } catch {
+    }
+  }
+  return at.toLocaleString(locale, options);
+}
 function resolveTokens(chart, host) {
   const accent = host?.accent ?? chart?.accent ?? "#f4b740";
   const accentInk = host?.accentInk ?? chart?.accentInk ?? "#1a1200";
@@ -3015,6 +3081,9 @@ var SeatPicker = class _SeatPicker {
       currency: options.currency,
       flashOnLiveChange: true,
       colorblindSafe: this.cbSafe,
+      // The drawn map's own overrides, when the host supplied them up front.
+      // Everything else on `theme` is CSS and lands on the root instead.
+      mapTheme: options.theme?.map ?? null,
       onSelectionChange: () => {
         this.syncTray();
         if (this.committedSelection().length) this.collapseSectionCard();
@@ -3103,8 +3172,8 @@ var SeatPicker = class _SeatPicker {
   /**
    * Eager sightline preview for the confirm card: the organizer's real view
    * photo, or — only when the chart has an actual stage to look at — a generated
-   * forward view plus an "≈ Nm to stage · clear sightline" line. On a stageless
-   * chart both the distance/sightline claim and the generic stage silhouette are
+   * forward view plus an approximate distance-to-stage line. On a stageless
+   * chart both the distance claim and the generic stage silhouette are
    * invented promises, so we suppress them; a real attached photo always shows.
    * (OV-52)
    */
@@ -3123,7 +3192,7 @@ var SeatPicker = class _SeatPicker {
         return "";
       }
     }
-    const sightHtml = hasStage ? `<div class="sl-confirm-sight"><span aria-hidden="true">\u2713</span>${distance != null ? t2("picker.sightline", { m: distance }) : this.tf("picker.sightlineClear", "Clear sightline")}</div>` : "";
+    const sightHtml = hasStage && distance != null ? `<div class="sl-confirm-sight">${t2("picker.sightline", { m: distance })}</div>` : "";
     const viewBtn = realPhoto ? `<button type="button" class="sl-confirm-view sl-confirm-thumbwrap" aria-label="${t2("picker.viewFromSeat", { label: seat.label })}"><img class="sl-confirm-thumb" src="${realPhoto}" alt="" /><span class="sl-confirm-thumb-badge">\u{1F52D} ${this.tf("picker.viewFromHere", "View from here")}</span></button>` : `<button type="button" class="sl-confirm-view sl-confirm-viewbtn" aria-label="${t2("picker.viewFromSeat", { label: seat.label })}"><span aria-hidden="true">\u{1F52D}</span><span>${this.tf("picker.viewFromHere", "View from here")}</span></button>`;
     return viewBtn + sightHtml;
   }
@@ -3257,6 +3326,11 @@ var SeatPicker = class _SeatPicker {
       this.setFsFallback(false);
     }
   }
+  syncFullscreenButtons() {
+    const active = !!document.fullscreenElement || this.fsFallback || this.framedFs;
+    this.els.zfs?.setAttribute("aria-pressed", String(active));
+    this.view3dEl?.querySelector(".sl-view3d-fs")?.setAttribute("aria-pressed", String(active));
+  }
   /**
    * Native element-fullscreen was unavailable or rejected. When framed, a CSS
    * `.sl-fs` overlay can't escape the iframe, so we ask the host page to pin us
@@ -3271,7 +3345,7 @@ var SeatPicker = class _SeatPicker {
   setFramedFs(on) {
     if (this.framedFs === on) return;
     this.framedFs = on;
-    this.els.zfs?.setAttribute("aria-pressed", String(on || !!document.fullscreenElement));
+    this.syncFullscreenButtons();
     this.postToHost({ type: "seatlayer:fullscreen", on });
     if (on && !this.fsEscHandler) {
       this.fsEscHandler = (e) => {
@@ -3288,7 +3362,7 @@ var SeatPicker = class _SeatPicker {
     if (this.fsFallback === on) return;
     this.fsFallback = on;
     this.root?.classList.toggle("sl-fs", on);
-    this.els.zfs?.setAttribute("aria-pressed", String(on || !!document.fullscreenElement));
+    this.syncFullscreenButtons();
     if (on && !this.fsEscHandler) {
       this.fsEscHandler = (e) => {
         if (e.key === "Escape" && !document.fullscreenElement) this.setFsFallback(false);
@@ -3478,7 +3552,7 @@ var SeatPicker = class _SeatPicker {
     this.els.zfs.addEventListener("click", () => this.toggleFullscreen());
     this.fsChangeHandler = () => {
       if (!document.fullscreenElement) this.setFsFallback(false);
-      this.els.zfs?.setAttribute("aria-pressed", String(!!document.fullscreenElement || this.fsFallback || this.framedFs));
+      this.syncFullscreenButtons();
       requestAnimationFrame(() => this.controller.zoomToFit());
     };
     document.addEventListener("fullscreenchange", this.fsChangeHandler);
@@ -3570,7 +3644,7 @@ var SeatPicker = class _SeatPicker {
     if (logoUrl) this.els.logo.innerHTML = `<img src="${logoUrl}" alt="">`;
     else this.els.logo.textContent = (this.opts.theme?.brandName ?? chartTheme?.brandName ?? info.eventName ?? "?").slice(0, 1).toUpperCase();
     this.els.name.textContent = info.eventName ?? "";
-    const when = info.startsAt ? new Date(info.startsAt).toLocaleString(this.opts.locale, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "";
+    const when = info.startsAt ? formatWhen(info.startsAt, info.timezone ?? null, this.opts.locale) : "";
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
     this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
@@ -3823,8 +3897,12 @@ var SeatPicker = class _SeatPicker {
     if (this.badgeHidden(chartTheme)) return;
     const foot = this.els.foot;
     if (!foot) return;
-    const el = document.createElement("div");
+    const el = document.createElement("a");
     el.className = "sl-powered";
+    el.href = "https://seatlayer.io/?ref=picker";
+    el.target = "_blank";
+    el.rel = "noopener noreferrer";
+    el.setAttribute("aria-label", this.tf("picker.poweredBy", "Powered by SeatLayer"));
     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);
   }
@@ -4683,6 +4761,7 @@ var SeatPicker = class _SeatPicker {
     el.querySelector(".sl-confirm-view")?.addEventListener("click", () => void this.openSeatView(seat));
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
+        this.dismissConfirm();
         void this.view3dHandle?.flyToSeat(seat.id);
       } else {
         this.view3dReturnSeat = seat;
@@ -4761,13 +4840,24 @@ var SeatPicker = class _SeatPicker {
     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 };
-    let panoUrl;
+    let panoSource;
     let caption;
     let real = false;
     if (seat.viewUrl) {
-      panoUrl = seat.viewUrl;
-      caption = t2("picker.panorama360");
-      real = true;
+      const view = {
+        url: seat.viewUrl,
+        ...seat.viewMeta?.previewUrl ? { previewUrl: seat.viewMeta.previewUrl } : {},
+        ...seat.viewMeta?.sourceWidth !== void 0 ? { sourceWidth: seat.viewMeta.sourceWidth } : {},
+        ...seat.viewMeta?.sourceHeight !== void 0 ? { sourceHeight: seat.viewMeta.sourceHeight } : {},
+        ...seat.viewMeta?.previewWidth !== void 0 ? { previewWidth: seat.viewMeta.previewWidth } : {},
+        ...seat.viewMeta?.previewHeight !== void 0 ? { previewHeight: seat.viewMeta.previewHeight } : {},
+        ...seat.viewMeta?.coverage ? { coverage: seat.viewMeta.coverage } : {},
+        ...seat.viewMeta?.capturedAt ? { capturedAt: seat.viewMeta.capturedAt } : {},
+        ...seat.viewMeta?.sourceLabel ? { sourceLabel: seat.viewMeta.sourceLabel } : {}
+      };
+      panoSource = view;
+      caption = seatViewDisclosure(view);
+      real = isAuthoredSeatView(view);
     } else {
       let pano2;
       try {
@@ -4778,7 +4868,7 @@ var SeatPicker = class _SeatPicker {
         return;
       }
       if (!this.root || !this.seatViewEnabled()) return;
-      panoUrl = pano2.url;
+      panoSource = { url: pano2.url, generated: true };
       caption = t2("picker.illustrationCaption", { m: pano2.distanceM });
     }
     this.closeSeatView();
@@ -4790,7 +4880,20 @@ var SeatPicker = class _SeatPicker {
     this.root.appendChild(el);
     this.viewEl = el;
     const pano = el.querySelector(".sl-view-pano");
-    pano.style.backgroundImage = `url("${panoUrl}")`;
+    const delivery = planPanoramaDelivery(panoSource, browserPanoramaConstraints());
+    const loadAbort = new AbortController();
+    pano.style.backgroundImage = `url("${delivery.initialUrl}")`;
+    let cancelUpgrade = () => {
+    };
+    if (delivery.upgradeUrl) {
+      cancelUpgrade = schedulePanoramaUpgrade(() => {
+        void loadPanoramaImage(delivery.upgradeUrl, loadAbort.signal).then(() => {
+          if (!el.isConnected || loadAbort.signal.aborted) return;
+          pano.style.backgroundImage = `url("${delivery.upgradeUrl}")`;
+        }).catch(() => {
+        });
+      });
+    }
     const VFOV_DEG = 70;
     const MAX_PITCH_DEG = 35;
     let zoom = 1;
@@ -4852,6 +4955,8 @@ var SeatPicker = class _SeatPicker {
     el.addEventListener("keydown", onKey);
     closeBtn.focus();
     this.viewCleanup = () => {
+      cancelUpgrade();
+      loadAbort.abort();
       pano.removeEventListener("pointerdown", onDown);
       pano.removeEventListener("pointermove", onMove);
       pano.removeEventListener("pointerup", onUp);
@@ -5655,6 +5760,58 @@ var SeatPicker = class _SeatPicker {
   getSelection() {
     return this.committedSelection();
   }
+  /**
+   * Re-ink the DRAWN MAP after mount, so the canvas can follow a page palette
+   * the host did not know at construction time.
+   *
+   * Deliberately narrower than the `theme` option: it takes only the map half.
+   * The chrome half is CSS custom properties, which a host restyles from its
+   * own stylesheet without asking the widget for anything — and a host that
+   * used both mechanisms at once would have two things writing one token. This
+   * method exists for the half CSS genuinely cannot reach: pixels Konva draws.
+   *
+   * The rebuild is the controller's (`setMapTheme`), which repaints statuses
+   * from the map already in memory and restores the selection, so a buyer
+   * mid-pick keeps their seats and no round trip is spent. A no-op when the
+   * colours have not changed; safe to call on every render.
+   */
+  setMapTheme(map) {
+    if (this.destroyed) return;
+    this.opts.theme = { ...this.opts.theme ?? {}, map: map ?? void 0 };
+    this.controller.setMapTheme(map);
+  }
+  /**
+   * Replace the host pricing override AFTER mount, and repaint everything that
+   * shows a price.
+   *
+   * WHY IT CANNOT JUST BE A MOUNT OPTION. The prices a host knows are often not
+   * the prices it knows AT MOUNT: SeatLayer's own event page learns them from
+   * `GET /pub/events/:key/availability`, a separate cached read that lands a
+   * round trip after the map does — deliberately, because the map is not
+   * allowed to wait on it. Remounting the widget to hand it new options would
+   * tear down a live hold, so the override is settable in place.
+   *
+   * The prices themselves are still the SERVER'S. This method takes an answer;
+   * it never derives one. Nothing here re-reads a release, a window or a quota
+   * — see `paidPrice`, the one funnel every displayed price flows through, and
+   * note that the checkout handoff's line items do not come from here at all:
+   * they are priced by the worker from its own hold. So the worst a wrong call
+   * to this method can do is misprint a price, never mischarge one.
+   *
+   * A no-op when the map is unchanged, so a host may call it on every poll.
+   */
+  setPricing(pricing) {
+    const before = JSON.stringify(this.opts.pricing ?? null);
+    const after = JSON.stringify(pricing ?? null);
+    if (before === after) return;
+    this.opts.pricing = pricing;
+    if (this.destroyed || !this.els.prices) return;
+    this.els.pricesSec?.querySelector(".sl-price-select")?.remove();
+    this.buildPriceFilter();
+    this.syncPrices();
+    this.syncTray();
+    if (this.lastSection) this.showSectionCard(this.lastSection);
+  }
   /** Current colorblind-safe render state, resolved from the stored buyer
    *  preference at mount. Host chrome (e.g. the Designer preview) reads this to
    *  surface the state rather than rendering colorblind colors silently. */
@@ -5706,10 +5863,7 @@ var SeatPicker = class _SeatPicker {
    *
    * Entering `'venue3d'` with `opts.flyToSeatId` runs the cinematic tour: the
    * camera flies to the seat and holds in the live scene (a chip offers the
-   * 360° view-from-seat) —
-   * the widget enters 3D and auto-flies the camera to that seat, dissolving into
-   * its view-from-seat panorama (the same chain as tapping "See the view from
-   * here" on a seat's confirm card). When the widget is **already** in the 3D
+   * 360° view-from-seat). When the widget is **already** in the 3D
    * view, the camera simply flies to the requested seat — the GL scene is not
    * torn down or rebuilt, so there is no flash or re-entry.
    *
@@ -5718,7 +5872,7 @@ var SeatPicker = class _SeatPicker {
    *
    * @param view              `'map'` for the flat picker, `'venue3d'` for the 3D venue.
    * @param opts.flyToSeatId  When entering (or already in) `'venue3d'`, the seat
-   *                          id to fly the camera to — cinematic → panorama.
+   *                          id to fly the camera to — cinematic → live seat view.
    *                          Ignored when `view` is `'map'`.
    *
    * @example
@@ -5732,7 +5886,12 @@ var SeatPicker = class _SeatPicker {
     }
     const flyToSeatId = opts?.flyToSeatId;
     if (this.buyerView === "venue3d") {
-      if (flyToSeatId) void this.view3dHandle?.flyToSeat(flyToSeatId);
+      if (flyToSeatId) {
+        this.opts.onBuyerViewChange?.({ view: "venue3d", seatId: flyToSeatId });
+        void this.view3dHandle?.flyToSeat(flyToSeatId);
+      } else if (opts?.resetView) {
+        this.view3dHandle?.focusOverview();
+      }
       return;
     }
     void this.enter3d(flyToSeatId);
@@ -5772,14 +5931,26 @@ var SeatPicker = class _SeatPicker {
   async seatViewFor3d(seatId) {
     const seat = this.allSeats().find((s) => s.id === seatId);
     if (!seat) return null;
-    if (seat.viewUrl) return { url: seat.viewUrl };
+    if (seat.viewUrl) return {
+      url: seat.viewUrl,
+      ...seat.viewMeta?.previewUrl ? { previewUrl: seat.viewMeta.previewUrl } : {},
+      ...seat.viewMeta?.sourceWidth !== void 0 ? { sourceWidth: seat.viewMeta.sourceWidth } : {},
+      ...seat.viewMeta?.sourceHeight !== void 0 ? { sourceHeight: seat.viewMeta.sourceHeight } : {},
+      ...seat.viewMeta?.previewWidth !== void 0 ? { previewWidth: seat.viewMeta.previewWidth } : {},
+      ...seat.viewMeta?.previewHeight !== void 0 ? { previewHeight: seat.viewMeta.previewHeight } : {},
+      ...seat.viewMeta?.initialBearingDeg !== void 0 ? { initialBearingDeg: seat.viewMeta.initialBearingDeg } : {},
+      ...seat.viewMeta?.initialPitchDeg !== void 0 ? { initialPitchDeg: seat.viewMeta.initialPitchDeg } : {},
+      ...seat.viewMeta?.coverage ? { coverage: seat.viewMeta.coverage } : {},
+      ...seat.viewMeta?.capturedAt ? { capturedAt: seat.viewMeta.capturedAt } : {},
+      ...seat.viewMeta?.sourceLabel ? { sourceLabel: seat.viewMeta.sourceLabel } : {}
+    };
     const doc = this.controller.doc;
     if (!doc) return null;
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc.focalPoint ?? { x: 0, y: 0 };
     try {
       const { generateSeatPanorama } = await loadPanorama();
-      return { url: generateSeatPanorama(seat, focal, this.allSeats()).url };
+      return { url: generateSeatPanorama(seat, focal, this.allSeats()).url, generated: true };
     } catch {
       return null;
     }
@@ -5801,14 +5972,26 @@ var SeatPicker = class _SeatPicker {
     }
     const seat = this.allSeats().find((s) => s.id === seatId);
     if (!seat) return;
-    const already = this.committedSelection().some((s) => s.id === seatId);
+    const table = this.controller.tableSelection(seatId);
+    const already = this.committedSelection().some((s) => table ? s.label === table.label : s.id === seatId);
     if (already) {
       this.controller.deselect([seatId]);
       this.dismissConfirm();
       return;
     }
+    const added = this.controller.select([seatId]);
+    if (!added.length) {
+      this.syncSelectionTo3d();
+      this.dismissConfirm();
+      return;
+    }
+    this.opts.onBuyerViewChange?.({ view: "venue3d", seatId });
     this.flashPickedSeat(seatId);
-    this.controller.select([seatId]);
+    if (table) {
+      this.showTableDialog(table, false);
+      this.syncSelectionTo3d();
+      return;
+    }
     if (this.opts.confirmSelection !== false) this.showConfirm(seat);
     else this.syncTray();
   }
@@ -5828,12 +6011,15 @@ var SeatPicker = class _SeatPicker {
    */
   buildView3dNav(overlay, handle) {
     const floors = handle.floors();
-    const zones = handle.zones().filter((z) => z.seatCount > 0);
-    const sections = zones.length > 1 ? [] : handle.sections().filter((s) => s.seatCount > 0).slice(0, MAX_3D_SECTION_PILLS);
+    const floorLabels = new Set(floors.map((floor) => floor.label.trim().toLocaleLowerCase()));
+    const zones = handle.zones().filter((zone) => zone.seatCount > 0 && !floorLabels.has(zone.label.trim().toLocaleLowerCase()));
+    const allSections = handle.sections().filter((s) => s.seatCount > 0);
+    const sections = zones.length > 1 ? [] : allSections;
     const wantFloors = floors.length > 1;
     const wantZones = zones.length > 1;
     const wantSections = sections.length > 1;
-    if (!wantFloors && !wantZones && !wantSections) return;
+    const wantLocator = allSections.length > 0 && handle.rows().length > 0;
+    if (!wantFloors && !wantZones && !wantSections && !wantLocator) return;
     const nav = document.createElement("div");
     nav.className = "sl-view3d-nav";
     if (wantFloors) {
@@ -5870,15 +6056,112 @@ var SeatPicker = class _SeatPicker {
       } })) : sections.map((s) => ({ id: s.id, label: s.label || s.id, go: () => {
         handle.focusSection(s.id);
       } }));
-      for (const e of entries) {
-        const b = document.createElement("button");
-        b.type = "button";
-        b.textContent = e.label;
-        b.addEventListener("click", e.go);
-        row.appendChild(b);
+      if (!wantZones && entries.length > MAX_3D_SECTION_PILLS) {
+        const select = document.createElement("select");
+        select.setAttribute("aria-label", this.tf("picker.jumpToSection", "Jump to section"));
+        const placeholder = document.createElement("option");
+        placeholder.value = "";
+        placeholder.textContent = this.tf("picker.jumpToSection", "Jump to section");
+        select.appendChild(placeholder);
+        for (const entry of entries) {
+          const option = document.createElement("option");
+          option.value = entry.id;
+          option.textContent = entry.label;
+          select.appendChild(option);
+        }
+        select.addEventListener("change", () => {
+          entries.find((entry) => entry.id === select.value)?.go();
+        });
+        row.appendChild(select);
+      } else {
+        for (const e of entries) {
+          const b = document.createElement("button");
+          b.type = "button";
+          b.textContent = e.label;
+          b.addEventListener("click", e.go);
+          row.appendChild(b);
+        }
       }
       nav.appendChild(row);
     }
+    if (wantLocator) {
+      const locator = document.createElement("div");
+      locator.className = "sl-view3d-locator";
+      locator.setAttribute("role", "group");
+      locator.setAttribute("aria-label", "Find an exact seat in 3D");
+      const sectionSelect = document.createElement("select");
+      sectionSelect.setAttribute("aria-label", "Choose section in 3D");
+      const rowSelect = document.createElement("select");
+      rowSelect.setAttribute("aria-label", "Choose row in 3D");
+      const seatSelect = document.createElement("select");
+      seatSelect.setAttribute("aria-label", "Choose seat in 3D");
+      const view = document.createElement("button");
+      view.type = "button";
+      view.textContent = "View seat";
+      view.disabled = true;
+      const fill = (select, placeholder, entries) => {
+        select.replaceChildren();
+        const first = document.createElement("option");
+        first.value = "";
+        first.textContent = placeholder;
+        select.appendChild(first);
+        for (const entry of entries) {
+          const option = document.createElement("option");
+          option.value = entry.id;
+          option.textContent = entry.label;
+          select.appendChild(option);
+        }
+        select.value = "";
+      };
+      fill(sectionSelect, "1. Section", allSections.map((section) => ({
+        id: section.id,
+        label: `${section.label} \xB7 ${section.seatCount.toLocaleString()} seats`
+      })));
+      fill(rowSelect, "2. Row", []);
+      fill(seatSelect, "3. Seat", []);
+      rowSelect.disabled = true;
+      seatSelect.disabled = true;
+      sectionSelect.addEventListener("change", () => {
+        const sectionId = sectionSelect.value;
+        view.disabled = true;
+        fill(seatSelect, "3. Seat", []);
+        seatSelect.disabled = true;
+        if (!sectionId || !handle.focusSection(sectionId)) {
+          fill(rowSelect, "2. Row", []);
+          rowSelect.disabled = true;
+          return;
+        }
+        const rows = handle.rows(sectionId);
+        fill(rowSelect, "2. Row", rows.map((row) => ({
+          id: row.id,
+          label: `${row.label} \xB7 ${row.seatCount} seats`
+        })));
+        rowSelect.disabled = rows.length === 0;
+      });
+      rowSelect.addEventListener("change", () => {
+        const rowId = rowSelect.value;
+        view.disabled = true;
+        if (!rowId || !handle.focusRow(rowId)) {
+          fill(seatSelect, "3. Seat", []);
+          seatSelect.disabled = true;
+          return;
+        }
+        const seats = handle.seatsInRow(rowId);
+        fill(seatSelect, "3. Seat", seats);
+        seatSelect.disabled = seats.length === 0;
+      });
+      seatSelect.addEventListener("change", () => {
+        const seatId = seatSelect.value;
+        view.disabled = !seatId;
+        handle.setSelection(seatId ? [seatId] : []);
+      });
+      view.addEventListener("click", () => {
+        const seatId = seatSelect.value;
+        if (seatId) void handle.flyToSeat(seatId);
+      });
+      locator.append(sectionSelect, rowSelect, seatSelect, view);
+      nav.appendChild(locator);
+    }
     overlay.appendChild(nav);
   }
   async enter3d(flySeatId) {
@@ -5886,6 +6169,7 @@ var SeatPicker = class _SeatPicker {
     const doc = this.controller.doc;
     if (!doc) return;
     this.buyerView = "venue3d";
+    this.opts.onBuyerViewChange?.({ view: "venue3d", ...flySeatId ? { seatId: flySeatId } : {} });
     this.root?.setAttribute("data-view3d", "on");
     this.dismissConfirm();
     this.syncProjection();
@@ -5899,6 +6183,20 @@ var SeatPicker = class _SeatPicker {
     back.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg><span>${this.tf("picker.backToMap", "Back to map")}</span>`;
     back.addEventListener("click", () => this.exit3d());
     overlay.appendChild(back);
+    const fullscreen = document.createElement("button");
+    fullscreen.type = "button";
+    fullscreen.className = "sl-view3d-fs";
+    fullscreen.textContent = "\u26F6";
+    fullscreen.setAttribute("aria-label", "Full screen");
+    fullscreen.setAttribute("aria-pressed", String(!!document.fullscreenElement || this.fsFallback || this.framedFs));
+    fullscreen.addEventListener("click", () => this.toggleFullscreen());
+    overlay.appendChild(fullscreen);
+    const loading = document.createElement("div");
+    loading.className = "sl-view3d-loading";
+    loading.setAttribute("role", "status");
+    loading.setAttribute("aria-live", "polite");
+    loading.textContent = this.tf("picker.loading3d", "Building the 3D venue\u2026");
+    overlay.appendChild(loading);
     this.els.map.appendChild(overlay);
     this.view3dEl = overlay;
     requestAnimationFrame(() => {
@@ -5909,8 +6207,30 @@ var SeatPicker = class _SeatPicker {
       const seats = expandChart(doc);
       const mod = await loadVenue3d();
       if (gen !== this.view3dGen || this.buyerView !== "venue3d" || this.view3dEl !== overlay) return;
-      const handle = mod.mountVenue3D(overlay, { doc, seats }, {
+      const prepared = await mod.prepareVenue3D({ doc, seats });
+      if (gen !== this.view3dGen || this.buyerView !== "venue3d" || this.view3dEl !== overlay) return;
+      const handle = mod.mountVenue3D(overlay, { doc, seats, prepared }, {
+        // A strict contain fit turns a wide bowl into a postage stamp inside a
+        // phone. The bounded portrait fit was validated against every UX-lab
+        // fixture; keep editor previews strict while making buyer seats legible.
+        portraitOverviewCrop: true,
         onSeatPick: (id) => this.onView3dSeatPick(id),
+        onSectionFocusChange: (sectionId) => {
+          const select = overlay.querySelector(
+            'select[aria-label="Choose section in 3D"]'
+          );
+          const next = sectionId ?? "";
+          if (!select || select.value === next) return;
+          select.value = next;
+          select.dispatchEvent(new Event("change"));
+        },
+        onViewTargetChange: (seatId) => {
+          overlay.querySelector(".sl-view3d-nav")?.classList.toggle("is-seat-focused", !!seatId);
+          this.opts.onBuyerViewChange?.({
+            view: "venue3d",
+            ...seatId ? { seatId } : {}
+          });
+        },
         // Deferred off the tap gesture: generateSeatPanorama walks every seat
         // (O(n) on a 13k chart), and the module prefetches at pick — by the
         // time the flight lands (~2.5s) the idle render has long finished. A
@@ -5930,12 +6250,15 @@ var SeatPicker = class _SeatPicker {
         onAnalytics: (event, props) => this.emit3dAnalytics(event, props)
       });
       this.view3dHandle = handle;
+      loading.remove();
       this.pushAvailabilityTo3d();
       this.syncSelectionTo3d();
       this.buildView3dNav(overlay, handle);
       if (flySeatId) void handle.flyToSeat(flySeatId);
     } catch (err) {
+      if (gen !== this.view3dGen || this.buyerView !== "venue3d" || this.view3dEl !== overlay) return;
       this.opts.onError?.(err);
+      this.toast(this.tf("picker.unavailable3d", "3D could not start. The seat map is still available."), "warning");
       this.exit3d();
     }
   }
@@ -5943,6 +6266,7 @@ var SeatPicker = class _SeatPicker {
     if (this.buyerView !== "venue3d" && !this.view3dEl) return;
     this.view3dGen++;
     this.buyerView = "map";
+    this.opts.onBuyerViewChange?.({ view: "map" });
     this.root?.removeAttribute("data-view3d");
     try {
       this.view3dHandle?.dispose();