@texuli/blocks 0.0.0-stage → 0.1.0-next.0

package/dist/core/schema/vocabulary.js

@@ -0,0 +1,33 @@
+/**
+ * Colors in block data are tones, never CSS, hex values or style strings.
+ * Renderers map each tone to theme tokens so contrast holds in every theme.
+ */
+export const BLOCK_TONES = ['neutral', 'accent', 'info', 'success', 'warning', 'danger'];
+/**
+ * Render families. Each one is a lazy UI subpath so a document downloads only
+ * the families its blocks use.
+ */
+export const BLOCK_FAMILIES = [
+    'text',
+    'media',
+    'data',
+    'structure',
+    'code',
+    'diagram',
+    'interactive',
+    'map',
+    'embed',
+];
+/** True when `value` is one of the block tones. */
+export function isBlockTone(value) {
+    return typeof value === 'string' && BLOCK_TONES.includes(value);
+}
+/** True when `value` is one of the render families. */
+export function isBlockFamily(value) {
+    return typeof value === 'string' && BLOCK_FAMILIES.includes(value);
+}
+/** Fragment order inside a slide; pages and docs ignore it. */
+export const BLOCK_REVEALS = ['fade', 'fade-up', 'grow', 'highlight', 'strike'];
+export function isBlockReveal(value) {
+    return typeof value === 'string' && BLOCK_REVEALS.includes(value);
+}

package/dist/core/text.d.ts

@@ -0,0 +1,31 @@
+import { type Block } from './schema/blocks.js';
+/**
+ * Pure text helpers over block trees (no DOM). Used by docs (TOC), decks
+ * (notes) and authoring (word counts). Markdown is stripped lightly without a
+ * full parser — later tasks may plug a shared markdown texel.
+ */
+export interface WalkedBlock {
+    block: Block;
+    path: readonly (string | number)[];
+    jsonPath: string;
+    depth: number;
+}
+/** Depth-first walk of every block, including nested columns. */
+export declare function walkBlocks(blocks: readonly Block[]): WalkedBlock[];
+/** Stable slug for a heading label. */
+export declare function slugifyHeading(label: string): string;
+/** Unique slug among `used`, appending `-2`, `-3`, … when needed. */
+export declare function uniqueSlug(label: string, used: ReadonlySet<string>): string;
+/** Strip a few markdown markers for plain-text summaries (not a full parser). */
+export declare function stripLightMarkdown(source: string): string;
+/** Plain text of one block (no children of containers). */
+export declare function blockText(block: Block): string;
+/** Concatenated plain text of a block list (depth-first). */
+export declare function documentText(blocks: readonly Block[]): string;
+/** Heading TOC entries from a block list. */
+export declare function headingOutline(blocks: readonly Block[]): {
+    level: number;
+    text: string;
+    id: string;
+    path: readonly (string | number)[];
+}[];

package/dist/core/text.js

