@peter.prib/renderengine 0.15.0 → 0.15.1

package/dist/renderengine-workspace.umd.js

@@ -69500,6 +69500,255 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
         }
     }
 
+    /**
+     * ViewsPart — a set of chart views in one part: a tab per view, each a grid of charts and its notes.
+     *
+     * A view is plain data — `{ id, title, charts: [{ title, chartType, data, options? }], notes? }`,
+     * `chartType` a CHART_CATALOG key — so anything that can say what it wants drawn can be shown here
+     * without a page of its own: a report, an analysis, a monitoring summary. The Decision Workbench
+     * (`DecisionWorkbenchPart`) is one; any other producer of views is another, by spec or by subclass.
+     *
+     * Why it is one part, not a perspective per view. A part drops into any layout — a tab, a split, a
+     * dashboard cell, a WorkArea document — beside whatever else the host shows; perspectives belong to
+     * the whole workspace, so a producer that registered its own would take over the host's. Inside, it
+     * composes the parts that already exist (`ChartPart` per chart, `ListPart` for notes) rather than
+     * drawing anything itself, so a chart here behaves as a chart anywhere: same sizing, same redraw.
+     *
+     * Why subclasses read files, not a reader in the spec. A spec stays JSON (the workspace serializes
+     * it), so a function cannot ride in it. The base reads a document that already is `{ views: [...] }`;
+     * a subclass that reads something else overrides `viewsFrom(doc)` (and `accept`, `controls()`,
+     * `controlValues()` for options its reader takes) — one subclass per kind of document.
+     *
+     * Spec: `{ views?, open?: boolean, empty?: string }`. With `open` (default true) a toolbar opens a
+     * file (`accept`); `read(doc)` does the same from code. The views shown are kept in `spec.views`,
+     * so a serialized workspace comes back showing them.
+     */
+
+    /** Chart categories drawn as small tiles across the top of a view rather than as full charts. */
+    const TILE_CATEGORIES = new Set(['gauge']);
+
+    class ViewsPart extends Part {
+        static type = 'views';
+
+        /** File types the toolbar offers to open. */
+        static accept = '.json';
+
+        constructor(spec = {}) {
+            super(spec);
+            this.views = spec.views ?? [];
+            this.allowOpen = spec.open !== false;
+            this.empty = spec.empty ?? 'Open a file to show its views.';
+            this.active = this.views[0]?.id ?? null;
+            /** The chart and notes parts made for the views shown, torn down when they change. @private */
+            this._children = [];
+        }
+
+        /**
+         * Where each view's charts go: tiles (gauge-like charts) share the top row, the rest take half a
+         * row each, or the whole row when a view has one; notes go underneath. Pure: the layout rule,
+         * kept apart from the DOM so it can be read and tested on its own.
+         * @returns {Array<{id, title, items: Array<{kind: 'chart'|'notes', index?: number, span: number, tile?: boolean}>}>}
+         */
+        static layout(views) {
+            return views.map((view) => {
+                const charts = view.charts ?? [];
+                const isTile = (chart) => TILE_CATEGORIES.has(CHART_CATALOG.find((c) => c.key === chart.chartType)?.category);
+                const tiles = charts.filter(isTile).length;
+                const others = charts.length - tiles;
+                const items = charts.map((chart, index) => (isTile(chart)
+                    ? { kind: 'chart', index, tile: true, span: Math.max(1, Math.floor(12 / tiles)) }
+                    : { kind: 'chart', index, tile: false, span: others === 1 ? 12 : 6 }));
+                if (view.notes?.length) items.push({ kind: 'notes', span: 12 });
+                return { id: view.id, title: view.title ?? view.id, items };
+            });
+        }
+
+        /** The views a document holds. The base takes `{ views: [...] }`; a subclass reads its own kind of document. */
+        viewsFrom(doc) {
+            if (!doc || !Array.isArray(doc.views)) throw new Error('Not a views document: it has no views list');
+            return doc.views;
+        }
+
+        /** Extra toolbar fields a subclass's reader takes (element specs). */
+        controls() { return []; }
+
+        /** The values of those fields, for `viewsFrom`. */
+        controlValues() { return {}; }
+
+        /** Show the views a document holds; a document that cannot be read is said so, and the views shown stay. */
+        read(doc) {
+            let views;
+            try {
+                views = this.viewsFrom(doc);
+            } catch (err) {
+                this.say(err.message);
+                return false;
+            }
+            this.document = doc;
+            this.show(views);
+            return true;
+        }
+
+        /** Show `views`, replacing those shown. */
+        show(views) {
+            this.views = views;
+            this.spec.views = views;
+            if (!views.some((v) => v.id === this.active)) this.active = views[0]?.id ?? null;
+            if (this.mounted) this.renderViews();
+        }
+
+        say(text) {
+            if (this._message) this._message.textContent = text;
+        }
+
+        render() {
+            Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%', minHeight: '0' });
+            if (this.allowOpen) {
+                this.container.appendChild(el({
+                    cls: 'ws-views-toolbar',
+                    style: { display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap', padding: '6px 8px' },
+                    children: [
+                        { tag: 'label', children: [
+                            { tag: 'span', text: 'Open ' },
+                            { tag: 'input', attrs: { type: 'file', accept: this.constructor.accept }, on: { change: (e) => this.openFile(e.target) } },
+                        ]},
+                        ...this.controls(),
+                        { tag: 'span', cls: 'ws-views-message', style: { opacity: '0.75' }, ref: (n) => { this._message = n; } },
+                    ],
+                }));
+            }
+            this._tabs = this.container.appendChild(el({ cls: 'ws-views-tabs', style: { display: 'flex', gap: '4px', padding: '0 8px' } }));
+            this._body = this.container.appendChild(el({ cls: 'ws-views-body', style: { flex: '1 1 auto', minHeight: '0', overflow: 'auto' } }));
+            this.onDispose(() => this.clearChildren());
+            this.renderViews();
+        }
+
+        async openFile(input) {
+            const file = input.files?.[0];
+            if (!file) return;
+            let doc;
+            try {
+                doc = JSON.parse(await file.text());
+            } catch (err) {
+                this.say(`Not JSON: ${err.message}`);
+                return;
+            }
+            this.read(doc);
+        }
+
+        /** Re-read the document shown, as when a control's value changes. */
+        reread() {
+            if (this.document !== undefined) this.read(this.document);
+        }
+
+        clearChildren() {
+            for (const part of this._children) part.dispose?.();
+            this._children = [];
+        }
+
+        renderViews() {
+            this.clearChildren();
+            this._tabs.textContent = '';
+            this._body.textContent = '';
+            if (!this.views.length) {
+                this._body.appendChild(el({ tag: 'p', cls: 'ws-views-empty', style: { padding: '12px', opacity: '0.75' }, text: this.empty }));
+                return;
+            }
+            for (const view of ViewsPart.layout(this.views)) {
+                this._tabs.appendChild(el({
+                    tag: 'button', attrs: { type: 'button' }, cls: view.id === this.active ? 'ws-views-tab active' : 'ws-views-tab',
+                    style: { fontWeight: view.id === this.active ? '600' : '400' },
+                    text: view.title, on: { click: () => { this.active = view.id; this.renderViews(); } },
+                }));
+            }
+            const view = this.views.find((v) => v.id === this.active);
+            const placed = ViewsPart.layout([view])[0];
+            const grid = this._body.appendChild(el({
+                cls: 'ws-views-grid',
+                style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '8px', padding: '8px' },
+            }));
+            for (const item of placed.items) {
+                // A cell is a part host, as a layout's pane is (`.ws-part-host`: flex, the part fills it), so a
+                // chart here sizes to its cell exactly as it would to a pane; only the cell's height is its own.
+                const cell = grid.appendChild(el({
+                    cls: 'ws-views-cell ws-part-host',
+                    style: { gridColumn: `span ${item.span}`, height: item.kind === 'chart' ? (item.tile ? '130px' : '380px') : 'auto', minWidth: '0' },
+                }));
+                const part = item.kind === 'chart'
+                    ? new ChartPart(this.chartSpec(view, item.index))
+                    : new ListPart({ id: `${this.id}-${view.id}-notes`, title: 'Notes', channel: `${this.id}:notes:${view.id}`, items: view.notes });
+                part.mount(cell, this.ctx);
+                this._children.push(part);
+            }
+        }
+
+        /** The ChartPart spec for a view's chart. */
+        chartSpec(view, index) {
+            const chart = view.charts[index];
+            return {
+                id: `${this.id}-${view.id}-${index}`, title: chart.title, chartType: chart.chartType, rendererType: 'svg',
+                options: { ...chart.options, title: chart.title, data: chart.data },
+            };
+        }
+    }
+
+    /**
+     * DecisionWorkbenchPart — the Decision Workbench as one part: a SADIS workbench document
+     * (decisionengine's `{ kind: 'sadis-workbench', report, plan?, before? }`) shown as its views.
+     *
+     * Everything about showing views — tabs, the chart grid, notes, opening a file, being embeddable in
+     * any layout — is `ViewsPart`'s; this adds only what differs for this kind of document: reading it
+     * through `DecisionWorkbench` (which turns decisionengine's JSON into views), and the calendar its
+     * delivery plan is drawn on (when period 1 starts, how many days a period is). That split is why it
+     * is a subclass: a second kind of document is a second subclass, not a flag on one class.
+     *
+     * Spec: `ViewsPart`'s, plus `document` (a workbench document to show at once), `start` and
+     * `periodDays` (the calendar; default the report's as-of time and 14 days).
+     */
+
+    class DecisionWorkbenchPart extends ViewsPart {
+        static type = 'decision-workbench';
+
+        constructor(spec = {}) {
+            super({ empty: 'Open a workbench file: decisionengine\'s SADIS Explorer downloads one ("Download for the Decision Workbench").', ...spec });
+            this.calendar = { start: spec.start, periodDays: spec.periodDays ?? 14 };
+            if (spec.document !== undefined) this.read(spec.document);
+        }
+
+        viewsFrom(doc) {
+            return DecisionWorkbench.from(doc, this.controlValues()).views().map((view) => view.toJSON());
+        }
+
+        controls() {
+            const field = { padding: '2px 4px', font: 'inherit' };
+            return [
+                { tag: 'label', children: [
+                    { tag: 'span', text: 'Period 1 starts ' },
+                    { tag: 'input', attrs: { type: 'date', value: this.calendar.start ?? '' }, style: field,
+                      on: { change: (e) => { this.calendar.start = e.target.value || undefined; this.reread(); } } },
+                ]},
+                { tag: 'label', children: [
+                    { tag: 'span', text: 'Days per period ' },
+                    { tag: 'input', attrs: { type: 'number', min: '1', value: String(this.calendar.periodDays) }, style: { ...field, width: '4em' },
+                      on: { change: (e) => { this.calendar.periodDays = Number(e.target.value) || 14; this.reread(); } } },
+                ]},
+            ];
+        }
+
+        controlValues() {
+            return { start: this.calendar.start, periodDays: this.calendar.periodDays };
+        }
+
+        read(doc) {
+            const ok = super.read(doc);
+            if (ok) {
+                const asOf = doc.report.asOf?.businessTime?.slice(0, 10);
+                this.say(`${doc.report.config}: ${doc.report.entries.length} candidates${asOf ? `, as of ${asOf}` : ''}`);
+            }
+            return ok;
+        }
+    }
+
     /** Each page's own title, as it was before any model's file name went in front of it (several models share one page). */
     const PAGE_TITLES = new WeakMap();
 
