@seatlayer/js 0.35.0 → 0.36.0

package/dist/index.cjs

@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -26,18 +29,44 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+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);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
   ApiError: () => ApiError,
+  BuyerAccessContext: () => BuyerAccessContext,
+  BuyerAccessUnavailableError: () => BuyerAccessUnavailableError,
+  BuyerRealtimeClient: () => BuyerRealtimeClient,
+  ChannelsMode: () => ChannelsMode,
   EmbeddedDesigner: () => EmbeddedDesigner,
   ManageApi: () => ManageApi,
   ManageApiError: () => ManageApiError,
+  PUBLIC_CHANNEL_ID: () => PUBLIC_CHANNEL_ID,
+  PUBLIC_CHANNEL_NAME: () => PUBLIC_CHANNEL_NAME,
   SeatManager: () => SeatManager,
   SeatPicker: () => SeatPicker,
   SeatingChart: () => SeatingChart,
-  attachPickerFrame: () => attachPickerFrame
+  accessIntentLabel: () => accessIntentLabel,
+  accessLine: () => accessLine,
+  attachPickerFrame: () => attachPickerFrame,
+  bucketRows: () => bucketRows,
+  bucketRowsHtml: () => bucketRowsHtml,
+  createBuyerAccessContext: () => createBuyerAccessContext,
+  createControllerSink: () => createControllerSink,
+  dropReviewRows: () => dropReviewRows,
+  markerOf: () => markerOf,
+  mutationCount: () => mutationCount,
+  needsMoveConfirmation: () => needsMoveConfirmation,
+  planAssignment: () => planAssignment,
+  retryAfterCopy: () => retryAfterCopy,
+  selectionSources: () => selectionSources,
+  stateBadge: () => stateBadge,
+  suggestMarker: () => suggestMarker
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -55,63 +84,88 @@ var ApiError = class extends Error {
     this.reason = reason;
   }
 };
