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

package/dist/data/schema.js

@@ -0,0 +1,385 @@
+/**
+ * Data-family block shapes and parsers (table, stat, chart, kpi).
+ * Wired into the core `safeParseBlock` switch via `parseDataBlock`.
+ */
+import { BLOCK_CONTENT_LIMITS, fail, ok, parseMultilineText, parsePlainText, } from "../core/schema/primitives.js";
+import { isBlockTone } from "../core/schema/vocabulary.js";
+export const DATA_BLOCK_TYPES = [
+    'table',
+    'stat',
+    'kpi',
+    'chart',
+];
+export const CHART_KINDS = [
+    'line',
+    'area',
+    'bar',
+    'stacked-bar',
+    'heatmap',
+    'scatter',
+    'bubble',
+];
+function plainObject(value, path) {
+    if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+        return fail(path, 'Expected a plain object');
+    }
+    const prototype = Object.getPrototypeOf(value);
+    if (prototype !== Object.prototype && prototype !== null) {
+        return fail(path, 'Objects must be plain JSON data');
+    }
+    return ok(value);
+}
+function parseTone(value, path) {
+    if (value === undefined)
+        return ok(undefined);
+    if (!isBlockTone(value))
+        return fail(path, 'tone must be a known block tone');
+    return ok(value);
+}
+function parseColumnId(value, path) {
+    if (typeof value !== 'string' || !/^[a-z][a-z0-9_-]{0,31}$/.test(value)) {
+        return fail(path, 'column id must be a short lowercase token');
+    }
+    return ok(value);
+}
+export function parseTableBlock(record, path, base) {
+    if (!Array.isArray(record.columns) || record.columns.length === 0) {
+        return fail([...path, 'columns'], 'table needs at least one column');
+    }
+    if (record.columns.length > BLOCK_CONTENT_LIMITS.tableColumns) {
+        return fail([...path, 'columns'], `table may have at most ${BLOCK_CONTENT_LIMITS.tableColumns} columns`);
+    }
+    if (!Array.isArray(record.rows)) {
+        return fail([...path, 'rows'], 'table rows must be an array');
+    }
+    if (record.rows.length > BLOCK_CONTENT_LIMITS.tableRows) {
+        return fail([...path, 'rows'], `table may have at most ${BLOCK_CONTENT_LIMITS.tableRows} rows`);
+    }
+    const columns = [];
+    const ids = new Set();
+    for (let i = 0; i < record.columns.length; i += 1) {
+        const colPath = [...path, 'columns', i];
+        const col = plainObject(record.columns[i], colPath);
+        if (!col.success)
+            return col;
+        const id = parseColumnId(col.data.id, [...colPath, 'id']);
+        if (!id.success)
+            return id;
+        if (ids.has(id.data))
+            return fail([...colPath, 'id'], `duplicate column id "${id.data}"`);
+        ids.add(id.data);
+        const label = parsePlainText(col.data.label, [...colPath, 'label'], BLOCK_CONTENT_LIMITS.plain);
+        if (!label.success)
+            return label;
+        columns.push({ id: id.data, label: label.data });
+    }
+    const rows = [];
+    for (let r = 0; r < record.rows.length; r += 1) {
+        const rowPath = [...path, 'rows', r];
+        const rowObj = plainObject(record.rows[r], rowPath);
+        if (!rowObj.success)
+            return rowObj;
+        const row = {};
+        for (const column of columns) {
+            const raw = rowObj.data[column.id];
+            if (raw === undefined || raw === null) {
+                row[column.id] = null;
+                continue;
+            }
+            if (typeof raw === 'number') {
+                if (!Number.isFinite(raw)) {
+                    return fail([...rowPath, column.id], 'numeric cells must be finite');
+                }
+                row[column.id] = raw;
+                continue;
+            }
+            if (typeof raw === 'string') {
+                const text = parsePlainText(raw, [...rowPath, column.id], BLOCK_CONTENT_LIMITS.plain);
+                if (!text.success)
+                    return text;
+                row[column.id] = text.data;
+                continue;
+            }
+            return fail([...rowPath, column.id], 'cell must be string, number or null');
+        }
+        rows.push(row);
+    }
+    let caption;
+    if (record.caption !== undefined) {
+        const parsed = parsePlainText(record.caption, [...path, 'caption'], BLOCK_CONTENT_LIMITS.plain);
+        if (!parsed.success)
+            return parsed;
+        caption = parsed.data;
+    }
+    return ok({
+        ...base,
+        type: 'table',
+        columns,
+        rows,
+        ...(caption !== undefined ? { caption } : {}),
+    });
+}
+function parseStatItems(value, path, max) {
+    if (!Array.isArray(value) || value.length === 0) {
+        return fail(path, 'needs at least one item');
+    }
+    if (value.length > max) {
+        return fail(path, `at most ${max} items`);
+    }
+    const items = [];
+    for (let i = 0; i < value.length; i += 1) {
+        const itemPath = [...path, i];
+        const item = plainObject(value[i], itemPath);
+        if (!item.success)
+            return item;
+        const label = parsePlainText(item.data.label, [...itemPath, 'label'], BLOCK_CONTENT_LIMITS.plain);
+        if (!label.success)
+            return label;
+        const val = parsePlainText(item.data.value, [...itemPath, 'value'], BLOCK_CONTENT_LIMITS.plain);
+        if (!val.success)
+            return val;
+        let hint;
+        if (item.data.hint !== undefined) {
+            const parsed = parsePlainText(item.data.hint, [...itemPath, 'hint'], BLOCK_CONTENT_LIMITS.plain);
+            if (!parsed.success)
+                return parsed;
+            hint = parsed.data;
+        }
+        let delta;
+        if (item.data.delta !== undefined) {
+            const parsed = parsePlainText(item.data.delta, [...itemPath, 'delta'], BLOCK_CONTENT_LIMITS.plain);
+            if (!parsed.success)
+                return parsed;
+            delta = parsed.data;
+        }
+        const tone = parseTone(item.data.tone, [...itemPath, 'tone']);
+        if (!tone.success)
+            return tone;
+        items.push({
+            label: label.data,
+            value: val.data,
+            ...(hint !== undefined ? { hint } : {}),
+            ...(delta !== undefined ? { delta } : {}),
+            ...(tone.data !== undefined ? { tone: tone.data } : {}),
+        });
+    }
+    return ok(items);
+}
+export function parseStatBlock(record, path, base) {
+    const items = parseStatItems(record.items, [...path, 'items'], BLOCK_CONTENT_LIMITS.statItems);
+    if (!items.success)
+        return items;
+    return ok({ ...base, type: 'stat', items: items.data });
+}
+export function parseKpiBlock(record, path, base) {
+    const items = parseStatItems(record.items, [...path, 'items'], BLOCK_CONTENT_LIMITS.statItems);
+    if (!items.success)
+        return items;
+    return ok({ ...base, type: 'kpi', items: items.data });
+}
+function parseChartSeries(value, path) {
+    if (!Array.isArray(value) || value.length === 0) {
+        return fail(path, 'chart series needs at least one series');
+    }
+    if (value.length > 8)
+        return fail(path, 'chart may have at most 8 series');
+    const series = [];
+    const ids = new Set();
+    for (let i = 0; i < value.length; i += 1) {
+        const sPath = [...path, i];
+        const raw = plainObject(value[i], sPath);
+        if (!raw.success)
+            return raw;
+        const id = parseColumnId(raw.data.id, [...sPath, 'id']);
+        if (!id.success)
+            return id;
+        if (ids.has(id.data))
+            return fail([...sPath, 'id'], `duplicate series id "${id.data}"`);
+        ids.add(id.data);
+        const label = parsePlainText(raw.data.label, [...sPath, 'label'], BLOCK_CONTENT_LIMITS.plain);
+        if (!label.success)
+            return label;
+        if (!Array.isArray(raw.data.points) || raw.data.points.length === 0) {
+            return fail([...sPath, 'points'], 'series needs points');
+        }
+        if (raw.data.points.length > 64) {
+            return fail([...sPath, 'points'], 'series may have at most 64 points');
+        }
+        const points = [];
+        for (let p = 0; p < raw.data.points.length; p += 1) {
+            const pPath = [...sPath, 'points', p];
+            const pt = plainObject(raw.data.points[p], pPath);
+            if (!pt.success)
+                return pt;
+            const x = pt.data.x;
+            if (typeof x !== 'string' && typeof x !== 'number') {
+                return fail([...pPath, 'x'], 'x must be string or number');
+            }
+            if (typeof x === 'string') {
+                const text = parsePlainText(x, [...pPath, 'x'], BLOCK_CONTENT_LIMITS.plain);
+                if (!text.success)
+                    return text;
+            }
+            else if (!Number.isFinite(x)) {
+                return fail([...pPath, 'x'], 'numeric x must be finite');
+            }
+            const y = pt.data.y;
+            if (y !== null && (typeof y !== 'number' || !Number.isFinite(y))) {
+                return fail([...pPath, 'y'], 'y must be a finite number or null');
+            }
+            points.push({ x: x, y: y });
+        }
+        let color;
+        if (raw.data.color !== undefined) {
+            if (typeof raw.data.color !== 'string' || !/^var\(--[a-z0-9-]+\)$/.test(raw.data.color)) {
+                return fail([...sPath, 'color'], 'color must be a CSS var(--token) reference');
+            }
+            color = raw.data.color;
+        }
+        series.push({
+            id: id.data,
+            label: label.data,
+            points,
+            ...(color !== undefined ? { color } : {}),
+        });
+    }
+    return ok(series);
+}
+export function parseChartBlock(record, path, base) {
+    if (typeof record.kind !== 'string' ||
+        !CHART_KINDS.includes(record.kind)) {
+        return fail([...path, 'kind'], `kind must be one of ${CHART_KINDS.join(', ')}`);
+    }
+    const kind = record.kind;
+    const title = parsePlainText(record.title, [...path, 'title'], BLOCK_CONTENT_LIMITS.heading);
+    if (!title.success)
+        return title;
+    const description = parseMultilineText(record.description, [...path, 'description'], BLOCK_CONTENT_LIMITS.shortMarkdown);
+    if (!description.success)
+        return description;
+    if (kind === 'heatmap') {
+        if (!Array.isArray(record.cells) || record.cells.length === 0) {
+            return fail([...path, 'cells'], 'heatmap needs cells');
+        }
+        if (record.cells.length > BLOCK_CONTENT_LIMITS.tableColumns * BLOCK_CONTENT_LIMITS.tableRows) {
+            return fail([...path, 'cells'], 'too many heatmap cells');
+        }
+        const cells = [];
+        for (let i = 0; i < record.cells.length; i += 1) {
+            const cPath = [...path, 'cells', i];
+            const cell = plainObject(record.cells[i], cPath);
+            if (!cell.success)
+                return cell;
+            const x = parsePlainText(cell.data.x, [...cPath, 'x'], BLOCK_CONTENT_LIMITS.plain);
+            if (!x.success)
+                return x;
+            const y = parsePlainText(cell.data.y, [...cPath, 'y'], BLOCK_CONTENT_LIMITS.plain);
+            if (!y.success)
+                return y;
+            if (typeof cell.data.value !== 'number' || !Number.isFinite(cell.data.value)) {
+                return fail([...cPath, 'value'], 'value must be a finite number');
+            }
+            cells.push({ x: x.data, y: y.data, value: cell.data.value });
+        }
+        return ok({
+            ...base,
+            type: 'chart',
+            kind,
+            title: title.data,
+            description: description.data,
+            cells,
+        });
+    }
+    if (kind === 'scatter' || kind === 'bubble') {
+        if (!Array.isArray(record.points) || record.points.length === 0) {
+            return fail([...path, 'points'], 'scatter/bubble needs points');
+        }
+        if (record.points.length > 64)
+            return fail([...path, 'points'], 'at most 64 points');
+        const points = [];
+        const ids = new Set();
+        for (let i = 0; i < record.points.length; i += 1) {
+            const pPath = [...path, 'points', i];
+            const pt = plainObject(record.points[i], pPath);
+            if (!pt.success)
+                return pt;
+            const id = parseColumnId(pt.data.id, [...pPath, 'id']);
+            if (!id.success)
+                return id;
+            if (ids.has(id.data))
+                return fail([...pPath, 'id'], 'duplicate point id');
+            ids.add(id.data);
+            const label = parsePlainText(pt.data.label, [...pPath, 'label'], BLOCK_CONTENT_LIMITS.plain);
+            if (!label.success)
+                return label;
+            if (typeof pt.data.x !== 'number' || !Number.isFinite(pt.data.x)) {
+                return fail([...pPath, 'x'], 'x must be finite');
+            }
+            if (typeof pt.data.y !== 'number' || !Number.isFinite(pt.data.y)) {
+                return fail([...pPath, 'y'], 'y must be finite');
+            }
+            let r;
+            if (kind === 'bubble') {
+                if (typeof pt.data.r !== 'number' || !Number.isFinite(pt.data.r) || pt.data.r < 0) {
+                    return fail([...pPath, 'r'], 'bubble r must be a non-negative finite number');
+                }
+                r = pt.data.r;
+            }
+            else if (pt.data.r !== undefined) {
+                if (typeof pt.data.r !== 'number' || !Number.isFinite(pt.data.r) || pt.data.r < 0) {
+                    return fail([...pPath, 'r'], 'r must be a non-negative finite number when set');
+                }
+                r = pt.data.r;
+            }
+            let seriesId;
+            if (pt.data.seriesId !== undefined) {
+                const sid = parseColumnId(pt.data.seriesId, [...pPath, 'seriesId']);
+                if (!sid.success)
+                    return sid;
+                seriesId = sid.data;
+            }
+            points.push({
+                id: id.data,
+                label: label.data,
+                x: pt.data.x,
+                y: pt.data.y,
+                ...(r !== undefined ? { r } : {}),
+                ...(seriesId !== undefined ? { seriesId } : {}),
+            });
+        }
+        return ok({
+            ...base,
+            type: 'chart',
+            kind,
+            title: title.data,
+            description: description.data,
+            points,
+        });
+    }
+    const series = parseChartSeries(record.series, [...path, 'series']);
+    if (!series.success)
+        return series;
+    return ok({
+        ...base,
+        type: 'chart',
+        kind,
+        title: title.data,
+        description: description.data,
+        series: series.data,
+    });
+}
+/** Dispatch for the four data block types; returns null when type is not data. */
+export function parseDataBlock(type, record, path, base) {
+    switch (type) {
+        case 'table':
+            return parseTableBlock(record, path, base);
+        case 'stat':
+            return parseStatBlock(record, path, base);
+        case 'kpi':
+            return parseKpiBlock(record, path, base);
+        case 'chart':
+            return parseChartBlock(record, path, base);
+        default:
+            return null;
+    }
+}

