@peter.prib/renderengine 0.15.2 → 0.15.3

package/src/charting/report/reportWriters.js

@@ -0,0 +1,496 @@
+/**
+ * Pure format writers for templated reports (HTML, Word, Excel, CSV, Markdown).
+ *
+ * Separates document generation formats from model / view data extraction,
+ * allowing any report producer (ArchiMate models, ViewsPart, DecisionWorkbench)
+ * to output to all 5 formats cleanly.
+ */
+
+export function escapeHtml(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+export function escapeXml(str) {
+    return escapeHtml(str);
+}
+
+export function escapeCsv(val) {
+    const s = String(val ?? '');
+    if (/[",\n\r]/.test(s)) {
+        return `"${s.replace(/"/g, '""')}"`;
+    }
+    return s;
+}
+
+/**
+ * Render report data as HTML with print-to-PDF styles and vector SVG view diagrams.
+ * @param {Object} data - normalized report data
+ * @param {Object} [options]
+ * @param {boolean} [options.printable=true]
+ * @returns {string}
+ */
+export function formatHtml(data, { printable = true } = {}) {
+    const { model, views = [], elements = [], relationships = [], properties = [], date = new Date().toISOString().split('T')[0] } = data;
+    const modelName = model?.name || data.title || 'Report';
+    const modelVersion = model?.version || data.version || '1.0';
+    const modelDoc = model?.documentation || data.documentation || '';
+
+    const printCss = printable ? `
+@media print {
+    body { background: #fff; margin: 0; padding: 0; font-size: 11pt; color: #000; }
+    header, footer { position: fixed; width: 100%; left: 0; font-size: 9pt; color: #777; }
+    header { top: 0; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
+    footer { bottom: 0; border-top: 1px solid #ccc; padding-top: 4px; display: flex; justify-content: space-between; }
+    .page-break { page-break-after: always; }
+    .no-break { page-break-inside: avoid; }
+    .picture { max-width: 100% !important; page-break-inside: avoid; }
+    table { page-break-inside: auto; }
+    tr { page-break-inside: avoid; page-break-after: auto; }
+}
+@page {
+    size: A4;
+    margin: 20mm;
+}` : '';
+
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(modelName)}</title>
+<style>
+body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #222; margin: 24px auto; max-width: 960px; padding: 0 16px; }
+h1 { font-size: 26px; border-bottom: 2px solid #2563eb; padding-bottom: 6px; margin-top: 24px; color: #1e3a8a; }
+h2 { font-size: 20px; border-bottom: 1px solid #cbd5e1; padding-bottom: 4px; margin-top: 24px; color: #1e40af; }
+h3 { font-size: 16px; margin-top: 18px; color: #334155; }
+h4 { font-size: 14px; margin-top: 12px; color: #475569; }
+.meta { font-size: 13px; color: #64748b; margin-bottom: 20px; }
+.doc { white-space: pre-wrap; background: #f8fafc; border-left: 4px solid #3b82f6; padding: 10px 14px; margin: 12px 0; font-size: 14px; }
+.notes { margin: 8px 0; padding-left: 20px; }
+.notes li { margin-bottom: 4px; }
+.chart-block { margin: 16px 0; }
+table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
+th, td { border: 1px solid #e2e8f0; padding: 6px 10px; text-align: left; vertical-align: top; }
+th { background: #f1f5f9; font-weight: 600; color: #334155; }
+tr:nth-child(even) { background: #f8fafc; }
+.picture { margin: 16px 0; border: 1px solid #e2e8f0; border-radius: 4px; padding: 8px; background: #fff; overflow-x: auto; text-align: center; }
+.picture svg { max-width: 100%; height: auto; }
+.badge { display: inline-block; padding: 2px 6px; font-size: 11px; font-weight: 500; border-radius: 3px; background: #e0f2fe; color: #0369a1; }
+${printCss}
+</style>
+</head>
+<body>
+<h1>${escapeHtml(modelName)}</h1>
+<div class="meta">Generated: ${escapeHtml(date)} | Version: ${escapeHtml(modelVersion)}</div>
+${modelDoc ? `<div class="doc">${escapeHtml(modelDoc)}</div>` : ''}
+
+${properties.length ? `
+<h2>Properties</h2>
+<table>
+<thead><tr><th>Property</th><th>Value</th></tr></thead>
+<tbody>
+${properties.map(p => `<tr><td>${escapeHtml(p.name)}</td><td>${escapeHtml(p.value)}</td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+
+${views.length ? `
+<h2>Views (${views.length})</h2>
+${views.map(v => `
+<div class="no-break">
+<h3>${escapeHtml(v.name || v.title || v.id)}</h3>
+${v.documentation ? `<div class="doc">${escapeHtml(v.documentation)}</div>` : ''}
+${v.notes?.length && v.notes.join('\n\n') !== v.documentation ? `
+<ul class="notes">
+${v.notes.map(n => `<li>${escapeHtml(n)}</li>`).join('')}
+</ul>` : ''}
+${v.charts?.length ? v.charts.map(c => `
+<div class="chart-block">
+  ${c.title ? `<h4>${escapeHtml(c.title)}</h4>` : ''}
+  ${c.picture ? `<div class="picture">${c.picture}</div>` : ''}
+</div>
+`).join('') : (v.picture ? `<div class="picture">${v.picture}</div>` : '')}
+${v.elements?.length ? `
+<table>
+<thead><tr><th>Element</th><th>Type</th></tr></thead>
+<tbody>
+${v.elements.map(e => `<tr><td>${escapeHtml(e.name)}</td><td><span class="badge">${escapeHtml(e.type)}</span></td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+</div>
+<div class="page-break"></div>
+`).join('')}` : ''}
+
+${elements.length ? `
+<h2>Elements (${elements.length})</h2>
+<table>
+<thead><tr><th>Name</th><th>Type</th><th>Layer</th><th>Documentation</th></tr></thead>
+<tbody>
+${elements.map(e => `<tr><td><strong>${escapeHtml(e.name)}</strong></td><td><span class="badge">${escapeHtml(e.type)}</span></td><td>${escapeHtml(e.layer)}</td><td>${escapeHtml(e.documentation)}</td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+
+${relationships.length ? `
+<h2>Relationships (${relationships.length})</h2>
+<table>
+<thead><tr><th>Type</th><th>Source</th><th>Target</th><th>Name</th><th>Documentation</th></tr></thead>
+<tbody>
+${relationships.map(r => `<tr><td><span class="badge">${escapeHtml(r.type)}</span></td><td>${escapeHtml(r.source)}</td><td>${escapeHtml(r.target)}</td><td>${escapeHtml(r.name)}</td><td>${escapeHtml(r.documentation)}</td></tr>`).join('')}
+</tbody>
+</table>` : ''}
+
+</body>
+</html>`;
+}
+
+/**
+ * Render report data as Microsoft Word-compatible document (.doc).
+ * @param {Object} data - normalized report data
+ * @returns {string}
+ */
+export function formatWord(data) {
+    const { model, views = [], elements = [], relationships = [], properties = [], date = new Date().toISOString().split('T')[0] } = data;
+    const modelName = model?.name || data.title || 'Report';
+    const modelVersion = model?.version || data.version || '1.0';
+    const modelDoc = model?.documentation || data.documentation || '';
+
+    return `<html xmlns:o="urn:schemas-microsoft-com:office:office"
+xmlns:w="urn:schemas-microsoft-com:office:word"
+xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+<meta charset="utf-8">
+<title>${escapeXml(modelName)}</title>
+<!--[if gte mso 9]>
+<xml>
+ <w:WordDocument>
+  <w:View>Print</w:View>
+  <w:Zoom>100</w:Zoom>
+  <w:DoNotOptimizeForBrowser/>
+ </w:WordDocument>
+</xml>
+<![endif]-->
+<style>
+body { font-family: Calibri, Arial, sans-serif; font-size: 11pt; line-height: 1.4; color: #333333; }
+h1 { font-size: 22pt; color: #1f4e79; border-bottom: 2pt solid #1f4e79; margin-bottom: 12pt; }
+h2 { font-size: 16pt; color: #2e75b6; margin-top: 18pt; margin-bottom: 8pt; }
+h3 { font-size: 13pt; color: #595959; margin-top: 12pt; }
+h4 { font-size: 11pt; color: #595959; margin-top: 8pt; font-weight: bold; }
+p.doc { font-style: italic; background-color: #f2f2f2; padding: 6pt; border-left: 3pt solid #2e75b6; }
+table { width: 100%; border-collapse: collapse; margin-top: 8pt; margin-bottom: 12pt; }
+th, td { border: 0.5pt solid #d9d9d9; padding: 4pt 6pt; font-size: 10pt; }
+th { background-color: #f2f2f2; font-weight: bold; color: #1f4e79; }
+.page-break { page-break-before: always; }
+</style>
+</head>
+<body>
+<h1>${escapeXml(modelName)}</h1>
+<p><strong>Generated:</strong> ${escapeXml(date)} | <strong>Version:</strong> ${escapeXml(modelVersion)}</p>
+${modelDoc ? `<p class="doc">${escapeXml(modelDoc)}</p>` : ''}
+
+${properties.length ? `
+<h2>Properties</h2>
+<table>
+<tr><th>Property</th><th>Value</th></tr>
+${properties.map(p => `<tr><td>${escapeXml(p.name)}</td><td>${escapeXml(p.value)}</td></tr>`).join('')}
+</table>` : ''}
+
+${views.length ? `
+<h2>Views</h2>
+${views.map(v => `
+<div class="page-break"></div>
+<h3>${escapeXml(v.name || v.title || v.id)}</h3>
+${v.documentation ? `<p class="doc">${escapeXml(v.documentation)}</p>` : ''}
+${v.charts?.length ? v.charts.map(c => `
+<div>
+  ${c.title ? `<h4>${escapeXml(c.title)}</h4>` : ''}
+  ${c.picture ? `<div>${c.picture}</div>` : ''}
+</div>
+`).join('') : (v.picture ? `<div>${v.picture}</div>` : '')}
+${v.elements?.length ? `
+<table>
+<tr><th>Element</th><th>Type</th></tr>
+${v.elements.map(e => `<tr><td>${escapeXml(e.name)}</td><td>${escapeXml(e.type)}</td></tr>`).join('')}
+</table>` : ''}
+`).join('')}` : ''}
+
+${elements.length ? `
+<div class="page-break"></div>
+<h2>Elements (${elements.length})</h2>
+<table>
+<tr><th>Name</th><th>Type</th><th>Layer</th><th>Documentation</th></tr>
+${elements.map(e => `<tr><td><strong>${escapeXml(e.name)}</strong></td><td>${escapeXml(e.type)}</td><td>${escapeXml(e.layer)}</td><td>${escapeXml(e.documentation)}</td></tr>`).join('')}
+</table>` : ''}
+
+${relationships.length ? `
+<div class="page-break"></div>
+<h2>Relationships (${relationships.length})</h2>
+<table>
+<tr><th>Type</th><th>Source</th><th>Target</th><th>Name</th></tr>
+${relationships.map(r => `<tr><td>${escapeXml(r.type)}</td><td>${escapeXml(r.source)}</td><td>${escapeXml(r.target)}</td><td>${escapeXml(r.name)}</td></tr>`).join('')}
+</table>` : ''}
+
+</body>
+</html>`;
+}
+
+/**
+ * Render report data as Microsoft Excel XML Spreadsheet 2003 (.xml).
+ * @param {Object} data - normalized report data
+ * @returns {string}
+ */
+export function formatExcel(data) {
+    const { model, views = [], elements = [], relationships = [], properties = [], date = new Date().toISOString().split('T')[0] } = data;
+    const modelName = model?.name || data.title || 'Report';
+    const modelVersion = model?.version || data.version || '1.0';
+    const modelDoc = model?.documentation || data.documentation || '';
+
+    const makeRow = (cells, isHeader = false) => `
+    <Row>
+${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:Type="String">${escapeXml(c)}</Data></Cell>`).join('\n')}
+    </Row>`;
+
+    const hasCharts = views.some(v => v.charts?.length);
+
+    return `<?xml version="1.0"?>
+<?mso-application progid="Excel.Sheet"?>
+<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
+ xmlns:o="urn:schemas-microsoft-com:office:office"
+ xmlns:x="urn:schemas-microsoft-com:office:excel"
+ xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
+ <Styles>
+  <Style ss:ID="Default" ss:Name="Normal">
+   <Alignment ss:Vertical="Center"/>
+   <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#000000"/>
+  </Style>
+  <Style ss:ID="Header">
+   <Font ss:FontName="Calibri" ss:Size="11" ss:Color="#FFFFFF" ss:Bold="1"/>
+   <Interior ss:Color="#2563EB" ss:Pattern="Solid"/>
+  </Style>
+  <Style ss:ID="Title">
+   <Font ss:FontName="Calibri" ss:Size="16" ss:Color="#1E3A8A" ss:Bold="1"/>
+  </Style>
+ </Styles>
+
+ <Worksheet ss:Name="Model Summary">
+  <Table>
+   <Column ss:Width="160"/>
+   <Column ss:Width="400"/>
+   <Row>
+    <Cell ss:StyleID="Title"><Data ss:Type="String">${escapeXml(modelName)}</Data></Cell>
+   </Row>
+   ${makeRow(['Item', 'Details'], true)}
+   ${makeRow(['Title', modelName])}
+   ${makeRow(['Version', modelVersion])}
+   ${makeRow(['Generated', date])}
+   ${makeRow(['Documentation', modelDoc])}
+   ${makeRow(['Total Views', String(views.length)])}
+   ${elements.length ? makeRow(['Total Elements', String(elements.length)]) : ''}
+   ${relationships.length ? makeRow(['Total Relationships', String(relationships.length)]) : ''}
+  </Table>
+ </Worksheet>
+
+ <Worksheet ss:Name="Views">
+  <Table>
+   <Column ss:Width="180"/>
+   <Column ss:Width="80"/>
+   <Column ss:Width="300"/>
+   ${makeRow(['View Name', hasCharts ? 'Charts Count' : 'Elements Count', 'Documentation'], true)}
+   ${views.map(v => makeRow([v.name || v.title || v.id, String(hasCharts ? (v.charts?.length ?? 0) : (v.elements?.length ?? 0)), v.documentation || v.notes?.join('; ') || ''])).join('')}
+  </Table>
+ </Worksheet>
+
+ ${hasCharts ? `
+ <Worksheet ss:Name="Charts">
+  <Table>
+   <Column ss:Width="180"/>
+   <Column ss:Width="200"/>
+   <Column ss:Width="120"/>
+   ${makeRow(['View', 'Chart Title', 'Chart Type'], true)}
+   ${views.flatMap(v => (v.charts || []).map(c => makeRow([v.name || v.title || v.id, c.title || '', c.chartType || '']))).join('')}
+  </Table>
+ </Worksheet>` : ''}
+
+ ${elements.length ? `
+ <Worksheet ss:Name="Elements">
+  <Table>
+   <Column ss:Width="140"/>
+   <Column ss:Width="160"/>
+   <Column ss:Width="100"/>
+   <Column ss:Width="280"/>
+   ${makeRow(['Name', 'Type', 'Layer', 'Documentation'], true)}
+   ${elements.map(e => makeRow([e.name, e.type, e.layer, e.documentation])).join('')}
+  </Table>
+ </Worksheet>` : ''}
+
+ ${relationships.length ? `
+ <Worksheet ss:Name="Relationships">
+  <Table>
+   <Column ss:Width="140"/>
+   <Column ss:Width="160"/>
+   <Column ss:Width="160"/>
+   <Column ss:Width="100"/>
+   <Column ss:Width="200"/>
+   ${makeRow(['Type', 'Source', 'Target', 'Name', 'Documentation'], true)}
+   ${relationships.map(r => makeRow([r.type, r.source, r.target, r.name, r.documentation])).join('')}
+  </Table>
+ </Worksheet>` : ''}
+
+ ${properties.length ? `
+ <Worksheet ss:Name="Properties">
+  <Table>
+   <Column ss:Width="160"/>
+   <Column ss:Width="300"/>
+   ${makeRow(['Name', 'Value'], true)}
+   ${properties.map(p => makeRow([p.name, p.value])).join('')}
+  </Table>
+ </Worksheet>` : ''}
+</Workbook>`;
+}
+
+/**
+ * Export a report table as standard CSV.
+ * @param {Object} data - normalized report data
+ * @param {'elements'|'relationships'|'views'|'charts'|'properties'} [table='elements']
+ * @returns {string}
+ */
+export function formatCsv(data, table = 'elements') {
+    switch (table) {
+        case 'views': {
+            const hasCharts = data.views?.some(v => v.charts?.length);
+            const countCol = hasCharts ? 'Charts' : 'Elements';
+            const header = ['ID', 'Name', countCol, 'Documentation'];
+            const rows = (data.views || []).map(v => [
+                v.id,
+                v.name || v.title || v.id,
+                hasCharts ? (v.charts?.length ?? 0) : (v.elements?.length ?? 0),
+                v.documentation || v.notes?.join('; ') || '',
+            ]);
+            return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+        }
+        case 'charts': {
+            const header = ['View ID', 'View Name', 'Chart Title', 'Chart Type'];
+            const rows = (data.views || []).flatMap(v => (v.charts || []).map(c => [
+                v.id,
+                v.name || v.title || v.id,
+                c.title || '',
+                c.chartType || '',
+            ]));
+            return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+        }
+        case 'relationships': {
+            const header = ['ID', 'Type', 'Source', 'Target', 'Name', 'Documentation'];
+            const rows = (data.relationships || []).map(r => [r.id, r.type, r.source, r.target, r.name, r.documentation]);
+            return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+        }
+        case 'properties': {
+            const header = ['Name', 'Value'];
+            const rows = (data.properties || []).map(p => [p.name, p.value]);
+            return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+        }
+        case 'elements':
+        default: {
+            if (!data.elements?.length && data.views?.length) {
+                return formatCsv(data, 'views');
+            }
+            const header = ['ID', 'Name', 'Type', 'Layer', 'Documentation'];
+            const rows = (data.elements || []).map(e => [e.id, e.name, e.type, e.layer, e.documentation]);
+            return [header, ...rows].map(r => r.map(escapeCsv).join(',')).join('\r\n');
+        }
+    }
+}
+
+/**
+ * Render report data as GitHub-flavored Markdown.
+ * @param {Object} data - normalized report data
+ * @returns {string}
+ */
+export function formatMarkdown(data) {
+    const { model, views = [], elements = [], relationships = [], properties = [], date = new Date().toISOString().split('T')[0] } = data;
+    const modelName = model?.name || data.title || 'Report';
+    const modelVersion = model?.version || data.version || '1.0';
+    const modelDoc = model?.documentation || data.documentation || '';
+    const lines = [];
+
+    lines.push(`# ${modelName}`);
+    lines.push(`*Generated: ${date} | Version: ${modelVersion}*`);
+    lines.push('');
+
+    if (modelDoc) {
+        lines.push(modelDoc);
+        lines.push('');
+    }
+
+    if (properties.length) {
+        lines.push('## Properties');
+        lines.push('');
+        lines.push('| Property | Value |');
+        lines.push('| --- | --- |');
+        for (const p of properties) {
+            lines.push(`| ${p.name} | ${p.value} |`);
+        }
+        lines.push('');
+    }
+
+    if (views.length) {
+        lines.push(`## Views (${views.length})`);
+        lines.push('');
+        for (const v of views) {
+            const vName = v.name || v.title || v.id;
+            lines.push(`### ${vName}`);
+            if (v.notes?.length) {
+                lines.push('');
+                for (const note of v.notes) {
+                    lines.push(`- ${note}`);
+                }
+            } else if (v.documentation) {
+                lines.push('');
+                lines.push(v.documentation);
+            }
+            if (v.charts?.length) {
+                lines.push('');
+                for (const c of v.charts) {
+                    lines.push(`#### ${c.title || 'Chart'}`);
+                    if (c.chartType) lines.push(`*Type: ${c.chartType}*`);
+                    lines.push('');
+                }
+            }
+            if (v.elements?.length) {
+                lines.push('');
+                lines.push('| Element | Type |');
+                lines.push('| --- | --- |');
+                for (const e of v.elements) {
+                    lines.push(`| ${e.name} | ${e.type} |`);
+                }
+            }
+            lines.push('');
+        }
+    }
+
+    if (elements.length) {
+        lines.push(`## Elements (${elements.length})`);
+        lines.push('');
+        lines.push('| Name | Type | Layer | Documentation |');
+        lines.push('| --- | --- | --- | --- |');
+        for (const e of elements) {
+            lines.push(`| **${e.name}** | ${e.type} | ${e.layer} | ${e.documentation.replace(/\n/g, ' ')} |`);
+        }
+        lines.push('');
+    }
+
+    if (relationships.length) {
+        lines.push(`## Relationships (${relationships.length})`);
+        lines.push('');
+        lines.push('| Type | Source | Target | Name |');
+        lines.push('| --- | --- | --- | --- |');
+        for (const r of relationships) {
+            lines.push(`| ${r.type} | ${r.source} | ${r.target} | ${r.name} |`);
+        }
+        lines.push('');
+    }
+
+    return lines.join('\n');
+}

package/src/charting/templates/C4BoundaryTemplate.js

@@ -0,0 +1,34 @@
+import { C4Template } from './C4Template.js';
+
+/** C4BoundaryTemplate — An enterprise, system, or container boundary grouping elements in C4 model. */
+export class C4BoundaryTemplate extends C4Template {
+    static isContainer = true;
+    static defaults = {
+        width: 440,
+        height: 260,
+        fillColor: 'none',
+        strokeColor: '#707070',
+        strokeWidth: 2,
+        textColor: '#334155',
+    };
+
+    _initState(name, options = {}) {
+        super._initState(name, options);
+        this.boundaryType = options.boundaryType ?? 'System';
+    }
+
+    get cornerRadius() { return 6; }
+    get isBoundary() { return true; }
+    get c4Tag() { return `[${this.boundaryType} Boundary]`; }
+
+    paint(extra = {}) {
+        return super.paint({ 'stroke-dasharray': '6,4', ...extra });
+    }
+
+    serialize() {
+        return {
+            ...super.serialize(),
+            ...(this.boundaryType ? { boundaryType: this.boundaryType } : {}),
+        };
+    }
+}

package/src/charting/templates/C4ComponentTemplate.js

@@ -0,0 +1,30 @@
+import { C4Template } from './C4Template.js';
+import { svgEl } from './svg.js';
+
+/** C4ComponentTemplate — A controller, service, or modular component within a container. */
+export class C4ComponentTemplate extends C4Template {
+    static defaults = {
+        width: 160,
+        height: 100,
+        fillColor: '#85bbf0',
+        strokeColor: '#5d82a8',
+        strokeWidth: 2,
+        textColor: '#000000',
+    };
+
+    get cornerRadius() { return 0; }
+
+    get c4Tag() {
+        return this.technology ? `[Component: ${this.technology}]` : '[Component]';
+    }
+
+    shapeElements(doc) {
+        const ix = this.right - 22, iy = this.top + 8;
+        const icon = [
+            svgEl('rect', this.paint({ x: ix, y: iy, width: 14, height: 16, 'stroke-width': 1 }), doc),
+            svgEl('rect', this.paint({ x: ix - 4, y: iy + 3, width: 8, height: 4, 'stroke-width': 1 }), doc),
+            svgEl('rect', this.paint({ x: ix - 4, y: iy + 9, width: 8, height: 4, 'stroke-width': 1 }), doc),
+        ];
+        return [...super.shapeElements(doc), ...icon];
+    }
+}

package/src/charting/templates/C4ContainerTemplate.js

@@ -0,0 +1,49 @@
+import { C4Template } from './C4Template.js';
+import { svgEl } from './svg.js';
+
+/** C4ContainerTemplate — An application, service, web app, or data store in C4 model. */
+export class C4ContainerTemplate extends C4Template {
+    static defaults = {
+        width: 180,
+        height: 120,
+        fillColor: '#438dd5',
+        strokeColor: '#2e6295',
+        strokeWidth: 2,
+        textColor: '#ffffff',
+    };
+
+    _initState(name, options = {}) {
+        super._initState(name, options);
+        this.containerType = options.containerType ?? 'application';
+    }
+
+    get cornerRadius() { return 8; }
+
+    get c4Tag() {
+        if (this.technology) return `[Container: ${this.technology}]`;
+        return this.containerType === 'database' ? '[Container: Database]' : '[Container]';
+    }
+
+    shapeElements(doc) {
+        const elements = super.shapeElements(doc);
+        if (this.containerType === 'database') {
+            const ix = this.right - 24, iy = this.top + 10;
+            const w = 14, h = 16;
+            const stroke = { stroke: '#ffffff', 'stroke-width': 1.5, fill: 'none', 'stroke-opacity': 0.9 };
+            // Database cylinder icon (top ellipse, middle body, bottom curve)
+            elements.push(
+                svgEl('ellipse', { cx: ix + w / 2, cy: iy + 3, rx: w / 2, ry: 2.5, ...stroke }, doc),
+                svgEl('path', { d: `M ${ix} ${iy + 3} V ${iy + h} C ${ix} ${iy + h + 2.5}, ${ix + w} ${iy + h + 2.5}, ${ix + w} ${iy + h} V ${iy + 3}`, ...stroke }, doc),
+                svgEl('path', { d: `M ${ix} ${iy + 8} C ${ix} ${iy + 10.5}, ${ix + w} ${iy + 10.5}, ${ix + w} ${iy + 8}`, ...stroke }, doc),
+            );
+        }
+        return elements;
+    }
+
+    serialize() {
+        return {
+            ...super.serialize(),
+            ...(this.containerType && this.containerType !== 'application' ? { containerType: this.containerType } : {}),
+        };
+    }
+}

package/src/charting/templates/C4PersonTemplate.js

@@ -0,0 +1,35 @@
+import { C4Template } from './C4Template.js';
+import { svgEl } from './svg.js';
+
+/** C4PersonTemplate — A human user, actor, persona, or stakeholder in C4 model. */
+export class C4PersonTemplate extends C4Template {
+    static defaults = {
+        width: 160,
+        height: 120,
+        fillColor: '#08427b',
+        strokeColor: '#052e56',
+        strokeWidth: 2,
+        textColor: '#ffffff',
+    };
+
+    get cornerRadius() { return 10; }
+    get c4Tag() { return '[Person]'; }
+    get hasTopIcon() { return true; }
+
+    shapeElements(doc) {
+        const elements = super.shapeElements(doc);
+        const cx = this.x;
+        const cy = this.top + 18;
+        const headR = 8;
+        const head = svgEl('circle', {
+            cx, cy: cy - 2, r: headR, fill: '#ffffff', 'fill-opacity': '0.9', stroke: 'none',
+        }, doc);
+        const shoulderY = cy + headR + 1;
+        const shoulders = svgEl('path', {
+            d: `M ${cx - 12} ${shoulderY + 10} C ${cx - 12} ${shoulderY + 2}, ${cx - 6} ${shoulderY}, ${cx} ${shoulderY} C ${cx + 6} ${shoulderY}, ${cx + 12} ${shoulderY + 2}, ${cx + 12} ${shoulderY + 10} Z`,
+            fill: '#ffffff', 'fill-opacity': '0.9', stroke: 'none',
+        }, doc);
+        elements.push(head, shoulders);
+        return elements;
+    }
+}

package/src/charting/templates/C4SystemTemplate.js

@@ -0,0 +1,32 @@
+import { C4Template } from './C4Template.js';
+
+/** C4SystemTemplate — Software System in focus or external software system. */
+export class C4SystemTemplate extends C4Template {
+    static defaults = {
+        width: 180,
+        height: 120,
+        fillColor: '#1168bd',
+        strokeColor: '#0b4884',
+        strokeWidth: 2,
+        textColor: '#ffffff',
+    };
+
+    _initState(name, options = {}) {
+        super._initState(name, options);
+        this.external = Boolean(options.external);
+        if (this.external && !options.fillColor) {
+            this.fillColor = '#999999';
+            this.strokeColor = '#666666';
+        }
+    }
+
+    get cornerRadius() { return 8; }
+    get c4Tag() { return this.external ? '[Software System: External]' : '[Software System]'; }
+
+    serialize() {
+        return {
+            ...super.serialize(),
+            ...(this.external ? { external: true } : {}),
+        };
+    }
+}