@seatlayer/js 0.47.0 → 0.47.2

package/dist/index.js

@@ -577,6 +577,10 @@ var PubApi = class {
   paymentOptions(key) {
     return this.request(`/pub/events/${encodeURIComponent(key)}/payment-options`);
   }
+  /** Server-resolved active ticket offers and category prices. */
+  availability(key, live = false) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/availability${live ? "?live=1" : ""}`);
+  }
   /**
    * Turn a live hold into an order and start a payment.
    *
@@ -945,7 +949,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 };
@@ -1074,7 +1077,7 @@ var SeatingChart = class {
       this.tipEl.style.display = "none";
       return;
     }
-    const money = (() => {
+    const money2 = (() => {
       try {
         return new Intl.NumberFormat(void 0, { style: "currency", currency: details.currency }).format(details.price);
       } catch {
@@ -1082,7 +1085,7 @@ var SeatingChart = class {
       }
     })();
     const statusLine = details.status === "free" ? "" : `<div style="margin-top:5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#fca5a5;font-weight:700">${details.status === "held" ? t("map.statusHeld") : t("map.statusTaken")}</div>`;
-    this.tipEl.innerHTML = `<div style="font-weight:700;font-size:13px">${details.label}</div><div style="display:flex;align-items:center;gap:6px;margin-top:4px;color:#c7cddc"><span style="width:9px;height:9px;border-radius:50%;flex:none;background:${details.categoryColor}"></span><span>${details.categoryLabel}</span><span style="margin-left:auto;font-weight:700;color:#fff">${money}</span></div>` + statusLine;
+    this.tipEl.innerHTML = `<div style="font-weight:700;font-size:13px">${details.label}</div><div style="display:flex;align-items:center;gap:6px;margin-top:4px;color:#c7cddc"><span style="width:9px;height:9px;border-radius:50%;flex:none;background:${details.categoryColor}"></span><span>${details.categoryLabel}</span><span style="margin-left:auto;font-weight:700;color:#fff">${money2}</span></div>` + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -1320,14 +1323,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;
@@ -1992,6 +1993,136 @@ import {
   planPanoramaDelivery,
   schedulePanoramaUpgrade
 } from "@seatlayer/core/view/panoramaDelivery";
+
+// src/offerAvailability.ts
+var SALE_STATES = [
+  "on-sale",
+  "low",
+  "sold-out",
+  "presale",
+  "closed"
+];
+function money(value) {
+  if (value === null || value === void 0) return null;
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : void 0;
+}
+function timestamp(value) {
+  if (value === null || value === void 0) return null;
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : void 0;
+}
+function parseSummary(value) {
+  if (value == null) return null;
+  if (typeof value !== "object" || Array.isArray(value)) return void 0;
+  const source = value;
+  const count = source.count;
+  const index = source.index;
+  if (typeof index !== "number" || !Number.isInteger(index) || index < 1) return void 0;
+  if (typeof count !== "number" || !Number.isInteger(count) || count < index) return void 0;
+  const remaining = source.remaining;
+  if (remaining != null && (typeof remaining !== "number" || !Number.isInteger(remaining) || remaining < 0)) {
+    return void 0;
+  }
+  const result = {
+    index,
+    count,
+    remaining: remaining == null ? null : remaining
+  };
+  if (source.id !== void 0) {
+    if (typeof source.id !== "string" || !source.id.trim()) return void 0;
+    result.id = source.id.trim();
+  }
+  if (source.name !== void 0) {
+    if (typeof source.name !== "string" || !source.name.trim()) return void 0;
+    result.name = source.name.trim();
+  }
+  if (source.categoryKey !== void 0) {
+    if (source.categoryKey !== null && (typeof source.categoryKey !== "string" || !source.categoryKey.trim())) {
+      return void 0;
+    }
+    result.categoryKey = source.categoryKey == null ? null : source.categoryKey.trim();
+  }
+  for (const key of ["startsAt", "endsAt"]) {
+    if (source[key] === void 0) continue;
+    const parsed = timestamp(source[key]);
+    if (parsed === void 0) return void 0;
+    result[key] = parsed;
+  }
+  return result;
+}
+function parseTicketOfferAvailability(body) {
+  if (!body || typeof body !== "object" || Array.isArray(body)) return null;
+  const raw = body;
+  const state = SALE_STATES.find((candidate) => candidate === raw.state);
+  if (!state) return null;
+  const fromPrice = money(raw.fromPrice);
+  const previousPrice = money(raw.previousPrice);
+  if (fromPrice === void 0 || previousPrice === void 0) return null;
+  const currency = raw.currency == null ? null : typeof raw.currency === "string" && raw.currency.trim() ? raw.currency.trim() : void 0;
+  if (currency === void 0) return null;
+  const release = parseSummary(raw.release);
+  if (release === void 0) return null;
+  const upcoming = raw.upcoming === void 0 ? null : parseSummary(raw.upcoming);
+  if (upcoming === void 0) return null;
+  let prices = [];
+  if (raw.prices != null) {
+    if (!Array.isArray(raw.prices)) return null;
+    const parsed = [];
+    for (const entry of raw.prices) {
+      if (!entry || typeof entry !== "object" || Array.isArray(entry)) return null;
+      const row = entry;
+      const categoryKey = typeof row.categoryKey === "string" ? row.categoryKey.trim() : "";
+      if (!categoryKey) return null;
+      const price = money(row.price);
+      const previous = money(row.previousPrice);
+      if (price === void 0 || price === null || previous === void 0) return null;
+      const item = { categoryKey, price, previousPrice: previous };
+      if (row.offerId !== void 0) {
+        if (typeof row.offerId !== "string" || !row.offerId.trim()) return null;
+        item.offerId = row.offerId.trim();
+      }
+      if (row.offerName !== void 0) {
+        if (typeof row.offerName !== "string" || !row.offerName.trim()) return null;
+        item.offerName = row.offerName.trim();
+      }
+      if (row.remaining !== void 0) {
+        if (row.remaining !== null && (typeof row.remaining !== "number" || !Number.isInteger(row.remaining) || row.remaining < 0)) return null;
+        item.remaining = row.remaining == null ? null : row.remaining;
+      }
+      for (const key of ["startsAt", "endsAt"]) {
+        if (row[key] === void 0) continue;
+        const at = timestamp(row[key]);
+        if (at === void 0) return null;
+        item[key] = at;
+      }
+      parsed.push(item);
+    }
+    prices = parsed;
+  }
+  return { state, fromPrice, previousPrice, currency, release, upcoming, prices };
+}
+function nextOfferTransitionAt(availability, now) {
+  if (!availability) return null;
+  let next = null;
+  const consider = (at) => {
+    if (at != null && at > now && (next === null || at < next)) next = at;
+  };
+  for (const summary of [availability.release, availability.upcoming]) {
+    consider(summary?.startsAt);
+    consider(summary?.endsAt);
+  }
+  for (const price of availability.prices) {
+    consider(price.startsAt);
+    consider(price.endsAt);
+  }
+  return next;
+}
+function ticketOfferPrices(availability) {
+  const map = {};
+  for (const entry of availability?.prices ?? []) map[entry.categoryKey] = entry.price;
+  return map;
+}
+
+// src/SeatPicker.ts
 var DEFAULT_API_BASE2 = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION2 = 10;
 var EXTEND_PROMPT_MS = 6e4;
@@ -2212,6 +2343,15 @@ var CSS = (
 .sl-cbbtn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
 /* price panel \u2014 one compact filter control replaces the wrapping price-chip row. */
+.sl-offer{display:none;margin:12px 14px 2px;padding:12px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));
+  border-radius:12px;background:color-mix(in srgb,var(--sl-accent) 8%,var(--sl-surface));color:var(--sl-text)}
+.sl-offer.has{display:block}.sl-offer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
+.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent)}
+.sl-offer-name{display:block;margin-top:2px;font-size:13px;font-weight:800;line-height:1.3}.sl-offer-line{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--sl-muted)}
+.sl-offer-info{position:relative;flex:none}.sl-offer-info>summary{list-style:none;width:25px;height:25px;border:1px solid var(--sl-line);border-radius:999px;
+  display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:850;color:var(--sl-text);background:var(--sl-surface)}
+.sl-offer-info>summary::-webkit-details-marker{display:none}.sl-offer-info[open]>summary{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-offer-detail{margin-top:10px;padding-top:9px;border-top:1px solid var(--sl-line);font-size:10.5px;line-height:1.45;color:var(--sl-muted)}
 .sl-sec{padding:14px 14px 4px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
 .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;
@@ -2222,6 +2362,7 @@ var CSS = (
   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-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent);font-size:9px;font-weight:750}
 .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}
@@ -2663,7 +2804,21 @@ var CSS = (
 /* 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;
@@ -2675,15 +2830,15 @@ var CSS = (
 .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
@@ -2933,10 +3088,17 @@ var SeatPicker = class _SeatPicker {
     this.ro = null;
     this.holdTimer = null;
     this.toastTimer = null;
+    this.offerRefreshTimer = null;
+    /** Armed only when the offer schedule has a known future transition (or as a
+     * bounded retry after a failed read) — never a fixed-cadence poll. */
+    this.offerBoundaryTimer = null;
+    this.offerVisibilityHandler = null;
     /** Short-lived UI motion timers; all are cancelled on destroy. */
     this.motionTimers = /* @__PURE__ */ new Set();
     // state
     this.currency = "USD";
+    this.eventTimezone = null;
+    this.offerAvailability = null;
     this.hold = null;
     /** Latest server expiry for the open hold (moves on extend). */
     this.holdExpiresAt = 0;
@@ -3050,6 +3212,7 @@ var SeatPicker = class _SeatPicker {
     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())");
     this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
+    this.hostPricing = options.pricing;
     this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
     this.access = options.transport ? null : createBuyerAccessContext(options, {
       onExpired: (event) => {
@@ -3091,6 +3254,7 @@ var SeatPicker = class _SeatPicker {
       },
       onStatusChange: () => {
         this.syncPrices();
+        this.scheduleOfferRefresh(true);
         this.evictTakenSelections();
         this.detectBooked();
         this.refreshMinimap();
@@ -3512,6 +3676,7 @@ var SeatPicker = class _SeatPicker {
           </div>
           <div class="sl-sec sl-filtersec" data-ref="filtersSec">Filters</div>
           <div class="sl-filters" data-ref="filters"></div>
+          <div class="sl-offer" data-ref="offer" role="status" aria-live="polite"></div>
           <div class="sl-sec sl-prices-sec" data-ref="pricesSec"><span>Ticket prices</span></div>
           <div class="sl-prices" data-ref="prices"></div>
           <div class="sl-live" data-ref="live" role="status" aria-live="polite"><span class="dot" aria-hidden="true"></span><span data-ref="liveText">Live availability \u2014 seats update in real time</span></div>
@@ -3532,6 +3697,13 @@ var SeatPicker = class _SeatPicker {
       this.els[el.dataset.ref] = el;
     });
     this.mapHost = this.els.map;
+    void this.refreshOfferAvailability(false);
+    if (this.api.availability) {
+      this.offerVisibilityHandler = () => {
+        if (!document.hidden && !this.destroyed) void this.refreshOfferAvailability(false);
+      };
+      document.addEventListener("visibilitychange", this.offerVisibilityHandler);
+    }
     const applyLayout = () => {
       const w = root.clientWidth;
       if (w <= 0) return;
@@ -3569,10 +3741,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;
@@ -3591,7 +3774,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);
@@ -3640,6 +3823,7 @@ var SeatPicker = class _SeatPicker {
     const chartTheme = this.controller.doc?.theme;
     Object.entries(resolveTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     this.currency = info.currency ?? this.opts.currency ?? "USD";
+    this.eventTimezone = info.timezone ?? null;
     const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl;
     if (logoUrl) this.els.logo.innerHTML = `<img src="${logoUrl}" alt="">`;
     else this.els.logo.textContent = (this.opts.theme?.brandName ?? chartTheme?.brandName ?? info.eventName ?? "?").slice(0, 1).toUpperCase();
@@ -3785,12 +3969,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);
@@ -4981,6 +5164,119 @@ var SeatPicker = class _SeatPicker {
       return `${n} ${this.currency}`;
     }
   }
+  /**
+   * Sleep until the offer schedule's next known transition, then re-read.
+   *
+   * A far-away boundary is capped: the wake re-reads, learns the (unchanged)
+   * schedule, and re-arms — so a picker left open for days still tracks an
+   * organizer's schedule edits at a cost of one request every few hours. No
+   * future transition means no timer at all; an event with no releases does
+   * zero background traffic. A wake in a hidden tab fetches nothing — the
+   * visibilitychange handler owns catching that tab up.
+   */
+  scheduleOfferBoundary(availability) {
+    if (this.offerBoundaryTimer) clearTimeout(this.offerBoundaryTimer);
+    this.offerBoundaryTimer = null;
+    if (!this.api.availability || this.destroyed) return;
+    const now = Date.now();
+    const boundary = nextOfferTransitionAt(availability, now);
+    if (boundary == null) return;
+    const MAX_SLEEP_MS = 6 * 36e5;
+    const delay = Math.min(Math.max(boundary - now + 1e3, 1e3), MAX_SLEEP_MS);
+    this.offerBoundaryTimer = setTimeout(() => {
+      this.offerBoundaryTimer = null;
+      if (document.hidden) return;
+      void this.refreshOfferAvailability(false);
+    }, delay);
+  }
+  /** Debounce the no-store offer read behind a burst of seat-status frames. */
+  scheduleOfferRefresh(live) {
+    if (!this.api.availability || this.destroyed) return;
+    if (this.offerRefreshTimer) clearTimeout(this.offerRefreshTimer);
+    this.offerRefreshTimer = setTimeout(() => {
+      this.offerRefreshTimer = null;
+      void this.refreshOfferAvailability(live);
+    }, live ? 180 : 0);
+  }
+  /**
+   * Pull the server's resolved answer. A failed refresh keeps the last truthful
+   * answer: flashing back to a chart price while checkout still charges an
+   * offer is worse than a temporarily stale remaining count.
+   */
+  async refreshOfferAvailability(live) {
+    if (!this.api.availability || this.destroyed) return;
+    try {
+      const body = await this.api.availability(this.opts.event, live);
+      if (this.destroyed) return;
+      const availability = parseTicketOfferAvailability(body);
+      if (!availability) return;
+      this.offerAvailability = availability;
+      this.scheduleOfferBoundary(availability);
+      const server = ticketOfferPrices(availability);
+      const merged = { ...this.hostPricing?.prices ?? {}, ...server };
+      const pricing = Object.keys(merged).length > 0 || this.hostPricing?.formatter ? { prices: merged, ...this.hostPricing?.formatter ? { formatter: this.hostPricing.formatter } : {} } : void 0;
+      this.setPricing(pricing);
+      this.syncOffer();
+      this.opts.onOfferAvailabilityChange?.(availability);
+    } catch {
+      if (!this.destroyed && !this.offerBoundaryTimer && !document.hidden) {
+        this.offerBoundaryTimer = setTimeout(() => {
+          this.offerBoundaryTimer = null;
+          if (document.hidden) return;
+          void this.refreshOfferAvailability(false);
+        }, 3e4);
+      }
+    }
+  }
+  offerPrice(categoryKey) {
+    if (!categoryKey) return null;
+    return this.offerAvailability?.prices.find((entry) => entry.categoryKey === categoryKey) ?? null;
+  }
+  /** The compact current/upcoming offer card above Ticket prices. */
+  syncOffer() {
+    const host = this.els.offer;
+    if (!host) return;
+    const availability = this.offerAvailability;
+    const active = availability?.release ?? null;
+    const upcoming = !active ? availability?.upcoming ?? null : null;
+    if (!availability || availability.state === "closed" || availability.state === "sold-out" || !active && !upcoming) {
+      host.classList.remove("has");
+      host.replaceChildren();
+      return;
+    }
+    const offer = active ?? upcoming;
+    const main = document.createElement("div");
+    main.className = "sl-offer-main";
+    const copy = document.createElement("div");
+    copy.className = "sl-offer-copy";
+    const kicker = document.createElement("span");
+    kicker.className = "sl-offer-kicker";
+    kicker.textContent = active ? "Current ticket offer" : "Upcoming ticket offer";
+    const name = document.createElement("strong");
+    name.className = "sl-offer-name";
+    name.textContent = offer.name || (active ? "Current offer" : "Scheduled offer");
+    const line = document.createElement("span");
+    line.className = "sl-offer-line";
+    const facts = [];
+    if (active && availability.fromPrice != null) facts.push(this.money(availability.fromPrice / 100));
+    if (active && offer.remaining != null) facts.push(`${offer.remaining} available`);
+    if (active && offer.endsAt != null) facts.push(`until ${formatWhen(offer.endsAt, this.eventTimezone, this.opts.locale)}`);
+    if (upcoming?.startsAt != null) facts.push(`starts ${formatWhen(upcoming.startsAt, this.eventTimezone, this.opts.locale)}`);
+    line.textContent = facts.join(" \xB7 ");
+    copy.append(kicker, name, line);
+    const info = document.createElement("details");
+    info.className = "sl-offer-info";
+    const summary = document.createElement("summary");
+    summary.setAttribute("aria-label", `How the ${name.textContent} offer works`);
+    summary.textContent = "i";
+    const detail = document.createElement("div");
+    detail.className = "sl-offer-detail";
+    detail.textContent = active ? `This price applies automatically to eligible seats. Tickets in active carts temporarily reduce the available quantity; released or expired holds return it. When the offer ends, the next matching offer or normal ticket price takes over.` : `Tickets are available at their normal price now. This scheduled offer will apply automatically to eligible seats when it starts.`;
+    info.append(summary, detail);
+    main.append(copy, info);
+    host.replaceChildren(main);
+    host.classList.add("has");
+  }
   /**
    * The price the buyer will actually pay for a category (+tier): the host's
    * `pricing` override when present, else the chart's stored price. Every
@@ -5007,9 +5303,11 @@ var SeatPicker = class _SeatPicker {
     this.els.prices.classList.toggle("sl-expanded", overflow > 1 && this.pricesExpanded);
     this.els.prices.innerHTML = shown.map((c) => {
       const price = this.catPrice(c);
+      const offer = this.offerPrice(c.key);
+      const previous = offer?.previousPrice != null && offer.previousPrice > offer.price ? offer.previousPrice : null;
       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" : ""}${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>`;
+      return `<div class="sl-price-row${dim ? " sl-dim" : ""}${active ? " sl-active" : ""}" data-cat="${escapeOption(c.key)}" role="button" tabindex="0" aria-pressed="${active}" title="${escapeOption(active ? "Show all seats" : `Show ${c.label} seats on the map`)}"><span class="sl-dot" style="background:${escapeOption(c.color)}"></span><span class="sl-price-label">${escapeOption(c.label)}` + (offer?.offerName ? `<small class="sl-price-offer">${escapeOption(offer.offerName)}</small>` : "") + `</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (previous != null ? `<span class="sl-price-was">${escapeOption(this.money(previous))}</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));
@@ -5321,10 +5619,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;
@@ -5664,6 +5963,7 @@ var SeatPicker = class _SeatPicker {
   }
   emitHoldChange() {
     const hold = this.hold;
+    this.scheduleOfferRefresh(true);
     this.opts.onHoldChange?.(
       hold,
       hold?.seats ?? [],
@@ -6393,6 +6693,7 @@ var SeatPicker = class _SeatPicker {
         flashOnLiveChange: true,
         onStatusChange: () => {
           this.syncPrices();
+          this.scheduleOfferRefresh(true);
           this.detectBooked();
           this.refreshMinimap();
           this.pushAvailabilityTo3d();
@@ -6528,6 +6829,14 @@ var SeatPicker = class _SeatPicker {
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
     if (this.liveTimer) clearTimeout(this.liveTimer);
+    if (this.offerRefreshTimer) clearTimeout(this.offerRefreshTimer);
+    if (this.offerBoundaryTimer) clearTimeout(this.offerBoundaryTimer);
+    this.offerRefreshTimer = null;
+    this.offerBoundaryTimer = null;
+    if (this.offerVisibilityHandler) {
+      document.removeEventListener("visibilitychange", this.offerVisibilityHandler);
+      this.offerVisibilityHandler = null;
+    }
     for (const timer of this.motionTimers) clearTimeout(timer);
     this.motionTimers.clear();
     this.ro?.disconnect();
@@ -6668,10 +6977,12 @@ export {
   markerOf,
   mutationCount,
   needsMoveConfirmation,
+  parseTicketOfferAvailability,
   planAssignment,
   retryAfterCopy,
   selectionSources,
   stateBadge,
-  suggestMarker
+  suggestMarker,
+  ticketOfferPrices
 };
 //# sourceMappingURL=index.js.map