Page-builder catalog - Membership.io Docs

The page-builder catalog is the single source of truth for the templates and section types available when building hub pages. Every Membership.io surface that composes pages — backend, hub, admin, and CLI — consumes this catalog.

GET /api/v1/page-builder/catalog returns the raw catalog JSON. The response ETag header is the catalog’s content digest — send If-None-Match: "<digest>" to get a 304 Not Modified, and cache by digest.Current catalogVersion: 0.24.6 · digest: sha256:99b0727dfce6f85907d29c066d76cfb1f193fe7860be869003d10b6b777141c4

Node shape

Every node in a page tree is the same envelope. The renderer dispatches on kind — never on type — and reads the node’s content from a top-level value, a sibling of settings:

{
  "id": "019f8c3a-1f4e-7b22-8c40-6d7e8f901a2b",
  "kind": "headline",
  "value": "Welcome to Member Academy",
  "settings": { "level": 1, "weight": 700 }
}

A section node is the same envelope plus a template from the table below and a children array. Putting a node’s content in settings.value instead of value, or omitting a section’s template, is accepted by the API and then silently dropped by the renderer; an unrecognized settings.weight (a CSS keyword such as "bold") is quietly discarded rather than applied. Every node also needs an id. See Node shape for the full contract, including the leaf-kind settings and the surface.background enum. The catalog also publishes higher-level registries this page does not cover — hubTemplates[] (whole-hub manifests), pageTemplates[] (page outlines), and the playlist and document seeding vocabulary. See Hub templates and the page catalog for that contract, including the versioning and pinning semantics of the artifact itself.

Templates

Template	Label	Category	Section type	Page types	Variants	Intent
`auth-brand-panel`	Auth Brand Panel	slot	—	`login`, `register`	—	The brand panel beside the login and register forms: a benefits headline, a canonical bullet list, and a bold footnote. This panel is edited directly on the login and register pages, never added as a section. The login and register starters stay logo-only by default.
`carousel`	Carousel	section	`carousel`	`homepage`, `custom`, `playlist-detail`, `file-detail`, `search`	`playlist`, `slides-continue`, `slides-page`, `slides-playlist`	Feature carousel — one sliding feature at a time
`compact`	Scroll	section	`compact`	`homepage`, `custom`, `playlist-detail`, `file-detail`, `search`	`playlist`, `recent`	Horizontal scroll of content cards
`content-card`	Content Card	element	—	—	—	Reusable content-item card baseline
`content-grid`	Content Grid	section	`content-grid`	`homepage`, `custom`, `playlist-detail`, `file-detail`, `search`	—	Auto-content grid (data-bound)
`grid`	Grid	section	`grid`	`homepage`, `custom`, `playlist-detail`, `file-detail`, `search`	`playlist`, `recent`	Content grid
`hero`	Featured	section	`feature`	`homepage`, `custom`, `playlist-detail`, `file-detail`	`continue`, `file`, `playlist`	Full-width feature/hero
`row`	Row	section	`row`	`homepage`, `custom`, `playlist-detail`, `file-detail`	`1col`, `2eq`, `2left`, `2right`, `3eq`, `4eq`, `bound-cards`, `cta-band`, `faq`	Row of columns
`search-bar`	Search	section	`search`	`homepage`, `custom`, `search`	—	Standalone search section
`testimonials`	Testimonials	section	`testimonials`	`homepage`, `custom`	—	Member quotes — one focused testimonial at a time

Node kinds

The catalog’s settingsSchema map is the authority on what each kind accepts: 33 kind:<nodeKind> entries plus the shared action, background, gradient, structural, surface, textTheme, visibility shapes, each listing typed properties with their enums, defaults, and per-field notes, split into core and presentational buckets matching the consumer profiles below. See Node shape for the shapes that most often cause a silent render drop.

Kind	Child rules
`accordion`	many
`banner`	many
`button`	none
`carousel`	many
`container`	many
`content-card`	many
`countdown`	none
`cta-slot`	none
`divider`	none
`doodle`	none
`featured-icon`	none
`field`	none
`file-attachments`	none
`file-player`	none
`grid`	many
`headline`	none
`horizontal-scroll`	many
`icon`	none
`image`	none
`logo`	none
`media-slot`	none
`plan-card`	none
`plan-group`	many
`plan-price`	none
`progress-ring`	none
`quote`	none
`row`	many
`search-bar`	none
`stack`	many
`tabs`	many
`text`	none
`theme-toggle`	none
`video`	none

Section types

Type	Lifecycle	Anonymous-safe	Writable	Compiled from
`calendar`	active	✗	✗	`calendar`
`carousel`	active	✗	✓	`carousel`
`compact`	active	✗	✓	`compact`
`content-grid`	active	✗	✓	`content-grid`
`feature`	active	✓	✓	`hero`
`grid`	active	✗	✓	`grid`
`row`	active	✓	✓	`row`, `free-stack`
`search`	active	✗	✓	`search-bar`
`testimonials`	active	✗	✓	`testimonials`

Anon-safe — whether the section type is whitelisted on the backend’s sanitized pre-auth render (login / register / payment pages for logged-out visitors). It does not affect public-hub page visibility: anonymous visitors get the full published tree of any public page; only author-set access gates prune content there.

Settings vocabulary

settingsSchema is the per-kind:<k> settings contract for the page-builder node tree. Each kind’s schema splits into two tiers: core settings that every consumer — the web hub, native apps, any future renderer — must honor to render the node correctly, and presentational settings that native apps and other constrained consumers are free to ignore. Only keys and values the mio-hub renderer actually implements are listed below; this documents what’s real, not an aspirational spec. Recipes must not restate a setting’s default value — omitting a key defers to the hub’s built-in default for that key. The mio-hub renderer is the source of truth for this vocabulary, and it is declared directly in the catalog (MIO-2685).

`shared:action`

Canonical navigation target object (Action[‘type’]/[‘value’]/[‘params’], src/lib/page-tree/action.ts). The single shared definition referenced via ‘{type: ‘object’, shape: ‘action’}’ by kind:button.core.action, kind:content-card.core.action, and kind:image.core.action — one Action shape, three consumers (MIO-3926).

Key	Tier	Type	Allowed values	Default	Description
`type`	—	`string`	`page`, `url`, `email`, `scroll`, `playlist`	—	Action[‘type’] (src/lib/page-tree/action.ts).
`value`	—	`string`	—	—	Canonical value — no scheme/# prefix. Meaning depends on ‘type’ (bare email address, bare anchor id, full URL, system-page-type/UUID/path, or playlist id).
`params`	—	`object`	—	—	Optional string-keyed query params merged onto the resolved href.

`shared:background`

Flattened TemplateSurface Background discriminated union (src/lib/page-tree/types.ts). Validation limitation: enum applies to ‘type’; all variant fields are optional and the validator cannot enforce which fields are required per ‘type’ value. ‘thumbnail’ is excluded per the honesty policy (decision 4) — declared as a TODO in hub types, implemented nowhere, used by no recipe.

