@bytesbrains/weblocks 0.6.2 → 0.7.0

package/lib/blocks/hours.js

@@ -0,0 +1,97 @@
+/**
+ * `hours` — structured weekly opening hours with a live "open now / closed"
+ * badge. Static-first: the renderer emits the full week as an accessible table
+ * (always correct, no JS), with each row carrying `data-*` hooks; the shipped
+ * `hours` island reads them at view time to fill the badge and highlight today,
+ * so the "open now" state is live rather than frozen at generation time.
+ *
+ * Today it's a freeform string on `contact-details`; this gives it structure.
+ * Times are 24h "HH:MM". A day with no ranges (or `closed:true`) shows "Closed".
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const DAYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+const LABELS = { mon: 'Monday', tue: 'Tuesday', wed: 'Wednesday', thu: 'Thursday', fri: 'Friday', sat: 'Saturday', sun: 'Sunday' };
+const schema = {
+    title: { kind: 'string', default: 'Opening hours', max: 120 },
+    timezone: { kind: 'string', default: '', max: 60 },
+    note: { kind: 'string', default: '', max: 200 },
+    days: {
+        kind: 'array', max: 21,
+        of: {
+            kind: 'object',
+            fields: {
+                day: { kind: 'enum', values: DAYS, required: true, default: 'mon' },
+                open: { kind: 'string', default: '', max: 5 },
+                close: { kind: 'string', default: '', max: 5 },
+                closed: { kind: 'boolean', default: false },
+            },
+        },
+    },
+};
+const css = `
+.blk-hours{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-hours .wrap{max-width:560px;margin:0 auto}
+.blk-hours .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em;margin-bottom:var(--space)}
+.blk-hours h2{font-size:var(--fs-xl);margin:0;font-weight:800}
+.blk-hours .badge{font-size:var(--fs-base);font-weight:700;border-radius:999px;padding:.15em .7em;background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--muted)}
+.blk-hours .badge[data-state="open"]{background:color-mix(in srgb,#2f9e44 20%,transparent);color:#2b8a3e}
+.blk-hours .badge[data-state="closed"]{background:color-mix(in srgb,#e03131 18%,transparent);color:#c92a2a}
+.blk-hours table{width:100%;border-collapse:collapse}
+.blk-hours th,.blk-hours td{text-align:left;padding:.55em 0;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+.blk-hours td.time{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
+.blk-hours tr[data-today] th,.blk-hours tr[data-today] td{font-weight:800;color:var(--text)}
+.blk-hours .closed{color:color-mix(in srgb,var(--text) 45%,transparent)}
+.blk-hours .note{color:var(--muted);font-size:var(--fs-base);margin:var(--space) 0 0}
+.blk-hours .tz{color:var(--muted);font-weight:400;font-size:var(--fs-base)}
+`.trim();
+/** Group configured ranges by weekday, preserving order (supports split shifts). */
+function byDay(days) {
+    const out = {};
+    for (const d of days) {
+        if (!d || !DAYS.includes(d.day))
+            continue;
+        (out[d.day] ??= []).push(d);
+    }
+    return out;
+}
+function rangeText(ranges) {
+    const open = ranges.filter((r) => !r.closed && r.open && r.close);
+    if (!open.length)
+        return { text: 'Closed', closed: true, data: '' };
+    const text = open.map((r) => `${escapeHtml(r.open)}–${escapeHtml(r.close)}`).join(', ');
+    const data = open.map((r) => `${r.open}-${r.close}`).join(',');
+    return { text, closed: false, data };
+}
+function render(config) {
+    const title = config.title;
+    const timezone = String(config.timezone ?? '').trim();
+    const note = config.note;
+    const grouped = byDay(config.days ?? []);
+    const rows = DAYS.map((day) => {
+        const { text, closed, data } = rangeText(grouped[day] ?? []);
+        return `<tr data-day="${day}"${data ? ` data-hours="${escapeAttr(data)}"` : ''}>
+        <th scope="row">${LABELS[day]}</th>
+        <td class="time${closed ? ' closed' : ''}">${text}</td>
+      </tr>`;
+    }).join('\n      ');
+    return `<section class="blk-hours" aria-label="${escapeAttr(title || 'Opening hours')}" data-wl-hours="true">
+  <div class="wrap">
+    <div class="head">
+      ${title ? `<h2>${escapeHtml(title)}${timezone ? ` <span class="tz">(${escapeHtml(timezone)})</span>` : ''}</h2>` : ''}
+      <span class="badge" data-hours-badge hidden></span>
+    </div>
+    <table>
+      <tbody>
+      ${rows}
+      </tbody>
+    </table>
+    ${note ? `<p class="note">${escapeHtml(note)}</p>` : ''}
+  </div>
+</section>`;
+}
+export const hours = {
+    type: 'hours',
+    description: '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.',
+    schema, css, render,
+    island: 'hours',
+};

