Lab screens
Two states of the lab — Frozen (action step, awaiting input) and Simulating (clip running). Composed live from the same chrome the kit ships: step-bar, restart-link, camera-controls, time-control, and a single device widget at bottom-centre. In Simulating the time-control bar takes the bottom-centre slot and the device widget stacks above it. Production CSS edits land here too.
Microscope panel · picture-in-picture
Frozen · microscope picture-in-picture, peat under 10×
Proposal-stage picture-in-picture microscope panel anchored to the right edge, vertically centred in the negative space between the step bar's lower edge and the widget bar's upper edge — equilibrium between the two pieces of chrome that bracket it, not the viewport centre. Camera rotate/zoom cluster keeps its bottom-right convention so cross-lab muscle memory holds. The PiP is conceptually a universal viewport primitive — microscope is one possible content source, future ones (USB-camera feed, oscilloscope display, telescope view) could fill the same shell. Identity moved to the shell. The device label (MICROSCOPE) is an always-on strip at the bottom of the shell, mono UPPERCASE via --widget-label-*. The magnification toggle group is data-driven from the device states list and is absent here because the device declares no states (client feedback: don't present a magnification control the lesson can't drive). A future device that declares states regenerates the row (reusing the .wb-toggle-group recipe), which frees the bottom-centre widget-bar slot for other instruments a microscope lab might need (stopwatch, ambient thermometer, notepad button). The viewport HUD is plain light mono text directly on the image over the --pip-base desk gray — 10× Peat bottom-left, 200 µm next to a hairline scale bar bottom-right — no chip framing on either, matching the typographic quietness of scientific-imaging conventions. The panel sizes adaptively (width clamped to the right-edge bracket, 240–380 px) rather than a fixed 380 px; the device label sits below the square viewport. No sample selector (lesson-driven switching). No expand-to-fullscreen control (per-lab PiP-vs-fullscreen commitment). Surface chrome (cream + ink border + hard offset shadow) mirrors the production widget-bar via --widget-bar-* tokens. This card depicts the merged "window lab" composition; the bottom-centre widget-bar slot is empty because no other instrument is in play. The card now renders the live <lab-pip-panel> shell wrapping a <lab-microscope-view target="peat_sample" objective="10x"> content element — chrome from js/components/pip-panel/LabPipPanel.js, viewport + HUD from js/components/microscope-view/LabMicroscopeView.js (the label and buttons are the shell's). Production positioning is owned by #pip-anchor in js/handlers/pip/pip-anchor.css; the catalog's .screen-chrome--mr mirrors that geometry for the static screen mockup.
Contents chips · five beakers
Frozen · five beakers, step-focus on three
Mockup of the always-on Background contents-chip layer on a five-beaker scene: every filled container carries its identity chip (white text, dark halo, no plate), and the empty leftmost beaker carries none (absence means empty). The focused or handled container would promote to the Active card (above), and a chip behind a nearer vessel would fade where the body crosses it (Occlusion depth) — this sketch shows the resting Background layer. Beakers are CSS silhouettes — a layout sketch, not a 3D render. The chips are the production .contents-chip components from Atoms.
Lab states · 2 screens
Frozen
Action step · time bar absent · device widget sits at bottom-centre
Simulating
Clip running · step bar carries the SIM phase chip · time-control bar at bottom-centre with the device widget stacked above it
Simulating · speed popover open
Same as Simulating (device widget above the time-control bar); the speed dial is engaged (green) and the speed popover floats above the dial. Three forward speeds — 3x at the top, 1x at the bottom (active).