@seatlayer/js 0.18.1 → 0.20.0

package/dist/index.cjs

@@ -26,7 +26,8 @@ __export(index_exports, {
   ManageApiError: () => ManageApiError,
   SeatManager: () => SeatManager,
   SeatPicker: () => SeatPicker,
-  SeatingChart: () => SeatingChart
+  SeatingChart: () => SeatingChart,
+  attachPickerFrame: () => attachPickerFrame
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -398,10 +399,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,
@@ -484,6 +505,7 @@ var EmbeddedDesigner = class {
   }
   destroy() {
     window.removeEventListener("message", this.handleMessage);
+    this.unpinFullscreen();
     this.clearTimeoutTimer();
     this.removeOverlay();
     this.restoreContainerStyle();
@@ -491,10 +513,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);
@@ -1394,6 +1474,10 @@ var SeatPicker = class _SeatPicker {
     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;
@@ -1497,24 +1581,98 @@ var SeatPicker = class _SeatPicker {
     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="${(0, import_core2.t)("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;
+    const active = !!document.fullscreenElement || this.fsFallback || this.framedFs;
     if (!active) {
       if (root.requestFullscreen) {
-        root.requestFullscreen().catch(() => this.setFsFallback(true));
+        root.requestFullscreen().catch(() => this.enterFsFallback());
       } else {
-        this.setFsFallback(true);
+        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;
@@ -1684,6 +1842,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;
@@ -1700,7 +1859,7 @@ var SeatPicker = class _SeatPicker {
     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.els.zfs?.setAttribute("aria-pressed", String(!!document.fullscreenElement || this.fsFallback || this.framedFs));
       requestAnimationFrame(() => this.controller.zoomToFit());
     };
     document.addEventListener("fullscreenchange", this.fsChangeHandler);
@@ -3458,6 +3617,7 @@ 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);
@@ -3472,6 +3632,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
 var import_core3 = require("@seatlayer/core");
 
@@ -3553,6 +3799,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`);
@@ -3580,6 +3841,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);
@@ -3768,6 +4050,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}
@@ -3868,6 +4176,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 = "";
@@ -3886,6 +4201,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();
@@ -3929,7 +4245,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(() => {
@@ -3954,6 +4271,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. */
@@ -4245,6 +4563,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 = () => {
@@ -4276,6 +4595,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 = {
@@ -4327,6 +4649,7 @@ var SeatManager = class {
     try {
       const objs = await this.api.objects(this.key);
       this.applySnapshot(objs.seats);
+      this.updateEffectiveAvailability(objs.hidden, objs.closed);
     } catch {
     }
   }
@@ -4638,6 +4961,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">
@@ -4704,6 +5028,7 @@ var SeatManager = class {
     if (!this.doc) return;
     try {
       const secs = (0, import_core3.computeSections)(this.doc);
+      this.sectionsBase = secs;
       this.sectionOptions = [];
       this.sectionByObject = new Map(secs.objectToSection);
       this.sectionLabelById.clear();
@@ -4829,6 +5154,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();
   }
@@ -4951,6 +5277,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: import_core3.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>
@@ -5264,6 +5843,7 @@ var SeatManager = class {
   ManageApiError,
   SeatManager,
   SeatPicker,
-  SeatingChart
+  SeatingChart,
+  attachPickerFrame
 });
 //# sourceMappingURL=index.cjs.map