@seatlayer/js 0.23.0 → 0.25.0

package/dist/index.js

@@ -172,8 +172,28 @@ var SeatingChart = class {
       ribbon.style.cssText = "position:absolute;top:18px;right:-34px;z-index:6;transform:rotate(45deg);width:140px;text-align:center;padding:4px 0;background:#f4b740;color:#1a1200;font:800 10.5px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.12em;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;";
       host.appendChild(ribbon);
     }
+    this.buildBadge(host);
     return this;
   }
+  /**
+   * Attribution badge pinned to the embed's bottom-right, linking to
+   * seatlayer.io. Rendered as an absolutely-positioned overlay with
+   * self-contained inline styles — the SDK embed ships no widget CSS, and an
+   * overlay keeps it out of the layout flow so it never disturbs the SDK v0.22
+   * fill-height resize contract. Mirrors the full widget's mark + wordmark and
+   * reuses the `picker.poweredBy` i18n string.
+   */
+  buildBadge(host) {
+    if (this.controller.doc?.theme?.hideBadge) return;
+    const badge = document.createElement("a");
+    badge.href = "https://seatlayer.io";
+    badge.target = "_blank";
+    badge.rel = "noopener noreferrer";
+    badge.setAttribute("aria-label", t("picker.poweredBy"));
+    badge.style.cssText = 'position:absolute;bottom:10px;right:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#4a5163;text-decoration:none;font:600 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.12);';
+    badge.innerHTML = `<span aria-hidden="true" style="width:16px;height:16px;border-radius:4px;flex:none;display:flex;align-items:center;justify-content:center;background:#f4b740;color:#1a1200"><svg viewBox="0 0 24 24" style="width:11px;height:11px;fill:currentColor"><path d="M4 15c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3h-3v-2H7v2H4v-3Z"/><rect x="7" y="7" width="10" height="5" rx="1.6"/></svg></span><span>${t("picker.poweredBy")}</span>`;
+    host.appendChild(badge);
+  }
   placeTooltip() {
     if (!this.tipEl || !this.hostEl) return;
     const hw = this.hostEl.clientWidth;
@@ -328,6 +348,13 @@ var TYPES = /* @__PURE__ */ new Set([
 ]);
 var DEFAULT_LOADING_TIMEOUT_MS = 2e4;
 var DEFAULT_MIN_FILL_HEIGHT = 480;
+var RENEW_LEAD_MS = 3 * 60 * 1e3;
+var RENEW_SHORT_TTL_MS = 15 * 60 * 1e3;
+var RENEW_SHORT_TTL_FRACTION = 0.8;
+var RENEW_MIN_DELAY_MS = 30 * 1e3;
+var FILL_PROBE_HEIGHT_PX = 1e5;
+var FILL_PROBE_TRACK_EPSILON_PX = 4;
+var FILL_MIN_DEFINITE_HEIGHT_PX = 50;
 function resolveContainer2(container) {
   if (typeof container !== "string") return container;
   const element = document.querySelector(container);
@@ -365,6 +392,14 @@ var EmbeddedDesigner = class {
     this.designerOrigin = "";
     this.overlay = null;
     this.timeoutTimer = null;
+    /** Proactive session-renewal timer; armed from each `ready`, cleared on re-mount. */
+    this.renewTimer = null;
+    /**
+     * One automatic recovery relaunch is allowed per expiry. Reset ONLY when a fresh
+     * `ready` arrives — deliberately not on re-mount — so a session that keeps failing
+     * to load can't loop the host through endless silent relaunches.
+     */
+    this.autoRecoverUsed = false;
     this.phase = "loading";
     this.restoreContainerPosition = null;
     // Host-side fullscreen pin: saved state we restore on `off`/Escape/destroy.
@@ -375,10 +410,17 @@ var EmbeddedDesigner = class {
     this.fsKeyHandler = null;
     /** Latest height (px string) the Designer reported; re-applied after unpin. */
     this.lastAutoHeight = "";
-    // Viewport-fill sizing: pending rAF handle + whether listeners are attached.
+    // Fill sizing: pending rAF handles + whether window listeners are attached.
     this.fillRaf = null;
+    this.reprobeRaf = null;
     this.fillListening = false;
-    /** rAF-throttled fill recompute, so a burst of scroll/resize ticks coalesces. */
+    /** Resolved container element (fill measurement + ResizeObserver target). */
+    this.containerEl = null;
+    /** Cached fill verdict: 'container' = bounded block, 'viewport' = full page. */
+    this.fillMode = null;
+    /** Live block-size tracking in container-fill mode; disconnected on destroy. */
+    this.resizeObs = null;
+    /** rAF-throttled fill recompute, so a burst of scroll/RO ticks coalesces. */
     this.scheduleFill = () => {
       if (this.fillRaf !== null) return;
       this.fillRaf = requestAnimationFrame(() => {
@@ -386,6 +428,21 @@ var EmbeddedDesigner = class {
         this.applyFill();
       });
     };
+    /**
+     * rAF-throttled re-probe: a host layout change (responsive breakpoint, a block
+     * gaining/losing a definite height) can flip the verdict, so `resize` /
+     * `orientationchange` re-detect and swap the container observer accordingly.
+     */
+    this.scheduleReprobe = () => {
+      if (this.reprobeRaf !== null) return;
+      this.reprobeRaf = requestAnimationFrame(() => {
+        this.reprobeRaf = null;
+        if (this.pinned) return;
+        this.fillMode = this.detectFillMode();
+        this.syncContainerObserver();
+        this.applyFill();
+      });
+    };
     this.handleMessage = (event) => {
       if (!this.frame || event.origin !== this.designerOrigin || event.source !== this.frame.contentWindow) return;
       if (!event.data || typeof event.data !== "object") return;
@@ -393,7 +450,7 @@ var EmbeddedDesigner = class {
       if (data.type === "seatlayer.designer.resize") {
         if (!this.fillEnabled() && this.autoResizeEnabled() && typeof data.px === "number" && Number.isFinite(data.px) && data.px > 0) {
           this.lastAutoHeight = `${Math.round(data.px)}px`;
-          if (!this.pinned) this.frame.style.height = this.lastAutoHeight;
+          if (!this.pinned) this.setFrameHeight(this.lastAutoHeight);
         }
         return;
       }
@@ -421,6 +478,8 @@ var EmbeddedDesigner = class {
           this.phase = "ready";
           this.clearTimeoutTimer();
           this.removeOverlay();
+          this.autoRecoverUsed = false;
+          this.scheduleRenewal(message.expiresAt);
           this.options.onReady?.(message);
           break;
         case "seatlayer.designer.saved":
@@ -432,10 +491,18 @@ var EmbeddedDesigner = class {
         case "seatlayer.designer.close":
           this.options.onClose?.(message);
           break;
-        case "seatlayer.designer.error":
-          this.showError(causeFromCode(message.code));
+        case "seatlayer.designer.error": {
+          const cause = causeFromCode(message.code);
+          if (cause === "expired" && this.autoRenewEnabled() && !this.autoRecoverUsed) {
+            this.autoRecoverUsed = true;
+            this.clearRenewTimer();
+            this.options.onRequestRelaunch();
+            return;
+          }
+          this.showError(cause);
           this.options.onError?.(message);
           break;
+        }
       }
     };
     this.options = options;
@@ -452,12 +519,17 @@ var EmbeddedDesigner = class {
     frame.allow = this.options.allow ?? "fullscreen; clipboard-write";
     frame.referrerPolicy = this.options.referrerPolicy ?? "origin";
     frame.src = url.toString();
-    frame.style.width = "100%";
-    frame.style.height = typeof this.options.height === "number" ? `${this.options.height}px` : "100%";
+    frame.style.setProperty("width", "100%", "important");
+    frame.style.setProperty(
+      "height",
+      typeof this.options.height === "number" ? `${this.options.height}px` : "100%",
+      "important"
+    );
     frame.style.border = "0";
     Object.assign(frame.style, this.options.style);
     if (this.options.className) frame.className = this.options.className;
     const container = resolveContainer2(this.options.container);
+    this.containerEl = container;
     window.addEventListener("message", this.handleMessage);
     container.append(frame);
     this.frame = frame;
@@ -488,10 +560,13 @@ var EmbeddedDesigner = class {
     this.stopFill();
     this.unpinFullscreen();
     this.clearTimeoutTimer();
+    this.clearRenewTimer();
     this.removeOverlay();
     this.restoreContainerStyle();
     this.frame?.remove();
     this.frame = null;
+    this.containerEl = null;
+    this.fillMode = null;
     this.designerOrigin = "";
     this.phase = "loading";
     this.lastAutoHeight = "";
@@ -506,24 +581,77 @@ var EmbeddedDesigner = class {
   fillEnabled() {
     return typeof this.options.height !== "number";
   }
+  /** Write an SDK-managed height with `!important` so a host theme can't win. */
+  setFrameHeight(value) {
+    this.frame?.style.setProperty("height", value, "important");
+  }
   /**
-   * Size the iframe so its bottom edge meets the bottom of the viewport
-   * (`window.innerHeight - top`), clamped to `minHeight`. No-op while pinned
-   * fullscreen (the pin fills the viewport itself).
+   * Decide whether the host gave the container a DEFINITE (bounded) height — a
+   * fixed block the embed should fill 100% of — versus a content-sized container
+   * that collapses to whatever the iframe measures (full-page usage).
+   *
+   * We drive the iframe to two extreme heights within a single synchronous task
+   * and watch whether the container follows: a bounded box barely moves, a
+   * content-sized one grows with the iframe. Because we restore the height before
+   * yielding, the browser only lays out — it never paints the extremes, so there
+   * is no visible flash. Works for px, resolved `%`, and flex (`flex:1;min-h:0`)
+   * heights, and leaves a mere `min-height` floor classified as content-sized so
+   * full-page hosts keep the old viewport-fill behavior.
+   */
+  detectFillMode() {
+    const container = this.containerEl;
+    const frame = this.frame;
+    if (this.pinned || !container || !frame) return this.fillMode ?? "viewport";
+    const measure = () => container.getBoundingClientRect().height;
+    const savedValue = frame.style.getPropertyValue("height");
+    const savedPriority = frame.style.getPropertyPriority("height");
+    frame.style.setProperty("height", "0px", "important");
+    const collapsed = measure();
+    frame.style.setProperty("height", `${FILL_PROBE_HEIGHT_PX}px`, "important");
+    const expanded = measure();
+    if (savedValue) frame.style.setProperty("height", savedValue, savedPriority);
+    else frame.style.removeProperty("height");
+    const tracksIframe = expanded - collapsed > FILL_PROBE_TRACK_EPSILON_PX;
+    const bounded = !tracksIframe && collapsed >= FILL_MIN_DEFINITE_HEIGHT_PX;
+    return bounded ? "container" : "viewport";
+  }
+  /**
+   * Size the iframe for the current fill verdict, clamped to `minHeight`. In
+   * container mode it fills 100% of the bounded block; in viewport mode its
+   * bottom edge meets the bottom of the viewport (`window.innerHeight - top`).
+   * No-op while pinned fullscreen (the pin fills the viewport itself).
    */
   applyFill() {
     if (!this.frame || this.pinned) return;
     const min = this.options.minHeight ?? DEFAULT_MIN_FILL_HEIGHT;
+    if (this.fillMode === "container" && this.containerEl) {
+      const target2 = Math.max(min, Math.round(this.containerEl.getBoundingClientRect().height));
+      this.setFrameHeight(`${target2}px`);
+      return;
+    }
     const top = this.frame.getBoundingClientRect().top;
     const target = Math.max(min, Math.round(window.innerHeight - top));
-    this.frame.style.height = `${target}px`;
+    this.setFrameHeight(`${target}px`);
+  }
+  /** Attach/detach the container ResizeObserver to match the current verdict. */
+  syncContainerObserver() {
+    const want = this.fillMode === "container" && !!this.containerEl && typeof ResizeObserver !== "undefined";
+    if (want && !this.resizeObs) {
+      this.resizeObs = new ResizeObserver(() => this.scheduleFill());
+      this.resizeObs.observe(this.containerEl);
+    } else if (!want && this.resizeObs) {
+      this.resizeObs.disconnect();
+      this.resizeObs = null;
+    }
   }
   startFill() {
+    this.fillMode = this.detectFillMode();
+    this.syncContainerObserver();
     this.applyFill();
     if (this.fillListening) return;
     this.fillListening = true;
-    window.addEventListener("resize", this.scheduleFill);
-    window.addEventListener("orientationchange", this.scheduleFill);
+    window.addEventListener("resize", this.scheduleReprobe);
+    window.addEventListener("orientationchange", this.scheduleReprobe);
     window.addEventListener("scroll", this.scheduleFill, { passive: true });
   }
   stopFill() {
@@ -531,10 +659,18 @@ var EmbeddedDesigner = class {
       cancelAnimationFrame(this.fillRaf);
       this.fillRaf = null;
     }
+    if (this.reprobeRaf !== null) {
+      cancelAnimationFrame(this.reprobeRaf);
+      this.reprobeRaf = null;
+    }
+    if (this.resizeObs) {
+      this.resizeObs.disconnect();
+      this.resizeObs = null;
+    }
     if (!this.fillListening) return;
     this.fillListening = false;
-    window.removeEventListener("resize", this.scheduleFill);
-    window.removeEventListener("orientationchange", this.scheduleFill);
+    window.removeEventListener("resize", this.scheduleReprobe);
+    window.removeEventListener("orientationchange", this.scheduleReprobe);
     window.removeEventListener("scroll", this.scheduleFill);
   }
   /**
@@ -546,16 +682,22 @@ var EmbeddedDesigner = class {
     if (this.pinned || !this.frame) return;
     this.pinned = true;
     this.frameStyleBeforeFs = this.frame.getAttribute("style");
-    Object.assign(this.frame.style, {
+    const pin = {
       position: "fixed",
-      inset: "0",
+      top: "0",
+      right: "0",
+      bottom: "0",
+      left: "0",
       width: "100vw",
       height: "100vh",
       margin: "0",
       border: "0",
-      zIndex: "2147483000",
+      "z-index": "2147483000",
       background: "#101625"
-    });
+    };
+    for (const [property, value] of Object.entries(pin)) {
+      this.frame.style.setProperty(property, value, "important");
+    }
     const docEl = document.documentElement;
     this.docOverflowBeforeFs = docEl.style.overflow;
     docEl.style.overflow = "hidden";
@@ -576,7 +718,7 @@ var EmbeddedDesigner = class {
       if (this.frameStyleBeforeFs === null) this.frame.removeAttribute("style");
       else this.frame.setAttribute("style", this.frameStyleBeforeFs);
       if (this.fillEnabled()) this.applyFill();
-      else if (this.autoResizeEnabled() && this.lastAutoHeight) this.frame.style.height = this.lastAutoHeight;
+      else if (this.autoResizeEnabled() && this.lastAutoHeight) this.setFrameHeight(this.lastAutoHeight);
     }
     this.frameStyleBeforeFs = null;
     if (this.docOverflowBeforeFs !== null) {
@@ -598,6 +740,48 @@ var EmbeddedDesigner = class {
       this.timeoutTimer = null;
     }
   }
+  /**
+   * Auto-renewal (proactive + one expiry recovery) is on when the host wired a
+   * relaunch hook and did not opt out. Without the hook there is nothing to call,
+   * so it is a no-op.
+   */
+  autoRenewEnabled() {
+    return !!this.options.onRequestRelaunch && this.options.autoRenewSession !== false;
+  }
+  clearRenewTimer() {
+    if (this.renewTimer !== null) {
+      clearTimeout(this.renewTimer);
+      this.renewTimer = null;
+    }
+  }
+  /**
+   * Arm the proactive renewal timer from a `ready` message's `expiresAt` (epoch
+   * ms). We relaunch a comfortable lead before expiry so the host can mint a fresh
+   * session and swap `designerUrl` without the user ever seeing the expiry card:
+   *
+   * - normal TTL (≥ 15 min): renew {@link RENEW_LEAD_MS} (~3 min) before expiry;
+   * - short TTL (< 15 min): renew after {@link RENEW_SHORT_TTL_FRACTION} (80%) of
+   *   the remaining life, so the lead can't overshoot the whole session;
+   * - either way, never sooner than {@link RENEW_MIN_DELAY_MS} (30s) after `ready`
+   *   so a burst of `ready` messages can't spin the host.
+   *
+   * Re-armed on every `ready`; cleared on destroy / setDesignerUrl (via re-mount).
+   * A no-op when auto-renewal is off or `expiresAt` is missing/already past — the
+   * expiry-error path recovers a session that has already lapsed.
+   */
+  scheduleRenewal(expiresAt) {
+    this.clearRenewTimer();
+    if (!this.autoRenewEnabled()) return;
+    if (typeof expiresAt !== "number" || !Number.isFinite(expiresAt)) return;
+    const remaining = expiresAt - Date.now();
+    if (remaining <= 0) return;
+    const lead = remaining < RENEW_SHORT_TTL_MS ? remaining * RENEW_SHORT_TTL_FRACTION : remaining - RENEW_LEAD_MS;
+    const delay = Math.max(RENEW_MIN_DELAY_MS, lead);
+    this.renewTimer = setTimeout(() => {
+      this.renewTimer = null;
+      if (this.autoRenewEnabled()) this.options.onRequestRelaunch();
+    }, delay);
+  }
   ensureContainerPositioned(container) {
     const position = getComputedStyle(container).position;
     if (position === "static") {
@@ -1254,6 +1438,17 @@ var CSS = `
 .sl-ba-title .spark{color:var(--sl-accent);font-size:16px}
 .sl-ba-copy{grid-column:1/-1;margin:-4px 0 2px 23px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
 .sl-ba-copy .narrow{display:none}
+/* "\u2605 Best seats" premium quick-pick \u2014 gold accent echoing the \u2605 Premium pill on
+   the confirm popover; deliberately distinct from the accent-toned qty/go. */
+.sl-ba-premium{position:relative;z-index:1;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;
+  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;
+  color:#c9a24b;background:color-mix(in srgb,#e8c15a 10%,var(--sl-surface));
+  border:1px solid color-mix(in srgb,#e8c15a 34%,var(--sl-line));transition:filter .15s,background .15s,color .15s}
+.sl-ba-premium .star{font-size:12px;line-height:1;color:#e8c15a}
+.sl-ba-premium:hover{filter:brightness(1.05)}
+.sl-ba-premium.on{color:#1c1608;background:linear-gradient(135deg,#f0cf6b,#e0b23f);border-color:transparent;
+  box-shadow:0 6px 16px color-mix(in srgb,#e8c15a 26%,transparent)}
+.sl-ba-premium.on .star{color:#5a4410}
 .sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:8px;
   font:inherit;font-size:11px;padding:7px 8px;min-width:0;width:100%;max-width:none}
 .sl-ba-qty{display:flex;align-items:center;gap:7px;padding:3px;border:1px solid var(--sl-line);border-radius:9px;background:var(--sl-surface)}
@@ -1351,6 +1546,25 @@ var CSS = `
 .sl-confirm-view:hover{border-color:var(--sl-muted)}
 .sl-confirm-view svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
+/* commercial seat flags \u2014 limited-view caution + premium tag. Amber tone,
+   deliberately distinct from the red taken/held state; shown on the confirm
+   card, echoed as a small \u25D0 marker on cart chips and the hover tip. */
+.sl-cx{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
+.sl-cx-warn{display:flex;align-items:flex-start;gap:7px;padding:8px 10px;border-radius:9px;
+  background:color-mix(in srgb,#f4b740 13%,var(--sl-surface));border:1px solid color-mix(in srgb,#f4b740 40%,var(--sl-line));
+  animation:slNoticeIn .28s ease both}
+.sl-cx-glyph{flex:none;font-size:14px;line-height:1.2;color:#f4b740}
+.sl-cx-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
+.sl-cx-txt b{font-size:12px;font-weight:800;color:var(--sl-text)}
+.sl-cx-note{font-size:11px;line-height:1.4;color:var(--sl-muted)}
+.sl-cx-premium{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:4px 10px;border-radius:999px;
+  font-size:11px;font-weight:800;letter-spacing:.02em;color:#c9a24b;
+  background:color-mix(in srgb,#e8c15a 13%,var(--sl-surface));border:1px solid color-mix(in srgb,#e8c15a 38%,var(--sl-line))}
+.sl-cx-star{font-size:12px;line-height:1;color:#e8c15a}
+.sl-cx-mark{flex:none;font-size:12px;line-height:1;color:#f4b740;cursor:help}
+.sl-tip-cx{display:flex;align-items:center;gap:6px;padding:5px 10px 7px;font-size:10.5px;font-weight:700;color:#e8b24a}
+.sl-tip-cx .g{font-size:12px}
+
 /* 360\xB0 seat-view modal (fills the widget; drag-to-look-around equirectangular) */
 .sl-view{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;background:var(--sl-bg)}
 .sl-view-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--sl-line);flex:none}
@@ -1479,6 +1693,8 @@ var SeatPicker = class _SeatPicker {
     this.srEl = null;
     this.baQty = 2;
     this.baCat = "";
+    /** "★ Best seats" premium quick-pick toggle — biases best-available to premium seats. */
+    this.baPremium = false;
     this.bestAvailableConfirm = false;
     this.releasingHold = false;
     /** Event sales window is closed (read-only load state / live close). */
@@ -1635,6 +1851,50 @@ var SeatPicker = class _SeatPicker {
     const sight = distance != null ? t2("picker.sightline", { m: distance }) : this.tf("picker.sightlineClear", "Clear sightline");
     return `<button type="button" class="sl-confirm-view sl-confirm-thumbwrap" aria-label="${t2("picker.viewFromSeat", { label: seat.label })}"><img class="sl-confirm-thumb" src="${url}" alt="" /><span class="sl-confirm-thumb-badge">\u{1F52D} ${this.tf("picker.viewFromHere", "View from here")}</span></button><div class="sl-confirm-sight"><span aria-hidden="true">\u2713</span>${sight}</div>`;
   }
+  /** Minimal HTML/attribute escaper for buyer-authored commercial text (notes). */
+  escCx(value) {
+    return String(value ?? "").replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
+  }
+  /** Localized "Restricted view" / "Obstructed view" label for a seat's flags,
+   *  or '' when neither is set. Restricted takes precedence when both are on. */
+  limitedViewLabel(c) {
+    if (c?.restrictedView) return this.tf("picker.restrictedView", "Restricted view");
+    if (c?.obstructedView) return this.tf("picker.obstructedView", "Obstructed view");
+    return "";
+  }
+  /**
+   * Commercial flags block for the confirm/detail surface: a subtle ★ Premium
+   * tag plus an amber ◐ limited-view caution (with the organizer's note when
+   * present). '' when the seat carries no surfaced commercial flag.
+   */
+  commercialConfirmHtml(c) {
+    if (!c) return "";
+    const rows = [];
+    if (c.premium) {
+      rows.push(
+        `<div class="sl-cx-premium"><span class="sl-cx-star" aria-hidden="true">\u2605</span>${this.tf("picker.premiumSeat", "Premium seat")}</div>`
+      );
+    }
+    const limited = this.limitedViewLabel(c);
+    if (limited) {
+      rows.push(
+        `<div class="sl-cx-warn"><span class="sl-cx-glyph" aria-hidden="true">\u25D0</span><span class="sl-cx-txt"><b>${limited}</b>${c.note ? `<span class="sl-cx-note">${this.escCx(c.note)}</span>` : ""}</span></div>`
+      );
+    } else if (c.note) {
+      rows.push(
+        `<div class="sl-cx-warn"><span class="sl-cx-glyph" aria-hidden="true">\u2139</span><span class="sl-cx-txt"><span class="sl-cx-note">${this.escCx(c.note)}</span></span></div>`
+      );
+    }
+    return rows.length ? `<div class="sl-cx">${rows.join("")}</div>` : "";
+  }
+  /** Small ◐ limited-view marker for a cart chip; title/aria uses the seat's
+   *  note when present, else the generic view label. '' for a clear-view seat. */
+  commercialChipMarker(c) {
+    const limited = this.limitedViewLabel(c);
+    if (!limited) return "";
+    const title = this.escCx(c?.note ? c.note : limited);
+    return `<span class="sl-cx-mark" role="img" aria-label="${title}" title="${title}">\u25D0</span>`;
+  }
   /** True when the picker is rendered inside an iframe (snippet embed at /e/:key). */
   isFramed() {
     return typeof window !== "undefined" && window.parent !== window;
@@ -2007,45 +2267,71 @@ var SeatPicker = class _SeatPicker {
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
     this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
+    let hasLimitedView = false;
     if (this.controller.doc) {
       for (const seat of expandChart(this.controller.doc)) {
         for (const type of seat.accessibility ?? []) present.add(type);
         if (seat.accessible && !seat.accessibility?.length) present.add("wheelchair");
+        if (seat.commercial?.restrictedView || seat.commercial?.obstructedView) hasLimitedView = true;
       }
     }
-    if (present.size) {
+    const focusSeatsForFilter = () => {
+      if (this.rungsEl && this.controller.getRung() !== "seats") {
+        this.controller.setRung("seats");
+        this.collapseSectionCard();
+        this.syncRung();
+      }
+    };
+    if (present.size || hasLimitedView) {
       const chips = document.createElement("div");
       chips.className = "sl-chips";
-      const GLYPH = { wheelchair: "\u267F", companion: "\u{1F9D1}\u200D\u{1F91D}\u200D\u{1F9D1}" };
-      const mk = (key, label) => `<button type="button" class="sl-chip-f${key === "all" ? " on" : ""}" data-f="${key}">${label}</button>`;
-      chips.innerHTML = mk("all", "All seats") + [...present].map((type) => mk(type, `${GLYPH[type] ? GLYPH[type] + " " : ""}${type[0].toUpperCase()}${type.slice(1).replace(/-/g, " ")}`)).join("");
       this.regions["top-left"].appendChild(chips);
       this.a11yChipsEl = chips;
-      const active = /* @__PURE__ */ new Set();
-      const syncChips = () => {
-        chips.querySelectorAll("button").forEach((b) => {
-          const f = b.dataset.f;
-          const on = f === "all" ? active.size === 0 : active.has(f);
-          b.classList.toggle("on", on);
-          b.setAttribute("aria-pressed", String(on));
+      if (present.size) {
+        const GLYPH = { wheelchair: "\u267F", companion: "\u{1F9D1}\u200D\u{1F91D}\u200D\u{1F9D1}" };
+        const mk = (key, label) => `<button type="button" class="sl-chip-f${key === "all" ? " on" : ""}" data-a11y="1" data-f="${key}">${label}</button>`;
+        chips.insertAdjacentHTML(
+          "beforeend",
+          mk("all", "All seats") + [...present].map((type) => mk(type, `${GLYPH[type] ? GLYPH[type] + " " : ""}${type[0].toUpperCase()}${type.slice(1).replace(/-/g, " ")}`)).join("")
+        );
+        const active = /* @__PURE__ */ new Set();
+        const syncChips = () => {
+          chips.querySelectorAll("button[data-a11y]").forEach((b) => {
+            const f = b.dataset.f;
+            const on = f === "all" ? active.size === 0 : active.has(f);
+            b.classList.toggle("on", on);
+            b.setAttribute("aria-pressed", String(on));
+          });
+          const filter = active.size ? [...active] : null;
+          this.controller.setAccessibilityFilter(filter);
+          if (filter) focusSeatsForFilter();
+        };
+        chips.querySelectorAll("button[data-a11y]").forEach((btn) => {
+          btn.addEventListener("click", () => {
+            const f = btn.dataset.f;
+            if (f === "all") active.clear();
+            else if (active.has(f)) active.delete(f);
+            else active.add(f);
+            syncChips();
+          });
         });
-        const filter = active.size ? [...active] : null;
-        this.controller.setAccessibilityFilter(filter);
-        if (filter && this.rungsEl && this.controller.getRung() !== "seats") {
-          this.controller.setRung("seats");
-          this.collapseSectionCard();
-          this.syncRung();
-        }
-      };
-      chips.querySelectorAll("button").forEach((btn) => {
-        btn.addEventListener("click", () => {
-          const f = btn.dataset.f;
-          if (f === "all") active.clear();
-          else if (active.has(f)) active.delete(f);
-          else active.add(f);
-          syncChips();
+      }
+      if (hasLimitedView) {
+        const limited = document.createElement("button");
+        limited.type = "button";
+        limited.className = "sl-chip-f";
+        limited.setAttribute("aria-pressed", "false");
+        limited.innerHTML = `\u25D0 ${this.tf("picker.hideLimitedView", "Hide limited-view seats")}`;
+        chips.appendChild(limited);
+        let limitedOn = false;
+        limited.addEventListener("click", () => {
+          limitedOn = !limitedOn;
+          limited.classList.toggle("on", limitedOn);
+          limited.setAttribute("aria-pressed", String(limitedOn));
+          this.controller.setCommercialLimitedFilter(limitedOn);
+          if (limitedOn) focusSeatsForFilter();
         });
-      });
+      }
     }
     const cb = document.createElement("button");
     cb.type = "button";
@@ -2768,7 +3054,7 @@ var SeatPicker = class _SeatPicker {
         const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
         return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(this.paidPrice(c.key, null, c.price))}</span></span>`;
       }).join("");
-      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
+      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (summary.entrance ? `<div class="sl-seccard-entrance">${t2("picker.entrance")} ${String(summary.entrance).replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch])}</div>` : "") + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       card.querySelector(".sl-seccard-overview").addEventListener("click", () => this.controller.overview());
       (this.regions["top-center"] ?? this.els.map).appendChild(card);
@@ -2862,7 +3148,7 @@ var SeatPicker = class _SeatPicker {
     el.setAttribute("aria-modal", "true");
     el.setAttribute("aria-label", `Confirm seat ${seat.label}`);
     el.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
-    el.innerHTML = `<div class="sl-confirm-grid"><div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details?.sectionLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Row</span><span class="sl-confirm-value">${safe(this.rowShort(details))}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.label)}</span></div></div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + (this.seatViewEnabled() ? this.confirmThumbHtml(seat) : "") + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
+    el.innerHTML = `<div class="sl-confirm-grid"><div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details?.sectionLabel)}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">${safe(this.rowTypeWord(details))}</span><span class="sl-confirm-value">${safe(this.rowShort(details))}</span></div><div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? seat.displayLabel ?? seat.label)}</span></div></div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() ? this.confirmThumbHtml(seat) : "") + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
     this.els.map.appendChild(el);
     this.confirmEl = el;
     this.reanchorConfirm();
@@ -3157,14 +3443,16 @@ var SeatPicker = class _SeatPicker {
     const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
     if (!this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
       const cats = this.controller.doc?.categories ?? [];
-      parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
+      parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + // Premium quick-pick — present only when the chart actually has premium
+      // seats (same present-only philosophy as the a11y filter chips).
+      (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>`) + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
     }
     const idGrid = (seatId, label) => {
       const d = seatId ? this.controller.seatDetails(seatId) : null;
       if (!d?.sectionLabel && !d?.rowLabel && !d?.seatNumber) {
         return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Seat</span><span class="val">${label}</span></span></div>`;
       }
-      return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${d.sectionLabel ?? "\u2014"}</span></span>` + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">Row</span><span class="val">${this.rowShort(d)}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${d.seatNumber}</span></span>` : "") + `</div>`;
+      return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${d.sectionLabel ?? "\u2014"}</span></span>` + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">${this.rowTypeWord(d)}</span><span class="val">${this.rowShort(d)}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${d.seatNumber}</span></span>` : "") + `</div>`;
     };
     const iconRail = (rmAria, viewLabel) => `<div class="sl-chip-rail"><button type="button" class="rm" aria-label="${rmAria}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>` + (viewLabel ? `<button type="button" class="view" data-view-label="${viewLabel}" aria-label="${t2("picker.viewFromSeat", { label: viewLabel })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "") + `</div>`;
     for (const item of heldItems) {
@@ -3175,7 +3463,7 @@ var SeatPicker = class _SeatPicker {
       const heldSeat = item.objectType !== "ga" ? this.controller.seatByLabel(item.label) : null;
       const canView2 = this.seatViewEnabled() && !!heldSeat;
       parts.push(
-        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"${heldSeat ? ` data-locate="${heldSeat.id}"` : ""}><div class="sl-chip-main">` + idGrid(heldSeat?.id ?? null, item.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span><span class="amt">${this.money(this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1))}</span></div></div>` + iconRail(`Remove held ticket ${item.label}`, canView2 ? item.label : null) + `</div>`
+        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"${heldSeat ? ` data-locate="${heldSeat.id}"` : ""}><div class="sl-chip-main">` + idGrid(heldSeat?.id ?? null, item.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span>` + this.commercialChipMarker(heldSeat?.commercial) + `<span class="amt">${this.money(this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1))}</span></div></div>` + iconRail(`Remove held ticket ${item.label}`, canView2 ? item.label : null) + `</div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
@@ -3186,7 +3474,7 @@ var SeatPicker = class _SeatPicker {
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
       const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(this.paidPrice(s.categoryKey, ti.id, ti.price))}</option>`).join("") + `</select>` : "";
       parts.push(
-        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price))}</span></div></div>` + iconRail(`Remove ${s.label}`, canView ? s.label : null) + `</div>`
+        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.displayLabel ?? s.label) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>${this.commercialChipMarker(s.commercial)}${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price))}</span></div></div>` + iconRail(`Remove ${s.label}`, canView ? s.label : null) + `</div>`
       );
     }
     for (const area of gaAreas) {
@@ -3206,6 +3494,10 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelector("[data-ba-cat]")?.addEventListener("change", (e) => {
       this.baCat = e.target.value;
     });
+    this.els.tray.querySelector("[data-ba-premium]")?.addEventListener("click", () => {
+      this.baPremium = !this.baPremium;
+      this.syncTray();
+    });
     this.els.tray.querySelector(".sl-ba-go")?.addEventListener("click", () => {
       if (this.pendingSelectionCount() > 0) {
         this.bestAvailableConfirm = true;
@@ -3213,7 +3505,7 @@ var SeatPicker = class _SeatPicker {
         this.els.tray.querySelector("[data-ba-replace]")?.focus();
         return;
       }
-      void this.bestAvailable(this.baQty, this.baCat || void 0);
+      void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium });
     });
     this.els.tray.querySelector("[data-ba-cancel]")?.addEventListener("click", () => {
       this.bestAvailableConfirm = false;
@@ -3222,7 +3514,7 @@ var SeatPicker = class _SeatPicker {
     });
     this.els.tray.querySelector("[data-ba-replace]")?.addEventListener("click", () => {
       this.bestAvailableConfirm = false;
-      void this.bestAvailable(this.baQty, this.baCat || void 0);
+      void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium });
     });
     this.els.tray.querySelectorAll(".sl-chip .rm").forEach((btn) => {
       btn.addEventListener("click", () => {
@@ -3604,6 +3896,12 @@ var SeatPicker = class _SeatPicker {
    * the prefix is exact (won't touch "1040-A" under section "104"); otherwise
    * the label is shown verbatim.
    */
+  /** Buyer-facing type word for the row/table key label — the designer's
+   *  per-object "Displayed type" override, or the default "Row". */
+  rowTypeWord(details) {
+    const t3 = details?.rowType?.trim();
+    return t3 || "Row";
+  }
   rowShort(details) {
     const row = details?.rowLabel;
     const sec = details?.sectionLabel;
@@ -3623,10 +3921,12 @@ var SeatPicker = class _SeatPicker {
     const esc2 = (v) => String(v ?? "\u2014").replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch]);
     const price = this.money(this.paidPrice(details.categoryKey, details.tierId ?? null, details.price));
     const hasLoc = details.sectionLabel || details.rowLabel || details.seatNumber;
-    const grid = hasLoc ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Row</span><span class="sl-tip-val">${esc2(this.rowShort(details))}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.seatNumber ?? details.label)}</span></div></div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.label)}</span></div></div>`;
+    const grid = hasLoc ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc2(details.sectionLabel)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">${esc2(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc2(this.rowShort(details))}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.seatNumber ?? details.displayLabel ?? details.label)}</span></div></div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc2(details.displayLabel ?? details.label)}</span></div></div>`;
     const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
+    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>` : "";
     this.tipEl.style.setProperty("--sl-cat", details.categoryColor);
-    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc2(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + statusLine;
+    this.tipEl.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>` + cxLine + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -3646,7 +3946,7 @@ var SeatPicker = class _SeatPicker {
   async removeHeldTicket(label) {
     return this.removeHeldLabel(label);
   }
-  async bestAvailable(qty, categoryKey) {
+  async bestAvailable(qty, categoryKey, opts = {}) {
     if (this.salesClosed || this.bestAvailableBusy) return null;
     qty = Math.max(1, Math.min(this.maxTickets, Math.floor(qty)));
     if (this.confirmSeat) this.cancelConfirm();
@@ -3658,7 +3958,7 @@ var SeatPicker = class _SeatPicker {
       button.innerHTML = '<span class="sl-ba-spin" aria-hidden="true"></span>Finding\u2026';
     }
     try {
-      const h = await this.controller.bestAvailable(qty, categoryKey);
+      const h = await this.controller.bestAvailable(qty, categoryKey, opts);
       if (h) {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
         this.handedOff = false;
@@ -3668,6 +3968,9 @@ var SeatPicker = class _SeatPicker {
         this.flashHeldSeats(this.hold);
         this.syncTray();
         this.emitHoldChange();
+        if (opts.preferPremium && h.seats.length && !h.seats.every((s) => s.commercial?.premium)) {
+          this.toast(t2("picker.premiumFallbackNote", { count: qty }), "neutral");
+        }
         return this.hold;
       }
       return null;