@seatlayer/js 0.16.0 → 0.17.0

package/dist/index.js

@@ -476,7 +476,7 @@ var CSS = `
 .sl-body{display:flex;flex:1;min-height:0}
 .sl-map{position:relative;flex:1;min-width:0}
 .sl-map-host{position:absolute;inset:0}
-.sl-side{width:300px;flex:none;border-left:1px solid var(--sl-line);display:flex;flex-direction:column;min-height:0;overflow-y:auto}
+.sl-side{width:300px;flex:none;border-left:1px solid var(--sl-line);display:flex;flex-direction:column;min-height:0;overflow:hidden}
 
 /* narrow (container < 640px): map-first \u2014 the map claims ~80-85% of the
    container and the side panel becomes a PEEKING bottom sheet (AXS/Ticketmaster
@@ -559,6 +559,7 @@ var CSS = `
 .sl-price-select{min-height:32px;max-width:130px;padding:5px 28px 5px 9px;border:1px solid var(--sl-line);border-radius:9px;
   background:var(--sl-surface);color:var(--sl-text);font:inherit;font-size:11px;font-weight:750;letter-spacing:0;text-transform:none}
 .sl-prices{padding:5px 14px 10px;border-bottom:1px solid var(--sl-line)}
+.sl-prices-sec,.sl-prices,.sl-seats-sec{flex:none}
 .sl-price-row{display:flex;align-items:center;gap:7px;min-height:28px;font-size:12px}
 .sl-dot{width:9px;height:9px;border-radius:50%;flex:none}
 .sl-price-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
@@ -575,7 +576,8 @@ var CSS = `
 /* tray */
 .sl-seats-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
 .sl-seat-summary{font-size:10px;letter-spacing:0;text-transform:none;white-space:nowrap}
-.sl-tray{flex:1;padding:10px 14px;display:flex;flex-direction:column;gap:7px;min-height:0}
+.sl-tray{flex:1;padding:10px 14px 14px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;
+  overscroll-behavior:contain;scrollbar-gutter:stable}
 .sl-tray-hint{font-size:12.5px;color:var(--sl-muted);line-height:1.5}
 .sl-chip{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto 30px;align-items:center;gap:8px;
   min-height:53px;padding:7px 7px 7px 9px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm);
@@ -610,16 +612,22 @@ var CSS = `
 .sl-ga-qty span{min-width:16px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
 
 /* 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);
+.sl-foot{position:relative;z-index:2;padding:12px 16px 14px;border-top:1px solid var(--sl-line);flex:none;
+  background:var(--sl-bg);box-shadow:0 -10px 24px -22px rgba(0,0,0,.72)}
+.sl-hold-note{display:none;align-items:center;gap:7px;margin-bottom:8px;padding:7px 8px;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-hold-note b{display:block;color:var(--sl-text);font-size:11.5px;white-space:nowrap}
+.sl-hold-copy{display:block;white-space:nowrap;font-size:10.5px}
+.sl-hold-note>span{flex:1;min-width:0}
+.sl-hold-change{flex:none;min-height:30px;padding:5px 8px;border-radius:8px;border:1px solid var(--sl-line);
+  color:var(--sl-text);font-size:10.5px;font-weight:750;white-space:nowrap}
+.sl-hold-change:hover,.sl-hold-change:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-hold-change:disabled{opacity:.58;cursor:wait}
 .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)}
@@ -677,6 +685,9 @@ var CSS = `
   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) scale(1)}
+.sl-toast.has-action{pointer-events:auto;display:flex;align-items:center;gap:12px;padding-right:8px}
+.sl-toast-action{min-height:30px;padding:5px 10px;border-radius:999px;background:var(--sl-accent);color:var(--sl-accent-ink);
+  font:inherit;font-weight:800}
 .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}
@@ -780,6 +791,12 @@ var CSS = `
   box-shadow:0 8px 18px color-mix(in srgb,var(--sl-accent) 18%,transparent)}
 .sl-picker .sl-ba-go:hover{filter:brightness(1.06)}
 .sl-picker .sl-ba-go:disabled{opacity:.62;cursor:wait}
+.sl-ba-replace{grid-column:1/-1;padding:3px 0 1px}
+.sl-ba-replace b{display:block;font-size:12.5px}
+.sl-ba-replace span{display:block;margin-top:3px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
+.sl-ba-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px}
+.sl-ba-actions button{min-height:36px;border-radius:9px;border:1px solid var(--sl-line);font-size:11.5px;font-weight:800}
+.sl-ba-actions .replace{border-color:var(--sl-accent);background:var(--sl-accent);color:var(--sl-accent-ink)}
 .sl-picker[data-layout="narrow"] .sl-ba{padding:11px}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .wide{display:none}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .narrow{display:inline}
@@ -971,6 +988,8 @@ var SeatPicker = class _SeatPicker {
     this.a11yFilter = "all";
     this.baQty = 2;
     this.baCat = "";
+    this.bestAvailableConfirm = false;
+    this.releasingHold = false;
     // arena / multi-floor / seat-view chrome
     this.rungsEl = null;
     this.floorsEl = null;
@@ -1018,10 +1037,11 @@ var SeatPicker = class _SeatPicker {
     this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
     this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
     this.api = new PubApi(this.apiBase);
+    this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.controller = new PickerController2({
       transport: this.api,
       eventKey: options.event,
-      maxSelection: options.maxSelection ?? DEFAULT_MAX_SELECTION2,
+      maxSelection: this.maxTickets,
       currency: options.currency,
       flashOnLiveChange: true,
       colorblindSafe: options.colorblindSafe,
@@ -1056,6 +1076,9 @@ var SeatPicker = class _SeatPicker {
       onDeselect: (seat) => {
         if (this.confirmSeat?.id === seat.id) this.dismissConfirm();
       },
+      onSelectionLimit: () => {
+        this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
+      },
       onViewChange: () => {
         this.reanchorConfirm();
         this.syncRung();
@@ -1118,6 +1141,10 @@ var SeatPicker = class _SeatPicker {
       if (picker.confirmSeat) {
         e.preventDefault();
         picker.cancelConfirm();
+      } else if (picker.bestAvailableConfirm) {
+        e.preventDefault();
+        picker.bestAvailableConfirm = false;
+        picker.syncTray();
       } else {
         close();
       }
@@ -1141,10 +1168,17 @@ var SeatPicker = class _SeatPicker {
     this.root = root;
     mount.appendChild(root);
     root.addEventListener("keydown", (e) => {
-      if (e.key !== "Escape" || !this.confirmSeat) return;
-      e.preventDefault();
-      e.stopPropagation();
-      this.cancelConfirm();
+      if (e.key !== "Escape") return;
+      if (this.confirmSeat) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancelConfirm();
+      } else if (this.bestAvailableConfirm) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.bestAvailableConfirm = false;
+        this.syncTray();
+      }
     });
     Object.entries(resolveTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     root.innerHTML = `
@@ -1192,6 +1226,7 @@ var SeatPicker = class _SeatPicker {
             <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>
+              <button type="button" class="sl-hold-change" data-ref="holdChange" aria-label="Release held tickets and choose different seats">Change</button>
             </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>
@@ -1269,6 +1304,7 @@ var SeatPicker = class _SeatPicker {
       if (this.tipEl && this.tipEl.style.display !== "none") this.placeTooltip();
     });
     this.els.cta.addEventListener("click", () => void this.handleCta());
+    this.els.holdChange?.addEventListener("click", () => void this.handleChangeSeats());
     const canvasHost = document.createElement("div");
     canvasHost.style.cssText = "position:absolute;inset:0";
     this.mapHost.appendChild(canvasHost);
@@ -1475,15 +1511,51 @@ var SeatPicker = class _SeatPicker {
     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;
+    return pendingSeats + this.pendingGACount();
+  }
+  heldGACounts() {
     const heldGA = /* @__PURE__ */ new Map();
-    for (const item of heldItems.filter((candidate) => candidate.objectType === "ga")) {
+    for (const item of (this.hold?.items ?? []).filter((candidate) => candidate.objectType === "ga")) {
       heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
     }
-    const pendingGA = [...this.gaQty.entries()].reduce(
+    return heldGA;
+  }
+  pendingGACount() {
+    const heldGA = this.heldGACounts();
+    return [...this.gaQty.entries()].reduce(
       (sum, [areaId, qty]) => sum + Math.max(0, qty - (heldGA.get(areaId) ?? 0)),
       0
     );
-    return pendingSeats + pendingGA;
+  }
+  heldTicketCount() {
+    return (this.hold?.items ?? []).reduce((sum, item) => sum + (item.quantity ?? 1), 0);
+  }
+  totalTicketCount() {
+    const heldLabels = new Set((this.hold?.items ?? []).map((item) => item.label));
+    const freshSeats = this.committedSelection().filter((seat) => !heldLabels.has(seat.label)).length;
+    return this.heldTicketCount() + freshSeats + this.pendingGACount();
+  }
+  /** Held tickets and standing quantities consume the same order-wide cap. */
+  updateSelectionCapacity() {
+    const heldLabels = new Set((this.hold?.items ?? []).map((item) => item.label));
+    const selectedHeld = this.committedSelection().filter((seat) => heldLabels.has(seat.label)).length;
+    const remaining = Math.max(0, this.maxTickets - this.heldTicketCount() - this.pendingGACount());
+    this.controller.setMaxSelection(selectedHeld + remaining);
+  }
+  canAddTicket() {
+    if (this.totalTicketCount() < this.maxTickets) return true;
+    this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
+    return false;
+  }
+  pendingGATotal(gaAreas) {
+    const heldGA = /* @__PURE__ */ new Map();
+    for (const item of (this.hold?.items ?? []).filter((candidate) => candidate.objectType === "ga")) {
+      heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
+    }
+    return gaAreas.reduce(
+      (sum, area) => sum + area.price * Math.max(0, (this.gaQty.get(area.id) ?? 0) - (heldGA.get(area.id) ?? 0)),
+      0
+    );
   }
   syncCta(count = this.lastTrayCount, pending = this.pendingSelectionCount()) {
     const cta = this.els.cta;
@@ -2210,6 +2282,7 @@ var SeatPicker = class _SeatPicker {
   }
   syncTray() {
     if (!this.els.tray) return;
+    this.updateSelectionCapacity();
     const seats = this.committedSelection();
     const gaAreas = this.controller.getGAAreas();
     const heldItems = this.hold?.items ?? [];
@@ -2222,9 +2295,7 @@ var SeatPicker = class _SeatPicker {
     }
     if (!this.hold) {
       const cats = this.controller.doc?.categories ?? [];
-      parts.push(
-        `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`
-      );
+      parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
     }
     for (const item of heldItems) {
       const itemKey = `held:${item.label}`;
@@ -2259,7 +2330,7 @@ var SeatPicker = class _SeatPicker {
     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)));
+        this.baQty = Math.max(1, Math.min(this.maxTickets, this.baQty + Number(btn.dataset.ba)));
         this.syncTray();
       });
     });
