Start without customization

Given PageBuilder, a Builder.make result from the Builder's example:

import { Bundle } from 'foldkit-bundle'
import { BuilderView } from 'foldkit-mixins-builder'

const PageEditing = BuilderView.define(PageBuilder)
const Drawn = PageBuilder.bundle.pipe(Bundle.withView(BuilderView.submodel(PageEditing)))

Place Drawn as you would any Bundle. Its view draws:

• a palette: one button per Block with starting props, named "Add <label>" and grouped, each titled with where it would go ("Adds it inside the Section") or disabled, saying why, where the selection leaves no place for it (by aria-disabled, as every button of the editor is, so a button stays focusable when its own press leaves it nothing to do; style [aria-disabled="true"], not :disabled); the Catalog's patterns follow in a group of their own, "Patterns", each placed where its root's Block would go;
• the layers: a role="tree" of the page's nodes, one treeitem row each, with a roving tab stop on the selected row; a row shows its Block's label and the node's first text in brief, and one that holds others has a toggle that opens and closes it; pointing at a row marks its node on the page, as pointing at the page does;
• an inspector: the selected node's Block, what it is for, and its actions (move up, down, out and in; duplicate; delete; each titled with its shortcut), then its settings under Content, Style, Visibility and Interactions; with nothing selected, how to begin and the shortcuts;
• undo and redo, a breadcrumb of where the selection is (the page, then each node holding it; a press selects that one), a viewport picker, and the reason the last edit was refused, as a role="alert";
• the canvas: the page in edit mode, in a frame as wide as the viewport, saying how to begin (the empty Slot) while the page holds nothing;
• a live region the Builder's announcements are read from.