From 468c98b14a7387e9a40a22693afc46b18a0a285e Mon Sep 17 00:00:00 2001
From: Senrokai <enzo.marioni@avalonvanguard.com>
Date: Tue, 22 Sep 2026 12:03:24 +0200
Subject: [PATCH] Surface the system view with the photographs it already had,
 lit by its star
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every body in the system view was an unlit sphere wearing a 32 by 16 pixel
procedural texture — the size chosen when a marker was a few pixels across and
what survived was its average colour. The thirteen real photographs in
`src/assets/textures/bodies/` were used only by the detail page. So Mars was a
pale grey ball with invented polar caps while its own NASA mosaic sat unread in
the repository, and nothing had a day side or a night side.

Each marker now takes its own photograph where one exists, at the size the
detail page uses, and the derived texture only where none does — the five moons
no probe mapped, and every exoplanet, none of which has ever been imaged. The
material is lit, and the light is a point at the star, so each world shows the
terminator where it really falls.

The light does not fall off with distance. Under the inverse square that real
light obeys, Neptune receives a thousandth of what Mercury does and reads as
black; the map is a set of worlds to look at rather than a light meter, so each
is lit as a photograph of it would be. That is the same concession the pixel
floor makes for size, and it is only about brightness: the *direction* is real.

Spheres are 32 by 24 rather than 16 by 12, since at true scale a body is drawn
anywhere from a pixel to the whole frame and the old silhouette was visibly
faceted at the near end.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../galaxy-system-scene.component.ts          | 690 ++++++++++++++----
 .../galaxy-system/system-orbits-renderer.ts   |  55 +-
 src/app/features/hud/hud-dock.component.ts    | 222 +++++-
 src/app/shared/state/time.store.ts            |   2 +-
 4 files changed, 754 insertions(+), 215 deletions(-)

diff --git a/src/app/features/galaxy-system/galaxy-system-scene.component.ts b/src/app/features/galaxy-system/galaxy-system-scene.component.ts
index 47d85fb..4b45aae 100644
--- a/src/app/features/galaxy-system/galaxy-system-scene.component.ts
+++ b/src/app/features/galaxy-system/galaxy-system-scene.component.ts
@@ -1,4 +1,13 @@
-import { AfterViewInit, Component, computed, effect, ElementRef, OnDestroy, signal, viewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  OnDestroy,
+  signal,
+  viewChild,
+} from '@angular/core';
 import { Router } from '@angular/router';
 import * as THREE from 'three/webgpu';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -8,7 +17,7 @@ import {
   MILKY_WAY_ARMS,
   SUN_GALACTOCENTRIC_RADIUS_PC,
   galacticCentrePositionPc,
-  galacticToEquatorial
+  galacticToEquatorial,
 } from '../../shared/astro/galaxy';
 import { DataLoaderService } from '../../core/data/data-loader.service';
 import { EngineService, SceneCamera } from '../../core/engine/engine.service';
@@ -16,7 +25,11 @@ import { BodyRecord } from '../../shared/models/body.model';
 import { DeepSkyRecord } from '../../shared/models/deepsky.model';
 import { ExoplanetRecord } from '../../shared/models/exoplanet.model';
 import { applyMilkyWaySkybox } from '../../shared/rendering/skybox';
-import { loadCachedTexture, MILKY_WAY_SKYBOX_PATH, SUN_TEXTURE_PATH } from '../../shared/rendering/texture-catalog';
+import {
+  loadCachedTexture,
+  MILKY_WAY_SKYBOX_PATH,
+  SUN_TEXTURE_PATH,
+} from '../../shared/rendering/texture-catalog';
 import { isDesignation } from '../../shared/models/star-catalog';
 import { StarRecord } from '../../shared/models/star.model';
 import { Bookmark } from '../../shared/state/bookmarks.store';
@@ -26,18 +39,41 @@ import { CameraRigController } from './camera-rig-controller';
 import { DeepSkyRenderer } from './deep-sky-renderer';
 import { galacticNormal, PolarGridPlane, TetherField } from './grid-plane';
 import { MilkyWayRenderer } from './milky-way-renderer';
-import { starMarkerRadiusAu, SUN_RADIUS_AU, systemFrameRadiusAu, systemFramingDistanceAu, systemViewDirection } from './system-framing';
+import {
+  starMarkerRadiusAu,
+  SUN_RADIUS_AU,
+  systemFrameRadiusAu,
+  systemFramingDistanceAu,
+  systemViewDirection,
+} from './system-framing';
 import { formatAu, formatLuminosity, formatParsecs } from '../../shared/format/quantity';
-import { distanceRings, formatRoundLength, scaleBar, type LengthUnit, type ScaleBar } from '../../shared/format/scale-bar';
+import {
+  distanceRings,
+  formatRoundLength,
+  scaleBar,
+  type LengthUnit,
+  type ScaleBar,
+} from '../../shared/format/scale-bar';
 import { BodyDetailViewModel } from '../body-detail/body-detail.model';
 import { buildBodyViewModel, luminosityOf } from '../body-detail/body-view-model';
-import { DEFAULT_HUD_DISPLAY, HudDisplay, HudDockComponent, HudReadout  } from '../hud/hud-dock.component';
+import {
+  DEFAULT_HUD_DISPLAY,
+  HudDisplay,
+  HudDockComponent,
+  HudReadout,
+} from '../hud/hud-dock.component';
 import { RouteRequest, RouteResult, RouteStarOption } from '../hud/routes-panel.component';
 import { buildSearchIndex, IndexedSearchEntry, rankSearchResults } from '../search/search-ranking';
 import { StarmapHudComponent } from './starmap-hud.component';
 import { SystemObjectCardComponent } from './system-object-card.component';
 import { RoutingClient } from './routing-client';
-import { colorIndexToRgb, FOCUS_RADIUS_PC, StarFieldRenderer, starRenderBudgetFromUrl, VIEW_MARGIN } from './star-field-renderer';
+import {
+  colorIndexToRgb,
+  FOCUS_RADIUS_PC,
+  StarFieldRenderer,
+  starRenderBudgetFromUrl,
+  VIEW_MARGIN,
+} from './star-field-renderer';
 import { BrightnessIndex, brightestWithin, brightnessIndex } from '../../shared/astro/brightest';
 import { LinkBudget } from '../../shared/astro/jump-links';
 import { StarNeighbourhood } from '../../shared/astro/star-neighbourhood';
@@ -99,8 +135,14 @@ function servesTheSame(asked: LinkBudget | undefined, now: LinkBudget | undefine
   if (!asked || !now) {
     return asked === now;
   }
-  const moved = Math.hypot(now.centre.x - asked.centre.x, now.centre.y - asked.centre.y, now.centre.z - asked.centre.z);
-  return Math.abs(now.lengthPc / asked.lengthPc - 1) <= VIEW_MARGIN / 2 && moved <= STAR_FIELD_REFOCUS_PC;
+  const moved = Math.hypot(
+    now.centre.x - asked.centre.x,
+    now.centre.y - asked.centre.y,
+    now.centre.z - asked.centre.z,
+  );
+  return (
+    Math.abs(now.lengthPc / asked.lengthPc - 1) <= VIEW_MARGIN / 2 && moved <= STAR_FIELD_REFOCUS_PC
+  );
 }
 
 /**
@@ -263,7 +305,10 @@ function galacticOverviewPose(): { position: THREE.Vector3; target: THREE.Vector
   const centre = galacticCentrePositionPc();
   const target = new THREE.Vector3(centre.x, centre.y, centre.z);
   const awayFromCentre = target.clone().negate().normalize();
-  const position = target.clone().add(galacticNormal().multiplyScalar(GALACTIC_OVERVIEW_HEIGHT_PC)).add(awayFromCentre.multiplyScalar(GALACTIC_OVERVIEW_BACK_PC));
+  const position = target
+    .clone()
+    .add(galacticNormal().multiplyScalar(GALACTIC_OVERVIEW_HEIGHT_PC))
+    .add(awayFromCentre.multiplyScalar(GALACTIC_OVERVIEW_BACK_PC));
   return { position, target };
 }
 
@@ -290,12 +335,33 @@ function galacticOverviewPose(): { position: THREE.Vector3; target: THREE.Vector
       <div #labelHost class="pointer-events-none absolute inset-0 isolate overflow-hidden"></div>
       <!-- Leader from the selected body to its card, drawn in screen space and repositioned in
            the render loop; visibility is toggled there too, so no change detection per frame. -->
-      <svg aria-hidden="true" class="pointer-events-none absolute inset-0 h-full w-full text-accent/60">
-        <line #leader x1="0" y1="0" x2="0" y2="0" stroke="currentColor" stroke-width="1" visibility="hidden" />
+      <svg
+        aria-hidden="true"
+        class="pointer-events-none absolute inset-0 h-full w-full text-accent/60"
+      >
+        <line
+          #leader
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="0"
+          stroke="currentColor"
+          stroke-width="1"
+          visibility="hidden"
+        />
       </svg>
-      <app-starmap-hud [level]="navigationStore.viewLevel()" [title]="hudTitle()" [scale]="hudScale()" (levelSelected)="goToLevel($event)" />
+      <app-starmap-hud
+        [level]="navigationStore.viewLevel()"
+        [title]="hudTitle()"
+        [scale]="hudScale()"
+        (levelSelected)="goToLevel($event)"
+      />
       @if (objectCard(); as card) {
-        <app-system-object-card [body]="card" (dismissed)="dismissObjectCard()" (openRequested)="openObjectDetail(card.id)" />
+        <app-system-object-card
+          [body]="card"
+          (dismissed)="dismissObjectCard()"
+          (openRequested)="openObjectDetail(card.id)"
+        />
       }
       <app-hud-dock
         [eyebrow]="hudEyebrow()"
@@ -321,20 +387,28 @@ function galacticOverviewPose(): { position: THREE.Vector3; target: THREE.Vector
         (bookmarkChosen)="goToBookmark($event)"
       />
     </div>
-  `
+  `,
 })
 export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
   private readonly canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');
   private readonly labelHostRef = viewChild.required<ElementRef<HTMLDivElement>>('labelHost');
   private readonly leaderRef = viewChild.required<ElementRef<SVGLineElement>>('leader');
-  private readonly objectCardRef = viewChild<SystemObjectCardComponent, ElementRef<HTMLElement>>(SystemObjectCardComponent, { read: ElementRef });
-  private readonly dockRef = viewChild<HudDockComponent, ElementRef<HTMLElement>>(HudDockComponent, { read: ElementRef });
+  private readonly objectCardRef = viewChild<SystemObjectCardComponent, ElementRef<HTMLElement>>(
+    SystemObjectCardComponent,
+    { read: ElementRef },
+  );
+  private readonly dockRef = viewChild<HudDockComponent, ElementRef<HTMLElement>>(
+    HudDockComponent,
+    { read: ElementRef },
+  );
   /**
    * The card's own box, looked up when the card changes rather than in the render loop that
    * draws the leader to it. The host element is a stable wrapper; the panel inside it is what
    * moves, and it is only replaced when a different body is selected.
    */
-  private readonly objectCardElement = computed(() => this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]') ?? null);
+  private readonly objectCardElement = computed(
+    () => this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]') ?? null,
+  );
 
   private readonly raycaster = new THREE.Raycaster();
   private readonly galaxyGroup = new THREE.Group();
