feat: add character studio and aircraft foundation

index.html

@@ -446,6 +446,30 @@
       }
       .tier.god .who { color: var(--amber-ink); }
       .tier a { color: var(--amber-ink); text-transform: none; letter-spacing: 0.04em; }
+      .profile-trigger {
+        min-height: 28px;
+        padding: 4px 8px;
+        color: var(--amber-ink);
+        background: rgba(242, 177, 52, 0.1);
+        border: 1px solid rgba(242, 177, 52, 0.3);
+        border-radius: var(--r-sm);
+        font: inherit;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        cursor: pointer;
+      }
+      .profile-trigger:hover { background: rgba(242, 177, 52, 0.2); }
+      .profile-overlay {
+        position: fixed;
+        inset: 0;
+        z-index: 20;
+        display: grid;
+        place-items: center;
+        padding: var(--s4);
+        background: rgba(5, 8, 11, 0.68);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+      }
 
       /* ---- Bottom right: what you picked, and how to drive ------------------ */
       .rail {
@@ -978,6 +1002,8 @@
 
     <p id="source" class="source"></p>
 
+    <div id="profile-overlay" class="profile-overlay" hidden></div>
+
     <!-- Behind the panel sheet on a phone, and nowhere else. A sheet with no
          scrim leaves no way to dismiss it but the same button that opened it,
          which is the wrong half of the screen for a thumb. -->

src/aircraft/asset.ts

@@ -0,0 +1,214 @@
+/** Original procedural electric V-tail aircraft, authored in metres and facing -Z. */
+
+import * as THREE from "three";
+
+export const ELECTRIC_AIRCRAFT_METRICS = Object.freeze({
+  length: 8.4,
+  wingspan: 11.8,
+  height: 2.45,
+});
+
+export interface ElectricAircraftMaterials {
+  body: THREE.Material;
+  accent: THREE.Material;
+  glass: THREE.Material;
+  dark: THREE.Material;
+}
+
+export interface ElectricAircraftBuildOptions {
+  materials?: ElectricAircraftMaterials;
+  bodyColor?: THREE.ColorRepresentation;
+}
+
+export interface ElectricAircraftRig {
+  root: THREE.Group;
+  leftAileron: THREE.Group;
+  rightAileron: THREE.Group;
+  leftVTail: THREE.Group;
+  rightVTail: THREE.Group;
+  fans: readonly THREE.Group[];
+  ownsMaterials: boolean;
+}
+
+export interface AircraftSurfacePose {
+  roll: number;
+  pitch: number;
+  yaw: number;
+}
+
+export function createElectricAircraftMaterials(
+  bodyColor: THREE.ColorRepresentation = 0xe9edf0,
+): ElectricAircraftMaterials {
+  return {
+    body: new THREE.MeshPhysicalMaterial({
+      name: "electric-aircraft.body",
+      color: bodyColor,
+      metalness: 0.35,
+      roughness: 0.3,
+      clearcoat: 0.8,
+    }),
+    accent: new THREE.MeshStandardMaterial({
+      name: "electric-aircraft.accent",
+      color: 0x178f83,
+      metalness: 0.45,
+      roughness: 0.32,
+    }),
+    glass: new THREE.MeshPhysicalMaterial({
+      name: "electric-aircraft.glass",
+      color: 0x19323c,
+      roughness: 0.12,
+      transparent: true,
+      opacity: 0.82,
+    }),
+    dark: new THREE.MeshStandardMaterial({
+      name: "electric-aircraft.dark",
+      color: 0x1a2022,
+      metalness: 0.7,
+      roughness: 0.34,
+    }),
+  };
+}
+
+function mesh(
+  geometry: THREE.BufferGeometry,
+  material: THREE.Material,
+  name: string,
+): THREE.Mesh {
+  const value = new THREE.Mesh(geometry, material);
+  value.name = name;
+  value.castShadow = true;
+  value.receiveShadow = true;
+  return value;
+}
+
+function wingGeometry(span: number, rootChord: number, tipChord: number): THREE.BufferGeometry {
+  const half = span / 2;
+  const vertices = new Float32Array([
+    0, 0, -rootChord / 2, half, 0, -tipChord / 2, half, 0, tipChord / 2,
+    0, 0, rootChord / 2, -half, 0, tipChord / 2, -half, 0, -tipChord / 2,
+  ]);
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+  geometry.setIndex([0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 5]);
+  geometry.computeVertexNormals();
+  return geometry;
+}
+
+function addFan(root: THREE.Group, x: number, materials: ElectricAircraftMaterials): THREE.Group {
+  const fan = new THREE.Group();
+  fan.name = x < 0 ? "electric-aircraft.fan-left" : "electric-aircraft.fan-right";
+  fan.position.set(x, 0.02, -0.48);
+  const nacelle = mesh(new THREE.CapsuleGeometry(0.25, 0.72, 5, 10), materials.accent, `${fan.name}:nacelle`);
+  nacelle.rotation.x = Math.PI / 2;
+  nacelle.position.set(x, 0.02, -0.12);
+  root.add(nacelle);
+  const hub = mesh(new THREE.CylinderGeometry(0.11, 0.11, 0.14, 12), materials.dark, `${fan.name}:hub`);
+  hub.rotation.x = Math.PI / 2;
+  fan.add(hub);
+  for (let index = 0; index < 5; index += 1) {
+    const blade = mesh(new THREE.BoxGeometry(0.07, 0.68, 0.025), materials.dark, `${fan.name}:blade-${index}`);
+    blade.position.y = 0.3;
+    blade.rotation.z = index * TWO_PI / 5;
+    fan.add(blade);
+  }
+  root.add(fan);
+  return fan;
+}
+
+const TWO_PI = Math.PI * 2;
+
+export function buildElectricAircraft(options: ElectricAircraftBuildOptions = {}): ElectricAircraftRig {
+  const ownsMaterials = options.materials === undefined;
+  const materials = options.materials ?? createElectricAircraftMaterials(options.bodyColor);
+  const root = new THREE.Group();
+  root.name = "electric-aircraft";
+
+  const fuselage = mesh(new THREE.CapsuleGeometry(0.66, 5.9, 8, 16), materials.body, "electric-aircraft:fuselage");
+  fuselage.rotation.x = Math.PI / 2;
+  fuselage.position.y = 0.42;
+  root.add(fuselage);
+  const nose = mesh(new THREE.ConeGeometry(0.64, 1.7, 18), materials.accent, "electric-aircraft:nose");
+  nose.rotation.x = -Math.PI / 2;
+  nose.position.set(0, 0.42, -3.8);
+  root.add(nose);
+  const canopy = mesh(new THREE.SphereGeometry(0.68, 16, 8), materials.glass, "electric-aircraft:canopy");
+  canopy.scale.set(0.8, 0.52, 1.55);
+  canopy.position.set(0, 1.02, -0.9);
+  root.add(canopy);
+  const wing = mesh(wingGeometry(11.8, 2.25, 0.72), materials.body, "electric-aircraft:wing");
+  wing.position.set(0, 0.46, 0.05);
+  root.add(wing);
+
+  const leftAileron = new THREE.Group();
+  const rightAileron = new THREE.Group();
+  leftAileron.name = "electric-aircraft.aileron-left";
+  rightAileron.name = "electric-aircraft.aileron-right";
+  for (const [joint, x] of [[leftAileron, -4.2], [rightAileron, 4.2]] as const) {
+    joint.position.set(x, 0.48, 0.72);
+    joint.add(mesh(new THREE.BoxGeometry(2.15, 0.08, 0.45), materials.accent, `${joint.name}:surface`));
+    root.add(joint);
+  }
+
+  const leftVTail = new THREE.Group();
+  const rightVTail = new THREE.Group();
+  leftVTail.name = "electric-aircraft.v-tail-left";
+  rightVTail.name = "electric-aircraft.v-tail-right";
+  for (const [joint, x, tilt] of [
+    [leftVTail, -0.32, -0.72],
+    [rightVTail, 0.32, 0.72],
+  ] as const) {
+    joint.position.set(x, 0.63, 3.2);
+    joint.rotation.z = tilt;
+    const surface = mesh(new THREE.BoxGeometry(0.1, 1.85, 1.15), materials.body, `${joint.name}:surface`);
+    surface.position.y = 0.72;
+    joint.add(surface);
+    root.add(joint);
+  }
+
+  const fans = [addFan(root, -2.1, materials), addFan(root, 2.1, materials)];
+  root.traverse((item) => {
+    if (item instanceof THREE.Mesh) {
+      item.geometry.computeBoundingBox();
+      item.geometry.computeBoundingSphere();
+    }
+  });
+  return { root, leftAileron, rightAileron, leftVTail, rightVTail, fans, ownsMaterials };
+}
+
+export function setAircraftControlSurfaces(
+  rig: ElectricAircraftRig,
+  pose: Partial<AircraftSurfacePose>,
+): void {
+  const roll = THREE.MathUtils.clamp(Number.isFinite(pose.roll) ? pose.roll ?? 0 : 0, -1, 1);
+  const pitch = THREE.MathUtils.clamp(Number.isFinite(pose.pitch) ? pose.pitch ?? 0 : 0, -1, 1);
+  const yaw = THREE.MathUtils.clamp(Number.isFinite(pose.yaw) ? pose.yaw ?? 0 : 0, -1, 1);
+  rig.leftAileron.rotation.x = roll * 0.45;
+  rig.rightAileron.rotation.x = -roll * 0.45;
+  rig.leftVTail.rotation.x = pitch * 0.34 + yaw * 0.22;
+  rig.rightVTail.rotation.x = pitch * 0.34 - yaw * 0.22;
+}
+
+export function setAircraftFanRotation(rig: ElectricAircraftRig, radians: number): void {
+  const safe = Number.isFinite(radians) ? radians : 0;
+  for (const fan of rig.fans) fan.rotation.z = safe;
+}
+
+export function advanceAircraftFans(rig: ElectricAircraftRig, radians: number): void {
+  const delta = Number.isFinite(radians) ? radians : 0;
+  for (const fan of rig.fans) fan.rotation.z = (fan.rotation.z + delta) % TWO_PI;
+}
+
+export function disposeElectricAircraft(rig: ElectricAircraftRig): void {
+  const geometries = new Set<THREE.BufferGeometry>();
+  const materials = new Set<THREE.Material>();
+  rig.root.traverse((item) => {
+    if (!(item instanceof THREE.Mesh)) return;
+    geometries.add(item.geometry);
+    const values = Array.isArray(item.material) ? item.material : [item.material];
+    for (const material of values) materials.add(material);
+  });
+  for (const geometry of geometries) geometry.dispose();
+  if (rig.ownsMaterials) for (const material of materials) material.dispose();
+  rig.root.removeFromParent();
+  rig.root.clear();
+}

src/aircraft/controller.ts

@@ -0,0 +1,433 @@
+/** Deterministic, renderer-independent fixed-wing flight over California. */
+
+const EARTH_RADIUS_M = 6_371_000;
+const TWO_PI = Math.PI * 2;
+
+export type AircraftControlMode = "assisted" | "manual";
+export type AircraftModeRequest = "none" | AircraftControlMode;
+
+export interface AircraftGeographicPoint {
+  lat: number;
+  lng: number;
+}
+
+export interface AircraftWaypoint extends AircraftGeographicPoint {
+  id: string;
+  altitudeM: number;
+}
+
+export interface AircraftActionSnapshot {
+  throttle: number;
+  yaw: number;
+  pitch: number;
+  roll: number;
+  modeRequest: AircraftModeRequest;
+  reset: boolean;
+}
+
+export const NEUTRAL_AIRCRAFT_ACTIONS: Readonly<AircraftActionSnapshot> = Object.freeze({
+  throttle: 0,
+  yaw: 0,
+  pitch: 0,
+  roll: 0,
+  modeRequest: "none",
+  reset: false,
+});
+
+export interface CaliforniaFlightEnvelope {
+  minLat: number;
+  maxLat: number;
+  minLng: number;
+  maxLng: number;
+  minAltitudeM: number;
+  maxAltitudeM: number;
+}
+
+export const DEFAULT_CALIFORNIA_FLIGHT_ENVELOPE: Readonly<CaliforniaFlightEnvelope> =
+  Object.freeze({
+    minLat: 32.4,
+    maxLat: 42.1,
+    minLng: -124.6,
+    maxLng: -114.0,
+    minAltitudeM: 75,
+    maxAltitudeM: 6_000,
+  });
+
+export interface AircraftControllerOptions {
+  initialPosition?: Partial<AircraftGeographicPoint>;
+  initialAltitudeM?: number;
+  initialHeadingDeg?: number;
+  initialSpeedMps?: number;
+  mode?: AircraftControlMode;
+  route?: readonly AircraftWaypoint[];
+  envelope?: CaliforniaFlightEnvelope;
+  minimumSpeedMps?: number;
+  maximumSpeedMps?: number;
+  assistedCruiseMps?: number;
+  assistedAltitudeM?: number;
+  fixedStepSeconds?: number;
+  maxFrameDeltaSeconds?: number;
+}
+
+export interface AircraftControllerState extends AircraftGeographicPoint {
+  altitudeM: number;
+  headingDeg: number;
+  pitchDeg: number;
+  rollDeg: number;
+  speedMps: number;
+  verticalSpeedMps: number;
+  mode: AircraftControlMode;
+  routeWaypointIndex: number;
+  routeWaypointId: string | null;
+  throttle: number;
+  yawInput: number;
+  pitchInput: number;
+  rollInput: number;
+  fanRadians: number;
+  envelopeContact: boolean;
+  elapsedSteps: number;
+}
+
+export interface AircraftControllerSnapshot extends AircraftControllerState {}
+
+export interface TimedAircraftInputFrame {
+  steps: number;
+  actions?: Partial<AircraftActionSnapshot>;
+}
+
+export interface AircraftReplayResult {
+  trajectory: readonly AircraftControllerSnapshot[];
+  final: AircraftControllerSnapshot;
+}
+
+export interface AircraftCameraPose {
+  position: AircraftGeographicPoint & { altitudeM: number };
+  target: AircraftGeographicPoint & { altitudeM: number };
+  rollDeg: number;
+}
+
+interface ResolvedOptions {
+  initialPosition: AircraftGeographicPoint;
+  initialAltitudeM: number;
+  initialHeadingDeg: number;
+  initialSpeedMps: number;
+  mode: AircraftControlMode;
+  route: readonly AircraftWaypoint[];
+  envelope: CaliforniaFlightEnvelope;
+  minimumSpeedMps: number;
+  maximumSpeedMps: number;
+  assistedCruiseMps: number;
+  assistedAltitudeM: number;
+  fixedStepSeconds: number;
+  maxFrameDeltaSeconds: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function finiteOr(value: number | undefined, fallback: number): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function moveToward(value: number, target: number, maximumDelta: number): number {
+  if (value < target) return Math.min(value + maximumDelta, target);
+  if (value > target) return Math.max(value - maximumDelta, target);
+  return value;
+}
+
+function wrapDegrees(value: number): number {
+  return ((value % 360) + 360) % 360;
+}
+
+function signedAngleDegrees(from: number, to: number): number {
+  return ((to - from + 540) % 360) - 180;
+}
+
+function distanceM(a: AircraftGeographicPoint, b: AircraftGeographicPoint): number {
+  const mean = ((a.lat + b.lat) / 2) * Math.PI / 180;
+  const north = (b.lat - a.lat) * Math.PI / 180 * EARTH_RADIUS_M;
+  const east = (b.lng - a.lng) * Math.PI / 180 * Math.cos(mean) * EARTH_RADIUS_M;
+  return Math.hypot(north, east);
+}
+
+function bearingDeg(a: AircraftGeographicPoint, b: AircraftGeographicPoint): number {
+  const mean = ((a.lat + b.lat) / 2) * Math.PI / 180;
+  return wrapDegrees(Math.atan2((b.lng - a.lng) * Math.cos(mean), b.lat - a.lat) * 180 / Math.PI);
+}
+
+function checkedEnvelope(value: CaliforniaFlightEnvelope | undefined): CaliforniaFlightEnvelope {
+  const envelope = { ...(value ?? DEFAULT_CALIFORNIA_FLIGHT_ENVELOPE) };
+  if (
+    !Number.isFinite(envelope.minLat) || !Number.isFinite(envelope.maxLat) ||
+    !Number.isFinite(envelope.minLng) || !Number.isFinite(envelope.maxLng) ||
+    !Number.isFinite(envelope.minAltitudeM) || !Number.isFinite(envelope.maxAltitudeM) ||
+    envelope.minLat >= envelope.maxLat || envelope.minLng >= envelope.maxLng ||
+    envelope.minAltitudeM >= envelope.maxAltitudeM
+  ) throw new RangeError("aircraft flight envelope must be finite and ordered");
+  return envelope;
+}
+
+function checkedRoute(route: readonly AircraftWaypoint[] | undefined): readonly AircraftWaypoint[] {
+  if (!route) return [];
+  const ids = new Set<string>();
+  return route.map((point) => {
+    if (
+      typeof point.id !== "string" || point.id.length === 0 || ids.has(point.id) ||
+      !Number.isFinite(point.lat) || !Number.isFinite(point.lng) ||
+      !Number.isFinite(point.altitudeM)
+    ) throw new RangeError("aircraft route waypoints must be finite with unique ids");
+    ids.add(point.id);
+    return { ...point };
+  });
+}
+
+function resolveOptions(value: AircraftControllerOptions): ResolvedOptions {
+  const envelope = checkedEnvelope(value.envelope);
+  const minimumSpeedMps = clamp(finiteOr(value.minimumSpeedMps, 20), 5, 100);
+  const maximumSpeedMps = clamp(finiteOr(value.maximumSpeedMps, 95), minimumSpeedMps, 250);
+  const assistedAltitudeM = clamp(
+    finiteOr(value.assistedAltitudeM, 1_500),
+    envelope.minAltitudeM,
+    envelope.maxAltitudeM,
+  );
+  return {
+    initialPosition: {
+      lat: clamp(finiteOr(value.initialPosition?.lat, 34.0522), envelope.minLat, envelope.maxLat),
+      lng: clamp(finiteOr(value.initialPosition?.lng, -118.2437), envelope.minLng, envelope.maxLng),
+    },
+    initialAltitudeM: clamp(finiteOr(value.initialAltitudeM, assistedAltitudeM), envelope.minAltitudeM, envelope.maxAltitudeM),
+    initialHeadingDeg: wrapDegrees(finiteOr(value.initialHeadingDeg, 320)),
+    initialSpeedMps: clamp(finiteOr(value.initialSpeedMps, 55), minimumSpeedMps, maximumSpeedMps),
+    mode: value.mode === "manual" ? "manual" : "assisted",
+    route: checkedRoute(value.route),
+    envelope,
+    minimumSpeedMps,
+    maximumSpeedMps,
+    assistedCruiseMps: clamp(finiteOr(value.assistedCruiseMps, 62), minimumSpeedMps, maximumSpeedMps),
+    assistedAltitudeM,
+    fixedStepSeconds: clamp(finiteOr(value.fixedStepSeconds, 1 / 60), 1 / 240, 0.1),
+    maxFrameDeltaSeconds: clamp(finiteOr(value.maxFrameDeltaSeconds, 0.25), 0.05, 1),
+  };
+}
+
+export function normalizeAircraftActions(
+  value: Partial<AircraftActionSnapshot> | undefined,
+): AircraftActionSnapshot {
+  return {
+    throttle: clamp(finiteOr(value?.throttle, 0), 0, 1),
+    yaw: clamp(finiteOr(value?.yaw, 0), -1, 1),
+    pitch: clamp(finiteOr(value?.pitch, 0), -1, 1),
+    roll: clamp(finiteOr(value?.roll, 0), -1, 1),
+    modeRequest: value?.modeRequest === "manual" || value?.modeRequest === "assisted"
+      ? value.modeRequest
+      : "none",
+    reset: value?.reset === true,
+  };
+}
+
+function hasManualIntent(actions: AircraftActionSnapshot): boolean {
+  return (
+    actions.modeRequest === "manual" || actions.throttle > 0.02 ||
+    Math.abs(actions.yaw) > 0.06 || Math.abs(actions.pitch) > 0.06 || Math.abs(actions.roll) > 0.06
+  );
+}
+
+export class AircraftController {
+  private readonly options: ResolvedOptions;
+  private accumulator = 0;
+  private readonly current: AircraftControllerState;
+
+  constructor(options: AircraftControllerOptions = {}) {
+    this.options = resolveOptions(options);
+    this.current = {
+      ...this.options.initialPosition,
+      altitudeM: this.options.initialAltitudeM,
+      headingDeg: this.options.initialHeadingDeg,
+      pitchDeg: 0,
+      rollDeg: 0,
+      speedMps: this.options.initialSpeedMps,
+      verticalSpeedMps: 0,
+      mode: this.options.mode,
+      routeWaypointIndex: 0,
+      routeWaypointId: null,
+      throttle: 0,
+      yawInput: 0,
+      pitchInput: 0,
+      rollInput: 0,
+      fanRadians: 0,
+      envelopeContact: false,
+      elapsedSteps: 0,
+    };
+    this.reset();
+  }
+
+  fixedStepSeconds(): number {
+    return this.options.fixedStepSeconds;
+  }
+
+  state(): Readonly<AircraftControllerState> {
+    return this.current;
+  }
+
+  snapshot(): AircraftControllerSnapshot {
+    return { ...this.current };
+  }
+
+  reset(): void {
+    this.accumulator = 0;
+    Object.assign(this.current, this.options.initialPosition, {
+      altitudeM: this.options.initialAltitudeM,
+      headingDeg: this.options.initialHeadingDeg,
+      pitchDeg: 0,
+      rollDeg: 0,
+      speedMps: this.options.initialSpeedMps,
+      verticalSpeedMps: 0,
+      mode: this.options.mode,
+      routeWaypointIndex: 0,
+      routeWaypointId: this.options.route[0]?.id ?? null,
+      throttle: 0,
+      yawInput: 0,
+      pitchInput: 0,
+      rollInput: 0,
+      fanRadians: 0,
+      envelopeContact: false,
+      elapsedSteps: 0,
+    });
+  }
+
+  tick(deltaSeconds: number, actions: Partial<AircraftActionSnapshot> = NEUTRAL_AIRCRAFT_ACTIONS): number {
+    if (!Number.isFinite(deltaSeconds) || deltaSeconds <= 0) return 0;
+    const normalized = normalizeAircraftActions(actions);
+    if (normalized.reset) {
+      this.reset();
+      return 0;
+    }
+    this.accumulator += Math.min(deltaSeconds, this.options.maxFrameDeltaSeconds);
+    let steps = 0;
+    while (this.accumulator + Number.EPSILON >= this.options.fixedStepSeconds) {
+      this.stepNormalized(normalized);
+      this.accumulator -= this.options.fixedStepSeconds;
+      steps += 1;
+    }
+    return steps;
+  }
+
+  stepFixed(actions: Partial<AircraftActionSnapshot> = NEUTRAL_AIRCRAFT_ACTIONS): void {
+    const normalized = normalizeAircraftActions(actions);
+    if (normalized.reset) this.reset();
+    else this.stepNormalized(normalized);
+  }
+
+  private stepNormalized(actions: AircraftActionSnapshot): void {
+    const dt = this.options.fixedStepSeconds;
+    const manual = hasManualIntent(actions);
+    if (manual) this.current.mode = "manual";
+    else if (actions.modeRequest === "assisted") this.current.mode = "assisted";
+
+    let throttle = actions.throttle;
+    let yaw = actions.yaw;
+    let pitch = actions.pitch;
+    let roll = actions.roll;
+    if (this.current.mode === "assisted") {
+      throttle = clamp(0.5 + (this.options.assistedCruiseMps - this.current.speedMps) / 18, 0, 1);
+      const target = this.options.route[this.current.routeWaypointIndex];
+      if (target && distanceM(this.current, target) < 3_000 && this.options.route.length > 1) {
+        this.current.routeWaypointIndex = (this.current.routeWaypointIndex + 1) % this.options.route.length;
+      }
+      const waypoint = this.options.route[this.current.routeWaypointIndex];
+      this.current.routeWaypointId = waypoint?.id ?? null;
+      const desiredHeading = waypoint ? bearingDeg(this.current, waypoint) : this.options.initialHeadingDeg;
+      const headingError = signedAngleDegrees(this.current.headingDeg, desiredHeading);
+      roll = clamp(headingError / 38, -1, 1);
+      yaw = clamp(headingError / 90, -0.45, 0.45);
+      const altitudeTarget = waypoint?.altitudeM ?? this.options.assistedAltitudeM;
+      pitch = clamp((altitudeTarget - this.current.altitudeM) / 350, -0.65, 0.65);
+    }
+
+    this.current.throttle = moveToward(this.current.throttle, throttle, 0.8 * dt);
+    this.current.yawInput = moveToward(this.current.yawInput, yaw, 2.5 * dt);
+    this.current.pitchInput = moveToward(this.current.pitchInput, pitch, 2.2 * dt);
+    this.current.rollInput = moveToward(this.current.rollInput, roll, 2.8 * dt);
+
+    const targetRoll = this.current.rollInput * 58;
+    const targetPitch = this.current.pitchInput * 22;
+    this.current.rollDeg = moveToward(this.current.rollDeg, targetRoll, 55 * dt);
+    this.current.pitchDeg = moveToward(this.current.pitchDeg, targetPitch, 28 * dt);
+    const thrust = this.current.throttle * 8.5;
+    const drag = 1.2 + this.current.speedMps * this.current.speedMps * 0.00075;
+    this.current.speedMps = clamp(
+      this.current.speedMps + (thrust - drag) * dt,
+      this.options.minimumSpeedMps,
+      this.options.maximumSpeedMps,
+    );
+    const bankTurn = Math.sin(this.current.rollDeg * Math.PI / 180) * 24;
+    this.current.headingDeg = wrapDegrees(
+      this.current.headingDeg + (bankTurn + this.current.yawInput * 20) * dt,
+    );
+    this.current.verticalSpeedMps = Math.sin(this.current.pitchDeg * Math.PI / 180) * this.current.speedMps;
+
+    const heading = this.current.headingDeg * Math.PI / 180;
+    const horizontalSpeed = Math.cos(this.current.pitchDeg * Math.PI / 180) * this.current.speedMps;
+    const northM = Math.cos(heading) * horizontalSpeed * dt;
+    const eastM = Math.sin(heading) * horizontalSpeed * dt;
+    const nextLat = this.current.lat + northM / EARTH_RADIUS_M * 180 / Math.PI;
+    const nextLng = this.current.lng + eastM /
+      (EARTH_RADIUS_M * Math.max(0.01, Math.cos(this.current.lat * Math.PI / 180))) * 180 / Math.PI;
+    const nextAltitude = this.current.altitudeM + this.current.verticalSpeedMps * dt;
+    const envelope = this.options.envelope;
+    this.current.envelopeContact =
+      nextLat < envelope.minLat || nextLat > envelope.maxLat ||
+      nextLng < envelope.minLng || nextLng > envelope.maxLng ||
+      nextAltitude < envelope.minAltitudeM || nextAltitude > envelope.maxAltitudeM;
+    this.current.lat = clamp(nextLat, envelope.minLat, envelope.maxLat);
+    this.current.lng = clamp(nextLng, envelope.minLng, envelope.maxLng);
+    this.current.altitudeM = clamp(nextAltitude, envelope.minAltitudeM, envelope.maxAltitudeM);
+    if (this.current.envelopeContact) {
+      this.current.speedMps = Math.max(this.options.minimumSpeedMps, this.current.speedMps * 0.92);
+      this.current.pitchDeg = moveToward(this.current.pitchDeg, 0, 90 * dt);
+      this.current.rollDeg = moveToward(this.current.rollDeg, 0, 90 * dt);
+    }
+    this.current.fanRadians = (this.current.fanRadians + (30 + this.current.throttle * 180) * dt) % TWO_PI;
+    this.current.elapsedSteps += 1;
+  }
+}
+
+export function replayAircraftInputs(
+  options: AircraftControllerOptions,
+  frames: readonly TimedAircraftInputFrame[],
+): AircraftReplayResult {
+  const controller = new AircraftController(options);
+  const trajectory: AircraftControllerSnapshot[] = [controller.snapshot()];
+  for (const frame of frames) {
+    const steps = Number.isFinite(frame.steps) ? Math.max(0, Math.floor(frame.steps)) : 0;
+    const held = normalizeAircraftActions(frame.actions);
+    for (let index = 0; index < steps; index += 1) {
+      controller.stepFixed(index === 0 ? held : { ...held, modeRequest: "none", reset: false });
+      trajectory.push(controller.snapshot());
+    }
+  }
+  return { trajectory, final: trajectory.at(-1) ?? controller.snapshot() };
+}
+
+/** Renderer-neutral geographic chase camera derived from an authoritative pose. */
+export function aircraftChaseCameraPose(
+  state: Readonly<AircraftControllerState>,
+  distanceBehindM = 24,
+  heightAboveM = 8,
+  lookAheadM = 35,
+): AircraftCameraPose {
+  const heading = state.headingDeg * Math.PI / 180;
+  const geographicOffset = (northM: number, eastM: number): AircraftGeographicPoint => ({
+    lat: state.lat + northM / EARTH_RADIUS_M * 180 / Math.PI,
+    lng: state.lng + eastM /
+      (EARTH_RADIUS_M * Math.max(0.01, Math.cos(state.lat * Math.PI / 180))) * 180 / Math.PI,
+  });
+  const behind = geographicOffset(-Math.cos(heading) * distanceBehindM, -Math.sin(heading) * distanceBehindM);
+  const ahead = geographicOffset(Math.cos(heading) * lookAheadM, Math.sin(heading) * lookAheadM);
+  return {
+    position: { ...behind, altitudeM: state.altitudeM + heightAboveM },
+    target: { ...ahead, altitudeM: state.altitudeM + state.verticalSpeedMps * 0.4 },
+    rollDeg: state.rollDeg * 0.2,
+  };
+}

src/aircraft/index.ts

@@ -0,0 +1,33 @@
+export {
+  AircraftController,
+  DEFAULT_CALIFORNIA_FLIGHT_ENVELOPE,
+  NEUTRAL_AIRCRAFT_ACTIONS,
+  aircraftChaseCameraPose,
+  normalizeAircraftActions,
+  replayAircraftInputs,
+  type AircraftActionSnapshot,
+  type AircraftCameraPose,
+  type AircraftControlMode,
+  type AircraftControllerOptions,
+  type AircraftControllerSnapshot,
+  type AircraftControllerState,
+  type AircraftGeographicPoint,
+  type AircraftModeRequest,
+  type AircraftReplayResult,
+  type AircraftWaypoint,
+  type CaliforniaFlightEnvelope,
+  type TimedAircraftInputFrame,
+} from "./controller.ts";
+export {
+  ELECTRIC_AIRCRAFT_METRICS,
+  advanceAircraftFans,
+  buildElectricAircraft,
+  createElectricAircraftMaterials,
+  disposeElectricAircraft,
+  setAircraftControlSurfaces,
+  setAircraftFanRotation,
+  type AircraftSurfacePose,
+  type ElectricAircraftBuildOptions,
+  type ElectricAircraftMaterials,
+  type ElectricAircraftRig,
+} from "./asset.ts";

src/engine/scene.ts

@@ -65,7 +65,11 @@ import type {
 } from "./types.ts";
 import { World, type FieldProgress } from "./world.ts";
 import { createSceneActor, type SceneActorOptions } from "../actors/sceneActor.ts";
-import type { ActorActionSnapshot, ActorControllerSnapshot } from "../actors/controller.ts";
+import type {
+  ActorActionSnapshot,
+  ActorControllerSnapshot,
+  ActorIdentity,
+} from "../actors/controller.ts";
 
 export interface SceneOptions {
   city: City;
@@ -183,6 +187,8 @@ export interface SceneHandle {
   vehicleCamera(): VehicleCameraMode | null;
   setActorActions(actions: Partial<ActorActionSnapshot>): void;
   actorState(): Readonly<ActorControllerSnapshot> | null;
+  /** Replace the visible local actor profile without disturbing its position or controls. */
+  setActorIdentity(identity: ActorIdentity): void;
   setActorActive(active: boolean): void;
   actorActive(): boolean;
   setMarkers(markers: Marker[]): void;
@@ -580,6 +586,7 @@ export async function createScene(
     vehicleCamera: () => roadTraffic?.cameraMode() ?? null,
     setActorActions: (actions) => { sceneActor?.setActions(actions); },
     actorState: () => sceneActor?.state() ?? null,
+    setActorIdentity: (identity) => { sceneActor?.setIdentity(identity); },
     setActorActive(active) {
       sceneActor?.setActive(active);
       if (active) roadTraffic?.setFollowing(false);

src/interiors/officeScene.ts

@@ -87,6 +87,12 @@ import {
   type OfficeWalker,
   type OfficeWalkerOptions,
 } from "./officeWalker.ts";
+import {
+  createOfficeMediaPresentation,
+  type MediaSurfaceDescriptor,
+  type MediaSurfaceGrant,
+  type OfficeMediaPresentation,
+} from "../media/presentation.ts";
 import {
   createRobotLayer,
   type RobotLayer,
@@ -238,6 +244,11 @@ export interface OfficeScene extends StageScene {
   depth: Depth;
   /** Local walk-mode actor, or null when this scene was built as dollhouse-only. */
   walker: OfficeWalker | null;
+  /** Authored monitor/display props; contains no source locators. */
+  listMediaSurfaces(): MediaSurfaceDescriptor[];
+  /** Bind only a caller-owned texture plus the result of server authorization and opt-in. */
+  bindMediaSurface(screenId: string, grant: MediaSurfaceGrant, texture: THREE.VideoTexture): boolean;
+  clearMediaSurface(screenId: string): boolean;
   /** The pack's viewpoints, as the thing a legend prints and `flyTo` is keyed on. */
   views: View[];
   flyTo(viewId: string): void;
@@ -474,6 +485,8 @@ export function createOfficeScene(office: Office, options: OfficeSceneOptions):
     ...(options.registry ? { registry: options.registry } : {}),
     ...(options.colorFor ? { colorFor: options.colorFor } : {}),
   });
+  const mediaSurfaces: OfficeMediaPresentation = createOfficeMediaPresentation(plan, furnishings.group);
+  scene.add(mediaSurfaces.group);
 
   /**
    * The ceiling, made switchable.
@@ -765,6 +778,9 @@ export function createOfficeScene(office: Office, options: OfficeSceneOptions):
     plan,
     depth,
     walker: officeWalker,
+    listMediaSurfaces: () => mediaSurfaces.list(),
+    bindMediaSurface: (screenId, grant, texture) => mediaSurfaces.bind(screenId, grant, texture),
+    clearMediaSurface: (screenId) => mediaSurfaces.clear(screenId),
     views,
     // A public office anchors nothing, because it has nobody to anchor. The
     // empty map is this scene's own rather than a shared module-level one: an
@@ -831,6 +847,7 @@ export function createOfficeScene(office: Office, options: OfficeSceneOptions):
       luminaires.tick(dt);
     },
     dispose() {
+      mediaSurfaces.dispose();
       officeWalker?.dispose();
       robots?.dispose();
       luminaires.dispose();

src/main.ts

@@ -71,12 +71,15 @@ import {
 } from "./journey/index.ts";
 import {
   actorKindForPresence,
+  createProfileEditor,
   createDefaultLocalProfile,
   loadLocalProfile,
   resolveHumanoidAppearance,
   saveLocalProfile,
   type LocalProfile,
+  type ProfileEditor,
 } from "./profile/index.ts";
+import type { ActorIdentity } from "./actors/controller.ts";
 /**
  * Three type-only imports and not one value among them, which is what keeps the
  * office and the instruments out of the entry chunk.
@@ -133,6 +136,26 @@ function humanoidAppearance() {
   return localProfile ? resolveHumanoidAppearance(localProfile.appearance) : null;
 }
 
+function signedInActorIdentity(profile = localProfile): ActorIdentity {
+  const appearance = profile ? resolveHumanoidAppearance(profile.appearance) : null;
+  return {
+    id: access.subject ?? "anonymous",
+    displayName: profile?.displayName ?? access.subject ?? "Guest",
+    authenticated: access.subject !== null,
+    profile: {
+      appearance: appearance
+        ? {
+            skinTone: appearance.skinTone,
+            primaryColor: appearance.outfitColor,
+            accentColor: appearance.accentColor,
+            hairColor: appearance.hairColor,
+            bodyShape: appearance.bodyShape,
+          }
+        : { primaryColor: "#151a20", accentColor: "#f2b134" },
+    },
+  };
+}
+
 function dispatchJourney(event: JourneyEvent): boolean {
   const next = journeyReducer(journey, event);
   if (next === journey) return false;
@@ -816,27 +839,14 @@ async function mountCity(id: string) {
     city: entry.city,
     actor: {
       kind: actorKindForPresence(access.subject !== null, "outdoors"),
-      identity: {
+      identity: access.subject === null
-        id: access.subject ?? "anonymous",
-        displayName: access.subject ?? "Guest",
-        authenticated: access.subject !== null,
-        profile: {
-          appearance: access.subject === null
-            ? { primaryColor: "#11151a", accentColor: "#f2b134" }
-            : (() => {
-                const appearance = humanoidAppearance();
-                return appearance
         ? {
-                      skinTone: appearance.skinTone,
+            id: "anonymous",
-                      primaryColor: appearance.outfitColor,
+            displayName: "Guest",
-                      accentColor: appearance.accentColor,
+            authenticated: false,
-                      hairColor: appearance.hairColor,
+            profile: { appearance: { primaryColor: "#11151a", accentColor: "#f2b134" } },
-                      bodyShape: appearance.bodyShape,
           }
-                  : { primaryColor: "#151a20", accentColor: "#f2b134" };
+        : signedInActorIdentity(),
-              })(),
-        },
-      },
       mode: access.subject === null ? "flight" : "ground",
       position: access.subject === null ? { y: 1_200 } : { y: 0 },
       minFlightAltitude: 20,
@@ -1483,6 +1493,8 @@ const driveHint = document.querySelector<HTMLElement>("#drive-hint");
 const walkButton = document.querySelector<HTMLButtonElement>("#walk");
 const walkControls = document.querySelector<HTMLElement>("#walk-controls");
 const walkHint = document.querySelector<HTMLElement>("#walk-hint");
+const profileOverlay = document.querySelector<HTMLElement>("#profile-overlay");
+let profileEditor: ProfileEditor | null = null;
 
 function showDetail(text: string | null) {
   const card = document.querySelector<HTMLElement>("#detail");
@@ -1777,12 +1789,20 @@ function renderCredits() {
 function renderOfficeBadge() {
   if (!officeBadge) return;
   const publicOffice = inside && office !== null && office.depth === "public";
+  const mediaSurfaces = inside && office !== null && office.depth === "full"
+    ? office.listMediaSurfaces()
+    : [];
   // The fabricated-occupancy caption used to be here too and is now on
   // `#source` — see `renderSource`. This badge keeps the message that is a call
   // to action rather than a disclosure, because that one belongs beside the
   // office controls and survives being missed; the other one does not.
-  officeBadge.hidden = !publicOffice;
+  officeBadge.hidden = !publicOffice && mediaSurfaces.length === 0;
-  if (!publicOffice) return;
+  if (!publicOffice) {
+    if (mediaSurfaces.length === 0) return;
+    const noun = mediaSurfaces.length === 1 ? "screen" : "screens";
+    officeBadge.textContent = `${mediaSurfaces.length} ${noun} ready · media stays off until you opt in.`;
+    return;
+  }
   officeBadge.replaceChildren(
     document.createTextNode("Public view — the building, not the people. "),
   );
@@ -1823,8 +1843,16 @@ function renderTierBadge() {
   if (access.subject !== null) {
     const who = document.createElement("span");
     who.className = "who";
-    who.textContent = access.subject;
+    who.textContent = localProfile?.displayName ?? access.subject;
     tierBadge.append(who);
+    if (localProfile) {
+      const customize = document.createElement("button");
+      customize.type = "button";
+      customize.className = "profile-trigger";
+      customize.textContent = "Character";
+      customize.addEventListener("click", openProfileEditor);
+      tierBadge.append(customize);
+    }
   } else if (access.signInUrl !== null) {
     const link = document.createElement("a");
     link.href = access.signInUrl;
@@ -1834,6 +1862,68 @@ function renderTierBadge() {
   tierBadge.hidden = false;
 }
 
+function applyProfilePreview(profile: LocalProfile): void {
+  if (access.subject === null || inside) return;
+  city?.setActorIdentity(signedInActorIdentity(profile));
+}
+
+async function rebuildOfficeActor(): Promise<void> {
+  if (!inside || !office) return;
+  const wasWalking = office.walker?.active() ?? false;
+  stopWatchingOccupancy();
+  officePlan?.dispose();
+  officePlan = null;
+  office.dispose();
+  office = null;
+  officeAtmosphere = null;
+  await building("Updating your character…", () => enterOffice());
+  const rebuilt = office as OfficeScene | null;
+  if (wasWalking) rebuilt?.walker?.setActive(true);
+  renderLegend();
+}
+
+function ensureProfileEditor(): ProfileEditor | null {
+  if (profileEditor) return profileEditor;
+  if (!profileOverlay || !localProfile || access.subject === null) return null;
+  profileEditor = createProfileEditor({
+    container: profileOverlay,
+    profile: localProfile,
+    identityId: access.subject,
+    onPreview: applyProfilePreview,
+    onSave(profile) {
+      localProfile = profile;
+      saveLocalProfile(sessionStorage, LOCAL_PROFILE_KEY, profile);
+      dispatchJourney({
+        type: "sign-in-actor-swap",
+        actor: {
+          id: access.subject ?? "anonymous",
+          kind: "humanoid",
+          signedIn: true,
+          profile: { displayName: profile.displayName, color: humanoidAppearance()?.accentColor },
+        },
+      });
+      city?.setActorIdentity(signedInActorIdentity(profile));
+      renderTierBadge();
+      profileOverlay.hidden = true;
+      if (inside) void rebuildOfficeActor();
+    },
+    onCancel() {
+      profileOverlay.hidden = true;
+    },
+  });
+  profileEditor.root.addEventListener("keydown", (event) => event.stopPropagation());
+  return profileEditor;
+}
+
+function openProfileEditor(): void {
+  if (!localProfile || !profileOverlay) return;
+  const editor = ensureProfileEditor();
+  if (!editor) return;
+  editor.update(localProfile);
+  profileOverlay.hidden = false;
+  editor.open();
+}
+
 // ---- Navigation -------------------------------------------------------------
 
 /** The views on offer right now — city chapters, or office viewpoints inside. */
@@ -2257,6 +2347,7 @@ window.addEventListener("keydown", (event) => {
   const target = event.target;
   if (
     target instanceof HTMLInputElement ||
+    target instanceof HTMLSelectElement ||
     target instanceof HTMLTextAreaElement ||
     (target instanceof HTMLElement && target.isContentEditable)
   ) {

src/media/index.ts

@@ -11,3 +11,9 @@ export {
   type MediaSurfaceBinding,
   type MediaSurfaceLifecycle,
 } from "./lifecycle.ts";
+export {
+  createOfficeMediaPresentation,
+  type MediaSurfaceDescriptor,
+  type MediaSurfaceGrant,
+  type OfficeMediaPresentation,
+} from "./presentation.ts";

src/media/presentation.ts

@@ -0,0 +1,163 @@
+/**
+ * Render hooks for authored office screens.
+ *
+ * Screen faces remain batched in `Furnishings`; this layer adds one thin overlay
+ * only for each interactive monitor/display. Each overlay has an independent
+ * material, so replacing one screen never splits every other furniture batch.
+ * It consumes an already-authorized caller-owned `VideoTexture`, never a source
+ * locator, URL, stream, or identity record.
+ */
+
+import * as THREE from "three";
+import type { Plan } from "../interiors/plan.ts";
+
+const SCREEN_KINDS = new Set(["tera:screen.monitor", "tera:screen.wall-display"]);
+const PLACEHOLDER_COLOR = 0x101820;
+
+export interface MediaSurfaceDescriptor {
+  screenId: string;
+  officeId: string;
+  levelId: string;
+  roomId: string | null;
+  kind: string;
+  bound: boolean;
+}
+
+/** Minimal output of server authorization; source locators never enter this layer. */
+export interface MediaSurfaceGrant {
+  canView: boolean;
+  optedIn: boolean;
+}
+
+export interface OfficeMediaPresentation {
+  group: THREE.Group;
+  list(): MediaSurfaceDescriptor[];
+  bind(screenId: string, grant: MediaSurfaceGrant, texture: THREE.VideoTexture): boolean;
+  clear(screenId: string): boolean;
+  dispose(): void;
+}
+
+interface Surface {
+  descriptor: MediaSurfaceDescriptor;
+  mesh: THREE.Mesh;
+  material: THREE.MeshBasicMaterial;
+  /** Caller-owned. Kept only while bound and never disposed here. */
+  texture: THREE.VideoTexture | null;
+}
+
+export function createOfficeMediaPresentation(
+  plan: Plan,
+  furnishings: THREE.Object3D,
+): OfficeMediaPresentation {
+  const group = new THREE.Group();
+  group.name = "office-media-surfaces";
+  const surfaces = new Map<string, Surface>();
+  let disposed = false;
+
+  furnishings.traverse((object) => {
+    if (!(object instanceof THREE.InstancedMesh)) return;
+    const separator = object.name.indexOf(":screenDisplay");
+    if (separator < 0) return;
+    const kind = object.name.slice(0, separator);
+    if (!SCREEN_KINDS.has(kind)) return;
+    const ids = object.userData.props as string[] | undefined;
+    if (!ids || ids.length !== object.count) return;
+
+    for (let index = 0; index < object.count; index += 1) {
+      const screenId = ids[index];
+      if (!screenId || surfaces.has(screenId)) continue;
+      const prop = plan.prop(screenId);
+      if (!prop) continue;
+      const level = plan.level(prop.levelId);
+      if (!level) continue;
+
+      const material = placeholderMaterial(screenId);
+      const mesh = new THREE.Mesh(object.geometry, material);
+      mesh.name = `media-surface:${screenId}`;
+      mesh.matrixAutoUpdate = false;
+      object.getMatrixAt(index, mesh.matrix);
+      mesh.matrixWorldNeedsUpdate = true;
+      mesh.castShadow = false;
+      mesh.receiveShadow = false;
+      mesh.renderOrder = 1;
+      const roomId = plan.roomAt(prop.levelId, prop.position)?.id ?? null;
+      const descriptor: MediaSurfaceDescriptor = {
+        screenId,
+        officeId: plan.office.id,
+        levelId: prop.levelId,
+        roomId,
+        kind,
+        bound: false,
+      };
+      mesh.userData.mediaSurface = { ...descriptor };
+      group.add(mesh);
+      surfaces.set(screenId, { descriptor, mesh, material, texture: null });
+    }
+  });
+
+  function clearSurface(surface: Surface): void {
+    if (surface.material.map !== null) {
+      surface.material.map = null;
+      surface.material.color.setHex(PLACEHOLDER_COLOR);
+      surface.material.needsUpdate = true;
+    }
+    surface.texture = null;
+    surface.descriptor.bound = false;
+    surface.mesh.userData.mediaSurface = { ...surface.descriptor };
+  }
+
+  return {
+    group,
+    list() {
+      return [...surfaces.values()].map(({ descriptor }) => ({ ...descriptor }));
+    },
+    bind(screenId, grant, texture) {
+      if (disposed) return false;
+      const surface = surfaces.get(screenId);
+      if (!surface) return false;
+      if (!grant.canView || !grant.optedIn) {
+        clearSurface(surface);
+        return false;
+      }
+      surface.texture = texture;
+      surface.material.map = texture;
+      surface.material.color.setHex(0xffffff);
+      surface.material.needsUpdate = true;
+      surface.descriptor.bound = true;
+      surface.mesh.userData.mediaSurface = { ...surface.descriptor };
+      return true;
+    },
+    clear(screenId) {
+      if (disposed) return false;
+      const surface = surfaces.get(screenId);
+      if (!surface) return false;
+      clearSurface(surface);
+      return true;
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      for (const surface of surfaces.values()) {
+        clearSurface(surface);
+        // Geometry belongs to the original furniture batch; the small overlay
+        // owns only its cloned material.
+        surface.material.dispose();
+        surface.mesh.removeFromParent();
+      }
+      surfaces.clear();
+      group.clear();
+    },
+  };
+}
+
+function placeholderMaterial(screenId: string): THREE.MeshBasicMaterial {
+  return new THREE.MeshBasicMaterial({
+    name: `media-placeholder:${screenId}`,
+    color: PLACEHOLDER_COLOR,
+    toneMapped: false,
+    polygonOffset: true,
+    polygonOffsetFactor: -1,
+    polygonOffsetUnits: -1,
+  });
+}
+

src/profile/editor.ts

@@ -0,0 +1,427 @@
+/**
+ * Accessible, dependency-free profile editor mounted into a caller-owned node.
+ *
+ * It emits JSON profile data for a separate preview renderer. It creates no
+ * canvas, Three.js object, webcam, storage, URL, or network request. User text
+ * is assigned only through input `.value` and `textContent`; never `innerHTML`.
+ */
+import {
+  ACCENTS,
+  BODY_SHAPES,
+  HAIR_COLORS,
+  OUTFITS,
+  SKIN_TONES,
+  createDefaultLocalProfile,
+  isLocalProfile,
+  type HumanoidAppearanceChoices,
+  type LocalProfile,
+} from "./model.ts";
+
+export interface ProfileEditorOptions {
+  container: HTMLElement;
+  profile: LocalProfile;
+  /** Used only to regenerate deterministic appearance defaults; never rendered or emitted. */
+  identityId: string;
+  onPreview?: (profile: LocalProfile) => void;
+  onSave?: (profile: LocalProfile) => void;
+  onCancel?: () => void;
+}
+
+export interface ProfileEditorState {
+  open: boolean;
+  dirty: boolean;
+  valid: boolean;
+  /** Last saved/caller-supplied profile. */
+  profile: LocalProfile;
+  /** Current form values. May have an invalid display name while `valid` is false. */
+  draft: LocalProfile;
+}
+
+export interface ProfileEditor {
+  /** Stable dialog node for host layout or integration tests. */
+  root: HTMLElement;
+  state(): ProfileEditorState;
+  /** Replace both committed and draft data through strict profile validation. */
+  update(profile: LocalProfile): ProfileEditorState;
+  open(): ProfileEditorState;
+  /** Hide without committing or discarding the draft. */
+  close(): ProfileEditorState;
+  dispose(): void;
+}
+
+type AppearanceField = keyof HumanoidAppearanceChoices;
+
+const PROFILE_EDITOR_STYLES = `
+.tera-profile-editor {
+  width: min(420px, calc(100vw - 32px));
+  max-height: min(720px, calc(100dvh - 32px));
+  overflow: auto;
+  color: var(--ink, rgba(255,255,255,.82));
+  background: var(--glass-strong, rgba(9,13,18,.9));
+  border: 1px solid var(--hairline, rgba(255,255,255,.13));
+  border-radius: var(--r, 8px);
+  box-shadow: var(--shadow, 0 8px 28px rgba(0,0,0,.45));
+  backdrop-filter: var(--blur, blur(14px));
+  padding: var(--s5, 24px);
+  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
+}
+.tera-profile-editor__title { margin: 0 0 4px; color: white; font: 600 16px/1.3 inherit; }
+.tera-profile-editor__intro { margin: 0 0 20px; color: var(--ink-2, rgba(255,255,255,.62)); }
+.tera-profile-editor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.tera-profile-editor__field { display: grid; gap: 6px; min-width: 0; }
+.tera-profile-editor__field--wide { grid-column: 1 / -1; }
+.tera-profile-editor__label { color: var(--ink, rgba(255,255,255,.82)); }
+.tera-profile-editor__input {
+  width: 100%; min-height: 40px; padding: 8px 10px; color: white;
+  background: rgba(255,255,255,.07); border: 1px solid var(--hairline, rgba(255,255,255,.15));
+  border-radius: var(--r-sm, 5px); font: inherit;
+}
+.tera-profile-editor__input:hover { border-color: rgba(255,255,255,.3); }
+.tera-profile-editor__input:focus-visible, .tera-profile-editor__button:focus-visible {
+  outline: 2px solid var(--amber, #f2b134); outline-offset: 2px;
+}
+.tera-profile-editor__input[aria-invalid="true"] { border-color: #ff8b80; }
+.tera-profile-editor__status { min-height: 18px; margin: 12px 0 0; color: #ffb2aa; }
+.tera-profile-editor__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
+.tera-profile-editor__button {
+  min-height: 40px; padding: 8px 14px; color: var(--ink, white); cursor: pointer;
+  background: rgba(255,255,255,.07); border: 1px solid var(--hairline, rgba(255,255,255,.15));
+  border-radius: var(--r-sm, 5px); font: inherit;
+}
+.tera-profile-editor__button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
+.tera-profile-editor__button--primary { color: #171109; background: var(--amber, #f2b134); border-color: transparent; font-weight: 700; }
+.tera-profile-editor__button--primary:hover:not(:disabled) { background: var(--amber-lit, #ffc555); }
+.tera-profile-editor__button:disabled { cursor: not-allowed; opacity: .42; }
+@media (max-width: 460px) { .tera-profile-editor__grid { grid-template-columns: 1fr; } .tera-profile-editor__field--wide { grid-column: auto; } }
+@media (prefers-reduced-motion: reduce) { .tera-profile-editor * { scroll-behavior: auto !important; } }
+`;
+
+const FIELD_OPTIONS: Readonly<Record<AppearanceField, readonly string[]>> = {
+  skinTone: SKIN_TONES,
+  outfit: OUTFITS,
+  accent: ACCENTS,
+  hair: HAIR_COLORS,
+  bodyShape: BODY_SHAPES,
+};
+
+const FIELD_LABELS: Readonly<Record<AppearanceField, string>> = {
+  skinTone: "Skin tone",
+  outfit: "Outfit",
+  accent: "Accent",
+  hair: "Hair",
+  bodyShape: "Body shape",
+};
+
+let editorSequence = 0;
+
+function clone(profile: LocalProfile): LocalProfile {
+  return { ...profile, appearance: { ...profile.appearance } };
+}
+
+function presentChoice(value: string): string {
+  return value.replace(/(^|-)([a-z])/g, (_match, separator: string, letter: string) => `${separator}${letter.toUpperCase()}`);
+}
+
+function validDisplayName(value: string): boolean {
+  return (
+    value === value.trim() &&
+    value.length >= 1 &&
+    value.length <= 64 &&
+    !/[\u0000-\u001f\u007f]/u.test(value)
+  );
+}
+
+function sameProfile(a: LocalProfile, b: LocalProfile): boolean {
+  return (
+    a.version === b.version &&
+    a.displayName === b.displayName &&
+    a.appearance.skinTone === b.appearance.skinTone &&
+    a.appearance.outfit === b.appearance.outfit &&
+    a.appearance.accent === b.appearance.accent &&
+    a.appearance.hair === b.appearance.hair &&
+    a.appearance.bodyShape === b.appearance.bodyShape
+  );
+}
+
+function focusable(value: Element | null): value is HTMLElement {
+  return value !== null && typeof (value as HTMLElement).focus === "function";
+}
+
+export function createProfileEditor(options: ProfileEditorOptions): ProfileEditor {
+  if (!options.container || typeof options.container.append !== "function") {
+    throw new RangeError("profile editor: container must be an HTMLElement");
+  }
+  if (!isLocalProfile(options.profile)) throw new RangeError("profile editor: invalid profile");
+  if (typeof options.identityId !== "string" || options.identityId.length === 0) {
+    throw new RangeError("profile editor: identity id is required");
+  }
+
+  const doc = options.container.ownerDocument;
+  const number = ++editorSequence;
+  const titleId = `tera-profile-title-${number}`;
+  const descriptionId = `tera-profile-description-${number}`;
+  const statusId = `tera-profile-status-${number}`;
+  const root = doc.createElement("section");
+  root.className = "tera-profile-editor";
+  root.setAttribute("role", "dialog");
+  root.setAttribute("aria-modal", "true");
+  root.setAttribute("aria-labelledby", titleId);
+  root.setAttribute("aria-describedby", `${descriptionId} ${statusId}`);
+  root.setAttribute("aria-hidden", "true");
+  root.hidden = true;
+
+  const style = doc.createElement("style");
+  style.setAttribute("data-tera-profile-editor-style", "");
+  style.textContent = PROFILE_EDITOR_STYLES;
+  root.append(style);
+
+  const title = doc.createElement("h2");
+  title.id = titleId;
+  title.className = "tera-profile-editor__title";
+  title.textContent = "Your Tera character";
+  root.append(title);
+
+  const intro = doc.createElement("p");
+  intro.id = descriptionId;
+  intro.className = "tera-profile-editor__intro";
+  intro.textContent = "Choose how your procedural humanoid appears. Preview stays local to this page.";
+  root.append(intro);
+
+  const form = doc.createElement("form");
+  form.setAttribute("novalidate", "");
+  const grid = doc.createElement("div");
+  grid.className = "tera-profile-editor__grid";
+  form.append(grid);
+
+  const nameField = doc.createElement("div");
+  nameField.className = "tera-profile-editor__field tera-profile-editor__field--wide";
+  const nameLabel = doc.createElement("label");
+  const nameId = `tera-profile-name-${number}`;
+  nameLabel.className = "tera-profile-editor__label";
+  nameLabel.setAttribute("for", nameId);
+  nameLabel.textContent = "Display name";
+  const nameInput = doc.createElement("input");
+  nameInput.id = nameId;
+  nameInput.className = "tera-profile-editor__input";
+  nameInput.setAttribute("data-field", "displayName");
+  nameInput.setAttribute("aria-describedby", statusId);
+  nameInput.type = "text";
+  nameInput.maxLength = 64;
+  nameInput.autocomplete = "name";
+  nameField.append(nameLabel, nameInput);
+  grid.append(nameField);
+
+  const selects = {} as Record<AppearanceField, HTMLSelectElement>;
+  const appearanceFields = Object.keys(FIELD_OPTIONS) as AppearanceField[];
+  for (const field of appearanceFields) {
+    const wrapper = doc.createElement("div");
+    wrapper.className = "tera-profile-editor__field";
+    const label = doc.createElement("label");
+    const id = `tera-profile-${field}-${number}`;
+    label.className = "tera-profile-editor__label";
+    label.setAttribute("for", id);
+    label.textContent = FIELD_LABELS[field];
+    const select = doc.createElement("select");
+    select.id = id;
+    select.className = "tera-profile-editor__input";
+    select.setAttribute("data-field", field);
+    for (const choice of FIELD_OPTIONS[field]) {
+      const option = doc.createElement("option");
+      option.value = choice;
+      option.textContent = presentChoice(choice);
+      select.append(option);
+    }
+    selects[field] = select;
+    wrapper.append(label, select);
+    grid.append(wrapper);
+  }
+
+  const status = doc.createElement("p");
+  status.id = statusId;
+  status.className = "tera-profile-editor__status";
+  status.setAttribute("role", "status");
+  status.setAttribute("aria-live", "polite");
+  form.append(status);
+
+  const actions = doc.createElement("div");
+  actions.className = "tera-profile-editor__actions";
+  const resetButton = button(doc, "Reset appearance", "reset");
+  const cancelButton = button(doc, "Cancel", "cancel");
+  const saveButton = button(doc, "Save profile", "save", true);
+  actions.append(resetButton, cancelButton, saveButton);
+  form.append(actions);
+  root.append(form);
+  options.container.append(root);
+
+  const focusOrder: HTMLElement[] = [nameInput, ...appearanceFields.map((field) => selects[field]), resetButton, cancelButton, saveButton];
+  let committed = clone(options.profile);
+  let draft = clone(options.profile);
+  let isOpen = false;
+  let disposed = false;
+  let returnFocus: HTMLElement | null = null;
+
+  function valid(): boolean {
+    return validDisplayName(draft.displayName) && isLocalProfile(draft);
+  }
+
+  function snapshot(): ProfileEditorState {
+    return {
+      open: isOpen,
+      dirty: !sameProfile(committed, draft),
+      valid: valid(),
+      profile: clone(committed),
+      draft: clone(draft),
+    };
+  }
+
+  function render(): void {
+    nameInput.value = draft.displayName;
+    for (const field of appearanceFields) selects[field].value = draft.appearance[field];
+    const isValid = valid();
+    nameInput.setAttribute("aria-invalid", isValid ? "false" : "true");
+    saveButton.disabled = !isValid;
+    status.textContent = isValid ? "" : "Enter a name from 1 to 64 characters without leading or trailing spaces.";
+  }
+
+  function emitPreview(): void {
+    if (valid()) options.onPreview?.(clone(draft));
+  }
+
+  function assignField(field: AppearanceField, value: string): void {
+    if (!(FIELD_OPTIONS[field] as readonly string[]).includes(value)) return;
+    draft = { ...draft, appearance: { ...draft.appearance, [field]: value } } as LocalProfile;
+    render();
+    emitPreview();
+  }
+
+  function save(): void {
+    if (!valid()) {
+      render();
+      nameInput.focus();
+      return;
+    }
+    committed = clone(draft);
+    options.onSave?.(clone(committed));
+    close();
+  }
+
+  function cancel(): void {
+    draft = clone(committed);
+    render();
+    emitPreview();
+    options.onCancel?.();
+    close();
+  }
+
+  function close(): ProfileEditorState {
+    if (!isOpen || disposed) return snapshot();
+    isOpen = false;
+    root.hidden = true;
+    root.setAttribute("aria-hidden", "true");
+    const target = returnFocus;
+    returnFocus = null;
+    target?.focus();
+    return snapshot();
+  }
+
+  nameInput.addEventListener("input", () => {
+    if (disposed) return;
+    draft = { ...draft, displayName: nameInput.value };
+    render();
+    emitPreview();
+  });
+  for (const field of appearanceFields) {
+    selects[field].addEventListener("change", () => {
+      if (!disposed) assignField(field, selects[field].value);
+    });
+  }
+  resetButton.addEventListener("click", () => {
+    if (disposed) return;
+    const defaults = createDefaultLocalProfile(options.identityId, committed.displayName);
+    draft = { ...defaults, displayName: draft.displayName };
+    render();
+    emitPreview();
+  });
+  cancelButton.addEventListener("click", () => {
+    if (!disposed) cancel();
+  });
+  saveButton.addEventListener("click", () => {
+    if (!disposed) save();
+  });
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    if (!disposed) save();
+  });
+  root.addEventListener("keydown", (event) => {
+    if (disposed || !isOpen) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancel();
+      return;
+    }
+    if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      save();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const enabled = focusOrder.filter((element) => !((element as HTMLButtonElement).disabled));
+    const first = enabled[0];
+    const last = enabled[enabled.length - 1];
+    if (!first || !last) return;
+    if (event.shiftKey && doc.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && doc.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  });
+
+  render();
+
+  return {
+    root,
+    state: snapshot,
+    update(profile) {
+      if (disposed) return snapshot();
+      if (!isLocalProfile(profile)) throw new RangeError("profile editor: invalid profile");
+      committed = clone(profile);
+      draft = clone(profile);
+      render();
+      emitPreview();
+      return snapshot();
+    },
+    open() {
+      if (disposed || isOpen) return snapshot();
+      isOpen = true;
+      root.hidden = false;
+      root.setAttribute("aria-hidden", "false");
+      returnFocus = focusable(doc.activeElement) ? doc.activeElement : null;
+      nameInput.focus();
+      emitPreview();
+      return snapshot();
+    },
+    close,
+    dispose() {
+      if (disposed) return;
+      if (isOpen) close();
+      disposed = true;
+      root.remove();
+    },
+  };
+}
+
+function button(
+  doc: Document,
+  label: string,
+  action: "reset" | "cancel" | "save",
+  primary = false,
+): HTMLButtonElement {
+  const element = doc.createElement("button");
+  element.type = "button";
+  element.className = `tera-profile-editor__button${primary ? " tera-profile-editor__button--primary" : ""}`;
+  element.setAttribute("data-action", action);
+  element.textContent = label;
+  return element;
+}

src/profile/index.ts

@@ -49,3 +49,19 @@ export {
   type WebcamFaceConsentStatus,
   type WebcamFaceConsentTransition,
 } from "./webcamConsent.ts";
+
+export {
+  createProfileEditor,
+  type ProfileEditor,
+  type ProfileEditorOptions,
+  type ProfileEditorState,
+} from "./editor.ts";
+
+export {
+  createWebcamFaceTexture,
+  type WebcamFaceTextureAdapter,
+  type WebcamFaceTextureBinding,
+  type WebcamFaceTextureOptions,
+  type WebcamFaceTextureState,
+  type WebcamFaceTextureStatus,
+} from "./webcamFaceTexture.ts";

src/profile/webcamFaceTexture.ts

@@ -0,0 +1,153 @@
+/**
+ * Ephemeral webcam-face texture binding behind explicit consent.
+ *
+ * This adapter has no acquisition path: no `getUserMedia`, URL, fetch, canvas,
+ * recorder, upload, or storage API. A caller that already owns a stream and a
+ * video element may bind them only while the existing consent controller says
+ * active. The adapter owns the resulting Three.js texture and nothing else.
+ */
+
+import * as THREE from "three";
+import type { WebcamFaceConsentController } from "./webcamConsent.ts";
+
+export type WebcamFaceTextureStatus = "off" | "active" | "disposed";
+
+export interface WebcamFaceTextureState {
+  status: WebcamFaceTextureStatus;
+  active: boolean;
+  /** UI must show this whenever live webcam pixels are available to the scene. */
+  indicatorVisible: boolean;
+  consentRevision: number;
+  readonly ephemeral: true;
+  readonly persistence: "none";
+  readonly recording: false;
+  readonly uploading: false;
+}
+
+export interface WebcamFaceTextureBinding {
+  /** Caller-owned and never stopped. */
+  stream: MediaStream;
+  /** Caller-owned and never removed, played, paused, or disposed. */
+  video: HTMLVideoElement;
+}
+
+export interface WebcamFaceTextureAdapter {
+  state(): WebcamFaceTextureState;
+  /**
+   * Creates one adapter-owned `VideoTexture`. The caller must already have
+   * attached the stream to the video and started playback after user consent.
+   */
+  bind(binding: WebcamFaceTextureBinding): THREE.VideoTexture;
+  /** Returns null and clears immediately when consent is no longer active. */
+  texture(): THREE.VideoTexture | null;
+  /** Explicitly reconcile a consent transition and return the new state. */
+  sync(): WebcamFaceTextureState;
+  clear(): WebcamFaceTextureState;
+  dispose(): void;
+}
+
+export interface WebcamFaceTextureOptions {
+  consent: WebcamFaceConsentController;
+  /** Active-indicator hook; fires only when the visible state changes. */
+  onIndicatorChange?: (state: WebcamFaceTextureState) => void;
+}
+
+export function createWebcamFaceTexture(options: WebcamFaceTextureOptions): WebcamFaceTextureAdapter {
+  if (!options.consent || typeof options.consent.state !== "function") {
+    throw new RangeError("webcam face texture: consent controller is required");
+  }
+
+  let texture: THREE.VideoTexture | null = null;
+  let disposed = false;
+  let lastIndicator = false;
+
+  function snapshot(): WebcamFaceTextureState {
+    const consent = options.consent.state();
+    const active = !disposed && texture !== null && consent.status === "active" && consent.consentGranted;
+    return {
+      status: disposed ? "disposed" : active ? "active" : "off",
+      active,
+      indicatorVisible: active,
+      consentRevision: consent.revision,
+      ephemeral: true,
+      persistence: "none",
+      recording: false,
+      uploading: false,
+    };
+  }
+
+  function announce(): WebcamFaceTextureState {
+    const state = snapshot();
+    if (state.indicatorVisible !== lastIndicator) {
+      lastIndicator = state.indicatorVisible;
+      options.onIndicatorChange?.({ ...state });
+    }
+    return state;
+  }
+
+  function release(): void {
+    if (!texture) return;
+    // `VideoTexture.dispose()` releases only renderer resources. It does not
+    // stop tracks or dispose/mutate the caller's video element.
+    texture.dispose();
+    texture = null;
+  }
+
+  function reconcile(): WebcamFaceTextureState {
+    const consent = options.consent.state();
+    if (texture && (consent.status !== "active" || !consent.consentGranted)) release();
+    return announce();
+  }
+
+  return {
+    state: reconcile,
+    bind(binding) {
+      if (disposed) throw new Error("webcam face texture: adapter is disposed");
+      const consent = options.consent.state();
+      if (consent.status !== "active" || !consent.consentGranted) {
+        throw new Error("webcam face texture: explicit active consent is required");
+      }
+      validateBinding(binding);
+      release();
+      texture = new THREE.VideoTexture(binding.video);
+      texture.name = "ephemeral-webcam-face";
+      texture.colorSpace = THREE.SRGBColorSpace;
+      texture.generateMipmaps = false;
+      announce();
+      return texture;
+    },
+    texture() {
+      reconcile();
+      return texture;
+    },
+    sync: reconcile,
+    clear() {
+      if (!disposed) release();
+      return announce();
+    },
+    dispose() {
+      if (disposed) return;
+      release();
+      disposed = true;
+      announce();
+    },
+  };
+}
+
+function validateBinding(binding: WebcamFaceTextureBinding): void {
+  if (!binding || typeof binding !== "object") throw new TypeError("webcam face texture: binding is required");
+  const stream = binding.stream as MediaStream | undefined;
+  const video = binding.video as HTMLVideoElement | undefined;
+  if (!stream || typeof stream.getVideoTracks !== "function") {
+    throw new TypeError("webcam face texture: caller-owned MediaStream is required");
+  }
+  const tracks = stream.getVideoTracks();
+  if (tracks.length === 0) throw new TypeError("webcam face texture: stream has no video track");
+  if (!video || typeof video !== "object" || !("srcObject" in video)) {
+    throw new TypeError("webcam face texture: caller-owned HTMLVideoElement is required");
+  }
+  if (video.srcObject !== stream) {
+    throw new TypeError("webcam face texture: caller must attach the supplied stream to the video first");
+  }
+}
+

src/test/aircraft.test.ts

@@ -0,0 +1,188 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import * as THREE from "three";
+import {
+  AircraftController,
+  ELECTRIC_AIRCRAFT_METRICS,
+  aircraftChaseCameraPose,
+  advanceAircraftFans,
+  buildElectricAircraft,
+  createElectricAircraftMaterials,
+  disposeElectricAircraft,
+  normalizeAircraftActions,
+  replayAircraftInputs,
+  setAircraftControlSurfaces,
+  setAircraftFanRotation,
+} from "../aircraft/index.ts";
+
+const ROUTE = [
+  { id: "los-angeles", lat: 34.0522, lng: -118.2437, altitudeM: 1_300 },
+  { id: "san-francisco", lat: 37.7749, lng: -122.4194, altitudeM: 1_700 },
+] as const;
+
+describe("procedural electric aircraft", () => {
+  it("builds an original metre-scale fixed wing facing -Z with articulated parts", () => {
+    const rig = buildElectricAircraft();
+    assert.equal(rig.root.name, "electric-aircraft");
+    assert.equal(rig.fans.length, 2);
+    assert.equal(rig.ownsMaterials, true);
+    assert.ok(ELECTRIC_AIRCRAFT_METRICS.wingspan > ELECTRIC_AIRCRAFT_METRICS.length);
+    const bounds = new THREE.Box3().setFromObject(rig.root);
+    const size = bounds.getSize(new THREE.Vector3());
+    assert.ok(size.x > 10);
+    assert.ok(size.z > 7);
+    assert.ok(size.y > 1.5);
+    disposeElectricAircraft(rig);
+    assert.equal(rig.root.children.length, 0);
+  });
+
+  it("animates opposing ailerons, V-tail surfaces, and electric fans", () => {
+    const rig = buildElectricAircraft();
+    setAircraftControlSurfaces(rig, { roll: 0.8, pitch: 0.5, yaw: -0.4 });
+    assert.ok(rig.leftAileron.rotation.x > 0);
+    assert.ok(rig.rightAileron.rotation.x < 0);
+    assert.notEqual(rig.leftVTail.rotation.x, rig.rightVTail.rotation.x);
+    setAircraftFanRotation(rig, 1);
+    advanceAircraftFans(rig, 0.5);
+    assert.equal(rig.fans[0]?.rotation.z, 1.5);
+    assert.equal(rig.fans[1]?.rotation.z, 1.5);
+    disposeElectricAircraft(rig);
+  });
+
+  it("does not dispose caller-owned materials", () => {
+    const materials = createElectricAircraftMaterials();
+    let disposals = 0;
+    for (const material of Object.values(materials)) {
+      material.addEventListener("dispose", () => { disposals += 1; });
+    }
+    const rig = buildElectricAircraft({ materials });
+    assert.equal(rig.ownsMaterials, false);
+    disposeElectricAircraft(rig);
+    assert.equal(disposals, 0);
+    for (const material of Object.values(materials)) material.dispose();
+  });
+});
+
+describe("aircraft controller", () => {
+  it("normalizes device-neutral flight axes", () => {
+    assert.deepEqual(normalizeAircraftActions({
+      throttle: 5,
+      yaw: -4,
+      pitch: Number.NaN,
+      roll: 2,
+      modeRequest: "manual",
+      reset: true,
+    }), {
+      throttle: 1,
+      yaw: -1,
+      pitch: 0,
+      roll: 1,
+      modeRequest: "manual",
+      reset: true,
+    });
+  });
+
+  it("follows route and altitude deterministically in assisted mode", () => {
+    const options = {
+      route: ROUTE,
+      initialPosition: ROUTE[0],
+      initialHeadingDeg: 0,
+      initialAltitudeM: 900,
+      assistedAltitudeM: 1_300,
+    };
+    const a = new AircraftController(options);
+    const b = new AircraftController(options);
+    for (let index = 0; index < 600; index += 1) {
+      a.stepFixed();
+      b.stepFixed();
+    }
+    assert.deepEqual(a.snapshot(), b.snapshot());
+    assert.equal(a.state().mode, "assisted");
+    assert.equal(a.state().routeWaypointId, "san-francisco");
+    assert.ok(a.state().altitudeM > 900);
+    assert.ok(a.state().headingDeg > 180, "aircraft turns northwest toward San Francisco");
+  });
+
+  it("takes manual input immediately and resumes assistance without a state jump", () => {
+    const controller = new AircraftController({ route: ROUTE });
+    for (let index = 0; index < 120; index += 1) {
+      controller.stepFixed({ throttle: 0.8, roll: 0.7, pitch: -0.3 });
+    }
+    assert.equal(controller.state().mode, "manual");
+    const before = controller.snapshot();
+    controller.stepFixed({ modeRequest: "assisted", roll: 0.8 });
+    assert.equal(controller.state().mode, "manual", "manual controls beat simultaneous resume");
+    controller.stepFixed({ modeRequest: "assisted" });
+    assert.equal(controller.state().mode, "assisted");
+    assert.ok(Math.abs(controller.state().rollDeg - before.rollDeg) < 3);
+    assert.ok(Math.abs(controller.state().pitchDeg - before.pitchDeg) < 3);
+  });
+
+  it("enforces geographic, altitude, and speed boundaries", () => {
+    const controller = new AircraftController({
+      mode: "manual",
+      initialPosition: { lat: 100, lng: -200 },
+      initialAltitudeM: 100_000,
+      initialSpeedMps: 1_000,
+      maximumSpeedMps: 80,
+    });
+    assert.equal(controller.state().lat, 42.1);
+    assert.equal(controller.state().lng, -124.6);
+    assert.equal(controller.state().altitudeM, 6_000);
+    assert.equal(controller.state().speedMps, 80);
+    for (let index = 0; index < 180; index += 1) {
+      controller.stepFixed({ throttle: 1, pitch: 1, roll: 1 });
+    }
+    assert.ok(controller.state().lat >= 32.4 && controller.state().lat <= 42.1);
+    assert.ok(controller.state().lng >= -124.6 && controller.state().lng <= -114);
+    assert.ok(controller.state().altitudeM >= 75 && controller.state().altitudeM <= 6_000);
+    assert.ok(controller.state().speedMps <= 80);
+    assert.equal(controller.state().envelopeContact, true);
+  });
+
+  it("resets exactly, caps sleeping-tab time, and replays bit-for-bit", () => {
+    const options = { route: ROUTE, initialAltitudeM: 1_200, initialSpeedMps: 48 } as const;
+    const controller = new AircraftController(options);
+    const spawn = controller.snapshot();
+    assert.ok(controller.tick(600) <= 15);
+    controller.stepFixed({ throttle: 1, roll: -1 });
+    controller.stepFixed({ reset: true });
+    assert.deepEqual(controller.snapshot(), spawn);
+
+    const frames = [
+      { steps: 90, actions: { throttle: 0.9, roll: 0.4 } },
+      { steps: 1, actions: { modeRequest: "assisted" as const } },
+      { steps: 180 },
+    ];
+    assert.deepEqual(
+      replayAircraftInputs(options, frames),
+      replayAircraftInputs(options, frames),
+    );
+  });
+
+  it("derives a finite geographic chase camera behind the aircraft", () => {
+    const controller = new AircraftController({ initialHeadingDeg: 0 });
+    const camera = aircraftChaseCameraPose(controller.state());
+    assert.ok(camera.position.lat < controller.state().lat);
+    assert.ok(camera.target.lat > controller.state().lat);
+    assert.ok(camera.position.altitudeM > controller.state().altitudeM);
+    assert.ok(Object.values(camera.position).every(Number.isFinite));
+    assert.ok(Object.values(camera.target).every(Number.isFinite));
+  });
+
+  it("rejects malformed route and envelope configuration", () => {
+    assert.throws(() => new AircraftController({
+      route: [{ id: "bad", lat: Number.NaN, lng: 0, altitudeM: 1_000 }],
+    }), /waypoints/);
+    assert.throws(() => new AircraftController({
+      envelope: {
+        minLat: 40,
+        maxLat: 30,
+        minLng: -124,
+        maxLng: -114,
+        minAltitudeM: 10,
+        maxAltitudeM: 100,
+      },
+    }), /envelope/);
+  });
+});

src/test/mediaPresentation.test.ts

@@ -0,0 +1,102 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import * as THREE from "three";
+import { MaterialRegistry } from "../assets/materials.ts";
+import "../assets/office/index.ts";
+import { createFurnishings } from "../interiors/furnish.ts";
+import { Plan } from "../interiors/plan.ts";
+import type { Level, Office, Room } from "../interiors/types.ts";
+import { createOfficeMediaPresentation } from "../media/presentation.ts";
+
+const ROOM: Room = {
+  id: "room",
+  name: "Room",
+  floor: "floor" as never,
+  outline: [{ x: 0, z: 0 }, { x: 8, z: 0 }, { x: 8, z: 6 }, { x: 0, z: 6 }],
+};
+
+function fixture(depth: "full" | "public" = "full") {
+  const level: Level = {
+    id: "ground",
+    name: "Ground",
+    elevation: 0,
+    wallHeight: 3,
+    wallThickness: 0.1,
+    floorplan: { rooms: [ROOM], walls: [], props: [
+      { id: "wall-display", kind: "tera:screen.wall-display", position: { x: 2, z: 2 }, rotation: 0 },
+      { id: "desk-monitor", kind: "tera:screen.monitor", position: { x: 4, z: 2 }, rotation: 0, elevation: 0.73 },
+      { id: "ordinary-desk", kind: "tera:desk.workstation", position: { x: 6, z: 2 }, rotation: 0 },
+      {
+        id: "private-display",
+        kind: "tera:screen.wall-display",
+        position: { x: 2, z: 4 },
+        rotation: 0,
+        audience: "private",
+      },
+    ] },
+  };
+  const office: Office = { id: "media-office", name: "Media Office", levels: [level], viewpoints: [] };
+  const plan = new Plan(office, { depth, warn: false });
+  const materials = new MaterialRegistry({ quality: "low" });
+  const furnishings = createFurnishings(plan, { materials });
+  const presentation = createOfficeMediaPresentation(plan, furnishings.group);
+  return { plan, materials, furnishings, presentation };
+}
+
+describe("procedural office media presentation", () => {
+  it("discovers only authored screen props and keeps exact prop ids and rooms", () => {
+    const f = fixture();
+    const listed = f.presentation.list();
+    assert.deepEqual(listed.map((item) => item.screenId).sort(), ["desk-monitor", "private-display", "wall-display"]);
+    assert.ok(listed.every((item) => item.officeId === "media-office" && item.roomId === "room"));
+    assert.ok(!listed.some((item) => item.screenId === "ordinary-desk"));
+    assert.equal(f.presentation.group.children.length, 3);
+    f.presentation.dispose();
+    f.furnishings.dispose();
+    f.materials.dispose();
+  });
+
+  it("keeps public depth private-prop-free by discovering only the resolved plan", () => {
+    const f = fixture("public");
+    assert.deepEqual(f.presentation.list().map((item) => item.screenId).sort(), ["desk-monitor", "wall-display"]);
+    f.presentation.dispose();
+    f.furnishings.dispose();
+    f.materials.dispose();
+  });
+
+  it("requires authorization plus opt-in and returns to a safe placeholder", () => {
+    const f = fixture();
+    let textureDisposals = 0;
+    const texture = new THREE.VideoTexture({} as HTMLVideoElement);
+    texture.dispose = () => { textureDisposals += 1; };
+    assert.equal(f.presentation.bind("wall-display", { canView: true, optedIn: false }, texture), false);
+    assert.equal(f.presentation.list().find((item) => item.screenId === "wall-display")?.bound, false);
+    assert.equal(f.presentation.bind("wall-display", { canView: true, optedIn: true }, texture), true);
+    const mesh = f.presentation.group.getObjectByName("media-surface:wall-display") as THREE.Mesh;
+    assert.equal((mesh.material as THREE.MeshBasicMaterial).map, texture);
+    assert.equal(f.presentation.clear("wall-display"), true);
+    assert.equal((mesh.material as THREE.MeshBasicMaterial).map, null);
+    assert.equal(textureDisposals, 0);
+    f.presentation.dispose();
+    assert.equal(textureDisposals, 0, "caller-owned texture was disposed");
+    f.furnishings.dispose();
+    f.materials.dispose();
+  });
+
+  it("returns defensive descriptors and contains unknown/disposed operations", () => {
+    const f = fixture();
+    const leaked = f.presentation.list()[0];
+    assert.ok(leaked);
+    leaked.screenId = "changed";
+    assert.notEqual(f.presentation.list()[0]?.screenId, "changed");
+    const texture = new THREE.VideoTexture({} as HTMLVideoElement);
+    assert.equal(f.presentation.bind("missing", { canView: true, optedIn: true }, texture), false);
+    f.presentation.dispose();
+    f.presentation.dispose();
+    assert.equal(f.presentation.bind("wall-display", { canView: true, optedIn: true }, texture), false);
+    assert.equal(f.presentation.clear("wall-display"), false);
+    f.furnishings.dispose();
+    f.materials.dispose();
+    texture.dispose();
+  });
+});

src/test/profileEditor.test.ts

@@ -0,0 +1,241 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  ACCENTS,
+  BODY_SHAPES,
+  HAIR_COLORS,
+  OUTFITS,
+  SKIN_TONES,
+  createDefaultLocalProfile,
+  createProfileEditor,
+  type LocalProfile,
+} from "../profile/index.ts";
+
+type Listener = (event: FakeEvent) => void;
+
+class FakeEvent {
+  defaultPrevented = false;
+  readonly type: string;
+  readonly target: FakeElement;
+  readonly key: string;
+  readonly ctrlKey: boolean;
+  readonly metaKey: boolean;
+  readonly shiftKey: boolean;
+  constructor(
+    type: string,
+    target: FakeElement,
+    key = "",
+    ctrlKey = false,
+    metaKey = false,
+    shiftKey = false,
+  ) {
+    this.type = type;
+    this.target = target;
+    this.key = key;
+    this.ctrlKey = ctrlKey;
+    this.metaKey = metaKey;
+    this.shiftKey = shiftKey;
+  }
+  preventDefault(): void { this.defaultPrevented = true; }
+}
+
+class FakeElement {
+  readonly children: FakeElement[] = [];
+  readonly attributes = new Map<string, string>();
+  readonly listeners = new Map<string, Listener[]>();
+  parentElement: FakeElement | null = null;
+  className = "";
+  textContent = "";
+  hidden = false;
+  value = "";
+  id = "";
+  type = "";
+  maxLength = 0;
+  autocomplete = "";
+  disabled = false;
+  readonly ownerDocument: FakeDocument;
+  readonly tagName: string;
+
+  constructor(ownerDocument: FakeDocument, tagName: string) {
+    this.ownerDocument = ownerDocument;
+    this.tagName = tagName;
+  }
+
+  append(...nodes: FakeElement[]): void {
+    for (const node of nodes) {
+      node.parentElement = this;
+      this.children.push(node);
+    }
+  }
+  setAttribute(name: string, value: string): void { this.attributes.set(name, value); }
+  getAttribute(name: string): string | null { return this.attributes.get(name) ?? null; }
+  addEventListener(type: string, listener: Listener): void {
+    const found = this.listeners.get(type);
+    if (found) found.push(listener);
+    else this.listeners.set(type, [listener]);
+  }
+  dispatch(type: string, init: Partial<Pick<FakeEvent, "key" | "ctrlKey" | "metaKey" | "shiftKey">> = {}): FakeEvent {
+    const event = new FakeEvent(type, this, init.key, init.ctrlKey, init.metaKey, init.shiftKey);
+    for (const listener of this.listeners.get(type) ?? []) listener(event);
+    return event;
+  }
+  focus(): void { this.ownerDocument.activeElement = this; }
+  remove(): void {
+    if (!this.parentElement) return;
+    const index = this.parentElement.children.indexOf(this);
+    if (index >= 0) this.parentElement.children.splice(index, 1);
+    this.parentElement = null;
+  }
+  find(attribute: string, value: string): FakeElement {
+    if (this.attributes.get(attribute) === value) return this;
+    for (const child of this.children) {
+      try { return child.find(attribute, value); } catch { /* continue */ }
+    }
+    throw new Error(`missing [${attribute}=${value}]`);
+  }
+  descendants(tagName: string): FakeElement[] {
+    const result: FakeElement[] = [];
+    for (const child of this.children) {
+      if (child.tagName === tagName.toUpperCase()) result.push(child);
+      result.push(...child.descendants(tagName));
+    }
+    return result;
+  }
+}
+
+class FakeDocument {
+  activeElement: FakeElement | null = null;
+  createElement(tagName: string): FakeElement { return new FakeElement(this, tagName.toUpperCase()); }
+}
+
+function setup(profile = createDefaultLocalProfile("member-22", "Avery")) {
+  const document = new FakeDocument();
+  const container = document.createElement("div");
+  const previews: LocalProfile[] = [];
+  const saves: LocalProfile[] = [];
+  let cancels = 0;
+  const editor = createProfileEditor({
+    container: container as unknown as HTMLElement,
+    profile,
+    identityId: "member-22",
+    onPreview: (next) => previews.push(next),
+    onSave: (next) => saves.push(next),
+    onCancel: () => cancels++,
+  });
+  return { document, container, editor, previews, saves, cancels: () => cancels };
+}
+
+describe("profile editor DOM adapter", () => {
+  it("builds a closed labelled dialog with every enumerated appearance choice", () => {
+    const { container, editor } = setup();
+    const root = editor.root as unknown as FakeElement;
+    assert.equal(container.children.length, 1);
+    assert.equal(root.hidden, true);
+    assert.equal(root.getAttribute("role"), "dialog");
+    assert.equal(root.getAttribute("aria-modal"), "true");
+    assert.ok(root.getAttribute("aria-labelledby"));
+    assert.equal(root.find("data-field", "displayName").getAttribute("aria-describedby"), root.descendants("p")[1]?.id);
+    assert.equal(root.find("data-field", "skinTone").children.length, SKIN_TONES.length);
+    assert.equal(root.find("data-field", "outfit").children.length, OUTFITS.length);
+    assert.equal(root.find("data-field", "accent").children.length, ACCENTS.length);
+    assert.equal(root.find("data-field", "hair").children.length, HAIR_COLORS.length);
+    assert.equal(root.find("data-field", "bodyShape").children.length, BODY_SHAPES.length);
+    assert.equal(editor.state().open, false);
+  });
+
+  it("opens with focus, edits preview data, saves, and restores invoker focus", () => {
+    const { document, editor, previews, saves } = setup();
+    const trigger = document.createElement("button");
+    trigger.focus();
+    editor.open();
+    const root = editor.root as unknown as FakeElement;
+    const name = root.find("data-field", "displayName");
+    assert.equal(document.activeElement, name);
+    assert.equal(root.getAttribute("aria-hidden"), "false");
+
+    name.value = "Avery Chen";
+    name.dispatch("input");
+    const outfit = root.find("data-field", "outfit");
+    outfit.value = "sage";
+    outfit.dispatch("change");
+    assert.equal(editor.state().draft.displayName, "Avery Chen");
+    assert.equal(editor.state().draft.appearance.outfit, "sage");
+    assert.equal(editor.state().dirty, true);
+    assert.equal(previews.at(-1)?.appearance.outfit, "sage");
+
+    root.find("data-action", "save").dispatch("click");
+    assert.equal(saves.length, 1);
+    assert.equal(saves[0]?.displayName, "Avery Chen");
+    assert.equal(editor.state().open, false);
+    assert.equal(document.activeElement, trigger);
+  });
+
+  it("blocks invalid names and exposes accessible validation", () => {
+    const { document, editor, saves } = setup();
+    editor.open();
+    const root = editor.root as unknown as FakeElement;
+    const name = root.find("data-field", "displayName");
+    const save = root.find("data-action", "save");
+    name.value = " ";
+    name.dispatch("input");
+    assert.equal(editor.state().valid, false);
+    assert.equal(name.getAttribute("aria-invalid"), "true");
+    assert.equal(save.disabled, true);
+    // Form submit covers Enter/assistive submit even though a disabled click cannot fire in a browser.
+    root.descendants("form")[0]?.dispatch("submit");
+    assert.equal(saves.length, 0);
+    assert.equal(document.activeElement, name);
+  });
+
+  it("resets appearance deterministically and Escape cancels the draft", () => {
+    const profile = createDefaultLocalProfile("some-other-id", "River");
+    const { editor, previews, cancels } = setup(profile);
+    editor.open();
+    const root = editor.root as unknown as FakeElement;
+    const outfit = root.find("data-field", "outfit");
+    outfit.value = outfit.value === "ink" ? "clay" : "ink";
+    outfit.dispatch("change");
+    const name = root.find("data-field", "displayName");
+    name.value = "River Two";
+    name.dispatch("input");
+    root.find("data-action", "reset").dispatch("click");
+    assert.deepEqual(editor.state().draft.appearance, createDefaultLocalProfile("member-22", "River").appearance);
+    assert.equal(editor.state().draft.displayName, "River Two");
+
+    const event = root.dispatch("keydown", { key: "Escape" });
+    assert.equal(event.defaultPrevented, true);
+    assert.equal(cancels(), 1);
+    assert.deepEqual(editor.state().draft, profile);
+    assert.deepEqual(previews.at(-1), profile);
+  });
+
+  it("traps keyboard focus and supports command-enter save", () => {
+    const { document, editor, saves } = setup();
+    editor.open();
+    const root = editor.root as unknown as FakeElement;
+    const first = root.find("data-field", "displayName");
+    const last = root.find("data-action", "save");
+    last.focus();
+    assert.equal(root.dispatch("keydown", { key: "Tab" }).defaultPrevented, true);
+    assert.equal(document.activeElement, first);
+    first.focus();
+    assert.equal(root.dispatch("keydown", { key: "Tab", shiftKey: true }).defaultPrevented, true);
+    assert.equal(document.activeElement, last);
+    assert.equal(root.dispatch("keydown", { key: "Enter", ctrlKey: true }).defaultPrevented, true);
+    assert.equal(saves.length, 1);
+  });
+
+  it("strictly updates caller data, then disposes without leaving DOM", () => {
+    const { container, editor, previews } = setup();
+    const next = createDefaultLocalProfile("new-person", "Morgan");
+    const updated = editor.update(next);
+    assert.deepEqual(updated.profile, next);
+    assert.deepEqual(updated.draft, next);
+    assert.deepEqual(previews.at(-1), next);
+    assert.throws(() => editor.update({ ...next, displayName: "" }), RangeError);
+    editor.open();
+    editor.dispose();
+    editor.dispose();
+    assert.equal(container.children.length, 0);
+  });
+});

src/test/webcamFaceTexture.test.ts

@@ -0,0 +1,108 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+  createWebcamFaceConsent,
+  createWebcamFaceTexture,
+  type WebcamFaceTextureState,
+} from "../profile/index.ts";
+
+function media() {
+  let stops = 0;
+  let pauses = 0;
+  const track = {
+    kind: "video",
+    stop: () => { stops += 1; },
+  } as unknown as MediaStreamTrack;
+  const stream = {
+    getVideoTracks: () => [track],
+    getTracks: () => [track],
+  } as unknown as MediaStream;
+  const video = {
+    srcObject: stream,
+    pause: () => { pauses += 1; },
+  } as unknown as HTMLVideoElement;
+  return { stream, video, stops: () => stops, pauses: () => pauses };
+}
+
+describe("ephemeral webcam face texture", () => {
+  it("is off by default and refuses media before explicit active consent", () => {
+    const consent = createWebcamFaceConsent();
+    const adapter = createWebcamFaceTexture({ consent });
+    const input = media();
+    assert.deepEqual(adapter.state(), {
+      status: "off",
+      active: false,
+      indicatorVisible: false,
+      consentRevision: 0,
+      ephemeral: true,
+      persistence: "none",
+      recording: false,
+      uploading: false,
+    });
+    assert.throws(() => adapter.bind(input), /active consent/);
+    assert.equal(adapter.texture(), null);
+    adapter.dispose();
+  });
+
+  it("accepts only caller-attached video after consent and owns only its texture", () => {
+    const consent = createWebcamFaceConsent();
+    consent.requestStart();
+    consent.start(true);
+    const input = media();
+    const wrongVideo = { srcObject: null } as HTMLVideoElement;
+    const adapter = createWebcamFaceTexture({ consent });
+    assert.throws(() => adapter.bind({ stream: input.stream, video: wrongVideo }), /attach/);
+    const texture = adapter.bind(input);
+    let textureDisposals = 0;
+    const dispose = texture.dispose.bind(texture);
+    texture.dispose = () => { textureDisposals += 1; dispose(); };
+    assert.equal(adapter.texture(), texture);
+    assert.equal(adapter.state().active, true);
+    adapter.clear();
+    assert.equal(textureDisposals, 1);
+    assert.equal(adapter.texture(), null);
+    assert.equal(input.stops(), 0, "caller-owned track was stopped");
+    assert.equal(input.pauses(), 0, "caller-owned video was paused");
+    adapter.dispose();
+  });
+
+  it("clears on stop/revoke and publishes defensive active-indicator transitions", () => {
+    const consent = createWebcamFaceConsent();
+    consent.requestStart();
+    consent.start(true);
+    const input = media();
+    const indicators: WebcamFaceTextureState[] = [];
+    const adapter = createWebcamFaceTexture({
+      consent,
+      onIndicatorChange: (state) => {
+        state.status = "disposed";
+        indicators.push({ ...state });
+      },
+    });
+    adapter.bind(input);
+    assert.equal(adapter.state().status, "active", "callback mutation escaped into adapter");
+    consent.stop();
+    assert.equal(adapter.sync().active, false);
+    assert.equal(adapter.texture(), null);
+    assert.equal(input.stops(), 0);
+    assert.deepEqual(indicators.map((state) => state.indicatorVisible), [true, false]);
+    adapter.dispose();
+  });
+
+  it("is idempotent after disposal and rejects reuse", () => {
+    const consent = createWebcamFaceConsent();
+    consent.requestStart();
+    consent.start(true);
+    const input = media();
+    const adapter = createWebcamFaceTexture({ consent });
+    adapter.bind(input);
+    adapter.dispose();
+    adapter.dispose();
+    assert.equal(adapter.state().status, "disposed");
+    assert.equal(adapter.texture(), null);
+    assert.throws(() => adapter.bind(input), /disposed/);
+    assert.equal(input.stops(), 0);
+    assert.equal(input.pauses(), 0);
+  });
+});
+