@seatlayer/js 0.21.0 → 0.22.0

package/dist/index.d.cts

@@ -254,10 +254,27 @@ interface EmbeddedDesignerOptions {
      * Only used when `showLoadingState` is enabled.
      */
     loadingTimeoutMs?: number;
+    /**
+     * How to size the iframe's height. The Designer is a full application (its
+     * shell is `position:fixed; height:100dvh`), not flowing content, so it should
+     * fill the viewport rather than be measured.
+     *
+     * - `'fill'` (default): grow the iframe so its bottom edge reaches the bottom
+     *   of the viewport — `window.innerHeight - iframe.top`, clamped to `minHeight`
+     *   — recomputed (rAF-throttled) on `resize` / `orientationchange` / `scroll`.
+     *   The legacy `seatlayer.designer.resize` message is ignored in this mode: it
+     *   is circular, because the fixed-position shell just echoes the iframe height.
+     * - a number: a fixed pixel height. In this mode the legacy resize message is
+     *   still honoured (unless `autoResize` is `false`) so older hosts keep growing.
+     */
+    height?: 'fill' | number;
+    /** Minimum height (px) that `'fill'` mode clamps to. Defaults to `480`. */
+    minHeight?: number;
     /**
      * Auto-grow the iframe to the height the Designer reports over the resize
-     * protocol (`seatlayer.designer.resize`). Defaults to `true`. Set `false` when
-     * the host sizes the iframe itself (e.g. a fixed-height chrome).
+     * protocol (`seatlayer.designer.resize`). Only applies when `height` is a fixed
+     * number; ignored in `'fill'` mode. Defaults to `true`. Set `false` when the
+     * host sizes a fixed-height iframe itself.
      */
     autoResize?: boolean;
     /**
@@ -289,6 +306,8 @@ declare class EmbeddedDesigner {
     private fsKeyHandler;
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     private lastAutoHeight;
+    private fillRaf;
+    private fillListening;
     constructor(options: EmbeddedDesignerOptions);
     mount(): HTMLIFrameElement;
     /** Replace the iframe instead of assigning a new fragment to an existing one. */
@@ -297,6 +316,18 @@ declare class EmbeddedDesigner {
     destroy(): void;
     private loadingStateEnabled;
     private autoResizeEnabled;
+    /** Fill mode is the default; a numeric `height` opts into a fixed pixel box. */
+    private fillEnabled;
+    /**
+     * Size the iframe so its bottom edge meets the bottom of the viewport
+     * (`window.innerHeight - top`), clamped to `minHeight`. No-op while pinned
+     * fullscreen (the pin fills the viewport itself).
+     */
+    private applyFill;
+    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    private scheduleFill;
+    private startFill;
+    private stopFill;
     /**
      * Pin the iframe over the host page as a viewport-filling overlay. We save the
      * iframe's inline style and the document scroll state so `unpinFullscreen`
@@ -325,7 +356,7 @@ declare class EmbeddedDesigner {
  * SeatPicker — the full buyer experience as a widget.
  *
  * Where `SeatingChart` is canvas-only, SeatPicker owns the complete chrome
- * from the canonical UX (SeatmapUX/11 Buyer Picker.dc.html): branded header,
+ * from the canonical UX contract: branded header,
  * live price panel, selection tray with GA steppers, hold countdown, snipe
  * toasts and expiry recovery — all on top of the shared PickerController, so
  * every host gets the whole experience with one mount.

package/dist/index.d.ts

@@ -254,10 +254,27 @@ interface EmbeddedDesignerOptions {
      * Only used when `showLoadingState` is enabled.
      */
     loadingTimeoutMs?: number;
+    /**
+     * How to size the iframe's height. The Designer is a full application (its
+     * shell is `position:fixed; height:100dvh`), not flowing content, so it should
+     * fill the viewport rather than be measured.
+     *
+     * - `'fill'` (default): grow the iframe so its bottom edge reaches the bottom
+     *   of the viewport — `window.innerHeight - iframe.top`, clamped to `minHeight`
+     *   — recomputed (rAF-throttled) on `resize` / `orientationchange` / `scroll`.
+     *   The legacy `seatlayer.designer.resize` message is ignored in this mode: it
+     *   is circular, because the fixed-position shell just echoes the iframe height.
+     * - a number: a fixed pixel height. In this mode the legacy resize message is
+     *   still honoured (unless `autoResize` is `false`) so older hosts keep growing.
+     */
+    height?: 'fill' | number;
+    /** Minimum height (px) that `'fill'` mode clamps to. Defaults to `480`. */
+    minHeight?: number;
     /**
      * Auto-grow the iframe to the height the Designer reports over the resize
-     * protocol (`seatlayer.designer.resize`). Defaults to `true`. Set `false` when
-     * the host sizes the iframe itself (e.g. a fixed-height chrome).
+     * protocol (`seatlayer.designer.resize`). Only applies when `height` is a fixed
+     * number; ignored in `'fill'` mode. Defaults to `true`. Set `false` when the
+     * host sizes a fixed-height iframe itself.
      */
     autoResize?: boolean;
     /**
@@ -289,6 +306,8 @@ declare class EmbeddedDesigner {
     private fsKeyHandler;
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     private lastAutoHeight;
+    private fillRaf;
+    private fillListening;
     constructor(options: EmbeddedDesignerOptions);
     mount(): HTMLIFrameElement;
     /** Replace the iframe instead of assigning a new fragment to an existing one. */
@@ -297,6 +316,18 @@ declare class EmbeddedDesigner {
     destroy(): void;
     private loadingStateEnabled;
     private autoResizeEnabled;
+    /** Fill mode is the default; a numeric `height` opts into a fixed pixel box. */
+    private fillEnabled;
+    /**
+     * Size the iframe so its bottom edge meets the bottom of the viewport
+     * (`window.innerHeight - top`), clamped to `minHeight`. No-op while pinned
+     * fullscreen (the pin fills the viewport itself).
+     */
+    private applyFill;
+    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    private scheduleFill;
+    private startFill;
+    private stopFill;
     /**
      * Pin the iframe over the host page as a viewport-filling overlay. We save the
      * iframe's inline style and the document scroll state so `unpinFullscreen`
@@ -325,7 +356,7 @@ declare class EmbeddedDesigner {
  * SeatPicker — the full buyer experience as a widget.
  *
  * Where `SeatingChart` is canvas-only, SeatPicker owns the complete chrome
- * from the canonical UX (SeatmapUX/11 Buyer Picker.dc.html): branded header,
+ * from the canonical UX contract: branded header,
  * live price panel, selection tray with GA steppers, hold countdown, snipe
  * toasts and expiry recovery — all on top of the shared PickerController, so
  * every host gets the whole experience with one mount.

package/dist/index.js

@@ -327,6 +327,7 @@ var TYPES = /* @__PURE__ */ new Set([
   "seatlayer.designer.error"
 ]);
 var DEFAULT_LOADING_TIMEOUT_MS = 2e4;
+var DEFAULT_MIN_FILL_HEIGHT = 480;
 function resolveContainer2(container) {
   if (typeof container !== "string") return container;
   const element = document.querySelector(container);
@@ -374,12 +375,23 @@ var EmbeddedDesigner = class {
     this.fsKeyHandler = null;
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     this.lastAutoHeight = "";
+    // Viewport-fill sizing: pending rAF handle + whether listeners are attached.
+    this.fillRaf = null;
+    this.fillListening = false;
+    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    this.scheduleFill = () => {
+      if (this.fillRaf !== null) return;
+      this.fillRaf = requestAnimationFrame(() => {
+        this.fillRaf = null;
+        this.applyFill();
+      });
+    };
     this.handleMessage = (event) => {
       if (!this.frame || event.origin !== this.designerOrigin || event.source !== this.frame.contentWindow) return;
       if (!event.data || typeof event.data !== "object") return;
       const data = event.data;
       if (data.type === "seatlayer.designer.resize") {
-        if (this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
+        if (!this.fillEnabled() && this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
           this.lastAutoHeight = `${Math.round(data.px)}px`;
           if (!this.pinned) this.frame.style.height = this.lastAutoHeight;
         }
@@ -437,11 +449,11 @@ var EmbeddedDesigner = class {
     this.designerOrigin = url.origin;
     const frame = document.createElement("iframe");
     frame.title = this.options.title ?? "Venue chart Designer";
-    frame.allow = this.options.allow ?? "clipboard-write";
+    frame.allow = this.options.allow ?? "fullscreen; clipboard-write";
     frame.referrerPolicy = this.options.referrerPolicy ?? "origin";
     frame.src = url.toString();
     frame.style.width = "100%";
-    frame.style.height = "100%";
+    frame.style.height = typeof this.options.height === "number" ? `${this.options.height}px` : "100%";
     frame.style.border = "0";
     Object.assign(frame.style, this.options.style);
     if (this.options.className) frame.className = this.options.className;
@@ -449,6 +461,7 @@ var EmbeddedDesigner = class {
     window.addEventListener("message", this.handleMessage);
     container.append(frame);
     this.frame = frame;
+    if (this.fillEnabled()) this.startFill();
     this.phase = "loading";
     if (this.loadingStateEnabled()) {
       this.ensureContainerPositioned(container);
@@ -472,6 +485,7 @@ var EmbeddedDesigner = class {
   }
   destroy() {
     window.removeEventListener("message", this.handleMessage);
+    this.stopFill();
     this.unpinFullscreen();
     this.clearTimeoutTimer();
     this.removeOverlay();
@@ -488,6 +502,41 @@ var EmbeddedDesigner = class {
   autoResizeEnabled() {
     return this.options.autoResize !== false;
   }
+  /** Fill mode is the default; a numeric `height` opts into a fixed pixel box. */
+  fillEnabled() {
+    return typeof this.options.height !== "number";
+  }
+  /**
+   * Size the iframe so its bottom edge meets the bottom of the viewport
+   * (`window.innerHeight - top`), clamped to `minHeight`. No-op while pinned
+   * fullscreen (the pin fills the viewport itself).
+   */
+  applyFill() {
+    if (!this.frame || this.pinned) return;
+    const min = this.options.minHeight ?? DEFAULT_MIN_FILL_HEIGHT;
+    const top = this.frame.getBoundingClientRect().top;
+    const target = Math.max(min, Math.round(window.innerHeight - top));
+    this.frame.style.height = `${target}px`;
+  }
+  startFill() {
+    this.applyFill();
+    if (this.fillListening) return;
+    this.fillListening = true;
+    window.addEventListener("resize", this.scheduleFill);
+    window.addEventListener("orientationchange", this.scheduleFill);
+    window.addEventListener("scroll", this.scheduleFill, { passive: true });
+  }
+  stopFill() {
+    if (this.fillRaf !== null) {
+      cancelAnimationFrame(this.fillRaf);
+      this.fillRaf = null;
+    }
+    if (!this.fillListening) return;
+    this.fillListening = false;
+    window.removeEventListener("resize", this.scheduleFill);
+    window.removeEventListener("orientationchange", this.scheduleFill);
+    window.removeEventListener("scroll", this.scheduleFill);
+  }
   /**
    * Pin the iframe over the host page as a viewport-filling overlay. We save the
    * iframe's inline style and the document scroll state so `unpinFullscreen`
@@ -526,7 +575,8 @@ var EmbeddedDesigner = class {
     if (this.frame) {
       if (this.frameStyleBeforeFs === null) this.frame.removeAttribute("style");
       else this.frame.setAttribute("style", this.frameStyleBeforeFs);
-      if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
+      if (this.fillEnabled()) this.applyFill();
+      else if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
     }
     this.frameStyleBeforeFs = null;
     if (this.docOverflowBeforeFs !== null) {
@@ -838,6 +888,11 @@ var CSS = `
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-prices-sec{display:none}
+/* Reclaim the bottom sheet once the cart has anything: the "Find best seats"
+   panel collapses too. EXCEPT the confirm ("Replace your current choices?") and
+   in-flight busy states, which legitimately show with a non-empty cart \u2014 those
+   set data-ba-active="true" (see setAttribute alongside data-has-selection). */
+.sl-picker[data-layout="narrow"][data-has-selection="true"]:not([data-ba-active="true"]) .sl-ba{display:none}
 /* touch chrome: pinch-zoom exists \u2014 hide +/\u2212 on the sheet layout (keep fit) */
 .sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zin"],
 .sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zout"]{display:none}
@@ -2688,6 +2743,7 @@ var SeatPicker = class _SeatPicker {
     if (narrow) {
       card.className = "sl-seccard strip on";
       card.setAttribute("role", "status");
+      card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
       card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn;
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       (this.els.sheetHead ?? this.els.side ?? this.els.map).appendChild(card);
@@ -3098,7 +3154,7 @@ var SeatPicker = class _SeatPicker {
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
-    const noPicks = !seats.length && !heldItems.length;
+    const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
     if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
       parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
@@ -3242,6 +3298,10 @@ var SeatPicker = class _SeatPicker {
     this.els.count.textContent = count ? `${count} ${count === 1 ? "ticket" : "tickets"}` : "No seats selected";
     this.els.total.textContent = count ? this.money(total) : "";
     this.root?.setAttribute("data-has-selection", String(count > 0));
+    this.root?.setAttribute(
+      "data-ba-active",
+      String(this.bestAvailableConfirm || this.bestAvailableBusy)
+    );
     this.els.foot?.classList.toggle("empty", count === 0);
     if (this.els.seatSummary) {
       this.els.seatSummary.textContent = count ? `${count} selected` : "";