@seatlayer/js 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -454,6 +454,8 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-body{flex-direction:column}
 .sl-picker[data-layout="narrow"] .sl-map{min-height:0;flex:1}
 .sl-picker[data-layout="narrow"] .sl-side{width:100%;max-height:46%;border-left:0;border-top:1px solid var(--sl-line)}
+.sl-picker[data-layout="narrow"] .sl-tray{flex:none}
+.sl-picker[data-layout="narrow"] .sl-foot{position:sticky;bottom:0;background:var(--sl-bg)}
 
 /* price panel */
 .sl-sec{padding:14px 16px 4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
@@ -518,6 +520,39 @@ var CSS = `
 .sl-boot-retry{margin-top:4px;padding:9px 20px;border-radius:var(--sl-r-sm);background:var(--sl-accent);
   color:var(--sl-accent-ink);font-weight:700;font-size:13px}
 
+/* a11y filter chips (over the map, top-left) */
+.sl-chips{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}
+.sl-chip-f{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;
+  background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-muted);transition:color .15s,border-color .15s}
+.sl-chip-f:hover{color:var(--sl-text)}
+.sl-chip-f.on{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
+
+/* confirm popover */
+.sl-confirm{position:absolute;z-index:9;min-width:190px;background:var(--sl-surface);border:1px solid var(--sl-line);
+  border-radius:12px;padding:12px;box-shadow:0 18px 50px -18px rgba(0,0,0,.7);transform:translate(-50%,calc(-100% - 14px))}
+.sl-confirm-label{font-weight:800;font-size:14px}
+.sl-confirm-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sl-muted);margin-top:4px}
+.sl-confirm-meta b{color:var(--sl-text);margin-left:auto}
+.sl-confirm-row{display:flex;gap:8px;margin-top:10px}
+.sl-confirm-row button{flex:1;padding:8px;border-radius:8px;font-weight:700;font-size:12.5px}
+.sl-confirm-add{background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-confirm-cancel{border:1px solid var(--sl-line);color:var(--sl-muted)}
+.sl-confirm-cancel:hover{color:var(--sl-text)}
+
+/* best-available row */
+.sl-ba{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm)}
+.sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:7px;
+  font:inherit;font-size:12px;padding:5px 6px;max-width:110px}
+.sl-ba-qty{display:flex;align-items:center;gap:7px}
+.sl-ba-qty button{width:24px;height:24px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
+  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
+.sl-ba-qty span{min-width:14px;text-align:center;font-weight:800}
+.sl-ba-go{margin-left:auto;padding:7px 12px;border-radius:999px;border:1px solid var(--sl-line);font-weight:700;font-size:12px;transition:border-color .15s}
+.sl-ba-go:hover{border-color:var(--sl-muted)}
+
+/* screen-reader live region */
+.sl-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
 /* modal host */
 .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)}
@@ -562,6 +597,12 @@ var SeatPicker = class _SeatPicker {
     this.gaQty = /* @__PURE__ */ new Map();
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
+    this.confirmEl = null;
+    this.confirmSeat = null;
+    this.srEl = null;
+    this.a11yFilter = "all";
+    this.baQty = 2;
+    this.baCat = "";
     // modal plumbing (set by open())
     this.modalScrim = null;
     this.prevFocus = null;
@@ -591,6 +632,12 @@ var SeatPicker = class _SeatPicker {
         this.syncTray();
         this.opts.onHoldExpired?.();
       },
+      confirmSelection: options.confirmSelection,
+      onSelect: (seat) => {
+        if (this.opts.confirmSelection) this.showConfirm(seat);
+      },
+      onViewChange: () => this.reanchorConfirm(),
+      onFocusSeat: (seat) => this.announceSeat(seat),
       onSeatHover: (d) => this.updateTooltip(d),
       onHint: (m) => {
         if (m) this.toast(m);
@@ -724,10 +771,92 @@ var SeatPicker = class _SeatPicker {
     this.els.name.textContent = info.eventName ?? "";
     const when = info.startsAt ? new Date(info.startsAt).toLocaleString(this.opts.locale, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "";
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
+    const present = /* @__PURE__ */ new Set();
+    if (this.controller.doc) {
+      for (const seat of (0, import_core2.expandChart)(this.controller.doc)) {
+        for (const type of seat.accessibility ?? []) present.add(type);
+        if (seat.accessible && !seat.accessibility?.length) present.add("wheelchair");
+      }
+    }
+    if (present.size) {
+      const chips = document.createElement("div");
+      chips.className = "sl-chips";
+      const GLYPH = { wheelchair: "\u267F", companion: "\u{1F9D1}\u200D\u{1F91D}\u200D\u{1F9D1}" };
+      const mk = (key, label) => `<button type="button" class="sl-chip-f${key === "all" ? " on" : ""}" data-f="${key}">${label}</button>`;
+      chips.innerHTML = mk("all", "All seats") + [...present].map((type) => mk(type, `${GLYPH[type] ? GLYPH[type] + " " : ""}${type[0].toUpperCase()}${type.slice(1).replace(/-/g, " ")}`)).join("");
+      this.els.map.appendChild(chips);
+      chips.querySelectorAll("button").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          const f = btn.dataset.f;
+          this.a11yFilter = f;
+          chips.querySelectorAll("button").forEach((b) => b.classList.toggle("on", b === btn));
+          this.controller.setAccessibilityFilter(f === "all" ? null : [f]);
+        });
+      });
+    }
+    const cb = document.createElement("button");
+    cb.type = "button";
+    cb.setAttribute("aria-label", "Toggle colorblind-friendly colors");
+    cb.setAttribute("aria-pressed", String(!!this.opts.colorblindSafe));
+    cb.innerHTML = '<svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>';
+    this.els.zfit.parentElement.appendChild(cb);
+    let cbOn = !!this.opts.colorblindSafe;
+    cb.addEventListener("click", () => {
+      cbOn = !cbOn;
+      cb.setAttribute("aria-pressed", String(cbOn));
+      this.controller.setColorblindSafe(cbOn);
+    });
+    this.srEl = document.createElement("div");
+    this.srEl.className = "sl-sr";
+    this.srEl.setAttribute("aria-live", "polite");
+    root.appendChild(this.srEl);
     this.syncPrices();
     this.syncTray();
     return this;
   }
+  /** aria-live readout when keyboard focus lands on a seat. */
+  announceSeat(seat) {
+    if (!this.srEl) return;
+    if (!seat) {
+      this.srEl.textContent = "";
+      return;
+    }
+    const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
+    const status = this.controller.getStatus(seat.id) ?? "free";
+    const statusText = status === "free" ? "available" : status === "held" ? "on hold" : "taken";
+    const price = cat?.tiers?.length ? cat.tiers[0].price : cat?.price;
+    this.srEl.textContent = `Seat ${seat.label}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
+  }
+  // ---- confirm popover (opt-in confirmSelection mode) ------------------------
+  showConfirm(seat) {
+    this.closeConfirm();
+    if (this.tipEl) this.tipEl.style.display = "none";
+    const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
+    const price = cat?.tiers?.length ? cat.tiers[0].price : cat?.price;
+    const el = document.createElement("div");
+    el.className = "sl-confirm";
+    el.innerHTML = `<div class="sl-confirm-label">${seat.label}</div><div class="sl-confirm-meta"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span>${cat?.label ?? seat.categoryKey}${price != null ? `<b>${this.money(price)}</b>` : ""}</div><div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add">Add seat</button></div>`;
+    this.els.map.appendChild(el);
+    this.confirmEl = el;
+    this.confirmSeat = seat;
+    this.reanchorConfirm();
+    el.querySelector(".sl-confirm-add").addEventListener("click", () => this.closeConfirm());
+    el.querySelector(".sl-confirm-cancel").addEventListener("click", () => {
+      this.controller.deselect([seat.id]);
+      this.closeConfirm();
+    });
+  }
+  reanchorConfirm() {
+    if (!this.confirmEl || !this.confirmSeat) return;
+    const p = this.controller.worldToScreen({ x: this.confirmSeat.x, y: this.confirmSeat.y });
+    this.confirmEl.style.left = `${p.x}px`;
+    this.confirmEl.style.top = `${p.y}px`;
+  }
+  closeConfirm() {
+    this.confirmEl?.remove();
+    this.confirmEl = null;
+    this.confirmSeat = null;
+  }
   // ---- chrome sync ----------------------------------------------------------
   money(n) {
     try {
@@ -742,8 +871,12 @@ var SeatPicker = class _SeatPicker {
     const left = this.controller.categoryAvailability();
     this.els.prices.innerHTML = doc.categories.map((c) => {
       const price = c.tiers?.length ? c.tiers[0].price : c.price;
-      return `<div class="sl-price-row"><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>`;
+      return `<div class="sl-price-row" 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("");
+    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));
+    });
   }
   /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
   evictTakenSelections() {
@@ -757,13 +890,21 @@ var SeatPicker = class _SeatPicker {
     if (!this.els.tray) return;
     const seats = this.controller.getSelection();
     const gaAreas = this.controller.getGAAreas();
+    const heldItems = this.hold?.items ?? [];
     const parts = [];
-    if (!seats.length && !gaAreas.length) {
+    if (!seats.length && !heldItems.length && !gaAreas.length) {
       parts.push(`<div class="sl-tray-hint">Tap a seat on the map, or let us pick the best available for you.</div>`);
-    } else if (!seats.length) {
+    } 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>`);
     }
-    for (const s of seats) {
+    for (const item of heldItems) {
+      const cat = this.controller.doc?.categories.find((c) => c.key === item.categoryKey);
+      parts.push(
+        `<div class="sl-chip"><b>${item.label}</b><span class="cat">${cat?.label ?? item.categoryKey}</span><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span></div>`
+      );
+    }
+    const heldLabels = new Set(heldItems.map((item) => item.label));
+    for (const s of seats.filter((seat) => !heldLabels.has(seat.label))) {
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
       parts.push(
         `<div class="sl-chip" data-seat="${s.id}"><b>${s.label}</b><span class="cat">${cat?.label ?? s.categoryKey}</span><span class="amt">${this.money(s.price)}</span><button type="button" class="rm" aria-label="Remove ${s.label}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div>`
@@ -775,7 +916,25 @@ var SeatPicker = class _SeatPicker {
         `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.label}</div><div class="sl-ga-sub">${this.money(area.price)} \xB7 ${area.available} left</div></div><div class="sl-ga-qty"><button type="button" data-d="-1" aria-label="Fewer">\u2212</button><span>${qty}</span><button type="button" data-d="1" aria-label="More">+</button></div></div>`
       );
     }
+    if (!this.hold) {
+      const cats = this.controller.doc?.categories ?? [];
+      parts.push(
+        `<div class="sl-ba">` + (cats.length > 1 ? `<select aria-label="Category" data-ba-cat><option value="">Any tier</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : "") + `<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">Best available</button></div>`
+      );
+    }
     this.els.tray.innerHTML = parts.join("");
+    this.els.tray.querySelectorAll("[data-ba]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        this.baQty = Math.max(1, Math.min(8, this.baQty + Number(btn.dataset.ba)));
+        this.syncTray();
+      });
+    });
+    this.els.tray.querySelector("[data-ba-cat]")?.addEventListener("change", (e) => {
+      this.baCat = e.target.value;
+    });
+    this.els.tray.querySelector(".sl-ba-go")?.addEventListener("click", () => {
+      void this.bestAvailable(this.baQty, this.baCat || void 0);
+    });
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
       btn.addEventListener("click", () => {
         const id = btn.closest(".sl-chip").dataset.seat;
@@ -794,17 +953,24 @@ var SeatPicker = class _SeatPicker {
     });
     const gaTotal = gaAreas.reduce((sum, a) => sum + a.price * (this.gaQty.get(a.id) ?? 0), 0);
     const gaCount = [...this.gaQty.values()].reduce((a, b) => a + b, 0);
-    const total = seats.reduce((sum, s) => sum + s.price, 0) + gaTotal;
-    const count = seats.length + gaCount;
+    const heldTotal = heldItems.reduce((sum, item) => sum + item.unitPrice * (item.quantity ?? 1), 0);
+    const heldCount = heldItems.reduce((sum, item) => sum + (item.quantity ?? 1), 0);
+    const freshSeats = seats.filter((seat) => !heldLabels.has(seat.label));
+    const total = freshSeats.reduce((sum, s) => sum + s.price, 0) + gaTotal + heldTotal;
+    const count = freshSeats.length + gaCount + heldCount;
     this.els.count.textContent = count ? `${count} ${count === 1 ? "ticket" : "tickets"}` : "No seats selected";
     this.els.total.textContent = count ? this.money(total) : "";
     const cta = this.els.cta;
     cta.disabled = count === 0;
-    cta.textContent = count ? "Hold seats & checkout" : "Select seats";
+    cta.textContent = this.hold ? "Continue to checkout" : count ? "Hold seats & checkout" : "Select seats";
     this.opts.onSelectionChange?.(seats);
   }
   async handleCta() {
     const cta = this.els.cta;
+    if (this.hold && !this.controller.getSelection().some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
+      this.opts.onCheckout?.(this.hold, this.controller.getSelection());
+      return;
+    }
     cta.disabled = true;
     cta.textContent = "Holding\u2026";
     try {
@@ -912,6 +1078,7 @@ var SeatPicker = class _SeatPicker {
   }
   destroy() {
     this.destroyed = true;
+    this.closeConfirm();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.ro?.disconnect();