@seatlayer/js 0.18.0 → 0.19.0

package/dist/index.js

@@ -366,10 +366,30 @@ var EmbeddedDesigner = class {
     this.timeoutTimer = null;
     this.phase = "loading";
     this.restoreContainerPosition = null;
+    // Host-side fullscreen pin: saved state we restore on `off`/Escape/destroy.
+    this.pinned = false;
+    this.frameStyleBeforeFs = null;
+    this.docOverflowBeforeFs = null;
+    this.bodyOverflowBeforeFs = null;
+    this.fsKeyHandler = null;
+    /** Latest height (px string) the Designer reported; re-applied after unpin. */
+    this.lastAutoHeight = "";
     this.handleMessage = (event) => {
       if (!this.frame || event.origin !== this.designerOrigin || event.source !== this.frame.contentWindow) return;
       if (!event.data || typeof event.data !== "object") return;
       const data = event.data;
+      if (data.type === "seatlayer.designer.resize") {
+        if (this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
+          this.lastAutoHeight = `${Math.round(data.px)}px`;
+          if (!this.pinned) this.frame.style.height = this.lastAutoHeight;
+        }
+        return;
+      }
+      if (data.type === "seatlayer.designer.fullscreen") {
+        if (data.on === true) this.pinFullscreen();
+        else if (data.on === false) this.unpinFullscreen();
+        return;
+      }
       if (typeof data.type !== "string" || !TYPES.has(data.type)) return;
       const message = {
         type: data.type,
@@ -452,6 +472,7 @@ var EmbeddedDesigner = class {
   }
   destroy() {
     window.removeEventListener("message", this.handleMessage);
+    this.unpinFullscreen();
     this.clearTimeoutTimer();
     this.removeOverlay();
     this.restoreContainerStyle();
@@ -459,10 +480,68 @@ var EmbeddedDesigner = class {
     this.frame = null;
     this.designerOrigin = "";
     this.phase = "loading";
+    this.lastAutoHeight = "";
   }
   loadingStateEnabled() {
     return this.options.showLoadingState !== false;
   }
+  autoResizeEnabled() {
+    return this.options.autoResize !== false;
+  }
+  /**
+   * Pin the iframe over the host page as a viewport-filling overlay. We save the
+   * iframe's inline style and the document scroll state so `unpinFullscreen`
+   * restores everything exactly. Escape (host-side) also exits.
+   */
+  pinFullscreen() {
+    if (this.pinned || !this.frame) return;
+    this.pinned = true;
+    this.frameStyleBeforeFs = this.frame.getAttribute("style");
+    Object.assign(this.frame.style, {
+      position: "fixed",
+      inset: "0",
+      width: "100vw",
+      height: "100vh",
+      margin: "0",
+      border: "0",
+      zIndex: "2147483000",
+      background: "#101625"
+    });
+    const docEl = document.documentElement;
+    this.docOverflowBeforeFs = docEl.style.overflow;
+    docEl.style.overflow = "hidden";
+    if (document.body) {
+      this.bodyOverflowBeforeFs = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    this.fsKeyHandler = (event) => {
+      if (event.key === "Escape") this.unpinFullscreen();
+    };
+    window.addEventListener("keydown", this.fsKeyHandler);
+  }
+  /** Undo `pinFullscreen`: restore the iframe style + scroll lock. Idempotent. */
+  unpinFullscreen() {
+    if (!this.pinned) return;
+    this.pinned = false;
+    if (this.frame) {
+      if (this.frameStyleBeforeFs === null) this.frame.removeAttribute("style");
+      else this.frame.setAttribute("style", this.frameStyleBeforeFs);
+      if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
+    }
+    this.frameStyleBeforeFs = null;
+    if (this.docOverflowBeforeFs !== null) {
+      document.documentElement.style.overflow = this.docOverflowBeforeFs;
+      this.docOverflowBeforeFs = null;
+    }
+    if (this.bodyOverflowBeforeFs !== null && document.body) {
+      document.body.style.overflow = this.bodyOverflowBeforeFs;
+      this.bodyOverflowBeforeFs = null;
+    }
+    if (this.fsKeyHandler) {
+      window.removeEventListener("keydown", this.fsKeyHandler);
+      this.fsKeyHandler = null;
+    }
+  }
   clearTimeoutTimer() {
     if (this.timeoutTimer !== null) {
       clearTimeout(this.timeoutTimer);
@@ -662,6 +741,7 @@ import {
   PickerController as PickerController2,
   expandChart,
   generateSeatPanorama,
+  generateSeatThumb,
   loadLocale as loadLocale2,
   setStringOverrides as setStringOverrides2,
   t as t2,
@@ -826,26 +906,43 @@ var CSS = `
 .sl-tray{flex:1;padding:10px 14px 14px;display:flex;flex-direction:column;gap:7px;min-height:0;overflow-y:auto;
   overscroll-behavior:contain;scrollbar-gutter:stable}
 .sl-tray-hint{font-size:12.5px;color:var(--sl-muted);line-height:1.5}
-.sl-chip{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto 30px;align-items:center;gap:8px;
-  min-height:53px;padding:7px 7px 7px 9px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm);
+.sl-chip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:stretch;
+  flex:none;min-height:53px;border:1px solid var(--sl-line);border-radius:var(--sl-r-sm);overflow:hidden;
   background:var(--sl-surface);font-size:13px;transform-origin:center;transition:border-color .15s,background .15s}
 .sl-chip:hover{border-color:color-mix(in srgb,var(--sl-accent) 38%,var(--sl-line))}
 .sl-chip.sl-enter{animation:slChipIn .38s cubic-bezier(.2,.8,.2,1) both}
 .sl-chip.sl-leave{pointer-events:none;animation:slChipOut .16s ease-in both}
 .sl-chip.sl-held{border-color:var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
   box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent)}
-.sl-ticket-state{width:23px;height:23px;border-radius:999px;display:flex;align-items:center;justify-content:center;
+.sl-ticket-state{width:17px;height:17px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
   background:var(--sl-accent);color:var(--sl-accent-ink)}
 .sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent)}
-.sl-ticket-state svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
-.sl-chip-main{min-width:0}
-.sl-chip b{display:block;font-weight:800;min-width:max-content;white-space:nowrap}
-.sl-chip-sub{display:flex;align-items:center;gap:5px;min-width:0;margin-top:2px}
+.sl-ticket-state svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-chip-main{min-width:0;padding:8px 10px 8px 11px;display:flex;flex-direction:column;justify-content:center;gap:5px}
+.sl-chip-id{display:flex;gap:12px;min-width:0}
+.sl-chip-id .fld{min-width:0}
+.sl-chip-id .fld.sec{flex:1}
+.sl-chip-id .fld.mid{flex:none;text-align:center}
+.sl-chip-eb{display:block;font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:1px}
+.sl-chip-id .val{display:block;font-weight:600;font-size:13px;line-height:1.25;white-space:nowrap}
+.sl-chip-id .fld.sec .val{overflow:hidden;text-overflow:ellipsis}
+.sl-chip-sub{display:flex;align-items:center;gap:6px;min-width:0}
 .sl-chip .cat{color:var(--sl-muted);font-size:10.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .sl-chip .amt{font-weight:700;font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
-.sl-chip .rm{width:29px;height:29px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--sl-muted)}
-.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 10%,transparent)}
+.sl-chip-rail{display:flex;flex-direction:column;border-left:1px solid var(--sl-line)}
+.sl-chip .rm,.sl-chip .view{flex:1;min-height:26px;border-radius:0;display:flex;align-items:center;justify-content:center;
+  color:var(--sl-muted);transition:color .15s,background .15s}
+.sl-chip .view{border-top:1px solid var(--sl-line)}
+.sl-chip .rm:hover,.sl-chip .rm:focus-visible{color:#e5484d;background:color-mix(in srgb,#e5484d 9%,transparent)}
+.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;
+  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}
 
 /* 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)}
@@ -921,6 +1018,8 @@ var CSS = `
 
 /* zoom column (flows within the bottom-right region) */
 .sl-zoom{display:flex;flex-direction:column;gap:6px}
+/* CSS-fallback full screen (iOS Safari has no element fullscreen API) */
+.sl-picker.sl-fs{position:fixed;inset:0;z-index:2147483000;width:auto;height:auto;max-height:none;border-radius:0}
 .sl-zoom button{width:36px;height:36px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-zoom button:hover{border-color:var(--sl-muted)}
@@ -979,6 +1078,39 @@ var CSS = `
 .sl-booked.on .sl-booked-title{animation-delay:.22s}
 .sl-booked.on .sl-booked-sub{animation-delay:.3s}
 
+/* sold-out overlay \u2014 every SEATED category's live availability is 0. Centered
+   over the map; a stub (disabled) "Join waitlist" button, exactly like the page.
+   Suppressed when GA areas exist (GA capacity isn't seat-counted). Clears live
+   the moment WS frees a seat up. */
+.sl-soldout{position:absolute;inset:0;z-index:10;display:none;flex-direction:column;align-items:center;
+  justify-content:center;text-align:center;gap:8px;padding:24px;
+  background:color-mix(in srgb,var(--sl-bg) 82%,transparent);backdrop-filter:blur(4px)}
+.sl-soldout.on{display:flex}
+.sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent);font-weight:800}
+.sl-soldout-title{font-size:32px;font-weight:800;color:var(--sl-text);line-height:1.05}
+.sl-soldout-copy{max-width:360px;font-size:13px;color:var(--sl-muted);line-height:1.5}
+.sl-picker .sl-soldout-btn{margin-top:10px;min-height:40px;padding:10px 18px;border-radius:var(--sl-r-sm);
+  background:var(--sl-surface);color:var(--sl-muted);border:1px solid var(--sl-line);font-weight:800;font-size:13px;
+  cursor:not-allowed;opacity:.85}
+
+/* sales-closed pill (header) \u2014 persistent read-only state when the event's sales
+   window is closed at load or closes live mid-session. Neutral (not accent) so it
+   reads as "unavailable", distinct from the accent hold pill next to it. */
+.sl-closed-pill{display:none;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;flex:none;
+  background:color-mix(in srgb,var(--sl-text) 12%,var(--sl-surface));color:var(--sl-text);
+  font-weight:700;font-size:12px;white-space:nowrap}
+.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
+   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}
+
 /* a11y filter chips (flow within the top-left region) */
 .sl-chips{display:flex;gap:6px;flex-wrap:wrap}
 .sl-chip-f{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;
@@ -1017,8 +1149,30 @@ var CSS = `
 .sl-picker[data-layout="narrow"] .sl-confirm{left:50%!important;top:auto!important;bottom:14px;width:min(342px,calc(100% - 24px));
   transform:translateX(-50%);animation:slConfirmMobileIn .24s cubic-bezier(.2,.8,.2,1) both}
 
+/* hover preview \u2014 a COMPACT echo of the confirm card (deliberately smaller: it's
+   a passing preview on hover, not the click/select action surface). Reuses the
+   Section\xB7Row\xB7Seat identity grid so hover, confirm and the cart chip all share
+   one visual language, just at three sizes. */
+.sl-tip{position:absolute;z-index:7;pointer-events:none;display:none;width:190px;overflow:hidden;
+  background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:11px;
+  box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
+.sl-tip-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;border-bottom:1px solid var(--sl-line)}
+.sl-tip-grid.one{grid-template-columns:1fr}
+.sl-tip-field{min-width:0;padding:6px 9px;border-right:1px solid var(--sl-line)}
+.sl-tip-field:last-child{border-right:0;text-align:center}
+.sl-tip-grid:not(.one) .sl-tip-field:nth-child(2){text-align:center}
+.sl-tip-key{display:block;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sl-muted);font-weight:800}
+.sl-tip-val{display:block;margin-top:2px;color:var(--sl-text);font-size:13px;line-height:1.1;font-weight:750;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-tip-cat{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11px;
+  background:color-mix(in srgb,var(--sl-cat) 12%,var(--sl-surface))}
+.sl-tip-dot{width:8px;height:8px;border-radius:50%;flex:none}
+.sl-tip-name{color:var(--sl-muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-tip-amt{margin-left:auto;font-weight:800;color:var(--sl-text);font-variant-numeric:tabular-nums;font-size:12px}
+.sl-tip-status{padding:5px 10px 7px;font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--sl-muted)}
+
 /* Best available is a first-class shortcut, not an anonymous utility row. */
-.sl-ba{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
+.sl-ba{position:relative;flex:none;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;
   padding:13px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));border-radius:13px;
   background:linear-gradient(135deg,color-mix(in srgb,var(--sl-accent) 5%,var(--sl-surface)),color-mix(in srgb,var(--sl-accent) 11%,var(--sl-surface)))}
 .sl-ba::after{content:'\u2726';position:absolute;right:10px;top:3px;color:color-mix(in srgb,var(--sl-accent) 20%,transparent);font-size:42px;line-height:1}
@@ -1054,12 +1208,6 @@ var CSS = `
 /* per-seat ticket-tier select + view-from-seat button in tray chips */
 .sl-chip .tier{background:var(--sl-bg);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:6px;
   font:inherit;font-size:10px;padding:2px 4px;min-width:0;max-width:100%;cursor:pointer}
-.sl-chip .view{width:20px;height:20px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
-  color:var(--sl-muted);opacity:.36;transition:color .15s,opacity .15s}
-.sl-chip .view:hover{color:var(--sl-text)}
-.sl-chip:hover .view,.sl-chip .view:focus-visible{opacity:1;color:var(--sl-text)}
-.sl-chip .view svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
-@media(pointer:coarse){.sl-chip .view{opacity:.58}}
 
 /* arena: LOD rung pills (flow within the top-center region) */
 .sl-rungs{display:none;background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:999px;padding:3px}
@@ -1117,6 +1265,14 @@ var CSS = `
 .sl-seccard-hint{font-size:10.5px;color:var(--sl-muted)}
 
 /* view-from-seat button on the confirm popover */
+/* Eager sightline preview inside the confirm card */
+.sl-confirm-thumbwrap{position:relative;display:block;width:100%;height:74px;margin:0 0 8px;padding:0!important;
+  border-radius:9px;overflow:hidden;border:1px solid var(--sl-line);cursor:pointer}
+.sl-confirm-thumb{display:block;width:100%;height:100%;object-fit:cover}
+.sl-confirm-thumb-badge{position:absolute;right:7px;top:7px;display:inline-flex;align-items:center;gap:5px;
+  font-size:10px;font-weight:700;color:#fff;background:rgba(10,14,22,0.72);border-radius:12px;padding:4px 9px;backdrop-filter:blur(3px)}
+.sl-confirm-sight{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--sl-muted);margin-bottom:2px}
+.sl-confirm-sight span{color:#22a06b;font-weight:800}
 .sl-confirm-view{width:100%;margin-top:9px;padding:8px;border-radius:8px;border:1px solid var(--sl-line);
   color:var(--sl-text);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;gap:7px}
 .sl-confirm-view:hover{border-color:var(--sl-muted)}
@@ -1200,6 +1356,22 @@ function resolveTokens(chart, host) {
     "--sl-radius": `${host?.radius ?? 14}px`
   };
 }
+var CB_STORAGE_KEY = "seatmap.a11y.cb";
+function readStoredColorblind() {
+  try {
+    if (typeof window === "undefined") return null;
+    const raw = window.localStorage.getItem(CB_STORAGE_KEY);
+    return raw == null ? null : raw === "1";
+  } catch {
+    return null;
+  }
+}
+function writeStoredColorblind(on) {
+  try {
+    window.localStorage.setItem(CB_STORAGE_KEY, on ? "1" : "0");
+  } catch {
+  }
+}
 var SeatPicker = class _SeatPicker {
   constructor(options) {
     this.root = null;
@@ -1232,11 +1404,17 @@ var SeatPicker = class _SeatPicker {
     this.confirmEl = null;
     this.confirmSeat = null;
     this.srEl = null;
-    this.a11yFilter = "all";
     this.baQty = 2;
     this.baCat = "";
     this.bestAvailableConfirm = false;
     this.releasingHold = false;
+    /** Event sales window is closed (read-only load state / live close). */
+    this.salesClosed = false;
+    /** Every seated category's live availability is 0 (sold-out overlay is up). */
+    this.soldOut = false;
+    this.soldoutEl = null;
+    /** Resolved colorblind-safe state — stored preference wins over the option. */
+    this.cbSafe = false;
     // arena / multi-floor / seat-view chrome
     this.rungsEl = null;
     this.floorsEl = null;
@@ -1245,13 +1423,11 @@ var SeatPicker = class _SeatPicker {
     this.viewCleanup = null;
     this.allSeatsCache = null;
     // F3 minimap
-    this.miniEl = null;
     this.miniCanvas = null;
     this.miniBase = null;
     this.miniTf = null;
     // F4 price-band filter — active band's category keys (null = all prices)
     this.priceBandKeys = null;
-    this.priceFilterEl = null;
     /** 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). */
@@ -1271,6 +1447,13 @@ var SeatPicker = class _SeatPicker {
     this.ctaPhase = "idle";
     // narrow-layout chrome that docks into the sheet's Filters row on mobile
     this.a11yChipsEl = null;
+    this.fsFallback = false;
+    this.fsChangeHandler = null;
+    this.fsEscHandler = null;
+    /** True once we've asked the host page to pin us fullscreen (framed, no native). */
+    this.framedFs = false;
+    /** Last height (px) posted to a host frame; dedupes redundant reports. */
+    this.lastPostedHeight = 0;
     this.cbEl = null;
     // modal plumbing (set by open())
     this.modalScrim = null;
@@ -1278,20 +1461,22 @@ var SeatPicker = class _SeatPicker {
     this.escHandler = null;
     /** Set by open(): closes the modal (scroll restore + destroy + onClose). */
     this.closeModal = null;
+    this.lastCatAvail = 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())");
     this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
     this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
-    this.api = new PubApi(this.apiBase);
+    this.api = options.transport ?? new PubApi(this.apiBase);
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
+    this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new PickerController2({
       transport: this.api,
       eventKey: options.event,
       maxSelection: this.maxTickets,
       currency: options.currency,
       flashOnLiveChange: true,
-      colorblindSafe: options.colorblindSafe,
+      colorblindSafe: this.cbSafe,
       onSelectionChange: () => {
         this.syncTray();
         if (this.committedSelection().length) this.collapseSectionCard();
@@ -1317,6 +1502,11 @@ var SeatPicker = class _SeatPicker {
       },
       confirmSelection: this.opts.confirmSelection,
       onSelect: (seat) => {
+        if (this.salesClosed) {
+          this.controller.deselect([seat.id]);
+          this.toast(this.tf("picker.salesClosedToast", "Sales are closed for this event."), "warning");
+          return;
+        }
         this.flashPickedSeat(seat.id);
         if (this.opts.confirmSelection) this.showConfirm(seat);
       },
@@ -1339,9 +1529,142 @@ var SeatPicker = class _SeatPicker {
       onHint: (m) => {
         if (m) this.toast(m);
       },
+      // Server declared the event closed mid-session (409 event_closed) — keep
+      // the toast (raised by handleCta), and add the persistent read-only state.
+      onSalesClosed: () => this.setSalesClosed(true),
       onError: (err) => this.opts.onError?.(err)
     });
   }
+  /**
+   * Eager sightline preview for the confirm card: a cheap generated forward
+   * view (or the organizer's real photo) plus a "Nm to stage · clear
+   * sightline" line — the premium at-a-glance moment; click opens the 360.
+   */
+  confirmThumbHtml(seat) {
+    const doc = this.controller.doc;
+    if (!doc) return "";
+    let url = seat.viewUrl ?? "";
+    let distance = null;
+    if (!url) {
+      try {
+        const thumb = generateSeatThumb(seat, doc.focalPoint);
+        url = thumb.url;
+        distance = thumb.distanceM ?? null;
+      } catch {
+        return "";
+      }
+    }
+    const sight = distance != null ? `${distance}${this.tf("picker.sightline", "m to stage \xB7 clear sightline")}` : 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). */
+  isFramed() {
+    return typeof window !== "undefined" && window.parent !== window;
+  }
+  /**
+   * Post a widget→host message when framed. targetOrigin is '*' because the
+   * payload carries nothing sensitive (a height number / a fullscreen flag);
+   * hosts verify `event.origin` on their side (see `attachPickerFrame`).
+   */
+  postToHost(message) {
+    if (!this.isFramed()) return;
+    try {
+      window.parent.postMessage(message, "*");
+    } catch {
+    }
+  }
+  /**
+   * Height (px) to advertise to a host frame.
+   *
+   * The picker fills whatever box it's given: `.sl-picker` is `height:100%;
+   * overflow:hidden`, and the /e/:key shell mounts it `position:fixed; inset:0`.
+   * So it has no intrinsic *document* height to read — `scrollHeight` just
+   * collapses to the current viewport, which for a framed embed would echo the
+   * host's own iframe height straight back (a circular value). We therefore
+   * report a width-driven *desired* height: a pleasant landscape box on desktop,
+   * taller on narrow widths where the bottom sheet needs room, clamped to the
+   * widget's `min-height` of 420. Width is host-controlled and never moves in
+   * response to the height we report, so this cannot feedback-loop.
+   */
+  measureFramedHeight() {
+    const root = this.root;
+    if (!root) return 0;
+    const width = root.clientWidth || (typeof window !== "undefined" ? window.innerWidth : 0) || 0;
+    if (width <= 0) return 0;
+    const ratio = width < 640 ? 1.2 : 0.62;
+    return Math.max(420, Math.round(width * ratio));
+  }
+  /** Post `seatlayer:height` to the host when framed and the value changed. */
+  reportFramedHeight() {
+    if (!this.isFramed()) return;
+    const px = this.measureFramedHeight();
+    if (px <= 0 || px === this.lastPostedHeight) return;
+    this.lastPostedHeight = px;
+    this.postToHost({ type: "seatlayer:height", px });
+  }
+  /** Full screen via the native API, falling back to a fixed-position overlay (iOS Safari). */
+  toggleFullscreen() {
+    const root = this.root;
+    if (!root) return;
+    const active = !!document.fullscreenElement || this.fsFallback || this.framedFs;
+    if (!active) {
+      if (root.requestFullscreen) {
+        root.requestFullscreen().catch(() => this.enterFsFallback());
+      } else {
+        this.enterFsFallback();
+      }
+    } else if (document.fullscreenElement) {
+      void document.exitFullscreen().catch(() => {
+      });
+    } else if (this.framedFs) {
+      this.setFramedFs(false);
+    } else {
+      this.setFsFallback(false);
+    }
+  }
+  /**
+   * Native element-fullscreen was unavailable or rejected. When framed, a CSS
+   * `.sl-fs` overlay can't escape the iframe, so we ask the host page to pin us
+   * (`seatlayer:fullscreen`). Otherwise (iOS Safari, same document) fall back to
+   * the `.sl-fs` overlay as before.
+   */
+  enterFsFallback() {
+    if (this.isFramed()) this.setFramedFs(true);
+    else this.setFsFallback(true);
+  }
+  /** Toggle host-driven (framed) fullscreen: post the flag + own the Esc key. */
+  setFramedFs(on) {
+    if (this.framedFs === on) return;
+    this.framedFs = on;
+    this.els.zfs?.setAttribute("aria-pressed", String(on || !!document.fullscreenElement));
+    this.postToHost({ type: "seatlayer:fullscreen", on });
+    if (on && !this.fsEscHandler) {
+      this.fsEscHandler = (e) => {
+        if (e.key === "Escape" && !document.fullscreenElement) this.setFramedFs(false);
+      };
+      window.addEventListener("keydown", this.fsEscHandler);
+    } else if (!on && this.fsEscHandler) {
+      window.removeEventListener("keydown", this.fsEscHandler);
+      this.fsEscHandler = null;
+    }
+    requestAnimationFrame(() => this.controller.zoomToFit());
+  }
+  setFsFallback(on) {
+    if (this.fsFallback === on) return;
+    this.fsFallback = on;
+    this.root?.classList.toggle("sl-fs", on);
+    this.els.zfs?.setAttribute("aria-pressed", String(on || !!document.fullscreenElement));
+    if (on && !this.fsEscHandler) {
+      this.fsEscHandler = (e) => {
+        if (e.key === "Escape" && !document.fullscreenElement) this.setFsFallback(false);
+      };
+      window.addEventListener("keydown", this.fsEscHandler);
+    } else if (!on && this.fsEscHandler) {
+      window.removeEventListener("keydown", this.fsEscHandler);
+      this.fsEscHandler = null;
+    }
+    requestAnimationFrame(() => this.controller.zoomToFit());
+  }
   /**
    * Close the picker. In modal mode (SeatPicker.open()) this dismisses the
    * modal exactly like ESC/scrim/✕ — restores page scroll and fires onClose.
@@ -1436,6 +1759,10 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-head-meta" data-ref="meta"></div>
         </div>
         <span class="sl-hold-pill" data-ref="hold"></span>
+        <span class="sl-closed-pill" data-ref="closedPill" role="status">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
+          <span data-ref="closedPillText"></span>
+        </span>
         <button type="button" class="sl-close" data-ref="close" aria-label="Close">
           <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>
@@ -1449,6 +1776,9 @@ var SeatPicker = class _SeatPicker {
             <button type="button" aria-label="Fit to screen" data-ref="zfit">
               <svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
             </button>
+            <button type="button" aria-label="Full screen" aria-pressed="false" data-ref="zfs">
+              <svg viewBox="0 0 24 24"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
+            </button>
           </div>
           <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>Loading seat map\u2026</div>
           <div class="sl-toast" data-ref="toast" role="status" aria-live="polite"></div>
@@ -1467,6 +1797,7 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-filters" data-ref="filters"></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>
           <div class="sl-sec sl-seats-sec"><span>Your seats</span><span class="sl-seat-summary" data-ref="seatSummary"></span></div>
           <div class="sl-tray" data-ref="tray"></div>
           <div class="sl-foot" data-ref="foot">
@@ -1487,6 +1818,7 @@ var SeatPicker = class _SeatPicker {
     const applyLayout = () => {
       const w = root.clientWidth;
       if (w <= 0) return;
+      this.reportFramedHeight();
       const next = w < 640 ? "narrow" : "wide";
       if (root.dataset.layout === next) return;
       root.dataset.layout = next;
@@ -1500,6 +1832,13 @@ var SeatPicker = class _SeatPicker {
     this.els.zin.addEventListener("click", () => this.controller.zoomIn());
     this.els.zout.addEventListener("click", () => this.controller.zoomOut());
     this.els.zfit.addEventListener("click", () => this.controller.zoomToFit());
+    this.els.zfs.addEventListener("click", () => this.toggleFullscreen());
+    this.fsChangeHandler = () => {
+      if (!document.fullscreenElement) this.setFsFallback(false);
+      this.els.zfs?.setAttribute("aria-pressed", String(!!document.fullscreenElement || this.fsFallback || this.framedFs));
+      requestAnimationFrame(() => this.controller.zoomToFit());
+    };
+    document.addEventListener("fullscreenchange", this.fsChangeHandler);
     const head = this.els.sheetHead;
     if (head) {
       const toggle = this.els.sheetToggle;
@@ -1543,7 +1882,7 @@ var SeatPicker = class _SeatPicker {
     }
     this.tipEl = document.createElement("div");
     this.tipEl.setAttribute("role", "tooltip");
-    this.tipEl.style.cssText = "position:absolute;z-index:7;pointer-events:none;display:none;max-width:240px;background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.45;";
+    this.tipEl.className = "sl-tip";
     this.els.map.appendChild(this.tipEl);
     this.els.map.addEventListener("mousemove", (e) => {
       const r = this.els.map.getBoundingClientRect();
@@ -1568,6 +1907,7 @@ var SeatPicker = class _SeatPicker {
       return this;
     }
     this.els.boot.remove();
+    this.salesClosed = !!info.salesClosed;
     this.buildRegions();
     this.regions["bottom-right"].appendChild(this.els.zoom);
     this.regions["bottom-center"].appendChild(this.els.toast);
@@ -1587,6 +1927,7 @@ 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 ");
+    this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
     if (this.controller.doc) {
       for (const seat of expandChart(this.controller.doc)) {
@@ -1602,12 +1943,29 @@ var SeatPicker = class _SeatPicker {
       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.regions["top-left"].appendChild(chips);
       this.a11yChipsEl = chips;
+      const active = /* @__PURE__ */ new Set();
+      const syncChips = () => {
+        chips.querySelectorAll("button").forEach((b) => {
+          const f = b.dataset.f;
+          const on = f === "all" ? active.size === 0 : active.has(f);
+          b.classList.toggle("on", on);
+          b.setAttribute("aria-pressed", String(on));
+        });
+        const filter = active.size ? [...active] : null;
+        this.controller.setAccessibilityFilter(filter);
+        if (filter && this.rungsEl && this.controller.getRung() !== "seats") {
+          this.controller.setRung("seats");
+          this.collapseSectionCard();
+          this.syncRung();
+        }
+      };
       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]);
+          if (f === "all") active.clear();
+          else if (active.has(f)) active.delete(f);
+          else active.add(f);
+          syncChips();
         });
       });
     }
@@ -1616,14 +1974,14 @@ var SeatPicker = class _SeatPicker {
     cb.className = "sl-cbbtn";
     this.cbEl = cb;
     cb.setAttribute("aria-label", "Toggle colorblind-friendly colors");
-    cb.setAttribute("aria-pressed", String(!!this.opts.colorblindSafe));
+    cb.setAttribute("aria-pressed", String(this.cbSafe));
     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.cbSafe = !this.cbSafe;
+      cb.setAttribute("aria-pressed", String(this.cbSafe));
+      this.controller.setColorblindSafe(this.cbSafe);
+      writeStoredColorblind(this.cbSafe);
     });
     this.srEl = document.createElement("div");
     this.srEl.className = "sl-sr";
@@ -1634,9 +1992,11 @@ var SeatPicker = class _SeatPicker {
     this.buildPriceFilter();
     this.buildExtendPrompt();
     this.buildBookedOverlay();
+    this.buildSoldoutOverlay();
     this.dockLayoutChrome();
     await this.restoreRememberedHold();
     if (this.destroyed) return this;
+    if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
     return this;
@@ -1688,6 +2048,85 @@ var SeatPicker = class _SeatPicker {
     this.bookedEl = el;
     this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
   }
+  /**
+   * Localized string with a literal fallback. `t()` returns the key itself for
+   * unknown keys, so this collapses that to `fallback` — while still honoring a
+   * host `messages` override (which makes `t()` return the override, not the key).
+   */
+  tf(key, fallback) {
+    const v = t2(key);
+    return v === key ? fallback : v;
+  }
+  /** Sold-out overlay — centered over the map, disabled waitlist stub (Gap 2). */
+  buildSoldoutOverlay() {
+    if (!this.els.map) return;
+    const el = document.createElement("div");
+    el.className = "sl-soldout";
+    el.setAttribute("role", "status");
+    const name = (this.controller.doc?.theme?.brandName ?? this.opts.theme?.brandName ?? this.els.name?.textContent ?? this.tf("picker.soldOutEyebrow", "This event")).toUpperCase();
+    el.innerHTML = `<div class="sl-soldout-eyebrow">${name}</div><div class="sl-soldout-title">${this.tf("picker.soldOutTitle", "Sold out")}</div><p class="sl-soldout-copy">${this.tf("picker.soldOutCopy", "Every seat is gone. Join the waitlist and we\u2019ll email you if seats are released.")}</p><button type="button" class="sl-soldout-btn" disabled>${this.tf("picker.waitlist", "Join waitlist")}</button>`;
+    this.els.map.appendChild(el);
+    this.soldoutEl = el;
+  }
+  /**
+   * Recompute the sold-out state on every price/availability sync. Sold-out ⇔
+   * every SEATED category's live free count is 0. Suppressed when the chart has
+   * GA areas (GA capacity isn't per-seat, so seated counts would read 0 and
+   * falsely block standing room) — mirrors the public page. Clears live when WS
+   * frees a seat up.
+   */
+  syncSoldout(categories, left) {
+    const hasGA = this.controller.getGAAreas().length > 0;
+    const soldOut = this.isSoldOut(categories, left, hasGA);
+    if (soldOut === this.soldOut) return;
+    this.soldOut = soldOut;
+    this.soldoutEl?.classList.toggle("on", soldOut);
+  }
+  /**
+   * Pure sold-out predicate: every SEATED category's free count is 0, there is at
+   * least one seated category, and there are no GA areas (GA capacity isn't
+   * per-seat, so seated counts read 0 and would falsely block standing room).
+   * `left` is seeded implicitly — a missing key means a fully-booked tier (0 free).
+   */
+  isSoldOut(categories, left, hasGA) {
+    return !hasGA && categories.length > 0 && categories.every((c) => (left[c.key] ?? 0) === 0);
+  }
+  /**
+   * Sales-closed read-only state (Gap 3): persistent header pill, disabled CTA
+   * with a closed label, and frozen best-available / GA controls. `setSalesClosed`
+   * is the reactive entry (live 409 event_closed); `applySalesClosed` is the
+   * idempotent DOM apply used at load and on transition.
+   */
+  setSalesClosed(closed) {
+    if (this.salesClosed === closed) return;
+    this.salesClosed = closed;
+    this.applySalesClosed();
+  }
+  applySalesClosed() {
+    const pill = this.els.closedPill;
+    if (pill) {
+      pill.classList.toggle("on", this.salesClosed);
+      const text = this.els.closedPillText ?? pill;
+      text.textContent = this.tf("picker.salesClosedPill", "Sales are closed");
+    }
+    this.root?.setAttribute("data-sales-closed", String(this.salesClosed));
+    this.syncCta();
+    this.syncTray();
+  }
+  /** The badge is hidden when the host opts out OR the org's theme sets hideBadge. */
+  badgeHidden(chartTheme) {
+    return !!(this.opts.hideBadge || chartTheme?.hideBadge);
+  }
+  /** Attribution badge in the side-panel foot (Gap 7). Hidden per host/theme. */
+  buildBadge(chartTheme) {
+    if (this.badgeHidden(chartTheme)) return;
+    const foot = this.els.foot;
+    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>`;
+    foot.appendChild(el);
+  }
   // ---- Feature 6: chrome anchor regions -------------------------------------
   /**
    * Create the positioned flex containers that own every persistent map overlay.
@@ -1800,13 +2239,18 @@ var SeatPicker = class _SeatPicker {
       heldGA.set(item.objectId, (heldGA.get(item.objectId) ?? 0) + (item.quantity ?? 1));
     }
     return gaAreas.reduce(
-      (sum, area) => sum + area.price * Math.max(0, (this.gaQty.get(area.id) ?? 0) - (heldGA.get(area.id) ?? 0)),
+      (sum, area) => sum + this.paidPrice(area.categoryKey, null, area.price) * Math.max(0, (this.gaQty.get(area.id) ?? 0) - (heldGA.get(area.id) ?? 0)),
       0
     );
   }
   syncCta(count = this.lastTrayCount, pending = this.pendingSelectionCount()) {
     const cta = this.els.cta;
     if (!cta) return;
+    if (this.salesClosed) {
+      cta.disabled = true;
+      cta.textContent = this.tf("picker.salesClosedCta", "Sales closed");
+      return;
+    }
     if (this.confirmSeat) {
       cta.disabled = true;
       cta.textContent = "Confirm or cancel this seat";
@@ -1942,7 +2386,6 @@ var SeatPicker = class _SeatPicker {
     canvas.style.height = `${h}px`;
     wrap.appendChild(canvas);
     (this.regions["bottom-left"] ?? this.els.map).appendChild(wrap);
-    this.miniEl = wrap;
     this.miniCanvas = canvas;
     const scale = Math.min((w - PAD * 2) / Math.max(1, b.width), (h - PAD * 2) / Math.max(1, b.height)) * dpr;
     const offX = (w * dpr - b.width * scale) / 2 - b.x * scale;
@@ -2055,9 +2498,11 @@ var SeatPicker = class _SeatPicker {
     this.controller.overview();
   }
   // ---- F4 price-band filter -------------------------------------------------
-  /** Effective price of a category (first tier when tiered, else base price). */
+  /** Effective display price of a category: host pricing override → first tier → base. */
   catPrice(c) {
-    return c.tiers?.length ? c.tiers[0].price : c.price;
+    const chart = c.tiers?.length ? c.tiers[0].price : c.price;
+    if (chart === void 0 || !c.key) return chart;
+    return this.paidPrice(c.key, c.tiers?.[0]?.id ?? null, chart);
   }
   /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
   priceBands() {
@@ -2102,7 +2547,6 @@ var SeatPicker = class _SeatPicker {
     select.setAttribute("aria-label", "Filter and focus seats by price");
     select.innerHTML = `<option value="all">All prices</option>` + bands.map((band) => `<option value="${band.id}">${band.label}</option>`).join("");
     this.els.pricesSec.appendChild(select);
-    this.priceFilterEl = select;
     select.addEventListener("change", () => {
       const band = bands.find((candidate) => candidate.id === select.value);
       const keys = band?.keys ?? null;
@@ -2206,7 +2650,10 @@ var SeatPicker = class _SeatPicker {
   renderSectionCard(summary) {
     if (!this.els.map) return;
     this.secCardEl?.remove();
-    const priceLabel = summary.priceMin === summary.priceMax ? this.money(summary.priceMin) : `${this.money(summary.priceMin)}\u2013${this.money(summary.priceMax)}`;
+    const paid = summary.categories.length ? summary.categories.map((c) => this.paidPrice(c.key, null, c.price)) : [summary.priceMin, summary.priceMax];
+    const paidMin = Math.min(...paid);
+    const paidMax = Math.max(...paid);
+    const priceLabel = paidMin === paidMax ? this.money(paidMin) : `${this.money(paidMin)}\u2013${this.money(paidMax)}`;
     const leftLabel = tCount("picker.seatsLeftInSection", summary.seatsLeft);
     const xBtn = `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button>`;
     const card = document.createElement("div");
@@ -2236,7 +2683,7 @@ var SeatPicker = class _SeatPicker {
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
       const mix = summary.categories.map((c) => {
         const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(c.price)}</span></span>`;
+        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(this.paidPrice(c.key, null, c.price))}</span></span>`;
       }).join("");
       card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
@@ -2303,7 +2750,7 @@ var SeatPicker = class _SeatPicker {
     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;
+    const price = cat ? this.catPrice(cat) : void 0;
     this.srEl.textContent = `Seat ${seat.label}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
   }
   // ---- seat candidate confirmation ------------------------------------------
@@ -2318,7 +2765,8 @@ var SeatPicker = class _SeatPicker {
     if (this.tipEl) this.tipEl.style.display = "none";
     const details = this.controller.seatDetails(seat.id);
     const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
-    const price = details?.price ?? (cat?.tiers?.length ? cat.tiers[0].price : cat?.price);
+    const chartPrice = details?.price ?? (cat?.tiers?.length ? cat.tiers[0].price : cat?.price);
+    const price = chartPrice != null ? this.paidPrice(seat.categoryKey, details?.tierId ?? cat?.tiers?.[0]?.id ?? null, chartPrice) : void 0;
     const safe = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
       "&": "&amp;",
       "<": "&lt;",
@@ -2331,7 +2779,7 @@ var SeatPicker = class _SeatPicker {
     el.setAttribute("aria-modal", "true");
     el.setAttribute("aria-label", `Confirm seat ${seat.label}`);
     el.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
-    el.innerHTML = `<div class="sl-confirm-grid"><div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details?.sectionLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Row</span><span class="sl-confirm-value">${safe(details?.rowLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.label)}</span></div></div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + (this.seatViewEnabled() ? `<button type="button" class="sl-confirm-view"><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>${t2("picker.open360")}</button>` : "") + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
+    el.innerHTML = `<div class="sl-confirm-grid"><div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details?.sectionLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Row</span><span class="sl-confirm-value">${safe(this.rowShort(details))}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.label)}</span></div></div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + (this.seatViewEnabled() ? this.confirmThumbHtml(seat) : "") + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
     this.els.map.appendChild(el);
     this.confirmEl = el;
     this.reanchorConfirm();
@@ -2496,18 +2944,35 @@ var SeatPicker = class _SeatPicker {
   }
   // ---- chrome sync ----------------------------------------------------------
   money(n) {
+    const formatter = this.opts.pricing?.formatter;
+    if (formatter) return formatter(n, this.currency);
     try {
       return new Intl.NumberFormat(this.opts.locale, { style: "currency", currency: this.currency }).format(n);
     } catch {
       return `${n} ${this.currency}`;
     }
   }
+  /**
+   * 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
+   * price the widget DISPLAYS or hands off must flow through here — a map
+   * that shows one price while checkout charges another destroys trust.
+   */
+  paidPrice(categoryKey, tierId, fallback) {
+    const entry = categoryKey ? this.opts.pricing?.prices?.[categoryKey] : void 0;
+    if (entry === void 0) return fallback;
+    if (typeof entry === "number") return entry;
+    if (tierId && entry.tiers?.[tierId] !== void 0) return entry.tiers[tierId];
+    return entry.base ?? fallback;
+  }
   syncPrices() {
     const doc = this.controller.doc;
     if (!doc || !this.els.prices) return;
     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 = c.tiers?.length ? c.tiers[0].price : c.price;
+      const price = this.catPrice(c);
       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>`;
@@ -2516,6 +2981,26 @@ var SeatPicker = class _SeatPicker {
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
     });
   }
+  /**
+   * 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
+   * counts on every status change — no per-seat payload needed. Skips the very
+   * first computation (initial load is not "activity").
+   */
+  narrateAvailability(categories, left) {
+    const textEl = this.els.liveText;
+    const prev = this.lastCatAvail;
+    this.lastCatAvail = { ...left };
+    if (!textEl || !prev) 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`;
+      return;
+    }
+  }
   /** A live delta took one of OUR selected (not yet held) seats — evict + tell the buyer. */
   evictTakenSelections() {
     const ownLabels = /* @__PURE__ */ new Set([
@@ -2544,15 +3029,23 @@ var SeatPicker = class _SeatPicker {
       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>`);
     }
+    const idGrid = (seatId, label) => {
+      const d = seatId ? this.controller.seatDetails(seatId) : null;
+      if (!d?.sectionLabel && !d?.rowLabel && !d?.seatNumber) {
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Seat</span><span class="val">${label}</span></span></div>`;
+      }
+      return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${d.sectionLabel ?? "\u2014"}</span></span>` + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">Row</span><span class="val">${this.rowShort(d)}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${d.seatNumber}</span></span>` : "") + `</div>`;
+    };
+    const iconRail = (rmAria, viewLabel) => `<div class="sl-chip-rail"><button type="button" class="rm" aria-label="${rmAria}"><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>` + (viewLabel ? `<button type="button" class="view" data-view-label="${viewLabel}" aria-label="${t2("picker.viewFromSeat", { label: viewLabel })}"><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></button>` : "") + `</div>`;
     for (const item of heldItems) {
       const itemKey = `held:${item.label}`;
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === item.categoryKey);
       const tierName = item.tierId ? cat?.tiers?.find((ti) => ti.id === item.tierId)?.name : void 0;
-      const canView2 = this.seatViewEnabled() && item.objectType !== "ga" && !!this.controller.seatByLabel(item.label);
-      const viewBtn = canView2 ? `<button type="button" class="view" data-view-label="${item.label}" aria-label="${t2("picker.viewFromSeat", { label: item.label })}"><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></button>` : "";
+      const heldSeat = item.objectType !== "ga" ? this.controller.seatByLabel(item.label) : null;
+      const canView2 = this.seatViewEnabled() && !!heldSeat;
       parts.push(
-        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><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></span><div class="sl-chip-main"><b>${item.label}</b><div class="sl-chip-sub"><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span>${viewBtn}</div></div><span class="amt">${this.money(item.unitPrice * (item.quantity ?? 1))}</span><button type="button" class="rm" aria-label="Remove held ticket ${item.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>`
+        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"${heldSeat ? ` data-locate="${heldSeat.id}"` : ""}><div class="sl-chip-main">` + idGrid(heldSeat?.id ?? null, item.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><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></span><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="amt">${this.money(this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1))}</span></div></div>` + iconRail(`Remove held ticket ${item.label}`, canView2 ? item.label : null) + `</div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
@@ -2561,16 +3054,15 @@ var SeatPicker = class _SeatPicker {
       const itemKey = `seat:${s.id}`;
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
-      const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(ti.price)}</option>`).join("") + `</select>` : "";
-      const viewBtn = canView ? `<button type="button" class="view" data-view-label="${s.label}" aria-label="${t2("picker.viewFromSeat", { label: s.label })}"><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></button>` : "";
+      const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(this.paidPrice(s.categoryKey, ti.id, ti.price))}</option>`).join("") + `</select>` : "";
       parts.push(
-        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><div class="sl-chip-main"><b>${s.label}</b><div class="sl-chip-sub"><span class="cat">${cat?.label ?? s.categoryKey}</span>${tierSelect}${viewBtn}</div></div><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>`
+        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price))}</span></div></div>` + iconRail(`Remove ${s.label}`, canView ? s.label : null) + `</div>`
       );
     }
     for (const area of gaAreas) {
       const qty = this.gaQty.get(area.id) ?? 0;
       parts.push(
-        `<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>`
+        `<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(this.paidPrice(area.categoryKey, null, 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>`
       );
     }
     this.els.tray.innerHTML = parts.join("");
@@ -2610,7 +3102,7 @@ var SeatPicker = class _SeatPicker {
           return;
         }
         const id = chip.dataset.seat;
-        const label = chip.querySelector("b")?.textContent ?? "Seat";
+        const label = this.controller.getSelection().find((sel) => sel.id === id)?.label ?? "Seat";
         const remove = () => {
           this.controller.deselect([id]);
           this.toast(`${label} removed.`, "neutral", {
@@ -2641,6 +3133,11 @@ var SeatPicker = class _SeatPicker {
         if (seat) this.openSeatView(seat);
       });
     });
+    this.els.tray.querySelectorAll(".sl-chip[data-locate]").forEach((chip) => {
+      const locate = () => this.controller.flashSeat(chip.dataset.locate, this.cssVar("--sl-accent") || "#f4b740");
+      chip.addEventListener("mouseenter", locate);
+      chip.addEventListener("focusin", locate);
+    });
     this.els.tray.querySelectorAll(".sl-ga button").forEach((btn) => {
       btn.addEventListener("click", () => {
         const areaEl = btn.closest(".sl-ga");
@@ -2653,12 +3150,17 @@ var SeatPicker = class _SeatPicker {
         this.syncTray();
       });
     });
+    if (this.salesClosed) {
+      this.els.tray.querySelectorAll(".sl-ba-go,[data-ba],[data-ba-cat],[data-ba-replace],.sl-ga button").forEach((el) => {
+        el.disabled = true;
+      });
+    }
     const gaTotal = this.pendingGATotal(gaAreas);
     const gaCount = this.pendingGACount();
-    const heldTotal = heldItems.reduce((sum, item) => sum + item.unitPrice * (item.quantity ?? 1), 0);
+    const heldTotal = heldItems.reduce((sum, item) => sum + this.paidPrice(item.categoryKey, item.tierId, 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 total = freshSeats.reduce((sum, s) => sum + this.paidPrice(s.categoryKey, s.tierId ?? null, s.price), 0) + gaTotal + heldTotal;
     const count = freshSeats.length + gaCount + heldCount;
     const pendingCount = this.pendingSelectionCount();
     const previousCount = this.lastTrayCount;
@@ -2754,6 +3256,7 @@ var SeatPicker = class _SeatPicker {
     }
   }
   async handleCta() {
+    if (this.salesClosed) return;
     if (this.totalTicketCount() > this.maxTickets) {
       this.toast(`Remove tickets until your order has ${this.maxTickets} or fewer.`, "warning");
       return;
@@ -2797,6 +3300,7 @@ var SeatPicker = class _SeatPicker {
       this.opts.onError?.(err);
       const problem = err;
       const labels = (problem.conflicts ?? []).map((conflict) => conflict.label).filter(Boolean).slice(0, 3);
+      if (problem.reason === "event_closed") this.setSalesClosed(true);
       const message = problem.reason === "event_closed" ? "Seat sales have closed for this event." : labels.length ? `${labels.join(", ")} ${labels.length === 1 ? "is" : "are"} no longer available. Choose another ${labels.length === 1 ? "seat" : "group"}.` : "One or more seats were just taken. Please pick again.";
       this.toast(message, "error");
       this.setCtaPhase("idle");
@@ -2905,7 +3409,7 @@ var SeatPicker = class _SeatPicker {
       objectType: it.objectType,
       categoryKey: it.categoryKey,
       tierId: it.tierId,
-      unitPrice: it.unitPrice,
+      unitPrice: this.paidPrice(it.categoryKey, it.tierId, it.unitPrice),
       currency: it.currency ?? this.currency,
       quantity: it.quantity ?? 1
     }));
@@ -2958,19 +3462,37 @@ var SeatPicker = class _SeatPicker {
     this.tipEl.style.left = `${Math.max(8, x)}px`;
     this.tipEl.style.top = `${Math.max(8, y)}px`;
   }
+  /**
+   * Row label without the redundant section prefix. Charts commonly name row
+   * objects "104-A" while the Section column already shows "104" — so the Row
+   * cell repeats the section and, in the compact hover card, truncates to
+   * "10…". Strip a leading "<section><sep>" so Row reads a clean "A". Only when
+   * the prefix is exact (won't touch "1040-A" under section "104"); otherwise
+   * the label is shown verbatim.
+   */
+  rowShort(details) {
+    const row = details?.rowLabel;
+    const sec = details?.sectionLabel;
+    if (!row || !sec) return row;
+    for (const sep of ["-", " ", "\xB7", "/", "_"]) {
+      const prefix = `${sec}${sep}`;
+      if (row.startsWith(prefix) && row.length > prefix.length) return row.slice(prefix.length);
+    }
+    return row;
+  }
   updateTooltip(details) {
     if (!this.tipEl) return;
     if (!details) {
       this.tipEl.style.display = "none";
       return;
     }
-    const statusLine = details.status === "free" ? "" : `<div style="margin-top:5px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
-    const location = [
-      details.sectionLabel ? `Section ${details.sectionLabel}` : "",
-      details.rowLabel ? `Row ${details.rowLabel}` : "",
-      details.seatNumber ? `Seat ${details.seatNumber}` : details.label
-    ].filter(Boolean).join(" \xB7 ");
-    this.tipEl.innerHTML = `<div style="font-weight:800;font-size:13px">${location}</div><div style="display:flex;align-items:center;gap:6px;margin-top:4px"><span style="width:9px;height:9px;border-radius:50%;flex:none;background:${details.categoryColor}"></span><span style="opacity:.75">${details.categoryLabel}</span><span style="margin-left:auto;font-weight:800">${this.money(details.price)}</span></div>` + statusLine;
+    const esc2 = (v) => String(v ?? "\u2014").replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
+    const price = this.money(this.paidPrice(details.categoryKey, details.tierId ?? null, details.price));
+    const hasLoc = details.sectionLabel || details.rowLabel || details.seatNumber;
+    const grid = hasLoc ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Row</span><span class="sl-tip-val">${esc2(this.rowShort(details))}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.seatNumber ?? details.label)}</span></div></div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.label)}</span></div></div>`;
+    const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
+    this.tipEl.style.setProperty("--sl-cat", details.categoryColor);
+    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc2(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -2991,7 +3513,7 @@ var SeatPicker = class _SeatPicker {
     return this.removeHeldLabel(label);
   }
   async bestAvailable(qty, categoryKey) {
-    if (this.bestAvailableBusy) return null;
+    if (this.salesClosed || this.bestAvailableBusy) return null;
     qty = Math.max(1, Math.min(this.maxTickets, Math.floor(qty)));
     if (this.confirmSeat) this.cancelConfirm();
     this.bestAvailableConfirm = false;
@@ -3071,7 +3593,10 @@ var SeatPicker = class _SeatPicker {
     this.motionTimers.clear();
     this.ro?.disconnect();
     this.ro = null;
+    if (this.framedFs) this.setFramedFs(false);
     if (this.escHandler) document.removeEventListener("keydown", this.escHandler);
+    if (this.fsChangeHandler) document.removeEventListener("fullscreenchange", this.fsChangeHandler);
+    if (this.fsEscHandler) window.removeEventListener("keydown", this.fsEscHandler);
     this.controller.destroy();
     this.root?.remove();
     this.root = null;
@@ -3083,6 +3608,92 @@ var SeatPicker = class _SeatPicker {
   }
 };
 
+// src/attachPickerFrame.ts
+function attachPickerFrame(iframe, opts = {}) {
+  let expectedOrigin = opts.origin ?? "";
+  if (!expectedOrigin) {
+    try {
+      expectedOrigin = new URL(iframe.src, window.location.href).origin;
+    } catch {
+      expectedOrigin = "";
+    }
+  }
+  let pinned = false;
+  let frameStyleBeforeFs = null;
+  let docOverflowBeforeFs = null;
+  let bodyOverflowBeforeFs = null;
+  let lastAutoHeight = "";
+  let keyHandler = null;
+  const pin = () => {
+    if (pinned) return;
+    pinned = true;
+    frameStyleBeforeFs = iframe.getAttribute("style");
+    Object.assign(iframe.style, {
+      position: "fixed",
+      inset: "0",
+      width: "100vw",
+      height: "100vh",
+      margin: "0",
+      border: "0",
+      zIndex: "2147483000",
+      background: "#101625"
+    });
+    const docEl = document.documentElement;
+    docOverflowBeforeFs = docEl.style.overflow;
+    docEl.style.overflow = "hidden";
+    if (document.body) {
+      bodyOverflowBeforeFs = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+    }
+    keyHandler = (event) => {
+      if (event.key === "Escape") unpin();
+    };
+    window.addEventListener("keydown", keyHandler);
+  };
+  const unpin = () => {
+    if (!pinned) return;
+    pinned = false;
+    if (frameStyleBeforeFs === null) iframe.removeAttribute("style");
+    else iframe.setAttribute("style", frameStyleBeforeFs);
+    frameStyleBeforeFs = null;
+    if (lastAutoHeight) iframe.style.height = lastAutoHeight;
+    if (docOverflowBeforeFs !== null) {
+      document.documentElement.style.overflow = docOverflowBeforeFs;
+      docOverflowBeforeFs = null;
+    }
+    if (bodyOverflowBeforeFs !== null && document.body) {
+      document.body.style.overflow = bodyOverflowBeforeFs;
+      bodyOverflowBeforeFs = null;
+    }
+    if (keyHandler) {
+      window.removeEventListener("keydown", keyHandler);
+      keyHandler = null;
+    }
+  };
+  const onMessage = (event) => {
+    if (event.source !== iframe.contentWindow) return;
+    if (expectedOrigin && event.origin !== expectedOrigin) return;
+    if (!event.data || typeof event.data !== "object") return;
+    const data = event.data;
+    if (data.type === "seatlayer:height") {
+      if (typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
+        lastAutoHeight = `${Math.round(data.px)}px`;
+        if (!pinned) iframe.style.height = lastAutoHeight;
+      }
+      return;
+    }
+    if (data.type === "seatlayer:fullscreen") {
+      if (data.on === true) pin();
+      else if (data.on === false) unpin();
+    }
+  };
+  window.addEventListener("message", onMessage);
+  return () => {
+    window.removeEventListener("message", onMessage);
+    unpin();
+  };
+}
+
 // src/SeatManager.ts
 import {
   SeatmapRenderer,
@@ -3169,6 +3780,21 @@ var ManageApi = class {
   setHoldTtl(key, holdTtlMs) {
     return this.auth(`/v1/events/${encodeURIComponent(key)}/hold-ttl`, { method: "POST", body: { holdTtlMs } });
   }
+  // ---- availability windows (token) ----
+  /** The organizer's current per section/zone availability windows (needs
+   *  `event:view`). Ids absent from `rules` are open / on sale. */
+  availability(key) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/availability`);
+  }
+  /** Replace the availability windows for a set of section/zone ids (needs
+   *  `event:block`). Ids absent from `rules` become open / on sale; a zone rule
+   *  cascades to its sections. The worker derives each id's seat labels, so
+   *  `labels` on the sent rules is best-effort. Resolves with the authoritative
+   *  effective `hidden` set (a due rule may fire at once) and the server-cleaned
+   *  `rules` map (fired timed/threshold windows dropped). */
+  setAvailability(key, rules) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/availability`, { method: "POST", body: { rules } });
+  }
   // ---- reports (token) ----
   report(key) {
     return this.auth(`/v1/events/${encodeURIComponent(key)}/report`);
@@ -3196,6 +3822,27 @@ var ManageApi = class {
 };
 
 // src/SeatManager.ts
+function availabilityModeOf(rule) {
+  return rule ? rule.mode : "open";
+}
+function availabilityRuleForMode(mode, seatLabels, prev) {
+  switch (mode) {
+    case "open":
+      return null;
+    case "hidden":
+      return { mode: "hidden", labels: seatLabels };
+    case "closed":
+      return { mode: "closed", labels: seatLabels };
+    case "timed":
+      return { mode: "timed", revealAt: prev?.revealAt ?? Date.now() + 36e5, labels: seatLabels };
+    case "threshold":
+      return { mode: "threshold", thresholdPct: prev?.thresholdPct ?? 80, labels: seatLabels };
+  }
+}
+function toLocalInput(ms) {
+  const d = new Date(ms - (/* @__PURE__ */ new Date()).getTimezoneOffset() * 6e4);
+  return d.toISOString().slice(0, 16);
+}
 function resolveContainer4(container) {
   if (typeof container === "string") {
     const el = document.querySelector(container);
@@ -3384,6 +4031,32 @@ var CSS2 = `
 .slm-momentumhelp[hidden]{display:none}.slm-momentumscale{display:flex;align-items:center;gap:7px;color:var(--slm-muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}
 .slm-momentumgradient{height:6px;min-width:64px;flex:1;border-radius:999px;background:linear-gradient(90deg,#f4b740,#ef4444)}
 .slm-momentumcopy{margin-top:7px;color:var(--slm-muted);font-size:11px;line-height:1.45}
+/* sections: availability windows */
+.slm-availlist{display:flex;flex-direction:column;gap:8px;margin:2px 0 12px}
+.slm-availrow{padding:10px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface);transition:border-color .15s ease,opacity .15s ease}
+.slm-availrow.zone{background:color-mix(in srgb,var(--slm-surface) 82%,#000)}
+.slm-availrow.hidden{opacity:.62}.slm-availrow.closed{opacity:.82}
+.slm-availhead{display:flex;align-items:center;gap:8px}
+.slm-availlabel{display:flex;align-items:center;gap:5px;flex:1;min-width:0;font-size:12.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.slm-availcaret{flex:none;color:var(--slm-muted);font-size:10px}
+.slm-availcount{flex:none;font-size:11px;font-weight:700;color:var(--slm-muted);font-variant-numeric:tabular-nums}
+.slm-availbadge{flex:none;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:999px}
+.slm-availbadge.hidden{background:rgba(139,148,172,.18);color:#c2c9d8}
+.slm-availbadge.closed{background:rgba(244,183,64,.16);color:#f7ca6b}
+.slm-availselwrap{position:relative;flex:none;display:inline-flex}
+.slm-availmode{width:auto;max-width:190px;padding:6px 8px;font-size:11.5px;font-weight:700;cursor:pointer}
+.slm-availmode.on{border-color:var(--slm-accent);color:var(--slm-text)}
+.slm-availmode:disabled{opacity:.55;cursor:progress}
+.slm-availfollows{flex:none;padding:5px 10px;border:1px solid var(--slm-line);border-radius:7px;background:var(--slm-surface);color:var(--slm-muted);font-size:11px;font-weight:600;white-space:nowrap}
+.slm-availdetail{display:flex;align-items:center;gap:8px;margin-top:9px}
+.slm-availdetail .slm-input{flex:1}
+.slm-availpct{max-width:74px;flex:none!important}
+.slm-availpctlabel{font-size:11px;color:var(--slm-muted);font-weight:600;white-space:nowrap}
+.slm-availsummary{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--slm-line);border-radius:9px;color:var(--slm-muted);font-size:12.5px}
+.slm-availdot{width:9px;height:9px;border-radius:50%;flex:none;background:#22a06b}.slm-availdot.warn{background:#f4b740}
+.slm-availcallout{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid rgba(244,183,64,.45);border-radius:9px;background:rgba(244,183,64,.1)}
+.slm-availstar{flex:none;margin-top:1px;color:#f4b740;font-size:13px;line-height:1}
+.slm-availcallout p{font-size:11.5px;line-height:1.55;color:#f4d58a}.slm-availcallout b{color:#ffe4a3;font-weight:800}
 .slm-inspect-card{padding:16px;border:1px solid var(--slm-line);border-radius:12px;background:var(--slm-surface)}
 .slm-inspect-label{font-size:24px;font-weight:850;letter-spacing:-.02em;line-height:1.1}
 .slm-inspect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;margin-top:18px}
@@ -3484,6 +4157,13 @@ var SeatManager = class {
     this.tokenRefreshInFlight = false;
     this.sectionByObject = /* @__PURE__ */ new Map();
     this.sectionLabelById = /* @__PURE__ */ new Map();
+    this.sectionsBase = null;
+    // Sections mode (availability windows): organizer rules + the live effective
+    // hidden/closed sets from the snapshot + WS (a timed/threshold rule fires DO-side).
+    this.availabilityRules = {};
+    this.effectiveHidden = /* @__PURE__ */ new Set();
+    this.effectiveClosed = /* @__PURE__ */ new Set();
+    this.availabilitySaving = false;
     this.lastSyncedAt = null;
     this.blockedQuery = "";
     this.blockedSection = "";
@@ -3502,6 +4182,7 @@ var SeatManager = class {
       if (key === "m") this.setMode("view");
       else if (key === "i") this.setMode("inspect");
       else if (key === "b") this.setMode("block");
+      else if (key === "s") this.setMode("sections");
       else if (key === "f") this.toggleFullscreen();
       else return;
       event.preventDefault();
@@ -3545,7 +4226,8 @@ var SeatManager = class {
       this.buildSectionOptions();
       const [, controlRoom] = await Promise.all([
         this.resnapshot(),
-        this.refreshControlRoom().catch((err) => this.opts.onError?.(err))
+        this.refreshControlRoom().catch((err) => this.opts.onError?.(err)),
+        this.refreshAvailability()
       ]);
       if (controlRoom?.activity) this.seedFeed(controlRoom.activity);
       else this.api.log(this.key, { limit: 24 }).then((page) => this.seedFeed(page.entries)).catch(() => {
@@ -3570,6 +4252,7 @@ var SeatManager = class {
     if (changed) this.renderer?.clearSelection();
     this.paintModeTabs();
     this.paintRail();
+    this.applySectionCanvasTreatment();
     if (changed) this.opts.onModeChange?.(mode);
   }
   /** Toggle the normalized sales-velocity outline overlay without changing seat colors. */
@@ -3861,6 +4544,7 @@ var SeatManager = class {
       this.attempt = 0;
       this.setLive(true);
       void this.resnapshot().then(() => this.scheduleRevenueRefresh(0));
+      void this.refreshAvailability();
     };
     ws.onmessage = (e) => this.onMessage(e);
     ws.onclose = () => {
@@ -3892,6 +4576,9 @@ var SeatManager = class {
     }
     if (!msg || typeof msg !== "object") return;
     const m = msg;
+    if (Array.isArray(m.hidden) || Array.isArray(m.closed)) {
+      this.updateEffectiveAvailability(m.hidden, m.closed);
+    }
     if (m.type === "presence") {
       if (this.controlRoomSnapshot && typeof m.shoppingSessions === "number" && typeof m.activeHolds === "number") {
         this.controlRoomSnapshot = {
@@ -3943,6 +4630,7 @@ var SeatManager = class {
     try {
       const objs = await this.api.objects(this.key);
       this.applySnapshot(objs.seats);
+      this.updateEffectiveAvailability(objs.hidden, objs.closed);
     } catch {
     }
   }
@@ -4254,6 +4942,7 @@ var SeatManager = class {
           <button class="slm-mode" role="tab" data-mode="view" title="Monitor (M)" aria-keyshortcuts="M">Monitor</button>
           <button class="slm-mode" role="tab" data-mode="inspect" title="Inspect (I)" aria-keyshortcuts="I">Inspect</button>
           <button class="slm-mode" role="tab" data-mode="block" title="Block (B)" aria-keyshortcuts="B">Block</button>
+          <button class="slm-mode" role="tab" data-mode="sections" title="Sections (S)" aria-keyshortcuts="S">Sections</button>
         </div>
         <span class="slm-live"><span class="slm-live-dot"></span><span data-ref="livetext">CONNECTING</span></span>
         <div class="slm-bar-actions">
@@ -4320,6 +5009,7 @@ var SeatManager = class {
     if (!this.doc) return;
     try {
       const secs = computeSections(this.doc);
+      this.sectionsBase = secs;
       this.sectionOptions = [];
       this.sectionByObject = new Map(secs.objectToSection);
       this.sectionLabelById.clear();
@@ -4445,6 +5135,7 @@ var SeatManager = class {
   paintRail() {
     if (this.mode === "view") this.renderViewRail();
     else if (this.mode === "inspect") this.renderInspectRail(this.getSelection());
+    else if (this.mode === "sections") this.renderSectionsRail();
     else this.renderBlockRail();
     this.updateZoomHint();
   }
@@ -4567,6 +5258,259 @@ var SeatManager = class {
         </div>
       </div>`;
   }
+  // ---- sections: availability windows --------------------------------------
+  /** Pull the organizer's availability rules (event:view). Called on load and on
+   *  every WS (re)connect, mirroring how the other panels re-hydrate. `closed` is
+   *  deterministic from the rules; `hidden` (which folds in already-due timed /
+   *  threshold windows) comes from the snapshot + WS effective set. */
+  async refreshAvailability() {
+    try {
+      const res = await this.withAuthRetry(() => this.api.availability(this.key));
+      this.availabilityRules = res.rules ?? {};
+      this.effectiveClosed = new Set(this.closedIdsFromRules(this.availabilityRules));
+      if (this.mode === "sections") this.renderSectionsRail();
+      this.applySectionCanvasTreatment();
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+  }
+  /** Run a token-authed op; on a 401 re-mint via onTokenRefresh and retry once. */
+  async withAuthRetry(op) {
+    try {
+      return await op();
+    } catch (err) {
+      if (err instanceof ManageApiError && err.status === 401 && this.opts.onTokenRefresh && !this.tokenRefreshInFlight) {
+        await this.rotateToken();
+        return op();
+      }
+      throw err;
+    }
+  }
+  closedIdsFromRules(rules) {
+    return Object.entries(rules).filter(([, r]) => r.mode === "closed").map(([id]) => id);
+  }
+  /** Adopt a new effective hidden/closed set (from a snapshot or WS broadcast) and
+   *  repaint the rail + canvas when it actually moves. */
+  updateEffectiveAvailability(hidden, closed) {
+    let changed = false;
+    if (Array.isArray(hidden)) {
+      this.effectiveHidden = new Set(hidden.filter((x) => typeof x === "string"));
+      changed = true;
+    }
+    if (Array.isArray(closed)) {
+      this.effectiveClosed = new Set(closed.filter((x) => typeof x === "string"));
+      changed = true;
+    }
+    if (!changed) return;
+    if (this.mode === "sections") this.renderSectionsRail();
+    this.applySectionCanvasTreatment();
+  }
+  /** Canvas read of the availability state: dim hidden sections to a whisper,
+   *  half-light closed sections, leave open sections normal. Only in Sections mode;
+   *  cleared in every other tool. */
+  applySectionCanvasTreatment() {
+    if (!this.renderer) return;
+    if (this.mode === "sections") {
+      this.renderer.setDimmedSections([...this.effectiveHidden]);
+      this.renderer.setClosedSections([...this.effectiveClosed]);
+    } else {
+      this.renderer.setDimmedSections(null);
+      this.renderer.setClosedSections(null);
+    }
+  }
+  /** Zone-grouped render tree: each zone header then its sections (which follow the
+   *  zone window), then loose sections + the ungrouped bucket. Effective hidden /
+   *  closed come from the live sets, rules from the organizer map. */
+  buildSectionRows() {
+    const base = this.sectionsBase;
+    if (!base) return { rows: [], hiddenSections: 0, closedSections: 0 };
+    const zones = this.doc?.zones ?? [];
+    const byZone = /* @__PURE__ */ new Map();
+    const loose = [];
+    for (const s of base.sections) {
+      if (s.zone && zones.some((z) => z.id === s.zone)) {
+        const list = byZone.get(s.zone) ?? [];
+        list.push(s);
+        byZone.set(s.zone, list);
+      } else {
+        loose.push(s);
+      }
+    }
+    const rows = [];
+    let hiddenSections = 0;
+    let closedSections = 0;
+    const push = (kind, node, zoneRuled, parentClosed = false) => {
+      const rule = this.availabilityRules[node.id] ?? null;
+      const effClosed = this.effectiveClosed.has(node.id) || parentClosed;
+      const effHidden = this.effectiveHidden.has(node.id) || zoneRuled && !effClosed;
+      if (kind === "section" && effHidden) hiddenSections += 1;
+      if (kind === "section" && effClosed) closedSections += 1;
+      rows.push({
+        kind,
+        id: node.id,
+        label: node.label,
+        seatCount: node.seatCount,
+        seatLabels: node.seatLabels,
+        rule,
+        hidden: effHidden,
+        closed: effClosed,
+        followsZone: kind === "section" && zoneRuled
+      });
+    };
+    for (const z of zones) {
+      const secs = byZone.get(z.id);
+      if (!secs || !secs.length) continue;
+      const zoneNode = {
+        id: z.id,
+        label: z.label || "Zone",
+        seatCount: secs.reduce((sum, s) => sum + s.seatCount, 0),
+        seatLabels: secs.flatMap((s) => s.seatLabels)
+      };
+      const zoneRuled = !!this.availabilityRules[z.id];
+      const zoneClosed = this.availabilityRules[z.id]?.mode === "closed";
+      push("zone", zoneNode, false);
+      for (const s of secs) push("section", s, zoneRuled, zoneClosed);
+    }
+    for (const s of loose) push("section", s, false);
+    if (base.ungrouped) {
+      const u = base.ungrouped;
+      push("section", { id: UNGROUPED_ID, label: u.label, seatCount: u.seatCount, seatLabels: u.seatLabels }, false);
+    }
+    return { rows, hiddenSections, closedSections };
+  }
+  renderSectionsRail() {
+    const { rows, hiddenSections, closedSections } = this.buildSectionRows();
+    if (!rows.length) {
+      this.els.rail.innerHTML = `
+        <p class="slm-eyebrow">Availability windows</p>
+        <p class="slm-hint">Draw sections or zones in the designer to schedule availability per area. This chart has none yet.</p>
+        <div class="slm-empty">No sections on this chart.</div>`;
+      return;
+    }
+    const parts = [];
+    if (hiddenSections) parts.push(`${hiddenSections} hidden`);
+    if (closedSections) parts.push(`${closedSections} closed`);
+    const summary = parts.length ? parts.join(" \xB7 ") : "All sections open and on sale";
+    const warn = hiddenSections > 0 || closedSections > 0;
+    this.els.rail.innerHTML = `
+      <p class="slm-eyebrow">Availability windows</p>
+      <p class="slm-hint">Control when each zone or section goes on sale. Keep it hidden, reveal it at a set time, or <b>auto-reveal once the rest sells past a threshold</b>. Hidden seats vanish for buyers; closed seats stay on the map (flat grey) but can't be bought.</p>
+      <div class="slm-availlist" data-ref="availlist">${rows.map((row) => this.sectionRowHtml(row)).join("")}</div>
+      <div class="slm-availsummary">
+        <span class="slm-availdot${warn ? " warn" : ""}"></span>
+        <span>${esc(summary)}</span>
+      </div>
+      <div class="slm-availcallout">
+        <span class="slm-availstar" aria-hidden="true">\u2726</span>
+        <p><b>Auto-reveal at % sold</b> is our differentiator \u2014 demand-triggered release: the balcony opens itself the moment the stalls hit the threshold. Neither seats.io nor Ticketmaster ships this.</p>
+      </div>`;
+    this.wireSectionRail();
+    this.applySectionCanvasTreatment();
+  }
+  sectionRowHtml(row) {
+    const mode = availabilityModeOf(row.rule);
+    const cls = `slm-availrow${row.kind === "zone" ? " zone" : ""}${row.hidden ? " hidden" : ""}${row.closed ? " closed" : ""}`;
+    const disabled = this.availabilitySaving ? " disabled" : "";
+    const option = (value, text) => `<option value="${value}"${mode === value ? " selected" : ""}>${text}</option>`;
+    const control = row.followsZone ? '<span class="slm-availfollows">Follows zone</span>' : `<span class="slm-availselwrap">
+          <select class="slm-select slm-availmode${mode !== "open" ? " on" : ""}" data-avail-id="${esc(row.id)}"${disabled} aria-label="Availability for ${esc(row.label)}">
+            ${option("open", "Open \u2014 on sale")}
+            ${option("closed", "Closed \u2014 visible, not on sale")}
+            ${option("hidden", "Hidden \u2014 off the buyer map")}
+            ${option("timed", "Reveal at a time")}
+            ${option("threshold", "Auto-reveal at % sold")}
+          </select>
+        </span>`;
+    let detail = "";
+    if (!row.followsZone && mode === "timed") {
+      const value = row.rule?.revealAt ? esc(toLocalInput(row.rule.revealAt)) : "";
+      detail = `<div class="slm-availdetail">
+        <input type="datetime-local" class="slm-input" data-avail-reveal="${esc(row.id)}" value="${value}"${disabled} aria-label="Reveal time for ${esc(row.label)}" />
+      </div>`;
+    } else if (!row.followsZone && mode === "threshold") {
+      const pct = row.rule?.thresholdPct ?? 80;
+      detail = `<div class="slm-availdetail">
+        <span class="slm-availpctlabel">Reveal at</span>
+        <input type="number" min="1" max="100" class="slm-input slm-availpct" data-avail-pct="${esc(row.id)}" value="${esc(pct)}"${disabled} aria-label="Percent sold to reveal ${esc(row.label)}" />
+        <span class="slm-availpctlabel">% sold</span>
+      </div>`;
+    }
+    const badge = row.closed ? '<span class="slm-availbadge closed">Closed</span>' : row.hidden ? '<span class="slm-availbadge hidden">Hidden</span>' : "";
+    const caret = row.kind === "zone" ? `<span class="slm-availcaret" aria-hidden="true">${row.hidden ? "\u25B8" : "\u25BE"}</span>` : "";
+    return `<div class="${cls}">
+      <div class="slm-availhead">
+        <span class="slm-availlabel">${caret}${esc(row.label)}</span>
+        ${badge}
+        <span class="slm-availcount">${row.seatCount.toLocaleString()}</span>
+        ${control}
+      </div>
+      ${detail}
+    </div>`;
+  }
+  wireSectionRail() {
+    const rail = this.els.rail;
+    if (!rail) return;
+    rail.querySelectorAll("[data-avail-id]").forEach((select) => {
+      select.addEventListener("change", () => this.setSectionMode(select.dataset.availId, select.value));
+    });
+    rail.querySelectorAll("[data-avail-reveal]").forEach((input) => {
+      input.addEventListener("change", () => {
+        const ms = new Date(input.value).getTime();
+        if (Number.isFinite(ms)) this.setSectionRulePatch(input.dataset.availReveal, { revealAt: ms });
+      });
+    });
+    rail.querySelectorAll("[data-avail-pct]").forEach((input) => {
+      input.addEventListener("change", () => {
+        const pct = Math.max(1, Math.min(100, Number(input.value) || 0));
+        this.setSectionRulePatch(input.dataset.availPct, { thresholdPct: pct });
+      });
+    });
+  }
+  /** Change one row's availability mode. A zone rule subsumes its child section
+   *  rules, so those are dropped from the map (the zone window is the truth). */
+  setSectionMode(id, mode) {
+    const row = this.buildSectionRows().rows.find((r) => r.id === id);
+    const seatLabels = row?.seatLabels ?? this.availabilityRules[id]?.labels ?? [];
+    const next = { ...this.availabilityRules };
+    const rule = availabilityRuleForMode(mode, seatLabels, this.availabilityRules[id]);
+    if (rule) next[id] = rule;
+    else delete next[id];
+    if (row?.kind === "zone" && this.sectionsBase) {
+      for (const s of this.sectionsBase.sections) if (s.zone === id) delete next[s.id];
+    }
+    void this.persistAvailability(next);
+  }
+  /** Edit a timed reveal time / threshold percent on an existing row rule. */
+  setSectionRulePatch(id, patch) {
+    const cur = this.availabilityRules[id];
+    if (!cur) return;
+    const row = this.buildSectionRows().rows.find((r) => r.id === id);
+    const labels = row?.seatLabels ?? cur.labels ?? [];
+    void this.persistAvailability({ ...this.availabilityRules, [id]: { ...cur, ...patch, labels } });
+  }
+  /** Optimistically adopt the new rules, then reconcile with the server-cleaned
+   *  map + effective hidden/closed sets. Rolls back the rules on failure. */
+  async persistAvailability(next) {
+    const prev = this.availabilityRules;
+    this.availabilityRules = next;
+    this.availabilitySaving = true;
+    if (this.mode === "sections") this.renderSectionsRail();
+    try {
+      const res = await this.withAuthRetry(() => this.api.setAvailability(this.key, next));
+      this.availabilityRules = res.rules;
+      this.effectiveHidden = new Set(res.hidden);
+      this.effectiveClosed = new Set(this.closedIdsFromRules(res.rules));
+      this.availabilitySaving = false;
+      if (this.mode === "sections") this.renderSectionsRail();
+      this.applySectionCanvasTreatment();
+    } catch (err) {
+      this.availabilityRules = prev;
+      this.availabilitySaving = false;
+      if (this.mode === "sections") this.renderSectionsRail();
+      this.toastErr("Couldn't update availability. Try again.");
+      this.opts.onError?.(err);
+    }
+  }
   paintLegend(t3) {
     if (!this.els.legend) return;
     this.els.legend.innerHTML = LEGEND.map((l) => `<div class="slm-legrow"><span class="slm-legdot" style="background:${l.color}"></span>
@@ -4879,6 +5823,7 @@ export {
   ManageApiError,
   SeatManager,
   SeatPicker,
-  SeatingChart
+  SeatingChart,
+  attachPickerFrame
 };
 //# sourceMappingURL=index.js.map