- app-shell — A persistent bottom tab bar for app-like navigation, each tab an optional icon plus a label linking to a view.
    config: { brand: string(≤60); tabs: [ { label:string(≤40) *, href:string(≤500), icon:string(≤8) } ](≤6) }
- nav — Top navigation bar: brand/logo text, a row of links, and an optional call-to-action button. Place first.
    config: { brand: string(≤60) *; sticky: bool=false; links: [ { label:string(≤40) *, href:string(≤300) } ](≤8); cta: { label:string(≤40), href:string(≤300) } }
- announcement-bar — A dismissible full-width strip for a short promo or notice, with an optional inline link and info/promo/warning tone.
    config: { text: string(≤200) *; linkLabel: string(≤40); href: string(≤500); tone: info|promo|warning=info; dismissible: bool=true }
- install-prompt — A dismissible toast inviting visitors to install the site as an app, with step-by-step "Add to Home Screen" instructions matched to their platform (iOS, Android, Chrome/Edge, macOS Safari). Pair it with a PWA-enabled manifest.
    config: { title: string(≤60) *; body: string(≤160); actionLabel: string(≤30); position: bottom|top|bottom-right=bottom; tone: info|promo=info; delayMs: int=0; dismissible: bool=true; rememberDismiss: bool=true; platforms: [ ios-safari|ios-other|android|desktop-chrome|macos-safari|firefox ](≤6) }
- sidebar — A vertical section/drawer navigation for multi-view apps: an optional title over a list of icon-and-label links.
    config: { title: string(≤60); links: [ { label:string(≤60) *, href:string(≤500), icon:string(≤8) } ](≤20) }
- hero — Top-of-page hero: a big headline with optional eyebrow, subheading, and CTA — optionally over a full-bleed background image banner with a legibility overlay.
    config: { eyebrow: string(≤80); headline: string(≤160) *; subhead: string(≤320); align: center|left=center; image: string(≤500); overlay: scrim|dark|light|none=scrim; minHeight: auto|sm|md|lg|full=auto; cta: { label:string(≤40), href:string(≤500) } }
- hero-app — An app landing hero: a headline and subhead over a primary install button, with a horizontal scroll row of app screenshots.
    config: { headline: string(≤120) *; subhead: string(≤240); installLabel: string(≤40); installHref: string(≤500); screenshots: [ { src:string(≤500) *, alt:string(≤200) } ](≤6) }
- profile-header — A résumé/CV header: avatar, name, role, location, a contact + social row, and optional Download-PDF and Share buttons.
    config: { name: string(≤120) *; headline: string(≤160); location: string(≤120); avatar: string(≤500); summary: string(≤400); contacts: [ { type:email|phone|website|location|linkedin|github|twitter|x|custom=custom, value:string(≤300) *, label:string(≤80) } ](≤10); showDownload: bool=false; downloadLabel: string(≤40); showShare: bool=false; shareLabel: string(≤40) }
- experience — A résumé section of dated entries (role, org, period, location, bullets). Reuse for Experience, Education, Certifications by changing the title.
    config: { title: string(≤120); items: [ { role:string(≤120) *, org:string(≤120), period:string(≤60), location:string(≤80), url:string(≤500), summary:string(≤300), bullets:[ string(≤300) ](≤12) } ](≤24) }
- skills — Grouped skills shown as tags (with optional proficiency dots) or labelled level bars; also for languages and tools.
    config: { title: string(≤120); display: tags|bars=tags; groups: [ { name:string(≤60), items:[ { label:string(≤60) *, level:int=0 } ](≤40) } ](≤10) }
- features — A grid of value propositions, each with an optional icon/emoji, a title, and a short line of text.
    config: { title: string(≤120); subtitle: string(≤240); columns: int(2|3|4)=3; items: [ { icon:string(≤8), title:string(≤80) *, text:string(≤240) } ](≤12) }
- about — A story/mission section: eyebrow, title, prose body, and an optional side image (choose which side).
    config: { eyebrow: string(≤60); title: string(≤120); body: string(≤1200); image: string(≤500); imageAlt: string(≤200); imageSide: left|right=right }
- rich-text — A typed prose section with ordered headings, paragraphs, quotes, and bullet/numbered lists — a safe freeform-content block, never raw HTML.
    config: { blocks: [ { kind:heading|subheading|paragraph|quote|bullet|numbered=paragraph, text:string(≤2000) * } ](≤60) }
- split — Alternating image-and-text rows; the image side flips each row, and rows without an image collapse to centered text.
    config: { rows: [ { title:string(≤120), text:string(≤600), image:string(≤500), imageAlt:string(≤200) } ](≤8) }
