`overflow: hidden` on the frame and its body cut a control's 22px
`--gl-glow` dead at the clip edge, and the gauge's own `<svg>` cut its
drop-shadow at the viewBox — the arc's top sits ~3.5 units from it.
`overflow: clip` with a margin wide enough for the blur (1.5rem on the
body, which already sits 1rem inside the frame; 0.5rem is all that leaves
the tile, which is the gutter).
That means the body no longer scrolls by default. `.dui-frame-scroll` was
already wired through from `scrolls()` into every look's Surfaces with no
CSS rule behind it, so the class is what opts markdown, agenda and
notification back into a real scroller.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KYM38KSb4V4v2T71eifnZv
Five things a wall panel showed that a wall panel should not.
**A tile's body no longer clips.** It scrolled, and a box that scrolls
also cuts whatever crosses its edge — which took the glow off a lit
button at exactly the width where the button filled its tile, and off a
gauge's arc at exactly the height where the dial filled its own. Only
what is written or listed asks for a scroller now; everything else is a
picture drawn to fit, and what overflows is left to the frame, which
clips at the tile's edge where a shadow has already faded out. The
slider's phantom scrollbar goes with it.
**The selector is a selector.** Named for what it does rather than what
it is, and the choice it is holding is held in the dashboard's own
primary — a pill that slides between the options rather than a grey one
that had to be looked for. The stored type is untouched, so no document
changes meaning.
**The arrangement is held off the panel's edges**, by the same distance
it holds between two widgets. The ground is not held off with it: a
background covers the whole panel, and only what is arranged on it has
a margin. No stored panel loses a row to it.
**The rail is drawn on the panel.** It was chrome bolted to the edge of
the screen beside the canvas — in the app's own design rather than the
dashboard's, and on a scaled canvas not even lined up with it. It now
takes a column out of the canvas the way the margin does, scaled with
it and wearing its look. Which cell each widget sits in is unchanged;
only how big a cell is.
Two of these were the same mistake twice: an unlayered rule stating
`position` for everything wearing a class — `.gl-surface` on a rail
placed by a utility, and a blanket lift over every child of a pressable
on a pill placed by `layoutId`. Both now say it one element at a time.
- 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.
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.
stroblmeandClaude Opus 5