@@ -2267,6 +2338,21 @@ var SeatPicker = class _SeatPicker {
       this.baCat = e.target.value;
     });
     this.els.tray.querySelector(".sl-ba-go")?.addEventListener("click", () => {
+      if (this.pendingSelectionCount() > 0) {
+        this.bestAvailableConfirm = true;
+        this.syncTray();
+        this.els.tray.querySelector("[data-ba-replace]")?.focus();
+        return;
+      }
+      void this.bestAvailable(this.baQty, this.baCat || void 0);
+    });
+    this.els.tray.querySelector("[data-ba-cancel]")?.addEventListener("click", () => {
+      this.bestAvailableConfirm = false;
+      this.syncTray();
+      this.els.tray.querySelector(".sl-ba-go")?.focus();
+    });
+    this.els.tray.querySelector("[data-ba-replace]")?.addEventListener("click", () => {
+      this.bestAvailableConfirm = false;
       void this.bestAvailable(this.baQty, this.baCat || void 0);
     });
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
@@ -2277,12 +2363,26 @@ var SeatPicker = class _SeatPicker {
           return;
         }
         const id = chip.dataset.seat;
-        if (this.reducedMotion()) {
+        const label = chip.querySelector("b")?.textContent ?? "Seat";
+        const remove = () => {
           this.controller.deselect([id]);
+          this.toast(`${label} removed.`, "neutral", {
+            label: "Undo",
+            onClick: () => {
+              const restored = this.controller.select([id]);
+              this.toast(
+                restored.length ? `${label} restored.` : `${label} is no longer available.`,
+                restored.length ? "success" : "warning"
+              );
+            }
+          });
+        };
+        if (this.reducedMotion()) {
+          remove();
           return;
         }
         chip.classList.add("sl-leave");
-        this.scheduleMotion(() => this.controller.deselect([id]), 150);
+        this.scheduleMotion(remove, 150);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip .tier").forEach((sel) => {
@@ -2299,13 +2399,15 @@ var SeatPicker = class _SeatPicker {
         const areaEl = btn.closest(".sl-ga");
         const id = areaEl.dataset.ga;
         const area = gaAreas.find((a) => a.id === id);
-        const next = Math.max(0, Math.min(area?.available ?? 0, (this.gaQty.get(id) ?? 0) + Number(btn.dataset.d)));
+        const delta = Number(btn.dataset.d);
+        if (delta > 0 && !this.canAddTicket()) return;
+        const next = Math.max(0, Math.min(area?.available ?? 0, (this.gaQty.get(id) ?? 0) + delta));
         this.gaQty.set(id, next);
         this.syncTray();
       });
     });
