docs: System Plate 01 — an isometric map of the module graph

[Blazenetic]

What this is

docs/architecture-map.html — one self-contained static page that draws this repository as an isometric site plan. Open it over http:// (npm start → /docs/architecture-map.html) or from Pages once merged.

Live preview: https://claude.ai/code/artifact/01e27550-33e5-4fbd-a7e3-0b0d59bda865

It is documentation. Nothing under js/, css/ or index.html is touched, there is no build step, no bundler and no runtime dependency — the page is HTML, CSS and one inline script.

What it draws

41 solids, four districts. Shell (markup, tokens, manifest), Plant (transport, generators, persistence, DOM), Field (the 23-module renderer), Proving ground (tests, CI, contract, record). Height is the file's literal wc -l on a square-root scale, so css/styles.css at 1,870 doesn't flatten js/still-field/math.js at 23.

Form carries information. Seven silhouettes, each meaning something true about the module:

form	meaning
stack (setback tower)	orchestrator — composes other modules and owns the wiring
silo	shared state object with exactly one writer
saw (factory shed)	a draw pass; runs inside every frame
mast	leaf — imports nothing from its own district
hall	content surface — markup, tokens, strings, snapshots
vault	verification
obelisk	the contract (AGENTS.md)

34 wires, all real. 20 control (a call or an import) and 14 payload (a value crossing a boundary, labelled with what actually moves — the 12 s AudioBuffer, the Uint8Array(128) of FFT bins, { low, mid, high, overall }, the keep-out rectangles, the stats snapshot, the 16-step quantised colour ramp). Hovering or keyboard-focusing a solid dims everything it doesn't touch and lights only its own wiring.

Four traces. Each animates a payload along its actual path, one step at a time, with a file-and-line citation per step:

• Cold boot — deferred module script → theme applied before anything measures a colour → persisted state read at import → initStillField() → subscribe() firing immediately as the initial render → keep-outs measured synchronously.
• Press play — handler calls audio.play() and stops → ensureAudio() + a 12 s buffer built synchronously inside the 150 ms dip → analyser before the gain node → the state module publishes and only then does the button change.
• One frame @ 30 fps — band energy in → stepNodes() → buildGrid() → links → nodes → info layer → the rationed --still-energy write.
• Drag the depth slider — prefs.setDepth() clamps and persists (throttled) → measureWorld() → banded grid reallocation → applyNodeCount() → emit().

An explainer panel per module: role, key facts, its wires with payloads, and where one exists, the invariant that shaped it — the analyser's position in the chain, the periodic buffer, the released 1.7 MiB listing raster, the wall-clock sleep-timer deadline, the hysteretic callout side.

Plus the frame pipeline in fixed order, the one architectural rule with the wrong/right snippet, six load-bearing invariants, and a full schedule of solids as a text table so nothing on the plate is only available as a picture.

Sources

Every number and every claim traces to AGENTS.md, docs/still-field-architecture.md, docs/info-layer.md or the source, and the page cites file:line throughout. Line counts are literal at this commit.

Design

Both palettes are the app's own tokens straight out of css/styles.css — bone #E0D6C8, titanium #B5AA9A, violet #7C3AED, cyan spark #0E9BB5, the X/Y/Z axis triad — and the dark side uses the :root dark block. Labels sit on plates rather than glows, which is the same trick the info layer uses for the same reason.

Verification

• Chromium at 1440 / 1080 / 820 / 600 / 390 px: no horizontal overflow at any width, no console or page errors.
• Both prefers-color-scheme values plus explicit data-theme stamps.
• Solids are tabindex="0" with role="button" and a visible focus ring; Enter/Space pins one.
• Packet motion and all transitions are disabled under prefers-reduced-motion.
• Google Fonts is the only external request, and every face has a real fallback stack.
• npm run lint clean. The browser suite is untouched by this change — under the gate's allow-list (docs/*, *.md) this is a documentation-only PR, so CI will report without running the suite.

Also

Linked from README.md (nav line + the Architecture section) and added as a row in docs/readme.md.

---

Generated by Claude Code