@peter.prib/renderengine 0.15.2 → 0.15.3

package/src/charting/modelTree/NavigatorModel.js

@@ -1,7 +1,11 @@
 import { treeLayerOf } from './ModelTreePanel.js';
+import { DocumentGraph } from '../graph/GraphSource.js';
 
 /**
- * NavigatorModel — pure, DOM-free graph traversal and navigation engine for an ArchiMate model.
+ * NavigatorModel — pure, DOM-free graph traversal and navigation engine for any graph: an ArchiMate
+ * model, or any GraphSource (`DocumentGraph` for a `{ nodes, edges }` graph document — see
+ * `NavigatorModel.forGraph`). It reads the graph only through `getElement`, `relationshipsFor`,
+ * `viewsContaining` and `layerOf` (see `GraphSource` for why).
  *
  * Allows exploring relationships step-by-step from any focused root element to arbitrary depth,
  * with cycle detection, navigation history (back/forward), direction filters, path-finding
@@ -9,12 +13,17 @@ import { treeLayerOf } from './ModelTreePanel.js';
  */
 export class NavigatorModel {
     /**
-     * @param {ArchimateModel} model
+     * @param {ArchimateModel|import('../graph/GraphSource.js').GraphSource} model
      * @param {Object} [options]
      * @param {string} [options.rootId] - Initial focused element id
      * @param {'both'|'outgoing'|'incoming'} [options.direction='both']
      * @param {Iterable<string>} [options.allowedKinds] - Optional relationship kinds to include
      */
+    /** A navigator over a graph document (`{ nodes, edges }`): the same walker, through a DocumentGraph. */
+    static forGraph(doc, options) {
+        return new NavigatorModel(new DocumentGraph(doc), options);
+    }
+
     constructor(model, { rootId = null, direction = 'both', allowedKinds = null } = {}) {
         this.model = model;
         this.direction = direction;
@@ -39,6 +48,11 @@ export class NavigatorModel {
         return () => this._listeners.delete(listener);
     }
 
+    /** An element's layer: the graph's own answer, or ArchiMate's (an ArchimateModel has none of its own). */
+    layerOf(element) {
+        return typeof this.model.layerOf === 'function' ? this.model.layerOf(element) : treeLayerOf(element);
+    }
+
     _notify() {
         for (const listener of this._listeners) {
             try {
@@ -209,7 +223,7 @@ export class NavigatorModel {
                 direction: dir,
                 relationship: rel,
                 element: otherElement,
-                layer: treeLayerOf(otherElement),
+                layer: this.layerOf(otherElement),
                 cycle,
                 expanded,
                 children,
@@ -227,8 +241,8 @@ export class NavigatorModel {
         return {
             pathKey,
             element,
-            layer: treeLayerOf(element),
-            views: this.model.viewsContaining(element.id),
+            layer: this.layerOf(element),
+            views: typeof this.model.viewsContaining === 'function' ? this.model.viewsContaining(element.id) : [],
             incoming: incomingBranches,
             outgoing: outgoingBranches,
         };
@@ -355,7 +369,7 @@ export class NavigatorModel {
         const depths = new Map([[elementId, 0]]);
         const elementsMap = new Map();
         const relsMap = new Map();
-        const layers = new Set([treeLayerOf(root)]);
+        const layers = new Set([this.layerOf(root)]);
 
         const queue = [{ id: elementId, depth: 0 }];
 
@@ -376,7 +390,7 @@ export class NavigatorModel {
                     if (!depths.has(target.id)) {
                         depths.set(target.id, nextDepth);
                         elementsMap.set(target.id, target);
-                        layers.add(treeLayerOf(target));
+                        layers.add(this.layerOf(target));
                         queue.push({ id: target.id, depth: nextDepth });
                     }
                 }
@@ -392,7 +406,7 @@ export class NavigatorModel {
                     if (!depths.has(source.id)) {
                         depths.set(source.id, nextDepth);
                         elementsMap.set(source.id, source);
-                        layers.add(treeLayerOf(source));
+                        layers.add(this.layerOf(source));
                         queue.push({ id: source.id, depth: nextDepth });
                     }
                 }

package/src/charting/report/TemplatedReport.js

@@ -1,11 +1,24 @@
 /**
- * TemplatedReport — template-driven report generator (PDF, Word, Excel, Markdown, HTML).
+ * TemplatedReport — template-driven report generator (HTML, Word, Excel, CSV, Markdown).
  *
  * Implements Archi's Jasper-style reporting with customizable templates,
  * placeholders for model metadata, views, view diagrams (SVG/PNG), elements,
  * relationships, and properties.
  */
 
+import {
+    escapeHtml,
+    escapeXml,
+    escapeCsv,
+    formatHtml,
+    formatWord,
+    formatExcel,
+    formatCsv,
+    formatMarkdown,
+} from './reportWriters.js';
+
+export { escapeHtml, escapeXml, escapeCsv };
+
 /** Built-in template templates */
 export const REPORT_TEMPLATES = Object.freeze({
     EXECUTIVE: 'executive',
@@ -13,27 +26,6 @@ export const REPORT_TEMPLATES = Object.freeze({
     TABULAR: 'tabular',
 });
 
-function escapeHtml(str) {
-    return String(str ?? '')
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-function escapeXml(str) {
-    return escapeHtml(str);
-}
-
-function escapeCsv(val) {
-    const s = String(val ?? '');
-    if (/[",\n\r]/.test(s)) {
-        return `"${s.replace(/"/g, '""')}"`;
-    }
-    return s;
-}
-
 export class TemplatedReport {
     /**
      * @param {Object|ViewSetModel|ArchimateModel} model
@@ -50,14 +42,14 @@ export class TemplatedReport {
     }
 
     get title() {
-        return this._title || this.model.name || this.model.title || 'Model Report';
+        return this._title || this.model?.name || this.model?.title || 'Model Report';
     }
 
     /**
      * Normalized model data extracted for reporting.
      */
     extractData() {
-        const m = this.model;
+        const m = this.model || {};
         const title = this.title;
         const doc = m.documentation || '';
 
@@ -149,6 +141,9 @@ export class TemplatedReport {
                 version: m.version || '1.0',
                 properties,
             },
+            title,
+            documentation: doc,
+            version: m.version || '1.0',
             views,
             elements: normElements,
             relationships: normRelationships,
@@ -163,279 +158,24 @@ export class TemplatedReport {
      * @param {boolean} [options.printable=true]
      * @returns {string}
      */
-    toHtml({ printable = true } = {}) {
-        const data = this.extractData();
-        const { model, views, elements, relationships, properties, date } = data;
-
-        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(model.name)}</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; }
-.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; }
-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(model.name)}</h1>
-<div class="meta">Generated: ${escapeHtml(date)} | Version: ${escapeHtml(model.version)}</div>
-${model.documentation ? `<div class="doc">${escapeHtml(model.documentation)}</div>` : ''}
-
-${properties.length ? `
-<h2>Model 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>` : ''}
-
-<h2>Views (${views.length})</h2>
-${views.map(v => `
-<div class="no-break">
-<h3>${escapeHtml(v.name)}</h3>
-${v.documentation ? `<div class="doc">${escapeHtml(v.documentation)}</div>` : ''}
-${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>`;
+    toHtml(options = {}) {
+        return formatHtml(this.extractData(), options);
     }
 
     /**
-     * Render the report as Microsoft Word-compatible HTML document (.doc / .docx compatible).
-     * Word opens this with native tables, headings, and formatting intact.
+     * Render the report as Microsoft Word-compatible document (.doc).
      * @returns {string}
      */
     toWord() {
-        const data = this.extractData();
-        const { model, views, elements, relationships, properties, date } = data;
-
-        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(model.name)}</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; }
-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(model.name)}</h1>
-<p><strong>Generated:</strong> ${escapeXml(date)} | <strong>Version:</strong> ${escapeXml(model.version)}</p>
-${model.documentation ? `<p class="doc">${escapeXml(model.documentation)}</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>` : ''}
-
-<h2>Views</h2>
-${views.map(v => `
-<div class="page-break"></div>
-<h3>${escapeXml(v.name)}</h3>
-${v.documentation ? `<p class="doc">${escapeXml(v.documentation)}</p>` : ''}
-${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>`;
+        return formatWord(this.extractData());
     }
 
     /**
-     * Render the report as Microsoft Excel XML Spreadsheet 2003 format (.xml / .xls).
-     * Opens in Excel with native worksheets: Model, Views, Elements, Relationships, Properties.
+     * Render the report as Microsoft Excel XML Spreadsheet 2003 format (.xml).
      * @returns {string}
      */
     toExcel() {
-        const data = this.extractData();
-        const { model, views, elements, relationships, properties, date } = data;
-
-        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>`;
-
-        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(model.name)}</Data></Cell>
-   </Row>
-   ${makeRow(['Item', 'Details'], true)}
-   ${makeRow(['Title', model.name])}
-   ${makeRow(['Version', model.version])}
-   ${makeRow(['Generated', date])}
-   ${makeRow(['Documentation', model.documentation])}
-   ${makeRow(['Total Views', String(views.length)])}
-   ${makeRow(['Total Elements', String(elements.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', 'Elements Count', 'Documentation'], true)}
-   ${views.map(v => makeRow([v.name, String(v.elements.length), v.documentation])).join('')}
-  </Table>
- </Worksheet>
-
- <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>
-
- <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>`;
+        return formatExcel(this.extractData());
     }
 
     /**
@@ -444,30 +184,7 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
      * @returns {string}
      */
     toCsv(table = 'elements') {
-        const data = this.extractData();
-        switch (table) {
-            case 'views': {
-                const header = ['ID', 'Name', 'Elements', 'Documentation'];
-                const rows = data.views.map(v => [v.id, v.name, v.elements.length, v.documentation]);
-                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: {
-                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');
-            }
-        }
+        return formatCsv(this.extractData(), table);
     }
 
     /**
@@ -475,73 +192,6 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
      * @returns {string}
      */
     toMarkdown() {
-        const data = this.extractData();
-        const { model, views, elements, relationships, properties, date } = data;
-        const lines = [];
-
-        lines.push(`# ${model.name}`);
-        lines.push(`*Generated: ${date} | Version: ${model.version}*`);
-        lines.push('');
-
-        if (model.documentation) {
-            lines.push(model.documentation);
-            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) {
-                lines.push(`### ${v.name}`);
-                if (v.documentation) {
-                    lines.push('');
-                    lines.push(v.documentation);
-                }
-                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');
+        return formatMarkdown(this.extractData());
     }
 }

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