#>design
component anatomy html constraints

Component Options / Dom Structure

Universal Slots

Most pieces of UI in Spwashi are a variation of the .frame-card or .frame-panel structure. Instead of authoring arbitrary wrappers, we use a predictable slot anatomy.

[data-spw-slot="header"]

Used for the component's identifying marker, sigil, title, or top-level pill row. It anchors the component and provides identity before interaction.

[data-spw-slot="meta"]

For secondary information directly beneath the header—timestamps, provenance hints, and contextual breadcrumbs.

[data-spw-slot="figure"]

The primary visual container, whether for a raster image study or a runtime SVG rendering surface.

[data-spw-slot="body"]

The container for prose, lists, and structurally dense readable content. Handled by a max-inline-size measure.

[data-spw-slot="actions"]

Holds operator chips, buttons, and outbound links, usually sitting at the bottom boundary before references.

[data-spw-slot="footer"]

For terminal metadata, reference traces, or system-level output.