@seatlayer/js 0.12.3 → 0.14.0

package/dist/index.cjs

@@ -458,8 +458,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,7 +485,7 @@ 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}
@@ -537,10 +541,17 @@ var CSS = `
 .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 +569,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 +630,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 +662,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}
@@ -653,7 +688,8 @@ var CSS = `
 
 /* 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))}
+  border-radius:12px;padding:12px;box-shadow:0 18px 50px -18px rgba(0,0,0,.7);transform:translate(-50%,calc(-100% - 14px));
+  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}
@@ -671,8 +707,10 @@ var CSS = `
 .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{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: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 +816,27 @@ 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)}}
+
+@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 +877,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 +922,12 @@ 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.ctaPhase = "idle";
     // narrow-layout chrome that docks into the sheet's Filters row on mobile
     this.a11yChipsEl = null;
     this.cbEl = null;
@@ -874,9 +941,9 @@ var SeatPicker = class _SeatPicker {
     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.api = new PubApi((options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, ""));
     this.controller = new import_core2.PickerController({
-      transport: api,
+      transport: this.api,
       eventKey: options.event,
       maxSelection: options.maxSelection ?? DEFAULT_MAX_SELECTION2,
       currency: options.currency,
@@ -896,14 +963,16 @@ var SeatPicker = class _SeatPicker {
         this.hold = null;
         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.opts.onHoldExpired?.();
       },
       confirmSelection: options.confirmSelection,
       onSelect: (seat) => {
+        this.flashPickedSeat(seat.id);
         if (this.opts.confirmSelection) this.showConfirm(seat);
       },
       onViewChange: () => {
@@ -945,10 +1014,19 @@ 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) => {
@@ -1017,6 +1095,10 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-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>
@@ -1243,6 +1325,85 @@ 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. */
+  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 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.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);
+    }
+  }
   /** Section-bearing objects on the active floor (single-floor → doc.objects). */
   activeFloorObjects() {
     const doc = this.controller.doc;
@@ -1497,7 +1658,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 +1713,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 +1779,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;
@@ -1831,7 +2000,7 @@ var SeatPicker = class _SeatPicker {
     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;
@@ -1839,27 +2008,32 @@ var SeatPicker = class _SeatPicker {
     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}"><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>`
       );
     }
     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 +2045,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 +2064,14 @@ 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");
+        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,14 +2100,27 @@ 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>`;
@@ -1936,18 +2130,18 @@ var SeatPicker = class _SeatPicker {
       this.root.dataset.sheet = "open";
     }
     this.lastTrayCount = count;
+    this.lastTrayTotal = total;
     this.opts.onSelectionChange?.(seats);
   }
   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();
       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.setCtaPhase("holding");
     try {
       let hold = null;
       const gaEntries = [...this.gaQty.entries()].filter(([, q]) => q > 0);
@@ -1961,18 +2155,23 @@ 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.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 {
+      if (this.ctaPhase === "holding") this.ctaPhase = "idle";
       this.syncTray();
     }
   }
@@ -1980,12 +2179,16 @@ var SeatPicker = class _SeatPicker {
     this.stopHoldTimer();
     this.holdExpiresAt = expiresAt;
     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 +2198,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 +2224,13 @@ 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.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;
@@ -2074,13 +2278,17 @@ 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) {
+  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;
@@ -2110,6 +2318,13 @@ var SeatPicker = class _SeatPicker {
     return this.controller.getSelection();
   }
   async bestAvailable(qty, categoryKey) {
+    if (this.bestAvailableBusy) return null;
+    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 +2332,58 @@ var SeatPicker = class _SeatPicker {
         this.handedOff = false;
         this.bookedShown = false;
         this.startHoldTimer(h.expiresAt);
+        this.flashHeldSeats(this.hold);
         this.syncTray();
         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();
+    if (controllerHold) {
+      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);
+        }
+      }
+    }
     this.hold = null;
     this.handedOff = false;
     this.bookedShown = false;
+    this.ctaPhase = "idle";
     this.stopHoldTimer();
     this.gaQty.clear();
     this.syncTray();
   }
   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);
@@ -2361,11 +2604,44 @@ var CSS2 = `
   font-size:12px;font-weight:700;color:var(--slm-text);display:inline-flex;align-items:center;gap:6px}
 .slm-chip:hover{border-color:var(--slm-muted)}
 .slm-chip .dot{width:8px;height:8px;border-radius:50%}
