@seatlayer/core 0.14.0 → 0.15.1

package/dist/index.js

@@ -635,6 +635,8 @@ var LABEL_SCALE = 1;
 var SEAT_TAP_SLOP_PX = 14;
 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);
+var PAN_START_SLOP_PX = 8;
 var ZONE_PROMINENT_SCALE = 0.55 * SECTION_PROMINENT_SCALE;
 var MAX_LABELS = 700;
 var MARQUEE_RING_CAP = 2500;
@@ -785,6 +787,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.circleById = /* @__PURE__ */ new Map();
     /** Booth block geometry, keyed by booth id (= the unit's rowId). */
     this.boothDims = /* @__PURE__ */ new Map();
+    /** Booth label node so status changes can say HELD/SOLD on the full block. */
+    this.boothLabelById = /* @__PURE__ */ new Map();
     this.statusById = /* @__PURE__ */ new Map();
     this.catColor = /* @__PURE__ */ new Map();
     this.theme = {};
@@ -795,7 +799,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     /** Category order from the doc — the stable index into the CB palette. */
     this.catOrder = [];
     this.selection = /* @__PURE__ */ new Set();
-    this.selectionRings = /* @__PURE__ */ new Map();
+    /** Whole-seat/block selection markers: outline + non-colour check cue. */
+    this.selectionMarkers = /* @__PURE__ */ new Map();
+    /** Held by this picker instance, not by another buyer. */
+    this.ownedHold = /* @__PURE__ */ new Set();
+    /** One selected seat being inspected before it is committed to the cart. */
+    this.selectionFocusId = null;
     this.focusedId = null;
     /**
      * Accessibility filter: `null` = off; `[]` = dim all non-accessible free seats;
@@ -864,7 +873,9 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.pointers = /* @__PURE__ */ new Map();
     this.pinch = null;
     this.panLast = null;
