## Canonical hierarchy

For the full live demo + state-as-attribute documentation, see /site/components/editor-shell. This page is the pattern hub.

<editor-shell> <!-- Top toolbar — icon + heading + description + actions --> <editor-toolbar> <span slot="icon"><icon-ui name="layers"></icon-ui></span> <span slot="heading">Untitled.fig</span> <span slot="description">1920 × 1080</span> <span slot="action"> <button-ui text="Share" variant="ghost"></button-ui> <button-ui text="Run" variant="primary"></button-ui> </span> </editor-toolbar> <!-- Leading sidebar — layer tree / outline / file browser --> <editor-sidebar slot="leading" collapsible persist="structure"> <pane-ui side="leading" resizable size="sm"> <header>Layers</header> <section> <tree-ui>...</tree-ui> </section> </pane-ui> </editor-sidebar> <!-- Center canvas — the editing surface --> <editor-canvas> <editor-canvas-toolbar> <tabs-ui value="preview" variant="underline"> <tab-ui value="preview" text="Preview"></tab-ui> <tab-ui value="schema" text="Schema"></tab-ui> </tabs-ui> </editor-canvas-toolbar> <editor-canvas-empty> <empty-state-ui icon="cursor" heading="Open a file to begin"></empty-state-ui> </editor-canvas-empty> <!-- canvas children: code editor, preview iframe, design surface, etc. --> </editor-canvas> <!-- Trailing sidebar (optional) — inspector / properties panel --> <editor-sidebar slot="trailing" collapsible persist="inspector"> <pane-ui side="trailing" resizable size="sm"> <header>Inspector</header> <section> <field-ui label="Width"><input-ui type="number"></input-ui></field-ui> <field-ui label="Height"><input-ui type="number"></input-ui></field-ui> </section> </pane-ui> </editor-sidebar> <!-- Bottom statusbar — connection / sync / cursor position --> <editor-statusbar> <span>Ready</span> <span data-spacer></span> <span>Ln 42, Col 8</span> </editor-statusbar> </editor-shell>

## Part-by-part reference

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.

## Authoring rules

- Cluster-namespaced children only. Inside `<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.
- Each sidebar wraps a `<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.
- Canvas reflects `[empty]`. Use `:has(editor-canvas[empty])` to style the shell differently when nothing's open.
- Focus mode is one attribute. Setting `focus-mode` on the shell propagates to `[full-screen]` on the canvas and `[focused]` on the active sidebar — no JS coordination needed.

## Where to next

- editor-shell component reference — full anatomy + live demo
- pane-ui · tree-ui · tabs-ui
- Macro-shells overview
- admin-shell pattern · chat-shell pattern