@bytesbrains/weblocks 0.2.0

package/lib/blocks/logos.js

@@ -0,0 +1,59 @@
+/** `logos` — a "trusted by" strip of client/partner logos. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Trusted by', max: 120 },
+    items: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                src: { kind: 'string', required: true, default: '', max: 500 },
+                alt: { kind: 'string', default: '', max: 120 },
+                href: { kind: 'string', default: '', max: 500 },
+            },
+        },
+    },
+};
+const css = `
+.blk-logos{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-logos .wrap{max-width:1120px;margin:0 auto;text-align:center}
+.blk-logos h2{font-size:var(--fs-lg);font-weight:700;color:var(--muted);margin:0 0 var(--space)}
+.blk-logos .strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(var(--space)*1.6)}
+.blk-logos .logo{display:inline-flex}
+.blk-logos img{display:block;height:2.2rem;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter var(--motion),opacity var(--motion)}
+.blk-logos .logo:hover img,.blk-logos a:hover img{filter:grayscale(0);opacity:1}
+@media(max-width:440px){.blk-logos .strip{gap:var(--space)}.blk-logos img{height:1.8rem}}
+`.trim();
+function logo(it) {
+    // Drop items with no source rather than emit a broken <img>.
+    if (!it.src)
+        return '';
+    const src = sanitizeUrl(it.src);
+    if (src === '#')
+        return '';
+    const img = `<img src="${escapeAttr(src)}" alt="${escapeAttr(it.alt)}" loading="lazy">`;
+    const href = sanitizeUrl(it.href);
+    const hasHref = href !== '#' && !!it.href;
+    return hasHref
+        ? `<a class="logo" href="${escapeAttr(href)}" rel="noopener">${img}</a>`
+        : `<span class="logo">${img}</span>`;
+}
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).map(logo).filter(Boolean);
+    return `<section class="blk-logos" aria-label="${escapeAttr(title || 'Logos')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="strip">
+      ${items.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const logos = {
+    type: 'logos',
+    description: 'A centered strip of client or partner logos (grayscale until hover), each optionally linking out, under a short heading.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/map.d.ts

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

package/lib/blocks/map.js

@@ -0,0 +1,43 @@
+/**
+ * `map` — a location map embedded from a place query. The query is URL-encoded
+ * into a standard maps embed; no raw URL is interpolated. Static brick (embed).
+ */
+import { escapeAttr } from '../schema.js';
+const schema = {
+    query: { kind: 'string', required: true, default: '', max: 200 },
+    zoom: { kind: 'int', min: 1, max: 20, default: 14 },
+    height: { kind: 'int', min: 160, max: 800, default: 360 },
+    label: { kind: 'string', default: '', max: 120 },
+};
+const css = `
+.blk-map{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-map .wrap{max-width:1000px;margin:0 auto}
+.blk-map .frame{border-radius:var(--radius);overflow:hidden;background:var(--surface)}
+.blk-map iframe{display:block;width:100%;border:0}
+.blk-map .more{display:inline-block;margin:.6em 0 0;color:var(--primary);font-weight:600;font-size:var(--fs-base);text-decoration:none}
+.blk-map .more:hover,.blk-map .more:focus-visible{text-decoration:underline}
+`.trim();
+function render(config) {
+    const query = String(config.query ?? '');
+    const zoom = Number.isInteger(config.zoom) ? config.zoom : 14;
+    const height = Number.isInteger(config.height) ? config.height : 360;
+    const label = config.label || query;
+    const enc = encodeURIComponent(query);
+    const embed = query ? `https://maps.google.com/maps?q=${enc}&z=${zoom}&output=embed` : '';
+    const link = `https://maps.google.com/maps?q=${enc}`;
+    return `<section class="blk-map" aria-label="${escapeAttr(label || 'Map')}">
+  <div class="wrap">
+    <div class="frame">
+      ${embed ? `<iframe src="${escapeAttr(embed)}" title="${escapeAttr(label || 'Map')}" height="${height}" loading="lazy"></iframe>` : ''}
+    </div>
+    ${query ? `<a class="more" href="${escapeAttr(link)}" rel="noopener" target="_blank">View larger map</a>` : ''}
+  </div>
+</section>`;
+}
+export const map = {
+    type: 'map',
+    description: 'An embedded location map for a place or address query, with configurable zoom and height and a link to the full map.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/nav.d.ts

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

package/lib/blocks/nav.js

@@ -0,0 +1,39 @@
+/** `nav` — header bar: brand, links, optional CTA. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    brand: { kind: 'string', required: true, default: 'Brand', max: 60 },
+    sticky: { kind: 'boolean', default: false },
+    links: {
+        kind: 'array', max: 8,
+        of: { kind: 'object', fields: { label: { kind: 'string', required: true, default: 'Link', max: 40 }, href: { kind: 'string', default: '#', max: 300 } } },
+    },
+    cta: { kind: 'object', fields: { label: { kind: 'string', default: '', max: 40 }, href: { kind: 'string', default: '#', max: 300 } } },
+};
+const css = `
+.blk-nav{background:var(--surface);border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)}
+.blk-nav[data-sticky="true"]{position:sticky;top:0;z-index:10}
+.blk-nav .wrap{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:calc(var(--space)*1.2);padding:.9rem var(--space)}
+.blk-nav .brand{font-weight:800;font-size:var(--fs-lg);color:var(--text);text-decoration:none}
+.blk-nav .links{display:flex;gap:calc(var(--space)*1.1);margin-left:auto;flex-wrap:wrap}
+.blk-nav .links a{color:var(--muted);text-decoration:none;font-weight:500}
+.blk-nav .links a:hover{color:var(--text)}
+.blk-nav .cta{background:var(--primary);color:var(--on-primary);padding:.5em 1.1em;border-radius:var(--radius);text-decoration:none;font-weight:600}
+`.trim();
+function render(config) {
+    const brand = config.brand;
+    const sticky = config.sticky;
+    const links = config.links ?? [];
+    const cta = config.cta;
+    const linkHtml = links.map((l) => `<a href="${escapeAttr(sanitizeUrl(l.href))}">${escapeHtml(l.label)}</a>`).join('');
+    return `<nav class="blk-nav" data-sticky="${sticky ? 'true' : 'false'}" aria-label="Primary">
+  <div class="wrap">
+    <a class="brand" href="#">${escapeHtml(brand)}</a>
+    <div class="links">${linkHtml}${cta.label ? `<a class="cta" href="${escapeAttr(sanitizeUrl(cta.href))}">${escapeHtml(cta.label)}</a>` : ''}</div>
+  </div>
+</nav>`;
+}
+export const nav = {
+    type: 'nav',
+    description: 'Top navigation bar: brand/logo text, a row of links, and an optional call-to-action button. Place first.',
+    schema, css, render,
+};

package/lib/blocks/newsletter.d.ts

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

package/lib/blocks/newsletter.js

@@ -0,0 +1,56 @@
+/**
+ * `newsletter` — email capture. Powered brick (§6): the submit target is resolved
+ * by the host via the `newsletter.subscribe` capability. With no runtime wired it
+ * renders inert-but-valid (disabled, with a note) while 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 = 'newsletter.subscribe';
+const schema = {
+    title: { kind: 'string', default: 'Subscribe to our newsletter', max: 120 },
+    intro: { kind: 'string', default: '', max: 240 },
+    placeholder: { kind: 'string', default: 'you@example.com', max: 80 },
+    submitLabel: { kind: 'string', default: 'Subscribe', max: 40 },
+    successMessage: { kind: 'string', default: "You're in — check your inbox.", max: 200 },
+};
+const css = `
+.blk-newsletter{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text);text-align:center}
+.blk-newsletter .wrap{max-width:560px;margin:0 auto}
+.blk-newsletter h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-newsletter .intro{color:var(--muted);margin:0 0 var(--space);font-size:var(--fs-lg)}
+.blk-newsletter form{display:flex;gap:.5em;flex-wrap:wrap;justify-content:center}
+.blk-newsletter input{flex:1 1 220px;font:inherit;color:inherit;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:var(--radius);padding:.7em .8em}
+.blk-newsletter button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.7em 1.4em;background:var(--primary);color:var(--on-primary);transition:opacity var(--motion)}
+.blk-newsletter button[disabled]{opacity:.55;cursor:not-allowed}
+.blk-newsletter .note{margin:.5em 0 0;font-size:var(--fs-base);color:var(--muted)}
+`.trim();
+function render(config, _tokens, ctx) {
+    const id = ctx?.id ?? 'newsletter';
+    const runtime = ctx?.runtime ?? NOOP_RUNTIME;
+    const title = config.title;
+    const intro = config.intro;
+    const placeholder = config.placeholder || 'you@example.com';
+    const submitLabel = config.submitLabel || 'Subscribe';
+    const action = runtime.resolve(CAPABILITY, id);
+    return `<section class="blk-newsletter" aria-label="${escapeAttr(title || 'Newsletter')}">
+  <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"'}>
+      <input type="email" name="email" placeholder="${escapeAttr(placeholder)}" aria-label="Email address" required>
+      <button type="submit"${action ? '' : ' disabled'}>${escapeHtml(submitLabel)}</button>
+    </form>
+    ${action ? '' : '<p class="note">Connect a runtime to start collecting subscribers.</p>'}
+  </div>
+</section>`;
+}
+export const newsletter = {
+    type: 'newsletter',
+    description: 'An email-capture form that posts to a host-provided runtime; renders inert until a runtime is wired.',
+    schema,
+    css,
+    render,
+    island: 'newsletter',
+    runtime: { capabilities: [CAPABILITY] },
+};

package/lib/blocks/pricing.d.ts

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

package/lib/blocks/pricing.js

@@ -0,0 +1,89 @@
+/** `pricing` — plan/tier cards with features and a CTA. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    plans: {
+        kind: 'array', max: 6,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: '', max: 60 },
+                price: { kind: 'string', required: true, default: '', max: 24 },
+                period: { kind: 'string', default: '', max: 24 }, // e.g. "/mo"
+                features: {
+                    kind: 'array', max: 12,
+                    of: { kind: 'string', default: '', max: 120 },
+                },
+                ctaLabel: { kind: 'string', default: 'Choose', max: 40 },
+                ctaHref: { kind: 'string', default: '', max: 500 },
+                featured: { kind: 'boolean', default: false },
+            },
+        },
+    },
+};
+const css = `
+.blk-pricing{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-pricing .wrap{max-width:1120px;margin:0 auto}
+.blk-pricing .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-pricing h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-pricing .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-pricing .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:calc(var(--space)*1.2);align-items:stretch}
+.blk-pricing .plan{display:flex;flex-direction:column;background:var(--surface);border:1px solid color-mix(in srgb,var(--muted) 30%,transparent);border-radius:var(--radius);padding:calc(var(--space)*1.2)}
+.blk-pricing .plan.featured{border:2px solid var(--primary);position:relative}
+.blk-pricing .badge{position:absolute;top:-.8em;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--on-primary);font-size:var(--fs-base);font-weight:700;padding:.15em .8em;border-radius:var(--radius)}
+.blk-pricing .name{font-size:var(--fs-lg);font-weight:700;margin:0 0 .3em}
+.blk-pricing .price{font-size:var(--fs-xl);font-weight:800;margin:0 0 .6em}
+.blk-pricing .price .period{font-size:var(--fs-base);font-weight:500;color:var(--muted)}
+.blk-pricing ul{list-style:none;margin:0 0 var(--space);padding:0;flex:1}
+.blk-pricing ul li{padding:.35em 0;color:var(--muted);border-top:1px solid color-mix(in srgb,var(--muted) 18%,transparent)}
+.blk-pricing .cta{display:block;text-align:center;text-decoration:none;background:var(--primary);color:var(--on-primary);font-weight:700;padding:.7em 1em;border-radius:var(--radius);transition:opacity var(--motion)}
+.blk-pricing .cta:hover{opacity:.88}
+.blk-pricing .plan:not(.featured) .cta{background:transparent;color:var(--primary);border:1px solid var(--primary)}
+@media(max-width:440px){.blk-pricing .grid{grid-template-columns:1fr}}
+`.trim();
+function planCard(p) {
+    // Drop incomplete plans (need a name + price to be meaningful).
+    if (!p.name || !p.price)
+        return '';
+    const feats = (p.features ?? [])
+        .filter((f) => !!f)
+        .map((f) => `<li>${escapeHtml(f)}</li>`)
+        .join('\n        ');
+    const href = sanitizeUrl(p.ctaHref);
+    const hasHref = href !== '#' && !!p.ctaHref;
+    const label = p.ctaLabel || 'Choose';
+    const cta = hasHref
+        ? `<a class="cta" href="${escapeAttr(href)}">${escapeHtml(label)}</a>`
+        : '';
+    return `<div class="plan${p.featured ? ' featured' : ''}">
+        ${p.featured ? '<span class="badge">Popular</span>' : ''}
+        <p class="name">${escapeHtml(p.name)}</p>
+        <p class="price">${escapeHtml(p.price)}${p.period ? `<span class="period">${escapeHtml(p.period)}</span>` : ''}</p>
+        ${feats ? `<ul>${feats}</ul>` : '<ul></ul>'}
+        ${cta}
+      </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const plans = (config.plans ?? []).map(planCard).filter(Boolean);
+    const head = (title || subtitle)
+        ? `<div class="head">${title ? `<h2>${escapeHtml(title)}</h2>` : ''}${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ''}</div>`
+        : '';
+    return `<section class="blk-pricing" aria-label="${escapeAttr(title || 'Pricing')}">
+  <div class="wrap">
+    ${head}
+    <div class="grid">
+      ${plans.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const pricing = {
+    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.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/prose.d.ts

@@ -0,0 +1,5 @@
+export type ProseNode = {
+    kind: string;
+    text: string;
+};
+export declare function renderProse(nodes: ProseNode[] | undefined, sep?: string): string;

package/lib/blocks/prose.js

@@ -0,0 +1,46 @@
+/**
+ * Shared typed-content renderer for prose bricks (`rich-text`, `blog-post`).
+ *
+ * Turns an ordered array of TYPED content nodes — never raw HTML — into escaped
+ * markup, grouping consecutive `bullet` / `numbered` items into a single
+ * `<ul>` / `<ol>`. Total: every node's text is escaped, empty nodes are skipped,
+ * and it never throws. A block's schema decides which `kind`s can occur; kinds it
+ * doesn't allow simply never appear here.
+ */
+import { escapeHtml } from '../schema.js';
+export function renderProse(nodes, sep = '\n      ') {
+    const out = [];
+    let listKind = null;
+    let items = [];
+    const flush = () => {
+        if (listKind && items.length) {
+            const tag = listKind === 'bullet' ? 'ul' : 'ol';
+            out.push(`<${tag}>${items.join('')}</${tag}>`);
+        }
+        listKind = null;
+        items = [];
+    };
+    for (const n of nodes ?? []) {
+        if (!n || typeof n.text !== 'string' || !n.text)
+            continue;
+        const t = escapeHtml(n.text);
+        if (n.kind === 'bullet' || n.kind === 'numbered') {
+            if (listKind && listKind !== n.kind)
+                flush();
+            listKind = n.kind;
+            items.push(`<li>${t}</li>`);
+            continue;
+        }
+        flush();
+        if (n.kind === 'heading')
+            out.push(`<h2>${t}</h2>`);
+        else if (n.kind === 'subheading')
+            out.push(`<h3>${t}</h3>`);
+        else if (n.kind === 'quote')
+            out.push(`<blockquote>${t}</blockquote>`);
+        else
+            out.push(`<p>${t}</p>`);
+    }
+    flush();
+    return out.join(sep);
+}

package/lib/blocks/richText.d.ts

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

package/lib/blocks/richText.js

@@ -0,0 +1,46 @@
+import { renderProse } from './prose.js';
+const schema = {
+    blocks: {
+        kind: 'array',
+        max: 60,
+        of: {
+            kind: 'object',
+            fields: {
+                kind: {
+                    kind: 'enum',
+                    values: ['heading', 'subheading', 'paragraph', 'quote', 'bullet', 'numbered'],
+                    default: 'paragraph',
+                },
+                text: { kind: 'string', required: true, default: '', max: 2000 },
+            },
+        },
+    },
+};
+const css = `
+.blk-rich-text{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-rich-text .wrap{max-width:68ch;margin:0 auto}
+.blk-rich-text h2{font-size:var(--fs-xl);margin:1em 0 .3em;font-weight:800;line-height:1.2}
+.blk-rich-text h3{font-size:var(--fs-lg);margin:1em 0 .3em;font-weight:700;line-height:1.25}
+.blk-rich-text p{margin:0 0 1em;font-size:var(--fs-lg);line-height:1.6}
+.blk-rich-text blockquote{margin:1.2em 0;padding:.4em 0 .4em 1em;border-left:3px solid var(--accent);color:var(--muted);font-style:italic;font-size:var(--fs-lg)}
+.blk-rich-text ul,.blk-rich-text ol{margin:0 0 1em;padding-left:1.4em}
+.blk-rich-text li{margin:.3em 0;font-size:var(--fs-lg);line-height:1.5}
+.blk-rich-text>.wrap>:first-child{margin-top:0}
+.blk-rich-text>.wrap>:last-child{margin-bottom:0}
+@media(max-width:560px){.blk-rich-text p,.blk-rich-text li,.blk-rich-text blockquote{font-size:var(--fs-base)}}
+`.trim();
+function render(config) {
+    const body = renderProse(config.blocks, '\n    ');
+    return `<section class="blk-rich-text" aria-label="Content">
+  <div class="wrap">
+    ${body}
+  </div>
+</section>`;
+}
+export const richText = {
+    type: 'rich-text',
+    description: 'A typed prose section with ordered headings, paragraphs, quotes, and bullet/numbered lists — a safe freeform-content block, never raw HTML.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/services.d.ts

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

package/lib/blocks/services.js

@@ -0,0 +1,65 @@
+/** `services-catalogue` — a grid of services/products. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    items: {
+        kind: 'array',
+        max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: 'Service', max: 80 },
+                description: { kind: 'string', default: '', max: 300 },
+                price: { kind: 'string', default: '', max: 40 },
+                ctaLabel: { kind: 'string', default: '', max: 40 },
+                ctaHref: { kind: 'string', default: '#', max: 500 },
+            },
+        },
+    },
+};
+const css = `
+.blk-services{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-services .wrap{max-width:1080px;margin:0 auto}
+.blk-services .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-services h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-services .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-services .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:calc(var(--space)*1.1)}
+.blk-services .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:.5em}
+.blk-services .card h3{margin:0;font-size:var(--fs-lg);font-weight:700}
+.blk-services .card .price{color:var(--accent);font-weight:700}
+.blk-services .card p{margin:0;color:var(--muted)}
+.blk-services .card .cta{margin-top:auto;align-self:flex-start;color:var(--primary);text-decoration:none;font-weight:600}
+`.trim();
+function card(it) {
+    return `<article class="card">
+      <h3>${escapeHtml(it.name)}</h3>
+      ${it.price ? `<span class="price">${escapeHtml(it.price)}</span>` : ''}
+      ${it.description ? `<p>${escapeHtml(it.description)}</p>` : ''}
+      ${it.ctaLabel ? `<a class="cta" href="${escapeAttr(sanitizeUrl(it.ctaHref))}">${escapeHtml(it.ctaLabel)} →</a>` : ''}
+    </article>`;
+}
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const items = config.items ?? [];
+    const head = (title || subtitle)
+        ? `<div class="head">
+      ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+      ${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ''}
+    </div>`
+        : '';
+    return `<section class="blk-services" aria-label="${escapeAttr(title || 'Services')}">
+  <div class="wrap">
+    ${head}
+    <div class="grid">
+      ${items.map(card).join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const services = {
+    type: 'services-catalogue',
+    description: 'A grid of services or products, each with a name, optional price, description, and link. Use for "what we offer".',
+    schema, css, render,
+};

package/lib/blocks/sidebar.d.ts

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

package/lib/blocks/sidebar.js

@@ -0,0 +1,58 @@
+/** `sidebar` — section / drawer nav for multi-view apps. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 60 },
+    links: {
+        kind: 'array',
+        max: 20,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 60 },
+                href: { kind: 'string', default: '', max: 500 },
+                icon: { kind: 'string', default: '', max: 8 }, // emoji or a single glyph
+            },
+        },
+    },
+};
+const css = `
+.blk-sidebar{background:var(--surface);color:var(--text);font-family:var(--font);padding:var(--space);border-right:1px solid color-mix(in srgb, var(--text) 15%, transparent)}
+.blk-sidebar .wrap{max-width:280px}
+.blk-sidebar .title{margin:0 0 var(--space);font-size:var(--fs-lg);font-weight:800;color:var(--text)}
+.blk-sidebar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15em}
+.blk-sidebar a{display:flex;align-items:center;gap:.6em;padding:.55em .7em;text-decoration:none;color:var(--muted);font-size:var(--fs-base);border-radius:var(--radius);transition:color var(--motion),background var(--motion)}
+.blk-sidebar a:hover,.blk-sidebar a:focus-visible{color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, transparent)}
+.blk-sidebar .ico{font-size:1.15em;line-height:1;flex:0 0 auto}
+.blk-sidebar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@media(min-width:900px){.blk-sidebar{position:sticky;top:0;align-self:flex-start;min-height:100vh}}
+@media(max-width:899px){.blk-sidebar{border-right:0;border-bottom:1px solid color-mix(in srgb, var(--text) 15%, transparent)}.blk-sidebar .wrap{max-width:none}.blk-sidebar ul{flex-direction:row;flex-wrap:wrap}}
+`.trim();
+function linkItem(l) {
+    // Drop links with no label rather than emit an empty target (total render).
+    if (!l.label)
+        return '';
+    const href = escapeAttr(sanitizeUrl(l.href || '#'));
+    return `<li><a href="${href}">
+        ${l.icon ? `<span class="ico" aria-hidden="true">${escapeHtml(l.icon)}</span>` : ''}
+        <span class="lbl">${escapeHtml(l.label)}</span>
+      </a></li>`;
+}
+function render(config) {
+    const title = config.title;
+    const links = (config.links ?? []).map(linkItem).filter(Boolean);
+    return `<nav class="blk-sidebar" aria-label="${escapeAttr(title || 'Sidebar')}">
+  <div class="wrap">
+    ${title ? `<p class="title">${escapeHtml(title)}</p>` : ''}
+    <ul>
+      ${links.join('\n      ')}
+    </ul>
+  </div>
+</nav>`;
+}
+export const sidebar = {
+    type: 'sidebar',
+    description: 'A vertical section/drawer navigation for multi-view apps: an optional title over a list of icon-and-label links.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/socialLinks.d.ts

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

package/lib/blocks/socialLinks.js

@@ -0,0 +1,53 @@
+/** `social-links` — a centered icon row linking out to profiles. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    links: {
+        kind: 'array', max: 12,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 40 },
+                href: { kind: 'string', required: true, default: '', max: 500 },
+                icon: { kind: 'string', default: '', max: 8 }, // emoji or a single glyph
+            },
+        },
+    },
+};
+const css = `
+.blk-social-links{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text);text-align:center}
+.blk-social-links .wrap{max-width:800px;margin:0 auto}
+.blk-social-links h2{font-size:var(--fs-lg);font-weight:700;margin:0 0 var(--space)}
+.blk-social-links .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.8em}
+.blk-social-links a{display:inline-flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:var(--radius);text-decoration:none;color:var(--text);background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 15%,transparent);font-size:var(--fs-base);font-weight:600;transition:color var(--motion),border-color var(--motion)}
+.blk-social-links a:hover,.blk-social-links a:focus-visible{color:var(--primary);border-color:var(--primary)}
+.blk-social-links .ico{font-size:1.15em;line-height:1}
+`.trim();
+function link(l) {
+    const href = sanitizeUrl(l.href);
+    if (!l.label || href === '#' || !l.href)
+        return '';
+    return `<a href="${escapeAttr(href)}" rel="noopener">
+        ${l.icon ? `<span class="ico" aria-hidden="true">${escapeHtml(l.icon)}</span>` : ''}
+        <span>${escapeHtml(l.label)}</span>
+      </a>`;
+}
+function render(config) {
+    const title = config.title;
+    const links = (config.links ?? []).map(link).filter(Boolean);
+    return `<section class="blk-social-links" aria-label="${escapeAttr(title || 'Social links')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="row">
+      ${links.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const socialLinks = {
+    type: 'social-links',
+    description: 'A centered row of links to social or external profiles, each an optional icon plus a label.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/spacer.d.ts

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

package/lib/blocks/spacer.js

@@ -0,0 +1,25 @@
+/** `spacer` — deliberate vertical whitespace between sections. Static brick. */
+import { escapeAttr } from '../schema.js';
+const schema = {
+    size: { kind: 'enum', values: ['sm', 'md', 'lg', 'xl'], default: 'md' },
+};
+const css = `
+.blk-spacer{background:var(--bg)}
+.blk-spacer.size-sm{height:calc(var(--space)*1)}
+.blk-spacer.size-md{height:calc(var(--space)*2)}
+.blk-spacer.size-lg{height:var(--space-lg)}
+.blk-spacer.size-xl{height:calc(var(--space-lg)*2)}
+`.trim();
+const SIZES = new Set(['sm', 'md', 'lg', 'xl']);
+function render(config) {
+    const raw = config.size;
+    const size = SIZES.has(raw) ? raw : 'md';
+    return `<section class="blk-spacer size-${escapeAttr(size)}" aria-hidden="true"></section>`;
+}
+export const spacer = {
+    type: 'spacer',
+    description: 'Deliberate vertical whitespace between sections, in one of four sizes (sm, md, lg, xl).',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/split.d.ts

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