-    /** Cumulative gesture movement in px — clicks are suppressed after a real pan/pinch. */
+    this.panStart = null;
+    this.panStarted = false;
+    /** Maximum displacement from gesture start — suppress taps only after a real pan/pinch. */
     this.moved = 0;
     /**
      * Manage-mode rubber-band marquee (option-gated). `start`/`cur` are WORLD-space
@@ -907,15 +918,18 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     // pipeline. We rely on bubbling instead.
     this.onPointerDown = (e) => {
       this.cancelGlide();
-      this.pointers.set(e.pointerId, this.toLocal(e));
+      const local = this.toLocal(e);
+      this.pointers.set(e.pointerId, local);
       if (this.pointers.size === 1) {
         this.moved = 0;
         this.pinch = null;
+        this.panStart = local;
+        this.panStarted = false;
         if (this.opts.manageMode && this.opts.marqueeSelect && e.pointerType !== "touch" && e.button === 0 && this.getRung() === "seats") {
-          this.beginMarquee(this.toLocal(e));
+          this.beginMarquee(local);
           this.panLast = null;
         } else {
-          this.panLast = this.toLocal(e);
+          this.panLast = local;
         }
       } else if (this.pointers.size === 2) {
         if (this.marquee) this.cancelMarquee();
@@ -928,15 +942,21 @@ var _SeatmapRenderer = class _SeatmapRenderer {
           worldMid: { x: (mid.x - this.stage.x()) / s, y: (mid.y - this.stage.y()) / s }
         };
         this.panLast = null;
+        this.panStart = null;
+        this.panStarted = true;
+        this.moved = PAN_START_SLOP_PX + 1;
       }
     };
     this.onPointerMove = (e) => {
       if (!this.pointers.has(e.pointerId)) return;
       e.preventDefault();
       const p = this.toLocal(e);
-      const prev = this.pointers.get(e.pointerId);
-      this.moved += Math.hypot(p.x - prev.x, p.y - prev.y);
       this.pointers.set(e.pointerId, p);
+      if (this.pointers.size === 1 && this.panStart) {
+        this.moved = Math.max(this.moved, Math.hypot(p.x - this.panStart.x, p.y - this.panStart.y));
+      } else if (this.pointers.size >= 2) {
+        this.moved = PAN_START_SLOP_PX + 1;
+      }
       if (this.marquee) {
         this.updateMarquee(p);
         return;
@@ -956,6 +976,10 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         this.stage.batchDraw();
         this.scheduleViewChange();
       } else if (this.panLast && this.pointers.size === 1) {
+        if (!this.panStarted) {
+          if (this.moved <= PAN_START_SLOP_PX) return;
+          this.panStarted = true;
+        }
         this.stage.position({
           x: this.stage.x() + (p.x - this.panLast.x),
           y: this.stage.y() + (p.y - this.panLast.y)
@@ -976,9 +1000,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       if (this.pointers.size < 2) this.pinch = null;
       if (this.pointers.size === 1) {
         this.panLast = [...this.pointers.values()][0];
+        this.panStart = this.panLast;
+        this.panStarted = true;
       }
       if (this.pointers.size === 0) {
         this.panLast = null;
+        this.panStart = null;
+        this.panStarted = false;
         this.afterViewChange();
       }
     };
@@ -1060,7 +1088,10 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.labelGroup.destroyChildren();
     this.circleById.clear();
     this.boothDims.clear();
-    this.selectionRings.clear();
+    this.boothLabelById.clear();
+    this.selectionMarkers.clear();
+    this.ownedHold.clear();
+    this.selectionFocusId = null;
     this.statusById.clear();
     this.selection.clear();
     this.seatById.clear();
@@ -1180,6 +1211,48 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     } else {
       this.seatLayer.batchDraw();
     }
+    if (this.effScale() > LABEL_SCALE) this.updateLabels();
+  }
+  setOwnedHold(seatIds) {
+    const next = new Set((seatIds ?? []).filter((id) => this.statusById.has(id)));
+    const touched = /* @__PURE__ */ new Set([...this.ownedHold, ...next]);
+    this.ownedHold = next;
+    for (const id of touched) {
+      const shape = this.circleById.get(id);
+      if (shape) this.paintSeat(shape, id);
+      this.syncSelectionMarker(id);
+    }
+    if (!touched.size) return;
+    if (this.cached) {
+      if (this.recacheTimer) clearTimeout(this.recacheTimer);
+      this.recacheTimer = setTimeout(() => this.cacheSeatLayer(), 150);
+    } else {
+      this.seatLayer.batchDraw();
+    }
+    if (this.effScale() > LABEL_SCALE) this.updateLabels();
+    this.overlayLayer.batchDraw();
+  }
+  setSelectionFocus(seatId) {
+    const next = seatId && this.selection.has(seatId) ? seatId : null;
+    if (next === this.selectionFocusId) return;
+    const previous = this.selectionFocusId;
+    this.selectionFocusId = next;
+    for (const seat of this.seats) {
+      const shape = this.circleById.get(seat.id);
+      if (shape) this.paintSeat(shape, seat.id);
+    }
+    if (previous) this.syncSelectionMarker(previous);
+    if (next) this.syncSelectionMarker(next);
+    for (const [id, marker] of this.selectionMarkers) {
+      marker.opacity(!next || id === next ? 1 : 0.2);
+    }
+    if (this.cached) {
+      this.seatLayer.clearCache();
+      this.cacheSeatLayer();
+    } else {
+      this.seatLayer.batchDraw();
+    }
+    this.overlayLayer.batchDraw();
   }
   getStatus(seatId) {
     return this.statusById.get(seatId) ?? "free";
@@ -1202,6 +1275,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   setManageInteraction(options) {
     if (this.marquee) this.cancelMarquee();
     this.panLast = null;
+    this.panStart = null;
+    this.panStarted = false;
     this.opts.manageMode = options.manageMode;
     this.opts.marqueeSelect = options.marqueeSelect;
     this.opts.selectableStatuses = [...options.selectableStatuses];
@@ -1798,6 +1873,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     t2.offsetX(t2.width() / 2);
     t2.offsetY(t2.height() / 2);
     this.hasBoothText = true;
+    this.boothLabelById.set(seat.id, t2);
     target.add(t2);
   }
   /** The category's display color — Okabe-Ito hue when colorblind-safe is on. */
@@ -1812,6 +1888,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const status = this.statusById.get(id) ?? "free";
     const selected = this.selection.has(id);
     const base = this.seatBaseColor(seat.categoryKey);
+    const boothLabel = this.boothLabelById.get(id);
     c.dash([]);
     c.strokeWidth(0);
     c.stroke("");
@@ -1823,7 +1900,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         );
         break;
       case "held":
