Layout principles editor
Route: Library → Properties → Layout principles
The mental model lives in layout principles (concepts). This page covers the editor. The surface is master/detail with a live preview: a left rail lists every principle in four groups; selecting one renders it in the preview iframe and opens its inline editor below.
The four groups
The left rail groups principles as Shells, Layouts, Overlays, and Navigation (one entry per container). A default preset is already present on first run — you start by tweaking, not creating.
Editing a shell
Select the shell to edit its content max-width and padding (semantic token refs), plus Advanced fields: spacing gap/padding/rhythm, responsive breakpoints, transition speed, accessibility notes, and the global stacking order. All fields commit live and repaint the preview.
Editing a layout + its blocks
A layout is a composition of blocks. The inline editor sets the layout's name, variant, grid/flex structure, and its use/avoid tags. Click Edit blocks to open the block canvas — a dedicated surface to add, reorder, delete, and edit blocks. Each block has a usage description, its own flex/grid/spacing, and its own application tags.
Editing an overlay
The overlay editor is kind-aware:
- Drawer — placement, width (token), trigger, backdrop, dismiss-on-overlay-click.
- Modal — size, dismiss-on-overlay-click.
- Popover — anchor (token), placement.
- Full-page overlay — dismiss strategy.
- Toast — positioning is a component property (deferred); only its rules of application are set here.
Dialog-like overlays (drawer / modal / full-page) also toggle header and footer regions.
Editing navigation
Pick a Navigation entry to edit its container's ordered nav levels. Each level has a component (limited to the container's allow-list), a location, and use/avoid tags. Reorder with the up/down buttons, remove with the trash button, and Add level appends a new one. The preview shows each level in place.
Rules of application (use / avoid)
Shells, layouts, overlays, blocks, and nav levels all expose a When to use
and When NOT to use tag input. Type key:value and press Enter; backspace
on an empty input removes the last chip. Re-adding a key replaces its value.
Reset to default
The header "…" menu → Reset to default preset opens a confirm dialog listing
how many shells / layouts / overlays / navigation principles will be
overwritten. This is destructive; undo (Ctrl/Cmd + Z) restores it.
Running the preview
The preview pane embeds the preview-host on :5179. Run it alongside the app:
npm run dev # app on :5173
npm run dev:preview-host # preview-host on :5179
If the preview-host isn't running, the pane shows a fallback notice — the inline editors still work.