@seatlayer/core 0.48.1 → 0.49.0

package/dist/view3d/index.js

@@ -7,14 +7,14 @@ import {
   pointInPolygonWithHoles,
   resolveSection,
   sectionGeometry
-} from "../chunk-TCTAS4Z2.js";
+} from "../chunk-GD267BFB.js";
 import {
   MAX_PITCH_DEG,
   VFOV_DEG,
   clampPanoramaFov,
   mountPanorama,
   seatViewDisclosure
-} from "../chunk-I6DPX3EM.js";
+} from "../chunk-BE3F7CT3.js";
 import {
   browserPanoramaConstraints,
   loadPanoramaImage,
@@ -69,8 +69,8 @@ var STRUCTURE = {
    * so an organizer's own stage colour survives — it is just no longer lit like
    * a basement.
    */
-  stageTop: [0.86, 0.64, 0.36],
-  stageWall: [0.34, 0.26, 0.18],
+  stageTop: [0.94, 0.7, 0.38],
+  stageWall: [0.48, 0.33, 0.18],
   decorTop: [0.22, 0.25, 0.29],
   decorWall: [0.15, 0.17, 0.2],
   gaTop: [0.24, 0.28, 0.33],
@@ -224,6 +224,10 @@ var OrbitCamera = class {
     this.minDist = 1;
     this.maxDist = 100;
     this.gestureFired = false;
+    /** Seat-eye arrival is a fixed physical origin. The buyer may opt into the
+     * dedicated look-around viewer, but venue orbit/dolly/pan must not pull the
+     * camera outside the selected seat. */
+    this.interactionEnabled = true;
     this.dragging = false;
     this.panning = false;
     this.lastX = 0;
@@ -246,6 +250,7 @@ var OrbitCamera = class {
     this.requestRender = requestRender;
     this.onGesture = onGesture;
     this.onPointerDown = (e) => {
+      if (!this.interactionEnabled) return;
       try {
         this.canvas.setPointerCapture?.(e.pointerId);
       } catch {
@@ -268,6 +273,7 @@ var OrbitCamera = class {
       }
     };
     this.onPointerMove = (e) => {
+      if (!this.interactionEnabled) return;
       if (!this.activePointers.has(e.pointerId)) return;
       this.activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
       if (this.activePointers.size >= 2) {
@@ -319,12 +325,14 @@ var OrbitCamera = class {
     };
     this.onWheel = (e) => {
       e.preventDefault();
+      if (!this.interactionEnabled) return;
       const unit = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? 100 : 1;
       const norm2 = Math.max(-2, Math.min(2, e.deltaY * unit / 100));
       this.dollyBy(Math.exp(norm2 * 0.22));
       this.fireGesture();
     };
     this.onKeyDown = (e) => {
+      if (!this.interactionEnabled) return;
       const step = 7 * DEG;
       if (e.shiftKey && (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown")) {
         this.panBy(
@@ -422,6 +430,7 @@ var OrbitCamera = class {
   /** Programmatic zoom used by the visible camera controls. Keeping it on the
    * same dolly path as wheel, pinch and keyboard preserves all distance limits. */
   zoomBy(factor) {
+    if (!this.interactionEnabled) return;
     this.dollyBy(factor);
     this.fireGesture();
   }
@@ -431,6 +440,15 @@ var OrbitCamera = class {
   setPrimaryDragMode(mode) {
     this.primaryDragMode = mode;
   }
+  /** Enable venue navigation or pin the current camera pose for seat-eye mode. */
+  setInteractionEnabled(enabled) {
+    this.interactionEnabled = enabled;
+    if (enabled) return;
+    this.activePointers.clear();
+    this.dragging = false;
+    this.panning = false;
+    this.pinchDist = 0;
+  }
   /**
    * Fit a flattering 3/4 view to the bounds sphere. With `intro`, the camera
    * STARTS nearly top-down (matching the 2D map's orientation) and further out,
@@ -487,6 +505,26 @@ var OrbitCamera = class {
     this.polT = 55 * DEG;
     this.distT = fit * FRAME_MARGIN;
   }
+  /**
+   * Tighten the depth range around the actual venue bounds for the current pose.
+   *
+   * A fixed 0.1..5000 m frustum gives an ordinary arena centimetre-scale depth
+   * precision at overview distance—coarser than the separation between a row
+   * tread and its structural cap. The resulting z quantisation is the black
+   * radial comb previously seen while zooming. A padded bounds sphere contains
+   * every venue solid while preserving useful precision outside the bowl; when
+   * the camera enters that sphere, the near plane safely returns to 5 cm.
+   */
+  updateClipping(bounds) {
+    const dx = this.camera.position.x - bounds.center[0];
+    const dy = this.camera.position.y - bounds.center[1];
+    const dz = this.camera.position.z - bounds.center[2];
+    const distance = Math.hypot(dx, dy, dz);
+    const paddedRadius = Math.max(1, bounds.radius) * 1.18;
+    const near = Math.max(0.05, distance - paddedRadius);
+    const far = Math.max(near + 10, distance + paddedRadius);
+    this.camera.perspective({ near, far, aspect: this.camera.aspect });
+  }
   /** Damp toward targets; returns true while still moving. */
   update() {
     const da = this.azT - this.azimuth;
@@ -605,8 +643,12 @@ var RenderLoop = class {
 // src/view3d/lod.ts
 var SEAT_MIN_PIXELS_NEAR = 2.5;
 var SEAT_MIN_PIXELS_FAR = 1.15;
-var CHAIR_FULL_M = 12;
-var CHAIR_NONE_M = 22;
+var CHAIR_FULL_M = 6;
+var CHAIR_NONE_M = 10;
+var OCCUPANT_FULL_M = 6;
+var OCCUPANT_NONE_M = 9.5;
+var OCCUPANT_NEAR_NONE_M = 0.9;
+var OCCUPANT_NEAR_FULL_M = 2.2;
 var CHAIR_GATHER_M = 30;
 var CHAIR_REBUILD_M = 4;
 var CHAIR_MAX_INSTANCES = 8192;
@@ -777,13 +819,19 @@ var MeshBuilder = class {
     this.nor = new F32Buffer();
     this.col = new F32Buffer();
     this.flr = new F32Buffer();
+    this.mat = new F32Buffer();
     /** Floor index stamped onto every triangle emitted from now on. */
     this.currentFloor = 0;
+    this.currentMaterial = 0;
   }
   /** Stamp subsequent triangles as belonging to `index`. */
   setFloor(index) {
     this.currentFloor = index;
   }
+  /** Stamp subsequent triangles with a small renderer material class. */
+  setMaterial(index) {
+    this.currentMaterial = index;
+  }
   /** One triangle with a shared (flat) normal and per-vertex colours. */
   tri(p0, p1, p2, n, c0, c1 = c0, c2 = c0) {
     if (isDegenerate(p0, p1, p2)) return;
@@ -799,10 +847,13 @@ var MeshBuilder = class {
     this.flr.push1(this.currentFloor);
     this.flr.push1(this.currentFloor);
     this.flr.push1(this.currentFloor);
+    this.mat.push1(this.currentMaterial);
+    this.mat.push1(this.currentMaterial);
+    this.mat.push1(this.currentMaterial);
   }
   /** One triangle with independent per-vertex normals (smooth shading). */
   triN(p0, p1, p2, n0, n1, n2, c0, c1 = c0, c2 = c0) {
-    if (isDegenerate(p0, p1, p2)) return;
+    if (![...p0, ...p1, ...p2].every(Number.isFinite)) return;
     this.pos.push3(p0[0], p0[1], p0[2]);
     this.pos.push3(p1[0], p1[1], p1[2]);
     this.pos.push3(p2[0], p2[1], p2[2]);
@@ -815,6 +866,9 @@ var MeshBuilder = class {
     this.flr.push1(this.currentFloor);
     this.flr.push1(this.currentFloor);
     this.flr.push1(this.currentFloor);
+    this.mat.push1(this.currentMaterial);
+    this.mat.push1(this.currentMaterial);
+    this.mat.push1(this.currentMaterial);
   }
   get vertexCount() {
     return this.pos.length / 3;
@@ -825,6 +879,7 @@ var MeshBuilder = class {
       normal: this.nor.toArray(),
       color: this.col.toArray(),
       floor: this.flr.toArray(),
+      material: this.mat.toArray(),
       count: this.pos.length / 3
     };
   }
@@ -1067,15 +1122,17 @@ function mergeMeshData(parts) {
   const normal = new Float32Array(total * 3);
   const color = new Float32Array(total * 3);
   const floor = new Float32Array(total);
+  const material = new Float32Array(total);
   let off = 0;
   for (const p of parts) {
     position.set(p.position, off * 3);
     normal.set(p.normal, off * 3);
     color.set(p.color, off * 3);
     floor.set(p.floor, off);
+    material.set(p.material, off);
     off += p.count;
   }
-  return { position, normal, color, floor, count: total };
+  return { position, normal, color, floor, material, count: total };
 }
 function outsetRing(ring, d, miterLimit = 2.5) {
   if (d <= 0 || ring.length < 3) return ring;
@@ -1169,7 +1226,7 @@ var BACK_RAKE_SLOPE = 0.21;
 var PAD_BACK_GAP_M = 0.05;
 var PAD_TOP_M = 0.45;
 var BACK_BASE_M = PAD_TOP_M + PAD_BACK_GAP_M;
-var BOXES = [
+var CHAIR_BOXES = [
   // Pedestal — a plain column under the pad. Without it the pad floats 0.36 m
   // over the deck and the row reads as hovering trays.
   { part: CHAIR_PART.pedestal, min: [-0.3, 0, -0.3], max: [0.3, 0.36, 0.3] },
@@ -1184,39 +1241,22 @@ var BOXES = [
     part: CHAIR_PART.back,
     min: [-1, BACK_BASE_M, -1],
     max: [1, 0.92, -0.72]
-  },
-  // --- the occupant ---------------------------------------------------------
-  //
-  // A hall with every seat empty reads as an architectural model, not a venue.
-  // The 2048-px panorama this replaced drew a crowd; losing it was the price of
-  // sharpness, and this is how it is bought back — in geometry, where there is
-  // no resolution ceiling.
-  //
-  // Deliberately two blocks and no limbs. At the range these are visible a
-  // person is a torso and a head, and every extra part multiplies by the number
-  // of occupied seats in view. The silhouette is what carries it, exactly as it
-  // does in the generated panorama's head-and-shoulder figures.
-  //
-  // Sized as a seated adult against the 0.92 m chair back: hips at the pad top,
-  // shoulders just above the back panel, head clear of it. Torso is narrower
-  // than the chair so neighbours never interpenetrate at any pitch, and it sits
-  // forward of the back panel rather than inside it.
-  {
-    part: CHAIR_PART.body,
-    min: [-0.66, PAD_TOP_M, -0.58],
-    max: [0.66, 1, 0.26]
-  },
-  // The head is deliberately SMALL. Sized by eye against the chair it came out
-  // near-cubic and read as Lego; a real head is about 0.16 m across and 0.22 m
-  // tall, which against a 0.24 m chair half-width is roughly a third of the
-  // chair's width and clearly taller than it is wide. Getting this ratio wrong
-  // is what makes a crowd look like toys rather than people.
-  {
-    part: CHAIR_PART.head,
-    min: [-0.34, 1.03, -0.4],
-    max: [0.34, 1.27, 0.02]
   }
 ];
+var OCCUPANT_BOXES = [
+  // Thighs project forward from the pad. A single lap slab brought back the
+  // same toy-block problem as the old torso, so each leg keeps its own outline.
+  { part: CHAIR_PART.body, min: [-0.52, 0.39, -0.08], max: [-0.08, 0.55, 0.82] },
+  { part: CHAIR_PART.body, min: [0.08, 0.39, -0.08], max: [0.52, 0.55, 0.82] },
+  // Lower legs drop from the knees, making the pose unmistakably seated from
+  // the side and from the elevated arena camera.
+  { part: CHAIR_PART.body, min: [-0.47, 0.05, 0.58], max: [-0.13, 0.43, 0.82] },
+  { part: CHAIR_PART.body, min: [0.13, 0.05, 0.58], max: [0.47, 0.43, 0.82] },
+  // A short neck keeps the head connected to the shoulders from behind. Most
+  // of it sits inside the torso/head overlap: a long exposed cuboid made the
+  // close-range figure read as a mannequin on a post.
+  { part: CHAIR_PART.head, min: [-0.16, 1.04, -0.33], max: [0.16, 1.1, -0.13] }
+];
 var FACES = [
   // +X
   { n: [1, 0, 0], c: [[1, 0, 0], [1, 1, 0], [1, 1, 1], [1, 0, 1]] },
@@ -1232,63 +1272,111 @@ var FACES = [
   { n: [0, 0, -1], c: [[1, 0, 0], [0, 0, 0], [0, 1, 0], [1, 1, 0]] }
 ];
 function buildChairMesh() {
-  const vertexCount = BOXES.length * FACES.length * 4;
-  const indexCount = BOXES.length * FACES.length * 6;
-  const position = new Float32Array(vertexCount * 3);
-  const normal = new Float32Array(vertexCount * 3);
-  const part = new Float32Array(vertexCount);
-  const index = new Uint16Array(indexCount);
-  let v = 0;
-  let t = 0;
-  for (const box of BOXES) {
+  const positions = [];
+  const normals = [];
+  const parts = [];
+  const indices = [];
+  const addQuad = (corners, outward, partId) => {
+    const base = parts.length;
+    const [a, b, c] = corners;
+    const ab = [b[0] - a[0], b[1] - a[1], b[2] - a[2]];
+    const ac = [c[0] - a[0], c[1] - a[1], c[2] - a[2]];
+    let nx = ab[1] * ac[2] - ab[2] * ac[1];
+    let ny = ab[2] * ac[0] - ab[0] * ac[2];
+    let nz = ab[0] * ac[1] - ab[1] * ac[0];
+    const length = Math.hypot(nx, ny, nz);
+    if (length > 1e-9) {
+      nx /= length;
+      ny /= length;
+      nz /= length;
+    } else {
+      [nx, ny, nz] = outward;
+    }
+    if (nx * outward[0] + ny * outward[1] + nz * outward[2] < 0) {
+      nx = -nx;
+      ny = -ny;
+      nz = -nz;
+    }
+    for (const corner of corners) {
+      positions.push(...corner);
+      normals.push(nx, ny, nz);
+      parts.push(partId);
+    }
+    indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+  };
+  const addBox = (box) => {
     for (const face of FACES) {
-      const base = v;
-      const corner3 = new Float32Array(12);
-      for (let ci = 0; ci < 4; ci++) {
-        const corner = face.c[ci];
-        for (let a = 0; a < 3; a++) {
-          corner3[ci * 3 + a] = corner[a] ? box.max[a] : box.min[a];
-        }
-      }
-      const ax = corner3[3] - corner3[0], ay = corner3[4] - corner3[1], az = corner3[5] - corner3[2];
-      const bx = corner3[6] - corner3[0], by = corner3[7] - corner3[1], bz = corner3[8] - corner3[2];
-      let nx = ay * bz - az * by;
-      let ny = az * bx - ax * bz;
-      let nz = ax * by - ay * bx;
-      const nl = Math.hypot(nx, ny, nz);
-      if (nl > 1e-9) {
-        nx /= nl;
-        ny /= nl;
-        nz /= nl;
-      } else {
-        nx = face.n[0];
-        ny = face.n[1];
-        nz = face.n[2];
-      }
-      if (nx * face.n[0] + ny * face.n[1] + nz * face.n[2] < 0) {
-        nx = -nx;
-        ny = -ny;
-        nz = -nz;
-      }
-      for (let ci = 0; ci < 4; ci++) {
-        position[v * 3] = corner3[ci * 3];
-        position[v * 3 + 1] = corner3[ci * 3 + 1];
-        position[v * 3 + 2] = corner3[ci * 3 + 2];
-        normal[v * 3] = nx;
-        normal[v * 3 + 1] = ny;
-        normal[v * 3 + 2] = nz;
-        part[v] = box.part;
-        v++;
-      }
-      index[t++] = base;
-      index[t++] = base + 1;
-      index[t++] = base + 2;
-      index[t++] = base;
-      index[t++] = base + 2;
-      index[t++] = base + 3;
+      const corners = face.c.map((corner) => corner.map(
+        (side, axis) => side ? box.max[axis] : box.min[axis]
+      ));
+      addQuad(corners, face.n, box.part);
     }
-  }
-  return { position, normal, part, index, vertexCount, indexCount };
+  };
+  for (const box of CHAIR_BOXES) addBox(box);
+  for (const box of OCCUPANT_BOXES) addBox(box);
+  const waistY = PAD_TOP_M;
+  const shoulderY = 1.08;
+  const wb = 0.47, wt = 0.69;
+  const backBottom = -0.55, frontBottom = 0.08;
+  const backTop = -0.48, frontTop = 0.01;
+  const blb = [-wb, waistY, backBottom], brb = [wb, waistY, backBottom];
+  const blf = [-wb, waistY, frontBottom], brf = [wb, waistY, frontBottom];
+  const tlb = [-wt, shoulderY, backTop], trb = [wt, shoulderY, backTop];
+  const tlf = [-wt, shoulderY, frontTop], trf = [wt, shoulderY, frontTop];
+  addQuad([brb, trb, trf, brf], [1, 0, 0], CHAIR_PART.body);
+  addQuad([blf, tlf, tlb, blb], [-1, 0, 0], CHAIR_PART.body);
+  addQuad([tlf, trf, trb, tlb], [0, 1, 0], CHAIR_PART.body);
+  addQuad([blb, brb, brf, blf], [0, -1, 0], CHAIR_PART.body);
+  addQuad([brf, trf, tlf, blf], [0, 0, 1], CHAIR_PART.body);
+  addQuad([blb, tlb, trb, brb], [0, 0, -1], CHAIR_PART.body);
+  const lonSegments = 10;
+  const latSegments = 8;
+  const centre = [0, 1.205, -0.23];
+  const radii = [0.42, 0.115, 0.38];
+  const headBase = parts.length;
+  for (let lat = 0; lat <= latSegments; lat++) {
+    const theta = Math.PI * lat / latSegments;
+    const sy = Math.cos(theta);
+    const ring = Math.sin(theta);
+    for (let lon = 0; lon <= lonSegments; lon++) {
+      const phi = Math.PI * 2 * lon / lonSegments;
+      const dx = ring * Math.cos(phi);
+      const dz = ring * Math.sin(phi);
+      positions.push(
+        centre[0] + radii[0] * dx,
+        centre[1] + radii[1] * sy,
+        centre[2] + radii[2] * dz
+      );
+      let nx = dx / radii[0];
+      let ny = sy / radii[1];
+      let nz = dz / radii[2];
+      const length = Math.hypot(nx, ny, nz) || 1;
+      nx /= length;
+      ny /= length;
+      nz /= length;
+      normals.push(nx, ny, nz);
+      parts.push(CHAIR_PART.head);
+    }
+  }
+  for (let lat = 0; lat < latSegments; lat++) {
+    for (let lon = 0; lon < lonSegments; lon++) {
+      const a = headBase + lat * (lonSegments + 1) + lon;
+      const b = a + lonSegments + 1;
+      indices.push(a, b, a + 1, a + 1, b, b + 1);
+    }
+  }
+  const position = new Float32Array(positions);
+  const normal = new Float32Array(normals);
+  const part = new Float32Array(parts);
+  const index = new Uint16Array(indices);
+  return {
+    position,
+    normal,
+    part,
+    index,
+    vertexCount: parts.length,
+    indexCount: indices.length
+  };
 }
 function computeSeatYaw(iPosition, count, rowIdAt, focal) {
   const yaw = new Float32Array(count);
@@ -1592,7 +1680,7 @@ function focusScore(screen, worldDistance, width, height) {
   return worldDistance * (1 + 1.5 * off);
 }
 function pickDenseLabels(items, separationX, separationY, budget) {
-  const ordered = [...items].sort((a, b) => a.focus - b.focus);
+  const ordered = [...items].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0) || a.focus - b.focus);
   const kept = [];
   for (const item of ordered) {
     if (kept.length >= budget) break;
@@ -2204,19 +2292,31 @@ function emitDeckBands(builder, rows, focal, landingY, colors, clip, shared) {
   const UP = [0, 1, 0];
   const clipRing = clip && clip.length >= 3 ? [[...clip.map((p) => [p.x, p.y]), [clip[0].x, clip[0].y]]] : null;
   const clipTest = clip && clip.length >= 3 ? new ClipTest([[...clip]]) : null;
+  const emitRiser = (draw) => {
+    builder.setMaterial(2);
+    draw();
+    builder.setMaterial(0);
+  };
+  const emitTread = (draw) => {
+    builder.setMaterial(3);
+    draw();
+    builder.setMaterial(0);
+  };
   for (let i = 0; i < rows.length; i++) {
     const row = rows[i];
     if (row.patch && row.patch.length >= 3) {
       const patch = [...row.patch];
       const belowY2 = nbrs[i].belowY ?? landingY;
-      if (clipRing && clipTest) emitClippedPoly(builder, clipRing, clipTest, patch, row.y, colors.tread);
-      else {
-        const a = patch[0];
-        for (let k = 1; k + 1 < patch.length; k++) {
-          const b = patch[k], c = patch[k + 1];
-          builder.tri([a.x * M, row.y, a.y * M], [b.x * M, row.y, b.y * M], [c.x * M, row.y, c.y * M], UP, colors.tread);
+      emitTread(() => {
+        if (clipRing && clipTest) emitClippedPoly(builder, clipRing, clipTest, patch, row.y, colors.tread);
+        else {
+          const a = patch[0];
+          for (let k = 1; k + 1 < patch.length; k++) {
+            const b = patch[k], c = patch[k + 1];
+            builder.tri([a.x * M, row.y, a.y * M], [b.x * M, row.y, b.y * M], [c.x * M, row.y, c.y * M], UP, colors.tread);
+          }
         }
-      }
+      });
       if (row.y > belowY2 + MIN_RISER_M) {
         let cx = 0, cy = 0;
         for (const p of patch) {
@@ -2225,24 +2325,26 @@ function emitDeckBands(builder, rows, focal, landingY, colors, clip, shared) {
         }
         cx /= patch.length;
         cy /= patch.length;
-        for (let k = 0; k < patch.length; k++) {
-          const p = patch[k], q = patch[(k + 1) % patch.length];
-          const dx = q.x - p.x, dy = q.y - p.y;
-          const len = Math.hypot(dx, dy);
-          if (len < 1e-6) continue;
-          let nx = dy / len, ny = -dx / len;
-          if ((p.x - cx) * nx + (p.y - cy) * ny < 0) {
-            nx = -nx;
-            ny = -ny;
+        emitRiser(() => {
+          for (let k = 0; k < patch.length; k++) {
+            const p = patch[k], q = patch[(k + 1) % patch.length];
+            const dx = q.x - p.x, dy = q.y - p.y;
+            const len = Math.hypot(dx, dy);
+            if (len < 1e-6) continue;
+            let nx = dy / len, ny = -dx / len;
+            if ((p.x - cx) * nx + (p.y - cy) * ny < 0) {
+              nx = -nx;
+              ny = -ny;
+            }
+            const rn = [nx, 0, ny];
+            const pt = [p.x * M, row.y, p.y * M];
+            const qt = [q.x * M, row.y, q.y * M];
+            const pb = [p.x * M, belowY2, p.y * M];
+            const qb = [q.x * M, belowY2, q.y * M];
+            builder.tri(pt, qt, qb, rn, colors.riser);
+            builder.tri(pt, qb, pb, rn, colors.riser);
           }
-          const rn = [nx, 0, ny];
-          const pt = [p.x * M, row.y, p.y * M];
-          const qt = [q.x * M, row.y, q.y * M];
-          const pb = [p.x * M, belowY2, p.y * M];
-          const qb = [q.x * M, belowY2, q.y * M];
-          builder.tri(pt, qt, qb, rn, colors.riser);
-          builder.tri(pt, qb, pb, rn, colors.riser);
-        }
+        });
       }
       continue;
     }
@@ -2259,23 +2361,27 @@ function emitDeckBands(builder, rows, focal, landingY, colors, clip, shared) {
       const qF = [(q.x - nq[0] * front) * M, row.y, (q.y - nq[1] * front) * M];
       const pB = [(p.x + np[0] * back) * M, row.y, (p.y + np[1] * back) * M];
       const qB = [(q.x + nq[0] * back) * M, row.y, (q.y + nq[1] * back) * M];
-      if (clipRing && clipTest) {
-        emitClippedPoly(builder, clipRing, clipTest, [
-          { x: p.x - np[0] * front, y: p.y - np[1] * front },
-          { x: q.x - nq[0] * front, y: q.y - nq[1] * front },
-          { x: q.x + nq[0] * back, y: q.y + nq[1] * back },
-          { x: p.x + np[0] * back, y: p.y + np[1] * back }
-        ], row.y, colors.tread);
-      } else {
-        builder.tri(pF, qF, qB, UP, colors.tread);
-        builder.tri(pF, qB, pB, UP, colors.tread);
-      }
+      emitTread(() => {
+        if (clipRing && clipTest) {
+          emitClippedPoly(builder, clipRing, clipTest, [
+            { x: p.x - np[0] * front, y: p.y - np[1] * front },
+            { x: q.x - nq[0] * front, y: q.y - nq[1] * front },
+            { x: q.x + nq[0] * back, y: q.y + nq[1] * back },
+            { x: p.x + np[0] * back, y: p.y + np[1] * back }
+          ], row.y, colors.tread);
+        } else {
+          builder.tri(pF, qF, qB, UP, colors.tread);
+          builder.tri(pF, qB, pB, UP, colors.tread);
+        }
+      });
       if (row.y > belowY + MIN_RISER_M) {
         const pFd = [pF[0], belowY, pF[2]];
         const qFd = [qF[0], belowY, qF[2]];
         const rn = [-np[0], 0, -np[1]];
-        builder.tri(pF, qF, qFd, rn, colors.riser);
-        builder.tri(pF, qFd, pFd, rn, colors.riser);
+        emitRiser(() => {
+          builder.tri(pF, qF, qFd, rn, colors.riser);
+          builder.tri(pF, qFd, pFd, rn, colors.riser);
+        });
       }
     }
   }
@@ -2620,18 +2726,21 @@ function buildTier(builder, section, unit, fill, surface, claimed, siblings, S)
     const blocks = clipFootprints(deckFootprints(surface.rowLevels, unit.focal, nbrs), footprint);
     const capUp = () => [0, 1, 0];
     for (const b of blocks) {
-      extrudePrism(
-        builder,
-        b.outline,
-        b.holes,
-        () => b.topY,
-        bottomY,
-        colTop,
-        S.tierWall,
-        AO,
-        void 0,
-        capUp
-      );
+      const baseCapY = Math.max(bottomY, b.topY - 0.02);
+      for (const ring of claimed.subtract(b.outline, baseCapY)) {
+        extrudePrism(
+          builder,
+          ring,
+          b.holes,
+          () => baseCapY,
+          bottomY,
+          colTop,
+          S.tierWall,
+          AO,
+          void 0,
+          capUp
+        );
+      }
     }
     if (!blocks.length) {
       extrudePrism(
@@ -2645,12 +2754,23 @@ function buildTier(builder, section, unit, fill, surface, claimed, siblings, S)
         AO
       );
     }
-    emitDeckBands(builder, surface.rowLevels, unit.focal, surface.landingY, {
+    const bandColors = {
       tread: [colTop[0] * AO.top, colTop[1] * AO.top, colTop[2] * AO.top],
       // Risers read as the structure they are, a shade below their tread, which
       // is what makes the stepping legible from a low angle.
       riser: [colTop[0] * 0.72, colTop[1] * 0.72, colTop[2] * 0.72]
-    }, footprint.length === 1 ? outline : footprint.flat(), nbrs);
+    };
+    for (const allowed of footprint.length ? footprint : [outline]) {
+      emitDeckBands(
+        builder,
+        surface.rowLevels,
+        unit.focal,
+        surface.landingY,
+        bandColors,
+        allowed,
+        nbrs
+      );
+    }
     return;
   }
   const maxErr = surface.flat ? Infinity : CAP_MAX_ERROR_M;
@@ -2904,8 +3024,10 @@ function buildShape(builder, shape, base, topOffsetM, S, focal, stages) {
       halfZ: Math.max((maxZ - minZ) / 2 * M, 0.5)
     });
   }
-  const colTop = tintTop(hexToRgb(shape.fill), isStage ? S.stageTop : S.decorTop);
-  const colWall = isStage ? S.stageWall : shape.role === "screen" ? [0.24, 0.46, 0.82] : tintTop(hexToRgb(shape.fill), S.decorWall);
+  const authoredFill = hexToRgb(shape.fill);
+  const colTop = isStage && authoredFill ? mix(S.stageTop, scaleRgb(desaturate(authoredFill, 0.18), 0.9), 0.9) : tintTop(authoredFill, isStage ? S.stageTop : S.decorTop);
+  const screenFill = shape.role === "screen" ? authoredFill : null;
+  const colWall = isStage ? authoredFill ? mix(S.stageWall, scaleRgb(authoredFill, 0.58), 0.82) : S.stageWall : shape.role === "screen" ? screenFill ? mix(scaleRgb(screenFill, 1.42), [0.24, 0.46, 0.82], 0.08) : [0.24, 0.46, 0.82] : tintTop(hexToRgb(shape.fill), S.decorWall);
   if (architecture.kind === "portal" && poly.length === 4) {
     const quad = orientQuadLong(poly);
     emitArchitecturalPrism(builder, quadWidthSlice(quad, 0, 0.16), height, base, colTop, colWall);
@@ -3045,16 +3167,19 @@ function buildSceneModel(input) {
     const siblings = unit.objects.filter((o) => o.type === "section" && !!o.outline && o.outline.length >= 3);
     for (const o of unit.objects) {
       if (o.type === "section") buildTier(builder, o, unit, sectionFill(o, sectionFills), surfaces.bySection.get(o.id), claimed, siblings, S);
-      else if (o.type === "shape") buildShape(
-        builder,
-        o,
-        unit.baseHeightM,
-        claimShapeTopOffset(o, claimedShapeLayers),
-        S,
-        unit.focal,
-        stageBounds
-      );
-      else if (o.type === "gaArea") buildGa(builder, o, unit.baseHeightM, hexToRgb(catColor.get(o.categoryKey)), S);
+      else if (o.type === "shape") {
+        builder.setMaterial(o.role === "screen" ? 1 : 0);
+        buildShape(
+          builder,
+          o,
+          unit.baseHeightM,
+          claimShapeTopOffset(o, claimedShapeLayers),
+          S,
+          unit.focal,
+          stageBounds
+        );
+        builder.setMaterial(0);
+      } else if (o.type === "gaArea") buildGa(builder, o, unit.baseHeightM, hexToRgb(catColor.get(o.categoryKey)), S);
       else if (o.type === "booth") buildBooth(builder, o, unit.baseHeightM, hexToRgb(catColor.get(o.categoryKey)), S);
       else if (o.type === "table") buildTable(builder, o, unit.baseHeightM, hexToRgb(catColor.get(o.categoryKey)), S);
       else if (o.type === "decorImage") buildDecorImage(builder, o, unit.baseHeightM, S);
@@ -3360,10 +3485,49 @@ function buildSceneModel(input) {
   const cx = (fp.minX + fp.maxX) / 2 * M;
   const cz = (fp.minY + fp.maxY) / 2 * M;
   const radius = 0.5 * Math.hypot((fp.maxX - fp.minX) * M, (fp.maxY - fp.minY) * M) || 10;
+  let renderMinX = Infinity, renderMinY = Infinity, renderMinZ = Infinity;
+  let renderMaxX = -Infinity, renderMaxY = -Infinity, renderMaxZ = -Infinity;
+  const includeRenderPoint = (x, y, z) => {
+    renderMinX = Math.min(renderMinX, x);
+    renderMaxX = Math.max(renderMaxX, x);
+    renderMinY = Math.min(renderMinY, y);
+    renderMaxY = Math.max(renderMaxY, y);
+    renderMinZ = Math.min(renderMinZ, z);
+    renderMaxZ = Math.max(renderMaxZ, z);
+  };
+  for (let i = 0; i < solids.position.length; i += 3) {
+    includeRenderPoint(solids.position[i], solids.position[i + 1], solids.position[i + 2]);
+  }
+  for (let i = 0; i < seatData.count; i++) {
+    const o = i * 3;
+    const x = seatData.iPosition[o], y = seatData.iPosition[o + 1], z = seatData.iPosition[o + 2];
+    const r = Math.max(0.35, seatData.iMaxRadius[i] ?? 0.35);
+    includeRenderPoint(x - r, y, z - r);
+    includeRenderPoint(x + r, y + 1.6, z + r);
+  }
+  if (!Number.isFinite(renderMinX)) {
+    renderMinX = cx - radius;
+    renderMaxX = cx + radius;
+    renderMinY = 0;
+    renderMaxY = radius * 0.16;
+    renderMinZ = cz - radius;
+    renderMaxZ = cz + radius;
+  }
+  const renderCenter = [
+    (renderMinX + renderMaxX) / 2,
+    (renderMinY + renderMaxY) / 2,
+    (renderMinZ + renderMaxZ) / 2
+  ];
+  const renderRadius = Math.max(1, 0.5 * Math.hypot(
+    renderMaxX - renderMinX,
+    renderMaxY - renderMinY,
+    renderMaxZ - renderMinZ
+  ));
   return {
     solids,
     seats: seatData,
     bounds: { center: [cx, radius * 0.08, cz], radius, groundY: 0 },
+    renderBounds: { center: renderCenter, radius: renderRadius },
     stateColorLUT: themeSeatColorLUT(theme, SEAT_STATES),
     theme,
     seatCount: seats.length,
@@ -3407,6 +3571,7 @@ var LabelOverlay = class {
     this.nodes = /* @__PURE__ */ new Map();
     this.labels = [];
     this.forcedDense = false;
+    this.selectedSeatLabelIds = /* @__PURE__ */ new Set();
     this.opts = opts;
     this.root = document.createElement("div");
     this.root.setAttribute("data-view3d-labels", "");
@@ -3446,6 +3611,12 @@ var LabelOverlay = class {
   setForcedDense(enabled) {
     this.forcedDense = enabled;
   }
+  /** Keep the authoritative selected identities pinned above nearby dense
+   * labels. The seat mesh and its DOM label must never describe different
+   * rows merely because collision suppression preferred the neighbour. */
+  setSelectedSeatIds(ids) {
+    this.selectedSeatLabelIds = new Set(Array.from(ids, (id) => `seat:${id}`));
+  }
   /**
    * Reposition every label for the current camera.
    *
@@ -3468,7 +3639,12 @@ var LabelOverlay = class {
         label.anchor[1] - cameraWorld[1],
         label.anchor[2] - cameraWorld[2]
       ) : 1;
-      candidates.push({ label, screen, focus: focusScore(screen, world, width, height) });
+      candidates.push({
+        label,
+        screen,
+        focus: focusScore(screen, world, width, height),
+        ...this.selectedSeatLabelIds.has(label.id) ? { priority: 1 } : {}
+      });
     }
     const structure = candidates.filter((c) => !DENSE_KINDS.has(c.label.kind));
     const kept = [
@@ -3496,26 +3672,35 @@ var LabelOverlay = class {
   }
   nodeFor(label) {
     let node = this.nodes.get(label.id);
-    if (node) return node;
-    node = document.createElement("div");
+    if (!node) {
+      node = document.createElement("div");
+      const s2 = node.style;
+      s2.position = "absolute";
+      s2.left = "0";
+      s2.top = "0";
+      s2.whiteSpace = "nowrap";
+      s2.textShadow = "0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.55)";
+      s2.display = "none";
+      this.root.appendChild(node);
+      this.nodes.set(label.id, node);
+    }
     node.textContent = label.text;
     node.setAttribute("data-label-kind", label.kind);
+    const selected = this.selectedSeatLabelIds.has(label.id);
+    node.toggleAttribute("data-selected-seat", selected);
     const style = KIND_STYLE[label.kind];
     const s = node.style;
-    s.position = "absolute";
-    s.left = "0";
-    s.top = "0";
-    s.whiteSpace = "nowrap";
     s.fontSize = `${style.size}px`;
-    s.fontWeight = style.weight;
-    s.opacity = String(style.opacity);
-    s.color = label.color ?? this.opts.ink ?? "#e8edf5";
-    s.textShadow = "0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.55)";
+    s.fontWeight = selected ? "800" : style.weight;
+    s.opacity = selected ? "1" : String(style.opacity);
+    s.color = selected ? "#ecf8ff" : label.color ?? this.opts.ink ?? "#e8edf5";
+    s.background = selected ? "rgba(10,28,45,.9)" : "";
+    s.border = selected ? "1px solid rgba(89,199,255,.92)" : "";
+    s.borderRadius = selected ? "999px" : "";
+    s.padding = selected ? "3px 7px" : "";
+    s.boxShadow = selected ? "0 0 0 2px rgba(41,176,255,.18), 0 5px 14px rgba(0,0,0,.35)" : "";
     s.letterSpacing = label.kind === "zone" ? "0.08em" : "0.02em";
     if (label.kind === "zone") s.textTransform = "uppercase";
-    s.display = "none";
-    this.root.appendChild(node);
-    this.nodes.set(label.id, node);
     return node;
   }
   dispose() {
@@ -3536,6 +3721,15 @@ float chairWeight(float depth) {
   return 1.0 - smoothstep(uChairFull, uChairNone, depth);
 }`
 );
+var OCCUPANT_WEIGHT_GLSL = (
+  /* glsl */
+  `
+float occupantWeight(float depth) {
+  float nearWeight = smoothstep(${OCCUPANT_NEAR_NONE_M.toFixed(1)}, ${OCCUPANT_NEAR_FULL_M.toFixed(1)}, depth);
+  float farWeight = 1.0 - smoothstep(${OCCUPANT_FULL_M.toFixed(1)}, ${OCCUPANT_NONE_M.toFixed(1)}, depth);
+  return nearWeight * farWeight;
+}`
+);
 var SOLID_VERT = (
   /* glsl */
   `#version 300 es
@@ -3544,8 +3738,10 @@ in vec3 position;
 in vec3 normal;
 in vec3 color;
 in float floorIndex;
+in float materialIndex;
 uniform mat4 modelMatrix;
 uniform float uFocusFloor;   // -1 = show every floor
+uniform float uStructureDetail; // 0 = venue overview, 1 = section/row/seat
 uniform mat4 modelViewMatrix;
 uniform mat4 projectionMatrix;
 uniform mat3 normalMatrix;
@@ -3553,14 +3749,19 @@ out vec3 vColor;
 out vec3 vNormalWorld;
 out vec3 vNormalView;
 out vec3 vPosView;
+out vec3 vPosWorld;
 out float vDim;
+out float vMaterial;
 void main() {
   // Per-floor isolation without splitting the merged mesh into a draw call per
   // floor: a floor that is not the focused one is dimmed, not hidden, so the
   // buyer keeps the whole venue as context while looking at one level.
   vDim = (uFocusFloor < -0.5 || abs(floorIndex - uFocusFloor) < 0.5) ? 0.0 : 1.0;
+  vMaterial = materialIndex;
+  vec4 world = modelMatrix * vec4(position, 1.0);
   vec4 mv = modelViewMatrix * vec4(position, 1.0);
   vPosView = mv.xyz;
+  vPosWorld = world.xyz;
   vNormalView = normalize(normalMatrix * normal);
   // World normal drives the key + hemisphere so the lighting stays welded to the
   // venue as the camera orbits (the scene has no non-uniform scale, so mat3 of
@@ -3578,10 +3779,20 @@ in vec3 vColor;
 in vec3 vNormalWorld;
 in vec3 vNormalView;
 in vec3 vPosView;
+in vec3 vPosWorld;
 in float vDim;
+in float vMaterial;
 uniform vec3 uKeyDir;                           // WORLD space, unit, points at the light
+uniform float uStructureDetail;
 out vec4 fragColor;
 void main() {
+  // Row treads/risers are honest and useful when the buyer is inside a stand.
+  // At whole-venue scale their overlapping centimetre-scale surfaces quantise
+  // and alias into camera-dependent radial combs. The clean structural block
+  // cap remains, so overview keeps every stand without pretending to show row
+  // detail below a useful pixel size.
+  float rowDetail = step(1.5, vMaterial);
+  if (rowDetail > 0.5 && uStructureDetail < 0.5) discard;
   vec3 N = normalize(vNormalWorld);
   vec3 V = normalize(-vPosView);
   float hemi = 0.5 + 0.5 * N.y;                 // sky/ground gradient about WORLD up
@@ -3593,6 +3804,30 @@ void main() {
   vec3 base = vColor * (0.52 + 0.34 * hemi) + vColor * key * 0.34 + vColor * fill * 0.10;
   float fres = pow(1.0 - max(dot(normalize(vNormalView), V), 0.0), 3.0);
   base += vec3(0.26, 0.31, 0.38) * fres * 0.35; // cool rim, restrained (view-dependent by design)
+  // Bright, saturated authored screen faces should read as powered displays,
+  // not painted slabs. Vertex colour is deliberately the material signal here:
+  // muted tiers and structure never cross these thresholds. The broad waves
+  // supply a restrained procedural LED treatment without textures, downloads,
+  // solid fake-light geometry or post-processing.
+  float maxChannel = max(max(vColor.r, vColor.g), vColor.b);
+  float minChannel = min(min(vColor.r, vColor.g), vColor.b);
+  float poweredDisplay = (1.0 - step(0.5, abs(vMaterial - 1.0)))
+    * smoothstep(0.58, 0.72, maxChannel)
+    * smoothstep(0.28, 0.48, maxChannel - minChannel);
+  float verticalFace = 1.0 - smoothstep(0.20, 0.62, abs(N.y));
+  float wave = 0.5 + 0.5 * sin(vPosWorld.x * 0.44 + vPosWorld.y * 0.28);
+  float localX = vPosWorld.x;
+  float localY = vPosWorld.y;
+  float beamWest = exp(-pow((localX + 2.6 - localY * 0.22) * 0.44, 2.0));
+  float beamEast = exp(-pow((localX - 2.6 + localY * 0.22) * 0.44, 2.0));
+  float band = smoothstep(0.02, 0.16, 0.18 - abs(localY - 3.9));
+  float focalHalo = exp(-pow(localX * 0.26, 2.0) - pow((localY - 3.9) * 0.38, 2.0));
+  vec3 display = vColor * (0.74 + wave * 0.26)
+    + vec3(0.10, 0.30, 0.52) * beamWest
+    + vec3(0.34, 0.13, 0.42) * beamEast
+    + vec3(0.62, 0.46, 0.20) * band * 0.28
+    + vec3(0.20, 0.10, 0.34) * focalHalo;
+  base = mix(base, display, poweredDisplay * verticalFace * 0.92);
   // Unfocused floors fall back toward the background rather than vanishing.
   base = mix(base, base * 0.45, vDim);
   fragColor = vec4(base, 1.0);
@@ -3625,6 +3860,7 @@ out vec3 vRing;
 out float vDim;
 out float vDotWeight;  // 1 = the dot IS this seat, 0 = the chair has taken over
 out float vPhysicalSeat;
+out float vPixelRadius;
 ${CHAIR_WEIGHT_GLSL}
 void main() {
   vec4 mv = modelViewMatrix * vec4(iOffset, 1.0);
@@ -3638,6 +3874,7 @@ void main() {
   // Grow to hold the pixel floor, but never past this seat's own pitch ceiling:
   // unbounded growth is what merges neighbouring rows into one mass at range.
   float r = min(max(uSeatRadius * uSeatScale, minR), iMaxRadius);
+  vPixelRadius = r / max(depth * uPixelToWorld, 0.000001);
   // How much of the requested pixel floor the dot could actually afford. Below 1
   // it is losing legibility to distance, and the fragment stage dissolves it
   // toward the tier top rather than letting a sub-pixel dot alias and shimmer.
@@ -3670,10 +3907,13 @@ in vec3 vRing;
 in float vDim;
 in float vDotWeight;
 in float vPhysicalSeat;
+in float vPixelRadius;
 uniform float uSeatFade;      // fade toward tier colour with distance (LOD)
+uniform float uSeatDetail;    // 0 for venue/area overview; 1 in section/row/seat
 uniform vec3 uFadeColor;
 out vec4 fragColor;
 void main() {
+  if (uSeatDetail < 0.5) discard;
   // Empty wheelchair provision is a square bay, never a round chair marker.
   float d = mix(max(abs(vUv.x), abs(vUv.y)), length(vUv), vPhysicalSeat);
   if (d > 1.0) discard;
@@ -3692,6 +3932,20 @@ void main() {
   // aliasing; the tier cap underneath already carries the section's category
   // tint, so the block reads as coloured seating rather than empty concrete.
   alpha *= smoothstep(0.35, 1.0, vBudget);
+  // Do not rasterise inventory states until a dot is large enough to read as a
+  // seat rather than a sample in a dense screen-space pattern. This is based on
+  // actual projected pixels, so it remains correct for unusually large or small
+  // venues where a radius-normalised camera distance is misleading.
+  alpha *= smoothstep(2.4, 3.2, vPixelRadius);
+  // Inventory states are a section-level decision aid. At whole-venue/area
+  // scale the category-tinted structural surface is the honest, stable signal;
+  // thousands of enlarged status dots only form a moir\xE9 pattern. The journey
+  // state enables them when the buyer enters a section, row or exact seat.
+  // Whole-venue status detail is below a useful pixel size. Drawing every dot
+  // there turns concentric rows into camera-dependent moir\xE9 streaks, especially
+  // while zooming. uSeatFade already measures this exact LOD transition: let
+  // the category-tinted tier carry the overview, then reveal individual live
+  // availability as the buyer approaches a section.
   // Seats on an unfocused floor recede with their structure.
   c = mix(c, uFadeColor, vDim * 0.75);
   alpha *= mix(1.0, 0.30, vDim);
@@ -3736,9 +3990,15 @@ out float vDim;
 out float vOccupant; // 1 = this vertex belongs to a person, not to the chair
 out vec3 vOccupantTint;
 ${CHAIR_WEIGHT_GLSL}
+${OCCUPANT_WEIGHT_GLSL}
 void main() {
   vec4 anchor = modelViewMatrix * vec4(iOffset, 1.0);
-  float w = chairWeight(max(-anchor.z, 0.001));
+  float viewDepth = -anchor.z;
+  float depth = max(viewDepth, 0.001);
+  // A stale near-field gather can contain seats now behind the camera after a
+  // row\u2192overview move. Treating negative depth as 0.001 made those chairs full
+  // size across the near plane, producing the long black zoom streaks.
+  float w = viewDepth > 0.05 ? chairWeight(depth) : 0.0;
   // 1. Local units -> world metres. Only x/z scale: narrow rows get narrow
   //    chairs, but nobody gets a short one (people are the same height at every
   //    seat pitch).
@@ -3763,6 +4023,10 @@ void main() {
       // identical mannequins: +/-6% height and +/-8% width off the hash.
       p.y *= 0.94 + 0.12 * iSeed;
       p.xz *= 0.92 + 0.16 * fract(iSeed * 7.13);
+      // People only appear once they are large enough to read as people. At
+      // section/overview distance their tiny dark geometry aliases into radial
+      // streaks; seat dots already communicate held/booked state there.
+      p *= occupantWeight(depth);
     }
   }
   p.xz *= iRadius;
@@ -3801,7 +4065,7 @@ void main() {
   // not an audience. Hair/clothing for the body, a warm tone for the head,
   // both varied by the same per-person hash.
   float t = fract(iSeed * 3.71);
-  vec3 clothes = mix(vec3(0.13, 0.15, 0.20), vec3(0.34, 0.30, 0.36), t);
+  vec3 clothes = mix(vec3(0.18, 0.22, 0.30), vec3(0.42, 0.29, 0.34), t);
   vec3 skin = mix(vec3(0.52, 0.38, 0.29), vec3(0.86, 0.70, 0.58), fract(iSeed * 11.3));
   vOccupantTint = (part > 3.5) ? skin : clothes;
   vPart = part;
@@ -3905,14 +4169,19 @@ uniform float uSeatRadius;
 uniform float uSeatScale;
 uniform float uMinPixels;
 uniform float uPixelToWorld;
+uniform float uChairFull;
+uniform float uChairNone;
 out vec2 vUv;
 out float vPhysicalSeat;
+out float vDotWeight;
 flat out vec3 vPick;
+${CHAIR_WEIGHT_GLSL}
 void main() {
   int id = gl_InstanceID + 1;                 // 0 reserved for no-hit
   vPick = vec3(float(id & 255), float((id >> 8) & 255), float((id >> 16) & 255)) / 255.0;
   vec4 mv = modelViewMatrix * vec4(iOffset, 1.0);
   float depth = max(-mv.z, 0.001);
+  vDotWeight = 1.0 - chairWeight(depth);
   float minR = uMinPixels * depth * uPixelToWorld;
   float r = min(max(uSeatRadius * uSeatScale, minR), iMaxRadius);
   mv.xy += position * r;
@@ -3929,14 +4198,75 @@ var SEAT_PICK_FRAG = (
 precision highp float;
 in vec2 vUv;
 in float vPhysicalSeat;
+in float vDotWeight;
 flat in vec3 vPick;
 out vec4 fragColor;
 void main() {
+  if (vDotWeight <= 0.02) discard;              // invisible dot cannot steal a chair tap
   float d = mix(max(abs(vUv.x), abs(vUv.y)), length(vUv), vPhysicalSeat);
   if (d > 1.0) discard;                        // hit-mask matches chair/bay shape
   fragColor = vec4(vPick, 1.0);
 }`
 );
+var CHAIR_PICK_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 position;
+in float part;
+in vec3 iOffset;
+in float iRadius;
+in float iYaw;
+in float iSeed;
+in float iPhysicalSeat;
+in float iPickIndex;
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+uniform float uChairFull;
+uniform float uChairNone;
+uniform float uBackRake;
+uniform float uBackBase;
+flat out vec3 vPick;
+${CHAIR_WEIGHT_GLSL}
+${OCCUPANT_WEIGHT_GLSL}
+void main() {
+  int id = int(iPickIndex + 0.5);             // already global index + 1
+  vPick = vec3(float(id & 255), float((id >> 8) & 255), float((id >> 16) & 255)) / 255.0;
+  vec4 anchor = modelViewMatrix * vec4(iOffset, 1.0);
+  float viewDepth = -anchor.z;
+  float depth = max(viewDepth, 0.001);
+  float w = viewDepth > 0.05 ? chairWeight(depth) : 0.0;
+  vec3 p = position;
+  float occupant = step(2.5, part);
+  float taken = step(0.0, iSeed);
+  if (iPhysicalSeat < 0.5) {
+    p = vec3(0.0);
+  } else if (occupant > 0.5) {
+    if (taken < 0.5) {
+      p = vec3(0.0);
+    } else {
+      p.y *= 0.94 + 0.12 * iSeed;
+      p.xz *= 0.92 + 0.16 * fract(iSeed * 7.13);
+      p *= occupantWeight(depth);
+    }
+  }
+  p.xz *= iRadius;
+  float rake = (part > 1.5 && part < 2.5) ? max(p.y - uBackBase, 0.0) * uBackRake : 0.0;
+  p.z -= rake;
+  p *= sqrt(w);
+  float c = cos(iYaw), s = sin(iYaw);
+  vec3 rp = vec3(p.x * c + p.z * s, p.y, -p.x * s + p.z * c);
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(iOffset + rp, 1.0);
+}`
+);
+var CHAIR_PICK_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+flat in vec3 vPick;
+out vec4 fragColor;
+void main() { fragColor = vec4(vPick, 1.0); }`
+);
 var PICK_DEPTH_VERT = (
   /* glsl */
   `#version 300 es
@@ -3967,7 +4297,25 @@ function createSeatPickProgram(gl) {
       uSeatRadius: { value: SEAT_DOT_RADIUS_M },
       uSeatScale: { value: 1 },
       uMinPixels: { value: SEAT_MIN_PIXELS_NEAR },
-      uPixelToWorld: { value: 2e-3 }
+      uPixelToWorld: { value: 2e-3 },
+      uChairFull: { value: CHAIR_FULL_M },
+      uChairNone: { value: CHAIR_NONE_M }
+    }
+  });
+}
+function createChairPickProgram(gl) {
+  return new Program(gl, {
+    vertex: CHAIR_PICK_VERT,
+    fragment: CHAIR_PICK_FRAG,
+    transparent: false,
+    depthTest: true,
+    depthWrite: true,
+    cullFace: false,
+    uniforms: {
+      uChairFull: { value: CHAIR_FULL_M },
+      uChairNone: { value: CHAIR_NONE_M },
+      uBackRake: { value: BACK_RAKE_SLOPE },
+      uBackBase: { value: BACK_BASE_M }
     }
   });
 }
@@ -3996,7 +4344,8 @@ function createSolidProgram(gl) {
       // High and off-axis, in world space: reads as a house rig rather than a
       // headlamp welded to the camera.
       uKeyDir: { value: new Float32Array([0.38, 0.86, 0.34]) },
-      uFocusFloor: { value: -1 }
+      uFocusFloor: { value: -1 },
+      uStructureDetail: { value: 0 }
     }
   });
 }
@@ -4014,6 +4363,7 @@ function createSeatProgram(gl) {
       uMinPixels: { value: SEAT_MIN_PIXELS_NEAR },
       uPixelToWorld: { value: 2e-3 },
       uSeatFade: { value: 0 },
+      uSeatDetail: { value: 0 },
       uFocusFloor: { value: -1 },
       uFadeColor: { value: new Float32Array([0.32, 0.37, 0.43]) },
       uChairFull: { value: CHAIR_FULL_M },
@@ -4078,7 +4428,8 @@ function buildGpuScene(gl, model) {
     position: { size: 3, data: model.solids.position },
     normal: { size: 3, data: model.solids.normal },
     color: { size: 3, data: model.solids.color },
-    floorIndex: { size: 1, data: model.solids.floor }
+    floorIndex: { size: 1, data: model.solids.floor },
+    materialIndex: { size: 1, data: model.solids.material }
   });
   const solidProg = createSolidProgram(gl);
   const solidMesh = new Mesh(gl, { geometry: solidGeo, program: solidProg });
@@ -4114,6 +4465,7 @@ function buildGpuScene(gl, model) {
   const cRing = new Float32Array(CAP * 3);
   const cFloor = new Float32Array(CAP);
   const cPhysicalSeat = new Float32Array(CAP);
+  const cPickIndex = new Float32Array(CAP);
   const cSeed = new Float32Array(CAP);
   const chairGeo = new Geometry(gl, {
     position: { size: 3, data: chairBase.position },
@@ -4127,7 +4479,8 @@ function buildGpuScene(gl, model) {
     iRing: { size: 3, data: cRing, instanced: 1 },
     iFloor: { size: 1, data: cFloor, instanced: 1 },
     iPhysicalSeat: { size: 1, data: cPhysicalSeat, instanced: 1 },
-    iSeed: { size: 1, data: cSeed, instanced: 1 }
+    iSeed: { size: 1, data: cSeed, instanced: 1 },
+    iPickIndex: { size: 1, data: cPickIndex, instanced: 1 }
   });
   const chairMesh = new Mesh(gl, { geometry: chairGeo, program: chairProg });
   chairMesh.frustumCulled = false;
@@ -4137,6 +4490,7 @@ function buildGpuScene(gl, model) {
     const src = model.seats;
     for (let k = 0; k < nearCount; k++) {
       const i = nearIndices[k];
+      cSeed[k] = seatOccupantSeed(src.iState[i], i);
       const useCategory = src.iCategory && src.iState[i] === 0;
       const c = useCategory ? null : stateColors[src.iState[i]] ?? stateColors[0];
       if (c) {
@@ -4151,6 +4505,7 @@ function buildGpuScene(gl, model) {
       }
     }
     chairGeo.attributes.iColor.needsUpdate = true;
+    chairGeo.attributes.iSeed.needsUpdate = true;
   };
   const scene = {
     main,
@@ -4159,6 +4514,7 @@ function buildGpuScene(gl, model) {
     solidProgram: solidProg,
     chairProgram: chairProg,
     seatGeometry: seatGeo,
+    chairGeometry: chairGeo,
     solidGeometry: solidGeo,
     drawCalls: 3,
     setNearSeats(indices, count) {
@@ -4184,7 +4540,7 @@ function buildGpuScene(gl, model) {
         cRing[k * 3 + 2] = src.iRing[i * 3 + 2];
         cFloor[k] = src.iFloor[i];
         cPhysicalSeat[k] = src.iPhysicalSeat[i];
-        cSeed[k] = seatOccupantSeed(src.iState[i], i);
+        cPickIndex[k] = i + 1;
       }
       writeChairColors();
       chairGeo.attributes.iOffset.needsUpdate = true;
@@ -4194,6 +4550,7 @@ function buildGpuScene(gl, model) {
       chairGeo.attributes.iFloor.needsUpdate = true;
       chairGeo.attributes.iPhysicalSeat.needsUpdate = true;
       chairGeo.attributes.iSeed.needsUpdate = true;
+      chairGeo.attributes.iPickIndex.needsUpdate = true;
       chairGeo.instancedCount = n;
       if (!chairMesh.parent) chairMesh.setParent(main);
       scene.drawCalls = 4;
@@ -4273,8 +4630,9 @@ function pickPixelCoords(clientX, clientY, rect, dpr, bufferWidth, bufferHeight)
 // src/view3d/pick/pickPipeline.ts
 var SYNC_KEYS = ["uSeatRadius", "uSeatScale", "uMinPixels", "uPixelToWorld"];
 var PickPipeline = class {
-  constructor(renderer, seatGeo, solidGeo, seatCount) {
+  constructor(renderer, seatGeo, chairGeo, solidGeo, seatCount) {
     this.seatScene = new Transform2();
+    this.chairScene = new Transform2();
     this.solidScene = new Transform2();
     this.target = null;
     /** Display clear colour to restore after the pick pass (theme-dependent). */
@@ -4283,10 +4641,14 @@ var PickPipeline = class {
     this.gl = renderer.gl;
     this.maxIndex = seatCount;
     this.seatProg = createSeatPickProgram(this.gl);
+    this.chairProg = createChairPickProgram(this.gl);
     this.depthProg = createPickDepthProgram(this.gl);
     const seatMesh = new Mesh2(this.gl, { geometry: seatGeo, program: this.seatProg });
     seatMesh.frustumCulled = false;
     seatMesh.setParent(this.seatScene);
+    const chairMesh = new Mesh2(this.gl, { geometry: chairGeo, program: this.chairProg });
+    chairMesh.frustumCulled = false;
+    chairMesh.setParent(this.chairScene);
     const solidMesh = new Mesh2(this.gl, { geometry: solidGeo, program: this.depthProg });
     solidMesh.frustumCulled = false;
     solidMesh.setParent(this.solidScene);
@@ -4339,6 +4701,7 @@ var PickPipeline = class {
     gl.clearColor(0, 0, 0, 1);
     this.renderer.render({ scene: this.solidScene, camera, target, clear: true });
     this.renderer.render({ scene: this.seatScene, camera, target, clear: false });
+    this.renderer.render({ scene: this.chairScene, camera, target, clear: false });
     gl.clearColor(br, bg, bb, 1);
     gl.disable(gl.SCISSOR_TEST);
     const buf = new Uint8Array(boxW * boxH * 4);
@@ -4350,6 +4713,7 @@ var PickPipeline = class {
   dispose() {
     this.destroyTarget();
     this.seatProg.remove();
+    this.chairProg.remove();
     this.depthProg.remove();
   }
 };
@@ -4479,16 +4843,18 @@ var Cinematic = class {
     this.outQuat = new Quat();
     this.startTime = 0;
     this.duration = FLIGHT_DURATION_MS;
+    this.endFov = FOV_END;
     this.resolveFn = null;
     this.camera = camera;
   }
   /** Begin (or retarget) a flight. Resolves when it lands or is cancelled. */
-  start(waypoints, startQuat, endQuat, duration = FLIGHT_DURATION_MS) {
+  start(waypoints, startQuat, endQuat, duration = FLIGHT_DURATION_MS, endFov = FOV_END) {
     this.settle();
     this.waypoints = waypoints;
     this.startQuat.copy(startQuat);
     this.endQuat.copy(endQuat);
     this.duration = duration;
+    this.endFov = endFov;
     this.startTime = performance.now();
     this.active = true;
     return new Promise((res) => {
@@ -4499,7 +4865,7 @@ var Cinematic = class {
   update(now2) {
     if (!this.active) return false;
     const u = Math.min(1, (now2 - this.startTime) / this.duration);
-    const { pos, fov, eased } = sampleFlight(this.waypoints, u);
+    const { pos, fov, eased } = sampleFlight(this.waypoints, u, FOV_START, this.endFov);
     this.camera.position.set(pos[0], pos[1], pos[2]);
     this.outQuat.copy(this.startQuat).slerp(this.endQuat, orientationLeadT(eased, ORIENTATION_LEAD));
     this.camera.quaternion.copy(this.outQuat);
@@ -4526,9 +4892,10 @@ var Cinematic = class {
 // src/view3d/camera/seatViewPose.ts
 var SEAT_EYE_ABOVE_DECK_M = 1.02;
 var FOCAL_LOOK_HEIGHT_M = 1.5;
-function seatViewPose(seatDeckWorld, focalPoint, floorBaseHeightM = 0) {
+function seatViewPose(seatDeckWorld, focalPoint, floorBaseHeightM = 0, authoredEyeHeightM) {
+  const eyeY = Number.isFinite(authoredEyeHeightM) ? floorBaseHeightM + authoredEyeHeightM : seatDeckWorld[1] + SEAT_EYE_ABOVE_DECK_M;
   return {
-    eye: [seatDeckWorld[0], seatDeckWorld[1] + SEAT_EYE_ABOVE_DECK_M, seatDeckWorld[2]],
+    eye: [seatDeckWorld[0], eyeY, seatDeckWorld[2]],
     focal: [
       focalPoint.x * M,
       floorBaseHeightM + FOCAL_LOOK_HEIGHT_M,
@@ -4791,7 +5158,7 @@ async function mountPanoramaSphere(container, view, deps, opts = {}) {
   root.appendChild(closeBtn);
   if (opts.disclosure) {
     const disclosure = document.createElement("div");
-    disclosure.textContent = `360\xB0 panorama \xB7 ${opts.disclosure}`;
+    disclosure.textContent = `${opts.disclosurePrefix ?? "360\xB0 panorama"} \xB7 ${opts.disclosure}`;
     Object.assign(disclosure.style, {
       position: "absolute",
       top: "12px",
@@ -5134,7 +5501,13 @@ function mountVenue3D(container, input, opts = {}) {
   };
   const rebuildGpu = () => {
     gpu = buildGpuScene(glctx.gl, model);
-    pick = new PickPipeline(glctx.renderer, gpu.seatGeometry, gpu.solidGeometry, model.seats.count);
+    pick = new PickPipeline(
+      glctx.renderer,
+      gpu.seatGeometry,
+      gpu.chairGeometry,
+      gpu.solidGeometry,
+      model.seats.count
+    );
     glctx.setClearColor(model.theme.background.top);
     pick.setRestoreClear(model.theme.background.top);
     gpu.seatProgram.uniforms.uSeatRadius.value = SEAT_DOT_RADIUS_M * model.theme.seatScale;
@@ -5147,8 +5520,22 @@ function mountVenue3D(container, input, opts = {}) {
   const nearBuf = new Int32Array(CHAIR_MAX_INSTANCES);
   let lastGatherX = Infinity;
   let lastGatherZ = Infinity;
-  const updateNearField = () => {
+  let nearFieldDetailEnabled = false;
+  let cameraDetailVisible = false;
+  let panoramaSphereVisible = false;
+  const setNearFieldDetailEnabled = (enabled) => {
+    nearFieldDetailEnabled = enabled;
+    if (!enabled) cameraDetailVisible = false;
+    lastGatherX = Infinity;
+    lastGatherZ = Infinity;
+    if (!enabled && gpu?.nearSeatCount()) gpu.setNearSeats(nearBuf, 0);
+  };
+  const updateNearField = (detailVisible) => {
     if (!gpu) return;
+    if (!detailVisible) {
+      if (gpu.nearSeatCount()) gpu.setNearSeats(nearBuf, 0);
+      return;
+    }
     const cam = orbit.camera.position;
     const moved2 = Math.hypot(cam.x - lastGatherX, cam.z - lastGatherZ);
     if (moved2 < CHAIR_REBUILD_M) return;
@@ -5191,7 +5578,8 @@ function mountVenue3D(container, input, opts = {}) {
     const dz = model.focalWorld[2] - model.bounds.center[2];
     return Math.hypot(dx, dz) > model.bounds.radius * 0.12 ? Math.atan2(dx, dz) : void 0;
   })();
-  orbit.frame(model.bounds, true, stageAzimuth, opts.portraitOverviewCrop === true);
+  const reduceMotionOnMount = typeof window !== "undefined" && !!window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  orbit.frame(model.bounds, !reduceMotionOnMount, stageAzimuth, opts.portraitOverviewCrop === true);
   const cinematic = new Cinematic(orbit.camera);
   const restoreContainerPosition = establishPositioningContext(container);
   const labelOverlay = new LabelOverlay(container, {
@@ -5211,12 +5599,16 @@ function mountVenue3D(container, input, opts = {}) {
     const sectionSeats = input.seats.filter((seat) => seat.sectionId === sectionId);
     const seatIds = new Set(sectionSeats.map((seat) => seat.id));
     const rowIds = new Set(sectionSeats.map((seat) => seat.rowId));
-    const focusedBase = baseLabels.filter((label) => label.kind !== "row" && label.kind !== "seat" || (label.kind === "row" ? rowIds.has(label.id.slice("row:".length)) : seatIds.has(label.id.slice("seat:".length))));
-    if (model.seatCount <= 6e3) {
+    const selectedIds = new Set(selection.keys());
+    const selectedInSection = new Set(sectionSeats.filter((seat) => selectedIds.has(seat.id)).map((seat) => seat.id));
+    const focusedBase = baseLabels.filter((label) => label.kind !== "row" && label.kind !== "seat" || (label.kind === "row" ? rowIds.has(label.id.slice("row:".length)) : seatIds.has(label.id.slice("seat:".length)) && (selectedInSection.size === 0 || selectedInSection.has(label.id.slice("seat:".length)))));
+    if (model.seatCount <= 6e3 && selectedInSection.size === 0) {
       labelOverlay.setLabels(focusedBase);
       return;
     }
-    const labels = sectionSeats.flatMap((seat) => {
+    const labelSeats = selectedInSection.size ? sectionSeats.filter((seat) => selectedInSection.has(seat.id)) : sectionSeats;
+    const generatedIds = new Set(labelSeats.map((seat) => `seat:${seat.id}`));
+    const labels = labelSeats.flatMap((seat) => {
       const index = model.seats.idToIndex.get(seat.id);
       if (index === void 0) return [];
       const offset = index * 3;
@@ -5226,12 +5618,18 @@ function mountVenue3D(container, input, opts = {}) {
         text: seat.displayLabel || seat.label,
         anchor: [
           model.seats.iPosition[offset],
-          model.seats.iPosition[offset + 1] + 0.55,
+          // Put the active identity on the chair back. A deck-level label can
+          // sit a full row below a foreground chair in perspective, while DOM
+          // labels for rows behind remain visible through the WebGL geometry.
+          model.seats.iPosition[offset + 1] + (selectedIds.has(seat.id) ? 1.05 : 0.55),
           model.seats.iPosition[offset + 2]
         ]
       }];
     });
-    labelOverlay.setLabels([...focusedBase, ...labels]);
+    labelOverlay.setLabels([
+      ...focusedBase.filter((label) => !generatedIds.has(label.id)),
+      ...labels
+    ]);
   };
   rebuildGpu();
   const loop = new RenderLoop(() => {
@@ -5239,12 +5637,25 @@ function mountVenue3D(container, input, opts = {}) {
     const flying = cinematic.active;
     const moving = flying ? cinematic.update(performance.now()) : orbit.update();
     const lod = computeSeatLod(orbit.currentDistance, model.bounds.radius);
+    const clippingBounds = panoramaSphereVisible ? { center: [orbit.camera.position.x, orbit.camera.position.y, orbit.camera.position.z], radius: 520 } : model.renderBounds;
+    orbit.updateClipping(clippingBounds);
+    const cameraDx = orbit.camera.position.x - model.renderBounds.center[0];
+    const cameraDy = orbit.camera.position.y - model.renderBounds.center[1];
+    const cameraDz = orbit.camera.position.z - model.renderBounds.center[2];
+    const cameraVenueDistance = Math.hypot(cameraDx, cameraDy, cameraDz);
+    const detailEnter = model.renderBounds.radius * 1.55;
+    const detailExit = model.renderBounds.radius * 1.8;
+    if (!nearFieldDetailEnabled) cameraDetailVisible = false;
+    else if (cameraDetailVisible) cameraDetailVisible = cameraVenueDistance <= detailExit;
+    else cameraDetailVisible = cameraVenueDistance <= detailEnter;
     const u = gpu.seatProgram.uniforms;
     u.uSeatScale.value = lod.scale;
     u.uSeatFade.value = lod.fade;
+    u.uSeatDetail.value = cameraDetailVisible ? 1 : 0;
+    gpu.solidProgram.uniforms.uStructureDetail.value = cameraDetailVisible ? 1 : 0;
     u.uMinPixels.value = lod.minPixels;
     u.uPixelToWorld.value = 2 * Math.tan(orbit.camera.fov * DEG2 / 2) / Math.max(1, glctx.pixelHeight);
-    updateNearField();
+    updateNearField(cameraDetailVisible);
     glctx.renderer.render({ scene: gpu.background, clear: true });
     glctx.renderer.render({ scene: gpu.main, camera: orbit.camera, clear: false });
     labelOverlay.update(
@@ -5268,6 +5679,8 @@ function mountVenue3D(container, input, opts = {}) {
     };
     const { updates, next } = diffSelection(selection, ids, baseStateIndex);
     selection = next;
+    labelOverlay.setSelectedSeatIds(selection.keys());
+    if (focusedSectionId) showSectionSeatLabels(focusedSectionId);
     if (updates.length) {
       const runs = applySeatStates(model.seats, updates);
       if (gpu) gpu.uploadSeatStateRuns(runs);
@@ -5306,12 +5719,12 @@ function mountVenue3D(container, input, opts = {}) {
       model.seats.iPosition[idx * 3 + 1],
       model.seats.iPosition[idx * 3 + 2]
     ];
-    return seatViewPose(deck, focalPoint, floor?.baseHeightM ?? 0);
+    return seatViewPose(deck, focalPoint, floor?.baseHeightM ?? 0, seat?.eyeHeightM);
   };
-  const placeCameraFinal = (finalPos, focal) => {
+  const placeCameraFinal = (finalPos, focal, fov = FOV_END) => {
     orbit.camera.position.set(finalPos[0], finalPos[1], finalPos[2]);
     orbit.camera.lookAt(new Vec33(focal[0], focal[1], focal[2]));
-    orbit.camera.fov = FOV_END;
+    orbit.camera.fov = fov;
     orbit.camera.updateProjectionMatrix();
   };
   const isNarrow = () => (container.clientWidth || glctx.canvas.clientWidth) <= 520;
@@ -5409,7 +5822,8 @@ function mountVenue3D(container, input, opts = {}) {
       });
     }
     if (opts.getSeatView) {
-      addButton(retry ? "\u21BB Retry 360\xB0 panorama" : "\u25C9 Open 360\xB0 panorama", `${retry ? "Retry" : "Open"} the 360\xB0 panorama from seat ${seatLabel}`, () => {
+      const sourceAction = opts.seatViewActionLabel?.(seatId) ?? "Open 360\xB0 panorama";
+      addButton(retry ? `\u21BB Retry ${sourceAction}` : `\u25C9 ${sourceAction}`, `${retry ? "Retry" : sourceAction} from seat ${seatLabel}`, () => {
         if (disposed || gen !== flightGen) {
           removeArriveChip();
           return;
@@ -5431,121 +5845,158 @@ function mountVenue3D(container, input, opts = {}) {
     return controls;
   };
   const navigationModeChip = document.createElement("div");
-  navigationModeChip.setAttribute("role", "group");
-  navigationModeChip.setAttribute("aria-label", "3D navigation mode");
+  let seatViewLocked = false;
+  navigationModeChip.className = "sl-3d-navigation-controls";
   Object.assign(navigationModeChip.style, {
     position: "absolute",
-    left: "14px",
-    top: "62px",
+    right: "14px",
+    bottom: "14px",
     display: "flex",
-    gap: "3px",
-    padding: "3px",
-    borderRadius: "999px",
     zIndex: "4",
-    background: "rgba(12,18,32,0.72)",
-    border: "1px solid rgba(150,165,205,0.35)",
-    backdropFilter: "blur(6px)"
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: "7px"
+  });
+  const modeControls = document.createElement("div");
+  modeControls.setAttribute("role", "group");
+  modeControls.setAttribute("aria-label", "3D drag mode");
+  Object.assign(modeControls.style, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    alignItems: "flex-end"
+  });
+  const utilityControls = document.createElement("div");
+  utilityControls.setAttribute("role", "group");
+  utilityControls.setAttribute("aria-label", "3D view controls");
+  Object.assign(utilityControls.style, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    alignItems: "flex-end"
   });
   const rotateModeButton = document.createElement("button");
   rotateModeButton.type = "button";
-  rotateModeButton.textContent = "\u21BB Rotate";
+  rotateModeButton.textContent = "\u21BB";
   rotateModeButton.setAttribute("aria-label", "Drag to rotate the 3D venue");
+  rotateModeButton.dataset.tooltip = "Rotate venue";
   const moveModeButton = document.createElement("button");
   moveModeButton.type = "button";
-  moveModeButton.textContent = "\u2725 Move";
+  moveModeButton.textContent = "\u2725";
   moveModeButton.setAttribute("aria-label", "Drag to move the 3D venue left, right, up or down");
+  moveModeButton.dataset.tooltip = "Move venue";
   const zoomOutButton = document.createElement("button");
   zoomOutButton.type = "button";
   zoomOutButton.textContent = "\u2212";
   zoomOutButton.setAttribute("aria-label", "Zoom out of the 3D venue");
-  zoomOutButton.title = "Zoom out";
+  zoomOutButton.dataset.tooltip = "Zoom out";
   const zoomInButton = document.createElement("button");
   zoomInButton.type = "button";
   zoomInButton.textContent = "+";
   zoomInButton.setAttribute("aria-label", "Zoom into the 3D venue");
-  zoomInButton.title = "Zoom in";
+  zoomInButton.dataset.tooltip = "Zoom in";
   for (const button of [rotateModeButton, moveModeButton, zoomOutButton, zoomInButton]) {
+    button.className = "sl-3d-icon-control";
     Object.assign(button.style, {
-      minHeight: "34px",
-      padding: "6px 10px",
-      border: "0",
+      width: "44px",
+      minWidth: "44px",
+      minHeight: "44px",
+      padding: "9px",
+      border: "1px solid rgba(150,165,205,0.35)",
       borderRadius: "999px",
       color: "#c9d4ea",
-      background: "transparent",
-      font: "600 11px/1 inherit",
+      background: "rgba(12,18,32,0.82)",
+      font: "600 17px/1 inherit",
+      backdropFilter: "blur(6px)",
       cursor: "pointer",
       whiteSpace: "nowrap"
     });
-    if (button === zoomOutButton || button === zoomInButton) {
-      button.style.minWidth = "34px";
-      button.style.padding = "6px";
-      button.style.fontSize = "17px";
-    }
-    navigationModeChip.appendChild(button);
   }
+  modeControls.append(rotateModeButton, moveModeButton);
+  utilityControls.append(zoomInButton, zoomOutButton);
   const setNavigationMode = (mode) => {
     orbit.setPrimaryDragMode(mode);
     const rotateActive = mode === "orbit";
     rotateModeButton.setAttribute("aria-pressed", String(rotateActive));
     moveModeButton.setAttribute("aria-pressed", String(!rotateActive));
-    rotateModeButton.style.background = rotateActive ? "rgba(96,110,150,0.48)" : "transparent";
-    moveModeButton.style.background = rotateActive ? "transparent" : "rgba(96,110,150,0.48)";
+    rotateModeButton.style.background = rotateActive ? "rgba(96,110,150,0.68)" : "rgba(12,18,32,0.82)";
+    moveModeButton.style.background = rotateActive ? "rgba(12,18,32,0.82)" : "rgba(96,110,150,0.68)";
     navigationModeChip.title = rotateActive ? "Drag to rotate \xB7 Shift-drag to move" : "Drag to move \xB7 Shift-drag to rotate";
   };
   rotateModeButton.addEventListener("click", () => setNavigationMode("orbit"));
   moveModeButton.addEventListener("click", () => setNavigationMode("pan"));
   zoomOutButton.addEventListener("click", () => orbit.zoomBy(1.22));
   zoomInButton.addEventListener("click", () => orbit.zoomBy(0.82));
+  navigationModeChip.append(modeControls, utilityControls);
   setNavigationMode("orbit");
   container.appendChild(navigationModeChip);
   const layoutNavigationChip = () => {
-    navigationModeChip.style.display = isNarrow() ? "none" : "flex";
+    const narrow = isNarrow();
+    navigationModeChip.style.display = seatViewLocked ? "none" : "flex";
+    navigationModeChip.style.right = narrow ? "12px" : "14px";
+    navigationModeChip.style.bottom = narrow ? "calc(env(safe-area-inset-bottom, 0px) + 76px)" : "14px";
+    modeControls.style.display = narrow ? "none" : "flex";
+    zoomInButton.style.display = narrow ? "none" : "";
+    zoomOutButton.style.display = narrow ? "none" : "";
   };
   layoutNavigationChip();
+  const setSeatViewLocked = (locked) => {
+    seatViewLocked = locked;
+    orbit.setInteractionEnabled(!locked);
+    layoutNavigationChip();
+  };
   const overviewChip = document.createElement("button");
+  overviewChip.className = "sl-3d-overview-control sl-3d-icon-control";
   overviewChip.type = "button";
-  overviewChip.textContent = "\u2302 Overview";
-  overviewChip.setAttribute("aria-label", "Return to the venue overview");
+  overviewChip.textContent = "\u2302";
+  overviewChip.setAttribute("aria-label", "Fit the whole venue in view");
+  overviewChip.dataset.tooltip = "Fit venue";
   Object.assign(overviewChip.style, {
-    position: "absolute",
-    right: "14px",
-    bottom: "18px",
-    minHeight: "40px",
-    padding: "8px 14px",
+    width: "44px",
+    minWidth: "44px",
+    minHeight: "44px",
+    padding: "9px",
     borderRadius: "999px",
     background: "rgba(12,18,32,0.72)",
     color: "#c9d4ea",
     border: "1px solid rgba(150,165,205,0.35)",
     backdropFilter: "blur(6px)",
-    font: "600 12.5px/1 inherit",
+    font: "600 11px/1 inherit",
     cursor: "pointer",
-    zIndex: "4"
+    whiteSpace: "nowrap"
   });
+  const layoutOverviewChip = () => {
+    overviewChip.textContent = "\u2302";
+  };
+  layoutOverviewChip();
   const focusOverview = () => {
     if (disposed) return;
+    opts.onViewTargetChange?.(null);
+    opts.onSectionFocusChange?.(null);
     if (panorama) {
       panorama.dispose();
       panorama = null;
       analytics.panoramaClosed();
     }
+    panoramaSphereVisible = false;
     panoramaLoadAbort?.abort();
     panoramaLoadAbort = null;
     restorePanoramaLayer();
     overviewChip.style.display = "";
     labelOverlay.setVisible(true);
     frozen = false;
+    setNearFieldDetailEnabled(false);
+    setSeatViewLocked(false);
     cancelFlight();
     removeArriveChip();
     setNavigationMode("orbit");
     if (reducedMotion()) orbit.frame(model.bounds, false, stageAzimuth, opts.portraitOverviewCrop === true);
     else orbit.frameSoft(model.bounds, stageAzimuth, opts.portraitOverviewCrop === true);
-    opts.onViewTargetChange?.(null);
     showSectionSeatLabels(null);
-    opts.onSectionFocusChange?.(null);
     loop.requestRender();
   };
   overviewChip.addEventListener("click", focusOverview);
-  container.appendChild(overviewChip);
+  utilityControls.appendChild(overviewChip);
   const openPanorama = async (seatId, fadeMs, gen) => {
     panoramaLoadAbort?.abort();
     const loadAbort = new AbortController();
@@ -5591,9 +6042,10 @@ function mountVenue3D(container, input, opts = {}) {
       loadAbort.abort();
       if (panoramaLoadAbort === loadAbort) panoramaLoadAbort = null;
       panorama = null;
+      panoramaSphereVisible = false;
       restorePanoramaLayer();
       overviewChip.style.display = "";
-      labelOverlay.setVisible(true);
+      labelOverlay.setVisible(!opts.arriveAtSeatEye);
       frozen = false;
       analytics.panoramaClosed();
       orbit.resumeAfterFlight(seatPose.focal);
@@ -5604,6 +6056,7 @@ function mountVenue3D(container, input, opts = {}) {
     const sceneMode = view.generated === true;
     const disclosure = seatViewDisclosure(view);
     raisePanoramaLayer();
+    panoramaSphereVisible = !sceneMode;
     overviewChip.style.display = "none";
     const effectiveFadeMs = reducedMotion() ? 0 : fadeMs;
     const spherical = gpu && !contextLost ? await mountPanoramaSphere(container, sceneMode ? null : view, {
@@ -5613,9 +6066,17 @@ function mountVenue3D(container, input, opts = {}) {
       requestRender: () => loop.requestRender(),
       cameraOriginWorld: sceneMode ? seatPose.eye : void 0,
       focalWorld: seatPose.focal
-    }, { fadeMs: effectiveFadeMs, seatLabel, disclosure, onClose, signal: loadAbort.signal }) : null;
+    }, {
+      fadeMs: effectiveFadeMs,
+      seatLabel,
+      disclosure,
+      disclosurePrefix: sceneMode ? "Live seat-eye view" : "360\xB0 panorama",
+      onClose,
+      signal: loadAbort.signal
+    }) : null;
     if (disposed || gen !== flightGen) {
       loadAbort.abort();
+      panoramaSphereVisible = false;
       if (panoramaLoadAbort === loadAbort) panoramaLoadAbort = null;
       spherical?.dispose();
       overviewChip.style.display = "";
@@ -5628,7 +6089,21 @@ function mountVenue3D(container, input, opts = {}) {
       frozen = false;
       loop.requestRender();
       panorama = spherical;
+    } else if (sceneMode) {
+      restorePanoramaLayer();
+      overviewChip.style.display = "";
+      frozen = false;
+      orbit.resumeAfterFlight(seatPose.focal);
+      loop.requestRender();
+      panorama = null;
+      panoramaSphereVisible = false;
+      analytics.panoramaFailed(seatId, "mount");
+      const controls = showArriveChip(seatId, flightGen, true);
+      requestAnimationFrame(() => controls?.querySelector("[data-panorama-trigger]")?.focus());
+      if (panoramaLoadAbort === loadAbort) panoramaLoadAbort = null;
+      return;
     } else {
+      panoramaSphereVisible = false;
       analytics.panoramaFallback(seatId);
       panorama = mountPanorama(container, view, {
         fadeMs: effectiveFadeMs,
@@ -5653,36 +6128,45 @@ function mountVenue3D(container, input, opts = {}) {
     if (disposed || !gpu) return Promise.resolve();
     const idx = model.seats.idToIndex.get(seatId);
     if (idx === void 0) return Promise.resolve();
+    setNearFieldDetailEnabled(true);
     opts.onViewTargetChange?.(seatId);
     if (panorama) {
       panorama.dispose();
       panorama = null;
+      panoramaSphereVisible = false;
       overviewChip.style.display = "";
       restorePanoramaLayer();
     }
     panoramaLoadAbort?.abort();
     panoramaLoadAbort = null;
     frozen = false;
+    setSeatViewLocked(false);
     const gen = ++flightGen;
     removeArriveChip();
     const { eye: seatEye, focal } = resolvedSeatViewPose(seatId, idx);
     const start = [orbit.camera.position.x, orbit.camera.position.y, orbit.camera.position.z];
-    const { waypoints, finalPos } = buildWaypoints(start, seatEye, focal, model.bounds.center, model.bounds.radius);
+    const flight = buildWaypoints(start, seatEye, focal, model.bounds.center, model.bounds.radius);
+    const finalPos = opts.arriveAtSeatEye ? seatEye : flight.finalPos;
+    const arrivalFov = opts.arriveAtSeatEye ? container.clientWidth / Math.max(1, container.clientHeight) < 0.7 ? 90 : 65 : FOV_END;
+    const waypoints = [flight.waypoints[0], flight.waypoints[1], finalPos];
+    labelOverlay.setVisible(false);
     if (reducedMotion()) {
-      placeCameraFinal(finalPos, focal);
+      placeCameraFinal(finalPos, focal, arrivalFov);
       loop.requestRender();
       analytics.cinematicSkipped();
       if (!disposed) orbit.syncFromCamera();
+      setSeatViewLocked(opts.arriveAtSeatEye === true);
       showArriveChip(seatId, gen);
       return Promise.resolve();
     }
     const startQuat = new Quat2().copy(orbit.camera.quaternion);
     const endQuat = lookAtQuat(orbit.camera, finalPos, focal);
     loop.requestRender();
-    return cinematic.start(waypoints, startQuat, endQuat).then(() => {
+    return cinematic.start(waypoints, startQuat, endQuat, FLIGHT_DURATION_MS, arrivalFov).then(() => {
       if (disposed || gen !== flightGen) return;
       analytics.cinematicPlayed(FLIGHT_DURATION_MS);
       orbit.resumeAfterFlight(focal);
+      setSeatViewLocked(opts.arriveAtSeatEye === true);
       loop.requestRender();
       showArriveChip(seatId, gen);
     });
@@ -5690,6 +6174,8 @@ function mountVenue3D(container, input, opts = {}) {
   const focusSectionCamera = (sectionId) => {
     const sec = model.sections.find((candidate) => candidate.id === sectionId);
     if (!sec || sec.seatCount === 0) return false;
+    setNearFieldDetailEnabled(true);
+    setSeatViewLocked(false);
     cinematic.cancel();
     removeArriveChip();
     setNavigationMode("pan");
@@ -5704,6 +6190,7 @@ function mountVenue3D(container, input, opts = {}) {
   };
   let downX = 0, downY = 0, downT = 0, downId = -1, moved = false, suppressTap = false;
   const onDown = (e) => {
+    if (seatViewLocked) return;
     if (downId !== -1) return;
     downId = e.pointerId;
     downX = e.clientX;
@@ -5714,6 +6201,7 @@ function mountVenue3D(container, input, opts = {}) {
     if (cinematic.active) {
       analytics.cinematicCancelled();
       cancelFlight();
+      opts.onViewTargetChange?.(null);
     }
   };
   const onMove = (e) => {
@@ -5764,6 +6252,22 @@ function mountVenue3D(container, input, opts = {}) {
     }
     return bestIndex;
   };
+  const pickVisibleGeometry = (clientX, clientY) => {
+    if (!gpu || !pick) return -1;
+    pick.syncFromSeatProgram(gpu.seatProgram);
+    const rect = glctx.canvas.getBoundingClientRect();
+    const dpr = glctx.renderer.dpr;
+    const { x, y } = pickPixelCoords(
+      clientX,
+      clientY,
+      rect,
+      dpr,
+      glctx.gl.drawingBufferWidth,
+      glctx.gl.drawingBufferHeight
+    );
+    const radius = Math.max(2, Math.round(8 * dpr));
+    return pick.pick(orbit.camera, x, y, radius);
+  };
   const onUp = (e) => {
     if (e.pointerId !== downId) return;
     const isTap = !moved && performance.now() - downT < TAP_MS;
@@ -5773,7 +6277,15 @@ function mountVenue3D(container, input, opts = {}) {
       return;
     }
     if (!isTap || !gpu || !pick) return;
-    let idx = focusedSectionId ? pickNearestProjectedSeat(e.clientX, e.clientY, focusedSectionId, 44, true) : -1;
+    let idx = pickVisibleGeometry(e.clientX, e.clientY);
+    if (focusedSectionId && idx >= 0) {
+      const visibleSeatId = seatIdByIndex[idx];
+      const visibleSectionId = visibleSeatId ? sectionIdBySeatId.get(visibleSeatId) : void 0;
+      if (visibleSectionId && visibleSectionId !== focusedSectionId && focusSectionCamera(visibleSectionId)) return;
+    }
+    if (focusedSectionId && idx < 0) {
+      idx = pickNearestProjectedSeat(e.clientX, e.clientY, focusedSectionId, 44, false);
+    }
     if (focusedSectionId && idx < 0) {
       const sectionIndex = pickNearestProjectedSeat(e.clientX, e.clientY, null, 72, false);
       const sectionSeatId = sectionIndex >= 0 ? seatIdByIndex[sectionIndex] : void 0;
@@ -5781,24 +6293,30 @@ function mountVenue3D(container, input, opts = {}) {
       if (nextSectionId && nextSectionId !== focusedSectionId && focusSectionCamera(nextSectionId)) return;
     }
     if (!focusedSectionId) {
-      pick.syncFromSeatProgram(gpu.seatProgram);
-      const rect = glctx.canvas.getBoundingClientRect();
-      const dpr = glctx.renderer.dpr;
-      const { x, y } = pickPixelCoords(e.clientX, e.clientY, rect, dpr, glctx.gl.drawingBufferWidth, glctx.gl.drawingBufferHeight);
-      const radius = Math.max(2, Math.round(8 * dpr));
-      idx = pick.pick(orbit.camera, x, y, radius);
       if (idx < 0) idx = pickNearestProjectedSeat(e.clientX, e.clientY, null, 42, false);
       const overviewSeatId = idx >= 0 ? seatIdByIndex[idx] : void 0;
       const sectionId = overviewSeatId ? sectionIdBySeatId.get(overviewSeatId) : void 0;
       if (sectionId && focusSectionCamera(sectionId)) return;
     }
     if (idx < 0 || idx >= seatIdByIndex.length) {
-      if (selection.size) setSelection([]);
+      if (selection.size) {
+        setSelection([]);
+        opts.onViewTargetChange?.(null);
+      }
       return;
     }
     const seatId = seatIdByIndex[idx];
-    if (selection.has(seatId) && selection.size === 1) setSelection([]);
-    else setSelection([seatId]);
+    const seatState = SEAT_STATES[Math.round(model.seats.iState[idx] ?? 0)] ?? "available";
+    if (seatState !== "available" && seatState !== "selected") {
+      opts.onSeatInspect?.(seatId, seatState);
+      return;
+    }
+    if (selection.has(seatId) && selection.size === 1) {
+      setSelection([]);
+      opts.onViewTargetChange?.(null);
+      return;
+    }
+    setSelection([seatId]);
     ensureSeatView(seatId);
     analytics.seatPicked(seatId, sectionIdBySeatId.get(seatId));
     opts.onSeatPick?.(seatId);
@@ -5823,6 +6341,7 @@ function mountVenue3D(container, input, opts = {}) {
       orbit.setAspect(width / Math.max(1, height));
       layoutArriveChip();
       layoutNavigationChip();
+      layoutOverviewChip();
       loop.requestRender();
     },
     stats() {
@@ -5841,6 +6360,8 @@ function mountVenue3D(container, input, opts = {}) {
     focusFloor(index) {
       if (index !== null && !model.floors.some((f) => f.index === index)) return false;
       const value = index ?? -1;
+      setNearFieldDetailEnabled(false);
+      setSeatViewLocked(false);
       if (gpu) {
         gpu.seatProgram.uniforms.uFocusFloor.value = value;
         gpu.solidProgram.uniforms.uFocusFloor.value = value;
@@ -5864,6 +6385,8 @@ function mountVenue3D(container, input, opts = {}) {
     focusZone(zoneId) {
       const zone = model.zones.find((z) => z.id === zoneId);
       if (!zone || zone.seatCount === 0) return false;
+      setNearFieldDetailEnabled(false);
+      setSeatViewLocked(false);
       cinematic.cancel();
       setNavigationMode("orbit");
       showSectionSeatLabels(null);
@@ -5890,6 +6413,8 @@ function mountVenue3D(container, input, opts = {}) {
     focusRow(rowId) {
       const row = model.rows.find((candidate) => candidate.id === rowId);
       if (!row || row.seatCount === 0) return false;
+      setNearFieldDetailEnabled(true);
+      setSeatViewLocked(false);
       cinematic.cancel();
       setNavigationMode("pan");
       if (row.sectionId) {