@seatlayer/js 0.13.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);
@@ -458,8 +484,12 @@ var CSS = `
 .sl-head-meta{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);margin-top:3px;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
 .sl-hold-pill{display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;flex:none;
-  background:var(--sl-accent);color:var(--sl-accent-ink);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
-.sl-hold-pill.on{display:inline-flex}
+  background:var(--sl-accent);color:var(--sl-accent-ink);font-weight:700;font-size:12px;font-variant-numeric:tabular-nums;
+  transform-origin:right center}
+.sl-hold-pill.on{display:inline-flex;animation:slPillIn .34s cubic-bezier(.2,.8,.2,1) both}
+.sl-hold-dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.78;box-shadow:0 0 0 0 currentColor}
+.sl-hold-pill.is-expiring .sl-hold-dot{animation:slHoldPulse 1.4s ease-out infinite}
+.sl-hold-time{min-width:3.35em;text-align:left}
 .sl-close{width:32px;height:32px;border-radius:999px;flex:none;display:none;align-items:center;justify-content:center;
   border:1px solid var(--sl-line);color:var(--sl-muted);transition:color .15s,border-color .15s}
 .sl-close:hover{color:var(--sl-text);border-color:var(--sl-muted)}
@@ -481,11 +511,20 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-body{flex-direction:column}
 .sl-picker[data-layout="narrow"] .sl-map{min-height:0;flex:1}
 .sl-picker[data-layout="narrow"] .sl-side{width:100%;border-left:0;border-top:1px solid var(--sl-line);
-  flex:none;height:50%;transition:height .22s ease}
+  flex:none;height:50%;transition:height .3s cubic-bezier(.2,.8,.2,1)}
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side{height:86px;overflow:hidden}
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side > :not(.sl-sheet-head){display:none}
 .sl-picker[data-layout="narrow"] .sl-tray{flex: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}
@@ -532,15 +571,27 @@ 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}
 .sl-tray-hint{font-size:12.5px;color:var(--sl-muted);line-height:1.5}
 .sl-chip{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--sl-line);
-  border-radius:var(--sl-r-sm);background:var(--sl-surface);font-size:13px}
+  border-radius:var(--sl-r-sm);background:var(--sl-surface);font-size:13px;transform-origin:center}
+.sl-chip.sl-enter{animation:slChipIn .38s cubic-bezier(.2,.8,.2,1) both}
+.sl-chip.sl-leave{pointer-events:none;animation:slChipOut .16s ease-in both}
+.sl-chip.sl-held{border-color:var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
+  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent)}
 .sl-chip b{font-weight:800}
 .sl-chip .cat{color:var(--sl-muted);font-size:11.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-chip .amt{font-weight:700;font-variant-numeric:tabular-nums}
+.sl-chip-state{flex:none;padding:3px 6px;border-radius:999px;background:var(--sl-accent);color:var(--sl-accent-ink);
+  font-size:8.5px;line-height:1;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
+.sl-chip-state.sl-pending{background:transparent;color:var(--sl-muted);border:1px solid var(--sl-line)}
 .sl-chip .rm{width:22px;height:22px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--sl-muted)}
 .sl-chip .rm:hover{color:var(--sl-text)}
 .sl-chip .rm svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
@@ -558,17 +609,30 @@ var CSS = `
 
 /* footer */
 .sl-foot{padding:12px 16px 14px;border-top:1px solid var(--sl-line);flex:none}
+.sl-hold-note{display:none;align-items:center;gap:9px;margin-bottom:10px;padding:9px 10px;border-radius:var(--sl-r-sm);
+  border:1px solid var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
+  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent);
+  font-size:11.5px;line-height:1.35;color:var(--sl-muted)}
+.sl-hold-note.on{display:flex;animation:slNoticeIn .38s cubic-bezier(.2,.8,.2,1) both}
+.sl-hold-note svg{width:16px;height:16px;flex:none;stroke:var(--sl-accent);stroke-width:2.4;fill:none;
+  stroke-linecap:round;stroke-linejoin:round}
+.sl-hold-note b{display:block;color:var(--sl-text);font-size:12px}
+.sl-hold-copy{display:block}
 .sl-total{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px}
 .sl-total b{font-size:17px;font-variant-numeric:tabular-nums}