- steps — A numbered how-it-works / process list: an optional title and subtitle over auto-numbered step cards, each with a title and short text.
    config: { title: string(≤120); subtitle: string(≤240); items: [ { title:string(≤100) *, text:string(≤300) } ](≤12) }
- stats — A grid of metric counters: each stat shows an optional prefix/suffix around a big value with a muted label, with an optional count-up animation.
    config: { title: string(≤120); columns: int(2|3|4)=4; items: [ { value:string(≤24) *, label:string(≤60) *, prefix:string(≤8), suffix:string(≤8) } ](≤8) }
- progress — Progress and goal indicators — fundraising totals, completion, capacity or scarcity — as bars, discrete segments, donut rings or scaled meters, each with units and an optional target marker.
    config: { title: string(≤120); subtitle: string(≤240); display: bars|segments|rings|meters=bars; layout: stack|grid|inline=stack; columns: int(1|2|3|4)=3; size: sm|md|lg=md; showValue: bool=true; animate: bool=false; items: [ { label:string(≤80) *, value:int=0, max:int=100, prefix:string(≤8), suffix:string(≤16), caption:string(≤160), threshold:int=0, state:default|accent|success|warning|danger=default, icon:string(≤8) } ](≤12) }
- services-catalogue — A grid of services or products, each with a name, optional price, description, and link. Use for "what we offer".
    config: { title: string(≤120); subtitle: string(≤240); items: [ { name:string(≤80) *, description:string(≤300), price:string(≤40), ctaLabel:string(≤40), ctaHref:string(≤500) } ](≤24) }
- menu — A food/drink menu: named sections, each with items that have an optional price, dietary/allergen tags (e.g. V, VG, GF), and a 0–3 spice level. Use for restaurants and cafés.
    config: { title: string(≤120); subtitle: string(≤240); sections: [ { name:string(≤80) *, note:string(≤200), items:[ { name:string(≤100) *, description:string(≤300), price:string(≤40), tags:[ string(≤12) ](≤8), spice:int=0 } ](≤40) } ](≤20) }
- product — A shoppable product grid: each item has an image, price (with optional "was" price and badge), and a buy/enquire link. Use for retail and e-commerce; the cart/checkout is the host's.
    config: { title: string(≤120); subtitle: string(≤240); columns: int(2|3|4)=3; items: [ { name:string(≤100) *, description:string(≤240), price:string(≤40), was:string(≤40), image:string(≤500), badge:string(≤24), ctaLabel:string(≤40), ctaHref:string(≤500) } ](≤48) }
- pricing — A row of pricing/tier cards, each with a name, price, feature list, and a call-to-action button; one plan can be highlighted.
    config: { title: string(≤120); subtitle: string(≤240); plans: [ { name:string(≤60) *, price:string(≤24) *, period:string(≤24), features:[ string(≤120) ](≤12), ctaLabel:string(≤40), ctaHref:string(≤500), featured:bool=false } ](≤6) }
- logos — A centered strip of client or partner logos (grayscale until hover), each optionally linking out, under a short heading.
    config: { title: string(≤120); items: [ { src:string(≤500) *, alt:string(≤120), href:string(≤500) } ](≤24) }
- team — A grid of people cards with photo (or initials), name, role, a short bio, and optional social links.
    config: { title: string(≤120); subtitle: string(≤240); columns: int(2|3|4)=3; members: [ { name:string(≤80) *, role:string(≤80), photo:string(≤500), bio:string(≤240), socials:[ { label:string(≤40) *, href:string(≤500) } ](≤5) } ](≤24) }
- gallery — A responsive image grid (grid/masonry/carousel) with an optional click-to-zoom lightbox. Each item needs a src and alt text.
    config: { layout: grid|masonry|carousel=grid; columns: int(2|3|4)=3; gap: sm|md|lg=md; lightbox: bool=true; items: [ { src:string(≤500) *, alt:string(≤200) *, caption:string(≤200) } ](≤60) }
- carousel — A horizontal, swipeable carousel of image slides with optional captions; scrolls natively and can be enhanced with arrows/autoplay.
    config: { title: string(≤120); items: [ { src:string(≤500), alt:string(≤200), caption:string(≤200) } ](≤20); autoplay: bool=false }
- video — A responsive embedded video from YouTube or Vimeo (by id or URL) or a self-hosted file, with an optional caption.
    config: { provider: youtube|vimeo|file=youtube; src: string(≤500) *; title: string(≤120); poster: string(≤500); caption: string(≤200) }
