Document model

A BannerTemplate is a JSON document with three breakpoint trees and a handful of top-level fields.

Top-level fields

Field	Type	Notes
`id`	`string`	Stable, URL-safe identifier.
`name`	`string`	Display name.
`description`	`string`	One line, used in search and gallery captions.
`createdAt`	`string`	ISO 8601 timestamp.
`breakpoints`	`{ laptop, tablet, mobile }`	The three independent layouts.

Breakpoint document

Each breakpoint owns:

Field	Type	Notes
`sizeMode`	`"ratio" \| "viewport" \| "explicit"`	How the banner's height is determined.
`designHeight`	`number`	Used with `ratio` mode.
`root`	`BannerNode`	The top of the panel/split tree.
`bg`	`string`	Background colour behind the tree.
`gutter`	`number`	Gap between siblings in a split, in design px.

The tree

A BannerNode is either a split or a panel:

Split — two children (a and b) divided by a ratio, either cols or rows.
Panel — a single surface holding positioned elements, or a carousel of slides.

Element types

heading, text, button, link, image, icon, overlay, spacer. Every element has pos (percentage-based placement) and a type-specific set of fields.

See the TypeScript types in the package source for the full field list, or use the playground to inspect a live template's JSON.