@bytesbrains/weblocks 0.6.1 → 0.7.0

package/catalog.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "package": "@bytesbrains/weblocks",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Block catalog for @bytesbrains/weblocks. Send this to the model as its API reference; it composes a SiteManifest ({ meta, design, blocks[] }) using ONLY these block types. The engine then validates and renders it.",
   "blockTypes": [
     "app-shell",
@@ -20,6 +20,8 @@
     "steps",
     "stats",
     "services-catalogue",
+    "menu",
+    "product",
     "pricing",
     "logos",
     "team",
@@ -32,10 +34,12 @@
     "tabs",
     "accordion",
     "testimonials",
+    "reviews",
     "faq",
     "blog-list",
     "blog-post",
     "feed",
+    "booking",
     "contact-form",
     "newsletter",
     "search",
@@ -43,6 +47,7 @@
     "cta",
     "social-links",
     "contact-details",
+    "hours",
     "directions",
     "legal",
     "divider",
@@ -927,6 +932,174 @@
         "additionalProperties": false
       }
     },
+    {
+      "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": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": "Menu"
+          },
+          "subtitle": {
+            "type": "string",
+            "maxLength": 240,
+            "default": ""
+          },
+          "sections": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "maxLength": 80,
+                  "default": "Section"
+                },
+                "note": {
+                  "type": "string",
+                  "maxLength": 200,
+                  "default": ""
+                },
+                "items": {
+                  "type": "array",
+                  "items": {
+                    "type": "object",
+                    "properties": {
+                      "name": {
+                        "type": "string",
+                        "maxLength": 100,
+                        "default": "Item"
+                      },
+                      "description": {
+                        "type": "string",
+                        "maxLength": 300,
+                        "default": ""
+                      },
+                      "price": {
+                        "type": "string",
+                        "maxLength": 40,
+                        "default": ""
+                      },
+                      "tags": {
+                        "type": "array",
+                        "items": {
+                          "type": "string",
+                          "maxLength": 12,
+                          "default": ""
+                        },
+                        "maxItems": 8
+                      },
+                      "spice": {
+                        "type": "integer",
+                        "minimum": 0,
+                        "maximum": 3,
+                        "default": 0
+                      }
+                    },
+                    "required": [
+                      "name"
+                    ],
+                    "additionalProperties": false
+                  },
+                  "maxItems": 40
+                }
+              },
+              "required": [
+                "name"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 20
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    {
+      "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": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "subtitle": {
+            "type": "string",
+            "maxLength": 240,
+            "default": ""
+          },
+          "columns": {
+            "type": "integer",
+            "enum": [
+              2,
+              3,
+              4
+            ],
+            "default": 3
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "maxLength": 100,
+                  "default": "Product"
+                },
+                "description": {
+                  "type": "string",
+                  "maxLength": 240,
+                  "default": ""
+                },
+                "price": {
+                  "type": "string",
+                  "maxLength": 40,
+                  "default": ""
+                },
+                "was": {
+                  "type": "string",
+                  "maxLength": 40,
+                  "default": ""
+                },
+                "image": {
+                  "type": "string",
+                  "maxLength": 500,
+                  "default": ""
+                },
+                "badge": {
+                  "type": "string",
+                  "maxLength": 24,
+                  "default": ""
+                },
+                "ctaLabel": {
+                  "type": "string",
+                  "maxLength": 40,
+                  "default": "Buy"
+                },
+                "ctaHref": {
+                  "type": "string",
+                  "maxLength": 500,
+                  "default": "#"
+                }
+              },
+              "required": [
+                "name"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 48
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "pricing",
       "description": "A row of pricing/tier cards, each with a name, price, feature list, and a call-to-action button; one plan can be highlighted.",
@@ -1539,6 +1712,87 @@
         "additionalProperties": false
       }
     },
