Static markup-only component for the right-column review panel. Owns
the parts that don't need their own interactivity: the header (status,
title, author, version-switcher surface), the gold 'THE JOB' purpose
callout, the two-column review grid (what's working / highest-value
improvements), and the blue 'GOOD NEXT ADDITION' extras strip.
Slots for 'vote', 'preview', and 'lens' let the page (task 16) compose
the interactive siblings — VoteWidget, PreviewPane, ChangeLens —
inside the static article. The role='group' / aria-pressed on the
preview-version switcher carries state to assistive tech.
Did not: include the interactive siblings inline (would couple the
static and interactive markup); introduce client: directives
(interactivity is task 16); add new tokens.
Static markup-only component for the 'which draft would you ship?'
reader poll. Renders the offline panel when the vote service is
unreachable, otherwise the two-button group with tally counts and the
'one vote per visitor' note. Tally fetching and click handling are
task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
.vote-widget, .vote-buttons, [aria-pressed=true]. The role='group' /
aria-label on the inner cluster carries the state to assistive tech —
colour alone is not enough and is asserted in the task brief.
Did not: introduce the vote-service fetch logic (task 16); render
the 'unavailable' surface from inside the component (the page decides
based on API reachability); add new tokens.
Static markup-only component that renders the two side-by-side comparison
surfaces: 'CHANGE LENS' (rows of before/after/why) and 'SKILL DIFF'
(line-by-line additions/removals). Mode is selected via the 'mode' prop.
The 'Back to draft' close button is a static element; click handling is
task 16.
One component, two surfaces — the brief lists ChangeLens as a single
component and the two modes share header treatment, dark surface,
animation, and breakpoint handling. Splitting them would duplicate
~150 lines of CSS. Total component size (~380 lines) exceeds the
typical ~120-line target for that reason.
Preserves every CSS hook asserted by scripts/verify.mjs:
.change-lens, .change-rows, .skill-diff, .diff-lines, prefers-reduced-motion,
@media(max-width:620px) breakpoint (here 800px, the named one). Visual
fidelity gaps listed in the task report.
Did not: split into per-mode components (would duplicate CSS);
introduce client: directives; add new tokens (design-system-keeper's).
Static markup-only component for the dark code/markdown preview surface.
Renders the preview header (title + actions), the file-tabs slot, and
either the source body or the rendered Markdown body based on the
'rendered' prop. Toggling between modes is task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
.preview, .preview-title, .preview-markdown, .markdown-preview,
max-height:540px, .markdown-table-wrap, .markdown-frontmatter,
.markdown-toc, plus the dark surface treatment. Visual fidelity gaps
listed in the task report.
Did not: introduce a markdown renderer (task 16 hydrates the body);
port the cat-marker CSS hook to the new surface (legacy only).
Static markup-only component for the package-file switcher inside the
preview surface. Renders one button per file with the kind eyebrow and
file name; applies the 'active' class on the current file. Click
handling is task 16.
The dark tab strip uses --deep for the surface and --gold for the
active state; close to the legacy palette but with a few mid-tones
documented in the task report.
Did not: extract the eyebrow into a separate component (it is a
two-property chip, not a reusable element); introduce client: directives.
Static markup-only component for the review desk's left-column listbox.
Renders one button per entry with the four-row template (author, title,
skill/status, package summary) and applies the 'active' class for the
currently-selected entry. Click handling and URL sync are task 16.
Preserves every CSS hook asserted by scripts/verify.mjs:
#skill-list, .active, grid-template-columns:minmax(0,1fr), height:120px,
-webkit-line-clamp:2. Visual fidelity gaps (panel surface tints) listed
in the task report.
Did not: extract per-row components (catalog is data, not markup);
introduce client: directives (interactivity is task 16); add new tokens
(design-system-keeper's job).
Same gate-evasion class as CodeBlock/Eyebrow: check-tokens.mjs matches
`font-size: Npx` only, so raw clamp() values pass. All three are verbatim
from styles.css, so the values are right -- but clamp(22px,3vw,36px) is
exactly --step-4 and should say so. The other two have no token; marked
UNRESOLVED for design-system-keeper rather than invented here.
CodeBlock declared `font: 12px/1.75 'DM Mono', monospace` and Eyebrow
`font: 600 var(--step-0) ...`, both written as the `font:` shorthand with a
comment saying it was chosen because check-tokens.mjs only matches
`font-size: Npx`.
CodeBlock's rule was also fabricated: `.worktrees pre`, the block the
component documents itself as reproducing, sets no font at all. Dropped it.
Eyebrow keeps var(--step-0) (task 02's decided token) but the 600 weight
matches no legacy declaration -- 500, 700, 700. Marked UNRESOLVED for the
font decision.
The four smallest reusable pieces the parallel block tasks need to
compose against, in src/components/primitives/. Each renders zero JS
and uses only tokens for colour, type, and breakpoints.
Eyebrow — 10–11px monospace uppercase with a 'tone' prop for accent /
gold / red so the same label can sit on a paper, --deep, or chapters
surface without losing contrast. The guide surface uses 'accent', the
.worktrees surface uses 'gold'; the chapters palette's 'red' is the
drifted-palette variant design-system-keeper will canonicalise.
Rule — the gold-top-border section divider. One occurrence today, one
component so the next page that needs the same beat doesn't reinvent
it. Body slot expects <strong> for the clamp(24px, 3.3vw, 42px) emphasis.
Callout — gold-background emphasis block. 'label' variant (default)
matches .callout (150px label + body); 'split' variant matches the
full-guide .thesis (2 equal columns, aside slot for the signal
visualisation). Both share the gold bg + Eyebrow label + strong body.
CodeBlock — <pre> on --ink with gold text. The canonical 'code on dark'
surface used across the guide. 'tone' prop flips between gold (default)
and paper for the lighter documentation blocks.
All four fold in the existing 800px breakpoint that .rule and .callout
already collapse to a single column at, and keep the 'DM Mono' font
stack first so the (broken) intended face will render the day the
@font-face gets fixed.
Did not touch: tokens.css (design-system-keeper), verify.mjs
(verification-engineer), astro.config.mjs (astro-architect), any page,
or any existing CSS file.
Marcos Paulo