feat(ui): figure export, GIF sizing and review fixes (U-12)

[timurbazhirov]

Merge this first, then #214. Together they are the consolidation of everything from July 12 onward — #204, #207, #208, #209, #210, #212, #213 and #215 are closed as superseded, each verified contained before closing.

This PR is the whole UI/UX proposal except U-13 (touch support), which lands with #214 on top. Design doc: docs/design/uiux-improvements-2026-08.md; §0.1 records what shipped and every deviation from the plan.

Try it: https://deploy-preview-216--mat3ra-mave.netlify.app/ — a Netlify config is included, so every PR now gets its own preview. That is the only way to exercise what the Jest suite structurally cannot reach: pointer capture, real event ordering, CSS layout at a given viewport, GPU rendering. It has already earned its keep — most of the fixes below came from reviewing a preview, not from the suite.

The publication case — figure export (U-12)

Every image the viewer could produce was toDataURL on the on-screen canvas: the dark theme at whatever size the container happened to have. A screenshot, not a figure.

Export ▸ Figure (PNG)… renders the scene once at an explicit resolution and background without disturbing the viewer:

• Size stated in pixels and millimetres at 300 dpi, with single- and double-column presets at 85 mm and 180 mm. Height follows the canvas aspect for every preset, so choosing a width cannot silently squash the structure; only the custom preset lets both be set. Over-large requests scale down proportionally against the GL context's own reported limit, and say so.
• White and transparent backgrounds invert the viewer's chrome. Cell edges are #CCCCCC and label text #EEEEEE — light-on-dark — so a white-background export without this loses its unit cell and its labels entirely. The rule is "light and achromatic is chrome": hued lines (boundary conditions) and atom colours keep theirs, since those carry meaning.
• A scale bar at a round 1/2/5 number of Å, which declines to draw rather than guess when the scale is unusable. Exact under the orthographic camera; the dialog says so for perspective instead of presenting an approximation as a measurement.
• The one-click Screenshot stays — capturing what's on screen shouldn't pay for a dialog.

Rendered by resizing the real renderer rather than allocating a second one (a second WebGLRenderer means a second GL context and a duplicate of every texture); the cost is restoring everything in a finally, which is what the tests pin.

Fixes from preview review

• Atomic radius stopped at 10×. It multiplies each element's van der Waals radius, so 1 is already space-filling and the top 90% was unusable — which also left the useful band around the 0.2 default as a few pixels of slider travel. Now 0.1–1.

• Parameters said too much: a two-line paragraph under every control, trimmed to one line each keeping the range and what the number multiplies. The per-cell count left the cost line because the status bar already shows it.

• View toggles were janky. The keycap slot was only rendered on rows that had a hotkey, so each row sized itself and the switches landed at two x positions 32 px apart. The slot is now always present — empty and hidden at a fixed width — and all nine measure at one x.

• GIF recording took the canvas's size, so every GIF came out the shape of whoever's window made it — letterboxed wherever it was embedded, and clipping the structure at the extremes of the rotation, since a turning structure sweeps through its own width. Now a fixed 512×512, overridable and clamped to the GL limit.

• The embedded case (MD / WA), which was a gap in my own verification. I had checked a wide-but-short viewport and never a narrow one, which is exactly what a host panel gives. Measured in edit mode:

  viewport	before
  520×900	pill 520 px wide, overlapping the icon strip, the inspector and the edit toolbar at once
  700×620	pill overlapping the inspector
  900×420	pill overlapping the inspector

  The container's insets now describe the space that is genuinely free, and the pill observes that space with a ResizeObserver — dropping its binding list below 460 px and moving to the left edge. What it sheds is the reminder, never the state or the exit: at 520 px it reads EDIT ✕, and the same bindings are in the shortcuts sheet. No collisions at any of the three sizes; desktop at 1280/1600 unchanged.

  A media query would have been the wrong instrument here — an embedded panel is narrow inside a wide window, the same mistake as the viewport-width isMobile that feat(ui): viewer chrome, edit-surface rework, figure export and touch support (the full UI/UX proposal) #214 removes.

Two pre-existing bugs, fixed here because each was load-bearing

• setOrthographicCameraFrustum never called updateProjectionMatrix, so from construction until the first resize the orthographic camera projected the initial ±10 frustum from initCameras rather than the cell-fitted one. Invisible in a browser (ResizeObserver fires and handleResize repairs it) and fatal for a scale bar that reads those frustum fields. Caught by cross-checking the reported scale against the camera's own projection over a known 2 Å separation — the kind of assertion that catches a formula wrong by a constant factor when nothing else would.
• The filename sanitiser kept .. runs; structure names are free text reaching a download filename.

Verification

• Suite 457 passing, 32 suites, 0 failing (185 at the branch point). npm run lint and tsc --noEmit clean.
• The visual-snapshot failures are fixed, not excused. They were red on the branch point too — reproduced exactly, 17/323. The van der Waals fix (7e3541f) made atom radii per-element, which legitimately changes every rendered image, and the baselines still encoded the pre-fix rendering. Verified legitimate three ways before regenerating: diffs show thin crescents on each sphere's rim and nothing else, differences are 0.00–0.50% of pixels, and reintroducing the uniform-radius bug makes the old baselines pass again. Regenerated rather than given a tolerance — any tolerance wide enough to absorb this would absorb the radius regression the baselines exist to catch.
• Driven in Chromium against the production bundle at desktop, embedded (520/700/900) and touch sizes. Measured: shown resolution equals the PNG's real dimensions, white exports are opaque white with dark chrome, transparent carry alpha 0, the on-screen canvas is byte-identical after three consecutive exports, a GIF recorded from a 1400×620 window is 512×512 with round atoms, and no chrome collisions at any embedded size.

What this supersedes

Each closure was checked by ancestry rather than assumed: the heads of #204, #207, #208, #209, #210 and #212 are direct ancestors of this branch. #213 needed more care — its 18 regenerated baselines are byte-identical here, but three of its files were not redundant (an AGENTS.md LFS description that had gone stale, a workplan warning about already-finished work, and a missing *.save.png ignore rule that would let move-actual-expected.sh's rollback copies be committed as non-LFS blobs). Those were carried over verbatim in 819cc24 rather than dropped.

This branch still carries the interactive-editor stack, because that work is not on dev — interactive_structure_editor.ts does not exist there. That accounts for most of the diff, along with dist/ being tracked; untracking dist/ remains the right follow-up.

🤖 Generated with Claude Code

https://claude.ai/code/session_0185JNEgEJLfZZEx7jKHgwu5

[netlify]

✅ Deploy Preview for mat3ra-mave ready!

Name	Link
🔨 Latest commit	fafa8d2
🔍 Latest deploy log	https://app.netlify.com/projects/mat3ra-mave/deploys/6a7e68cf27b60f0008b7aef0
😎 Deploy Preview	https://deploy-preview-216--mat3ra-mave.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.