@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/modelTree/modes/TypeGroupedTreeMode.js

@@ -0,0 +1,60 @@
+import { TreeViewMode } from '../TreeViewMode.js';
+
+/**
+ * Tree mode: groups elements by ArchiMate type, then relationships.
+ */
+export class TypeGroupedTreeMode extends TreeViewMode {
+    static key = 'byType';
+    static label = 'By Type';
+
+    buildGroups(model, { filterText = '', typeIds = null, specializationIds = null, propertyIds = null } = {}) {
+        // Build element items (include specialization and properties for filtering)
+        const elementItems = this._getElements(model).map(el => ({
+            id: el.id,
+            kind: 'element',
+            label: el.name || '(unnamed)',
+            type: el.type,
+            icon: el.icon,
+            specialization: el.specialization,
+            properties: el.properties,
+        }));
+
+        // Filter elements with all criteria
+        const filtered = elementItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
+
+        // Group by type
+        const typeGroups = this._group(
+            filtered,
+            item => item.type,
+            type => type || 'Other'
+        );
+
+        // Sort alphabetically within each group
+        typeGroups.forEach(group => {
+            group.items.sort((a, b) => a.label.localeCompare(b.label));
+        });
+
+        // Sort groups alphabetically
+        typeGroups.sort((a, b) => a.label.localeCompare(b.label));
+
+        // Add relationships group
+        const relationshipItems = this._getRelationships(model).map(rel => ({
+            id: rel.id,
+            kind: 'relationship',
+            label: rel.label || `${rel.source} → ${rel.target}`,
+            type: rel.kind,
+            properties: rel.properties,
+        }));
+
+        const filtered_rels = relationshipItems.filter(item => this._matchesFilter(item, { text: filterText, typeIds, specializationIds, propertyIds }));
+
+        if (filtered_rels.length > 0) {
+            typeGroups.push({
+                label: 'Relationships',
+                items: filtered_rels.sort((a, b) => a.label.localeCompare(b.label)),
+            });
+        }
+
+        return typeGroups;
+    }
+}

package/src/charting/modelTree/treeLayers.js

@@ -0,0 +1,11 @@
+import { ArchimateDiagram } from '../diagrams/ArchimateDiagram.js';
+
+/** The Layers folder's sub-folders, in order; an element of any other layer (junction, grouping, location,
+ *  an ArchiMate 4 common type, ...) is under Other, as in Archi. */
+export const TREE_LAYERS = Object.freeze(['business', 'application', 'technology', 'implementation', 'motivation', 'strategy', 'physical', 'other']);
+
+/** The Layers sub-folder an element is in: its layer as the diagram draws it (ArchimateDiagram.elementLayer). */
+export function treeLayerOf(element) {
+    const layer = ArchimateDiagram.elementLayer(element);
+    return TREE_LAYERS.includes(layer) ? layer : 'other';
+}

package/src/charting/report/reportHtml.js