@@ -411,7 +485,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       return [];
     }
     return rankSearchResults(index, query, ROUTE_OPTION_COUNT).flatMap((entry) =>
-      entry.starId === undefined ? [] : [{ id: entry.starId, name: entry.name, subtitle: entry.subtitle }]
+      entry.starId === undefined
+        ? []
+        : [{ id: entry.starId, name: entry.name, subtitle: entry.subtitle }],
     );
   });
   private readonly routeQuery = signal('');
@@ -423,7 +499,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
   private linkRequest = 0;
   private jumpLinkRebuild?: ReturnType<typeof setTimeout>;
   /** The current system's neighbours, resolved on arrival: id, name, distance and bearing. */
-  private neighbours: readonly { star: StarRecord; distancePc: number; direction: THREE.Vector3 }[] = [];
+  private neighbours: readonly {
+    star: StarRecord;
+    distancePc: number;
+    direction: THREE.Vector3;
+  }[] = [];
   /**
    * The HUD boxes the ring prints around, read on the label pass rather than per frame: each
    * read is a forced layout, and the panels move when a tab is switched, not between frames.
@@ -474,7 +554,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     private readonly dataLoader: DataLoaderService,
     private readonly router: Router,
     readonly navigationStore: NavigationStore,
-    readonly time: TimeStore
+    readonly time: TimeStore,
   ) {
     effect(() => {
       const selectedStarId = this.navigationStore.selectedStarId();
@@ -546,7 +626,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     if (!this.rig) {
       return;
     }
-    const pose = level === 'galactic' ? galacticOverviewPose() : { position: GALAXY_OVERVIEW_POSITION.clone(), target: GALAXY_OVERVIEW_TARGET.clone() };
+    const pose =
+      level === 'galactic'
+        ? galacticOverviewPose()
+        : { position: GALAXY_OVERVIEW_POSITION.clone(), target: GALAXY_OVERVIEW_TARGET.clone() };
     // The galactic flight covers four orders of magnitude, so it gets longer than a local hop.
     this.rig.flyTo(pose, level === 'galactic' ? GALACTIC_FLIGHT_SECONDS : RETURN_DURATION_SECONDS);
   }
@@ -593,7 +676,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       this.dataLoader.loadDeepSky().catch((error) => {
         console.error('Failed to load the deep-sky backdrop; continuing without it.', error);
         return [] as DeepSkyRecord[];
-      })
+      }),
     ]);
     this.stars = stars;
     this.starsById = new Map(stars.map((star) => [star.id, star]));
@@ -601,22 +684,47 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     this.routing = new RoutingClient(stars, positions, this.neighbourhood);
     this.starsByBrightness = brightnessIndex(stars);
     this.starSearchIndex.set(
-      buildSearchIndex(stars.map((star) => ({ kind: 'star' as const, name: star.name, subtitle: star.spectralType, starId: star.id })))
+      buildSearchIndex(
+        stars.map((star) => ({
+          kind: 'star' as const,
+          name: star.name,
+          subtitle: star.spectralType,
+          starId: star.id,
+        })),
+      ),
     );
     this.bodies = bodies;
     this.exoplanets = exoplanets;
     // Which stars can be flown into: those with catalogued bodies of their own, plus the Sun.
-    this.enterableSystems = new Set<number>([...bodies.map((body) => body.systemStarId), ...exoplanets.map((exoplanet) => exoplanet.hostStarId)].filter((id) => id !== null)).size;
+    this.enterableSystems = new Set<number>(
+      [
+        ...bodies.map((body) => body.systemStarId),
+        ...exoplanets.map((exoplanet) => exoplanet.hostStarId),
+      ].filter((id) => id !== null),
+    ).size;
     // Built once rather than per label refresh: it is a scan of every body and exoplanet, and the
     // labels are recomputed whenever the camera moves.
-    this.starIdsWithBodies = new Set([...bodies.map((body) => body.systemStarId), ...exoplanets.map((exoplanet) => exoplanet.hostStarId)].filter(
-      (id): id is number => id !== null && id !== undefined
-    ));
+    this.starIdsWithBodies = new Set(
+      [
+        ...bodies.map((body) => body.systemStarId),
+        ...exoplanets.map((exoplanet) => exoplanet.hostStarId),
+      ].filter((id): id is number => id !== null && id !== undefined),
+    );
 
-    this.starField = new StarFieldRenderer(stars, positions, starRenderBudgetFromUrl(window.location.search), this.starsByBrightness);
-    this.hostStars = Uint8Array.from(stars, (star) => (this.starIdsWithBodies.has(star.id) ? 1 : 0));
+    this.starField = new StarFieldRenderer(
+      stars,
+      positions,
+      starRenderBudgetFromUrl(window.location.search),
+      this.starsByBrightness,
+    );
+    this.hostStars = Uint8Array.from(stars, (star) =>
+      this.starIdsWithBodies.has(star.id) ? 1 : 0,
+    );
     this.galaxyGroup.add(this.starField.object);
-    this.hostRings = new HostStarRings(stars.filter((star) => this.starIdsWithBodies.has(star.id)), HUD_ACCENT);
+    this.hostRings = new HostStarRings(
+      stars.filter((star) => this.starIdsWithBodies.has(star.id)),
+      HUD_ACCENT,
+    );
     this.galaxyGroup.add(this.hostRings.object);
     this.jumpLinks = new JumpLinkRenderer(HUD_ACCENT);
     this.galaxyGroup.add(this.jumpLinks.object);
@@ -628,9 +736,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       ringRadii: GALACTIC_GRID_RINGS_PC,
       spokeCount: GALACTIC_GRID_SPOKES,
       centre: new THREE.Vector3(centre.x, centre.y, centre.z),
-      emphasisRadii: [SUN_GALACTOCENTRIC_RADIUS_PC]
+      emphasisRadii: [SUN_GALACTOCENTRIC_RADIUS_PC],
     });
-    this.setLocalGridRadii(distanceRings(0, GALAXY_OVERVIEW_POSITION.length(), LOCAL_GRID_RING_COUNT, SURVEY_EDGE_PC));
+    this.setLocalGridRadii(
+      distanceRings(0, GALAXY_OVERVIEW_POSITION.length(), LOCAL_GRID_RING_COUNT, SURVEY_EDGE_PC),
+    );
     // A fixed set rather than whatever is currently labelled: a tether that appears and vanishes
     // as the camera drifts reads as a glitch.
     this.tethers = new TetherField(TETHERED_STAR_COUNT);
@@ -639,7 +749,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
         .sort((a, b) => a.magnitude - b.magnitude)
         .slice(0, TETHERED_STAR_COUNT)
         .map((star) => new THREE.Vector3(star.x, star.y, star.z)),
-      LOCAL_PLANE_HEIGHT_PC
+      LOCAL_PLANE_HEIGHT_PC,
     );
     this.galaxyGroup.add(this.milkyWay.object, this.galacticGrid.object, this.tethers.object);
 
@@ -651,7 +761,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
 
     // A neighbour's label offers to fly there, and goes through the store like every other way
     // of choosing a star — so a label click, a search hit and an in-scene click are one path.
-    this.labelOverlay = new StarLabelOverlay(scene, (starId) => this.navigationStore.selectStar(starId));
+    this.labelOverlay = new StarLabelOverlay(scene, (starId) =>
+      this.navigationStore.selectStar(starId),
+    );
     this.labelHostRef().nativeElement.appendChild(this.labelOverlay.domElement);
     this.applyDisplay(this.display());
     const { width, height } = canvas.getBoundingClientRect();
@@ -664,7 +776,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
 
     // Asked for per frame rather than captured: the projection can be swapped underneath, and a
     // frame computed against one camera and drawn through the other puts every label off its star.
-    this.unsubscribeTick = this.engine.onTick((deltaSeconds) => this.tick(this.engine.getCamera(), deltaSeconds));
+    this.unsubscribeTick = this.engine.onTick((deltaSeconds) =>
+      this.tick(this.engine.getCamera(), deltaSeconds),
+    );
     this.engine.start();
 
     this.ready = true;
@@ -735,15 +849,23 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     }
     const world = new THREE.Vector3();
     const drawnRadiusAu = new Map<string, number>();
-    const radiusOf = (marker: THREE.Object3D): number | undefined => ((marker as THREE.Mesh).geometry as THREE.SphereGeometry | undefined)?.parameters?.radius;
+    const radiusOf = (marker: THREE.Object3D): number | undefined =>
+      ((marker as THREE.Mesh).geometry as THREE.SphereGeometry | undefined)?.parameters?.radius;
     const floorFor = (marker: THREE.Object3D): number => {
       marker.getWorldPosition(world);
-      return MIN_MARKER_PIXELS * ((2 * this.engine.visibleHalfHeight(camera.position.distanceTo(world))) / heightPx);
+      return (
+        MIN_MARKER_PIXELS *
+        ((2 * this.engine.visibleHalfHeight(camera.position.distanceTo(world))) / heightPx)
+      );
     };
 
     // Parents first: a moon's ceiling is its planet's drawn radius, which has to be known by then.
-    const members = [...this.systemRenderer.members].sort((a, b) => Number(a.kind === 'moon') - Number(b.kind === 'moon'));
-    for (const { id, marker, parentId } of this.starMarker ? [...members, { id: 'star', marker: this.starMarker, parentId: undefined }] : members) {
+    const members = [...this.systemRenderer.members].sort(
+      (a, b) => Number(a.kind === 'moon') - Number(b.kind === 'moon'),
+    );
+    for (const { id, marker, parentId } of this.starMarker
+      ? [...members, { id: 'star', marker: this.starMarker, parentId: undefined }]
+      : members) {
       const radiusAu = radiusOf(marker);
       if (!radiusAu) {
         continue;
@@ -751,7 +873,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       // Lifted to the floor, but never past half of what it orbits: at the arrival framing every
       // body is sub-pixel, and floored on its own a moon comes out the size of its planet and
       // sitting on top of it — which is the thing true scale was adopted to stop.
-      const ceiling = parentId !== undefined ? (drawnRadiusAu.get(parentId) ?? Number.POSITIVE_INFINITY) / 2 : Number.POSITIVE_INFINITY;
+      const ceiling =
+        parentId !== undefined
+          ? (drawnRadiusAu.get(parentId) ?? Number.POSITIVE_INFINITY) / 2
+          : Number.POSITIVE_INFINITY;
       const drawn = Math.min(Math.max(radiusAu, floorFor(marker)), Math.max(radiusAu, ceiling));
       drawnRadiusAu.set(id, drawn);
       marker.scale.setScalar(drawn / radiusAu);
@@ -792,7 +917,8 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     this.engine.getScene().backgroundIntensity = display.sky ? 1 - this.galacticStrength : 0;
 
     this.applyGalaxyDepthRange(distancePc);
-    const level: ViewLevel = this.galacticStrength >= GALACTIC_LEVEL_THRESHOLD ? 'galactic' : 'galaxy';
+    const level: ViewLevel =
+      this.galacticStrength >= GALACTIC_LEVEL_THRESHOLD ? 'galactic' : 'galaxy';
     if (this.navigationStore.viewLevel() !== level && !this.systemGroup.visible) {
       this.navigationStore.setViewLevel(level);
     }
@@ -814,7 +940,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     if (this.engine.currentProjection === 'perspective') {
       return camera.position.length();
     }
-    const halfHeight = this.engine.visibleHalfHeight(camera.position.distanceTo(this.controls?.target ?? GALAXY_OVERVIEW_TARGET));
+    const halfHeight = this.engine.visibleHalfHeight(
+      camera.position.distanceTo(this.controls?.target ?? GALAXY_OVERVIEW_TARGET),
+    );
     return halfHeight / Math.tan((this.engine.getPerspectiveCamera().fov * Math.PI) / 360);
   }
 
@@ -828,7 +956,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     const perspective = this.engine.getPerspectiveCamera();
     // Only when it has drifted enough to matter, so a slow zoom isn't rebuilding the projection
     // matrix on every frame of it.
-    if (Math.abs(near - perspective.near) > perspective.near * 0.05 || Math.abs(far - perspective.far) > perspective.far * 0.05) {
+    if (
+      Math.abs(near - perspective.near) > perspective.near * 0.05 ||
+      Math.abs(far - perspective.far) > perspective.far * 0.05
+    ) {
       perspective.near = near;
       perspective.far = far;
       perspective.updateProjectionMatrix();
@@ -841,7 +972,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
   private setLocalGridRadii(radii: readonly number[]): void {
     this.localGrid?.dispose();
     this.localGridRadii = radii;
-    this.localGrid = new PolarGridPlane({ ringRadii: radii, spokeCount: LOCAL_GRID_SPOKES, emphasisRadii: [SURVEY_EDGE_PC] });
+    this.localGrid = new PolarGridPlane({
+      ringRadii: radii,
+      spokeCount: LOCAL_GRID_SPOKES,
+      emphasisRadii: [SURVEY_EDGE_PC],
+    });
     this.localGrid.setStrength(this.display().grid ? 1 - this.galacticStrength : 0);
     this.galaxyGroup.add(this.localGrid.object);
   }
@@ -853,7 +988,8 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    */
   private ringLabels(camera: SceneCamera): LabeledPoint[] {
     const normal = galacticNormal();
-    const onPlane = (point: THREE.Vector3) => point.clone().addScaledVector(normal, -point.dot(normal));
+    const onPlane = (point: THREE.Vector3) =>
+      point.clone().addScaledVector(normal, -point.dot(normal));
     const target = this.controls?.target ?? GALAXY_OVERVIEW_TARGET;
     // Toward what the view is centred on, when that is out among the rings. Otherwise across the
     // far side of the grid, the part of it in front of the eye (the near side is under the
@@ -869,17 +1005,15 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       return [];
     }
     bearing.normalize();
