@bestagentkits/render 0.1.1-next.1 → 0.3.0

package/dist/render/blocks.js

@@ -1,52 +1,16 @@
-/**
- * Block renderers.
- *
- * One renderer per registry type. Renderers are pure functions of a node, the
- * IR, and the resolved theme: no clock, no randomness, no module-level mutable
- * state, because the emitted bytes must be reproducible.
- *
- * Two conventions apply to every renderer:
- *   1. Exactly one element in the emitted markup carries `data-ak-id`, so a
- *      `copy`/`download`/`toggle` target resolves to the content a reader means.
- *   2. Action bindings become `data-ak-on-*` attributes; the runtime owns what
- *      they do. No renderer emits a handler, a style attribute, or a script.
- */
 import { runDiagramAdapter } from '../diagram/adapter.js';
 import { isPlainObject } from '../json.js';
-import { EMBED_PROVIDERS, hostMatchesAnyProvider, hostMatchesProvider } from '../spec/providers.js';
-import { renderChart } from './charts.js';
-import { escapeAttribute, escapeText, escapeUrl, renderAttributes, } from './escape.js';
+import { DEFAULT_REGISTRY } from '../registry/registry.js';
+import { EMBED_PROVIDERS } from '../spec/providers.js';
+import { blockedReason, element, figureCaption, heading, imageReferenceAllowed, listProp, nodeAttributes, numberProp, numProp, objectListProp, resolveMedia, str, stringProp, titleHeader, } from './block-helpers.js';
+import { renderDiagramFallback } from './diagram-fallback.js';
+import { escapeAttribute, escapeInlineText, escapeText, escapeUrl, renderAttributes, } from './escape.js';
+import { browserShot, SHOWCASE_RENDERERS } from './showcase-blocks.js';
+import { toneBadge, valueTone } from './tone.js';
 const NO_OP_RENDERER = () => '';
