@bytesbrains/weblocks 0.2.0

package/lib/blocks/contactForm.js

@@ -0,0 +1,100 @@
+/**
+ * `contact-form` — a powered brick (§6). Emits a real, accessible form whose
+ * fields are TYPED config (never raw HTML). The submit target is resolved by the
+ * host runtime via the `contact-form.submit` capability; with no runtime wired
+ * the form renders inert-but-valid (action `#`, disabled submit, a visible note)
+ * while keeping the `data-wl-*` hooks so a host can still enhance it client-side.
+ *
+ * The safety-critical parts (spam/captcha, server-side validation, delivery,
+ * abuse caps) live in the host's vetted runtime — never in anything the AI emits.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+import { NOOP_RUNTIME, safeMethod } from '../runtime.js';
+const CAPABILITY = 'contact-form.submit';
+const schema = {
+    title: { kind: 'string', default: 'Get in touch', max: 120 },
+    intro: { kind: 'string', default: '', max: 280 },
+    submitLabel: { kind: 'string', default: 'Send', max: 40 },
+    successMessage: { kind: 'string', default: "Thanks — we'll be in touch.", max: 200 },
+    fields: {
+        kind: 'array', max: 12,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: 'field', max: 40 },
+                label: { kind: 'string', required: true, default: 'Field', max: 80 },
+                type: { kind: 'enum', values: ['text', 'email', 'tel', 'textarea', 'select', 'checkbox'], default: 'text' },
+                placeholder: { kind: 'string', default: '', max: 80 },
+                required: { kind: 'boolean', default: false },
+                options: { kind: 'array', max: 24, of: { kind: 'string', default: '', max: 80 } },
+            },
+        },
+    },
+};
+const css = `
+.blk-contact-form{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-contact-form .wrap{max-width:560px;margin:0 auto}
+.blk-contact-form h2{font-size:var(--fs-xl);margin:0 0 .2em;font-weight:800}
+.blk-contact-form .intro{color:var(--muted);margin:0 0 var(--space)}
+.blk-contact-form form{display:grid;gap:calc(var(--space)*.9)}
+.blk-contact-form label{display:grid;gap:.35em;font-weight:600}
+.blk-contact-form .row-check{grid-auto-flow:column;justify-content:start;align-items:center;gap:.5em}
+.blk-contact-form input,.blk-contact-form textarea,.blk-contact-form select{font:inherit;color:inherit;background:var(--surface);border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:var(--radius);padding:.6em .7em;width:100%}
+.blk-contact-form textarea{min-height:7em;resize:vertical}
+.blk-contact-form button{font:inherit;font-weight:700;cursor:pointer;border:0;border-radius:var(--radius);padding:.7em 1.2em;background:var(--primary);color:var(--on-primary);transition:opacity var(--motion)}
+.blk-contact-form button[disabled]{opacity:.55;cursor:not-allowed}
+.blk-contact-form .note{margin:.4em 0 0;font-size:var(--fs-base);color:var(--muted)}
+`.trim();
+/** A DOM-safe id fragment from a field name (label/input association can't break). */
+function fieldId(base, name, i) {
+    const slug = String(name).replace(/[^A-Za-z0-9_-]/g, '') || `f${i}`;
+    return `${base}-${slug}`;
+}
+function control(f, base, i) {
+    const id = escapeAttr(fieldId(base, f.name, i));
+    const req = f.required ? ' required' : '';
+    const ph = f.placeholder ? ` placeholder="${escapeAttr(f.placeholder)}"` : '';
+    const nm = escapeAttr(f.name);
+    if (f.type === 'textarea') {
+        return `<label for="${id}">${escapeHtml(f.label)}<textarea id="${id}" name="${nm}"${ph}${req}></textarea></label>`;
+    }
+    if (f.type === 'checkbox') {
+        return `<label class="row-check" for="${id}"><input id="${id}" type="checkbox" name="${nm}"${req}>${escapeHtml(f.label)}</label>`;
+    }
+    if (f.type === 'select') {
+        const opts = (f.options ?? []).filter(Boolean).map((o) => `<option value="${escapeAttr(o)}">${escapeHtml(o)}</option>`).join('');
+        return `<label for="${id}">${escapeHtml(f.label)}<select id="${id}" name="${nm}"${req}>${opts}</select></label>`;
+    }
+    const t = ['text', 'email', 'tel'].includes(f.type) ? f.type : 'text';
+    return `<label for="${id}">${escapeHtml(f.label)}<input id="${id}" type="${t}" name="${nm}"${ph}${req}></label>`;
+}
+function render(config, _tokens, ctx) {
+    const id = ctx?.id ?? 'contact-form';
+    const runtime = ctx?.runtime ?? NOOP_RUNTIME;
+    const title = config.title;
+    const intro = config.intro;
+    const submitLabel = config.submitLabel || 'Send';
+    const fields = config.fields ?? [];
+    const action = runtime.resolve(CAPABILITY, id);
+    const controls = fields.map((f, i) => control(f, `f-${id}`, i)).join('\n      ');
+    return `<section class="blk-contact-form" aria-label="${escapeAttr(title || 'Contact form')}">
+  <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"'}>
+      ${controls}
+      <button type="submit"${action ? '' : ' disabled'}>${escapeHtml(submitLabel)}</button>
+      ${action ? '' : '<p class="note">This form needs a runtime to be wired before it can send.</p>'}
+    </form>
+  </div>
+</section>`;
+}
+export const contactForm = {
+    type: 'contact-form',
+    description: 'A configurable contact form with typed fields (text, email, tel, textarea, select, checkbox) that posts to a host-provided runtime. No raw HTML.',
+    schema,
+    css,
+    render,
+    island: 'contact-form',
+    runtime: { capabilities: [CAPABILITY] },
+};

