diff --git a/.claude/skills/verify/SKILL.md b/.claude/skills/verify/SKILL.md
index c2b0d0e..7f9782e 100644
--- a/.claude/skills/verify/SKILL.md
+++ b/.claude/skills/verify/SKILL.md
@@ -6,11 +6,13 @@ How to build, run and drive this repo for runtime verification.
 
 ```bash
 npm install                       # workspace root
-npm run build -w @takeon/engine   # engine must build before web
-npm run build -w takeon-web
+npm run build                     # engine → pixi → ui → editor → web (order matters)
 cd web && npm run start &         # serves on http://127.0.0.1:3400
 ```
 
+Individual packages: `npm run build -w @takeon/engine`, `-w @takeon/ui`,
+`-w @takeon/editor`, `-w takeon-web`. The engine must build before the rest.
+
 Backend (optional — the web app falls back to localStorage without it):
 
 ```bash
@@ -28,25 +30,75 @@ before `next build` (env is inlined at build time).
   it (exit 144). Use `pkill -f 'next[-]server'`.
 - Rebuilding `.next` while an old `next start` is running serves stale chunk
   hashes (404/400 on `_next/static`). Always kill + restart after rebuild.
-- Playwright: launch Chromium with `executablePath: '/opt/pw-browsers/chromium'`.
+- Playwright: launch Chromium with
+  `executablePath: '/opt/pw-browsers/chromium-1194/chrome-linux/chrome'`
+  (check the versioned directory name — the unversioned `chromium/` path has no
+  binary in it).
+- HUD markup comes from `@takeon/ui` and is `tk-` prefixed; editor markup comes
+  from `@takeon/editor` and is `tke-` prefixed. Site chrome (garage, customiser,
+  launch) still uses the plain classes in `web/app/globals.css`.
 
 ## Flows worth driving (Playwright)
 
 1. `/customize` → fill `input[aria-label="Rover name"]`, click part options
-   (`.part-option:has-text("Field Lab")` etc.), click `button.primary:has-text("Buy rover")`.
-   Full science build (Field Lab + Scoop + NavCam + Sounder) costs 1540 of
-   1600 starting credits.
+   (`.part-option:has-text("Field Lab")` etc. — module options *toggle*, so
+   clicking "Sample Scoop"/"NavCam" removes the defaults), then `button.primary`
+   (label is "Buy rover & pick target"); it routes to `/launch?rover=<id>`.
 2. `/launch` → `.card:has-text("The Moon") button.primary` → lands on `/mission`.
-3. Mission: wait `.hud-top .meter`; canvas is `.mission-canvas`. Click canvas
-   to focus, then Arrow keys drive. Action buttons: `.action-btn:has-text("Mine")`
-   etc. — Photo/Scan only render when the rover has those modules.
-4. Mining yield appears as `.toast.good` with `+N <resource>`; cargo meter is
-   the 3rd `.hud-top .meter`.
+   Launch needs the `?rover=` param; visiting it bare shows "Pick a rover first".
+3. Mission: wait `.tk-hudbar .tk-meter` (power/hull/hold gauges); canvas is
+   `.tk-canvas`. Click the canvas for the tile menu (`.tk-tilemenu`, with
+   "Drive here" / "Mine …"), or use `.tk-dpad button[aria-label^="Drive"]`.
+   The hotbar (`.tk-actions`) only shows the frequent, capability-gated verbs
+   directly — `.tk-action:has-text("Mine")` / `"Photo"` / `"Scan"` — plus one
+   `.tk-action-more` hex. Everything occasional (Build/Craft/Place/Repair/
+   Deposit/Hold) is behind it: click `.tk-action-more` to open `.tk-tray`, then
+   `.tk-tray button:has-text("Build")` etc. The tray closes itself after any
+   click, on outside click, or on Escape. Modals close via `.tk-modal-close` or
+   the footer `button:has-text("Close")`.
+4. Mining yield appears as `.tk-toast-good` with `+N <resource>`; cargo meter is
+   the 3rd `.tk-hudbar .tk-meter`; open the tray and click
+   `.tk-tray button:has-text("Hold")` for the cargo table (`.tk-table tbody tr`).
 5. Resume: go `/` — active mission card has `button:has-text("Resume mission")`;
    cargo must survive the round-trip.
-6. End: `.hud-top button:has-text("End")` → modal → `button.primary` → back on
-   `/` with credits chip updated.
-7. Canvas paint check: sample `getImageData` for >10 distinct colors.
+6. End: `.tk-hudbar button:has-text("End")` → modal → `.tk-btn-primary` → back
+   on `/` with the credits chip updated.
+7. Canvas paint check: sample `getImageData` for >10 distinct colors. The iso
+   view paints ~1000 distinct colours at 1600×1000; the flat map ~100+.
+8. Views: `.tk-hudbar button[title*="2D map"]` switches to the top-down map
+   (`game.view === 'flat'`), the same button (`title*="3D diorama"`) switches
+   back. Tile picking, tap-to-drive and the tile menu work in both.
+
+### Editor (`/editor`)
+
+Layout is one grid of uniform `.tke-card`s (Scene 2×2, Inspector, Maps,
+Analysis, Rover, then Destinations and Events spanning 2) — no sidebars, no
+tab-switching between Maps/Analysis/Rover. Chrome is light by default.
+
+1. Wait for `.tke-toolbar`. `.tke-list-item` lists 6 built-in destinations;
+   `.tke-field` are inspector rows; `.tke-status` shows `96² · N ms`.
+2. Drag a terrain slider (`.tke-group:has-text("Terrain") input[type="range"]`)
+   → the world regenerates (status ms changes) and the entry gets an
+   `.tke-badge` reading "edited". Undo is `button[title^="Undo"]`.
+3. Maps: `.tke-tab:has-text("Slope"|"Surface"|"Ore density"|"Drivable"|"Noise")`
+   then sample `.tke-map` with `getImageData` (each view should paint several
+   distinct colours). `.tke-slice` is the cross-section.
+4. Analysis card: `.tke-stat` tiles (Columns, Height, Relief, Drivable, Cliffs,
+   Landing) — visible without switching views.
+5. Play mode: `.tke-primary:has-text("Play")` mounts the real HUD inside the
+   scene card (`.tk-hudbar .tk-meter` = 3). Drive with the d-pad; engine events
+   land in `.tke-console-line`. `.tke-primary:has-text("Stop")` returns.
+6. Scene view is `.tke-scene` (drag to pan, wheel to zoom, R rotates).
+   `.tke-viewport-bar button:has-text("3D")` switches it to the 2D map (the
+   button then reads "2D"); the card hint says which is live.
+9. Noise: the inspector has a *Noise field* group (7 fields). Setting type +
+   fractal regenerates the world, and the Maps `Noise` tab previews the exact
+   field with a caption from `describeNoise`; `Scatter` previews blue-noise
+   placement.
+7. Theme toggle: `.tke-toolbar button[title*="dark chrome"]` / `[title*="light
+   chrome"]`, persisted in `localStorage` under `takeon.editor.theme`.
+8. Layout check worth keeping: every `.tke-card-head` should measure the same
+   height, and standard cards the same width/height, at any viewport.
 
 Bennu (irregular asteroid) needs a fuel tank module; good probe for void-edge
-terrain. Mobile: 390x760 viewport, d-pad `.dpad button[aria-label^="Drive"]`.
+terrain. Mobile: 390x760 viewport, d-pad `.tk-dpad button[aria-label^="Drive"]`.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 87b02e1..459b09b 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -19,6 +19,9 @@ jobs:
       - run: npm run build -w @takeon/engine
       - run: npm test -w @takeon/engine
       - run: npm run build -w @takeon/pixi
+      - run: npm run build -w @takeon/ui
+      - run: npm test -w @takeon/ui
+      - run: npm run build -w @takeon/editor
       - run: npm run build -w takeon-web
 
   backend:
@@ -32,7 +35,7 @@ jobs:
       - run: go build ./... && go vet ./... && go test ./...
         working-directory: pocketbase
 
-  # Publishes @takeon/engine and @takeon/pixi to npmjs.org when a v* tag is
+  # Publishes the @takeon packages to npmjs.org when a v* tag is
   # pushed. Requires the NPM_TOKEN repo secret (an npm automation token with
   # publish rights on the @takeon scope). Idempotent: versions already on the
   # registry are skipped, so re-running a tag build never fails on republish.
@@ -50,11 +53,13 @@ jobs:
       - run: npm install
       - run: npm run build -w @takeon/engine && npm test -w @takeon/engine
       - run: npm run build -w @takeon/pixi
+      - run: npm run build -w @takeon/ui && npm test -w @takeon/ui
+      - run: npm run build -w @takeon/editor
       - name: Publish packages not yet on the registry
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          for pkg in @takeon/engine @takeon/pixi; do
+          for pkg in @takeon/engine @takeon/pixi @takeon/ui @takeon/editor; do
             version=$(npm pkg get version -w "$pkg" | node -e "process.stdin.once('data',d=>console.log(Object.values(JSON.parse(d))[0]))")
             if npm view "$pkg@$version" version >/dev/null 2>&1; then
               echo "$pkg@$version already published — skipping"
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ce3fb4c..8734551 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,110 @@
 # Changelog
 
-`@takeon/engine` and `@takeon/pixi` are versioned **in lockstep** and released
-by tagging: pushing a `v*` tag (e.g. `v0.2.0`) runs the CI publish job, which
+`@takeon/engine`, `@takeon/pixi`, `@takeon/ui` and `@takeon/editor` are
+versioned **in lockstep** and released by tagging: pushing a `v*` tag (e.g. `v0.2.0`) runs the CI publish job, which
 builds, tests, and publishes any package whose version isn't already on
-npmjs.org. Bump both `package.json` versions + add an entry here in the same
+npmjs.org. Bump every `package.json` version + add an entry here in the same
 change. Semver: breaking engine/adapter API → major (minor while pre-1.0),
 additive → minor, fixes → patch.
 
+## Unreleased
+
+### @takeon/engine
+
+- **Runtime body registry** (`world/registry.ts`): `registerBody`,
+  `registerBodies`, `unregisterBody`, `listBodies`, `isRegisteredBody`.
+  `getBody` now resolves registered bodies first, so an editor draft or a
+  backend row can shadow a built-in without patching the catalog.
+- **Terrain analysis** (`world/analysis.ts`): `heightField`, `slopeField`,
+  `reachableMask`, `crossSection` and `analyzeTerrain` — relief, slope
+  distribution, drivable fraction for a given climb limit, surface/material
+  mix and total recoverable resources. Pure and DOM-free.
+- **Authoring** (`world/authoring.ts`): `createBodyDraft`, `cloneBody`,
+  `forkBody`, `validateBody` (errors + playability warnings), the
+  `BODY_FIELDS` inspector schema with `getBodyField`/`setBodyField`, and
+  `bodyToJson` / `bodyToTypeScript` / `parseBodyJson`.
+- `GAME_EVENT_KEYS` lists every event key at runtime (with a compile-time
+  exhaustiveness guard) so hosts can subscribe to everything.
+- `skinBiome` is exported for tools that need the surface-patch field.
+
+### @takeon/ui (new)
+
+- React mission shell: `MissionProvider` (engine lifecycle, HUD snapshot,
+  toasts, autosave, persistence via `SyncAdapter`), `MissionScreen` and the
+  full HUD component set, plus `TakeOnMission` for one-line embedding.
+- Component registry: every component is registered through `createSlot` and
+  resolved via `TakeOnUIProvider`, so a parent app can replace, wrap, restyle
+  (`classNames`, `theme`), relabel (`labels`) or extend (`slots`) any part of
+  the interface. See `docs/UI.md`.
+
+### @takeon/engine — engine structure
+
+- **Scene layer** (`scene/`): `buildScene(sim)` flattens a running mission into
+  renderer-agnostic entities (position, height, facing, variant, flags), so a
+  host can draw TakeOn with its own technology. Enforced in the layering test.
+- **View abstraction** (`render/view.ts`): `SceneView` — draw, pick, resize,
+  rotate, photo, minimap — implemented by the isometric renderer and by a new
+  **`FlatRenderer`**: a top-down 2D map with hillshading, contour shading, grid,
+  scanner reach, home pin and entity glyphs, rasterised once per world change.
+  `RoverGame.setView('iso' | 'flat')` / `toggleView()` switch at runtime on a
+  shared camera; `startView` picks the initial one.
+- **Entity parts**: the rover moved to `render/rover.ts` and is now assembled
+  from registered parts (`registerRoverPart`, `listRoverParts`) with
+  build/state conditions, plus new detail — cargo crates that stack with the
+  hold, a charge LED strip, hull scorch and sparks, a status strobe, drilling
+  chips, a sweeping dish, a pulsing scanner tip, solar glint and RTG heat glow.
+  The 2D view has a painter registry per entity kind (`registerFlatPainter`).
+- **Noise library** (`util/noise/`): Perlin, simplex, Worley (F1 / F2−F1 /
+  cells), white, and blue noise (void-and-cluster mask, Poisson-disk sampling,
+  `scatterPoints`); `fbm`/`ridged`/`billow` fractals, domain warp, and a
+  `NoiseConfig` + `makeNoise` factory. Bodies opt in via `terrain.noise`;
+  without it the shipped worlds regenerate byte-for-byte.
+- `Simulation.landingSite`, `BodyField.defaultValue` (so inspectors show the
+  effective default instead of 0), and a `viewChanged` game event.
+
+### @takeon/ui — visual direction
+
+- New default skin: a pulp sci-fi homage (Out There: Ω). Hex cells for the
+  action bank and drive pad, notched panel frames with hairline neon edges,
+  segmented resource gauges, uppercase condensed type, comic-caption toasts and
+  a scene vignette. Pure CSS — no web fonts, no images, nothing fetched.
+- `Meter` gained `tone`, `Modal` gained a title bar with a close control, and
+  `Chip` gained `tone`; all still overridable through the registry, and the
+  whole palette is `--tk-*` variables.
+- View toggle in the HUD bar; `hud.view`, `actions.setView`/`toggleView` and a
+  `view` prop on `MissionProvider`.
+- `ActionBar` decluttered: only capability-gated, frequent verbs (mine, photo,
+  scan) sit on the hotbar. Occasional actions (build, craft, place, repair,
+  deposit, hold) collapse behind a single "More" hex that opens `.tk-tray`, a
+  pop-up list that closes itself on selection, outside click or Escape. New
+  `ActionItem.menu` flag controls the split for custom action sets.
+
+### @takeon/editor (new)
+
+- `TakeOnEditor`: mountable world editor — project tree of built-ins and
+  drafts, schema-generated inspector with live validation, isometric scene
+  view with camera controls and a day/night scrub, elevation / slope /
+  surface / ore / drivability maps, raw noise preview, vertical cross-section,
+  terrain analysis, rover picker, undo/redo, JSON/TS import-export and an
+  in-editor play mode wired to the real HUD. See `docs/EDITOR.md`.
+- Layout is one grid of uniform cards (scene 2×2, everything else the same
+  footprint, each scrolling internally) instead of sidebars, so panels stay in
+  line at every width. Chrome is light by default with a dark toggle
+  (remembered); the scene stays dark either way.
+- Scene card switches between the 3D diorama and the 2D map; the inspector
+  gained a *Noise field* group; Maps gained a live preview of the body's actual
+  noise field and a blue-noise **Scatter** preview.
+
+### web
+
+- `/editor` route; the mission screen is now a thin host over `@takeon/ui`,
+  and destination lists resolve through `listBodies()` so edited worlds are
+  immediately launchable.
+
+### desktop (new, not published)
+
+- Optional Electron shell so the editor runs as a macOS/Windows/Linux app.
+
 ## 0.2.0 — first published release
 
 ### @takeon/engine
diff --git a/CLAUDE.md b/CLAUDE.md
index c7cb2a2..9ca0ecd 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -5,9 +5,10 @@ Isometric voxel rover game. npm workspaces monorepo + Go PocketBase spoke.
 ## Commands
 
 ```bash
-npm install && npm run build      # builds engine → pixi adapter → web (order matters)
-npm test                          # engine unit tests (vitest)
-npm run dev                       # Next.js dev server on :3400
+npm install && npm run build      # engine → pixi → ui → editor → web (order matters)
+npm test                          # engine + @takeon/ui unit tests (vitest)
+npm run dev                       # Next.js dev server on :3400 (editor at /editor)
+cd desktop && npm install && npm start   # optional Electron shell for the editor
 cd pocketbase && TAKEON_ALLOW_ANON=true go run . serve --http 127.0.0.1:8094
 node scripts/export-catalog.mjs   # regen pocketbase/seed/*.json after catalog edits
 node scripts/fetch-dem.mjs        # embed real MOLA/LOLA DEM patches (needs trek.nasa.gov)
@@ -18,10 +19,35 @@ Runtime verification recipe: `.claude/skills/verify/SKILL.md`.
 ## Architecture rules
 
 - **All gameplay rules live in `packages/engine/src/sim/` and `parts/`** —
-  renderer and web UI only observe. The sim is deterministic, fixed 10 Hz.
+  renderers and web UI only observe. The sim is deterministic, fixed 10 Hz.
+- **Layers are enforced**: `util → world → sim → scene → render → input`, with
+  `core` on top (`test/layering.test.ts` fails on an upward import). `scene/`
+  flattens a frame into renderer-agnostic entities; `render/` has two views
+  (`IsoRenderer`, `FlatRenderer`) behind the `SceneView` interface. Architecture
+  overview: `docs/ENGINE.md`.
+- **Entity art is componentised**: the rover is a list of registered parts
+  (`render/rover.ts`, `registerRoverPart`), the 2D view has a painter per entity
+  kind (`registerFlatPainter`). Add hardware as a part, not as more branches.
+- **UI lives in `packages/ui` (`@takeon/ui`), never in `web/`.** Every
+  component is registered by key via `createSlot` and resolved through
+  `TakeOnUIProvider`, so a parent app (Landnam, the editor, the Next.js app)
+  can replace/wrap/restyle any of them. Adding a component means adding a slot
+  key + a `SLOT_KEYS` entry; `web/` stays a thin host. See `docs/UI.md`.
+- **Authoring APIs belong in the engine, not the editor** — `world/authoring.ts`
+  (draft/validate/field schema/export), `world/analysis.ts` (heightfield,
+  slopes, reachability, stats) and `world/registry.ts` (runtime body registry)
+  are pure and DOM-free so they stay testable and reusable. `@takeon/editor`
+  is only a UI over them.
 - Worlds regenerate deterministically from `(BodyDef, seed)`; persistence
   stores only voxel `edits` + entity state (`MissionState`). Never persist raw
-  voxels.
+  voxels. **Anything that changes generation output must be opt-in per body** —
+  that is why `terrain.noise` exists; `test/noise.test.ts` asserts the shipped
+  bodies stay byte-identical. Same rule for `terrain.biomes` (chunked biome
+  skins, `world/biomes.ts`) and `world/kinds.ts` (planet/moon/asteroid/gaseous
+  preset inheritance + `instantiateBody()` for host-supplied properties like
+  real temperature) — both additive, both opt-in. `world/layers.ts` is the
+  seam for a *module* to add a second world grid (caves, sky); core registers
+  none, so mining stays top-down deposits + ice. See `docs/ENGINE.md`.
 - The engine has **zero runtime dependencies** and must keep working without
   DOM access for tests (canvas bits are guarded; `OffscreenCanvas` fallback).
 - Web ↔ storage goes through `SyncAdapter` (`net/sync.ts`) only. The web app
@@ -32,6 +58,8 @@ Runtime verification recipe: `.claude/skills/verify/SKILL.md`.
 - Part/body catalogs: source of truth is the engine
   (`parts/catalog.ts`, `world/bodies.ts`); `scripts/export-catalog.mjs` exports
   them to `pocketbase/seed/` which the Go backend embeds + upserts on serve.
+  Resolve destinations with `getBody`/`listBodies` (registry-aware), never by
+  scanning `BODIES` — editor drafts and backend rows register at runtime.
 
 ## PocketBase spoke conventions (Star Sailors ecosystem)
 
@@ -51,6 +79,13 @@ Runtime verification recipe: `.claude/skills/verify/SKILL.md`.
   `pkill -f 'next[-]server'`; always restart `next start` after rebuilding.
 - Engine tsconfig uses `moduleResolution: bundler` with `.js` import suffixes;
   keep both or Next/tsc will disagree.
+- New `GameEvents` keys must be added to `GAME_EVENT_KEYS` (`types.ts`); a
+  compile-time guard fails the build otherwise, and the UI firehose iterates it.
+- `RoverGameOptions.startView` (not `view`) picks the initial renderer —
+  `@takeon/pixi`'s mount options already use `view` for the host canvas.
+- React packages build with `tsc`; stylesheets are copied by
+  `scripts/copy-assets.mjs` (tsc ignores CSS). Their `exports` maps need a
+  `default` condition or Next's webpack resolver rejects the package path.
 - The iso painter's order is diagonal (`x+y` asc, then z asc); dynamic entities
   are drawn after chunk blits and occluders re-stamped
   (`renderer.redrawOccluders`) — don't reorder without checking cliffs.
diff --git a/README.md b/README.md
index d7e1200..91c436c 100644
--- a/README.md
+++ b/README.md
@@ -20,16 +20,22 @@ like [Landnam](https://github.com/Signal-K/planet-hunters-experiment-1) — via
 |---|---|
 | `packages/engine` | `@takeon/engine` — the whole game as a zero-dependency TypeScript library: voxel worlds, terrain gen, isometric renderer (Canvas 2D, chunk-cached), rover simulation, parts/customiser maths, actions, persistence adapters |
 | `packages/pixi-adapter` | `@takeon/pixi` — mounts a mission inside an existing PixiJS stage (v7/v8) |
-| `web` | Standalone Next.js app: garage, customiser, destination picker, mission HUD. Mobile-friendly (touch d-pad, pinch zoom, tap-to-drive) |
+| `packages/ui` | `@takeon/ui` — React mission shell and HUD. Every component is replaceable by the parent app ([docs/UI.md](docs/UI.md)) |
+| `packages/editor` | `@takeon/editor` — mountable world editor: inspector, scene view, terrain/noise maps, analysis, play mode ([docs/EDITOR.md](docs/EDITOR.md)) |
+| `web` | Standalone Next.js app: garage, customiser, destination picker, mission HUD, `/editor`. Mobile-friendly (touch d-pad, pinch zoom, tap-to-drive) |
+| `desktop` | Optional Electron shell to run the editor as a Mac/Windows/Linux app (not an npm workspace) |
 | `pocketbase` | Go PocketBase **spoke** backend (port 8094) following the Star Sailors hub-and-spoke pattern: JS `pb_migrations`, custom `/api/takeon/*` routes, auth delegated to the shared backend, discovery cross-post hook |
+| `docs/ENGINE.md` | How the engine is structured: layers, scenes, views, entity parts, noise, registries |
 | `docs/INTEGRATION.md` | How to embed TakeOn in Landnam / any PixiJS game, or behind your own storage |
+| `docs/UI.md` | Adapting/replacing the UI from a game built on TakeOn |
+| `docs/EDITOR.md` | The world editor: terrain, noise, maps, analysis, play mode |
 
 ## Quick start (no backend needed)
 
 ```bash
 npm install
-npm run build          # engine → pixi adapter → web
-npm run dev            # http://localhost:3400
+npm run build          # engine → pixi adapter → ui → editor → web
+npm run dev            # http://localhost:3400  (editor at /editor)
 ```
 
 The web app persists to `localStorage` when no backend is configured — fully
@@ -37,16 +43,18 @@ playable offline.
 
 ## Installing the packages
 
-`@takeon/engine` and `@takeon/pixi` publish to **npmjs.org** (not GitHub
+`@takeon/engine`, `@takeon/pixi`, `@takeon/ui` and `@takeon/editor` publish to **npmjs.org** (not GitHub
 Packages — its npm registry only hosts scopes matching the repo owner, i.e.
 `@signal-k/*`, and requires auth even for public installs):
 
 ```bash
 npm install @takeon/engine        # the whole game as a library
 npm install @takeon/pixi          # + the PixiJS mount adapter
+npm install @takeon/ui            # + the React HUD (overridable component registry)
+npm install @takeon/editor        # + the world editor component
 ```
 
-Releases are tag-driven: bump both package versions (lockstep), add a
+Releases are tag-driven: bump the package versions (lockstep), add a
 `CHANGELOG.md` entry, and push a `v*` tag — CI builds, tests, and publishes
 anything not already on the registry. The repo needs an `NPM_TOKEN` secret
 (npm automation token with publish rights on the `@takeon` scope).
@@ -62,8 +70,12 @@ anything not already on the registry. The repo needs an `NPM_TOKEN` secret
   gravity, sunlight and delta-v: your fuel capacity gates what you can reach,
   gravity scales fall damage, solar flux scales charging, day length drives the
   day/night cycle. Bennu is an irregular rubble pile with map-edge cliffs.
+- **Two views** — the isometric voxel diorama, or a top-down 2D map with
+  hillshading, contours, scanner reach and entity glyphs. Toggle from the HUD
+  (`⬔ / ▦`) or the editor; both draw the same scene, share one camera, and
+  support tap-to-drive and tile picking.
 - **On the surface** — drive (keys, touch d-pad, or tap-to-drive), rotate the
-  isometric perspective in 90° steps (R), mine the voxel terrain (materials
+  perspective in 90° steps (R), mine the voxel terrain (materials
   have hardness and yields; ores live in veins), photograph anomalies to
   document discoveries, scan to reveal them, build structures from cargo
   (solar array, nav beacon, auto-drill rig, supply cache, refinery, habitat
@@ -76,9 +88,25 @@ anything not already on the registry. The repo needs an `NPM_TOKEN` secret
   discoveries convert to credits. A rover that runs out of battery with no way
   to recharge — or breaks its chassis — is lost.
 
+The rover is drawn from **parts** rather than a fixed sprite: fitted modules,
+cargo load, charge level, hull damage, drilling and nightfall each add or
+change hardware on screen, and a host game can register its own parts.
+
 Worlds are generated deterministically from `(body, seed)`, so saves only
 persist voxel *edits* plus rover/structure state; resume is byte-faithful.
 
+## Noise and terrain fields
+
+Elevation can come from any of several fields — value, Perlin, simplex, Worley
+(craters or fractures) — stacked as fBm, ridged or billow, with domain warping,
+all described by one `NoiseConfig` on the body. Blue noise (Poisson-disk) is
+available for *placement*: evenly spread scatter with no clumps. The editor
+edits the config, previews the exact field the generator will use, and shows a
+blue-noise scatter preview.
+
+Bodies without a `noise` block keep the original field byte-for-byte, so
+existing saves stay valid. See [docs/ENGINE.md](docs/ENGINE.md).
+
 ## Real planetary data
 
 Two data channels feed generation:
@@ -149,10 +177,65 @@ mounted.game.events.on('anomalyDocumented', ({ anomaly }) => { /* award XP */ })
 See [docs/INTEGRATION.md](docs/INTEGRATION.md) for the event catalogue and how
 to supply a custom `SyncAdapter` so mission data lands in *your* database.
 
+## Editing worlds
+
+TakeOn ships a small game editor — project tree, scene view, inspector,
+terrain instruments and a play button — for designing destinations instead of
+hand-editing `bodies.ts`:
+
+```bash
+npm run dev            # http://localhost:3400/editor
+```
+
+Or as a desktop app on macOS:
+
+```bash
+npm run build && npm run start -w takeon-web
+cd desktop && npm install && npm start
+```
+
+One grid of uniform cards — scene, inspector, maps, analysis, rover,
+destinations, events — with light chrome by default (☾ toggles dark). Edit
+terrain, noise and mineral parameters with live regeneration; read the
+elevation / slope / surface / ore / drivability maps and a vertical
+cross-section; check the analysis numbers (relief, cliff fraction, drivable
+percentage, recoverable resources); then press ▶ Play to drive the world with
+the real HUD, in the same card. Drafts are published to the engine's body registry, so an edited
+world is immediately launchable from the garage. Export as `BodyDef` JSON or as
+a TypeScript literal for `world/bodies.ts`. Full guide:
+[docs/EDITOR.md](docs/EDITOR.md).
+
+## Building a game on top of TakeOn
+
+The HUD is a package (`@takeon/ui`) styled as pulp sci-fi instrumentation —
+hex cells, notched panel frames, segmented gauges, no web fonts or images — and
+every component in it is resolved through a registry, so a host game can
+replace, wrap, restyle or extend any part of the interface:
+
+```tsx
+<TakeOnMission
+  body={getBody('mars')!}
+  spec={playerRover}
+  sync={myAdapter}
+  ui={{
+    components: { ActionBar: MyActionBar },   // replace a component
+    labels: { 'action.mine': 'Dig' },         // reskin the words
+    slots: { 'hudBar.end': <MyQuestChip /> }, // inject extra chrome
+    theme: { accent: '#ff8a3d' },             // recolour via CSS variables
+  }}
+/>
+```
+
+`MissionProvider` owns the engine loop, HUD state, toasts and persistence and
+exposes them through hooks, so a game can also drop the stock HUD entirely and
+build its own from `useMission()`. Gameplay rules stay in the engine either
+way. See [docs/UI.md](docs/UI.md).
+
 ## Tests
 
 ```bash
-npm test               # engine unit tests (terrain determinism, sim, economy)
+npm test               # engine unit tests (terrain determinism, sim, economy,
+                       # authoring/registry/analysis) + @takeon/ui registry tests
 ```
 
 ## Performance notes
diff --git a/desktop/main.cjs b/desktop/main.cjs
new file mode 100644
index 0000000..5a9b5cf
--- /dev/null
+++ b/desktop/main.cjs
@@ -0,0 +1,62 @@
+/**
+ * Optional Electron shell so the editor runs as a desktop app on macOS
+ * (and Windows/Linux) instead of a browser tab.
+ *
+ * It is deliberately *not* an npm workspace: Electron is a ~150 MB download
+ * and nobody working on the game itself needs it. See docs/EDITOR.md.
+ *
+ *   npm run build && npm run start -w takeon-web   # serve the app
+ *   cd desktop && npm install && npm start         # open the window
+ */
+const { app, BrowserWindow, shell } = require('electron');
+
+const URL = process.env.TAKEON_EDITOR_URL || 'http://127.0.0.1:3400/editor';
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width: 1480,
+    height: 940,
+    minWidth: 960,
+    minHeight: 620,
+    backgroundColor: '#120e2e',
+    title: 'TakeOn Editor',
+    titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'default',
+    webPreferences: { contextIsolation: true, nodeIntegration: false },
+  });
+
+  // Retry: the dev server is often still booting when the window opens.
+  const load = (attempt = 0) => {
+    win.loadURL(URL).catch(() => {
+      if (attempt > 40) {
+        win.loadURL(
+          `data:text/html,${encodeURIComponent(
+            `<body style="font-family:system-ui;background:#120e2e;color:#e8e6f5;padding:40px">
+               <h2>Nothing serving ${URL}</h2>
+               <p>Start the app first: <code>npm run build &amp;&amp; npm run start -w takeon-web</code></p>
+             </body>`,
+          )}`,
+        );
+        return;
+      }
+      setTimeout(() => load(attempt + 1), 500);
+    });
+  };
+  load();
+
+  // External links open in the real browser, not inside the editor window.
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    void shell.openExternal(url);
+    return { action: 'deny' };
+  });
+}
+
+app.whenReady().then(() => {
+  createWindow();
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
diff --git a/desktop/package.json b/desktop/package.json
new file mode 100644
index 0000000..fa13ffe
--- /dev/null
+++ b/desktop/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "takeon-desktop",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Electron shell that runs the TakeOn editor as a desktop app (macOS/Windows/Linux). Not part of the npm workspace — install on demand.",
+  "main": "main.cjs",
+  "scripts": {
+    "start": "electron ."
+  },
+  "devDependencies": {
+    "electron": "^33.0.0"
+  }
+}
diff --git a/docs/EDITOR.md b/docs/EDITOR.md
new file mode 100644
index 0000000..b302851
--- /dev/null
+++ b/docs/EDITOR.md
@@ -0,0 +1,204 @@
+# The TakeOn editor
+
+A minimal, Unity/Godot-shaped authoring tool for TakeOn worlds: project tree,
+scene view, inspector, analysis instruments and a play button. It exists so
+terrain, noise and map work can be *planned* — tuned against real numbers and
+driven immediately — instead of guessed at in `bodies.ts` and rebuilt.
+
+It ships as `@takeon/editor`, a single React component with no routing of its
+own, so it runs in this repo's Next.js app, inside a game built on TakeOn
+(Landnam), or in a desktop window.
+
+```
+┌──── toolbar: ▶ Play · undo/redo · seed · climb limit · JSON/TS · ☾ theme ────┐
+│ ┌───────────────────────┐ ┌────────────┐ ┌────────────┐                     │
+│ │                       │ │ Inspector  │ │ Maps       │                     │
+│ │   Scene (2×2 cells)   │ ├────────────┤ ├────────────┤                     │
+│ │                       │ │ Analysis   │ │ Rover      │                     │
+│ └───────────────────────┘ └────────────┘ └────────────┘                     │
+│ ┌───────────────────────┐ ┌───────────────────────────┐                     │
+│ │ Destinations          │ │ Events                    │                     │
+│ └───────────────────────┘ └───────────────────────────┘                     │
+└─────────────────────────────────────────────────────────────────────────────┘
+```
+
+Every panel is the same card: same 38 px header, same footprint, its own
+internal scroll. Nothing is a sidebar, so no column grows a different height
+than its neighbour and nothing shifts as content changes. Cards reflow to
+three, two or one column as the window narrows; the scene keeps its 2×2 cell
+until there is no room for it.
+
+The chrome is **light by default** — authoring happens in daylight, and a
+bright shell makes the dark scene read as a viewport into the game rather than
+more UI. The ☾/☀ button in the toolbar switches to dark chrome and the choice
+is remembered; pass `theme="dark"` to start there.
+
+## Running it
+
+**In the browser** (also how you run it on a Mac):
+
+```bash
+npm install && npm run build
+npm run dev                     # http://localhost:3400/editor
+```
+
+**As a desktop app** (macOS, Windows, Linux) — optional Electron shell, kept
+out of the workspace so nobody downloads Electron who doesn't want it:
+
+```bash
+npm run build && npm run start -w takeon-web    # serve the app
+cd desktop && npm install && npm start          # opens the editor window
+```
+
+Point it elsewhere with `TAKEON_EDITOR_URL=https://your-host/editor`.
+
+**Inside your own game:**
+
+```tsx
+import { TakeOnEditor } from '@takeon/editor';
+import '@takeon/ui/styles.css';
+import '@takeon/editor/styles.css';
+
+<TakeOnEditor
+  bodies={worldsFromMyBackend}            // edit rows from your DB too
+  onChange={(project) => save(project)}   // persist wherever you like
+/>;
+```
+
+## What each panel is for
+
+### Destinations (project tree)
+
+Every shipped destination plus this project's drafts. Editing a built-in
+creates a draft that *shadows* it (badge: `edited`); **Discard** removes the
+draft and restores the shipped definition. **+ New** starts a validated blank
+world, **Copy** forks the selection.
+
+Drafts are published to the engine's runtime body registry as you edit
+(`registerBody`), so `getBody('mars')` — in play mode, on `/launch`, anywhere in
+the host app — resolves *your* Mars. Pass `publish={false}` to keep the editor
+sandboxed.
+
+### Inspector
+
+Generated from the engine's field schema (`BODY_FIELDS` in
+`world/authoring.ts`), grouped into Identity / Physics / World / Terrain /
+Mineralogy / Weather / Palette. Fields marked `↻` feed generation, so changing
+them rebuilds the world (debounced ~180 ms).
+
+Validation runs on every keystroke: errors (which would break generation) block
+play mode, warnings ("roughness above 0.9 leaves few drivable routes") don't.
+Adding a new `BodyDef` property means describing it in the engine schema — the
+inspector picks it up with no editor change. Hosts can append their own fields
+via `extraFields`.
+
+### Scene view
+
+The real `IsoRenderer` drawing the real generated world, with the simulation
+paused: nothing moves and no battery drains, so what you see is purely the
+authored terrain. Drag to pan, wheel to zoom, `R` rotates 90°, `F` frames the
+landing site, and the ☀ slider scrubs the day/night cycle to check lighting.
+
+### Maps (terrain planning instruments)
+
+One pixel per column, sampled from the same world the game will run:
+
+| View | Answers |
+|---|---|
+| **Elevation** | Where the relief actually is; does the seed give you basins and ridges or mush |
+| **Slope** | Red is steeper than the climb limit — the cliffs that will block a rover |
+| **Surface** | The biome patches (silica flats, dust basins, regolith uplands) the player sees |
+| **Ore density** | Ore voxels per column; crystal picked out separately |
+| **Drivable** | Flood fill from the landing site — green is reachable, red is stranded terrain |
+| **Noise** | The raw fBm field at the generator's own frequency, before craters and clamping |
+
+Click any map to inspect a column (height, surface material, skin biome) and to
+move the **cross-section** underneath it, which slices the world vertically with
+the real material palette — the fastest way to see how ore veins and ice bands
+are actually layered.
+
+The climb limit used by Slope and Drivable is the toolbar's `climb ≤ n`; set it
+to the drivetrain you're designing for (rocker-bogie 2, tracks 3).
+
+### Analysis
+
+Its own card, always visible beside the maps — the numbers behind them: relief
+range, mean height, cliff fraction, drivable percentage, height histogram,
+surface mix and total recoverable resources.
+"92% drivable, 4% cliffs, 51k stone" is a design spec; "looks about right" is
+not.
+
+### Rover
+
+Also its own card: the rover play mode uses, with part dropdowns and the
+derived climb, speed, move cost and cargo numbers, plus a warning when the
+build can't actually reach this destination's delta-v. Mechanics work is mostly "does this drivetrain cope with
+this terrain", so it sits next to the terrain controls.
+
+### Play mode
+
+▶ Play boots a real mission *inside the scene card* — same cell, so the layout
+never jumps — using the full HUD from `@takeon/ui`, the same components the
+shipped game uses. Every engine event lands in the events console (`tick` and `stateChanged` filtered out), so you can
+watch `mined`, `damaged`, `blocked` and `weather` fire as you drive. ■ Stop
+returns to the scene view.
+
+## Getting a world out of the editor
+
+- **⧉ JSON** copies the `BodyDef` — paste it into `pocketbase/seed/bodies.json`,
+  your own backend, or another project.
+- **⧉ TS** copies a TypeScript literal ready to paste into
+  `packages/engine/src/world/bodies.ts`, key order matching the built-ins.
+- **⭳** downloads the JSON; **⭱ Import** parses a pasted `BodyDef` (missing
+  fields fall back to draft defaults, problems are listed rather than thrown).
+
+Projects persist to `localStorage` (`takeon.editor.v1`) by default. Pass
+`storage={null}` for an in-memory session, or use `onChange` to persist
+wherever you like.
+
+## Extending it
+
+Panels are registered through `@takeon/ui`'s slot registry, so a host can
+replace any of them:
+
+```tsx
+<TakeOnEditor
+  ui={{
+    components: { EditorAnalysisPanel: MyAnalysisPanel },
+    theme: { accent: '#ff8a3d' },
+  }}
+/>
+```
+
+Slot keys: `EditorToolbar`, `EditorCard`, `EditorBodyBrowser`,
+`EditorInspector`, `EditorViewport`, `EditorMapsPanel`, `EditorAnalysisPanel`,
+`EditorRoverPanel`, `EditorConsolePanel` (exported as `EDITOR_SLOT_KEYS`).
+Overriding `EditorCard` alone re-skins every panel frame at once; the tool's
+own colours come from `--tke-*` variables on `.tke-shell`. The mission HUD inside
+play mode uses the same mechanism — see [UI.md](UI.md).
+
+The pieces are exported individually too (`useEditorState`, `useEditorSim`,
+`paintMap`, `Inspector`, …), so you can build a different tool — a terrain
+browser, a QA harness — out of the same parts.
+
+## The engine APIs behind it
+
+Nothing in the editor is privileged; it is built on public engine exports you
+can use directly:
+
+```ts
+import {
+  createBodyDraft, validateBody, BODY_FIELDS, setBodyField,  // authoring
+  registerBody, listBodies,                                   // runtime catalog
+  generateTerrain, analyzeTerrain, heightField, slopeField,   // measurement
+  reachableMask, crossSection,
+  bodyToJson, bodyToTypeScript, parseBodyJson,                // import/export
+} from '@takeon/engine';
+
+const world = generateTerrain(createBodyDraft({ id: 'test', size: 64 }));
+const stats = analyzeTerrain(world, { maxClimb: 2 });
+console.log(stats.traversable.reachableFraction, stats.slope.steepFraction);
+```
+
+All of it is pure and DOM-free, so terrain rules can be asserted in CI:
+`packages/engine/test/authoring.test.ts` does exactly that.
diff --git a/docs/ENGINE.md b/docs/ENGINE.md
new file mode 100644
index 0000000..f1c648f
--- /dev/null
+++ b/docs/ENGINE.md
@@ -0,0 +1,228 @@
+# TakeOn as a game engine
+
+TakeOn started as one game and grew into the engine underneath it. This is the
+map: what the layers are, which concept owns what, and where to add things.
+
+Everything below is in `packages/engine` unless stated otherwise. The layering
+is enforced in CI by `test/layering.test.ts` — lower layers may never import
+upward.
+
+```
+util ──► world ──► sim ──► scene ──► render ──► input
+ │        │         │        │          │
+ │        │         │        │          └── iso diorama · flat 2D map · entity parts
+ │        │         │        └── renderer-agnostic frame description
+ │        │         └── the rules: deterministic, fixed 10 Hz
+ │        └── voxels, terrain generation, analysis, authoring
+ └── rng · noise (value · perlin · simplex · worley · blue) · events
+
+                    core ──► RoverGame (the facade everything embeds)
+        net ──► SyncAdapter          parts ──► catalogue + stats maths
+        @takeon/ui ──► React shell   @takeon/editor ──► authoring tool
+```
+
+## The concepts
+
+| Concept | Where | What it owns |
+|---|---|---|
+| **World** | `world/world.ts` | Dense voxel storage, column heights, player edits |
+| **Terrain** | `world/terrain.ts` | Deterministic generation from `(BodyDef, seed)` |
+| **Simulation** | `sim/simulation.ts` | Every rule: driving, power, mining, weather, structures. Fixed 10 Hz, renderer-free |
+| **Scene** | `scene/` | One frame flattened into entities — positions, facings, variants, flags. Pure data |
+| **View** | `render/view.ts` | The `SceneView` contract: draw, pick, resize, rotate, photo, minimap |
+| **Entity parts** | `render/rover.ts`, `render/flat-painters.ts` | How an entity is *drawn*, as registered components |
+| **Game** | `core/game.ts` | `RoverGame`: loop, input, audio, view switching, save |
+| **Authoring** | `world/authoring.ts`, `world/analysis.ts`, `world/registry.ts` | Drafts, validation, the inspector schema, terrain measurement, the runtime catalogue |
+
+The rule that keeps this honest: **gameplay lives in `sim/` and `parts/`**.
+Views and UI observe state and call actions; they never decide outcomes. A game
+that replaces every pixel of the presentation still plays identical missions.
+
+## Scenes, in 2D and 3D
+
+A scene is the renderer-agnostic description of a frame:
+
+```ts
+const scene = game.scene();
+// { id, name, view, size, time, daylight, home, entities: [
+//   { id: 'rover', kind: 'rover', pos: {x, y}, z, facing, data: {...}, ref },
+//   { id: 'st_3', kind: 'structure', variant: 'refinery', data: { powered: true } },
+// ] }
+```
+
+Two views ship, and both draw the same world:
+
+- **`iso`** — the isometric voxel diorama: smoothed surfaces, cliffs, strata,
+  ambient life. The default, and what "3D" means here (2.5D projection over
+  Canvas 2D — there is no GL dependency).
+- **`flat`** — the top-down 2D map: hillshaded heightfield, grid, contour
+  shading, entity glyphs, scanner reach and the home pin. Rasterised once per
+  world change, so a frame is one scaled blit plus entities.
+
+```ts
+game.setView('flat');   // or game.toggleView()
+game.view;              // 'flat'
+game.camera;            // shared by both views — switching keeps your place
+```
+
+In the game, the HUD's `⬔ / ▦` button toggles them. In the editor, the scene
+card's `3D / 2D` button does. Some screens simply read better flat — route
+planning, outpost layout, ore surveying — and a UI-heavy scene in a game built
+on TakeOn may want no diorama at all.
+
+To add a third view (WebGL, Pixi, SVG…), implement `SceneView` and draw from
+`buildScene(sim)`; nothing else needs to know.
+
+## Entities are assembled from parts
+
+The rover is not one painter — it is a list of registered parts, each with a
+condition, an order and whether it rides the suspension:
+
+```ts
+import { registerRoverPart } from '@takeon/engine';
+
+registerRoverPart({
+  id: 'my-game/pennant',
+  order: 76,
+  sprung: true,
+  when: (p) => p.has.scanner,          // build-driven
+  draw: (ctx, p) => { /* vector art in rover-local space */ },
+});
+```
+
+The built-in set reacts to the build *and* the live state: drivetrain (wheels
+or tracks, upgraded by mobility kits), solar wings with a daylight glint, an
+RTG that glows at night, camera mast, sweeping dish, scanner whip with a pulse,
+tool arm that swings and throws chips while drilling, crates that stack as the
+hold fills, a five-LED charge strip, scorch marks and sparks as the hull wears,
+a status strobe that goes red in trouble, and headlights after dusk.
+
+The flat view has its own painter per entity kind
+(`registerFlatPainter('rover', …)`), so a host can add entity types to either
+view without forking a renderer.
+
+## Noise
+
+`util/noise/` is a small field library rather than one hard-coded function:
+
+| Sampler | Character |
+|---|---|
+| `valueNoise2` | The original TakeOn field. Soft, lumpy. Cheapest |
+| `perlin2` | Gradient noise — flowing dunes and ridges |
+| `simplex2` | Isotropic gradient noise, no grid artefacts |
+| `worley2` | Cellular: craters/pans (`f1`), fractures (`f2f1`), plates (`cells`) |
+| `blueNoiseMask` / `poissonDisk` / `scatterPoints` | Evenly spread randomness for *placement* — boulders, flora, sample sites, dithering |
+
+Fractal stacking (`fbm`, `ridged`, `billow`), domain warping and frequency all
+come from one config:
+
+```ts
+const field = makeNoise(
+  { type: 'simplex', fractal: 'ridged', frequency: 0.06, octaves: 5, warp: 4 },
+  seed,
+);
+field(x, y); // [0,1]
+```
+
+A destination opts in by carrying that config:
+
+```ts
+terrain: { roughness: 0.6, craters: 4, iceCaps: 0, oreRichness: 0.5,
+           noise: { type: 'perlin', fractal: 'billow', frequency: 0.05 } }
+```
+
+**Bodies without a `noise` block keep the original field exactly** — the
+shipped worlds regenerate byte-for-byte, which matters because saves store only
+voxel edits. A test asserts it.
+
+The editor exposes all of this: a *Noise field* group in the inspector, a live
+preview of the exact field the generator will use, and a blue-noise **Scatter**
+preview.
+
+## Kinds, chunked biomes and world layers
+
+Three related, independently opt-in systems for landscapes that vary by more
+than one noise config:
+
+**Kinds** (`world/kinds.ts`) are an inheritable preset tree above `BodyDef` —
+`body` → `planet` → `rocky-planet` / `earth-like`, `body` → `moon` →
+`ice-moon` / `rocky-moon`, `body` → `asteroid` → `c/m/s-type-asteroid`,
+`body` → `gaseous`. `BodyType` ('planet'/'moon'/'asteroid'/'gaseous') is the
+coarse category gameplay branches on; a *kind* bundles the physics/palette/
+weather/climate defaults for a flavour of it, inheriting from its parent so
+you only override what's different:
+
+```ts
+import { instantiateBody } from '@takeon/engine';
+
+// A host's own solar-system sim hands in the one thing it actually knows —
+// this body's real temperature — and gets back a concrete, generatable body.
+const body = instantiateBody('rocky-planet', {
+  id: 'kepler-186f', name: 'Kepler-186f', seed: 42,
+  climate: { temperature: -63 },
+});
+```
+
+**Chunked biomes** (`world/biomes.ts`, opt in with `terrain.biomes: true`)
+divide the surface into a `CHUNK_SIZE` (16) grid, each chunk independently
+seeded and rolling one `Biome` — a small surface/subsurface material list,
+gated by the body's `kind` (`allowedBiomesForKind`) and, if set, `climate`
+(a per-chunk temperature sampled around `climate.temperature`, swung by
+`climate.tempVariance`). Ore veins stay `OreBand`'s job — a biome only
+dresses the top couple of surface voxels, so the "skin" and the "mineral
+economy underneath" stay independent, composable layers. Absent the flag, a
+body keeps the original single-skin generation byte-for-byte.
+
+**World layers** (`world/layers.ts`) are the seam for a second grid
+alongside the surface world — a cave layer, a sky layer — for a *module*
+built on top of TakeOn, not core itself: core registers none, so mining
+stays exactly what it is today (top-down, deposits and ice). A module calls
+`registerWorldLayer(id, (body, seed, world) => yourData)`; `generateTerrain`
+runs every registered generator and attaches the result to
+`world.layers[id]`, opaque to core. Deterministic like the rest of
+generation, so it needs no persistence of its own.
+
+See [LANDNAM.md](LANDNAM.md) for how this maps onto a specific host game's
+scenes.
+
+## Registries — the extension points
+
+| Registry | Add with | Used for |
+|---|---|---|
+| Destinations | `registerBody(def)` | Editor drafts, backend rows, host worlds |
+| Body kinds | `registerBodyKind(kind)` | New planet/moon/asteroid presets to `instantiateBody()` |
+| Biomes | `registerBiome(biome)` | New chunk-scale surface skins |
+| World layers | `registerWorldLayer(id, fn)` | A module adding an underground/sky grid |
+| Materials/resources | `registerMaterial`/`registerResource` | New voxel materials and cargo keys |
+| Structures | `registerStructure(def)` | New buildable structures |
+| Rover parts | `registerRoverPart(part)` | New hardware on the rover sprite |
+| Flat painters | `registerFlatPainter(kind, fn)` | Drawing new entity kinds in 2D |
+| UI components | `<TakeOnUIProvider components={…}>` | Replacing any HUD component ([UI.md](UI.md)) |
+| Editor panels | same registry, `Editor*` keys | Replacing tool panels ([EDITOR.md](EDITOR.md)) |
+| Inspector fields | `BODY_FIELDS` + `extraFields` | New authorable properties |
+| Persistence | `SyncAdapter` | Putting mission data in your database |
+| Events | `game.events` / `GAME_EVENT_KEYS` | Quests, XP, analytics — every event is enumerable |
+
+## Determinism rules
+
+1. A world is a pure function of `(BodyDef, seed)`. Never persist voxels; persist
+   edits (`MissionState`).
+2. Anything that changes generation output changes every existing save of that
+   body. New generation features must be opt-in per body (that is why
+   `terrain.noise` exists rather than a global switch).
+3. The sim uses seeded RNG only — no `Math.random` in `sim/` or `world/`.
+4. Renderer-only randomness (ambient life, particles) never feeds back into the
+   sim, and is not saved.
+
+## Adding things
+
+- **A destination** — author it in the editor, export the TS literal into
+  `world/bodies.ts`, or `registerBody()` it at runtime.
+- **A noise type** — add the sampler in `util/noise/`, list it in `NOISE_TYPES`,
+  and it appears in the config factory, the inspector and the previews.
+- **A body property** — add the field to `BodyDef`, describe it in
+  `BODY_FIELDS`, validate it in `validateBody`. The inspector picks it up.
+- **A rover component** — `registerRoverPart`.
+- **A view** — implement `SceneView`, draw from `buildScene`.
+- **A HUD component** — add a slot key in `@takeon/ui` and register the default.
+- **A gameplay rule** — it goes in `sim/`, with a test. Nowhere else.
diff --git a/docs/INTEGRATION.md b/docs/INTEGRATION.md
index 8c2edc2..b32ba5a 100644
--- a/docs/INTEGRATION.md
+++ b/docs/INTEGRATION.md
@@ -2,8 +2,18 @@
 
 TakeOn's engine is a plain TypeScript library with no framework or asset
 dependencies — everything (terrain sprites, rover, structures, anomalies) is
-drawn procedurally into a canvas it owns. That makes three integration levels
-possible.
+drawn procedurally into a canvas it owns. That makes several integration levels
+possible: a bare canvas, a PixiJS stage, or — if your game is React —
+`@takeon/ui`, whose every component the host can replace ([UI.md](UI.md)).
+Worlds themselves are authored in `@takeon/editor` ([EDITOR.md](EDITOR.md)),
+and the engine's own structure — layers, scenes, views, entity parts, noise —
+is mapped in [ENGINE.md](ENGINE.md). For the Star Sailors ecosystem
+specifically, [LANDNAM.md](LANDNAM.md) maps Landnam's construction,
+underground and settlement/exploration scenes onto this API.
+
+Missions render in two built-in views: the isometric diorama and a top-down 2D
+map (`game.setView('flat')`). If neither suits your game, take
+`game.scene()` — a renderer-agnostic list of entities — and draw it yourself.
 
 ## 1. Drop-in canvas (any host)
 
@@ -66,6 +76,30 @@ game, and `mounted.destroy()` releases the sprite, texture, input and loop.
 
 Returned handle: `{ game, sprite, resize(w, h), destroy() }`.
 
+## 3. Inside a React app (`@takeon/ui`)
+
+```tsx
+import { TakeOnMission } from '@takeon/ui';
+import '@takeon/ui/styles.css';
+
+<TakeOnMission
+  body={getBody('mars')!}
+  spec={playerRover}
+  sync={myAdapter}
+  ui={{ components: { ActionBar: MyActionBar }, theme: { accent: '#ff8a3d' } }}
+  onEnd={({ credits }) => award(credits)}
+/>;
+```
+
+`MissionProvider` owns the engine loop, HUD state, toasts and persistence;
+every HUD component is resolved through a registry, so a host game can replace,
+wrap, restyle or extend any of them — or drop the stock HUD entirely and build
+its own from `useMission()`. Full guide: [UI.md](UI.md).
+
+Custom destinations authored in the editor (or fetched from your backend) are
+published with `registerBody(def)`; `getBody`/`listBodies` then resolve them
+everywhere, including in the launch screen and in saved missions.
+
 ## Events
 
 `game.events.on(name, handler)` — the full host-integration surface:
diff --git a/docs/LANDNAM.md b/docs/LANDNAM.md
new file mode 100644
index 0000000..d97725b
--- /dev/null
+++ b/docs/LANDNAM.md
@@ -0,0 +1,97 @@
+# Landnam readiness
+
+[Landnam](https://github.com/Signal-K/planet-hunters-experiment-1) is a
+Star Sailors spoke that vendors `@takeon/engine`/`@takeon/pixi` as `file:`
+tarballs (`web/vendor/takeon/`) and currently only wires them into a
+standalone technical-preview demo (`TakeonEngineDemo.tsx`), not into live
+game state. This maps its four scene families — construction, underground,
+settlement/exploration — onto what TakeOn now provides, and what changed in
+this repo to close the gaps found during the audit. No changes were made to
+the Landnam repository; it is read-only context for this engine.
+
+## Construction
+
+Landnam's live build screen (`BuildPlaceScreen.tsx`) already matches TakeOn's
+shape: a plot grid, a structure catalog, and a cost-in-minerals gate. TakeOn
+covers this with `STRUCTURES`, `game.build(type)`/`built`/`buildFailed`
+events, and `RECIPES`/`game.craft(id)` for refining (see
+[INTEGRATION.md](INTEGRATION.md)). The gap was that Landnam's structure and
+mineral catalogs (`target-structures.ts`, `minerals.ts`) don't line up with
+TakeOn's fixed built-in `StructureType`/`ResourceKey` unions — a spoke can't
+register its own building or ore without either forking the engine or
+waiting on a PR here.
+
+**Fix**: `StructureType` and `ResourceKey` are now open string unions
+(`| (string & {})`), and `MATERIALS`/`RESOURCE_NAMES`/`RESOURCE_VALUE`/
+`STRUCTURES` are backed by a real registry (`registerStructure`,
+`registerResource`, `registerResourceValue`, `registerMaterial` — all
+exported from `@takeon/engine`). A host registers its own catalog once at
+startup; every internal call site (`MATERIALS[m]`, `STRUCTURES[type]`,
+build/craft/render code) already reads through these objects, so custom
+entries work with zero engine changes. Landnam's 10 `TARGET_STRUCTURES` and
+16 `MINERAL_META` entries can be registered directly instead of remapped
+onto TakeOn's built-in set.
+
+Also unblocked: Landnam's orphaned decorative `ConstructionTargetCanvas`
+scene (3 fixed pads, no simulation underneath) can now be replaced with a
+real `game.build()`-backed screen if Landnam wants it live.
+
+## Underground
+
+Landnam's `HubSubsurfaceView.tsx` is a static SVG of three fixed strata
+(topsoil/subsoil/bedrock, each a hardcoded mineral). TakeOn had the data for
+a *real* underground view (`crossSection()` in `world/analysis.ts`) but no
+ore stratification (bodies only had a flat iron/copper/titanium mix) and no
+reusable painter — the pixel-to-canvas logic lived inside `@takeon/editor`'s
+internal `maps.ts`, unusable by a host game.
+
+**Fix, two parts**:
+
+1. **Depth-stratified ore** (`OreBand`, opt-in per body via
+   `terrain.bands`): fraction-of-column-depth bands (`from`/`to` in `0..1`,
+   independent of a body's `maxHeight`) each naming which materials can
+   appear in that stratum. Bodies that don't opt in keep the old flat mix
+   byte-identical (`test/noise.test.ts`, `test/ore-bands.test.ts`). This is
+   what makes Landnam's "topsoil is platinum, bedrock is rhodium/gold" idea
+   an actual generation rule instead of a hand-drawn illustration.
+2. **A droppable component**: `crossSectionImage()`/`renderCrossSection()`
+   (`@takeon/engine`, `render/cross-section.ts`) turn a world slice into
+   real pixels — DOM-free (`crossSectionImage` feature-detects `ImageData`
+   so it runs in a worker or a Node test) and canvas-blitting
+   (`renderCrossSection`). `@takeon/ui` wraps it as `<CrossSectionView/>`: a
+   live panel that follows the rover's position along an axis and redraws
+   on an interval, styled to match the rest of the HUD
+   (`.tk-cross-section*` in `styles.css`). It isn't part of the default
+   `MissionScreen` layout — mount it via a slot, a custom panel, or a
+   standalone screen, matching how Landnam's subsurface view is its own
+   route/screen already.
+
+`@takeon/editor`'s own cross-section tool now delegates to the same
+`renderCrossSection()` rather than duplicating the pixel logic, so the
+editor preview and the in-game view are guaranteed to agree.
+
+## Settlement / exploration
+
+Landnam's `RoverMiningScreen.tsx` is a stub timer, not a simulation — this
+is the one scene family that isn't a TakeOn gap so much as a Landnam
+integration gap. TakeOn's actual rover sim already exercises this world:
+`game.move`/`game.mine`/`game.scan`/`game.photo`, `anomalyDocumented`
+discoveries, and the pure offline-first objective module
+(`createWorldState`/`explore`/`deriveMissionProgress`) for a lighter,
+non-realtime progress loop if Landnam doesn't want the full tile sim. Per
+Landnam's own decision doc (`.knowns-outbox/takeon-decision-bundle-*.md`),
+exploration is intended as the first mechanic to prove out — nothing further
+was needed engine-side for this pass; settlements/refineries/research-labs
+are called out there as a later module split, which the construction-scene
+work above already anticipates (open catalogs, no engine fork needed).
+
+## Summary of engine changes
+
+| Area | Before | After |
+|---|---|---|
+| `Material`, `ResourceKey`, `StructureType` | closed enum / string unions | open, with a mutation-based runtime registry |
+| Ore placement | flat mix, whole column | optional `terrain.bands` depth strata, opt-in per body |
+| Underground rendering | trapped in `@takeon/editor`'s `maps.ts` | `@takeon/engine`'s `crossSectionImage`/`renderCrossSection` + `@takeon/ui`'s `<CrossSectionView/>` |
+
+All of the above ships in `@takeon/engine` v0.2.0+ and `@takeon/ui` v0.2.0+;
+Landnam picks it up by bumping its vendored tarballs.
diff --git a/docs/UI.md b/docs/UI.md
new file mode 100644
index 0000000..650c7fa
--- /dev/null
+++ b/docs/UI.md
@@ -0,0 +1,168 @@
+# Adapting the UI (`@takeon/ui`)
+
+TakeOn's HUD is a React package, and **every component in it is replaceable by
+the app that sits on top of TakeOn**. A game built on the module — Landnam, or
+anything else in the Star Sailors ecosystem — can keep the parts it likes,
+restyle the parts it doesn't, and swap out whole panels, without forking this
+repo.
+
+Two pieces make that work:
+
+- **`MissionProvider`** owns a running mission: engine lifecycle, a React-shaped
+  HUD snapshot, toasts, autosave and the player actions. It contains no styling
+  and no routing.
+- **`TakeOnUIProvider`** is a registry. Every built-in component is registered
+  under a key and looked up at render time, so overriding a key replaces that
+  component everywhere it appears — including inside components you did not
+  override.
+
+```tsx
+import { MissionProvider, MissionScreen, TakeOnUIProvider } from '@takeon/ui';
+import '@takeon/ui/styles.css';
+
+<TakeOnUIProvider
+  components={{ ActionBar: MyActionBar }}     // replace a component
+  labels={{ 'action.mine': 'Dig' }}           // reskin the words
+  classNames={{ HudBar: 'my-hud' }}           // restyle in place
+  slots={{ 'hudBar.end': <MyQuestChip /> }}   // inject extra chrome
+  theme={{ accent: '#ff8a3d' }}               // recolour via CSS variables
+>
+  <MissionProvider body={body} spec={spec} sync={myAdapter}>
+    <MissionScreen />
+  </MissionProvider>
+</TakeOnUIProvider>;
+```
+
+Or the one-liner, which wires all three together:
+
+```tsx
+<TakeOnMission body={body} spec={spec} sync={myAdapter} ui={{ ... }} />
+```
+
+## The four levers, cheapest first
+
+### 1. `theme` — CSS variables
+
+Every colour, edge and font in the stock skin comes from a `--tk-*` custom
+property: `bg`, `panel`, `panel-solid`, `panel-raised`, `border`, `hairline`,
+`text`, `text-dim`, `accent`, `accent-2`, `good`, `warn`, `bad`, `radius`,
+`notch` (corner cut on panel frames), `font` and `glow`. Setting them re-skins
+the whole HUD without overriding a single rule (they can also be set in plain
+CSS on any ancestor).
+
+The stock look is a pulp sci-fi homage — deep-space panels with hairline neon
+edges, hex cells for anything you press, segmented gauges, uppercase condensed
+type, and a vignette over the scene. It ships as pure CSS: no web fonts, no
+images, nothing fetched at runtime. Swap `accent`/`accent-2` and the whole HUD
+changes allegiance; set `notch: 0` for square frames.
+
+### 2. `labels` — strings and icons
+
+Every user-visible string is looked up by key with the built-in text as
+fallback: `action.mine`, `action.build`, `hud.battery` ("Power"),
+`hud.durability` ("Hull"), `hud.cargo` ("Hold"), `hud.end`, `tile.drive`,
+`end.confirm`, `common.close`, and so on. Useful for tone ("Dig", "Salvage"),
+localisation, or matching your game's vocabulary.
+
+### 3. `classNames` and `slots` — extend without replacing
+
+`classNames` appends classes to a component's root element, keyed by slot name.
+`slots` injects content at named anchors:
+
+`hudBar.start`, `hudBar.end`, `actionBar.start`, `actionBar.end`,
+`tileMenu.end`, `mission.overlay` (exported as `SLOT_ANCHORS`).
+
+### 4. `components` — replace outright
+
+Keys (exported as `SLOT_KEYS`):
+
+| Key | What it is |
+|---|---|
+| `MissionScreen` | The whole layout |
+| `MissionCanvas` | The render surface (mounting it boots the engine) |
+| `HudBar` | Top status strip |
+| `DPad` | Touch drive pad |
+| `ActionBar` | Mine / photo / scan on the hotbar directly; build / craft / place / repair / deposit / hold behind one "More" tray |
+| `Minimap` | Corner map |
+| `TileMenu` | Tap-a-tile context menu |
+| `BuildPanel`, `CraftPanel`, `CargoPanel`, `EndMissionDialog` | Modal panels |
+| `ToastStack` | Event feedback |
+| `Meter`, `Modal`, `Chip` | Shared primitives — override these to restyle everything at once |
+
+An override receives the same props as the default and can render the default
+to *wrap* rather than replace it:
+
+```tsx
+import { HudBar, useMission } from '@takeon/ui';
+
+function MyHudBar(props) {
+  const { hud } = useMission();
+  return (
+    <>
+      <HudBar.Default {...props} />
+      <MyOxygenGauge value={hud?.battery ?? 0} />
+    </>
+  );
+}
+```
+
+Rendering `<HudBar/>` (not `.Default`) from inside its own override is safe too:
+the registry suppresses the override one level deep instead of recursing.
+
+## Building a completely custom HUD
+
+Drop the stock screen and use the hooks. The provider still handles the engine
+loop, persistence and toasts:
+
+```tsx
+import { MissionProvider, MissionCanvas, useMission } from '@takeon/ui';
+
+function MyHud() {
+  const { hud, actions, setPanel } = useMission();
+  if (!hud) return null;
+  return (
+    <div className="my-hud">
+      <Battery value={hud.battery} max={hud.batteryMax} />
+      <button onClick={actions.mine} disabled={!hud.can.mine}>Mine</button>
+      <button onClick={() => setPanel('build')}>Build</button>
+    </div>
+  );
+}
+
+<MissionProvider body={body} spec={spec} sync={sync}>
+  <MissionCanvas />
+  <MyHud />
+</MissionProvider>;
+```
+
+`useMission()` gives you `hud` (battery, durability, cargo, banked yield,
+daylight, weather, position, anomaly counts, capabilities, current order),
+`actions` (every player verb, including `save` and `endMission`), panel and
+tile-menu state, the live `RoverGame`, and the toast queue.
+
+For a HUD outside a mission (shared chrome that renders on any screen), use
+`useMissionMaybe()`, which returns `null` instead of throwing.
+
+## Hooking into the game
+
+`MissionProvider` props cover the integration points a host game needs:
+
+| Prop | Purpose |
+|---|---|
+| `sync` | A `SyncAdapter` — autosave, photo upload, discovery recording and mission payout all route through it |
+| `onSave`, `onEnd`, `onPhoto`, `onDiscovery` | Callbacks if you'd rather persist yourself |
+| `onEvent` | Firehose of **every** engine event (`GAME_EVENT_KEYS`) for quests, XP and analytics |
+| `onReady` | The `RoverGame` instance, for anything the wrapper doesn't expose |
+| `toasts`, `audio`, `controls`, `autosaveMs`, `hudIntervalMs` | Turn built-in behaviour off when the host provides its own |
+
+The provider deliberately does **no data loading**: the host resolves which
+world and rover to run (from a route, a database, a quest) and hands them in.
+See `web/app/mission/page.tsx` — the standalone app is itself just a host, and
+uses no private API.
+
+## Where the rules stay
+
+Overriding UI never changes gameplay. All rules live in
+`packages/engine/src/sim/` and `parts/`; components only observe state and call
+actions. A game that replaces every component still plays identical missions —
+which is the point of the split.
diff --git a/package-lock.json b/package-lock.json
index 3594feb..5597126 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "workspaces": [
         "packages/engine",
         "packages/pixi-adapter",
+        "packages/ui",
+        "packages/editor",
         "web"
       ]
     },
@@ -981,6 +983,10 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@takeon/editor": {
+      "resolved": "packages/editor",
+      "link": true
+    },
     "node_modules/@takeon/engine": {
       "resolved": "packages/engine",
       "link": true
@@ -989,6 +995,10 @@
       "resolved": "packages/pixi-adapter",
       "link": true
     },
+    "node_modules/@takeon/ui": {
+      "resolved": "packages/ui",
+      "link": true
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
@@ -2285,6 +2295,25 @@
         "node": ">=8"
       }
     },
+    "packages/editor": {
+      "name": "@takeon/editor",
+      "version": "0.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@takeon/engine": "^0.2.0",
+        "@takeon/ui": "^0.2.0"
+      },
+      "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "react": "^19.0.0",
+        "typescript": "^5.6.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "packages/engine": {
       "name": "@takeon/engine",
       "version": "0.2.0",
@@ -2313,11 +2342,33 @@
         }
       }
     },
+    "packages/ui": {
+      "name": "@takeon/ui",
+      "version": "0.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@takeon/engine": "^0.2.0"
+      },
+      "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "typescript": "^5.6.0",
+        "vitest": "^4.1.10"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "web": {
       "name": "takeon-web",
       "version": "0.1.0",
       "dependencies": {
+        "@takeon/editor": "*",
         "@takeon/engine": "*",
+        "@takeon/ui": "*",
         "next": "^15.3.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
diff --git a/package.json b/package.json
index 13d089b..41838a5 100644
--- a/package.json
+++ b/package.json
@@ -2,16 +2,19 @@
   "name": "takeon",
   "private": true,
   "version": "0.1.0",
-  "description": "TakeOn — modular isometric voxel rover game for the Star Sailors ecosystem. Standalone or embeddable (PixiJS/Landnam).",
+  "description": "TakeOn \u2014 modular isometric voxel rover game for the Star Sailors ecosystem. Standalone or embeddable (PixiJS/Landnam).",
   "workspaces": [
     "packages/engine",
     "packages/pixi-adapter",
+    "packages/ui",
+    "packages/editor",
     "web"
   ],
   "scripts": {
-    "build": "npm run build -w @takeon/engine && npm run build -w @takeon/pixi && npm run build -w takeon-web",
-    "test": "npm run test -w @takeon/engine",
+    "build": "npm run build -w @takeon/engine && npm run build -w @takeon/pixi && npm run build -w @takeon/ui && npm run build -w @takeon/editor && npm run build -w takeon-web",
+    "test": "npm run test -w @takeon/engine && npm run test -w @takeon/ui",
     "dev": "npm run dev -w takeon-web",
+    "editor": "npm run dev -w takeon-web",
     "backend": "cd pocketbase && go run . serve --http 0.0.0.0:8094"
   }
 }
diff --git a/packages/editor/LICENSE b/packages/editor/LICENSE
new file mode 100644
index 0000000..2661875
--- /dev/null
+++ b/packages/editor/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Signal-K
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/editor/package.json b/packages/editor/package.json
new file mode 100644
index 0000000..fce63e4
--- /dev/null
+++ b/packages/editor/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@takeon/editor",
+  "version": "0.2.0",
+  "description": "Mountable authoring tool for TakeOn worlds: inspector, live iso viewport, noise/terrain maps and in-editor play mode.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "default": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Signal-K/takeon.git",
+    "directory": "packages/editor"
+  },
+  "homepage": "https://github.com/Signal-K/takeon#readme",
+  "bugs": "https://github.com/Signal-K/takeon/issues",
+  "keywords": [
+    "takeon",
+    "game-editor",
+    "level-editor",
+    "terrain",
+    "noise",
+    "procedural",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node ../../scripts/copy-assets.mjs src/styles.css dist/styles.css",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@takeon/engine": "^0.2.0",
+    "@takeon/ui": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.6.0"
+  }
+}
diff --git a/packages/editor/src/TakeOnEditor.tsx b/packages/editor/src/TakeOnEditor.tsx
new file mode 100644
index 0000000..4232a96
--- /dev/null
+++ b/packages/editor/src/TakeOnEditor.tsx
@@ -0,0 +1,273 @@
+import {
+  analyzeTerrain,
+  type BodyDef,
+  type BodyField,
+  type RoverGame,
+  type RoverSpec,
+  type ViewKind,
+} from '@takeon/engine';
+import { MissionProvider, MissionScreen, TakeOnUIProvider, type TakeOnUIConfig } from '@takeon/ui';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AnalysisPanel } from './panels/AnalysisPanel.js';
+import { BodyBrowser } from './panels/BodyBrowser.js';
+import { EditorCard } from './panels/Card.js';
+import { ConsolePanel, type ConsoleLine } from './panels/ConsolePanel.js';
+import { Inspector } from './panels/Inspector.js';
+import { MapsPanel } from './panels/MapsPanel.js';
+import { RoverPanel } from './panels/RoverPanel.js';
+import { Toolbar } from './panels/Toolbar.js';
+import { Viewport } from './panels/Viewport.js';
+import { useEditorSim } from './useEditorSim.js';
+import { useEditorState, type EditorPersistedState, type EditorStorage } from './state.js';
+
+export type EditorTheme = 'light' | 'dark';
+
+export interface TakeOnEditorProps {
+  /** Extra destinations to edit alongside the built-ins (e.g. backend rows). */
+  bodies?: BodyDef[];
+  /** Where the project is stored; pass null to keep it in memory only. */
+  storage?: EditorStorage | null;
+  storageKey?: string;
+  /** Publish drafts to the engine's body registry as they change (default true). */
+  publish?: boolean;
+  /** Fires on every project change — persist to your own backend here. */
+  onChange?(state: EditorPersistedState): void;
+  /** Host-specific inspector fields, using the engine's field schema shape. */
+  extraFields?: BodyField[];
+  /** Initial chrome theme (default light); the toolbar toggle overrides it. */
+  theme?: EditorTheme;
+  /** Overrides for the editor's own panels and for the in-editor mission HUD. */
+  ui?: TakeOnUIConfig;
+  className?: string;
+}
+
+const THEME_KEY = 'takeon.editor.theme';
+
+/**
+ * A minimal game editor for TakeOn worlds — scene view, inspector, project
+ * tree, terrain instruments and play mode, in the browser or in a desktop
+ * shell.
+ *
+ * Layout is one uniform grid of equal-height cards rather than sidebars: every
+ * panel has the same header, the same footprint and the same scroll behaviour,
+ * so nothing shifts as content grows. It is a single React component with no
+ * routing of its own, so it drops into this repo's Next.js app, into Landnam,
+ * or into an Electron window unchanged. Every panel is registered through
+ * @takeon/ui's slot registry (see `EDITOR_SLOT_KEYS`).
+ */
+export function TakeOnEditor({
+  bodies,
+  storage,
+  storageKey,
+  publish,
+  onChange,
+  extraFields,
+  theme: initialTheme = 'light',
+  ui,
+  className,
+}: TakeOnEditorProps) {
+  const editor = useEditorState({ bodies, storage, storageKey, publish, onChange });
+  const [mode, setMode] = useState<'edit' | 'play'>('edit');
+  const [theme, setTheme] = useState<EditorTheme>(initialTheme);
+  const [maxClimb, setMaxClimb] = useState(2);
+  const [view, setView] = useState<ViewKind>('iso');
+  const [time, setTime] = useState(0);
+  const [lines, setLines] = useState<ConsoleLine[]>([]);
+
+  const { sim, world, version, ms, generating, regenerate } = useEditorSim(editor.body, editor.spec, mode === 'edit');
+
+  // Remember the chrome theme across sessions; the scene stays dark either way.
+  useEffect(() => {
+    if (typeof localStorage === 'undefined') return;
+    const stored = localStorage.getItem(THEME_KEY);
+    if (stored === 'light' || stored === 'dark') setTheme(stored);
+  }, []);
+  useEffect(() => {
+    if (typeof localStorage !== 'undefined') localStorage.setItem(THEME_KEY, theme);
+  }, [theme]);
+
+  const landing = useMemo(
+    () => (world ? analyzeTerrain(world, { maxClimb }).landingSite : null),
+    // Recomputed with the world; `version` marks a fresh build.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [world, version, maxClimb],
+  );
+
+  // Stop play mode when the world being played is edited out from under it.
+  useEffect(() => {
+    if (mode === 'play' && !editor.validation.ok) setMode('edit');
+  }, [mode, editor.validation.ok]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (!(e.metaKey || e.ctrlKey)) return;
+      if (e.key.toLowerCase() !== 'z') return;
+      e.preventDefault();
+      if (e.shiftKey) editor.redo();
+      else editor.undo();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [editor]);
+
+  const playGame = useRef<RoverGame | null>(null);
+  const log = useCallback((key: string, payload: unknown) => {
+    // `tick` fires 10×/s and `stateChanged` shadows other events — logging
+    // them would bury everything the designer actually pressed a button for.
+    if (key === 'tick' || key === 'stateChanged') return;
+    setLines((cur) => {
+      const line: ConsoleLine = {
+        id: (cur[cur.length - 1]?.id ?? 0) + 1,
+        t: playGame.current?.sim.time ?? 0,
+        key,
+        detail: summarise(payload),
+      };
+      return [...cur.slice(-199), line];
+    });
+  }, []);
+
+  const setSpec = (spec: RoverSpec) => editor.setSpec(spec);
+  const problems = editor.validation.errors.length + editor.validation.warnings.length;
+
+  return (
+    <TakeOnUIProvider {...ui} className={className ? `tke-root ${className}` : 'tke-root'}>
+      <div className="tke-shell" data-theme={theme}>
+        <Toolbar
+          body={editor.body}
+          mode={mode}
+          theme={theme}
+          canPlay={editor.validation.ok}
+          canUndo={editor.canUndo}
+          canRedo={editor.canRedo}
+          generating={generating}
+          genMs={ms}
+          maxClimb={maxClimb}
+          onMaxClimb={setMaxClimb}
+          onMode={setMode}
+          onTheme={setTheme}
+          onUndo={editor.undo}
+          onRedo={editor.redo}
+          onReseed={() => editor.patch('seed', Math.floor(Math.random() * 100000))}
+          onRegenerate={regenerate}
+          onImport={editor.importJson}
+        />
+
+        <div className="tke-grid">
+          <EditorCard
+            title={mode === 'play' ? `Play — ${editor.body.name}` : `Scene — ${editor.body.name}`}
+            hint={
+              mode === 'play'
+                ? 'live mission'
+                : `${view === 'iso' ? '3D diorama' : '2D map'} · drag pan · wheel zoom · R rotate · F frame`
+            }
+            className="tke-card-scene"
+            flush
+          >
+            {mode === 'play' ? (
+              <MissionProvider
+                key={`${editor.body.id}:${editor.body.seed}`}
+                body={editor.body}
+                spec={editor.spec}
+                audio={false}
+                autosaveMs={0}
+                view={view}
+                onReady={(game) => {
+                  playGame.current = game;
+                }}
+                onEvent={(key, payload) => log(key, payload)}
+              >
+                <MissionScreen />
+              </MissionProvider>
+            ) : (
+              <Viewport
+                sim={sim}
+                version={version}
+                generating={generating}
+                time={time}
+                onTimeChange={setTime}
+                view={view}
+                onViewChange={setView}
+              />
+            )}
+          </EditorCard>
+
+          <EditorCard title="Inspector" hint={problems > 0 ? `${problems} note(s)` : 'valid'}>
+            <Inspector
+              body={editor.body}
+              validation={editor.validation}
+              onPatch={editor.patch}
+              extraFields={extraFields}
+            />
+          </EditorCard>
+
+          <EditorCard title="Maps" hint="click to inspect a column">
+            <MapsPanel body={editor.body} world={world} version={version} maxClimb={maxClimb} from={landing} />
+          </EditorCard>
+
+          <EditorCard title="Analysis" hint={`climb ≤ ${maxClimb}`}>
+            <AnalysisPanel world={world} maxClimb={maxClimb} version={version} />
+          </EditorCard>
+
+          <EditorCard title="Rover" hint="used by play mode">
+            <RoverPanel spec={editor.spec} body={editor.body} onChange={setSpec} />
+          </EditorCard>
+
+          <EditorCard title="Destinations" hint="drafts shadow the shipped catalog" className="tke-card-wide">
+            <BodyBrowser
+              entries={editor.entries}
+              selectedId={editor.selectedId}
+              onSelect={editor.select}
+              onCreate={editor.create}
+              onDuplicate={editor.duplicate}
+              onRemove={editor.remove}
+              canRemove={editor.isDraft}
+            />
+          </EditorCard>
+
+          <EditorCard
+            title="Events"
+            hint="engine events during play"
+            className="tke-card-wide"
+            actions={
+              <button type="button" onClick={() => setLines([])}>
+                Clear
+              </button>
+            }
+            flush
+          >
+            <ConsolePanel lines={lines} onClear={() => setLines([])} />
+          </EditorCard>
+        </div>
+      </div>
+    </TakeOnUIProvider>
+  );
+}
+
+function summarise(payload: unknown): string {
+  if (!payload || typeof payload !== 'object') return '';
+  const parts: string[] = [];
+  for (const [key, value] of Object.entries(payload as Record<string, unknown>)) {
+    if (value === null || value === undefined) continue;
+    if (typeof value === 'object') {
+      const obj = value as Record<string, unknown>;
+      if (typeof obj.x === 'number' && typeof obj.y === 'number') parts.push(`${key}=[${obj.x},${obj.y}]`);
+      continue;
+    }
+    if (typeof value === 'string' && value.length > 40) continue;
+    parts.push(`${key}=${String(value)}`);
+  }
+  return parts.slice(0, 4).join(' ');
+}
+
+/** Panel slot keys a host can override through `TakeOnUIProvider`. */
+export const EDITOR_SLOT_KEYS = [
+  'EditorToolbar',
+  'EditorCard',
+  'EditorBodyBrowser',
+  'EditorInspector',
+  'EditorViewport',
+  'EditorMapsPanel',
+  'EditorAnalysisPanel',
+  'EditorRoverPanel',
+  'EditorConsolePanel',
+] as const;
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
new file mode 100644
index 0000000..77de3a1
--- /dev/null
+++ b/packages/editor/src/index.ts
@@ -0,0 +1,46 @@
+/**
+ * @takeon/editor — a minimal, embeddable game editor for TakeOn worlds.
+ *
+ * ```tsx
+ * import { TakeOnEditor } from '@takeon/editor';
+ * import '@takeon/ui/styles.css';
+ * import '@takeon/editor/styles.css';
+ *
+ * <TakeOnEditor onChange={(project) => save(project)} />
+ * ```
+ *
+ * The editor is a plain React component: it runs in this repo's Next.js app at
+ * `/editor`, inside another game (Landnam) or in a desktop shell, and it edits
+ * the same `BodyDef`s the engine generates worlds from — no separate format.
+ */
+
+export { TakeOnEditor, EDITOR_SLOT_KEYS, type TakeOnEditorProps, type EditorTheme } from './TakeOnEditor.js';
+export {
+  useEditorState,
+  EDITOR_STORAGE_KEY,
+  type EditorState,
+  type EditorStateOptions,
+  type EditorEntry,
+  type EditorPersistedState,
+  type EditorStorage,
+} from './state.js';
+export { useEditorSim, type EditorSim } from './useEditorSim.js';
+export {
+  paintMap,
+  paintCrossSection,
+  paintField,
+  mapPointToTile,
+  MAP_KINDS,
+  type MapKind,
+  type PaintOptions,
+} from './maps.js';
+
+export { Toolbar, type ToolbarProps } from './panels/Toolbar.js';
+export { EditorCard, type EditorCardProps } from './panels/Card.js';
+export { BodyBrowser, type BodyBrowserProps } from './panels/BodyBrowser.js';
+export { Inspector, type InspectorProps } from './panels/Inspector.js';
+export { Viewport, type ViewportProps } from './panels/Viewport.js';
+export { MapsPanel, type MapsPanelProps } from './panels/MapsPanel.js';
+export { AnalysisPanel, type AnalysisPanelProps } from './panels/AnalysisPanel.js';
+export { RoverPanel, type RoverPanelProps } from './panels/RoverPanel.js';
+export { ConsolePanel, type ConsoleLine, type ConsolePanelProps } from './panels/ConsolePanel.js';
diff --git a/packages/editor/src/maps.ts b/packages/editor/src/maps.ts
new file mode 100644
index 0000000..ea139be
--- /dev/null
+++ b/packages/editor/src/maps.ts
@@ -0,0 +1,287 @@
+import {
+  chunkBiome,
+  chunkCoords,
+  heightField,
+  MATERIALS,
+  Material,
+  reachableMask,
+  renderCrossSection,
+  slopeField,
+  type BodyDef,
+  type VoxelWorld,
+} from '@takeon/engine';
+
+/**
+ * Top-down diagnostic views of a generated world.
+ *
+ * These are the terrain-planning instruments: elevation, steepness, surface
+ * material, ore density and drivability, all sampled from the *same* world the
+ * game will run, so what you tune here is what ships. Each painter renders at
+ * one pixel per column into an offscreen buffer, then scales it up with
+ * smoothing off so individual voxels stay legible.
+ */
+
+export type MapKind = 'elevation' | 'slope' | 'surface' | 'ore' | 'reach' | 'biome';
+
+export const MAP_KINDS: { id: MapKind; label: string; help: string }[] = [
+  { id: 'elevation', label: 'Elevation', help: 'Column height — the heightmap the generator produced.' },
+  { id: 'slope', label: 'Slope', help: 'Worst height step to a neighbour. Red is above the climb limit.' },
+  { id: 'surface', label: 'Surface', help: 'Top-voxel material: the biome patches the player sees.' },
+  { id: 'ore', label: 'Ore density', help: 'Ore voxels per column, including crystal.' },
+  { id: 'reach', label: 'Drivable', help: 'Flood fill from the landing site with the current climb limit.' },
+  { id: 'biome', label: 'Biomes', help: 'Chunk-by-chunk biome assignment (needs terrain.biomes on). One flat colour per body otherwise.' },
+];
+
+export interface PaintOptions {
+  /** Drivetrain climb limit for slope/reach views. */
+  maxClimb?: number;
+  /** Start column for the drivability fill. */
+  from?: { x: number; y: number };
+  /** Row/column highlighted by the cross-section view. */
+  marker?: { axis: 'x' | 'y'; index: number } | null;
+  /** Tile to mark (the landing site by default). */
+  pin?: { x: number; y: number } | null;
+  /** Required for the 'biome' map kind — biome selection reads climate/kind off the body, not the generated world. */
+  body?: BodyDef;
+}
+
+type RGB = [number, number, number];
+
+const VOID: RGB = [10, 8, 24];
+
+/** Paint one of the diagnostic maps into a canvas, letterboxed to fit. */
+export function paintMap(canvas: HTMLCanvasElement, world: VoxelWorld, kind: MapKind, opts: PaintOptions = {}): void {
+  const size = world.size;
+  const maxClimb = opts.maxClimb ?? 2;
+  const colour = pickPainter(world, kind, maxClimb, opts);
+  const buffer = new Uint8ClampedArray(size * size * 4);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const [r, g, b] = colour(x, y);
+      const i = (y * size + x) * 4;
+      buffer[i] = r;
+      buffer[i + 1] = g;
+      buffer[i + 2] = b;
+      buffer[i + 3] = 255;
+    }
+  }
+  blit(canvas, new ImageData(buffer, size, size), (ctx, scale, ox, oy) => {
+    if (opts.marker) {
+      ctx.fillStyle = 'rgba(69, 224, 196, 0.5)';
+      if (opts.marker.axis === 'y') ctx.fillRect(ox, oy + opts.marker.index * scale, size * scale, Math.max(1, scale));
+      else ctx.fillRect(ox + opts.marker.index * scale, oy, Math.max(1, scale), size * scale);
+    }
+    if (opts.pin) {
+      ctx.strokeStyle = '#ffc857';
+      ctx.lineWidth = 2;
+      ctx.strokeRect(ox + opts.pin.x * scale - 3, oy + opts.pin.y * scale - 3, scale + 6, scale + 6);
+    }
+  });
+}
+
+function pickPainter(world: VoxelWorld, kind: MapKind, maxClimb: number, opts: PaintOptions): (x: number, y: number) => RGB {
+  const size = world.size;
+  if (kind === 'elevation') {
+    const heights = heightField(world);
+    let hi = 1;
+    for (let i = 0; i < heights.length; i++) if (heights[i] > hi) hi = heights[i];
+    return (x, y) => {
+      const h = heights[y * size + x];
+      return h < 0 ? VOID : terrainRamp(h / hi);
+    };
+  }
+  if (kind === 'slope') {
+    const slopes = slopeField(world);
+    return (x, y) => {
+      const s = slopes[y * size + x];
+      if (s < 0) return VOID;
+      if (s > maxClimb) return [232, 76, 76];
+      const t = maxClimb > 0 ? s / maxClimb : 0;
+      return [40 + t * 150, 190 - t * 60, 150 - t * 60];
+    };
+  }
+  if (kind === 'surface') {
+    return (x, y) => {
+      const h = world.height(x, y);
+      if (h < 0) return VOID;
+      return hexToRgb(MATERIALS[world.surfaceMaterial(x, y)].colors[0]);
+    };
+  }
+  if (kind === 'ore') {
+    return (x, y) => {
+      const h = world.height(x, y);
+      if (h < 0) return VOID;
+      let ore = 0;
+      let crystal = 0;
+      for (let z = 0; z <= h; z++) {
+        const m = world.get(x, y, z);
+        if (m === Material.Crystal) crystal++;
+        else if (m === Material.IronOre || m === Material.CopperOre || m === Material.TitaniumOre) ore++;
+      }
+      if (crystal > 0) return [199, 125, 255];
+      if (ore === 0) return [26, 22, 54];
+      const t = Math.min(1, ore / 6);
+      return [60 + t * 190, 50 + t * 90, 40];
+    };
+  }
+  if (kind === 'biome') {
+    const body = opts.body;
+    return (x, y) => {
+      const h = world.height(x, y);
+      if (h < 0) return VOID;
+      if (!body) return [90, 84, 110];
+      const { cx, cy } = chunkCoords(x, y);
+      return biomeColor(chunkBiome(body, cx, cy, body.seed).id);
+    };
+  }
+  const mask = reachableMask(world, opts.from ?? { x: size >> 1, y: size >> 1 }, maxClimb);
+  return (x, y) => {
+    const h = world.height(x, y);
+    if (h < 0) return VOID;
+    return mask[y * size + x] ? [69, 180, 140] : [150, 80, 60];
+  };
+}
+
+/** Stable, distinct colour per biome id — a string hash into HSL, not a lookup table, so custom biomes get one for free. */
+function biomeColor(id: string): RGB {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
+  const hue = h % 360;
+  return hslToRgb(hue, 0.55, 0.55);
+}
+
+function hslToRgb(h: number, s: number, l: number): RGB {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let [r, g, b] = [0, 0, 0];
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255];
+}
+
+/**
+ * Vertical slice, drawn with the real material palette — this is also the
+ * "underground scene" mechanic: `@takeon/engine`'s `renderCrossSection` (the
+ * same function this delegates to) is host-usable directly, and
+ * `@takeon/ui`'s `<CrossSectionView>` wraps it as a live, mission-driven
+ * panel, not just an editor tool.
+ */
+export function paintCrossSection(
+  canvas: HTMLCanvasElement,
+  world: VoxelWorld,
+  axis: 'x' | 'y',
+  index: number,
+): void {
+  renderCrossSection(canvas, world, axis, index);
+}
+
+/** Raw 2D noise preview, for tuning frequency/octaves before generating. */
+export function paintField(
+  canvas: HTMLCanvasElement,
+  size: number,
+  sample: (x: number, y: number) => number,
+  ramp: (t: number) => RGB = grayRamp,
+): void {
+  const buffer = new Uint8ClampedArray(size * size * 4);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const [r, g, b] = ramp(Math.max(0, Math.min(1, sample(x, y))));
+      const i = (y * size + x) * 4;
+      buffer[i] = r;
+      buffer[i + 1] = g;
+      buffer[i + 2] = b;
+      buffer[i + 3] = 255;
+    }
+  }
+  blit(canvas, new ImageData(buffer, size, size));
+}
+
+/**
+ * Canvas pixel → world column for the top-down maps, matching `blit`'s
+ * letterboxing so clicks land on the tile under the cursor.
+ */
+export function mapPointToTile(
+  canvas: HTMLCanvasElement,
+  world: VoxelWorld,
+  clientX: number,
+  clientY: number,
+): { x: number; y: number } | null {
+  const rect = canvas.getBoundingClientRect();
+  const scale = Math.max(0.0001, Math.min(rect.width / world.size, rect.height / world.size));
+  const ox = (rect.width - world.size * scale) / 2;
+  const oy = (rect.height - world.size * scale) / 2;
+  const x = Math.floor((clientX - rect.left - ox) / scale);
+  const y = Math.floor((clientY - rect.top - oy) / scale);
+  if (x < 0 || y < 0 || x >= world.size || y >= world.size) return null;
+  return { x, y };
+}
+
+function blit(
+  canvas: HTMLCanvasElement,
+  image: ImageData,
+  overlay?: (ctx: CanvasRenderingContext2D, scale: number, ox: number, oy: number) => void,
+): void {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const rect = canvas.getBoundingClientRect();
+  const dpr = Math.min(2, typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1);
+  const w = Math.max(1, Math.round((rect.width || image.width) * dpr));
+  const h = Math.max(1, Math.round((rect.height || image.height) * dpr));
+  if (canvas.width !== w || canvas.height !== h) {
+    canvas.width = w;
+    canvas.height = h;
+  }
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const cssW = w / dpr;
+  const cssH = h / dpr;
+  ctx.clearRect(0, 0, cssW, cssH);
+
+  const source = document.createElement('canvas');
+  source.width = image.width;
+  source.height = image.height;
+  source.getContext('2d')?.putImageData(image, 0, 0);
+
+  const scale = Math.min(cssW / image.width, cssH / image.height);
+  const ox = (cssW - image.width * scale) / 2;
+  const oy = (cssH - image.height * scale) / 2;
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(source, ox, oy, image.width * scale, image.height * scale);
+  overlay?.(ctx, scale, ox, oy);
+}
+
+/** Low → deep blue-violet, mid → warm ochre, high → pale. */
+function terrainRamp(t: number): RGB {
+  const stops: [number, RGB][] = [
+    [0, [32, 26, 72]],
+    [0.35, [92, 62, 120]],
+    [0.6, [196, 128, 74]],
+    [0.85, [235, 196, 122]],
+    [1, [248, 240, 224]],
+  ];
+  for (let i = 1; i < stops.length; i++) {
+    if (t <= stops[i][0]) {
+      const [t0, c0] = stops[i - 1];
+      const [t1, c1] = stops[i];
+      const k = (t - t0) / (t1 - t0 || 1);
+      return [c0[0] + (c1[0] - c0[0]) * k, c0[1] + (c1[1] - c0[1]) * k, c0[2] + (c1[2] - c0[2]) * k];
+    }
+  }
+  return stops[stops.length - 1][1];
+}
+
+function grayRamp(t: number): RGB {
+  const v = 20 + t * 220;
+  return [v, v, v];
+}
+
+function hexToRgb(hex: string): RGB {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.split('').map((c) => c + c).join('') : h;
+  const n = parseInt(full, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
diff --git a/packages/editor/src/panels/AnalysisPanel.tsx b/packages/editor/src/panels/AnalysisPanel.tsx
new file mode 100644
index 0000000..f4d006a
--- /dev/null
+++ b/packages/editor/src/panels/AnalysisPanel.tsx
@@ -0,0 +1,117 @@
+import {
+  analyzeTerrain,
+  MATERIALS,
+  RESOURCE_NAMES,
+  type Material,
+  type ResourceKey,
+  type VoxelWorld,
+} from '@takeon/engine';
+import { createSlot } from '@takeon/ui';
+import { useMemo } from 'react';
+
+export interface AnalysisPanelProps {
+  world: VoxelWorld | null;
+  /** Climb limit used for the drivability figure. */
+  maxClimb: number;
+  version: number;
+}
+
+/**
+ * The numbers behind the map: relief, steepness, drivable fraction, surface
+ * mix and total recoverable resources. This is what turns "looks about right"
+ * into "this world is 92% drivable and holds 1.2k iron".
+ */
+function DefaultAnalysisPanel({ world, maxClimb, version }: AnalysisPanelProps) {
+  const analysis = useMemo(
+    () => (world ? analyzeTerrain(world, { maxClimb }) : null),
+    // `version` changes whenever the world is regenerated in place.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [world, maxClimb, version],
+  );
+  if (!analysis) return <div className="tke-empty">No world generated yet.</div>;
+
+  const surface = Object.entries(analysis.surface)
+    .map(([m, count]) => ({ material: Number(m) as Material, count: count ?? 0 }))
+    .sort((a, b) => b.count - a.count);
+  const resources = Object.entries(analysis.resources)
+    .map(([r, amount]) => ({ resource: r as ResourceKey, amount: amount ?? 0 }))
+    .sort((a, b) => b.amount - a.amount);
+  const peak = Math.max(1, ...analysis.heightHistogram);
+
+  return (
+    <div className="tke-analysis">
+      <div className="tke-stats">
+        <Stat label="Columns" value={`${analysis.solidColumns}`} sub={`${(analysis.voidFraction * 100).toFixed(0)}% void`} />
+        <Stat label="Height" value={`${analysis.minHeight}–${analysis.maxHeight}`} sub={`mean ${analysis.meanHeight.toFixed(1)}`} />
+        <Stat label="Relief" value={`${analysis.relief}`} sub="voxels" />
+        <Stat
+          label="Drivable"
+          value={`${(analysis.traversable.reachableFraction * 100).toFixed(0)}%`}
+          sub={`climb ≤ ${maxClimb}`}
+          tone={analysis.traversable.reachableFraction < 0.6 ? 'bad' : analysis.traversable.reachableFraction < 0.85 ? 'warn' : 'good'}
+        />
+        <Stat
+          label="Cliffs"
+          value={`${(analysis.slope.steepFraction * 100).toFixed(0)}%`}
+          sub={`max step ${analysis.slope.max}`}
+          tone={analysis.slope.steepFraction > 0.35 ? 'warn' : undefined}
+        />
+        <Stat label="Landing" value={`${analysis.landingSite.x},${analysis.landingSite.y}`} sub="deterministic" />
+      </div>
+
+      <h4>Height distribution</h4>
+      <div className="tke-histogram">
+        {analysis.heightHistogram.map((count, z) => (
+          <span
+            key={z}
+            className="tke-bar"
+            style={{ height: `${(count / peak) * 100}%` }}
+            title={`z${z}: ${count} columns`}
+          />
+        ))}
+      </div>
+
+      <h4>Surface mix</h4>
+      <ul className="tke-bars">
+        {surface.map(({ material, count }) => (
+          <li key={material}>
+            <span className="tke-swatch" style={{ background: MATERIALS[material].colors[0] }} />
+            <span className="tke-bars-label">{MATERIALS[material].name}</span>
+            <span className="tke-bars-track">
+              <span
+                className="tke-bars-fill"
+                style={{ width: `${(count / Math.max(1, analysis.solidColumns)) * 100}%`, background: MATERIALS[material].colors[0] }}
+              />
+            </span>
+            <span className="tke-bars-value">{((count / Math.max(1, analysis.solidColumns)) * 100).toFixed(0)}%</span>
+          </li>
+        ))}
+      </ul>
+
+      <h4>Recoverable resources</h4>
+      <table className="tke-table">
+        <tbody>
+          {resources.map(({ resource, amount }) => (
+            <tr key={resource}>
+              <td>{RESOURCE_NAMES[resource]}</td>
+              <td>{amount.toLocaleString()}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p className="tke-hint">Totals assume every voxel is mined — treat them as an upper bound on mission yield.</p>
+    </div>
+  );
+}
+
+function Stat({ label, value, sub, tone }: { label: string; value: string; sub?: string; tone?: 'good' | 'warn' | 'bad' }) {
+  return (
+    <div className={tone ? `tke-stat tke-${tone}` : 'tke-stat'}>
+      <span className="tke-stat-label">{label}</span>
+      <b>{value}</b>
+      {sub && <em>{sub}</em>}
+    </div>
+  );
+}
+
+export const AnalysisPanel = createSlot('EditorAnalysisPanel', DefaultAnalysisPanel);
diff --git a/packages/editor/src/panels/BodyBrowser.tsx b/packages/editor/src/panels/BodyBrowser.tsx
new file mode 100644
index 0000000..1eb4b23
--- /dev/null
+++ b/packages/editor/src/panels/BodyBrowser.tsx
@@ -0,0 +1,61 @@
+import { createSlot } from '@takeon/ui';
+import type { EditorEntry } from '../state.js';
+
+export interface BodyBrowserProps {
+  entries: EditorEntry[];
+  selectedId: string;
+  onSelect(id: string): void;
+  onCreate(): void;
+  onDuplicate(): void;
+  onRemove(): void;
+  canRemove: boolean;
+}
+
+/** Project tree: shipped destinations plus this project's drafts. */
+function DefaultBodyBrowser({
+  entries,
+  selectedId,
+  onSelect,
+  onCreate,
+  onDuplicate,
+  onRemove,
+  canRemove,
+}: BodyBrowserProps) {
+  return (
+    <div className="tke-browser">
+      <div className="tke-browser-actions">
+        <button type="button" onClick={onCreate} title="New destination">
+          + New
+        </button>
+        <button type="button" onClick={onDuplicate} title="Duplicate the selection">
+          ⧉ Copy
+        </button>
+        <button type="button" onClick={onRemove} disabled={!canRemove} title="Discard this draft">
+          ⌫ Discard
+        </button>
+      </div>
+      <ul className="tke-list">
+        {entries.map((entry) => (
+          <li key={entry.body.id}>
+            <button
+              type="button"
+              className={entry.body.id === selectedId ? 'tke-list-item tke-selected' : 'tke-list-item'}
+              onClick={() => onSelect(entry.body.id)}
+            >
+              <span className="tke-dot" style={{ background: entry.body.palette.sky }} />
+              <span className="tke-list-text">
+                <b>{entry.body.name}</b>
+                <em>
+                  {entry.body.type} · {entry.body.size}² · seed {entry.body.seed}
+                </em>
+              </span>
+              {entry.draft && <span className="tke-badge">{entry.builtin ? 'edited' : 'custom'}</span>}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export const BodyBrowser = createSlot('EditorBodyBrowser', DefaultBodyBrowser);
diff --git a/packages/editor/src/panels/Card.tsx b/packages/editor/src/panels/Card.tsx
new file mode 100644
index 0000000..0d702d9
--- /dev/null
+++ b/packages/editor/src/panels/Card.tsx
@@ -0,0 +1,35 @@
+import { createSlot } from '@takeon/ui';
+import type { ReactNode } from 'react';
+
+export interface EditorCardProps {
+  title: string;
+  /** Short description shown next to the title. */
+  hint?: string;
+  /** Controls docked in the card header. */
+  actions?: ReactNode;
+  children: ReactNode;
+  /** Extra class, e.g. the scene card's grid span. */
+  className?: string;
+  /** Body without padding (canvases fill their card). */
+  flush?: boolean;
+}
+
+/**
+ * Every panel in the editor is one of these: identical header height,
+ * identical body, identical footprint in the grid. Consistency here is what
+ * keeps the layout in line instead of ragged.
+ */
+function DefaultEditorCard({ title, hint, actions, children, className, flush }: EditorCardProps) {
+  return (
+    <section className={className ? `tke-card ${className}` : 'tke-card'}>
+      <header className="tke-card-head">
+        <h2>{title}</h2>
+        {hint && <span className="tke-card-hint">{hint}</span>}
+        {actions && <div className="tke-card-actions">{actions}</div>}
+      </header>
+      <div className={flush ? 'tke-card-body tke-card-body-flush' : 'tke-card-body'}>{children}</div>
+    </section>
+  );
+}
+
+export const EditorCard = createSlot('EditorCard', DefaultEditorCard);
diff --git a/packages/editor/src/panels/ConsolePanel.tsx b/packages/editor/src/panels/ConsolePanel.tsx
new file mode 100644
index 0000000..467ed15
--- /dev/null
+++ b/packages/editor/src/panels/ConsolePanel.tsx
@@ -0,0 +1,39 @@
+import { createSlot } from '@takeon/ui';
+import { useEffect, useRef } from 'react';
+
+export interface ConsoleLine {
+  id: number;
+  t: number;
+  key: string;
+  detail: string;
+}
+
+export interface ConsolePanelProps {
+  lines: ConsoleLine[];
+  /** Kept for hosts that render their own header; the card supplies one. */
+  onClear(): void;
+}
+
+/** Live engine event log during play mode — the editor's "output" pane. */
+function DefaultConsolePanel({ lines }: ConsolePanelProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [lines]);
+
+  return (
+    <div className="tke-console">
+      <div className="tke-console-body" ref={ref}>
+        {lines.length === 0 && <span className="tke-hint">Press ▶ Play to drive the world and watch events here.</span>}
+        {lines.map((line) => (
+          <div key={line.id} className="tke-console-line">
+            <code>{line.t.toFixed(1)}s</code> <b>{line.key}</b> {line.detail}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export const ConsolePanel = createSlot('EditorConsolePanel', DefaultConsolePanel);
diff --git a/packages/editor/src/panels/Inspector.tsx b/packages/editor/src/panels/Inspector.tsx
new file mode 100644
index 0000000..934de42
--- /dev/null
+++ b/packages/editor/src/panels/Inspector.tsx
@@ -0,0 +1,171 @@
+import {
+  BODY_FIELD_GROUPS,
+  BODY_FIELDS,
+  getBodyField,
+  type BodyDef,
+  type BodyField,
+  type BodyValidation,
+} from '@takeon/engine';
+import { createSlot } from '@takeon/ui';
+import { useState } from 'react';
+
+export interface InspectorProps {
+  body: BodyDef;
+  validation: BodyValidation;
+  onPatch(path: string, value: unknown): void;
+  /** Extra fields contributed by the host game (same schema shape). */
+  extraFields?: BodyField[];
+}
+
+/**
+ * Property editor for the selected destination, generated from the engine's
+ * field schema — so a new BodyDef property becomes editable by describing it
+ * in `world/authoring.ts`, not by touching the editor.
+ */
+function DefaultInspector({ body, validation, onPatch, extraFields }: InspectorProps) {
+  const fields = extraFields ? [...BODY_FIELDS, ...extraFields] : BODY_FIELDS;
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  return (
+    <div className="tke-inspector">
+      {(validation.errors.length > 0 || validation.warnings.length > 0) && (
+        <div className="tke-validation">
+          {validation.errors.map((e) => (
+            <div key={e} className="tke-error">
+              ✕ {e}
+            </div>
+          ))}
+          {validation.warnings.map((w) => (
+            <div key={w} className="tke-warning">
+              ⚠ {w}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {BODY_FIELD_GROUPS.map((group) => {
+        const groupFields = fields.filter((f) => f.group === group.id);
+        if (groupFields.length === 0) return null;
+        const open = !collapsed[group.id];
+        return (
+          <section key={group.id} className="tke-group">
+            <button
+              type="button"
+              className="tke-group-head"
+              onClick={() => setCollapsed((c) => ({ ...c, [group.id]: open }))}
+              title={group.help}
+            >
+              <span className="tke-caret">{open ? '▾' : '▸'}</span>
+              {group.label}
+            </button>
+            {open && (
+              <div className="tke-group-body">
+                {groupFields.map((field) => (
+                  <Field key={field.path} field={field} body={body} onPatch={onPatch} />
+                ))}
+              </div>
+            )}
+          </section>
+        );
+      })}
+    </div>
+  );
+}
+
+function Field({ field, body, onPatch }: { field: BodyField; body: BodyDef; onPatch: InspectorProps['onPatch'] }) {
+  const raw = getBodyField(body, field.path);
+
+  if (field.kind === 'boolean') {
+    return (
+      <label className="tke-field tke-field-inline" title={field.help}>
+        <input type="checkbox" checked={Boolean(raw)} onChange={(e) => onPatch(field.path, e.target.checked)} />
+        <span>{field.label}</span>
+      </label>
+    );
+  }
+
+  if (field.kind === 'select') {
+    return (
+      <label className="tke-field" title={field.help}>
+        <span className="tke-field-label">{field.label}</span>
+        <select
+          value={String(raw ?? field.defaultValue ?? '')}
+          onChange={(e) => onPatch(field.path, e.target.value)}
+        >
+          {field.options?.map((o) => (
+            <option key={o.value} value={o.value}>
+              {o.label}
+            </option>
+          ))}
+        </select>
+      </label>
+    );
+  }
+
+  if (field.kind === 'color') {
+    const value = typeof raw === 'string' && raw ? raw : '#000000';
+    return (
+      <label className="tke-field" title={field.help}>
+        <span className="tke-field-label">{field.label}</span>
+        <span className="tke-colour-row">
+          <input type="color" value={value} onChange={(e) => onPatch(field.path, e.target.value)} />
+          <input type="text" value={value} onChange={(e) => onPatch(field.path, e.target.value)} />
+        </span>
+      </label>
+    );
+  }
+
+  if (field.kind === 'longtext') {
+    return (
+      <label className="tke-field" title={field.help}>
+        <span className="tke-field-label">{field.label}</span>
+        <textarea rows={3} value={String(raw ?? '')} onChange={(e) => onPatch(field.path, e.target.value)} />
+      </label>
+    );
+  }
+
+  if (field.kind === 'text') {
+    return (
+      <label className="tke-field" title={field.help}>
+        <span className="tke-field-label">{field.label}</span>
+        <input type="text" value={String(raw ?? '')} onChange={(e) => onPatch(field.path, e.target.value)} />
+      </label>
+    );
+  }
+
+  // Absent optional fields show the engine's effective default, so a slider
+  // never reads 0 for something that actually defaults to 0.5.
+  const value = typeof raw === 'number' ? raw : typeof field.defaultValue === 'number' ? field.defaultValue : 0;
+  const bounded = field.min !== undefined && field.max !== undefined;
+  return (
+    <label className="tke-field" title={field.help}>
+      <span className="tke-field-label">
+        {field.label}
+        {field.unit && <em> ({field.unit})</em>}
+        {field.affectsTerrain && <b className="tke-regen" title="Regenerates the world">↻</b>}
+      </span>
+      <span className="tke-number-row">
+        {bounded && (
+          <input
+            type="range"
+            min={field.min}
+            max={field.max}
+            step={field.step ?? 1}
+            value={value}
+            onChange={(e) => onPatch(field.path, Number(e.target.value))}
+          />
+        )}
+        <input
+          type="number"
+          min={field.min}
+          max={field.max}
+          step={field.step ?? 1}
+          value={value}
+          onChange={(e) => onPatch(field.path, Number(e.target.value))}
+        />
+      </span>
+    </label>
+  );
+}
+
+export const Inspector = createSlot('EditorInspector', DefaultInspector);
diff --git a/packages/editor/src/panels/MapsPanel.tsx b/packages/editor/src/panels/MapsPanel.tsx
new file mode 100644
index 0000000..3fdf424
--- /dev/null
+++ b/packages/editor/src/panels/MapsPanel.tsx
@@ -0,0 +1,174 @@
+import {
+  describeNoise,
+  fbm2,
+  makeNoise,
+  MATERIALS,
+  scatterPoints,
+  skinBiome,
+  type BodyDef,
+  type VoxelWorld,
+} from '@takeon/engine';
+import { createSlot } from '@takeon/ui';
+import { useEffect, useRef, useState } from 'react';
+import { MAP_KINDS, mapPointToTile, paintCrossSection, paintField, paintMap, type MapKind } from '../maps.js';
+
+export interface MapsPanelProps {
+  body: BodyDef;
+  world: VoxelWorld | null;
+  version: number;
+  maxClimb: number;
+  from: { x: number; y: number } | null;
+  /** Notifies the host when the user picks a tile on a map. */
+  onPickTile?(tile: { x: number; y: number }): void;
+}
+
+type View = MapKind | 'noise' | 'scatter';
+
+/**
+ * Top-down instrumentation: the elevation/slope/material/ore/drivability maps,
+ * the raw noise field at the generator's own frequency, and a cross-section
+ * through whichever row you click.
+ */
+function DefaultMapsPanel({ body, world, version, maxClimb, from, onPickTile }: MapsPanelProps) {
+  const [view, setView] = useState<View>('elevation');
+  const [row, setRow] = useState(0);
+  const [tile, setTile] = useState<{ x: number; y: number } | null>(null);
+  const mapRef = useRef<HTMLCanvasElement>(null);
+  const sliceRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (world) setRow((r) => Math.min(r || world.size >> 1, world.size - 1));
+  }, [world]);
+
+  useEffect(() => {
+    const canvas = mapRef.current;
+    if (!canvas) return;
+    if (view === 'noise') {
+      // Exactly the field the generator will use: the body's own noise config
+      // when it has one, otherwise the classic value-fBm path.
+      const size = body.size;
+      if (body.terrain.noise?.type) {
+        const field = makeNoise(body.terrain.noise, body.seed);
+        paintField(canvas, size, field);
+      } else {
+        const freq = 0.035 + body.terrain.roughness * 0.03;
+        paintField(canvas, size, (x, y) => {
+          const n = fbm2(x * freq, y * freq, body.seed, 4);
+          return n * 0.65 + fbm2(x * freq * 0.25, y * freq * 0.25, body.seed + 55, 2) * 0.35;
+        });
+      }
+      return;
+    }
+    if (view === 'scatter') {
+      // Blue-noise placement preview: evenly spread, never clumped — what you
+      // want for boulders, flora, sample sites or survey points.
+      const size = body.size;
+      paintField(canvas, size, () => 0.06);
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        const rect = canvas.getBoundingClientRect();
+        const scale = Math.min(rect.width, rect.height) / size;
+        const ox = (rect.width - size * scale) / 2;
+        const oy = (rect.height - size * scale) / 2;
+        ctx.fillStyle = '#5fe3d8';
+        for (const p of scatterPoints(size, Math.round((size * size) / 45), body.seed)) {
+          ctx.beginPath();
+          ctx.arc(ox + p.x * scale, oy + p.y * scale, Math.max(1, scale * 0.7), 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+      return;
+    }
+    if (!world) return;
+    paintMap(canvas, world, view, {
+      maxClimb,
+      from: from ?? undefined,
+      marker: { axis: 'y', index: row },
+      pin: from,
+      body,
+    });
+  }, [view, world, version, maxClimb, from, row, body]);
+
+  useEffect(() => {
+    if (!world || !sliceRef.current) return;
+    paintCrossSection(sliceRef.current, world, 'y', Math.min(row, world.size - 1));
+  }, [world, version, row]);
+
+  const surfaceAt = tile && world ? MATERIALS[world.surfaceMaterial(tile.x, tile.y)] : null;
+  const biomeAt = tile ? MATERIALS[skinBiome(tile.x, tile.y, body.seed)] : null;
+
+  return (
+    <div className="tke-maps">
+      <div className="tke-tabs">
+        {MAP_KINDS.map((k) => (
+          <button
+            key={k.id}
+            type="button"
+            className={view === k.id ? 'tke-tab tke-selected' : 'tke-tab'}
+            onClick={() => setView(k.id)}
+            title={k.help}
+          >
+            {k.label}
+          </button>
+        ))}
+        <button
+          type="button"
+          className={view === 'noise' ? 'tke-tab tke-selected' : 'tke-tab'}
+          onClick={() => setView('noise')}
+          title="The raw elevation field this body generates from, before craters and clamping."
+        >
+          Noise
+        </button>
+        <button
+          type="button"
+          className={view === 'scatter' ? 'tke-tab tke-selected' : 'tke-tab'}
+          onClick={() => setView('scatter')}
+          title="Blue-noise (Poisson-disk) placement: evenly spread points with no clumps."
+        >
+          Scatter
+        </button>
+      </div>
+      {view === 'noise' && <div className="tke-hint">{describeNoise(body.terrain.noise)}</div>}
+
+      <canvas
+        ref={mapRef}
+        className="tke-map"
+        onClick={(e) => {
+          if (!world) return;
+          const picked = mapPointToTile(e.currentTarget, world, e.clientX, e.clientY);
+          if (!picked) return;
+          setTile(picked);
+          setRow(picked.y);
+          onPickTile?.(picked);
+        }}
+      />
+
+      <div className="tke-map-readout">
+        {tile && world ? (
+          <>
+            <code>
+              [{tile.x},{tile.y}]
+            </code>{' '}
+            z{world.height(tile.x, tile.y)} · {surfaceAt?.name ?? '—'} · skin {biomeAt?.name ?? '—'}
+          </>
+        ) : (
+          <span className="tke-hint">Click the map to inspect a column and move the cross-section.</span>
+        )}
+      </div>
+
+      <label className="tke-field tke-field-inline">
+        <span className="tke-field-label">Cross-section row {row}</span>
+        <input
+          type="range"
+          min={0}
+          max={Math.max(0, (world?.size ?? 1) - 1)}
+          value={row}
+          onChange={(e) => setRow(Number(e.target.value))}
+        />
+      </label>
+      <canvas ref={sliceRef} className="tke-slice" />
+    </div>
+  );
+}
+
+export const MapsPanel = createSlot('EditorMapsPanel', DefaultMapsPanel);
diff --git a/packages/editor/src/panels/RoverPanel.tsx b/packages/editor/src/panels/RoverPanel.tsx
new file mode 100644
index 0000000..05cf90e
--- /dev/null
+++ b/packages/editor/src/panels/RoverPanel.tsx
@@ -0,0 +1,111 @@
+import {
+  canReach,
+  computeStats,
+  PARTS,
+  type BodyDef,
+  type PartCategory,
+  type RoverSpec,
+} from '@takeon/engine';
+import { createSlot } from '@takeon/ui';
+
+export interface RoverPanelProps {
+  spec: RoverSpec;
+  body: BodyDef;
+  onChange(spec: RoverSpec): void;
+}
+
+const REQUIRED: PartCategory[] = ['chassis', 'wheels', 'power', 'battery'];
+const MODULES: PartCategory[] = ['tool', 'camera', 'scanner', 'cargo', 'fuel'];
+
+/**
+ * The rover play mode uses. Mechanics work is mostly "does this drivetrain
+ * cope with this terrain", so the climb/speed/energy numbers sit right next
+ * to the terrain controls rather than in a separate customiser.
+ */
+function DefaultRoverPanel({ spec, body, onChange }: RoverPanelProps) {
+  const stats = computeStats(spec);
+  const slots = PARTS.find((p) => p.id === spec.chassis)?.stats.slots ?? 0;
+
+  const setModule = (category: PartCategory, id: string) => {
+    const others = spec.modules.filter((m) => PARTS.find((p) => p.id === m)?.category !== category);
+    onChange({ ...spec, modules: id ? [...others, id] : others });
+  };
+
+  return (
+    <div className="tke-rover">
+      {REQUIRED.map((category) => (
+        <label key={category} className="tke-field">
+          <span className="tke-field-label">{category}</span>
+          <select
+            value={spec[category as 'chassis' | 'wheels' | 'power' | 'battery']}
+            onChange={(e) => onChange({ ...spec, [category]: e.target.value })}
+          >
+            {PARTS.filter((p) => p.category === category).map((p) => (
+              <option key={p.id} value={p.id}>
+                {p.name} (T{p.tier})
+              </option>
+            ))}
+          </select>
+        </label>
+      ))}
+
+      <div className="tke-hint">Modules: {spec.modules.length}/{slots} slots used</div>
+      {MODULES.map((category) => {
+        const current = spec.modules.find((m) => PARTS.find((p) => p.id === m)?.category === category) ?? '';
+        return (
+          <label key={category} className="tke-field">
+            <span className="tke-field-label">{category}</span>
+            <select value={current} onChange={(e) => setModule(category, e.target.value)}>
+              <option value="">— none —</option>
+              {PARTS.filter((p) => p.category === category).map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name} (T{p.tier})
+                </option>
+              ))}
+            </select>
+          </label>
+        );
+      })}
+
+      <dl className="tke-statlist">
+        <div>
+          <dt>climb</dt>
+          <dd>{stats.maxClimb} voxels</dd>
+        </div>
+        <div>
+          <dt>speed</dt>
+          <dd>{stats.speed} tiles/s</dd>
+        </div>
+        <div>
+          <dt>battery</dt>
+          <dd>{stats.batteryCapacity}</dd>
+        </div>
+        <div>
+          <dt>move cost</dt>
+          <dd>{stats.moveEnergy}/tile</dd>
+        </div>
+        <div>
+          <dt>cargo</dt>
+          <dd>{stats.cargoCapacity}</dd>
+        </div>
+        <div>
+          <dt>fuel</dt>
+          <dd>
+            {stats.fuelCapacity} / Δv {body.deltaV}
+          </dd>
+        </div>
+      </dl>
+
+      {!canReach(stats, body.deltaV) && (
+        <div className="tke-warning">⚠ Not enough fuel to reach {body.name} in a real launch.</div>
+      )}
+      {stats.problems.map((p) => (
+        <div key={p} className="tke-error">
+          ✕ {p}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const RoverPanel = createSlot('EditorRoverPanel', DefaultRoverPanel);
diff --git a/packages/editor/src/panels/Toolbar.tsx b/packages/editor/src/panels/Toolbar.tsx
new file mode 100644
index 0000000..6276c7f
--- /dev/null
+++ b/packages/editor/src/panels/Toolbar.tsx
@@ -0,0 +1,164 @@
+import { bodyToJson, bodyToTypeScript, type BodyDef } from '@takeon/engine';
+import { createSlot } from '@takeon/ui';
+import { useState } from 'react';
+
+export interface ToolbarProps {
+  body: BodyDef;
+  mode: 'edit' | 'play';
+  theme: 'light' | 'dark';
+  canPlay: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  generating: boolean;
+  genMs: number;
+  maxClimb: number;
+  onMaxClimb(value: number): void;
+  onMode(mode: 'edit' | 'play'): void;
+  onTheme(theme: 'light' | 'dark'): void;
+  onUndo(): void;
+  onRedo(): void;
+  onReseed(): void;
+  onRegenerate(): void;
+  onImport(text: string): { ok: boolean; errors: string[] };
+}
+
+/** Play/stop, history, seed and import/export — the editor's top bar. */
+function DefaultToolbar({
+  body,
+  mode,
+  theme,
+  canPlay,
+  canUndo,
+  canRedo,
+  generating,
+  genMs,
+  maxClimb,
+  onMaxClimb,
+  onMode,
+  onTheme,
+  onUndo,
+  onRedo,
+  onReseed,
+  onRegenerate,
+  onImport,
+}: ToolbarProps) {
+  const [importing, setImporting] = useState(false);
+  const [text, setText] = useState('');
+  const [errors, setErrors] = useState<string[]>([]);
+  const [copied, setCopied] = useState('');
+
+  const copy = async (label: string, value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(label);
+      setTimeout(() => setCopied(''), 1500);
+    } catch {
+      // Clipboard is permission-gated; downloading always works.
+      download(`${body.id}.${label === 'TS' ? 'ts' : 'json'}`, value);
+    }
+  };
+
+  return (
+    <div className="tke-toolbar">
+      <button
+        type="button"
+        className={mode === 'play' ? 'tke-primary tke-playing' : 'tke-primary'}
+        onClick={() => onMode(mode === 'play' ? 'edit' : 'play')}
+        disabled={!canPlay && mode === 'edit'}
+        title={canPlay ? 'Drive this world with the editor rover' : 'Fix the validation errors first'}
+      >
+        {mode === 'play' ? '■ Stop' : '▶ Play'}
+      </button>
+
+      <span className="tke-divider" />
+      <button type="button" onClick={onUndo} disabled={!canUndo} title="Undo (⌘/Ctrl+Z)">
+        ↶
+      </button>
+      <button type="button" onClick={onRedo} disabled={!canRedo} title="Redo (⌘/Ctrl+Shift+Z)">
+        ↷
+      </button>
+
+      <span className="tke-divider" />
+      <button type="button" onClick={onReseed} title="Roll a new seed">
+        🎲 Seed
+      </button>
+      <button type="button" onClick={onRegenerate} title="Rebuild the world from the current settings">
+        ↻ Regenerate
+      </button>
+      <label className="tke-inline-range" title="Drivetrain climb limit used by the slope and drivability views">
+        climb ≤ {maxClimb}
+        <input type="range" min={1} max={5} step={1} value={maxClimb} onChange={(e) => onMaxClimb(Number(e.target.value))} />
+      </label>
+
+      <span className="tke-spacer" />
+      <span className="tke-status">
+        {generating ? 'generating…' : `${body.size}² · ${genMs.toFixed(0)} ms`}
+        {copied && ` · ${copied} copied`}
+      </span>
+      <button type="button" onClick={() => copy('JSON', bodyToJson(body))} title="Copy BodyDef JSON">
+        ⧉ JSON
+      </button>
+      <button type="button" onClick={() => copy('TS', bodyToTypeScript(body))} title="Copy a TypeScript literal for world/bodies.ts">
+        ⧉ TS
+      </button>
+      <button type="button" onClick={() => download(`${body.id}.json`, bodyToJson(body))} title="Download BodyDef JSON">
+        ⭳
+      </button>
+      <button type="button" onClick={() => setImporting(true)}>
+        ⭱ Import
+      </button>
+      <button
+        type="button"
+        onClick={() => onTheme(theme === 'light' ? 'dark' : 'light')}
+        title={theme === 'light' ? 'Switch to dark chrome' : 'Switch to light chrome'}
+      >
+        {theme === 'light' ? '☾' : '☀'}
+      </button>
+
+      {importing && (
+        <div className="tke-backdrop" onClick={() => setImporting(false)} role="presentation">
+          <div className="tke-dialog" onClick={(e) => e.stopPropagation()}>
+            <h3>Import a destination</h3>
+            <p className="tke-hint">Paste a BodyDef JSON object. Missing fields fall back to draft defaults.</p>
+            <textarea rows={12} value={text} onChange={(e) => setText(e.target.value)} spellCheck={false} />
+            {errors.map((e) => (
+              <div key={e} className="tke-error">
+                ✕ {e}
+              </div>
+            ))}
+            <div className="tke-dialog-actions">
+              <button
+                type="button"
+                className="tke-primary"
+                onClick={() => {
+                  const result = onImport(text);
+                  setErrors(result.errors);
+                  if (result.errors.length === 0) {
+                    setImporting(false);
+                    setText('');
+                  }
+                }}
+              >
+                Import
+              </button>
+              <button type="button" onClick={() => setImporting(false)}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function download(filename: string, text: string): void {
+  const url = URL.createObjectURL(new Blob([text], { type: 'text/plain' }));
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export const Toolbar = createSlot('EditorToolbar', DefaultToolbar);
diff --git a/packages/editor/src/panels/Viewport.tsx b/packages/editor/src/panels/Viewport.tsx
new file mode 100644
index 0000000..7f90295
--- /dev/null
+++ b/packages/editor/src/panels/Viewport.tsx
@@ -0,0 +1,170 @@
+import { Camera, FlatRenderer, IsoRenderer, type SceneView, type Simulation, type ViewKind } from '@takeon/engine';
+import { createSlot } from '@takeon/ui';
+import { useEffect, useRef, useState } from 'react';
+
+export interface ViewportProps {
+  sim: Simulation | null;
+  version: number;
+  generating: boolean;
+  /** Game seconds used for lighting; drives the day/night preview. */
+  time: number;
+  onTimeChange(time: number): void;
+  /** Which renderer to draw with. */
+  view?: ViewKind;
+  onViewChange?(view: ViewKind): void;
+}
+
+/**
+ * Scene view: the engine's own renderers drawing the real generated world,
+ * with editor camera controls (drag to pan, wheel to zoom, R to rotate) and a
+ * time-of-day scrub so lighting can be judged without playing.
+ *
+ * Both views are the same scene: `3D` is the isometric voxel diorama, `2D` is
+ * the top-down map with hillshading — the one you want when laying out routes
+ * or reading terrain. The camera is shared, so toggling keeps your place.
+ *
+ * The simulation is not ticked here — nothing moves, nothing drains — so what
+ * you see is purely the authored world.
+ */
+function DefaultViewport({ sim, version, generating, time, onTimeChange, view = 'iso', onViewChange }: ViewportProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rendererRef = useRef<SceneView | null>(null);
+  // One camera for the panel's lifetime: switching views keeps the framing.
+  const cameraRef = useRef<Camera>(new Camera());
+  const [rotation, setRotation] = useState(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !sim) return;
+
+    const camera = cameraRef.current;
+    const renderer: SceneView =
+      view === 'flat' ? new FlatRenderer(canvas, sim, camera) : new IsoRenderer(canvas, sim, camera);
+    renderer.activate();
+    rendererRef.current = renderer;
+    camera.follow = false;
+    renderer.focusTile(sim.rover.pos);
+    setRotation(renderer.rotation);
+
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      renderer.resize(rect.width || 640, rect.height || 480, Math.min(2, window.devicePixelRatio || 1));
+    };
+    resize();
+    window.addEventListener('resize', resize);
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(resize) : null;
+    observer?.observe(canvas);
+
+    let raf = 0;
+    const frame = () => {
+      renderer.draw();
+      raf = requestAnimationFrame(frame);
+    };
+    raf = requestAnimationFrame(frame);
+
+    let dragging = false;
+    let lastX = 0;
+    let lastY = 0;
+    const onDown = (e: PointerEvent) => {
+      dragging = true;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      canvas.setPointerCapture(e.pointerId);
+    };
+    const onMove = (e: PointerEvent) => {
+      if (!dragging) return;
+      camera.panBy(e.clientX - lastX, e.clientY - lastY);
+      lastX = e.clientX;
+      lastY = e.clientY;
+    };
+    const onUp = (e: PointerEvent) => {
+      dragging = false;
+      if (canvas.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId);
+    };
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const factor = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+      camera.setZoom(camera.zoom * factor, e.clientX - rect.left, e.clientY - rect.top);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'r' || e.key === 'R') {
+        renderer.rotateClockwise();
+        setRotation(renderer.rotation);
+      }
+      if (e.key === 'f' || e.key === 'F') renderer.focusTile(sim.rover.pos);
+    };
+    canvas.addEventListener('pointerdown', onDown);
+    canvas.addEventListener('pointermove', onMove);
+    canvas.addEventListener('pointerup', onUp);
+    canvas.addEventListener('pointercancel', onUp);
+    canvas.addEventListener('wheel', onWheel, { passive: false });
+    window.addEventListener('keydown', onKey);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      renderer.deactivate();
+      window.removeEventListener('resize', resize);
+      observer?.disconnect();
+      canvas.removeEventListener('pointerdown', onDown);
+      canvas.removeEventListener('pointermove', onMove);
+      canvas.removeEventListener('pointerup', onUp);
+      canvas.removeEventListener('pointercancel', onUp);
+      canvas.removeEventListener('wheel', onWheel);
+      window.removeEventListener('keydown', onKey);
+      rendererRef.current = null;
+    };
+  }, [sim, version, view]);
+
+  // Lighting follows the scrubbed time; the sim itself never advances here.
+  useEffect(() => {
+    if (sim) sim.time = time;
+  }, [sim, time, version]);
+
+  const dayLength = sim?.body.dayLength ?? 0;
+
+  return (
+    <div className="tke-viewport">
+      <canvas ref={canvasRef} className="tke-scene" />
+      <div className="tke-viewport-bar">
+        <button
+          type="button"
+          onClick={() => onViewChange?.(view === 'iso' ? 'flat' : 'iso')}
+          title={view === 'iso' ? 'Switch to the 2D map' : 'Switch to the 3D diorama'}
+          disabled={!onViewChange}
+        >
+          {view === 'iso' ? '⬔ 3D' : '▦ 2D'}
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            rendererRef.current?.rotateClockwise();
+            setRotation(rendererRef.current?.rotation ?? 0);
+          }}
+          title="Rotate view (R)"
+        >
+          ⟳ {rotation * 90}°
+        </button>
+        <button type="button" onClick={() => sim && rendererRef.current?.focusTile(sim.rover.pos)} title="Frame the landing site (F)">
+          ◎ Frame
+        </button>
+        {dayLength > 0 && (
+          <label className="tke-inline-range" title="Preview lighting through the day">
+            ☀
+            <input
+              type="range"
+              min={0}
+              max={dayLength}
+              step={Math.max(1, Math.round(dayLength / 120))}
+              value={Math.min(time, dayLength)}
+              onChange={(e) => onTimeChange(Number(e.target.value))}
+            />
+          </label>
+        )}
+        {generating && <span className="tke-hint">generating…</span>}
+      </div>
+    </div>
+  );
+}
+
+export const Viewport = createSlot('EditorViewport', DefaultViewport);
diff --git a/packages/editor/src/state.ts b/packages/editor/src/state.ts
new file mode 100644
index 0000000..24daa60
--- /dev/null
+++ b/packages/editor/src/state.ts
@@ -0,0 +1,272 @@
+import {
+  BODIES,
+  cloneBody,
+  createBodyDraft,
+  defaultSpec,
+  forkBody,
+  parseBodyJson,
+  registerBodies,
+  setBodyField,
+  validateBody,
+  type BodyDef,
+  type BodyValidation,
+  type RoverSpec,
+} from '@takeon/engine';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+/**
+ * Editor project state: the body drafts being authored, the rover used for
+ * play mode, the selection and an undo stack.
+ *
+ * Drafts shadow built-in destinations by id, exactly like the engine's runtime
+ * registry — so "edit Mars, press play" runs the edited Mars everywhere in the
+ * host app, and deleting the draft restores the shipped one.
+ */
+
+export const EDITOR_STORAGE_KEY = 'takeon.editor.v1';
+const HISTORY_LIMIT = 60;
+
+export interface EditorPersistedState {
+  version: 1;
+  drafts: BodyDef[];
+  selectedId: string;
+  spec: RoverSpec;
+}
+
+export interface EditorStorage {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+export interface EditorEntry {
+  body: BodyDef;
+  /** Present in the shipped catalog. */
+  builtin: boolean;
+  /** Being overridden or newly authored in this project. */
+  draft: boolean;
+}
+
+export interface EditorStateOptions {
+  /** Extra bodies to expose alongside the built-ins (e.g. backend rows). */
+  bodies?: BodyDef[];
+  storage?: EditorStorage | null;
+  storageKey?: string;
+  /** Publish drafts to the engine registry as they change (default true). */
+  publish?: boolean;
+  onChange?(state: EditorPersistedState): void;
+}
+
+export interface EditorState {
+  entries: EditorEntry[];
+  selectedId: string;
+  body: BodyDef;
+  validation: BodyValidation;
+  spec: RoverSpec;
+  isDraft: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  select(id: string): void;
+  /** Edit a dotted field path on the selected body. */
+  patch(path: string, value: unknown): void;
+  /** Replace the selected body wholesale (import, randomise…). */
+  replace(body: BodyDef): void;
+  create(): void;
+  duplicate(): void;
+  /** Drop the draft: custom bodies disappear, edited built-ins revert. */
+  remove(): void;
+  setSpec(spec: RoverSpec): void;
+  undo(): void;
+  redo(): void;
+  importJson(text: string): { ok: boolean; errors: string[] };
+  /** Everything the host would want to persist itself. */
+  snapshot(): EditorPersistedState;
+}
+
+interface Doc {
+  drafts: BodyDef[];
+  selectedId: string;
+}
+
+interface Store {
+  doc: Doc;
+  past: Doc[];
+  future: Doc[];
+}
+
+export function useEditorState(opts: EditorStateOptions = {}): EditorState {
+  const { bodies: extra, storage = defaultStorage(), storageKey = EDITOR_STORAGE_KEY, publish = true } = opts;
+
+  const catalog = useMemo(() => {
+    const merged = [...BODIES];
+    for (const b of extra ?? []) {
+      const i = merged.findIndex((m) => m.id === b.id);
+      if (i >= 0) merged[i] = b;
+      else merged.push(b);
+    }
+    return merged;
+  }, [extra]);
+
+  const initial = useRef<EditorPersistedState | null>(null);
+  if (initial.current === null) initial.current = load(storage, storageKey, catalog);
+
+  const [store, setStore] = useState<Store>({
+    doc: { drafts: initial.current.drafts, selectedId: initial.current.selectedId },
+    past: [],
+    future: [],
+  });
+  const [spec, setSpec] = useState<RoverSpec>(initial.current.spec);
+  const doc = store.doc;
+
+  const entries = useMemo<EditorEntry[]>(() => {
+    const draftIds = new Set(doc.drafts.map((d) => d.id));
+    const builtinIds = new Set(catalog.map((b) => b.id));
+    const out: EditorEntry[] = catalog.map((b) => ({
+      body: doc.drafts.find((d) => d.id === b.id) ?? b,
+      builtin: true,
+      draft: draftIds.has(b.id),
+    }));
+    for (const d of doc.drafts) {
+      if (!builtinIds.has(d.id)) out.push({ body: d, builtin: false, draft: true });
+    }
+    return out;
+  }, [catalog, doc]);
+
+  const selected = entries.find((e) => e.body.id === doc.selectedId) ?? entries[0];
+  const body = selected?.body ?? createBodyDraft();
+  const validation = useMemo(() => validateBody(body), [body]);
+
+  // Persist and publish. Publishing means a mission started anywhere in the
+  // host app resolves the edited definition — that is what makes play mode
+  // (and the rest of the game) reflect the editor.
+  const onChangeRef = useRef(opts.onChange);
+  onChangeRef.current = opts.onChange;
+  useEffect(() => {
+    const state: EditorPersistedState = { version: 1, drafts: doc.drafts, selectedId: doc.selectedId, spec };
+    if (storage) {
+      try {
+        storage.setItem(storageKey, JSON.stringify(state));
+      } catch (err) {
+        console.warn('[takeon-editor] could not persist project', err);
+      }
+    }
+    if (publish) registerBodies(doc.drafts);
+    onChangeRef.current?.(state);
+  }, [doc, spec, storage, storageKey, publish]);
+
+  const commit = useCallback((fn: (cur: Doc) => Doc) => {
+    setStore((s) => {
+      const next = fn(s.doc);
+      if (next === s.doc) return s;
+      return { doc: next, past: [...s.past.slice(-HISTORY_LIMIT), s.doc], future: [] };
+    });
+  }, []);
+
+  const upsertDraft = useCallback(
+    (updated: BodyDef, previousId: string) => {
+      commit((cur) => {
+        const drafts = [...cur.drafts];
+        const i = drafts.findIndex((d) => d.id === previousId);
+        if (i >= 0) drafts[i] = updated;
+        else drafts.push(updated);
+        return { drafts, selectedId: updated.id };
+      });
+    },
+    [commit],
+  );
+
+  const takenIds = entries.map((e) => e.body.id);
+
+  return {
+    entries,
+    selectedId: body.id,
+    body,
+    validation,
+    spec,
+    isDraft: selected?.draft ?? false,
+    canUndo: store.past.length > 0,
+    canRedo: store.future.length > 0,
+    select: (id) =>
+      setStore((s) => (s.doc.selectedId === id ? s : { ...s, doc: { ...s.doc, selectedId: id } })),
+    patch: (path, value) => upsertDraft(setBodyField(body, path, value), body.id),
+    replace: (next) => upsertDraft(cloneBody(next), body.id),
+    create: () => {
+      const id = uniqueId('new-world', takenIds);
+      commit((cur) => ({
+        drafts: [...cur.drafts, createBodyDraft({ id, name: title(id), seed: Math.floor(Math.random() * 100000) })],
+        selectedId: id,
+      }));
+    },
+    duplicate: () => {
+      const id = uniqueId(`${body.id}-copy`, takenIds);
+      commit((cur) => ({ drafts: [...cur.drafts, forkBody(body, id)], selectedId: id }));
+    },
+    remove: () =>
+      commit((cur) => {
+        const drafts = cur.drafts.filter((d) => d.id !== cur.selectedId);
+        const stillShipped = catalog.some((b) => b.id === cur.selectedId);
+        return {
+          drafts,
+          selectedId: stillShipped ? cur.selectedId : (drafts[0]?.id ?? catalog[0]?.id ?? ''),
+        };
+      }),
+    setSpec,
+    undo: () =>
+      setStore((s) => {
+        const prev = s.past[s.past.length - 1];
+        if (!prev) return s;
+        return { doc: prev, past: s.past.slice(0, -1), future: [...s.future, s.doc] };
+      }),
+    redo: () =>
+      setStore((s) => {
+        const next = s.future[s.future.length - 1];
+        if (!next) return s;
+        return { doc: next, past: [...s.past, s.doc], future: s.future.slice(0, -1) };
+      }),
+    importJson: (text) => {
+      const { body: parsed, validation: v } = parseBodyJson(text);
+      if (!parsed) return { ok: false, errors: v.errors };
+      upsertDraft(parsed, parsed.id);
+      return { ok: v.ok, errors: v.errors };
+    },
+    snapshot: () => ({ version: 1, drafts: doc.drafts, selectedId: doc.selectedId, spec }),
+  };
+}
+
+function load(storage: EditorStorage | null, key: string, catalog: BodyDef[]): EditorPersistedState {
+  const fallback: EditorPersistedState = {
+    version: 1,
+    drafts: [],
+    selectedId: catalog[0]?.id ?? 'mars',
+    spec: { ...defaultSpec(), id: 'editor-rover', name: 'Editor rover' },
+  };
+  if (!storage) return fallback;
+  try {
+    const raw = storage.getItem(key);
+    if (!raw) return fallback;
+    const parsed = JSON.parse(raw) as Partial<EditorPersistedState>;
+    return {
+      version: 1,
+      drafts: Array.isArray(parsed.drafts) ? parsed.drafts : [],
+      selectedId: parsed.selectedId ?? fallback.selectedId,
+      spec: parsed.spec ?? fallback.spec,
+    };
+  } catch {
+    return fallback;
+  }
+}
+
+function defaultStorage(): EditorStorage | null {
+  return typeof localStorage === 'undefined' ? null : localStorage;
+}
+
+function uniqueId(base: string, taken: string[]): string {
+  const slug = base.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/^-|-$/g, '') || 'world';
+  if (!taken.includes(slug)) return slug;
+  let n = 2;
+  while (taken.includes(`${slug}-${n}`)) n++;
+  return `${slug}-${n}`;
+}
+
+function title(id: string): string {
+  return id.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
diff --git a/packages/editor/src/styles.css b/packages/editor/src/styles.css
new file mode 100644
index 0000000..54eba79
--- /dev/null
+++ b/packages/editor/src/styles.css
@@ -0,0 +1,839 @@
+/*
+ * @takeon/editor — tool chrome.
+ *
+ * Light by default (the toolbar toggles dark): authoring happens in daylight,
+ * and a bright shell makes the dark scene view read as a viewport into the
+ * game rather than more UI. Layout is one grid of identical cards — same
+ * header height, same footprint, same scroll behaviour — so panels stay in
+ * line instead of forming ragged sidebars.
+ *
+ * Class names are `tke-` prefixed; colours come from `--tke-*` so a host can
+ * retheme the tool the way `--tk-*` rethemes the game.
+ */
+
+/* Doubled class beats `.tk-scope { display: contents }` from @takeon/ui
+   regardless of which stylesheet the host imports first. */
+.tke-root.tke-root {
+  display: block;
+  height: 100%;
+  min-height: 0;
+}
+
+.tke-shell {
+  --tke-bg: #eef1f6;
+  --tke-card: #ffffff;
+  --tke-card-alt: #f7f9fc;
+  --tke-line: #dbe2ec;
+  --tke-line-strong: #c3cedd;
+  --tke-text: #1b2532;
+  --tke-dim: #5d6b7d;
+  --tke-accent: #0f8f86;
+  --tke-accent-soft: #e2f5f2;
+  --tke-good: #2f855a;
+  --tke-warn: #b7791f;
+  --tke-warn-soft: #fdf3e0;
+  --tke-bad: #c0392b;
+  --tke-bad-soft: #fdecea;
+  --tke-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
+  --tke-scene: #05040f;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--tke-bg);
+  color: var(--tke-text);
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 13px;
+}
+
+.tke-shell[data-theme='dark'] {
+  --tke-bg: #0d1219;
+  --tke-card: #141b26;
+  --tke-card-alt: #101722;
+  --tke-line: #263243;
+  --tke-line-strong: #33445c;
+  --tke-text: #e6edf5;
+  --tke-dim: #93a4b8;
+  --tke-accent: #45e0c4;
+  --tke-accent-soft: rgba(69, 224, 196, 0.12);
+  --tke-good: #6fdc8c;
+  --tke-warn: #ffb03a;
+  --tke-warn-soft: rgba(255, 176, 58, 0.12);
+  --tke-bad: #ff6b6b;
+  --tke-bad-soft: rgba(255, 107, 107, 0.12);
+  --tke-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+/* Bare-element defaults for the tool's own controls, scoped by one class so
+   they outrank a host stylesheet's `button {}` (this repo's globals.css has
+   one) while still losing to every two-class `.tke-*` rule below.
+   `:not(.tk-mission *)` stops them at the boundary of the game HUD the editor
+   hosts in play mode — otherwise the mission's buttons get repainted as tool
+   chrome. */
+.tke-shell button:not(:where(.tk-mission *)) {
+  font: inherit;
+  color: var(--tke-text);
+  cursor: pointer;
+  background: var(--tke-card);
+  border: 1px solid var(--tke-line-strong);
+  border-radius: 7px;
+  padding: 6px 10px;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+
+.tke-shell button:not(:where(.tk-mission *)):hover:not(:disabled) {
+  border-color: var(--tke-accent);
+  color: var(--tke-accent);
+}
+
+.tke-shell button:not(:where(.tk-mission *)):disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tke-shell button.tke-primary {
+  background: var(--tke-accent);
+  border-color: var(--tke-accent);
+  color: #fff;
+  font-weight: 600;
+  min-width: 90px;
+}
+
+.tke-shell button.tke-primary:hover:not(:disabled) {
+  color: #fff;
+  filter: brightness(1.08);
+}
+
+.tke-shell button.tke-playing {
+  background: var(--tke-bad);
+  border-color: var(--tke-bad);
+}
+
+/* Class-level specificity here on purpose: a host stylesheet that styles bare
+   `input[type=...]` (this repo's globals.css does) would otherwise win on
+   source order and paint the tool's fields in the site's colours. */
+.tke-shell :is(input[type='text'], input[type='number'], select, textarea):not(:where(.tk-mission *)) {
+  font: inherit;
+  color: var(--tke-text);
+  background: var(--tke-card);
+  border: 1px solid var(--tke-line-strong);
+  border-radius: 6px;
+  padding: 5px 7px;
+  width: 100%;
+}
+
+.tke-shell :is(h1, h2, h3, h4) {
+  text-transform: none;
+  letter-spacing: normal;
+  color: var(--tke-text);
+}
+
+.tke-shell input[type='color'] {
+  width: 34px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--tke-line-strong);
+  border-radius: 6px;
+  background: none;
+}
+
+.tke-shell input[type='range'] {
+  width: 100%;
+  accent-color: var(--tke-accent);
+}
+
+/* ── Toolbar ────────────────────────────────────────────────────────── */
+
+.tke-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 12;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 9px 14px;
+  background: var(--tke-card);
+  border-bottom: 1px solid var(--tke-line);
+  flex-wrap: wrap;
+}
+
+.tke-divider {
+  width: 1px;
+  height: 22px;
+  background: var(--tke-line);
+  margin: 0 4px;
+}
+
+.tke-spacer {
+  flex: 1;
+}
+
+.tke-status {
+  color: var(--tke-dim);
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.tke-inline-range {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--tke-dim);
+  white-space: nowrap;
+  font-size: 11px;
+}
+
+.tke-inline-range input[type='range'] {
+  width: 88px;
+}
+
+/* ── Card grid ──────────────────────────────────────────────────────── */
+
+.tke-grid {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(316px, 1fr));
+  grid-auto-rows: 332px;
+  gap: 14px;
+  padding: 14px;
+  align-content: start;
+}
+
+/* The scene is the one panel that earns extra room; everything else keeps
+   the base cell so rows stay aligned across the whole tool. */
+.tke-card-scene {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.tke-card-wide {
+  grid-column: span 2;
+}
+
+@media (max-width: 900px) {
+  .tke-card-scene,
+  .tke-card-wide {
+    grid-column: span 1;
+  }
+
+  .tke-card-scene {
+    grid-row: span 1;
+    min-height: 320px;
+  }
+}
+
+.tke-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--tke-card);
+  border: 1px solid var(--tke-line);
+  border-radius: 12px;
+  box-shadow: var(--tke-shadow);
+  overflow: hidden;
+}
+
+.tke-card-head {
+  flex: 0 0 auto;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--tke-line);
+  background: var(--tke-card-alt);
+}
+
+.tke-card-head h2 {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--tke-text);
+  text-transform: uppercase;
+  letter-spacing: 0.09em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tke-card-hint {
+  font-size: 10.5px;
+  color: var(--tke-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tke-card-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 6px;
+}
+
+.tke-card-actions button {
+  font-size: 11px;
+  padding: 3px 8px;
+}
+
+.tke-card-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.tke-card-body-flush {
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  background: var(--tke-scene);
+}
+
+/* ── Project tree ───────────────────────────────────────────────────── */
+
+.tke-browser {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.tke-browser-actions {
+  display: flex;
+  gap: 6px;
+}
+
+.tke-browser-actions button {
+  flex: 1;
+  font-size: 11px;
+  padding: 5px 4px;
+}
+
+.tke-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+  gap: 6px;
+}
+
+.tke-list .tke-list-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: left;
+  padding: 8px 10px;
+  background: var(--tke-card-alt);
+}
+
+.tke-list .tke-list-item.tke-selected {
+  border-color: var(--tke-accent);
+  background: var(--tke-accent-soft);
+  color: var(--tke-accent);
+}
+
+.tke-list-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.tke-list-text b {
+  font-size: 12.5px;
+}
+
+.tke-list-text em {
+  font-style: normal;
+  font-size: 10px;
+  color: var(--tke-dim);
+}
+
+.tke-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  flex: 0 0 auto;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.tke-badge {
+  margin-left: auto;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--tke-warn);
+  background: var(--tke-warn-soft);
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+
+/* ── Inspector ──────────────────────────────────────────────────────── */
+
+.tke-inspector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tke-group {
+  border: 1px solid var(--tke-line);
+  border-radius: 9px;
+  overflow: hidden;
+}
+
+.tke-shell .tke-group-head {
+  width: 100%;
+  text-align: left;
+  border: none;
+  border-radius: 0;
+  background: var(--tke-card-alt);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--tke-dim);
+  padding: 8px 10px;
+}
+
+.tke-shell .tke-group-head:hover {
+  color: var(--tke-accent);
+}
+
+.tke-caret {
+  display: inline-block;
+  width: 14px;
+}
+
+.tke-group-body {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.tke-field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.tke-field-inline {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.tke-field-inline input[type='checkbox'] {
+  width: auto;
+  accent-color: var(--tke-accent);
+}
+
+.tke-field-label {
+  font-size: 11px;
+  color: var(--tke-dim);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tke-field-label em {
+  font-style: normal;
+  opacity: 0.75;
+}
+
+.tke-regen {
+  color: var(--tke-accent);
+  font-size: 10px;
+}
+
+.tke-number-row {
+  display: grid;
+  grid-template-columns: 1fr 70px;
+  gap: 8px;
+  align-items: center;
+}
+
+.tke-colour-row {
+  display: grid;
+  grid-template-columns: 34px 1fr;
+  gap: 6px;
+  align-items: center;
+}
+
+.tke-validation {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.tke-error,
+.tke-warning {
+  font-size: 11px;
+  padding: 6px 9px;
+  border-radius: 7px;
+  line-height: 1.45;
+}
+
+.tke-error {
+  color: var(--tke-bad);
+  background: var(--tke-bad-soft);
+  border: 1px solid currentColor;
+}
+
+.tke-warning {
+  color: var(--tke-warn);
+  background: var(--tke-warn-soft);
+  border: 1px solid currentColor;
+}
+
+.tke-hint {
+  font-size: 11px;
+  color: var(--tke-dim);
+  line-height: 1.5;
+}
+
+/* ── Viewport ───────────────────────────────────────────────────────── */
+
+.tke-viewport {
+  position: absolute;
+  inset: 0;
+}
+
+.tke-scene {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  cursor: grab;
+}
+
+.tke-scene:active {
+  cursor: grabbing;
+}
+
+.tke-viewport-bar {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: 9px;
+  background: rgba(12, 18, 28, 0.86);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  color: #e6edf5;
+}
+
+.tke-viewport-bar button {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.18);
+  color: #e6edf5;
+  font-size: 11px;
+  padding: 4px 9px;
+}
+
+.tke-viewport-bar .tke-inline-range,
+.tke-viewport-bar .tke-hint {
+  color: #b9c7d6;
+}
+
+/* ── Maps ───────────────────────────────────────────────────────────── */
+
+.tke-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tke-tabs .tke-tab {
+  font-size: 11px;
+  padding: 4px 9px;
+  background: var(--tke-card-alt);
+}
+
+.tke-tabs .tke-tab.tke-selected {
+  border-color: var(--tke-accent);
+  background: var(--tke-accent-soft);
+  color: var(--tke-accent);
+}
+
+.tke-maps {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.tke-map {
+  width: 100%;
+  aspect-ratio: 1;
+  border: 1px solid var(--tke-line);
+  border-radius: 9px;
+  background: var(--tke-scene);
+  cursor: crosshair;
+  display: block;
+}
+
+.tke-slice {
+  width: 100%;
+  height: 86px;
+  border: 1px solid var(--tke-line);
+  border-radius: 9px;
+  background: var(--tke-scene);
+  display: block;
+}
+
+.tke-map-readout {
+  font-size: 11px;
+  color: var(--tke-dim);
+}
+
+.tke-map-readout code {
+  color: var(--tke-accent);
+  font-weight: 600;
+}
+
+/* ── Analysis ───────────────────────────────────────────────────────── */
+
+.tke-analysis h4 {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--tke-dim);
+  margin: 14px 0 6px;
+}
+
+.tke-analysis h4:first-child {
+  margin-top: 0;
+}
+
+.tke-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
+  gap: 6px;
+}
+
+.tke-stat {
+  border: 1px solid var(--tke-line);
+  border-radius: 9px;
+  padding: 7px 9px;
+  display: flex;
+  flex-direction: column;
+  background: var(--tke-card-alt);
+}
+
+.tke-stat b {
+  font-size: 16px;
+  font-variant-numeric: tabular-nums;
+}
+
+.tke-stat em,
+.tke-stat-label {
+  font-style: normal;
+  font-size: 10px;
+  color: var(--tke-dim);
+}
+
+.tke-stat.tke-good b { color: var(--tke-good); }
+.tke-stat.tke-warn b { color: var(--tke-warn); }
+.tke-stat.tke-bad b { color: var(--tke-bad); }
+
+.tke-histogram {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 66px;
+  padding: 5px;
+  border: 1px solid var(--tke-line);
+  border-radius: 9px;
+  background: var(--tke-card-alt);
+}
+
+.tke-histogram .tke-bar {
+  flex: 1;
+  min-height: 1px;
+  background: var(--tke-accent);
+  border-radius: 2px 2px 0 0;
+  opacity: 0.85;
+}
+
+.tke-bars {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.tke-bars li {
+  display: grid;
+  grid-template-columns: 10px 84px 1fr 34px;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+}
+
+.tke-swatch {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.tke-bars-label {
+  color: var(--tke-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tke-bars-track {
+  height: 7px;
+  background: var(--tke-line);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.tke-bars-fill {
+  display: block;
+  height: 100%;
+}
+
+.tke-bars-value {
+  text-align: right;
+  color: var(--tke-dim);
+  font-variant-numeric: tabular-nums;
+}
+
+.tke-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11.5px;
+}
+
+.tke-table td {
+  padding: 4px 2px;
+  border-bottom: 1px solid var(--tke-line);
+}
+
+.tke-table td:last-child {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Rover ──────────────────────────────────────────────────────────── */
+
+.tke-rover {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+}
+
+.tke-statlist {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 4px 12px;
+  font-size: 11px;
+}
+
+.tke-statlist > div {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--tke-line);
+  padding: 3px 0;
+}
+
+.tke-statlist dt {
+  color: var(--tke-dim);
+}
+
+.tke-statlist dd {
+  margin: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Console ────────────────────────────────────────────────────────── */
+
+.tke-console {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--tke-card);
+}
+
+.tke-console-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.7;
+}
+
+.tke-console-line b {
+  color: var(--tke-accent);
+  font-weight: 600;
+}
+
+.tke-console-line code {
+  color: var(--tke-dim);
+}
+
+/* ── Dialogs ────────────────────────────────────────────────────────── */
+
+.tke-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(16, 24, 40, 0.5);
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tke-dialog {
+  background: var(--tke-card);
+  border: 1px solid var(--tke-line);
+  border-radius: 14px;
+  padding: 16px;
+  width: min(92vw, 560px);
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  box-shadow: 0 18px 48px rgba(16, 24, 40, 0.25);
+}
+
+.tke-dialog h3 {
+  margin: 0;
+  font-size: 15px;
+  color: var(--tke-text);
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+.tke-dialog textarea {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.tke-dialog-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.tke-empty {
+  color: var(--tke-dim);
+  font-size: 12px;
+}
diff --git a/packages/editor/src/useEditorSim.ts b/packages/editor/src/useEditorSim.ts
new file mode 100644
index 0000000..8c7eaf8
--- /dev/null
+++ b/packages/editor/src/useEditorSim.ts
@@ -0,0 +1,85 @@
+import { EventBus, Simulation, type BodyDef, type RoverSpec, type VoxelWorld } from '@takeon/engine';
+import { useEffect, useMemo, useState } from 'react';
+
+/**
+ * Keeps one generated world alive for the whole editor.
+ *
+ * Generation is deterministic but not free (a 112² world is ~12k columns), so
+ * inspector edits are debounced and every panel — viewport, maps, analysis —
+ * shares the same `Simulation` instance. That also guarantees the numbers in
+ * the analysis panel describe exactly the world being drawn.
+ */
+export interface EditorSim {
+  sim: Simulation | null;
+  world: VoxelWorld | null;
+  /** Bumped on every regeneration, for panels that cache derived images. */
+  version: number;
+  /** Wall-clock generation time of the last build, in ms. */
+  ms: number;
+  generating: boolean;
+  error: string | null;
+  regenerate(): void;
+}
+
+export function useEditorSim(body: BodyDef, spec: RoverSpec, enabled = true, debounceMs = 180): EditorSim {
+  const [nonce, setNonce] = useState(0);
+  const [pending, setPending] = useState(false);
+  // Only the fields that feed generation should trigger a rebuild; palette or
+  // description edits must not throw away the world you are looking at.
+  const signature = useMemo(
+    () =>
+      JSON.stringify([
+        body.id,
+        body.size,
+        body.maxHeight,
+        body.seed,
+        body.dem ?? null,
+        body.terrain,
+        body.minerals ?? null,
+        nonce,
+      ]),
+    [body, nonce],
+  );
+  const [built, setBuilt] = useState<{ sim: Simulation | null; ms: number; error: string | null; version: number }>({
+    sim: null,
+    ms: 0,
+    error: null,
+    version: 0,
+  });
+
+  useEffect(() => {
+    if (!enabled) return;
+    setPending(true);
+    const timer = setTimeout(() => {
+      const started = now();
+      try {
+        const sim = new Simulation({ body, spec, events: new EventBus() });
+        setBuilt((b) => ({ sim, ms: now() - started, error: null, version: b.version + 1 }));
+      } catch (err) {
+        setBuilt((b) => ({ ...b, error: err instanceof Error ? err.message : String(err) }));
+      }
+      setPending(false);
+    }, debounceMs);
+    return () => {
+      clearTimeout(timer);
+      setPending(false);
+    };
+    // `signature` captures every generation input; `body`/`spec` identity churn
+    // on unrelated edits would otherwise rebuild the world constantly.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [signature, enabled, debounceMs]);
+
+  return {
+    sim: built.sim,
+    world: built.sim?.world ?? null,
+    version: built.version,
+    ms: built.ms,
+    generating: pending,
+    error: built.error,
+    regenerate: () => setNonce((n) => n + 1),
+  };
+}
+
+function now(): number {
+  return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
new file mode 100644
index 0000000..c2e1a30
--- /dev/null
+++ b/packages/editor/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/engine/src/core/game.ts b/packages/engine/src/core/game.ts
index e7aa4fe..813a770 100644
--- a/packages/engine/src/core/game.ts
+++ b/packages/engine/src/core/game.ts
@@ -1,7 +1,12 @@
 import type { BodyDef, MissionState, RoverSpec, StructureType, Vec2 } from '../types.js';
 import { EventBus } from '../util/events.js';
 import { Simulation, TICK_DT } from '../sim/simulation.js';
+import { Camera } from '../render/camera.js';
+import { FlatRenderer } from '../render/flat.js';
 import { IsoRenderer } from '../render/renderer.js';
+import type { SceneView } from '../render/view.js';
+import { buildScene } from '../scene/build.js';
+import type { Scene, ViewKind } from '../scene/types.js';
 import { Controls } from '../input/controls.js';
 import { GameAudio } from '../audio/audio.js';
 
@@ -26,6 +31,9 @@ export interface RoverGameOptions {
   /** Disable the built-in synthesised audio (default enabled but silent
    * until `game.audio.unlock()` is called from a user gesture). */
   audio?: boolean;
+  /** Which view to open in: the isometric diorama or the flat 2D map.
+   * (Named `startView` because PixiJS hosts already pass a `view` canvas.) */
+  startView?: ViewKind;
 }
 
 /** A queued player order: drive somewhere, or go mine a specific column. */
@@ -41,14 +49,20 @@ export type RoverOrder =
 export class RoverGame {
   readonly events = new EventBus();
   readonly sim: Simulation;
-  readonly renderer: IsoRenderer;
+  /** The isometric ("3D" diorama) view. Always constructed. */
+  readonly iso: IsoRenderer;
+  /** Shared by every view, so input and host code keep one camera. */
+  readonly camera = new Camera();
   /** Synthesised audio director. Call `game.audio.unlock()` on first tap. */
   readonly audio: GameAudio;
+  private flatView: FlatRenderer | null = null;
+  private activeView: SceneView;
   private controls: Controls | null = null;
   private raf = 0;
   private acc = 0;
   private last = 0;
   private running = false;
+  private dpr = 1;
   private order: RoverOrder | null = null;
   private opts: RoverGameOptions;
 
@@ -61,7 +75,9 @@ export class RoverGame {
       seed: opts.seed,
       resume: opts.resume,
     });
-    this.renderer = new IsoRenderer(opts.canvas, this.sim);
+    this.iso = new IsoRenderer(opts.canvas, this.sim, this.camera);
+    this.activeView = this.iso;
+    if (opts.startView === 'flat') this.setView('flat');
     this.audio = new GameAudio({ enabled: opts.audio !== false });
     this.audio.startAmbient(this.sim.body.id);
     this.wireAudio();
@@ -150,6 +166,7 @@ export class RoverGame {
   }
 
   resize(cssW: number, cssH: number, dpr = 1): void {
+    this.dpr = dpr;
     this.renderer.resize(cssW, cssH, dpr);
   }
 
@@ -166,11 +183,60 @@ export class RoverGame {
     return this.sim.move(worldDir as 0 | 1 | 2 | 3);
   }
 
-  /** Rotate the isometric perspective by 90°. */
+  /** Rotate the perspective by 90° (both views understand rotation). */
   rotateView(): void {
     this.renderer.rotateClockwise();
   }
 
+  /** The renderer currently drawing: iso diorama or flat map. */
+  get renderer(): SceneView {
+    return this.activeView;
+  }
+
+  /** Which view is live. */
+  get view(): ViewKind {
+    return this.activeView.kind;
+  }
+
+  /**
+   * Switch between the isometric diorama and the top-down 2D map. The camera
+   * is shared, so the new view opens on the same tile at a comparable zoom,
+   * and anything holding `game.camera` keeps working.
+   */
+  setView(kind: ViewKind): void {
+    if (kind === this.activeView.kind) return;
+    const centre = this.activeView.centreTile();
+    const follow = this.camera.follow;
+    this.activeView.deactivate();
+    if (kind === 'flat') {
+      if (!this.flatView) this.flatView = new FlatRenderer(this.opts.canvas, this.sim, this.camera);
+      this.activeView = this.flatView;
+    } else {
+      this.activeView = this.iso;
+    }
+    this.activeView.setRotation(this.iso.rotation);
+    this.activeView.activate();
+    this.activeView.resize(this.camera.viewW, this.camera.viewH, this.dpr);
+    this.activeView.focusTile(centre);
+    this.camera.follow = follow;
+    this.events.emit('viewChanged', { view: kind });
+  }
+
+  /** Toggle between the two built-in views. */
+  toggleView(): ViewKind {
+    this.setView(this.activeView.kind === 'iso' ? 'flat' : 'iso');
+    return this.activeView.kind;
+  }
+
+  /**
+   * The current frame as a renderer-agnostic scene description — entities,
+   * positions, facings and flags. Hosts that want to draw TakeOn with their
+   * own technology start here.
+   */
+  scene(): Scene {
+    return buildScene(this.sim, { view: this.view });
+  }
+
   craft(recipeId: string): boolean {
     return this.sim.craft(recipeId);
   }
diff --git a/packages/engine/src/index.ts b/packages/engine/src/index.ts
index 91508fa..a2bf71d 100644
--- a/packages/engine/src/index.ts
+++ b/packages/engine/src/index.ts
@@ -17,6 +17,9 @@ export { GameAudio, type GameAudioOptions } from './audio/audio.js';
 export { Simulation, TICK_RATE, TICK_DT, DIRS, type SimOptions } from './sim/simulation.js';
 export {
   STRUCTURES,
+  registerStructure,
+  unregisterStructure,
+  listStructures,
   SOLAR_ARRAY_RANGE,
   LAUNCH_COOLDOWN,
   MAX_MOBILITY_UPGRADE,
@@ -30,15 +33,131 @@ export { RECIPES, getRecipe } from './sim/recipes.js';
 export { WEATHER_INFO } from './sim/weather.js';
 
 export { VoxelWorld } from './world/world.js';
-export { generateTerrain, findLandingSite } from './world/terrain.js';
+export {
+  registerWorldLayer,
+  unregisterWorldLayer,
+  listWorldLayerIds,
+  type LayerGenerator,
+} from './world/layers.js';
+export { generateTerrain, findLandingSite, skinBiome } from './world/terrain.js';
+export {
+  CHUNK_SIZE,
+  registerBiome,
+  unregisterBiome,
+  getBiome,
+  listBiomes,
+  chunkCoords,
+  chunkBiome,
+  biomeAt,
+  pickBiomeMaterial,
+  type Biome,
+} from './world/biomes.js';
 export { generateAnomalies } from './world/anomalies.js';
-export { MATERIALS, RESOURCE_NAMES } from './world/materials.js';
-export { BODIES, getBody } from './world/bodies.js';
+export {
+  MATERIALS,
+  RESOURCE_NAMES,
+  registerMaterial,
+  unregisterMaterial,
+  listMaterials,
+  registerResource,
+} from './world/materials.js';
+export { BODIES } from './world/bodies.js';
+export {
+  registerBodyKind,
+  unregisterBodyKind,
+  getBodyKind,
+  listBodyKinds,
+  bodyKindChain,
+  resolveBodyKind,
+  allowedBiomesForKind,
+  type BodyKind,
+  type BodyKindDefaults,
+} from './world/kinds.js';
+export {
+  getBody,
+  listBodies,
+  registerBody,
+  registerBodies,
+  unregisterBody,
+  clearRegisteredBodies,
+  isRegisteredBody,
+  registeredBodies,
+} from './world/registry.js';
+
+// Authoring: measure a world, and build/validate destinations from a tool.
+export {
+  heightField,
+  slopeField,
+  reachableMask,
+  crossSection,
+  analyzeTerrain,
+  type TerrainAnalysis,
+  type AnalyzeTerrainOptions,
+} from './world/analysis.js';
+export {
+  createBodyDraft,
+  cloneBody,
+  forkBody,
+  instantiateBody,
+  validateBody,
+  builtinBodyIds,
+  parseBodyJson,
+  bodyToJson,
+  bodyToTypeScript,
+  getBodyField,
+  setBodyField,
+  BODY_FIELDS,
+  BODY_FIELD_GROUPS,
+  BODY_TYPES,
+  WEATHER_TYPES,
+  MIN_BODY_SIZE,
+  MAX_BODY_SIZE,
+  MAX_BODY_HEIGHT,
+  type BodyField,
+  type BodyFieldKind,
+  type BodyFieldGroup,
+  type BodyValidation,
+} from './world/authoring.js';
 
 export { PARTS, getPart } from './parts/catalog.js';
 export { computeStats, canReach, defaultSpec } from './parts/assembly.js';
 
-export { IsoRenderer, type ViewRotation } from './render/renderer.js';
+export { IsoRenderer } from './render/renderer.js';
+export { FlatRenderer, FLAT_TILE } from './render/flat.js';
+export {
+  crossSectionImage,
+  renderCrossSection,
+  type CrossSectionImage,
+  type CrossSectionPaintOptions,
+} from './render/cross-section.js';
+export { type SceneView, type ViewRotation } from './render/view.js';
+export {
+  registerFlatPainter,
+  getFlatPainter,
+  listFlatPainterKinds,
+  type FlatPainter,
+  type FlatPaintContext,
+} from './render/flat-painters.js';
+export {
+  drawRover,
+  registerRoverPart,
+  unregisterRoverPart,
+  listRoverParts,
+  roverPaintContext,
+  ROVER_SCALE,
+  type RoverPart,
+  type RoverPaintContext,
+} from './render/rover.js';
+
+// Scene model: the renderer-agnostic description of a frame.
+export { buildScene, type BuildSceneOptions } from './scene/build.js';
+export {
+  entitiesOfKind,
+  type Scene,
+  type SceneEntity,
+  type SceneEntityKind,
+  type ViewKind,
+} from './scene/types.js';
 export { registerDem, getDem, sampleDem, type DemPatch } from './world/dem/index.js';
 export { Camera } from './render/camera.js';
 export { TILE_W, TILE_H, TILE_Z, project } from './render/sprites.js';
@@ -53,13 +172,35 @@ export {
   PocketBaseSync,
   missionCredits,
   RESOURCE_VALUE,
+  registerResourceValue,
   DISCOVERY_CREDITS,
   PHOTO_CREDITS_PER_QUALITY,
   STARTING_CREDITS,
 } from './net/sync.js';
 
 export { mulberry32, hash2, hash3, makeId } from './util/rng.js';
-export { valueNoise2, fbm2 } from './util/noise.js';
+export {
+  valueNoise2,
+  fbm2,
+  perlin2,
+  simplex2,
+  worley2,
+  poissonDisk,
+  scatterPoints,
+  blueNoiseMask,
+  blueNoise2,
+  clearBlueNoiseCache,
+  makeNoise,
+  fractal2,
+  describeNoise,
+  DEFAULT_NOISE,
+  NOISE_TYPES,
+  FRACTAL_KINDS,
+  type NoiseConfig,
+  type NoiseType,
+  type FractalKind,
+  type WorleyMode,
+} from './util/noise/index.js';
 
 // Framework-agnostic objective/mission module contract (offline-first).
 export {
diff --git a/packages/engine/src/net/sync.ts b/packages/engine/src/net/sync.ts
index 999468e..821a14b 100644
--- a/packages/engine/src/net/sync.ts
+++ b/packages/engine/src/net/sync.ts
@@ -67,6 +67,16 @@ export const RESOURCE_VALUE: Record<ResourceKey, number> = {
   alloy: 32,
 };
 
+/**
+ * Price a custom resource key for mission payouts (`missionCredits`, and the
+ * PocketBase spoke's mirrored calculation — update both, same as any other
+ * `RESOURCE_VALUE` change). Pair with `registerResource` (`world/materials.js`)
+ * to also give the key a display name.
+ */
+export function registerResourceValue(key: ResourceKey, credits: number): void {
+  RESOURCE_VALUE[key] = credits;
+}
+
 export const DISCOVERY_CREDITS = 120;
 export const PHOTO_CREDITS_PER_QUALITY = 2;
 /** Enough for a full tier-1/2 science build (tool + camera + scanner). */
diff --git a/packages/engine/src/render/cross-section.ts b/packages/engine/src/render/cross-section.ts
new file mode 100644
index 0000000..ae33905
--- /dev/null
+++ b/packages/engine/src/render/cross-section.ts
@@ -0,0 +1,111 @@
+import { Material } from '../types.js';
+import { crossSection } from '../world/analysis.js';
+import { MATERIALS } from '../world/materials.js';
+import type { VoxelWorld } from '../world/world.js';
+
+/**
+ * Vertical slice through a voxel world, one pixel per voxel, painted with the
+ * world's real material colours — the "underground" view: not a decorative
+ * strata illustration, but the actual generated column, so whatever a body's
+ * terrain (and `terrain.bands`, if it authors depth-stratified ore) put down
+ * is exactly what shows up here.
+ *
+ * Split into a pure `crossSectionImage` (an `ImageData`, no canvas required —
+ * usable in a worker, or fed into your own texture pipeline) and
+ * `renderCrossSection` (blits it into a canvas, scaled to fit with smoothing
+ * off, the way the editor and `@takeon/ui`'s `CrossSectionView` both use it).
+ */
+
+export interface CrossSectionPaintOptions {
+  /** Fill colour for void voxels (air, or outside the world). Default a dark navy. */
+  airColor?: [number, number, number];
+}
+
+/**
+ * Duck-typed `ImageData`: same shape (`data`/`width`/`height`), so it drops
+ * straight into `putImageData`, but building one never touches the DOM. The
+ * engine must keep working without DOM access for tests; only
+ * `renderCrossSection` (which needs a real canvas anyway) requires a browser.
+ */
+export interface CrossSectionImage {
+  readonly data: Uint8ClampedArray;
+  readonly width: number;
+  readonly height: number;
+}
+
+/** Build the raw slice image: `cells[z][i]` painted with `MATERIALS[m].colors[0]`. */
+export function crossSectionImage(
+  world: VoxelWorld,
+  axis: 'x' | 'y',
+  index: number,
+  opts: CrossSectionPaintOptions = {},
+): CrossSectionImage {
+  const slice = crossSection(world, axis, index);
+  const w = slice.length;
+  const h = slice.height;
+  const [ar, ag, ab] = opts.airColor ?? [14, 11, 32];
+  const buffer = new Uint8ClampedArray(w * h * 4);
+  for (let z = 0; z < h; z++) {
+    for (let i = 0; i < w; i++) {
+      const m = slice.cells[z][i];
+      // Rows paint top-down: the highest voxel is the first image row.
+      const px = ((h - 1 - z) * w + i) * 4;
+      const def = m === Material.Air ? undefined : MATERIALS[m];
+      const [r, g, b] = def ? hexToRgb(def.colors[0]) : [ar, ag, ab];
+      buffer[px] = r;
+      buffer[px + 1] = g;
+      buffer[px + 2] = b;
+      buffer[px + 3] = 255;
+    }
+  }
+  return typeof ImageData !== 'undefined' ? new ImageData(buffer, w, h) : { data: buffer, width: w, height: h };
+}
+
+/**
+ * Draw a vertical slice into a canvas, letterboxed to fit its current CSS
+ * size (read via `getBoundingClientRect`) with image smoothing off, so
+ * individual voxels stay crisp at any zoom.
+ */
+export function renderCrossSection(
+  target: HTMLCanvasElement,
+  world: VoxelWorld,
+  axis: 'x' | 'y',
+  index: number,
+  opts: CrossSectionPaintOptions = {},
+): void {
+  const image = crossSectionImage(world, axis, index, opts);
+  const ctx = target.getContext('2d');
+  if (!ctx) return;
+
+  const dpr = Math.min(2, typeof window === 'undefined' ? 1 : window.devicePixelRatio || 1);
+  const rect = target.getBoundingClientRect();
+  const w = Math.max(1, Math.round((rect.width || image.width) * dpr));
+  const h = Math.max(1, Math.round((rect.height || image.height) * dpr));
+  if (target.width !== w || target.height !== h) {
+    target.width = w;
+    target.height = h;
+  }
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  const cssW = w / dpr;
+  const cssH = h / dpr;
+  ctx.clearRect(0, 0, cssW, cssH);
+
+  const source = document.createElement('canvas');
+  source.width = image.width;
+  source.height = image.height;
+  // `renderCrossSection` only runs where a real canvas exists, so `image` is
+  // always a genuine `ImageData` here (see `crossSectionImage`'s feature
+  // detection) — the cast just reflects that at the type level.
+  source.getContext('2d')?.putImageData(image as ImageData, 0, 0);
+
+  const scale = Math.min(cssW / image.width, cssH / image.height);
+  const ox = (cssW - image.width * scale) / 2;
+  const oy = (cssH - image.height * scale) / 2;
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(source, ox, oy, image.width * scale, image.height * scale);
+}
+
+function hexToRgb(hex: string): [number, number, number] {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
diff --git a/packages/engine/src/render/entities.ts b/packages/engine/src/render/entities.ts
index a1d16f9..f125f95 100644
--- a/packages/engine/src/render/entities.ts
+++ b/packages/engine/src/render/entities.ts
@@ -1,373 +1,16 @@
-import type { Anomaly, RoverState, Structure } from '../types.js';
+import type { Anomaly, Structure } from '../types.js';
 import { shade } from './sprites.js';
+import { roundRect } from './rover.js';
 
 /**
- * Procedural entity art, drawn as vector shapes at screen coords.
- * `s` is the camera zoom (1 tile = 32*s px wide). Vector drawing means the
- * rover stays crisp at any zoom with no asset pipeline.
+ * Procedural entity art for structures, launches and anomalies, drawn as
+ * vector shapes at screen coords. `s` is the camera zoom (1 tile = 32*s px
+ * wide). Vector drawing means everything stays crisp at any zoom with no
+ * asset pipeline.
+ *
+ * The rover lives in `rover.ts`, where it is assembled from registered parts.
  */
 
-/** Rover render scale relative to a tile — oversized for a chunky,
- * readable diorama look. */
-const ROVER_SCALE = 1.7;
-
-export function drawRover(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  s: number,
-  rover: RoverState,
-  daylight: number,
-  screenFacing?: 0 | 1 | 2 | 3,
-  time = 0,
-): void {
-  const { spec, stats } = rover;
-  const facing = screenFacing ?? rover.facing;
-  const flip = facing === 1 || facing === 2 ? -1 : 1;
-  const hasSolar = stats.solarRate > 0;
-  const hasRtg = stats.rtgRate > 0;
-  const hasCam = stats.photoQuality > 0;
-  const hasScanner = stats.scanRadius > 0;
-  const hasTool = stats.miningPower > 0;
-  const tracks = stats.grip >= 0.8;
-  const mob = rover.upgrades?.mobility ?? 0; // in-field mobility kit level
-  const body = cssHex(spec.color || '#c8d6e5');
-
-  // Animation state: wheels spin and the chassis bounces while driving; a
-  // slow idle sway keeps it feeling alive when parked.
-  const moving = rover.moveFrom != null;
-  const spin = time * (tracks ? 5 : 7);
-  const bob = moving ? Math.sin(time * 16) * 0.55 : Math.sin(time * 1.8) * 0.14;
-  const tiltDir = moving ? Math.sin(time * 16) * 0.02 : 0;
-
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.scale(s * ROVER_SCALE * flip, s * ROVER_SCALE);
-  ctx.lineJoin = 'round';
-
-  // Ground shadow (does not bob — it's on the ground).
-  const sh = ctx.createRadialGradient(0, 3.5, 2, 0, 3.5, 13);
-  sh.addColorStop(0, 'rgba(10,6,20,0.42)');
-  sh.addColorStop(1, 'rgba(10,6,20,0)');
-  ctx.fillStyle = sh;
-  ctx.beginPath();
-  ctx.ellipse(0, 3.5, 13, 5.2, 0, 0, Math.PI * 2);
-  ctx.fill();
-
-  // ── Drivetrain ────────────────────────────────────────────────────────
-  if (tracks) {
-    // Tread loop with scrolling cleats + spinning road wheels. A mobility
-    // kit fits a taller, grippier track.
-    const th = 8 + mob * 1.3;
-    const rw = 2.1 + mob * 0.35;
-    ctx.fillStyle = '#23222b';
-    roundRect(ctx, -12, -3.5, 24, th, 3.5);
-    ctx.fill();
-    ctx.fillStyle = '#3a3844';
-    const scroll = ((spin * 2) % 2.5 + 2.5) % 2.5;
-    for (let i = -10 + scroll; i <= 10; i += 2.5) ctx.fillRect(i, -3.5, 1.1, th);
-    for (const wx of [-8, -2.5, 3, 8.5]) {
-      ctx.save();
-      ctx.translate(wx, 0.5 + (th - 8) * 0.5);
-      ctx.rotate(spin);
-      ctx.fillStyle = '#4d4b59';
-      ctx.beginPath();
-      ctx.arc(0, 0, rw, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.strokeStyle = '#6c6a78';
-      ctx.lineWidth = 0.5;
-      ctx.beginPath();
-      ctx.moveTo(-rw + 0.5, 0);
-      ctx.lineTo(rw - 0.5, 0);
-      ctx.moveTo(0, -rw + 0.5);
-      ctx.lineTo(0, rw - 0.5);
-      ctx.stroke();
-      ctx.restore();
-    }
-  } else {
-    // Rocker-bogie: suspension arms first, then spinning spoked wheels.
-    ctx.strokeStyle = '#8a8f98';
-    ctx.lineWidth = 1.1;
-    ctx.beginPath();
-    ctx.moveTo(-8, 1);
-    ctx.lineTo(-3, -5);
-    ctx.lineTo(1, -5);
-    ctx.moveTo(1, -5);
-    ctx.lineTo(4, -1);
-    ctx.lineTo(8, 1);
-    ctx.moveTo(0, 1);
-    ctx.lineTo(-3, -5);
-    ctx.stroke();
-    // A mobility kit swaps in larger, knobblier wheels.
-    const wr = 3.6 + mob * 0.7;
-    for (const wx of [-8, 0, 8]) {
-      const wg = ctx.createRadialGradient(wx - 1, 0.5, 0.5, wx, 1.5, wr + 0.4);
-      wg.addColorStop(0, '#4a4954');
-      wg.addColorStop(1, '#1d1c24');
-      ctx.fillStyle = wg;
-      ctx.beginPath();
-      ctx.arc(wx, 1.5, wr, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.save();
-      ctx.translate(wx, 1.5);
-      ctx.rotate(spin);
-      // Treads.
-      ctx.strokeStyle = '#15141b';
-      ctx.lineWidth = 0.7 + mob * 0.12;
-      for (let a = 0; a < Math.PI * 2; a += Math.PI / 5) {
-        ctx.beginPath();
-        ctx.moveTo(Math.cos(a) * (wr - 0.7), Math.sin(a) * (wr - 0.7));
-        ctx.lineTo(Math.cos(a) * wr, Math.sin(a) * wr);
-        ctx.stroke();
-      }
-      // Hub + spokes.
-      ctx.strokeStyle = '#6c6a78';
-      ctx.lineWidth = 0.6;
-      for (let a = 0; a < Math.PI * 2; a += Math.PI / 3) {
-        ctx.beginPath();
-        ctx.moveTo(0, 0);
-        ctx.lineTo(Math.cos(a) * (wr - 1), Math.sin(a) * (wr - 1));
-        ctx.stroke();
-      }
-      ctx.restore();
-      ctx.fillStyle = '#9aa0ab';
-      ctx.beginPath();
-      ctx.arc(wx, 1.5, 1, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  }
-
-  // Everything above the wheels bobs and leans with the chassis.
-  ctx.translate(0, bob);
-  ctx.transform(1, 0, tiltDir, 1, 0, 0);
-
-  // ── Body ──────────────────────────────────────────────────────────────
-  const bg = ctx.createLinearGradient(0, -11, 0, -2);
-  bg.addColorStop(0, shade(body, 1.22));
-  bg.addColorStop(0.55, body);
-  bg.addColorStop(1, shade(body, 0.66));
-  ctx.fillStyle = bg;
-  roundRect(ctx, -11, -11, 22, 9.5, 1.8);
-  ctx.fill();
-  // Panel seams.
-  ctx.strokeStyle = 'rgba(20,16,40,0.28)';
-  ctx.lineWidth = 0.5;
-  ctx.beginPath();
-  ctx.moveTo(-4, -11);
-  ctx.lineTo(-4, -1.5);
-  ctx.moveTo(3.5, -11);
-  ctx.lineTo(3.5, -1.5);
-  ctx.moveTo(-11, -5);
-  ctx.lineTo(11, -5);
-  ctx.stroke();
-  // White top deck.
-  ctx.fillStyle = shade(body, 1.35);
-  roundRect(ctx, -10, -12.2, 20, 2.4, 1);
-  ctx.fill();
-  // Mobility-kit pips: one amber stud per upgrade level on the deck.
-  for (let i = 0; i < mob; i++) {
-    ctx.fillStyle = '#ffb347';
-    ctx.beginPath();
-    ctx.arc(-8.5 + i * 2.2, -11, 0.7, 0, Math.PI * 2);
-    ctx.fill();
-  }
-  // Gold multilayer-insulation block at the rear.
-  const foil = ctx.createLinearGradient(-11, -9, -6, -3);
-  foil.addColorStop(0, '#e8b64c');
-  foil.addColorStop(0.5, '#c28d2e');
-  foil.addColorStop(1, '#a3721f');
-  ctx.fillStyle = foil;
-  roundRect(ctx, -10.6, -9.5, 4.6, 6.5, 0.8);
-  ctx.fill();
-  ctx.strokeStyle = 'rgba(60,40,10,0.35)';
-  ctx.lineWidth = 0.4;
-  for (let i = 1; i < 4; i++) {
-    ctx.beginPath();
-    ctx.moveTo(-10.6, -9.5 + i * 1.6);
-    ctx.lineTo(-6, -9.5 + i * 1.6);
-    ctx.stroke();
-  }
-
-  // ── Power ─────────────────────────────────────────────────────────────
-  if (hasSolar) {
-    for (const [ox, w] of [[-22, 10], [12, 10]] as [number, number][]) {
-      const pg = ctx.createLinearGradient(ox, -10, ox + w, -4);
-      pg.addColorStop(0, '#1d3a6f');
-      pg.addColorStop(0.5, '#2c569c');
-      pg.addColorStop(1, '#1a3260');
-      ctx.fillStyle = pg;
-      roundRect(ctx, ox, -10, w, 6, 0.8);
-      ctx.fill();
-      ctx.strokeStyle = 'rgba(150,190,255,0.35)';
-      ctx.lineWidth = 0.4;
-      for (let i = 1; i < 5; i++) {
-        ctx.beginPath();
-        ctx.moveTo(ox + (i * w) / 5, -10);
-        ctx.lineTo(ox + (i * w) / 5, -4);
-        ctx.stroke();
-      }
-      ctx.beginPath();
-      ctx.moveTo(ox, -7);
-      ctx.lineTo(ox + w, -7);
-      ctx.stroke();
-      // Sheen.
-      ctx.fillStyle = 'rgba(255,255,255,0.10)';
-      ctx.beginPath();
-      ctx.moveTo(ox + 1, -10);
-      ctx.lineTo(ox + 4, -10);
-      ctx.lineTo(ox + 2, -4);
-      ctx.lineTo(ox, -4);
-      ctx.closePath();
-      ctx.fill();
-    }
-    // Wing struts.
-    ctx.strokeStyle = '#8a8f98';
-    ctx.lineWidth = 0.9;
-    ctx.beginPath();
-    ctx.moveTo(-11, -7);
-    ctx.lineTo(-12.5, -7);
-    ctx.moveTo(11, -7);
-    ctx.lineTo(12.5, -7);
-    ctx.stroke();
-  }
-  if (hasRtg) {
-    const rg = ctx.createLinearGradient(-16, -9, -12, -2);
-    rg.addColorStop(0, '#767c86');
-    rg.addColorStop(1, '#3f434c');
-    ctx.fillStyle = rg;
-    roundRect(ctx, -16, -8.5, 4, 7, 1.6);
-    ctx.fill();
-    ctx.strokeStyle = '#9aa0ab';
-    ctx.lineWidth = 0.6;
-    for (let i = 0; i < 4; i++) {
-      ctx.beginPath();
-      ctx.moveTo(-17, -7.8 + i * 1.8);
-      ctx.lineTo(-11.2, -7.8 + i * 1.8);
-      ctx.stroke();
-    }
-  }
-
-  // ── Mast, dish, scanner ───────────────────────────────────────────────
-  if (hasCam) {
-    ctx.strokeStyle = '#9aa3ad';
-    ctx.lineWidth = 1.1;
-    ctx.beginPath();
-    ctx.moveTo(4.5, -11);
-    ctx.lineTo(4.5, -19.5);
-    ctx.stroke();
-    const hg = ctx.createLinearGradient(1.5, -23, 8, -19);
-    hg.addColorStop(0, '#f2f4f8');
-    hg.addColorStop(1, '#b9c0cb');
-    ctx.fillStyle = hg;
-    roundRect(ctx, 1.5, -23, 6.5, 3.8, 1);
-    ctx.fill();
-    // Stereo eyes + laser dot.
-    ctx.fillStyle = '#1a1e28';
-    ctx.beginPath();
-    ctx.arc(6.7, -21.2, 0.95, 0, Math.PI * 2);
-    ctx.arc(4.3, -21.2, 0.75, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillStyle = '#8fd0ff';
-    ctx.beginPath();
-    ctx.arc(6.7, -21.2, 0.4, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillStyle = '#e05555';
-    ctx.beginPath();
-    ctx.arc(2.6, -21.9, 0.35, 0, Math.PI * 2);
-    ctx.fill();
-  }
-  // High-gain dish (always — every rover phones home).
-  ctx.save();
-  ctx.translate(-2.5, -13.6);
-  ctx.rotate(-0.5);
-  const dg = ctx.createLinearGradient(-2.4, -1, 2.4, 1);
-  dg.addColorStop(0, '#e8ecf2');
-  dg.addColorStop(1, '#aab2bf');
-  ctx.fillStyle = dg;
-  ctx.beginPath();
-  ctx.ellipse(0, 0, 2.5, 1.5, 0, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.strokeStyle = '#7c8490';
-  ctx.lineWidth = 0.5;
-  ctx.beginPath();
-  ctx.moveTo(0, 0);
-  ctx.lineTo(0, 2.4);
-  ctx.stroke();
-  ctx.restore();
-  if (hasScanner) {
-    // Whip antenna with tip light.
-    ctx.strokeStyle = '#9aa3ad';
-    ctx.lineWidth = 0.6;
-    ctx.beginPath();
-    ctx.moveTo(-7.5, -11);
-    ctx.lineTo(-8.5, -18.5);
-    ctx.stroke();
-    ctx.fillStyle = '#ffd166';
-    ctx.beginPath();
-    ctx.arc(-8.5, -19, 0.7, 0, Math.PI * 2);
-    ctx.fill();
-  }
-
-  // ── Tool arm ──────────────────────────────────────────────────────────
-  if (hasTool) {
-    const digging = !!rover.mining;
-    const bob = digging ? Math.sin(time * 18) * 1.2 : 0;
-    ctx.strokeStyle = '#8a9099';
-    ctx.lineWidth = 1.3;
-    ctx.beginPath();
-    ctx.moveTo(10, -6.5);
-    ctx.lineTo(14.5, -4);
-    ctx.lineTo(17, 0.5 + bob);
-    ctx.stroke();
-    // Elbow joint.
-    ctx.fillStyle = '#5f656e';
-    ctx.beginPath();
-    ctx.arc(14.5, -4, 1.1, 0, Math.PI * 2);
-    ctx.fill();
-    // Drill head.
-    ctx.fillStyle = digging ? '#ffb347' : '#767d87';
-    ctx.beginPath();
-    ctx.moveTo(15.6, -0.4 + bob);
-    ctx.lineTo(19.5, 2.4 + bob);
-    ctx.lineTo(16, 3.4 + bob);
-    ctx.closePath();
-    ctx.fill();
-  }
-
-  // Headlights at night.
-  if (daylight < 0.35) {
-    ctx.fillStyle = 'rgba(255,244,200,0.14)';
-    ctx.beginPath();
-    ctx.moveTo(11, -8);
-    ctx.lineTo(30, -1);
-    ctx.lineTo(30, 9);
-    ctx.lineTo(11, -3);
-    ctx.closePath();
-    ctx.fill();
-    ctx.fillStyle = 'rgba(255,247,214,0.95)';
-    ctx.beginPath();
-    ctx.arc(10.8, -7, 0.9, 0, Math.PI * 2);
-    ctx.arc(10.8, -4, 0.9, 0, Math.PI * 2);
-    ctx.fill();
-  }
-
-  ctx.restore();
-}
-
-function roundRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void {
-  ctx.beginPath();
-  ctx.moveTo(x + r, y);
-  ctx.arcTo(x + w, y, x + w, y + h, r);
-  ctx.arcTo(x + w, y + h, x, y + h, r);
-  ctx.arcTo(x, y + h, x, y, r);
-  ctx.arcTo(x, y, x + w, y, r);
-  ctx.closePath();
-}
-
-function cssHex(c: string): string {
-  return c.startsWith('#') && c.length === 7 ? c : '#c8d6e5';
-}
-
 export function drawStructure(
   ctx: CanvasRenderingContext2D,
   x: number,
diff --git a/packages/engine/src/render/flat-painters.ts b/packages/engine/src/render/flat-painters.ts
new file mode 100644
index 0000000..e28b70f
--- /dev/null
+++ b/packages/engine/src/render/flat-painters.ts
@@ -0,0 +1,182 @@
+import type { Anomaly, RoverState, Structure } from '../types.js';
+import type { SceneEntity, SceneEntityKind } from '../scene/types.js';
+
+/**
+ * Top-down entity painters for the 2D view.
+ *
+ * The flat view is a *readable* projection, not a miniature of the diorama:
+ * entities become chunky glyphs sized in tiles, so a 96² world stays legible
+ * zoomed out. Painters are registered per entity kind, so a host game can draw
+ * its own entities (or replace ours) without touching the renderer.
+ */
+
+export interface FlatPaintContext {
+  /** Pixels per tile at the current zoom. */
+  tile: number;
+  /** 0 = night, 1 = noon. */
+  daylight: number;
+  /** Smooth render clock in seconds. */
+  time: number;
+  /** Screen-space facing after view rotation. */
+  facing: 0 | 1 | 2 | 3;
+}
+
+export type FlatPainter = (ctx: CanvasRenderingContext2D, entity: SceneEntity, p: FlatPaintContext) => void;
+
+const painters = new Map<SceneEntityKind, FlatPainter>();
+
+export function registerFlatPainter(kind: SceneEntityKind, painter: FlatPainter): void {
+  painters.set(kind, painter);
+}
+
+export function getFlatPainter(kind: SceneEntityKind): FlatPainter | undefined {
+  return painters.get(kind);
+}
+
+export function listFlatPainterKinds(): SceneEntityKind[] {
+  return [...painters.keys()];
+}
+
+// ── Built-ins ───────────────────────────────────────────────────────────
+
+registerFlatPainter('rover', (ctx, entity, p) => {
+  const rover = entity.ref as RoverState | undefined;
+  // Floor the glyph size: zoomed out to the whole world a tile is a few
+  // pixels, and the thing you are driving must never vanish.
+  const r = Math.max(4, p.tile * 0.42);
+  const colour = rover?.spec.color || '#c8d6e5';
+
+  // Halo so the rover never disappears against bright terrain.
+  ctx.fillStyle = 'rgba(8,12,22,0.45)';
+  ctx.beginPath();
+  ctx.arc(0, 0, r * 1.7, 0, Math.PI * 2);
+  ctx.fill();
+
+  // Hull: a rounded chevron pointing where it is facing.
+  ctx.save();
+  ctx.rotate((p.facing * Math.PI) / 2 + Math.PI / 4);
+  ctx.fillStyle = colour;
+  ctx.strokeStyle = 'rgba(10,14,24,0.85)';
+  ctx.lineWidth = Math.max(1, r * 0.22);
+  ctx.beginPath();
+  ctx.moveTo(r * 1.25, 0);
+  ctx.lineTo(-r * 0.85, r * 0.95);
+  ctx.lineTo(-r * 0.35, 0);
+  ctx.lineTo(-r * 0.85, -r * 0.95);
+  ctx.closePath();
+  ctx.fill();
+  ctx.stroke();
+  ctx.restore();
+
+  // Status dot: charge state, matching the HUD's language.
+  const battery = Number(entity.data?.battery ?? 0);
+  const stats = rover?.stats;
+  const charge = stats && stats.batteryCapacity > 0 ? battery / stats.batteryCapacity : 1;
+  ctx.fillStyle = charge < 0.2 ? '#ff5f5f' : charge < 0.5 ? '#ffb03a' : '#6fdc8c';
+  ctx.beginPath();
+  ctx.arc(0, 0, Math.max(1, r * 0.28), 0, Math.PI * 2);
+  ctx.fill();
+
+  if (entity.data?.mining) {
+    const pulse = 0.5 + 0.5 * Math.sin(p.time * 8);
+    ctx.strokeStyle = `rgba(255,176,58,${0.35 + pulse * 0.4})`;
+    ctx.lineWidth = Math.max(1, r * 0.2);
+    ctx.beginPath();
+    ctx.arc(0, 0, r * (1.9 + pulse * 0.25), 0, Math.PI * 2);
+    ctx.stroke();
+  }
+});
+
+const STRUCTURE_GLYPHS: Record<string, { colour: string; glyph: string }> = {
+  'solar-array': { colour: '#4a7fd4', glyph: '▤' },
+  beacon: { colour: '#ffd166', glyph: '▲' },
+  'drill-rig': { colour: '#c96f4a', glyph: '⌁' },
+  cache: { colour: '#7bd88f', glyph: '▣' },
+  refinery: { colour: '#b07de0', glyph: '⬒' },
+  'habitat-frame': { colour: '#9aa7b8', glyph: '⌂' },
+  habitat: { colour: '#e6edf5', glyph: '⌂' },
+  'launch-pad': { colour: '#ff8a5c', glyph: '▲' },
+  generator: { colour: '#ffb03a', glyph: '⚡' },
+  pylon: { colour: '#5fe3d8', glyph: '↕' },
+};
+
+registerFlatPainter('structure', (ctx, entity, p) => {
+  const st = entity.ref as Structure | undefined;
+  const spec = STRUCTURE_GLYPHS[entity.variant ?? ''] ?? { colour: '#9aa7b8', glyph: '▪' };
+  const size = Math.max(6, p.tile * 0.78);
+  const powered = Boolean(entity.data?.powered);
+  const progress = Number(entity.data?.progress ?? 1);
+
+  ctx.fillStyle = 'rgba(8,12,22,0.5)';
+  ctx.fillRect(-size / 2 - 1, -size / 2 - 1, size + 2, size + 2);
+  ctx.fillStyle = powered ? spec.colour : shadeHex(spec.colour, 0.55);
+  ctx.fillRect(-size / 2, -size / 2, size, size);
+
+  if (progress < 1) {
+    // Under construction: fill from the bottom as the frame goes up.
+    ctx.fillStyle = 'rgba(10,14,24,0.55)';
+    ctx.fillRect(-size / 2, -size / 2, size, size * (1 - progress));
+  }
+
+  if (size > 9) {
+    ctx.fillStyle = 'rgba(8,12,22,0.9)';
+    ctx.font = `${Math.round(size * 0.72)}px system-ui, sans-serif`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(spec.glyph, 0, size * 0.04);
+  }
+
+  if (powered && p.daylight < 0.4) {
+    ctx.strokeStyle = 'rgba(95,227,216,0.5)';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(-size / 2 - 2, -size / 2 - 2, size + 4, size + 4);
+  }
+});
+
+registerFlatPainter('anomaly', (ctx, entity, p) => {
+  const anomaly = entity.ref as Anomaly | undefined;
+  const documented = Boolean(entity.data?.documented ?? anomaly?.documented);
+  const r = Math.max(4, p.tile * 0.42);
+  const pulse = documented ? 0 : 0.5 + 0.5 * Math.sin(p.time * 2.4);
+
+  ctx.strokeStyle = documented ? '#7bd88f' : `rgba(255,209,102,${0.55 + pulse * 0.45})`;
+  ctx.lineWidth = Math.max(1, r * 0.3);
+  ctx.beginPath();
+  ctx.moveTo(0, -r);
+  ctx.lineTo(r, 0);
+  ctx.lineTo(0, r);
+  ctx.lineTo(-r, 0);
+  ctx.closePath();
+  ctx.stroke();
+  if (!documented) {
+    ctx.strokeStyle = `rgba(255,209,102,${0.25 * pulse})`;
+    ctx.beginPath();
+    ctx.arc(0, 0, r * (1.6 + pulse), 0, Math.PI * 2);
+    ctx.stroke();
+  }
+});
+
+registerFlatPainter('marker', (ctx, entity, p) => {
+  // Weather cell: a swirling ring so the hazard reads as an area, not a point.
+  const intensity = Number(entity.data?.intensity ?? 0.5);
+  const r = Math.max(12, p.tile * (1.6 + intensity));
+  ctx.strokeStyle = `rgba(255,176,58,${0.3 + intensity * 0.3})`;
+  ctx.lineWidth = Math.max(1, p.tile * 0.18);
+  ctx.beginPath();
+  for (let a = 0; a < Math.PI * 3; a += 0.25) {
+    const rad = (r * a) / (Math.PI * 3);
+    const x = Math.cos(a + p.time * 2) * rad;
+    const y = Math.sin(a + p.time * 2) * rad;
+    if (a === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  ctx.stroke();
+});
+
+function shadeHex(hex: string, f: number): string {
+  const n = parseInt(hex.slice(1), 16);
+  const r = Math.round(((n >> 16) & 255) * f);
+  const g = Math.round(((n >> 8) & 255) * f);
+  const b = Math.round((n & 255) * f);
+  return `rgb(${r},${g},${b})`;
+}
diff --git a/packages/engine/src/render/flat.ts b/packages/engine/src/render/flat.ts
new file mode 100644
index 0000000..c5f3457
--- /dev/null
+++ b/packages/engine/src/render/flat.ts
@@ -0,0 +1,433 @@
+import { buildScene } from '../scene/build.js';
+import type { Simulation } from '../sim/simulation.js';
+import { Material, type Vec2 } from '../types.js';
+import { MATERIALS } from '../world/materials.js';
+import { Camera } from './camera.js';
+import { getFlatPainter, type FlatPaintContext } from './flat-painters.js';
+import type { SceneView, ViewRotation } from './view.js';
+
+/** Base pixels per tile before camera zoom. */
+export const FLAT_TILE = 12;
+
+/**
+ * Top-down 2D view of the same world the isometric renderer draws.
+ *
+ * Some scenes read better flat — planning a route, judging how ore veins run,
+ * laying out an outpost, or any UI-heavy screen where a diorama is in the way.
+ * Terrain is rasterised once per world change into an offscreen image (one
+ * pixel per column, with hillshading), then blitted with smoothing off, so a
+ * frame costs a single scaled `drawImage` plus the entities on top.
+ */
+export class FlatRenderer implements SceneView {
+  readonly kind = 'flat' as const;
+  readonly camera: Camera;
+  rotation: ViewRotation = 0;
+  /** Contour lines every N voxels; 0 disables them. */
+  contourStep = 3;
+  showGrid = true;
+
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private sim: Simulation;
+  private dpr = 1;
+  private cssW = 800;
+  private cssH = 600;
+  private terrain: HTMLCanvasElement | OffscreenCanvas | null = null;
+  private terrainVersion = -1;
+  private terrainRotation: ViewRotation = 0;
+  private active = false;
+  private fitted = false;
+  private renderTime = 0;
+  private lastDrawMs = 0;
+
+  constructor(canvas: HTMLCanvasElement, sim: Simulation, camera: Camera = new Camera()) {
+    this.canvas = canvas;
+    this.sim = sim;
+    this.camera = camera;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('takeon: could not acquire 2d context');
+    this.ctx = ctx;
+    this.lastDrawMs = nowMs();
+  }
+
+  // ── View plumbing ─────────────────────────────────────────────────────
+
+  activate(): void {
+    this.active = true;
+    this.terrainVersion = -1;
+    this.sim.world.onColumnChange = () => {
+      this.terrainVersion = -1;
+    };
+    // Flat tiles are smaller than iso ones, so the useful zoom band differs.
+    this.camera.minZoom = 0.25;
+    this.camera.maxZoom = 6;
+    this.camera.zoom = Math.max(this.camera.minZoom, Math.min(this.camera.maxZoom, this.camera.zoom));
+  }
+
+  deactivate(): void {
+    this.active = false;
+    if (this.sim.world.onColumnChange) this.sim.world.onColumnChange = null;
+  }
+
+  resize(cssW: number, cssH: number, dpr = 1): void {
+    this.cssW = Math.max(1, cssW);
+    this.cssH = Math.max(1, cssH);
+    this.dpr = Math.max(1, Math.min(3, dpr));
+    this.canvas.width = Math.round(this.cssW * this.dpr);
+    this.canvas.height = Math.round(this.cssH * this.dpr);
+    this.camera.viewW = this.cssW;
+    this.camera.viewH = this.cssH;
+  }
+
+  setRotation(rotation: ViewRotation): void {
+    if (rotation === this.rotation) return;
+    const centre = this.centreTile();
+    this.rotation = rotation;
+    this.terrainVersion = -1;
+    this.focusTile(centre);
+  }
+
+  rotateClockwise(): void {
+    this.setRotation((((this.rotation + 1) % 4) as ViewRotation));
+  }
+
+  /** World tile → view tile for the current rotation. */
+  private toView(x: number, y: number): Vec2 {
+    const s = this.sim.world.size - 1;
+    switch (this.rotation) {
+      case 0: return { x, y };
+      case 1: return { x: y, y: s - x };
+      case 2: return { x: s - x, y: s - y };
+      default: return { x: s - y, y: x };
+    }
+  }
+
+  private toWorld(u: number, v: number): Vec2 {
+    const s = this.sim.world.size - 1;
+    switch (this.rotation) {
+      case 0: return { x: u, y: v };
+      case 1: return { x: s - v, y: u };
+      case 2: return { x: s - u, y: s - v };
+      default: return { x: v, y: s - u };
+    }
+  }
+
+  /** Pixels per tile at the current zoom. */
+  private tilePx(): number {
+    return FLAT_TILE * this.camera.zoom;
+  }
+
+  private viewToScreen(u: number, v: number): { x: number; y: number } {
+    const t = this.tilePx();
+    return {
+      x: (u - this.camera.cx) * t + this.cssW / 2,
+      y: (v - this.camera.cy) * t + this.cssH / 2,
+    };
+  }
+
+  pickTile(canvasX: number, canvasY: number): Vec2 | null {
+    const t = this.tilePx();
+    const u = Math.floor((canvasX - this.cssW / 2) / t + this.camera.cx);
+    const v = Math.floor((canvasY - this.cssH / 2) / t + this.camera.cy);
+    const size = this.sim.world.size;
+    if (u < 0 || v < 0 || u >= size || v >= size) return null;
+    const w = this.toWorld(u, v);
+    return this.sim.world.isSolid(w.x, w.y) ? w : null;
+  }
+
+  centreTile(): Vec2 {
+    const centre = this.pickTile(this.cssW / 2, this.cssH / 2);
+    if (centre) return centre;
+    const clamp = (n: number) => Math.max(0, Math.min(this.sim.world.size - 1, Math.round(n)));
+    return this.toWorld(clamp(this.camera.cx), clamp(this.camera.cy));
+  }
+
+  focusTile(tile: Vec2): void {
+    const v = this.toView(tile.x, tile.y);
+    this.camera.cx = v.x + 0.5;
+    this.camera.cy = v.y + 0.5;
+  }
+
+  // ── Drawing ───────────────────────────────────────────────────────────
+
+  draw(): void {
+    const now = nowMs();
+    this.renderTime += Math.min(0.1, (now - this.lastDrawMs) / 1000);
+    this.lastDrawMs = now;
+
+    const ctx = this.ctx;
+    const sim = this.sim;
+    const daylight = sim.daylight();
+    ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+
+    // First frame after opening the map: frame the whole world. A top-down
+    // view inherited from the diorama's zoom would otherwise open at a
+    // pointless magnification.
+    if (!this.fitted) {
+      this.fitted = true;
+      this.fitToWorld();
+    }
+
+    // Backdrop: the body's night sky, so the map still feels like *there*.
+    ctx.fillStyle = mix(sim.body.palette.skyNight, '#05070f', 0.45);
+    ctx.fillRect(0, 0, this.cssW, this.cssH);
+
+    if (this.camera.follow) {
+      const r = sim.rover;
+      this.focusTile({ x: Math.round(r.renderPos.x), y: Math.round(r.renderPos.y) });
+    }
+
+    this.ensureTerrain();
+    const t = this.tilePx();
+    const origin = this.viewToScreen(0, 0);
+    if (this.terrain) {
+      ctx.imageSmoothingEnabled = false;
+      ctx.globalAlpha = 0.35 + daylight * 0.65;
+      ctx.drawImage(
+        this.terrain as CanvasImageSource,
+        origin.x,
+        origin.y,
+        this.sim.world.size * t,
+        this.sim.world.size * t,
+      );
+      ctx.globalAlpha = 1;
+    }
+
+    if (this.showGrid && t >= 7) this.drawGrid(origin, t);
+
+    // Home pin, so the landing site is always findable.
+    const home = this.toView(sim.landingSite.x, sim.landingSite.y);
+    const hp = this.viewToScreen(home.x + 0.5, home.y + 0.5);
+    ctx.strokeStyle = 'rgba(255,200,87,0.85)';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(hp.x - t * 0.5, hp.y);
+    ctx.lineTo(hp.x + t * 0.5, hp.y);
+    ctx.moveTo(hp.x, hp.y - t * 0.5);
+    ctx.lineTo(hp.x, hp.y + t * 0.5);
+    ctx.stroke();
+
+    // Scanner reach, when the rover carries one: the flat view is where you
+    // plan sweeps, so the radius belongs on it.
+    const rover = sim.rover;
+    const rv = this.toView(rover.renderPos.x, rover.renderPos.y);
+    const rp = this.viewToScreen(rv.x + 0.5, rv.y + 0.5);
+    if (rover.stats.scanRadius > 0) {
+      ctx.strokeStyle = 'rgba(95,227,216,0.22)';
+      ctx.setLineDash([4, 4]);
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.arc(rp.x, rp.y, rover.stats.scanRadius * t, 0, Math.PI * 2);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+
+    const scene = buildScene(sim, { view: 'flat' });
+    const paint: FlatPaintContext = {
+      tile: t,
+      daylight,
+      time: this.renderTime,
+      facing: 0,
+    };
+    for (const entity of scene.entities) {
+      const painter = getFlatPainter(entity.kind);
+      if (!painter) continue;
+      const view = this.toView(entity.pos.x, entity.pos.y);
+      const p = this.viewToScreen(view.x + 0.5, view.y + 0.5);
+      if (p.x < -t * 3 || p.y < -t * 3 || p.x > this.cssW + t * 3 || p.y > this.cssH + t * 3) continue;
+      ctx.save();
+      ctx.translate(p.x, p.y);
+      painter(ctx, entity, {
+        ...paint,
+        // Facings rotate with the view so "ahead" stays ahead on screen.
+        facing: ((((entity.facing ?? 0) - this.rotation) % 4 + 4) % 4) as 0 | 1 | 2 | 3,
+      });
+      ctx.restore();
+    }
+  }
+
+  /** Zoom so the whole world fits the viewport, with a little margin. */
+  fitToWorld(): void {
+    const span = this.sim.world.size * FLAT_TILE;
+    const fit = (Math.min(this.cssW, this.cssH) * 0.94) / span;
+    this.camera.zoom = Math.max(this.camera.minZoom, Math.min(this.camera.maxZoom, fit));
+  }
+
+  private drawGrid(origin: { x: number; y: number }, t: number): void {
+    const ctx = this.ctx;
+    const size = this.sim.world.size;
+    const step = t < 12 ? 8 : 4;
+    ctx.strokeStyle = 'rgba(126,224,226,0.10)';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    for (let i = 0; i <= size; i += step) {
+      const x = origin.x + i * t;
+      const y = origin.y + i * t;
+      if (x >= -1 && x <= this.cssW + 1) {
+        ctx.moveTo(x, Math.max(0, origin.y));
+        ctx.lineTo(x, Math.min(this.cssH, origin.y + size * t));
+      }
+      if (y >= -1 && y <= this.cssH + 1) {
+        ctx.moveTo(Math.max(0, origin.x), y);
+        ctx.lineTo(Math.min(this.cssW, origin.x + size * t), y);
+      }
+    }
+    ctx.stroke();
+  }
+
+  /**
+   * Rasterise the heightfield once per change: material colour, lit by a
+   * north-west hillshade so relief reads without any 3D, plus contour lines
+   * at fixed height intervals.
+   */
+  private ensureTerrain(): void {
+    const world = this.sim.world;
+    if (this.terrain && this.terrainVersion === world.version && this.terrainRotation === this.rotation) return;
+
+    const size = world.size;
+    const buffer = new Uint8ClampedArray(size * size * 4);
+    const tint = this.sim.body.palette.tint ?? [1, 1, 1];
+    const maxH = Math.max(1, world.maxHeight);
+
+    for (let v = 0; v < size; v++) {
+      for (let u = 0; u < size; u++) {
+        const w = this.toWorld(u, v);
+        const h = world.height(w.x, w.y);
+        const i = (v * size + u) * 4;
+        if (h < 0) {
+          buffer[i] = 8;
+          buffer[i + 1] = 10;
+          buffer[i + 2] = 20;
+          buffer[i + 3] = 255;
+          continue;
+        }
+        const material = world.surfaceMaterial(w.x, w.y);
+        const [r, g, b] = hexRgb(MATERIALS[material].colors[0]);
+
+        // Hillshade from the height gradient (light from the north-west).
+        const wl = this.toWorld(u - 1, v);
+        const wu = this.toWorld(u, v - 1);
+        const hl = world.height(wl.x, wl.y);
+        const hu = world.height(wu.x, wu.y);
+        const dx = hl < 0 ? 0 : h - hl;
+        const dy = hu < 0 ? 0 : h - hu;
+        let light = 0.72 + (h / maxH) * 0.4 + (dx + dy) * 0.09;
+        if (this.contourStep > 0 && h % this.contourStep === 0 && (dx > 0 || dy > 0)) light *= 0.86;
+        light = Math.max(0.25, Math.min(1.45, light));
+
+        buffer[i] = r * tint[0] * light;
+        buffer[i + 1] = g * tint[1] * light;
+        buffer[i + 2] = b * tint[2] * light;
+        buffer[i + 3] = 255;
+      }
+    }
+
+    const image = new ImageData(buffer, size, size);
+    const target = this.makeCanvas(size, size);
+    (target.getContext('2d') as CanvasRenderingContext2D).putImageData(image, 0, 0);
+    this.terrain = target;
+    this.terrainVersion = world.version;
+    this.terrainRotation = this.rotation;
+  }
+
+  private makeCanvas(w: number, h: number): HTMLCanvasElement | OffscreenCanvas {
+    if (typeof document !== 'undefined') {
+      const c = document.createElement('canvas');
+      c.width = w;
+      c.height = h;
+      return c;
+    }
+    return new OffscreenCanvas(w, h);
+  }
+
+  // ── Shared view services ──────────────────────────────────────────────
+
+  renderMinimap(target: HTMLCanvasElement): void {
+    const world = this.sim.world;
+    const ctx = target.getContext('2d');
+    if (!ctx) return;
+    this.ensureTerrain();
+    ctx.fillStyle = '#0b1424';
+    ctx.fillRect(0, 0, target.width, target.height);
+    if (this.terrain) {
+      ctx.imageSmoothingEnabled = false;
+      ctx.drawImage(this.terrain as CanvasImageSource, 0, 0, target.width, target.height);
+    }
+    const scale = Math.min(target.width, target.height) / world.size;
+    const dot = (x: number, y: number, colour: string) => {
+      const v = this.toView(x, y);
+      ctx.fillStyle = colour;
+      ctx.fillRect(v.x * scale - 1, v.y * scale - 1, scale + 2, scale + 2);
+    };
+    for (const a of this.sim.anomalies) {
+      if (a.scanned) dot(a.pos.x, a.pos.y, a.documented ? '#7bd88f' : '#ffd166');
+    }
+    for (const s of this.sim.structures) dot(s.pos.x, s.pos.y, '#7ab8ff');
+    dot(this.sim.rover.pos.x, this.sim.rover.pos.y, '#ffffff');
+  }
+
+  capturePhoto(): string | null {
+    if (typeof document === 'undefined') return null;
+    const w = 480;
+    const h = 320;
+    const tmp = document.createElement('canvas');
+    tmp.width = w;
+    tmp.height = h;
+    const saved = {
+      canvas: this.canvas,
+      ctx: this.ctx,
+      dpr: this.dpr,
+      cssW: this.cssW,
+      cssH: this.cssH,
+      cx: this.camera.cx,
+      cy: this.camera.cy,
+      zoom: this.camera.zoom,
+      follow: this.camera.follow,
+    };
+    try {
+      this.canvas = tmp;
+      this.ctx = tmp.getContext('2d')!;
+      this.dpr = 1;
+      this.cssW = w;
+      this.cssH = h;
+      this.camera.follow = false;
+      this.camera.zoom = 2.2;
+      this.focusTile(this.sim.rover.pos);
+      this.draw();
+      const c = this.ctx;
+      c.fillStyle = 'rgba(255,255,255,0.75)';
+      c.font = '10px monospace';
+      c.fillText(
+        `${this.sim.body.name.toUpperCase()}  T+${this.sim.time.toFixed(0)}s  [${this.sim.rover.pos.x},${this.sim.rover.pos.y}]  MAP`,
+        8,
+        h - 8,
+      );
+      return tmp.toDataURL('image/jpeg', 0.85);
+    } finally {
+      this.canvas = saved.canvas;
+      this.ctx = saved.ctx;
+      this.dpr = saved.dpr;
+      this.cssW = saved.cssW;
+      this.cssH = saved.cssH;
+      this.camera.cx = saved.cx;
+      this.camera.cy = saved.cy;
+      this.camera.zoom = saved.zoom;
+      this.camera.follow = saved.follow;
+    }
+  }
+}
+
+function hexRgb(hex: string): [number, number, number] {
+  const n = parseInt(hex.slice(1), 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+
+function mix(a: string, b: string, t: number): string {
+  const [ar, ag, ab] = hexRgb(a);
+  const [br, bg, bb] = hexRgb(b);
+  return `rgb(${Math.round(ar + (br - ar) * t)},${Math.round(ag + (bg - ag) * t)},${Math.round(ab + (bb - ab) * t)})`;
+}
+
+function nowMs(): number {
+  return typeof performance !== 'undefined' ? performance.now() : Date.now();
+}
diff --git a/packages/engine/src/render/renderer.ts b/packages/engine/src/render/renderer.ts
index 63eeb8c..12ecd28 100644
--- a/packages/engine/src/render/renderer.ts
+++ b/packages/engine/src/render/renderer.ts
@@ -3,12 +3,14 @@ import type { Simulation } from '../sim/simulation.js';
 import { DIRS } from '../sim/simulation.js';
 import { POWER_RANGE } from '../sim/structures.js';
 import { Camera } from './camera.js';
-import { drawAnomaly, drawLaunch, drawRover, drawStructure } from './entities.js';
+import type { SceneView, ViewRotation } from './view.js';
+import { drawAnomaly, drawLaunch, drawStructure } from './entities.js';
+import { drawRover } from './rover.js';
 import { project, TILE_H, TILE_W, TILE_Z, shade } from './sprites.js';
 import { MATERIALS } from '../world/materials.js';
 import { skinBiome } from '../world/terrain.js';
 import { hash2, hash3 } from '../util/rng.js';
-import { fbm2 } from '../util/noise.js';
+import { fbm2 } from '../util/noise/index.js';
 
 interface Particle {
   x: number;
@@ -92,7 +94,7 @@ interface Chunk {
   dirty: boolean;
 }
 
-export type ViewRotation = 0 | 1 | 2 | 3;
+export type { ViewRotation } from './view.js';
 
 type Proj = (x: number, y: number, z: number) => { x: number; y: number };
 
@@ -105,8 +107,9 @@ type Proj = (x: number, y: number, z: number) => { x: number; y: number };
  * Terrain is composited from cached per-chunk canvases (rebuilt only when
  * voxels change). The camera rotates in 90° steps via a rotated view layer.
  */
-export class IsoRenderer {
-  readonly camera = new Camera();
+export class IsoRenderer implements SceneView {
+  readonly kind = 'iso' as const;
+  readonly camera: Camera;
   rotation: ViewRotation = 0;
   private canvas: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
@@ -135,19 +138,17 @@ export class IsoRenderer {
   private frameEma = 16;
   private lastQualityMs = 0;
 
-  constructor(canvas: HTMLCanvasElement, sim: Simulation) {
+  constructor(canvas: HTMLCanvasElement, sim: Simulation, camera: Camera = new Camera()) {
     this.canvas = canvas;
     this.sim = sim;
+    this.camera = camera;
     const ctx = canvas.getContext('2d');
     if (!ctx) throw new Error('takeon: could not acquire 2d context');
     this.ctx = ctx;
     this.chunksPerSide = Math.ceil(sim.world.size / CHUNK);
     this.initChunks();
     this.initStars();
-    sim.world.onColumnChange = (x, y) => {
-      const v = this.toView(x, y);
-      this.invalidateViewColumn(Math.round(v.x), Math.round(v.y));
-    };
+    this.activate();
     const r = sim.rover;
     const v = this.toView(r.pos.x, r.pos.y);
     this.camera.centerOnTile(v.x, v.y, sim.world.height(r.pos.x, r.pos.y));
@@ -1435,6 +1436,36 @@ export class IsoRenderer {
   }
 
   /** Render a photo of the area around the rover; returns a JPEG data URL. */
+  /** Claim world invalidation and rebuild caches; see `SceneView`. */
+  activate(): void {
+    this.sim.world.onColumnChange = (x, y) => {
+      const v = this.toView(x, y);
+      this.invalidateViewColumn(Math.round(v.x), Math.round(v.y));
+    };
+    for (const c of this.chunks) c.dirty = true;
+    this.camera.minZoom = 1.3;
+    this.camera.maxZoom = 5.5;
+    this.camera.zoom = Math.max(this.camera.minZoom, Math.min(this.camera.maxZoom, this.camera.zoom));
+  }
+
+  deactivate(): void {
+    if (this.sim.world.onColumnChange) this.sim.world.onColumnChange = null;
+  }
+
+  /** The world tile at the centre of the viewport. */
+  centreTile(): Vec2 {
+    const centre = this.pickTile(this.cssW / 2, this.cssH / 2);
+    if (centre) return centre;
+    const r = this.sim.rover;
+    return { x: r.pos.x, y: r.pos.y };
+  }
+
+  /** Point the camera at a tile in iso projection. */
+  focusTile(tile: Vec2): void {
+    const v = this.toView(tile.x, tile.y);
+    this.camera.centerOnTile(v.x, v.y, Math.max(0, this.sim.world.height(tile.x, tile.y)));
+  }
+
   capturePhoto(): string | null {
     if (typeof document === 'undefined') return null;
     const w = 480;
diff --git a/packages/engine/src/render/rover.ts b/packages/engine/src/render/rover.ts
new file mode 100644
index 0000000..eb6d458
--- /dev/null
+++ b/packages/engine/src/render/rover.ts
@@ -0,0 +1,739 @@
+import type { ResourceKey, RoverState } from '../types.js';
+import { shade } from './sprites.js';
+
+/**
+ * The rover, assembled from **parts** rather than drawn as one blob.
+ *
+ * Each part declares when it applies (`when`), where it sits in the painter
+ * order (`order`) and whether it rides the suspension (`sprung`). That makes
+ * the rover's look a function of its build and its live state — fit a scanner
+ * and the whip antenna appears; fill the hold and crates stack on the deck;
+ * take damage and scorch marks show — and it lets a host game add its own
+ * hardware with `registerRoverPart` instead of forking the painter.
+ */
+
+export interface RoverPaintContext {
+  rover: RoverState;
+  /** Hull colour, guaranteed #rrggbb. */
+  body: string;
+  /** Screen-space facing after view rotation. */
+  facing: 0 | 1 | 2 | 3;
+  /** -1 when the sprite is mirrored (facing left). */
+  flip: 1 | -1;
+  /** Smooth render clock in seconds. */
+  time: number;
+  /** 0 = night, 1 = noon. */
+  daylight: number;
+  moving: boolean;
+  mining: boolean;
+  /** Wheel rotation angle. */
+  spin: number;
+  /** In-field mobility kit level, 0..3. */
+  mobility: number;
+  tracks: boolean;
+  /** Battery / durability / hold as 0..1 fractions. */
+  charge: number;
+  integrity: number;
+  load: number;
+  /** Heaviest resource in the hold, for crate colour. */
+  cargoTop: ResourceKey | null;
+  has: { solar: boolean; rtg: boolean; camera: boolean; scanner: boolean; tool: boolean };
+}
+
+export interface RoverPart {
+  id: string;
+  /** Painter order; lower draws first. Defaults to 50. */
+  order?: number;
+  /** Sprung parts ride the suspension bob/tilt; the wheels and shadow do not. */
+  sprung?: boolean;
+  when?(p: RoverPaintContext): boolean;
+  draw(ctx: CanvasRenderingContext2D, p: RoverPaintContext): void;
+}
+
+/** Rover render scale relative to a tile — oversized for a chunky,
+ * readable diorama look. */
+export const ROVER_SCALE = 1.7;
+
+const parts: RoverPart[] = [];
+
+/** Add or replace a rover part (same id replaces). */
+export function registerRoverPart(part: RoverPart): void {
+  const i = parts.findIndex((p) => p.id === part.id);
+  if (i >= 0) parts[i] = part;
+  else parts.push(part);
+}
+
+export function unregisterRoverPart(id: string): boolean {
+  const i = parts.findIndex((p) => p.id === id);
+  if (i < 0) return false;
+  parts.splice(i, 1);
+  return true;
+}
+
+/** Current parts in painter order. */
+export function listRoverParts(): RoverPart[] {
+  return [...parts].sort((a, b) => (a.order ?? 50) - (b.order ?? 50));
+}
+
+/** Compose the paint context from live rover state. */
+export function roverPaintContext(
+  rover: RoverState,
+  daylight: number,
+  screenFacing: 0 | 1 | 2 | 3 | undefined,
+  time: number,
+): RoverPaintContext {
+  const { spec, stats } = rover;
+  const facing = screenFacing ?? rover.facing;
+  const tracks = stats.grip >= 0.8;
+  const moving = rover.moveFrom != null;
+  let cargoTop: ResourceKey | null = null;
+  let most = 0;
+  for (const [res, qty] of Object.entries(rover.cargo) as [ResourceKey, number][]) {
+    if ((qty ?? 0) > most) {
+      most = qty ?? 0;
+      cargoTop = res;
+    }
+  }
+  return {
+    rover,
+    body: cssHex(spec.color || '#c8d6e5'),
+    facing,
+    flip: facing === 1 || facing === 2 ? -1 : 1,
+    time,
+    daylight,
+    moving,
+    mining: !!rover.mining,
+    spin: time * (tracks ? 5 : 7),
+    mobility: rover.upgrades?.mobility ?? 0,
+    tracks,
+    charge: stats.batteryCapacity > 0 ? rover.battery / stats.batteryCapacity : 0,
+    integrity: stats.durabilityMax > 0 ? rover.durability / stats.durabilityMax : 1,
+    load: stats.cargoCapacity > 0 ? rover.cargoUsed / stats.cargoCapacity : 0,
+    cargoTop,
+    has: {
+      solar: stats.solarRate > 0,
+      rtg: stats.rtgRate > 0,
+      camera: stats.photoQuality > 0,
+      scanner: stats.scanRadius > 0,
+      tool: stats.miningPower > 0,
+    },
+  };
+}
+
+/**
+ * Draw the rover at screen position (x, y) with camera zoom `s`.
+ * Vector drawing means it stays crisp at any zoom with no asset pipeline.
+ */
+export function drawRover(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  s: number,
+  rover: RoverState,
+  daylight: number,
+  screenFacing?: 0 | 1 | 2 | 3,
+  time = 0,
+): void {
+  const p = roverPaintContext(rover, daylight, screenFacing, time);
+  const ordered = listRoverParts();
+
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.scale(s * ROVER_SCALE * p.flip, s * ROVER_SCALE);
+  ctx.lineJoin = 'round';
+
+  // Unsprung parts (shadow, drivetrain) sit on the ground.
+  for (const part of ordered) {
+    if (part.sprung) continue;
+    if (part.when && !part.when(p)) continue;
+    ctx.save();
+    part.draw(ctx, p);
+    ctx.restore();
+  }
+
+  // Everything above the wheels bobs and leans with the chassis.
+  const bob = p.moving ? Math.sin(p.time * 16) * 0.55 : Math.sin(p.time * 1.8) * 0.14;
+  const tilt = p.moving ? Math.sin(p.time * 16) * 0.02 : 0;
+  ctx.translate(0, bob);
+  ctx.transform(1, 0, tilt, 1, 0, 0);
+
+  for (const part of ordered) {
+    if (!part.sprung) continue;
+    if (part.when && !part.when(p)) continue;
+    ctx.save();
+    part.draw(ctx, p);
+    ctx.restore();
+  }
+
+  ctx.restore();
+}
+
+// ── Built-in parts ──────────────────────────────────────────────────────
+
+registerRoverPart({
+  id: 'shadow',
+  order: 0,
+  draw(ctx) {
+    const sh = ctx.createRadialGradient(0, 3.5, 2, 0, 3.5, 13);
+    sh.addColorStop(0, 'rgba(10,6,20,0.42)');
+    sh.addColorStop(1, 'rgba(10,6,20,0)');
+    ctx.fillStyle = sh;
+    ctx.beginPath();
+    ctx.ellipse(0, 3.5, 13, 5.2, 0, 0, Math.PI * 2);
+    ctx.fill();
+  },
+});
+
+registerRoverPart({
+  id: 'tracks',
+  order: 10,
+  when: (p) => p.tracks,
+  draw(ctx, p) {
+    // Tread loop with scrolling cleats + spinning road wheels. A mobility
+    // kit fits a taller, grippier track.
+    const th = 8 + p.mobility * 1.3;
+    const rw = 2.1 + p.mobility * 0.35;
+    ctx.fillStyle = '#23222b';
+    roundRect(ctx, -12, -3.5, 24, th, 3.5);
+    ctx.fill();
+    ctx.fillStyle = '#3a3844';
+    const scroll = (((p.spin * 2) % 2.5) + 2.5) % 2.5;
+    for (let i = -10 + scroll; i <= 10; i += 2.5) ctx.fillRect(i, -3.5, 1.1, th);
+    for (const wx of [-8, -2.5, 3, 8.5]) {
+      ctx.save();
+      ctx.translate(wx, 0.5 + (th - 8) * 0.5);
+      ctx.rotate(p.spin);
+      ctx.fillStyle = '#4d4b59';
+      ctx.beginPath();
+      ctx.arc(0, 0, rw, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.strokeStyle = '#6c6a78';
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(-rw + 0.5, 0);
+      ctx.lineTo(rw - 0.5, 0);
+      ctx.moveTo(0, -rw + 0.5);
+      ctx.lineTo(0, rw - 0.5);
+      ctx.stroke();
+      ctx.restore();
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'wheels',
+  order: 10,
+  when: (p) => !p.tracks,
+  draw(ctx, p) {
+    // Rocker-bogie: suspension arms first, then spinning spoked wheels.
+    ctx.strokeStyle = '#8a8f98';
+    ctx.lineWidth = 1.1;
+    ctx.beginPath();
+    ctx.moveTo(-8, 1);
+    ctx.lineTo(-3, -5);
+    ctx.lineTo(1, -5);
+    ctx.moveTo(1, -5);
+    ctx.lineTo(4, -1);
+    ctx.lineTo(8, 1);
+    ctx.moveTo(0, 1);
+    ctx.lineTo(-3, -5);
+    ctx.stroke();
+    // A mobility kit swaps in larger, knobblier wheels.
+    const wr = 3.6 + p.mobility * 0.7;
+    for (const wx of [-8, 0, 8]) {
+      const wg = ctx.createRadialGradient(wx - 1, 0.5, 0.5, wx, 1.5, wr + 0.4);
+      wg.addColorStop(0, '#4a4954');
+      wg.addColorStop(1, '#1d1c24');
+      ctx.fillStyle = wg;
+      ctx.beginPath();
+      ctx.arc(wx, 1.5, wr, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.save();
+      ctx.translate(wx, 1.5);
+      ctx.rotate(p.spin);
+      ctx.strokeStyle = '#15141b';
+      ctx.lineWidth = 0.7 + p.mobility * 0.12;
+      for (let a = 0; a < Math.PI * 2; a += Math.PI / 5) {
+        ctx.beginPath();
+        ctx.moveTo(Math.cos(a) * (wr - 0.7), Math.sin(a) * (wr - 0.7));
+        ctx.lineTo(Math.cos(a) * wr, Math.sin(a) * wr);
+        ctx.stroke();
+      }
+      ctx.strokeStyle = '#6c6a78';
+      ctx.lineWidth = 0.6;
+      for (let a = 0; a < Math.PI * 2; a += Math.PI / 3) {
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(Math.cos(a) * (wr - 1), Math.sin(a) * (wr - 1));
+        ctx.stroke();
+      }
+      ctx.restore();
+      ctx.fillStyle = '#9aa0ab';
+      ctx.beginPath();
+      ctx.arc(wx, 1.5, 1, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'wheel-dust',
+  order: 12,
+  when: (p) => p.moving,
+  draw(ctx, p) {
+    // Puffs kicked up at the contact patch while driving.
+    for (let i = 0; i < 3; i++) {
+      const phase = (p.time * 6 + i * 0.7) % 1;
+      const r = 0.8 + phase * 2.6;
+      ctx.fillStyle = `rgba(214,186,150,${0.22 * (1 - phase)})`;
+      ctx.beginPath();
+      ctx.arc(-9 - phase * 5, 3.2 - phase * 1.6, r, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'chassis',
+  order: 20,
+  sprung: true,
+  draw(ctx, p) {
+    const bg = ctx.createLinearGradient(0, -11, 0, -2);
+    bg.addColorStop(0, shade(p.body, 1.22));
+    bg.addColorStop(0.55, p.body);
+    bg.addColorStop(1, shade(p.body, 0.66));
+    ctx.fillStyle = bg;
+    roundRect(ctx, -11, -11, 22, 9.5, 1.8);
+    ctx.fill();
+    // Panel seams.
+    ctx.strokeStyle = 'rgba(20,16,40,0.28)';
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    ctx.moveTo(-4, -11);
+    ctx.lineTo(-4, -1.5);
+    ctx.moveTo(3.5, -11);
+    ctx.lineTo(3.5, -1.5);
+    ctx.moveTo(-11, -5);
+    ctx.lineTo(11, -5);
+    ctx.stroke();
+    // White top deck.
+    ctx.fillStyle = shade(p.body, 1.35);
+    roundRect(ctx, -10, -12.2, 20, 2.4, 1);
+    ctx.fill();
+    // Mobility-kit pips: one amber stud per upgrade level on the deck.
+    for (let i = 0; i < p.mobility; i++) {
+      ctx.fillStyle = '#ffb347';
+      ctx.beginPath();
+      ctx.arc(-8.5 + i * 2.2, -11, 0.7, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'insulation',
+  order: 25,
+  sprung: true,
+  draw(ctx) {
+    // Gold multilayer-insulation block at the rear.
+    const foil = ctx.createLinearGradient(-11, -9, -6, -3);
+    foil.addColorStop(0, '#e8b64c');
+    foil.addColorStop(0.5, '#c28d2e');
+    foil.addColorStop(1, '#a3721f');
+    ctx.fillStyle = foil;
+    roundRect(ctx, -10.6, -9.5, 4.6, 6.5, 0.8);
+    ctx.fill();
+    ctx.strokeStyle = 'rgba(60,40,10,0.35)';
+    ctx.lineWidth = 0.4;
+    for (let i = 1; i < 4; i++) {
+      ctx.beginPath();
+      ctx.moveTo(-10.6, -9.5 + i * 1.6);
+      ctx.lineTo(-6, -9.5 + i * 1.6);
+      ctx.stroke();
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'charge-strip',
+  order: 27,
+  sprung: true,
+  draw(ctx, p) {
+    // Five-LED charge strip on the flank: readable state at a glance, and it
+    // blinks red once the battery is nearly flat.
+    const lit = Math.round(p.charge * 5);
+    const alarm = p.charge < 0.2 && Math.sin(p.time * 8) > 0;
+    for (let i = 0; i < 5; i++) {
+      const on = i < lit;
+      ctx.fillStyle = on ? (p.charge < 0.25 ? '#ff6b6b' : '#6fdc8c') : 'rgba(20,24,34,0.6)';
+      if (!on && alarm && i === 0) ctx.fillStyle = '#ff6b6b';
+      ctx.fillRect(-2.6 + i * 1.4, -4.4, 1, 1.7);
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'cargo',
+  order: 30,
+  sprung: true,
+  when: (p) => p.load > 0.02,
+  draw(ctx, p) {
+    // Crates stack on the rear deck as the hold fills.
+    const crates = Math.min(3, Math.ceil(p.load * 3));
+    const colour = CARGO_COLOURS[p.cargoTop ?? 'regolith'] ?? '#b08968';
+    for (let i = 0; i < crates; i++) {
+      const w = 4.2 - i * 0.5;
+      const h = 2.4;
+      const cx = -6.5 + (i % 2) * 4.4;
+      const cy = -12.4 - Math.floor(i / 2) * 2.6;
+      ctx.fillStyle = shade(colour, 1.08);
+      roundRect(ctx, cx, cy - h, w, h, 0.5);
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(15,12,28,0.45)';
+      ctx.lineWidth = 0.35;
+      ctx.stroke();
+      ctx.strokeStyle = 'rgba(255,255,255,0.25)';
+      ctx.beginPath();
+      ctx.moveTo(cx + 0.4, cy - h + 0.6);
+      ctx.lineTo(cx + w - 0.4, cy - h + 0.6);
+      ctx.stroke();
+    }
+  },
+});
+
+const CARGO_COLOURS: Partial<Record<ResourceKey, string>> = {
+  regolith: '#d99a55',
+  stone: '#b08968',
+  ice: '#a8e8f0',
+  iron: '#c96f4a',
+  silica: '#f2dfa7',
+  copper: '#4fbf9f',
+  titanium: '#b9c7d6',
+  crystal: '#c77dff',
+  sulfur: '#f6d743',
+  'iron-plate': '#d98f6a',
+  glass: '#cfeaf2',
+  water: '#7fc7e8',
+  alloy: '#dbe4ef',
+};
+
+registerRoverPart({
+  id: 'solar',
+  order: 40,
+  sprung: true,
+  when: (p) => p.has.solar,
+  draw(ctx, p) {
+    for (const [ox, w] of [
+      [-22, 10],
+      [12, 10],
+    ] as [number, number][]) {
+      const pg = ctx.createLinearGradient(ox, -10, ox + w, -4);
+      pg.addColorStop(0, '#1d3a6f');
+      pg.addColorStop(0.5, '#2c569c');
+      pg.addColorStop(1, '#1a3260');
+      ctx.fillStyle = pg;
+      roundRect(ctx, ox, -10, w, 6, 0.8);
+      ctx.fill();
+      ctx.strokeStyle = 'rgba(150,190,255,0.35)';
+      ctx.lineWidth = 0.4;
+      for (let i = 1; i < 5; i++) {
+        ctx.beginPath();
+        ctx.moveTo(ox + (i * w) / 5, -10);
+        ctx.lineTo(ox + (i * w) / 5, -4);
+        ctx.stroke();
+      }
+      ctx.beginPath();
+      ctx.moveTo(ox, -7);
+      ctx.lineTo(ox + w, -7);
+      ctx.stroke();
+      // Static sheen, plus a glint that tracks across the panel in daylight.
+      ctx.fillStyle = 'rgba(255,255,255,0.10)';
+      ctx.beginPath();
+      ctx.moveTo(ox + 1, -10);
+      ctx.lineTo(ox + 4, -10);
+      ctx.lineTo(ox + 2, -4);
+      ctx.lineTo(ox, -4);
+      ctx.closePath();
+      ctx.fill();
+      if (p.daylight > 0.35) {
+        const t = (p.time * 0.25) % 1;
+        ctx.fillStyle = `rgba(255,255,255,${0.16 * p.daylight})`;
+        ctx.beginPath();
+        ctx.moveTo(ox + t * w, -10);
+        ctx.lineTo(ox + t * w + 1.6, -10);
+        ctx.lineTo(ox + t * w - 0.4, -4);
+        ctx.lineTo(ox + t * w - 2, -4);
+        ctx.closePath();
+        ctx.fill();
+      }
+    }
+    // Wing struts.
+    ctx.strokeStyle = '#8a8f98';
+    ctx.lineWidth = 0.9;
+    ctx.beginPath();
+    ctx.moveTo(-11, -7);
+    ctx.lineTo(-12.5, -7);
+    ctx.moveTo(11, -7);
+    ctx.lineTo(12.5, -7);
+    ctx.stroke();
+  },
+});
+
+registerRoverPart({
+  id: 'rtg',
+  order: 40,
+  sprung: true,
+  when: (p) => p.has.rtg,
+  draw(ctx, p) {
+    // Waste heat: the fin stack glows at night, when the RTG is the only
+    // thing keeping the battery alive.
+    if (p.daylight < 0.5) {
+      const glow = ctx.createRadialGradient(-14, -5, 0.5, -14, -5, 7);
+      glow.addColorStop(0, `rgba(255,140,70,${0.28 * (1 - p.daylight)})`);
+      glow.addColorStop(1, 'rgba(255,140,70,0)');
+      ctx.fillStyle = glow;
+      ctx.beginPath();
+      ctx.arc(-14, -5, 7, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    const rg = ctx.createLinearGradient(-16, -9, -12, -2);
+    rg.addColorStop(0, '#767c86');
+    rg.addColorStop(1, '#3f434c');
+    ctx.fillStyle = rg;
+    roundRect(ctx, -16, -8.5, 4, 7, 1.6);
+    ctx.fill();
+    ctx.strokeStyle = '#9aa0ab';
+    ctx.lineWidth = 0.6;
+    for (let i = 0; i < 4; i++) {
+      ctx.beginPath();
+      ctx.moveTo(-17, -7.8 + i * 1.8);
+      ctx.lineTo(-11.2, -7.8 + i * 1.8);
+      ctx.stroke();
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'camera-mast',
+  order: 50,
+  sprung: true,
+  when: (p) => p.has.camera,
+  draw(ctx) {
+    ctx.strokeStyle = '#9aa3ad';
+    ctx.lineWidth = 1.1;
+    ctx.beginPath();
+    ctx.moveTo(4.5, -11);
+    ctx.lineTo(4.5, -19.5);
+    ctx.stroke();
+    const hg = ctx.createLinearGradient(1.5, -23, 8, -19);
+    hg.addColorStop(0, '#f2f4f8');
+    hg.addColorStop(1, '#b9c0cb');
+    ctx.fillStyle = hg;
+    roundRect(ctx, 1.5, -23, 6.5, 3.8, 1);
+    ctx.fill();
+    // Stereo eyes + laser dot.
+    ctx.fillStyle = '#1a1e28';
+    ctx.beginPath();
+    ctx.arc(6.7, -21.2, 0.95, 0, Math.PI * 2);
+    ctx.arc(4.3, -21.2, 0.75, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = '#8fd0ff';
+    ctx.beginPath();
+    ctx.arc(6.7, -21.2, 0.4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = '#e05555';
+    ctx.beginPath();
+    ctx.arc(2.6, -21.9, 0.35, 0, Math.PI * 2);
+    ctx.fill();
+  },
+});
+
+registerRoverPart({
+  id: 'dish',
+  order: 50,
+  sprung: true,
+  draw(ctx, p) {
+    // High-gain dish (every rover phones home). It sweeps slowly, so a parked
+    // rover still has something alive about it.
+    ctx.save();
+    ctx.translate(-2.5, -13.6);
+    ctx.rotate(-0.5 + Math.sin(p.time * 0.4) * 0.22);
+    const dg = ctx.createLinearGradient(-2.4, -1, 2.4, 1);
+    dg.addColorStop(0, '#e8ecf2');
+    dg.addColorStop(1, '#aab2bf');
+    ctx.fillStyle = dg;
+    ctx.beginPath();
+    ctx.ellipse(0, 0, 2.5, 1.5, 0, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.strokeStyle = '#7c8490';
+    ctx.lineWidth = 0.5;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, 2.4);
+    ctx.stroke();
+    ctx.restore();
+  },
+});
+
+registerRoverPart({
+  id: 'scanner',
+  order: 50,
+  sprung: true,
+  when: (p) => p.has.scanner,
+  draw(ctx, p) {
+    // Whip antenna with a tip light that pulses as the sounder listens.
+    ctx.strokeStyle = '#9aa3ad';
+    ctx.lineWidth = 0.6;
+    ctx.beginPath();
+    ctx.moveTo(-7.5, -11);
+    ctx.lineTo(-8.5, -18.5);
+    ctx.stroke();
+    const pulse = 0.55 + 0.45 * Math.abs(Math.sin(p.time * 2.2));
+    ctx.fillStyle = `rgba(255,209,102,${pulse})`;
+    ctx.beginPath();
+    ctx.arc(-8.5, -19, 0.7 + pulse * 0.25, 0, Math.PI * 2);
+    ctx.fill();
+  },
+});
+
+registerRoverPart({
+  id: 'tool-arm',
+  order: 60,
+  sprung: true,
+  when: (p) => p.has.tool,
+  draw(ctx, p) {
+    const swing = p.mining ? Math.sin(p.time * 18) * 1.2 : 0;
+    ctx.strokeStyle = '#8a9099';
+    ctx.lineWidth = 1.3;
+    ctx.beginPath();
+    ctx.moveTo(10, -6.5);
+    ctx.lineTo(14.5, -4);
+    ctx.lineTo(17, 0.5 + swing);
+    ctx.stroke();
+    // Elbow joint.
+    ctx.fillStyle = '#5f656e';
+    ctx.beginPath();
+    ctx.arc(14.5, -4, 1.1, 0, Math.PI * 2);
+    ctx.fill();
+    // Drill head.
+    ctx.fillStyle = p.mining ? '#ffb347' : '#767d87';
+    ctx.beginPath();
+    ctx.moveTo(15.6, -0.4 + swing);
+    ctx.lineTo(19.5, 2.4 + swing);
+    ctx.lineTo(16, 3.4 + swing);
+    ctx.closePath();
+    ctx.fill();
+    // Chips fly while the drill is biting.
+    if (p.mining) {
+      for (let i = 0; i < 4; i++) {
+        const t = (p.time * 5 + i * 0.25) % 1;
+        ctx.fillStyle = `rgba(255,214,150,${0.7 * (1 - t)})`;
+        ctx.beginPath();
+        ctx.arc(18 + t * 4, 2.4 + swing - t * 3.5 + i, 0.45, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'damage',
+  order: 70,
+  sprung: true,
+  when: (p) => p.integrity < 0.7,
+  draw(ctx, p) {
+    // Scorch marks appear as the hull wears; below a third it sparks.
+    const wear = 1 - p.integrity;
+    ctx.fillStyle = `rgba(30,22,26,${0.28 + wear * 0.4})`;
+    ctx.beginPath();
+    ctx.ellipse(-5.5, -8, 2.6 * wear + 0.8, 1.5 * wear + 0.5, 0.3, 0, Math.PI * 2);
+    ctx.ellipse(6, -6.4, 2.1 * wear + 0.6, 1.2 * wear + 0.4, -0.4, 0, Math.PI * 2);
+    ctx.fill();
+    if (p.integrity < 0.35) {
+      ctx.strokeStyle = 'rgba(60,48,52,0.75)';
+      ctx.lineWidth = 0.5;
+      ctx.beginPath();
+      ctx.moveTo(-2, -10.5);
+      ctx.lineTo(0.5, -7.5);
+      ctx.lineTo(-1, -5.5);
+      ctx.stroke();
+      const spark = (p.time * 3) % 1;
+      if (spark < 0.22) {
+        ctx.fillStyle = `rgba(255,220,140,${1 - spark / 0.22})`;
+        ctx.beginPath();
+        ctx.arc(0.5 + spark * 3, -7.5 + spark * 4, 0.5, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  },
+});
+
+registerRoverPart({
+  id: 'beacon',
+  order: 78,
+  sprung: true,
+  draw(ctx, p) {
+    // Status strobe on the deck: steady amber, urgent red when the hull or
+    // battery is in trouble.
+    const urgent = p.integrity < 0.35 || p.charge < 0.15;
+    const period = urgent ? 0.45 : 1.4;
+    const on = (p.time % period) / period < 0.28;
+    if (!on) return;
+    const colour = urgent ? '255,90,90' : '255,190,90';
+    const glow = ctx.createRadialGradient(-0.5, -13, 0.2, -0.5, -13, 3.4);
+    glow.addColorStop(0, `rgba(${colour},0.85)`);
+    glow.addColorStop(1, `rgba(${colour},0)`);
+    ctx.fillStyle = glow;
+    ctx.beginPath();
+    ctx.arc(-0.5, -13, 3.4, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = `rgb(${colour})`;
+    ctx.beginPath();
+    ctx.arc(-0.5, -13, 0.75, 0, Math.PI * 2);
+    ctx.fill();
+  },
+});
+
+registerRoverPart({
+  id: 'headlights',
+  order: 80,
+  sprung: true,
+  when: (p) => p.daylight < 0.35,
+  draw(ctx, p) {
+    const strength = 1 - p.daylight / 0.35;
+    ctx.fillStyle = `rgba(255,244,200,${0.14 * strength})`;
+    ctx.beginPath();
+    ctx.moveTo(11, -8);
+    ctx.lineTo(30, -1);
+    ctx.lineTo(30, 9);
+    ctx.lineTo(11, -3);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = `rgba(255,247,214,${0.95 * strength})`;
+    ctx.beginPath();
+    ctx.arc(10.8, -7, 0.9, 0, Math.PI * 2);
+    ctx.arc(10.8, -4, 0.9, 0, Math.PI * 2);
+    ctx.fill();
+  },
+});
+
+export function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): void {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + w, y, x + w, y + h, r);
+  ctx.arcTo(x + w, y + h, x, y + h, r);
+  ctx.arcTo(x, y + h, x, y, r);
+  ctx.arcTo(x, y, x + w, y, r);
+  ctx.closePath();
+}
+
+function cssHex(c: string): string {
+  return c.startsWith('#') && c.length === 7 ? c : '#c8d6e5';
+}
diff --git a/packages/engine/src/render/view.ts b/packages/engine/src/render/view.ts
new file mode 100644
index 0000000..2a34a4b
--- /dev/null
+++ b/packages/engine/src/render/view.ts
@@ -0,0 +1,38 @@
+import type { Vec2 } from '../types.js';
+import type { ViewKind } from '../scene/types.js';
+import type { Camera } from './camera.js';
+
+export type ViewRotation = 0 | 1 | 2 | 3;
+
+/**
+ * What every renderer must provide so the game can swap between them.
+ *
+ * A view owns *presentation only*: it draws the simulation, converts pointer
+ * coordinates back to tiles, and can produce a photo and a minimap. Two ship
+ * with the engine — the isometric voxel diorama (`iso`) and the top-down map
+ * (`flat`) — and a host can add its own by implementing this interface.
+ *
+ * Views share one `Camera` instance, so switching keeps external references
+ * (input handling, host UI) valid.
+ */
+export interface SceneView {
+  readonly kind: ViewKind;
+  readonly camera: Camera;
+  rotation: ViewRotation;
+  resize(cssW: number, cssH: number, dpr?: number): void;
+  draw(): void;
+  /** Canvas pixel → tile, or null when the pointer is off the world. */
+  pickTile(canvasX: number, canvasY: number): Vec2 | null;
+  setRotation(rotation: ViewRotation): void;
+  rotateClockwise(): void;
+  renderMinimap(target: HTMLCanvasElement): void;
+  capturePhoto(): string | null;
+  /** The world tile currently at the centre of the viewport. */
+  centreTile(): Vec2;
+  /** Point the camera at a tile, in this view's own projection. */
+  focusTile(tile: Vec2): void;
+  /** Becoming the active view: claim world invalidation, rebuild caches. */
+  activate(): void;
+  /** No longer the active view: release hooks so it can idle cheaply. */
+  deactivate(): void;
+}
diff --git a/packages/engine/src/scene/build.ts b/packages/engine/src/scene/build.ts
new file mode 100644
index 0000000..df6c956
--- /dev/null
+++ b/packages/engine/src/scene/build.ts
@@ -0,0 +1,105 @@
+import type { Simulation } from '../sim/simulation.js';
+import type { Scene, SceneEntity, ViewKind } from './types.js';
+
+export interface BuildSceneOptions {
+  view?: ViewKind;
+  /** Include anomalies the scanner has not revealed yet (editor/debug). */
+  includeHidden?: boolean;
+}
+
+/**
+ * Flatten a running simulation into a `Scene`.
+ *
+ * Pure and DOM-free: no canvas, no camera, no timing. That makes it testable,
+ * usable in a worker, and the natural hand-off point for a host game that
+ * wants to draw TakeOn's world with its own renderer.
+ */
+export function buildScene(sim: Simulation, opts: BuildSceneOptions = {}): Scene {
+  const { view = 'iso', includeHidden = false } = opts;
+  const entities: SceneEntity[] = [];
+
+  for (const anomaly of sim.anomalies) {
+    if (!anomaly.scanned && !includeHidden) continue;
+    entities.push({
+      id: anomaly.id,
+      kind: 'anomaly',
+      pos: { ...anomaly.pos },
+      z: sim.world.height(anomaly.pos.x, anomaly.pos.y),
+      variant: anomaly.type,
+      label: anomaly.name,
+      layer: 10,
+      data: { scanned: anomaly.scanned, documented: anomaly.documented },
+      ref: anomaly,
+    });
+  }
+
+  for (const structure of sim.structures) {
+    entities.push({
+      id: structure.id,
+      kind: 'structure',
+      pos: { ...structure.pos },
+      z: sim.world.height(structure.pos.x, structure.pos.y),
+      facing: structure.facing ?? 0,
+      variant: structure.type,
+      layer: 20,
+      data: {
+        powered: sim.powered.has(structure.id),
+        progress: structure.progress ?? 1,
+        buffered: (Object.values(structure.buffer) as (number | undefined)[]).reduce(
+          (sum: number, qty) => sum + (qty ?? 0),
+          0,
+        ),
+      },
+      ref: structure,
+    });
+  }
+
+  const rover = sim.rover;
+  entities.push({
+    id: 'rover',
+    kind: 'rover',
+    // renderPos is the interpolated position, so the scene matches the frame.
+    pos: { ...rover.renderPos },
+    z: sim.world.height(rover.pos.x, rover.pos.y),
+    facing: rover.facing,
+    variant: rover.spec.id || 'rover',
+    label: rover.spec.name,
+    layer: 30,
+    data: {
+      battery: rover.battery,
+      durability: rover.durability,
+      cargoUsed: rover.cargoUsed,
+      mining: !!rover.mining,
+      moving: rover.moveFrom != null,
+    },
+    ref: rover,
+  });
+
+  if (sim.weather?.pos) {
+    entities.push({
+      id: 'weather',
+      kind: 'marker',
+      pos: { ...sim.weather.pos },
+      z: sim.world.height(sim.weather.pos.x, sim.weather.pos.y),
+      variant: sim.weather.type,
+      layer: 40,
+      data: { intensity: sim.weather.intensity },
+    });
+  }
+
+  entities.sort((a, b) => (a.layer ?? 0) - (b.layer ?? 0));
+
+  return {
+    id: sim.missionId,
+    name: sim.body.name,
+    view,
+    size: sim.world.size,
+    maxHeight: sim.world.maxHeight,
+    time: sim.time,
+    daylight: sim.daylight(),
+    palette: sim.body.palette,
+    weather: sim.weather,
+    entities,
+    home: { ...sim.landingSite },
+  };
+}
diff --git a/packages/engine/src/scene/types.ts b/packages/engine/src/scene/types.ts
new file mode 100644
index 0000000..a4b278b
--- /dev/null
+++ b/packages/engine/src/scene/types.ts
@@ -0,0 +1,60 @@
+import type { ActiveWeather, Anomaly, BodyDef, RoverState, Structure, Vec2 } from '../types.js';
+
+/**
+ * The scene model: a renderer-agnostic description of what is on screen.
+ *
+ * The simulation owns *state*; a scene is the frame's worth of that state a
+ * painter needs, flattened into entities with positions, facings and variants.
+ * The built-in isometric and flat views both draw from it, and a host game can
+ * take the same scene and draw it with its own technology (Pixi, WebGL, SVG)
+ * without reaching into `Simulation`.
+ */
+
+/** How a scene is being looked at. `iso` is the voxel diorama; `flat` is the
+ * top-down 2D map — the same world, drawn two ways. */
+export type ViewKind = 'iso' | 'flat';
+
+export type SceneEntityKind = 'rover' | 'structure' | 'anomaly' | 'marker' | (string & {});
+
+export interface SceneEntity {
+  id: string;
+  kind: SceneEntityKind;
+  /** Tile position; fractional while an entity is between tiles. */
+  pos: Vec2;
+  /** Surface height in voxels at that tile. */
+  z: number;
+  /** SE, SW, NW, NE in world space. */
+  facing?: 0 | 1 | 2 | 3;
+  /** Sub-type the painter switches on (structure type, anomaly type…). */
+  variant?: string;
+  /** Draw order within a tile; higher paints later. */
+  layer?: number;
+  label?: string;
+  /** Painter hints and gameplay flags (powered, documented, progress…). */
+  data?: Record<string, unknown>;
+  /** The live simulation object, for painters that want full detail. */
+  ref?: RoverState | Structure | Anomaly | unknown;
+}
+
+export interface Scene {
+  id: string;
+  name: string;
+  view: ViewKind;
+  /** World edge length in tiles. */
+  size: number;
+  maxHeight: number;
+  /** Game seconds since landing. */
+  time: number;
+  /** 0 = night, 1 = noon. */
+  daylight: number;
+  palette: BodyDef['palette'];
+  weather: ActiveWeather | null;
+  entities: SceneEntity[];
+  /** Deterministic landing/home tile, for framing and map pins. */
+  home: Vec2;
+}
+
+/** Entities of one kind, in paint order. */
+export function entitiesOfKind(scene: Scene, kind: SceneEntityKind): SceneEntity[] {
+  return scene.entities.filter((e) => e.kind === kind);
+}
diff --git a/packages/engine/src/sim/simulation.ts b/packages/engine/src/sim/simulation.ts
index 3b8a763..15921dc 100644
--- a/packages/engine/src/sim/simulation.ts
+++ b/packages/engine/src/sim/simulation.ts
@@ -72,6 +72,8 @@ export class Simulation {
   readonly events: EventBus;
   readonly seed: number;
   readonly missionId: string;
+  /** Deterministic landing tile for this world — the mission's home. */
+  readonly landingSite: Vec2;
 
   time = 0;
   rover: RoverState;
@@ -104,6 +106,7 @@ export class Simulation {
     this.world = generateTerrain(opts.body, this.seed);
     this.anomalies = generateAnomalies(opts.body, this.world, this.seed);
     this.weatherRng = mulberry32(this.seed ^ 0x77ea);
+    this.landingSite = findLandingSite(this.world);
 
     if (opts.resume) {
       const r = opts.resume;
@@ -137,7 +140,7 @@ export class Simulation {
         this.rover.upgrades!.mobility,
       );
     } else {
-      const site = findLandingSite(this.world);
+      const site = this.landingSite;
       const stats = computeStats(opts.spec);
       // Landing burns delta-v worth of fuel.
       const fuel = Math.max(0, stats.fuelCapacity - opts.body.deltaV);
@@ -879,7 +882,10 @@ export class Simulation {
           rig.buffer = {};
         }
         // Auto-fire once it holds a full load and the pad is fuelled.
-        const total = Object.values(s.buffer).reduce((a, b) => a + (b ?? 0), 0);
+        const total = (Object.values(s.buffer) as (number | undefined)[]).reduce(
+          (a: number, b) => a + (b ?? 0),
+          0,
+        );
         const ready = s.cooldownUntil == null || this.time >= s.cooldownUntil;
         if (ready && total >= AUTO_LAUNCH_THRESHOLD) {
           const manifest = s.buffer;
diff --git a/packages/engine/src/sim/structures.ts b/packages/engine/src/sim/structures.ts
index eb8f5f5..adc7ff2 100644
--- a/packages/engine/src/sim/structures.ts
+++ b/packages/engine/src/sim/structures.ts
@@ -65,6 +65,42 @@ export const STRUCTURES: Record<StructureType, StructureDef> = {
   },
 };
 
+/**
+ * Runtime structure registry.
+ *
+ * `StructureType` is an open string type so a host's own construction
+ * catalog — a settlement core, a research lab, a fuel depot, whatever its
+ * economy needs — can be added without forking the engine. `STRUCTURES` is a
+ * plain mutable object, so registering (or replacing) an entry here is picked
+ * up everywhere a structure type is looked up: `Simulation.build()`, the
+ * build menu (`@takeon/ui`'s `BuildPanel`), the flat view's entity glyphs
+ * (register a matching `registerFlatPainter('structure', …)` variant keyed
+ * off `entity.variant` for a custom look), and save/load.
+ */
+
+/** Add or replace a structure definition. Returns the type that was registered. */
+export function registerStructure(def: StructureDef): StructureType {
+  STRUCTURES[def.type] = def;
+  return def.type;
+}
+
+/** Remove a registered structure type. The 10 built-ins refuse to unregister. */
+export function unregisterStructure(type: StructureType): boolean {
+  if (type in BUILTIN_STRUCTURE_TYPES) return false;
+  if (!(type in STRUCTURES)) return false;
+  delete STRUCTURES[type];
+  return true;
+}
+
+/** Every structure definition currently known, built-in and registered. */
+export function listStructures(): StructureDef[] {
+  return Object.values(STRUCTURES);
+}
+
+const BUILTIN_STRUCTURE_TYPES: Record<string, true> = Object.fromEntries(
+  Object.keys(STRUCTURES).map((type) => [type, true as const]),
+);
+
 /** Structure footprint must be flat within this height spread. */
 export const BUILD_RADIUS = 2;
 export const SOLAR_ARRAY_RANGE = 4;
diff --git a/packages/engine/src/types.ts b/packages/engine/src/types.ts
index fe4e181..501d457 100644
--- a/packages/engine/src/types.ts
+++ b/packages/engine/src/types.ts
@@ -1,5 +1,9 @@
 /** Shared engine types. */
 
+import type { NoiseConfig } from './util/noise/index.js';
+
+export type { NoiseConfig };
+
 export interface Vec2 {
   x: number;
   y: number;
@@ -11,23 +15,46 @@ export interface Vec3 {
   z: number;
 }
 
-/** Voxel material ids. 0 is always air. */
-export enum Material {
-  Air = 0,
-  Regolith = 1,
-  Rock = 2,
-  Basalt = 3,
-  Ice = 4,
-  IronOre = 5,
-  Silica = 6,
-  CopperOre = 7,
-  TitaniumOre = 8,
-  Crystal = 9,
-  Dust = 10,
-  Sulfur = 11,
-}
+/**
+ * Voxel material ids. 0 is always air.
+ *
+ * This is a plain object of numeric constants, not a TS `enum` — the `type
+ * Material = number` alias below means any number is a valid material id, so
+ * a host can mint its own ids (see `registerMaterial` in `world/materials.js`)
+ * without a cast or a fork. `Material.Air` / `Material.Regolith` / … still
+ * work exactly as before; only truly custom code that relied on TS enum
+ * reverse-mapping (`Material[5]`) or exhaustiveness checking would notice.
+ * Built-ins occupy 0–63; register custom materials at 64 or above so a body
+ * shared between games never collides with another host's ids.
+ */
+export const Material = {
+  Air: 0,
+  Regolith: 1,
+  Rock: 2,
+  Basalt: 3,
+  Ice: 4,
+  IronOre: 5,
+  Silica: 6,
+  CopperOre: 7,
+  TitaniumOre: 8,
+  Crystal: 9,
+  Dust: 10,
+  Sulfur: 11,
+  Grass: 12,
+  Sand: 13,
+  Snow: 14,
+} as const;
+export type Material = number;
+
+/** First id a host's custom materials should use; see `Material` above. */
+export const CUSTOM_MATERIAL_BASE = 64;
 
-/** Mined resource keys (what ends up in cargo / inventory). */
+/**
+ * Mined resource keys (what ends up in cargo / inventory). The built-ins are
+ * listed for autocomplete; `(string & {})` keeps the union open so a host can
+ * key its own resources (e.g. a mineral economy of platinum/palladium/…)
+ * without extending this type. See `registerResource` in `world/materials.js`.
+ */
 export type ResourceKey =
   | 'regolith'
   | 'stone'
@@ -42,7 +69,8 @@ export type ResourceKey =
   | 'iron-plate'
   | 'glass'
   | 'water'
-  | 'alloy';
+  | 'alloy'
+  | (string & {});
 
 /** A crafting/refining recipe. */
 export interface Recipe {
@@ -69,12 +97,39 @@ export interface MaterialDef {
   jitter: number;
 }
 
-export type BodyType = 'planet' | 'moon' | 'asteroid';
+/**
+ * One depth-stratified layer of ore composition, e.g. a shallow band rich in
+ * one mineral over a deeper band of rarer ones (topsoil/subsoil/bedrock).
+ * `from`/`to` are fractions of the column's own solid depth (0 = surface, 1 =
+ * the deepest voxel), so bands stay proportionate across bodies with very
+ * different `maxHeight`. Bands need not be contiguous or cover [0,1]; depth
+ * outside every band falls back to the default flat mineral split.
+ */
+export interface OreBand {
+  from: number;
+  to: number;
+  /** Relative weights among materials once a voxel has already rolled "this
+   * is ore" (via `terrain.oreRichness`) — bands choose which material wins,
+   * not whether a vein exists here at all. Auto-normalised; need not sum to 1. */
+  minerals: Record<Material, number>;
+  /** Display label for editor/host UI (e.g. "Topsoil"). */
+  label?: string;
+}
+
+export type BodyType = 'planet' | 'moon' | 'asteroid' | 'gaseous';
 
 export interface BodyDef {
   id: string;
   name: string;
   type: BodyType;
+  /**
+   * The `world/kinds.js` preset this body was instantiated from (e.g.
+   * `'earth-like'`, `'ice-moon'`, `'c-type-asteroid'`) — a specialisation of
+   * `type` used for defaulting and to gate which biomes a chunk may roll.
+   * Purely informational once a body exists; absent for hand-authored bodies
+   * that didn't go through `instantiateBody()`.
+   */
+  kind?: string;
   /** Surface gravity, m/s^2. Affects fall damage and landing fuel. */
   gravity: number;
   /** Solar irradiance multiplier vs Earth orbit (gameplay-scaled). */
@@ -111,8 +166,19 @@ export interface BodyDef {
    * Airless bodies get solar storms and meteor showers; Mars gets dust.
    */
   weather?: Partial<Record<WeatherType, number>>;
+  /**
+   * Environmental data a *host* game owns and hands in — e.g. a solar-system
+   * sim's own model of a planet's real temperature — so it can steer a
+   * TakeOn scene without re-deriving climate from scratch. Absent = the body
+   * generates exactly as it always has (biome selection falls back to the
+   * flat regolith/dust/silica skin). `temperature` is a gameplay-scaled mean
+   * surface value (loosely °C); `tempVariance` (0..1) is how much it swings
+   * pole-to-equator or day-to-night, used to spread biomes across chunks
+   * instead of picking one uniform biome for the whole body.
+   */
+  climate?: { temperature: number; tempVariance?: number };
   terrain: {
-    roughness: number; // 0..1
+    roughness: number; // 0..1 — vertical amplitude (and frequency, unless `noise` is set)
     craters: number; // approx count
     iceCaps: number; // 0..1 fraction of map edge covered by ice
     oreRichness: number; // 0..1
@@ -120,6 +186,28 @@ export interface BodyDef {
     sulfurFields?: number;
     /** Irregular island-shaped world (asteroids). */
     irregular?: boolean;
+    /**
+     * Elevation field. Absent = the original value-fBm terrain (what every
+     * shipped body uses); set it to author with perlin/simplex/worley/ridged
+     * fields, domain warp and custom octaves. See `util/noise`.
+     */
+    noise?: NoiseConfig;
+    /**
+     * Depth-stratified ore composition (topsoil/subsoil/bedrock, or however
+     * many layers a host wants). Absent = the original flat iron/copper/
+     * titanium split at every depth (what every shipped body uses); set it to
+     * author a real strata economy — a shallow band of one mineral, a deeper
+     * band of rarer ones. See `world/terrain.js`'s `OreBand`.
+     */
+    bands?: OreBand[];
+    /**
+     * Divide the surface into a `CHUNK_SIZE` grid of independently-seeded
+     * regions, each rolling one biome from `world/biomes.js` (gated by
+     * `climate` and the body's `kind`) instead of the single continuous
+     * regolith/dust/silica skin every shipped body uses. Absent/false keeps
+     * that original skin byte-identical. See `world/biomes.js`.
+     */
+    biomes?: boolean;
   };
   description: string;
 }
@@ -240,6 +328,13 @@ export interface Anomaly {
   documented: boolean;
 }
 
+/**
+ * Buildable structure kinds. The built-ins are listed for autocomplete;
+ * `(string & {})` keeps the union open so a host can register its own
+ * catalog (a settlement core, a research lab, a fuel depot — whatever its
+ * economy needs) without extending this type. See `registerStructure` in
+ * `sim/structures.js`.
+ */
 export type StructureType =
   | 'solar-array'
   | 'beacon'
@@ -250,7 +345,8 @@ export type StructureType =
   | 'habitat'
   | 'launch-pad'
   | 'generator'
-  | 'pylon';
+  | 'pylon'
+  | (string & {});
 
 /**
  * `functional` structures participate in the economy/power grid and are
@@ -385,6 +481,52 @@ export interface GameEvents {
   batteryEmpty: {};
   roverLost: { reason: string };
   stateChanged: {};
+  /** The active renderer changed (iso diorama ⇄ flat map). */
+  viewChanged: { view: 'iso' | 'flat' };
 }
 
 export type GameEventKey = keyof GameEvents;
+
+/**
+ * Every event key, at runtime. `GameEvents` is a type, so hosts that want to
+ * listen to everything (a debug console, analytics, quest hooks) need this
+ * list. Keep it in step with `GameEvents` — `test/engine.test.ts` checks that
+ * the emitter and this array agree.
+ */
+export const GAME_EVENT_KEYS = [
+  'tick',
+  'moved',
+  'blocked',
+  'mined',
+  'miningStarted',
+  'cargoFull',
+  'photo',
+  'scan',
+  'anomalyDocumented',
+  'built',
+  'buildFailed',
+  'rotated',
+  'rotateFailed',
+  'demolished',
+  'demolishFailed',
+  'crafted',
+  'craftFailed',
+  'blockPlaced',
+  'cargoLaunched',
+  'launchFailed',
+  'habitatComplete',
+  'upgraded',
+  'upgradeFailed',
+  'repaired',
+  'damaged',
+  'weather',
+  'meteorImpact',
+  'batteryEmpty',
+  'roverLost',
+  'stateChanged',
+  'viewChanged',
+] as const satisfies readonly GameEventKey[];
+
+/** Compile-time guard: adding a `GameEvents` key without listing it fails here. */
+type UnlistedEventKey = Exclude<GameEventKey, (typeof GAME_EVENT_KEYS)[number]>;
+export const GAME_EVENT_KEYS_ARE_EXHAUSTIVE: UnlistedEventKey extends never ? true : never = true;
diff --git a/packages/engine/src/util/noise/blue.ts b/packages/engine/src/util/noise/blue.ts
new file mode 100644
index 0000000..1c091a8
--- /dev/null
+++ b/packages/engine/src/util/noise/blue.ts
@@ -0,0 +1,231 @@
+import type { Vec2 } from '../../types.js';
+import { mulberry32 } from '../rng.js';
+
+/**
+ * Blue noise: randomness with the low frequencies removed, so points are
+ * *evenly* scattered instead of clumping the way white noise does.
+ *
+ * It is the right tool for placing things — boulders, flora, anomalies,
+ * sampling sites, dither patterns — where "random" from a plain hash leaves
+ * visible clumps and bald patches. Two forms are provided: a tileable mask of
+ * per-cell thresholds (for fields and dithering) and Poisson-disk point sets
+ * (for placement with a guaranteed minimum spacing).
+ */
+
+/**
+ * Bridson's Poisson-disk sampling: uniform points no closer than `radius`,
+ * generated in O(n). Deterministic for a given seed.
+ */
+export function poissonDisk(opts: {
+  width: number;
+  height: number;
+  /** Minimum distance between points, in the same units as width/height. */
+  radius: number;
+  seed?: number;
+  /** Candidates tried per active point before it is retired (default 24). */
+  tries?: number;
+  /** Hard cap on points, for pathological inputs. */
+  limit?: number;
+}): Vec2[] {
+  const { width, height, radius, seed = 1, tries = 24, limit = 20000 } = opts;
+  if (radius <= 0 || width <= 0 || height <= 0) return [];
+  const rng = mulberry32(seed ^ 0x9e37);
+  const cell = radius / Math.SQRT2;
+  const cols = Math.max(1, Math.ceil(width / cell));
+  const rows = Math.max(1, Math.ceil(height / cell));
+  const grid = new Int32Array(cols * rows).fill(-1);
+  const points: Vec2[] = [];
+  const active: number[] = [];
+
+  const insert = (p: Vec2): void => {
+    const gx = Math.min(cols - 1, Math.floor(p.x / cell));
+    const gy = Math.min(rows - 1, Math.floor(p.y / cell));
+    grid[gy * cols + gx] = points.length;
+    active.push(points.length);
+    points.push(p);
+  };
+
+  const fits = (p: Vec2): boolean => {
+    if (p.x < 0 || p.y < 0 || p.x >= width || p.y >= height) return false;
+    const gx = Math.floor(p.x / cell);
+    const gy = Math.floor(p.y / cell);
+    for (let y = Math.max(0, gy - 2); y <= Math.min(rows - 1, gy + 2); y++) {
+      for (let x = Math.max(0, gx - 2); x <= Math.min(cols - 1, gx + 2); x++) {
+        const idx = grid[y * cols + x];
+        if (idx < 0) continue;
+        const q = points[idx];
+        if ((q.x - p.x) ** 2 + (q.y - p.y) ** 2 < radius * radius) return false;
+      }
+    }
+    return true;
+  };
+
+  insert({ x: rng() * width, y: rng() * height });
+
+  while (active.length > 0 && points.length < limit) {
+    const pick = Math.floor(rng() * active.length);
+    const origin = points[active[pick]];
+    let placed = false;
+    for (let i = 0; i < tries; i++) {
+      const angle = rng() * Math.PI * 2;
+      const dist = radius * (1 + rng());
+      const candidate = { x: origin.x + Math.cos(angle) * dist, y: origin.y + Math.sin(angle) * dist };
+      if (!fits(candidate)) continue;
+      insert(candidate);
+      placed = true;
+      break;
+    }
+    if (!placed) active.splice(pick, 1);
+  }
+
+  return points;
+}
+
+/**
+ * Scatter roughly `count` points over a square grid with blue-noise spacing.
+ * The radius is solved from the target count, then trimmed/topped up — handy
+ * when a designer thinks in "about 40 boulders", not in minimum distances.
+ */
+export function scatterPoints(size: number, count: number, seed = 1): Vec2[] {
+  if (count <= 0 || size <= 0) return [];
+  // Packing density of a Poisson-disk set is ~0.7 of the hexagonal bound.
+  const radius = Math.max(0.5, Math.sqrt((size * size * 0.75) / count));
+  const points = poissonDisk({ width: size, height: size, radius, seed });
+  if (points.length <= count) return points;
+  // Deterministic trim: keep an evenly spread subset rather than the first N.
+  const step = points.length / count;
+  const out: Vec2[] = [];
+  for (let i = 0; i < count; i++) out.push(points[Math.floor(i * step)]);
+  return out;
+}
+
+const maskCache = new Map<string, Float32Array>();
+
+/**
+ * Tileable blue-noise threshold mask built by void-and-cluster: every cell
+ * gets a value in [0,1) such that thresholding at any level leaves an evenly
+ * spread pattern. Cached per (size, seed) — building one is the expensive part.
+ *
+ * Keep `size` small (32 or 64); cost grows with size².
+ */
+export function blueNoiseMask(size = 32, seed = 1): Float32Array {
+  const key = `${size}:${seed}`;
+  const cached = maskCache.get(key);
+  if (cached) return cached;
+
+  const n = size * size;
+  const rng = mulberry32(seed ^ 0x51f3);
+  const binary = new Uint8Array(n);
+  const energy = new Float32Array(n);
+
+  // Gaussian energy kernel with wraparound, so the mask tiles seamlessly.
+  const sigma = 1.5;
+  const reach = Math.min(size >> 1, 4);
+  const kernel: { dx: number; dy: number; w: number }[] = [];
+  for (let dy = -reach; dy <= reach; dy++) {
+    for (let dx = -reach; dx <= reach; dx++) {
+      if (dx === 0 && dy === 0) continue;
+      kernel.push({ dx, dy, w: Math.exp(-(dx * dx + dy * dy) / (2 * sigma * sigma)) });
+    }
+  }
+
+  const stamp = (index: number, sign: number): void => {
+    const x = index % size;
+    const y = (index - x) / size;
+    for (const k of kernel) {
+      const nx = (x + k.dx + size) % size;
+      const ny = (y + k.dy + size) % size;
+      energy[ny * size + nx] += sign * k.w;
+    }
+  };
+
+  const tightestCluster = (): number => {
+    let best = -1;
+    let bestE = -Infinity;
+    for (let i = 0; i < n; i++) {
+      if (binary[i] === 1 && energy[i] > bestE) {
+        bestE = energy[i];
+        best = i;
+      }
+    }
+    return best;
+  };
+
+  const largestVoid = (): number => {
+    let best = -1;
+    let bestE = Infinity;
+    for (let i = 0; i < n; i++) {
+      if (binary[i] === 0 && energy[i] < bestE) {
+        bestE = energy[i];
+        best = i;
+      }
+    }
+    return best;
+  };
+
+  // Seed pattern: a tenth of the cells, then relax it until removing the
+  // tightest cluster and filling the largest void stops moving anything.
+  const initial = Math.max(1, Math.round(n * 0.1));
+  let placed = 0;
+  while (placed < initial) {
+    const i = Math.floor(rng() * n);
+    if (binary[i]) continue;
+    binary[i] = 1;
+    stamp(i, 1);
+    placed++;
+  }
+  for (let guard = 0; guard < n * 2; guard++) {
+    const cluster = tightestCluster();
+    if (cluster < 0) break;
+    binary[cluster] = 0;
+    stamp(cluster, -1);
+    const voidCell = largestVoid();
+    if (voidCell < 0 || voidCell === cluster) {
+      binary[cluster] = 1;
+      stamp(cluster, 1);
+      break;
+    }
+    binary[voidCell] = 1;
+    stamp(voidCell, 1);
+  }
+
+  const rank = new Int32Array(n).fill(-1);
+  // Phase 1: remove points from the prototype, ranking downward.
+  const proto = Uint8Array.from(binary);
+  const protoEnergy = Float32Array.from(energy);
+  for (let r = placed - 1; r >= 0; r--) {
+    const cluster = tightestCluster();
+    if (cluster < 0) break;
+    binary[cluster] = 0;
+    stamp(cluster, -1);
+    rank[cluster] = r;
+  }
+  // Phase 2: restore the prototype and add points, ranking upward.
+  binary.set(proto);
+  energy.set(protoEnergy);
+  for (let r = placed; r < n; r++) {
+    const voidCell = largestVoid();
+    if (voidCell < 0) break;
+    binary[voidCell] = 1;
+    stamp(voidCell, 1);
+    rank[voidCell] = r;
+  }
+
+  const mask = new Float32Array(n);
+  for (let i = 0; i < n; i++) mask[i] = (rank[i] < 0 ? 0 : rank[i]) / n;
+  maskCache.set(key, mask);
+  return mask;
+}
+
+/** Sample the tileable blue-noise mask at integer-ish coordinates. */
+export function blueNoise2(x: number, y: number, seed = 1, size = 32): number {
+  const mask = blueNoiseMask(size, seed);
+  const xi = ((Math.floor(x) % size) + size) % size;
+  const yi = ((Math.floor(y) % size) + size) % size;
+  return mask[yi * size + xi];
+}
+
+/** Drop cached masks (tests, or when memory matters more than rebuild cost). */
+export function clearBlueNoiseCache(): void {
+  maskCache.clear();
+}
diff --git a/packages/engine/src/util/noise/config.ts b/packages/engine/src/util/noise/config.ts
new file mode 100644
index 0000000..8522e80
--- /dev/null
+++ b/packages/engine/src/util/noise/config.ts
@@ -0,0 +1,157 @@
+import { hash2 } from '../rng.js';
+import { blueNoise2 } from './blue.js';
+import { perlin2, simplex2 } from './gradient.js';
+import { valueNoise2 } from './value.js';
+import { worley2 } from './worley.js';
+
+/**
+ * One description of a noise field, and a factory that turns it into a
+ * sampler. This is what makes noise *authorable*: a body carries a
+ * `NoiseConfig`, the editor edits it with sliders, and generation, previews
+ * and analysis all read the same field.
+ */
+
+export type NoiseType =
+  | 'value'
+  | 'perlin'
+  | 'simplex'
+  | 'worley'
+  | 'worley-cracks'
+  | 'blue'
+  | 'white';
+
+export type FractalKind = 'fbm' | 'ridged' | 'billow';
+
+export interface NoiseConfig {
+  type?: NoiseType;
+  /** Base frequency in cycles per tile. Higher = smaller features. */
+  frequency?: number;
+  octaves?: number;
+  /** Frequency multiplier per octave. */
+  lacunarity?: number;
+  /** Amplitude multiplier per octave. */
+  gain?: number;
+  fractal?: FractalKind;
+  /** Domain warp strength, in tiles. 0 disables the extra sampling pass. */
+  warp?: number;
+  /** Offset added to the seed, so several fields on one body differ. */
+  seedOffset?: number;
+}
+
+export const DEFAULT_NOISE: Required<NoiseConfig> = {
+  type: 'value',
+  frequency: 0.05,
+  octaves: 4,
+  lacunarity: 2,
+  gain: 0.5,
+  fractal: 'fbm',
+  warp: 0,
+  seedOffset: 0,
+};
+
+/** Editor metadata: what each type is good for. */
+export const NOISE_TYPES: { id: NoiseType; label: string; help: string }[] = [
+  { id: 'value', label: 'Value', help: 'The original TakeOn field: soft, lumpy relief. Cheapest.' },
+  { id: 'perlin', label: 'Perlin', help: 'Gradient noise — flowing dunes and rolling ridges.' },
+  { id: 'simplex', label: 'Simplex', help: 'Isotropic gradient noise: organic, no grid artefacts.' },
+  { id: 'worley', label: 'Worley', help: 'Cellular distance field — craters, bubbles, pans.' },
+  { id: 'worley-cracks', label: 'Worley cracks', help: 'F2−F1 seams: fractured plates and fault lines.' },
+  { id: 'blue', label: 'Blue', help: 'Evenly spread randomness — scatter and dithering, not relief.' },
+  { id: 'white', label: 'White', help: 'Raw hash. Reference/comparison field.' },
+];
+
+export const FRACTAL_KINDS: { id: FractalKind; label: string; help: string }[] = [
+  { id: 'fbm', label: 'fBm', help: 'Standard sum of octaves — natural, balanced terrain.' },
+  { id: 'ridged', label: 'Ridged', help: 'Inverted absolute value: sharp ridgelines and canyons.' },
+  { id: 'billow', label: 'Billow', help: 'Absolute value: puffy, dune-like mounds.' },
+];
+
+type Sampler = (x: number, y: number, seed: number) => number;
+
+function baseSampler(type: NoiseType): Sampler {
+  switch (type) {
+    case 'perlin':
+      return perlin2;
+    case 'simplex':
+      return simplex2;
+    case 'worley':
+      return (x, y, seed) => worley2(x, y, seed, 'f1');
+    case 'worley-cracks':
+      return (x, y, seed) => worley2(x, y, seed, 'f2f1');
+    case 'blue':
+      return (x, y, seed) => blueNoise2(x, y, seed);
+    case 'white':
+      return (x, y, seed) => hash2(Math.floor(x), Math.floor(y), seed);
+    case 'value':
+    default:
+      return valueNoise2;
+  }
+}
+
+/**
+ * Fractal stack over any base sampler. `fbm` sums octaves; `ridged` and
+ * `billow` fold each octave around its midpoint first, which is what turns a
+ * smooth field into ridgelines or dunes.
+ */
+export function fractal2(
+  sample: Sampler,
+  x: number,
+  y: number,
+  seed: number,
+  opts: { octaves?: number; lacunarity?: number; gain?: number; kind?: FractalKind } = {},
+): number {
+  const { octaves = 4, lacunarity = 2, gain = 0.5, kind = 'fbm' } = opts;
+  let amp = 1;
+  let freq = 1;
+  let sum = 0;
+  let norm = 0;
+  for (let i = 0; i < Math.max(1, octaves); i++) {
+    const raw = sample(x * freq, y * freq, seed + i * 101);
+    let v = raw;
+    if (kind === 'ridged') v = 1 - Math.abs(raw * 2 - 1);
+    else if (kind === 'billow') v = Math.abs(raw * 2 - 1);
+    sum += amp * v;
+    norm += amp;
+    amp *= gain;
+    freq *= lacunarity;
+  }
+  return norm > 0 ? sum / norm : 0;
+}
+
+/**
+ * Build a sampler from a config. The returned function takes *tile*
+ * coordinates and returns [0,1]; frequency and warping are already folded in,
+ * so callers never repeat the plumbing.
+ */
+export function makeNoise(config: NoiseConfig | undefined, seed: number): (x: number, y: number) => number {
+  const cfg = { ...DEFAULT_NOISE, ...config };
+  const base = baseSampler(cfg.type);
+  const s = seed + cfg.seedOffset;
+  const f = cfg.frequency;
+  const fractalOpts = {
+    octaves: cfg.octaves,
+    lacunarity: cfg.lacunarity,
+    gain: cfg.gain,
+    kind: cfg.fractal,
+  };
+
+  if (cfg.warp > 0) {
+    // Domain warp: displace the sample point by a second, coarser field. This
+    // is what turns regular fBm into something that looks eroded.
+    return (x, y) => {
+      const wx = (valueNoise2(x * f * 0.5, y * f * 0.5, s + 771) - 0.5) * 2 * cfg.warp;
+      const wy = (valueNoise2(x * f * 0.5 + 31.7, y * f * 0.5 - 11.3, s + 913) - 0.5) * 2 * cfg.warp;
+      return fractal2(base, (x + wx) * f, (y + wy) * f, s, fractalOpts);
+    };
+  }
+  return (x, y) => fractal2(base, x * f, y * f, s, fractalOpts);
+}
+
+/** Human-readable one-liner for editors and tooltips. */
+export function describeNoise(config: NoiseConfig | undefined): string {
+  const cfg = { ...DEFAULT_NOISE, ...config };
+  const type = NOISE_TYPES.find((t) => t.id === cfg.type)?.label ?? cfg.type;
+  const parts = [`${type} · ${cfg.fractal} ×${cfg.octaves}`, `freq ${cfg.frequency.toFixed(3)}`];
+  if (cfg.warp > 0) parts.push(`warp ${cfg.warp.toFixed(1)}`);
+  return parts.join(' · ');
+}
diff --git a/packages/engine/src/util/noise/gradient.ts b/packages/engine/src/util/noise/gradient.ts
new file mode 100644
index 0000000..c5e28f5
--- /dev/null
+++ b/packages/engine/src/util/noise/gradient.ts
@@ -0,0 +1,88 @@
+import { hash2 } from '../rng.js';
+
+/**
+ * Gradient noises: Perlin and simplex.
+ *
+ * Both return roughly [0,1] like `valueNoise2`, so any of them can be dropped
+ * into the same fractal stack. Gradients come from the shared integer hash, so
+ * a given seed reproduces exactly — no permutation tables to ship or drift.
+ */
+
+function fade(t: number): number {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+
+/** Unit gradient vector for a lattice point. */
+function grad(ix: number, iy: number, seed: number): [number, number] {
+  const a = hash2(ix, iy, seed) * Math.PI * 2;
+  return [Math.cos(a), Math.sin(a)];
+}
+
+/**
+ * Classic Perlin gradient noise. Smoother and less grid-aligned than value
+ * noise: ridges follow the gradients rather than the lattice, which reads as
+ * wind-blown dunes and rolling relief rather than lumpy blobs.
+ */
+export function perlin2(x: number, y: number, seed: number): number {
+  const x0 = Math.floor(x);
+  const y0 = Math.floor(y);
+  const xf = x - x0;
+  const yf = y - y0;
+
+  const dot = (ix: number, iy: number): number => {
+    const [gx, gy] = grad(ix, iy, seed);
+    return gx * (x - ix) + gy * (y - iy);
+  };
+
+  const u = fade(xf);
+  const v = fade(yf);
+  const n00 = dot(x0, y0);
+  const n10 = dot(x0 + 1, y0);
+  const n01 = dot(x0, y0 + 1);
+  const n11 = dot(x0 + 1, y0 + 1);
+  const nx0 = n00 + (n10 - n00) * u;
+  const nx1 = n01 + (n11 - n01) * u;
+  const n = nx0 + (nx1 - nx0) * v;
+  // Perlin's range is about ±sqrt(2)/2; normalise into [0,1].
+  return Math.max(0, Math.min(1, n * 0.7071 + 0.5));
+}
+
+const F2 = 0.5 * (Math.sqrt(3) - 1);
+const G2 = (3 - Math.sqrt(3)) / 6;
+
+/**
+ * Simplex noise on a triangular lattice: no axis-aligned artefacts and a
+ * cheaper kernel than Perlin at higher octave counts. Good default for
+ * organic, isotropic terrain.
+ */
+export function simplex2(x: number, y: number, seed: number): number {
+  // Skew the input space onto the simplex lattice.
+  const s = (x + y) * F2;
+  const i = Math.floor(x + s);
+  const j = Math.floor(y + s);
+  const t = (i + j) * G2;
+  const x0 = x - (i - t);
+  const y0 = y - (j - t);
+
+  // Which of the two triangles of the rhombus are we in?
+  const i1 = x0 > y0 ? 1 : 0;
+  const j1 = x0 > y0 ? 0 : 1;
+
+  const x1 = x0 - i1 + G2;
+  const y1 = y0 - j1 + G2;
+  const x2 = x0 - 1 + 2 * G2;
+  const y2 = y0 - 1 + 2 * G2;
+
+  const corner = (cx: number, cy: number, ii: number, jj: number): number => {
+    const t0 = 0.5 - cx * cx - cy * cy;
+    if (t0 < 0) return 0;
+    const [gx, gy] = grad(ii, jj, seed);
+    const t2 = t0 * t0;
+    return t2 * t2 * (gx * cx + gy * cy);
+  };
+
+  const n =
+    corner(x0, y0, i, j) + corner(x1, y1, i + i1, j + j1) + corner(x2, y2, i + 1, j + 1);
+  // The 70× scale is the standard normalisation for this kernel.
+  return Math.max(0, Math.min(1, n * 35 + 0.5));
+}
diff --git a/packages/engine/src/util/noise/index.ts b/packages/engine/src/util/noise/index.ts
new file mode 100644
index 0000000..9dc320f
--- /dev/null
+++ b/packages/engine/src/util/noise/index.ts
@@ -0,0 +1,29 @@
+/**
+ * Noise library.
+ *
+ * `value.ts` holds the original field the shipped worlds were generated with —
+ * it must keep producing identical output, so every built-in body regenerates
+ * byte-for-byte. Everything else is opt-in through `NoiseConfig`.
+ */
+
+export { valueNoise2, fbm2 } from './value.js';
+export { perlin2, simplex2 } from './gradient.js';
+export { worley2, type WorleyMode } from './worley.js';
+export {
+  poissonDisk,
+  scatterPoints,
+  blueNoiseMask,
+  blueNoise2,
+  clearBlueNoiseCache,
+} from './blue.js';
+export {
+  makeNoise,
+  fractal2,
+  describeNoise,
+  DEFAULT_NOISE,
+  NOISE_TYPES,
+  FRACTAL_KINDS,
+  type NoiseConfig,
+  type NoiseType,
+  type FractalKind,
+} from './config.js';
diff --git a/packages/engine/src/util/noise.ts b/packages/engine/src/util/noise/value.ts
similarity index 96%
rename from packages/engine/src/util/noise.ts
rename to packages/engine/src/util/noise/value.ts
index b26e005..6dee42a 100644
--- a/packages/engine/src/util/noise.ts
+++ b/packages/engine/src/util/noise/value.ts
@@ -1,4 +1,4 @@
-import { hash2 } from './rng.js';
+import { hash2 } from '../rng.js';
 
 function smooth(t: number): number {
   return t * t * (3 - 2 * t);
diff --git a/packages/engine/src/util/noise/worley.ts b/packages/engine/src/util/noise/worley.ts
new file mode 100644
index 0000000..56eb309
--- /dev/null
+++ b/packages/engine/src/util/noise/worley.ts
@@ -0,0 +1,47 @@
+import { hash2 } from '../rng.js';
+
+/**
+ * Worley (cellular) noise. Each grid cell holds one feature point; the value
+ * is the distance to the nearest one, so it reads as cracked plates, basalt
+ * columns, dry lakebeds or crater fields depending on how it is combined.
+ */
+
+export type WorleyMode =
+  /** Distance to the nearest point: bubbles/craters. */
+  | 'f1'
+  /** F2 − F1: bright seams between cells — cracks and fault lines. */
+  | 'f2f1'
+  /** 1 − F1: plateaus with sunken joints. */
+  | 'cells';
+
+export function worley2(x: number, y: number, seed: number, mode: WorleyMode = 'f1'): number {
+  const xi = Math.floor(x);
+  const yi = Math.floor(y);
+  let f1 = Infinity;
+  let f2 = Infinity;
+
+  for (let dy = -1; dy <= 1; dy++) {
+    for (let dx = -1; dx <= 1; dx++) {
+      const cx = xi + dx;
+      const cy = yi + dy;
+      // Feature point placed inside the cell by two decorrelated hashes.
+      const px = cx + hash2(cx, cy, seed);
+      const py = cy + hash2(cx, cy, seed + 8191);
+      const d = Math.hypot(px - x, py - y);
+      if (d < f1) {
+        f2 = f1;
+        f1 = d;
+      } else if (d < f2) {
+        f2 = d;
+      }
+    }
+  }
+
+  if (mode === 'f2f1') return clamp01(f2 - f1);
+  if (mode === 'cells') return clamp01(1 - f1);
+  return clamp01(f1);
+}
+
+function clamp01(v: number): number {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}
diff --git a/packages/engine/src/world/analysis.ts b/packages/engine/src/world/analysis.ts
new file mode 100644
index 0000000..0964c2f
--- /dev/null
+++ b/packages/engine/src/world/analysis.ts
@@ -0,0 +1,260 @@
+import { Material, type ResourceKey, type Vec2 } from '../types.js';
+import { MATERIALS } from './materials.js';
+import { findLandingSite } from './terrain.js';
+import type { VoxelWorld } from './world.js';
+
+/**
+ * Read-only measurements over a generated world.
+ *
+ * These exist so terrain can be *planned* rather than eyeballed: the editor
+ * (and any host tooling) can answer "is this map drivable with tier-1 wheels",
+ * "how much titanium is actually in here", "how spiky is the relief" without
+ * reaching into the renderer. Everything here is pure, DOM-free and
+ * deterministic for a given world, so it is unit-testable and safe to run in
+ * a worker.
+ */
+
+/** Column heights, row-major (y * size + x). -1 marks a void column. */
+export function heightField(world: VoxelWorld): Int16Array {
+  const { size } = world;
+  const out = new Int16Array(size * size);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) out[y * size + x] = world.height(x, y);
+  }
+  return out;
+}
+
+/**
+ * Per-column steepness: the largest absolute height step to a 4-neighbour.
+ * -1 for void columns; a neighbouring void counts as impassable (`Infinity`
+ * would not fit the array, so it is clamped to the world's max height).
+ */
+export function slopeField(world: VoxelWorld): Int16Array {
+  const { size } = world;
+  const heights = heightField(world);
+  const out = new Int16Array(size * size).fill(-1);
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const h = heights[y * size + x];
+      if (h < 0) continue;
+      let worst = 0;
+      for (const [dx, dy] of NEIGHBOURS) {
+        const nx = x + dx;
+        const ny = y + dy;
+        if (nx < 0 || ny < 0 || nx >= size || ny >= size) continue;
+        const nh = heights[ny * size + nx];
+        // A void neighbour is a cliff edge, not a gentle slope.
+        const step = nh < 0 ? world.maxHeight : Math.abs(nh - h);
+        if (step > worst) worst = step;
+      }
+      out[y * size + x] = worst;
+    }
+  }
+  return out;
+}
+
+const NEIGHBOURS: [number, number][] = [
+  [1, 0],
+  [0, 1],
+  [-1, 0],
+  [0, -1],
+];
+
+/**
+ * Flood fill of every column a rover with `maxClimb` can reach from `from`,
+ * using the same "signed step must be within climb" rule the simulation
+ * applies when driving. 1 = reachable.
+ */
+export function reachableMask(world: VoxelWorld, from: Vec2, maxClimb: number): Uint8Array {
+  const { size } = world;
+  const heights = heightField(world);
+  const mask = new Uint8Array(size * size);
+  const start = from.y * size + from.x;
+  if (from.x < 0 || from.y < 0 || from.x >= size || from.y >= size) return mask;
+  if (heights[start] < 0) return mask;
+  const queue: number[] = [start];
+  mask[start] = 1;
+  while (queue.length > 0) {
+    const cur = queue.pop() as number;
+    const x = cur % size;
+    const y = (cur - x) / size;
+    const h = heights[cur];
+    for (const [dx, dy] of NEIGHBOURS) {
+      const nx = x + dx;
+      const ny = y + dy;
+      if (nx < 0 || ny < 0 || nx >= size || ny >= size) continue;
+      const ni = ny * size + nx;
+      if (mask[ni]) continue;
+      const nh = heights[ni];
+      if (nh < 0) continue;
+      if (Math.abs(nh - h) > maxClimb) continue;
+      mask[ni] = 1;
+      queue.push(ni);
+    }
+  }
+  return mask;
+}
+
+/**
+ * A vertical slice through the world for cross-section views.
+ * `cells[z][i]` is the material at height `z` along the slice.
+ */
+export function crossSection(
+  world: VoxelWorld,
+  axis: 'x' | 'y',
+  index: number,
+): { axis: 'x' | 'y'; index: number; length: number; height: number; cells: Material[][] } {
+  const length = world.size;
+  const height = world.maxHeight;
+  const cells: Material[][] = [];
+  for (let z = 0; z < height; z++) {
+    const row: Material[] = new Array(length);
+    for (let i = 0; i < length; i++) {
+      row[i] = axis === 'y' ? world.get(i, index, z) : world.get(index, i, z);
+    }
+    cells.push(row);
+  }
+  return { axis, index, length, height, cells };
+}
+
+export interface TerrainAnalysis {
+  size: number;
+  /** size² — every column, void included. */
+  columns: number;
+  solidColumns: number;
+  voidFraction: number;
+  solidVoxels: number;
+  minHeight: number;
+  maxHeight: number;
+  meanHeight: number;
+  medianHeight: number;
+  /** maxHeight − minHeight over solid columns. */
+  relief: number;
+  /** Column count per surface height, indexed by z. */
+  heightHistogram: number[];
+  slope: {
+    mean: number;
+    max: number;
+    /** Fraction of solid columns whose worst neighbour step exceeds `maxClimb`. */
+    steepFraction: number;
+    /** Column count per steepness step, indexed by voxels of step. */
+    histogram: number[];
+  };
+  /** Voxel counts by material (air excluded). */
+  materials: Partial<Record<Material, number>>;
+  /** Surface-voxel counts by material — the "biome mix" you actually see. */
+  surface: Partial<Record<Material, number>>;
+  /** Everything the map would yield if every voxel were mined. */
+  resources: Partial<Record<ResourceKey, number>>;
+  traversable: {
+    maxClimb: number;
+    from: Vec2;
+    reachableColumns: number;
+    /** Reachable / solid columns: 1 means the whole map is drivable. */
+    reachableFraction: number;
+  };
+  landingSite: Vec2;
+}
+
+export interface AnalyzeTerrainOptions {
+  /** Drivetrain climb limit used for the traversability flood fill (default 2). */
+  maxClimb?: number;
+  /** Start column for the flood fill (default: the deterministic landing site). */
+  from?: Vec2;
+}
+
+/** Summarise a generated world: relief, slopes, material mix, drivability. */
+export function analyzeTerrain(world: VoxelWorld, opts: AnalyzeTerrainOptions = {}): TerrainAnalysis {
+  const { size, maxHeight } = world;
+  const heights = heightField(world);
+  const slopes = slopeField(world);
+  const landingSite = findLandingSite(world);
+  const from = opts.from ?? landingSite;
+  const maxClimb = opts.maxClimb ?? 2;
+
+  const heightHistogram = new Array(maxHeight).fill(0);
+  const slopeHistogram = new Array(maxHeight + 1).fill(0);
+  const materials: Partial<Record<Material, number>> = {};
+  const surface: Partial<Record<Material, number>> = {};
+  const resources: Partial<Record<ResourceKey, number>> = {};
+
+  let solidColumns = 0;
+  let solidVoxels = 0;
+  let heightSum = 0;
+  let hMin = Infinity;
+  let hMax = -Infinity;
+  let slopeSum = 0;
+  let slopeMax = 0;
+  let steep = 0;
+  const heightList: number[] = [];
+
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const i = y * size + x;
+      const h = heights[i];
+      if (h < 0) continue;
+      solidColumns++;
+      heightSum += h;
+      heightList.push(h);
+      if (h < hMin) hMin = h;
+      if (h > hMax) hMax = h;
+      if (h < heightHistogram.length) heightHistogram[h]++;
+
+      const s = slopes[i];
+      slopeSum += s;
+      if (s > slopeMax) slopeMax = s;
+      if (s > maxClimb) steep++;
+      slopeHistogram[Math.min(slopeHistogram.length - 1, s)]++;
+
+      for (let z = 0; z <= h; z++) {
+        const m = world.get(x, y, z);
+        if (m === Material.Air) continue;
+        solidVoxels++;
+        materials[m] = (materials[m] ?? 0) + 1;
+        const def = MATERIALS[m];
+        if (def?.yields) {
+          const { resource, amount } = def.yields;
+          resources[resource] = (resources[resource] ?? 0) + amount;
+        }
+      }
+      const top = world.get(x, y, h);
+      surface[top] = (surface[top] ?? 0) + 1;
+    }
+  }
+
+  heightList.sort((a, b) => a - b);
+  const median = heightList.length > 0 ? heightList[heightList.length >> 1] : 0;
+  const mask = reachableMask(world, from, maxClimb);
+  let reachable = 0;
+  for (let i = 0; i < mask.length; i++) reachable += mask[i];
+
+  return {
+    size,
+    columns: size * size,
+    solidColumns,
+    voidFraction: 1 - solidColumns / (size * size),
+    solidVoxels,
+    minHeight: solidColumns > 0 ? hMin : 0,
+    maxHeight: solidColumns > 0 ? hMax : 0,
+    meanHeight: solidColumns > 0 ? heightSum / solidColumns : 0,
+    medianHeight: median,
+    relief: solidColumns > 0 ? hMax - hMin : 0,
+    heightHistogram,
+    slope: {
+      mean: solidColumns > 0 ? slopeSum / solidColumns : 0,
+      max: slopeMax,
+      steepFraction: solidColumns > 0 ? steep / solidColumns : 0,
+      histogram: slopeHistogram,
+    },
+    materials,
+    surface,
+    resources,
+    traversable: {
+      maxClimb,
+      from,
+      reachableColumns: reachable,
+      reachableFraction: solidColumns > 0 ? reachable / solidColumns : 0,
+    },
+    landingSite,
+  };
+}
diff --git a/packages/engine/src/world/authoring.ts b/packages/engine/src/world/authoring.ts
new file mode 100644
index 0000000..e2dd3cf
--- /dev/null
+++ b/packages/engine/src/world/authoring.ts
@@ -0,0 +1,467 @@
+import type { BodyDef, BodyType, WeatherType } from '../types.js';
+import { DEFAULT_NOISE, FRACTAL_KINDS, NOISE_TYPES } from '../util/noise/index.js';
+import { BODIES } from './bodies.js';
+import { listBodyKinds, mergeDefaults, resolveBodyKind, type BodyKindDefaults } from './kinds.js';
+
+/**
+ * Authoring support for destinations: drafts, validation, a field schema and
+ * source/JSON export.
+ *
+ * The engine owns this (rather than the editor) so that *any* host — the
+ * built-in editor, a Landnam admin screen, a CLI — builds the same inspector
+ * against the same rules, and so the rules stay testable without a DOM.
+ */
+
+export const MIN_BODY_SIZE = 16;
+export const MAX_BODY_SIZE = 192;
+/** Column heights are cached in an Int8Array, so this is a hard ceiling. */
+export const MAX_BODY_HEIGHT = 100;
+
+export const WEATHER_TYPES: WeatherType[] = [
+  'dust-devil',
+  'dust-storm',
+  'solar-storm',
+  'meteor-shower',
+  'cryo-fog',
+];
+
+export const BODY_TYPES: BodyType[] = ['planet', 'moon', 'asteroid', 'gaseous'];
+
+/** A blank-but-playable destination, ready to be tweaked in an inspector. */
+export function createBodyDraft(partial: Partial<BodyDef> = {}): BodyDef {
+  const base: BodyDef = {
+    id: 'new-world',
+    name: 'New World',
+    type: 'moon',
+    gravity: 1.6,
+    solarFlux: 0.8,
+    dayLength: 600,
+    deltaV: 40,
+    size: 96,
+    maxHeight: 14,
+    seed: 1234,
+    palette: { sky: '#2c2650', skyNight: '#0a0920', tint: [1, 1, 1] },
+    terrain: { roughness: 0.5, craters: 6, iceCaps: 0.1, oreRichness: 0.4 },
+    minerals: { iron: 0.45, copper: 0.3, titanium: 0.25 },
+    weather: {},
+    description: 'An unnamed world.',
+  };
+  return mergeBody(base, partial);
+}
+
+/** Deep clone of a destination (structures are plain data). */
+export function cloneBody(def: BodyDef): BodyDef {
+  return {
+    ...def,
+    palette: { ...def.palette, tint: def.palette.tint ? ([...def.palette.tint] as [number, number, number]) : undefined },
+    terrain: { ...def.terrain, bands: def.terrain.bands ? def.terrain.bands.map((b) => ({ ...b, minerals: { ...b.minerals } })) : undefined },
+    minerals: def.minerals ? { ...def.minerals } : undefined,
+    weather: def.weather ? { ...def.weather } : undefined,
+    climate: def.climate ? { ...def.climate } : undefined,
+  };
+}
+
+/** Start a draft from an existing body — the "duplicate" action. */
+export function forkBody(def: BodyDef, id: string, name?: string): BodyDef {
+  const copy = cloneBody(def);
+  copy.id = id;
+  copy.name = name ?? `${def.name} copy`;
+  return copy;
+}
+
+/**
+ * Build a concrete, generatable destination from a `world/kinds.js` preset —
+ * the seam a host game uses to hand TakeOn real planetary data. The kind's
+ * full ancestry (e.g. `earth-like` → `planet` → `body`) is merged root-first,
+ * then `overrides` (typically at least `id`, `name`, `seed`, and anything the
+ * host's own model knows — a real `climate.temperature`) wins on top.
+ */
+export function instantiateBody(kindId: string, overrides: Partial<BodyDef> & { id: string; name: string }): BodyDef {
+  const defaults = resolveBodyKind(kindId);
+  const merged = mergeDefaults(defaults, overrides as BodyKindDefaults);
+  return createBodyDraft({ ...merged, kind: kindId } as Partial<BodyDef>);
+}
+
+function mergeBody(base: BodyDef, patch: Partial<BodyDef>): BodyDef {
+  const out = cloneBody(base);
+  Object.assign(out, patch);
+  if (patch.palette) out.palette = { ...base.palette, ...patch.palette };
+  if (patch.terrain) out.terrain = { ...base.terrain, ...patch.terrain };
+  if (patch.minerals) out.minerals = { ...base.minerals, ...patch.minerals };
+  if (patch.weather) out.weather = { ...base.weather, ...patch.weather };
+  if (patch.climate) out.climate = { ...base.climate, ...patch.climate };
+  return out;
+}
+
+// ── Inspector schema ───────────────────────────────────────────────────
+
+export type BodyFieldKind = 'number' | 'text' | 'longtext' | 'color' | 'boolean' | 'select';
+
+export type BodyFieldGroup =
+  | 'identity'
+  | 'physics'
+  | 'climate'
+  | 'world'
+  | 'terrain'
+  | 'noise'
+  | 'minerals'
+  | 'weather'
+  | 'palette';
+
+export interface BodyField {
+  /** Dotted path into the BodyDef, e.g. `terrain.roughness`. */
+  path: string;
+  label: string;
+  kind: BodyFieldKind;
+  group: BodyFieldGroup;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  options?: { value: string; label: string }[];
+  help?: string;
+  /**
+   * Value an editor should show when the field is absent — the effective
+   * default the engine would use. Without it, optional numeric fields read as
+   * 0 in an inspector and writing one silently zeroes a real default.
+   */
+  defaultValue?: number | string | boolean;
+  /** True when changing it invalidates a generated world. */
+  affectsTerrain?: boolean;
+}
+
+export const BODY_FIELD_GROUPS: { id: BodyFieldGroup; label: string; help: string }[] = [
+  { id: 'identity', label: 'Identity', help: 'How the destination is named and described.' },
+  { id: 'physics', label: 'Physics & orbit', help: 'Gravity, sunlight, day length and the fuel to get there.' },
+  {
+    id: 'climate',
+    label: 'Climate',
+    help: 'Environmental data a host game can hand in (e.g. real temperature). Drives biome selection when terrain.biomes is on.',
+  },
+  { id: 'world', label: 'World', help: 'Grid size, vertical range and the generation seed.' },
+  { id: 'terrain', label: 'Terrain', help: 'Feature parameters fed to the generator.' },
+  {
+    id: 'noise',
+    label: 'Noise field',
+    help: 'The elevation field. Leave the type blank to keep the original value-fBm terrain.',
+  },
+  { id: 'minerals', label: 'Mineralogy', help: 'Relative ore-vein weights (spectroscopy-informed).' },
+  { id: 'weather', label: 'Weather', help: 'Expected events per ~10 game-minutes. 0 disables.' },
+  { id: 'palette', label: 'Palette', help: 'Sky colours and the per-channel terrain tint.' },
+];
+
+export const BODY_FIELDS: BodyField[] = [
+  { path: 'id', label: 'Id', kind: 'text', group: 'identity', help: 'Stable key used by saves and the backend.' },
+  { path: 'name', label: 'Name', kind: 'text', group: 'identity' },
+  {
+    path: 'type',
+    label: 'Type',
+    kind: 'select',
+    group: 'identity',
+    options: BODY_TYPES.map((t) => ({ value: t, label: t })),
+  },
+  {
+    path: 'kind',
+    label: 'Kind (preset)',
+    kind: 'select',
+    group: 'identity',
+    options: [{ value: '', label: '— none —' }, ...listBodyKinds().map((k) => ({ value: k.id, label: k.label }))],
+    help: 'Which world/kinds.js preset this was instantiated from, if any — informational, and gates biome choices.',
+  },
+  { path: 'description', label: 'Description', kind: 'longtext', group: 'identity' },
+
+  { path: 'gravity', label: 'Gravity', kind: 'number', group: 'physics', min: 0.01, max: 25, step: 0.01, unit: 'm/s²', help: 'Scales fall damage and landing fuel.' },
+  { path: 'solarFlux', label: 'Solar flux', kind: 'number', group: 'physics', min: 0, max: 2, step: 0.01, help: 'Relative to Earth orbit; scales solar charge rate.' },
+  { path: 'dayLength', label: 'Day length', kind: 'number', group: 'physics', min: 0, max: 3000, step: 10, unit: 's', help: '0 = permanent daylight.' },
+  { path: 'deltaV', label: 'Delta-v', kind: 'number', group: 'physics', min: 0, max: 200, step: 1, help: 'Fuel needed to reach and land here.' },
+
+  { path: 'climate.temperature', label: 'Temperature', kind: 'number', group: 'climate', min: -250, max: 100, step: 1, unit: '°C', help: 'Gameplay-scaled mean surface temperature.' },
+  { path: 'climate.tempVariance', label: 'Temp. variance', kind: 'number', group: 'climate', min: 0, max: 1, step: 0.01, help: 'How much it swings pole-to-equator — spreads biomes across chunks.' },
+
+  { path: 'size', label: 'Map size', kind: 'number', group: 'world', min: MIN_BODY_SIZE, max: MAX_BODY_SIZE, step: 8, unit: 'voxels', affectsTerrain: true },
+  { path: 'maxHeight', label: 'Max height', kind: 'number', group: 'world', min: 4, max: 40, step: 1, unit: 'voxels', affectsTerrain: true },
+  { path: 'seed', label: 'Seed', kind: 'number', group: 'world', min: 0, max: 999999, step: 1, affectsTerrain: true },
+  { path: 'dem', label: 'DEM patch', kind: 'text', group: 'world', affectsTerrain: true, help: 'Embedded real-elevation patch id (mars-jezero, moon-imbrium). Blank = fully procedural.' },
+
+  { path: 'terrain.roughness', label: 'Roughness', kind: 'number', group: 'terrain', min: 0, max: 1, step: 0.01, affectsTerrain: true, help: 'Noise frequency and vertical amplitude.' },
+  { path: 'terrain.craters', label: 'Craters', kind: 'number', group: 'terrain', min: 0, max: 40, step: 1, affectsTerrain: true, help: 'Ignored when a DEM patch supplies real relief.' },
+  { path: 'terrain.iceCaps', label: 'Ice caps', kind: 'number', group: 'terrain', min: 0, max: 1, step: 0.01, affectsTerrain: true, help: 'Fraction of the north/south edges covered in ice.' },
+  { path: 'terrain.oreRichness', label: 'Ore richness', kind: 'number', group: 'terrain', min: 0, max: 1, step: 0.01, affectsTerrain: true },
+  { path: 'terrain.sulfurFields', label: 'Sulfur fields', kind: 'number', group: 'terrain', min: 0, max: 1, step: 0.01, affectsTerrain: true },
+  { path: 'terrain.irregular', label: 'Irregular (rubble pile)', kind: 'boolean', group: 'terrain', affectsTerrain: true, help: 'Carves a noisy radial silhouette with map-edge cliffs.' },
+  { path: 'terrain.biomes', label: 'Chunked biomes', kind: 'boolean', group: 'terrain', affectsTerrain: true, help: 'Divide the surface into seeded chunks, each rolling one biome (see world/biomes.js). Off = the original single skin.' },
+
+  {
+    path: 'terrain.noise.type',
+    label: 'Type',
+    kind: 'select',
+    group: 'noise',
+    affectsTerrain: true,
+    options: [{ value: '', label: '— classic (value fBm) —' }, ...NOISE_TYPES.map((t) => ({ value: t.id, label: t.label }))],
+    help: NOISE_TYPES.map((t) => `${t.label}: ${t.help}`).join(' '),
+  },
+  {
+    path: 'terrain.noise.fractal',
+    label: 'Fractal',
+    kind: 'select',
+    group: 'noise',
+    affectsTerrain: true,
+    options: FRACTAL_KINDS.map((f) => ({ value: f.id, label: f.label })),
+    defaultValue: DEFAULT_NOISE.fractal,
+    help: FRACTAL_KINDS.map((f) => `${f.label}: ${f.help}`).join(' '),
+  },
+  { path: 'terrain.noise.frequency', label: 'Frequency', kind: 'number', group: 'noise', min: 0.005, max: 0.3, step: 0.005, affectsTerrain: true, defaultValue: DEFAULT_NOISE.frequency, help: 'Cycles per tile — higher means smaller features.' },
+  { path: 'terrain.noise.octaves', label: 'Octaves', kind: 'number', group: 'noise', min: 1, max: 8, step: 1, affectsTerrain: true, defaultValue: DEFAULT_NOISE.octaves },
+  { path: 'terrain.noise.lacunarity', label: 'Lacunarity', kind: 'number', group: 'noise', min: 1.2, max: 4, step: 0.1, affectsTerrain: true, defaultValue: DEFAULT_NOISE.lacunarity, help: 'Frequency multiplier per octave.' },
+  { path: 'terrain.noise.gain', label: 'Gain', kind: 'number', group: 'noise', min: 0.1, max: 0.9, step: 0.05, affectsTerrain: true, defaultValue: DEFAULT_NOISE.gain, help: 'Amplitude multiplier per octave.' },
+  { path: 'terrain.noise.warp', label: 'Domain warp', kind: 'number', group: 'noise', min: 0, max: 20, step: 0.5, affectsTerrain: true, defaultValue: DEFAULT_NOISE.warp, help: 'Displaces samples by a second field — erosion-like distortion. 0 = off.' },
+
+  { path: 'minerals.iron', label: 'Iron', kind: 'number', group: 'minerals', min: 0, max: 1, step: 0.01, affectsTerrain: true },
+  { path: 'minerals.copper', label: 'Copper', kind: 'number', group: 'minerals', min: 0, max: 1, step: 0.01, affectsTerrain: true },
+  { path: 'minerals.titanium', label: 'Titanium', kind: 'number', group: 'minerals', min: 0, max: 1, step: 0.01, affectsTerrain: true },
+
+  ...WEATHER_TYPES.map<BodyField>((t) => ({
+    path: `weather.${t}`,
+    label: t.replace(/-/g, ' '),
+    kind: 'number',
+    group: 'weather',
+    min: 0,
+    max: 4,
+    step: 0.1,
+  })),
+
+  { path: 'palette.sky', label: 'Sky (day)', kind: 'color', group: 'palette' },
+  { path: 'palette.skyNight', label: 'Sky (night)', kind: 'color', group: 'palette' },
+  { path: 'palette.tint.0', label: 'Tint R', kind: 'number', group: 'palette', min: 0.4, max: 1.6, step: 0.01 },
+  { path: 'palette.tint.1', label: 'Tint G', kind: 'number', group: 'palette', min: 0.4, max: 1.6, step: 0.01 },
+  { path: 'palette.tint.2', label: 'Tint B', kind: 'number', group: 'palette', min: 0.4, max: 1.6, step: 0.01 },
+];
+
+/** Read a dotted path out of a body def. */
+export function getBodyField(def: BodyDef, path: string): unknown {
+  let cur: unknown = def;
+  for (const key of path.split('.')) {
+    if (cur === null || cur === undefined) return undefined;
+    cur = (cur as Record<string, unknown>)[key];
+  }
+  return cur;
+}
+
+/**
+ * Immutably write a dotted path, creating intermediate objects (arrays where
+ * the next key is numeric). Returns a new BodyDef; the input is untouched.
+ */
+export function setBodyField(def: BodyDef, path: string, value: unknown): BodyDef {
+  const keys = path.split('.');
+  const root = cloneBody(def) as unknown as Record<string, unknown>;
+  let cur = root;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    const next = cur[key];
+    if (Array.isArray(next)) cur[key] = [...next];
+    else if (next && typeof next === 'object') cur[key] = { ...(next as Record<string, unknown>) };
+    else cur[key] = /^\d+$/.test(keys[i + 1]) ? [] : {};
+    cur = cur[key] as Record<string, unknown>;
+  }
+  const last = keys[keys.length - 1];
+  if (value === undefined || value === '') delete cur[last];
+  else cur[last] = value;
+  return root as unknown as BodyDef;
+}
+
+// ── Validation ─────────────────────────────────────────────────────────
+
+export interface BodyValidation {
+  ok: boolean;
+  errors: string[];
+  warnings: string[];
+}
+
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/**
+ * Check a draft against what the generator, renderer and sim actually
+ * require. Errors block generation; warnings are playability hints.
+ */
+export function validateBody(def: BodyDef): BodyValidation {
+  const errors: string[] = [];
+  const warnings: string[] = [];
+  const num = (v: unknown): v is number => typeof v === 'number' && Number.isFinite(v);
+
+  if (!def.id || !/^[a-z0-9][a-z0-9-]*$/.test(def.id)) {
+    errors.push('id must be lowercase letters, digits and dashes');
+  }
+  if (!def.name) errors.push('name is required');
+  if (!BODY_TYPES.includes(def.type)) errors.push(`type must be one of ${BODY_TYPES.join(', ')}`);
+  if (def.climate && (!num(def.climate.temperature) || Number.isNaN(def.climate.temperature))) {
+    errors.push('climate.temperature must be a number');
+  }
+  if (def.climate?.tempVariance !== undefined && (!num(def.climate.tempVariance) || def.climate.tempVariance < 0 || def.climate.tempVariance > 1)) {
+    errors.push('climate.tempVariance must be between 0 and 1');
+  }
+
+  if (!num(def.size) || def.size < MIN_BODY_SIZE || def.size > MAX_BODY_SIZE) {
+    errors.push(`size must be between ${MIN_BODY_SIZE} and ${MAX_BODY_SIZE}`);
+  }
+  if (!num(def.maxHeight) || def.maxHeight < 4 || def.maxHeight > MAX_BODY_HEIGHT) {
+    errors.push(`maxHeight must be between 4 and ${MAX_BODY_HEIGHT}`);
+  }
+  if (!num(def.seed) || def.seed < 0) errors.push('seed must be a non-negative number');
+  if (!num(def.gravity) || def.gravity <= 0) errors.push('gravity must be greater than 0');
+  if (!num(def.solarFlux) || def.solarFlux < 0) errors.push('solarFlux must be 0 or more');
+  if (!num(def.dayLength) || def.dayLength < 0) errors.push('dayLength must be 0 or more');
+  if (!num(def.deltaV) || def.deltaV < 0) errors.push('deltaV must be 0 or more');
+
+  const t = def.terrain;
+  if (!t) errors.push('terrain block is required');
+  else {
+    for (const key of ['roughness', 'iceCaps', 'oreRichness'] as const) {
+      const v = t[key];
+      if (!num(v) || v < 0 || v > 1) errors.push(`terrain.${key} must be between 0 and 1`);
+    }
+    if (t.sulfurFields !== undefined && (!num(t.sulfurFields) || t.sulfurFields < 0 || t.sulfurFields > 1)) {
+      errors.push('terrain.sulfurFields must be between 0 and 1');
+    }
+    if (!num(t.craters) || t.craters < 0) errors.push('terrain.craters must be 0 or more');
+    const n = t.noise;
+    if (n) {
+      if (n.type && !NOISE_TYPES.some((x) => x.id === n.type)) errors.push(`unknown noise type "${n.type}"`);
+      if (n.fractal && !FRACTAL_KINDS.some((x) => x.id === n.fractal)) {
+        errors.push(`unknown fractal "${n.fractal}"`);
+      }
+      if (n.frequency !== undefined && (!num(n.frequency) || n.frequency <= 0)) {
+        errors.push('terrain.noise.frequency must be greater than 0');
+      }
+      if (n.octaves !== undefined && (!num(n.octaves) || n.octaves < 1 || n.octaves > 12)) {
+        errors.push('terrain.noise.octaves must be between 1 and 12');
+      }
+      if (n.warp !== undefined && (!num(n.warp) || n.warp < 0)) errors.push('terrain.noise.warp must be 0 or more');
+      if (n.type === 'blue' || n.type === 'white') {
+        warnings.push(`${n.type} noise has no smooth relief — expect a spiky, dithered heightfield`);
+      }
+      if ((n.octaves ?? 4) > 6) warnings.push('more than 6 octaves costs generation time for detail you cannot see');
+    }
+    const bands = t.bands;
+    if (bands) {
+      bands.forEach((band, i) => {
+        const label = band.label ? `"${band.label}"` : `#${i}`;
+        if (!num(band.from) || band.from < 0 || band.from > 1) {
+          errors.push(`terrain.bands[${label}].from must be between 0 and 1`);
+        }
+        if (!num(band.to) || band.to < 0 || band.to > 1) {
+          errors.push(`terrain.bands[${label}].to must be between 0 and 1`);
+        }
+        if (num(band.from) && num(band.to) && band.from > band.to) {
+          errors.push(`terrain.bands[${label}].from must not be greater than .to`);
+        }
+        const total = Object.values(band.minerals ?? {}).reduce((sum, w) => sum + (num(w) ? w : 0), 0);
+        if (total <= 0) errors.push(`terrain.bands[${label}] needs at least one mineral with a positive weight`);
+      });
+      for (let i = 1; i < bands.length; i++) {
+        if (bands[i].from < bands[i - 1].to) warnings.push('terrain.bands overlap — the earlier band always wins the overlap');
+      }
+      const covered = bands.reduce((sum, b) => sum + Math.max(0, b.to - b.from), 0);
+      if (covered < 0.99) warnings.push('terrain.bands leave depth uncovered — those voxels fall back to the default mineral mix');
+    }
+  }
+
+  if (!def.palette || !HEX.test(def.palette.sky ?? '')) errors.push('palette.sky must be a hex colour');
+  if (!def.palette || !HEX.test(def.palette.skyNight ?? '')) errors.push('palette.skyNight must be a hex colour');
+  const tint = def.palette?.tint;
+  if (tint && (tint.length !== 3 || tint.some((c) => !num(c) || c < 0))) {
+    errors.push('palette.tint must be three non-negative numbers');
+  }
+
+  // Warnings — legal, but they make for a poor mission.
+  if (def.size > 128) warnings.push('maps above 128 voxels get slow to generate and to drive across');
+  if (def.maxHeight > 30) warnings.push('very tall worlds make the isometric view crowded');
+  if (t && t.oreRichness === 0) warnings.push('ore richness is 0 — nothing to mine but surface material');
+  if (t && t.roughness > 0.9) warnings.push('roughness above 0.9 leaves few drivable routes');
+  if (t?.irregular && def.size > 96) warnings.push('irregular worlds read best small (Bennu is 56)');
+  const mins = def.minerals;
+  if (mins && (mins.iron ?? 0) + (mins.copper ?? 0) + (mins.titanium ?? 0) === 0) {
+    warnings.push('all mineral weights are 0 — veins fall back to an even split');
+  }
+  if (def.dayLength === 0) warnings.push('dayLength 0 means permanent daylight — solar rovers never run dry');
+  if (def.weather && Object.values(def.weather).every((v) => !v)) {
+    warnings.push('no weather events configured — the surface will feel static');
+  }
+  if (t?.biomes && !def.climate) {
+    warnings.push('terrain.biomes is on with no climate set — chunks roll from every registered biome, including climate-locked ones');
+  }
+
+  return { ok: errors.length === 0, errors, warnings };
+}
+
+/** Ids already taken by the built-in catalog. */
+export function builtinBodyIds(): string[] {
+  return BODIES.map((b) => b.id);
+}
+
+// ── Import / export ────────────────────────────────────────────────────
+
+/**
+ * Parse untrusted JSON into a BodyDef, filling defaults for anything absent.
+ * Returns the coerced draft plus validation, so an importer can show problems
+ * instead of throwing.
+ */
+export function parseBodyJson(text: string): { body: BodyDef | null; validation: BodyValidation } {
+  let raw: unknown;
+  try {
+    raw = JSON.parse(text);
+  } catch (err) {
+    return { body: null, validation: { ok: false, errors: [`not valid JSON: ${(err as Error).message}`], warnings: [] } };
+  }
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    return { body: null, validation: { ok: false, errors: ['expected a JSON object'], warnings: [] } };
+  }
+  const body = createBodyDraft(raw as Partial<BodyDef>);
+  return { body, validation: validateBody(body) };
+}
+
+/** Stable JSON for saving a draft or pasting into `pocketbase/seed`. */
+export function bodyToJson(def: BodyDef): string {
+  return JSON.stringify(def, null, 2);
+}
+
+/**
+ * A TypeScript object literal ready to paste into `world/bodies.ts`.
+ * Keys stay in the same order the built-in catalog uses.
+ */
+export function bodyToTypeScript(def: BodyDef): string {
+  const lines: string[] = ['{'];
+  const push = (key: string, value: string) => lines.push(`  ${key}: ${value},`);
+  const str = (v: string) => JSON.stringify(v);
+  push('id', str(def.id));
+  push('name', str(def.name));
+  push('type', str(def.type));
+  push('gravity', String(def.gravity));
+  push('solarFlux', String(def.solarFlux));
+  push('dayLength', String(def.dayLength));
+  push('deltaV', String(def.deltaV));
+  push('size', String(def.size));
+  push('maxHeight', String(def.maxHeight));
+  push('seed', String(def.seed));
+  const tint = def.palette.tint ? `, tint: [${def.palette.tint.join(', ')}]` : '';
+  push('palette', `{ sky: ${str(def.palette.sky)}, skyNight: ${str(def.palette.skyNight)}${tint} }`);
+  push('terrain', `{ ${entries(def.terrain)} }`);
+  if (def.dem) push('dem', str(def.dem));
+  if (def.minerals && Object.keys(def.minerals).length > 0) push('minerals', `{ ${entries(def.minerals)} }`);
+  if (def.weather && Object.keys(def.weather).length > 0) {
+    const w = Object.entries(def.weather)
+      .filter(([, v]) => typeof v === 'number' && v > 0)
+      .map(([k, v]) => `${str(k)}: ${v}`)
+      .join(', ');
+    if (w) push('weather', `{ ${w} }`);
+  }
+  push('description', str(def.description));
+  lines.push('}');
+  return lines.join('\n');
+}
+
+function entries(obj: Record<string, unknown>): string {
+  return Object.entries(obj)
+    .filter(([, v]) => v !== undefined)
+    .map(([k, v]) => `${k}: ${typeof v === 'number' || typeof v === 'boolean' ? v : JSON.stringify(v)}`)
+    .join(', ');
+}
diff --git a/packages/engine/src/world/biomes.ts b/packages/engine/src/world/biomes.ts
new file mode 100644
index 0000000..dd814a2
--- /dev/null
+++ b/packages/engine/src/world/biomes.ts
@@ -0,0 +1,195 @@
+import { Material, type BodyDef } from '../types.js';
+import { hash2 } from '../util/rng.js';
+import { allowedBiomesForKind } from './kinds.js';
+
+/**
+ * Simple, chunk-scale biomes: the surface skin every shipped body has always
+ * painted (a single organic patch pattern of two or three materials) split
+ * into named, registered variants and assigned per-chunk instead of
+ * per-body. A biome only dresses the top couple of surface voxels — ore
+ * veins and depth strata stay `OreBand`'s job (`terrain.bands`), so the two
+ * "layers" (a surface skin, a mineral economy underneath) stay independent
+ * and composable.
+ *
+ * Purely additive and opt-in: a body only gets chunked biomes when its
+ * `terrain.biomes` flag is set (`world/terrain.js`); every shipped body
+ * keeps its original single-skin generation byte-identical.
+ */
+
+/** Region size, in voxels, that rolls one biome. */
+export const CHUNK_SIZE = 16;
+
+export interface Biome {
+  id: string;
+  label: string;
+  help: string;
+  /** Top-voxel material(s); a chunk picks among these by internal patch noise for texture, not one flat colour. */
+  surface: Material[];
+  /** Materials for the shallow subsurface (roughly the next 2 voxels down). Defaults to `surface`. */
+  subsurface?: Material[];
+  /** Inclusive gameplay-scaled °C range this biome may roll in. Absent = climate-agnostic, always eligible. */
+  climate?: { min: number; max: number };
+  /** Per-channel RGB multiplier layered on top of the body's own `palette.tint` for this biome's chunks. */
+  tint?: [number, number, number];
+}
+
+const registered = new Map<string, Biome>();
+const BUILTIN_BIOME_IDS = new Set<string>();
+
+function define(biome: Biome): void {
+  registered.set(biome.id, biome);
+  BUILTIN_BIOME_IDS.add(biome.id);
+}
+
+define({
+  id: 'dust-basin',
+  label: 'Dust basin',
+  help: 'Fine wind-blown dust filling low ground — the default airless-body skin.',
+  surface: [Material.Dust],
+  subsurface: [Material.Regolith],
+});
+
+define({
+  id: 'redrock-desert',
+  label: 'Redrock desert',
+  help: 'Oxidised regolith and drifted dust — Mars-flavoured.',
+  surface: [Material.Regolith, Material.Dust],
+  tint: [1.08, 0.85, 0.72],
+});
+
+define({
+  id: 'crater-highlands',
+  label: 'Crater highlands',
+  help: 'Rockier, older terrain — impact-churned rubble instead of settled dust.',
+  surface: [Material.Rock, Material.Regolith],
+});
+
+define({
+  id: 'frozen-tundra',
+  label: 'Frozen tundra',
+  help: 'Snow-crusted ground, cold enough that dust freezes rather than drifts.',
+  surface: [Material.Snow, Material.Regolith],
+  subsurface: [Material.Ice, Material.Regolith],
+  climate: { min: -999, max: -10 },
+});
+
+define({
+  id: 'grassland-plains',
+  label: 'Grassland plains',
+  help: 'Open, temperate ground cover — needs a breathable-coded, mild world.',
+  surface: [Material.Grass],
+  climate: { min: 0, max: 32 },
+});
+
+define({
+  id: 'temperate-forest',
+  label: 'Temperate forest',
+  help: 'Grass broken by exposed rock — the shipped renderer has no trees yet, so this reads as scrubland.',
+  surface: [Material.Grass, Material.Rock],
+  climate: { min: -5, max: 26 },
+});
+
+define({
+  id: 'icefield',
+  label: 'Icefield',
+  help: 'Solid ice sheet, cracked and wind-scoured.',
+  surface: [Material.Ice, Material.Snow],
+});
+
+define({
+  id: 'cryovolcanic',
+  label: 'Cryovolcanic',
+  help: 'Ice fractured by sulfur-stained cryovolcanic vents.',
+  surface: [Material.Ice, Material.Sulfur],
+});
+
+define({
+  id: 'carbonaceous-rubble',
+  label: 'Carbonaceous rubble',
+  help: 'Dark, volatile-rich rubble pile — Bennu/Ceres-flavoured.',
+  surface: [Material.Basalt, Material.Dust],
+});
+
+define({
+  id: 'metallic-regolith',
+  label: 'Metallic regolith',
+  help: 'Dust and rubble with a metallic sheen from a nickel-iron-rich body — ore stays vein-only, this is just the skin.',
+  surface: [Material.Regolith, Material.Rock],
+  tint: [0.9, 0.92, 0.98],
+});
+
+define({
+  id: 'cloud-platform',
+  label: 'Cloud platform',
+  help: 'A storm-grey floating platform world — the gas-giant "surface" TakeOn represents.',
+  surface: [Material.Basalt, Material.Rock],
+  tint: [0.85, 0.87, 1.02],
+});
+
+/** Add or replace a biome at runtime. */
+export function registerBiome(biome: Biome): Biome {
+  registered.set(biome.id, biome);
+  return biome;
+}
+
+/** Remove a runtime-registered biome. Built-ins are never removed, only shadowed by `registerBiome`. */
+export function unregisterBiome(id: string): boolean {
+  if (BUILTIN_BIOME_IDS.has(id)) return false;
+  return registered.delete(id);
+}
+
+export function getBiome(id: string): Biome | undefined {
+  return registered.get(id);
+}
+
+export function listBiomes(): Biome[] {
+  return [...registered.values()];
+}
+
+/** Which chunk a voxel column belongs to. */
+export function chunkCoords(x: number, y: number): { cx: number; cy: number } {
+  return { cx: Math.floor(x / CHUNK_SIZE), cy: Math.floor(y / CHUNK_SIZE) };
+}
+
+/**
+ * Deterministic biome pick for one chunk: gated by the body's `kind` (via
+ * `allowedBiomesForKind`) and, if the body carries `climate`, by a per-chunk
+ * temperature sampled around `climate.temperature` — swung by
+ * `climate.tempVariance` so a single body can roll several climate-
+ * compatible biomes across its chunks rather than one uniform one.
+ * Always returns a biome; a pool that ends up empty (a typo'd kind allow-
+ * list, a climate nothing fits) falls back to the full registry rather than
+ * throwing.
+ */
+export function chunkBiome(body: BodyDef, cx: number, cy: number, seed: number): Biome {
+  const allowed = body.kind ? allowedBiomesForKind(body.kind) : undefined;
+  let pool = allowed
+    ? (allowed.map((id) => registered.get(id)).filter((b): b is Biome => b != null))
+    : [...registered.values()];
+  if (pool.length === 0) pool = [...registered.values()];
+
+  const climate = body.climate;
+  if (climate) {
+    const swing = (climate.tempVariance ?? 0.5) * 60;
+    const t = climate.temperature + (hash2(cx, cy, seed + 401) * 2 - 1) * swing;
+    const fits = pool.filter((b) => !b.climate || (t >= b.climate.min && t <= b.climate.max));
+    if (fits.length > 0) pool = fits;
+  }
+
+  const sorted = [...pool].sort((a, b) => a.id.localeCompare(b.id));
+  const idx = Math.min(sorted.length - 1, Math.floor(hash2(cx, cy, seed + 977) * sorted.length));
+  return sorted[idx];
+}
+
+/** Biome for the chunk containing voxel column (x, y). */
+export function biomeAt(body: BodyDef, x: number, y: number, seed: number): Biome {
+  const { cx, cy } = chunkCoords(x, y);
+  return chunkBiome(body, cx, cy, seed);
+}
+
+/** Pick among a biome's material list by a 0..1 texture value (from the existing surface-patch noise). */
+export function pickBiomeMaterial(materials: Material[], t: number): Material {
+  if (materials.length === 0) return Material.Regolith;
+  const idx = Math.min(materials.length - 1, Math.max(0, Math.floor(t * materials.length)));
+  return materials[idx];
+}
diff --git a/packages/engine/src/world/bodies.ts b/packages/engine/src/world/bodies.ts
index 2d62d69..8719760 100644
--- a/packages/engine/src/world/bodies.ts
+++ b/packages/engine/src/world/bodies.ts
@@ -115,8 +115,107 @@ export const BODIES: BodyDef[] = [
     weather: { 'solar-storm': 1.3, 'meteor-shower': 1.5 },
     description: 'Volcanic and sulfur-stained. Steep terrain chews through durability.',
   },
+
+  // The five below showcase world/kinds.js + world/biomes.js: each carries a
+  // `kind` (a preset from the inheritance tree), `climate` (what a host game
+  // would hand in), and `terrain.biomes: true` — a grid of independently-
+  // seeded chunks, each rolling one biome gated by both. Every body above
+  // this line predates that system and keeps its original single-skin
+  // generation untouched.
+  {
+    id: 'terra',
+    name: 'Terra',
+    type: 'planet',
+    kind: 'earth-like',
+    gravity: 9.8,
+    solarFlux: 1,
+    dayLength: 480,
+    deltaV: 20,
+    size: 128,
+    maxHeight: 16,
+    seed: 2024,
+    palette: { sky: '#6fa8dc', skyNight: '#0b1a3a', tint: [1, 1.02, 0.98] },
+    climate: { temperature: 14, tempVariance: 0.55 },
+    terrain: { roughness: 0.35, craters: 1, iceCaps: 0.12, oreRichness: 0.2, biomes: true },
+    minerals: { iron: 0.4, copper: 0.35, titanium: 0.25 },
+    weather: {},
+    description: 'A temperate, breathable-coded world. Grassland, forest and tundra spread across seeded chunks instead of one uniform skin.',
+  },
+  {
+    id: 'kepler-rust',
+    name: 'Kepler Rust',
+    type: 'planet',
+    kind: 'rocky-planet',
+    gravity: 4.2,
+    solarFlux: 0.4,
+    dayLength: 540,
+    deltaV: 58,
+    size: 112,
+    maxHeight: 18,
+    seed: 3141,
+    palette: { sky: '#b85c38', skyNight: '#1c0f1f', tint: [1.05, 0.88, 0.78] },
+    climate: { temperature: -45, tempVariance: 0.6 },
+    terrain: { roughness: 0.6, craters: 7, iceCaps: 0.15, oreRichness: 0.4, biomes: true },
+    minerals: { iron: 0.55, copper: 0.25, titanium: 0.2 },
+    weather: { 'dust-devil': 1.8, 'dust-storm': 0.5, 'meteor-shower': 0.4 },
+    description: 'A rustier, colder cousin of Mars. Redrock desert, crater highlands and polar tundra, by chunk.',
+  },
+  {
+    id: 'frostmoon',
+    name: 'Frostmoon',
+    type: 'moon',
+    kind: 'ice-moon',
+    gravity: 1.2,
+    solarFlux: 0.12,
+    dayLength: 900,
+    deltaV: 78,
+    size: 96,
+    maxHeight: 12,
+    seed: 733,
+    palette: { sky: '#274b8f', skyNight: '#0a1230', tint: [0.8, 0.94, 1.1] },
+    climate: { temperature: -170, tempVariance: 0.25 },
+    terrain: { roughness: 0.3, craters: 2, iceCaps: 0.9, oreRichness: 0.3, sulfurFields: 0.15, biomes: true },
+    weather: { 'cryo-fog': 1.8, 'meteor-shower': 0.3 },
+    description: 'Another ice-shelled moon. Icefield and sulfur-stained cryovolcanic vents split by chunk.',
+  },
+  {
+    id: 'ironrock',
+    name: 'Ironrock',
+    type: 'asteroid',
+    kind: 'm-type-asteroid',
+    gravity: 0.32,
+    solarFlux: 0.18,
+    dayLength: 190,
+    deltaV: 60,
+    size: 72,
+    maxHeight: 12,
+    seed: 5150,
+    palette: { sky: '#39306b', skyNight: '#0e0b26', tint: [0.9, 0.9, 0.95] },
+    climate: { temperature: -85, tempVariance: 0.15 },
+    terrain: { roughness: 0.55, craters: 4, iceCaps: 0, oreRichness: 0.75, irregular: true, biomes: true },
+    minerals: { iron: 0.62, copper: 0.13, titanium: 0.25 },
+    weather: { 'solar-storm': 0.8, 'meteor-shower': 1.2 },
+    description: 'A nickel-iron-rich M-type — the richest ore in this catalog, metallic-sheened regolith on top.',
+  },
+  {
+    id: 'skyhaven',
+    name: 'Skyhaven',
+    type: 'gaseous',
+    kind: 'gaseous',
+    gravity: 22,
+    solarFlux: 0.1,
+    dayLength: 300,
+    deltaV: 95,
+    size: 96,
+    maxHeight: 10,
+    seed: 8080,
+    palette: { sky: '#8892b0', skyNight: '#1a1c2e', tint: [0.85, 0.87, 1.02] },
+    climate: { temperature: -140, tempVariance: 0.3 },
+    terrain: { roughness: 0.15, craters: 0, iceCaps: 0, oreRichness: 0.15, biomes: true },
+    weather: { 'dust-storm': 2.5, 'solar-storm': 1 },
+    description: 'Not a landing in reality — TakeOn plays a gas giant as a storm-lashed cloud platform, its gameplay "surface".',
+  },
 ];
 
-export function getBody(id: string): BodyDef | undefined {
-  return BODIES.find((b) => b.id === id);
-}
+// `getBody` lives in ./registry.ts so runtime-registered bodies (editor
+// drafts, backend rows) can shadow these built-ins.
diff --git a/packages/engine/src/world/kinds.ts b/packages/engine/src/world/kinds.ts
new file mode 100644
index 0000000..a3c7c07
--- /dev/null
+++ b/packages/engine/src/world/kinds.ts
@@ -0,0 +1,262 @@
+import type { BodyDef } from '../types.js';
+
+/**
+ * Body **kinds**: an inheritable preset tree above `BodyDef`. `BodyType`
+ * ('planet'/'moon'/'asteroid'/'gaseous') is the coarse category gameplay
+ * branches on; a *kind* is a specialisation of one ('earth-like', 'ice-moon',
+ * 'c-type-asteroid', …) that bundles the physics/palette/weather/climate
+ * defaults for that flavour of body, inheriting from its parent kind so a
+ * host only overrides what's actually different.
+ *
+ * This is the seam for "landscapes inherit from parent types, and a host
+ * game hands in real planetary properties" — `instantiateBody()` (in
+ * `world/authoring.js`, which owns draft-building) resolves a kind's full
+ * ancestry into defaults, then layers the host's own overrides (a real
+ * temperature reading, a chosen seed, an id) on top to produce a concrete,
+ * generatable `BodyDef`.
+ */
+
+/** The mergeable subset of `BodyDef` a kind can default. Never `id`/`name`/`seed` — those are always the instantiator's job. */
+export type BodyKindDefaults = Partial<Omit<BodyDef, 'id' | 'name' | 'seed' | 'kind' | 'terrain'>> & {
+  terrain?: Partial<BodyDef['terrain']>;
+};
+
+export interface BodyKind {
+  id: string;
+  label: string;
+  /** Parent kind id to inherit defaults from; absent = a root kind. */
+  parent?: string;
+  help: string;
+  defaults: BodyKindDefaults;
+  /**
+   * Biome ids (`world/biomes.js`) chunks of this kind may roll when
+   * `terrain.biomes` is on. Absent = any registered biome is eligible.
+   */
+  allowedBiomes?: string[];
+}
+
+const registered = new Map<string, BodyKind>();
+const BUILTIN_KIND_IDS = new Set<string>();
+
+function define(kind: BodyKind): void {
+  registered.set(kind.id, kind);
+  BUILTIN_KIND_IDS.add(kind.id);
+}
+
+define({
+  id: 'body',
+  label: 'Generic body',
+  help: 'Root of the kind tree — no opinions of its own.',
+  defaults: {},
+});
+
+// ── Planets ──────────────────────────────────────────────────────────────
+
+define({
+  id: 'planet',
+  parent: 'body',
+  label: 'Planet',
+  help: 'A gravitationally-rounded world with a real day/night cycle.',
+  defaults: { type: 'planet', dayLength: 500, terrain: { roughness: 0.55, craters: 5, iceCaps: 0.1, oreRichness: 0.4 } },
+});
+
+define({
+  id: 'rocky-planet',
+  parent: 'planet',
+  label: 'Rocky planet',
+  help: 'Bare regolith/basalt world, no atmosphere to speak of — Mars-like.',
+  defaults: {
+    gravity: 3.7,
+    solarFlux: 0.5,
+    climate: { temperature: -60, tempVariance: 0.5 },
+    weather: { 'dust-devil': 1.5, 'dust-storm': 0.6 },
+  },
+  allowedBiomes: ['redrock-desert', 'crater-highlands', 'dust-basin', 'frozen-tundra'],
+});
+
+define({
+  id: 'earth-like',
+  parent: 'planet',
+  label: 'Earth-like',
+  help: 'Temperate, breathable-coded world — the odd one out with green biomes.',
+  defaults: {
+    gravity: 9.8,
+    solarFlux: 1,
+    climate: { temperature: 14, tempVariance: 0.6 },
+    weather: {},
+    terrain: { oreRichness: 0.25 },
+  },
+  allowedBiomes: ['grassland-plains', 'temperate-forest', 'frozen-tundra', 'redrock-desert'],
+});
+
+// ── Gas giants ───────────────────────────────────────────────────────────
+
+define({
+  id: 'gaseous',
+  parent: 'body',
+  label: 'Gas giant',
+  help:
+    'No solid surface in reality; TakeOn represents it as a flat, storm-lashed cloud-platform ' +
+    'world (a floating station or cloud-city scene), not literal atmosphere physics.',
+  defaults: {
+    type: 'gaseous',
+    gravity: 22,
+    solarFlux: 0.1,
+    dayLength: 300,
+    climate: { temperature: -140, tempVariance: 0.3 },
+    weather: { 'dust-storm': 2.5, 'solar-storm': 1 },
+    terrain: { roughness: 0.15, craters: 0, iceCaps: 0, oreRichness: 0.15 },
+  },
+  allowedBiomes: ['cloud-platform'],
+});
+
+// ── Moons ────────────────────────────────────────────────────────────────
+
+define({
+  id: 'moon',
+  parent: 'body',
+  label: 'Moon',
+  help: 'A smaller, usually airless satellite world.',
+  defaults: { type: 'moon', dayLength: 650, terrain: { roughness: 0.4, craters: 8, oreRichness: 0.35 } },
+});
+
+define({
+  id: 'rocky-moon',
+  parent: 'moon',
+  label: 'Rocky moon',
+  help: 'Cratered, airless regolith — our own Moon.',
+  defaults: {
+    gravity: 1.6,
+    solarFlux: 1,
+    climate: { temperature: -50, tempVariance: 0.7 },
+    weather: { 'solar-storm': 0.9, 'meteor-shower': 1.1 },
+  },
+  allowedBiomes: ['crater-highlands', 'dust-basin', 'metallic-regolith'],
+});
+
+define({
+  id: 'ice-moon',
+  parent: 'moon',
+  label: 'Ice moon',
+  help: 'Fractured ice shell over a hidden ocean — Europa-like.',
+  defaults: {
+    gravity: 1.3,
+    solarFlux: 0.14,
+    climate: { temperature: -160, tempVariance: 0.2 },
+    weather: { 'cryo-fog': 1.6, 'meteor-shower': 0.4 },
+    terrain: { iceCaps: 0.85, roughness: 0.3, craters: 2 },
+  },
+  allowedBiomes: ['icefield', 'cryovolcanic'],
+});
+
+// ── Asteroids ────────────────────────────────────────────────────────────
+
+define({
+  id: 'asteroid',
+  parent: 'body',
+  label: 'Asteroid',
+  help: 'Small, irregular, low-gravity rubble pile.',
+  defaults: {
+    type: 'asteroid',
+    dayLength: 220,
+    gravity: 0.28,
+    solarFlux: 0.15,
+    terrain: { irregular: true, roughness: 0.5, craters: 3, iceCaps: 0, oreRichness: 0.5 },
+  },
+});
+
+define({
+  id: 'c-type-asteroid',
+  parent: 'asteroid',
+  label: 'C-type asteroid',
+  help: 'Carbonaceous — dark, volatile-rich rubble (Ceres/Bennu-like).',
+  defaults: { climate: { temperature: -100, tempVariance: 0.1 }, minerals: { iron: 0.4, copper: 0.35, titanium: 0.25 } },
+  allowedBiomes: ['carbonaceous-rubble', 'icefield'],
+});
+
+define({
+  id: 'm-type-asteroid',
+  parent: 'asteroid',
+  label: 'M-type asteroid',
+  help: 'Metallic — nickel-iron rich, the richest ore veins in the belt.',
+  defaults: {
+    climate: { temperature: -80, tempVariance: 0.1 },
+    terrain: { oreRichness: 0.7 },
+    minerals: { iron: 0.6, copper: 0.15, titanium: 0.25 },
+  },
+  allowedBiomes: ['metallic-regolith'],
+});
+
+define({
+  id: 's-type-asteroid',
+  parent: 'asteroid',
+  label: 'S-type asteroid',
+  help: 'Silicaceous/stony — the middle ground between C and M types.',
+  defaults: { climate: { temperature: -90, tempVariance: 0.1 }, minerals: { iron: 0.45, copper: 0.3, titanium: 0.25 } },
+  allowedBiomes: ['carbonaceous-rubble', 'metallic-regolith'],
+});
+
+/** Add or replace a kind at runtime. Built-ins can be shadowed but not removed (see `unregisterBodyKind`). */
+export function registerBodyKind(kind: BodyKind): BodyKind {
+  registered.set(kind.id, kind);
+  return kind;
+}
+
+/** Remove a runtime-registered kind. Built-ins are never removed, only shadowed by `registerBodyKind`. */
+export function unregisterBodyKind(id: string): boolean {
+  if (BUILTIN_KIND_IDS.has(id)) return false;
+  return registered.delete(id);
+}
+
+export function getBodyKind(id: string): BodyKind | undefined {
+  return registered.get(id);
+}
+
+export function listBodyKinds(): BodyKind[] {
+  return [...registered.values()];
+}
+
+/** Root-to-leaf ancestry of a kind (inclusive); `[]` for an unknown id or a cycle. */
+export function bodyKindChain(id: string): BodyKind[] {
+  const chain: BodyKind[] = [];
+  const seen = new Set<string>();
+  let cur = registered.get(id);
+  while (cur && !seen.has(cur.id)) {
+    seen.add(cur.id);
+    chain.unshift(cur);
+    cur = cur.parent ? registered.get(cur.parent) : undefined;
+  }
+  return chain;
+}
+
+/** Merge a kind's defaults down its ancestry, root first so the leaf kind wins conflicts. */
+export function resolveBodyKind(id: string): BodyKindDefaults {
+  let merged: BodyKindDefaults = {};
+  for (const kind of bodyKindChain(id)) merged = mergeDefaults(merged, kind.defaults);
+  return merged;
+}
+
+/** Biome ids allowed for a kind, walking up to the nearest ancestor that declares any. `undefined` = unrestricted. */
+export function allowedBiomesForKind(id: string): string[] | undefined {
+  const chain = bodyKindChain(id);
+  for (let i = chain.length - 1; i >= 0; i--) {
+    if (chain[i].allowedBiomes) return chain[i].allowedBiomes;
+  }
+  return undefined;
+}
+
+/**
+ * Merge two default patches, deep-merging the nested objects (leaf/`patch`
+ * wins per field). Careful not to assign an explicit `key: undefined` when
+ * neither side sets it — `createBodyDraft`'s `Object.assign` would then
+ * clobber its own default with `undefined` instead of leaving it alone.
+ */
+export function mergeDefaults(base: BodyKindDefaults, patch: BodyKindDefaults): BodyKindDefaults {
+  const out: BodyKindDefaults = { ...base, ...patch };
+  for (const key of ['palette', 'terrain', 'minerals', 'weather', 'climate'] as const) {
+    const merged = { ...(base[key] as object | undefined), ...(patch[key] as object | undefined) };
+    if (Object.keys(merged).length > 0) (out as Record<string, unknown>)[key] = merged;
+    else delete (out as Record<string, unknown>)[key];
+  }
+  return out;
+}
diff --git a/packages/engine/src/world/layers.ts b/packages/engine/src/world/layers.ts
new file mode 100644
index 0000000..031c1dc
--- /dev/null
+++ b/packages/engine/src/world/layers.ts
@@ -0,0 +1,42 @@
+import type { BodyDef } from '../types.js';
+import type { VoxelWorld } from './world.js';
+
+/**
+ * Extension seam for additional world **layers** — an explorable underground
+ * cave grid, a sky/atmosphere layer, whatever a module built on top of
+ * TakeOn wants — without forking core generation.
+ *
+ * TakeOn ships zero registered layers: mining stays exactly what it is today
+ * (top-down, deposits and ice via `OreBand`/icy terrain — see
+ * `world/terrain.js`), and every body generates unaffected. A layer
+ * generator is opaque data as far as core is concerned — it's attached to
+ * `VoxelWorld.layers` by id after the surface world finishes generating, and
+ * it's the registering module's own job to interpret it (sim state, a
+ * renderer, entry/exit rules). Because generation stays a pure function of
+ * `(body, seed)`, a deterministic generator needs no persistence of its own
+ * — regenerating the world regenerates the layer identically, the same
+ * guarantee the surface world already relies on.
+ */
+export type LayerGenerator<T = unknown> = (body: BodyDef, seed: number, world: VoxelWorld) => T;
+
+const generators = new Map<string, LayerGenerator>();
+
+/** Register a layer generator, run once per `generateTerrain()` call after the surface world is built. */
+export function registerWorldLayer<T>(id: string, generate: LayerGenerator<T>): void {
+  generators.set(id, generate as LayerGenerator);
+}
+
+export function unregisterWorldLayer(id: string): boolean {
+  return generators.delete(id);
+}
+
+export function listWorldLayerIds(): string[] {
+  return [...generators.keys()];
+}
+
+/** Run every registered generator against a freshly-built world, attaching results to `world.layers`. Called by `generateTerrain`. */
+export function runWorldLayers(body: BodyDef, seed: number, world: VoxelWorld): void {
+  for (const [id, generate] of generators) {
+    world.layers[id] = generate(body, seed, world);
+  }
+}
diff --git a/packages/engine/src/world/materials.ts b/packages/engine/src/world/materials.ts
index 336b8c9..c022e35 100644
--- a/packages/engine/src/world/materials.ts
+++ b/packages/engine/src/world/materials.ts
@@ -102,6 +102,30 @@ export const MATERIALS: Record<Material, MaterialDef> = {
     colors: ['#f6d743', '#c9ad2e', '#9c8722'],
     jitter: 0.1,
   },
+  [Material.Grass]: {
+    id: Material.Grass,
+    name: 'Grass',
+    hardness: 1,
+    yields: { resource: 'regolith', amount: 1 },
+    colors: ['#7ec850', '#5a9c3a', '#3f7228'],
+    jitter: 0.06,
+  },
+  [Material.Sand]: {
+    id: Material.Sand,
+    name: 'Sand',
+    hardness: 1,
+    yields: { resource: 'silica', amount: 1 },
+    colors: ['#e8c77e', '#c9a35c', '#a37f42'],
+    jitter: 0.05,
+  },
+  [Material.Snow]: {
+    id: Material.Snow,
+    name: 'Snow',
+    hardness: 1,
+    yields: { resource: 'ice', amount: 1 },
+    colors: ['#f4f9ff', '#d6e6f2', '#b3cfe0'],
+    jitter: 0.03,
+  },
 };
 
 export const RESOURCE_NAMES: Record<ResourceKey, string> = {
@@ -119,3 +143,45 @@ export const RESOURCE_NAMES: Record<ResourceKey, string> = {
   water: 'Water',
   alloy: 'Ti-alloy',
 };
+
+/**
+ * Runtime material/resource registry.
+ *
+ * TakeOn ships a Mars-rover-flavoured catalog (regolith, iron, copper…), but a
+ * different game built on the engine — a precious-metals mining game, say —
+ * needs its own voxel materials and cargo resource keys. `Material` and
+ * `ResourceKey` are open types precisely so this doesn't require a fork:
+ * register new entries and every built-in lookup (`MATERIALS[id]`, terrain
+ * generation, both renderers, the editor's maps/analysis) picks them up with
+ * no other change, because `MATERIALS`/`RESOURCE_NAMES` are plain mutable
+ * objects, not closed enums.
+ *
+ * Use ids at or above `CUSTOM_MATERIAL_BASE` (64) so a body shared between
+ * hosts never collides with another game's custom materials.
+ */
+
+/** Add or replace a voxel material. Returns the id that was registered. */
+export function registerMaterial(def: MaterialDef): Material {
+  MATERIALS[def.id] = def;
+  return def.id;
+}
+
+/** Remove a registered material. Built-ins (id < `CUSTOM_MATERIAL_BASE`) refuse to unregister. */
+export function unregisterMaterial(id: Material): boolean {
+  if (id < 64 || !(id in MATERIALS)) return false;
+  delete MATERIALS[id];
+  return true;
+}
+
+/** Every material currently known, built-in and registered. */
+export function listMaterials(): MaterialDef[] {
+  return Object.values(MATERIALS);
+}
+
+/**
+ * Give a resource key a display name (`RESOURCE_NAMES[key]`). Pair with
+ * `registerResourceValue` (`net/sync.js`) to price it for mission payouts.
+ */
+export function registerResource(key: ResourceKey, name: string): void {
+  RESOURCE_NAMES[key] = name;
+}
diff --git a/packages/engine/src/world/registry.ts b/packages/engine/src/world/registry.ts
new file mode 100644
index 0000000..34ce8f8
--- /dev/null
+++ b/packages/engine/src/world/registry.ts
@@ -0,0 +1,63 @@
+import type { BodyDef } from '../types.js';
+import { BODIES } from './bodies.js';
+
+/**
+ * Runtime destination registry.
+ *
+ * `BODIES` is the built-in catalog, but hosts (a backend row, a game built on
+ * TakeOn, or the editor's live preview) need to add or override destinations
+ * without patching the engine. Registered bodies shadow built-ins with the
+ * same id, so an editor can iterate on "mars" and every consumer that resolves
+ * through `getBody`/`listBodies` sees the edit.
+ *
+ * The registry only affects lookup — generation stays deterministic from
+ * `(BodyDef, seed)`, so nothing here changes how a world is built.
+ */
+const registered = new Map<string, BodyDef>();
+
+/** Add or replace a destination. Returns the stored def. */
+export function registerBody(def: BodyDef): BodyDef {
+  registered.set(def.id, def);
+  return def;
+}
+
+/** Register several at once (e.g. a catalog fetched from a backend). */
+export function registerBodies(defs: BodyDef[]): void {
+  for (const def of defs) registerBody(def);
+}
+
+/** Remove a registered body. Built-ins are never removed, only unshadowed. */
+export function unregisterBody(id: string): boolean {
+  return registered.delete(id);
+}
+
+/** Drop every registered body, restoring the built-in catalog. */
+export function clearRegisteredBodies(): void {
+  registered.clear();
+}
+
+/** Whether this id was registered at runtime (vs. a built-in). */
+export function isRegisteredBody(id: string): boolean {
+  return registered.has(id);
+}
+
+/** Registered bodies only, in registration order. */
+export function registeredBodies(): BodyDef[] {
+  return [...registered.values()];
+}
+
+/**
+ * The effective catalog: built-ins in declaration order (replaced in place by
+ * a registered override of the same id), then any purely custom bodies.
+ */
+export function listBodies(): BodyDef[] {
+  const out = BODIES.map((b) => registered.get(b.id) ?? b);
+  const builtinIds = new Set(BODIES.map((b) => b.id));
+  for (const [id, def] of registered) if (!builtinIds.has(id)) out.push(def);
+  return out;
+}
+
+/** Resolve a destination by id; registered bodies win over built-ins. */
+export function getBody(id: string): BodyDef | undefined {
+  return registered.get(id) ?? BODIES.find((b) => b.id === id);
+}
diff --git a/packages/engine/src/world/terrain.ts b/packages/engine/src/world/terrain.ts
index 625ab64..a31bd72 100644
--- a/packages/engine/src/world/terrain.ts
+++ b/packages/engine/src/world/terrain.ts
@@ -1,7 +1,9 @@
-import { Material, type BodyDef } from '../types.js';
-import { fbm2 } from '../util/noise.js';
+import { Material, type BodyDef, type OreBand } from '../types.js';
+import { fbm2, makeNoise } from '../util/noise/index.js';
 import { hash2, hash3, mulberry32 } from '../util/rng.js';
+import { biomeAt, pickBiomeMaterial } from './biomes.js';
 import { getDem, sampleDem, type DemPatch } from './dem/index.js';
+import { runWorldLayers } from './layers.js';
 import { VoxelWorld } from './world.js';
 
 /**
@@ -32,6 +34,10 @@ export function generateTerrain(body: BodyDef, seedOverride?: number): VoxelWorl
 
   const freq = 0.035 + t.roughness * 0.03;
   const half = size / 2;
+  // Authored noise (perlin/simplex/worley/…) replaces the default elevation
+  // field. Bodies without a `noise` block keep the original value-fBm path
+  // exactly, so every shipped world regenerates byte-for-byte.
+  const field = t.noise ? makeNoise(t.noise, seed) : null;
 
   for (let y = 0; y < size; y++) {
     for (let x = 0; x < size; x++) {
@@ -44,9 +50,16 @@ export function generateTerrain(body: BodyDef, seedOverride?: number): VoxelWorl
         if (rr > 0.82 - wobble * 0.5 + wobble) continue; // void column
       }
 
-      let n = fbm2(x * freq, y * freq, seed, 4);
-      // Gentle large-scale relief on top of the detail noise.
-      n = n * 0.65 + fbm2(x * freq * 0.25, y * freq * 0.25, seed + 55, 2) * 0.35;
+      let n: number;
+      if (field) {
+        // The config owns frequency and octaves; roughness still scales the
+        // vertical amplitude below.
+        n = field(x, y);
+      } else {
+        n = fbm2(x * freq, y * freq, seed, 4);
+        // Gentle large-scale relief on top of the detail noise.
+        n = n * 0.65 + fbm2(x * freq * 0.25, y * freq * 0.25, seed + 55, 2) * 0.35;
+      }
       if (dem) {
         // Real topography carries the large-scale relief; procedural noise
         // only adds sub-DEM-resolution detail.
@@ -78,6 +91,7 @@ export function generateTerrain(body: BodyDef, seedOverride?: number): VoxelWorl
     }
   }
 
+  runWorldLayers(body, seed, world);
   return world;
 }
 
@@ -100,6 +114,8 @@ function pickMaterial(
     const rich = t.oreRichness;
     if (v > 1 - rich * 0.055 && depth >= 3) return Material.Crystal;
     if (v > 1 - rich * 0.16) {
+      const band = t.bands && pickBand(t.bands, depth, surface);
+      if (band) return pickFromBand(band, x, y, z, seed);
       // Vein composition weighted by the body's spectroscopy profile
       // (e.g. TES/GRS iron for Mars, Clementine/M3 TiO2 for lunar maria).
       const w = body.minerals ?? {};
@@ -118,6 +134,10 @@ function pickMaterial(
   if (sulfurous && depth === 0) return Material.Sulfur;
 
   if (depth === 0) {
+    if (body.terrain.biomes) {
+      const biome = biomeAt(body, x, y, seed);
+      return pickBiomeMaterial(biome.surface, fbm2(x * 0.055, y * 0.055, seed + 5, 3));
+    }
     // Surface skin in large organic patches (not per-tile noise): silica
     // flats, dust basins and regolith uplands read as biome-like regions.
     const patch = fbm2(x * 0.055, y * 0.055, seed + 5, 3);
@@ -125,11 +145,44 @@ function pickMaterial(
     if (patch < 0.38 || z <= 2) return Material.Dust;
     return Material.Regolith;
   }
-  if (depth <= 2) return Material.Regolith;
+  if (depth <= 2) {
+    if (body.terrain.biomes) {
+      const biome = biomeAt(body, x, y, seed);
+      return pickBiomeMaterial(biome.subsurface ?? biome.surface, fbm2(x * 0.055, y * 0.055, seed + 9, 3));
+    }
+    return Material.Regolith;
+  }
   if (depth <= 5) return Material.Rock;
   return Material.Basalt;
 }
 
+/**
+ * First band whose `[from, to]` fraction-of-column-depth range contains this
+ * voxel, or null if none does (falls back to the default flat mineral mix).
+ * `surface` is guaranteed >= 1 by the `depth >= 1` guard at the call site.
+ */
+function pickBand(bands: OreBand[], depth: number, surface: number): OreBand | null {
+  const frac = depth / surface;
+  for (const band of bands) {
+    if (frac >= band.from && frac <= band.to) return band;
+  }
+  return null;
+}
+
+/** Weighted-random material from a band's mineral mix, seeded per voxel. */
+function pickFromBand(band: OreBand, x: number, y: number, z: number, seed: number): Material {
+  const entries = Object.entries(band.minerals);
+  const total = entries.reduce((sum, [, weight]) => sum + (weight ?? 0), 0);
+  if (total <= 0) return Material.IronOre;
+  const roll = hash3(x, y, z, seed + 23) * total;
+  let acc = 0;
+  for (const [id, weight] of entries) {
+    acc += weight ?? 0;
+    if (roll < acc) return Number(id);
+  }
+  return Number(entries[entries.length - 1][0]);
+}
+
 /**
  * Surface skin biome (silica / dust / regolith) at continuous coords.
  * Mirrors the depth-0 patch thresholds in pickMaterial (minus the elevation
diff --git a/packages/engine/src/world/world.ts b/packages/engine/src/world/world.ts
index 782f65f..ad22a8b 100644
--- a/packages/engine/src/world/world.ts
+++ b/packages/engine/src/world/world.ts
@@ -13,6 +13,15 @@ export class VoxelWorld {
   private heights: Int8Array;
   /** Sparse record of player edits for persistence: "x,y,z" -> material. */
   readonly edits: Record<string, number> = {};
+  /**
+   * Extension slot for a second "layer" of world data (an underground cave
+   * grid, a sky/atmosphere layer, …) that a module built on TakeOn wants to
+   * carry alongside this surface world. Core neither writes nor interprets
+   * this — see `world/layers.js`'s `registerWorldLayer`. Regenerates with
+   * everything else from `(BodyDef, seed)`, so nothing here needs its own
+   * persistence as long as a layer generator stays deterministic.
+   */
+  readonly layers: Record<string, unknown> = {};
   /** Bumped whenever any voxel changes; renderers watch this. */
   version = 0;
   /** Set by the renderer to receive per-column invalidations. */
diff --git a/packages/engine/test/authoring.test.ts b/packages/engine/test/authoring.test.ts
new file mode 100644
index 0000000..c213820
--- /dev/null
+++ b/packages/engine/test/authoring.test.ts
@@ -0,0 +1,215 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  analyzeTerrain,
+  BODIES,
+  BODY_FIELDS,
+  bodyToJson,
+  bodyToTypeScript,
+  clearRegisteredBodies,
+  cloneBody,
+  createBodyDraft,
+  crossSection,
+  forkBody,
+  generateTerrain,
+  getBody,
+  getBodyField,
+  heightField,
+  listBodies,
+  Material,
+  parseBodyJson,
+  reachableMask,
+  registerBody,
+  setBodyField,
+  slopeField,
+  unregisterBody,
+  validateBody,
+} from '../src/index.js';
+
+afterEach(() => clearRegisteredBodies());
+
+describe('body registry', () => {
+  it('resolves built-ins when nothing is registered', () => {
+    expect(getBody('mars')?.name).toBe('Mars');
+    expect(listBodies().length).toBe(BODIES.length);
+  });
+
+  it('lets a registered body shadow a built-in without mutating it', () => {
+    const patched = { ...getBody('mars')!, name: 'Mars (test)' };
+    registerBody(patched);
+    expect(getBody('mars')!.name).toBe('Mars (test)');
+    expect(BODIES.find((b) => b.id === 'mars')!.name).toBe('Mars');
+    expect(listBodies().length).toBe(BODIES.length);
+    unregisterBody('mars');
+    expect(getBody('mars')!.name).toBe('Mars');
+  });
+
+  it('appends custom bodies to the catalog', () => {
+    registerBody(createBodyDraft({ id: 'test-rock', name: 'Test Rock' }));
+    expect(listBodies().length).toBe(BODIES.length + 1);
+    expect(getBody('test-rock')!.name).toBe('Test Rock');
+  });
+});
+
+describe('body authoring', () => {
+  it('drafts a body that passes validation and generates', () => {
+    const draft = createBodyDraft({ id: 'draft-world', size: 48, maxHeight: 12 });
+    const v = validateBody(draft);
+    expect(v.ok).toBe(true);
+    expect(v.errors).toEqual([]);
+    const world = generateTerrain(draft);
+    expect(world.size).toBe(48);
+    expect(world.isSolid(24, 24)).toBe(true);
+  });
+
+  it('reports the problems that would break generation', () => {
+    const bad = createBodyDraft({ id: 'Bad Id', size: 4, maxHeight: 1000, gravity: 0 });
+    const v = validateBody(bad);
+    expect(v.ok).toBe(false);
+    expect(v.errors.some((e) => e.includes('id'))).toBe(true);
+    expect(v.errors.some((e) => e.includes('size'))).toBe(true);
+    expect(v.errors.some((e) => e.includes('maxHeight'))).toBe(true);
+    expect(v.errors.some((e) => e.includes('gravity'))).toBe(true);
+  });
+
+  it('warns about legal-but-poor settings', () => {
+    const draft = createBodyDraft({ terrain: { roughness: 0.95, craters: 4, iceCaps: 0, oreRichness: 0 } });
+    const v = validateBody(draft);
+    expect(v.ok).toBe(true);
+    expect(v.warnings.length).toBeGreaterThan(0);
+  });
+
+  it('reads and writes dotted field paths immutably', () => {
+    const draft = createBodyDraft();
+    const next = setBodyField(draft, 'terrain.roughness', 0.83);
+    expect(getBodyField(next, 'terrain.roughness')).toBe(0.83);
+    expect(draft.terrain.roughness).not.toBe(0.83);
+
+    const tinted = setBodyField(draft, 'palette.tint.1', 1.25);
+    expect(tinted.palette.tint![1]).toBe(1.25);
+    expect(draft.palette.tint![1]).toBe(1);
+
+    // Clearing an optional field removes it rather than storing undefined.
+    const cleared = setBodyField(createBodyDraft({ dem: 'mars-jezero' }), 'dem', '');
+    expect('dem' in cleared).toBe(false);
+  });
+
+  it('exposes an inspector schema covering every editable path', () => {
+    const draft = createBodyDraft();
+    for (const field of BODY_FIELDS) {
+      expect(field.label.length).toBeGreaterThan(0);
+      // Every path must be resolvable (optional fields may be undefined).
+      expect(() => getBodyField(draft, field.path)).not.toThrow();
+    }
+    expect(BODY_FIELDS.some((f) => f.path === 'terrain.roughness' && f.affectsTerrain)).toBe(true);
+  });
+
+  it('round-trips through JSON and forks cleanly', () => {
+    const original = getBody('io')!;
+    const { body, validation } = parseBodyJson(bodyToJson(original));
+    expect(validation.ok).toBe(true);
+    expect(body!.terrain).toEqual(original.terrain);
+    expect(generateTerrain(body!).height(10, 10)).toBe(generateTerrain(original).height(10, 10));
+
+    const fork = forkBody(original, 'io-2');
+    fork.terrain.roughness = 0.1;
+    expect(original.terrain.roughness).not.toBe(0.1);
+    expect(cloneBody(original).minerals).toEqual(original.minerals);
+  });
+
+  it('rejects malformed JSON with a message instead of throwing', () => {
+    const { body, validation } = parseBodyJson('{ not json');
+    expect(body).toBeNull();
+    expect(validation.ok).toBe(false);
+  });
+
+  it('emits a TypeScript literal for the built-in catalog', () => {
+    const src = bodyToTypeScript(getBody('bennu')!);
+    expect(src).toContain("id: 'bennu'".replace(/'/g, '"'));
+    expect(src).toContain('irregular: true');
+    expect(src.startsWith('{')).toBe(true);
+    expect(src.trimEnd().endsWith('}')).toBe(true);
+  });
+
+  it('serialises nested terrain config (noise, bands) as real objects, not [object Object]', () => {
+    const withNoiseAndBands = createBodyDraft({
+      terrain: {
+        roughness: 0.5,
+        craters: 2,
+        iceCaps: 0,
+        oreRichness: 0.5,
+        noise: { type: 'simplex', frequency: 0.07 },
+        bands: [{ from: 0, to: 1, minerals: { 5: 1 } }],
+      },
+    });
+    const ts = bodyToTypeScript(withNoiseAndBands);
+    expect(ts).not.toContain('[object Object]');
+    expect(ts).toContain('noise: {"type":"simplex"');
+    expect(ts).toContain('bands: [{"from":0');
+    // What comes out must itself be a valid JS object literal.
+    // eslint-disable-next-line no-new-func
+    expect(() => new Function(`return ${ts}`)()).not.toThrow();
+
+    const json = bodyToJson(withNoiseAndBands);
+    const { body: reparsed, validation } = parseBodyJson(json);
+    expect(validation.ok).toBe(true);
+    expect(reparsed!.terrain.noise).toEqual(withNoiseAndBands.terrain.noise);
+    expect(reparsed!.terrain.bands).toEqual(withNoiseAndBands.terrain.bands);
+  });
+});
+
+describe('terrain analysis', () => {
+  const world = generateTerrain(getBody('moon')!);
+
+  it('produces a height field matching the world', () => {
+    const heights = heightField(world);
+    expect(heights.length).toBe(world.size * world.size);
+    expect(heights[10 * world.size + 10]).toBe(world.height(10, 10));
+  });
+
+  it('measures relief, materials and drivability', () => {
+    const a = analyzeTerrain(world, { maxClimb: 2 });
+    expect(a.size).toBe(world.size);
+    expect(a.solidColumns).toBeGreaterThan(0);
+    expect(a.maxHeight).toBeGreaterThanOrEqual(a.minHeight);
+    expect(a.meanHeight).toBeGreaterThan(0);
+    expect(a.relief).toBe(a.maxHeight - a.minHeight);
+    expect(a.solidVoxels).toBeGreaterThan(a.solidColumns);
+    // A gentle body should be almost entirely drivable from the landing site.
+    expect(a.traversable.reachableFraction).toBeGreaterThan(0.8);
+    expect(a.resources.stone ?? 0).toBeGreaterThan(0);
+    expect(Object.keys(a.surface).length).toBeGreaterThan(1);
+    expect(a.heightHistogram.reduce((s, n) => s + n, 0)).toBe(a.solidColumns);
+  });
+
+  it('is deterministic for the same world', () => {
+    const a = analyzeTerrain(world);
+    const b = analyzeTerrain(generateTerrain(getBody('moon')!));
+    expect(b.meanHeight).toBeCloseTo(a.meanHeight, 10);
+    expect(b.materials).toEqual(a.materials);
+  });
+
+  it('counts void columns on irregular worlds and never escapes them', () => {
+    const bennu = generateTerrain(getBody('bennu')!);
+    const a = analyzeTerrain(bennu);
+    expect(a.voidFraction).toBeGreaterThan(0);
+    const mask = reachableMask(bennu, a.landingSite, 2);
+    for (let y = 0; y < bennu.size; y++) {
+      for (let x = 0; x < bennu.size; x++) {
+        if (mask[y * bennu.size + x]) expect(bennu.isSolid(x, y)).toBe(true);
+      }
+    }
+  });
+
+  it('flags cliffs in the slope field', () => {
+    const slopes = slopeField(world);
+    expect(slopes.length).toBe(world.size * world.size);
+    expect(Math.max(...slopes)).toBeGreaterThan(0);
+  });
+
+  it('slices the world for cross-sections', () => {
+    const slice = crossSection(world, 'y', 20);
+    expect(slice.cells.length).toBe(world.maxHeight);
+    expect(slice.cells[0].length).toBe(world.size);
+    expect(slice.cells[0][20]).not.toBe(Material.Air); // bedrock row
+  });
+});
diff --git a/packages/engine/test/biomes.test.ts b/packages/engine/test/biomes.test.ts
new file mode 100644
index 0000000..01f39dc
--- /dev/null
+++ b/packages/engine/test/biomes.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+import {
+  chunkBiome,
+  CHUNK_SIZE,
+  generateTerrain,
+  getBiome,
+  getBody,
+  instantiateBody,
+  listBiomes,
+  Material,
+  MATERIALS,
+  registerBiome,
+  unregisterBiome,
+  validateBody,
+} from '../src/index.js';
+
+describe('chunked biomes', () => {
+  it('is opt-in — a shipped body without terrain.biomes ignores it entirely', () => {
+    const body = getBody('mars')!;
+    expect(body.terrain.biomes).toBeUndefined();
+    const a = generateTerrain(body);
+    const b = generateTerrain(body);
+    // Same determinism guarantee as every other body: unaffected by this feature existing.
+    expect(a.get(10, 10, a.height(10, 10))).toBe(b.get(10, 10, b.height(10, 10)));
+  });
+
+  it('chunkBiome is deterministic for the same body/seed/chunk', () => {
+    const body = instantiateBody('rocky-planet', { id: 'chunk-test', name: 'Chunk Test', seed: 5 });
+    const a = chunkBiome(body, 2, 3, body.seed);
+    const b = chunkBiome(body, 2, 3, body.seed);
+    expect(a.id).toBe(b.id);
+  });
+
+  it('respects the kind allow-list — a rocky-planet never rolls grassland', () => {
+    const body = instantiateBody('rocky-planet', { id: 'allow-test', name: 'Allow Test', seed: 99 });
+    for (let cx = 0; cx < 6; cx++) {
+      for (let cy = 0; cy < 6; cy++) {
+        const b = chunkBiome(body, cx, cy, body.seed);
+        expect(b.id).not.toBe('grassland-plains');
+      }
+    }
+  });
+
+  it('spreads more than one biome across a large enough world when climate allows it', () => {
+    const body = instantiateBody('rocky-planet', { id: 'spread-test', name: 'Spread Test', seed: 3, size: 128 });
+    const seen = new Set<string>();
+    const chunks = Math.floor(body.size / CHUNK_SIZE);
+    for (let cx = 0; cx < chunks; cx++) {
+      for (let cy = 0; cy < chunks; cy++) seen.add(chunkBiome(body, cx, cy, body.seed).id);
+    }
+    expect(seen.size).toBeGreaterThan(1);
+  });
+
+  it('generateTerrain actually paints biome materials onto the world when terrain.biomes is on', () => {
+    const body = instantiateBody('rocky-planet', {
+      id: 'paint-test',
+      name: 'Paint Test',
+      seed: 11,
+      size: 48,
+      maxHeight: 12,
+      terrain: { roughness: 0.5, craters: 3, iceCaps: 0, oreRichness: 0.2, biomes: true },
+    });
+    expect(validateBody(body).ok).toBe(true);
+    const world = generateTerrain(body);
+    const surfaceMats = new Set<number>();
+    for (let x = 0; x < world.size; x++) {
+      for (let y = 0; y < world.size; y++) {
+        const h = world.height(x, y);
+        if (h >= 0) surfaceMats.add(world.get(x, y, h));
+      }
+    }
+    // rocky-planet's allowed biomes never include Silica — the old flat skin's material.
+    expect(surfaceMats.has(Material.Silica)).toBe(false);
+  });
+
+  it('custom biomes register, resolve and cannot clobber a built-in', () => {
+    registerBiome({
+      id: 'lava-flow',
+      label: 'Lava flow',
+      help: 'test biome',
+      surface: [Material.Basalt],
+    });
+    expect(getBiome('lava-flow')?.surface).toEqual([Material.Basalt]);
+    expect(listBiomes().some((b) => b.id === 'lava-flow')).toBe(true);
+    expect(unregisterBiome('dust-basin')).toBe(false);
+    expect(unregisterBiome('lava-flow')).toBe(true);
+    expect(getBiome('lava-flow')).toBeUndefined();
+  });
+
+  it('every registered biome only references materials that actually exist', () => {
+    for (const biome of listBiomes()) {
+      for (const m of [...biome.surface, ...(biome.subsurface ?? [])]) {
+        expect(MATERIALS[m]).toBeDefined();
+      }
+    }
+  });
+});
diff --git a/packages/engine/test/cross-section.test.ts b/packages/engine/test/cross-section.test.ts
new file mode 100644
index 0000000..0e77e38
--- /dev/null
+++ b/packages/engine/test/cross-section.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest';
+import { crossSectionImage, generateTerrain, getBody, Material, renderCrossSection } from '../src/index.js';
+
+describe('cross-section rendering', () => {
+  const world = generateTerrain(getBody('moon')!);
+
+  it('builds an ImageData matching the raw slice dimensions', () => {
+    const image = crossSectionImage(world, 'y', 20);
+    expect(image.width).toBe(world.size);
+    expect(image.height).toBe(world.maxHeight);
+  });
+
+  it('paints air voxels with the air colour and material voxels with real colours', () => {
+    const image = crossSectionImage(world, 'y', 20, { airColor: [1, 2, 3] });
+    const data = image.data;
+    let sawAir = false;
+    let sawMaterial = false;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i] === 1 && data[i + 1] === 2 && data[i + 2] === 3) sawAir = true;
+      else sawMaterial = true;
+      // Every pixel is fully opaque.
+      expect(data[i + 3]).toBe(255);
+    }
+    expect(sawAir).toBe(true);
+    expect(sawMaterial).toBe(true);
+  });
+
+  it('is deterministic for the same world and slice', () => {
+    const a = crossSectionImage(world, 'x', 15);
+    const b = crossSectionImage(world, 'x', 15);
+    expect([...a.data]).toEqual([...b.data]);
+  });
+
+  it('reflects registered custom materials, not just the built-in 12', () => {
+    const w = generateTerrain(getBody('mars')!);
+    const x = Math.floor(w.size / 2);
+    const y = Math.floor(w.size / 2);
+    const h = w.height(x, y);
+    w.setRaw(x, y, h, 200 as Material); // an id nothing has registered
+    const image = crossSectionImage(w, 'y', y, { airColor: [0, 0, 0] });
+    // MATERIALS[200] is undefined, so the painter must not throw — it should
+    // fall back to the air colour rather than crash on a missing MaterialDef.
+    expect(() => crossSectionImage(w, 'y', y)).not.toThrow();
+    expect(image).toBeDefined();
+  });
+
+  it('renders into a real canvas, letterboxed and smoothing disabled', () => {
+    if (typeof document === 'undefined') return; // canvas-dependent, skip outside a DOM env
+    const canvas = document.createElement('canvas');
+    Object.defineProperty(canvas, 'getBoundingClientRect', {
+      value: () => ({ width: 200, height: 120, top: 0, left: 0, right: 200, bottom: 120, x: 0, y: 0, toJSON() {} }),
+    });
+    renderCrossSection(canvas, world, 'y', 20);
+    expect(canvas.width).toBeGreaterThan(0);
+    expect(canvas.height).toBeGreaterThan(0);
+    const ctx = canvas.getContext('2d')!;
+    const pixel = ctx.getImageData(canvas.width >> 1, canvas.height >> 1, 1, 1).data;
+    expect(pixel[3]).toBe(255); // painted, not left transparent
+  });
+});
diff --git a/packages/engine/test/engine.test.ts b/packages/engine/test/engine.test.ts
index e871a2a..d3ff61a 100644
--- a/packages/engine/test/engine.test.ts
+++ b/packages/engine/test/engine.test.ts
@@ -8,6 +8,7 @@ import {
   EventBus,
   findLandingSite,
   generateAnomalies,
+  GAME_EVENT_KEYS,
   generateTerrain,
   getBody,
   Material,
@@ -682,3 +683,31 @@ describe('mobility upgrades', () => {
     expect(resumed.rover.stats.maxClimb).toBe(climb);
   });
 });
+
+describe('event key catalogue', () => {
+  it('lists every key exactly once and matches what the sim emits', () => {
+    expect(new Set(GAME_EVENT_KEYS).size).toBe(GAME_EVENT_KEYS.length);
+
+    // Hosts subscribe by iterating this list, so anything the sim emits during
+    // ordinary play must be in it.
+    const sim = makeSim('moon');
+    const seen = new Set<string>();
+    for (const key of GAME_EVENT_KEYS) sim.events.on(key, () => seen.add(key));
+    const emitted: string[] = [];
+    const originalEmit = sim.events.emit.bind(sim.events);
+    sim.events.emit = ((key: any, payload: any) => {
+      emitted.push(key);
+      return originalEmit(key, payload);
+    }) as typeof sim.events.emit;
+
+    runTicks(sim, 5);
+    sim.move(0);
+    runTicks(sim, 10);
+    sim.mine();
+    runTicks(sim, 30);
+
+    expect(emitted.length).toBeGreaterThan(0);
+    for (const key of emitted) expect(GAME_EVENT_KEYS).toContain(key as never);
+    expect(seen.has('tick')).toBe(true);
+  });
+});
diff --git a/packages/engine/test/kinds.test.ts b/packages/engine/test/kinds.test.ts
new file mode 100644
index 0000000..37aaf9b
--- /dev/null
+++ b/packages/engine/test/kinds.test.ts
@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import {
+  allowedBiomesForKind,
+  bodyKindChain,
+  generateTerrain,
+  getBodyKind,
+  instantiateBody,
+  listBodyKinds,
+  registerBodyKind,
+  resolveBodyKind,
+  unregisterBodyKind,
+  validateBody,
+} from '../src/index.js';
+
+describe('body kinds', () => {
+  it('ships a kind tree rooted at "body" covering every BodyType', () => {
+    const ids = listBodyKinds().map((k) => k.id);
+    expect(ids).toEqual(expect.arrayContaining(['body', 'planet', 'moon', 'asteroid', 'gaseous']));
+    expect(getBodyKind('earth-like')?.parent).toBe('planet');
+  });
+
+  it('resolves a chain root-to-leaf and merges defaults, leaf wins', () => {
+    const chain = bodyKindChain('earth-like');
+    expect(chain.map((k) => k.id)).toEqual(['body', 'planet', 'earth-like']);
+
+    const defaults = resolveBodyKind('earth-like');
+    // earth-like overrides planet's climate; both set terrain, so terrain
+    // must be a *merge*, not a replace (oreRichness from earth-like, iceCaps
+    // inherited from planet).
+    expect(defaults.climate?.temperature).toBe(14);
+    expect(defaults.terrain?.oreRichness).toBe(0.25);
+    expect(defaults.terrain?.iceCaps).toBe(0.1); // inherited from 'planet'
+  });
+
+  it('an unknown kind id resolves to an empty chain, not a throw', () => {
+    expect(bodyKindChain('does-not-exist')).toEqual([]);
+    expect(resolveBodyKind('does-not-exist')).toEqual({});
+  });
+
+  it('instantiateBody layers host overrides on top of kind defaults', () => {
+    const body = instantiateBody('rocky-planet', {
+      id: 'kepler-1',
+      name: 'Kepler Test World',
+      seed: 42,
+      climate: { temperature: -30 }, // host's own model overrides the kind default (-60)
+    });
+    expect(body.type).toBe('planet');
+    expect(body.kind).toBe('rocky-planet');
+    expect(body.climate?.temperature).toBe(-30);
+    expect(body.climate?.tempVariance).toBe(0.5); // inherited, not overridden
+    expect(validateBody(body).ok).toBe(true);
+  });
+
+  it('an instantiated body generates like any hand-authored one', () => {
+    const body = instantiateBody('ice-moon', { id: 'ice-test', name: 'Ice Test', seed: 7, size: 32, maxHeight: 10 });
+    const world = generateTerrain(body);
+    expect(world.size).toBe(32);
+  });
+
+  it('allowedBiomesForKind walks up to the nearest ancestor that declares any', () => {
+    expect(allowedBiomesForKind('c-type-asteroid')).toEqual(['carbonaceous-rubble', 'icefield']);
+    // 'asteroid' itself declares none; 'body' declares none either.
+    expect(allowedBiomesForKind('asteroid')).toBeUndefined();
+  });
+
+  it('custom kinds register, resolve and cannot be used to clobber a built-in', () => {
+    registerBodyKind({
+      id: 'lava-moon',
+      parent: 'moon',
+      label: 'Lava moon',
+      help: 'Tidally-heated volcanic moon.',
+      defaults: { climate: { temperature: 400 }, terrain: { sulfurFields: 0.6 } },
+    });
+    const defaults = resolveBodyKind('lava-moon');
+    expect(defaults.climate?.temperature).toBe(400);
+    expect(defaults.terrain?.craters).toBe(8); // inherited from 'moon'
+
+    expect(unregisterBodyKind('moon')).toBe(false); // built-in, refused
+    expect(unregisterBodyKind('lava-moon')).toBe(true);
+    expect(getBodyKind('lava-moon')).toBeUndefined();
+  });
+});
diff --git a/packages/engine/test/layering.test.ts b/packages/engine/test/layering.test.ts
index 694ca2e..5cf59dd 100644
--- a/packages/engine/test/layering.test.ts
+++ b/packages/engine/test/layering.test.ts
@@ -27,9 +27,12 @@ const ALLOWED: Record<string, string[]> = {
   world: ['util'],
   net: ['parts', 'world', 'util'],
   sim: ['parts', 'world', 'util'],
-  render: ['sim', 'world', 'util'],
+  // The scene model flattens a running sim into renderer-agnostic entities,
+  // so it sits above sim and below every renderer.
+  scene: ['sim', 'world', 'util'],
+  render: ['scene', 'sim', 'world', 'util'],
   input: ['render'],
-  core: ['sim', 'render', 'input', 'audio', 'util'],
+  core: ['scene', 'sim', 'render', 'input', 'audio', 'util'],
 };
 
 function tsFiles(dir: string): string[] {
diff --git a/packages/engine/test/layers.test.ts b/packages/engine/test/layers.test.ts
new file mode 100644
index 0000000..1d52173
--- /dev/null
+++ b/packages/engine/test/layers.test.ts
@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  generateTerrain,
+  getBody,
+  listWorldLayerIds,
+  registerWorldLayer,
+  unregisterWorldLayer,
+} from '../src/index.js';
+
+/**
+ * The layer extension seam: TakeOn ships no layers of its own (mining stays
+ * top-down, deposits + ice), but a module built on top can register a
+ * generator and have it ride along with every `generateTerrain()` call
+ * without forking core generation.
+ */
+describe('world layer extension seam', () => {
+  afterEach(() => {
+    unregisterWorldLayer('test-caves');
+  });
+
+  it('ships with nothing registered — a shipped body carries no extra layer data', () => {
+    expect(listWorldLayerIds()).toEqual([]);
+    const world = generateTerrain(getBody('moon')!);
+    expect(Object.keys(world.layers)).toEqual([]);
+  });
+
+  it('a registered generator runs and attaches its result by id', () => {
+    registerWorldLayer('test-caves', (body, seed, world) => ({
+      tunnels: body.size,
+      seedEcho: seed,
+      surfaceSize: world.size,
+    }));
+    expect(listWorldLayerIds()).toContain('test-caves');
+
+    const body = getBody('moon')!;
+    const world = generateTerrain(body);
+    expect(world.layers['test-caves']).toEqual({ tunnels: body.size, seedEcho: body.seed, surfaceSize: body.size });
+  });
+
+  it('is deterministic like the rest of generation', () => {
+    registerWorldLayer('test-caves', (body, seed) => `${body.id}:${seed}`);
+    const body = getBody('mars')!;
+    const a = generateTerrain(body);
+    const b = generateTerrain(body);
+    expect(a.layers['test-caves']).toEqual(b.layers['test-caves']);
+  });
+
+  it('unregistering stops it from running on the next generation', () => {
+    registerWorldLayer('test-caves', () => 'present');
+    expect(generateTerrain(getBody('moon')!).layers['test-caves']).toBe('present');
+    expect(unregisterWorldLayer('test-caves')).toBe(true);
+    expect(generateTerrain(getBody('moon')!).layers['test-caves']).toBeUndefined();
+  });
+});
diff --git a/packages/engine/test/noise.test.ts b/packages/engine/test/noise.test.ts
new file mode 100644
index 0000000..5ced1f6
--- /dev/null
+++ b/packages/engine/test/noise.test.ts
@@ -0,0 +1,259 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+  BODIES,
+  blueNoise2,
+  blueNoiseMask,
+  clearBlueNoiseCache,
+  createBodyDraft,
+  DEFAULT_NOISE,
+  describeNoise,
+  fbm2,
+  fractal2,
+  generateTerrain,
+  makeNoise,
+  NOISE_TYPES,
+  perlin2,
+  poissonDisk,
+  scatterPoints,
+  simplex2,
+  valueNoise2,
+  worley2,
+  type NoiseType,
+} from '../src/index.js';
+
+const SAMPLERS: [string, (x: number, y: number, seed: number) => number][] = [
+  ['value', valueNoise2],
+  ['perlin', perlin2],
+  ['simplex', simplex2],
+  ['worley', (x, y, s) => worley2(x, y, s)],
+];
+
+describe('noise samplers', () => {
+  it('stay inside [0,1] over a wide sample', () => {
+    for (const [name, sample] of SAMPLERS) {
+      for (let i = 0; i < 3000; i++) {
+        const x = (i % 71) * 0.37 - 13;
+        const y = Math.floor(i / 71) * 0.53 + 4.1;
+        const v = sample(x, y, 1234);
+        expect(v, `${name} at ${x},${y}`).toBeGreaterThanOrEqual(0);
+        expect(v, `${name} at ${x},${y}`).toBeLessThanOrEqual(1);
+      }
+    }
+  });
+
+  it('are deterministic and seed-dependent', () => {
+    for (const [name, sample] of SAMPLERS) {
+      expect(sample(3.25, -7.5, 42), name).toBe(sample(3.25, -7.5, 42));
+      expect(sample(3.25, -7.5, 42), name).not.toBe(sample(3.25, -7.5, 43));
+    }
+  });
+
+  it('are continuous: neighbouring samples move smoothly', () => {
+    for (const [name, sample] of [SAMPLERS[0], SAMPLERS[1], SAMPLERS[2]]) {
+      let worst = 0;
+      for (let i = 0; i < 500; i++) {
+        const x = i * 0.11;
+        const d = Math.abs(sample(x, 2.5, 7) - sample(x + 0.01, 2.5, 7));
+        worst = Math.max(worst, d);
+      }
+      expect(worst, `${name} jump`).toBeLessThan(0.1);
+    }
+  });
+
+  it('produce different fields per type', () => {
+    const at = (fn: (x: number, y: number, s: number) => number) =>
+      Array.from({ length: 20 }, (_, i) => fn(i * 0.7, i * 0.3, 9));
+    expect(at(perlin2)).not.toEqual(at(valueNoise2));
+    expect(at(simplex2)).not.toEqual(at(perlin2));
+    expect(at((x, y, s) => worley2(x, y, s, 'f2f1'))).not.toEqual(at((x, y, s) => worley2(x, y, s, 'f1')));
+  });
+});
+
+describe('fractal stacks', () => {
+  it('ridged and billow differ from fbm but stay bounded', () => {
+    const opts = { octaves: 4 } as const;
+    for (let i = 0; i < 200; i++) {
+      const x = i * 0.13;
+      const fbm = fractal2(perlin2, x, 1.5, 3, { ...opts, kind: 'fbm' });
+      const ridged = fractal2(perlin2, x, 1.5, 3, { ...opts, kind: 'ridged' });
+      const billow = fractal2(perlin2, x, 1.5, 3, { ...opts, kind: 'billow' });
+      for (const v of [fbm, ridged, billow]) {
+        expect(v).toBeGreaterThanOrEqual(0);
+        expect(v).toBeLessThanOrEqual(1);
+      }
+      expect(Math.abs(ridged - billow)).toBeGreaterThan(0);
+    }
+  });
+
+  it('more octaves add detail without changing the overall level much', () => {
+    const mean = (octaves: number) => {
+      let sum = 0;
+      for (let i = 0; i < 400; i++) sum += fractal2(simplex2, i * 0.07, 3.3, 11, { octaves });
+      return sum / 400;
+    };
+    expect(Math.abs(mean(1) - mean(6))).toBeLessThan(0.15);
+  });
+});
+
+describe('blue noise', () => {
+  beforeEach(() => clearBlueNoiseCache());
+
+  it('builds a tileable mask covering the whole range', () => {
+    const size = 16;
+    const mask = blueNoiseMask(size, 5);
+    expect(mask.length).toBe(size * size);
+    const sorted = [...mask].sort((a, b) => a - b);
+    expect(sorted[0]).toBeGreaterThanOrEqual(0);
+    expect(sorted[sorted.length - 1]).toBeLessThan(1);
+    // Values are a permutation of ranks: no two cells share a threshold.
+    expect(new Set(mask).size).toBe(size * size);
+    // Tiles: sampling past the edge wraps.
+    expect(blueNoise2(size + 2, size + 3, 5, size)).toBe(blueNoise2(2, 3, 5, size));
+  });
+
+  it('spreads better than white noise at the same density', () => {
+    // Threshold the mask and measure how evenly the survivors are spread by
+    // counting per-quadrant occupancy; blue noise should be far more uniform
+    // than an unstructured hash at the same count.
+    const size = 16;
+    const mask = blueNoiseMask(size, 3);
+    const cut = 0.25;
+    const quadrant = (x: number, y: number) => (y < size / 2 ? 0 : 2) + (x < size / 2 ? 0 : 1);
+    const blueCounts = [0, 0, 0, 0];
+    let blueTotal = 0;
+    for (let y = 0; y < size; y++) {
+      for (let x = 0; x < size; x++) {
+        if (mask[y * size + x] < cut) {
+          blueCounts[quadrant(x, y)]++;
+          blueTotal++;
+        }
+      }
+    }
+    const spread = Math.max(...blueCounts) - Math.min(...blueCounts);
+    expect(blueTotal).toBeGreaterThan(0);
+    // Perfectly even would be 0; white noise at this density typically differs
+    // by a quarter of the total.
+    expect(spread).toBeLessThanOrEqual(Math.ceil(blueTotal * 0.25));
+  });
+
+  it('poisson-disk sampling respects the minimum distance', () => {
+    const pts = poissonDisk({ width: 60, height: 60, radius: 4, seed: 12 });
+    expect(pts.length).toBeGreaterThan(50);
+    for (const p of pts) {
+      expect(p.x).toBeGreaterThanOrEqual(0);
+      expect(p.x).toBeLessThan(60);
+    }
+    for (let i = 0; i < pts.length; i++) {
+      for (let j = i + 1; j < pts.length; j++) {
+        const d = Math.hypot(pts[i].x - pts[j].x, pts[i].y - pts[j].y);
+        expect(d).toBeGreaterThanOrEqual(4 - 1e-9);
+      }
+    }
+    // Same seed, same points.
+    expect(poissonDisk({ width: 60, height: 60, radius: 4, seed: 12 })).toEqual(pts);
+  });
+
+  it('scatters approximately the requested number of points', () => {
+    const pts = scatterPoints(64, 40, 7);
+    expect(pts.length).toBeGreaterThan(20);
+    expect(pts.length).toBeLessThanOrEqual(40);
+  });
+});
+
+describe('noise configs', () => {
+  it('defaults reproduce a plain value-fBm field', () => {
+    const field = makeNoise({ frequency: 1, octaves: 4 }, 99);
+    expect(field(0.3, 0.7)).toBeCloseTo(fbm2(0.3, 0.7, 99, 4), 12);
+    expect(DEFAULT_NOISE.type).toBe('value');
+  });
+
+  it('builds a working sampler for every advertised type', () => {
+    for (const { id } of NOISE_TYPES) {
+      const field = makeNoise({ type: id as NoiseType, frequency: 0.1 }, 5);
+      const v = field(12, 34);
+      expect(Number.isFinite(v), id).toBe(true);
+      expect(v, id).toBeGreaterThanOrEqual(0);
+      expect(v, id).toBeLessThanOrEqual(1);
+      expect(field(12, 34), id).toBe(v);
+    }
+  });
+
+  it('domain warp changes the field but keeps it in range', () => {
+    const plain = makeNoise({ type: 'perlin', frequency: 0.08, warp: 0 }, 3);
+    const warped = makeNoise({ type: 'perlin', frequency: 0.08, warp: 6 }, 3);
+    let differences = 0;
+    for (let i = 0; i < 100; i++) {
+      const a = plain(i, i * 0.5);
+      const b = warped(i, i * 0.5);
+      expect(b).toBeGreaterThanOrEqual(0);
+      expect(b).toBeLessThanOrEqual(1);
+      if (Math.abs(a - b) > 1e-6) differences++;
+    }
+    expect(differences).toBeGreaterThan(50);
+  });
+
+  it('describes itself for editors', () => {
+    expect(describeNoise({ type: 'simplex', octaves: 3, warp: 2 })).toContain('Simplex');
+    expect(describeNoise(undefined)).toContain('Value');
+  });
+});
+
+describe('terrain noise integration', () => {
+  it('leaves every shipped body byte-identical', () => {
+    // The noise work must not silently regenerate the shipped worlds: saves
+    // store only edits, so a changed field would corrupt every resume.
+    for (const body of BODIES) {
+      const world = generateTerrain(body);
+      const again = generateTerrain(body);
+      let signature = 0;
+      for (let i = 0; i < 400; i++) {
+        const x = (i * 7) % world.size;
+        const y = (i * 13) % world.size;
+        expect(world.height(x, y)).toBe(again.height(x, y));
+        signature += world.height(x, y) * (i + 1);
+      }
+      expect(Number.isFinite(signature)).toBe(true);
+    }
+  });
+
+  it('generates a different, still-playable world when a noise config is set', () => {
+    const base = createBodyDraft({ id: 'noise-test', size: 48, maxHeight: 14, seed: 77 });
+    const plain = generateTerrain(base);
+    const ridged = generateTerrain({
+      ...base,
+      terrain: { ...base.terrain, noise: { type: 'simplex', frequency: 0.06, octaves: 5, fractal: 'ridged' } },
+    });
+    let differing = 0;
+    for (let y = 0; y < 48; y++) {
+      for (let x = 0; x < 48; x++) if (plain.height(x, y) !== ridged.height(x, y)) differing++;
+    }
+    expect(differing).toBeGreaterThan(48 * 48 * 0.3);
+    // Still a solid, standable world.
+    expect(ridged.isSolid(24, 24)).toBe(true);
+    for (let y = 0; y < 48; y++) {
+      for (let x = 0; x < 48; x++) expect(ridged.height(x, y)).toBeGreaterThanOrEqual(1);
+    }
+  });
+
+  it('is deterministic with a noise config', () => {
+    const body = createBodyDraft({
+      id: 'noise-det',
+      size: 40,
+      seed: 4,
+      terrain: {
+        roughness: 0.6,
+        craters: 2,
+        iceCaps: 0,
+        oreRichness: 0.4,
+        noise: { type: 'worley', frequency: 0.09, octaves: 3, warp: 3 },
+      },
+    });
+    const a = generateTerrain(body);
+    const b = generateTerrain(body);
+    for (let i = 0; i < 200; i++) {
+      const x = (i * 3) % 40;
+      const y = (i * 11) % 40;
+      expect(a.height(x, y)).toBe(b.height(x, y));
+    }
+  });
+});
diff --git a/packages/engine/test/ore-bands.test.ts b/packages/engine/test/ore-bands.test.ts
new file mode 100644
index 0000000..e2813d9
--- /dev/null
+++ b/packages/engine/test/ore-bands.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it } from 'vitest';
+import {
+  BODIES,
+  createBodyDraft,
+  generateTerrain,
+  getBody,
+  Material,
+  registerMaterial,
+  unregisterMaterial,
+  validateBody,
+} from '../src/index.js';
+
+/**
+ * Depth-stratified ore, opt-in per body — the mechanic behind an "underground
+ * cross-section" that actually shows different minerals at different depths
+ * (topsoil / subsoil / bedrock), instead of one flat mix everywhere.
+ */
+
+const PLATINUM = 64;
+const PALLADIUM = 65;
+
+function registerPGMs(): void {
+  registerMaterial({
+    id: PLATINUM,
+    name: 'Platinum ore',
+    hardness: 5,
+    yields: { resource: 'platinum', amount: 1 },
+    colors: ['#e8e4d8', '#b8b4a8', '#8a8778'],
+    jitter: 0.06,
+  });
+  registerMaterial({
+    id: PALLADIUM,
+    name: 'Palladium ore',
+    hardness: 6,
+    yields: { resource: 'palladium', amount: 1 },
+    colors: ['#d4cce8', '#a8a0c8', '#7c74a0'],
+    jitter: 0.06,
+  });
+}
+
+describe('depth-banded terrain', () => {
+  it('leaves every shipped body byte-identical (none set bands)', () => {
+    for (const body of BODIES) expect(body.terrain.bands).toBeUndefined();
+  });
+
+  it('is absent by default, keeping the flat iron/copper/titanium mix', () => {
+    const plain = createBodyDraft({ id: 'plain', size: 48, terrain: { roughness: 0.6, craters: 3, iceCaps: 0, oreRichness: 0.6 } });
+    const world = generateTerrain(plain);
+    let sawOre = false;
+    for (let y = 0; y < world.size; y++) {
+      for (let x = 0; x < world.size; x++) {
+        const h = world.height(x, y);
+        for (let z = 0; z <= h; z++) {
+          const m = world.get(x, y, z);
+          if (m === Material.IronOre || m === Material.CopperOre || m === Material.TitaniumOre) sawOre = true;
+        }
+      }
+    }
+    expect(sawOre).toBe(true);
+  });
+
+  it('stratifies ore by depth once bands are set', () => {
+    registerPGMs();
+    try {
+      const body = createBodyDraft({
+        id: 'strata',
+        size: 56,
+        maxHeight: 20,
+        terrain: {
+          roughness: 0.7,
+          craters: 2,
+          iceCaps: 0,
+          oreRichness: 0.9, // rich, so the test sees plenty of ore
+          bands: [
+            { from: 0, to: 0.5, label: 'Topsoil', minerals: { [PLATINUM]: 1 } },
+            { from: 0.5, to: 1, label: 'Bedrock', minerals: { [PALLADIUM]: 1 } },
+          ],
+        },
+      });
+      const world = generateTerrain(body);
+
+      let shallowPt = 0;
+      let shallowPd = 0;
+      let deepPt = 0;
+      let deepPd = 0;
+      for (let y = 0; y < world.size; y++) {
+        for (let x = 0; x < world.size; x++) {
+          const h = world.height(x, y);
+          if (h < 1) continue;
+          for (let z = 0; z <= h; z++) {
+            const depth = h - z;
+            const frac = depth / h;
+            const m = world.get(x, y, z);
+            if (m === PLATINUM) frac <= 0.5 ? shallowPt++ : deepPt++;
+            if (m === PALLADIUM) frac <= 0.5 ? shallowPd++ : deepPd++;
+          }
+        }
+      }
+
+      expect(shallowPt).toBeGreaterThan(0);
+      expect(deepPd).toBeGreaterThan(0);
+      // The bands are exclusive: platinum stays shallow, palladium stays deep.
+      expect(deepPt).toBe(0);
+      expect(shallowPd).toBe(0);
+    } finally {
+      unregisterMaterial(PLATINUM);
+      unregisterMaterial(PALLADIUM);
+    }
+  });
+
+  it('is deterministic for the same body and seed', () => {
+    registerPGMs();
+    try {
+      const body = createBodyDraft({
+        id: 'strata-det',
+        size: 40,
+        seed: 55,
+        terrain: {
+          roughness: 0.5,
+          craters: 1,
+          iceCaps: 0,
+          oreRichness: 0.7,
+          bands: [{ from: 0, to: 1, minerals: { [PLATINUM]: 2, [PALLADIUM]: 1 } }],
+        },
+      });
+      const a = generateTerrain(body);
+      const b = generateTerrain(body);
+      for (let i = 0; i < 300; i++) {
+        const x = (i * 7) % 40;
+        const y = (i * 13) % 40;
+        expect(a.height(x, y)).toBe(b.height(x, y));
+        for (let z = 0; z <= a.height(x, y); z++) expect(a.get(x, y, z)).toBe(b.get(x, y, z));
+      }
+    } finally {
+      unregisterMaterial(PLATINUM);
+      unregisterMaterial(PALLADIUM);
+    }
+  });
+
+  it('validates band ranges and mineral weights', () => {
+    const bad = createBodyDraft({
+      terrain: {
+        roughness: 0.5,
+        craters: 2,
+        iceCaps: 0,
+        oreRichness: 0.5,
+        bands: [
+          { from: -0.2, to: 1.4, minerals: {} },
+          { from: 0.6, to: 0.2, minerals: { [Material.IronOre]: 1 } },
+        ],
+      },
+    });
+    const v = validateBody(bad);
+    expect(v.ok).toBe(false);
+    expect(v.errors.some((e) => e.includes('.from must be between 0 and 1'))).toBe(true);
+    expect(v.errors.some((e) => e.includes('.to must be between 0 and 1'))).toBe(true);
+    expect(v.errors.some((e) => e.includes('at least one mineral'))).toBe(true);
+    expect(v.errors.some((e) => e.includes('must not be greater than .to'))).toBe(true);
+  });
+
+  it('warns about overlapping or uncovered bands but still validates', () => {
+    const overlap = createBodyDraft({
+      terrain: {
+        roughness: 0.5,
+        craters: 2,
+        iceCaps: 0,
+        oreRichness: 0.5,
+        bands: [
+          { from: 0, to: 0.6, minerals: { [Material.IronOre]: 1 } },
+          { from: 0.4, to: 1, minerals: { [Material.CopperOre]: 1 } },
+        ],
+      },
+    });
+    const v = validateBody(overlap);
+    expect(v.ok).toBe(true);
+    expect(v.warnings.some((w) => w.includes('overlap'))).toBe(true);
+
+    const gap = createBodyDraft({
+      terrain: {
+        roughness: 0.5,
+        craters: 2,
+        iceCaps: 0,
+        oreRichness: 0.5,
+        bands: [{ from: 0, to: 0.3, minerals: { [Material.IronOre]: 1 } }],
+      },
+    });
+    expect(validateBody(gap).warnings.some((w) => w.includes('uncovered'))).toBe(true);
+  });
+
+  it('works alongside a custom noise field on the same body', () => {
+    registerPGMs();
+    try {
+      const body = createBodyDraft({
+        id: 'strata-noise',
+        size: 40,
+        terrain: {
+          roughness: 0.6,
+          craters: 0,
+          iceCaps: 0,
+          oreRichness: 0.8,
+          noise: { type: 'simplex', frequency: 0.06, octaves: 3 },
+          bands: [{ from: 0, to: 1, minerals: { [PLATINUM]: 1 } }],
+        },
+      });
+      expect(() => generateTerrain(body)).not.toThrow();
+      const world = generateTerrain(body);
+      expect(world.isSolid(20, 20)).toBe(true);
+    } finally {
+      unregisterMaterial(PLATINUM);
+    }
+  });
+});
diff --git a/packages/engine/test/registries.test.ts b/packages/engine/test/registries.test.ts
new file mode 100644
index 0000000..a437638
--- /dev/null
+++ b/packages/engine/test/registries.test.ts
@@ -0,0 +1,173 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import {
+  computeStats,
+  createRoverGame,
+  defaultSpec,
+  EventBus,
+  getBody,
+  listMaterials,
+  listStructures,
+  Material,
+  MATERIALS,
+  missionCredits,
+  registerMaterial,
+  registerResource,
+  registerResourceValue,
+  registerStructure,
+  RESOURCE_NAMES,
+  RESOURCE_VALUE,
+  Simulation,
+  STRUCTURES,
+  unregisterMaterial,
+  unregisterStructure,
+  type MaterialDef,
+  type MissionState,
+  type StructureDef,
+} from '../src/index.js';
+
+/**
+ * A different game built on the engine (a precious-metals mining game, say)
+ * needs its own voxel materials, cargo resources and structure catalog. These
+ * assert the extension points actually work end to end — register something,
+ * see it flow through generation, the sim and the economy — not just that
+ * the functions exist.
+ */
+
+const PLATINUM = 64;
+
+afterEach(() => {
+  unregisterMaterial(PLATINUM);
+  unregisterStructure('research-lab');
+});
+
+describe('material registry', () => {
+  it('adds a material that MATERIALS[] resolves immediately', () => {
+    const def: MaterialDef = {
+      id: PLATINUM,
+      name: 'Platinum ore',
+      hardness: 6,
+      yields: { resource: 'platinum', amount: 1 },
+      colors: ['#e8e4d8', '#b8b4a8', '#8a8778'],
+      jitter: 0.08,
+    };
+    expect(registerMaterial(def)).toBe(PLATINUM);
+    expect(MATERIALS[PLATINUM]).toBe(def);
+    expect(listMaterials()).toContainEqual(def);
+  });
+
+  it('refuses to unregister a built-in, but removes a custom one', () => {
+    expect(unregisterMaterial(Material.IronOre)).toBe(false);
+    expect(MATERIALS[Material.IronOre]).toBeDefined();
+
+    registerMaterial({
+      id: PLATINUM,
+      name: 'Platinum ore',
+      hardness: 6,
+      yields: { resource: 'platinum', amount: 1 },
+      colors: ['#e8e4d8', '#b8b4a8', '#8a8778'],
+      jitter: 0.08,
+    });
+    expect(unregisterMaterial(PLATINUM)).toBe(true);
+    expect(MATERIALS[PLATINUM]).toBeUndefined();
+    expect(unregisterMaterial(PLATINUM)).toBe(false); // already gone
+  });
+
+  it('mines a registered material through the real sim, not just the table', () => {
+    registerMaterial({
+      id: PLATINUM,
+      name: 'Platinum ore',
+      hardness: 1, // trivial to mine so the test does not need many ticks
+      yields: { resource: 'platinum', amount: 3 },
+      colors: ['#e8e4d8', '#b8b4a8', '#8a8778'],
+      jitter: 0,
+    });
+
+    const body = getBody('moon')!;
+    const sim = new Simulation({ body, spec: { ...defaultSpec(), id: 'r1' }, events: new EventBus() });
+    // Force the tile directly ahead of the rover to be solid platinum ore.
+    const r = sim.rover;
+    const ahead = { x: r.pos.x + 1, y: r.pos.y };
+    const h = sim.world.height(ahead.x, ahead.y);
+    sim.world.set(ahead.x, ahead.y, h, PLATINUM);
+    r.facing = 0; // +x
+
+    expect(sim.mine()).toBe(true);
+    for (let i = 0; i < 5 && (r.cargo.platinum ?? 0) === 0; i++) sim.tick();
+    expect(r.cargo.platinum).toBeGreaterThan(0);
+  });
+});
+
+describe('resource registry', () => {
+  it('names and prices a custom resource key', () => {
+    registerResource('platinum', 'Platinum');
+    registerResourceValue('platinum', 40);
+    expect(RESOURCE_NAMES.platinum).toBe('Platinum');
+    expect(RESOURCE_VALUE.platinum).toBe(40);
+  });
+
+  it('feeds mission payout like any built-in resource', () => {
+    registerResourceValue('platinum', 40);
+    const state = {
+      rover: { cargo: { platinum: 2 } },
+      anomalies: [],
+      photos: [],
+    } as unknown as MissionState;
+    expect(missionCredits(state, {})).toBe(80);
+  });
+});
+
+describe('structure registry', () => {
+  const labDef: StructureDef = {
+    type: 'research-lab',
+    name: 'Research Lab',
+    cost: { silica: 4, crystal: 1 },
+    description: 'Studies documented anomalies for a science bonus.',
+  };
+
+  it('adds a structure that STRUCTURES[] and build() both see', () => {
+    expect(registerStructure(labDef)).toBe('research-lab');
+    expect(STRUCTURES['research-lab']).toBe(labDef);
+    expect(listStructures()).toContainEqual(labDef);
+  });
+
+  it('refuses to unregister a built-in, but removes a custom one', () => {
+    expect(unregisterStructure('refinery')).toBe(false);
+    expect(STRUCTURES.refinery).toBeDefined();
+    registerStructure(labDef);
+    expect(unregisterStructure('research-lab')).toBe(true);
+    expect(STRUCTURES['research-lab']).toBeUndefined();
+  });
+
+  it('builds through the real sim once registered', () => {
+    registerStructure(labDef);
+    const body = getBody('moon')!;
+    const sim = new Simulation({ body, spec: { ...defaultSpec(), id: 'r1' }, events: new EventBus() });
+    sim.rover.cargo = { silica: 10, crystal: 5 };
+    sim.rover.cargoUsed = 15;
+    const built = sim.build('research-lab');
+    expect(built?.type).toBe('research-lab');
+    expect(sim.structures.some((s) => s.type === 'research-lab')).toBe(true);
+  });
+
+  it('is visible to a live RoverGame via the canvas facade', () => {
+    registerStructure(labDef);
+    const canvas =
+      typeof document !== 'undefined'
+        ? document.createElement('canvas')
+        : ({ getContext: () => null } as unknown as HTMLCanvasElement);
+    if (typeof document === 'undefined') return; // canvas-dependent, skip outside a DOM env
+    const body = getBody('moon')!;
+    const game = createRoverGame({ canvas, body, spec: { ...defaultSpec(), id: 'r1' }, controls: false, audio: false });
+    game.sim.rover.cargo = { silica: 10, crystal: 5 };
+    game.sim.rover.cargoUsed = 15;
+    expect(game.build('research-lab')).toBe(true);
+    game.dispose();
+  });
+});
+
+describe('stats maths still works with an open Material type', () => {
+  it('computeStats is unaffected by registry changes', () => {
+    const stats = computeStats(defaultSpec());
+    expect(stats.valid).toBe(true);
+  });
+});
diff --git a/packages/engine/test/scene.test.ts b/packages/engine/test/scene.test.ts
new file mode 100644
index 0000000..6fd9a28
--- /dev/null
+++ b/packages/engine/test/scene.test.ts
@@ -0,0 +1,134 @@
+import { describe, expect, it } from 'vitest';
+import {
+  buildScene,
+  defaultSpec,
+  entitiesOfKind,
+  EventBus,
+  getFlatPainter,
+  getBody,
+  listFlatPainterKinds,
+  listRoverParts,
+  registerRoverPart,
+  roverPaintContext,
+  Simulation,
+  unregisterRoverPart,
+} from '../src/index.js';
+
+function makeSim(bodyId = 'moon') {
+  return new Simulation({
+    body: getBody(bodyId)!,
+    spec: { ...defaultSpec(), id: 'r1' },
+    events: new EventBus(),
+  });
+}
+
+describe('scene model', () => {
+  it('flattens a running sim into entities', () => {
+    const sim = makeSim();
+    const scene = buildScene(sim);
+    expect(scene.size).toBe(sim.world.size);
+    expect(scene.view).toBe('iso');
+    expect(scene.home).toEqual(sim.landingSite);
+
+    const rovers = entitiesOfKind(scene, 'rover');
+    expect(rovers).toHaveLength(1);
+    expect(rovers[0].pos).toEqual(sim.rover.renderPos);
+    expect(rovers[0].z).toBe(sim.world.height(sim.rover.pos.x, sim.rover.pos.y));
+    expect(rovers[0].ref).toBe(sim.rover);
+  });
+
+  it('hides unscanned anomalies unless asked for them', () => {
+    const sim = makeSim();
+    expect(sim.anomalies.length).toBeGreaterThan(0);
+    expect(entitiesOfKind(buildScene(sim), 'anomaly')).toHaveLength(0);
+    expect(entitiesOfKind(buildScene(sim, { includeHidden: true }), 'anomaly')).toHaveLength(
+      sim.anomalies.length,
+    );
+
+    sim.anomalies[0].scanned = true;
+    const scene = buildScene(sim);
+    expect(entitiesOfKind(scene, 'anomaly')).toHaveLength(1);
+    expect(scene.entities.find((e) => e.kind === 'anomaly')?.data?.documented).toBe(false);
+  });
+
+  it('includes structures with their power and build state', () => {
+    const sim = makeSim();
+    sim.rover.cargo = { silica: 20, iron: 20, regolith: 20 };
+    sim.rover.cargoUsed = 60;
+    const built = sim.build('cache');
+    expect(built).not.toBeNull();
+    const scene = buildScene(sim);
+    const structures = entitiesOfKind(scene, 'structure');
+    expect(structures).toHaveLength(1);
+    expect(structures[0].variant).toBe('cache');
+    expect(structures[0].data).toHaveProperty('powered');
+  });
+
+  it('paints entities in layer order', () => {
+    const sim = makeSim();
+    sim.anomalies[0].scanned = true;
+    const scene = buildScene(sim);
+    const layers = scene.entities.map((e) => e.layer ?? 0);
+    expect([...layers].sort((a, b) => a - b)).toEqual(layers);
+  });
+
+  it('is a snapshot: mutating the sim afterwards does not move an entity', () => {
+    const sim = makeSim();
+    const scene = buildScene(sim);
+    const before = { ...entitiesOfKind(scene, 'rover')[0].pos };
+    sim.rover.renderPos.x += 5;
+    expect(entitiesOfKind(scene, 'rover')[0].pos).toEqual(before);
+  });
+});
+
+describe('flat painters', () => {
+  it('ships painters for every built-in entity kind', () => {
+    for (const kind of ['rover', 'structure', 'anomaly', 'marker']) {
+      expect(getFlatPainter(kind), kind).toBeTypeOf('function');
+    }
+    expect(listFlatPainterKinds()).toContain('rover');
+  });
+});
+
+describe('rover parts', () => {
+  it('describes the build and live state in the paint context', () => {
+    const sim = makeSim();
+    sim.rover.battery = sim.rover.stats.batteryCapacity / 2;
+    sim.rover.cargo = { iron: 4 };
+    sim.rover.cargoUsed = 4;
+    const p = roverPaintContext(sim.rover, 0.9, 0, 1.5);
+    expect(p.charge).toBeCloseTo(0.5, 6);
+    expect(p.load).toBeGreaterThan(0);
+    expect(p.cargoTop).toBe('iron');
+    // The starter build has a scoop and a nav cam, no scanner.
+    expect(p.has.tool).toBe(true);
+    expect(p.has.camera).toBe(true);
+    expect(p.has.scanner).toBe(false);
+  });
+
+  it('exposes parts in painter order and accepts host parts', () => {
+    const parts = listRoverParts();
+    expect(parts.map((p) => p.id)).toContain('chassis');
+    const orders = parts.map((p) => p.order ?? 50);
+    expect([...orders].sort((a, b) => a - b)).toEqual(orders);
+
+    registerRoverPart({ id: 'test-flag', order: 99, draw: () => undefined });
+    expect(listRoverParts().at(-1)?.id).toBe('test-flag');
+    expect(unregisterRoverPart('test-flag')).toBe(true);
+    expect(listRoverParts().some((p) => p.id === 'test-flag')).toBe(false);
+  });
+
+  it('only draws parts whose conditions hold', () => {
+    const sim = makeSim();
+    const p = roverPaintContext(sim.rover, 1, 0, 0);
+    const applicable = listRoverParts().filter((part) => !part.when || part.when(p));
+    const ids = applicable.map((part) => part.id);
+    expect(ids).toContain('chassis');
+    expect(ids).toContain('tool-arm');
+    // No scanner fitted, full hull, broad daylight, empty hold.
+    expect(ids).not.toContain('scanner');
+    expect(ids).not.toContain('damage');
+    expect(ids).not.toContain('headlights');
+    expect(ids).not.toContain('cargo');
+  });
+});
diff --git a/packages/ui/LICENSE b/packages/ui/LICENSE
new file mode 100644
index 0000000..2661875
--- /dev/null
+++ b/packages/ui/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Signal-K
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..e0c5870
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@takeon/ui",
+  "version": "0.2.0",
+  "description": "React HUD and mission shell for @takeon/engine. Every component is replaceable by the host game.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "default": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Signal-K/takeon.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/Signal-K/takeon#readme",
+  "bugs": "https://github.com/Signal-K/takeon/issues",
+  "keywords": [
+    "takeon",
+    "react",
+    "game-ui",
+    "hud",
+    "isometric",
+    "voxel"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node ../../scripts/copy-assets.mjs src/styles.css dist/styles.css",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@takeon/engine": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "typescript": "^5.6.0",
+    "react-dom": "^19.0.0",
+    "vitest": "^4.1.10"
+  }
+}
diff --git a/packages/ui/src/TakeOnMission.tsx b/packages/ui/src/TakeOnMission.tsx
new file mode 100644
index 0000000..f444b30
--- /dev/null
+++ b/packages/ui/src/TakeOnMission.tsx
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { MissionProvider, type MissionProviderProps } from './mission-context.js';
+import { MissionScreen, type MissionScreenProps } from './components/MissionScreen.js';
+import { TakeOnUIProvider, type TakeOnUIConfig } from './registry.js';
+
+export interface TakeOnMissionProps extends Omit<MissionProviderProps, 'children'> {
+  /** Component/label/theme overrides for this mission. */
+  ui?: TakeOnUIConfig;
+  /** Passed through to the stock screen. */
+  screen?: MissionScreenProps;
+  /** Rendered inside the mission root, above the HUD. */
+  children?: ReactNode;
+}
+
+/**
+ * One-component embed: provider + UI config + the stock screen.
+ *
+ * ```tsx
+ * <TakeOnMission
+ *   body={getBody('mars')!}
+ *   spec={playerRover}
+ *   sync={myAdapter}
+ *   ui={{ components: { ActionBar: MyActionBar }, theme: { accent: '#ff8a3d' } }}
+ *   onEnd={({ credits }) => router.push(`/results?c=${credits}`)}
+ * />
+ * ```
+ */
+export function TakeOnMission({ ui, screen, children, ...mission }: TakeOnMissionProps) {
+  return (
+    <TakeOnUIProvider {...ui}>
+      <MissionProvider {...mission}>
+        <MissionScreen {...screen}>{children}</MissionScreen>
+      </MissionProvider>
+    </TakeOnUIProvider>
+  );
+}
diff --git a/packages/ui/src/components/ActionBar.tsx b/packages/ui/src/components/ActionBar.tsx
new file mode 100644
index 0000000..954023b
--- /dev/null
+++ b/packages/ui/src/components/ActionBar.tsx
@@ -0,0 +1,147 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
+import { useMission, type MissionContextValue } from '../mission-context.js';
+import { createSlot, cx, Slot, useLabel, useLabels, useSlotClass } from '../registry.js';
+
+export interface ActionItem {
+  id: string;
+  icon: ReactNode;
+  label: string;
+  onSelect(ctx: MissionContextValue): void;
+  /** Hidden when this returns false (e.g. no mining tool fitted). */
+  visible?(ctx: MissionContextValue): boolean;
+  title?: string;
+  /**
+   * Put this behind the "More" tray instead of showing it on the hotbar
+   * directly. Occasional actions (build, craft, repair…) belong here so the
+   * hotbar itself never grows past a handful of buttons.
+   */
+  menu?: boolean;
+}
+
+export interface ActionBarProps {
+  /** Replace the action set outright. */
+  items?: ActionItem[];
+  /** Append to the default action set. */
+  extraItems?: ActionItem[];
+  /** Drop default actions by id. */
+  omit?: string[];
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The default action set. Exported so a host can start from it —
+ * `items={[...DEFAULT_ACTIONS.filter(a => a.id !== 'craft'), myAction]}`.
+ *
+ * Only `mine` / `photo` / `scan` sit on the hotbar directly — they're the
+ * "do it now" verbs tied to what's in front of the rover. Everything else is
+ * `menu: true` and lives behind the single "More" hex, so the bar reads as a
+ * handful of buttons rather than a control panel.
+ */
+export const DEFAULT_ACTIONS: ActionItem[] = [
+  {
+    id: 'mine',
+    icon: '⛏',
+    label: 'Mine',
+    onSelect: (ctx) => ctx.actions.mine(),
+    visible: (ctx) => ctx.hud?.can.mine ?? false,
+  },
+  {
+    id: 'photo',
+    icon: '📷',
+    label: 'Photo',
+    onSelect: (ctx) => ctx.actions.photo(),
+    visible: (ctx) => ctx.hud?.can.photo ?? false,
+  },
+  {
+    id: 'scan',
+    icon: '📡',
+    label: 'Scan',
+    onSelect: (ctx) => ctx.actions.scan(),
+    visible: (ctx) => ctx.hud?.can.scan ?? false,
+  },
+  { id: 'build', icon: '🏗', label: 'Build', onSelect: (ctx) => ctx.setPanel('build'), menu: true },
+  { id: 'craft', icon: '⚗️', label: 'Craft', onSelect: (ctx) => ctx.setPanel('craft'), menu: true },
+  { id: 'place', icon: '🧱', label: 'Place', onSelect: (ctx) => ctx.actions.placeBlock(), menu: true },
+  { id: 'repair', icon: '🔧', label: 'Repair', onSelect: (ctx) => ctx.actions.repair(), menu: true },
+  { id: 'deposit', icon: '📥', label: 'Deposit', onSelect: (ctx) => ctx.actions.deposit(), menu: true },
+  { id: 'cargo', icon: '🎒', label: 'Hold', onSelect: (ctx) => ctx.setPanel('cargo'), menu: true },
+];
+
+function DefaultActionBar({ items, extraItems, omit, className, style }: ActionBarProps) {
+  const ctx = useMission();
+  const labels = useLabels();
+  const moreLabel = useLabel('action.more', 'More');
+  const rootClass = cx('tk-actions', useSlotClass('ActionBar'), className);
+  const base = items ?? DEFAULT_ACTIONS.filter((a) => !omit?.includes(a.id));
+  const all = (extraItems ? [...base, ...extraItems] : base).filter((a) => a.visible?.(ctx) ?? true);
+  const hotbar = all.filter((a) => !a.menu);
+  const tray = all.filter((a) => a.menu);
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close on Escape and on outside click, so the tray never gets stuck open.
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setMenuOpen(false);
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [menuOpen]);
+
+  const run = (item: ActionItem) => {
+    item.onSelect(ctx);
+    setMenuOpen(false);
+  };
+
+  return (
+    <div className={rootClass} style={style} ref={containerRef}>
+      <Slot name="actionBar.start" />
+      {hotbar.map((a) => (
+        <button
+          key={a.id}
+          type="button"
+          className="tk-action"
+          title={a.title ?? a.label}
+          onClick={() => run(a)}
+        >
+          <span className="tk-action-icon">{a.icon}</span>
+          <span className="tk-action-label">{labels[`action.${a.id}`] ?? a.label}</span>
+        </button>
+      ))}
+      {tray.length > 0 && (
+        <button
+          type="button"
+          className="tk-action tk-action-more"
+          title={moreLabel}
+          aria-expanded={menuOpen}
+          aria-haspopup="menu"
+          onClick={() => setMenuOpen((v) => !v)}
+        >
+          <span className="tk-action-icon">⚙</span>
+          <span className="tk-action-label">{moreLabel}</span>
+        </button>
+      )}
+      <Slot name="actionBar.end" />
+
+      {menuOpen && tray.length > 0 && (
+        <>
+          <div className="tk-tray-backdrop" onClick={() => setMenuOpen(false)} role="presentation" />
+          <div className="tk-tray" role="menu" aria-label={moreLabel}>
+            <span className="tk-tray-head">{moreLabel}</span>
+            {tray.map((a) => (
+              <button key={a.id} type="button" role="menuitem" title={a.title} onClick={() => run(a)}>
+                <span className="tk-tray-icon">{a.icon}</span>
+                {labels[`action.${a.id}`] ?? a.label}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export const ActionBar = createSlot('ActionBar', DefaultActionBar);
diff --git a/packages/ui/src/components/BuildPanel.tsx b/packages/ui/src/components/BuildPanel.tsx
new file mode 100644
index 0000000..c4d3df3
--- /dev/null
+++ b/packages/ui/src/components/BuildPanel.tsx
@@ -0,0 +1,69 @@
+import { RESOURCE_NAMES, STRUCTURES, type ResourceKey, type StructureType } from '@takeon/engine';
+import { useMission } from '../mission-context.js';
+import { createSlot, useLabel } from '../registry.js';
+import { Modal } from './primitives.js';
+
+export interface BuildPanelProps {
+  /** Restrict what this game lets the player build. */
+  allow?: StructureType[];
+}
+
+function DefaultBuildPanel({ allow }: BuildPanelProps) {
+  const { hud, actions, setPanel } = useMission();
+  const title = useLabel('build.title', 'Construction');
+  const close = useLabel('common.close', 'Close');
+  const cargo = hud?.cargo ?? {};
+  const options = Object.values(STRUCTURES)
+    .filter((def) => def.buildable !== false)
+    .filter((def) => !allow || allow.includes(def.type));
+
+  return (
+    <Modal
+      title={title}
+      subtitle={`Structures rise on the tile ahead of the rover, paid for out of the hold. Carrying: ${describeCargo(cargo)}`}
+      onClose={() => setPanel(null)}
+      footer={
+        <button type="button" className="tk-btn" onClick={() => setPanel(null)}>
+          {close}
+        </button>
+      }
+    >
+      {options.map((def) => {
+        const affordable = Object.entries(def.cost).every(
+          ([res, qty]) => (cargo[res as ResourceKey] ?? 0) >= (qty ?? 0),
+        );
+        return (
+          <button
+            key={def.type}
+            type="button"
+            className="tk-option"
+            disabled={!affordable}
+            onClick={() => {
+              actions.build(def.type);
+              setPanel(null);
+            }}
+          >
+            <span className="tk-option-info">
+              <b>{def.name}</b>
+              <span className="tk-option-desc">{def.description}</span>
+            </span>
+            <span className="tk-tag">
+              {Object.entries(def.cost)
+                .map(([res, qty]) => `${qty} ${RESOURCE_NAMES[res as ResourceKey]}`)
+                .join(' + ')}
+            </span>
+          </button>
+        );
+      })}
+    </Modal>
+  );
+}
+
+export function describeCargo(cargo: Partial<Record<ResourceKey, number>>): string {
+  const parts = Object.entries(cargo)
+    .filter(([, qty]) => (qty ?? 0) > 0)
+    .map(([res, qty]) => `${qty} ${RESOURCE_NAMES[res as ResourceKey]}`);
+  return parts.length > 0 ? parts.join(', ') : 'empty';
+}
+
+export const BuildPanel = createSlot('BuildPanel', DefaultBuildPanel);
diff --git a/packages/ui/src/components/CargoPanel.tsx b/packages/ui/src/components/CargoPanel.tsx
new file mode 100644
index 0000000..e3e1fd7
--- /dev/null
+++ b/packages/ui/src/components/CargoPanel.tsx
@@ -0,0 +1,72 @@
+import { RESOURCE_NAMES, RESOURCE_VALUE, type ResourceKey } from '@takeon/engine';
+import { useMission } from '../mission-context.js';
+import { createSlot, useLabel } from '../registry.js';
+import { Modal } from './primitives.js';
+
+/**
+ * What the rover is carrying versus what has already been banked, with the
+ * credit value of each — the "am I done here yet?" panel.
+ */
+function DefaultCargoPanel() {
+  const { hud, setPanel } = useMission();
+  const title = useLabel('cargo.title', 'Manifest');
+  const close = useLabel('common.close', 'Close');
+  const rows = mergeRows(hud?.cargo ?? {}, hud?.banked ?? {});
+  const total = rows.reduce((sum, r) => sum + (RESOURCE_VALUE[r.resource] ?? 0) * (r.held + r.banked), 0);
+
+  return (
+    <Modal
+      title={title}
+      subtitle={`Anomalies documented ${hud?.anomalies.documented ?? 0}/${hud?.anomalies.total ?? 0} · structures ${hud?.structures ?? 0}`}
+      onClose={() => setPanel(null)}
+      footer={
+        <button type="button" className="tk-btn" onClick={() => setPanel(null)}>
+          {close}
+        </button>
+      }
+    >
+      <table className="tk-table">
+        <thead>
+          <tr>
+            <th>Resource</th>
+            <th>Hold</th>
+            <th>Banked</th>
+            <th>Credits</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 && (
+            <tr>
+              <td colSpan={4}>Nothing collected yet.</td>
+            </tr>
+          )}
+          {rows.map((r) => (
+            <tr key={r.resource}>
+              <td>{RESOURCE_NAMES[r.resource]}</td>
+              <td>{r.held || '—'}</td>
+              <td>{r.banked || '—'}</td>
+              <td>{(RESOURCE_VALUE[r.resource] ?? 0) * (r.held + r.banked)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <p className="tk-modal-sub">Estimated payout from resources: {total} credits (photos and discoveries add more).</p>
+    </Modal>
+  );
+}
+
+function mergeRows(
+  cargo: Partial<Record<ResourceKey, number>>,
+  banked: Partial<Record<ResourceKey, number>>,
+): { resource: ResourceKey; held: number; banked: number }[] {
+  const keys = new Set<ResourceKey>([
+    ...(Object.keys(cargo) as ResourceKey[]),
+    ...(Object.keys(banked) as ResourceKey[]),
+  ]);
+  return [...keys]
+    .map((resource) => ({ resource, held: cargo[resource] ?? 0, banked: banked[resource] ?? 0 }))
+    .filter((r) => r.held > 0 || r.banked > 0)
+    .sort((a, b) => b.held + b.banked - (a.held + a.banked));
+}
+
+export const CargoPanel = createSlot('CargoPanel', DefaultCargoPanel);
diff --git a/packages/ui/src/components/CraftPanel.tsx b/packages/ui/src/components/CraftPanel.tsx
new file mode 100644
index 0000000..371c274
--- /dev/null
+++ b/packages/ui/src/components/CraftPanel.tsx
@@ -0,0 +1,62 @@
+import { RECIPES, RESOURCE_NAMES, type ResourceKey } from '@takeon/engine';
+import { useMission } from '../mission-context.js';
+import { createSlot, useLabel } from '../registry.js';
+import { describeCargo } from './BuildPanel.js';
+import { Modal } from './primitives.js';
+
+export interface CraftPanelProps {
+  /** Restrict the recipe list (by recipe id). */
+  allow?: string[];
+}
+
+function DefaultCraftPanel({ allow }: CraftPanelProps) {
+  const { hud, actions, setPanel } = useMission();
+  const title = useLabel('craft.title', 'Refining');
+  const close = useLabel('common.close', 'Close');
+  const cargo = hud?.cargo ?? {};
+  const recipes = allow ? RECIPES.filter((r) => allow.includes(r.id)) : RECIPES;
+
+  return (
+    <Modal
+      title={title}
+      subtitle={`Processed on the rover, from the hold. Carrying: ${describeCargo(cargo)}`}
+      onClose={() => setPanel(null)}
+      footer={
+        <button type="button" className="tk-btn" onClick={() => setPanel(null)}>
+          {close}
+        </button>
+      }
+    >
+      {recipes.map((rec) => {
+        const affordable = Object.entries(rec.input).every(
+          ([res, qty]) => (cargo[res as ResourceKey] ?? 0) >= (qty ?? 0),
+        );
+        return (
+          <button
+            key={rec.id}
+            type="button"
+            className="tk-option"
+            disabled={!affordable}
+            onClick={() => actions.craft(rec.id)}
+          >
+            <span className="tk-option-info">
+              <b>
+                {rec.name}
+                {rec.near ? ' (needs refinery)' : ''}
+              </b>
+              <span className="tk-option-desc">{rec.description}</span>
+            </span>
+            <span className="tk-tag">
+              {Object.entries(rec.input)
+                .map(([res, qty]) => `${qty} ${RESOURCE_NAMES[res as ResourceKey]}`)
+                .join(' + ')}{' '}
+              → {rec.output.amount} {RESOURCE_NAMES[rec.output.resource]}
+            </span>
+          </button>
+        );
+      })}
+    </Modal>
+  );
+}
+
+export const CraftPanel = createSlot('CraftPanel', DefaultCraftPanel);
diff --git a/packages/ui/src/components/CrossSectionView.tsx b/packages/ui/src/components/CrossSectionView.tsx
new file mode 100644
index 0000000..97914cf
--- /dev/null
+++ b/packages/ui/src/components/CrossSectionView.tsx
@@ -0,0 +1,61 @@
+import { renderCrossSection } from '@takeon/engine';
+import { useEffect, useRef, type CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, useLabel, useSlotClass } from '../registry.js';
+
+export interface CrossSectionViewProps {
+  /** Slice orientation. Default `'y'` (an east-west wall, looking north). */
+  axis?: 'x' | 'y';
+  /** Fixed row/column to slice; omit to follow the rover along that axis. */
+  index?: number;
+  /** Redraw period in ms. Default 400 — depth changes are driven by mining/driving, not every frame. */
+  intervalMs?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The "underground" view: a live vertical slice through the actual generated
+ * world at the rover's position (or a fixed row/column), painted with the
+ * real material colours — including any depth-stratified ore a body's
+ * `terrain.bands` authored. Unlike a decorative strata illustration, what you
+ * mine is what's drawn here.
+ *
+ * Sized by its container (not a fixed canvas), so it works equally as a small
+ * HUD inset or a full-screen panel — mount it inside `slots={{ 'mission.overlay': <CrossSectionView/> }}`,
+ * a custom panel, or a standalone screen; it is not part of the default
+ * `MissionScreen` layout since not every game wants an underground view.
+ */
+function DefaultCrossSectionView({ axis = 'y', index, intervalMs = 400, className, style }: CrossSectionViewProps) {
+  const { game } = useMission();
+  const ref = useRef<HTMLCanvasElement>(null);
+  const label = useLabel('crossSection.label', 'Subsurface');
+
+  useEffect(() => {
+    if (!game) return;
+    const draw = () => {
+      const canvas = ref.current;
+      if (!canvas) return;
+      const world = game.sim.world;
+      const rover = game.sim.rover;
+      const at = index ?? Math.round(axis === 'y' ? rover.pos.y : rover.pos.x);
+      renderCrossSection(canvas, world, axis, Math.max(0, Math.min(world.size - 1, at)));
+    };
+    draw();
+    const timer = setInterval(draw, intervalMs);
+    window.addEventListener('resize', draw);
+    return () => {
+      clearInterval(timer);
+      window.removeEventListener('resize', draw);
+    };
+  }, [game, axis, index, intervalMs]);
+
+  return (
+    <div className={cx('tk-cross-section', useSlotClass('CrossSectionView'), className)} style={style}>
+      <canvas ref={ref} className="tk-cross-section-canvas" />
+      <span className="tk-cross-section-label">{label}</span>
+    </div>
+  );
+}
+
+export const CrossSectionView = createSlot('CrossSectionView', DefaultCrossSectionView);
diff --git a/packages/ui/src/components/DPad.tsx b/packages/ui/src/components/DPad.tsx
new file mode 100644
index 0000000..6505b73
--- /dev/null
+++ b/packages/ui/src/components/DPad.tsx
@@ -0,0 +1,43 @@
+import type { CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, useLabel, useSlotClass } from '../registry.js';
+
+export interface DPadProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Touch drive pad. Directions are screen-relative — the engine maps them onto
+ * world axes for the current view rotation, so "up" is always up.
+ */
+function DefaultDPad({ className, style }: DPadProps) {
+  const { actions } = useMission();
+  const label = useLabel('dpad.aria', 'Drive controls');
+  const centre = useLabel('dpad.centre', 'Centre camera');
+  return (
+    <div className={cx('tk-dpad', useSlotClass('DPad'), className)} style={style} aria-label={label}>
+      <span className="tk-blank" />
+      <button type="button" onPointerDown={() => actions.move(3)} aria-label={useLabel('dpad.ne', 'Drive north-east')}>
+        ▲
+      </button>
+      <span className="tk-blank" />
+      <button type="button" onPointerDown={() => actions.move(2)} aria-label={useLabel('dpad.nw', 'Drive north-west')}>
+        ◀
+      </button>
+      <button type="button" onPointerDown={actions.centreCamera} aria-label={centre}>
+        ◎
+      </button>
+      <button type="button" onPointerDown={() => actions.move(0)} aria-label={useLabel('dpad.se', 'Drive south-east')}>
+        ▶
+      </button>
+      <span className="tk-blank" />
+      <button type="button" onPointerDown={() => actions.move(1)} aria-label={useLabel('dpad.sw', 'Drive south-west')}>
+        ▼
+      </button>
+      <span className="tk-blank" />
+    </div>
+  );
+}
+
+export const DPad = createSlot('DPad', DefaultDPad);
diff --git a/packages/ui/src/components/EndMissionDialog.tsx b/packages/ui/src/components/EndMissionDialog.tsx
new file mode 100644
index 0000000..d82cd21
--- /dev/null
+++ b/packages/ui/src/components/EndMissionDialog.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, useLabel } from '../registry.js';
+import { Modal } from './primitives.js';
+
+export interface EndMissionDialogProps {
+  /** Called after the yield has been banked (host usually routes away). */
+  onEnded?(credits: number): void;
+}
+
+function DefaultEndMissionDialog({ onEnded }: EndMissionDialogProps) {
+  const { hud, actions, setPanel } = useMission();
+  const [busy, setBusy] = useState(false);
+  const lost = hud?.status === 'lost';
+  const keep = useLabel('end.keep', 'Keep driving');
+  const title = useLabel(lost ? 'end.lostTitle' : 'end.title', lost ? 'Rover lost' : 'End mission and recover yield?');
+  const confirm = useLabel(
+    lost ? 'end.lostConfirm' : 'end.confirm',
+    lost ? 'Write off rover & collect science' : 'Recover & end mission',
+  );
+  const subtitle = lost
+    ? 'The mission is over, but documented discoveries and photos still count. Banked cache deposits are credited; cargo on the rover is not recovered.'
+    : 'Cargo, cache deposits, photos and documented discoveries convert to credits.';
+
+  return (
+    <Modal title={title} subtitle={subtitle} onClose={() => (lost ? undefined : setPanel(null))}>
+      <button
+        type="button"
+        className="tk-btn tk-btn-primary"
+        disabled={busy}
+        onClick={async () => {
+          setBusy(true);
+          const credits = await actions.endMission();
+          setPanel(null);
+          onEnded?.(credits);
+        }}
+      >
+        {confirm}
+      </button>
+      {!lost && (
+        <button type="button" className="tk-btn" onClick={() => setPanel(null)}>
+          {keep}
+        </button>
+      )}
+    </Modal>
+  );
+}
+
+export const EndMissionDialog = createSlot('EndMissionDialog', DefaultEndMissionDialog);
diff --git a/packages/ui/src/components/HudBar.tsx b/packages/ui/src/components/HudBar.tsx
new file mode 100644
index 0000000..dd1e54d
--- /dev/null
+++ b/packages/ui/src/components/HudBar.tsx
@@ -0,0 +1,98 @@
+import type { CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, Slot, useLabel, useSlotClass } from '../registry.js';
+import { Chip, Meter } from './primitives.js';
+
+export interface HudBarProps {
+  /** Hide individual meters when the host wants a leaner bar. */
+  show?: { battery?: boolean; durability?: boolean; cargo?: boolean; daylight?: boolean; weather?: boolean };
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Status rack: the three survival gauges in one notched instrument panel,
+ * with the environment read-out and view controls flanking it.
+ */
+function DefaultHudBar({ show, className, style }: HudBarProps) {
+  const { hud, actions, minimapVisible, setMinimapVisible, setPanel } = useMission();
+  const rotateLabel = useLabel('hud.rotate', 'Rotate view (R)');
+  const viewLabel = useLabel('hud.view', 'Switch between the 3D diorama and the 2D map');
+  const mapLabel = useLabel('hud.map', 'Toggle map');
+  const endLabel = useLabel('hud.end', 'End');
+  const batteryLabel = useLabel('hud.battery', 'Power');
+  const durabilityLabel = useLabel('hud.durability', 'Hull');
+  const cargoLabel = useLabel('hud.cargo', 'Hold');
+  const rootClass = cx('tk-hudbar', useSlotClass('HudBar'), className);
+  if (!hud) return null;
+
+  const on = (key: keyof NonNullable<HudBarProps['show']>) => show?.[key] !== false;
+  const sun = hud.daylight > 0.5 ? '☀' : hud.daylight > 0 ? '◐' : '☾';
+  const sunLabel = hud.daylight > 0.5 ? 'Day' : hud.daylight > 0 ? 'Dusk' : 'Night';
+
+  return (
+    <div className={rootClass} style={style}>
+      <Slot name="hudBar.start" />
+      <div className="tk-rack">
+        {on('battery') && (
+          <Meter icon="⚡" label={batteryLabel} value={hud.battery} max={hud.batteryMax} dangerBelow={0.2} />
+        )}
+        {on('durability') && (
+          <Meter
+            icon="🛡"
+            label={durabilityLabel}
+            value={hud.durability}
+            max={hud.durabilityMax}
+            tone="good"
+            dangerBelow={0.25}
+          />
+        )}
+        {on('cargo') && (
+          <Meter icon="▣" label={cargoLabel} value={hud.cargoUsed} max={hud.cargoMax} tone="warn" />
+        )}
+      </div>
+
+      <div className="tk-readout">
+        {on('daylight') && (
+          <Chip title={`Daylight ${Math.round(hud.daylight * 100)}%`}>
+            <b>{sun}</b> {sunLabel}
+          </Chip>
+        )}
+        {on('weather') && hud.weather && (
+          <Chip tone="warn" title={hud.weather.name}>
+            <b>{hud.weather.icon}</b> {hud.weather.name}
+          </Chip>
+        )}
+      </div>
+
+      <span className="tk-spacer" />
+      <Slot name="hudBar.end" />
+      <button
+        type="button"
+        className="tk-btn tk-btn-icon"
+        onClick={() => actions.toggleView()}
+        title={viewLabel}
+        aria-label={viewLabel}
+      >
+        {hud.view === 'flat' ? '▦' : '⬔'}
+      </button>
+      <button type="button" className="tk-btn tk-btn-icon" onClick={actions.rotateView} title={rotateLabel}>
+        ⟳
+      </button>
+      <button
+        type="button"
+        className="tk-btn tk-btn-icon"
+        onClick={() => setMinimapVisible(!minimapVisible)}
+        title={mapLabel}
+        aria-pressed={minimapVisible}
+      >
+        ⬡
+      </button>
+      <button type="button" className="tk-btn" onClick={() => setPanel('end')}>
+        {endLabel}
+      </button>
+    </div>
+  );
+}
+
+export const HudBar = createSlot('HudBar', DefaultHudBar);
diff --git a/packages/ui/src/components/Minimap.tsx b/packages/ui/src/components/Minimap.tsx
new file mode 100644
index 0000000..1f02a68
--- /dev/null
+++ b/packages/ui/src/components/Minimap.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef, type CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, useSlotClass } from '../registry.js';
+
+export interface MinimapProps {
+  size?: number;
+  /** Redraw period in ms. */
+  intervalMs?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+function DefaultMinimap({ size = 132, intervalMs = 1200, className, style }: MinimapProps) {
+  const { game, minimapVisible } = useMission();
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!game || !minimapVisible) return;
+    const draw = () => {
+      if (ref.current) game.renderer.renderMinimap(ref.current);
+    };
+    draw();
+    const timer = setInterval(draw, intervalMs);
+    return () => clearInterval(timer);
+  }, [game, minimapVisible, intervalMs]);
+
+  return (
+    <div
+      className={cx('tk-minimap', useSlotClass('Minimap'), className)}
+      style={{ display: minimapVisible ? 'block' : 'none', ...style }}
+    >
+      <canvas ref={ref} width={size} height={size} className="tk-minimap-canvas" />
+      <span className="tk-minimap-label">Survey</span>
+    </div>
+  );
+}
+
+export const Minimap = createSlot('Minimap', DefaultMinimap);
diff --git a/packages/ui/src/components/MissionCanvas.tsx b/packages/ui/src/components/MissionCanvas.tsx
new file mode 100644
index 0000000..cd172e8
--- /dev/null
+++ b/packages/ui/src/components/MissionCanvas.tsx
@@ -0,0 +1,28 @@
+import type { CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, useLabel, useSlotClass } from '../registry.js';
+
+export interface MissionCanvasProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The render surface. Mounting it is what boots the engine — the provider
+ * waits for a canvas before creating the game, so a host can delay or replace
+ * this component and nothing else breaks.
+ */
+function DefaultMissionCanvas({ className, style }: MissionCanvasProps) {
+  const { attachCanvas } = useMission();
+  const label = useLabel('canvas.aria', 'Rover mission view');
+  return (
+    <canvas
+      ref={attachCanvas}
+      className={cx('tk-canvas', useSlotClass('MissionCanvas'), className)}
+      style={style}
+      aria-label={label}
+    />
+  );
+}
+
+export const MissionCanvas = createSlot('MissionCanvas', DefaultMissionCanvas);
diff --git a/packages/ui/src/components/MissionScreen.tsx b/packages/ui/src/components/MissionScreen.tsx
new file mode 100644
index 0000000..3cf8f88
--- /dev/null
+++ b/packages/ui/src/components/MissionScreen.tsx
@@ -0,0 +1,72 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, Slot, useSlotClass } from '../registry.js';
+import { ActionBar } from './ActionBar.js';
+import { BuildPanel } from './BuildPanel.js';
+import { CargoPanel } from './CargoPanel.js';
+import { CraftPanel } from './CraftPanel.js';
+import { DPad } from './DPad.js';
+import { EndMissionDialog } from './EndMissionDialog.js';
+import { HudBar } from './HudBar.js';
+import { Minimap } from './Minimap.js';
+import { MissionCanvas } from './MissionCanvas.js';
+import { TileMenu } from './TileMenu.js';
+import { ToastStack } from './ToastStack.js';
+
+export type MissionScreenPart =
+  | 'canvas'
+  | 'hudBar'
+  | 'minimap'
+  | 'dpad'
+  | 'actions'
+  | 'tileMenu'
+  | 'toasts'
+  | 'panels';
+
+export interface MissionScreenProps {
+  /** Parts to leave out — a host replacing the HUD wholesale passes them here. */
+  hide?: MissionScreenPart[];
+  /** Called once the mission has been banked and closed out. */
+  onEnded?(credits: number): void;
+  /** Rendered on top of everything (host chrome, quest overlays…). */
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The stock mission layout: render surface plus the standard HUD. Every child
+ * is registry-resolved, so a host can swap any one of them (or hide it and
+ * render its own) without reimplementing the rest.
+ */
+function DefaultMissionScreen({ hide, onEnded, children, className, style }: MissionScreenProps) {
+  const { panel, hud, status, error } = useMission();
+  const rootClass = cx('tk-mission', useSlotClass('MissionScreen'), className);
+  const on = (part: MissionScreenPart) => !hide?.includes(part);
+  const showEnd = panel === 'end' || hud?.status === 'lost';
+
+  return (
+    <div className={rootClass} style={style}>
+      {on('canvas') && <MissionCanvas />}
+      {status === 'error' && <div className="tk-error">{error}</div>}
+      {on('hudBar') && <HudBar />}
+      {on('minimap') && <Minimap />}
+      {on('dpad') && <DPad />}
+      {on('actions') && <ActionBar />}
+      {on('tileMenu') && <TileMenu />}
+      {on('toasts') && <ToastStack />}
+      {on('panels') && (
+        <>
+          {panel === 'build' && <BuildPanel />}
+          {panel === 'craft' && <CraftPanel />}
+          {panel === 'cargo' && <CargoPanel />}
+          {showEnd && <EndMissionDialog onEnded={onEnded} />}
+        </>
+      )}
+      <Slot name="mission.overlay" />
+      {children}
+    </div>
+  );
+}
+
+export const MissionScreen = createSlot('MissionScreen', DefaultMissionScreen);
diff --git a/packages/ui/src/components/TileMenu.tsx b/packages/ui/src/components/TileMenu.tsx
new file mode 100644
index 0000000..0c27234
--- /dev/null
+++ b/packages/ui/src/components/TileMenu.tsx
@@ -0,0 +1,92 @@
+import { MATERIALS, RESOURCE_NAMES } from '@takeon/engine';
+import type { CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, Slot, useLabels, useSlotClass } from '../registry.js';
+
+export interface TileMenuProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Context menu for a tapped tile: what it is, and what the rover can be
+ * ordered to do about it.
+ */
+function DefaultTileMenu({ className, style }: TileMenuProps) {
+  const { game, tileMenu, setTileMenu, actions, hud, pushToast, canvas } = useMission();
+  const labels = useLabels();
+  const rootClass = cx('tk-tilemenu', useSlotClass('TileMenu'), className);
+  if (!game || !tileMenu) return null;
+
+  const { tile } = tileMenu;
+  const world = game.sim.world;
+  const material = MATERIALS[world.surfaceMaterial(tile.x, tile.y)];
+  const height = world.height(tile.x, tile.y);
+  const canMine = height > 0 && (hud?.can.mine ?? false);
+  const yieldName = material.yields ? RESOURCE_NAMES[material.yields.resource] : null;
+  const structure = game.sim.structures.find((s) => s.pos.x === tile.x && s.pos.y === tile.y);
+
+  return (
+    <div
+      className={rootClass}
+      style={{
+        left: Math.min(tileMenu.x, (canvas?.clientWidth ?? 400) - 180),
+        top: Math.min(tileMenu.y, (canvas?.clientHeight ?? 400) - 190),
+        ...style,
+      }}
+    >
+      <span className="tk-tilemenu-head">
+        {material.name} · [{tile.x},{tile.y}] · z{height}
+      </span>
+      <button
+        type="button"
+        onClick={() => {
+          actions.walkTo(tile.x, tile.y);
+          setTileMenu(null);
+        }}
+      >
+        🛞 {labels['tile.drive'] ?? 'Drive here'}
+      </button>
+      {canMine && (
+        <button
+          type="button"
+          onClick={() => {
+            actions.orderMine(tile.x, tile.y);
+            setTileMenu(null);
+            pushToast(`Mining order: ${material.name}`);
+          }}
+        >
+          ⛏ {labels['tile.mine'] ?? `Mine ${yieldName ?? material.name}`}
+        </button>
+      )}
+      {structure && (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              actions.rotateStructure(structure.id);
+              setTileMenu(null);
+            }}
+          >
+            ⟳ {labels['tile.rotate'] ?? 'Rotate structure'}
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              actions.demolish(structure.id);
+              setTileMenu(null);
+            }}
+          >
+            🧨 {labels['tile.demolish'] ?? 'Demolish'}
+          </button>
+        </>
+      )}
+      <Slot name="tileMenu.end" />
+      <button type="button" onClick={() => setTileMenu(null)}>
+        ✕ {labels['tile.cancel'] ?? 'Cancel'}
+      </button>
+    </div>
+  );
+}
+
+export const TileMenu = createSlot('TileMenu', DefaultTileMenu);
diff --git a/packages/ui/src/components/ToastStack.tsx b/packages/ui/src/components/ToastStack.tsx
new file mode 100644
index 0000000..b0cd2d0
--- /dev/null
+++ b/packages/ui/src/components/ToastStack.tsx
@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+import { useMission } from '../mission-context.js';
+import { createSlot, cx, useSlotClass } from '../registry.js';
+
+export interface ToastStackProps {
+  className?: string;
+  style?: CSSProperties;
+}
+
+function DefaultToastStack({ className, style }: ToastStackProps) {
+  const { toasts, dismissToast } = useMission();
+  return (
+    <div className={cx('tk-toasts', useSlotClass('ToastStack'), className)} style={style} aria-live="polite">
+      {toasts.map((t) => (
+        <div key={t.id} className={cx('tk-toast', `tk-toast-${t.kind}`)} onClick={() => dismissToast(t.id)}>
+          {t.text}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export const ToastStack = createSlot('ToastStack', DefaultToastStack);
diff --git a/packages/ui/src/components/primitives.tsx b/packages/ui/src/components/primitives.tsx
new file mode 100644
index 0000000..f92e536
--- /dev/null
+++ b/packages/ui/src/components/primitives.tsx
@@ -0,0 +1,119 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { createSlot, cx, useSlotClass } from '../registry.js';
+
+export type Tone = 'accent' | 'good' | 'warn' | 'bad' | 'neutral';
+
+export interface MeterProps {
+  icon?: ReactNode;
+  label?: string;
+  value: number;
+  max: number;
+  /** Colour family for the bar. */
+  tone?: Tone;
+  /** Switches to the danger tone once `value/max` drops below this. */
+  dangerBelow?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A segmented resource gauge: icon, label, notched bar, readout. Segmented
+ * rather than smooth so a glance reads as "eleven of twenty" — pulp
+ * instrumentation, not a progress bar.
+ */
+function DefaultMeter({
+  icon,
+  label,
+  value,
+  max,
+  tone = 'accent',
+  dangerBelow = 0,
+  className,
+  style,
+}: MeterProps) {
+  const ratio = max > 0 ? Math.max(0, Math.min(1, value / max)) : 0;
+  const effective: Tone = ratio < dangerBelow ? 'bad' : tone;
+  return (
+    <div
+      className={cx('tk-meter', useSlotClass('Meter'), className)}
+      style={style}
+      data-tone={effective}
+      title={label}
+    >
+      {icon && <span className="tk-meter-icon">{icon}</span>}
+      <span className="tk-meter-body">
+        <span className="tk-meter-head">
+          <span className="tk-meter-label">{label}</span>
+          <span className="tk-meter-value">
+            {Math.round(value)}
+            <em>/{Math.round(max)}</em>
+          </span>
+        </span>
+        <span className="tk-bar">
+          <span className="tk-bar-fill" style={{ width: `${ratio * 100}%` }} />
+        </span>
+      </span>
+    </div>
+  );
+}
+
+export const Meter = createSlot('Meter', DefaultMeter);
+
+export interface ModalProps {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  onClose(): void;
+  children?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+
+function DefaultModal({ title, subtitle, onClose, children, footer, className }: ModalProps) {
+  return (
+    <div className={cx('tk-backdrop', useSlotClass('Modal'), className)} onClick={onClose} role="presentation">
+      <div className="tk-modal" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
+        {title && (
+          <div className="tk-modal-bar">
+            <h3 className="tk-modal-title">{title}</h3>
+            <button type="button" className="tk-modal-close" onClick={onClose} aria-label="Close">
+              ✕
+            </button>
+          </div>
+        )}
+        <div className="tk-modal-body">
+          {subtitle && <p className="tk-modal-sub">{subtitle}</p>}
+          {children}
+        </div>
+        {footer && <div className="tk-modal-foot">{footer}</div>}
+      </div>
+    </div>
+  );
+}
+
+export const Modal = createSlot('Modal', DefaultModal);
+
+export interface ChipProps {
+  children: ReactNode;
+  title?: string;
+  tone?: Tone;
+  onClick?(): void;
+  className?: string;
+}
+
+function DefaultChip({ children, title, tone, onClick, className }: ChipProps) {
+  const cls = cx('tk-chip', useSlotClass('Chip'), className);
+  if (!onClick) {
+    return (
+      <span className={cls} title={title} data-tone={tone}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <button type="button" className={cls} title={title} data-tone={tone} onClick={onClick}>
+      {children}
+    </button>
+  );
+}
+
+export const Chip = createSlot('Chip', DefaultChip);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..9f76df5
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,95 @@
+/**
+ * @takeon/ui — React shell for @takeon/engine.
+ *
+ * Two ideas:
+ *  1. `MissionProvider` owns a running mission (engine lifecycle, HUD
+ *     snapshot, toasts, persistence) and exposes it through hooks.
+ *  2. Every component is registered by key through `createSlot`, so the app
+ *     sitting on top of TakeOn can replace, wrap, restyle or extend any part
+ *     of the interface via `TakeOnUIProvider` — no forking, no prop drilling.
+ *
+ * Import the stylesheet once: `import '@takeon/ui/styles.css'`.
+ */
+
+export {
+  TakeOnUIProvider,
+  useTakeOnUI,
+  createSlot,
+  useSlot,
+  useSlotClass,
+  useLabel,
+  useLabels,
+  Slot,
+  cx,
+  type TakeOnUIConfig,
+  type TakeOnUIProviderProps,
+  type SlotContent,
+  type Slotted,
+  type AnyComponent,
+} from './registry.js';
+
+export {
+  MissionProvider,
+  useMission,
+  useMissionMaybe,
+  useHud,
+  useMissionActions,
+  type MissionProviderProps,
+  type MissionContextValue,
+  type MissionActions,
+  type MissionHud,
+  type MissionPanel,
+  type TileMenuTarget,
+  type Toast,
+  type ToastKind,
+} from './mission-context.js';
+
+export { TakeOnMission, type TakeOnMissionProps } from './TakeOnMission.js';
+
+export { MissionScreen, type MissionScreenProps, type MissionScreenPart } from './components/MissionScreen.js';
+export { MissionCanvas, type MissionCanvasProps } from './components/MissionCanvas.js';
+export { HudBar, type HudBarProps } from './components/HudBar.js';
+export { DPad, type DPadProps } from './components/DPad.js';
+export { ActionBar, DEFAULT_ACTIONS, type ActionBarProps, type ActionItem } from './components/ActionBar.js';
+export { Minimap, type MinimapProps } from './components/Minimap.js';
+export { CrossSectionView, type CrossSectionViewProps } from './components/CrossSectionView.js';
+export { TileMenu, type TileMenuProps } from './components/TileMenu.js';
+export { BuildPanel, describeCargo, type BuildPanelProps } from './components/BuildPanel.js';
+export { CraftPanel, type CraftPanelProps } from './components/CraftPanel.js';
+export { CargoPanel } from './components/CargoPanel.js';
+export { ToastStack, type ToastStackProps } from './components/ToastStack.js';
+export { EndMissionDialog, type EndMissionDialogProps } from './components/EndMissionDialog.js';
+export { Meter, Modal, Chip, type MeterProps, type ModalProps, type ChipProps } from './components/primitives.js';
+
+/**
+ * Every slot key the built-in UI registers. Handy for hosts that want to
+ * enumerate what they can override (the editor lists these).
+ */
+export const SLOT_KEYS = [
+  'MissionScreen',
+  'MissionCanvas',
+  'HudBar',
+  'DPad',
+  'ActionBar',
+  'Minimap',
+  'CrossSectionView',
+  'TileMenu',
+  'BuildPanel',
+  'CraftPanel',
+  'CargoPanel',
+  'ToastStack',
+  'EndMissionDialog',
+  'Meter',
+  'Modal',
+  'Chip',
+] as const;
+
+/** Anchor points that accept host-supplied content. */
+export const SLOT_ANCHORS = [
+  'hudBar.start',
+  'hudBar.end',
+  'actionBar.start',
+  'actionBar.end',
+  'tileMenu.end',
+  'mission.overlay',
+] as const;
diff --git a/packages/ui/src/mission-context.tsx b/packages/ui/src/mission-context.tsx
new file mode 100644
index 0000000..738b46f
--- /dev/null
+++ b/packages/ui/src/mission-context.tsx
@@ -0,0 +1,545 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  createRoverGame,
+  GAME_EVENT_KEYS,
+  RESOURCE_NAMES,
+  STRUCTURES,
+  WEATHER_INFO,
+  type ActiveWeather,
+  type Anomaly,
+  type BodyDef,
+  type GameEventKey,
+  type GameEvents,
+  type MissionState,
+  type PhotoMeta,
+  type ResourceKey,
+  type RoverGame,
+  type RoverOrder,
+  type RoverSpec,
+  type StructureType,
+  type SyncAdapter,
+  type Vec2,
+  type ViewKind,
+} from '@takeon/engine';
+
+/**
+ * Owns one running mission: it boots the engine against a canvas, keeps a
+ * React-friendly snapshot of the rover state, routes engine events to toasts
+ * and persistence, and exposes the player actions.
+ *
+ * The provider is deliberately free of routing, data loading and styling —
+ * a host loads the `MissionState` it wants resumed and hands it in, so the
+ * same provider works in the Next.js app, in the editor's play mode and
+ * inside another game's screen.
+ */
+
+export type ToastKind = 'info' | 'warn' | 'good' | 'bad';
+
+export interface Toast {
+  id: number;
+  text: string;
+  kind: ToastKind;
+}
+
+export interface MissionHud {
+  /** Game seconds since landing. */
+  time: number;
+  battery: number;
+  batteryMax: number;
+  durability: number;
+  durabilityMax: number;
+  fuel: number;
+  fuelMax: number;
+  cargo: Partial<Record<ResourceKey, number>>;
+  cargoUsed: number;
+  cargoMax: number;
+  banked: Partial<Record<ResourceKey, number>>;
+  /** 0 = night, 1 = noon. */
+  daylight: number;
+  weather: { type: ActiveWeather['type']; name: string; icon: string; intensity: number } | null;
+  status: MissionState['status'];
+  pos: Vec2;
+  facing: 0 | 1 | 2 | 3;
+  /** Which action buttons the fitted parts support. */
+  can: { mine: boolean; photo: boolean; scan: boolean };
+  mobility: number;
+  /** Which renderer is live: the iso diorama or the flat 2D map. */
+  view: ViewKind;
+  structures: number;
+  anomalies: { total: number; scanned: number; documented: number };
+  order: RoverOrder | null;
+}
+
+export type MissionPanel = 'build' | 'craft' | 'end' | 'cargo' | null;
+
+export interface TileMenuTarget {
+  tile: Vec2;
+  /** Canvas-space position of the tap, for placing the menu. */
+  x: number;
+  y: number;
+}
+
+export interface MissionActions {
+  move(dir: 0 | 1 | 2 | 3): void;
+  walkTo(x: number, y: number): void;
+  orderMine(x: number, y: number): void;
+  cancelOrder(): void;
+  mine(): void;
+  photo(): void;
+  scan(): void;
+  build(type: StructureType): void;
+  craft(recipeId: string): void;
+  placeBlock(): void;
+  repair(): void;
+  deposit(): void;
+  launchCargo(): void;
+  upgradeMobility(): void;
+  rotateView(): void;
+  /** Switch renderer: 'iso' diorama or 'flat' top-down map. */
+  setView(view: ViewKind): void;
+  /** Flip between the two built-in views; returns the new one. */
+  toggleView(): ViewKind;
+  centreCamera(): void;
+  demolish(id: string): void;
+  rotateStructure(id: string): void;
+  /** Persist immediately (also runs on autosave and on tab hide). */
+  save(): Promise<void>;
+  /** Bank the yield and finish. Resolves with the credits awarded. */
+  endMission(): Promise<number>;
+}
+
+export interface MissionContextValue {
+  game: RoverGame | null;
+  body: BodyDef;
+  spec: RoverSpec;
+  hud: MissionHud | null;
+  status: 'booting' | 'running' | 'ended' | 'error';
+  error: string | null;
+  toasts: Toast[];
+  pushToast(text: string, kind?: ToastKind): void;
+  dismissToast(id: number): void;
+  actions: MissionActions;
+  /** Attach the render surface; `MissionCanvas` does this for you. */
+  attachCanvas(el: HTMLCanvasElement | null): void;
+  canvas: HTMLCanvasElement | null;
+  panel: MissionPanel;
+  setPanel(panel: MissionPanel): void;
+  tileMenu: TileMenuTarget | null;
+  setTileMenu(target: TileMenuTarget | null): void;
+  minimapVisible: boolean;
+  setMinimapVisible(visible: boolean): void;
+}
+
+const MissionContext = createContext<MissionContextValue | null>(null);
+
+export interface MissionProviderProps {
+  body: BodyDef;
+  spec: RoverSpec;
+  seed?: number;
+  /** A previously serialised mission to continue. */
+  resume?: MissionState;
+  /** Persistence. Omit for a throwaway session (editor play mode). */
+  sync?: SyncAdapter;
+  /** Autosave period in ms; 0 disables. Default 20000. */
+  autosaveMs?: number;
+  /** HUD sampling period in ms. Default 250. */
+  hudIntervalMs?: number;
+  /** Built-in keyboard/touch controls. Default true. */
+  controls?: boolean;
+  /** Synthesised audio. Default true. */
+  audio?: boolean;
+  /** Built-in event toasts. Default true. */
+  toasts?: boolean;
+  /** Which renderer to open in. Default the isometric diorama. */
+  view?: ViewKind;
+  onReady?(game: RoverGame): void;
+  onPhoto?(dataUrl: string | null, meta: PhotoMeta): void;
+  onSave?(state: MissionState): void | Promise<void>;
+  onDiscovery?(anomaly: Anomaly): void;
+  onEnd?(result: { state: MissionState; credits: number; banked: Partial<Record<ResourceKey, number>> }): void;
+  onError?(message: string): void;
+  /** Firehose of engine events, for host analytics/quests. */
+  onEvent?<K extends GameEventKey>(key: K, payload: GameEvents[K]): void;
+  children: ReactNode;
+}
+
+let toastSeq = 0;
+
+export function MissionProvider(props: MissionProviderProps) {
+  const {
+    body,
+    spec,
+    seed,
+    resume,
+    sync,
+    autosaveMs = 20000,
+    hudIntervalMs = 250,
+    controls = true,
+    audio = true,
+    toasts: toastsEnabled = true,
+    view,
+    children,
+  } = props;
+
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+  const [game, setGame] = useState<RoverGame | null>(null);
+  const [hud, setHud] = useState<MissionHud | null>(null);
+  const [status, setStatus] = useState<MissionContextValue['status']>('booting');
+  const [error, setError] = useState<string | null>(null);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [panel, setPanel] = useState<MissionPanel>(null);
+  const [tileMenu, setTileMenu] = useState<TileMenuTarget | null>(null);
+  const [minimapVisible, setMinimapVisible] = useState(true);
+
+  const gameRef = useRef<RoverGame | null>(null);
+  // Callbacks live in a ref so re-renders never restart the mission.
+  const cb = useRef(props);
+  cb.current = props;
+
+  const pushToast = useCallback((text: string, kind: ToastKind = 'info') => {
+    const id = ++toastSeq;
+    setToasts((t) => [...t.slice(-3), { id, text, kind }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3800);
+  }, []);
+  const dismissToast = useCallback((id: number) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const toast = useCallback(
+    (text: string, kind: ToastKind = 'info') => {
+      if (toastsEnabled) pushToast(text, kind);
+    },
+    [pushToast, toastsEnabled],
+  );
+
+  useEffect(() => {
+    if (!canvas) return;
+    let game: RoverGame;
+    try {
+      game = createRoverGame({
+        canvas,
+        body,
+        spec,
+        seed,
+        resume,
+        controls,
+        audio,
+        startView: view,
+        onPhoto: (dataUrl, meta) => {
+          toast(`📷 ${meta.caption}`, 'good');
+          cb.current.onPhoto?.(dataUrl, meta);
+          void sync?.uploadPhoto(meta, dataUrl, gameRef.current?.sim.missionId ?? '').catch(() => undefined);
+        },
+        onTileTap: (tile, pos) => {
+          setTileMenu({ tile, x: pos.x, y: pos.y });
+          return true;
+        },
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+      setStatus('error');
+      cb.current.onError?.(message);
+      return;
+    }
+
+    gameRef.current = game;
+    setGame(game);
+    setStatus('running');
+    setError(null);
+    cb.current.onReady?.(game);
+
+    const off = wireEvents(game, toast, (anomaly) => {
+      cb.current.onDiscovery?.(anomaly);
+      void sync?.recordDiscovery(anomaly, game.sim.body.id, game.sim.missionId).catch(() => undefined);
+    }, (key, payload) => cb.current.onEvent?.(key, payload));
+
+    const resize = () => {
+      const rect = canvas.getBoundingClientRect();
+      const dpr = typeof window === 'undefined' ? 1 : Math.min(2, window.devicePixelRatio || 1);
+      game.resize(rect.width || canvas.width, rect.height || canvas.height, dpr);
+    };
+    resize();
+    window.addEventListener('resize', resize);
+    game.start();
+
+    const hudTimer = setInterval(() => setHud(sampleHud(game)), hudIntervalMs);
+    setHud(sampleHud(game));
+
+    const save = () => {
+      const state = game.save();
+      void cb.current.onSave?.(state);
+      void sync?.saveMission(state, game.sim.rover.spec.name).catch(() => undefined);
+    };
+    const saveTimer = autosaveMs > 0 ? setInterval(save, autosaveMs) : null;
+    const onHide = () => {
+      if (document.visibilityState === 'hidden') save();
+    };
+    document.addEventListener('visibilitychange', onHide);
+    // Save once up front so the mission is immediately resumable.
+    save();
+
+    return () => {
+      off();
+      window.removeEventListener('resize', resize);
+      document.removeEventListener('visibilitychange', onHide);
+      clearInterval(hudTimer);
+      if (saveTimer) clearInterval(saveTimer);
+      save();
+      game.dispose();
+      gameRef.current = null;
+      setGame(null);
+      setHud(null);
+      setStatus('booting');
+    };
+    // Restarting a mission is a remount concern: only the render surface and
+    // the identity of the world/rover may trigger a reboot.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canvas, body.id, spec.id, resume?.id, seed, controls, audio, view, sync]);
+
+  const actions = useMemo<MissionActions>(() => {
+    const g = () => gameRef.current;
+    return {
+      move: (dir) => g()?.move(dir),
+      walkTo: (x, y) => g()?.walkTo(x, y),
+      orderMine: (x, y) => g()?.orderMine(x, y),
+      cancelOrder: () => g()?.cancelOrder(),
+      mine: () => g()?.mine(),
+      photo: () => g()?.photo(),
+      scan: () => g()?.scan(),
+      build: (type) => g()?.build(type),
+      craft: (recipeId) => g()?.craft(recipeId),
+      placeBlock: () => g()?.placeBlock(),
+      repair: () => g()?.repair(),
+      demolish: (id) => g()?.demolish(id),
+      rotateStructure: (id) => g()?.rotateStructure(id),
+      launchCargo: () => g()?.launchCargo(),
+      upgradeMobility: () => g()?.upgradeMobility(),
+      rotateView: () => g()?.rotateView(),
+      setView: (view) => g()?.setView(view),
+      toggleView: () => g()?.toggleView() ?? 'iso',
+      centreCamera: () => g()?.setCameraFollow(true),
+      deposit: () => {
+        const moved = g()?.deposit() ?? 0;
+        toast(
+          moved > 0 ? `Banked ${moved} units in cache` : 'No cache adjacent',
+          moved > 0 ? 'good' : 'warn',
+        );
+      },
+      save: async () => {
+        const cur = g();
+        if (!cur) return;
+        const state = cur.save();
+        await cb.current.onSave?.(state);
+        await sync?.saveMission(state, cur.sim.rover.spec.name).catch(() => undefined);
+      },
+      endMission: async () => {
+        const cur = g();
+        if (!cur) return 0;
+        cur.stop();
+        const state = cur.save();
+        if (state.status === 'active') state.status = 'complete';
+        const banked = { ...cur.sim.banked };
+        let credits = 0;
+        if (sync) {
+          try {
+            credits = await sync.completeMission(state, banked);
+            await sync.saveMission(state, cur.sim.rover.spec.name).catch(() => undefined);
+          } catch (err) {
+            console.warn('[takeon] completeMission failed', err);
+          }
+        }
+        await cb.current.onSave?.(state);
+        setStatus('ended');
+        cb.current.onEnd?.({ state, credits, banked });
+        return credits;
+      },
+    };
+  }, [sync, toast]);
+
+  const value = useMemo<MissionContextValue>(
+    () => ({
+      game,
+      body,
+      spec,
+      hud,
+      status,
+      error,
+      toasts,
+      pushToast,
+      dismissToast,
+      actions,
+      attachCanvas: setCanvas,
+      canvas,
+      panel,
+      setPanel,
+      tileMenu,
+      setTileMenu,
+      minimapVisible,
+      setMinimapVisible,
+    }),
+    [
+      game,
+      body,
+      spec,
+      hud,
+      status,
+      error,
+      toasts,
+      pushToast,
+      dismissToast,
+      actions,
+      canvas,
+      panel,
+      tileMenu,
+      minimapVisible,
+    ],
+  );
+
+  return <MissionContext.Provider value={value}>{children}</MissionContext.Provider>;
+}
+
+/** Mission state and actions. Throws outside a `MissionProvider`. */
+export function useMission(): MissionContextValue {
+  const ctx = useContext(MissionContext);
+  if (!ctx) throw new Error('useMission must be used inside <MissionProvider>');
+  return ctx;
+}
+
+/** Mission state when there is one, `null` otherwise (safe in shared chrome). */
+export function useMissionMaybe(): MissionContextValue | null {
+  return useContext(MissionContext);
+}
+
+export function useHud(): MissionHud | null {
+  return useMission().hud;
+}
+
+export function useMissionActions(): MissionActions {
+  return useMission().actions;
+}
+
+function sampleHud(game: RoverGame): MissionHud {
+  const r = game.sim.rover;
+  const w = game.sim.weather;
+  const anomalies = game.sim.anomalies;
+  return {
+    time: game.sim.time,
+    battery: r.battery,
+    batteryMax: r.stats.batteryCapacity,
+    durability: r.durability,
+    durabilityMax: r.stats.durabilityMax,
+    fuel: r.fuel,
+    fuelMax: r.stats.fuelCapacity,
+    cargo: { ...r.cargo },
+    cargoUsed: r.cargoUsed,
+    cargoMax: r.stats.cargoCapacity,
+    banked: { ...game.sim.banked },
+    daylight: game.sim.daylight(),
+    weather: w
+      ? {
+          type: w.type,
+          name: WEATHER_INFO[w.type].name,
+          icon: WEATHER_INFO[w.type].icon,
+          intensity: w.intensity,
+        }
+      : null,
+    status: game.sim.status,
+    pos: { ...r.pos },
+    facing: r.facing,
+    can: {
+      mine: r.stats.miningPower > 0,
+      photo: r.stats.photoQuality > 0,
+      scan: r.stats.scanRadius > 0,
+    },
+    mobility: r.upgrades?.mobility ?? 0,
+    view: game.view,
+    structures: game.sim.structures.length,
+    anomalies: {
+      total: anomalies.length,
+      scanned: anomalies.filter((a) => a.scanned).length,
+      documented: anomalies.filter((a) => a.documented).length,
+    },
+    order: game.currentOrder(),
+  };
+}
+
+/**
+ * Default event→toast mapping, plus the host firehose. Returns an unsubscribe.
+ * Keeping it here (rather than in a component) means a fully custom HUD still
+ * gets the same feedback for free.
+ */
+function wireEvents(
+  game: RoverGame,
+  toast: (text: string, kind?: ToastKind) => void,
+  onDiscovery: (anomaly: Anomaly) => void,
+  onEvent: <K extends GameEventKey>(key: K, payload: GameEvents[K]) => void,
+): () => void {
+  const offs: (() => void)[] = [];
+  // Host firehose first: every engine event reaches `onEvent`, including the
+  // ones the stock HUD has nothing to say about.
+  for (const key of GAME_EVENT_KEYS) {
+    offs.push(game.events.on(key, (payload) => onEvent(key, payload)));
+  }
+  const on = <K extends GameEventKey>(key: K, fn: (payload: GameEvents[K]) => void) => {
+    offs.push(game.events.on(key, fn));
+  };
+
+  on('mined', ({ resource, amount }) => {
+    if (resource) toast(`+${amount} ${RESOURCE_NAMES[resource]}`, 'good');
+  });
+  on('cargoFull', () => toast('Cargo hold full', 'warn'));
+  on('blocked', ({ reason }) => {
+    if (reason === 'cliff') toast('Too steep for this drivetrain', 'warn');
+    else if (reason === 'battery') toast('Not enough battery', 'warn');
+    else if (reason === 'edge') toast('Nothing to drive on there', 'warn');
+  });
+  on('scan', ({ found }) =>
+    toast(
+      found.length > 0 ? `Scanner: ${found.length} anomaly signal(s) marked` : 'Scanner: no new signals',
+      found.length > 0 ? 'good' : 'info',
+    ),
+  );
+  on('anomalyDocumented', ({ anomaly }) => {
+    toast(`★ Discovery documented: ${anomaly.name}`, 'good');
+    onDiscovery(anomaly);
+  });
+  on('built', ({ structure }) => toast(`Constructed ${STRUCTURES[structure.type].name}`, 'good'));
+  on('buildFailed', ({ reason }) => toast(reason, 'warn'));
+  on('demolished', ({ type }) => toast(`Demolished ${STRUCTURES[type].name}`, 'info'));
+  on('demolishFailed', ({ reason }) => toast(reason, 'warn'));
+  on('crafted', ({ resource, amount }) => toast(`Refined ${amount} ${RESOURCE_NAMES[resource]}`, 'good'));
+  on('craftFailed', ({ reason }) => toast(reason, 'warn'));
+  on('blockPlaced', () => toast('Block placed', 'good'));
+  on('cargoLaunched', ({ total, auto }) =>
+    toast(`🚀 ${auto ? 'Auto-launch' : 'Launch'}: ${total} units away`, 'good'),
+  );
+  on('launchFailed', ({ reason }) => toast(reason, 'warn'));
+  on('upgraded', ({ level }) => toast(`Mobility kit fitted (tier ${level})`, 'good'));
+  on('upgradeFailed', ({ reason }) => toast(reason, 'warn'));
+  on('habitatComplete', () => toast('🏠 Habitat complete', 'good'));
+  on('damaged', ({ amount, reason }) => {
+    if (amount >= 1) toast(`Chassis damage −${amount.toFixed(0)} (${reason})`, 'bad');
+  });
+  on('repaired', ({ amount }) => toast(`Repaired +${amount.toFixed(0)} durability`, 'good'));
+  on('roverLost', ({ reason }) => toast(`Rover lost: ${reason}`, 'bad'));
+  on('weather', ({ type, phase }) => {
+    const info = WEATHER_INFO[type];
+    if (phase === 'start') toast(`${info.icon} ${info.warning}`, 'warn');
+    else toast(`${info.icon} ${info.name} has passed.`, 'good');
+  });
+  on('meteorImpact', ({ distance }) => {
+    if (distance <= 2.5) toast('☄ Direct hit — chassis damage!', 'bad');
+    else if (distance <= 6) toast('☄ Impact close by!', 'warn');
+  });
+
+  return () => {
+    for (const off of offs) off();
+  };
+}
diff --git a/packages/ui/src/registry.tsx b/packages/ui/src/registry.tsx
new file mode 100644
index 0000000..22b2c07
--- /dev/null
+++ b/packages/ui/src/registry.tsx
@@ -0,0 +1,191 @@
+import {
+  createContext,
+  useContext,
+  useMemo,
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+
+/**
+ * The component registry.
+ *
+ * Every piece of TakeOn's UI is rendered through `createSlot`, which looks the
+ * component up by key before falling back to the built-in default. A parent
+ * app sitting on top of TakeOn (Landnam, the editor, your own shell) can
+ * therefore replace, wrap or restyle any part of the interface without
+ * forking this package:
+ *
+ * ```tsx
+ * <TakeOnUIProvider
+ *   components={{ ActionBar: MyActionBar }}      // replace outright
+ *   labels={{ 'action.mine': 'Dig' }}            // reskin the words
+ *   classNames={{ HudBar: 'my-hud' }}            // restyle in place
+ *   slots={{ 'hudBar.end': <MyClock /> }}        // inject extra chrome
+ * >
+ *   <MissionScreen />
+ * </TakeOnUIProvider>
+ * ```
+ *
+ * An override that wants to keep the stock markup renders the default it is
+ * replacing: `ActionBar.Default`. Rendering `<ActionBar/>` from inside its own
+ * override is safe too — the registry suppresses the override one level deep
+ * rather than recursing forever.
+ */
+
+// Overrides are supplied by hosts we cannot type ahead of time.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyComponent = ComponentType<any>;
+
+export type SlotContent = ReactNode | (() => ReactNode);
+
+export interface TakeOnUIConfig {
+  /** Replace built-in components, keyed by slot name (see `SLOT_KEYS`). */
+  components?: Record<string, AnyComponent | undefined>;
+  /** Override user-visible strings and icons. */
+  labels?: Record<string, string | undefined>;
+  /** Extra class names appended to a component's root element. */
+  classNames?: Record<string, string | undefined>;
+  /** Content injected at named anchor points inside built-in components. */
+  slots?: Record<string, SlotContent>;
+  /** CSS custom properties applied to the TakeOn scope (without `--tk-`). */
+  theme?: Record<string, string | number | undefined>;
+}
+
+interface Resolved extends Required<Omit<TakeOnUIConfig, 'theme'>> {
+  theme: Record<string, string | number | undefined>;
+}
+
+const EMPTY: Resolved = {
+  components: {},
+  labels: {},
+  classNames: {},
+  slots: {},
+  theme: {},
+};
+
+const UIContext = createContext<Resolved>(EMPTY);
+/** Slots currently being rendered through an override, to stop recursion. */
+const ActiveOverrides = createContext<Record<string, boolean>>({});
+
+export interface TakeOnUIProviderProps extends TakeOnUIConfig {
+  children: ReactNode;
+  /** Class for the scope element (which is `display: contents` by default). */
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * Supplies UI configuration to everything below it. Nesting is additive: an
+ * inner provider merges over the outer one, so an app can set house style at
+ * the root and a single screen can still swap one panel.
+ */
+export function TakeOnUIProvider({
+  children,
+  className,
+  style,
+  components,
+  labels,
+  classNames,
+  slots,
+  theme,
+}: TakeOnUIProviderProps) {
+  const parent = useContext(UIContext);
+  const value = useMemo<Resolved>(
+    () => ({
+      components: { ...parent.components, ...components },
+      labels: { ...parent.labels, ...labels },
+      classNames: mergeClassNames(parent.classNames, classNames),
+      slots: { ...parent.slots, ...slots },
+      theme: { ...parent.theme, ...theme },
+    }),
+    [parent, components, labels, classNames, slots, theme],
+  );
+
+  const vars: CSSProperties = { ...style };
+  for (const [key, val] of Object.entries(value.theme)) {
+    if (val === undefined) continue;
+    (vars as Record<string, string | number>)[`--tk-${key}`] = val;
+  }
+
+  return (
+    <UIContext.Provider value={value}>
+      <div className={cx('tk-scope', className)} style={vars}>
+        {children}
+      </div>
+    </UIContext.Provider>
+  );
+}
+
+function mergeClassNames(
+  a: Record<string, string | undefined>,
+  b: Record<string, string | undefined> = {},
+): Record<string, string | undefined> {
+  const out = { ...a };
+  for (const [key, val] of Object.entries(b)) {
+    out[key] = out[key] ? `${out[key]} ${val ?? ''}`.trim() : val;
+  }
+  return out;
+}
+
+export function useTakeOnUI(): Resolved {
+  return useContext(UIContext);
+}
+
+/** A component that can be replaced through the registry. */
+export type Slotted<P> = ComponentType<P> & {
+  /** The stock implementation — render it to wrap rather than replace. */
+  Default: ComponentType<P>;
+  slotKey: string;
+};
+
+/** Wrap a default implementation so hosts can override it by key. */
+export function createSlot<P extends object>(key: string, Default: ComponentType<P>): Slotted<P> {
+  function Slot(props: P) {
+    const { components } = useTakeOnUI();
+    const active = useContext(ActiveOverrides);
+    const override = active[key] ? undefined : (components[key] as ComponentType<P> | undefined);
+    if (!override) return <Default {...props} />;
+    const Override = override;
+    const next = { ...active, [key]: true };
+    return (
+      <ActiveOverrides.Provider value={next}>
+        <Override {...props} />
+      </ActiveOverrides.Provider>
+    );
+  }
+  Slot.displayName = `TakeOn(${key})`;
+  const slotted = Slot as unknown as Slotted<P>;
+  slotted.Default = Default;
+  slotted.slotKey = key;
+  return slotted;
+}
+
+/** Extra classes a host attached to this slot, if any. */
+export function useSlotClass(key: string): string | undefined {
+  return useTakeOnUI().classNames[key];
+}
+
+/** Render host-injected content for a named anchor point. */
+export function useSlot(name: string): ReactNode {
+  const content = useTakeOnUI().slots[name];
+  return typeof content === 'function' ? content() : (content ?? null);
+}
+
+/** Anchor points built-in components expose to hosts. */
+export function Slot({ name }: { name: string }) {
+  return <>{useSlot(name)}</>;
+}
+
+export function useLabels(): Record<string, string | undefined> {
+  return useTakeOnUI().labels;
+}
+
+/** A user-visible string, overridable by the host. */
+export function useLabel(key: string, fallback: string): string {
+  return useLabels()[key] ?? fallback;
+}
+
+export function cx(...parts: (string | false | null | undefined)[]): string {
+  return parts.filter(Boolean).join(' ');
+}
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
new file mode 100644
index 0000000..9781c00
--- /dev/null
+++ b/packages/ui/src/styles.css
@@ -0,0 +1,882 @@
+/*
+ * @takeon/ui — pulp sci-fi skin.
+ *
+ * Visual direction is a homage to Out There: Ω: comic-book space pulp read as
+ * instrumentation. Hex cells for anything you press, notched panel frames with
+ * hairline neon edges, segmented gauges instead of smooth bars, and uppercase
+ * condensed type. Nothing is loaded from the network — no web fonts, no
+ * images: the whole look is variables, borders and clip-paths.
+ *
+ * Everything is driven by `--tk-*` custom properties, so a host game can
+ * restyle the HUD by setting them (via `<TakeOnUIProvider theme>` or plain CSS
+ * on any ancestor) without overriding a rule. Class names are `tk-` prefixed.
+ */
+
+.tk-scope {
+  display: contents;
+}
+
+:where(.tk-mission, .tk-scope) {
+  --tk-bg: #060a14;
+  --tk-panel: rgba(10, 18, 33, 0.88);
+  --tk-panel-solid: #0b1424;
+  --tk-panel-raised: #12203a;
+  --tk-border: #29506b;
+  --tk-hairline: rgba(126, 224, 226, 0.35);
+  --tk-text: #e6f3f7;
+  --tk-text-dim: #7ba2b8;
+  --tk-accent: #5fe3d8;
+  --tk-accent-2: #ffb03a;
+  --tk-good: #6fdc8c;
+  --tk-warn: #ffb03a;
+  --tk-bad: #ff5f5f;
+  --tk-radius: 2px;
+  --tk-notch: 10px;
+  --tk-font: 'Barlow Condensed', 'Roboto Condensed', 'Avenir Next Condensed', 'Helvetica Neue',
+    system-ui, -apple-system, sans-serif;
+  --tk-glow: 0 0 14px rgba(95, 227, 216, 0.18);
+}
+
+/* Notched frame: the signature panel silhouette (corner cut top-left and
+   bottom-right), drawn with a clip-path so it needs no images. */
+.tk-notch {
+  clip-path: polygon(
+    var(--tk-notch) 0,
+    100% 0,
+    100% calc(100% - var(--tk-notch)),
+    calc(100% - var(--tk-notch)) 100%,
+    0 100%,
+    0 var(--tk-notch)
+  );
+}
+
+.tk-mission {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background: var(--tk-bg);
+  color: var(--tk-text);
+  font-family: var(--tk-font);
+  letter-spacing: 0.01em;
+}
+
+/* Vignette: pushes the eye to the middle of the scene, the way a comic panel
+   darkens toward its border. Never intercepts input. */
+.tk-mission::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 4;
+  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(3, 6, 14, 0.55) 100%);
+}
+
+.tk-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  touch-action: none;
+}
+
+.tk-error {
+  position: absolute;
+  inset: auto 0 50% 0;
+  text-align: center;
+  color: var(--tk-bad);
+  font-size: 14px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+}
+
+/* ── Buttons ────────────────────────────────────────────────────────── */
+
+.tk-btn {
+  font: inherit;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--tk-text);
+  cursor: pointer;
+  border: 1px solid var(--tk-border);
+  background: var(--tk-panel);
+  border-radius: var(--tk-radius);
+  padding: 8px 14px;
+  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  touch-action: manipulation;
+  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
+}
+
+.tk-btn:hover:not(:disabled) {
+  border-color: var(--tk-accent);
+  color: var(--tk-accent);
+  box-shadow: var(--tk-glow);
+}
+
+.tk-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.tk-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tk-btn-icon {
+  padding: 8px 11px;
+  font-size: 15px;
+  letter-spacing: 0;
+}
+
+.tk-btn-primary {
+  background: linear-gradient(135deg, rgba(95, 227, 216, 0.22), rgba(95, 227, 216, 0.06));
+  border-color: var(--tk-accent);
+  color: var(--tk-accent);
+  font-weight: 600;
+}
+
+.tk-spacer {
+  flex: 1;
+}
+
+/* ── Status rack ────────────────────────────────────────────────────── */
+
+.tk-hudbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  gap: 10px;
+  padding: calc(10px + env(safe-area-inset-top)) 12px 8px;
+  align-items: flex-start;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.tk-hudbar > * {
+  pointer-events: auto;
+}
+
+.tk-rack {
+  display: flex;
+  gap: 14px;
+  padding: 8px 14px;
+  background: var(--tk-panel);
+  border: 1px solid var(--tk-border);
+  border-top-color: var(--tk-hairline);
+  box-shadow: inset 0 1px 0 rgba(126, 224, 226, 0.12);
+  clip-path: polygon(
+    var(--tk-notch) 0,
+    100% 0,
+    100% calc(100% - var(--tk-notch)),
+    calc(100% - var(--tk-notch)) 100%,
+    0 100%,
+    0 var(--tk-notch)
+  );
+}
+
+.tk-meter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 132px;
+  --tk-meter-colour: var(--tk-accent);
+}
+
+.tk-meter[data-tone='good'] { --tk-meter-colour: var(--tk-good); }
+.tk-meter[data-tone='warn'] { --tk-meter-colour: var(--tk-accent-2); }
+.tk-meter[data-tone='bad'] { --tk-meter-colour: var(--tk-bad); }
+.tk-meter[data-tone='neutral'] { --tk-meter-colour: var(--tk-text-dim); }
+
+.tk-meter-icon {
+  font-size: 15px;
+  line-height: 1;
+  color: var(--tk-meter-colour);
+  filter: drop-shadow(0 0 6px currentColor);
+}
+
+.tk-meter-body {
+  display: block;
+  flex: 1;
+}
+
+.tk-meter-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 10px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--tk-text-dim);
+}
+
+.tk-meter-value {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.06em;
+  color: var(--tk-text);
+}
+
+.tk-meter-value em {
+  font-style: normal;
+  color: var(--tk-text-dim);
+}
+
+/* Segmented bar: a solid fill with notches punched out of it, so the gauge
+   reads as discrete cells rather than a smooth percentage. */
+.tk-bar {
+  position: relative;
+  display: block;
+  height: 7px;
+  margin-top: 4px;
+  background: rgba(126, 224, 226, 0.1);
+  border: 1px solid rgba(126, 224, 226, 0.22);
+  overflow: hidden;
+}
+
+.tk-bar-fill {
+  display: block;
+  height: 100%;
+  background: var(--tk-meter-colour);
+  box-shadow: 0 0 10px var(--tk-meter-colour);
+  transition: width 0.3s;
+}
+
+.tk-bar::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: repeating-linear-gradient(
+    90deg,
+    transparent 0 6px,
+    var(--tk-panel-solid) 6px 8px
+  );
+  pointer-events: none;
+}
+
+.tk-readout {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.tk-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--tk-border);
+  background: var(--tk-panel);
+  padding: 6px 12px;
+  font-family: inherit;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--tk-text-dim);
+  white-space: nowrap;
+  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
+}
+
+.tk-chip b {
+  font-size: 13px;
+  color: var(--tk-accent);
+  filter: drop-shadow(0 0 6px rgba(95, 227, 216, 0.5));
+}
+
+.tk-chip[data-tone='warn'] b { color: var(--tk-accent-2); filter: drop-shadow(0 0 6px rgba(255, 176, 58, 0.5)); }
+.tk-chip[data-tone='bad'] b { color: var(--tk-bad); }
+
+button.tk-chip {
+  cursor: pointer;
+}
+
+button.tk-chip:hover {
+  border-color: var(--tk-accent);
+  color: var(--tk-text);
+}
+
+/* ── Drive pad ──────────────────────────────────────────────────────── */
+
+.tk-dpad {
+  position: absolute;
+  left: 16px;
+  bottom: calc(16px + env(safe-area-inset-bottom));
+  display: grid;
+  grid-template-columns: repeat(3, 52px);
+  grid-template-rows: repeat(3, 46px);
+  gap: 3px;
+  z-index: 5;
+}
+
+.tk-dpad button {
+  font: inherit;
+  font-size: 17px;
+  color: var(--tk-text-dim);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  background: var(--tk-panel);
+  box-shadow: inset 0 0 0 1px var(--tk-border);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  transition: color 0.12s, background 0.12s;
+}
+
+.tk-dpad button:hover {
+  color: var(--tk-accent);
+  background: var(--tk-panel-raised);
+}
+
+.tk-dpad button:active {
+  color: var(--tk-bg);
+  background: var(--tk-accent);
+}
+
+.tk-dpad .tk-blank {
+  visibility: hidden;
+}
+
+/* ── Action honeycomb ───────────────────────────────────────────────── */
+
+/* Two interlocking columns of hex cells, anchored bottom-right: the ship's
+   module bank, not a stack of round buttons. */
+.tk-actions {
+  position: absolute;
+  right: 14px;
+  bottom: calc(24px + env(safe-area-inset-bottom));
+  display: grid;
+  grid-template-columns: repeat(2, 64px);
+  column-gap: 4px;
+  align-content: end;
+  z-index: 5;
+}
+
+.tk-action {
+  width: 64px;
+  height: 72px;
+  padding-bottom: 2px;
+  border: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  font-family: inherit;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--tk-text-dim);
+  cursor: pointer;
+  user-select: none;
+  touch-action: manipulation;
+  background: var(--tk-panel);
+  box-shadow: inset 0 0 0 1px var(--tk-border);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  transition: color 0.12s, background 0.12s;
+}
+
+/* Right-hand column drops half a cell; later rows climb into the notch above
+   them, so the block reads as a honeycomb rather than a grid. */
+/* Pointy-top hexes tile at 0.75× their height; the offset column drops by
+   half that pitch. Anything else and the cells overlap or drift apart. */
+.tk-action:nth-child(even) {
+  transform: translateY(27px);
+}
+
+.tk-action:nth-child(n + 3) {
+  margin-top: -18px;
+}
+
+.tk-action:hover {
+  color: var(--tk-accent);
+  background: var(--tk-panel-raised);
+  box-shadow: inset 0 0 0 1px var(--tk-accent);
+}
+
+.tk-action:active {
+  color: var(--tk-bg);
+  background: var(--tk-accent);
+}
+
+.tk-action-icon {
+  font-size: 19px;
+  line-height: 1;
+}
+
+.tk-action-label {
+  font-size: 9px;
+}
+
+/* The tray opener reads as a distinct "more" control, not just another tool,
+   so a dashed ring marks it apart from the honeycomb around it. */
+.tk-action-more {
+  box-shadow: inset 0 0 0 1px var(--tk-border), inset 0 0 0 3px transparent;
+}
+
+.tk-action-more[aria-expanded='true'] {
+  color: var(--tk-accent);
+  background: var(--tk-panel-raised);
+  box-shadow: inset 0 0 0 1px var(--tk-accent);
+}
+
+/* Invisible click-catcher so an outside tap closes the tray; sits under it
+   but above everything else, and never dims the scene the way a modal does. */
+.tk-tray-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 6;
+  background: transparent;
+}
+
+/* Pop-up list of the less-frequent actions, anchored above the honeycomb so
+   it never covers the d-pad or the thing you're driving toward. */
+.tk-tray {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 10px;
+  z-index: 7;
+  min-width: 176px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--tk-panel-solid);
+  border: 1px solid var(--tk-border);
+  border-right: 2px solid var(--tk-accent);
+  padding: 8px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
+}
+
+.tk-tray-head {
+  font-size: 10px;
+  color: var(--tk-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  padding: 2px 10px 6px;
+  border-bottom: 1px solid var(--tk-border);
+  margin-bottom: 4px;
+}
+
+.tk-tray button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font: inherit;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--tk-text);
+  background: none;
+  border: 1px solid transparent;
+  padding: 9px 10px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tk-tray button:hover {
+  border-color: var(--tk-hairline);
+  color: var(--tk-accent);
+  background: rgba(95, 227, 216, 0.07);
+}
+
+.tk-tray-icon {
+  font-size: 15px;
+  width: 1.2em;
+  text-align: center;
+  flex: 0 0 auto;
+}
+
+@media (max-width: 640px) {
+  .tk-tray {
+    min-width: 156px;
+  }
+}
+
+/* ── Survey map ─────────────────────────────────────────────────────── */
+
+.tk-minimap {
+  position: absolute;
+  top: calc(74px + env(safe-area-inset-top));
+  right: 14px;
+  padding: 6px;
+  background: var(--tk-panel);
+  border: 1px solid var(--tk-border);
+  z-index: 5;
+  clip-path: polygon(
+    var(--tk-notch) 0,
+    100% 0,
+    100% calc(100% - var(--tk-notch)),
+    calc(100% - var(--tk-notch)) 100%,
+    0 100%,
+    0 var(--tk-notch)
+  );
+}
+
+.tk-minimap-canvas {
+  display: block;
+}
+
+.tk-minimap-label {
+  display: block;
+  margin-top: 4px;
+  text-align: center;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.24em;
+  color: var(--tk-text-dim);
+}
+
+/* ── Cross-section (underground) view ──────────────────────────────── */
+
+.tk-cross-section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 96px;
+  padding: 6px;
+  background: var(--tk-panel);
+  border: 1px solid var(--tk-border);
+  clip-path: polygon(
+    var(--tk-notch) 0,
+    100% 0,
+    100% calc(100% - var(--tk-notch)),
+    calc(100% - var(--tk-notch)) 100%,
+    0 100%,
+    0 var(--tk-notch)
+  );
+}
+
+.tk-cross-section-canvas {
+  display: block;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.tk-cross-section-label {
+  display: block;
+  margin-top: 4px;
+  text-align: center;
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.24em;
+  color: var(--tk-text-dim);
+}
+
+/* ── Tile menu ──────────────────────────────────────────────────────── */
+
+.tk-tilemenu {
+  position: absolute;
+  z-index: 8;
+  min-width: 186px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--tk-panel-solid);
+  border: 1px solid var(--tk-border);
+  border-left: 2px solid var(--tk-accent);
+  padding: 8px;
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
+}
+
+.tk-tilemenu button {
+  font: inherit;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--tk-text);
+  background: none;
+  border: 1px solid transparent;
+  padding: 8px 10px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.tk-tilemenu button:hover {
+  border-color: var(--tk-hairline);
+  color: var(--tk-accent);
+  background: rgba(95, 227, 216, 0.07);
+}
+
+.tk-tilemenu-head {
+  font-size: 10px;
+  color: var(--tk-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  padding: 2px 10px 6px;
+  border-bottom: 1px solid var(--tk-border);
+  margin-bottom: 4px;
+}
+
+/* ── Toasts (comic captions) ────────────────────────────────────────── */
+
+.tk-toasts {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(104px + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 6px;
+  z-index: 6;
+  pointer-events: none;
+  width: min(92vw, 440px);
+  align-items: center;
+}
+
+.tk-toast {
+  width: fit-content;
+  max-width: 100%;
+  background: var(--tk-panel-solid);
+  border: 1px solid var(--tk-border);
+  border-left: 3px solid var(--tk-accent);
+  padding: 9px 14px;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--tk-text);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+  animation: tk-toast-in 0.18s ease-out;
+}
+
+.tk-toast-warn { border-left-color: var(--tk-warn); }
+.tk-toast-good { border-left-color: var(--tk-good); }
+.tk-toast-bad { border-left-color: var(--tk-bad); color: #ffd9d9; }
+
+@keyframes tk-toast-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: none; }
+}
+
+/* ── Modals ─────────────────────────────────────────────────────────── */
+
+.tk-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(3, 6, 14, 0.78);
+  z-index: 30;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.tk-modal {
+  background: var(--tk-panel-solid);
+  border: 1px solid var(--tk-border);
+  width: min(100%, 580px);
+  max-height: 82vh;
+  display: flex;
+  flex-direction: column;
+  color: var(--tk-text);
+  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
+}
+
+@media (min-width: 700px) {
+  .tk-backdrop { align-items: center; }
+  .tk-modal {
+    clip-path: polygon(
+      18px 0,
+      100% 0,
+      100% calc(100% - 18px),
+      calc(100% - 18px) 100%,
+      0 100%,
+      0 18px
+    );
+  }
+}
+
+.tk-modal-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--tk-border);
+  background: linear-gradient(90deg, rgba(95, 227, 216, 0.14), transparent 70%);
+}
+
+.tk-modal-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--tk-accent);
+}
+
+.tk-modal-close {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: var(--tk-text-dim);
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.tk-modal-close:hover {
+  color: var(--tk-accent);
+}
+
+.tk-modal-body {
+  padding: 14px 16px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.tk-modal-foot {
+  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
+  border-top: 1px solid var(--tk-border);
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+/* Dialogs with no footer still need breathing room at the bottom. */
+.tk-modal-body:last-child {
+  padding-bottom: calc(16px + env(safe-area-inset-bottom));
+}
+
+.tk-modal-body .tk-btn {
+  align-self: stretch;
+}
+
+.tk-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  text-align: left;
+  font: inherit;
+  color: var(--tk-text);
+  cursor: pointer;
+  border: 1px solid var(--tk-border);
+  border-left: 2px solid var(--tk-border);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 10px 14px;
+}
+
+.tk-option:hover:not(:disabled) {
+  border-color: var(--tk-hairline);
+  border-left-color: var(--tk-accent);
+  background: rgba(95, 227, 216, 0.06);
+}
+
+.tk-option:disabled {
+  opacity: 0.38;
+  cursor: not-allowed;
+}
+
+.tk-option-info {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.tk-option-info b {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.tk-option-desc {
+  font-size: 12px;
+  color: var(--tk-text-dim);
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.tk-tag {
+  font-size: 10px;
+  padding: 3px 9px;
+  background: rgba(126, 224, 226, 0.08);
+  border: 1px solid var(--tk-border);
+  color: var(--tk-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  white-space: nowrap;
+}
+
+.tk-modal-sub {
+  color: var(--tk-text-dim);
+  font-size: 12.5px;
+  line-height: 1.55;
+  margin: 0;
+}
+
+.tk-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+.tk-table th,
+.tk-table td {
+  text-align: left;
+  padding: 7px 4px;
+  border-bottom: 1px solid rgba(41, 80, 107, 0.5);
+}
+
+.tk-table th {
+  color: var(--tk-accent);
+  font-weight: 500;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+}
+
+/* ── Small screens ──────────────────────────────────────────────────── */
+
+@media (max-width: 640px) {
+  .tk-rack {
+    flex-direction: column;
+    gap: 6px;
+    padding: 8px 10px;
+  }
+
+  .tk-meter {
+    min-width: 118px;
+  }
+
+  .tk-hudbar {
+    gap: 6px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+
+  .tk-readout {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .tk-actions {
+    grid-template-columns: repeat(2, 56px);
+    right: 10px;
+  }
+
+  .tk-action {
+    width: 56px;
+    height: 63px;
+  }
+
+  .tk-action:nth-child(even) {
+    transform: translateY(24px);
+  }
+
+  .tk-action:nth-child(n + 3) {
+    margin-top: -16px;
+  }
+
+  .tk-dpad {
+    grid-template-columns: repeat(3, 46px);
+    grid-template-rows: repeat(3, 42px);
+  }
+}
diff --git a/packages/ui/test/registry.test.tsx b/packages/ui/test/registry.test.tsx
new file mode 100644
index 0000000..af2ce5b
--- /dev/null
+++ b/packages/ui/test/registry.test.tsx
@@ -0,0 +1,114 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { createSlot, Slot, TakeOnUIProvider, useLabel, useSlotClass } from '../src/registry.js';
+
+/**
+ * The contract that lets a game built on TakeOn adapt the UI: any component
+ * can be replaced, wrapped, relabelled, restyled or extended from the parent
+ * app — including components rendered deep inside other components.
+ */
+
+interface PanelProps {
+  title: string;
+}
+
+function DefaultPanel({ title }: PanelProps) {
+  return (
+    <section className={['panel', useSlotClass('Panel')].filter(Boolean).join(' ')}>
+      <h1>{useLabel('panel.title', title)}</h1>
+      <Slot name="panel.end" />
+    </section>
+  );
+}
+
+const Panel = createSlot('Panel', DefaultPanel);
+
+function Screen() {
+  return (
+    <main>
+      <Panel title="Stock" />
+    </main>
+  );
+}
+
+describe('component registry', () => {
+  it('renders the default when nothing is registered', () => {
+    const html = renderToStaticMarkup(
+      <TakeOnUIProvider>
+        <Screen />
+      </TakeOnUIProvider>,
+    );
+    expect(html).toContain('<h1>Stock</h1>');
+  });
+
+  it('replaces a nested component from the parent app', () => {
+    const html = renderToStaticMarkup(
+      <TakeOnUIProvider components={{ Panel: ({ title }: PanelProps) => <aside>custom {title}</aside> }}>
+        <Screen />
+      </TakeOnUIProvider>,
+    );
+    expect(html).toContain('<aside>custom Stock</aside>');
+    expect(html).not.toContain('<h1>');
+  });
+
+  it('lets an override wrap the default instead of replacing it', () => {
+    const Wrapping = (props: PanelProps) => (
+      <div className="wrapper">
+        <Panel.Default {...props} />
+      </div>
+    );
+    const html = renderToStaticMarkup(
+      <TakeOnUIProvider components={{ Panel: Wrapping }}>
+        <Screen />
+      </TakeOnUIProvider>,
+    );
+    expect(html).toContain('wrapper');
+    expect(html).toContain('<h1>Stock</h1>');
+  });
+
+  it('does not recurse when an override renders its own slot', () => {
+    const Recursive = (props: PanelProps) => (
+      <div className="wrapper">
+        <Panel {...props} />
+      </div>
+    );
+    const html = renderToStaticMarkup(
+      <TakeOnUIProvider components={{ Panel: Recursive }}>
+        <Screen />
+      </TakeOnUIProvider>,
+    );
+    // One wrapper, then the stock panel — the override is suppressed one level
+    // down rather than looping forever.
+    expect(html.match(/wrapper/g)?.length).toBe(1);
+    expect(html).toContain('<h1>Stock</h1>');
+  });
+
+  it('applies labels, class names, slots and theme variables', () => {
+    const html = renderToStaticMarkup(
+      <TakeOnUIProvider
+        labels={{ 'panel.title': 'Relabelled' }}
+        classNames={{ Panel: 'host-panel' }}
+        slots={{ 'panel.end': <b>extra</b> }}
+        theme={{ accent: '#ff8a3d' }}
+      >
+        <Screen />
+      </TakeOnUIProvider>,
+    );
+    expect(html).toContain('Relabelled');
+    expect(html).toContain('panel host-panel');
+    expect(html).toContain('<b>extra</b>');
+    expect(html).toContain('--tk-accent:#ff8a3d');
+  });
+
+  it('merges nested providers so a screen can refine app-wide config', () => {
+    const html = renderToStaticMarkup(
+      <TakeOnUIProvider labels={{ 'panel.title': 'App' }} classNames={{ Panel: 'app' }}>
+        <TakeOnUIProvider classNames={{ Panel: 'screen' }}>
+          <Screen />
+        </TakeOnUIProvider>
+      </TakeOnUIProvider>,
+    );
+    expect(html).toContain('App');
+    expect(html).toContain('panel app screen');
+  });
+});
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..c2e1a30
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}
diff --git a/pocketbase/seed/bodies.json b/pocketbase/seed/bodies.json
index 6e25160..bb19d73 100644
--- a/pocketbase/seed/bodies.json
+++ b/pocketbase/seed/bodies.json
@@ -12,7 +12,12 @@
     "seed": 1969,
     "palette": {
       "sky": "#2c2650",
-      "skyNight": "#0a0920"
+      "skyNight": "#0a0920",
+      "tint": [
+        0.82,
+        0.84,
+        0.9
+      ]
     },
     "terrain": {
       "roughness": 0.45,
@@ -26,6 +31,10 @@
       "copper": 0.15,
       "titanium": 0.55
     },
+    "weather": {
+      "solar-storm": 0.9,
+      "meteor-shower": 1.1
+    },
     "description": "Close, well-lit and gentle. Titanium in the maria, ice in shadowed polar craters."
   },
   {
@@ -41,7 +50,12 @@
     "seed": 4212,
     "palette": {
       "sky": "#d97e4a",
-      "skyNight": "#221026"
+      "skyNight": "#221026",
+      "tint": [
+        1.06,
+        0.9,
+        0.8
+      ]
     },
     "terrain": {
       "roughness": 0.6,
@@ -55,6 +69,11 @@
       "copper": 0.23,
       "titanium": 0.15
     },
+    "weather": {
+      "dust-devil": 2.2,
+      "dust-storm": 0.8,
+      "meteor-shower": 0.3
+    },
     "description": "Rusty canyons and dust. Iron-rich, with polar ice and long, dim days."
   },
   {
@@ -70,7 +89,12 @@
     "seed": 1610,
     "palette": {
       "sky": "#2b4a8f",
-      "skyNight": "#0c1230"
+      "skyNight": "#0c1230",
+      "tint": [
+        0.78,
+        0.95,
+        1.12
+      ]
     },
     "terrain": {
       "roughness": 0.3,
@@ -78,6 +102,10 @@
       "iceCaps": 0.85,
       "oreRichness": 0.25
     },
+    "weather": {
+      "cryo-fog": 1.6,
+      "meteor-shower": 0.4
+    },
     "description": "A shell of fractured ice over a hidden ocean. Solar power is scarce out here."
   },
   {
@@ -93,7 +121,12 @@
     "seed": 1801,
     "palette": {
       "sky": "#3d3178",
-      "skyNight": "#100b2c"
+      "skyNight": "#100b2c",
+      "tint": [
+        0.88,
+        0.9,
+        0.97
+      ]
     },
     "terrain": {
       "roughness": 0.5,
@@ -101,6 +134,11 @@
       "iceCaps": 0.2,
       "oreRichness": 0.55
     },
+    "weather": {
+      "solar-storm": 0.7,
+      "meteor-shower": 0.8,
+      "cryo-fog": 0.5
+    },
     "description": "The belt’s dwarf planet. Bright salt flats, buried brines and easy launches."
   },
   {
@@ -116,7 +154,12 @@
     "seed": 1999,
     "palette": {
       "sky": "#2f2266",
-      "skyNight": "#0c0824"
+      "skyNight": "#0c0824",
+      "tint": [
+        0.72,
+        0.72,
+        0.78
+      ]
     },
     "terrain": {
       "roughness": 0.85,
@@ -125,6 +168,10 @@
       "oreRichness": 0.7,
       "irregular": true
     },
+    "weather": {
+      "solar-storm": 1.1,
+      "meteor-shower": 1.4
+    },
     "description": "A rubble pile you could jump off of. Rich, rough and unforgiving to wheels."
   },
   {
@@ -140,7 +187,12 @@
     "seed": 1979,
     "palette": {
       "sky": "#a85a2e",
-      "skyNight": "#1c0d20"
+      "skyNight": "#1c0d20",
+      "tint": [
+        1.12,
+        1.02,
+        0.68
+      ]
     },
     "terrain": {
       "roughness": 0.75,
@@ -149,6 +201,215 @@
       "oreRichness": 0.6,
       "sulfurFields": 0.5
     },
+    "weather": {
+      "solar-storm": 1.3,
+      "meteor-shower": 1.5
+    },
     "description": "Volcanic and sulfur-stained. Steep terrain chews through durability."
+  },
+  {
+    "id": "terra",
+    "name": "Terra",
+    "type": "planet",
+    "kind": "earth-like",
+    "gravity": 9.8,
+    "solarFlux": 1,
+    "dayLength": 480,
+    "deltaV": 20,
+    "size": 128,
+    "maxHeight": 16,
+    "seed": 2024,
+    "palette": {
+      "sky": "#6fa8dc",
+      "skyNight": "#0b1a3a",
+      "tint": [
+        1,
+        1.02,
+        0.98
+      ]
+    },
+    "climate": {
+      "temperature": 14,
+      "tempVariance": 0.55
+    },
+    "terrain": {
+      "roughness": 0.35,
+      "craters": 1,
+      "iceCaps": 0.12,
+      "oreRichness": 0.2,
+      "biomes": true
+    },
+    "minerals": {
+      "iron": 0.4,
+      "copper": 0.35,
+      "titanium": 0.25
+    },
+    "weather": {},
+    "description": "A temperate, breathable-coded world. Grassland, forest and tundra spread across seeded chunks instead of one uniform skin."
+  },
+  {
+    "id": "kepler-rust",
+    "name": "Kepler Rust",
+    "type": "planet",
+    "kind": "rocky-planet",
+    "gravity": 4.2,
+    "solarFlux": 0.4,
+    "dayLength": 540,
+    "deltaV": 58,
+    "size": 112,
+    "maxHeight": 18,
+    "seed": 3141,
+    "palette": {
+      "sky": "#b85c38",
+      "skyNight": "#1c0f1f",
+      "tint": [
+        1.05,
+        0.88,
+        0.78
+      ]
+    },
+    "climate": {
+      "temperature": -45,
+      "tempVariance": 0.6
+    },
+    "terrain": {
+      "roughness": 0.6,
+      "craters": 7,
+      "iceCaps": 0.15,
+      "oreRichness": 0.4,
+      "biomes": true
+    },
+    "minerals": {
+      "iron": 0.55,
+      "copper": 0.25,
+      "titanium": 0.2
+    },
+    "weather": {
+      "dust-devil": 1.8,
+      "dust-storm": 0.5,
+      "meteor-shower": 0.4
+    },
+    "description": "A rustier, colder cousin of Mars. Redrock desert, crater highlands and polar tundra, by chunk."
+  },
+  {
+    "id": "frostmoon",
+    "name": "Frostmoon",
+    "type": "moon",
+    "kind": "ice-moon",
+    "gravity": 1.2,
+    "solarFlux": 0.12,
+    "dayLength": 900,
+    "deltaV": 78,
+    "size": 96,
+    "maxHeight": 12,
+    "seed": 733,
+    "palette": {
+      "sky": "#274b8f",
+      "skyNight": "#0a1230",
+      "tint": [
+        0.8,
+        0.94,
+        1.1
+      ]
+    },
+    "climate": {
+      "temperature": -170,
+      "tempVariance": 0.25
+    },
+    "terrain": {
+      "roughness": 0.3,
+      "craters": 2,
+      "iceCaps": 0.9,
+      "oreRichness": 0.3,
+      "sulfurFields": 0.15,
+      "biomes": true
+    },
+    "weather": {
+      "cryo-fog": 1.8,
+      "meteor-shower": 0.3
+    },
+    "description": "Another ice-shelled moon. Icefield and sulfur-stained cryovolcanic vents split by chunk."
+  },
+  {
+    "id": "ironrock",
+    "name": "Ironrock",
+    "type": "asteroid",
+    "kind": "m-type-asteroid",
+    "gravity": 0.32,
+    "solarFlux": 0.18,
+    "dayLength": 190,
+    "deltaV": 60,
+    "size": 72,
+    "maxHeight": 12,
+    "seed": 5150,
+    "palette": {
+      "sky": "#39306b",
+      "skyNight": "#0e0b26",
+      "tint": [
+        0.9,
+        0.9,
+        0.95
+      ]
+    },
+    "climate": {
+      "temperature": -85,
+      "tempVariance": 0.15
+    },
+    "terrain": {
+      "roughness": 0.55,
+      "craters": 4,
+      "iceCaps": 0,
+      "oreRichness": 0.75,
+      "irregular": true,
+      "biomes": true
+    },
+    "minerals": {
+      "iron": 0.62,
+      "copper": 0.13,
+      "titanium": 0.25
+    },
+    "weather": {
+      "solar-storm": 0.8,
+      "meteor-shower": 1.2
+    },
+    "description": "A nickel-iron-rich M-type — the richest ore in this catalog, metallic-sheened regolith on top."
+  },
+  {
+    "id": "skyhaven",
+    "name": "Skyhaven",
+    "type": "gaseous",
+    "kind": "gaseous",
+    "gravity": 22,
+    "solarFlux": 0.1,
+    "dayLength": 300,
+    "deltaV": 95,
+    "size": 96,
+    "maxHeight": 10,
+    "seed": 8080,
+    "palette": {
+      "sky": "#8892b0",
+      "skyNight": "#1a1c2e",
+      "tint": [
+        0.85,
+        0.87,
+        1.02
+      ]
+    },
+    "climate": {
+      "temperature": -140,
+      "tempVariance": 0.3
+    },
+    "terrain": {
+      "roughness": 0.15,
+      "craters": 0,
+      "iceCaps": 0,
+      "oreRichness": 0.15,
+      "biomes": true
+    },
+    "weather": {
+      "dust-storm": 2.5,
+      "solar-storm": 1
+    },
+    "description": "Not a landing in reality — TakeOn plays a gas giant as a storm-lashed cloud platform, its gameplay \"surface\"."
   }
 ]
\ No newline at end of file
diff --git a/scripts/copy-assets.mjs b/scripts/copy-assets.mjs
new file mode 100644
index 0000000..40b2d93
--- /dev/null
+++ b/scripts/copy-assets.mjs
@@ -0,0 +1,26 @@
+#!/usr/bin/env node
+/**
+ * Copy non-TypeScript build assets (stylesheets) into a package's dist.
+ * `tsc` ignores them, and a plain `cp` is not portable enough for CI on
+ * every platform contributors use.
+ *
+ *   node ../../scripts/copy-assets.mjs src/styles.css dist/styles.css
+ *
+ * Paths are resolved relative to the current working directory, i.e. the
+ * package running the script.
+ */
+import { copyFileSync, mkdirSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+
+const args = process.argv.slice(2);
+if (args.length === 0 || args.length % 2 !== 0) {
+  console.error('usage: copy-assets.mjs <src> <dest> [<src> <dest>...]');
+  process.exit(1);
+}
+
+for (let i = 0; i < args.length; i += 2) {
+  const src = resolve(process.cwd(), args[i]);
+  const dest = resolve(process.cwd(), args[i + 1]);
+  mkdirSync(dirname(dest), { recursive: true });
+  copyFileSync(src, dest);
+}
diff --git a/web/app/customize/page.tsx b/web/app/customize/page.tsx
index fc41224..b8c5f41 100644
--- a/web/app/customize/page.tsx
+++ b/web/app/customize/page.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useMemo, useState } from 'react';
 import {
-  BODIES,
+  listBodies,
   canReach,
   computeStats,
   defaultSpec,
@@ -203,7 +203,7 @@ function CustomizePageInner() {
           <div className="stat" style={{ borderBottom: 'none' }}>
             <span>In range</span>
             <b>
-              {BODIES.filter((b) => canReach(stats, b.deltaV))
+              {listBodies().filter((b) => canReach(stats, b.deltaV))
                 .map((b) => b.name)
                 .join(', ') || 'nowhere — add fuel'}
             </b>
diff --git a/web/app/editor/page.tsx b/web/app/editor/page.tsx
new file mode 100644
index 0000000..587884e
--- /dev/null
+++ b/web/app/editor/page.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+/**
+ * The world editor. Loaded client-side only: it drives canvases, localStorage
+ * and the engine's runtime body registry, none of which exist during SSR.
+ */
+const TakeOnEditor = dynamic(() => import('@takeon/editor').then((m) => m.TakeOnEditor), {
+  ssr: false,
+  loading: () => <main className="shell">Loading editor…</main>,
+});
+
+export default function EditorPage() {
+  return (
+    <div className="editor-fullscreen">
+      <TakeOnEditor />
+    </div>
+  );
+}
diff --git a/web/app/globals.css b/web/app/globals.css
index 66943d8..225e74f 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -283,250 +283,50 @@ input[type='color'] {
   background: none;
 }
 
-/* ── Mission view ───────────────────────────────────────────────────── */
+/* ── Mission & editor hosts ─────────────────────────────────────────── */
 
-.mission-root {
+/*
+ * The mission HUD and the editor ship their own styles (@takeon/ui,
+ * @takeon/editor). This app only supplies the fullscreen frames they mount
+ * into, so restyling the game is a matter of overriding --tk-* variables
+ * rather than editing this file.
+ */
+
+.mission-fullscreen,
+.editor-fullscreen {
   position: fixed;
   inset: 0;
   overflow: hidden;
-  background: #000;
-  /* Sits above the site nav — missions are fullscreen. */
+  /* Sits above the site nav — missions and the editor are fullscreen. */
   z-index: 25;
 }
 
-.mission-canvas {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  outline: none;
-}
-
-.hud-top {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  gap: 8px;
-  padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
-  align-items: center;
-  pointer-events: none;
-  z-index: 5;
-}
-
-.hud-top > * {
-  pointer-events: auto;
-}
-
-.meter {
-  flex: 1;
-  max-width: 170px;
-  background: rgba(20, 15, 50, 0.78);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 5px 8px;
-  font-size: 11px;
-  color: var(--text-dim);
-}
-
-.meter .bar {
-  height: 6px;
-  border-radius: 3px;
-  background: #2b2461;
-  margin-top: 3px;
-  overflow: hidden;
-}
-
-.meter .bar > div {
-  height: 100%;
-  border-radius: 3px;
-  transition: width 0.3s;
-}
-
-.hud-actions {
-  position: absolute;
-  right: 10px;
-  bottom: calc(14px + env(safe-area-inset-bottom));
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  z-index: 5;
-}
-
-.action-btn {
-  width: 62px;
-  height: 62px;
-  border-radius: 50%;
-  background: rgba(30, 24, 73, 0.9);
-  border: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  gap: 2px;
-  color: var(--text-dim);
-  user-select: none;
-}
-
-.action-btn .ico {
-  font-size: 20px;
-  line-height: 1;
-}
-
-.action-btn:hover {
-  border-color: var(--accent);
-  color: var(--text);
-}
-
-.dpad {
-  position: absolute;
-  left: 14px;
-  bottom: calc(14px + env(safe-area-inset-bottom));
-  display: grid;
-  grid-template-columns: repeat(3, 54px);
-  grid-template-rows: repeat(3, 54px);
-  gap: 4px;
-  z-index: 5;
-}
-
-.dpad button {
-  border-radius: 12px;
-  background: rgba(30, 24, 73, 0.9);
-  font-size: 20px;
-  padding: 0;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.dpad .blank {
-  visibility: hidden;
-}
-
-.toasts {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: calc(96px + env(safe-area-inset-bottom));
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 6px;
-  z-index: 6;
-  pointer-events: none;
-  width: min(92vw, 420px);
-}
-
-.toast {
-  background: rgba(22, 17, 56, 0.93);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  padding: 8px 12px;
-  border-radius: 8px;
-  font-size: 13px;
-  animation: toast-in 0.2s ease-out;
-}
-
-.toast.warn { border-left-color: var(--warn); }
-.toast.good { border-left-color: var(--good); }
-.toast.bad { border-left-color: var(--bad); }
-
-@keyframes toast-in {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: none; }
-}
-
-.minimap {
-  position: absolute;
-  top: calc(52px + env(safe-area-inset-top));
-  right: 10px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: rgba(20, 15, 50, 0.86);
-  padding: 4px;
-  z-index: 5;
-}
-
-.tapmenu {
-  position: absolute;
-  z-index: 8;
-  min-width: 160px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  background: rgba(22, 17, 56, 0.96);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 6px;
-  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
-}
-
-.tapmenu button {
-  padding: 9px 14px;
-  border-radius: 8px;
-  text-align: left;
-  font-size: 13px;
-}
-
-.tapmenu .hdr {
-  font-size: 11px;
-  color: var(--text-dim);
-  padding: 2px 6px;
-  font-family: ui-monospace, monospace;
-}
-
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(8, 5, 24, 0.74);
-  z-index: 30;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+.editor-fullscreen {
+  top: 57px;
+  background: #eef1f6;
 }
 
-@media (min-width: 700px) {
-  .modal-backdrop {
-    align-items: center;
-  }
+/* The editor is a light workspace; match the app bar above it so the page
+   doesn't read as two different products stacked together. */
+body:has(.editor-fullscreen) .topnav {
+  background: #ffffff;
+  border-bottom-color: #dbe2ec;
 }
 
-.modal {
-  background: var(--bg-panel);
-  border: 1px solid var(--border);
-  border-radius: 14px 14px 0 0;
-  width: min(100%, 560px);
-  max-height: 80vh;
-  overflow-y: auto;
-  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+body:has(.editor-fullscreen) .topnav .logo {
+  color: #1b2532;
 }
 
-@media (min-width: 700px) {
-  .modal {
-    border-radius: 14px;
-  }
+body:has(.editor-fullscreen) .topnav .chip {
+  background: #f7f9fc;
+  border-color: #dbe2ec;
+  color: #5d6b7d;
 }
 
-.build-option {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  text-align: left;
-}
-
-.build-option .info {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.build-option .info .desc {
-  font-size: 12px;
-  color: var(--text-dim);
+body:has(.editor-fullscreen) .topnav button {
+  background: #ffffff;
+  border-color: #c3cedd;
+  color: #1b2532;
 }
 
 .photo-grid {
diff --git a/web/app/launch/page.tsx b/web/app/launch/page.tsx
index a2b02b6..f544c2b 100644
--- a/web/app/launch/page.tsx
+++ b/web/app/launch/page.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useMemo, useState } from 'react';
-import { BODIES, canReach, computeStats, type RoverSpec } from '@takeon/engine';
+import { canReach, computeStats, listBodies, type RoverSpec } from '@takeon/engine';
 import { useSync } from '../../lib/sync-context';
 
 function LaunchPageInner() {
@@ -52,7 +52,7 @@ function LaunchPageInner() {
       </p>
 
       <div className="grid" style={{ marginTop: 16 }}>
-        {BODIES.map((b) => {
+        {listBodies().map((b) => {
           const reachable = stats ? canReach(stats, b.deltaV) : false;
           return (
             <div className="card" key={b.id}>
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 65797af..aff1cff 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata, Viewport } from 'next';
 import Link from 'next/link';
+import '@takeon/ui/styles.css';
+import '@takeon/editor/styles.css';
 import './globals.css';
 import { SyncProvider } from '../lib/sync-context';
 
@@ -27,6 +29,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             </Link>
             <span className="chip">rover missions</span>
             <span className="spacer" />
+            <Link href="/editor">
+              <button title="World editor: terrain, noise, maps, play mode">🛠 Editor</button>
+            </Link>
             <Link href="/customize">
               <button>+ New rover</button>
             </Link>
diff --git a/web/app/mission/page.tsx b/web/app/mission/page.tsx
index 2045cfa..192fb76 100644
--- a/web/app/mission/page.tsx
+++ b/web/app/mission/page.tsx
@@ -1,253 +1,60 @@
 'use client';
 
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import {
-  createRoverGame,
-  getBody,
-  MATERIALS,
-  RECIPES,
-  RESOURCE_NAMES,
-  STRUCTURES,
-  WEATHER_INFO,
-  type MissionState,
-  type ResourceKey,
-  type RoverGame,
-  type RoverSpec,
-  type StructureType,
-  type Vec2,
-} from '@takeon/engine';
+import { Suspense, useEffect, useState } from 'react';
+import { getBody, type BodyDef, type MissionState, type RoverSpec } from '@takeon/engine';
+import { MissionProvider, MissionScreen, TakeOnUIProvider } from '@takeon/ui';
 import { useSync } from '../../lib/sync-context';
 
-interface Toast {
-  id: number;
-  text: string;
-  kind: 'info' | 'warn' | 'good' | 'bad';
-}
-
-interface HudState {
-  battery: number;
-  batteryMax: number;
-  durability: number;
-  durabilityMax: number;
-  cargoUsed: number;
-  cargoMax: number;
-  daylight: number;
-  weatherLabel: string | null;
-  cargo: Partial<Record<ResourceKey, number>>;
-  status: 'active' | 'complete' | 'lost';
-  canMine: boolean;
-  canPhoto: boolean;
-  canScan: boolean;
-}
-
-let toastId = 0;
-
+/**
+ * The standalone mission screen is a thin host: it resolves which world and
+ * rover to run from the URL and the sync adapter, then hands them to
+ * @takeon/ui. Every HUD component comes from the registry, so this page (and
+ * any game embedding TakeOn) can swap parts of the interface via
+ * `TakeOnUIProvider` without touching the engine.
+ */
 function MissionPageInner() {
   const { sync, ready } = useSync();
   const router = useRouter();
   const params = useSearchParams();
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const minimapRef = useRef<HTMLCanvasElement>(null);
-  const gameRef = useRef<RoverGame | null>(null);
-  const [hud, setHud] = useState<HudState | null>(null);
-  const [toasts, setToasts] = useState<Toast[]>([]);
-  const [buildOpen, setBuildOpen] = useState(false);
-  const [craftOpen, setCraftOpen] = useState(false);
-  const [tapMenu, setTapMenu] = useState<{ tile: Vec2; x: number; y: number } | null>(null);
-  const [endOpen, setEndOpen] = useState(false);
+  const [boot, setBoot] = useState<{ body: BodyDef; spec: RoverSpec; resume?: MissionState } | null>(null);
   const [fatal, setFatal] = useState('');
-  const [showMinimap, setShowMinimap] = useState(true);
 
   const missionId = params.get('id');
   const roverId = params.get('rover');
   const bodyId = params.get('body');
 
-  const toast = useCallback((text: string, kind: Toast['kind'] = 'info') => {
-    const id = ++toastId;
-    setToasts((t) => [...t.slice(-3), { id, text, kind }]);
-    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 3800);
-  }, []);
-
-  // ── Boot the game ─────────────────────────────────────────────────────
   useEffect(() => {
-    if (!ready || !canvasRef.current) return;
-    let disposed = false;
-    let game: RoverGame | null = null;
-    let saveTimer: ReturnType<typeof setInterval> | null = null;
-    let mapTimer: ReturnType<typeof setInterval> | null = null;
-
-    const boot = async () => {
-      let resume: MissionState | undefined;
-      let spec: RoverSpec | undefined;
-      let body = bodyId ? getBody(bodyId) : undefined;
+    if (!ready) return;
+    let cancelled = false;
 
+    const load = async () => {
       if (missionId) {
         const state = await sync.loadMission(missionId);
-        if (!state) {
-          setFatal('Mission not found.');
-          return;
-        }
-        resume = state;
-        spec = state.rover.spec;
-        body = getBody(state.bodyId);
-      } else if (roverId && body) {
-        const rovers = await sync.listRovers();
-        spec = rovers.find((r) => r.id === roverId);
-        if (!spec) {
-          setFatal('Rover not found.');
-          return;
-        }
-      }
-      if (!spec || !body || disposed || !canvasRef.current) {
-        if (!spec || !body) setFatal('Missing rover or destination.');
+        if (cancelled) return;
+        if (!state) return setFatal('Mission not found.');
+        const body = getBody(state.bodyId);
+        if (!body) return setFatal(`Unknown destination "${state.bodyId}".`);
+        setBoot({ body, spec: state.rover.spec, resume: state });
         return;
       }
-
-      game = createRoverGame({
-        canvas: canvasRef.current,
-        body,
-        spec,
-        resume,
-        onPhoto: (dataUrl, meta) => {
-          toast(`📷 ${meta.caption}`, 'good');
-          void sync.uploadPhoto(meta, dataUrl, game?.sim.missionId ?? '').catch(() => undefined);
-        },
-        onTileTap: (tile, pos) => {
-          setTapMenu({ tile, x: pos.x, y: pos.y });
-          return true;
-        },
-      });
-      gameRef.current = game;
-
-      const g = game;
-      g.events.on('mined', ({ resource, amount }) => {
-        if (resource) toast(`+${amount} ${RESOURCE_NAMES[resource]}`, 'good');
-      });
-      g.events.on('cargoFull', () => toast('Cargo hold full', 'warn'));
-      g.events.on('blocked', ({ reason }) => {
-        if (reason === 'cliff') toast('Too steep for this drivetrain', 'warn');
-        if (reason === 'battery') toast('Not enough battery', 'warn');
-        if (reason === 'edge') toast('Nothing to drive on there', 'warn');
-      });
-      g.events.on('scan', ({ found }) =>
-        toast(found.length > 0 ? `Scanner: ${found.length} anomaly signal(s) marked` : 'Scanner: no new signals', found.length > 0 ? 'good' : 'info'),
-      );
-      g.events.on('anomalyDocumented', ({ anomaly }) => {
-        toast(`★ Discovery documented: ${anomaly.name}`, 'good');
-        void sync
-          .recordDiscovery(anomaly, g.sim.body.id, g.sim.missionId)
-          .catch(() => undefined);
-      });
-      g.events.on('built', ({ structure }) =>
-        toast(`Constructed ${STRUCTURES[structure.type].name}`, 'good'),
-      );
-      g.events.on('buildFailed', ({ reason }) => toast(reason, 'warn'));
-      g.events.on('crafted', ({ resource, amount }) =>
-        toast(`Refined ${amount} ${RESOURCE_NAMES[resource]}`, 'good'),
-      );
-      g.events.on('craftFailed', ({ reason }) => toast(reason, 'warn'));
-      g.events.on('blockPlaced', () => toast('Block placed', 'good'));
-      g.events.on('damaged', ({ amount, reason }) => {
-        if (amount >= 1) toast(`Chassis damage −${amount.toFixed(0)} (${reason})`, 'bad');
-      });
-      g.events.on('repaired', ({ amount }) => toast(`Repaired +${amount.toFixed(0)} durability`, 'good'));
-      g.events.on('roverLost', ({ reason }) => toast(`Rover lost: ${reason}`, 'bad'));
-      g.events.on('weather', ({ type, phase }) => {
-        const info = WEATHER_INFO[type];
-        if (phase === 'start') toast(`${info.icon} ${info.warning}`, 'warn');
-        else toast(`${info.icon} ${info.name} has passed.`, 'good');
-      });
-      g.events.on('meteorImpact', ({ distance }) => {
-        if (distance <= 2.5) toast('☄ Direct hit — chassis damage!', 'bad');
-        else if (distance <= 6) toast('☄ Impact close by!', 'warn');
-      });
-
-      const resize = () => {
-        const el = canvasRef.current;
-        if (!el || !g) return;
-        const rect = el.getBoundingClientRect();
-        g.resize(rect.width, rect.height, Math.min(2, window.devicePixelRatio || 1));
-      };
-      resize();
-      window.addEventListener('resize', resize);
-      g.start();
-
-      const hudTimer = setInterval(() => {
-        const r = g.sim.rover;
-        setHud({
-          battery: r.battery,
-          batteryMax: r.stats.batteryCapacity,
-          durability: r.durability,
-          durabilityMax: r.stats.durabilityMax,
-          cargoUsed: r.cargoUsed,
-          cargoMax: r.stats.cargoCapacity,
-          daylight: g.sim.daylight(),
-          weatherLabel: g.sim.weather
-            ? `${WEATHER_INFO[g.sim.weather.type].icon} ${WEATHER_INFO[g.sim.weather.type].name}`
-            : null,
-          cargo: { ...r.cargo },
-          status: g.sim.status,
-          canMine: r.stats.miningPower > 0,
-          canPhoto: r.stats.photoQuality > 0,
-          canScan: r.stats.scanRadius > 0,
-        });
-      }, 250);
-
-      const save = () =>
-        void sync.saveMission(g.save(), g.sim.rover.spec.name).catch(() => undefined);
-      saveTimer = setInterval(save, 20000);
-      const onHide = () => {
-        if (document.visibilityState === 'hidden') save();
-      };
-      document.addEventListener('visibilitychange', onHide);
-
-      mapTimer = setInterval(() => {
-        if (minimapRef.current) g.renderer.renderMinimap(minimapRef.current);
-      }, 1200);
-      if (minimapRef.current) g.renderer.renderMinimap(minimapRef.current);
-
-      // First save so the mission shows up as resumable immediately.
-      save();
-
-      cleanupRef.current = () => {
-        window.removeEventListener('resize', resize);
-        document.removeEventListener('visibilitychange', onHide);
-        clearInterval(hudTimer);
-        if (saveTimer) clearInterval(saveTimer);
-        if (mapTimer) clearInterval(mapTimer);
-        save();
-        g.dispose();
-      };
+      const body = bodyId ? getBody(bodyId) : undefined;
+      if (!roverId || !body) return setFatal('Missing rover or destination.');
+      const rovers = await sync.listRovers();
+      if (cancelled) return;
+      const spec = rovers.find((r) => r.id === roverId);
+      if (!spec) return setFatal('Rover not found.');
+      setBoot({ body, spec });
     };
 
-    const cleanupRef = { current: null as null | (() => void) };
-    void boot();
+    void load().catch((err) => {
+      console.warn('[takeon] mission load failed', err);
+      if (!cancelled) setFatal('Could not load this mission.');
+    });
     return () => {
-      disposed = true;
-      cleanupRef.current?.();
-      gameRef.current = null;
+      cancelled = true;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ready, missionId, roverId, bodyId, sync]);
-
-  const endMission = async () => {
-    const g = gameRef.current;
-    if (!g) return;
-    g.stop();
-    const state = g.save();
-    if (state.status === 'active') state.status = 'complete';
-    try {
-      const credits = await sync.completeMission(state, g.sim.banked);
-      await sync.saveMission(state, g.sim.rover.spec.name).catch(() => undefined);
-      toast(`Mission complete: +${credits} credits`, 'good');
-    } catch (err) {
-      console.warn('completeMission failed', err);
-    }
-    router.push('/');
-  };
-
-  const g = gameRef.current;
+  }, [ready, sync, missionId, roverId, bodyId]);
 
   if (fatal) {
     return (
@@ -259,281 +66,21 @@ function MissionPageInner() {
     );
   }
 
-  return (
-    <div className="mission-root">
-      <canvas ref={canvasRef} className="mission-canvas" aria-label="Rover mission view" />
-
-      {hud && (
-        <div className="hud-top">
-          <div className="meter" title="Battery">
-            ⚡ {Math.round(hud.battery)}/{hud.batteryMax}
-            <div className="bar">
-              <div
-                style={{
-                  width: `${(hud.battery / Math.max(1, hud.batteryMax)) * 100}%`,
-                  background: hud.battery / Math.max(1, hud.batteryMax) < 0.2 ? 'var(--bad)' : 'var(--accent)',
-                }}
-              />
-            </div>
-          </div>
-          <div className="meter" title="Durability">
-            🛡 {Math.round(hud.durability)}/{hud.durabilityMax}
-            <div className="bar">
-              <div
-                style={{
-                  width: `${(hud.durability / Math.max(1, hud.durabilityMax)) * 100}%`,
-                  background:
-                    hud.durability / Math.max(1, hud.durabilityMax) < 0.25 ? 'var(--bad)' : 'var(--good)',
-                }}
-              />
-            </div>
-          </div>
-          <div className="meter" title="Cargo">
-            📦 {hud.cargoUsed}/{hud.cargoMax}
-            <div className="bar">
-              <div
-                style={{
-                  width: `${(hud.cargoUsed / Math.max(1, hud.cargoMax)) * 100}%`,
-                  background: 'var(--accent-2)',
-                }}
-              />
-            </div>
-          </div>
-          <span className="chip">{hud.daylight > 0.5 ? '☀️' : hud.daylight > 0 ? '🌆' : '🌙'}</span>
-          {hud.weatherLabel && <span className="chip">{hud.weatherLabel}</span>}
-          <span className="spacer" />
-          <button onClick={() => gameRef.current?.rotateView()} title="Rotate view (R)">⟳</button>
-          <button onClick={() => setShowMinimap((v) => !v)} title="Toggle map">🗺</button>
-          <button onClick={() => setEndOpen(true)}>End</button>
-        </div>
-      )}
-
-      <canvas
-        ref={minimapRef}
-        width={132}
-        height={132}
-        className="minimap"
-        style={{ display: showMinimap ? 'block' : 'none' }}
-      />
-
-      <div className="dpad" aria-label="Drive controls">
-        <span className="blank" />
-        <button onPointerDown={() => gameRef.current?.move(3)} aria-label="Drive north-east">▲</button>
-        <span className="blank" />
-        <button onPointerDown={() => gameRef.current?.move(2)} aria-label="Drive north-west">◀</button>
-        <button
-          onPointerDown={() => gameRef.current?.setCameraFollow(true)}
-          aria-label="Centre camera"
-        >
-          ◎
-        </button>
-        <button onPointerDown={() => gameRef.current?.move(0)} aria-label="Drive south-east">▶</button>
-        <span className="blank" />
-        <button onPointerDown={() => gameRef.current?.move(1)} aria-label="Drive south-west">▼</button>
-        <span className="blank" />
-      </div>
+  if (!boot) return <main className="shell">Loading mission…</main>;
 
-      <div className="hud-actions">
-        {hud?.canMine && (
-          <button className="action-btn" onClick={() => gameRef.current?.mine()}>
-            <span className="ico">⛏</span>Mine
-          </button>
-        )}
-        {hud?.canPhoto && (
-          <button className="action-btn" onClick={() => gameRef.current?.photo()}>
-            <span className="ico">📷</span>Photo
-          </button>
-        )}
-        {hud?.canScan && (
-          <button className="action-btn" onClick={() => gameRef.current?.scan()}>
-            <span className="ico">📡</span>Scan
-          </button>
-        )}
-        <button className="action-btn" onClick={() => setBuildOpen(true)}>
-          <span className="ico">🏗</span>Build
-        </button>
-        <button className="action-btn" onClick={() => setCraftOpen(true)}>
-          <span className="ico">⚗️</span>Craft
-        </button>
-        <button className="action-btn" onClick={() => gameRef.current?.placeBlock()}>
-          <span className="ico">🧱</span>Place
-        </button>
-        <button className="action-btn" onClick={() => gameRef.current?.repair()}>
-          <span className="ico">🔧</span>Repair
-        </button>
-        <button
-          className="action-btn"
-          onClick={() => {
-            const moved = gameRef.current?.deposit() ?? 0;
-            toast(moved > 0 ? `Banked ${moved} units in cache` : 'No cache adjacent', moved > 0 ? 'good' : 'warn');
-          }}
-        >
-          <span className="ico">📥</span>Deposit
-        </button>
-      </div>
-
-      {tapMenu && g && (
-        <div
-          className="tapmenu"
-          style={{
-            left: Math.min(tapMenu.x, (canvasRef.current?.clientWidth ?? 400) - 180),
-            top: Math.min(tapMenu.y, (canvasRef.current?.clientHeight ?? 400) - 160),
-          }}
+  return (
+    <div className="mission-fullscreen">
+      <TakeOnUIProvider>
+        <MissionProvider
+          body={boot.body}
+          spec={boot.spec}
+          resume={boot.resume}
+          sync={sync}
+          onEnd={() => router.push('/')}
         >
-          {(() => {
-            const world = g.sim.world;
-            const mat = MATERIALS[world.surfaceMaterial(tapMenu.tile.x, tapMenu.tile.y)];
-            const h = world.height(tapMenu.tile.x, tapMenu.tile.y);
-            const canMine = h > 0 && g.sim.rover.stats.miningPower > 0;
-            const yieldName = mat.yields ? RESOURCE_NAMES[mat.yields.resource] : null;
-            return (
-              <>
-                <span className="hdr">
-                  {mat.name} · [{tapMenu.tile.x},{tapMenu.tile.y}]
-                </span>
-                <button
-                  onClick={() => {
-                    gameRef.current?.walkTo(tapMenu.tile.x, tapMenu.tile.y);
-                    setTapMenu(null);
-                  }}
-                >
-                  🛞 Drive here
-                </button>
-                {canMine && (
-                  <button
-                    onClick={() => {
-                      gameRef.current?.orderMine(tapMenu.tile.x, tapMenu.tile.y);
-                      setTapMenu(null);
-                      toast(`Mining order: ${mat.name}`);
-                    }}
-                  >
-                    ⛏ Mine {yieldName ?? mat.name}
-                  </button>
-                )}
-                <button onClick={() => setTapMenu(null)}>✕ Cancel</button>
-              </>
-            );
-          })()}
-        </div>
-      )}
-
-      <div className="toasts">
-        {toasts.map((t) => (
-          <div key={t.id} className={`toast ${t.kind === 'info' ? '' : t.kind}`}>
-            {t.text}
-          </div>
-        ))}
-      </div>
-
-      {buildOpen && g && (
-        <div className="modal-backdrop" onClick={() => setBuildOpen(false)}>
-          <div className="modal" onClick={(e) => e.stopPropagation()}>
-            <h3>Construction — faces the tile ahead of the rover</h3>
-            <p className="sub" style={{ color: 'var(--text-dim)', fontSize: 13 }}>
-              Costs come out of the cargo hold. Cargo:{' '}
-              {Object.entries(hud?.cargo ?? {})
-                .map(([k, v]) => `${v} ${RESOURCE_NAMES[k as ResourceKey]}`)
-                .join(', ') || 'empty'}
-            </p>
-            {Object.values(STRUCTURES).map((def) => {
-              const affordable = Object.entries(def.cost).every(
-                ([res, qty]) => (hud?.cargo[res as ResourceKey] ?? 0) >= (qty ?? 0),
-              );
-              return (
-                <button
-                  key={def.type}
-                  className="build-option"
-                  disabled={!affordable}
-                  onClick={() => {
-                    const ok = gameRef.current?.build(def.type as StructureType);
-                    if (ok) setBuildOpen(false);
-                  }}
-                >
-                  <span className="info">
-                    <b>{def.name}</b>
-                    <span className="desc">{def.description}</span>
-                  </span>
-                  <span className="tag">
-                    {Object.entries(def.cost)
-                      .map(([res, qty]) => `${qty} ${res}`)
-                      .join(' + ')}
-                  </span>
-                </button>
-              );
-            })}
-            <button onClick={() => setBuildOpen(false)}>Close</button>
-          </div>
-        </div>
-      )}
-
-      {craftOpen && g && (
-        <div className="modal-backdrop" onClick={() => setCraftOpen(false)}>
-          <div className="modal" onClick={(e) => e.stopPropagation()}>
-            <h3>Refining — from cargo, on the rover</h3>
-            <p className="sub" style={{ color: 'var(--text-dim)', fontSize: 13 }}>
-              Cargo:{' '}
-              {Object.entries(hud?.cargo ?? {})
-                .map(([k, v]) => `${v} ${RESOURCE_NAMES[k as ResourceKey]}`)
-                .join(', ') || 'empty'}
-            </p>
-            {RECIPES.map((rec) => {
-              const affordable = Object.entries(rec.input).every(
-                ([res, qty]) => (hud?.cargo[res as ResourceKey] ?? 0) >= (qty ?? 0),
-              );
-              return (
-                <button
-                  key={rec.id}
-                  className="build-option"
-                  disabled={!affordable}
-                  onClick={() => gameRef.current?.craft(rec.id)}
-                >
-                  <span className="info">
-                    <b>
-                      {rec.name}
-                      {rec.near ? ' (needs refinery)' : ''}
-                    </b>
-                    <span className="desc">{rec.description}</span>
-                  </span>
-                  <span className="tag">
-                    {Object.entries(rec.input)
-                      .map(([res, qty]) => `${qty} ${res}`)
-                      .join(' + ')}{' '}
-                    → {rec.output.amount} {rec.output.resource}
-                  </span>
-                </button>
-              );
-            })}
-            <button onClick={() => setCraftOpen(false)}>Close</button>
-          </div>
-        </div>
-      )}
-
-      {(endOpen || hud?.status === 'lost') && (
-        <div className="modal-backdrop" onClick={() => setEndOpen(false)}>
-          <div className="modal" onClick={(e) => e.stopPropagation()}>
-            {hud?.status === 'lost' ? (
-              <>
-                <h3>Rover lost</h3>
-                <p className="sub" style={{ color: 'var(--text-dim)' }}>
-                  The mission is over, but documented discoveries and photos still count. Banked
-                  cache deposits are credited; cargo on the rover is not recovered.
-                </p>
-              </>
-            ) : (
-              <>
-                <h3>End mission and recover yield?</h3>
-                <p className="sub" style={{ color: 'var(--text-dim)' }}>
-                  Cargo, cache deposits, photos and documented discoveries convert to credits.
-                </p>
-              </>
-            )}
-            <button className="primary" onClick={() => void endMission()}>
-              {hud?.status === 'lost' ? 'Write off rover & collect science' : 'Recover & end mission'}
-            </button>
-            {hud?.status !== 'lost' && <button onClick={() => setEndOpen(false)}>Keep driving</button>}
-          </div>
-        </div>
-      )}
+          <MissionScreen onEnded={() => router.push('/')} />
+        </MissionProvider>
+      </TakeOnUIProvider>
     </div>
   );
 }
diff --git a/web/next.config.mjs b/web/next.config.mjs
index abe0c17..6b93e3d 100644
--- a/web/next.config.mjs
+++ b/web/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ['@takeon/engine'],
+  transpilePackages: ['@takeon/engine', '@takeon/ui', '@takeon/editor'],
   eslint: { ignoreDuringBuilds: true },
 };
 
diff --git a/web/package.json b/web/package.json
index 27f3448..547efa7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@takeon/editor": "*",
     "@takeon/engine": "*",
+    "@takeon/ui": "*",
     "next": "^15.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"