@seatlayer/core 0.9.0 → 0.10.1

package/dist/index.cjs

@@ -339,9 +339,10 @@ function layerOf(obj) {
     case "booth":
     case "section":
       return "interactive";
-    // stage / décor live on 'shape'; free text is background furniture.
+    // stage / décor live on 'shape'; free text + decor images are background furniture.
     case "shape":
     case "text":
+    case "decorImage":
       return "background";
     default:
       return "interactive";
@@ -570,6 +571,8 @@ function objectCenter(o) {
         return { x: o.x + o.width / 2, y: o.y + o.height / 2 };
       }
       return { x: o.x ?? 0, y: o.y ?? 0 };
+    case "decorImage":
+      return { x: o.x + o.width / 2, y: o.y + o.height / 2 };
   }
 }
 function floorsOf(doc) {
@@ -605,6 +608,8 @@ function translateObject(o, dx, dy) {
         ...o.x != null ? { x: o.x + dx } : {},
         ...o.y != null ? { y: o.y + dy } : {}
       };
+    case "decorImage":
+      return { ...o, x: o.x + dx, y: o.y + dy };
   }
 }
 function stackFloors(doc, spread = 900) {
@@ -643,6 +648,9 @@ function chartBounds(doc) {
       for (const p of obj.points) acc(p.x, p.y);
     } else if (obj.type === "section") {
       for (const p of obj.outline) acc(p.x, p.y);
+    } else if (obj.type === "decorImage") {
+      acc(obj.x, obj.y);
+      acc(obj.x + obj.width, obj.y + obj.height);
     } else if (obj.type === "shape") {
       if (obj.points && obj.points.length) {
         for (const p of obj.points) acc(p.x, p.y);
@@ -943,6 +951,7 @@ var SEAT_RADIUS = 9;
 var SEAT_LEGIBLE_SCALE = 0.9;
 var CACHE_THRESHOLD = 0.55 * SEAT_LEGIBLE_SCALE;
 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 ZONE_PROMINENT_SCALE = 0.55 * SECTION_PROMINENT_SCALE;
@@ -960,6 +969,13 @@ var ZONE_SUB_PX = 12;
 var HELD_FILL = "#6b7280";
 var TAKEN_FILL = "#374151";
 var NFS_STROKE = "#4b5563";
+var CLOSED_SECTION_FILL = "#586070";
+var CLOSED_SEAT_FILL = "#4b5563";
+var CLOSED_SEAT_OPACITY = 0.4;
+var FOCUS_DIM_OPACITY = 0.16;
+var FOCUS_DESATURATE = 0.72;
+var FOCUS_NEUTRAL = "#6b7280";
+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",
@@ -1106,6 +1122,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.accessFilter = null;
     /** Category highlight (legend hover): dims free seats NOT of this category. */
     this.categoryHighlight = null;
+    /** Price-band filter (F4): dim free seats whose category is NOT in this set. */
+    this.categoryFilter = null;
     // Section/zone overlays (bgLayer) — the 3-rung LOD: seats → section blocks →
     // zone blocks. Kept for the melt restyle and for hit-testing a zoomed-out tap.
     this.sections = [];
@@ -1114,6 +1132,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.catPrice = /* @__PURE__ */ new Map();
     /** Section/zone ids to render dimmed (organizer manager: held-back inventory). */
     this.dimmedSections = /* @__PURE__ */ new Set();
+    /** Phase 2: section/zone ids in the event-level `closed` state — flat grey
+     *  block, seats greyed + not pickable, but the section stays rendered. */
+    this.closedSections = /* @__PURE__ */ new Set();
+    /** AXS section-focus: the currently-focused section id (others dim), or null. */
+    this.focusedSectionId = null;
+    /** Light backdrop panel drawn behind the focused section (removed on clear). */
+    this.focusBackdrop = null;
     /** Object id → floor id (multi-floor only) — resolves a deck tap in the 3D stack. */
     this.objectFloor = /* @__PURE__ */ new Map();
     /** Zone id → colour (drives extruded side faces in iso view). */
@@ -1594,6 +1619,27 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (cur === null || next === null) return cur === next;
     return cur.length === next.length && cur.every((t2, i) => t2 === next[i]);
   }
+  /**
+   * Price-band filter (F4): dim free, unselected seats whose category key is NOT
+   * in `keys`. `null` clears the filter (all categories fully visible). The
+   * widget resolves which categories fall inside the buyer's chosen band.
+   */
+  setCategoryFilter(keys) {
+    const next = keys === null ? null : new Set(keys);
+    const same = next === null && this.categoryFilter === null || next !== null && this.categoryFilter !== null && next.size === this.categoryFilter.size && [...next].every((k) => this.categoryFilter.has(k));
+    if (same) return;
+    this.categoryFilter = next;
+    for (const seat of this.seats) {
+      const c = this.circleById.get(seat.id);
+      if (c) this.paintSeat(c, seat.id);
+    }
+    if (this.cached) {
+      this.seatLayer.clearCache();
+      this.cacheSeatLayer();
+    } else {
+      this.seatLayer.batchDraw();
+    }
+  }
   // ---- isometric ("3D") view mode -------------------------------------------
   /**
    * Switch the projection between flat top-down and the isometric "3D" view
@@ -1920,12 +1966,33 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (this.categoryHighlight && status === "free" && !selected && seat.categoryKey !== this.categoryHighlight) {
       c.opacity(0.25);
     }
+    if (this.categoryFilter && status === "free" && !selected && !this.categoryFilter.has(seat.categoryKey)) {
+      c.opacity(0.22);
+    }
     if (this.dimmedSections.size) {
       const sec = this.seatSection.get(id);
       if (sec && (this.dimmedSections.has(sec.id) || sec.zone != null && this.dimmedSections.has(sec.zone))) {
         c.opacity(0.18);
       }
     }
+    if (this.closedSections.size && this.seatInClosedSection(id)) {
+      c.fill(CLOSED_SEAT_FILL);
+      c.stroke("");
+      c.strokeWidth(0);
+      c.dash([]);
+      c.opacity(CLOSED_SEAT_OPACITY);
+    }
+    if (this.focusedSectionId) {
+      const sec = this.seatSection.get(id);
+      const inFocus = !!sec && (sec.id === this.focusedSectionId || sec.zone === this.focusedSectionId);
+      if (!inFocus) c.opacity(FOCUS_DIM_OPACITY);
+    }
+  }
+  /** True when a seat sits in a section/zone currently marked `closed`. */
+  seatInClosedSection(id) {
+    if (!this.closedSections.size) return false;
+    const sec = this.seatSection.get(id);
+    return !!sec && (this.closedSections.has(sec.id) || sec.zone != null && this.closedSections.has(sec.zone));
   }
   /**
    * Colorblind-safe mode: swap category hues for the Okabe-Ito palette and
@@ -1965,6 +2032,109 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.seatLayer.batchDraw();
     }
   }
+  /**
+   * Phase 2 event-level section states: mark these section/zone ids `closed` —
+   * flat grey block, seats greyed + not pickable, but the section stays rendered
+   * (unlike the buyer's applyHidden which strips it). `null`/empty clears.
+   */
+  setClosedSections(ids) {
+    const next = new Set(ids ?? []);
+    if (next.size === this.closedSections.size && [...next].every((i) => this.closedSections.has(i))) return;
+    this.closedSections = next;
+    this.repaintSectionsAndSeats();
+  }
+  /**
+   * AXS section-focus: dim + desaturate every other section, draw a calm backdrop
+   * panel behind this section's seats, and glide the camera in to frame it (the
+   * seat-pick gate below only lets buyers pick once seats are ≥ LABEL_SCALE big).
+   */
+  focusSection(id) {
+    if (!this.sections.some((s) => s.id === id)) return;
+    this.focusedSectionId = id;
+    this.drawFocusBackdrop(id);
+    this.repaintSectionsAndSeats();
+    this.updateLOD();
+    this.focusRegion(id);
+  }
+  /** Clear an AXS section focus — restore full-bowl brightness + drop the backdrop. */
+  clearSectionFocus() {
+    if (!this.focusedSectionId) return;
+    this.focusedSectionId = null;
+    if (this.focusBackdrop) {
+      this.focusBackdrop.destroy();
+      this.focusBackdrop = null;
+    }
+    this.repaintSectionsAndSeats();
+    this.updateLOD();
+  }
+  /** The currently AXS-focused section id, or null. */
+  getFocusedSection() {
+    return this.focusedSectionId;
+  }
+  /** Draw (or replace) the light backdrop panel behind the focused section. */
+  drawFocusBackdrop(id) {
+    if (this.focusBackdrop) {
+      this.focusBackdrop.destroy();
+      this.focusBackdrop = null;
+    }
+    const sec = this.sections.find((s) => s.id === id);
+    if (!sec) return;
+    const panel = new import_Line.Line({
+      points: sec.outline.flatMap((p) => [p.x, p.y]),
+      closed: true,
+      fill: FOCUS_BACKDROP_FILL,
+      stroke: rgba("#ffffff", 0.1),
+      strokeWidth: 1,
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    this.bgLayer.add(panel);
+    panel.moveToTop();
+    this.focusBackdrop = panel;
+  }
+  /** Repaint every seat + section block to reflect closed/focus state, then redraw. */
+  repaintSectionsAndSeats() {
+    for (const seat of this.seats) {
+      const c = this.circleById.get(seat.id);
+      if (c) this.paintSeat(c, seat.id);
+    }
+    for (const sec of this.sections) sec.blockPoly.fill(this.sectionBlockFill(sec));
+    if (this.cached) {
+      this.seatLayer.clearCache();
+      this.cacheSeatLayer();
+    } else {
+      this.seatLayer.batchDraw();
+    }
+    this.bgLayer.batchDraw();
+  }
+  /** The world-space rectangle currently visible in the viewport (minimap F3). */
+  getVisibleWorldRect() {
+    const tl = this.screenToWorld({ x: 0, y: 0 });
+    const br = this.screenToWorld({ x: this.stage.width(), y: this.stage.height() });
+    return {
+      x: Math.min(tl.x, br.x),
+      y: Math.min(tl.y, br.y),
+      width: Math.abs(br.x - tl.x),
+      height: Math.abs(br.y - tl.y)
+    };
+  }
+  /** Axis-aligned world bounds of all seats + section outlines (minimap F3 frame). */
+  getWorldBounds() {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const grow = (x, y) => {
+      if (x < minX) minX = x;
+      if (y < minY) minY = y;
+      if (x > maxX) maxX = x;
+      if (y > maxY) maxY = y;
+    };
+    for (const s of this.seats) grow(s.x, s.y);
+    for (const sec of this.sections) for (const p of sec.outline) grow(p.x, p.y);
+    if (!Number.isFinite(minX)) return { x: 0, y: 0, width: 1, height: 1 };
+    return { x: minX, y: minY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) };
+  }
   /** Legend hover: highlight one category (dim the rest), or null to clear. */
   setCategoryHighlight(key) {
     if (this.categoryHighlight === key) return;
@@ -1982,6 +2152,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   renderBackground(doc) {
     if (doc.backgroundImage) this.renderBackgroundImage(doc.backgroundImage);
+    for (const obj of doc.objects) if (obj.type === "decorImage") this.renderDecorImage(obj);
     for (const obj of doc.objects) if (obj.type === "section") this.renderSection(obj);
     this.renderZones(doc);
     for (const obj of doc.objects) {
@@ -2030,6 +2201,35 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     };
     img.src = bg.url;
   }
+  /**
+   * A decor graphic (rink / court / stage art). The KImage node is added to the
+   * bgLayer synchronously so it keeps its z-slot beneath the sections drawn right
+   * after; the bitmap is decoded async and pasted in on load. A single node = a
+   * single drawImage per frame, and it rides the same layer cache — effectively
+   * zero per-frame cost. Never listens, so it can't intercept a seat click.
+   */
+  renderDecorImage(obj) {
+    const img = new window.Image();
+    const node = new import_Image.Image({
+      image: img,
+      x: obj.x + obj.width / 2,
+      y: obj.y + obj.height / 2,
+      offsetX: obj.width / 2,
+      offsetY: obj.height / 2,
+      width: obj.width,
+      height: obj.height,
+      rotation: obj.rotation ?? 0,
+      opacity: clamp(obj.opacity ?? 1, 0, 1),
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    this.bgLayer.add(node);
+    img.onload = () => {
+      if (!node.getLayer()) return;
+      this.bgLayer.batchDraw();
+    };
+    img.src = obj.href;
+  }
   renderTable(obj) {
     if (obj.shape === "round") {
       this.bgLayer.add(
@@ -2351,11 +2551,32 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   /** Recompute a section's availability-tinted fill + "N LEFT" (cheap; on status change). */
   refreshSectionFill(sec) {
-    const sold = sec.total > 0 ? (sec.total - sec.free) / sec.total : 0;
-    sec.blockPoly.fill(darken(sec.baseFill, sold * SOLD_DARKEN));
+    sec.blockPoly.fill(this.sectionBlockFill(sec));
     sec.subLabel.text(t("map.seatsLeft", { count: sec.free }));
     sec.subLabel.offsetX(sec.subLabel.width() / 2);
   }
+  /** True when a section/zone is currently in the `closed` event-state. */
+  isSectionClosed(sec) {
+    return this.closedSections.has(sec.id) || sec.zone != null && this.closedSections.has(sec.zone);
+  }
+  /**
+   * The block-fill colour for a section: flat desaturated grey when `closed`,
+   * else the availability-darkened category mix; then desaturated toward neutral
+   * when another section holds focus (AXS dim treatment).
+   */
+  sectionBlockFill(sec) {
+    let fill;
+    if (this.isSectionClosed(sec)) {
+      fill = CLOSED_SECTION_FILL;
+    } else {
+      const sold = sec.total > 0 ? (sec.total - sec.free) / sec.total : 0;
+      fill = darken(sec.baseFill, sold * SOLD_DARKEN);
+    }
+    if (this.focusedSectionId && sec.id !== this.focusedSectionId && sec.zone !== this.focusedSectionId) {
+      fill = lerpColor(fill, FOCUS_NEUTRAL, FOCUS_DESATURATE);
+    }
+    return fill;
+  }
   /**
    * Zone rung: one giant screen-constant label per zone (+ optional "FROM $n"),
    * shown at the farthest zoom in place of per-section detail. Skipped entirely
@@ -2447,12 +2668,14 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const sx = this.stage.scaleX();
     const rescale = this.lodScale === 0 || Math.abs(scale - this.lodScale) / (this.lodScale || 1) > 0.02;
     if (rescale) this.lodScale = scale;
+    const focus = this.focusedSectionId;
     for (const sec of this.sections) {
-      sec.blockPoly.opacity(BLOCK_FILL_ALPHA * blockT);
-      for (const line of sec.rowLines) line.opacity(blockT * (1 - zoneT));
+      const dim = focus && sec.id !== focus && sec.zone !== focus ? FOCUS_DIM_OPACITY : 1;
+      sec.blockPoly.opacity(BLOCK_FILL_ALPHA * blockT * dim);
+      for (const line of sec.rowLines) line.opacity(blockT * (1 - zoneT) * dim);
       sec.nameLabel.fill(lerpColor("#aab3c5", "#ffffff", blockT));
-      sec.nameLabel.opacity(1 - zoneT);
-      sec.subLabel.opacity(blockT * (1 - zoneT));
+      sec.nameLabel.opacity((1 - zoneT) * dim);
+      sec.subLabel.opacity(blockT * (1 - zoneT) * dim);
       if (rescale) {
         this.sizeLabel(sec.nameLabel, SECTION_LABEL_PX / sx, sec.centroid.y - SECTION_SUB_PX / sx);
         this.sizeLabel(sec.subLabel, SECTION_SUB_PX / sx, sec.centroid.y + SECTION_LABEL_PX / sx);
@@ -2468,8 +2691,50 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         if (zone.sub) this.sizeLabel(zone.sub, ZONE_SUB_PX / sx, cy + ZONE_LABEL_PX / sx);
       }
     }
+    this.decollideRungLabels(sx);
     this.bgLayer.batchDraw();
   }
+  /**
+   * Greedy label de-collision for the zone/section rungs (same approach as the
+   * designer's cullRowLabels): price/"N LEFT" sublabels are lowest priority and
+   * drop first; name labels keep top-to-bottom, left-to-right; anything whose
+   * on-screen box (+4px gap) overlaps an already-kept box hides. Recomputed on
+   * every LOD pass so hidden labels reappear as zoom spreads them apart.
+   * Culling multiplies the opacity applySectionLod just assigned (never raises).
+   */
+  decollideRungLabels(sx) {
+    const GAP = 4;
+    const cands = [];
+    const boxOf = (t2) => {
+      const p = this.worldToScreen({ x: t2.x(), y: t2.y() });
+      const w = t2.width() * sx;
+      const h = t2.height() * sx;
+      return { x: p.x - w / 2, y: p.y - h / 2, w, h };
+    };
+    for (const zone of this.zones) {
+      if (zone.label.opacity() > 0.05) cands.push({ node: zone.label, tier: 0, box: boxOf(zone.label) });
+      if (zone.sub && zone.sub.opacity() > 0.05) cands.push({ node: zone.sub, tier: 2, owner: zone.label, box: boxOf(zone.sub) });
+    }
+    for (const sec of this.sections) {
+      if (sec.nameLabel.opacity() > 0.05) cands.push({ node: sec.nameLabel, tier: 1, box: boxOf(sec.nameLabel) });
+      if (sec.subLabel.opacity() > 0.05) cands.push({ node: sec.subLabel, tier: 3, owner: sec.nameLabel, box: boxOf(sec.subLabel) });
+    }
+    if (cands.length < 2) return;
+    cands.sort((a, b) => a.tier - b.tier || a.box.y - b.box.y || a.box.x - b.box.x);
+    const kept = [];
+    const culled = /* @__PURE__ */ new Set();
+    const collides = (b) => kept.some(
+      (k) => b.x < k.x + k.w + GAP && k.x < b.x + b.w + GAP && b.y < k.y + k.h + GAP && k.y < b.y + b.h + GAP
+    );
+    for (const c of cands) {
+      if (c.owner && culled.has(c.owner) || collides(c.box)) {
+        c.node.opacity(0);
+        culled.add(c.node);
+      } else {
+        kept.push(c.box);
+      }
+    }
+  }
   /** Set a centred label's world fontSize (for a target screen px) and re-anchor it. */
   sizeLabel(t2, fontSize, y) {
     t2.fontSize(Math.max(1, fontSize));
@@ -2516,6 +2781,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   // ---- selection ------------------------------------------------------------
   isSelectable(id) {
+    if (this.seatInClosedSection(id)) return false;
     const statuses = this.opts.selectableStatuses ?? ["free"];
     return statuses.includes(this.statusById.get(id) ?? "free");
   }
@@ -2587,19 +2853,84 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     }
   }
   // ---- interaction ----------------------------------------------------------
+  /**
+   * The stage scale `focusRegion(id)` would settle at — i.e. the zoom that
+   * frames this section in the current viewport. Used to decide whether
+   * redirecting a seat tap to section-focus would actually zoom in FURTHER, or
+   * whether the section already fills the viewport (small container) so the tap
+   * must fall through and pick.
+   */
+  sectionFrameScale(id) {
+    const sec = this.sections.find((s) => s.id === id);
+    if (!sec) return this.stage.scaleX();
+    const b = polyBounds(sec.outline);
+    const w = this.stage.width();
+    const h = this.stage.height();
+    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);
+  }
+  /**
+   * Resolve a seat tap: honour the 3D deck-drill and the AXS seat-pick gate,
+   * then toggle. The gate (§4) redirects small on-screen seats to section-focus
+   * to avoid blind mis-picks at overview scales — but ONLY when focusing would
+   * zoom the seat up to a safe size. If we're already focused on the section, or
+   * the section already fills the viewport (a narrow — OR even a wide — container
+   * frames a big section BELOW LABEL_SCALE), redirecting is a no-op that would
+   * leave the seat permanently unpickable (§5 `picking-gate-unreachable`), so we
+   * fall through and PICK. This is the invariant: seats are never unpickable.
+   */
+  handleSeatTap(id) {
+    if (this.stacked && this.opts.onDeckTap) {
+      const floorId = this.objectFloor.get(this.seatById.get(id)?.rowId ?? "");
+      if (floorId) {
+        this.opts.onDeckTap(floorId);
+        return;
+      }
+    }
+    if (this.effScale() < LABEL_SCALE && this.sections.length) {
+      const sec = this.seatSection.get(id);
+      if (sec) {
+        const alreadyFocused = this.focusedSectionId === sec.id;
+        const canZoomInFurther = this.sectionFrameScale(sec.id) > this.stage.scaleX() * 1.02;
+        if (!alreadyFocused && canZoomInFurther) {
+          if (this.opts.onSectionTap) this.opts.onSectionTap(sec.id);
+          else this.focusSection(sec.id);
+          return;
+        }
+      }
+    }
+    this.toggleSeat(id);
+  }
+  /**
+   * Nearest SELECTABLE seat whose centre is within `slopPx` (screen space) of a
+   * seat circle edge, or null. Enlarges the effective tap target for small seats
+   * so a near-miss on mobile still lands on the intended seat, without ever
+   * hijacking a clean tap on empty space beyond the slop.
+   */
+  nearestSeatToScreen(screen, slopPx) {
+    const s = this.stage.scaleX() || 1;
+    const reachWorld = this.seatR + slopPx / s;
+    const world = this.screenToWorld(screen);
+    let best = null;
+    let bestD = reachWorld;
+    for (const seat of this.seats) {
+      if (!this.selection.has(seat.id) && !this.isSelectable(seat.id)) continue;
+      const d = Math.hypot(seat.x - world.x, seat.y - world.y);
+      if (d < bestD) {
+        bestD = d;
+        best = seat.id;
+      }
+    }
+    return best;
+  }
   wireInteraction() {
     this.seatLayer.on("click tap", (e) => {
       if (this.moved > 8) return;
       const id = seatIdOf(e.target);
       if (!id) return;
-      if (this.stacked && this.opts.onDeckTap) {
-        const floorId = this.objectFloor.get(this.seatById.get(id)?.rowId ?? "");
-        if (floorId) {
-          this.opts.onDeckTap(floorId);
-          return;
-        }
-      }
-      this.toggleSeat(id);
+      this.handleSeatTap(id);
     });
     this.seatLayer.on("mouseover", (e) => {
       const id = seatIdOf(e.target);
@@ -2625,10 +2956,16 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const factor = Math.exp(-e.evt.deltaY * 2e-3);
       this.zoomAbout(this.stage.scaleX() * clamp(factor, 0.5, 2), pointer);
     });
-    this.stage.on("click tap", () => {
-      if (!this.cached || this.moved > 8) return;
+    this.stage.on("click tap", (e) => {
+      if (this.moved > 8) return;
       const pointer = this.stage.getPointerPosition();
       if (!pointer) return;
+      if (!this.cached) {
+        if (seatIdOf(e.target)) return;
+        const near = this.nearestSeatToScreen(pointer, SEAT_TAP_SLOP_PX);
+        if (near) this.handleSeatTap(near);
+        return;
+      }
       if (this.stacked && this.opts.onDeckTap) {
         const floorId = this.deckFloorAt();
         if (floorId) {
@@ -2958,6 +3295,9 @@ var PickerController = class {
     this._doc = null;
     /** Section/zone ids hidden from buyers this event (3.3) — seats vanish, not grey. */
     this.hidden = /* @__PURE__ */ new Set();
+    /** Section/zone ids in the `closed` event-state (Phase 2) — seats stay, greyed
+     *  + not pickable. Kept separate from `hidden` (which strips them). */
+    this.closedSections = /* @__PURE__ */ new Set();
     /** label ⇄ id maps — backend speaks labels, the engine speaks ids. */
     this.labelToId = /* @__PURE__ */ new Map();
     this.labelToSeat = /* @__PURE__ */ new Map();
@@ -2998,6 +3338,19 @@ var PickerController = class {
     this.renderer?.setChart(this.visibleDoc());
     return true;
   }
+  /** Adopt a new closed-section set; restyle (grey + non-pickable) if it differs.
+   *  Cheap restyle — no chart rebuild — so mid-sale open/close repaints live. */
+  syncClosed(ids) {
+    const next = (ids ?? []).filter((x) => typeof x === "string");
+    if (next.length === this.closedSections.size && next.every((id) => this.closedSections.has(id))) return false;
+    this.closedSections = new Set(next);
+    this.renderer?.setClosedSections?.(next);
+    return true;
+  }
+  /** Whether a section is currently in the `closed` state (card must not open). */
+  isSectionClosed(id) {
+    return this.closedSections.has(id);
+  }
   currentHold() {
     return this.hold_;
   }
@@ -3065,9 +3418,11 @@ var PickerController = class {
     }
     this.renderer = renderer;
     let seats = null;
+    let closedIds = [];
     try {
       const objs = await this.api.objects(this.key);
       this.hidden = new Set(objs.hidden ?? []);
+      closedIds = (objs.closed ?? []).filter((x) => typeof x === "string");
       seats = objs.seats;
     } catch {
     }
@@ -3078,6 +3433,8 @@ var PickerController = class {
     }
     renderer.setChart(this.visibleDoc());
     if (this.opts.colorblindSafe) renderer.setColorblindSafe?.(true);
+    this.closedSections = new Set(closedIds);
+    if (closedIds.length) renderer.setClosedSections?.(closedIds);
     if (seats) this.applySeatsMap(seats);
     this.connect();
     return {
@@ -3162,13 +3519,23 @@ var PickerController = class {
    */
   categoryAvailability() {
     const out = {};
+    const closedMembers = this.closedMemberIds();
     for (const [id, s] of this.seatById) {
+      if (closedMembers.has(id)) continue;
       if ((this.getStatus(id) ?? "free") === "free") {
         out[s.categoryKey] = (out[s.categoryKey] ?? 0) + 1;
       }
     }
     return out;
   }
+  /** Seat ids belonging to a currently-closed section (excluded from counts). */
+  closedMemberIds() {
+    const out = /* @__PURE__ */ new Set();
+    const r = this.renderer;
+    if (!r || !this.closedSections.size) return out;
+    for (const id of this.closedSections) for (const sid of r.sectionMembers?.(id) ?? []) out.add(sid);
+    return out;
+  }
   getGAAreas() {
     const doc = this.visibleDoc();
     if (!doc) return [];
@@ -3413,20 +3780,39 @@ var PickerController = class {
     }
     this.renderer?.setRung?.(rung);
   }
+  /** Price-band filter (F4): dim free seats whose category is outside `keys`
+   *  (null clears). The widget resolves which categories fall in the band. */
+  setCategoryFilter(keys) {
+    this.renderer?.setCategoryFilter?.(keys);
+  }
+  /** World-space rect currently visible + full chart bounds (F3 minimap frame). */
+  getViewport() {
+    const r = this.renderer;
+    if (!r?.getVisibleWorldRect || !r.getWorldBounds) return null;
+    return { visible: r.getVisibleWorldRect(), bounds: r.getWorldBounds() };
+  }
   /** Glide in on a section and surface its summary (same path as a section tap). */
   focusSection(id) {
     this.handleSectionTap(id);
   }
-  /** Zoom back out to the whole chart and clear the section-summary card. */
+  /** Zoom back out to the whole chart and clear the section-summary card + focus. */
   overview() {
+    this.renderer?.clearSectionFocus?.();
     this.renderer?.zoomToFit();
     this.opts.onSectionFocus?.(null);
   }
-  /** Glide the camera into a tapped section and emit its computed summary. */
+  /** Glide the camera into a tapped section and emit its computed summary. Uses
+   *  the AXS focus treatment (dim + backdrop) when the engine supports it; a
+   *  closed section is framed but never opens a buyer card. */
   handleSectionTap(id) {
     const r = this.renderer;
     if (!r) return;
-    r.focusRegion?.(id);
+    if (r.focusSection) r.focusSection(id);
+    else r.focusRegion?.(id);
+    if (this.isSectionClosed(id)) {
+      this.opts.onSectionFocus?.(null);
+      return;
+    }
     this.opts.onSectionFocus?.(this.sectionSummary(id));
   }
   /**
@@ -3700,6 +4086,9 @@ var PickerController = class {
         void this.resnapshot();
         this.opts.onStatusChange?.();
       }
+      if (Array.isArray(m.closed) && this.syncClosed(m.closed)) {
+        this.opts.onStatusChange?.();
+      }
       if (m.type === "hidden") return;
       if (m.seats && typeof m.seats === "object") {
         this.applySeatsMap(m.seats);