@seatlayer/js 0.11.0 → 0.12.0

package/dist/index.js

@@ -32,6 +32,7 @@ async function request(base, path, init = {}) {
 var PubApi = class {
   constructor(base) {
     this.base = base;
+    this.viewerId = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `viewer_${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
   }
   chart(key) {
     return request(this.base, `/pub/events/${encodeURIComponent(key)}/chart`);
@@ -67,7 +68,8 @@ var PubApi = class {
   }
   socketUrl(key) {
     const wsBase = this.base.replace(/^http/, "ws");
-    return `${wsBase}/pub/events/${encodeURIComponent(key)}/subscribe`;
+    const params = new URLSearchParams({ surface: "picker", viewerId: this.viewerId });
+    return `${wsBase}/pub/events/${encodeURIComponent(key)}/subscribe?${params}`;
   }
 };
 
@@ -2186,7 +2188,7 @@ var ManageApi = class {
     return this.pub(`/pub/events/${encodeURIComponent(key)}/objects`);
   }
   socketUrl(key) {
-    return `${this.base.replace(/^http/, "ws")}/pub/events/${encodeURIComponent(key)}/subscribe`;
+    return `${this.base.replace(/^http/, "ws")}/pub/events/${encodeURIComponent(key)}/subscribe?surface=manager`;
   }
   // ---- inventory writes (token) ----
   /** Take FREE seats off sale in one batched call. Optional `releaseAt` (epoch
@@ -2219,6 +2221,9 @@ var ManageApi = class {
   report(key) {
     return this.auth(`/v1/events/${encodeURIComponent(key)}/report`);
   }
+  controlRoom(key, windowMinutes = 15) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/control-room?window=${windowMinutes}`);
+  }
   log(key, opts = {}) {
     const params = new URLSearchParams();
     if (opts.limit != null) params.set("limit", String(opts.limit));
@@ -2348,7 +2353,31 @@ var CSS2 = `
 .slm-toast.err{background:#c0392b;color:#fff;border-color:#c0392b}
 .slm-toast.ok{background:#1f7a4d;color:#fff;border-color:#1f7a4d}
 
-@media (max-width:720px){.slm-rail{width:100%;border-left:0;border-top:1px solid var(--slm-line);height:44%}.slm-body{flex-direction:column}}
+/* control-room actions + insights */
+.slm-bar-actions{display:flex;align-items:center;gap:7px}
+.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-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-trend{font-size:10px;text-transform:uppercase;letter-spacing:.08em}.slm-trend.rising{color:#22a06b}.slm-trend.cooling{color:#f4b740}
+.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}
+.slm-sectionhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:18px}
+.slm-windows{display:flex;gap:3px;padding:2px;border:1px solid var(--slm-line);border-radius:8px;background:var(--slm-surface)}
+.slm-window{padding:4px 6px;border-radius:6px;font-size:10px;font-weight:800;color:var(--slm-muted)}.slm-window.on{background:var(--slm-accent);color:var(--slm-accent-ink)}
+.slm-inspect-card{padding:12px;border:1px solid var(--slm-line);border-radius:12px;background:var(--slm-surface)}
+.slm-inspect-label{font-size:24px;font-weight:850;letter-spacing:-.02em}.slm-inspect-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
+.slm-inspect-grid span{display:block;color:var(--slm-muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.slm-inspect-grid b{display:block;margin-top:3px;font-size:12.5px}
+.slm:fullscreen{border-radius:0;min-height:100vh;background:var(--slm-bg)}
+.slm:fullscreen .slm-bar{padding:14px 22px}.slm:fullscreen .slm-kpi b{font-size:21px}.slm:fullscreen .slm-rail{width:360px}
+
+.slm.compact .slm-rail{width:100%;border-left:0;border-top:1px solid var(--slm-line);height:44%}
+.slm.compact .slm-body{flex-direction:column}
+.slm.compact .slm-bar{gap:8px;padding:8px}.slm.compact .slm-barbtn{padding:6px 9px}
+.slm.compact .slm-kpis{gap:9px}.slm.compact .slm-kpi:nth-child(n+5){display:none}
 `;
 function injectStyle() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
@@ -2386,6 +2415,9 @@ function fmtMoney(amount, currency) {
     return `${currency} ${Math.round(amount).toLocaleString()}`;
   }
 }
+function esc(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
 var SeatManager = class {
   constructor(options) {
     this.els = {};
@@ -2396,8 +2428,14 @@ var SeatManager = class {
     this.labelToSeat = /* @__PURE__ */ new Map();
     this.allIds = [];
     this.status = /* @__PURE__ */ new Map();
-    this.priceByCat = /* @__PURE__ */ new Map();
     this.currency = "USD";
+    this.authoritativeGrossRevenue = 0;
+    this.revenueStatus = "loading";
+    this.revenueRequest = 0;
+    this.revenueRefreshTimer = null;
+    this.controlRoomSnapshot = null;
+    this.trendWindowMinutes = 15;
+    this.heatEnabled = false;
     // realtime socket
     this.ws = null;
     this.reconnectTimer = null;
@@ -2408,12 +2446,37 @@ var SeatManager = class {
     this.feedTimer = null;
     this.toastTimer = null;
     this.releaseAt = null;
+    this.layoutObserver = null;
+    this.tokenExpiresAt = null;
+    this.tokenRefreshTimer = null;
+    this.tokenRefreshInFlight = false;
+    this.sectionByObject = /* @__PURE__ */ new Map();
+    this.sectionLabelById = /* @__PURE__ */ new Map();
+    this.lastSyncedAt = null;
+    this.onFullscreenChange = () => {
+      this.paintFullscreenButton();
+      this.updateContainerLayout();
+      this.renderer?.forceDraw();
+    };
+    this.onKeyDown = (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+      const target = event.target;
+      if (target?.matches('input,select,textarea,[contenteditable="true"]')) return;
+      const key = event.key.toLowerCase();
+      if (key === "m") this.setMode("view");
+      else if (key === "i") this.setMode("inspect");
+      else if (key === "b") this.setMode("block");
+      else if (key === "f") this.toggleFullscreen();
+      else return;
+      event.preventDefault();
+    };
     this.sectionOptions = [];
     this.opts = options;
     this.key = options.eventKey;
     this.mode = options.mode ?? "view";
     this.keepLive = options.keepLiveWhileHidden ?? true;
     this.currency = options.currency ?? "USD";
+    this.tokenExpiresAt = options.tokenExpiresAt ?? null;
     this.api = new ManageApi(options.apiBase ?? DEFAULT_API_BASE3, options.token);
     this.host = resolveContainer4(options.container);
   }
@@ -2425,7 +2488,6 @@ 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;
-      for (const cat of res.doc.categories) this.priceByCat.set(cat.key, cat.price ?? 0);
       const seats = expandChart2(res.doc);
       for (const s of seats) {
         this.labelToId.set(s.label, s.id);
@@ -2434,13 +2496,17 @@ var SeatManager = class {
       }
       this.buildRenderer();
       this.buildSectionOptions();
-      await this.resnapshot();
+      await Promise.all([
+        this.resnapshot(),
+        this.refreshControlRoom().catch((err) => this.opts.onError?.(err))
+      ]);
       this.api.log(this.key, { limit: 24 }).then((page) => this.seedFeed(page.entries)).catch(() => {
       });
       this.connect();
       this.startFeedClock();
       this.ready = true;
       this.setMode(this.mode);
+      this.scheduleTokenRefresh();
       this.opts.onReady?.();
     } catch (err) {
       this.fail(err);
@@ -2449,11 +2515,82 @@ var SeatManager = class {
   }
   // ---- public API -----------------------------------------------------------
   setMode(mode) {
-    const changed = mode !== this.mode || !this.renderer;
+    const changed = mode !== this.mode;
     this.mode = mode;
-    if (changed && this.doc) this.buildRenderer();
+    if (!this.renderer && this.doc) this.buildRenderer();
+    else this.updateRendererInteraction();
+    if (changed) this.renderer?.clearSelection();
     this.paintModeTabs();
     this.paintRail();
+    if (changed) this.opts.onModeChange?.(mode);
+  }
+  /** Toggle the normalized sales-velocity outline overlay without changing seat colors. */
+  setHeatOverlay(enabled) {
+    this.heatEnabled = enabled;
+    this.applyHeatOverlay();
+    this.paintHeatButton();
+  }
+  /** Change the current-vs-previous sales window and refresh the private projection. */
+  setTrendWindow(windowMinutes) {
+    const normalized = Number.isFinite(windowMinutes) ? Math.floor(windowMinutes) : 15;
+    this.trendWindowMinutes = Math.max(5, Math.min(60, normalized));
+    this.paintTrendWindow();
+    return this.refreshControlRoom();
+  }
+  async enterFullscreen() {
+    if (!this.root?.requestFullscreen || this.isFullscreen()) return;
+    await this.root.requestFullscreen();
+    this.root.focus({ preventScroll: true });
+  }
+  async exitFullscreen() {
+    if (typeof document === "undefined" || !this.isFullscreen()) return;
+    await document.exitFullscreen();
+  }
+  isFullscreen() {
+    return typeof document !== "undefined" && document.fullscreenElement === this.root;
+  }
+  toggleFullscreen() {
+    const request2 = this.isFullscreen() ? this.exitFullscreen() : this.enterFullscreen();
+    void request2.catch((err) => this.opts.onError?.(err));
+  }
+  /** Rotate the delegated credential without rebuilding DOM, canvas or socket. */
+  setToken(token, expiresAt) {
+    this.api.setToken(token);
+    this.tokenExpiresAt = expiresAt ?? null;
+    this.scheduleTokenRefresh();
+  }
+  scheduleTokenRefresh() {
+    if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
+    this.tokenRefreshTimer = null;
+    const refresh = this.opts.onTokenRefresh;
+    const expiresAt = this.tokenExpiresAt;
+    if (this.closed || !refresh || !expiresAt || !Number.isFinite(expiresAt)) return;
+    const remaining = expiresAt - Date.now();
+    const lead = Math.min(12e4, Math.max(3e4, remaining * 0.2));
+    const delay = Math.max(0, remaining - lead);
+    this.tokenRefreshTimer = setTimeout(() => {
+      this.tokenRefreshTimer = null;
+      void this.rotateToken();
+    }, delay);
+  }
+  async rotateToken() {
+    if (this.closed || this.tokenRefreshInFlight || !this.opts.onTokenRefresh) return;
+    this.tokenRefreshInFlight = true;
+    try {
+      const next = await this.opts.onTokenRefresh();
+      if (!next?.token || !Number.isFinite(next.expiresAt)) throw new Error("invalid_token_refresh_result");
+      this.setToken(next.token, next.expiresAt);
+    } catch (err) {
+      this.opts.onError?.(err);
+      if (!this.closed) {
+        this.tokenRefreshTimer = setTimeout(() => {
+          this.tokenRefreshTimer = null;
+          void this.rotateToken();
+        }, 3e4);
+      }
+    } finally {
+      this.tokenRefreshInFlight = false;
+    }
   }
   /** Bulk block the given labels (or the current selection when omitted). */
   async block(labels, opts = {}) {
@@ -2538,7 +2675,13 @@ var SeatManager = class {
     return this.renderer?.getSelection() ?? [];
   }
   getReport() {
-    return this.api.report(this.key);
+    return this.api.report(this.key).then((report) => {
+      this.applyReportRevenue(report);
+      return report;
+    });
+  }
+  getControlRoomSnapshot(windowMinutes = this.trendWindowMinutes) {
+    return this.setTrendWindow(windowMinutes);
   }
   getLog(opts = {}) {
     return this.api.log(this.key, opts);
@@ -2565,6 +2708,12 @@ var SeatManager = class {
     if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
     if (this.feedTimer) clearInterval(this.feedTimer);
     if (this.toastTimer) clearTimeout(this.toastTimer);
+    if (this.revenueRefreshTimer) clearTimeout(this.revenueRefreshTimer);
+    if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
+    this.layoutObserver?.disconnect();
+    this.layoutObserver = null;
+    this.root?.removeEventListener("keydown", this.onKeyDown);
+    if (typeof document !== "undefined") document.removeEventListener("fullscreenchange", this.onFullscreenChange);
     if (this.ws) {
       try {
         this.ws.close();
@@ -2576,26 +2725,45 @@ var SeatManager = class {
     this.renderer = null;
     if (this.root && this.root.parentNode === this.host) this.host.removeChild(this.root);
   }
-  // ---- renderer lifecycle (rebuilt per mode, like ManageEventPage) ----------
+  // ---- renderer lifecycle ---------------------------------------------------
   buildRenderer() {
     if (!this.doc) return;
-    this.renderer?.destroy();
     const block = this.mode === "block";
+    const inspect = this.mode === "inspect";
     this.renderer = new SeatmapRenderer(this.mapHost, {
       manageMode: true,
       marqueeSelect: block,
       maxSelection: 1e6,
-      selectableStatuses: block ? ["free", "not_for_sale", "booked"] : [],
+      selectableStatuses: block ? ["free", "not_for_sale"] : inspect ? ["free", "held", "booked", "not_for_sale"] : [],
       currency: this.currency,
-      onSelect: () => this.syncSelection(),
+      onSelect: (seat) => this.handleSeatSelect(seat),
       onDeselect: () => this.syncSelection(),
       onMarquee: () => this.syncSelection(),
       onViewChange: () => this.updateZoomHint()
     });
     this.renderer.setChart(this.doc);
     this.repaintAll();
+    this.applyHeatOverlay();
+    this.updateZoomHint();
+  }
+  updateRendererInteraction() {
+    const block = this.mode === "block";
+    const inspect = this.mode === "inspect";
+    this.renderer?.setManageInteraction({
+      manageMode: true,
+      marqueeSelect: block,
+      maxSelection: 1e6,
+      selectableStatuses: block ? ["free", "not_for_sale"] : inspect ? ["free", "held", "booked", "not_for_sale"] : []
+    });
     this.updateZoomHint();
   }
+  handleSeatSelect(seat) {
+    if (this.mode === "inspect") {
+      const others = this.getSelection().filter((selected) => selected.id !== seat.id).map((selected) => selected.id);
+      if (others.length) this.renderer?.deselect(others);
+    }
+    this.syncSelection();
+  }
   repaintAll() {
     const r = this.renderer;
     if (!r) return;
@@ -2623,7 +2791,7 @@ var SeatManager = class {
     ws.onopen = () => {
       this.attempt = 0;
       this.setLive(true);
-      void this.resnapshot();
+      void this.resnapshot().then(() => this.scheduleRevenueRefresh(0));
     };
     ws.onmessage = (e) => this.onMessage(e);
     ws.onclose = () => {
@@ -2655,11 +2823,25 @@ var SeatManager = class {
     }
     if (!msg || typeof msg !== "object") return;
     const m = msg;
+    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 }
+        };
+        this.lastSyncedAt = Date.now();
+        this.recomputeTallies();
+        this.paintMonitorInsights();
+        this.opts.onControlRoom?.(this.controlRoomSnapshot);
+      }
+      return;
+    }
     if (m.type === "hidden") return;
     if (m.seats && typeof m.seats === "object") {
       this.applySnapshot(m.seats);
     } else if (Array.isArray(m.changes)) {
       const ids = [];
+      const groups = /* @__PURE__ */ new Map();
       for (const ch of m.changes) {
         const st = ["free", "held", "booked", "blocked"].includes(ch.status) ? ch.status : "free";
         const prev = this.status.get(ch.label) ?? "free";
@@ -2671,10 +2853,19 @@ var SeatManager = class {
           this.flash(id, st);
           ids.push(id);
         }
-        this.pushActivity(ch.label, prev, st);
+        const verb = this.verbFor(prev, st);
+        const groupKey = `${verb}:${st}`;
+        const group = groups.get(groupKey) ?? { labels: [], verb, status: st };
+        group.labels.push(ch.label);
+        groups.set(groupKey, group);
+      }
+      for (const group of groups.values()) this.pushActivity(group.labels, group.verb, group.status);
+      if (ids.length) {
+        this.lastSyncedAt = Date.now();
+        this.afterPaint();
       }
-      if (ids.length) this.afterPaint();
       this.recomputeTallies();
+      if (ids.length) this.scheduleRevenueRefresh();
     }
   }
   async resnapshot() {
@@ -2690,6 +2881,7 @@ var SeatManager = class {
       next.set(label, ["free", "held", "booked", "blocked"].includes(st) ? st : "free");
     }
     this.status = next;
+    this.lastSyncedAt = Date.now();
     this.repaintAll();
     this.afterPaint();
     this.recomputeTallies();
@@ -2713,6 +2905,47 @@ var SeatManager = class {
     else if (st === "booked") this.renderer?.flashSeat(id, "#22a06b");
   }
   // ---- tallies + feed -------------------------------------------------------
+  applyReportRevenue(report) {
+    this.authoritativeGrossRevenue = report.report.byCategory.reduce(
+      (sum, row) => sum + (Number.isFinite(row.bookedRevenue) ? row.bookedRevenue : 0),
+      0
+    );
+    this.revenueStatus = "current";
+    this.recomputeTallies();
+  }
+  async refreshControlRoom() {
+    const request2 = ++this.revenueRequest;
+    try {
+      const snapshot = await this.api.controlRoom(this.key, this.trendWindowMinutes);
+      if (request2 === this.revenueRequest) {
+        this.controlRoomSnapshot = snapshot;
+        this.lastSyncedAt = Date.now();
+        this.authoritativeGrossRevenue = snapshot.revenue.gross;
+        this.currency = snapshot.currency;
+        this.revenueStatus = "current";
+        this.recomputeTallies();
+        this.applyHeatOverlay();
+        this.paintMonitorInsights();
+        this.opts.onControlRoom?.(snapshot);
+      }
+      return snapshot;
+    } catch (err) {
+      if (request2 === this.revenueRequest) {
+        this.revenueStatus = "stale";
+        this.recomputeTallies();
+      }
+      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);
+  }
   recomputeTallies() {
     const t3 = {
       free: 0,
@@ -2722,24 +2955,24 @@ var SeatManager = class {
       total: this.allIds.length,
       capacityPct: 0,
       sellThroughPct: 0,
-      grossRevenue: 0,
+      grossRevenue: this.authoritativeGrossRevenue,
+      revenueStatus: this.revenueStatus,
       currency: this.currency
     };
     let nonFree = 0;
-    for (const [label, st] of this.status.entries()) {
+    for (const st of this.status.values()) {
       t3[st] += 1;
       if (st !== "free") nonFree += 1;
-      if (st === "booked") {
-        const seat = this.labelToSeat.get(label);
-        if (seat) t3.grossRevenue += this.priceByCat.get(seat.categoryKey) ?? 0;
-      }
     }
     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;
     this.paintKpis(t3);
-    if (this.mode === "view") this.paintLegend(t3);
+    if (this.mode === "view") {
+      this.paintLegend(t3);
+      this.paintMonitorInsights();
+    } else if (this.mode === "inspect") this.renderInspectRail(this.getSelection());
     this.opts.onTallies?.(t3);
   }
   verbFor(prev, next) {
@@ -2749,17 +2982,22 @@ var SeatManager = class {
     if (next === "free") return prev === "blocked" ? "unblocked" : prev === "booked" ? "cancelled" : "released";
     return next;
   }
-  pushActivity(label, prev, next) {
+  pushActivity(labels, verb, status, at = Date.now()) {
+    const label = labels[0];
+    if (!label) return;
     const item = {
-      id: `${label}:${Date.now()}:${Math.random().toString(36).slice(2, 6)}`,
-      at: Date.now(),
+      id: `${label}:${at}:${Math.random().toString(36).slice(2, 6)}`,
+      at,
       label,
-      verb: this.verbFor(prev, next),
-      status: next
+      labels: [...labels],
+      count: labels.length,
+      verb,
+      status
     };
     this.feed.unshift(item);
     if (this.feed.length > FEED_CAP) this.feed.length = FEED_CAP;
     if (this.mode === "view") this.paintFeed();
+    this.opts.onActivity?.(item);
   }
   seedFeed(entries) {
     const verbByAction = {
@@ -2781,14 +3019,17 @@ var SeatManager = class {
     for (const e of entries) {
       const label = e.labels[0];
       if (!label) continue;
-      const extra = e.labels.length > 1 ? ` +${e.labels.length - 1}` : "";
-      this.feed.push({
+      const item = {
         id: `log:${e.id}`,
         at: e.at,
-        label: label + extra,
+        label,
+        labels: [...e.labels],
+        count: e.labels.length,
         verb: verbByAction[e.action] ?? e.action,
         status: stByAction[e.action] ?? "free"
-      });
+      };
+      this.feed.push(item);
+      this.opts.onActivity?.(item);
     }
     this.feed.sort((a, b) => b.at - a.at);
     if (this.feed.length > FEED_CAP) this.feed.length = FEED_CAP;
@@ -2796,7 +3037,10 @@ var SeatManager = class {
   }
   startFeedClock() {
     this.feedTimer = setInterval(() => {
-      if (this.mode === "view") this.paintFeed();
+      if (this.mode === "view") {
+        this.paintFeed();
+        this.paintMonitorInsights();
+      }
     }, 1e4);
   }
   // ---- selection ------------------------------------------------------------
@@ -2806,21 +3050,30 @@ var SeatManager = class {
   syncSelection() {
     const seats = this.getSelection();
     if (this.mode === "block") this.paintSelBar(seats);
+    else if (this.mode === "inspect") this.renderInspectRail(seats);
     this.opts.onSelectionChange?.(seats);
   }
   // ---- DOM: chrome ----------------------------------------------------------
   buildChrome() {
     const root = document.createElement("div");
     root.className = "slm";
+    root.tabIndex = 0;
+    root.setAttribute("role", "region");
+    root.setAttribute("aria-label", "SeatLayer live control room");
     const vars = themeVars(this.opts.theme);
     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">View</button>
-          <button class="slm-mode" data-mode="block">Block</button>
+          <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>
         <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" data-ref="heat" aria-pressed="false">Heat</button>
+          <button class="slm-barbtn" data-ref="fullscreen" title="Full screen (F)" aria-keyshortcuts="F">Full screen</button>
+        </div>
         <div class="slm-kpis" data-ref="kpis"></div>
       </div>
       <div class="slm-body">
@@ -2835,12 +3088,19 @@ var SeatManager = class {
     `;
     this.host.appendChild(root);
     this.root = root;
+    this.updateContainerLayout();
+    if (typeof ResizeObserver !== "undefined") {
+      this.layoutObserver = new ResizeObserver(() => this.updateContainerLayout());
+      this.layoutObserver.observe(root);
+    }
     const ref = (n) => root.querySelector(`[data-ref="${n}"]`);
     this.mapHost = ref("maphost");
     this.els = {
       modes: ref("modes"),
       livetext: ref("livetext"),
       kpis: ref("kpis"),
+      heat: ref("heat"),
+      fullscreen: ref("fullscreen"),
       zoomhint: ref("zoomhint"),
       rail: ref("rail"),
       toast: ref("toast"),
@@ -2848,14 +3108,33 @@ var SeatManager = class {
     };
     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.heat.addEventListener("click", () => this.setHeatOverlay(!this.heatEnabled));
+    this.els.fullscreen.addEventListener("click", () => this.toggleFullscreen());
+    root.addEventListener("keydown", this.onKeyDown);
+    document.addEventListener("fullscreenchange", this.onFullscreenChange);
     this.paintModeTabs();
+    this.paintHeatButton();
+    this.paintFullscreenButton();
+  }
+  updateContainerLayout() {
+    const width = this.root?.getBoundingClientRect().width || this.host.clientWidth;
+    this.root?.classList.toggle("compact", width > 0 && width < 800);
   }
   buildSectionOptions() {
     if (!this.doc) return;
     try {
       const secs = computeSections(this.doc);
-      for (const s of secs.sections) this.sectionOptions.push({ id: s.id, label: s.label });
-      if (secs.ungrouped) this.sectionOptions.push({ id: UNGROUPED_ID, label: secs.ungrouped.label });
+      this.sectionOptions = [];
+      this.sectionByObject = new Map(secs.objectToSection);
+      this.sectionLabelById.clear();
+      for (const s of secs.sections) {
+        this.sectionOptions.push({ id: s.id, label: s.label });
+        this.sectionLabelById.set(s.id, s.label);
+      }
+      if (secs.ungrouped) {
+        this.sectionOptions.push({ id: UNGROUPED_ID, label: secs.ungrouped.label });
+        this.sectionLabelById.set(UNGROUPED_ID, secs.ungrouped.label);
+      }
     } catch {
     }
   }
@@ -2866,9 +3145,27 @@ var SeatManager = class {
     });
     this.root?.classList.toggle("block-mode", this.mode === "block");
   }
+  paintHeatButton() {
+    const button = this.els.heat;
+    if (!button) return;
+    button.classList.toggle("on", this.heatEnabled);
+    button.setAttribute("aria-pressed", String(this.heatEnabled));
+    button.textContent = this.heatEnabled ? "Heat on" : "Heat";
+  }
+  paintFullscreenButton() {
+    if (!this.els.fullscreen) return;
+    this.els.fullscreen.textContent = this.isFullscreen() ? "Exit full screen" : "Full screen";
+  }
+  paintTrendWindow() {
+    this.els.rail?.querySelectorAll("[data-window]").forEach((button) => {
+      const value = Number(button.dataset.window);
+      button.classList.toggle("on", value === this.trendWindowMinutes);
+    });
+  }
   setLive(on) {
     this.root?.classList.toggle("live", on);
     if (this.els.livetext) this.els.livetext.textContent = on ? "LIVE" : "RECONNECTING";
+    this.paintMonitorInsights();
   }
   updateZoomHint() {
     const hint = this.els.zoomhint;
@@ -2878,10 +3175,13 @@ var SeatManager = class {
   }
   paintKpis(t3) {
     if (!this.els.kpis) return;
-    const rev = fmtMoney(t3.grossRevenue, t3.currency);
+    const rev = t3.revenueStatus === "current" ? fmtMoney(t3.grossRevenue, t3.currency) : "\u2014";
+    const presence = this.controlRoomSnapshot?.presence;
     this.els.kpis.innerHTML = [
       { n: t3.booked.toLocaleString(), l: "Sold", dot: "#22a06b" },
       { n: t3.held.toLocaleString(), l: "Held", dot: "#f4b740" },
+      { n: presence ? presence.shoppingSessions.toLocaleString() : "\u2014", l: "Shopping" },
+      { n: presence ? presence.activeHolds.toLocaleString() : "\u2014", l: "Live holds" },
       { n: t3.free.toLocaleString(), l: "Free", dot: "#6e7bff" },
       { n: t3.blocked.toLocaleString(), l: "Blocked", dot: "#8b94ac" },
       { n: `${t3.capacityPct}%`, l: "Capacity" },
@@ -2891,22 +3191,120 @@ var SeatManager = class {
   // ---- DOM: rails -----------------------------------------------------------
   paintRail() {
     if (this.mode === "view") this.renderViewRail();
+    else if (this.mode === "inspect") this.renderInspectRail(this.getSelection());
     else this.renderBlockRail();
     this.updateZoomHint();
   }
   renderViewRail() {
     this.els.rail.innerHTML = `
-      <p class="slm-eyebrow">Live board</p>
-      <p class="slm-hint">Read-only. Seats repaint and flash as buyers hold and book \u2014 watch your event breathe.</p>
+      <p class="slm-eyebrow">Monitor</p>
+      <p class="slm-hint">Read-only. Inventory, buyer presence and sales movement update on the same live board.</p>
+      <div class="slm-health" data-ref="presence"></div>
       <div class="slm-legend" data-ref="legend"></div>
+      <div class="slm-sectionhead">
+        <div><p class="slm-eyebrow">Section performance</p><p class="slm-note">Exact booked revenue \xB7 net sales velocity</p></div>
+        <div class="slm-windows" aria-label="Sales velocity window">
+          ${[5, 15, 30, 60].map((window2) => `<button class="slm-window" data-window="${window2}">${window2}m</button>`).join("")}
+        </div>
+      </div>
+      <div class="slm-sectionlist" data-ref="sections"></div>
       <p class="slm-eyebrow">Activity</p>
       <div class="slm-feed" data-ref="feed"></div>
     `;
+    this.els.presence = this.els.rail.querySelector('[data-ref="presence"]');
     this.els.legend = this.els.rail.querySelector('[data-ref="legend"]');
+    this.els.sections = this.els.rail.querySelector('[data-ref="sections"]');
     this.els.feed = this.els.rail.querySelector('[data-ref="feed"]');
+    this.els.rail.querySelectorAll("[data-window]").forEach((button) => button.addEventListener("click", () => {
+      const windowMinutes = Number(button.dataset.window);
+      void this.setTrendWindow(windowMinutes).catch((err) => this.opts.onError?.(err));
+    }));
     this.recomputeTallies();
+    this.paintMonitorInsights();
+    this.paintTrendWindow();
     this.paintFeed();
   }
+  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";
+      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"><b>${connected ? "Healthy" : "Reconnecting"}</b><span>Live connection</span></div>
+        <div class="slm-healthitem"><b>${sync}</b><span>Last sync</span></div>`;
+    }
+    if (!this.els.sections) return;
+    if (!snapshot) {
+      this.els.sections.innerHTML = '<div class="slm-empty">Loading authoritative section metrics\u2026</div>';
+      return;
+    }
+    const velocity = new Map(snapshot.velocity.bySection.map((row) => [row.sectionId, row]));
+    const rows = [...snapshot.revenue.bySection].sort((a, b) => {
+      const av = velocity.get(a.sectionId)?.netBooked ?? 0;
+      const bv = velocity.get(b.sectionId)?.netBooked ?? 0;
+      return bv - av || b.bookedRevenue - a.bookedRevenue;
+    });
+    this.els.sections.innerHTML = rows.length ? rows.map((row) => {
+      const speed = velocity.get(row.sectionId);
+      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>`;
+    }).join("") : '<div class="slm-empty">No section metrics are available for this chart.</div>';
+    this.paintTrendWindow();
+  }
+  applyHeatOverlay() {
+    const snapshot = this.controlRoomSnapshot;
+    if (!this.heatEnabled || !snapshot) {
+      this.renderer?.setSectionHeat(null);
+      return;
+    }
+    const capacity = new Map(snapshot.revenue.bySection.map((row) => [row.sectionId, Math.max(1, row.total)]));
+    const rates = snapshot.velocity.bySection.map((row) => ({
+      sectionId: row.sectionId,
+      rate: Math.max(0, row.netBooked) / (capacity.get(row.sectionId) ?? 1) / snapshot.velocity.windowMinutes
+    }));
+    const max = Math.max(0, ...rates.map((row) => row.rate));
+    const scores = {};
+    for (const row of rates) scores[row.sectionId] = max > 0 ? Math.sqrt(row.rate / max) : 0;
+    this.renderer?.setSectionHeat(scores);
+  }
+  renderInspectRail(seats) {
+    const seat = seats[seats.length - 1];
+    if (!seat) {
+      this.els.rail.innerHTML = `
+        <p class="slm-eyebrow">Inspect</p>
+        <p class="slm-hint">Select any seat to see its live inventory context. Inspect is read-only and never changes availability.</p>
+        <div class="slm-empty">Choose a seat on the map.</div>`;
+      return;
+    }
+    const status = this.status.get(seat.label) ?? "free";
+    const statusLabel = { free: "Free", held: "Held", booked: "Booked", blocked: "Blocked" };
+    const sectionId = this.sectionByObject.get(seat.rowId) ?? UNGROUPED_ID;
+    const sectionLabel = this.sectionLabelById.get(sectionId) ?? "Other seats";
+    const category = this.doc?.categories.find((item) => item.key === seat.categoryKey);
+    const sectionMetric = this.controlRoomSnapshot?.revenue.bySection.find((row) => row.sectionId === sectionId);
+    this.els.rail.innerHTML = `
+      <p class="slm-eyebrow">Inspect</p>
+      <p class="slm-hint">Live inventory context. Booked seats remain read-only; order and payment actions belong to the host commerce system.</p>
+      <div class="slm-inspect-card">
+        <div class="slm-inspect-label">${esc(seat.label)}</div>
+        <div class="slm-inspect-grid">
+          <div><span>Status</span><b>${statusLabel[status]}</b></div>
+          <div><span>Section</span><b>${esc(sectionLabel)}</b></div>
+          <div><span>Row</span><b>${esc(seat.rowId)}</b></div>
+          <div><span>Category</span><b>${esc(category?.label ?? seat.categoryKey)}</b></div>
+          <div><span>Section sold</span><b>${sectionMetric ? `${sectionMetric.booked}/${sectionMetric.total}` : "\u2014"}</b></div>
+          <div><span>Section revenue</span><b>${sectionMetric && this.controlRoomSnapshot ? fmtMoney(sectionMetric.bookedRevenue, this.controlRoomSnapshot.currency) : "\u2014"}</b></div>
+        </div>
+      </div>`;
+  }
   paintLegend(t3) {
     if (!this.els.legend) return;
     this.els.legend.innerHTML = LEGEND.map((l) => `<div class="slm-legrow"><span class="slm-legdot" style="background:${l.color}"></span>
@@ -2920,19 +3318,22 @@ var SeatManager = class {
     }
     const now = Date.now();
     const color = { free: "#6e7bff", held: "#f4b740", booked: "#22a06b", blocked: "#8b94ac" };
-    this.els.feed.innerHTML = this.feed.map((a) => `<div class="slm-feedrow"><span class="slm-feeddot" style="background:${color[a.status]}"></span>
-        <span class="slm-feedtext">Seat <b>${a.label}</b> ${a.verb}</span>
-        <span class="slm-feedtime">${relTime(a.at, now)}</span></div>`).join("");
+    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>`;
+    }).join("");
   }
   renderBlockRail() {
     const cats = this.doc?.categories ?? [];
-    const catChips = cats.map((c) => `<button class="slm-chip" data-cat="${c.key}"><span class="dot" style="background:${c.color ?? "#6e7bff"}"></span>${c.label ?? c.key}</button>`).join("");
+    const catChips = cats.map((c) => `<button class="slm-chip" data-cat="${esc(c.key)}"><span class="dot" style="background:${esc(c.color ?? "#6e7bff")}"></span>${esc(c.label ?? c.key)}</button>`).join("");
     const sectionField = this.sectionOptions.length ? `<div class="slm-field"><label>Select a whole section</label>
           <select class="slm-select" data-ref="section"><option value="">Choose a section\u2026</option>
-          ${this.sectionOptions.map((s) => `<option value="${s.id}">${s.label}</option>`).join("")}</select></div>` : "";
+          ${this.sectionOptions.map((s) => `<option value="${esc(s.id)}">${esc(s.label)}</option>`).join("")}</select></div>` : "";
     this.els.rail.innerHTML = `
-      <p class="slm-eyebrow">Block &amp; cancel</p>
-      <p class="slm-hint">Drag a box on the map to marquee-select, \u2318A for all, or pick a category/section \u2014 then block, unblock, or cancel bookings in one action.</p>
+      <p class="slm-eyebrow">Block &amp; unblock</p>
+      <p class="slm-hint">Drag a box on the map to marquee-select, \u2318A for all, or pick a category/section. Booked and held inventory is never actionable here.</p>
       <div class="slm-selbar"><span class="slm-selnum" data-ref="selnum">0</span><span class="slm-sellabel">selected</span></div>
       <div class="slm-row">
         <button class="slm-btn" data-ref="doblock" disabled>Block</button>
@@ -2941,7 +3342,6 @@ var SeatManager = class {
       <div class="slm-row">
         <button class="slm-btn ghost" data-ref="selall">Select all</button>
         <button class="slm-btn ghost" data-ref="clearsel">Clear</button>
-        <button class="slm-btn danger" data-ref="docancel" disabled>Cancel booking</button>
       </div>
       <p class="slm-eyebrow" style="margin-top:8px">By category</p>
       <div class="slm-chiprow">${catChips || '<span class="slm-empty">No categories.</span>'}</div>
@@ -2957,10 +3357,8 @@ var SeatManager = class {
     this.els.selnum = r("selnum");
     this.els.doblock = r("doblock");
     this.els.dounblock = r("dounblock");
-    this.els.docancel = r("docancel");
     r("doblock").addEventListener("click", () => void this.block());
     r("dounblock").addEventListener("click", () => void this.unblock());
-    r("docancel").addEventListener("click", () => this.promptCancel());
     r("selall").addEventListener("click", () => this.selectAll());
     r("clearsel").addEventListener("click", () => this.clearSelection());
     r("markall").addEventListener("click", () => void this.unblockAll());
@@ -2986,28 +3384,18 @@ var SeatManager = class {
     for (const [label, seat] of this.labelToSeat.entries()) if (seat.categoryKey === catKey) labels.push(label);
     this.selectByLabels(labels);
   }
-  promptCancel() {
-    const booked = this.getSelection().filter((s) => this.status.get(s.label) === "booked");
-    if (!booked.length) return;
-    if (typeof window === "undefined") return;
-    if (!window.confirm(`Cancel ${booked.length} booking${booked.length === 1 ? "" : "s"}? Seats return to sale (credit not refunded).`)) return;
-    const ref = window.prompt("Enter the original booking reference to cancel safely:")?.trim();
-    if (!ref) return;
-    void this.cancelBooking(booked.map((s) => s.label), ref);
-  }
   paintSelBar(seats) {
     if (!this.els.selnum) return;
     this.els.selnum.textContent = seats.length.toLocaleString();
     const hasFree = seats.some((s) => this.status.get(s.label) === "free");
     const hasBlocked = seats.some((s) => this.status.get(s.label) === "blocked");
-    const hasBooked = seats.some((s) => this.status.get(s.label) === "booked");
     this.els.doblock.disabled = !hasFree;
     this.els.dounblock.disabled = !hasBlocked;
-    this.els.docancel.disabled = !hasBooked;
   }
   // ---- toast / done / fail --------------------------------------------------
   done(action, labels, msg) {
     this.toastOk(msg);
+    if (action !== "setHoldTtl") this.scheduleRevenueRefresh(0);
     this.opts.onActionComplete?.({ action, labels, count: labels.length });
   }
   toastOk(msg) {