@peter.prib/renderengine 0.15.2 → 0.16.0

package/src/charting/report/ViewsReport.js

@@ -0,0 +1,118 @@
+/**
+ * ViewsReport — a templated report for any set of chart views (ViewsPart, DecisionWorkbench).
+ *
+ * Normalizes views containing charts (SVGs, titles, data) and notes/documentation into
+ * the report structure used by formatHtml, formatWord, formatExcel, formatCsv, and formatMarkdown.
+ */
+
+import { TemplatedReport, REPORT_TEMPLATES } from './TemplatedReport.js';
+
+export class ViewsReport extends TemplatedReport {
+    /**
+     * @param {Array<Object>|Object} views - array of view objects or document holding a views list
+     * @param {Object} [options]
+     * @param {string} [options.title] - Report title (default 'Views Report')
+     * @param {string} [options.documentation] - Overall documentation/summary
+     * @param {string} [options.version='1.0'] - Version
+     * @param {Array<Object>} [options.properties=[]] - Overall properties
+     * @param {Object<string, string>} [options.pictures={}] - SVG markup mapped by viewId, viewId:index, or chart title
+     * @param {string} [options.template] - executive | detailed | tabular
+     */
+    constructor(views = [], options = {}) {
+        let viewList = [];
+        let docTitle = null;
+        let docDocumentation = null;
+        let docProperties = [];
+
+        if (Array.isArray(views)) {
+            viewList = views;
+        } else if (views && typeof views === 'object') {
+            viewList = Array.isArray(views.views) ? views.views : (typeof views.views === 'function' ? views.views() : []);
+            docTitle = views.title || views.name || null;
+            docDocumentation = views.documentation || views.notes || null;
+            docProperties = Array.isArray(views.properties) ? views.properties : [];
+        }
+
+        super(null, {
+            title: options.title || docTitle || 'Views Report',
+            pictures: options.pictures || {},
+            template: options.template || REPORT_TEMPLATES.DETAILED,
+        });
+
+        this.rawViews = viewList;
+        this.options = options;
+        this.documentation = options.documentation ?? (typeof docDocumentation === 'string' ? docDocumentation : '') ?? '';
+        this.version = options.version ?? '1.0';
+        this.properties = options.properties ?? docProperties ?? [];
+    }
+
+    get title() {
+        return this._title || 'Views Report';
+    }
+
+    /**
+     * Extract normalized report data from views.
+     */
+    extractData() {
+        const title = this.title;
+        const views = this.rawViews.map((v, vIndex) => {
+            const vId = v.id || `view-${vIndex + 1}`;
+            const vName = v.title || v.name || vId;
+            const notes = Array.isArray(v.notes) ? v.notes : (v.notes ? [String(v.notes)] : []);
+            const doc = v.documentation || (notes.length ? notes.join('\n\n') : '');
+
+            const charts = (v.charts || []).map((c, cIndex) => {
+                const picKey = `${vId}:${cIndex}`;
+                const pic = this.pictures[picKey]
+                    || this.pictures[c.title]
+                    || this.pictures[c.id]
+                    || (cIndex === 0 ? this.pictures[vId] : null)
+                    || c.picture
+                    || c.svg
+                    || '';
+                return {
+                    id: c.id || `${vId}-chart-${cIndex + 1}`,
+                    title: c.title || `Chart ${cIndex + 1}`,
+                    chartType: c.chartType || '',
+                    picture: pic,
+                    data: c.data,
+                };
+            });
+
+            // Single picture if charts pictures exist or view picture
+            const chartPictures = charts.map(c => c.picture).filter(Boolean);
+            const primaryPic = chartPictures.length
+                ? chartPictures.join('\n')
+                : (this.pictures[vId] || v.picture || (typeof v.toSvg === 'function' ? v.toSvg() : ''));
+
+            return {
+                id: vId,
+                name: vName,
+                documentation: doc,
+                notes,
+                picture: primaryPic,
+                charts,
+                elements: Array.isArray(v.elements) ? v.elements : [],
+                properties: Array.isArray(v.properties) ? v.properties : [],
+            };
+        });
+
+        return {
+            model: {
+                id: 'views-report',
+                name: title,
+                documentation: this.documentation,
+                version: this.version,
+                properties: this.properties,
+            },
+            title,
+            documentation: this.documentation,
+            version: this.version,
+            views,
+            elements: [],
+            relationships: [],
+            properties: this.properties,
+            date: new Date().toISOString().split('T')[0],
+        };
+    }
+}

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];
+    }
+}