Primitive

Frame

Single-border content frame with optional texture ground.

Frames are for contained examples, generated panels, and educational fragments. Do not use them as a default page section wrapper.
layout
DOM renderImage render
FrameDefault
Generated UIcompact
schema validDense preview frame.
Previewready

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

Header, body, and footer chrome.
Generated UIcompact
schema validDense preview frame.
Previewready
Render state

Compact

Compact frame for tool panels and generated controls.
Inspector
props.status = "ready"
Render state

Texture

Textured body ground.
Eyebrowmeta
Textured body ground
Footermeta
Render state

Showcase

Larger showcase canvas for generated or component previews.
Previewshowcase
showcase
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
headerReactNode-Optional top eyebrow slot.
headerMetaReactNode-Optional top-right meta slot.
footerReactNode-Optional bottom eyebrow slot.
footerMetaReactNode-Optional bottom-right meta slot.
scale'compact' | 'standard' | 'showcase'-Token-backed body canvas scale.
align'start' | 'center' | 'stretch'-Body alignment policy.
texture'lattice' | 'dots' | 'lines' | 'field' | 'perspective' | 'depth'-Optional tokenized body ground pattern.
childrenReactNode-Frame body content.