@seatlayer/core 0.22.0 → 0.24.0

package/dist/index.js

@@ -111,6 +111,53 @@ function transformSectionOutlinePath(path, transform, radiusScale = 1, reflected
   };
 }
 
+// src/core/labeling.ts
+var FULL_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+var LOWER_ALPHABET = "abcdefghijklmnopqrstuvwxyz";
+function toBijectiveBase(index, alphabet) {
+  const base = alphabet.length;
+  let n = index + 1;
+  let out = "";
+  while (n > 0) {
+    n -= 1;
+    const rem = n % base;
+    out = alphabet[rem] + out;
+    n = Math.floor(n / base);
+  }
+  return out;
+}
+function toLetters(value, lower = false) {
+  const alphabet = lower ? LOWER_ALPHABET : FULL_ALPHABET;
+  return toBijectiveBase(Math.max(0, Math.floor(value) - 1), alphabet);
+}
+var ROMAN_TABLE = [
+  [1e3, "M"],
+  [900, "CM"],
+  [500, "D"],
+  [400, "CD"],
+  [100, "C"],
+  [90, "XC"],
+  [50, "L"],
+  [40, "XL"],
+  [10, "X"],
+  [9, "IX"],
+  [5, "V"],
+  [4, "IV"],
+  [1, "I"]
+];
+function toRoman(value) {
+  if (!Number.isFinite(value) || value <= 0) return String(value);
+  let remaining = Math.floor(value);
+  let out = "";
+  for (const [n, sym] of ROMAN_TABLE) {
+    while (remaining >= n) {
+      out += sym;
+      remaining -= n;
+    }
+  }
+  return out;
+}
+
 // src/core/layout.ts
 function overrideAccessibility(o) {
   if (!o) return [];
@@ -156,24 +203,62 @@ function overrideMap(row) {
   if (row.overrides) for (const o of row.overrides) m.set(o.index, o);
   return m;
 }
-function expandRowSlots(row) {
-  const start = row.seatLabelStart ?? 1;
+function centerRank(n) {
+  const rank = new Array(n);
+  Array.from({ length: n }, (_, i) => i).sort((a, b) => Math.abs(2 * a - (n - 1)) - Math.abs(2 * b - (n - 1)) || a - b).forEach((idx, k) => rank[idx] = k);
+  return rank;
+}
+function seatLabelPart(row, i) {
+  const rawStart = row.seatLabelStart ?? 1;
   const dir = row.seatNumbering?.direction ?? "ltr";
   const step = row.seatNumbering?.step ?? 1;
+  const scheme = row.seatNumbering?.scheme ?? "decimal";
+  const prefix = row.seatNumbering?.prefix ?? "";
+  const endAt = row.seatNumbering?.endAt;
   const n = row.seatCount;
-  let seatNumber;
-  if (dir === "center") {
-    const rank = new Array(n);
-    Array.from({ length: n }, (_, i) => i).sort((a, b) => Math.abs(2 * a - (n - 1)) - Math.abs(2 * b - (n - 1)) || a - b).forEach((idx, k) => rank[idx] = k);
-    seatNumber = (i) => start + rank[i] * step;
-  } else {
-    seatNumber = (i) => start + (dir === "rtl" ? n - 1 - i : i) * step;
+  if (scheme === "updown") {
+    const half = Math.ceil(n / 2);
+    const core2 = i < half ? rawStart + 2 * i : rawStart - 1 + 2 * (n - i);
+    return `${prefix}${core2}`;
+  }
+  const effStep = scheme === "odd" || scheme === "even" ? 2 : step;
+  const start = endAt != null && Number.isFinite(endAt) ? endAt - (n - 1) * effStep : rawStart;
+  const p = dir === "center" ? centerRank(n)[i] : dir === "rtl" ? n - 1 - i : i;
+  let core;
+  switch (scheme) {
+    case "odd": {
+      const firstOdd = start % 2 === 1 ? start : start + 1;
+      core = String(firstOdd + p * 2);
+      break;
+    }
+    case "even": {
+      const firstEven = start % 2 === 0 ? start : start + 1;
+      core = String(firstEven + p * 2);
+      break;
+    }
+    case "roman":
+      core = toRoman(start + p * step);
+      break;
+    case "letters-upper":
+      core = toLetters(start + p * step, false);
+      break;
+    case "letters-lower":
+      core = toLetters(start + p * step, true);
+      break;
+    case "decimal":
+    default:
+      core = String(start + p * step);
+      break;
   }
+  return `${prefix}${core}`;
+}
+function expandRowSlots(row) {
   const ov = overrideMap(row);
   return rowSeatPositions(row).map((p, i) => {
     const o = ov.get(i);
     const accessibility = overrideAccessibility(o);
-    const inventoryLabel = o?.label ?? `${row.label}-${seatNumber(i)}`;
+    const part = seatLabelPart(row, i);
+    const inventoryLabel = o?.label ?? `${row.label}-${part}`;
     const displayPrefix = row.displayLabel ?? row.label;
     const commercial = { ...row.commercial, ...o?.commercial };
     return {
@@ -181,7 +266,7 @@ function expandRowSlots(row) {
       x: p.x + (o?.dx ?? 0),
       y: p.y + (o?.dy ?? 0),
       label: inventoryLabel,
-      displayLabel: o?.displayLabel ?? `${displayPrefix}-${seatNumber(i)}`,
+      displayLabel: o?.displayLabel ?? `${displayPrefix}-${part}`,
       categoryKey: o?.categoryKey ?? row.categoryKey,
       skipped: !!o?.skip,
       accessible: accessibility.length > 0,
@@ -323,8 +408,8 @@ function polygonLabelPoint(outer, holes) {
   const xs = outer.map((point) => point.x);
   const ys = outer.map((point) => point.y);
   const bounds = { minX: Math.min(...xs), maxX: Math.max(...xs), minY: Math.min(...ys), maxY: Math.max(...ys) };
-  const centroid = polygonCentroid(outer);
-  if (pointInPolygonWithHoles(centroid, outer, holes)) return centroid;
+  const centroid2 = polygonCentroid(outer);
+  if (pointInPolygonWithHoles(centroid2, outer, holes)) return centroid2;
   let best = outer[0];
   let bestScore = -Infinity;
   const rings = [outer, ...holes ?? []];
@@ -648,6 +733,7 @@ import { Rect } from "konva/lib/shapes/Rect";
 import { Ellipse } from "konva/lib/shapes/Ellipse";
 import { Line } from "konva/lib/shapes/Line";
 import { Text } from "konva/lib/shapes/Text";
+import { Path } from "konva/lib/shapes/Path";
 import { Image as KImage } from "konva/lib/shapes/Image";
 import { Shape } from "konva/lib/Shape";
 
@@ -664,6 +750,8 @@ var LIGHT_BOOKABLE_LABEL_INK = "#ffffff";
 function isBookableLabelLegibleAtScale(fontSize, effectiveScale) {
   return fontSize * effectiveScale >= MIN_VISIBLE_BOOKABLE_LABEL_PX;
 }
+var ACCESS_GLYPH_VIEWBOX = 24;
+var ACCESS_GLYPH_PATH = "M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z";
 function bookableMarkerLabel(publicLabel) {
   return /-(\d{1,5})$/.exec(publicLabel)?.[1] ?? publicLabel;
 }
@@ -743,29 +831,17 @@ var en = {
   "common.done": "Done",
   "common.copied": "\u2713 Copied",
   // buyer picker
-  "picker.holdSeats": "Hold seats & checkout",
-  "picker.completeBooking": "Complete booking",
-  "picker.seatsHeld": "Seats held \u2014 {time}",
   "picker.holdExpired": "Your hold expired \u2014 the seats were released. Pick again.",
-  "picker.seatTaken": "Seat {label} was just taken by another buyer.",
   "picker.poweredBy": "Powered by SeatLayer",
   "picker.testMode": "TEST MODE",
-  "picker.colorblind": "Colorblind-friendly colors",
   "picker.orphanHint": "This leaves a single seat stranded \u2014 consider shifting one seat over.",
-  "picker.seats.one": "{count} seat",
-  "picker.seats.other": "{count} seats",
   // renderer (drawn on the Konva map — shared by the embed SDK)
   "map.aria": "Seating map. Use arrow keys to move between seats, Enter to select.",
   "map.seatsLeft": "{count} LEFT",
   "map.fromPrice": "FROM {price}",
   "map.statusHeld": "On hold",
   "map.statusTaken": "Taken",
-  // buyer picker page (src/pages/PickerPage.tsx)
-  "picker.language": "Language",
-  "picker.zoomToFit": "Zoom to fit",
-  "picker.seatCountLabel": "seats",
-  "picker.capacity": "capacity",
-  "picker.viewMode": "View mode",
+  // buyer picker widget (src/picker/widget/SeatPicker.ts)
   "picker.floor": "Floor",
   "picker.zoomLevel": "Zoom level",
   "picker.rungTip.zones": "Venue overview \u2014 groups of sections such as North Stand or VIP",
@@ -780,37 +856,19 @@ var en = {
   "picker.seatsLeftInSection.other": "{count} seats left",
   "picker.overview": "Overview",
   "picker.tapSeatHint": "Tap any seat to check its view",
-  "picker.chartSize": "Chart size",
-  "picker.custom": "Custom",
-  "picker.categories": "Categories",
-  "picker.accessibility": "Accessibility",
-  "picker.showAnyAccessible": "Show any accessible seat",
-  "picker.any": "Any",
-  "picker.yourSeats": "Your seats",
-  "picker.emptySeats": "Tap seats on the map",
-  "picker.emptySeatsWithGa": "Tap seats on the map \xB7 tap a standing area for GA tickets",
-  "picker.oneFewer": "One fewer",
-  "picker.oneMore": "One more",
-  "picker.remove": "Remove {label}",
   "picker.ticketTierFor": "Ticket tier for {label}",
-  "picker.total": "Total: {amount}",
   "picker.viewFromSeat": "View from seat {label}",
   "picker.real360": "REAL 360\xB0",
   "picker.preview": "PREVIEW",
-  "picker.open360": "Open 360\xB0 view",
   "picker.sightline": "\u2248 {m} m to stage \xB7 clear sightline",
-  "picker.bookedDemo": "Booked! (demo)",
-  "picker.bookButton.one": "Book {count} ticket \u2014 {amount}",
-  "picker.bookButton.other": "Book {count} tickets \u2014 {amount}",
-  "picker.simulateCrowd": "Simulate crowd: {state}",
-  "picker.on": "ON",
-  "picker.off": "OFF",
   "picker.panorama360": "360\xB0 venue photo",
   "picker.illustrationCaption": "illustration \xB7 \u2248 {m} m from stage",
   "picker.restrictedView": "Restricted view",
   "picker.obstructedView": "Obstructed view",
   "picker.premiumSeat": "Premium seat",
-  "picker.hideLimitedView": "Hide limited-view seats"
+  "picker.hideLimitedView": "Hide limited-view seats",
+  "picker.bestSeatsPremium": "Best seats",
+  "picker.premiumFallbackNote": "No premium block of {count} \u2014 showing best overall"
 };
 
 // src/i18n/index.ts
@@ -861,6 +919,7 @@ var CACHE_THRESHOLD = 0.55 * SEAT_LEGIBLE_SCALE;
 var LABEL_SCALE = MIN_VISIBLE_BOOKABLE_LABEL_PX / SEAT_LABEL_FONT_SIZE;
 var MIN_FITTED_SEAT_LABEL_FONT_SIZE = 4;
 var SEAT_TAP_SLOP_PX = 14;
+var SEAT_GLYPH_MIN_PX = 6.5;
 var SECTION_PROMINENT_SCALE = 0.45 * SEAT_LEGIBLE_SCALE;
 var BLOCK_MELT_TOP = 0.9 * SEAT_LEGIBLE_SCALE;
 var SEAT_FOCUS_SCALE = Math.max(SEAT_LEGIBLE_SCALE * 1.1, BLOCK_MELT_TOP);
@@ -1150,6 +1209,15 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.boothLabelById = /* @__PURE__ */ new Map();
     /** Viewport seat labels are rebuilt after each settled camera change. */
     this.seatLabelById = /* @__PURE__ */ new Map();
+    /** Coloured accommodation ring per accessible seat (few per chart). */
+    this.accessRingById = /* @__PURE__ */ new Map();
+    /** Centred accessibility glyph per accessible seat — shown once the seat is
+     *  big enough on-screen (see {@link SEAT_GLYPH_MIN_PX}); the ring is the
+     *  smaller-zoom fallback. Kept in a map so zoom toggles touch only the handful
+     *  of accessible seats, never all 13k nodes. */
+    this.accessGlyphById = /* @__PURE__ */ new Map();
+    /** Whether the accessibility glyph is legible at the current camera scale. */
+    this.accessGlyphVisible = false;
     /** Authored free-text nodes obey the same rendered-size visibility floor. */
     this.freeTextById = /* @__PURE__ */ new Map();
     /** Stage/rink landmarks retain a readable screen-space caption at overview. */
@@ -1462,6 +1530,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.boothDims.clear();
     this.boothLabelById.clear();
     this.seatLabelById.clear();
+    this.accessRingById.clear();
+    this.accessGlyphById.clear();
     this.freeTextById.clear();
     this.primaryFocalLabels.clear();
     this.gaById.clear();
@@ -2370,18 +2440,21 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.paintSeat(c, seat.id);
       target.add(c);
       if (seat.accessible) {
-        target.add(
-          new Circle({
-            x: seat.x,
-            y: seat.y,
-            radius: this.seatR + 1,
-            stroke: accessibilityRingColor(seat.accessibility),
-            strokeWidth: 2,
-            listening: false,
-            perfectDrawEnabled: false,
-            shadowForStrokeEnabled: false
-          })
-        );
+        const ring = new Circle({
+          x: seat.x,
+          y: seat.y,
+          radius: this.seatR + 1.5,
+          stroke: accessibilityRingColor(seat.accessibility),
+          strokeWidth: 2.5,
+          listening: false,
+          perfectDrawEnabled: false,
+          shadowForStrokeEnabled: false
+        });
+        this.accessRingById.set(seat.id, ring);
+        target.add(ring);
+        const glyph = this.buildAccessGlyph(seat, typeof c.fill() === "string" ? c.fill() : "");
+        this.accessGlyphById.set(seat.id, glyph);
+        target.add(glyph);
       }
     }
   }
@@ -2425,6 +2498,53 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     target.add(t2);
     this.paintSeat(rect, seat.id);
   }
+  /**
+   * Build the centred accessibility glyph for a seat. Sized relative to the seat
+   * radius (so it always fills the marker at any zoom) and given a contrast-aware
+   * fill against the seat's paint — recomputed per state in {@link paintSeat}.
+   */
+  buildAccessGlyph(seat, seatFill) {
+    const k = this.seatR * 1.5 / ACCESS_GLYPH_VIEWBOX;
+    return new Path({
+      x: seat.x,
+      y: seat.y,
+      data: ACCESS_GLYPH_PATH,
+      offsetX: ACCESS_GLYPH_VIEWBOX / 2,
+      offsetY: ACCESS_GLYPH_VIEWBOX / 2,
+      scaleX: k,
+      scaleY: k,
+      fill: stateAwareBookableLabelInk(seatFill, "#ffffff"),
+      listening: false,
+      visible: this.accessGlyphVisible,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false
+    });
+  }
+  /**
+   * Toggle the accessibility glyphs for the current camera scale: shown once the
+   * effective on-screen seat radius clears {@link SEAT_GLYPH_MIN_PX}, otherwise
+   * hidden so only the ring remains. Iterates the (small) accessible-seat set,
+   * never the full node graph, so it is cheap to call on every view change.
+   */
+  updateAccessGlyphs(scale) {
+    if (!this.accessGlyphById.size) return;
+    this.accessGlyphVisible = this.seatR * scale >= SEAT_GLYPH_MIN_PX;
+    for (const [id, glyph] of this.accessGlyphById) {
+      glyph.visible(this.accessGlyphVisible && this.accessGlyphEligible(id));
+    }
+  }
+  /**
+   * Whether an accessible seat's glyph should show for its current status. It is
+   * hidden on seats a buyer cannot take (sold, or another buyer's hold) where the
+   * overlay status cue (diagonal mark / lock) carries the state instead — mirrors
+   * the `unavailable` test in {@link updateLabels} so the two never collide.
+   */
+  accessGlyphEligible(id) {
+    const status = this.statusById.get(id) ?? "free";
+    if (status === "booked") return false;
+    if (status === "held" && !this.ownedHold.has(id) && !this.opts.manageMode) return false;
+    return true;
+  }
   /** The category's display color — Okabe-Ito hue when colorblind-safe is on. */
   seatBaseColor(categoryKey) {
     if (!this.colorblind) return this.catColor.get(categoryKey) ?? "#6e7bff";
@@ -2538,6 +2658,14 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         isBookableLabelLegibleAtScale(bookableLabel.fontSize(), this.effScale()) && c.opacity() >= 0.5
       );
     }
+    const accessGlyph = this.accessGlyphById.get(id);
+    if (accessGlyph) {
+      const fill = c.fill();
+      accessGlyph.fill(stateAwareBookableLabelInk(typeof fill === "string" ? fill : "", "#ffffff"));
+      accessGlyph.opacity(c.opacity());
+      accessGlyph.visible(this.accessGlyphVisible && this.accessGlyphEligible(id));
+    }
+    this.accessRingById.get(id)?.opacity(c.opacity());
   }
   /** True when a seat sits in a section/zone currently marked `closed`. */
   seatInClosedSection(id) {
@@ -3016,7 +3144,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
    * Membership and category mix are still precomputed for the detailed state.
    */
   renderSection(obj) {
-    const centroid = polygonLabelPoint(obj.outline, obj.holes);
+    const centroid2 = polygonLabelPoint(obj.outline, obj.holes);
     const palette = overviewPalette(this.canvasBackground);
     const memberIds = [];
     const catCounts = /* @__PURE__ */ new Map();
@@ -3078,8 +3206,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const preferredInk = labelStyle?.color ?? palette.sectionInk;
     const labelScale = (labelStyle?.size ?? 18) / 18;
     const nameLabel = new Text({
-      x: obj.labelPresentation?.position?.x ?? centroid.x,
-      y: obj.labelPresentation?.position?.y ?? centroid.y,
+      x: obj.labelPresentation?.position?.x ?? centroid2.x,
+      y: obj.labelPresentation?.position?.y ?? centroid2.y,
       text: obj.displayLabel ?? obj.label,
       rotation: obj.labelPresentation?.rotation ?? 0,
       visible: obj.labelPresentation?.visible !== false,
@@ -3094,8 +3222,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     nameLabel.offsetY(nameLabel.height() / 2);
     bgTarget.add(nameLabel);
     const subLabel = new Text({
-      x: centroid.x,
-      y: centroid.y,
+      x: centroid2.x,
+      y: centroid2.y,
       text: t("map.seatsLeft", { count: free }),
       fontSize: 12,
       fontStyle: "700",
@@ -3114,8 +3242,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       outline: obj.outline,
       ...obj.outlinePath ? { outlinePath: obj.outlinePath } : {},
       holes: obj.holes ?? [],
-      centroid,
-      labelAnchors: polygonLabelCandidates(obj.outline, obj.holes ?? [], centroid),
+      centroid: centroid2,
+      labelAnchors: polygonLabelCandidates(obj.outline, obj.holes ?? [], centroid2),
       zone: obj.zone,
       memberIds,
       total: memberIds.length,
@@ -4263,6 +4391,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (this.hasSections) this.applySectionLod(scale);
     else if (this.primaryFocalLabels.size) this.bgLayer.batchDraw();
     this.paintGAStateForView();
+    this.updateAccessGlyphs(scale);
     const shouldCache = scale < CACHE_THRESHOLD;
     if (shouldCache && !this.cached) {
       this.cacheSeatLayer();
@@ -4345,6 +4474,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     for (const seat of this.seats) {
       if (seat.kind === "booth") continue;
       if (seat.x < x0 || seat.x > x1 || seat.y < y0 || seat.y > y1) continue;
+      if (seat.accessible && this.accessGlyphVisible) continue;
       const shape = this.circleById.get(seat.id);
       if ((shape?.opacity() ?? 1) < 0.5) continue;
       const status = this.statusById.get(seat.id) ?? "free";
@@ -4475,6 +4605,103 @@ function strandedSingles(seats, statusOf, selectedIds) {
   return out;
 }
 
+// src/core/bestAvailable.ts
+function seatIndex2(seat, fallback) {
+  const i = seat.id.lastIndexOf(":");
+  if (i < 0) return fallback;
+  const n = Number(seat.id.slice(i + 1));
+  return Number.isFinite(n) ? n : fallback;
+}
+function dist2(a, b) {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return dx * dx + dy * dy;
+}
+function centroid(seats) {
+  let x = 0;
+  let y = 0;
+  for (const s of seats) {
+    x += s.x;
+    y += s.y;
+  }
+  return { x: x / seats.length, y: y / seats.length };
+}
+function isPremium(seat) {
+  return seat.commercial?.premium === true;
+}
+function pickBestAvailable(seats, available, opts) {
+  const qty = Math.floor(opts.qty);
+  if (!Number.isFinite(qty) || qty <= 0) return { labels: [], reason: "sold_out" };
+  const { categoryKey, focal, preferPremium } = opts;
+  const rows = /* @__PURE__ */ new Map();
+  const eligibleAll = [];
+  seats.forEach((seat, i) => {
+    const elig = available.has(seat.label) && (!categoryKey || seat.categoryKey === categoryKey);
+    let arr = rows.get(seat.rowId);
+    if (!arr) {
+      arr = [];
+      rows.set(seat.rowId, arr);
+    }
+    arr.push({ seat, index: seatIndex2(seat, i), elig });
+    if (elig) eligibleAll.push(seat);
+  });
+  if (eligibleAll.length === 0) return { labels: [], reason: "sold_out" };
+  let best = null;
+  const better = (c) => {
+    if (!best) return true;
+    if (preferPremium && c.nonPremium !== best.nonPremium) return c.nonPremium < best.nonPremium;
+    if (c.orphan !== best.orphan) return c.orphan < best.orphan;
+    if (c.d2 !== best.d2) return c.d2 < best.d2;
+    const r = c.rowId.localeCompare(best.rowId);
+    if (r !== 0) return r < 0;
+    return c.startIndex < best.startIndex;
+  };
+  for (const [rowId, slotsUnsorted] of rows) {
+    const slots = [...slotsUnsorted].sort((a, b) => a.index - b.index);
+    let i = 0;
+    while (i < slots.length) {
+      if (!slots[i].elig) {
+        i++;
+        continue;
+      }
+      let j = i;
+      while (j < slots.length && slots[j].elig) j++;
+      const segLen = j - i;
+      for (let p = 0; p + qty <= segLen; p++) {
+        const leftRem = p;
+        const rightRem = segLen - (p + qty);
+        const orphan = leftRem === 1 || rightRem === 1 ? 1 : 0;
+        const runSeats = slots.slice(i + p, i + p + qty).map((s) => s.seat);
+        const c = {
+          labels: runSeats.map((s) => s.label),
+          seats: runSeats,
+          rowId,
+          startIndex: slots[i + p].index,
+          orphan,
+          nonPremium: preferPremium ? runSeats.reduce((n, s) => n + (isPremium(s) ? 0 : 1), 0) : 0,
+          d2: dist2(centroid(runSeats), focal)
+        };
+        if (better(c)) best = c;
+      }
+      i = j;
+    }
+  }
+  if (best) return { labels: best.labels };
+  if (eligibleAll.length < qty) return { labels: [], reason: "not_enough_together" };
+  const ranked = eligibleAll.map((seat, i) => ({ seat, i, d2: dist2(seat, focal) })).sort((a, b) => {
+    if (preferPremium) {
+      const pa = isPremium(a.seat) ? 0 : 1;
+      const pb = isPremium(b.seat) ? 0 : 1;
+      if (pa !== pb) return pa - pb;
+    }
+    if (a.d2 !== b.d2) return a.d2 - b.d2;
+    const r = a.seat.rowId.localeCompare(b.seat.rowId);
+    if (r !== 0) return r;
+    return seatIndex2(a.seat, a.i) - seatIndex2(b.seat, b.i);
+  });
+  return { labels: ranked.slice(0, qty).map((r) => r.seat.label) };
+}
+
 // src/picker/PickerController.ts
 var DEFAULT_MAX_SELECTION = 10;
 var MAX_BACKOFF_MS = 15e3;
@@ -4597,9 +4824,11 @@ var PickerController = class {
       this.allIds.push(s.id);
       const source = chartObjects.get(s.rowId);
       const sourceLabel = source && "label" in source && typeof source.label === "string" ? source.label : void 0;
-      const rowLabel = s.kind === "booth" ? void 0 : sourceLabel;
-      const labelParts = s.label.split("-");
-      const seatNumber = rowLabel && s.label.startsWith(`${rowLabel}-`) ? s.label.slice(rowLabel.length + 1) : s.kind === "booth" ? s.label : labelParts[labelParts.length - 1] ?? s.label;
+      const sourceDisplayLabel = source && "displayLabel" in source && typeof source.displayLabel === "string" && source.displayLabel ? source.displayLabel : sourceLabel;
+      const rowLabel = s.kind === "booth" ? void 0 : sourceDisplayLabel;
+      const visibleSeatLabel = s.displayLabel ?? s.label;
+      const labelParts = visibleSeatLabel.split("-");
+      const seatNumber = sourceDisplayLabel && visibleSeatLabel.startsWith(`${sourceDisplayLabel}-`) ? visibleSeatLabel.slice(sourceDisplayLabel.length + 1) : s.kind === "booth" ? visibleSeatLabel : labelParts[labelParts.length - 1] ?? visibleSeatLabel;
       this.seatContext.set(s.id, {
         sectionLabel: sectionLabels.get(membership.objectToSection.get(s.rowId) ?? ""),
         rowLabel,
@@ -4826,10 +5055,77 @@ var PickerController = class {
     this.setHold({ holdId: result.holdId, labels: combined.map((s) => s.label), expiresAt: result.expiresAt, items: result.items });
     return this.hold_;
   }
-  /** Server-picks `qty` best free seats and holds them atomically. Throws on failure. */
-  async bestAvailable(qty, categoryKey) {
+  /** True when any seat on the visible chart carries the `premium` commercial
+   *  flag — gates the buyer widget's "★ Best seats" premium quick-pick (chip is
+   *  present-only, exactly like the accessibility filter chips). */
+  hasPremiumSeats() {
+    for (const seat of this.labelToSeat.values()) {
+      if (seat.commercial?.premium) return true;
+    }
+    return false;
+  }
+  /**
+   * Client-side premium pre-pass: find the best contiguous block of `qty`
+   * PREMIUM-flagged free seats (orphan-avoiding, closest to the focal point)
+   * using the local seat geometry + live availability, mirroring the server's
+   * held-back exclusion via the visible (hidden-stripped) chart and current
+   * seat status. Returns a FULL premium block of `qty`, or null when none
+   * exists (the caller then falls back to the normal server pick).
+   */
+  pickPremiumBlock(qty, categoryKey) {
+    const doc = this.visibleDoc();
+    if (!doc?.objects?.length) return null;
+    const focal = doc.focalPoint ?? { x: 0, y: 0 };
+    const seats = expandChart(doc);
+    const held = new Set(this.hold_?.labels ?? []);
+    const available = /* @__PURE__ */ new Set();
+    for (const seat of seats) {
+      if (held.has(seat.label)) continue;
+      const id = this.labelToId.get(seat.label);
+      const status = id ? this.getStatus(id) : void 0;
+      if ((status ?? "free") === "free") available.add(seat.label);
+    }
+    const pick = pickBestAvailable(seats, available, { qty, categoryKey, focal, preferPremium: true });
+    if (pick.labels.length !== qty) return null;
+    const allPremium = pick.labels.every((l) => this.labelToSeat.get(l)?.commercial?.premium);
+    return allPremium ? [...pick.labels] : null;
+  }
+  /**
+   * Server-picks `qty` best free seats and holds them atomically. Throws on
+   * failure. With `preferPremium`, first tries to hold the best PREMIUM block
+   * locally; when none matches the requested quantity it falls back to the
+   * normal server pick (the widget surfaces a subtle note on that fallback).
+   */
+  async bestAvailable(qty, categoryKey, opts = {}) {
     const r = this.renderer;
     if (!r) return null;
+    if (opts.preferPremium) {
+      const block = this.pickPremiumBlock(qty, categoryKey);
+      if (block) {
+        if (this.hold_ && !await this.release()) return null;
+        try {
+          const selection = block.map((label) => {
+            const seat = this.labelToSeat.get(label);
+            const resolved = seat ? this.toSeat(seat) : null;
+            return { label, ...resolved?.tierId ? { tierId: resolved.tierId } : {} };
+          });
+          const result = await this.api.hold(this.key, selection);
+          r.clearSelection();
+          const ids = block.map((l) => this.labelToId.get(l)).filter((v) => !!v);
+          if (ids.length) r.setStatus(ids, "held");
+          this.setHold({ holdId: result.holdId, labels: [...block], expiresAt: result.expiresAt, items: result.items });
+          const seats = block.map((l) => this.labelToSeat.get(l)).filter((s) => !!s).map((s) => this.toSeat(s));
+          this.opts.onSelectionChange?.(seats);
+          return this.hold_;
+        } catch (err) {
+          const { status, reason } = errInfo(err);
+          if (status === 409 && reason === "event_closed") {
+            this.opts.onSalesClosed?.();
+            throw err;
+          }
+        }
+      }
+    }
     if (this.hold_ && !await this.release()) return null;
     try {
       const result = await this.api.bestAvailable(this.key, qty, categoryKey);
@@ -5202,14 +5498,16 @@ var PickerController = class {
   // ---- internals ------------------------------------------------------------
   toSeat(s) {
     const commercial = s.commercial ? { commercial: s.commercial } : void 0;
+    const display = s.displayLabel ? { displayLabel: s.displayLabel } : void 0;
     const tiers = this.tiersFor(s.categoryKey);
     if (!tiers) {
-      return { id: s.id, label: s.label, categoryKey: s.categoryKey, price: this.priceFor(s.categoryKey), ...commercial };
+      return { id: s.id, label: s.label, ...display, categoryKey: s.categoryKey, price: this.priceFor(s.categoryKey), ...commercial };
     }
     const chosen = tiers.find((t2) => t2.id === this.seatTiers.get(s.id)) ?? tiers[0];
     return {
       id: s.id,
       label: s.label,
+      ...display,
       categoryKey: s.categoryKey,
       price: chosen.price,
       tiers,
@@ -5702,9 +6000,9 @@ function generateSeatThumb(seat, focalPoint, _neighborSeats) {
 
 // src/i18n/bundles.ts
 var LOADERS = {
-  es: () => import("./es-ALPR5FBB.js").then((m) => ({ default: m.es })),
-  de: () => import("./de-KPTY7UOT.js").then((m) => ({ default: m.de })),
-  fr: () => import("./fr-HVQLQD2N.js").then((m) => ({ default: m.fr }))
+  es: () => import("./es-47HFAWS6.js").then((m) => ({ default: m.es })),
+  de: () => import("./de-EIG65UFU.js").then((m) => ({ default: m.de })),
+  fr: () => import("./fr-7IXNNFBS.js").then((m) => ({ default: m.fr }))
 };
 var loaded = /* @__PURE__ */ new Set(["en"]);
 async function loadLocale(code) {
@@ -5769,6 +6067,8 @@ export {
   pointInPolygonWithHoles,
   polygonLabelPoint,
   resolveLocale,
+  rowSeatPositions,
+  seatLabelPart,
   setLocale,
   setMoneyLocale,
   setStringOverrides,