Key	Tier	Type	Allowed values	Default	Description
`type`	—	`string`	`none`, `color`, `custom-color`, `tint`, `image`, `gradient`, `gradient-glow`, `gradient-tint`	—	Discriminant. ‘none’ = no override (most common). ‘color’ = theme token (see ‘token’). ‘custom-color’ = explicit hex (see ‘value’). ‘tint’ = themed secondary tint band, no extra fields. ‘image’ = image URL (see ‘url’/‘blur’/‘scrim’); the renderer composes a secondary-tint scrim over the image by default (MIO-492 amendment) — ‘scrim:false’ opts out (MIO-3134). ‘gradient’ = resolves via the sibling ‘gradient’ setting on the same surface. ‘gradient-glow’ = page fill + one wide accent radial-gradient ellipse rising from the top edge, masked to fade before the bottom 40% (DS hub-section-bg.tsx gradient-glow parity; ‘swap’ not ported). ‘gradient-tint’ = opaque page fill + one overlay linear-gradient at a fixed 20% color-mix strength, resolved via the same resolveGradientStops() the ‘gradient’ type consults, with the second stop hue/lightness-boosted after resolution (boostGradientTintEndStop()) so close-together schemes don’t read as imperceptible once mixed down.
`token`	—	`string`	`primary`, `secondary`, `muted`, `accent`, `background`, `white`	—	Used when type=‘color’. Theme token name, resolved via BG_TOKEN_CLASS (node-surface.tsx) to a Tailwind bg-* class. An unrecognized token renders no background (dev console.warn). ‘white’ = a white fill (bg-white); a band painted white reads as light for the surface auto-contrast. On kind:button a white fill takes the brand-secondary colour for its label, never primary (see kind:button.textTheme). Sections may use it too.
`value`	—	`string`	—	—	Used when type=‘custom-color’. Explicit hex value (e.g. ‘#FF5722’), validated via hexToRgb before use.
`url`	—	`string`	—	—	Used when type=‘image’. Validated same-origin-relative or absolute http(s) URL; CSS-delimiter characters are rejected (isValidImageUrl, node-surface.tsx). An invalid URL renders no image layer.
`blur`	—	`boolean`	—	—	Used when type=‘image’. Opt-in additional 25px backdrop blur layer, decoupled from ‘scrim’ (MIO-3134/MIO-3335) — legal in every scrim on/off combination, not force-disabled by ‘scrim:false’.
`scrim`	—	`boolean`	—	—	Used when type=‘image’. MIO-3134: opt OUT of the always-on secondary-tint scrim — false renders the raw image with no darkening layer at all. Default (unset/true) is byte-identical to pre-MIO-3134 (scrim always composes, MIO-492 amendment). Pairs with shared:surface.ink — with the scrim off there is no scrimmed-image contrast to auto-derive, so the manual ink escape hatch is how the author takes over (‘turn off the scrim, you own the ink’).
`tone`	—	`string`	`neutral`, `primary`	`neutral`	Used when type=‘tint’. ‘primary’ (MIO-2896) is the brand-tinted wash — the composite bg-hub-primary-bg token at node tier; at section tier (no opaque primary-family class exists) it routes to a two-layer composite (opaque bg-background fill + flat bg-hub-primary-bg overlay) instead of falling back to neutral’s class.
`fade`	—	`string`	`down`	—	Used when type=‘tint’. Unset = flat fill. ‘down’ renders the same tone colour as a top-to-bottom gradient into transparent (3-stop curve: boosted top stop → floor at 40% → hold).
`glowTint`	—	`boolean`	—	—	Used when type=‘gradient-glow’. Tints the radial ellipse with the theme’s accent colour.
`glowStrength`	—	`number`	`1`, `2`	—	Used when type=‘gradient-glow’. Ellipse opacity/intensity step.
`glowSpread`	—	`number`	`1`, `2`	—	Used when type=‘gradient-glow’. Ellipse radius step.

`shared:gradient`

Paired with shared:background when type=‘gradient’ (src/lib/page-tree/types.ts Gradient, src/lib/theme/types.ts GradientType).

Key	Tier	Type	Allowed values	Default	Description
`type`	—	`string`	`complementary`, `analogous`, `triadic`, `monochrome`, `split`, `warm-shift`, `custom`	—	When not ‘custom’, resolves against the hub theme’s primary color via computeGradient(). When ‘custom’, customStart/customEnd are used directly. Editor labels (the catalog schema has no per-enum-value label field, so the friendly names live here), in this fixed display order: split ‘Balanced Blend’, complementary ‘Color Opposites’, analogous ‘Similar Shades’, triadic ‘Three-Way Mix’, monochrome ‘Single Hue’, warm-shift ‘Warm Glow’, custom ‘Custom’. The ids and their colour math are unchanged.
`customStart`	—	`string`	—	—	Used when type=‘custom’. Hex start stop, validated via hexToRgb. An invalid/missing pair falls back to ‘split’ against the hub theme.
`customEnd`	—	`string`	—	—	Used when type=‘custom’. Hex end stop, validated via hexToRgb.

`shared:textTheme`

Text theme — the ONE ink a whole node is painted (the hub editor’s Text theme control: Auto / Dark / Light / Primary / Custom). Referenced as a ‘textTheme’ settings key via ‘{type: ‘object’, shape: ‘textTheme’}’ by kind:text and kind:headline (the whole node’s copy), kind:button (the label and icon ink) and kind:divider (the line’s colour); its keys nest under that field on the node (‘settings.textTheme.tone’, ‘settings.textTheme.color’). Unset — the ‘textTheme’ key absent, or an object with no ‘tone’ — is Auto: the consumer’s own default decides (text/headline: the surrounding surface’s ink, per the MIO-492 auto-contrast / ‘surface.ink’; button: derived from its fill; divider: the current colour). Each consumer’s own field description states its Auto.

Key	Tier	Type	Allowed values	Default	Description
`tone`	—	`string`	`primary`, `secondary`, `white`, `custom`	—	Unset = Auto (see the shape description). ‘primary’ paints the hub’s primary brand colour. ‘secondary’ paints the hub’s secondary brand colour (its ink — the editor’s ‘Dark’ option), even on a dark band. ‘white’ paints white (the editor’s ‘Light’ option), even on a light band. ‘custom’ paints the sibling ‘color’; a missing or invalid ‘color’ falls back to Auto.
`color`	—	`string`	—	—	Custom colour as a hex string ‘#rrggbb’ (a 3-digit ‘#rgb’ is also accepted). Only read when ‘tone’ is ‘custom’; ignored otherwise. Any other value is ignored by the renderer (no error), which then falls back to Auto.

`shared:visibility`

Per-viewport responsive show/hide (MIO-4182). Promoted into its own referenceable shape out of what used to be ‘shared:surface.visibility”s inline properties, so the SAME {mobile, desktop} vocabulary is reachable two ways with zero drift risk between them: nested under a ‘surface’ settings group (‘shared:surface.visibility’, back-compat — see that key’s own description) and as the generic top-level ‘visibility’ settings key every node kind can carry regardless of whether it has a ‘surface’ group at all (‘shared:structural.visibility’, the new MIO-4182 path). Both reference THIS ONE definition via ‘{type:‘object’, shape:‘visibility’}’ — a stored value means exactly the same thing under either path.

Key	Tier	Type	Allowed values	Default	Description
`mobile`	—	`boolean`	—	—	false hides on max-md (Tailwind max-md:hidden). Unset/true = visible.
`desktop`	—	`boolean`	—	—	false hides on md+ (Tailwind md:hidden). Unset/true = visible.

`shared:surface`

TemplateSurface (src/lib/page-tree/types.ts). Nested under a kind’s own ‘surface’ settings key (see kind:stack, kind:content-card, and the section-root template-level surface consumed via TemplateSurface). Resolved by useNodeSurface() (src/components/primitives/node-surface.tsx).

Key	Tier	Type	Allowed values	Default	Description
`background`	—	`object`	object (background)	—	See shared:background.
`gradient`	—	`object`	object (gradient)	—	See shared:gradient. Only consulted when background.type=‘gradient’.
`padding`	—	`string`	`none`, `sm`, `md`, `lg`, `xl`, `section`, `gutter`, `gutter-b-mobile`, `hero-mobile-insets`, `card`, `band`, `band-b`, `band-carousel`, `band-wave`, `card-md` + any string	—	Named spacing token (PADDING_CLASS, node-surface.tsx) OR a raw CSS escape-hatch string (e.g. ‘15px’, ‘1.25rem’) — freeform:true means the enum lists the KNOWN named tokens but any other string value is also legal (rendered as an inline style), not a validation error. ‘section’ contributes VERTICAL inset only (py-hub-section) and is only visually complete on a maxWidth:‘content’ container root (see kind:container.maxWidth). ‘gutter’ = px-hub-section-x alone (X-only named step, for a surface whose vertical padding is a custom freeform value that can’t merge with a named step). ‘gutter-b-mobile’ = mobile-only pb-4. ‘hero-mobile-insets’ = combined pt-16/pb-4 mobile pair. ‘card’ = the DS card padding pair (p-7, @max-[659px]/hub:p-4). ‘band’ = the standard sales section band rhythm (py-[80px], @max-[659px]/hub:py-[48px]). ‘band-b’ = bottom-only band variant (pb-[80px], @max-[659px]/hub:pb-[48px]). ‘band-carousel’ = the tighter carousel band rhythm (py-[56px], @max-[659px]/hub:py-[40px]). ‘band-wave’ = the wave-notch band (pt-[112px] pb-[128px], @max-[659px]/hub:pt-[80px] @max-[659px]/hub:pb-[96px]). ‘card-md’ = the 32px/24px card pair (p-8, @max-[659px]/hub:p-6), distinct from ‘md’ (p-8 flat, unchanged at mobile).
`borderRadius`	—	`string`	`none`, `sm`, `md`, `lg`, `full`, `hub-s`, `hub-m` + any string	—	Named radius token (RADIUS_CLASS, node-surface.tsx) OR a raw CSS escape-hatch string (e.g. ‘12px’, ‘50%’) — freeform:true, same semantics as padding above.
`shadow`	—	`string`	`none`, `sm`, `md`, `lg`, `xl`	—	Named shadow token (SHADOW_CLASS, node-surface.tsx). NO raw-CSS escape hatch (legacy parity, discrete sizes only) — unlike padding/borderRadius, an unrecognized value is NOT a freeform fallback, it resolves to no shadow class.
`visibility`	—	`object`	object (visibility)	—	Responsive show/hide, nested under this surface group — see shared:visibility for the referenced {mobile, desktop} shape. Historically section-root-only (TemplateSurface applies it directly); useNodeSurface() (the resolver shared by non-section-root surfaces like stack/content-card) folds it into its returned ‘className’ UNCONDITIONALLY, so any consumer that applies that resolved className to its DOM node picks it up automatically — today that’s kind:stack’s own ‘surface’ (see kind:stack.presentational.surface) and the generic (non-hub_playlists) kind:content-card card body (see kind:content-card.presentational.surface). The one exception is the delegated HubPlaylistCard path inside content-card (hub_playlists scope), which supplies its own chrome and never applies the resolved surface className/style at all — nested ‘surface.visibility’ has no render effect there. PRESERVED FOR BACK-COMPAT (MIO-4182): an existing stored tree’s ‘surface.visibility’ keeps meaning exactly what it always meant. New authoring that needs visibility on a kind with no ‘surface’ group — or wants one consistent path regardless of kind — should prefer the generic top-level ‘visibility’ key (shared:structural.visibility, MIO-4182) instead; this nested key is not deprecated, just no longer the only path.
`minHeight`	—	`number`	`500`, `440`	—	Section-root-only concern (like visibility). Literal whitelist, NO raw-CSS escape hatch — a fixed DS design token, not free-form author input (MIN_HEIGHT_CLASS, template-surface.tsx). 500 = unconditional min-h-[500px] (search-bar band). 440 = @[660px]/hub:min-h-[440px], gated to >=660px container width (testimonials carousel band, MIO-2678) — mobile takes natural height.
`margin`	—	`string`	—	—	Freeform raw-CSS escape hatch (e.g. ‘-40px 0 0’), no named-token form. Lets a node escape its own box — padding can only add inset space. NOT authorable via any admin content field; this is a template-recipe-level layout escape hatch (straddle/edge authoring contracts), not a writable author knob.
`translate`	—	`string`	—	—	Freeform raw-CSS escape hatch (e.g. ‘0 -50%’) mapped to the CSS ‘translate’ property. Own-box-relative percentages (unlike vertical margin %, which resolves against containing-block width) — the vocabulary’s only ‘shift by half MY OWN height’ mechanism. Composes with rotate/scale in the fixed CSS individual-transform-property order. Recipe-authoring-level escape hatch, not a writable author knob.
`clip`	—	`boolean`	—	—	Opt-in overflow-hidden clipping the surface’s own in-flow children to its borderRadius — independent of the pre-existing backgroundLayer clip gate.
`elevate`	—	`boolean`	—	—	Opt-in relative z-10 giving the surface’s own box paint-order priority over a neighboring section that is independently position:relative (e.g. via its own layered background). Required whenever ‘edge’ or a margin+translate straddle overlaps a positioned neighbor.
`edge`	—	`object`	—	—	A repeating shape-tile mask cut into the surface’s own top/bottom edge, painted with the surface’s own resolved background. AUTHORING CONTRACT: setting edge.top/bottom:‘wave’ requires ALSO setting, on the SAME surface: (1) ‘margin’ — negative offset on that side equal to the 32px tile height; (2) ‘padding’ on that same side increased by the same 32px; (3) ‘elevate:true’. None of the three are auto-computed — omitting any renders a clipped/misaligned/wrongly-stacked strip.
`minScreenHeight`	—	`number`	`60`, `70`, `80`, `90`	—	dvh (not vh, for mobile chrome collapse). Pairs with flex flex-col — does not force centering itself. WINS over ‘minHeight’ when both are set (minHeight’s resolution is skipped entirely, not merged).
`maxHeight`	—	`number`	`800`, `1000`, `1200`	—	px, static class-map ladder, no freeform. Independent of minHeight/minScreenHeight.
`ink`	—	`string`	`auto`, `light`, `dark`	`auto`	MIO-3134: manual override of the resolved auto-contrast ink (—foreground/—muted-foreground/—muted trio, MIO-492) — general across EVERY background variant, not image-scoped. ‘auto’ (default) keeps today’s per-background derivation, including ‘no remap’ for variants that don’t derive one (tint, gradient-glow, gradient-tint, none). ‘light’ forces pure white ink; ‘dark’ forces the theme’s brand-secondary ink — the same two poles resolveSurfaceContrast()‘s own derivation already picks between (surface-contrast.ts), and the same two-way choice the MIO-3224 on-primary ink policy makes. Non-string/unrecognized values are tolerated as ‘auto’ (never throws).

`shared:structural`

NOT referenced via {type:‘object’,shape:‘structural’} from a kind descriptor like the other shared shapes. This is a validator-level ADDITIVE allowlist: every node’s settings object is validated against ‘kind:<its-kind>’ UNIONED with these three keys — tab_label/slot are read generically off ANY child node’s settings by an ANCESTOR container (tabs.tsx, accordion.tsx, find-by-slot.ts), independent of the child’s own kind, and are not part of any single kind’s own *Settings TS interface; surface is read generically off ANY node’s settings by renderer.tsx’s <TemplateSurface> wrapper, gated on that node’s ‘template’ annotation naming a templates[]/pageTemplates[] entry that itself declares a ‘surface’ property (the surface-declaring template set), independent of the node’s own kind. This is an extension beyond the design spec’s literal decision-1 text (which only names shared:surface as a referenced shape); documented here because the real catalog already uses tab_label/slot on stack/text/tabs nodes and surface on section-root container nodes (see Task A1 defaults-audit notes + MIO-2685 review round 1), and excluding any of the three would make the validator reject existing recipes. MIO-2724 addendum: ‘name’/‘role’/‘salesMeta’ (REVIEW — flagged for owner confirmation, see their own descriptions) extend this additive allowlist with catalog-authoring-only narrative-arc metadata used by the page-sales recipe’s section-root nodes — distinct from any mio-hub renderer concern, and (for ‘role’) a deliberate same-name/different-vocabulary overload against kind:field.core.role, resolved safely by this validator’s kind-first-then-structural-fallback lookup order. MIO-3134/MIO-3278 addendum: ‘side’/‘logoSize’ are region-chrome settings read off the ROOT of mio-hub’s auth brand-panel tree slot (src/lib/auth/prepare-panel-region.ts) by that ONE bespoke consumer — not by NodeRenderer/useNodeSurface and not generic across every node the way tab_label/slot are. Gated the SAME way ‘surface’ is: legal only when the node’s own ‘template’ annotation names a member of the regionChrome-declaring template set (a templates[]/pageTemplates[] entry carrying a top-level ‘regionChrome’ property, e.g. ‘auth-brand-panel’) — an ungated placement would let any stray node author side/logoSize with no consumer ever reading them there. MIO-4182 addendum: ‘visibility’ extends this additive allowlist with an UNCONDITIONAL per-viewport show/hide key (shared:visibility shape) — unconditional like tab_label/slot, NOT gated like surface/side/logoSize, so it validates on every node kind regardless of ‘template’. It is a NEW top-level path onto the exact same {mobile, desktop} vocabulary ‘shared:surface.visibility’ has always carried; see both keys’ own descriptions for the back-compat/precedence story. MIO-4331 addendum: ‘visibleFrom’ extends this additive allowlist with an UNCONDITIONAL scope-presence gate (see its own description) — like ‘visibility’ it is read by the hub renderer for every kind. Status honesty (MIO-2584): this vocabulary addition documents only what the mio-hub renderer implements in the SAME change set it ships with — see the PR description for the exact landing commit.

Key	Tier	Type	Allowed values	Default	Description
`tab_label`	core	`string`	—	—	Read by tabs.tsx and accordion.tsx off a DIRECT CHILD’s own settings (getLabel()) to label that child’s tab/accordion trigger — independent of the child’s own kind. Falls back to ‘Tab N’ / index-based label when absent or non-string.
`slot`	core	`string`	—	—	Read by find-by-slot.ts (src/lib/page-tree/data-binding/find-by-slot.ts) to locate a node by a named slot, for patch/cascade addressing — independent of the node’s own kind.
`visibility`	presentational	`object`	object (visibility)	—	MIO-4182 — per-viewport responsive show/hide, read generically off ANY node’s settings at the TOP level (‘settings.visibility’, a sibling of ‘settings.surface’ and every other kind-specific settings key) — UNCONDITIONAL, same unconditional additive path as tab_label/slot above, unlike ‘surface”s gated-by-template path below. Same shape/values as the surface group’s own ‘visibility’ (shared:visibility) — a leaf kind with no ‘surface’ settings key at all (e.g. headline, button, image) can still set ‘settings.visibility’ directly, and a container kind that already has its own ‘surface’ group (stack, content-card) can use this instead of nesting. ‘surface.visibility’ (shared:surface.visibility) is NOT deprecated by this — it is the pre-existing back-compat path for the kinds/templates that already honour it there (TemplateSurface section roots, kind:stack); this key extends the SAME semantics to every kind via one consistent top-level location. A node that sets BOTH this key and a nested ‘surface.visibility’ is not a conflict this catalog arbitrates — authors should set one, not both; the consuming renderer decides precedence if both are present.
`surface`	presentational	`object`	object (surface)	—	Read generically off ANY node’s settings by renderer.tsx’s <TemplateSurface> wrapper (renderer.tsx:150-162), gated on node.template being in the surface-declaring template set, independent of the node’s own kind. Kinds that ALSO read it at the node tint tier declare it themselves (kind:stack, kind:content-card).
`side`	presentational	`string`	`left`, `right`	—	MIO-3134/MIO-3278 — region-chrome setting on the ROOT of a regionChrome-gated template (see the shared:structural top-level description). Which side of the split-screen mio-hub’s auth brand-panel renders on. Read tolerantly by the one bespoke consumer (prepare-panel-region.ts’s parseSide) — any value other than ‘left’ resolves to ‘right’, its default when unset.
`logoSize`	presentational	`['string', 'number']`	`normal`, `hero` + any string	—	MIO-3134/MIO-3227/MIO-3335/MIO-3278 — region-chrome setting, same regionChrome gate as ‘side’ above. ‘normal’ (unset default) is today’s fixed-logo chrome sizing; ‘hero’ is a larger tier mirroring kind:logo’s own ‘hero’ height step. ALSO accepts an absolute px NUMBER — freeform:true admits any number here; the consumer (prepare-panel-region.ts’s parseLogoSize) clamps it to [16,320] and falls back to ‘normal’ outside that range or for any other unrecognized value, the same [16,320] range kind:logo.height’s own numeric escape uses.
`name`	—	`string`	—	—	REVIEW: catalog-authoring-only narrative section slug (e.g. “the-struggle”) — generic across kinds via the same additive fallback as slot/tab_label. Not consumed by the mio-hub renderer. See the shared:structural top-level description for the full name-collision + scope note.
`role`	—	`string`	`connect`, `reveal`, `prove`, `close`	—	REVIEW: catalog-authoring-only narrative-arc role tag (which beat of the sales-page arc this section plays). Distinct vocabulary from kind:field.core.role — see the shared:structural top-level description.
`salesMeta`	—	`object`	—	—	REVIEW: catalog-authoring-only per-section narrative metadata block, sibling of ‘name’/‘role’/‘slot’. Not consumed by the mio-hub renderer — pure recipe-authoring documentation. See the shared:structural top-level description for the full rationale and the owner-review flag.
`visibleFrom`	core	`string`	—	—	Names a scope key; the node (and its whole subtree) renders only while that scope value is PRESENT — anything but undefined, null, false or a blank/whitespace-only string (0 counts as present). With no data scope at all (an unbound node, the editor’s blank) it does not render. Read generically off ANY node’s settings by mio-hub’s renderer (renderer.tsx), before the node’s own dataSource is resolved — so the key is looked up in the scope the node sits IN, not one it binds. Same scope-key convention as labelFrom/iconFrom/disabledFrom. Lets a recipe show a part only when the data supplies it, e.g. hero.variants.playlist’s next-lesson thumbnail + divider, keyed off ‘nextLessonTitle’ (set only for a signed-in member). Unconditional additive key like tab_label/slot/visibility — validates on every kind regardless of ‘template’.

`kind:stack`

Key	Tier	Type	Allowed values	Default	Description
`gap`	presentational	`number`	`0`, `0.5`, `1`, `1.5`, `2`, `2.5`, `3`, `4`, `5`, `6`, `8`, `12`	—	Flex-column gap step.
`align`	presentational	`string`	`start`, `center`, `end`, `stretch`	—	Cross-axis alignment (items-*).
`width`	presentational	`string`	`full`, `1/2`, `1/3`, `1/4`, `2/3`, `3/4`, `fit`	—	Row/columns unification (MIO-2137): makes this stack behave as a responsive COLUMN inside a ‘row’ — full-width on mobile, its flex-grow ratio at/above the hub 660px container-query breakpoint. Requires an ancestor declaring @container/hub. “fit” is a DIFFERENT mechanism from the row-column members — a shrink-wrap (w-fit), for pairing a button with e.g. a doodle{variant:“underline”} at the button’s own edge width.
`surface`	presentational	`object`	object (surface)	—	Column-level visual surface (MIO-2335) — same TemplateSurface vocabulary as section roots, at the ‘node’ tint tier. CORRECTION (MIO-4182): ‘visibility’ IS honoured here — mio-hub’s useNodeSurface() (node-surface.tsx) folds ‘surface.visibility’ into this stack’s own resolved classes exactly like TemplateSurface does for a section root, independent of ‘template’. (The generic kind:content-card card body resolves it the same way — see kind:content-card.presentational.surface; mio-hub’s editor-only ‘honoursVisibility()’, src/lib/editor/canvas-node-category.ts, gates the canvas hide-chip affordance, not renderer support, and is not evidence either way here.) A prior revision of this description claimed the opposite (‘NOT honoured here, section-root-only’) — that was stale/wrong, not a renderer change; see shared:surface.visibility.
`mobileGap`	presentational	`number`	`1.5`, `3`, `4`, `6`	—	Opt-in mobile-narrower gap step (DS playlist header content column).
`grow`	presentational	`boolean`	—	—	Opt-in min-w-0 flex-1 so this stack fills the remaining width of a plain flex row beside a fixed-size sibling.
`px`	presentational	`number`	`0.5`	—	Opt-in 2px horizontal optical inset (px-0.5).
`justify`	presentational	`string`	`start`, `center`, `end`, `between`	—	Main-axis (vertical) distribution, mirroring row.justify. No “around” member.
`fitMobile`	presentational	`boolean`	—	`false`	Drops the ‘width:“fit”’ full-width-on-mobile flip (pairs with dropping the paired button’s own fullWidthMobile — the two move together).
`hideOnMobile`	presentational	`boolean`	—	`false`	Literal @max-[659px]/hub:hidden on the whole stack — hides the subtree below the hub container’s 660px breakpoint.

`kind:row`

Key	Tier	Type	Allowed values	Default	Description
`gap`	presentational	`number`	`1`, `1.5`, `2`, `2.5`, `3`, `4`, `5`, `6`, `8`, `12`, `section`	—	Flex-row gap step, plus the ‘section’ sentinel (gap-hub-section-gap, row.tsx:92) — matches RowSettings.gap’s mixed union; under the enum-subsumes-type rule the type field is not load-bearing here.
`align`	presentational	`string`	`start`, `center`, `end`, `stretch`	—	Cross-axis alignment (items-*).
`justify`	presentational	`string`	`start`, `center`, `end`, `between`, `around`	—	Main-axis distribution (justify-*).
`responsive`	presentational	`boolean`	—	—	Opt-in DS responsive-intent row: stacks below the container’s 660px, becomes a row (vertically centered) at/above it. Requires an ancestor declaring @container/hub.
`split`	presentational	`boolean`	—	—	Opt-in [&>]:flex-1 [&>]:min-w-0 so direct children divide the row evenly (DS 50/50 split).
`wrap`	presentational	`boolean`	—	—	Opt-in flex-wrap, used by the unified ‘row’ section’s body so 1-4 column stack children wrap.
`fullWidth`	presentational	`boolean`	—	—	Opt-in w-full so the row fills its parent’s width even inside an items-start flex column.
`mobileGap`	presentational	`number`	`1.5`, `3`, `6`	—	Opt-in mobile-narrower gap step.
`maxWidth`	presentational	`number`	`800`	—	Opt-in max-width cap (DS playlist header sections).
`reverse`	presentational	`boolean`	—	—	Opt-in desktop-only visual-order reverse (@[660px]/hub:flex-row-reverse). Mobile/stacked state unaffected.
`alignMobile`	presentational	`string`	`start`, `center`, `end`	—	Cross-axis alignment override applied only below the hub container’s 660px breakpoint.

`kind:grid`

Key	Tier	Type	Allowed values	Default	Description
`cols`	presentational	`number`	`1`, `2`, `3`, `4`, `6`, `12`	—	Column count (legacy variant only).
`gap`	presentational	`number`	`1`, `2`, `3`, `4`, `6`, `8`, `12`	—	Grid gap step (legacy variant only).
`variant`	presentational	`string`	`legacy`, `ds-content`, `responsive`	—	Layout variant. ‘legacy’ = flat grid with configurable cols/gap (default). ‘ds-content’ = DS-aligned content-page grid with its own section band + containment. ‘responsive’ = DS grid-section column progression (1->3@660->4@1024) WITHOUT its own section band — relies on an ancestor’s TemplateSurface for the @container/hub context.

`kind:carousel`

Key	Tier	Type	Allowed values	Default	Description
`slidesPerView`	core	`number`	—	`1`	Slides visible per view (drives static SLIDE_BASIS flex-basis classes; the primitive supports 1-4 with static Tailwind classes).
`loop`	core	`boolean`	—	`true`	Embla infinite-loop mode.
`show_dots`	presentational	`boolean`	—	`true`	Dot pagination indicator visibility.
`autoplay`	presentational	`boolean`	—	`false`	Embla autoplay plugin toggle.
`interval_ms`	presentational	`number`	—	—	Autoplay interval in milliseconds. Only meaningful when autoplay=true.
`bleed`	presentational	`boolean`	—	—	MIO-2678 full-bleed opt-in — the viewport spans the full section width; each slide’s content and the controls row carry the section gutter internally instead of a wrapping container.
`effect`	presentational	`string`	`slide`, `blur-fade`, `marquee`	`slide`	’blur-fade’: one slide per grid cell, 400ms fade+blur+translate, banked-pause autoplay. ‘marquee’: continuously drifting strip via real scrollLeft, pauses on hover/focus/touch/reduced-motion, ignores ‘bleed’. Both bypass Embla; a ‘quote’ child auto-switches to the DS grid-card presentation.
`marqueeSpeed`	presentational	`number`	—	`30`	Drift speed in px/s. ‘effect:“marquee”’ only.

`kind:horizontal-scroll`

Key	Tier	Type	Allowed values	Default	Description
`gap`	presentational	`number`	`2`, `4`, `6`, `8`	—	Inter-item gap step.
`snap`	presentational	`string`	`none`, `start`, `center`	`start`	CSS scroll-snap-align mode.
`itemWidth`	presentational	`string`	`auto`, `card`	—	‘card’ fixes each item wrapper to a DS card width (~300px, the ‘compact’ scroll recipe). ‘auto’ (default) leaves sizing to the child’s own layout.

`kind:tabs`

No settings. The Tabs component reads NO settings of its own (PRIMITIVE_DEFAULTS explicitly documents this: “tabs — the component reads no settings at all”). Its per-child tab label comes from shared:structural’s tab_label on each CHILD’s own settings, not from a tabs-kind setting.

`kind:container`

Key	Tier	Type	Allowed values	Default	Description
`padding`	presentational	`number`	`0`, `2`, `4`, `6`, `8`, `12`, `16`	—	Padding scale.
`background`	presentational	`string`	`default`, `muted`, `accent`	—	Simple background token — UNRELATED to shared:background/TemplateSurface; this is container.tsx’s own small enum.
`rounded`	presentational	`boolean`	—	—	Opt-in rounded corners.
`maxWidth`	presentational	`string`	`content`, `search`, `4xl`, `6xl`, `7xl`	—	Content-width cap + gutter. ‘content’ is the DS gutter-outside-cap idiom (MIO-2128) that pairs with shared:surface.padding=‘section’ on an ancestor surface.

No PRIMITIVE_DEFAULTS entry (container: {}) — the DS-intended maxWidth:‘content’ default has NO inline ’??’ fallback in container.tsx, deliberately undeclared per that file’s own comment (would change rendering the moment MIO-2358 wires cascade layer 1).

`kind:content-card`

Key	Tier	Type	Allowed values	Default	Description
`actionFromScope`	core	`string`	—	—	Names a scope key (a data-source-injected Action object) that becomes this card’s stretched-link navigation target when the content-node/playlist-target-derived href doesn’t resolve.
`action`	core	`object`	object (action)	—	Static fallback navigation target for this card’s stretched link — the shared kind:button Action shape (type/value/params). Priority order (same fallback direction kind:button already uses — dynamic/bound beats static): the bound content-node/playlist-target-derived href wins first, then ‘actionFromScope’ when it resolves to a valid Action, then this static ‘action’ as the last resort.
`surface`	presentational	`object`	object (surface)	—	Generic-card-body visual surface (MIO-2335), ‘node’ tint tier, applied to the outer role=group wrapper. Only affects the generic (NodeRenderer) card body — NOT the delegated HubPlaylistCard path (hub_playlists scope), which supplies its own chrome. CORRECTION (MIO-4182): nested ‘visibility’ IS honoured for the generic card body — content-card.tsx (src/components/primitives/containers/content-card.tsx) resolves this surface through the SAME useNodeSurface() kind:stack uses, and that hook unconditionally folds ‘surface.visibility’ into its returned ‘className’ (node-surface.tsx); content-card applies that className whenever ‘applySurface’ (‘!isPlaylistCard’) is true, which is every generic (non-hub_playlists) card. The ONE true exception is the delegated HubPlaylistCard path (hub_playlists scope): it supplies its own card chrome and never applies the resolved surface className/style at all, so a nested ‘surface.visibility’ set there has no render effect. A prior revision of this description claimed the opposite for content-card as a whole (‘NOT currently read by content-card’s renderer’) — that was stale/wrong, and wrongly cited mio-hub’s editor-only ‘honoursVisibility()’ (src/lib/editor/canvas-node-category.ts, gates the canvas hide-chip affordance) as if it were renderer evidence; it isn’t — see shared:surface.visibility. A hub_playlists card — or any node whose kind has no ‘surface’ settings key at all — that needs show/hide should use the generic top-level ‘visibility’ key (shared:structural.visibility) instead.
`newTab`	presentational	`boolean`	—	`false`	Opens the resolved href in a new tab.

`kind:accordion`

Key	Tier	Type	Allowed values	Default	Description
`expansion`	core	`string`	`single`, `multiple`	—	Single vs multiple simultaneously-open panels.
`defaultExpanded`	core	`array`	—	—	Node ids expanded by default.

`kind:video`

Key	Tier	Type	Allowed values	Default	Description
`embed_type`	core	`string`	`native`, `iframe`	`native`	’native’ renders an HTML5 <video>; ‘iframe’ renders a sandboxed <iframe> gated through isAllowedEmbedUrl (an unlisted host renders an inline error, not the iframe).
`fileId`	core	`string`	—	—	File id to load (alternative binding path to ‘value’). When set, the video element plays that hub library file through the hub player (poster from the file, HLS, progress tracking) instead of the ‘value’ URL. ‘fileId’ wins over ‘value’ when both are set.
`controls`	presentational	`boolean`	—	`true`	Native <video controls> attribute.
`autoplay`	presentational	`boolean`	—	`false`	Autoplay toggle.
`loop`	presentational	`boolean`	—	`false`	Loop toggle.
`muted`	presentational	`boolean`	—	`true`	Muted toggle.
`maxWidth`	presentational	`number`	—	—	Per-node MAX-width cap in px for the video box, centred in its column. Same clamp/behaviour contract as kind:image’s maxWidth (MIO-4112): the renderer clamps it to [16, 1440] and applies it via inline ‘max-width’; it is always a MAX, so the video fills its column up to the cap and shrinks below it on narrow viewports. No enum presets here — kind:image’s 352/128 members are DS-measured image-specific caps that don’t apply to video; this is a plain freeform number, same shape as kind:media-slot’s ‘width’.
`radius`	presentational	`['string', 'number']`	`control`, `control-l`, `m` + any string	—	The player frame’s corner radius — same contract as kind:image’s radius (ui/thumbnail ‘radius’): ‘control’ (0.5× hub radius), ‘control-l’ (0.6×, the default the hub renderer applies), ‘m’ (1× hub radius). Presets follow the hub-wide corner-radius setting. ALSO accepts an absolute px NUMBER (MIO-4112) — freeform:true admits any number here; the renderer clamps it to [0,200] and applies it via inline ‘border-radius’, so it deliberately does NOT follow the hub radius. 0 = square corners. A per-video number overrides the hub-wide radius for that video only. Any other unrecognized value falls back to ‘control-l’.
`poster`	presentational	`string`	—	—	Custom thumbnail shown before playback, overriding the library file’s own thumbnail (fileId) or standing in for a direct video URL (value). A durable hub image URL, validated like image sources (isValidImageUrl). Unset: a library file shows its own thumbnail; a direct URL shows the first frame; an embedded provider (YouTube, Vimeo) shows its own and ignores this.
`aspectRatio`	presentational	`string`	`16:9`, `9:16`, `1:1`	`16:9`	MIO-4374 appearance follow-up — the video box’s shape: landscape (16:9), portrait (9:16) or square (1:1), mirroring the legacy hub’s per-video aspect-ratio choice (Hubs Editor Appearance panel, resources/2.0/js/modules/Hubs/Editor/Pages/Sidebar/Elements/Appearance/Video.vue — tabs ‘landscape’/‘portrait’/‘square’ storing settings.appearance.aspectRatio) and its runtime box (resources/modules/hub/js/Components/Section/Row/Items/Video.vue’s column-video__media—{landscape\|portrait\|square} modifier). Applies to every source (library player, native <video>, iframe embed) and the no-source placeholder alike. Independent of ‘maxWidth’ above: this field only shapes the box’s aspect ratio — it does NOT itself cap or centre the box. An author pairing a portrait/square ratio with an explicit ‘maxWidth’ is how a tall box is kept from spanning the full column width (and so becoming disproportionately tall) on a wide desktop viewport; ‘aspectRatio’ alone never auto-caps. Absent renders EXACTLY as today: the native/library-player paths force no fixed-ratio box at all (today’s intrinsic/no-cap sizing, unchanged); the iframe embed path already defaults to a 16:9 box unconditionally and keeps doing so. The ‘default: 16:9’ above documents the catalog’s own authoring default (what a fresh author-facing control should start on) — it is not a behaviour change applied to existing saved nodes with no ‘aspectRatio’ key.

`kind:divider`

Key	Tier	Type	Allowed values	Default	Description
`spacing`	presentational	`number`	`0`, `2`, `4`, `6`, `8`	`4`	Vertical margin scale (my-*).
`variant`	presentational	`string`	`line`, `wave`	`line`	’wave’ — a drawn rule tiling at a fixed amplitude.
`orientation`	presentational	`string`	`horizontal`, `vertical`	`horizontal`	—
`size`	presentational	`string`	`small`, `normal`, `large`	`normal`	Wave wavelength/amplitude; ignored by variant:“line”.
`weight`	presentational	`number`	—	—	Stroke thickness, clamped [0.5,24]. No hard default — computed (1 for line, size-derived for wave) when unset.
`opacity`	presentational	`number`	—	`15`	Rule strength as CSS opacity (0-100).
`inset`	presentational	`number`	—	`0`	Percent, clamped [0,50]. Shortens the rule from each end.
`dashed`	presentational	`boolean`	—	`false`	Renders the rule dashed instead of solid. Applies to variant ‘line’; ignored by ‘wave’.
`textTheme`	presentational	`object`	object (textTheme)	—	See shared:textTheme. The line’s colour, still drawn at ‘opacity’. Unset = Auto: the current colour (the surrounding ink), exactly as without the key.

`kind:progress-ring`

Key	Tier	Type	Allowed values	Default	Description
`value`	core	`number`	—	—	Static 0-100 progress value.
`valueFrom`	core	`string`	—	—	Names a scope key holding a numeric 0-100 progress value (MIO-2248); takes priority over the static ‘value’ when the scope value coerces to a finite number.
`label`	core	`string`	—	—	Accessible name for the progressbar role. Defaults to ‘Progress’.
`size`	presentational	`number`	—	`64`	Pixel diameter. DS ring sizes are 16 \| 24 \| 48 \| 64 \| 76, but the underlying type is an unconstrained number (ui/progress accepts any value) — not a hard enum.
`mobileSize`	presentational	`number`	—	—	Opt-in mobile pixel diameter — when set, renders TWO ring hosts that container-query-swap (>=660px shows ‘size’, <660px shows ‘mobileSize’), matching the DS’s dual-ring pattern rather than one ring that resizes.
`variant`	presentational	`string`	`default`, `white`	—	Surface variant. ‘default’ = light. ‘white’ = for dark/colourful surfaces.
`disabled`	presentational	`boolean`	—	—	Dims the ring.

`kind:headline`

Key	Tier	Type	Allowed values	Default	Description
`level`	core	`number`	`1`, `2`, `3`, `4`, `5`, `6`	`2`	Heading level 1-6, drives both the rendered tag and the DS type-scale size mapping (SIZE_BY_LEVEL).
`align`	presentational	`string`	`left`, `center`, `right`	`left`	Text alignment.
`weight`	presentational	`number`	`400`, `500`, `600`, `700`	`400`	Font weight. MIO-985 Thread B: default headlines are font-normal (400), not the old font-semibold.
`highlight`	presentational	`['string', 'array']`	—	—	Phrase(s) to emphasise — accent colour, no wash by default. Case-sensitive literal substring, every occurrence flagged.
`highlightUnderline`	presentational	`boolean`	—	—	Underlines HIGHLIGHTED runs only. No-op without ‘highlight’.
`highlightStyle`	presentational	`string`	`accent`, `wash`	`accent`	’wash’ = the strong marker wash (bg-hub-primary-bg-hover).
`size`	presentational	`string`	`title`, `large-title`, `xl-title`	—	Opt-in DISPLAY-size override — ‘level’ still owns semantics (heading tag, one-h1-dedupe). Landing/sales-page only — no hub PAGE should reach for large-title/xl-title.
`alignMobile`	presentational	`string`	`left`, `center`, `right`	—	Text-alignment override applied only below the hub container’s 660px breakpoint.
`format`	presentational	`string`	`plain`, `markdown`	`plain`	Opt-in interpretation of ‘value’. ‘plain’ (default) renders ‘value’ verbatim as plain text — existing trees are unaffected. ‘markdown’ renders ‘value’ on ONE line inside the heading element: bold/italic/underline/strikethrough/highlight and links render as inline marks (bold, italic, ++underline++, ~~strikethrough~~, ==highlight==; the highlight wears the same wash as kind:text’s); paragraphs, lists, headings, blockquotes, code and tables render as inline text — their words are kept, the block structure is dropped, and separate blocks (and hard line breaks) join with a space. Horizontal rules and images never render; an inline HTML tag is stripped but its text is kept, an HTML block is removed along with its content. Only absolute http(s)/mailto:/tel: links and /, #, ?-prefixed relative links become anchors — anything else (e.g. www.example.com, a bare relative path, //host, sms:) renders as plain text. ‘highlight’ (with ‘highlightUnderline’/‘highlightStyle’) still applies on top of the markdown output, per plain-text run: a phrase that crosses a mark boundary does not match. The hub editor writes ‘markdown’ on the first inline edit of a headline that is not inside a data-bound subtree (an ancestor, or the node itself, carrying ‘dataSource’/‘repeat’); a headline inside one is edited as plain text.
`textTheme`	presentational	`object`	object (textTheme)	—	See shared:textTheme. The Text theme — the one colour the WHOLE heading is painted; unset = Auto (the surrounding section surface’s own ink, per the MIO-492 auto-contrast / ‘surface.ink’, exactly as without the key). Same semantics as kind:text.textTheme. ‘highlight’ runs and inline marks keep their own treatment (‘accent’ runs stay the primary colour; a wash keeps full ink over its wash).

`kind:text`

Key	Tier	Type	Allowed values	Default	Description
`labelFrom`	presentational	`string`	—	—	Names a scope key whose STRING value replaces the static text (node.value) when present and non-empty (whitespace-only counts as empty) — the same convention as ‘kind:button.core.labelFrom’. Unset, or a missing/empty scope value, renders ‘value’ exactly as without the key. Presentational (a native client MAY ignore it — it then renders the authored ‘value’, a graceful degradation), which also keeps kind:text a purely presentational kind. Only meaningful inside a data-bound subtree (an ancestor or the node itself carrying ‘dataSource’). Used by ‘hero.variants.continue”s eyebrow (‘continueLabel’: “Start here” when the hero shows its fallback playlist’s first lesson, absent otherwise so the authored “Continue watching” shows).
`align`	presentational	`string`	`left`, `center`, `right`	`left`	Text alignment.
`size`	presentational	`string`	`body`, `small`, `body-big`	—	2-size DS scale (MIO-985 Thread B). “body-big” is a third opt-in step for callout/bridge lines; no responsive container-query shrink (unlike body/small).
`weight`	presentational	`number`	`400`, `500`, `600`, `700`	—	Opt-in font-weight. Unset = normal.
`clamp`	presentational	`number`	—	—	Opt-in line clamp (DS HubDescription maxLines). Unconstrained number type, but only small integers 1-6 are honoured — any other value is defensively ignored by the renderer (no error, silent no-op), not enforced as a hard enum.
`marginBottom`	presentational	`number`	`0`, `1`, `2`, `3`, `4`, `6`, `8`	—	Opt-in bottom margin (mb-* scale).
`muted`	presentational	`boolean`	—	—	Opt-in muted-text override (text-foreground/75). Only applies on the non-clamped render path — the clamped path already renders muted unconditionally. Still honoured by the renderer, but no longer offered in the hub editor’s appearance popover (Text theme / ‘textTheme’ is the only colour control there). A set ‘textTheme.tone’ wins over it.
`tone`	presentational	`string`	`primary`	—	Legacy opt-in colour tone, kept for back-compat — the shipped eyebrow recipes and older trees carry it. ‘primary’ applies text-primary and wins over ‘muted’ when both are set. Superseded by ‘textTheme’: new authoring writes ‘textTheme’ instead, and a set ‘textTheme.tone’ wins over this key.
`textTheme`	presentational	`object`	object (textTheme)	—	See shared:textTheme. The Text theme — the one colour the WHOLE node’s copy is painted; unset = Auto (the surrounding section surface’s own ink, per the MIO-492 auto-contrast / ‘surface.ink’, exactly as without the key). A set ‘textTheme.tone’ wins over ‘muted’ and the legacy ‘tone’, applies on the clamped render path too (replacing its default 75% ink), and with ‘variant: ‘eyebrow” replaces only the eyebrow’s colour while with ‘variant: ‘bullet” it paints the whole row (glyph and hairline follow the row’s ink). Inline marks (e.g. a ‘==highlight==’ wash) keep their own treatment.
`highlight`	presentational	`['string', 'array']`	—	—	Search-highlight wash. Mutually exclusive with ‘clamp’ (clamp wins).
`highlightTone`	presentational	`string`	`wash`, `strong`	`wash`	’strong’ = one ramp higher.
`italic`	presentational	`boolean`	—	—	Opt-in italic. Independent of ‘highlight’.
`variant`	presentational	`string`	`eyebrow`, `bullet`	—	Opt-in bundle, wins over size/weight/color. ‘eyebrow’ — uppercase, letter-spaced label above a headline. ‘bullet’ — a DS list-item row (glyph + top hairline, MIO-3314). No effect on the clamped render path.
`alignMobile`	presentational	`string`	`left`, `center`, `right`	—	Text-alignment override applied only below the hub container’s 660px breakpoint.
`format`	presentational	`string`	`plain`, `markdown`	`plain`	Opt-in interpretation of ‘value’. ‘plain’ (default) renders ‘value’ verbatim as plain text — existing trees are unaffected. ‘markdown’ renders ‘value’ as a restricted markdown subset: paragraphs (blank line), hard line breaks, bold, italic, links, bullet and ordered lists, and horizontal rules. Headings, blockquotes, and code (inline, fenced, and indented) render as plain paragraphs or inline text, never their own elements. ‘~~strikethrough~~’ (or ‘~~single~~’ tildes), ‘++underline++’ and ‘==highlight==’ render as inline marks (a backslash-escaped marker such as ‘C\+\+’ stays literal); table syntax renders as literal text; an inline HTML tag is stripped but its text is kept, an HTML block is removed along with its content; images never render. Only absolute http(s)/mailto:/tel: links and /, #, ?-prefixed relative links become anchors — anything else (e.g. www.example.com, a bare relative path, //host, sms:) renders as plain text. Markdown formatting applies on every non-clamped node regardless of whether ‘highlight’ or a ‘variant’ bundle is set on the same node; a clamped node (‘clamp’ set) renders this markdown subset the same way.

`kind:image`

Key	Tier	Type	Allowed values	Default	Description
`alt`	core	`string`	—	—	Accessible alt text.
`action`	core	`object`	object (action)	—	Static navigation target for a STANDALONE image only — the shared kind:button Action shape (type/value/params). Do not set this on an image nested inside a linked content-card body: the card body re-enables nested anchors, so a linked image inside a linked card would win the click and produce two competing navigation targets — put the action on the card (kind:content-card.action) instead. Mutually exclusive with ‘lightbox’: ‘action’ wins at runtime when both would apply, and the catalog validator rejects a node that sets both.
`lightbox`	presentational	`boolean`	—	—	Opt-in click-to-expand lightbox.
`aspectRatio`	presentational	`string`	`16:9`, `4:3`, `1:1`, `auto`	`16:9`	Fixed aspect preset, mapped to ui/thumbnail’s ‘aspect’ prop. ‘4:3’ has no direct thumbnail preset — mapped to ‘preview’ plus an override class.
`objectFit`	presentational	`string`	`cover`, `contain`	`cover`	’contain’ takes priority over aspectRatio and always resolves to ui/thumbnail’s natural (shrink-wrap) mode.
`radius`	presentational	`['string', 'number']`	`control`, `control-l`, `m` + any string	—	DS thumbnail radius preset (ui/thumbnail ‘radius’): ‘control’ (0.5× hub radius), ‘control-l’ (0.6×, the leaf default), ‘m’ (1× hub radius). Presets follow the hub-wide corner-radius setting. ALSO accepts an absolute px NUMBER (MIO-4112) — freeform:true admits any number here; the renderer (ui/thumbnail.tsx) clamps it to [0,200] and applies it via inline ‘border-radius’, so it deliberately does NOT follow the hub radius. 0 = square corners. A per-image number overrides the hub-wide radius for that image only. Any other unrecognized value falls back to ‘control-l’.
`backdrop`	presentational	`boolean`	—	`false`	Opt-IN opaque thumbnail backdrop (MIO-288 bg-background fill under the image). Unset (the new default, owner decision 2026-09-30, was opt-out under MIO-3086) renders the thumbnail surface transparent, so intentionally transparent artwork sits on the section surface underneath. Set ‘true’ for a picture whose transparent pixels would otherwise composite with mismatched content below it. No-op without a src (MIO-3086).
`maxWidth`	presentational	`number`	`352`, `128` + any string	—	Per-node MAX-width cap in px. The two enum members are the DS-measured caps (352 = the narrative one-column sections’ image sub-cap, 128 = the deliverable-card icon-box cap) and render via their max-w-* classes. ALSO accepts any other px NUMBER (MIO-4112) — freeform:true admits any number; the renderer (image.tsx) clamps it to [16, 1440] and applies it via inline ‘max-width’. It is always a MAX: the image fills its column up to the cap and shrinks below it on narrow viewports, so a custom value cannot break a mobile layout. alignX places the capped box (mx-auto when ‘center’). Non-number values are rejected by the validator.
`alignX`	presentational	`string`	`center`, `start`	`center`	Horizontal alignment of the maxWidth-capped box within its wider cell. No-op without maxWidth.
`objectPosition`	presentational	`string`	`center`, `top`, `bottom`, `left`, `right`, `top-left`, `top-right`, `bottom-left`, `bottom-right`	`center`	The visible anchor of the picture when it is cropped (‘objectFit: cover’) — which part of the image survives the crop, as a CSS object-position keyword pair (‘top-left’ = left top, etc.). The nine anchors of the editor’s position picker. No effect with ‘objectFit: contain’, where the whole picture is shown. Unset = centre.
`newTab`	presentational	`boolean`	—	`false`	Opens the resolved href in a new tab.

EXCLUDES ‘width’/‘height’ from ImageSettings — the hub interface comment states they are ‘presently no-ops’ (no longer forwarded to the rendered <img>, ui/thumbnail owns that element with no sizing passthrough), kept on the TS contract only for BE-served-data forward-compat parsing, not for authoring. Per the honesty policy, a key with no rendering effect does not enter the vocabulary. Same reasoning removed ‘outline’ (owner decision 2026-09-30, retired image hairline): image.tsx now hardcodes ‘outline={false}’ on ui/thumbnail regardless of the setting; the TS ‘ImageSettings.outline?’ field stays on the hub contract only as a retired, documented-ignored field for old saved trees, but the key itself no longer exists in this vocabulary. ‘kind:media-slot”s own ‘outline’ is unaffected — that renderer still applies it.

`kind:button`

Key	Tier	Type	Allowed values	Default	Description
`action`	core	`object`	object (action)	—	Canonical navigation target object.
`href`	core	`string`	—	—	@deprecated legacy alias for ‘action’ (a bare URL string). Still read as a fallback.
`actionFromScope`	core	`string`	—	—	Names a scope key (a data-source-injected Action object) used INSTEAD of the static action/href when the scope value resolves to a valid Action.
`labelFrom`	core	`string`	—	—	Names a scope key whose STRING value replaces the static label (node.value) when present and non-empty.
`iconFrom`	core	`string`	—	—	Names a scope key whose STRING value — a hub sprite icon name — replaces the static leading ‘icon’ when present and a known sprite name. Falls back to the static ‘icon’ when unset, or when the scope value is missing, empty, or not a sprite name. Mirrors ‘labelFrom”s convention; lets a data-bound CTA’s glyph follow the content’s state (e.g. ‘repeat’ for Restart, ‘calendar’ for a scheduled playlist) instead of one fixed glyph.
`disabledFrom`	core	`string`	—	—	Names a scope key whose value, when exactly ‘true’, renders the button exactly as ‘disabled: true’ does — non-interactive, no Link/anchor wrapper, no action/onClick — for a data-bound CTA whose locked state comes from the data (e.g. a scheduled playlist). Any other value (absent, false, non-boolean) leaves the static ‘disabled’ setting in charge; it can only disable, never re-enable a statically disabled button.
`planGroupId`	core	`string`	—	—	Id of the plan-group whose selected plan-card priceId is appended to this button’s resolved href as ?price_id=…. Resolves like plan-price groupId (exact id, else the page’s sole plan-group). No-op when unset, when the group has no selection, or when the selected card carries no priceId.
`variant`	presentational	`string`	`primary`, `secondary`, `ghost-light`, `overlay-light`, `destructive`, `link`, `muted`, `ghost-dark`, `overlay-dark`, `ghost-primary`	`primary`	Visual style, forwarded 1:1 to ui/button’s variant prop. ‘ghost-primary’ — same silhouette as ghost-dark, for use ON a solid bg-primary surface (adaptive text-primary-foreground instead of hardcoded text-white, design-system.md §4c). Back-compat: older trees carry ‘variant’, and it is still honoured while ‘style’ and ‘background’ are both unset. New authoring (the hub editor’s button popover) writes ‘style’ + ‘background’ (+ ‘gradient’ / ‘textTheme’) instead; once either ‘style’ or ‘background’ is set they describe the button’s look and ‘variant’ is ignored.
`style`	presentational	`string`	`fill`, `outline`	—	The Style axis. No default: while ‘style’ AND ‘background’ are both unset, the button’s look is decided by the legacy ‘variant’ field instead (‘secondary’ renders outlined, every other variant renders filled), for back-compat. Setting ‘style’ explicitly always wins over ‘variant’, even with ‘background’ still unset — e.g. ‘{variant:‘secondary’, style:‘fill’}’ switches a legacy secondary button from its outlined look to the primary fill, so an explicit ‘style’ is never redundant with silence. ‘fill’ = a solid button painted by ‘background’ (Auto when ‘background’ is unset too). ‘outline’ = no fill: a bordered button whose border and label take the colour the fill would have been (the resolved ‘background’), unless ‘textTheme’ sets the label ink.
`background`	presentational	`object`	object (background)	—	See shared:background. The button’s fill. A button honours only: ‘none’ / unset = Auto (today’s primary fill, with the on-primary-band inversion); ‘color’ with ‘token’ ‘primary’ \| ‘secondary’ \| ‘white’; ‘custom-color’ (‘value’ hex); ‘gradient’ (resolved via the sibling ‘gradient’). ‘tint’, ‘image’, ‘gradient-glow’, ‘gradient-tint’ and any other ‘token’ are NOT honoured on a button — the renderer treats them as Auto.
`gradient`	presentational	`object`	object (gradient)	—	See shared:gradient. Only consulted when ‘background.type’ is ‘gradient’ — the same schemes and colour math as a section gradient.
`textTheme`	presentational	`object`	object (textTheme)	—	See shared:textTheme. The label and icon ink. Unset = Auto, decided by the button’s own ‘style’/‘background’ — not one luminance rule: Fill + Auto/primary token uses the DS on-primary ink rule; Fill + white token always takes the brand-secondary ink (never primary); Fill + gradient is always white, with no luminance check. Outline has no fill to derive from, so the ink follows the resolved border colour (the token/custom colour), or the ambient surface foreground for Auto.
`size`	presentational	`string`	`sm`, `md`, `lg`	`md`	Leaf-facing size name, mapped to ui/button size tokens (sm->sm, md->default, lg->lg).
`newTab`	presentational	`boolean`	—	`false`	Opens the resolved href in a new tab.
`icon`	presentational	`string`	—	—	Leading icon (hub sprite name), rendered before the label.
`iconRight`	presentational	`string`	—	—	Trailing icon (hub sprite name), rendered after the label.
`border`	presentational	`object`	—	—	A line around the button, on every style (fill and outline). Unset = the style’s own edge: none on Fill, the 1px ring on Outline. Set, it is drawn INSIDE the button’s edge on its fill layer — it never changes the button’s size or layout — and follows the button’s corners (‘borderRadius’) and its hover grow. On Outline it IS the ring: ‘width’ sets the ring’s thickness, including a gradient ring (cut to the same even width on every side). The hub editor’s Advanced options → Border card (switch off = key unset).
`borderRadius`	presentational	`string`	`none`, `sm`, `md`, `lg`, `full`, `hub-s`, `hub-m` + any string	—	The button’s corner radius, over its size’s own control radius. Same vocabulary as shared:surface.borderRadius: a named radius token OR a raw CSS escape-hatch string — one length (‘12px’) or the four-corner shorthand (‘12px 12px 0px 0px’, top-left top-right bottom-right bottom-left). Applies to the whole button — fill, ring, border and focus ring follow it. Unset = the size’s own radius. The hub editor’s Advanced options → Corner radius card.
`shadow`	presentational	`string`	`none`, `sm`, `md`, `lg`, `xl`	—	A drop shadow under the button — the same named tiers as shared:surface.shadow, drawn with the hub’s ring-less drop-shadow tokens (it adds no edge line of its own, and never alters the Outline ring or ‘border’). NO raw-CSS escape hatch; an unrecognized value draws no shadow. Unset / ‘none’ = no shadow. The hub editor’s Advanced options → Drop shadow card (Small ‘sm’ / Medium ‘md’ / Large ‘lg’).
`disabled`	presentational	`boolean`	—	—	Renders a non-interactive disabled button: no Link/anchor wrapper, no action/onClick. Used for locked/drip-scheduled CTAs.
`fullWidthMobile`	presentational	`boolean`	—	`false`	Full-width, tap-friendly button below the hub 660px container-query breakpoint.
`compactMobile`	presentational	`boolean`	—	`false`	Steps the ‘md’ size from 40px to 36px below the hub 659px breakpoint. Scoped to size:‘md’ only.

`kind:icon`

Key	Tier	Type	Allowed values	Default	Description
`size`	presentational	`number`	`16`, `20`, `24`, `32`, `48`	`24`	Pixel size, mapped to the nearest ui/icon-valid size (12\|14\|16\|20\|24\|32) via toIconSize().
`sizePx`	presentational	`number`	—	—	Icon size in px set by the editor slider, clamped [12,120]; when set it wins over size; unset → size as before.
`color`	presentational	`string`	`default`, `primary`, `muted`	`default`	Legacy color token. Used only when ‘textTheme’ is unset — a set ‘textTheme’ wins. The hub editor no longer offers this control (superseded by ‘textTheme’); existing stored values keep rendering exactly as before.
`textTheme`	presentational	`object`	object (textTheme)	—	See shared:textTheme. The icon’s ink. Unset = the legacy ‘color’ token decides (back-compat, unchanged render); an absent/default ‘color’ too falls back to ‘default”s current-foreground treatment. A set ‘textTheme.tone’ wins over ‘color’.
`strokeWidth`	presentational	`number`	—	—	Opt-in stroke-width override, passed straight to ui/icon and rendered exactly as stored — no renderer clamp, unchanged behavior. The hub editor’s Advanced options offers 0.5–8 in 0.5 steps and bounds new values to that range before they’re stored (owner raised the cap from 0.5–5); unset preserves ui/icon’s own default (1.5). A value already on disk (in or out of the current range) keeps rendering exactly as given.

`kind:field`

Key	Tier	Type	Allowed values	Default	Description
`name`	core	`string`	—	—	Required. The scope key this field reads (scope[name]).
`text`	core	`string`	—	—	Optional static text rendered instead of ‘scope[name]’ when set to a non-blank string (whitespace-only counts as unset). Unset, empty, or whitespace-only falls back to ‘scope[name]’ — byte-identical to today’s behavior. When set, the field renders even if ‘scope[name]’ is nullish — ‘text’ takes precedence over ‘optional’ and the dev missing-value marker (see ‘kind:field.presentational.optional’). Everything else about the field is unchanged: role/size/weight/clamp styling still applies, and ‘actionFromScope’ still resolves its link from the scope regardless of which text source is rendered. Intended for a standalone heading field, not a title field inside a content-card — the card’s accessible name and hover chip still read the scope title, not this field’s ‘text’.
`role`	core	`string`	`title`, `subtitle`, `meta`, `body`	—	Semantic role within the parent template — the cascade resolver applies role-specific defaults (e.g. title gets heading-weight styling), all overridable via the explicit settings below.
`actionFromScope`	core	`string`	—	—	Title hover-chevron affordance — names a scope key (an Action object) that, when valid, wraps this field’s text in a Link plus a decorative hover chevron.
`size`	presentational	`string`	`title`, `subtitle`, `body-big`, `body`, `body-small`	—	Explicit size override. Falls back to the role default, then ‘body’.
`weight`	presentational	`number`	`400`, `500`, `600`, `700`	—	Explicit font-weight override. Falls back to the role default (title only), then unset.
`align`	presentational	`string`	`left`, `center`, `right`	—	Text alignment.
`muted`	presentational	`boolean`	—	—	Explicit muted-text override (text-foreground/75). Falls back to the role default.
`tone`	presentational	`string`	`default`, `primary`	—	Opt-in color tone. ‘primary’ wins over ‘muted’ when both are set. ‘default’ is the explicit no-tone path — same rendered result as leaving ‘tone’ unset.
`clamp`	presentational	`number`	—	—	Opt-in line clamp, routes through ui/expandable-text. Only integers 1-6 are honoured; other values are defensively ignored (no error).
`marginBottom`	presentational	`number`	`0`, `1`, `2`, `3`, `4`, `6`, `8`	—	Opt-in bottom margin (mb-* scale).
`icon`	presentational	`string`	—	—	Opt-in leading hub sprite glyph name (DS meta-chip spec). Loosely typed string (not IconName) — an unknown name safely renders an empty <use> reference rather than crashing.
`ring`	presentational	`object`	—	—	Opt-in leading progress-ring chip (DS ‘Completed’ chip spec) instead of ‘icon’. Mutually exclusive with ‘icon’ in practice — if both set, ‘ring’ wins. MIO-4331: ‘valueFrom’ binds the ring’s value to a scope key (the DS in-progress “{N}% complete” meta chip).
`fade`	presentational	`boolean`	—	—	Opt-in single-line horizontal fade-truncate. Ignored on the clamped render path — clamp wins if both are set.
`optional`	presentational	`boolean`	—	—	When ‘text’ is unset (or blank) and the bound scope value is nullish, renders null in EVERY environment (no dev ‘[missing: name]’ marker) — unless a non-blank ‘text’ is set, which always renders regardless of ‘optional’.

`kind:media-slot`

Key	Tier	Type	Allowed values	Default	Description
`name`	core	`string`	—	—	Required. The scope key this slot reads (scope[name]).
`alt`	core	`string`	—	—	Accessible alt text.
`preset`	core	`string`	`thumbnail-160`, `medium-720`, `large-1440`, `webp-medium`	—	Opt-in poster preset — when set AND scope.poster_variants is a non-empty object, resolves the URL via the pickPoster fallback chain instead of reading a ready scope[name] URL.
`aspectRatio`	presentational	`string`	`16:9`, `4:3`, `1:1`, `auto`	—	Same styling contract as kind:image’s aspectRatio.
`objectFit`	presentational	`string`	`cover`, `contain`	—	Same styling contract as kind:image’s objectFit.
`radius`	presentational	`['string', 'number']`	`control`, `control-l`, `m` + any string	—	Same styling contract as kind:image’s radius — presets follow the hub radius; an absolute px NUMBER 0–200 (MIO-4112) is clamped and applied inline, overriding the hub radius for this slot only.
`outline`	presentational	`boolean`	—	—	Opt-in shadow-hub-xs outline. Media-slot-only vocabulary (MIO-2137) — the equivalent ‘kind:image’ key was removed for a no-op hub renderer (honesty policy); this slot’s own hub renderer still applies it.
`width`	presentational	`number`	—	—	Opt-in FIXED pixel width for a small tile beside a growing flex sibling. Height derives from the existing aspectRatio class, not set separately.
`progressBar`	presentational	`boolean`	—	—	Opt-in in-progress watch-progress bar overlay, reading scope.progressPercent. Do NOT also set on a contentCardChild()‘s media-slot (content-card.tsx already renders its own bar) — would double-render.
`progressRing`	presentational	`boolean`	—	—	Opt-in playlist progress ring centred over the thumbnail (legacy Searchie featured-playlist ‘progress-lock’), reading scope.progressPercent — on a playlist COLLECTION scope that is the whole-playlist aggregate. Renders only while that value is a number above 0 (legacy shows no ring at 0% or without progress data, e.g. a signed-out viewer or an unbound slot); at 100 the ring draws the DS completed disc + tick. A 76px ring (60px below the hub 660px container breakpoint — the DS playlist-title ring sizes) on an opaque card-coloured disc. Independent of ‘progressBar’ (a per-lesson bar); set one or the other. MIO-4331 (0.24.5): no shipped recipe sets it any more — progress and completion live in the meta row (‘field’ ‘ring.valueFrom’ “{N}% complete” / the ‘status’ “Completed” chip), and a ring never draws a check at 100 on the playlist hero; the key stays valid for stored trees.

`kind:cta-slot`

Key	Tier	Type	Allowed values	Default	Description
`name`	core	`string`	—	—	Required. The scope key this slot reads (scope[name]), expected shape {label, href?, action?}.
`variant`	presentational	`string`	`primary`, `secondary`	`primary`	Visual style, forwarded to buttonVariants().

`kind:file-player`

Key	Tier	Type	Allowed values	Default	Description
`contentId`	core	`string`	—	—	Content-node id to load.
`fileId`	core	`string`	—	—	File id to load (alternative binding path to contentId).
`playlistId`	core	`string`	—	—	Playlist id context for the player’s up-next/queue behavior.

`kind:file-attachments`

Key	Tier	Type	Allowed values	Default	Description
`attachments`	core	`array`	—	—	Attachment list to render (src/lib/api/content/types.ts Attachment — an API-owned shape; items are represented opaquely here, not re-declared, since Attachment is not a page-tree settings type).
`contentId`	core	`string`	—	—	Content-node id, used to build download hrefs for legacy (non-file_id) attachments.

`kind:search-bar`

Key	Tier	Type	Allowed values	Default	Description
`placeholder`	core	`string`	—	—	Passes through to the spotlight trigger’s label. Non-string values are left undefined (SearchSpotlightTrigger’s own fallback applies).

`kind:quote`

Key	Tier	Type	Allowed values	Default	Description
`showAvatar`	presentational	`boolean`	—	`true`	Show the member’s photo beside their name; off centres name+profession under the quote.
`textTheme`	presentational	`object`	object (textTheme)	—	See shared:textTheme. The quote’s ink — the quote text, the attribution name, and the role all take the resolved colour. Unset = Auto (the surrounding section surface’s own ink, per the MIO-492 auto-contrast / ‘surface.ink’, exactly as without the key). The attribution role stays a derived muted opacity of the resolved colour (mirrors the unset-state relationship between the quote text and the role, not a separate independently-set tone).

`kind:banner`

Key	Tier	Type	Allowed values	Default	Description
`sticky`	presentational	`boolean`	—	`false`	Pins the bar to the top of the viewport for the whole page (MIO-2734). ‘reveal:“after-scroll”’ forces sticky on regardless of this flag.
`tone`	presentational	`string`	`warning`, `info`	`info`	Drives the notice-bar tint AND the ARIA role (alert/status).
`appearance`	presentational	`string`	`tint`, `solid`, `page`	`tint`	’page’ is the DS nav-bar frosted-chrome surface (page bg + blur), tone-independent — used by the scroll-revealed action bar, not the tint/solid urgency-bar family.
`justify`	presentational	`string`	`center`, `between`	`center`	’between’ is the DS nav-bar row shape (logo left / CTA right).
`contentWidth`	presentational	`string`	`full`, `content`	`full`	’content’ caps the row to max-w-hub-content + the section gutter, landing its edges at the same x position as the page’s content column — the surface itself stays full-bleed.
`reveal`	presentational	`string`	`always`, `after-scroll`	`always`	’after-scroll’ hides the bar until the page scrolls past the first viewport, forces sticky on, and paints at a lower z-index than an urgency banner above it.

`kind:countdown`

Key	Tier	Type	Allowed values	Default	Description
`title`	core	`string`	—	—	Deadline sentence override. Omit to auto-format from ‘value’ (an ISO date string), locale+timezone aware.
`expiredLabel`	core	`string`	—	`Registration is now closed`	Sentence shown once the deadline in ‘value’ has passed.
`ctaLabel`	core	`string`	—	—	Built-in CTA label — only rendered when ‘size:‘small”.
`ctaAction`	core	`object`	—	—	Same Action pipeline as ‘button.action’ — paired with ‘ctaLabel’.
`size`	presentational	`string`	`small`, `large`	`large`	Doubles as the layout switch (cell strip vs deadline-sentence block).
`align`	presentational	`string`	`center`, `start`	`center`	—
`hideOnExpire`	presentational	`boolean`	—	`false`	Hide the whole widget once expired, instead of swapping to ‘expiredLabel’.

`kind:logo`

Key	Tier	Type	Allowed values	Default	Description
`height`	presentational	`['string', 'number']`	`normal`, `lg`, `hero` + any string	`normal`	’normal’=24px chrome-scale, ‘lg’=40px (28px mobile) mid-scale, ‘hero’=71px (48px mobile) content-scale. ALSO accepts an absolute px NUMBER (MIO-3227/MIO-3335) — freeform:true admits any number here; the renderer (logo.tsx, LOGO_HEIGHT_PX_MIN/MAX) clamps it to [16,320] and applies it via inline ‘style.height’ at every breakpoint (deliberately non-responsive, unlike the enum steps), falling back to ‘normal’ outside that range or for any other unrecognized value.
`src`	presentational	`string`	—	—	Per-node logo asset override. Absolute http(s) or same-origin-relative URL, validated same as isValidImageUrl (node-surface.tsx). An invalid or unset value falls back to the hub’s own branding logo_url.

`kind:theme-toggle`

No settings.

`kind:plan-group`

Key	Tier	Type	Allowed values	Default	Description
`label`	presentational	`string`	—	`Choose a plan`	aria-label on the radiogroup wrapping the plan-card children.

`kind:plan-card`

Key	Tier	Type	Allowed values	Default	Description
`defaultSelected`	presentational	`boolean`	—	—	Seeds selection when this is the first such child in a plan-group (or seeds the standalone local toggle when rendered outside one). Content (name/price/currency/period/description/badge/save) lives on ‘value’, not settings — outside the settings-vocabulary contract, same precedent as kind:quote.

`kind:plan-price`

Key	Tier	Type	Allowed values	Default	Description
`groupId`	core	`string`	—	—	Required. Id of the plan-group node this leaf subscribes to. Resolved contextually, not just literally: when no plan-group is registered under this exact id but exactly one group is registered on the page, that sole group is used instead; with zero or 2+ candidate groups, no link is made and ‘fallback’ renders.
`fallback`	presentational	`object`	—	—	Rendered for SSR/first paint and whenever ‘groupId’ has never published a selection. Must byte-match the subscribed group’s ‘defaultSelected’ card’s own ‘price’/‘period’ — no reformatting happens in the pub-sub relay.

`kind:doodle`

Key	Tier	Type	Allowed values	Default	Description
`variant`	presentational	`string`	`arrow-plain`, `arrow-straight`, `underline`, `knot-curl`	`arrow-plain`	—
`size`	presentational	`string`	`sm`, `md`, `lg`, `xl`	`md`	Each step bakes in its own mobile value at the hub 659px breakpoint (sm 40→23, md 56→33, lg 81→47, xl 110→64).
`flip`	presentational	`boolean`	—	`false`	—
`rotate`	presentational	`number`	`90`, `180`, `270` + any string	—	Named values (90\|180\|270) resolve to static Tailwind rotate classes; any other numeric value falls back to an inline style.rotate.
`strokeWidth`	presentational	`number`	—	`2`	Clamped [1,6].
`align`	presentational	`string`	`start`, `center`, `end`	—	—
`draw`	presentational	`boolean`	—	`false`	Once-per-viewport-entry stroke-draw animation (Motion pathLength).
`drawDelay`	presentational	`number`	—	`0`	Extra delay (seconds) on top of the viewport trigger — used to chain a second doodle so it visibly waits for a first one to finish drawing.
`hideOnMobile`	presentational	`boolean`	—	`false`	Literal @max-[659px]/hub:hidden — scoped to this leaf, not a general leaf capability.

`kind:featured-icon`

Key	Tier	Type	Allowed values	Default	Description
`icon`	presentational	`string`	—	—	Hub sprite glyph name. Optional when ‘label’ is given.
`label`	presentational	`string`	—	—	Short text (e.g. a step numeral). Wins over ‘icon’ when both are set.
`variant`	presentational	`string`	`solid`, `accent-overlay`, `outline`	`solid`	’outline’ (hollow disc, rides ambient currentColor) is the journey-stage marker treatment.
`tone`	presentational	`string`	`accent`, `destructive`, `neutral`	`accent`	—
`size`	presentational	`string`	`small`, `normal`, `large`	`normal`	72/88/104px, steps down one tier at max-sm.
`draw`	presentational	`boolean`	—	`false`	Pen-draw a single stroked glyph on mount — a CSS-keyframe mechanism, distinct from doodle.draw (Motion, viewport-triggered).

Consumer profiles

ios-min — templates: hero; settings: core
web — templates: all templates; settings: core+presentational

​Node shape

​Templates

​Node kinds

​Section types

​Settings vocabulary

​shared:action

​shared:background

​shared:gradient

​shared:textTheme

​shared:visibility

​shared:surface

​shared:structural

​kind:stack

​kind:row

​kind:grid

​kind:carousel

​kind:horizontal-scroll

​kind:tabs

​kind:container

​kind:content-card

​kind:accordion

​kind:video

​kind:divider

​kind:progress-ring

​kind:headline

​kind:text

​kind:image

​kind:button

​kind:icon

​kind:field

​kind:media-slot

​kind:cta-slot

​kind:file-player

​kind:file-attachments

​kind:search-bar

​kind:quote

​kind:banner

​kind:countdown

​kind:logo

​kind:theme-toggle

​kind:plan-group

​kind:plan-card

​kind:plan-price

​kind:doodle

​kind:featured-icon

​Consumer profiles

Node shape

Templates

Node kinds

Section types

Settings vocabulary

`shared:action`

`shared:background`

`shared:gradient`

`shared:textTheme`

`shared:visibility`

`shared:surface`

`shared:structural`

`kind:stack`

`kind:row`

`kind:grid`

`kind:carousel`

`kind:horizontal-scroll`

`kind:tabs`

`kind:container`

`kind:content-card`

`kind:accordion`

`kind:video`

`kind:divider`

`kind:progress-ring`

`kind:headline`

`kind:text`

`kind:image`

`kind:button`

`kind:icon`

`kind:field`

`kind:media-slot`

`kind:cta-slot`

`kind:file-player`

`kind:file-attachments`

`kind:search-bar`

`kind:quote`

`kind:banner`

`kind:countdown`

`kind:logo`

`kind:theme-toggle`

`kind:plan-group`

`kind:plan-card`

`kind:plan-price`

`kind:doodle`

`kind:featured-icon`

Consumer profiles