-        c.fill(HELD_FILL);
+        if (this.ownedHold.has(id)) {
+          c.fill(lighten(base, this.effSelection === DEF_SELECTION ? 0.24 : 0.1));
+          c.stroke(this.effSelection);
+          c.strokeWidth(3);
+        } else {
+          c.fill(HELD_FILL);
+        }
         break;
       case "booked":
         if (this.colorblind) {
@@ -1843,6 +1926,14 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         c.dash([2, 2]);
         break;
     }
+    if (boothLabel) {
+      boothLabel.text(status === "booked" ? "SOLD" : status === "held" ? "HELD" : seat.label);
+      boothLabel.fontSize(status === "free" ? 10 : Math.min(10, Math.max(6, this.boothDims.get(seat.rowId)?.width ?? 40) / 6));
+      boothLabel.fontStyle(status === "free" ? "600" : "800");
+      boothLabel.fill(status === "free" ? this.theme.seatLabelColor ?? DEF_SEAT_LABEL : "#ffffff");
+      boothLabel.offsetX(boothLabel.width() / 2);
+      boothLabel.offsetY(boothLabel.height() / 2);
+    }
     if (this.accessFilter && status === "free" && !selected && !seatMatchesAccess(seat, this.accessFilter)) {
       c.opacity(0.25);
     }
@@ -1870,6 +1961,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const inFocus = !!sec && (sec.id === this.focusedSectionId || sec.zone === this.focusedSectionId);
       if (!inFocus) c.opacity(FOCUS_DIM_OPACITY);
     }
+    if (this.selectionFocusId && id !== this.selectionFocusId) c.opacity(Math.min(c.opacity(), 0.16));
   }
   /** True when a seat sits in a section/zone currently marked `closed`. */
   seatInClosedSection(id) {
@@ -1937,7 +2029,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.drawFocusBackdrop(id);
     this.repaintSectionsAndSeats();
     this.updateLOD();
-    this.focusRegion(id);
+    this.focusRegion(id, { minScale: SEAT_FOCUS_SCALE });
   }
   /** Clear an AXS section focus — restore full-bowl brightness + drop the backdrop. */
   clearSectionFocus() {
@@ -2730,30 +2822,101 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const c = this.circleById.get(id);
     if (on) {
       this.selection.add(id);
-      const seat = this.seatById.get(id);
-      const ring = new Circle({
-        x: seat.x,
-        y: seat.y,
-        radius: this.seatR,
-        stroke: this.effSelection,
-        strokeWidth: 3,
-        listening: false,
-        perfectDrawEnabled: false,
-        shadowForStrokeEnabled: false
-      });
-      this.selectionRings.set(id, ring);
-      this.overlayLayer.add(ring);
     } else {
+      if (this.selectionFocusId === id) this.setSelectionFocus(null);
       this.selection.delete(id);
-      const ring = this.selectionRings.get(id);
-      ring?.destroy();
-      this.selectionRings.delete(id);
     }
+    this.syncSelectionMarker(id);
     if (c) {
       this.paintSeat(c, id);
       if (!silent && !this.cached) this.seatLayer.batchDraw();
     }
   }