-    const gaTotal = gaAreas.reduce((sum, a) => sum + a.price * (this.gaQty.get(a.id) ?? 0), 0);
-    const gaCount = [...this.gaQty.values()].reduce((a, b) => a + b, 0);
+    const gaTotal = this.pendingGATotal(gaAreas);
+    const gaCount = this.pendingGACount();
     const heldTotal = heldItems.reduce((sum, item) => sum + item.unitPrice * (item.quantity ?? 1), 0);
     const heldCount = heldItems.reduce((sum, item) => sum + (item.quantity ?? 1), 0);
     const freshSeats = seats.filter((seat) => !heldLabels.has(seat.label));
@@ -2325,10 +2427,15 @@ var SeatPicker = class _SeatPicker {
     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`;
+        this.els.holdTitle.textContent = `${securedCount} secured`;
       }
       if (this.els.holdCopy) {
-        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected \u2014 secure before checkout.` : "Checkout timer is running.";
+        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected` : "Checkout timer running";
+      }
+      const change = this.els.holdChange;
+      if (change) {
+        change.disabled = this.releasingHold;
+        change.textContent = this.releasingHold ? "Releasing\u2026" : "Change";
       }
     }
     if (count !== previousCount) this.animateOnce(this.els.count, "sl-value-pop", 380);
@@ -2380,7 +2487,30 @@ var SeatPicker = class _SeatPicker {
       if (button?.isConnected) button.disabled = false;
     }
   }
+  async handleChangeSeats() {
+    if (!this.hold || this.releasingHold) return;
+    this.releasingHold = true;
+    const button = this.els.holdChange;
+    if (button) {
+      button.disabled = true;
+      button.textContent = "Releasing\u2026";
+    }
+    try {
+      await this.release();
+      if (!this.hold) this.toast("Held tickets released. Choose your new seats.", "success");
+    } finally {
+      this.releasingHold = false;
+      if (button?.isConnected) {
+        button.disabled = false;
+        button.textContent = "Change";
+      }
+    }
+  }
   async handleCta() {
+    if (this.totalTicketCount() > this.maxTickets) {
+      this.toast(`Remove tickets until your order has ${this.maxTickets} or fewer.`, "warning");
+      return;
+    }
     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;
@@ -2418,7 +2548,10 @@ var SeatPicker = class _SeatPicker {
       this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("One or more seats were just taken. Please pick again.", "error");
+      const problem = err;
+      const labels = (problem.conflicts ?? []).map((conflict) => conflict.label).filter(Boolean).slice(0, 3);
+      const message = problem.reason === "event_closed" ? "Seat sales have closed for this event." : labels.length ? `${labels.join(", ")} ${labels.length === 1 ? "is" : "are"} no longer available. Choose another ${labels.length === 1 ? "seat" : "group"}.` : "One or more seats were just taken. Please pick again.";
+      this.toast(message, "error");
       this.setCtaPhase("idle");
     } finally {
       this.holdingLabels.clear();
@@ -2541,15 +2674,28 @@ var SeatPicker = class _SeatPicker {
       hold ? this.buildHandoff(hold) : null
     );
   }
-  toast(msg, tone = "neutral") {
+  toast(msg, tone = "neutral", action) {
     const el = this.els.toast;
     if (!el) return;
-    el.textContent = msg;
+    el.replaceChildren();
+    const copy = document.createElement("span");
+    copy.textContent = msg;
+    el.appendChild(copy);
+    el.classList.toggle("has-action", !!action);
+    if (action) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "sl-toast-action";
+      button.textContent = action.label;
+      button.addEventListener("click", action.onClick, { once: true });
+      el.appendChild(button);
+    }
     el.dataset.tone = tone;
     el.classList.add("on");
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.toastTimer = setTimeout(() => {
       el.classList.remove("on");
+      el.classList.remove("has-action");
       el.dataset.tone = "neutral";
     }, 4200);
   }
@@ -2599,7 +2745,9 @@ var SeatPicker = class _SeatPicker {
   }
   async bestAvailable(qty, categoryKey) {
     if (this.bestAvailableBusy) return null;
+    qty = Math.max(1, Math.min(this.maxTickets, Math.floor(qty)));
     if (this.confirmSeat) this.cancelConfirm();
+    this.bestAvailableConfirm = false;
     this.bestAvailableBusy = true;
     const button = this.els.tray?.querySelector(".sl-ba-go");
     if (button) {
@@ -2612,6 +2760,7 @@ var SeatPicker = class _SeatPicker {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
         this.handedOff = false;
         this.bookedShown = false;
+        this.gaQty.clear();
         this.startHoldTimer(h.expiresAt);
         this.flashHeldSeats(this.hold);
         this.syncTray();
@@ -2621,14 +2770,13 @@ var SeatPicker = class _SeatPicker {
       return null;
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("Those seats are no longer available. Try another quantity or category.", "error");
+      const reason = err?.reason;
+      const message = reason === "not_enough_together" ? `We couldn't find ${qty} seats together. Try fewer seats or another ticket type.` : reason === "sold_out" ? "That ticket type is sold out. Try another ticket type." : reason === "event_closed" ? "Seat sales have closed for this event." : "Those seats are no longer available. Try another quantity or ticket type.";
+      this.toast(message, "error");
       return null;
     } finally {
       this.bestAvailableBusy = false;
-      if (!this.hold && button?.isConnected) {
-        button.disabled = false;
-        button.textContent = "Best available";
-      }
+      this.syncTray();
     }
   }
   async release() {
@@ -2818,6 +2966,8 @@ function toRenderStatus(s) {
 var DEFAULT_API_BASE3 = "https://api.seatlayer.io";
 var STYLE_ID2 = "seatlayer-manager-style";
 var FEED_CAP = 80;
+var MAX_LIVE_SEAT_PULSES = 16;
+var MAX_LIVE_SECTION_PULSES = 4;
 var LEGEND = [
   { key: "free", label: "Free", color: "#6e7bff" },
   { key: "held", label: "Held", color: "#f4b740" },
@@ -2843,13 +2993,21 @@ var CSS2 = `
 @keyframes slm-pulse{0%{box-shadow:0 0 0 0 rgba(34,160,107,.5)}70%{box-shadow:0 0 0 7px rgba(34,160,107,0)}100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}}
 .slm-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;padding-top:10px;
   border-top:1px solid var(--slm-line)}
-.slm-kpi{display:flex;min-width:0;flex-direction:column;align-items:center;padding:0 5px;line-height:1.15;text-align:center}
+.slm-kpi{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;padding:0 5px;line-height:1.15;text-align:center}
 .slm-kpi b{display:flex;min-width:0;align-items:baseline;justify-content:center;font-size:17px;font-weight:800;
   font-variant-numeric:tabular-nums;white-space:nowrap}
 .slm-kpi span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slm-muted);font-weight:700}
 .slm-kpi .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:baseline}
+.slm-kpi.changed b{animation:slm-kpi-bump .58s cubic-bezier(.2,.8,.2,1)}
+.slm-kpidelta{position:absolute;right:4px;top:-12px;padding:2px 5px;border-radius:999px;background:rgba(34,160,107,.17);
+  color:#5bd39b!important;font-size:9px!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;
+  animation:slm-kpi-delta 1.45s ease-out both;pointer-events:none}
+.slm-kpidelta.down{background:rgba(244,183,64,.14);color:#f7ca6b!important}
+@keyframes slm-kpi-bump{0%,100%{transform:none}35%{transform:translateY(-2px) scale(1.08);text-shadow:0 0 18px rgba(255,255,255,.24)}}
+@keyframes slm-kpi-delta{0%{opacity:0;transform:translateY(5px)}18%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}
 .slm-barbtn{padding:7px 13px;border-radius:9px;border:1px solid var(--slm-line);color:var(--slm-text);font-weight:700;font-size:12.5px}
 .slm-barbtn:hover{border-color:var(--slm-muted)}
+.slm-barbtn.follow.on{background:rgba(34,160,107,.13);border-color:#22a06b;color:#5bd39b}
 
 /* body */
 .slm-body{display:flex;flex:1;min-height:0}
@@ -2861,6 +3019,14 @@ var CSS2 = `
 .slm-zoomhint{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:6px 13px;border-radius:999px;
   background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .2s}
 .slm-zoomhint.on{opacity:1}
+.slm-liveevent{position:absolute;left:50%;top:14px;z-index:4;display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100% - 32px));
+  padding:8px 12px;border:1px solid var(--slm-line);border-radius:999px;background:color-mix(in srgb,var(--slm-surface) 92%,transparent);
+  box-shadow:0 10px 34px rgba(0,0,0,.32);opacity:0;transform:translate(-50%,-8px);pointer-events:none;
+  transition:opacity .18s ease,transform .24s ease;backdrop-filter:blur(10px)}
+.slm-liveevent.on{opacity:1;transform:translate(-50%,0)}
+.slm.block-mode .slm-liveevent{top:52px}
+.slm-liveeventdot{width:8px;height:8px;border-radius:50%;flex:none}.slm-liveeventcopy{min-width:0;overflow:hidden;text-overflow:ellipsis;
+  white-space:nowrap;font-size:12px;font-weight:800}.slm-liveeventhint{color:var(--slm-muted);font-size:10px;white-space:nowrap}
 .slm-rail{width:320px;flex:none;border-left:1px solid var(--slm-line);display:flex;flex-direction:column;min-height:0}
 .slm-railscroll{flex:1;overflow-y:auto;padding:16px}
 .slm-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slm-muted);font-weight:800;margin-bottom:6px}