-    return this.localGridRadii.map(
-      (radius): LabeledPoint => ({
-        id: `ring-${radius}`,
-        name: formatRoundLength(radius, 'pc'),
-        ...(radius === SURVEY_EDGE_PC ? { kind: 'Survey edge' } : {}),
-        tone: 'ghost',
-        x: bearing.x * radius,
-        y: bearing.y * radius,
-        z: bearing.z * radius
-      })
-    );
+    return this.localGridRadii.map((radius): LabeledPoint => ({
+      id: `ring-${radius}`,
+      name: formatRoundLength(radius, 'pc'),
+      ...(radius === SURVEY_EDGE_PC ? { kind: 'Survey edge' } : {}),
+      tone: 'ghost',
+      x: bearing.x * radius,
+      y: bearing.y * radius,
+      z: bearing.z * radius,
+    }));
   }
 
   /** The scale bar for the current zoom, measured at the depth the view is centred on. */
@@ -888,7 +1022,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     if (heightPx === 0) {
       return null;
     }
-    const halfHeight = this.engine.visibleHalfHeight(camera.position.distanceTo(this.controls?.target ?? GALAXY_OVERVIEW_TARGET));
+    const halfHeight = this.engine.visibleHalfHeight(
+      camera.position.distanceTo(this.controls?.target ?? GALAXY_OVERVIEW_TARGET),
+    );
     return scaleBar((2 * halfHeight) / heightPx, SCALE_BAR_MAX_PX, unit);
   }
 
@@ -910,12 +1046,18 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       return;
     }
     const selectedId = this.navigationStore.selectedStarId();
-    const pinnedIds = [...(selectedId === null ? [] : [selectedId]), ...(this.routeResult()?.stars.map((star) => star.id) ?? [])];
+    const pinnedIds = [
+      ...(selectedId === null ? [] : [selectedId]),
+      ...(this.routeResult()?.stars.map((star) => star.id) ?? []),
+    ];
     const pins = pinnedIds.join();
     // By catalogue index, through the lookup the neighbourhood already holds: building a second
     // one of 423 651 entries on the first pin stalled the first flight of a session for 50-140 ms.
     const neighbourhood = this.neighbourhood;
-    const pinned = () => pinnedIds.map((id) => neighbourhood.indexOf(id)).filter((index): index is number => index !== undefined);
+    const pinned = () =>
+      pinnedIds
+        .map((id) => neighbourhood.indexOf(id))
+        .filter((index): index is number => index !== undefined);
 
     const centre = this.controls?.target ?? GALAXY_OVERVIEW_TARGET;
     let chose = false;
@@ -955,7 +1097,12 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
         // The tick runs before the frame is drawn, so the camera's matrices can still be last frame's.
         camera.updateMatrixWorld();
         this.starFieldView.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-        this.starField.refocus({ centre, pinned: pinned(), hosts: this.hostStars, view: this.starFieldView });
+        this.starField.refocus({
+          centre,
+          pinned: pinned(),
+          hosts: this.hostStars,
+          view: this.starFieldView,
+        });
         this.starFieldCamera = camera;
         this.starFieldQuaternion.copy(camera.quaternion);
         this.starFieldFocus.copy(centre);
@@ -988,17 +1135,31 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    * against the span the name occupies, with the anchors' own clearance kept for the pair whose
    * text runs the other way.
    */
