@bytesbrains/weblocks 0.6.2 → 0.7.0

package/AGENT.md

@@ -46,19 +46,19 @@ its exact config schema:
 - `catalogPrompt()` — a compact text menu for a system prompt.
 - `CATALOG.md` — the same, human-readable.
 
-The 45 block types, by group:
+The 50 block types, by group:
 
 - **Chrome/app-shell:** `nav`, `app-shell`, `sidebar`, `announcement-bar`, `footer`
 - **Heroes:** `hero`, `hero-app`
 - **Résumé / profile:** `profile-header` (avatar, name, contacts, Download-PDF/Share buttons), `experience` (dated entries — reuse for Education/Certifications by changing its title), `skills` (tags or level bars)
 - **Content:** `features`, `about`, `rich-text`, `split`, `steps`, `stats`,
-  `services-catalogue`, `pricing`, `logos`, `team`
+  `services-catalogue`, `menu` (food/drink menu — sections, dietary tags, spice), `product` (shoppable grid — price, badge, buy/enquire), `pricing`, `logos`, `team`
 - **Media:** `gallery`, `carousel`, `video`, `video-gallery`, `map`
 - **Location:** `directions` (deep links to open the visitor’s map app)
-- **Structured:** `timeline`, `tabs`, `accordion`, `testimonials`, `faq`
+- **Structured:** `timeline`, `tabs`, `accordion`, `testimonials`, `reviews` (star ratings + source), `faq`
 - **Collections:** `blog-list`, `blog-post`, `feed`
-- **Dynamic (powered):** `contact-form`, `newsletter`, `search`, `auth`
-- **Conversion/rhythm:** `cta`, `social-links`, `contact-details`, `divider`, `spacer`, `copyright`
+- **Dynamic (powered):** `booking` (appointment/reservation request — service, date, time), `contact-form`, `newsletter`, `search`, `auth`
+- **Conversion/rhythm:** `cta`, `social-links`, `contact-details`, `hours` (structured weekly opening hours with a live open-now badge), `divider`, `spacer`, `copyright`
 - **Legal:** `legal` (terms/privacy links that open safe-Markdown dialogs; content is Markdown, never raw HTML)
 
 Interactivity is safe to enable: `gallery` with `lightbox: true`, `carousel` with

package/CATALOG.md

@@ -1,8 +1,8 @@
-# @bytesbrains/weblocks — Block Catalog (v0.6.2)
+# @bytesbrains/weblocks — Block Catalog (v0.7.0)
 
 The AI composes a `SiteManifest` (`{ meta, design, blocks[] }`) using **only** the block types below, then the engine validates + renders it to static HTML. This file is generated from the code (`npm run emit:catalog`) — do not edit by hand.
 
-**Block types:** `app-shell` · `nav` · `announcement-bar` · `sidebar` · `hero` · `hero-app` · `profile-header` · `experience` · `skills` · `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` · `gallery` · `carousel` · `video` · `video-gallery` · `map` · `timeline` · `tabs` · `accordion` · `testimonials` · `faq` · `blog-list` · `blog-post` · `feed` · `contact-form` · `newsletter` · `search` · `auth` · `cta` · `social-links` · `contact-details` · `directions` · `legal` · `divider` · `spacer` · `copyright` · `footer`
+**Block types:** `app-shell` · `nav` · `announcement-bar` · `sidebar` · `hero` · `hero-app` · `profile-header` · `experience` · `skills` · `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `menu` · `product` · `pricing` · `logos` · `team` · `gallery` · `carousel` · `video` · `video-gallery` · `map` · `timeline` · `tabs` · `accordion` · `testimonials` · `reviews` · `faq` · `blog-list` · `blog-post` · `feed` · `booking` · `contact-form` · `newsletter` · `search` · `auth` · `cta` · `social-links` · `contact-details` · `hours` · `directions` · `legal` · `divider` · `spacer` · `copyright` · `footer`
 
 ## `app-shell`
 
@@ -178,6 +178,27 @@ A grid of services or products, each with a name, optional price, description, a
 | `subtitle` | string |  |  |
 | `items` | array |  |  |
 
+## `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.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `subtitle` | string |  |  |
+| `sections` | array |  |  |
+
+## `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.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `subtitle` | string |  |  |
+| `columns` | integer (2\|3\|4) |  |  |
+| `items` | array |  |  |
+
 ## `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.
@@ -299,6 +320,19 @@ A grid of customer quotes, each with the quote text and an optional author name
 | `title` | string |  |  |
 | `items` | array |  |  |
 
+## `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.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `subtitle` | string |  |  |
+| `average` | string |  |  |
+| `count` | string |  |  |
+| `source` | string |  |  |
+| `items` | array |  |  |
+
 ## `faq`
 
 An accordion of question/answer pairs. Expands/collapses natively (no JS).
@@ -341,6 +375,25 @@ A generic data-driven list of items in a list or card layout, each with a title,
 | `layout` | undefined (list\|cards) |  |  |
 | `items` | array |  |  |
 
