@seatlayer/js 0.20.0 → 0.21.1

package/dist/index.d.cts

@@ -325,7 +325,7 @@ declare class EmbeddedDesigner {
  * SeatPicker — the full buyer experience as a widget.
  *
  * Where `SeatingChart` is canvas-only, SeatPicker owns the complete chrome
- * from the canonical UX (SeatmapUX/11 Buyer Picker.dc.html): branded header,
+ * from the canonical UX contract: branded header,
  * live price panel, selection tray with GA steppers, hold countdown, snipe
  * toasts and expiry recovery — all on top of the shared PickerController, so
  * every host gets the whole experience with one mount.
@@ -565,6 +565,8 @@ declare class SeatPicker {
     private miniBase;
     private miniTf;
     private priceBandKeys;
+    private focusedCatKey;
+    private pricesExpanded;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     private lastSection;
     /** Section card collapsed to its slim pill (seat-picking has begun). */
@@ -808,6 +810,10 @@ declare class SeatPicker {
      */
     private paidPrice;
     private syncPrices;
+    /** Tap a price row → filter + frame that category on the map; tap again to
+     *  clear. Shares `priceBandKeys` with the band selector so the row-dim state
+     *  has one source of truth (and each control resets the other). */
+    private focusCategory;
     /**
      * Live-activity strip: turn WS availability deltas into one quiet line of
      * social proof ("2 seats just taken in VIP · 118 left"). Diffs per-category
@@ -816,6 +822,9 @@ declare class SeatPicker {
      */
     private narrateAvailability;
     private lastCatAvail;
+    private lastAvailFloorId;
+    private availQuietUntil;
+    private liveTimer;
     /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
     private evictTakenSelections;
     private syncTray;

package/dist/index.d.ts

@@ -325,7 +325,7 @@ declare class EmbeddedDesigner {
  * SeatPicker — the full buyer experience as a widget.
  *
  * Where `SeatingChart` is canvas-only, SeatPicker owns the complete chrome
- * from the canonical UX (SeatmapUX/11 Buyer Picker.dc.html): branded header,
+ * from the canonical UX contract: branded header,
  * live price panel, selection tray with GA steppers, hold countdown, snipe
  * toasts and expiry recovery — all on top of the shared PickerController, so
  * every host gets the whole experience with one mount.
@@ -565,6 +565,8 @@ declare class SeatPicker {
     private miniBase;
     private miniTf;
     private priceBandKeys;
+    private focusedCatKey;
+    private pricesExpanded;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     private lastSection;
     /** Section card collapsed to its slim pill (seat-picking has begun). */
@@ -808,6 +810,10 @@ declare class SeatPicker {
      */
     private paidPrice;
     private syncPrices;
+    /** Tap a price row → filter + frame that category on the map; tap again to
+     *  clear. Shares `priceBandKeys` with the band selector so the row-dim state
+     *  has one source of truth (and each control resets the other). */
+    private focusCategory;
     /**
      * Live-activity strip: turn WS availability deltas into one quiet line of
      * social proof ("2 seats just taken in VIP · 118 left"). Diffs per-category
@@ -816,6 +822,9 @@ declare class SeatPicker {
      */
     private narrateAvailability;
     private lastCatAvail;
+    private lastAvailFloorId;
+    private availQuietUntil;
+    private liveTimer;
     /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
     private evictTakenSelections;
     private syncTray;

package/dist/index.js

@@ -885,20 +885,30 @@ var CSS = `
 .sl-prices-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
 .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{display:flex;flex-direction:column;padding:4px 14px 8px;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-price-row{display:flex;align-items:center;gap:7px;min-height:28px;font-size:12px;
+  padding:0 6px;margin:0 -6px;border-radius:8px;cursor:pointer;transition:background .15s}
+.sl-price-row:hover,.sl-price-row:focus-visible{background:color-mix(in srgb,var(--sl-line) 40%,transparent)}
+.sl-price-row.sl-active{background:color-mix(in srgb,var(--sl-accent) 9%,transparent)}
+.sl-price-row.sl-active .sl-price-label{color:var(--sl-accent)}
 .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}
 .sl-price-left{font-size:11px;color:var(--sl-muted);font-variant-numeric:tabular-nums}
 .sl-price-amt{font-weight:800;font-variant-numeric:tabular-nums}
-.sl-status-key{display:flex;gap:13px;flex-wrap:wrap;padding:8px 0 2px;margin-top:5px;border-top:1px solid var(--sl-line);color:var(--sl-muted);font-size:10.5px}
-.sl-status-item{display:inline-flex;align-items:center;gap:6px}
-.sl-status-icon{width:17px;height:17px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
+/* long category lists: capped by default, scroll once expanded */
+.sl-prices.sl-expanded{max-height:196px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
+.sl-price-more{display:flex;align-items:center;min-height:26px;padding:0;
+  color:var(--sl-muted);font-size:11px;font-weight:750;transition:color .15s}
+.sl-price-more:hover,.sl-price-more:focus-visible{color:var(--sl-text)}
+/* held/sold key \u2014 one quiet caption line; the map itself teaches these states */
+.sl-status-key{display:flex;gap:11px;flex-wrap:wrap;padding:5px 0 0;margin-top:4px;border-top:1px solid var(--sl-line);color:var(--sl-muted);font-size:10px}
+.sl-status-item{display:inline-flex;align-items:center;gap:5px}
+.sl-status-icon{width:13px;height:13px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
   color:#fff;background:#6b7280;line-height:1}
-.sl-status-icon svg{width:10px;height:10px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-status-icon svg{width:8px;height:8px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 .sl-status-icon.sold{background:#8b93a0}
-.sl-status-icon.sold svg{width:11px;height:11px;stroke-width:2.4}
+.sl-status-icon.sold svg{width:9px;height:9px;stroke-width:2.4}
 
 /* tray */
 .sl-seats-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
@@ -937,12 +947,15 @@ var CSS = `
 .sl-chip .view:hover,.sl-chip .view:focus-visible{color:var(--sl-text);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
 .sl-chip .rm svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
 .sl-chip .view svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.8;fill:none}
-/* live-activity strip \u2014 narrates WS availability deltas (social proof + urgency) */
-.sl-live{display:flex;align-items:center;gap:7px;margin:10px 14px 0;padding:7px 9px;flex:none;
+/* live-activity strip \u2014 narrates WS availability deltas (social proof + urgency).
+   Hidden until a delta actually happens: a static "seats update in real time"
+   banner is dead vertical space, a "2 seats just taken" flash is a signal. */
+.sl-live{display:none;align-items:center;gap:7px;margin:10px 14px 0;padding:7px 9px;flex:none;
   border:1px solid var(--sl-line);border-radius:8px;background:color-mix(in srgb,var(--sl-accent) 4%,var(--sl-surface));
   font-size:11px;color:var(--sl-muted)}
 .sl-live .dot{width:6px;height:6px;border-radius:999px;background:#22a06b;box-shadow:0 0 6px rgba(34,160,107,.75);flex:none}
 .sl-live span:last-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-live.on{display:flex;animation:slNoticeIn .38s cubic-bezier(.2,.8,.2,1) both}
 
 /* GA rows */
 .sl-ga{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px dashed var(--sl-line);border-radius:var(--sl-r-sm)}
@@ -1128,13 +1141,18 @@ var CSS = `
   border-radius:15px;box-shadow:0 24px 64px -18px rgba(0,0,0,.72);transform:translate(-50%,calc(-100% - 16px));
   animation:slConfirmIn .24s cubic-bezier(.2,.8,.2,1) both}
 .sl-confirm[data-placement="below"]{transform:translate(-50%,16px);animation:slConfirmBelowIn .24s cubic-bezier(.2,.8,.2,1) both}
-.sl-confirm-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;border-bottom:1px solid var(--sl-line)}
+.sl-confirm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(52px,auto) minmax(52px,auto);border-bottom:1px solid var(--sl-line)}
 .sl-confirm-field{min-width:0;padding:12px 11px 10px;border-right:1px solid var(--sl-line)}
 .sl-confirm-field:last-child{border-right:0;text-align:center}
 .sl-confirm-field:nth-child(2){text-align:center}
 .sl-confirm-key{display:block;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
 .sl-confirm-value{display:block;margin-top:4px;color:var(--sl-text);font-size:17px;line-height:1.1;font-weight:850;
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* Long venue section names must read in full: smaller type + up to two lines
+   beats an ellipsis at identity-confirmation time. Row/seat stay big \u2014 they're
+   short and they're what the buyer double-checks against the map. */
+.sl-confirm-field:first-child .sl-confirm-value{font-size:13.5px;line-height:1.25;white-space:normal;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .sl-confirm-cat{display:flex;align-items:center;gap:8px;padding:10px 12px;background:color-mix(in srgb,var(--sl-cat) 76%,var(--sl-surface))}
 .sl-confirm-cat .sl-dot{border:2px solid rgba(255,255,255,.78);width:11px;height:11px}
 .sl-confirm-cat-name{font-size:13.5px;font-weight:800;color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@@ -1428,6 +1446,8 @@ var SeatPicker = class _SeatPicker {
     this.miniTf = null;
     // F4 price-band filter — active band's category keys (null = all prices)
     this.priceBandKeys = null;
+    this.focusedCatKey = null;
+    this.pricesExpanded = false;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     this.lastSection = null;
     /** Section card collapsed to its slim pill (seat-picking has begun). */
@@ -1462,6 +1482,9 @@ var SeatPicker = class _SeatPicker {
     /** Set by open(): closes the modal (scroll restore + destroy + onClose). */
     this.closeModal = null;
     this.lastCatAvail = null;
+    this.lastAvailFloorId = "";
+    this.availQuietUntil = 0;
+    this.liveTimer = null;
     if (!options || typeof options !== "object") throw new Error("seatmap: options object is required");
     if (!options.event || typeof options.event !== "string") throw new Error("seatmap: `event` key is required");
     if (!options.container) throw new Error("seatmap: `container` is required (or use SeatPicker.open())");
@@ -1554,7 +1577,7 @@ var SeatPicker = class _SeatPicker {
         return "";
       }
     }
-    const sight = distance != null ? `${distance}${this.tf("picker.sightline", "m to stage \xB7 clear sightline")}` : this.tf("picker.sightlineClear", "Clear sightline");
+    const sight = distance != null ? t2("picker.sightline", { m: distance }) : this.tf("picker.sightlineClear", "Clear sightline");
     return `<button type="button" class="sl-confirm-view sl-confirm-thumbwrap" aria-label="${t2("picker.viewFromSeat", { label: seat.label })}"><img class="sl-confirm-thumb" src="${url}" alt="" /><span class="sl-confirm-thumb-badge">\u{1F52D} ${this.tf("picker.viewFromHere", "View from here")}</span></button><div class="sl-confirm-sight"><span aria-hidden="true">\u2713</span>${sight}</div>`;
   }
   /** True when the picker is rendered inside an iframe (snippet embed at /e/:key). */
@@ -2550,9 +2573,13 @@ var SeatPicker = class _SeatPicker {
     select.addEventListener("change", () => {
       const band = bands.find((candidate) => candidate.id === select.value);
       const keys = band?.keys ?? null;
+      this.focusedCatKey = null;
       this.priceBandKeys = keys ? new Set(keys) : null;
       this.controller.setCategoryFilter(keys);
       this.controller.focusCategoryFilter(keys);
+      this.syncFloors();
+      this.syncRung();
+      this.refreshMinimap();
       this.syncPrices();
       if (this.lastSection) this.showSectionCard(this.lastSection);
     });
@@ -2661,6 +2688,7 @@ var SeatPicker = class _SeatPicker {
     if (narrow) {
       card.className = "sl-seccard strip on";
       card.setAttribute("role", "status");
+      card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
       card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn;
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       (this.els.sheetHead ?? this.els.side ?? this.els.map).appendChild(card);
@@ -2971,16 +2999,52 @@ var SeatPicker = class _SeatPicker {
     const left = this.controller.categoryAvailability();
     this.narrateAvailability(doc.categories, left);
     this.syncSoldout(doc.categories, left);
-    this.els.prices.innerHTML = doc.categories.map((c) => {
+    const PRICE_LIMIT = 5;
+    const overflow = doc.categories.length - PRICE_LIMIT;
+    const collapsed = overflow > 1 && !this.pricesExpanded;
+    const shown = collapsed ? doc.categories.slice(0, PRICE_LIMIT) : doc.categories;
+    this.els.prices.classList.toggle("sl-expanded", overflow > 1 && this.pricesExpanded);
+    this.els.prices.innerHTML = shown.map((c) => {
       const price = this.catPrice(c);
+      const active = this.focusedCatKey === c.key;
       const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-      return `<div class="sl-price-row${dim ? " sl-dim" : ""}" data-cat="${c.key}"><span class="sl-dot" style="background:${c.color}"></span><span class="sl-price-label">${c.label}</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
-    }).join("") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>Temporarily held</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>Sold</span></div>`;
+      return `<div class="sl-price-row${dim ? " sl-dim" : ""}${active ? " sl-active" : ""}" data-cat="${c.key}" role="button" tabindex="0" aria-pressed="${active}" title="${active ? "Show all seats" : `Show ${c.label} seats on the map`}"><span class="sl-dot" style="background:${c.color}"></span><span class="sl-price-label">${c.label}</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
+    }).join("") + (overflow > 1 ? `<button type="button" class="sl-price-more" aria-expanded="${!collapsed}">` + (collapsed ? `Show all ${doc.categories.length} ticket types` : "Show fewer") + `</button>` : "") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>Temporarily held</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>Sold</span></div>`;
     this.els.prices.querySelectorAll(".sl-price-row").forEach((row) => {
       row.addEventListener("mouseenter", () => this.controller.getRenderer()?.setCategoryHighlight?.(row.dataset.cat ?? null));
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
+      const toggle = () => this.focusCategory(row.dataset.cat ?? "");
+      row.addEventListener("click", toggle);
+      row.addEventListener("keydown", (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggle();
+        }
+      });
+    });
+    this.els.prices.querySelector(".sl-price-more")?.addEventListener("click", () => {
+      this.pricesExpanded = !this.pricesExpanded;
+      this.syncPrices();
     });
   }
+  /** Tap a price row → filter + frame that category on the map; tap again to
+   *  clear. Shares `priceBandKeys` with the band selector so the row-dim state
+   *  has one source of truth (and each control resets the other). */
+  focusCategory(key) {
+    if (!key) return;
+    const next = this.focusedCatKey === key ? null : key;
+    this.focusedCatKey = next;
+    this.priceBandKeys = next ? /* @__PURE__ */ new Set([next]) : null;
+    const select = this.els.pricesSec?.querySelector(".sl-price-select");
+    if (select) select.value = "all";
+    this.controller.setCategoryFilter(next ? [next] : null);
+    this.controller.focusCategoryFilter(next ? [next] : null);
+    this.syncFloors();
+    this.syncRung();
+    this.refreshMinimap();
+    this.syncPrices();
+    if (this.lastSection) this.showSectionCard(this.lastSection);
+  }
   /**
    * Live-activity strip: turn WS availability deltas into one quiet line of
    * social proof ("2 seats just taken in VIP · 118 left"). Diffs per-category
@@ -2991,13 +3055,23 @@ var SeatPicker = class _SeatPicker {
     const textEl = this.els.liveText;
     const prev = this.lastCatAvail;
     this.lastCatAvail = { ...left };
-    if (!textEl || !prev) return;
+    const floorId = this.controller.getActiveFloorId();
+    if (floorId !== this.lastAvailFloorId) {
+      this.lastAvailFloorId = floorId;
+      this.availQuietUntil = performance.now() + 2e3;
+    }
+    if (!textEl || !prev || performance.now() < this.availQuietUntil) return;
     for (const cat of categories) {
       const before = prev[cat.key];
       const now = left[cat.key] ?? 0;
       if (before === void 0 || now >= before) continue;
       const taken = before - now;
       textEl.textContent = `${taken} seat${taken === 1 ? "" : "s"} just taken in ${cat.label} \xB7 ${now} left`;
+      this.els.live?.classList.remove("on");
+      void this.els.live?.offsetWidth;
+      this.els.live?.classList.add("on");
+      if (this.liveTimer) clearTimeout(this.liveTimer);
+      this.liveTimer = setTimeout(() => this.els.live?.classList.remove("on"), 8e3);
       return;
     }
   }
@@ -3025,7 +3099,8 @@ var SeatPicker = class _SeatPicker {
     } else if (!seats.length && !heldItems.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
     }
-    if (!this.hold) {
+    const noPicks = !seats.length && !heldItems.length;
+    if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
       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>`);
     }
@@ -3589,6 +3664,7 @@ var SeatPicker = class _SeatPicker {
     this.closeSeatView();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
+    if (this.liveTimer) clearTimeout(this.liveTimer);
     for (const timer of this.motionTimers) clearTimeout(timer);
     this.motionTimers.clear();
     this.ro?.disconnect();