@seatlayer/js 0.37.0 → 0.39.0

package/dist/index.js

@@ -1,11 +1,9 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk-HMLY7DHA.js";
 
 // src/SeatingChart.ts
 import {
@@ -120,6 +118,41 @@ var PubApi = class {
       body: { holdId, ...ttlMs ? { ttlMs } : {} }
     });
   }
+  /**
+   * Which gateways this event can actually take money through — the question
+   * `checkout: 'hosted'` has to answer BEFORE it shows a buyer a Pay button, so
+   * the answer is never discovered by failing a payment.
+   *
+   * Anonymous, and it discloses no account, key, mode or currency for a gateway
+   * that did not match.
+   */
+  paymentOptions(key) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/payment-options`);
+  }
+  /**
+   * Turn a live hold into an order and start a payment.
+   *
+   * The amount is NOT sent: the server recomputes it from the hold's own items,
+   * which is the only reason a browser cannot alter what it pays. Nor is the
+   * PROVIDER — the event row decides which gateway charges, and a `provider` in
+   * the body is checked rather than obeyed (409 `provider_mismatch`). Omitting
+   * it is the shape that cannot disagree.
+   */
+  startCheckout(key, input) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/checkout`, {
+      method: "POST",
+      body: input
+    });
+  }
+  /**
+   * Poll an order while its gateway webhook lands. The order id is an
+   * unguessable token the buyer already holds, so it acts as the capability —
+   * which is also why a buyer returning from a gateway page can be told what
+   * happened with nothing but the id in the return URL.
+   */
+  orderStatus(orderId) {
+    return this.request(`/pub/orders/${encodeURIComponent(orderId)}/status`);
+  }
   /**
    * Mint a one-use subscribe ticket for the next socket attempt (protocol doc
    * §3). The bearer travels here, over ordinary HTTPS where CORS and Origin
@@ -1673,7 +1706,8 @@ var EmbeddedDesigner = class {
   }
   buildSkeleton(overlay) {
     const style = document.createElement("style");
-    style.textContent = `
+    style.textContent = /* @sl-css */
+    `
 @media (prefers-reduced-motion: no-preference) {
   @keyframes seatlayer-designer-shimmer {
     0% { background-position: -320px 0; }
@@ -1799,7 +1833,6 @@ import {
   PickerController as PickerController2,
   ACCESSIBILITY_TYPES,
   expandChart,
-  generateSeatPanorama,
   generateSeatThumb,
   loadLocale as loadLocale2,
   setStringOverrides as setStringOverrides2,
@@ -1862,20 +1895,45 @@ function hasWebGL2() {
   }
   return _webgl2Cache;
 }
+function cdnChunkUrl(fileName) {
+  const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
+  if (!base) throw new Error(`seatlayer: cannot resolve the ${fileName} chunk URL`);
+  return new URL(`./${fileName}`, base).href;
+}
 async function loadVenue3d() {
   if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
-    const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
-    if (!base) throw new Error("seatlayer: cannot resolve the 3D view chunk URL");
-    const url = new URL("./seatlayer-view3d.mjs", base).href;
     return import(
       /* @vite-ignore */
-      url
+      cdnChunkUrl("seatlayer-view3d.mjs")
     );
   }
   return import("@seatlayer/core/view3d");
 }
+async function loadPanorama() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-panorama.mjs")
+    );
+  }
+  return import("@seatlayer/core");
+}
+async function loadHostedCheckout() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-checkout.mjs")
+    );
+  }
+  return import("./hostedCheckout-PLHKPT6W.js");
+}
+function paymentsOffReason(reason) {
+  return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
+}
 var STYLE_ID = "seatlayer-picker-style";
-var CSS = `
+var CSS = (
+  /* @sl-css */
+  `
 .sl-picker{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:420px;overflow:hidden;
   background:var(--sl-bg);color:var(--sl-text);font-family:var(--sl-font);border-radius:var(--sl-radius);
   --sl-r-sm:calc(var(--sl-radius) * .55);
@@ -2612,7 +2670,8 @@ var CSS = `
 .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)}
 @media(max-width:640px){.sl-modal-scrim{padding:0}.sl-modal-frame{width:100%;height:100%;border-radius:0}}
