App chrome & regions

workspace_shell, split_layout, file_tree, shell_region, safe_region — shells and HTMX-safe islands.

app_shell_layout

Shipping apps extend chirpui/app_shell_layout.html on top of Chirp’s chirp/layouts/shell.html (tokens, toast, transitions). This interactive showcase uses app_layout.html + app_shell.html instead; see the template comment in app_shell_layout.html and docs/fundamentals/ui-layers.md.

Workspace shell

IDE-like workbench: toolbar, optional file sidebar, main editor, optional inspector.

Workbench

README.md

Files

Sidebar slot — tree, outline, etc.

Main editor region (default slot).

Notes

Inspector / preview

workspace_shell(title, sidebar_title=…, show_inspector=true) — slots: toolbar, sidebar, inspector; body fills main.

Shell region

Stable id wrapper for OOB targets (shell actions, breadcrumbs). Maps to Chirp’s page composition model.

Region content (swap via hx-swap-oob in real apps)

Fragment island (safe region)

HTMX-safe region that opts out of inherited hx-select / targets — use inside boosted shells for forms and lists. See docs/components/dnd-fragment-island.md.

Inner markup is isolated from parent shell swap rules via hx-disinherit.

File tree

Repository

Workbench file explorer

file_tree(items=[…], title=…) — wraps nav_tree in a scrollable panel.

Split layout

Primary pane
Secondary pane

split_layout(ratio="sidebar"|"balanced"|"wide-primary"|…) — generic two-pane primitive also used inside workspace_shell.