package/lib/blocks/menu.d.ts

@@ -0,0 +1,2 @@
+import type { BlockSpec } from '../registry.js';
+export declare const menu: BlockSpec;

package/lib/blocks/menu.js

@@ -0,0 +1,93 @@
+/**
+ * `menu` — a food/drink menu: named sections, each a list of items with an
+ * optional price, dietary/allergen tags, and a 0–3 spice level. Static brick.
+ * `services-catalogue` approximates a flat item+price grid but has no menu
+ * semantics (sections, dietary tags, spice) — this block does.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Menu', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    sections: {
+        kind: 'array', max: 20,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: 'Section', max: 80 },
+                note: { kind: 'string', default: '', max: 200 },
+                items: {
+                    kind: 'array', max: 40,
+                    of: {
+                        kind: 'object',
+                        fields: {
+                            name: { kind: 'string', required: true, default: 'Item', max: 100 },
+                            description: { kind: 'string', default: '', max: 300 },
+                            price: { kind: 'string', default: '', max: 40 },
+                            tags: { kind: 'array', max: 8, of: { kind: 'string', default: '', max: 12 } },
+                            spice: { kind: 'int', default: 0, min: 0, max: 3 },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+const css = `
+.blk-menu{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-menu .wrap{max-width:820px;margin:0 auto}
+.blk-menu .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-menu h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-menu .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-menu .section{margin-top:var(--space-lg)}
+.blk-menu .section:first-of-type{margin-top:0}
+.blk-menu h3{font-size:var(--fs-lg);margin:0 0 .1em;font-weight:700;border-bottom:2px solid color-mix(in srgb,var(--text) 12%,transparent);padding-bottom:.3em}
+.blk-menu .section-note{color:var(--muted);font-size:var(--fs-base);margin:.3em 0 0}
+.blk-menu .item{display:grid;grid-template-columns:1fr auto;gap:.2em .8em;padding:calc(var(--space)*.7) 0;border-bottom:1px dashed color-mix(in srgb,var(--text) 10%,transparent)}
+.blk-menu .item .name{font-weight:700}
+.blk-menu .item .price{color:var(--accent);font-weight:700;white-space:nowrap}
+.blk-menu .item .desc{grid-column:1/-1;color:var(--muted);margin:.15em 0 0}
+.blk-menu .tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35em;margin-top:.35em}
+.blk-menu .tag{font-size:var(--fs-base);font-weight:600;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);border-radius:999px;padding:.1em .6em}
+.blk-menu .spice{color:#d9480f}
+`.trim();
+function itemRow(it) {
+    const spice = it.spice > 0 ? ` <span class="spice" aria-label="spice level ${Math.min(3, it.spice)}">${'🌶️'.repeat(Math.min(3, it.spice))}</span>` : '';
+    const tags = (it.tags ?? []).filter(Boolean);
+    const tagRow = tags.length ? `<div class="tags">${tags.map((t) => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</div>` : '';
+    return `<div class="item">
+        <span class="name">${escapeHtml(it.name)}${spice}</span>
+        ${it.price ? `<span class="price">${escapeHtml(it.price)}</span>` : '<span></span>'}
+        ${it.description ? `<p class="desc">${escapeHtml(it.description)}</p>` : ''}
+        ${tagRow}
+      </div>`;
+}
+function section(s) {
+    const items = (s.items ?? []).map(itemRow).join('\n      ');
+    return `<div class="section">
+      <h3>${escapeHtml(s.name)}</h3>
+      ${s.note ? `<p class="section-note">${escapeHtml(s.note)}</p>` : ''}
+      ${items}
+    </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const sections = (config.sections ?? []).filter((s) => s && s.name);
+    const head = (title || subtitle)
+        ? `<div class="head">
+      ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+      ${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ''}
+    </div>`
+        : '';
+    return `<section class="blk-menu" aria-label="${escapeAttr(title || 'Menu')}">
+  <div class="wrap">
+    ${head}
+    ${sections.map(section).join('\n    ')}
+  </div>
+</section>`;
+}
+export const menu = {
+    type: 'menu',
+    description: '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.',
+    schema, css, render,
+};

package/lib/blocks/product.d.ts

@@ -0,0 +1,2 @@
+import type { BlockSpec } from '../registry.js';
+export declare const product: BlockSpec;

package/lib/blocks/product.js

@@ -0,0 +1,92 @@
+/**
+ * `product` — a shoppable product grid: each item has an image, price, optional
+ * badge, and a buy/enquire link. Static brick. `pricing` is subscription tiers
+ * and `gallery` is images-only; neither is a per-item shop grid. The actual
+ * cart/checkout is the host's job — each card links out (or to a host page).
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    columns: { kind: 'int', oneOf: [2, 3, 4], default: 3 },
+    items: {
+        kind: 'array', max: 48,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: 'Product', max: 100 },
+                description: { kind: 'string', default: '', max: 240 },
+                price: { kind: 'string', default: '', max: 40 },
+                was: { kind: 'string', default: '', max: 40 },
+                image: { kind: 'string', default: '', max: 500 },
+                badge: { kind: 'string', default: '', max: 24 },
+                ctaLabel: { kind: 'string', default: 'Buy', max: 40 },
+                ctaHref: { kind: 'string', default: '#', max: 500 },
+            },
+        },
+    },
+};
+const css = `
+.blk-product{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-product .wrap{max-width:1120px;margin:0 auto}
+.blk-product .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-product h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-product .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-product .grid{display:grid;gap:calc(var(--space)*1.1);grid-template-columns:repeat(var(--cols,3),1fr)}
+@media (max-width:900px){.blk-product .grid{grid-template-columns:repeat(2,1fr)}}
+@media (max-width:560px){.blk-product .grid{grid-template-columns:1fr}}
+.blk-product .card{background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
+.blk-product .media{position:relative;aspect-ratio:4/3;background:color-mix(in srgb,var(--text) 6%,transparent)}
+.blk-product .media img{width:100%;height:100%;object-fit:cover;display:block}
+.blk-product .badge{position:absolute;top:.6em;left:.6em;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:var(--fs-base);border-radius:999px;padding:.15em .7em}
+.blk-product .body{padding:calc(var(--space)*1.1);display:flex;flex-direction:column;gap:.4em;flex:1}
+.blk-product .name{font-weight:700;font-size:var(--fs-lg)}
+.blk-product .desc{color:var(--muted);margin:0}
+.blk-product .prices{display:flex;align-items:baseline;gap:.5em;margin-top:auto}
+.blk-product .price{color:var(--accent);font-weight:800;font-size:var(--fs-lg)}
+.blk-product .was{color:var(--muted);text-decoration:line-through;font-size:var(--fs-base)}
+.blk-product .cta{margin-top:.6em;text-align:center;font:inherit;font-weight:700;border-radius:var(--radius);padding:.6em 1em;background:var(--primary);color:var(--on-primary);text-decoration:none;display:block}
+`.trim();
+function card(it) {
+    const media = it.image
+        ? `<div class="media">${it.badge ? `<span class="badge">${escapeHtml(it.badge)}</span>` : ''}<img src="${escapeAttr(sanitizeUrl(it.image))}" alt="${escapeAttr(it.name)}" loading="lazy"></div>`
+        : (it.badge ? `<div class="media"><span class="badge">${escapeHtml(it.badge)}</span></div>` : '');
+    const prices = (it.price || it.was)
+        ? `<div class="prices">${it.price ? `<span class="price">${escapeHtml(it.price)}</span>` : ''}${it.was ? `<span class="was">${escapeHtml(it.was)}</span>` : ''}</div>`
+        : '';
+    const cta = it.ctaLabel ? `<a class="cta" href="${escapeAttr(sanitizeUrl(it.ctaHref))}">${escapeHtml(it.ctaLabel)}</a>` : '';
+    return `<article class="card">
+      ${media}
+      <div class="body">
+        <span class="name">${escapeHtml(it.name)}</span>
+        ${it.description ? `<p class="desc">${escapeHtml(it.description)}</p>` : ''}
+        ${prices}
+        ${cta}
+      </div>
+    </article>`;
+}
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const cols = config.columns || 3;
+    const items = (config.items ?? []).filter((i) => i && i.name);
+    const head = (title || subtitle)
+        ? `<div class="head">
+      ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+      ${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ''}
+    </div>`
+        : '';
+    return `<section class="blk-product" aria-label="${escapeAttr(title || 'Products')}">
+  <div class="wrap">
+    ${head}
+    <div class="grid" style="--cols:${cols}">
+      ${items.map(card).join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const product = {
+    type: 'product',
+    description: '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.',
+    schema, css, render,
+};

package/lib/blocks/reviews.d.ts

@@ -0,0 +1,2 @@
+import type { BlockSpec } from '../registry.js';
+export declare const reviews: BlockSpec;

package/lib/blocks/reviews.js

@@ -0,0 +1,96 @@
+/**
+ * `reviews` — star-rated customer reviews with an optional source (Google, Yelp,
+ * …) and an aggregate summary. Richer than `testimonials` quotes: each review
+ * carries a 1–5 star rating and where it came from. Static brick.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const SOURCES = ['google', 'yelp', 'facebook', 'trustpilot', 'tripadvisor', 'app-store', 'other'];
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    average: { kind: 'string', default: '', max: 8 },
+    count: { kind: 'string', default: '', max: 24 },
+    source: { kind: 'string', default: '', max: 40 },
+    items: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                rating: { kind: 'int', default: 5, min: 1, max: 5 },
+                quote: { kind: 'string', required: true, default: '', max: 500 },
+                author: { kind: 'string', default: '', max: 80 },
+                date: { kind: 'string', default: '', max: 40 },
+                source: { kind: 'enum', values: SOURCES, default: 'other' },
+            },
+        },
+    },
+};
+const css = `
+.blk-reviews{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-reviews .wrap{max-width:1080px;margin:0 auto}
+.blk-reviews .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-reviews h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-reviews .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-reviews .agg{display:inline-flex;align-items:baseline;gap:.5em;margin-top:.6em;font-weight:700}
+.blk-reviews .agg .score{font-size:var(--fs-lg);color:var(--accent)}
+.blk-reviews .agg .count{color:var(--muted);font-weight:400}
+.blk-reviews .stars{color:var(--accent);letter-spacing:.05em;font-size:1.05em;white-space:nowrap}
+.blk-reviews .stars .off{color:color-mix(in srgb,var(--text) 22%,transparent)}
+.blk-reviews .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:calc(var(--space)*1.2)}
+.blk-reviews .card{background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:var(--radius);padding:calc(var(--space)*1.3);display:flex;flex-direction:column;gap:.6em}
+.blk-reviews blockquote{margin:0;color:var(--text);line-height:1.5}
+.blk-reviews .by{color:var(--muted);font-weight:600;font-size:var(--fs-base)}
+.blk-reviews .by .src{font-weight:400;text-transform:capitalize}
+`.trim();
+/** A 1–5 star row with an accessible label. */
+function stars(rating) {
+    const n = Math.max(1, Math.min(5, Math.round(rating || 0)));
+    const filled = '★'.repeat(n);
+    const empty = n < 5 ? `<span class="off">${'★'.repeat(5 - n)}</span>` : '';
+    return `<span class="stars" role="img" aria-label="${n} out of 5 stars">${filled}${empty}</span>`;
+}
+function card(it) {
+    if (!it.quote)
+        return '';
+    const src = it.source && it.source !== 'other' ? it.source.replace(/-/g, ' ') : '';
+    const meta = [it.author, it.date].filter(Boolean).join(' · ');
+    const by = (meta || src)
+        ? `<div class="by">${escapeHtml(meta)}${src ? ` <span class="src">· via ${escapeHtml(src)}</span>` : ''}</div>`
+        : '';
+    return `<article class="card">
+        ${stars(it.rating)}
+        <blockquote>${escapeHtml(it.quote)}</blockquote>
+        ${by}
+      </article>`;
+}
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const average = String(config.average ?? '').trim();
+    const count = String(config.count ?? '').trim();
+    const source = String(config.source ?? '').trim();
+    const items = (config.items ?? []).map(card).filter(Boolean);
+    const agg = average
+        ? `<div class="agg">${stars(parseFloat(average))} <span class="score">${escapeHtml(average)}</span>${count ? ` <span class="count">from ${escapeHtml(count)} reviews${source ? ` on ${escapeHtml(source)}` : ''}</span>` : (source ? ` <span class="count">on ${escapeHtml(source)}</span>` : '')}</div>`
+        : '';
+    const head = (title || subtitle || agg)
+        ? `<div class="head">
+      ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+      ${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ''}
+      ${agg}
+    </div>`
+        : '';
+    return `<section class="blk-reviews" aria-label="${escapeAttr(title || 'Reviews')}">
+  <div class="wrap">
+    ${head}
+    <div class="grid">
+      ${items.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const reviews = {
+    type: 'reviews',
+    description: '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.',
+    schema, css, render,
+};

package/lib/generate.d.ts

@@ -4,7 +4,24 @@ export type ModelCall = (args: {
     system: string;
     user: string;
 }) => Promise<string>;
-export declare function buildGenerationPrompt(brief: string): {
+/** Optional levers for compose. All advisory — the model may still deviate. */
+export interface GenerateOptions {
+    /**
+     * A business-vertical id (`verticalNames()`). When set, its recommended
+     * section set + fitting preset are injected as defaults ("prefer these unless
+     * the brief says otherwise"). Unknown ids are ignored. See `verticals.ts`.
+     */
+    vertical?: string;
+    /**
+     * A starter **scaffold** to adapt: a template id (`templateNames()`) or a
+     * complete `SiteManifest`. When set, its structure + design are seeded into
+     * the prompt ("start from this, keep the section set unless the brief
+     * conflicts, rewrite the copy for THIS business"). Unknown ids are ignored;
+     * absent = blank-slate compose. See `templates.ts`.
+     */
+    template?: string | SiteManifest;
+}
+export declare function buildGenerationPrompt(brief: string, opts?: GenerateOptions): {
     system: string;
     user: string;
 };
@@ -15,7 +32,7 @@ export interface ComposeResult {
     warnings: string[];
 }
 /** Compose a manifest from a brief using the injected model. */
-export declare function generateSite(brief: string, callModel: ModelCall): Promise<ComposeResult>;
+export declare function generateSite(brief: string, callModel: ModelCall, opts?: GenerateOptions): Promise<ComposeResult>;
 /** Extract + coerce + validate a manifest from a model reply. Never throws. */
 export declare function parseManifestResponse(text: string): ComposeResult;
 export declare function buildEditPrompt(manifest: SiteManifest, message: string): {

package/lib/generate.js

@@ -11,11 +11,49 @@
 import { catalogPrompt } from './catalog.js';
 import { blockTypes } from './registry.js';
 import { presetNames } from './presets.js';
+import { getVertical } from './verticals.js';
+import { getTemplate } from './templates.js';
 import { normalizeTokens, DEFAULT_TOKENS } from './tokens.js';
 import { validateManifest } from './validate.js';
 import { applyOps } from './ops.js';
+/** Resolve the `template` option to a manifest (by id, or passed through). */
+function resolveTemplate(t) {
+    if (!t)
+        return undefined;
+    return typeof t === 'string' ? getTemplate(t)?.manifest : t;
+}
 // ── Compose: brief → manifest ──────────────────────────────────────────────────
-export function buildGenerationPrompt(brief) {
+/** Advisory guidance lines seeded from a chosen vertical (empty if none/unknown). */
+function verticalGuidance(v) {
+    if (!v)
+        return [];
+    return [
+        '',
+        `Business vertical: ${v.label} — aim for a ${v.tone} tone.`,
+        `Prefer these sections, in this order, unless the brief clearly calls for a different set: ${v.blocks.join(', ')}.`,
+        `Base the look on the "${v.preset}" preset unless the brief implies another mood.`,
+        ...(v.booking
+            ? ['This is an appointment/booking-driven business — the primary call-to-action should read like "Book" or "Reserve" and lead to a booking or contact section.']
+            : []),
+    ];
+}
+/** Advisory scaffold lines seeded from a template manifest (empty if none). */
+function templateGuidance(scaffold) {
+    if (!scaffold)
+        return [];
+    const structure = scaffold.blocks
+        .filter((b) => b.visible !== false)
+        .map((b) => ({ type: b.type, config: b.config }));
+    return [
+        '',
+        'Starter scaffold — START FROM THIS structure and adapt it (do NOT keep the placeholder copy):',
+        JSON.stringify({ design: scaffold.design, blocks: structure }),
+        'Keep this section set and order unless the brief clearly calls for a change; REWRITE every headline, label, and body for the business described in the brief so no placeholder text remains; keep the design coherent (retune the palette if the brief implies a different mood).',
+    ];
+}
+export function buildGenerationPrompt(brief, opts = {}) {
+    const vertical = opts.vertical ? getVertical(opts.vertical) : undefined;
+    const scaffold = resolveTemplate(opts.template);
     const system = [
         'You are a web designer that composes a single-page site by ARRANGING pre-built blocks.',
         'You do NOT write HTML, CSS, or JavaScript. You output ONLY a JSON site manifest.',
@@ -29,6 +67,8 @@ export function buildGenerationPrompt(brief) {
         '  mode:auto follows the viewer\'s OS light/dark; supply an optional darkPalette:{...same keys...} for the dark side.',
         '  (Text on primary/accent fills is auto-contrasted — never hand-set button text colours.)',
         `  (For a quick coherent look, base it on a named preset: ${presetNames().join(', ')}.)`,
+        ...verticalGuidance(vertical),
+        ...templateGuidance(scaffold),
         '',
         'Rules:',
         '- Use ONLY the block types listed above; never invent a type or a config key.',
@@ -40,8 +80,8 @@ export function buildGenerationPrompt(brief) {
     return { system, user: `Brief:\n${brief}` };
 }
 /** Compose a manifest from a brief using the injected model. */
-export async function generateSite(brief, callModel) {
-    const { system, user } = buildGenerationPrompt(brief);
+export async function generateSite(brief, callModel, opts = {}) {
+    const { system, user } = buildGenerationPrompt(brief, opts);
     const raw = await callModel({ system, user });
     return parseManifestResponse(raw);
 }

package/lib/index.d.ts

@@ -8,6 +8,8 @@
 export type { SiteManifest, Block, DesignTokens, Palette, SiteMeta, SectionOverrides, PwaConfig, SeoConfig, Mode, Scale, Radius, Spacing, Motion, } from './types.js';
 export { DEFAULT_TOKENS, normalizeTokens, tokensToCss, sectionOverrideCss, readableOn } from './tokens.js';
 export { PRESETS, presetNames, getPreset } from './presets.js';
+export { VERTICALS, verticalNames, getVertical, type Vertical } from './verticals.js';
+export { TEMPLATES, templateNames, templatesForVertical, getTemplate, type Template } from './templates.js';
 export { REGISTRY, getSpec, blockTypes, needsIsland, type BlockSpec, type RenderContext } from './registry.js';
 export { renderSite, type RenderOptions } from './render.js';
 export { NOOP_RUNTIME, pathRuntime, runtimeNeeds, type RuntimeAdapter, type RuntimeAction, type BlockRuntimeNeeds, } from './runtime.js';
@@ -17,4 +19,4 @@ export { parse, escapeHtml, escapeAttr, sanitizeUrl, slugify, type Field, type S
 export { renderMarkdown } from './markdown.js';
 export { catalog, catalogPrompt, type BlockCatalogEntry, type JsonSchema } from './catalog.js';
 export { applyOp, applyOps, type EditOp, type OpResult, type BatchResult } from './ops.js';
-export { generateSite, editSite, buildGenerationPrompt, buildEditPrompt, parseManifestResponse, parseOpsResponse, type ModelCall, type ComposeResult, type EditResult, } from './generate.js';
+export { generateSite, editSite, buildGenerationPrompt, buildEditPrompt, parseManifestResponse, parseOpsResponse, type ModelCall, type ComposeResult, type EditResult, type GenerateOptions, } from './generate.js';

package/lib/index.js

@@ -1,5 +1,7 @@
 export { DEFAULT_TOKENS, normalizeTokens, tokensToCss, sectionOverrideCss, readableOn } from './tokens.js';
 export { PRESETS, presetNames, getPreset } from './presets.js';
+export { VERTICALS, verticalNames, getVertical } from './verticals.js';
+export { TEMPLATES, templateNames, templatesForVertical, getTemplate } from './templates.js';
 export { REGISTRY, getSpec, blockTypes, needsIsland } from './registry.js';
 export { renderSite } from './render.js';
 export { NOOP_RUNTIME, pathRuntime, runtimeNeeds, } from './runtime.js';

package/lib/islands/hours.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/islands/hours.js

@@ -0,0 +1,69 @@
+/**
+ * `hours` island — makes the `hours` block's "open now / closed" badge live and
+ * highlights today, at VIEW time (so it's never frozen at generation time).
+ *
+ * Shipped from `@bytesbrains/weblocks/islands/hours.js`; served at the island URL
+ * the renderer emits (default `/_island/hours.js`). Zero dependencies,
+ * self-executing, idempotent, guarded by `typeof document`. Pure progressive
+ * enhancement: with no JS the full weekly table still renders correctly.
+ *
+ * Each `<tr data-day="mon" data-hours="09:00-17:00,18:00-21:00">` carries that
+ * day's ranges; a `[data-hours-badge]` in the block header is filled in.
+ */
+if (typeof document !== 'undefined') {
+    const DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; // JS getDay() order
+    const toMin = (hhmm) => {
+        const parts = (hhmm || '').split(':');
+        const h = parseInt(parts[0] ?? '', 10), m = parseInt(parts[1] ?? '', 10);
+        return Number.isFinite(h) && Number.isFinite(m) ? h * 60 + m : NaN;
+    };
+    const fmt = (min) => {
+        const h = Math.floor(min / 60) % 24, m = min % 60;
+        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    };
+    const ready = (fn) => document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', fn) : fn();
+    ready(() => {
+        document.querySelectorAll('[data-wl-hours]').forEach((block) => {
+            const now = new Date();
+            const todayKey = DAYS[now.getDay()];
+            const nowMin = now.getHours() * 60 + now.getMinutes();
+            let openNow = false;
+            let nextOpenMin = Infinity;
+            block.querySelectorAll('tr[data-day]').forEach((row) => {
+                const isToday = row.getAttribute('data-day') === todayKey;
+                if (isToday)
+                    row.setAttribute('data-today', 'true');
+                if (!isToday)
+                    return;
+                const ranges = (row.getAttribute('data-hours') || '').split(',').filter(Boolean);
+                for (const r of ranges) {
+                    const [o, c] = r.split('-');
+                    const open = toMin(o ?? ''), close = toMin(c ?? '');
+                    if (!Number.isFinite(open) || !Number.isFinite(close))
+                        continue;
+                    if (nowMin >= open && nowMin < close)
+                        openNow = true;
+                    if (open > nowMin && open < nextOpenMin)
+                        nextOpenMin = open;
+                }
+            });
+            const badge = block.querySelector('[data-hours-badge]');
+            if (!badge)
+                return;
+            if (openNow) {
+                badge.textContent = 'Open now';
+                badge.setAttribute('data-state', 'open');
+            }
+            else if (Number.isFinite(nextOpenMin)) {
+                badge.textContent = `Closed · opens ${fmt(nextOpenMin)}`;
+                badge.setAttribute('data-state', 'closed');
+            }
+            else {
+                badge.textContent = 'Closed';
+                badge.setAttribute('data-state', 'closed');
+            }
+            badge.hidden = false;
+        });
+    });
+}
+export {};

package/lib/registry.js

@@ -12,6 +12,8 @@ import { split } from './blocks/split.js';
 import { steps } from './blocks/steps.js';
 import { stats } from './blocks/stats.js';
 import { services } from './blocks/services.js';
+import { menu } from './blocks/menu.js';
+import { product } from './blocks/product.js';
 import { pricing } from './blocks/pricing.js';
 import { logos } from './blocks/logos.js';
 import { team } from './blocks/team.js';
@@ -24,10 +26,12 @@ import { timeline } from './blocks/timeline.js';
 import { tabs } from './blocks/tabs.js';
 import { accordion } from './blocks/accordion.js';
 import { testimonials } from './blocks/testimonials.js';
+import { reviews } from './blocks/reviews.js';
 import { faq } from './blocks/faq.js';
 import { blogList } from './blocks/blogList.js';
 import { blogPost } from './blocks/blogPost.js';
 import { feed } from './blocks/feed.js';
+import { booking } from './blocks/booking.js';
 import { contactForm } from './blocks/contactForm.js';
 import { newsletter } from './blocks/newsletter.js';
 import { search } from './blocks/search.js';
@@ -35,6 +39,7 @@ import { auth } from './blocks/auth.js';
 import { cta } from './blocks/cta.js';
 import { socialLinks } from './blocks/socialLinks.js';
 import { contactDetails } from './blocks/contactDetails.js';
+import { hours } from './blocks/hours.js';
 import { directions } from './blocks/directions.js';
 import { legal } from './blocks/legal.js';
 import { divider } from './blocks/divider.js';
@@ -54,17 +59,17 @@ const SPECS = [
     profileHeader, experience, skills,
     // content
     features, about, richText, split, steps, stats,
-    services, pricing, logos, team,
+    services, menu, product, pricing, logos, team,
     // media
     gallery, carousel, video, videoGallery, map,
     // structured content
-    timeline, tabs, accordion, testimonials, faq,
+    timeline, tabs, accordion, testimonials, reviews, faq,
     // collections
     blogList, blogPost, feed,
     // dynamic / powered
-    contactForm, newsletter, search, auth,
+    booking, contactForm, newsletter, search, auth,
     // conversion / contact
-    cta, socialLinks, contactDetails, directions, legal,
+    cta, socialLinks, contactDetails, hours, directions, legal,
     // rhythm
     divider, spacer,
     copyright, footer,