@seatlayer/js 0.30.1 → 0.31.0

package/README.md

@@ -208,6 +208,7 @@ The browser **holds**; your **server books** with a secret key. See
 - [Holds and checkout](https://docs.seatlayer.io/buyer-sdk/holds-and-checkout/)
 - [Complete checkout example](https://docs.seatlayer.io/examples/complete-checkout/)
 - [`@seatlayer/react`](https://www.npmjs.com/package/@seatlayer/react)
+- [React Native SDK](https://github.com/seatlayer/seatlayer-react-native)
 - [iOS SDK](https://github.com/seatlayer/seatlayer-ios)
 - [Flutter package](https://pub.dev/packages/seatlayer)
 - [Agent-readable documentation](https://docs.seatlayer.io/llms.txt)

package/dist/index.cjs

@@ -131,6 +131,9 @@ var PubApi = class {
   }
 };
 
+// src/seatLayerBrand.ts
+var SEATLAYER_ATTRIBUTION_MARK_SVG = '<svg viewBox="0 0 64 56" width="12" height="11" fill="none" aria-hidden="true" focusable="false" style="display:block"><path d="M4 13 Q16 6 29 7 L28.5 17 Q17 16.5 7 22 Z" fill="#f4b740"/><path d="M4 13 Q16 6 29 7 L28.5 17 Q17 16.5 7 22 Z" fill="#f4b740" transform="translate(64 0) scale(-1 1)"/><path d="M8 28 Q18 22 28.6 23 L28.2 32 Q18 28.5 10 36 Z" fill="#fcf7ee"/><path d="M8 28 Q18 22 28.6 23 L28.2 32 Q18 28.5 10 36 Z" fill="#fcf7ee" transform="translate(64 0) scale(-1 1)"/><path d="M11 41 Q19 35 28.2 36 L27.8 45 Q19.5 42 13.5 49 Z" fill="#fcf7ee"/><path d="M11 41 Q19 35 28.2 36 L27.8 45 Q19.5 42 13.5 49 Z" fill="#fcf7ee" transform="translate(64 0) scale(-1 1)"/></svg>';
+
 // src/SeatingChart.ts
 var DEFAULT_API_BASE = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION = 10;
@@ -246,7 +249,7 @@ var SeatingChart = class {
     badge.rel = "noopener noreferrer";
     badge.setAttribute("aria-label", (0, import_core.t)("picker.poweredBy"));
     badge.style.cssText = 'position:absolute;bottom:10px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#4a5163;text-decoration:none;font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.12);';
-    badge.innerHTML = `<span aria-hidden="true" style="width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;background:#f4b740;color:#1a1200"><svg viewBox="0 0 24 24" style="width:11px;height:11px;fill:currentColor"><path d="M4 15c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3h-3v-2H7v2H4v-3Z"/><rect x="7" y="7" width="10" height="5" rx="1.6"/></svg></span><span>${(0, import_core.t)("picker.poweredBy")}</span>`;
+    badge.innerHTML = '<span aria-hidden="true" style="width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;background:#0c1220;color:#fcf7ee">' + SEATLAYER_ATTRIBUTION_MARK_SVG + `</span><span>${(0, import_core.t)("picker.poweredBy")}</span>`;
     host.appendChild(badge);
   }
   placeTooltip() {
@@ -1107,6 +1110,8 @@ var import_meta = {};
 var DEFAULT_API_BASE2 = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION2 = 10;
 var EXTEND_PROMPT_MS = 6e4;
+var MAX_3D_SEATS_DEFAULT = 15e3;
+var MAX_3D_SECTION_PILLS = 12;
 function pointInPolygon(x, y, poly) {
   let inside = false;
   for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
@@ -1526,14 +1531,14 @@ var CSS = `
 .sl-closed-pill.on{display:inline-flex}
 .sl-closed-pill svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
-/* "Powered by SeatLayer" attribution badge (side-panel foot) \u2014 the small gold
-   rounded logo mark + wordmark. Hidden when the host opts out or the org's paid
+/* "Powered by SeatLayer" attribution badge (side-panel foot) \u2014 the canonical
+   Layered Rows mark + wordmark. Hidden when the host opts out or the org's paid
    theme sets hideBadge. */
 .sl-powered{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
   font-size:11px;letter-spacing:.03em;color:var(--sl-muted)}
 .sl-powered-mark{width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;
-  background:var(--sl-accent);color:var(--sl-accent-ink)}
-.sl-powered-mark svg{width:11px;height:11px;fill:currentColor}
+  background:#0c1220;color:#fcf7ee}
+.sl-powered-mark svg{width:12px;height:11px}
 
 /* a11y filter chips (flow within the top-left region) */
 .sl-chips{display:flex;gap:6px;flex-wrap:wrap}
@@ -1715,6 +1720,20 @@ var CSS = `
   color:#e6edf3;background:rgba(10,14,20,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
 .sl-view3d-back:hover,.sl-view3d-back:focus-visible{background:rgba(16,22,30,.82);border-color:rgba(255,255,255,.4)}
 .sl-view3d-back svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
+/* 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. */
+.sl-view3d-nav{position:absolute;left:12px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:6px;
+  max-width:calc(100% - 24px);pointer-events:none}
+.sl-view3d-nav > div{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;pointer-events:auto;
+  padding:1px;-webkit-overflow-scrolling:touch}
+.sl-view3d-nav > div::-webkit-scrollbar{display:none}
+.sl-view3d-nav button{flex:0 0 auto;min-height:32px;padding:7px 12px;border-radius:999px;white-space:nowrap;
+  font-size:11.5px;font-weight:700;color:#c9d4ea;background:rgba(12,18,32,.72);
+  border:1px solid rgba(150,165,205,.35);backdrop-filter:blur(6px);cursor:pointer}
+.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}
 /* While immersed, the 2D-only chrome is meaningless \u2014 hide it, keep Map|3D. */
 .sl-picker[data-view3d="on"] .sl-rungs,
 .sl-picker[data-view3d="on"] .sl-floors,
@@ -1988,6 +2007,8 @@ var SeatPicker = class _SeatPicker {
     // F4 price-band filter — active band's category keys (null = all prices)
     this.priceBandKeys = null;
     this.focusedCatKey = null;
+    /** "Hide limited-view seats" — mirrored into 3D by `seatState3dFor`. */
+    this.limitedViewFilter = false;
     this.pricesExpanded = false;
     /** Last surfaced section summary (re-rendered when the price band changes). */
     this.lastSection = null;
@@ -2656,12 +2677,13 @@ var SeatPicker = class _SeatPicker {
         limited.setAttribute("aria-pressed", "false");
         limited.innerHTML = `\u25D0 ${this.tf("picker.hideLimitedView", "Hide limited-view seats")}`;
         chips.appendChild(limited);
-        let limitedOn = false;
         limited.addEventListener("click", () => {
-          limitedOn = !limitedOn;
+          const limitedOn = !this.limitedViewFilter;
+          this.limitedViewFilter = limitedOn;
           limited.classList.toggle("on", limitedOn);
           limited.setAttribute("aria-pressed", String(limitedOn));
           this.controller.setCommercialLimitedFilter(limitedOn);
+          this.pushAvailabilityTo3d();
           if (limitedOn) focusSeatsForFilter();
         });
       }
@@ -2819,7 +2841,7 @@ var SeatPicker = class _SeatPicker {
     if (!foot) return;
     const el = document.createElement("div");
     el.className = "sl-powered";
-    el.innerHTML = `<span class="sl-powered-mark" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 15c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3h-3v-2H7v2H4v-3Z"/><rect x="7" y="7" width="10" height="5" rx="1.6"/></svg></span><span>${this.tf("picker.poweredBy", "Powered by SeatLayer")}</span>`;
+    el.innerHTML = `<span class="sl-powered-mark" aria-hidden="true">` + SEATLAYER_ATTRIBUTION_MARK_SVG + `</span><span>${this.tf("picker.poweredBy", "Powered by SeatLayer")}</span>`;
     foot.appendChild(el);
   }
   // ---- Feature 6: chrome anchor regions -------------------------------------
@@ -3250,6 +3272,7 @@ var SeatPicker = class _SeatPicker {
       this.priceBandKeys = keys ? new Set(keys) : null;
       this.controller.setCategoryFilter(keys);
       this.controller.focusCategoryFilter(keys);
+      this.pushAvailabilityTo3d();
       this.syncFloors();
       this.syncRung();
       this.refreshMinimap();
@@ -3347,10 +3370,23 @@ var SeatPicker = class _SeatPicker {
       button.setAttribute("aria-pressed", String(on));
     });
   }
-  /** Can this picker offer the 3D venue view? Requires the option (default on)
-   *  and WebGL2, and a chart to render. */
+  /** Can this picker offer the 3D venue view? Requires the option (default on),
+   *  WebGL2, a chart to render, and a chart small enough to render WELL. */
   canOffer3d() {
-    return this.opts.enable3D !== false && hasWebGL2() && !!this.controller.doc;
+    if (this.opts.enable3D === false || !this.controller.doc || !hasWebGL2()) return false;
+    return this.allSeats().length <= this.max3dSeats();
+  }
+  /**
+   * The seat ceiling for offering 3D. See `max3DSeats` — an explicit host value
+   * always wins; otherwise a small/low-core device gets half the desktop budget,
+   * because it is the device that turns "slow" into "stalled".
+   */
+  max3dSeats() {
+    const authored = this.opts.max3DSeats;
+    if (typeof authored === "number" && authored > 0) return authored;
+    const nav = globalThis.navigator;
+    const small = (nav?.hardwareConcurrency ?? 8) <= 4 || (nav?.deviceMemory ?? 8) <= 4 || (globalThis.matchMedia?.("(pointer: coarse)").matches ?? false);
+    return small ? MAX_3D_SEATS_DEFAULT / 2 : MAX_3D_SEATS_DEFAULT;
   }
   /** Reflect the active floor onto the switcher rail. */
   syncFloors() {
@@ -3903,6 +3939,7 @@ var SeatPicker = class _SeatPicker {
     if (select) select.value = "all";
     this.controller.setCategoryFilter(next ? [next] : null);
     this.controller.focusCategoryFilter(next ? [next] : null);
+    this.pushAvailabilityTo3d();
     this.syncFloors();
     this.syncRung();
     this.refreshMinimap();
@@ -4594,8 +4631,8 @@ var SeatPicker = class _SeatPicker {
     void this.enter3d(flyToSeatId);
   }
   /** SeatStatus → the view3d palette state. Selection is layered separately. */
-  seatState3dFor(id) {
-    switch (this.controller.getStatus(id)) {
+  seatState3dFor(seat) {
+    switch (this.controller.getStatus(seat.id)) {
       case "held":
         return "held";
       case "booked":
@@ -4603,14 +4640,19 @@ var SeatPicker = class _SeatPicker {
       case "not_for_sale":
         return "dimmed";
       default:
-        return "available";
+        break;
+    }
+    if (this.priceBandKeys != null && !this.priceBandKeys.has(seat.categoryKey)) return "dimmed";
+    if (this.limitedViewFilter && (seat.commercial?.restrictedView || seat.commercial?.obstructedView)) {
+      return "dimmed";
     }
+    return "available";
   }
   /** Push the full live availability snapshot into the 3D handle (selection is
    *  preserved inside the module). Cheap enough per status delta. */
   pushAvailabilityTo3d() {
     if (!this.view3dHandle) return;
-    const updates = this.allSeats().map((s) => ({ seatId: s.id, state: this.seatState3dFor(s.id) }));
+    const updates = this.allSeats().map((s) => ({ seatId: s.id, state: this.seatState3dFor(s) }));
     this.view3dHandle.setAvailability(updates);
   }
   /** Mirror the authoritative widget selection into the 3D handle. */
@@ -4662,6 +4704,75 @@ var SeatPicker = class _SeatPicker {
     if (this.opts.confirmSelection !== false) this.showConfirm(seat);
     else this.syncTray();
   }
+  /**
+   * The venue-navigation rail inside 3D: levels and areas.
+   *
+   * In 2D a buyer moves through the venue by floor switcher and by the LOD
+   * rungs. Both are hidden while immersed, and the 3D module's own chips only
+   * cover "go home" and "see the 360" — so on a multi-floor or multi-zone chart
+   * the buyer entered 3D and LOST the ability to reach the level or area they
+   * were booking. The camera moves for both already exist on the handle
+   * (`focusFloor` / `focusZone`); this is the surface that offers them.
+   *
+   * Levels are a TOGGLE (a floor stays isolated until you pick another), areas
+   * are an ACTION (the camera flies there and you are then free to orbit), which
+   * is why only the level pills carry a pressed state.
+   */
+  buildView3dNav(overlay, handle) {
+    const floors = handle.floors();
+    const zones = handle.zones().filter((z) => z.seatCount > 0);
+    const sections = zones.length > 1 ? [] : handle.sections().filter((s) => s.seatCount > 0).slice(0, MAX_3D_SECTION_PILLS);
+    const wantFloors = floors.length > 1;
+    const wantZones = zones.length > 1;
+    const wantSections = sections.length > 1;
+    if (!wantFloors && !wantZones && !wantSections) return;
+    const nav = document.createElement("div");
+    nav.className = "sl-view3d-nav";
+    if (wantFloors) {
+      const row = document.createElement("div");
+      row.setAttribute("role", "group");
+      row.setAttribute("aria-label", this.tf("picker.levels", "Levels"));
+      const pills = [];
+      const select = (index) => {
+        if (!handle.focusFloor(index)) return;
+        pills.forEach((p) => {
+          p.setAttribute("aria-pressed", String((p.dataset.floor === "" ? null : Number(p.dataset.floor)) === index));
+        });
+      };
+      const add = (label, index) => {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.textContent = label;
+        b.dataset.floor = index === null ? "" : String(index);
+        b.setAttribute("aria-pressed", String(index === null));
+        b.addEventListener("click", () => select(index));
+        pills.push(b);
+        row.appendChild(b);
+      };
+      add(this.tf("picker.allLevels", "All levels"), null);
+      for (const f of floors) add(f.label || `Level ${f.index + 1}`, f.index);
+      nav.appendChild(row);
+    }
+    if (wantZones || wantSections) {
+      const row = document.createElement("div");
+      row.setAttribute("role", "group");
+      row.setAttribute("aria-label", this.tf("picker.areas", "Areas"));
+      const entries = wantZones ? zones.map((z) => ({ id: z.id, label: z.label || z.id, go: () => {
+        handle.focusZone(z.id);
+      } })) : sections.map((s) => ({ id: s.id, label: s.label || s.id, go: () => {
+        handle.focusSection(s.id);
+      } }));
+      for (const e of entries) {
+        const b = document.createElement("button");
+        b.type = "button";
+        b.textContent = e.label;
+        b.addEventListener("click", e.go);
+        row.appendChild(b);
+      }
+      nav.appendChild(row);
+    }
+    overlay.appendChild(nav);
+  }
   async enter3d(flySeatId) {
     if (this.view3dEl || !this.canOffer3d() || !this.els.map) return;
     const doc = this.controller.doc;
@@ -4712,6 +4823,7 @@ var SeatPicker = class _SeatPicker {
       this.view3dHandle = handle;
       this.pushAvailabilityTo3d();
       this.syncSelectionTo3d();
+      this.buildView3dNav(overlay, handle);
       if (flySeatId) void handle.flyToSeat(flySeatId);
     } catch (err) {
       this.opts.onError?.(err);