githubnext/chopinPublic

Let's compose rich plans together

Stand the app on one ground, with the page the only thing on it

The three panes were three surfaces: a tinted fill on the nav and on both
rails, a solid grey rule down the right of the chat, and the ground showing
between them. Nothing in that read as the subject — the plan was one white box
among several tinted ones, and the seams were doing the work of saying where
one pane stopped.

So there are two layers now. A single gray-150 ground runs behind the nav,
behind both rails and through the four pixels either side of the page, and the
page is the only element with a fill, a ring or a shadow of its own. The rails
keep their widths and lose everything else, which is also what makes a collapse
possible later without restructuring: the ground is already behind them, so
collapsing one becomes a width rather than a surface being taken away.

The page runs past the bottom of the window rather than stopping at it. That
needed the surface to be a sibling of the plan instead of a wrapper around it —
the decoration can go twelve pixels below the fold, taking its bottom corners,
its ring and the end of its shadow with it, while the contents stay exactly a
window tall so the last line of the plan is not cut off. Square corners at the
bottom and round ones at the top say which end was the one that was cut.

Neither handle is drawn until a pointer is over it, because there is no longer
a seam to grab: the affordance has to arrive with the hand. They are laid over
the gutters rather than taking a column in the row, since those four pixels are
measured and a handle in the row would be a fifth, and `::before` widens what
is a very small thing to aim at. A splitter that only exists on hover is one a
keyboard cannot find, so they are `role="separator"`, in the tab order, and
carry the width they govern; arrows move an edge and Home and End take it to
its limits.

003 is still blocked and this depends on it, so the three tokens it names are
defined here at the values that task specifies: `--color-ground` at gray-150,
`--color-hairline` at black 7% and `--shadow-raised` over `--shadow-color`.
Two places in 003 disagree about the ring — the notes say 7% and the shadow
frame says 6% — and 7% is what is written, being the number given as the
passive-edge token rather than as an aside in a shadow table. The ring is an
outline for the reason focus already is one here: it follows `border-radius`,
takes no space, and leaves `box-shadow` free for the shadow beside it.

`e2e/shell.e2e.ts` reads the acceptance, because all of it is rectangles, a
painted colour and a pseudo-element that exists only under a pointer — a fill
put back on a rail is invisible in a diff and obvious on a screen. The colour
assertions paint a pixel and read it back rather than comparing computed
strings, which come back in the space they were authored in and would pass on
any grey at all.

`bun run shot:shell` takes the two screenshots the acceptance asks for, from
one seeded room opened twice, so the pair differ only in width.

Note that `bun run ci` fails on three files this branch does not touch:
CODE_OF_CONDUCT.md, LICENSE.md and SECURITY.md have been unformatted since they
were added, and reformatting them here would have hidden this change inside
them.
MAMaggie Appleton authored
0fe9fc6Patch
Parent4ce2dde
10 files changed+562-372 binary
StackedSplit
apps/web/src/app.tsx+3 −1
apps/web/src/theme.css+1 −1
apps/web/src/workspace.tsx+123 −34
e2e/shell.e2e.ts+195 −0
package.json+1 −0
packages/editor/src/styles.css+2 −1
scripts/shoot-shell.ts+211 −0
tasks/005-rebuild-app-shell.md+26 −0
tasks/images/005-shell-1280.png+0 −0

Binary file not shown.

tasks/images/005-shell-1680.png+0 −0

Binary file not shown.