@seatlayer/js 0.40.0 → 0.42.0

package/dist/index.js

@@ -906,6 +906,7 @@ var SeatingChart = class {
     this.mount = null;
     this.hostEl = null;
     this.rendered = false;
+    this.retryBtn = null;
     this.mode_ = null;
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
@@ -967,6 +968,7 @@ var SeatingChart = class {
     const info = await this.controller.render(host);
     if (!info) {
       this.rendered = false;
+      if (this.opts.errorDisplay !== "none") this.showLoadFailure(host);
       return this;
     }
     this.controller.setViewMode(this.opts.initialView ?? "flat");
@@ -1257,10 +1259,36 @@ var SeatingChart = class {
     }
     return ok;
   }
+  /**
+   * The visible failure state. Deliberately inline-styled and dependency-free:
+   * this renders on a stranger's website, where our stylesheet may not have
+   * loaded (the chart fetch just failed) and where inheriting the host's own
+   * styles is likelier to produce something unreadable than something on-brand.
+   */
+  showLoadFailure(host) {
+    const box = document.createElement("div");
+    box.setAttribute("role", "status");
+    box.style.cssText = 'display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;min-height:180px;box-sizing:border-box;padding:24px;text-align:center;font:500 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#3b4256;';
+    const text = document.createElement("div");
+    text.textContent = "The seat map didn\u2019t load.";
+    box.appendChild(text);
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = "Try again";
+    btn.style.cssText = "appearance:none;border:1px solid #c9cede;background:#fff;color:#10162a;border-radius:8px;padding:8px 16px;font:600 13px/1 inherit;cursor:pointer;";
+    btn.addEventListener("click", () => {
+      this.destroy();
+      void this.render().catch((err) => this.opts.onError?.(err));
+    });
+    box.appendChild(btn);
+    this.retryBtn = btn;
+    host.appendChild(box);
+  }
   destroy() {
     this.realtime?.stop();
     this.realtime = null;
     this.access?.clear();
+    this.retryBtn = null;
     if (this.hostEl && this.onTipMove) this.hostEl.removeEventListener("mousemove", this.onTipMove);
     this.tipEl = null;
     this.onTipMove = null;
@@ -5447,7 +5475,15 @@ var SeatPicker = class _SeatPicker {
     this.checkoutPanel = mountCheckout({
       root: this.root,
       state,
-      startSession: (input) => this.pubApi.startCheckout(this.opts.event, input),
+      // `returnUrl` rides along so a redirecting gateway can come back to the
+      // HOST's page. The server validates its origin against the organizer's
+      // declared embed domains and silently falls back to our own buyer page
+      // when it does not match, so passing one can never redirect a paid buyer
+      // somewhere the organizer did not sanction.
+      startSession: (input) => this.pubApi.startCheckout(this.opts.event, {
+        ...input,
+        ...this.opts.returnUrl ? { returnUrl: this.opts.returnUrl } : {}
+      }),
       orderStatus: (orderId) => this.pubApi.orderStatus(orderId),
       onCancel: () => {
         this.checkoutPanel = null;
@@ -6457,7 +6493,7 @@ function retryAfterCopy(details) {
 }
 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 base = access.intent === "server" ? "Website integration" : access.intent === "hosted_link" ? "Buyer link" : "Not distributed yet";
   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;
@@ -6849,7 +6885,7 @@ var ManageApi = class {
 };
 
 // src/channelsMode.ts
-var POLL_MS = 1e4;
+var POLL_MS = 3e4;
 var MAX_FLAGS = 8;
 var SEAT_LIST_PAGE = 300;
 var PREVIEW_ELIGIBLE_FILL = "#6e7bff";
@@ -6948,6 +6984,12 @@ var CHANNELS_CSS = (
 .slm-ch-selnum.bump{animation:slm-ch-bump var(--slm-mo-base) var(--slm-mo-spring)}
 .slm-ch-row2{display:flex;gap:8px;margin-top:8px}
 .slm-ch-row2 .slm-btn{flex:1;min-width:0}
+/* distribute options \u2014 two actions, each with the one sentence that explains it */
+.slm-ch-dist{display:flex;flex-direction:column;gap:6px;padding:12px;margin-bottom:8px;border:1px solid var(--slm-line);
+  border-radius:10px;background:var(--slm-surface)}
+.slm-ch-dist b{font-size:13px;font-weight:800}
+.slm-ch-dist .why{color:var(--slm-muted);font-size:11.5px;line-height:1.45}
+.slm-ch-dist .slm-btn{width:100%;margin-top:2px}
 .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}
@@ -6963,7 +7005,7 @@ var CHANNELS_CSS = (
 /* 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);
+.slm-ch-dialog{width:min(460px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;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}
@@ -6990,7 +7032,7 @@ var CHANNELS_CSS = (
   overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
 .slm-ch-err{color:#f1a4a6;font-size:11.5px;margin-top:6px}
 
-/* hosted access links \u2014 STATUS only; there is no Copy control on this card */
+/* buyer links \u2014 STATUS only; there is no Copy control on this card */
 .slm-ch-link{padding:10px 11px;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface);
   margin-bottom:8px}
 .slm-ch-link .lk-head{display:flex;align-items:center;gap:8px}
@@ -7009,8 +7051,8 @@ var CHANNELS_CSS = (
 .slm-ch-radio input{flex:none;margin-top:2px}
 .slm-ch-radio b{display:block;font-weight:800;margin-bottom:2px}
 .slm-ch-radio .why{display:block;color:var(--slm-muted);font-size:11.5px;line-height:1.45}
-.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-seatlist{max-height:44vh;overflow:auto;overscroll-behavior:contain;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)}
@@ -7060,12 +7102,12 @@ function bucketRowsHtml(rows) {
     </div>`).join("");
 }
 var SERVER_INTEGRATION_HTML = `
-  <p class="slm-eyebrow" style="margin-top:18px">Server integration</p>
-  <p class="slm-hint">There is nothing to set up on this screen. Your own server mints a short-lived buyer
+  <p class="slm-eyebrow" style="margin-top:18px">On your website</p>
+  <p class="slm-hint">There is nothing more to set up on this screen. Your own server mints a short-lived buyer
     access session for this channel with the SeatLayer server SDK and hands it to the widget. A channel name
     on its own never grants access.</p>
   <p class="slm-note"><a class="slm-linkbtn" href="https://docs.seatlayer.io/server-api/channels"
-    target="_blank" rel="noreferrer noopener">Read the server integration guide \u2192</a></p>`;
+    target="_blank" rel="noreferrer noopener">Read the website integration guide \u2192</a></p>`;
 function esc(value) {
   return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
@@ -7146,6 +7188,17 @@ var ChannelsMode = class {
     this.stagedDoneTimer = null;
     this.lastSelectionCount = 0;
     this.lastCounts = /* @__PURE__ */ new Map();
+    /** The markup currently in the rail. An identical repaint is skipped, which is
+     *  what keeps the organizer's scroll position (and open <select>) alive. */
+    this.railHtml = null;
+    /**
+     * The `assignmentVersion` the allocation map was built from. Walking every
+     * allocation page is the expensive half of a refresh and the server already
+     * tells us, in the channels response, whether ANY seat moved. Unchanged
+     * version, unchanged allocation — so the walk is skipped entirely.
+     */
+    this.allocationVersion = null;
+    this.onVisibility = null;
     this.host = host;
     this.caps = capabilities;
   }
@@ -7156,6 +7209,7 @@ var ChannelsMode = class {
     this.active = true;
     this.mapIntent = "pan";
     this.focusedSectionId = null;
+    this.railHtml = null;
     this.ensureLayer();
     this.host.root.classList.add("ch-mode");
     this.applySheetClasses();
@@ -7164,8 +7218,15 @@ var ChannelsMode = class {
     this.onInteractionChange?.();
     void this.refresh();
     this.pollTimer = setInterval(() => {
+      if (typeof document !== "undefined" && document.hidden) return;
       void this.refresh({ quiet: true });
     }, POLL_MS);
+    if (typeof document !== "undefined" && typeof document.addEventListener === "function") {
+      this.onVisibility = () => {
+        if (this.active && !document.hidden) void this.refresh({ quiet: true });
+      };
+      document.addEventListener("visibilitychange", this.onVisibility);
+    }
   }
   /** 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. */
@@ -7174,6 +7235,11 @@ var ChannelsMode = class {
     this.active = false;
     if (this.pollTimer) clearInterval(this.pollTimer);
     this.pollTimer = null;
+    if (this.onVisibility && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.onVisibility);
+    }
+    this.onVisibility = null;
+    this.railHtml = null;
     this.closeDialog({ restoreFocus: false });
     this.links = [];
     this.linksChannelId = null;
@@ -7262,8 +7328,11 @@ var ChannelsMode = class {
       if (!this.targetChannelId) {
         this.targetChannelId = list.channels.find((c) => c.state === "active")?.id ?? PUBLIC_CHANNEL_ID;
       }
-      await this.loadAllocation(seq);
-      if (superseded()) return;
+      if (this.allocationVersion !== list.assignmentVersion) {
+        await this.loadAllocation(seq);
+        if (superseded()) return;
+        this.allocationVersion = list.assignmentVersion;
+      }
       if (this.detailChannelId) await this.loadLinks(this.detailChannelId);
       if (superseded()) return;
       this.loading = false;
@@ -7682,35 +7751,59 @@ var ChannelsMode = class {
       this.paintOverlay();
     }
   }
+  /**
+   * Replace the rail's markup — but only when it actually differs, and never at
+   * the cost of where the organizer had scrolled to.
+   *
+   * The rail repaints on a clock, on every selection change and after every
+   * mutation. Rewriting `innerHTML` each time resets `scrollTop`, which is
+   * exactly what "the rail gets stuck" was: scroll down to Create channel, the
+   * poll ticks, and the list snaps back to the top under the cursor. So skip the
+   * write when the markup is byte-identical, and restore the offset when it is
+   * not.
+   *
+   * Returns whether the DOM was rewritten. Callers must only re-wire listeners
+   * when it was — a skipped paint keeps the old nodes AND their listeners, so
+   * re-wiring would double every handler.
+   */
+  setRailHtml(html) {
+    if (html === this.railHtml) return false;
+    const rail = this.host.rail;
+    const scrollTop = rail.scrollTop;
+    rail.innerHTML = html;
+    this.railHtml = html;
+    if (scrollTop) rail.scrollTop = scrollTop;
+    return true;
+  }
   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>`;
+      this.setRailHtml(`<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>`;
+      this.setRailHtml(`<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>
+      if (this.setRailHtml(`<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();
-      });
+        <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();
+    if (this.setRailHtml(`${grab}${segment}${body}`)) this.wireRail();
     this.paintStagedBar();
   }
   viewSegmentHtml() {
@@ -7841,22 +7934,7 @@ var ChannelsMode = class {
         <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>` : ""}
-      ${this.hostedLinksHtml()}
-      ${SERVER_INTEGRATION_HTML}` : "";
+    const access = this.caps.manage ? this.distributeHtml(channel) : "";
     return `
       <p class="slm-eyebrow">
         <button type="button" class="slm-linkbtn" data-ch-act="back" style="text-align:left">\u2039 All channels</button>
@@ -7866,7 +7944,54 @@ var ChannelsMode = class {
       ${access}
       ${lifecycle}`;
   }
-  // ---- hosted access links --------------------------------------------------
+  /**
+   * "Distribute" — how the seats in this channel actually reach a buyer.
+   *
+   * This replaced a four-value "access intent" picker (none / internal /
+   * hosted_link / server). Two of those values did nothing anywhere: no buyer or
+   * inventory path reads `access_intent`, so `none` and `internal` were labels an
+   * organizer could set and then wait forever for something to happen. A third,
+   * `hosted_link`, is not the organizer's to choose at all — the server sets it
+   * when a buyer link is created and clears it when the last live one is revoked.
+   *
+   * So this is two ACTIONS, not a setting: create a buyer link, or point the
+   * channel at a website integration. Both of them do something the moment they
+   * are pressed. A legacy row still carrying `none` or `internal` renders the
+   * neutral "not distributed yet" state with both actions offered — the stored
+   * value is left alone (it is organizer-declared metadata and the API that
+   * writes it is unchanged), it simply no longer has a control of its own.
+   */
+  distributeHtml(channel) {
+    const intent = channel.access?.intent ?? "none";
+    const live = channel.access?.hasActiveGrants === true;
+    const state = live ? intent === "server" ? "Your website is letting buyers in. Only they can buy these seats." : "A buyer link is live. Only people with that link can buy these seats." : intent === "server" ? "Set up for your website \u2014 no buyer has come through yet. Seats stay reserved." : "Not distributed yet \u2014 seats stay reserved.";
+    const option = (title, why, action, cta, primary) => `<div class="slm-ch-dist">
+      <b>${esc(title)}</b>
+      <span class="why">${esc(why)}</span>
+      <button type="button" class="slm-btn${primary ? "" : " ghost"}" data-ch-act="${esc(action)}">${esc(cta)}</button>
+    </div>`;
+    const linksSupported = this.linksState !== "unsupported";
+    return `
+      <p class="slm-eyebrow" style="margin-top:14px">Distribute</p>
+      <p class="slm-hint">${esc(state)}</p>
+      ${linksSupported ? option(
+      "Sell with a buyer link",
+      "SeatLayer makes a link you send to a named group. They open it and buy only these seats.",
+      "link-create",
+      this.links.some(accessLinkIsLive) ? "Create another buyer link" : "Create buyer link",
+      true
+    ) : ""}
+      ${option(
+      "Integrate a website or app",
+      "Your website's backend grants each buyer access \u2014 set up on the Embed page.",
+      "embed-code",
+      "Get embed code",
+      false
+    )}
+      ${this.hostedLinksHtml()}
+      ${intent === "server" ? SERVER_INTEGRATION_HTML : ""}`;
+  }
+  // ---- buyer links ----------------------------------------------------------
   /**
    * Read the status projection for the open channel. Never paints — the caller
    * decides when the rail repaints, so a poll-driven reload does not fight a
@@ -7896,32 +8021,34 @@ var ChannelsMode = class {
     }
   }
   /**
-   * The hosted-link section of the detail panel.
+   * The buyer-link status section of the detail panel.
    *
    * STATUS ONLY, by design (comp 06 `hosted`): label, state, expiry,
    * redemptions, seats per buyer, live sessions. There is no Copy control here
    * and no field to hang one on — the URL was shown once at creation and cannot
    * be produced again. Rotation is the recovery path, and it says so.
+   *
+   * Creating a link is the Distribute card's action, not this section's, so a
+   * channel with no links renders nothing here rather than an empty heading and
+   * a second button saying the same thing.
    */
   hostedLinksHtml() {
-    const eyebrow = `<p class="slm-eyebrow" style="margin-top:18px">Hosted access links</p>`;
+    const eyebrow = `<p class="slm-eyebrow" style="margin-top:18px">Buyer links</p>`;
     if (this.linksState === "unsupported") {
       return `${eyebrow}<div class="slm-ch-alert warn"><span>\u2139</span>
-        <span><b>Hosted links need a newer server.</b> Everything else on this channel works normally.</span></div>`;
+        <span><b>Buyer links need a newer server.</b> Everything else on this channel works normally.</span></div>`;
     }
     if (this.linksState === "error") {
       return `${eyebrow}<div class="slm-ch-alert err" role="alert"><span>\u26A0</span>
         <span><b>Couldn't load this channel's links.</b>
         <button type="button" data-ch-act="link-reload">Try again</button></span></div>`;
     }
-    const live = this.links.filter(accessLinkIsLive).length;
-    const cards = this.linksState === "loading" && !this.links.length ? `<div class="slm-empty">Loading links\u2026</div>` : this.links.length ? this.links.map((link) => this.linkCardHtml(link)).join("") : `<p class="slm-hint">No hosted link yet. Create one to send this allocation to a named group \u2014
-            they open the link and buy only these seats.</p>`;
-    const create = this.caps.manage ? `<button type="button" class="slm-btn" style="width:100%" data-ch-act="link-create">
-          ${live ? "Create another hosted link" : "Create hosted access link"}</button>` : "";
+    if (this.linksState === "loading" && !this.links.length) {
+      return `${eyebrow}<div class="slm-empty">Loading links\u2026</div>`;
+    }
+    if (!this.links.length) return "";
     return `${eyebrow}
-      ${cards}
-      ${create}
+      ${this.links.map((link) => this.linkCardHtml(link)).join("")}
       <p class="slm-note">A link is shown once, when you create it. SeatLayer keeps only a fingerprint of it, so it
         can never be shown again \u2014 if a link is lost, rotate it and send the fresh one.</p>`;
   }
@@ -7940,7 +8067,7 @@ var ChannelsMode = class {
         </div>` : "";
     return `<div class="slm-ch-link">
       <span class="lk-head">
-        <span class="lk-name">${esc(link.label || "Hosted link")}</span>
+        <span class="lk-name">${esc(link.label || "Buyer link")}</span>
         <span class="slm-ch-badge ${badge.kind}">${esc(badge.text)}</span>
       </span>
       <div class="slm-ch-meter" role="img"
@@ -8043,10 +8170,6 @@ var ChannelsMode = class {
       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) => {
@@ -8091,6 +8214,13 @@ var ChannelsMode = class {
       case "link-create":
         this.openDialog({ kind: "linkCreate", channelId: this.detailChannelId });
         break;
+      // The one thing this screen can actually do for a website integration is
+      // record that the channel is meant for one — which is exactly the flag the
+      // dashboard's Embed page reads before it offers the snippet. Saying so is
+      // honest; a fake "copy code" button on a screen with no code would not be.
+      case "embed-code":
+        void this.chooseWebsiteIntegration();
+        break;
       case "link-reload":
         if (this.detailChannelId) void this.reloadLinks();
         break;
@@ -8431,12 +8561,27 @@ var ChannelsMode = class {
       });
     });
   }
+  /**
+   * "Get embed code" — mark the channel as reached through the organizer's own
+   * backend. The write itself is `setChannelAccessIntent(…, 'server')`, the same
+   * API the old picker called; the difference is that it is now a deliberate
+   * action with a consequence the organizer is told about, rather than one of
+   * four dropdown values with no observable effect.
+   */
+  async chooseWebsiteIntegration() {
+    const channelId = this.detailChannelId;
+    if (!channelId) return;
+    await this.setAccessIntent("server");
+  }
   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();
+      if (accessIntent === "server") {
+        this.host.toast("Marked for your website. The embed code is on the Embed page.", "ok");
+      }
     } catch (err) {
       this.host.toast("Couldn't save how buyers reach this channel.", "err");
       this.host.onError(err);
@@ -8577,7 +8722,7 @@ var ChannelsMode = class {
       });
     });
   }
-  // ---- hosted-link dialogs --------------------------------------------------
+  // ---- buyer-link dialogs ---------------------------------------------------
   async reloadLinks() {
     const channelId = this.detailChannelId;
     if (!channelId) return;
@@ -8620,7 +8765,7 @@ var ChannelsMode = class {
       return;
     }
     this.renderScrim(`
-      <h3 id="slm-ch-dlg-title">Create a hosted access link for ${esc(channel.name)}</h3>
+      <h3 id="slm-ch-dlg-title">Create a buyer link for ${esc(channel.name)}</h3>
       <p class="sub">Anyone who opens the link can buy from this channel's allocation \u2014 and only from it.
         You'll see the link once, right after you create it.</p>
       <div class="slm-field">
@@ -8745,7 +8890,7 @@ var ChannelsMode = class {
       copy?.addEventListener("click", () => {
         const ok = () => {
           copy.textContent = "Copied";
-          this.announce("Hosted access link copied.");
+          this.announce("Buyer link copied.");
         };
         const clipboard = typeof navigator === "undefined" ? null : navigator.clipboard;
         if (clipboard?.writeText) {
@@ -8755,7 +8900,7 @@ var ChannelsMode = class {
         selectSecret(dialog);
       });
     });
-    this.announce("Your hosted access link is ready and is shown once.");
+    this.announce("Your buyer link is ready and is shown once.");
   }
   /**
    * Rotate. The organizer must SAY what happens to the buyers already inside —
@@ -8774,7 +8919,7 @@ var ChannelsMode = class {
           <span><b>${sessions.toLocaleString()} buyer${sessions === 1 ? "" : "s"}</b> got in with the current link
           and still ${sessions === 1 ? "has" : "have"} active access.</span></div>` : "";
     this.renderScrim(`
-      <h3 id="slm-ch-dlg-title">Rotate the ${esc(link.label || "hosted")} link?</h3>
+      <h3 id="slm-ch-dlg-title">Rotate the ${esc(link.label || "buyer")} link?</h3>
       <p class="sub">The current link stops opening immediately and cannot be restored. You will get a new
         link to copy \u2014 shown once.</p>
       ${warning}
@@ -8833,7 +8978,7 @@ var ChannelsMode = class {
     }
     const sessions = link.activeSessions ?? 0;
     this.renderScrim(`
-      <h3 id="slm-ch-dlg-title">Revoke the ${esc(link.label || "hosted")} link?</h3>
+      <h3 id="slm-ch-dlg-title">Revoke the ${esc(link.label || "buyer")} link?</h3>
       <p class="sub">It stops opening immediately and cannot be restored \u2014 there is no undo, and no way to
         bring the same URL back. Seats already bought through it keep their sale.</p>
       ${sessions ? `<label class="slm-ch-radio">
@@ -8950,7 +9095,12 @@ var LEGEND = [
 var MANAGER_CSS = (
   /* @sl-css */
   `
-.slm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:480px;overflow:hidden;
+/* The floor was 480px, which trapped the cockpit in any host shorter than that:
+   every ancestor here is overflow:hidden, so the bottom of the rail (Create
+   channel, Show archived) was rendered but clipped away by the host and could
+   not be reached by scrolling anything. 320px still keeps an unsized host from
+   collapsing to the top bar, and the rail scrolls to its full content below. */
+.slm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:320px;overflow:hidden;
   background:var(--slm-bg);color:var(--slm-text);font-family:var(--slm-font);border-radius:var(--slm-radius);
   /* Motion tokens (motion-system \xA72), declared by the cockpit ROOT rather than
      borrowed from CHANNELS_CSS. The base cockpit animates whether or not
@@ -9018,7 +9168,7 @@ var MANAGER_CSS = (
 .slm-liveeventdot{width:8px;height:8px;border-radius:50%;flex:none}.slm-liveeventcopy{min-width:0;overflow:hidden;text-overflow:ellipsis;
   white-space:nowrap;font-size:12px;font-weight:800}.slm-liveeventhint{color:var(--slm-muted);font-size:10px;white-space:nowrap}
 .slm-rail{width:320px;flex:none;border-left:1px solid var(--slm-line);display:flex;flex-direction:column;min-height:0}
-.slm-railscroll{flex:1;overflow-y:auto;padding:16px}
+.slm-railscroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px}
 .slm-eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--slm-muted);font-weight:800;margin-bottom:6px}
 .slm-hint{font-size:12.5px;color:var(--slm-muted);line-height:1.5;margin-bottom:14px}
 
@@ -9083,7 +9233,8 @@ var MANAGER_CSS = (
   color:var(--slm-muted);font-size:10.5px}
 .slm-linkbtn{font-size:11px!important;font-weight:800!important;color:var(--slm-accent)!important;text-align:right}
 .slm-linkbtn:disabled{opacity:.45;cursor:not-allowed}
-.slm-blockedlist{max-height:246px;overflow:auto;border:1px solid var(--slm-line);border-radius:10px;background:var(--slm-surface)}
+.slm-blockedlist{max-height:246px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--slm-line);
+  border-radius:10px;background:var(--slm-surface)}
 .slm-blockeditem{display:grid!important;grid-template-columns:18px minmax(0,1fr);width:100%;gap:8px;padding:8px 9px!important;
   border-bottom:1px solid var(--slm-line)!important;text-align:left!important}
 .slm-blockeditem:last-child{border-bottom:0!important}.slm-blockeditem:hover{background:rgba(255,255,255,.035)!important}