package/lib/blocks/cta.d.ts

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

package/lib/blocks/cta.js

@@ -0,0 +1,40 @@
+/** `cta` — a conversion band with a headline and one button. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    headline: { kind: 'string', required: true, default: 'Ready to start?', max: 160 },
+    subhead: { kind: 'string', default: '', max: 240 },
+    background: { kind: 'enum', values: ['primary', 'accent', 'surface'], default: 'primary' },
+    button: {
+        kind: 'object',
+        fields: { label: { kind: 'string', default: 'Get started', max: 40 }, href: { kind: 'string', default: '#', max: 300 } },
+    },
+};
+const css = `
+.blk-cta{padding:var(--space-lg) var(--space);text-align:center}
+.blk-cta[data-bg="primary"]{background:var(--primary);color:var(--on-primary)}
+.blk-cta[data-bg="accent"]{background:var(--accent);color:var(--on-accent)}
+.blk-cta[data-bg="surface"]{background:var(--surface);color:var(--text)}
+.blk-cta .wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:calc(var(--space)*0.9)}
+.blk-cta h2{font-size:var(--fs-xl);margin:0;font-weight:800}
+.blk-cta p{margin:0;opacity:.9;font-size:var(--fs-lg)}
+.blk-cta .btn{display:inline-block;background:var(--surface);color:var(--text);padding:.7em 1.6em;border-radius:var(--radius);text-decoration:none;font-weight:700}
+.blk-cta[data-bg="surface"] .btn{background:var(--primary);color:var(--on-primary)}
+`.trim();
+function render(config) {
+    const headline = config.headline;
+    const subhead = config.subhead;
+    const bg = config.background;
+    const button = config.button;
+    return `<section class="blk-cta" data-bg="${escapeAttr(bg)}" aria-label="Call to action">
+  <div class="wrap">
+    <h2>${escapeHtml(headline)}</h2>
+    ${subhead ? `<p>${escapeHtml(subhead)}</p>` : ''}
+    ${button.label ? `<a class="btn" href="${escapeAttr(sanitizeUrl(button.href))}">${escapeHtml(button.label)}</a>` : ''}
+  </div>
+</section>`;
+}
+export const cta = {
+    type: 'cta',
+    description: 'A full-width call-to-action band: a headline, optional subheading, and one button. Use near the bottom.',
+    schema, css, render,
+};

package/lib/blocks/divider.d.ts

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

package/lib/blocks/divider.js

@@ -0,0 +1,28 @@
+/** `divider` — a visual section break (line / dots / gradient). Static brick. */
+import { escapeAttr } from '../schema.js';
+const schema = {
+    style: { kind: 'enum', values: ['line', 'dots', 'gradient'], default: 'line' },
+};
+const css = `
+.blk-divider{padding:var(--space) var(--space);background:var(--bg)}
+.blk-divider .wrap{max-width:1080px;margin:0 auto}
+.blk-divider hr{border:0;margin:0}
+.blk-divider.style-line hr{height:1px;background:color-mix(in srgb,var(--text) 15%,transparent)}
+.blk-divider.style-gradient hr{height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent)}
+.blk-divider.style-dots hr{height:6px;background:radial-gradient(circle,color-mix(in srgb,var(--muted) 60%,transparent) 1.5px,transparent 1.6px);background-size:16px 6px;background-position:center}
+`.trim();
+const STYLES = new Set(['line', 'dots', 'gradient']);
+function render(config) {
+    const raw = config.style;
+    const style = STYLES.has(raw) ? raw : 'line';
+    return `<section class="blk-divider style-${escapeAttr(style)}" aria-hidden="true">
+  <div class="wrap"><hr></div>
+</section>`;
+}
+export const divider = {
+    type: 'divider',
+    description: 'A visual section break rendered as a thin line, a dotted rule, or a gradient bar.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/faq.d.ts

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

package/lib/blocks/faq.js

@@ -0,0 +1,52 @@
+/**
+ * `faq` — question/answer accordion. Uses native <details>/<summary>, so it
+ * expands/collapses accessibly with ZERO JavaScript (static-first — no island).
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: 'Frequently asked questions', max: 120 },
+    items: {
+        kind: 'array', max: 20,
+        of: {
+            kind: 'object',
+            fields: {
+                question: { kind: 'string', required: true, default: '', max: 200 },
+                answer: { kind: 'string', default: '', max: 800 },
+            },
+        },
+    },
+};
+const css = `
+.blk-faq{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-faq .wrap{max-width:760px;margin:0 auto}
+.blk-faq h2{font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800;text-align:center}
+.blk-faq details{border-bottom:1px solid color-mix(in srgb,var(--text) 12%,transparent);padding:.9em 0}
+.blk-faq summary{cursor:pointer;font-weight:600;font-size:var(--fs-lg);list-style:none;display:flex;justify-content:space-between;gap:1em}
+.blk-faq summary::-webkit-details-marker{display:none}
+.blk-faq summary::after{content:"+";color:var(--accent);transition:transform var(--motion)}
+.blk-faq details[open] summary::after{content:"–"}
+.blk-faq .ans{margin:.6em 0 0;color:var(--muted)}
+`.trim();
+function item(it) {
+    if (!it.question)
+        return '';
+    return `<details>
+        <summary>${escapeHtml(it.question)}</summary>
+        ${it.answer ? `<p class="ans">${escapeHtml(it.answer)}</p>` : ''}
+      </details>`;
+}
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).map(item).filter(Boolean);
+    return `<section class="blk-faq" aria-label="${escapeAttr(title || 'FAQ')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    ${items.join('\n    ')}
+  </div>
+</section>`;
+}
+export const faq = {
+    type: 'faq',
+    description: 'An accordion of question/answer pairs. Expands/collapses natively (no JS).',
+    schema, css, render,
+};

package/lib/blocks/features.d.ts

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

package/lib/blocks/features.js

@@ -0,0 +1,58 @@
+/** `features` — icon + title + text grid (value props). Static brick. */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    columns: { kind: 'int', oneOf: [2, 3, 4], default: 3 },
+    items: {
+        kind: 'array', max: 12,
+        of: {
+            kind: 'object',
+            fields: {
+                icon: { kind: 'string', default: '', max: 8 }, // emoji or a single glyph
+                title: { kind: 'string', required: true, default: 'Feature', max: 80 },
+                text: { kind: 'string', default: '', max: 240 },
+            },
+        },
+    },
+};
+const css = `
+.blk-features{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-features .wrap{max-width:1080px;margin:0 auto}
+.blk-features .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-features h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-features .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-features .grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(var(--space)*1.4)}
+.blk-features .item .ico{font-size:1.8em;line-height:1}
+.blk-features .item h3{margin:.4em 0 .2em;font-size:var(--fs-lg);font-weight:700}
+.blk-features .item p{margin:0;color:var(--muted)}
+@media(max-width:720px){.blk-features .grid{grid-template-columns:1fr 1fr}}
+@media(max-width:440px){.blk-features .grid{grid-template-columns:1fr}}
+`.trim();
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const columns = Number.isInteger(config.columns) ? config.columns : 3;
+    const items = config.items ?? [];
+    const head = (title || subtitle)
+        ? `<div class="head">${title ? `<h2>${escapeHtml(title)}</h2>` : ''}${subtitle ? `<p class="sub">${escapeHtml(subtitle)}</p>` : ''}</div>`
+        : '';
+    const cards = items.map((it) => `<div class="item">
+        ${it.icon ? `<div class="ico" aria-hidden="true">${escapeHtml(it.icon)}</div>` : ''}
+        <h3>${escapeHtml(it.title)}</h3>
+        ${it.text ? `<p>${escapeHtml(it.text)}</p>` : ''}
+      </div>`).join('\n      ');
+    return `<section class="blk-features" aria-label="${escapeAttr(title || 'Features')}">
+  <div class="wrap">
+    ${head}
+    <div class="grid" style="--cols:${columns}">
+      ${cards}
+    </div>
+  </div>
+</section>`;
+}
+export const features = {
+    type: 'features',
+    description: 'A grid of value propositions, each with an optional icon/emoji, a title, and a short line of text.',
+    schema, css, render,
+};

