@seatlayer/js 0.12.0 → 0.12.1

package/README.md

@@ -46,7 +46,7 @@ Svelte → `onMount` / `onDestroy`. Angular → `ngAfterViewInit` / `ngOnDestroy
 realtime organizer cockpit. Mint a short-lived, event-scoped `mse_` token from
 your backend, bound to the browser's exact origin and only the capabilities it
 needs. The shared surface owns Monitor, Inspect, Block/unblock, fullscreen,
-presence, exact section revenue, sales velocity, and its heat overlay.
+presence, exact section revenue, sales velocity, and a clearly explained **Sales momentum** overlay.
 
 ```js
 import { SeatManager } from '@seatlayer/js';

package/dist/index.cjs

@@ -2387,6 +2387,10 @@ var CSS2 = `
 .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-momentumhelp{margin:10px 0 14px;padding:10px;border:1px solid rgba(244,183,64,.28);border-radius:10px;background:rgba(244,183,64,.07)}
+.slm-momentumhelp[hidden]{display:none}.slm-momentumscale{display:flex;align-items:center;gap:7px;color:var(--slm-muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}
+.slm-momentumgradient{height:6px;min-width:64px;flex:1;border-radius:999px;background:linear-gradient(90deg,#f4b740,#ef4444)}
+.slm-momentumcopy{margin-top:7px;color:var(--slm-muted);font-size:11px;line-height:1.45}
 .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}
@@ -3090,7 +3094,9 @@ var SeatManager = class {
         </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="heat" aria-pressed="false"
+            aria-label="Sales momentum overlay off"
+            title="Highlight sections selling fastest in the selected time window">Sales momentum</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>
@@ -3169,7 +3175,19 @@ var SeatManager = class {
     if (!button) return;
     button.classList.toggle("on", this.heatEnabled);
     button.setAttribute("aria-pressed", String(this.heatEnabled));
-    button.textContent = this.heatEnabled ? "Heat on" : "Heat";
+    button.setAttribute("aria-label", `Sales momentum overlay ${this.heatEnabled ? "on" : "off"}`);
+    button.setAttribute("title", `${this.heatEnabled ? "Hide" : "Highlight"} sections selling fastest in the selected time window`);
+    button.textContent = "Sales momentum";
+    this.paintMomentumHelp();
+  }
+  paintMomentumHelp() {
+    const help = this.els.rail?.querySelector('[data-ref="momentumhelp"]');
+    if (!help) return;
+    help.hidden = !this.heatEnabled;
+    const copy = help.querySelector('[data-ref="momentumcopy"]');
+    if (!copy) return;
+    const hasRecentSales = this.controlRoomSnapshot?.velocity.bySection.some((row) => row.netBooked > 0);
+    copy.textContent = hasRecentSales ? "Warmer sections have more completed bookings, adjusted for section size. Holds and viewers are not counted." : `No completed bookings in the last ${this.trendWindowMinutes} minutes.`;
   }
   paintFullscreenButton() {
     if (!this.els.fullscreen) return;
@@ -3226,6 +3244,10 @@ var SeatManager = class {
           ${[5, 15, 30, 60].map((window2) => `<button class="slm-window" data-window="${window2}">${window2}m</button>`).join("")}
         </div>
       </div>
+      <div class="slm-momentumhelp" data-ref="momentumhelp" ${this.heatEnabled ? "" : "hidden"}>
+        <div class="slm-momentumscale"><span>Warm</span><span class="slm-momentumgradient"></span><span>Hot</span></div>
+        <p class="slm-momentumcopy" data-ref="momentumcopy"></p>
+      </div>
       <div class="slm-sectionlist" data-ref="sections"></div>
       <p class="slm-eyebrow">Activity</p>
       <div class="slm-feed" data-ref="feed"></div>
@@ -3241,6 +3263,7 @@ var SeatManager = class {
     this.recomputeTallies();
     this.paintMonitorInsights();
     this.paintTrendWindow();
+    this.paintMomentumHelp();
     this.paintFeed();
   }
   paintMonitorInsights() {
@@ -3277,6 +3300,7 @@ var SeatManager = class {
       </div>`;
     }).join("") : '<div class="slm-empty">No section metrics are available for this chart.</div>';
     this.paintTrendWindow();
+    this.paintMomentumHelp();
   }
   applyHeatOverlay() {
     const snapshot = this.controlRoomSnapshot;