@seatlayer/core 0.16.1 → 0.18.0

package/dist/index.js

@@ -12,6 +12,21 @@ var ACCESSIBILITY_LABEL = new Map(ACCESSIBILITY_TYPES.map((a) => [a.key, a]));
 function accessibilityMeta(key) {
   return ACCESSIBILITY_LABEL.get(key);
 }
+var ACCESSIBILITY_RING_COLOR = {
+  wheelchair: "#3b82f6",
+  companion: "#8b5cf6",
+  "semi-ambulatory": "#0ea5e9",
+  hearing: "#14b8a6",
+  "sign-language": "#f59e0b",
+  "plus-size": "#ec4899",
+  "lift-armrest": "#22c55e"
+};
+function accessibilityRingColor(types) {
+  const primary = types?.[0];
+  return primary && ACCESSIBILITY_RING_COLOR[primary] || "#3b82f6";
+}
+var LABEL_STYLE_MIN_SIZE = 8;
+var LABEL_STYLE_MAX_SIZE = 24;
 function layerOf(obj) {
   switch (obj.type) {
     case "row":
@@ -31,6 +46,71 @@ function layerOf(obj) {
 }
 var CHART_STORAGE_KEY = "seatmap.chart";
 
+// src/core/complexGeometry.ts
+function cubicPoint(path, t2) {
+  const u = 1 - t2;
+  const a = u * u * u;
+  const b = 3 * u * u * t2;
+  const c = 3 * u * t2 * t2;
+  const d = t2 * t2 * t2;
+  return {
+    x: a * path.start.x + b * path.control1.x + c * path.control2.x + d * path.end.x,
+    y: a * path.start.y + b * path.control1.y + c * path.control2.y + d * path.end.y
+  };
+}
+function distributeAlongCubic(path, count, resolution = 192) {
+  if (!Number.isInteger(count) || count < 1) throw new Error("Path point count must be a positive integer");
+  if (count === 1) return [cubicPoint(path, 0.5)];
+  const samples = Array.from({ length: resolution + 1 }, (_, index) => cubicPoint(path, index / resolution));
+  const lengths = new Float64Array(samples.length);
+  for (let index = 1; index < samples.length; index += 1) {
+    const dx = samples[index].x - samples[index - 1].x;
+    const dy = samples[index].y - samples[index - 1].y;
+    lengths[index] = lengths[index - 1] + Math.hypot(dx, dy);
+  }
+  const total = lengths[lengths.length - 1];
+  if (total <= 1e-9) return Array.from({ length: count }, () => ({ ...path.start }));
+  const output = [];
+  let segment = 1;
+  for (let index = 0; index < count; index += 1) {
+    const target = total * index / (count - 1);
+    while (segment < lengths.length - 1 && lengths[segment] < target) segment += 1;
+    const before = lengths[segment - 1];
+    const after = lengths[segment];
+    const ratio = after === before ? 0 : (target - before) / (after - before);
+    output.push({
+      x: samples[segment - 1].x + (samples[segment].x - samples[segment - 1].x) * ratio,
+      y: samples[segment - 1].y + (samples[segment].y - samples[segment - 1].y) * ratio
+    });
+  }
+  return output;
+}
+
+// src/core/sectionPath.ts
+var TAU = Math.PI * 2;
+function translateSectionOutlinePath(path, dx, dy) {
+  const translate = (point) => ({ x: point.x + dx, y: point.y + dy });
+  return transformSectionOutlinePath(path, translate);
+}
+function transformSectionOutlinePath(path, transform, radiusScale = 1, reflected = false) {
+  return {
+    ...path,
+    start: transform(path.start),
+    segments: path.segments.map((segment) => segment.kind === "line" ? { ...segment, end: transform(segment.end) } : segment.kind === "arc" ? {
+      ...segment,
+      center: transform(segment.center),
+      radius: segment.radius * Math.abs(radiusScale),
+      clockwise: reflected ? !segment.clockwise : segment.clockwise,
+      end: transform(segment.end)
+    } : {
+      ...segment,
+      control1: transform(segment.control1),
+      control2: transform(segment.control2),
+      end: transform(segment.end)
+    })
+  };
+}
+
 // src/core/layout.ts
 function overrideAccessibility(o) {
   if (!o) return [];
@@ -52,6 +132,7 @@ function place(lx, ly, deg, origin) {
 function rowSeatPositions(row) {
   const { seatCount, seatSpacing, curve, rotation, origin } = row;
   const out = [];
+  if (row.path) return distributeAlongCubic(row.path, seatCount);
   if (seatCount <= 1) {
     if (seatCount === 1) out.push({ x: origin.x, y: origin.y });
     return out;
@@ -92,15 +173,21 @@ function expandRowSlots(row) {
   return rowSeatPositions(row).map((p, i) => {
     const o = ov.get(i);
     const accessibility = overrideAccessibility(o);
+    const inventoryLabel = o?.label ?? `${row.label}-${seatNumber(i)}`;
+    const displayPrefix = row.displayLabel ?? row.label;
+    const commercial = { ...row.commercial, ...o?.commercial };
     return {
       index: i,
       x: p.x + (o?.dx ?? 0),
       y: p.y + (o?.dy ?? 0),
-      label: o?.label ?? `${row.label}-${seatNumber(i)}`,
+      label: inventoryLabel,
+      displayLabel: o?.displayLabel ?? `${displayPrefix}-${seatNumber(i)}`,
       categoryKey: o?.categoryKey ?? row.categoryKey,
       skipped: !!o?.skip,
       accessible: accessibility.length > 0,
-      accessibility
+      accessibility,
+      commercial: Object.values(commercial).some((value) => value !== void 0 && value !== false && value !== "") ? commercial : void 0,
+      viewUrl: o?.viewFromSeatUrl ?? row.viewFromSeatUrl
     };
   });
 }
@@ -111,13 +198,15 @@ function expandRow(row) {
     seats.push({
       id: `${row.id}:${slot.index}`,
       label: slot.label,
+      displayLabel: slot.displayLabel === slot.label ? void 0 : slot.displayLabel,
       x: slot.x,
       y: slot.y,
       rowId: row.id,
       categoryKey: slot.categoryKey,
       accessible: slot.accessible || void 0,
       accessibility: slot.accessibility.length ? slot.accessibility : void 0,
-      viewUrl: row.viewFromSeatUrl
+      commercial: slot.commercial,
+      viewUrl: slot.viewUrl
     });
   }
   return seats;
@@ -214,6 +303,53 @@ function pointInPolygon(p, poly) {
   }
   return inside;
 }
+function pointOnPolygonBoundary(p, poly) {
+  return poly.some((start, index) => {
+    const end = poly[(index + 1) % poly.length];
+    const cross = (p.y - start.y) * (end.x - start.x) - (p.x - start.x) * (end.y - start.y);
+    if (Math.abs(cross) > 1e-7) return false;
+    const dot = (p.x - start.x) * (end.x - start.x) + (p.y - start.y) * (end.y - start.y);
+    const lengthSquared = (end.x - start.x) ** 2 + (end.y - start.y) ** 2;
+    return dot >= -1e-7 && dot <= lengthSquared + 1e-7;
+  });
+}
+function pointInPolygonWithHoles(p, outer, holes) {
+  return pointInPolygon(p, outer) && !(holes ?? []).some((hole) => pointInPolygon(p, hole) || pointOnPolygonBoundary(p, hole));
+}
+function polygonLabelPoint(outer, holes) {
+  if (!outer.length) return { x: 0, y: 0 };
+  const xs = outer.map((point) => point.x);
+  const ys = outer.map((point) => point.y);
+  const bounds = { minX: Math.min(...xs), maxX: Math.max(...xs), minY: Math.min(...ys), maxY: Math.max(...ys) };
+  const centroid = polygonCentroid(outer);
+  if (pointInPolygonWithHoles(centroid, outer, holes)) return centroid;
+  let best = outer[0];
+  let bestScore = -Infinity;
+  const rings = [outer, ...holes ?? []];
+  for (let row = 1; row < 24; row += 1) {
+    for (let column = 1; column < 24; column += 1) {
+      const point = {
+        x: bounds.minX + (bounds.maxX - bounds.minX) * column / 24,
+        y: bounds.minY + (bounds.maxY - bounds.minY) * row / 24
+      };
+      if (!pointInPolygonWithHoles(point, outer, holes)) continue;
+      const score = Math.min(...rings.flatMap((ring) => ring.map((start, index) => {
+        const end = ring[(index + 1) % ring.length];
+        const dx = end.x - start.x;
+        const dy = end.y - start.y;
+        const denominator = dx * dx + dy * dy;
+        const projection = denominator ? ((point.x - start.x) * dx + (point.y - start.y) * dy) / denominator : 0;
+        const t2 = Math.max(0, Math.min(1, projection));
+        return Math.hypot(point.x - (start.x + t2 * dx), point.y - (start.y + t2 * dy));
+      })));
+      if (score > bestScore) {
+        best = point;
+        bestScore = score;
+      }
+    }
+  }
+  return best;
+}
 function polygonCentroid(pts) {
   if (!pts.length) return { x: 0, y: 0 };
   let x = 0;
@@ -277,9 +413,14 @@ function translateObject(o, dx, dy) {
     case "booth":
       return { ...o, center: p(o.center) };
     case "gaArea":
-      return { ...o, points: pts(o.points) };
+      return { ...o, points: pts(o.points), ...o.holes ? { holes: o.holes.map(pts) } : {} };
     case "section":
-      return { ...o, outline: pts(o.outline) };
+      return {
+        ...o,
+        outline: pts(o.outline),
+        ...o.outlinePath ? { outlinePath: translateSectionOutlinePath(o.outlinePath, dx, dy) } : {},
+        ...o.holes ? { holes: o.holes.map(pts) } : {}
+      };
     case "text":
       return { ...o, position: p(o.position) };
     case "shape":
@@ -402,12 +543,33 @@ function objectSeatLabels(o) {
 function isSeatObject(o) {
   return o.type === "row" || o.type === "table" || o.type === "booth" || o.type === "gaArea";
 }
+function samePoints(left, right) {
+  return left.length === right.length && left.every((point, index) => point.x === right[index].x && point.y === right[index].y);
+}
+function sameGASurfaceAsSection(object, section) {
+  if (object.type !== "gaArea" || !samePoints(object.points, section.outline)) return false;
+  const objectHoles = object.holes ?? [];
+  const sectionHoles = section.holes ?? [];
+  return objectHoles.length === sectionHoles.length && objectHoles.every((hole, index) => samePoints(hole, sectionHoles[index]));
+}
 function computeSections(doc) {
   const objs = allObjects(doc);
   const sectionObjs = objs.filter((o) => o.type === "section");
   const nodes = /* @__PURE__ */ new Map();
   for (const s of sectionObjs) {
-    nodes.set(s.id, { id: s.id, label: s.label || "Section", zone: s.zone, seatCount: 0, objectIds: [], seatLabels: [] });
+    const logicalId = s.logicalSectionId ?? s.id;
+    const existing = nodes.get(logicalId);
+    if (existing) {
+      continue;
+    }
+    nodes.set(logicalId, {
+      id: logicalId,
+      label: s.displayLabel || s.label || "Section",
+      zone: s.zone,
+      seatCount: 0,
+      objectIds: [],
+      seatLabels: []
+    });
   }
   const ungrouped = { id: UNGROUPED_ID, label: "Other seats", seatCount: 0, objectIds: [], seatLabels: [] };
   const objectToSection = /* @__PURE__ */ new Map();
@@ -415,22 +577,24 @@ function computeSections(doc) {
     if (!isSeatObject(obj)) continue;
     const labels = objectSeatLabels(obj);
     if (labels.length === 0) continue;
+    const referencedLogicalId = obj.referenceInventorySource?.logicalSectionId;
     const c = objectCenter(obj);
-    const owner = sectionObjs.find((s) => pointInPolygon(c, s.outline));
-    const node = owner ? nodes.get(owner.id) : ungrouped;
+    const referencedOwner = referencedLogicalId ? sectionObjs.find((section) => (section.logicalSectionId ?? section.id) === referencedLogicalId && (sameGASurfaceAsSection(obj, section) || pointInPolygonWithHoles(c, section.outline, section.holes))) : void 0;
+    const owner = referencedOwner ?? sectionObjs.find((s) => pointInPolygonWithHoles(c, s.outline, s.holes));
+    const node = owner ? nodes.get(owner.logicalSectionId ?? owner.id) : ungrouped;
     node.seatCount += labels.length;
     node.objectIds.push(obj.id);
     node.seatLabels.push(...labels);
     objectToSection.set(obj.id, node.id);
   }
   return {
-    sections: sectionObjs.map((s) => nodes.get(s.id)),
+    sections: [...nodes.values()],
     ungrouped: ungrouped.objectIds.length ? ungrouped : null,
     objectToSection
   };
 }
 function isSectionHidden(s, hidden) {
-  return hidden.has(s.id) || !!s.zone && hidden.has(s.zone);
+  return hidden.has(s.id) || !!s.logicalSectionId && hidden.has(s.logicalSectionId) || !!s.zone && hidden.has(s.zone);
 }
 function hiddenObjectIds(doc, hidden) {
   const out = /* @__PURE__ */ new Set();
@@ -483,6 +647,61 @@ 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";
+import { Shape } from "konva/lib/Shape";
+
+// src/core/chartRenderRules.ts
+var SEAT_LABEL_FONT_SIZE = 7;
+var BOOTH_LABEL_FONT_SIZE = 10;
+var GA_LABEL_FONT_SIZE = 15;
+var GA_CAPACITY_LABEL_FONT_SIZE = 11;
+var GA_FILL_OPACITY = 0.85;
+var MIN_VISIBLE_BOOKABLE_LABEL_PX = 12;
+var SMALL_TEXT_CONTRAST = 4.5;
+var DARK_BOOKABLE_LABEL_INK = "#000000";
+var LIGHT_BOOKABLE_LABEL_INK = "#ffffff";
+function isBookableLabelLegibleAtScale(fontSize, effectiveScale) {
+  return fontSize * effectiveScale >= MIN_VISIBLE_BOOKABLE_LABEL_PX;
+}
+function bookableMarkerLabel(publicLabel) {
+  return /-(\d{1,5})$/.exec(publicLabel)?.[1] ?? publicLabel;
+}
+function luminance(value) {
+  const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
+  if (!match) return null;
+  const channel = (offset) => {
+    const encoded = Number.parseInt(match[1].slice(offset, offset + 2), 16) / 255;
+    return encoded <= 0.04045 ? encoded / 12.92 : ((encoded + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(0) + 0.7152 * channel(2) + 0.0722 * channel(4);
+}
+function renderedTextContrast(ink, fill) {
+  const inkLuminance = luminance(ink);
+  const fillLuminance = luminance(fill);
+  if (inkLuminance == null || fillLuminance == null) return null;
+  return (Math.max(inkLuminance, fillLuminance) + 0.05) / (Math.min(inkLuminance, fillLuminance) + 0.05);
+}
+function rgb(value) {
+  const match = /^#([0-9a-f]{6})$/i.exec(value.trim());
+  if (!match) return null;
+  const packed = Number.parseInt(match[1], 16);
+  return [packed >> 16 & 255, packed >> 8 & 255, packed & 255];
+}
+function compositeHexOver(foreground, background, opacity) {
+  const front = rgb(foreground);
+  const back = rgb(background);
+  if (!front || !back) return background;
+  const alpha = Math.max(0, Math.min(1, opacity));
+  const channels = front.map((value, index) => Math.round(value * alpha + back[index] * (1 - alpha)));
+  return `#${channels.map((value) => value.toString(16).padStart(2, "0")).join("")}`;
+}
+function stateAwareBookableLabelInk(fill, preferred) {
+  const preferredContrast = renderedTextContrast(preferred, fill);
+  if (preferredContrast != null && preferredContrast >= SMALL_TEXT_CONTRAST) return preferred;
+  const darkContrast = renderedTextContrast(DARK_BOOKABLE_LABEL_INK, fill) ?? 0;
+  const lightContrast = renderedTextContrast(LIGHT_BOOKABLE_LABEL_INK, fill) ?? 0;
+  if (darkContrast === 0 && lightContrast === 0) return preferred;
+  return darkContrast >= lightContrast ? DARK_BOOKABLE_LABEL_INK : LIGHT_BOOKABLE_LABEL_INK;
+}
 
 // src/lib/money.ts
 var DEFAULT_CURRENCY = "USD";
@@ -542,6 +761,8 @@ var en = {
   // buyer picker page (src/pages/PickerPage.tsx)
   "picker.language": "Language",
   "picker.zoomToFit": "Zoom to fit",
+  "picker.seatCountLabel": "seats",
+  "picker.capacity": "capacity",
   "picker.viewMode": "View mode",
   "picker.floor": "Floor",
   "picker.zoomLevel": "Zoom level",
@@ -631,7 +852,8 @@ function formatDate(value, opts) {
 var SEAT_RADIUS = 9;
 var SEAT_LEGIBLE_SCALE = 0.9;
 var CACHE_THRESHOLD = 0.55 * SEAT_LEGIBLE_SCALE;
-var LABEL_SCALE = 1;
+var LABEL_SCALE = MIN_VISIBLE_BOOKABLE_LABEL_PX / SEAT_LABEL_FONT_SIZE;
+var MIN_FITTED_SEAT_LABEL_FONT_SIZE = 4;
 var SEAT_TAP_SLOP_PX = 14;
 var SECTION_PROMINENT_SCALE = 0.45 * SEAT_LEGIBLE_SCALE;
 var BLOCK_MELT_TOP = 0.9 * SEAT_LEGIBLE_SCALE;
@@ -645,32 +867,31 @@ var ISO_SQUASH = 0.58;
 var LIFT_PER_STEP = 58;
 var ISO_TWEEN_MS = 320;
 var CAMERA_GLIDE_MS = 650;
-var BLOCK_FILL_ALPHA = 0.85;
-var SOLD_DARKEN = 0.5;
+var BLOCK_FILL_ALPHA = 1;
+var SECTION_STROKE_PX = 2;
+var LIGHT_OVERVIEW_SECTION_FILL = "#e5e7eb";
+var LIGHT_OVERVIEW_SECTION_STROKE = "#c7cbd1";
+var LIGHT_OVERVIEW_SECTION_INK = "#595f69";
+var LIGHT_OVERVIEW_FOCAL_FILL = "#d1d5db";
+var LIGHT_OVERVIEW_FOCAL_STROKE = "#b8bdc4";
+var DARK_OVERVIEW_SECTION_FILL = "#273142";
+var DARK_OVERVIEW_SECTION_STROKE = "#526078";
+var DARK_OVERVIEW_SECTION_INK = "#f1f5f9";
+var DARK_OVERVIEW_FOCAL_FILL = "#374151";
+var DARK_OVERVIEW_FOCAL_STROKE = "#64748b";
 var SECTION_LABEL_PX = 20;
-var SECTION_SUB_PX = 12.5;
-var ZONE_LABEL_PX = 30;
+var MIN_SECTION_LABEL_PX = 12;
+var ZONE_LABEL_PX = 18;
 var ZONE_SUB_PX = 12;
+var HIERARCHY_PILL_BACKGROUND = "#111827";
 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",
-  companion: "#8b5cf6",
-  "semi-ambulatory": "#0ea5e9",
-  hearing: "#14b8a6",
-  "sign-language": "#f59e0b",
-  "plus-size": "#ec4899",
-  "lift-armrest": "#22c55e"
-};
 function seatMatchesAccess(seat, filter) {
   if (filter.length === 0) return !!seat.accessible;
   return !!seat.accessibility?.some((t2) => filter.includes(t2));
@@ -680,6 +901,7 @@ var DEF_SELECTION = "#ffffff";
 var DEF_SELECTION_ON_LIGHT = "#0b1220";
 var DEF_DECOR_FILL = "#232c40";
 var DEF_TEXT = "#8b93a7";
+var DEF_CANVAS_BACKGROUND = "#0e1117";
 function colorLuminance(color) {
   const s = color.trim();
   let r = NaN;
@@ -692,11 +914,11 @@ function colorLuminance(color) {
     g = parseInt(h.slice(2, 4), 16);
     b = parseInt(h.slice(4, 6), 16);
   } else {
-    const rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(s);
-    if (rgb) {
-      r = +rgb[1];
-      g = +rgb[2];
-      b = +rgb[3];
+    const rgb2 = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(s);
+    if (rgb2) {
+      r = +rgb2[1];
+      g = +rgb2[2];
+      b = +rgb2[3];
     }
   }
   if (Number.isNaN(r)) return NaN;
@@ -706,6 +928,34 @@ function isLightColor(color) {
   const lum = colorLuminance(color);
   return !Number.isNaN(lum) && lum > 0.6;
 }
+function opaqueColorHex(color) {
+  const value = color.trim();
+  const hex = /^#([\da-f]{3}|[\da-f]{6})$/i.exec(value);
+  if (hex) {
+    const expanded = hex[1].length === 3 ? hex[1].split("").map((channel) => channel + channel).join("") : hex[1];
+    return `#${expanded.toLowerCase()}`;
+  }
+  const rgb2 = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(value);
+  if (!rgb2 || rgb2[4] != null && Number(rgb2[4]) < 0.999) return null;
+  const channels = [Number(rgb2[1]), Number(rgb2[2]), Number(rgb2[3])];
+  if (channels.some((channel) => !Number.isInteger(channel) || channel < 0 || channel > 255)) return null;
+  return `#${channels.map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+function overviewPalette(canvasBackground) {
+  return isLightColor(canvasBackground) ? {
+    sectionFill: LIGHT_OVERVIEW_SECTION_FILL,
+    sectionStroke: LIGHT_OVERVIEW_SECTION_STROKE,
+    sectionInk: LIGHT_OVERVIEW_SECTION_INK,
+    focalFill: LIGHT_OVERVIEW_FOCAL_FILL,
+    focalStroke: LIGHT_OVERVIEW_FOCAL_STROKE
+  } : {
+    sectionFill: DARK_OVERVIEW_SECTION_FILL,
+    sectionStroke: DARK_OVERVIEW_SECTION_STROKE,
+    sectionInk: DARK_OVERVIEW_SECTION_INK,
+    focalFill: DARK_OVERVIEW_FOCAL_FILL,
+    focalStroke: DARK_OVERVIEW_FOCAL_STROKE
+  };
+}
 var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
 function seatIdOf(target) {
   const n = target;
@@ -741,6 +991,108 @@ function polyBounds(pts) {
   }
   return { x: minX, y: minY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) };
 }
+function rotatedRectPoints(center, width, height, rotation) {
+  const radians = rotation * Math.PI / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  return [
+    { x: -width / 2, y: -height / 2 },
+    { x: width / 2, y: -height / 2 },
+    { x: width / 2, y: height / 2 },
+    { x: -width / 2, y: height / 2 }
+  ].map((point) => ({
+    x: center.x + point.x * cos - point.y * sin,
+    y: center.y + point.x * sin + point.y * cos
+  }));
+}
+function pointsBounds(points) {
+  const bounds = polyBounds(points);
+  return { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height };
+}
+function rotatedRectFitsPolygon(center, width, height, rotation, outer, holes) {
+  const radians = rotation * Math.PI / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  for (let yStep = 0; yStep <= 4; yStep++) {
+    for (let xStep = 0; xStep <= 6; xStep++) {
+      const localX = width * (xStep / 6 - 0.5);
+      const localY = height * (yStep / 4 - 0.5);
+      const point = {
+        x: center.x + localX * cos - localY * sin,
+        y: center.y + localX * sin + localY * cos
+      };
+      if (!pointInPolygonWithHoles(point, outer, holes)) return false;
+    }
+  }
+  return true;
+}
+function polygonLabelCandidates(outer, holes, preferred) {
+  const bounds = polyBounds(outer);
+  const centre = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 };
+  const points = [preferred];
+  for (let row = 1; row < 12; row += 1) {
+    for (let column = 1; column < 12; column += 1) {
+      const point = {
+        x: bounds.x + bounds.width * column / 12,
+        y: bounds.y + bounds.height * row / 12
+      };
+      if (pointInPolygonWithHoles(point, outer, holes)) points.push(point);
+    }
+  }
+  return points.sort((left, right) => Math.hypot(left.x - centre.x, left.y - centre.y) - Math.hypot(right.x - centre.x, right.y - centre.y)).filter((point, index, all) => index === all.findIndex((other) => Math.abs(other.x - point.x) < 1e-6 && Math.abs(other.y - point.y) < 1e-6));
+}
+function polygonWithHolesShape(outer, holes, attrs, outerPath) {
+  const signedArea = (points) => points.reduce((sum, point, index) => {
+    const next = points[(index + 1) % points.length];
+    return sum + point.x * next.y - next.x * point.y;
+  }, 0);
+  const outerClockwise = signedArea(outer) > 0;
+  return new Shape({
+    ...attrs,
+    sceneFunc(context, shape) {
+      context.beginPath();
+      const polygonPath = (points) => {
+        if (!points.length) return;
+        context.moveTo(points[0].x, points[0].y);
+        for (let index = 1; index < points.length; index += 1) context.lineTo(points[index].x, points[index].y);
+        context.closePath();
+      };
+      const vectorPath = (path) => {
+        context.moveTo(path.start.x, path.start.y);
+        let current = path.start;
+        for (const segment of path.segments) {
+          if (segment.kind === "line") context.lineTo(segment.end.x, segment.end.y);
+          else if (segment.kind === "arc") context.arc(
+            segment.center.x,
+            segment.center.y,
+            segment.radius,
+            Math.atan2(current.y - segment.center.y, current.x - segment.center.x),
+            Math.atan2(segment.end.y - segment.center.y, segment.end.x - segment.center.x),
+            !segment.clockwise
+          );
+          else context.bezierCurveTo(
+            segment.control1.x,
+            segment.control1.y,
+            segment.control2.x,
+            segment.control2.y,
+            segment.end.x,
+            segment.end.y
+          );
+          current = segment.end;
+        }
+        context.closePath();
+      };
+      if (outerPath) vectorPath(outerPath);
+      else polygonPath(outer);
+      for (const hole of holes ?? []) {
+        const holeClockwise = signedArea(hole) > 0;
+        polygonPath(holeClockwise === outerClockwise ? [...hole].reverse() : hole);
+      }
+      context.fillStrokeShape(shape);
+    },
+    perfectDrawEnabled: false
+  });
+}
 function rgba(hex, a) {
   const m = /^#?([\da-f]{6})$/i.exec(hex.trim());
   if (!m) return hex;
@@ -760,11 +1112,11 @@ function mixColors(parts, fallback) {
   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;
+    const rgb2 = hexToRgb(p.hex);
+    if (!rgb2 || p.w <= 0) continue;
+    r += rgb2[0] * p.w;
+    g += rgb2[1] * p.w;
+    b += rgb2[2] * p.w;
     tw += p.w;
   }
   return tw > 0 ? toHex(r / tw, g / tw, b / tw) : fallback;
@@ -788,11 +1140,21 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.circleById = /* @__PURE__ */ new Map();
     /** Booth block geometry, keyed by booth id (= the unit's rowId). */
     this.boothDims = /* @__PURE__ */ new Map();
-    /** Booth label node so status changes can say HELD/SOLD on the full block. */
+    /** Booth labels live with the booth shape but obey the shared rendered-size LOD. */
     this.boothLabelById = /* @__PURE__ */ new Map();
+    /** Viewport seat labels are rebuilt after each settled camera change. */
+    this.seatLabelById = /* @__PURE__ */ new Map();
+    /** Authored free-text nodes obey the same rendered-size visibility floor. */
+    this.freeTextById = /* @__PURE__ */ new Map();
+    /** Stage/rink landmarks retain a readable screen-space caption at overview. */
+    this.primaryFocalLabels = /* @__PURE__ */ new Map();
+    /** GA paint and text share price/highlight filter state. */
+    this.gaById = /* @__PURE__ */ new Map();
     this.statusById = /* @__PURE__ */ new Map();
     this.catColor = /* @__PURE__ */ new Map();
     this.theme = {};
+    /** Opaque paint actually visible behind transparent Konva canvases. */
+    this.canvasBackground = DEF_CANVAS_BACKGROUND;
     /** Effective selection/hover ring color — resolved per chart in setChart(). */
     this.effSelection = DEF_SELECTION;
     /** Colorblind-safe mode (Okabe-Ito hues + hollow booked seats). */
@@ -1090,6 +1452,11 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.circleById.clear();
     this.boothDims.clear();
     this.boothLabelById.clear();
+    this.seatLabelById.clear();
+    this.freeTextById.clear();
+    this.primaryFocalLabels.clear();
+    this.gaById.clear();
+    for (const marker of this.selectionMarkers.values()) marker.destroy();
     this.selectionMarkers.clear();
     this.ownedHold.clear();
     this.selectionFocusId = null;
@@ -1101,6 +1468,8 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.sections = [];
     this.zones = [];
     this.seatSection.clear();
+    this.focusedSectionId = null;
+    this.focusBackdrop = null;
     this.catPrice.clear();
     this.zoneColor.clear();
     this.lodScale = 0;
@@ -1118,7 +1487,9 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     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.container.style.background = "";
+    this.canvasBackground = this.resolveCanvasBackground();
+    this.container.style.background = this.canvasBackground;
     this.effSelection = this.resolveSelectionColor();
     this.hoverRing.stroke(this.effSelection);
     this.hoverRing.radius(this.seatR + 2);
@@ -1347,12 +1718,21 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     }
     return this.selectMany(ids);
   }
+  /** Exact SDK capture helper. MCP never accepts this id; the SDK derives it
+   * from the persisted floor and uses the normal selected paint/ring path. */
+  setEvidenceSelection(seatId) {
+    if (!this.seatById.has(seatId) || !this.isSelectable(seatId)) return false;
+    if (this.selection.size) this.clearSelection();
+    this.setSelected(seatId, true);
+    this.overlayLayer.batchDraw();
+    return this.selection.has(seatId);
+  }
   /** Selectable seats in a section OR zone id — pure read (no selection change). */
   getSelectableInSection(sectionId) {
     const out = [];
     const seen = /* @__PURE__ */ new Set();
     for (const sec of this.sections) {
-      if (sec.id !== sectionId && sec.zone !== sectionId) continue;
+      if (sec.id !== sectionId && sec.logicalId !== sectionId && sec.zone !== sectionId) continue;
       for (const id of sec.memberIds) {
         if (seen.has(id)) continue;
         seen.add(id);
@@ -1495,6 +1875,65 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     };
     requestAnimationFrame(step);
   }
+  /**
+   * Pulse a section outline without moving the camera or mutating the authored
+   * geometry. The temporary halo is drawn in the non-listening overlay layer,
+   * so the apparent 4% lift never changes hit testing or selection bounds.
+   */
+  flashSection(sectionId, color = "#22a06b") {
+    const matches = this.sections.filter((section) => section.id === sectionId || section.zone === sectionId);
+    if (!matches.length) return;
+    for (const section of matches) {
+      const centre = section.outline.reduce(
+        (sum, point) => ({ x: sum.x + point.x, y: sum.y + point.y }),
+        { x: 0, y: 0 }
+      );
+      centre.x /= section.outline.length;
+      centre.y /= section.outline.length;
+      const lift = section.elevation > 0 ? this.isoLiftLocal(section.elevation) : { x: 0, y: 0 };
+      const halo = new Line({
+        x: centre.x + lift.x,
+        y: centre.y + lift.y,
+        points: section.outline.flatMap((point) => [point.x - centre.x, point.y - centre.y]),
+        closed: true,
+        stroke: color,
+        strokeWidth: 3,
+        strokeScaleEnabled: false,
+        opacity: 0.92,
+        listening: false,
+        perfectDrawEnabled: false,
+        shadowForStrokeEnabled: true,
+        shadowColor: color,
+        shadowBlur: 14,
+        shadowOpacity: 0.7
+      });
+      this.overlayLayer.add(halo);
+      this.overlayLayer.batchDraw();
+      const remove = () => {
+        if (!halo.getLayer()) return;
+        halo.destroy();
+        this.overlayLayer.batchDraw();
+      };
+      if (this.reducedMotion || typeof document !== "undefined" && document.hidden) {
+        setTimeout(remove, 520);
+        continue;
+      }
+      const start = performance.now();
+      const duration = 820;
+      const step = (now) => {
+        if (this.destroyed || !halo.getLayer()) return;
+        const t2 = Math.min(1, (now - start) / duration);
+        const eased = 1 - Math.pow(1 - t2, 3);
+        const scale = 1 + eased * 0.04;
+        halo.scale({ x: scale, y: scale });
+        halo.opacity(0.92 * (1 - t2));
+        this.overlayLayer.batchDraw();
+        if (t2 < 1) requestAnimationFrame(step);
+        else remove();
+      };
+      requestAnimationFrame(step);
+    }
+  }
   /** Nearest seat from `fromId` in a cardinal direction (aligned + close wins). */
   nearestSeat(fromId, dir) {
     const from = this.seatById.get(fromId);
@@ -1568,6 +2007,11 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   seatCount() {
     return this.seats.length;
   }
+  bookableCount() {
+    let total = this.seats.length;
+    for (const area of this.gaById.values()) total += area.capacity;
+    return total;
+  }
   worldToScreen(point) {
     const s = this.stage.scaleX();
     const p = this.isoT === 0 ? point : this.isoForward(point);
@@ -1584,6 +2028,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const c = this.circleById.get(seat.id);
       if (c) this.paintSeat(c, seat.id);
     }
+    this.updateLabels();
     if (this.cached) {
       this.seatLayer.clearCache();
       this.cacheSeatLayer();
@@ -1610,12 +2055,33 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const c = this.circleById.get(seat.id);
       if (c) this.paintSeat(c, seat.id);
     }
+    this.updateLabels();
     if (this.cached) {
       this.seatLayer.clearCache();
       this.cacheSeatLayer();
     } else {
       this.seatLayer.batchDraw();
     }
+    this.applyGAFilterState();
+  }
+  gaCategoryDimmed(categoryKey) {
+    return Boolean(
+      this.categoryHighlight && categoryKey !== this.categoryHighlight || this.categoryFilter && !this.categoryFilter.has(categoryKey)
+    );
+  }
+  /** Keep GA paint and its two labels in the same legend/price-filter state. */
+  applyGAFilterState() {
+    this.paintGAStateForView();
+    this.updateFreeTextVisibility();
+    this.bgLayer.batchDraw();
+  }
+  paintGAStateForView() {
+    for (const ga of this.gaById.values()) {
+      const filteredOut = Boolean(this.categoryFilter && !this.categoryFilter.has(ga.categoryKey));
+      const overviewHidden = ga.sectionId != null && this.effScale() < CACHE_THRESHOLD;
+      ga.polygon.opacity(overviewHidden ? 0 : this.gaCategoryDimmed(ga.categoryKey) ? GA_FILL_OPACITY * 0.08 : GA_FILL_OPACITY);
+      ga.polygon.listening(!overviewHidden && !filteredOut);
+    }
   }
   /** Frame the currently available inventory that survived a buyer price
    *  filter. Clearing the filter glides back to the full venue. */
@@ -1875,13 +2341,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       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",
+            stroke: accessibilityRingColor(seat.accessibility),
             strokeWidth: 2,
             listening: false,
             perfectDrawEnabled: false,
@@ -1910,13 +2375,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     });
     rect.setAttr("seatId", seat.id);
     this.circleById.set(seat.id, rect);
-    this.paintSeat(rect, seat.id);
     target.add(rect);
     const t2 = new Text({
       x: seat.x,
       y: seat.y,
-      text: seat.label,
-      fontSize: 10,
+      text: seat.displayLabel ?? seat.label,
+      fontSize: BOOTH_LABEL_FONT_SIZE,
       fontStyle: "600",
       fontFamily: this.labelFont(),
       fill: this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
@@ -1925,9 +2389,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     });
     t2.offsetX(t2.width() / 2);
     t2.offsetY(t2.height() / 2);
+    t2.visible(false);
+    this.boothLabelById.set(seat.id, t2);
     this.hasBoothText = true;
     this.boothLabelById.set(seat.id, t2);
     target.add(t2);
+    this.paintSeat(rect, seat.id);
   }
   /** The category's display color — Okabe-Ito hue when colorblind-safe is on. */
   seatBaseColor(categoryKey) {
@@ -1935,6 +2402,15 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const idx = this.catOrder.indexOf(categoryKey);
     return CB_PALETTE[(idx >= 0 ? idx : 0) % CB_PALETTE.length];
   }
+  /** Resolve label ink against the paint that is actually visible. The theme
+   * ink remains preferred, but mixed category palettes cannot always share one
+   * accessible text colour, so every free and transient state gets the same
+   * deterministic dark/light fallback used by Designer. */
+  renderedBookableLabelInk(shape) {
+    const preferred = this.theme.seatLabelColor ?? DEF_SEAT_LABEL;
+    const fill = shape.fill();
+    return stateAwareBookableLabelInk(typeof fill === "string" ? fill : "", preferred);
+  }
   /** Apply fill/stroke/opacity for a seat's current status + selection. */
   paintSeat(c, id) {
     const seat = this.seatById.get(id);
@@ -1998,7 +2474,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     }
     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))) {
+      if (sec && (this.dimmedSections.has(sec.id) || this.dimmedSections.has(sec.logicalId) || sec.zone != null && this.dimmedSections.has(sec.zone))) {
         c.opacity(0.18);
       }
     }
@@ -2011,16 +2487,23 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     }
     if (this.focusedSectionId) {
       const sec = this.seatSection.get(id);
-      const inFocus = !!sec && (sec.id === this.focusedSectionId || sec.zone === this.focusedSectionId);
+      const inFocus = !!sec && (sec.id === this.focusedSectionId || sec.logicalId === this.focusedSectionId || sec.zone === this.focusedSectionId);
       if (!inFocus) c.opacity(FOCUS_DIM_OPACITY);
     }
     if (this.selectionFocusId && id !== this.selectionFocusId) c.opacity(Math.min(c.opacity(), 0.16));
+    const bookableLabel = this.boothLabelById.get(id) ?? this.seatLabelById.get(id);
+    if (bookableLabel) {
+      bookableLabel.fill(this.renderedBookableLabelInk(c));
+      bookableLabel.visible(
+        isBookableLabelLegibleAtScale(bookableLabel.fontSize(), this.effScale()) && c.opacity() >= 0.5
+      );
+    }
   }
   /** 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));
+    return !!sec && (this.closedSections.has(sec.id) || this.closedSections.has(sec.logicalId) || sec.zone != null && this.closedSections.has(sec.zone));
   }
   /**
    * Colorblind-safe mode: swap category hues for the Okabe-Ito palette and
@@ -2033,6 +2516,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const c = this.circleById.get(seat.id);
       if (c) this.paintSeat(c, seat.id);
     }
+    this.updateLabels();
     if (this.cached) {
       this.seatLayer.clearCache();
       this.cacheSeatLayer();
@@ -2077,7 +2561,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
    * 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;
+    if (!this.sections.some((section) => section.id === id || section.logicalId === id)) return;
     this.focusedSectionId = id;
     this.drawFocusBackdrop(id);
     this.repaintSectionsAndSeats();
@@ -2105,20 +2589,20 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       this.focusBackdrop.destroy();
       this.focusBackdrop = null;
     }
-    const sec = this.sections.find((s) => s.id === id);
-    if (!sec) return;
-    const panel = new 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;
+    const sections = this.sections.filter((section) => section.id === id || section.logicalId === id);
+    if (!sections.length) return;
+    const backdrop = new Group({ listening: false });
+    for (const section of sections) {
+      backdrop.add(polygonWithHolesShape(section.outline, section.holes, {
+        fill: FOCUS_BACKDROP_FILL,
+        stroke: rgba("#ffffff", 0.1),
+        strokeWidth: 1,
+        listening: false
+      }, section.outlinePath));
+    }
+    this.bgLayer.add(backdrop);
+    backdrop.moveToTop();
+    this.focusBackdrop = backdrop;
   }
   /** Repaint every seat + section block to reflect closed/focus state, then redraw. */
   repaintSectionsAndSeats() {
@@ -2146,7 +2630,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       height: Math.abs(br.y - tl.y)
     };
   }
-  /** Axis-aligned world bounds of all seats + section outlines (minimap F3 frame). */
+  /** Axis-aligned world bounds of seats, section outlines, and GA polygons (minimap F3 frame). */
   getWorldBounds() {
     let minX = Infinity;
     let minY = Infinity;
@@ -2160,6 +2644,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     };
     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);
+    for (const area of this.gaById.values()) for (const p of area.points) 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) };
   }
@@ -2171,12 +2656,14 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const c = this.circleById.get(seat.id);
       if (c) this.paintSeat(c, seat.id);
     }
+    this.updateLabels();
     if (this.cached) {
       this.seatLayer.clearCache();
       this.cacheSeatLayer();
     } else {
       this.seatLayer.batchDraw();
     }
+    this.applyGAFilterState();
   }
   renderBackground(doc) {
     if (doc.backgroundImage) this.renderBackgroundImage(doc.backgroundImage);
@@ -2194,32 +2681,40 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         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) {
+    if (!bg.url || bg.visible === false) return;
     const img = new window.Image();
     img.onload = () => {
       const natW = img.naturalWidth || 4;
       const natH = img.naturalHeight || 3;
+      const rawCrop = bg.crop ?? { x: 0, y: 0, width: 1, height: 1 };
+      const cropX = Math.max(0, Math.min(0.99, rawCrop.x));
+      const cropY = Math.max(0, Math.min(0.99, rawCrop.y));
+      const crop = {
+        x: cropX,
+        y: cropY,
+        width: Math.max(0.01, Math.min(1 - cropX, rawCrop.width)),
+        height: Math.max(0.01, Math.min(1 - cropY, rawCrop.height))
+      };
       const w = bg.width;
-      const h = w * (natH / natW);
+      const h = w * (natH * crop.height / (natW * crop.width));
       const node = new KImage({
         image: img,
-        x: bg.center.x - w / 2,
-        y: bg.center.y - h / 2,
+        x: bg.center.x,
+        y: bg.center.y,
+        offsetX: w / 2,
+        offsetY: h / 2,
         width: w,
         height: h,
+        rotation: bg.rotation ?? 0,
+        crop: {
+          x: crop.x * natW,
+          y: crop.y * natH,
+          width: crop.width * natW,
+          height: crop.height * natH
+        },
         opacity: bg.opacity,
         listening: false
       });
@@ -2291,28 +2786,42 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         })
       );
     }
-    this.addCentredLabel(this.bgLayer, obj.label, obj.center.x, obj.center.y, "#cbd5e1", 12, true);
+    const label = this.addCentredLabel(this.bgLayer, obj.label, obj.center.x, obj.center.y, "#cbd5e1", 12, true);
+    this.freeTextById.set(obj.id, { node: label, background: "#232c40", kind: "table" });
   }
   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
-      })
-    );
+    const background = this.canvasBackground;
+    const preferredInk = obj.color ?? this.theme.textColor ?? DEF_TEXT;
+    const node = new Text({
+      x: obj.position.x,
+      y: obj.position.y,
+      text: obj.text,
+      fontSize: obj.fontSize,
+      rotation: obj.rotation,
+      // Authored ink remains preferred, but an embed/theme surface can change
+      // the actual canvas. Fail over to readable black/white instead of
+      // painting an otherwise valid caption invisibly on that active surface.
+      fill: stateAwareBookableLabelInk(background, preferredInk),
+      fontFamily: this.labelFont(),
+      listening: false,
+      perfectDrawEnabled: false
+    });
+    this.freeTextById.set(obj.id, {
+      node,
+      background,
+      kind: "free-text"
+    });
+    this.bgLayer.add(node);
   }
   renderShape(obj) {
-    const fill = obj.fill ?? this.theme.decorFill ?? DEF_DECOR_FILL;
+    const authoredFill = obj.fill ?? this.theme.decorFill ?? DEF_DECOR_FILL;
     const isStage = obj.role === "stage";
+    const referenceFocal = obj.role === "reference-focal";
     const isDecor = !!obj.role && !isStage;
-    const stroke = isStage ? lighten(fill, 0.28) : void 0;
+    const palette = overviewPalette(this.canvasBackground);
+    const fill = referenceFocal ? palette.focalFill : authoredFill;
+    const stroke = isStage ? lighten(fill, 0.28) : referenceFocal ? palette.focalStroke : void 0;
+    const strokeWidth = isStage ? 1 : referenceFocal ? 2 : 0;
     let cx = 0;
     let cy = 0;
     if (obj.kind === "rect" && obj.x != null && obj.y != null && obj.width != null && obj.height != null) {
@@ -2334,7 +2843,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
           height: obj.height,
           ...grad,
           stroke,
-          strokeWidth: isStage ? 1 : 0,
+          strokeWidth,
           cornerRadius: 4,
           listening: false
         })
@@ -2348,7 +2857,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         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 })
+        new Ellipse({ x: cx, y: cy, rotation: obj.rotation ?? 0, radiusX: obj.width / 2, radiusY: obj.height / 2, ...grad, stroke, strokeWidth, listening: false })
       );
     } else if (obj.kind === "polygon" && obj.points && obj.points.length) {
       const pts = obj.points.flatMap((p) => [p.x, p.y]);
@@ -2363,17 +2872,35 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         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 })
+        new Line({ points: pts, closed: true, x: cx, y: cy, offsetX: cx, offsetY: cy, rotation: obj.rotation ?? 0, ...grad, stroke, strokeWidth, 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);
+      if (isStage) {
+        const node = this.addStageLabel(cx, cy, obj.label, fill);
+        this.primaryFocalLabels.set(node, 22);
+        this.freeTextById.set(obj.id, { node, background: fill, kind: "stage" });
+      } else if (isDecor) {
+        const node = this.addCentredLabel(
+          this.bgLayer,
+          obj.label,
+          cx,
+          cy,
+          referenceFocal ? stateAwareBookableLabelInk(fill, "#e6e9f0") : "#9aa3b5",
+          referenceFocal ? 18 : 12,
+          false
+        );
+        if (referenceFocal) this.primaryFocalLabels.set(node, 18);
+        this.freeTextById.set(obj.id, { node, background: fill, kind: "decor" });
+      } else {
+        const node = this.addCentredLabel(this.bgLayer, obj.label, cx, cy, "#cbd5e1", 16, true);
+        this.freeTextById.set(obj.id, { node, background: fill, kind: "decor" });
+      }
     }
   }
   /** Prominent stage caption: uppercase, letter-spaced, larger, softly dimmed. */
-  addStageLabel(x, y, text) {
+  addStageLabel(x, y, text, background) {
+    const ink = stateAwareBookableLabelInk(background, "#e6e9f0");
     const t2 = new Text({
       x,
       y,
@@ -2382,22 +2909,24 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       fontStyle: "700",
       letterSpacing: 4,
       fontFamily: this.labelFont(),
-      fill: rgba("#e6e9f0", 0.62),
+      fill: ink,
       listening: false,
       perfectDrawEnabled: false
     });
     t2.offsetX(t2.width() / 2);
     t2.offsetY(t2.height() / 2);
     this.bgLayer.add(t2);
+    return t2;
   }
   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,
+    const canvas = this.canvasBackground;
+    const effectiveBackground = compositeHexOver(color, canvas, GA_FILL_OPACITY);
+    const preferredInk = this.theme.textColor ?? "#e6e9f0";
+    const ink = stateAwareBookableLabelInk(effectiveBackground, preferredInk);
+    const poly = polygonWithHolesShape(obj.points, obj.holes, {
       fill: color,
-      opacity: 0.22,
+      opacity: GA_FILL_OPACITY,
       stroke: color,
       strokeWidth: 1.5
     });
@@ -2410,31 +2939,51 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       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);
+    const labelPoint = polygonLabelPoint(obj.points, obj.holes);
+    const containingSection = this.sections.find((section) => pointInPolygonWithHoles(labelPoint, section.outline, section.holes));
+    const label = this.addCentredLabel(this.bgLayer, obj.label, labelPoint.x, labelPoint.y - 8, ink, GA_LABEL_FONT_SIZE, false);
+    const capacity = this.addCentredLabel(this.bgLayer, `cap ${obj.capacity}`, labelPoint.x, labelPoint.y + 10, ink, GA_CAPACITY_LABEL_FONT_SIZE, false);
+    this.freeTextById.set(`${obj.id}:label`, {
+      objectId: obj.id,
+      node: label,
+      background: effectiveBackground,
+      kind: "ga-label",
+      categoryKey: obj.categoryKey
+    });
+    this.freeTextById.set(`${obj.id}:capacity`, {
+      objectId: obj.id,
+      node: capacity,
+      background: effectiveBackground,
+      kind: "ga-capacity",
+      categoryKey: obj.categoryKey
+    });
+    this.gaById.set(obj.id, {
+      label: obj.label,
+      capacity: obj.capacity,
+      categoryKey: obj.categoryKey,
+      points: obj.points,
+      polygon: poly,
+      effectiveBackground,
+      ...containingSection ? { sectionId: containingSection.logicalId } : {}
+    });
   }
   /**
    * 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.
+   *   • a neutral solid shell that fades in at the overview rung, and
+   *   • one readable, contained section name.
+   * Category, row, seat, and availability detail belongs to section focus/zoom.
+   * Membership and category mix are still precomputed for the detailed state.
    */
   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 centroid = polygonLabelPoint(obj.outline, obj.holes);
+    const palette = overviewPalette(this.canvasBackground);
     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;
+      if (!pointInPolygonWithHoles(seat, obj.outline, obj.holes)) continue;
       memberIds.push(seat.id);
       catCounts.set(seat.categoryKey, (catCounts.get(seat.categoryKey) ?? 0) + 1);
       if ((this.statusById.get(seat.id) ?? "free") === "free") free++;
@@ -2470,65 +3019,34 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     }
     const bgTarget = liftGroupBg ?? this.bgLayer;
     const outlineTint = obj.color ?? this.zoneColor.get(obj.zone ?? "") ?? "#3a4358";
-    const outlinePoly = new Line({
-      points: pts,
-      closed: true,
+    const outlinePoly = polygonWithHolesShape(obj.outline, obj.holes, {
       stroke: rgba(outlineTint, 0.5),
       strokeWidth: 1.75,
       fill: rgba(outlineTint, 0.08),
-      lineJoin: "round",
-      listening: false,
-      perfectDrawEnabled: false
-    });
+      listening: false
+    }, obj.outlinePath);
     bgTarget.add(outlinePoly);
-    const blockPoly = new Line({
-      points: pts,
-      closed: true,
-      fill: baseFill,
-      stroke: rgba("#ffffff", 0.12),
-      strokeWidth: 1,
+    const blockPoly = polygonWithHolesShape(obj.outline, obj.holes, {
+      fill: palette.sectionFill,
+      stroke: palette.sectionStroke,
+      strokeWidth: SECTION_STROKE_PX,
       opacity: 0,
-      listening: false,
-      perfectDrawEnabled: false
-    });
+      listening: false
+    }, obj.outlinePath);
     bgTarget.add(blockPoly);
-    const rowSeats = /* @__PURE__ */ new Map();
-    for (const id of memberIds) {
-      const s = this.seatById.get(id);
-      if (!s) continue;
-      const i = Number(id.slice(id.lastIndexOf(":") + 1)) || 0;
-      (rowSeats.get(s.rowId) ?? rowSeats.set(s.rowId, []).get(s.rowId)).push({ i, x: s.x, y: s.y });
-    }
-    const rowLines = [];
-    for (const arr of rowSeats.values()) {
-      if (arr.length < 2) continue;
-      arr.sort((a, b) => a.i - b.i);
-      const line = new Line({
-        points: arr.flatMap((p) => [p.x, p.y]),
-        stroke: rgba("#ffffff", 0.34),
-        strokeWidth: SEAT_RADIUS * 0.55,
-        lineCap: "round",
-        lineJoin: "round",
-        opacity: 0,
-        listening: false,
-        perfectDrawEnabled: false
-      });
-      rowLines.push(line);
-      bgTarget.add(line);
-    }
+    const labelStyle = obj.labelPresentation?.labelStyle;
+    const preferredInk = labelStyle?.color ?? palette.sectionInk;
+    const labelScale = (labelStyle?.size ?? 18) / 18;
     const nameLabel = new Text({
-      x: centroid.x,
-      y: centroid.y,
-      text: obj.label,
-      fontSize: 22,
+      x: obj.labelPresentation?.position?.x ?? centroid.x,
+      y: obj.labelPresentation?.position?.y ?? centroid.y,
+      text: obj.displayLabel ?? obj.label,
+      rotation: obj.labelPresentation?.rotation ?? 0,
+      visible: obj.labelPresentation?.visible !== false,
+      fontSize: 22 * labelScale,
       fontStyle: "700",
       fontFamily: this.labelFont(),
-      fill: "#8b93a7",
-      // Dark halo so the label reads over the seat dots at any zoom.
-      shadowColor: "#05070c",
-      shadowBlur: 6,
-      shadowOpacity: 0.9,
-      shadowForStrokeEnabled: false,
+      fill: stateAwareBookableLabelInk(palette.sectionFill, preferredInk),
       listening: false,
       perfectDrawEnabled: false
     });
@@ -2542,11 +3060,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       fontSize: 12,
       fontStyle: "700",
       fontFamily: "JetBrains Mono, ui-monospace, monospace",
-      fill: "#f4f6fb",
-      shadowColor: "#05070c",
-      shadowBlur: 5,
-      shadowOpacity: 0.9,
-      shadowForStrokeEnabled: false,
+      fill: palette.sectionInk,
       opacity: 0,
       listening: false,
       perfectDrawEnabled: false
@@ -2555,9 +3069,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     bgTarget.add(subLabel);
     const sec = {
       id: obj.id,
-      label: obj.label,
+      logicalId: obj.logicalSectionId ?? obj.id,
+      label: obj.displayLabel ?? obj.label,
       outline: obj.outline,
+      ...obj.outlinePath ? { outlinePath: obj.outlinePath } : {},
+      holes: obj.holes ?? [],
       centroid,
+      labelAnchors: polygonLabelCandidates(obj.outline, obj.holes ?? [], centroid),
       zone: obj.zone,
       memberIds,
       total: memberIds.length,
@@ -2566,9 +3084,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       outlineTint,
       outlinePoly,
       blockPoly,
-      rowLines,
       nameLabel,
       subLabel,
+      preferredInk,
+      labelScale,
+      nameLabelFits: true,
+      subLabelFits: true,
       elevation,
       liftGroupBg,
       liftGroupSeat,
@@ -2580,7 +3101,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     this.sections.push(sec);
   }
   refreshSectionHeat(sec) {
-    const raw = this.sectionHeat.get(sec.id) ?? (sec.zone ? this.sectionHeat.get(sec.zone) : void 0);
+    const raw = this.sectionHeat.get(sec.id) ?? this.sectionHeat.get(sec.logicalId) ?? (sec.zone ? this.sectionHeat.get(sec.zone) : void 0);
     if (raw == null || raw <= 0) {
       sec.outlinePoly.stroke(rgba(sec.outlineTint, 0.5));
       sec.outlinePoly.fill(rgba(sec.outlineTint, 0.08));
@@ -2596,7 +3117,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     sec.outlinePoly.shadowBlur(4 + raw * 12);
     sec.outlinePoly.shadowOpacity(0.25 + raw * 0.45);
   }
-  /** Recompute a section's availability-tinted fill + "N LEFT" (cheap; on status change). */
+  /** Recompute a section's neutral overview state and retained detail count. */
   refreshSectionFill(sec) {
     sec.blockPoly.fill(this.sectionBlockFill(sec));
     sec.subLabel.text(t("map.seatsLeft", { count: sec.free }));
@@ -2604,25 +3125,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   /** 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);
+    return this.closedSections.has(sec.id) || this.closedSections.has(sec.logicalId) || 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).
-   */
+  /** Clean overview shells never leak category, price, or live availability paint. */
   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;
+    const fill = overviewPalette(this.canvasBackground).sectionFill;
+    return this.isSectionClosed(sec) ? darken(fill, 0.12) : fill;
   }
   /**
    * Zone rung: one giant screen-constant label per zone (+ optional "FROM $n"),
@@ -2651,19 +3159,31 @@ var _SeatmapRenderer = class _SeatmapRenderer {
           if (typeof p === "number" && p < minPrice) minPrice = p;
         }
       }
+      const back = new Rect({
+        x: cx,
+        y: cy,
+        width: 1,
+        height: 1,
+        offsetX: 0.5,
+        offsetY: 0.5,
+        cornerRadius: 1,
+        fill: HIERARCHY_PILL_BACKGROUND,
+        stroke: z.color ?? anchor.outlineTint,
+        strokeWidth: 1,
+        opacity: 0,
+        listening: false,
+        perfectDrawEnabled: false
+      });
+      this.bgLayer.add(back);
       const label = new Text({
         x: cx,
         y: cy,
         text: z.label.toUpperCase(),
-        fontSize: 34,
+        fontSize: ZONE_LABEL_PX,
         fontStyle: "800",
-        letterSpacing: 2,
+        letterSpacing: 0.5,
         fontFamily: this.labelFont(),
-        fill: z.color ?? "#f2f4f8",
-        shadowColor: "#05070c",
-        shadowBlur: 10,
-        shadowOpacity: 0.95,
-        shadowForStrokeEnabled: false,
+        fill: "#f4f6fb",
         opacity: 0,
         listening: false,
         perfectDrawEnabled: false
@@ -2680,7 +3200,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
           fontSize: 14,
           fontStyle: "600",
           fontFamily: "JetBrains Mono, ui-monospace, monospace",
-          fill: rgba("#e6e9f0", 0.75),
+          fill: "#cbd5e1",
           opacity: 0,
           listening: false,
           perfectDrawEnabled: false
@@ -2688,7 +3208,14 @@ var _SeatmapRenderer = class _SeatmapRenderer {
         sub.offsetX(sub.width() / 2);
         this.bgLayer.add(sub);
       }
-      this.zones.push({ id: z.id, label, sub });
+      this.zones.push({
+        id: z.id,
+        anchor: { x: cx, y: cy },
+        back,
+        background: HIERARCHY_PILL_BACKGROUND,
+        label,
+        sub
+      });
     }
   }
   /**
@@ -2710,74 +3237,106 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       blockT = clamp((BLOCK_MELT_TOP - scale) / (BLOCK_MELT_TOP - SECTION_PROMINENT_SCALE), 0, 1);
       zoneT = clamp((SECTION_PROMINENT_SCALE - scale) / (SECTION_PROMINENT_SCALE - ZONE_PROMINENT_SCALE), 0, 1);
     }
+    const sectionOverview = scale < CACHE_THRESHOLD;
+    if (sectionOverview) blockT = 1;
     if (!this.zones.length) zoneT = 0;
-    this.seatLayer.opacity(1 - blockT);
+    this.seatLayer.opacity(sectionOverview ? 0 : 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;
     const focus = this.focusedSectionId;
+    const palette = overviewPalette(this.canvasBackground);
+    const sectionLabelT = clamp((blockT - 0.2) / 0.8, 0, 1);
     for (const sec of this.sections) {
-      const dim = focus && sec.id !== focus && sec.zone !== focus ? FOCUS_DIM_OPACITY : 1;
+      const dim = focus && sec.id !== focus && sec.logicalId !== focus && sec.zone !== focus ? FOCUS_DIM_OPACITY : 1;
+      sec.outlinePoly.opacity(sectionOverview ? 0 : (1 - blockT) * dim);
       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) * 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);
-      }
+      sec.blockPoly.stroke(palette.sectionStroke);
+      sec.blockPoly.strokeWidth(SECTION_STROKE_PX / Math.max(sx, 1e-4));
+      const sectionFill = sec.blockPoly.fill();
+      const sectionInk = stateAwareBookableLabelInk(
+        typeof sectionFill === "string" ? sectionFill : sec.baseFill,
+        sec.preferredInk
+      );
+      sec.nameLabel.fill(sectionInk);
+      sec.subLabel.fill(sectionInk);
+      if (rescale) this.fitSectionRungLabels(sec, sx);
+      const labelOpacity = sectionLabelT * (1 - zoneT) * dim;
+      sec.nameLabel.opacity(sec.nameLabelFits ? labelOpacity : 0);
+      sec.subLabel.opacity(0);
     }
     const zoneOpacity = zoneT * (1 - this.isoT);
     for (const zone of this.zones) {
+      zone.back.opacity(zoneOpacity);
       zone.label.opacity(zoneOpacity);
       if (zone.sub) zone.sub.opacity(zoneOpacity);
-      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);
-      }
+      if (rescale) this.sizeZonePill(zone, sx);
     }
     this.decollideRungLabels(sx);
+    this.dedupeLogicalSectionLabels();
+    for (const zone of this.zones) {
+      const opacity = zone.label.opacity();
+      zone.back.opacity(opacity);
+      if (zone.sub) zone.sub.opacity(opacity);
+    }
     this.bgLayer.batchDraw();
   }
+  /** One semantic section gets one overview label, even across split contours. */
+  dedupeLogicalSectionLabels() {
+    const byLogical = /* @__PURE__ */ new Map();
+    for (const section of this.sections) {
+      (byLogical.get(section.logicalId) ?? byLogical.set(section.logicalId, []).get(section.logicalId)).push(section);
+    }
+    for (const components of byLogical.values()) {
+      if (components.length < 2) continue;
+      const visible = components.filter((component) => component.nameLabel.opacity() > 0.05).sort((left, right) => {
+        const leftBounds = polyBounds(left.outline);
+        const rightBounds = polyBounds(right.outline);
+        return rightBounds.width * rightBounds.height - leftBounds.width * leftBounds.height;
+      });
+      for (const component of visible.slice(1)) component.nameLabel.opacity(0);
+    }
+  }
   /**
-   * 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).
+   * Keep transitional zone pills from covering section names. Section names
+   * are already proven inside disjoint shells, so they must not cull each other.
    */
   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;
+      const rotated = pointsBounds(rotatedRectPoints(
+        { x: 0, y: 0 },
+        t2.width() * sx,
+        t2.height() * sx,
+        t2.rotation()
+      ));
+      const w = rotated.width;
+      const h = rotated.height;
       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) });
+      if (zone.label.opacity() > 0.05) {
+        const p = this.worldToScreen(zone.anchor);
+        const w = zone.back.width() * sx;
+        const h = zone.back.height() * sx;
+        cands.push({ node: zone.label, tier: 0, section: false, box: { x: p.x - w / 2, y: p.y - h / 2, w, h } });
+      }
     }
     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 (sec.nameLabel.opacity() > 0.05) cands.push({ node: sec.nameLabel, tier: 1, section: true, box: boxOf(sec.nameLabel) });
     }
     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)) {
+      if (collides(c.box)) {
         c.node.opacity(0);
-        culled.add(c.node);
-      } else {
+      } else if (!c.section) {
         kept.push(c.box);
       }
     }
@@ -2789,6 +3348,54 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     t2.offsetY(t2.height() / 2);
     t2.y(y);
   }
+  /** Fit one centred section name, rotating narrow shells like the target chart. */
+  fitSectionRungLabels(sec, sx) {
+    const paddingPx = 8;
+    sec.subLabelFits = false;
+    const maxPx = SECTION_LABEL_PX * sec.labelScale;
+    const minPx = MIN_SECTION_LABEL_PX * sec.labelScale;
+    for (let fontPx = maxPx; fontPx >= minPx; fontPx -= 1) {
+      for (const rotation of [0, -90]) {
+        sec.nameLabel.rotation(rotation);
+        this.sizeLabel(sec.nameLabel, fontPx / sx, sec.nameLabel.y());
+        for (const anchor of sec.labelAnchors) {
+          sec.nameLabel.position(anchor);
+          const paddingWorld = paddingPx / sx;
+          if (rotatedRectFitsPolygon(
+            anchor,
+            sec.nameLabel.width() + paddingWorld,
+            sec.nameLabel.height() + paddingWorld,
+            rotation,
+            sec.outline,
+            sec.holes
+          )) {
+            sec.nameLabelFits = true;
+            return;
+          }
+        }
+      }
+    }
+    sec.nameLabel.position(sec.centroid);
+    sec.nameLabel.rotation(0);
+    sec.nameLabelFits = false;
+  }
+  /** Size one screen-constant zone name/price pill around its shared anchor. */
+  sizeZonePill(zone, sx) {
+    const padX = 10 / sx;
+    const padY = 6 / sx;
+    const gap = zone.sub ? 3 / sx : 0;
+    this.sizeLabel(zone.label, ZONE_LABEL_PX / sx, zone.anchor.y);
+    if (zone.sub) this.sizeLabel(zone.sub, ZONE_SUB_PX / sx, zone.anchor.y);
+    const width = Math.max(zone.label.width(), zone.sub?.width() ?? 0) + padX * 2;
+    const height = zone.label.height() + (zone.sub ? gap + zone.sub.height() : 0) + padY * 2;
+    zone.label.y(zone.anchor.y - (zone.sub ? (gap + zone.sub.height()) / 2 : 0));
+    if (zone.sub) zone.sub.y(zone.anchor.y + (zone.label.height() + gap) / 2);
+    zone.back.position(zone.anchor);
+    zone.back.size({ width, height });
+    zone.back.offset({ x: width / 2, y: height / 2 });
+    zone.back.cornerRadius(7 / sx);
+    zone.back.strokeWidth(1 / sx);
+  }
   /**
    * 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
@@ -2803,12 +3410,12 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   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;
+    const hit = this.sections.find((sec) => pointInPolygonWithHoles(world, sec.outline, sec.holes));
+    return hit ? hit.logicalId : null;
   }
   /** Seat ids belonging to a section (Slice 5 section-summary card). */
   sectionMembers(id) {
-    return this.sections.find((s) => s.id === id)?.memberIds.slice() ?? [];
+    return [...new Set(this.sections.filter((section) => section.id === id || section.logicalId === id || section.zone === id).flatMap((section) => section.memberIds))];
   }
   addCentredLabel(layer, text, x, y, fill, fontSize, bold) {
     const t2 = new Text({
@@ -2825,6 +3432,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     t2.offsetX(t2.width() / 2);
     t2.offsetY(t2.height() / 2);
     layer.add(t2);
+    return t2;
   }
   // ---- selection ------------------------------------------------------------
   isSelectable(id) {
@@ -2858,21 +3466,22 @@ var _SeatmapRenderer = class _SeatmapRenderer {
    * the container's computed CSS background (walking up past transparent
    * ancestors). Unknown/unparseable backgrounds keep the dark default.
    */
-  resolveSelectionColor() {
-    if (this.theme.selectionColor) return this.theme.selectionColor;
-    let bg = this.theme.background ?? "";
-    if (!bg && typeof getComputedStyle === "function") {
-      let el = this.container;
-      while (el) {
-        const c = getComputedStyle(el).backgroundColor;
-        if (c && c !== "transparent" && !/^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*0\s*\)$/.test(c)) {
-          bg = c;
-          break;
-        }
-        el = el.parentElement;
+  resolveCanvasBackground() {
+    const themed = this.theme.background ? opaqueColorHex(this.theme.background) : null;
+    if (themed) return themed;
+    if (typeof getComputedStyle === "function") {
+      let element = this.container;
+      while (element) {
+        const resolved = opaqueColorHex(getComputedStyle(element).backgroundColor);
+        if (resolved) return resolved;
+        element = element.parentElement;
       }
     }
-    return isLightColor(bg) ? DEF_SELECTION_ON_LIGHT : DEF_SELECTION;
+    return DEF_CANVAS_BACKGROUND;
+  }
+  resolveSelectionColor() {
+    if (this.theme.selectionColor) return this.theme.selectionColor;
+    return isLightColor(this.canvasBackground) ? DEF_SELECTION_ON_LIGHT : DEF_SELECTION;
   }
   setSelected(id, on, silent = false) {
     const c = this.circleById.get(id);
@@ -2898,6 +3507,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     const candidate = this.selectionFocusId === id;
     const dims = this.boothDims.get(seat.rowId);
     const marker = new Group({
+      name: "selection-ring",
       x: seat.x,
       y: seat.y,
       rotation: dims?.rotation ?? 0,
@@ -2905,6 +3515,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       perfectDrawEnabled: false,
       opacity: this.selectionFocusId && !candidate ? 0.2 : 1
     });
+    marker.setAttr("seatId", id);
     const common = {
       stroke: this.effSelection,
       listening: false,
@@ -2981,10 +3592,18 @@ var _SeatmapRenderer = class _SeatmapRenderer {
    * whether the section already fills the viewport (small container) so the tap
    * must fall through and pick.
    */
+  sectionBounds(id) {
+    const bounds = this.sections.filter((section) => section.id === id || section.logicalId === id).map((section) => polyBounds(section.outline));
+    if (!bounds.length) return null;
+    const left = Math.min(...bounds.map((box) => box.x));
+    const top = Math.min(...bounds.map((box) => box.y));
+    const right = Math.max(...bounds.map((box) => box.x + box.width));
+    const bottom = Math.max(...bounds.map((box) => box.y + box.height));
+    return { x: left, y: top, width: right - left, height: bottom - top };
+  }
   sectionFrameScale(id) {
-    const sec = this.sections.find((s) => s.id === id);
-    if (!sec) return this.stage.scaleX();
-    const b = polyBounds(sec.outline);
+    const b = this.sectionBounds(id);
+    if (!b) return this.stage.scaleX();
     const w = this.stage.width();
     const h = this.stage.height();
     const { min, max } = this.zoomBounds();
@@ -3014,11 +3633,11 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     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;
+        const alreadyFocused = this.focusedSectionId === sec.logicalId;
+        const canZoomInFurther = this.sectionFrameScale(sec.logicalId) > this.stage.scaleX() * 1.02;
         if (!alreadyFocused && canZoomInFurther) {
-          if (this.opts.onSectionTap) this.opts.onSectionTap(sec.id);
-          else this.focusSection(sec.id);
+          if (this.opts.onSectionTap) this.opts.onSectionTap(sec.logicalId);
+          else this.focusSection(sec.logicalId);
           return;
         }
       }
@@ -3097,10 +3716,10 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       }
       if (this.sections.length) {
         const world = this.screenToWorld(pointer);
-        const hit = this.sections.find((sn) => pointInPolygon(world, sn.outline));
+        const hit = this.sections.find((sn) => pointInPolygonWithHoles(world, sn.outline, sn.holes));
         if (hit) {
-          if (this.opts.onSectionTap) this.opts.onSectionTap(hit.id);
-          else this.focusRegion(hit.id);
+          if (this.opts.onSectionTap) this.opts.onSectionTap(hit.logicalId);
+          else this.focusRegion(hit.logicalId);
           return;
         }
       }
@@ -3186,10 +3805,7 @@ var _SeatmapRenderer = class _SeatmapRenderer {
    * newer glide cancels an in-flight one.
    */
   focusRegion(target, opts) {
-    const b = typeof target === "string" ? (() => {
-      const sec = this.sections.find((s) => s.id === target);
-      return sec ? polyBounds(sec.outline) : null;
-    })() : target;
+    const b = typeof target === "string" ? this.sectionBounds(target) : target;
     if (!b) return;
     this.cancelGlide();
     if (opts?.animate === false || this.reducedMotion) {
@@ -3249,25 +3865,343 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (this.zones.length && scale < ZONE_PROMINENT_SCALE) return "zones";
     return "sections";
   }
-  /** Jump the camera to a rung's zoom band, centred on the chart (glided). */
+  getRenderedQualityEvidence() {
+    const effectiveScale = this.effScale();
+    const stageScale = this.stage.scaleX();
+    const viewport = { width: this.stage.width(), height: this.stage.height() };
+    const rounded = (value) => Math.round(value * 100) / 100;
+    const labels = this.seats.map((seat) => {
+      const shape = this.circleById.get(seat.id);
+      const label = this.boothLabelById.get(seat.id) ?? this.seatLabelById.get(seat.id);
+      const authoredFontSize = seat.kind === "booth" ? BOOTH_LABEL_FONT_SIZE : SEAT_LABEL_FONT_SIZE;
+      const renderedFontPx = rounded((label?.fontSize() ?? authoredFontSize) * effectiveScale);
+      const screen = this.worldToScreen(seat);
+      const outside = screen.x < 0 || screen.x > viewport.width || screen.y < 0 || screen.y > viewport.height;
+      const opacity = shape?.opacity() ?? 0;
+      const section = this.seatSection.get(seat.id);
+      const visible = Boolean(label?.isVisible()) && opacity >= 0.5 && !outside;
+      let hiddenReason;
+      if (!visible) {
+        if (opacity < 0.5) hiddenReason = "dimmed-or-unavailable";
+        else if (renderedFontPx < MIN_VISIBLE_BOOKABLE_LABEL_PX) hiddenReason = "below-minimum-size";
+        else if (outside) hiddenReason = "outside-viewport";
+        else if (!label) hiddenReason = "clutter-or-fit";
+        else hiddenReason = "renderer-hidden";
+      }
+      const labelWidth = label ? label.width() * stageScale : 0;
+      const labelHeight = label ? label.height() * effectiveScale : 0;
+      const directWidthPx = shape instanceof Rect ? shape.width() * stageScale : this.seatR * 2 * effectiveScale;
+      const directHeightPx = shape instanceof Rect ? shape.height() * stageScale : this.seatR * 2 * effectiveScale;
+      const assistedDiameterPx = 2 * (this.seatR * effectiveScale + SEAT_TAP_SLOP_PX);
+      const fill = shape?.fill();
+      const ink = label?.fill();
+      return {
+        seatId: seat.id,
+        label: seat.label,
+        kind: seat.kind === "booth" ? "booth" : "seat",
+        categoryKey: seat.categoryKey,
+        ...section ? { sectionId: section.id } : {},
+        ...section?.zone ? { zoneId: section.zone } : {},
+        status: this.statusById.get(seat.id) ?? "free",
+        selected: this.selection.has(seat.id),
+        visible,
+        renderedFontPx,
+        fill: typeof fill === "string" ? fill : "",
+        ink: typeof ink === "string" ? ink : this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+        opacity: rounded(opacity),
+        pointerTarget: {
+          active: !this.cached && this.isSelectable(seat.id),
+          directWidthPx: rounded(directWidthPx),
+          directHeightPx: rounded(directHeightPx),
+          effectiveMinimumPx: rounded(Math.max(
+            Math.min(directWidthPx, directHeightPx),
+            assistedDiameterPx
+          ))
+        },
+        screenCenter: { x: rounded(screen.x), y: rounded(screen.y) },
+        ...visible ? {
+          screenBox: {
+            x: rounded(screen.x - labelWidth / 2),
+            y: rounded(screen.y - labelHeight / 2),
+            width: rounded(labelWidth),
+            height: rounded(labelHeight)
+          }
+        } : {},
+        ...hiddenReason ? { hiddenReason } : {}
+      };
+    });
+    const visibleLabels = labels.filter((label) => label.visible).length;
+    const hierarchyEvidence = (id, kind, role, node, backgroundFill, section) => {
+      const worldCorners = rotatedRectPoints(
+        { x: node.x(), y: node.y() },
+        node.width(),
+        node.height(),
+        node.rotation()
+      );
+      const screenBounds = pointsBounds(worldCorners.map((corner) => this.worldToScreen(corner)));
+      const opacity = rounded(node.opacity());
+      const ink = node.fill();
+      const outside = screenBounds.x + screenBounds.width < 0 || screenBounds.x > viewport.width || screenBounds.y + screenBounds.height < 0 || screenBounds.y > viewport.height;
+      const visible = node.isVisible() && opacity > 0.05 && !outside;
+      const fitsContainer = section ? rotatedRectFitsPolygon(
+        { x: node.x(), y: node.y() },
+        node.width(),
+        node.height(),
+        node.rotation(),
+        section.outline,
+        section.holes
+      ) : void 0;
+      return {
+        id,
+        kind,
+        role,
+        label: node.text(),
+        visible,
+        renderedFontPx: rounded(node.fontSize() * stageScale),
+        opacity,
+        fill: backgroundFill,
+        ink: typeof ink === "string" ? ink : "",
+        ...fitsContainer == null ? {} : { fitsContainer },
+        ...visible ? {
+          screenBox: {
+            x: rounded(screenBounds.x),
+            y: rounded(screenBounds.y),
+            width: rounded(screenBounds.width),
+            height: rounded(screenBounds.height)
+          }
+        } : {}
+      };
+    };
+    const hierarchyLabels = [
+      ...this.sections.map((section) => {
+        const fill = section.blockPoly.fill();
+        return hierarchyEvidence(
+          section.id,
+          "section",
+          "name",
+          section.nameLabel,
+          typeof fill === "string" ? fill : section.baseFill,
+          section
+        );
+      }),
+      ...this.sections.map((section) => {
+        const fill = section.blockPoly.fill();
+        return hierarchyEvidence(
+          `${section.id}:availability`,
+          "section",
+          "availability",
+          section.subLabel,
+          typeof fill === "string" ? fill : section.baseFill,
+          section
+        );
+      }),
+      ...this.zones.flatMap((zone) => [
+        hierarchyEvidence(zone.id, "zone", "name", zone.label, zone.background),
+        ...zone.sub ? [hierarchyEvidence(`${zone.id}:price`, "zone", "price", zone.sub, zone.background)] : []
+      ])
+    ];
+    const gaAreas = [...this.gaById].map(([areaId, ga]) => {
+      const screenPoints = ga.points.map((point) => this.worldToScreen(point));
+      const left = Math.min(...screenPoints.map((point) => point.x));
+      const top = Math.min(...screenPoints.map((point) => point.y));
+      const right = Math.max(...screenPoints.map((point) => point.x));
+      const bottom = Math.max(...screenPoints.map((point) => point.y));
+      const outside = right < 0 || left > viewport.width || bottom < 0 || top > viewport.height;
+      const opacity = rounded(ga.polygon.opacity());
+      const visible = opacity >= 0.1 && !outside;
+      const fill = ga.polygon.fill();
+      return {
+        areaId,
+        label: ga.label,
+        capacity: ga.capacity,
+        categoryKey: ga.categoryKey,
+        ...ga.sectionId ? { sectionId: ga.sectionId } : {},
+        visible,
+        interactive: ga.polygon.listening(),
+        opacity,
+        fill: typeof fill === "string" ? fill : "",
+        effectiveBackground: ga.effectiveBackground,
+        ...visible ? {
+          screenBox: {
+            x: rounded(left),
+            y: rounded(top),
+            width: rounded(right - left),
+            height: rounded(bottom - top)
+          }
+        } : {}
+      };
+    });
+    const freeTextLabels = [...this.freeTextById].map(([recordKey, record]) => {
+      const { node, background, kind } = record;
+      const point = this.worldToScreen({ x: node.x(), y: node.y() });
+      const width = node.width() * stageScale;
+      const height = node.height() * effectiveScale;
+      const left = point.x - node.offsetX() * stageScale;
+      const top = point.y - node.offsetY() * effectiveScale;
+      const renderedFontPx = rounded(node.fontSize() * effectiveScale);
+      const outside = left + width < 0 || left > viewport.width || top + height < 0 || top > viewport.height;
+      const visible = node.isVisible() && !outside;
+      const ink = node.fill();
+      const opacity = rounded(node.getAbsoluteOpacity());
+      let hiddenReason;
+      if (!visible) {
+        if (renderedFontPx < MIN_VISIBLE_BOOKABLE_LABEL_PX) hiddenReason = "below-minimum-size";
+        else if (outside) hiddenReason = "outside-viewport";
+        else hiddenReason = "renderer-hidden";
+      }
+      return {
+        objectId: record.objectId ?? recordKey,
+        kind,
+        text: node.text(),
+        visible,
+        renderedFontPx,
+        ink: typeof ink === "string" ? ink : "",
+        background,
+        opacity,
+        ...visible ? {
+          screenBox: {
+            x: rounded(left),
+            y: rounded(top),
+            width: rounded(width),
+            height: rounded(height)
+          }
+        } : {},
+        ...hiddenReason ? { hiddenReason } : {}
+      };
+    });
+    const palette = overviewPalette(this.canvasBackground);
+    const neutralSectionFills = /* @__PURE__ */ new Set([
+      palette.sectionFill.toLowerCase(),
+      darken(palette.sectionFill, 0.12).toLowerCase()
+    ]);
+    const visibleSectionShells = this.sections.filter((section) => section.blockPoly.opacity() > 0.05);
+    return {
+      viewport,
+      canvasBackground: this.canvasBackground,
+      effectiveScale: rounded(effectiveScale),
+      rung: this.getRung(),
+      minimumVisibleLabelPx: MIN_VISIBLE_BOOKABLE_LABEL_PX,
+      totalLabelledBookableUnits: labels.length,
+      visibleLabels,
+      hiddenLabels: labels.length - visibleLabels,
+      totalBookableUnits: labels.length + gaAreas.reduce((sum, area) => sum + area.capacity, 0),
+      selectionRingSeatIds: this.overlayLayer.find(".selection-ring").map((node) => String(node.getAttr("seatId") ?? "")).filter(Boolean),
+      selectionRingColor: this.effSelection,
+      focusedSectionId: this.focusedSectionId,
+      focusBackdropVisible: Boolean(this.focusBackdrop?.isVisible()),
+      categoryFilterKeys: this.categoryFilter ? [...this.categoryFilter].sort() : null,
+      overviewStyle: {
+        visibleSectionShells: visibleSectionShells.length,
+        categoryPaintedSectionShells: visibleSectionShells.filter((section) => {
+          const fill = section.blockPoly.fill();
+          return typeof fill !== "string" || !neutralSectionFills.has(fill.toLowerCase());
+        }).length,
+        visibleCategoryDetailOutlines: this.sections.filter((section) => section.outlinePoly.opacity() > 0.05).length,
+        // Row-hint nodes no longer exist in the production overview scene.
+        visibleSectionRowHints: 0,
+        visibleSectionAvailabilityLabels: this.sections.filter((section) => section.subLabel.opacity() > 0.05).length,
+        visibleSectionGADetails: [...this.gaById.values()].filter((area) => area.sectionId != null && area.polygon.opacity() > 0.05).length
+      },
+      labels,
+      gaAreas,
+      hierarchyLabels,
+      freeTextLabels
+    };
+  }
+  /** Jump the camera to a rung's zoom band (glided). */
   setRung(rung) {
     if (rung === "zones") {
       this.cancelGlide();
       this.zoomToFit();
       return;
     }
-    const target = rung === "sections" ? (SECTION_PROMINENT_SCALE + CACHE_THRESHOLD) / 2 : Math.max(SEAT_FOCUS_SCALE, CACHE_THRESHOLD * 1.3);
+    const target = rung === "sections" ? (SECTION_PROMINENT_SCALE + CACHE_THRESHOLD) / 2 : Math.max(
+      this.seatLabelTargetScale() * 1.05,
+      SEAT_FOCUS_SCALE,
+      CACHE_THRESHOLD * 1.3
+    );
     const w = this.stage.width();
     const h = this.stage.height();
-    const cx = this.bounds.x + this.bounds.width / 2;
-    const cy = this.bounds.y + this.bounds.height / 2;
+    const visible = this.getVisibleWorldRect();
+    const viewCentre = {
+      x: visible.x + visible.width / 2,
+      y: visible.y + visible.height / 2
+    };
+    let cx = viewCentre.x;
+    let cy = viewCentre.y;
+    if (rung === "sections" && this.sections.length > 0) {
+      const sectionCentres = this.sections.map((section) => {
+        const bounds = polyBounds(section.outline);
+        return {
+          x: bounds.x + bounds.width / 2,
+          y: bounds.y + bounds.height / 2
+        };
+      });
+      const halfWidth = w / (target * 2);
+      const halfHeight = h / (target * 2);
+      const hierarchyWillBeVisible = sectionCentres.some((point) => Math.abs(point.x - viewCentre.x) <= halfWidth && Math.abs(point.y - viewCentre.y) <= halfHeight);
+      if (!hierarchyWillBeVisible) {
+        const nearest = sectionCentres.reduce((best, point) => {
+          const distance = (point.x - viewCentre.x) ** 2 + (point.y - viewCentre.y) ** 2;
+          return distance < best.distance ? { point, distance } : best;
+        }, { point: sectionCentres[0], distance: Infinity });
+        cx = nearest.point.x;
+        cy = nearest.point.y;
+      }
+    }
+    const seatAnchors = rung === "seats" ? this.seats.filter((seat) => seat.kind !== "booth") : [];
+    if (seatAnchors.length > 0) {
+      let nearest = seatAnchors[0];
+      let nearestDistance = Infinity;
+      for (const seat of seatAnchors) {
+        const dx = seat.x - viewCentre.x;
+        const dy = seat.y - viewCentre.y;
+        const distance = dx * dx + dy * dy;
+        if (distance < nearestDistance) {
+          nearest = seat;
+          nearestDistance = distance;
+        }
+      }
+      cx = nearest.x;
+      cy = nearest.y;
+    }
     const bw = w / (target * 1.12);
     const bh = h / (target * 1.12);
     this.focusRegion({ x: cx - bw / 2, y: cy - bh / 2, width: bw, height: bh });
   }
+  /**
+   * The seat rung must account for labels that auto-fit inside a seat circle.
+   * A short `A-1` remains at the normal 7u target; a table label such as
+   * `T13-10` may fit at 4u and therefore needs a deeper camera target to reach
+   * the same 12 CSS-pixel floor. Measurement happens only on explicit rung
+   * navigation, never during pan/zoom frames.
+   */
+  seatLabelTargetScale() {
+    let minimumFont = BOOTH_LABEL_FONT_SIZE;
+    const measure = new Text({
+      fontSize: SEAT_LABEL_FONT_SIZE,
+      fontStyle: "600",
+      fontFamily: this.labelFont(),
+      listening: false
+    });
+    const maxWidth = this.seatR * 2 - 3;
+    for (const seat of this.seats) {
+      if (seat.kind === "booth") {
+        minimumFont = Math.min(minimumFont, BOOTH_LABEL_FONT_SIZE);
+        continue;
+      }
+      measure.fontSize(SEAT_LABEL_FONT_SIZE);
+      measure.text(bookableMarkerLabel(seat.displayLabel ?? seat.label));
+      const fitted = measure.width() > maxWidth ? Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, SEAT_LABEL_FONT_SIZE * maxWidth / measure.width()) : SEAT_LABEL_FONT_SIZE;
+      minimumFont = Math.min(minimumFont, fitted);
+    }
+    measure.destroy();
+    return MIN_VISIBLE_BOOKABLE_LABEL_PX / Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, minimumFont);
+  }
   /** Recompute LOD (cache/labels) after any pan/zoom settles. */
   afterViewChange() {
     this.updateLOD();
+    this.updateFreeTextVisibility();
     this.updateLabels();
     this.scheduleViewChange();
   }
@@ -3281,7 +4215,13 @@ var _SeatmapRenderer = class _SeatmapRenderer {
   }
   updateLOD() {
     const scale = this.effScale();
+    const focalScale = Math.max(scale, 1e-4);
+    for (const [label, targetPx] of this.primaryFocalLabels) {
+      this.sizeLabel(label, targetPx / focalScale, label.y());
+    }
     if (this.hasSections) this.applySectionLod(scale);
+    else if (this.primaryFocalLabels.size) this.bgLayer.batchDraw();
+    this.paintGAStateForView();
     const shouldCache = scale < CACHE_THRESHOLD;
     if (shouldCache && !this.cached) {
       this.cacheSeatLayer();
@@ -3320,15 +4260,37 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     if (this.recacheTimer) {
       clearTimeout(this.recacheTimer);
       this.recacheTimer = null;
-      this.rebuildSeatCache();
+      if (this.effScale() < CACHE_THRESHOLD) {
+        this.rebuildSeatCache();
+      } else if (this.cached) {
+        this.seatLayer.clearCache();
+        this.seatLayer.listening(true);
+        this.cached = false;
+      }
     }
     this.bgLayer.draw();
     this.seatLayer.draw();
     this.overlayLayer.draw();
   }
+  updateFreeTextVisibility() {
+    const effectiveScale = this.effScale();
+    for (const { objectId, node, categoryKey, kind } of this.freeTextById.values()) {
+      const gaDimmed = categoryKey != null && (kind === "ga-label" || kind === "ga-capacity") && this.gaCategoryDimmed(categoryKey);
+      const gaOverviewHidden = objectId != null && (kind === "ga-label" || kind === "ga-capacity") && this.gaById.get(objectId)?.sectionId != null && effectiveScale < CACHE_THRESHOLD;
+      node.visible(!gaDimmed && !gaOverviewHidden && isBookableLabelLegibleAtScale(node.fontSize(), effectiveScale));
+    }
+  }
   updateLabels() {
-    const show = this.effScale() > LABEL_SCALE;
+    const effectiveScale = this.effScale();
+    const show = effectiveScale >= LABEL_SCALE;
+    for (const [id, label] of this.boothLabelById) {
+      const shape = this.circleById.get(id);
+      label.visible(
+        isBookableLabelLegibleAtScale(label.fontSize(), effectiveScale) && (shape?.opacity() ?? 1) >= 0.5
+      );
+    }
     this.labelGroup.destroyChildren();
+    this.seatLabelById.clear();
     if (!show) {
       this.overlayLayer.batchDraw();
       return;
@@ -3342,8 +4304,10 @@ var _SeatmapRenderer = class _SeatmapRenderer {
     for (const seat of this.seats) {
       if (seat.kind === "booth") continue;
       if (seat.x < x0 || seat.x > x1 || seat.y < y0 || seat.y > y1) continue;
+      const shape = this.circleById.get(seat.id);
+      if ((shape?.opacity() ?? 1) < 0.5) continue;
       const status = this.statusById.get(seat.id) ?? "free";
-      const unavailable = status === "booked" || status === "held" && !this.ownedHold.has(seat.id);
+      const unavailable = status === "booked" || status === "held" && !this.ownedHold.has(seat.id) && !this.opts.manageMode;
       if (unavailable) {
         const cue = new Group({ x: seat.x, y: seat.y, listening: false });
         if (status === "held") {
@@ -3381,23 +4345,28 @@ var _SeatmapRenderer = class _SeatmapRenderer {
       const t2 = new Text({
         x: seat.x,
         y: seat.y,
-        text: seat.label,
-        fontSize: 7,
+        text: bookableMarkerLabel(seat.displayLabel ?? seat.label),
+        fontSize: SEAT_LABEL_FONT_SIZE,
         fontStyle: "600",
         fontFamily: this.labelFont(),
-        fill: this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
+        fill: shape ? this.renderedBookableLabelInk(shape) : this.theme.seatLabelColor ?? DEF_SEAT_LABEL,
         listening: false,
         perfectDrawEnabled: false
       });
       const maxW = this.seatR * 2 - 3;
-      if (t2.width() > maxW) t2.fontSize(Math.max(4, t2.fontSize() * maxW / t2.width()));
-      if (t2.fontSize() < 4.2) {
+      if (t2.width() > maxW) t2.fontSize(Math.max(MIN_FITTED_SEAT_LABEL_FONT_SIZE, SEAT_LABEL_FONT_SIZE * maxW / t2.width()));
+      if (t2.width() > maxW + 0.01) {
+        t2.destroy();
+        continue;
+      }
+      if (!isBookableLabelLegibleAtScale(t2.fontSize(), effectiveScale)) {
         t2.destroy();
         continue;
       }
       t2.offsetX(t2.width() / 2);
       t2.offsetY(t2.height() / 2);
       this.labelGroup.add(t2);
+      this.seatLabelById.set(seat.id, t2);
       if (++count >= MAX_LABELS) break;
     }
     if (this.isoT > 0) this.applyUprightLabels();
@@ -4649,9 +5618,9 @@ function generateSeatThumb(seat, focalPoint, _neighborSeats) {
 
 // src/i18n/bundles.ts
 var LOADERS = {
-  es: () => import("./es-EWHL5CZR.js").then((m) => ({ default: m.es })),
-  de: () => import("./de-PQ5BE3PL.js").then((m) => ({ default: m.de })),
-  fr: () => import("./fr-FIEG227H.js").then((m) => ({ default: m.fr }))
+  es: () => import("./es-NLD3NL3W.js").then((m) => ({ default: m.es })),
+  de: () => import("./de-ZTKJOFHT.js").then((m) => ({ default: m.de })),
+  fr: () => import("./fr-KSFKWSAT.js").then((m) => ({ default: m.fr }))
 };
 var loaded = /* @__PURE__ */ new Set(["en"]);
 async function loadLocale(code) {
@@ -4671,9 +5640,12 @@ async function loadLocale(code) {
   }
 }
 export {
+  ACCESSIBILITY_RING_COLOR,
   ACCESSIBILITY_TYPES,
   CHART_STORAGE_KEY,
   DEFAULT_CURRENCY,
+  LABEL_STYLE_MAX_SIZE,
+  LABEL_STYLE_MIN_SIZE,
   MAX_EVENT_INVENTORY,
   MAX_GA_CAPACITY,
   PickerController,
@@ -4681,6 +5653,7 @@ export {
   SeatmapRenderer,
   UNGROUPED_ID,
   accessibilityMeta,
+  accessibilityRingColor,
   allObjects,
   applyHidden,
   chartBounds,
@@ -4709,6 +5682,8 @@ export {
   loadLocale,
   objectCenter,
   pointInPolygon,
+  pointInPolygonWithHoles,
+  polygonLabelPoint,
   resolveLocale,
   setLocale,
   setMoneyLocale,