Toolbar and footer

The host draws the chrome around every environment: a toolbar above it and a footer below. Both belong to the scene, and environments contribute data to them rather than drawing them, so a split of two environments costs no more chrome than one.

An environment's toolbar is data. Its definition's toolbar function returns a list of ToolbarItems (buttons, toggles, labels and separators) and the host renders them, so every environment's toolbar looks and behaves the same.

toolbar: (ctx) => [
    { type: 'button', id: 'reset', text: 'Reset', onPress: () => reset(ctx) },
    { type: 'separator' },
    { type: 'toggle', id: 'grid', label: 'Grid', active: showsGrid(ctx), onToggle: () => toggleGrid(ctx) },
],

An environment the reader can pan and zoom uses a ViewChannel from createViewChannel, and contributes the reserved view slot (ToolbarViewItem) instead of building buttons: { type: 'view', channel }. The host resolves every view slot in the scene into one group (resolveViewGroup): Reset view, which returns every explored environment to the view its author wrote, and — where a channel's options supply zoom — Zoom in and Zoom out, each gliding one TOOLBAR_ZOOM_STEP about each view's centre. A button is disabled only when no environment can use it.

The footer is data too. The definition's useFooter hook returns a FooterContribution: readouts for the bar, which is always shown, and rows for the panel behind the chevron. It is a hook because what it reports is live — a hover, a caret, a run's output.

useFooter: (ctx) => ({
    bar: [{ type: 'readout', id: 'count', text: `${countOf(ctx)} waves`, align: 'trailing' }],
    panel: [
        { type: 'key', entries: [{ name: 'Theory', colour: 'blue' }] },
        { type: 'scale', scale: { kind: 'ramp', colour: 'blue', invert: false, lo: 0, hi: 1 } },
    ],
}),

The host merges every environment's contribution (mergeFooter). The colour key is one row per scene: two entries with the same name and colour are one entry, and a name in a different colour stays separate. Each distinct scale is one row, however many environments paint by it. A custom row or bar item is drawn by the environment itself, for what no other environment could share, such as an element list or a console.

The scene's own controls lead the panel, above the key, the scales and the custom rows, and the host draws them — a parameter is the scene's, so a slider written inside one graph must not become that graph's row. An environment contributes nothing for them: a scene whose only interactive thing is a slider earns its footer through the host.