The Graph page on one scale

[WaylandYang]

Third cut of the interface work (#361 rules and primitives, #362 Ontology): the Graph page — 240 className sites, 43 raw controls, 108 state classes — passes the guard and is off the baseline. Logic untouched; the diff is classes and control swaps.

What changed on the page

• Every raw control is a component. Search box and its result rows, the legend pills and the "+N classes" popover (search, per-class toggle, the hover-revealed "only"), the node-budget stepper, the three tool towers (derived / layout / camera), the timeline island (play, Yr / Mo / Dy, All time / Now), the derived panel's run / cancel / go / close, the entity panel's edit and close, the edit form (name, type), the same-name box, the Relations / Timeline / History / Derived tabs, the time editor's radios and inputs, and the four expandable rows (fact, timeline, derived, blocked) — all Button, IconButton, Input, NativeSelect, Field, Row, Pill, Segmented, Radio, ToolTower / ToolButton, ExpandCard.
• The two custom-styled inputs that stay raw are the hidden file picker (Ontology) and the timeline's type="range" — its skin is .scrubber-range in styles.css. The guard knows both.
• Twelve pixel sizes to five names, raw greys and white/N to tokens, half-step spacing to the scale, font-bold to font-semibold.

Added to ui/ for it

ToolTower + ToolButton + ToolDivider (the vertical icon stacks whose names slide out on hover — u-tower was already CSS, the button states were not), Pill (glass pill with active / dim, forwards its ref for the popover anchor), Radio, ExpandCard (a clickable header row with the expanded body below; dim for stale rows; the header may hold role="link" spans but no buttons), and two exported class strings for composite rows a component cannot own: HOVER_ROW (a row that contains two buttons) and REVEAL (shown only while the row is hovered). Four small CSS classes carry the remaining inline states — u-inline-link, u-hover-ink, u-card-row, u-reveal, u-bar — so a page never writes hover: or transition.

rounded-none is allowed by the guard now: it is not a third radius, it is "this row runs edge to edge".

Verified

pnpm typecheck, guard (13 files compliant, 26 on the baseline), pnpm build. In the browser on the benchmark base: the canvas page with legend, towers, budget stepper and timeline island; an entity opened from search with its panel tabs and rows.

Next

Library + Review + Settings, then the remaining pages.

🤖 Generated with Claude Code