@peter.prib/renderengine 0.0.0-stage → 0.1.0

package/src/charting/charts/StackedBarChart3DOrbit.js

@@ -0,0 +1,58 @@
+import { ColorPalette } from '../ColorPalette.js';
+import { Chart3D } from '../Chart3D.js';
+
+/**
+ * StackedBarChart3DOrbit — stacked-segment version of BarChart3DOrbit.
+ */
+export class StackedBarChart3DOrbit extends Chart3D {
+    static chartType = 'stackedBar3dOrbit';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const { colors, title } = options;
+        const { cx, cy, toScreen, box } = this._viewport();
+        const { x: bx, y: by, width, height } = box;
+
+        const { xLabels, zLabels, xIndex, zIndex } = this.bucketGrid(data);
+        const stackMax = Math.max(...data.map(d => d.values.reduce((s, v) => s + v, 0))) || 1;
+        const palette = new ColorPalette(colors);
+
+        const cellW = 2 / Math.max(1, xLabels.length);
+        const cellD = 2 / Math.max(1, zLabels.length);
+        const barFrac = 0.7;
+
+        if (title) {
+            this.renderer.text(title, cx, by - 20, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        const bars = data.map(d => {
+            const xi = xIndex.get(d.x), zi = zIndex.get(d.z);
+            const xCenter = -1 + cellW * (xi + 0.5);
+            const zCenter = -1 + cellD * (zi + 0.5);
+            const hw = cellW * barFrac / 2, hd = cellD * barFrac / 2;
+            const stackTotal = d.values.reduce((s, v) => s + v, 0) / stackMax;
+            const { depth } = this.project(xCenter, stackTotal / 2, zCenter);
+            return { d, x0: xCenter - hw, x1: xCenter + hw, z0: zCenter - hd, z1: zCenter + hd, depth };
+        }).sort((a, b) => b.depth - a.depth);
+
+        for (const bar of bars) {
+            let yCursor = 0;
+            for (let j = 0; j < bar.d.values.length; j++) {
+                const segHeight = bar.d.values[j] / stackMax;
+                const y0 = yCursor, y1 = yCursor + segHeight;
+                yCursor = y1;
+                this.drawBox(this.renderer, bar.x0, bar.x1, y0, y1, bar.z0, bar.z1, palette.colorAt(j), toScreen);
+            }
+        }
+
+        const maxSegments = Math.max(...data.map(d => d.values.length));
+        let legY = by + 10;
+        const legX = bx + width - 100;
+        for (let j = 0; j < maxSegments; j++) {
+            this.renderer.circle(legX + 5, legY, 5, palette.colorAt(j), null, {});
+            this.renderer.text(`Series ${j + 1}`, legX + 16, legY + 4, { textAnchor: 'start', fontSize: '11px', fill: '#374151' });
+            legY += 18;
+        }
+    }
+}

package/src/charting/charts/StreamGraphChart.js

@@ -0,0 +1,131 @@
+import { Chart } from '../Chart.js';
+import { ColorPalette } from '../ColorPalette.js';
+import { Legend } from '../Legend.js';
+
+/**
+ * StreamGraphChart — a stacked area chart with a centered (silhouette) baseline,
+ * producing the flowing, river-like shape commonly called a stream graph.
+ *
+ * Data: Array<{name: string, values: Array<{label: string, value: number}>}>
+ * Options:
+ *   - title, xAxisLabel, yAxisLabel
+ *   - colors: string[] palette
+ *   - legend: boolean (default true)
+ *   - smooth: boolean (default true) — cubic-bezier smoothing between points
+ *   - tension: number (default 0.5)
+ */
+export class StreamGraphChart extends Chart {
+    static chartType = 'streamGraph';
+
+    /** Build a smooth closed area path from top points then bottom points (reversed). */
+    static areaPath(topPts, bottomPts, smooth = true, tension = 0.5) {
+        if (topPts.length === 0) return '';
+        if (!smooth || topPts.length < 3) {
+            return 'M' + topPts.map(p => `${p.x},${p.y}`).join(' L')
+                + ' L' + [...bottomPts].reverse().map(p => `${p.x},${p.y}`).join(' L') + ' Z';
+        }
+
+        const line = (pts) => {
+            let d = `M${pts[0].x},${pts[0].y}`;
+            for (let i = 0; i < pts.length - 1; i++) {
+                const p0 = pts[Math.max(0, i - 1)];
+                const p1 = pts[i];
+                const p2 = pts[i + 1];
+                const p3 = pts[Math.min(pts.length - 1, i + 2)];
+                const cp1x = p1.x + (p2.x - p0.x) * (tension / 6);
+                const cp1y = p1.y + (p2.y - p0.y) * (tension / 6);
+                const cp2x = p2.x - (p3.x - p1.x) * (tension / 6);
+                const cp2y = p2.y - (p3.y - p1.y) * (tension / 6);
+                d += ` C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+            }
+            return d;
+        };
+
+        return line(topPts) + ' L' + [...bottomPts].reverse().map(p => `${p.x},${p.y}`).join(' L') + ' Z';
+    }
+
+    _render() {
+        const data = this.data || [];
+        const options = this.options || {};
+        const box = this.renderer?.width
+            ? { x: 60, y: 40, width: this.renderer.width - 100, height: this.renderer.height - 100 }
+            : { x: 60, y: 40, width: 700, height: 300 };
+
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            colors, title, xAxisLabel, yAxisLabel, legend: showLegend = true,
+            smooth = true, tension = 0.5,
+        } = options;
+
+        const isMultiline = Array.isArray(data[0]?.values);
+        const series = isMultiline ? data : [{ name: 'default', values: data }];
+        const pointCount = series[0]?.values?.length ?? 0;
+        if (pointCount === 0) return;
+
+        const pointMargin = pointCount > 1 ? width / (pointCount - 1) : width;
+        const palette = new ColorPalette(colors);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        // Compute totals per point and max extent for scaling.
+        const totals = new Array(pointCount).fill(0);
+        series.forEach(s => {
+            s.values.forEach((d, i) => { totals[i] += d.value; });
+        });
+        const maxExtent = Math.max(...totals.map(v => Math.abs(v))) || 1;
+
+        // Centered (silhouette) baseline: each layer floats so the stack is
+        // vertically centered at every x-position.
+        const bands = series.map(() => new Array(pointCount));
+        for (let i = 0; i < pointCount; i++) {
+            const total = totals[i];
+            let y0 = -total / 2;
+            series.forEach((s, si) => {
+                const v = s.values[i].value;
+                bands[si][i] = { y0, y1: y0 + v };
+                y0 += v;
+            });
+        }
+
+        // Title / labels.
+        if (title) {
+            this.renderer.text(title, x + width / 2, y - 16, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+        if (xAxisLabel) {
+            this.renderer.text(xAxisLabel, x + width / 2, y + height + 36, { textAnchor: 'middle', fontSize: '12px', fill: '#666' });
+        }
+        if (yAxisLabel) {
+            this.renderer.text(yAxisLabel, y + height / 2, x - 45, { textAnchor: 'middle', fontSize: '12px', fill: '#666', transform: 'rotate(-90,' + (x - 45) + ',' + (y + height / 2) + ')' });
+        }
+
+        const toY = (v) => y + height / 2 - (v / maxExtent) * (height / 2);
+
+        // Draw layers bottom-up so overlaps look correct.
+        series.forEach((s, si) => {
+            const color = palette.colorAt(si);
+            const topPts = bands[si].map((b, i) => ({ x: x + i * pointMargin, y: toY(b.y1) }));
+            const bottomPts = bands[si].map((b, i) => ({ x: x + i * pointMargin, y: toY(b.y0) }));
+            const path = StreamGraphChart.areaPath(topPts, bottomPts, smooth, tension);
+            const { r, g, b: bl } = palette.hexToRgb(color);
+            this.renderer.path(path, `rgba(${r},${g},${bl},0.75)`, { color: color, width: 1 }, { tooltip: s.name });
+        });
+
+        // X-axis labels.
+        series[0].values.forEach((d, i) => {
+            this.renderer.text(d.label, x + i * pointMargin, y + height + 16, { textAnchor, fontSize: '10px', fill: '#666' });
+        });
+
+        // Center zero line.
+        this.renderer.path(`M${x},${y + height / 2} L${x + width},${y + height / 2}`, 'none', { color: '#ccc', width: 1, dasharray: '4 3' });
+
+        // Baseline axes.
+        this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: '#999', width: 1 });
+
+        if (isMultiline && showLegend) {
+            const legendItems = series.map((s, i) => ({ label: s.name, color: palette.colorAt(i) }));
+            new Legend({
+                items: legendItems, x: x + width + 20, y,
+                itemHeight: 20, markerSize: 12,
+            }).draw(this.renderer);
+        }
+    }
+}

package/src/charting/charts/SunburstChart.js

@@ -0,0 +1,57 @@
+import { ShapePaths } from '../ShapePaths.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+
+/**
+ * SunburstChart — the same hierarchical composition a treemap shows as nested
+ * rectangles, drawn instead as nested rings (one ring per depth), each ring's
+ * arcs sized by value like a pie chart.
+ */
+export class SunburstChart extends HierarchyChart {
+    static chartType = 'sunburst';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const w = this.renderer?.width ?? 640;
+        const h = this.renderer?.height ?? 400;
+        const {
+            cx = w / 2, cy = h / 2 + 10,
+            radius = Math.min(w, h) / 2 - 60,
+            innerRadiusRatio = 0,
+            title,
+        } = options;
+
+        if (title) {
+            this.renderer.text(title, cx, cy - radius - 20, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        const maxDepth = Math.max(1, ...data.map(n => Hierarchy.depth(n)));
+        const innerHole = radius * innerRadiusRatio;
+        const ringWidth = (radius - innerHole) / maxDepth;
+        const layout = Hierarchy.sunburstLayout(data, cx, cy, innerHole, ringWidth, -Math.PI / 2, -Math.PI / 2 + Math.PI * 2);
+
+        layout.forEach(entry => {
+            const { node, cx: ecx, cy: ecy, rInner, rOuter, startAngle, endAngle, depth, topAncestor } = entry;
+            const color = this._colorForNode(topAncestor, depth);
+            const textColor = this._textColorForNode(topAncestor, depth);
+
+            const path = ShapePaths.donutSlicePath(ecx, ecy, rOuter, rInner, startAngle, endAngle);
+            this.renderer.path(path, color, { color: '#fff', width: 1 }, {
+                tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+            });
+
+            if (endAngle - startAngle > 0.35) {
+                const midAngle = (startAngle + endAngle) / 2;
+                const midR = (rInner + rOuter) / 2;
+                const labelX = ecx + midR * Math.cos(midAngle);
+                const labelY = ecy + midR * Math.sin(midAngle);
+                const upright = Math.cos(midAngle) >= 0;
+                const rotation = upright ? midAngle : midAngle + Math.PI;
+                this.renderer.text(node.label, labelX, labelY, {
+                    textAnchor: 'middle', verticalAlign: 'middle', fontSize: '9px', fill: textColor, rotation, 'pointer-events': 'none',
+                });
+            }
+        });
+    }
+}

package/src/charting/charts/TreemapChart.js

@@ -0,0 +1,54 @@
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Hierarchy } from '../Hierarchy.js';
+import { HierarchyChart } from './HierarchyChart.js';
+
+/**
+ * TreemapChart — rectangles nested/sized proportional to value (squarified
+ * layout), the standard chart for "composition of a whole across a hierarchy".
+ */
+export class TreemapChart extends HierarchyChart {
+    static chartType = 'treemap';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const { x = box.x, y = box.y, width = box.width, height = box.height, title } = options;
+        const plotBox = { x, y, width, height };
+
+        new ChartLabels({ title }).draw(this.renderer, plotBox);
+
+        const layout = Hierarchy.treemapLayout(data, x, y, width, height, 0, null, TreemapChart.HEADER_H);
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        layout.forEach(entry => {
+            const { node, x: rx, y: ry, width: rw, height: rh, depth, isLeaf, topAncestor } = entry;
+            const color = this._colorForNode(topAncestor, depth);
+            const textColor = this._textColorForNode(topAncestor, depth);
+
+            if (isLeaf) {
+                this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), color, { color: '#fff', width: 1 }, {
+                    tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+                });
+                if (rw > 30 && rh > 14) {
+                    this.renderer.text(node.label, rx + rw / 2, ry + rh / 2, {
+                        textAnchor, verticalAlign: 'middle', fontSize: '10px', fill: textColor, 'pointer-events': 'none',
+                    });
+                }
+            } else {
+                const headerH = Math.min(rh, TreemapChart.HEADER_H);
+                this.renderer.rect(rx, ry, Math.max(0, rw), Math.max(0, rh), 'rgba(0,0,0,0.03)', { color: '#ddd', width: 1 });
+                this.renderer.rect(rx, ry, Math.max(0, rw), headerH, color, null, {
+                    tooltip: `${node.label}: ${this._formatNodeValue(node)}`,
+                });
+                if (rw > 30) {
+                    this.renderer.text(node.label, rx + 4, ry + headerH / 2, {
+                        textAnchor: 'start', verticalAlign: 'middle', fontSize: '9px', fontWeight: 'bold', fill: textColor, 'pointer-events': 'none',
+                    });
+                }
+            }
+        });
+    }
+}
+
+TreemapChart.HEADER_H = 16;

package/src/charting/charts/ViolinChart.js

@@ -0,0 +1,37 @@
+import { Statistics } from '../Statistics.js';
+import { GroupedDistributionChart } from './GroupedDistributionChart.js';
+
+/**
+ * ViolinChart — one mirrored Gaussian-KDE silhouette per group in its own
+ * x-slot, the same per-group layout math as BoxPlotChart (same top-level
+ * data shape too). Unlike BoxPlotChart's single flat `boxColor`, each violin
+ * gets its own palette color: a violin's shape is visually larger/more
+ * prominent than a thin box glyph, so per-group color materially helps
+ * distinguish many holdings at a glance. A thin median tick is drawn for
+ * reference — no outlier dots, since showing the full distribution shape
+ * including tails IS the point of a violin.
+ */
+export class ViolinChart extends GroupedDistributionChart {
+    static chartType = 'violin';
+
+    _renderGlyph(cx, slotWidth, i, d) {
+        const color = this._palette.colorAt(i);
+        const curve = Statistics.kernelDensityEstimate(d.values, { min: this._domain.vMin, max: this._domain.vMax });
+        const maxDensity = Math.max(...curve.map(p => p.density)) || 1;
+        const halfWidth = slotWidth * 0.4;
+
+        // Mirrored silhouette: right edge low-to-high value, then left
+        // edge high-to-low, closing into one filled path — the
+        // standard violin construction.
+        const rightPts = curve.map(p => ({ px: cx + (p.density / maxDensity) * halfWidth, py: this._toY(p.x) }));
+        const leftPts = curve.map(p => ({ px: cx - (p.density / maxDensity) * halfWidth, py: this._toY(p.x) }));
+        const path = 'M' + rightPts.map(p => `${p.px},${p.py}`).join(' L')
+            + ' L' + [...leftPts].reverse().map(p => `${p.px},${p.py}`).join(' L') + ' Z';
+        this.renderer.path(path, color, { color: '#333', width: 1 }, {
+            tooltip: `${d.label}: n=${d.values.length}`,
+        });
+
+        const median = Statistics.quantile([...d.values].sort((a, b) => a - b), 0.5);
+        this.renderer.path(`M${cx - halfWidth},${this._toY(median)} L${cx + halfWidth},${this._toY(median)}`, 'none', { color: '#fff', width: 2 });
+    }
+}

package/src/charting/charts/WaterfallChart.js

@@ -0,0 +1,66 @@
+import { Chart } from '../Chart.js';
+import { ChartBox, ChartLabels } from '../ChartBox.js';
+import { Axis } from '../Axis.js';
+
+/**
+ * WaterfallChart — running-total bars, each floating from the previous
+ * cumulative value to the new one (a "delta" bar), except entries marked
+ * `type:'total'` which draw full-height from zero.
+ */
+export class WaterfallChart extends Chart {
+    static chartType = 'waterfall';
+
+    _render() {
+        const data = this.data;
+        const options = this.options;
+        const box = ChartBox.fromRenderer(this.renderer);
+        const {
+            x = box.x, y = box.y, width = box.width, height = box.height,
+            upColor = '#26a69a', downColor = '#ef5350', totalColor = '#5470c6',
+            title, xAxisLabel, yAxisLabel,
+        } = options;
+        const plotBox = { x, y, width, height };
+
+        let running = 0;
+        const bands = data.map(d => {
+            if (d.type === 'total') {
+                const band = { from: 0, to: d.value, isTotal: true };
+                running = d.value;
+                return band;
+            }
+            const from = running;
+            running += d.value;
+            return { from, to: running, isTotal: false };
+        });
+        const allVals = bands.flatMap(b => [b.from, b.to]);
+        const vMax = Math.max(0, ...allVals);
+        const vMin = Math.min(0, ...allVals);
+        const range = (vMax - vMin) || 1;
+        const toY = (v) => y + height - ((v - vMin) / range) * height;
+        const barWidth = width / data.length * 0.7;
+        const barMargin = width / data.length * 0.3;
+        const textAnchor = this.renderer.centerTextAnchor;
+
+        new ChartLabels({ title, xAxisLabel, yAxisLabel }).draw(this.renderer, plotBox);
+        this.renderer.path(`M${x},${toY(0)} L${x + width},${toY(0)}`, 'none', { color: '#ccc', width: 1 });
+        this.renderer.path(`M${x},${y} L${x},${y + height}`, 'none', { color: 'black', width: 1 });
+
+        for (let i = 0; i < bands.length - 1; i++) {
+            const barX = x + i * (barWidth + barMargin);
+            const nextX = barX + barWidth + barMargin;
+            this.renderer.path(`M${barX + barWidth},${toY(bands[i].to)} L${nextX},${toY(bands[i].to)}`, 'none', { color: '#bbb', width: 1 });
+        }
+
+        data.forEach((d, i) => {
+            const band = bands[i];
+            const barX = x + i * (barWidth + barMargin);
+            const top = toY(Math.max(band.from, band.to));
+            const bottom = toY(Math.min(band.from, band.to));
+            const color = band.isTotal ? totalColor : (band.to >= band.from ? upColor : downColor);
+            this.renderer.rect(barX, top, barWidth, Math.max(1, bottom - top), color, null, {
+                tooltip: `${d.label}: ${band.isTotal ? band.to : (d.value >= 0 ? '+' : '') + d.value} (total: ${Axis.formatValue(band.to)})`,
+            });
+            this.renderer.text(d.label, barX + barWidth / 2, y + height + 20, { textAnchor, fontSize: '10px' });
+        });
+    }
+}

package/src/charting/charts/WordCloudChart.js

@@ -0,0 +1,104 @@
+import { Chart } from '../Chart.js';
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * WordCloudChart — words sized by value and laid out with a simple spiral
+ * placement that avoids overlaps.
+ *
+ * Data: Array<{text: string, value: number}>
+ * Options:
+ *   - title
+ *   - colors: string[] palette
+ *   - minFontSize, maxFontSize
+ *   - fontFamily
+ *   - padding: extra space around each word for collision detection
+ */
+export class WordCloudChart extends Chart {
+    static chartType = 'wordCloud';
+
+    static estimateBox(text, fontSize) {
+        // Approximate width: each glyph ~0.55em; height ~1.1em.
+        const w = text.length * fontSize * 0.55;
+        const h = fontSize * 1.1;
+        return { w, h };
+    }
+
+    _render() {
+        const data = this.data || [];
+        const options = this.options || {};
+        const w = this.renderer?.width ?? 800;
+        const h = this.renderer?.height ?? 400;
+
+        const {
+            x = 40, y = 40,
+            width = w - x - 40,
+            height = h - y - 60,
+            title,
+            colors,
+            minFontSize = 12,
+            maxFontSize = 48,
+            fontFamily = 'sans-serif',
+            padding = 4,
+        } = options;
+
+        const palette = new ColorPalette(colors);
+        const textAnchor = this.renderer.centerTextAnchor;
+        const sorted = [...data].filter(d => d.text && d.value > 0).sort((a, b) => b.value - a.value);
+        if (sorted.length === 0) return;
+
+        const maxValue = sorted[0].value;
+        const minValue = Math.max(1, sorted[sorted.length - 1].value);
+        const valueRange = Math.max(1, maxValue - minValue);
+        const scale = (v) => minFontSize + ((v - minValue) / valueRange) * (maxFontSize - minFontSize);
+
+        const cx = x + width / 2;
+        const cy = y + height / 2;
+        const placed = [];
+
+        if (title) {
+            this.renderer.text(title, x + width / 2, y - 10, { textAnchor: 'middle', fontSize: '18px', fill: '#333' });
+        }
+
+        sorted.forEach((d, i) => {
+            const fontSize = scale(d.value);
+            const box = WordCloudChart.estimateBox(d.text, fontSize);
+            const pos = this._findPosition(cx, cy, box.w, box.h, placed, padding, width, height);
+            if (!pos) return; // Could not place; skip.
+            placed.push({ x: pos.x, y: pos.y, w: box.w, h: box.h });
+            const color = palette.colorAt(i);
+            this.renderer.text(d.text, pos.x, pos.y + fontSize * 0.35, {
+                textAnchor, fontSize: `${fontSize}px`, fill: color, fontFamily,
+                tooltip: `${d.text}: ${d.value}`,
+            });
+        });
+    }
+
+    _findPosition(cx, cy, w, h, placed, padding, maxW, maxH) {
+        const bounds = { x: cx - maxW / 2, y: cy - maxH / 2, w: maxW, h: maxH };
+        // Try center first.
+        const candidates = [{ x: cx, y: cy }];
+        // Spiral outward.
+        const a = 5; // spiral tightness
+        for (let t = 0; t < 2000; t += 0.5) {
+            const r = a * t;
+            const px = cx + r * Math.cos(t);
+            const py = cy + r * Math.sin(t);
+            candidates.push({ x: px, y: py });
+        }
+
+        for (const p of candidates) {
+            const rect = { x: p.x - w / 2 - padding, y: p.y - h / 2 - padding, w: w + padding * 2, h: h + padding * 2 };
+            if (rect.x < bounds.x || rect.y < bounds.y || rect.x + rect.w > bounds.x + bounds.w || rect.y + rect.h > bounds.y + bounds.h) {
+                continue;
+            }
+            if (!placed.some(other => this._overlap(rect, other))) {
+                return p;
+            }
+        }
+        return null;
+    }
+
+    _overlap(a, b) {
+        return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+    }
+}

package/src/charting/diagramModel/AddViewCommand.js

@@ -0,0 +1,33 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * AddViewCommand — a view added to a model (new, duplicated, generated, a
+ * canvas or template), last in order and, with `current`, shown. Undo takes
+ * it away and shows the view that was in front.
+ */
+export class AddViewCommand extends Command {
+    /** A view added or removed is no edit on a view: undoing it shows no other. */
+    viewId = null;
+
+    /**
+     * @param {ViewSetModel} model
+     * @param {Object} view
+     * @param {{current?: boolean, label?: string}} [options]
+     */
+    constructor(model, view, { current = true, label = `Add "${view.title || view.name || view.id}"` } = {}) {
+        super(label);
+        this.model = model;
+        this.view = view;
+        this.current = current;
+        this._before = null;
+    }
+
+    execute() {
+        this._before = this.model.currentViewId;
+        this.model._insertView(this.view, { current: this.current });
+    }
+
+    undo() {
+        this.model._removeView(this.view.id, { next: this._before });
+    }
+}

package/src/charting/diagramModel/DiagramModel.js

@@ -0,0 +1,39 @@
+import { DiagramView } from './DiagramView.js';
+import { ViewSetModel } from './ViewSetModel.js';
+import { DiagramModelSearch } from './DiagramModelSearch.js';
+
+/**
+ * DiagramModel — the template editor's diagrams (views) edited together: the
+ * palette category shared by all of them and model-level line style defaults.
+ * Creating, duplicating, renaming, deleting and switching views come from
+ * ViewSetModel.
+ */
+export class DiagramModel extends ViewSetModel {
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.templateType] - Palette category shared by every view
+     * @param {Object} [options.edgeStyle] - Model-level line style defaults
+     * @param {Object} [options.historyOptions] - CommandHistory options for each view (e.g. onChange)
+     * @param {string} [options.name] - What the model is called
+     */
+    constructor({ templateType = 'generic', edgeStyle = {}, historyOptions = {}, name = '' } = {}) {
+        super({ idPrefix: 'view', viewNoun: 'Diagram' });
+        this.name = name;
+        this.templateType = templateType;
+        this.edgeStyle = edgeStyle;
+        this.historyOptions = historyOptions;
+    }
+
+    _newView(id, title) {
+        return new DiagramView({ id, title, historyOptions: this.historyOptions });
+    }
+
+    /** Find and replace: the views, their shapes' names and lines' labels (DiagramModelSearch). */
+    search() {
+        return new DiagramModelSearch(this);
+    }
+
+    setTemplateType(templateType) {
+        this.templateType = templateType;
+    }
+}

package/src/charting/diagramModel/DiagramModelSearch.js

@@ -0,0 +1,22 @@
+import { ModelSearch } from './ModelSearch.js';
+
+/**
+ * DiagramModelSearch — find and replace in the template editor's diagrams: on
+ * top of the model and views (ModelSearch), each shape's name and each line's
+ * label, which belong to their view.
+ */
+export class DiagramModelSearch extends ModelSearch {
+    viewItemTargets(view) {
+        const shapes = [...(view.templates?.values() ?? [])].map(t => ({
+            kind: 'shape', id: t.id, viewId: view.id, owner: t.name || t.id, field: 'name', fieldLabel: 'Name',
+            read: () => t.name ?? '',
+            write: (text) => { t.name = text; },
+        }));
+        const lines = [...(view.edges?.values() ?? [])].filter(e => e.label).map(e => ({
+            kind: 'line', id: e.id, viewId: view.id, owner: e.label, field: 'name', fieldLabel: 'Label',
+            read: () => e.label ?? '',
+            write: (text) => { e.label = text; },
+        }));
+        return [...shapes, ...lines];
+    }
+}

package/src/charting/diagramModel/DiagramView.js

@@ -0,0 +1,50 @@
+import { DiagramEditorState } from '../DiagramEditorState.js';
+
+/**
+ * DiagramView — one diagram (tab) of a DiagramModel: its shapes, lines,
+ * diagram-level line style and its own undo history (from DiagramEditorState).
+ *
+ * A DiagramEditor is bound directly to `templates`/`edges`, so edits land here
+ * with nothing to save back, and the history survives the editor being rebuilt.
+ */
+export class DiagramView extends DiagramEditorState {
+    /**
+     * @param {Object} options
+     * @param {string} options.id
+     * @param {string} options.title
+     * @param {Map<string, Template>} [options.templates]
+     * @param {Map<string, Edge>} [options.edges]
+     * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
+     * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
+     * @param {string} [options.documentation]
+     */
+    constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
+        super({ historyOptions, arrangement });
+        this.historyOptions = historyOptions;
+        this.id = id;
+        this.title = title;
+        this.documentation = documentation;
+        this.templates = templates;
+        this.edges = edges;
+        this.edgeStyle = edgeStyle;
+    }
+
+    /** The shapes are what stack. */
+    layerItems() {
+        return [...this.templates.values()];
+    }
+
+    /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
+    copy(id, title, historyOptions = this.historyOptions) {
+        return new DiagramView({
+            id,
+            title,
+            templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
+            edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
+            edgeStyle: { ...this.edgeStyle },
+            documentation: this.documentation,
+            historyOptions,
+            arrangement: this.arrangement.copy(),   // template ids are kept
+        });
+    }
+}