@seatlayer/core 0.17.0 → 0.18.1

package/dist/index.cjs

@@ -275,9 +275,12 @@ var init_fr = __esm({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ACCESSIBILITY_RING_COLOR: () => ACCESSIBILITY_RING_COLOR,
   ACCESSIBILITY_TYPES: () => ACCESSIBILITY_TYPES,
   CHART_STORAGE_KEY: () => CHART_STORAGE_KEY,
   DEFAULT_CURRENCY: () => DEFAULT_CURRENCY,
+  LABEL_STYLE_MAX_SIZE: () => LABEL_STYLE_MAX_SIZE,
+  LABEL_STYLE_MIN_SIZE: () => LABEL_STYLE_MIN_SIZE,
   MAX_EVENT_INVENTORY: () => MAX_EVENT_INVENTORY,
   MAX_GA_CAPACITY: () => MAX_GA_CAPACITY,
   PickerController: () => PickerController,
@@ -285,6 +288,7 @@ __export(index_exports, {
   SeatmapRenderer: () => SeatmapRenderer,
   UNGROUPED_ID: () => UNGROUPED_ID,
   accessibilityMeta: () => accessibilityMeta,
+  accessibilityRingColor: () => accessibilityRingColor,
   allObjects: () => allObjects,
   applyHidden: () => applyHidden,
   chartBounds: () => chartBounds,
@@ -339,6 +343,21 @@ var ACCESSIBILITY_LABEL = new Map(ACCESSIBILITY_TYPES.map((a) => [a.key, a]));
 function accessibilityMeta(key) {
   return ACCESSIBILITY_LABEL.get(key);
 }
+var ACCESSIBILITY_RING_COLOR = {
+  wheelchair: "#3b82f6",
+  companion: "#8b5cf6",
+  "semi-ambulatory": "#0ea5e9",
+  hearing: "#14b8a6",
+  "sign-language": "#f59e0b",
+  "plus-size": "#ec4899",
+  "lift-armrest": "#22c55e"
+};
+function accessibilityRingColor(types) {
+  const primary = types?.[0];
+  return primary && ACCESSIBILITY_RING_COLOR[primary] || "#3b82f6";
+}
+var LABEL_STYLE_MIN_SIZE = 8;
+var LABEL_STYLE_MAX_SIZE = 24;
 function layerOf(obj) {
   switch (obj.type) {
     case "row":
@@ -485,15 +504,22 @@ function expandRowSlots(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 displayPrefix = row.displayLabel ?? row.label;
+    const commercial = { ...row.commercial, ...o?.commercial };
     return {
       index: i,
       x: p.x + (o?.dx ?? 0),
       y: p.y + (o?.dy ?? 0),
-      label: o?.label ?? `${row.label}-${seatNumber(i)}`,
+      label: inventoryLabel,
+      displayLabel: o?.displayLabel ?? `${displayPrefix}-${seatNumber(i)}`,
       categoryKey: o?.categoryKey ?? row.categoryKey,
       skipped: !!o?.skip,
       accessible: accessibility.length > 0,
-      accessibility
+      accessibility,
+      commercial: Object.values(commercial).some((value) => value !== void 0 && value !== false && value !== "") ? commercial : void 0,
+      viewUrl: o?.viewFromSeatUrl ?? row.viewFromSeatUrl,
+      labelStyle: o?.labelStyle
     };
   });
 }
@@ -504,13 +530,16 @@ function expandRow(row) {
     seats.push({
       id: `${row.id}:${slot.index}`,
       label: slot.label,
+      displayLabel: slot.displayLabel === slot.label ? void 0 : slot.displayLabel,
       x: slot.x,
       y: slot.y,
       rowId: row.id,
       categoryKey: slot.categoryKey,
       accessible: slot.accessible || void 0,
       accessibility: slot.accessibility.length ? slot.accessibility : void 0,
-      viewUrl: row.viewFromSeatUrl
+      commercial: slot.commercial,
+      viewUrl: slot.viewUrl,
+      labelStyle: slot.labelStyle
     });
   }
   return seats;
@@ -868,7 +897,7 @@ function computeSections(doc) {
     }
     nodes.set(logicalId, {
       id: logicalId,
-      label: s.label || "Section",
+      label: s.displayLabel || s.label || "Section",
       zone: s.zone,
       seatCount: 0,
       objectIds: [],
@@ -1196,15 +1225,6 @@ var CLOSED_SEAT_OPACITY = 0.4;
 var FOCUS_DIM_OPACITY = 0.16;
 var FOCUS_BACKDROP_FILL = "rgba(244,246,248,0.06)";
 var CB_PALETTE = ["#E69F00", "#56B4E9", "#009E73", "#F0E442", "#0072B2", "#D55E00", "#CC79A7"];
-var ACCESS_RING = {
-  wheelchair: "#3b82f6",
-  companion: "#8b5cf6",
-  "semi-ambulatory": "#0ea5e9",
-  hearing: "#14b8a6",
-  "sign-language": "#f59e0b",
-  "plus-size": "#ec4899",
-  "lift-armrest": "#22c55e"
-};
 function seatMatchesAccess(seat, filter) {
   if (filter.length === 0) return !!seat.accessible;
   return !!seat.accessibility?.some((t2) => filter.includes(t2));
@@ -2654,13 +2674,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.paintSeat(c, seat.id);
       target.add(c);
       if (seat.accessible) {
-        const primary = seat.accessibility?.[0];
         target.add(
           new import_Circle.Circle({
             x: seat.x,
             y: seat.y,
             radius: this.seatR + 1,
-            stroke: primary && ACCESS_RING[primary] || "#3b82f6",
+            stroke: accessibilityRingColor(seat.accessibility),
             strokeWidth: 2,
             listening: false,
             perfectDrawEnabled: false,
@@ -2693,7 +2712,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const t2 = new import_Text.Text({
       x: seat.x,
       y: seat.y,
-      text: seat.label,
+      text: seat.displayLabel ?? seat.label,
       fontSize: BOOTH_LABEL_FONT_SIZE,
       fontStyle: "600",
       fontFamily: this.labelFont(),
@@ -2716,14 +2735,22 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const idx = this.catOrder.indexOf(categoryKey);
     return CB_PALETTE[(idx >= 0 ? idx : 0) % CB_PALETTE.length];
   }
-  /** Authored free fills retain the chart's validated ink. Renderer-owned
-   * transient fills choose an ink against the paint that is actually visible. */
-  renderedBookableLabelInk(id, shape) {
-    const preferred = this.theme.seatLabelColor ?? DEF_SEAT_LABEL;
-    const status = this.statusById.get(id) ?? "free";
-    if (status === "free" && !this.selection.has(id)) return preferred;
+  /** Per-seat authored label size relative to the neutral default (1 = default),
+   * mirroring the section convention (labelStyle.size ?? 18) / 18. Only real
+   * seats carry labelStyle, so booths and unstyled seats resolve to 1. */
+  seatLabelScale(seat) {
+    return (seat.labelStyle?.size ?? 18) / 18;
+  }
+  /** Preferred label ink for a seat: the authored per-seat colour when set,
+   * otherwise today's theme default. Fed through auto-contrast by seatLabelInk. */
+  seatPreferredLabelInk(seat) {
+    return seat.labelStyle?.color ?? this.theme.seatLabelColor ?? DEF_SEAT_LABEL;
+  }
+  /** Resolve a seat's label ink against the paint actually visible, honouring an
+   * authored per-seat colour through the same auto-contrast rule as sections. */
+  seatLabelInk(seat, shape) {
     const fill = shape.fill();
-    return stateAwareBookableLabelInk(typeof fill === "string" ? fill : "", preferred);
+    return stateAwareBookableLabelInk(typeof fill === "string" ? fill : "", this.seatPreferredLabelInk(seat));
   }
   /** Apply fill/stroke/opacity for a seat's current status + selection. */
   paintSeat(c, id) {
@@ -2807,7 +2834,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (this.selectionFocusId && id !== this.selectionFocusId) c.opacity(Math.min(c.opacity(), 0.16));
     const bookableLabel = this.boothLabelById.get(id) ?? this.seatLabelById.get(id);
     if (bookableLabel) {
-      bookableLabel.fill(this.renderedBookableLabelInk(id, c));
+      bookableLabel.fill(this.seatLabelInk(seat, c));
       bookableLabel.visible(
         isBookableLabelLegibleAtScale(bookableLabel.fontSize(), this.effScale()) && c.opacity() >= 0.5
       );
@@ -3348,14 +3375,19 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       listening: false
     }, obj.outlinePath);
     bgTarget.add(blockPoly);
+    const labelStyle = obj.labelPresentation?.labelStyle;
+    const preferredInk = labelStyle?.color ?? palette.sectionInk;
+    const labelScale = (labelStyle?.size ?? 18) / 18;
     const nameLabel = new import_Text.Text({
-      x: centroid.x,
-      y: centroid.y,
-      text: obj.label,
-      fontSize: 22,
+      x: obj.labelPresentation?.position?.x ?? centroid.x,
+      y: obj.labelPresentation?.position?.y ?? centroid.y,
+      text: obj.displayLabel ?? obj.label,
+      rotation: obj.labelPresentation?.rotation ?? 0,
+      visible: obj.labelPresentation?.visible !== false,
+      fontSize: 22 * labelScale,
       fontStyle: "700",
       fontFamily: this.labelFont(),
-      fill: palette.sectionInk,
+      fill: stateAwareBookableLabelInk(palette.sectionFill, preferredInk),
       listening: false,
       perfectDrawEnabled: false
     });
@@ -3379,7 +3411,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const sec = {
       id: obj.id,
       logicalId: obj.logicalSectionId ?? obj.id,
-      label: obj.label,
+      label: obj.displayLabel ?? obj.label,
       outline: obj.outline,
       ...obj.outlinePath ? { outlinePath: obj.outlinePath } : {},
       holes: obj.holes ?? [],
@@ -3395,6 +3427,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       blockPoly,
       nameLabel,
       subLabel,
+      preferredInk,
+      labelScale,
       nameLabelFits: true,
       subLabelFits: true,
       elevation,
@@ -3563,7 +3597,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const sectionFill = sec.blockPoly.fill();
       const sectionInk = stateAwareBookableLabelInk(
         typeof sectionFill === "string" ? sectionFill : sec.baseFill,
-        palette.sectionInk
+        sec.preferredInk
       );
       sec.nameLabel.fill(sectionInk);
       sec.subLabel.fill(sectionInk);
@@ -3659,7 +3693,9 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   fitSectionRungLabels(sec, sx) {
     const paddingPx = 8;
     sec.subLabelFits = false;
-    for (let fontPx = SECTION_LABEL_PX; fontPx >= MIN_SECTION_LABEL_PX; fontPx -= 1) {
+    const maxPx = SECTION_LABEL_PX * sec.labelScale;
+    const minPx = MIN_SECTION_LABEL_PX * sec.labelScale;
+    for (let fontPx = maxPx; fontPx >= minPx; fontPx -= 1) {
       for (const rotation of [0, -90]) {
         sec.nameLabel.rotation(rotation);
         this.sizeLabel(sec.nameLabel, fontPx / sx, sec.nameLabel.y());
@@ -4178,7 +4214,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const labels = this.seats.map((seat) => {
       const shape = this.circleById.get(seat.id);
       const label = this.boothLabelById.get(seat.id) ?? this.seatLabelById.get(seat.id);
-      const authoredFontSize = seat.kind === "booth" ? BOOTH_LABEL_FONT_SIZE : SEAT_LABEL_FONT_SIZE;
+      const authoredFontSize = seat.kind === "booth" ? BOOTH_LABEL_FONT_SIZE : SEAT_LABEL_FONT_SIZE * this.seatLabelScale(seat);
       const renderedFontPx = rounded((label?.fontSize() ?? authoredFontSize) * effectiveScale);
       const screen = this.worldToScreen(seat);
       const outside = screen.x < 0 || screen.x > viewport.width || screen.y < 0 || screen.y > viewport.height;
@@ -4495,9 +4531,10 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         minimumFont = Math.min(minimumFont, BOOTH_LABEL_FONT_SIZE);
         continue;
       }
-      measure.fontSize(SEAT_LABEL_FONT_SIZE);
-      measure.text(bookableMarkerLabel(seat.label));
-      const fitted = measure.width() > maxWidth ? Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, SEAT_LABEL_FONT_SIZE * maxWidth / measure.width()) : SEAT_LABEL_FONT_SIZE;
+      const authoredFontSize = SEAT_LABEL_FONT_SIZE * this.seatLabelScale(seat);
+      measure.fontSize(authoredFontSize);
+      measure.text(bookableMarkerLabel(seat.displayLabel ?? seat.label));
+      const fitted = measure.width() > maxWidth ? Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, authoredFontSize * maxWidth / measure.width()) : authoredFontSize;
       minimumFont = Math.min(minimumFont, fitted);
     }
     measure.destroy();
@@ -4647,19 +4684,20 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         if (++count >= MAX_LABELS) break;
         continue;
       }
+      const authoredFontSize = SEAT_LABEL_FONT_SIZE * this.seatLabelScale(seat);
       const t2 = new import_Text.Text({
         x: seat.x,
         y: seat.y,
-        text: bookableMarkerLabel(seat.label),
-        fontSize: SEAT_LABEL_FONT_SIZE,
+        text: bookableMarkerLabel(seat.displayLabel ?? seat.label),
+        fontSize: authoredFontSize,
         fontStyle: "600",
         fontFamily: this.labelFont(),
-        fill: shape ? this.renderedBookableLabelInk(seat.id, shape) : this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+        fill: shape ? this.seatLabelInk(seat, shape) : this.seatPreferredLabelInk(seat),
         listening: false,
         perfectDrawEnabled: false
       });
       const maxW = this.seatR * 2 - 3;
-      if (t2.width() > maxW) t2.fontSize(Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, SEAT_LABEL_FONT_SIZE * maxW / t2.width()));
+      if (t2.width() > maxW) t2.fontSize(Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, authoredFontSize * maxW / t2.width()));
       if (t2.width() > maxW + 0.01) {
         t2.destroy();
         continue;
@@ -5619,6 +5657,15 @@ var PickerController = class {
     } catch {
     }
   }
+  /**
+   * Re-pull the status snapshot on demand. Live surfaces rarely need this (the
+   * socket keeps them fresh); local/mock transports with no socket call it
+   * after they mutate state (e.g. the demo books a hold) so the renderer and
+   * every onStatusChange consumer repaint from the new truth.
+   */
+  async refresh() {
+    await this.resnapshot();
+  }
   // ---- realtime socket ------------------------------------------------------
   /**
    * Buyer catch-up on tab regain. While a tab is hidden Chrome pauses rAF, so
@@ -5653,9 +5700,11 @@ var PickerController = class {
   }
   connect() {
     if (this.closed) return;
+    const url = this.api.socketUrl(this.key);
+    if (!url) return;
     let ws;
     try {
-      ws = new WebSocket(this.api.socketUrl(this.key));
+      ws = new WebSocket(url);
     } catch {
       this.scheduleReconnect();
       return;
@@ -5946,9 +5995,12 @@ async function loadLocale(code) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ACCESSIBILITY_RING_COLOR,
   ACCESSIBILITY_TYPES,
   CHART_STORAGE_KEY,
   DEFAULT_CURRENCY,
+  LABEL_STYLE_MAX_SIZE,
+  LABEL_STYLE_MIN_SIZE,
   MAX_EVENT_INVENTORY,
   MAX_GA_CAPACITY,
   PickerController,
@@ -5956,6 +6008,7 @@ async function loadLocale(code) {
   SeatmapRenderer,
   UNGROUPED_ID,
   accessibilityMeta,
+  accessibilityRingColor,
   allObjects,
   applyHidden,
   chartBounds,