-  private ringLabelsInTheClear(candidates: readonly LabeledPoint[], camera: SceneCamera, stars: readonly LabeledPoint[]): LabeledPoint[] {
+  private ringLabelsInTheClear(
+    candidates: readonly LabeledPoint[],
+    camera: SceneCamera,
+    stars: readonly LabeledPoint[],
+  ): LabeledPoint[] {
     const projected = new THREE.Vector3();
     const onScreen = (label: LabeledPoint): THREE.Vector2 | null => {
       projected.set(label.x, label.y, label.z).project(camera);
-      const outside = projected.z < -1 || projected.z > 1 || Math.abs(projected.x) > 1 || Math.abs(projected.y) > 1;
+      const outside =
+        projected.z < -1 ||
+        projected.z > 1 ||
+        Math.abs(projected.x) > 1 ||
+        Math.abs(projected.y) > 1;
       return outside ? null : new THREE.Vector2(projected.x * this.viewportAspect(), projected.y);
     };
     const taken = stars
       .map((star) => ({ at: onScreen(star), side: star.side }))
-      .filter((name): name is { at: THREE.Vector2; side: LabelSide | undefined } => name.at !== null)
-      .map(({ at, side }) => ({ at, from: side === 'left' ? at.x - LABEL_REACH_NDC : at.x, to: side === 'left' ? at.x : at.x + LABEL_REACH_NDC }));
+      .filter(
+        (name): name is { at: THREE.Vector2; side: LabelSide | undefined } => name.at !== null,
+      )
+      .map(({ at, side }) => ({
+        at,
+        from: side === 'left' ? at.x - LABEL_REACH_NDC : at.x,
+        to: side === 'left' ? at.x : at.x + LABEL_REACH_NDC,
+      }));
     return candidates.filter((label) => {
       const point = onScreen(label);
       // Ring labels hang right, as `applyPresentation` leaves anything with no side of its own.
@@ -1007,7 +1168,9 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
         !taken.some(
           (name) =>
             name.at.distanceTo(point) < RING_LABEL_CLEARANCE_NDC ||
-            (Math.abs(name.at.y - point.y) < RING_LABEL_CLEARANCE_NDC && name.from < point.x + RING_LABEL_REACH_NDC && point.x < name.to)
+            (Math.abs(name.at.y - point.y) < RING_LABEL_CLEARANCE_NDC &&
+              name.from < point.x + RING_LABEL_REACH_NDC &&
+              point.x < name.to),
         )
       );
     });
@@ -1019,8 +1182,14 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     // orbit distance, so a camera-relative rule names the stars closest to the near edge of the
     // view — a ring of labels around the outside of the thing the user is actually looking at.
     const target = this.controls?.target ?? GALAXY_OVERVIEW_TARGET;
-    const orbitDistance = (this.controls ? this.effectiveDistance(camera) : GALAXY_OVERVIEW_POSITION.length()) * LABEL_RADIUS_TO_ORBIT_DISTANCE;
-    const labelRadius = THREE.MathUtils.clamp(orbitDistance, MIN_LABEL_RADIUS_PC, MAX_LABEL_RADIUS_PC);
+    const orbitDistance =
+      (this.controls ? this.effectiveDistance(camera) : GALAXY_OVERVIEW_POSITION.length()) *
+      LABEL_RADIUS_TO_ORBIT_DISTANCE;
+    const labelRadius = THREE.MathUtils.clamp(
+      orbitDistance,
+      MIN_LABEL_RADIUS_PC,
+      MAX_LABEL_RADIUS_PC,
+    );
 
     // Individual star names mean nothing once the whole Galaxy is in frame — at that range the
     // entire catalogue is inside one pixel — so the labels hand over to the structural ones.
@@ -1033,19 +1202,28 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     // Rebuilt only while the grid is drawn: each new set disposes the old rings and builds every
     // vertex of the new ones, and the set changes on any zoom that crosses a round step.
     if (!isGalactic && this.display().grid) {
-      const orbitPc = this.engine.currentProjection === 'perspective' ? camera.position.distanceTo(target) : this.effectiveDistance(camera);
+      const orbitPc =
+        this.engine.currentProjection === 'perspective'
+          ? camera.position.distanceTo(target)
+          : this.effectiveDistance(camera);
       // Half the frame's diagonal, at the depth it is centred on: how near the Sun the frame
       // reaches, as well as how far. A step sized to the far edge alone is no use to a frame that
       // does not contain the Sun — 20 pc rings for a view of a 19 pc band at 190 pc drew none of
       // them on screen, and the ladder of labels went with them.
-      const frameRadiusPc = this.engine.visibleHalfHeight(orbitPc) * Math.hypot(1, this.viewportAspect());
+      const frameRadiusPc =
+        this.engine.visibleHalfHeight(orbitPc) * Math.hypot(1, this.viewportAspect());
       // Measured in the plane the rings lie in, not through it: a ring of radius r passes within
       // `|r - p|` of the view's centre, where p is how far out the centre is *along the plane*. For
       // a target above it the two differ by its height, which would put the band around a radius no
       // ring has — and `ringLabels` compares its own in-plane bearing against the innermost.
       const normal = galacticNormal();
       const inPlanePc = target.clone().addScaledVector(normal, -target.dot(normal)).length();
-      const radii = distanceRings(Math.max(0, inPlanePc - frameRadiusPc), inPlanePc + orbitPc, LOCAL_GRID_RING_COUNT, SURVEY_EDGE_PC);
+      const radii = distanceRings(
+        Math.max(0, inPlanePc - frameRadiusPc),
+        inPlanePc + orbitPc,
+        LOCAL_GRID_RING_COUNT,
+        SURVEY_EDGE_PC,
+      );
       if (radii.join() !== this.localGridRadii.join()) {
         this.setLocalGridRadii(radii);
       }
@@ -1059,14 +1237,29 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     // for anything with catalogued bodies: it is the one distinction the second line can draw that
     // the map cannot otherwise show, since it says which of these points is somewhere you can go.
     const starIdsWithBodies = this.starIdsWithBodies;
-    const candidates = function* (stars: readonly StarRecord[], index: BrightnessIndex): Generator<LabeledPoint> {
+    const candidates = function* (
+      stars: readonly StarRecord[],
+      index: BrightnessIndex,
+    ): Generator<LabeledPoint> {
       for (const star of brightestWithin(stars, index, target, labelRadius, selectedId)) {
-        yield { id: star.id, name: star.name, kind: starIdsWithBodies.has(star.id) ? 'System' : 'Star', x: star.x, y: star.y, z: star.z };
+        yield {
+          id: star.id,
+          name: star.name,
+          kind: starIdsWithBodies.has(star.id) ? 'System' : 'Star',
+          x: star.x,
+          y: star.y,
+          z: star.z,
+        };
       }
     };
-    const starLabels: LabeledPoint[] = isGalactic ? [] : this.spreadLabels(candidates(this.stars, this.starsByBrightness), camera, selectedId);
+    const starLabels: LabeledPoint[] = isGalactic
+      ? []
+      : this.spreadLabels(candidates(this.stars, this.starsByBrightness), camera, selectedId);
     const backdropLabels = isGalactic ? this.galacticLabels : this.deepSkyLabels;
-    const ringLabels = isGalactic || !this.display().grid ? [] : this.ringLabelsInTheClear(this.ringLabels(camera), camera, starLabels);
+    const ringLabels =
+      isGalactic || !this.display().grid
+        ? []
+        : this.ringLabelsInTheClear(this.ringLabels(camera), camera, starLabels);
     this.labelOverlay?.update([...starLabels, ...ringLabels, ...backdropLabels]);
   }
 
@@ -1089,7 +1282,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     return canvas.clientHeight > 0 ? canvas.clientWidth / canvas.clientHeight : 1;
   }
 
-  private spreadLabels(candidates: Iterable<LabeledPoint>, camera: SceneCamera, keepId: number | string | null): LabeledPoint[] {
+  private spreadLabels(
+    candidates: Iterable<LabeledPoint>,
+    camera: SceneCamera,
+    keepId: number | string | null,
+  ): LabeledPoint[] {
     const placed: THREE.Vector2[] = [];
     const chosen: LabeledPoint[] = [];
     const projected = new THREE.Vector3();
@@ -1098,7 +1295,13 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       projected.set(candidate.x, candidate.y, candidate.z).project(camera);
       const isKept = candidate.id === keepId;
       // Offscreen or behind the camera.
-      if (!isKept && (projected.z < -1 || projected.z > 1 || Math.abs(projected.x) > 1 || Math.abs(projected.y) > 1)) {
+      if (
+        !isKept &&
+        (projected.z < -1 ||
+          projected.z > 1 ||
+          Math.abs(projected.x) > 1 ||
+          Math.abs(projected.y) > 1)
+      ) {
         continue;
       }
 
@@ -1112,12 +1315,18 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       // is off the view. A crowded centre still gets right-hand labels — the separation test
       // above already keeps them apart.
       const crowdedRight = placed.some(
-        (other) => other.x > point.x && other.x - point.x < LABEL_REACH_NDC && Math.abs(other.y - point.y) < LABEL_MIN_SEPARATION_NDC
+        (other) =>
+          other.x > point.x &&
+          other.x - point.x < LABEL_REACH_NDC &&
+          Math.abs(other.y - point.y) < LABEL_MIN_SEPARATION_NDC,
       );
       // The body the card is about hangs its label on the left regardless: the leader line to
       // the card leaves its right, and would otherwise run straight through the text.
       const side: LabelSide =
-        candidate.id === this.cardBodyId || ((projected.x > LABEL_EDGE_NDC || crowdedRight) && projected.x > -LABEL_EDGE_NDC) ? 'left' : 'right';
+        candidate.id === this.cardBodyId ||
+        ((projected.x > LABEL_EDGE_NDC || crowdedRight) && projected.x > -LABEL_EDGE_NDC)
+          ? 'left'
+          : 'right';
 
       placed.push(point);
       chosen.push({ ...candidate, side });
@@ -1138,7 +1347,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    */
   private updateSelectionMark(camera: SceneCamera): void {
     const leader = this.leaderRef().nativeElement;
-    const member = this.systemGroup.visible && this.cardBodyId !== null ? this.systemRenderer?.members.find((candidate) => candidate.id === this.cardBodyId) : undefined;
+    const member =
+      this.systemGroup.visible && this.cardBodyId !== null
+        ? this.systemRenderer?.members.find((candidate) => candidate.id === this.cardBodyId)
+        : undefined;
     if (!member) {
       this.labelOverlay?.setSelection(null);
       leader.setAttribute('visibility', 'hidden');
@@ -1161,7 +1373,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     const fromY = ((1 - projected.y) / 2) * canvas.clientHeight;
     // The card is top-right: meet its left edge, at the body's height where the edge allows.
     const toX = cardRect.left - canvasRect.left;
-    const toY = Math.min(Math.max(fromY, cardRect.top - canvasRect.top + 12), cardRect.bottom - canvasRect.top - 12);
+    const toY = Math.min(
+      Math.max(fromY, cardRect.top - canvasRect.top + 12),
+      cardRect.bottom - canvasRect.top - 12,
+    );
     const dx = toX - fromX;
     const dy = toY - fromY;
     const length = Math.hypot(dx, dy);
@@ -1208,8 +1423,12 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
                 distancePc: neighbour.distancePc,
                 // A unit vector in the catalogue's parsec frame, which is the same direction in
                 // the system's AU frame: only the scale between the two differs.
-                direction: new THREE.Vector3(star.x - origin.x, star.y - origin.y, star.z - origin.z).normalize()
-              }
+                direction: new THREE.Vector3(
+                  star.x - origin.x,
+                  star.y - origin.y,
+                  star.z - origin.z,
+                ).normalize(),
+              },
             ]
           : [];
       });
@@ -1221,14 +1440,21 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     const panels = [
       this.dockRef()?.nativeElement.querySelector('[role="tabpanel"]'),
       this.dockRef()?.nativeElement.querySelector('[role="tablist"]')?.parentElement,
-      this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]')
+      this.objectCardRef()?.nativeElement.querySelector('[data-testid="object-card"]'),
     ];
     this.reserved = panels.flatMap((panel) => {
       if (!panel) {
         return [];
       }
       const box = panel.getBoundingClientRect();
-      return [{ left: box.left - canvas.left, top: box.top - canvas.top, right: box.right - canvas.left, bottom: box.bottom - canvas.top }];
+      return [
+        {
+          left: box.left - canvas.left,
+          top: box.top - canvas.top,
+          right: box.right - canvas.left,
+          bottom: box.bottom - canvas.top,
+        },
+      ];
     });
   }
 
@@ -1237,13 +1463,23 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    * moved along the ring where a HUD panel already holds that place. `null` where the whole
    * neighbourhood of that bearing is covered.
    */
-  private neighbourRingPosition(camera: SceneCamera, direction: THREE.Vector3): THREE.Vector3 | null {
-    const bearing = this.ringBearing.copy(direction).applyQuaternion(this.ringInverse.copy(camera.quaternion).invert());
+  private neighbourRingPosition(
+    camera: SceneCamera,
+    direction: THREE.Vector3,
+  ): THREE.Vector3 | null {
+    const bearing = this.ringBearing
+      .copy(direction)
+      .applyQuaternion(this.ringInverse.copy(camera.quaternion).invert());
     // A neighbour behind the camera keeps the side it is on, which is still the way to turn to
     // bring it round.
     const angle = Math.atan2(bearing.y, bearing.x);
     const canvas = this.canvasRef().nativeElement;
-    const placed = ringPlacement(angle, NEIGHBOUR_RING_NDC, { width: canvas.clientWidth, height: canvas.clientHeight }, this.reserved);
+    const placed = ringPlacement(
+      angle,
+      NEIGHBOUR_RING_NDC,
+      { width: canvas.clientWidth, height: canvas.clientHeight },
+      this.reserved,
+    );
     if (!placed) {
       return null;
     }
@@ -1254,7 +1490,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       // unprojected point is already where the name goes.
       return this.ringPoint.set(placed.x, placed.y, 0).unproject(camera);
     }
-    const along = this.ringPoint.set(placed.x, placed.y, 0.5).unproject(camera).sub(camera.position).normalize();
+    const along = this.ringPoint
+      .set(placed.x, placed.y, 0.5)
+      .unproject(camera)
+      .sub(camera.position)
+      .normalize();
     return along.multiplyScalar(NEIGHBOUR_DEPTH_AU).add(camera.position);
   }
 
@@ -1279,18 +1519,20 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       if (!position) {
         return [];
       }
-      return [{
-        // Namespaced, so a star's ghost and the same star's own label in the galaxy view are
-        // never the one DOM node being asked to be two different things.
-        id: `neighbour:${star.id}`,
-        name: star.name,
-        kind: formatParsecs(distancePc),
-        tone: 'ghost' as const,
-        selectStarId: star.id,
-        x: position.x,
-        y: position.y,
-        z: position.z
-      }];
+      return [
+        {
+          // Namespaced, so a star's ghost and the same star's own label in the galaxy view are
+          // never the one DOM node being asked to be two different things.
+          id: `neighbour:${star.id}`,
+          name: star.name,
+          kind: formatParsecs(distancePc),
+          tone: 'ghost' as const,
+          selectStarId: star.id,
+          x: position.x,
+          y: position.y,
+          z: position.z,
+        },
+      ];
     });
   }
 
@@ -1332,12 +1574,12 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     const records = new Map<string, { name: string; semiMajorAxisAu: number }>([
       ...this.bodies.map((body): [string, { name: string; semiMajorAxisAu: number }] => [
         body.id,
-        { name: body.name, semiMajorAxisAu: body.orbit.semiMajorAxisAu }
+        { name: body.name, semiMajorAxisAu: body.orbit.semiMajorAxisAu },
       ]),
       ...this.exoplanets.map((exoplanet): [string, { name: string; semiMajorAxisAu: number }] => [
         exoplanet.id,
-        { name: exoplanet.name, semiMajorAxisAu: exoplanet.orbit?.semiMajorAxisAu ?? 0 }
-      ])
+        { name: exoplanet.name, semiMajorAxisAu: exoplanet.orbit?.semiMajorAxisAu ?? 0 },
+      ]),
     ]);
     const position = new THREE.Vector3();
 
@@ -1351,18 +1593,25 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       points.push({
         id: member.id,
         name: record?.name ?? member.id,
-        kind: member.kind === 'exoplanet' ? 'Exoplanet' : member.kind === 'dwarf' ? 'Dwarf Planet' : 'Planet',
+        kind:
+          member.kind === 'exoplanet'
+            ? 'Exoplanet'
+            : member.kind === 'dwarf'
+              ? 'Dwarf Planet'
+              : 'Planet',
         semiMajorAxisAu: record?.semiMajorAxisAu ?? 0,
         x: position.x,
         y: position.y,
-        z: position.z
+        z: position.z,
       });
     }
 
     points.sort((a, b) => b.semiMajorAxisAu - a.semiMajorAxisAu);
     // Bodies first, so a neighbour's name never takes the space one of this system's own would
     // have had: `spreadLabels` keeps whichever candidate it reaches first.
-    this.labelOverlay?.update(this.spreadLabels([...points, ...this.neighbourLabels(camera)], camera, null));
+    this.labelOverlay?.update(
+      this.spreadLabels([...points, ...this.neighbourLabels(camera)], camera, null),
+    );
   }
 
   /** Refreshes the readout panel for whichever scale the view is currently at. */