+.sl-value-pop{animation:slValuePop .32s cubic-bezier(.2,.8,.2,1)}
 /* Primary checkout CTA. Scoped under .sl-picker so it OUTWEIGHS the
    '.sl-picker button' reset (0,1,1) \u2014 an unscoped '.sl-cta' (0,1,0) loses to it
    and the button renders as plain text with no accent fill. */
 .sl-picker .sl-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
   padding:12px 16px;border-radius:var(--sl-r-sm);font-weight:800;font-size:14px;line-height:1.1;
   background:var(--sl-accent);color:var(--sl-accent-ink);
-  transition:filter .15s,background .15s,color .15s,transform .06s}
+  transition:filter .15s,background .22s,color .22s,transform .12s,box-shadow .22s;gap:8px}
 .sl-picker .sl-cta:hover{filter:brightness(1.08)}
 .sl-picker .sl-cta:active{transform:translateY(1px);filter:brightness(.94)}
+.sl-picker .sl-cta.sl-ready{animation:slCtaReady .42s cubic-bezier(.2,.8,.2,1)}
+.sl-cta-spin,.sl-ba-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
+  animation:slspin .7s linear infinite;flex:none}
 /* Disabled ("Select seats"): quieter, but still a full-width button shape. */
 .sl-picker .sl-cta:disabled{background:var(--sl-surface);color:var(--sl-muted);opacity:1;
   cursor:not-allowed;filter:none;transform:none}
@@ -606,11 +670,15 @@ var CSS = `
 .sl-zoom svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
 /* toast + boot states (toast flows in the bottom-center region) */
-.sl-toast{transform:translateY(6px);max-width:100%;
+.sl-toast{transform:translateY(6px) scale(.98);max-width:100%;
   background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);border-radius:999px;padding:9px 16px;
-  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;
+  font-size:12.5px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;white-space:nowrap;
   overflow:hidden;text-overflow:ellipsis}
-.sl-toast.on{opacity:1;transform:translateY(0)}
+.sl-toast.on{opacity:1;transform:translateY(0) scale(1)}
+.sl-toast[data-tone="error"]{border-color:#ef4444}
+.sl-toast[data-tone="warning"]{border-color:var(--sl-accent)}
+.sl-toast[data-tone="success"]{border-color:#22c55e}
+.sl-toast.on[data-tone="error"]{animation:slToastNudge .32s ease-out}
 .sl-boot{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;
   gap:10px;background:var(--sl-bg);font-size:13px;font-weight:600;color:var(--sl-muted)}
 .sl-boot-spin{width:24px;height:24px;border-radius:50%;border:3px solid var(--sl-line);border-top-color:var(--sl-accent);
@@ -634,15 +702,22 @@ var CSS = `
 .sl-extend-btn:disabled{opacity:.5;cursor:not-allowed}
 
 /* booked confirmation overlay (covers the widget once the held seats are sold) */
-.sl-booked{position:absolute;inset:0;z-index:11;display:none;flex-direction:column;align-items:center;
-  justify-content:center;gap:12px;text-align:center;padding:28px;background:var(--sl-bg)}
-.sl-booked.on{display:flex}
+.sl-booked{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;
+  justify-content:center;gap:12px;text-align:center;padding:28px;background:var(--sl-bg);opacity:0;visibility:hidden;
+  pointer-events:none;transition:opacity .34s ease,visibility 0s linear .34s}
+.sl-booked.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .34s ease,visibility 0s}
 .sl-booked-badge{width:60px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center;
-  background:var(--sl-accent);color:var(--sl-accent-ink)}
-.sl-booked-badge svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
+  background:var(--sl-accent);color:var(--sl-accent-ink);transform:scale(.72)}
+.sl-booked.on .sl-booked-badge{animation:slSuccessPop .58s cubic-bezier(.2,1.25,.3,1) .08s both}
+.sl-booked-badge svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
+  stroke-dasharray:30;stroke-dashoffset:30}
+.sl-booked.on .sl-booked-badge svg{animation:slCheckDraw .42s ease-out .32s forwards}
 .sl-booked-title{font-weight:800;font-size:19px;color:var(--sl-text)}
 .sl-booked-sub{font-size:13px;color:var(--sl-muted);line-height:1.5;max-width:320px}
 .sl-booked-seats{font-weight:700;color:var(--sl-text)}
