Primitive

Composer Surface

Rich composer shell anatomy for editor surface, footer rail, toolbar, and submit dock.

Use ComposerSurface as the styled HTML vocabulary around a composer controller. Keep trigger detection, selection state, serialization, and submit behavior in the workflow component.
control
DOM renderImage render
Composer SurfaceDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Composer editor frame with toolbar and submit dock.
Render state

Filled

Composer shell with drafted prompt content.
Summarize the new table fixture and call out any missing primitive states.
Render state

Disabled

Disabled composer shell state.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
disabledbooleanfalseLocks the composer shell and editor affordances.
ComposerEditor.placeholderstring-Placeholder rendered by the contenteditable surface.
ComposerToolbar.childrenReactNode-Toolbar controls rendered in the footer rail.
ComposerSubmitDock.childrenReactNode-Submit and secondary action controls.
childrenReactNode-Composer rail, editor, footer, and popover children.