+.slm-chip .slm-chipcount{min-width:18px;padding:1px 5px;border-radius:999px;background:rgba(255,255,255,.07);
+  color:var(--slm-muted);font-size:10px;font-variant-numeric:tabular-nums;text-align:center}
+.slm-chip .slm-chipcheck{display:none;font-size:11px;line-height:1}
+.slm-chip.on{border-color:var(--slm-accent);background:color-mix(in srgb,var(--slm-accent) 20%,var(--slm-surface));
+  box-shadow:0 0 0 1px color-mix(in srgb,var(--slm-accent) 45%,transparent)}
+.slm-chip.on .slm-chipcount{background:var(--slm-accent);color:var(--slm-accent-ink)}
+.slm-chip.on .slm-chipcheck{display:inline}
+.slm-chip.partial{border-style:dashed;border-color:var(--slm-accent)}
+.slm-chip:disabled{opacity:.42;cursor:not-allowed}
+.slm-selecthelp{margin:-1px 0 9px;color:var(--slm-muted);font-size:11px;line-height:1.4}
 .slm-field{margin:14px 0}
 .slm-field label{display:block;font-size:11px;font-weight:700;color:var(--slm-muted);margin-bottom:5px}
 .slm-input,.slm-select{width:100%;padding:8px 10px;border-radius:9px;border:1px solid var(--slm-line);
   background:var(--slm-surface);color:var(--slm-text)}
 .slm-note{font-size:11.5px;color:var(--slm-muted);margin-top:5px}
+.slm-blocked{margin-top:17px;padding-top:15px;border-top:1px solid var(--slm-line)}
+.slm-blockedhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
+.slm-blockedhead .slm-eyebrow{margin-bottom:0}.slm-blockedtotal{font-size:11px;color:var(--slm-muted)}
+.slm-blockedtotal b{color:var(--slm-text);font-variant-numeric:tabular-nums}
+.slm-blockedtools{display:grid;grid-template-columns:minmax(0,1fr);gap:7px}
+.slm-blockedsummary{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 6px;
+  color:var(--slm-muted);font-size:10.5px}
+.slm-linkbtn{font-size:11px!important;font-weight:800!important;color:var(--slm-accent)!important;text-align:right}
+.slm-linkbtn:disabled{opacity:.45;cursor:not-allowed}
+.slm-blockedlist{max-height:246px;overflow:auto;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface)}
+.slm-blockeditem{display:grid!important;grid-template-columns:18px minmax(0,1fr);width:100%;gap:8px;padding:8px 9px!important;
+  border-bottom:1px solid var(--slm-line)!important;text-align:left!important}
+.slm-blockeditem:last-child{border-bottom:0!important}.slm-blockeditem:hover{background:rgba(255,255,255,.035)!important}
+.slm-blockeditem.on{background:color-mix(in srgb,var(--slm-accent) 13%,var(--slm-surface))!important}
+.slm-blockedcheck{display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin-top:1px;border-radius:4px;
+  border:1px solid var(--slm-muted);color:transparent;font-size:10px;font-weight:900}
+.slm-blockeditem.on .slm-blockedcheck{border-color:var(--slm-accent);background:var(--slm-accent);color:var(--slm-accent-ink)}
+.slm-blockedcopy{min-width:0}.slm-blockedlabel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-size:12px;font-weight:800}.slm-blockedmeta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  margin-top:2px;color:var(--slm-muted);font-size:10px}
+.slm-blockedmore{width:100%;padding:9px!important;color:var(--slm-accent)!important;font-size:11px!important;font-weight:800!important}
+.slm-blockedempty{padding:12px;color:var(--slm-muted);font-size:11.5px;line-height:1.45}
+.slm-allnote{margin-top:-4px;margin-bottom:10px}
 
 /* toast */
 .slm-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;