+.sl-booked.on .sl-booked-title,.sl-booked.on .sl-booked-sub{animation:slCopyRise .42s ease-out both}
+.sl-booked.on .sl-booked-title{animation-delay:.22s}
+.sl-booked.on .sl-booked-sub{animation-delay:.3s}
 
 /* a11y filter chips (flow within the top-left region) */
 .sl-chips{display:flex;gap:6px;flex-wrap:wrap}
@@ -651,28 +726,49 @@ 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))}
-.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}
+/* 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[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}
+.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}
 
 /* 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}
@@ -778,6 +874,29 @@ var CSS = `
 .sl-price-row.sl-dim{opacity:.4}
 .sl-seccard-mix-item.sl-dim{opacity:.4}
 
+/* Buyer-journey motion: every animation explains a state transition (selected,
+   held, checkout handoff, conflict or booked). No decorative infinite motion
+   except the expiring-hold pulse and active progress spinners. */
+@keyframes slPillIn{from{opacity:0;transform:translateX(7px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
+@keyframes slHoldPulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.9}75%,100%{box-shadow:0 0 0 7px transparent;opacity:.55}}
+@keyframes slChipIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
+@keyframes slChipOut{to{opacity:0;transform:translateX(10px) scale(.98)}}
+@keyframes slNoticeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
+@keyframes slValuePop{0%{opacity:.6;transform:translateY(3px)}55%{transform:translateY(-1px) scale(1.05)}100%{opacity:1;transform:none}}
+@keyframes slCtaReady{0%{transform:scale(.98);box-shadow:0 0 0 0 transparent}55%{transform:scale(1.01);box-shadow:0 0 0 5px color-mix(in srgb,var(--sl-accent) 18%,transparent)}100%{transform:none;box-shadow:none}}
+@keyframes slToastNudge{0%,100%{margin-left:0}30%{margin-left:-4px}60%{margin-left:3px}}
+@keyframes slSuccessPop{0%{opacity:0;transform:scale(.72)}65%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}
+@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;
+    transition-duration:.001ms!important;scroll-behavior:auto!important}
+}
+
 /* modal host */
 .sl-modal-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(5,7,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
 .sl-modal-frame{width:min(1200px,100%);height:min(820px,100%);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
@@ -818,6 +937,8 @@ var SeatPicker = class _SeatPicker {
     this.ro = null;
     this.holdTimer = null;
     this.toastTimer = null;
+    /** Short-lived UI motion timers; all are cancelled on destroy. */
+    this.motionTimers = /* @__PURE__ */ new Set();
     // state
     this.currency = "USD";
     this.hold = null;
@@ -861,6 +982,15 @@ var SeatPicker = class _SeatPicker {
     this.secCardShownAt = 0;
     /** Previous tray ticket count — first 0→n transition auto-expands the mobile sheet. */
     this.lastTrayCount = 0;
+    /** Previous computed total — drives a single explanatory value bump. */
+    this.lastTrayTotal = 0;
+    /** 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;
     this.cbEl = null;
@@ -873,10 +1003,11 @@ 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;
-    const 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: api,
+      transport: this.api,
       eventKey: options.event,
       maxSelection: options.maxSelection ?? DEFAULT_MAX_SELECTION2,
       currency: options.currency,
@@ -884,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();
@@ -894,18 +1025,25 @@ var SeatPicker = class _SeatPicker {
       },
       onHoldExpired: () => {
         this.hold = null;
+        this.forgetHold();
         this.handedOff = false;
         this.bookedShown = false;
+        this.ctaPhase = "idle";
         this.stopHoldTimer();
         this.gaQty.clear();
-        this.toast((0, import_core2.t)("picker.holdExpired", void 0) || "Your hold expired \u2014 seats released. Pick again.");
+        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();
@@ -945,17 +1083,32 @@ var SeatPicker = class _SeatPicker {
     const picker = new _SeatPicker({ ...options, container: frame });
     picker.modalScrim = scrim;
     picker.prevFocus = document.activeElement;
+    let closing = false;
     const close = () => {
+      if (closing) return;
+      closing = true;
       document.body.style.overflow = prevOverflow;
-      picker.destroy();
-      options.onClose?.();
+      scrim.style.opacity = "0";
+      scrim.style.pointerEvents = "none";
+      const finish = () => {
+        picker.destroy();
+        options.onClose?.();
+      };
+      if (picker.hold && !picker.handedOff) void picker.release().finally(finish);
+      else finish();
     };
     picker.closeModal = close;
     scrim.addEventListener("mousedown", (e) => {
       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();
@@ -972,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">
@@ -1012,11 +1172,15 @@ 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">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
+              <span><b data-ref="holdTitle">Seats secured</b><span class="sl-hold-copy" data-ref="holdCopy">Checkout timer is running.</span></span>
+            </div>
             <div class="sl-total"><span data-ref="count"></span><b data-ref="total"></b></div>
             <button type="button" class="sl-cta" data-ref="cta" disabled></button>
           </div>
@@ -1168,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;
@@ -1243,6 +1409,156 @@ var SeatPicker = class _SeatPicker {
   cssVar(name) {
     return this.root ? getComputedStyle(this.root).getPropertyValue(name).trim() : "";
   }
+  /** Motion is progressive enhancement; all state remains legible when reduced. */
+  reducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  scheduleMotion(fn, delay) {
+    const timer = setTimeout(() => {
+      this.motionTimers.delete(timer);
+      if (!this.destroyed) fn();
+    }, delay);
+    this.motionTimers.add(timer);
+  }
+  /** Restart one finite CSS animation without leaving a permanent state class. */
+  animateOnce(el, className, duration = 600) {
+    if (!el || this.reducedMotion()) return;
+    el.classList.remove(className);
+    void el.offsetWidth;
+    el.classList.add(className);
+    this.scheduleMotion(() => el.classList.remove(className), duration);
+  }
+  /** Selection feedback belongs on the selected seat, not across the whole map. */
+  flashPickedSeat(id) {
+    if (this.reducedMotion()) return;
+    this.controller.flashSeat(id, this.cssVar("--sl-accent") || "#f4b740");
+  }
+  /** A completed hold gets one short map ripple per concrete seat. */
+  flashHeldSeats(hold) {
+    if (this.reducedMotion()) return;
+    const labels = (hold.items ?? []).filter((item) => item.objectType !== "ga").map((item) => item.label);
+    labels.slice(0, 10).forEach((label, index) => {
+      const seat = this.controller.seatByLabel(label);
+      if (!seat) return;
+      this.scheduleMotion(
+        () => this.controller.flashSeat(seat.id, this.cssVar("--sl-accent") || "#f4b740"),
+        index * 55
+      );
+    });
+  }
+  /** 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.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));
+    }
+    const pendingGA = [...this.gaQty.entries()].reduce(
+      (sum, [areaId, qty]) => sum + Math.max(0, qty - (heldGA.get(areaId) ?? 0)),
+      0
+    );
+    return pendingSeats + pendingGA;
+  }
+  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';
+      return;
+    }
+    if (this.ctaPhase === "checkout") {
+      cta.disabled = true;
+      cta.innerHTML = '<span class="sl-cta-spin" aria-hidden="true"></span>Opening checkout\u2026';
+      return;
+    }
+    cta.disabled = count === 0;
+    cta.textContent = this.hold ? pending ? `Secure ${pending} more & checkout` : "Continue to checkout" : count ? "Hold seats & checkout" : "Select seats";
+  }
+  setCtaPhase(phase) {
+    this.ctaPhase = phase;
+    this.syncCta();
+    if (phase === "checkout") {
+      this.scheduleMotion(() => {
+        if (this.ctaPhase !== "checkout") return;
+        this.ctaPhase = "idle";
+        this.syncCta();
+      }, 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;
@@ -1497,7 +1813,11 @@ var SeatPicker = class _SeatPicker {
         (r) => `<button type="button" data-rung="${r}" title="${TIP[r]}" aria-pressed="false">${LABEL[r]}</button>`
       ).join("");
       pills.querySelectorAll("button").forEach((btn) => {
-        btn.addEventListener("click", () => this.controller.setRung(btn.dataset.rung));
+        btn.addEventListener("click", () => {
+          const rung = btn.dataset.rung;
+          this.controller.setRung(rung);
+          if (rung === "seats") this.collapseSectionCard();
+        });
       });
       this.regions["top-center"].appendChild(pills);
       this.rungsEl = pills;
@@ -1548,7 +1868,7 @@ var SeatPicker = class _SeatPicker {
     this.secCardEl?.remove();
     this.secCardEl = null;
     if (!summary) return;
-    this.secCardCollapsed = false;
+    this.secCardCollapsed = this.controller.getRung() === "seats";
     this.secCardShownAt = Date.now();
     this.renderSectionCard(summary);
   }
@@ -1614,6 +1934,10 @@ var SeatPicker = class _SeatPicker {
   sectionCardOnView() {
     if (!this.secCardEl || this.secCardCollapsed || !this.lastSection) return;
     if (this.root?.dataset.layout === "narrow") return;
+    if (this.controller.getRung() === "seats") {
+      this.collapseSectionCard();
+      return;
+    }
     if (Date.now() - this.secCardShownAt < 1400) {
       if (this.sectionCardCoverage() > 0.25) this.collapseSectionCard();
       return;
@@ -1656,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() {
@@ -1708,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 };
@@ -1819,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));
@@ -1827,39 +2192,47 @@ 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));
-    this.toast(`Seat ${gone[0].label} was just taken by another buyer.`);
+    this.toast(`Seat ${gone[0].label} was just taken by another buyer.`, "error");
   }
   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 = [];
+    const nextTrayKeys = /* @__PURE__ */ new Set();
     if (!seats.length && !heldItems.length && !gaAreas.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map, or let us pick the best available for you.</div>`);
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
     for (const item of heldItems) {
+      const itemKey = `held:${item.label}`;
+      nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === item.categoryKey);
       const tierName = item.tierId ? cat?.tiers?.find((ti) => ti.id === item.tierId)?.name : void 0;
       const canView2 = this.seatViewEnabled() && item.objectType !== "ga" && !!this.controller.seatByLabel(item.label);
       parts.push(
-        `<div class="sl-chip"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span>` + (canView2 ? `<button type="button" class="view" data-view-label="${item.label}" aria-label="${(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));
     const canView = this.seatViewEnabled();
     for (const s of seats.filter((seat) => !heldLabels.has(seat.label))) {
+      const itemKey = `seat:${s.id}`;
+      nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
       const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${(0, import_core2.t)("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(ti.price)}</option>`).join("") + `</select>` : "";
       const viewBtn = canView ? `<button type="button" class="view" data-view-label="${s.label}" aria-label="${(0, import_core2.t)("picker.viewFromSeat", { label: s.label })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "";
       parts.push(
-        `<div class="sl-chip" data-seat="${s.id}"><b>${s.label}</b><span class="cat">${cat?.label ?? s.categoryKey}</span>` + tierSelect + `<span class="amt">${this.money(s.price)}</span>` + viewBtn + `<button type="button" class="rm" aria-label="Remove ${s.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
+        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}"><b>${s.label}</b><span class="cat">${cat?.label ?? s.categoryKey}</span>` + tierSelect + `<span class="sl-chip-state sl-pending">Selected</span><span class="amt">${this.money(s.price)}</span>` + viewBtn + `<button type="button" class="rm" aria-label="Remove ${s.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
       );
     }
     for (const area of gaAreas) {
@@ -1871,10 +2244,11 @@ var SeatPicker = class _SeatPicker {
     if (!this.hold) {
       const cats = this.controller.doc?.categories ?? [];
       parts.push(
-        `<div class="sl-ba">` + (cats.length > 1 ? `<select aria-label="Category" data-ba-cat><option value="">Any tier</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.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">Best available</button></div>`
+        `<div class="sl-ba">` + (cats.length > 1 ? `<select aria-label="Category" data-ba-cat><option value="">Any tier</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.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\u2026` : "Best available") + `</button></div>`
       );
     }
     this.els.tray.innerHTML = parts.join("");
+    this.lastTrayKeys = nextTrayKeys;
     this.els.tray.querySelectorAll("[data-ba]").forEach((btn) => {
       btn.addEventListener("click", () => {
         this.baQty = Math.max(1, Math.min(8, this.baQty + Number(btn.dataset.ba)));
@@ -1889,8 +2263,18 @@ var SeatPicker = class _SeatPicker {
     });
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
       btn.addEventListener("click", () => {
-        const id = btn.closest(".sl-chip").dataset.seat;
-        this.controller.deselect([id]);
+        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]);
+          return;
+        }
+        chip.classList.add("sl-leave");
+        this.scheduleMotion(() => this.controller.deselect([id]), 150);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip .tier").forEach((sel) => {
@@ -1919,39 +2303,85 @@ var SeatPicker = class _SeatPicker {
     const freshSeats = seats.filter((seat) => !heldLabels.has(seat.label));
     const total = freshSeats.reduce((sum, s) => sum + s.price, 0) + gaTotal + heldTotal;
     const count = freshSeats.length + gaCount + heldCount;
+    const pendingCount = this.pendingSelectionCount();
+    const previousCount = this.lastTrayCount;
+    const previousTotal = this.lastTrayTotal;
     this.els.count.textContent = count ? `${count} ${count === 1 ? "ticket" : "tickets"}` : "No seats selected";
     this.els.total.textContent = count ? this.money(total) : "";
-    const cta = this.els.cta;
-    cta.disabled = count === 0;
-    cta.textContent = this.hold ? "Continue to checkout" : count ? "Hold seats & checkout" : "Select seats";
+    this.syncCta(count, pendingCount);
+    if (this.hold) {
+      const securedCount = heldCount || this.hold.seats?.length || 0;
+      if (this.els.holdTitle) {
+        this.els.holdTitle.textContent = `${securedCount} ${securedCount === 1 ? "seat" : "seats"} secured`;
+      }
+      if (this.els.holdCopy) {
+        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected \u2014 secure before checkout.` : "Checkout timer is running.";
+      }
+    }
+    if (count !== previousCount) this.animateOnce(this.els.count, "sl-value-pop", 380);
+    if (total !== previousTotal) this.animateOnce(this.els.total, "sl-value-pop", 380);
+    if (previousCount === 0 && count > 0) this.animateOnce(this.els.cta, "sl-ready", 520);
     if (this.els.peek) {
       if (count) {
-        this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><span class="go">${this.hold ? "Continue" : "Review"}</span>`;
+        this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><span class="go">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</span>`;
       } else {
         const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
         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() {
-    const cta = this.els.cta;
-    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;
     }
-    cta.disabled = true;
-    cta.textContent = "Holding\u2026";
+    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;
@@ -1961,31 +2391,43 @@ var SeatPicker = class _SeatPicker {
         hold = h ? { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items } : hold;
       }
       if (!hold) {
-        this.toast("One or more seats were just taken. Please pick again.");
+        this.toast("One or more seats were just taken. Please pick again.", "error");
+        this.setCtaPhase("idle");
         this.syncTray();
         return;
       }
       this.hold = hold;
       this.handedOff = true;
       this.startHoldTimer(hold.expiresAt);
-      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? [], this.buildHandoff(hold));
+      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.");
+      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();
     }
   }
   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"]');
+    this.els.holdNote?.classList.add("on");
     const tick = () => {
       const ms = Math.max(0, this.holdExpiresAt - Date.now());
       const m = Math.floor(ms / 6e4);
       const s = String(Math.floor(ms % 6e4 / 1e3)).padStart(2, "0");
-      pill.textContent = `Held ${m}:${s}`;
+      if (time) time.textContent = `${m}:${s}`;
       pill.classList.add("on");
+      pill.classList.toggle("is-expiring", ms > 0 && ms <= EXTEND_PROMPT_MS);
       this.setExtendPrompt(ms > 0 && ms <= EXTEND_PROMPT_MS, ms);
       if (ms <= 0) this.stopHoldTimer();
     };
@@ -1995,7 +2437,8 @@ var SeatPicker = class _SeatPicker {
   stopHoldTimer() {
     if (this.holdTimer) clearInterval(this.holdTimer);
     this.holdTimer = null;
-    this.els.hold?.classList.remove("on");
+    this.els.hold?.classList.remove("on", "is-expiring");
+    this.els.holdNote?.classList.remove("on");
     this.setExtendPrompt(false, 0);
   }
   /** Show/refresh (or hide) the "Need more time?" prompt with the live seconds left. */
@@ -2020,13 +2463,15 @@ 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.toast("More time added \u2014 your seats are still held.");
+        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.");
+        this.toast("Couldn't add more time \u2014 please head to checkout now.", "warning");
       }
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("Couldn't add more time \u2014 please head to checkout now.");
+      this.toast("Couldn't add more time \u2014 please head to checkout now.", "warning");
     } finally {
       btn.disabled = false;
       btn.textContent = prev;
@@ -2050,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.`;
@@ -2074,13 +2520,25 @@ 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 };
   }
-  toast(msg) {
+  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;
     el.textContent = msg;
+    el.dataset.tone = tone;
     el.classList.add("on");
     if (this.toastTimer) clearTimeout(this.toastTimer);
-    this.toastTimer = setTimeout(() => el.classList.remove("on"), 4200);
+    this.toastTimer = setTimeout(() => {
+      el.classList.remove("on");
+      el.dataset.tone = "neutral";
+    }, 4200);
   }
   placeTooltip() {
     if (!this.tipEl) return;
@@ -2101,15 +2559,40 @@ 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) {
+      button.disabled = true;
+      button.innerHTML = '<span class="sl-ba-spin" aria-hidden="true"></span>Finding\u2026';
+    }
     try {
       const h = await this.controller.bestAvailable(qty, categoryKey);
       if (h) {
@@ -2117,30 +2600,67 @@ var SeatPicker = class _SeatPicker {
         this.handedOff = false;
         this.bookedShown = false;
         this.startHoldTimer(h.expiresAt);
+        this.flashHeldSeats(this.hold);
         this.syncTray();
+        this.emitHoldChange();
         return this.hold;
       }
       return null;
     } catch (err) {
       this.opts.onError?.(err);
+      this.toast("Those seats are no longer available. Try another quantity or category.", "error");
       return null;
+    } finally {
+      this.bestAvailableBusy = false;
+      if (!this.hold && button?.isConnected) {
+        button.disabled = false;
+        button.textContent = "Best available";
+      }
     }
   }
   async release() {
-    await this.controller.release();
+    const tracked = this.hold;
+    const controllerHold = this.controller.currentHold();
+    let released = true;
+    if (controllerHold) {
+      released = await this.controller.release();
+    } else if (tracked) {
+      const labels = [.../* @__PURE__ */ new Set([
+        ...(tracked.items ?? []).map((item) => item.label),
+        ...(tracked.seats ?? []).map((seat) => seat.label)
+      ])];
+      if (labels.length) {
+        try {
+          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;
+    if (this.hold && !this.handedOff) void this.controller.release();
     this.closeConfirm();
     this.closeSeatView();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
+    for (const timer of this.motionTimers) clearTimeout(timer);
+    this.motionTimers.clear();
     this.ro?.disconnect();
     this.ro = null;
     if (this.escHandler) document.removeEventListener("keydown", this.escHandler);