- video-gallery — A grid or carousel of click-to-play video cards (YouTube/Vimeo/file); each loads its player inline on click (a lightweight facade — no heavy iframes up front).
    config: { title: string(≤120); layout: grid|carousel=grid; columns: int(2|3|4)=3; items: [ { provider:youtube|vimeo|file=youtube, src:string(≤500) *, title:string(≤160), poster:string(≤500) } ](≤24) }
- map — An embedded location map for a place or address query, with configurable zoom and height and a link to the full map.
    config: { query: string(≤200) *; zoom: int=14; height: int=360; label: string(≤120) }
- timeline — A vertical timeline of chronological milestones, each with an optional date, a title, and supporting text.
    config: { title: string(≤120); items: [ { date:string(≤40), title:string(≤120) *, text:string(≤400) } ](≤24) }
- tabs — Tabbed content panels that switch with no JavaScript; each tab has a label and a text panel.
    config: { items: [ { label:string(≤60) *, text:string(≤2000) } ](≤8) }
- accordion — Generic collapsible disclosure panels (native details/summary, no JavaScript); each panel has a heading and body.
    config: { title: string(≤120); items: [ { heading:string(≤200) *, body:string(≤1200) } ](≤24) }
- testimonials — A grid of customer quotes, each with the quote text and an optional author name and role.
    config: { title: string(≤120); items: [ { quote:string(≤400) *, author:string(≤80), role:string(≤80) } ](≤12) }
- reviews — Star-rated customer reviews (1–5 stars) each with an optional author, date, and source (Google, Yelp, …), plus an optional aggregate score. Richer than plain testimonial quotes.
    config: { title: string(≤120); subtitle: string(≤240); average: string(≤8); count: string(≤24); source: string(≤40); items: [ { rating:int=5, quote:string(≤500) *, author:string(≤80), date:string(≤40), source:google|yelp|facebook|trustpilot|tripadvisor|app-store|other=other } ](≤24) }
- faq — An accordion of question/answer pairs. Expands/collapses natively (no JS).
    config: { title: string(≤120); items: [ { question:string(≤200) *, answer:string(≤800) } ](≤20) }
- chat-thread — A conversation rendered as a thread of rich message bubbles: named participants with avatars or initials, optional per-message times, and typed message bodies that mix text, code, images, lists and quick replies. Static — an authored transcript for showing how an assistant or support team answers, not a live chatbot.
    config: { title: string(≤120); subtitle: string(≤200); participants: [ { id:string(≤40) *, name:string(≤60) *, role:user|bot|agent=bot, avatar:string(≤500) } ](≤6); messages: [ { from:string(≤40) *, time:string(≤40), body:[ { kind:text|code|image|list|buttons=text, text:string(≤2000), lang:string(≤20), src:string(≤500), alt:string(≤200), ordered:bool=false, items:[ { label:string(≤120), href:string(≤500) } ](≤8) } ](≤8) } ](≤60) }
- blog-list — A post index as a grid of cards, each with an optional cover image, tag, date, title, and excerpt linking to the post.
    config: { title: string(≤120); columns: int(2|3)=3; posts: [ { title:string(≤160) *, excerpt:string(≤280), href:string(≤500), image:string(≤500), date:string(≤40), tag:string(≤40) } ](≤24) }
- blog-post — A single article layout with an optional cover, title, author/date, and a typed body (headings, paragraphs, quotes, bullets).
    config: { title: string(≤200) *; date: string(≤40); author: string(≤80); cover: string(≤500); coverAlt: string(≤200); body: [ { kind:heading|paragraph|quote|bullet=paragraph, text:string(≤2000) * } ](≤120) }
- feed — A generic data-driven list of items in a list or card layout, each with a title, optional subtitle/text, badge, image, and link.
    config: { title: string(≤120); layout: list|cards=list; items: [ { title:string(≤160) *, subtitle:string(≤120), text:string(≤280), href:string(≤500), image:string(≤500), badge:string(≤40) } ](≤50) }
- booking — An appointment/reservation request form (service, date, time, contact) that posts to a host-provided runtime. For booking-driven businesses — salons, clinics, gyms, hotels, events. No raw HTML.  [dynamic — host provides: booking.request]
    config: { title: string(≤120); intro: string(≤280); submitLabel: string(≤40); successMessage: string(≤200); serviceLabel: string(≤60); services: [ { name:string(≤80) *, duration:string(≤40), price:string(≤40) } ](≤40); askDate: bool=true; askTime: bool=true; askParty: bool=false; askPhone: bool=true; askNotes: bool=true; notesLabel: string(≤80) }
