@seatlayer/core 0.32.0 → 0.34.0

package/dist/view3d/index.js

@@ -28,13 +28,36 @@ var SEAT_STATE_COLORS = {
   selected: [0.24, 0.74, 1],
   dimmed: [0.28, 0.32, 0.37]
 };
+function upholsteryTone(rgb) {
+  const luma = 0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2];
+  const SAT = 0.42;
+  const VALUE = 0.62;
+  return [
+    (luma + (rgb[0] - luma) * SAT) * VALUE,
+    (luma + (rgb[1] - luma) * SAT) * VALUE,
+    (luma + (rgb[2] - luma) * SAT) * VALUE
+  ];
+}
 var STRUCTURE = {
   ground: [0.07, 0.085, 0.11],
   tierTop: [0.24, 0.28, 0.34],
   tierWall: [0.17, 0.2, 0.25],
-  stageTop: [0.42, 0.36, 0.26],
-  // warm, slightly emissive read
-  stageWall: [0.26, 0.22, 0.16],
+  /**
+   * The lit performance surface.
+   *
+   * This was [0.42, 0.36, 0.26] and commented "slightly emissive read", which it
+   * was not — under the scene's rig it resolved to a mid-brown slab, and from a
+   * seat the stage was the DIMMEST large surface in a dark hall. That is exactly
+   * backwards: the stage is the one place in a venue with light pointed at it,
+   * and it is what a buyer's eye should land on when they arrive at their seat.
+   *
+   * Bright and warm enough to hold that role against the surrounding structure,
+   * which sits around 0.24. An authored `fill` still tints it (see `buildShape`),
+   * 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],
   decorTop: [0.22, 0.25, 0.29],
   decorWall: [0.15, 0.17, 0.2],
   gaTop: [0.24, 0.28, 0.33],
@@ -1069,7 +1092,8 @@ function rectPolygon(x, y, w, h) {
 }
 
 // src/view3d/scene/seatChair.ts
-var CHAIR_PART = { pedestal: 0, pad: 1, back: 2 };
+var CHAIR_PART = { pedestal: 0, pad: 1, back: 2, body: 3, head: 4 };
+var CHAIR_PART_OCCUPANT_MIN = CHAIR_PART.body;
 var CHAIR_PITCH_FRACTION = 0.44;
 var CHAIR_HALF_WIDTH_MIN_M = 0.15;
 var CHAIR_HALF_WIDTH_MAX_M = 0.3;
@@ -1099,6 +1123,37 @@ 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 FACES = [
@@ -1216,6 +1271,15 @@ function computeSeatYaw(iPosition, count, rowIdAt, focal) {
 
 // src/view3d/scene/seatInstances.ts
 var SEAT_DOT_RADIUS_M = 0.22;
+function seatOccupantSeed(stateIndex, seatIndex) {
+  const state = SEAT_STATES[stateIndex];
+  if (state !== "sold" && state !== "held") return -1;
+  let h = (seatIndex + 1) * 2654435761;
+  h ^= h >>> 15;
+  h = Math.imul(h, 2246822519);
+  h ^= h >>> 13;
+  return (h >>> 0) % 1e5 / 1e5;
+}
 var SEAT_PITCH_FRACTION = 0.42;
 function nearestNeighbourSpacing(seats) {
   const n = seats.length;
@@ -1278,10 +1342,11 @@ function seatSurfaceY(seat) {
   if (Number.isFinite(eye)) return Math.max(0, eye - SEATED_EYE_HEIGHT_M);
   return 0;
 }
-function buildSeatInstances(seats, initial, surfaces, seatFloor) {
+function buildSeatInstances(seats, initial, surfaces, seatFloor, categoryColor) {
   const count = seats.length;
   const iPosition = new Float32Array(count * 3);
   const iState = new Float32Array(count);
+  const iCategory = new Float32Array(count * 3);
   const iMaxRadius = new Float32Array(count);
   const iChairWidth = new Float32Array(count);
   const iRing = new Float32Array(count * 3);
@@ -1297,6 +1362,10 @@ function buildSeatInstances(seats, initial, surfaces, seatFloor) {
     iPosition[i * 3 + 1] = surfaces ? surfaces.seatDeckY(i) : seatSurfaceY(seat);
     iPosition[i * 3 + 2] = seat.y * M;
     iState[i] = seatStateIndex(initial ? initial(seat) : "available");
+    const cat = hexToRgb(categoryColor?.get(seat.categoryKey) ?? "#6e7bff") ?? [0.43, 0.48, 1];
+    iCategory[i * 3] = cat[0];
+    iCategory[i * 3 + 1] = cat[1];
+    iCategory[i * 3 + 2] = cat[2];
     if (seat.accessibility?.length) {
       const rgb = hexToRgb(accessibilityRingColor(seat.accessibility));
       if (rgb) {
@@ -1311,6 +1380,7 @@ function buildSeatInstances(seats, initial, surfaces, seatFloor) {
     count,
     iPosition,
     iState,
+    iCategory,
     iMaxRadius,
     iRing,
     idToIndex,
@@ -2651,11 +2721,27 @@ function shapePolygon(shape) {
   }
   return null;
 }
-function buildShape(builder, shape, base, S) {
+function buildShape(builder, shape, base, S, stages) {
   const poly = shapePolygon(shape);
   if (!poly) return;
   const isStage = shape.role === "stage";
   const height = isStage ? base + 1 : base + 0.25;
+  if (isStage && stages) {
+    let minX = Infinity, maxX = -Infinity, minZ = Infinity, maxZ = -Infinity;
+    for (const pt of poly) {
+      if (pt.x < minX) minX = pt.x;
+      if (pt.x > maxX) maxX = pt.x;
+      if (pt.y < minZ) minZ = pt.y;
+      if (pt.y > maxZ) maxZ = pt.y;
+    }
+    stages.push({
+      cx: (minX + maxX) / 2 * M,
+      cz: (minZ + maxZ) / 2 * M,
+      y: height,
+      halfX: Math.max((maxX - minX) / 2 * M, 0.5),
+      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 : S.decorWall;
   extrudePrism(builder, poly, void 0, () => height, base, colTop, colWall, AO);
@@ -2765,6 +2851,7 @@ function buildSceneModel(input) {
   const sectionFills = resolveSectionFills(doc, seats);
   const catColor = /* @__PURE__ */ new Map();
   for (const c of doc.categories ?? []) catColor.set(c.key, c.color);
+  const stageBounds = [];
   const surfaces = buildVenueSurfaces(units, seats);
   const seatFloor = new Float32Array(seats.length);
   for (let unitIndex = 0; unitIndex < units.length; unitIndex++) {
@@ -2774,7 +2861,7 @@ 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, S);
+      else if (o.type === "shape") buildShape(builder, o, unit.baseHeightM, S, stageBounds);
       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);
