@bytesbrains/weblocks 0.2.0

package/lib/blocks/about.d.ts

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

package/lib/blocks/about.js

@@ -0,0 +1,50 @@
+/** `about` — story / mission prose with an optional side image. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    eyebrow: { kind: 'string', default: '', max: 60 },
+    title: { kind: 'string', default: 'About us', max: 120 },
+    body: { kind: 'string', default: '', max: 1200 },
+    image: { kind: 'string', default: '', max: 500 },
+    imageAlt: { kind: 'string', default: '', max: 200 },
+    imageSide: { kind: 'enum', values: ['left', 'right'], default: 'right' },
+};
+const css = `
+.blk-about{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-about .wrap{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*2);align-items:center}
+.blk-about.no-img .wrap{grid-template-columns:min(64ch,100%);justify-content:center;text-align:center}
+.blk-about.img-left .media{order:-1}
+.blk-about .eyebrow{color:var(--accent);font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:var(--fs-base);margin:0 0 .4em}
+.blk-about h2{font-size:var(--fs-xl);margin:0 0 .4em;font-weight:800}
+.blk-about p.body{color:var(--muted);font-size:var(--fs-lg);margin:0;white-space:pre-line}
+.blk-about .media img{width:100%;border-radius:var(--radius);display:block;object-fit:cover}
+@media(max-width:760px){.blk-about .wrap{grid-template-columns:1fr;text-align:left}.blk-about.img-left .media{order:0}}
+`.trim();
+function render(config) {
+    const eyebrow = config.eyebrow;
+    const title = config.title;
+    const body = config.body;
+    const image = sanitizeUrl(config.image);
+    const hasImg = image !== '#' && !!config.image;
+    const alt = config.imageAlt;
+    const side = config.imageSide;
+    const text = `<div class="text">
+      ${eyebrow ? `<p class="eyebrow">${escapeHtml(eyebrow)}</p>` : ''}
+      ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+      ${body ? `<p class="body">${escapeHtml(body)}</p>` : ''}
+    </div>`;
+    const media = hasImg ? `<div class="media"><img src="${escapeAttr(image)}" alt="${escapeAttr(alt)}" loading="lazy"></div>` : '';
+    const cls = `blk-about${hasImg ? (side === 'left' ? ' img-left' : '') : ' no-img'}`;
+    return `<section class="${cls}" aria-label="${escapeAttr(title || 'About')}">
+  <div class="wrap">
+    ${text}
+    ${media}
+  </div>
+</section>`;
+}
+export const about = {
+    type: 'about',
+    description: 'A story/mission section: eyebrow, title, prose body, and an optional side image (choose which side).',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/accordion.d.ts

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

package/lib/blocks/accordion.js

@@ -0,0 +1,51 @@
+/**
+ * `accordion` — generic disclosure panels built on native `<details>/<summary>`
+ * (no JavaScript, no island). FAQ is a specialization of this pattern; use this
+ * for any collapsible content. Static brick.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    items: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                heading: { kind: 'string', required: true, default: '', max: 200 },
+                body: { kind: 'string', default: '', max: 1200 },
+            },
+        },
+    },
+};
+const css = `
+.blk-accordion{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-accordion .wrap{max-width:760px;margin:0 auto}
+.blk-accordion h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800;text-align:center}
+.blk-accordion details{border:1px solid color-mix(in srgb,var(--text) 15%,transparent);border-radius:var(--radius);background:var(--surface);margin-bottom:.6em;overflow:hidden}
+.blk-accordion summary{cursor:pointer;list-style:none;padding:.9em 1em;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:1em}
+.blk-accordion summary::-webkit-details-marker{display:none}
+.blk-accordion summary::after{content:"+";color:var(--primary);font-weight:800;font-size:1.2em;transition:transform var(--motion)}
+.blk-accordion details[open] summary::after{content:"–"}
+.blk-accordion .body{padding:0 1em 1em;color:var(--muted);line-height:1.6;white-space:pre-line}
+`.trim();
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).filter((it) => it && it.heading);
+    const panels = items.map((it) => `<details>
+        <summary>${escapeHtml(it.heading)}</summary>
+        ${it.body ? `<div class="body">${escapeHtml(it.body)}</div>` : ''}
+      </details>`).join('\n      ');
+    return `<section class="blk-accordion" aria-label="${escapeAttr(title || 'Accordion')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${panels}
+  </div>
+</section>`;
+}
+export const accordion = {
+    type: 'accordion',
+    description: 'Generic collapsible disclosure panels (native details/summary, no JavaScript); each panel has a heading and body.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/announcementBar.d.ts

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

package/lib/blocks/announcementBar.js

@@ -0,0 +1,56 @@
+/**
+ * `announcement-bar` — dismissible top strip (promo / notice). Static markup;
+ * the dismiss button is a client "island" (declared via `island`). Renders
+ * fine without JS — the strip simply stays put.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    text: { kind: 'string', required: true, default: '', max: 200 },
+    linkLabel: { kind: 'string', default: '', max: 40 },
+    href: { kind: 'string', default: '', max: 500 },
+    tone: { kind: 'enum', values: ['info', 'promo', 'warning'], default: 'info' },
+    dismissible: { kind: 'boolean', default: true },
+};
+const css = `
+.blk-announcement-bar{width:100%;background:var(--surface);color:var(--text);font-family:var(--font);font-size:var(--fs-base);border-bottom:1px solid color-mix(in srgb, var(--text) 15%, transparent)}
+.blk-announcement-bar.tone-info{background:color-mix(in srgb, var(--primary) 12%, var(--surface))}
+.blk-announcement-bar.tone-promo{background:color-mix(in srgb, var(--accent) 16%, var(--surface))}
+.blk-announcement-bar.tone-warning{background:color-mix(in srgb, var(--accent) 22%, var(--surface))}
+.blk-announcement-bar .wrap{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:.6em;padding:.55em var(--space);text-align:center}
+.blk-announcement-bar .msg{margin:0}
+.blk-announcement-bar a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
+.blk-announcement-bar a:hover,.blk-announcement-bar a:focus-visible{color:var(--accent)}
+.blk-announcement-bar .close{flex:0 0 auto;margin-left:auto;background:none;border:0;color:inherit;font-size:1.2em;line-height:1;cursor:pointer;padding:.15em .4em;border-radius:var(--radius);opacity:.7;transition:opacity var(--motion),background var(--motion)}
+.blk-announcement-bar .close:hover,.blk-announcement-bar .close:focus-visible{opacity:1;background:color-mix(in srgb, var(--text) 12%, transparent)}
+@media(max-width:440px){.blk-announcement-bar .wrap{flex-wrap:wrap;gap:.3em;font-size:calc(var(--fs-base)*.95)}}
+`.trim();
+const TONES = new Set(['info', 'promo', 'warning']);
+function render(config) {
+    const text = config.text;
+    // Nothing to announce → render an empty but valid landmark (total render).
+    const linkLabel = config.linkLabel;
+    const href = escapeAttr(sanitizeUrl(config.href));
+    const hasLink = !!linkLabel && href !== '#';
+    const toneRaw = config.tone;
+    const tone = TONES.has(toneRaw) ? toneRaw : 'info';
+    const dismissible = config.dismissible;
+    const link = hasLink ? ` <a href="${href}">${escapeHtml(linkLabel)}</a>` : '';
+    const close = dismissible
+        ? `<button type="button" class="close" data-wl-dismiss aria-label="Dismiss">&times;</button>`
+        : '';
+    return `<section class="blk-announcement-bar tone-${tone}" aria-label="Announcement">
+  <div class="wrap">
+    <p class="msg">${escapeHtml(text)}${link}</p>
+    ${close}
+  </div>
+</section>`;
+}
+export const announcementBar = {
+    type: 'announcement-bar',
+    description: 'A dismissible full-width strip for a short promo or notice, with an optional inline link and info/promo/warning tone.',
+    schema,
+    css,
+    render,
+    // Dismiss is JS-enhanced; the strip renders and reads fine with no JS.
+    island: 'announcement-bar',
+};

package/lib/blocks/appShell.d.ts

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

package/lib/blocks/appShell.js

@@ -0,0 +1,54 @@
+/** `app-shell` — persistent bottom tab bar (app-like nav). Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    brand: { kind: 'string', default: '', max: 60 },
+    tabs: {
+        kind: 'array',
+        max: 6,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 40 },
+                href: { kind: 'string', default: '', max: 500 },
+                icon: { kind: 'string', default: '', max: 8 }, // emoji or a single glyph
+            },
+        },
+    },
+};
+const css = `
+.blk-app-shell{position:sticky;bottom:0;left:0;right:0;z-index:20;background:var(--surface);color:var(--text);border-top:1px solid color-mix(in srgb, var(--text) 15%, transparent);font-family:var(--font)}
+.blk-app-shell .wrap{max-width:720px;margin:0 auto;display:flex;align-items:stretch;justify-content:space-around;gap:.2em}
+.blk-app-shell .brand{display:none}
+.blk-app-shell a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15em;padding:.5em .3em;text-decoration:none;color:var(--muted);font-size:var(--fs-base);text-align:center;border-radius:var(--radius);transition:color var(--motion),background var(--motion)}
+.blk-app-shell a:hover,.blk-app-shell a:focus-visible{color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, transparent)}
+.blk-app-shell .ico{font-size:1.4em;line-height:1}
+.blk-app-shell .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@media(max-width:440px){.blk-app-shell a{font-size:calc(var(--fs-base)*.9);padding:.45em .2em}.blk-app-shell .ico{font-size:1.3em}}
+`.trim();
+function tabItem(t) {
+    // Drop tabs with no label rather than emit an empty target (total render).
+    if (!t.label)
+        return '';
+    const href = escapeAttr(sanitizeUrl(t.href || '#'));
+    return `<a href="${href}">
+        ${t.icon ? `<span class="ico" aria-hidden="true">${escapeHtml(t.icon)}</span>` : ''}
+        <span class="lbl">${escapeHtml(t.label)}</span>
+      </a>`;
+}
+function render(config) {
+    const brand = config.brand;
+    const tabs = (config.tabs ?? []).map(tabItem).filter(Boolean);
+    return `<nav class="blk-app-shell" aria-label="${escapeAttr(brand || 'App navigation')}">
+  <div class="wrap">
+    ${brand ? `<span class="brand">${escapeHtml(brand)}</span>` : ''}
+    ${tabs.join('\n    ')}
+  </div>
+</nav>`;
+}
+export const appShell = {
+    type: 'app-shell',
+    description: 'A persistent bottom tab bar for app-like navigation, each tab an optional icon plus a label linking to a view.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/auth.d.ts

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

package/lib/blocks/auth.js

@@ -0,0 +1,82 @@
+/**
+ * `auth` — provider-agnostic sign in / sign up. Powered brick (§6): each provider
+ * button and the optional email form target the host's `auth.start` capability
+ * (the block carries `data-wl-provider` so one runtime route serves them all).
+ * With no runtime wired it renders inert-but-valid. The engine bundles NO auth
+ * backend — identity is entirely the host's concern.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+import { NOOP_RUNTIME, safeMethod } from '../runtime.js';
+const CAPABILITY = 'auth.start';
+const schema = {
+    mode: { kind: 'enum', values: ['signin', 'signup'], default: 'signin' },
+    title: { kind: 'string', default: '', max: 120 },
+    providers: {
+        kind: 'array', max: 6,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 40 },
+                provider: { kind: 'string', default: '', max: 40 }, // e.g. google, github, email
+            },
+        },
+    },
+    showEmail: { kind: 'boolean', default: true },
+};
+const css = `
+.blk-auth{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-auth .wrap{max-width:400px;margin:0 auto;background:var(--surface);border-radius:var(--radius);padding:calc(var(--space)*1.6);text-align:center}
+.blk-auth h2{font-size:var(--fs-lg);margin:0 0 var(--space);font-weight:800}
+.blk-auth .providers{display:flex;flex-direction:column;gap:.5em}
+.blk-auth .provider{font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:block;padding:.7em 1em;border-radius:var(--radius);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);background:var(--bg);color:var(--text);transition:border-color var(--motion)}
+.blk-auth .provider:hover{border-color:var(--primary)}
+.blk-auth .provider[disabled]{opacity:.55;cursor:not-allowed}
+.blk-auth .sep{display:flex;align-items:center;gap:.6em;color:var(--muted);font-size:var(--fs-base);margin:var(--space) 0}
+.blk-auth .sep::before,.blk-auth .sep::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--text) 15%,transparent)}
+.blk-auth form{display:grid;gap:.5em}
+.blk-auth input{font:inherit;color:inherit;background:var(--bg);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:var(--radius);padding:.7em .8em}
+.blk-auth button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.7em 1em;background:var(--primary);color:var(--on-primary)}
+.blk-auth button[disabled]{opacity:.55;cursor:not-allowed}
+.blk-auth .note{margin:var(--space) 0 0;font-size:var(--fs-base);color:var(--muted)}
+`.trim();
+function render(config, _tokens, ctx) {
+    const id = ctx?.id ?? 'auth';
+    const runtime = ctx?.runtime ?? NOOP_RUNTIME;
+    const mode = config.mode === 'signup' ? 'signup' : 'signin';
+    const title = config.title || (mode === 'signup' ? 'Create your account' : 'Sign in');
+    const providers = config.providers ?? [];
+    const showEmail = config.showEmail !== false;
+    const action = runtime.resolve(CAPABILITY, id);
+    const inert = action ? '' : ' data-wl-inert="true"';
+    // `action.url` comes from the host adapter; it is escaped here, but the host
+    // is responsible for returning a legitimate endpoint (it is trusted config).
+    const buttons = providers.filter((p) => p && p.label).map((p) => {
+        const prov = escapeAttr(p.provider || p.label);
+        return action
+            ? `<form method="${safeMethod(action.method)}" action="${escapeAttr(action.url)}" data-wl-capability="${CAPABILITY}" data-wl-block="${escapeAttr(id)}" data-wl-provider="${prov}"><input type="hidden" name="provider" value="${prov}"><button class="provider" type="submit">${escapeHtml(p.label)}</button></form>`
+            : `<button class="provider" type="button" data-wl-capability="${CAPABILITY}" data-wl-provider="${prov}" disabled>${escapeHtml(p.label)}</button>`;
+    }).join('\n      ');
+    const email = showEmail ? `
+    ${buttons ? '<div class="sep">or</div>' : ''}
+    <form method="${safeMethod(action?.method)}" action="${action ? escapeAttr(action.url) : '#'}" data-wl-capability="${CAPABILITY}" data-wl-block="${escapeAttr(id)}" data-wl-provider="email"${inert}>
+      <input type="email" name="email" placeholder="you@example.com" aria-label="Email address" required>
+      <button type="submit"${action ? '' : ' disabled'}>Continue with email</button>
+    </form>` : '';
+    return `<section class="blk-auth" aria-label="${escapeAttr(title)}">
+  <div class="wrap">
+    <h2>${escapeHtml(title)}</h2>
+    ${buttons ? `<div class="providers">\n      ${buttons}\n    </div>` : ''}
+    ${email}
+    ${action ? '' : '<p class="note">Connect an auth runtime to enable sign in.</p>'}
+  </div>
+</section>`;
+}
+export const auth = {
+    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.',
+    schema,
+    css,
+    render,
+    island: 'auth',
+    runtime: { capabilities: [CAPABILITY] },
+};

package/lib/blocks/blogList.d.ts

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

package/lib/blocks/blogList.js

@@ -0,0 +1,81 @@
+/**
+ * `blog-list` — a post index as a card grid. The post list is static config for
+ * now (a host can later feed it from a store via the runtime contract). Static
+ * brick.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    columns: { kind: 'int', oneOf: [2, 3], default: 3 },
+    posts: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                title: { kind: 'string', required: true, default: '', max: 160 },
+                excerpt: { kind: 'string', default: '', max: 280 },
+                href: { kind: 'string', default: '', max: 500 },
+                image: { kind: 'string', default: '', max: 500 },
+                date: { kind: 'string', default: '', max: 40 },
+                tag: { kind: 'string', default: '', max: 40 },
+            },
+        },
+    },
+};
+const css = `
+.blk-blog-list{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-blog-list .wrap{max-width:1120px;margin:0 auto}
+.blk-blog-list h2{font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800;text-align:center}
+.blk-blog-list .grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(var(--space)*1.4)}
+.blk-blog-list .card{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden}
+.blk-blog-list a.card{text-decoration:none;color:inherit;transition:transform var(--motion)}
+.blk-blog-list a.card:hover{transform:translateY(-3px)}
+.blk-blog-list .cover{aspect-ratio:16/9;object-fit:cover;width:100%;background:color-mix(in srgb,var(--muted) 15%,transparent)}
+.blk-blog-list .body{padding:calc(var(--space)*1.1);display:flex;flex-direction:column;gap:.4em}
+.blk-blog-list .meta{display:flex;gap:.6em;color:var(--muted);font-size:var(--fs-base)}
+.blk-blog-list .tag{color:var(--accent);font-weight:700}
+.blk-blog-list h3{margin:0;font-size:var(--fs-lg);font-weight:700;line-height:1.3}
+.blk-blog-list p{margin:0;color:var(--muted);line-height:1.5}
+@media(max-width:760px){.blk-blog-list .grid{grid-template-columns:1fr 1fr}}
+@media(max-width:440px){.blk-blog-list .grid{grid-template-columns:1fr}}
+`.trim();
+function card(p) {
+    if (!p.title)
+        return '';
+    const href = sanitizeUrl(p.href);
+    const linked = href !== '#' && !!p.href;
+    const img = sanitizeUrl(p.image);
+    const cover = (img !== '#' && p.image) ? `<img class="cover" src="${escapeAttr(img)}" alt="${escapeAttr(p.title)}" loading="lazy">` : '';
+    const meta = (p.tag || p.date)
+        ? `<div class="meta">${p.tag ? `<span class="tag">${escapeHtml(p.tag)}</span>` : ''}${p.date ? `<span>${escapeHtml(p.date)}</span>` : ''}</div>`
+        : '';
+    const inner = `${cover}
+        <div class="body">
+          ${meta}
+          <h3>${escapeHtml(p.title)}</h3>
+          ${p.excerpt ? `<p>${escapeHtml(p.excerpt)}</p>` : ''}
+        </div>`;
+    return linked
+        ? `<a class="card" href="${escapeAttr(href)}">${inner}</a>`
+        : `<article class="card">${inner}</article>`;
+}
+function render(config) {
+    const title = config.title;
+    const columns = Number.isInteger(config.columns) ? config.columns : 3;
+    const posts = (config.posts ?? []).map(card).filter(Boolean);
+    return `<section class="blk-blog-list" aria-label="${escapeAttr(title || 'Posts')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="grid" style="--cols:${columns}">
+      ${posts.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const blogList = {
+    type: 'blog-list',
+    description: 'A post index as a grid of cards, each with an optional cover image, tag, date, title, and excerpt linking to the post.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/blogPost.d.ts

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

package/lib/blocks/blogPost.js

@@ -0,0 +1,60 @@
+/**
+ * `blog-post` — a single article layout. The body is TYPED content blocks
+ * (heading / paragraph / quote / bullet), never raw HTML, so it stays safe and
+ * editable. Static brick.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+import { renderProse } from './prose.js';
+const schema = {
+    title: { kind: 'string', required: true, default: '', max: 200 },
+    date: { kind: 'string', default: '', max: 40 },
+    author: { kind: 'string', default: '', max: 80 },
+    cover: { kind: 'string', default: '', max: 500 },
+    coverAlt: { kind: 'string', default: '', max: 200 },
+    body: {
+        kind: 'array', max: 120,
+        of: {
+            kind: 'object',
+            fields: {
+                kind: { kind: 'enum', values: ['heading', 'paragraph', 'quote', 'bullet'], default: 'paragraph' },
+                text: { kind: 'string', required: true, default: '', max: 2000 },
+            },
+        },
+    },
+};
+const css = `
+.blk-blog-post{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-blog-post article{max-width:68ch;margin:0 auto}
+.blk-blog-post .cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin:0 0 var(--space)}
+.blk-blog-post h1{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800;line-height:1.15}
+.blk-blog-post .meta{color:var(--muted);font-size:var(--fs-base);margin:0 0 var(--space-lg)}
+.blk-blog-post h2{font-size:var(--fs-lg);margin:1.2em 0 .3em;font-weight:700}
+.blk-blog-post p{margin:0 0 1em;font-size:var(--fs-lg);line-height:1.7}
+.blk-blog-post blockquote{margin:1.2em 0;padding:.4em 0 .4em 1em;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
+.blk-blog-post ul{margin:0 0 1em;padding-left:1.4em}
+.blk-blog-post li{margin:.3em 0;font-size:var(--fs-lg);line-height:1.6}
+`.trim();
+function render(config) {
+    const title = config.title;
+    const date = config.date;
+    const author = config.author;
+    const cover = sanitizeUrl(config.cover);
+    const hasCover = cover !== '#' && !!config.cover;
+    const body = renderProse(config.body);
+    const meta = [author && `By ${escapeHtml(author)}`, date && escapeHtml(date)].filter(Boolean).join(' · ');
+    return `<section class="blk-blog-post" aria-label="${escapeAttr(title || 'Article')}">
+  <article>
+    ${hasCover ? `<img class="cover" src="${escapeAttr(cover)}" alt="${escapeAttr(config.coverAlt)}" loading="lazy">` : ''}
+    ${title ? `<h1>${escapeHtml(title)}</h1>` : ''}
+    ${meta ? `<p class="meta">${meta}</p>` : ''}
+    ${body}
+  </article>
+</section>`;
+}
+export const blogPost = {
+    type: 'blog-post',
+    description: 'A single article layout with an optional cover, title, author/date, and a typed body (headings, paragraphs, quotes, bullets).',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/carousel.d.ts

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

package/lib/blocks/carousel.js

@@ -0,0 +1,56 @@
+/**
+ * `carousel` — a horizontal scroll-snap track of slides. Works fully without JS
+ * (native scroll-snap); the `carousel` island can add arrows/autoplay. Static-
+ * first: no behaviour ships unless the island is present.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    items: {
+        kind: 'array', max: 20,
+        of: {
+            kind: 'object',
+            fields: {
+                src: { kind: 'string', default: '', max: 500 },
+                alt: { kind: 'string', default: '', max: 200 },
+                caption: { kind: 'string', default: '', max: 200 },
+            },
+        },
+    },
+    autoplay: { kind: 'boolean', default: false },
+};
+const css = `
+.blk-carousel{padding:var(--space-lg) var(--space);background:var(--bg)}
+.blk-carousel .track{display:flex;gap:var(--space);overflow-x:auto;scroll-snap-type:x mandatory;max-width:1120px;margin:0 auto;padding-bottom:.5em}
+.blk-carousel .slide{flex:0 0 min(88%,720px);scroll-snap-align:center;background:var(--surface);border-radius:var(--radius);overflow:hidden}
+.blk-carousel img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
+.blk-carousel figcaption{padding:.6em .8em;color:var(--muted);font-size:var(--fs-base)}
+.blk-carousel .track::-webkit-scrollbar{height:8px}
+`.trim();
+function slide(it) {
+    const src = sanitizeUrl(it.src);
+    if (src === '#' || !it.src)
+        return '';
+    return `<figure class="slide">
+        <img src="${escapeAttr(src)}" alt="${escapeAttr(it.alt)}" loading="lazy">
+        ${it.caption ? `<figcaption>${escapeHtml(it.caption)}</figcaption>` : ''}
+      </figure>`;
+}
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).map(slide).filter(Boolean);
+    const autoplay = config.autoplay === true;
+    return `<section class="blk-carousel" aria-label="${escapeAttr(title || 'Carousel')}"${autoplay ? ' data-wl-autoplay="true"' : ''}>
+  <div class="track">
+    ${items.join('\n    ')}
+  </div>
+</section>`;
+}
+export const carousel = {
+    type: 'carousel',
+    description: 'A horizontal, swipeable carousel of image slides with optional captions; scrolls natively and can be enhanced with arrows/autoplay.',
+    schema,
+    css,
+    render,
+    island: 'carousel',
+};

package/lib/blocks/contactDetails.d.ts

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

package/lib/blocks/contactDetails.js

@@ -0,0 +1,50 @@
+/** `contact-details` — address / phone / email / hours. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Get in touch', max: 120 },
+    address: { kind: 'string', default: '', max: 200 },
+    phone: { kind: 'string', default: '', max: 40 },
+    email: { kind: 'string', default: '', max: 120 },
+    hours: { kind: 'string', default: '', max: 160 },
+};
+const css = `
+.blk-contact{padding:var(--space-lg) var(--space);background:var(--surface);color:var(--text)}
+.blk-contact .wrap{max-width:760px;margin:0 auto}
+.blk-contact h2{font-size:var(--fs-xl);margin:0 0 var(--space);font-weight:800}
+.blk-contact dl{display:grid;grid-template-columns:auto 1fr;gap:.5em 1.2em;margin:0}
+.blk-contact dt{color:var(--muted);font-weight:600}
+.blk-contact dd{margin:0}
+.blk-contact a{color:var(--primary);text-decoration:none}
+`.trim();
+function row(label, value, href) {
+    if (!value)
+        return '';
+    const v = href ? `<a href="${escapeAttr(sanitizeUrl(href))}">${escapeHtml(value)}</a>` : escapeHtml(value);
+    return `<dt>${escapeHtml(label)}</dt><dd>${v}</dd>`;
+}
+function render(config) {
+    const title = config.title;
+    const address = config.address;
+    const phone = config.phone;
+    const email = config.email;
+    const hours = config.hours;
+    const rows = [
+        row('Address', address),
+        row('Phone', phone, phone ? `tel:${phone.replace(/[^+\d]/g, '')}` : undefined),
+        row('Email', email, email ? `mailto:${email}` : undefined),
+        row('Hours', hours),
+    ].filter(Boolean).join('\n      ');
+    return `<section class="blk-contact" aria-label="${escapeAttr(title || 'Contact')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <dl>
+      ${rows}
+    </dl>
+  </div>
+</section>`;
+}
+export const contactDetails = {
+    type: 'contact-details',
+    description: 'A contact info block: address, phone, email, and opening hours (each optional). Read-only — no form.',
+    schema, css, render,
+};

package/lib/blocks/contactForm.d.ts

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