+  /** Rebuild one marker after selected/held/candidate state changes. */
+  syncSelectionMarker(id) {
+    this.selectionMarkers.get(id)?.destroy();
+    this.selectionMarkers.delete(id);
+    if (!this.selection.has(id) && !this.ownedHold.has(id)) return;
+    const seat = this.seatById.get(id);
+    if (!seat) return;
+    const candidate = this.selectionFocusId === id;
+    const dims = this.boothDims.get(seat.rowId);
+    const marker = new Group({
+      x: seat.x,
+      y: seat.y,
+      rotation: dims?.rotation ?? 0,
+      listening: false,
+      perfectDrawEnabled: false,
+      opacity: this.selectionFocusId && !candidate ? 0.2 : 1
+    });
+    const common = {
+      stroke: this.effSelection,
+      listening: false,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false
+    };
+    if (dims) {
+      marker.add(new Rect({
+        ...common,
+        width: dims.width,
+        height: dims.height,
+        offsetX: dims.width / 2,
+        offsetY: dims.height / 2,
+        cornerRadius: 4,
+        strokeWidth: candidate ? 4 : 3
+      }));
+      if (candidate) {
+        marker.add(new Rect({
+          ...common,
+          width: dims.width + 10,
+          height: dims.height + 10,
+          offsetX: (dims.width + 10) / 2,
+          offsetY: (dims.height + 10) / 2,
+          cornerRadius: 7,
+          strokeWidth: 2,
+          opacity: 0.55
+        }));
+      } else {
+        const badgeX = Math.max(0, dims.width / 2 - 14);
+        const badgeY = -Math.max(0, dims.height / 2 - 14);
+        marker.add(new Circle({ x: badgeX, y: badgeY, radius: 10, fill: this.effSelection, listening: false }));
+        marker.add(new Line({
+          x: badgeX,
+          y: badgeY,
+          points: [-4.5, 0, -1, 3.5, 5.5, -4.5],
+          stroke: isLightColor(this.effSelection) ? "#0b1220" : "#ffffff",
+          strokeWidth: 2.4,
+          lineCap: "round",
+          lineJoin: "round",
+          listening: false
+        }));
+      }
+    } else {
+      marker.add(new Circle({ ...common, radius: this.seatR + (candidate ? 4.5 : 2.5), strokeWidth: candidate ? 3.5 : 2.5 }));
+      if (candidate) {
+        marker.add(new Circle({
+          ...common,
+          radius: this.seatR + 8,
+          strokeWidth: 2,
+          opacity: 0.55
+        }));
+      } else {
+        marker.add(new Line({
+          points: [-this.seatR * 0.52, 0, -this.seatR * 0.12, this.seatR * 0.4, this.seatR * 0.6, -this.seatR * 0.46],
+          stroke: "#ffffff",
+          strokeWidth: Math.max(2.6, this.seatR * 0.34),
+          lineCap: "round",
+          lineJoin: "round",
+          shadowColor: "#0b1220",
+          shadowBlur: 1.5,
+          shadowOpacity: 0.55,
+          listening: false
+        }));
+      }
+    }
+    this.selectionMarkers.set(id, marker);
+    this.overlayLayer.add(marker);
+  }
   // ---- interaction ----------------------------------------------------------
   /**
    * The stage scale `focusRegion(id)` would settle at — i.e. the zoom that
@@ -2771,7 +2934,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const { min, max } = this.zoomBounds();
     const margin = 1.12;
     if (b.width <= 0 || b.height <= 0) return this.stage.scaleX();
-    return clamp(Math.min(w / (b.width * margin), h / (b.height * margin)), min, max);
+    const frameScale = Math.min(w / (b.width * margin), h / (b.height * margin));
+    return clamp(Math.max(frameScale, SEAT_FOCUS_SCALE), min, max);
   }
   /**
    * Resolve a seat tap: honour the 3D deck-drill and the AXS seat-pick gate,
@@ -2829,7 +2993,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   wireInteraction() {
     this.seatLayer.on("click tap", (e) => {
-      if (this.moved > 8) return;
+      if (this.moved > PAN_START_SLOP_PX) return;
       const id = seatIdOf(e.target);
       if (!id) return;
       this.handleSeatTap(id);
@@ -2859,7 +3023,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.zoomAbout(this.stage.scaleX() * clamp(factor, 0.5, 2), pointer);
     });
     this.stage.on("click tap", (e) => {
-      if (this.moved > 8) return;
+      if (this.moved > PAN_START_SLOP_PX) return;
       const pointer = this.stage.getPointerPosition();
       if (!pointer) return;
       if (!this.cached) {
@@ -2943,12 +3107,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.stage.batchDraw();
   }
   /** Zoom + pan so world-rect `b` fills the viewport (with a small margin). */
