The canonical composition pattern for design-tool / code-editor /
canvas surfaces — a toolbar, a leading navigator pane, a center
canvas, an optional trailing inspector pane, and a statusbar. Built
from cluster-namespaced bespoke children. The legacy raw-HTML form
(raw <header> + <div data-editor-body>
+ <pane-ui data-left|data-right> +
<div data-canvas> + raw <footer>)
was retired in v0.4.0 per
ADR-0024;
new code uses the bespoke shape exclusively per
ADR-0023.
For the full live demo + state-as-attribute documentation, see /site/components/editor-shell. This page is the pattern hub.
| Part | Role |
|---|---|
<editor-shell> |
Behavior-only host. Coordinates the family and propagates [focus-mode] to children's [full-screen] / [focused]. |
<editor-toolbar> |
Top band — slots: icon, heading, description, action. |
<editor-sidebar> |
Leading (navigator) or trailing (inspector) pane. Holds <pane-ui>. Reflects [collapsed]; persist= wires localStorage. |
<editor-canvas> |
Center surface. Holds optional <editor-canvas-toolbar> + <editor-canvas-empty> + canvas children. Reflects [empty]. |
<editor-statusbar> |
Bottom band — same slot vocabulary as toolbar; conventionally read-only. |
<editor-shell>: <editor-toolbar>, <editor-sidebar>, <editor-canvas>, <editor-statusbar>. Don't author raw <header>, <footer>, <div data-editor-body>, <div data-canvas> — retired in v0.4.0.<pane-ui>. The pane owns resize; the sidebar owns slot positioning + collapse + persist. <pane-ui side="leading|trailing"> is required so the resize handle lands on the correct edge.[empty]. Use :has(editor-canvas[empty]) to style the shell differently when nothing's open.focus-mode on the shell propagates to [full-screen] on the canvas and [focused] on the active sidebar — no JS coordination needed.