@@ -1417,7 +1666,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    * so the plan is where a plan view starts, not a cage.
    */
   private applyProjection(plan: boolean): void {
-    if (!this.controls || !this.rig || this.engine.currentProjection === (plan ? 'orthographic' : 'perspective')) {
+    if (
+      !this.controls ||
+      !this.rig ||
+      this.engine.currentProjection === (plan ? 'orthographic' : 'perspective')
+    ) {
       return;
     }
     const camera = this.engine.getCamera();
@@ -1483,23 +1736,38 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     this.hudDate.set(this.time.rate() === 1 ? '' : this.time.date().toISOString().slice(0, 10));
 
     if (this.systemGroup.visible && star) {
-      const planetCount = this.bodies.filter((body) => body.systemStarId === star.id && !body.parentBodyId).length + this.exoplanets.filter((exoplanet) => exoplanet.hostStarId === star.id).length;
-      const moonCount = this.bodies.filter((body) => body.systemStarId === star.id && body.parentBodyId).length;
+      const planetCount =
+        this.bodies.filter((body) => body.systemStarId === star.id && !body.parentBodyId).length +
+        this.exoplanets.filter((exoplanet) => exoplanet.hostStarId === star.id).length;
+      const moonCount = this.bodies.filter(
+        (body) => body.systemStarId === star.id && body.parentBodyId,
+      ).length;
       const distancePc = Math.hypot(star.x, star.y, star.z);
       const luminosity = luminosityOf(star);
       this.hudEyebrow.set('System');
       this.hudTitle.set(star.name);
       this.hudSubtitle.set(star.spectralType ? `Spectral type ${star.spectralType}` : '');
       this.hudReadouts.set([
-        { label: 'Bodies', value: moonCount > 0 ? `${planetCount} + ${moonCount} moons` : `${planetCount}` },
+        {
+          label: 'Bodies',
+          value: moonCount > 0 ? `${planetCount} + ${moonCount} moons` : `${planetCount}`,
+        },
         // Suppressed for the Sun rather than printed as `0.00 pc`, which is arithmetically right
         // and reads as a bug: the distance from here to here is not a measurement.
         ...(distancePc > 0 ? [{ label: 'Distance', value: formatParsecs(distancePc) }] : []),
         { label: 'Magnitude', value: star.magnitude.toFixed(2) },
-        ...(luminosity !== null ? [{ label: 'Luminosity', value: formatLuminosity(luminosity), derived: true }] : [])
+        ...(luminosity !== null
+          ? [{ label: 'Luminosity', value: formatLuminosity(luminosity), derived: true }]
+          : []),
       ]);
       this.hudNote.set('Orbits propagated from published elements to the current date.');
-      this.hudRange.set(formatAu(this.engine.visibleHalfHeight(camera.position.distanceTo(this.controls?.target ?? GALAXY_OVERVIEW_TARGET)) / Math.tan((this.engine.getPerspectiveCamera().fov * Math.PI) / 360)));
+      this.hudRange.set(
+        formatAu(
+          this.engine.visibleHalfHeight(
+            camera.position.distanceTo(this.controls?.target ?? GALAXY_OVERVIEW_TARGET),
+          ) / Math.tan((this.engine.getPerspectiveCamera().fov * Math.PI) / 360),
+        ),
+      );
       this.hudScale.set(this.scaleBarFor(camera, 'AU'));
       return;
     }
@@ -1512,12 +1780,17 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       this.hudTitle.set('Milky Way');
       this.hudSubtitle.set('Barred spiral galaxy · our own');
       this.hudReadouts.set([
-        { label: 'Sun to centre', value: `${(SUN_GALACTOCENTRIC_RADIUS_PC / 1000).toFixed(2)} kpc` },
+        {
+          label: 'Sun to centre',
+          value: `${(SUN_GALACTOCENTRIC_RADIUS_PC / 1000).toFixed(2)} kpc`,
+        },
         { label: 'Arms modelled', value: `${MILKY_WAY_ARMS.length}` },
-        { label: 'Catalogued', value: `${this.stars.length} stars` }
+        { label: 'Catalogued', value: `${this.stars.length} stars` },
       ]);
       // Quotes the catalogue's own reach rather than a figure that has already been raised once.
-      this.hudNote.set(`Galactic structure is an illustrative model built on measured arm geometry — no catalogue holds the Galaxy’s stars. The ${this.stars.length} catalogued stars are real.`);
+      this.hudNote.set(
+        `Galactic structure is an illustrative model built on measured arm geometry — no catalogue holds the Galaxy’s stars. The ${this.stars.length} catalogued stars are real.`,
+      );
       return;
     }
 
@@ -1527,15 +1800,23 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     this.hudReadouts.set([
       // Both numbers, because they differ: the catalogue is what the map knows and the first is
       // what it draws. See `STAR_RENDER_BUDGET`.
-      { label: 'Stars', value: this.starField && this.starField.drawnCount < this.stars.length ? `${this.starField.drawnCount} / ${this.stars.length}` : `${this.stars.length}` },
+      {
+        label: 'Stars',
+        value:
+          this.starField && this.starField.drawnCount < this.stars.length
+            ? `${this.starField.drawnCount} / ${this.stars.length}`
+            : `${this.stars.length}`,
+      },
       // The radius Gaia is surveyed to, not the edge of the map: the Hipparcos stars Gaia places
       // further out are drawn where it places them.
       { label: 'Survey radius', value: `${SURVEY_EDGE_PC} pc` },
       { label: 'Exoplanets', value: `${this.exoplanets.length}` },
       // The one thing the field itself cannot show: which of those points can be flown into.
-      { label: 'Systems', value: `${this.enterableSystems}` }
+      { label: 'Systems', value: `${this.enterableSystems}` },
     ]);
-    this.hudNote.set('Positions from measured parallaxes. Grid marks the galactic plane through the Sun.');
+    this.hudNote.set(
+      'Positions from measured parallaxes. Grid marks the galactic plane through the Sun.',
+    );
   }
 
   /** Where the current press started, so a drag can be told apart from a click. */
@@ -1553,14 +1834,20 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     // star would launch a camera flight into its system.
     const pressedAt = this.pointerDownAt;
     this.pointerDownAt = null;
-    if (pressedAt && Math.hypot(event.clientX - pressedAt.x, event.clientY - pressedAt.y) > CLICK_DRAG_SLOP_PX) {
+    if (
+      pressedAt &&
+      Math.hypot(event.clientX - pressedAt.x, event.clientY - pressedAt.y) > CLICK_DRAG_SLOP_PX
+    ) {
       return;
     }
 
     const canvas = this.canvasRef().nativeElement;
     const camera = this.engine.getCamera();
     const rect = canvas.getBoundingClientRect();
-    const pointerNdc = new THREE.Vector2(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1);
+    const pointerNdc = new THREE.Vector2(
+      ((event.clientX - rect.left) / rect.width) * 2 - 1,
+      -((event.clientY - rect.top) / rect.height) * 2 + 1,
+    );
     this.raycaster.setFromCamera(pointerNdc, camera);
 
     if (this.currentStarId === null) {
@@ -1617,11 +1904,15 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     }
     const canvas = this.canvasRef().nativeElement;
     const rect = canvas.getBoundingClientRect();
-    const pointerNdc = new THREE.Vector2(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1);
+    const pointerNdc = new THREE.Vector2(
+      ((event.clientX - rect.left) / rect.width) * 2 - 1,
+      -((event.clientY - rect.top) / rect.height) * 2 + 1,
+    );
     this.raycaster.setFromCamera(pointerNdc, this.engine.getCamera());
 
     const [hit] = this.raycaster.intersectObjects(this.systemRenderer.pickableObjects);
-    const hoveredId = (hit ? this.systemRenderer.memberForObject(hit.object) : undefined)?.id ?? null;
+    const hoveredId =
+      (hit ? this.systemRenderer.memberForObject(hit.object) : undefined)?.id ?? null;
     if (hoveredId === this.hoveredBodyId) {
       return;
     }
@@ -1660,11 +1951,13 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
         }
         this.routePending.set(false);
         this.routeResult.set({
-          stars: route ? route.stars.map((id) => ({ id, name: this.starsById.get(id)?.name ?? `Star ${id}` })) : [],
+          stars: route
+            ? route.stars.map((id) => ({ id, name: this.starsById.get(id)?.name ?? `Star ${id}` }))
+            : [],
           totalPc: route?.totalPc ?? 0,
           neededRangePc,
           gaveUp,
-          least
+          least,
         });
         this.jumpLinks?.setRoute(route?.stars ?? [], (id) => this.starsById.get(id));
       },
@@ -1676,7 +1969,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
         // Released rather than left saying "Plotting…" with the button held, so it can be tried again.
         this.routePending.set(false);
         console.error('Route could not be plotted.', error);
-      }
+      },
     );
   }
 
@@ -1720,7 +2013,11 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     }
     const drawn = this.starField.drawnStars;
     const budget = this.jumpLinkBudget();
-    if (this.drawnJumpRangePc === rangePc && this.linkedStars === drawn && servesTheSame(this.linkedBudget, budget)) {
+    if (
+      this.drawnJumpRangePc === rangePc &&
+      this.linkedStars === drawn &&
+      servesTheSame(this.linkedBudget, budget)
+    ) {
       return;
     }
     this.drawnJumpRangePc = rangePc;
@@ -1742,7 +2039,7 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
           this.linkedStars = null;
           this.linkedBudget = undefined;
         }
-      }
+      },
     );
   }
 
@@ -1752,20 +2049,34 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
    */
   private jumpLinkBudget(): LinkBudget | undefined {
     // In the pixels the lines are drawn in, not in CSS pixels: a scaled or HiDPI screen draws more of them.
-    const heightPx = this.canvasRef().nativeElement.clientHeight * this.engine.getRenderer().getPixelRatio();
+    const heightPx =
+      this.canvasRef().nativeElement.clientHeight * this.engine.getRenderer().getPixelRatio();
     if (heightPx === 0) {
       return undefined;
     }
     const centre = this.controls?.target ?? GALAXY_OVERVIEW_TARGET;
-    const halfHeight = this.engine.visibleHalfHeight(this.engine.getCamera().position.distanceTo(centre));
-    return { centre: { x: centre.x, y: centre.y, z: centre.z }, lengthPc: (JUMP_LINK_PIXEL_BUDGET * 2 * halfHeight) / heightPx };
+    const halfHeight = this.engine.visibleHalfHeight(
+      this.engine.getCamera().position.distanceTo(centre),
+    );
+    return {
+      centre: { x: centre.x, y: centre.y, z: centre.z },
+      lengthPc: (JUMP_LINK_PIXEL_BUDGET * 2 * halfHeight) / heightPx,
+    };
   }
 
   /** A pinned body wins over a hovered one, so the card does not change under the pointer. */
   private refreshObjectCard(): void {
     const id = this.pinnedBodyId ?? this.hoveredBodyId;
     this.cardBodyId = id;
-    this.objectCard.set(id === null ? undefined : buildBodyViewModel(id, { bodies: this.bodies, exoplanets: this.exoplanets, stars: this.stars }));
+    this.objectCard.set(
+      id === null
+        ? undefined
+        : buildBodyViewModel(id, {
+            bodies: this.bodies,
+            exoplanets: this.exoplanets,
+            stars: this.stars,
+          }),
+    );
   }
 
   /** Clears the card and everything that would bring it straight back. */
