@seatlayer/js 0.14.0 → 0.15.0

package/dist/index.cjs

@@ -84,6 +84,12 @@ var PubApi = class {
       body: { qty, ...categoryKey ? { categoryKey } : {} }
     });
   }
+  resume(key, holdId) {
+    return request(this.base, `/pub/events/${encodeURIComponent(key)}/hold/resume`, {
+      method: "POST",
+      body: { holdId }
+    });
+  }
   release(key, labels, holdId) {
     return request(this.base, `/pub/events/${encodeURIComponent(key)}/release`, {
       method: "POST",
@@ -140,6 +146,7 @@ var SeatingChart = class {
       currency: options.currency,
       onSelectionChange: (seats) => this.opts.onSelectionChange?.(seats),
       onHold: (h) => this.opts.onHold?.({ holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items }),
+      onHoldRestored: (h) => this.opts.onHoldRestored?.({ holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items }),
       onHoldExpired: () => this.opts.onHoldExpired?.(),
       onGAClick: (areaId) => {
         const area = this.controller.getGAAreas().find((candidate) => candidate.id === areaId);
@@ -243,6 +250,21 @@ var SeatingChart = class {
       return null;
     }
   }
+  /** Restore an active hold by its opaque id without extending its expiry. */
+  async resumeHold(holdId) {
+    try {
+      const h = await this.controller.resumeHold(holdId);
+      return h ? { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items } : null;
+    } catch (err) {
+      this.opts.onError?.(err);
+      return null;
+    }
+  }
+  /** Current active hold known to this chart, if any. */
+  getCurrentHold() {
+    const h = this.controller.currentHold();
+    return h ? { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items } : null;
+  }
   getGAAreas() {
     return this.controller.getGAAreas();
   }
@@ -311,6 +333,10 @@ var SeatingChart = class {
   async release() {
     await this.controller.release();
   }
+  /** Release selected labels from the current hold while keeping the remainder. */
+  async releaseLabels(labels) {
+    return this.controller.releaseLabels(labels);
+  }
   /** Tear everything down: close the socket, stop timers, drop the canvas. */
   destroy() {
     if (this.hostEl && this.onTipMove) this.hostEl.removeEventListener("mousemove", this.onTipMove);
@@ -490,6 +516,15 @@ var CSS = `
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side > :not(.sl-sheet-head){display:none}
 .sl-picker[data-layout="narrow"] .sl-tray{flex:none}
 .sl-picker[data-layout="narrow"] .sl-foot{position:sticky;bottom:0;background:var(--sl-bg)}
+.sl-picker[data-layout="narrow"] .sl-sheet-head{order:0}
+.sl-picker[data-layout="narrow"] .sl-seats-sec{order:1}
+.sl-picker[data-layout="narrow"] .sl-tray{order:2}
+.sl-picker[data-layout="narrow"] .sl-filtersec{order:3}
+.sl-picker[data-layout="narrow"] .sl-filters{order:4}
+.sl-picker[data-layout="narrow"] .sl-prices-sec{order:5}
+.sl-picker[data-layout="narrow"] .sl-pricef{order:6}
+.sl-picker[data-layout="narrow"] .sl-prices{order:7}
+.sl-picker[data-layout="narrow"] .sl-foot{order:8}
 /* touch chrome: pinch-zoom exists \u2014 hide +/\u2212 on the sheet layout (keep fit) */
 .sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zin"],
 .sl-picker[data-layout="narrow"] .sl-zoom [data-ref="zout"]{display:none}
@@ -536,6 +571,11 @@ var CSS = `
 .sl-price-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
 .sl-price-left{font-size:11px;color:var(--sl-muted);font-variant-numeric:tabular-nums}
 .sl-price-amt{font-weight:800;font-variant-numeric:tabular-nums}
+.sl-status-key{display:flex;gap:12px;flex-wrap:wrap;padding:8px 16px 12px;border-bottom:1px solid var(--sl-line);color:var(--sl-muted);font-size:11px}
+.sl-status-item{display:inline-flex;align-items:center;gap:6px}
+.sl-status-icon{width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
+  color:#fff;background:#6b7280;font-size:9px;font-weight:900;line-height:1}
+.sl-status-icon.sold{background:#374151;font-size:14px}
 
 /* tray */
 .sl-tray{flex:1;padding:10px 16px;display:flex;flex-direction:column;gap:8px;min-height:0}
@@ -686,29 +726,47 @@ var CSS = `
 .sl-chip-f:hover{color:var(--sl-text)}
 .sl-chip-f.on{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
 
-/* confirm popover */
-.sl-confirm{position:absolute;z-index:9;min-width:190px;background:var(--sl-surface);border:1px solid var(--sl-line);
-  border-radius:12px;padding:12px;box-shadow:0 18px 50px -18px rgba(0,0,0,.7);transform:translate(-50%,calc(-100% - 14px));
+/* confirm card: a candidate is not in the tray until Select. Map gestures and
+   floating chrome pause while the card owns focus, keeping the camera stable. */
+.sl-picker[data-confirming="true"] .sl-map-host>:not(.sl-confirm){pointer-events:none}
+.sl-picker[data-confirming="true"] .sl-anchor{pointer-events:none;opacity:.28;transition:opacity .16s}
+.sl-picker[data-confirming="true"] .sl-side{pointer-events:none;opacity:.58;transition:opacity .16s}
+.sl-confirm{position:absolute;z-index:10;width:276px;max-width:calc(100% - 24px);overflow:hidden;pointer-events:auto;
+  background:var(--sl-surface);border:1px solid color-mix(in srgb,var(--sl-line) 70%,var(--sl-text));
+  border-radius:15px;box-shadow:0 24px 64px -18px rgba(0,0,0,.72);transform:translate(-50%,calc(-100% - 16px));
   animation:slConfirmIn .24s cubic-bezier(.2,.8,.2,1) both}
-.sl-confirm-label{font-weight:800;font-size:14px}
-.sl-confirm-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sl-muted);margin-top:4px}
-.sl-confirm-meta b{color:var(--sl-text);margin-left:auto}
+.sl-confirm[data-placement="below"]{transform:translate(-50%,16px);animation:slConfirmBelowIn .24s cubic-bezier(.2,.8,.2,1) both}
+.sl-confirm-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;border-bottom:1px solid var(--sl-line)}
+.sl-confirm-field{min-width:0;padding:12px 11px 10px;border-right:1px solid var(--sl-line)}
+.sl-confirm-field:last-child{border-right:0;text-align:center}
+.sl-confirm-field:nth-child(2){text-align:center}
+.sl-confirm-key{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-confirm-value{display:block;margin-top:4px;color:var(--sl-text);font-size:17px;line-height:1.1;font-weight:850;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-confirm-cat{display:flex;align-items:center;gap:8px;padding:10px 12px;background:color-mix(in srgb,var(--sl-cat) 76%,var(--sl-surface))}
+.sl-confirm-cat .sl-dot{border:2px solid rgba(255,255,255,.78);width:11px;height:11px}
+.sl-confirm-cat-name{font-size:13.5px;font-weight:800;color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-confirm-price{font-size:17px;font-weight:850;color:#fff;font-variant-numeric:tabular-nums}
+.sl-confirm-body{padding:11px 12px 12px}
 .sl-confirm-row{display:flex;gap:8px;margin-top:10px}
-.sl-confirm-row button{flex:1;padding:8px;border-radius:8px;font-weight:700;font-size:12.5px}
-.sl-confirm-add{background:var(--sl-accent);color:var(--sl-accent-ink)}
-.sl-confirm-cancel{border:1px solid var(--sl-line);color:var(--sl-muted)}
+.sl-confirm-row button{flex:1;min-height:44px;padding:9px 12px;border-radius:9px;font-weight:800;font-size:13px}
+.sl-confirm-add{background:var(--sl-accent)!important;color:var(--sl-accent-ink)!important;display:flex;align-items:center;justify-content:center;gap:7px}
+.sl-confirm-add svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-confirm-cancel{background:color-mix(in srgb,var(--sl-line) 44%,transparent)!important;border:1px solid var(--sl-line)!important;color:var(--sl-muted)!important}
 .sl-confirm-cancel:hover{color:var(--sl-text)}
+.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}
 
 /* best-available row */
-.sl-ba{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm)}
+.sl-ba{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm)}
 .sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:7px;
-  font:inherit;font-size:12px;padding:5px 6px;max-width:110px}
+  font:inherit;font-size:12px;padding:7px 8px;min-width:0;width:100%;max-width:none}
 .sl-ba-qty{display:flex;align-items:center;gap:7px}
 .sl-ba-qty button{width:24px;height:24px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
 .sl-ba-qty span{min-width:14px;text-align:center;font-weight:800}
-.sl-ba-go{margin-left:auto;padding:7px 12px;border-radius:999px;border:1px solid var(--sl-line);font-weight:700;font-size:12px;
-  transition:border-color .15s,opacity .15s;display:flex;align-items:center;gap:6px}
+.sl-ba-go{grid-column:1/-1;width:100%;min-height:38px;padding:7px 12px;border-radius:9px;border:1px solid var(--sl-line);font-weight:800;font-size:12px;
+  transition:border-color .15s,opacity .15s;display:flex;align-items:center;justify-content:center;gap:6px}
 .sl-ba-go:hover{border-color:var(--sl-muted)}
 .sl-ba-go:disabled{opacity:.62;cursor:wait}
 
@@ -831,6 +889,8 @@ var CSS = `
 @keyframes slCheckDraw{to{stroke-dashoffset:0}}
 @keyframes slCopyRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes slConfirmIn{from{opacity:0;transform:translate(-50%,calc(-100% - 8px)) scale(.96)}to{opacity:1;transform:translate(-50%,calc(-100% - 14px)) scale(1)}}
+@keyframes slConfirmBelowIn{from{opacity:0;transform:translate(-50%,8px) scale(.96)}to{opacity:1;transform:translate(-50%,16px) scale(1)}}
+@keyframes slConfirmMobileIn{from{opacity:0;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
 
 @media(prefers-reduced-motion:reduce){
   .sl-picker *,.sl-modal-scrim *{animation-duration:.001ms!important;animation-iteration-count:1!important;
@@ -927,6 +987,9 @@ var SeatPicker = class _SeatPicker {
     /** Stable item keys prevent tray chips re-animating on unrelated realtime syncs. */
     this.lastTrayKeys = /* @__PURE__ */ new Set();
     this.bestAvailableBusy = false;
+    this.releasingLabels = /* @__PURE__ */ new Set();
+    /** Selected labels awaiting the hold response; their own realtime echo can arrive first. */
+    this.holdingLabels = /* @__PURE__ */ new Set();
     this.ctaPhase = "idle";
     // narrow-layout chrome that docks into the sheet's Filters row on mobile
     this.a11yChipsEl = null;
@@ -940,8 +1003,9 @@ var SeatPicker = class _SeatPicker {
     if (!options || typeof options !== "object") throw new Error("seatmap: options object is required");
     if (!options.event || typeof options.event !== "string") throw new Error("seatmap: `event` key is required");
     if (!options.container) throw new Error("seatmap: `container` is required (or use SeatPicker.open())");
-    this.opts = options;
-    this.api = new PubApi((options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, ""));
+    this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
+    this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
+    this.api = new PubApi(this.apiBase);
     this.controller = new import_core2.PickerController({
       transport: this.api,
       eventKey: options.event,
@@ -951,7 +1015,7 @@ var SeatPicker = class _SeatPicker {
       colorblindSafe: options.colorblindSafe,
       onSelectionChange: () => {
         this.syncTray();
-        if (this.controller.getSelection().length) this.collapseSectionCard();
+        if (this.committedSelection().length) this.collapseSectionCard();
       },
       onStatusChange: () => {
         this.syncPrices();
@@ -961,6 +1025,7 @@ var SeatPicker = class _SeatPicker {
       },
       onHoldExpired: () => {
         this.hold = null;
+        this.forgetHold();
         this.handedOff = false;
         this.bookedShown = false;
         this.ctaPhase = "idle";
@@ -968,13 +1033,17 @@ var SeatPicker = class _SeatPicker {
         this.gaQty.clear();
         this.toast((0, import_core2.t)("picker.holdExpired", void 0) || "Your hold expired \u2014 seats released. Pick again.", "warning");
         this.syncTray();
+        this.emitHoldChange();
         this.opts.onHoldExpired?.();
       },
-      confirmSelection: options.confirmSelection,
+      confirmSelection: this.opts.confirmSelection,
       onSelect: (seat) => {
         this.flashPickedSeat(seat.id);
         if (this.opts.confirmSelection) this.showConfirm(seat);
       },
+      onDeselect: (seat) => {
+        if (this.confirmSeat?.id === seat.id) this.dismissConfirm();
+      },
       onViewChange: () => {
         this.reanchorConfirm();
         this.syncRung();
@@ -1033,7 +1102,13 @@ var SeatPicker = class _SeatPicker {
       if (e.target === scrim) close();
     });
     picker.escHandler = (e) => {
-      if (e.key === "Escape") close();
+      if (e.key !== "Escape") return;
+      if (picker.confirmSeat) {
+        e.preventDefault();
+        picker.cancelConfirm();
+      } else {
+        close();
+      }
     };
     document.addEventListener("keydown", picker.escHandler);
     await picker.render();
@@ -1050,8 +1125,15 @@ var SeatPicker = class _SeatPicker {
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
+    root.tabIndex = -1;
     this.root = root;
     mount.appendChild(root);
+    root.addEventListener("keydown", (e) => {
+      if (e.key !== "Escape" || !this.confirmSeat) return;
+      e.preventDefault();
+      e.stopPropagation();
+      this.cancelConfirm();
+    });
     Object.entries(resolveTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     root.innerHTML = `
       <div class="sl-head">
@@ -1090,9 +1172,9 @@ var SeatPicker = class _SeatPicker {
           </div>
           <div class="sl-sec sl-filtersec" data-ref="filtersSec">Filters</div>
           <div class="sl-filters" data-ref="filters"></div>
-          <div class="sl-sec" data-ref="pricesSec">Prices</div>
+          <div class="sl-sec sl-prices-sec" data-ref="pricesSec">Prices</div>
           <div class="sl-prices" data-ref="prices"></div>
-          <div class="sl-sec">Your seats</div>
+          <div class="sl-sec sl-seats-sec">Your seats</div>
           <div class="sl-tray" data-ref="tray"></div>
           <div class="sl-foot">
             <div class="sl-hold-note" data-ref="holdNote" role="status" aria-live="polite">
@@ -1250,6 +1332,8 @@ var SeatPicker = class _SeatPicker {
     this.buildExtendPrompt();
     this.buildBookedOverlay();
     this.dockLayoutChrome();
+    await this.restoreRememberedHold();
+    if (this.destroyed) return this;
     this.syncPrices();
     this.syncTray();
     return this;
@@ -1363,10 +1447,14 @@ 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);
+  }
   pendingSelectionCount() {
     const heldItems = this.hold?.items ?? [];
     const heldLabels = new Set(heldItems.map((item) => item.label));
-    const pendingSeats = this.controller.getSelection().filter((seat) => !heldLabels.has(seat.label)).length;
+    const pendingSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).length;
     const heldGA = /* @__PURE__ */ new Map();
     for (const item of heldItems.filter((candidate) => candidate.objectType === "ga")) {
       heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
@@ -1380,6 +1468,11 @@ var SeatPicker = class _SeatPicker {
   syncCta(count = this.lastTrayCount, pending = this.pendingSelectionCount()) {
     const cta = this.els.cta;
     if (!cta) return;
+    if (this.confirmSeat) {
+      cta.disabled = true;
+      cta.textContent = "Confirm or cancel this seat";
+      return;
+    }
     if (this.ctaPhase === "holding") {
       cta.disabled = true;
       cta.innerHTML = '<span class="sl-cta-spin" aria-hidden="true"></span>Securing seats\u2026';
@@ -1404,6 +1497,68 @@ var SeatPicker = class _SeatPicker {
       }, 1100);
     }
   }
+  /** Session-scoped capability key: isolated by API origin and event. */
+  holdStorageKey() {
+    return `@seatlayer/hold/v1/${encodeURIComponent(this.apiBase)}/${encodeURIComponent(this.opts.event)}`;
+  }
+  rememberedHoldId() {
+    if (this.opts.initialHoldId) return this.opts.initialHoldId;
+    if (this.opts.restoreHold === false || typeof window === "undefined") return null;
+    try {
+      return window.sessionStorage.getItem(this.holdStorageKey());
+    } catch {
+      return null;
+    }
+  }
+  rememberHold(hold) {
+    if (this.opts.restoreHold === false || typeof window === "undefined") return;
+    try {
+      window.sessionStorage.setItem(this.holdStorageKey(), hold.holdId);
+    } catch {
+    }
+  }
+  forgetHold() {
+    if (typeof window === "undefined") return;
+    try {
+      window.sessionStorage.removeItem(this.holdStorageKey());
+    } catch {
+    }
+  }
+  async resumeHoldFromServer(holdId, automatic) {
+    try {
+      const h = await this.controller.resumeHold(holdId);
+      if (!h) return null;
+      const restored = {
+        holdId: h.holdId,
+        expiresAt: h.expiresAt,
+        seats: h.seats,
+        items: h.items
+      };
+      this.hold = restored;
+      this.handedOff = true;
+      this.bookedShown = false;
+      this.ctaPhase = "idle";
+      this.startHoldTimer(restored.expiresAt);
+      this.rememberHold(restored);
+      this.syncTray();
+      this.emitHoldChange();
+      this.opts.onHoldRestored?.(restored, restored.seats ?? [], this.buildHandoff(restored));
+      if (automatic) this.toast("Your held tickets have been restored.", "success");
+      return restored;
+    } catch (error) {
+      const status = error?.status;
+      if (status === 404 || status === 409) {
+        this.forgetHold();
+      } else {
+        this.opts.onError?.(error);
+      }
+      return null;
+    }
+  }
+  async restoreRememberedHold() {
+    const holdId = this.rememberedHoldId();
+    if (holdId) await this.resumeHoldFromServer(holdId, true);
+  }
   /** Section-bearing objects on the active floor (single-floor → doc.objects). */
   activeFloorObjects() {
     const doc = this.controller.doc;
@@ -1825,36 +1980,78 @@ var SeatPicker = class _SeatPicker {
     const price = cat?.tiers?.length ? cat.tiers[0].price : cat?.price;
     this.srEl.textContent = `Seat ${seat.label}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
   }
-  // ---- confirm popover (opt-in confirmSelection mode) ------------------------
+  // ---- seat candidate confirmation ------------------------------------------
   showConfirm(seat) {
-    this.closeConfirm();
+    const previousId = this.confirmSeat?.id;
+    this.confirmEl?.remove();
+    this.confirmEl = null;
+    this.confirmSeat = seat;
+    this.root?.setAttribute("data-confirming", "true");
+    this.controller.setSelectionFocus(seat.id);
+    if (previousId && previousId !== seat.id) this.controller.deselect([previousId]);
     if (this.tipEl) this.tipEl.style.display = "none";
+    const details = this.controller.seatDetails(seat.id);
     const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
-    const price = cat?.tiers?.length ? cat.tiers[0].price : cat?.price;
+    const price = details?.price ?? (cat?.tiers?.length ? cat.tiers[0].price : cat?.price);
+    const safe = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;"
+    })[char]);
     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>` + (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>${(0, import_core2.t)("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>`;
+    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">Row</span><span class="sl-confirm-value">${safe(details?.rowLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.label)}</span></div></div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + (this.seatViewEnabled() ? `<button type="button" class="sl-confirm-view"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>${(0, import_core2.t)("picker.open360")}</button>` : "") + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
     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]);
-      this.closeConfirm();
-    });
+    el.querySelector(".sl-confirm-add").addEventListener("click", () => this.commitConfirm());
+    el.querySelector(".sl-confirm-cancel").addEventListener("click", () => this.cancelConfirm());
+    requestAnimationFrame(() => el.querySelector(".sl-confirm-add")?.focus());
   }
   reanchorConfirm() {
     if (!this.confirmEl || !this.confirmSeat) return;
     const p = this.controller.worldToScreen({ x: this.confirmSeat.x, y: this.confirmSeat.y });
-    this.confirmEl.style.left = `${p.x}px`;
-    this.confirmEl.style.top = `${p.y}px`;
-  }
-  closeConfirm() {
+    if (this.root?.dataset.layout === "narrow") return;
+    const mapWidth = this.els.map.clientWidth;
+    const mapHeight = this.els.map.clientHeight;
+    const cardWidth = this.confirmEl.offsetWidth || 276;
+    const cardHeight = this.confirmEl.offsetHeight || 230;
+    const half = cardWidth / 2 + 12;
+    const x = Math.max(half, Math.min(mapWidth - half, p.x));
+    const belowFits = p.y + cardHeight + 24 <= mapHeight;
+    const placeBelow = p.y < cardHeight + 24 && belowFits;
+    this.confirmEl.dataset.placement = placeBelow ? "below" : "above";
+    this.confirmEl.style.left = `${x}px`;
+    this.confirmEl.style.top = `${Math.max(8, Math.min(mapHeight - 8, p.y))}px`;
+  }
+  dismissConfirm() {
     this.confirmEl?.remove();
     this.confirmEl = null;
     this.confirmSeat = null;
+    this.root?.removeAttribute("data-confirming");
+    this.controller.setSelectionFocus(null);
+  }
+  commitConfirm() {
+    if (!this.confirmSeat) return;
+    this.dismissConfirm();
+    this.collapseSectionCard();
+    this.syncTray();
+  }
+  cancelConfirm() {
+    const seat = this.confirmSeat;
+    if (!seat) return;
+    this.controller.deselect([seat.id]);
+    if (this.confirmSeat) this.dismissConfirm();
+    this.root?.focus({ preventScroll: true });
+  }
+  closeConfirm() {
+    this.dismissConfirm();
   }
   // ---- 360° view-from-seat modal --------------------------------------------
   seatViewEnabled() {
@@ -1877,7 +2074,6 @@ var SeatPicker = class _SeatPicker {
   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 };
@@ -1988,7 +2184,7 @@ var SeatPicker = class _SeatPicker {
       const price = c.tiers?.length ? c.tiers[0].price : c.price;
       const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
       return `<div class="sl-price-row${dim ? " sl-dim" : ""}" data-cat="${c.key}"><span class="sl-dot" style="background:${c.color}"></span><span class="sl-price-label">${c.label}</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
-    }).join("");
+    }).join("") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon">H</i>Held by another buyer</span><span class="sl-status-item"><i class="sl-status-icon sold">\xD7</i>Sold</span></div>`;
     this.els.prices.querySelectorAll(".sl-price-row").forEach((row) => {
       row.addEventListener("mouseenter", () => this.controller.getRenderer()?.setCategoryHighlight?.(row.dataset.cat ?? null));
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
@@ -1996,7 +2192,10 @@ var SeatPicker = class _SeatPicker {
   }
   /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
   evictTakenSelections() {
-    const ownLabels = new Set(this.controller.currentHold()?.labels ?? []);
+    const ownLabels = /* @__PURE__ */ new Set([
+      ...this.controller.currentHold()?.labels ?? [],
+      ...this.holdingLabels
+    ]);
     const gone = this.controller.getSelection().filter((s) => !ownLabels.has(s.label) && (this.controller.getStatus(s.id) ?? "free") !== "free");
     if (!gone.length) return;
     this.controller.deselect(gone.map((s) => s.id));
@@ -2004,7 +2203,7 @@ var SeatPicker = class _SeatPicker {
   }
   syncTray() {
     if (!this.els.tray) return;
-    const seats = this.controller.getSelection();
+    const seats = this.committedSelection();
     const gaAreas = this.controller.getGAAreas();
     const heldItems = this.hold?.items ?? [];
     const parts = [];
@@ -2021,7 +2220,7 @@ var SeatPicker = class _SeatPicker {
       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 sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="sl-chip-state">Held</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="${(0, import_core2.t)("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>`
+        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="sl-chip-state">Held by you</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="${(0, import_core2.t)("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>` : "") + `<button type="button" class="rm" aria-label="Remove held ticket ${item.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
@@ -2065,6 +2264,10 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
       btn.addEventListener("click", () => {
         const chip = btn.closest(".sl-chip");
+        if (chip.dataset.held) {
+          void this.removeHeldLabel(decodeURIComponent(chip.dataset.held), chip);
+          return;
+        }
         const id = chip.dataset.seat;
         if (this.reducedMotion()) {
           this.controller.deselect([id]);
@@ -2126,26 +2329,59 @@ var SeatPicker = class _SeatPicker {
         this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<span class="sub">\xB7 Best available</span>`;
       }
     }
-    if (this.root?.dataset.layout === "narrow" && count > 0 && this.lastTrayCount === 0) {
-      this.root.dataset.sheet = "open";
-    }
     this.lastTrayCount = count;
     this.lastTrayTotal = total;
     this.opts.onSelectionChange?.(seats);
   }
+  async removeHeldLabel(label, chip) {
+    if (!label || this.releasingLabels.has(label)) return false;
+    this.releasingLabels.add(label);
+    chip?.setAttribute("aria-busy", "true");
+    const button = chip?.querySelector(".rm");
+    if (button) button.disabled = true;
+    try {
+      const preserveAcrossNavigation = this.handedOff;
+      const released = await this.controller.releaseLabels([label]);
+      if (!released) {
+        this.toast(`Couldn't remove ${label}. Your hold is unchanged.`, "error");
+        return false;
+      }
+      const remaining = this.controller.currentHold();
+      this.hold = remaining ? { holdId: remaining.holdId, expiresAt: remaining.expiresAt, seats: remaining.seats, items: remaining.items } : null;
+      this.handedOff = !!this.hold && preserveAcrossNavigation;
+      this.bookedShown = false;
+      this.ctaPhase = "idle";
+      if (this.hold) {
+        this.startHoldTimer(this.hold.expiresAt);
+      } else {
+        this.stopHoldTimer();
+        this.forgetHold();
+      }
+      this.syncTray();
+      this.emitHoldChange();
+      this.toast(`${label} removed from your hold.`, "success");
+      return true;
+    } finally {
+      this.releasingLabels.delete(label);
+      chip?.removeAttribute("aria-busy");
+      if (button?.isConnected) button.disabled = false;
+    }
+  }
   async handleCta() {
-    if (this.hold && !this.controller.getSelection().some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
-      const seats = this.hold.seats ?? this.controller.getSelection();
+    const committed = this.committedSelection();
+    if (this.hold && !committed.some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
+      const seats = this.hold.seats ?? committed;
       this.handedOff = true;
       this.setCtaPhase("checkout");
       this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
       return;
     }
+    this.holdingLabels = new Set(committed.map((seat) => seat.label));
     this.setCtaPhase("holding");
     try {
       let hold = null;
       const gaEntries = [...this.gaQty.entries()].filter(([, q]) => q > 0);
-      const chosenSeats = this.controller.getSelection();
+      const chosenSeats = this.committedSelection();
       if (chosenSeats.length) {
         const h = await this.controller.hold(void 0, this.opts.holdTtlMs);
         hold = h ? { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items } : null;
@@ -2165,12 +2401,14 @@ var SeatPicker = class _SeatPicker {
       this.startHoldTimer(hold.expiresAt);
       this.flashHeldSeats(hold);
       this.setCtaPhase("checkout");
+      this.emitHoldChange();
       this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
     } catch (err) {
       this.opts.onError?.(err);
       this.toast("One or more seats were just taken. Please pick again.", "error");
       this.setCtaPhase("idle");
     } finally {
+      this.holdingLabels.clear();
       if (this.ctaPhase === "holding") this.ctaPhase = "idle";
       this.syncTray();
     }
@@ -2178,6 +2416,7 @@ var SeatPicker = class _SeatPicker {
   startHoldTimer(expiresAt) {
     this.stopHoldTimer();
     this.holdExpiresAt = expiresAt;
+    if (this.hold) this.rememberHold(this.hold);
     const pill = this.els.hold;
     pill.innerHTML = '<span class="sl-hold-dot" aria-hidden="true"></span><span>Held</span><span class="sl-hold-time" data-ref="holdTime"></span>';
     const time = pill.querySelector('[data-ref="holdTime"]');
@@ -2224,6 +2463,8 @@ var SeatPicker = class _SeatPicker {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
         this.holdExpiresAt = h.expiresAt;
         this.extendEl?.classList.remove("on");
+        this.rememberHold(this.hold);
+        this.emitHoldChange();
         this.toast("More time added \u2014 your seats are still held.", "success");
       } else {
         this.toast("Couldn't add more time \u2014 please head to checkout now.", "warning");
@@ -2254,6 +2495,7 @@ var SeatPicker = class _SeatPicker {
     this.bookedShown = true;
     const handoff = this.buildHandoff(this.hold);
     this.stopHoldTimer();
+    this.forgetHold();
     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.`;
@@ -2278,6 +2520,14 @@ var SeatPicker = class _SeatPicker {
     const total = lineItems.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
     return { holdId: hold.holdId, expiresAt: hold.expiresAt, currency, lineItems, total };
   }
+  emitHoldChange() {
+    const hold = this.hold;
+    this.opts.onHoldChange?.(
+      hold,
+      hold?.seats ?? [],
+      hold ? this.buildHandoff(hold) : null
+    );
+  }
   toast(msg, tone = "neutral") {
     const el = this.els.toast;
     if (!el) return;
@@ -2309,16 +2559,34 @@ var SeatPicker = class _SeatPicker {
       return;
     }
     const statusLine = details.status === "free" ? "" : `<div style="margin-top:5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700">${details.status === "held" ? (0, import_core2.t)("map.statusHeld") : (0, import_core2.t)("map.statusTaken")}</div>`;
-    this.tipEl.innerHTML = `<div style="font-weight:800;font-size:13px">${details.label}</div><div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:9px;height:9px;border-radius:50%;flex:none;background:${details.categoryColor}"></span><span style="opacity:.75">${details.categoryLabel}</span><span style="margin-left:auto;font-weight:800">${this.money(details.price)}</span></div>` + statusLine;
+    const location = [
+      details.sectionLabel ? `Section ${details.sectionLabel}` : "",
+      details.rowLabel ? `Row ${details.rowLabel}` : "",
+      details.seatNumber ? `Seat ${details.seatNumber}` : details.label
+    ].filter(Boolean).join(" \xB7 ");
+    this.tipEl.innerHTML = `<div style="font-weight:800;font-size:13px">${location}</div><div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:9px;height:9px;border-radius:50%;flex:none;background:${details.categoryColor}"></span><span style="opacity:.75">${details.categoryLabel}</span><span style="margin-left:auto;font-weight:800">${this.money(details.price)}</span></div>` + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
   // ---- public conveniences ----------------------------------------------------
   getSelection() {
-    return this.controller.getSelection();
+    return this.committedSelection();
+  }
+  /** Current active/restored hold reflected in the tray. */
+  getCurrentHold() {
+    return this.hold;
+  }
+  /** Explicit host-driven hold restore (automatic session restore is on by default). */
+  async resumeHold(holdId) {
+    return this.resumeHoldFromServer(holdId, false);
+  }
+  /** Remove one server-held ticket while keeping the rest of the hold active. */
+  async removeHeldTicket(label) {
+    return this.removeHeldLabel(label);
   }
   async bestAvailable(qty, categoryKey) {
     if (this.bestAvailableBusy) return null;
+    if (this.confirmSeat) this.cancelConfirm();
     this.bestAvailableBusy = true;
     const button = this.els.tray?.querySelector(".sl-ba-go");
     if (button) {
@@ -2334,6 +2602,7 @@ var SeatPicker = class _SeatPicker {
         this.startHoldTimer(h.expiresAt);
         this.flashHeldSeats(this.hold);
         this.syncTray();
+        this.emitHoldChange();
         return this.hold;
       }
       return null;
@@ -2352,8 +2621,9 @@ var SeatPicker = class _SeatPicker {
   async release() {
     const tracked = this.hold;
     const controllerHold = this.controller.currentHold();
+    let released = true;
     if (controllerHold) {
-      await this.controller.release();
+      released = await this.controller.release();
     } else if (tracked) {
       const labels = [.../* @__PURE__ */ new Set([
         ...(tracked.items ?? []).map((item) => item.label),
@@ -2364,16 +2634,23 @@ var SeatPicker = class _SeatPicker {
           await this.api.release(this.opts.event, labels, tracked.holdId);
         } catch (error) {
           this.opts.onError?.(error);
+          released = false;
         }
       }
     }
+    if (!released) {
+      this.toast("Couldn't release your tickets. Your hold is unchanged.", "error");
+      return;
+    }
     this.hold = null;
+    this.forgetHold();
     this.handedOff = false;
     this.bookedShown = false;
     this.ctaPhase = "idle";
     this.stopHoldTimer();
     this.gaQty.clear();
     this.syncTray();
+    this.emitHoldChange();
   }
   destroy() {
     this.destroyed = true;