@jgengine/shell 0.18.0 → 0.18.1

package/dist/scene/CityRenderer.js

@@ -6,7 +6,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * sidewalks; styled bridges with railings, piers and abutments; massing pieces as five instanced
  * primitive meshes (plain walls, window-banded walls via `createCityWindowMaterial`, gable roofs,
  * cylinders, domes) with palette-role coloring and per-lot jitter; species-mixed instanced trees
- * (shared scatter proxies), street lights, estate hedges, driveways, parking pads, and
+ * (shared scatter proxies), street lights, estate hedges, driveways, parking pads, curbside and
+ * pad-stall parked vehicles, mast-arm junction signals with sign posts, and
  * vertex-colored parks with crop-row fields. Lots near the camera and flat enough swap their
  * massing for full `generateBuilding` facade kits (windows, awnings, storefronts) batched per part
  * kind — a bounded LOD that re-picks only when the camera crosses a coarse cell, never per frame.
@@ -16,52 +17,85 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
-import { roundPathCorners, buildJunctionSurface, buildRoadRibbon, dashSegments, GROUND_DECAL_LAYERS, trimPathAtJunctions, } from "@jgengine/core/world/roads";
+import { roundPathCorners, buildIntersectionMarkings, buildRoadRibbon, buildTrimmedIntersections, dashSegments, GROUND_DECAL_LAYERS, } from "@jgengine/core/world/roads";
 import { offsetPath } from "@jgengine/core/world/streets";
 import { triangulatePolygon, triangulateRingBand } from "@jgengine/core/world/cityGeometry";
 import { resolveCityObject, CITY_KIND, CITY_ZONE_KIND, } from "@jgengine/core/world/cityKind";
-import { generateBuilding, resolveBuildingPalette } from "@jgengine/core/world/buildings";
+import { zoneBand, zoneMetric } from "@jgengine/core/world/cityContent";
+import { generateBuilding, resolveBuildingPalette, resolveBuildingWallTones, } from "@jgengine/core/world/buildings";
+import { hashString } from "@jgengine/core/random/rng";
 import { buildScatterProxy } from "../scatter/scatterProxies.js";
 import { InstancedBuildings } from "../structures/GeneratedBuilding.js";
 import { getBuildingKit } from "../structures/buildingKitRegistry.js";
 import { createCityWindowMaterial } from "./cityWindowMaterial.js";
 import { registerSceneKindRenderer } from "./sceneKindRenderers.js";
-const ASPHALT_COLOR = "#3d3f45";
+const ASPHALT_COLOR = "#3a3b3d";
 const GRAVEL_COLOR = "#93815f";
-const SIDEWALK_COLOR = "#98948c";
-const MARKING_COLOR = "#e8e4d8";
+const SIDEWALK_COLOR = "#867f74";
+const MARKING_COLOR = "#ddd9cb";
 const MEDIAN_COLOR = "#4d7a40";
 const PAVEMENT_COLOR = "#a8a49a";
 const CONCRETE_COLOR = "#b0aba1";
 const STEEL_COLOR = "#4c505a";
 const TUNNEL_COLOR = "#5b5754";
-const CURB_COLOR = "#c4c0b6";
+const CURB_COLOR = "#b8b4aa";
 const HEDGE_COLOR = "#3d6631";
-const PARK_COLORS = { plaza: "#b3ada0", green: "#4e7c41", meadow: "#6d8a4c", field: "#94805a", courtyard: "#5c8348", buffer: "#63734a" };
+const VEHICLE_PAINTS = ["#b9bdc3", "#2c2f33", "#79838f", "#8d3330", "#27446e", "#eceae1", "#3c5c48", "#a8792f"];
+const VEHICLE_GLASS_COLOR = "#23262b";
+const SIGNAL_POST_COLOR = "#3b4046";
+const SIGNAL_HOUSING_COLOR = "#1e2226";
+const SIGN_FACE_COLOR = "#c8ccd2";
+const SIGNAL_LAMP_COLORS = ["#d43a2c", "#dfa32b", "#33a558"];
+const KERB_RED = new THREE.Color("#d23a34");
+const KERB_WHITE = new THREE.Color("#e8e8ea");
+const CHECK_DARK = new THREE.Color("#101015");
+const CHECK_LIGHT = new THREE.Color("#e8e8ea");
+const RACE_ASPHALT = new THREE.Color("#1a1c20");
+const RACE_EDGE = new THREE.Color("#d8d4c8");
+const PARK_COLORS = { plaza: "#b3ada0", green: "#4e7c41", meadow: "#6d8a4c", field: "#94805a", courtyard: "#6a655c", buffer: "#63734a" };
 const CROP_COLORS = ["#5d7a35", "#7a6b41", "#6f7f3a"];
+/** Block-interior ground by zone band. A dense district keeps hard surface all the way to its rim;
+ *  only a low-density (large-block) district lets the edge band go back to lawn. */
+const BLOCK_SURFACE_COLORS = { core: "#5b5850", mid: "#6c6456", edge: "#78765c" };
+const BLOCK_EDGE_GREEN = "#6a7f4a";
+/** The developed ground fades into this at its outer reach so the fabric has no stamped rim. */
+const FRINGE_COLOR = "#5f7444";
+/** Non-buildable block land takes its open-space colour so a park block never shows raw terrain. */
+const BLOCK_OPEN_COLORS = { park: PARK_COLORS.green, plaza: PARK_COLORS.plaza, field: PARK_COLORS.field, buffer: PARK_COLORS.buffer };
 /**
  * City ground-decal stack. The single-owner {@link GROUND_DECAL_LAYERS} table fixes the authored-road
  * heights, but a generated district drapes many more surface classes (sidewalk/park/median/curb) and
  * wants more clearance over relief, so it keeps its own baseline while mirroring the table's ordering
  * (terrain < road == junction < marking) and its two hard contracts: the welded junction surface
  * shares the road layer (seam-welded, never stacked), and markings ride above the road with
- * `polygonOffset`/`renderOrder` on the material. Values below preserve the district's prior look.
+ * `polygonOffset`/`renderOrder` on the material. Everything behind the curb (block land, sidewalk,
+ * parks) rides a curb-height step ABOVE the carriageway, and the curb face is real vertical
+ * geometry between the two — a flat sidewalk under the road plane cannot read as a street.
  */
-const SIDEWALK_LAYER = 0.1;
-const PARK_LAYER = 0.12;
-const DRIVEWAY_LAYER = 0.12;
-const BRIDGE_DECK_LIFT = 0.12;
-const PARKING_LAYER = 0.13;
-const PLAZA_LAYER = 0.14;
+const URBAN_LAYER = 0.06; // street-derived developed ground, under everything else
 const ROAD_LAYER = 0.16; // asphalt/gravel carriageway AND the welded junction surface (seam-shared)
-const CROP_LAYER = 0.2;
-const CURB_LAYER = 0.24;
-const MARKING_LAYER = 0.26;
+const MARKING_LAYER = 0.24;
 const MEDIAN_LAYER = 0.3;
-/** Trim + weld tuning shared by {@link trimPathAtJunctions} and {@link buildJunctionSurface} for the district. */
-const JUNCTION_OPTS = { curbReturnRadius: 3, apronMargin: 0.6, filletSegments: 6, elevation: ROAD_LAYER, maxSegmentLength: 2 };
+const BLOCK_LAND_LAYER = 0.3;
+const CURB_LAYER = 0.32;
+const SIDEWALK_LAYER = 0.32;
+const PARK_LAYER = 0.34;
+const DRIVEWAY_LAYER = 0.34;
+const PARKING_LAYER = 0.35;
+const PLAZA_LAYER = 0.36;
+const CROP_LAYER = 0.42;
+const RACE_SURFACE_LAYER = 0.28;
+const RACE_PAINT_LAYER = 0.3;
+const BRIDGE_DECK_LIFT = 0.12;
+/** Compact carriageway-union — same seam as StreetGeometryPreview and playground `cityScene`. */
+const JUNCTION_OPTS = { curbReturnRadius: 2, apronMargin: 0.25, filletSegments: 6, elevation: ROAD_LAYER, maxSegmentLength: 2 };
 const SPECIES_PROXY = { broadleaf: "oak", conifer: "pine", palm: "palm", cypress: "cypress" };
 const SPECIES_SCALE = { broadleaf: 2.7, conifer: 2.5, palm: 2.6, cypress: 2.3 };
