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
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.

Raised

Raised treatment for floating or emphasized regions.
Interactive surface

Selected

Selected and disabled interactive surface states.
Selected workspace
Locked workspace

Inverse

Inverse surface for dark inspection regions.
Agent tracelive

Sticky

Sticky landmark surface for top-level chrome.

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.