Docs Patterns
Layout Editor (three-pane)experimental
Three panes for composing a page: a palette of modules, the canvas where you arrange them, and an inspector for the selected module. Preview mode renders the layout the way a viewer would see it, at any device width.
Guidelines
- mustCanvas order is render order; the DragList's keyboard move buttons apply here as everywhere.
- mustHidden modules stay on the canvas at reduced opacity with the eye toggle — removing and hiding are different intents.
- mustThe inspector edits exactly one selected module; selection is visible (focus-ring outline on the row).
- shouldPreview states its fidelity honestly — it approximates the platform renderer, and says so.
- mustPreview mode renders through the fixed color.preview.* tokens — the consumer app is dark in BOTH workspace themes. Never style the preview frame with bg.inverse/text.inverse/accent.base, which flip in sumi.
- mustThe idle inspector holds LAYOUT settings (name, platforms) — 'select a module' is a hint inside it, never the whole panel.
- mustList thumbnails are schematics derived from the live modules (hero shows the source's real artwork); they can never drift from the layout.