@bytesbrains/weblocks 0.2.0 → 0.4.0

package/AGENT.md

@@ -46,17 +46,19 @@ its exact config schema:
 - `catalogPrompt()` — a compact text menu for a system prompt.
 - `CATALOG.md` — the same, human-readable.
 
-The 37 block types, by group:
+The 40 block types, by group:
 
 - **Chrome/app-shell:** `nav`, `app-shell`, `sidebar`, `announcement-bar`, `footer`
 - **Heroes:** `hero`, `hero-app`
 - **Content:** `features`, `about`, `rich-text`, `split`, `steps`, `stats`,
   `services-catalogue`, `pricing`, `logos`, `team`
 - **Media:** `gallery`, `carousel`, `video`, `map`
+- **Location:** `directions` (deep links to open the visitor’s map app)
 - **Structured:** `timeline`, `tabs`, `accordion`, `testimonials`, `faq`
 - **Collections:** `blog-list`, `blog-post`, `feed`
-- **Dynamic (powered):** `contact-form`, `newsletter`, `auth`
+- **Dynamic (powered):** `contact-form`, `newsletter`, `search`, `auth`
 - **Conversion/rhythm:** `cta`, `social-links`, `contact-details`, `divider`, `spacer`
+- **Legal:** `legal` (terms/privacy links that open safe-Markdown dialogs; content is Markdown, never raw HTML)
 
 ## Composing a manifest
 
@@ -152,8 +154,8 @@ cheap:
 
 ## Powered (dynamic) blocks
 
-`contact-form`, `newsletter`, and `auth` need a backend. You still only fill their
-typed config (fields, labels, providers). The block declares the runtime
+`contact-form`, `newsletter`, `search`, and `auth` need a backend. You still only
+fill their typed config (fields, labels, providers, placeholder). The block declares the runtime
 capability it needs; the **host** wires the endpoint. If no runtime is wired, the
 block renders inert-but-valid — that is expected, not an error. Never put secrets,
 endpoints, captcha keys, or backend logic in the config.

package/CATALOG.md

@@ -1,8 +1,8 @@
-# @bytesbrains/weblocks — Block Catalog (v0.2.0)
+# @bytesbrains/weblocks — Block Catalog (v0.4.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` · `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` · `gallery` · `carousel` · `video` · `map` · `timeline` · `tabs` · `accordion` · `testimonials` · `faq` · `blog-list` · `blog-post` · `feed` · `contact-form` · `newsletter` · `auth` · `cta` · `social-links` · `contact-details` · `divider` · `spacer` · `footer`
+**Block types:** `app-shell` · `nav` · `announcement-bar` · `sidebar` · `hero` · `hero-app` · `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` · `gallery` · `carousel` · `video` · `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` · `footer`
 
 ## `app-shell`
 
@@ -315,6 +315,19 @@ An email-capture form that posts to a host-provided runtime; renders inert until
 | `submitLabel` | string |  |  |
 | `successMessage` | string |  |  |
 
+## `search`
+
+A site search rendered as a full search bar or a compact expanding icon button; queries a host-provided search runtime.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `layout` | undefined (bar\|icon) |  |  |
+| `placeholder` | string |  |  |
+| `label` | string |  |  |
+| `buttonLabel` | string |  |  |
+| `name` | string |  |  |
+| `align` | undefined (start\|center\|end) |  |  |
+
 ## `auth`
 
 A provider-agnostic sign in / sign up panel: social provider buttons and an optional email form that start auth via a host runtime.
@@ -358,6 +371,32 @@ A contact info block: address, phone, email, and opening hours (each optional).
 | `email` | string |  |  |
 | `hours` | string |  |  |
 
+## `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.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `place` | string |  |  |
+| `address` | string |  |  |
+| `lat` | string |  |  |
+| `lng` | string |  |  |
+| `mapUrl` | string |  |  |
+| `directionsLabel` | string |  |  |
+| `appleMaps` | boolean |  |  |
+
+## `legal`
+
+Policy links (terms, privacy, cookies, …) that open as scrollable, dismissible dialogs; each body is safe Markdown (never raw HTML). No JavaScript.
+
+| field | type | required | notes |
+|---|---|---|---|
+| `title` | string |  |  |
+| `align` | undefined (start\|center\|end) |  |  |
+| `separator` | string |  |  |
+| `documents` | array |  |  |
+
 ## `divider`
 
 A visual section break rendered as a thin line, a dotted rule, or a gradient bar.

package/CHANGELOG.md