@@ -72764,6 +73013,7 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
     exports.DataStoreTemplate = DataStoreTemplate;
     exports.DataType = DataType;
     exports.DecisionWorkbench = DecisionWorkbench;
+    exports.DecisionWorkbenchPart = DecisionWorkbenchPart;
     exports.DeleteEdgeCommand = DeleteEdgeCommand;
     exports.DeleteFromModelCommand = DeleteFromModelCommand;
     exports.DeleteWaypointCommand = DeleteWaypointCommand;
@@ -73011,6 +73261,7 @@ ${cells.map(c => `     <Cell${isHeader ? ' ss:StyleID="Header"' : ''}><Data ss:T
     exports.ViewSetModel = ViewSetModel;
     exports.ViewTabStrip = ViewTabStrip;
     exports.ViewpointRule = ViewpointRule;
+    exports.ViewsPart = ViewsPart;
     exports.WORKBENCH_VIEWS = WORKBENCH_VIEWS;
     exports.WORKSPACE_CSS = WORKSPACE_CSS;
     exports.WORKSPACE_SCHEMA_VERSION = WORKSPACE_SCHEMA_VERSION;

package/documentation/REFERENCE.md

@@ -2640,6 +2640,8 @@ end. Waypoints and style are kept, and that end's side pin resets to automatic.
 empty canvas, or on the shape at the other end, cancels. This is one undo step
 (`ReconnectEdgeCommand`).
 
+**Container nesting and hierarchy.** Shapes such as `PackageTemplate`, `SwimlaneTemplate`, and `BoxTemplate` are containers (`isContainer = true`). When an element is dropped inside a container (`nestsOnDrop(parentId, childId)`), it is parented via `NestElementCommand` (setting `child.parentId`). Moving a container recursively moves all nested descendants (`moversFor(templateId)`). Containers can automatically expand their bounds to fit their contents via `fitNesting(changes, { padding })`. Ancestor loops are prevented (`isAncestor(childId, parentId)`).
+
 **Line style levels.** A line's style resolves through `EdgeStyleCascade`: the line itself,
 then each level in `editor.edgeStyleLevels` (most specific first, `[{ key, label, style }]`),
 then the schema default. A value a level doesn't set is inherited. `EDGE_STYLE_PROPERTIES` is the
@@ -3235,8 +3237,20 @@ saying why. The delivery plan's periods are put on a calendar: period 1 starts a
 the report's as-of business time, else today), each `periodDays` long (default 14). Each view is a
 `WorkbenchView` subclass (`WORKBENCH_VIEWS`); a new view is a new subclass.
 
-`examples/decision-workbench.html` is the page: open a workbench file and each view is a workspace
-perspective, its charts in `ChartPart`s and its notes in a list.
+In a workspace the workbench is one part, `DecisionWorkbenchPart` (type `decision-workbench`), a
+`ViewsPart` that reads workbench documents: a tab per view, its charts and notes, a toolbar that opens a
+file and sets the calendar.
+
+```js
+const { registerBuiltinParts, ChartPart, DecisionWorkbenchPart } = RenderEngineWorkspace;
+ws.registerParts([ChartPart, DecisionWorkbenchPart]);
+ws.addParts([{ id: 'workbench', type: 'decision-workbench', document /* optional */, start, periodDays }]);
+```
+
+`ViewsPart` (type `views`) is the general part underneath: any `{ views: [{ id, title, charts, notes }] }`
+document, or views given in its spec, shown the same way — see `documentation/WORKSPACE_ARCHITECTURE.md`
+for why it is one part and why a new kind of document is a subclass. `examples/decision-workbench.html`
+is a thin host of the workbench part (it is in the package).
 
 ## Navigation menus
 
@@ -3349,6 +3363,160 @@ const bar = RenderEngine.askBar(document.getElementById('ask-bar'), {
 - **For a host:** `bar.setSuggest(fn)` swaps where suggestions come from, for example when the user picks another model or ontology. `bar.setValue(text)` sets the question without suggesting. `bar.focus()` puts the cursor in the question, and `bar.destroy()` removes the bar and cancels any pending close.
 - **Accessible:** the input is a WAI-ARIA combobox over a `listbox` of `option`s. `aria-expanded` follows the popup and `aria-activedescendant` follows the active item. Each bar's list has its own id, so several bars can share a page.
 
+## Navigator & Relationship Explorer (`NavigatorModel` / `NavigatorPanel`)
+
+`NavigatorModel` (`src/charting/modelTree/NavigatorModel.js`) and `NavigatorPanel` (`src/charting/modelTree/NavigatorPanel.js`) provide interactive graph traversal and relationship exploration for models. It enables navigating through connected elements step-by-step to arbitrary depth with cycle detection, navigation history (back/forward), direction filters, path-finding, and transitive impact analysis.
+
+```javascript
+import { NavigatorModel, NavigatorPanel, buildNavigatorPanel } from '@peter.prib/renderengine';
+
+// 1. Create a pure, DOM-free traversal model:
+const nav = new NavigatorModel(archimateModel, {
+    rootId: 'billing-app',
+    direction: 'both', // 'both' | 'outgoing' | 'incoming'
+    allowedKinds: ['serving-relationship', 'composition-relationship'],
+});
+
+nav.focus('crm-app');
+nav.canGoBack;     // true
+nav.back();        // returns to 'billing-app'
+
+// Find all paths between two elements (up to maxDepth):
+const paths = nav.findPaths('billing-app', 'ledger-db', 5);
+
+// Trace transitive downstream or upstream impact:
+const impact = nav.findImpact('billing-app', { maxDepth: 4, direction: 'outgoing' });
+
+// 2. Build or render the Navigator UI panel:
+const panel = new NavigatorPanel({
+    model: archimateModel,
+    navigator: nav,
+    onSelectElement: (elId) => editor.selectElement(elId),
+    onOpenView: (viewId) => editor.openView(viewId),
+});
+```
+
+- **DOM-free engine:** `NavigatorModel` operates completely without DOM dependencies, making it directly testable in Node.js and reusable across diverse UI shells.
+- **Cycle detection and path tracking:** Tracks visited nodes along active branches to prevent infinite recursion in cyclic relationship graphs, annotating cycles in tree outputs.
+- **Directional filters:** Traversal can follow outgoing relationships, incoming relationships, or bidirectional connections (`setDirection('outgoing' | 'incoming' | 'both')`).
+- **History stack:** Maintains full forward and backward navigation stacks (`focus(id)`, `back()`, `forward()`, `canGoBack`, `canGoForward`).
+- **Impact and path finding:** Built-in BFS/DFS algorithms find connecting pathways (`findPaths(fromId, toId, maxDepth)`) and downstream dependency cascades (`findImpact(elementId, { maxDepth, direction })`).
+
+## Templated Reports (`TemplatedReport`)
+
+`TemplatedReport` (`src/charting/report/TemplatedReport.js`) provides multi-format, template-driven report generation matching Archi's Jasper-style reporting capabilities. It extracts model metadata, viewpoints, diagrams (SVG/PNG), elements, properties, and relationships into document formats.
+
+```javascript
+import { TemplatedReport, REPORT_TEMPLATES } from '@peter.prib/renderengine';
+
+const report = new TemplatedReport(archimateModel, {
+    title: 'Enterprise Architecture Overview',
+    template: REPORT_TEMPLATES.DETAILED, // 'executive' | 'detailed' | 'tabular'
+    pictures: { 'view-1': 'data:image/svg+xml;utf8,...' },
+});
+
+// Generate various formats:
+const htmlDoc = report.toHtml({ printable: true }); // PDF-ready HTML with @media print CSS
+const wordDoc = report.toWord();                    // Microsoft Word (.doc HTML format)
+const excelXml = report.toExcel();                  // Excel SpreadsheetML (.xml)
+const csvData = report.toCsv('elements');           // RFC 4180 CSV ('elements' | 'relationships')
+const markdown = report.toMarkdown();               // GitHub-flavored Markdown
+```
+
+- **Output formats:** Generates printable PDF-ready HTML with page-break controls, Word-compatible HTML documents (`.doc`), Excel SpreadsheetML workbooks (`.xml`) with styled headers and filters, RFC 4180 CSV tables, and GitHub-flavored Markdown (`.md`).
+- **Built-in templates:** Includes `REPORT_TEMPLATES.EXECUTIVE` (high-level summary with diagrams), `REPORT_TEMPLATES.DETAILED` (full catalog of views, elements, relationships, and user properties), and `REPORT_TEMPLATES.TABULAR` (matrix-focused presentation).
+- **Embedded diagram pictures:** Accepts rendered SVG data URIs or base64 raster images in the `pictures` dictionary keyed by view ID to embed high-resolution diagrams directly into generated documents.
+
+## Sketch Views & Palettes (`SketchView` / `sketchBoxKinds`)
+
+`SketchView` (`src/charting/diagrams/SketchView.js`) implements freeform sketching views (corresponding to Archi's `archimate:SketchModel`). It supports sticky notes, stick-figure actors, groups, freehand lines, and customizable palettes on grid or lined canvas backgrounds.
+
+```javascript
+import { SketchView, SKETCH_BOX_KINDS, DEFAULT_SKETCH_PALETTE } from '@peter.prib/renderengine';
+
+const sketch = new SketchView(model, {
+    name: 'Brainstorming Session',
+    background: SketchView.BACKGROUNDS.GRID, // NONE (0), GRID (1), LINES (2)
+    palette: DEFAULT_SKETCH_PALETTE,
+});
+
+// Custom palette management:
+sketch.addPaletteItem({ id: 'custom-note', name: 'Critical Note', fill: '#ffcccc' });
+const jsonConfig = sketch.exportPalette();
+sketch.importPalette(jsonConfig);
+```
+
+- **Sketch box types:** Native support for sticky notes (`sketch-model-sticky`) and stick figures (`sketch-model-actor`) via `SKETCH_BOX_KINDS`.
+- **Background styles:** Configurable canvas backgrounds including plain (`NONE`), grid paper (`GRID`), and lined notebook paper (`LINES`).
+- **Palette customization:** Dynamically add, remove, reset, export, and import custom sticky colors and presets as JSON configurations.
+- **Archi XML compatibility:** Full bi-directional fidelity with `.archimate` sketch model XML representations (`archimate:SketchModel`, `archimate:Sticky`, `archimate:Actor`).
+
+## Cross-Model Data Lineage & ArchiMate Linking
+
+`ModelMapping` (`src/charting/datamodel/ModelMapping.js`), `DataLineage` (`src/charting/datamodel/DataLineage.js`), and `ArchimateDataLink` (`src/charting/datamodel/ArchimateDataLink.js`) extend the data modeling subsystem (`src/charting/datamodel/`) with enterprise cross-model data lineage and architectural traceability aligned with DMBOK2 and TOGAF.
+
+```javascript
+import { DataModel, ModelMapping, DataLineage, ArchimateDataLink } from '@peter.prib/renderengine';
+
+// 1. Cross-model mapping with attribute-level transformation rules:
+const mapping = new ModelMapping({
+    name: 'Core Banking to EDW',
+    sourceModel: 'OLTP-Core',
+    targetModel: 'EDW-Analytical',
+    entityMappings: [{ sourceEntityId: 'account', targetEntityId: 'dim_account', rule: 'SCD Type 2' }],
+    attributeMappings: [
+        { sourceEntityId: 'account', sourceAttribute: 'bal', targetEntityId: 'dim_account', targetAttribute: 'current_balance', transformation: 'ROUND(bal, 2)' }
+    ],
+});
+
+dataModel.addModelMapping(mapping);
+
+// 2. Trace end-to-end lineage and downstream impact:
+const lineage = dataModel.crossModelLineage();
+const upstreamHops = lineage.traceLineage('dim_account', 'current_balance'); // Upstream provenance
+const downstreamImpact = lineage.traceImpact('account', 'bal');              // Downstream impact
+
+// 3. Connect Data Model entities to ArchiMate enterprise architecture:
+const link = new ArchimateDataLink({
+    dataModelEntityId: 'account',
+    level: 'conceptual',
+    archimateElementId: 'business-obj-account',
+    archimateType: 'business-object',
+});
+dataModel.addArchimateLink(link);
+```
+
+- **DMBOK2 integration:** Enables tracking provenance across conceptual, logical, and physical models, including disparate source and target data stores.
+- **Multi-hop traversal:** Traces multi-hop transformations forwards (`traceImpact`) and backwards (`traceLineage`) across complex data pipelines.
+- **ArchiMate alignment:** Bridges data model entities to ArchiMate Business Objects (Business Layer), Data Objects (Application Layer), and Artifacts (Technology Layer).
+
+## Multi-View Chart Dashboards (`ViewsPart` / `DecisionWorkbenchPart`)
+
+`ViewsPart` (`src/workspace/parts/ViewsPart.js`) and `DecisionWorkbenchPart` (`src/workspace/parts/DecisionWorkbenchPart.js`) render multi-tab dashboards of coordinated charts and note cards inside the `<ws-workspace>` application shell.
+
+```javascript
+// Declarative view specification for a workspace layout node:
+const layout = {
+    type: 'part',
+    part: 'views',
+    views: [
+        {
+            id: 'executive-summary',
+            title: 'Executive Summary',
+            charts: [
+                { title: 'System Health', chartType: 'gauge dial', data: [{ score: 94 }], options: { min: 0, max: 100 } },
+                { title: 'Revenue Trend', chartType: 'area', data: [...] }
+            ],
+            notes: ['All latency thresholds met', 'Quarterly SLA target achieved']
+        }
+    ]
+};
+```
+
+- **Self-contained workbench part:** Embeds cleanly into tabs, split panes, or WorkArea documents alongside diagram modellers and data tables without hijacking global workspace perspective state.
+- **Catalog-driven composition:** Composes existing `ChartPart`s driven by `CHART_CATALOG` keys alongside `ListPart` note cards. Small gauge charts automatically tile along the top banner.
+- **Decision Workbench:** Specialized `DecisionWorkbenchPart` reads SADIS analysis reports and optimization plans (`viewsFrom(doc)`), projecting trade-off curves, capability radars, and decision matrices directly into tabs.
+
 ## Where to go next
 
 - **`ARCHITECTURE.md`** — module layout, the chart-type catalog mechanics, how to add a new chart type.

package/examples/decision-workbench.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><title>Decision Workbench</title></head>
+<body style="margin:0;height:100vh;display:flex;font:14px system-ui">
+<!--
+  The Decision Workbench: decisionengine's SADIS recommendation, drawn. A thin host, as data-model.html is:
+  everything it does is DecisionWorkbenchPart's (reading a workbench file, the calendar) and ViewsPart's
+  (a tab per view, its charts and notes, opening a file). Open a workbench file — decisionengine's SADIS
+  Explorer downloads one ("Download for the Decision Workbench"). Runs straight off disk.
+-->
+<script src="../dist/renderengine-workspace.umd.js"></script>
+<script>
+    const { el, registerBuiltinParts, ChartPart, DecisionWorkbenchPart } = window.RenderEngineWorkspace;
+    const ws = document.body.appendChild(el({
+        tag: 'ws-workspace',
+        attrs: { label: 'Decision Workbench', theme: 'light' },
+        style: { flex: '1 1 auto', minHeight: '0' },
+    }));
+    registerBuiltinParts(ws);
+    ws.registerParts([ChartPart, DecisionWorkbenchPart]);
+    ws.addParts([{ id: 'workbench', type: 'decision-workbench', title: 'Decision Workbench' }]);
+    ws.registerPerspective('Decision Workbench', { type: 'part', partId: 'workbench' });
+    ws.activatePerspective('Decision Workbench');
+</script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "ArchiMate modeller, data modeller, diagram editor, OLAP cube & pivot chart studio, and 50+ type chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",
@@ -23,6 +23,7 @@
     "examples/archimate.html",
     "examples/diagram-editor.html",
     "examples/data-model.html",
+    "examples/decision-workbench.html",
     "README.md",
     "documentation/REFERENCE.md",
     "LICENSE"

package/src/workspace/index.js

@@ -56,6 +56,9 @@ export {
     LIGHT_THEME, DARK_THEME, MIDNIGHT_THEME, SEPIA_THEME,
 } from './themes.js';
 export { ChartPart } from './parts/ChartPart.js';
+// Chart views in one part (they use ChartPart, so they sit with it, outside BUILTIN_PARTS).
+export { ViewsPart } from './parts/ViewsPart.js';
+export { DecisionWorkbenchPart } from './parts/DecisionWorkbenchPart.js';
 export { DataModelPart } from './parts/DataModelPart.js';
 export { RequirementsPart } from './parts/RequirementsPart.js';
 export { ModelHosted } from './parts/ModelHosted.js';

package/src/workspace/parts/DecisionWorkbenchPart.js

@@ -0,0 +1,58 @@
+/**
+ * DecisionWorkbenchPart — the Decision Workbench as one part: a SADIS workbench document
+ * (decisionengine's `{ kind: 'sadis-workbench', report, plan?, before? }`) shown as its views.
+ *
+ * Everything about showing views — tabs, the chart grid, notes, opening a file, being embeddable in
+ * any layout — is `ViewsPart`'s; this adds only what differs for this kind of document: reading it
+ * through `DecisionWorkbench` (which turns decisionengine's JSON into views), and the calendar its
+ * delivery plan is drawn on (when period 1 starts, how many days a period is). That split is why it
+ * is a subclass: a second kind of document is a second subclass, not a flag on one class.
+ *
+ * Spec: `ViewsPart`'s, plus `document` (a workbench document to show at once), `start` and
+ * `periodDays` (the calendar; default the report's as-of time and 14 days).
+ */
+import { ViewsPart } from './ViewsPart.js';
+import { DecisionWorkbench } from '../../charting/decision/DecisionWorkbench.js';
+
+export class DecisionWorkbenchPart extends ViewsPart {
+    static type = 'decision-workbench';
+
+    constructor(spec = {}) {
+        super({ empty: 'Open a workbench file: decisionengine\'s SADIS Explorer downloads one ("Download for the Decision Workbench").', ...spec });
+        this.calendar = { start: spec.start, periodDays: spec.periodDays ?? 14 };
+        if (spec.document !== undefined) this.read(spec.document);
+    }
+
+    viewsFrom(doc) {
+        return DecisionWorkbench.from(doc, this.controlValues()).views().map((view) => view.toJSON());
+    }
+
+    controls() {
+        const field = { padding: '2px 4px', font: 'inherit' };
+        return [
+            { tag: 'label', children: [
+                { tag: 'span', text: 'Period 1 starts ' },
+                { tag: 'input', attrs: { type: 'date', value: this.calendar.start ?? '' }, style: field,
+                  on: { change: (e) => { this.calendar.start = e.target.value || undefined; this.reread(); } } },
+            ]},
+            { tag: 'label', children: [
+                { tag: 'span', text: 'Days per period ' },
+                { tag: 'input', attrs: { type: 'number', min: '1', value: String(this.calendar.periodDays) }, style: { ...field, width: '4em' },
+                  on: { change: (e) => { this.calendar.periodDays = Number(e.target.value) || 14; this.reread(); } } },
+            ]},
+        ];
+    }
+
+    controlValues() {
+        return { start: this.calendar.start, periodDays: this.calendar.periodDays };
+    }
+
+    read(doc) {
+        const ok = super.read(doc);
+        if (ok) {
+            const asOf = doc.report.asOf?.businessTime?.slice(0, 10);
+            this.say(`${doc.report.config}: ${doc.report.entries.length} candidates${asOf ? `, as of ${asOf}` : ''}`);
+        }
+        return ok;
+    }
+}

package/src/workspace/parts/ViewsPart.js

@@ -0,0 +1,196 @@
+/**
+ * ViewsPart — a set of chart views in one part: a tab per view, each a grid of charts and its notes.
+ *
+ * A view is plain data — `{ id, title, charts: [{ title, chartType, data, options? }], notes? }`,
+ * `chartType` a CHART_CATALOG key — so anything that can say what it wants drawn can be shown here
+ * without a page of its own: a report, an analysis, a monitoring summary. The Decision Workbench
+ * (`DecisionWorkbenchPart`) is one; any other producer of views is another, by spec or by subclass.
+ *
+ * Why it is one part, not a perspective per view. A part drops into any layout — a tab, a split, a
+ * dashboard cell, a WorkArea document — beside whatever else the host shows; perspectives belong to
+ * the whole workspace, so a producer that registered its own would take over the host's. Inside, it
+ * composes the parts that already exist (`ChartPart` per chart, `ListPart` for notes) rather than
+ * drawing anything itself, so a chart here behaves as a chart anywhere: same sizing, same redraw.
+ *
+ * Why subclasses read files, not a reader in the spec. A spec stays JSON (the workspace serializes
+ * it), so a function cannot ride in it. The base reads a document that already is `{ views: [...] }`;
+ * a subclass that reads something else overrides `viewsFrom(doc)` (and `accept`, `controls()`,
+ * `controlValues()` for options its reader takes) — one subclass per kind of document.
+ *
+ * Spec: `{ views?, open?: boolean, empty?: string }`. With `open` (default true) a toolbar opens a
+ * file (`accept`); `read(doc)` does the same from code. The views shown are kept in `spec.views`,
+ * so a serialized workspace comes back showing them.
+ */
+import { Part } from '../Part.js';
+import { el } from '../dom.js';
+import { ChartPart } from './ChartPart.js';
+import { ListPart } from './ListPart.js';
+import { CHART_CATALOG } from '../../chartCatalog.js';
+
+/** Chart categories drawn as small tiles across the top of a view rather than as full charts. */
+const TILE_CATEGORIES = new Set(['gauge']);
+
+export class ViewsPart extends Part {
+    static type = 'views';
+
+    /** File types the toolbar offers to open. */
+    static accept = '.json';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.views = spec.views ?? [];
+        this.allowOpen = spec.open !== false;
+        this.empty = spec.empty ?? 'Open a file to show its views.';
+        this.active = this.views[0]?.id ?? null;
+        /** The chart and notes parts made for the views shown, torn down when they change. @private */
+        this._children = [];
+    }
+
+    /**
+     * Where each view's charts go: tiles (gauge-like charts) share the top row, the rest take half a
+     * row each, or the whole row when a view has one; notes go underneath. Pure: the layout rule,
+     * kept apart from the DOM so it can be read and tested on its own.
+     * @returns {Array<{id, title, items: Array<{kind: 'chart'|'notes', index?: number, span: number, tile?: boolean}>}>}
+     */
+    static layout(views) {
+        return views.map((view) => {
+            const charts = view.charts ?? [];
+            const isTile = (chart) => TILE_CATEGORIES.has(CHART_CATALOG.find((c) => c.key === chart.chartType)?.category);
+            const tiles = charts.filter(isTile).length;
+            const others = charts.length - tiles;
+            const items = charts.map((chart, index) => (isTile(chart)
+                ? { kind: 'chart', index, tile: true, span: Math.max(1, Math.floor(12 / tiles)) }
+                : { kind: 'chart', index, tile: false, span: others === 1 ? 12 : 6 }));
+            if (view.notes?.length) items.push({ kind: 'notes', span: 12 });
+            return { id: view.id, title: view.title ?? view.id, items };
+        });
+    }
+
+    /** The views a document holds. The base takes `{ views: [...] }`; a subclass reads its own kind of document. */
+    viewsFrom(doc) {
+        if (!doc || !Array.isArray(doc.views)) throw new Error('Not a views document: it has no views list');
+        return doc.views;
+    }
+
+    /** Extra toolbar fields a subclass's reader takes (element specs). */
+    controls() { return []; }
+
+    /** The values of those fields, for `viewsFrom`. */
+    controlValues() { return {}; }
+
+    /** Show the views a document holds; a document that cannot be read is said so, and the views shown stay. */
+    read(doc) {
+        let views;
+        try {
+            views = this.viewsFrom(doc);
+        } catch (err) {
+            this.say(err.message);
+            return false;
+        }
+        this.document = doc;
+        this.show(views);
+        return true;
+    }
+
+    /** Show `views`, replacing those shown. */
+    show(views) {
+        this.views = views;
+        this.spec.views = views;
+        if (!views.some((v) => v.id === this.active)) this.active = views[0]?.id ?? null;
+        if (this.mounted) this.renderViews();
+    }
+
+    say(text) {
+        if (this._message) this._message.textContent = text;
+    }
+
+    render() {
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', height: '100%', minHeight: '0' });
+        if (this.allowOpen) {
+            this.container.appendChild(el({
+                cls: 'ws-views-toolbar',
+                style: { display: 'flex', gap: '12px', alignItems: 'center', flexWrap: 'wrap', padding: '6px 8px' },
+                children: [
+                    { tag: 'label', children: [
+                        { tag: 'span', text: 'Open ' },
+                        { tag: 'input', attrs: { type: 'file', accept: this.constructor.accept }, on: { change: (e) => this.openFile(e.target) } },
+                    ]},
+                    ...this.controls(),
+                    { tag: 'span', cls: 'ws-views-message', style: { opacity: '0.75' }, ref: (n) => { this._message = n; } },
+                ],
+            }));
+        }
+        this._tabs = this.container.appendChild(el({ cls: 'ws-views-tabs', style: { display: 'flex', gap: '4px', padding: '0 8px' } }));
+        this._body = this.container.appendChild(el({ cls: 'ws-views-body', style: { flex: '1 1 auto', minHeight: '0', overflow: 'auto' } }));
+        this.onDispose(() => this.clearChildren());
+        this.renderViews();
+    }
+
+    async openFile(input) {
+        const file = input.files?.[0];
+        if (!file) return;
+        let doc;
+        try {
+            doc = JSON.parse(await file.text());
+        } catch (err) {
+            this.say(`Not JSON: ${err.message}`);
+            return;
+        }
+        this.read(doc);
+    }
+
+    /** Re-read the document shown, as when a control's value changes. */
+    reread() {
+        if (this.document !== undefined) this.read(this.document);
+    }
+
+    clearChildren() {
+        for (const part of this._children) part.dispose?.();
+        this._children = [];
+    }
+
+    renderViews() {
+        this.clearChildren();
+        this._tabs.textContent = '';
+        this._body.textContent = '';
+        if (!this.views.length) {
+            this._body.appendChild(el({ tag: 'p', cls: 'ws-views-empty', style: { padding: '12px', opacity: '0.75' }, text: this.empty }));
+            return;
+        }
+        for (const view of ViewsPart.layout(this.views)) {
+            this._tabs.appendChild(el({
+                tag: 'button', attrs: { type: 'button' }, cls: view.id === this.active ? 'ws-views-tab active' : 'ws-views-tab',
+                style: { fontWeight: view.id === this.active ? '600' : '400' },
+                text: view.title, on: { click: () => { this.active = view.id; this.renderViews(); } },
+            }));
+        }
+        const view = this.views.find((v) => v.id === this.active);
+        const placed = ViewsPart.layout([view])[0];
+        const grid = this._body.appendChild(el({
+            cls: 'ws-views-grid',
+            style: { display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: '8px', padding: '8px' },
+        }));
+        for (const item of placed.items) {
+            // A cell is a part host, as a layout's pane is (`.ws-part-host`: flex, the part fills it), so a
+            // chart here sizes to its cell exactly as it would to a pane; only the cell's height is its own.
+            const cell = grid.appendChild(el({
+                cls: 'ws-views-cell ws-part-host',
+                style: { gridColumn: `span ${item.span}`, height: item.kind === 'chart' ? (item.tile ? '130px' : '380px') : 'auto', minWidth: '0' },
+            }));
+            const part = item.kind === 'chart'
+                ? new ChartPart(this.chartSpec(view, item.index))
+                : new ListPart({ id: `${this.id}-${view.id}-notes`, title: 'Notes', channel: `${this.id}:notes:${view.id}`, items: view.notes });
+            part.mount(cell, this.ctx);
+            this._children.push(part);
+        }
+    }
+
+    /** The ChartPart spec for a view's chart. */
+    chartSpec(view, index) {
+        const chart = view.charts[index];
+        return {
+            id: `${this.id}-${view.id}-${index}`, title: chart.title, chartType: chart.chartType, rendererType: 'svg',
+            options: { ...chart.options, title: chart.title, data: chart.data },
+        };
+    }
+}