Primitive

Surface

Base Concrete surface with tokenized depth, intent, density, and state.

Use Surface before inventing item-local card chrome. It owns shell treatment, not layout orchestration.
surface
DOM renderImage render
SurfaceDefault
Run summary3 files changed.

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

Base surface treatment for contained UI.
Run summary3 files changed.
Render state

Raised

Raised treatment for floating or emphasized regions.
Interactive surface
Render state

Selected

Selected and disabled interactive surface states.
Selected workspace
Locked workspace
Render state

Inverse

Inverse surface for dark inspection regions.
Agent tracelive
Render state

Sticky

Sticky landmark surface for top-level chrome.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
asSurfaceElementdivSemantic surface element.
depth'flat' | 'raised' | 'sunken'-Surface depth recipe.
intent'default' | 'muted' | 'inverse' | signal-Semantic surface intent.
density'compact' | 'comfortable' | 'editorial'-Surface padding density.
placement'static' | 'sticky'-Optional sticky landmark placement.
childrenReactNode-Surface content.