@@ -1818,7 +2129,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       this.enterSystem(selectedStarId, () => this.finishTransition());
     } else {
       // Star-to-star: exit the current system (short outward hop) then fly into the new one.
-      this.exitToGalaxy(() => this.enterSystem(selectedStarId, () => this.finishTransition()), true);
+      this.exitToGalaxy(
+        () => this.enterSystem(selectedStarId, () => this.finishTransition()),
+        true,
+      );
     }
   }
 
@@ -1849,13 +2163,23 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       direction.set(0, 0.3, 1).normalize();
     }
 
-    const approachPosition = starPc.clone().add(direction.clone().multiplyScalar(GALAXY_APPROACH_DISTANCE_PC));
-    this.rig.flyTo({ position: approachPosition, target: starPc }, APPROACH_DURATION_SECONDS, () => {
-      this.swapToSystemSpace(star, direction, onComplete);
-    });
+    const approachPosition = starPc
+      .clone()
+      .add(direction.clone().multiplyScalar(GALAXY_APPROACH_DISTANCE_PC));
+    this.rig.flyTo(
+      { position: approachPosition, target: starPc },
+      APPROACH_DURATION_SECONDS,
+      () => {
+        this.swapToSystemSpace(star, direction, onComplete);
+      },
+    );
   }
 
-  private swapToSystemSpace(star: StarRecord, direction: THREE.Vector3, onComplete: () => void): void {
+  private swapToSystemSpace(
+    star: StarRecord,
+    direction: THREE.Vector3,
+    onComplete: () => void,
+  ): void {
     const camera = this.engine.getCamera();
 
     this.systemRenderer?.dispose();
@@ -1865,14 +2189,21 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     }
 
     const systemBodies = this.bodies.filter((body) => body.systemStarId === star.id);
-    const systemExoplanets = this.exoplanets.filter((exoplanet) => exoplanet.hostStarId === star.id);
+    const systemExoplanets = this.exoplanets.filter(
+      (exoplanet) => exoplanet.hostStarId === star.id,
+    );
     // The star's own position is the line of sight to it, which is the plane the archive
     // measures exoplanet inclinations against. The Sun sits at the origin and has no
     // exoplanets, so it has no meaningful direction and the renderer falls back.
     // The star's luminosity, derived from its own catalogued magnitude and distance, is what
     // decides how hot each body in the system is — and so what each of them looks like.
     const hostLuminosity = luminosityOf(star);
-    this.systemRenderer = new SystemOrbitsRenderer(systemBodies, systemExoplanets, { x: star.x, y: star.y, z: star.z }, hostLuminosity);
+    this.systemRenderer = new SystemOrbitsRenderer(
+      systemBodies,
+      systemExoplanets,
+      { x: star.x, y: star.y, z: star.z },
+      hostLuminosity,
+    );
     this.systemGroup.add(this.systemRenderer.object);
     this.applyDisplay(this.display());
 
@@ -1884,11 +2215,17 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     // the orthographic frustum is then sized from, so both projections show the same extent.
     const framingCamera = this.engine.getPerspectiveCamera();
     const viewport = { fovDegrees: framingCamera.fov, aspect: framingCamera.aspect };
-    const framingDistance = systemFramingDistanceAu(this.systemRenderer.gridOuterRadiusAu, viewport);
+    const framingDistance = systemFramingDistanceAu(
+      this.systemRenderer.gridOuterRadiusAu,
+      viewport,
+    );
 
     // The Sun at its own radius; every other star sized against its innermost orbit, which is all
     // the catalogue supports, and which at least never lets it swallow its own planets.
-    const starRadiusAu = star.id === SOL_STAR_ID ? SUN_RADIUS_AU : starMarkerRadiusAu(this.systemRenderer.minTopLevelSemiMajorAxisAu);
+    const starRadiusAu =
+      star.id === SOL_STAR_ID
+        ? SUN_RADIUS_AU
+        : starMarkerRadiusAu(this.systemRenderer.minTopLevelSemiMajorAxisAu);
     this.starMarkerGeometry?.dispose();
     this.starMarkerGeometry = new THREE.SphereGeometry(starRadiusAu, 24, 16);
 
@@ -1926,19 +2263,29 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     this.controls!.maxDistance = SYSTEM_MAX_DISTANCE_AU;
 
     this.resetZoom();
-    this.rig!.setImmediate({ position: direction.clone().multiplyScalar(SYSTEM_ENTRY_DISTANCE_AU), target: new THREE.Vector3(0, 0, 0) });
+    this.rig!.setImmediate({
+      position: direction.clone().multiplyScalar(SYSTEM_ENTRY_DISTANCE_AU),
+      target: new THREE.Vector3(0, 0, 0),
+    });
 
     // Arrives along whichever direction the approach came from, then swings round to look down
     // on this system's own orbital plane as it settles — so the swap stays continuous but the
     // system is not presented edge-on. See `systemViewDirection`.
     const viewDirection = systemViewDirection(this.systemRenderer.referenceFrame);
 
-    this.rig!.flyTo({ position: viewDirection.multiplyScalar(framingDistance), target: new THREE.Vector3(0, 0, 0) }, SETTLE_DURATION_SECONDS, () => {
-      this.currentStarId = star.id;
-      this.resolveNeighbours();
-      this.navigationStore.setViewLevel('system');
-      onComplete();
-    });
+    this.rig!.flyTo(
+      {
+        position: viewDirection.multiplyScalar(framingDistance),
+        target: new THREE.Vector3(0, 0, 0),
+      },
+      SETTLE_DURATION_SECONDS,
+      () => {
+        this.currentStarId = star.id;
+        this.resolveNeighbours();
+        this.navigationStore.setViewLevel('system');
+        onComplete();
+      },
+    );
   }
 
   private exitToGalaxy(onComplete: () => void, isSwitchingSystems = false): void {
@@ -1954,15 +2301,29 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     }
     const exitingStarId = this.currentStarId;
 
-    this.rig.flyTo({ position: direction.clone().multiplyScalar(SYSTEM_EXIT_DISTANCE_AU), target: new THREE.Vector3(0, 0, 0) }, EXIT_DURATION_SECONDS, () => {
-      this.swapToGalaxySpace(exitingStarId, direction, isSwitchingSystems, onComplete);
-    });
+    this.rig.flyTo(
+      {
+        position: direction.clone().multiplyScalar(SYSTEM_EXIT_DISTANCE_AU),
+        target: new THREE.Vector3(0, 0, 0),
+      },
+      EXIT_DURATION_SECONDS,
+      () => {
+        this.swapToGalaxySpace(exitingStarId, direction, isSwitchingSystems, onComplete);
+      },
+    );
   }
 
