@seatlayer/js 0.24.0 → 0.25.0

package/dist/index.d.cts

@@ -684,6 +684,8 @@ declare class SeatPicker {
     private srEl;
     private baQty;
     private baCat;
+    /** "★ Best seats" premium quick-pick toggle — biases best-available to premium seats. */
+    private baPremium;
     private bestAvailableConfirm;
     private releasingHold;
     /** Event sales window is closed (read-only load state / live close). */
@@ -736,6 +738,20 @@ declare class SeatPicker {
      * sightline" line — the premium at-a-glance moment; click opens the 360.
      */
     private confirmThumbHtml;
+    /** Minimal HTML/attribute escaper for buyer-authored commercial text (notes). */
+    private escCx;
+    /** Localized "Restricted view" / "Obstructed view" label for a seat's flags,
+     *  or '' when neither is set. Restricted takes precedence when both are on. */
+    private limitedViewLabel;
+    /**
+     * 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.
+     */
+    private commercialConfirmHtml;
+    /** 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. */
+    private commercialChipMarker;
     /** True when the picker is rendered inside an iframe (snippet embed at /e/:key). */
     private isFramed;
     /**
@@ -997,6 +1013,9 @@ declare 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". */
+    private rowTypeWord;
     private rowShort;
     private updateTooltip;
     getSelection(): PickerSeat[];
@@ -1006,7 +1025,9 @@ declare class SeatPicker {
     resumeHold(holdId: string): Promise<HoldResult | null>;
     /** Remove one server-held ticket while keeping the rest of the hold active. */
     removeHeldTicket(label: string): Promise<boolean>;
-    bestAvailable(qty: number, categoryKey?: string): Promise<HoldResult | null>;
+    bestAvailable(qty: number, categoryKey?: string, opts?: {
+        preferPremium?: boolean;
+    }): Promise<HoldResult | null>;
     release(): Promise<void>;
     destroy(): void;
 }

package/dist/index.d.ts

@@ -684,6 +684,8 @@ declare class SeatPicker {
     private srEl;
     private baQty;
     private baCat;
+    /** "★ Best seats" premium quick-pick toggle — biases best-available to premium seats. */
+    private baPremium;
     private bestAvailableConfirm;
     private releasingHold;
     /** Event sales window is closed (read-only load state / live close). */
@@ -736,6 +738,20 @@ declare class SeatPicker {
      * sightline" line — the premium at-a-glance moment; click opens the 360.
      */
     private confirmThumbHtml;
+    /** Minimal HTML/attribute escaper for buyer-authored commercial text (notes). */
+    private escCx;
+    /** Localized "Restricted view" / "Obstructed view" label for a seat's flags,
+     *  or '' when neither is set. Restricted takes precedence when both are on. */
+    private limitedViewLabel;
+    /**
+     * 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.
+     */
+    private commercialConfirmHtml;
+    /** 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. */
+    private commercialChipMarker;
     /** True when the picker is rendered inside an iframe (snippet embed at /e/:key). */
     private isFramed;
     /**
@@ -997,6 +1013,9 @@ declare 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". */
+    private rowTypeWord;
     private rowShort;
     private updateTooltip;
     getSelection(): PickerSeat[];
@@ -1006,7 +1025,9 @@ declare class SeatPicker {
     resumeHold(holdId: string): Promise<HoldResult | null>;
     /** Remove one server-held ticket while keeping the rest of the hold active. */
     removeHeldTicket(label: string): Promise<boolean>;
-    bestAvailable(qty: number, categoryKey?: string): Promise<HoldResult | null>;
+    bestAvailable(qty: number, categoryKey?: string, opts?: {
+        preferPremium?: boolean;
+    }): Promise<HoldResult | null>;
     release(): Promise<void>;
     destroy(): void;
 }

package/dist/index.js

@@ -1438,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)}
@@ -1535,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}
@@ -1663,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). */
@@ -1819,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;
@@ -2191,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";
@@ -2952,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);
@@ -3046,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();
@@ -3341,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) {
@@ -3359,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));
@@ -3370,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) {
@@ -3390,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;
@@ -3397,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;
@@ -3406,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", () => {
@@ -3788,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;
@@ -3807,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();
   }
@@ -3830,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();
@@ -3842,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;
@@ -3852,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;