+    {
+      "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": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "subtitle": {
+            "type": "string",
+            "maxLength": 240,
+            "default": ""
+          },
+          "average": {
+            "type": "string",
+            "maxLength": 8,
+            "default": ""
+          },
+          "count": {
+            "type": "string",
+            "maxLength": 24,
+            "default": ""
+          },
+          "source": {
+            "type": "string",
+            "maxLength": 40,
+            "default": ""
+          },
+          "items": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "rating": {
+                  "type": "integer",
+                  "minimum": 1,
+                  "maximum": 5,
+                  "default": 5
+                },
+                "quote": {
+                  "type": "string",
+                  "maxLength": 500,
+                  "default": ""
+                },
+                "author": {
+                  "type": "string",
+                  "maxLength": 80,
+                  "default": ""
+                },
+                "date": {
+                  "type": "string",
+                  "maxLength": 40,
+                  "default": ""
+                },
+                "source": {
+                  "enum": [
+                    "google",
+                    "yelp",
+                    "facebook",
+                    "trustpilot",
+                    "tripadvisor",
+                    "app-store",
+                    "other"
+                  ],
+                  "default": "other"
+                }
+              },
+              "required": [
+                "quote"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 24
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "faq",
       "description": "An accordion of question/answer pairs. Expands/collapses natively (no JS).",
@@ -1773,6 +2027,99 @@
         "additionalProperties": false
       }
     },
+    {
+      "type": "booking",
+      "description": "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.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": "Book an appointment"
+          },
+          "intro": {
+            "type": "string",
+            "maxLength": 280,
+            "default": ""
+          },
+          "submitLabel": {
+            "type": "string",
+            "maxLength": 40,
+            "default": "Request booking"
+          },
+          "successMessage": {
+            "type": "string",
+            "maxLength": 200,
+            "default": "Thanks — we'll confirm your booking shortly."
+          },
+          "serviceLabel": {
+            "type": "string",
+            "maxLength": 60,
+            "default": "Service"
+          },
+          "services": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "maxLength": 80,
+                  "default": "Service"
+                },
+                "duration": {
+                  "type": "string",
+                  "maxLength": 40,
+                  "default": ""
+                },
+                "price": {
+                  "type": "string",
+                  "maxLength": 40,
+                  "default": ""
+                }
+              },
+              "required": [
+                "name"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 40
+          },
+          "askDate": {
+            "type": "boolean",
+            "default": true
+          },
+          "askTime": {
+            "type": "boolean",
+            "default": true
+          },
+          "askParty": {
+            "type": "boolean",
+            "default": false
+          },
+          "askPhone": {
+            "type": "boolean",
+            "default": true
+          },
+          "askNotes": {
+            "type": "boolean",
+            "default": true
+          },
+          "notesLabel": {
+            "type": "string",
+            "maxLength": 80,
+            "default": "Anything we should know?"
+          }
+        },
+        "additionalProperties": false
+      },
+      "runtime": {
+        "capabilities": [
+          "booking.request"
+        ]
+      }
+    },
     {
       "type": "contact-form",
       "description": "A configurable contact form with typed fields (text, email, tel, textarea, select, checkbox) that posts to a host-provided runtime. No raw HTML.",
@@ -2174,6 +2521,70 @@
         "additionalProperties": false
       }
     },
