[Zach Dunn (zachdunn)]

What this changes

• anatomy flat and screenshot views now put each key's text in the margin beside the figure, joined to its part by a hairline: a bracket for a key with "span": true, a dot for the rest. Notes keep the order of their anchors and push down so they never overlap, and a margin appears only on a side that has notes.
• Below about 560px (container query), the notes fall back to small numbers on the drawing and the legend under it. Above that width, the legend stays in the page for screen readers only.
• "notes": "keys" keeps the old numbered hotspots. Iso always uses them.
• The flat view uses the iso view's tones, with an offset shadow and the list rows drawn as raised slabs.
• The site's weekly-digests card is drawn flat instead of iso, and its captions are updated. The iso pictures of each output type are unchanged.
• lint.mjs counts margin notes as hotspots. inline-assets.mjs and the gallery handle SVG <image href>, which the screenshot view now uses.
• Docs: references/visuals.md, docs/components.md, gallery notes.
• The committed weekly-digests (both styles) and walkthrough-videos posts are re-rendered with the new figures and CSS, with captions to match. The README hero, digest and walkthrough images are recaptured from them.

Why

The iso view of a screenshot spent ink on thickness the object doesn't have, and it foreshortened the tiles whose size is the point. Numbered discs also made the reader look down to the legend and back for every key. Margin notes label things where they are, so there's no legend to cross-reference. Iso stays for pictures where how the parts stack is the point.

We also explored a halftone finish. It's parked: it works for drawn interfaces but not for photographic captures, and it needs a limit on how much of a figure is textured before it's viable.

Checks

• A line under Unreleased in CHANGELOG.md.
• node --test dev/test/*.test.mjs passes on Node 22 (121 tests).
• Checked the built site in the browser at 1280px and at phone width (375px, no horizontal scroll).
• Re-rendered the committed example posts and recaptured the README images.
• Not fixed here: in the walkthrough post, a sidenote from the paragraph above the wide figure can overlap the figure's right-hand margin notes. Sidenotes and wide figures already shared that space with the old images. This is a page-layout issue to handle separately.

[coderabbitai]

Important

Review skipped

Auto reviews are limited based on label configuration.

🏷️ Required labels (at least one): 2

• coderabbit:review
• review

🚫 Excluded labels (none allowed): 1

• wip

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 9fcd7390-8221-4940-a039-c66a19f9400b

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[uploads-sh]

4 files · View all on uploads.sh →

after

after

after

after

_{Maintained by uploads.sh · add media: uploads put <file> --pr 41 · docs}