- A tile no longer lifts under the pointer. A finger does not move away
afterwards the way a cursor does, so whatever hover raised stayed
raised until something else was touched: a tile stuck, not answering.
- The ground's blobs wander a closed path on their own clock instead of
sliding back and forth along one line, which read as things moving
rather than as light in a room.
- A bar is one grid now, its rows borrowing its columns, so names of
different lengths no longer start and end their tracks in different
places — two bars that share no baseline cannot be compared, which is
the one thing a stack of them is for. The names read rightward into
their tracks, with room either side.
- A reading on its way somewhere is written to as many decimals as the
value it is heading for. Without that a slider stepping in halves
passed through 22.37460937 on its way to 24: a number nobody asked
for, a different width every frame.
- The brightness column is the same control as the slider widget's,
stood on its end and thicker, and exactly as tall as the disc beside
it. Getting there meant drawing a slider's rail, fill and handle
rather than styling `::-webkit-slider-*`: those need one set of rules
per orientation, each with its own centring quirk, and the handle
landed off its track when the writing mode turned. The native input
stays, laid transparent over the top, so the keyboard, the pointer and
every `aria-` are still its.
The disc was sized against its parents in percentages, and every box
between it and the tile is sized by what is in it — so the chain never
resolved, the brightness slider grew, and the tile scrolled with half a
disc showing. Container units are the tile's own height whatever sits in
between, so the widget now fits exactly.
Two guards behind it, since both are things a picture can fail silently:
nothing on a panel of pictures may overflow its tile, and Touch has to
actually make a control bigger while leaving what it publishes alone.
A dashboard is a wall panel somebody hangs in their own hallway, so it
now wears what they choose: a look, and a palette of their own colours.
Two complete component sets live under `Dashboard/ui/` — `glass`
(translucent panes over a slowly moving ground) and `material` (Material
3 tonal cards) — behind one prop contract. Every control's state,
keyboard and `aria-` live in `ui/core` and are shared, so the two sets
are the same dashboard drawn twice rather than two products: a set only
decides what a control looks like while doing it.
Four settings join the channel, each drivable by a flow like any other:
`look`, `palette`, `background` and `touch`. A palette is an ordered list
of hex colours — background, surface, primary, accent, text, then more
chart colours — pasted from a coolors.co link or typed, written onto the
canvas as the token variables everything already reads. Trailing roles
are derived, so three colours are a whole dashboard, and derived text is
held to AA rather than trusted (`theme.check.ts` measures it). A palette
also decides light or dark, since its first colour is the ground.
Widgets are measured against their own tile with container queries rather
than against the viewport, animate through `motion`, and can be drawn
without their title. The three reworks:
- a bar draws a row per reading, up to eight, each in the dashboard's own
data colours and each able to carry its own scale — replacing readings
nested in one fill, which could only ever share one colour and stop at
three. Documents written the old way are read as rows.
- a chart's range picker moved to a column down its right-hand edge, which
gives the plot back a whole row of a short tile.
- the colour wheel became a disc: hue is the angle and saturation the
distance from the middle, so a colour is one gesture rather than three,
with brightness on a slider beside it.
`index.css` and `lib/motion.ts` are untouched — the dashboard overrides
token *values* on its canvas, never the blocks the two repos share.
stroblme