@seatlayer/js 0.47.0 → 0.47.1

package/dist/index.cjs

@@ -4865,7 +4865,6 @@ var SeatingChart = class {
     this.mount = null;
     this.hostEl = null;
     this.rendered = false;
-    this.retryBtn = null;
     this.mode_ = null;
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
@@ -5240,14 +5239,12 @@ var SeatingChart = class {
       void this.render().catch((err) => this.opts.onError?.(err));
     });
     box.appendChild(btn);
-    this.retryBtn = btn;
     host.appendChild(box);
   }
   destroy() {
     this.realtime?.stop();
     this.realtime = null;
     this.access?.clear();
-    this.retryBtn = null;
     if (this.hostEl && this.onTipMove) this.hostEl.removeEventListener("mousemove", this.onTipMove);
     this.tipEl = null;
     this.onTipMove = null;
@@ -6570,7 +6567,21 @@ var CSS2 = (
 /* Venue navigation inside 3D: levels (isolate a floor) and areas (fly to a zone).
    Bottom-LEFT, clear of the module's own chips (Overview bottom-right, 360
    bottom-centre) and of the bottom-sheeted confirm card. Horizontally scrollable
-   so a venue with many zones never pushes the rail off a phone screen. */
+   so a venue with many zones never pushes the rail off a phone screen.
+
+   EVERY WIDTH HERE IS RELATIVE TO THE RAIL, NEVER TO THE WINDOW. These three
+   rules used to size off 100vw, which contradicts the one contract this widget
+   states about itself: it adapts to a full-screen takeover, an inline div in a
+   content page, or a popup, and its breakpoints key off the CONTAINER, never the
+   viewport. A 390 px picker embedded in a 1400 px page asked for
+   calc(100vw - 180px) = 1220 inside a 390 px rail.
+
+   MEASURED, IT DID NOT OVERFLOW: the scroll parent is a flex container, so the
+   over-large declaration was shrunk back to the rail and both the old and new
+   rules resolve to 364 px in situ. So this is a latent correctness fix, not a
+   visible bug -- the numbers were wrong and were being covered for by a
+   flex-shrink one level up. Left as 100% because the next person to change that
+   parent's display should not inherit a rule that only works by accident. */
 .sl-view3d-nav{position:absolute;left:12px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:6px;
   max-width:calc(100% - 150px);pointer-events:none}
 .sl-view3d-nav > div{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;
@@ -6582,15 +6593,15 @@ var CSS2 = (
 .sl-view3d-nav button:hover,.sl-view3d-nav button:focus-visible{color:#eef1f8;border-color:rgba(190,205,240,.6)}
 .sl-view3d-nav button[aria-pressed="true"]{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
 .sl-view3d-nav button:disabled{opacity:.45;cursor:not-allowed}
-.sl-view3d-nav select{min-height:38px;max-width:min(280px,calc(100vw - 40px));padding:7px 34px 7px 12px;
+.sl-view3d-nav select{min-height:38px;max-width:100%;padding:7px 34px 7px 12px;
   border-radius:999px;font:700 11.5px/1 inherit;color:#eef1f8;background:rgba(12,18,32,.86);
   border:1px solid rgba(150,165,205,.45);backdrop-filter:blur(6px);cursor:pointer}
 .sl-view3d-nav select:focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}
 .sl-view3d-nav .sl-view3d-locator{display:grid;grid-template-columns:minmax(150px,1.25fr) minmax(110px,.8fr) minmax(105px,.7fr) auto;
-  width:min(720px,calc(100vw - 180px));overflow:visible}
+  width:min(720px,100%);overflow:visible}
 .sl-view3d-nav.is-seat-focused .sl-view3d-locator{display:none}
 .sl-view3d-locator select{width:100%;min-width:0}
-.sl-picker[data-layout="narrow"] .sl-view3d-nav .sl-view3d-locator{display:flex;width:calc(100vw - 24px);overflow-x:auto}
+.sl-picker[data-layout="narrow"] .sl-view3d-nav .sl-view3d-locator{display:flex;width:100%;overflow-x:auto}
 .sl-picker[data-layout="narrow"] .sl-view3d-locator select{flex:0 0 155px}
 /* On phones the library owns the bottom edge for seat/panorama/overview actions.
    Keep venue navigation in a separate top rail so those control families never
@@ -7476,10 +7487,21 @@ var SeatPicker = class _SeatPicker {
         e.stopPropagation();
         setSheet(root.dataset.sheet !== "open");
       });
+      this.els.peek?.addEventListener("click", (e) => {
+        const go = e.target.closest(".sl-sheet-go");
+        if (!go) return;
+        e.stopPropagation();
+        if (go.dataset.act === "checkout") void this.handleCta();
+        else setSheet(true);
+      });
       let startY = 0;
       let swiped = false;
       let tracking = false;
       head.addEventListener("pointerdown", (e) => {
+        if (e.target.closest?.(".sl-seccard,.sl-sheet-toggle,.sl-sheet-go")) {
+          tracking = false;
+          return;
+        }
         tracking = true;
         swiped = false;
         startY = e.clientY;
@@ -7498,7 +7520,7 @@ var SeatPicker = class _SeatPicker {
       });
       head.addEventListener("pointerup", (e) => {
         if (tracking && !swiped && Math.abs(e.clientY - startY) < 6) {
-          if (!e.target.closest(".sl-seccard,.sl-sheet-toggle")) setSheet(root.dataset.sheet !== "open");
+          setSheet(root.dataset.sheet !== "open");
         }
         tracking = false;
         head.releasePointerCapture?.(e.pointerId);
@@ -7692,12 +7714,11 @@ var SeatPicker = class _SeatPicker {
     const narrow = this.root?.dataset.layout === "narrow";
     const filters = this.els.filters;
     if (filters) {
+      if (this.cbEl) this.els.zoom?.appendChild(this.cbEl);
       if (narrow) {
         if (this.a11yChipsEl) filters.appendChild(this.a11yChipsEl);
-        if (this.cbEl) filters.appendChild(this.cbEl);
       } else {
         if (this.a11yChipsEl) this.regions["top-left"]?.appendChild(this.a11yChipsEl);
-        if (this.cbEl) this.els.zoom?.appendChild(this.cbEl);
       }
       const has = narrow && filters.children.length > 0;
       filters.classList.toggle("has", has);
@@ -9228,10 +9249,11 @@ var SeatPicker = class _SeatPicker {
     if (previousCount === 0 && count > 0) this.animateOnce(this.els.cta, "sl-ready", 520);
     if (this.els.peek) {
       if (count) {
-        this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><span class="go">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</span>`;
+        const holding = !!this.hold && !pendingCount;
+        this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><button type="button" class="go sl-sheet-go" data-act="${holding ? "checkout" : "open"}">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</button>`;
       } else {
         const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
-        this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<span class="go">\u2726 Best seats</span>`;
+        this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<button type="button" class="go sl-sheet-go" data-act="open">\u2726 Best seats</button>`;
       }
     }
     this.lastTrayCount = count;