Workbench

Put data-ds-page="tool" on <html>, with the split directly in <body>, and the window becomes the frame. The top bar sits at the top, the status bar spans the foot, and the split fills the space between them, edge to edge. Docks sit flush in one pane, and a picture or a canvas reaches the edges of the other.

The page never scrolls, so it keeps no strip down its side for a scrollbar. A pane that holds more than it shows scrolls by itself. On a phone none of this applies: the panes stack and the page scrolls, as any phone page does.

A workbench is usually compact as well (Contexts › Density). A tool page laid out any other way, such as panels that scroll, keeps its own flow; there, and on any element other than <html>, data-ds-page="tool" sets only its ground.

• The top bar, as on every page.
• A split pane: two panes and a divider you drag.
• Docks: a tool's panels, one under another, each with a title row that carries its actions.
• A table you pick from, such as the layers: a click anywhere on a row picks it, and its Show box only shows or hides.
• An inspector for the picked row's settings, one row each.
• A status bar: one line for what just happened, then the facts of what is open.

The keyboard reaches every control with Tab, one stop each, in the order they read: the layers' Show boxes and names, then each dock's controls (TJ, October 30).

Measured, never judged by eye, on the sample above, by scripts/test-workbench.mjs:

• At 1440 × 900 the page never scrolls, and nothing is left down its side for a scrollbar.
• The top bar is at the top, the status bar spans the window at its foot, and the panes fill the space between, side to side.
• The docks' pane scrolls by itself when the docks outgrow it.
• Compact holds inside the frame: a dock's button is 24 px tall.
• A click on a row's last cell picks that row. A click on its Show box ticks the box and picks nothing. Enter on a row's name picks it. Each row gives the keyboard two stops, its Show box and its name, and the row itself none.
• On a phone, 390 px wide, the panes stack, the page scrolls, and nothing scrolls sideways.
• A page that does not ask is unchanged: a reading page still scrolls and keeps its scrollbar's room.

Picking a row and a new message in the status bar move nothing on the page (Changing content), and the sample passes the same accessibility checks as the guide, in light and dark, with 44 px targets on a phone.