A narrow editor

Where the editor is narrow, it can show one of its three panels at a time:

const PageEditing = BuilderView.define(PageBuilder).pipe(
  Style.attach(BuilderView.narrow('52rem')),
)

• The width is the editor's own, not the window's. Below width of the container builder, the Builder's root, the Panels part shows: a role="group" of three buttons (Add, Layers, Settings), the chosen one aria-pressed, as the viewports are, and only the panel the Builder's panel names shows. Wider, the buttons are hidden (the Builder's default Style) and every panel shows. They are not ARIA tabs, which would promise arrow keys and a roving tab stop.
• The Builder chooses the panel as it always has: a button sends PanelChosen, and selecting a node on the page chooses Settings; a row clicked in the layers selects its node and keeps the layers showing. Each panel carries its id, data-panel and data-panel-shown, and each button aria-controls it; a layout of your own that draws Panels should draw the three panels.
• It is in the app layer, so it outranks an application's placing of the panels in app or an earlier layer; an unlayered style outranks every layer, and would show a hidden panel. narrow(width, { layer }) puts it elsewhere.

As a form key#

builder.inputWith(view) is the Builder's form control, builder.input, drawn by another view. The form draws a Bundle-backed control with the Bundle's own view, so no renderer is needed. With PageInput from the Builder's example:

import { Form } from 'foldkit-form'

const PageForm = Form.make('PageForm', PageInput, {
  inputs: { document: PageBuilder.inputWith(BuilderView.submodel(PageEditing)) },
})

The CMS example (examples/cms) places its page form this way.