@@ -0,0 +1,82 @@
+import { toHtml } from '../../workspace/dom.js';
+import { reportViewer } from './reportViewer.js';
+
+/** The report page's look: a tree on the left, the item's page on the right. */
+export const REPORT_CSS = `
+* { box-sizing: border-box; }
+body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #222; background: #fff; height: 100vh; display: flex; flex-direction: column; }
+header { display: flex; gap: 16px; align-items: center; padding: 8px 16px; border-bottom: 1px solid #ddd; background: #f6f7f9; }
+header .title { font-weight: 600; font-size: 16px; color: inherit; text-decoration: none; }
+header input { flex: 0 1 320px; margin-left: auto; padding: 5px 8px; border: 1px solid #bbb; border-radius: 4px; font: inherit; }
+.columns { flex: 1; display: flex; min-height: 0; }
+nav { width: 300px; flex: none; overflow: auto; padding: 8px 12px; border-right: 1px solid #ddd; font-size: 13px; }
+nav h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #666; margin: 12px 0 4px; }
+nav summary { cursor: pointer; font-weight: 500; margin: 4px 0; }
+nav ul { list-style: none; margin: 0 0 4px; padding-left: 14px; }
+nav li { padding: 1px 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+nav li.current { background: #dde8f7; }
+a { color: #1a5fb4; text-decoration: none; }
+a:hover { text-decoration: underline; }
+main { flex: 1; overflow: auto; padding: 16px 24px; }
+main h1 { font-size: 22px; margin: 0 0 2px; }
+main h2 { font-size: 15px; margin: 20px 0 6px; }
+main ul { padding-left: 20px; }
+.type { color: #666; margin: 0 0 12px; }
+.note { color: #666; }
+.documentation { white-space: pre-wrap; max-width: 80ch; }
+table { border-collapse: collapse; margin: 8px 0; }
+th, td { text-align: left; vertical-align: top; padding: 3px 12px 3px 0; border-bottom: 1px solid #eee; }
+th { color: #555; font-weight: 500; }
+.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid rgba(0,0,0,.3); border-radius: 2px; }
+.picture { position: relative; display: inline-block; max-width: 100%; margin: 12px 0; border: 1px solid #ddd; }
+.picture img { display: block; max-width: 100%; height: auto; }
+.picture .area { position: absolute; border-radius: 3px; }
+.picture .area:hover { outline: 2px solid #1a5fb4; background: rgba(26,95,180,.08); }
+@media (prefers-color-scheme: dark) {
+  body { background: #1e1f22; color: #ddd; }
+  header { background: #26282c; border-color: #3a3c40; }
+  nav, .picture { border-color: #3a3c40; }
+  nav li.current { background: #2f3f57; }
+  a { color: #8ab4f8; }
+  th, td { border-color: #333; }
+  th, .type, .note, nav h2 { color: #aaa; }
+  header input { background: #1e1f22; color: inherit; border-color: #555; }
+  .picture { background: #fff; }
+}
+@media (max-width: 700px) {
+  .columns { flex-direction: column; }
+  nav { width: auto; max-height: 40vh; border-right: none; border-bottom: 1px solid #ddd; }
+}
+`;
+
+/**
+ * A report as one HTML file that opens anywhere (no server, nothing else to
+ * load): the report's data as JSON, and the viewer (reportViewer) that builds
+ * the browsable page from it in the reader's browser.
+ * @param {Object} data - ModelReport#data()
+ * @returns {string}
+ */
+export function reportHtml(data) {
+    const page = {
+        tag: 'html', attrs: { lang: 'en' }, children: [
+            { tag: 'head', children: [
+                { tag: 'meta', attrs: { charset: 'utf-8' } },
+                { tag: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
+                { tag: 'meta', attrs: { name: 'generator', content: 'RenderEngine' } },
+                { tag: 'title', text: data.title },
+                { tag: 'style', script: REPORT_CSS },
+            ] },
+            { tag: 'body', children: [
+                { tag: 'script', attrs: { type: 'application/json', id: 'report-data' }, script: JSON.stringify(data).replace(/</g, '\\u003c') },
+                { tag: 'script', script: `(${reportViewer.toString()})(document, JSON.parse(document.getElementById('report-data').textContent));` },
+            ] },
+        ],
+    };
+    return `<!doctype html>\n${toHtml(page)}\n`;
+}
+
+/** A report's file name: `Shop` → `shop-report.html`. */
+export function reportFileName(title) {
+    const stem = String(title ?? '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '') || 'model';
+    return `${stem}-report.html`;
+}

package/src/charting/report/reportViewer.js

@@ -0,0 +1,118 @@
+/**
+ * reportViewer — the script inside a saved report (reportHtml): it builds the
+ * page from the report's data (ModelReport#data) in the reader's browser: the
+ * tree of items on the left, with a search box that keeps what matches by
+ * name, type or documentation; the chosen item's page on the right (its
+ * facts, documentation, properties, picture with clickable shapes, and
+ * lists); the address (#key) says which page, so Back and links work.
+ *
+ * It is written into the report as its source text, so it uses nothing from
+ * outside itself: no imports, no names from this module.
+ *
+ * @param {Document} doc
+ * @param {Object} data - ModelReport#data()
+ * @param {Window} [win] - For the address (location.hash, hashchange)
+ */
+export function reportViewer(doc, data, win = doc.defaultView) {
+    const h = (tag, props = {}, children = []) => {
+        const node = doc.createElement(tag);
+        for (const [k, v] of Object.entries(props)) {
+            if (v == null) continue;
+            if (k === 'text') node.textContent = String(v);
+            else if (k === 'cls') node.className = v;
+            else if (k === 'style') Object.assign(node.style, v);
+            else if (k.startsWith('on')) node.addEventListener(k.slice(2), v);
+            else node.setAttribute(k, String(v));
+        }
+        for (const child of children) if (child) node.appendChild(typeof child === 'string' ? doc.createTextNode(child) : child);
+        return node;
+    };
+    const clear = (node) => { node.textContent = ''; };
+    const items = data.items;
+    const href = (key) => `#${encodeURIComponent(key)}`;
+    const link = (key, text) => (items[key] ? h('a', { href: href(key), text: text ?? items[key].name }) : h('span', { text: text ?? key }));
+    const swatch = (item) => (item.color ? h('span', { cls: 'swatch', style: { background: item.color } }) : null);
+
+    const search = h('input', { type: 'search', placeholder: 'Search names, types, documentation', 'aria-label': 'Search' });
+    const nav = h('nav');
+    const main = h('main');
+    const body = doc.body;
+    body.appendChild(h('header', {}, [h('a', { href: href(data.home), cls: 'title', text: data.title }), search]));
+    body.appendChild(h('div', { cls: 'columns' }, [nav, main]));
+
+    // The tree: a section per kind, a group per layer (or kind), a link per item.
+    const entries = [];
+    for (const section of data.sections) {
+        const groups = section.groups.map((group) => {
+            const links = group.keys.filter(key => items[key]).map((key) => {
+                const item = items[key];
+                const row = h('li', {}, [swatch(item), link(key)]);
+                entries.push({ key, row, text: `${item.name} ${item.type ?? ''} ${item.documentation ?? ''}`.toLowerCase() });
+                return row;
+            });
+            const list = h('ul', {}, links);
+            return { node: group.title ? h('details', { open: '' }, [h('summary', { text: group.title }), list]) : list, links };
+        });
+        const node = h('section', {}, [h('h2', { text: section.title }), ...groups.map(g => g.node)]);
+        nav.appendChild(node);
+        entries.push({ section: node, groups });
+    }
+    const filter = () => {
+        const words = search.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+        for (const entry of entries) {
+            if (entry.row) entry.row.style.display = words.every(w => entry.text.includes(w)) ? '' : 'none';
+        }
+        for (const entry of entries.filter(e => e.section)) {
+            let shown = 0;
+            for (const group of entry.groups) {
+                const n = group.links.filter(row => row.style.display !== 'none').length;
+                group.node.style.display = n ? '' : 'none';
+                if (words.length && n && group.node.tagName.toLowerCase() === 'details') group.node.setAttribute('open', '');
+                shown += n;
+            }
+            entry.section.style.display = shown ? '' : 'none';
+        }
+    };
+    search.addEventListener('input', filter);
+
+    // A picture: the view as an image, a link over each shape that has a page.
+    const picture = ({ svg, viewBox, areas }) => {
+        const pct = (v, total) => `${(v / total) * 100}%`;
+        const frame = h('div', { cls: 'picture' }, [h('img', { src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`, alt: 'View' })]);
+        for (const area of areas) {
+            frame.appendChild(h('a', {
+                href: href(area.key), title: items[area.key]?.name ?? '', cls: 'area',
+                style: {
+                    left: pct(area.x - viewBox.x, viewBox.width), top: pct(area.y - viewBox.y, viewBox.height),
+                    width: pct(area.width, viewBox.width), height: pct(area.height, viewBox.height),
+                },
+            }));
+        }
+        return frame;
+    };
+    const table = (rows) => h('table', {}, rows.map(([label, value]) => h('tr', {}, [h('th', { text: label }), h('td', {}, [value])])));
+
+    const show = (key) => {
+        const item = items[key] ?? items[data.home];
+        clear(main);
+        main.appendChild(h('h1', {}, [swatch(item), item.name]));
+        if (item.type) main.appendChild(h('p', { cls: 'type', text: item.type }));
+        if (item.facts) main.appendChild(table(item.facts.map(f => [f.label, f.key ? link(f.key) : doc.createTextNode(f.text ?? '')])));
+        if (item.documentation) main.appendChild(h('p', { cls: 'documentation', text: item.documentation }));
+        if (item.picture) main.appendChild(picture(item.picture));
+        if (item.properties) {
+            main.appendChild(h('h2', { text: 'Properties' }));
+            main.appendChild(table(item.properties.map(p => [p.name, doc.createTextNode(p.value)])));
+        }
+        for (const list of item.lists ?? []) {
+            main.appendChild(h('h2', { text: `${list.title} (${list.rows.length})` }));
+            main.appendChild(h('ul', {}, list.rows.map(row => h('li', {}, [swatch(items[row.key] ?? {}), link(row.key), row.note ? h('span', { cls: 'note', text: ` ${row.note}` }) : null]))));
+        }
+        for (const entry of entries) if (entry.row) entry.row.className = entry.key === item.key ? 'current' : '';
+        doc.title = `${item.name} — ${data.title}`;
+    };
+    const current = () => decodeURIComponent(String(win?.location?.hash ?? '').slice(1)) || data.home;
+    win?.addEventListener?.('hashchange', () => show(current()));
+    show(current());
+    return { show, filter, search };
+}

package/src/charting/shapes/CircleShape.js

@@ -0,0 +1,19 @@
+import { Shape } from './Shape.js';
+
+/**
+ * CircleShape — circle primitive.
+ */
+export class CircleShape extends Shape {
+    constructor({ cx, cy, r, fill, stroke }) {
+        super('circle');
+        this.cx = cx;
+        this.cy = cy;
+        this.r = r;
+        this.fill = fill;
+        this.stroke = stroke;
+    }
+
+    render(renderer) {
+        renderer.circle(this.cx, this.cy, this.r, this.fill, this.stroke);
+    }
+}

package/src/charting/shapes/PathShape.js

@@ -0,0 +1,17 @@
+import { Shape } from './Shape.js';
+
+/**
+ * PathShape — path primitive.
+ */
+export class PathShape extends Shape {
+    constructor({ d, fill, stroke }) {
+        super('path');
+        this.d = d;
+        this.fill = fill;
+        this.stroke = stroke;
+    }
+
+    render(renderer) {
+        renderer.path(this.d, this.fill, this.stroke);
+    }
+}

package/src/charting/shapes/RectShape.js

@@ -0,0 +1,20 @@
+import { Shape } from './Shape.js';
+
+/**
+ * RectShape — rectangle primitive.
+ */
+export class RectShape extends Shape {
+    constructor({ x, y, width, height, fill, stroke }) {
+        super('rect');
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.fill = fill;
+        this.stroke = stroke;
+    }
+
+    render(renderer) {
+        renderer.rect(this.x, this.y, this.width, this.height, this.fill, this.stroke);
+    }
+}

package/src/charting/shapes/Shape.js

@@ -0,0 +1,20 @@
+/**
+ * Shape — abstract base for renderer-agnostic geometric primitives.
+ *
+ * Concrete shapes live alongside this file (RectShape, CircleShape, PathShape)
+ * and are assembled by ShapeFactory so that this module stays free of circular
+ * subclass imports.
+ */
+export class Shape {
+    constructor(type) {
+        if (new.target === Shape) {
+            throw new TypeError('Shape is abstract — subclass it');
+        }
+        this.type = type;
+    }
+
+    /** Render this shape through the given renderer. Subclasses implement. */
+    render(renderer) {
+        throw new Error(`${this.constructor.name} must implement render()`);
+    }
+}

package/src/charting/shapes/ShapeFactory.js

@@ -0,0 +1,23 @@
+import { Shape } from './Shape.js';
+import { RectShape } from './RectShape.js';
+import { CircleShape } from './CircleShape.js';
+import { PathShape } from './PathShape.js';
+
+/**
+ * ShapeFactory — converts plain {type, ...} descriptors into concrete Shape
+ * instances. Kept separate from Shape.js to avoid circular imports between
+ * the base class and its subclasses.
+ */
+export class ShapeFactory {
+    /** Convert a plain shape descriptor into a concrete Shape instance. */
+    static fromObject(obj) {
+        if (obj instanceof Shape) return obj;
+        switch (obj.type) {
+            case 'rect': return new RectShape(obj);
+            case 'circle': return new CircleShape(obj);
+            case 'path': return new PathShape(obj);
+            default:
+                throw new Error(`Unknown shape type: ${obj.type}`);
+        }
+    }
+}

package/src/charting/storage/LocalJsonStore.js

@@ -0,0 +1,43 @@
+/**
+ * LocalJsonStore — one JSON value under one key of a Storage (localStorage by
+ * default). Storage can be missing or throw (private windows, blocked site
+ * data), so every read and write degrades to the fallback / a no-op.
+ */
+export class LocalJsonStore {
+    /**
+     * @param {string} key
+     * @param {Storage} [storage] - Defaults to globalThis.localStorage when available
+     */
+    constructor(key, storage = LocalJsonStore._defaultStorage()) {
+        this.key = key;
+        this.storage = storage;
+    }
+
+    /** The stored value, or `fallback` if nothing valid is stored. */
+    load(fallback) {
+        try {
+            const raw = this.storage?.getItem(this.key);
+            return raw == null ? fallback : JSON.parse(raw);
+        } catch {
+            return fallback;
+        }
+    }
+
+    /** @returns {boolean} whether the value was written */
+    save(value) {
+        try {
+            this.storage?.setItem(this.key, JSON.stringify(value));
+            return !!this.storage;
+        } catch {
+            return false;
+        }
+    }
+
+    static _defaultStorage() {
+        try {
+            return globalThis.localStorage ?? null;
+        } catch {
+            return null;
+        }
+    }
+}

package/src/charting/templates/ActorTemplate.js

@@ -0,0 +1,36 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+
+/** ActorTemplate — stick figure; the label sits underneath. */
+export class ActorTemplate extends Template {
+    static defaults = { width: 40, height: 80, fillColor: '#ffffff' };
+
+    get labelAnchor() { return { x: this.x, y: this.bottom + 12 }; }
+
+    /** Key heights and widths of the figure, shared by drawing and outline. */
+    _figure() {
+        const r = Math.min(this.width / 2, this.height * 0.14);
+        const neck = this.top + r * 2;
+        const hip = this.top + this.height * 0.62;
+        return { r, neck, hip, arms: neck + (hip - neck) * 0.3, foot: this.width * 0.4 };
+    }
+
+    /** Convex hull of head, arms and feet, so edges stop at the figure rather than empty space. */
+    outline() {
+        const { x, left: L, right: R, top: T, bottom: B } = this;
+        const { r, arms, foot } = this._figure();
+        return [[x - r, T], [x + r, T], [R, arms], [x + foot, B], [x - foot, B], [L, arms]];
+    }
+
+    shapeElements(doc) {
+        const { x, left: L, right: R, top: T, bottom: B } = this;
+        const { r, neck, hip, arms, foot } = this._figure();
+        const stroke = this.line({ 'stroke-width': this.strokeWidth, 'stroke-linecap': 'round' });
+        return [
+            // The figure is mostly thin lines; a transparent box keeps the whole area clickable.
+            svgEl('rect', { x: L, y: T, width: this.width, height: this.height, fill: 'transparent' }, doc),
+            svgEl('circle', this.paint({ cx: x, cy: T + r, r }), doc),
+            svgEl('path', { ...stroke, d: `M ${x} ${neck} V ${hip} M ${L} ${arms} H ${R} M ${x - foot} ${B} L ${x} ${hip} L ${x + foot} ${B}` }, doc),
+        ];
+    }
+}

package/src/charting/templates/BoxTemplate.js

@@ -0,0 +1,27 @@
+import { Template } from './Template.js';
+import { svgEl, pointsAttr } from './svg.js';
+
+/** BoxTemplate — 3D box (UML deployment node, server, device). */
+export class BoxTemplate extends Template {
+    static defaults = { width: 140, height: 90 };
+
+    get depth() { return Math.min(14, this.width * 0.15, this.height * 0.15); }
+
+    get labelAnchor() { return { x: this.x - this.depth / 2, y: this.y + this.depth / 2 - 8 }; }
+
+    outline() {
+        const { left: L, right: R, top: T, bottom: B, depth: d } = this;
+        return [[L, T + d], [L + d, T], [R, T], [R, B - d], [R - d, B], [L, B]];
+    }
+
+    shapeElements(doc) {
+        const { left: L, right: R, top: T, bottom: B } = this;
+        const d = this.depth;
+        const face = (pts, shade) => svgEl('polygon', this.paint({ points: pointsAttr(pts), 'fill-opacity': shade }), doc);
+        return [
+            face([[L, T + d], [L + d, T], [R, T], [R - d, T + d]], 0.7),
+            face([[R - d, T + d], [R, T], [R, B - d], [R - d, B]], 0.5),
+            svgEl('rect', this.paint({ x: L, y: T + d, width: this.width - d, height: this.height - d }), doc),
+        ];
+    }
+}

package/src/charting/templates/CircleTemplate.js

@@ -0,0 +1,18 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { sampleArc } from './outline.js';
+
+/** CircleTemplate — diameter is the smaller of width/height. */
+export class CircleTemplate extends Template {
+    static defaults = { width: 80, height: 80 };
+
+    get radius() { return Math.min(this.width, this.height) / 2; }
+
+    outline() {
+        return sampleArc(this.x, this.y, this.radius, this.radius, 0, 2 * Math.PI, 72);
+    }
+
+    shapeElements(doc) {
+        return [svgEl('circle', this.paint({ cx: this.x, cy: this.y, r: this.radius }), doc)];
+    }
+}

package/src/charting/templates/ClassTemplate.js

@@ -0,0 +1,20 @@
+import { RectangleTemplate } from './RectangleTemplate.js';
+import { svgEl } from './svg.js';
+
+/** ClassTemplate — UML classifier box: name, attribute and operation compartments. */
+export class ClassTemplate extends RectangleTemplate {
+    static defaults = { width: 160, height: 110, fillColor: '#ffffff' };
+
+    get cornerRadius() { return 0; }
+
+    get headerHeight() { return Math.min(28, this.height / 3); }
+
+    get labelAnchor() { return { x: this.x, y: this.top + this.headerHeight / 2 }; }
+
+    shapeElements(doc) {
+        const h = this.headerHeight;
+        const mid = this.top + h + (this.height - h) / 2;
+        const divider = (y) => svgEl('line', this.line({ x1: this.left, y1: y, x2: this.right, y2: y }), doc);
+        return [...super.shapeElements(doc), divider(this.top + h), divider(mid)];
+    }
+}

package/src/charting/templates/CloudTemplate.js

@@ -0,0 +1,43 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { sampleCubic } from './outline.js';
+
+/**
+ * Outline in a 100 x 60 unit box: a start point, cubic segments
+ * [control1, control2, end], then a straight closing edge back to the start.
+ * Drawn and sampled from the same data so edges meet the visible bumps.
+ */
+const START = [25, 56];
+const CURVES = [
+    [[8, 56], [2, 44], [10, 36]],
+    [[2, 28], [10, 14], [24, 18]],
+    [[28, 4], [48, 2], [54, 13]],
+    [[62, 3], [82, 6], [82, 20]],
+    [[96, 18], [100, 36], [90, 42]],
+    [[98, 52], [86, 60], [75, 56]],
+];
+const PATH = `M ${START.join(' ')} ${CURVES.map(c => `C ${c.flat().join(' ')}`).join(' ')} Z`;
+
+export class CloudTemplate extends Template {
+    static defaults = { width: 140, height: 84 };
+
+    outline() {
+        const sx = this.width / 100, sy = this.height / 60;
+        const toCanvas = ([u, v]) => [this.left + u * sx, this.top + v * sy];
+        const pts = [toCanvas(START)];
+        let from = START;
+        for (const [c1, c2, end] of CURVES) {
+            pts.push(...sampleCubic(from, c1, c2, end).map(toCanvas));
+            from = end;
+        }
+        return pts;
+    }
+
+    shapeElements(doc) {
+        return [svgEl('path', this.paint({
+            d: PATH,
+            transform: `translate(${this.left} ${this.top}) scale(${this.width / 100} ${this.height / 60})`,
+            'vector-effect': 'non-scaling-stroke',
+        }), doc)];
+    }
+}

package/src/charting/templates/ComponentTemplate.js

@@ -0,0 +1,19 @@
+import { RectangleTemplate } from './RectangleTemplate.js';
+import { svgEl } from './svg.js';
+
+/** ComponentTemplate — UML 2 component: box with the component icon top-right. */
+export class ComponentTemplate extends RectangleTemplate {
+    static defaults = { width: 150, height: 80 };
+
+    get cornerRadius() { return 0; }
+
+    shapeElements(doc) {
+        const ix = this.right - 22, iy = this.top + 8;
+        const icon = [
+            svgEl('rect', this.paint({ x: ix, y: iy, width: 14, height: 16, 'stroke-width': 1 }), doc),
+            svgEl('rect', this.paint({ x: ix - 4, y: iy + 3, width: 8, height: 4, 'stroke-width': 1 }), doc),
+            svgEl('rect', this.paint({ x: ix - 4, y: iy + 9, width: 8, height: 4, 'stroke-width': 1 }), doc),
+        ];
+        return [...super.shapeElements(doc), ...icon];
+    }
+}

package/src/charting/templates/CylinderTemplate.js

@@ -0,0 +1,30 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+import { sampleArc } from './outline.js';
+
+/** CylinderTemplate — database / stored data. */
+export class CylinderTemplate extends Template {
+    static defaults = { width: 90, height: 100 };
+
+    get capHeight() { return Math.min(this.height * 0.15, 14); }
+
+    get labelAnchor() { return { x: this.x, y: this.y + this.capHeight / 2 - 8 }; }
+
+    outline() {
+        const rx = this.width / 2, ry = this.capHeight;
+        return [
+            ...sampleArc(this.x, this.top + ry, rx, ry, Math.PI, 2 * Math.PI, 24),
+            ...sampleArc(this.x, this.bottom - ry, rx, ry, 0, Math.PI, 24),
+        ];
+    }
+
+    shapeElements(doc) {
+        const { left: L, right: R, top: T, bottom: B } = this;
+        const rx = this.width / 2, ry = this.capHeight;
+        const body = `M ${L} ${T + ry} A ${rx} ${ry} 0 0 1 ${R} ${T + ry} V ${B - ry} A ${rx} ${ry} 0 0 1 ${L} ${B - ry} Z`;
+        return [
+            svgEl('path', this.paint({ d: body }), doc),
+            svgEl('ellipse', this.paint({ cx: this.x, cy: T + ry, rx, ry }), doc),
+        ];
+    }
+}

package/src/charting/templates/DataStoreTemplate.js

@@ -0,0 +1,16 @@
+import { Template } from './Template.js';
+import { svgEl } from './svg.js';
+
+/** DataStoreTemplate — DFD data store: open-ended box with an ID bay on the left. */
+export class DataStoreTemplate extends Template {
+    static defaults = { width: 150, height: 44 };
+
+    shapeElements(doc) {
+        const { left: L, right: R, top: T, bottom: B } = this;
+        const bay = Math.min(24, this.width * 0.15);
+        return [
+            svgEl('rect', { x: L, y: T, width: this.width, height: this.height, fill: this.fillColor, stroke: 'none' }, doc),
+            svgEl('path', this.line({ 'stroke-width': this.strokeWidth, d: `M ${R} ${T} H ${L} V ${B} H ${R} M ${L + bay} ${T} V ${B}` }), doc),
+        ];
+    }
+}

package/src/charting/templates/DiamondTemplate.js

@@ -0,0 +1,10 @@
+import { PolygonTemplate } from './PolygonTemplate.js';
+
+/** DiamondTemplate — decision / gateway / relationship. */
+export class DiamondTemplate extends PolygonTemplate {
+    static defaults = { width: 100, height: 100 };
+
+    points() {
+        return [[this.x, this.top], [this.right, this.y], [this.x, this.bottom], [this.left, this.y]];
+    }
+}