@peter.prib/renderengine 0.5.0 → 0.8.0

package/src/charting/modelTree/TreeBuilder.js

@@ -1,3 +1,20 @@
+/** A row of the tree, branch or leaf: one line, compact; a label too long ends in an ellipsis. */
+const ROW_STYLE = `
+    cursor: pointer;
+    padding: 1px 4px;
+    margin: 0;
+    border-radius: 3px;
+    user-select: none;
+    border-left: 3px solid transparent;
+    transition: background-color 0.1s;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 1.35;
+    white-space: nowrap;
+    overflow: hidden;
+`;
+
 /**
  * Generic tree component builder for hierarchical node rendering.
  * Handles expand/collapse, selection, context menus, and recursive rendering.
@@ -19,8 +36,14 @@ export class TreeBuilder {
      * @param {Map<string, boolean>} [options.openState] - Which folders are open, by node id: kept
      *   by the caller so a rebuilt tree opens them as they were. A folder not in it is open unless
      *   its node says `collapsed: true`; opening or closing one records it here.
+     * @param {(node) => boolean} [options.filter] - Which leaves are shown: a folder is shown when a
+     *   leaf under it is, and open while filtering. None: every node.
+     * @param {number} [options.leafLimit] - The leaves a folder shows; the rest wait behind a
+     *   "▸ N more" row, which shows them. The folders inside it always show.
+     * @param {Set<string>} [options.shownAll] - The folders (by node id) showing every leaf, kept by
+     *   the caller as openState is; asking for "more" records the folder here.
      */