-  zoomToBounds(b) {
+  zoomToBounds(b, minScale) {
     const w = this.stage.width();
     const h = this.stage.height();
     const { min, max } = this.zoomBounds();
     const margin = 1.12;
-    const scale = clamp(Math.min(w / (b.width * margin), h / (b.height * margin)), min, max);
+    const frameScale = Math.min(w / (b.width * margin), h / (b.height * margin));
+    const scale = clamp(Math.max(frameScale, minScale ?? min), min, max);
     this.stage.scale({ x: scale, y: scale });
     this.stage.position({
       x: w / 2 - (b.x + b.width / 2) * scale,
@@ -2972,14 +3137,15 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (!b) return;
     this.cancelGlide();
     if (opts?.animate === false || this.reducedMotion) {
-      this.zoomToBounds(b);
+      this.zoomToBounds(b, opts?.minScale);
       return;
     }
     const w = this.stage.width();
     const h = this.stage.height();
     const { min, max } = this.zoomBounds();
     const margin = 1.12;
-    const toScale = clamp(Math.min(w / (b.width * margin), h / (b.height * margin)), min, max);
+    const frameScale = Math.min(w / (b.width * margin), h / (b.height * margin));
+    const toScale = clamp(Math.max(frameScale, opts?.minScale ?? min), min, max);
     const toX = w / 2 - (b.x + b.width / 2) * toScale;
     const toY = h / 2 - (b.y + b.height / 2) * toScale;
     const fromScale = this.stage.scaleX();
@@ -3034,7 +3200,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.zoomToFit();
       return;
     }
-    const target = rung === "sections" ? (SECTION_PROMINENT_SCALE + CACHE_THRESHOLD) / 2 : Math.max(SEAT_LEGIBLE_SCALE * 1.1, CACHE_THRESHOLD * 1.3);
+    const target = rung === "sections" ? (SECTION_PROMINENT_SCALE + CACHE_THRESHOLD) / 2 : Math.max(SEAT_FOCUS_SCALE, CACHE_THRESHOLD * 1.3);
     const w = this.stage.width();
     const h = this.stage.height();
     const cx = this.bounds.x + this.bounds.width / 2;
@@ -3120,19 +3286,21 @@ 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;
+      const status = this.statusById.get(seat.id) ?? "free";
+      const statusCue = status === "booked" ? "\xD7" : status === "held" && !this.ownedHold.has(seat.id) ? "H" : null;
       const t2 = new Text({
         x: seat.x,
         y: seat.y,
-        text: seat.label,
-        fontSize: 7,
-        fontStyle: "600",
+        text: statusCue ?? seat.label,
+        fontSize: statusCue ? status === "booked" ? 13 : 8 : 7,
+        fontStyle: statusCue ? "800" : "600",
         fontFamily: this.labelFont(),
-        fill: this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+        fill: statusCue ? "#ffffff" : this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
         listening: false,
         perfectDrawEnabled: false
       });
       const maxW = this.seatR * 2 - 3;
-      if (t2.width() > maxW) t2.fontSize(Math.max(4, 7 * maxW / t2.width()));
+      if (t2.width() > maxW) t2.fontSize(Math.max(4, t2.fontSize() * maxW / t2.width()));
       if (t2.fontSize() < 4.2) {
         t2.destroy();
         continue;
@@ -3234,6 +3402,8 @@ var PickerController = class {
     this.seatTiers = /* @__PURE__ */ new Map();
     /** id → seat, for the section-summary breakdown (renderer members are ids). */
     this.seatById = /* @__PURE__ */ new Map();
+    /** id → buyer-facing spatial metadata used by every tooltip/confirm surface. */
+    this.seatContext = /* @__PURE__ */ new Map();
     this.allIds = [];
     // realtime socket
     this.ws = null;
@@ -3312,12 +3482,28 @@ var PickerController = class {
     this.labelToId = /* @__PURE__ */ new Map();
     this.labelToSeat = /* @__PURE__ */ new Map();
     this.seatById = /* @__PURE__ */ new Map();
+    this.seatContext = /* @__PURE__ */ new Map();
     this.allIds = [];
+    const chartObjects = new Map(allObjects(res.doc).map((object) => [object.id, object]));
+    const membership = computeSections(res.doc);
+    const sectionLabels = new Map(
+      [...membership.sections, ...membership.ungrouped ? [membership.ungrouped] : []].map((section) => [section.id, section.label])
+    );
     for (const s of expandChart(res.doc)) {
       this.labelToId.set(s.label, s.id);
       this.labelToSeat.set(s.label, s);
       this.seatById.set(s.id, s);
       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;
+      this.seatContext.set(s.id, {
+        sectionLabel: sectionLabels.get(membership.objectToSection.get(s.rowId) ?? ""),
+        rowLabel,
+        seatNumber
+      });
     }
     const currency = res.event.currency ?? this.opts.currency;
     this.currency = currency ?? "USD";
@@ -3387,6 +3573,11 @@ var PickerController = class {
     if (!this.renderer) return [];
     return this.renderer.getSelection().map((s) => this.toSeat(s));
   }
+  /** Enriched metadata for a seat confirmation card or tooltip. */
+  seatDetails(seatId) {
+    const seat = this.seatById.get(seatId);
+    return seat ? this.describeSeat(seat) : null;
+  }
   clearSelection() {
     this.renderer?.clearSelection();
     this.emitSelectionChange();
@@ -3426,6 +3617,19 @@ var PickerController = class {
       throw err;
     }
   }
+  /** Restore an active server hold without creating or extending inventory. */
+  async resumeHold(holdId) {
+    if (this.closed || !holdId || !this.api.resume) return null;
+    const result = await this.api.resume(this.key, holdId);
+    if (this.closed) return null;
+    const labels = [...new Set(result.items.map((item) => item.label))];
+    if (!labels.length) return null;
+    this.setHold(
+      { holdId: result.holdId, labels, expiresAt: result.expiresAt, items: result.items },
+      "restored"
+    );
+    return this.hold_;
+  }
   /**
    * P4 "need more time?": extend the OPEN hold's server-side expiry and re-arm
    * the client expiry timer to match (via setHold), so the controller doesn't
@@ -3515,7 +3719,7 @@ var PickerController = class {
   async bestAvailable(qty, categoryKey) {
     const r = this.renderer;
     if (!r) return null;
-    if (this.hold_) await this.release();
+    if (this.hold_ && !await this.release()) return null;
     try {
       const result = await this.api.bestAvailable(this.key, qty, categoryKey);
       r.clearSelection();
@@ -3600,15 +3804,25 @@ var PickerController = class {
   /** Release the whole open hold (if any), repaint those seats free. */
   async release() {
     const hold = this.hold_;
-    if (!hold) return;
-    this.clearHold();
-    const ids = hold.labels.map((l) => this.labelToId.get(l)).filter((v) => !!v);
-    if (ids.length) this.renderer?.setStatus(ids, "free");
+    if (!hold) return true;
     try {
-      await this.api.release(this.key, hold.labels, hold.holdId);
+      const result = await this.api.release(this.key, hold.labels, hold.holdId);
+      if (!this.releaseConfirmed(result, hold.labels)) {
+        await this.resnapshot();
+        return false;
+      }
     } catch (err) {
       this.emitError(err);
+      return false;
+    }
+    if (this.hold_?.holdId !== hold.holdId) return true;
+    this.clearHold();
+    const ids = hold.labels.map((l) => this.labelToId.get(l)).filter((v) => !!v);
+    if (ids.length) {
+      this.renderer?.deselect(ids);
+      this.renderer?.setStatus(ids, "free");
     }
+    return true;
   }
   /**
    * Release just some labels from the open hold, keeping the rest held (used when
@@ -3616,19 +3830,35 @@ var PickerController = class {
    */
   async releaseLabels(labels) {
     const hold = this.hold_;
-    if (!hold) return;
+    if (!hold) return true;
     const drop = labels.filter((l) => hold.labels.includes(l));
-    if (!drop.length) return;
-    const remaining = hold.labels.filter((l) => !drop.includes(l));
-    if (remaining.length) this.setHold({ ...hold, labels: remaining });
-    else this.clearHold();
-    const ids = drop.map((l) => this.labelToId.get(l)).filter((v) => !!v);
-    if (ids.length) this.renderer?.setStatus(ids, "free");
+    if (!drop.length) return true;
     try {
-      await this.api.release(this.key, drop, hold.holdId);
+      const result = await this.api.release(this.key, drop, hold.holdId);
+      if (!this.releaseConfirmed(result, drop)) {
+        await this.resnapshot();
+        return false;
+      }
     } catch (err) {
       this.emitError(err);
+      return false;
     }
+    if (this.hold_?.holdId !== hold.holdId) return true;
+    const remaining = hold.labels.filter((l) => !drop.includes(l));
+    const remainingItems = hold.items?.filter((item) => !drop.includes(item.label));
+    if (remaining.length) this.setHold({ ...hold, labels: remaining, items: remainingItems });
+    else this.clearHold();
+    const ids = drop.map((l) => this.labelToId.get(l)).filter((v) => !!v);
+    if (ids.length) {
+      this.renderer?.deselect(ids);
+      this.renderer?.setStatus(ids, "free");
+    }
+    return true;
+  }
+  /** New transports return the exact labels released; tolerate older adapters. */
+  releaseConfirmed(result, requested) {
+    const released = result?.released;
+    return !Array.isArray(released) || requested.every((label) => released.includes(label));
   }
   // ---- renderer proxies (so consumers don't reach through) ------------------
   setStatus(ids, status) {
@@ -3652,6 +3882,9 @@ var PickerController = class {
   worldToScreen(p) {
     return this.renderer?.worldToScreen(p) ?? { x: 0, y: 0 };
   }
+  setSelectionFocus(seatId) {
+    this.renderer?.setSelectionFocus?.(seatId);
+  }
   setAccessibilityFilter(types) {
     this.renderer?.setAccessibilityFilter?.(types);
   }
@@ -3839,7 +4072,8 @@ var PickerController = class {
       categoryLabel: cat?.label ?? s.categoryKey,
       categoryColor: cat?.color ?? "#6e7bff",
       status: this.renderer?.getStatus(s.id) ?? "free",
-      currency: this.currency
+      currency: this.currency,
+      ...this.seatContext.get(s.id)
     };
   }
   priceFor(categoryKey) {
@@ -3930,16 +4164,21 @@ var PickerController = class {
     this.emitSelectionChange();
   }
   /** Set the open hold + (re)arm the server-authoritative expiry timer. */
-  setHold(hold) {
+  setHold(hold, source = "created") {
     const full = { ...hold, seats: this.seatsForLabels(hold.labels) };
     this.hold_ = full;
+    this.renderer?.setOwnedHold?.(
+      full.labels.map((label) => this.labelToId.get(label)).filter((id) => !!id)
+    );
     if (this.expiryTimer) clearTimeout(this.expiryTimer);
     const ms = Math.max(0, full.expiresAt - Date.now());
     this.expiryTimer = setTimeout(() => void this.expireActiveHold(), ms);
-    this.opts.onHold?.(full);
+    if (source === "restored") this.opts.onHoldRestored?.(full);
+    else this.opts.onHold?.(full);
   }
   clearHold() {
     this.hold_ = null;
+    this.renderer?.setOwnedHold?.(null);
     if (this.expiryTimer) {
       clearTimeout(this.expiryTimer);
       this.expiryTimer = null;
@@ -3971,6 +4210,9 @@ var PickerController = class {
     if (!r) return;
     this.liveStatuses = new Map(Object.entries(seats));
     if (this.allIds.length) r.setStatus(this.allIds, "free");
+    r.setOwnedHold?.(
+      (this.hold_?.labels ?? []).map((label) => this.labelToId.get(label)).filter((id) => !!id)
+    );
     const byStatus = { free: [], held: [], booked: [], not_for_sale: [] };
     for (const [label, st] of Object.entries(seats)) {
       const id = this.labelToId.get(label);