-`;
+`
+);
 function ensureStyle() {
   if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
@@ -2677,6 +2736,14 @@ var SeatPicker = class _SeatPicker {
     this.handedOff = false;
     /** Guards single onBooked + single success overlay per hold. */
     this.bookedShown = false;
+    /**
+     * In-flight or settled `payment-options` for this event, started at render in
+     * hosted mode. One request, kicked off while the buyer is still choosing, so
+     * pressing Pay does not wait on a lookup whose answer never changes mid-session.
+     */
+    this.paymentOptions = null;
+    /** The mounted payment card, while one is up. */
+    this.checkoutPanel = null;
     this.extendEl = null;
     this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
@@ -2791,6 +2858,12 @@ var SeatPicker = class _SeatPicker {
       onObjectUnavailable: (event) => this.opts.onSelectedObjectUnavailable?.(event)
     });
     this.api = options.transport ?? this.pubApi;
+    if (options.checkout === "hosted" && !this.pubApi) {
+      console.warn(
+        'seatlayer: checkout: "hosted" needs the widget\'s own transport \u2014 a custom `transport` owns its backend, so the picker is staying on onCheckout for this mount.'
+      );
+    }
+    this.checkoutMode = options.checkout === "hosted" && this.pubApi ? "hosted" : "handoff";
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new PickerController2({
@@ -3154,6 +3227,7 @@ var SeatPicker = class _SeatPicker {
     ensureStyle();
     await loadLocale2(this.opts.locale);
     if (this.opts.messages) setStringOverrides2(this.opts.messages);
+    if (this.checkoutMode === "hosted") this.paymentOptions = this.pubApi.paymentOptions(this.opts.event);
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
@@ -3451,8 +3525,40 @@ var SeatPicker = class _SeatPicker {
     if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
+    this.resumeHostedOrder();
     return this;
   }
+  /**
+   * A hosted gateway returned this buyer to a page that runs the widget, with
+   * `?order=…&status=…` in the URL. Pick the order up and finish the story.
+   *
+   * Only `success` resumes. `cancelled` means the buyer backed out at the
+   * gateway and their seats are still held — the map they are looking at IS the
+   * right screen, and opening a card to say "you cancelled" would be noise.
+   *
+   * The two parameters are then stripped with `replaceState`, because they are a
+   * one-shot instruction: leaving them in place would re-open the confirmation
+   * on every later navigation, and would carry an order id into browser history
+   * and any Referer this page later sends. `status` is only ever removed
+   * alongside an `order` we actually consumed, so a host page that uses a
+   * `status` parameter of its own keeps it.
+   */
+  resumeHostedOrder() {
+    if (this.checkoutMode !== "hosted" || typeof location === "undefined") return;
+    const params = new URLSearchParams(location.search);
+    const orderId = params.get("order");
+    if (!orderId) return;
+    const status = params.get("status");
+    params.delete("order");
+    params.delete("status");
+    try {
+      const query = params.toString();
+      history.replaceState(history.state, "", `${location.pathname}${query ? `?${query}` : ""}${location.hash}`);
+    } catch {
+    }
+    if (status !== "success") return;
+    void this.openCheckoutPanel({ kind: "resume", orderId });
+  }
   /**
    * Move layout-dependent chrome between its wide dock (map regions / zoom
    * column) and its narrow dock (the sheet's consolidated Filters row), and
@@ -4432,7 +4538,7 @@ var SeatPicker = class _SeatPicker {
     this.els.map.appendChild(el);
     this.confirmEl = el;
     this.reanchorConfirm();
-    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => this.openSeatView(seat));
+    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => void this.openSeatView(seat));
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         void this.view3dHandle?.flyToSeat(seat.id);
@@ -4503,10 +4609,13 @@ var SeatPicker = class _SeatPicker {
    * uploaded photo (seat.viewUrl) when present, else a panorama generated from
    * the chart geometry — the stage placed at this seat's true bearing + size.
    * Zero extra dependencies: an equirectangular image panned with `repeat-x`.
+   *
+   * Async only because the generator is a lazy chunk (see `loadPanorama`); an
+   * organizer photo needs no generator and never waits on it. The two callers
+   * are click handlers, so nothing observes the promise.
    */
-  openSeatView(seat) {
+  async openSeatView(seat) {
     if (!this.root || !this.seatViewEnabled()) return;
-    this.closeSeatView();
     const doc = this.controller.doc;
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc?.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc?.focalPoint ?? { x: 0, y: 0 };
@@ -4518,10 +4627,19 @@ var SeatPicker = class _SeatPicker {
       caption = t2("picker.panorama360");
       real = true;
     } else {
-      const pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      let pano2;
+      try {
+        const { generateSeatPanorama } = await loadPanorama();
+        pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      } catch (err) {
+        this.opts.onError?.(err);
+        return;
+      }
+      if (!this.root || !this.seatViewEnabled()) return;
       panoUrl = pano2.url;
       caption = t2("picker.illustrationCaption", { m: pano2.distanceM });
     }
+    this.closeSeatView();
     const el = document.createElement("div");
     el.className = "sl-view";
     el.setAttribute("role", "dialog");
@@ -4887,7 +5005,7 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelectorAll(".sl-chip .view[data-view-label]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const seat = this.controller.seatByLabel(btn.dataset.viewLabel);
-        if (seat) this.openSeatView(seat);
+        if (seat) void this.openSeatView(seat);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip[data-locate]").forEach((chip) => {
@@ -5030,7 +5148,7 @@ var SeatPicker = class _SeatPicker {
       const seats = this.hold.seats ?? committed;
       this.handedOff = true;
       this.setCtaPhase("checkout");
-      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
+      this.checkoutHandoff(this.hold, seats);
       return;
     }
     this.holdingLabels = new Set(committed.map((seat) => seat.label));
@@ -5059,7 +5177,7 @@ var SeatPicker = class _SeatPicker {
       this.flashHeldSeats(hold);
       this.setCtaPhase("checkout");
       this.emitHoldChange();
-      this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
+      this.checkoutHandoff(hold, hold.seats ?? chosenSeats);
     } catch (err) {
       this.opts.onError?.(err);
       const problem = err;
@@ -5164,6 +5282,109 @@ var SeatPicker = class _SeatPicker {
     this.bookedEl?.classList.add("on");
     this.opts.onBooked?.(handoff);
   }
+  /**
+   * The seats are held. Send the buyer wherever this picker's `checkout` option
+   * says they go.
+   *
+   * The default branch is the literal call that stood here before hosted
+   * checkout existed, unchanged, so nothing about an existing integration moves.
+   */
+  checkoutHandoff(hold, seats) {
+    if (this.checkoutMode === "hosted") {
+      void this.startHostedCheckout(hold, seats);
+      return;
+    }
+    this.opts.onCheckout?.(hold, seats, this.buildHandoff(hold));
+  }
+  /**
+   * Take the money ourselves, through the organizer's own gateway.
+   *
+   * Order of operations matters: ASK FIRST, load second. `payment-options` is
+   * already in flight from render, and its answer decides whether any payment
+   * code is fetched at all — an event that cannot charge never downloads the
+   * card that would have charged it.
+   *
+   * An empty list is not a failure and never dead-ends the buyer. It routes them
+   * to whatever the host has: `onCheckoutUnavailable` (with the server's reason,
+   * so the host can say the right one of three very different sentences), then
+   * `onCheckout` with the ordinary handoff. A host that supplied neither gets
+   * the widget's own honest card instead of a press that did nothing.
+   */
+  async startHostedCheckout(hold, seats) {
+    const handoff = this.buildHandoff(hold);
+    let options = null;
+    try {
+      options = await (this.paymentOptions ??= this.pubApi.paymentOptions(this.opts.event));
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+    if (this.destroyed) return;
+    const provider = options?.providers?.[0];
+    if (!provider) {
+      const reason = paymentsOffReason(options?.reason);
+      const handled = !!this.opts.onCheckoutUnavailable || !!this.opts.onCheckout;
+      this.opts.onCheckoutUnavailable?.({ reason, handoff });
+      this.opts.onCheckout?.(hold, seats, handoff);
+      if (!handled) {
+        void this.openCheckoutPanel({
+          kind: "unavailable",
+          reason,
+          seatCount: handoff.lineItems.reduce((sum, item) => sum + item.quantity, 0)
+        });
+      }
+      return;
+    }
+    await this.openCheckoutPanel({
+      kind: "pay",
+      provider,
+      order: {
+        holdId: handoff.holdId,
+        expiresAt: handoff.expiresAt,
+        currency: handoff.currency,
+        total: handoff.total,
+        labels: handoff.lineItems.map((item) => item.displayLabel ?? item.label)
+      }
+    });
+  }
+  /**
+   * Fetch the checkout chunk and put its card over the map.
+   *
+   * Every failure here lands the buyer back on a map with their seats still
+   * held, which is a place they can act from — a blocked chunk request must not
+   * leave them staring at a CTA that no longer does anything.
+   */
+  async openCheckoutPanel(state) {
+    let mountCheckout;
+    try {
+      ({ mountCheckout } = await loadHostedCheckout());
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Checkout could not be opened. Your seats are still held \u2014 please try again.", "error");
+      this.setCtaPhase("idle");
+      return;
+    }
+    if (this.destroyed || !this.root) return;
+    this.closeCheckoutPanel();
+    this.checkoutPanel = mountCheckout({
+      root: this.root,
+      state,
+      startSession: (input) => this.pubApi.startCheckout(this.opts.event, input),
+      orderStatus: (orderId) => this.pubApi.orderStatus(orderId),
+      onCancel: () => {
+        this.checkoutPanel = null;
+        if (!this.hold) this.setCtaPhase("idle");
+      },
+      onConfirmed: (order) => {
+        this.opts.onOrderConfirmed?.(order);
+        void this.controller.refresh();
+      },
+      onError: (err) => this.opts.onError?.(err)
+    });
+  }
+  closeCheckoutPanel() {
+    this.checkoutPanel?.destroy();
+    this.checkoutPanel = null;
+  }
   /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
   buildHandoff(hold) {
     const items = hold.items ?? [];
@@ -5398,7 +5619,7 @@ var SeatPicker = class _SeatPicker {
   }
   /** Build the view-from-seat panorama the cinematic dissolves into — reuses the
    *  exact input path as the 2D `openSeatView` (organizer photo, else generated). */
-  seatViewFor3d(seatId) {
+  async seatViewFor3d(seatId) {
     const seat = this.allSeats().find((s) => s.id === seatId);
     if (!seat) return null;
     if (seat.viewUrl) return { url: seat.viewUrl };
@@ -5407,6 +5628,7 @@ var SeatPicker = class _SeatPicker {
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc.focalPoint ?? { x: 0, y: 0 };
     try {
+      const { generateSeatPanorama } = await loadPanorama();
       return { url: generateSeatPanorama(seat, focal, this.allSeats()).url };
     } catch {
       return null;
@@ -5546,9 +5768,10 @@ var SeatPicker = class _SeatPicker {
         // in orbit instead of dissolving into an empty overlay.
         getSeatView: (id) => new Promise((resolve, reject) => {
           const run = () => {
-            const view = this.seatViewFor3d(id);
-            if (view) resolve(view);
-            else reject(new Error("seat_view_unavailable"));
+            void this.seatViewFor3d(id).then((view) => {
+              if (view) resolve(view);
+              else reject(new Error("seat_view_unavailable"));
+            });
           };
           const ric = globalThis.requestIdleCallback;
           if (typeof ric === "function") ric(run, { timeout: 1500 });
@@ -5826,6 +6049,7 @@ var SeatPicker = class _SeatPicker {
     this.closeConfirm();
     this.dismissTableDialog(false);
     this.closeSeatView();
+    this.closeCheckoutPanel();
     this.exit3d();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
@@ -5941,6 +6165,8 @@ import {
   SeatmapRenderer,
   expandChart as expandChart2,
   computeSections,
+  gaAreasOf,
+  gaUnitLabels,
   UNGROUPED_ID
 } from "@seatlayer/core";
 
@@ -6552,7 +6778,9 @@ var PREVIEW_ELIGIBLE_STROKE = "#b9c0ff";
 var PREVIEW_UNAVAILABLE_FILL = "#303846";
 var PREVIEW_UNAVAILABLE_STROKE = "#4b5669";
 var ALLOCATION_STROKE = "#101723";
-var CHANNELS_CSS = `
+var CHANNELS_CSS = (
+  /* @sl-css */
+  `
 .slm{--slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;--slm-mo-ambient:2000ms;
   --slm-mo-out:cubic-bezier(.2,.8,.2,1);--slm-mo-in-out:cubic-bezier(.4,0,.2,1);--slm-mo-exit:cubic-bezier(.4,0,1,1);
   --slm-mo-spring:cubic-bezier(.34,1.3,.64,1)}
@@ -6741,7 +6969,8 @@ var CHANNELS_CSS = `
   .slm-ch-staged.shake{outline:2px solid #e5484d;outline-offset:2px}
   .slm-ch-staged.done{outline:2px solid #5bd39b;outline-offset:2px}
 }
-`;
+`
+);
 function bucketRowsHtml(rows) {
   return rows.map((row, index) => `
     <div class="slm-ch-bucket" style="animation-delay:${Math.min(index, 4) * 30}ms">
@@ -8639,7 +8868,9 @@ var LEGEND = [
   { key: "booked", label: "Booked", color: "#22a06b" },
   { key: "blocked", label: "Blocked", color: "#8b94ac" }
 ];
-var MANAGER_CSS = `
+var MANAGER_CSS = (
+  /* @sl-css */
+  `
 .slm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:480px;overflow:hidden;
   background:var(--slm-bg);color:var(--slm-text);font-family:var(--slm-font);border-radius:var(--slm-radius);
   /* Motion tokens (motion-system \xA72), declared by the cockpit ROOT rather than
@@ -8881,7 +9112,8 @@ var MANAGER_CSS = `
     transition:none!important;
     scroll-behavior:auto!important}
 }
-${CHANNELS_CSS}`;
+${CHANNELS_CSS}`
+);
 function injectStyle() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
   const el = document.createElement("style");
@@ -8930,13 +9162,39 @@ var SeatManager = class {
     this.labelToId = /* @__PURE__ */ new Map();
     this.labelToSeat = /* @__PURE__ */ new Map();
     this.allIds = [];
+    /**
+     * GA inventory units — real sellable labels the server counts, with NO seat
+     * geometry and therefore no renderer binding. They live here rather than in
+     * `labelToId`/`allIds` so every paint path keeps addressing paintable nodes
+     * only, while the tally denominator finally covers the same universe the
+     * numerator does. Without them a GA sale hit `booked` but not `total`:
+     * Free under-reported by GA capacity and SOLD% could exceed 100%.
+     */
+    this.gaUnitLabelSet = /* @__PURE__ */ new Set();
     this.status = /* @__PURE__ */ new Map();
+    /** Live non-free counters, moved by each delta rather than re-walked. */
+    this.counts = { held: 0, booked: 0, blocked: 0 };
+    /** Bumped whenever the seat model is replaced wholesale (a full snapshot). */
+    this.modelVersion = 0;
     this.currency = "USD";
     this.authoritativeGrossRevenue = 0;
     this.revenueStatus = "loading";
     this.revenueRequest = 0;
-    this.revenueRefreshTimer = null;
     this.controlRoomSnapshot = null;
+    /**
+     * The server's own totals, pinned to the client model they were read against.
+     * Display = server baseline + (client now − client then), so the authoritative
+     * numbers land exactly on arrival and deltas still move them between reads.
+     * A wholesale model replacement invalidates the pairing (`model`), and the
+     * client tallies — themselves a fresh authenticated read — take over.
+     */
+    this.serverBaseline = null;
+    /** Latest presence frame, held whether or not a snapshot has landed yet. */
+    this.livePresence = null;
+    /** Latest cumulative booked gross pushed on a delta frame. */
+    this.liveGross = null;
+    /** Coalesces a burst of deltas into one KPI/rail repaint. */
+    this.paintHandle = null;
     this.trendWindowMinutes = 15;
     this.heatEnabled = false;
     this.lastKpiValues = /* @__PURE__ */ new Map();
@@ -9034,12 +9292,7 @@ var SeatManager = class {
       const res = await this.api.chart(this.key);
       this.doc = res.doc;
       this.currency = res.event.currency ?? this.opts.currency ?? this.currency;
-      const seats = expandChart2(res.doc);
-      for (const s of seats) {
-        this.labelToId.set(s.label, s.id);
-        this.labelToSeat.set(s.label, s);
-        this.allIds.push(s.id);
-      }
+      this.buildUnitUniverse(res.doc);
       this.buildRenderer();
       this.buildSectionOptions();
       const [, controlRoom] = await Promise.all([
@@ -9400,7 +9653,10 @@ var SeatManager = class {
     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.paintHandle !== null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(this.paintHandle);
+    }
+    this.paintHandle = null;
     this.channels?.destroy();
     this.channels = null;
     if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
@@ -9483,6 +9739,37 @@ var SeatManager = class {
     }
     this.syncSelection();
   }
+  /**
+   * Build the client's inventory universe from the chart.
+   *
+   * `expandChart` yields SEATS — it has no output for a GA area, whose capacity
+   * is sold as N synthetic unit labels. The server's seat map keys, its deltas
+   * and its `totals` all speak those labels, so a client that only knows seats
+   * counts GA sales in the numerator (every key of the snapshot is written into
+   * `status`) while leaving them out of the denominator. Registering the GA
+   * units here — labels only, never a render binding — is what makes the two
+   * agree.
+   */
+  buildUnitUniverse(doc) {
+    for (const seat of expandChart2(doc)) {
+      this.labelToId.set(seat.label, seat.id);
+      this.labelToSeat.set(seat.label, seat);
+      this.allIds.push(seat.id);
+    }
+    for (const area of gaAreasOf(doc)) {
+      for (const label of gaUnitLabels(area)) {
+        if (!this.labelToId.has(label)) this.gaUnitLabelSet.add(label);
+      }
+    }
+  }
+  /** Every sellable unit the client knows: seats + GA capacity. */
+  unitTotal() {
+    return this.allIds.length + this.gaUnitLabelSet.size;
+  }
+  /** Every label the client models, whether or not it can be painted. */
+  knownLabels() {
+    return [...this.labelToId.keys(), ...this.gaUnitLabelSet];
+  }
   repaintAll() {
     const r = this.renderer;
     if (!r) return;
@@ -9532,7 +9819,7 @@ var SeatManager = class {
     ws.onopen = () => {
       this.attempt = 0;
       this.setLive(true);
-      void this.resnapshot().then(() => this.scheduleRevenueRefresh(0));
+      void this.resnapshot().then(() => this.refreshControlRoom()).catch((err) => this.opts.onError?.(err));
       void this.refreshAvailability();
     };
     ws.onmessage = (e) => this.onMessage(e);
@@ -9570,15 +9857,18 @@ var SeatManager = class {
       this.updateEffectiveAvailability(m.hidden, m.closed);
     }
     if (m.type === "presence") {
-      if (this.controlRoomSnapshot && typeof m.shoppingSessions === "number" && typeof m.activeHolds === "number") {
-        this.controlRoomSnapshot = {
-          ...this.controlRoomSnapshot,
-          presence: { shoppingSessions: m.shoppingSessions, activeHolds: m.activeHolds }
+      if (typeof m.shoppingSessions === "number" && typeof m.activeHolds === "number") {
+        this.livePresence = {
+          at: Date.now(),
+          value: { shoppingSessions: m.shoppingSessions, activeHolds: m.activeHolds }
         };
+        if (this.controlRoomSnapshot) {
+          this.controlRoomSnapshot = { ...this.controlRoomSnapshot, presence: this.livePresence.value };
+          this.opts.onControlRoom?.(this.controlRoomSnapshot);
+        }
         this.lastSyncedAt = Date.now();
         this.recomputeTallies();
         this.paintMonitorInsights();
-        this.opts.onControlRoom?.(this.controlRoomSnapshot);
       }
       return;
     }
@@ -9592,7 +9882,7 @@ var SeatManager = class {
         const st = ["free", "held", "booked", "blocked"].includes(ch.status) ? ch.status : "free";
         const prev = this.status.get(ch.label) ?? "free";
         if (prev === st) continue;
-        this.status.set(ch.label, st);
+        this.setStatusLabel(ch.label, st, prev);
         const id = this.labelToId.get(ch.label);
         if (id) {
           this.renderer?.setStatus([id], toRenderStatus(st));
@@ -9612,10 +9902,38 @@ var SeatManager = class {
         this.lastSyncedAt = Date.now();
         this.afterPaint();
       }
+      if (typeof m.revenue?.gross === "number" && Number.isFinite(m.revenue.gross)) {
+        this.applyLiveGross(m.revenue.gross);
+      }
       this.recomputeTallies();
-      if (ids.length) this.scheduleRevenueRefresh();
     }
   }
+  /**
+   * Adopt the cumulative booked gross a delta frame carried.
+   *
+   * Stashed with its arrival time so an in-flight control-room read can decide
+   * whether it is holding the newer number: a frame that landed after the
+   * request started is newer than the response, one that landed before is not.
+   */
+  applyLiveGross(gross) {
+    this.liveGross = { at: Date.now(), value: gross };
+    this.authoritativeGrossRevenue = gross;
+    this.revenueStatus = "current";
+    if (this.controlRoomSnapshot) {
+      this.controlRoomSnapshot = {
+        ...this.controlRoomSnapshot,
+        revenue: { ...this.controlRoomSnapshot.revenue, gross }
+      };
+      this.opts.onControlRoom?.(this.controlRoomSnapshot);
+    }
+  }
+  /** The single writer for a label's status, so the counters never drift. */
+  setStatusLabel(label, next, prev = this.status.get(label) ?? "free") {
+    this.status.set(label, next);
+    if (prev === next) return;
+    if (prev !== "free") this.counts[prev] -= 1;
+    if (next !== "free") this.counts[next] += 1;
+  }
   async resnapshot() {
     try {
       const objs = await this.api.objects(this.key);
@@ -9638,23 +9956,31 @@ var SeatManager = class {
     const next = /* @__PURE__ */ new Map();
     if (fallback !== void 0) {
       const base = known(fallback);
-      for (const label of this.labelToId.keys()) next.set(label, base);
+      for (const label of this.knownLabels()) next.set(label, base);
     }
     for (const [label, st] of Object.entries(seats)) {
       next.set(label, known(st));
     }
     this.status = next;
+    this.modelVersion += 1;
+    this.recountAll();
     this.lastSyncedAt = Date.now();
     this.repaintAll();
     this.afterPaint();
     this.recomputeTallies();
   }
+  /** The one O(n) walk left: a wholesale model replacement re-bases the counters. */
+  recountAll() {
+    const counts = { held: 0, booked: 0, blocked: 0 };
+    for (const st of this.status.values()) if (st !== "free") counts[st] += 1;
+    this.counts = counts;
+  }
   /** 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);
+      this.setStatusLabel(label, st);
       const id = this.labelToId.get(label);
       if (id) ids.push(id);
     }
@@ -9780,12 +10106,33 @@ var SeatManager = class {
     this.revenueStatus = "current";
     this.recomputeTallies();
   }
+  /**
+   * Read the server's own control-room projection.
+   *
+   * Called on mount, on every socket (re)connect and after an organizer action —
+   * never on a timer and never per delta frame. Presence and gross that arrived
+   * on the socket AFTER this request started are newer than the response, so
+   * they survive it; anything older defers to the read.
+   */
   async refreshControlRoom() {
     const request = ++this.revenueRequest;
+    const requestedAt = Date.now();
     try {
-      const snapshot = await this.api.controlRoom(this.key, this.trendWindowMinutes);
+      const fetched = await this.api.controlRoom(this.key, this.trendWindowMinutes);
+      let snapshot = fetched;
       if (request === this.revenueRequest) {
+        if (this.livePresence && this.livePresence.at >= requestedAt) {
+          snapshot = { ...snapshot, presence: this.livePresence.value };
+        } else {
+          this.livePresence = null;
+        }
+        if (this.liveGross && this.liveGross.at >= requestedAt) {
+          snapshot = { ...snapshot, revenue: { ...snapshot.revenue, gross: this.liveGross.value } };
+        } else {
+          this.liveGross = null;
+        }
         this.controlRoomSnapshot = snapshot;
+        this.rebaseServerTotals(snapshot);
         this.lastSyncedAt = Date.now();
         this.authoritativeGrossRevenue = snapshot.revenue.gross;
         this.currency = snapshot.currency;
@@ -9804,37 +10151,80 @@ var SeatManager = class {
       throw err;
     }
   }
-  scheduleRevenueRefresh(delay = 140) {
-    this.revenueStatus = "stale";
-    this.recomputeTallies();
-    if (this.revenueRefreshTimer) clearTimeout(this.revenueRefreshTimer);
-    this.revenueRefreshTimer = setTimeout(() => {
-      this.revenueRefreshTimer = null;
-      void this.refreshControlRoom().catch((err) => this.opts.onError?.(err));
-    }, delay);
+  /** Pin the server's totals to the client model they were read against. */
+  rebaseServerTotals(snapshot) {
+    const totals = snapshot.totals;
+    if (!totals || ["free", "held", "booked", "blocked"].some(
+      (key) => !Number.isFinite(totals[key])
+    )) {
+      this.serverBaseline = null;
+      return;
+    }
+    this.serverBaseline = {
+      model: this.modelVersion,
+      server: { free: totals.free, held: totals.held, booked: totals.booked, blocked: totals.blocked },
+      client: this.clientTallies()
+    };
   }
-  recomputeTallies() {
+  /** What the client's own model says — GA units included since `render()`. */
+  clientTallies() {
+    const { held, booked, blocked } = this.counts;
+    return { held, booked, blocked, free: Math.max(0, this.unitTotal() - held - booked - blocked) };
+  }
+  /**
+   * The numbers the KPI bar and rail render.
+   *
+   * The server is the authority: its totals land exactly as read, and the
+   * delta-driven client model carries them forward until the next read. Before
+   * the first snapshot — and after a wholesale model replacement invalidates the
+   * pairing — the client model stands alone.
+   */
+  buildTallies() {
+    const client = this.clientTallies();
+    const baseline = this.serverBaseline?.model === this.modelVersion ? this.serverBaseline : null;
+    const of = (key) => baseline ? Math.max(0, baseline.server[key] + (client[key] - baseline.client[key])) : client[key];
+    const seatTotal = this.controlRoomSnapshot?.event?.seatTotal;
     const t3 = {
-      free: 0,
-      held: 0,
-      booked: 0,
-      blocked: 0,
-      total: this.allIds.length,
+      free: of("free"),
+      held: of("held"),
+      booked: of("booked"),
+      blocked: of("blocked"),
+      total: Number.isFinite(seatTotal) ? seatTotal : this.unitTotal(),
       capacityPct: 0,
       sellThroughPct: 0,
       grossRevenue: this.authoritativeGrossRevenue,
       revenueStatus: this.revenueStatus,
       currency: this.currency
     };
-    let nonFree = 0;
-    for (const st of this.status.values()) {
-      t3[st] += 1;
-      if (st !== "free") nonFree += 1;
-    }
-    t3.free = Math.max(0, t3.total - nonFree);
     t3.capacityPct = t3.total ? Math.round(t3.booked / t3.total * 100) : 0;
     const sellable = t3.total - t3.blocked;
     t3.sellThroughPct = sellable > 0 ? Math.round(t3.booked / sellable * 100) : 0;
+    return t3;
+  }
+  /**
+   * Queue one KPI/rail repaint for this burst of changes.
+   *
+   * A delta frame can carry hundreds of seats and `paintKpis` rebuilds eight
+   * nodes from scratch, so painting per change is what made an arena-sized
+   * frame expensive. Coalescing on a frame keeps the burst to a single rebuild;
+   * without `requestAnimationFrame` (SSR, an older test env) it paints inline
+   * rather than dropping the update.
+   */
+  recomputeTallies() {
+    if (this.closed) return;
+    if (typeof requestAnimationFrame !== "function") {
+      this.flushTallies();
+      return;
+    }
+    if (this.paintHandle !== null) return;
+    this.paintHandle = requestAnimationFrame(() => {
+      this.paintHandle = null;
+      this.flushTallies();
+    });
+  }
+  flushTallies() {
+    if (this.closed) return;
+    const t3 = this.buildTallies();
     this.paintKpis(t3);
     if (this.mode === "view") {
       this.paintLegend(t3);
@@ -10121,16 +10511,16 @@ var SeatManager = class {
   paintKpis(t3) {
     if (!this.els.kpis) return;
     const rev = t3.revenueStatus === "current" ? fmtMoney(t3.grossRevenue, t3.currency) : "\u2014";
-    const presence = this.controlRoomSnapshot?.presence;
+    const presence = this.presenceCounts();
     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" }
+      { key: "sold-seats", raw: t3.booked, n: t3.booked.toLocaleString(), l: "Sold seats", dot: "#22a06b", title: "Seats booked" },
+      { key: "held-seats", raw: t3.held, n: t3.held.toLocaleString(), l: "Held seats", dot: "#f4b740", title: "Seats held in a checkout right now" },
+      { key: "free-seats", raw: t3.free, n: t3.free.toLocaleString(), l: "Free seats", dot: "#6e7bff", title: "Seats on sale and unsold" },
+      { key: "blocked", raw: t3.blocked, n: t3.blocked.toLocaleString(), l: "Blocked", dot: "#8b94ac", title: "Seats withheld from sale" },
+      { key: "buyers", raw: presence?.shoppingSessions ?? null, n: presence ? presence.shoppingSessions.toLocaleString() : "\u2014", l: "Buyers", title: "People on the map right now" },
+      { key: "carts", raw: presence?.activeHolds ?? null, n: presence ? presence.activeHolds.toLocaleString() : "\u2014", l: "Carts", title: "Checkouts holding seats right now \u2014 sessions, not seats" },
+      { key: "sold-pct", raw: t3.capacityPct, n: `${t3.capacityPct}%`, l: "Sold", title: "Sold seats as a share of the whole event" },
+      { key: "gross-sales", raw: t3.revenueStatus === "current" ? t3.grossRevenue : null, n: rev, l: "Gross sales", title: "Exact booked gross" }
     ];
     let hasChanges = false;
     this.els.kpis.innerHTML = items.map((item) => {
@@ -10146,7 +10536,7 @@ var SeatManager = class {
       }
       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}">
+      return `<div class="slm-kpi${activeDelta ? " changed" : ""}" data-kpi="${item.key}" title="${esc2(item.title)}">
         <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>`;
@@ -10204,15 +10594,21 @@ var SeatManager = class {
     this.paintMomentumHelp();
     this.paintFeed();
   }
+  /** Live presence wins over the snapshot's copy — it is the fresher channel,
+   *  and it exists from the first frame rather than the first fetch. */
+  presenceCounts() {
+    return this.livePresence?.value ?? this.controlRoomSnapshot?.presence ?? null;
+  }
   paintMonitorInsights() {
     if (this.mode !== "view") return;
     const snapshot = this.controlRoomSnapshot;
     if (this.els.presence) {
       const connected = this.root?.classList.contains("live");
       const sync = this.lastSyncedAt ? relTime(this.lastSyncedAt, Date.now()) : "waiting";
+      const presence = this.presenceCounts();
       this.els.presence.innerHTML = `
-        <div class="slm-healthitem"><b>${snapshot ? snapshot.presence.shoppingSessions.toLocaleString() : "\u2014"}</b><span>Buyer sessions</span></div>
-        <div class="slm-healthitem"><b>${snapshot ? snapshot.presence.activeHolds.toLocaleString() : "\u2014"}</b><span>Active holds</span></div>
+        <div class="slm-healthitem" title="People on the map right now"><b>${presence ? presence.shoppingSessions.toLocaleString() : "\u2014"}</b><span>Buyers</span></div>
+        <div class="slm-healthitem" title="Checkouts holding seats right now \u2014 sessions, not seats"><b>${presence ? presence.activeHolds.toLocaleString() : "\u2014"}</b><span>Carts</span></div>
         <div class="slm-healthitem"><b>${connected ? "Healthy" : "Reconnecting"}</b><span>Live connection</span></div>
         <div class="slm-healthitem"><b>${sync}</b><span>Last sync</span></div>`;
     }
@@ -10823,7 +11219,7 @@ var SeatManager = class {
       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);
+    if (action !== "setHoldTtl") void this.refreshControlRoom().catch((err) => this.opts.onError?.(err));
     this.opts.onActionComplete?.({ action, labels, count: labels.length });
   }
   toastOk(msg) {