Editor Shell

editor-shell module-tier

Behavior-only editor shell module for design-tool layouts. Author provides the structural DOM — header (topbar), [data-editor-body] with pane-ui children ([data-left], [data-right]), [data-canvas] for the central surface, and a footer (statusbar). editor-shell wires select-ui[data-options] for JSON-parsed option lists.

Basic shape

Author supplies the structural DOM — header, body with pane-ui rails + canvas, footer. The shell binds toolbar select wiring + responsive pane collapse.

<editor-shell> <header> <icon-ui slot="icon" name="layers"></icon-ui> <span slot="heading">Untitled.fig</span> <span slot="description">1920 × 1080</span> <button-ui slot="action" variant="ghost">Share</button-ui> </header> <div data-editor-body> <pane-ui data-left>…tools panel…</pane-ui> <div data-canvas>…central canvas…</div> <pane-ui data-right>…inspector panel…</pane-ui> </div> <footer> <icon-ui slot="icon" name="zoom-in"></icon-ui> <span>100%</span> </footer> </editor-shell>

Slots

SlotPurpose
iconLeading glyph in <header> or <footer> — status dot, app icon, zoom badge.
headingPrimary label inside chrome bars.
descriptionSecondary metadata (document name, artboard size, zoom level).
actionTrailing control cluster. First [slot="action"] child pushes itself + siblings to the end.
action-leadingLeading control cluster (back, undo). Pairs with action for dual-cluster bars.

Behavior wiring

AffordanceAuthor markupWhat the shell does
Editor body[data-editor-body] wrapping pane-ui[data-left], [data-canvas], pane-ui[data-right]Lays out the canvas + flanking panes; handles responsive collapse.
Toolbar selectsselect-ui[data-options] with JSON in the attributeParses data-options JSON to populate option lists at connect.

Family pattern (forward-looking)

Per ADR-0023, future releases extend the bespoke-children family to the editor cluster. Planned children:

Today's data-* shape is fully supported and will continue to work alongside the bespoke vocabulary when it lands.