@seatlayer/core 0.1.0

package/dist/index.js

@@ -0,0 +1,2377 @@
+// src/core/types.ts
+var ACCESSIBILITY_TYPES = [
+  { key: "wheelchair", label: "Wheelchair space", short: "Wheelchair", icon: "\u267F" },
+  { key: "companion", label: "Companion seat", short: "Companion", icon: "\u{1F9D1}\u200D\u{1F91D}\u200D\u{1F9D1}" },
+  { key: "semi-ambulatory", label: "Semi-ambulatory (limited mobility)", short: "Limited mobility", icon: "\u{1F9AF}" },
+  { key: "hearing", label: "Assistive listening", short: "Hearing", icon: "\u{1F9BB}" },
+  { key: "sign-language", label: "Sign-language view", short: "Sign language", icon: "\u{1F91F}" },
+  { key: "plus-size", label: "Plus-size seat", short: "Plus-size", icon: "\u{1F4BA}" },
+  { key: "lift-armrest", label: "Lift-up armrest", short: "Lift armrest", icon: "\u2195\uFE0F" }
+];
+var ACCESSIBILITY_LABEL = new Map(ACCESSIBILITY_TYPES.map((a) => [a.key, a]));
+function accessibilityMeta(key) {
+  return ACCESSIBILITY_LABEL.get(key);
+}
+function layerOf(obj) {
+  switch (obj.type) {
+    case "row":
+    case "table":
+    case "gaArea":
+    case "booth":
+    case "section":
+      return "interactive";
+    // stage / décor live on 'shape'; free text is background furniture.
+    case "shape":
+    case "text":
+      return "background";
+    default:
+      return "interactive";
+  }
+}
+var CHART_STORAGE_KEY = "seatmap.chart";
+
+// src/core/layout.ts
+function overrideAccessibility(o) {
+  if (!o) return [];
+  if (o.accessibility && o.accessibility.length) return o.accessibility;
+  return o.accessible ? ["wheelchair"] : [];
+}
+var DEG = Math.PI / 180;
+var SEAT_R = 9;
+var TABLE_SEAT_OFFSET = 16;
+function place(lx, ly, deg, origin) {
+  const a = deg * DEG;
+  const cos = Math.cos(a);
+  const sin = Math.sin(a);
+  return {
+    x: origin.x + lx * cos - ly * sin,
+    y: origin.y + lx * sin + ly * cos
+  };
+}
+function rowSeatPositions(row) {
+  const { seatCount, seatSpacing, curve, rotation, origin } = row;
+  const out = [];
+  if (seatCount <= 1) {
+    if (seatCount === 1) out.push({ x: origin.x, y: origin.y });
+    return out;
+  }
+  if (curve === 0) {
+    for (let i = 0; i < seatCount; i++) out.push(place(i * seatSpacing, 0, rotation, origin));
+    return out;
+  }
+  const arcStep = curve / (seatCount - 1) * DEG;
+  const radius = seatSpacing / (2 * Math.sin(Math.abs(arcStep) / 2));
+  for (let i = 0; i < seatCount; i++) {
+    const phi = i * arcStep;
+    const lx = radius * Math.sin(phi);
+    const ly = -radius + radius * Math.cos(phi);
+    out.push(place(lx, ly, rotation, origin));
+  }
+  return out;
+}
+function overrideMap(row) {
+  const m = /* @__PURE__ */ new Map();
+  if (row.overrides) for (const o of row.overrides) m.set(o.index, o);
+  return m;
+}
+function expandRowSlots(row) {
+  const start = row.seatLabelStart ?? 1;
+  const dir = row.seatNumbering?.direction ?? "ltr";
+  const step = row.seatNumbering?.step ?? 1;
+  const seatNumber = (i) => start + (dir === "rtl" ? row.seatCount - 1 - i : i) * step;
+  const ov = overrideMap(row);
+  return rowSeatPositions(row).map((p, i) => {
+    const o = ov.get(i);
+    const accessibility = overrideAccessibility(o);
+    return {
+      index: i,
+      x: p.x + (o?.dx ?? 0),
+      y: p.y + (o?.dy ?? 0),
+      label: o?.label ?? `${row.label}-${seatNumber(i)}`,
+      categoryKey: o?.categoryKey ?? row.categoryKey,
+      skipped: !!o?.skip,
+      accessible: accessibility.length > 0,
+      accessibility
+    };
+  });
+}
+function expandRow(row) {
+  const seats = [];
+  for (const slot of expandRowSlots(row)) {
+    if (slot.skipped) continue;
+    seats.push({
+      id: `${row.id}:${slot.index}`,
+      label: slot.label,
+      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
+    });
+  }
+  return seats;
+}
+function expandTable(t) {
+  const seats = [];
+  const n = Math.max(0, Math.round(t.seatCount));
+  if (n === 0) return seats;
+  const mk = (i, x, y) => ({
+    id: `${t.id}:${i}`,
+    label: `${t.label}-${i + 1}`,
+    x,
+    y,
+    rowId: t.id,
+    categoryKey: t.categoryKey
+  });
+  if (t.shape === "round") {
+    const R = (t.radius ?? 40) + TABLE_SEAT_OFFSET;
+    const base = t.rotation * DEG;
+    for (let i = 0; i < n; i++) {
+      const a = base + i / n * 2 * Math.PI;
+      seats.push(mk(i, t.center.x + R * Math.cos(a), t.center.y + R * Math.sin(a)));
+    }
+    return seats;
+  }
+  const w = t.width ?? 80;
+  const h = t.height ?? 50;
+  const enabled = t.sides && t.sides.length ? t.sides : ["top", "bottom"];
+  const order = ["top", "bottom", "left", "right"].filter((s) => enabled.includes(s));
+  if (!order.length) return seats;
+  const counts = new Map(order.map((s) => [s, 0]));
+  for (let i = 0; i < n; i++) {
+    const s = order[i % order.length];
+    counts.set(s, counts.get(s) + 1);
+  }
+  let idx = 0;
+  for (const side of order) {
+    const count = counts.get(side);
+    for (let j = 0; j < count; j++) {
+      let localX;
+      let localY;
+      if (side === "top") {
+        localX = -w / 2 + (j + 0.5) * w / count;
+        localY = -h / 2 - TABLE_SEAT_OFFSET;
+      } else if (side === "bottom") {
+        localX = -w / 2 + (j + 0.5) * w / count;
+        localY = h / 2 + TABLE_SEAT_OFFSET;
+      } else if (side === "left") {
+        localX = -w / 2 - TABLE_SEAT_OFFSET;
+        localY = -h / 2 + (j + 0.5) * h / count;
+      } else {
+        localX = w / 2 + TABLE_SEAT_OFFSET;
+        localY = -h / 2 + (j + 0.5) * h / count;
+      }
+      const p = place(localX, localY, t.rotation, t.center);
+      seats.push(mk(idx++, p.x, p.y));
+    }
+  }
+  return seats;
+}
+function expandBooth(b) {
+  return [
+    {
+      id: `${b.id}:0`,
+      label: b.label,
+      x: b.center.x,
+      y: b.center.y,
+      rowId: b.id,
+      categoryKey: b.categoryKey,
+      kind: "booth"
+    }
+  ];
+}
+function pointInPolygon(p, poly) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
+    const xi = poly[i].x;
+    const yi = poly[i].y;
+    const xj = poly[j].x;
+    const yj = poly[j].y;
+    const hit = yi > p.y !== yj > p.y && p.x < (xj - xi) * (p.y - yi) / (yj - yi) + xi;
+    if (hit) inside = !inside;
+  }
+  return inside;
+}
+function polygonCentroid(pts) {
+  if (!pts.length) return { x: 0, y: 0 };
+  let x = 0;
+  let y = 0;
+  for (const p of pts) {
+    x += p.x;
+    y += p.y;
+  }
+  return { x: x / pts.length, y: y / pts.length };
+}
+function objectCenter(o) {
+  switch (o.type) {
+    case "row": {
+      const seats = expandRow(o);
+      if (!seats.length) return { x: o.origin.x, y: o.origin.y };
+      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 };
+    }
+    case "table":
+    case "booth":
+      return { x: o.center.x, y: o.center.y };
+    case "gaArea":
+      return polygonCentroid(o.points);
+    case "section":
+      return polygonCentroid(o.outline);
+    case "text":
+      return { x: o.position.x, y: o.position.y };
+    case "shape":
+      if (o.points && o.points.length) return polygonCentroid(o.points);
+      if (o.x != null && o.y != null && o.width != null && o.height != null) {
+        return { x: o.x + o.width / 2, y: o.y + o.height / 2 };
+      }
+      return { x: o.x ?? 0, y: o.y ?? 0 };
+  }
+}
+function expandChart(doc) {
+  const out = [];
+  for (const obj of doc.objects) {
+    if (obj.type === "row") out.push(...expandRow(obj));
+    else if (obj.type === "table") out.push(...expandTable(obj));
+    else if (obj.type === "booth") out.push(...expandBooth(obj));
+  }
+  return out;
+}
+var PAD = 40;
+function chartBounds(doc) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  const acc = (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 expandChart(doc)) acc(s.x, s.y);
+  for (const obj of doc.objects) {
+    if (obj.type === "gaArea") {
+      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 === "shape") {
+      if (obj.points && obj.points.length) {
+        for (const p of obj.points) acc(p.x, p.y);
+      } else if (obj.x != null && obj.y != null && obj.width != null && obj.height != null) {
+        acc(obj.x, obj.y);
+        acc(obj.x + obj.width, obj.y + obj.height);
+      }
+    } else if (obj.type === "table") {
+      const off = TABLE_SEAT_OFFSET + SEAT_R;
+      const ext = obj.shape === "round" ? (obj.radius ?? 40) + off : Math.max((obj.width ?? 80) / 2, (obj.height ?? 50) / 2) + off;
+      acc(obj.center.x - ext, obj.center.y - ext);
+      acc(obj.center.x + ext, obj.center.y + ext);
+    } else if (obj.type === "booth") {
+      const ext = Math.max(obj.width, obj.height) / 2;
+      acc(obj.center.x - ext, obj.center.y - ext);
+      acc(obj.center.x + ext, obj.center.y + ext);
+    } else if (obj.type === "text") {
+      const w = obj.fontSize * obj.text.length * 0.6;
+      acc(obj.position.x, obj.position.y);
+      acc(obj.position.x + w, obj.position.y + obj.fontSize);
+    }
+  }
+  if (doc.backgroundImage) {
+    const { center, width } = doc.backgroundImage;
+    const bh = width * 3 / 4;
+    acc(center.x - width / 2, center.y - bh / 2);
+    acc(center.x + width / 2, center.y + bh / 2);
+  }
+  if (!isFinite(minX)) {
+    const f = doc.focalPoint ?? { x: 0, y: 0 };
+    return { x: f.x - 200, y: f.y - 200, width: 400, height: 400 };
+  }
+  return {
+    x: minX - PAD,
+    y: minY - PAD,
+    width: maxX - minX + PAD * 2,
+    height: maxY - minY + PAD * 2
+  };
+}
+
+// src/engine/SeatmapRenderer.ts
+import { Konva } from "konva/lib/Core";
+import { Stage } from "konva/lib/Stage";
+import { Layer } from "konva/lib/Layer";
+import { Group } from "konva/lib/Group";
+import { Circle } from "konva/lib/shapes/Circle";
+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 { Image as KImage } from "konva/lib/shapes/Image";
+var SEAT_RADIUS = 9;
+var SEAT_LEGIBLE_SCALE = 0.9;
+var CACHE_THRESHOLD = 0.55 * SEAT_LEGIBLE_SCALE;
+var LABEL_SCALE = 1;
+var SECTION_PROMINENT_SCALE = 0.35 * SEAT_LEGIBLE_SCALE;
+var ZONE_PROMINENT_SCALE = 0.55 * SECTION_PROMINENT_SCALE;
+var MAX_LABELS = 700;
+var ISO_ANGLE_DEG = -11.5;
+var ISO_SQUASH = 0.58;
+var LIFT_PER_STEP = 46;
+var ISO_TWEEN_MS = 320;
+var BLOCK_FILL_ALPHA = 0.85;
+var SOLD_DARKEN = 0.5;
+var SECTION_LABEL_PX = 18;
+var SECTION_SUB_PX = 11;
+var ZONE_LABEL_PX = 30;
+var ZONE_SUB_PX = 12;
+var HELD_FILL = "#6b7280";
+var TAKEN_FILL = "#374151";
+var NFS_STROKE = "#4b5563";
+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((t) => filter.includes(t));
+}
+var DEF_SEAT_LABEL = "#0b1220";
+var DEF_SELECTION = "#ffffff";
+var DEF_DECOR_FILL = "#232c40";
+var DEF_TEXT = "#8b93a7";
+var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+function seatIdOf(target) {
+  const n = target;
+  return n?.getAttr?.("seatId") ?? void 0;
+}
+function lighten(hex, amt) {
+  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());
+  if (!m) return hex;
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255;
+  const g = n >> 8 & 255;
+  const b = n & 255;
+  const mix = (c) => Math.round(c + (255 - c) * amt);
+  return `#${(1 << 24 | mix(r) << 16 | mix(g) << 8 | mix(b)).toString(16).slice(1)}`;
+}
+function darken(hex, amt) {
+  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());
+  if (!m) return hex;
+  const n = parseInt(m[1], 16);
+  const mix = (c) => Math.round(c * (1 - amt));
+  return `#${(1 << 24 | mix(n >> 16 & 255) << 16 | mix(n >> 8 & 255) << 8 | mix(n & 255)).toString(16).slice(1)}`;
+}
+function polyBounds(pts) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const p of pts) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+  return { x: minX, y: minY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) };
+}
+function rgba(hex, a) {
+  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());
+  if (!m) return hex;
+  const n = parseInt(m[1], 16);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
+}
+function hexToRgb(hex) {
+  const m = /^#?([\da-f]{6})$/i.exec(hex.trim());
+  if (!m) return null;
+  const n = parseInt(m[1], 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+var toHex = (r, g, b) => `#${(1 << 24 | Math.round(r) << 16 | Math.round(g) << 8 | Math.round(b)).toString(16).slice(1)}`;
+function mixColors(parts, fallback) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let tw = 0;
+  for (const p of parts) {
+    const rgb = hexToRgb(p.hex);
+    if (!rgb || p.w <= 0) continue;
+    r += rgb[0] * p.w;
+    g += rgb[1] * p.w;
+    b += rgb[2] * p.w;
+    tw += p.w;
+  }
+  return tw > 0 ? toHex(r / tw, g / tw, b / tw) : fallback;
+}
+function lerpColor(a, b, t) {
+  const ca = hexToRgb(a);
+  const cb = hexToRgb(b);
+  if (!ca || !cb) return a;
+  return toHex(ca[0] + (cb[0] - ca[0]) * t, ca[1] + (cb[1] - ca[1]) * t, ca[2] + (cb[2] - ca[2]) * t);
+}
+var _SeatmapRenderer = class _SeatmapRenderer {
+  constructor(container, options = {}) {
+    this.seats = [];
+    this.seatById = /* @__PURE__ */ new Map();
+    /** Interactive node per seat/booth — a Circle for seats, a Rect for booths. */
+    this.circleById = /* @__PURE__ */ new Map();
+    /** Booth block geometry, keyed by booth id (= the unit's rowId). */
+    this.boothDims = /* @__PURE__ */ new Map();
+    this.statusById = /* @__PURE__ */ new Map();
+    this.catColor = /* @__PURE__ */ new Map();
+    this.theme = {};
+    this.selection = /* @__PURE__ */ new Set();
+    this.selectionRings = /* @__PURE__ */ new Map();
+    this.focusedId = null;
+    /**
+     * Accessibility filter: `null` = off; `[]` = dim all non-accessible free seats;
+     * a type list = dim free seats lacking any of those accommodations.
+     */
+    this.accessFilter = null;
+    /** Category highlight (legend hover): dims free seats NOT of this category. */
+    this.categoryHighlight = 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 = [];
+    this.zones = [];
+    this.seatSection = /* @__PURE__ */ new Map();
+    this.catPrice = /* @__PURE__ */ new Map();
+    /** Zone id → colour (drives extruded side faces in iso view). */
+    this.zoneColor = /* @__PURE__ */ new Map();
+    this.hasSections = false;
+    /** seatLayer carries Text (booth labels) — gate the upright-label scan. */
+    this.hasBoothText = false;
+    // Isometric ("3D") view — an affine skew/rotate + elevation lift, tweened.
+    /** 0 = flat (default), 1 = full isometric; animated by setViewMode. */
+    this.isoT = 0;
+    this.isoTarget = 0;
+    this.isoRaf = 0;
+    /** Chart centre the iso projection pivots about (bounds centre). */
+    this.isoCentre = { x: 0, y: 0 };
+    /** Set in destroy() so an in-flight iso tween bails. */
+    this.destroyed = false;
+    /** Cached scale the section/zone labels were last sized for (scale-compensation). */
+    this.lodScale = 0;
+    /** prefers-reduced-motion → hard-swap rungs instead of cross-fading. */
+    this.reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    this.fitScale = 1;
+    /** Effective seat radius (base × theme.seatScale), set per chart in setChart. */
+    this.seatR = SEAT_RADIUS;
+    this.bounds = { x: 0, y: 0, width: 1, height: 1 };
+    this.cached = false;
+    this.dpr = Math.min(typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1, 2);
+    this.rafId = 0;
+    this.frames = 0;
+    this.lastFpsAt = 0;
+    this.recacheTimer = null;
+    this.resizeObs = null;
+    /** Coalesces bursty view-change sources (pointermove, wheel) into ≤1 callback/frame. */
+    this.viewChangeRaf = 0;
+    // Gesture state — pan/pinch are handled with raw pointer events on the
+    // container (Konva stage dragging is off; its touch pipeline proved
+    // unreliable for multi-touch on real devices).
+    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.moved = 0;
+    // ---- keyboard navigation (accessibility) ----------------------------------
+    this.onKeyDown = (e) => {
+      const dir = e.key === "ArrowLeft" ? { x: -1, y: 0 } : e.key === "ArrowRight" ? { x: 1, y: 0 } : e.key === "ArrowUp" ? { x: 0, y: -1 } : e.key === "ArrowDown" ? { x: 0, y: 1 } : null;
+      if (dir) {
+        e.preventDefault();
+        const next = this.focusedId ? this.nearestSeat(this.focusedId, dir) : this.seats[0]?.id ?? null;
+        if (next) this.focusSeat(next);
+        return;
+      }
+      if ((e.key === "Enter" || e.key === " ") && this.focusedId) {
+        e.preventDefault();
+        this.toggleSeat(this.focusedId);
+        const s = this.seatById.get(this.focusedId);
+        if (s) this.opts.onFocusSeat?.(s);
+      }
+    };
+    // NOTE: no setPointerCapture here — capturing on the container retargets
+    // pointer events away from Konva's canvas, killing its click/tap/hover
+    // pipeline. We rely on bubbling instead.
+    this.onPointerDown = (e) => {
+      this.pointers.set(e.pointerId, this.toLocal(e));
+      if (this.pointers.size === 1) {
+        this.moved = 0;
+        this.panLast = this.toLocal(e);
+        this.pinch = null;
+      } else if (this.pointers.size === 2) {
+        const [a, b] = [...this.pointers.values()];
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        const s = this.stage.scaleX();
+        this.pinch = {
+          startDist: Math.hypot(b.x - a.x, b.y - a.y),
+          startScale: s,
+          worldMid: { x: (mid.x - this.stage.x()) / s, y: (mid.y - this.stage.y()) / s }
+        };
+        this.panLast = null;
+      }
+    };
+    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.pinch && this.pointers.size >= 2) {
+        const [a, b] = [...this.pointers.values()];
+        const dist = Math.hypot(b.x - a.x, b.y - a.y);
+        if (this.pinch.startDist < 1) return;
+        const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+        const { min, max } = this.zoomBounds();
+        const scale = clamp(this.pinch.startScale * (dist / this.pinch.startDist), min, max);
+        this.stage.scale({ x: scale, y: scale });
+        this.stage.position({
+          x: mid.x - this.pinch.worldMid.x * scale,
+          y: mid.y - this.pinch.worldMid.y * scale
+        });
+        this.stage.batchDraw();
+        this.scheduleViewChange();
+      } else if (this.panLast && this.pointers.size === 1) {
+        this.stage.position({
+          x: this.stage.x() + (p.x - this.panLast.x),
+          y: this.stage.y() + (p.y - this.panLast.y)
+        });
+        this.panLast = p;
+        this.stage.batchDraw();
+        this.scheduleViewChange();
+      }
+    };
+    this.onPointerEnd = (e) => {
+      this.pointers.delete(e.pointerId);
+      if (this.pointers.size < 2) this.pinch = null;
+      if (this.pointers.size === 1) {
+        this.panLast = [...this.pointers.values()][0];
+      }
+      if (this.pointers.size === 0) {
+        this.panLast = null;
+        this.afterViewChange();
+      }
+    };
+    this.container = container;
+    this.opts = { maxSelection: 10, selectableStatuses: ["free"], ...options };
+    Konva.pixelRatio = this.dpr;
+    this.stage = new Stage({
+      container,
+      width: container.clientWidth || 1,
+      height: container.clientHeight || 1,
+      draggable: false
+      // pan/pinch are ours, via pointer events
+    });
+    container.style.touchAction = "none";
+    container.addEventListener("pointerdown", this.onPointerDown, { passive: false });
+    container.addEventListener("pointermove", this.onPointerMove, { passive: false });
+    container.addEventListener("pointerup", this.onPointerEnd, { passive: false });
+    container.addEventListener("pointercancel", this.onPointerEnd, { passive: false });
+    if (container.tabIndex < 0) container.tabIndex = 0;
+    container.setAttribute("role", "application");
+    if (!container.getAttribute("aria-label")) {
+      container.setAttribute("aria-label", "Seating map. Use arrow keys to move between seats, Enter to select.");
+    }
+    container.addEventListener("keydown", this.onKeyDown);
+    this.bgLayer = new Layer({ listening: true });
+    this.seatLayer = new Layer({ listening: true });
+    this.overlayLayer = new Layer({ listening: false });
+    this.labelGroup = new Group({ listening: false });
+    this.overlayLayer.add(this.labelGroup);
+    this.hoverRing = new Circle({
+      radius: SEAT_RADIUS + 2,
+      stroke: "#ffffff",
+      strokeWidth: 2,
+      opacity: 0.85,
+      listening: false,
+      visible: false,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false
+    });
+    this.overlayLayer.add(this.hoverRing);
+    this.focusRing = new Circle({
+      radius: SEAT_RADIUS + 3,
+      stroke: "#38bdf8",
+      strokeWidth: 2.5,
+      dash: [4, 3],
+      opacity: 0.95,
+      listening: false,
+      visible: false,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false
+    });
+    this.overlayLayer.add(this.focusRing);
+    this.stage.add(this.bgLayer, this.seatLayer, this.overlayLayer);
+    this.wireInteraction();
+    this.startFpsLoop();
+    if (false) {
+      window.__seatmap = this;
+    }
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObs = new ResizeObserver(() => this.handleResize());
+      this.resizeObs.observe(container);
+    }
+  }
+  // ---- ISeatmapRenderer -----------------------------------------------------
+  setChart(doc) {
+    this.focusedId = null;
+    this.focusRing.visible(false);
+    this.bgLayer.destroyChildren();
+    this.seatLayer.destroyChildren();
+    this.labelGroup.destroyChildren();
+    this.circleById.clear();
+    this.boothDims.clear();
+    this.selectionRings.clear();
+    this.statusById.clear();
+    this.selection.clear();
+    this.seatById.clear();
+    this.cached = false;
+    this.accessFilter = null;
+    this.sections = [];
+    this.zones = [];
+    this.seatSection.clear();
+    this.catPrice.clear();
+    this.zoneColor.clear();
+    this.lodScale = 0;
+    this.hasBoothText = false;
+    if (this.isoRaf) {
+      cancelAnimationFrame(this.isoRaf);
+      this.isoRaf = 0;
+    }
+    this.isoT = 0;
+    this.isoTarget = 0;
+    this.resetLayerTransforms();
+    this.hasSections = doc.objects.some((o) => o.type === "section");
+    for (const z of doc.zones ?? []) if (z.color) this.zoneColor.set(z.id, z.color);
+    this.seatLayer.opacity(1);
+    this.hoverRing.visible(false);
+    this.theme = doc.theme ?? {};
+    this.seatR = clamp(this.theme.seatScale ?? 1, 0.7, 1.6) * SEAT_RADIUS;
+    this.container.style.background = this.theme.background ?? "";
+    this.hoverRing.stroke(this.theme.selectionColor ?? DEF_SELECTION);
+    this.hoverRing.radius(this.seatR + 2);
+    this.catColor.clear();
+    this.catPrice.clear();
+    for (const c of doc.categories) {
+      this.catColor.set(c.key, c.color);
+      if (typeof c.price === "number") this.catPrice.set(c.key, c.price);
+    }
+    for (const obj of doc.objects) {
+      if (obj.type === "booth") {
+        this.boothDims.set(obj.id, { width: obj.width, height: obj.height, rotation: obj.rotation });
+      }
+    }
+    this.seats = expandChart(doc);
+    for (const s of this.seats) {
+      this.seatById.set(s.id, s);
+      this.statusById.set(s.id, "free");
+    }
+    this.renderBackground(doc);
+    this.renderSeats();
+    this.overlayLayer.add(this.labelGroup);
+    this.overlayLayer.add(this.hoverRing);
+    this.bounds = chartBounds(doc);
+    this.isoCentre = { x: this.bounds.x + this.bounds.width / 2, y: this.bounds.y + this.bounds.height / 2 };
+    this.zoomToFit();
+  }
+  setStatus(seatIds, status) {
+    let touched = false;
+    const affected = this.hasSections ? /* @__PURE__ */ new Set() : null;
+    for (const id of seatIds) {
+      if (!this.statusById.has(id)) continue;
+      const prev = this.statusById.get(id);
+      this.statusById.set(id, status);
+      const c = this.circleById.get(id);
+      if (c) {
+        this.paintSeat(c, id);
+        touched = true;
+      }
+      if (affected) {
+        const sec = this.seatSection.get(id);
+        if (sec) {
+          if (prev === "free" !== (status === "free")) {
+            sec.free += status === "free" ? 1 : -1;
+          }
+          affected.add(sec);
+        }
+      }
+    }
+    if (affected && affected.size) {
+      for (const sec of affected) this.refreshSectionFill(sec);
+      this.bgLayer.batchDraw();
+    }
+    if (!touched) return;
+    if (this.cached) {
+      if (this.recacheTimer) clearTimeout(this.recacheTimer);
+      this.recacheTimer = setTimeout(() => this.cacheSeatLayer(), 150);
+    } else {
+      this.seatLayer.batchDraw();
+    }
+  }
+  getStatus(seatId) {
+    return this.statusById.get(seatId) ?? "free";
+  }
+  getSelection() {
+    const out = [];
+    for (const id of this.selection) {
+      const s = this.seatById.get(id);
+      if (s) out.push(s);
+    }
+    return out;
+  }
+  clearSelection() {
+    const ids = [...this.selection];
+    for (const id of ids) this.setSelected(id, false, true);
+    this.overlayLayer.batchDraw();
+  }
+  deselect(seatIds) {
+    let changed = false;
+    for (const id of seatIds) {
+      if (this.selection.has(id)) {
+        this.setSelected(id, false, true);
+        changed = true;
+      }
+    }
+    if (changed) this.overlayLayer.batchDraw();
+  }
+  flashSeat(seatId, color = "#f43f5e") {
+    const seat = this.seatById.get(seatId);
+    if (!seat) return;
+    const ring = new Circle({
+      x: seat.x,
+      y: seat.y,
+      radius: this.seatR,
+      stroke: color,
+      strokeWidth: 3,
+      opacity: 0.9,
+      listening: false,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false
+    });
+    this.overlayLayer.add(ring);
+    const start = performance.now();
+    const dur = 620;
+    const step = (now) => {
+      if (!ring.getLayer()) return;
+      const t = Math.min(1, (now - start) / dur);
+      ring.radius(this.seatR * (1 + t * 1.8));
+      ring.opacity(0.9 * (1 - t));
+      this.overlayLayer.batchDraw();
+      if (t < 1) requestAnimationFrame(step);
+      else {
+        ring.destroy();
+        this.overlayLayer.batchDraw();
+      }
+    };
+    requestAnimationFrame(step);
+  }
+  /** Nearest seat from `fromId` in a cardinal direction (aligned + close wins). */
+  nearestSeat(fromId, dir) {
+    const from = this.seatById.get(fromId);
+    if (!from) return null;
+    let best = null;
+    let bestScore = Infinity;
+    for (const s of this.seats) {
+      if (s.id === fromId) continue;
+      const dx = s.x - from.x;
+      const dy = s.y - from.y;
+      const proj = dx * dir.x + dy * dir.y;
+      if (proj <= 0.5) continue;
+      const perp = Math.abs(dx * dir.y - dy * dir.x);
+      const score = proj + perp * 2.5;
+      if (score < bestScore) {
+        bestScore = score;
+        best = s.id;
+      }
+    }
+    return best;
+  }
+  focusSeat(id) {
+    const seat = this.seatById.get(id);
+    if (!seat) return;
+    this.focusedId = id;
+    this.focusRing.radius(this.seatR + 3);
+    this.focusRing.position({ x: seat.x, y: seat.y });
+    this.focusRing.visible(true);
+    this.ensureVisible(seat);
+    this.overlayLayer.batchDraw();
+    this.opts.onFocusSeat?.(seat);
+  }
+  /** Pan/zoom so a seat sits on-screen at a legible scale (for keyboard focus). */
+  ensureVisible(seat) {
+    const w = this.stage.width();
+    const h = this.stage.height();
+    const target = Math.max(this.stage.scaleX(), SEAT_LEGIBLE_SCALE * 1.2);
+    const p = this.worldToScreen(seat);
+    const margin = 70;
+    const offscreen = p.x < margin || p.x > w - margin || p.y < margin || p.y > h - margin;
+    if (this.stage.scaleX() < target || offscreen) {
+      const ip = this.isoT === 0 ? seat : this.isoForward(seat);
+      this.stage.scale({ x: target, y: target });
+      this.stage.position({ x: w / 2 - ip.x * target, y: h / 2 - ip.y * target });
+      this.afterViewChange();
+      this.stage.batchDraw();
+    }
+  }
+  zoomToFit() {
+    const w = this.stage.width();
+    const h = this.stage.height();
+    const b = this.bounds;
+    this.fitScale = Math.min(w / b.width, h / b.height) || 1;
+    const s = this.fitScale;
+    this.stage.scale({ x: s, y: s });
+    this.stage.position({
+      x: (w - b.width * s) / 2 - b.x * s,
+      y: (h - b.height * s) / 2 - b.y * s
+    });
+    this.afterViewChange();
+    this.stage.batchDraw();
+  }
+  zoomIn() {
+    const center = { x: this.stage.width() / 2, y: this.stage.height() / 2 };
+    this.zoomAbout(this.stage.scaleX() * _SeatmapRenderer.ZOOM_STEP, center);
+  }
+  zoomOut() {
+    const center = { x: this.stage.width() / 2, y: this.stage.height() / 2 };
+    this.zoomAbout(this.stage.scaleX() / _SeatmapRenderer.ZOOM_STEP, center);
+  }
+  seatCount() {
+    return this.seats.length;
+  }
+  worldToScreen(point) {
+    const s = this.stage.scaleX();
+    const p = this.isoT === 0 ? point : this.isoForward(point);
+    return { x: p.x * s + this.stage.x(), y: p.y * s + this.stage.y() };
+  }
+  setAccessibleFilter(on) {
+    this.setAccessibilityFilter(on ? [] : null);
+  }
+  setAccessibilityFilter(types) {
+    const next = types === null ? null : [...types];
+    if (this.sameAccessFilter(next)) return;
+    this.accessFilter = 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();
+    }
+  }
+  sameAccessFilter(next) {
+    const cur = this.accessFilter;
+    if (cur === null || next === null) return cur === next;
+    return cur.length === next.length && cur.every((t, i) => t === next[i]);
+  }
+  // ---- isometric ("3D") view mode -------------------------------------------
+  /**
+   * Switch the projection between flat top-down and the isometric "3D" view
+   * (rotate + y-squash about the chart centre, plus per-elevation lift). Tweens
+   * `isoT` 0⇄1 over ~0.32s (ease in-out); reduced-motion snaps. Purely visual —
+   * geometry stays flat, so hit-testing (Konva's own, plus the manual section
+   * inverse) keeps landing on the projected seats/sections.
+   */
+  setViewMode(mode) {
+    const target = mode === "isometric" ? 1 : 0;
+    this.isoTarget = target;
+    if (this.isoRaf) {
+      cancelAnimationFrame(this.isoRaf);
+      this.isoRaf = 0;
+    }
+    if (this.reducedMotion) {
+      this.isoT = target;
+      this.applyIso();
+      this.afterViewChange();
+      return;
+    }
+    const from = this.isoT;
+    if (from === target) {
+      this.applyIso();
+      this.afterViewChange();
+      return;
+    }
+    const start = performance.now();
+    const step = (now) => {
+      if (this.destroyed) return;
+      const raw = Math.min(1, (now - start) / ISO_TWEEN_MS);
+      const e = raw < 0.5 ? 4 * raw * raw * raw : 1 - Math.pow(-2 * raw + 2, 3) / 2;
+      this.isoT = from + (this.isoTarget - from) * e;
+      this.applyIso();
+      this.scheduleViewChange();
+      if (raw < 1) {
+        this.isoRaf = requestAnimationFrame(step);
+      } else {
+        this.isoT = this.isoTarget;
+        this.isoRaf = 0;
+        this.applyIso();
+        this.afterViewChange();
+      }
+    };
+    this.isoRaf = requestAnimationFrame(step);
+  }
+  /** Iso angle (rad) + y-squash for the current isoT. */
+  isoParams() {
+    return { th: ISO_ANGLE_DEG * Math.PI / 180 * this.isoT, sg: 1 - (1 - ISO_SQUASH) * this.isoT };
+  }
+  /** Effective vertical scale = stage scale × iso squash — legibility math uses this. */
+  effScale() {
+    return this.stage.scaleX() * (1 - (1 - ISO_SQUASH) * this.isoT);
+  }
+  /** Project a world point through the iso affine about the chart centre (→ iso-world). */
+  isoForward(p) {
+    const { th, sg } = this.isoParams();
+    const c = this.isoCentre;
+    const dx = p.x - c.x;
+    const dy = p.y - c.y;
+    const rx = dx * Math.cos(th) - dy * Math.sin(th);
+    const ry = (dx * Math.sin(th) + dy * Math.cos(th)) * sg;
+    return { x: c.x + rx, y: c.y + ry };
+  }
+  /** Inverse of isoForward (iso-world → world) for screen-space hit-testing. */
+  isoInverse(p) {
+    const { th, sg } = this.isoParams();
+    const c = this.isoCentre;
+    const dx = p.x - c.x;
+    const dy = p.y - c.y;
+    const uy = dy / sg;
+    const wx = dx * Math.cos(th) + uy * Math.sin(th);
+    const wy = -dx * Math.sin(th) + uy * Math.cos(th);
+    return { x: c.x + wx, y: c.y + wy };
+  }
+  /**
+   * Local-space offset that, once the layer applies the iso affine, lifts an
+   * object straight UP in iso-world by `elevation × LIFT_PER_STEP × isoT`
+   * (= inverse-linear of the pure vertical lift). Zero at isoT=0.
+   */
+  isoLiftLocal(elevation) {
+    const { th, sg } = this.isoParams();
+    const delta = elevation * LIFT_PER_STEP * this.isoT;
+    return { x: -(delta / sg) * Math.sin(th), y: -(delta / sg) * Math.cos(th) };
+  }
+  /** Restore the three layers to identity (flat) — byte-for-byte the original. */
+  resetLayerTransforms() {
+    for (const layer of [this.bgLayer, this.seatLayer, this.overlayLayer]) {
+      layer.position({ x: 0, y: 0 });
+      layer.offset({ x: 0, y: 0 });
+      layer.scale({ x: 1, y: 1 });
+      layer.rotation(0);
+      layer.skewX(0);
+      layer.skewY(0);
+    }
+  }
+  /**
+   * Apply the current isoT to the scene: the base rotate+squash as a decomposed
+   * layer transform (so seats/décor/rings project together and Konva's own
+   * hit-testing follows), upright counter-transforms on text, and the elevation
+   * lift + extruded side faces on elevated sections.
+   */
+  applyIso() {
+    const t = this.isoT;
+    if (t === 0) {
+      this.resetLayerTransforms();
+    } else {
+      const { th, sg } = this.isoParams();
+      const a = Math.cos(th);
+      const b = sg * Math.sin(th);
+      const cc = -Math.sin(th);
+      const d = sg * Math.cos(th);
+      const r = Math.sqrt(a * a + b * b);
+      const delta = a * d - b * cc;
+      const rotationDeg = Math.atan2(b, a) * 180 / Math.PI;
+      const scaleX = r;
+      const scaleY = delta / r;
+      const skewX = (a * cc + b * d) / delta;
+      const c = this.isoCentre;
+      for (const layer of [this.bgLayer, this.seatLayer, this.overlayLayer]) {
+        layer.position({ x: c.x, y: c.y });
+        layer.offset({ x: c.x, y: c.y });
+        layer.rotation(rotationDeg);
+        layer.scaleX(scaleX);
+        layer.scaleY(scaleY);
+        layer.skewX(skewX);
+        layer.skewY(0);
+      }
+    }
+    this.applyUprightLabels();
+    this.applyElevation();
+    this.bgLayer.batchDraw();
+    this.seatLayer.batchDraw();
+    this.overlayLayer.batchDraw();
+  }
+  /** Counter-skew every visible label so it renders upright at its projected anchor. */
+  applyUprightLabels() {
+    const thDeg = ISO_ANGLE_DEG * this.isoT;
+    const invScaleY = 1 / (1 - (1 - ISO_SQUASH) * this.isoT);
+    const layers = this.hasBoothText ? [this.bgLayer, this.seatLayer, this.overlayLayer] : [this.bgLayer, this.overlayLayer];
+    for (const layer of layers) {
+      const texts = layer.find("Text");
+      for (const tn of texts) {
+        let base = tn.getAttr("uprightBase");
+        if (base == null) {
+          base = tn.rotation();
+          tn.setAttr("uprightBase", base);
+        }
+        tn.rotation(base - thDeg);
+        tn.scaleX(1);
+        tn.scaleY(invScaleY);
+        tn.skewX(0);
+      }
+    }
+  }
+  /** Lift elevated sections (+ their members) and update their extruded side faces. */
+  applyElevation() {
+    const t = this.isoT;
+    for (const sec of this.sections) {
+      if (sec.elevation <= 0) continue;
+      const off = this.isoLiftLocal(sec.elevation);
+      sec.liftGroupBg?.position(off);
+      sec.liftGroupSeat?.position(off);
+      const alpha = 0.9 * t;
+      for (let i = 0; i < sec.sideFaces.length; i++) {
+        const face = sec.sideFaces[i];
+        const p0 = sec.outline[i];
+        const p1 = sec.outline[(i + 1) % sec.outline.length];
+        face.points([p0.x, p0.y, p1.x, p1.y, p1.x + off.x, p1.y + off.y, p0.x + off.x, p0.y + off.y]);
+        face.opacity(alpha);
+      }
+    }
+  }
+  destroy() {
+    this.destroyed = true;
+    if (this.rafId) cancelAnimationFrame(this.rafId);
+    if (this.isoRaf) cancelAnimationFrame(this.isoRaf);
+    if (this.viewChangeRaf) cancelAnimationFrame(this.viewChangeRaf);
+    if (this.recacheTimer) clearTimeout(this.recacheTimer);
+    this.resizeObs?.disconnect();
+    this.container.removeEventListener("pointerdown", this.onPointerDown);
+    this.container.removeEventListener("pointermove", this.onPointerMove);
+    this.container.removeEventListener("pointerup", this.onPointerEnd);
+    this.container.removeEventListener("pointercancel", this.onPointerEnd);
+    this.container.removeEventListener("keydown", this.onKeyDown);
+    this.stage.destroy();
+  }
+  // ---- rendering ------------------------------------------------------------
+  /** Theme font stack for all rendered text (falls back to Inter). */
+  labelFont() {
+    return this.theme.fontFamily || "Inter, sans-serif";
+  }
+  /**
+   * Where a seat's nodes live: an elevated section's lift group (so the whole
+   * tier shifts with one offset in iso view) or the seat layer directly.
+   */
+  seatContainer(id) {
+    return this.seatSection.get(id)?.liftGroupSeat ?? this.seatLayer;
+  }
+  renderSeats() {
+    for (const seat of this.seats) {
+      if (seat.kind === "booth") {
+        this.renderBoothUnit(seat);
+        continue;
+      }
+      const target = this.seatContainer(seat.id);
+      const c = new Circle({
+        x: seat.x,
+        y: seat.y,
+        radius: this.seatR,
+        perfectDrawEnabled: false,
+        shadowForStrokeEnabled: false,
+        hitStrokeWidth: 0
+      });
+      c.setAttr("seatId", seat.id);
+      this.circleById.set(seat.id, c);
+      this.paintSeat(c, seat.id);
+      target.add(c);
+      if (seat.accessible) {
+        const primary = seat.accessibility?.[0];
+        target.add(
+          new Circle({
+            x: seat.x,
+            y: seat.y,
+            radius: this.seatR + 1,
+            stroke: primary && ACCESS_RING[primary] || "#3b82f6",
+            strokeWidth: 2,
+            listening: false,
+            perfectDrawEnabled: false,
+            shadowForStrokeEnabled: false
+          })
+        );
+      }
+    }
+  }
+  /** A booth renders as a click-selectable rounded block (dims from the doc). */
+  renderBoothUnit(seat) {
+    const target = this.seatContainer(seat.id);
+    const dims = this.boothDims.get(seat.rowId) ?? { width: 40, height: 30, rotation: 0 };
+    const rect = new Rect({
+      x: seat.x,
+      y: seat.y,
+      width: dims.width,
+      height: dims.height,
+      offsetX: dims.width / 2,
+      offsetY: dims.height / 2,
+      rotation: dims.rotation,
+      cornerRadius: 4,
+      perfectDrawEnabled: false,
+      shadowForStrokeEnabled: false,
+      hitStrokeWidth: 0
+    });
+    rect.setAttr("seatId", seat.id);
+    this.circleById.set(seat.id, rect);
+    this.paintSeat(rect, seat.id);
+    target.add(rect);
+    const t = new Text({
+      x: seat.x,
+      y: seat.y,
+      text: seat.label,
+      fontSize: 10,
+      fontStyle: "600",
+      fontFamily: this.labelFont(),
+      fill: this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    t.offsetX(t.width() / 2);
+    t.offsetY(t.height() / 2);
+    this.hasBoothText = true;
+    target.add(t);
+  }
+  /** Apply fill/stroke/opacity for a seat's current status + selection. */
+  paintSeat(c, id) {
+    const seat = this.seatById.get(id);
+    const status = this.statusById.get(id) ?? "free";
+    const selected = this.selection.has(id);
+    const base = this.catColor.get(seat.categoryKey) ?? "#6e7bff";
+    c.dash([]);
+    c.strokeWidth(0);
+    c.stroke("");
+    c.opacity(1);
+    switch (status) {
+      case "free":
+        c.fill(selected ? lighten(base, 0.28) : base);
+        break;
+      case "held":
+        c.fill(HELD_FILL);
+        break;
+      case "booked":
+        c.fill(TAKEN_FILL);
+        c.opacity(0.45);
+        break;
+      case "not_for_sale":
+        c.fill(TAKEN_FILL);
+        c.stroke(NFS_STROKE);
+        c.strokeWidth(1);
+        c.dash([2, 2]);
+        break;
+    }
+    if (this.accessFilter && status === "free" && !selected && !seatMatchesAccess(seat, this.accessFilter)) {
+      c.opacity(0.25);
+    }
+    if (this.categoryHighlight && status === "free" && !selected && seat.categoryKey !== this.categoryHighlight) {
+      c.opacity(0.25);
+    }
+  }
+  /** Legend hover: highlight one category (dim the rest), or null to clear. */
+  setCategoryHighlight(key) {
+    if (this.categoryHighlight === key) return;
+    this.categoryHighlight = key;
+    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();
+    }
+  }
+  renderBackground(doc) {
+    if (doc.backgroundImage) this.renderBackgroundImage(doc.backgroundImage);
+    for (const obj of doc.objects) if (obj.type === "section") this.renderSection(obj);
+    this.renderZones(doc);
+    for (const obj of doc.objects) {
+      if (obj.type === "shape") {
+        this.renderShape(obj);
+      } else if (obj.type === "gaArea") {
+        this.renderGA(obj);
+      } else if (obj.type === "table") {
+        this.renderTable(obj);
+      } else if (obj.type === "text") {
+        this.renderText(obj);
+      }
+    }
+    const f = doc.focalPoint;
+    if (f) {
+      const size = 14;
+      const cross = new Group({ listening: false });
+      cross.add(
+        new Line({ points: [f.x - size, f.y, f.x + size, f.y], stroke: "#4b5563", strokeWidth: 1.5 }),
+        new Line({ points: [f.x, f.y - size, f.x, f.y + size], stroke: "#4b5563", strokeWidth: 1.5 }),
+        new Circle({ x: f.x, y: f.y, radius: 3, fill: "#4b5563" })
+      );
+      this.bgLayer.add(cross);
+    }
+  }
+  /** Organizer floor-plan photo, dimmed, at the very bottom of the bg layer. */
+  renderBackgroundImage(bg) {
+    const img = new window.Image();
+    img.onload = () => {
+      const natW = img.naturalWidth || 4;
+      const natH = img.naturalHeight || 3;
+      const w = bg.width;
+      const h = w * (natH / natW);
+      const node = new KImage({
+        image: img,
+        x: bg.center.x - w / 2,
+        y: bg.center.y - h / 2,
+        width: w,
+        height: h,
+        opacity: bg.opacity,
+        listening: false
+      });
+      this.bgLayer.add(node);
+      node.moveToBottom();
+      this.bgLayer.batchDraw();
+    };
+    img.src = bg.url;
+  }
+  renderTable(obj) {
+    if (obj.shape === "round") {
+      this.bgLayer.add(
+        new Circle({
+          x: obj.center.x,
+          y: obj.center.y,
+          radius: obj.radius ?? 40,
+          fill: "#232c40",
+          stroke: "#2a3348",
+          strokeWidth: 1.5,
+          listening: false
+        })
+      );
+    } else {
+      const w = obj.width ?? 80;
+      const h = obj.height ?? 50;
+      this.bgLayer.add(
+        new Rect({
+          x: obj.center.x,
+          y: obj.center.y,
+          width: w,
+          height: h,
+          offsetX: w / 2,
+          offsetY: h / 2,
+          rotation: obj.rotation,
+          fill: "#232c40",
+          stroke: "#2a3348",
+          strokeWidth: 1.5,
+          cornerRadius: 4,
+          listening: false
+        })
+      );
+    }
+    this.addCentredLabel(this.bgLayer, obj.label, obj.center.x, obj.center.y, "#cbd5e1", 12, true);
+  }
+  renderText(obj) {
+    this.bgLayer.add(
+      new Text({
+        x: obj.position.x,
+        y: obj.position.y,
+        text: obj.text,
+        fontSize: obj.fontSize,
+        rotation: obj.rotation,
+        fill: obj.color ?? this.theme.textColor ?? DEF_TEXT,
+        fontFamily: this.labelFont(),
+        listening: false,
+        perfectDrawEnabled: false
+      })
+    );
+  }
+  renderShape(obj) {
+    const fill = obj.fill ?? this.theme.decorFill ?? DEF_DECOR_FILL;
+    const isStage = obj.role === "stage";
+    const isDecor = !!obj.role && !isStage;
+    const stroke = isStage ? lighten(fill, 0.28) : void 0;
+    let cx = 0;
+    let cy = 0;
+    if (obj.kind === "rect" && obj.x != null && obj.y != null && obj.width != null && obj.height != null) {
+      const grad = isStage ? {
+        fillLinearGradientStartPoint: { x: 0, y: 0 },
+        fillLinearGradientEndPoint: { x: 0, y: obj.height },
+        fillLinearGradientColorStops: [0, darken(fill, 0.3), 1, lighten(fill, 0.12)]
+      } : { fill };
+      cx = obj.x + obj.width / 2;
+      cy = obj.y + obj.height / 2;
+      this.bgLayer.add(
+        new Rect({
+          x: cx,
+          y: cy,
+          offsetX: obj.width / 2,
+          offsetY: obj.height / 2,
+          rotation: obj.rotation ?? 0,
+          width: obj.width,
+          height: obj.height,
+          ...grad,
+          stroke,
+          strokeWidth: isStage ? 1 : 0,
+          cornerRadius: 4,
+          listening: false
+        })
+      );
+    } else if (obj.kind === "ellipse" && obj.x != null && obj.y != null && obj.width != null && obj.height != null) {
+      cx = obj.x + obj.width / 2;
+      cy = obj.y + obj.height / 2;
+      const grad = isStage ? {
+        fillLinearGradientStartPoint: { x: 0, y: -obj.height / 2 },
+        fillLinearGradientEndPoint: { x: 0, y: obj.height / 2 },
+        fillLinearGradientColorStops: [0, darken(fill, 0.3), 1, lighten(fill, 0.12)]
+      } : { fill };
+      this.bgLayer.add(
+        new Ellipse({ x: cx, y: cy, rotation: obj.rotation ?? 0, radiusX: obj.width / 2, radiusY: obj.height / 2, ...grad, stroke, strokeWidth: isStage ? 1 : 0, listening: false })
+      );
+    } else if (obj.kind === "polygon" && obj.points && obj.points.length) {
+      const pts = obj.points.flatMap((p) => [p.x, p.y]);
+      const b = polyBounds(obj.points);
+      cx = obj.points.reduce((a, p) => a + p.x, 0) / obj.points.length;
+      cy = obj.points.reduce((a, p) => a + p.y, 0) / obj.points.length;
+      const grad = isStage ? {
+        // Line points are absolute chart coords; the gradient endpoints share
+        // that space and rotate with the node (pivot at the centroid below).
+        fillLinearGradientStartPoint: { x: 0, y: b.y },
+        fillLinearGradientEndPoint: { x: 0, y: b.y + b.height },
+        fillLinearGradientColorStops: [0, darken(fill, 0.3), 1, lighten(fill, 0.12)]
+      } : { fill };
+      this.bgLayer.add(
+        new Line({ points: pts, closed: true, x: cx, y: cy, offsetX: cx, offsetY: cy, rotation: obj.rotation ?? 0, ...grad, stroke, strokeWidth: isStage ? 1 : 0, listening: false })
+      );
+    }
+    if (obj.label) {
+      if (isStage) this.addStageLabel(cx, cy, obj.label);
+      else if (isDecor) this.addCentredLabel(this.bgLayer, obj.label, cx, cy, "#9aa3b5", 12, false);
+      else this.addCentredLabel(this.bgLayer, obj.label, cx, cy, "#cbd5e1", 16, true);
+    }
+  }
+  /** Prominent stage caption: uppercase, letter-spaced, larger, softly dimmed. */
+  addStageLabel(x, y, text) {
+    const t = new Text({
+      x,
+      y,
+      text: text.toUpperCase(),
+      fontSize: 22,
+      fontStyle: "700",
+      letterSpacing: 4,
+      fontFamily: this.labelFont(),
+      fill: rgba("#e6e9f0", 0.62),
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    t.offsetX(t.width() / 2);
+    t.offsetY(t.height() / 2);
+    this.bgLayer.add(t);
+  }
+  renderGA(obj) {
+    const color = this.catColor.get(obj.categoryKey) ?? "#6e7bff";
+    const pts = obj.points.flatMap((p) => [p.x, p.y]);
+    const poly = new Line({
+      points: pts,
+      closed: true,
+      fill: color,
+      opacity: 0.22,
+      stroke: color,
+      strokeWidth: 1.5
+    });
+    poly.setAttr("gaId", obj.id);
+    poly.on("click tap", () => this.opts.onGAClick?.(obj.id));
+    poly.on("mouseenter", () => {
+      this.container.style.cursor = "pointer";
+    });
+    poly.on("mouseleave", () => {
+      this.container.style.cursor = "default";
+    });
+    this.bgLayer.add(poly);
+    const cx = obj.points.reduce((a, p) => a + p.x, 0) / obj.points.length;
+    const cy = obj.points.reduce((a, p) => a + p.y, 0) / obj.points.length;
+    this.addCentredLabel(this.bgLayer, obj.label, cx, cy - 8, "#e6e9f0", 15, false);
+    this.addCentredLabel(this.bgLayer, `cap ${obj.capacity}`, cx, cy + 10, "#8b93a7", 11, false);
+  }
+  /**
+   * A section renders in three coordinated layers driven by the LOD melt:
+   *   • a faint outline (the existing near-zoom look, untouched),
+   *   • a solid category-mix block that fades in at the block rung, and
+   *   • a name + "N LEFT" sublabel.
+   * Membership (which seats live inside the outline) + the mix fill + the live
+   * availability count are precomputed here (once), not per frame.
+   */
+  renderSection(obj) {
+    const pts = obj.outline.flatMap((p) => [p.x, p.y]);
+    const centroid = {
+      x: obj.outline.reduce((a, p) => a + p.x, 0) / obj.outline.length,
+      y: obj.outline.reduce((a, p) => a + p.y, 0) / obj.outline.length
+    };
+    const memberIds = [];
+    const catCounts = /* @__PURE__ */ new Map();
+    let free = 0;
+    for (const seat of this.seats) {
+      if (this.seatSection.has(seat.id)) continue;
+      if (!pointInPolygon(seat, obj.outline)) continue;
+      memberIds.push(seat.id);
+      catCounts.set(seat.categoryKey, (catCounts.get(seat.categoryKey) ?? 0) + 1);
+      if ((this.statusById.get(seat.id) ?? "free") === "free") free++;
+    }
+    const baseFill = obj.color ?? mixColors(
+      [...catCounts].map(([key, w]) => ({ hex: this.catColor.get(key) ?? "#6e7bff", w })),
+      "#3a4358"
+    );
+    const elevation = Math.max(0, Math.round(obj.elevation ?? 0));
+    let liftGroupBg = null;
+    let liftGroupSeat = null;
+    const sideFaces = [];
+    if (elevation > 0) {
+      const faceFill = darken(this.zoneColor.get(obj.zone ?? "") ?? baseFill, 0.42);
+      for (let i = 0; i < obj.outline.length; i++) {
+        const face = new Line({
+          points: [],
+          closed: true,
+          fill: faceFill,
+          stroke: rgba("#000000", 0.25),
+          strokeWidth: 1,
+          opacity: 0,
+          listening: false,
+          perfectDrawEnabled: false
+        });
+        sideFaces.push(face);
+        this.bgLayer.add(face);
+      }
+      liftGroupBg = new Group({ listening: false });
+      this.bgLayer.add(liftGroupBg);
+      liftGroupSeat = new Group({ listening: false });
+      this.seatLayer.add(liftGroupSeat);
+    }
+    const bgTarget = liftGroupBg ?? this.bgLayer;
+    const outlinePoly = new Line({
+      points: pts,
+      closed: true,
+      stroke: "#3a4358",
+      strokeWidth: 1.5,
+      fill: rgba(obj.color ?? "#3a4358", 0.06),
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    bgTarget.add(outlinePoly);
+    const blockPoly = new Line({
+      points: pts,
+      closed: true,
+      fill: baseFill,
+      stroke: rgba("#ffffff", 0.12),
+      strokeWidth: 1,
+      opacity: 0,
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    bgTarget.add(blockPoly);
+    const nameLabel = new Text({
+      x: centroid.x,
+      y: centroid.y,
+      text: obj.label,
+      fontSize: 22,
+      fontStyle: "700",
+      fontFamily: this.labelFont(),
+      fill: "#8b93a7",
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    nameLabel.offsetX(nameLabel.width() / 2);
+    nameLabel.offsetY(nameLabel.height() / 2);
+    bgTarget.add(nameLabel);
+    const subLabel = new Text({
+      x: centroid.x,
+      y: centroid.y,
+      text: `${free} LEFT`,
+      fontSize: 12,
+      fontStyle: "600",
+      fontFamily: "JetBrains Mono, ui-monospace, monospace",
+      fill: rgba("#e6e9f0", 0.8),
+      opacity: 0,
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    subLabel.offsetX(subLabel.width() / 2);
+    bgTarget.add(subLabel);
+    const sec = {
+      id: obj.id,
+      label: obj.label,
+      outline: obj.outline,
+      centroid,
+      zone: obj.zone,
+      memberIds,
+      total: memberIds.length,
+      free,
+      baseFill,
+      outlinePoly,
+      blockPoly,
+      nameLabel,
+      subLabel,
+      elevation,
+      liftGroupBg,
+      liftGroupSeat,
+      sideFaces
+    };
+    for (const id of memberIds) this.seatSection.set(id, sec);
+    this.refreshSectionFill(sec);
+    this.sections.push(sec);
+  }
+  /** 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.subLabel.text(`${sec.free} LEFT`);
+    sec.subLabel.offsetX(sec.subLabel.width() / 2);
+  }
+  /**
+   * 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
+   * when the doc declares no zones — sections then stay the far rung (graceful).
+   */
+  renderZones(doc) {
+    if (!doc.zones?.length || !this.sections.length) return;
+    const byZone = /* @__PURE__ */ new Map();
+    for (const sec of this.sections) {
+      if (!sec.zone) continue;
+      (byZone.get(sec.zone) ?? byZone.set(sec.zone, []).get(sec.zone)).push(sec);
+    }
+    for (const z of doc.zones) {
+      const members = byZone.get(z.id);
+      if (!members || !members.length) continue;
+      const cx = members.reduce((a, s) => a + s.centroid.x, 0) / members.length;
+      const cy = members.reduce((a, s) => a + s.centroid.y, 0) / members.length;
+      let minPrice = Infinity;
+      for (const sec of members) {
+        for (const id of sec.memberIds) {
+          const seat = this.seatById.get(id);
+          const p = seat && this.catPrice.get(seat.categoryKey);
+          if (typeof p === "number" && p < minPrice) minPrice = p;
+        }
+      }
+      const label = new Text({
+        x: cx,
+        y: cy,
+        text: z.label.toUpperCase(),
+        fontSize: 34,
+        fontStyle: "800",
+        letterSpacing: 2,
+        fontFamily: this.labelFont(),
+        fill: z.color ?? "#f2f4f8",
+        opacity: 0,
+        listening: false,
+        perfectDrawEnabled: false
+      });
+      label.offsetX(label.width() / 2);
+      label.offsetY(label.height() / 2);
+      this.bgLayer.add(label);
+      let sub = null;
+      if (isFinite(minPrice)) {
+        sub = new Text({
+          x: cx,
+          y: cy,
+          text: `FROM $${minPrice}`,
+          fontSize: 14,
+          fontStyle: "600",
+          fontFamily: "JetBrains Mono, ui-monospace, monospace",
+          fill: rgba("#e6e9f0", 0.75),
+          opacity: 0,
+          listening: false,
+          perfectDrawEnabled: false
+        });
+        sub.offsetX(sub.width() / 2);
+        this.bgLayer.add(sub);
+      }
+      this.zones.push({ id: z.id, label, sub });
+    }
+  }
+  /**
+   * THE MELT — a continuous, scale-driven cross-fade across the three rungs:
+   *   seats ⇄ section blocks ⇄ zone blocks.
+   * `blockT` ramps 0→1 as scale falls through [SECTION_PROMINENT, CACHE_THRESHOLD]
+   * so the solid fill is fully present exactly as seats become the cached bitmap
+   * and fade out; `zoneT` ramps 0→1 across [ZONE_PROMINENT, SECTION_PROMINENT] so
+   * per-section detail hands off to giant zone labels. Reduced-motion hard-swaps.
+   * Section/zone labels are scale-compensated to hold a roughly constant screen size.
+   */
+  applySectionLod(scale) {
+    let blockT;
+    let zoneT;
+    if (this.reducedMotion) {
+      blockT = scale <= SECTION_PROMINENT_SCALE ? 1 : 0;
+      zoneT = scale <= ZONE_PROMINENT_SCALE ? 1 : 0;
+    } else {
+      blockT = clamp((CACHE_THRESHOLD - scale) / (CACHE_THRESHOLD - SECTION_PROMINENT_SCALE), 0, 1);
+      zoneT = clamp((SECTION_PROMINENT_SCALE - scale) / (SECTION_PROMINENT_SCALE - ZONE_PROMINENT_SCALE), 0, 1);
+    }
+    if (!this.zones.length) zoneT = 0;
+    this.seatLayer.opacity(1 - blockT);
+    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;
+    for (const sec of this.sections) {
+      sec.blockPoly.opacity(BLOCK_FILL_ALPHA * blockT);
+      sec.nameLabel.fill(lerpColor("#8b93a7", "#f2f4f8", blockT));
+      sec.nameLabel.opacity(1 - zoneT);
+      sec.subLabel.opacity(blockT * (1 - zoneT));
+      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);
+      }
+    }
+    for (const zone of this.zones) {
+      zone.label.opacity(zoneT);
+      if (zone.sub) zone.sub.opacity(zoneT);
+      if (rescale) {
+        const cy = zone.label.y();
+        this.sizeLabel(zone.label, ZONE_LABEL_PX / sx, cy);
+        if (zone.sub) this.sizeLabel(zone.sub, ZONE_SUB_PX / sx, cy + ZONE_LABEL_PX / sx);
+      }
+    }
+    this.bgLayer.batchDraw();
+  }
+  /** Set a centred label's world fontSize (for a target screen px) and re-anchor it. */
+  sizeLabel(t, fontSize, y) {
+    t.fontSize(Math.max(1, fontSize));
+    t.offsetX(t.width() / 2);
+    t.offsetY(t.height() / 2);
+    t.y(y);
+  }
+  /**
+   * Map a container-relative screen point back to world coords. Inverts the
+   * stage (scale/pos) and, in iso view, the iso affine — so screen-space taps
+   * test against the flat world outlines/geometry. Identity-equivalent at isoT=0.
+   */
+  screenToWorld(clientPoint) {
+    const s = this.stage.scaleX();
+    const iso = { x: (clientPoint.x - this.stage.x()) / s, y: (clientPoint.y - this.stage.y()) / s };
+    return this.isoT === 0 ? iso : this.isoInverse(iso);
+  }
+  /** Section id under a container-relative screen point, or null (Slice 5 tap-to-zoom). */
+  sectionAt(clientPoint) {
+    if (!this.sections.length) return null;
+    const world = this.screenToWorld(clientPoint);
+    const hit = this.sections.find((sec) => pointInPolygon(world, sec.outline));
+    return hit ? hit.id : null;
+  }
+  /** Seat ids belonging to a section (Slice 5 section-summary card). */
+  sectionMembers(id) {
+    return this.sections.find((s) => s.id === id)?.memberIds.slice() ?? [];
+  }
+  addCentredLabel(layer, text, x, y, fill, fontSize, bold) {
+    const t = new Text({
+      x,
+      y,
+      text,
+      fontSize,
+      fontStyle: bold ? "700" : "500",
+      fontFamily: this.labelFont(),
+      fill,
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    t.offsetX(t.width() / 2);
+    t.offsetY(t.height() / 2);
+    layer.add(t);
+  }
+  // ---- selection ------------------------------------------------------------
+  isSelectable(id) {
+    const statuses = this.opts.selectableStatuses ?? ["free"];
+    return statuses.includes(this.statusById.get(id) ?? "free");
+  }
+  toggleSeat(id) {
+    if (this.selection.has(id)) {
+      this.setSelected(id, false);
+      const seat = this.seatById.get(id);
+      if (seat) this.opts.onDeselect?.(seat);
+    } else {
+      if (!this.isSelectable(id)) return;
+      if (this.selection.size >= this.opts.maxSelection) return;
+      this.setSelected(id, true);
+      const seat = this.seatById.get(id);
+      if (seat) this.opts.onSelect?.(seat);
+    }
+    this.overlayLayer.batchDraw();
+  }
+  setSelected(id, on, silent = false) {
+    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.theme.selectionColor ?? DEF_SELECTION,
+        strokeWidth: 3,
+        listening: false,
+        perfectDrawEnabled: false,
+        shadowForStrokeEnabled: false
+      });
+      this.selectionRings.set(id, ring);
+      this.overlayLayer.add(ring);
+    } else {
+      this.selection.delete(id);
+      const ring = this.selectionRings.get(id);
+      ring?.destroy();
+      this.selectionRings.delete(id);
+    }
+    if (c) {
+      this.paintSeat(c, id);
+      if (!silent && !this.cached) this.seatLayer.batchDraw();
+    }
+  }
+  // ---- interaction ----------------------------------------------------------
+  wireInteraction() {
+    this.seatLayer.on("click tap", (e) => {
+      if (this.moved > 8) return;
+      const id = seatIdOf(e.target);
+      if (id) this.toggleSeat(id);
+    });
+    this.seatLayer.on("mouseover", (e) => {
+      const id = seatIdOf(e.target);
+      if (!id) return;
+      const seat = this.seatById.get(id);
+      if (!seat) return;
+      this.hoverRing.position({ x: seat.x, y: seat.y });
+      this.hoverRing.visible(true);
+      this.overlayLayer.batchDraw();
+      this.container.style.cursor = "pointer";
+      this.opts.onHover?.(seat);
+    });
+    this.seatLayer.on("mouseout", () => {
+      this.hoverRing.visible(false);
+      this.overlayLayer.batchDraw();
+      this.container.style.cursor = "default";
+      this.opts.onHover?.(null);
+    });
+    this.stage.on("wheel", (e) => {
+      e.evt.preventDefault();
+      const r = this.container.getBoundingClientRect();
+      const pointer = { x: e.evt.clientX - r.left, y: e.evt.clientY - r.top };
+      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;
+      const pointer = this.stage.getPointerPosition();
+      if (!pointer) return;
+      if (this.sections.length) {
+        const world = this.screenToWorld(pointer);
+        const hit = this.sections.find((sn) => pointInPolygon(world, sn.outline));
+        if (hit) {
+          this.zoomToBounds(polyBounds(hit.outline));
+          return;
+        }
+      }
+      const target = Math.max(SEAT_LEGIBLE_SCALE * 1.2, this.stage.scaleX() * 2.5);
+      this.zoomAbout(target, pointer);
+    });
+  }
+  // ---- Pan & pinch (raw pointer events — mouse, touch and pen alike) --------
+  toLocal(e) {
+    const r = this.container.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+  }
+  /**
+   * Min is chart-relative (never lose the room); max is absolute so seats
+   * reach a readable size on any chart, however large the venue.
+   */
+  zoomBounds() {
+    return { min: 0.5 * this.fitScale, max: Math.max(10 * this.fitScale, 4) };
+  }
+  /** Zoom so `clientPoint` (stage-relative px) stays fixed under the cursor. */
+  zoomAbout(nextScale, clientPoint) {
+    const { min, max } = this.zoomBounds();
+    const scale = clamp(nextScale, min, max);
+    const old = this.stage.scaleX();
+    if (scale === old) return;
+    const worldX = (clientPoint.x - this.stage.x()) / old;
+    const worldY = (clientPoint.y - this.stage.y()) / old;
+    this.stage.scale({ x: scale, y: scale });
+    this.stage.position({
+      x: clientPoint.x - worldX * scale,
+      y: clientPoint.y - worldY * scale
+    });
+    this.afterViewChange();
+    this.stage.batchDraw();
+  }
+  /** Zoom + pan so world-rect `b` fills the viewport (with a small margin). */
+  zoomToBounds(b) {
+    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);
+    this.stage.scale({ x: scale, y: scale });
+    this.stage.position({
+      x: w / 2 - (b.x + b.width / 2) * scale,
+      y: h / 2 - (b.y + b.height / 2) * scale
+    });
+    this.afterViewChange();
+    this.stage.batchDraw();
+  }
+  /** Recompute LOD (cache/labels) after any pan/zoom settles. */
+  afterViewChange() {
+    this.updateLOD();
+    this.updateLabels();
+    this.scheduleViewChange();
+  }
+  /** rAF-coalesced `onViewChange` — at most one host callback per animation frame. */
+  scheduleViewChange() {
+    if (this.viewChangeRaf) return;
+    this.viewChangeRaf = requestAnimationFrame(() => {
+      this.viewChangeRaf = 0;
+      this.opts.onViewChange?.();
+    });
+  }
+  updateLOD() {
+    const scale = this.effScale();
+    if (this.hasSections) this.applySectionLod(scale);
+    const shouldCache = scale < CACHE_THRESHOLD;
+    if (shouldCache && !this.cached) {
+      this.cacheSeatLayer();
+    } else if (!shouldCache && this.cached) {
+      this.seatLayer.clearCache();
+      this.seatLayer.listening(true);
+      this.cached = false;
+      this.seatLayer.batchDraw();
+    }
+  }
+  cacheSeatLayer() {
+    const pr = clamp(this.stage.scaleX() * this.dpr, 0.15, 2);
+    this.seatLayer.clearCache();
+    this.seatLayer.cache({ pixelRatio: pr });
+    this.seatLayer.listening(false);
+    this.cached = true;
+    this.seatLayer.batchDraw();
+  }
+  updateLabels() {
+    const show = this.effScale() > LABEL_SCALE;
+    this.labelGroup.destroyChildren();
+    if (!show) {
+      this.overlayLayer.batchDraw();
+      return;
+    }
+    const s = this.stage.scaleX();
+    const x0 = -this.stage.x() / s;
+    const y0 = -this.stage.y() / s;
+    const x1 = (this.stage.width() - this.stage.x()) / s;
+    const y1 = (this.stage.height() - this.stage.y()) / s;
+    let count = 0;
+    for (const seat of this.seats) {
+      if (seat.x < x0 || seat.x > x1 || seat.y < y0 || seat.y > y1) continue;
+      const t = new Text({
+        x: seat.x,
+        y: seat.y,
+        text: seat.label,
+        fontSize: 7,
+        fontStyle: "600",
+        fontFamily: this.labelFont(),
+        fill: this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+        listening: false,
+        perfectDrawEnabled: false
+      });
+      const maxW = this.seatR * 2 - 3;
+      if (t.width() > maxW) t.fontSize(Math.max(4, 7 * maxW / t.width()));
+      if (t.fontSize() < 4.2) {
+        t.destroy();
+        continue;
+      }
+      t.offsetX(t.width() / 2);
+      t.offsetY(t.height() / 2);
+      this.labelGroup.add(t);
+      if (++count >= MAX_LABELS) break;
+    }
+    if (this.isoT > 0) this.applyUprightLabels();
+    this.overlayLayer.batchDraw();
+  }
+  handleResize() {
+    const w = this.container.clientWidth || 1;
+    const h = this.container.clientHeight || 1;
+    if (w === this.stage.width() && h === this.stage.height()) return;
+    this.stage.size({ width: w, height: h });
+    this.zoomToFit();
+  }
+  startFpsLoop() {
+    const tick = (now) => {
+      if (!this.lastFpsAt) this.lastFpsAt = now;
+      this.frames++;
+      const elapsed = now - this.lastFpsAt;
+      if (elapsed >= 1e3) {
+        this.opts.onFps?.(Math.round(this.frames * 1e3 / elapsed));
+        this.frames = 0;
+        this.lastFpsAt = now;
+      }
+      this.rafId = requestAnimationFrame(tick);
+    };
+    this.rafId = requestAnimationFrame(tick);
+  }
+};
+/** Step factor for the on-screen +/− buttons (B1) — same clamp path as pinch/wheel. */
+_SeatmapRenderer.ZOOM_STEP = 1.4;
+var SeatmapRenderer = _SeatmapRenderer;
+function createRenderer(container, opts) {
+  return new SeatmapRenderer(container, opts);
+}
+
+// src/picker/PickerController.ts
+var DEFAULT_MAX_SELECTION = 10;
+var MAX_BACKOFF_MS = 15e3;
+function errInfo(err) {
+  const e = err ?? {};
+  return { status: e.status, conflicts: e.conflicts, reason: e.reason };
+}
+function mapStatus(s) {
+  if (s === "blocked") return "not_for_sale";
+  if (s === "held" || s === "booked" || s === "free" || s === "not_for_sale") return s;
+  return "free";
+}
+var PickerController = class {
+  constructor(options) {
+    this.renderer = null;
+    this._doc = null;
+    /** label ⇄ id maps — backend speaks labels, the engine speaks ids. */
+    this.labelToId = /* @__PURE__ */ new Map();
+    this.labelToSeat = /* @__PURE__ */ new Map();
+    this.allIds = [];
+    // realtime socket
+    this.ws = null;
+    this.reconnectTimer = null;
+    this.attempt = 0;
+    this.closed = false;
+    // hold state
+    this.hold_ = null;
+    this.expiryTimer = null;
+    this.opts = options;
+    this.api = options.transport;
+    this.key = options.eventKey;
+    this.maxSelection = options.maxSelection ?? DEFAULT_MAX_SELECTION;
+  }
+  get doc() {
+    return this._doc;
+  }
+  currentHold() {
+    return this.hold_;
+  }
+  getRenderer() {
+    return this.renderer;
+  }
+  seatByLabel(label) {
+    return this.labelToSeat.get(label);
+  }
+  idForLabel(label) {
+    return this.labelToId.get(label);
+  }
+  /** Fetch chart, build label maps, mount the renderer, seed statuses, go live. */
+  async render(host) {
+    if (this.renderer) return null;
+    this.closed = false;
+    let res;
+    try {
+      res = await this.api.chart(this.key);
+    } catch (err) {
+      this.emitError(err);
+      return null;
+    }
+    if (this.closed) return null;
+    this._doc = res.doc;
+    this.labelToId = /* @__PURE__ */ new Map();
+    this.labelToSeat = /* @__PURE__ */ new Map();
+    this.allIds = [];
+    for (const s of expandChart(res.doc)) {
+      this.labelToId.set(s.label, s.id);
+      this.labelToSeat.set(s.label, s);
+      this.allIds.push(s.id);
+    }
+    const renderer = createRenderer(host, {
+      maxSelection: this.maxSelection,
+      confirmSelection: this.opts.confirmSelection,
+      onSelect: (seat) => {
+        this.opts.onSelect?.(seat);
+        this.emitSelectionChange();
+      },
+      onDeselect: (seat) => {
+        this.opts.onDeselect?.(seat);
+        this.emitSelectionChange();
+      },
+      onHover: this.opts.onHover,
+      onFocusSeat: this.opts.onFocusSeat,
+      onViewChange: this.opts.onViewChange,
+      onGAClick: this.opts.onGAClick,
+      onFps: this.opts.onFps
+    });
+    if (this.closed) {
+      renderer.destroy();
+      return null;
+    }
+    this.renderer = renderer;
+    renderer.setChart(res.doc);
+    await this.resnapshot();
+    this.connect();
+    return {
+      doc: res.doc,
+      salesClosed: !!res.event.salesClosed,
+      eventName: res.event.name,
+      venue: res.event.venue,
+      startsAt: res.event.startsAt
+    };
+  }
+  // ---- selection ------------------------------------------------------------
+  getSelection() {
+    if (!this.renderer) return [];
+    return this.renderer.getSelection().map((s) => this.toSeat(s));
+  }
+  clearSelection() {
+    this.renderer?.clearSelection();
+    this.emitSelectionChange();
+  }
+  deselect(ids) {
+    this.renderer?.deselect(ids);
+    this.emitSelectionChange();
+  }
+  // ---- booking machine ------------------------------------------------------
+  /**
+   * Hold the current selection (or a given label set). The controller does the
+   * renderer/hold side (409 → deselect + repaint the taken seats held) and then
+   * re-throws so the caller can choose the banner copy. Returns null only when
+   * there's nothing to hold.
+   */
+  async hold(labelsArg) {
+    const r = this.renderer;
+    if (!r) return null;
+    const labels = labelsArg ?? r.getSelection().map((s) => s.label);
+    if (!labels.length) return null;
+    if (this.hold_ && this.holdCovers(labels)) return this.hold_;
+    try {
+      const result = await this.api.hold(this.key, labels);
+      this.setHold({ holdId: result.holdId, labels: [...labels], expiresAt: result.expiresAt });
+      return this.hold_;
+    } catch (err) {
+      this.handle409Conflicts(err);
+      throw err;
+    }
+  }
+  /** Server-picks `qty` best free seats and holds them atomically. Throws on failure. */
+  async bestAvailable(qty, categoryKey) {
+    const r = this.renderer;
+    if (!r) return null;
+    if (this.hold_) await this.release();
+    try {
+      const result = await this.api.bestAvailable(this.key, qty, categoryKey);
+      r.clearSelection();
+      const ids = result.labels.map((l) => this.labelToId.get(l)).filter((v) => !!v);
+      if (ids.length) r.setStatus(ids, "held");
+      this.setHold({ holdId: result.holdId, labels: [...result.labels], expiresAt: result.expiresAt });
+      const seats = result.labels.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;
+    }
+  }
+  /**
+   * Complete a booking. Requires a transport that supports book() (the SDK
+   * deliberately does not). `bookingRef` MUST be a real reference from the caller.
+   * `labelsArg` lets the caller book its own cart (the live page's confirm-flow
+   * cart can hold best-available seats that aren't in the renderer selection);
+   * defaults to the renderer selection. Reuses an existing exact-match hold, else
+   * holds first. Returns the labels booked, or null on failure (conflicts painted).
+   */
+  async book(bookingRef, labelsArg) {
+    const r = this.renderer;
+    if (!r) return null;
+    if (!this.api.book) throw new Error("picker: transport has no book() \u2014 hold-only mode");
+    const labels = labelsArg ?? r.getSelection().map((s) => s.label);
+    if (!labels.length) return null;
+    let holdId;
+    try {
+      if (this.hold_ && this.holdCovers(labels)) {
+        holdId = this.hold_.holdId;
+      } else {
+        const h = await this.api.hold(this.key, labels);
+        holdId = h.holdId;
+        this.setHold({ holdId, labels: [...labels], expiresAt: h.expiresAt });
+      }
+      await this.api.book(this.key, labels, holdId, bookingRef);
+    } catch (err) {
+      const { status, conflicts, reason } = errInfo(err);
+      this.clearHold();
+      if (status === 409 && reason === "event_closed") {
+        this.opts.onSalesClosed?.();
+      } else if (status === 409 && conflicts?.length) {
+        const takenLabels = new Set(conflicts.map((c) => c.label));
+        const takenIds = [...takenLabels].map((l) => this.labelToId.get(l)).filter((v) => !!v);
+        if (takenIds.length) {
+          r.setStatus(takenIds, "booked");
+          r.deselect(takenIds);
+        }
+        const stillFree = labels.filter((l) => !takenLabels.has(l));
+        if (stillFree.length && holdId) void this.api.release(this.key, stillFree, holdId).catch(() => {
+        });
+        this.emitSelectionChange();
+      } else if (holdId) {
+        void this.api.release(this.key, labels, holdId).catch(() => {
+        });
+      }
+      throw err;
+    }
+    const ids = labels.map((l) => this.labelToId.get(l)).filter((v) => !!v);
+    if (ids.length) {
+      r.setStatus(ids, "booked");
+      r.deselect(ids);
+    }
+    this.clearHold();
+    this.emitSelectionChange();
+    this.opts.onBook?.(bookingRef);
+    return labels;
+  }
+  /** 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");
+    try {
+      await this.api.release(this.key, hold.labels, hold.holdId);
+    } catch (err) {
+      this.emitError(err);
+    }
+  }
+  /**
+   * Release just some labels from the open hold, keeping the rest held (used when
+   * a buyer removes one seat chip). Clears the hold entirely once it empties.
+   */
+  async releaseLabels(labels) {
+    const hold = this.hold_;
+    if (!hold) return;
+    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");
+    try {
+      await this.api.release(this.key, drop, hold.holdId);
+    } catch (err) {
+      this.emitError(err);
+    }
+  }
+  // ---- renderer proxies (so consumers don't reach through) ------------------
+  setStatus(ids, status) {
+    this.renderer?.setStatus(ids, status);
+  }
+  getStatus(id) {
+    return this.renderer?.getStatus(id);
+  }
+  flashSeat(id, color) {
+    this.renderer?.flashSeat(id, color);
+  }
+  zoomIn() {
+    this.renderer?.zoomIn();
+  }
+  zoomOut() {
+    this.renderer?.zoomOut();
+  }
+  zoomToFit() {
+    this.renderer?.zoomToFit();
+  }
+  worldToScreen(p) {
+    return this.renderer?.worldToScreen(p) ?? { x: 0, y: 0 };
+  }
+  setAccessibilityFilter(types) {
+    this.renderer?.setAccessibilityFilter?.(types);
+  }
+  destroy() {
+    this.closed = true;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    if (this.expiryTimer) {
+      clearTimeout(this.expiryTimer);
+      this.expiryTimer = null;
+    }
+    if (this.ws) {
+      try {
+        this.ws.close();
+      } catch {
+      }
+      this.ws = null;
+    }
+    this.renderer?.destroy();
+    this.renderer = null;
+  }
+  // ---- internals ------------------------------------------------------------
+  toSeat(s) {
+    return { id: s.id, label: s.label, categoryKey: s.categoryKey, price: this.priceFor(s.categoryKey) };
+  }
+  priceFor(categoryKey) {
+    return this._doc?.categories.find((c) => c.key === categoryKey)?.price ?? 0;
+  }
+  emitSelectionChange() {
+    this.opts.onSelectionChange?.(this.getSelection());
+  }
+  emitError(err) {
+    if (this.opts.onError) this.opts.onError(err);
+    else console.error("[picker]", err);
+  }
+  holdCovers(labels) {
+    const h = this.hold_;
+    return !!h && h.labels.length === labels.length && labels.every((l) => h.labels.includes(l));
+  }
+  handle409Conflicts(err) {
+    const { status, conflicts } = errInfo(err);
+    if (status !== 409 || !conflicts?.length) return;
+    const r = this.renderer;
+    if (!r) return;
+    const takenIds = conflicts.map((c) => this.labelToId.get(c.label)).filter((v) => !!v);
+    if (takenIds.length) {
+      r.deselect(takenIds);
+      r.setStatus(takenIds, "held");
+    }
+    this.emitSelectionChange();
+  }
+  /** Set the open hold + (re)arm the server-authoritative expiry timer. */
+  setHold(hold) {
+    this.hold_ = hold;
+    if (this.expiryTimer) clearTimeout(this.expiryTimer);
+    const ms = Math.max(0, hold.expiresAt - Date.now());
+    this.expiryTimer = setTimeout(() => this.onHoldExpired(), ms);
+    this.opts.onHold?.(hold);
+  }
+  clearHold() {
+    this.hold_ = null;
+    if (this.expiryTimer) {
+      clearTimeout(this.expiryTimer);
+      this.expiryTimer = null;
+    }
+  }
+  onHoldExpired() {
+    const hold = this.hold_;
+    this.clearHold();
+    if (hold) {
+      const ids = hold.labels.map((l) => this.labelToId.get(l)).filter((v) => !!v);
+      if (ids.length) this.renderer?.setStatus(ids, "free");
+    }
+    this.opts.onHoldExpired?.();
+  }
+  applySeatsMap(seats) {
+    const r = this.renderer;
+    if (!r) return;
+    if (this.allIds.length) r.setStatus(this.allIds, "free");
+    const byStatus = { free: [], held: [], booked: [], not_for_sale: [] };
+    for (const [label, st] of Object.entries(seats)) {
+      const id = this.labelToId.get(label);
+      if (id) byStatus[mapStatus(st)].push(id);
+    }
+    ["held", "booked", "not_for_sale"].forEach((st) => {
+      if (byStatus[st].length) r.setStatus(byStatus[st], st);
+    });
+    this.opts.onStatusChange?.();
+  }
+  async resnapshot() {
+    try {
+      const objs = await this.api.objects(this.key);
+      this.applySeatsMap(objs.seats);
+    } catch {
+    }
+  }
+  // ---- realtime socket ------------------------------------------------------
+  connect() {
+    if (this.closed) return;
+    let ws;
+    try {
+      ws = new WebSocket(this.api.socketUrl(this.key));
+    } catch {
+      this.scheduleReconnect();
+      return;
+    }
+    this.ws = ws;
+    ws.onopen = () => {
+      this.attempt = 0;
+      void this.resnapshot();
+    };
+    ws.onmessage = (e) => {
+      let msg;
+      try {
+        msg = JSON.parse(typeof e.data === "string" ? e.data : "");
+      } catch {
+        return;
+      }
+      const r = this.renderer;
+      if (!r || !msg || typeof msg !== "object") return;
+      const m = msg;
+      if (m.seats && typeof m.seats === "object") {
+        this.applySeatsMap(m.seats);
+      } else if (Array.isArray(m.changes)) {
+        for (const ch of m.changes) {
+          const id = this.labelToId.get(ch.label);
+          if (!id) continue;
+          const next = mapStatus(ch.status);
+          if (this.opts.flashOnLiveChange && next !== "free" && r.getStatus(id) === "free" && !this.hold_?.labels.includes(ch.label)) {
+            r.flashSeat(id);
+          }
+          r.setStatus([id], next);
+        }
+        this.opts.onStatusChange?.();
+      }
+    };
+    ws.onclose = () => {
+      if (this.ws === ws) this.ws = null;
+      this.scheduleReconnect();
+    };
+    ws.onerror = () => {
+      try {
+        ws.close();
+      } catch {
+      }
+    };
+  }
+  scheduleReconnect() {
+    if (this.closed || this.reconnectTimer) return;
+    const attempt = Math.min(this.attempt++, 5);
+    const delay = Math.min(1e3 * 2 ** attempt, MAX_BACKOFF_MS);
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, delay);
+  }
+};
+export {
+  ACCESSIBILITY_TYPES,
+  CHART_STORAGE_KEY,
+  PickerController,
+  SeatmapRenderer,
+  accessibilityMeta,
+  chartBounds,
+  createRenderer,
+  expandBooth,
+  expandChart,
+  expandRow,
+  expandRowSlots,
+  expandTable,
+  layerOf,
+  objectCenter,
+  pointInPolygon
+};
+//# sourceMappingURL=index.js.map