Composition / foldkit-mixins-builder

Your own layout

BuilderView.define places every part of the editor. To leave some out, move them, or draw your own elements among them, take the parts and assemble them:

ts
const parts = BuilderView.parts(PageBuilder)
const Compact = BuilderView.assemble((_model, slots, h, draw) =>
  h.div(slots.root.attrs(), [
    h.h1([], ['Home page']),
    draw(parts.Palette),
    draw(parts.Canvas),
    draw(parts.Inspector),
  ]),
)

The parts are Panels, Palette, Layers, Inspector, Toolbar, Crumbs, Viewports, Preview, Alert, Canvas and Live. Each brings its own Behaviors: Layers its tree keyboard and dragging, Canvas the pointer, and both the shortcuts. A layout without Layers has no tree keyboard. Styles attach to Compact as to define's view.

Each part names the Model fields it reads and is drawn again only when one of them changed: a hover redraws the canvas and nothing else. A Style that reads the Model (Style.whenInput) attached to the whole view makes every part it reaches redraw on every change. It is still correct, just not cached.