package/lib/blocks/feed.d.ts

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

package/lib/blocks/feed.js

@@ -0,0 +1,81 @@
+/**
+ * `feed` — a generic data-driven list of items (list or card layout). Items are
+ * static config for now; a host can later back them with a data source via the
+ * runtime contract. Static brick.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    layout: { kind: 'enum', values: ['list', 'cards'], default: 'list' },
+    items: {
+        kind: 'array', max: 50,
+        of: {
+            kind: 'object',
+            fields: {
+                title: { kind: 'string', required: true, default: '', max: 160 },
+                subtitle: { kind: 'string', default: '', max: 120 },
+                text: { kind: 'string', default: '', max: 280 },
+                href: { kind: 'string', default: '', max: 500 },
+                image: { kind: 'string', default: '', max: 500 },
+                badge: { kind: 'string', default: '', max: 40 },
+            },
+        },
+    },
+};
+const css = `
+.blk-feed{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-feed .wrap{max-width:900px;margin:0 auto}
+.blk-feed h2{font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800;text-align:center}
+.blk-feed .items{display:flex;flex-direction:column;gap:.7em}
+.blk-feed.cards .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:calc(var(--space)*1.1)}
+.blk-feed .item{display:flex;gap:1em;align-items:center;background:var(--surface);border-radius:var(--radius);padding:.9em 1em;text-decoration:none;color:inherit}
+.blk-feed.cards .item{flex-direction:column;align-items:stretch}
+.blk-feed a.item{transition:transform var(--motion)}
+.blk-feed a.item:hover{transform:translateY(-2px)}
+.blk-feed .thumb{width:56px;height:56px;border-radius:var(--radius);object-fit:cover;flex:0 0 auto}
+.blk-feed.cards .thumb{width:100%;height:140px}
+.blk-feed .it-body{flex:1;min-width:0}
+.blk-feed .it-top{display:flex;gap:.5em;align-items:baseline;justify-content:space-between}
+.blk-feed .it-title{margin:0;font-size:var(--fs-lg);font-weight:700}
+.blk-feed .badge{color:var(--accent);font-weight:700;font-size:var(--fs-base);flex:0 0 auto}
+.blk-feed .it-sub{margin:.1em 0 0;color:var(--muted);font-size:var(--fs-base)}
+.blk-feed .it-text{margin:.3em 0 0;color:var(--muted);font-size:var(--fs-base);line-height:1.5}
+`.trim();
+function item(it) {
+    if (!it.title)
+        return '';
+    const href = sanitizeUrl(it.href);
+    const linked = href !== '#' && !!it.href;
+    const img = sanitizeUrl(it.image);
+    const thumb = (img !== '#' && it.image) ? `<img class="thumb" src="${escapeAttr(img)}" alt="${escapeAttr(it.title)}" loading="lazy">` : '';
+    const inner = `${thumb}
+        <div class="it-body">
+          <div class="it-top">
+            <p class="it-title">${escapeHtml(it.title)}</p>
+            ${it.badge ? `<span class="badge">${escapeHtml(it.badge)}</span>` : ''}
+          </div>
+          ${it.subtitle ? `<p class="it-sub">${escapeHtml(it.subtitle)}</p>` : ''}
+          ${it.text ? `<p class="it-text">${escapeHtml(it.text)}</p>` : ''}
+        </div>`;
+    return linked ? `<a class="item" href="${escapeAttr(href)}">${inner}</a>` : `<div class="item">${inner}</div>`;
+}
+function render(config) {
+    const title = config.title;
+    const layout = config.layout === 'cards' ? 'cards' : 'list';
+    const items = (config.items ?? []).map(item).filter(Boolean);
+    return `<section class="blk-feed ${layout}" aria-label="${escapeAttr(title || 'Feed')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="items">
+      ${items.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const feed = {
+    type: 'feed',
+    description: 'A generic data-driven list of items in a list or card layout, each with a title, optional subtitle/text, badge, image, and link.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/footer.d.ts

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

package/lib/blocks/footer.js

@@ -0,0 +1,40 @@
+/** `footer` — brand, links, copyright. Static brick. Place last. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    brand: { kind: 'string', default: '', max: 60 },
+    tagline: { kind: 'string', default: '', max: 160 },
+    links: {
+        kind: 'array', max: 12,
+        of: { kind: 'object', fields: { label: { kind: 'string', required: true, default: 'Link', max: 40 }, href: { kind: 'string', default: '#', max: 300 } } },
+    },
+    copyright: { kind: 'string', default: '', max: 160 },
+};
+const css = `
+.blk-footer{padding:var(--space-lg) var(--space);background:var(--text);color:color-mix(in srgb,var(--surface) 82%,var(--text))}
+.blk-footer .wrap{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--space);align-items:baseline;justify-content:space-between}
+.blk-footer .brand{font-weight:800;font-size:var(--fs-lg);color:var(--surface)}
+.blk-footer .tagline{margin:.3em 0 0;opacity:.7;max-width:40ch}
+.blk-footer .links{display:flex;flex-wrap:wrap;gap:calc(var(--space)*1.1)}
+.blk-footer .links a{color:inherit;text-decoration:none;opacity:.85}
+.blk-footer .links a:hover{opacity:1}
+.blk-footer .copy{width:100%;opacity:.6;font-size:var(--fs-base);margin-top:var(--space)}
+`.trim();
+function render(config) {
+    const brand = config.brand;
+    const tagline = config.tagline;
+    const links = config.links ?? [];
+    const copyright = config.copyright;
+    const linkHtml = links.map((l) => `<a href="${escapeAttr(sanitizeUrl(l.href))}">${escapeHtml(l.label)}</a>`).join('');
+    return `<footer class="blk-footer">
+  <div class="wrap">
+    <div>${brand ? `<div class="brand">${escapeHtml(brand)}</div>` : ''}${tagline ? `<p class="tagline">${escapeHtml(tagline)}</p>` : ''}</div>
+    ${links.length ? `<nav class="links" aria-label="Footer">${linkHtml}</nav>` : ''}
+    ${copyright ? `<div class="copy">${escapeHtml(copyright)}</div>` : ''}
+  </div>
+</footer>`;
+}
+export const footer = {
+    type: 'footer',
+    description: 'Page footer: brand, tagline, a row of links, and a copyright line. Place last.',
+    schema, css, render,
+};

package/lib/blocks/gallery.d.ts

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

package/lib/blocks/gallery.js

@@ -0,0 +1,64 @@
+/**
+ * `gallery` — responsive image grid. Static markup; the lightbox is a client
+ * "island" (declared via `island`), hydrated only when `lightbox` is true.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    layout: { kind: 'enum', values: ['grid', 'masonry', 'carousel'], default: 'grid' },
+    columns: { kind: 'int', oneOf: [2, 3, 4], default: 3 },
+    gap: { kind: 'enum', values: ['sm', 'md', 'lg'], default: 'md' },
+    lightbox: { kind: 'boolean', default: true },
+    items: {
+        kind: 'array',
+        max: 60,
+        of: {
+            kind: 'object',
+            fields: {
+                src: { kind: 'string', required: true, default: '', max: 500 },
+                alt: { kind: 'string', required: true, default: '', max: 200 },
+                caption: { kind: 'string', default: '', max: 200 },
+            },
+        },
+    },
+};
+const GAP_REM = { sm: '0.4rem', md: '0.8rem', lg: '1.4rem' };
+const css = `
+.blk-gallery{padding:var(--space-lg) var(--space);background:var(--bg)}
+.blk-gallery .wrap{max-width:1120px;margin:0 auto}
+.blk-gallery .grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--gap,0.8rem)}
+.blk-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
+.blk-gallery img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
+.blk-gallery figcaption{padding:.5em .7em;color:var(--muted);font-size:var(--fs-base)}
+@media(max-width:720px){.blk-gallery .grid{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:440px){.blk-gallery .grid{grid-template-columns:1fr}}
+`.trim();
+function figure(it) {
+    // Drop items with no source rather than emit a broken <img> (total render).
+    if (!it.src)
+        return '';
+    return `<figure>
+        <img src="${escapeAttr(it.src)}" alt="${escapeAttr(it.alt)}" loading="lazy">
+        ${it.caption ? `<figcaption>${escapeHtml(it.caption)}</figcaption>` : ''}
+      </figure>`;
+}
+function render(config) {
+    const columns = Number.isInteger(config.columns) ? config.columns : 3;
+    const gap = GAP_REM[config.gap] ?? GAP_REM.md;
+    const items = (config.items ?? []).map(figure).filter(Boolean);
+    return `<section class="blk-gallery" aria-label="Gallery">
+  <div class="wrap">
+    <div class="grid" style="--cols:${columns};--gap:${gap}">
+      ${items.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const gallery = {
+    type: 'gallery',
+    description: 'A responsive image grid (grid/masonry/carousel) with an optional click-to-zoom lightbox. Each item needs a src and alt text.',
+    schema,
+    css,
+    render,
+    // Only hydrated when lightbox:true (see registry.needsIsland). Static otherwise.
+    island: 'lightbox',
+};

package/lib/blocks/hero.d.ts

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

package/lib/blocks/hero.js

@@ -0,0 +1,48 @@
+/** `hero` — headline + optional eyebrow/subhead/CTA. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    eyebrow: { kind: 'string', default: '', max: 80 },
+    headline: { kind: 'string', required: true, default: 'Your headline here', max: 160 },
+    subhead: { kind: 'string', default: '', max: 320 },
+    align: { kind: 'enum', values: ['center', 'left'], default: 'center' },
+    cta: {
+        kind: 'object',
+        fields: {
+            label: { kind: 'string', default: '', max: 40 },
+            href: { kind: 'string', default: '#', max: 500 },
+        },
+    },
+};
+const css = `
+.blk-hero{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-hero .wrap{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:calc(var(--space)*0.9)}
+.blk-hero[data-align="center"] .wrap{align-items:center;text-align:center}
+.blk-hero .eyebrow{font-size:var(--fs-base);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:600}
+.blk-hero h1{font-size:var(--fs-xl);line-height:1.05;margin:0;font-weight:800}
+.blk-hero p{font-size:var(--fs-lg);color:var(--muted);margin:0;max-width:60ch}
+.blk-hero .cta{display:inline-block;background:var(--primary);color:var(--on-primary);padding:.7em 1.4em;border-radius:var(--radius);text-decoration:none;font-weight:600;transition:transform var(--motion)}
+.blk-hero .cta:hover{transform:translateY(-1px)}
+`.trim();
+function render(config) {
+    const eyebrow = config.eyebrow;
+    const headline = config.headline;
+    const subhead = config.subhead;
+    const align = config.align;
+    const cta = config.cta;
+    const parts = [
+        eyebrow ? `<p class="eyebrow">${escapeHtml(eyebrow)}</p>` : '',
+        `<h1>${escapeHtml(headline)}</h1>`,
+        subhead ? `<p>${escapeHtml(subhead)}</p>` : '',
+        cta.label ? `<a class="cta" href="${escapeAttr(sanitizeUrl(cta.href))}">${escapeHtml(cta.label)}</a>` : '',
+    ].filter(Boolean).join('\n    ');
+    return `<section class="blk-hero" data-align="${escapeAttr(align)}" aria-label="Hero">
+  <div class="wrap">
+    ${parts}
+  </div>
+</section>`;
+}
+export const hero = {
+    type: 'hero',
+    description: 'Top-of-page banner: a big headline with an optional eyebrow, subheading, and one call-to-action button.',
+    schema, css, render,
+};

package/lib/blocks/heroApp.d.ts

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

package/lib/blocks/heroApp.js

@@ -0,0 +1,65 @@
+/** `hero-app` — app landing hero: install CTA + a row of screenshots. Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    headline: { kind: 'string', required: true, default: '', max: 120 },
+    subhead: { kind: 'string', default: '', max: 240 },
+    installLabel: { kind: 'string', default: 'Install app', max: 40 },
+    installHref: { kind: 'string', default: '', max: 500 },
+    screenshots: {
+        kind: 'array',
+        max: 6,
+        of: {
+            kind: 'object',
+            fields: {
+                src: { kind: 'string', required: true, default: '', max: 500 },
+                alt: { kind: 'string', default: '', max: 200 },
+            },
+        },
+    },
+};
+const css = `
+.blk-hero-app{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text);font-family:var(--font);text-align:center}
+.blk-hero-app .wrap{max-width:1080px;margin:0 auto}
+.blk-hero-app h1{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800;line-height:1.1}
+.blk-hero-app .sub{color:var(--muted);font-size:var(--fs-lg);margin:0 auto;max-width:60ch}
+.blk-hero-app .cta{margin:var(--space-lg) 0 0}
+.blk-hero-app .install{display:inline-block;padding:.7em 1.6em;border-radius:var(--radius);background:var(--primary);color:var(--on-primary);text-decoration:none;font-weight:700;font-size:var(--fs-lg);transition:filter var(--motion)}
+.blk-hero-app .install:hover,.blk-hero-app .install:focus-visible{filter:brightness(1.08)}
+.blk-hero-app .shots{display:flex;gap:var(--space);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-lg) .2em .4em;margin-top:var(--space);justify-content:flex-start}
+.blk-hero-app .shots::-webkit-scrollbar{height:8px}
+.blk-hero-app .shot{flex:0 0 auto;width:min(240px,60vw);scroll-snap-align:center}
+.blk-hero-app .shot img{display:block;width:100%;border-radius:calc(var(--radius)*1.5);background:var(--surface);border:1px solid color-mix(in srgb, var(--text) 15%, transparent);aspect-ratio:9/19;object-fit:cover}
+@media(min-width:720px){.blk-hero-app .shots{justify-content:center}}
+@media(max-width:440px){.blk-hero-app .shot{width:70vw}}
+`.trim();
+function shot(s) {
+    // Drop items with no source rather than emit a broken <img> (total render).
+    if (!s.src)
+        return '';
+    return `<div class="shot"><img src="${escapeAttr(sanitizeUrl(s.src))}" alt="${escapeAttr(s.alt)}" loading="lazy"></div>`;
+}
+function render(config) {
+    const headline = config.headline;
+    const subhead = config.subhead;
+    const installLabel = config.installLabel || 'Install app';
+    const installHref = escapeAttr(sanitizeUrl(config.installHref || '#'));
+    const shots = (config.screenshots ?? []).map(shot).filter(Boolean);
+    const gallery = shots.length
+        ? `<div class="shots">\n      ${shots.join('\n      ')}\n    </div>`
+        : '';
+    return `<section class="blk-hero-app" aria-label="${escapeAttr(headline || 'App')}">
+  <div class="wrap">
+    ${headline ? `<h1>${escapeHtml(headline)}</h1>` : ''}
+    ${subhead ? `<p class="sub">${escapeHtml(subhead)}</p>` : ''}
+    <div class="cta"><a class="install" href="${installHref}">${escapeHtml(installLabel)}</a></div>
+    ${gallery}
+  </div>
+</section>`;
+}
+export const heroApp = {
+    type: 'hero-app',
+    description: 'An app landing hero: a headline and subhead over a primary install button, with a horizontal scroll row of app screenshots.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/logos.d.ts

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