@@ -2485,6 +2761,10 @@ var SeatManager = class {
     this.sectionByObject = /* @__PURE__ */ new Map();
     this.sectionLabelById = /* @__PURE__ */ new Map();
     this.lastSyncedAt = null;
+    this.blockedQuery = "";
+    this.blockedSection = "";
+    this.blockedResultLimit = 100;
+    this.unblockAllConfirmTimer = null;
     this.onFullscreenChange = () => {
       this.paintFullscreenButton();
       this.updateContainerLayout();
@@ -2630,13 +2910,13 @@ var SeatManager = class {
     const targets = (labels ?? this.selectionLabels()).filter((l) => this.status.get(l) === "free");
     if (!targets.length) return;
     const releaseAt = opts.releaseAt ?? this.releaseAt ?? void 0;
-    for (const l of targets) this.setSeatLocal(l, "blocked");
+    this.setSeatsLocal(targets, "blocked");
     try {
       await this.api.block(this.key, targets, { ...opts, releaseAt });
       this.clearSelection();
       this.done("block", targets, releaseAt ? `Blocked ${targets.length} \u2014 auto-release ${new Date(releaseAt).toLocaleString()}.` : `Blocked ${targets.length} seat${targets.length === 1 ? "" : "s"}.`);
     } catch (err) {
-      for (const l of targets) this.setSeatLocal(l, "free");
+      this.setSeatsLocal(targets, "free");
       this.toastErr(err instanceof ManageApiError && err.status === 409 ? "Some seats were just taken. Try again." : "Couldn't block those seats.");
       this.opts.onError?.(err);
     }
@@ -2644,13 +2924,13 @@ var SeatManager = class {
   async unblock(labels) {
     const targets = (labels ?? this.selectionLabels()).filter((l) => this.status.get(l) === "blocked");
     if (!targets.length) return;
-    for (const l of targets) this.setSeatLocal(l, "free");
+    this.setSeatsLocal(targets, "free");
     try {
       await this.api.unblock(this.key, targets);
       this.clearSelection();
       this.done("unblock", targets, `Unblocked ${targets.length} seat${targets.length === 1 ? "" : "s"}.`);
     } catch (err) {
-      for (const l of targets) this.setSeatLocal(l, "blocked");
+      this.setSeatsLocal(targets, "blocked");
       this.toastErr("Couldn't unblock those seats.");
       this.opts.onError?.(err);
     }
@@ -2658,9 +2938,10 @@ var SeatManager = class {
   async unblockAll() {
     const blocked = [...this.status.entries()].filter(([, s]) => s === "blocked").map(([l]) => l);
     if (!blocked.length) return;
-    for (const l of blocked) this.setSeatLocal(l, "free");
+    this.setSeatsLocal(blocked, "free");
     try {
       const res = await this.api.unblockAll(this.key);
+      this.clearSelection();
       this.done("unblockAll", blocked, `Unblocked ${res.freed} seat${res.freed === 1 ? "" : "s"}.`);
     } catch (err) {
       await this.resnapshot();
@@ -2672,13 +2953,13 @@ var SeatManager = class {
   async cancelBooking(labels, bookingRef) {
     const targets = labels.filter((l) => this.status.get(l) === "booked");
     if (!targets.length || !bookingRef) return;
-    for (const l of targets) this.setSeatLocal(l, "free");
+    this.setSeatsLocal(targets, "free");
     try {
       await this.api.unbook(this.key, targets, bookingRef);
       this.clearSelection();
       this.done("cancelBooking", targets, `Cancelled ${targets.length} booking${targets.length === 1 ? "" : "s"}.`);
     } catch (err) {
-      for (const l of targets) this.setSeatLocal(l, "booked");
+      this.setSeatsLocal(targets, "booked");
       this.toastErr("Couldn't cancel that booking. Check the reference.");
       this.opts.onError?.(err);
     }
@@ -2741,6 +3022,7 @@ var SeatManager = class {
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
     if (this.feedTimer) clearInterval(this.feedTimer);
     if (this.toastTimer) clearTimeout(this.toastTimer);
+    if (this.unblockAllConfirmTimer) clearTimeout(this.unblockAllConfirmTimer);
     if (this.revenueRefreshTimer) clearTimeout(this.revenueRefreshTimer);
     if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
     this.layoutObserver?.disconnect();
@@ -2919,11 +3201,16 @@ var SeatManager = class {
     this.afterPaint();
     this.recomputeTallies();
   }
-  /** Optimistic local write shared by delta stream + organizer actions. */
-  setSeatLocal(label, st) {
-    this.status.set(label, st);
-    const id = this.labelToId.get(label);
-    if (id) this.renderer?.setStatus([id], toRenderStatus(st));
+  /** Optimistic local write shared by organizer actions. Paint and tally once,
+   * even when an arena-sized operation changes hundreds of seats. */
+  setSeatsLocal(labels, st) {
+    const ids = [];
+    for (const label of labels) {
+      this.status.set(label, st);
+      const id = this.labelToId.get(label);
+      if (id) ids.push(id);
+    }
+    if (ids.length) this.renderer?.setStatus(ids, toRenderStatus(st));
     this.afterPaint();
     this.recomputeTallies();
   }
@@ -3006,6 +3293,7 @@ var SeatManager = class {
       this.paintLegend(t3);
       this.paintMonitorInsights();
     } else if (this.mode === "inspect") this.renderInspectRail(this.getSelection());
+    else if (this.mode === "block") this.paintSelBar(this.getSelection());
     this.opts.onTallies?.(t3);
   }
   verbFor(prev, next) {
@@ -3385,23 +3673,30 @@ var SeatManager = class {
   }
   renderBlockRail() {
     const cats = this.doc?.categories ?? [];
-    const catChips = cats.map((c) => `<button class="slm-chip" data-cat="${esc(c.key)}"><span class="dot" style="background:${esc(c.color ?? "#6e7bff")}"></span>${esc(c.label ?? c.key)}</button>`).join("");
+    const catChips = cats.map((c) => `<button class="slm-chip" type="button" data-cat="${esc(c.key)}" aria-pressed="false">
+        <span class="dot" style="background:${esc(c.color ?? "#6e7bff")}"></span>
+        <span>${esc(c.label ?? c.key)}</span>
+        <span class="slm-chipcount" data-cat-count>0</span>
+        <span class="slm-chipcheck" aria-hidden="true">\u2713</span>
+      </button>`).join("");
     const sectionField = this.sectionOptions.length ? `<div class="slm-field"><label>Select a whole section</label>
           <select class="slm-select" data-ref="section"><option value="">Choose a section\u2026</option>
           ${this.sectionOptions.map((s) => `<option value="${esc(s.id)}">${esc(s.label)}</option>`).join("")}</select></div>` : "";
+    const blockedSectionOptions = this.sectionOptions.map((s) => `<option value="${esc(s.id)}">${esc(s.label)}</option>`).join("");
     this.els.rail.innerHTML = `
       <p class="slm-eyebrow">Block &amp; unblock</p>
       <p class="slm-hint">Drag a box on the map to marquee-select, \u2318A for all, or pick a category/section. Booked and held inventory is never actionable here.</p>
-      <div class="slm-selbar"><span class="slm-selnum" data-ref="selnum">0</span><span class="slm-sellabel">selected</span></div>
+      <div class="slm-selbar" aria-live="polite"><span class="slm-selnum" data-ref="selnum">0</span><span class="slm-sellabel" data-ref="selmeta">selected</span></div>
       <div class="slm-row">
         <button class="slm-btn" data-ref="doblock" disabled>Block</button>
-        <button class="slm-btn ghost" data-ref="dounblock" disabled>Unblock</button>
+        <button class="slm-btn ghost" data-ref="dounblock" disabled>Put back on sale</button>
       </div>
       <div class="slm-row">
         <button class="slm-btn ghost" data-ref="selall">Select all</button>
         <button class="slm-btn ghost" data-ref="clearsel">Clear</button>
       </div>
-      <p class="slm-eyebrow" style="margin-top:8px">By category</p>
+      <p class="slm-eyebrow" style="margin-top:8px">Select by category</p>
+      <p class="slm-selecthelp">Choose one or more. A checked category is selected; click it again to remove it.</p>
       <div class="slm-chiprow">${catChips || '<span class="slm-empty">No categories.</span>'}</div>
       ${sectionField}
       <div class="slm-field">
@@ -3409,18 +3704,46 @@ var SeatManager = class {
         <input type="datetime-local" class="slm-input" data-ref="release" />
         <p class="slm-note" data-ref="releasenote">Leave empty to block permanently.</p>
       </div>
-      <div class="slm-row"><button class="slm-btn ghost" data-ref="markall" style="flex:1">Mark everything for sale</button></div>
+      <section class="slm-blocked" aria-labelledby="slm-blocked-title">
+        <div class="slm-blockedhead">
+          <p class="slm-eyebrow" id="slm-blocked-title">Blocked inventory</p>
+          <span class="slm-blockedtotal"><b data-ref="blockedcount">0</b> out of sale</span>
+        </div>
+        <p class="slm-selecthelp">Find blocked seats, select only the ones you need, then use \u201CPut back on sale\u201D.</p>
+        <div class="slm-blockedtools">
+          <input type="search" class="slm-input" data-ref="blockedsearch" placeholder="Find seat, row or category" aria-label="Search blocked seats" />
+          <select class="slm-select" data-ref="blockedsection" aria-label="Filter blocked seats by section">
+            <option value="">All sections</option>${blockedSectionOptions}
+          </select>
+        </div>
+        <div class="slm-blockedsummary">
+          <span data-ref="blockedshowing">No blocked seats</span>
+          <button type="button" class="slm-linkbtn" data-ref="selblocked" disabled>Select results</button>
+        </div>
+        <div class="slm-blockedlist" data-ref="blockedlist"></div>
+      </section>
+      <div class="slm-field">
+        <button class="slm-btn ghost" data-ref="markall" style="width:100%" disabled>Put all blocked seats on sale</button>
+        <p class="slm-note slm-allnote" data-ref="markallnote">For a full reset only. You will be asked to confirm.</p>
+      </div>
     `;
     const r = (n) => this.els.rail.querySelector(`[data-ref="${n}"]`);
     this.els.selnum = r("selnum");
     this.els.doblock = r("doblock");
     this.els.dounblock = r("dounblock");
+    this.els.selmeta = r("selmeta");
+    this.els.blockedcount = r("blockedcount");
+    this.els.blockedshowing = r("blockedshowing");
+    this.els.blockedlist = r("blockedlist");
+    this.els.selblocked = r("selblocked");
+    this.els.markall = r("markall");
+    this.els.markallnote = r("markallnote");
     r("doblock").addEventListener("click", () => void this.block());
     r("dounblock").addEventListener("click", () => void this.unblock());
     r("selall").addEventListener("click", () => this.selectAll());
     r("clearsel").addEventListener("click", () => this.clearSelection());
-    r("markall").addEventListener("click", () => void this.unblockAll());
-    this.els.rail.querySelectorAll("[data-cat]").forEach((b) => b.addEventListener("click", () => this.selectCategory(b.dataset.cat)));
+    r("markall").addEventListener("click", () => this.confirmUnblockAll());
+    this.els.rail.querySelectorAll("[data-cat]").forEach((b) => b.addEventListener("click", () => this.toggleCategory(b.dataset.cat)));
     const sectionSel = this.els.rail.querySelector('[data-ref="section"]');
     sectionSel?.addEventListener("change", () => {
       if (sectionSel.value) {
@@ -3428,6 +3751,32 @@ var SeatManager = class {
         sectionSel.value = "";
       }
     });
+    const blockedSearch = r("blockedsearch");
+    const blockedSection = r("blockedsection");
+    blockedSearch.value = this.blockedQuery;
+    blockedSection.value = this.blockedSection;
+    blockedSearch.addEventListener("input", () => {
+      this.blockedQuery = blockedSearch.value;
+      this.blockedResultLimit = 100;
+      this.paintBlockedInventory();
+    });
+    blockedSection.addEventListener("change", () => {
+      this.blockedSection = blockedSection.value;
+      this.blockedResultLimit = 100;
+      this.paintBlockedInventory();
+    });
+    r("selblocked").addEventListener("click", () => {
+      this.toggleLabels(this.filteredBlockedSeats().map((seat) => seat.label));
+    });
+    r("blockedlist").addEventListener("click", (event) => {
+      const target = event.target;
+      const seatButton = target.closest("[data-blocked-label]");
+      if (seatButton?.dataset.blockedLabel) this.toggleLabels([seatButton.dataset.blockedLabel]);
+      else if (target.closest("[data-blocked-more]")) {
+        this.blockedResultLimit += 100;
+        this.paintBlockedInventory();
+      }
+    });
     const rel = r("release");
     rel.addEventListener("change", () => {
       const ms = rel.value ? new Date(rel.value).getTime() : NaN;
@@ -3437,18 +3786,140 @@ var SeatManager = class {
     });
     this.paintSelBar(this.getSelection());
   }
-  selectCategory(catKey) {
+  toggleCategory(catKey) {
     const labels = [];
-    for (const [label, seat] of this.labelToSeat.entries()) if (seat.categoryKey === catKey) labels.push(label);
-    this.selectByLabels(labels);
+    for (const [label, seat] of this.labelToSeat.entries()) {
+      if (seat.categoryKey === catKey && this.isBlockSelectable(label)) labels.push(label);
+    }
+    this.toggleLabels(labels);
+  }
+  /** A category/filter is a real toggle: add the missing seats, or remove the
+   * whole group when every eligible seat in it is already selected. */
+  toggleLabels(labels) {
+    if (!this.renderer) return;
+    const eligible = labels.filter((label) => this.labelToSeat.has(label) && this.isBlockSelectable(label));
+    if (!eligible.length) return;
+    const selected = new Set(this.selectionLabels());
+    const allSelected = eligible.every((label) => selected.has(label));
+    if (allSelected) {
+      const ids = eligible.map((label) => this.labelToId.get(label)).filter((id) => Boolean(id));
+      this.renderer.deselect(ids);
+    } else {
+      this.renderer.selectByLabels(eligible);
+    }
+    this.syncSelection();
+  }
+  isBlockSelectable(label) {
+    const status = this.status.get(label) ?? "free";
+    return status === "free" || status === "blocked";
   }
   paintSelBar(seats) {
     if (!this.els.selnum) return;
     this.els.selnum.textContent = seats.length.toLocaleString();
-    const hasFree = seats.some((s) => this.status.get(s.label) === "free");
-    const hasBlocked = seats.some((s) => this.status.get(s.label) === "blocked");
-    this.els.doblock.disabled = !hasFree;
-    this.els.dounblock.disabled = !hasBlocked;
+    const freeCount = seats.filter((s) => (this.status.get(s.label) ?? "free") === "free").length;
+    const blockedCount = seats.filter((s) => this.status.get(s.label) === "blocked").length;
+    this.els.selmeta.textContent = seats.length ? `${freeCount.toLocaleString()} available \xB7 ${blockedCount.toLocaleString()} blocked` : "selected";
+    const blockButton = this.els.doblock;
+    const unblockButton = this.els.dounblock;
+    blockButton.disabled = freeCount === 0;
+    unblockButton.disabled = blockedCount === 0;
+    blockButton.textContent = freeCount ? `Block ${freeCount.toLocaleString()}` : "Block selected";
+    unblockButton.textContent = blockedCount ? `Put ${blockedCount.toLocaleString()} on sale` : "Put back on sale";
+    this.paintCategoryControls(seats);
+    this.paintBlockedInventory();
+  }
+  paintCategoryControls(seats) {
+    const selected = new Set(seats.map((seat) => seat.label));
+    this.els.rail?.querySelectorAll("[data-cat]").forEach((button) => {
+      const catKey = button.dataset.cat;
+      const labels = [];
+      for (const [label, seat] of this.labelToSeat.entries()) {
+        if (seat.categoryKey === catKey && this.isBlockSelectable(label)) labels.push(label);
+      }
+      const picked = labels.filter((label) => selected.has(label)).length;
+      const full = labels.length > 0 && picked === labels.length;
+      const partial = picked > 0 && !full;
+      button.disabled = labels.length === 0;
+      button.classList.toggle("on", full);
+      button.classList.toggle("partial", partial);
+      button.setAttribute("aria-pressed", full ? "true" : partial ? "mixed" : "false");
+      button.setAttribute("title", full ? `Remove all ${labels.length.toLocaleString()} seats in this category from the selection` : partial ? `Select the remaining ${(labels.length - picked).toLocaleString()} seats in this category` : `Select all ${labels.length.toLocaleString()} seats in this category`);
+      const count = button.querySelector("[data-cat-count]");
+      if (count) count.textContent = picked ? `${picked.toLocaleString()}/${labels.length.toLocaleString()}` : labels.length.toLocaleString();
+    });
+  }
+  filteredBlockedSeats() {
+    const query = this.blockedQuery.trim().toLocaleLowerCase();
+    const seats = [];
+    for (const [label, seat] of this.labelToSeat.entries()) {
+      if (this.status.get(label) !== "blocked") continue;
+      const sectionId = this.sectionByObject.get(seat.rowId) ?? import_core3.UNGROUPED_ID;
+      if (this.blockedSection && sectionId !== this.blockedSection) continue;
+      if (query) {
+        const category = this.doc?.categories.find((item) => item.key === seat.categoryKey)?.label ?? seat.categoryKey;
+        const section = this.sectionLabelById.get(sectionId) ?? "Other seats";
+        const object = this.doc?.objects.find((item) => item.id === seat.rowId);
+        const objectLabel = object?.type === "row" || object?.type === "table" ? object.label : "";
+        const haystack = `${label} ${category} ${section} ${objectLabel}`.toLocaleLowerCase();
+        if (!haystack.includes(query)) continue;
+      }
+      seats.push(seat);
+    }
+    return seats.sort((a, b) => a.label.localeCompare(b.label, void 0, { numeric: true, sensitivity: "base" }));
+  }
+  paintBlockedInventory() {
+    if (!this.els.blockedlist) return;
+    const allBlocked = [...this.status.entries()].filter(([, status]) => status === "blocked").length;
+    const filtered = this.filteredBlockedSeats();
+    const visible = filtered.slice(0, this.blockedResultLimit);
+    const selected = new Set(this.selectionLabels());
+    const selectedResults = filtered.filter((seat) => selected.has(seat.label)).length;
+    const allResultsSelected = filtered.length > 0 && selectedResults === filtered.length;
+    this.els.blockedcount.textContent = allBlocked.toLocaleString();
+    this.els.blockedshowing.textContent = filtered.length ? `Showing ${visible.length.toLocaleString()} of ${filtered.length.toLocaleString()}` : allBlocked ? "No matches" : "No blocked seats";
+    const selectResults = this.els.selblocked;
+    selectResults.disabled = filtered.length === 0;
+    selectResults.textContent = allResultsSelected ? `Remove ${filtered.length.toLocaleString()} results` : `Select ${filtered.length.toLocaleString()} results`;
+    this.els.blockedlist.innerHTML = visible.length ? visible.map((seat) => {
+      const sectionId = this.sectionByObject.get(seat.rowId) ?? import_core3.UNGROUPED_ID;
+      const section = this.sectionLabelById.get(sectionId) ?? "Other seats";
+      const category = this.doc?.categories.find((item) => item.key === seat.categoryKey)?.label ?? seat.categoryKey;
+      const isSelected = selected.has(seat.label);
+      return `<button type="button" class="slm-blockeditem${isSelected ? " on" : ""}" data-blocked-label="${esc(seat.label)}" aria-pressed="${isSelected}">
+        <span class="slm-blockedcheck" aria-hidden="true">\u2713</span>
+        <span class="slm-blockedcopy"><span class="slm-blockedlabel">${esc(seat.label)}</span>
+          <span class="slm-blockedmeta">${esc(section)} \xB7 ${esc(category)}</span></span>
+      </button>`;
+    }).join("") + (filtered.length > visible.length ? `<button type="button" class="slm-blockedmore" data-blocked-more>Show 100 more</button>` : "") : `<div class="slm-blockedempty">${allBlocked ? "No blocked seats match this search or section." : "No seats are blocked. Newly blocked seats will appear here."}</div>`;
+    const markAll = this.els.markall;
+    const armed = markAll.dataset.confirm === "true";
+    markAll.disabled = allBlocked === 0;
+    markAll.textContent = armed ? `Confirm: put all ${allBlocked.toLocaleString()} on sale` : `Put all ${allBlocked.toLocaleString()} blocked seats on sale`;
+  }
+  confirmUnblockAll() {
+    const button = this.els.markall;
+    if (!button || button.disabled) return;
+    if (button.dataset.confirm === "true") {
+      this.resetUnblockAllConfirm();
+      void this.unblockAll();
+      return;
+    }
+    button.dataset.confirm = "true";
+    button.classList.add("danger");
+    this.els.markallnote.textContent = "This changes every blocked seat. Click the red button again to confirm.";
+    this.paintBlockedInventory();
+    if (this.unblockAllConfirmTimer) clearTimeout(this.unblockAllConfirmTimer);
+    this.unblockAllConfirmTimer = setTimeout(() => this.resetUnblockAllConfirm(), 6e3);
+  }
+  resetUnblockAllConfirm() {
+    if (this.unblockAllConfirmTimer) clearTimeout(this.unblockAllConfirmTimer);
+    this.unblockAllConfirmTimer = null;
+    const button = this.els.markall;
+    if (!button) return;
+    delete button.dataset.confirm;
+    button.classList.remove("danger");
+    if (this.els.markallnote) this.els.markallnote.textContent = "For a full reset only. You will be asked to confirm.";
+    this.paintBlockedInventory();
   }
   // ---- toast / done / fail --------------------------------------------------
   done(action, labels, msg) {