Role
Per ADR-0023, the editor cluster's bespoke family — <editor-shell> (host), <editor-toolbar>, <editor-canvas>, <editor-sidebar> (JS-bearing) + <editor-statusbar>, <editor-canvas-empty> (CSS-only). Confirms the family pattern is canonical across 3 archetypes (admin/chat/editor).
Composition
Typical placement inside <editor-shell>:
<editor-shell>
<editor-toolbar>
<span slot="title">Untitled.fig</span>
<button-ui slot="action" icon="gear"></button-ui>
</editor-toolbar>
<editor-sidebar slot="leading" collapsible>
<pane-ui resizable>
<header>Navigator</header>
<section>…layers…</section>
</pane-ui>
</editor-sidebar>
<editor-canvas>
<editor-canvas-empty>
<empty-state-ui icon="square" heading="New document" description="Drop content to begin."></empty-state-ui>
</editor-canvas-empty>
</editor-canvas>
<editor-sidebar slot="trailing" collapsible>
<pane-ui resizable>
<header>Inspector</header>
<section>…properties…</section>
</pane-ui>
</editor-sidebar>
<editor-statusbar>
<span slot="status">Saved</span>
<span slot="zoom">100%</span>
</editor-statusbar>
</editor-shell>
State as attribute
/* Hide all chrome in focus mode */
editor-shell[focus-mode] :is(editor-toolbar, editor-statusbar, editor-sidebar) {
display: none;
}
/* Visual treatment for empty canvas */
editor-canvas[empty] { /* placeholder UI */ }
/* Highlight focused canvas */
editor-canvas[focused] { outline: 2px solid var(--a-accent); }