UXS-015 — Physics Lab · one card model, three views

Status · Draft v0.1 Visual fidelity · House-accurate interactive prototypes at kickoff — docs/prototypes/lab/notebook.html, focus.html, canvas.html (real tokens, Bebas Neue / Space Mono / Crimson Pro, the station-blueprint teal grid, KaTeX). They gate Slice 0 per the "visual anchor before UX commit" rule. Numbers and figures in them are illustrative placeholders, not live kernel output. IA anchor · §lab — a new top-level surface (/lab); IA.md amendment pending Related PRD · PRD-033 · Related RFC · RFC-037

Why this UXS exists

PRD-033 sets the what/why and RFC-037 the how it's built; this UXS owns the part that makes or breaks it — making the Lab feel native to Orrery while introducing a genuinely new interaction (playing with the physics). The Lab reuses Orrery's existing design language wholesale; the novelty is the card and the three views over it. Without a pinned model, "play with the formulas" gets designed ad-hoc in scene code. This spec is the contract for the card, the three views, the promote relationship, the honesty line, and the responsive story.

The one idea: three views over one card model

The atom is a card — a formula instance: (formula id, bound inputs, wiring to other cards, and the FigureSpec it emits). A card is portable data, so it renders in three views matching three intents:

View	Intent	Shape	Prototype
Notebook (v1 home)	keeping / building	ordered, narrated, exportable column of cards	notebook.html
Focus (v1 detail)	drilling into one card	full-screen: big figure + full control rail + derivation	focus.html
Canvas (T2, second workspace)	prototyping	free spatial graph, output→input wiring on the teal grid	canvas.html

Cards promote from Canvas into a Notebook (a card or a wired subgraph). One model, three windows — this is the subsystem, not three routes.

The card (the atom) — built entirely from existing parts

Nothing here is a new visual primitive; every part maps to something already shipping. This is why it reads as Orrery:

Card part	Reused from	Tokens
Title	Bebas Neue header	--font-display, letter-spacing 3px
Equation	KaTeX (already loaded at /science)	inline / display mode
ⓘ symbol deep-links	ScienceChip → /science/[tab]/[section]	teal #4ecdc4
Parameter controls	/plan selector + .readout-grid label/value	Space Mono 7px label / 11px value
Drawn figure	station-blueprint.ts teal-grid canvas	grid rgba(78,205,196,0.09) @ 32px on #04040c
Headline result	.readout-grid strong teal cell + SpacecraftInfoCard live-readout	teal strong cell 15px
"Why?" / derivation	WhyPopover (gold) → expand to a Panel in /science reading style	gold #ffc850
Provenance / honesty line	ImageCredit mono caption	8px, "computed" vs "illustration"

Colour discipline is inherited and strict: teal = figure lines + selection/navigation; gold = explanation (Why?, lens story, caveats); mars-red = fail/deficit. Never mixed.

Notebook (v1 home)

The surface you land on. A centred worksheet (max-width ~820px) on the teal grid: a Bebas title ("GETTING TO MARS"), then a vertical column of cards. Each card carries its controls, its live figure, its readout, a Why? affordance, and a provenance line. A card may reference the result of the card above it ("↳ Δv from above feeds the transfer budget") — composition without wiring. + ADD CELL appends. The whole worksheet exports (per PRD-033 T1) as a lab-report artifact with placard styling. This is the durable thing; it persists (URL/local/file per RFC-037).

Focus (v1 detail)

Drill into a single card — the /plan split, generalized: a big figure stage left on the grid, a persistent control rail right (formula picker, sliders, readout grid, Why?, provenance). Display-mode KaTeX. Invoked from any card in Notebook (and later Canvas). This is where you study one formula; the figure gets room to breathe.

Canvas (T2 — second workspace, not v1)