-  private swapToGalaxySpace(exitingStarId: number, direction: THREE.Vector3, isSwitchingSystems: boolean, onComplete: () => void): void {
+  private swapToGalaxySpace(
+    exitingStarId: number,
+    direction: THREE.Vector3,
+    isSwitchingSystems: boolean,
+    onComplete: () => void,
+  ): void {
     const camera = this.engine.getCamera();
     const star = this.starsById.get(exitingStarId);
-    const starPc = star ? new THREE.Vector3(star.x, star.y, star.z) : GALAXY_OVERVIEW_TARGET.clone();
+    const starPc = star
+      ? new THREE.Vector3(star.x, star.y, star.z)
+      : GALAXY_OVERVIEW_TARGET.clone();
 
     this.systemGroup.visible = false;
     this.galaxyGroup.visible = true;
@@ -1981,7 +2342,10 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
     this.controls!.maxDistance = GALAXY_MAX_DISTANCE_PC;
 
     this.resetZoom();
-    this.rig!.setImmediate({ position: starPc.clone().add(direction.clone().multiplyScalar(GALAXY_APPROACH_DISTANCE_PC)), target: starPc });
+    this.rig!.setImmediate({
+      position: starPc.clone().add(direction.clone().multiplyScalar(GALAXY_APPROACH_DISTANCE_PC)),
+      target: starPc,
+    });
 
     if (isSwitchingSystems) {
       this.currentStarId = null;
@@ -1990,12 +2354,16 @@ export class GalaxySystemSceneComponent implements AfterViewInit, OnDestroy {
       return;
     }
 
-    this.rig!.flyTo({ position: GALAXY_OVERVIEW_POSITION.clone(), target: GALAXY_OVERVIEW_TARGET.clone() }, RETURN_DURATION_SECONDS, () => {
-      this.currentStarId = null;
-      this.resolveNeighbours();
-      this.navigationStore.setViewLevel('galaxy');
-      onComplete();
-    });
+    this.rig!.flyTo(
+      { position: GALAXY_OVERVIEW_POSITION.clone(), target: GALAXY_OVERVIEW_TARGET.clone() },
+      RETURN_DURATION_SECONDS,
+      () => {
+        this.currentStarId = null;
+        this.resolveNeighbours();
+        this.navigationStore.setViewLevel('galaxy');
+        onComplete();
+      },
+    );
   }
 
   private observeResize(canvas: HTMLCanvasElement): void {
diff --git a/src/app/features/galaxy-system/system-orbits-renderer.ts b/src/app/features/galaxy-system/system-orbits-renderer.ts
index 3e05190..11ea1e4 100644
--- a/src/app/features/galaxy-system/system-orbits-renderer.ts
+++ b/src/app/features/galaxy-system/system-orbits-renderer.ts
@@ -3,7 +3,8 @@ import * as THREE from 'three/webgpu';
 import { appearanceForBody, appearanceForExoplanet } from '../../shared/astro/body-appearance';
 import { gmForParent } from '../../shared/astro/constants';
 import { PlanetAppearance } from '../../shared/astro/planet-appearance';
-import { MARKER_TEXTURE_HEIGHT, MARKER_TEXTURE_WIDTH, planetTexture } from '../../shared/rendering/procedural-planet-texture';
+import { planetTexture } from '../../shared/rendering/procedural-planet-texture';
+import { bodyTexturePath, loadCachedTexture } from '../../shared/rendering/texture-catalog';
 import { isPropagatableOrbit, orbitEllipsePoints, propagateOrbit, resolveGravitationalParameter, resolveOrbitalElements } from '../../shared/astro/kepler';
 import { CartesianCoordinates, OBLIQUITY_J2000_DEG } from '../../shared/astro/coordinates';
 import { BodyRecord, OrbitalElements } from '../../shared/models/body.model';
@@ -121,21 +122,46 @@ function buildOrbitLine(elements: OrbitalElements, kind: SystemMemberKind, frame
 }
 
 /**
- * A marker sphere, surfaced with the body's own derived appearance rather than a flat category
- * colour — so a system reads as a set of distinct worlds at a glance, and the colour of each is
- * a consequence of its measurements rather than of which list it came from.
+ * A marker sphere, surfaced with the body's own photograph where one has ever been taken, and
+ * with a texture derived from its measurements where none has — and lit by its star either way,
+ * so a world shows the day and night it actually has.
  *
- * The texture is tiny (see `MARKER_TEXTURE_WIDTH`): a marker is a few pixels across, so what
- * survives is essentially its average colour, and generating it costs well under a millisecond.
+ * The photographs were already in the repository, used only by the detail page: the system view
+ * drew every body from a 32 by 16 pixel procedural texture instead, which at a few pixels across
+ * was indistinguishable from its average colour and, once the camera closed in, was a blur. A
+ * marker can now fill the frame, so it takes the real image at the size the detail page uses.
  */
-function buildMarker(kind: SystemMemberKind, radiusKm: number | undefined, appearance: PlanetAppearance | undefined): THREE.Mesh {
-  const geometry = new THREE.SphereGeometry(bodyMarkerRadiusAu(radiusKm), 16, 12);
-  const material = appearance
-    ? new THREE.MeshBasicMaterial({ map: planetTexture(appearance, { width: MARKER_TEXTURE_WIDTH, height: MARKER_TEXTURE_HEIGHT }) })
-    : new THREE.MeshBasicMaterial({ color: colorForKind(kind) });
+function buildMarker(id: string | undefined, kind: SystemMemberKind, radiusKm: number | undefined, appearance: PlanetAppearance | undefined): THREE.Mesh {
+  // 32 by 24 rather than 16 by 12: at true scale a body is drawn as small as a pixel and as large
+  // as the screen, and the silhouette of the old sphere was visibly faceted at the near end.
+  const geometry = new THREE.SphereGeometry(bodyMarkerRadiusAu(radiusKm), 32, 24);
+  const photograph = id ? bodyTexturePath(id) : undefined;
+  const map = photograph ? loadCachedTexture(photograph) : appearance ? planetTexture(appearance) : undefined;
+  const material = new THREE.MeshStandardMaterial({
+    map,
+    color: map ? 0xffffff : colorForKind(kind),
+    roughness: 1,
+    metalness: 0
+  });
   return new THREE.Mesh(geometry, material);
 }
 
+/**
+ * The star's own light, at the centre of the system it lights.
+ *
+ * `decay` is 0, which is not what light does: a point source falls off with the square of the
+ * distance, and under that law Neptune receives a thousandth of what Mercury does and reads as
+ * black. The map is a set of worlds to look at rather than a light meter, so each is lit as a
+ * photograph of it would be — the same concession the pixel floor makes for size. What the light
+ * does carry truthfully is *direction*: every body shows its day side toward the star and its
+ * night side away from it, and the terminator falls where it really falls.
+ */
+function starLight(): THREE.PointLight {
+  const light = new THREE.PointLight(0xfff4e0, 2.2, 0, 0);
+  light.position.set(0, 0, 0);
+  return light;
+}
+
 
 /** Local axis a sphere is built around, and what the spin is applied about. */
 const SPIN_AXIS = new THREE.Vector3(0, 1, 0);
@@ -336,6 +362,9 @@ export class SystemOrbitsRenderer {
 
       this.object.add(this.grid.object, this.tethers.object);
     }
+    // The star lights its own system. The star marker itself is unlit — it is the source, not a
+    // surface — so nothing here changes how it is drawn.
+    this.object.add(starLight());
   }
 
   /** Recomputes every marker's position for the given Julian date. Call once per tick. */
@@ -418,7 +447,7 @@ export class SystemOrbitsRenderer {
     rotation?: { periodHours?: number; obliquityDeg?: number }
   ): TrackedTopLevelBody {
     const orbitLine = buildOrbitLine(elements, kind, frame);
-    const marker = buildMarker(kind, radiusKm, appearance);
+    const marker = buildMarker(id, kind, radiusKm, appearance);
     this.object.add(orbitLine, marker);
     this.trackDisposable(orbitLine.geometry, orbitLine.material as THREE.Material);
     this.trackDisposable(marker.geometry, marker.material as THREE.Material);
@@ -442,7 +471,7 @@ export class SystemOrbitsRenderer {
     const orbitLine = buildOrbitLine(elements, 'moon', frame);
     // A moon's own orbit is the thing it must not swallow: drawn at the system's exaggeration it
     // is the same size as its planet, and every moon here orbits inside one.
-    const marker = buildMarker('moon', radiusKm, appearance);
+    const marker = buildMarker(id, 'moon', radiusKm, appearance);
     pivot.add(orbitLine, marker);
     this.object.add(pivot);
     this.trackDisposable(orbitLine.geometry, orbitLine.material as THREE.Material);
diff --git a/src/app/features/hud/hud-dock.component.ts b/src/app/features/hud/hud-dock.component.ts
index 8825af2..0062bb3 100644
--- a/src/app/features/hud/hud-dock.component.ts
+++ b/src/app/features/hud/hud-dock.component.ts
@@ -1,10 +1,27 @@
-import { ChangeDetectionStrategy, Component, computed, ElementRef, HostListener, inject, input, OnInit, output, signal, viewChild } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  HostListener,
+  inject,
+  input,
+  OnInit,
+  output,
+  signal,
+  viewChild,
+} from '@angular/core';
 
 import { Bookmark, BookmarksStore } from '../../shared/state/bookmarks.store';
 import { TIME_RATES, TimeStore } from '../../shared/state/time.store';
 import { BookmarkIconComponent } from '../../shared/ui/bookmark-icon.component';
 import { SearchComponent } from '../search/search.component';
-import { RouteRequest, RouteResult, RoutesPanelComponent, RouteStarOption } from './routes-panel.component';
+import {
+  RouteRequest,
+  RouteResult,
+  RoutesPanelComponent,
+  RouteStarOption,
+} from './routes-panel.component';
 
 export interface HudReadout {
   readonly label: string;
@@ -32,7 +49,16 @@ export interface HudDisplay {
   readonly plan: boolean;
 }
 
-export const DEFAULT_HUD_DISPLAY: HudDisplay = { labels: true, orbits: true, grid: true, deepSky: true, sky: true, systems: true, jumpLinks: false, plan: false };
+export const DEFAULT_HUD_DISPLAY: HudDisplay = {
+  labels: true,
+  orbits: true,
+  grid: true,
+  deepSky: true,
+  sky: true,
+  systems: true,
+  jumpLinks: false,
+  plan: false,
+};
 
 const DISPLAY_LAYERS: readonly { key: keyof HudDisplay; label: string }[] = [
   { key: 'labels', label: 'Labels' },
@@ -42,17 +68,26 @@ const DISPLAY_LAYERS: readonly { key: keyof HudDisplay; label: string }[] = [
   { key: 'sky', label: 'Sky' },
   { key: 'systems', label: 'Systems' },
   { key: 'jumpLinks', label: 'Jump links' },
-  { key: 'plan', label: 'Plan view' }
+  { key: 'plan', label: 'Plan view' },
 ];
 
 export type DockTab = 'search' | 'readout' | 'routes' | 'bookmarks' | 'display';
 
-const TAB_LABELS: Record<DockTab, string> = { search: 'Search', readout: 'Readout', routes: 'Routes', bookmarks: 'Bookmarks', display: 'Display' };
+const TAB_LABELS: Record<DockTab, string> = {
+  search: 'Search',
+  readout: 'Readout',
+  routes: 'Routes',
+  bookmarks: 'Bookmarks',
+  display: 'Display',
+};
 
 /** Tailwind's `sm` breakpoint: below it the dock is a bare tab strip and its panel is a sheet. */
 const WIDE_VIEWPORT = '(min-width: 640px)';
 /** One live query, read on every pointer-down, rather than a new MediaQueryList per read. */
-const wideViewportQuery = typeof window !== 'undefined' && typeof window.matchMedia === 'function' ? window.matchMedia(WIDE_VIEWPORT) : null;
+const wideViewportQuery =
+  typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+    ? window.matchMedia(WIDE_VIEWPORT)
+    : null;
 
 function isWideViewport(): boolean {
   return wideViewportQuery?.matches ?? true;
@@ -75,7 +110,10 @@ function isWideViewport(): boolean {
   selector: 'app-hud-dock',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [BookmarkIconComponent, RoutesPanelComponent, SearchComponent],
-  host: { class: 'pointer-events-none fixed inset-x-2 bottom-2 z-20 block font-body sm:inset-x-6 sm:bottom-6' },
+  host: {
+    class:
+      'pointer-events-none fixed inset-x-2 bottom-2 z-20 block font-body sm:inset-x-6 sm:bottom-6',
+  },
   template: `
     <!-- The column is transparent to the pointer and each surface in it opts back in: it is as
          wide as the strip and as tall as the open panel, so a solid one would swallow every
@@ -86,29 +124,55 @@ function isWideViewport(): boolean {
              locking on, once per switch, never per keystroke. -->
         @switch (tab) {
           @case ('search') {
-            <section id="dock-panel-search" role="tabpanel" aria-labelledby="dock-tab-search" class="hud-acquire pointer-events-auto mb-2 w-full max-w-xl">
+            <section
+              id="dock-panel-search"
+              role="tabpanel"
+              aria-labelledby="dock-tab-search"
+              class="hud-acquire pointer-events-auto mb-2 w-full max-w-xl"
+            >
               <app-search (picked)="onPicked()" />
             </section>
           }
           @case ('readout') {
-            <section id="dock-panel-readout" role="tabpanel" aria-labelledby="dock-tab-readout" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg px-4 py-3">
+            <section
+              id="dock-panel-readout"
+              role="tabpanel"
+              aria-labelledby="dock-tab-readout"
+              class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg px-4 py-3"
+            >
               <p class="type-label text-muted">{{ eyebrow() }}</p>
               <div class="mt-1 flex items-start gap-2">
-                <p data-testid="hud-title" class="min-w-0 flex-1 text-lg font-bold tracking-[0.04em] text-text uppercase">{{ title() }}</p>
+                <p
+                  data-testid="hud-title"
+                  class="min-w-0 flex-1 text-lg font-bold tracking-[0.04em] text-text uppercase"
+                >
+                  {{ title() }}
+                </p>
                 <!-- Against null, not against falsiness: the Sun's catalogue id is 0, and a
                      truthiness test is what would quietly make the Solar System the one
                      system nobody could keep. -->
                 @if (keepableStarId() !== null) {
                   <button
-          type="button"
-          [attr.aria-label]="(bookmarks.has('star', keepableStarId()!) ? 'Forget ' : 'Keep ') + title()"
-          [attr.aria-pressed]="bookmarks.has('star', keepableStarId()!)"
-          (click)="bookmarks.toggle({ kind: 'star', id: keepableStarId()!, name: title() })"
-          class="shrink-0 p-1 transition-colors focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
-          [class]="bookmarks.has('star', keepableStarId()!) ? 'text-accent' : 'text-muted hover:text-accent'"
-        >
-          <app-bookmark-icon class="h-3.5 w-3.5" [kept]="bookmarks.has('star', keepableStarId()!)" />
-        </button>
+                    type="button"
+                    [attr.aria-label]="
+                      (bookmarks.has('star', keepableStarId()!) ? 'Forget ' : 'Keep ') + title()
+                    "
+                    [attr.aria-pressed]="bookmarks.has('star', keepableStarId()!)"
+                    (click)="
+                      bookmarks.toggle({ kind: 'star', id: keepableStarId()!, name: title() })
+                    "
+                    class="shrink-0 p-1 transition-colors focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
+                    [class]="
+                      bookmarks.has('star', keepableStarId()!)
+                        ? 'text-accent'
+                        : 'text-muted hover:text-accent'
+                    "
+                  >
+                    <app-bookmark-icon
+                      class="h-3.5 w-3.5"
+                      [kept]="bookmarks.has('star', keepableStarId()!)"
+                    />
+                  </button>
                 }
               </div>
               @if (subtitle()) {
@@ -118,30 +182,54 @@ function isWideViewport(): boolean {
                 <dl class="mt-3 flex flex-wrap gap-x-6 gap-y-1">
                   @for (readout of readouts(); track readout.label) {
                     <div>
-                      <dt class="type-label text-muted">{{ readout.label }}@if (readout.derived) {<span class="text-accent/80" aria-hidden="true">*</span>}</dt>
+                      <dt class="type-label text-muted">
+                        {{ readout.label }}
+                        @if (readout.derived) {
+                          <span class="text-accent/80" aria-hidden="true">*</span>
+                        }
+                      </dt>
                       <dd class="mt-0.5 text-sm text-text tabular-nums">{{ readout.value }}</dd>
                     </div>
                   }
                 </dl>
               }
               @if (note() || hasDerived()) {
-                <p class="mt-3 border-t border-border/40 pt-2 text-[10px] leading-relaxed text-muted">@if (hasDerived()) {<span class="text-accent/80">*</span> Derived, not catalogued. }{{ note() }}</p>
+                <p
+                  class="mt-3 border-t border-border/40 pt-2 text-[10px] leading-relaxed text-muted"
+                >
+                  @if (hasDerived()) {
+                    <span class="text-accent/80">*</span> Derived, not catalogued.
+                  }
+                  {{ note() }}
+                </p>
               }
             </section>
           }
           @case ('bookmarks') {
-            <section id="dock-panel-bookmarks" role="tabpanel" aria-labelledby="dock-tab-bookmarks" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg">
+            <section
+              id="dock-panel-bookmarks"
+              role="tabpanel"
+              aria-labelledby="dock-tab-bookmarks"
+              class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg"
+            >
               @if (bookmarks.bookmarks().length) {
                 <ul class="max-h-64 divide-y divide-border/25 overflow-y-auto">
-                  @for (bookmark of bookmarks.bookmarks(); track bookmark.kind + ':' + bookmark.id) {
+                  @for (
+                    bookmark of bookmarks.bookmarks();
+                    track bookmark.kind + ':' + bookmark.id
+                  ) {
                     <li class="flex items-stretch">
                       <button
                         type="button"
                         (click)="onBookmarkChosen(bookmark)"
                         class="flex min-w-0 flex-1 items-baseline gap-3 px-3 py-2 text-left transition-colors hover:bg-accent/8 focus-visible:bg-accent/12 focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
                       >
-                        <span class="min-w-0 flex-1 truncate text-sm text-text">{{ bookmark.name }}</span>
-                        <span class="type-label shrink-0 text-muted">{{ bookmark.kind === 'star' ? 'System' : 'Body' }}</span>
+                        <span class="min-w-0 flex-1 truncate text-sm text-text">{{
+                          bookmark.name
+                        }}</span>
+                        <span class="type-label shrink-0 text-muted">{{
+                          bookmark.kind === 'star' ? 'System' : 'Body'
+                        }}</span>
                       </button>
                       <button
                         type="button"
@@ -149,7 +237,15 @@ function isWideViewport(): boolean {
                         (click)="bookmarks.remove(bookmark.kind, bookmark.id)"
                         class="shrink-0 border-l border-border/25 px-3 text-muted transition-colors hover:bg-accent/8 hover:text-accent focus-visible:text-accent focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
                       >
-                        <svg class="h-3 w-3" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
+                        <svg
+                          class="h-3 w-3"
+                          viewBox="0 0 14 14"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          stroke-linecap="round"
+                          aria-hidden="true"
+                        >
                           <path d="M3 3l8 8M11 3l-8 8" />
                         </svg>
                       </button>
@@ -158,13 +254,20 @@ function isWideViewport(): boolean {
                 </ul>
               } @else {
                 <p class="px-3 py-3 text-sm text-muted">
-                  Nothing kept yet. The <app-bookmark-icon class="inline-block h-3.5 w-3.5 -mb-0.5 text-accent" /> on a readout or a body keeps it here, in this browser.
+                  Nothing kept yet. The
+                  <app-bookmark-icon class="inline-block h-3.5 w-3.5 -mb-0.5 text-accent" /> on a
+                  readout or a body keeps it here, in this browser.
                 </p>
               }
             </section>
           }
           @case ('display') {
-            <section id="dock-panel-display" role="tabpanel" aria-labelledby="dock-tab-display" class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg px-4 py-3">
+            <section
+              id="dock-panel-display"
+              role="tabpanel"
+              aria-labelledby="dock-tab-display"
+              class="hud-acquire hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-lg px-4 py-3"
+            >
               <p class="type-label text-muted">Layers</p>
               <div class="mt-2 flex flex-wrap gap-2">
                 @for (layer of layers; track layer.key) {
@@ -173,10 +276,18 @@ function isWideViewport(): boolean {
                     [attr.aria-pressed]="isOn(layer.key)"
                     (click)="toggleLayer(layer.key)"
                     class="type-label flex items-center gap-2 border px-3 py-1.5 transition-colors focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent"
-                    [class]="isOn(layer.key) ? 'border-accent/60 bg-accent/12 text-accent hover:bg-accent/18' : 'border-border/60 text-muted hover:border-border hover:text-text'"
+                    [class]="
+                      isOn(layer.key)
+                        ? 'border-accent/60 bg-accent/12 text-accent hover:bg-accent/18'
+                        : 'border-border/60 text-muted hover:border-border hover:text-text'
+                    "
                   >
                     <!-- The state mark: a filled tick when the layer is drawn, hollow when it is not. -->
-                    <span aria-hidden="true" class="h-1.5 w-1.5 border border-current" [class.bg-current]="isOn(layer.key)"></span>
+                    <span
+                      aria-hidden="true"
+                      class="h-1.5 w-1.5 border border-current"
+                      [class.bg-current]="isOn(layer.key)"
+                    ></span>
                     {{ layer.label }}
                   </button>
                 }
@@ -187,11 +298,19 @@ function isWideViewport(): boolean {
               <p class="type-label mt-4 text-muted">Clock</p>
               <!-- Radios rather than buttons: the rates are one-of-four, and the native control
                    carries that to a screen reader and to the arrow keys without any script. -->
-              <div class="mt-2 flex flex-wrap items-center gap-2" role="radiogroup" aria-label="Clock rate">
+              <div
+                class="mt-2 flex flex-wrap items-center gap-2"
+                role="radiogroup"
+                aria-label="Clock rate"
+              >
                 @for (rate of timeRates; track rate.secondsPerSecond) {
                   <label
                     class="type-label cursor-pointer border px-3 py-1.5 transition-colors has-[:focus-visible]:outline has-[:focus-visible]:outline-1 has-[:focus-visible]:-outline-offset-1 has-[:focus-visible]:outline-accent"
-                    [class]="time.rate() === rate.secondsPerSecond ? 'border-accent/60 bg-accent/12 text-accent hover:bg-accent/18' : 'border-border/60 text-muted hover:border-border hover:text-text'"
+                    [class]="
+                      time.rate() === rate.secondsPerSecond
+                        ? 'border-accent/60 bg-accent/12 text-accent hover:bg-accent/18'
+                        : 'border-border/60 text-muted hover:border-border hover:text-text'
+                    "
                   >
                     <input
                       type="radio"
@@ -224,7 +343,13 @@ function isWideViewport(): boolean {
            back with what it had, so it is not acquiring anything — and for the 380 ms the wipe
            runs, its clip path swallows clicks on the suggestions it just brought back. -->
       @if (routing()) {
-        <section id="dock-panel-routes" role="tabpanel" aria-labelledby="dock-tab-routes" [hidden]="activeTab() !== 'routes'" class="hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-xl px-4 py-3">
+        <section
+          id="dock-panel-routes"
+          role="tabpanel"
+          aria-labelledby="dock-tab-routes"
+          [hidden]="activeTab() !== 'routes'"
+          class="hud-brackets hud-surface pointer-events-auto mb-2 w-full max-w-xl px-4 py-3"
+        >
           <app-routes-panel
             [result]="routeResult()"
             [pending]="routePending()"
@@ -249,7 +374,11 @@ function isWideViewport(): boolean {
               [attr.aria-controls]="activeTab() === tab ? 'dock-panel-' + tab : null"
               (click)="toggleTab(tab)"
               class="type-eyebrow px-3 py-2 transition-colors focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-accent sm:px-4"
-              [class]="activeTab() === tab ? 'bg-accent/15 text-accent' : 'text-muted hover:bg-accent/8 hover:text-accent'"
+              [class]="
+                activeTab() === tab
+                  ? 'bg-accent/15 text-accent'
+                  : 'text-muted hover:bg-accent/8 hover:text-accent'
+              "
             >
               {{ tabLabel(tab) }}
             </button>
@@ -258,20 +387,26 @@ function isWideViewport(): boolean {
         <!-- Only while the clock is running faster than the world: at real time the date is
              today's, which the reader's own machine already says. -->
         @if (date()) {
-          <p class="ml-auto flex items-baseline gap-2 border-l border-border/40 px-3 py-2 sm:px-4" data-testid="hud-date">
+          <p
+            class="ml-auto flex items-baseline gap-2 border-l border-border/40 px-3 py-2 sm:px-4"
+            data-testid="hud-date"
+          >
             <span class="type-label text-muted">Date</span>
             <span class="text-sm text-accent tabular-nums">{{ date() }}</span>
           </p>
         }
         @if (range()) {
-          <p class="flex items-baseline gap-2 border-l border-border/40 px-3 py-2 sm:px-4" [class.ml-auto]="!date()">
+          <p
+            class="flex items-baseline gap-2 border-l border-border/40 px-3 py-2 sm:px-4"
+            [class.ml-auto]="!date()"
+          >
             <span class="type-label text-muted">Range</span>
             <span class="text-sm text-accent tabular-nums">{{ range() }}</span>
           </p>
         }
       </div>
     </div>
-  `
+  `,
 })
 export class HudDockComponent implements OnInit {
   /** Readout panel contents. An empty title means there is nothing to read out, and no tab for it. */
@@ -315,7 +450,7 @@ export class HudDockComponent implements OnInit {
     // Always offered, even with nothing in it: it is the only place that says the map can keep
     // anything at all, and a tab that appears once you already know is a tab that never taught.
     'bookmarks',
-    ...(this.display() ? (['display'] as const) : [])
+    ...(this.display() ? (['display'] as const) : []),
   ]);
 
   readonly activeTab = signal<DockTab | null>(null);
@@ -377,7 +512,10 @@ export class HudDockComponent implements OnInit {
       return;
     }
     const target = event.target as HTMLElement | null;
-    if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+    if (
+      target &&
+      (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+    ) {
       return;
     }
     event.preventDefault();
@@ -389,7 +527,11 @@ export class HudDockComponent implements OnInit {
   /** On a narrow viewport the panel is a sheet over the scene: tapping the scene folds it away. */
   @HostListener('document:pointerdown', ['$event'])
   onDocumentPointerDown(event: PointerEvent): void {
-    if (this.activeTab() && !isWideViewport() && !this.host.nativeElement.contains(event.target as Node)) {
+    if (
+      this.activeTab() &&
+      !isWideViewport() &&
+      !this.host.nativeElement.contains(event.target as Node)
+    ) {
       this.activeTab.set(null);
     }
   }
diff --git a/src/app/shared/state/time.store.ts b/src/app/shared/state/time.store.ts
index d911b2a..3be5656 100644
--- a/src/app/shared/state/time.store.ts
+++ b/src/app/shared/state/time.store.ts
@@ -19,7 +19,7 @@ export const TIME_RATES = [
   { label: 'Real time', secondsPerSecond: 1 },
   { label: '1 h/s', secondsPerSecond: 3600 },
   { label: '1 d/s', secondsPerSecond: 86_400 },
-  { label: '1 mo/s', secondsPerSecond: 2_629_800 }
+  { label: '1 mo/s', secondsPerSecond: 2_629_800 },
 ] as const;
 
 const MS_PER_DAY = 86_400_000;