package/dist/diagram/BoardDiagram.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+import type { BoardDiagram } from './schema.js';
+import { toneBorder } from './tones.js';
+import './diagram.css';
+
+/** Board: columns of cards as labelled lists (structure is the text alternative). */
+let { block }: { block: BoardDiagram } = $props();
+
+const cards = $derived(block.columns.reduce((sum, column) => sum + column.cards.length, 0));
+const summary = $derived(
+  `Board with ${block.columns.length} ${block.columns.length === 1 ? 'column' : 'columns'} and ${cards} ${
+    cards === 1 ? 'card' : 'cards'
+  }`
+);
+</script>
+
+<figure class="tx-diagram" data-tx-diagram="board">
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -- wide board scrolls; keyboard users must reach it. -->
+  <div class="tx-diagram__scroll" role="region" aria-label={summary} tabindex="0">
+    <div class="tx-diagram-board">
+      {#each block.columns as column (column.id)}
+        <section
+          class="tx-diagram-column"
+          aria-label="{column.title}, {column.cards.length} {column.cards.length === 1
+            ? 'card'
+            : 'cards'}"
+          data-column={column.id}
+        >
+          <p class="tx-diagram-column__title" aria-hidden="true">
+            <span>{column.title}</span>
+            <span class="tx-diagram-column__count">{column.cards.length}</span>
+          </p>
+          {#if column.cards.length > 0}
+            <ul class="tx-diagram-cards">
+              {#each column.cards as card (card.id)}
+                <li class={`tx-diagram-card ${toneBorder(card.tone)}`} data-card={card.id}>
+                  {card.title}
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <p class="tx-diagram-empty">No cards</p>
+          {/if}
+        </section>
+      {/each}
+    </div>
+  </div>
+</figure>

package/dist/diagram/BoardDiagram.svelte.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../css-modules.d.ts" />
+import type { BoardDiagram } from './schema.js';
+type $$ComponentProps = {
+    block: BoardDiagram;
+};
+declare const BoardDiagram: import("svelte").Component<$$ComponentProps, {}, "">;
+type BoardDiagram = ReturnType<typeof BoardDiagram>;
+export default BoardDiagram;

package/dist/diagram/DiagramFamily.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+import type { FieldIssue } from '../core/schema/primitives.js';
+import BoardDiagram from './BoardDiagram.svelte';
+import FlowDiagram from './FlowDiagram.svelte';
+import { parseDiagram } from './schema.js';
+import TerminalDiagram from './TerminalDiagram.svelte';
+import TreeDiagram from './TreeDiagram.svelte';
+import './diagram.css';
+
+interface Props {
+  /** Untrusted block data; validated before anything renders. */
+  block: unknown;
+  oninvalid?: (issues: FieldIssue[]) => void;
+}
+
+let { block, oninvalid }: Props = $props();
+
+const parsed = $derived(parseDiagram(block));
+
+$effect(() => {
+  if (!parsed.success) {
+    oninvalid?.(
+      parsed.issues.map((issue) => ({
+        path: [],
+        message: `${issue.jsonPath}: ${issue.message}`,
+      }))
+    );
+  }
+});
+</script>
+
+{#if !parsed.success}
+  <p class="tx-diagram-fallback" role="note" data-tx-diagram-invalid>
+    This diagram could not be shown. The data failed validation.
+  </p>
+{:else if parsed.data.type === 'flow'}
+  <FlowDiagram block={parsed.data} />
+{:else if parsed.data.type === 'tree'}
+  <TreeDiagram block={parsed.data} />
+{:else if parsed.data.type === 'board'}
+  <BoardDiagram block={parsed.data} />
+{:else if parsed.data.type === 'terminal'}
+  <TerminalDiagram block={parsed.data} />
+{:else}
+  <p class="tx-diagram-fallback" role="note">This block renderer is not available yet.</p>
+{/if}

package/dist/diagram/DiagramFamily.svelte.d.ts

@@ -0,0 +1,10 @@
+/// <reference path="../css-modules.d.ts" />
+import type { FieldIssue } from '../core/schema/primitives.js';
+interface Props {
+    /** Untrusted block data; validated before anything renders. */
+    block: unknown;
+    oninvalid?: (issues: FieldIssue[]) => void;
+}
+declare const DiagramFamily: import("svelte").Component<Props, {}, "">;
+type DiagramFamily = ReturnType<typeof DiagramFamily>;
+export default DiagramFamily;

package/dist/diagram/FlowDiagram.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+import { layoutFlow } from './layout.js';
+import type { FlowDiagram } from './schema.js';
+import { DIAGRAM_PAD, toneBorder } from './tones.js';
+import './diagram.css';
+
+/**
+ * Flow steps left to right from layoutFlow, joined by arrows, optional loop-back.
+ * Ordered list is the text alternative; drawing is aria-hidden.
+ */
+let { block }: { block: FlowDiagram } = $props();
+
+const uid = $props.id();
+const arrow = `tx-flow-arrow-${uid}`;
+const layout = $derived(layoutFlow(block));
+const byId = $derived(new Map(layout.positions.map((p) => [p.id, p])));
+const stageW = $derived(layout.width + DIAGRAM_PAD * 2);
+const stageH = $derived(layout.height + DIAGRAM_PAD * 2);
+const summary = $derived(
+  `Flow with ${block.nodes.length} ${block.nodes.length === 1 ? 'step' : 'steps'}${
+    block.loopBack && block.nodes.length > 1 ? ', repeating from the last step to the first' : ''
+  }`
+);
+
+function edgePath(from: string, to: string, kind: string): string {
+  const a = byId.get(from);
+  const b = byId.get(to);
+  if (!a || !b) return '';
+  if (kind === 'loop-back') {
+    const y = a.y + a.height + 24;
+    return `M ${a.x + a.width / 2} ${a.y + a.height} V ${y} H ${b.x + b.width / 2} V ${b.y + b.height + 6}`;
+  }
+  const y = a.y + a.height / 2;
+  return `M ${a.x + a.width} ${y} H ${b.x - 6}`;
+}
+
+function nodeStyle(node: { x: number; y: number; width: number; height: number }): string {
+  return [
+    `--tx-dx:${node.x + DIAGRAM_PAD}px`,
+    `--tx-dy:${node.y + DIAGRAM_PAD}px`,
+    `--tx-dw:${node.width}px`,
+    `--tx-dh:${node.height}px`,
+  ].join(';');
+}
+</script>
+
+<figure class="tx-diagram" data-tx-diagram="flow">
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -- wide flow scrolls; keyboard users must reach it (WCAG 2.1.1). -->
+  <div class="tx-diagram__scroll" role="region" aria-label={summary} tabindex="0">
+    <ol class="tx-diagram-sr">
+      {#each block.nodes as node, index (node.id)}
+        <li>Step {index + 1} of {block.nodes.length}: {node.label}</li>
+      {/each}
+      {#if block.loopBack && block.nodes.length > 1}
+        <li>Then back to step 1: {block.nodes[0]?.label}</li>
+      {/if}
+    </ol>
+    <div
+      class="tx-diagram__stage"
+      aria-hidden="true"
+      style={`--tx-diagram-w:${stageW}px;--tx-diagram-h:${stageH}px`}
+    >
+      <svg
+        class="tx-diagram__svg"
+        width={stageW}
+        height={stageH}
+        viewBox={`${-DIAGRAM_PAD} ${-DIAGRAM_PAD} ${stageW} ${stageH}`}
+        focusable="false"
+      >
+        <defs>
+          <marker
+            id={arrow}
+            viewBox="0 0 10 10"
+            refX="8"
+            refY="5"
+            markerWidth="7"
+            markerHeight="7"
+            orient="auto-start-reverse"
+          >
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="currentColor" />
+          </marker>
+        </defs>
+        {#each layout.edges as edge (`${edge.from}-${edge.to}-${edge.kind}`)}
+          <path
+            d={edgePath(edge.from, edge.to, edge.kind)}
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-dasharray={edge.kind === 'loop-back' ? '4 4' : undefined}
+            marker-end={`url(#${arrow})`}
+            data-edge={edge.kind}
+          />
+        {/each}
+      </svg>
+      {#each layout.positions as node, index (node.id)}
+        <div
+          class={`tx-diagram-node ${toneBorder(node.tone)}`}
+          style={nodeStyle(node)}
+          title={node.label}
+          data-node={node.id}
+        >
+          <span class="tx-diagram-node__index">{index + 1}</span>
+          <span class="tx-diagram-node__label">{node.label}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</figure>

package/dist/diagram/FlowDiagram.svelte.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../css-modules.d.ts" />
+import type { FlowDiagram } from './schema.js';
+type $$ComponentProps = {
+    block: FlowDiagram;
+};
+declare const FlowDiagram: import("svelte").Component<$$ComponentProps, {}, "">;
+type FlowDiagram = ReturnType<typeof FlowDiagram>;
+export default FlowDiagram;

package/dist/diagram/TerminalDiagram.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { TerminalDiagram } from './schema.js';
+import './diagram.css';
+
+/**
+ * Terminal session as text: prompts, output and comments in order.
+ * `$` is decoration; assistive tech hears "Command:".
+ */
+let { block }: { block: TerminalDiagram } = $props();
+
+const commands = $derived(block.lines.filter((line) => line.kind === 'prompt').length);
+</script>
+
+<figure class="tx-diagram" data-tx-diagram="terminal">
+  <div class="tx-diagram-terminal">
+    <div class="tx-diagram-terminal__chrome" aria-hidden="true">
+      <span class="tx-diagram-terminal__dot"></span>
+      <span class="tx-diagram-terminal__dot"></span>
+      <span class="tx-diagram-terminal__dot"></span>
+    </div>
+    <ol
+      class="tx-diagram-terminal__lines"
+      aria-label="Terminal session, {commands} {commands === 1 ? 'command' : 'commands'}"
+    >
+      {#each block.lines as line, index (index)}
+        <li class="tx-diagram-terminal__line" data-kind={line.kind}>
+          {#if line.kind === 'prompt'}
+            <span class="tx-diagram-terminal__prompt-mark" aria-hidden="true">{'$ '}</span>
+            <span class="tx-diagram-sr">Command: </span>
+            <span class="tx-diagram-terminal__prompt-text">{line.text}</span>
+          {:else}
+            {line.text}
+          {/if}
+        </li>
+      {/each}
+    </ol>
+  </div>
+</figure>

package/dist/diagram/TerminalDiagram.svelte.d.ts

@@ -0,0 +1,8 @@
+/// <reference path="../css-modules.d.ts" />
+import type { TerminalDiagram } from './schema.js';
+type $$ComponentProps = {
+    block: TerminalDiagram;
+};
+declare const TerminalDiagram: import("svelte").Component<$$ComponentProps, {}, "">;
+type TerminalDiagram = ReturnType<typeof TerminalDiagram>;
+export default TerminalDiagram;