The prototyping whiteboard: cards dragged freely on the grid, each with input/output sockets; drag a socket to another card to wire output→input, edges drawn in teal. Recompute propagates along edges. + ADD FORMULA drops a card. When a subgraph is worth keeping, promote it into a Notebook. This is the "wire from trajectories down to propulsion" vision — and the expensive part (graph engine, cycle-checking, serialization), which is why it lands after the Notebook proves the card model.

The honesty line (the make-or-break, made visual)

Per PRD-033 §"the honesty line" and PA §"real physics, not approximations that mislead":

• Computed vs illustrated is always visible. Every figure carries an ImageCredit-style provenance line: computed · orrery-kernel · <module>. Generative/illustrative art (T3) sits in a distinct register and is labelled illustration, never on the data path.
• Sketchy-but-exact. The notebook warmth (graph-paper grid, hand-annotated vectors, margin marks) is deterministic SVG styled to look hand-drawn — the styling is warm, the content is computed.
• Fail honestly, visibly. No window / TWR < 1 / insufficient Δv turns the readout mars-red and states the reason (the /plan Δv-deficit pattern), never a blank or a hidden failure.

The figure language

Figures render on the station-blueprint teal hairline grid (near-black #04040c, teal grid, Space Mono axis labels). v1 figure catalogue (all deterministic, from the kernel): transfer ellipse · Δv sensitivity curve · porkchop heatmap · rocket free-body force diagram · ascent profile triptych · EDL entry corridor · orbit/ground-track · sky chart · Tsiolkovsky curve · cislunar ECI. Each is a FigureSpec renderer (RFC-037).

Responsive & mobile

• Notebook is mobile-first (Orrery's core principle). The centred column becomes a single full-width stack; cards are full-width; controls stay usable at 44px targets; the nav collapses to the app's existing mobile pattern. Prototype: notebook.html at 390px reads cleanly.
• Focus adapts to the Panel bottom-sheet convention on mobile (figure top, controls in the sheet).
• Canvas is desktop-first and has no honest mobile story — on phones it degrades to a read-only rendering of the graph (pan/zoom, tap-to-Focus), never a wiring surface. This is a stated limitation, not a detail.

Accessibility

Extends the existing patterns (RFC-031): every control is keyboard-reachable and labelled; sliders have number-input equivalents; ⓘ chips and Why? are focusable; figures carry honest aria-labels describing what they compute (never a bare canvas); reduced-motion stills the recompute/redraw transitions; the Notebook is a linear DOM document (keyboard-native by construction); Canvas provides the DOM-mirror list of cards for non-pointer users.

Prototype coverage & caveats

What the kickoff prototypes (docs/prototypes/lab/) do establish: the house-accurate chrome, tokens, typefaces, the teal figure grid, the card anatomy, and all three view layouts (Notebook desktop + mobile, Focus, Canvas) — enough to lock the look.

What they do not yet establish (and how each is closed):

• Numbers & figures are illustrative placeholders, hand-drawn to shape — not live kernel output. Closed when S2 (registry + FigureSpec renderers) lands; the in-build figures replace the mock SVGs.
• Canvas shows layout only — no live wiring, sockets are static, no recompute. The interactive graph engine is S5; a promote interaction mock is gated before that slice.
• No fail-honest / empty / loading frames yet. The mars-red infeasible state (no window / TWR < 1) gets a mock before S3, since it's core to the honesty line, not an edge case.
• Accessibility isn't demonstrable in a static shot — the a11y contract above is spec, verified in-build (keyboard walk, screen-reader labels, reduced-motion) during S3.

Rule: a state that is load-bearing for trust (fail-honest) or novel (promote/wiring) gets a visual anchor before its slice; ordinary states are proven in-build.

Signature moments that get a visual anchor before build

1. A formula card, live — slider → figure + readout redraw, Why? open (Notebook).
2. Focus on the transfer — the big ellipse on the grid + control rail (Focus).
3. Promote — pulling a wired subgraph from Canvas into a Notebook (T2, mocked before that slice).

The first two are covered by the kickoff prototypes; all three are mocked on real screenshots and gated on Marko's approval before the matching slice ships.