@@ -2875,13 +3041,16 @@ var CSS2 = `
 
 /* activity feed */
 .slm-feed{display:flex;flex-direction:column;gap:0}
-.slm-feedrow{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--slm-line);
-  font-size:12.5px;animation:slm-in .35s ease}
+.slm-feedrow{display:flex!important;width:100%;align-items:center;gap:9px;padding:8px 2px!important;border-bottom:1px solid var(--slm-line)!important;
+  border-radius:6px;font-size:12.5px;text-align:left!important;animation:slm-in .35s ease}
+.slm-feedrow:hover{background:rgba(255,255,255,.035)!important}
 @keyframes slm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
 .slm-feeddot{width:8px;height:8px;border-radius:50%;flex:none}
 .slm-feedtext{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .slm-feedtext b{font-weight:800}
-.slm-feedtime{font-size:11px;color:var(--slm-muted);font-variant-numeric:tabular-nums;flex:none}
+.slm-feedsection{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--slm-muted);font-size:10px;font-weight:750}
+.slm-feedmeta{display:flex;flex:none;flex-direction:column;align-items:flex-end;gap:1px}.slm-feedtime{font-size:10px;color:var(--slm-muted);font-variant-numeric:tabular-nums}
+.slm-feedlocate{font-size:9.5px;color:var(--slm-accent);font-weight:800}
 .slm-empty{font-size:12.5px;color:var(--slm-muted);padding:12px 0}
 
 /* block toolbar */
@@ -2951,10 +3120,13 @@ var CSS2 = `
 .slm-barbtn.on{background:rgba(244,183,64,.13);border-color:#f4b740;color:#f7ca6b}
 .slm-sectionlist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
 .slm-sectionlist + .slm-eyebrow{margin-top:18px}
-.slm-sectionrow{padding:10px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface)}
+.slm-sectionrow{width:100%;padding:10px!important;border:1px solid var(--slm-line)!important;border-radius:10px;background:var(--slm-surface)!important;text-align:left!important;transition:border-color .15s ease,transform .15s ease}
+.slm-sectionrow:hover{border-color:var(--slm-muted)!important;transform:translateY(-1px)}
 .slm-sectiontop,.slm-sectionmeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .slm-sectiontop{font-size:12.5px;font-weight:800}.slm-sectionmeta{margin-top:5px;color:var(--slm-muted);font-size:11px}
