docked_app template

A docked shell — a top toolbar, a body that fills the space, and a bottom status bar — built from the engine's raw, CSS-parity widget tree. Clone this for any editor-style app where the body owns the space and thin toolbar / status strips frame it.

What's in the template

docked_app/
├── README.md
├── docked_app.scene/
│   ├── scene.json          ← bare scene metadata (no entities)
│   └── entrypoint.luau     ← spawns one UiPanel-bearing entity
└── docked_app_layout.module/
    ├── init.luau           ← mount(ctx) builds the docked shell and handles clicks
    └── README.md           ← the module contract and the raw widget model

Run it: layers.load("@builtin::_templates.docked_app.docked_app").

The shape

One screen, three regions:

• topPanel — the toolbar, docked to the top edge.
• The body — a scrollArea with flex = 1 that fills the middle and grows with the viewport.
• bottomPanel — the status bar, docked to the bottom edge.

topPanel and bottomPanel are the screen-edge docking node types; the body takes the remaining space.

How to extend

1. Replace the body builder in docked_app_layout.module/init.luau with your own widget nodes ({ type, props, style, children }); add toolbar / status widgets as needed.
2. Give an interactive widget a callback id (e.g. props.onClick = "doc:save"), then handle it in the onCallback(id, data) the module returns.
3. Keep runtime data on state; on an interaction, mutate state and call ui.updateScreen(name, build()) to re-render.

See docked_app_layout.module/README.md for the full mount(ctx) contract and the raw widget model. The gui toolbox's widgetTypes and widgetProps tools enumerate the widget surface; @builtin::examples.ui.* are complete screens in the same model.

For other layout shapes, use one of the sibling templates:

• blank_app/ — a single screen, no layout
• canvas_app/ — node-graph editor
• inspector_app/ — form with fields and actions