@seatlayer/js 0.48.0 → 0.48.1

package/dist/index.d.cts

@@ -488,7 +488,7 @@ interface OrderStatusResult {
     }>;
     /** Hosted ticket page — the durable re-entry point after the modal closes. */
     ticketUrl?: string;
-    /** Printable PDF, one page per ticket. */
+    /** Printable A4 PDF, up to three ticket cards per page. */
     pdfUrl?: string;
 }
 interface PubApiOptions {
@@ -1342,6 +1342,17 @@ interface SeatPickerOptions {
      * is shown only when BOTH this option and the theme flag are unset/false.
      */
     hideBadge?: boolean;
+    /**
+     * Hide the picker's event identity (logo, event name and venue/date metadata)
+     * when the host surface already presents the same event heading. The hold
+     * timer, sales status and modal close controls remain available. The identity
+     * is restored automatically while the picker is full screen so it never
+     * loses context on a small device or an expanded map. Default false.
+     *
+     * A mounted host can update this through `setEventDetailsHidden()` when its
+     * own event chrome arrives asynchronously.
+     */
+    hideEventDetails?: boolean;
     /** Host theme overrides — see SeatPickerTheme. */
     theme?: SeatPickerTheme;
     /**
@@ -1658,6 +1669,8 @@ declare class SeatPicker {
     private fsFallback;
     private fsChangeHandler;
     private fsEscHandler;
+    /** Host-level event chrome owns the duplicate identity outside full screen. */
+    private eventDetailsHidden;
     /** True once we've asked the host page to pin us fullscreen (framed, no native). */
     private framedFs;
     /** Last height (px) posted to a host frame; dedupes redundant reports. */
@@ -2069,6 +2082,12 @@ declare class SeatPicker {
      * colours have not changed; safe to call on every render.
      */
     setMapTheme(map: PickerMapTheme | null): void;
+    /**
+     * Let a host suppress duplicate event identity after mount without remounting
+     * the live picker (and therefore without disturbing a selection or hold).
+     * Full-screen mode still restores the identity until the buyer exits it.
+     */
+    setEventDetailsHidden(hidden: boolean): void;
     /**
      * Replace the host pricing override AFTER mount, and repaint everything that
      * shows a price.

package/dist/index.d.ts

@@ -488,7 +488,7 @@ interface OrderStatusResult {
     }>;
     /** Hosted ticket page — the durable re-entry point after the modal closes. */
     ticketUrl?: string;
-    /** Printable PDF, one page per ticket. */
+    /** Printable A4 PDF, up to three ticket cards per page. */
     pdfUrl?: string;
 }
 interface PubApiOptions {
@@ -1342,6 +1342,17 @@ interface SeatPickerOptions {
      * is shown only when BOTH this option and the theme flag are unset/false.
      */
     hideBadge?: boolean;
+    /**
+     * Hide the picker's event identity (logo, event name and venue/date metadata)
+     * when the host surface already presents the same event heading. The hold
+     * timer, sales status and modal close controls remain available. The identity
+     * is restored automatically while the picker is full screen so it never
+     * loses context on a small device or an expanded map. Default false.
+     *
+     * A mounted host can update this through `setEventDetailsHidden()` when its
+     * own event chrome arrives asynchronously.
+     */
+    hideEventDetails?: boolean;
     /** Host theme overrides — see SeatPickerTheme. */
     theme?: SeatPickerTheme;
     /**
@@ -1658,6 +1669,8 @@ declare class SeatPicker {
     private fsFallback;
     private fsChangeHandler;
     private fsEscHandler;
+    /** Host-level event chrome owns the duplicate identity outside full screen. */
+    private eventDetailsHidden;
     /** True once we've asked the host page to pin us fullscreen (framed, no native). */
     private framedFs;
     /** Last height (px) posted to a host frame; dedupes redundant reports. */
@@ -2069,6 +2082,12 @@ declare class SeatPicker {
      * colours have not changed; safe to call on every render.
      */
     setMapTheme(map: PickerMapTheme | null): void;
+    /**
+     * Let a host suppress duplicate event identity after mount without remounting
+     * the live picker (and therefore without disturbing a selection or hold).
+     * Full-screen mode still restores the identity until the buyer exits it.
+     */
+    setEventDetailsHidden(hidden: boolean): void;
     /**
      * Replace the host pricing override AFTER mount, and repaint everything that
      * shows a price.

package/dist/index.js

@@ -2328,7 +2328,7 @@ async function loadHostedCheckout() {
       cdnChunkUrl("seatlayer-checkout.mjs")
     );
   }
-  return import("./hostedCheckout-SHQCWN5Y.js");
+  return import("./hostedCheckout-F6C6VCCG.js");
 }
 function paymentsOffReason(reason) {
   return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
@@ -2370,6 +2370,16 @@ var CSS = (
 .sl-close.on{display:inline-flex}
 .sl-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
 
+/* A page or popup may already own the event heading. In that case only the
+   duplicate identity disappears; operational header controls stay available.
+   Zero block padding lets an otherwise-empty header collapse completely. */
+.sl-picker[data-event-details-hidden="true"] .sl-head{padding-block:0;border-bottom-width:0}
+.sl-picker[data-event-details-hidden="true"] .sl-logo,
+.sl-picker[data-event-details-hidden="true"] .sl-head-info{display:none!important}
+.sl-picker[data-event-details-hidden="true"] .sl-hold-pill.on,
+.sl-picker[data-event-details-hidden="true"] .sl-closed-pill.on,
+.sl-picker[data-event-details-hidden="true"] .sl-close.on{margin-block:10px}
+
 /* body */
 .sl-body{display:flex;flex:1;min-height:0}
 .sl-map{position:relative;flex:1;min-width:0}
@@ -2387,7 +2397,7 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-side{width:100%;border-left:0;border-top:1px solid var(--sl-line);
   flex:none;height:min(72%,480px);overflow:hidden;transition:height .3s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
 .sl-picker[data-layout="narrow"][data-sheet="open"][data-has-selection="false"] .sl-side{height:min(252px,52%)}
-.sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side{height:86px;overflow:hidden}
+.sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side{height:76px;overflow:hidden}
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side > :not(.sl-sheet-head){display:none}
 .sl-picker[data-layout="narrow"] .sl-tray{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 .sl-picker[data-layout="narrow"] .sl-foot{position:static;background:var(--sl-bg)}
@@ -2422,9 +2432,10 @@ var CSS = (
    head is the tap/swipe toggle target (min 44px), so it reads as one control. */
 .sl-sheet-head{display:none;flex-direction:column;justify-content:center;padding:6px 12px 8px;min-height:56px;
   cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
-.sl-picker[data-layout="narrow"] .sl-sheet-head{display:flex}
-.sl-sheet-grab{width:36px;height:4px;border-radius:999px;background:var(--sl-muted);opacity:.55;margin:2px auto 7px}
-.sl-sheet-bar{display:flex;align-items:center;gap:10px;min-height:26px}
+.sl-picker[data-layout="narrow"] .sl-sheet-head{display:flex;min-height:64px;padding:4px 10px 6px}
+.sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-sheet-head{height:100%}
+.sl-sheet-grab{width:36px;height:4px;border-radius:999px;background:var(--sl-muted);opacity:.55;margin:1px auto 5px}
+.sl-sheet-bar{display:flex;align-items:center;gap:8px;min-height:44px}
 .sl-sheet-peek{display:flex;align-items:center;gap:7px;flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--sl-text);
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-sheet-peek .sub{color:var(--sl-muted);font-weight:600}
@@ -2452,7 +2463,7 @@ var CSS = (
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec.has,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters.has{display:none}
 /* Accessibility and colour-safety controls must remain reachable on phones.
-   Keep them out of the 86px peek, then reveal their consolidated row whenever
+   Keep them out of the collapsed peek, then reveal their consolidated row whenever
    the buyer explicitly opens the ticket panel. */
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filtersec.has{display:block!important}
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filters.has{display:flex!important}
@@ -2595,15 +2606,10 @@ var CSS = (
 .sl-picker .sl-cta:disabled{background:var(--sl-surface);color:var(--sl-muted);opacity:1;
   cursor:not-allowed;filter:none;transform:none}
 
-/* Chrome anchor regions (Feature 6) \u2014 every persistent map overlay is APPENDED
+/* Chrome anchor regions (Feature 6) \u2014 every interactive map overlay is APPENDED
    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. */
-/* 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. */
+   two controls 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;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%}
@@ -2619,18 +2625,17 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-anchor[data-region="top-left"]{max-width:30%}
 .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) */
-/* 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:0 8px;font-size:8.5px;letter-spacing:.06em}
+/* TEST MODE is environment context, not an action. A clipped corner ribbon
+   keeps it persistent without impersonating a button or competing with Map/3D.
+   The top-left interactive region moves below it only on test events. */
+.sl-testbadge{position:absolute;top:17px;left:-38px;z-index:6;width:142px;padding:5px 0;
+  transform:rotate(-45deg);text-align:center;pointer-events:none;
+  font-size:9.5px;font-weight:850;letter-spacing:.13em;line-height:1.2;text-transform:uppercase;
+  white-space:nowrap;background:var(--sl-accent);color:var(--sl-accent-ink);
+  box-shadow:0 2px 8px rgba(0,0,0,.28)}
+.sl-picker[data-event-mode="test"] .sl-anchor[data-region="top-left"]{top:96px}
+.sl-picker[data-layout="narrow"] .sl-testbadge{top:14px;left:-35px;width:128px;font-size:8.5px}
+.sl-picker[data-layout="narrow"][data-event-mode="test"] .sl-anchor[data-region="top-left"]{top:88px}
 
 /* zoom column (flows within the bottom-right region) */
 .sl-zoom{display:flex;flex-direction:column;gap:6px}
@@ -2865,10 +2870,15 @@ var CSS = (
 .sl-ba-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .sl-ba-actions button{min-height:36px;border-radius:9px;border:1px solid var(--sl-line);font-size:11.5px;font-weight:800}
 .sl-ba-actions .replace{border-color:var(--sl-accent);background:var(--sl-accent);color:var(--sl-accent-ink)}
-.sl-picker[data-layout="narrow"] .sl-ba{padding:11px}
+.sl-picker[data-layout="narrow"] .sl-ba{padding:9px;gap:6px}
+.sl-picker[data-layout="narrow"] .sl-ba::after{display:none}
+.sl-picker[data-layout="narrow"] .sl-ba-title{font-size:12.5px}
+.sl-picker[data-layout="narrow"] .sl-ba-copy{display:none}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .wide{display:none}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .narrow{display:inline}
-.sl-picker[data-layout="narrow"] .sl-ba select{min-height:44px}
+.sl-picker[data-layout="narrow"] .sl-ba select{min-height:40px}
+.sl-picker[data-layout="narrow"] .sl-ba-qty button{width:30px;height:30px}
+.sl-picker[data-layout="narrow"] .sl-ba-go{min-height:40px}
 
 /* screen-reader live region */
 .sl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@@ -3311,6 +3321,8 @@ var SeatPicker = class _SeatPicker {
     this.fsFallback = false;
     this.fsChangeHandler = null;
     this.fsEscHandler = null;
+    /** Host-level event chrome owns the duplicate identity outside full screen. */
+    this.eventDetailsHidden = false;
     /** True once we've asked the host page to pin us fullscreen (framed, no native). */
     this.framedFs = false;
     /** Last height (px) posted to a host frame; dedupes redundant reports. */
@@ -3333,6 +3345,7 @@ var SeatPicker = class _SeatPicker {
     if (!options.event || typeof options.event !== "string") throw new Error("seatmap: `event` key is required");
     if (!options.container) throw new Error("seatmap: `container` is required (or use SeatPicker.open())");
     this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
+    this.eventDetailsHidden = !!options.hideEventDetails;
     this.hostPricing = options.pricing;
     this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
     this.access = options.transport ? null : createBuyerAccessContext(options, {
@@ -3617,6 +3630,10 @@ var SeatPicker = class _SeatPicker {
   }
   syncFullscreenButtons() {
     const active = !!document.fullscreenElement || this.fsFallback || this.framedFs;
+    const hideEventDetails = this.eventDetailsHidden && !active;
+    this.root?.setAttribute("data-event-details-hidden", String(hideEventDetails));
+    this.els.logo?.toggleAttribute("hidden", hideEventDetails);
+    this.els.headInfo?.toggleAttribute("hidden", hideEventDetails);
     this.els.zfs?.setAttribute("aria-pressed", String(active));
     this.view3dEl?.querySelector(".sl-view3d-fs")?.setAttribute("aria-pressed", String(active));
   }
@@ -3760,7 +3777,7 @@ var SeatPicker = class _SeatPicker {
     root.innerHTML = `
       <div class="sl-head">
         <div class="sl-logo" data-ref="logo"></div>
-        <div class="sl-head-info">
+        <div class="sl-head-info" data-ref="headInfo">
           <div class="sl-head-name" data-ref="name"></div>
           <div class="sl-head-meta" data-ref="meta"></div>
         </div>
@@ -3822,6 +3839,7 @@ var SeatPicker = class _SeatPicker {
       this.els[el.dataset.ref] = el;
     });
     this.mapHost = this.els.map;
+    this.syncFullscreenButtons();
     void this.refreshOfferAvailability(false);
     if (this.api.availability) {
       this.offerVisibilityHandler = () => {
@@ -3934,6 +3952,7 @@ var SeatPicker = class _SeatPicker {
     this.els.boot.remove();
     this.startRealtime();
     this.salesClosed = !!info.salesClosed || !!this.opts.readOnly;
+    root.dataset.eventMode = info.mode === "test" ? "test" : "live";
     this.controller.setViewMode(this.normalizeInitialView(this.opts.initialView));
     this.buildRegions();
     this.regions["bottom-right"].appendChild(this.els.zoom);
@@ -3943,7 +3962,7 @@ var SeatPicker = class _SeatPicker {
       badge.className = "sl-testbadge";
       badge.textContent = t2("picker.testMode");
       badge.setAttribute("aria-label", t2("picker.testMode"));
-      this.regions["top-right"].appendChild(badge);
+      this.els.map.appendChild(badge);
     }
     const chartTheme = this.controller.doc?.theme;
     Object.entries(resolveTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
@@ -6233,6 +6252,15 @@ var SeatPicker = class _SeatPicker {
     this.opts.theme = { ...this.opts.theme ?? {}, map: map ?? void 0 };
     this.controller.setMapTheme(map);
   }
+  /**
+   * Let a host suppress duplicate event identity after mount without remounting
+   * the live picker (and therefore without disturbing a selection or hold).
+   * Full-screen mode still restores the identity until the buyer exits it.
+   */
+  setEventDetailsHidden(hidden) {
+    this.eventDetailsHidden = hidden;
+    this.syncFullscreenButtons();
+  }
   /**
    * Replace the host pricing override AFTER mount, and repaint everything that
    * shows a price.