-function stringProp(node, key, fallback = '') {
-    const value = node.props[key];
-    return typeof value === 'string' ? value : fallback;
-}
-function numberProp(node, key, fallback = 0) {
-    const value = node.props[key];
-    return typeof value === 'number' ? value : fallback;
-}
-function listProp(node, key) {
-    const value = node.props[key];
-    return Array.isArray(value) ? value : [];
-}
-function objectListProp(node, key) {
-    return listProp(node, key).filter(isPlainObject);
-}
-function str(value, fallback = '') {
-    return typeof value === 'string' ? value : fallback;
-}
-function numProp(value, fallback = 0) {
-    return typeof value === 'number' ? value : fallback;
-}
-/** `data-ak-id` plus every non-click binding on the node. */
-function nodeAttributes(node, extra = {}) {
-    const attributes = { 'data-ak-id': node.id, ...extra };
-    for (const [event, actions] of Object.entries(node.bindings)) {
-        if (event === 'click')
-            continue;
-        attributes[`data-ak-on-${event}`] = JSON.stringify(actions);
-    }
-    return attributes;
+/** Fragment id of a section, shared by the section renderer and the page outline. */
+export function sectionAnchor(nodeId) {
+    return `ak-sec-${nodeId}`;
 }
 /** `data-ak-on-click` for a control, when the node binds a click action. */
 function clickAttribute(bindings) {
@@ -55,71 +19,48 @@ function clickAttribute(bindings) {
         return {};
     return { 'data-ak-on-click': JSON.stringify(actions) };
 }
-function element(tag, attributes, inner) {
-    const rendered = renderAttributes(attributes);
-    return inner === '' ? `<${tag}${rendered}></${tag}>` : `<${tag}${rendered}>${inner}</${tag}>`;
-}
-function heading(level, text, className = 'ak-section-head') {
-    return `<header class="${className}"><h${level}>${escapeText(text)}</h${level}></header>`;
-}
-/** A section heading for blocks whose `title` is optional. */
-function titleHeader(node, level = 2) {
-    const title = stringProp(node, 'title');
-    return title === '' ? '' : heading(level, title);
-}
-function figureCaption(value) {
-    return value === '' ? '' : `<figcaption>${escapeText(value)}</figcaption>`;
-}
 function toneAttribute(node, fallback = 'info') {
     return { 'data-tone': stringProp(node, 'tone', fallback) };
 }
-function isRemote(reference) {
-    return /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(reference);
+/** A cell reads as a number when it is digits with optional sign, grouping, decimals, percent or a short unit. */
+const NUMERIC_CELL = /^[-+−]?[$€£]?\d[\d,]*(?:\.\d+)?\s?(?:%|[A-Za-z]{1,3})?$/u;
+/** Column indexes whose every non-empty cell is numeric, so they can align on the right. */
+function numericColumns(rows, width) {
+    const numeric = new Set();
+    for (let column = 0; column < width; column += 1) {
+        const cells = rows
+            .map((row) => (Array.isArray(row) ? str(row[column]).trim() : ''))
+            .filter((cell) => cell !== '');
+        if (cells.length > 0 && cells.every((cell) => NUMERIC_CELL.test(cell)))
+            numeric.add(column);
+    }
+    return numeric;
 }
-function capabilityAllowed(policy, capability) {
-    if (policy === 'deny')
-        return false;
-    return policy.allow.includes(capability);
+/** A diff line count; zero stays neutral so only real change is coloured. */
+function lineCountCell(value, kind) {
+    const sign = kind === 'add' ? '+' : '\u2212';
+    const tone = value === 0 ? 'ak-zero' : `ak-${kind}`;
+    return `<td class="ak-num ${tone}">${sign}${escapeText(String(value))}</td>`;
 }
-/**
- * Decide whether a remote reference may be loaded.
- *
- * Two gates apply. The capability must be opted into, and when the page declares
- * a provider allowlist the reference's host must belong to one of those
- * providers. A block that names a provider itself requires that provider to be
- * allowlisted, so a spec cannot promote an arbitrary host to trusted by
- * labelling it "youtube".
- */
-function networkAllows(policy, capability, reference, provider) {
-    if (!capabilityAllowed(policy, capability))
-        return false;
-    if (policy === 'deny')
-        return false;
-    const declared = policy.providers ?? [];
-    if (provider !== '') {
-        return declared.includes(provider) && hostMatchesProvider(provider, reference);
-    }
-    if (declared.length === 0)
-        return true;
-    return hostMatchesAnyProvider(declared, reference);
+/** Split code into one span per line so the stylesheet can number lines; newlines stay in the text. */
+function codeLines(text) {
+    const lines = text.replace(/\n$/u, '').split('\n');
+    return lines.map((line) => `<span class="ak-line">${escapeText(line)}</span>`).join('\n');
 }
 /**
- * Resolve a media reference against the network policy.
- *
- * A relative path is local and always allowed; a remote reference needs the
- * matching capability and, when a provider allowlist exists, an allowlisted
- * host. Nothing here can produce an embed the spec did not ask for in a way the
- * policy did not allow.
+ * Wrap each word of the hero title so it can rise into view on its own beat.
+ * The spaces stay as text between the wrappers, so the heading's text content
+ * and its line wrapping are unchanged.
  */
-function resolveMedia(reference, policy, capability, provider = '') {
-    if (!isRemote(reference))
-        return { allowed: true, src: escapeUrl(reference) };
-    return {
-        allowed: networkAllows(policy, capability, reference, provider),
-        src: escapeUrl(reference),
-    };
+function heroWords(title) {
+    return title
+        .split(/(\s+)/u)
+        .map((part) => part === '' || /^\s+$/u.test(part)
+        ? part
+        : `<span class="ak-word"><span>${escapeText(part)}</span></span>`)
+        .join('');
 }
-function mediaFallbackBody(title, description, url, poster, linkText, note = 'Remote media is not embedded because the page denies network access.') {
+function mediaFallbackBody(title, description, url, poster, linkText, note) {
     const posterMarkup = poster === '' ? '' : `<img src="${escapeAttribute(escapeUrl(poster))}" alt="" />`;
     const link = url === ''
         ? ''
@@ -127,7 +68,7 @@ function mediaFallbackBody(title, description, url, poster, linkText, note = 'Re
     return [
         posterMarkup,
         title === '' ? '' : `<p><strong>${escapeText(title)}</strong></p>`,
-        `<p class="ak-muted">${escapeText(description)}</p>`,
+        `<p class="ak-muted">${escapeInlineText(description)}</p>`,
         `<p class="ak-caption">${escapeText(note)}</p>`,
         link,
     ]
@@ -135,6 +76,7 @@ function mediaFallbackBody(title, description, url, poster, linkText, note = 'Re
         .join('');
 }
 const RENDERERS = {
+    ...SHOWCASE_RENDERERS,
     page: (node, context) => {
         // Every page needs exactly one h1. A hero (or an explicit level-1 heading)
         // provides it; otherwise the document title does, so a page without a hero
@@ -146,19 +88,13 @@ const RENDERERS = {
             : `<h1 class="ak-page-title">${escapeText(context.ir.meta.title)}</h1>`;
         return element('main', { class: 'ak-main', id: 'ak-main-content', 'aria-label': context.ir.meta.title }, `${title}${context.renderChildren(node)}`);
     },
-    section: (node, context) => element('section', nodeAttributes(node, { class: 'ak-block ak-section' }), `${titleHeader(node)}${context.renderChildren(node)}`),
-    stack: (node, context) => element('div', nodeAttributes(node, {
-        class: 'ak-block ak-stack',
-        'data-gap': stringProp(node, 'gap', 'normal'),
-    }), context.renderChildren(node)),
-    grid: (node, context) => element('div', nodeAttributes(node, {
-        class: 'ak-block ak-grid',
-        'data-ak-columns': String(Math.min(Math.max(numberProp(node, 'columns', 3), 1), 6)),
-    }), context.renderChildren(node)),
-    split: (node, context) => element('div', nodeAttributes(node, {
-        class: 'ak-block ak-split',
-        'data-ratio': stringProp(node, 'ratio', 'even'),
-    }), context.renderChildren(node)),
+    section: (node, context) => element('section', 
+    // The id is the outline's link target; node ids are unique, so it is too.
+    nodeAttributes(node, {
+        class: 'ak-block ak-section',
+        id: sectionAnchor(node.id),
+        'data-surface': stringProp(node, 'surface') === 'inverse' ? 'inverse' : undefined,
+    }), `${titleHeader(node)}${context.renderChildren(node)}`),
     spacer: (node) => element('div', {
         class: 'ak-spacer',
         'data-size': stringProp(node, 'size', 'medium'),
@@ -179,30 +115,38 @@ const RENDERERS = {
             : variant === 'caption'
                 ? 'ak-block ak-caption'
                 : 'ak-block';
-        return `<p${renderAttributes(nodeAttributes(node, { class: className }))}>${escapeText(stringProp(node, 'text'))}</p>`;
+        return `<p${renderAttributes(nodeAttributes(node, { class: className }))}>${escapeInlineText(stringProp(node, 'text'))}</p>`;
     },
     'rich-text': (node) => {
         const paragraphs = stringProp(node, 'text')
             .split(/\n{2,}/u)
             .map((part) => part.trim())
             .filter((part) => part !== '');
-        return element('div', nodeAttributes(node, { class: 'ak-block ak-prose' }), paragraphs.map((part) => `<p>${escapeText(part.replace(/\n/gu, ' '))}</p>`).join(''));
+        return element('div', nodeAttributes(node, { class: 'ak-block ak-prose' }), paragraphs.map((part) => `<p>${escapeInlineText(part.replace(/\n/gu, ' '))}</p>`).join(''));
     },
     quote: (node) => {
         const cite = stringProp(node, 'cite');
-        return element('blockquote', nodeAttributes(node, { class: 'ak-block ak-quote' }), `<p>${escapeText(stringProp(node, 'text'))}</p>${cite === '' ? '' : `<cite>${escapeText(cite)}</cite>`}`);
+        return element('blockquote', nodeAttributes(node, { class: 'ak-block ak-quote' }), `<p>${escapeInlineText(stringProp(node, 'text'))}</p>${cite === '' ? '' : `<cite>${escapeText(cite)}</cite>`}`);
     },
     code: (node) => {
         const title = stringProp(node, 'title');
         const language = stringProp(node, 'language', 'text');
+        const copy = renderAttributes({
+            'data-ak-on-click': JSON.stringify([{ action: 'copy', target: node.id }]),
+            'aria-label': title === '' ? 'Copy code' : `Copy ${title}`,
+        });
         return [
             `<div class="ak-block ak-code">`,
-            title === '' && language === ''
+            '<div class="ak-code-head">',
+            `<span class="ak-label">${escapeText(title === '' ? language : title)}</span>`,
+            title === '' || language === ''
                 ? ''
-                : `<div class="ak-code-head"><span class="ak-label">${escapeText(title === '' ? language : title)}</span></div>`,
+                : `<span class="ak-code-lang">${escapeText(language)}</span>`,
+            `<button type="button" class="ak-code-copy"${copy}>Copy</button>`,
+            '</div>',
             `<pre${renderAttributes({ 'data-ak-id': node.id })}><code${renderAttributes({
                 class: `language-${language}`,
-            })}>${escapeText(stringProp(node, 'text'))}</code></pre>`,
+            })}>${codeLines(stringProp(node, 'text'))}</code></pre>`,
             '</div>',
         ]
             .filter((part) => part !== '')
@@ -221,7 +165,7 @@ const RENDERERS = {
             stringProp(node, 'title') === ''
                 ? ''
                 : heading(3, stringProp(node, 'title'), 'ak-card-title'),
-            text === '' ? '' : `<p>${escapeText(text)}</p>`,
+            text === '' ? '' : `<p>${escapeInlineText(text)}</p>`,
             context.renderChildren(node),
         ].join(''));
     },
@@ -231,7 +175,7 @@ const RENDERERS = {
         return [
             `<div${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-alert', ...toneAttribute(node) }))}${role}>`,
             `<p><strong>${escapeText(stringProp(node, 'title'))}</strong></p>`,
-            `<p>${escapeText(stringProp(node, 'text'))}</p>`,
+            `<p>${escapeInlineText(stringProp(node, 'text'))}</p>`,
             '</div>',
         ].join('');
     },
@@ -248,18 +192,27 @@ const RENDERERS = {
             `<aside${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-callout', ...toneAttribute(node) }))}>`,
             `<p class="ak-label">${escapeText(icon)}</p>`,
             `<p><strong>${escapeText(stringProp(node, 'title'))}</strong></p>`,
-            `<p>${escapeText(stringProp(node, 'text'))}</p>`,
+            `<p>${escapeInlineText(stringProp(node, 'text'))}</p>`,
             '</aside>',
         ].join('');
     },
-    hero: (node) => {
+    hero: (node, context) => {
         const eyebrow = stringProp(node, 'eyebrow');
         const description = stringProp(node, 'description');
+        const source = stringProp(node, 'src');
         return [
-            `<div${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-hero' }))}>`,
+            `<div${renderAttributes(nodeAttributes(node, {
+                class: 'ak-block ak-hero',
+                'data-align': stringProp(node, 'align') === 'center' ? 'center' : undefined,
+                'data-media': source === '' ? undefined : 'true',
+            }))}>`,
             eyebrow === '' ? '' : `<p class="ak-eyebrow">${escapeText(eyebrow)}</p>`,
-            `<h1>${escapeText(stringProp(node, 'title'))}</h1>`,
-            description === '' ? '' : `<p>${escapeText(description)}</p>`,
+            `<h1>${heroWords(stringProp(node, 'title'))}</h1>`,
+            description === '' ? '' : `<p>${escapeInlineText(description)}</p>`,
+            // The shot is the first thing on screen, so it loads eagerly.
+            source === ''
+                ? ''
+                : `<figure class="ak-hero-media"><div class="ak-hero-stage">${browserShot(source, stringProp(node, 'alt'), stringProp(node, 'address'), context.ir.policy.network, 'eager')}</div></figure>`,
             '</div>',
         ].join('');
     },
@@ -292,7 +245,7 @@ const RENDERERS = {
             `<ol class="ak-steps">${items
                 .map((item) => {
                 const text = str(item.text);
-                return `<li><p><strong>${escapeText(str(item.title))}</strong></p>${text === '' ? '' : `<p>${escapeText(text)}</p>`}</li>`;
+                return `<li><p><strong>${escapeText(str(item.title))}</strong></p>${text === '' ? '' : `<p>${escapeInlineText(text)}</p>`}</li>`;
             })
                 .join('')}</ol>`,
         ].join(''));
@@ -304,7 +257,7 @@ const RENDERERS = {
             `<ol class="ak-timeline">${items
                 .map((item) => {
                 const text = str(item.text);
-                return `<li><time>${escapeText(str(item.when))}</time><p><strong>${escapeText(str(item.title))}</strong></p>${text === '' ? '' : `<p>${escapeText(text)}</p>`}</li>`;
+                return `<li><time>${escapeText(str(item.when))}</time><p><strong>${escapeText(str(item.title))}</strong></p>${text === '' ? '' : `<p>${escapeInlineText(text)}</p>`}</li>`;
             })
                 .join('')}</ol>`,
         ].join(''));
@@ -316,7 +269,7 @@ const RENDERERS = {
             `<ul class="ak-list">${items
                 .map((item) => {
                 const badge = str(item.badge);
-                return `<li data-ak-filter-item data-ak-label="${escapeAttribute(str(item.text))}"><span>${escapeText(str(item.text))}</span>${badge === '' ? '' : `<span class="ak-badge">${escapeText(badge)}</span>`}</li>`;
+                return `<li data-ak-filter-item data-ak-label="${escapeAttribute(str(item.text))}"><span>${escapeInlineText(str(item.text))}</span>${badge === '' ? '' : `<span class="ak-badge">${escapeText(badge)}</span>`}</li>`;
             })
                 .join('')}</ul>`,
         ].join(''));
@@ -328,7 +281,7 @@ const RENDERERS = {
             `<ul class="ak-grid" data-ak-columns="3">${items
                 .map((item) => {
                 const text = str(item.text);
-                return `<li class="ak-card ak-card--elevated"><p><strong>${escapeText(str(item.title))}</strong></p>${text === '' ? '' : `<p>${escapeText(text)}</p>`}</li>`;
+                return `<li class="ak-card ak-card--elevated"><p><strong>${escapeText(str(item.title))}</strong></p>${text === '' ? '' : `<p>${escapeInlineText(text)}</p>`}</li>`;
             })
                 .join('')}</ul>`,
         ].join(''));
@@ -337,20 +290,24 @@ const RENDERERS = {
         const columns = listProp(node, 'columns');
         const rows = listProp(node, 'rows');
         const title = stringProp(node, 'title');
+        const numeric = numericColumns(rows, columns.length);
+        const align = (index) => (numeric.has(index) ? ' class="ak-num"' : '');
         const head = columns
-            .map((column) => `<th scope="col">${escapeText(str(column))}</th>`)
+            .map((column, index) => `<th scope="col"${align(index)}>${escapeText(str(column))}</th>`)
             .join('');
         const body = rows
             .map((row) => {
             const cells = (Array.isArray(row) ? row : [])
-                .map((cell) => `<td>${escapeText(str(cell))}</td>`)
+                .map((cell, index) => `<td${align(index)}>${escapeText(str(cell))}</td>`)
                 .join('');
             return `<tr>${cells}</tr>`;
         })
             .join('');
         return element('section', nodeAttributes(node, { class: 'ak-block' }), [
             title === '' ? '' : heading(2, title),
-            `<div class="ak-table-wrap"><table>${title === '' ? '' : `<caption>${escapeText(title)}</caption>`}<thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>`,
+            // The visible heading already names the table, so the caption stays for
+            // assistive technology only instead of printing the title twice.
+            `<div class="ak-table-wrap"><table>${title === '' ? '' : `<caption class="ak-sr">${escapeText(title)}</caption>`}<thead><tr>${head}</tr></thead><tbody>${body}</tbody></table></div>`,
         ].join(''));
     },
     comparison: (node) => {
@@ -368,16 +325,19 @@ const RENDERERS = {
         return element('section', nodeAttributes(node, { class: 'ak-block' }), [
             titleHeader(node),
             `<div class="ak-table-wrap"><table><caption>Risk by impact and likelihood</caption><thead><tr><th scope="col">Area</th><th scope="col">Impact</th><th scope="col">Likelihood</th><th scope="col">Note</th></tr></thead><tbody>${items
-                .map((item) => `<tr><th scope="row">${escapeText(str(item.area))}</th><td>${escapeText(str(item.impact))}</td><td>${escapeText(str(item.likelihood))}</td><td>${escapeText(str(item.note))}</td></tr>`)
+                .map((item) => `<tr><th scope="row">${escapeText(str(item.area))}</th><td>${toneBadge(str(item.impact))}</td><td>${toneBadge(str(item.likelihood))}</td><td>${escapeInlineText(str(item.note))}</td></tr>`)
                 .join('')}</tbody></table></div>`,
         ].join(''));
     },
     'diff-summary': (node) => {
         const items = objectListProp(node, 'items');
+        const header = titleHeader(node);
+        // A visible block title already names the table; the caption then stays for screen readers only.
+        const caption = header === '' ? '<caption>' : '<caption class="ak-sr">';
         return element('section', nodeAttributes(node, { class: 'ak-block' }), [
-            titleHeader(node),
-            `<div class="ak-table-wrap"><table><caption>Changed files</caption><thead><tr><th scope="col">Path</th><th scope="col">Status</th><th scope="col">Additions</th><th scope="col">Deletions</th></tr></thead><tbody>${items
-                .map((item) => `<tr><th scope="row"><code>${escapeText(str(item.path))}</code></th><td>${escapeText(str(item.status))}</td><td>${escapeText(String(numProp(item.additions, 0)))}</td><td>${escapeText(String(numProp(item.deletions, 0)))}</td></tr>`)
+            header,
+            `<div class="ak-table-wrap"><table>${caption}Changed files</caption><thead><tr><th scope="col">Path</th><th scope="col">Status</th><th scope="col" class="ak-num">Additions</th><th scope="col" class="ak-num">Deletions</th></tr></thead><tbody>${items
+                .map((item) => `<tr><th scope="row"><code>${escapeText(str(item.path))}</code></th><td>${toneBadge(str(item.status))}</td>${lineCountCell(numProp(item.additions, 0), 'add')}${lineCountCell(numProp(item.deletions, 0), 'del')}</tr>`)
                 .join('')}</tbody></table></div>`,
         ].join(''));
     },
@@ -386,63 +346,10 @@ const RENDERERS = {
         return element('section', nodeAttributes(node, { class: 'ak-block' }), [
             titleHeader(node),
             `<ul class="ak-grid" data-ak-columns="2">${items
-                .map((item) => `<li class="ak-card ak-surface"><p class="ak-label">${escapeText(str(item.kind))}</p><p><strong>${escapeText(str(item.title))}</strong></p><p>${escapeText(str(item.text))}</p></li>`)
+                .map((item) => `<li class="ak-card ak-surface" data-tone="${valueTone(str(item.kind))}"><p class="ak-label">${escapeText(str(item.kind))}</p><p><strong>${escapeText(str(item.title))}</strong></p><p>${escapeInlineText(str(item.text))}</p></li>`)
                 .join('')}</ul>`,
         ].join(''));
     },
-    tabs: (node) => {
-        const items = objectListProp(node, 'items');
-        const base = node.id;
-        const tabs = items
-            .map((item, index) => {
-            const tabId = str(item.id, `${base}-tab-${index}`);
-            return `<button type="button" role="tab" id="${escapeAttribute(tabId)}" data-ak-tab-id="${escapeAttribute(tabId)}" aria-controls="${escapeAttribute(`${base}-panel-${index}`)}" aria-selected="${index === 0 ? 'true' : 'false'}" tabindex="${index === 0 ? '0' : '-1'}">${escapeText(str(item.title))}</button>`;
-        })
-            .join('');
-        const panels = items
-            .map((item, index) => `<div role="tabpanel" id="${escapeAttribute(`${base}-panel-${index}`)}" aria-labelledby="${escapeAttribute(str(item.id, `${base}-tab-${index}`))}" tabindex="${index === 0 ? '0' : '-1'}"${index === 0 ? '' : ' hidden'}>${escapeText(str(item.text))}</div>`)
-            .join('');
-        return element('section', nodeAttributes(node, { class: 'ak-block ak-tabs', 'data-ak-tabs': 'true' }), [
-            titleHeader(node),
-            `<div role="tablist" aria-label="${escapeAttribute(stringProp(node, 'title', 'Tabs'))}">${tabs}</div>${panels}`,
-        ].join(''));
-    },
-    accordion: (node) => {
-        const items = objectListProp(node, 'items');
-        return element('section', nodeAttributes(node, { class: 'ak-block ak-accordion' }), [
-            titleHeader(node),
-            items
-                .map((item, index) => 
-            // Each disclosure carries its own id so a declarative expand or
-            // collapse action can address one section. Native <details> remains
-            // the behavior; the action only drives it.
-            `<details${index === 0 ? ' open' : ''}${renderAttributes({
-                'data-ak-id': `${node.id}-item-${index}`,
-            })}><summary>${escapeText(str(item.title))}</summary><p>${escapeText(str(item.text))}</p></details>`)
-                .join(''),
-        ].join(''));
-    },
-    carousel: (node) => {
-        const items = objectListProp(node, 'items');
-        const label = stringProp(node, 'ariaLabel', 'Carousel');
-        const slides = items
-            .map((item, index) => `<div class="ak-carousel-slide" data-ak-slide tabindex="-1" aria-hidden="${index === 0 ? 'false' : 'true'}"${index === 0 ? '' : ' hidden'}><h3>${escapeText(str(item.title))}</h3><p>${escapeText(str(item.text))}</p></div>`)
-            .join('');
-        return element('section', nodeAttributes(node, {
-            class: 'ak-block ak-carousel',
-            'data-ak-carousel-root': 'true',
-            role: 'group',
-            'aria-roledescription': 'carousel',
-            'aria-label': label,
-        }), [
-            `<div class="ak-carousel-slides">${slides}</div>`,
-            `<div class="ak-carousel-controls">
-<button type="button" class="ak-btn" data-ak-carousel="prev" aria-label="Previous slide">Previous</button>
-<button type="button" class="ak-btn" data-ak-carousel="next" aria-label="Next slide">Next</button>
-<span class="ak-carousel-status" data-ak-carousel-status aria-live="polite">1 / ${Math.max(items.length, 1)}</span>
-</div>`,
-        ].join(''));
-    },
     toolbar: (node) => {
         const items = objectListProp(node, 'items');
         return element('div', nodeAttributes(node, { class: 'ak-block ak-toolbar', role: 'toolbar' }), [
@@ -472,22 +379,6 @@ const RENDERERS = {
             }),
         ].join(''));
     },
-    chart: (node) => {
-        const series = objectListProp(node, 'series').map((entry) => ({
-            label: str(entry.label),
-            values: (Array.isArray(entry.values) ? entry.values : []).map((value) => numProp(value, 0)),
-        }));
-        const description = stringProp(node, 'description');
-        const title = stringProp(node, 'title');
-        return `<div${renderAttributes(nodeAttributes(node, { class: 'ak-block' }))}>${renderChart({
-            kind: stringProp(node, 'kind', 'bar'),
-            id: node.id,
-            labels: listProp(node, 'labels').map((label) => str(label)),
-            series,
-            ...(title === '' ? {} : { title }),
-            ...(description === '' ? {} : { description }),
-        })}</div>`;
-    },
     'diagram-panel': (node, context) => {
         const spec = isPlainObject(node.props.spec) ? node.props.spec : {};
         const asObjects = (value) => (Array.isArray(value) ? value.filter(isPlainObject) : []);
@@ -499,20 +390,7 @@ const RENDERERS = {
         // The semantic fallback is always available: it is the only rendering when
         // no adapter is installed, and it stays in the document as the accessible
         // description when one is.
-        const fallbackBody = [
-            described.length === 0
-                ? ''
-                : `<ul class="ak-list">${described
-                    .map((component) => `<li><code>${escapeText(str(component.id))}</code><span>${escapeText(str(component.label))}</span></li>`)
-                    .join('')}</ul>`,
-            edges.length === 0
-                ? ''
-                : `<ul class="ak-list">${edges
-                    .map((edge) => `<li><code>${escapeText(str(edge.from))} → ${escapeText(str(edge.to))}</code><span>${escapeText(str(edge.label))}</span></li>`)
-                    .join('')}</ul>`,
-        ]
-            .filter((part) => part !== '')
-            .join('');
+        const fallbackBody = renderDiagramFallback(described, edges);
         const adapterResult = runDiagramAdapter(context.diagramAdapter, {
             spec: (node.props.spec ?? null),
             title: diagramTitle,
@@ -526,22 +404,30 @@ const RENDERERS = {
                 message: `diagram adapter "${adapterResult.adapter}" output was rejected (${adapterResult.rejected}); the structured fallback is used`,
             });
         }
+        if (adapterResult?.removedInlineStyles !== undefined) {
+            context.warnings?.push({
+                code: 'POLICY_VIOLATION',
+                severity: 'warning',
+                path: `$.blocks.${node.id}`,
+                message: `diagram adapter "${adapterResult.adapter}" output had ${adapterResult.removedInlineStyles} inline style attribute(s), which the page Content Security Policy refuses; they were removed. Move those styles into a <style> element.`,
+            });
+        }
         const accepted = adapterResult !== undefined &&
             adapterResult.rejected === undefined &&
             adapterResult.markup !== '';
+        const description = `<p class="ak-diagram-title">${escapeText(diagramTitle)}</p>${fallbackBody}`;
         return [
             `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-diagram' }))}>`,
             titleHeader(node, 2),
+            // Adapter output keeps its natural size: a wide diagram scrolls sideways
+            // inside a keyboard-focusable region instead of shrinking its labels. The
+            // text description then folds away behind a disclosure, so it does not
+            // repeat the drawing; it stays in the document, prints open, and the
+            // static SVG reads without script and in print. The inner canvas is the
+            // root the adapter's stylesheets are scoped to.
             accepted
-                ? `<div class="ak-diagram-rendered" data-ak-diagram-adapter="${escapeAttribute(adapterResult.adapter)}">${adapterResult.markup}</div>`
-                : '',
-            `<div class="ak-diagram-fallback" data-ak-diagram-fallback>`,
-            `<p><strong>${escapeText(diagramTitle)}</strong></p>`,
-            fallbackBody,
-            accepted
-                ? '<p class="ak-caption">Rendered by a diagram adapter. The structured description below is the accessible equivalent.</p>'
-                : '<p class="ak-caption">Rendered as a structured fallback because no diagram adapter is configured.</p>',
-            '</div>',
+                ? `<div class="ak-diagram-rendered" data-ak-diagram-adapter="${escapeAttribute(adapterResult.adapter)}" role="region" aria-label="${escapeAttribute(diagramTitle)}" tabindex="0"><div class="ak-diagram-canvas" data-ak-diagram-scope="${escapeAttribute(adapterResult.scope ?? '')}">${adapterResult.markup}</div></div><details class="ak-diagram-details" data-ak-diagram-fallback><summary>Text description</summary><div class="ak-diagram-fallback">${description}</div></details>`
+                : `<div class="ak-diagram-fallback" data-ak-diagram-fallback>${description}<p class="ak-caption">Rendered as a structured fallback because no diagram adapter is configured.</p></div>`,
             figureCaption(caption),
             '</figure>',
         ]
@@ -555,7 +441,7 @@ const RENDERERS = {
         if (!resolved.allowed) {
             return [
                 `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
-                `<div class="ak-media-fallback"><p><strong>${escapeText(alt)}</strong></p><p class="ak-caption">Remote image not loaded: the page denies network access.</p><a href="${escapeAttribute(resolved.src)}" rel="noreferrer noopener">Open image</a></div>`,
+                `<div class="ak-media-fallback"><p><strong>${escapeText(alt)}</strong></p><p class="ak-caption">Remote image not loaded: ${blockedReason(context.ir.policy.network, 'images')}.</p><a href="${escapeAttribute(resolved.src)}" rel="noreferrer noopener">Open image</a></div>`,
                 figureCaption(captionText),
                 '</figure>',
             ].join('');
@@ -567,29 +453,19 @@ const RENDERERS = {
             '</figure>',
         ].join('');
     },
-    gallery: (node, context) => {
-        const columns = Math.min(Math.max(numberProp(node, 'columns', 3), 1), 6);
-        const items = objectListProp(node, 'items');
-        return element('section', nodeAttributes(node, { class: 'ak-block' }), [
-            titleHeader(node),
-            `<ul class="ak-gallery" data-ak-columns="${columns}">${items
-                .map((item) => {
-                const resolved = resolveMedia(str(item.src), context.ir.policy.network, 'images');
-                const captionText = str(item.caption);
-                const body = resolved.allowed
-                    ? `<img src="${escapeAttribute(resolved.src)}" alt="${escapeAttribute(str(item.alt))}" loading="lazy" decoding="async" />`
-                    : `<a href="${escapeAttribute(resolved.src)}" rel="noreferrer noopener">${escapeText(str(item.alt))}</a>`;
-                return `<li><figure>${body}${captionText === '' ? '' : `<figcaption>${escapeText(captionText)}</figcaption>`}</figure></li>`;
-            })
-                .join('')}</ul>`,
-        ].join(''));
-    },
     video: (node, context) => {
         const source = stringProp(node, 'src');
         const provider = stringProp(node, 'provider');
         const resolved = resolveMedia(source, context.ir.policy.network, 'media', provider);
         const fallback = isPlainObject(node.props.fallback) ? node.props.fallback : {};
         const captionText = stringProp(node, 'caption');
+        // A poster is a still image, so it passes the same `images` gate as an image
+        // block. Validation rejects a blocked remote poster; dropping it here keeps
+        // the renderer safe for an IR that did not come through validation.
+        const requestedPoster = stringProp(node, 'poster');
+        const poster = imageReferenceAllowed(context.ir.policy.network, requestedPoster)
+            ? requestedPoster
+            : '';
         // A provider reference never becomes a frame, whether or not it is allowed:
         // the page links to the provider and keeps the poster, so the artifact stays
         // frame-free. Only the explanation differs between allowed and denied.
@@ -597,9 +473,9 @@ const RENDERERS = {
             const label = EMBED_PROVIDERS[provider]?.label ?? provider;
             return [
                 `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
-                `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, `${label} content`), source, stringProp(node, 'poster'), str(fallback.linkText, `Open on ${label}`), resolved.allowed
+                `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, `${label} content`), source, poster, str(fallback.linkText, `Open on ${label}`), resolved.allowed
                     ? `Embedded players are not emitted; this page links to ${label} instead.`
-                    : `Embedded players are not emitted and the page denies network access; this page links to ${label} instead.`)}</div>`,
+                    : `Embedded players are not emitted and ${blockedReason(context.ir.policy.network, 'media')}; this page links to ${label} instead.`)}</div>`,
                 figureCaption(captionText),
                 '</figure>',
             ].join('');
@@ -607,15 +483,14 @@ const RENDERERS = {
         if (!resolved.allowed) {
             return [
                 `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
-                `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, 'Remote video is unavailable without network access.'), str(fallback.url, source), stringProp(node, 'poster'), str(fallback.linkText, 'Open video'))}</div>`,
+                `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, 'Remote video is not available on this page.'), str(fallback.url, source), poster, str(fallback.linkText, 'Open video'), `Remote media is not embedded because ${blockedReason(context.ir.policy.network, 'media')}.`)}</div>`,
                 figureCaption(captionText),
                 '</figure>',
             ].join('');
         }
-        const poster = stringProp(node, 'poster');
         return [
             `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
-            `<video controls preload="metadata"${poster === '' ? '' : ` poster="${escapeAttribute(poster)}"`}><source src="${escapeAttribute(resolved.src)}" />${escapeText(str(fallback.description, 'Video content'))}</video>`,
+            `<video controls preload="metadata"${poster === '' ? '' : ` poster="${escapeAttribute(escapeUrl(poster))}"`}><source src="${escapeAttribute(resolved.src)}" />${escapeInlineText(str(fallback.description, 'Video content'))}</video>`,
             figureCaption(captionText),
             '</figure>',
         ].join('');
@@ -634,7 +509,7 @@ const RENDERERS = {
                 `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
                 `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, `${label} audio`), source, '', str(fallback.linkText, `Open on ${label}`), resolved.allowed
                     ? `Embedded players are not emitted; this page links to ${label} instead.`
-                    : `Embedded players are not emitted and the page denies network access; this page links to ${label} instead.`)}</div>`,
+                    : `Embedded players are not emitted and ${blockedReason(context.ir.policy.network, 'media')}; this page links to ${label} instead.`)}</div>`,
                 figureCaption(captionText),
                 '</figure>',
             ].join('');
@@ -642,14 +517,14 @@ const RENDERERS = {
         if (!resolved.allowed) {
             return [
                 `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
-                `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, 'Remote audio is unavailable without network access.'), str(fallback.url, source), '', str(fallback.linkText, 'Open audio'))}</div>`,
+                `<div class="ak-media-fallback">${mediaFallbackBody(stringProp(node, 'title'), str(fallback.description, 'Remote audio is not available on this page.'), str(fallback.url, source), '', str(fallback.linkText, 'Open audio'), `Remote media is not embedded because ${blockedReason(context.ir.policy.network, 'media')}.`)}</div>`,
                 figureCaption(captionText),
                 '</figure>',
             ].join('');
         }
         return [
             `<figure${renderAttributes(nodeAttributes(node, { class: 'ak-block ak-media' }))}>`,
-            `<audio controls preload="metadata" src="${escapeAttribute(resolved.src)}">${escapeText(str(fallback.description, 'Audio content'))}</audio>`,
+            `<audio controls preload="metadata" src="${escapeAttribute(resolved.src)}">${escapeInlineText(str(fallback.description, 'Audio content'))}</audio>`,
             figureCaption(captionText),
             '</figure>',
         ].join('');
@@ -704,7 +579,7 @@ const RENDERERS = {
                 'aria-label': stringProp(node, 'ariaLabel', stringProp(node, 'title')),
             }))}>`,
             heading(2, stringProp(node, 'title'), 'ak-dialog-title'),
-            text === '' ? '' : `<p>${escapeText(text)}</p>`,
+            text === '' ? '' : `<p>${escapeInlineText(text)}</p>`,
             `<div class="ak-dialog-actions">${actions
                 .map((action) => {
                 const on = isPlainObject(action.on) ? action.on : {};
@@ -736,14 +611,20 @@ function searchMatch(node) {
     }
     return 'text';
 }
-/** Render one node, falling back to an empty string for an unregistered type. */
+/**
+ * Render one node: a block module's renderer first, then the core renderer,
+ * falling back to an empty string for an unregistered type.
+ */
 export function renderNode(node, context) {
+    const module = context.registry.modules.get(node.type);
+    if (module !== undefined)
+        return module.render(node, context);
     const renderer = RENDERERS[node.type] ?? NO_OP_RENDERER;
     return renderer(node, context);
 }
 /** True when a renderer exists for the type. */
-export function hasRenderer(type) {
-    return RENDERERS[type] !== undefined;
+export function hasRenderer(type, registry = DEFAULT_REGISTRY) {
+    return registry.modules.has(type) || RENDERERS[type] !== undefined;
 }
 export { element, nodeAttributes };
 //# sourceMappingURL=blocks.js.map