Component coverage

All components

Every block in the v1 roster appears on this page, and the artifact opens from disk with no network requests.

Layout

Stack holds children with a controlled gap

Text at lead size introduces a section.

Text at body size carries the detail underneath.

Text at caption size carries a note.

Grid child one

Grid children collapse to one column on narrow viewports.

Grid child two

The column count is an author choice, not authored CSS.

Grid child three

Each child is an ordinary block.

Wide side

Split places child groups side by side and stacks them when narrow.

Narrow side

The ratio is a named value, never a number.

End of layout

Content

Rich text renders several paragraphs from line breaks.

The compiler splits on blank lines and escapes every paragraph.

A closed action vocabulary can be validated, tested, and reviewed.
Design note

A Page Spec blockyaml

- type: text
  text: Declarative input only

Block facts

Input: JSON or YAML
Output: One standalone document
Network: Denied unless the spec opts in

primitive verified EnterSpace

Inline primitives

Badge renders a status chipinline
Kbd renders key capsinline
Divider separates groups

Network is denied on this page

Remote media degrades to a poster and a link, which is why the video and audio blocks below are not players.

Information

Roster

Blocks: 45
Actions: 12
Presets: 6

Roster coverage

45 / 45

45 of 45

Compile pipeline

Parse
JSON or YAML becomes a nested spec.
Normalize
The spec becomes a flat IR with stable node ids.
Render
Blocks emit semantic HTML.
Verify
The build fails rather than shipping an unsafe document.

How the compiler got here

Fixtures
Page classes first
The corpus fixed what each page class needs.
Themes
Presets as typed data
A preset is data with kinds, not a stylesheet.
Cloud
Hosted path stayed opt-in
The local compiler never needs an account.

Collections

Action vocabulary

Action vocabulary
Action	Purpose
copy	Copy text to the clipboard
open-url	Open an allowlisted URL
toggle	Toggle a dialog or the theme
filter	Filter a bound collection

Local and cloud

Local compiler

No account and no network
Byte-identical output
The canonical path

Cloud renderer

Opt-in and non-authoritative
Render and share are separate scopes
Never persists the bearer

Guarantees

Offline
The artifact opens from disk with zero requests.
Deterministic
Identical input yields identical bytes.
Escaped
Every value is escaped for its context at emission.
Typed
Unknown blocks and props are rejected, not ignored.

Risks this page exercises

Risk by impact and likelihood
Area	Impact	Likelihood	Note
Arbitrary markup	high	low	Rejected during validation.
Remote fetch	medium	low	Denied unless the spec opts in.
Author script	high	low	No expression language exists.

Interactive

Modes

Tabs use a roving tabindex and wire each panel to its tab.

Details

Why native controls first?

The platform already implements keyboard and assistive behavior correctly.

Why is the action list closed?

A closed vocabulary can be validated, tested, and reviewed.

Slide one

Previous and next buttons, keyboard, and swipe all move the carousel.

1 / 2

Scale5

Filter blocks

Filterable blocks

badge
kbd
divider
spacer

Data

Blocks per group

Blocks: Layout 7, Content 8, Information 5, Collections 5, Interactive 10, Data 3, Media 5

Chart data table

Blocks per group
Series	Layout	Content	Information	Collections	Interactive	Data	Media
Blocks	7	8	5	5	10	3	5

Compile time by fixture

Milliseconds: One 4.43, Two 3.86, Three 3.6, Four 2.77

Chart data table

Compile time by fixture
Series	One	Two	Three	Four
Milliseconds	4.43	3.86	3.6	2.77

Output size by fixture

Bytes: A 24839, B 26481, C 27217, D 27687

Chart data table

Output size by fixture
Series	A	B	C	D
Bytes	24839	26481	27217	27687

Primitives and semantic blocks

Blocks: Primitives 26, Semantic 19

Chart data table

Primitives and semantic blocks
Series	Primitives	Semantic
Blocks	26	19

Roster by kind

Blocks: Primitive 26, Semantic 19

Chart data table

Roster by kind
Series	Primitive	Semantic
Blocks	26	19

Size trend

Bytes: A 22709, B 24839, C 26481, D 27217, E 27687

Chart data table

Size trend
Series	A	B	C	D	E
Bytes	22709	24839	26481	27217	27687

Roster coverage as a chart

Blocks: Covered 45

Chart data table

Roster coverage as a chart
Series	Covered
Blocks	45

Media

Cover illustration for the all-components page — Local images render directly and are never fetched.

Local assets

Pipeline
Presets
Interactions

Compiler walkthrough

A walkthrough of the compiler pipeline and the emitted artifact.

Remote media is not embedded because the page denies network access.

Open the recording

Network is denied, so this is a poster and a link.

Introduction

A short spoken introduction to the declarative page model.

Remote media is not embedded because the page denies network access.

Open the recording

Audio degrades to metadata and a link.

Compiler pipeline

Page Specspecthen to irvalidate
Normalized IRirthen to htmlrender
Standalone HTMLhtml

Rendered as a structured fallback because no diagram adapter is configured.

Review

Changed files

Changed files
Path	Status	Additions	Deletions
`src/render/document.ts`	modified	+12	−3
`src/theme/tokens.ts`	added	+48	−0
`src/spec/legacy.ts`	deleted	+0	−96

Findings

good
Native controls first
The platform implements keyboard behavior correctly, so no widget code is needed.
concern
Provider references stay inert
A provider reference must remain a poster and a link rather than becoming a frame.
question
Who reviews a preset change?
A preset is typed data, so a review is a diff of values.

Showcase

bento
marquee
terminal
file-tree
before-after
kpi
showcase
checklist
cta

Bento

Large
A large tile leads the mosaic
Tiles take small, wide, tall, or large sizes and pack densely.
6
Themes
0
Requests on open
Wide
A wide tile spans two columns
Text-only tiles align to the bottom.

KPI

Fixture pages
11
+1 (improving)
Runtime dependencies
1
unchanged

Terminal

ak-render validate page.yaml
ok: page.yaml
# commands, output, comments, success, and errors differ
error: $.blocks[0].type: unknown block type

File tree

1 added
1 modified
1 deleted

src/
- render/
  - blocks.tsmodified
  - showcase-blocks.tsaddednew module
- spec/
  - legacy.tsdeleted
README.md

The plan fixture in light mode — A range input moves the divider; without script both images show side by side.

The dashboard fixture in dark mode — A range input moves the divider; without script both images show side by side.

Showcase

Copy beside a framed capture

The media can sit on either side, in a browser frame or plain.

Browser chrome is decorative
Stacks on narrow screens

Checklist

1 of 2 done

Done items read as done in text, not only by glyph (done)
Open items stay at full contrast (open)

Night band

A section with an inverse surface takes the theme's dark palette in both color schemes, so every block inside recolors from tokens.

Tokens, not overrides

Colour tokens are redeclared with the theme's dark values inside the band.

Closing call to action

Every block, one spec.

The CTA sits on the same night band and links out with real anchors.

Back to the gallery AgentKit docs

Component coverage ends here

Back to the fixture gallery