@seatlayer/js 0.7.3 → 0.9.0

package/dist/index.js

@@ -57,6 +57,14 @@ var PubApi = class {
       body: { labels, holdId }
     });
   }
+  /** P4 "need more time?": push an active hold's expiry out. Throws ApiError 409
+   *  (reason: expired | extend_limit | not_found | not_active) if it can't. */
+  extend(key, holdId, ttlMs) {
+    return request(this.base, `/pub/events/${encodeURIComponent(key)}/extend`, {
+      method: "POST",
+      body: { holdId, ...ttlMs ? { ttlMs } : {} }
+    });
+  }
   socketUrl(key) {
     const wsBase = this.base.replace(/^http/, "ws");
     return `${wsBase}/pub/events/${encodeURIComponent(key)}/subscribe`;
@@ -378,12 +386,15 @@ var EmbeddedDesigner = class {
 import {
   PickerController as PickerController2,
   expandChart,
+  generateSeatPanorama,
   loadLocale as loadLocale2,
   setStringOverrides as setStringOverrides2,
-  t as t2
+  t as t2,
+  tCount
 } from "@seatlayer/core";
 var DEFAULT_API_BASE2 = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION2 = 10;
+var EXTEND_PROMPT_MS = 6e4;
 function resolveContainer3(container) {
   if (typeof container === "string") {
     const el = document.querySelector(container);
@@ -497,6 +508,30 @@ var CSS = `
 .sl-boot-retry{margin-top:4px;padding:9px 20px;border-radius:var(--sl-r-sm);background:var(--sl-accent);
   color:var(--sl-accent-ink);font-weight:700;font-size:13px}
 
+/* "Need more time?" extend prompt (bottom-center over the map, above the toast) */
+.sl-extend{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(6px);z-index:9;
+  display:none;align-items:center;gap:12px;max-width:92%;background:var(--sl-surface);border:1px solid var(--sl-line);
+  color:var(--sl-text);border-radius:14px;padding:10px 12px 10px 16px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);
+  opacity:0;transition:opacity .2s,transform .2s}
+.sl-extend.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
+.sl-extend-txt{font-size:12.5px;font-weight:600;line-height:1.35}
+.sl-extend-txt b{font-variant-numeric:tabular-nums}
+.sl-extend-btn{flex:none;padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;
+  background:var(--sl-accent);color:var(--sl-accent-ink);transition:filter .15s,opacity .15s}
+.sl-extend-btn:hover{filter:brightness(1.08)}
+.sl-extend-btn:disabled{opacity:.5;cursor:not-allowed}
+
+/* booked confirmation overlay (covers the widget once the held seats are sold) */
+.sl-booked{position:absolute;inset:0;z-index:11;display:none;flex-direction:column;align-items:center;
+  justify-content:center;gap:12px;text-align:center;padding:28px;background:var(--sl-bg)}
+.sl-booked.on{display:flex}
+.sl-booked-badge{width:60px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center;
+  background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-booked-badge svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-booked-title{font-weight:800;font-size:19px;color:var(--sl-text)}
+.sl-booked-sub{font-size:13px;color:var(--sl-muted);line-height:1.5;max-width:320px}
+.sl-booked-seats{font-weight:700;color:var(--sl-text)}
+
 /* a11y filter chips (over the map, top-left) */
 .sl-chips{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}
 .sl-chip-f{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;
@@ -530,6 +565,79 @@ var CSS = `
 /* 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}
 
+/* 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:7px;
+  font:inherit;font-size:11px;padding:3px 5px;max-width:130px;cursor:pointer}
+.sl-chip .view{width:24px;height:24px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
+  color:var(--sl-muted);transition:color .15s}
+.sl-chip .view:hover{color:var(--sl-text)}
+.sl-chip .view svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+
+/* arena: LOD rung pills (top-center over the map) */
+.sl-rungs{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;display:none;
+  background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:999px;padding:3px}
+.sl-rungs.on{display:inline-flex;gap:2px}
+.sl-rungs button{padding:6px 13px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
+  color:var(--sl-muted);white-space:nowrap;transition:color .15s}
+.sl-rungs button:hover{color:var(--sl-text)}
+.sl-rungs button.on{background:var(--sl-accent);color:var(--sl-accent-ink)}
+
+/* multi-floor switcher (center-left rail over the map) */
+.sl-floors{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:5;display:none;
+  flex-direction:column;gap:6px;max-width:42%}
+.sl-floors.on{display:flex}
+.sl-floors button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;background:var(--sl-surface);
+  border:1px solid var(--sl-line);color:var(--sl-muted);white-space:nowrap;max-width:100%;overflow:hidden;
+  text-overflow:ellipsis;transition:color .15s,border-color .15s}
+.sl-floors button:hover{color:var(--sl-text)}
+.sl-floors button.on{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
+
+/* tapped-section summary card (top-center, under the rung pills) */
+.sl-seccard{position:absolute;top:54px;left:50%;transform:translateX(-50%);z-index:6;width:250px;
+  max-width:calc(100% - 24px);background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:12px;
+  padding:12px 14px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);display:none}
+.sl-seccard.on{display:block}
+.sl-seccard-head{display:flex;align-items:center;gap:8px}
+.sl-seccard-dot{width:10px;height:10px;border-radius:50%;flex:none}
+.sl-seccard-name{font-weight:800;font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-seccard-price{font-weight:800;font-size:12.5px;font-variant-numeric:tabular-nums}
+.sl-seccard-x{width:22px;height:22px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
+  color:var(--sl-muted);font-size:12px}
+.sl-seccard-x:hover{color:var(--sl-text)}
+.sl-seccard-zone{font-size:11.5px;color:var(--sl-muted);margin-top:6px}
+.sl-seccard-left{color:var(--sl-text);font-weight:700}
+.sl-seccard-mix{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:8px}
+.sl-seccard-mix-item{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--sl-muted)}
+.sl-seccard-mix-dot{width:8px;height:8px;border-radius:50%;flex:none}
+.sl-seccard-mix-price{font-weight:700;color:var(--sl-text)}
+.sl-seccard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
+.sl-seccard-overview{font-size:12px;font-weight:800;color:var(--sl-accent)}
+.sl-seccard-hint{font-size:10.5px;color:var(--sl-muted)}
+
+/* view-from-seat button on the confirm popover */
+.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)}
+.sl-confirm-view svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+
+/* 360\xB0 seat-view modal (fills the widget; drag-to-look-around equirectangular) */
+.sl-view{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;background:var(--sl-bg)}
+.sl-view-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--sl-line);flex:none}
+.sl-view-title{font-weight:800;font-size:15px}
+.sl-view-cap{font-size:11px;color:var(--sl-muted)}
+.sl-view-x{margin-left:auto;width:32px;height:32px;border-radius:999px;border:1px solid var(--sl-line);color:var(--sl-muted);
+  flex:none;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s}
+.sl-view-x:hover{color:var(--sl-text);border-color:var(--sl-muted)}
+.sl-view-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
+.sl-view-pano{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;background-color:#05070c;
+  background-repeat:repeat-x;touch-action:none;user-select:none}
+.sl-view-pano.drag{cursor:grabbing}
+.sl-view-badge{position:absolute;top:12px;left:12px;padding:5px 11px;border-radius:999px;font-size:10px;font-weight:800;
+  letter-spacing:.08em;background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-muted)}
+.sl-view-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:6px 14px;border-radius:999px;
+  font-size:11.5px;font-weight:600;background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-muted);
+  white-space:nowrap;pointer-events:none;max-width:90%;overflow:hidden;text-overflow:ellipsis}
+
 /* modal host */
 .sl-modal-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(5,7,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
 .sl-modal-frame{width:min(1200px,100%);height:min(820px,100%);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
@@ -571,6 +679,14 @@ var SeatPicker = class _SeatPicker {
     // state
     this.currency = "USD";
     this.hold = null;
+    /** Latest server expiry for the open hold (moves on extend). */
+    this.holdExpiresAt = 0;
+    /** True once we handed off to checkout — arms booked-confirmation detection. */
+    this.handedOff = false;
+    /** Guards single onBooked + single success overlay per hold. */
+    this.bookedShown = false;
+    this.extendEl = null;
+    this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
@@ -580,6 +696,13 @@ var SeatPicker = class _SeatPicker {
     this.a11yFilter = "all";
     this.baQty = 2;
     this.baCat = "";
+    // arena / multi-floor / seat-view chrome
+    this.rungsEl = null;
+    this.floorsEl = null;
+    this.secCardEl = null;
+    this.viewEl = null;
+    this.viewCleanup = null;
+    this.allSeatsCache = null;
     // modal plumbing (set by open())
     this.modalScrim = null;
     this.prevFocus = null;
@@ -602,9 +725,12 @@ var SeatPicker = class _SeatPicker {
       onStatusChange: () => {
         this.syncPrices();
         this.evictTakenSelections();
+        this.detectBooked();
       },
       onHoldExpired: () => {
         this.hold = null;
+        this.handedOff = false;
+        this.bookedShown = false;
         this.stopHoldTimer();
         this.gaQty.clear();
         this.toast(t2("picker.holdExpired", void 0) || "Your hold expired \u2014 seats released. Pick again.");
@@ -615,7 +741,12 @@ var SeatPicker = class _SeatPicker {
       onSelect: (seat) => {
         if (this.opts.confirmSelection) this.showConfirm(seat);
       },
-      onViewChange: () => this.reanchorConfirm(),
+      onViewChange: () => {
+        this.reanchorConfirm();
+        this.syncRung();
+      },
+      // Tapped-section glide-in → surface (or clear) the section-summary card.
+      onSectionFocus: (summary) => this.showSectionCard(summary),
       onFocusSeat: (seat) => this.announceSeat(seat),
       onSeatHover: (d) => this.updateTooltip(d),
       onHint: (m) => {
@@ -807,10 +938,130 @@ var SeatPicker = class _SeatPicker {
     this.srEl.className = "sl-sr";
     this.srEl.setAttribute("aria-live", "polite");
     root.appendChild(this.srEl);
+    this.buildArenaChrome();
+    this.buildExtendPrompt();
+    this.buildBookedOverlay();
     this.syncPrices();
     this.syncTray();
     return this;
   }
+  /** The "Need more time?" prompt shown in the hold's final EXTEND_PROMPT_MS. */
+  buildExtendPrompt() {
+    const el = document.createElement("div");
+    el.className = "sl-extend";
+    el.setAttribute("role", "status");
+    el.innerHTML = `<span class="sl-extend-txt" data-ref="extendTxt"></span><button type="button" class="sl-extend-btn" data-ref="extendBtn"></button>`;
+    this.els.map.appendChild(el);
+    this.extendEl = el;
+    this.els.extendTxt = el.querySelector('[data-ref="extendTxt"]');
+    this.els.extendBtn = el.querySelector('[data-ref="extendBtn"]');
+    this.els.extendBtn.textContent = "Add time";
+    this.els.extendBtn.addEventListener("click", () => void this.handleExtend());
+  }
+  /** Success overlay + onBooked fire when the held seats settle to booked. */
+  buildBookedOverlay() {
+    const el = document.createElement("div");
+    el.className = "sl-booked";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-live", "polite");
+    el.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">You're all set</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
+    this.root.appendChild(el);
+    this.bookedEl = el;
+    this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
+  }
+  // ---- arena / multi-floor chrome -------------------------------------------
+  /** Build the rung pills (charts with sections) and floor switcher (>1 floor). */
+  buildArenaChrome() {
+    const doc = this.controller.doc;
+    if (!doc || !this.els.map) return;
+    const hasSections = doc.objects.some((o) => o.type === "section") || (doc.floors ?? []).some((f) => f.objects.some((o) => o.type === "section"));
+    if (hasSections) {
+      const RUNGS = ["zones", "sections", "seats"];
+      const pills = document.createElement("div");
+      pills.className = "sl-rungs on";
+      pills.setAttribute("role", "group");
+      pills.setAttribute("aria-label", t2("picker.zoomLevel"));
+      const LABEL = {
+        zones: t2("picker.rungLabel.zones"),
+        sections: t2("picker.rungLabel.sections"),
+        seats: t2("picker.rungLabel.seats")
+      };
+      const TIP = {
+        zones: t2("picker.rungTip.zones"),
+        sections: t2("picker.rungTip.sections"),
+        seats: t2("picker.rungTip.seats")
+      };
+      pills.innerHTML = RUNGS.map(
+        (r) => `<button type="button" data-rung="${r}" title="${TIP[r]}" aria-pressed="false">${LABEL[r]}</button>`
+      ).join("");
+      pills.querySelectorAll("button").forEach((btn) => {
+        btn.addEventListener("click", () => this.controller.setRung(btn.dataset.rung));
+      });
+      this.els.map.appendChild(pills);
+      this.rungsEl = pills;
+      this.syncRung();
+    }
+    if (this.controller.isMultiFloor()) {
+      const floors = this.controller.getFloors();
+      const rail = document.createElement("div");
+      rail.className = "sl-floors on";
+      rail.setAttribute("role", "group");
+      rail.setAttribute("aria-label", t2("picker.floor"));
+      rail.innerHTML = floors.map((f) => `<button type="button" data-floor="${f.id}">${f.name}</button>`).join("");
+      rail.querySelectorAll("button").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          this.controller.setFloor(btn.dataset.floor);
+          this.showSectionCard(null);
+          this.syncFloors();
+          this.syncRung();
+        });
+      });
+      this.els.map.appendChild(rail);
+      this.floorsEl = rail;
+      this.syncFloors();
+    }
+  }
+  /** Reflect the engine's current LOD rung onto the pill group. */
+  syncRung() {
+    if (!this.rungsEl) return;
+    const active = this.controller.getRung();
+    this.rungsEl.querySelectorAll("button").forEach((btn) => {
+      const on = btn.dataset.rung === active;
+      btn.classList.toggle("on", on);
+      btn.setAttribute("aria-pressed", String(on));
+    });
+  }
+  /** Reflect the active floor onto the switcher rail. */
+  syncFloors() {
+    if (!this.floorsEl) return;
+    const active = this.controller.getActiveFloorId();
+    this.floorsEl.querySelectorAll("button").forEach((btn) => {
+      btn.classList.toggle("on", btn.dataset.floor === active);
+    });
+  }
+  /** Show (or clear, on null) the tapped-section summary card. */
+  showSectionCard(summary) {
+    if (!summary) {
+      this.secCardEl?.remove();
+      this.secCardEl = null;
+      return;
+    }
+    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 card = document.createElement("div");
+    card.className = "sl-seccard on";
+    card.setAttribute("role", "dialog");
+    card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
+    const mix = summary.categories.map(
+      (c) => `<span class="sl-seccard-mix-item"><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>`
+    ).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>` : "") + `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button></div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${tCount("picker.seatsLeftInSection", summary.seatsLeft)}</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());
+    card.querySelector(".sl-seccard-overview").addEventListener("click", () => this.controller.overview());
+    this.els.map.appendChild(card);
+    this.secCardEl = card;
+  }
   /** aria-live readout when keyboard focus lands on a seat. */
   announceSeat(seat) {
     if (!this.srEl) return;
@@ -832,11 +1083,12 @@ var SeatPicker = class _SeatPicker {
     const price = cat?.tiers?.length ? cat.tiers[0].price : cat?.price;
     const el = document.createElement("div");
     el.className = "sl-confirm";
-    el.innerHTML = `<div class="sl-confirm-label">${seat.label}</div><div class="sl-confirm-meta"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span>${cat?.label ?? seat.categoryKey}${price != null ? `<b>${this.money(price)}</b>` : ""}</div><div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add">Add seat</button></div>`;
+    el.innerHTML = `<div class="sl-confirm-label">${seat.label}</div><div class="sl-confirm-meta"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span>${cat?.label ?? seat.categoryKey}${price != null ? `<b>${this.money(price)}</b>` : ""}</div>` + (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">Add seat</button></div>`;
     this.els.map.appendChild(el);
     this.confirmEl = el;
     this.confirmSeat = seat;
     this.reanchorConfirm();
+    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => this.openSeatView(seat));
     el.querySelector(".sl-confirm-add").addEventListener("click", () => this.closeConfirm());
     el.querySelector(".sl-confirm-cancel").addEventListener("click", () => {
       this.controller.deselect([seat.id]);
@@ -854,6 +1106,122 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = null;
   }
+  // ---- 360° view-from-seat modal --------------------------------------------
+  seatViewEnabled() {
+    return this.opts.seatView !== false;
+  }
+  /** Every bookable seat (cached) — neighbor heads for the generated panorama. */
+  allSeats() {
+    if (!this.allSeatsCache) {
+      const doc = this.controller.doc;
+      this.allSeatsCache = doc ? expandChart(doc) : [];
+    }
+    return this.allSeatsCache;
+  }
+  /**
+   * Open the drag-to-look-around 360° preview for a seat. Uses the organizer's
+   * uploaded photo (seat.viewUrl) when present, else a panorama generated from
+   * the chart geometry — the stage placed at this seat's true bearing + size.
+   * Zero extra dependencies: an equirectangular image panned with `repeat-x`.
+   */
+  openSeatView(seat) {
+    if (!this.root || !this.seatViewEnabled()) return;
+    this.closeSeatView();
+    this.closeConfirm();
+    const doc = this.controller.doc;
+    const activeId = this.controller.getActiveFloorId();
+    const focal = doc?.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc?.focalPoint ?? { x: 0, y: 0 };
+    let panoUrl;
+    let caption;
+    let real = false;
+    if (seat.viewUrl) {
+      panoUrl = seat.viewUrl;
+      caption = t2("picker.panorama360");
+      real = true;
+    } else {
+      const pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      panoUrl = pano2.url;
+      caption = t2("picker.illustrationCaption", { m: pano2.distanceM });
+    }
+    const el = document.createElement("div");
+    el.className = "sl-view";
+    el.setAttribute("role", "dialog");
+    el.setAttribute("aria-label", t2("picker.viewFromSeat", { label: seat.label }));
+    el.innerHTML = `<div class="sl-view-head"><span class="sl-view-title">${t2("picker.viewFromSeat", { label: seat.label })}</span><span class="sl-view-cap">${caption}</span><button type="button" class="sl-view-x" aria-label="Close"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="sl-view-pano"><span class="sl-view-badge">${real ? t2("picker.real360") : t2("picker.preview")}</span><span class="sl-view-hint">Drag to look around \xB7 scroll to zoom</span></div>`;
+    this.root.appendChild(el);
+    this.viewEl = el;
+    const pano = el.querySelector(".sl-view-pano");
+    pano.style.backgroundImage = `url("${panoUrl}")`;
+    let zoom = 1.2;
+    let posX = 0;
+    let posY = 0;
+    const apply = () => {
+      const h = pano.clientHeight || 1;
+      const bgH = h * zoom;
+      const overV = Math.max(0, bgH - h);
+      posY = Math.min(overV / 2, Math.max(-overV / 2, posY));
+      pano.style.backgroundSize = `auto ${bgH}px`;
+      pano.style.backgroundPosition = `${posX}px ${posY + overV / 2}px`;
+    };
+    apply();
+    let dragging = false;
+    let lastX = 0;
+    let lastY = 0;
+    const onDown = (e) => {
+      dragging = true;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      pano.classList.add("drag");
+      pano.setPointerCapture?.(e.pointerId);
+    };
+    const onMove = (e) => {
+      if (!dragging) return;
+      posX += e.clientX - lastX;
+      posY += e.clientY - lastY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      apply();
+    };
+    const onUp = (e) => {
+      dragging = false;
+      pano.classList.remove("drag");
+      pano.releasePointerCapture?.(e.pointerId);
+    };
+    const onWheel = (e) => {
+      e.preventDefault();
+      zoom = Math.min(2.4, Math.max(1, zoom + (e.deltaY < 0 ? 0.12 : -0.12)));
+      apply();
+    };
+    pano.addEventListener("pointerdown", onDown);
+    pano.addEventListener("pointermove", onMove);
+    pano.addEventListener("pointerup", onUp);
+    pano.addEventListener("pointercancel", onUp);
+    pano.addEventListener("wheel", onWheel, { passive: false });
+    const closeBtn = el.querySelector(".sl-view-x");
+    closeBtn.addEventListener("click", () => this.closeSeatView());
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        this.closeSeatView();
+      }
+    };
+    el.addEventListener("keydown", onKey);
+    closeBtn.focus();
+    this.viewCleanup = () => {
+      pano.removeEventListener("pointerdown", onDown);
+      pano.removeEventListener("pointermove", onMove);
+      pano.removeEventListener("pointerup", onUp);
+      pano.removeEventListener("pointercancel", onUp);
+      pano.removeEventListener("wheel", onWheel);
+      el.removeEventListener("keydown", onKey);
+    };
+  }
+  closeSeatView() {
+    this.viewCleanup?.();
+    this.viewCleanup = null;
+    this.viewEl?.remove();
+    this.viewEl = null;
+  }
   // ---- chrome sync ----------------------------------------------------------
   money(n) {
     try {
@@ -896,15 +1264,20 @@ var SeatPicker = class _SeatPicker {
     }
     for (const item of heldItems) {
       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);
       parts.push(
-        `<div class="sl-chip"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}</span><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span></div>`
+        `<div class="sl-chip"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span>` + (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>` : "") + `</div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
+    const canView = this.seatViewEnabled();
     for (const s of seats.filter((seat) => !heldLabels.has(seat.label))) {
       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>` : "";
       parts.push(
-        `<div class="sl-chip" data-seat="${s.id}"><b>${s.label}</b><span class="cat">${cat?.label ?? s.categoryKey}</span><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" data-seat="${s.id}"><b>${s.label}</b><span class="cat">${cat?.label ?? s.categoryKey}</span>` + tierSelect + `<span class="amt">${this.money(s.price)}</span>` + viewBtn + `<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>`
       );
     }
     for (const area of gaAreas) {
@@ -938,6 +1311,15 @@ var SeatPicker = class _SeatPicker {
         this.controller.deselect([id]);
       });
     });
+    this.els.tray.querySelectorAll(".sl-chip .tier").forEach((sel) => {
+      sel.addEventListener("change", () => this.controller.setSeatTier(sel.dataset.tier, sel.value || null));
+    });
+    this.els.tray.querySelectorAll(".sl-chip .view[data-view-label]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const seat = this.controller.seatByLabel(btn.dataset.viewLabel);
+        if (seat) this.openSeatView(seat);
+      });
+    });
     this.els.tray.querySelectorAll(".sl-ga button").forEach((btn) => {
       btn.addEventListener("click", () => {
         const areaEl = btn.closest(".sl-ga");
@@ -965,7 +1347,9 @@ var SeatPicker = class _SeatPicker {
   async handleCta() {
     const cta = this.els.cta;
     if (this.hold && !this.controller.getSelection().some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
-      this.opts.onCheckout?.(this.hold, this.hold.seats ?? this.controller.getSelection());
+      const seats = this.hold.seats ?? this.controller.getSelection();
+      this.handedOff = true;
+      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
       return;
     }
     cta.disabled = true;
@@ -988,8 +1372,9 @@ var SeatPicker = class _SeatPicker {
         return;
       }
       this.hold = hold;
+      this.handedOff = true;
       this.startHoldTimer(hold.expiresAt);
-      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? []);
+      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? [], this.buildHandoff(hold));
     } catch (err) {
       this.opts.onError?.(err);
       this.toast("One or more seats were just taken. Please pick again.");
@@ -999,13 +1384,15 @@ var SeatPicker = class _SeatPicker {
   }
   startHoldTimer(expiresAt) {
     this.stopHoldTimer();
+    this.holdExpiresAt = expiresAt;
     const pill = this.els.hold;
     const tick = () => {
-      const ms = Math.max(0, expiresAt - Date.now());
+      const ms = Math.max(0, this.holdExpiresAt - Date.now());
       const m = Math.floor(ms / 6e4);
       const s = String(Math.floor(ms % 6e4 / 1e3)).padStart(2, "0");
       pill.textContent = `Held ${m}:${s}`;
       pill.classList.add("on");
+      this.setExtendPrompt(ms > 0 && ms <= EXTEND_PROMPT_MS, ms);
       if (ms <= 0) this.stopHoldTimer();
     };
     tick();
@@ -1015,6 +1402,83 @@ var SeatPicker = class _SeatPicker {
     if (this.holdTimer) clearInterval(this.holdTimer);
     this.holdTimer = null;
     this.els.hold?.classList.remove("on");
+    this.setExtendPrompt(false, 0);
+  }
+  /** Show/refresh (or hide) the "Need more time?" prompt with the live seconds left. */
+  setExtendPrompt(show, ms) {
+    if (!this.extendEl) return;
+    if (show && this.controller.currentHold() && !this.bookedShown) {
+      const secs = Math.ceil(ms / 1e3);
+      this.els.extendTxt.innerHTML = `Your seats are held for <b>0:${String(secs).padStart(2, "0")}</b>. Need more time?`;
+      this.extendEl.classList.add("on");
+    } else {
+      this.extendEl.classList.remove("on");
+    }
+  }
+  async handleExtend() {
+    const btn = this.els.extendBtn;
+    btn.disabled = true;
+    const prev = btn.textContent;
+    btn.textContent = "Adding\u2026";
+    try {
+      const h = await this.controller.extendHold(this.opts.holdTtlMs);
+      if (h) {
+        this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
+        this.holdExpiresAt = h.expiresAt;
+        this.extendEl?.classList.remove("on");
+        this.toast("More time added \u2014 your seats are still held.");
+      } else {
+        this.toast("Couldn't add more time \u2014 please head to checkout now.");
+      }
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Couldn't add more time \u2014 please head to checkout now.");
+    } finally {
+      btn.disabled = false;
+      btn.textContent = prev;
+    }
+  }
+  /**
+   * Fire the booked-confirmation state once the buyer's held seats settle to
+   * booked. The controller clears its own hold the moment every held label reads
+   * 'booked' over the realtime channel (clearBookedHoldIfSettled), and this runs
+   * on the same onStatusChange — so `currentHold() === null` while we still hold
+   * a checkout handoff means "sold", not expired (expiry clears via onHoldExpired
+   * on a different path, which nulls this.hold first).
+   */
+  detectBooked() {
+    if (this.bookedShown || !this.handedOff || !this.hold) return;
+    if (this.controller.currentHold() !== null) return;
+    this.showBooked();
+  }
+  showBooked() {
+    if (this.bookedShown || !this.hold) return;
+    this.bookedShown = true;
+    const handoff = this.buildHandoff(this.hold);
+    this.stopHoldTimer();
+    const n = handoff.lineItems.reduce((sum, i) => sum + i.quantity, 0);
+    if (this.els.bookedSub) {
+      this.els.bookedSub.innerHTML = `<span class="sl-booked-seats">${n} ${n === 1 ? "ticket" : "tickets"}</span> confirmed. A confirmation is on its way.`;
+    }
+    this.bookedEl?.classList.add("on");
+    this.opts.onBooked?.(handoff);
+  }
+  /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
+  buildHandoff(hold) {
+    const items = hold.items ?? [];
+    const lineItems = items.map((it) => ({
+      label: it.label,
+      objectId: it.objectId,
+      objectType: it.objectType,
+      categoryKey: it.categoryKey,
+      tierId: it.tierId,
+      unitPrice: it.unitPrice,
+      currency: it.currency ?? this.currency,
+      quantity: it.quantity ?? 1
+    }));
+    const currency = lineItems[0]?.currency ?? this.currency;
+    const total = lineItems.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
+    return { holdId: hold.holdId, expiresAt: hold.expiresAt, currency, lineItems, total };
   }
   toast(msg) {
     const el = this.els.toast;
@@ -1056,6 +1520,8 @@ var SeatPicker = class _SeatPicker {
       const h = await this.controller.bestAvailable(qty, categoryKey);
       if (h) {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
+        this.handedOff = false;
+        this.bookedShown = false;
         this.startHoldTimer(h.expiresAt);
         this.syncTray();
         return this.hold;
@@ -1069,6 +1535,8 @@ var SeatPicker = class _SeatPicker {
   async release() {
     await this.controller.release();
     this.hold = null;
+    this.handedOff = false;
+    this.bookedShown = false;
     this.stopHoldTimer();
     this.gaQty.clear();
     this.syncTray();
@@ -1076,6 +1544,7 @@ var SeatPicker = class _SeatPicker {
   destroy() {
     this.destroyed = true;
     this.closeConfirm();
+    this.closeSeatView();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.ro?.disconnect();