@@ -2783,7 +2870,7 @@ function buildSceneModel(input) {
   }
   const focal = doc.focalPoint ?? { x: (fp.minX + fp.maxX) / 2, y: (fp.minY + fp.maxY) / 2 };
   const solids = mergeMeshData([builder.build()]);
-  const seatData = buildSeatInstances(seats, input.initialState, surfaces, seatFloor);
+  const seatData = buildSeatInstances(seats, input.initialState, surfaces, seatFloor, catColor);
   const zoneDefs = doc.zones ?? [];
   const zones = [];
   if (zoneDefs.length) {
@@ -3036,6 +3123,7 @@ function buildSceneModel(input) {
     // Look-at target ~1.5 m up so a seated camera aims slightly down at the stage.
     focalWorld: [focal.x * M, 1.5, focal.y * M],
     zones,
+    stages: stageBounds,
     sections,
     labels,
     floors
@@ -3081,6 +3169,20 @@ var LabelOverlay = class {
     if (opts.fontFamily) s.fontFamily = opts.fontFamily;
     container.appendChild(this.root);
   }
+  /**
+   * Hide or show the whole overlay without disturbing which labels exist.
+   *
+   * The in-scene panorama sphere is GL, so it draws BEHIND every DOM label —
+   * row and seat labels floated on top of a 360 photo until this existed. The
+   * old DOM panorama never needed it because its opaque div covered them.
+   *
+   * Deliberately not `setLabels([])`: that destroys the nodes and the declutter
+   * state, so closing the panorama would rebuild and re-rank the whole overlay
+   * and flash. Visibility is a view concern, not a data one.
+   */
+  setVisible(visible) {
+    this.root.style.visibility = visible ? "" : "hidden";
+  }
   setLabels(labels) {
     this.labels = labels;
     for (const [id, node] of this.nodes) {
@@ -3344,13 +3446,14 @@ var CHAIR_VERT = (
 precision highp float;
 in vec3 position;      // local: x/z in units of the seat radius, y in METRES
 in vec3 normal;
-in float part;         // 0 = pedestal, 1 = pad, 2 = back
+in float part;         // 0 = pedestal, 1 = pad, 2 = back, 3 = body, 4 = head
 in vec3 iOffset;       // per-instance world deck point (identical to the dot's)
 in vec3 iColor;        // per-instance state colour
 in float iRadius;      // per-instance horizontal half-width, world metres
 in float iYaw;         // per-instance facing, radians (local +Z -> facing dir)
 in vec3 iRing;         // accommodation ring colour; (0,0,0) = not accessible
 in float iFloor;
+in float iSeed;        // <0 = seat is empty; else per-person hash in [0,1)
 uniform mat4 modelViewMatrix;
 uniform mat4 projectionMatrix;
 uniform float uChairFull;
@@ -3366,6 +3469,8 @@ out float vPart;
 out float vHeight;   // local height in metres, for the vertical occlusion ramp
 out vec3 vRing;
 out float vDim;
+out float vOccupant; // 1 = this vertex belongs to a person, not to the chair
+out vec3 vOccupantTint;
 ${CHAIR_WEIGHT_GLSL}
 void main() {
   vec4 anchor = modelViewMatrix * vec4(iOffset, 1.0);
@@ -3374,12 +3479,35 @@ void main() {
   //    chairs, but nobody gets a short one (people are the same height at every
   //    seat pitch).
   vec3 p = position;
+  // The occupant. Parts 3 and 4 are a person; everything below is furniture.
+  //
+  // One instanced mesh draws both an empty seat and a taken one, because the
+  // alternative \u2014 a second geometry and a second draw call gathered per frame \u2014
+  // would double the near-field cost to show what is already known per instance.
+  // An unoccupied seat collapses its person to a point at the seat, which the
+  // rasteriser discards, exactly as the chair itself collapses at w=0.
+  float occupant = step(2.5, part);
+  float taken = step(0.0, iSeed);
+  vOccupant = occupant;
+  if (occupant > 0.5) {
+    if (taken < 0.5) {
+      p = vec3(0.0);          // empty seat: no person
+    } else {
+      // Vary the build so a sold-out row is people rather than a rank of
+      // 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);
+    }
+  }
   p.xz *= iRadius;
   // 2. Lean the back. Done here rather than in the base mesh so the lean is a
   //    real angle in METRES \u2014 baked into the mesh it would scale with the seat's
   //    width and the same chair would lean 20 degrees on a wide stadium row and
   //    6 on a tight theatre one.
-  float rake = (part > 1.5) ? max(p.y - uBackBase, 0.0) * uBackRake : 0.0;
+  // Only the BACK panel rakes. The old test (part > 1.5) meant "the back", and
+  // now also catches the occupant \u2014 leaning a person by the panel's rule would
+  // translate their head backwards by a rake measured from the panel's base.
+  float rake = (part > 1.5 && part < 2.5) ? max(p.y - uBackBase, 0.0) * uBackRake : 0.0;
   p.z -= rake;
   // 3. Scale-in. At w=0 the chair is a point at the seat, under a dot at full
   //    opacity \u2014 which is what makes the handover invisible. sqrt front-loads
@@ -3393,7 +3521,7 @@ void main() {
   // unchanged; and the rake is a shear, whose normal transform adds a y term.
   // Skipping either lights the raked back as though it were still vertical.
   vec3 n = vec3(normal.x / iRadius, normal.y, normal.z / iRadius);
-  if (part > 1.5) n.y += uBackRake * n.z;
+  if (part > 1.5 && part < 2.5) n.y += uBackRake * n.z;
   n = normalize(n);
   vec3 rn = vec3(n.x * c + n.z * s, n.y, -n.x * s + n.z * c);
   vec4 mv = modelViewMatrix * vec4(iOffset + rp, 1.0);
@@ -3401,6 +3529,15 @@ void main() {
   vNormalWorld = rn;
   vNormalView = normalize(mat3(modelViewMatrix) * rn);
   vColor = iColor;
+  // Occupant colour, resolved here so the fragment stage needs no extra
+  // varyings beyond this one. A person is NOT painted in the seat's state
+  // colour: a sold seat is red, and a hall of red people reads as a warning,
+  // 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 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;
   vHeight = position.y;
   vRing = iRing;
@@ -3420,6 +3557,8 @@ in float vPart;
 in float vHeight;
 in vec3 vRing;
 in float vDim;
+in float vOccupant;
+in vec3 vOccupantTint;
 uniform vec3 uKeyDir;
 uniform vec3 uFadeColor;
 out vec4 fragColor;
@@ -3432,6 +3571,7 @@ void main() {
   vec3 fillDir = normalize(vec3(-uKeyDir.x, 0.25, -uKeyDir.z));
   float fill = max(dot(N, fillDir), 0.0);
   vec3 tint = vColor;
+  if (vOccupant > 0.5) tint = vOccupantTint;
   // The accommodation ring, kept legible once the dot (which drew it) is gone:
   // an accessible seat's PEDESTAL is painted in the ring colour, so the marker
   // survives to close range instead of vanishing exactly when the buyer arrives.
@@ -3440,12 +3580,16 @@ void main() {
   // Pad brightest, back a step below it, pedestal darkest. Three untextured
   // boxes only read as one object if they are separated tonally \u2014 with a single
   // flat colour the chair silhouettes as a crate.
-  float partShade = vPart < 0.5 ? 0.50 : (vPart < 1.5 ? 1.10 : 0.80);
+  // A person is lit as a person, not as upholstery: no part shading, and less
+  // of the pad's sheen, so a head does not read as a polished box.
+  float partShade = vOccupant > 0.5 ? 0.95 : (vPart < 0.5 ? 0.50 : (vPart < 1.5 ? 1.10 : 0.80));
   // Cheap vertical occlusion: a chair is in a dense row, so the closer a surface
   // sits to the deck the less sky it can actually see. This is the depth cue \u2014
   // without it the pad top, the back and the deck all resolve to the same flat
   // value and the row loses its form entirely.
-  float ao = mix(0.58, 1.0, clamp(vHeight / 0.92, 0.0, 1.0));
+  // Occupants rise above the 0.92 m chair back, so their ramp uses their own
+  // height or every head would clamp to full brightness and float.
+  float ao = mix(0.58, 1.0, clamp(vHeight / (vOccupant > 0.5 ? 1.30 : 0.92), 0.0, 1.0));
   vec3 base = tint * partShade * ao * (0.52 + 0.40 * hemi) + tint * key * 0.38 + tint * fill * 0.10;
   float fres = pow(1.0 - max(dot(normalize(vNormalView), V), 0.0), 3.0);
   // A brighter rim than the solids get: it picks out every chair's own edge,
@@ -3640,12 +3784,13 @@ function createBackgroundProgram(gl, top, bottom) {
 }
 
 // src/view3d/scene/build.ts
-function writeSeatColors(iColor, iState, start, count, states) {
+function writeSeatColors(iColor, iState, start, count, states, iCategory) {
   for (let i = start; i < start + count; i++) {
-    const c = states[iState[i]] ?? states[0];
-    iColor[i * 3] = c[0];
-    iColor[i * 3 + 1] = c[1];
-    iColor[i * 3 + 2] = c[2];
+    const useCategory = iCategory && iState[i] === 0;
+    const c = useCategory ? null : states[iState[i]] ?? states[0];
+    iColor[i * 3] = c ? c[0] : iCategory[i * 3];
+    iColor[i * 3 + 1] = c ? c[1] : iCategory[i * 3 + 1];
+    iColor[i * 3 + 2] = c ? c[2] : iCategory[i * 3 + 2];
   }
 }
 var SEAT_QUAD = new Float32Array([-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1]);
@@ -3671,7 +3816,7 @@ function buildGpuScene(gl, model) {
   const seatProg = createSeatProgram(gl);
   const iColor = new Float32Array(model.seats.count * 3);
   const stateColors = SEAT_STATES.map((st) => model.theme.seatStates[st]);
-  writeSeatColors(iColor, model.seats.iState, 0, model.seats.count, stateColors);
+  writeSeatColors(iColor, model.seats.iState, 0, model.seats.count, stateColors, model.seats.iCategory);
   const seatGeo = new Geometry(gl, {
     position: { size: 2, data: SEAT_QUAD },
     iOffset: { size: 3, data: model.seats.iPosition, instanced: 1 },
@@ -3696,6 +3841,7 @@ function buildGpuScene(gl, model) {
   const cYaw = new Float32Array(CAP);
   const cRing = new Float32Array(CAP * 3);
   const cFloor = new Float32Array(CAP);
+  const cSeed = new Float32Array(CAP);
   const chairGeo = new Geometry(gl, {
     position: { size: 3, data: chairBase.position },
     normal: { size: 3, data: chairBase.normal },
@@ -3706,7 +3852,8 @@ function buildGpuScene(gl, model) {
     iRadius: { size: 1, data: cRadius, instanced: 1 },
     iYaw: { size: 1, data: cYaw, instanced: 1 },
     iRing: { size: 3, data: cRing, instanced: 1 },
-    iFloor: { size: 1, data: cFloor, instanced: 1 }
+    iFloor: { size: 1, data: cFloor, instanced: 1 },
+    iSeed: { size: 1, data: cSeed, instanced: 1 }
   });
   const chairMesh = new Mesh(gl, { geometry: chairGeo, program: chairProg });
   chairMesh.frustumCulled = false;
@@ -3716,10 +3863,18 @@ function buildGpuScene(gl, model) {
     const src = model.seats;
     for (let k = 0; k < nearCount; k++) {
       const i = nearIndices[k];
-      const c = stateColors[src.iState[i]] ?? stateColors[0];
-      cColor[k * 3] = c[0];
-      cColor[k * 3 + 1] = c[1];
-      cColor[k * 3 + 2] = c[2];
+      const useCategory = src.iCategory && src.iState[i] === 0;
+      const c = useCategory ? null : stateColors[src.iState[i]] ?? stateColors[0];
+      if (c) {
+        cColor[k * 3] = c[0];
+        cColor[k * 3 + 1] = c[1];
+        cColor[k * 3 + 2] = c[2];
+      } else {
+        const u = upholsteryTone([src.iCategory[i * 3], src.iCategory[i * 3 + 1], src.iCategory[i * 3 + 2]]);
+        cColor[k * 3] = u[0];
+        cColor[k * 3 + 1] = u[1];
+        cColor[k * 3 + 2] = u[2];
+      }
     }
     chairGeo.attributes.iColor.needsUpdate = true;
   };
@@ -3754,6 +3909,7 @@ function buildGpuScene(gl, model) {
         cRing[k * 3 + 1] = src.iRing[i * 3 + 1];
         cRing[k * 3 + 2] = src.iRing[i * 3 + 2];
         cFloor[k] = src.iFloor[i];
+        cSeed[k] = seatOccupantSeed(src.iState[i], i);
       }
       writeChairColors();
       chairGeo.attributes.iOffset.needsUpdate = true;
@@ -3761,6 +3917,7 @@ function buildGpuScene(gl, model) {
       chairGeo.attributes.iYaw.needsUpdate = true;
       chairGeo.attributes.iRing.needsUpdate = true;
       chairGeo.attributes.iFloor.needsUpdate = true;
+      chairGeo.attributes.iSeed.needsUpdate = true;
       chairGeo.instancedCount = n;
       if (!chairMesh.parent) chairMesh.setParent(main);
       scene.drawCalls = 4;
@@ -3771,7 +3928,9 @@ function buildGpuScene(gl, model) {
     uploadSeatStateRuns(runs) {
       if (!runs.length) return;
       if (nearCount) writeChairColors();
-      for (const run of runs) writeSeatColors(iColor, model.seats.iState, run.start, run.length, stateColors);
+      for (const run of runs) {
+        writeSeatColors(iColor, model.seats.iState, run.start, run.length, stateColors, model.seats.iCategory);
+      }
       const buffer = colorAttr.buffer;
       if (!buffer) {
         colorAttr.needsUpdate = true;
@@ -4277,6 +4436,317 @@ function mountPanorama(container, view, opts = {}) {
   };
 }
 
+// src/view3d/scene/panoSphere.ts
+import { Geometry as Geometry3, Mesh as Mesh3, Program as Program4, Texture } from "ogl";
+var PANO_SEGMENTS_LON = 64;
+var PANO_SEGMENTS_LAT = 32;
+var PANO_RADIUS_M = 500;
+function buildPanoSphere(segmentsLon = PANO_SEGMENTS_LON, segmentsLat = PANO_SEGMENTS_LAT, radius = PANO_RADIUS_M) {
+  const lonCount = segmentsLon + 1;
+  const latCount = segmentsLat + 1;
+  const vertexCount = lonCount * latCount;
+  const position = new Float32Array(vertexCount * 3);
+  const uv = new Float32Array(vertexCount * 2);
+  for (let iLat = 0; iLat < latCount; iLat++) {
+    const v = iLat / segmentsLat;
+    const polar = v * Math.PI;
+    const sinPolar = Math.sin(polar);
+    const cosPolar = Math.cos(polar);
+    for (let iLon = 0; iLon < lonCount; iLon++) {
+      const u = iLon / segmentsLon;
+      const azimuth = (u - 0.5) * Math.PI * 2;
+      const i = iLat * lonCount + iLon;
+      position[i * 3] = radius * sinPolar * Math.sin(azimuth);
+      position[i * 3 + 1] = radius * cosPolar;
+      position[i * 3 + 2] = -radius * sinPolar * Math.cos(azimuth);
+      uv[i * 2] = u;
+      uv[i * 2 + 1] = v;
+    }
+  }
+  const index = new Uint16Array(segmentsLon * segmentsLat * 6);
+  let w = 0;
+  for (let iLat = 0; iLat < segmentsLat; iLat++) {
+    for (let iLon = 0; iLon < segmentsLon; iLon++) {
+      const a = iLat * lonCount + iLon;
+      const b = a + lonCount;
+      index[w++] = a;
+      index[w++] = b;
+      index[w++] = a + 1;
+      index[w++] = a + 1;
+      index[w++] = b;
+      index[w++] = b + 1;
+    }
+  }
+  return { position, uv, index };
+}
+function bearingPitchToDirection(bearingDeg, pitchDeg) {
+  const yaw = bearingDeg * Math.PI / 180;
+  const pitch = pitchDeg * Math.PI / 180;
+  const cosPitch = Math.cos(pitch);
+  return [cosPitch * Math.sin(yaw), Math.sin(pitch), -cosPitch * Math.cos(yaw)];
+}
+var PANO_VERT = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec3 position;
+in vec2 uv;
+uniform mat4 modelViewMatrix;
+uniform mat4 projectionMatrix;
+out vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`
+);
+var PANO_FRAG = (
+  /* glsl */
+  `#version 300 es
+precision highp float;
+in vec2 vUv;
+uniform sampler2D uPano;
+uniform float uOpacity;
+out vec4 fragColor;
+void main() {
+  vec3 rgb = texture(uPano, vUv).rgb;
+  fragColor = vec4(rgb, uOpacity);
+}`
+);
+function createPanoSphere(gl, image) {
+  const { position, uv, index } = buildPanoSphere();
+  const geometry = new Geometry3(gl, {
+    position: { size: 3, data: position },
+    uv: { size: 2, data: uv },
+    index: { data: index }
+  });
+  const texture = new Texture(gl, {
+    image,
+    // The seam column is duplicated in geometry, so CLAMP is correct and avoids
+    // a wrapped bilinear tap bleeding the far edge of the image into it.
+    wrapS: gl.CLAMP_TO_EDGE,
+    wrapT: gl.CLAMP_TO_EDGE,
+    generateMipmaps: true,
+    // MUST be false, and this is the one line that decides whether the whole
+    // panorama is upside down.
+    //
+    // OGL defaults `flipY` to true for 2D textures, which is right for the usual
+    // case: a UV of 0 means the BOTTOM of a quad, an image's first row is its
+    // TOP, and flipping on upload reconciles the two. This sphere is the other
+    // case. Its `v` is authored in IMAGE space — v=0 is the top of the equirect
+    // and maps to the top of the sphere (`buildPanoSphere`, and the mapping
+    // `generatePanorama` and the 2D viewer both use). Flipping on upload as well
+    // applies the correction twice: the stadium pitch renders on the ceiling and
+    // the audience sits overhead.
+    //
+    // The geometry tests state the v mapping and pass either way — they never
+    // touch GL — so this is not something a unit test can defend. It was caught
+    // by looking at a stadium.
+    flipY: false
+  });
+  const program = new Program4(gl, {
+    vertex: PANO_VERT,
+    fragment: PANO_FRAG,
+    uniforms: { uPano: { value: texture }, uOpacity: { value: 0 } },
+    transparent: true,
+    depthTest: false,
+    depthWrite: false
+  });
+  const mesh = new Mesh3(gl, { geometry, program });
+  return {
+    mesh,
+    setOpacity(value) {
+      program.uniforms.uOpacity.value = Math.max(0, Math.min(1, value));
+    },
+    dispose() {
+      mesh.setParent(null);
+      geometry.remove();
+      if (texture.texture) gl.deleteTexture(texture.texture);
+      program.remove();
+    }
+  };
+}
+
+// src/view3d/crossfade/panoramaSphere.ts
+var DEG_PER_PX = 0.15;
+function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("panorama_image_failed"));
+    img.src = url;
+  });
+}
+async function mountPanoramaSphere(container, view, deps, opts = {}) {
+  const fadeMs = opts.fadeMs ?? 400;
+  let bearing = view?.initialBearingDeg ?? 0;
+  let pitch = 0;
+  let disposed = false;
+  if (!view && deps.focalWorld) {
+    const p = deps.camera.position;
+    const dx = deps.focalWorld[0] - p.x;
+    const dy = deps.focalWorld[1] - p.y;
+    const dz = deps.focalWorld[2] - p.z;
+    const flat = Math.hypot(dx, dz);
+    if (flat > 1e-3) {
+      bearing = Math.atan2(dx, -dz) * 180 / Math.PI;
+      pitch = Math.max(-MAX_PITCH_DEG, Math.min(MAX_PITCH_DEG, Math.atan2(dy, flat) * 180 / Math.PI));
+    }
+  }
+  let sphere = null;
+  if (view) {
+    let image;
+    try {
+      image = await loadImage(view.url);
+    } catch {
+      return null;
+    }
+    try {
+      sphere = createPanoSphere(deps.gl, image);
+    } catch {
+      return null;
+    }
+    sphere.mesh.renderOrder = 999;
+    sphere.mesh.setParent(deps.scene);
+  }
+  const priorFov = deps.camera.fov;
+  deps.camera.perspective({ fov: VFOV_DEG, aspect: deps.camera.aspect });
+  const priorQuat = deps.camera.quaternion.slice();
+  const aim = () => {
+    const p = deps.camera.position;
+    sphere?.mesh.position.set(p.x, p.y, p.z);
+    const [dx, dy, dz] = bearingPitchToDirection(bearing, pitch);
+    deps.camera.lookAt([p.x + dx, p.y + dy, p.z + dz]);
+    deps.requestRender();
+  };
+  aim();
+  const root = document.createElement("div");
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-label", opts.seatLabel ? `View from ${opts.seatLabel}` : "View from seat");
+  Object.assign(root.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "10",
+    cursor: "grab",
+    touchAction: "none"
+  });
+  const closeBtn = document.createElement("button");
+  closeBtn.type = "button";
+  closeBtn.setAttribute("aria-label", "Close");
+  closeBtn.textContent = "\u2715";
+  Object.assign(closeBtn.style, {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    zIndex: "2",
+    width: "34px",
+    height: "34px",
+    borderRadius: "999px",
+    cursor: "pointer",
+    border: "1px solid rgba(255,255,255,0.25)",
+    background: "rgba(8,12,18,0.6)",
+    color: "#e6edf3",
+    fontSize: "15px",
+    lineHeight: "1"
+  });
+  root.appendChild(closeBtn);
+  const hint = document.createElement("div");
+  hint.textContent = "Drag to look around \xB7 Esc to close";
+  Object.assign(hint.style, {
+    position: "absolute",
+    bottom: "12px",
+    left: "0",
+    right: "0",
+    textAlign: "center",
+    color: "rgba(230,237,243,0.7)",
+    font: "12px ui-sans-serif, system-ui, sans-serif",
+    pointerEvents: "none"
+  });
+  root.appendChild(hint);
+  container.appendChild(root);
+  let dragging = false;
+  let lastX = 0;
+  let lastY = 0;
+  const onDown = (e) => {
+    if (e.target === closeBtn) return;
+    dragging = true;
+    lastX = e.clientX;
+    lastY = e.clientY;
+    root.setPointerCapture?.(e.pointerId);
+    root.style.cursor = "grabbing";
+  };
+  const onMove = (e) => {
+    if (!dragging) return;
+    bearing += (e.clientX - lastX) * DEG_PER_PX;
+    pitch = Math.max(-MAX_PITCH_DEG, Math.min(MAX_PITCH_DEG, pitch + (e.clientY - lastY) * DEG_PER_PX));
+    lastX = e.clientX;
+    lastY = e.clientY;
+    aim();
+  };
+  const onUp = () => {
+    dragging = false;
+    root.style.cursor = "grab";
+  };
+  root.addEventListener("pointerdown", onDown);
+  root.addEventListener("pointermove", onMove);
+  root.addEventListener("pointerup", onUp);
+  root.addEventListener("pointercancel", onUp);
+  const onKey = (e) => {
+    if (e.key !== "Escape" || disposed) return;
+    e.stopPropagation();
+    handle.close();
+  };
+  window.addEventListener("keydown", onKey);
+  let raf = 0;
+  const fadeTo = (target, done) => {
+    if (!sphere) {
+      done?.();
+      return;
+    }
+    const from = target === 1 ? 0 : 1;
+    const start = performance.now();
+    const step = () => {
+      if (disposed) return;
+      const t = fadeMs <= 0 ? 1 : Math.min(1, (performance.now() - start) / fadeMs);
+      sphere?.setOpacity(from + (target - from) * t);
+      deps.requestRender();
+      if (t < 1) raf = requestAnimationFrame(step);
+      else done?.();
+    };
+    raf = requestAnimationFrame(step);
+  };
+  fadeTo(1);
+  const teardown = () => {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(raf);
+    root.removeEventListener("pointerdown", onDown);
+    root.removeEventListener("pointermove", onMove);
+    root.removeEventListener("pointerup", onUp);
+    root.removeEventListener("pointercancel", onUp);
+    window.removeEventListener("keydown", onKey);
+    root.remove();
+    sphere?.dispose();
+    deps.camera.perspective({ fov: priorFov, aspect: deps.camera.aspect });
+    deps.camera.quaternion.set(priorQuat[0], priorQuat[1], priorQuat[2], priorQuat[3]);
+    deps.requestRender();
+  };
+  const handle = {
+    close() {
+      if (disposed) return;
+      const finish = () => {
+        teardown();
+        opts.onClose?.();
+      };
+      cancelAnimationFrame(raf);
+      fadeTo(0, finish);
+    },
+    dispose: teardown
+  };
+  closeBtn.addEventListener("click", () => handle.close());
+  return handle;
+}
+
 // src/view3d/analytics.ts
 var now = () => typeof performance !== "undefined" && performance.now ? performance.now() : Date.now();
 var Analytics3D = class {
@@ -4551,7 +5021,7 @@ function mountVenue3D(container, input, opts = {}) {
     zIndex: "4"
   });
   overviewChip.addEventListener("click", () => {
-    if (disposed || frozen) return;
+    if (disposed || frozen || panorama) return;
     cancelFlight();
     removeArriveChip();
     orbit.frameSoft(model.bounds, stageAzimuth);
@@ -4579,18 +5049,36 @@ function mountVenue3D(container, input, opts = {}) {
     }
     if (disposed || gen !== flightGen) return;
     removeArriveChip();
-    panorama = mountPanorama(container, view, {
-      fadeMs,
-      seatLabel: seatId,
-      onClose: () => {
-        panorama = null;
-        frozen = false;
-        analytics.panoramaClosed();
-        orbit.resumeAfterFlight(model.focalWorld);
-        loop.requestRender();
-        showArriveChip(seatId, flightGen);
-      }
-    });
+    const onClose = () => {
+      panorama = null;
+      labelOverlay.setVisible(true);
+      frozen = false;
+      analytics.panoramaClosed();
+      orbit.resumeAfterFlight(model.focalWorld);
+      loop.requestRender();
+      showArriveChip(seatId, flightGen);
+    };
+    const sceneMode = view.generated === true;
+    const spherical = gpu && !contextLost ? await mountPanoramaSphere(container, sceneMode ? null : view, {
+      gl: glctx.gl,
+      scene: gpu.main,
+      camera: orbit.camera,
+      requestRender: () => loop.requestRender(),
+      focalWorld: model.focalWorld
+    }, { fadeMs, seatLabel: seatId, onClose }) : null;
+    if (disposed || gen !== flightGen) {
+      spherical?.dispose();
+      return;
+    }
+    if (spherical) {
+      orbit.syncFromCamera();
+      labelOverlay.setVisible(false);
+      frozen = false;
+      loop.requestRender();
+      panorama = spherical;
+    } else {
+      panorama = mountPanorama(container, view, { fadeMs, seatLabel: seatId, onClose });
+    }
     analytics.panoramaOpened();
   };
   const cancelFlight = () => {