@seatlayer/js 0.36.3 → 0.38.0

package/dist/index.js

@@ -1,11 +1,9 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk-HMLY7DHA.js";
 
 // src/SeatingChart.ts
 import {
@@ -120,6 +118,41 @@ var PubApi = class {
       body: { holdId, ...ttlMs ? { ttlMs } : {} }
     });
   }
+  /**
+   * Which gateways this event can actually take money through — the question
+   * `checkout: 'hosted'` has to answer BEFORE it shows a buyer a Pay button, so
+   * the answer is never discovered by failing a payment.
+   *
+   * Anonymous, and it discloses no account, key, mode or currency for a gateway
+   * that did not match.
+   */
+  paymentOptions(key) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/payment-options`);
+  }
+  /**
+   * Turn a live hold into an order and start a payment.
+   *
+   * The amount is NOT sent: the server recomputes it from the hold's own items,
+   * which is the only reason a browser cannot alter what it pays. Nor is the
+   * PROVIDER — the event row decides which gateway charges, and a `provider` in
+   * the body is checked rather than obeyed (409 `provider_mismatch`). Omitting
+   * it is the shape that cannot disagree.
+   */
+  startCheckout(key, input) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/checkout`, {
+      method: "POST",
+      body: input
+    });
+  }
+  /**
+   * Poll an order while its gateway webhook lands. The order id is an
+   * unguessable token the buyer already holds, so it acts as the capability —
+   * which is also why a buyer returning from a gateway page can be told what
+   * happened with nothing but the id in the return URL.
+   */
+  orderStatus(orderId) {
+    return this.request(`/pub/orders/${encodeURIComponent(orderId)}/status`);
+  }
   /**
    * Mint a one-use subscribe ticket for the next socket attempt (protocol doc
    * §3). The bearer travels here, over ordinary HTTPS where CORS and Origin
@@ -1673,7 +1706,8 @@ var EmbeddedDesigner = class {
   }
   buildSkeleton(overlay) {
     const style = document.createElement("style");
-    style.textContent = `
+    style.textContent = /* @sl-css */
+    `
 @media (prefers-reduced-motion: no-preference) {
   @keyframes seatlayer-designer-shimmer {
     0% { background-position: -320px 0; }
@@ -1799,7 +1833,6 @@ import {
   PickerController as PickerController2,
   ACCESSIBILITY_TYPES,
   expandChart,
-  generateSeatPanorama,
   generateSeatThumb,
   loadLocale as loadLocale2,
   setStringOverrides as setStringOverrides2,
@@ -1862,20 +1895,45 @@ function hasWebGL2() {
   }
   return _webgl2Cache;
 }
+function cdnChunkUrl(fileName) {
+  const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
+  if (!base) throw new Error(`seatlayer: cannot resolve the ${fileName} chunk URL`);
+  return new URL(`./${fileName}`, base).href;
+}
 async function loadVenue3d() {
   if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
-    const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
-    if (!base) throw new Error("seatlayer: cannot resolve the 3D view chunk URL");
-    const url = new URL("./seatlayer-view3d.mjs", base).href;
     return import(
       /* @vite-ignore */
-      url
+      cdnChunkUrl("seatlayer-view3d.mjs")
     );
   }
   return import("@seatlayer/core/view3d");
 }
+async function loadPanorama() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-panorama.mjs")
+    );
+  }
+  return import("@seatlayer/core");
+}
+async function loadHostedCheckout() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-checkout.mjs")
+    );
+  }
+  return import("./hostedCheckout-PLHKPT6W.js");
+}
+function paymentsOffReason(reason) {
+  return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
+}
 var STYLE_ID = "seatlayer-picker-style";
-var CSS = `
+var CSS = (
+  /* @sl-css */
+  `
 .sl-picker{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:420px;overflow:hidden;
   background:var(--sl-bg);color:var(--sl-text);font-family:var(--sl-font);border-radius:var(--sl-radius);
   --sl-r-sm:calc(var(--sl-radius) * .55);
@@ -2612,7 +2670,8 @@ var CSS = `
 .sl-modal-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(5,7,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
 .sl-modal-frame{width:min(1200px,100%);height:min(820px,100%);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
 @media(max-width:640px){.sl-modal-scrim{padding:0}.sl-modal-frame{width:100%;height:100%;border-radius:0}}
-`;
+`
+);
 function ensureStyle() {
   if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
@@ -2677,6 +2736,14 @@ var SeatPicker = class _SeatPicker {
     this.handedOff = false;
     /** Guards single onBooked + single success overlay per hold. */
     this.bookedShown = false;
+    /**
+     * In-flight or settled `payment-options` for this event, started at render in
+     * hosted mode. One request, kicked off while the buyer is still choosing, so
+     * pressing Pay does not wait on a lookup whose answer never changes mid-session.
+     */
+    this.paymentOptions = null;
+    /** The mounted payment card, while one is up. */
+    this.checkoutPanel = null;
     this.extendEl = null;
     this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
@@ -2791,6 +2858,12 @@ var SeatPicker = class _SeatPicker {
       onObjectUnavailable: (event) => this.opts.onSelectedObjectUnavailable?.(event)
     });
     this.api = options.transport ?? this.pubApi;
+    if (options.checkout === "hosted" && !this.pubApi) {
+      console.warn(
+        'seatlayer: checkout: "hosted" needs the widget\'s own transport \u2014 a custom `transport` owns its backend, so the picker is staying on onCheckout for this mount.'
+      );
+    }
+    this.checkoutMode = options.checkout === "hosted" && this.pubApi ? "hosted" : "handoff";
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new PickerController2({
@@ -3154,6 +3227,7 @@ var SeatPicker = class _SeatPicker {
     ensureStyle();
     await loadLocale2(this.opts.locale);
     if (this.opts.messages) setStringOverrides2(this.opts.messages);
+    if (this.checkoutMode === "hosted") this.paymentOptions = this.pubApi.paymentOptions(this.opts.event);
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
@@ -3451,8 +3525,40 @@ var SeatPicker = class _SeatPicker {
     if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
+    this.resumeHostedOrder();
     return this;
   }
+  /**
+   * A hosted gateway returned this buyer to a page that runs the widget, with
+   * `?order=…&status=…` in the URL. Pick the order up and finish the story.
+   *
+   * Only `success` resumes. `cancelled` means the buyer backed out at the
+   * gateway and their seats are still held — the map they are looking at IS the
+   * right screen, and opening a card to say "you cancelled" would be noise.
+   *
+   * The two parameters are then stripped with `replaceState`, because they are a
+   * one-shot instruction: leaving them in place would re-open the confirmation
+   * on every later navigation, and would carry an order id into browser history
+   * and any Referer this page later sends. `status` is only ever removed
+   * alongside an `order` we actually consumed, so a host page that uses a
+   * `status` parameter of its own keeps it.
+   */
+  resumeHostedOrder() {
+    if (this.checkoutMode !== "hosted" || typeof location === "undefined") return;
+    const params = new URLSearchParams(location.search);
+    const orderId = params.get("order");
+    if (!orderId) return;
+    const status = params.get("status");
+    params.delete("order");
+    params.delete("status");
+    try {
+      const query = params.toString();
+      history.replaceState(history.state, "", `${location.pathname}${query ? `?${query}` : ""}${location.hash}`);
+    } catch {
+    }
+    if (status !== "success") return;
+    void this.openCheckoutPanel({ kind: "resume", orderId });
+  }
   /**
    * Move layout-dependent chrome between its wide dock (map regions / zoom
    * column) and its narrow dock (the sheet's consolidated Filters row), and
@@ -4432,7 +4538,7 @@ var SeatPicker = class _SeatPicker {
     this.els.map.appendChild(el);
     this.confirmEl = el;
     this.reanchorConfirm();
-    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => this.openSeatView(seat));
+    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => void this.openSeatView(seat));
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         void this.view3dHandle?.flyToSeat(seat.id);
@@ -4503,10 +4609,13 @@ var SeatPicker = class _SeatPicker {
    * uploaded photo (seat.viewUrl) when present, else a panorama generated from
    * the chart geometry — the stage placed at this seat's true bearing + size.
    * Zero extra dependencies: an equirectangular image panned with `repeat-x`.
+   *
+   * Async only because the generator is a lazy chunk (see `loadPanorama`); an
+   * organizer photo needs no generator and never waits on it. The two callers
+   * are click handlers, so nothing observes the promise.
    */
-  openSeatView(seat) {
+  async openSeatView(seat) {
     if (!this.root || !this.seatViewEnabled()) return;
-    this.closeSeatView();
     const doc = this.controller.doc;
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc?.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc?.focalPoint ?? { x: 0, y: 0 };
@@ -4518,10 +4627,19 @@ var SeatPicker = class _SeatPicker {
       caption = t2("picker.panorama360");
       real = true;
     } else {
-      const pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      let pano2;
+      try {
+        const { generateSeatPanorama } = await loadPanorama();
+        pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      } catch (err) {
+        this.opts.onError?.(err);
+        return;
+      }
+      if (!this.root || !this.seatViewEnabled()) return;
       panoUrl = pano2.url;
       caption = t2("picker.illustrationCaption", { m: pano2.distanceM });
     }
+    this.closeSeatView();
     const el = document.createElement("div");
     el.className = "sl-view";
     el.setAttribute("role", "dialog");
@@ -4887,7 +5005,7 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelectorAll(".sl-chip .view[data-view-label]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const seat = this.controller.seatByLabel(btn.dataset.viewLabel);
-        if (seat) this.openSeatView(seat);
+        if (seat) void this.openSeatView(seat);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip[data-locate]").forEach((chip) => {
@@ -5030,7 +5148,7 @@ var SeatPicker = class _SeatPicker {
       const seats = this.hold.seats ?? committed;
       this.handedOff = true;
       this.setCtaPhase("checkout");
-      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
+      this.checkoutHandoff(this.hold, seats);
       return;
     }
     this.holdingLabels = new Set(committed.map((seat) => seat.label));
@@ -5059,7 +5177,7 @@ var SeatPicker = class _SeatPicker {
       this.flashHeldSeats(hold);
       this.setCtaPhase("checkout");
       this.emitHoldChange();
-      this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
+      this.checkoutHandoff(hold, hold.seats ?? chosenSeats);
     } catch (err) {
       this.opts.onError?.(err);
       const problem = err;
@@ -5164,6 +5282,109 @@ var SeatPicker = class _SeatPicker {
     this.bookedEl?.classList.add("on");
     this.opts.onBooked?.(handoff);
   }
+  /**
+   * The seats are held. Send the buyer wherever this picker's `checkout` option
+   * says they go.
+   *
+   * The default branch is the literal call that stood here before hosted
+   * checkout existed, unchanged, so nothing about an existing integration moves.
+   */
+  checkoutHandoff(hold, seats) {
+    if (this.checkoutMode === "hosted") {
+      void this.startHostedCheckout(hold, seats);
+      return;
+    }
+    this.opts.onCheckout?.(hold, seats, this.buildHandoff(hold));
+  }
+  /**
+   * Take the money ourselves, through the organizer's own gateway.
+   *
+   * Order of operations matters: ASK FIRST, load second. `payment-options` is
+   * already in flight from render, and its answer decides whether any payment
+   * code is fetched at all — an event that cannot charge never downloads the
+   * card that would have charged it.
+   *
+   * An empty list is not a failure and never dead-ends the buyer. It routes them
+   * to whatever the host has: `onCheckoutUnavailable` (with the server's reason,
+   * so the host can say the right one of three very different sentences), then
+   * `onCheckout` with the ordinary handoff. A host that supplied neither gets
+   * the widget's own honest card instead of a press that did nothing.
+   */
+  async startHostedCheckout(hold, seats) {
+    const handoff = this.buildHandoff(hold);
+    let options = null;
+    try {
+      options = await (this.paymentOptions ??= this.pubApi.paymentOptions(this.opts.event));
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+    if (this.destroyed) return;
+    const provider = options?.providers?.[0];
+    if (!provider) {
+      const reason = paymentsOffReason(options?.reason);
+      const handled = !!this.opts.onCheckoutUnavailable || !!this.opts.onCheckout;
+      this.opts.onCheckoutUnavailable?.({ reason, handoff });
+      this.opts.onCheckout?.(hold, seats, handoff);
+      if (!handled) {
+        void this.openCheckoutPanel({
+          kind: "unavailable",
+          reason,
+          seatCount: handoff.lineItems.reduce((sum, item) => sum + item.quantity, 0)
+        });
+      }
+      return;
+    }
+    await this.openCheckoutPanel({
+      kind: "pay",
+      provider,
+      order: {
+        holdId: handoff.holdId,
+        expiresAt: handoff.expiresAt,
+        currency: handoff.currency,
+        total: handoff.total,
+        labels: handoff.lineItems.map((item) => item.displayLabel ?? item.label)
+      }
+    });
+  }
+  /**
+   * Fetch the checkout chunk and put its card over the map.
+   *
+   * Every failure here lands the buyer back on a map with their seats still
+   * held, which is a place they can act from — a blocked chunk request must not
+   * leave them staring at a CTA that no longer does anything.
+   */
+  async openCheckoutPanel(state) {
+    let mountCheckout;
+    try {
+      ({ mountCheckout } = await loadHostedCheckout());
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Checkout could not be opened. Your seats are still held \u2014 please try again.", "error");
+      this.setCtaPhase("idle");
+      return;
+    }
+    if (this.destroyed || !this.root) return;
+    this.closeCheckoutPanel();
+    this.checkoutPanel = mountCheckout({
+      root: this.root,
+      state,
+      startSession: (input) => this.pubApi.startCheckout(this.opts.event, input),
+      orderStatus: (orderId) => this.pubApi.orderStatus(orderId),
+      onCancel: () => {
+        this.checkoutPanel = null;
+        if (!this.hold) this.setCtaPhase("idle");
+      },
+      onConfirmed: (order) => {
+        this.opts.onOrderConfirmed?.(order);
+        void this.controller.refresh();
+      },
+      onError: (err) => this.opts.onError?.(err)
+    });
+  }
+  closeCheckoutPanel() {
+    this.checkoutPanel?.destroy();
+    this.checkoutPanel = null;
+  }
   /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
   buildHandoff(hold) {
     const items = hold.items ?? [];
@@ -5398,7 +5619,7 @@ var SeatPicker = class _SeatPicker {
   }
   /** Build the view-from-seat panorama the cinematic dissolves into — reuses the
    *  exact input path as the 2D `openSeatView` (organizer photo, else generated). */
-  seatViewFor3d(seatId) {
+  async seatViewFor3d(seatId) {
     const seat = this.allSeats().find((s) => s.id === seatId);
     if (!seat) return null;
     if (seat.viewUrl) return { url: seat.viewUrl };
@@ -5407,6 +5628,7 @@ var SeatPicker = class _SeatPicker {
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc.focalPoint ?? { x: 0, y: 0 };
     try {
+      const { generateSeatPanorama } = await loadPanorama();
       return { url: generateSeatPanorama(seat, focal, this.allSeats()).url };
     } catch {
       return null;
@@ -5546,9 +5768,10 @@ var SeatPicker = class _SeatPicker {
         // in orbit instead of dissolving into an empty overlay.
         getSeatView: (id) => new Promise((resolve, reject) => {
           const run = () => {
-            const view = this.seatViewFor3d(id);
-            if (view) resolve(view);
-            else reject(new Error("seat_view_unavailable"));
+            void this.seatViewFor3d(id).then((view) => {
+              if (view) resolve(view);
+              else reject(new Error("seat_view_unavailable"));
+            });
           };
           const ric = globalThis.requestIdleCallback;
           if (typeof ric === "function") ric(run, { timeout: 1500 });
@@ -5826,6 +6049,7 @@ var SeatPicker = class _SeatPicker {
     this.closeConfirm();
     this.dismissTableDialog(false);
     this.closeSeatView();
+    this.closeCheckoutPanel();
     this.exit3d();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
@@ -6547,7 +6771,14 @@ var ManageApi = class {
 var POLL_MS = 1e4;
 var MAX_FLAGS = 8;
 var SEAT_LIST_PAGE = 300;
-var CHANNELS_CSS = `
+var PREVIEW_ELIGIBLE_FILL = "#6e7bff";
+var PREVIEW_ELIGIBLE_STROKE = "#b9c0ff";
+var PREVIEW_UNAVAILABLE_FILL = "#303846";
+var PREVIEW_UNAVAILABLE_STROKE = "#4b5669";
+var ALLOCATION_STROKE = "#101723";
+var CHANNELS_CSS = (
+  /* @sl-css */
+  `
 .slm{--slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;--slm-mo-ambient:2000ms;
   --slm-mo-out:cubic-bezier(.2,.8,.2,1);--slm-mo-in-out:cubic-bezier(.4,0,.2,1);--slm-mo-exit:cubic-bezier(.4,0,1,1);
   --slm-mo-spring:cubic-bezier(.34,1.3,.64,1)}
@@ -6560,6 +6791,8 @@ var CHANNELS_CSS = `
   background:rgba(14,16,23,.88);border:1px solid var(--slm-line);font-size:10px;font-weight:800;letter-spacing:.04em;
   transform:translate(-50%,-50%);white-space:nowrap}
 .slm-ch-flag .mk{width:14px;height:14px;border-radius:4px;display:grid;place-items:center;font-size:8.5px;font-weight:800;color:#0e1017}
+.slm-ch-section-target{position:absolute;pointer-events:auto;padding:0;border:0;border-radius:8px;background:transparent;cursor:zoom-in}
+.slm-ch-section-target:focus-visible{outline:2px solid var(--slm-accent);outline-offset:-3px;background:color-mix(in srgb,var(--slm-accent) 12%,transparent)}
 
 /* preview banner \u2014 raised with the organizer chrome dim, as one transition */
 .slm-ch-banner{position:absolute;left:50%;top:14px;z-index:6;display:flex;align-items:center;gap:9px;padding:8px 14px;
@@ -6579,7 +6812,7 @@ var CHANNELS_CSS = `
   transition:transform var(--slm-mo-slow) var(--slm-mo-out),opacity var(--slm-mo-base) var(--slm-mo-out)}
 .slm-ch-staged.on{transform:none;opacity:1}
 .slm-ch-staged.done{background:rgba(31,122,77,.96);border-color:#1f7a4d}
-.slm-ch-staged.shake{animation:slm-ch-shake 320ms var(--slm-mo-in-out) 2}
+.slm-ch-staged.shake{animation:slm-ch-shake var(--slm-mo-slow) var(--slm-mo-in-out) 2}
 .slm-ch-staged b{font-variant-numeric:tabular-nums}
 .slm-ch-staged .grow{flex:1}
 .slm-ch-staged .go{padding:9px 16px;min-height:44px;display:inline-flex;align-items:center;border-radius:9px;
@@ -6596,6 +6829,11 @@ var CHANNELS_CSS = `
 .slm-ch-viewseg button{flex:1;padding:6px 8px;min-height:34px;border-radius:7px;font-size:11px;font-weight:800;color:var(--slm-muted)}
 .slm-ch-viewseg button.on{background:var(--slm-accent);color:var(--slm-accent-ink)}
 .slm-ch-viewseg button:disabled{opacity:.5;cursor:not-allowed}
+.slm-ch-mapnav{margin:-2px 0 12px;padding:10px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface)}
+.slm-ch-mapnav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slm-muted)}
+.slm-ch-mapnav-head button{color:var(--slm-accent);font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;min-height:30px}
+.slm-ch-mapnav .slm-ch-viewseg{margin:8px 0 5px}
+.slm-ch-mapnav p{margin:0;font-size:11px;line-height:1.45;color:var(--slm-muted)}
 .slm-ch-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
 .slm-ch-row{padding:10px 11px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface);
   text-align:left;width:100%;display:block;transition:border-color var(--slm-mo-quick) var(--slm-mo-out)}
@@ -6616,7 +6854,7 @@ var CHANNELS_CSS = `
   font-variant-numeric:tabular-nums}
 .slm-ch-counts b{color:var(--slm-text);font-weight:800}
 .slm-ch-counts .free b{color:#5bd39b}
-.slm-ch-counts b.bump{animation:slm-ch-bump .58s var(--slm-mo-spring)}
+.slm-ch-counts b.bump{animation:slm-ch-bump var(--slm-mo-base) var(--slm-mo-spring)}
 @keyframes slm-ch-bump{0%,100%{transform:none}35%{transform:translateY(-2px) scale(1.08)}}
 .slm-ch-access{margin-top:6px;font-size:10.5px;color:var(--slm-muted)}
 .slm-ch-more{flex:none;color:var(--slm-muted);font-weight:800;padding:0 4px;min-height:28px}
@@ -6626,12 +6864,13 @@ var CHANNELS_CSS = `
   font-weight:800;color:#0e1017}
 .slm-ch-selsrc-row b{min-width:30px;text-align:right;font-weight:800}
 .slm-ch-selsrc-row span{color:var(--slm-muted)}
-.slm-ch-selnum.bump{animation:slm-ch-bump .58s var(--slm-mo-spring)}
+.slm-ch-selnum.bump{animation:slm-ch-bump var(--slm-mo-base) var(--slm-mo-spring)}
 .slm-ch-row2{display:flex;gap:8px;margin-top:8px}
 .slm-ch-row2 .slm-btn{flex:1;min-width:0}
 .slm-ch-alert{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:10px;font-size:12.5px;
   line-height:1.5;margin-bottom:12px}
 .slm-ch-alert.warn{background:rgba(244,183,64,.1);border:1px solid rgba(244,183,64,.4);color:#f4d58a}
+.slm-ch-alert.info{background:rgba(110,123,255,.12);border:1px solid rgba(110,123,255,.44);color:#c5cbff}
 .slm-ch-alert.err{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.45);color:#f1a4a6}
 .slm-ch-alert b{color:#fff}
 .slm-ch-alert button{display:block;margin-top:6px;color:#fff;font-weight:800;min-height:36px}
@@ -6728,7 +6967,8 @@ var CHANNELS_CSS = `
   .slm-ch-staged.shake{outline:2px solid #e5484d;outline-offset:2px}
   .slm-ch-staged.done{outline:2px solid #5bd39b;outline-offset:2px}
 }
-`;
+`
+);
 function bucketRowsHtml(rows) {
   return rows.map((row, index) => `
     <div class="slm-ch-bucket" style="animation-delay:${Math.min(index, 4) * 30}ms">
@@ -6778,6 +7018,10 @@ var ChannelsMode = class {
     this.loadError = null;
     this.loading = true;
     this.view = "inspect";
+    /** Pan is intentionally the initial desktop interaction. Assignment's
+     * marquee is powerful, but must never make an organizer lose map navigation. */
+    this.mapIntent = "pan";
+    this.focusedSectionId = null;
     this.showArchived = false;
     this.detailChannelId = null;
     this.targetChannelId = "";
@@ -6794,6 +7038,15 @@ var ChannelsMode = class {
     this.links = [];
     this.linksChannelId = null;
     this.linksState = "idle";
+    /**
+     * Monotonic read generations — one for the channel list + allocation, one for
+     * the open channel's links. Reads are concurrent (a 10s poll versus a
+     * mutation's own reload), and the network does not promise to answer them in
+     * order. Only the NEWEST read of each kind may write to state; an older
+     * answer that arrives late is dropped, never painted.
+     */
+    this.listSeq = 0;
+    this.linksSeq = 0;
     this.previewAudience = [];
     this.previewIncludePublic = false;
     this.previewProjection = null;
@@ -6820,10 +7073,14 @@ var ChannelsMode = class {
   enter() {
     if (this.active) return;
     this.active = true;
+    this.mapIntent = "pan";
+    this.focusedSectionId = null;
     this.ensureLayer();
     this.host.root.classList.add("ch-mode");
     this.applySheetClasses();
+    if (this.host.sections().length > 1) this.host.showSectionOverview();
     this.paintRail();
+    this.onInteractionChange?.();
     void this.refresh();
     this.pollTimer = setInterval(() => {
       void this.refresh({ quiet: true });
@@ -6875,6 +7132,17 @@ var ChannelsMode = class {
   canSelect() {
     return this.caps.manage && this.view === "inspect";
   }
+  /** Bulk seat assignment is explicit. In Pan map, clicks can still inspect a
+   * single seat, while a primary-button drag always moves the camera. */
+  usesMarqueeSelection() {
+    return this.canSelect() && this.mapIntent === "assign";
+  }
+  /** The renderer calls this when the organizer opens a section from overview. */
+  handleSectionFocus(sectionId) {
+    if (!this.active) return;
+    this.focusedSectionId = sectionId;
+    this.paintRail();
+  }
   /**
    * Organizer realtime integration point. M5 ships a per-scope socket for
    * buyers; the organizer channel-count stream is a later milestone. When it
@@ -6902,22 +7170,28 @@ var ChannelsMode = class {
   // ---- data -----------------------------------------------------------------
   async refresh(opts = {}) {
     if (!this.caps.view) return;
+    const seq = ++this.listSeq;
+    const superseded = () => seq !== this.listSeq;
     try {
       const list = await this.host.api.channels(this.host.eventKey, { includeArchived: this.showArchived });
+      if (superseded()) return;
       this.list = list;
       this.assignmentVersion = list.assignmentVersion;
       this.loadError = null;
       if (!this.targetChannelId) {
         this.targetChannelId = list.channels.find((c) => c.state === "active")?.id ?? PUBLIC_CHANNEL_ID;
       }
-      await this.loadAllocation();
+      await this.loadAllocation(seq);
+      if (superseded()) return;
       if (this.detailChannelId) await this.loadLinks(this.detailChannelId);
+      if (superseded()) return;
       this.loading = false;
       if (this.active) {
         this.paintRail();
         this.paintOverlay();
       }
     } catch (err) {
+      if (superseded()) return;
       this.loading = false;
       if (err instanceof ManageApiError && err.status === 403) {
         this.caps = { view: false, manage: false };
@@ -6929,10 +7203,11 @@ var ChannelsMode = class {
   }
   /** Walk every allocation page. Bounded by the event's seat count, and the
    *  server caps each page, so an arena is a handful of round trips. */
-  async loadAllocation() {
+  async loadAllocation(seq) {
     const next = /* @__PURE__ */ new Map();
     let afterLabel;
     for (let page = 0; page < 200; page += 1) {
+      if (seq !== void 0 && seq !== this.listSeq) return;
       const res = await this.host.api.channelAllocation(this.host.eventKey, {
         afterLabel,
         limit: 1e3
@@ -6944,6 +7219,7 @@ var ChannelsMode = class {
       if (!res.nextAfterLabel) break;
       afterLabel = res.nextAfterLabel;
     }
+    if (seq !== void 0 && seq !== this.listSeq) return;
     this.allocation = next;
   }
   // ---- lookups --------------------------------------------------------------
@@ -7010,9 +7286,10 @@ var ChannelsMode = class {
    * Repaint the allocation (or preview) overlay in ONE canvas pass.
    *
    * Channel identity on the map is a fill in the administrative color PLUS the
-   * letter flags below — never color alone. Physical status keeps its own cue:
-   * only FREE units take a channel fill, so sold/held/blocked seats still read
-   * exactly as they do in every other tool.
+   * letter flags below — never color alone. In buyer preview the map instead
+   * uses two explicit, channel-neutral access states. Physical status keeps its
+   * own cue: only FREE units are repainted, so sold/held/blocked seats still
+   * read exactly as they do in every other tool.
    */
   paintOverlay() {
     const canvas = this.canvas;
@@ -7037,11 +7314,14 @@ var ChannelsMode = class {
     if (!ctx) return;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
     ctx.clearRect(0, 0, width, height);
+    const seatDetail = this.host.isSeatDetail();
     const size = Math.max(3, this.host.seatPixelSize());
     const half = size / 2;
     const projection = this.view === "preview" ? this.previewProjection : null;
     const eligible = projection ? new Set(projection.available === false ? [] : projection.eligible ?? []) : null;
     const clusters = /* @__PURE__ */ new Map();
+    const sectionTargets = !seatDetail && this.host.sections().length > 1 ? /* @__PURE__ */ new Map() : null;
+    const previewSections = this.view === "preview" && seatDetail && size <= 15 ? /* @__PURE__ */ new Map() : null;
     for (const seat of this.host.seats()) {
       const status = this.host.statusOf(seat.label) ?? "free";
       const channelId = this.allocation.get(seat.label) ?? PUBLIC_CHANNEL_ID;
@@ -7052,24 +7332,150 @@ var ChannelsMode = class {
         cluster.n += 1;
         clusters.set(channelId, cluster);
       }
+      if (!seatDetail) {
+        const section = this.host.sectionOfLabel(seat.label);
+        const point2 = section ? this.host.worldToScreen({ x: seat.x, y: seat.y }) : null;
+        if (sectionTargets && section && point2) {
+          const bounds = sectionTargets.get(section.id) ?? {
+            label: section.label,
+            minX: point2.x,
+            minY: point2.y,
+            maxX: point2.x,
+            maxY: point2.y
+          };
+          bounds.minX = Math.min(bounds.minX, point2.x);
+          bounds.minY = Math.min(bounds.minY, point2.y);
+          bounds.maxX = Math.max(bounds.maxX, point2.x);
+          bounds.maxY = Math.max(bounds.maxY, point2.y);
+          sectionTargets.set(section.id, bounds);
+        }
+        continue;
+      }
       if (status !== "free") continue;
       let fill = null;
+      let stroke = null;
       if (this.view === "preview") {
-        fill = eligible ? eligible.has(seat.label) ? null : "#3a4051" : null;
+        if (eligible?.has(seat.label)) {
+          fill = PREVIEW_ELIGIBLE_FILL;
+          stroke = PREVIEW_ELIGIBLE_STROKE;
+        } else {
+          fill = PREVIEW_UNAVAILABLE_FILL;
+          stroke = PREVIEW_UNAVAILABLE_STROKE;
+        }
       } else if (channelId !== PUBLIC_CHANNEL_ID) {
         fill = this.markerFor(channelId).color;
+        stroke = ALLOCATION_STROKE;
       }
       if (!fill) continue;
       const point = this.host.worldToScreen({ x: seat.x, y: seat.y });
       if (!point) continue;
       if (point.x < -size || point.y < -size || point.x > width + size || point.y > height + size) continue;
+      if (previewSections) {
+        const section = this.host.sectionOfLabel(seat.label);
+        if (section) {
+          const bounds = previewSections.get(section.id) ?? {
+            label: section.label,
+            minX: point.x,
+            minY: point.y,
+            maxX: point.x,
+            maxY: point.y
+          };
+          bounds.minX = Math.min(bounds.minX, point.x);
+          bounds.minY = Math.min(bounds.minY, point.y);
+          bounds.maxX = Math.max(bounds.maxX, point.x);
+          bounds.maxY = Math.max(bounds.maxY, point.y);
+          previewSections.set(section.id, bounds);
+        }
+      }
       ctx.fillStyle = fill;
-      ctx.globalAlpha = this.view === "preview" ? 0.9 : 0.85;
-      ctx.fillRect(point.x - half, point.y - half, size, size);
+      if (this.view === "preview" || channelId !== PUBLIC_CHANNEL_ID) {
+        const radius = Math.max(2, half + Math.min(1.5, half * 0.06));
+        ctx.globalAlpha = 1;
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, radius, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.strokeStyle = stroke ?? fill;
+        ctx.lineWidth = this.view === "preview" ? Math.max(1, Math.min(1.75, size * 0.13)) : Math.max(1, Math.min(1.5, size * 0.1));
+        ctx.stroke();
+        if (this.view === "preview" && eligible?.has(seat.label) && size >= 22) {
+          this.paintPreviewSeatLabel(ctx, seat.label, point.x, point.y, radius);
+        }
+      } else {
+        ctx.globalAlpha = 0.85;
+        ctx.fillRect(point.x - half, point.y - half, size, size);
+      }
     }
     ctx.globalAlpha = 1;
+    if (previewSections) this.paintPreviewSectionLabels(ctx, previewSections);
+    this.paintSectionTargets(sectionTargets);
     this.paintFlags(clusters);
   }
+  /** Draw an eligible seat's actual chart label without inventing a new buyer
+   * identifier. Long labels scale down and are omitted rather than overflowing
+   * into an adjacent seat. */
+  paintPreviewSeatLabel(ctx, label, x, y, radius) {
+    const maxWidth = radius * 1.55;
+    let fontSize = Math.min(13, Math.max(7, radius * 0.55));
+    const minFontSize = 6;
+    while (fontSize >= minFontSize) {
+      ctx.font = `800 ${fontSize}px var(--slm-font, system-ui, sans-serif)`;
+      if (ctx.measureText(label).width <= maxWidth) break;
+      fontSize -= 0.5;
+    }
+    if (fontSize < minFontSize) return;
+    ctx.fillStyle = "#ffffff";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(label, x, y);
+  }
+  /** A section overview is a navigation map. These transparent, keyboardable
+   * hit areas sit over the renderer's section shells so both mouse and keyboard
+   * always take the organizer into the real focused-section camera state. */
+  paintSectionTargets(sections) {
+    const layer = this.layer;
+    if (!layer) return;
+    layer.querySelectorAll(".slm-ch-section-target").forEach((el) => el.remove());
+    if (!sections) return;
+    for (const [id, section] of sections) {
+      const width = section.maxX - section.minX;
+      const height = section.maxY - section.minY;
+      if (width < 20 || height < 20) continue;
+      const target = document.createElement("button");
+      target.type = "button";
+      target.className = "slm-ch-section-target";
+      target.style.left = `${section.minX - 8}px`;
+      target.style.top = `${section.minY - 8}px`;
+      target.style.width = `${width + 16}px`;
+      target.style.height = `${height + 16}px`;
+      target.setAttribute("aria-label", `Open ${section.label} seats`);
+      target.addEventListener("click", () => {
+        this.focusedSectionId = id;
+        this.host.focusSection(id);
+        this.paintRail();
+      });
+      layer.appendChild(target);
+    }
+  }
+  /** Keep renderer section names legible over a dense, zoomed-out preview. */
+  paintPreviewSectionLabels(ctx, sections) {
+    for (const section of sections.values()) {
+      const width = section.maxX - section.minX;
+      const height = section.maxY - section.minY;
+      if (width < 52 || height < 26) continue;
+      const centerX = (section.minX + section.maxX) / 2;
+      const centerY = (section.minY + section.maxY) / 2;
+      const fontSize = Math.max(11, Math.min(15, height * 0.16));
+      ctx.font = `800 ${fontSize}px var(--slm-font, system-ui, sans-serif)`;
+      const labelWidth = Math.min(width - 8, ctx.measureText(section.label).width + 18);
+      const labelHeight = fontSize + 10;
+      ctx.fillStyle = "rgba(11, 16, 28, .88)";
+      ctx.fillRect(centerX - labelWidth / 2, centerY - labelHeight / 2, labelWidth, labelHeight);
+      ctx.fillStyle = "#f8fafc";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(section.label, centerX, centerY);
+    }
+  }
   /** Letter flags at each channel's centroid — the non-color identity cue. */
   paintFlags(clusters) {
     const layer = this.layer;
@@ -7135,7 +7541,7 @@ var ChannelsMode = class {
       });
     });
   }
-  setBanner(on, name = "") {
+  setBanner(on, name = "", eligibleSeats) {
     const banner = this.bannerEl;
     if (!banner) return;
     this.host.root.classList.toggle("ch-preview", on);
@@ -7145,8 +7551,9 @@ var ChannelsMode = class {
       return;
     }
     const marker = this.previewAudience.length === 1 ? this.markerFor(this.previewAudience[0]) : { color: "var(--slm-accent)", letter: "" };
+    const availability = eligibleSeats == null ? "" : ` \xB7 ${eligibleSeats.toLocaleString()} ${eligibleSeats === 1 ? "seat" : "seats"} available now`;
     banner.innerHTML = `<span class="dot" style="background:${esc(marker.color)}"></span>
-      Previewing buyer access \xB7 ${esc(name)} \xB7 read-only
+      Previewing buyer access \xB7 ${esc(name)}${availability} \xB7 read-only
       <button type="button" data-ch-act="exit-preview">Exit preview</button>`;
     banner.classList.add("on");
     banner.querySelector('[data-ch-act="exit-preview"]')?.addEventListener("click", () => this.setView("inspect"));
@@ -7181,6 +7588,8 @@ var ChannelsMode = class {
         includePublic: this.previewIncludePublic || audience.some(isPublicChannelId)
       });
       this.previewSupported = true;
+      const eligibleSeats = this.previewProjection.available === false ? void 0 : this.previewProjection.counts?.eligible ?? this.previewProjection.eligible?.length;
+      this.setBanner(true, names, eligibleSeats);
     } catch (err) {
       const status = err instanceof ManageApiError ? err.status : 0;
       this.previewSupported = !(status === 404 || status === 405 || status === 501);
@@ -7231,6 +7640,22 @@ var ChannelsMode = class {
         aria-pressed="${this.view === "inspect"}">Inspect allocation</button>
       <button type="button" class="${previewOn.trim()}" data-ch-view="preview"
         aria-pressed="${this.view === "preview"}">Preview buyer access</button>
+    </div>${this.mapNavigationHtml()}`;
+  }
+  mapNavigationHtml() {
+    if (this.host.sections().length < 2) return "";
+    const focused = this.focusedSectionId ? this.host.sections().find((section) => section.id === this.focusedSectionId)?.label ?? "section" : null;
+    const panOn = this.mapIntent === "pan" ? " on" : "";
+    const assignOn = this.mapIntent === "assign" ? " on" : "";
+    const intent = this.view === "inspect" && this.caps.manage ? `<div class="slm-ch-viewseg" role="group" aria-label="Map interaction">
+          <button type="button" class="${panOn.trim()}" data-ch-map="pan" aria-pressed="${this.mapIntent === "pan"}">Pan map</button>
+          <button type="button" class="${assignOn.trim()}" data-ch-map="assign" aria-pressed="${this.mapIntent === "assign"}">Assign seats</button>
+        </div>
+        <p>${this.mapIntent === "pan" ? "Drag to explore. Click a section to open its seats." : "Drag across seats to select them for allocation."}</p>` : "<p>Drag to explore. Click a section to open its seats.</p>";
+    return `<div class="slm-ch-mapnav">
+      <div class="slm-ch-mapnav-head"><span>${focused ? `Viewing ${esc(focused)}` : "Section overview"}</span>
+        <button type="button" data-ch-act="sections">All sections</button></div>
+      ${intent}
     </div>`;
   }
   countsHtml(counts, key) {
@@ -7369,6 +7794,8 @@ var ChannelsMode = class {
    */
   async loadLinks(channelId) {
     if (!this.caps.view) return;
+    const seq = ++this.linksSeq;
+    const superseded = () => seq !== this.linksSeq || this.linksChannelId !== channelId;
     if (this.linksChannelId !== channelId) {
       this.links = [];
       this.linksChannelId = channelId;
@@ -7376,11 +7803,11 @@ var ChannelsMode = class {
     }
     try {
       const res = await this.host.api.accessLinks(this.host.eventKey, channelId);
-      if (this.linksChannelId !== channelId) return;
+      if (superseded()) return;
       this.links = res.links ?? [];
       this.linksState = "ready";
     } catch (err) {
-      if (this.linksChannelId !== channelId) return;
+      if (superseded()) return;
       const status = err instanceof ManageApiError ? err.status : 0;
       this.links = [];
       this.linksState = status === 404 || status === 405 || status === 501 ? "unsupported" : "error";
@@ -7457,9 +7884,9 @@ var ChannelsMode = class {
     const unavailable = this.previewProjection?.available === false ? `<div class="slm-ch-alert warn" role="status"><span>\u23F8</span>
           <span><b>This private sale is not available.</b> ${esc((this.previewProjection.unavailable ?? []).map((entry) => `${this.nameOf(entry.channelId) ?? "This channel"} is ${entry.state}`).join("; ") || "The audience cannot buy right now")}.
           A buyer arriving with this access sees this message, not these seats.</span></div>` : "";
-    const counts = this.previewProjection?.counts;
-    const summary = counts?.eligible != null && this.previewProjection?.available !== false ? `<div class="slm-ch-alert warn"><span>\u2139</span><span>${counts.eligible.toLocaleString()} seats are buyable
-          through this access.${this.previewProjection?.includePublic === false ? " Public sale seats are <b>not</b> included in this grant." : ""}</span></div>` : "";
+    const eligibleSeats = this.previewProjection?.counts?.eligible ?? this.previewProjection?.eligible?.length;
+    const summary = eligibleSeats != null && this.previewProjection?.available !== false ? `<div class="slm-ch-alert info"><span>\u2713</span><span><b>${eligibleSeats.toLocaleString()} ${eligibleSeats === 1 ? "seat is" : "seats are"} available now.</b>
+          This is the exact buyer-visible allocation.${this.previewProjection?.includePublic === false ? " Public sale seats are <b>not</b> included in this access." : ""}</span></div>` : "";
     const includePublic = isPublicChannelId(current) ? "" : `
       <label class="slm-note" style="display:flex;gap:8px;align-items:center;margin:10px 0">
         <input type="checkbox" data-ch-includepublic ${this.previewIncludePublic ? "checked" : ""} />
@@ -7490,6 +7917,13 @@ var ChannelsMode = class {
     rail.querySelectorAll("[data-ch-view]").forEach((button) => {
       button.addEventListener("click", () => this.setView(button.dataset.chView));
     });
+    rail.querySelectorAll("[data-ch-map]").forEach((button) => {
+      button.addEventListener("click", () => {
+        this.mapIntent = button.dataset.chMap === "assign" ? "assign" : "pan";
+        this.paintRail();
+        this.onInteractionChange?.();
+      });
+    });
     rail.querySelectorAll("[data-ch-detail]").forEach((button) => {
       button.addEventListener("click", () => {
         const channelId = button.dataset.chDetail;
@@ -7540,6 +7974,11 @@ var ChannelsMode = class {
   }
   railAction(action) {
     switch (action) {
+      case "sections":
+        this.focusedSectionId = null;
+        this.host.showSectionOverview();
+        this.paintRail();
+        break;
       case "create":
         this.openDialog({ kind: "create" });
         break;
@@ -7714,7 +8153,7 @@ var ChannelsMode = class {
         <label>Marker</label>
         <div style="display:flex;gap:8px;align-items:center">
           <span class="slm-ch-mk" data-ch-marker style="background:${esc(suggestion.color)};width:28px;height:28px;font-size:13px">${esc(suggestion.letter)}</span>
-          <span class="slm-note" style="margin:0">Letter + colour suggested from the name. Buyers never see either.</span>
+          <span class="slm-note" style="margin:0">Letter comes from the name; colour is chosen automatically from the next available palette. Buyers never see either.</span>
         </div>
       </div>
       <div class="slm-field">
@@ -8065,6 +8504,24 @@ var ChannelsMode = class {
     await this.loadLinks(channelId);
     this.paintRail();
   }
+  /**
+   * The reload EVERY link mutation owes the panel.
+   *
+   * A create/rotate/revoke changes two things the detail panel renders: the
+   * channel's access line (the server sets `access.intent` on create, and clears
+   * it when the last live link goes) and the link status list. Both are re-read
+   * here and the rail repainted, so the panel the organizer is already looking
+   * at is current the moment the mutation lands — no reload, and no dependence
+   * on HOW the one-time reveal was dismissed (the button, Escape, or never).
+   */
+  async reloadAfterLinkChange(channelId) {
+    if (this.detailChannelId === channelId) {
+      await this.refresh({ quiet: true });
+      return;
+    }
+    await this.loadLinks(channelId);
+    if (this.active) this.paintRail();
+  }
   linkById(linkId) {
     return this.links.find((link) => link.id === linkId) ?? null;
   }
@@ -8158,7 +8615,7 @@ var ChannelsMode = class {
     try {
       const reveal = await this.host.api.createAccessLink(this.host.eventKey, channelId, input);
       this.revealLink(reveal, { channelId });
-      await this.refresh({ quiet: true });
+      await this.reloadAfterLinkChange(channelId);
     } catch (err) {
       this.showDialogError(accessLinkErrorCopy(err instanceof ManageApiError ? err : void 0));
       if (!(err instanceof ManageApiError)) this.host.onError(err);
@@ -8216,9 +8673,6 @@ var ChannelsMode = class {
         }
         selectSecret(dialog);
       });
-      dialog.querySelector("[data-ch-lk-done]")?.addEventListener("click", () => {
-        void this.loadLinks(opts.channelId).then(() => this.paintRail());
-      });
     });
     this.announce("Your hosted access link is ready and is shown once.");
   }
@@ -8284,6 +8738,7 @@ var ChannelsMode = class {
         endActiveSessions
       );
       this.revealLink(reveal, { channelId, rotated: true });
+      await this.reloadAfterLinkChange(channelId);
     } catch (err) {
       this.showDialogError(accessLinkErrorCopy(err instanceof ManageApiError ? err : void 0));
       if (!(err instanceof ManageApiError)) this.host.onError(err);
@@ -8326,9 +8781,7 @@ var ChannelsMode = class {
         endActiveSessions
       );
       this.closeDialog();
-      await this.loadLinks(channelId);
-      await this.refresh({ quiet: true });
-      this.paintRail();
+      await this.reloadAfterLinkChange(channelId);
       this.host.toast(res.endedSessions ? `Link revoked. ${res.endedSessions.toLocaleString()} buyer${res.endedSessions === 1 ? "" : "s"} lost access.` : "Link revoked. It no longer opens for anyone.", "ok");
     } catch (err) {
       this.showDialogError(accessLinkErrorCopy(err instanceof ManageApiError ? err : void 0));
@@ -8413,9 +8866,19 @@ var LEGEND = [
   { key: "booked", label: "Booked", color: "#22a06b" },
   { key: "blocked", label: "Blocked", color: "#8b94ac" }
 ];
-var CSS2 = `
+var MANAGER_CSS = (
+  /* @sl-css */
+  `
 .slm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:480px;overflow:hidden;
-  background:var(--slm-bg);color:var(--slm-text);font-family:var(--slm-font);border-radius:var(--slm-radius)}
+  background:var(--slm-bg);color:var(--slm-text);font-family:var(--slm-font);border-radius:var(--slm-radius);
+  /* Motion tokens (motion-system \xA72), declared by the cockpit ROOT rather than
+     borrowed from CHANNELS_CSS. The base cockpit animates whether or not
+     Channels mode is in use, so owning its own tokens is what stops a token
+     edit from silently changing only half the surface. Channels mode declares
+     the identical values so an embed of it stays self-contained. */
+  --slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;--slm-mo-ambient:2000ms;
+  --slm-mo-out:cubic-bezier(.2,.8,.2,1);--slm-mo-in-out:cubic-bezier(.4,0,.2,1);--slm-mo-exit:cubic-bezier(.4,0,1,1);
+  --slm-mo-spring:cubic-bezier(.34,1.3,.64,1)}
 .slm *{box-sizing:border-box;margin:0;padding:0}
 .slm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 .slm input{font:inherit}
@@ -8428,7 +8891,8 @@ var CSS2 = `
 .slm-mode.on{background:var(--slm-accent);color:var(--slm-accent-ink)}
 .slm-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;font-weight:800;color:var(--slm-muted)}
 .slm-live-dot{width:8px;height:8px;border-radius:50%;background:#8b94ac}
-.slm.live .slm-live-dot{background:#22a06b;box-shadow:0 0 0 0 rgba(34,160,107,.55);animation:slm-pulse 2s infinite}
+.slm.live .slm-live-dot{background:#22a06b;box-shadow:0 0 0 0 rgba(34,160,107,.55);
+  animation:slm-pulse var(--slm-mo-ambient) infinite}
 @keyframes slm-pulse{0%{box-shadow:0 0 0 0 rgba(34,160,107,.5)}70%{box-shadow:0 0 0 7px rgba(34,160,107,0)}100%{box-shadow:0 0 0 0 rgba(34,160,107,0)}}
 .slm-kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));width:100%;padding-top:10px;
   border-top:1px solid var(--slm-line)}
@@ -8437,7 +8901,11 @@ var CSS2 = `
   font-variant-numeric:tabular-nums;white-space:nowrap}
 .slm-kpi span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slm-muted);font-weight:700}
 .slm-kpi .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:baseline}
-.slm-kpi.changed b{animation:slm-kpi-bump .58s cubic-bezier(.2,.8,.2,1)}
+/* The one playful moment this surface is allowed (\xA72 --mo-spring). It ran at
+   .58s against a 200ms catalog, which read as a different design language from
+   the dashboard tile it mirrors; Channels mode's own count bump is the same
+   pattern and must stay in step with it. */
+.slm-kpi.changed b{animation:slm-kpi-bump var(--slm-mo-base) var(--slm-mo-spring)}
 .slm-kpidelta{position:absolute;right:4px;top:-12px;padding:2px 5px;border-radius:999px;background:rgba(34,160,107,.17);
   color:#5bd39b!important;font-size:9px!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;
   animation:slm-kpi-delta 1.45s ease-out both;pointer-events:none}
@@ -8456,12 +8924,14 @@ var CSS2 = `
 .slm-hud-chip{padding:6px 11px;border-radius:999px;font-size:12px;font-weight:700;background:var(--slm-surface);
   border:1px solid var(--slm-line);color:var(--slm-text)}
 .slm-zoomhint{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:6px 13px;border-radius:999px;
-  background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;pointer-events:none;opacity:0;transition:opacity .2s}
+  background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;pointer-events:none;opacity:0;
+  transition:opacity var(--slm-mo-base) var(--slm-mo-out)}
 .slm-zoomhint.on{opacity:1}
 .slm-liveevent{position:absolute;left:50%;top:14px;z-index:4;display:flex;align-items:center;gap:8px;max-width:min(560px,calc(100% - 32px));
   padding:8px 12px;border:1px solid var(--slm-line);border-radius:999px;background:color-mix(in srgb,var(--slm-surface) 92%,transparent);
   box-shadow:0 10px 34px rgba(0,0,0,.32);opacity:0;transform:translate(-50%,-8px);pointer-events:none;
-  transition:opacity .18s ease,transform .24s ease;backdrop-filter:blur(10px)}
+  transition:opacity var(--slm-mo-quick) var(--slm-mo-out),transform var(--slm-mo-base) var(--slm-mo-out);
+  backdrop-filter:blur(10px)}
 .slm-liveevent.on{opacity:1;transform:translate(-50%,0)}
 .slm.block-mode .slm-liveevent{top:52px}
 .slm-liveeventdot{width:8px;height:8px;border-radius:50%;flex:none}.slm-liveeventcopy{min-width:0;overflow:hidden;text-overflow:ellipsis;
@@ -8481,7 +8951,8 @@ var CSS2 = `
 /* activity feed */
 .slm-feed{display:flex;flex-direction:column;gap:0}
 .slm-feedrow{display:flex!important;width:100%;align-items:center;gap:9px;padding:8px 2px!important;border-bottom:1px solid var(--slm-line)!important;
-  border-radius:6px;font-size:12.5px;text-align:left!important;animation:slm-in .35s ease}
+  border-radius:6px;font-size:12.5px;text-align:left!important;
+  animation:slm-in var(--slm-mo-quick) var(--slm-mo-out)}
 .slm-feedrow:hover{background:rgba(255,255,255,.035)!important}
 @keyframes slm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
 .slm-feeddot{width:8px;height:8px;border-radius:50%;flex:none}
@@ -8548,7 +9019,8 @@ var CSS2 = `
 
 /* toast */
 .slm-toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:10px 16px;border-radius:10px;
-  font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s;
+  font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;
+  transition:opacity var(--slm-mo-base) var(--slm-mo-out);
   background:var(--slm-surface);color:var(--slm-text);border:1px solid var(--slm-line);z-index:5}
 .slm-toast.on{opacity:1}
 .slm-toast.err{background:#c0392b;color:#fff;border-color:#c0392b}
@@ -8559,7 +9031,9 @@ var CSS2 = `
 .slm-barbtn.on{background:rgba(244,183,64,.13);border-color:#f4b740;color:#f7ca6b}
 .slm-sectionlist{display:flex;flex-direction:column;gap:8px;margin-top:4px}
 .slm-sectionlist + .slm-eyebrow{margin-top:18px}
-.slm-sectionrow{width:100%;padding:10px!important;border:1px solid var(--slm-line)!important;border-radius:10px;background:var(--slm-surface)!important;text-align:left!important;transition:border-color .15s ease,transform .15s ease}
+.slm-sectionrow{width:100%;padding:10px!important;border:1px solid var(--slm-line)!important;border-radius:10px;
+  background:var(--slm-surface)!important;text-align:left!important;
+  transition:border-color var(--slm-mo-quick) var(--slm-mo-out),transform var(--slm-mo-quick) var(--slm-mo-out)}
 .slm-sectionrow:hover{border-color:var(--slm-muted)!important;transform:translateY(-1px)}
 .slm-sectiontop,.slm-sectionmeta{display:flex;align-items:center;justify-content:space-between;gap:10px}
 .slm-sectiontop{font-size:12.5px;font-weight:800}.slm-sectionmeta{margin-top:5px;color:var(--slm-muted);font-size:11px}
@@ -8578,7 +9052,8 @@ var CSS2 = `
 .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{padding:10px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface);
+  transition:border-color var(--slm-mo-quick) var(--slm-mo-out),opacity var(--slm-mo-quick) var(--slm-mo-out)}
 .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}
@@ -8618,16 +9093,30 @@ var CSS2 = `
 .slm.compact .slm-barbtn{flex:1;padding:6px 9px}.slm.compact .slm-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .slm.compact .slm-kpi[data-kpi="buyers"],.slm.compact .slm-kpi[data-kpi="active-holds"],
 .slm.compact .slm-kpi[data-kpi="sold-pct"],.slm.compact .slm-kpi[data-kpi="gross-sales"]{display:none}
+/* Reduced motion, as a BLANKET over the cockpit subtree rather than a list of
+   selectors. The list this replaces named four animations and two transitions,
+   and had silently fallen behind the stylesheet: the zoom hint, the toast and
+   the availability rows all still animated for a user who had asked the OS for
+   none. An enumerated list has to be edited every time a rule is added, and
+   nothing fails when it isn't \u2014 so it drifts. This cannot.
+
+   Motion is removed, never the information it carried: Channels mode's own
+   block substitutes static outlines for its shake and success states, and it
+   stays authoritative for those. No JS here waits on animationend or
+   transitionend, so cutting them outright strands no state. */
 @media (prefers-reduced-motion:reduce){
-  .slm.live .slm-live-dot,.slm-feedrow,.slm-kpi.changed b,.slm-kpidelta{animation:none!important}
-  .slm-liveevent,.slm-sectionrow{transition:none!important}
+  .slm,.slm *,.slm *::before,.slm *::after{
+    animation:none!important;
+    transition:none!important;
+    scroll-behavior:auto!important}
 }
-${CHANNELS_CSS}`;
+${CHANNELS_CSS}`
+);
 function injectStyle() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
   const el = document.createElement("style");
   el.id = STYLE_ID2;
-  el.textContent = CSS2;
+  el.textContent = MANAGER_CSS;
   document.head.appendChild(el);
 }
 function themeVars(theme) {
@@ -8687,6 +9176,11 @@ var SeatManager = class {
     this.reconnectTimer = null;
     this.attempt = 0;
     this.closed = false;
+    /** Mirrors the `live` root class, so the getter never has to read the DOM. */
+    this.connectionStatus = "reconnecting";
+    /** When the server last told us something. Stamped on accepted traffic only —
+     *  a socket that opens and says nothing has not refreshed anything. */
+    this.lastMessageAt = null;
     this.ready = false;
     this.feed = [];
     this.feedTimer = null;
@@ -8896,6 +9390,12 @@ var SeatManager = class {
       },
       worldToScreen: (point) => this.renderer?.worldToScreen(point) ?? null,
       seatPixelSize: () => this.seatPixelSize(),
+      isSeatDetail: () => this.renderer?.getRung?.() === "seats",
+      showSectionOverview: () => {
+        this.renderer?.clearSectionFocus();
+        this.renderer?.setRung?.("sections");
+      },
+      focusSection: (sectionId) => this.renderer?.focusSection(sectionId),
       isCompact: () => !!this.root?.classList.contains("compact"),
       setMapInert: (inert) => {
         this.mapHost.toggleAttribute("inert", inert);
@@ -8905,13 +9405,15 @@ var SeatManager = class {
       onError: (err) => this.opts.onError?.(err)
     };
   }
-  /** Approximate on-screen seat size, for the channel overlay's marks. Derived
-   *  from the live camera so the overlay tracks zoom without a renderer hook. */
+  /** Actual on-screen seat diameter, for the channel overlay's marks. The
+   * renderer's base seat radius is 9 chart units; retaining the camera scale
+   * (rather than capping it) keeps every preview paint aligned with the real
+   * chart geometry at deep zoom. */
   seatPixelSize() {
     const rect = this.renderer?.getVisibleWorldRect?.();
     const width = this.mapHost?.clientWidth ?? 0;
     if (!rect?.width || !width) return 6;
-    return Math.max(3, Math.min(24, width / rect.width * 14));
+    return Math.max(3, width / rect.width * 18);
   }
   /** Toggle the normalized sales-velocity outline overlay without changing seat colors. */
   setHeatOverlay(enabled) {
@@ -9087,6 +9589,16 @@ var SeatManager = class {
   getControlRoomSnapshot(windowMinutes = this.trendWindowMinutes) {
     return this.setTrendWindow(windowMinutes);
   }
+  /**
+   * The realtime link's current state and the "as of" behind it.
+   *
+   * Pair with `onConnectionChange` for the edges: a host that mounts after a
+   * drop, or re-reads on tab focus, needs to be able to ASK rather than wait
+   * for the next transition that may never come.
+   */
+  getConnection() {
+    return { status: this.connectionStatus, lastMessageAt: this.lastMessageAt };
+  }
   getLog(opts = {}) {
     return this.api.log(this.key, opts);
   }
@@ -9151,6 +9663,10 @@ var SeatManager = class {
       onSelect: (seat) => this.handleSeatSelect(seat),
       onDeselect: () => this.syncSelection(),
       onMarquee: () => this.syncSelection(),
+      onSectionTap: (sectionId) => {
+        this.renderer?.focusSection(sectionId);
+        this.channels?.handleSectionFocus(sectionId);
+      },
       onViewChange: () => {
         this.updateZoomHint();
         this.channels?.handleViewChange();
@@ -9161,10 +9677,11 @@ var SeatManager = class {
     this.applyHeatOverlay();
     this.updateZoomHint();
   }
-  /** Block and Channels are both bulk-selection tools: marquee, ⌘A, category,
-   *  section. The two differ only in WHICH statuses they may act on. */
+  /** Block always uses a marquee. Channels only enables its marquee after the
+   * organizer deliberately chooses Assign seats; Pan map keeps desktop drag
+   * available for large charts. */
   isBulkSelectMode() {
-    return this.mode === "block" || this.mode === "channels" && this.channels?.canSelect() === true;
+    return this.mode === "block" || this.mode === "channels" && this.channels?.usesMarqueeSelection() === true;
   }
   /**
    * Block never touches held or booked inventory, so it cannot select it.
@@ -9174,7 +9691,7 @@ var SeatManager = class {
    */
   selectableStatuses() {
     if (this.mode === "block") return ["free", "not_for_sale"];
-    if (this.mode === "inspect" || this.isBulkSelectMode()) {
+    if (this.mode === "inspect" || this.isBulkSelectMode() || this.mode === "channels" && this.channels?.canSelect() === true) {
       return ["free", "held", "booked", "not_for_sale"];
     }
     return [];
@@ -9277,6 +9794,7 @@ var SeatManager = class {
       return;
     }
     if (!msg || typeof msg !== "object") return;
+    this.lastMessageAt = Date.now();
     const m = msg;
     if (Array.isArray(m.hidden) || Array.isArray(m.closed)) {
       this.updateEffectiveAvailability(m.hidden, m.closed);
@@ -9333,6 +9851,7 @@ var SeatManager = class {
       const objs = await this.api.objects(this.key);
       this.applySnapshot(objs.seats);
       this.updateEffectiveAvailability(objs.hidden, objs.closed);
+      this.lastMessageAt = Date.now();
     } catch {
     }
   }
@@ -9807,6 +10326,14 @@ var SeatManager = class {
     this.root?.classList.toggle("live", on);
     if (this.els.livetext) this.els.livetext.textContent = on ? "LIVE" : "RECONNECTING";
     this.paintMonitorInsights();
+    const next = on ? "live" : "reconnecting";
+    if (next === this.connectionStatus) return;
+    this.connectionStatus = next;
+    try {
+      this.opts.onConnectionChange?.(this.getConnection());
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
   }
   updateZoomHint() {
     const hint = this.els.zoomhint;