Primitive

Data Surface

Data and generated-output surface for metrics, charts, and tables.

Use DataSurface when a product or generative UI region frames computed data. Keep data mapping, sorting, chart geometry, and formatting in components or utilities.
data
DOM renderImage render
Data SurfaceDefault

Run quality

Validated against the active schema.

97.2

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

Compact generated-output surface with metric and delta.

Run quality

Validated against the active schema.

97.2
Render state

Compact

Dense table-adjacent surface with footer status.

Runs

1,284
Indexed rows are ready for export.
Updated 12 seconds ago
Render state

Media

Media layout for ring or visual summaries.

Coverage

84%
Target 80
Render state

Toolbar

Header action slot for data controls.

Runs

1,284 rows indexed.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
purpose'generic' | 'metric' | 'meter' | 'chart' | 'table'-Semantic data region purpose.
layout'stack' | 'media'-Surface layout recipe.
titleReactNode-Compact surface title.
descriptionReactNode-Optional supporting copy.
actionsReactNode-Header action slot.
footerReactNode-Footer metadata or paging slot.