+## `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.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `intro` | string |  |  |
+| `submitLabel` | string |  |  |
+| `successMessage` | string |  |  |
+| `serviceLabel` | string |  |  |
+| `services` | array |  |  |
+| `askDate` | boolean |  |  |
+| `askTime` | boolean |  |  |
+| `askParty` | boolean |  |  |
+| `askPhone` | boolean |  |  |
+| `askNotes` | boolean |  |  |
+| `notesLabel` | string |  |  |
+
 ## `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.
@@ -424,6 +477,17 @@ A contact info block: address, phone, email, and opening hours (each optional).
 | `email` | string |  |  |
 | `hours` | string |  |  |
 
+## `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.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `timezone` | string |  |  |
+| `note` | string |  |  |
+| `days` | array |  |  |
+
 ## `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.

package/CHANGELOG.md

@@ -5,6 +5,55 @@ follows [semantic versioning](https://semver.org): the **block catalog** and the
 **`SiteManifest` shape** are the public contract — additive block/field changes
 are minor, breaking changes to either are major.
 
+## 0.7.0 — 2026-07-17
+
+Business verticals land: a vertical taxonomy, named starter templates, and five
+new blocks that cover the booking-driven and shop verticals. Additive and
+**non-breaking** — every `0.6.x` manifest still validates and renders
+identically. Catalog 45 → 50.
+
+### Added
+- **Five new blocks for vertical coverage (#32).** Catalog 45 → 50.
+  - **`booking`** — an appointment/reservation request form (service, date, time,
+    contact) for the booking-driven verticals (salon, clinic, gym, hotel,
+    events). Powered brick: posts to the host `booking.request` capability, inert
+    fallback with no runtime, native form post + optional host island.
+  - **`hours`** — structured weekly opening hours (24h, split shifts) as an
+    accessible table with a live "open now / closed" badge via a shipped `hours`
+    island (static-first: the full week always renders without JS).
+  - **`menu`** — a food/drink menu: sections → items with price, dietary/allergen
+    tags, and a 0–3 spice level.
+  - **`product`** — a shoppable product grid: image, price (+ optional "was" and
+    badge), and a buy/enquire link per item.
+  - **`reviews`** — star-rated (1–5) customer reviews with author, date, and
+    source (Google/Yelp/…), plus an optional aggregate score.
+
+  Additive + non-breaking: every `0.6.x` manifest still validates and renders
+  identically. The booking-driven verticals (#30) now have a home block.
+- **Named starter templates (`templates.ts`, #31).** One complete, realistic,
+  `validateManifest`-clean `SiteManifest` per vertical (17 in all), each with a
+  fitting preset baked in. Exposed as `TEMPLATES` / `templateNames()` /
+  `templatesForVertical()` / `getTemplate()` so a host can render an instant,
+  zero-LLM starter and the AI can scaffold from the same source of truth. A
+  runnable example (`npm run example:templates`) renders them all to
+  `templates-output/`.
+- **Template-aware generation.** `generateSite` / `buildGenerationPrompt` accept
+  `{ template }` (a template id or a raw `SiteManifest`); when present the
+  structure + design are seeded into the prompt ("start from this, keep the
+  section set unless the brief conflicts, rewrite the copy for THIS business").
+  Blank-slate compose is unchanged when omitted.
+- **Business-vertical taxonomy (`verticals.ts`, #30).** A small, stable list that
+  maps each vertical (`restaurant`, `salon`, `healthcare`, … `other`) to its
+  recommended sections (in order), a fitting `preset`, a copy `tone`, and a
+  `booking` flag. Exposed as `VERTICALS` / `verticalNames()` / `getVertical()` so
+  a host renders one source of truth instead of hardcoding a category list. Every
+  recommended block is a real catalog type (unit-tested).
+- **Vertical-aware generation.** `generateSite` / `buildGenerationPrompt` accept
+  an optional `{ vertical }`; when present, the vertical's recommended sections +
+  preset are injected as advisory defaults ("prefer these unless the brief says
+  otherwise"). Blank-slate compose is unchanged when omitted. `GenerateOptions`
+  is exported.
+
 ## 0.6.2 — 2026-07-17
 
 Bug fix: in-page nav links now scroll.

package/README.md

@@ -139,20 +139,20 @@ import catalogJson from '@bytesbrains/weblocks/catalog.json' with { type: 'json'
 
 ## Block catalog
 
-**45 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
+**50 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
 
 | Group | Blocks |
 |---|---|
 | Chrome / app-shell | `nav` · `app-shell` · `sidebar` · `announcement-bar` · `footer` |
 | Heroes | `hero` · `hero-app` |
 | Résumé / profile | `profile-header` · `experience` · `skills` (live CV — avatar, dated entries, skills, Download-PDF/Share) |
-| Content | `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` |
+| Content | `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `menu` · `product` · `pricing` · `logos` · `team` |
 | Media | `gallery` · `carousel` · `video` · `video-gallery` · `map` |
 | Location | `directions` (deep links to the visitor’s map app) |
-| Structured | `timeline` · `tabs` · `accordion` · `testimonials` · `faq` |
+| Structured | `timeline` · `tabs` · `accordion` · `testimonials` · `reviews` · `faq` |
 | Collections | `blog-list` · `blog-post` · `feed` |
-| Dynamic (powered) | `contact-form` · `newsletter` · `search` · `auth` |
-| Conversion / rhythm | `cta` · `social-links` · `contact-details` · `divider` · `spacer` · `copyright` |
+| Dynamic (powered) | `booking` · `contact-form` · `newsletter` · `search` · `auth` |
+| Conversion / rhythm | `cta` · `social-links` · `contact-details` · `hours` · `divider` · `spacer` · `copyright` |
 | Legal | `legal` (terms/privacy links → safe-Markdown dialogs) |
 
 `rich-text` and `blog-post` carry **typed** content nodes (headings, paragraphs,
@@ -273,6 +273,8 @@ All exports are named; types are shipped (`lib/index.d.ts`).
 | **Catalog** | `catalog` · `catalogPrompt` |
 | **Registry** | `REGISTRY` · `getSpec` · `blockTypes` · `needsIsland` |
 | **Theming** | `DEFAULT_TOKENS` · `normalizeTokens` · `tokensToCss` · `sectionOverrideCss` · `readableOn` · `PRESETS` · `presetNames` · `getPreset` |
+| **Verticals** | `VERTICALS` · `verticalNames` · `getVertical` |
+| **Templates** | `TEMPLATES` · `templateNames` · `templatesForVertical` · `getTemplate` |
 | **Runtime** | `NOOP_RUNTIME` · `pathRuntime` · `runtimeNeeds` |
 | **PWA** | `buildWebManifest` · `buildWebManifestJson` · `buildServiceWorker` · `emitPwa` |
 | **Schema utils** | `parse` · `escapeHtml` · `escapeAttr` · `sanitizeUrl` |
@@ -284,6 +286,52 @@ Core types: `SiteManifest` · `Block` · `DesignTokens` · `Palette` ·
 `ModelCall` is `(args: { system: string; user: string }) => Promise<string>` — the
 one thing you inject, so the engine never depends on a provider.
 
+## Verticals
+
+`verticals.ts` is a small, stable **business-vertical taxonomy** — one source of
+truth for what *kind* of site is being built. Each entry maps a stable `id`
+(persist it host-side as e.g. `businessType`) to a label + icon, a recommended
+section set in order, a fitting `preset`, a copy `tone`, and a `booking` flag.
+
+```ts
+import { verticalNames, getVertical, generateSite } from '@bytesbrains/weblocks';
+
+verticalNames();                 // ['restaurant','retail','salon', … ,'other']
+getVertical('salon');            // { id, label, blocks:[…], preset:'candy', booking:true, … }
+
+// Seed compose with the vertical's recommended sections + preset (advisory):
+await generateSite('a hair salon in Leeds', callModel, { vertical: 'salon' });
+```
+
+Hosts building a category picker should **render `verticalNames()`** rather than
+hardcode their own list — the same way the block editor consumes `catalog.json` —
+so chips, the AI's section defaults, and starter templates all derive from one
+list. Verticals are additive and stable: new ones are safe; existing `id`s are
+never renamed or repurposed.
+
+## Templates
+
+`templates.ts` ships **named starter templates** — one complete, validated
+`SiteManifest` per vertical, with realistic copy and a fitting preset baked in.
+They serve two callers from one source of truth: a host renders one as an
+instant, zero-LLM starter/preview, and generation seeds one as a scaffold to
+personalise.
+
+```ts
+import { templatesForVertical, getTemplate, generateSite, renderSite } from '@bytesbrains/weblocks';
+
+templatesForVertical('salon');            // [{ id:'salon-spa', label, manifest }, …]
+renderSite(getTemplate('salon-spa')!.manifest);   // instant preview, no model call
+
+// Or scaffold generation from a template — keep the structure, rewrite the copy:
+await generateSite('a taco truck in Austin', callModel, { template: 'restaurant-modern' });
+// A raw SiteManifest works too: { template: myManifest }. Omit → blank-slate compose.
+```
+
+Render every template to eyeball them: `npm run example:templates` →
+`templates-output/index.html`. Templates are additive and stable (ids never
+renamed); every manifest is `validateManifest`-clean (unit-tested).
+
 ## Adding a block
 
 Register a `BlockSpec` (`type` + `schema` + `css` + `render`, optionally `island`
@@ -300,6 +348,7 @@ npm run build        # tsc → lib/
 npm test             # block definition-of-done + engine invariants
 npm run example         # render a sample landing page → example-output.html
 npm run example:resume  # render a live résumé/CV → resume-output.html (try its Download-PDF)
+npm run example:templates # render every starter template → templates-output/index.html
 npm run emit:catalog    # regenerate catalog.json + CATALOG.md from code
 ```