-    constructor(doc, { container, rootNodes = [], onNodeClick = null, onNodeContext = null, getNodeChildren = null, openState = new Map(), iconFor = null } = {}) {
+    constructor(doc, { container, rootNodes = [], onNodeClick = null, onNodeContext = null, getNodeChildren = null, openState = new Map(), iconFor = null, filter = null, leafLimit = Infinity, shownAll = new Set() } = {}) {
         this.doc = doc;
         this.container = container;
         this.rootNodes = rootNodes;
@@ -29,7 +52,12 @@ export class TreeBuilder {
         this.getNodeChildren = getNodeChildren;
         this.openState = openState;
         this.iconFor = iconFor;
+        this.filter = filter;
+        this.leafLimit = leafLimit;
+        this.shownAll = shownAll;
         this.selectedNode = null;
+        /** Each node's shown children, asked for once per render (getNodeChildren makes new nodes). */
+        this._children = new WeakMap();
     }
 
     /**
@@ -40,10 +68,25 @@ export class TreeBuilder {
         const container = this.container;
         if (!container) return;
 
-        container.innerHTML = '';
-        for (const node of nodes) {
-            container.appendChild(this._renderNode(node));
+        this._children = new WeakMap();
+        container.replaceChildren(...nodes.filter(node => this._shown(node)).map(node => this._renderNode(node)));
+    }
+
+    /** A node's children that are shown: with a filter, the leaves it keeps and the folders holding one. @private */
+    _childrenOf(node) {
+        if (!this._children.has(node)) {
+            const all = this.getNodeChildren?.(node) || [];
+            this._children.set(node, this.filter ? all.filter(child => this._shown(child)) : all);
         }
+        return this._children.get(node);
+    }
+
+    /** Whether a node is shown: always without a filter; else a leaf the filter keeps, or a folder with a shown child. @private */
+    _shown(node) {
+        if (!this.filter) return true;
+        if (this._childrenOf(node).length) return true;
+        // A folder whose children are all filtered out is not a leaf to test.
+        return !(this.getNodeChildren?.(node) || []).length && !!this.filter(node);
     }
 
     /**
@@ -51,14 +94,8 @@ export class TreeBuilder {
      * @private
      */
     _renderNode(node) {
-        const children = this.getNodeChildren?.(node) || [];
-        const hasChildren = children.length > 0;
-
-        if (hasChildren) {
-            return this._renderExpandable(node, children);
-        } else {
-            return this._renderLeaf(node);
-        }
+        const children = this._childrenOf(node);
+        return children.length ? this._renderExpandable(node, children) : this._renderLeaf(node);
     }
 
     /**
@@ -67,23 +104,13 @@ export class TreeBuilder {
      */
     _renderExpandable(node, children) {
         const details = this.doc.createElement('details');
-        details.open = this.openState.get(node.id) ?? !node.collapsed;
+        // Open while filtering, to show what was found (not recorded); else as it was.
+        details.open = this.filter ? true : this.openState.get(node.id) ?? !node.collapsed;
         details.setAttribute('data-node-id', node.id);
-        details.addEventListener('toggle', () => this.openState.set(node.id, details.open));
+        details.addEventListener('toggle', () => { if (!this.filter) this.openState.set(node.id, details.open); });
 
         const summary = this.doc.createElement('summary');
-        summary.style.cssText = `
-            cursor: pointer;
-            padding: 4px 6px;
-            margin: 2px 0;
-            border-radius: 3px;
-            user-select: none;
-            border-left: 3px solid transparent;
-            transition: background-color 0.1s;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        `;
+        summary.style.cssText = ROW_STYLE;
         summary.setAttribute('data-node-id', node.id);
 
         this._applyNodeStyling(summary, node);
@@ -95,15 +122,45 @@ export class TreeBuilder {
         details.appendChild(summary);
 
         const childContainer = this.doc.createElement('div');
-        childContainer.style.cssText = 'padding-left: 16px;';
-        for (const child of children) {
-            childContainer.appendChild(this._renderNode(child));
-        }
+        childContainer.style.cssText = 'padding-left: 12px;';
+        this._fillChildren(childContainer, node, children);
         details.appendChild(childContainer);
 
         return details;
     }
 
+    /**
+     * A folder's children: its folders, and its leaves up to leafLimit, then a
+     * "▸ N more" row that shows the rest (unless the folder shows them all already).
+     * @private
+     */
+    _fillChildren(container, node, children) {
+        const limit = this.shownAll.has(node.id) ? Infinity : this.leafLimit;
+        let leaves = 0;
+        let waiting = 0;
+        const rows = [];
+        for (const child of children) {
+            if (!this._childrenOf(child).length && leaves++ >= limit) { waiting++; continue; }
+            rows.push(this._renderNode(child));
+        }
+        if (waiting) rows.push(this._moreRow(waiting, () => {
+            this.shownAll.add(node.id);
+            this._fillChildren(container, node, children);
+        }));
+        container.replaceChildren(...rows);
+    }
+
+    /** The row standing for `count` leaves not shown; choosing it calls `showAll`. @private */
+    _moreRow(count, showAll) {
+        const row = this.doc.createElement('div');
+        row.setAttribute('data-tree-more', String(count));
+        row.style.cssText = `${ROW_STYLE} color: #666; font-style: italic;`;
+        row.textContent = `▸ ${count} more`;
+        row.title = 'Show them all';
+        row.addEventListener('click', (e) => { e.stopPropagation(); showAll(); });
+        return row;
+    }
+
     /**
      * Render a leaf node without children.
      * @private
@@ -111,23 +168,12 @@ export class TreeBuilder {
     _renderLeaf(node) {
         const leaf = this.doc.createElement('div');
         leaf.setAttribute('data-node-id', node.id);
-        // Element leaves are filter targets and drag sources; mark them here so a rebuilt tree keeps that.
+        // Element leaves are drag sources; mark them here so a rebuilt tree keeps that.
         if (node.type === 'element' && node._element) {
             leaf.setAttribute('data-element-id', node._element.id);
             leaf.draggable = true;
         }
-        leaf.style.cssText = `
-            padding: 4px 6px;
-            margin: 2px 0;
-            border-radius: 3px;
-            cursor: pointer;
-            user-select: none;
-            border-left: 3px solid transparent;
-            transition: background-color 0.1s;
-            display: flex;
-            align-items: center;
-            gap: 6px;
-        `;
+        leaf.style.cssText = ROW_STYLE;
 
         this._applyNodeStyling(leaf, node);
         leaf.addEventListener('click', (e) => this._handleNodeClick(e, leaf, node));
@@ -153,13 +199,15 @@ export class TreeBuilder {
         } else if (node.icon) {
             const icon = this.doc.createElement('span');
             icon.textContent = node.icon;
-            icon.style.cssText = 'flex-shrink: 0; font-size: 14px;';
+            icon.style.cssText = 'flex-shrink: 0; font-size: 11px;';
             element.appendChild(icon);
         }
 
-        // Label
+        // Label: one line, cut with an ellipsis; the whole of it on hover.
         const label = this.doc.createElement('span');
         label.textContent = node.label || 'Untitled';
+        label.style.cssText = 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;';
+        element.title = label.textContent;
         element.appendChild(label);
     }
 

package/src/charting/modelTree/TreeViewMode.js

@@ -7,6 +7,13 @@ export class TreeViewMode {
     static key = null;          // registry key; subclasses override
     static label = '';          // human-readable label; subclasses override
 
+    /** Whether `text` is in any of `fields` (case ignored); no text matches everything. */
+    static textMatches(text, fields) {
+        if (!text) return true;
+        const lower = text.toLowerCase();
+        return fields.some(f => String(f ?? '').toLowerCase().includes(lower));
+    }
+
     constructor() {
         if (new.target === TreeViewMode) {
             throw new TypeError('TreeViewMode is abstract — subclass it');
@@ -59,12 +66,8 @@ export class TreeViewMode {
      */
     _matchesFilter(item, { text = '', typeIds = null, specializationIds = null, propertyIds = null, inDescriptions = false } = {}) {
         // Text filter (label or type; the description too when asked)
-        if (text) {
-            const textLower = text.toLowerCase();
-            const fields = [item.label, item.type, ...(inDescriptions ? [item.description] : [])];
-            if (!fields.some(f => String(f ?? '').toLowerCase().includes(textLower))) {
-                return false;
-            }
+        if (!TreeViewMode.textMatches(text, [item.label, item.type, ...(inDescriptions ? [item.description] : [])])) {
+            return false;
         }
 
         // Type filter (elements only; 'type:business-actor' format)

package/src/charting/modelTree/viewFolders.js

@@ -6,23 +6,32 @@ const VIEW_ICONS = Object.freeze({ canvas: '🎨' });
  * keeps them: each view remembers its sub-folder path (`archiFolder`, folder
  * steps {id, name}). A folder node per sub-folder at this depth (holding the
  * views under it, opened a level deeper), then the views that sit here, each
- * in the model's order.
+ * in the model's order. A sub-folder that holds no view is there too, from
+ * its path (the model's `emptyViewFolders`).
  * @param {Array<Object>} views
  * @param {number} [depth]
+ * @param {Array<Array<{id, name}>>} [emptyFolders] - The paths of the folders with no view in them
  * @returns {Array<Object>} TreeBuilder nodes: {id, label, icon, type: 'view-folder'|'view', ...}
  */
-export function viewFolderNodes(views, depth = 0) {
+export function viewFolderNodes(views, depth = 0, emptyFolders = []) {
     const folders = new Map();
+    const folderOf = (step) => {
+        if (!folders.has(step.id)) folders.set(step.id, { step, views: [], empty: [] });
+        return folders.get(step.id);
+    };
     const here = [];
     for (const view of views) {
         const step = view.archiFolder?.[depth];
         if (!step) { here.push(view); continue; }
-        if (!folders.has(step.id)) folders.set(step.id, { step, views: [] });
-        folders.get(step.id).views.push(view);
+        folderOf(step).views.push(view);
+    }
+    for (const path of emptyFolders) {
+        if (path.length > depth) folderOf(path[depth]).empty.push(path);
     }
     return [
-        ...[...folders.values()].map(({ step, views: inside }) => ({
-            id: `view-folder-${step.id}`, label: step.name || 'Untitled Folder', icon: '📁', type: 'view-folder', _views: inside, _depth: depth + 1,
+        ...[...folders.values()].map(({ step, views: inside, empty }) => ({
+            id: `view-folder-${step.id}`, label: step.name || 'Untitled Folder', icon: '📁', type: 'view-folder',
+            _views: inside, _emptyFolders: empty, _depth: depth + 1,
         })),
         ...here.map(view => ({
             id: view.id, label: view.name || view.title || 'Untitled View', icon: VIEW_ICONS[view.constructor.kind] ?? '📄', type: 'view', _view: view,

package/src/icons/IconSet.js

@@ -0,0 +1,86 @@
+/**
+ * IconSet — named icons as data, built as `<svg>` specs for el().
+ *
+ * An icon is JSON: a viewBox, how it is painted, and its shapes as
+ * `[tag, attrs]` pairs:
+ *
+ *   { viewBox: '0 0 24 24', paint: 'stroke', shapes: [['circle', { cx: 12, cy: 12, r: 10 }]] }
+ *
+ * `paint` is 'stroke' (outlined in currentColor — the default, so an icon
+ * takes its parent's colour), 'fill' (filled in currentColor) or 'none' (the
+ * shapes carry their own colours: a brand mark). No markup is parsed: el()
+ * builds the spec in the SVG namespace.
+ */
+const PAINT = {
+    stroke: { fill: 'none', stroke: 'currentColor', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' },
+    fill:   { fill: 'currentColor' },
+    none:   {},
+};
+
+export class IconSet {
+    /** @param {Object<string, Object>} [defs] - Name → icon */
+    constructor(defs = {}) {
+        this.defs = new Map();
+        this.add(defs);
+    }
+
+    /** Add (or replace) icons, name → icon. */
+    add(defs) {
+        for (const [name, def] of Object.entries(defs)) this.define(name, def);
+        return this;
+    }
+
+    /** Add (or replace) one icon; throws when it is not one. */
+    define(name, def) {
+        if (typeof def?.viewBox !== 'string' || !Array.isArray(def.shapes) || !def.shapes.length) {
+            throw new Error(`IconSet: icon "${name}" needs a viewBox and shapes`);
+        }
+        if (def.paint != null && !(def.paint in PAINT)) {
+            throw new Error(`IconSet: icon "${name}" paint is ${Object.keys(PAINT).join(', ')}, not "${def.paint}"`);
+        }
+        for (const shape of def.shapes) {
+            if (!Array.isArray(shape) || typeof shape[0] !== 'string') throw new Error(`IconSet: icon "${name}" shapes are [tag, attrs] pairs`);
+        }
+        this.defs.set(name, def);
+        return this;
+    }
+
+    has(name) { return this.defs.has(name); }
+
+    get(name) { return this.defs.get(name) ?? null; }
+
+    /** Every icon's name, in the order added. */
+    names() { return [...this.defs.keys()]; }
+
+    /** A copy of this set with `defs` added: a host's own icons over these. */
+    with(defs) {
+        return new IconSet(Object.fromEntries(this.defs)).add(defs);
+    }
+
+    /**
+     * The icon as an el() spec.
+     * @param {string} name
+     * @param {Object} [options]
+     * @param {number|string} [options.size] - Width and height (default 24; CSS can override)
+     * @param {string} [options.title] - Its accessible name; without one it is hidden from screen readers
+     * @param {string|string[]} [options.cls] - Extra class names
+     */
+    spec(name, { size = 24, title = null, cls = null } = {}) {
+        const def = this.defs.get(name);
+        if (!def) throw new Error(`IconSet: no icon "${name}"`);
+        return {
+            tag: 'svg',
+            cls: ['re-icon', ...(Array.isArray(cls) ? cls : [cls])],
+            attrs: {
+                viewBox: def.viewBox, width: size, height: size, focusable: 'false',
+                role: title ? 'img' : null, 'aria-hidden': title ? null : 'true',
+                ...PAINT[def.paint ?? 'stroke'],
+            },
+            dataset: { icon: name },
+            children: [
+                ...(title ? [{ tag: 'title', text: title }] : []),
+                ...def.shapes.map(([tag, attrs]) => ({ tag, attrs })),
+            ],
+        };
+    }
+}

package/src/icons/index.js

@@ -0,0 +1,59 @@
+/**
+ * The built-in icons — a shared pool any host draws from (`ICONS.spec('cpu')`,
+ * or `icon('cpu')`), extended with its own (`ICONS.with({ ... })`). Outlined
+ * icons on a 24-unit grid, stroked in currentColor; the brand marks keep their
+ * colours. Names say what the picture is, not where it is used.
+ */
+import { IconSet } from './IconSet.js';
+
+const box = (x, y, width, height, rx = 1) => ['rect', { x, y, width, height, rx }];
+const path = (d) => ['path', { d }];
+
+export const ICON_DEFS = {
+    dashboard: { viewBox: '0 0 24 24', shapes: [box(3, 3, 7, 9), box(14, 3, 7, 5), box(14, 12, 7, 9), box(3, 16, 7, 5)] },
+    zap: { viewBox: '0 0 24 24', shapes: [path('m13 2-2 10h8L11 22l2-10H5L13 2z')] },
+    clock: { viewBox: '0 0 24 24', shapes: [['circle', { cx: 12, cy: 12, r: 10 }], ['polyline', { points: '12 6 12 12 16 14' }]] },
+    'clipboard-list': { viewBox: '0 0 24 24', shapes: [
+        box(8, 2, 8, 4),
+        path('M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'),
+        path('M12 11h4'), path('M12 16h4'), path('M8 11h.01'), path('M8 16h.01'),
+    ] },
+    book: { viewBox: '0 0 24 24', shapes: [
+        path('M4 19.5A2.5 2.5 0 0 1 6.5 17H20'),
+        path('M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'),
+    ] },
+    cpu: { viewBox: '0 0 24 24', shapes: [
+        box(4, 4, 16, 16, 2), box(9, 9, 6, 6),
+        ...['M15 2v2', 'M15 20v2', 'M2 15h2', 'M2 9h2', 'M20 15h2', 'M20 9h2', 'M9 2v2', 'M9 20v2'].map(path),
+    ] },
+    memory: { viewBox: '0 0 24 24', shapes: [
+        path('M22 12s-3 1-5 1-3-1-5-1-3 1-5 1-5-1-5-1'), path('M7 21h10'), path('M9 21V10'), path('M15 21V10'),
+        path('M8 3h8a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'),
+    ] },
+    activity: { viewBox: '0 0 24 24', shapes: [['polyline', { points: '22 12 18 12 15 21 9 3 6 12 2 12' }]] },
+    database: { viewBox: '0 0 24 24', shapes: [
+        ['ellipse', { cx: 12, cy: 5, rx: 9, ry: 3 }],
+        path('M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5'),
+        path('M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3'),
+    ] },
+    google: { viewBox: '0 0 24 24', paint: 'none', shapes: [
+        ['path', { fill: '#4285F4', d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' }],
+        ['path', { fill: '#34A853', d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' }],
+        ['path', { fill: '#FBBC05', d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z' }],
+        ['path', { fill: '#EA4335', d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' }],
+    ] },
+    microsoft: { viewBox: '0 0 21 21', paint: 'none', shapes: [
+        ['rect', { x: 1, y: 1, width: 9, height: 9, fill: '#F25022' }],
+        ['rect', { x: 11, y: 1, width: 9, height: 9, fill: '#7FBA00' }],
+        ['rect', { x: 1, y: 11, width: 9, height: 9, fill: '#00A4EF' }],
+        ['rect', { x: 11, y: 11, width: 9, height: 9, fill: '#FFB900' }],
+    ] },
+};
+
+/** The built-in set. */
+export const ICONS = new IconSet(ICON_DEFS);
+
+/** A built-in icon as an el() spec — `ICONS.spec(name, options)`. */
+export const icon = (name, options) => ICONS.spec(name, options);
+
+export { IconSet };

package/src/index.js

@@ -33,6 +33,8 @@ import { LagPlotChart } from './charting/charts/LagPlotChart.js';
 import { TreemapChart } from './charting/charts/TreemapChart.js';
 import { SunburstChart } from './charting/charts/SunburstChart.js';
 import { OutlineChart } from './charting/charts/OutlineChart.js';
+import { TableChart } from './charting/charts/TableChart.js';
+import { ChartChooser } from './charting/ChartChooser.js';
 import { RadarChart } from './charting/charts/RadarChart.js';
 import { FunnelChart } from './charting/charts/FunnelChart.js';
 import { WaterfallChart } from './charting/charts/WaterfallChart.js';
@@ -96,7 +98,7 @@ import { ArchimateSpecializationRegistry } from './archimateSpecializations.js';
 import { ArchimateSpecializationSelector } from './charting/ArchimateSpecializationSelector.js';
 import { ImageSelector } from './charting/ImageSelector.js';
 import { CheckboxTreeSelector } from './charting/CheckboxTreeSelector.js';
-import { SettingsManager, settingsManager } from './charting/SettingsManager.js';
+import { SettingsManager, settingsManager, TREE_SETTINGS_PROPERTIES } from './charting/SettingsManager.js';
 import { showGlobalSettingsDialog } from './charting/SettingsDialog.js';
 import { ArchimateModel, ArchimateView } from './charting/diagrams/ArchimateModel.js';
 import { CanvasView } from './charting/diagrams/CanvasView.js';
@@ -144,6 +146,7 @@ import { PopupMenu } from './charting/PopupMenu.js';
 import { ViewTabStrip } from './charting/ViewTabStrip.js';
 import { EditorShell } from './workspace/EditorShell.js';
 import { FormDialog } from './charting/FormDialog.js';
+import { Dialog } from './charting/Dialog.js';
 import { ColorField } from './charting/ColorField.js';
 import { TextStyle } from './charting/TextStyle.js';
 import { ArchimateModelChecker } from './charting/diagrams/ArchimateModelChecker.js';
@@ -158,6 +161,10 @@ import { PropertiesPanel } from './charting/PropertiesPanel.js';
 import { MenuBar } from './charting/MenuBar.js';
 import { ArchimateDiagramEditor } from './charting/ArchimateDiagramEditor.js';
 import { ModelTree } from './charting/modelTree/ModelTree.js';
+import { TreeBuilder } from './charting/modelTree/TreeBuilder.js';
+import { ContentSource } from './charting/content/ContentSource.js';
+import { ContentSources } from './charting/content/ContentSources.js';
+import { DUPLICATE_OPTIONS, NOISE_WORDS, FILLER_WORDS, duplicateGroups, duplicateKey, wordKey, nameKey } from './charting/diagrams/duplicates.js';
 import { TreeModeRegistry } from './charting/modelTree/TreeModeRegistry.js';
 import { TREE_MODE_CATALOG, treeModeRegistry, getTreeModeCatalogEntry } from './treeModeCatalog.js';
 import { buildModelTreePanel } from './charting/modelTree/ModelTreePanel.js';
@@ -210,20 +217,21 @@ import {
 // separate browser-only entry: import 'renderengine/src/workspace.js' directly.
 
 export {
-  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry,
+  Mat4, OrbitCamera, CHART_CATALOG, getChartCatalogEntry, chartRegistry, ChartChooser, TableChart,
   DIAGRAM_CATALOG, getDiagramCatalogEntry, diagramRegistry,
   TREE_MODE_CATALOG, treeModeRegistry, getTreeModeCatalogEntry,
   AXIS_KIND, ENCODING_CHANNEL, COORD_SYSTEM, COLOR_MODE, CAMERA_MODE,
   Command, CompositeCommand, CommandHistory,
-  DiagramEditor, DiagramEditorState, Template, PolygonTemplate, RegularPolygonTemplate, RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate, ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate, EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate, OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate, CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate, PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate, TemplateCatalog, Palette, PropertiesPanel, MenuBar, MoveElementCommand, BringToFrontCommand, SendToBackCommand, RaiseCommand, LowerCommand, CreateTemplateCommand, EditPropertyCommand, ResizeCommand, RotateCommand, SetPropertiesCommand, ReorderCommand, DIAGRAM_TYPES, getTemplatesForDiagramType, getAllDiagramTypes, getDiagramTypesByGroup, EdgeMarker, ArrowMarker, DiamondMarker, CircleMarker, CrowsFootMarker, HollowDiamondMarker, HollowTriangleMarker, OpenArrowMarker, HalfArrowMarker, EDGE_MARKERS, getEdgeMarker, Edge, AddEdgeCommand, DeleteEdgeCommand, ReconnectEdgeCommand, EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH, EdgeStyleCascade, SetStyleCommand, EdgeStyleDialog, DiagramModel, DiagramView, ViewSetModel, ViewMenu, ViewPropertiesDialog, SettingsViewPropertiesDialog, DiagramViewPropertiesDialog, inheritableFields, readInheritableFields, LocalJsonStore, PopupMenu, ViewTabStrip, EditorShell, FormDialog, ToolbarItem, ToolbarButton, ToolbarMenu, ToolbarSelect, ToolbarCheckbox, ToolbarText, ToolbarSeparator, pickFile, reorderedZ, stackingOrder, MoveWaypointCommand, AddWaypointCommand, DeleteWaypointCommand,
+  DiagramEditor, DiagramEditorState, Template, PolygonTemplate, RegularPolygonTemplate, RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate, ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate, EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate, OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate, CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate, PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate, TemplateCatalog, Palette, PropertiesPanel, MenuBar, MoveElementCommand, BringToFrontCommand, SendToBackCommand, RaiseCommand, LowerCommand, CreateTemplateCommand, EditPropertyCommand, ResizeCommand, RotateCommand, SetPropertiesCommand, ReorderCommand, DIAGRAM_TYPES, getTemplatesForDiagramType, getAllDiagramTypes, getDiagramTypesByGroup, EdgeMarker, ArrowMarker, DiamondMarker, CircleMarker, CrowsFootMarker, HollowDiamondMarker, HollowTriangleMarker, OpenArrowMarker, HalfArrowMarker, EDGE_MARKERS, getEdgeMarker, Edge, AddEdgeCommand, DeleteEdgeCommand, ReconnectEdgeCommand, EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH, EdgeStyleCascade, SetStyleCommand, EdgeStyleDialog, DiagramModel, DiagramView, ViewSetModel, ViewMenu, ViewPropertiesDialog, SettingsViewPropertiesDialog, DiagramViewPropertiesDialog, inheritableFields, readInheritableFields, LocalJsonStore, PopupMenu, ViewTabStrip, EditorShell, Dialog, FormDialog, ToolbarItem, ToolbarButton, ToolbarMenu, ToolbarSelect, ToolbarCheckbox, ToolbarText, ToolbarSeparator, pickFile, reorderedZ, stackingOrder, MoveWaypointCommand, AddWaypointCommand, DeleteWaypointCommand,
   ebnfAstToDiagram, parseEbnf,
   createDataWindow, GraphDataWindow,
   ArchimateNotation, ArchimateLayer, ArchimateElementType, ArchimateRelationshipType,
   Glyph, GLYPHS, glyphFor, drawGlyph, glyphElement, glyphToSvg, GlyphTemplate, ArchimateElementTemplate, ArchimateEdge, ArchimateCanvasEditor, ArchimatePalette, KIND_PREFERENCE, ARCHIMATE_TYPE_MIME,
   ArchimateModel, ArchimateView, CanvasView, PlaceItemsCommand, RemoveLineCommand, CanvasBoxKind, CANVAS_BOX_KINDS, canvasBoxKind, canvasBoxMenuItems, ArchiHint, HintPanel, EditHintCommand, hintMenuItems, CanvasPalette, CANVAS_BOX_MIME, ViewLineEdge, Arrangement, ItemGroup, BackgroundGroup, GroupCommand, UngroupCommand, LockCommand, BackgroundCommand, arrangeMenuItems, TemplateLibrary, CanvasTemplateLibrary, CanvasTemplateMenu, DEFAULT_CANVAS_TEMPLATES, canvasTemplate, EditViewItemCommand, viewItemChanges, ColorField, TextStyle, ArchimateModelChecker, ViewSetChecker, ViewFit, archiElementType, NEAREST_ARCHI_TYPE, ElementInstance, ViewObjectInstance, RelationshipInstance, ArchimateDiagramEditor,
   ITIconNotation, ITElementType,
-  ArchimateValidator, ArchimateSpecializationSelector, ImageSelector, CheckboxTreeSelector, SettingsManager, settingsManager,
-  ModelTree, TreeModeRegistry,
+  ArchimateValidator, ArchimateSpecializationSelector, ImageSelector, CheckboxTreeSelector, SettingsManager, settingsManager, TREE_SETTINGS_PROPERTIES,
+  ModelTree, TreeBuilder, TreeModeRegistry, ContentSource, ContentSources,
+  DUPLICATE_OPTIONS, NOISE_WORDS, FILLER_WORDS, duplicateGroups, duplicateKey, wordKey, nameKey,
   RadialLayout, DerivedRelationships, EdgeGeometry,
   buildModelTreePanel, buildAnalysisPanel, buildAnalysisData, buildTypeCategoryTree, buildPropertyTree, DiagramTabs,
   DataModelNotation, DataModelLevel, AttributedLevel, ConceptualLevel, LogicalLevel, PhysicalLevel, NotationStyle, RelationshipKind, AssociationKind, GeneralizationKind, EntityRole, FactRole, DimensionRole,
@@ -251,6 +259,11 @@ export {
  * @class RenderEngine
  * This class decides which renderer to use and provides a unified drawing API.
  */
+// Navigation menus (a sidebar's): DOM built from JSON, safe to import under node.
+export { NavEntry, NavItem, NavGroup, NavSection, NavMenu } from './workspace/nav/index.js';
+// Named icons as data (an <svg> spec each); the built-in pool and its class.
+export { IconSet, ICONS, ICON_DEFS, icon } from './icons/index.js';
+
 export class RenderEngine {
     /** Layout constants for graphDiagram's `shape: 'table'` node type. */
     static TABLE_NODE = NodeGeometry.TABLE_NODE;
@@ -439,8 +452,12 @@ export class RenderEngine {
      * @param {HTMLElement} container The container element for the chart.
      * @param {object} [options]
      * @param {'canvas' | 'svg'} [options.rendererType='canvas']
+     * @param {false|{wheelModifier?: 'ctrl'|'alt'|'shift'}} [options.zoom] - SVG wheel zoom: off, or only
+     *   with a modifier held (so a plain wheel scrolls the page); on, with a plain wheel, by default
      */
     constructor(container, options = {}) {
+        // Kept: the engines refreshChart() makes for other containers are made with the same options.
+        this.options = options;
         if (container) {
             const { rendererType = 'canvas' } = options;
             const width = container.clientWidth;
@@ -448,11 +465,9 @@ export class RenderEngine {
     
             this.container = container; // Store container for event listeners
             this.renderer = RendererFactory.create(rendererType, container, width, height);
-        } else {
-            // Allow initialization without a container for testing
-            this.options = options;
-            console.log('RenderEngine initialized in test mode.');
         }
+        // No container: a test, or an engine keeping a page of registered
+        // charts, each drawn in its own element (refreshChart).
 
         if (this.container) {
             this._interactions = new InteractionManager(this);
@@ -1404,6 +1419,24 @@ export class RenderEngine {
         this._renderChart(new FunnelChart(this.renderer, data, options));
     }
 
+    /**
+     * Renders rows as a table — a header of column names, a row per record, numeric columns
+     * right-aligned, values shown exactly. Drawn with the renderer's primitives, so it works under
+     * SVG and canvas. ChartChooser offers it for any result, last.
+     * @param {Array<object>} data one object per row
+     * @param {object} [options]
+     * @param {Array<string|{key:string, label?:string, align?:'start'|'end'}>} [options.columns] every key of the first row when absent
+     * @param {number} [options.maxRows] rows beyond it are counted, not drawn
+     * @param {string} [options.nullText] what a null or missing value shows ('—')
+     * @param {string} [options.title]
+     */
+    tableChart(data, options = {}) {
+        if (!this.renderer) return;
+        this._chart3D = false;
+        this._chartState = { type: 'table', data, options };
+        this._renderChart(new TableChart(this.renderer, data, options));
+    }
+
     /**
      * Renders a waterfall chart — running-total bars, each floating from the
      * previous cumulative value to the new one (a "delta" bar), except
@@ -2588,7 +2621,10 @@ export class RenderEngine {
 
     /**
      * Refreshes a registered chart, re-resolving its data and re-invoking
-     * its render method.
+     * its render method, in the element with that id: this engine's own
+     * container, or — so one engine can keep a page of charts — an engine of
+     * its own for that element, made with this engine's options and kept
+     * (so a zoom survives the next refresh) while the element is the same.
      * @param {string} id Chart container ID
      */
     refreshChart(id) {
@@ -2596,7 +2632,46 @@ export class RenderEngine {
         const config = this.registry[id];
         const container = document.getElementById(id);
         if (!container) return;
+        const target = this._engineFor(id, container);
+        if (target !== this) target.fitToContainer();
+        target._drawRegistered(config);
+    }
+
+    /** Every registered chart, refreshed. */
+    refreshAll() {
+        for (const id of Object.keys(this.registry ?? {})) this.refreshChart(id);
+    }
+
+    /**
+     * Set the data registered charts read by `dataPath`, and refresh them all —
+     * a live page's poll: `engine.setData(await fetchMetrics())`.
+     * @param {object} data
+     */
+    setData(data) {
+        this.setGlobalData(data);
+        this.refreshAll();
+    }
+
+    /** The engine that draws into `container` for registered chart `id`. @private */
+    _engineFor(id, container) {
+        if (container === this.container) return this;
+        this._childEngines ??= new Map();
+        let engine = this._childEngines.get(id);
+        if (engine?.container !== container) {
+            engine = this._newEngine(container);
+            this._childEngines.set(id, engine);
+        }
+        engine.globalData = this.globalData;
+        return engine;
+    }
+
+    /** An engine for another container, with this one's options. @private */
+    _newEngine(container) {
+        return new RenderEngine(container, this.options);
+    }
 
+    /** Draw a registration (`{type, options}`) with this engine. @private */
+    _drawRegistered(config) {
         // Catalog keys ('bar', 'heatmap', 'graph', 'archimate', ...) resolve
         // through the registries to their real method name; railroadDiagram
         // isn't a registry entry, so `type` already IS the method name there.
@@ -2613,6 +2688,7 @@ export class RenderEngine {
             this[methodName](config.options.nodes, config.options.edges || [], config.options);
         } else {
             const data = config.options.data || this.resolvePath(config.options.dataPath, config.options.dataMapper);
+            if (data === undefined) return; // registered before its data has arrived
             this[methodName](data, config.options);
         }
     }