@bytesbrains/weblocks 0.2.0

package/lib/blocks/split.js

@@ -0,0 +1,67 @@
+/**
+ * `split` — alternating image + text rows. Each row is a 2-column grid; the
+ * image side flips per row. Rows with no image collapse to a single text
+ * column. Static brick.
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    rows: {
+        kind: 'array',
+        max: 8,
+        of: {
+            kind: 'object',
+            fields: {
+                title: { kind: 'string', default: '', max: 120 },
+                text: { kind: 'string', default: '', max: 600 },
+                image: { kind: 'string', default: '', max: 500 },
+                imageAlt: { kind: 'string', default: '', max: 200 },
+            },
+        },
+    },
+};
+const css = `
+.blk-split{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-split .wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:calc(var(--space)*2.2)}
+.blk-split .row{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--space)*2);align-items:center}
+.blk-split .row.text-only{grid-template-columns:min(68ch,100%);justify-content:center;text-align:center}
+.blk-split .row.img-right .media{order:1}
+.blk-split .row.img-left .media{order:-1}
+.blk-split h2{font-size:var(--fs-xl);margin:0 0 .4em;font-weight:800}
+.blk-split p{color:var(--muted);font-size:var(--fs-lg);margin:0;line-height:1.6;white-space:pre-line}
+.blk-split .media img{width:100%;border-radius:var(--radius);display:block;object-fit:cover}
+@media(max-width:760px){.blk-split .row{grid-template-columns:1fr;text-align:left}.blk-split .row .media{order:-1}}
+`.trim();
+function render(config) {
+    const rows = (config.rows ?? []).filter((r) => r && (r.title || r.text || r.image));
+    const html = rows
+        .map((r, i) => {
+        const url = sanitizeUrl(r.image);
+        const hasImg = url !== '#' && !!r.image;
+        const side = i % 2 === 0 ? 'img-left' : 'img-right';
+        const cls = hasImg ? `row ${side}` : 'row text-only';
+        const text = `<div class="text">
+        ${r.title ? `<h2>${escapeHtml(r.title)}</h2>` : ''}
+        ${r.text ? `<p>${escapeHtml(r.text)}</p>` : ''}
+      </div>`;
+        const media = hasImg
+            ? `<div class="media"><img src="${escapeAttr(url)}" alt="${escapeAttr(r.imageAlt)}" loading="lazy"></div>`
+            : '';
+        return `<div class="${cls}">
+      ${text}
+      ${media}
+    </div>`;
+    })
+        .join('\n    ');
+    return `<section class="blk-split" aria-label="Details">
+  <div class="wrap">
+    ${html}
+  </div>
+</section>`;
+}
+export const split = {
+    type: 'split',
+    description: 'Alternating image-and-text rows; the image side flips each row, and rows without an image collapse to centered text.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/stats.d.ts

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

package/lib/blocks/stats.js

@@ -0,0 +1,64 @@
+/**
+ * `stats` — a grid of metric counters. Each stat shows an optional prefix, a
+ * big value, an optional suffix, and a muted label. The final value renders
+ * statically; the `stats` island can enhance it with a count-up animation
+ * (reading `data-wl-count`), so the block works with zero JS.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    columns: { kind: 'int', oneOf: [2, 3, 4], default: 4 },
+    items: {
+        kind: 'array',
+        max: 8,
+        of: {
+            kind: 'object',
+            fields: {
+                value: { kind: 'string', required: true, default: '', max: 24 },
+                label: { kind: 'string', required: true, default: '', max: 60 },
+                prefix: { kind: 'string', default: '', max: 8 },
+                suffix: { kind: 'string', default: '', max: 8 },
+            },
+        },
+    },
+};
+const css = `
+.blk-stats{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-stats .wrap{max-width:1080px;margin:0 auto}
+.blk-stats h2{text-align:center;font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800}
+.blk-stats .grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:calc(var(--space)*1.4)}
+.blk-stats .item{text-align:center}
+.blk-stats .value{font-size:var(--fs-xl);font-weight:800;line-height:1;color:var(--primary)}
+.blk-stats .affix{color:var(--accent)}
+.blk-stats .label{margin:.5em 0 0;color:var(--muted);font-size:var(--fs-base)}
+@media(max-width:720px){.blk-stats .grid{grid-template-columns:1fr 1fr}}
+@media(max-width:420px){.blk-stats .grid{grid-template-columns:1fr}}
+`.trim();
+function render(config) {
+    const title = config.title;
+    const columns = Number.isInteger(config.columns) ? config.columns : 4;
+    const items = (config.items ?? []).filter((it) => it && it.value && it.label);
+    const cards = items
+        .map((it) => `<div class="item">
+        <div class="value" data-wl-count="${escapeAttr(it.value)}">${it.prefix ? `<span class="affix">${escapeHtml(it.prefix)}</span>` : ''}${escapeHtml(it.value)}${it.suffix ? `<span class="affix">${escapeHtml(it.suffix)}</span>` : ''}</div>
+        <p class="label">${escapeHtml(it.label)}</p>
+      </div>`)
+        .join('\n      ');
+    const heading = title ? `<h2>${escapeHtml(title)}</h2>` : '';
+    return `<section class="blk-stats" aria-label="${escapeAttr(title || 'Statistics')}">
+  <div class="wrap">
+    ${heading}
+    <div class="grid" style="--cols:${columns}">
+      ${cards}
+    </div>
+  </div>
+</section>`;
+}
+export const stats = {
+    type: 'stats',
+    description: 'A grid of metric counters: each stat shows an optional prefix/suffix around a big value with a muted label, with an optional count-up animation.',
+    schema,
+    css,
+    render,
+    island: 'stats',
+};

package/lib/blocks/steps.d.ts

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

package/lib/blocks/steps.js

@@ -0,0 +1,63 @@
+/**
+ * `steps` — a numbered how-it-works / process list. Each step is an
+ * auto-numbered card with a title and optional supporting text. Static brick.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    subtitle: { kind: 'string', default: '', max: 240 },
+    items: {
+        kind: 'array',
+        max: 12,
+        of: {
+            kind: 'object',
+            fields: {
+                title: { kind: 'string', required: true, default: 'Step', max: 100 },
+                text: { kind: 'string', default: '', max: 300 },
+            },
+        },
+    },
+};
+const css = `
+.blk-steps{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-steps .wrap{max-width:1000px;margin:0 auto}
+.blk-steps .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-steps h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-steps .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-steps ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:calc(var(--space)*1.4)}
+.blk-steps li{background:var(--surface);border-radius:var(--radius);padding:calc(var(--space)*1.3)}
+.blk-steps .num{display:inline-flex;align-items:center;justify-content:center;width:2.2em;height:2.2em;border-radius:999px;background:var(--primary);color:var(--on-primary);font-weight:800;font-size:var(--fs-lg);margin-bottom:.5em}
+.blk-steps h3{margin:0 0 .2em;font-size:var(--fs-lg);font-weight:700}
+.blk-steps p{margin:0;color:var(--muted);line-height:1.5}
+@media(max-width:480px){.blk-steps ol{grid-template-columns:1fr}}
+`.trim();
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const items = (config.items ?? []).filter((it) => it && it.title);
+    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, i) => `<li>
+        <div class="num" aria-hidden="true">${i + 1}</div>
+        <h3>${escapeHtml(it.title)}</h3>
+        ${it.text ? `<p>${escapeHtml(it.text)}</p>` : ''}
+      </li>`)
+        .join('\n      ');
+    return `<section class="blk-steps" aria-label="${escapeAttr(title || 'Steps')}">
+  <div class="wrap">
+    ${head}
+    <ol>
+      ${cards}
+    </ol>
+  </div>
+</section>`;
+}
+export const steps = {
+    type: 'steps',
+    description: 'A numbered how-it-works / process list: an optional title and subtitle over auto-numbered step cards, each with a title and short text.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/tabs.d.ts

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

package/lib/blocks/tabs.js

@@ -0,0 +1,57 @@
+/**
+ * `tabs` — tabbed content panels, CSS-ONLY (no JavaScript, no island). Hidden
+ * radio inputs drive `:checked ~` sibling rules to show one panel at a time. The
+ * radio group name is scoped to the placed block's id (via the render context)
+ * so multiple `tabs` blocks on one page never collide.
+ */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    items: {
+        kind: 'array', max: 8,
+        of: {
+            kind: 'object',
+            fields: {
+                label: { kind: 'string', required: true, default: '', max: 60 },
+                text: { kind: 'string', default: '', max: 2000 },
+            },
+        },
+    },
+};
+const css = `
+.blk-tabs{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-tabs .wrap{max-width:820px;margin:0 auto}
+.blk-tabs input{position:absolute;opacity:0;pointer-events:none}
+.blk-tabs .tablist{display:flex;flex-wrap:wrap;gap:.3em;border-bottom:1px solid color-mix(in srgb,var(--text) 15%,transparent);margin-bottom:var(--space)}
+.blk-tabs label{cursor:pointer;padding:.55em .9em;border-radius:var(--radius) var(--radius) 0 0;color:var(--muted);font-weight:600;font-size:var(--fs-base)}
+.blk-tabs label:hover{color:var(--text)}
+.blk-tabs .panel{display:none;line-height:1.6;color:var(--muted);font-size:var(--fs-lg);white-space:pre-line}
+${[0, 1, 2, 3, 4, 5, 6, 7].map((i) => `.blk-tabs input.t${i}:checked ~ .tablist label.l${i}{color:var(--primary);border-bottom:2px solid var(--primary);margin-bottom:-1px}
+.blk-tabs input.t${i}:checked ~ .panels .panel.p${i}{display:block}`).join('\n')}
+`.trim();
+function render(config, _tokens, ctx) {
+    const base = (ctx?.id || 'tabs').replace(/[^A-Za-z0-9_-]/g, '') || 'tabs';
+    const items = (config.items ?? []).filter((it) => it && it.label);
+    if (!items.length)
+        return `<section class="blk-tabs" aria-label="Tabs"><div class="wrap"></div></section>`;
+    const inputs = items.map((_it, i) => `<input class="t${i}" type="radio" name="${escapeAttr(base)}" id="${escapeAttr(base)}-${i}"${i === 0 ? ' checked' : ''}>`).join('\n    ');
+    const labels = items.map((it, i) => `<label class="l${i}" for="${escapeAttr(base)}-${i}">${escapeHtml(it.label)}</label>`).join('\n      ');
+    const panels = items.map((it, i) => `<div class="panel p${i}">${escapeHtml(it.text)}</div>`).join('\n      ');
+    return `<section class="blk-tabs" aria-label="Tabs">
+  <div class="wrap">
+    ${inputs}
+    <div class="tablist" role="tablist">
+      ${labels}
+    </div>
+    <div class="panels">
+      ${panels}
+    </div>
+  </div>
+</section>`;
+}
+export const tabs = {
+    type: 'tabs',
+    description: 'Tabbed content panels that switch with no JavaScript; each tab has a label and a text panel.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/team.d.ts

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

package/lib/blocks/team.js

@@ -0,0 +1,94 @@
+/** `team` — a grid of people cards (photo, role, bio, socials). Static brick. */
+import { escapeAttr, escapeHtml, sanitizeUrl } 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 },
+    members: {
+        kind: 'array', max: 24,
+        of: {
+            kind: 'object',
+            fields: {
+                name: { kind: 'string', required: true, default: '', max: 80 },
+                role: { kind: 'string', default: '', max: 80 },
+                photo: { kind: 'string', default: '', max: 500 },
+                bio: { kind: 'string', default: '', max: 240 },
+                socials: {
+                    kind: 'array', max: 5,
+                    of: {
+                        kind: 'object',
+                        fields: {
+                            label: { kind: 'string', required: true, default: '', max: 40 },
+                            href: { kind: 'string', default: '', max: 500 },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+const css = `
+.blk-team{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-team .wrap{max-width:1120px;margin:0 auto}
+.blk-team .head{text-align:center;margin-bottom:var(--space-lg)}
+.blk-team h2{font-size:var(--fs-xl);margin:0 0 .3em;font-weight:800}
+.blk-team .sub{color:var(--muted);font-size:var(--fs-lg);margin:0}
+.blk-team .grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:calc(var(--space)*1.4)}
+.blk-team .card{background:var(--surface);border-radius:var(--radius);padding:calc(var(--space)*1.2);text-align:center}
+.blk-team .avatar,.blk-team .initials{width:88px;height:88px;border-radius:999px;margin:0 auto .7em;object-fit:cover;display:flex;align-items:center;justify-content:center}
+.blk-team .initials{background:color-mix(in srgb,var(--primary) 18%,var(--surface));color:var(--primary);font-weight:800;font-size:var(--fs-lg)}
+.blk-team .name{margin:0;font-size:var(--fs-lg);font-weight:700}
+.blk-team .role{margin:.15em 0 .5em;color:var(--accent);font-size:var(--fs-base);font-weight:600}
+.blk-team .bio{margin:0 0 .6em;color:var(--muted);font-size:var(--fs-base);line-height:1.5}
+.blk-team .socials{display:flex;justify-content:center;gap:.6em;flex-wrap:wrap}
+.blk-team .socials a{color:var(--muted);font-size:var(--fs-base);text-decoration:none;font-weight:600}
+.blk-team .socials a:hover,.blk-team .socials a:focus-visible{color:var(--primary)}
+@media(max-width:720px){.blk-team .grid{grid-template-columns:1fr 1fr}}
+@media(max-width:440px){.blk-team .grid{grid-template-columns:1fr}}
+`.trim();
+function initials(name) {
+    return name.trim().split(/\s+/).slice(0, 2).map((w) => w[0] ?? '').join('').toUpperCase() || '?';
+}
+function card(m) {
+    if (!m.name)
+        return '';
+    const photo = sanitizeUrl(m.photo);
+    const avatar = (photo !== '#' && m.photo)
+        ? `<img class="avatar" src="${escapeAttr(photo)}" alt="${escapeAttr(m.name)}" loading="lazy">`
+        : `<div class="initials" aria-hidden="true">${escapeHtml(initials(m.name))}</div>`;
+    const socials = (m.socials ?? [])
+        .filter((s) => s && s.label && sanitizeUrl(s.href) !== '#')
+        .map((s) => `<a href="${escapeAttr(sanitizeUrl(s.href))}" rel="noopener">${escapeHtml(s.label)}</a>`)
+        .join('');
+    return `<div class="card">
+        ${avatar}
+        <p class="name">${escapeHtml(m.name)}</p>
+        ${m.role ? `<p class="role">${escapeHtml(m.role)}</p>` : ''}
+        ${m.bio ? `<p class="bio">${escapeHtml(m.bio)}</p>` : ''}
+        ${socials ? `<div class="socials">${socials}</div>` : ''}
+      </div>`;
+}
+function render(config) {
+    const title = config.title;
+    const subtitle = config.subtitle;
+    const columns = Number.isInteger(config.columns) ? config.columns : 3;
+    const members = (config.members ?? []).map(card).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-team" aria-label="${escapeAttr(title || 'Team')}">
+  <div class="wrap">
+    ${head}
+    <div class="grid" style="--cols:${columns}">
+      ${members.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const team = {
+    type: 'team',
+    description: 'A grid of people cards with photo (or initials), name, role, a short bio, and optional social links.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/testimonials.d.ts

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

package/lib/blocks/testimonials.js

@@ -0,0 +1,54 @@
+/** `testimonials` — customer quotes. Static brick. */
+import { escapeAttr, escapeHtml } from '../schema.js';
+const schema = {
+    title: { kind: 'string', default: '', max: 120 },
+    items: {
+        kind: 'array', max: 12,
+        of: {
+            kind: 'object',
+            fields: {
+                quote: { kind: 'string', required: true, default: '', max: 400 },
+                author: { kind: 'string', default: '', max: 80 },
+                role: { kind: 'string', default: '', max: 80 },
+            },
+        },
+    },
+};
+const css = `
+.blk-testimonials{padding:var(--space-lg) var(--space);background:var(--surface)}
+.blk-testimonials .wrap{max-width:1080px;margin:0 auto}
+.blk-testimonials h2{text-align:center;font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800;color:var(--text)}
+.blk-testimonials .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:calc(var(--space)*1.2)}
+.blk-testimonials figure{margin:0;background:var(--bg);border-radius:var(--radius);padding:calc(var(--space)*1.3)}
+.blk-testimonials blockquote{margin:0;font-size:var(--fs-lg);color:var(--text);line-height:1.4}
+.blk-testimonials figcaption{margin-top:.8em;color:var(--muted);font-weight:600}
+.blk-testimonials figcaption .role{font-weight:400}
+`.trim();
+function item(it) {
+    if (!it.quote)
+        return '';
+    const cap = it.author
+        ? `<figcaption>${escapeHtml(it.author)}${it.role ? ` <span class="role">· ${escapeHtml(it.role)}</span>` : ''}</figcaption>`
+        : '';
+    return `<figure>
+        <blockquote>“${escapeHtml(it.quote)}”</blockquote>
+        ${cap}
+      </figure>`;
+}
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).map(item).filter(Boolean);
+    return `<section class="blk-testimonials" aria-label="${escapeAttr(title || 'Testimonials')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <div class="grid">
+      ${items.join('\n      ')}
+    </div>
+  </div>
+</section>`;
+}
+export const testimonials = {
+    type: 'testimonials',
+    description: 'A grid of customer quotes, each with the quote text and an optional author name and role.',
+    schema, css, render,
+};

package/lib/blocks/timeline.d.ts

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

package/lib/blocks/timeline.js

@@ -0,0 +1,53 @@
+/** `timeline` — a vertical list of chronological milestones. 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: {
+                date: { kind: 'string', default: '', max: 40 },
+                title: { kind: 'string', required: true, default: '', max: 120 },
+                text: { kind: 'string', default: '', max: 400 },
+            },
+        },
+    },
+};
+const css = `
+.blk-timeline{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-timeline .wrap{max-width:760px;margin:0 auto}
+.blk-timeline h2{font-size:var(--fs-xl);margin:0 0 var(--space-lg);font-weight:800;text-align:center}
+.blk-timeline ol{list-style:none;margin:0;padding:0;position:relative}
+.blk-timeline ol::before{content:"";position:absolute;left:7px;top:.4em;bottom:.4em;width:2px;background:color-mix(in srgb,var(--muted) 35%,transparent)}
+.blk-timeline li{position:relative;padding:0 0 calc(var(--space)*1.6) calc(var(--space)*2)}
+.blk-timeline li:last-child{padding-bottom:0}
+.blk-timeline li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:999px;background:var(--primary);box-shadow:0 0 0 3px var(--bg)}
+.blk-timeline .date{color:var(--accent);font-weight:700;font-size:var(--fs-base)}
+.blk-timeline h3{margin:.1em 0 .2em;font-size:var(--fs-lg);font-weight:700}
+.blk-timeline p{margin:0;color:var(--muted);line-height:1.55}
+`.trim();
+function render(config) {
+    const title = config.title;
+    const items = (config.items ?? []).filter((it) => it && it.title);
+    const entries = items.map((it) => `<li>
+        ${it.date ? `<span class="date">${escapeHtml(it.date)}</span>` : ''}
+        <h3>${escapeHtml(it.title)}</h3>
+        ${it.text ? `<p>${escapeHtml(it.text)}</p>` : ''}
+      </li>`).join('\n      ');
+    return `<section class="blk-timeline" aria-label="${escapeAttr(title || 'Timeline')}">
+  <div class="wrap">
+    ${title ? `<h2>${escapeHtml(title)}</h2>` : ''}
+    <ol>
+      ${entries}
+    </ol>
+  </div>
+</section>`;
+}
+export const timeline = {
+    type: 'timeline',
+    description: 'A vertical timeline of chronological milestones, each with an optional date, a title, and supporting text.',
+    schema,
+    css,
+    render,
+};

package/lib/blocks/video.d.ts

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

package/lib/blocks/video.js

@@ -0,0 +1,61 @@
+/**
+ * `video` — a responsive embedded video (YouTube / Vimeo) or a self-hosted file.
+ * Provider embeds are built from a sanitized id (privacy-friendly hosts), so no
+ * arbitrary URL is ever interpolated into the iframe src. Static brick (native
+ * players — no island).
+ */
+import { escapeAttr, escapeHtml, sanitizeUrl } from '../schema.js';
+const schema = {
+    provider: { kind: 'enum', values: ['youtube', 'vimeo', 'file'], default: 'youtube' },
+    src: { kind: 'string', required: true, default: '', max: 500 },
+    title: { kind: 'string', default: 'Video', max: 120 },
+    poster: { kind: 'string', default: '', max: 500 },
+    caption: { kind: 'string', default: '', max: 200 },
+};
+const css = `
+.blk-video{padding:var(--space-lg) var(--space);background:var(--bg);color:var(--text)}
+.blk-video .wrap{max-width:900px;margin:0 auto}
+.blk-video .frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--surface)}
+.blk-video iframe,.blk-video video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover}
+.blk-video figcaption{margin:.6em 0 0;color:var(--muted);font-size:var(--fs-base);text-align:center}
+`.trim();
+function ytId(src) {
+    // Accept a bare id or a common URL; reduce to the safe id charset only.
+    const m = /(?:v=|youtu\.be\/|embed\/)([A-Za-z0-9_-]{6,})/.exec(src);
+    return (m ? m[1] : src).replace(/[^A-Za-z0-9_-]/g, '');
+}
+function render(config) {
+    const provider = config.provider;
+    const src = String(config.src ?? '');
+    const title = config.title || 'Video';
+    const caption = config.caption;
+    let frame;
+    if (provider === 'file') {
+        const url = sanitizeUrl(src);
+        const poster = sanitizeUrl(config.poster);
+        frame = url === '#'
+            ? ''
+            : `<video controls preload="metadata"${poster !== '#' && config.poster ? ` poster="${escapeAttr(poster)}"` : ''}><source src="${escapeAttr(url)}"></video>`;
+    }
+    else if (provider === 'vimeo') {
+        const id = src.replace(/[^0-9]/g, '');
+        frame = id ? `<iframe src="https://player.vimeo.com/video/${escapeAttr(id)}" title="${escapeAttr(title)}" loading="lazy" allowfullscreen></iframe>` : '';
+    }
+    else {
+        const id = ytId(src);
+        frame = id ? `<iframe src="https://www.youtube-nocookie.com/embed/${escapeAttr(id)}" title="${escapeAttr(title)}" loading="lazy" allow="accelerometer; encrypted-media; picture-in-picture" allowfullscreen></iframe>` : '';
+    }
+    return `<section class="blk-video" aria-label="${escapeAttr(title)}">
+  <figure class="wrap">
+    <div class="frame">${frame}</div>
+    ${caption ? `<figcaption>${escapeHtml(caption)}</figcaption>` : ''}
+  </figure>
+</section>`;
+}
+export const video = {
+    type: 'video',
+    description: 'A responsive embedded video from YouTube or Vimeo (by id or URL) or a self-hosted file, with an optional caption.',
+    schema,
+    css,
+    render,
+};

package/lib/catalog.d.ts

@@ -0,0 +1,26 @@
+export interface BlockCatalogEntry {
+    type: string;
+    description: string;
+    schema: JsonSchema;
+    /** Powered brick (§6): the host runtime capabilities it needs, if any. */
+    runtime?: {
+        capabilities: string[];
+    };
+}
+export interface JsonSchema {
+    type?: string;
+    enum?: readonly (string | number)[];
+    properties?: Record<string, JsonSchema>;
+    required?: string[];
+    items?: JsonSchema;
+    maxItems?: number;
+    maxLength?: number;
+    minimum?: number;
+    maximum?: number;
+    default?: unknown;
+    additionalProperties?: boolean;
+}
+/** Full structured catalog — one entry per registered brick. */
+export declare function catalog(): BlockCatalogEntry[];
+/** A short human/AI-readable list of every brick and its params (`*` = expected). */
+export declare function catalogPrompt(): string;

package/lib/catalog.js

@@ -0,0 +1,62 @@
+import { REGISTRY } from './registry.js';
+function fieldToJsonSchema(field) {
+    switch (field.kind) {
+        case 'string': return { type: 'string', ...(field.max !== undefined && { maxLength: field.max }), ...(field.default !== undefined && { default: field.default }) };
+        case 'enum': return { enum: field.values, ...(field.default !== undefined && { default: field.default }) };
+        case 'boolean': return { type: 'boolean', ...(field.default !== undefined && { default: field.default }) };
+        case 'int': return {
+            type: 'integer',
+            ...(field.oneOf && { enum: field.oneOf }),
+            ...(field.min !== undefined && { minimum: field.min }),
+            ...(field.max !== undefined && { maximum: field.max }),
+            ...(field.default !== undefined && { default: field.default }),
+        };
+        case 'object': return schemaToJsonSchema(field.fields);
+        case 'array': return { type: 'array', items: fieldToJsonSchema(field.of), ...(field.max !== undefined && { maxItems: field.max }) };
+    }
+}
+function schemaToJsonSchema(schema) {
+    const properties = {};
+    const required = [];
+    for (const [key, field] of Object.entries(schema)) {
+        properties[key] = fieldToJsonSchema(field);
+        if ((field.kind === 'string' || field.kind === 'enum' || field.kind === 'object' || field.kind === 'array') && field.required) {
+            required.push(key);
+        }
+    }
+    return { type: 'object', properties, ...(required.length && { required }), additionalProperties: false };
+}
+/** Full structured catalog — one entry per registered brick. */
+export function catalog() {
+    return [...REGISTRY.values()].map((spec) => ({
+        type: spec.type,
+        description: spec.description,
+        schema: schemaToJsonSchema(spec.schema),
+        ...(spec.runtime ? { runtime: { capabilities: [...spec.runtime.capabilities] } } : {}),
+    }));
+}
+// ── Compact prompt rendering (token-cheap "menu" for a system prompt) ──────────
+function fieldSummary(field) {
+    switch (field.kind) {
+        case 'string': return `string${field.max ? `(≤${field.max})` : ''}${field.required ? ' *' : ''}`;
+        case 'enum': return `${field.values.join('|')}${field.default ? `=${field.default}` : ''}`;
+        case 'boolean': return `bool${field.default !== undefined ? `=${field.default}` : ''}`;
+        case 'int': return `int${field.oneOf ? `(${field.oneOf.join('|')})` : ''}${field.default !== undefined ? `=${field.default}` : ''}`;
+        case 'object': return `{ ${Object.entries(field.fields).map(([k, f]) => `${k}:${fieldSummary(f)}`).join(', ')} }`;
+        case 'array': return `[ ${fieldSummary(field.of)} ]${field.max ? `(≤${field.max})` : ''}`;
+    }
+}
+/** A short human/AI-readable list of every brick and its params (`*` = expected). */
+export function catalogPrompt() {
+    return catalog0()
+        .map((spec) => {
+        const params = Object.entries(spec.schema).map(([k, f]) => `${k}: ${fieldSummary(f)}`).join('; ');
+        const dyn = spec.runtime ? `  [dynamic — host provides: ${spec.runtime.capabilities.join(', ')}]` : '';
+        return `- ${spec.type} — ${spec.description}${dyn}\n    config: { ${params} }`;
+    })
+        .join('\n');
+}
+// internal: iterate specs with their raw Schema (for the compact summary)
+function catalog0() {
+    return [...REGISTRY.values()].map((s) => ({ type: s.type, description: s.description, schema: s.schema, runtime: s.runtime }));
+}