-async function request(base, path, init = {}) {
-  const method = init.method ?? "GET";
-  const headers = {};
-  let body;
-  if (init.body !== void 0) {
-    headers["Content-Type"] = "application/json";
-    body = JSON.stringify(init.body);
-  }
-  const res = await fetch(`${base}${path}`, { method, headers, body, credentials: "omit" });
-  const isJson = (res.headers.get("content-type") ?? "").includes("application/json");
-  const data = isJson ? await res.json().catch(() => null) : null;
-  if (!res.ok) {
-    const err = data;
-    throw new ApiError(
-      res.status,
-      err?.error ?? `request_failed_${res.status}`,
-      err?.code ?? err?.error,
-      err?.conflicts,
-      err?.reason
-    );
-  }
-  return data;
-}
+var OBJECT_UNAVAILABLE_CODES = {
+  seat_conflict: "taken",
+  conflict: "taken",
+  channel_assignment_conflict: "ineligible",
+  allocation_exhausted: "exhausted"
+};
 var PubApi = class {
-  constructor(base) {
+  constructor(base, options = {}) {
     this.base = base;
     this.viewerId = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `viewer_${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+    this.access = options.access;
+    this.onObjectUnavailable = options.onObjectUnavailable;
+  }
+  /** True when this client is bound to a buyer access session. */
+  get accessScoped() {
+    return !!this.access?.configured;
+  }
+  async request(path, init = {}, retried = false) {
+    const method = init.method ?? "GET";
+    const headers = {};
+    let body;
+    if (init.body !== void 0) {
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify(init.body);
+    }
+    const authorization = await this.access?.authorization(retried ? "unauthorized" : "initial");
+    if (authorization) headers.Authorization = authorization;
+    const res = await fetch(`${this.base}${path}`, { method, headers, body, credentials: "omit" });
+    const isJson = (res.headers.get("content-type") ?? "").includes("application/json");
+    const data = isJson ? await res.json().catch(() => null) : null;
+    if (!res.ok) {
+      const err = data;
+      const code = err?.code ?? err?.error;
+      if (this.access?.configured && (res.status === 401 || res.status === 403 || res.status === 422)) {
+        const refreshed = await this.access.handleFailure(res.status, code);
+        if (refreshed && !retried) return this.request(path, init, true);
+      }
+      if (res.status === 409) {
+        const reason = code ? OBJECT_UNAVAILABLE_CODES[code] : void 0;
+        const labels = err?.conflicts?.map((c) => c.label) ?? init.labels ?? [];
+        if (reason) this.onObjectUnavailable?.({ labels, reason, code });
+      }
+      throw new ApiError(
+        res.status,
+        err?.error ?? `request_failed_${res.status}`,
+        code,
+        err?.conflicts,
+        err?.reason
+      );
+    }
+    return data;
   }
   chart(key) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/chart`);
+    return this.request(`/pub/events/${encodeURIComponent(key)}/chart`);
   }
   objects(key) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/objects`);
+    return this.request(`/pub/events/${encodeURIComponent(key)}/objects`);
   }
   hold(key, selections, ttlMs, replaceHoldId) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/hold`, {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/hold`, {
       method: "POST",
-      body: { selections, ...ttlMs ? { ttlMs } : {}, ...replaceHoldId ? { replaceHoldId } : {} }
+      body: { selections, ...ttlMs ? { ttlMs } : {}, ...replaceHoldId ? { replaceHoldId } : {} },
+      labels: selections.map((s) => s.label)
     });
   }
   // `zoneId` scopes the pick to one zone and `ttlMs` carries the host's checkout
   // window — both are part of the route contract, and dropping either here made
   // the SDK quietly pick venue-wide and hold for the server default instead.
   bestAvailable(key, qty, categoryKey, zoneId, ttlMs) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/best-available`, {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/best-available`, {
       method: "POST",
       body: { qty, ...categoryKey ? { categoryKey } : {}, ...zoneId ? { zoneId } : {}, ...ttlMs ? { ttlMs } : {} }
     });
   }
   resume(key, holdId) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/hold/resume`, {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/hold/resume`, {
       method: "POST",
       body: { holdId }
     });
   }
   release(key, labels, holdId) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/release`, {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/release`, {
       method: "POST",
       body: { labels, holdId }
     });
@@ -119,17 +173,662 @@ var PubApi = class {
   /** P4 "need more time?": push an active hold's expiry out. Throws ApiError 409
    *  (reason: expired | extend_limit | not_found | not_active) if it can't. */
   extend(key, holdId, ttlMs) {
-    return request(this.base, `/pub/events/${encodeURIComponent(key)}/extend`, {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/extend`, {
       method: "POST",
       body: { holdId, ...ttlMs ? { ttlMs } : {} }
     });
   }
-  socketUrl(key) {
+  /**
+   * 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
+   * already apply; the socket then carries only the short-lived ticket, in its
+   * subprotocol list. TTL ≤ 30s, single redemption — mint one per attempt.
+   */
+  subscribeTicket(key) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/subscribe-tickets`, {
+      method: "POST",
+      body: {}
+    });
+  }
+  /**
+   * The subscribe URL. Never carries a credential — not the bearer, not the
+   * ticket. Query parameters are diagnostics only.
+   */
+  subscribeUrl(key) {
     const wsBase = this.base.replace(/^http/, "ws");
     const params = new URLSearchParams({ surface: "picker", viewerId: this.viewerId });
     return `${wsBase}/pub/events/${encodeURIComponent(key)}/subscribe?${params}`;
   }
+  /**
+   * What PickerController opens its own socket with.
+   *
+   * Empty for an access-scoped client: a private scope authenticates with a
+   * subprotocol ticket, which a URL-only constructor cannot carry, so the SDK's
+   * BuyerRealtimeClient owns that socket instead and the controller skips its
+   * own (an empty URL is its documented "no live feed" contract). A tokenless
+   * public client returns exactly the URL it always has, so nothing about the
+   * public picker's realtime path changes.
+   */
+  socketUrl(key) {
+    return this.accessScoped ? "" : this.subscribeUrl(key);
+  }
+};
+
+// src/buyerAccess.ts
+var BuyerAccessUnavailableError = class extends Error {
+  constructor(event) {
+    super(`buyer_access_unavailable:${event.reason}`);
+    this.name = "BuyerAccessUnavailableError";
+    this.reason = event.reason;
+    this.code = event.code;
+    this.status = event.status;
+  }
+};
+var EXPIRED_CODES = /* @__PURE__ */ new Set(["buyer_access_expired"]);
+var RECOVERABLE = /* @__PURE__ */ new Set([
+  "paused",
+  "provider_failed",
+  "channel_denied"
+]);
+function classifyAccessFailure(status, code) {
+  switch (code) {
+    case "buyer_access_invalid":
+      return "invalid";
+    case "buyer_access_revoked":
+      return "revoked";
+    case "buyer_access_origin_mismatch":
+      return "origin_mismatch";
+    case "buyer_access_event_mismatch":
+      return "event_mismatch";
+    case "buyer_access_mode_mismatch":
+      return "mode_mismatch";
+    case "channel_access_denied":
+      return "channel_denied";
+    case "channel_paused":
+      return "paused";
+    case "invalid_channel_scope":
+      return "invalid_scope";
+    default:
+      break;
+  }
+  if (status === 401) return "invalid";
+  return null;
+}
+function isAccessExpiry(status, code) {
+  return status === 401 && !!code && EXPIRED_CODES.has(code);
+}
+var DEFAULT_SKEW_MS = 3e4;
+var _token, _expiresAt, _provider, _skewMs, _inflight, _terminal, _lastFailure, _onExpired, _onUnavailable, _configured, _BuyerAccessContext_instances, accept_fn, renew_fn, fail_fn;
+var BuyerAccessContext = class {
+  constructor(options) {
+    __privateAdd(this, _BuyerAccessContext_instances);
+    /** Private field: not enumerable, not spreadable, not serializable. */
+    __privateAdd(this, _token, null);
+    __privateAdd(this, _expiresAt, 0);
+    __privateAdd(this, _provider);
+    __privateAdd(this, _skewMs);
+    __privateAdd(this, _inflight, null);
+    __privateAdd(this, _terminal, null);
+    /** The most recent failure, terminal or not — so one cause reports once. */
+    __privateAdd(this, _lastFailure, null);
+    __privateAdd(this, _onExpired);
+    __privateAdd(this, _onUnavailable);
+    /** Decided once, at construction. See the `configured` getter. */
+    __privateAdd(this, _configured, false);
+    __privateSet(this, _provider, options.provider);
+    __privateSet(this, _skewMs, options.skewMs ?? DEFAULT_SKEW_MS);
+    __privateSet(this, _onExpired, options.onExpired);
+    __privateSet(this, _onUnavailable, options.onUnavailable);
+    if (options.token) {
+      const seed = typeof options.token === "string" ? { token: options.token } : options.token;
+      __privateMethod(this, _BuyerAccessContext_instances, accept_fn).call(this, seed);
+    }
+    __privateSet(this, _configured, !!__privateGet(this, _provider) || !!__privateGet(this, _token));
+  }
+  /**
+   * True when this picker is access-scoped at all. A false here is the
+   * tokenless public picker, which must behave exactly as it always has.
+   *
+   * Answered from what the HOST asked for, never from live token state. It used
+   * to be `!!#provider || !!#token`, which quietly inverted this file's central
+   * rule for a one-shot `buyerAccessToken` host: `#fail()` clears `#token`, so
+   * the first refusal turned a configured context into an "unconfigured" one,
+   * `authorization()` then returned null instead of throwing, and the very next
+   * call went out with no bearer — the anonymous Public sale fallback this
+   * module exists to prevent. A provider host never saw it, because `#provider`
+   * held `configured` true. Found against a live worker in the M9 pass.
+   */
+  get configured() {
+    return __privateGet(this, _configured);
+  }
+  /** Set once a state arrives that refreshing cannot clear. */
+  get unavailable() {
+    return __privateGet(this, _terminal);
+  }
+  /** True while a usable bearer is held (ignores skew). */
+  get hasToken() {
+    return !!__privateGet(this, _token) && (__privateGet(this, _expiresAt) === 0 || __privateGet(this, _expiresAt) > Date.now());
+  }
+  /** Epoch ms the current token expires, or 0 when the host didn't say. */
+  get expiresAt() {
+    return __privateGet(this, _expiresAt);
+  }
+  /**
+   * The `Authorization` header value for a scoped operation.
+   *
+   * Returns null only when this context is not configured at all (the ordinary
+   * anonymous public picker). A configured context either returns a bearer or
+   * throws `BuyerAccessUnavailableError` — it never returns null, because a
+   * null here would send the request as anonymous Public sale.
+   */
+  async authorization(reason = "initial") {
+    if (!this.configured) return null;
+    if (__privateGet(this, _terminal)) throw new BuyerAccessUnavailableError(__privateGet(this, _terminal));
+    const now = Date.now();
+    const stale = !__privateGet(this, _token) || __privateGet(this, _expiresAt) > 0 && __privateGet(this, _expiresAt) - __privateGet(this, _skewMs) <= now;
+    if (stale) {
+      const expired = !!__privateGet(this, _token) && __privateGet(this, _expiresAt) > 0 && __privateGet(this, _expiresAt) <= now;
+      const why = __privateGet(this, _token) ? expired ? "expired" : "expiring" : reason;
+      const token = await __privateMethod(this, _BuyerAccessContext_instances, renew_fn).call(this, why);
+      if (!token) {
+        throw new BuyerAccessUnavailableError(
+          __privateGet(this, _terminal) ?? __privateGet(this, _lastFailure) ?? __privateMethod(this, _BuyerAccessContext_instances, fail_fn).call(this, "provider_failed")
+        );
+      }
+      return `Bearer ${token}`;
+    }
+    return `Bearer ${__privateGet(this, _token)}`;
+  }
+  /**
+   * Handle a 401/403 from a scoped call. Returns true when the caller should
+   * retry the same request once with the refreshed bearer.
+   */
+  async handleFailure(status, code) {
+    var _a;
+    if (!this.configured) return false;
+    if (isAccessExpiry(status, code)) {
+      __privateSet(this, _token, null);
+      __privateSet(this, _expiresAt, 0);
+      const token = await __privateMethod(this, _BuyerAccessContext_instances, renew_fn).call(this, "unauthorized", code);
+      (_a = __privateGet(this, _onExpired)) == null ? void 0 : _a.call(this, { reason: "unauthorized", code, refreshed: !!token });
+      return !!token;
+    }
+    const reason = classifyAccessFailure(status, code);
+    if (reason) {
+      __privateMethod(this, _BuyerAccessContext_instances, fail_fn).call(this, reason, code, status);
+      return false;
+    }
+    return false;
+  }
+  /** Host-driven re-acquisition (after the buyer signs in again, say). */
+  async refresh(reason = "manual") {
+    __privateSet(this, _terminal, null);
+    __privateSet(this, _lastFailure, null);
+    __privateSet(this, _token, null);
+    __privateSet(this, _expiresAt, 0);
+    return !!await __privateMethod(this, _BuyerAccessContext_instances, renew_fn).call(this, reason);
+  }
+  /** Drop the bearer. Called on destroy so nothing outlives the widget. */
+  clear() {
+    __privateSet(this, _token, null);
+    __privateSet(this, _expiresAt, 0);
+    __privateSet(this, _inflight, null);
+  }
+  /** Redaction: the bearer must not survive a stringify or an interpolation. */
+  toJSON() {
+    return { configured: this.configured, hasToken: this.hasToken };
+  }
+  toString() {
+    return "[BuyerAccessContext redacted]";
+  }
+};
+_token = new WeakMap();
+_expiresAt = new WeakMap();
+_provider = new WeakMap();
+_skewMs = new WeakMap();
+_inflight = new WeakMap();
+_terminal = new WeakMap();
+_lastFailure = new WeakMap();
+_onExpired = new WeakMap();
+_onUnavailable = new WeakMap();
+_configured = new WeakMap();
+_BuyerAccessContext_instances = new WeakSet();
+// ---- internals ------------------------------------------------------------
+accept_fn = function(next) {
+  if (!next || typeof next.token !== "string" || !next.token) return null;
+  __privateSet(this, _token, next.token);
+  __privateSet(this, _expiresAt, typeof next.expiresAt === "number" ? next.expiresAt : 0);
+  return __privateGet(this, _token);
+};
+/**
+ * One provider call at a time. Several operations racing an expiry (chart +
+ * objects + a socket ticket) must not mint several sessions — the guide's
+ * rotate-on-retry rule would revoke the ones they didn't observe.
+ */
+renew_fn = function(reason, code) {
+  if (__privateGet(this, _inflight)) return __privateGet(this, _inflight);
+  const provider = __privateGet(this, _provider);
+  if (!provider) {
+    __privateMethod(this, _BuyerAccessContext_instances, fail_fn).call(this, "no_token", code);
+    return Promise.resolve(null);
+  }
+  const run = (async () => {
+    try {
+      const next = await provider({ reason });
+      const token = __privateMethod(this, _BuyerAccessContext_instances, accept_fn).call(this, next);
+      if (!token) {
+        __privateMethod(this, _BuyerAccessContext_instances, fail_fn).call(this, "provider_failed", code);
+        return null;
+      }
+      return token;
+    } catch {
+      __privateMethod(this, _BuyerAccessContext_instances, fail_fn).call(this, "provider_failed", code);
+      return null;
+    } finally {
+      __privateSet(this, _inflight, null);
+    }
+  })();
+  __privateSet(this, _inflight, run);
+  return run;
+};
+fail_fn = function(reason, code, status) {
+  var _a;
+  const event = {
+    reason,
+    code,
+    status,
+    // Unchanged: `retryable` means "the SAME request may succeed later".
+    // `provider_failed` is recoverable but not retryable — the host must fix
+    // its mint endpoint first — so the two sets are deliberately different.
+    retryable: reason === "paused" || reason === "channel_denied"
+  };
+  __privateSet(this, _lastFailure, event);
+  if (!RECOVERABLE.has(reason)) {
+    __privateSet(this, _terminal, event);
+    __privateSet(this, _token, null);
+    __privateSet(this, _expiresAt, 0);
+  }
+  (_a = __privateGet(this, _onUnavailable)) == null ? void 0 : _a.call(this, event);
+  return event;
+};
+function createBuyerAccessContext(options, hooks = {}) {
+  if (!options.buyerAccessTokenProvider && !options.buyerAccessToken) return null;
+  return new BuyerAccessContext({
+    provider: options.buyerAccessTokenProvider,
+    token: options.buyerAccessToken,
+    ...hooks
+  });
+}
+
+// src/buyerRealtime.ts
+var SEATLAYER_V1 = "seatlayer.v1";
+var SEP = "\0";
+var CLOSE_ACCESS_REVOKED = 4401;
+var MAX_BACKOFF_MS = 15e3;
+var PING_INTERVAL_MS = 25e3;
+var PONG_GRACE_MS = 1e4;
+var RESUME_ANSWER_GRACE_MS = 5e3;
+function projectionFromSnapshot(frame) {
+  const fallback = typeof frame.default === "string" ? frame.default : "free";
+  const exceptions = {};
+  if (frame.seats && typeof frame.seats === "object") {
+    for (const [label, status] of Object.entries(frame.seats)) {
+      if (typeof status === "string" && status !== fallback) exceptions[label] = status;
+    }
+  }
+  return { default: fallback, exceptions };
+}
+function diffProjections(prev, next) {
+  if (!prev || prev.default !== next.default) return null;
+  const changes = [];
+  for (const [label, status] of Object.entries(next.exceptions)) {
+    if (prev.exceptions[label] !== status) changes.push({ label, status });
+  }
+  for (const label of Object.keys(prev.exceptions)) {
+    if (!(label in next.exceptions)) changes.push({ label, status: next.default });
+  }
+  return changes;
+}
+function applyChanges(projection, changes) {
+  for (const change of changes) {
+    if (change.status === projection.default) delete projection.exceptions[change.label];
+    else projection.exceptions[change.label] = change.status;
+  }
+}
+function assertCredentialFreeUrl(url) {
+  if (/(?:^|[?&#])(?:token|access_token|bearer|authorization|ticket|tkt|bse)=/i.test(url)) {
+    throw new Error("seatlayer: refusing to open a socket with a credential in the URL");
+  }
+  if (/\bbse_[A-Za-z0-9._-]+/.test(url)) {
+    throw new Error("seatlayer: refusing to open a socket with a credential in the URL");
+  }
+}
+var BuyerRealtimeClient = class {
+  constructor(options) {
+    this.ws = null;
+    this.stopped = true;
+    this.attempt = 0;
+    this.reconnectTimer = null;
+    this.pingTimer = null;
+    this.pongTimer = null;
+    this.resumeTimer = null;
+    /** Our model of this scope's projection. Null until the first snapshot. */
+    this.projection = null;
+    /** Last `snapshotVersion` seen on any frame that carried one — the resume point. */
+    this.version = null;
+    /** True once the 101 echoed `seatlayer.v1`. */
+    this.v1 = false;
+    /** Set when we offered v1 and the handshake came back without it — a proxy
+     *  most likely stripped the header, so the next attempt selects the v1 frame
+     *  format with the `?pv=1` marker instead (protocol doc §1). The marker
+     *  selects a format and can never carry a credential or widen a scope. */
+    this.useQueryMarker = false;
+    this.hidden = null;
+    this.closedSections = null;
+    this.opts = options;
+    assertCredentialFreeUrl(options.url);
+  }
+  /** Negotiated protocol, for tests and diagnostics. */
+  get protocol() {
+    return this.ws ? this.v1 ? "v1" : "legacy" : null;
+  }
+  get snapshotVersion() {
+    return this.version;
+  }
+  start() {
+    if (!this.stopped) return;
+    this.stopped = false;
+    void this.connect();
+  }
+  /** Stop for good (destroy, or a revocation). Safe to call twice. */
+  stop() {
+    this.stopped = true;
+    this.clearTimers();
+    const ws = this.ws;
+    this.ws = null;
+    if (ws) {
+      ws.onopen = null;
+      ws.onmessage = null;
+      ws.onclose = null;
+      ws.onerror = null;
+      try {
+        ws.close();
+      } catch {
+      }
+    }
+  }
+  /** Restart after the host re-authorized a revoked buyer (`refreshAccess()`). */
+  restart() {
+    this.stop();
+    this.projection = null;
+    this.version = null;
+    this.attempt = 0;
+    this.start();
+  }
+  // ---- connection -----------------------------------------------------------
+  async connect() {
+    if (this.stopped) return;
+    let protocols = [SEATLAYER_V1];
+    if (this.opts.mintTicket) {
+      let minted;
+      try {
+        minted = await this.opts.mintTicket();
+      } catch (err) {
+        this.reportIfAccessError(err);
+        this.scheduleReconnect();
+        return;
+      }
+      if (this.stopped) return;
+      if (minted?.protocols?.length) {
+        protocols = [...minted.protocols];
+        if (!protocols.includes(SEATLAYER_V1)) protocols.unshift(SEATLAYER_V1);
+      } else if (minted?.ticket) {
+        protocols = [SEATLAYER_V1, `tkt.${minted.ticket}`];
+      }
+    }
+    const offeredResume = this.version !== null;
+    if (offeredResume) protocols.push(`sv.${this.version}`);
+    const url = this.useQueryMarker ? `${this.opts.url}${this.opts.url.includes("?") ? "&" : "?"}pv=1` : this.opts.url;
+    assertCredentialFreeUrl(url);
+    let ws;
+    try {
+      const make = this.opts.socketFactory ?? ((u, p) => new WebSocket(u, p));
+      ws = make(url, protocols);
+    } catch {
+      this.scheduleReconnect();
+      return;
+    }
+    this.ws = ws;
+    ws.onopen = () => {
+      if (this.ws !== ws) return;
+      this.attempt = 0;
+      this.v1 = ws.protocol === SEATLAYER_V1;
+      if (!this.v1) this.useQueryMarker = true;
+      this.startKeepalive(ws);
+      if (offeredResume) {
+        this.resumeTimer = setTimeout(() => {
+          this.resumeTimer = null;
+          void this.opts.sink.resync();
+        }, RESUME_ANSWER_GRACE_MS);
+      } else {
+        void this.opts.sink.resync();
+      }
+    };
+    ws.onmessage = (event) => {
+      if (this.ws !== ws) return;
+      let parsed;
+      try {
+        parsed = JSON.parse(typeof event.data === "string" ? event.data : "");
+      } catch {
+        return;
+      }
+      if (!parsed || typeof parsed !== "object") return;
+      this.handleFrame(parsed);
+    };
+    ws.onclose = (event) => {
+      if (this.ws !== ws) return;
+      this.ws = null;
+      this.clearTimers();
+      if (event?.code === CLOSE_ACCESS_REVOKED) {
+        this.stopped = true;
+        this.opts.onAccessUnavailable?.({
+          reason: "revoked",
+          code: "access_revoked",
+          retryable: false
+        });
+        return;
+      }
+      this.scheduleReconnect();
+    };
+    ws.onerror = () => {
+      try {
+        ws.close();
+      } catch {
+      }
+    };
+  }
+  handleFrame(frame) {
+    const type = typeof frame.type === "string" ? frame.type : "";
+    if (frame.protocol === 1) this.v1 = true;
+    if (typeof frame.snapshotVersion === "number") this.version = frame.snapshotVersion;
+    if (type === "pong") {
+      this.clearPongTimer();
+      return;
+    }
+    if (Array.isArray(frame.hidden) || Array.isArray(frame.closed)) {
+      const hidden = Array.isArray(frame.hidden) ? frame.hidden : [];
+      const closed = Array.isArray(frame.closed) ? frame.closed : [];
+      const hKey = hidden.join(SEP);
+      const cKey = closed.join(SEP);
+      if (hKey !== this.hidden || cKey !== this.closedSections) {
+        this.hidden = hKey;
+        this.closedSections = cKey;
+        this.opts.sink.onSections?.(hidden, closed);
+      }
+    }
+    if (type === "hidden") return;
+    if (type === "presence") {
+      this.opts.sink.onPresence?.({
+        shoppingSessions: Number(frame.shoppingSessions) || 0,
+        activeHolds: Number(frame.activeHolds) || 0
+      });
+      return;
+    }
+    if (type === "allocation") {
+      return;
+    }
+    if (type === "snapshot" || !type && frame.seats) {
+      this.answered();
+      const next = projectionFromSnapshot(frame);
+      const changes = diffProjections(this.projection, next);
+      this.projection = next;
+      if (changes === null) void this.opts.sink.resync();
+      else if (changes.length) this.opts.sink.applyStatuses(changes);
+      return;
+    }
+    if (type === "delta" && Array.isArray(frame.changes)) {
+      this.answered();
+      const changes = frame.changes.filter((c) => typeof c?.label === "string" && typeof c?.status === "string").map((c) => ({ label: c.label, status: c.status }));
+      if (!changes.length) return;
+      if (this.projection) applyChanges(this.projection, changes);
+      this.opts.sink.applyStatuses(changes);
+    }
+  }
+  /** The server answered our resume; cancel the fallback resync. */
+  answered() {
+    if (!this.resumeTimer) return;
+    clearTimeout(this.resumeTimer);
+    this.resumeTimer = null;
+  }
+  reportIfAccessError(err) {
+    const reason = err?.reason;
+    if (err?.name !== "BuyerAccessUnavailableError") return;
+    this.stopped = true;
+    this.opts.onAccessUnavailable?.({
+      reason: reason ?? "invalid",
+      code: err.code,
+      status: err.status,
+      retryable: reason === "paused"
+    });
+  }
+  // ---- keepalive & backoff --------------------------------------------------
+  /**
+   * Liveness is ping/pong, and only ping/pong. A socket that receives nothing
+   * for minutes is the normal, correct state for a narrowly-scoped buyer on a
+   * busy event (protocol doc §5), so quiet time never triggers a reconnect.
+   */
+  startKeepalive(ws) {
+    this.pingTimer = setInterval(() => {
+      if (this.ws !== ws) return;
+      try {
+        ws.send(JSON.stringify({ type: "ping" }));
+      } catch {
+        return;
+      }
+      this.clearPongTimer();
+      this.pongTimer = setTimeout(() => {
+        this.pongTimer = null;
+        try {
+          ws.close();
+        } catch {
+        }
+      }, PONG_GRACE_MS);
+    }, PING_INTERVAL_MS);
+  }
+  scheduleReconnect() {
+    if (this.stopped || this.reconnectTimer) return;
+    const attempt = Math.min(this.attempt++, 5);
+    const delay = Math.min(1e3 * 2 ** attempt, MAX_BACKOFF_MS);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      void this.connect();
+    }, delay);
+  }
+  clearPongTimer() {
+    if (!this.pongTimer) return;
+    clearTimeout(this.pongTimer);
+    this.pongTimer = null;
+  }
+  clearTimers() {
+    if (this.pingTimer) clearInterval(this.pingTimer);
+    this.pingTimer = null;
+    this.clearPongTimer();
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    this.reconnectTimer = null;
+    if (this.resumeTimer) clearTimeout(this.resumeTimer);
+    this.resumeTimer = null;
+  }
 };
+function rendererStatus(wire) {
+  if (wire === "blocked") return "not_for_sale";
+  if (wire === "held" || wire === "booked" || wire === "free" || wire === "not_for_sale") return wire;
+  return "free";
+}
+function createControllerSink(controller, options = {}) {
+  const idsForLabel = (label) => {
+    const table = controller.tableSelection(label);
+    if (table) return table.physicalSeatIds;
+    const id = controller.idForLabel(label);
+    return id ? [id] : [];
+  };
+  return {
+    applyStatuses(changes) {
+      const held = controller.currentHold()?.labels ?? [];
+      const buckets = {
+        free: [],
+        held: [],
+        booked: [],
+        not_for_sale: []
+      };
+      const flashes = [];
+      const lost = [];
+      const selected = new Map(controller.getSelection().map((s) => [s.label, s.id]));
+      for (const change of changes) {
+        const ids = idsForLabel(change.label);
+        if (!ids.length) continue;
+        const next = rendererStatus(change.status);
+        buckets[next].push(...ids);
+        if (options.flashOnLiveChange && next !== "free" && !held.includes(change.label) && ids.some((id) => controller.getStatus(id) === "free")) {
+          const color = next === "held" ? "#f4b740" : "#f43f5e";
+          for (const id of ids) flashes.push({ id, color });
+        }
+        if (next !== "free" && !held.includes(change.label) && selected.has(change.label)) {
+          lost.push(change.label);
+        }
+      }
+      for (const status of ["free", "held", "booked", "not_for_sale"]) {
+        if (buckets[status].length) controller.setStatus(buckets[status], status);
+      }
+      for (const flash of flashes) controller.flashSeat(flash.id, flash.color);
+      if (lost.length) {
+        const ids = lost.flatMap((label) => idsForLabel(label));
+        if (ids.length) controller.deselect(ids);
+        const ineligible = changes.some(
+          (c) => c.status === "blocked" && lost.includes(c.label)
+        );
+        options.onSelectedObjectUnavailable?.(lost, ineligible ? "ineligible" : "taken");
+      }
+      options.onStatusChange?.();
+    },
+    async resync() {
+      await controller.refresh();
+    },
+    /**
+     * Section availability moved. Statuses are re-pulled so the map repaints.
+     *
+     * Known limit: rebuilding the chart when a section is newly HIDDEN (its
+     * seats are stripped, not greyed) lives inside PickerController's own
+     * socket handler and has no public entry point, so an access-scoped picker
+     * repaints statuses but does not restructure the chart until its next
+     * mount. Closing/opening a section — the common mid-sale move — is a
+     * status-level change and is handled here in full.
+     */
+    onSections(hidden, closed) {
+      void controller.refresh();
+      options.onSections?.(hidden, closed);
+    }
+  };
+}
 
 // src/seatLayerBrand.ts
 var SEATLAYER_ATTRIBUTION_MARK_SVG = '<svg viewBox="0 0 64 56" width="12" height="11" fill="none" aria-hidden="true" focusable="false" style="display:block"><path d="M4 13 Q16 6 29 7 L28.5 17 Q17 16.5 7 22 Z" fill="#f4b740"/><path d="M4 13 Q16 6 29 7 L28.5 17 Q17 16.5 7 22 Z" fill="#f4b740" transform="translate(64 0) scale(-1 1)"/><path d="M8 28 Q18 22 28.6 23 L28.2 32 Q18 28.5 10 36 Z" fill="#fcf7ee"/><path d="M8 28 Q18 22 28.6 23 L28.2 32 Q18 28.5 10 36 Z" fill="#fcf7ee" transform="translate(64 0) scale(-1 1)"/><path d="M11 41 Q19 35 28.2 36 L27.8 45 Q19.5 42 13.5 49 Z" fill="#fcf7ee"/><path d="M11 41 Q19 35 28.2 36 L27.8 45 Q19.5 42 13.5 49 Z" fill="#fcf7ee" transform="translate(64 0) scale(-1 1)"/></svg>';
@@ -157,12 +856,21 @@ var SeatingChart = class {
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
     this.onTipMove = null;
+    this.realtime = null;
     if (!options || typeof options !== "object") throw new Error("seatmap: options object is required");
     if (!options.container) throw new Error("seatmap: `container` is required");
     if (!options.event || typeof options.event !== "string") throw new Error("seatmap: `event` key is required");
     this.opts = options;
     this.publicKey = options.publicKey;
-    const api = new PubApi((options.apiBase ?? DEFAULT_API_BASE).replace(/\/+$/, ""));
+    this.access = createBuyerAccessContext(options, {
+      onExpired: (event) => this.opts.onAccessExpired?.(event),
+      onUnavailable: (event) => this.opts.onAccessUnavailable?.(event)
+    });
+    const api = new PubApi((options.apiBase ?? DEFAULT_API_BASE).replace(/\/+$/, ""), {
+      access: this.access ?? void 0,
+      onObjectUnavailable: (event) => this.opts.onSelectedObjectUnavailable?.(event)
+    });
+    this.api = api;
     this.controller = new import_core.PickerController({
       transport: api,
       eventKey: options.event,
@@ -208,6 +916,7 @@ var SeatingChart = class {
       return this;
     }
     this.controller.setViewMode(this.opts.initialView ?? "flat");
+    this.startRealtime();
     this.mode_ = info.mode === "test" ? "test" : "live";
     if (this.opts.seatTooltip !== false) {
       const tip = document.createElement("div");
@@ -459,7 +1168,45 @@ var SeatingChart = class {
     return this.controller.releaseLabels(labels);
   }
   /** Tear everything down: close the socket, stop timers, drop the canvas. */
+  /**
+   * Realtime for an access-scoped chart.
+   *
+   * A tokenless chart never gets here: `access` is null, `PubApi.socketUrl()`
+   * returns the URL it always has, and PickerController keeps its own socket
+   * and its own legacy frames. Nothing about the public path changes.
+   */
+  startRealtime() {
+    if (!this.access?.configured || this.realtime) return;
+    this.realtime = new BuyerRealtimeClient({
+      url: this.api.subscribeUrl(this.opts.event),
+      mintTicket: () => this.api.subscribeTicket(this.opts.event),
+      onAccessUnavailable: (event) => this.opts.onAccessUnavailable?.(event),
+      sink: createControllerSink(this.controller, {
+        flashOnLiveChange: true,
+        onSelectedObjectUnavailable: (labels, reason) => this.opts.onSelectedObjectUnavailable?.({ labels, reason })
+      })
+    });
+    this.realtime.start();
+  }
+  /**
+   * Re-acquire the buyer access session — call after your app has re-authorized
+   * the buyer (a revoked session cannot be recovered any other way). Resolves
+   * true when a fresh bearer is held; the realtime feed restarts with it.
+   */
+  async refreshAccess() {
+    if (!this.access?.configured) return false;
+    const ok = await this.access.refresh("manual");
+    if (ok) {
+      await this.controller.refresh();
+      this.realtime?.restart();
+      if (!this.realtime) this.startRealtime();
+    }
+    return ok;
+  }
   destroy() {
+    this.realtime?.stop();
+    this.realtime = null;
+    this.access?.clear();
     if (this.hostEl && this.onTipMove) this.hostEl.removeEventListener("mousemove", this.onTipMove);
     this.tipEl = null;
     this.onTipMove = null;
@@ -1180,7 +1927,12 @@ var STYLE_ID = "seatlayer-picker-style";
 var 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)}
+  --sl-r-sm:calc(var(--sl-radius) * .55);
+  /* Motion tokens, defined ON the widget root so an embed is self-contained and
+     never inherits (or fights) the host page's own timing. Values mirror
+     docs/motion-system-2026-08-01.md \xA72. */
+  --slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;
+  --slm-mo-out:cubic-bezier(0.2,0.8,0.2,1);--slm-mo-exit:cubic-bezier(0.4,0,1,1)}
 .sl-picker *{box-sizing:border-box;margin:0;padding:0}
 .sl-picker button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 
@@ -1884,9 +2636,24 @@ var CSS = `
 @keyframes slConfirmBelowIn{from{opacity:0;transform:translate(-50%,8px) scale(.96)}to{opacity:1;transform:translate(-50%,16px) scale(1)}}
 @keyframes slConfirmMobileIn{from{opacity:0;transform:translate(-50%,10px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
 
+/* Access state (channels): the panel fades AND rises at --slm-mo-base. It never
+   covers the map \u2014 inventory is cross-faded to neutral by the canvas in one
+   batched pass, so nothing blinks away underneath it. */
+.sl-access{position:absolute;left:50%;bottom:18px;z-index:9;transform:translateX(-50%);
+  max-width:min(420px,calc(100% - 24px));display:flex;gap:12px;align-items:flex-start;
+  padding:12px 14px;border-radius:var(--sl-r-sm);background:var(--sl-panel,#151b2c);color:var(--sl-text);
+  border:1px solid var(--sl-line);box-shadow:0 18px 44px -18px rgba(0,0,0,.6);
+  animation:slAccessIn var(--slm-mo-base) var(--slm-mo-out) both}
+.sl-access-title{font-weight:700;font-size:13px}
+.sl-access-body{font-size:12px;line-height:1.5;opacity:.82;margin-top:2px}
+.sl-access-act{margin-top:8px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;
+  background:var(--sl-accent);color:var(--sl-accent-ink)}
+@keyframes slAccessIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
+
 @media(prefers-reduced-motion:reduce){
   .sl-picker *,.sl-modal-scrim *{animation-duration:.001ms!important;animation-iteration-count:1!important;
     transition-duration:.001ms!important;scroll-behavior:auto!important}
+  .sl-access{animation:none;opacity:1;transform:translate(-50%,0)}
 }
 .sl-ba [data-ba-zone]{grid-column:1/-1;width:100%}
 
@@ -1935,6 +2702,8 @@ function writeStoredColorblind(on) {
 }
 var SeatPicker = class _SeatPicker {
   constructor(options) {
+    this.realtime = null;
+    this.accessEl = null;
     this.root = null;
     this.mapHost = null;
     this.rendered = false;
@@ -2056,7 +2825,21 @@ var SeatPicker = class _SeatPicker {
     if (!options.container) throw new Error("seatmap: `container` is required (or use SeatPicker.open())");
     this.opts = { ...options, confirmSelection: options.confirmSelection ?? true };
     this.apiBase = (options.apiBase ?? DEFAULT_API_BASE2).replace(/\/+$/, "");
-    this.api = options.transport ?? new PubApi(this.apiBase);
+    this.access = options.transport ? null : createBuyerAccessContext(options, {
+      onExpired: (event) => {
+        this.opts.onAccessExpired?.(event);
+        if (!event.refreshed) this.showAccessPanel({ reason: "no_token", retryable: false });
+      },
+      onUnavailable: (event) => {
+        this.opts.onAccessUnavailable?.(event);
+        this.showAccessPanel(event);
+      }
+    });
+    this.pubApi = options.transport ? null : new PubApi(this.apiBase, {
+      access: this.access ?? void 0,
+      onObjectUnavailable: (event) => this.opts.onSelectedObjectUnavailable?.(event)
+    });
+    this.api = options.transport ?? this.pubApi;
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new import_core2.PickerController({
@@ -2600,6 +3383,7 @@ var SeatPicker = class _SeatPicker {
       return this;
     }
     this.els.boot.remove();
+    this.startRealtime();
     this.salesClosed = !!info.salesClosed;
     this.controller.setViewMode(this.normalizeInitialView(this.opts.initialView));
     this.buildRegions();
@@ -3530,7 +4314,7 @@ var SeatPicker = class _SeatPicker {
     this.tableDialog = { ...table };
     this.tableDialogHeld = held;
     this.tableDialogReturnFocus = returnFocus ?? document.activeElement;
-    const esc2 = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) => ({
+    const esc3 = (value) => String(value ?? "").replace(/[&<>"']/g, (ch) => ({
       "&": "&amp;",
       "<": "&lt;",
       ">": "&gt;",
@@ -3542,7 +4326,7 @@ var SeatPicker = class _SeatPicker {
     const typeWord = this.rowTypeWord(table);
     const el = document.createElement("div");
     el.className = "sl-table-scrim";
-    el.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc2(variable ? `Flexible party \xB7 ${typeWord}` : `Whole ${typeWord}`)}</div><h2 class="sl-table-title" id="sl-table-title">${esc2(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? `Choose how many guests will sit together. This table is held exclusively for your party.` : `All ${table.capacity} places are booked together as one exclusive table.`}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc2(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price))} per guest</b><span class="muted">Table capacity</span><span>${table.capacity} guests</span><span class="muted">Total</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">Number of guests</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="Fewer guests">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="More guests">+</button></div><div class="sl-table-range">Choose ${table.minOccupancy}\u2013${table.maxOccupancy} guests</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">Cancel</button><button type="button" class="sl-table-confirm">${held ? "Update table" : variable ? "Select table" : "Select whole table"}</button></div></div></section>`;
+    el.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc3(variable ? `Flexible party \xB7 ${typeWord}` : `Whole ${typeWord}`)}</div><h2 class="sl-table-title" id="sl-table-title">${esc3(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? `Choose how many guests will sit together. This table is held exclusively for your party.` : `All ${table.capacity} places are booked together as one exclusive table.`}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc3(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price))} per guest</b><span class="muted">Table capacity</span><span>${table.capacity} guests</span><span class="muted">Total</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">Number of guests</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="Fewer guests">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="More guests">+</button></div><div class="sl-table-range">Choose ${table.minOccupancy}\u2013${table.maxOccupancy} guests</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">Cancel</button><button type="button" class="sl-table-confirm">${held ? "Update table" : variable ? "Select table" : "Select whole table"}</button></div></div></section>`;
     this.root.appendChild(el);
     this.tableDialogEl = el;
     this.renderTableDialogState();
@@ -4011,7 +4795,7 @@ var SeatPicker = class _SeatPicker {
       (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
     }
     const idGrid = (seatId, label, objectType, quantity = 1, objectId, identity) => {
-      const esc2 = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
+      const esc3 = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
         "&": "&amp;",
         "<": "&lt;",
         ">": "&gt;",
@@ -4023,18 +4807,18 @@ var SeatPicker = class _SeatPicker {
       const typeWord = identity?.displayType?.trim() || d?.displayType?.trim() || area?.displayType?.trim() || (effectiveType === "table" ? "Table" : effectiveType === "booth" ? "Booth" : effectiveType === "ga" ? "General admission" : "Row");
       const buyerName = identity?.rowLabel ?? identity?.displayLabel ?? d?.rowLabel ?? d?.displayLabel ?? area?.displayLabel ?? area?.label ?? label;
       if (effectiveType === "table" && identity?.bookingMode) {
-        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(buyerName)}</span></span><span class="fld mid"><span class="sl-chip-eb">Guests</span><span class="val">${quantity}</span></span></div>`;
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc3(typeWord)}</span><span class="val">${esc3(buyerName)}</span></span><span class="fld mid"><span class="sl-chip-eb">Guests</span><span class="val">${quantity}</span></span></div>`;
       }
       if (effectiveType === "ga") {
-        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(buyerName)}</span></span>` + (quantity > 1 ? `<span class="fld mid"><span class="sl-chip-eb">Tickets</span><span class="val">${quantity}</span></span>` : "") + `</div>`;
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc3(typeWord)}</span><span class="val">${esc3(buyerName)}</span></span>` + (quantity > 1 ? `<span class="fld mid"><span class="sl-chip-eb">Tickets</span><span class="val">${quantity}</span></span>` : "") + `</div>`;
       }
       if (effectiveType === "booth") {
-        return `<div class="sl-chip-id">` + (d?.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc2(d.sectionLabel)}</span></span>` : "") + `<span class="fld mid"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(buyerName)}</span></span></div>`;
+        return `<div class="sl-chip-id">` + (d?.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc3(d.sectionLabel)}</span></span>` : "") + `<span class="fld mid"><span class="sl-chip-eb">${esc3(typeWord)}</span><span class="val">${esc3(buyerName)}</span></span></div>`;
       }
       if (!d?.sectionLabel && !d?.rowLabel && !d?.seatNumber) {
-        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Seat</span><span class="val">${esc2(buyerName)}</span></span></div>`;
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Seat</span><span class="val">${esc3(buyerName)}</span></span></div>`;
       }
-      return `<div class="sl-chip-id">` + (d.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc2(d.sectionLabel)}</span></span>` : "") + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">${esc2(typeWord)}</span><span class="val">${esc2(this.rowShort(d))}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${esc2(d.seatNumber)}</span></span>` : "") + `</div>`;
+      return `<div class="sl-chip-id">` + (d.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc3(d.sectionLabel)}</span></span>` : "") + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">${esc3(typeWord)}</span><span class="val">${esc3(this.rowShort(d))}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${esc3(d.seatNumber)}</span></span>` : "") + `</div>`;
     };
     const iconRail = (rmAria, viewLabel) => `<div class="sl-chip-rail"><button type="button" class="rm" aria-label="${rmAria}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>` + (viewLabel ? `<button type="button" class="view" data-view-label="${viewLabel}" aria-label="${(0, import_core2.t)("picker.viewFromSeat", { label: viewLabel })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "") + `</div>`;
     for (const item of heldItems) {
@@ -4529,19 +5313,19 @@ var SeatPicker = class _SeatPicker {
       this.tipEl.style.display = "none";
       return;
     }
-    const esc2 = (v) => String(v ?? "\u2014").replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
+    const esc3 = (v) => String(v ?? "\u2014").replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
     const price = this.money(this.paidPrice(details.categoryKey, details.tierId ?? null, details.price));
     const isGroupedTable = details.objectType === "table" && !!details.bookingMode;
     const isBooth = details.objectType === "booth";
     const hasLoc = details.sectionLabel || details.rowLabel || details.seatNumber;
-    const grid = isGroupedTable ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Guests</span><span class="sl-tip-val">${details.bookingMode === "variable" ? `${details.minOccupancy}\u2013${details.maxOccupancy}` : details.capacity}</span></div></div>` : isBooth ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div>` : "") + `<div class="sl-tip-field"><span class="sl-tip-key">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div></div>` : hasLoc ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div>` : "") + (details.rowLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(this.rowShort(details))}</span></div>` : "") + (details.seatNumber ? `<div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.seatNumber)}</span></div>` : "") + `</div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.displayLabel ?? details.label)}</span></div></div>`;
+    const grid = isGroupedTable ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">${esc3(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc3(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Guests</span><span class="sl-tip-val">${details.bookingMode === "variable" ? `${details.minOccupancy}\u2013${details.maxOccupancy}` : details.capacity}</span></div></div>` : isBooth ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc3(details.sectionLabel)}</span></div>` : "") + `<div class="sl-tip-field"><span class="sl-tip-key">${esc3(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc3(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div></div>` : hasLoc ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc3(details.sectionLabel)}</span></div>` : "") + (details.rowLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${esc3(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc3(this.rowShort(details))}</span></div>` : "") + (details.seatNumber ? `<div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc3(details.seatNumber)}</span></div>` : "") + `</div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc3(details.displayLabel ?? details.label)}</span></div></div>`;
     const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${details.status === "held" ? (0, import_core2.t)("map.statusHeld") : (0, import_core2.t)("map.statusTaken")}</div>`;
     const limited = this.limitedViewLabel(details.commercial);
-    const cxLine = limited ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u25D0</span>${esc2(limited)}</div>` : "";
+    const cxLine = limited ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u25D0</span>${esc3(limited)}</div>` : "";
     const wheelchair = this.wheelchairProvisionLabel(details.wheelchairSpaceType);
-    const wheelchairLine = wheelchair ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u267F</span>${esc2(wheelchair)}</div>` : "";
+    const wheelchairLine = wheelchair ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u267F</span>${esc3(wheelchair)}</div>` : "";
     this.tipEl.style.setProperty("--sl-cat", details.categoryColor);
-    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc2(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + wheelchairLine + cxLine + statusLine;
+    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc3(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + wheelchairLine + cxLine + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -4939,8 +5723,154 @@ var SeatPicker = class _SeatPicker {
     this.syncTray();
     this.emitHoldChange();
   }
+  // ---- buyer access (Sales Channels) ---------------------------------------
+  /**
+   * Realtime for an access-scoped picker.
+   *
+   * A tokenless picker never gets here: `access` is null, `PubApi.socketUrl()`
+   * returns the URL it always has, and PickerController keeps its own socket
+   * and its own legacy frames. Nothing about the public path changes.
+   */
+  startRealtime() {
+    if (!this.access?.configured || !this.pubApi || this.realtime) return;
+    const event = this.opts.event;
+    this.realtime = new BuyerRealtimeClient({
+      url: this.pubApi.subscribeUrl(event),
+      mintTicket: () => this.pubApi.subscribeTicket(event),
+      onAccessUnavailable: (state) => {
+        this.opts.onAccessUnavailable?.(state);
+        this.showAccessPanel(state);
+      },
+      sink: createControllerSink(this.controller, {
+        flashOnLiveChange: true,
+        onStatusChange: () => {
+          this.syncPrices();
+          this.detectBooked();
+          this.refreshMinimap();
+          this.pushAvailabilityTo3d();
+        },
+        onSelectedObjectUnavailable: (labels, reason) => {
+          this.opts.onSelectedObjectUnavailable?.({ labels, reason });
+          this.syncTray();
+          this.toast(
+            reason === "ineligible" ? this.tf(
+              "picker.seatNoLongerYours",
+              "Some seats are no longer available to you. They have been removed from your order."
+            ) : this.tf(
+              "picker.seatTaken",
+              "Someone else took a seat you had picked. It has been removed from your order."
+            ),
+            "warning"
+          );
+        }
+      })
+    });
+    this.realtime.start();
+  }
+  /**
+   * Re-acquire the buyer access session — call after your app has re-authorized
+   * the buyer. A revoked session cannot recover any other way. Resolves true
+   * when a fresh bearer is held; the map and the realtime feed resume with it.
+   */
+  async refreshAccess() {
+    if (!this.access?.configured) return false;
+    const ok = await this.access.refresh("manual");
+    if (!ok) return false;
+    this.dismissAccessPanel();
+    await this.controller.refresh();
+    if (this.realtime) this.realtime.restart();
+    else this.startRealtime();
+    return true;
+  }
+  /**
+   * The buyer-facing access state. Plain language, no internal vocabulary, and
+   * never a channel name, id or count — the buyer is told what happened and
+   * what to do, not which allocation they missed (guide §7, §10).
+   *
+   * Held seats are deliberately left alone: a hold is relinquished by its own
+   * opaque capability, not by channel access, so losing access never strands
+   * inventory and never silently drops a buyer's cart (guide §9).
+   */
+  showAccessPanel(state) {
+    if (this.destroyed || !this.root) return;
+    const copy = this.accessCopy(state.reason);
+    this.dismissAccessPanel();
+    const panel = document.createElement("div");
+    panel.className = "sl-access";
+    panel.setAttribute("role", "status");
+    panel.setAttribute("aria-live", "polite");
+    const text = document.createElement("div");
+    const title = document.createElement("div");
+    title.className = "sl-access-title";
+    title.textContent = copy.title;
+    const body = document.createElement("div");
+    body.className = "sl-access-body";
+    body.textContent = copy.body;
+    text.appendChild(title);
+    text.appendChild(body);
+    if (copy.action) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "sl-access-act";
+      button.textContent = copy.action;
+      button.addEventListener("click", () => {
+        void this.refreshAccess();
+      });
+      text.appendChild(button);
+    }
+    panel.appendChild(text);
+    (this.regions?.["bottom-center"] ?? this.root).appendChild(panel);
+    this.accessEl = panel;
+  }
+  dismissAccessPanel() {
+    this.accessEl?.remove();
+    this.accessEl = null;
+  }
+  accessCopy(reason) {
+    switch (reason) {
+      case "paused":
+        return {
+          title: this.tf("picker.accessPausedTitle", "These seats are on hold right now"),
+          body: this.tf(
+            "picker.accessPausedBody",
+            "The organizer has paused this selection. Try again in a few minutes."
+          ),
+          action: this.tf("picker.accessRetry", "Try again")
+        };
+      case "revoked":
+        return {
+          title: this.tf("picker.accessRevokedTitle", "This access link is no longer active"),
+          body: this.tf(
+            "picker.accessRevokedBody",
+            "Ask whoever sent you here for a new link to keep booking these seats."
+          )
+        };
+      case "no_token":
+      case "provider_failed":
+        return {
+          title: this.tf("picker.accessExpiredTitle", "Your access session has ended"),
+          body: this.tf(
+            "picker.accessExpiredBody",
+            "Sign in again, or reload the page, to keep browsing these seats. Anything you are already holding stays yours."
+          ),
+          action: this.tf("picker.accessRetry", "Try again")
+        };
+      default:
+        return {
+          title: this.tf("picker.accessInvalidTitle", "We couldn\u2019t verify your access"),
+          body: this.tf(
+            "picker.accessInvalidBody",
+            "You can still book anything shown as available. Contact whoever sent you here for access to the rest."
+          )
+        };
+    }
+  }
   destroy() {
     this.destroyed = true;
+    this.realtime?.stop();
+    this.realtime = null;
+    this.dismissAccessPanel();
+    this.access?.clear();
     if (this.hold && !this.handedOff) void this.controller.release();
     this.closeConfirm();
     this.dismissTableDialog(false);
@@ -5058,28 +5988,246 @@ function attachPickerFrame(iframe, opts = {}) {
 // src/SeatManager.ts
 var import_core3 = require("@seatlayer/core");
 
-// src/manageApi.ts
-var ManageApiError = class extends Error {
-  constructor(status, message, code, conflicts) {
-    super(message);
-    this.name = "ManageApiError";
-    this.status = status;
-    this.code = code;
-    this.conflicts = conflicts;
-  }
-};
-async function parse(res) {
-  const isJson = (res.headers.get("content-type") ?? "").includes("application/json");
-  const data = isJson ? await res.json().catch(() => null) : null;
-  if (!res.ok) {
-    const err = data;
-    throw new ManageApiError(res.status, err?.error ?? `request_failed_${res.status}`, err?.code, err?.conflicts);
+// src/channelPlan.ts
+var PUBLIC_CHANNEL_ID = "";
+var PUBLIC_CHANNEL_NAME = "Public sale";
+var CHANNEL_COLORS = [
+  "#a78bfa",
+  "#2dd4bf",
+  "#fb923c",
+  "#60a5fa",
+  "#f472b6",
+  "#a3e635",
+  "#f87171",
+  "#38bdf8",
+  "#c084fc",
+  "#facc15"
+];
+var PUBLIC_CHANNEL_COLOR = "#f4b740";
+var LETTERS = "ABCDEFGHJKLMNPQRSTUVWXYZ";
+function suggestMarker(name, taken) {
+  const used = new Set([...taken].map((m) => m.trim().toUpperCase()).filter(Boolean));
+  const first = (name.trim()[0] ?? "").toUpperCase();
+  const letter = LETTERS.includes(first) && !used.has(first) ? first : [...LETTERS].find((candidate) => !used.has(candidate)) ?? (first || "X");
+  return { letter, color: CHANNEL_COLORS[used.size % CHANNEL_COLORS.length] };
+}
+function markerOf(channel, index = 0) {
+  if (channel.id === PUBLIC_CHANNEL_ID) {
+    return { letter: (channel.marker || "P").slice(0, 2).toUpperCase(), color: channel.color || PUBLIC_CHANNEL_COLOR };
   }
-  return data;
+  const letter = (channel.marker || channel.name.trim()[0] || "?").slice(0, 2).toUpperCase();
+  return { letter, color: channel.color || CHANNEL_COLORS[index % CHANNEL_COLORS.length] };
 }
-var ManageApi = class {
-  constructor(apiBase, token) {
-    this.base = apiBase.replace(/\/+$/, "");
+function selectionSources(labels, allocation, list) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const label of labels) {
+    const channelId = allocation.get(label) ?? PUBLIC_CHANNEL_ID;
+    counts.set(channelId, (counts.get(channelId) ?? 0) + 1);
+  }
+  const order = [
+    { id: PUBLIC_CHANNEL_ID, name: list?.publicSale.name ?? PUBLIC_CHANNEL_NAME },
+    ...(list?.channels ?? []).map((channel) => ({ id: channel.id, name: channel.name }))
+  ];
+  const rows = [];
+  for (const entry of order) {
+    const count = counts.get(entry.id);
+    if (count) rows.push({ channelId: entry.id, name: entry.name, count });
+    counts.delete(entry.id);
+  }
+  for (const [channelId, count] of counts) {
+    rows.push({ channelId, name: channelId ? "Another channel" : PUBLIC_CHANNEL_NAME, count });
+  }
+  return rows;
+}
+var SKIP_SAMPLE = 12;
+function skipBucket(labels) {
+  return {
+    count: labels.length,
+    labels: labels.slice(0, SKIP_SAMPLE),
+    truncated: labels.length > SKIP_SAMPLE
+  };
+}
+function planAssignment(input) {
+  const { labels, targetChannelId, allocation, statusOf, nameOf } = input;
+  const seen = /* @__PURE__ */ new Set();
+  let fromPublic = 0;
+  let alreadyIn = 0;
+  const movedBySource = /* @__PURE__ */ new Map();
+  const held = [];
+  const booked = [];
+  const missing = [];
+  for (const label of labels) {
+    if (seen.has(label)) continue;
+    seen.add(label);
+    const status = statusOf(label);
+    if (!status) {
+      missing.push(label);
+      continue;
+    }
+    const current = allocation.get(label) ?? PUBLIC_CHANNEL_ID;
+    if (current === targetChannelId) {
+      alreadyIn += 1;
+      continue;
+    }
+    if (status === "held") {
+      held.push(label);
+      continue;
+    }
+    if (status === "booked") {
+      booked.push(label);
+      continue;
+    }
+    if (current === PUBLIC_CHANNEL_ID) fromPublic += 1;
+    else movedBySource.set(current, (movedBySource.get(current) ?? 0) + 1);
+  }
+  const channels = [...movedBySource.entries()].map(([channelId, count]) => ({
+    channelId,
+    name: nameOf(channelId),
+    count
+  }));
+  return {
+    changedFromPublic: { count: fromPublic },
+    movedFromOtherChannel: {
+      count: channels.reduce((sum, row) => sum + row.count, 0),
+      channels
+    },
+    alreadyInTarget: { count: alreadyIn },
+    skippedHeld: skipBucket(held),
+    skippedBooked: skipBucket(booked),
+    notFound: skipBucket(missing)
+  };
+}
+function mutationCount(buckets) {
+  return buckets.changedFromPublic.count + buckets.movedFromOtherChannel.count;
+}
+function needsMoveConfirmation(buckets) {
+  return buckets.movedFromOtherChannel.count > 0;
+}
+function bucketRows(buckets, targetName) {
+  const rows = [];
+  if (buckets.changedFromPublic.count) {
+    rows.push({
+      kind: "add",
+      icon: "+",
+      count: buckets.changedFromPublic.count,
+      text: `${buckets.changedFromPublic.count.toLocaleString()} from ${PUBLIC_CHANNEL_NAME}`
+    });
+  }
+  for (const source of buckets.movedFromOtherChannel.channels) {
+    rows.push({
+      kind: "move",
+      icon: "\u21C4",
+      count: source.count,
+      text: `${source.count.toLocaleString()} moved out of ${source.name ?? "another channel"}`,
+      why: "needs this confirmation"
+    });
+  }
+  if (buckets.alreadyInTarget.count) {
+    rows.push({
+      kind: "same",
+      icon: "=",
+      count: buckets.alreadyInTarget.count,
+      text: `${buckets.alreadyInTarget.count.toLocaleString()} already in ${targetName}`,
+      why: "unchanged"
+    });
+  }
+  if (buckets.skippedHeld.count) {
+    rows.push({
+      kind: "skip",
+      icon: "\u23F8",
+      count: buckets.skippedHeld.count,
+      text: `${buckets.skippedHeld.count.toLocaleString()} in a buyer's checkout`,
+      why: "can't move while held",
+      peek: peekOf(buckets.skippedHeld)
+    });
+  }
+  if (buckets.skippedBooked.count) {
+    rows.push({
+      kind: "skip",
+      icon: "\u{1F512}",
+      count: buckets.skippedBooked.count,
+      text: `${buckets.skippedBooked.count.toLocaleString()} already sold`,
+      why: "sales are never rewritten",
+      peek: peekOf(buckets.skippedBooked)
+    });
+  }
+  if (buckets.notFound.count) {
+    rows.push({
+      kind: "skip",
+      icon: "?",
+      count: buckets.notFound.count,
+      text: `${buckets.notFound.count.toLocaleString()} not on this map`,
+      why: "these seats are no longer part of the event",
+      peek: peekOf(buckets.notFound)
+    });
+  }
+  return rows;
+}
+function peekOf(bucket) {
+  if (!bucket.labels.length) return void 0;
+  const shown = bucket.labels.slice(0, 4).join(", ");
+  return bucket.truncated || bucket.labels.length > 4 ? `${shown}\u2026` : shown;
+}
+function retryAfterCopy(details) {
+  const ms = details?.retryAfterMs ?? (details?.latestHoldExpiresAt ? Math.max(0, details.latestHoldExpiresAt - Date.now()) : 0);
+  if (!ms) return "in a moment";
+  const minutes = Math.ceil(ms / 6e4);
+  if (minutes <= 1) return "in about a minute";
+  return `in about ${minutes} minutes`;
+}
+function accessLine(access) {
+  if (!access || !access.intent) return "\u2014";
+  const base = access.intent === "internal" ? "Internal selling \xB7 no buyer access needed" : access.intent === "server" ? "Server integration" : access.intent === "hosted_link" ? "Hosted access link" : "No buyer access configured";
+  const grants = access.hasActiveGrants ? "in use now" : access.lastMintAt ? `last used ${new Date(access.lastMintAt).toLocaleDateString()}` : null;
+  const detail = access.detail ?? grants;
+  return detail ? `${base} \xB7 ${detail}` : base;
+}
+function accessIntentLabel(intent) {
+  return intent === "internal" ? "Internal selling \u2014 our own staff sell these" : intent === "server" ? "Server integration \u2014 our backend lets buyers in" : intent === "hosted_link" ? "Hosted access link \u2014 SeatLayer issues the link" : "No buyer access yet \u2014 the allocation is just protected";
+}
+function dropReviewRows(details) {
+  return (details?.channels ?? []).map((channel) => ({
+    kind: "skip",
+    icon: "\u26A0",
+    count: channel.count,
+    text: `${channel.count.toLocaleString()} would leave ${channel.name ?? "a channel"}`,
+    why: "the new chart no longer has these seats",
+    peek: channel.labels?.length ? peekOf({ count: channel.count, labels: channel.labels, truncated: channel.truncated ?? false }) : void 0
+  }));
+}
+function stateBadge(state) {
+  return state === "builtin" ? "Built-in" : state === "active" ? "Active" : state === "paused" ? "Paused" : "Archived";
+}
+
+// src/manageApi.ts
+var ManageApiError = class extends Error {
+  constructor(status, message, code, conflicts, details) {
+    super(message);
+    this.name = "ManageApiError";
+    this.status = status;
+    this.code = code;
+    this.conflicts = conflicts;
+    this.details = details;
+  }
+};
+async function parse(res) {
+  const isJson = (res.headers.get("content-type") ?? "").includes("application/json");
+  const data = isJson ? await res.json().catch(() => null) : null;
+  if (!res.ok) {
+    const err = data;
+    throw new ManageApiError(
+      res.status,
+      err?.error ?? `request_failed_${res.status}`,
+      err?.code,
+      err?.conflicts,
+      err?.details
+    );
+  }
+  return data;
+}
+var ManageApi = class {
+  constructor(apiBase, token) {
+    this.base = apiBase.replace(/\/+$/, "");
     this.token = token;
   }
   /** Swap the Bearer token in place (SeatManager re-mints on 401). */
@@ -5151,6 +6299,97 @@ var ManageApi = class {
   setAvailability(key, rules) {
     return this.auth(`/v1/events/${encodeURIComponent(key)}/availability`, { method: "POST", body: { rules } });
   }
+  // ---- sales channels (token, capability-gated) ----
+  // Reads need `event:channels:view`, mutations `event:channels:manage`.
+  // `event:block` grants NEITHER (spec §10), so a Block-only cockpit token gets
+  // a 403 here and Channels mode never renders.
+  /** Allocation list with exact per-channel counts. `includeArchived` adds the
+   *  read-only archived rows behind the rail's "Show archived" control. */
+  channels(key, opts = {}) {
+    const qs = opts.includeArchived ? "?includeArchived=1" : "";
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels${qs}`);
+  }
+  /** One page of the label → channel map that paints the allocation overlay.
+   *  Paged by label; follow `nextAfterLabel` until it is null. */
+  channelAllocation(key, opts = {}) {
+    const params = new URLSearchParams();
+    if (opts.afterLabel) params.set("afterLabel", opts.afterLabel);
+    if (opts.limit != null) params.set("limit", String(opts.limit));
+    const qs = params.toString();
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels/allocation${qs ? `?${qs}` : ""}`);
+  }
+  channelAudit(key, opts = {}) {
+    const params = new URLSearchParams();
+    if (opts.limit != null) params.set("limit", String(opts.limit));
+    if (opts.before != null) params.set("before", String(opts.before));
+    const qs = params.toString();
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels/audit${qs ? `?${qs}` : ""}`);
+  }
+  createChannel(key, input) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels`, { method: "POST", body: input });
+  }
+  renameChannel(key, channelId, name) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels/${encodeURIComponent(channelId)}`, {
+      method: "PATCH",
+      body: { name }
+    });
+  }
+  setChannelPaused(key, channelId, paused) {
+    const path = paused ? "pause" : "unpause";
+    return this.auth(
+      `/v1/events/${encodeURIComponent(key)}/channels/${encodeURIComponent(channelId)}/${path}`,
+      { method: "POST", body: {} }
+    );
+  }
+  /** Archive with a mandatory destination for the remaining allocation.
+   *  Throws ManageApiError 409 `channel_archive_blocked_by_holds` while any hold
+   *  is live; `err.details` carries the exact counts + retry window. */
+  archiveChannel(key, channelId, destination) {
+    return this.auth(
+      `/v1/events/${encodeURIComponent(key)}/channels/${encodeURIComponent(channelId)}/archive`,
+      { method: "POST", body: { destination } }
+    );
+  }
+  /**
+   * Versioned Apply. A stale `assignmentVersion` mutates NOTHING and throws
+   * ManageApiError 409 `channel_assignment_conflict` — the caller keeps its
+   * selection and offers "Refresh and review". There is no dry-run: the review
+   * sheet previews locally, this call returns the authoritative buckets.
+   */
+  applyChannelAssignment(key, input) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels/assignments`, {
+      method: "POST",
+      body: {
+        targetChannelId: input.targetChannelId || null,
+        labels: input.labels,
+        assignmentVersion: input.assignmentVersion
+      }
+    });
+  }
+  /**
+   * Read-only buyer projection for an audience (§8.6) — the SAME scoped server
+   * view the buyer SDK receives, never a local approximation.
+   *
+   * Ships on the access-hardening branch. Older workers 404/405 here; callers
+   * MUST feature-detect and quietly say the preview needs a newer server rather
+   * than faking a projection client-side.
+   */
+  channelPreview(key, channelIds, opts = {}) {
+    const params = new URLSearchParams();
+    if (channelIds.length) params.set("channelIds", channelIds.join(","));
+    if (opts.includePublic != null) params.set("includePublic", opts.includePublic ? "1" : "0");
+    const qs = params.toString();
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels/preview${qs ? `?${qs}` : ""}`);
+  }
+  /** Declare how buyers are meant to reach this channel. Drives the rail's
+   *  access line and turns "No buyer access configured" from information into a
+   *  warning when the organizer says the channel is for buyer self-service. */
+  setChannelAccessIntent(key, channelId, accessIntent) {
+    return this.auth(`/v1/events/${encodeURIComponent(key)}/channels/${encodeURIComponent(channelId)}`, {
+      method: "PATCH",
+      body: { accessIntent }
+    });
+  }
   // ---- reports (token) ----
   report(key) {
     return this.auth(`/v1/events/${encodeURIComponent(key)}/report`);
@@ -5177,6 +6416,1369 @@ var ManageApi = class {
   }
 };
 
+// src/channelsMode.ts
+var POLL_MS = 1e4;
+var MAX_FLAGS = 8;
+var SEAT_LIST_PAGE = 300;
+var CHANNELS_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)}
+
+/* map overlay: ONE layer, faded in as a whole (never per seat) */
+.slm-ch-layer{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity var(--slm-mo-base) var(--slm-mo-out)}
+.slm-ch-layer.on{opacity:1}
+.slm-ch-canvas{position:absolute;inset:0;width:100%;height:100%}
+.slm-ch-flag{position:absolute;display:flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;
+  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}
+
+/* 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;
+  border-radius:999px;background:rgba(14,16,23,.92);border:1px solid var(--slm-line);font-size:12px;font-weight:700;
+  transform:translate(-50%,-8px);opacity:0;pointer-events:none;
+  transition:opacity var(--slm-mo-base) var(--slm-mo-out),transform var(--slm-mo-base) var(--slm-mo-out)}
+.slm-ch-banner.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
+.slm-ch-banner .dot{width:8px;height:8px;border-radius:50%}
+.slm-ch-banner button{color:var(--slm-accent);font-weight:800;font-size:11.5px;min-height:32px}
+.slm.ch-preview .slm-ch-flag{opacity:0;transition:opacity var(--slm-mo-base) var(--slm-mo-out)}
+
+/* sticky staged bar */
+.slm-ch-staged{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;display:flex;align-items:center;gap:12px;
+  padding:10px 14px;min-height:44px;border-radius:12px;background:rgba(24,27,36,.96);border:1px solid var(--slm-line);
+  box-shadow:0 12px 34px rgba(0,0,0,.45);font-size:12.5px;pointer-events:auto;
+  transform:translateY(calc(100% + 18px));opacity:0;
+  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 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;
+  background:#f4b740;color:#1a1200;font-weight:800;font-size:12.5px}
+.slm-ch-staged .drop{color:var(--slm-muted);font-weight:700;font-size:11.5px;min-height:44px;padding-inline:8px}
+.slm-ch-tick{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
+  background:#fff;color:#1f7a4d;font-weight:900;font-size:11px;animation:slm-ch-tick var(--slm-mo-base) var(--slm-mo-spring)}
+@keyframes slm-ch-shake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
+@keyframes slm-ch-tick{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
+
+/* rail */
+.slm-ch-viewseg{display:flex;gap:3px;padding:3px;border:1px solid var(--slm-line);border-radius:9px;
+  background:var(--slm-surface);margin-bottom:12px}
+.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-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)}
+.slm-ch-row:hover{border-color:var(--slm-muted)}
+.slm-ch-row.on{border-color:var(--slm-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--slm-accent) 40%,transparent)}
+.slm-ch-row.public{background:linear-gradient(100deg,rgba(244,183,64,.09),var(--slm-surface) 60%)}
+.slm-ch-row.archived{opacity:.68}
+.slm-ch-head{display:flex;align-items:center;gap:8px}
+.slm-ch-mk{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:800;
+  color:#0e1017;flex:none}
+.slm-ch-mk.dim{opacity:.55}
+.slm-ch-name{flex:1;min-width:0;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.slm-ch-badge{flex:none;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
+.slm-ch-badge.active{background:rgba(34,160,107,.16);color:#5bd39b}
+.slm-ch-badge.paused,.slm-ch-badge.builtin{background:rgba(244,183,64,.15);color:#f7ca6b}
+.slm-ch-badge.archived{background:rgba(139,148,172,.18);color:#c2c9d8}
+.slm-ch-counts{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:11px;color:var(--slm-muted);
+  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)}
+@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}
+.slm-ch-selsrc{display:flex;flex-direction:column;gap:5px;margin:8px 0 12px}
+.slm-ch-selsrc-row{display:flex;align-items:center;gap:8px;font-size:12px;font-variant-numeric:tabular-nums}
+.slm-ch-selsrc-row .mk{width:15px;height:15px;border-radius:4px;display:grid;place-items:center;font-size:8px;
+  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-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.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}
+.slm-ch-legend{display:flex;flex-direction:column;gap:6px;margin-top:10px}
+.slm-ch-legend .r{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--slm-muted)}
+.slm-ch-legend .sw{width:13px;height:13px;border-radius:3.5px;flex:none}
+.slm-ch-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+
+/* dialogs */
+.slm-ch-scrim{position:absolute;inset:0;z-index:12;background:rgba(4,6,12,.62);display:grid;place-items:center;
+  padding:18px;animation:slm-ch-fade var(--slm-mo-quick) var(--slm-mo-out)}
+.slm-ch-dialog{width:min(460px,100%);max-height:100%;overflow:auto;background:#12151f;border:1px solid var(--slm-line);
+  border-radius:14px;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.6);
+  animation:slm-ch-rise var(--slm-mo-base) var(--slm-mo-out)}
+.slm-ch-dialog h3{margin:0 0 4px;font-size:16px;font-weight:800;letter-spacing:-.01em}
+.slm-ch-dialog .sub{font-size:12.5px;color:var(--slm-muted);line-height:1.5;margin-bottom:14px}
+.slm-ch-dialog .foot{display:flex;gap:8px;margin-top:16px}
+.slm-ch-dialog .foot .slm-btn{flex:1;min-width:0}
+.slm-ch-dialog .foot .quiet{flex:none;padding:10px 14px;min-height:44px;color:var(--slm-muted);font-weight:700;font-size:13px}
+@keyframes slm-ch-fade{from{opacity:0}to{opacity:1}}
+@keyframes slm-ch-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
+.slm-ch-bucket{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:9px 4px;
+  border-top:1px solid var(--slm-line);font-size:12.5px;animation:slm-ch-bucket var(--slm-mo-base) var(--slm-mo-out) both}
+.slm-ch-bucket:first-of-type{border-top:0}
+.slm-ch-bucket .ico{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:10px;font-weight:800}
+.slm-ch-bucket .ico.add{background:rgba(34,160,107,.18);color:#5bd39b}
+.slm-ch-bucket .ico.move{background:rgba(167,139,250,.18);color:#c4b5fd}
+.slm-ch-bucket .ico.same{background:rgba(139,148,172,.14);color:#aab2c4}
+.slm-ch-bucket .ico.skip{background:rgba(244,183,64,.16);color:#f7ca6b}
+.slm-ch-bucket b{font-variant-numeric:tabular-nums;font-weight:800}
+.slm-ch-bucket .why{color:var(--slm-muted);font-size:11px}
+.slm-ch-bucket .peek{color:var(--slm-muted);font-size:11px;font-variant-numeric:tabular-nums}
+@keyframes slm-ch-bucket{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+.slm-ch-secret{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px dashed rgba(244,183,64,.55);
+  border-radius:10px;background:rgba(244,183,64,.06);font-family:ui-monospace,Menlo,monospace;font-size:11px;
+  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.slm-ch-err{color:#f1a4a6;font-size:11.5px;margin-top:6px}
+.slm-ch-seatlist{max-height:44vh;overflow:auto;border:1px solid var(--slm-line);border-radius:10px;
+  background:var(--slm-surface);margin-top:10px}
+.slm-ch-seatgroup{padding:8px 10px;border-bottom:1px solid var(--slm-line);display:flex;align-items:center;
+  justify-content:space-between;gap:8px;font-size:11px;font-weight:800;color:var(--slm-muted);position:sticky;top:0;
+  background:var(--slm-surface)}
+.slm-ch-seatgroup button{color:var(--slm-accent);font-weight:800;font-size:11px;min-height:32px}
+.slm-ch-seatitem{display:flex;width:100%;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid var(--slm-line);
+  text-align:left;font-size:12px}
+.slm-ch-seatitem .box{width:16px;height:16px;border-radius:4px;border:1px solid var(--slm-muted);display:grid;
+  place-items:center;font-size:10px;font-weight:900;color:transparent;flex:none}
+.slm-ch-seatitem[aria-checked="true"] .box{border-color:var(--slm-accent);background:var(--slm-accent);color:var(--slm-accent-ink)}
+.slm-ch-seatitem .meta{margin-left:auto;color:var(--slm-muted);font-size:10.5px}
+
+/* compact: bottom sheet with three detents (\xA713) */
+.slm.compact.ch-sheet .slm-rail{position:absolute;left:0;right:0;bottom:0;z-index:8;border-top:1px solid var(--slm-line);
+  border-radius:18px 18px 0 0;background:#12151f;
+  transition:height var(--slm-mo-slow) var(--slm-mo-in-out)}
+.slm.compact.ch-sheet.detent-collapsed .slm-rail{height:132px}
+.slm.compact.ch-sheet.detent-medium .slm-rail{height:46%}
+.slm.compact.ch-sheet.detent-full .slm-rail{height:92%}
+.slm.compact.ch-sheet .slm-railscroll{padding:8px 14px calc(12px + env(safe-area-inset-bottom,0px))}
+.slm-ch-grab{display:none}
+.slm.compact.ch-sheet .slm-ch-grab{display:flex;align-items:center;gap:10px;width:100%;padding:6px 0 10px}
+.slm-ch-grabbar{width:42px;height:4px;border-radius:2px;background:rgba(255,255,255,.22);margin:0 auto}
+.slm.compact .slm-ch-staged{bottom:auto;top:8px}
+.slm.compact .slm-btn,.slm.compact .slm-ch-row,.slm.compact .slm-ch-viewseg button{min-height:44px}
+.slm-tools{display:none}
+.slm.compact .slm-tools{display:block;width:100%;padding:9px 13px;min-height:44px;border:1px solid var(--slm-line);
+  border-radius:10px;background:var(--slm-surface);color:var(--slm-text);font-size:13px;font-weight:800}
+.slm.compact .slm-modes{display:none}
+
+@media (prefers-reduced-motion:reduce){
+  .slm-ch-layer,.slm-ch-banner,.slm-ch-staged,.slm-ch-row,.slm.compact.ch-sheet .slm-rail{transition:none!important}
+  .slm-ch-staged.shake,.slm-ch-tick,.slm-ch-bucket,.slm-ch-scrim,.slm-ch-dialog,
+  .slm-ch-counts b.bump,.slm-ch-selnum.bump{animation:none!important}
+  .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">
+      <span class="ico ${row.kind}" aria-hidden="true">${esc(row.icon)}</span>
+      <span><b>${row.count.toLocaleString()}</b> ${esc(row.text.replace(/^[\d,.\s]+/, ""))}
+        ${row.why ? `<span class="why">\u2014 ${esc(row.why)}</span>` : ""}</span>
+      ${row.peek ? `<span class="peek">${esc(row.peek)}</span>` : "<span></span>"}
+    </div>`).join("");
+}
+function esc(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+var ChannelsMode = class {
+  constructor(host, capabilities) {
+    this.active = false;
+    this.list = null;
+    this.allocation = /* @__PURE__ */ new Map();
+    this.assignmentVersion = 0;
+    this.loadError = null;
+    this.loading = true;
+    this.view = "inspect";
+    this.showArchived = false;
+    this.detailChannelId = null;
+    this.targetChannelId = "";
+    this.conflict = false;
+    this.dialog = null;
+    this.detent = "medium";
+    this.seatListLimit = SEAT_LIST_PAGE;
+    this.previewAudience = [];
+    this.previewIncludePublic = false;
+    this.previewProjection = null;
+    this.previewSupported = null;
+    // null = not yet probed
+    this.pollTimer = null;
+    this.layer = null;
+    this.canvas = null;
+    /** undefined = not resolved yet, null = this environment has no 2d canvas. */
+    this.ctx = void 0;
+    this.bannerEl = null;
+    this.stagedEl = null;
+    this.liveEl = null;
+    this.scrimEl = null;
+    this.lastFocus = null;
+    this.stagedDoneTimer = null;
+    this.lastSelectionCount = 0;
+    this.lastCounts = /* @__PURE__ */ new Map();
+    this.host = host;
+    this.caps = capabilities;
+  }
+  // ---- lifecycle ------------------------------------------------------------
+  /** Called when the cockpit switches into Channels mode. */
+  enter() {
+    if (this.active) return;
+    this.active = true;
+    this.ensureLayer();
+    this.host.root.classList.add("ch-mode");
+    this.applySheetClasses();
+    this.paintRail();
+    void this.refresh();
+    this.pollTimer = setInterval(() => {
+      void this.refresh({ quiet: true });
+    }, POLL_MS);
+  }
+  /** Called when the cockpit leaves Channels mode. Everything this mode painted
+   *  over the map goes with it — no other tool ever inherits a channel overlay. */
+  leave() {
+    if (!this.active) return;
+    this.active = false;
+    if (this.pollTimer) clearInterval(this.pollTimer);
+    this.pollTimer = null;
+    this.closeDialog({ restoreFocus: false });
+    this.layer?.classList.remove("on");
+    this.host.root.classList.remove(
+      "ch-mode",
+      "ch-preview",
+      "ch-sheet",
+      "detent-collapsed",
+      "detent-medium",
+      "detent-full"
+    );
+    this.setBanner(false);
+    this.setStaged(null);
+  }
+  destroy() {
+    this.leave();
+    if (this.stagedDoneTimer) clearTimeout(this.stagedDoneTimer);
+    this.layer?.remove();
+    this.layer = null;
+  }
+  /** Capabilities can change when a token rotates. Re-render, fail-closed. */
+  setCapabilities(capabilities) {
+    this.caps = capabilities;
+    if (this.active) this.paintRail();
+  }
+  isActive() {
+    return this.active;
+  }
+  /**
+   * Whether the map should accept bulk selection right now. Preview is a
+   * read-only simulation of somebody else's view, and a view-only token has no
+   * assignment to stage — in both cases the canvas must not offer selection at
+   * all rather than collect a selection nothing can act on.
+   */
+  canSelect() {
+    return this.caps.manage && this.view === "inspect";
+  }
+  /**
+   * Organizer realtime integration point. M5 ships a per-scope socket for
+   * buyers; the organizer channel-count stream is a later milestone. When it
+   * arrives, call this from the cockpit's WS handler instead of waiting for the
+   * poll — everything downstream already reacts to a fresh list.
+   */
+  applyRealtimeHint() {
+    if (this.active) void this.refresh({ quiet: true });
+  }
+  /** The cockpit's selection changed (marquee / click / section / category). */
+  handleSelectionChange() {
+    if (!this.active) return;
+    this.paintSelection();
+    this.paintStagedBar();
+  }
+  /** Camera moved or the container resized — the overlay is screen-space. */
+  handleViewChange() {
+    if (this.active) this.paintOverlay();
+  }
+  handleLayoutChange() {
+    if (!this.active) return;
+    this.applySheetClasses();
+    this.paintOverlay();
+  }
+  // ---- data -----------------------------------------------------------------
+  async refresh(opts = {}) {
+    if (!this.caps.view) return;
+    try {
+      const list = await this.host.api.channels(this.host.eventKey, { includeArchived: this.showArchived });
+      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();
+      this.loading = false;
+      if (this.active) {
+        this.paintRail();
+        this.paintOverlay();
+      }
+    } catch (err) {
+      this.loading = false;
+      if (err instanceof ManageApiError && err.status === 403) {
+        this.caps = { view: false, manage: false };
+      }
+      this.loadError = err;
+      if (!opts.quiet) this.host.onError(err);
+      if (this.active) this.paintRail();
+    }
+  }
+  /** 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() {
+    const next = /* @__PURE__ */ new Map();
+    let afterLabel;
+    for (let page = 0; page < 200; page += 1) {
+      const res = await this.host.api.channelAllocation(this.host.eventKey, {
+        afterLabel,
+        limit: 1e3
+      });
+      for (const row of res.allocations) {
+        if (row.channelId && row.channelId !== PUBLIC_CHANNEL_ID) next.set(row.label, row.channelId);
+      }
+      this.assignmentVersion = res.assignmentVersion;
+      if (!res.nextAfterLabel) break;
+      afterLabel = res.nextAfterLabel;
+    }
+    this.allocation = next;
+  }
+  // ---- lookups --------------------------------------------------------------
+  channelById(id) {
+    if (id === PUBLIC_CHANNEL_ID) {
+      return { id, name: this.list?.publicSale.name ?? PUBLIC_CHANNEL_NAME, marker: "P", color: null };
+    }
+    const found = this.list?.channels.find((channel) => channel.id === id);
+    return found ? { id, name: found.name, marker: found.marker, color: found.color } : null;
+  }
+  nameOf(id) {
+    return this.channelById(id)?.name ?? null;
+  }
+  markerFor(id) {
+    const index = Math.max(0, this.list?.channels.findIndex((channel2) => channel2.id === id) ?? 0);
+    const channel = this.channelById(id);
+    return markerOf(channel ?? { id, name: "?", marker: null, color: null }, index);
+  }
+  /** Channels an organizer may assign INTO: public sale plus every live channel. */
+  assignableChannels() {
+    return [
+      { id: PUBLIC_CHANNEL_ID, name: this.list?.publicSale.name ?? PUBLIC_CHANNEL_NAME },
+      ...(this.list?.channels ?? []).filter((channel) => channel.state !== "archived").map((channel) => ({ id: channel.id, name: channel.name }))
+    ];
+  }
+  currentPlan() {
+    const labels = this.host.selectionLabels();
+    const buckets = planAssignment({
+      labels,
+      targetChannelId: this.targetChannelId,
+      allocation: this.allocation,
+      statusOf: (label) => this.host.statusOf(label),
+      nameOf: (id) => this.nameOf(id)
+    });
+    return { labels, buckets, target: this.targetChannelId };
+  }
+  // ---- map overlay ----------------------------------------------------------
+  ensureLayer() {
+    if (this.layer) return;
+    const layer = document.createElement("div");
+    layer.className = "slm-ch-layer";
+    layer.innerHTML = `
+      <canvas class="slm-ch-canvas" data-ch="canvas" aria-hidden="true"></canvas>
+      <div class="slm-ch-banner" data-ch="banner" role="status"></div>
+      <div class="slm-ch-staged" data-ch="staged" role="group" aria-label="Staged channel changes"></div>
+      <div class="slm-ch-live" data-ch="live" role="status" aria-live="polite"></div>`;
+    this.host.mapLayer.appendChild(layer);
+    this.layer = layer;
+    this.canvas = layer.querySelector('[data-ch="canvas"]');
+    this.bannerEl = layer.querySelector('[data-ch="banner"]');
+    this.stagedEl = layer.querySelector('[data-ch="staged"]');
+    this.liveEl = layer.querySelector('[data-ch="live"]');
+    requestAnimationFrame(() => layer.classList.add("on"));
+  }
+  announce(message) {
+    if (this.liveEl) this.liveEl.textContent = message;
+  }
+  /**
+   * 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.
+   */
+  paintOverlay() {
+    const canvas = this.canvas;
+    const layer = this.layer;
+    if (!canvas || !layer) return;
+    const rect = this.host.mapLayer.getBoundingClientRect();
+    const width = Math.max(1, Math.round(rect.width));
+    const height = Math.max(1, Math.round(rect.height));
+    const dpr = typeof devicePixelRatio === "number" ? Math.min(3, Math.max(1, devicePixelRatio)) : 1;
+    if (canvas.width !== width * dpr || canvas.height !== height * dpr) {
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+    }
+    if (this.ctx === void 0) {
+      try {
+        this.ctx = canvas.getContext("2d");
+      } catch {
+        this.ctx = null;
+      }
+    }
+    const ctx = this.ctx;
+    if (!ctx) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, width, height);
+    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();
+    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;
+      if (channelId !== PUBLIC_CHANNEL_ID) {
+        const cluster = clusters.get(channelId) ?? { x: 0, y: 0, n: 0 };
+        cluster.x += seat.x;
+        cluster.y += seat.y;
+        cluster.n += 1;
+        clusters.set(channelId, cluster);
+      }
+      if (status !== "free") continue;
+      let fill = null;
+      if (this.view === "preview") {
+        fill = eligible ? eligible.has(seat.label) ? null : "#3a4051" : null;
+      } else if (channelId !== PUBLIC_CHANNEL_ID) {
+        fill = this.markerFor(channelId).color;
+      }
+      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;
+      ctx.fillStyle = fill;
+      ctx.globalAlpha = this.view === "preview" ? 0.9 : 0.85;
+      ctx.fillRect(point.x - half, point.y - half, size, size);
+    }
+    ctx.globalAlpha = 1;
+    this.paintFlags(clusters);
+  }
+  /** Letter flags at each channel's centroid — the non-color identity cue. */
+  paintFlags(clusters) {
+    const layer = this.layer;
+    if (!layer) return;
+    layer.querySelectorAll(".slm-ch-flag").forEach((el) => el.remove());
+    if (this.view === "preview") return;
+    const ranked = [...clusters.entries()].sort((a, b) => b[1].n - a[1].n).slice(0, MAX_FLAGS);
+    for (const [channelId, cluster] of ranked) {
+      const channel = this.list?.channels.find((item) => item.id === channelId);
+      if (!channel) continue;
+      const point = this.host.worldToScreen({ x: cluster.x / cluster.n, y: cluster.y / cluster.n });
+      if (!point) continue;
+      const marker = this.markerFor(channelId);
+      const flag = document.createElement("span");
+      flag.className = "slm-ch-flag";
+      flag.style.left = `${point.x}px`;
+      flag.style.top = `${point.y}px`;
+      flag.innerHTML = `<span class="mk" style="background:${esc(marker.color)}">${esc(marker.letter)}</span>${esc(channel.name)}${channel.state === "paused" ? " \xB7 Paused" : ""}`;
+      layer.appendChild(flag);
+    }
+  }
+  // ---- staged bar -----------------------------------------------------------
+  setStaged(html, cls = "") {
+    const bar = this.stagedEl;
+    if (!bar) return;
+    if (!html) {
+      bar.classList.remove("on", "done", "shake");
+      bar.innerHTML = "";
+      return;
+    }
+    bar.innerHTML = html;
+    bar.className = `slm-ch-staged on${cls ? ` ${cls}` : ""}`;
+  }
+  paintStagedBar() {
+    if (!this.active || this.view === "preview" || !this.caps.manage) {
+      this.setStaged(null);
+      return;
+    }
+    const { labels, buckets } = this.currentPlan();
+    this.host.onStagedChange?.(mutationCount(buckets));
+    if (!labels.length) {
+      this.setStaged(null);
+      return;
+    }
+    const target = this.nameOf(this.targetChannelId) ?? PUBLIC_CHANNEL_NAME;
+    const mutations = mutationCount(buckets);
+    const skipped = buckets.skippedHeld.count + buckets.skippedBooked.count;
+    const parts = [
+      `<b>${labels.length.toLocaleString()}</b> selected`,
+      `<b>+${mutations.toLocaleString()}</b> to ${esc(target)}`
+    ];
+    if (buckets.alreadyInTarget.count) parts.push(`<b>${buckets.alreadyInTarget.count.toLocaleString()}</b> already in`);
+    if (skipped) parts.push(`<b>${skipped.toLocaleString()}</b> can't move now`);
+    this.setStaged(`
+      <span>${parts.join(" \xB7 ")}</span>
+      <span class="grow"></span>
+      <button type="button" class="drop" data-ch-act="discard">Discard</button>
+      <button type="button" class="go" data-ch-act="review">Review changes</button>`);
+    this.stagedEl?.querySelectorAll("[data-ch-act]").forEach((button) => {
+      button.addEventListener("click", () => {
+        if (button.dataset.chAct === "discard") this.host.clearSelection();
+        else this.openDialog({ kind: "review" });
+      });
+    });
+  }
+  setBanner(on, name = "") {
+    const banner = this.bannerEl;
+    if (!banner) return;
+    this.host.root.classList.toggle("ch-preview", on);
+    if (!on) {
+      banner.classList.remove("on");
+      banner.innerHTML = "";
+      return;
+    }
+    const marker = this.previewAudience.length === 1 ? this.markerFor(this.previewAudience[0]) : { color: "var(--slm-accent)", letter: "" };
+    banner.innerHTML = `<span class="dot" style="background:${esc(marker.color)}"></span>
+      Previewing buyer access \xB7 ${esc(name)} \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"));
+  }
+  // ---- rail -----------------------------------------------------------------
+  setView(view) {
+    this.view = view;
+    if (view === "inspect") {
+      this.previewProjection = null;
+      this.setBanner(false);
+    } else {
+      if (!this.previewAudience.length) {
+        const first = this.list?.channels.find((channel) => channel.state === "active");
+        this.previewAudience = [first ? first.id : PUBLIC_CHANNEL_ID];
+      }
+      void this.loadPreview();
+    }
+    this.paintRail();
+    this.paintOverlay();
+    this.paintStagedBar();
+    this.onInteractionChange?.();
+  }
+  async loadPreview() {
+    const audience = [...this.previewAudience];
+    const names = audience.map((id) => this.nameOf(id) ?? PUBLIC_CHANNEL_NAME).join(" + ");
+    this.setBanner(true, names);
+    try {
+      this.previewProjection = await this.host.api.channelPreview(this.host.eventKey, audience, {
+        includePublic: this.previewIncludePublic
+      });
+      this.previewSupported = true;
+    } catch (err) {
+      const status = err instanceof ManageApiError ? err.status : 0;
+      this.previewSupported = !(status === 404 || status === 405 || status === 501);
+      this.previewProjection = null;
+      if (this.previewSupported) this.host.onError(err);
+    }
+    if (this.active) {
+      this.paintRail();
+      this.paintOverlay();
+    }
+  }
+  paintRail() {
+    if (!this.active) return;
+    const rail = this.host.rail;
+    if (!this.caps.view) {
+      rail.innerHTML = `<p class="slm-eyebrow">Sales channels</p>
+        <p class="slm-hint">You need channel-management permission on this event to see allocations.</p>`;
+      return;
+    }
+    if (this.loading && !this.list) {
+      rail.innerHTML = `<p class="slm-eyebrow">Sales channels</p>
+        <div class="slm-empty">Loading allocations\u2026</div>`;
+      return;
+    }
+    if (!this.list && this.loadError) {
+      rail.innerHTML = `<p class="slm-eyebrow">Sales channels</p>
+        <div class="slm-ch-alert err" role="alert"><span>\u26A0</span>
+        <span><b>Couldn't load sales channels.</b> Everything else on this event still works.
+        <button type="button" data-ch-act="retry">Try again</button></span></div>`;
+      rail.querySelector('[data-ch-act="retry"]')?.addEventListener("click", () => {
+        void this.refresh();
+      });
+      return;
+    }
+    const selection = this.host.selectionLabels();
+    const grab = this.host.isCompact() ? `<div class="slm-ch-grab"><span class="slm-ch-grabbar"></span></div>` : "";
+    const segment = this.viewSegmentHtml();
+    const body = this.view === "preview" ? this.previewRailHtml() : this.detailChannelId ? this.detailRailHtml(this.detailChannelId) : selection.length && this.caps.manage ? this.selectionRailHtml(selection) : this.listRailHtml();
+    rail.innerHTML = `${grab}${segment}${body}`;
+    this.wireRail();
+    this.paintStagedBar();
+  }
+  viewSegmentHtml() {
+    const inspectOn = this.view === "inspect" ? " on" : "";
+    const previewOn = this.view === "preview" ? " on" : "";
+    return `<div class="slm-ch-viewseg" role="group" aria-label="Channels view">
+      <button type="button" class="${inspectOn.trim()}" data-ch-view="inspect"
+        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>`;
+  }
+  countsHtml(counts, key) {
+    const cell = (id, value, label, cls = "") => {
+      const previous = this.lastCounts.get(`${key}:${id}`);
+      const bump = previous != null && previous !== value ? " bump" : "";
+      this.lastCounts.set(`${key}:${id}`, value);
+      return `<span class="${cls}"><b class="${bump.trim()}">${value.toLocaleString()}</b> ${label}</span>`;
+    };
+    return `<span class="slm-ch-counts">
+      ${cell("allocated", counts.allocated, "allocated")}
+      ${cell("free", counts.free, "free", "free")}
+      ${cell("booked", counts.booked, "sold")}
+      ${counts.held ? cell("held", counts.held, "held") : ""}
+    </span>`;
+  }
+  channelRowHtml(channel, opts = {}) {
+    const marker = this.markerFor(channel.id);
+    const badgeKind = opts.builtin ? "builtin" : channel.state;
+    const dim = channel.state === "paused" || channel.state === "archived" ? " dim" : "";
+    const cls = `slm-ch-row${opts.builtin ? " public" : ""}${channel.state === "archived" ? " archived" : ""}${this.detailChannelId === channel.id ? " on" : ""}`;
+    const more = !opts.builtin && this.caps.manage ? `<button type="button" class="slm-ch-more" data-ch-detail="${esc(channel.id)}"
+          aria-label="Manage ${esc(channel.name)}">\u22EF</button>` : "";
+    return `<div class="${cls}">
+      <span class="slm-ch-head">
+        <span class="slm-ch-mk${dim}" style="background:${esc(marker.color)}" aria-hidden="true">${esc(marker.letter)}</span>
+        <span class="slm-ch-name">${esc(channel.name)}</span>
+        <span class="slm-ch-badge ${badgeKind}">${esc(stateBadge(opts.builtin ? "builtin" : channel.state))}</span>
+        ${more}
+      </span>
+      ${this.countsHtml(channel.counts, channel.id || "public")}
+      ${opts.builtin ? "" : `<span class="slm-ch-access">${esc(accessLine(channel.access))}</span>`}
+    </div>`;
+  }
+  listRailHtml() {
+    const list = this.list;
+    const archivedCount = list.channels.filter((channel) => channel.state === "archived").length;
+    const rows = [
+      this.channelRowHtml(list.publicSale, { builtin: true }),
+      ...list.channels.filter((channel) => this.showArchived || channel.state !== "archived").map((channel, index) => this.channelRowHtml(channel, { index }))
+    ].join("");
+    const create = this.caps.manage ? `<button type="button" class="slm-btn ghost" style="width:100%" data-ch-act="create">+ Create channel</button>` : "";
+    const readOnly = this.caps.manage ? "" : `<p class="slm-note">You can see how inventory is allocated. Changing it needs channel-management permission.</p>`;
+    return `
+      <p class="slm-eyebrow">Sales channels</p>
+      <p class="slm-hint">Select seats on the map, then assign them. Channel colours and names are never shown to buyers.</p>
+      <div class="slm-ch-list">${rows}</div>
+      ${create}
+      ${readOnly}
+      <p class="slm-note" style="margin-top:10px">
+        <button type="button" class="slm-linkbtn" data-ch-act="toggle-archived" aria-pressed="${this.showArchived}"
+          style="text-align:left">${this.showArchived ? "Hide" : "Show"} archived${archivedCount ? ` (${archivedCount})` : ""}</button>
+      </p>`;
+  }
+  selectionRailHtml(selection) {
+    const sources = selectionSources(selection, this.allocation, this.list);
+    const conflict = this.conflict ? `<div class="slm-ch-alert err" role="alert"><span>\u26A0</span>
+          <span><b>Assignments changed while you were editing.</b> Nothing was applied.
+          Your ${selection.length.toLocaleString()}-seat selection is kept.
+          <button type="button" data-ch-act="refresh-review">Refresh and review \u2192</button></span></div>` : "";
+    const bump = selection.length !== this.lastSelectionCount ? " bump" : "";
+    this.lastSelectionCount = selection.length;
+    const options = this.assignableChannels().map((channel) => `<option value="${esc(channel.id)}"${channel.id === this.targetChannelId ? " selected" : ""}>${esc(channel.name)}</option>`).join("");
+    const sourceRows = sources.map((row) => {
+      const marker = this.markerFor(row.channelId);
+      return `<div class="slm-ch-selsrc-row">
+        <span class="mk" style="background:${esc(marker.color)}" aria-hidden="true">${esc(marker.letter)}</span>
+        <b>${row.count.toLocaleString()}</b><span>${esc(row.name)}</span></div>`;
+    }).join("");
+    const sectionSelect = this.host.sections().length ? `<button type="button" class="slm-btn ghost" data-ch-act="pick-section">Section</button>` : "";
+    return `
+      ${conflict}
+      <div class="slm-selbar"><span class="slm-selnum slm-ch-selnum${bump}">${selection.length.toLocaleString()}</span>
+        <span class="slm-sellabel">selected</span></div>
+      <div class="slm-ch-selsrc" aria-live="polite" aria-label="Selection sources">${sourceRows}</div>
+      <div class="slm-field">
+        <label for="slm-ch-target">Assign to</label>
+        <select class="slm-select" id="slm-ch-target" data-ch-target>${options}</select>
+      </div>
+      <p class="slm-note">Changes are staged \u2014 nothing moves until you review and apply.
+        Seats in checkout or already sold are never moved.</p>
+      <div class="slm-ch-row2">
+        <button type="button" class="slm-btn ghost" data-ch-act="discard">Clear selection</button>
+        <button type="button" class="slm-btn" data-ch-act="review">Review changes</button>
+      </div>
+      <p class="slm-eyebrow" style="margin-top:18px">Select by</p>
+      <div class="slm-ch-row2" style="margin-top:2px">
+        ${sectionSelect}
+        <button type="button" class="slm-btn ghost" data-ch-act="pick-category">Category</button>
+        <button type="button" class="slm-btn ghost" data-ch-act="seatlist">List \u2328</button>
+      </div>
+      <p class="slm-note">The seat list offers the same selection with checkboxes for keyboard and screen-reader use.</p>`;
+  }
+  detailRailHtml(channelId) {
+    const channel = this.list?.channels.find((item) => item.id === channelId);
+    if (!channel) return this.listRailHtml();
+    const lifecycle = this.caps.manage ? `
+      <p class="slm-eyebrow" style="margin-top:18px">Lifecycle</p>
+      <div class="slm-ch-row2" style="margin-top:2px">
+        <button type="button" class="slm-btn ghost" data-ch-act="rename">Rename</button>
+        <button type="button" class="slm-btn ghost" data-ch-act="pause">${channel.state === "paused" ? "Resume" : "Pause"}</button>
+        <button type="button" class="slm-btn ghost" data-ch-act="archive">Archive\u2026</button>
+      </div>
+      <p class="slm-note">Archive returns the allocation to a destination you choose. Nothing is ever deleted silently.</p>` : "";
+    const intent = channel.access?.intent ?? "none";
+    const intents = ["none", "internal", "server", "hosted_link"];
+    const selfServiceGap = (intent === "server" || intent === "hosted_link") && !channel.access?.hasActiveGrants;
+    const access = this.caps.manage ? `
+      <p class="slm-eyebrow" style="margin-top:14px">Buyer access</p>
+      <div class="slm-field">
+        <label for="slm-ch-intent">How should buyers reach this channel?</label>
+        <select class="slm-select" id="slm-ch-intent" data-ch-intent>
+          ${intents.map((value) => `<option value="${value}"${value === intent ? " selected" : ""}>${esc(accessIntentLabel(value))}</option>`).join("")}
+        </select>
+      </div>
+      <p class="slm-hint">${channel.access?.hasActiveGrants ? "Buyer access is live. Only this audience can buy from the allocation." : "No buyer access is configured yet. The allocation is protected \u2014 it is not available to Public sale."}</p>
+      ${selfServiceGap ? `<div class="slm-ch-alert warn"><span>\u26A0</span>
+        <span>This channel is marked for buyer self-service but no buyer has been let in yet.</span></div>` : ""}
+      <button type="button" class="slm-btn" data-ch-act="hosted-link" disabled
+        title="Hosted access links ship in the next milestone">Create hosted access link \xB7 Coming soon</button>
+      <div class="slm-ch-row2"><button type="button" class="slm-btn ghost" data-ch-act="server-access" disabled
+        title="Guided server setup ships in the next milestone">Configure server integration \xB7 Coming soon</button></div>
+      <p class="slm-note">Your own server can already mint buyer access sessions for this channel with the server SDK.</p>` : "";
+    return `
+      <p class="slm-eyebrow">
+        <button type="button" class="slm-linkbtn" data-ch-act="back" style="text-align:left">\u2039 All channels</button>
+      </p>
+      <p class="slm-eyebrow">Channel \xB7 ${esc(channel.name)}</p>
+      <div class="slm-ch-list">${this.channelRowHtml(channel)}</div>
+      ${access}
+      ${lifecycle}`;
+  }
+  previewRailHtml() {
+    const audienceOptions = [
+      { id: PUBLIC_CHANNEL_ID, name: this.list?.publicSale.name ?? PUBLIC_CHANNEL_NAME },
+      ...(this.list?.channels ?? []).filter((channel) => channel.state !== "archived").map((channel) => ({ id: channel.id, name: channel.name }))
+    ];
+    const current = this.previewAudience[0] ?? PUBLIC_CHANNEL_ID;
+    const options = audienceOptions.map((entry) => `<option value="${esc(entry.id)}"${entry.id === current ? " selected" : ""}>${esc(entry.name)}</option>`).join("");
+    const unsupported = this.previewSupported === false ? `<div class="slm-ch-alert warn"><span>\u2139</span>
+          <span><b>Preview needs a newer server.</b> Allocation management works normally;
+          the buyer-view simulation will appear once this event's API is updated.</span></div>` : "";
+    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 includePublic = current === PUBLIC_CHANNEL_ID ? "" : `
+      <label class="slm-note" style="display:flex;gap:8px;align-items:center;margin:10px 0">
+        <input type="checkbox" data-ch-includepublic ${this.previewIncludePublic ? "checked" : ""} />
+        Also include Public sale seats in this grant
+      </label>`;
+    return `
+      <p class="slm-eyebrow">Preview buyer access</p>
+      <div class="slm-field">
+        <label for="slm-ch-audience">Audience</label>
+        <select class="slm-select" id="slm-ch-audience" data-ch-audience>${options}</select>
+      </div>
+      ${includePublic}
+      <p class="slm-hint">This is the same projection the buyer SDK receives for this audience \u2014 not a local
+        approximation. It is read-only: clicks open seat details, and no holds are created.</p>
+      ${unsupported}${unavailable}
+      <div class="slm-ch-legend">
+        <div class="r"><span class="sw" style="background:#6e7bff"></span> Eligible &amp; free \u2014 buyable by this audience</div>
+        <div class="r"><span class="sw" style="background:#3a4051"></span> Unavailable to this audience (one neutral state)</div>
+        <div class="r"><span class="sw" style="background:#22a06b"></span> Sold \u2014 same as any buyer sees</div>
+      </div>
+      ${summary}`;
+  }
+  paintSelection() {
+    if (this.view === "inspect" && !this.detailChannelId) this.paintRail();
+  }
+  wireRail() {
+    const rail = this.host.rail;
+    rail.querySelectorAll("[data-ch-view]").forEach((button) => {
+      button.addEventListener("click", () => this.setView(button.dataset.chView));
+    });
+    rail.querySelectorAll("[data-ch-detail]").forEach((button) => {
+      button.addEventListener("click", () => {
+        this.detailChannelId = button.dataset.chDetail;
+        this.paintRail();
+      });
+    });
+    const target = rail.querySelector("[data-ch-target]");
+    target?.addEventListener("change", () => {
+      this.targetChannelId = target.value;
+      this.conflict = false;
+      this.paintRail();
+    });
+    const audience = rail.querySelector("[data-ch-audience]");
+    audience?.addEventListener("change", () => {
+      this.previewAudience = [audience.value];
+      void this.loadPreview();
+    });
+    const includePublic = rail.querySelector("[data-ch-includepublic]");
+    includePublic?.addEventListener("change", () => {
+      this.previewIncludePublic = includePublic.checked;
+      void this.loadPreview();
+    });
+    const intent = rail.querySelector("[data-ch-intent]");
+    intent?.addEventListener("change", () => {
+      void this.setAccessIntent(intent.value);
+    });
+    const grab = rail.querySelector(".slm-ch-grab");
+    grab?.addEventListener("click", () => this.cycleDetent());
+    rail.querySelectorAll("[data-ch-act]").forEach((button) => {
+      button.addEventListener("click", () => this.railAction(button.dataset.chAct));
+    });
+  }
+  railAction(action) {
+    switch (action) {
+      case "create":
+        this.openDialog({ kind: "create" });
+        break;
+      case "review":
+        this.openDialog({ kind: "review" });
+        break;
+      case "rename":
+        this.openDialog({ kind: "rename", channelId: this.detailChannelId });
+        break;
+      case "archive":
+        this.openDialog({ kind: "archive", channelId: this.detailChannelId });
+        break;
+      case "seatlist":
+        this.openDialog({ kind: "seatlist" });
+        break;
+      case "pause":
+        void this.togglePause();
+        break;
+      case "discard":
+        this.host.clearSelection();
+        break;
+      case "back":
+        this.detailChannelId = null;
+        this.paintRail();
+        break;
+      case "retry":
+        void this.refresh();
+        break;
+      case "toggle-archived":
+        this.showArchived = !this.showArchived;
+        void this.refresh();
+        break;
+      case "refresh-review":
+        this.conflict = false;
+        void this.refresh().then(() => this.openDialog({ kind: "review" }));
+        break;
+      case "pick-section":
+        this.pickSection();
+        break;
+      case "pick-category":
+        this.pickCategory();
+        break;
+      default:
+        break;
+    }
+  }
+  // ---- selection helpers ----------------------------------------------------
+  pickSection() {
+    const sections = this.host.sections();
+    if (!sections.length) return;
+    this.promptChoice("Select a whole section", sections.map((s) => ({ value: s.id, label: s.label })), (value) => {
+      this.host.selectSection(value);
+    });
+  }
+  pickCategory() {
+    const categories = this.host.categories();
+    if (!categories.length) return;
+    this.promptChoice("Select a whole category", categories.map((c) => ({ value: c.key, label: c.label })), (value) => {
+      this.host.selectByLabels(this.host.labelsInCategory(value));
+    });
+  }
+  /** A tiny modal chooser reusing the dialog primitive (focus trap + Escape). */
+  promptChoice(title, options, onPick) {
+    this.renderScrim(`
+      <h3 id="slm-ch-dlg-title">${esc(title)}</h3>
+      <div class="slm-field">
+        <label for="slm-ch-choice">Choose one</label>
+        <select class="slm-select" id="slm-ch-choice">
+          ${options.map((option) => `<option value="${esc(option.value)}">${esc(option.label)}</option>`).join("")}
+        </select>
+      </div>
+      <div class="foot">
+        <button type="button" class="quiet" data-ch-close>Cancel</button>
+        <button type="button" class="slm-btn" data-ch-confirm>Select</button>
+      </div>`, (root) => {
+      root.querySelector("[data-ch-confirm]")?.addEventListener("click", () => {
+        const select = root.querySelector("#slm-ch-choice");
+        const value = select?.value;
+        this.closeDialog();
+        if (value) onPick(value);
+      });
+    });
+  }
+  // ---- dialogs --------------------------------------------------------------
+  openDialog(state) {
+    this.dialog = state;
+    this.renderDialog();
+  }
+  renderDialog() {
+    const state = this.dialog;
+    if (!state) return;
+    if (state.kind === "create") this.renderCreateDialog(state);
+    else if (state.kind === "review") this.renderReviewDialog(state);
+    else if (state.kind === "archive") this.renderArchiveDialog(state);
+    else if (state.kind === "rename") this.renderRenameDialog(state);
+    else if (state.kind === "seatlist") this.renderSeatListDialog();
+  }
+  /**
+   * Mount a modal: `aria-modal` dialog, programmatic name, focus moved inside,
+   * Tab trapped, Escape closes WITHOUT mutating, focus restored on close (§13).
+   */
+  renderScrim(inner, wire) {
+    const existing = this.scrimEl;
+    if (!existing) this.lastFocus = document.activeElement ?? null;
+    existing?.remove();
+    const scrim = document.createElement("div");
+    scrim.className = "slm-ch-scrim";
+    scrim.innerHTML = `<div class="slm-ch-dialog" role="dialog" aria-modal="true"
+      aria-labelledby="slm-ch-dlg-title" tabindex="-1">${inner}</div>`;
+    this.host.root.appendChild(scrim);
+    this.scrimEl = scrim;
+    const dialog = scrim.firstElementChild;
+    dialog.querySelectorAll("[data-ch-close]").forEach((button) => {
+      button.addEventListener("click", () => this.closeDialog());
+    });
+    scrim.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        this.closeDialog();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const focusable = [...dialog.querySelectorAll(
+        'button:not([disabled]),select,input,textarea,a[href],[tabindex]:not([tabindex="-1"])'
+      )];
+      if (!focusable.length) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    });
+    wire(dialog);
+    const autofocus = dialog.querySelector("input,select,button");
+    (autofocus ?? dialog).focus();
+  }
+  closeDialog(opts = {}) {
+    this.dialog = null;
+    this.scrimEl?.remove();
+    this.scrimEl = null;
+    if (opts.restoreFocus !== false) this.lastFocus?.focus?.();
+    this.lastFocus = null;
+  }
+  renderCreateDialog(state) {
+    const taken = (this.list?.channels ?? []).map((channel) => channel.marker ?? channel.name[0] ?? "");
+    const suggestion = suggestMarker("", taken);
+    this.renderScrim(`
+      <h3 id="slm-ch-dlg-title">Create channel</h3>
+      <p class="sub">A named allocation only the right audience can buy from. You'll pick the seats next.</p>
+      <div class="slm-field">
+        <label for="slm-ch-name">Name</label>
+        <input class="slm-input" id="slm-ch-name" maxlength="80" />
+        <p class="slm-note">Shown to your team and in reports \u2014 never to buyers.</p>
+      </div>
+      <div class="slm-field">
+        <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>
+        </div>
+      </div>
+      <div class="slm-field">
+        <label for="slm-ch-ref">Reference <span style="text-transform:none;font-weight:500">(optional)</span></label>
+        <input class="slm-input" id="slm-ch-ref" maxlength="120" placeholder="e.g. travel-agency-a" />
+        <p class="slm-note">A stable ID for your own system and webhooks.</p>
+      </div>
+      <p class="slm-ch-err" data-ch-error ${state.error ? "" : "hidden"}>${esc(state.error ?? "")}</p>
+      <div class="foot">
+        <button type="button" class="quiet" data-ch-close>Cancel</button>
+        <button type="button" class="slm-btn ghost" data-ch-create="plain">Create without allocating</button>
+        <button type="button" class="slm-btn" data-ch-create="allocate">Create and allocate seats</button>
+      </div>`, (dialog) => {
+      const name = dialog.querySelector("#slm-ch-name");
+      const marker = dialog.querySelector("[data-ch-marker]");
+      name.addEventListener("input", () => {
+        const next = suggestMarker(name.value, taken);
+        marker.textContent = next.letter;
+        marker.style.background = next.color;
+      });
+      dialog.querySelectorAll("[data-ch-create]").forEach((button) => {
+        button.addEventListener("click", () => {
+          const allocate = button.dataset.chCreate === "allocate";
+          void this.createChannel(
+            name.value,
+            marker.textContent ?? "",
+            marker.style.background,
+            dialog.querySelector("#slm-ch-ref")?.value ?? "",
+            allocate
+          );
+        });
+      });
+    });
+  }
+  async createChannel(name, letter, color, externalRef, allocate) {
+    const trimmed = name.trim();
+    if (!trimmed) {
+      this.showDialogError("Give the channel a name your team will recognise.");
+      return;
+    }
+    try {
+      const res = await this.host.api.createChannel(this.host.eventKey, {
+        name: trimmed,
+        marker: letter || null,
+        color: color || null,
+        externalRef: externalRef.trim() || null
+      });
+      this.closeDialog();
+      await this.refresh();
+      this.targetChannelId = res.channel.id;
+      this.detailChannelId = allocate ? null : res.channel.id;
+      this.announce(`Channel ${trimmed} created with 0 seats allocated.`);
+      this.host.toast(allocate ? `${trimmed} created. Select seats on the map to allocate them.` : `${trimmed} created.`, "ok");
+      this.paintRail();
+    } catch (err) {
+      const code = err instanceof ManageApiError ? err.code : void 0;
+      this.showDialogError(code === "channel_name_taken" ? "That name is already used on this event. Pick another." : "Couldn't create the channel. Try again.");
+      this.host.onError(err);
+    }
+  }
+  showDialogError(message) {
+    const field = this.scrimEl?.querySelector("[data-ch-error]");
+    if (!field) return;
+    field.textContent = message;
+    field.hidden = false;
+  }
+  renderReviewDialog(state) {
+    const { labels, buckets } = this.currentPlan();
+    const authoritative = state.applied;
+    const shown = authoritative ? authoritative.buckets : buckets;
+    const targetName = this.nameOf(this.targetChannelId) ?? PUBLIC_CHANNEL_NAME;
+    const rows = bucketRows(shown, targetName);
+    const mutations = authoritative ? authoritative.applied : mutationCount(buckets);
+    const allSkipped = !authoritative && labels.length > 0 && mutations === 0;
+    const rowsHtml = bucketRowsHtml(rows);
+    const foot = authoritative ? `<div class="foot"><button type="button" class="slm-btn" data-ch-close>Done</button></div>` : `<div class="foot">
+          <button type="button" class="quiet" data-ch-close>Back</button>
+          <button type="button" class="slm-btn" data-ch-apply ${allSkipped || state.busy ? "disabled" : ""}>
+            ${state.busy ? "Applying\u2026" : `Apply ${mutations.toLocaleString()} change${mutations === 1 ? "" : "s"}`}
+          </button>
+        </div>`;
+    const confirmNote = !authoritative && needsMoveConfirmation(buckets) ? `<p class="slm-note">Applying moves inventory out of another private channel. That is the line marked above.</p>` : "";
+    const skippedNote = allSkipped ? `<div class="slm-ch-alert warn"><span>\u2139</span><span>Nothing in this selection can move right now \u2014
+          every seat is in a buyer's checkout, already sold, or already in ${esc(targetName)}.</span></div>` : "";
+    this.renderScrim(`
+      <h3 id="slm-ch-dlg-title">${authoritative ? `Moved ${authoritative.applied.toLocaleString()} seat${authoritative.applied === 1 ? "" : "s"} to ${esc(targetName)}` : `Move ${labels.length.toLocaleString()} selected seat${labels.length === 1 ? "" : "s"} to ${esc(targetName)}`}</h3>
+      <p class="sub">${authoritative ? "These are the exact counts the server applied." : "Every selected seat is in exactly one line below."}</p>
+      ${skippedNote}
+      ${rowsHtml || '<div class="slm-empty">Nothing selected.</div>'}
+      ${confirmNote}
+      <p class="slm-ch-err" data-ch-error ${state.error ? "" : "hidden"}>${esc(state.error ?? "")}</p>
+      ${foot}`, (dialog) => {
+      dialog.querySelector("[data-ch-apply]")?.addEventListener("click", () => void this.apply());
+    });
+    if (authoritative) {
+      this.announce(`Applied ${authoritative.applied} change${authoritative.applied === 1 ? "" : "s"} to ${targetName}.`);
+    }
+  }
+  /**
+   * Apply. On success the review sheet re-renders with the AUTHORITATIVE server
+   * buckets and the staged bar morphs to a ✓ for 1.2s. On a stale version the
+   * server mutated nothing: keep the selection, shake the bar once, and offer
+   * exactly one action — Refresh and review.
+   */
+  async apply() {
+    if (!this.dialog || !this.caps.manage) return;
+    const { labels } = this.currentPlan();
+    if (!labels.length) return;
+    this.dialog = { ...this.dialog, busy: true, error: null };
+    this.renderDialog();
+    try {
+      const result = await this.host.api.applyChannelAssignment(this.host.eventKey, {
+        targetChannelId: this.targetChannelId || null,
+        labels,
+        assignmentVersion: this.assignmentVersion
+      });
+      this.assignmentVersion = result.assignmentVersion;
+      this.conflict = false;
+      this.dialog = { kind: "review", applied: result };
+      await this.refresh({ quiet: true });
+      this.renderDialog();
+      this.showApplied(result);
+      this.host.clearSelection();
+    } catch (err) {
+      const conflict = err instanceof ManageApiError && err.status === 409 && err.code === "channel_assignment_conflict";
+      if (conflict) {
+        this.conflict = true;
+        this.closeDialog();
+        this.shakeStaged();
+        this.paintRail();
+        this.announce("Assignments changed while you were editing. Nothing was applied and your selection is kept.");
+        return;
+      }
+      if (err instanceof ManageApiError && err.status === 403) {
+        this.caps = { view: this.caps.view, manage: false };
+        this.closeDialog();
+        this.paintRail();
+        this.host.toast("Changing channels needs channel-management permission.", "err");
+        return;
+      }
+      this.dialog = { kind: "review", busy: false, error: "Couldn't apply those changes. Try again." };
+      this.renderDialog();
+      this.host.onError(err);
+    }
+  }
+  showApplied(result) {
+    this.setStaged(`<span class="slm-ch-tick" aria-hidden="true">\u2713</span>
+      <span>Applied <b>${result.applied.toLocaleString()}</b> change${result.applied === 1 ? "" : "s"}</span>
+      <span class="grow"></span>`, "done");
+    if (this.stagedDoneTimer) clearTimeout(this.stagedDoneTimer);
+    this.stagedDoneTimer = setTimeout(() => this.setStaged(null), 1200);
+  }
+  shakeStaged() {
+    const bar = this.stagedEl;
+    if (!bar || !bar.classList.contains("on")) return;
+    bar.classList.remove("shake");
+    void bar.offsetWidth;
+    bar.classList.add("shake");
+  }
+  renderRenameDialog(state) {
+    const channel = this.list?.channels.find((item) => item.id === state.channelId);
+    if (!channel) {
+      this.closeDialog();
+      return;
+    }
+    this.renderScrim(`
+      <h3 id="slm-ch-dlg-title">Rename ${esc(channel.name)}</h3>
+      <p class="sub">Only your team and your reports see this name.</p>
+      <div class="slm-field">
+        <label for="slm-ch-newname">Name</label>
+        <input class="slm-input" id="slm-ch-newname" maxlength="80" value="${esc(channel.name)}" />
+      </div>
+      <p class="slm-ch-err" data-ch-error ${state.error ? "" : "hidden"}>${esc(state.error ?? "")}</p>
+      <div class="foot">
+        <button type="button" class="quiet" data-ch-close>Cancel</button>
+        <button type="button" class="slm-btn" data-ch-rename>Save name</button>
+      </div>`, (dialog) => {
+      dialog.querySelector("[data-ch-rename]")?.addEventListener("click", () => {
+        const value = dialog.querySelector("#slm-ch-newname")?.value ?? "";
+        if (!value.trim()) {
+          this.showDialogError("A channel needs a name.");
+          return;
+        }
+        void this.host.api.renameChannel(this.host.eventKey, channel.id, value.trim()).then(() => {
+          this.closeDialog();
+          return this.refresh();
+        }).catch((err) => {
+          this.showDialogError(err instanceof ManageApiError && err.code === "channel_name_taken" ? "That name is already used on this event." : "Couldn't rename the channel.");
+          this.host.onError(err);
+        });
+      });
+    });
+  }
+  async setAccessIntent(accessIntent) {
+    const channelId = this.detailChannelId;
+    if (!channelId || !this.caps.manage) return;
+    try {
+      await this.host.api.setChannelAccessIntent(this.host.eventKey, channelId, accessIntent);
+      await this.refresh();
+    } catch (err) {
+      this.host.toast("Couldn't save how buyers reach this channel.", "err");
+      this.host.onError(err);
+    }
+  }
+  async togglePause() {
+    const channel = this.list?.channels.find((item) => item.id === this.detailChannelId);
+    if (!channel) return;
+    const paused = channel.state !== "paused";
+    try {
+      await this.host.api.setChannelPaused(this.host.eventKey, channel.id, paused);
+      await this.refresh();
+      this.host.toast(paused ? `${channel.name} paused. Existing checkouts can finish; no new buyer access is issued.` : `${channel.name} resumed.`, "ok");
+    } catch (err) {
+      this.host.toast("Couldn't change that channel.", "err");
+      this.host.onError(err);
+    }
+  }
+  renderArchiveDialog(state) {
+    const channel = this.list?.channels.find((item) => item.id === state.channelId);
+    if (!channel) {
+      this.closeDialog();
+      return;
+    }
+    const blocked = state.archiveBlocked ?? null;
+    const heads_up = !blocked && channel.counts.held > 0;
+    const destinations = this.assignableChannels().filter((entry) => entry.id !== channel.id);
+    const blockedAlert = blocked ? `<div class="slm-ch-alert warn" role="alert"><span>\u23F3</span>
+          <span><b>${(blocked.heldUnits ?? blocked.activeHolds ?? 0).toLocaleString()} seats are in a buyer's checkout right now.</b>
+          Archive is unavailable while seats are held \u2014 try again ${esc(retryAfterCopy(blocked))}.</span></div>` : heads_up ? `<div class="slm-ch-alert warn"><span>\u23F3</span>
+            <span>${channel.counts.held.toLocaleString()} seats are in a buyer's checkout right now.
+            Archive is refused while any seat is held \u2014 you can try, and we'll tell you when to come back.</span></div>` : "";
+    this.renderScrim(`
+      <h3 id="slm-ch-dlg-title">Archive ${esc(channel.name)}</h3>
+      <p class="sub">The channel closes for good. Its seats move to a destination you choose;
+        sales history keeps its attribution.</p>
+      ${blockedAlert}
+      <div class="slm-field">
+        <label for="slm-ch-dest">Move the ${channel.counts.free.toLocaleString()} remaining free seats to</label>
+        <select class="slm-select" id="slm-ch-dest">
+          ${destinations.map((entry) => `<option value="${esc(entry.id)}">${esc(entry.name)}</option>`).join("")}
+        </select>
+      </div>
+      <p class="slm-note">${channel.counts.booked.toLocaleString()} sold seats keep "${esc(channel.name)}" on their sale
+        record. If one is cancelled later it returns to the destination above. Any buyer access for this channel
+        stops working.</p>
+      <p class="slm-ch-err" data-ch-error ${state.error ? "" : "hidden"}>${esc(state.error ?? "")}</p>
+      <div class="foot">
+        <button type="button" class="quiet" data-ch-close>Cancel</button>
+        <button type="button" class="slm-btn danger" data-ch-archive ${blocked ? "disabled" : ""}>Archive channel</button>
+      </div>`, (dialog) => {
+      dialog.querySelector("[data-ch-archive]")?.addEventListener("click", () => {
+        const destination = dialog.querySelector("#slm-ch-dest")?.value ?? "";
+        void this.archive(channel.id, destination || null);
+      });
+    });
+  }
+  async archive(channelId, destination) {
+    try {
+      await this.host.api.archiveChannel(this.host.eventKey, channelId, destination);
+      this.closeDialog();
+      this.detailChannelId = null;
+      await this.refresh();
+      this.host.toast("Channel archived. Its remaining seats moved to the destination you chose.", "ok");
+    } catch (err) {
+      if (err instanceof ManageApiError && err.status === 409 && err.code === "channel_archive_blocked_by_holds") {
+        this.dialog = {
+          kind: "archive",
+          channelId,
+          archiveBlocked: err.details ?? {}
+        };
+        this.renderDialog();
+        return;
+      }
+      this.showDialogError("Couldn't archive that channel. Try again.");
+      this.host.onError(err);
+    }
+  }
+  /**
+   * The synchronized inventory list (§13): the keyboard and screen-reader
+   * equivalent of canvas click / marquee / brush, grouped by section with
+   * per-section select actions.
+   */
+  renderSeatListDialog() {
+    const selected = new Set(this.host.selectionLabels());
+    const groups = /* @__PURE__ */ new Map();
+    let total = 0;
+    for (const seat of this.host.seats()) {
+      total += 1;
+      if (total > this.seatListLimit) break;
+      const section = this.host.sectionOfLabel(seat.label);
+      const key = section?.id ?? "";
+      const group = groups.get(key) ?? { label: section?.label ?? "Other seats", seats: [] };
+      group.seats.push({ label: seat.label, status: this.host.statusOf(seat.label) ?? "free" });
+      groups.set(key, group);
+    }
+    const body = [...groups.entries()].map(([id, group]) => `
+      <div class="slm-ch-seatgroup">
+        <span>${esc(group.label)}</span>
+        ${id ? `<button type="button" data-ch-section="${esc(id)}">Select section</button>` : ""}
+      </div>
+      ${group.seats.map((seat) => {
+      const channelId = this.allocation.get(seat.label) ?? PUBLIC_CHANNEL_ID;
+      const channelName = this.nameOf(channelId) ?? PUBLIC_CHANNEL_NAME;
+      return `<button type="button" class="slm-ch-seatitem" role="checkbox"
+          aria-checked="${selected.has(seat.label)}" data-ch-seat="${esc(seat.label)}">
+          <span class="box" aria-hidden="true">\u2713</span>
+          <span>${esc(seat.label)}</span>
+          <span class="meta">${esc(channelName)} \xB7 ${esc(seat.status)}</span>
+        </button>`;
+    }).join("")}`).join("");
+    this.renderScrim(`
+      <h3 id="slm-ch-dlg-title">Seat list</h3>
+      <p class="sub">The same selection as the map, with checkboxes. Space or Enter toggles a seat.</p>
+      <div class="slm-ch-seatlist">${body || '<div class="slm-empty">No seats on this chart.</div>'}</div>
+      ${total > this.seatListLimit ? `<div class="foot"><button type="button" class="slm-btn ghost" data-ch-more>Show more seats</button></div>` : ""}
+      <div class="foot"><button type="button" class="slm-btn" data-ch-close>Done</button></div>`, (dialog) => {
+      dialog.querySelectorAll("[data-ch-seat]").forEach((button) => {
+        button.addEventListener("click", () => {
+          const label = button.dataset.chSeat;
+          const next = new Set(this.host.selectionLabels());
+          if (next.has(label)) next.delete(label);
+          else next.add(label);
+          this.host.clearSelection();
+          if (next.size) this.host.selectByLabels([...next]);
+          this.renderSeatListDialog();
+        });
+      });
+      dialog.querySelectorAll("[data-ch-section]").forEach((button) => {
+        button.addEventListener("click", () => {
+          this.host.selectSection(button.dataset.chSection);
+          this.renderSeatListDialog();
+        });
+      });
+      dialog.querySelector("[data-ch-more]")?.addEventListener("click", () => {
+        this.seatListLimit += SEAT_LIST_PAGE;
+        this.renderSeatListDialog();
+      });
+    });
+  }
+  // ---- compact detents ------------------------------------------------------
+  applySheetClasses() {
+    const root = this.host.root;
+    const compact = this.host.isCompact();
+    root.classList.toggle("ch-sheet", compact && this.active);
+    for (const detent of ["collapsed", "medium", "full"]) {
+      root.classList.toggle(`detent-${detent}`, compact && this.active && this.detent === detent);
+    }
+    this.host.setMapInert(compact && this.active && this.detent === "full");
+  }
+  cycleDetent() {
+    const order = ["collapsed", "medium", "full"];
+    this.detent = order[(order.indexOf(this.detent) + 1) % order.length];
+    this.applySheetClasses();
+  }
+  /** Back/Close from the full detent returns to the previous one and keeps the
+   *  selection — losing a hard-won selection to a Back press is unforgivable. */
+  handleBack() {
+    if (this.scrimEl) {
+      this.closeDialog();
+      return true;
+    }
+    if (this.host.isCompact() && this.detent === "full") {
+      this.detent = "medium";
+      this.applySheetClasses();
+      return true;
+    }
+    return false;
+  }
+};
+
 // src/SeatManager.ts
 function availabilityModeOf(rule) {
   return rule ? rule.mode : "open";
@@ -5433,7 +8035,7 @@ var CSS2 = `
   .slm.live .slm-live-dot,.slm-feedrow,.slm-kpi.changed b,.slm-kpidelta{animation:none!important}
   .slm-liveevent,.slm-sectionrow{transition:none!important}
 }
-`;
+${CHANNELS_CSS}`;
 function injectStyle() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
   const el = document.createElement("style");
@@ -5470,7 +8072,7 @@ function fmtMoney(amount, currency) {
     return `${currency} ${Math.round(amount).toLocaleString()}`;
   }
 }
-function esc(value) {
+function esc2(value) {
   return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
 var SeatManager = class {
@@ -5525,6 +8127,10 @@ var SeatManager = class {
     this.blockedSection = "";
     this.blockedResultLimit = 100;
     this.unblockAllConfirmTimer = null;
+    // Sales channels (M6b). The mode object is built only once the token is known
+    // to carry `event:channels:view`; until then there is no pill and no rail.
+    this.channels = null;
+    this.channelCaps = { view: false, manage: false };
     this.onFullscreenChange = () => {
       this.paintFullscreenButton();
       this.updateContainerLayout();
@@ -5539,8 +8145,13 @@ var SeatManager = class {
       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;
+      else if (key === "c") {
+        if (!this.channels) return;
+        this.setMode("channels");
+      } else if (key === "f") this.toggleFullscreen();
+      else if (key === "escape") {
+        if (!this.channels?.handleBack()) return;
+      } else return;
       event.preventDefault();
     };
     this.onRailClick = (event) => {
@@ -5591,6 +8202,7 @@ var SeatManager = class {
       this.connect();
       this.startFeedClock();
       this.ready = true;
+      await this.resolveChannelCapabilities();
       this.setMode(this.mode);
       this.scheduleTokenRefresh();
       this.opts.onReady?.();
@@ -5601,16 +8213,119 @@ var SeatManager = class {
   }
   // ---- public API -----------------------------------------------------------
   setMode(mode) {
+    if (mode === "channels" && !this.channels) mode = "view";
     const changed = mode !== this.mode;
+    const wasChannels = this.mode === "channels";
     this.mode = mode;
     if (!this.renderer && this.doc) this.buildRenderer();
     else this.updateRendererInteraction();
     if (changed) this.renderer?.clearSelection();
+    if (wasChannels && mode !== "channels") this.channels?.leave();
     this.paintModeTabs();
     this.paintRail();
     this.applySectionCanvasTreatment();
+    if (mode === "channels") this.channels?.enter();
     if (changed) this.opts.onModeChange?.(mode);
   }
+  /**
+   * Decide what this token may do with sales channels.
+   *
+   * Declared capabilities win — a host that mints an `mse_…` grant knows exactly
+   * what it asked for. Otherwise a tenant secret (`sk_…`) is org authority the
+   * worker never narrows, so it is fully capable; and a delegated token with no
+   * declaration is probed for read access and then treated as READ-ONLY, because
+   * "we could not tell" must never render mutation controls.
+   */
+  async resolveChannelCapabilities() {
+    const declared = this.opts.capabilities;
+    if (declared) {
+      const set = new Set(declared);
+      this.channelCaps = {
+        view: set.has("event:channels:view"),
+        manage: set.has("event:channels:view") && set.has("event:channels:manage")
+      };
+    } else if (/^sk_/.test(this.opts.token)) {
+      this.channelCaps = { view: true, manage: true };
+    } else {
+      this.channelCaps = { view: false, manage: false };
+    }
+    if (!this.channelCaps.view && !declared && !/^sk_/.test(this.opts.token)) {
+      try {
+        await this.api.channels(this.key);
+        this.channelCaps = { view: true, manage: false };
+      } catch {
+        this.channelCaps = { view: false, manage: false };
+      }
+    }
+    if (!this.channelCaps.view) {
+      this.channels?.destroy();
+      this.channels = null;
+      this.paintModeTabs();
+      return;
+    }
+    if (this.channels) {
+      this.channels.setCapabilities(this.channelCaps);
+    } else {
+      this.channels = new ChannelsMode(this.buildChannelsHost(), this.channelCaps);
+      this.channels.onInteractionChange = () => this.updateRendererInteraction();
+    }
+    this.paintModeTabs();
+  }
+  /** The adapter between the cockpit's internals and Channels mode. */
+  buildChannelsHost() {
+    return {
+      eventKey: this.key,
+      api: this.api,
+      rail: this.els.rail,
+      mapLayer: this.root.querySelector(".slm-map"),
+      root: this.root,
+      seats: () => [...this.labelToSeat.values()].map((seat) => ({
+        id: seat.id,
+        label: seat.label,
+        x: seat.x,
+        y: seat.y
+      })),
+      statusOf: (label) => this.status.get(label) ?? (this.labelToSeat.has(label) ? "free" : void 0),
+      selectionLabels: () => this.selectionLabels(),
+      selectByLabels: (labels) => {
+        this.selectByLabels(labels);
+      },
+      clearSelection: () => this.clearSelection(),
+      selectSection: (sectionId) => {
+        this.selectSection(sectionId);
+      },
+      sections: () => this.sectionOptions,
+      categories: () => (this.doc?.categories ?? []).map((category) => ({
+        key: category.key,
+        label: category.label ?? category.key,
+        color: category.color
+      })),
+      labelsInCategory: (key) => [...this.labelToSeat.entries()].filter(([, seat]) => seat.categoryKey === key).map(([label]) => label),
+      sectionOfLabel: (label) => {
+        const seat = this.labelToSeat.get(label);
+        if (!seat) return null;
+        const id = this.sectionByObject.get(seat.rowId) ?? import_core3.UNGROUPED_ID;
+        return { id, label: this.sectionLabelById.get(id) ?? "Other seats" };
+      },
+      worldToScreen: (point) => this.renderer?.worldToScreen(point) ?? null,
+      seatPixelSize: () => this.seatPixelSize(),
+      isCompact: () => !!this.root?.classList.contains("compact"),
+      setMapInert: (inert) => {
+        this.mapHost.toggleAttribute("inert", inert);
+        this.mapHost.setAttribute("aria-hidden", String(inert));
+      },
+      toast: (message, kind) => this.toast(message, kind),
+      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. */
+  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));
+  }
   /** Toggle the normalized sales-velocity outline overlay without changing seat colors. */
   setHeatOverlay(enabled) {
     this.heatEnabled = enabled;
@@ -5650,14 +8365,15 @@ var SeatManager = class {
     return typeof document !== "undefined" && document.fullscreenElement === this.root;
   }
   toggleFullscreen() {
-    const request2 = this.isFullscreen() ? this.exitFullscreen() : this.enterFullscreen();
-    void request2.catch((err) => this.opts.onError?.(err));
+    const request = this.isFullscreen() ? this.exitFullscreen() : this.enterFullscreen();
+    void request.catch((err) => this.opts.onError?.(err));
   }
   /** Rotate the delegated credential without rebuilding DOM, canvas or socket. */
   setToken(token, expiresAt) {
     this.api.setToken(token);
     this.tokenExpiresAt = expiresAt ?? null;
     this.scheduleTokenRefresh();
+    if (this.ready) void this.resolveChannelCapabilities();
   }
   scheduleTokenRefresh() {
     if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
@@ -5816,6 +8532,8 @@ var SeatManager = class {
     if (this.followSeatTimer) clearTimeout(this.followSeatTimer);
     if (this.unblockAllConfirmTimer) clearTimeout(this.unblockAllConfirmTimer);
     if (this.revenueRefreshTimer) clearTimeout(this.revenueRefreshTimer);
+    this.channels?.destroy();
+    this.channels = null;
     if (this.tokenRefreshTimer) clearTimeout(this.tokenRefreshTimer);
     this.layoutObserver?.disconnect();
     this.layoutObserver = null;
@@ -5836,32 +8554,51 @@ var SeatManager = class {
   // ---- renderer lifecycle ---------------------------------------------------
   buildRenderer() {
     if (!this.doc) return;
-    const block = this.mode === "block";
-    const inspect = this.mode === "inspect";
+    const bulk = this.isBulkSelectMode();
     this.renderer = new import_core3.SeatmapRenderer(this.mapHost, {
       manageMode: true,
-      marqueeSelect: block,
+      marqueeSelect: bulk,
       maxSelection: 1e6,
-      selectableStatuses: block ? ["free", "not_for_sale"] : inspect ? ["free", "held", "booked", "not_for_sale"] : [],
+      selectableStatuses: this.selectableStatuses(),
       currency: this.currency,
       onSelect: (seat) => this.handleSeatSelect(seat),
       onDeselect: () => this.syncSelection(),
       onMarquee: () => this.syncSelection(),
-      onViewChange: () => this.updateZoomHint()
+      onViewChange: () => {
+        this.updateZoomHint();
+        this.channels?.handleViewChange();
+      }
     });
     this.renderer.setChart(this.doc);
     this.repaintAll();
     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. */
+  isBulkSelectMode() {
+    return this.mode === "block" || this.mode === "channels" && this.channels?.canSelect() === true;
+  }
+  /**
+   * Block never touches held or booked inventory, so it cannot select it.
+   * Channels must be able to select it — the Review sheet's honesty depends on
+   * counting the held and sold units inside a marquee and saying they will not
+   * move, rather than silently omitting them from the selection.
+   */
+  selectableStatuses() {
+    if (this.mode === "block") return ["free", "not_for_sale"];
+    if (this.mode === "inspect" || this.isBulkSelectMode()) {
+      return ["free", "held", "booked", "not_for_sale"];
+    }
+    return [];
+  }
   updateRendererInteraction() {
-    const block = this.mode === "block";
-    const inspect = this.mode === "inspect";
+    const bulk = this.isBulkSelectMode();
     this.renderer?.setManageInteraction({
       manageMode: true,
-      marqueeSelect: block,
+      marqueeSelect: bulk,
       maxSelection: 1e6,
-      selectableStatuses: block ? ["free", "not_for_sale"] : inspect ? ["free", "held", "booked", "not_for_sale"] : []
+      selectableStatuses: this.selectableStatuses()
     });
     this.updateZoomHint();
   }
@@ -6113,7 +8850,7 @@ var SeatManager = class {
     const place = sections.length === 1 ? sections[0] : sections.length > 1 ? `${sections.length} sections` : activity.label;
     const noun = activity.count === 1 ? "seat" : "seats";
     element.innerHTML = `<span class="slm-liveeventdot" style="background:${this.activityColor(activity.status)}"></span>
-      <span class="slm-liveeventcopy">${esc(place)} \xB7 ${activity.count.toLocaleString()} ${noun} ${esc(activity.verb)}</span>
+      <span class="slm-liveeventcopy">${esc2(place)} \xB7 ${activity.count.toLocaleString()} ${noun} ${esc2(activity.verb)}</span>
       <span class="slm-liveeventhint">Live</span>`;
     element.classList.add("on");
     if (this.liveEventTimer) clearTimeout(this.liveEventTimer);
@@ -6133,10 +8870,10 @@ var SeatManager = class {
     this.recomputeTallies();
   }
   async refreshControlRoom() {
-    const request2 = ++this.revenueRequest;
+    const request = ++this.revenueRequest;
     try {
       const snapshot = await this.api.controlRoom(this.key, this.trendWindowMinutes);
-      if (request2 === this.revenueRequest) {
+      if (request === this.revenueRequest) {
         this.controlRoomSnapshot = snapshot;
         this.lastSyncedAt = Date.now();
         this.authoritativeGrossRevenue = snapshot.revenue.gross;
@@ -6149,7 +8886,7 @@ var SeatManager = class {
       }
       return snapshot;
     } catch (err) {
-      if (request2 === this.revenueRequest) {
+      if (request === this.revenueRequest) {
         this.revenueStatus = "stale";
         this.recomputeTallies();
       }
@@ -6193,6 +8930,7 @@ var SeatManager = class {
       this.paintMonitorInsights();
     } else if (this.mode === "inspect") this.renderInspectRail(this.getSelection());
     else if (this.mode === "block") this.paintSelBar(this.getSelection());
+    else if (this.mode === "channels") this.channels?.handleSelectionChange();
     this.opts.onTallies?.(t3);
   }
   verbFor(prev, next) {
@@ -6281,6 +9019,7 @@ var SeatManager = class {
     const seats = this.getSelection();
     if (this.mode === "block") this.paintSelBar(seats);
     else if (this.mode === "inspect") this.renderInspectRail(seats);
+    else if (this.mode === "channels") this.channels?.handleSelectionChange();
     this.opts.onSelectionChange?.(seats);
   }
   // ---- DOM: chrome ----------------------------------------------------------
@@ -6299,7 +9038,9 @@ var SeatManager = class {
           <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>
+          <button class="slm-mode" role="tab" data-mode="channels" title="Channels (C)" aria-keyshortcuts="C" hidden>Channels</button>
         </div>
+        <select class="slm-tools" data-ref="tools" aria-label="Manager tools"></select>
         <span class="slm-live"><span class="slm-live-dot"></span><span data-ref="livetext">CONNECTING</span></span>
         <div class="slm-bar-actions">
           <button class="slm-barbtn follow" data-ref="follow" aria-pressed="false"
@@ -6333,6 +9074,7 @@ var SeatManager = class {
     this.mapHost = ref("maphost");
     this.els = {
       modes: ref("modes"),
+      tools: ref("tools"),
       livetext: ref("livetext"),
       kpis: ref("kpis"),
       follow: ref("follow"),
@@ -6345,6 +9087,7 @@ var SeatManager = class {
       zfit: ref("zfit")
     };
     this.els.modes.querySelectorAll("[data-mode]").forEach((b) => b.addEventListener("click", () => this.setMode(b.dataset.mode)));
+    this.els.tools.addEventListener("change", () => this.setMode(this.els.tools.value));
     this.els.zfit.addEventListener("click", () => this.zoomToFit());
     this.els.follow.addEventListener("click", () => this.setFollowLive(!this.followLive));
     this.els.heat.addEventListener("click", () => this.setHeatOverlay(!this.heatEnabled));
@@ -6360,6 +9103,7 @@ var SeatManager = class {
   updateContainerLayout() {
     const width = this.root?.getBoundingClientRect().width || this.host.clientWidth;
     this.root?.classList.toggle("compact", width > 0 && width < 800);
+    this.channels?.handleLayoutChange();
   }
   buildSectionOptions() {
     if (!this.doc) return;
@@ -6381,13 +9125,24 @@ var SeatManager = class {
     }
   }
   paintModeTabs() {
+    const available = [];
     this.els.modes?.querySelectorAll("[data-mode]").forEach((b) => {
       const el = b;
-      const active = el.dataset.mode === this.mode;
+      const mode = el.dataset.mode;
+      const permitted = mode !== "channels" || !!this.channels;
+      el.hidden = !permitted;
+      if (!permitted) return;
+      available.push({ mode, label: el.textContent ?? mode });
+      const active = mode === this.mode;
       el.classList.toggle("on", active);
       el.setAttribute("aria-selected", String(active));
       el.tabIndex = active ? 0 : -1;
     });
+    const tools = this.els.tools;
+    if (tools) {
+      tools.innerHTML = available.map((entry) => `<option value="${entry.mode}"${entry.mode === this.mode ? " selected" : ""}>${esc2(entry.label)}</option>`).join("");
+      tools.value = this.mode;
+    }
     this.root?.classList.toggle("block-mode", this.mode === "block");
   }
   paintFollowLiveButton() {
@@ -6492,6 +9247,7 @@ var SeatManager = class {
     if (this.mode === "view") this.renderViewRail();
     else if (this.mode === "inspect") this.renderInspectRail(this.getSelection());
     else if (this.mode === "sections") this.renderSectionsRail();
+    else if (this.mode === "channels") this.channels?.paintRail();
     else this.renderBlockRail();
     this.updateZoomHint();
   }
@@ -6557,8 +9313,8 @@ var SeatManager = class {
       const net = speed?.netBooked ?? 0;
       const netLabel = `${net > 0 ? "+" : ""}${net}`;
       const trend = speed?.trend === "rising" || speed?.trend === "cooling" ? speed.trend : "steady";
-      return `<button type="button" class="slm-sectionrow" data-section-focus="${esc(row.sectionId)}" title="Focus ${esc(row.sectionLabel)} on the map">
-        <span class="slm-sectiontop"><span>${esc(row.sectionLabel)}</span><span>${fmtMoney(row.bookedRevenue, snapshot.currency)}</span></span>
+      return `<button type="button" class="slm-sectionrow" data-section-focus="${esc2(row.sectionId)}" title="Focus ${esc2(row.sectionLabel)} on the map">
+        <span class="slm-sectiontop"><span>${esc2(row.sectionLabel)}</span><span>${fmtMoney(row.bookedRevenue, snapshot.currency)}</span></span>
         <span class="slm-sectionmeta"><span>${row.booked.toLocaleString()}/${row.total.toLocaleString()} sold \xB7 ${netLabel} in ${snapshot.velocity.windowMinutes}m</span><span class="slm-trend ${trend}">${trend}</span><span class="slm-sectionlocate">Locate</span></span>
       </button>`;
     }).join("") : '<div class="slm-empty">No section metrics are available for this chart.</div>';
