@bytesbrains/weblocks 0.6.2 → 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.2",
+  "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/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;