Skip to content

Review follow-up 12: standards map polish (full-width drawing, packed families, no hover flicker, no draw-in) #75

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jbspeakr wants to merge 2 commits into from
Closed

Review follow-up 12: standards map polish (full-width drawing, packed families, no hover flicker, no draw-in) #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a4bf3e
Review follow-up 12: standards map polish (full-width drawing, packed…
claude Oct 23, 2026
a71e105
Refresh screenshot baselines from CI's Chromium
github-actions[bot] Oct 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ package of the redesign that builds it. Anything not in this table does not anim
| M1 | Every page | Cross-document view transition, root crossfade 220ms | continuity | none (as today) | WP2 |
| M2 | Home → `/mcp/`, `/standards/` → spec, `/explorer/` → scenario | Shared `view-transition-name` on the data view (matrix plate from `MatrixThumb.astro` as `matrix`, map; on the explorer, the scenario title into the page h1) so it morphs instead of crossfading | "this is the same object, larger" | none | WP3, WP5, WP6 |
| M3 | Home facts, server page facts, spec page facts (`Facts.astro`) | Count-up from 0 to the value, 600ms, once, when 50% in view, tabular figures | "these are live numbers" | value rendered at once | WP3 |
| M4 | Standards map, decorative plate | Highlighted path draws in (`stroke-dashoffset`), 1200ms, halo fades after, once on load | "follow this path" | path shown complete | WP5, WP8 |
| M4 | Decorative plate | Highlighted path draws in (`stroke-dashoffset`), 1200ms, halo fades after, once on load. The standards map dropped its draw-in (R-12): it moved one or two lines of a large drawing and read as a glitch; the spine there is drawn complete | "follow this path" | path shown complete | WP5, WP8 |
| M5 | Explorer chain | Per step: the sender and receiver light up in the actor head, the current arrow draws in (300ms, ease-out), the body fades up 8px (220ms); earlier steps keep a quieter arrow and later ones a hairline, in colour, not opacity, so text keeps its contrast | "you are here" | arrow and body shown, highlight and dimming applied without transition | WP6, R-08 |
| M6 | Explorer chain | One scene clock (a Web Animations API timeline) holds the playhead; Play, Pause, Previous, Next, the scrub bar, a click on a step or a log line and the arrow keys all move it. Steps advance every 2.5 s. Auto-advance (amended by review follow-up 8): armed once per page, it starts when the chain has sat in view for 1 s with no input, and stops for good on hover, touch, focus, scroll or any key; it never restarts by itself and never starts with a step in the URL. Play, once pressed, pauses on any click, key or scroll | guided reading | Play button hidden, no auto-advance; the scrub bar and the step buttons still seek | WP6, R-08 |
| M7 | Explorer token view | On step change, claims that differ from the previous hop get a 2px `--signal` rail that fades to `--rule` over 480ms, starting when the message has drawn (300ms) and 40ms apart | "this is what changed in the token" | rail shown without fade | WP6, R-08 |
Expand All @@ -265,6 +265,7 @@ package of the redesign that builds it. Anything not in this table does not anim
| M16 | Theme toggle | Icon swap only; no rotation | n/a | n/a | WP2 |
| M17 | Explorer toggles | A toggle link swaps the chain in place (crumbs, toggles, notice, steps) through a same-document view transition, 220ms; steps the two chains share morph, the rest fade, and M8 runs on the new rails. The toggle stays its own static page for a reload, a new tab or no JS | "the same chain, with one thing changed" | ordinary navigation | R-08 |
| M18 | Explorer chain | A quiet decision log under the chain gains one line per step reached (number, sender → receiver, message), the newest fading in over 220ms; a line seeks back to its step | "what has happened so far" | lines appear | R-08 |
| M19 | Standards map | Hover or focus on a node fades the rest of the drawing to 18% (opacity, 120ms) and shows its card beside it. Leaving a node clears after a 160ms grace, so moving across gaps and lines to the next node moves the highlight straight over instead of flashing the whole map | "these are its relations" | instant | R-12 |

Removed from the site by the redesign: the pulsing dot in the work-in-progress banner (it loops),
the hover lifts on cards, buttons and the hero thumbnail, the rotating theme toggle, the ambient
Expand Down
1 change: 1 addition & 0 deletions specs/016-visual-redesign/tasks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,3 +205,4 @@ Items from the redesign review, one pull request each, in order.
- [x] R-09 Content pass (WP9 above): section-root headlines under 24 characters, the title suffix and footer statement, an accessibility statement that lists every motion with its reduced-motion form, `check:prose` as a gate, and the about, contribute, made-in-Europe, legal and 404 pages in plain English
- [x] R-10 Decorative plate (WP8 above): a deterministic miniature delegation chain in the head of the explorer and breach indexes and every spec page, beside the title on wide screens, drawn in once (M4) and complete under reduced motion, with social cards for the two section roots from the same generator
- [x] R-11 Spec page composition: under the head, relations and features take the wide column and a panel beside them holds the figures (revisions, relations, features, counting up as M3) and the revision timeline (its rail drawing in as M13, the entries still so their contrast holds), sticky as on a breach page; below 60rem the panel follows the relations. Relation groups and feature topics pack into columns (`columns: 19rem`) instead of one long list; a group heading is the verb phrase alone ("Builds on", "Is built on by") and the source link follows the note. Features group by topic under a bar of how many carry each level, named in words beside it. A spec with no recorded features shows a sentence in the panel, not a zero and not an empty section. The withdrawn or expired notice moves into the main column. Baselines through the `refresh-screenshots` label
- [x] R-12 Standards map polish: the toggles move from a rail beside the drawing into a bar above it, so the drawing takes the full width of the page and its labels render at about their set size (13px) instead of three quarters of it. The card of the node in hover or focus floats beside that node and takes no pointer events. Families of documents joined by a dependency relation are laid out by ELK one by one and packed in rows under the largest family, on its columns (`packComponents` in `src/lib/graph.ts`), so documents with no or few dependencies no longer stretch the first column down the page; the gap between columns is 56px. Hovering no longer flashes the whole map between nodes: leaving a node clears the highlight after a 160ms grace, and the fade is a 120ms opacity transition (M19). The spine's draw-in on load is dropped from the map (M4 now covers the decorative plate only); the spine is drawn complete. Baselines through the `refresh-screenshots` label
168 changes: 71 additions & 97 deletions src/components/StandardsMap.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ const usedMaturities = MATURITY_ORDER.filter((m) => specs.some((s) => s.maturity
// references are the most and the least telling lines, so the map opens without them
const shownByDefault = (t: RelationType) => t !== "references";

// M4: the longest builds-on chain draws in from the oldest document to the newest
// the longest builds-on chain is drawn in full colour, from the oldest document to the newest
const spine = buildsOnSpine(specs, relations);
const spineStep = new Map(spine.map((r, i) => [`${r.from}|${r.type}|${r.to}`, i]));
const onSpine = new Set(spine.map((r) => `${r.from}|${r.type}|${r.to}`));
const spineFirst = spine[0] ? byId.get(spine[0].to) : undefined;
const spineLast = spine.at(-1) ? byId.get(spine.at(-1)?.from ?? "") : undefined;

Expand All @@ -61,10 +61,10 @@ const unchecked = (name: string, value: string) =>
const filterCss = [
...usedTypes.map(
(t) =>
`${unchecked("type", t)} :is(#map .edge-${t}, #map .spine-halo[data-type="${t}"]) { visibility: hidden }\n` +
`${unchecked("type", t)} #map .edge-${t} { visibility: hidden }\n` +
`${unchecked("type", t)} #spec-list .xl[data-type="${t}"] { display: none }`,
),
`${scope}:has(input[name="view"][value="recent"]:checked) :is(#map .node:not([data-recent]), #map .band, #map .edge, #map .spine-halo) { opacity: 0.2 }`,
`${scope}:has(input[name="view"][value="recent"]:checked) :is(#map .node:not([data-recent]), #map .band, #map .edge) { opacity: 0.2 }`,
`${scope}:has(input[name="view"][value="recent"]:checked) #spec-list li:not([data-recent]) > .row { opacity: 0.35 }`,
...bodies.map(
(b) =>
Expand All @@ -78,7 +78,7 @@ const filterCss = [

<div class="map-plate" id="map-plate">
<form id="map-filters" class="map-rail" method="get" action="/standards/" aria-label="Filter the map">
<fieldset>
<fieldset class="types">
<legend>Relations</legend>
{
usedTypes.map((t) => (
Expand All @@ -103,7 +103,7 @@ const filterCss = [
))
}
</fieldset>
<fieldset>
<fieldset class="view">
<legend>View</legend>
<label class="toggle">
<input type="checkbox" name="view" value="recent" />
Expand All @@ -126,12 +126,11 @@ const filterCss = [
A filter in the link needs JavaScript. The toggles still work.
</p>
</noscript>
<div class="map-card" id="map-card">
<p class="note">Hover or focus a node to read its relations here.</p>
</div>
</form>

<figure class="map" aria-labelledby="map-caption">
{/* the reading pane: the island fills it with the card of the node in hover or focus */}
<div class="map-card" id="map-card" hidden></div>
<div class="plate map-frame" id="map-frame" tabindex="0" role="region" aria-label="Standards map">
<svg
id="map"
Expand Down Expand Up @@ -191,35 +190,17 @@ const filterCss = [
</g>

<g class="edges" aria-hidden="true">
{
edges
.filter((e) => spineStep.has(key(e)))
.map((e) => (
<path
class="spine-halo"
d={e.d}
pathLength="1"
data-type={e.relation.type}
data-from-body={e.from.spec.body}
data-to-body={e.to.spec.body}
style={`--i: ${spineStep.get(key(e))}; --n: ${spine.length}`}
/>
))
}
{
edges.map((e) => {
const step = spineStep.get(key(e));
const onSpine = step !== undefined;
const full = onSpine.has(key(e));
return (
<path
class:list={[
"edge",
`edge-${e.relation.type}`,
{ symmetric: e.symmetric, spine: onSpine },
{ symmetric: e.symmetric, spine: full },
]}
d={e.d}
pathLength={onSpine ? "1" : undefined}
style={onSpine ? `--i: ${step}; --n: ${spine.length}` : undefined}
data-relation={key(e)}
data-type={e.relation.type}
data-from={e.relation.from}
Expand All @@ -229,7 +210,7 @@ const filterCss = [
marker-end={
e.symmetric
? undefined
: `url(#arrow-${e.relation.type}${onSpine ? "-full" : ""})`
: `url(#arrow-${e.relation.type}${full ? "-full" : ""})`
}
>
<title>
Expand Down Expand Up @@ -300,7 +281,8 @@ const filterCss = [
)
}
Each relation type has its own colour and dash pattern, so the map reads without colour.
The <a href="#spec-list">outline below</a> carries the same information as text.
Hover or focus a document to bring out its relations. The{" "}
<a href="#spec-list">outline below</a> carries the same information as text.
</figcaption>
</figure>

Expand Down Expand Up @@ -343,25 +325,42 @@ const filterCss = [

<style>
/*
* The plate: a rail of toggles on the left that is legend, filter and reading pane in one, and
* the drawing on the right at its full height, so the page scrolls and the frame does not.
* Below 60rem the rail folds above the drawing; below 40rem the drawing goes and the outline
* under the plate is the map.
* The plate: a bar of toggles above the drawing that is legend and filter in one, and the
* drawing below it at the full width of the page, so its labels keep their size. The card of
* the node in hover or focus floats beside that node. Below 60rem the bar's groups wrap;
* below 40rem the drawing goes and the outline under the plate is the map.
*/
.map-plate {
display: grid;
grid-template-columns: 16rem minmax(0, 1fr);
gap: var(--space-5);
align-items: start;
margin: 0 0 var(--space-7);
}
.map-rail {
position: sticky;
top: var(--space-4);
display: grid;
gap: var(--space-4);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
grid-template-areas:
"types bodies view"
"types bodies maturities"
"count count count";
gap: var(--space-4) var(--space-6);
align-items: start;
font-size: var(--small);
}
.types {
grid-area: types;
}
.bodies {
grid-area: bodies;
}
.view {
grid-area: view;
}
.maturities {
grid-area: maturities;
}
.map-rail__count {
grid-area: count;
}
fieldset {
border: 0;
padding: 0;
Expand All @@ -385,7 +384,7 @@ const filterCss = [
}
.bodies {
grid-template-columns: 1fr 1fr;
column-gap: var(--space-2);
column-gap: var(--space-4);
}
.bodies legend {
grid-column: 1 / -1;
Expand Down Expand Up @@ -425,20 +424,33 @@ const filterCss = [
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
gap: var(--space-3);
max-width: none;
margin: 0;
padding-top: var(--space-3);
border-top: 1px solid var(--rule);
color: var(--ink-2);
font-size: var(--tiny);
font-variant-numeric: tabular-nums;
}
.note {
margin: 0;
}

/* the card floats beside its node; it never takes pointer events, so it cannot steal a hover */
.map-card {
border-top: 1px solid var(--rule);
padding-top: var(--space-4);
min-height: 6rem;
position: absolute;
z-index: 1;
width: 18rem;
padding: var(--space-3) var(--space-4);
background: var(--ground);
border: 1px solid var(--rule-strong);
border-radius: var(--radius);
font-size: var(--small);
pointer-events: none;
}
.map-card[hidden] {
display: none;
}
.map-card :global(.map-card__name) {
margin: 0 0 var(--space-1);
Expand All @@ -465,6 +477,7 @@ const filterCss = [
}

.map {
position: relative;
margin: 0;
min-width: 0;
}
Expand All @@ -491,22 +504,23 @@ const filterCss = [
}

@media (max-width: 60rem) {
.map-plate {
grid-template-columns: 1fr;
}
.map-rail {
position: static;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
align-items: start;
grid-template-areas: none;
}
.types,
.bodies,
.view,
.maturities {
grid-area: auto;
}
.map-rail__count,
.map-card {
.map-rail__count {
grid-area: auto;
grid-column: 1 / -1;
}
}
@media (max-width: 40rem) {
.map,
.map-card {
.map {
display: none;
}
.map-plate {
Expand Down Expand Up @@ -597,56 +611,16 @@ const filterCss = [
fill: var(--c);
}

/* the builds-on spine: full colour, drawn in once on load from the oldest end (M4) */
/* the builds-on spine: full colour and a little heavier, so the eye can follow it */
.edge.spine {
--edge: var(--c);
stroke-width: 2;
stroke-dasharray: 1;
}
.spine-halo {
fill: none;
stroke: var(--signal-soft);
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 1;
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.edge.spine {
animation: map-draw calc(var(--dur-draw) / var(--n)) linear
calc(var(--dur-draw) / var(--n) * var(--i)) both;
}
.spine-halo {
animation:
map-draw calc(var(--dur-draw) / var(--n)) linear
calc(var(--dur-draw) / var(--n) * var(--i)) both,
map-halo calc(var(--dur-draw) + var(--dur-slow)) linear both;
}
}
/* a negative offset reveals the path from its end, where the older document sits */
@keyframes map-draw {
from {
stroke-dashoffset: -1;
}
to {
stroke-dashoffset: 0;
}
}
/* the halo shows while the spine draws (1200 of 1680ms), then fades out */
@keyframes map-halo {
0%,
100% {
opacity: 0;
}
2%,
71% {
opacity: 1;
}
}

.node {
cursor: pointer;
text-decoration: none;
transition: opacity var(--dur-fast) var(--ease);
}
.node-box {
fill: var(--ground);
Expand Down
Loading