@@ -5,6 +5,34 @@ 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.4.0 — 2026-07-16
+
+Additive and non-breaking — every `0.3.0` manifest still validates and renders
+identically. Catalog 39 → 40.
+
+### Added
+- **`legal` block** — policy links (Terms, Privacy, Cookies, …) that open as
+  **scrollable, dismissible dialogs** (pure CSS `:target`, no JavaScript). Each
+  document's body is authored in a **safe Markdown subset** (headings, lists,
+  links, emphasis, quotes, rules) — rich formatting, but **never raw HTML** (any
+  literal HTML is escaped, not executed). Exports `renderMarkdown`. Catalog now
+  40 blocks.
+
+## 0.3.0 — 2026-07-16
+
+Additive and non-breaking — every `0.2.0` manifest still validates and renders
+identically. Catalog 37 → 39.
+
+### Added
+- **`search` block** — site search rendered as a full **search bar** or a
+  compact **expanding icon button** (CSS-only, no JavaScript). A powered block
+  that queries a host `search.query` runtime; degrades to an inert, valid GET
+  form when unwired.
+- **`directions` block** — a location card with **deep links that open the
+  visitor’s map app for directions** (Google Maps universal URL + optional Apple
+  Maps), built from an address, GPS coordinates, or a pasted map link. Static,
+  no runtime. Catalog now 39 blocks.
+
 ## 0.2.0 — 2026-07-16
 
 Rich, app-like PWAs. Additive and **non-breaking**: every `0.1.0` manifest still

package/README.md

@@ -139,7 +139,7 @@ import catalogJson from '@bytesbrains/weblocks/catalog.json' with { type: 'json'
 
 ## Block catalog
 
-**37 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
+**40 typed blocks.** Full field reference in [`CATALOG.md`](./CATALOG.md).
 
 | Group | Blocks |
 |---|---|
@@ -147,10 +147,12 @@ import catalogJson from '@bytesbrains/weblocks/catalog.json' with { type: 'json'
 | Heroes | `hero` · `hero-app` |
 | Content | `features` · `about` · `rich-text` · `split` · `steps` · `stats` · `services-catalogue` · `pricing` · `logos` · `team` |
 | Media | `gallery` · `carousel` · `video` · `map` |
+| Location | `directions` (deep links to the visitor’s map app) |
 | Structured | `timeline` · `tabs` · `accordion` · `testimonials` · `faq` |
 | Collections | `blog-list` · `blog-post` · `feed` |
-| Dynamic (powered) | `contact-form` · `newsletter` · `auth` |
+| Dynamic (powered) | `contact-form` · `newsletter` · `search` · `auth` |
 | Conversion / rhythm | `cta` · `social-links` · `contact-details` · `divider` · `spacer` |
+| Legal | `legal` (terms/privacy links → safe-Markdown dialogs) |
 
 `rich-text` and `blog-post` carry **typed** content nodes (headings, paragraphs,
 quotes, lists) — a safe freeform-content escape hatch that is never raw HTML.

package/catalog.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "package": "@bytesbrains/weblocks",
-  "version": "0.2.0",
+  "version": "0.4.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",
@@ -34,10 +34,13 @@
     "feed",
     "contact-form",
     "newsletter",
+    "search",
     "auth",
     "cta",
     "social-links",
     "contact-details",
+    "directions",
+    "legal",
     "divider",
     "spacer",
     "footer"
@@ -1581,6 +1584,56 @@
         ]
       }
     },