+    {
+      "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": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": "Opening hours"
+          },
+          "timezone": {
+            "type": "string",
+            "maxLength": 60,
+            "default": ""
+          },
+          "note": {
+            "type": "string",
+            "maxLength": 200,
+            "default": ""
+          },
+          "days": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "day": {
+                  "enum": [
+                    "mon",
+                    "tue",
+                    "wed",
+                    "thu",
+                    "fri",
+                    "sat",
+                    "sun"
+                  ],
+                  "default": "mon"
+                },
+                "open": {
+                  "type": "string",
+                  "maxLength": 5,
+                  "default": ""
+                },
+                "close": {
+                  "type": "string",
+                  "maxLength": 5,
+                  "default": ""
+                },
+                "closed": {
+                  "type": "boolean",
+                  "default": false
+                }
+              },
+              "required": [
+                "day"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 21
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "directions",
       "description": "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/lib/anchors.d.ts

@@ -0,0 +1,11 @@
+import type { Block } from './types.js';
+export interface Anchors {
+    /** blockId → the anchor id emitted on its section (absent = skipped). */
+    idFor: Map<string, string>;
+    /** Resolve a nav/CTA link (by hash, label, or alias) to a working href. */
+    resolve(href: unknown, label?: string): string;
+}
+/** Assign a unique anchor id to each anchorable block and build a link resolver. */
+export declare function buildAnchors(blocks: Block[]): Anchors;
+/** Insert an anchor `id` into the first element of a block's rendered HTML. */
+export declare function injectAnchorId(html: string, id: string): string;

package/lib/anchors.js

@@ -0,0 +1,77 @@
+/**
+ * In-page anchors — makes nav links actually scroll (issue #26).
+ *
+ * `renderSite` emits sections without ids, so `#about` / `#menu` resolve to
+ * nothing. This module computes a stable, de-duped anchor id per content section
+ * (a canonical slug that can differ from the block's short CSS class, e.g.
+ * `contact-details` → `contact`, `services-catalogue` → `services`) and resolves
+ * a nav/CTA link — by its `#hash`, its label, or a common alias — to a real id.
+ * Chrome blocks (nav, app-shell, sidebar, announcement-bar) and pure rhythm
+ * blocks get no anchor. Unresolved links fall back to `#` (top), never a dead
+ * anchor. Render-side, so re-rendering an existing manifest just works.
+ */
+import { slugify } from './schema.js';
+const SKIP = new Set(['nav', 'app-shell', 'sidebar', 'announcement-bar', 'divider', 'spacer']);
+/** Canonical anchor slug per block type (default = the type name). */
+const SECTION_SLUG = {
+    hero: 'home', 'hero-app': 'home', 'profile-header': 'home',
+    about: 'about',
+    'contact-details': 'contact', 'contact-form': 'contact',
+    'services-catalogue': 'services',
+    testimonials: 'reviews',
+    'blog-list': 'blog', 'blog-post': 'blog',
+    'video-gallery': 'videos',
+};
+/** Common nav-label slugs → the canonical section slug they mean. */
+const ALIAS = {
+    menu: 'services', catalog: 'services', catalogue: 'services', products: 'services', shop: 'services',
+    story: 'about', 'our-story': 'about', 'about-us': 'about', bio: 'about', 'who-we-are': 'about',
+    'get-in-touch': 'contact', 'contact-us': 'contact', 'reach-us': 'contact', reach: 'contact', hire: 'contact', 'hire-me': 'contact',
+    testimonials: 'reviews', feedback: 'reviews',
+    work: 'gallery', portfolio: 'gallery', photos: 'gallery',
+    questions: 'faq', help: 'faq',
+    plans: 'pricing', prices: 'pricing',
+};
+function sectionSlug(type) {
+    if (SKIP.has(type))
+        return null;
+    return SECTION_SLUG[type] ?? type;
+}
+/** Assign a unique anchor id to each anchorable block and build a link resolver. */
+export function buildAnchors(blocks) {
+    const idFor = new Map();
+    const ids = new Set(); // every emitted anchor id
+    const slugToId = new Map(); // canonical slug → first emitted id of that type
+    for (const b of blocks) {
+        const base = b && sectionSlug(b.type);
+        if (!base || !b.id)
+            continue;
+        let id = base;
+        for (let n = 2; ids.has(id); n++)
+            id = `${base}-${n}`; // de-dup repeats
+        ids.add(id);
+        idFor.set(b.id, id);
+        if (!slugToId.has(base))
+            slugToId.set(base, id);
+    }
+    // A slug → an existing anchor id: exact id (incl. de-duped like `features-2`),
+    // canonical slug, or a common alias. '' when nothing matches.
+    const lookup = (key) => (ids.has(key) ? key : slugToId.get(key) ?? slugToId.get(ALIAS[key] ?? '') ?? '');
+    const resolve = (href, label = '') => {
+        const raw = String(href ?? '').trim();
+        if (/^[a-z][a-z0-9+.-]*:/i.test(raw))
+            return raw; // scheme (http/mailto/tel/…) → external, untouched
+        if (raw && !raw.startsWith('#'))
+            return raw; // relative path/query → untouched
+        const key = slugify(raw.startsWith('#') && raw.length > 1 ? raw.slice(1) : label); // hash text, else label
+        if (!key || key === 'home' || key === 'top' || key === 'start')
+            return '#'; // Home/Top → page top
+        const id = lookup(key);
+        return id ? `#${id}` : '#'; // resolved anchor, else top (never a dead anchor)
+    };
+    return { idFor, resolve };
+}
+/** Insert an anchor `id` into the first element of a block's rendered HTML. */
+export function injectAnchorId(html, id) {
+    return html.replace(/^(\s*<[a-zA-Z][\w-]*)(\s|>)/, (_m, open, next) => `${open} id="${id}"${next}`);
+}

package/lib/blocks/booking.d.ts

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

package/lib/blocks/booking.js

@@ -0,0 +1,117 @@
+/**
+ * `booking` — an appointment/reservation request form. Powered brick (§6): the
+ * submit target is resolved by the host via the `booking.request` capability.
+ * With no runtime wired it renders inert-but-valid (disabled submit + a note)
+ * while keeping the `data-wl-*` hooks so a host can enhance it client-side.
+ *
+ * This is the home for the booking-driven verticals (salon, clinic, gym, hotel,
+ * events) — `contact-form` is generic and `auth` is login; neither fits. The
+ * safety-critical parts (availability, double-booking, delivery, spam) live in
+ * the host's vetted runtime, never in anything the AI emits. Works without JS
+ * via a native form post; a host `booking` island can enhance it (live slots).
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+import { NOOP_RUNTIME, safeMethod } from '../runtime.js';
+const CAPABILITY = 'booking.request';
+const schema = {
+    title: { kind: 'string', default: 'Book an appointment', max: 120 },
+    intro: { kind: 'string', default: '', max: 280 },
+    submitLabel: { kind: 'string', default: 'Request booking', max: 40 },
+    successMessage: { kind: 'string', default: "Thanks — we'll confirm your booking shortly.", max: 200 },
+    serviceLabel: { kind: 'string', default: 'Service', max: 60 },
+    services: {
+        kind: 'array', max: 40,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: 'Service', max: 80 },
+                duration: { kind: 'string', default: '', max: 40 },
+                price: { kind: 'string', default: '', max: 40 },
+            },
+        },
+    },
+    askDate: { kind: 'boolean', default: true },
+    askTime: { kind: 'boolean', default: true },
+    askParty: { kind: 'boolean', default: false },
+    askPhone: { kind: 'boolean', default: true },
+    askNotes: { kind: 'boolean', default: true },
+    notesLabel: { kind: 'string', default: 'Anything we should know?', max: 80 },
+};
+const css = `
+.blk-booking{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-booking .wrap{max-width:620px;margin:0 auto}
+.blk-booking h2{font-size:var(--fs-xl);margin:0 0 .2em;font-weight:800}
+.blk-booking .intro{color:var(--muted);margin:0 0 var(--space)}
+.blk-booking form{display:grid;gap:calc(var(--space)*.9)}
+.blk-booking .grid2{display:grid;gap:calc(var(--space)*.9);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
+.blk-booking label{display:grid;gap:.35em;font-weight:600}
+.blk-booking input,.blk-booking textarea,.blk-booking select{font:inherit;color:inherit;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:var(--radius);padding:.6em .7em;width:100%}
+.blk-booking textarea{min-height:6em;resize:vertical}
+.blk-booking button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.7em 1.2em;background:var(--primary);color:var(--on-primary);transition:opacity var(--motion)}
+.blk-booking button[disabled]{opacity:.55;cursor:not-allowed}
+.blk-booking .note{margin:.4em 0 0;font-size:var(--fs-base);color:var(--muted)}
+`.trim();
+function serviceLabel(s) {
+    const meta = [s.duration, s.price].filter(Boolean).join(' · ');
+    return meta ? `${s.name} (${meta})` : s.name;
+}
+function render(config, _tokens, ctx) {
+    const id = ctx?.id ?? 'booking';
+    const runtime = ctx?.runtime ?? NOOP_RUNTIME;
+    const title = config.title;
+    const intro = config.intro;
+    const submitLabel = config.submitLabel || 'Request booking';
+    const services = (config.services ?? []).filter((s) => s && s.name);
+    const action = runtime.resolve(CAPABILITY, id);
+    const base = `bk-${id}`;
+    const serviceField = services.length
+        ? `<label for="${escapeAttr(base)}-service">${escapeHtml(config.serviceLabel)}
+        <select id="${escapeAttr(base)}-service" name="service" required>
+          ${services.map((s) => `<option value="${escapeAttr(s.name)}">${escapeHtml(serviceLabel(s))}</option>`).join('\n          ')}
+        </select></label>`
+        : '';
+    const dateTime = (config.askDate || config.askTime)
+        ? `<div class="grid2">
+        ${config.askDate ? `<label for="${escapeAttr(base)}-date">Date<input id="${escapeAttr(base)}-date" type="date" name="date" required></label>` : ''}
+        ${config.askTime ? `<label for="${escapeAttr(base)}-time">Time<input id="${escapeAttr(base)}-time" type="time" name="time" required></label>` : ''}
+      </div>`
+        : '';
+    const party = config.askParty
+        ? `<label for="${escapeAttr(base)}-party">Party size<input id="${escapeAttr(base)}-party" type="number" name="party" min="1" inputmode="numeric"></label>`
+        : '';
+    const contact = `<div class="grid2">
+      <label for="${escapeAttr(base)}-name">Your name<input id="${escapeAttr(base)}-name" type="text" name="name" required></label>
+      <label for="${escapeAttr(base)}-email">Email<input id="${escapeAttr(base)}-email" type="email" name="email" required></label>
+    </div>`;
+    const phone = config.askPhone
+        ? `<label for="${escapeAttr(base)}-phone">Phone<input id="${escapeAttr(base)}-phone" type="tel" name="phone"></label>`
+        : '';
+    const notes = config.askNotes
+        ? `<label for="${escapeAttr(base)}-notes">${escapeHtml(config.notesLabel)}<textarea id="${escapeAttr(base)}-notes" name="notes"></textarea></label>`
+        : '';
+    return `<section class="blk-booking" aria-label="${escapeAttr(title || 'Booking')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${intro ? `<p class="intro">${escapeHtml(intro)}</p>` : ''}
+    <form method="${safeMethod(action?.method)}" action="${action ? escapeAttr(action.url) : '#'}" data-wl-capability="${CAPABILITY}" data-wl-block="${escapeAttr(id)}"${action ? '' : ' data-wl-inert="true"'}>
+      ${serviceField}
+      ${dateTime}
+      ${party}
+      ${contact}
+      ${phone}
+      ${notes}
+      <button type="submit"${action ? '' : ' disabled'}>${escapeHtml(submitLabel)}</button>
+      ${action ? '' : '<p class="note">This booking form needs a runtime to be wired before it can send.</p>'}
+    </form>
+  </div>
+</section>`;
+}
+export const booking = {
+    type: 'booking',
+    description: '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.',
+    schema,
+    css,
+    render,
+    island: 'booking',
+    runtime: { capabilities: [CAPABILITY] },
+};

package/lib/blocks/hours.d.ts

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