+const VEHICLE_SHAPES = {
+    car: { body: [1.82, 0.72, 4.42], bodyY: 0.62, cabin: [1.62, 0.62, 2.24], cabinY: 1.24, cabinAlong: -0.24, roof: [1.34, 0.12, 1.86], roofY: 1.58, roofAlong: -0.24 },
+    van: { body: [2.02, 1.0, 5.2], bodyY: 0.76, cabin: [1.82, 0.74, 3.2], cabinY: 1.58, cabinAlong: -0.42, roof: [1.56, 0.12, 2.8], roofY: 1.99, roofAlong: -0.42 },
+    truck: { body: [2.32, 1.46, 6.8], bodyY: 0.99, cabin: [2.1, 0.62, 0.54], cabinY: 1.32, cabinAlong: 3.18, roof: [1.94, 0.14, 6.1], roofY: 1.79, roofAlong: -0.2 },
+};
 /** Accumulates draped ribbons, patches, discs, and quads into one merged (optionally colored) buffer. */
 class MeshAccumulator {
     positions = [];
@@ -162,6 +196,22 @@ class MeshAccumulator {
             this.indices.push(index + base);
         this.pushColor(positions.length, color);
     }
+    /** A vertical skirt around a closed ring — the curb face between carriageway and sidewalk. */
+    addRingWall(ring, sample, bottom, top, color = null) {
+        if (ring.length < 3)
+            return;
+        const base = this.positions.length / 3;
+        for (const [x, z] of ring) {
+            const y = sample(x, z);
+            this.positions.push(x, y + bottom, z, x, y + top, z);
+        }
+        for (let i = 0; i < ring.length; i += 1) {
+            const a = base + i * 2;
+            const b = base + ((i + 1) % ring.length) * 2;
+            this.indices.push(a, a + 1, b, b, a + 1, b + 1);
+        }
+        this.pushColor(ring.length * 2, color);
+    }
     build() {
         if (this.indices.length === 0)
             return null;
@@ -173,6 +223,48 @@ class MeshAccumulator {
         geometry.computeVertexNormals();
         return geometry;
     }
+    /** Flat draped quad in XZ, already lifted: corners in order around the face. */
+    addQuad(corners, color) {
+        if (this.colors === null)
+            return;
+        const base = this.positions.length / 3;
+        for (const corner of corners)
+            this.positions.push(corner[0], corner[1], corner[2]);
+        this.indices.push(base, base + 1, base + 2, base, base + 2, base + 3);
+        this.pushColor(4, color);
+    }
+    /** Standing barrier brick: a box extruded along `across` and `forward`, striped by the caller. */
+    addSealBlock(x, z, y, height, halfAcross, halfDepth, across, forward, color) {
+        if (this.colors === null)
+            return;
+        const ax = across[0];
+        const az = across[1];
+        const fx = forward[0];
+        const fz = forward[1];
+        const corners = [
+            [x - ax * halfAcross - fx * halfDepth, y, z - az * halfAcross - fz * halfDepth],
+            [x + ax * halfAcross - fx * halfDepth, y, z + az * halfAcross - fz * halfDepth],
+            [x + ax * halfAcross + fx * halfDepth, y, z + az * halfAcross + fz * halfDepth],
+            [x - ax * halfAcross + fx * halfDepth, y, z - az * halfAcross + fz * halfDepth],
+            [x - ax * halfAcross - fx * halfDepth, y + height, z - az * halfAcross - fz * halfDepth],
+            [x + ax * halfAcross - fx * halfDepth, y + height, z + az * halfAcross - fz * halfDepth],
+            [x + ax * halfAcross + fx * halfDepth, y + height, z + az * halfAcross + fz * halfDepth],
+            [x - ax * halfAcross + fx * halfDepth, y + height, z - az * halfAcross + fz * halfDepth],
+        ];
+        const base = this.positions.length / 3;
+        for (const corner of corners)
+            this.positions.push(corner[0], corner[1], corner[2]);
+        const faces = [
+            [0, 1, 5, 4],
+            [1, 2, 6, 5],
+            [2, 3, 7, 6],
+            [3, 0, 4, 7],
+            [4, 5, 6, 7],
+        ];
+        for (const [a, b, c, d] of faces)
+            this.indices.push(base + a, base + b, base + c, base + a, base + c, base + d);
+        this.pushColor(8, color);
+    }
 }
 /** Split a polyline into runs that keep `pad` clearance from every intersection disc. */
 function clipPolylineAtIntersections(points, intersections, pad) {
@@ -210,86 +302,6 @@ function clipPolylineAtIntersections(points, intersections, pad) {
         runs.push(current);
     return runs;
 }
-/** Andrew's monotone-chain convex hull of XZ points (CCW), degenerate-safe. */
-function convexHull(points) {
-    const pts = points.map((p) => [p[0], p[1]]).sort((a, b) => (a[0] === b[0] ? a[1] - b[1] : a[0] - b[0]));
-    if (pts.length < 3)
-        return pts;
-    const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
-    const lower = [];
-    for (const p of pts) {
-        while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], p) <= 0)
-            lower.pop();
-        lower.push(p);
-    }
-    const upper = [];
-    for (let i = pts.length - 1; i >= 0; i -= 1) {
-        const p = pts[i];
-        while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], p) <= 0)
-            upper.pop();
-        upper.push(p);
-    }
-    lower.pop();
-    upper.pop();
-    return lower.concat(upper);
-}
-/** Round every vertex of a CLOSED ring into a short arc — the curb-return radius that turns a hard
- *  polygon corner into a real street corner. Radius is clamped to each corner's shorter leg. */
-function roundRing(ring, radius, segments = 5) {
-    if (ring.length < 3 || radius <= 0)
-        return ring.map((p) => [p[0], p[1]]);
-    const n = ring.length;
-    const out = [];
-    for (let i = 0; i < n; i += 1) {
-        const a = ring[(i - 1 + n) % n];
-        const v = ring[i];
-        const b = ring[(i + 1) % n];
-        const ax = a[0] - v[0];
-        const az = a[1] - v[1];
-        const bx = b[0] - v[0];
-        const bz = b[1] - v[1];
-        const la = Math.hypot(ax, az) || 1;
-        const lb = Math.hypot(bx, bz) || 1;
-        const r = Math.min(radius, la / 2, lb / 2);
-        const p0 = [v[0] + (ax / la) * r, v[1] + (az / la) * r];
-        const p1 = [v[0] + (bx / lb) * r, v[1] + (bz / lb) * r];
-        out.push(p0);
-        for (let s = 1; s < segments; s += 1) {
-            const t = s / segments;
-            const u = 1 - t;
-            out.push([u * u * p0[0] + 2 * u * t * v[0] + t * t * p1[0], u * u * p0[1] + 2 * u * t * v[1] + t * t * p1[1]]);
-        }
-        out.push(p1);
-    }
-    return out;
-}
-/**
- * The pavement outline of a junction: each arm's roadway extended to the crossing, hulled into one
- * convex area, then corner-rounded. This reads as a real intersection (a squared crossing with
- * rounded curb corners) instead of the old stamped circle. Returns `null` for a degenerate junction.
- */
-function junctionOutline(cross, reachScale = 1.15, expand = 0) {
-    if (cross.arms.length < 2)
-        return null;
-    let maxHalf = 0;
-    for (const arm of cross.arms)
-        maxHalf = Math.max(maxHalf, arm.width / 2);
-    const reach = maxHalf * reachScale + expand;
-    const mouth = [];
-    for (const arm of cross.arms) {
-        const dir = [Math.sin(arm.angle), Math.cos(arm.angle)];
-        const perp = [-dir[1], dir[0]];
-        const hw = arm.width / 2 + expand;
-        mouth.push([cross.x + dir[0] * reach + perp[0] * hw, cross.z + dir[1] * reach + perp[1] * hw]);
-        mouth.push([cross.x + dir[0] * reach - perp[0] * hw, cross.z + dir[1] * reach - perp[1] * hw]);
-    }
-    const hull = convexHull(mouth);
-    if (hull.length < 3)
-        return null;
-    // Curb-return radius: a real corner, capped so a tight junction never over-rounds into a blob.
-    const cornerR = Math.min(maxHalf * 0.9 + expand, 5.5);
-    return roundRing(hull, cornerR, 6);
-}
 let unitGeometryCache = null;
 /** Unit massing primitives shared by every district: box, gable prism (ridge along X), cylinder, dome. */
 function unitGeometries() {
@@ -436,18 +448,20 @@ function OneCity({ object, context }) {
         const units = unitGeometries();
         const buckets = {
             box: { matrices: [], colors: [] },
-            banded: { matrices: [], colors: [], groundOffsets: [] },
+            banded: { matrices: [], colors: [], groundOffsets: [], facades: [] },
             gable: { matrices: [], colors: [] },
             cylinder: { matrices: [], colors: [] },
             dome: { matrices: [], colors: [] },
         };
         const color = new THREE.Color();
+        const wallTones = resolveBuildingWallTones(resolved.rules.style).map((tone) => new THREE.Color(tone));
         const roleBase = {
             wall: new THREE.Color(roleColor(palette, "wall")),
             roof: new THREE.Color(roleColor(palette, "roof")),
             trim: new THREE.Color(roleColor(palette, "trim")),
             accent: new THREE.Color(roleColor(palette, "accent")),
         };
+        const lotWall = new THREE.Color();
         for (const lot of resolved.lots) {
             if (detail.ids.has(lot.id))
                 continue;
@@ -471,6 +485,17 @@ function OneCity({ object, context }) {
             const foundationBase = minY - 0.5;
             // Edge-of-town lots vary more; downtown stays composed.
             const jitterAmp = lot.zone === "edge" ? 0.4 : lot.zone === "mid" ? 0.28 : 0.18;
+            // Each building draws its wall colour from the style's tone family, then shifts value/hue on
+            // top — one flat hue per style is what makes a whole skyline read as a single paint bucket.
+            const idHash = hashString(lot.id);
+            lotWall.copy(wallTones[idHash % wallTones.length]);
+            const shade = ((idHash >>> 8) % 1024) / 1024;
+            const hue = ((idHash >>> 19) % 512) / 512;
+            lotWall.offsetHSL((hue - 0.5) * 0.07, (hue - 0.5) * 0.24, (shade - 0.5) * 0.2);
+            const facadeSeed = ((idHash >>> 17) % 997) / 997;
+            // Parking structures are the one class whose "windows" are open deck slots, and the resolver
+            // can seat an interior-fill class here that `CityLotClass` does not name.
+            const facadeKind = lot.class === "garage" ? 2 : lot.floors >= 8 ? 1 : 0;
             for (const piece of lot.pieces) {
                 const px = lot.center[0] + piece.offset[0] * c + piece.offset[2] * s;
                 const pz = lot.center[1] - piece.offset[0] * s + piece.offset[2] * c;
@@ -480,19 +505,23 @@ function OneCity({ object, context }) {
                 const groundOffset = grounded ? grade - foundationBase : -piece.offset[1];
                 const matrix = new THREE.Matrix4().compose(new THREE.Vector3(px, piece.shape === "gable" || piece.shape === "cylinder" || piece.shape === "dome" ? baseY : baseY + height / 2, pz), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), lot.rotationY + piece.rotationY), new THREE.Vector3(Math.max(0.05, piece.size[0]), Math.max(0.05, height), Math.max(0.05, piece.size[2])));
                 const amp = jitterAmp * ROLE_JITTER[piece.role];
-                color.copy(roleBase[piece.role]);
+                color.copy(piece.role === "wall" ? lotWall : roleBase[piece.role]);
+                // Trim/roof/accent stay in the lot's own family so a building reads as one object, not as
+                // borrowed parts: pull each partway toward its wall tone before the role jitter.
+                if (piece.role === "trim")
+                    color.lerp(lotWall, 0.45);
+                else if (piece.role === "roof")
+                    color.lerp(lotWall, 0.2);
                 // Accent trim (awnings/cornices) is a saturated storefront color that reads as a stray red/pink
                 // strip at district scale — pull it partway to the wall so it stays a tasteful accent.
-                if (piece.role === "accent")
-                    color.lerp(roleBase.wall, 0.5);
+                else if (piece.role === "accent")
+                    color.lerp(lotWall, 0.5);
                 color.multiplyScalar(1 - amp / 2 + lot.jitter * amp);
-                // A whisper of hue shift so rows of houses never read as one paint bucket.
-                color.r *= 1 + (lot.jitter - 0.5) * 0.08;
-                color.b *= 1 + (0.5 - lot.jitter) * 0.08;
                 const bucket = piece.shape === "box" ? (piece.banded ? buckets.banded : buckets.box) : buckets[piece.shape];
                 bucket.matrices.push(matrix);
                 bucket.colors.push(color.clone());
                 bucket.groundOffsets?.push(groundOffset);
+                bucket.facades?.push(facadeSeed, facadeKind);
             }
         }
         // Cylinders/gables/domes scale from their base (geometry roots at y=0), boxes from center —
@@ -504,9 +533,10 @@ function OneCity({ object, context }) {
             const mesh = new THREE.InstancedMesh(geometry, material, bucket.matrices.length);
             bucket.matrices.forEach((matrix, i) => mesh.setMatrixAt(i, matrix));
             bucket.colors.forEach((tint, i) => mesh.setColorAt(i, tint));
-            if (bucket.groundOffsets !== undefined) {
+            if (bucket.groundOffsets !== undefined && bucket.facades !== undefined) {
                 mesh.geometry = geometry.clone();
                 mesh.geometry.setAttribute("instanceGroundOffset", new THREE.InstancedBufferAttribute(new Float32Array(bucket.groundOffsets), 1));
+                mesh.geometry.setAttribute("instanceFacade", new THREE.InstancedBufferAttribute(new Float32Array(bucket.facades), 2));
             }
             mesh.instanceMatrix.needsUpdate = true;
             if (mesh.instanceColor !== null)
@@ -540,11 +570,13 @@ function OneCity({ object, context }) {
     const ground = useMemo(() => {
         if (resolved === null || resolved.streets.length === 0)
             return null;
-        const asphalt = new MeshAccumulator();
+        const asphalt = new MeshAccumulator(true);
         const gravel = new MeshAccumulator();
         const sidewalks = new MeshAccumulator();
-        const patches = new MeshAccumulator();
-        const markings = new MeshAccumulator();
+        const urban = new MeshAccumulator(true);
+        const land = new MeshAccumulator(true);
+        const patches = new MeshAccumulator(true);
+        const markings = new MeshAccumulator(true);
         const curbs = new MeshAccumulator();
         const medians = new MeshAccumulator();
         const pavementDrives = new MeshAccumulator();
@@ -552,9 +584,14 @@ function OneCity({ object, context }) {
         const parks = new MeshAccumulator(true);
         const crops = new MeshAccumulator(true);
         const parkColor = new THREE.Color();
+        const wearColor = new THREE.Color();
+        const markColor = new THREE.Color();
+        const LANE_TINT = new THREE.Color(0.78, 0.77, 0.72);
+        const STALL_TINT = new THREE.Color(0.55, 0.54, 0.5);
         // Sidewalks now come from block curb→land bands; only pre-block documents fall back to the old
         // per-street widened ribbon.
         const useBlockSidewalks = resolved.blocks.length > 0;
+        const sidewalkW = Math.max(0, resolved.rules.sidewalkWidth);
         // Feature-aware height: because streets stay continuous across water and through ridges, the road
         // must ride UP onto a bridge deck and hold FLAT through a tunnel bore rather than dive under the
         // river or climb over the hill. Points off any feature fall back to the terrain sampler.
@@ -605,7 +642,7 @@ function OneCity({ object, context }) {
             }
             return sample(x, z);
         };
-        const addMarkQuad = (center, along, length, width) => {
+        const addMarkQuad = (center, along, length, width, tint) => {
             const perp = [-along[1], along[0]];
             const base = markings.positions.length / 3;
             for (const [sa, sp] of [
@@ -617,106 +654,123 @@ function OneCity({ object, context }) {
                 const x = center[0] + along[0] * length * sa + perp[0] * width * sp;
                 const z = center[1] + along[1] * length * sa + perp[1] * width * sp;
                 markings.positions.push(x, deckSampler(x, z) + MARKING_LAYER, z);
+                markings.colors?.push(tint.r, tint.g, tint.b);
             }
             markings.indices.push(base, base + 2, base + 1, base + 1, base + 2, base + 3);
         };
-        // Trim carriageways back to their junction boundaries and weld one surface per crossing (no
-        // overlapping ribbons hidden under a floating disc). Street endpoints coincide bitwise with
-        // junction nodes, so `trimPathAtJunctions` cuts each rounded ribbon exactly at the crossing; the
-        // terminal corners feed `buildJunctionSurface` per intersection. Any crossing that gets no trimmed
-        // approach (e.g. sliced past the intersection cap) falls back to the old rounded outline below.
+        // Trim carriageways and weld one compact surface per crossing — the same
+        // `buildTrimmedIntersections` seam StreetGeometryPreview and playground cityScene consume.
+        // Do not stack plaza discs, hull aprons, or fat zebra paint on top of that union.
+        const roundedPaths = resolved.streets.map((street) => street.points.length < 2 ? street.points : roundPathCorners(street.points, Math.max(2.5, street.width * 1.15), 9));
         const intersectionInputs = resolved.intersections.map((cross) => ({
             x: cross.x,
             z: cross.z,
             arms: cross.arms.map((arm) => ({ angle: arm.angle, width: arm.width })),
         }));
-        const approachesByCross = new Map();
-        for (const street of resolved.streets) {
+        const intersectionStreets = resolved.streets.map((street, streetIndex) => {
+            const path = roundedPaths[streetIndex];
+            // Always declare sidewalk widths when sidewalks are on so junction curb-return aprons weld;
+            // per-street sidewalk ribbons are skipped below when block curb rings already own the walk.
+            const wantSidewalk = street.sidewalk && sidewalkW > 0 && resolved.rules.sidewalks;
+            const arterial = street.level === "boulevard" || street.level === "avenue";
+            return {
+                path,
+                width: street.width,
+                ...(wantSidewalk ? { sidewalks: { left: sidewalkW, right: sidewalkW } } : {}),
+                ...(arterial && street.surface === "asphalt"
+                    ? {
+                        markings: {
+                            lines: [{ offset: 0, width: 0.16 }],
+                            stopLine: true,
+                        },
+                    }
+                    : {}),
+            };
+        });
+        const trimmed = buildTrimmedIntersections(intersectionStreets, intersectionInputs, deckSampler, JUNCTION_OPTS);
+        for (let i = 0; i < trimmed.ribbons.length; i += 1) {
+            const streetIndex = trimmed.trimmedStreetIndices[i];
+            const street = resolved.streets[streetIndex];
+            const wear = (hashString(`surface:${streetIndex}`) % 1024) / 1024;
+            wearColor.setRGB(0.86 + wear * 0.3, 0.87 + wear * 0.28, 0.9 + wear * 0.24);
+            const target = street.surface === "gravel" ? gravel : asphalt;
+            target.addMesh(trimmed.ribbons[i], street.surface === "gravel" ? null : wearColor);
+        }
+        if (!useBlockSidewalks) {
+            for (const sidewalk of trimmed.sidewalks)
+                sidewalks.addMesh(sidewalk);
+            for (const apron of trimmed.sidewalkAprons)
+                sidewalks.addMesh(apron);
+        }
+        for (let j = 0; j < trimmed.junctions.length; j += 1) {
+            const crossIndex = trimmed.junctionIndices[j];
+            const scuff = (hashString(`cross:${crossIndex}`) % 512) / 512;
+            wearColor.setRGB(0.76 + scuff * 0.18, 0.77 + scuff * 0.17, 0.8 + scuff * 0.16);
+            patches.addMesh(trimmed.junctions[j], wearColor);
+        }
+        for (const paint of buildIntersectionMarkings(trimmed, deckSampler, {
+            mouthClearance: 1.25,
+            dashLength: 2.6,
+            dashGap: 3.6,
+            elevation: MARKING_LAYER,
+            maxSegmentLength: 2,
+        })) {
+            markColor.copy(LANE_TINT);
+            markings.addMesh(paint, markColor);
+        }
+        resolved.streets.forEach((street, streetIndex) => {
             if (street.points.length < 2)
-                continue;
-            const rounded = roundPathCorners(street.points, Math.max(2.5, street.width * 1.15), 9);
-            const surface = street.surface === "gravel" ? gravel : asphalt;
-            for (const sub of trimPathAtJunctions(rounded, street.width, intersectionInputs, JUNCTION_OPTS)) {
-                surface.addRibbon(sub.path, street.width, deckSampler, ROAD_LAYER);
-                for (const cut of sub.cuts) {
-                    const approach = {
-                        center: cut.center,
-                        left: [cut.left[0], deckSampler(cut.left[0], cut.left[1]) + ROAD_LAYER, cut.left[1]],
-                        right: [cut.right[0], deckSampler(cut.right[0], cut.right[1]) + ROAD_LAYER, cut.right[1]],
-                    };
-                    const list = approachesByCross.get(cut.junctionIndex);
-                    if (list)
-                        list.push(approach);
-                    else
-                        approachesByCross.set(cut.junctionIndex, [approach]);
-                }
-            }
-            if (street.sidewalk && !useBlockSidewalks)
+                return;
+            const rounded = roundedPaths[streetIndex];
+            const wear = (hashString(`surface:${streetIndex}`) % 1024) / 1024;
+            wearColor.setRGB(0.86 + wear * 0.3, 0.87 + wear * 0.28, 0.9 + wear * 0.24);
+            if (street.sidewalk && !useBlockSidewalks && sidewalkW <= 0) {
                 sidewalks.addRibbon(rounded, street.width + 3.6, sample, SIDEWALK_LAYER);
-            // Curbs + painted edge/lane lines make a flat ribbon read as a real carriageway. Both break at
-            // junctions (the crossing owns its own pavement), so clip the centerline first.
+            }
             if (street.surface === "asphalt") {
                 const half = street.width / 2;
                 for (const run of clipPolylineAtIntersections(rounded, resolved.intersections, half + 0.5)) {
                     if (run.length < 2)
                         continue;
-                    const left = offsetPath(run, half);
-                    const right = offsetPath(run, -half);
-                    curbs.addRibbon(left, 0.55, deckSampler, CURB_LAYER);
-                    curbs.addRibbon(right, 0.55, deckSampler, CURB_LAYER);
-                    if (street.level !== "lane") {
-                        // White edge (fog) lines just inside the curb.
-                        markings.addRibbon(offsetPath(run, half - 0.75), 0.16, deckSampler, MARKING_LAYER);
-                        markings.addRibbon(offsetPath(run, -(half - 0.75)), 0.16, deckSampler, MARKING_LAYER);
-                        // Avenue+ get dashed lane dividers either side of the centerline.
+                    if (!useBlockSidewalks) {
+                        curbs.addRibbon(offsetPath(run, half), 0.55, deckSampler, CURB_LAYER);
+                        curbs.addRibbon(offsetPath(run, -half), 0.55, deckSampler, CURB_LAYER);
+                    }
+                    if (street.level === "boulevard" || street.level === "avenue") {
+                        markColor.copy(LANE_TINT);
+                        markings.addRibbon(offsetPath(run, half - 0.8), 0.12, deckSampler, MARKING_LAYER, markColor);
+                        markings.addRibbon(offsetPath(run, -(half - 0.8)), 0.12, deckSampler, MARKING_LAYER, markColor);
                         if (street.level === "avenue") {
                             for (const dash of dashSegments(offsetPath(run, half * 0.5), 2.4, 3.2))
-                                markings.addRibbon(dash, 0.13, deckSampler, MARKING_LAYER);
+                                markings.addRibbon(dash, 0.12, deckSampler, MARKING_LAYER, markColor);
                             for (const dash of dashSegments(offsetPath(run, -half * 0.5), 2.4, 3.2))
-                                markings.addRibbon(dash, 0.13, deckSampler, MARKING_LAYER);
+                                markings.addRibbon(dash, 0.12, deckSampler, MARKING_LAYER, markColor);
                         }
                     }
                 }
             }
             if (street.bulb !== undefined) {
-                (street.surface === "gravel" ? gravel : asphalt).addDisc(street.bulb, street.width * 1.15, sample, ROAD_LAYER);
+                if (street.surface === "gravel")
+                    gravel.addDisc(street.bulb, street.width * 1.15, sample, ROAD_LAYER);
+                else
+                    asphalt.addDisc(street.bulb, street.width * 1.15, sample, ROAD_LAYER, wearColor);
                 if (street.sidewalk)
                     sidewalks.addDisc(street.bulb, street.width * 1.15 + 1.8, sample, SIDEWALK_LAYER);
             }
-            if (street.surface === "asphalt" && street.level !== "lane") {
-                if (street.level === "boulevard") {
-                    // Median strip instead of a center line, broken WELL clear of every junction — a median
-                    // stub poking into a crossing reads as debris. Runs shorter than a car are dropped and
-                    // ends get a rounded cap so each island reads designed.
-                    for (const run of clipPolylineAtIntersections(rounded, resolved.intersections, 2.6)) {
-                        let runLength = 0;
-                        for (let i = 0; i + 1 < run.length; i += 1)
-                            runLength += Math.hypot(run[i + 1][0] - run[i][0], run[i + 1][1] - run[i][1]);
-                        if (runLength < 7)
-                            continue;
-                        const width = Math.max(1.3, street.width * 0.14);
-                        medians.addRibbon(run, width, deckSampler, MEDIAN_LAYER);
-                        medians.addDisc(run[0], width / 2, deckSampler, MEDIAN_LAYER, null, 8);
-                        medians.addDisc(run[run.length - 1], width / 2, deckSampler, MEDIAN_LAYER, null, 8);
-                    }
-                }
-                else {
-                    for (const dash of dashSegments(rounded, 2.6, 3.6)) {
-                        const [a, b] = [dash[0], dash[dash.length - 1]];
-                        const mid = [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
-                        let inCross = false;
-                        for (const cross of resolved.intersections) {
-                            if (Math.hypot(cross.x - mid[0], cross.z - mid[1]) < cross.radius + 0.8) {
-                                inCross = true;
-                                break;
-                            }
-                        }
-                        if (!inCross)
-                            markings.addRibbon(dash, 0.18, deckSampler, MARKING_LAYER);
-                    }
+            if (street.surface === "asphalt" && street.level === "boulevard") {
+                for (const run of clipPolylineAtIntersections(rounded, resolved.intersections, 2.6)) {
+                    let runLength = 0;
+                    for (let i = 0; i + 1 < run.length; i += 1)
+                        runLength += Math.hypot(run[i + 1][0] - run[i][0], run[i + 1][1] - run[i][1]);
+                    if (runLength < 7)
+                        continue;
+                    const width = Math.max(1.3, street.width * 0.14);
+                    medians.addRibbon(run, width, deckSampler, MEDIAN_LAYER);
+                    medians.addDisc(run[0], width / 2, deckSampler, MEDIAN_LAYER, null, 8);
+                    medians.addDisc(run[run.length - 1], width / 2, deckSampler, MEDIAN_LAYER, null, 8);
                 }
             }
-        }
+        });
         // NOTE: streetGenerator's `Street.sidewalks` offset polylines are NOT surfaced here — this renderer
         // consumes `resolveCityObject`'s `CityStreet` (which carries only a `sidewalk` boolean), and its
         // sidewalks come from richer block curb→land bands below. Wiring the raw offset polylines would be a
@@ -724,57 +778,133 @@ function OneCity({ object, context }) {
         // Sidewalk band per block: the region between the curb ring (outer) and the land ring (inner).
         // Blocks whose two rings coincide (no sidewalk) drop out — every band triangle is degenerate,
         // so `addRingBand` emits nothing.
+        const hx = Math.max(1e-6, resolved.size[0] / 2);
+        const hz = Math.max(1e-6, resolved.size[1] / 2);
+        const cosR = Math.cos(resolved.rotationY);
+        const sinR = Math.sin(resolved.rotationY);
+        const bandAt = (x, z, roll) => {
+            const dx = x - resolved.center[0];
+            const dz = z - resolved.center[2];
+            return zoneBand(zoneMetric(dx * cosR - dz * sinR, dx * sinR + dz * cosR, hx, hz), resolved.rules.profile, resolved.rules.coreExtent, resolved.rules.midExtent, roll);
+        };
+        const lawnEdge = !resolved.rules.sidewalks || resolved.rules.blockSize > 64;
+        // Developed ground. Where the street graph yields real block faces the land ring behind the
+        // sidewalk is filled exactly; but block extraction routinely recovers only a fraction of a
+        // wandered district's faces, and every face it misses is terrain grass under downtown. So the
+        // fabric is also stamped as a street-distance field: any cell within reach of a centerline is
+        // developed, shaded pavement near the kerb and yard/service surface deeper into the block.
+        if (resolved.rules.fabric) {
+            // Reach and paved band are measured OUTWARD FROM THE KERB, not from the centreline: a
+            // 20 m boulevard and a 5 m lane must not lay the same width of pavement beside them.
+            const reach = Math.min(40, Math.max(10, resolved.rules.blockSize * 0.55));
+            const pavedTo = Math.max(1.2, resolved.rules.sidewalkWidth + 0.3);
+            const cell = 2.5;
+            let minX = Infinity;
+            let minZ = Infinity;
+            let maxX = -Infinity;
+            let maxZ = -Infinity;
+            let widest = 0;
+            for (const street of resolved.streets) {
+                widest = Math.max(widest, street.width);
+                for (const [x, z] of street.points) {
+                    minX = Math.min(minX, x);
+                    maxX = Math.max(maxX, x);
+                    minZ = Math.min(minZ, z);
+                    maxZ = Math.max(maxZ, z);
+                }
+            }
+            const pad = reach + widest / 2;
+            const originX = minX - pad;
+            const originZ = minZ - pad;
+            const nx = Math.ceil((maxX + pad - originX) / cell) + 1;
+            const nz = Math.ceil((maxZ + pad - originZ) / cell) + 1;
+            if (Number.isFinite(minX) && nx > 1 && nz > 1 && nx * nz <= 160_000) {
+                const field = new Float32Array(nx * nz).fill(Infinity);
+                for (const street of resolved.streets) {
+                    const half = street.width / 2;
+                    for (let s = 0; s + 1 < street.points.length; s += 1) {
+                        const [ax, az] = street.points[s];
+                        const [bx, bz] = street.points[s + 1];
+                        const vx = bx - ax;
+                        const vz = bz - az;
+                        const len2 = Math.max(1e-6, vx * vx + vz * vz);
+                        const span = reach + half;
+                        const i0 = Math.max(0, Math.floor((Math.min(ax, bx) - span - originX) / cell));
+                        const i1 = Math.min(nx - 1, Math.ceil((Math.max(ax, bx) + span - originX) / cell));
+                        const j0 = Math.max(0, Math.floor((Math.min(az, bz) - span - originZ) / cell));
+                        const j1 = Math.min(nz - 1, Math.ceil((Math.max(az, bz) + span - originZ) / cell));
+                        for (let j = j0; j <= j1; j += 1) {
+                            const pz = originZ + j * cell;
+                            for (let i = i0; i <= i1; i += 1) {
+                                const px = originX + i * cell;
+                                const t = Math.max(0, Math.min(1, ((px - ax) * vx + (pz - az) * vz) / len2));
+                                const d = Math.hypot(px - (ax + vx * t), pz - (az + vz * t)) - half;
+                                const idx = j * nx + i;
+                                if (d < field[idx])
+                                    field[idx] = d;
+                            }
+                        }
+                    }
+                }
+                const fringe = new THREE.Color(FRINGE_COLOR);
+                const fabricColor = new THREE.Color();
+                for (let j = 0; j + 1 < nz; j += 1) {
+                    for (let i = 0; i + 1 < nx; i += 1) {
+                        const d = (field[j * nx + i] + field[j * nx + i + 1] + field[(j + 1) * nx + i] + field[(j + 1) * nx + i + 1]) / 4;
+                        if (d > reach)
+                            continue;
+                        const x = originX + (i + 0.5) * cell;
+                        const z = originZ + (j + 0.5) * cell;
+                        const tone = (hashString(`fabric:${i}:${j}`) % 256) / 256;
+                        if (d < pavedTo) {
+                            fabricColor.set(SIDEWALK_COLOR);
+                        }
+                        else {
+                            const band = bandAt(x, z, tone);
+                            fabricColor.set(band === "edge" && lawnEdge ? BLOCK_EDGE_GREEN : BLOCK_SURFACE_COLORS[band]);
+                            // A block-sized patch tone over the fine per-cell grain: yards, courts and lots,
+                            // not one poured apron.
+                            fabricColor.multiplyScalar(0.8 + ((hashString(`yard:${Math.floor(x / 22)}:${Math.floor(z / 22)}`) % 256) / 256) * 0.42);
+                        }
+                        fabricColor.multiplyScalar(0.95 + tone * 0.1);
+                        if (d > reach - 7)
+                            fabricColor.lerp(fringe, Math.min(1, (d - (reach - 7)) / 7));
+                        urban.addPatch([x, z], [cell, cell], 0, sample, URBAN_LAYER, fabricColor);
+                    }
+                }
+            }
+        }
+        // The land ring behind the sidewalk is the block INTERIOR — fill it with a surface read from
+        // the block's use and its zone band, varied per block so a district reads as many yards and
+        // service courts rather than one sheet.
         if (useBlockSidewalks) {
+            const landColor = new THREE.Color();
             for (const block of resolved.blocks) {
+                let cx = 0;
+                let cz = 0;
+                for (const [x, z] of block.polygon) {
+                    cx += x;
+                    cz += z;
+                }
+                cx /= Math.max(1, block.polygon.length);
+                cz /= Math.max(1, block.polygon.length);
+                const tone = (hashString(block.id) % 512) / 512;
+                const band = bandAt(cx, cz, tone);
+                landColor.set(block.kind !== "buildable"
+                    ? BLOCK_OPEN_COLORS[block.kind]
+                    : band === "edge" && lawnEdge
+                        ? BLOCK_EDGE_GREEN
+                        : BLOCK_SURFACE_COLORS[band]);
+                landColor.multiplyScalar(0.88 + tone * 0.24);
+                landColor.r *= 1 + (tone - 0.5) * 0.1;
+                landColor.b *= 1 + (0.5 - tone) * 0.12;
+                land.addPolygon(block.polygon, sample, BLOCK_LAND_LAYER, landColor);
                 sidewalks.addRingBand(block.curb, block.polygon, sample, SIDEWALK_LAYER);
+                curbs.addRingWall(block.curb, sample, ROAD_LAYER - 0.02, CURB_LAYER);
             }
         }
-        // Junctions: corner curb-return apron (sidewalk ring peeking out under the asphalt patch), the
-        // patch itself, and a zebra crossing on every REAL arm — but only where the crossing warrants
-        // it. Avenue-and-up arms (or a boulevard/avenue junction) get zebra stripes and the apron;
-        // small residential crossings get just the asphalt patch.
-        resolved.intersections.forEach((cross, crossIndex) => {
-            const bigLevel = cross.level === "boulevard" || cross.level === "avenue";
-            const armZebra = (width) => bigLevel || width >= resolved.rules.streetWidth * 1.4;
-            const paved = resolved.rules.sidewalks && cross.level !== "lane";
-            // A slightly larger apron underneath the crossing reads as the wrapped sidewalk/curb.
-            if (paved) {
-                const apron = junctionOutline(cross, 1.15, resolved.rules.sidewalkWidth + 0.4);
-                if (apron !== null)
-                    sidewalks.addPolygon(apron, sample, SIDEWALK_LAYER);
-            }
-            // The junction pavement is welded onto the trimmed ribbon ends (seam-shared, no floating disc).
-            // Crossings that got no trimmed approach fall back to the rounded outline / disc, so coverage
-            // never regresses.
-            const approaches = approachesByCross.get(crossIndex);
-            if (approaches !== undefined && approaches.length > 0) {
-                patches.addMesh(buildJunctionSurface({ x: cross.x, z: cross.z }, approaches, deckSampler, JUNCTION_OPTS));
-            }
-            else {
-                const outline = junctionOutline(cross);
-                if (outline !== null)
-                    patches.addPolygon(outline, deckSampler, ROAD_LAYER);
-                else
-                    patches.addDisc([cross.x, cross.z], cross.radius, deckSampler, ROAD_LAYER);
-            }
-            if (paved) {
-                const maxHalf = Math.max(...cross.arms.map((arm) => arm.width / 2));
-                for (const arm of cross.arms) {
-                    if (!armZebra(arm.width))
-                        continue;
-                    const dir = [Math.sin(arm.angle), Math.cos(arm.angle)];
-                    const perp = [-dir[1], dir[0]];
-                    // Stop line across the approach, just outside the crossing box.
-                    const stopDist = maxHalf * 1.15 + 0.55;
-                    addMarkQuad([cross.x + dir[0] * stopDist, cross.z + dir[1] * stopDist], perp, arm.width * 0.82, 0.5);
-                    for (let stripe = 0; stripe < 4; stripe += 1) {
-                        const dist = maxHalf * 1.15 + 1.5 + stripe * 0.85;
-                        const center = [cross.x + dir[0] * dist, cross.z + dir[1] * dist];
-                        addMarkQuad(center, perp, arm.width * 0.8, 0.44);
-                    }
-                }
-            }
-        });
+        // Junction pavement + curb-return sidewalk aprons already came from `buildTrimmedIntersections`
+        // above. No plaza discs, hull aprons, or fat zebra ladders on top of that union.
         for (const drive of resolved.driveways) {
             (drive.surface === "gravel" ? gravelDrives : pavementDrives).addRibbon(drive.points, drive.width, sample, DRIVEWAY_LAYER);
         }
@@ -788,7 +918,7 @@ function OneCity({ object, context }) {
                 const lx = (i / stalls - 0.5) * pad.size[0];
                 const cx = pad.center[0] + lx * cos + (pad.size[1] * 0.24) * sin;
                 const cz = pad.center[1] - lx * sin + (pad.size[1] * 0.24) * cos;
-                addMarkQuad([cx, cz], [sin, cos], pad.size[1] * 0.42, 0.12);
+                addMarkQuad([cx, cz], [sin, cos], pad.size[1] * 0.42, 0.1, STALL_TINT);
             }
         }
         for (const park of resolved.parks) {
@@ -811,6 +941,8 @@ function OneCity({ object, context }) {
             asphalt: asphalt.build(),
             gravel: gravel.build(),
             sidewalks: sidewalks.build(),
+            urban: urban.build(),
+            land: land.build(),
             patches: patches.build(),
             markings: markings.build(),
             curbs: curbs.build(),
@@ -946,7 +1078,7 @@ function OneCity({ object, context }) {
         return { roof: roofs.build(), stone };
     }, [resolved, sample]);
     useEffect(() => () => tunnels?.roof?.dispose(), [tunnels]);
-    // --- Instanced furniture: trees per species, street lights, hedges. ---
+    // --- Instanced furniture: trees per species, street lights, hedges, parked cars, junction signals. ---
     const furniture = useMemo(() => {
         if (resolved === null)
             return null;
@@ -967,10 +1099,14 @@ function OneCity({ object, context }) {
             const mesh = new THREE.InstancedMesh(geometry, material, trees.length);
             const matrix = new THREE.Matrix4();
             trees.forEach((tree, i) => {
-                const scale = tree.scale * SPECIES_SCALE[species];
-                matrix.compose(new THREE.Vector3(tree.x, sample(tree.x, tree.z) - 0.05, tree.z), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), tree.jitter * Math.PI * 2), new THREE.Vector3(scale, scale * (0.92 + tree.jitter * 0.16), scale));
+                // A second stream off the planting position: `tree.jitter` alone left every canopy the same
+                // ball on a stick, so age (girth vs height) and leaf tone vary independently of it.
+                const age = (hashString(`tree:${tree.x.toFixed(2)}:${tree.z.toFixed(2)}`) % 1024) / 1024;
+                const scale = tree.scale * SPECIES_SCALE[species] * (0.66 + age * 0.78);
+                const spread = 0.86 + tree.jitter * 0.34;
+                matrix.compose(new THREE.Vector3(tree.x, sample(tree.x, tree.z) - 0.05, tree.z), new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), tree.jitter * Math.PI * 2), new THREE.Vector3(scale * spread, scale * (0.8 + age * 0.55), scale * spread));
                 mesh.setMatrixAt(i, matrix);
-                color.setScalar(0.82 + tree.jitter * 0.36);
+                color.setRGB(0.74 + age * 0.42, 0.84 + tree.jitter * 0.3, 0.68 + ((age * 5) % 1) * 0.4);
                 mesh.setColorAt(i, color);
             });
             mesh.instanceMatrix.needsUpdate = true;
@@ -1036,6 +1172,108 @@ function OneCity({ object, context }) {
             meshes.push(hedges);
             disposables.push(hedgeMaterial);
         }
+        if (resolved.vehicles.length > 0) {
+            const units = unitGeometries();
+            const paintMaterial = new THREE.MeshStandardMaterial({ roughness: 0.42, metalness: 0.34 });
+            const glassMaterial = new THREE.MeshPhysicalMaterial({ color: VEHICLE_GLASS_COLOR, roughness: 0.16, metalness: 0.2 });
+            const bodies = new THREE.InstancedMesh(units.box, paintMaterial, resolved.vehicles.length);
+            const cabins = new THREE.InstancedMesh(units.box, glassMaterial, resolved.vehicles.length);
+            const roofs = new THREE.InstancedMesh(units.box, paintMaterial, resolved.vehicles.length);
+            const matrix = new THREE.Matrix4();
+            const quat = new THREE.Quaternion();
+            const upAxis = new THREE.Vector3(0, 1, 0);
+            const paint = new THREE.Color();
+            resolved.vehicles.forEach((vehicle, i) => {
+                const shape = VEHICLE_SHAPES[vehicle.kind];
+                const base = sample(vehicle.x, vehicle.z) + (vehicle.stall === "lot" ? PARKING_LAYER : ROAD_LAYER);
+                const along = [Math.sin(vehicle.rotationY), Math.cos(vehicle.rotationY)];
+                quat.setFromAxisAngle(upAxis, vehicle.rotationY);
+                const place = (mesh, size, y, offset) => {
+                    matrix.compose(new THREE.Vector3(vehicle.x + along[0] * offset, base + y, vehicle.z + along[1] * offset), quat, new THREE.Vector3(size[0], size[1], size[2]));
+                    mesh.setMatrixAt(i, matrix);
+                };
+                place(bodies, shape.body, shape.bodyY, 0);
+                place(cabins, shape.cabin, shape.cabinY, shape.cabinAlong);
+                place(roofs, shape.roof, shape.roofY, shape.roofAlong);
+                paint.set(VEHICLE_PAINTS[vehicle.paint % VEHICLE_PAINTS.length]);
+                paint.multiplyScalar(0.88 + ((hashString(`car:${vehicle.x.toFixed(2)}:${vehicle.z.toFixed(2)}`) % 256) / 256) * 0.26);
+                bodies.setColorAt(i, paint);
+                roofs.setColorAt(i, paint);
+            });
+            for (const mesh of [bodies, cabins, roofs]) {
+                mesh.instanceMatrix.needsUpdate = true;
+                if (mesh.instanceColor !== null)
+                    mesh.instanceColor.needsUpdate = true;
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                mesh.frustumCulled = false;
+                meshes.push(mesh);
+            }
+            disposables.push(paintMaterial, glassMaterial);
+        }
+        if (resolved.signals.length > 0) {
+            const units = unitGeometries();
+            const mastCount = resolved.signals.filter((signal) => signal.kind === "signal").length;
+            const postMaterial = new THREE.MeshStandardMaterial({ color: SIGNAL_POST_COLOR, roughness: 0.55, metalness: 0.55 });
+            const headMaterial = new THREE.MeshStandardMaterial({ roughness: 0.62, metalness: 0.15 });
+            const lampMaterial = new THREE.MeshBasicMaterial({ toneMapped: false });
+            const posts = new THREE.InstancedMesh(units.cylinder, postMaterial, resolved.signals.length);
+            const heads = new THREE.InstancedMesh(units.box, headMaterial, resolved.signals.length);
+            const arms = mastCount > 0 ? new THREE.InstancedMesh(units.box, postMaterial, mastCount) : null;
+            const lamps = mastCount > 0 ? new THREE.InstancedMesh(units.box, lampMaterial, mastCount * 3) : null;
+            const matrix = new THREE.Matrix4();
+            const quat = new THREE.Quaternion();
+            const armQuat = new THREE.Quaternion();
+            const upAxis = new THREE.Vector3(0, 1, 0);
+            const tint = new THREE.Color();
+            let mast = 0;
+            resolved.signals.forEach((signal, i) => {
+                const y = sample(signal.x, signal.z);
+                const facing = [Math.sin(signal.heading), Math.cos(signal.heading)];
+                // The mast arm reaches to the right of the facing direction — out over the lanes it controls.
+                const overRoad = [facing[1], -facing[0]];
+                quat.setFromAxisAngle(upAxis, signal.heading);
+                const isSignal = signal.kind === "signal";
+                const postHeight = isSignal ? 5.3 : 2.5;
+                const thickness = isSignal ? 0.2 : 0.13;
+                matrix.compose(new THREE.Vector3(signal.x, y, signal.z), quat, new THREE.Vector3(thickness, postHeight, thickness));
+                posts.setMatrixAt(i, matrix);
+                if (!isSignal) {
+                    matrix.compose(new THREE.Vector3(signal.x, y + postHeight - 0.2, signal.z), quat, new THREE.Vector3(0.72, 0.72, 0.07));
+                    heads.setMatrixAt(i, matrix);
+                    tint.set(SIGN_FACE_COLOR);
+                    heads.setColorAt(i, tint);
+                    return;
+                }
+                const hx = signal.x + overRoad[0] * signal.reach;
+                const hz = signal.z + overRoad[1] * signal.reach;
+                armQuat.setFromAxisAngle(upAxis, signal.heading + Math.PI / 2);
+                matrix.compose(new THREE.Vector3(signal.x + overRoad[0] * signal.reach * 0.5, y + postHeight - 0.15, signal.z + overRoad[1] * signal.reach * 0.5), armQuat, new THREE.Vector3(0.14, 0.14, signal.reach));
+                arms.setMatrixAt(mast, matrix);
+                matrix.compose(new THREE.Vector3(hx, y + postHeight - 0.72, hz), quat, new THREE.Vector3(0.4, 1.14, 0.3));
+                heads.setMatrixAt(i, matrix);
+                tint.set(SIGNAL_HOUSING_COLOR);
+                heads.setColorAt(i, tint);
+                for (let lamp = 0; lamp < 3; lamp += 1) {
+                    matrix.compose(new THREE.Vector3(hx + facing[0] * 0.17, y + postHeight - 0.36 - lamp * 0.36, hz + facing[1] * 0.17), quat, new THREE.Vector3(0.22, 0.22, 0.08));
+                    lamps.setMatrixAt(mast * 3 + lamp, matrix);
+                    tint.set(SIGNAL_LAMP_COLORS[lamp]);
+                    lamps.setColorAt(mast * 3 + lamp, tint);
+                }
+                mast += 1;
+            });
+            for (const mesh of [posts, heads, arms, lamps]) {
+                if (mesh === null)
+                    continue;
+                mesh.instanceMatrix.needsUpdate = true;
+                if (mesh.instanceColor !== null)
+                    mesh.instanceColor.needsUpdate = true;
+                mesh.castShadow = mesh !== lamps;
+                mesh.frustumCulled = false;
+                meshes.push(mesh);
+            }
+            disposables.push(postMaterial, headMaterial, lampMaterial);
+        }
         return { meshes, disposables };
     }, [resolved, sample]);
     useEffect(() => () => {
@@ -1044,9 +1282,196 @@ function OneCity({ object, context }) {
         for (const disposable of furniture.disposables)
             disposable.dispose();
     }, [furniture]);
+    // Race dressing: resurface the lap, stripe its kerbs, paint start/finish + grid, and stand a
+    // barrier across every sealed side street — the visual proof the race is a section of this city.
+    const race = useMemo(() => {
+        if (resolved?.race === undefined)
+            return null;
+        const route = resolved.race;
+        const points = route.centerline;
+        const n = points.length;
+        if (n < 8)
+            return null;
+        const decals = new MeshAccumulator(true);
+        const barriers = new MeshAccumulator(true);
+        const normals = points.map((_, i) => {
+            const before = points[(i - 1 + n) % n];
+            const after = points[(i + 1) % n];
+            const dx = after[0] - before[0];
+            const dz = after[1] - before[1];
+            const len = Math.hypot(dx, dz) || 1;
+            return [dz / len, -dx / len];
+        });
+        const half = points.map((_, i) => Math.max(1.5, (route.widths[i] ?? 9) * 0.5 - 0.3));
+        const surfaceY0 = points.map((p, i) => route.heights?.[i] ?? sample(p[0], p[1]));
+        const rim = (i, off, lift) => [
+            points[i][0] + normals[i][0] * off,
+            surfaceY0[i] + lift,
+            points[i][1] + normals[i][1] * off,
+        ];
+        for (let i = 0; i < n; i += 1) {
+            const j = (i + 1) % n;
+            const midX = (points[i][0] + points[j][0]) * 0.5;
+            const midZ = (points[i][1] + points[j][1]) * 0.5;
+            // Leave welded junction pavement visible — a continuous race ribbon over the mouth undoes the seam.
+            let overJunction = false;
+            for (const cross of resolved.intersections) {
+                if (Math.hypot(cross.x - midX, cross.z - midZ) < cross.radius + 0.6) {
+                    overJunction = true;
+                    break;
+                }
+            }
+            if (overJunction)
+                continue;
+            decals.addQuad([rim(i, -half[i], RACE_SURFACE_LAYER), rim(j, -half[j], RACE_SURFACE_LAYER), rim(j, half[j], RACE_SURFACE_LAYER), rim(i, half[i], RACE_SURFACE_LAYER)], RACE_ASPHALT);
+            for (const side of [-1, 1]) {
+                decals.addQuad([
+                    rim(i, side * half[i], RACE_PAINT_LAYER),
+                    rim(j, side * half[j], RACE_PAINT_LAYER),
+                    rim(j, side * (half[j] - 0.34), RACE_PAINT_LAYER),
+                    rim(i, side * (half[i] - 0.34), RACE_PAINT_LAYER),
+                ], RACE_EDGE);
+            }
+        }
+        for (const kerb of route.kerbs) {
+            const run = kerb.points;
+            if (run.length < 2)
+                continue;
+            const outward = run.map((_, i) => {
+                const before = run[Math.max(0, i - 1)];
+                const after = run[Math.min(run.length - 1, i + 1)];
+                const dx = after[0] - before[0];
+                const dz = after[1] - before[1];
+                const len = Math.hypot(dx, dz) || 1;
+                return [(dz / len) * kerb.side, (-dx / len) * kerb.side];
+            });
+            let travelled = 0;
+            for (let i = 0; i + 1 < run.length; i += 1) {
+                const a = run[i];
+                const b = run[i + 1];
+                const seg = Math.hypot(b[0] - a[0], b[1] - a[1]);
+                if (seg < 1e-6)
+                    continue;
+                const midX = (a[0] + b[0]) * 0.5;
+                const midZ = (a[1] + b[1]) * 0.5;
+                let overJunction = false;
+                for (const cross of resolved.intersections) {
+                    if (Math.hypot(cross.x - midX, cross.z - midZ) < cross.radius + 0.4) {
+                        overJunction = true;
+                        break;
+                    }
+                }
+                if (overJunction) {
+                    travelled += seg;
+                    continue;
+                }
+                const oa = outward[i];
+                const ob = outward[i + 1];
+                let t = 0;
+                while (t < 1 - 1e-6) {
+                    const here = travelled + t * seg;
+                    const band = Math.floor(here / kerb.stripe + 1e-6);
+                    const next = Math.min(1, Math.max(t + 1e-3, t + ((band + 1) * kerb.stripe - here) / seg));
+                    const along = (u) => [a[0] + (b[0] - a[0]) * u, a[1] + (b[1] - a[1]) * u];
+                    const away = (u) => [oa[0] + (ob[0] - oa[0]) * u, oa[1] + (ob[1] - oa[1]) * u];
+                    const [x0, z0] = along(t);
+                    const [x1, z1] = along(next);
+                    const [ox0, oz0] = away(t);
+                    const [ox1, oz1] = away(next);
+                    const drape = (x, z) => [x, sample(x, z) + RACE_PAINT_LAYER, z];
+                    decals.addQuad([drape(x0, z0), drape(x1, z1), drape(x1 + ox1 * kerb.width, z1 + oz1 * kerb.width), drape(x0 + ox0 * kerb.width, z0 + oz0 * kerb.width)], band % 2 === 0 ? KERB_RED : KERB_WHITE);
+                    t = next;
+                }
+                travelled += seg;
+            }
+        }
+        const [lineA, lineB] = route.start.line;
+        const acrossX = lineB[0] - lineA[0];
+        const acrossZ = lineB[1] - lineA[1];
+        const travelX = Math.sin(route.start.heading);
+        const travelZ = Math.cos(route.start.heading);
+        for (let r = 0; r < 2; r += 1) {
+            for (let c = 0; c < 10; c += 1) {
+                const cell = (u, v) => {
+                    const x = lineA[0] + acrossX * u + travelX * v;
+                    const z = lineA[1] + acrossZ * u + travelZ * v;
+                    return [x, sample(x, z) + RACE_PAINT_LAYER, z];
+                };
+                const v0 = -2.5 + (r / 2) * 5;
+                const v1 = -2.5 + ((r + 1) / 2) * 5;
+                decals.addQuad([cell(c / 10, v0), cell((c + 1) / 10, v0), cell((c + 1) / 10, v1), cell(c / 10, v1)], (c + r) % 2 === 0 ? CHECK_DARK : CHECK_LIGHT);
+            }
+        }
+        for (const slot of route.grid) {
+            const fx = Math.sin(slot.heading);
+            const fz = Math.cos(slot.heading);
+            const ax = Math.cos(slot.heading);
+            const az = -Math.sin(slot.heading);
+            const corner = (u, v) => {
+                const x = slot.x + ax * u + fx * v;
+                const z = slot.z + az * u + fz * v;
+                return [x, sample(x, z) + RACE_PAINT_LAYER, z];
+            };
+            for (const [u0, u1, v0, v1] of [
+                [-1.3, -1.12, -2.6, 2.6],
+                [1.12, 1.3, -2.6, 2.6],
+                [-1.3, 1.3, 2.42, 2.6],
+            ]) {
+                decals.addQuad([corner(u0, v0), corner(u1, v0), corner(u1, v1), corner(u0, v1)], RACE_EDGE);
+            }
+        }
+        for (const seal of route.seals) {
+            const fx = Math.sin(seal.heading);
+            const fz = Math.cos(seal.heading);
+            const ax = Math.cos(seal.heading);
+            const az = -Math.sin(seal.heading);
+            const span = seal.width + 3;
+            const blocks = Math.max(3, Math.round(span / 1.4));
+            const halfRun = span / blocks / 2;
+            for (let s = 0; s < blocks; s += 1) {
+                const u = -span / 2 + ((s + 0.5) / blocks) * span;
+                const cx = seal.x + ax * u;
+                const cz = seal.z + az * u;
+                barriers.addSealBlock(cx, cz, sample(cx, cz), 1.05, halfRun, 0.28, [ax, az], [fx, fz], s % 2 === 0 ? KERB_RED : KERB_WHITE);
+            }
+        }
+        const geometries = [];
+        const meshes = [];
+        const surface = decals.build();
+        if (surface !== null) {
+            geometries.push(surface);
+            const mesh = new THREE.Mesh(surface, new THREE.MeshBasicMaterial({
+                vertexColors: true,
+                side: THREE.DoubleSide,
+                polygonOffset: true,
+                polygonOffsetFactor: -4,
+                polygonOffsetUnits: -4,
+            }));
+            mesh.renderOrder = 4;
+            mesh.frustumCulled = false;
+            meshes.push(mesh);
+        }
+        const sealGeom = barriers.build();
+        if (sealGeom !== null) {
+            geometries.push(sealGeom);
+            const mesh = new THREE.Mesh(sealGeom, new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.72, metalness: 0.04, side: THREE.DoubleSide }));
+            mesh.castShadow = true;
+            mesh.frustumCulled = false;
+            meshes.push(mesh);
+        }
+        return { meshes, geometries, materials: meshes.map((mesh) => mesh.material) };
+    }, [resolved, sample]);
+    useEffect(() => () => {
+        if (race === null)
+            return;
+        for (const geometry of race.geometries)
+            geometry.dispose();
+        for (const material of race.materials)
+            material.dispose();
+    }, [race]);
     if (resolved === null)
         return null;
-    return (_jsxs("group", { children: [ground?.asphalt != null ? (_jsx("mesh", { geometry: ground.asphalt, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravel != null ? (_jsx("mesh", { geometry: ground.gravel, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.sidewalks != null ? (_jsx("mesh", { geometry: ground.sidewalks, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: SIDEWALK_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.patches != null ? (_jsx("mesh", { geometry: ground.patches, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.curbs != null ? (_jsx("mesh", { geometry: ground.curbs, receiveShadow: true, castShadow: true, children: _jsx("meshStandardMaterial", { color: CURB_COLOR, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.markings != null ? (_jsx("mesh", { geometry: ground.markings, renderOrder: 1, children: _jsx("meshStandardMaterial", { color: MARKING_COLOR, roughness: 0.8, metalness: 0, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1 }) })) : null, ground?.medians != null ? (_jsx("mesh", { geometry: ground.medians, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: MEDIAN_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.pavementDrives != null ? (_jsx("mesh", { geometry: ground.pavementDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: PAVEMENT_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravelDrives != null ? (_jsx("mesh", { geometry: ground.gravelDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.parks != null ? (_jsx("mesh", { geometry: ground.parks, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.crops != null ? (_jsx("mesh", { geometry: ground.crops, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, bridges?.deck != null ? (_jsx("mesh", { geometry: bridges.deck, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: CONCRETE_COLOR, roughness: 0.85, metalness: 0.05, side: THREE.DoubleSide }) })) : null, bridges !== null && bridges.concrete.length > 0 ? (_jsx(InstancedBoxes, { matrices: bridges.concrete, color: CONCRETE_COLOR })) : null, bridges !== null && bridges.steel.length > 0 ? _jsx(InstancedBoxes, { matrices: bridges.steel, color: STEEL_COLOR }) : null, tunnels?.roof != null ? (_jsx("mesh", { geometry: tunnels.roof, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: TUNNEL_COLOR, roughness: 0.95, metalness: 0, side: THREE.DoubleSide }) })) : null, tunnels !== null && tunnels.stone.length > 0 ? _jsx(InstancedBoxes, { matrices: tunnels.stone, color: TUNNEL_COLOR }) : null, massing !== null ? massing.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `massing:${i}`)) : null, furniture !== null ? furniture.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `furniture:${i}`)) : null, _jsx(DetailBuildings, { buildings: detail.buildings, palette: palette, kitName: resolved?.rules.buildingKit ?? "" })] }));
+    return (_jsxs("group", { children: [ground?.urban != null ? (_jsx("mesh", { geometry: ground.urban, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.land != null ? (_jsx("mesh", { geometry: ground.land, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.asphalt != null ? (_jsx("mesh", { geometry: ground.asphalt, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, vertexColors: true, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravel != null ? (_jsx("mesh", { geometry: ground.gravel, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.sidewalks != null ? (_jsx("mesh", { geometry: ground.sidewalks, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: SIDEWALK_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.patches != null ? (_jsx("mesh", { geometry: ground.patches, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: ASPHALT_COLOR, vertexColors: true, roughness: 0.96, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.curbs != null ? (_jsx("mesh", { geometry: ground.curbs, receiveShadow: true, castShadow: true, children: _jsx("meshStandardMaterial", { color: CURB_COLOR, roughness: 0.9, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.markings != null ? (_jsx("mesh", { geometry: ground.markings, renderOrder: 1, children: _jsx("meshStandardMaterial", { color: MARKING_COLOR, vertexColors: true, roughness: 0.8, metalness: 0, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -1, polygonOffsetUnits: -1 }) })) : null, ground?.medians != null ? (_jsx("mesh", { geometry: ground.medians, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: MEDIAN_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.pavementDrives != null ? (_jsx("mesh", { geometry: ground.pavementDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: PAVEMENT_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.gravelDrives != null ? (_jsx("mesh", { geometry: ground.gravelDrives, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: GRAVEL_COLOR, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.parks != null ? (_jsx("mesh", { geometry: ground.parks, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, ground?.crops != null ? (_jsx("mesh", { geometry: ground.crops, receiveShadow: true, children: _jsx("meshStandardMaterial", { vertexColors: true, roughness: 1, metalness: 0, side: THREE.DoubleSide }) })) : null, bridges?.deck != null ? (_jsx("mesh", { geometry: bridges.deck, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: CONCRETE_COLOR, roughness: 0.85, metalness: 0.05, side: THREE.DoubleSide }) })) : null, bridges !== null && bridges.concrete.length > 0 ? (_jsx(InstancedBoxes, { matrices: bridges.concrete, color: CONCRETE_COLOR })) : null, bridges !== null && bridges.steel.length > 0 ? _jsx(InstancedBoxes, { matrices: bridges.steel, color: STEEL_COLOR }) : null, tunnels?.roof != null ? (_jsx("mesh", { geometry: tunnels.roof, castShadow: true, receiveShadow: true, children: _jsx("meshStandardMaterial", { color: TUNNEL_COLOR, roughness: 0.95, metalness: 0, side: THREE.DoubleSide }) })) : null, tunnels !== null && tunnels.stone.length > 0 ? _jsx(InstancedBoxes, { matrices: tunnels.stone, color: TUNNEL_COLOR }) : null, massing !== null ? massing.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `massing:${i}`)) : null, furniture !== null ? furniture.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `furniture:${i}`)) : null, race !== null ? race.meshes.map((mesh, i) => _jsx("primitive", { object: mesh }, `race:${i}`)) : null, _jsx(DetailBuildings, { buildings: detail.buildings, palette: palette, kitName: resolved?.rules.buildingKit ?? "" })] }));
 }
 /** One instanced unit-box mesh from precomposed matrices (bridge parts). */
 function InstancedBoxes({ matrices, color }) {