@@ -0,0 +1,139 @@
+import { forEachBlock, toJsonPath } from "./schema/blocks.js";
+/** Depth-first walk of every block, including nested columns. */
+export function walkBlocks(blocks) {
+    const out = [];
+    forEachBlock(blocks, (block, path) => {
+        out.push({
+            block,
+            path,
+            jsonPath: toJsonPath(path),
+            depth: path.filter((segment) => typeof segment === 'string').length,
+        });
+    });
+    return out;
+}
+/** Stable slug for a heading label. */
+export function slugifyHeading(label) {
+    return (label
+        .toLowerCase()
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '') || 'section');
+}
+/** Unique slug among `used`, appending `-2`, `-3`, … when needed. */
+export function uniqueSlug(label, used) {
+    const base = slugifyHeading(label);
+    if (!used.has(base))
+        return base;
+    let n = 2;
+    while (used.has(`${base}-${n}`))
+        n += 1;
+    return `${base}-${n}`;
+}
+function joinParts(parts) {
+    return parts
+        .map((part) => part.replace(/\s+/g, ' ').trim())
+        .filter(Boolean)
+        .join(' ')
+        .trim();
+}
+/** Strip a few markdown markers for plain-text summaries (not a full parser). */
+export function stripLightMarkdown(source) {
+    return source
+        .replace(/```[\s\S]*?```/g, ' ')
+        .replace(/`([^`]+)`/g, '$1')
+        .replace(/\*\*([^*]+)\*\*/g, '$1')
+        .replace(/\*([^*]+)\*/g, '$1')
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+        .replace(/^#{1,6}\s+/gm, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+/** Plain text of one block (no children of containers). */
+export function blockText(block) {
+    switch (block.type) {
+        case 'heading':
+            return joinParts([block.eyebrow ?? '', block.text, block.subtitle ?? '']);
+        case 'text':
+            return stripLightMarkdown(block.markdown);
+        case 'list':
+            return block.items.map((item) => stripLightMarkdown(item.text)).join('\n');
+        case 'quote':
+            return joinParts([stripLightMarkdown(block.quote), block.cite ?? '']);
+        case 'callout':
+            return joinParts([block.title ?? '', stripLightMarkdown(block.body)]);
+        case 'code':
+            return block.caption ? `${block.caption.trim()}\n${block.code}` : block.code;
+        case 'cta':
+            return block.actions.map((action) => action.label).join(' ');
+        case 'divider':
+            return '';
+        case 'columns':
+            return '';
+        case 'tabs':
+            return joinParts([block.label, ...block.panels.map((panel) => panel.label)]);
+        case 'accordion':
+            return joinParts([
+                block.label ?? '',
+                ...block.items.map((item) => joinParts([item.title, item.body ?? ''])),
+            ]);
+        case 'cards':
+            return joinParts([
+                block.title ?? '',
+                ...block.items.map((item) => joinParts([item.eyebrow ?? '', item.title, item.body ?? ''])),
+            ]);
+        case 'grid':
+            return joinParts([
+                block.title ?? '',
+                ...block.cells.map((cell) => joinParts([cell.title ?? '', cell.body ?? ''])),
+            ]);
+        case 'image':
+            return joinParts([
+                block.decorative ? '' : (block.alt ?? ''),
+                block.caption ?? '',
+                block.credit ?? '',
+            ]);
+        case 'figure':
+            return joinParts([
+                block.decorative ? '' : (block.alt ?? ''),
+                block.caption,
+                block.credit ?? '',
+            ]);
+        case 'video':
+            return joinParts([block.label, block.caption ?? '']);
+        case 'gallery':
+            return joinParts([
+                block.title ?? '',
+                ...block.items.map((item) => joinParts([item.decorative ? '' : (item.alt ?? ''), item.caption ?? ''])),
+            ]);
+        default:
+            return '';
+    }
+}
+/** Concatenated plain text of a block list (depth-first). */
+export function documentText(blocks) {
+    return walkBlocks(blocks)
+        .map((entry) => blockText(entry.block))
+        .filter(Boolean)
+        .join('\n\n')
+        .trim();
+}
+/** Heading TOC entries from a block list. */
+export function headingOutline(blocks) {
+    const used = new Set();
+    const out = [];
+    for (const entry of walkBlocks(blocks)) {
+        if (entry.block.type !== 'heading')
+            continue;
+        const id = entry.block.id ?? uniqueSlug(entry.block.text, used);
+        used.add(id);
+        out.push({
+            level: entry.block.level,
+            text: entry.block.text,
+            id,
+            path: entry.path,
+        });
+    }
+    return out;
+}

package/dist/core/untrusted.d.ts

@@ -0,0 +1,20 @@
+import { type BlockLimits } from './limits.js';
+import { type Block } from './schema/blocks.js';
+export type UntrustedBlockIssue = {
+    code: 'invalid-input' | 'too-large' | 'too-deep' | 'too-many' | 'unsafe-key' | 'invalid-json' | 'invalid-blocks';
+    path: (string | number)[];
+    jsonPath: string;
+    message: string;
+    fix: string;
+};
+export type UntrustedBlocksResult = {
+    success: true;
+    blocks: Block[];
+    issues: [];
+} | {
+    success: false;
+    blocks: null;
+    issues: UntrustedBlockIssue[];
+};
+/** Sanitize and validate block documents before a host uses them. */
+export declare function parseUntrustedBlocks(input: unknown, limits?: Partial<BlockLimits>): UntrustedBlocksResult;

package/dist/core/untrusted.js

@@ -0,0 +1,377 @@
+import { BLOCK_LIMITS } from "./limits.js";
+import { base64DecodedBytes, isUnsafeTextCharacter, normalizeLineSeparators } from "./safety.js";
+import { safeParseBlocks } from "./schema/blocks.js";
+import { toJsonPath } from "./schema/primitives.js";
+function stripUnsafe(value, allowNewlines, allowTabs) {
+    return [...normalizeLineSeparators(value.replace(/\r\n/g, '\n'), allowNewlines)]
+        .filter((character) => !isUnsafeTextCharacter(character, allowNewlines, allowTabs))
+        .join('');
+}
+function issue(code, path, message, fix) {
+    return { code, path, jsonPath: toJsonPath(path), message, fix };
+}
+function fatal(code, message, fix) {
+    return issue(code, [], message, fix);
+}
+function utf8Length(value) {
+    return new TextEncoder().encode(value).byteLength;
+}
+function cappedLimits(limits) {
+    return Object.fromEntries(Object.entries(BLOCK_LIMITS).map(([key, maximum]) => {
+        const requested = limits[key];
+        const value = typeof requested === 'number' && Number.isFinite(requested)
+            ? Math.floor(Math.max(0, requested))
+            : maximum;
+        return [key, Math.min(maximum, value)];
+    }));
+}
+const MULTILINE_KEYS = new Set([
+    'markdown',
+    'quote',
+    'body',
+    'prompt',
+    'explanation',
+    'description',
+    'code',
+]);
+const TEXT_VALUE_KEYS = new Set([
+    'text',
+    'markdown',
+    'quote',
+    'body',
+    'label',
+    'title',
+    'caption',
+    'cite',
+    'eyebrow',
+    'subtitle',
+    'name',
+    'filename',
+    'code',
+]);
+const DATA_URI = /^data:[^,]*;base64,([A-Za-z0-9+/]*={0,2})$/;
+function sanitizeJson(input, limits) {
+    const ancestors = new WeakSet();
+    let visited = 0;
+    const visit = (current, path, depth, textContext = 'plain', listItem = false) => {
+        visited += 1;
+        if (visited > limits.maxBytes) {
+            return {
+                ok: false,
+                issue: fatal('too-large', 'Block input contains too many JSON values.', `Keep the serialized input at or below ${limits.maxBytes} UTF-8 bytes.`),
+            };
+        }
+        if (depth > limits.maxDepth) {
+            return {
+                ok: false,
+                issue: issue('too-deep', path, `Block JSON exceeds the maximum nesting depth of ${limits.maxDepth}.`, `Flatten the document so blocks are at most ${limits.maxDepth} JSON levels deep.`),
+            };
+        }
+        if (typeof current === 'string') {
+            if (current.length > limits.maxBytes || utf8Length(current) > limits.maxBytes) {
+                return {
+                    ok: false,
+                    issue: issue('too-large', path, `A block value exceeds the ${limits.maxBytes}-byte input limit.`, `Keep the input at or below ${limits.maxBytes} UTF-8 bytes.`),
+                };
+            }
+            const clean = stripUnsafe(current, textContext === 'markdown' || textContext === 'code', textContext === 'code');
+            if (TEXT_VALUE_KEYS.has(String(path.at(-1) ?? '')) &&
+                !clean.startsWith('data:') &&
+                [...clean].length > limits.maxTextLength) {
+                return {
+                    ok: false,
+                    issue: issue('too-large', path, `Text exceeds the ${limits.maxTextLength}-character guard limit.`, `Shorten this text to at most ${limits.maxTextLength} characters.`),
+                };
+            }
+            return { ok: true, value: clean };
+        }
+        if (current === null || typeof current === 'boolean' || typeof current === 'number') {
+            return { ok: true, value: current };
+        }
+        if (Array.isArray(current)) {
+            if (ancestors.has(current)) {
+                return {
+                    ok: false,
+                    issue: fatal('invalid-input', 'Block input must be acyclic JSON data.', 'Pass JSON text or a plain, acyclic JSON value.'),
+                };
+            }
+            ancestors.add(current);
+            const output = [];
+            for (let index = 0; index < current.length; index += 1) {
+                const descriptor = Object.getOwnPropertyDescriptor(current, String(index));
+                if (!descriptor || !('value' in descriptor)) {
+                    return {
+                        ok: false,
+                        issue: issue('invalid-input', [...path, index], 'Block arrays must contain plain JSON values.', 'Remove holes, accessors and non-data properties.'),
+                    };
+                }
+                const child = visit(descriptor.value, [...path, index], depth + 1, textContext, listItem);
+                if (!child.ok)
+                    return child;
+                output.push(child.value);
+            }
+            ancestors.delete(current);
+            return { ok: true, value: output };
+        }
+        if (typeof current !== 'object') {
+            return {
+                ok: false,
+                issue: fatal('invalid-input', 'Input must be JSON text or plain JSON data.', 'Provide a block array or its JSON text.'),
+            };
+        }
+        const prototype = Object.getPrototypeOf(current);
+        if (prototype !== Object.prototype && prototype !== null) {
+            return {
+                ok: false,
+                issue: fatal('invalid-input', 'Block objects must be plain JSON data.', 'Remove custom prototypes and pass plain JSON objects.'),
+            };
+        }
+        if (ancestors.has(current)) {
+            return {
+                ok: false,
+                issue: fatal('invalid-input', 'Block input must be acyclic JSON data.', 'Pass JSON text or a plain, acyclic JSON value.'),
+            };
+        }
+        ancestors.add(current);
+        const output = Object.create(null);
+        const record = current;
+        for (const key of Object.keys(record)) {
+            if (key === '__proto__' || key === 'constructor') {
+                return {
+                    ok: false,
+                    issue: issue('unsafe-key', [...path, key], `Block input contains the unsafe key "${key}".`, 'Remove prototype-related keys from the input.'),
+                };
+            }
+            const descriptor = Object.getOwnPropertyDescriptor(current, key);
+            if (!descriptor || !('value' in descriptor)) {
+                return {
+                    ok: false,
+                    issue: issue('invalid-input', [...path, key], 'Block objects must contain plain JSON values.', 'Remove getters and setters from the input.'),
+                };
+            }
+            const safeKey = stripUnsafe(key, false, false);
+            if (safeKey === '__proto__' || safeKey === 'constructor') {
+                return {
+                    ok: false,
+                    issue: issue('unsafe-key', [...path, safeKey], `Block input contains the unsafe key "${safeKey}" after sanitization.`, 'Remove prototype-related keys from the input.'),
+                };
+            }
+            if (Object.hasOwn(output, safeKey)) {
+                return {
+                    ok: false,
+                    issue: issue('invalid-input', [...path, key], 'Sanitization produced duplicate object keys.', 'Rename keys so they remain unique after control characters are removed.'),
+                };
+            }
+            const value = descriptor.value;
+            const nextContext = key === 'code' && record.type === 'code'
+                ? 'code'
+                : MULTILINE_KEYS.has(key) || (listItem && key === 'text')
+                    ? 'markdown'
+                    : 'plain';
+            const child = visit(value, [...path, safeKey], depth + 1, nextContext, key === 'items' && record.type === 'list');
+            if (!child.ok)
+                return child;
+            output[safeKey] = child.value;
+        }
+        ancestors.delete(current);
+        return { ok: true, value: output };
+    };
+    return visit(input, [], 0);
+}
+function checkJsonDepth(text, maxDepth) {
+    let depth = 0;
+    let inString = false;
+    let escaped = false;
+    for (const character of text) {
+        if (inString) {
+            if (escaped)
+                escaped = false;
+            else if (character === '\\')
+                escaped = true;
+            else if (character === '"')
+                inString = false;
+        }
+        else if (character === '"')
+            inString = true;
+        else if (character === '{' || character === '[') {
+            depth += 1;
+            if (depth > maxDepth)
+                return false;
+        }
+        else if (character === '}' || character === ']')
+            depth -= 1;
+    }
+    return true;
+}
+function checkBlockCounts(input, limits) {
+    if (!Array.isArray(input))
+        return null;
+    let count = 0;
+    const walk = (blocks, path, containerDepth) => {
+        for (const [index, value] of blocks.entries()) {
+            const blockPath = [...path, index];
+            count += 1;
+            if (count > limits.maxBlocks) {
+                return issue('too-many', blockPath, `Document contains more than ${limits.maxBlocks} blocks.`, `Reduce the document to at most ${limits.maxBlocks} blocks.`);
+            }
+            if (!value || typeof value !== 'object' || Array.isArray(value))
+                continue;
+            const block = value;
+            if (block.type === 'columns' && Array.isArray(block.columns)) {
+                if (containerDepth + 1 > limits.maxContainerDepth) {
+                    return issue('too-deep', blockPath, `Block containers nest more than ${limits.maxContainerDepth} deep.`, `Flatten the containers to at most ${limits.maxContainerDepth} levels.`);
+                }
+                for (const [columnIndex, column] of block.columns.entries()) {
+                    if (!Array.isArray(column))
+                        continue;
+                    const childIssue = walk(column, [...blockPath, 'columns', columnIndex], containerDepth + 1);
+                    if (childIssue)
+                        return childIssue;
+                }
+            }
+            if (block.type === 'tabs' && Array.isArray(block.panels)) {
+                if (containerDepth + 1 > limits.maxContainerDepth) {
+                    return issue('too-deep', blockPath, `Block containers nest more than ${limits.maxContainerDepth} deep.`, `Flatten the containers to at most ${limits.maxContainerDepth} levels.`);
+                }
+                for (const [panelIndex, panel] of block.panels.entries()) {
+                    if (!panel || typeof panel !== 'object' || Array.isArray(panel))
+                        continue;
+                    const panelBlocks = panel.blocks;
+                    if (!Array.isArray(panelBlocks))
+                        continue;
+                    const childIssue = walk(panelBlocks, [...blockPath, 'panels', panelIndex, 'blocks'], containerDepth + 1);
+                    if (childIssue)
+                        return childIssue;
+                }
+            }
+            if (block.type === 'table' && Array.isArray(block.columns) && Array.isArray(block.rows)) {
+                const cells = block.columns.length * block.rows.length;
+                if (cells > limits.maxTableCells) {
+                    return issue('too-many', [...blockPath, 'rows'], `Table contains ${cells} cells; the limit is ${limits.maxTableCells}.`, `Reduce table rows and columns to at most ${limits.maxTableCells} cells.`);
+                }
+            }
+        }
+        return null;
+    };
+    return walk(input, [], 0);
+}
+function checkDataUris(input, limits) {
+    let total = 0;
+    const walk = (value, path) => {
+        if (typeof value === 'string') {
+            const match = DATA_URI.exec(value);
+            if (!match)
+                return null;
+            const bytes = base64DecodedBytes(match[1] ?? '');
+            if (bytes > limits.maxDataUriBytes) {
+                return issue('too-large', path, `Embedded media is ${bytes} bytes; the limit is ${limits.maxDataUriBytes}.`, `Use a data URI at or below ${limits.maxDataUriBytes} decoded bytes.`);
+            }
+            total += bytes;
+            if (total > limits.maxDocumentDataUriBytes) {
+                return issue('too-large', path, `Embedded media totals more than ${limits.maxDocumentDataUriBytes} bytes per document.`, `Reduce the document's embedded media to at most ${limits.maxDocumentDataUriBytes} decoded bytes.`);
+            }
+            return null;
+        }
+        if (Array.isArray(value)) {
+            for (const [index, child] of value.entries()) {
+                const found = walk(child, [...path, index]);
+                if (found)
+                    return found;
+            }
+        }
+        else if (value && typeof value === 'object') {
+            for (const [key, child] of Object.entries(value)) {
+                const found = walk(child, [...path, key]);
+                if (found)
+                    return found;
+            }
+        }
+        return null;
+    };
+    return walk(input, []);
+}
+/** Sanitize and validate block documents before a host uses them. */
+export function parseUntrustedBlocks(input, limits = {}) {
+    const caps = cappedLimits(limits);
+    try {
+        let parsed = input;
+        if (typeof input === 'string') {
+            if (utf8Length(input) > caps.maxBytes) {
+                return {
+                    success: false,
+                    blocks: null,
+                    issues: [
+                        fatal('too-large', 'Block input exceeds the byte limit.', `Keep the input at or below ${caps.maxBytes} UTF-8 bytes.`),
+                    ],
+                };
+            }
+            if (!checkJsonDepth(input, caps.maxDepth)) {
+                return {
+                    success: false,
+                    blocks: null,
+                    issues: [
+                        fatal('too-deep', 'Block JSON exceeds the maximum nesting depth.', `Flatten the document so it is at most ${caps.maxDepth} JSON levels deep.`),
+                    ],
+                };
+            }
+            try {
+                parsed = JSON.parse(input);
+            }
+            catch {
+                return {
+                    success: false,
+                    blocks: null,
+                    issues: [
+                        fatal('invalid-json', 'Block input is not valid JSON.', 'Fix the JSON syntax and try again.'),
+                    ],
+                };
+            }
+        }
+        const safe = sanitizeJson(parsed, caps);
+        if (!safe.ok)
+            return { success: false, blocks: null, issues: [safe.issue] };
+        const serialized = JSON.stringify(safe.value);
+        if (serialized === undefined || utf8Length(serialized) > caps.maxBytes) {
+            return {
+                success: false,
+                blocks: null,
+                issues: [
+                    fatal('too-large', 'Block input exceeds the byte limit.', `Keep the input at or below ${caps.maxBytes} UTF-8 bytes.`),
+                ],
+            };
+        }
+        if (!Array.isArray(safe.value)) {
+            return {
+                success: false,
+                blocks: null,
+                issues: [
+                    fatal('invalid-input', 'Block input must be an array.', 'Provide a block list or its JSON text.'),
+                ],
+            };
+        }
+        const countIssue = checkBlockCounts(safe.value, caps);
+        if (countIssue)
+            return { success: false, blocks: null, issues: [countIssue] };
+        const mediaIssue = checkDataUris(safe.value, caps);
+        if (mediaIssue)
+            return { success: false, blocks: null, issues: [mediaIssue] };
+        const result = safeParseBlocks(safe.value);
+        if (!result.success) {
+            return {
+                success: false,
+                blocks: null,
+                issues: result.issues.map((problem) => issue('invalid-blocks', problem.path, problem.message, 'Correct this value to match the block schema, then try again.')),
+            };
+        }
+        return { success: true, blocks: result.data, issues: [] };
+    }
+    catch {
+        return {
+            success: false,
+            blocks: null,
+            issues: [
+                fatal('invalid-input', 'Block input could not be safely loaded.', 'Provide plain JSON data that matches the block schema.'),
+            ],
+        };
+    }
+}

