@seatlayer/js 0.27.0 → 0.28.0

package/dist/index.js

@@ -1035,6 +1035,7 @@ var EmbeddedDesigner = class {
 // src/SeatPicker.ts
 import {
   PickerController as PickerController2,
+  ACCESSIBILITY_TYPES,
   expandChart,
   generateSeatPanorama,
   generateSeatThumb,
@@ -1065,6 +1066,15 @@ function resolveContainer3(container) {
   }
   return container;
 }
+function escapeOption(value) {
+  return String(value ?? "").replace(/[&<>"']/g, (character) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  })[character]);
+}
 var STYLE_ID = "seatlayer-picker-style";
 var CSS = `
 .sl-picker{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:420px;overflow:hidden;
@@ -1176,6 +1186,11 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-filters.has{display:none}
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec.has,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters.has{display:none}
+/* Accessibility and colour-safety controls must remain reachable on phones.
+   Keep them out of the 86px peek, then reveal their consolidated row whenever
+   the buyer explicitly opens the ticket panel. */
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filtersec.has{display:block!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-filters.has{display:flex!important}
 .sl-cbbtn{width:32px;height:32px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-cbbtn:hover{border-color:var(--sl-muted)}
@@ -1468,6 +1483,37 @@ 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}
 
+/* Atomic whole/variable-table chooser. Lives inside the widget so the same
+   accessible dialog works in inline, modal, desktop and 390px mobile hosts. */
+.sl-table-scrim{position:absolute;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;padding:18px;
+  background:color-mix(in srgb,var(--sl-bg) 66%,transparent);backdrop-filter:blur(3px)}
+.sl-table-dialog{width:min(408px,100%);max-height:calc(100% - 24px);overflow:auto;border:1px solid var(--sl-line);
+  border-radius:calc(var(--sl-radius) * 1.15);background:var(--sl-surface);box-shadow:0 28px 70px rgba(0,0,0,.42)}
+.sl-table-head{padding:18px 18px 14px;border-bottom:1px solid var(--sl-line)}
+.sl-table-eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-table-title{margin-top:5px;font-size:22px;line-height:1.15;font-weight:850}
+.sl-table-copy{margin-top:7px;color:var(--sl-muted);font-size:13px;line-height:1.45}
+.sl-table-body{padding:16px 18px 18px}
+.sl-table-summary{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:12px;border:1px solid var(--sl-line);
+  border-radius:var(--sl-r-sm);background:color-mix(in srgb,var(--sl-line) 22%,transparent);font-size:13px}
+.sl-table-summary b{font-size:15px}.sl-table-summary .muted{color:var(--sl-muted)}
+.sl-table-qtylabel{display:block;margin:16px 0 8px;font-size:12px;font-weight:800}
+.sl-table-stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border:1px solid var(--sl-line);
+  border-radius:12px;overflow:hidden;background:var(--sl-bg)}
+.sl-table-stepper button{height:48px;font-size:24px;font-weight:700;background:color-mix(in srgb,var(--sl-line) 34%,transparent)!important}
+.sl-table-stepper button:disabled{opacity:.38;cursor:not-allowed}
+.sl-table-stepper output{text-align:center;font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}
+.sl-table-range{margin-top:7px;color:var(--sl-muted);font-size:11px;text-align:center}
+.sl-table-actions{display:flex;gap:9px;margin-top:17px}.sl-table-actions button{flex:1;min-height:46px;border-radius:10px;font-weight:800}
+.sl-table-cancel{border:1px solid var(--sl-line)!important;color:var(--sl-muted)!important}
+.sl-table-confirm{background:var(--sl-accent)!important;color:var(--sl-accent-ink)!important}
+.sl-table-confirm:disabled{opacity:.62;cursor:wait}
+.sl-table-edit{margin-left:4px;padding:2px 7px!important;border:1px solid var(--sl-line)!important;border-radius:999px!important;
+  color:var(--sl-muted)!important;font-size:10px!important;font-weight:800!important}
+.sl-picker[data-layout="narrow"] .sl-table-scrim{align-items:flex-end;padding:0;background:rgba(5,7,12,.58)}
+.sl-picker[data-layout="narrow"] .sl-table-dialog{width:100%;max-height:min(78%,620px);border-radius:18px 18px 0 0;border-width:1px 0 0}
+.sl-picker[data-layout="narrow"] .sl-table-head{padding-top:22px}.sl-picker[data-layout="narrow"] .sl-table-body{padding-bottom:max(20px,env(safe-area-inset-bottom))}
+
 /* 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
@@ -1531,6 +1577,7 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-ba{padding:11px}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .wide{display:none}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .narrow{display:inline}
+.sl-picker[data-layout="narrow"] .sl-ba select{min-height:44px}
 
 /* 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}
@@ -1549,6 +1596,16 @@ var CSS = `
 /* narrow: shrink the rung pills so the centered row can't reach the corner regions */
 .sl-picker[data-layout="narrow"] .sl-rungs button{padding:5px 9px;font-size:9px;letter-spacing:.03em}
 
+/* Projection is deliberately a separate control from zoom/LOD. Perspective
+   changes geometry; the two choices stay explicit and keyboard-native. */
+.sl-projection{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
+  background:var(--sl-surface);border:1px solid var(--sl-line);box-shadow:0 8px 24px -16px rgba(0,0,0,.65)}
+.sl-projection button{min-width:42px;min-height:30px;padding:5px 10px;border-radius:999px;color:var(--sl-muted);
+  font-size:10px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
+.sl-projection button:hover,.sl-projection button:focus-visible{color:var(--sl-text)}
+.sl-projection button.on{background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-picker[data-layout="narrow"] .sl-projection button{min-width:38px;min-height:32px;padding:5px 8px;font-size:9.5px}
+
 /* multi-floor switcher (flows within the left-rail region) */
 .sl-floors{display:none;flex-direction:column;gap:6px;max-width:100%}
 .sl-floors.on{display:flex}
@@ -1677,6 +1734,7 @@ var CSS = `
   .sl-picker *,.sl-modal-scrim *{animation-duration:.001ms!important;animation-iteration-count:1!important;
     transition-duration:.001ms!important;scroll-behavior:auto!important}
 }
+.sl-ba [data-ba-zone]{grid-column:1/-1;width:100%}
 
 /* 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}
@@ -1752,9 +1810,15 @@ var SeatPicker = class _SeatPicker {
     this.tipPos = { x: 0, y: 0 };
     this.confirmEl = null;
     this.confirmSeat = null;
+    this.tableDialogEl = null;
+    this.tableDialog = null;
+    this.tableDialogHeld = false;
+    this.tableDialogReturnFocus = null;
     this.srEl = null;
     this.baQty = 2;
     this.baCat = "";
+    /** Optional navigation-zone scope for buyer best-available. */
+    this.baZone = "";
     /** "★ Best seats" premium quick-pick toggle — biases best-available to premium seats. */
     this.baPremium = false;
     this.bestAvailableConfirm = false;
@@ -1768,6 +1832,7 @@ var SeatPicker = class _SeatPicker {
     this.cbSafe = false;
     // arena / multi-floor / seat-view chrome
     this.rungsEl = null;
+    this.projectionEl = null;
     this.floorsEl = null;
     this.secCardEl = null;
     this.viewEl = null;
@@ -1863,11 +1928,21 @@ var SeatPicker = class _SeatPicker {
           this.toast(this.tf("picker.salesClosedToast", "Sales are closed for this event."), "warning");
           return;
         }
+        if (this.controller.tableSelection(seat.id)) return;
         this.flashPickedSeat(seat.id);
         if (this.opts.confirmSelection) this.showConfirm(seat);
       },
+      onTableSelectionRequest: (table) => {
+        if (this.salesClosed) {
+          this.controller.deselect(table.physicalSeatIds);
+          this.toast(this.tf("picker.salesClosedToast", "Sales are closed for this event."), "warning");
+          return;
+        }
+        this.showTableDialog(table, false);
+      },
       onDeselect: (seat) => {
         if (this.confirmSeat?.id === seat.id) this.dismissConfirm();
+        if (this.tableDialog?.physicalSeatIds.includes(seat.id)) this.dismissTableDialog();
       },
       onSelectionLimit: () => {
         this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
@@ -1875,6 +1950,7 @@ var SeatPicker = class _SeatPicker {
       onViewChange: () => {
         this.reanchorConfirm();
         this.syncRung();
+        this.syncProjection();
         this.drawMinimapRect();
         this.sectionCardOnView();
       },
@@ -1891,27 +1967,47 @@ var SeatPicker = class _SeatPicker {
       onError: (err) => this.opts.onError?.(err)
     });
   }
+  /** True when the chart carries a real performance anchor — a stage-kind shape.
+   *  Every chart has a `focalPoint` (a bare look-at coordinate), so its presence
+   *  alone never justifies a "to stage" claim; only an actual stage does. */
+  chartHasStage() {
+    const doc = this.controller.doc;
+    if (!doc) return false;
+    const objectSets = doc.floors?.length ? doc.floors.map((f) => f.objects ?? []) : [doc.objects ?? []];
+    for (const objects of objectSets) {
+      for (const obj of objects) {
+        if (obj.type === "shape" && (obj.role === "stage" || obj.stageKind)) return true;
+      }
+    }
+    return false;
+  }
   /**
-   * 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.
+   * Eager sightline preview for the confirm card: the organizer's real view
+   * photo, or — only when the chart has an actual stage to look at — a generated
+   * forward view plus an "≈ Nm to stage · clear sightline" line. On a stageless
+   * chart both the distance/sightline claim and the generic stage silhouette are
+   * invented promises, so we suppress them; a real attached photo always shows.
+   * (OV-52)
    */
   confirmThumbHtml(seat) {
     const doc = this.controller.doc;
     if (!doc) return "";
-    let url = seat.viewUrl ?? "";
+    const realPhoto = seat.viewUrl ?? "";
+    const hasStage = this.chartHasStage();
+    if (!realPhoto && !hasStage) return "";
+    let url = realPhoto;
     let distance = null;
     if (!url) {
       try {
-        const thumb = generateSeatThumb(seat, doc.focalPoint);
+        const thumb = generateSeatThumb(seat, seat.focalPoint ?? doc.focalPoint);
         url = thumb.url;
         distance = thumb.distanceM ?? null;
       } catch {
         return "";
       }
     }
-    const sight = distance != null ? t2("picker.sightline", { m: distance }) : 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>`;
+    const sightHtml = hasStage ? `<div class="sl-confirm-sight"><span aria-hidden="true">\u2713</span>${distance != null ? t2("picker.sightline", { m: distance }) : this.tf("picker.sightlineClear", "Clear sightline")}</div>` : "";
+    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>` + sightHtml;
   }
   /** Minimal HTML/attribute escaper for buyer-authored commercial text (notes). */
   escCx(value) {
@@ -1957,6 +2053,19 @@ var SeatPicker = class _SeatPicker {
     const title = this.escCx(c?.note ? c.note : limited);
     return `<span class="sl-cx-mark" role="img" aria-label="${title}" title="${title}">\u25D0</span>`;
   }
+  wheelchairProvisionLabel(type) {
+    if (type === "no-seat") return "Empty wheelchair space";
+    if (type === "seat-present") return "Accessible physical seat";
+    return "";
+  }
+  wheelchairConfirmHtml(type) {
+    const label = this.wheelchairProvisionLabel(type);
+    return label ? `<div class="sl-cx"><div class="sl-cx-warn"><span class="sl-cx-glyph" aria-hidden="true">\u267F</span><span class="sl-cx-txt"><b>${label}</b></span></div></div>` : "";
+  }
+  wheelchairChipMarker(type) {
+    const label = this.wheelchairProvisionLabel(type);
+    return label ? `<span class="sl-cx-mark" role="img" aria-label="${label}" title="${label}">\u267F</span>` : "";
+  }
   /** True when the picker is rendered inside an iframe (snippet embed at /e/:key). */
   isFramed() {
     return typeof window !== "undefined" && window.parent !== window;
@@ -2108,7 +2217,10 @@ var SeatPicker = class _SeatPicker {
     });
     picker.escHandler = (e) => {
       if (e.key !== "Escape") return;
-      if (picker.confirmSeat) {
+      if (picker.tableDialog) {
+        e.preventDefault();
+        picker.cancelTableDialog();
+      } else if (picker.confirmSeat) {
         e.preventDefault();
         picker.cancelConfirm();
       } else if (picker.bestAvailableConfirm) {
@@ -2139,7 +2251,11 @@ var SeatPicker = class _SeatPicker {
     mount.appendChild(root);
     root.addEventListener("keydown", (e) => {
       if (e.key !== "Escape") return;
-      if (this.confirmSeat) {
+      if (this.tableDialog) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancelTableDialog();
+      } else if (this.confirmSeat) {
         e.preventDefault();
         e.stopPropagation();
         this.cancelConfirm();
@@ -2308,6 +2424,7 @@ var SeatPicker = class _SeatPicker {
     }
     this.els.boot.remove();
     this.salesClosed = !!info.salesClosed;
+    this.controller.setViewMode(this.opts.initialView ?? "flat");
     this.buildRegions();
     this.regions["bottom-right"].appendChild(this.els.zoom);
     this.regions["bottom-center"].appendChild(this.els.toast);
@@ -2350,11 +2467,10 @@ var SeatPicker = class _SeatPicker {
       this.regions["top-left"].appendChild(chips);
       this.a11yChipsEl = chips;
       if (present.size) {
-        const GLYPH = { wheelchair: "\u267F", companion: "\u{1F9D1}\u200D\u{1F91D}\u200D\u{1F9D1}" };
         const mk = (key, label) => `<button type="button" class="sl-chip-f${key === "all" ? " on" : ""}" data-a11y="1" data-f="${key}">${label}</button>`;
         chips.insertAdjacentHTML(
           "beforeend",
-          mk("all", "All seats") + [...present].map((type) => mk(type, `${GLYPH[type] ? GLYPH[type] + " " : ""}${type[0].toUpperCase()}${type.slice(1).replace(/-/g, " ")}`)).join("")
+          mk("all", "All seats") + ACCESSIBILITY_TYPES.filter(({ key }) => present.has(key)).map(({ key, short, icon }) => mk(key, `${icon} ${short}`)).join("")
         );
         const active = /* @__PURE__ */ new Set();
         const syncChips = () => {
@@ -2404,10 +2520,7 @@ var SeatPicker = class _SeatPicker {
     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);
     cb.addEventListener("click", () => {
-      this.cbSafe = !this.cbSafe;
-      cb.setAttribute("aria-pressed", String(this.cbSafe));
-      this.controller.setColorblindSafe(this.cbSafe);
-      writeStoredColorblind(this.cbSafe);
+      this.setColorblindSafe(!this.cbSafe);
     });
     this.srEl = document.createElement("div");
     this.srEl.className = "sl-sr";
@@ -2529,6 +2642,7 @@ var SeatPicker = class _SeatPicker {
     this.applySalesClosed();
   }
   applySalesClosed() {
+    if (this.salesClosed && this.tableDialog && !this.tableDialogHeld) this.cancelTableDialog();
     const pill = this.els.closedPill;
     if (pill) {
       pill.classList.toggle("on", this.salesClosed);
@@ -2617,12 +2731,13 @@ var SeatPicker = class _SeatPicker {
   /** Update only the action affordance; selection callbacks must not refire. */
   committedSelection() {
     const candidateId = this.confirmSeat?.id;
-    return this.controller.getSelection().filter((seat) => seat.id !== candidateId);
+    const pendingTableId = this.tableDialog && !this.tableDialogHeld ? this.tableDialog.id : null;
+    return this.controller.getSelection().filter((seat) => seat.id !== candidateId && seat.id !== pendingTableId);
   }
   pendingSelectionCount() {
     const heldItems = this.hold?.items ?? [];
     const heldLabels = new Set(heldItems.map((item) => item.label));
-    const pendingSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).length;
+    const pendingSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).reduce((sum, seat) => sum + (seat.quantity ?? 1), 0);
     return pendingSeats + this.pendingGACount();
   }
   heldGACounts() {
@@ -2644,13 +2759,13 @@ var SeatPicker = class _SeatPicker {
   }
   totalTicketCount() {
     const heldLabels = new Set((this.hold?.items ?? []).map((item) => item.label));
-    const freshSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).length;
+    const freshSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).reduce((sum, seat) => sum + (seat.quantity ?? 1), 0);
     return this.heldTicketCount() + freshSeats + this.pendingGACount();
   }
   /** Held tickets and standing quantities consume the same order-wide cap. */
   updateSelectionCapacity() {
     const heldLabels = new Set((this.hold?.items ?? []).map((item) => item.label));
-    const selectedHeld = this.committedSelection().filter((seat) => heldLabels.has(seat.label)).length;
+    const selectedHeld = this.committedSelection().filter((seat) => heldLabels.has(seat.label)).reduce((sum, seat) => sum + (seat.quantity ?? 1), 0);
     const remaining = Math.max(0, this.maxTickets - this.heldTicketCount() - this.pendingGACount());
     this.controller.setMaxSelection(selectedHeld + remaining);
   }
@@ -2677,9 +2792,9 @@ var SeatPicker = class _SeatPicker {
       cta.textContent = this.tf("picker.salesClosedCta", "Sales closed");
       return;
     }
-    if (this.confirmSeat) {
+    if (this.confirmSeat || this.tableDialog && !this.tableDialogHeld) {
       cta.disabled = true;
-      cta.textContent = "Confirm or cancel this seat";
+      cta.textContent = this.tableDialog ? "Confirm your table" : "Confirm or cancel this seat";
       return;
     }
     if (this.ctaPhase === "holding") {
@@ -2988,11 +3103,26 @@ var SeatPicker = class _SeatPicker {
     });
   }
   // ---- arena / multi-floor chrome -------------------------------------------
-  /** Build the rung pills (charts with sections) and floor switcher (>1 floor). */
+  /** Build projection, rung and floor controls for arena-scale charts. */
   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 projection = document.createElement("div");
+      projection.className = "sl-projection";
+      projection.setAttribute("role", "group");
+      projection.setAttribute("aria-label", "Map projection");
+      projection.innerHTML = '<button type="button" data-projection="flat" aria-pressed="false" title="Flat 2D map">2D</button><button type="button" data-projection="perspective" aria-pressed="false" title="Perspective 2.5D map">2.5D</button>';
+      projection.querySelectorAll("button").forEach((button) => {
+        button.addEventListener("click", () => {
+          this.setViewMode(button.dataset.projection);
+        });
+      });
+      this.regions["top-right"].appendChild(projection);
+      this.projectionEl = projection;
+      this.syncProjection();
+    }
     if (hasSections) {
       const RUNGS = ["zones", "sections", "seats"];
       const pills = document.createElement("div");
@@ -3054,6 +3184,15 @@ var SeatPicker = class _SeatPicker {
       btn.setAttribute("aria-pressed", String(on));
     });
   }
+  syncProjection() {
+    if (!this.projectionEl) return;
+    const active = this.controller.getViewMode();
+    this.projectionEl.querySelectorAll("button").forEach((button) => {
+      const on = button.dataset.projection === active;
+      button.classList.toggle("on", on);
+      button.setAttribute("aria-pressed", String(on));
+    });
+  }
   /** Reflect the active floor onto the switcher rail. */
   syncFloors() {
     if (!this.floorsEl) return;
@@ -3182,7 +3321,150 @@ var SeatPicker = class _SeatPicker {
     const status = this.controller.getStatus(seat.id) ?? "free";
     const statusText = status === "free" ? "available" : status === "held" ? "on hold" : "taken";
     const price = cat ? this.catPrice(cat) : void 0;
-    this.srEl.textContent = `Seat ${seat.label}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
+    const table = this.controller.tableSelection(seat.id);
+    const details = table ?? this.controller.seatDetails(seat.id);
+    const typeWord = this.rowTypeWord(details);
+    const buyerName = details?.rowLabel ?? details?.displayLabel ?? seat.displayLabel ?? seat.label;
+    const identity = table ? `${typeWord} ${buyerName}, ${table.bookingMode === "variable" ? `${table.minOccupancy} to ${table.maxOccupancy} guests` : `${table.capacity} guests`}` : details?.objectType === "booth" ? `${typeWord} ${buyerName}` : details?.objectType === "table" ? `${typeWord} ${buyerName}, seat ${details.seatNumber ?? seat.label}` : `Seat ${details?.displayLabel ?? seat.displayLabel ?? seat.label}`;
+    this.srEl.textContent = `${identity}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
+  }
+  // ---- atomic table confirmation / guest quantity ---------------------------
+  showTableDialog(table, held, returnFocus) {
+    this.dismissTableDialog(false);
+    this.tableDialog = { ...table };
+    this.tableDialogHeld = held;
+    this.tableDialogReturnFocus = returnFocus ?? document.activeElement;
+    const esc2 = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    })[ch]);
+    const cat = this.controller.doc?.categories.find((candidate) => candidate.key === table.categoryKey);
+    const variable = table.bookingMode === "variable";
+    const typeWord = this.rowTypeWord(table);
+    const el = document.createElement("div");
+    el.className = "sl-table-scrim";
+    el.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc2(variable ? `Flexible party \xB7 ${typeWord}` : `Whole ${typeWord}`)}</div><h2 class="sl-table-title" id="sl-table-title">${esc2(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? `Choose how many guests will sit together. This table is held exclusively for your party.` : `All ${table.capacity} places are booked together as one exclusive table.`}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc2(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price))} per guest</b><span class="muted">Table capacity</span><span>${table.capacity} guests</span><span class="muted">Total</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">Number of guests</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="Fewer guests">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="More guests">+</button></div><div class="sl-table-range">Choose ${table.minOccupancy}\u2013${table.maxOccupancy} guests</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">Cancel</button><button type="button" class="sl-table-confirm">${held ? "Update table" : variable ? "Select table" : "Select whole table"}</button></div></div></section>`;
+    this.root.appendChild(el);
+    this.tableDialogEl = el;
+    this.renderTableDialogState();
+    el.querySelectorAll("[data-table-step]").forEach((button) => {
+      button.addEventListener("click", () => {
+        if (!this.tableDialog) return;
+        const next = Math.max(
+          this.tableDialog.minOccupancy,
+          Math.min(this.tableDialog.maxOccupancy, this.tableDialog.quantity + Number(button.dataset.tableStep))
+        );
+        this.tableDialog = { ...this.tableDialog, quantity: next };
+        this.renderTableDialogState();
+      });
+    });
+    el.querySelector(".sl-table-cancel").addEventListener("click", () => this.cancelTableDialog());
+    el.querySelector(".sl-table-confirm").addEventListener("click", () => void this.confirmTableDialog());
+    el.addEventListener("mousedown", (event) => {
+      if (event.target === el) this.cancelTableDialog();
+    });
+    el.addEventListener("keydown", (event) => {
+      if (event.key !== "Tab") return;
+      const focusable = [...el.querySelectorAll('button:not(:disabled),[tabindex]:not([tabindex="-1"])')];
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    });
+    requestAnimationFrame(() => el.querySelector(variable ? '[data-table-step="-1"]' : ".sl-table-confirm")?.focus());
+  }
+  renderTableDialogState() {
+    const table = this.tableDialog;
+    const el = this.tableDialogEl;
+    if (!table || !el) return;
+    const output = el.querySelector("output[data-table-qty]");
+    if (output) output.value = String(table.quantity);
+    const hidden = el.querySelector("input[data-table-qty]");
+    if (hidden) hidden.value = String(table.quantity);
+    el.querySelectorAll("[data-table-step]").forEach((button) => {
+      const delta = Number(button.dataset.tableStep);
+      button.disabled = delta < 0 ? table.quantity <= table.minOccupancy : table.quantity >= table.maxOccupancy;
+    });
+    const unit = this.paidPrice(table.categoryKey, table.tierId ?? null, table.price);
+    const total = el.querySelector("[data-table-total]");
+    if (total) total.textContent = this.money(unit * table.quantity);
+  }
+  async confirmTableDialog() {
+    const table = this.tableDialog;
+    const held = this.tableDialogHeld;
+    if (!table) return;
+    const button = this.tableDialogEl?.querySelector(".sl-table-confirm");
+    if (button) {
+      button.disabled = true;
+      button.textContent = held ? "Updating\u2026" : "Selecting\u2026";
+    }
+    if (held) {
+      try {
+        const updated = await this.controller.replaceTableQuantity(table.label, table.quantity);
+        if (!updated) {
+          this.toast("That guest count could not be secured. Your current table hold is unchanged.", "warning");
+          this.renderTableDialogState();
+          if (button) {
+            button.disabled = false;
+            button.textContent = "Update table";
+          }
+          return;
+        }
+        this.hold = {
+          holdId: updated.holdId,
+          expiresAt: updated.expiresAt,
+          seats: updated.seats,
+          items: updated.items
+        };
+        this.startHoldTimer(updated.expiresAt);
+        this.dismissTableDialog();
+        this.syncTray();
+        this.emitHoldChange();
+        this.toast(`${table.label} updated for ${table.quantity} guests.`, "success");
+      } catch (error) {
+        this.opts.onError?.(error);
+        this.toast("That guest count is no longer available. Your current hold is unchanged.", "error");
+        if (button) {
+          button.disabled = false;
+          button.textContent = "Update table";
+        }
+      }
+      return;
+    }
+    if (!this.controller.setTableQuantity(table.label, table.quantity)) {
+      if (button) {
+        button.disabled = false;
+        button.textContent = table.bookingMode === "variable" ? "Select table" : "Select whole table";
+      }
+      return;
+    }
+    this.dismissTableDialog();
+    this.collapseSectionCard();
+    this.syncTray();
+  }
+  cancelTableDialog() {
+    const table = this.tableDialog;
+    const held = this.tableDialogHeld;
+    this.dismissTableDialog();
+    if (table && !held) this.controller.deselect(table.physicalSeatIds);
+  }
+  dismissTableDialog(restoreFocus = true) {
+    const focus = this.tableDialogReturnFocus;
+    this.tableDialogEl?.remove();
+    this.tableDialogEl = null;
+    this.tableDialog = null;
+    this.tableDialogHeld = false;
+    this.tableDialogReturnFocus = null;
+    if (restoreFocus) requestAnimationFrame(() => (focus?.isConnected ? focus : this.root)?.focus());
   }
   // ---- seat candidate confirmation ------------------------------------------
   showConfirm(seat) {
@@ -3204,13 +3486,18 @@ var SeatPicker = class _SeatPicker {
       ">": "&gt;",
       '"': "&quot;"
     })[char]);
+    const identityFields = [
+      details?.sectionLabel ? `<div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details.sectionLabel)}</span></div>` : "",
+      details?.rowLabel || details?.objectType === "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${safe(this.rowTypeWord(details))}</span><span class="sl-confirm-value">${safe(this.rowShort(details) ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : "",
+      details?.objectType !== "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : ""
+    ].filter(Boolean).join("");
     const el = document.createElement("div");
     el.className = "sl-confirm";
     el.setAttribute("role", "dialog");
     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">${safe(this.rowTypeWord(details))}</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.displayLabel ?? 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.commercialConfirmHtml(seat.commercial) + (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>`;
+    el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</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.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (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();
@@ -3281,7 +3568,7 @@ var SeatPicker = class _SeatPicker {
     this.closeSeatView();
     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 };
+    const focal = seat.focalPoint ?? doc?.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc?.focalPoint ?? { x: 0, y: 0 };
     let panoUrl;
     let caption;
     let real = false;
@@ -3505,16 +3792,37 @@ var SeatPicker = class _SeatPicker {
     const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
     if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
+      const zones = this.controller.getBestAvailableZones();
+      if (this.baZone && !zones.some((zone) => zone.id === this.baZone)) this.baZone = "";
       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>` + // Premium quick-pick — present only when the chart actually has premium
       // seats (same present-only philosophy as the a11y filter chips).
-      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (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) => {
+      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (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>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<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, objectType, quantity = 1, objectId, identity) => {
+      const esc2 = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;"
+      })[char]);
       const d = seatId ? this.controller.seatDetails(seatId) : null;
+      const area = objectType === "ga" ? gaAreas.find((candidate) => candidate.id === objectId) : void 0;
+      const effectiveType = objectType === "ga" ? "ga" : d?.objectType ?? objectType;
+      const typeWord = identity?.displayType?.trim() || d?.displayType?.trim() || area?.displayType?.trim() || (effectiveType === "table" ? "Table" : effectiveType === "booth" ? "Booth" : effectiveType === "ga" ? "General admission" : "Row");
+      const buyerName = identity?.rowLabel ?? identity?.displayLabel ?? d?.rowLabel ?? d?.displayLabel ?? area?.displayLabel ?? area?.label ?? label;
+      if (effectiveType === "table" && identity?.bookingMode) {
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(buyerName)}</span></span><span class="fld mid"><span class="sl-chip-eb">Guests</span><span class="val">${quantity}</span></span></div>`;
+      }
+      if (effectiveType === "ga") {
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(buyerName)}</span></span>` + (quantity > 1 ? `<span class="fld mid"><span class="sl-chip-eb">Tickets</span><span class="val">${quantity}</span></span>` : "") + `</div>`;
+      }
+      if (effectiveType === "booth") {
+        return `<div class="sl-chip-id">` + (d?.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc2(d.sectionLabel)}</span></span>` : "") + `<span class="fld mid"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(buyerName)}</span></span></div>`;
+      }
       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">Seat</span><span class="val">${esc2(buyerName)}</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">${this.rowTypeWord(d)}</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>`;
+      return `<div class="sl-chip-id">` + (d.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc2(d.sectionLabel)}</span></span>` : "") + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(this.rowShort(d))}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${esc2(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) {
@@ -3523,9 +3831,10 @@ var SeatPicker = class _SeatPicker {
       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 heldSeat = item.objectType !== "ga" ? this.controller.seatByLabel(item.label) : null;
-      const canView2 = this.seatViewEnabled() && !!heldSeat;
+      const table = item.objectType === "table" ? this.controller.tableSelection(item.label) : null;
+      const canView2 = this.seatViewEnabled() && !!heldSeat && item.objectType !== "table";
       parts.push(
-        `<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>` + this.commercialChipMarker(heldSeat?.commercial) + `<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>`
+        `<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, item.objectType, item.quantity ?? 1, item.objectId, table ?? void 0) + `<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>` + (table?.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(item.label)}">${item.quantity ?? 1} guests \xB7 Edit</button>` : "") + this.wheelchairChipMarker(heldSeat?.wheelchairSpaceType) + this.commercialChipMarker(heldSeat?.commercial) + `<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));
@@ -3536,13 +3845,13 @@ var SeatPicker = class _SeatPicker {
       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(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}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.displayLabel ?? 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>${this.commercialChipMarker(s.commercial)}${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>`
+        `<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, s.objectType, s.quantity ?? 1, s.objectId, s) + `<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>` + (s.objectType === "table" && s.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(s.label)}">${s.quantity ?? 1} guests \xB7 Edit</button>` : "") + `${this.wheelchairChipMarker(s.wheelchairSpaceType)}${this.commercialChipMarker(s.commercial)}${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price) * (s.quantity ?? 1))}</span></div></div>` + iconRail(`Remove ${s.label}`, canView && s.objectType !== "table" ? 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(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>`
+        `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.displayLabel ?? area.label}</div><div class="sl-ga-sub">${area.displayType ?? "General admission"} \xB7 ${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("");
@@ -3556,6 +3865,9 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelector("[data-ba-cat]")?.addEventListener("change", (e) => {
       this.baCat = e.target.value;
     });
+    this.els.tray.querySelector("[data-ba-zone]")?.addEventListener("change", (e) => {
+      this.baZone = e.target.value;
+    });
     this.els.tray.querySelector("[data-ba-premium]")?.addEventListener("click", () => {
       this.baPremium = !this.baPremium;
       this.syncTray();
@@ -3567,7 +3879,7 @@ var SeatPicker = class _SeatPicker {
         this.els.tray.querySelector("[data-ba-replace]")?.focus();
         return;
       }
-      void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium });
+      void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium, zoneId: this.baZone || void 0 });
     });
     this.els.tray.querySelector("[data-ba-cancel]")?.addEventListener("click", () => {
       this.bestAvailableConfirm = false;
@@ -3576,7 +3888,7 @@ var SeatPicker = class _SeatPicker {
     });
     this.els.tray.querySelector("[data-ba-replace]")?.addEventListener("click", () => {
       this.bestAvailableConfirm = false;
-      void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium });
+      void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium, zoneId: this.baZone || void 0 });
     });
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
       btn.addEventListener("click", () => {
@@ -3608,6 +3920,20 @@ var SeatPicker = class _SeatPicker {
         this.scheduleMotion(remove, 150);
       });
     });