- contact-form — A configurable contact form with typed fields (text, email, tel, textarea, select, checkbox) that posts to a host-provided runtime. No raw HTML.  [dynamic — host provides: contact-form.submit]
    config: { title: string(≤120); intro: string(≤280); submitLabel: string(≤40); successMessage: string(≤200); fields: [ { name:string(≤40) *, label:string(≤80) *, type:text|email|tel|textarea|select|checkbox=text, placeholder:string(≤80), required:bool=false, options:[ string(≤80) ](≤24) } ](≤12) }
- newsletter — An email-capture form that posts to a host-provided runtime; renders inert until a runtime is wired.  [dynamic — host provides: newsletter.subscribe]
    config: { title: string(≤120); intro: string(≤240); placeholder: string(≤80); submitLabel: string(≤40); successMessage: string(≤200) }
- search — A site search rendered as a full search bar or a compact expanding icon button; queries a host-provided search runtime.  [dynamic — host provides: search.query]
    config: { layout: bar|icon=bar; placeholder: string(≤80); label: string(≤60); buttonLabel: string(≤40); name: string(≤40); align: start|center|end=center }
- auth — A provider-agnostic sign in / sign up panel: social provider buttons and an optional email form that start auth via a host runtime.  [dynamic — host provides: auth.start]
    config: { mode: signin|signup=signin; title: string(≤120); providers: [ { label:string(≤40) *, provider:string(≤40) } ](≤6); showEmail: bool=true }
- cta — A full-width call-to-action band: a headline, optional subheading, and one button. Use near the bottom.
    config: { headline: string(≤160) *; subhead: string(≤240); background: primary|accent|surface=primary; button: { label:string(≤40), href:string(≤300) } }
- social-links — A row or grid of links to social/contact profiles; each link picks a built-in brand icon by platform (or a custom emoji), shown labeled or icon-only.
    config: { title: string(≤120); layout: row|grid=row; variant: labeled|icon=labeled; align: start|center|end=center; links: [ { platform:x|twitter|instagram|facebook|linkedin|youtube|github|tiktok|whatsapp|telegram|discord|mastodon|rss|email|website|phone|custom=custom, href:string(≤500) *, label:string(≤60), icon:string(≤8) } ](≤20) }
- contact-details — A contact info block: address, phone, email, and opening hours (each optional). Read-only — no form.
    config: { title: string(≤120); address: string(≤200); phone: string(≤40); email: string(≤120); hours: string(≤160) }
- hours — Structured weekly opening hours (24h times per day, split shifts allowed) rendered as an accessible table with a live "open now / closed" badge. Use for shops, cafés, salons, and clinics.
    config: { title: string(≤120); timezone: string(≤60); note: string(≤200); days: [ { day:mon|tue|wed|thu|fri|sat|sun=mon, open:string(≤5), close:string(≤5), closed:bool=false } ](≤21) }
- directions — A location card with deep links that open the visitor’s map app (Google/Apple Maps) for directions, from an address, GPS coordinates, or a pasted map link.
    config: { title: string(≤120); place: string(≤120); address: string(≤240); lat: string(≤24); lng: string(≤24); mapUrl: string(≤500); directionsLabel: string(≤40); appleMaps: bool=true }
- legal — Policy links (terms, privacy, cookies, …) that open as scrollable, dismissible dialogs; each body is safe Markdown (never raw HTML). No JavaScript.
    config: { title: string(≤120); align: start|center|end=center; separator: string(≤4); documents: [ { label:string(≤60) *, title:string(≤120), content:string(≤40000) } ](≤8) }
- divider — A visual section break rendered as a thin line, a dotted rule, or a gradient bar.
    config: { style: line|dots|gradient=line }
- spacer — Deliberate vertical whitespace between sections, in one of four sizes (sm, md, lg, xl).
    config: { size: sm|md|lg|xl=md }
- copyright — A small copyright bar (© year holder + rights text) for the bottom of a page; the year auto-fills to the current year when left blank.
    config: { holder: string(≤120); year: string(≤24); text: string(≤160); showSymbol: bool=true; align: start|center|end=center }
- credit — A one-line attribution — "Powered by / Created by / Managed by <name>" — with an optional logo and an outbound link that opens in a new tab; credits the maker or operator (use `copyright` for ownership).
    config: { label: string(≤40); name: string(≤80) *; href: string(≤500); newTab: bool=true; logo: string(≤500); note: string(≤160); variant: bar|badge|inline=bar; align: start|center|end=center }
- footer — Page footer: brand, tagline, a row of links, and a copyright line. Place last.
    config: { brand: string(≤60); tagline: string(≤160); links: [ { label:string(≤40) *, href:string(≤300) } ](≤12); copyright: string(≤160) }