@seatlayer/js 0.18.0 → 0.18.1

package/dist/index.js

@@ -662,6 +662,7 @@ import {
   PickerController as PickerController2,
   expandChart,
   generateSeatPanorama,
+  generateSeatThumb,
   loadLocale as loadLocale2,
   setStringOverrides as setStringOverrides2,
   t as t2,
@@ -826,26 +827,43 @@ var CSS = `
 .sl-tray{flex:1;padding:10px 14px 14px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;
   overscroll-behavior:contain;scrollbar-gutter:stable}
 .sl-tray-hint{font-size:12.5px;color:var(--sl-muted);line-height:1.5}
-.sl-chip{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto 30px;align-items:center;gap:8px;
-  min-height:53px;padding:7px 7px 7px 9px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm);
+.sl-chip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:stretch;
+  flex:none;min-height:53px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm);overflow:hidden;
   background:var(--sl-surface);font-size:13px;transform-origin:center;transition:border-color .15s,background .15s}
 .sl-chip:hover{border-color:color-mix(in srgb,var(--sl-accent) 38%,var(--sl-line))}
 .sl-chip.sl-enter{animation:slChipIn .38s cubic-bezier(.2,.8,.2,1) both}
 .sl-chip.sl-leave{pointer-events:none;animation:slChipOut .16s ease-in both}
 .sl-chip.sl-held{border-color:var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
   box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent)}
-.sl-ticket-state{width:23px;height:23px;border-radius:999px;display:flex;align-items:center;justify-content:center;
+.sl-ticket-state{width:17px;height:17px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
   background:var(--sl-accent);color:var(--sl-accent-ink)}
 .sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent)}
-.sl-ticket-state svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
-.sl-chip-main{min-width:0}
-.sl-chip b{display:block;font-weight:800;min-width:max-content;white-space:nowrap}
-.sl-chip-sub{display:flex;align-items:center;gap:5px;min-width:0;margin-top:2px}
+.sl-ticket-state svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-chip-main{min-width:0;padding:8px 10px 8px 11px;display:flex;flex-direction:column;justify-content:center;gap:5px}
+.sl-chip-id{display:flex;gap:12px;min-width:0}
+.sl-chip-id .fld{min-width:0}
+.sl-chip-id .fld.sec{flex:1}
+.sl-chip-id .fld.mid{flex:none;text-align:center}
+.sl-chip-eb{display:block;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:1px}
+.sl-chip-id .val{display:block;font-weight:600;font-size:13px;line-height:1.25;white-space:nowrap}
+.sl-chip-id .fld.sec .val{overflow:hidden;text-overflow:ellipsis}
+.sl-chip-sub{display:flex;align-items:center;gap:6px;min-width:0}
 .sl-chip .cat{color:var(--sl-muted);font-size:10.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-chip .amt{font-weight:700;font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
-.sl-chip .rm{width:29px;height:29px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--sl-muted)}
-.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
+.sl-chip-rail{display:flex;flex-direction:column;border-left:1px solid var(--sl-line)}
+.sl-chip .rm,.sl-chip .view{flex:1;min-height:26px;border-radius:0;display:flex;align-items:center;justify-content:center;
+  color:var(--sl-muted);transition:color .15s,background .15s}
+.sl-chip .view{border-top:1px solid var(--sl-line)}
+.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:#e5484d;background:color-mix(in srgb,#e5484d 9%,transparent)}
+.sl-chip .view:hover,.sl-chip .view:focus-visible{color:var(--sl-text);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
 .sl-chip .rm svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
+.sl-chip .view svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
+/* live-activity strip \u2014 narrates WS availability deltas (social proof + urgency) */
+.sl-live{display:flex;align-items:center;gap:7px;margin:10px 14px 0;padding:7px 9px;flex:none;
+  border:1px solid var(--sl-line);border-radius:8px;background:color-mix(in srgb,var(--sl-accent) 4%,var(--sl-surface));
+  font-size:11px;color:var(--sl-muted)}
+.sl-live .dot{width:6px;height:6px;border-radius:999px;background:#22a06b;box-shadow:0 0 6px rgba(34,160,107,.75);flex:none}
+.sl-live span:last-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 
 /* GA rows */
 .sl-ga{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px dashed var(--sl-line);border-radius:var(--sl-r-sm)}
@@ -921,6 +939,8 @@ var CSS = `
 
 /* zoom column (flows within the bottom-right region) */
 .sl-zoom{display:flex;flex-direction:column;gap:6px}
+/* CSS-fallback full screen (iOS Safari has no element fullscreen API) */
+.sl-picker.sl-fs{position:fixed;inset:0;z-index:2147483000;width:auto;height:auto;max-height:none;border-radius:0}
 .sl-zoom button{width:36px;height:36px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-zoom button:hover{border-color:var(--sl-muted)}
@@ -979,6 +999,39 @@ var CSS = `
 .sl-booked.on .sl-booked-title{animation-delay:.22s}
 .sl-booked.on .sl-booked-sub{animation-delay:.3s}
 
+/* sold-out overlay \u2014 every SEATED category's live availability is 0. Centered
+   over the map; a stub (disabled) "Join waitlist" button, exactly like the page.
+   Suppressed when GA areas exist (GA capacity isn't seat-counted). Clears live
+   the moment WS frees a seat up. */
+.sl-soldout{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;
+  justify-content:center;text-align:center;gap:8px;padding:24px;
+  background:color-mix(in srgb,var(--sl-bg) 82%,transparent);backdrop-filter:blur(4px)}
+.sl-soldout.on{display:flex}
+.sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent);font-weight:800}
+.sl-soldout-title{font-size:32px;font-weight:800;color:var(--sl-text);line-height:1.05}
+.sl-soldout-copy{max-width:360px;font-size:13px;color:var(--sl-muted);line-height:1.5}
+.sl-picker .sl-soldout-btn{margin-top:10px;min-height:40px;padding:10px 18px;border-radius:var(--sl-r-sm);
+  background:var(--sl-surface);color:var(--sl-muted);border:1px solid var(--sl-line);font-weight:800;font-size:13px;
+  cursor:not-allowed;opacity:.85}
+
+/* sales-closed pill (header) \u2014 persistent read-only state when the event's sales
+   window is closed at load or closes live mid-session. Neutral (not accent) so it
+   reads as "unavailable", distinct from the accent hold pill next to it. */
+.sl-closed-pill{display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;flex:none;
+  background:color-mix(in srgb,var(--sl-text) 12%,var(--sl-surface));color:var(--sl-text);
+  font-weight:700;font-size:12px;white-space:nowrap}
+.sl-closed-pill.on{display:inline-flex}
+.sl-closed-pill svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+
+/* "Powered by SeatLayer" attribution badge (side-panel foot) \u2014 the small gold
+   rounded logo 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)}
+.sl-powered-mark{width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;
+  background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-powered-mark svg{width:11px;height:11px;fill:currentColor}
+
 /* a11y filter chips (flow within the top-left region) */
 .sl-chips{display:flex;gap:6px;flex-wrap:wrap}
 .sl-chip-f{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;
@@ -1017,8 +1070,30 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-confirm{left:50%!important;top:auto!important;bottom:14px;width:min(342px,calc(100% - 24px));
   transform:translateX(-50%);animation:slConfirmMobileIn .24s cubic-bezier(.2,.8,.2,1) both}
 
+/* hover preview \u2014 a COMPACT echo of the confirm card (deliberately smaller: it's
+   a passing preview on hover, not the click/select action surface). Reuses the
+   Section\xB7Row\xB7Seat identity grid so hover, confirm and the cart chip all share
+   one visual language, just at three sizes. */
+.sl-tip{position:absolute;z-index:7;pointer-events:none;display:none;width:190px;overflow:hidden;
+  background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:11px;
+  box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
+.sl-tip-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;border-bottom:1px solid var(--sl-line)}
+.sl-tip-grid.one{grid-template-columns:1fr}
+.sl-tip-field{min-width:0;padding:6px 9px;border-right:1px solid var(--sl-line)}
+.sl-tip-field:last-child{border-right:0;text-align:center}
+.sl-tip-grid:not(.one) .sl-tip-field:nth-child(2){text-align:center}
+.sl-tip-key{display:block;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-tip-val{display:block;margin-top:2px;color:var(--sl-text);font-size:13px;line-height:1.1;font-weight:750;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-tip-cat{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;
+  background:color-mix(in srgb,var(--sl-cat) 12%,var(--sl-surface))}
+.sl-tip-dot{width:8px;height:8px;border-radius:50%;flex:none}
+.sl-tip-name{color:var(--sl-muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-tip-amt{margin-left:auto;font-weight:800;color:var(--sl-text);font-variant-numeric:tabular-nums;font-size:12px}
+.sl-tip-status{padding:5px 10px 7px;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sl-muted)}
+
 /* Best available is a first-class shortcut, not an anonymous utility row. */
-.sl-ba{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
+.sl-ba{position:relative;flex:none;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
   padding:13px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));border-radius:13px;
   background:linear-gradient(135deg,color-mix(in srgb,var(--sl-accent) 5%,var(--sl-surface)),color-mix(in srgb,var(--sl-accent) 11%,var(--sl-surface)))}
 .sl-ba::after{content:'\u2726';position:absolute;right:10px;top:3px;color:color-mix(in srgb,var(--sl-accent) 20%,transparent);font-size:42px;line-height:1}
@@ -1054,12 +1129,6 @@ var CSS = `
 /* per-seat ticket-tier select + view-from-seat button in tray chips */
 .sl-chip .tier{background:var(--sl-bg);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:6px;
   font:inherit;font-size:10px;padding:2px 4px;min-width:0;max-width:100%;cursor:pointer}
-.sl-chip .view{width:20px;height:20px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
-  color:var(--sl-muted);opacity:.36;transition:color .15s,opacity .15s}
-.sl-chip .view:hover{color:var(--sl-text)}
-.sl-chip:hover .view,.sl-chip .view:focus-visible{opacity:1;color:var(--sl-text)}
-.sl-chip .view svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
-@media(pointer:coarse){.sl-chip .view{opacity:.58}}
 
 /* arena: LOD rung pills (flow within the top-center region) */
 .sl-rungs{display:none;background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:999px;padding:3px}
@@ -1117,6 +1186,14 @@ var CSS = `
 .sl-seccard-hint{font-size:10.5px;color:var(--sl-muted)}
 
 /* view-from-seat button on the confirm popover */
+/* Eager sightline preview inside the confirm card */
+.sl-confirm-thumbwrap{position:relative;display:block;width:100%;height:74px;margin:0 0 8px;padding:0!important;
+  border-radius:9px;overflow:hidden;border:1px solid var(--sl-line);cursor:pointer}
+.sl-confirm-thumb{display:block;width:100%;height:100%;object-fit:cover}
+.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)}
@@ -1200,6 +1277,22 @@ function resolveTokens(chart, host) {
     "--sl-radius": `${host?.radius ?? 14}px`
   };
 }
+var CB_STORAGE_KEY = "seatmap.a11y.cb";
+function readStoredColorblind() {
+  try {
+    if (typeof window === "undefined") return null;
+    const raw = window.localStorage.getItem(CB_STORAGE_KEY);
+    return raw == null ? null : raw === "1";
+  } catch {
+    return null;
+  }
+}
+function writeStoredColorblind(on) {
+  try {
+    window.localStorage.setItem(CB_STORAGE_KEY, on ? "1" : "0");
+  } catch {
+  }
+}
 var SeatPicker = class _SeatPicker {
   constructor(options) {
     this.root = null;
@@ -1232,11 +1325,17 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = null;
     this.srEl = null;
-    this.a11yFilter = "all";
     this.baQty = 2;
     this.baCat = "";
     this.bestAvailableConfirm = false;
     this.releasingHold = false;
+    /** Event sales window is closed (read-only load state / live close). */
+    this.salesClosed = false;
+    /** Every seated category's live availability is 0 (sold-out overlay is up). */
+    this.soldOut = false;
+    this.soldoutEl = null;
+    /** Resolved colorblind-safe state — stored preference wins over the option. */
+    this.cbSafe = false;
     // arena / multi-floor / seat-view chrome
     this.rungsEl = null;
     this.floorsEl = null;
@@ -1245,13 +1344,11 @@ var SeatPicker = class _SeatPicker {
     this.viewCleanup = null;
     this.allSeatsCache = null;
     // F3 minimap
-    this.miniEl = null;
     this.miniCanvas = null;
     this.miniBase = null;
     this.miniTf = null;
     // F4 price-band filter — active band's category keys (null = all prices)
     this.priceBandKeys = null;
-    this.priceFilterEl = null;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     this.lastSection = null;
     /** Section card collapsed to its slim pill (seat-picking has begun). */
@@ -1271,6 +1368,9 @@ var SeatPicker = class _SeatPicker {
     this.ctaPhase = "idle";
     // narrow-layout chrome that docks into the sheet's Filters row on mobile
     this.a11yChipsEl = null;
+    this.fsFallback = false;
+    this.fsChangeHandler = null;
+    this.fsEscHandler = null;
     this.cbEl = null;
     // modal plumbing (set by open())
     this.modalScrim = null;
@@ -1278,20 +1378,22 @@ var SeatPicker = class _SeatPicker {
     this.escHandler = null;
     /** Set by open(): closes the modal (scroll restore + destroy + onClose). */
     this.closeModal = null;
+    this.lastCatAvail = null;
     if (!options || typeof options !== "object") throw new Error("seatmap: options object is required");
     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.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
-    this.api = new PubApi(this.apiBase);
+    this.api = options.transport ?? new PubApi(this.apiBase);
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
+    this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new PickerController2({
       transport: this.api,
       eventKey: options.event,
       maxSelection: this.maxTickets,
       currency: options.currency,
       flashOnLiveChange: true,
-      colorblindSafe: options.colorblindSafe,
+      colorblindSafe: this.cbSafe,
       onSelectionChange: () => {
         this.syncTray();
         if (this.committedSelection().length) this.collapseSectionCard();
@@ -1317,6 +1419,11 @@ var SeatPicker = class _SeatPicker {
       },
       confirmSelection: this.opts.confirmSelection,
       onSelect: (seat) => {
+        if (this.salesClosed) {
+          this.controller.deselect([seat.id]);
+          this.toast(this.tf("picker.salesClosedToast", "Sales are closed for this event."), "warning");
+          return;
+        }
         this.flashPickedSeat(seat.id);
         if (this.opts.confirmSelection) this.showConfirm(seat);
       },
@@ -1339,9 +1446,68 @@ var SeatPicker = class _SeatPicker {
       onHint: (m) => {
         if (m) this.toast(m);
       },
+      // Server declared the event closed mid-session (409 event_closed) — keep
+      // the toast (raised by handleCta), and add the persistent read-only state.
+      onSalesClosed: () => this.setSalesClosed(true),
       onError: (err) => this.opts.onError?.(err)
     });
   }
+  /**
+   * Eager sightline preview for the confirm card: a cheap generated forward
+   * view (or the organizer's real photo) plus a "Nm to stage · clear
+   * sightline" line — the premium at-a-glance moment; click opens the 360.
+   */
+  confirmThumbHtml(seat) {
+    const doc = this.controller.doc;
+    if (!doc) return "";
+    let url = seat.viewUrl ?? "";
+    let distance = null;
+    if (!url) {
+      try {
+        const thumb = generateSeatThumb(seat, doc.focalPoint);
+        url = thumb.url;
+        distance = thumb.distanceM ?? null;
+      } catch {
+        return "";
+      }
+    }
+    const sight = distance != null ? `${distance}${this.tf("picker.sightline", "m to stage \xB7 clear sightline")}` : this.tf("picker.sightlineClear", "Clear sightline");
+    return `<button type="button" class="sl-confirm-view sl-confirm-thumbwrap" aria-label="${t2("picker.viewFromSeat", { label: seat.label })}"><img class="sl-confirm-thumb" src="${url}" alt="" /><span class="sl-confirm-thumb-badge">\u{1F52D} ${this.tf("picker.viewFromHere", "View from here")}</span></button><div class="sl-confirm-sight"><span aria-hidden="true">\u2713</span>${sight}</div>`;
+  }
+  /** Full screen via the native API, falling back to a fixed-position overlay (iOS Safari). */
+  toggleFullscreen() {
+    const root = this.root;
+    if (!root) return;
+    const active = !!document.fullscreenElement || this.fsFallback;
+    if (!active) {
+      if (root.requestFullscreen) {
+        root.requestFullscreen().catch(() => this.setFsFallback(true));
+      } else {
+        this.setFsFallback(true);
+      }
+    } else if (document.fullscreenElement) {
+      void document.exitFullscreen().catch(() => {
+      });
+    } else {
+      this.setFsFallback(false);
+    }
+  }
+  setFsFallback(on) {
+    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));
+    if (on && !this.fsEscHandler) {
+      this.fsEscHandler = (e) => {
+        if (e.key === "Escape" && !document.fullscreenElement) this.setFsFallback(false);
+      };
+      window.addEventListener("keydown", this.fsEscHandler);
+    } else if (!on && this.fsEscHandler) {
+      window.removeEventListener("keydown", this.fsEscHandler);
+      this.fsEscHandler = null;
+    }
+    requestAnimationFrame(() => this.controller.zoomToFit());
+  }
   /**
    * Close the picker. In modal mode (SeatPicker.open()) this dismisses the
    * modal exactly like ESC/scrim/✕ — restores page scroll and fires onClose.
@@ -1436,6 +1602,10 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-head-meta" data-ref="meta"></div>
         </div>
         <span class="sl-hold-pill" data-ref="hold"></span>
+        <span class="sl-closed-pill" data-ref="closedPill" role="status">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
+          <span data-ref="closedPillText"></span>
+        </span>
         <button type="button" class="sl-close" data-ref="close" 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>
@@ -1449,6 +1619,9 @@ var SeatPicker = class _SeatPicker {
             <button type="button" aria-label="Fit to screen" data-ref="zfit">
               <svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
             </button>
+            <button type="button" aria-label="Full screen" aria-pressed="false" data-ref="zfs">
+              <svg viewBox="0 0 24 24"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+            </button>
           </div>
           <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>Loading seat map\u2026</div>
           <div class="sl-toast" data-ref="toast" role="status" aria-live="polite"></div>
@@ -1467,6 +1640,7 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-filters" data-ref="filters"></div>
           <div class="sl-sec sl-prices-sec" data-ref="pricesSec"><span>Ticket prices</span></div>
           <div class="sl-prices" data-ref="prices"></div>
+          <div class="sl-live" data-ref="live" role="status" aria-live="polite"><span class="dot" aria-hidden="true"></span><span data-ref="liveText">Live availability \u2014 seats update in real time</span></div>
           <div class="sl-sec sl-seats-sec"><span>Your seats</span><span class="sl-seat-summary" data-ref="seatSummary"></span></div>
           <div class="sl-tray" data-ref="tray"></div>
           <div class="sl-foot" data-ref="foot">
@@ -1500,6 +1674,13 @@ var SeatPicker = class _SeatPicker {
     this.els.zin.addEventListener("click", () => this.controller.zoomIn());
     this.els.zout.addEventListener("click", () => this.controller.zoomOut());
     this.els.zfit.addEventListener("click", () => this.controller.zoomToFit());
+    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));
+      requestAnimationFrame(() => this.controller.zoomToFit());
+    };
+    document.addEventListener("fullscreenchange", this.fsChangeHandler);
     const head = this.els.sheetHead;
     if (head) {
       const toggle = this.els.sheetToggle;
@@ -1543,7 +1724,7 @@ var SeatPicker = class _SeatPicker {
     }
     this.tipEl = document.createElement("div");
     this.tipEl.setAttribute("role", "tooltip");
-    this.tipEl.style.cssText = "position:absolute;z-index:7;pointer-events:none;display:none;max-width:240px;background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.45;";
+    this.tipEl.className = "sl-tip";
     this.els.map.appendChild(this.tipEl);
     this.els.map.addEventListener("mousemove", (e) => {
       const r = this.els.map.getBoundingClientRect();
@@ -1568,6 +1749,7 @@ var SeatPicker = class _SeatPicker {
       return this;
     }
     this.els.boot.remove();
+    this.salesClosed = !!info.salesClosed;
     this.buildRegions();
     this.regions["bottom-right"].appendChild(this.els.zoom);
     this.regions["bottom-center"].appendChild(this.els.toast);
@@ -1587,6 +1769,7 @@ var SeatPicker = class _SeatPicker {
     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" }) : "";
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
+    this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
     if (this.controller.doc) {
       for (const seat of expandChart(this.controller.doc)) {
@@ -1602,12 +1785,29 @@ var SeatPicker = class _SeatPicker {
       chips.innerHTML = mk("all", "All seats") + [...present].map((type) => mk(type, `${GLYPH[type] ? GLYPH[type] + " " : ""}${type[0].toUpperCase()}${type.slice(1).replace(/-/g, " ")}`)).join("");
       this.regions["top-left"].appendChild(chips);
       this.a11yChipsEl = chips;
+      const active = /* @__PURE__ */ new Set();
+      const syncChips = () => {
+        chips.querySelectorAll("button").forEach((b) => {
+          const f = b.dataset.f;
+          const on = f === "all" ? active.size === 0 : active.has(f);
+          b.classList.toggle("on", on);
+          b.setAttribute("aria-pressed", String(on));
+        });
+        const filter = active.size ? [...active] : null;
+        this.controller.setAccessibilityFilter(filter);
+        if (filter && this.rungsEl && this.controller.getRung() !== "seats") {
+          this.controller.setRung("seats");
+          this.collapseSectionCard();
+          this.syncRung();
+        }
+      };
       chips.querySelectorAll("button").forEach((btn) => {
         btn.addEventListener("click", () => {
           const f = btn.dataset.f;
-          this.a11yFilter = f;
-          chips.querySelectorAll("button").forEach((b) => b.classList.toggle("on", b === btn));
-          this.controller.setAccessibilityFilter(f === "all" ? null : [f]);
+          if (f === "all") active.clear();
+          else if (active.has(f)) active.delete(f);
+          else active.add(f);
+          syncChips();
         });
       });
     }
@@ -1616,14 +1816,14 @@ var SeatPicker = class _SeatPicker {
     cb.className = "sl-cbbtn";
     this.cbEl = cb;
     cb.setAttribute("aria-label", "Toggle colorblind-friendly colors");
-    cb.setAttribute("aria-pressed", String(!!this.opts.colorblindSafe));
+    cb.setAttribute("aria-pressed", String(this.cbSafe));
     cb.innerHTML = '<svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>';
     this.els.zfit.parentElement.appendChild(cb);
-    let cbOn = !!this.opts.colorblindSafe;
     cb.addEventListener("click", () => {
-      cbOn = !cbOn;
-      cb.setAttribute("aria-pressed", String(cbOn));
-      this.controller.setColorblindSafe(cbOn);
+      this.cbSafe = !this.cbSafe;
+      cb.setAttribute("aria-pressed", String(this.cbSafe));
+      this.controller.setColorblindSafe(this.cbSafe);
+      writeStoredColorblind(this.cbSafe);
     });
     this.srEl = document.createElement("div");
     this.srEl.className = "sl-sr";
@@ -1634,9 +1834,11 @@ var SeatPicker = class _SeatPicker {
     this.buildPriceFilter();
     this.buildExtendPrompt();
     this.buildBookedOverlay();
+    this.buildSoldoutOverlay();
     this.dockLayoutChrome();
     await this.restoreRememberedHold();
     if (this.destroyed) return this;
+    if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
     return this;
@@ -1688,6 +1890,85 @@ var SeatPicker = class _SeatPicker {
     this.bookedEl = el;
     this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
   }
+  /**
+   * Localized string with a literal fallback. `t()` returns the key itself for
+   * unknown keys, so this collapses that to `fallback` — while still honoring a
+   * host `messages` override (which makes `t()` return the override, not the key).
+   */
+  tf(key, fallback) {
+    const v = t2(key);
+    return v === key ? fallback : v;
+  }
+  /** 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 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;
+  }
+  /**
+   * Recompute the sold-out state on every price/availability sync. Sold-out ⇔
+   * every SEATED category's live free count is 0. Suppressed when the chart has
+   * GA areas (GA capacity isn't per-seat, so seated counts would read 0 and
+   * falsely block standing room) — mirrors the public page. Clears live when WS
+   * frees a seat up.
+   */
+  syncSoldout(categories, left) {
+    const hasGA = this.controller.getGAAreas().length > 0;
+    const soldOut = this.isSoldOut(categories, left, hasGA);
+    if (soldOut === this.soldOut) return;
+    this.soldOut = soldOut;
+    this.soldoutEl?.classList.toggle("on", soldOut);
+  }
+  /**
+   * Pure sold-out predicate: every SEATED category's free count is 0, there is at
+   * least one seated category, and there are no GA areas (GA capacity isn't
+   * per-seat, so seated counts read 0 and would falsely block standing room).
+   * `left` is seeded implicitly — a missing key means a fully-booked tier (0 free).
+   */
+  isSoldOut(categories, left, hasGA) {
+    return !hasGA && categories.length > 0 && categories.every((c) => (left[c.key] ?? 0) === 0);
+  }
+  /**
+   * Sales-closed read-only state (Gap 3): persistent header pill, disabled CTA
+   * with a closed label, and frozen best-available / GA controls. `setSalesClosed`
+   * is the reactive entry (live 409 event_closed); `applySalesClosed` is the
+   * idempotent DOM apply used at load and on transition.
+   */
+  setSalesClosed(closed) {
+    if (this.salesClosed === closed) return;
+    this.salesClosed = closed;
+    this.applySalesClosed();
+  }
+  applySalesClosed() {
+    const pill = this.els.closedPill;
+    if (pill) {
+      pill.classList.toggle("on", this.salesClosed);
+      const text = this.els.closedPillText ?? pill;
+      text.textContent = this.tf("picker.salesClosedPill", "Sales are closed");
+    }
+    this.root?.setAttribute("data-sales-closed", String(this.salesClosed));
+    this.syncCta();
+    this.syncTray();
+  }
+  /** The badge is hidden when the host opts out OR the org's theme sets hideBadge. */
+  badgeHidden(chartTheme) {
+    return !!(this.opts.hideBadge || chartTheme?.hideBadge);
+  }
+  /** Attribution badge in the side-panel foot (Gap 7). Hidden per host/theme. */
+  buildBadge(chartTheme) {
+    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"><svg viewBox="0 0 24 24"><path d="M4 15c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3h-3v-2H7v2H4v-3Z"/><rect x="7" y="7" width="10" height="5" rx="1.6"/></svg></span><span>${this.tf("picker.poweredBy", "Powered by SeatLayer")}</span>`;
+    foot.appendChild(el);
+  }
   // ---- Feature 6: chrome anchor regions -------------------------------------
   /**
    * Create the positioned flex containers that own every persistent map overlay.
@@ -1800,13 +2081,18 @@ var SeatPicker = class _SeatPicker {
       heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
     }
     return gaAreas.reduce(
-      (sum, area) => sum + area.price * Math.max(0, (this.gaQty.get(area.id) ?? 0) - (heldGA.get(area.id) ?? 0)),
+      (sum, area) => sum + this.paidPrice(area.categoryKey, null, area.price) * Math.max(0, (this.gaQty.get(area.id) ?? 0) - (heldGA.get(area.id) ?? 0)),
       0
     );
   }
   syncCta(count = this.lastTrayCount, pending = this.pendingSelectionCount()) {
     const cta = this.els.cta;
     if (!cta) return;
+    if (this.salesClosed) {
+      cta.disabled = true;
+      cta.textContent = this.tf("picker.salesClosedCta", "Sales closed");
+      return;
+    }
     if (this.confirmSeat) {
       cta.disabled = true;
       cta.textContent = "Confirm or cancel this seat";
@@ -1942,7 +2228,6 @@ var SeatPicker = class _SeatPicker {
     canvas.style.height = `${h}px`;
     wrap.appendChild(canvas);
     (this.regions["bottom-left"] ?? this.els.map).appendChild(wrap);
-    this.miniEl = wrap;
     this.miniCanvas = canvas;
     const scale = Math.min((w - PAD * 2) / Math.max(1, b.width), (h - PAD * 2) / Math.max(1, b.height)) * dpr;
     const offX = (w * dpr - b.width * scale) / 2 - b.x * scale;
@@ -2055,9 +2340,11 @@ var SeatPicker = class _SeatPicker {
     this.controller.overview();
   }
   // ---- F4 price-band filter -------------------------------------------------
-  /** Effective price of a category (first tier when tiered, else base price). */
+  /** Effective display price of a category: host pricing override → first tier → base. */
   catPrice(c) {
-    return c.tiers?.length ? c.tiers[0].price : c.price;
+    const chart = c.tiers?.length ? c.tiers[0].price : c.price;
+    if (chart === void 0 || !c.key) return chart;
+    return this.paidPrice(c.key, c.tiers?.[0]?.id ?? null, chart);
   }
   /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
   priceBands() {
@@ -2102,7 +2389,6 @@ var SeatPicker = class _SeatPicker {
     select.setAttribute("aria-label", "Filter and focus seats by price");
     select.innerHTML = `<option value="all">All prices</option>` + bands.map((band) => `<option value="${band.id}">${band.label}</option>`).join("");
     this.els.pricesSec.appendChild(select);
-    this.priceFilterEl = select;
     select.addEventListener("change", () => {
       const band = bands.find((candidate) => candidate.id === select.value);
       const keys = band?.keys ?? null;
@@ -2206,7 +2492,10 @@ var SeatPicker = class _SeatPicker {
   renderSectionCard(summary) {
     if (!this.els.map) return;
     this.secCardEl?.remove();
-    const priceLabel = summary.priceMin === summary.priceMax ? this.money(summary.priceMin) : `${this.money(summary.priceMin)}\u2013${this.money(summary.priceMax)}`;
+    const paid = summary.categories.length ? summary.categories.map((c) => this.paidPrice(c.key, null, c.price)) : [summary.priceMin, summary.priceMax];
+    const paidMin = Math.min(...paid);
+    const paidMax = Math.max(...paid);
+    const priceLabel = paidMin === paidMax ? this.money(paidMin) : `${this.money(paidMin)}\u2013${this.money(paidMax)}`;
     const leftLabel = tCount("picker.seatsLeftInSection", summary.seatsLeft);
     const xBtn = `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button>`;
     const card = document.createElement("div");
@@ -2236,7 +2525,7 @@ var SeatPicker = class _SeatPicker {
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
       const mix = summary.categories.map((c) => {
         const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(c.price)}</span></span>`;
+        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(this.paidPrice(c.key, null, c.price))}</span></span>`;
       }).join("");
       card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
@@ -2303,7 +2592,7 @@ var SeatPicker = class _SeatPicker {
     const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
     const status = this.controller.getStatus(seat.id) ?? "free";
     const statusText = status === "free" ? "available" : status === "held" ? "on hold" : "taken";
-    const price = cat?.tiers?.length ? cat.tiers[0].price : cat?.price;
+    const price = cat ? this.catPrice(cat) : void 0;
     this.srEl.textContent = `Seat ${seat.label}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
   }
   // ---- seat candidate confirmation ------------------------------------------
@@ -2318,7 +2607,8 @@ var SeatPicker = class _SeatPicker {
     if (this.tipEl) this.tipEl.style.display = "none";
     const details = this.controller.seatDetails(seat.id);
     const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
-    const price = details?.price ?? (cat?.tiers?.length ? cat.tiers[0].price : cat?.price);
+    const chartPrice = details?.price ?? (cat?.tiers?.length ? cat.tiers[0].price : cat?.price);
+    const price = chartPrice != null ? this.paidPrice(seat.categoryKey, details?.tierId ?? cat?.tiers?.[0]?.id ?? null, chartPrice) : void 0;
     const safe = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
       "&": "&amp;",
       "<": "&lt;",
@@ -2331,7 +2621,7 @@ var SeatPicker = class _SeatPicker {
     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"><div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details?.sectionLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Row</span><span class="sl-confirm-value">${safe(details?.rowLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.label)}</span></div></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.seatViewEnabled() ? `<button type="button" class="sl-confirm-view"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>${t2("picker.open360")}</button>` : "") + `<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>`;
+    el.innerHTML = `<div class="sl-confirm-grid"><div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details?.sectionLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Row</span><span class="sl-confirm-value">${safe(this.rowShort(details))}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.label)}</span></div></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.seatViewEnabled() ? this.confirmThumbHtml(seat) : "") + `<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;
     this.reanchorConfirm();
@@ -2496,18 +2786,35 @@ var SeatPicker = class _SeatPicker {
   }
   // ---- chrome sync ----------------------------------------------------------
   money(n) {
+    const formatter = this.opts.pricing?.formatter;
+    if (formatter) return formatter(n, this.currency);
     try {
       return new Intl.NumberFormat(this.opts.locale, { style: "currency", currency: this.currency }).format(n);
     } catch {
       return `${n} ${this.currency}`;
     }
   }
+  /**
+   * The price the buyer will actually pay for a category (+tier): the host's
+   * `pricing` override when present, else the chart's stored price. Every
+   * price the widget DISPLAYS or hands off must flow through here — a map
+   * that shows one price while checkout charges another destroys trust.
+   */
+  paidPrice(categoryKey, tierId, fallback) {
+    const entry = categoryKey ? this.opts.pricing?.prices?.[categoryKey] : void 0;
+    if (entry === void 0) return fallback;
+    if (typeof entry === "number") return entry;
+    if (tierId && entry.tiers?.[tierId] !== void 0) return entry.tiers[tierId];
+    return entry.base ?? fallback;
+  }
   syncPrices() {
     const doc = this.controller.doc;
     if (!doc || !this.els.prices) return;
     const left = this.controller.categoryAvailability();
+    this.narrateAvailability(doc.categories, left);
+    this.syncSoldout(doc.categories, left);
     this.els.prices.innerHTML = doc.categories.map((c) => {
-      const price = c.tiers?.length ? c.tiers[0].price : c.price;
+      const price = this.catPrice(c);
       const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
       return `<div class="sl-price-row${dim ? " sl-dim" : ""}" data-cat="${c.key}"><span class="sl-dot" style="background:${c.color}"></span><span class="sl-price-label">${c.label}</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
     }).join("") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>Temporarily held</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>Sold</span></div>`;
@@ -2516,6 +2823,26 @@ var SeatPicker = class _SeatPicker {
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
     });
   }
+  /**
+   * Live-activity strip: turn WS availability deltas into one quiet line of
+   * social proof ("2 seats just taken in VIP · 118 left"). Diffs per-category
+   * counts on every status change — no per-seat payload needed. Skips the very
+   * first computation (initial load is not "activity").
+   */
+  narrateAvailability(categories, left) {
+    const textEl = this.els.liveText;
+    const prev = this.lastCatAvail;
+    this.lastCatAvail = { ...left };
+    if (!textEl || !prev) return;
+    for (const cat of categories) {
+      const before = prev[cat.key];
+      const now = left[cat.key] ?? 0;
+      if (before === void 0 || now >= before) continue;
+      const taken = before - now;
+      textEl.textContent = `${taken} seat${taken === 1 ? "" : "s"} just taken in ${cat.label} \xB7 ${now} left`;
+      return;
+    }
+  }
   /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
   evictTakenSelections() {
     const ownLabels = /* @__PURE__ */ new Set([
@@ -2544,15 +2871,23 @@ var SeatPicker = class _SeatPicker {
       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>`);
     }
+    const idGrid = (seatId, label) => {
+      const d = seatId ? this.controller.seatDetails(seatId) : null;
+      if (!d?.sectionLabel && !d?.rowLabel && !d?.seatNumber) {
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Seat</span><span class="val">${label}</span></span></div>`;
+      }
+      return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${d.sectionLabel ?? "\u2014"}</span></span>` + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">Row</span><span class="val">${this.rowShort(d)}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${d.seatNumber}</span></span>` : "") + `</div>`;
+    };
+    const iconRail = (rmAria, viewLabel) => `<div class="sl-chip-rail"><button type="button" class="rm" aria-label="${rmAria}"><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>` + (viewLabel ? `<button type="button" class="view" data-view-label="${viewLabel}" aria-label="${t2("picker.viewFromSeat", { label: viewLabel })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "") + `</div>`;
     for (const item of heldItems) {
       const itemKey = `held:${item.label}`;
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === item.categoryKey);
       const tierName = item.tierId ? cat?.tiers?.find((ti) => ti.id === item.tierId)?.name : void 0;
-      const canView2 = this.seatViewEnabled() && item.objectType !== "ga" && !!this.controller.seatByLabel(item.label);
-      const viewBtn = canView2 ? `<button type="button" class="view" data-view-label="${item.label}" aria-label="${t2("picker.viewFromSeat", { label: item.label })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "";
+      const heldSeat = item.objectType !== "ga" ? this.controller.seatByLabel(item.label) : null;
+      const canView2 = this.seatViewEnabled() && !!heldSeat;
       parts.push(
-        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><div class="sl-chip-main"><b>${item.label}</b><div class="sl-chip-sub"><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span>${viewBtn}</div></div><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span><button type="button" class="rm" aria-label="Remove held ticket ${item.label}"><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-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"${heldSeat ? ` data-locate="${heldSeat.id}"` : ""}><div class="sl-chip-main">` + idGrid(heldSeat?.id ?? null, item.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="amt">${this.money(this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1))}</span></div></div>` + iconRail(`Remove held ticket ${item.label}`, canView2 ? item.label : null) + `</div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
@@ -2561,16 +2896,15 @@ var SeatPicker = class _SeatPicker {
       const itemKey = `seat:${s.id}`;
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
-      const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(ti.price)}</option>`).join("") + `</select>` : "";
-      const viewBtn = canView ? `<button type="button" class="view" data-view-label="${s.label}" aria-label="${t2("picker.viewFromSeat", { label: s.label })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "";
+      const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(this.paidPrice(s.categoryKey, ti.id, ti.price))}</option>`).join("") + `</select>` : "";
       parts.push(
-        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><div class="sl-chip-main"><b>${s.label}</b><div class="sl-chip-sub"><span class="cat">${cat?.label ?? s.categoryKey}</span>${tierSelect}${viewBtn}</div></div><span class="amt">${this.money(s.price)}</span><button type="button" class="rm" aria-label="Remove ${s.label}"><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-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price))}</span></div></div>` + iconRail(`Remove ${s.label}`, canView ? s.label : null) + `</div>`
       );
     }
     for (const area of gaAreas) {
       const qty = this.gaQty.get(area.id) ?? 0;
       parts.push(
-        `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.label}</div><div class="sl-ga-sub">${this.money(area.price)} \xB7 ${area.available} left</div></div><div class="sl-ga-qty"><button type="button" data-d="-1" aria-label="Fewer">\u2212</button><span>${qty}</span><button type="button" data-d="1" aria-label="More">+</button></div></div>`
+        `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.label}</div><div class="sl-ga-sub">${this.money(this.paidPrice(area.categoryKey, null, area.price))} \xB7 ${area.available} left</div></div><div class="sl-ga-qty"><button type="button" data-d="-1" aria-label="Fewer">\u2212</button><span>${qty}</span><button type="button" data-d="1" aria-label="More">+</button></div></div>`
       );
     }
     this.els.tray.innerHTML = parts.join("");
@@ -2610,7 +2944,7 @@ var SeatPicker = class _SeatPicker {
           return;
         }
         const id = chip.dataset.seat;
-        const label = chip.querySelector("b")?.textContent ?? "Seat";
+        const label = this.controller.getSelection().find((sel) => sel.id === id)?.label ?? "Seat";
         const remove = () => {
           this.controller.deselect([id]);
           this.toast(`${label} removed.`, "neutral", {
@@ -2641,6 +2975,11 @@ var SeatPicker = class _SeatPicker {
         if (seat) this.openSeatView(seat);
       });
     });
+    this.els.tray.querySelectorAll(".sl-chip[data-locate]").forEach((chip) => {
+      const locate = () => this.controller.flashSeat(chip.dataset.locate, this.cssVar("--sl-accent") || "#f4b740");
+      chip.addEventListener("mouseenter", locate);
+      chip.addEventListener("focusin", locate);
+    });
     this.els.tray.querySelectorAll(".sl-ga button").forEach((btn) => {
       btn.addEventListener("click", () => {
         const areaEl = btn.closest(".sl-ga");
@@ -2653,12 +2992,17 @@ var SeatPicker = class _SeatPicker {
         this.syncTray();
       });
     });
+    if (this.salesClosed) {
+      this.els.tray.querySelectorAll(".sl-ba-go,[data-ba],[data-ba-cat],[data-ba-replace],.sl-ga button").forEach((el) => {
+        el.disabled = true;
+      });
+    }
     const gaTotal = this.pendingGATotal(gaAreas);
     const gaCount = this.pendingGACount();
-    const heldTotal = heldItems.reduce((sum, item) => sum + item.unitPrice * (item.quantity ?? 1), 0);
+    const heldTotal = heldItems.reduce((sum, item) => sum + this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1), 0);
     const heldCount = heldItems.reduce((sum, item) => sum + (item.quantity ?? 1), 0);
     const freshSeats = seats.filter((seat) => !heldLabels.has(seat.label));
-    const total = freshSeats.reduce((sum, s) => sum + s.price, 0) + gaTotal + heldTotal;
+    const total = freshSeats.reduce((sum, s) => sum + this.paidPrice(s.categoryKey, s.tierId ?? null, s.price), 0) + gaTotal + heldTotal;
     const count = freshSeats.length + gaCount + heldCount;
     const pendingCount = this.pendingSelectionCount();
     const previousCount = this.lastTrayCount;
@@ -2754,6 +3098,7 @@ var SeatPicker = class _SeatPicker {
     }
   }
   async handleCta() {
+    if (this.salesClosed) return;
     if (this.totalTicketCount() > this.maxTickets) {
       this.toast(`Remove tickets until your order has ${this.maxTickets} or fewer.`, "warning");
       return;
@@ -2797,6 +3142,7 @@ var SeatPicker = class _SeatPicker {
       this.opts.onError?.(err);
       const problem = err;
       const labels = (problem.conflicts ?? []).map((conflict) => conflict.label).filter(Boolean).slice(0, 3);
+      if (problem.reason === "event_closed") this.setSalesClosed(true);
       const message = problem.reason === "event_closed" ? "Seat sales have closed for this event." : labels.length ? `${labels.join(", ")} ${labels.length === 1 ? "is" : "are"} no longer available. Choose another ${labels.length === 1 ? "seat" : "group"}.` : "One or more seats were just taken. Please pick again.";
       this.toast(message, "error");
       this.setCtaPhase("idle");
@@ -2905,7 +3251,7 @@ var SeatPicker = class _SeatPicker {
       objectType: it.objectType,
       categoryKey: it.categoryKey,
       tierId: it.tierId,
-      unitPrice: it.unitPrice,
+      unitPrice: this.paidPrice(it.categoryKey, it.tierId, it.unitPrice),
       currency: it.currency ?? this.currency,
       quantity: it.quantity ?? 1
     }));
@@ -2958,19 +3304,37 @@ var SeatPicker = class _SeatPicker {
     this.tipEl.style.left = `${Math.max(8, x)}px`;
     this.tipEl.style.top = `${Math.max(8, y)}px`;
   }
+  /**
+   * Row label without the redundant section prefix. Charts commonly name row
+   * objects "104-A" while the Section column already shows "104" — so the Row
+   * cell repeats the section and, in the compact hover card, truncates to
+   * "10…". Strip a leading "<section><sep>" so Row reads a clean "A". Only when
+   * the prefix is exact (won't touch "1040-A" under section "104"); otherwise
+   * the label is shown verbatim.
+   */
+  rowShort(details) {
+    const row = details?.rowLabel;
+    const sec = details?.sectionLabel;
+    if (!row || !sec) return row;
+    for (const sep of ["-", " ", "\xB7", "/", "_"]) {
+      const prefix = `${sec}${sep}`;
+      if (row.startsWith(prefix) && row.length > prefix.length) return row.slice(prefix.length);
+    }
+    return row;
+  }
   updateTooltip(details) {
     if (!this.tipEl) return;
     if (!details) {
       this.tipEl.style.display = "none";
       return;
     }
-    const statusLine = details.status === "free" ? "" : `<div style="margin-top:5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
-    const location = [
-      details.sectionLabel ? `Section ${details.sectionLabel}` : "",
-      details.rowLabel ? `Row ${details.rowLabel}` : "",
-      details.seatNumber ? `Seat ${details.seatNumber}` : details.label
-    ].filter(Boolean).join(" \xB7 ");
-    this.tipEl.innerHTML = `<div style="font-weight:800;font-size:13px">${location}</div><div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:9px;height:9px;border-radius:50%;flex:none;background:${details.categoryColor}"></span><span style="opacity:.75">${details.categoryLabel}</span><span style="margin-left:auto;font-weight:800">${this.money(details.price)}</span></div>` + statusLine;
+    const esc2 = (v) => String(v ?? "\u2014").replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
+    const price = this.money(this.paidPrice(details.categoryKey, details.tierId ?? null, details.price));
+    const hasLoc = details.sectionLabel || details.rowLabel || details.seatNumber;
+    const grid = hasLoc ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Row</span><span class="sl-tip-val">${esc2(this.rowShort(details))}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.seatNumber ?? details.label)}</span></div></div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.label)}</span></div></div>`;
+    const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
+    this.tipEl.style.setProperty("--sl-cat", details.categoryColor);
+    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc2(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -2991,7 +3355,7 @@ var SeatPicker = class _SeatPicker {
     return this.removeHeldLabel(label);
   }
   async bestAvailable(qty, categoryKey) {
-    if (this.bestAvailableBusy) return null;
+    if (this.salesClosed || this.bestAvailableBusy) return null;
     qty = Math.max(1, Math.min(this.maxTickets, Math.floor(qty)));
     if (this.confirmSeat) this.cancelConfirm();
     this.bestAvailableConfirm = false;
@@ -3072,6 +3436,8 @@ var SeatPicker = class _SeatPicker {
     this.ro?.disconnect();
     this.ro = null;
     if (this.escHandler) document.removeEventListener("keydown", this.escHandler);
+    if (this.fsChangeHandler) document.removeEventListener("fullscreenchange", this.fsChangeHandler);
+    if (this.fsEscHandler) window.removeEventListener("keydown", this.fsEscHandler);
     this.controller.destroy();
     this.root?.remove();
     this.root = null;