+    this.els.tray.querySelectorAll("[data-table-edit]").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        event.stopPropagation();
+        const label = decodeURIComponent(button.dataset.tableEdit ?? "");
+        const details = this.controller.tableSelection(label);
+        if (!details) return;
+        const heldItem = heldItems.find((item) => item.label === label && item.objectType === "table");
+        this.showTableDialog(
+          { ...details, quantity: heldItem?.quantity ?? details.quantity },
+          !!heldItem,
+          button
+        );
+      });
+    });
     this.els.tray.querySelectorAll(".sl-chip .tier").forEach((sel) => {
       sel.addEventListener("change", () => this.controller.setSeatTier(sel.dataset.tier, sel.value || null));
     });
@@ -3635,7 +3961,7 @@ var SeatPicker = class _SeatPicker {
       });
     });
     if (this.salesClosed) {
-      this.els.tray.querySelectorAll(".sl-ba-go,[data-ba],[data-ba-cat],[data-ba-replace],.sl-ga button").forEach((el) => {
+      this.els.tray.querySelectorAll(".sl-ba-go,[data-ba],[data-ba-cat],[data-ba-zone],[data-ba-replace],.sl-ga button").forEach((el) => {
         el.disabled = true;
       });
     }
@@ -3644,8 +3970,11 @@ var SeatPicker = class _SeatPicker {
     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 + this.paidPrice(s.categoryKey, s.tierId ?? null, s.price), 0) + gaTotal + heldTotal;
-    const count = freshSeats.length + gaCount + heldCount;
+    const total = freshSeats.reduce(
+      (sum, s) => sum + this.paidPrice(s.categoryKey, s.tierId ?? null, s.price) * (s.quantity ?? 1),
+      0
+    ) + gaTotal + heldTotal;
+    const count = freshSeats.reduce((sum, seat) => sum + (seat.quantity ?? 1), 0) + gaCount + heldCount;
     const pendingCount = this.pendingSelectionCount();
     const previousCount = this.lastTrayCount;
     const previousTotal = this.lastTrayTotal;
@@ -3891,16 +4220,21 @@ var SeatPicker = class _SeatPicker {
   /** 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: this.paidPrice(it.categoryKey, it.tierId, it.unitPrice),
-      currency: it.currency ?? this.currency,
-      quantity: it.quantity ?? 1
-    }));
+    const lineItems = items.map((it) => {
+      const display = this.controller.lineItemDisplay(it);
+      return {
+        label: it.label,
+        ...display.displayLabel ? { displayLabel: display.displayLabel } : {},
+        ...display.displayType ? { displayType: display.displayType } : {},
+        objectId: it.objectId,
+        objectType: it.objectType,
+        categoryKey: it.categoryKey,
+        tierId: it.tierId,
+        unitPrice: this.paidPrice(it.categoryKey, it.tierId, 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 };
@@ -3961,8 +4295,11 @@ var SeatPicker = class _SeatPicker {
   /** Buyer-facing type word for the row/table key label — the designer's
    *  per-object "Displayed type" override, or the default "Row". */
   rowTypeWord(details) {
-    const t3 = details?.rowType?.trim();
-    return t3 || "Row";
+    const authored = details?.displayType?.trim() || details?.rowType?.trim();
+    if (authored) return authored;
+    if (details?.objectType === "table") return "Table";
+    if (details?.objectType === "booth") return "Booth";
+    return "Row";
   }
   rowShort(details) {
     const row = details?.rowLabel;
@@ -3982,13 +4319,17 @@ var SeatPicker = class _SeatPicker {
     }
     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 isGroupedTable = details.objectType === "table" && !!details.bookingMode;
+    const isBooth = details.objectType === "booth";
     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">${esc2(this.rowTypeWord(details))}</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.displayLabel ?? 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.displayLabel ?? details.label)}</span></div></div>`;
+    const grid = isGroupedTable ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Guests</span><span class="sl-tip-val">${details.bookingMode === "variable" ? `${details.minOccupancy}\u2013${details.maxOccupancy}` : details.capacity}</span></div></div>` : isBooth ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<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">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div></div>` : hasLoc ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div>` : "") + (details.rowLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(this.rowShort(details))}</span></div>` : "") + (details.seatNumber ? `<div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.seatNumber)}</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.displayLabel ?? 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>`;
     const limited = this.limitedViewLabel(details.commercial);
     const cxLine = limited ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u25D0</span>${esc2(limited)}</div>` : "";
+    const wheelchair = this.wheelchairProvisionLabel(details.wheelchairSpaceType);
+    const wheelchairLine = wheelchair ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u267F</span>${esc2(wheelchair)}</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>` + cxLine + statusLine;
+    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>` + wheelchairLine + cxLine + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -3996,6 +4337,33 @@ var SeatPicker = class _SeatPicker {
   getSelection() {
     return this.committedSelection();
   }
+  /** Current colorblind-safe render state, resolved from the stored buyer
+   *  preference at mount. Host chrome (e.g. the Designer preview) reads this to
+   *  surface the state rather than rendering colorblind colors silently. */
+  isColorblindSafe() {
+    return this.cbSafe;
+  }
+  /** Single source of truth for the colorblind-safe toggle — used by both the
+   *  in-widget button and host chrome. Updates the renderer, the persisted
+   *  cross-surface preference, and the in-widget button's pressed state together
+   *  so the two controls never diverge. */
+  setColorblindSafe(on) {
+    if (on === this.cbSafe) return;
+    this.cbSafe = on;
+    this.cbEl?.setAttribute("aria-pressed", String(on));
+    this.controller.setColorblindSafe(on);
+    writeStoredColorblind(on);
+  }
+  /** Switch the buyer canvas between flat, isometric and Perspective 2.5D. */
+  setViewMode(mode) {
+    this.controller.setViewMode(mode);
+    this.syncProjection();
+    this.dismissConfirm();
+  }
+  /** Current buyer canvas projection. */
+  getViewMode() {
+    return this.controller.getViewMode();
+  }
   /** Current active/restored hold reflected in the tray. */
   getCurrentHold() {
     return this.hold;
@@ -4085,6 +4453,7 @@ var SeatPicker = class _SeatPicker {
     this.destroyed = true;
     if (this.hold && !this.handedOff) void this.controller.release();
     this.closeConfirm();
+    this.dismissTableDialog(false);
     this.closeSeatView();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
@@ -4098,6 +4467,7 @@ var SeatPicker = class _SeatPicker {
     if (this.fsChangeHandler) document.removeEventListener("fullscreenchange", this.fsChangeHandler);
     if (this.fsEscHandler) window.removeEventListener("keydown", this.fsEscHandler);
     this.controller.destroy();
+    this.projectionEl = null;
     this.root?.remove();
     this.root = null;
     if (this.modalScrim) {