+.slm-sectionmeta>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .slm-trend{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.slm-trend.rising{color:#22a06b}.slm-trend.cooling{color:#f4b740}
+.slm-sectionlocate{color:var(--slm-accent);font-size:9.5px;font-weight:800}
 .slm-health{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
 .slm-healthitem{padding:10px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface)}
 .slm-healthitem b{display:block;font-size:17px;font-variant-numeric:tabular-nums}.slm-healthitem span{display:block;margin-top:2px;color:var(--slm-muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
@@ -2981,6 +3153,10 @@ var CSS2 = `
 .slm.compact .slm-barbtn{flex:1;padding:6px 9px}.slm.compact .slm-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .slm.compact .slm-kpi[data-kpi="buyers"],.slm.compact .slm-kpi[data-kpi="active-holds"],
 .slm.compact .slm-kpi[data-kpi="sold-pct"],.slm.compact .slm-kpi[data-kpi="gross-sales"]{display:none}
+@media (prefers-reduced-motion:reduce){
+  .slm.live .slm-live-dot,.slm-feedrow,.slm-kpi.changed b,.slm-kpidelta{animation:none!important}
+  .slm-liveevent,.slm-sectionrow{transition:none!important}
+}
 `;
 function injectStyle() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
@@ -3039,6 +3215,8 @@ var SeatManager = class {
     this.controlRoomSnapshot = null;
     this.trendWindowMinutes = 15;
     this.heatEnabled = false;
+    this.lastKpiValues = /* @__PURE__ */ new Map();
+    this.activeKpiDeltas = /* @__PURE__ */ new Map();
     // realtime socket
     this.ws = null;
     this.reconnectTimer = null;
@@ -3048,6 +3226,10 @@ var SeatManager = class {
     this.feed = [];
     this.feedTimer = null;
     this.toastTimer = null;
+    this.liveEventTimer = null;
+    this.kpiCleanupTimer = null;
+    this.followLiveTimer = null;
+    this.followSeatTimer = null;
     this.releaseAt = null;
     this.layoutObserver = null;
     this.tokenExpiresAt = null;
@@ -3077,11 +3259,22 @@ var SeatManager = class {
       else return;
       event.preventDefault();
     };
+    this.onRailClick = (event) => {
+      const target = event.target;
+      const sectionButton = target?.closest("[data-section-focus]");
+      if (sectionButton?.dataset.sectionFocus) {
+        this.locateSection(sectionButton.dataset.sectionFocus);
+        return;
+      }
+      const feedButton = target?.closest("[data-feed-id]");
+      if (feedButton?.dataset.feedId) this.locateActivity(feedButton.dataset.feedId);
+    };
     this.sectionOptions = [];
     this.opts = options;
     this.key = options.eventKey;
     this.mode = options.mode ?? "view";
     this.keepLive = options.keepLiveWhileHidden ?? true;
+    this.followLive = options.followLive ?? false;
     this.currency = options.currency ?? "USD";
     this.tokenExpiresAt = options.tokenExpiresAt ?? null;
     this.api = new ManageApi(options.apiBase ?? DEFAULT_API_BASE3, options.token);
@@ -3138,6 +3331,19 @@ var SeatManager = class {
     this.applyHeatOverlay();
     this.paintHeatButton();
   }
+  /** Toggle opt-in camera following for new buyer hold/book events. */
+  setFollowLive(enabled) {
+    const changed = this.followLive !== enabled;
+    this.followLive = enabled;
+    if (!enabled) {
+      if (this.followLiveTimer) clearTimeout(this.followLiveTimer);
+      if (this.followSeatTimer) clearTimeout(this.followSeatTimer);
+      this.followLiveTimer = null;
+      this.followSeatTimer = null;
+    }
+    this.paintFollowLiveButton();
+    if (changed) this.opts.onFollowLiveChange?.(enabled);
+  }
   /** Change the current-vs-previous sales window and refresh the private projection. */
   setTrendWindow(windowMinutes) {
     const normalized = Number.isFinite(windowMinutes) ? Math.floor(windowMinutes) : 15;
@@ -3310,6 +3516,7 @@ var SeatManager = class {
     return Promise.resolve();
   }
   zoomToFit() {
+    this.renderer?.clearSectionFocus();
     this.renderer?.zoomToFit();
   }
   destroy() {
@@ -3317,12 +3524,17 @@ var SeatManager = class {
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
     if (this.feedTimer) clearInterval(this.feedTimer);
     if (this.toastTimer) clearTimeout(this.toastTimer);
+    if (this.liveEventTimer) clearTimeout(this.liveEventTimer);
+    if (this.kpiCleanupTimer) clearTimeout(this.kpiCleanupTimer);
+    if (this.followLiveTimer) clearTimeout(this.followLiveTimer);
+    if (this.followSeatTimer) clearTimeout(this.followSeatTimer);
     if (this.unblockAllConfirmTimer) clearTimeout(this.unblockAllConfirmTimer);
     if (this.revenueRefreshTimer) clearTimeout(this.revenueRefreshTimer);
     if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
     this.layoutObserver?.disconnect();
     this.layoutObserver = null;
     this.root?.removeEventListener("keydown", this.onKeyDown);
+    this.els.rail?.removeEventListener("click", this.onRailClick);
     if (typeof document !== "undefined") document.removeEventListener("fullscreenchange", this.onFullscreenChange);
     if (this.ws) {
       try {
@@ -3460,7 +3672,6 @@ var SeatManager = class {
         const id = this.labelToId.get(ch.label);
         if (id) {
           this.renderer?.setStatus([id], toRenderStatus(st));
-          this.flash(id, st);
           ids.push(id);
         }
         const verb = this.verbFor(prev, st);
@@ -3469,7 +3680,10 @@ var SeatManager = class {
         group.labels.push(ch.label);
         groups.set(groupKey, group);
       }
-      for (const group of groups.values()) this.pushActivity(group.labels, group.verb, group.status);
+      for (const group of groups.values()) {
+        const activity = this.pushActivity(group.labels, group.verb, group.status);
+        if (activity) this.paintSpatialActivity(activity);
+      }
       if (ids.length) {
         this.lastSyncedAt = Date.now();
         this.afterPaint();
@@ -3515,9 +3729,108 @@ var SeatManager = class {
       this.renderer?.forceDraw();
     }
   }
-  flash(id, st) {
-    if (st === "held") this.renderer?.flashSeat(id, "#f4b740");
-    else if (st === "booked") this.renderer?.flashSeat(id, "#22a06b");
+  activityColor(status) {
+    return status === "held" ? "#f4b740" : status === "booked" ? "#22a06b" : status === "blocked" ? "#8b94ac" : "#6e7bff";
+  }
+  sectionsForLabels(labels) {
+    const ids = /* @__PURE__ */ new Set();
+    for (const label of labels) {
+      const seat = this.labelToSeat.get(label);
+      if (!seat) continue;
+      const sectionId = this.sectionByObject.get(seat.rowId);
+      if (sectionId && sectionId !== UNGROUPED_ID) ids.add(sectionId);
+    }
+    const sectionIds = [...ids];
+    return {
+      ids: sectionIds,
+      labels: sectionIds.map((id) => this.sectionLabelById.get(id) ?? id)
+    };
+  }
+  pulseSeatLabels(labels, status) {
+    const color = this.activityColor(status);
+    for (const label of labels.slice(0, MAX_LIVE_SEAT_PULSES)) {
+      const id = this.labelToId.get(label);
+      if (id) this.renderer?.flashSeat(id, color);
+    }
+  }
+  /** Render one grouped realtime operation at the right semantic zoom level. */
+  paintSpatialActivity(activity) {
+    const sectionIds = activity.sectionIds ?? this.sectionsForLabels(activity.labels).ids;
+    const focused = this.renderer?.getFocusedSection() ?? null;
+    const followable = this.followLive && sectionIds.length === 1 && (activity.status === "held" || activity.status === "booked");
+    if (followable && focused === sectionIds[0]) {
+      this.pulseSeatLabels(activity.labels, activity.status);
+      return;
+    }
+    if (followable) {
+      if (this.followLiveTimer) clearTimeout(this.followLiveTimer);
+      if (this.followSeatTimer) clearTimeout(this.followSeatTimer);
+      this.followLiveTimer = setTimeout(() => {
+        this.followLiveTimer = null;
+        this.renderer?.focusSection(sectionIds[0]);
+        this.followSeatTimer = setTimeout(() => {
+          this.followSeatTimer = null;
+          this.pulseSeatLabels(activity.labels, activity.status);
+        }, 520);
+      }, 220);
+      return;
+    }
+    if (!focused && sectionIds.length) {
+      const color = this.activityColor(activity.status);
+      for (const sectionId of sectionIds.slice(0, MAX_LIVE_SECTION_PULSES)) {
+        this.renderer?.flashSection(sectionId, color);
+      }
+      return;
+    }
+    if (!sectionIds.length || focused && sectionIds.includes(focused)) {
+      this.pulseSeatLabels(activity.labels, activity.status);
+    }
+  }
+  locateSection(sectionId) {
+    this.renderer?.focusSection(sectionId);
+  }
+  locateActivity(activityId) {
+    const activity = this.feed.find((item) => item.id === activityId);
+    if (!activity) return;
+    const sectionIds = activity.sectionIds ?? this.sectionsForLabels(activity.labels).ids;
+    if (this.followSeatTimer) clearTimeout(this.followSeatTimer);
+    if (sectionIds.length === 1) {
+      this.locateSection(sectionIds[0]);
+      this.followSeatTimer = setTimeout(() => {
+        this.followSeatTimer = null;
+        this.pulseSeatLabels(activity.labels, activity.status);
+      }, 520);
+      return;
+    }
+    this.zoomToFit();
+    this.followSeatTimer = setTimeout(() => {
+      this.followSeatTimer = null;
+      if (sectionIds.length) {
+        const color = this.activityColor(activity.status);
+        for (const sectionId of sectionIds.slice(0, MAX_LIVE_SECTION_PULSES)) {
+          this.renderer?.flashSection(sectionId, color);
+        }
+      } else {
+        this.pulseSeatLabels(activity.labels, activity.status);
+      }
+    }, 280);
+  }
+  showLiveEvent(activity) {
+    const element = this.els.liveevent;
+    if (!element) return;
+    const sections = activity.sectionLabels ?? [];
+    const place = sections.length === 1 ? sections[0] : sections.length > 1 ? `${sections.length} sections` : activity.label;
+    const noun = activity.count === 1 ? "seat" : "seats";
+    element.innerHTML = `<span class="slm-liveeventdot" style="background:${this.activityColor(activity.status)}"></span>
+      <span class="slm-liveeventcopy">${esc(place)} \xB7 ${activity.count.toLocaleString()} ${noun} ${esc(activity.verb)}</span>
+      <span class="slm-liveeventhint">Live</span>`;
+    element.classList.add("on");
+    if (this.liveEventTimer) clearTimeout(this.liveEventTimer);
+    this.liveEventTimer = setTimeout(() => {
+      this.liveEventTimer = null;
+      element.classList.remove("on");
+      element.innerHTML = "";
+    }, 2800);
   }
   // ---- tallies + feed -------------------------------------------------------
   applyReportRevenue(report) {
@@ -3600,7 +3913,8 @@ var SeatManager = class {
   }
   pushActivity(labels, verb, status, at = Date.now()) {
     const label = labels[0];
-    if (!label) return;
+    if (!label) return null;
+    const sections = this.sectionsForLabels(labels);
     const item = {
       id: `${label}:${at}:${Math.random().toString(36).slice(2, 6)}`,
       at,
@@ -3608,12 +3922,16 @@ var SeatManager = class {
       labels: [...labels],
       count: labels.length,
       verb,
-      status
+      status,
+      sectionIds: sections.ids,
+      sectionLabels: sections.labels
     };
     this.feed.unshift(item);
     if (this.feed.length > FEED_CAP) this.feed.length = FEED_CAP;
     if (this.mode === "view") this.paintFeed();
+    this.showLiveEvent(item);
     this.opts.onActivity?.(item);
+    return item;
   }
   seedFeed(entries) {
     const verbByAction = {
@@ -3637,6 +3955,7 @@ var SeatManager = class {
     for (const e of entries) {
       const label = e.labels[0];
       if (!label) continue;
+      const sections = this.sectionsForLabels(e.labels);
       const item = {
         id: `log:${e.id}`,
         at: e.at,
@@ -3644,7 +3963,9 @@ var SeatManager = class {
         labels: [...e.labels],
         count: e.labels.length,
         verb: verbByAction[e.action] ?? e.action,
-        status: stByAction[e.action] ?? "free"
+        status: stByAction[e.action] ?? "free",
+        sectionIds: sections.ids,
+        sectionLabels: sections.labels
       };
       this.feed.push(item);
       this.opts.onActivity?.(item);
@@ -3682,13 +4003,15 @@ var SeatManager = class {
     for (const [k, v] of Object.entries(vars)) root.style.setProperty(k, v);
     root.innerHTML = `
       <div class="slm-bar">
-        <div class="slm-modes" data-ref="modes">
-          <button class="slm-mode" data-mode="view" title="Monitor (M)" aria-keyshortcuts="M">Monitor</button>
-          <button class="slm-mode" data-mode="inspect" title="Inspect (I)" aria-keyshortcuts="I">Inspect</button>
-          <button class="slm-mode" data-mode="block" title="Block (B)" aria-keyshortcuts="B">Block</button>
+        <div class="slm-modes" data-ref="modes" role="tablist" aria-label="Manager tools">
+          <button class="slm-mode" role="tab" data-mode="view" title="Monitor (M)" aria-keyshortcuts="M">Monitor</button>
+          <button class="slm-mode" role="tab" data-mode="inspect" title="Inspect (I)" aria-keyshortcuts="I">Inspect</button>
+          <button class="slm-mode" role="tab" data-mode="block" title="Block (B)" aria-keyshortcuts="B">Block</button>
         </div>
         <span class="slm-live"><span class="slm-live-dot"></span><span data-ref="livetext">CONNECTING</span></span>
         <div class="slm-bar-actions">
+          <button class="slm-barbtn follow" data-ref="follow" aria-pressed="false"
+            title="Stay on the current map view unless enabled">Follow live</button>
           <button class="slm-barbtn" data-ref="heat" aria-pressed="false"
             aria-label="Sales momentum overlay off"
             title="Highlight sections selling fastest in the selected time window">Sales momentum</button>
@@ -3700,6 +4023,7 @@ var SeatManager = class {
         <div class="slm-map">
           <div class="slm-map-host" data-ref="maphost"></div>
           <div class="slm-zoomhint" data-ref="zoomhint">Zoom in to marquee-select</div>
+          <div class="slm-liveevent" data-ref="liveevent" role="status" aria-live="polite"></div>
           <div class="slm-hud"><button class="slm-hud-chip" data-ref="zfit">Zoom to fit</button></div>
         </div>
         <aside class="slm-rail"><div class="slm-railscroll" data-ref="rail"></div></aside>
@@ -3719,20 +4043,25 @@ var SeatManager = class {
       modes: ref("modes"),
       livetext: ref("livetext"),
       kpis: ref("kpis"),
+      follow: ref("follow"),
       heat: ref("heat"),
       fullscreen: ref("fullscreen"),
       zoomhint: ref("zoomhint"),
+      liveevent: ref("liveevent"),
       rail: ref("rail"),
       toast: ref("toast"),
       zfit: ref("zfit")
     };
     this.els.modes.querySelectorAll("[data-mode]").forEach((b) => b.addEventListener("click", () => this.setMode(b.dataset.mode)));
     this.els.zfit.addEventListener("click", () => this.zoomToFit());
+    this.els.follow.addEventListener("click", () => this.setFollowLive(!this.followLive));
     this.els.heat.addEventListener("click", () => this.setHeatOverlay(!this.heatEnabled));
     this.els.fullscreen.addEventListener("click", () => this.toggleFullscreen());
     root.addEventListener("keydown", this.onKeyDown);
+    this.els.rail.addEventListener("click", this.onRailClick);
     document.addEventListener("fullscreenchange", this.onFullscreenChange);
     this.paintModeTabs();
+    this.paintFollowLiveButton();
     this.paintHeatButton();
     this.paintFullscreenButton();
   }
@@ -3761,10 +4090,20 @@ var SeatManager = class {
   paintModeTabs() {
     this.els.modes?.querySelectorAll("[data-mode]").forEach((b) => {
       const el = b;
-      el.classList.toggle("on", el.dataset.mode === this.mode);
+      const active = el.dataset.mode === this.mode;
+      el.classList.toggle("on", active);
+      el.setAttribute("aria-selected", String(active));
+      el.tabIndex = active ? 0 : -1;
     });
     this.root?.classList.toggle("block-mode", this.mode === "block");
   }
+  paintFollowLiveButton() {
+    const button = this.els.follow;
+    if (!button) return;
+    button.classList.toggle("on", this.followLive);
+    button.setAttribute("aria-pressed", String(this.followLive));
+    button.setAttribute("title", this.followLive ? "Following new buyer holds and bookings. Turn off to keep the current view." : "Stay on the current map view. Enable to follow new buyer holds and bookings.");
+  }
   paintHeatButton() {
     const button = this.els.heat;
     if (!button) return;
@@ -3805,20 +4144,55 @@ var SeatManager = class {
     const show = this.mode === "block" && this.renderer?.getRung?.() !== "seats";
     hint.classList.toggle("on", !!show);
   }
+  formatKpiDelta(key, delta, currency) {
+    const sign = delta > 0 ? "+" : "\u2212";
+    const absolute = Math.abs(delta);
+    if (key === "gross-sales") return `${sign}${fmtMoney(absolute, currency)}`;
+    if (key === "sold-pct") return `${sign}${absolute.toLocaleString()}pt`;
+    return `${sign}${absolute.toLocaleString()}`;
+  }
   paintKpis(t3) {
     if (!this.els.kpis) return;
     const rev = t3.revenueStatus === "current" ? fmtMoney(t3.grossRevenue, t3.currency) : "\u2014";
     const presence = this.controlRoomSnapshot?.presence;
-    this.els.kpis.innerHTML = [
-      { key: "sold-seats", n: t3.booked.toLocaleString(), l: "Sold seats", dot: "#22a06b" },
-      { key: "held-seats", n: t3.held.toLocaleString(), l: "Held seats", dot: "#f4b740" },
-      { key: "buyers", n: presence ? presence.shoppingSessions.toLocaleString() : "\u2014", l: "Buyers" },
-      { key: "active-holds", n: presence ? presence.activeHolds.toLocaleString() : "\u2014", l: "Active holds" },
-      { key: "free-seats", n: t3.free.toLocaleString(), l: "Free seats", dot: "#6e7bff" },
-      { key: "blocked", n: t3.blocked.toLocaleString(), l: "Blocked", dot: "#8b94ac" },
-      { key: "sold-pct", n: `${t3.capacityPct}%`, l: "Sold" },
-      { key: "gross-sales", n: rev, l: "Gross sales" }
-    ].map((k) => `<div class="slm-kpi" data-kpi="${k.key}"><b>${k.dot ? `<span class="dot" style="background:${k.dot}"></span>` : ""}${k.n}</b><span>${k.l}</span></div>`).join("");
+    const items = [
+      { key: "sold-seats", raw: t3.booked, n: t3.booked.toLocaleString(), l: "Sold seats", dot: "#22a06b" },
+      { key: "held-seats", raw: t3.held, n: t3.held.toLocaleString(), l: "Held seats", dot: "#f4b740" },
+      { key: "buyers", raw: presence?.shoppingSessions ?? null, n: presence ? presence.shoppingSessions.toLocaleString() : "\u2014", l: "Buyers" },
+      { key: "active-holds", raw: presence?.activeHolds ?? null, n: presence ? presence.activeHolds.toLocaleString() : "\u2014", l: "Active holds" },
+      { key: "free-seats", raw: t3.free, n: t3.free.toLocaleString(), l: "Free seats", dot: "#6e7bff" },
+      { key: "blocked", raw: t3.blocked, n: t3.blocked.toLocaleString(), l: "Blocked", dot: "#8b94ac" },
+      { key: "sold-pct", raw: t3.capacityPct, n: `${t3.capacityPct}%`, l: "Sold" },
+      { key: "gross-sales", raw: t3.revenueStatus === "current" ? t3.grossRevenue : null, n: rev, l: "Gross sales" }
+    ];
+    let hasChanges = false;
+    this.els.kpis.innerHTML = items.map((item) => {
+      const previous = this.lastKpiValues.get(item.key);
+      const changed = item.raw != null && previous != null && item.raw !== previous;
+      const delta = changed ? item.raw - previous : 0;
+      if (changed) {
+        hasChanges = true;
+        this.activeKpiDeltas.set(item.key, {
+          text: this.formatKpiDelta(item.key, delta, t3.currency),
+          down: delta < 0
+        });
+      }
+      if (item.raw != null) this.lastKpiValues.set(item.key, item.raw);
+      const activeDelta = this.activeKpiDeltas.get(item.key);
+      return `<div class="slm-kpi${activeDelta ? " changed" : ""}" data-kpi="${item.key}">
+        <b>${item.dot ? `<span class="dot" style="background:${item.dot}"></span>` : ""}${item.n}</b><span>${item.l}</span>
+        ${activeDelta ? `<span class="slm-kpidelta${activeDelta.down ? " down" : ""}">${activeDelta.text}</span>` : ""}
+      </div>`;
+    }).join("");
+    if (hasChanges) {
+      if (this.kpiCleanupTimer) clearTimeout(this.kpiCleanupTimer);
+      this.kpiCleanupTimer = setTimeout(() => {
+        this.kpiCleanupTimer = null;
+        this.activeKpiDeltas.clear();
+        this.els.kpis?.querySelectorAll(".slm-kpidelta").forEach((element) => element.remove());
+        this.els.kpis?.querySelectorAll(".slm-kpi.changed").forEach((element) => element.classList.remove("changed"));
+      }, 1500);
+    }
   }
   // ---- DOM: rails -----------------------------------------------------------
   paintRail() {
@@ -3889,10 +4263,10 @@ var SeatManager = class {
       const net = speed?.netBooked ?? 0;
       const netLabel = `${net > 0 ? "+" : ""}${net}`;
       const trend = speed?.trend === "rising" || speed?.trend === "cooling" ? speed.trend : "steady";
-      return `<div class="slm-sectionrow">
-        <div class="slm-sectiontop"><span>${esc(row.sectionLabel)}</span><span>${fmtMoney(row.bookedRevenue, snapshot.currency)}</span></div>
-        <div class="slm-sectionmeta"><span>${row.booked.toLocaleString()}/${row.total.toLocaleString()} sold \xB7 ${netLabel} in ${snapshot.velocity.windowMinutes}m</span><span class="slm-trend ${trend}">${trend}</span></div>
-      </div>`;
+      return `<button type="button" class="slm-sectionrow" data-section-focus="${esc(row.sectionId)}" title="Focus ${esc(row.sectionLabel)} on the map">
+        <span class="slm-sectiontop"><span>${esc(row.sectionLabel)}</span><span>${fmtMoney(row.bookedRevenue, snapshot.currency)}</span></span>
+        <span class="slm-sectionmeta"><span>${row.booked.toLocaleString()}/${row.total.toLocaleString()} sold \xB7 ${netLabel} in ${snapshot.velocity.windowMinutes}m</span><span class="slm-trend ${trend}">${trend}</span><span class="slm-sectionlocate">Locate</span></span>
+      </button>`;
     }).join("") : '<div class="slm-empty">No section metrics are available for this chart.</div>';
     this.paintTrendWindow();
     this.paintMomentumHelp();
@@ -3961,9 +4335,13 @@ var SeatManager = class {
     const color = { free: "#6e7bff", held: "#f4b740", booked: "#22a06b", blocked: "#8b94ac" };
     this.els.feed.innerHTML = this.feed.map((a) => {
       const extra = a.count > 1 ? ` +${a.count - 1}` : "";
-      return `<div class="slm-feedrow"><span class="slm-feeddot" style="background:${color[a.status]}"></span>
-        <span class="slm-feedtext">${a.count === 1 ? "Seat" : "Seats"} <b>${esc(a.label)}${extra}</b> ${esc(a.verb)}</span>
-        <span class="slm-feedtime">${relTime(a.at, now)}</span></div>`;
+      const sections = a.sectionLabels ?? [];
+      const sectionCopy = sections.length === 1 ? sections[0] : sections.length > 1 ? `${sections.length} sections` : "";
+      return `<button type="button" class="slm-feedrow" data-feed-id="${esc(a.id)}" title="Locate this activity on the map">
+        <span class="slm-feeddot" style="background:${color[a.status]}"></span>
+        <span class="slm-feedtext">${sectionCopy ? `<span class="slm-feedsection">${esc(sectionCopy)}</span>` : ""}${a.count === 1 ? "Seat" : "Seats"} <b>${esc(a.label)}${extra}</b> ${esc(a.verb)}</span>
+        <span class="slm-feedmeta"><span class="slm-feedtime">${relTime(a.at, now)}</span><span class="slm-feedlocate">Locate</span></span>
+      </button>`;
     }).join("");
   }
   renderBlockRail() {
@@ -4219,6 +4597,10 @@ var SeatManager = class {
   // ---- toast / done / fail --------------------------------------------------
   done(action, labels, msg) {
     this.toastOk(msg);
+    if (labels.length) {
+      const activity = action === "block" ? this.pushActivity(labels, "blocked", "blocked") : action === "unblock" || action === "unblockAll" ? this.pushActivity(labels, "unblocked", "free") : action === "cancelBooking" ? this.pushActivity(labels, "cancelled", "free") : null;
+      if (activity) this.paintSpatialActivity(activity);
+    }
     if (action !== "setHoldTtl") this.scheduleRevenueRefresh(0);
     this.opts.onActionComplete?.({ action, labels, count: labels.length });
   }