package/dist/css-modules.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/dist/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/dist/data/ChartBlockView.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+import type { Component } from 'svelte';
+import type { ChartBlock } from '../core/index.js';
+
+let { block, mode = 'light' }: { block: ChartBlock; mode?: 'light' | 'dark' } = $props();
+
+let Chart = $state<Component<Record<string, unknown>> | null>(null);
+let loadError = $state('');
+
+$effect(() => {
+  let cancelled = false;
+  loadError = '';
+  Chart = null;
+  const kind = block.kind;
+  (async () => {
+    try {
+      if (kind === 'heatmap') {
+        const mod = await import('@texuli/charts/matrix');
+        if (!cancelled) Chart = mod.HeatmapChart as unknown as Component<Record<string, unknown>>;
+        return;
+      }
+      if (kind === 'scatter' || kind === 'bubble') {
+        const mod = await import('@texuli/charts/matrix');
+        if (!cancelled) {
+          Chart = (kind === 'bubble' ? mod.BubbleChart : mod.ScatterChart) as unknown as Component<
+            Record<string, unknown>
+          >;
+        }
+        return;
+      }
+      const mod = await import('@texuli/charts/cartesian');
+      const map: Record<string, unknown> = {
+        line: mod.LineChart,
+        area: mod.AreaChart,
+        bar: mod.BarChart,
+        'stacked-bar': mod.StackedBarChart,
+      };
+      if (!cancelled) Chart = map[kind] as Component<Record<string, unknown>>;
+    } catch (error) {
+      if (!cancelled) {
+        loadError = error instanceof Error ? error.message : 'Chart failed to load';
+      }
+    }
+  })();
+  return () => {
+    cancelled = true;
+  };
+});
+</script>
+
+{#if loadError}
+  <p class="tx-block-chart-error" role="note">{loadError}</p>
+{:else if Chart}
+  {#if block.kind === 'heatmap'}
+    <Chart title={block.title} description={block.description} cells={block.cells ?? []} {mode} />
+  {:else if block.kind === 'scatter' || block.kind === 'bubble'}
+    <Chart title={block.title} description={block.description} points={block.points ?? []} {mode} />
+  {:else}
+    <Chart
+      title={block.title}
+      description={block.description}
+      series={block.series ?? []}
+      {mode}
+    />
+  {/if}
+{:else}
+  <p class="tx-block-chart-loading" role="status">Loading chart…</p>
+{/if}
+
+<style>
+  .tx-block-chart-loading,
+  .tx-block-chart-error {
+    margin: 0;
+    color: var(--tx-muted-foreground, GrayText);
+    font-size: 0.875rem;
+  }
+</style>