+    {
+      "type": "search",
+      "description": "A site search rendered as a full search bar or a compact expanding icon button; queries a host-provided search runtime.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "layout": {
+            "enum": [
+              "bar",
+              "icon"
+            ],
+            "default": "bar"
+          },
+          "placeholder": {
+            "type": "string",
+            "maxLength": 80,
+            "default": "Search…"
+          },
+          "label": {
+            "type": "string",
+            "maxLength": 60,
+            "default": "Search"
+          },
+          "buttonLabel": {
+            "type": "string",
+            "maxLength": 40,
+            "default": "Search"
+          },
+          "name": {
+            "type": "string",
+            "maxLength": 40,
+            "default": "q"
+          },
+          "align": {
+            "enum": [
+              "start",
+              "center",
+              "end"
+            ],
+            "default": "center"
+          }
+        },
+        "additionalProperties": false
+      },
+      "runtime": {
+        "capabilities": [
+          "search.query"
+        ]
+      }
+    },
     {
       "type": "auth",
       "description": "A provider-agnostic sign in / sign up panel: social provider buttons and an optional email form that start auth via a host runtime.",
@@ -1761,6 +1814,111 @@
         "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.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "place": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "address": {
+            "type": "string",
+            "maxLength": 240,
+            "default": ""
+          },
+          "lat": {
+            "type": "string",
+            "maxLength": 24,
+            "default": ""
+          },
+          "lng": {
+            "type": "string",
+            "maxLength": 24,
+            "default": ""
+          },
+          "mapUrl": {
+            "type": "string",
+            "maxLength": 500,
+            "default": ""
+          },
+          "directionsLabel": {
+            "type": "string",
+            "maxLength": 40,
+            "default": "Get directions"
+          },
+          "appleMaps": {
+            "type": "boolean",
+            "default": true
+          }
+        },
+        "additionalProperties": false
+      }
+    },
+    {
+      "type": "legal",
+      "description": "Policy links (terms, privacy, cookies, …) that open as scrollable, dismissible dialogs; each body is safe Markdown (never raw HTML). No JavaScript.",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 120,
+            "default": ""
+          },
+          "align": {
+            "enum": [
+              "start",
+              "center",
+              "end"
+            ],
+            "default": "center"
+          },
+          "separator": {
+            "type": "string",
+            "maxLength": 4,
+            "default": "·"
+          },
+          "documents": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "label": {
+                  "type": "string",
+                  "maxLength": 60,
+                  "default": ""
+                },
+                "title": {
+                  "type": "string",
+                  "maxLength": 120,
+                  "default": ""
+                },
+                "content": {
+                  "type": "string",
+                  "maxLength": 40000,
+                  "default": ""
+                }
+              },
+              "required": [
+                "label"
+              ],
+              "additionalProperties": false
+            },
+            "maxItems": 8
+          }
+        },
+        "additionalProperties": false
+      }
+    },
     {
       "type": "divider",
       "description": "A visual section break rendered as a thin line, a dotted rule, or a gradient bar.",

package/lib/blocks/directions.d.ts

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

package/lib/blocks/directions.js

@@ -0,0 +1,98 @@
+/**
+ * `directions` — a location card with **deep links that open the visitor's map
+ * app for directions**. Unlike `map` (an inline embed), this is lightweight and
+ * link-based: give it an address, GPS coordinates, and/or a pasted map link, and
+ * it builds cross-platform "Get directions" links.
+ *
+ * - Google Maps universal URL (`.../maps/dir/?api=1&destination=…`) opens the
+ *   Google Maps app on iOS/Android when installed, else the web.
+ * - An optional Apple Maps link (`maps.apple.com/?daddr=…`) for iOS users.
+ * - GPS coordinates, when valid, are used as a precise destination.
+ *
+ * Static brick — no runtime, no JS. Links are built with `encodeURIComponent`;
+ * a pasted `mapUrl` is scheme-sanitized.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const PIN = '<svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s-7-6.5-7-11a7 7 0 0 1 14 0c0 4.5-7 11-7 11z"></path><circle cx="12" cy="10" r="2.5"></circle></svg>';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    place: { kind: 'string', default: '', max: 120 }, // name of the location
+    address: { kind: 'string', default: '', max: 240 }, // shown + query fallback
+    lat: { kind: 'string', default: '', max: 24 }, // GPS latitude  (e.g. 38.7223)
+    lng: { kind: 'string', default: '', max: 24 }, // GPS longitude (e.g. -9.1393)
+    mapUrl: { kind: 'string', default: '', max: 500 }, // a pasted Google/other map link
+    directionsLabel: { kind: 'string', default: 'Get directions', max: 40 },
+    appleMaps: { kind: 'boolean', default: true }, // also offer an Apple Maps link
+};
+const css = `
+.blk-directions{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-directions .wrap{max-width:640px;margin:0 auto}
+.blk-directions h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800;text-align:center}
+.blk-directions .card{display:flex;gap:1em;align-items:flex-start;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);border-radius:var(--radius);padding:calc(var(--space)*1.2)}
+.blk-directions .pin{flex:0 0 auto;display:inline-flex;color:var(--primary);line-height:0;padding-top:.15em}
+.blk-directions .info{flex:1;min-width:0}
+.blk-directions .place{margin:0;font-weight:700;font-size:var(--fs-lg)}
+.blk-directions .addr{margin:.25em 0 0;color:var(--muted)}
+.blk-directions .coords{margin:.25em 0 0;color:var(--muted);font-size:var(--fs-base);font-variant-numeric:tabular-nums}
+.blk-directions .actions{display:flex;flex-wrap:wrap;gap:.5em;margin-top:calc(var(--space)*.9)}
+.blk-directions .btn{display:inline-flex;align-items:center;gap:.4em;text-decoration:none;font-weight:600;font-size:var(--fs-base);padding:.55em 1em;border-radius:var(--radius);border:1px solid var(--primary);color:var(--primary);transition:opacity var(--motion),background var(--motion)}
+.blk-directions .btn.primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
+.blk-directions .btn:hover{opacity:.9}
+@media(max-width:440px){.blk-directions .card{flex-direction:column}.blk-directions .actions .btn{flex:1;justify-content:center}}
+`.trim();
+/** Parse a coordinate string to a valid lat/lng pair, or null. */
+function coords(latRaw, lngRaw) {
+    const latStr = String(latRaw ?? '').trim();
+    const lngStr = String(lngRaw ?? '').trim();
+    if (!latStr || !lngStr)
+        return null; // empty → not set (Number('') is 0, so guard first)
+    const lat = Number(latStr);
+    const lng = Number(lngStr);
+    if (!Number.isFinite(lat) || !Number.isFinite(lng))
+        return null;
+    if (Math.abs(lat) > 90 || Math.abs(lng) > 180)
+        return null;
+    return { lat, lng };
+}
+function render(config) {
+    const title = config.title;
+    const place = config.place;
+    const address = config.address;
+    const gps = coords(config.lat, config.lng);
+    const mapUrl = sanitizeUrl(config.mapUrl);
+    const hasMapUrl = mapUrl !== '#' && !!config.mapUrl;
+    const directionsLabel = config.directionsLabel || 'Get directions';
+    const appleMaps = config.appleMaps !== false;
+    // Precise coords win as the destination; else the address; else the place name.
+    const dest = gps ? `${gps.lat},${gps.lng}` : (address || place);
+    const enc = dest ? encodeURIComponent(dest) : '';
+    const gDir = enc ? `https://www.google.com/maps/dir/?api=1&destination=${enc}` : '';
+    const aDir = enc ? `https://maps.apple.com/?daddr=${enc}` : '';
+    const btn = (href, label, primary = false) => `<a class="btn${primary ? ' primary' : ''}" href="${escapeAttr(href)}" target="_blank" rel="noopener">${escapeHtml(label)}</a>`;
+    const actions = [
+        gDir && btn(gDir, directionsLabel, true),
+        appleMaps && aDir && btn(aDir, 'Apple Maps'),
+        hasMapUrl && btn(mapUrl, 'Open map'),
+    ].filter(Boolean).join('\n          ');
+    return `<section class="blk-directions" aria-label="${escapeAttr(title || place || 'Directions')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="card">
+      <span class="pin" aria-hidden="true">${PIN}</span>
+      <div class="info">
+        ${place ? `<p class="place">${escapeHtml(place)}</p>` : ''}
+        ${address ? `<p class="addr">${escapeHtml(address)}</p>` : ''}
+        ${gps ? `<p class="coords">${escapeHtml(`${gps.lat}, ${gps.lng}`)}</p>` : ''}
+        ${actions ? `<div class="actions">\n          ${actions}\n        </div>` : ''}
+      </div>
+    </div>
+  </div>
+</section>`;
+}
+export const directions = {
+    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.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/legal.d.ts

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

package/lib/blocks/legal.js

@@ -0,0 +1,100 @@
+/**
+ * `legal` — policy links (Terms, Privacy, Cookies, …) that open as **scrollable,
+ * dismissible dialogs**. Each document's body is authored in a SAFE Markdown
+ * subset (see markdown.ts) — rich formatting, but never raw HTML (any literal
+ * HTML is escaped, not executed). Static brick: the dialog is pure CSS
+ * (`:target`), so it works with zero JavaScript — click a link to open, click
+ * the ✕ or the backdrop to dismiss.
+ *
+ * Drop it near the `footer` for the familiar "Terms · Privacy" footer row.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+import { renderMarkdown } from '../markdown.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    align: { kind: 'enum', values: ['start', 'center', 'end'], default: 'center' },
+    separator: { kind: 'string', default: '·', max: 4 },
+    documents: {
+        kind: 'array', max: 8,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 60 }, // link text
+                title: { kind: 'string', default: '', max: 120 }, // dialog heading (defaults to label)
+                content: { kind: 'string', default: '', max: 40000 }, // Markdown body
+            },
+        },
+    },
+};
+const css = `
+.blk-legal{padding:var(--space) var(--space);background:var(--bg);color:var(--text)}
+.blk-legal .links{display:flex;flex-wrap:wrap;align-items:center;gap:.35em .8em;max-width:1080px;margin:0 auto}
+.blk-legal.align-center .links{justify-content:center}
+.blk-legal.align-end .links{justify-content:flex-end}
+.blk-legal .lead{color:var(--muted);font-size:var(--fs-base)}
+.blk-legal .links a.open{color:var(--muted);text-decoration:none;font-size:var(--fs-base);border-bottom:1px solid transparent}
+.blk-legal .links a.open:hover,.blk-legal .links a.open:focus-visible{color:var(--primary);border-bottom-color:currentColor}
+.blk-legal .sep{color:var(--muted);opacity:.6;user-select:none}
+/* Dialog — hidden until its id is the URL :target. */
+.blk-legal .modal{position:fixed;inset:0;z-index:1000;display:none;padding:calc(var(--space)*1.2)}
+.blk-legal .modal:target{display:grid;place-items:center}
+.blk-legal .backdrop{position:absolute;inset:0;background:color-mix(in srgb,#000 55%,transparent);border:0;display:block}
+.blk-legal .panel{position:relative;display:flex;flex-direction:column;width:min(680px,100%);max-height:85vh;background:var(--surface);color:var(--text);border-radius:var(--radius);box-shadow:0 24px 60px -12px rgba(0,0,0,.5);overflow:hidden}
+.blk-legal .pbar{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:calc(var(--space)*1.1) calc(var(--space)*1.3);border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent)}
+.blk-legal .pbar h2{margin:0;font-size:var(--fs-lg);font-weight:800}
+.blk-legal .close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2em;height:2em;border-radius:999px;text-decoration:none;color:var(--muted);font-size:1.3em;line-height:1;background:color-mix(in srgb,var(--text) 6%,transparent)}
+.blk-legal .close:hover,.blk-legal .close:focus-visible{color:var(--text);background:color-mix(in srgb,var(--text) 12%,transparent)}
+.blk-legal .body{overflow:auto;padding:calc(var(--space)*1.3);line-height:1.65;overscroll-behavior:contain}
+.blk-legal .body>:first-child{margin-top:0}
+.blk-legal .body>:last-child{margin-bottom:0}
+.blk-legal .body h2{font-size:var(--fs-lg);font-weight:800;margin:1.4em 0 .4em}
+.blk-legal .body h3{font-size:var(--fs-lg);font-weight:700;margin:1.2em 0 .3em}
+.blk-legal .body h4{font-size:var(--fs-base);font-weight:700;margin:1em 0 .3em;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
+.blk-legal .body p{margin:0 0 1em}
+.blk-legal .body ul,.blk-legal .body ol{margin:0 0 1em;padding-left:1.4em}
+.blk-legal .body li{margin:.3em 0}
+.blk-legal .body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
+.blk-legal .body blockquote{margin:1em 0;padding:.2em 0 .2em 1em;border-left:3px solid var(--accent);color:var(--muted)}
+.blk-legal .body code{background:color-mix(in srgb,var(--text) 8%,transparent);padding:.1em .35em;border-radius:4px;font-size:.9em}
+.blk-legal .body hr{border:0;border-top:1px solid color-mix(in srgb,var(--text) 15%,transparent);margin:1.4em 0}
+/* Lock background scroll while a dialog is open (progressive; no-op if unsupported). */
+html:has(.blk-legal .modal:target){overflow:hidden}
+`.trim();
+function render(config, _tokens, ctx) {
+    const bid = String(ctx?.id ?? 'legal').replace(/[^A-Za-z0-9_-]/g, '') || 'legal';
+    const title = config.title;
+    const align = ['start', 'center', 'end'].includes(config.align) ? config.align : 'center';
+    const sep = escapeHtml(config.separator || '·');
+    const docs = (config.documents ?? []).filter((d) => d && d.label);
+    const links = docs
+        .map((d, i) => `<a class="open" id="open-${bid}-${i}" href="#${bid}-${i}">${escapeHtml(d.label)}</a>`)
+        .join(`<span class="sep" aria-hidden="true">${sep}</span>`);
+    const dialogs = docs.map((d, i) => {
+        const did = `${bid}-${i}`;
+        const heading = d.title || d.label;
+        return `<div class="modal" id="${did}" role="dialog" aria-modal="true" aria-labelledby="h-${did}">
+    <a class="backdrop" href="#open-${did}" aria-label="Close" tabindex="-1"></a>
+    <div class="panel">
+      <div class="pbar">
+        <h2 id="h-${did}">${escapeHtml(heading)}</h2>
+        <a class="close" href="#open-${did}" aria-label="Close dialog">&times;</a>
+      </div>
+      <div class="body">${renderMarkdown(d.content)}</div>
+    </div>
+  </div>`;
+    }).join('\n  ');
+    return `<section class="blk-legal align-${align}" aria-label="${escapeAttr(title || 'Legal')}">
+  <div class="links">
+    ${title ? `<span class="lead">${escapeHtml(title)}</span>` : ''}
+    ${links}
+  </div>
+  ${dialogs}
+</section>`;
+}
+export const legal = {
+    type: 'legal',
+    description: 'Policy links (terms, privacy, cookies, …) that open as scrollable, dismissible dialogs; each body is safe Markdown (never raw HTML). No JavaScript.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/search.d.ts

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

package/lib/blocks/search.js

@@ -0,0 +1,75 @@
+/**
+ * `search` — site search as either a full **bar** or a compact **icon** button
+ * that expands on focus (CSS-only, no JavaScript). Powered brick (§6): the query
+ * target is resolved by the host via the `search.query` capability. With no
+ * runtime wired it degrades to a harmless same-page GET form, keeping the
+ * `data-wl-*` hooks so a host can enhance it client-side.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+import { NOOP_RUNTIME, safeMethod } from '../runtime.js';
+const CAPABILITY = 'search.query';
+// Inline magnifier — self-contained, inherits colour via currentColor.
+const ICON = '<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="20" y1="20" x2="16.65" y2="16.65"></line></svg>';
+const schema = {
+    layout: { kind: 'enum', values: ['bar', 'icon'], default: 'bar' },
+    placeholder: { kind: 'string', default: 'Search…', max: 80 },
+    label: { kind: 'string', default: 'Search', max: 60 }, // accessible name
+    buttonLabel: { kind: 'string', default: 'Search', max: 40 }, // submit text (bar layout)
+    name: { kind: 'string', default: 'q', max: 40 }, // query param name
+    align: { kind: 'enum', values: ['start', 'center', 'end'], default: 'center' },
+};
+const css = `
+.blk-search{padding:var(--space) var(--space);background:var(--bg);color:var(--text);display:flex}
+.blk-search.align-start{justify-content:flex-start}
+.blk-search.align-center{justify-content:center}
+.blk-search.align-end{justify-content:flex-end}
+.blk-search .field{display:flex;align-items:center;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);border-radius:var(--radius);transition:border-color var(--motion),box-shadow var(--motion)}
+.blk-search .field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
+.blk-search .ico{display:inline-flex;align-items:center;justify-content:center;padding:.5em .2em .5em .65em;color:var(--muted);cursor:text;line-height:0}
+.blk-search .input{font:inherit;color:inherit;background:transparent;border:0;outline:0;padding:.55em .5em;min-width:0}
+.blk-search .input::placeholder{color:var(--muted)}
+.blk-search .go{display:inline-flex;align-items:center;font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);white-space:nowrap}
+.blk-search .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+/* Bar: input always open, text submit button. */
+.blk-search.layout-bar .field{width:min(520px,100%)}
+.blk-search.layout-bar .input{flex:1}
+.blk-search.layout-bar .go{background:var(--primary);color:var(--on-primary);padding:.5em 1em;margin:3px}
+.blk-search.layout-bar .go:hover{opacity:.9}
+/* Icon: collapsed magnifier that expands on focus-within; Enter submits. */
+.blk-search.layout-icon .field{border-radius:999px}
+.blk-search.layout-icon .input{width:0;padding-left:0;padding-right:0;opacity:0;transition:width var(--motion),opacity var(--motion),padding var(--motion)}
+.blk-search.layout-icon .field:focus-within .input{width:min(240px,60vw);opacity:1;padding:.55em .5em .55em .2em}
+.blk-search.layout-icon .go{display:none}
+@media(max-width:480px){.blk-search.layout-icon .field:focus-within .input{width:52vw}}
+`.trim();
+function render(config, _tokens, ctx) {
+    const id = ctx?.id ?? 'search';
+    const runtime = ctx?.runtime ?? NOOP_RUNTIME;
+    const layout = config.layout === 'icon' ? 'icon' : 'bar';
+    const align = ['start', 'center', 'end'].includes(config.align) ? config.align : 'center';
+    const label = config.label || 'Search';
+    const placeholder = config.placeholder;
+    const buttonLabel = config.buttonLabel || 'Search';
+    const qname = String(config.name ?? 'q').replace(/[^A-Za-z0-9_-]/g, '') || 'q';
+    const fid = `s-${String(id).replace(/[^A-Za-z0-9_-]/g, '') || 'search'}`;
+    const action = runtime.resolve(CAPABILITY, id);
+    // Search is a query, so GET by default; the host adapter may override.
+    const method = action ? safeMethod(action.method) : 'get';
+    return `<section class="blk-search layout-${layout} align-${align}" aria-label="${escapeAttr(label)}">
+  <form class="wrap" role="search" method="${method}" action="${action ? escapeAttr(action.url) : '#'}" data-wl-capability="${CAPABILITY}" data-wl-block="${escapeAttr(id)}"${action ? '' : ' data-wl-inert="true"'}>
+    <div class="field">
+      <label class="ico" for="${escapeAttr(fid)}" aria-hidden="true">${ICON}</label>
+      <input class="input" id="${escapeAttr(fid)}" type="search" name="${escapeAttr(qname)}" placeholder="${escapeAttr(placeholder)}" aria-label="${escapeAttr(label)}" autocomplete="off">
+      <button class="go" type="submit"><span class="go-label">${escapeHtml(buttonLabel)}</span></button>
+    </div>
+  </form>
+</section>`;
+}
+export const search = {
+    type: 'search',
+    description: 'A site search rendered as a full search bar or a compact expanding icon button; queries a host-provided search runtime.',
+    schema,
+    css,
+    render,
+    runtime: { capabilities: [CAPABILITY] },
+};

package/lib/index.d.ts

@@ -14,6 +14,7 @@ export { NOOP_RUNTIME, pathRuntime, runtimeNeeds, type RuntimeAdapter, type Runt
 export { buildWebManifest, buildWebManifestJson, buildServiceWorker, emitPwa, type WebAppManifest, } from './pwa.js';
 export { validateBlock, validateManifest, type Validation } from './validate.js';
 export { parse, escapeHtml, escapeAttr, sanitizeUrl, type Field, type Schema, type ParseResult } from './schema.js';
+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';

package/lib/index.js

@@ -6,6 +6,7 @@ export { NOOP_RUNTIME, pathRuntime, runtimeNeeds, } from './runtime.js';
 export { buildWebManifest, buildWebManifestJson, buildServiceWorker, emitPwa, } from './pwa.js';
 export { validateBlock, validateManifest } from './validate.js';
 export { parse, escapeHtml, escapeAttr, sanitizeUrl } from './schema.js';
+export { renderMarkdown } from './markdown.js';
 export { catalog, catalogPrompt } from './catalog.js';
 export { applyOp, applyOps } from './ops.js';
 export { generateSite, editSite, buildGenerationPrompt, buildEditPrompt, parseManifestResponse, parseOpsResponse, } from './generate.js';

package/lib/markdown.d.ts

@@ -0,0 +1,2 @@
+/** Render a Markdown-subset string to safe HTML. */
+export declare function renderMarkdown(src: unknown): string;

package/lib/markdown.js

@@ -0,0 +1,90 @@
+/**
+ * A tiny, SAFE Markdown-subset renderer — escape-first, whitelist-only.
+ *
+ * This is NOT a raw-HTML passthrough (that would break the engine's no-injection
+ * invariant, see VISION.md §3). Every character of the source is HTML-escaped
+ * BEFORE any formatting is applied, so a literal `<script>` renders as text,
+ * never markup. Only a fixed set of safe elements is ever produced, and link
+ * hrefs are scheme-sanitized. Total: it never throws.
+ *
+ * Supported:
+ *   #, ##, ###…        headings (→ h2…h6)
+ *   -  or  *           unordered list        1.  ordered list
+ *   >                  blockquote            --- / *** / ___  horizontal rule
+ *   blank line         paragraph break
+ *   **bold**  *italic*  _italic_  `code`  [text](url)
+ */
+import { escapeHtml, sanitizeUrl } from './schema.js';
+/** Inline formatting. Operates on ALREADY-ESCAPED text; only adds safe tags. */
+function inline(escaped) {
+    let s = escaped;
+    // `code` first, so its contents aren't touched by the emphasis rules.
+    s = s.replace(/`([^`]+)`/g, (_m, c) => `<code>${c}</code>`);
+    // [text](url) — url is taken from escaped text (already attribute-safe) and
+    // scheme-sanitized; not re-escaped (that would double-encode `&`).
+    s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, text, url) => `<a href="${sanitizeUrl(url)}" rel="noopener">${text}</a>`);
+    s = s.replace(/\*\*([^*]+)\*\*/g, (_m, t) => `<strong>${t}</strong>`);
+    s = s.replace(/(^|[^*])\*([^*\s][^*]*?)\*/g, (_m, pre, t) => `${pre}<em>${t}</em>`);
+    s = s.replace(/(^|[^_\w])_([^_]+)_/g, (_m, pre, t) => `${pre}<em>${t}</em>`);
+    return s;
+}
+const esc = (raw) => inline(escapeHtml(raw));
+/** Render a Markdown-subset string to safe HTML. */
+export function renderMarkdown(src) {
+    const lines = String(src ?? '').replace(/\r\n?/g, '\n').split('\n');
+    const out = [];
+    let para = [];
+    const flush = () => { if (para.length) {
+        out.push(`<p>${esc(para.join(' '))}</p>`);
+        para = [];
+    } };
+    for (let i = 0; i < lines.length;) {
+        const t = lines[i].trim();
+        if (!t) {
+            flush();
+            i++;
+            continue;
+        }
+        if (/^(-{3,}|\*{3,}|_{3,})$/.test(t)) {
+            flush();
+            out.push('<hr>');
+            i++;
+            continue;
+        }
+        const h = /^(#{1,6})\s+(.*)$/.exec(t);
+        if (h) {
+            flush();
+            out.push(`<h${Math.min(h[1].length + 1, 6)}>${esc(h[2].trim())}</h${Math.min(h[1].length + 1, 6)}>`);
+            i++;
+            continue;
+        }
+        if (/^>\s?/.test(t)) {
+            flush();
+            const q = [];
+            for (; i < lines.length && /^>\s?/.test(lines[i].trim()); i++)
+                q.push(lines[i].trim().replace(/^>\s?/, ''));
+            out.push(`<blockquote>${esc(q.join(' '))}</blockquote>`);
+            continue;
+        }
+        if (/^[-*]\s+/.test(t)) {
+            flush();
+            const items = [];
+            for (; i < lines.length && /^[-*]\s+/.test(lines[i].trim()); i++)
+                items.push(lines[i].trim().replace(/^[-*]\s+/, ''));
+            out.push(`<ul>${items.map((it) => `<li>${esc(it)}</li>`).join('')}</ul>`);
+            continue;
+        }
+        if (/^\d+\.\s+/.test(t)) {
+            flush();
+            const items = [];
+            for (; i < lines.length && /^\d+\.\s+/.test(lines[i].trim()); i++)
+                items.push(lines[i].trim().replace(/^\d+\.\s+/, ''));
+            out.push(`<ol>${items.map((it) => `<li>${esc(it)}</li>`).join('')}</ol>`);
+            continue;
+        }
+        para.push(t);
+        i++;
+    }
+    flush();
+    return out.join('\n');
+}

package/lib/registry.js

@@ -26,10 +26,13 @@ import { blogPost } from './blocks/blogPost.js';
 import { feed } from './blocks/feed.js';
 import { contactForm } from './blocks/contactForm.js';
 import { newsletter } from './blocks/newsletter.js';
+import { search } from './blocks/search.js';
 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 { directions } from './blocks/directions.js';
+import { legal } from './blocks/legal.js';
 import { divider } from './blocks/divider.js';
 import { spacer } from './blocks/spacer.js';
 import { appShell } from './blocks/appShell.js';
@@ -52,9 +55,9 @@ const SPECS = [
     // collections
     blogList, blogPost, feed,
     // dynamic / powered
-    contactForm, newsletter, auth,
+    contactForm, newsletter, search, auth,
     // conversion / contact
-    cta, socialLinks, contactDetails,
+    cta, socialLinks, contactDetails, directions, legal,
     // rhythm
     divider, spacer,
     footer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytesbrains/weblocks",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Block engine for AI-composable web apps — the AI composes a SiteManifest from a fixed block catalog; the engine validates and renders it to static HTML. Snap-together \"Lego\" web building blocks, shareable across repos.",
   "keywords": [
     "ai",
@@ -18,7 +18,9 @@
   "license": "MIT",
   "author": "bytesbrains",
   "type": "module",
-  "engines": { "node": ">=20" },
+  "engines": {
+    "node": ">=20"
+  },
   "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
@@ -47,8 +49,12 @@
     "url": "git+https://github.com/bytesbrains/weblocks.git"
   },
   "homepage": "https://github.com/bytesbrains/weblocks#readme",
-  "bugs": { "url": "https://github.com/bytesbrains/weblocks/issues" },
-  "publishConfig": { "access": "public" },
+  "bugs": {
+    "url": "https://github.com/bytesbrains/weblocks/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "emit:catalog": "node scripts/emit-catalog.mjs",