@@ -6603,12 +9359,12 @@ var SeatManager = class {
       <p class="slm-eyebrow">${itemKind} details</p>
       <p class="slm-hint">Live availability and section performance.</p>
       <div class="slm-inspect-card">
-        <div class="slm-inspect-label">${esc(seat.label)}</div>
+        <div class="slm-inspect-label">${esc2(seat.label)}</div>
         <div class="slm-inspect-grid">
           <div><span>Status</span><b>${statusLabel[status]}</b></div>
-          <div><span>Section</span><b>${esc(sectionLabel)}</b></div>
-          ${location2 ? `<div><span>${location2.label}</span><b>${esc(location2.value)}</b></div>` : ""}
-          <div><span>Category</span><b>${esc(category?.label ?? seat.categoryKey)}</b></div>
+          <div><span>Section</span><b>${esc2(sectionLabel)}</b></div>
+          ${location2 ? `<div><span>${location2.label}</span><b>${esc2(location2.value)}</b></div>` : ""}
+          <div><span>Category</span><b>${esc2(category?.label ?? seat.categoryKey)}</b></div>
           <div><span>Sold in section</span><b>${sectionMetric ? `${sectionMetric.booked} of ${sectionMetric.total}` : "\u2014"}</b></div>
           <div><span>Section revenue</span><b>${sectionMetric && this.controlRoomSnapshot ? fmtMoney(sectionMetric.bookedRevenue, this.controlRoomSnapshot.currency) : "\u2014"}</b></div>
         </div>
@@ -6754,7 +9510,7 @@ var SeatManager = class {
       <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>
+        <span>${esc2(summary)}</span>
       </div>
       <div class="slm-availcallout">
         <span class="slm-availstar" aria-hidden="true">\u2726</span>
@@ -6769,7 +9525,7 @@ var SeatManager = class {
     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)}">
+          <select class="slm-select slm-availmode${mode !== "open" ? " on" : ""}" data-avail-id="${esc2(row.id)}"${disabled} aria-label="Availability for ${esc2(row.label)}">
             ${option("open", "Open \u2014 on sale")}
             ${option("closed", "Closed \u2014 visible, not on sale")}
             ${option("hidden", "Hidden \u2014 off the buyer map")}
@@ -6779,15 +9535,15 @@ var SeatManager = class {
         </span>`;
     let detail = "";
     if (!row.followsZone && mode === "timed") {
-      const value = row.rule?.revealAt ? esc(toLocalInput(row.rule.revealAt)) : "";
+      const value = row.rule?.revealAt ? esc2(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)}" />
+        <input type="datetime-local" class="slm-input" data-avail-reveal="${esc2(row.id)}" value="${value}"${disabled} aria-label="Reveal time for ${esc2(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)}" />
+        <input type="number" min="1" max="100" class="slm-input slm-availpct" data-avail-pct="${esc2(row.id)}" value="${esc2(pct)}"${disabled} aria-label="Percent sold to reveal ${esc2(row.label)}" />
         <span class="slm-availpctlabel">% sold</span>
       </div>`;
     }
@@ -6795,7 +9551,7 @@ var SeatManager = class {
     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>
+        <span class="slm-availlabel">${caret}${esc2(row.label)}</span>
         ${badge}
         <span class="slm-availcount">${row.seatCount.toLocaleString()}</span>
         ${control}
@@ -6884,25 +9640,25 @@ var SeatManager = class {
       const extra = a.count > 1 ? ` +${a.count - 1}` : "";
       const sections = a.sectionLabels ?? [];
       const sectionCopy = sections.length === 1 ? sections[0] : sections.length > 1 ? `${sections.length} sections` : "";
-      return `<button type="button" class="slm-feedrow" data-feed-id="${esc(a.id)}" title="Locate this activity on the map">
+      return `<button type="button" class="slm-feedrow" data-feed-id="${esc2(a.id)}" title="Locate this activity on the map">
         <span class="slm-feeddot" style="background:${color[a.status]}"></span>
-        <span class="slm-feedtext">${sectionCopy ? `<span class="slm-feedsection">${esc(sectionCopy)}</span>` : ""}${a.count === 1 ? "Seat" : "Seats"} <b>${esc(a.label)}${extra}</b> ${esc(a.verb)}</span>
+        <span class="slm-feedtext">${sectionCopy ? `<span class="slm-feedsection">${esc2(sectionCopy)}</span>` : ""}${a.count === 1 ? "Seat" : "Seats"} <b>${esc2(a.label)}${extra}</b> ${esc2(a.verb)}</span>
         <span class="slm-feedmeta"><span class="slm-feedtime">${relTime(a.at, now)}</span><span class="slm-feedlocate">Locate</span></span>
       </button>`;
     }).join("");
   }
   renderBlockRail() {
     const cats = this.doc?.categories ?? [];
-    const catChips = cats.map((c) => `<button class="slm-chip" type="button" data-cat="${esc(c.key)}" aria-pressed="false">
-        <span class="dot" style="background:${esc(c.color ?? "#6e7bff")}"></span>
-        <span>${esc(c.label ?? c.key)}</span>
+    const catChips = cats.map((c) => `<button class="slm-chip" type="button" data-cat="${esc2(c.key)}" aria-pressed="false">
+        <span class="dot" style="background:${esc2(c.color ?? "#6e7bff")}"></span>
+        <span>${esc2(c.label ?? c.key)}</span>
         <span class="slm-chipcount" data-cat-count>0</span>
         <span class="slm-chipcheck" aria-hidden="true">\u2713</span>
       </button>`).join("");
     const sectionField = this.sectionOptions.length ? `<div class="slm-field"><label>Select a whole section</label>
           <select class="slm-select" data-ref="section"><option value="">Choose a section\u2026</option>
-          ${this.sectionOptions.map((s) => `<option value="${esc(s.id)}">${esc(s.label)}</option>`).join("")}</select></div>` : "";
-    const blockedSectionOptions = this.sectionOptions.map((s) => `<option value="${esc(s.id)}">${esc(s.label)}</option>`).join("");
+          ${this.sectionOptions.map((s) => `<option value="${esc2(s.id)}">${esc2(s.label)}</option>`).join("")}</select></div>` : "";
+    const blockedSectionOptions = this.sectionOptions.map((s) => `<option value="${esc2(s.id)}">${esc2(s.label)}</option>`).join("");
     this.els.rail.innerHTML = `
       <p class="slm-eyebrow">Block &amp; unblock</p>
       <p class="slm-hint">Drag a box on the map to marquee-select, \u2318A for all, or pick a category/section. Booked and held inventory is never actionable here.</p>
@@ -7105,10 +9861,10 @@ var SeatManager = class {
       const section = this.sectionLabelById.get(sectionId) ?? "Other seats";
       const category = this.doc?.categories.find((item) => item.key === seat.categoryKey)?.label ?? seat.categoryKey;
       const isSelected = selected.has(seat.label);
-      return `<button type="button" class="slm-blockeditem${isSelected ? " on" : ""}" data-blocked-label="${esc(seat.label)}" aria-pressed="${isSelected}">
+      return `<button type="button" class="slm-blockeditem${isSelected ? " on" : ""}" data-blocked-label="${esc2(seat.label)}" aria-pressed="${isSelected}">
         <span class="slm-blockedcheck" aria-hidden="true">\u2713</span>
-        <span class="slm-blockedcopy"><span class="slm-blockedlabel">${esc(seat.label)}</span>
-          <span class="slm-blockedmeta">${esc(section)} \xB7 ${esc(category)}</span></span>
+        <span class="slm-blockedcopy"><span class="slm-blockedlabel">${esc2(seat.label)}</span>
+          <span class="slm-blockedmeta">${esc2(section)} \xB7 ${esc2(category)}</span></span>
       </button>`;
     }).join("") + (filtered.length > visible.length ? `<button type="button" class="slm-blockedmore" data-blocked-more>Show 100 more</button>` : "") : `<div class="slm-blockedempty">${allBlocked ? "No blocked seats match this search or section." : "No seats are blocked. Newly blocked seats will appear here."}</div>`;
     const markAll = this.els.markall;
@@ -7175,12 +9931,33 @@ var SeatManager = class {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ApiError,
+  BuyerAccessContext,
+  BuyerAccessUnavailableError,
+  BuyerRealtimeClient,
+  ChannelsMode,
   EmbeddedDesigner,
   ManageApi,
   ManageApiError,
+  PUBLIC_CHANNEL_ID,
+  PUBLIC_CHANNEL_NAME,
   SeatManager,
   SeatPicker,
   SeatingChart,
-  attachPickerFrame
+  accessIntentLabel,
+  accessLine,
+  attachPickerFrame,
+  bucketRows,
+  bucketRowsHtml,
+  createBuyerAccessContext,
+  createControllerSink,
+  dropReviewRows,
+  markerOf,
+  mutationCount,
+  needsMoveConfirmation,
+  planAssignment,
+  retryAfterCopy,
+  selectionSources,
+  stateBadge,
+  suggestMarker
 });
 //# sourceMappingURL=index.cjs.map