@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/DiagramEditor.js

@@ -0,0 +1,3330 @@
+import { TemplateCatalog } from './TemplateCatalog.js';
+import { Palette } from './Palette.js';
+import { getTemplatesForDiagramType, getDiagramTypesByGroup } from './DiagramTypeRegistry.js';
+import { EdgeGeometry } from './diagrams/EdgeGeometry.js';
+import { AddEdgeCommand, DeleteEdgeCommand, AddWaypointCommand, DeleteWaypointCommand, MoveWaypointCommand, ReconnectEdgeCommand } from './DiagramEditorEdgeCommands.js';
+import { CompositeCommand } from './CommandHistory.js';
+import { getEdgeMarker } from './edgeMarkers/index.js';
+import { PopupMenu } from './PopupMenu.js';
+import { TextStyle, TEXT_STYLE_KEYS } from './TextStyle.js';
+import { FormDialog } from './FormDialog.js';
+import { NoteTemplate } from './templates/NoteTemplate.js';
+import { parseShapeText, placeShapes } from './textToShapes.js';
+import { ViewFit } from './ViewFit.js';
+import { HighlightRule } from './emphasis/HighlightRule.js';
+import { DiagramClipboard } from './DiagramClipboard.js';
+
+/** How far each paste without a place lands from the last one. */
+const PASTE_STEP = 20;
+
+/** The presses that pan the view: the right button, the middle one, or Shift+left. */
+const PAN_BUTTON = (e) => e.button === 2 || e.button === 1 || (e.button === 0 && e.shiftKey);
+/** How far a press moves before it is a pan (a right-click under it opens the menu). */
+const PAN_THRESHOLD = 4;
+
+/** The fields a shape's properties dialog has for the shape itself (its text style comes from TextStyle). */
+const SHAPE_FIELD_KEYS = Object.freeze(['name', 'x', 'y', 'zIndex', 'fillColor', 'strokeColor', 'textColor']);
+
+/** How a line with a warning (edgeWarning) is drawn: red and dashed, as the graph engine draws an invalid relationship. */
+const WARNING_COLOR = '#e74c3c';
+const WARNING_DASH = '4 3';
+import { EMPHASIS_OPACITY, strongerEmphasis } from './emphasis/EmphasisRule.js';
+import { downloadPng, downloadSvg, copyImage, prepareSvgMarkup } from '../exportImage.js';
+import { el } from '../workspace/dom.js';
+import { applyViewDecorations } from './viewDecorations.js';
+import { ToolbarButton, ToolbarMenu, ToolbarText } from './toolbar/index.js';
+import { Edge } from './Edge.js';
+import { PropertiesPanel } from './PropertiesPanel.js';
+import {
+    MoveElementCommand, BringToFrontCommand, SendToBackCommand, RaiseCommand, LowerCommand,
+    ResizeCommand, RotateCommand, SetPropertiesCommand, DeleteTemplateCommand, CreateTemplateCommand,
+} from './DiagramEditorCommands.js';
+import { Arrangement, GroupCommand, UngroupCommand, LockCommand, arrangeMenuItems, align, distribute, matchSize, ALIGNMENTS, DISTRIBUTIONS, SIZE_MATCHES, layout, nestLayout, LAYOUTS } from './arrangement/index.js';
+import {
+    EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH, EdgeStyleCascade, SetStyleCommand, EdgeStyleDialog,
+} from './edgeStyle/index.js';
+
+/**
+ * DiagramEditor — base class for diagram editors (templates, ArchiMate, ...).
+ *
+ * Draws Templates and Edges into an SVG and provides the shared editing
+ * machinery: selection, drag/resize/rotate, waypoints, reconnect, line-style
+ * levels, stacking order, undo via `history`, keyboard shortcuts, zoom/pan,
+ * the palette and toolbar items (`menuBarItems()`).
+ *
+ * A subclass that draws through another engine (ArchimateDiagramEditor)
+ * overrides `render()`, `history` and `_canvasSvg()`, passes
+ * `enableCanvasInteractions: false`, and keeps its own shell (tree, tabs,
+ * toolbar container) to itself.
+ */
+export class DiagramEditor {
+    /**
+     * @param {Object} options
+     * @param {string} [options.diagramContainerId] - Id of the SVG (or its container) to draw into
+     * @param {string} [options.templateType] - Palette category (DiagramTypeRegistry key)
+     * @param {Map} [options.templates] - Bind to these shapes (e.g. a DiagramView's)
+     * @param {Map} [options.edges] - Bind to these lines
+     * @param {Arrangement} [options.arrangement] - Groups and locks (e.g. a DiagramView's); a new one by default
+     * @param {CommandHistory} [options.history]
+     * @param {Array} [options.edgeStyleLevels] - Line-style levels, most specific first
+     * @param {Function} [options.onTemplateTypeChange]
+     * @param {boolean} [options.enableKeyboardShortcuts] - Undo/redo/delete keys (default true)
+     * @param {boolean} [options.enableCanvasInteractions] - Zoom, pan and canvas clicks (default true)
+     */
+    constructor(options = {}) {
+        const {
+            diagramContainerId = 'diagram',
+            templateType = 'generic',
+            enableKeyboardShortcuts = true,
+            enableCanvasInteractions = true,
+        } = options;
+
+        this.diagramContainerId = diagramContainerId;
+        this.templateType = templateType;
+        /** The model whose views this editor shows (a ViewSetModel), when there is one: it names the checks and the image. */
+        this.model = options.model ?? null;
+
+        // Interaction capabilities
+        this._dragState = null;
+        this._history = options.history ?? null;
+        /** Teardown for listeners that outlive the canvas (document-level). */
+        this._disposers = [];
+
+        // Template management
+        // Bound to the caller's maps when given (e.g. a DiagramView), so edits need no copying back.
+        this.templates = options.templates ?? new Map();  // id -> Template
+        this.templateCatalog = null;  // Set by subclass or initPaletteForDiagramType()
+        this.palette = null;  // Set by subclass or initPalette()
+        this.onTemplateTypeChange = options.onTemplateTypeChange ?? null;
+        /** Line style defaults a line inherits, most specific first: [{key, label, style}]. */
+        this.edgeStyleLevels = options.edgeStyleLevels ?? [{ key: 'tool', label: 'Tool', style: {} }];
+        /** The current view's resolved settings, from the host (SettingsManager#getEffectiveSettings); see viewSettings(). */
+        this._viewSettings = options.viewSettings ?? null;
+        this.propertiesPanel = null;  // Set by subclass or initPropertiesPanel()
+        /** The primary selected shape (handles and the properties panel follow it). */
+        this.selectedTemplateId = null;
+        /** Every selected shape, the primary one included (Shift/Ctrl+click adds and removes). */
+        this.selectedIds = new Set();
+        /** Which shapes move as one (groups) and which are fixed in place (locks). */
+        this.arrangement = options.arrangement ?? new Arrangement();
+
+        // Edge management
+        this.edges = options.edges ?? new Map();  // id -> Edge
+        this.selectedEdgeId = null;
+        this.connectMode = null;  // 'click' or 'drag' or null
+        this.connectSource = null;  // template id of source for click-to-connect
+
+        // Grid settings
+        /** Off unless asked for (the `showGrid` option, or ⚙ Settings → Grid), as the settings' default says. */
+        this.showGrid = options.showGrid ?? false;
+        this.gridSize = 20;
+
+        // Zoom and pan
+        this.zoomLevel = 1.0;
+        this.panX = 0;
+        this.panY = 0;
+
+        if (typeof window !== 'undefined') {
+            if (enableKeyboardShortcuts) this._initializeKeyboardShortcuts();
+            // Off for subclasses whose drawing engine owns zoom, pan and canvas clicks.
+            if (enableCanvasInteractions) {
+                this._initializeZoomAndPan();
+                this._initializeCanvasSelection();
+            }
+        }
+    }
+
+    /**
+     * Undo history that commands and the undo/redo shortcuts use. Subclasses
+     * whose history lives elsewhere (e.g. one per view) override this accessor.
+     * @type {CommandHistory|null}
+     */
+    get history() {
+        return this._history;
+    }
+
+    set history(history) {
+        this._history = history;
+    }
+
+    // ===== INTERACTION CAPABILITIES =====
+    // Provided by base class, can be used or overridden by subclasses
+
+    /** addEventListener that dispose() undoes. @protected */
+    _listen(target, type, fn, options) {
+        target.addEventListener(type, fn, options);
+        this._disposers.push(() => target.removeEventListener(type, fn, options));
+    }
+
+    /**
+     * Detach document-level listeners. Call before discarding an editor whose
+     * page lives on (e.g. when a host rebuilds the canvas), or stale editors
+     * keep answering keyboard shortcuts.
+     */
+    /** Stop listening, and draw no more (a part that redraws makes a new editor). */
+    dispose() {
+        this.disposed = true;
+        for (const off of this._disposers.splice(0)) off();
+    }
+
+    /**
+     * Initialize keyboard shortcuts (Ctrl+Z for undo, Ctrl+Y for redo).
+     * Calls undo()/redo() hooks that subclass implements.
+     * @protected
+     */
+    _initializeKeyboardShortcuts() {
+        if (typeof document === 'undefined') return;
+        this._listen(document, 'keydown', (e) => {
+            // Keys typed into a dialog field belong to that field (Backspace edits text, not the diagram).
+            if (e.target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+            // Only the drawing on screen: an editor in a hidden tab (another model) leaves keys alone.
+            if (!this.isShown()) return;
+            if (e.key === 'Escape' && this.formatPainter) this.setFormatPainter(false);
+            if ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {
+                e.preventDefault();
+                this.undo();
+            }
+            if ((e.ctrlKey || e.metaKey) && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+                e.preventDefault();
+                this.redo();
+            }
+            // Ctrl+G groups the selection, Ctrl+Shift+G ungroups, Ctrl+L locks or frees it.
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'g' && this.selectedTemplateId) {
+                e.preventDefault();
+                if (e.shiftKey) this.ungroup(this.selectedTemplateId);
+                else this.groupSelection();
+            }
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'l' && this.selectedTemplateId) {
+                e.preventDefault();
+                const ids = this.getSelectedIds();
+                this.setLocked(ids, !ids.every(id => this.arrangement.isLocked(id)));
+            }
+            // Ctrl+C copies the selection, Ctrl+X cuts it, Ctrl+V pastes, Ctrl+D duplicates.
+            if ((e.ctrlKey || e.metaKey) && !e.shiftKey && !e.altKey) {
+                const act = { c: () => this.copySelection(), x: () => this.cutSelection(), v: () => this.paste(), d: () => this.duplicateSelection() }[e.key.toLowerCase()];
+                if (act) { e.preventDefault(); act(); }
+            }
+            // Ctrl+A selects every shape.
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') {
+                e.preventDefault();
+                this.selectTemplates(this.selectableIds());
+            }
+            // The arrow keys move the selection a grid step (one pixel without a grid; ten times with Shift).
+            const ARROWS = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+            if (ARROWS[e.key] && this.selectedTemplateId && !e.ctrlKey && !e.metaKey && !e.altKey) {
+                e.preventDefault();
+                const step = (this.showGrid && this.gridSize ? this.gridSize : 1) * (e.shiftKey ? 10 : 1);
+                this.nudgeSelection(ARROWS[e.key][0] * step, ARROWS[e.key][1] * step);
+            }
+            if (e.key === 'Delete' || e.key === 'Backspace') {
+                e.preventDefault();
+                // Delete the selected shapes, or the selected line, once confirmed
+                if (this.selectedTemplateId) {
+                    this.deleteSelection();
+                } else if (this.selectedEdgeId) {
+                    if (confirm('Delete this edge?')) {
+                        this.deleteEdge(this.selectedEdgeId);
+                    }
+                }
+            }
+        });
+    }
+
+    /**
+     * Initialize zoom and pan controls.
+     * @protected
+     */
+    _initializeZoomAndPan() {
+        if (typeof document === 'undefined') return;
+        const container = document.getElementById(this.diagramContainerId);
+        if (!container) return;
+
+        // Zoom with mouse wheel
+        container.addEventListener('wheel', (e) => {
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? 0.9 : 1.1;
+                this.zoomLevel = Math.max(0.1, Math.min(5, this.zoomLevel * delta));
+                this.render();
+            }
+        });
+
+        // Pan with the right button (a right-click that does not move still opens the menu),
+        // the middle button, or Shift+left; a plain left drag on empty canvas selects (a box).
+        let isPanning = false, panMoved = false;
+        let panStartX = 0, panStartY = 0;
+        let panStartPanX = 0, panStartPanY = 0;
+
+        container.addEventListener('mousedown', (e) => {
+            if (PAN_BUTTON(e)) {
+                isPanning = true;
+                panMoved = false;
+                panStartX = e.clientX;
+                panStartY = e.clientY;
+                panStartPanX = this.panX;
+                panStartPanY = this.panY;
+                if (e.button !== 2) e.preventDefault();
+            }
+        });
+
+        this._listen(document, 'mousemove', (e) => {
+            if (isPanning) {
+                const dx = e.clientX - panStartX;
+                const dy = e.clientY - panStartY;
+                if (!panMoved && Math.hypot(dx, dy) < PAN_THRESHOLD) return;
+                panMoved = true;
+                this.panX = panStartPanX + dx;
+                this.panY = panStartPanY + dy;
+                this.render();
+            }
+        });
+
+        this._listen(document, 'mouseup', () => {
+            isPanning = false;
+        });
+        // A right-drag that panned is not a right-click: no menu (listened first, before any shape's own).
+        container.addEventListener('contextmenu', (e) => {
+            if (!panMoved) return;
+            panMoved = false;
+            e.preventDefault();
+            e.stopPropagation();
+        }, true);
+    }
+
+    /**
+     * Attach all interaction handlers to an element (click, drag, properties, ordering).
+     * Subclass calls this once per element during render.
+     * @param {string} elementId - Element identifier
+     * @param {SVGElement} svgElement - SVG element to attach handlers to
+     * @protected
+     */
+    attachElementHandlers(elementId, svgElement) {
+        if (!svgElement) return;
+        svgElement.addEventListener('click', (e) => {
+            e.stopPropagation();
+            if (this.formatPainter) { this.formatPainterClick(elementId); return; }
+            this.selectTemplate(elementId, { extend: e.shiftKey || e.ctrlKey || e.metaKey });
+        });
+        this.enableDragHandling(elementId, svgElement);
+        this.enableDoubleClickProperties(elementId, svgElement);
+        this.enableContextMenu(elementId, svgElement);
+    }
+
+    /**
+     * Set up drag handling on an SVG element.
+     * Calls onDragEnd(id, dx, dy) hook that subclass implements.
+     * @param {string} elementId - Element identifier
+     * @param {SVGElement} svgElement - SVG element to attach handler to
+     * @protected
+     */
+    enableDragHandling(elementId, svgElement) {
+        if (!svgElement) return;
+        svgElement.addEventListener('mousedown', (e) => this._handleDragStart(elementId, e));
+    }
+
+    /**
+     * Start drag operation.
+     * @protected
+     */
+    _handleDragStart(elementId, e) {
+        if (e.button !== 0) return;   // the right button pans, and opens the menu
+        // A drag, not the browser's text selection (or a drag of selected text).
+        e.preventDefault();
+        if (this.formatPainter) return;   // a click paints; nothing moves
+        // Everything that moves with this shape: the selection it is part of, with their groups.
+        const movers = this.moversFor(elementId);
+        if (!movers.length) return;   // something among them is locked
+        const dragStart = { x: e.clientX, y: e.clientY };
+        let dragAccum = { x: 0, y: 0 };
+
+        const onDrag = (e) => {
+            const dx = e.clientX - dragStart.x;
+            const dy = e.clientY - dragStart.y;
+            dragAccum.x += dx;
+            dragAccum.y += dy;
+            dragStart.x = e.clientX;
+            dragStart.y = e.clientY;
+            this.onDragMove(elementId, dx, dy);  // Pass delta for this frame, not accumulated total
+        };
+
+        const endDrag = () => {
+            if (dragAccum.x !== 0 || dragAccum.y !== 0) {
+                this.onDragEnd(elementId, dragAccum.x, dragAccum.y);
+            }
+            document.removeEventListener('mousemove', onDrag);
+            document.removeEventListener('mouseup', endDrag);
+            this._dragState = null;
+        };
+
+        this._dragState = { elementId, startX: dragStart.x, startY: dragStart.y, movers };
+        document.addEventListener('mousemove', onDrag);
+        document.addEventListener('mouseup', endDrag);
+    }
+
+    /**
+     * Enable double-click to show properties dialog.
+     * Calls showPropertiesDialog(id) hook that subclass implements.
+     * @param {string} elementId - Element identifier
+     * @param {SVGElement} svgElement - SVG element to attach handler to
+     * @protected
+     */
+    enableDoubleClickProperties(elementId, svgElement) {
+        if (!svgElement) return;
+        svgElement.addEventListener('dblclick', (e) => {
+            e.stopPropagation();
+            this.showPropertiesDialog(elementId);
+        });
+    }
+
+    /**
+     * Enable right-click context menu with ordering options.
+     * Calls executeOrderCommand(id, operation) hook that subclass implements.
+     * @param {string} elementId - Element identifier
+     * @param {SVGElement} svgElement - SVG element to attach handler to
+     * @protected
+     */
+    enableContextMenu(elementId, svgElement) {
+        if (!svgElement) return;
+        svgElement.addEventListener('contextmenu', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this._showOrderingMenu(elementId, e.clientX, e.clientY);
+        });
+    }
+
+    /**
+     * Show context menu with ordering options.
+     * @protected
+     */
+    _showOrderingMenu(elementId, x, y) {
+        const template = this.getTemplate(elementId);
+        if (!template) return;
+        const many = this.selectedIds.has(elementId) && this.selectedIds.size > 1;
+        this._showMenu(x, y, [
+            many
+                ? { label: `⚙ Properties of ${this.selectedIds.size} shapes`, action: () => this.editSelectionProperties() }
+                : { label: '⚙ Properties', action: () => this.editTemplateProperties(template) },
+            { separator: true },
+            ...this.clipboardMenuItems(elementId),
+            ...this.formatMenuItems(elementId),
+            ...this.nestMenuItems(elementId),
+            { label: 'Fit to text', action: () => this.fitToText(this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId]) },
+            { separator: true },
+            this.orderMenuItem(elementId),
+            ...this.arrangeMenuItems(elementId),
+            ...this.alignMenuItems(),
+            ...(() => { const extra = this.shapeMenuExtras(elementId); return extra.length ? [{ separator: true }, ...extra] : []; })(),
+            { separator: true },
+            { label: '🗑 Delete', danger: true, action: () => { if (confirm(`Delete "${template.name}"?`)) this.deleteTemplate(elementId); } },
+        ]);
+    }
+
+    /** More items for a shape's menu (a subclass's: save as template, ...). */
+    shapeMenuExtras(_elementId) {
+        return [];
+    }
+
+    /**
+     * The menu for empty canvas at `at` (drawing coordinates); none here, a
+     * subclass offers its own (place a template, ...).
+     */
+    canvasMenuItems(at) {
+        return [{ label: 'Add from text…', action: () => this.askAddFromText(at) }];
+    }
+
+    /**
+     * Close context menu.
+     * @protected
+     */
+    _closeContextMenu() {
+        PopupMenu.close();
+    }
+
+    /**
+     * Show context menu for edges (delete and properties).
+     * @private
+     */
+    _showEdgeContextMenu(edgeId, x, y) {
+        const edge = this.getEdge(edgeId);
+        if (!edge) return;
+        const at = this._clientToDiagram(x, y);
+        const bends = edge.waypoints.length;
+        this._showMenu(x, y, [
+            { label: '⚙ Properties', action: () => this._showEdgeProperties(edge) },
+            { separator: true },
+            ...(at ? [{ label: 'Add waypoint here', action: () => this.addWaypoint(edgeId, at) }] : []),
+            ...(bends ? [{ label: `Straighten (remove ${bends} waypoint${bends === 1 ? '' : 's'})`, action: () => this.clearWaypoints(edgeId) }] : []),
+            { separator: true },
+            { label: '🗑 Delete', danger: true, action: () => { if (confirm('Delete this edge?')) this.deleteEdge(edgeId); } },
+        ]);
+    }
+
+    /** Items whose stacking order the ordering commands manage (see zOrder.js). */
+    layerItems() {
+        return this.getAllTemplates();
+    }
+
+    /**
+     * Change a template's place in the stacking order as one undo step.
+     * @param {string} elementId
+     * @param {'front'|'back'|'raise'|'lower'} operation
+     */
+    /**
+     * The "Order" submenu for a shape: bring to front, send to back, raise,
+     * lower, each through executeOrderCommand. Every editor's shape menu uses
+     * it, so ordering reads and works the same everywhere.
+     */
+    orderMenuItem(elementId) {
+        return {
+            label: DiagramEditor.ORDER_MENU_LABEL,
+            items: DiagramEditor.ORDER_OPERATIONS.map(([operation, label]) => ({
+                label, action: () => this.executeOrderCommand(elementId, operation),
+            })),
+        };
+    }
+
+    /**
+     * Group, ungroup, lock and unlock for a shape's menu. They act on the
+     * selection when the shape is part of it, else on the shape (and an item in
+     * a group locks or frees its whole group).
+     */
+    arrangeMenuItems(elementId) {
+        const ids = this.selectedIds.has(elementId) ? [elementId, ...this.getSelectedIds().filter(id => id !== elementId)] : [elementId];
+        return arrangeMenuItems(this.arrangement, ids, {
+            group: (items) => this.groupSelection(items),
+            ungroup: (id) => this.ungroup(id),
+            setLocked: (items, locked) => this.setLocked(items, locked),
+        });
+    }
+
+    /**
+     * Whether a shape is fixed: locked itself or in a locked group (a template's
+     * background, say). A fixed shape is not moved, resized, reordered, edited or
+     * deleted until it is unlocked.
+     */
+    isFixed(id) {
+        return this.arrangement.isLocked(id);
+    }
+
+    /** Say that something is locked and how to change it. */
+    tellLocked(name = 'This', id = this.selectedTemplateId) {
+        const group = this.arrangement.groupOf(id ?? '');
+        new FormDialog({
+            title: 'Locked',
+            description: `${name} is locked${group?.pinnedToBack ? ' (part of the background)' : ''}. Unlock it (right-click, Unlock) to change it.`,
+            fields: [],
+            submitLabel: 'OK',
+            document: this.document ?? document,
+            onApply: () => {},
+        }).open();
+    }
+
+    /** Group the selection (or the given shapes) so they move as one. One undo step. */
+    groupSelection(ids = this.getSelectedIds()) {
+        if (this.arrangement.movers(ids).size < 2) return null;
+        const cmd = new GroupCommand(this.arrangement, ids);
+        this._executeCommand(cmd);
+        return cmd.groupId;
+    }
+
+    /** Dissolve the group a shape is in. One undo step. */
+    ungroup(id) {
+        if (!this.arrangement.groupOf(id)) return;
+        this._executeCommand(new UngroupCommand(this.arrangement, id));
+    }
+
+    /** Fix shapes (or their groups) in place, or free them. One undo step. */
+    setLocked(ids, locked) {
+        this._executeCommand(new LockCommand(this.arrangement, ids, locked));
+    }
+
+    /**
+     * The shapes that move when this one is dragged: the selection it is part of
+     * (or just it), with their groups and what each contains, as shapes on this
+     * diagram. Empty when any of them is locked.
+     */
+    moversFor(elementId) {
+        const ids = this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId];
+        if (!this.arrangement.canMove(ids)) return [];
+        const movers = new Set(this.arrangement.movers(ids));
+        // What a container holds goes with it, however deep.
+        const queue = [...movers];
+        while (queue.length) {
+            for (const inner of this.containedIn(queue.shift())) {
+                if (!movers.has(inner)) { movers.add(inner); queue.push(inner); }
+            }
+        }
+        return [...movers].filter(id => this.getTemplate(id));
+    }
+
+    /**
+     * The shapes drawn inside this one, which move with it (one level; their
+     * own contents follow). None here; a subclass with containers (a group, a
+     * canvas block) says what each holds.
+     * @returns {Array<string>}
+     */
+    containedIn(templateId) {
+        return [];
+    }
+
+    executeOrderCommand(elementId, operation) {
+        const CommandClass = {
+            front: BringToFrontCommand,
+            back: SendToBackCommand,
+            raise: RaiseCommand,
+            lower: LowerCommand,
+        }[operation];
+        const template = this.getTemplate(elementId);
+        if (!this.history || !CommandClass || !template) return;
+        const cmd = new CommandClass(this, elementId);
+        this.history.execute(cmd);
+        this.render();
+        this._log(`${template.name} - ${cmd.label} (Z:${template.zIndex})`);
+    }
+
+    /**
+     * Default undo implementation. Uses this.history.
+     */
+    undo() {
+        if (this.history && this.history.undo()) {
+            this.render();
+            this._log('Undo');
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Default redo implementation. Uses this.history.
+     */
+    redo() {
+        if (this.history && this.history.redo()) {
+            this.render();
+            this._log('Redo');
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Log a message to the UI log element (if it exists).
+     * @param {string} msg - Message to log
+     * @protected
+     */
+    _log(msg) {
+        if (typeof document === 'undefined') return;
+        const log = document.getElementById('log');
+        if (!log) return;
+        const line = document.createElement('div');
+        line.textContent = msg;
+        log.appendChild(line);
+        if (log.children.length > 5) log.removeChild(log.firstChild);
+    }
+
+    /**
+     * Render all templates. Subclass can override to add custom logic.
+     * Base implementation calls render() on each template in z-order.
+     * @protected
+     */
+    render() {
+        if (typeof document === 'undefined' || this.disposed) return;
+        const container = document.getElementById(this.diagramContainerId);
+        if (!container) return;
+
+        // Grid in its own group, outside the zoom/pan transform; removed when turned off.
+        if (this.showGrid && container.tagName === 'svg') {
+            let gridGroup = container.querySelector('#grid-layer');
+            if (!gridGroup) {
+                gridGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                gridGroup.id = 'grid-layer';
+                container.insertBefore(gridGroup, container.firstChild);
+            }
+            gridGroup.innerHTML = '';
+            this._renderGrid(container, gridGroup);
+        } else {
+            container.querySelector('#grid-layer')?.remove();
+        }
+
+        const group = container.querySelector('#elements');
+        if (!group) return;
+        group.innerHTML = '';
+
+        // Apply zoom and pan transform only to elements, not grid
+        group.setAttribute('transform', `translate(${this.panX}, ${this.panY}) scale(${this.zoomLevel})`);
+
+        // Sort templates by z-index and render each
+        const sorted = Array.from(this.templates.values())
+            .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));
+
+        for (const template of sorted) {
+            if (template.visible === false) continue;
+            const emphasis = this.templateEmphasis(template);
+            if (emphasis === 'hidden') continue;
+            template.render({ group: this._emphasisGroup(group, emphasis, { 'data-template-id': template.id }), editor: this });
+        }
+
+        // Render edges
+        this._renderEdges(group);
+
+        // The selection's groups and other selected shapes, then the primary shape's handles.
+        this._renderArrangement(group);
+        const selected = this.getSelectedTemplate();
+        if (selected) {
+            this._renderHandles(container, group, selected);
+        }
+        // The view's background, title band and watermark, on the element that holds the drawing.
+        const host = container.parentElement;
+        if (host && container.tagName === 'svg') this.decorateView(host, this.viewSettings());
+        this._notifyRendered();
+    }
+
+    /**
+     * Call `fn` after every render (subclasses' renders included), e.g. so a
+     * MenuBar can refresh the zoom label. Returns an unsubscribe function.
+     */
+    onRendered(fn) {
+        (this._renderedListeners ??= []).push(fn);
+        return () => { this._renderedListeners = this._renderedListeners.filter(l => l !== fn); };
+    }
+
+    /**
+     * Call `fn({ templateId, edgeId })` whenever the selection changes: a shape
+     * or line selected, or nothing (both null). Returns an unsubscribe function.
+     */
+    onSelectionChange(fn) {
+        (this._selectionListeners ??= []).push(fn);
+        return () => { this._selectionListeners = this._selectionListeners.filter(l => l !== fn); };
+    }
+
+    /** @protected */
+    _notifySelection() {
+        const state = { templateId: this.selectedTemplateId ?? null, edgeId: this.selectedEdgeId ?? null };
+        for (const fn of this._selectionListeners ?? []) fn(state);
+    }
+
+    /** @protected */
+    _notifyRendered() {
+        for (const fn of this._renderedListeners ?? []) fn(this);
+    }
+
+    /**
+     * Toolbar items this editor contributes to a MenuBar: zoom, connect mode and
+     * a Settings menu (grid, line-style levels). Subclasses override or extend.
+     * @returns {Array<ToolbarItem>}
+     */
+    menuBarItems() {
+        const zoomBy = (factor) => {
+            this.zoomLevel = Math.min(5, Math.max(0.1, this.zoomLevel * factor));
+            this.render();
+        };
+        return [
+            new ToolbarButton('−', () => zoomBy(0.9), { title: 'Zoom out' }),
+            new ToolbarText(() => `${Math.round(this.zoomLevel * 100)}%`, { minWidth: '40px', textAlign: 'center' }),
+            new ToolbarButton('+', () => zoomBy(1.1), { title: 'Zoom in' }),
+            new ToolbarButton('🔗', () => { this.connectMode = !this.connectMode; }, {
+                title: 'Connect mode: drag between shapes to draw a line', active: () => !!this.connectMode,
+            }),
+            new ToolbarButton('🖌', () => this.setFormatPainter(!this.formatPainter), {
+                title: 'Format painter: click a shape to pick up its format, then click shapes to give it to them (Esc to stop)', active: () => !!this.formatPainter,
+            }),
+            new ToolbarMenu('Arrange', () => this.alignMenuItems({ always: true })),
+            new ToolbarMenu('View', () => this.viewMenuItems()),
+            new ToolbarMenu('⚙ Settings', () => this.settingsMenuItems()),
+        ];
+    }
+
+    /** Ask for the text to highlight shapes by (FormDialog), then highlight them. */
+    askHighlight() {
+        new FormDialog({
+            title: 'Highlight',
+            description: 'Shapes whose name contains this text stay as they are; the others are dimmed. Leave it empty to clear.',
+            fields: [{ key: 'text', label: 'Name contains', type: 'text', value: this.highlight?.text ?? '' }],
+            submitLabel: 'Highlight',
+            document: this.document ?? globalThis.document,
+            onApply: ({ text }) => this.setHighlight(text),
+        }).open();
+    }
+
+    /**
+     * The View menu: zoom to fit, reset zoom, Highlight… and, when the editor
+     * has a model, Check model…. A subclass adds its own.
+     */
+    viewMenuItems() {
+        return [
+            { label: 'Zoom to fit', action: () => this.zoomToFit() },
+            { label: 'Reset zoom', action: () => this.resetZoom() },
+            { separator: true },
+            { label: 'Highlight…', action: () => this.askHighlight() },
+            ...(this.highlight ? [{ label: `Clear highlight ("${this.highlight.text}")`, action: () => this.setHighlight('') }] : []),
+            ...(this.model?.checker ? [{ separator: true }, { label: 'Check model…', action: () => this.showModelCheck() }] : []),
+            { separator: true },
+            { label: 'Colour by…', action: () => this.askColourBy() },
+            { label: 'Add legend of the kinds shown', action: () => this.addKindLegend() },
+        ];
+    }
+
+    /** Export the current view as a picture: PNG, SVG, or a copy to the clipboard. */
+    imageMenuItems() {
+        return [
+            { label: 'Export image (PNG)', action: () => this.exportImage('png') },
+            { label: 'Export image (SVG)', action: () => this.exportImage('svg') },
+            { label: 'Copy image', action: () => this.exportImage('copy') },
+        ];
+    }
+
+    /** Whether the drawing is on the page and not hidden (in a tab not selected, say). */
+    isShown() {
+        const host = this.drawingHost();
+        if (!host) return false;
+        return typeof host.getClientRects === 'function' ? host.getClientRects().length > 0 : true;
+    }
+
+    /** The element the drawing is in (its <svg>, or one holding it). */
+    drawingHost() {
+        const doc = this.document ?? (typeof document !== 'undefined' ? document : null);
+        return doc?.getElementById(this.diagramContainerId) ?? null;
+    }
+
+    /** What an exported picture is called: the current view's name. */
+    imageName() {
+        const view = this.model?.currentView;
+        return view?.title || view?.name || 'diagram';
+    }
+
+    /**
+     * The current view as a picture: 'png' or 'svg' downloads it, 'copy' puts a
+     * PNG on the clipboard (or downloads it where the browser cannot). The grid,
+     * the selection and its handles are left out.
+     * @param {'png'|'svg'|'copy'} format
+     */
+    exportImage(format = 'png') {
+        const host = this.drawingHost();
+        if (!host) return null;
+        const name = this.imageName();
+        return this._withPlainDrawing(() => {
+            if (format === 'svg') return downloadSvg(host, { name });
+            if (format === 'copy') return copyImage(host, { name });
+            return downloadPng(host, { name });
+        });
+    }
+
+    /**
+     * Run `fn` with the drawing shown without grid or selection, then put them
+     * back. The image functions read the drawing before they first wait.
+     * @protected
+     */
+    _withPlainDrawing(fn) {
+        const saved = { showGrid: this.showGrid, selectedTemplateId: this.selectedTemplateId, selectedIds: new Set(this.selectedIds), selectedEdgeId: this.selectedEdgeId };
+        Object.assign(this, { showGrid: false, selectedTemplateId: null, selectedIds: new Set(), selectedEdgeId: null });
+        this.render();
+        try {
+            return fn();
+        } finally {
+            Object.assign(this, saved);
+            this.render();
+        }
+    }
+
+    /**
+     * The current view as a picture for a report (ModelReport): the drawing as
+     * standalone SVG, cropped to what is drawn (with `margin`), without grid or
+     * selection, and a box per shape that has a page of its own (`reportRef`).
+     * Null when there is no drawing on the page, or nothing drawn.
+     * @returns {{svg: string, viewBox: {x, y, width, height}, areas: Array<{ref, x, y, width, height}>}|null}
+     */
+    viewPicture({ margin = 20, background = '#ffffff' } = {}) {
+        const host = this.drawingHost();
+        const bounds = this.contentBounds();
+        if (host?.tagName?.toLowerCase() !== 'svg' || !bounds) return null;
+        const viewBox = { x: bounds.x - margin, y: bounds.y - margin, width: bounds.width + 2 * margin, height: bounds.height + 2 * margin };
+        return this._withPlainDrawing(() => {
+            const copy = host.cloneNode(true);
+            copy.querySelector('#grid-layer')?.remove();
+            copy.querySelector('#elements')?.removeAttribute('transform');
+            copy.removeAttribute('style');
+            copy.removeAttribute('id');
+            copy.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`);
+            const svg = prepareSvgMarkup(new (this.document?.defaultView ?? globalThis).XMLSerializer().serializeToString(copy), { width: viewBox.width, height: viewBox.height, background });
+            const areas = [...this.templates.values()]
+                .filter(t => t.visible !== false && this.templateEmphasis(t) !== 'hidden')
+                .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0))
+                .map(t => ({ ref: this.reportRef(t), x: t.left, y: t.top, width: t.right - t.left, height: t.bottom - t.top }))
+                .filter(area => area.ref);
+            return { svg, viewBox, areas };
+        });
+    }
+
+    /** What a shape's page in a report is (`{kind, id}`, as ModelReport#key takes them), or null: none here. */
+    reportRef(template) {
+        return null;
+    }
+
+    /** The drawing's extent in drawing coordinates (ViewFit.union of the visible shapes), or null. */
+    contentBounds() {
+        return ViewFit.union([...this.templates.values()].filter(t => t.visible !== false)
+            .map(t => ({ left: t.left, top: t.top, right: t.right, bottom: t.bottom })));
+    }
+
+    /**
+     * What the drawing shows, in its own units (an <svg> with a viewBox is not
+     * in pixels): the screen box mapped through the SVG's screen transform.
+     * @returns {{x, y, width, height}|null}
+     */
+    /** The middle of what is in sight, in diagram coordinates (where a new item goes). */
+    visibleCentre() {
+        const rect = this.drawingHost()?.getBoundingClientRect?.();
+        return (rect?.width && this._clientToDiagram(rect.left + rect.width / 2, rect.top + rect.height / 2)) || { x: 300, y: 200 };
+    }
+
+    visibleArea() {
+        const host = this.drawingHost();
+        const rect = host?.getBoundingClientRect?.();
+        if (!rect?.width) return null;
+        const ctm = host.getScreenCTM?.();
+        if (!ctm || !host.createSVGPoint) return { x: 0, y: 0, width: rect.width, height: rect.height };
+        const inverse = ctm.inverse();
+        const at = (x, y) => Object.assign(host.createSVGPoint(), { x, y }).matrixTransform(inverse);
+        const a = at(rect.left, rect.top), b = at(rect.right, rect.bottom);
+        return { x: a.x, y: a.y, width: b.x - a.x, height: b.y - a.y };
+    }
+
+    /** Zoom and pan so everything drawn is in sight (ViewFit.transform). @returns {boolean} whether it zoomed */
+    zoomToFit({ margin = 20 } = {}) {
+        const bounds = this.contentBounds();
+        const area = this.visibleArea();
+        if (!bounds || !area) return false;
+        const { scale, panX, panY } = ViewFit.transform(bounds, area, margin);
+        Object.assign(this, { zoomLevel: scale, panX, panY });
+        this.render();
+        return true;
+    }
+
+    /** Back to 100%, unpanned. */
+    resetZoom() {
+        Object.assign(this, { zoomLevel: 1, panX: 0, panY: 0 });
+        this.render();
+    }
+
+    /**
+     * Check the model (its `checker()`: a ViewSetChecker, or a notation's
+     * subclass) and list the findings; choosing one shows it (revealFinding).
+     * @returns {Array<Object>} the findings
+     */
+    showModelCheck() {
+        const checker = this.model?.checker?.(this.checkerOptions());
+        if (!checker) return [];
+        const findings = checker.run();
+        let dialog = null;
+        const list = el({
+            style: { gridColumn: '1 / -1', display: 'flex', flexDirection: 'column', gap: '4px', minWidth: '420px' },
+            children: findings.length ? findings.map(finding => ({
+                style: { display: 'flex', gap: '4px', alignItems: 'stretch' },
+                children: [
+                    {
+                        tag: 'button',
+                        attrs: { type: 'button', title: 'Show it', 'data-code': finding.code },
+                        style: { flex: '1', textAlign: 'left', padding: '4px 6px', border: '1px solid #ddd', borderRadius: '3px', background: finding.severity === 'warning' ? '#fff6e5' : '#f5f8fc', cursor: 'pointer' },
+                        text: `${finding.severity === 'warning' ? '⚠' : 'ℹ'} ${finding.message}`,
+                        on: { click: () => { dialog?.close(); this.revealFinding(finding); } },
+                    },
+                    ...this.findingActions(finding).map(act => ({
+                        tag: 'button', attrs: { type: 'button', 'data-action': act.label }, text: act.label,
+                        style: { padding: '4px 8px', cursor: 'pointer' },
+                        on: { click: () => { dialog?.close(); act.action(); } },
+                    })),
+                ],
+            })) : [{ text: 'Nothing found: the model passes every check.' }],
+        }, this.document);
+        dialog = new FormDialog({
+            title: `Model check: ${findings.length} finding${findings.length === 1 ? '' : 's'}`,
+            fields: [{ key: 'findings', label: '', type: 'custom', element: list, read: () => null }],
+            submitLabel: 'Close',
+            document: this.document ?? document,
+            onApply: () => {},
+        }).open();
+        return findings;
+    }
+
+    /** What can be done about a finding, beside showing it (`[{label, action}]`): nothing here; a subclass offers its own (Merge…). */
+    findingActions(finding) {
+        return [];
+    }
+
+    /** Options for the model's checker (a subclass passes its notation version, say). */
+    checkerOptions() {
+        return {};
+    }
+
+    /** Show what a finding names: its view, or the shape on this view. */
+    revealFinding(finding) {
+        const [id] = finding.ids;
+        if (finding.kind === 'view') this.model?.switchTo?.(id);
+        else if (this.templates.has(id)) { this.selectTemplate(id); this.render(); }
+    }
+
+    /**
+     * What the ⚙ Settings menu offers: grid, grid size and the line-style
+     * levels. A subclass adds its own settings in front.
+     */
+    settingsMenuItems() {
+        return [
+            { label: `Grid: ${this.showGrid ? 'on' : 'off'}`, action: () => { this.showGrid = !this.showGrid; this.render(); } },
+            { label: `Grid size: ${this.gridSize}px…`, action: () => this.editGridSize() },
+            ...(this.edgeStyleLevels.length ? [{ separator: true }] : []),
+            ...this.edgeStyleLevels.map(level => ({
+                label: `Line style: ${level.label} defaults…`,
+                action: () => this.editLineStyle(level.key),
+            })),
+        ];
+    }
+
+    /** Ask for a new grid spacing. */
+    editGridSize() {
+        new FormDialog({
+            title: 'Grid size',
+            fields: [{ key: 'gridSize', label: 'Spacing (px)', type: 'number', value: this.gridSize, min: 5, max: 200, step: 5 }],
+            onApply: ({ gridSize }) => {
+                if (Number.isFinite(gridSize) && gridSize >= 1) {
+                    this.gridSize = gridSize;
+                    this.render();
+                }
+            },
+        }).open();
+    }
+
+    /**
+     * Render grid on SVG canvas.
+     * Grid fills the entire visible area based on container size and zoom/pan.
+     * @private
+     */
+    _renderGrid(svg, group) {
+        const gridSize = this.gridSize || 20;
+
+        // Draw grid covering the entire viewBox plus extra for panning
+        // Use generous bounds to ensure complete coverage at any zoom/pan
+        const minX = -1000;
+        const maxX = 2000;
+        const minY = -1000;
+        const maxY = 1500;
+
+        // Draw vertical lines
+        for (let x = Math.floor(minX / gridSize) * gridSize; x <= maxX; x += gridSize) {
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('x1', x);
+            line.setAttribute('y1', minY);
+            line.setAttribute('x2', x);
+            line.setAttribute('y2', maxY);
+            line.setAttribute('stroke', '#e0e0e0');
+            line.setAttribute('stroke-width', 0.5 / this.zoomLevel);
+            line.setAttribute('pointer-events', 'none');
+            group.appendChild(line);
+        }
+
+        // Draw horizontal lines
+        for (let y = Math.floor(minY / gridSize) * gridSize; y <= maxY; y += gridSize) {
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('x1', minX);
+            line.setAttribute('y1', y);
+            line.setAttribute('x2', maxX);
+            line.setAttribute('y2', y);
+            line.setAttribute('stroke', '#e0e0e0');
+            line.setAttribute('stroke-width', 0.5 / this.zoomLevel);
+            line.setAttribute('pointer-events', 'none');
+            group.appendChild(line);
+        }
+    }
+
+    /**
+     * Render resize/rotate handles around selected template.
+     * @private
+     */
+    /**
+     * A dashed outline round each group a selected shape is in, an outline on
+     * each selected shape besides the primary one, and a lock on each locked
+     * selected shape.
+     * @protected
+     */
+    _renderArrangement(group) {
+        const ids = this.getSelectedIds();
+        if (!ids.length) return;
+        const layer = this._svg('g', { class: 'arrangement', 'pointer-events': 'none' });
+        const box = (t) => {
+            const w = t.width || 120, h = t.height || 60;
+            return { x1: (t.x || 0) - w / 2, y1: (t.y || 0) - h / 2, x2: (t.x || 0) + w / 2, y2: (t.y || 0) + h / 2 };
+        };
+        const drawn = new Set();
+        for (const id of ids) {
+            const g = this.arrangement.groupOf(id);
+            if (!g || drawn.has(g.id)) continue;
+            drawn.add(g.id);
+            const boxes = [...g.memberIds].map(m => this.getTemplate(m)).filter(Boolean).map(box);
+            if (!boxes.length) continue;
+            const pad = 8;
+            const x1 = Math.min(...boxes.map(b => b.x1)) - pad, y1 = Math.min(...boxes.map(b => b.y1)) - pad;
+            const x2 = Math.max(...boxes.map(b => b.x2)) + pad, y2 = Math.max(...boxes.map(b => b.y2)) + pad;
+            layer.appendChild(this._svg('rect', {
+                class: 'group-outline', 'data-group-id': g.id, x: x1, y: y1, width: x2 - x1, height: y2 - y1,
+                fill: 'none', stroke: '#8e44ad', 'stroke-width': 1.5, 'stroke-dasharray': '8,4', rx: 4,
+            }));
+        }
+        for (const id of ids) {
+            const t = this.getTemplate(id);
+            if (!t) continue;
+            const b = box(t);
+            if (id !== this.selectedTemplateId) {
+                layer.appendChild(this._svg('rect', {
+                    class: 'selection-outline', x: b.x1, y: b.y1, width: b.x2 - b.x1, height: b.y2 - b.y1,
+                    fill: 'none', stroke: '#0066cc', 'stroke-width': 1.5, 'stroke-dasharray': '4,3',
+                }));
+            }
+            if (this.arrangement.isLocked(id)) {
+                const lock = this._svg('text', { class: 'lock-mark', x: b.x1 - 2, y: b.y1 - 4, 'font-size': 12 });
+                lock.textContent = '🔒';
+                layer.appendChild(lock);
+            }
+        }
+        group.appendChild(layer);
+    }
+
+    _renderHandles(container, group, template) {
+        // A locked shape is fixed: no resize or rotate handles (its outline and lock show it is selected).
+        const fixed = this.arrangement.isLocked(template.id);
+        const x = template.x || 0;
+        const y = template.y || 0;
+        const w = template.width || 120;
+        const h = template.height || 60;
+        const rotation = template.rotation || 0;
+
+        // Create handles group
+        const handleGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        handleGroup.setAttribute('class', 'handles');
+        handleGroup.setAttribute('pointer-events', 'none');
+
+        // Selection outline
+        const outline = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        outline.setAttribute('x', x - w / 2);
+        outline.setAttribute('y', y - h / 2);
+        outline.setAttribute('width', w);
+        outline.setAttribute('height', h);
+        outline.setAttribute('fill', 'none');
+        outline.setAttribute('stroke', '#0066cc');
+        outline.setAttribute('stroke-width', 2);
+        outline.setAttribute('stroke-dasharray', '5,5');
+        if (rotation !== 0) {
+            outline.setAttribute('transform', `rotate(${rotation} ${x} ${y})`);
+        }
+        handleGroup.appendChild(outline);
+
+        // Resize handles (corners)
+        const handleSize = 8;
+        const corners = [
+            { cx: x - w / 2, cy: y - h / 2, type: 'nw' },
+            { cx: x + w / 2, cy: y - h / 2, type: 'ne' },
+            { cx: x - w / 2, cy: y + h / 2, type: 'sw' },
+            { cx: x + w / 2, cy: y + h / 2, type: 'se' },
+        ];
+
+        for (const corner of corners) {
+            const handle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            handle.setAttribute('x', corner.cx - handleSize / 2);
+            handle.setAttribute('y', corner.cy - handleSize / 2);
+            handle.setAttribute('width', handleSize);
+            handle.setAttribute('height', handleSize);
+            handle.setAttribute('fill', '#0066cc');
+            handle.setAttribute('stroke', '#fff');
+            handle.setAttribute('stroke-width', 1);
+            handle.setAttribute('class', `resize-handle ${corner.type}`);
+            handle.setAttribute('pointer-events', 'auto');
+            handle.setAttribute('cursor', `${corner.type}-resize`);
+
+            handle.addEventListener('mousedown', (e) => this._startResize(e, template, corner.type));
+            if (!fixed) handleGroup.appendChild(handle);
+        }
+
+        // Rotation handle (top center)
+        const rotateHandle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        rotateHandle.setAttribute('cx', x);
+        rotateHandle.setAttribute('cy', y - h / 2 - 20);
+        rotateHandle.setAttribute('r', 6);
+        rotateHandle.setAttribute('fill', '#ff6600');
+        rotateHandle.setAttribute('stroke', '#fff');
+        rotateHandle.setAttribute('stroke-width', 1);
+        rotateHandle.setAttribute('class', 'rotate-handle');
+        rotateHandle.setAttribute('pointer-events', 'auto');
+        rotateHandle.setAttribute('cursor', 'grab');
+
+        rotateHandle.addEventListener('mousedown', (e) => this._startRotate(e, template));
+        // Only shapes that can turn get the handle (ArchiMate notation does not).
+        if (template.constructor.rotatable && !fixed) handleGroup.appendChild(rotateHandle);
+
+        // Link handle (right side) — for drag-to-connect
+        const linkHandle = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        linkHandle.setAttribute('class', 'link-handle');
+        linkHandle.setAttribute('pointer-events', 'auto');
+        linkHandle.setAttribute('cursor', 'crosshair');
+
+        const linkCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        linkCircle.setAttribute('cx', x + w / 2 + 15);
+        linkCircle.setAttribute('cy', y);
+        linkCircle.setAttribute('r', 8);
+        linkCircle.setAttribute('fill', '#00cc00');
+        linkCircle.setAttribute('stroke', '#fff');
+        linkCircle.setAttribute('stroke-width', 2);
+        linkHandle.appendChild(linkCircle);
+
+        const linkText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        linkText.setAttribute('x', x + w / 2 + 15);
+        linkText.setAttribute('y', y + 4);
+        linkText.setAttribute('text-anchor', 'middle');
+        linkText.setAttribute('font-size', '12');
+        linkText.setAttribute('fill', '#fff');
+        linkText.setAttribute('pointer-events', 'none');
+        linkText.textContent = '🔗';
+        linkHandle.appendChild(linkText);
+
+        linkHandle.addEventListener('mousedown', (e) => this._startConnect(e, template));
+        handleGroup.appendChild(linkHandle);
+
+        group.appendChild(handleGroup);
+    }
+
+    /**
+     * Render all edges as SVG lines.
+     * @private
+     */
+    /**
+     * The current view's resolved settings: background, title band and
+     * watermark (drawn round the drawing), how invalid relationships show, ...
+     * The host hands a function in as the `viewSettings` option; none: {}.
+     */
+    viewSettings() {
+        return this._viewSettings?.() ?? {};
+    }
+
+    /**
+     * What is wrong with a line: `{ message, highlight }`, or null. The message is
+     * the line's tooltip; with `highlight` the line is also drawn red and dashed
+     * (its own colour and dashes win). None here; a subclass checks its own.
+     */
+    edgeWarning(edge) {
+        return null;
+    }
+
+    /**
+     * The rules that draw some shapes and lines faintly or not at all
+     * (EmphasisRule): here the highlight, when one is set. A subclass adds its
+     * own (a viewpoint, ...).
+     * @returns {Array<EmphasisRule>}
+     */
+    emphasisRules() {
+        return this.highlight ? [this.highlight] : [];
+    }
+
+    /** How a shape is drawn: the strongest level any rule gives (null: as usual). */
+    templateEmphasis(template) {
+        return this.emphasisRules().reduce((level, rule) => strongerEmphasis(level, rule.template(template, this)), null);
+    }
+
+    /** How a line is drawn: the strongest level any rule gives; hidden when a shape at either end is. */
+    edgeEmphasis(edge) {
+        const ends = [edge.sourceId, edge.targetId].map(id => this.templates.get(id));
+        if (ends.some(t => t && this.templateEmphasis(t) === 'hidden')) return 'hidden';
+        return this.emphasisRules().reduce((level, rule) => strongerEmphasis(level, rule.edge(edge, this)), null);
+    }
+
+    /** Highlight the shapes whose name contains `text`, dimming the rest (HighlightRule); empty text clears it. */
+    setHighlight(text) {
+        this.highlight = String(text ?? '').trim() ? new HighlightRule(text) : null;
+        this.render();
+    }
+
+    /** Where a shape or line is drawn: `group`, or for a dimmed or faded one a see-through group in it. @private */
+    _emphasisGroup(group, emphasis, attrs = {}) {
+        if (!emphasis) return group;
+        const g = this._svg('g', { opacity: EMPHASIS_OPACITY[emphasis], 'data-emphasis': emphasis, ...attrs });
+        group.appendChild(g);
+        return g;
+    }
+
+    _renderEdges(parent) {
+        const cascade = this.edgeStyleCascade();
+        for (const edge of this.getAllEdges()) {
+            if (!edge.visible) continue;
+            const emphasis = this.edgeEmphasis(edge);
+            if (emphasis === 'hidden') continue;
+            const { style } = cascade.resolve(edge);
+            const edgePath = this._edgePath(edge, style);
+            if (!edgePath) continue;
+            const selected = edge.id === this.selectedEdgeId;
+            // A dimmed or faded line's parts go in one see-through group.
+            const group = this._emphasisGroup(parent, emphasis, { 'data-edge-id': edge.id });
+            const warning = this.edgeWarning(edge);
+
+            // Wide invisible stroke so thin edges are easy to hit.
+            const hitArea = this._svg('path', {
+                d: edgePath.d, stroke: 'transparent', 'stroke-width': 12, fill: 'none',
+                'pointer-events': 'stroke', cursor: 'pointer', 'data-edge-id': edge.id,
+            });
+            // A line that is only drawn (edge.editable false) takes no clicks; it still shows its tooltip.
+            if (edge.editable !== false) hitArea.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.selectEdge(edge.id);
+            });
+            if (edge.editable !== false) hitArea.addEventListener('dblclick', (e) => {
+                e.stopPropagation();
+                const p = this._clientToDiagram(e.clientX, e.clientY);
+                if (p) this.addWaypoint(edge.id, p);
+            });
+            if (edge.editable !== false) hitArea.addEventListener('contextmenu', (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                this.selectEdge(edge.id);
+                this._showEdgeContextMenu(edge.id, e.clientX, e.clientY);
+            });
+            const tip = [warning && `⚠️ ${warning.message}`, edge.tooltip].filter(Boolean).join('\n');
+            if (tip) {
+                const title = this._svg('title');
+                title.textContent = tip;
+                hitArea.appendChild(title);
+            }
+            group.appendChild(hitArea);
+
+            const line = this._svg('path', {
+                d: edgePath.d,
+                // A warned line is red and dashed unless it has a colour (or dashes) of its own.
+                stroke: warning?.highlight && !edge.strokeColor ? WARNING_COLOR : style.strokeColor, 'stroke-width': style.strokeWidth,
+                'stroke-dasharray': LINE_STYLE_DASH[style.lineStyle] ?? (warning?.highlight ? WARNING_DASH : null), fill: 'none', 'pointer-events': 'none',
+                class: [selected ? 'edge selected' : 'edge', warning?.highlight && 'edge-warning'].filter(Boolean).join(' '), 'data-edge-id': edge.id,
+            });
+            group.appendChild(line);
+
+            this._renderEdgeMarkers(group, edgePath, style);
+            if (selected) this._renderEdgeHandles(group, edge, edgePath, line, style);
+
+            if (edge.label) {
+                const text = this._svg('text', {
+                    x: (edgePath.x1 + edgePath.x2) / 2, y: (edgePath.y1 + edgePath.y2) / 2 - 8,
+                    'text-anchor': 'middle', 'font-size': 12, fill: '#333', 'pointer-events': 'none',
+                });
+                text.textContent = edge.label;
+                group.appendChild(text);
+            }
+        }
+    }
+
+    /**
+     * The levels a line's style inherits from, most specific first. Hosts set
+     * `edgeStyleLevels` (e.g. diagram → model → tool); each is `{key, label, style}`.
+     */
+    edgeStyleCascade() {
+        return new EdgeStyleCascade(this.edgeStyleLevels);
+    }
+
+    /** A line's effective style after the cascade. */
+    resolveEdgeStyle(edge) {
+        return this.edgeStyleCascade().resolve(edge).style;
+    }
+
+    /**
+     * Geometry of an edge between its templates' outlines, or null if an end is
+     * missing. `style.attach === 'sides'` attaches each unpinned end at the middle
+     * of the side facing the other end (or the nearest waypoint); 'polyline'
+     * routing bends around the other shapes.
+     */
+    _edgePath(edge, style = this.resolveEdgeStyle(edge)) {
+        const source = this.getTemplate(edge.sourceId);
+        const target = this.getTemplate(edge.targetId);
+        if (!source || !target) return null;
+        const box = (t) => ({ w: t.width, h: t.height });
+        let sourceSide = edge.sourceSide || 'auto';
+        let targetSide = edge.targetSide || 'auto';
+        if (style.attach === 'sides') {
+            const first = edge.waypoints[0] ?? target, last = edge.waypoints[edge.waypoints.length - 1] ?? source;
+            if (sourceSide === 'auto') sourceSide = EdgeGeometry.facingSide(source, box(source), first);
+            if (targetSide === 'auto') targetSide = EdgeGeometry.facingSide(target, box(target), last);
+        }
+        const obstacles = style.routing !== 'polyline' ? [] : [...this.templates.values()]
+            .filter(t => t !== source && t !== target && t.visible !== false)
+            .map(t => ({ id: t.id, x: t.x, y: t.y, r: Math.max(t.width, t.height) / 2 }));
+        const info = (t) => ({ boundaryPoint: (dx, dy) => t.boundaryPoint(dx, dy) });
+        return EdgeGeometry.computeEdgePath(
+            info(source), { x: source.x, y: source.y }, box(source),
+            info(target), { x: target.x, y: target.y }, box(target),
+            { waypoints: edge.waypoints, sourceSide, targetSide, routing: style.routing }, style.routing, obstacles
+        );
+    }
+
+    /** Anchors and waypoints in order: the polyline a waypointed edge follows. */
+    _edgeVertices(edge, edgePath = this._edgePath(edge)) {
+        return [{ x: edgePath.x1, y: edgePath.y1 }, ...edge.waypoints, { x: edgePath.x2, y: edgePath.y2 }];
+    }
+
+    /**
+     * Handles for the selected edge: end dots, draggable waypoints (double-click
+     * or right-click to delete), and a hollow handle mid-segment that adds a
+     * waypoint when clicked or dragged.
+     * @private
+     */
+    _renderEdgeHandles(group, edge, edgePath, line, style) {
+        const vertices = this._edgeVertices(edge, edgePath);
+        const straightSegments = edge.waypoints.length > 0 || style.routing === 'straight';
+
+        [['source', vertices[0]], ['target', vertices[vertices.length - 1]]].forEach(([end, point]) => {
+            const dot = this._svg('circle', {
+                cx: point.x, cy: point.y, r: 5, fill: '#0066cc', stroke: '#fff', 'stroke-width': 1.5,
+                class: 'edge-endpoint', cursor: 'crosshair', 'data-end': end,
+            });
+            dot.appendChild(this._svg('title')).textContent = 'Drag onto another shape to reconnect';
+            dot.addEventListener('mousedown', (e) => {
+                if (e.button !== 0) return;
+                e.stopPropagation();
+                e.preventDefault();
+                this._dragEdgeEnd(e, edge, end, end === 'source' ? vertices[vertices.length - 1] : vertices[0]);
+            });
+            dot.addEventListener('click', (e) => e.stopPropagation());
+            group.appendChild(dot);
+        });
+
+        // A routed edge without waypoints (curved/orthogonal) has one segment whose midpoint lies on the drawn path.
+        // (SVGPoint's x/y are prototype getters, so copy them explicitly rather than spreading.)
+        const onPath = straightSegments ? null : line.getPointAtLength(line.getTotalLength() / 2);
+        const midpoints = straightSegments
+            ? vertices.slice(1).map((b, i) => ({ x: (vertices[i].x + b.x) / 2, y: (vertices[i].y + b.y) / 2, index: i }))
+            : [{ x: onPath.x, y: onPath.y, index: 0 }];
+        for (const mid of midpoints) {
+            const handle = this._svg('circle', {
+                cx: mid.x, cy: mid.y, r: 4, fill: '#fff', stroke: '#ff9900', 'stroke-width': 1.5,
+                class: 'waypoint-add', cursor: 'copy', 'data-edge-id': edge.id,
+            });
+            handle.appendChild(this._svg('title')).textContent = 'Drag or click to add a bend';
+            handle.addEventListener('mousedown', (e) => {
+                if (e.button !== 0) return;
+                e.stopPropagation();
+                e.preventDefault();
+                this._dragNewWaypoint(e, edge, mid.index, { x: mid.x, y: mid.y });
+            });
+            handle.addEventListener('click', (e) => e.stopPropagation());
+            group.appendChild(handle);
+        }
+
+        edge.waypoints.forEach((wp, i) => {
+            const handle = this._svg('circle', {
+                cx: wp.x, cy: wp.y, r: 5, fill: '#ff9900', stroke: '#fff', 'stroke-width': 1.5,
+                class: 'waypoint', cursor: 'move', 'data-edge-id': edge.id, 'data-waypoint-index': i,
+            });
+            handle.appendChild(this._svg('title')).textContent = 'Drag to move; double-click to remove';
+            handle.addEventListener('mousedown', (e) => {
+                if (e.button !== 0) return;
+                e.stopPropagation();
+                e.preventDefault();
+                this._dragWaypoint(e, edge, i);
+            });
+            handle.addEventListener('click', (e) => e.stopPropagation());
+            handle.addEventListener('dblclick', (e) => {
+                e.stopPropagation();
+                this.removeWaypoint(edge.id, i);
+            });
+            handle.addEventListener('contextmenu', (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                this._showMenu(e.clientX, e.clientY, [
+                    { label: 'Delete waypoint', danger: true, action: () => this.removeWaypoint(edge.id, i) },
+                ]);
+            });
+            group.appendChild(handle);
+        });
+    }
+
+    _svg(tag, attrs = {}) {
+        const node = document.createElementNS('http://www.w3.org/2000/svg', tag);
+        for (const [k, v] of Object.entries(attrs)) {
+            if (v != null) node.setAttribute(k, v);
+        }
+        return node;
+    }
+
+    /**
+     * Select an edge.
+     * @param {string} edgeId
+     */
+    selectEdge(edgeId) {
+        const edge = this.getEdge(edgeId);
+        // Re-selecting must not re-render: that would swap the hit area out from
+        // under the pointer and break a double-click on the line.
+        if (!edge || edge.editable === false || (this.selectedEdgeId === edgeId && !this.selectedTemplateId)) return;
+        this.selectedEdgeId = edgeId;
+        this.selectedTemplateId = null;
+        this.propertiesPanel?.render();
+        this._log(`Selected edge: ${edge.label || edge.id}`);
+        this._notifySelection();
+        this.render();
+    }
+
+    /** Deselect any template or edge (clicking empty canvas). */
+    clearSelection() {
+        if (!this.selectedEdgeId && !this.selectedTemplateId && !this.selectedIds.size) return;
+        this.selectedEdgeId = null;
+        this.selectedTemplateId = null;
+        this.selectedIds.clear();
+        this.propertiesPanel?.render();
+        this.render();
+        this._notifySelection();
+    }
+
+    /**
+     * Render endpoint markers (arrow, diamond, circle, crow's foot). Each is
+     * oriented along the direction the path actually arrives at its end, so
+     * curved, orthogonal and waypoint edges point into their nodes correctly.
+     * @private
+     */
+    _renderEdgeMarkers(group, edgePath, style) {
+        const color = style.strokeColor;
+        const size = 6 + style.strokeWidth;
+        const { start, end } = EdgeGeometry.endDirections(edgePath.d);
+        const ends = [
+            [style.startMarker, { x: edgePath.x1, y: edgePath.y1 }, start],
+            [style.endMarker, { x: edgePath.x2, y: edgePath.y2 }, end],
+        ];
+        for (const [value, tip, dir] of ends) {
+            const marker = getEdgeMarker(value);
+            if (!marker || (!dir.x && !dir.y)) continue;
+            for (const { tag, attrs } of marker.shapes(tip, dir, size, color)) {
+                const node = document.createElementNS('http://www.w3.org/2000/svg', tag);
+                for (const [k, v] of Object.entries({ ...attrs, 'pointer-events': 'none' })) node.setAttribute(k, v);
+                group.appendChild(node);
+            }
+        }
+    }
+
+    /**
+     * Start resizing a template.
+     * @private
+     */
+    _startResize(e, template, corner) {
+        e.stopPropagation();
+        if (this.arrangement.isLocked(template.id)) return;
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startW = template.width || 120;
+        const startH = template.height || 60;
+
+        const onMove = (e) => {
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            let deltaW = 0, deltaH = 0;
+
+            if (corner.includes('e')) deltaW = dx;
+            if (corner.includes('w')) deltaW = -dx;
+            if (corner.includes('s')) deltaH = dy;
+            if (corner.includes('n')) deltaH = -dy;
+
+            template.width = Math.max(30, startW + deltaW);
+            template.height = Math.max(30, startH + deltaH);
+            this.render();
+        };
+
+        const onEnd = () => {
+            const endW = template.width || 120;
+            const endH = template.height || 60;
+            const deltaW = endW - startW;
+            const deltaH = endH - startH;
+
+            if (deltaW !== 0 || deltaH !== 0) {
+                // Revert to start state, then execute command
+                template.width = startW;
+                template.height = startH;
+
+                if (ResizeCommand && this.history) {
+                    const cmd = new ResizeCommand(this, template.id, deltaW, deltaH);
+                    this.history.execute(cmd);
+                    this.render();
+                }
+            }
+
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onEnd);
+        };
+
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onEnd);
+    }
+
+    /**
+     * Start rotating a template.
+     * @private
+     */
+    _startRotate(e, template) {
+        if (this.arrangement.isLocked(template.id)) return;
+        e.stopPropagation();
+        const startX = template.x || 0;
+        const startY = template.y || 0;
+        const startRotation = template.rotation || 0;
+        const startMouseX = e.clientX;
+        const startMouseY = e.clientY;
+
+        const onMove = (e) => {
+            const dx = e.clientX - startMouseX;
+            const dy = e.clientY - startMouseY;
+            const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+            template.rotation = (startRotation + angle) % 360;
+            this.render();
+        };
+
+        const onEnd = () => {
+            const endRotation = template.rotation || 0;
+            const deltaRotation = endRotation - startRotation;
+
+            if (deltaRotation !== 0) {
+                // Revert to start state, then execute command
+                template.rotation = startRotation;
+
+                if (RotateCommand && this.history) {
+                    const cmd = new RotateCommand(this, template.id, deltaRotation);
+                    this.history.execute(cmd);
+                    this.render();
+                }
+            }
+
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onEnd);
+        };
+
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onEnd);
+    }
+
+    /**
+     * Start drag-to-connect from a template's link handle.
+     * Creates visual feedback and allows drawing edges to other templates.
+     * @private
+     */
+    _startConnect(e, template) {
+        e.stopPropagation();
+        const sourceX = template.x || 0;
+        const sourceY = template.y || 0;
+        const sourceId = template.id;
+
+        const container = document.getElementById(this.diagramContainerId);
+        const svg = container?.tagName === 'svg' ? container : container?.querySelector('svg');
+        if (!svg) return;
+
+        // Create temporary visual line
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', sourceX);
+        line.setAttribute('y1', sourceY);
+        line.setAttribute('x2', sourceX);
+        line.setAttribute('y2', sourceY);
+        line.setAttribute('stroke', '#0066cc');
+        line.setAttribute('stroke-width', 2);
+        line.setAttribute('stroke-dasharray', '5,5');
+        line.setAttribute('pointer-events', 'none');
+        line.setAttribute('class', 'connection-preview');
+
+        const elementsGroup = svg.querySelector('#elements');
+        if (elementsGroup) {
+            elementsGroup.appendChild(line);
+        } else {
+            return;
+        }
+
+        // Helper to find element with data-template-id
+        const findTemplateElement = (el) => {
+            let current = el;
+            while (current && current !== svg) {
+                if (current.getAttribute && current.getAttribute('data-template-id')) {
+                    return current;
+                }
+                current = current.parentElement;
+            }
+            return null;
+        };
+
+        const onMouseMove = (moveEvent) => {
+            const p = this._clientToDiagram(moveEvent.clientX, moveEvent.clientY);
+            if (p) {
+                line.setAttribute('x2', p.x);
+                line.setAttribute('y2', p.y);
+            }
+
+            // Check for hover over other elements
+            const elements = document.elementsFromPoint(moveEvent.clientX, moveEvent.clientY);
+            let targetElement = null;
+            // Reset all first
+            for (const el of svg.querySelectorAll('[data-template-id]')) {
+                el.style.filter = '';
+                el.style.opacity = '1';
+            }
+            // Find and highlight target
+            for (const el of elements) {
+                const templateEl = findTemplateElement(el);
+                if (templateEl) {
+                    const tid = templateEl.getAttribute('data-template-id');
+                    if (tid && tid !== sourceId) {
+                        targetElement = templateEl;
+                        templateEl.style.filter = 'drop-shadow(0 0 12px #00aa00)';
+                        templateEl.style.opacity = '0.8';
+                        break;
+                    }
+                }
+            }
+        };
+
+        const onMouseUp = (upEvent) => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+
+            // Remove preview line
+            if (line.parentNode) line.parentNode.removeChild(line);
+
+            // Check if we released over a valid target
+            const elements = document.elementsFromPoint(upEvent.clientX, upEvent.clientY);
+            let targetId = null;
+            for (const el of elements) {
+                const templateEl = findTemplateElement(el);
+                if (templateEl) {
+                    const tid = templateEl.getAttribute('data-template-id');
+                    if (tid && tid !== sourceId) {
+                        targetId = tid;
+                        break;
+                    }
+                }
+            }
+
+            // Reset all element styles
+            for (const el of svg.querySelectorAll('[data-template-id]')) {
+                el.style.filter = '';
+                el.style.opacity = '1';
+            }
+
+            // Connect if dropped on another shape (one undo step).
+            if (targetId) this.connect(sourceId, targetId);
+        };
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+
+    /**
+     * Client (mouse) coordinates → diagram coordinates: the space templates and
+     * waypoints live in, after pan and zoom.
+     * @returns {{x: number, y: number}|null}
+     */
+    _clientToDiagram(clientX, clientY) {
+        const svg = this._canvasSvg();
+        const space = svg?.querySelector('#elements') ?? svg;
+        const ctm = space?.getScreenCTM();
+        if (!ctm) return null;
+        const pt = svg.createSVGPoint();
+        pt.x = clientX;
+        pt.y = clientY;
+        const p = pt.matrixTransform(ctm.inverse());
+        return { x: p.x, y: p.y };
+    }
+
+    /**
+     * The SVG element the diagram is drawn into. Subclasses that draw through
+     * another engine override this, so coordinate helpers keep working.
+     * @protected
+     */
+    _canvasSvg() {
+        const container = document.getElementById(this.diagramContainerId);
+        return container?.tagName === 'svg' ? container : container?.querySelector('svg') ?? null;
+    }
+
+    /** Snap a diagram point to the grid while the grid is shown. */
+    _snapToGrid(p) {
+        if (!this.showGrid || !this.gridSize) return { x: p.x, y: p.y };
+        const g = this.gridSize;
+        return { x: Math.round(p.x / g) * g, y: Math.round(p.y / g) * g };
+    }
+
+    _executeCommand(cmd) {
+        if (this.history) this.history.execute(cmd);
+        else cmd.execute();
+        this.render();
+    }
+
+    /**
+     * Add a bend to an edge, inserted into the path segment nearest `point` so
+     * the route keeps its order. Undoable.
+     */
+    addWaypoint(edgeId, point) {
+        const edge = this.getEdge(edgeId);
+        if (!edge) return;
+        const p = this._snapToGrid(point);
+        const index = EdgeGeometry.nearestSegmentInsertIndex(this._edgeVertices(edge), p.x, p.y);
+        this._executeCommand(new AddWaypointCommand(this, edgeId, p.x, p.y, index));
+    }
+
+    /** Remove one bend. Undoable. */
+    removeWaypoint(edgeId, index) {
+        const edge = this.getEdge(edgeId);
+        if (!edge || index < 0 || index >= edge.waypoints.length) return;
+        this._executeCommand(new DeleteWaypointCommand(this, edgeId, index));
+    }
+
+    /** Remove every bend in one undo step. */
+    clearWaypoints(edgeId) {
+        const edge = this.getEdge(edgeId);
+        if (!edge?.waypoints.length) return;
+        // Delete from the end so earlier indices stay valid; undo restores in reverse.
+        const deletes = edge.waypoints.map((_, i) => new DeleteWaypointCommand(this, edgeId, i)).reverse();
+        this._executeCommand(new CompositeCommand('Straighten edge', deletes));
+    }
+
+    /**
+     * Track the pointer until release, calling onMove(snappedDiagramPoint, event)
+     * for each move and onEnd(moved, upEvent) once.
+     * @private
+     */
+    _trackPointer(e, onMove, onEnd) {
+        const startX = e.clientX, startY = e.clientY;
+        let moved = false;
+        const move = (ev) => {
+            if (!moved && Math.hypot(ev.clientX - startX, ev.clientY - startY) < 3) return;
+            moved = true;
+            const p = this._clientToDiagram(ev.clientX, ev.clientY);
+            if (p) onMove(this._snapToGrid(p), ev);
+        };
+        const up = (ev) => {
+            document.removeEventListener('mousemove', move);
+            document.removeEventListener('mouseup', up);
+            // Re-rendering replaces the handle, so the browser's click lands on the
+            // canvas; don't let it read as "click on empty canvas".
+            this._suppressCanvasClick = true;
+            onEnd(moved, ev);
+        };
+        document.addEventListener('mousemove', move);
+        document.addEventListener('mouseup', up);
+    }
+
+    /** Drag an existing waypoint; one undoable move on release. @private */
+    _dragWaypoint(e, edge, index) {
+        const start = { ...edge.waypoints[index] };
+        this._trackPointer(e, (p) => {
+            edge.moveWaypoint(index, p.x, p.y);
+            this.render();
+        }, (moved) => {
+            if (!moved) return;
+            const end = { ...edge.waypoints[index] };
+            edge.moveWaypoint(index, start.x, start.y);
+            if (end.x !== start.x || end.y !== start.y) {
+                this._executeCommand(new MoveWaypointCommand(this, edge.id, index, start.x, start.y, end.x, end.y));
+            } else {
+                this.render();
+            }
+        });
+    }
+
+    /**
+     * Pull a new waypoint out of a segment's midpoint handle. A plain click adds
+     * it at the midpoint; a drag places it where released. One undoable add.
+     * @private
+     */
+    _dragNewWaypoint(e, edge, index, midpoint) {
+        let current = this._snapToGrid(midpoint);
+        edge.addWaypoint(current.x, current.y, index);
+        this._trackPointer(e, (p) => {
+            current = p;
+            edge.moveWaypoint(index, p.x, p.y);
+            this.render();
+        }, () => {
+            edge.removeWaypoint(index);
+            this._executeCommand(new AddWaypointCommand(this, edge.id, current.x, current.y, index));
+        });
+    }
+
+    /** Clicking empty canvas clears the selection. @private */
+    _initializeCanvasSelection() {
+        const container = document.getElementById(this.diagramContainerId);
+        if (!container) return;
+        container.addEventListener('mousedown', (e) => {
+            this._suppressCanvasClick = false;
+            // On empty canvas (not a shape, a line or a handle): drag a box to select what is inside it.
+            const onItem = e.target.closest?.('[data-template-id], [data-edge-id], [data-handle], .resize-handle, .edge-handle');
+            if (e.button !== 0 || e.shiftKey || onItem || this.connectMode) return;
+            // Not the browser's own text selection: that would leave labels selected, and a later
+            // press on one would drag the text instead of the shape.
+            e.preventDefault();
+            this._startMarquee(e, container);
+        });
+        // Empty canvas: what canvasMenuItems offers there (a shape's own menu stops the event first).
+        container.addEventListener('contextmenu', (e) => {
+            const at = this._clientToDiagram(e.clientX, e.clientY);
+            const paste = this.canClipboardPaste() ? [{ label: '📋 Paste here', action: () => this.paste({ at }) }] : [];
+            const own = this.canvasMenuItems(at);
+            const items = [...paste, ...(paste.length && own.length ? [{ separator: true }] : []), ...own];
+            if (!items.length) return;
+            e.preventDefault();
+            this._showMenu(e.clientX, e.clientY, items);
+        });
+        container.addEventListener('click', (e) => {
+            if (this._suppressCanvasClick || e.shiftKey) {
+                this._suppressCanvasClick = false;
+                return;
+            }
+            this.clearSelection();
+        });
+    }
+
+    /**
+     * Drag a selection box from where the mouse went down: on release, the
+     * shapes wholly inside it are selected (added to the selection with Ctrl
+     * or Cmd). A press without a drag is a plain click on the canvas.
+     * @private
+     */
+    _startMarquee(down, container) {
+        const start = this._clientToDiagram(down.clientX, down.clientY);
+        const group = container.querySelector('#elements');
+        if (!start || !group) return;
+        const extend = down.ctrlKey || down.metaKey;
+        let box = null;
+        const rectOf = (e) => {
+            const p = this._clientToDiagram(e.clientX, e.clientY) ?? start;
+            return { x: Math.min(start.x, p.x), y: Math.min(start.y, p.y), width: Math.abs(p.x - start.x), height: Math.abs(p.y - start.y) };
+        };
+        const onMove = (e) => {
+            if (!box && Math.hypot(e.clientX - down.clientX, e.clientY - down.clientY) < 4) return;
+            box ??= group.appendChild(this._svg('rect', { class: 'marquee', fill: 'rgba(0, 102, 204, 0.08)', stroke: '#0066cc', 'stroke-dasharray': '4 3', 'pointer-events': 'none' }));
+            const r = rectOf(e);
+            for (const [k, v] of Object.entries(r)) box.setAttribute(k, String(v));
+        };
+        const onUp = (e) => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            if (!box) return;   // no drag: the click clears the selection as usual
+            box.remove();
+            this._suppressCanvasClick = true;
+            this.selectTemplates(this.templatesInside(rectOf(e)), { extend });
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+
+    /**
+     * Small context menu at a screen position (see PopupMenu for the item shape).
+     * @private
+     */
+    _showMenu(x, y, items) {
+        this._closeContextMenu();
+        PopupMenu.show(x, y, items);
+    }
+
+    /**
+     * Edit a template's name, position, stacking value and colours as one undo
+     * step. Opened from the shape's right-click menu and by double-clicking it.
+     */
+    editTemplateProperties(template) {
+        if (this.isFixed(template.id)) { this.tellLocked(`"${template.name || 'This shape'}"`, template.id); return; }
+        const conceptFields = this.conceptFields(template);
+        new FormDialog({
+            title: `Properties: ${template.name || template.id}`,
+            fields: [
+                { key: 'name', label: 'Name', type: 'text', value: template.name ?? '' },
+                { key: 'x', label: 'X', type: 'number', value: Math.round(template.x) },
+                { key: 'y', label: 'Y', type: 'number', value: Math.round(template.y) },
+                { key: 'zIndex', label: 'Z-index', type: 'number', value: template.zIndex ?? 0 },
+                ...this.appearanceFields(template),
+                ...conceptFields,
+            ],
+            idPrefix: 'template-props-',
+            onApply: (values) => {
+                const commands = [
+                    this.shapeCommand(template, values),
+                    conceptFields.length && this.conceptCommand(template, values),
+                ].filter(Boolean);
+                if (!commands.length) return;
+                this._executeCommand(commands.length === 1 ? commands[0] : new CompositeCommand(`Edit ${template.name}`, commands));
+                this._log?.(`Updated ${template.name}`);
+            },
+        }).open();
+    }
+
+    /**
+     * Edit the selected shapes together (Archi's Properties with several
+     * selected): their colours and text style, plus what `manyConceptFields`
+     * adds. Every field starts as "keep each one's own"; what is set applies to
+     * them all, as one undo step. With one shape: its own dialog.
+     * @param {Array<string>} [ids] - Default: the selection
+     */
+    editSelectionProperties(ids = this.getSelectedIds()) {
+        const templates = ids.map(id => this.getTemplate(id)).filter(Boolean);
+        if (templates.length < 2) { if (templates[0]) this.editTemplateProperties(templates[0]); return; }
+        const locked = templates.find(t => this.isFixed(t.id));
+        if (locked) { this.tellLocked(`"${locked.name || 'A selected shape'}"`, locked.id); return; }
+        new FormDialog({
+            title: `Properties: ${templates.length} shapes`,
+            description: 'Untick Keep on a field to give it to every selected shape.',
+            fields: [...FormDialog.many(templates.map(t => this.appearanceFields(t))), ...this.manyConceptFields(templates)],
+            idPrefix: 'selection-props-',
+            onApply: (values) => {
+                const command = this.selectionPropertiesCommand(templates, values);
+                if (!command) return;
+                this._executeCommand(command);
+                this._log?.(`Updated ${templates.length} shapes`);
+            },
+        }).open();
+    }
+
+    /**
+     * The edit of several shapes from `editSelectionProperties`' values (a field
+     * left on Keep is undefined and changes nothing): one step, or null.
+     */
+    selectionPropertiesCommand(templates, values) {
+        const set = Object.fromEntries(Object.entries(values).filter(([, v]) => v !== undefined));
+        const commands = [
+            ...templates.map(t => this.shapeCommand(t, set)),
+            this.manyConceptCommand(templates, set),
+        ].filter(Boolean);
+        return commands.length ? new CompositeCommand(`Edit ${templates.length} shapes`, commands) : null;
+    }
+
+    /** A shape's colours and text style as dialog fields: one shape's dialog, and several shapes' together. */
+    appearanceFields(template) {
+        return [
+            { key: 'fillColor', label: 'Fill colour', type: 'color', value: template.fillColor },
+            { key: 'strokeColor', label: 'Border colour', type: 'color', value: template.strokeColor },
+            { key: 'textColor', label: 'Text colour', type: 'color', value: template.textColor, allowNone: false },
+            { type: 'heading', label: 'Text' },
+            ...TextStyle.fields(this._textStyleOf(template)),
+        ];
+    }
+
+    /**
+     * The shape's own fields among dialog values (name, place, colours, text
+     * style; fields not among them are left alone) as one SetPropertiesCommand,
+     * or null when nothing changes.
+     */
+    shapeCommand(template, values) {
+        const own = Object.fromEntries(Object.entries(values).filter(([k]) => SHAPE_FIELD_KEYS.includes(k)));
+        // A colour left empty stays unset.
+        const patch = {
+            ...Object.fromEntries(Object.entries(own).filter(([k, v]) => v !== template[k] && !(v === '' && template[k] == null))),
+            ...TextStyle.changes(this._textStyleOf(template), TextStyle.fromValues(values)),
+        };
+        return Object.keys(patch).length ? new SetPropertiesCommand(template, patch, `Edit ${template.name}`) : null;
+    }
+
+    /** @private */
+    _textStyleOf(template) {
+        return Object.fromEntries(TEXT_STYLE_KEYS.map(k => [k, template[k]]));
+    }
+
+    /** More fields for several shapes' dialog: what they stand for. None here. */
+    manyConceptFields(templates) {
+        return [];
+    }
+
+    /** The command applying `manyConceptFields`' values (null: nothing changed). */
+    manyConceptCommand(templates, values) {
+        return null;
+    }
+
+    /**
+     * Edit one line: its label and side pins, plus any style it overrides
+     * (each style field can instead inherit). One undo step.
+     * @private
+     */
+    _showEdgeProperties(edge) {
+        const conceptFields = this.edgeConceptFields(edge);
+        const conceptKeys = new Set(conceptFields.map(f => f.key).filter(Boolean));
+        new EdgeStyleDialog({
+            title: 'Line properties',
+            target: edge,
+            // Only what the line sets for itself (an ArchiMate line's dashes and arrows come from its kind).
+            properties: edge.styleProperties ?? EDGE_STYLE_PROPERTIES,
+            fixedProperties: LINE_ONLY_PROPERTIES,
+            extraFields: conceptFields,
+            inherited: this.edgeStyleCascade().inheritedBy('line'),
+            onApply: (values) => {
+                const patch = Object.fromEntries(Object.entries(values).filter(([k]) => !conceptKeys.has(k)));
+                const commands = [new SetStyleCommand(edge, patch, 'Edit line'), conceptFields.length && this.edgeConceptCommand(edge, values)].filter(Boolean);
+                this._executeCommand(commands.length === 1 ? commands[0] : new CompositeCommand('Edit line', commands));
+            },
+        }).open();
+    }
+
+    /**
+     * More fields for a shape's properties dialog: what the shape stands for
+     * (an ArchiMate element's type, documentation, properties, ...). None here.
+     * @returns {Array<Object>} FormDialog fields
+     */
+    conceptFields(template) {
+        return [];
+    }
+
+    /** The command applying `conceptFields`' values (null: nothing changed). */
+    conceptCommand(template, values) {
+        return null;
+    }
+
+    /** More fields for a line's properties dialog: what the line stands for. None here. */
+    edgeConceptFields(edge) {
+        return [];
+    }
+
+    /** The command applying `edgeConceptFields`' values (null: nothing changed). */
+    edgeConceptCommand(edge, values) {
+        return null;
+    }
+
+    /**
+     * Edit the line-style defaults of one level in `edgeStyleLevels` (e.g.
+     * 'view', 'model', 'tool'). Lines that do not override a value pick up the
+     * change. One undo step.
+     */
+    editLineStyle(levelKey) {
+        const cascade = this.edgeStyleCascade();
+        const level = cascade.level(levelKey);
+        if (!level) throw new Error(`No line style level "${levelKey}"`);
+        new EdgeStyleDialog({
+            title: `Line style — ${level.label} defaults`,
+            target: level.style,
+            properties: EDGE_STYLE_PROPERTIES,
+            inherited: cascade.inheritedBy(levelKey),
+            onApply: (patch) => this._executeCommand(new SetStyleCommand(level.style, patch, `${level.label} line style`)),
+        }).open();
+    }
+
+    /** Id of the topmost template under a screen point, skipping `exclude`. @private */
+    _templateIdAt(clientX, clientY, exclude = []) {
+        for (const node of document.elementsFromPoint(clientX, clientY)) {
+            const id = node.closest?.('[data-template-id]')?.getAttribute('data-template-id');
+            if (id && !exclude.includes(id) && this.getTemplate(id)) return id;
+        }
+        return null;
+    }
+
+    _setDropHighlight(templateId, on) {
+        if (!templateId) return;
+        const node = document.getElementById(this.diagramContainerId)?.querySelector(`[data-template-id="${CSS.escape(templateId)}"]`);
+        if (node) node.style.filter = on ? 'drop-shadow(0 0 8px #00aa00)' : '';
+    }
+
+    /**
+     * Drag one end of the selected edge onto another template to reconnect it.
+     * Released anywhere else (or on the other end's template) it snaps back.
+     * @private
+     */
+    _dragEdgeEnd(e, edge, end, fixedPoint) {
+        const group = document.getElementById(this.diagramContainerId)?.querySelector('#elements');
+        const preview = this._svg('line', {
+            x1: fixedPoint.x, y1: fixedPoint.y, x2: fixedPoint.x, y2: fixedPoint.y,
+            stroke: '#0066cc', 'stroke-width': 2, 'stroke-dasharray': '5 5', 'pointer-events': 'none', class: 'reconnect-preview',
+        });
+        group?.appendChild(preview);
+        const otherId = end === 'source' ? edge.targetId : edge.sourceId;
+        let hovered = null;
+        const hover = (id) => {
+            if (id === hovered) return;
+            this._setDropHighlight(hovered, false);
+            this._setDropHighlight(id, true);
+            hovered = id;
+        };
+
+        this._trackPointer(e, (p, ev) => {
+            preview.setAttribute('x2', p.x);
+            preview.setAttribute('y2', p.y);
+            hover(this._templateIdAt(ev.clientX, ev.clientY, [otherId]));
+        }, (moved, ev) => {
+            hover(null);
+            preview.remove();
+            const targetId = moved ? this._templateIdAt(ev.clientX, ev.clientY, [otherId]) : null;
+            const currentId = end === 'source' ? edge.sourceId : edge.targetId;
+            if (targetId && targetId !== currentId) {
+                this._executeCommand(new ReconnectEdgeCommand(this, edge.id, end, targetId));
+            } else {
+                this.render();
+            }
+        });
+    }
+
+    /**
+     * Add a template to the diagram.
+     * @param {Template} template
+     */
+    addTemplate(template) {
+        this.templates.set(template.id, template);
+    }
+
+    /**
+     * Remove a template from the diagram.
+     * @param {string} templateId
+     */
+    removeTemplate(templateId) {
+        this.templates.delete(templateId);
+        this.selectedIds.delete(templateId);
+        if (this.selectedTemplateId === templateId) {
+            this.selectedTemplateId = this.selectedIds.values().next().value ?? null;
+        }
+    }
+
+    /**
+     * Delete a template (with undo support).
+     * @param {string} templateId
+     */
+    deleteTemplate(templateId) {
+        const template = this.getTemplate(templateId);
+        if (!template) return;
+        if (this.isFixed(templateId)) { this.tellLocked(`"${template.name || 'This shape'}"`, templateId); return; }
+        this._executeCommand(this.deleteTemplateCommand(templateId));
+    }
+
+    /** The command that deletes a shape and the lines joined to it, as one undo step. */
+    deleteTemplateCommand(templateId) {
+        return this.deleteTemplatesCommand([templateId]);
+    }
+
+    /**
+     * The command that deletes some shapes and every line joined to any of
+     * them (each line once), as one undo step. Lines only drawn (not
+     * editable) are left to their owner.
+     */
+    deleteTemplatesCommand(templateIds) {
+        const ids = new Set(templateIds);
+        const lines = this.getAllEdges().filter(e => e.editable !== false && (ids.has(e.sourceId) || ids.has(e.targetId)));
+        return new CompositeCommand(this.deleteLabel([...ids]), [
+            ...lines.map(edge => this.deleteEdgeCommand(edge.id)),
+            ...[...ids].map(id => this.removeTemplateCommand(id)),
+        ]);
+    }
+
+    // ===== Fit to text =====
+
+    /**
+     * The size a shape's label needs (its lines at its text size, about 0.6
+     * of the size a character), never under `min`. Text is not measured
+     * (that needs a page), so it is close, not exact.
+     */
+    static textSize(text, fontPixels = 12, { padding = 24, min = { width: 60, height: 30 } } = {}) {
+        const lines = String(text ?? '').split('\n');
+        const longest = Math.max(...lines.map(l => l.length));
+        return {
+            width: Math.max(min.width, Math.round(longest * fontPixels * 0.6 + padding)),
+            height: Math.max(min.height, Math.round(lines.length * fontPixels * 1.3 + padding * 0.8)),
+        };
+    }
+
+    /** The room a shape's text needs around it, and its smallest size (textSize's options): a subclass's shapes may need more. */
+    textFit(template) {
+        return { padding: 24, min: { width: 60, height: 30 } };
+    }
+
+    /** Size shapes to their labels (textSize), each keeping its top-left corner. One undo step; a locked one stops it. */
+    fitToText(ids) {
+        const templates = ids.map(id => this.getTemplate(id)).filter(Boolean);
+        if (!templates.length) return null;
+        if (!this.arrangement.canMove(templates.map(t => t.id))) { this.tellLocked('A shape among them'); return null; }
+        const steps = templates.map(t => {
+            const { width, height } = DiagramEditor.textSize(t.name, TextStyle.pixels(t.fontSize) ?? 12, this.textFit(t));
+            if (width === t.width && height === t.height) return null;
+            const left = t.x - t.width / 2, top = t.y - t.height / 2;
+            return new SetPropertiesCommand(t, { width, height, x: left + width / 2, y: top + height / 2 }, 'Fit to text');
+        }).filter(Boolean);
+        if (!steps.length) return null;
+        const cmd = new CompositeCommand('Fit to text', steps);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    // ===== Text to shapes =====
+
+    /** The kinds of shape text can be made into, `[[key, label]]`: the palette's here; a subclass offers its own (element types). */
+    shapeTypes() {
+        const entries = this.templateCatalog?.getAll().map(e => [e.type, e.name])
+            ?? getTemplatesForDiagramType(this.templateType).map(t => [t.id, t.name]);
+        return entries;
+    }
+
+    /** A `types=` name as a shapeTypes key (its key or its label, any case), or null. */
+    resolveShapeType(name) {
+        const wanted = String(name).trim().toLowerCase();
+        return this.shapeTypes().find(([key, label]) => key.toLowerCase() === wanted || label.toLowerCase() === wanted)?.[0] ?? null;
+    }
+
+    /**
+     * New shapes from text (textToShapes.js: a name a line, or `types=`
+     * columns), their top-left at `at`: one undo step, selected after.
+     * @returns {{command: (Command|null), unknownTypes: Array<string>}}
+     */
+    addFromText(text, type, at = this.legendPosition()) {
+        const parsed = parseShapeText(text, { defaultType: type, resolveType: (t) => this.resolveShapeType(t) });
+        const placed = placeShapes(parsed, at).filter(item => item.type);
+        const command = placed.length ? this.createShapesCommand(placed) : null;
+        if (command) {
+            this._executeCommand(command);
+            this.selectTemplates(command.createdIds ?? []);
+        }
+        return { command, unknownTypes: parsed.unknownTypes };
+    }
+
+    /**
+     * The command that creates shapes from `[{name, type, documentation?, x, y}]`
+     * (x, y their centre): here palette shapes; a subclass makes its own
+     * (model elements). Its `createdIds` are the new shapes.
+     */
+    createShapesCommand(items) {
+        const stamp = Date.now().toString(36);
+        const entryOf = (type) => this.templateCatalog?.get(type) ?? getTemplatesForDiagramType(this.templateType).find(t => t.id === type);
+        const created = items.map((item, i) => {
+            const t = entryOf(item.type)?.factory(`${item.type}-${stamp}-${i}`, item.x, item.y);
+            if (t) t.name = item.name;
+            return t;
+        }).filter(Boolean);
+        const cmd = new CompositeCommand(`Add ${created.length} shape${created.length === 1 ? '' : 's'} from text`, created.map(t => new CreateTemplateCommand(this, t)));
+        cmd.createdIds = created.map(t => t.id);
+        return cmd;
+    }
+
+    /** Add from text…: the names (one a line, or `types=` columns) and their kind, placed at `at`. */
+    askAddFromText(at) {
+        const types = this.shapeTypes();
+        new FormDialog({
+            title: 'Add from text',
+            description: 'One name a line (a tab, then its documentation). Or a first line types=<type>,<type>,… and tab-separated columns, a row of shapes a line.',
+            fields: [
+                { key: 'text', label: 'Names', type: 'textarea', rows: 10, value: '' },
+                { key: 'type', label: 'Kind', type: 'select', value: types[0]?.[0], choices: types },
+            ],
+            submitLabel: 'Add',
+            idPrefix: 'from-text-',
+            document: this.document ?? globalThis.document,
+            validate: ({ text }) => {
+                const { items, unknownTypes } = parseShapeText(text, { resolveType: (t) => this.resolveShapeType(t) });
+                if (unknownTypes.length) return `Not a kind here: ${unknownTypes.join(', ')}`;
+                return items.length ? null : 'No names to add';
+            },
+            onApply: ({ text, type }) => this.addFromText(text, type, at),
+        }).open();
+    }
+
+    // ===== Colour by, and legends =====
+
+    /** Colours offered for the values of what shapes are coloured by, in order (soft, told apart easily). */
+    static COLOUR_PALETTE = Object.freeze(['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#8dd3c7', '#bebada', '#fb8072', '#80b1d3', '#fccde5', '#d9d9d9']);
+
+    /** What shapes can be coloured by, `[[key, label]]`: their kind here; a subclass adds its own (properties, layers). */
+    colourKeys(templates = [...this.templates.values()]) {
+        return [['kind', 'Kind of shape']];
+    }
+
+    /** A shape's value for a colourKeys key, as text (undefined: it has none, and is left as it is). */
+    colourValue(template, key) {
+        return key === 'kind' ? this.layoutCategory(template) : undefined;
+    }
+
+    /** The values of `key` among the shapes, in order of first appearance, each with its shapes. */
+    colourValues(key, templates = [...this.templates.values()].filter(t => t.visible !== false)) {
+        const values = new Map();
+        for (const t of templates) {
+            const value = this.colourValue(t, key);
+            if (value === undefined || value === null || value === '') continue;
+            const text = String(value);
+            if (!values.has(text)) values.set(text, []);
+            values.get(text).push(t);
+        }
+        return values;
+    }
+
+    /**
+     * Colour the shapes by what `key` says of them (a heat map): each value's
+     * shapes filled with its colour (`colours`, by value; a value left out or
+     * empty is left as it is), and with `legend` a legend of the colours
+     * under the drawing. One undo step; locked shapes are left as they are.
+     * @returns {Command|null}
+     */
+    colourByCommand(key, colours, { legend = false } = {}) {
+        const label = this.colourKeys().find(([k]) => k === key)?.[1] ?? key;
+        const steps = [];
+        for (const [value, templates] of this.colourValues(key)) {
+            const fillColor = colours[value];
+            if (!fillColor) continue;
+            for (const t of templates) if (!this.isFixed(t.id) && t.fillColor !== fillColor) steps.push(new SetPropertiesCommand(t, { fillColor }, 'Colour'));
+        }
+        if (legend) {
+            const entries = [...this.colourValues(key).keys()].filter(v => colours[v]).map(v => ({ label: v, fillColor: colours[v] }));
+            const cmd = entries.length && this.legendCommand(entries, label);
+            if (cmd) steps.push(cmd);
+        }
+        return steps.length ? new CompositeCommand(`Colour by ${label}`, steps) : null;
+    }
+
+    /** Colour by… : what to colour by, then the colour of each of its values (and whether to add a legend). */
+    askColourBy() {
+        const keys = this.colourKeys();
+        const doc = this.document ?? globalThis.document;
+        new FormDialog({
+            title: 'Colour by',
+            description: 'Fill each shape with the colour of its value (a heat map). Undo puts the colours back.',
+            fields: [{ key: 'key', label: 'Colour by', type: 'select', value: keys[0]?.[0], choices: keys }],
+            submitLabel: 'Next',
+            document: doc,
+            onApply: ({ key }) => this.askColours(key),
+        }).open();
+    }
+
+    /** The colour of each value of `key` (the palette's by default), then colour by it. @protected */
+    askColours(key) {
+        const values = [...this.colourValues(key).keys()];
+        const palette = this.constructor.COLOUR_PALETTE;
+        const label = this.colourKeys().find(([k]) => k === key)?.[1] ?? key;
+        if (!values.length) { (globalThis.alert ?? (() => {}))(`No shape here has a value for ${label}.`); return; }
+        new FormDialog({
+            title: `Colour by ${label}`,
+            fields: [
+                ...values.map((value, i) => ({ key: `value-${i}`, label: value, type: 'color', value: palette[i % palette.length] })),
+                { key: 'legend', label: 'Add a legend', type: 'checkbox', value: true },
+            ],
+            submitLabel: 'Colour',
+            idPrefix: 'colour-by-',
+            document: this.document ?? globalThis.document,
+            onApply: (got) => {
+                const colours = Object.fromEntries(values.map((value, i) => [value, got[`value-${i}`] === 'none' ? '' : got[`value-${i}`]]));
+                const cmd = this.colourByCommand(key, colours, { legend: !!got.legend });
+                if (cmd) this._executeCommand(cmd);
+            },
+        }).open();
+    }
+
+    /** A legend of the kinds of shape on the view, each in the colour of its first shape. One undo step. */
+    addKindLegend() {
+        const cmd = this.legendCommand(this.kindLegendEntries(), 'Legend');
+        if (cmd) this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** The kind legend's entries, `[{label, fillColor}]`: each kind of shape here (a subclass: each element type). */
+    kindLegendEntries() {
+        const kinds = new Map();
+        for (const t of this.templates.values()) {
+            if (t.visible === false) continue;
+            const kind = this.layoutCategory(t);
+            if (!kinds.has(kind)) kinds.set(kind, t.fillColor);
+        }
+        return [...kinds].map(([label, fillColor]) => ({ label, fillColor }));
+    }
+
+    /** Where a legend goes: under the drawing, at its left. @protected */
+    legendPosition() {
+        const shapes = [...this.templates.values()];
+        if (!shapes.length) return { x: 40, y: 40 };
+        return { x: Math.min(...shapes.map(t => t.x - t.width / 2)), y: Math.max(...shapes.map(t => t.y + t.height / 2)) + 40 };
+    }
+
+    /**
+     * The command that adds a legend: a title and a box per entry, in a row
+     * under the drawing (legendPosition). Here, notes; a subclass makes its own
+     * kind of box. Null with no entries.
+     * @param {Array<{label: string, fillColor: string}>} entries
+     * @param {string} title
+     */
+    legendCommand(entries, title) {
+        if (!entries.length) return null;
+        const { x, y } = this.legendPosition();
+        const stamp = Date.now().toString(36);
+        const note = (i, name, fillColor, width = 120) => new NoteTemplate(`legend-${stamp}-${i}`, name, { x: x + width / 2 + i * 130, y: y + 25, width, height: 40, fillColor });
+        const boxes = [note(0, title, '#ffffff'), ...entries.map((e, i) => note(i + 1, e.label, e.fillColor))];
+        return new CompositeCommand(`Add legend: ${title}`, boxes.map(t => new CreateTemplateCommand(this, t)));
+    }
+
+    // ===== Format painter =====
+
+    /**
+     * Pick up a shape's format (Template#format: paint and text style) for
+     * pasteFormat and the format painter. Returns it, or null.
+     */
+    copyFormat(templateId) {
+        const template = this.getTemplate(templateId);
+        if (!template) return null;
+        this.copiedFormat = template.format();
+        this._log?.(`Copied the format of ${template.name || 'the shape'}`);
+        return this.copiedFormat;
+    }
+
+    /**
+     * Give shapes the copied format (each the keys it has among its
+     * `formatKeys`), as one undo step. Null when nothing changes or none is
+     * copied; a locked shape stops it.
+     */
+    pasteFormat(templateIds = this.getSelectedIds()) {
+        const format = this.copiedFormat;
+        const templates = templateIds.map(id => this.getTemplate(id)).filter(Boolean);
+        if (!format || !templates.length) return null;
+        const locked = templates.find(t => this.isFixed(t.id));
+        if (locked) { this.tellLocked(`"${locked.name || 'A shape'}"`, locked.id); return null; }
+        const steps = templates.map(t => {
+            const own = t.format();
+            const patch = Object.fromEntries(t.constructor.formatKeys.filter(k => k in format && own[k] !== format[k]).map(k => [k, format[k]]));
+            return Object.keys(patch).length ? new SetPropertiesCommand(t, patch, 'Paste format') : null;
+        }).filter(Boolean);
+        if (!steps.length) return null;
+        const cmd = new CompositeCommand('Paste format', steps);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /**
+     * Turn the format painter on or off (Archi's Format Painter). While on, a
+     * click on a shape picks up its format when none is held, and gives the
+     * held one to each shape clicked after; Esc or the 🖌 button turns it off.
+     * Turned on with a shape selected, it starts with that shape's format.
+     */
+    setFormatPainter(on) {
+        this.formatPainter = !!on;
+        if (on) {
+            this.copiedFormat = null;
+            if (this.selectedTemplateId) this.copyFormat(this.selectedTemplateId);
+        }
+        const host = this.drawingHost?.();
+        if (host?.style) host.style.cursor = on ? 'copy' : '';
+        this._log?.(on ? 'Format painter: click shapes to give them the format' : 'Format painter off');
+    }
+
+    /** A click on a shape while the format painter is on. @protected */
+    formatPainterClick(templateId) {
+        if (!this.copiedFormat) { this.copyFormat(templateId); return null; }
+        return this.pasteFormat([templateId]);
+    }
+
+    /** Copy format, and Paste format when one is held (to the selection, when the shape is part of it). */
+    formatMenuItems(elementId) {
+        const targets = () => (this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId]);
+        return [
+            { label: '🖌 Copy format', action: () => this.copyFormat(elementId) },
+            ...(this.copiedFormat ? [{ label: 'Paste format', action: () => this.pasteFormat(targets()) }] : []),
+        ];
+    }
+
+    // ===== Copy and paste =====
+
+    /** Which editors can paste what this one copies (DiagramClipboard kind). A subclass whose copies differ names its own. */
+    static clipboardKind = 'diagram';
+
+    /** Whether the clipboard holds something this editor can paste. */
+    canClipboardPaste() {
+        return DiagramClipboard.has(this.constructor.clipboardKind);
+    }
+
+    /** Cut, Copy and Duplicate for a shape's menu (the selection, when it is part of one). */
+    clipboardMenuItems(elementId) {
+        const select = () => { if (!this.selectedIds.has(elementId)) this.selectTemplates([elementId]); };
+        return [
+            { label: '✂ Cut', action: () => { select(); this.cutSelection(); } },
+            { label: '⧉ Copy', action: () => { select(); this.copySelection(); } },
+            { label: 'Duplicate', action: () => { select(); this.duplicateSelection(); } },
+        ];
+    }
+
+    /** The selected shapes that can be copied. @private */
+    _copyableSelection() {
+        return this.getSelectedIds().filter(id => this.getTemplate(id));
+    }
+
+    /** The top-left corner of some shapes. @private */
+    _cornerOf(ids) {
+        const ts = ids.map(id => this.getTemplate(id)).filter(Boolean);
+        return { x: Math.min(...ts.map(t => t.x - t.width / 2)), y: Math.min(...ts.map(t => t.y - t.height / 2)) };
+    }
+
+    /** Copy the selection to the clipboard. Returns what was copied, or null. */
+    copySelection() {
+        const ids = this._copyableSelection();
+        const payload = ids.length ? this.copyPayload(ids) : null;
+        if (!payload) return null;
+        DiagramClipboard.put(this.constructor.clipboardKind, payload, this._cornerOf(ids));
+        return payload;
+    }
+
+    /** Copy the selection and delete it, as one undo step (no question: it can be pasted back). */
+    cutSelection() {
+        const ids = this._copyableSelection();
+        if (!ids.length || ids.some(id => this.isFixed(id))) return null;
+        if (!this.copySelection()) return null;
+        const cmd = this.deleteTemplatesCommand(ids);
+        cmd.label = ids.length === 1 ? 'Cut' : `Cut ${ids.length} shapes`;
+        this.selectedTemplateId = null;
+        this.selectedIds.clear();
+        this._executeCommand(cmd);
+        this._notifySelection();
+        return cmd;
+    }
+
+    /**
+     * Paste the clipboard as one undo step, and select what was pasted: with
+     * `at`, its top-left corner there; otherwise a little further along each
+     * time, so pastes do not land on each other.
+     * @returns {Command|null}
+     */
+    paste({ at = null } = {}) {
+        const entry = DiagramClipboard.get(this.constructor.clipboardKind);
+        if (!entry) return null;
+        const step = PASTE_STEP * ++entry.pastes;
+        const [dx, dy] = at ? [at.x - entry.origin.x, at.y - entry.origin.y] : [step, step];
+        return this._pasteRun(entry.payload, dx, dy);
+    }
+
+    /** Copy the selection and paste it a little along, without touching the clipboard. One undo step. */
+    duplicateSelection() {
+        const ids = this._copyableSelection();
+        const payload = ids.length ? this.copyPayload(ids) : null;
+        return payload ? this._pasteRun(payload, PASTE_STEP, PASTE_STEP, 'Duplicate') : null;
+    }
+
+    /** @private */
+    _pasteRun(payload, dx, dy, label = 'Paste') {
+        const result = this.pasteCommand(payload, { dx, dy, label });
+        if (!result?.command) return null;
+        this._executeCommand(result.command);
+        this.selectTemplates(result.ids);
+        return result.command;
+    }
+
+    /**
+     * What a copy of these shapes is: whatever pasteCommand needs to make them
+     * again. Here: each shape's class and fields, and the lines between them.
+     * @returns {Object|null}
+     */
+    copyPayload(ids) {
+        const keep = new Set(ids);
+        return {
+            templates: ids.map(id => { const t = this.getTemplate(id); return { Class: t.constructor, fields: t.serialize() }; }),
+            edges: this.getAllEdges().filter(e => e.editable !== false && keep.has(e.sourceId) && keep.has(e.targetId)).map(e => e.clone()),
+        };
+    }
+
+    /**
+     * The command that makes a copy's shapes and lines again, moved by dx, dy,
+     * with new ids; and those ids.
+     * @returns {{command: Command, ids: Array<string>}|null}
+     */
+    pasteCommand(payload, { dx = 0, dy = 0, label = 'Paste' } = {}) {
+        const newId = (old) => { let n = 1; while (this.templates.has(`${old}-${n}`) || taken.has(`${old}-${n}`)) n++; taken.add(`${old}-${n}`); return `${old}-${n}`; };
+        const taken = new Set();
+        const ids = new Map();
+        const shapes = payload.templates.map(({ Class, fields }) => {
+            const id = newId(fields.id);
+            ids.set(fields.id, id);
+            const { id: _, name, ...rest } = fields;
+            return new Class(id, name, { ...rest, x: fields.x + dx, y: fields.y + dy });
+        });
+        const lines = payload.edges.map(edge => {
+            const copy = edge.clone();
+            copy.id = newId(edge.id);
+            copy.sourceId = ids.get(edge.sourceId);
+            copy.targetId = ids.get(edge.targetId);
+            copy.waypoints = (edge.waypoints ?? []).map(p => ({ x: p.x + dx, y: p.y + dy }));
+            return copy;
+        });
+        const command = new CompositeCommand(label, [
+            ...shapes.map(t => new CreateTemplateCommand(this, t)),
+            ...lines.map(e => new AddEdgeCommand(this, e)),
+        ]);
+        return { command, ids: shapes.map(t => t.id) };
+    }
+
+    /** What deleting these shapes is called (the undo step's name). */
+    deleteLabel(templateIds) {
+        return templateIds.length === 1 ? `Delete ${this.getTemplate(templateIds[0])?.name ?? 'shape'}` : `Delete ${templateIds.length} shapes`;
+    }
+
+    /**
+     * The command that takes one shape away (its lines are dealt with by the
+     * caller). A subclass whose shapes stand for something else (an ArchiMate
+     * view's elements, its groups) returns its own.
+     */
+    removeTemplateCommand(templateId) {
+        return new DeleteTemplateCommand(this, templateId);
+    }
+
+    /**
+     * Delete the selected shapes (with their lines), as one undo step, once
+     * confirmed; a fixed one among them stops it. Returns the command, or null.
+     */
+    deleteSelection({ confirm = (message) => globalThis.confirm?.(message) ?? true } = {}) {
+        const ids = this.getSelectedIds().filter(id => this.getTemplate(id));
+        if (!ids.length) return null;
+        const fixed = ids.find(id => this.isFixed(id));
+        if (fixed) { this.tellLocked(`"${this.getTemplate(fixed).name || 'A shape'}"`, fixed); return null; }
+        const message = ids.length === 1 ? `Delete "${this.getTemplate(ids[0]).name}"?` : `Delete ${ids.length} shapes?`;
+        if (!confirm(message)) return null;
+        const cmd = this.deleteTemplatesCommand(ids);
+        this.selectedTemplateId = null;
+        this.selectedIds.clear();
+        this._executeCommand(cmd);
+        this._notifySelection();
+        return cmd;
+    }
+
+    /**
+     * Select these shapes (or add them to the selection), the last one the
+     * primary. Shapes not drawn are left out.
+     */
+    selectTemplates(templateIds, { extend = false } = {}) {
+        const ids = templateIds.filter(id => this.getTemplate(id));
+        if (!extend) this.selectedIds.clear();
+        for (const id of ids) this.selectedIds.add(id);
+        this.selectedTemplateId = ids.at(-1) ?? (extend ? this.selectedTemplateId : null);
+        this.selectedEdgeId = null;
+        this.render();
+        this._notifySelection();
+    }
+
+    /** Every shape that can be selected: drawn, and not hidden. */
+    selectableIds() {
+        return [...this.templates.values()]
+            .filter(t => t.visible !== false && this.templateEmphasis(t) !== 'hidden')
+            .map(t => t.id);
+    }
+
+    /** The shapes wholly inside a rectangle in diagram coordinates ({x, y, width, height}, any corner first). */
+    templatesInside({ x, y, width, height }) {
+        const [left, right] = [x, x + width].sort((a, b) => a - b);
+        const [top, bottom] = [y, y + height].sort((a, b) => a - b);
+        return this.selectableIds().filter(id => {
+            const t = this.getTemplate(id);
+            return t.x - t.width / 2 >= left && t.x + t.width / 2 <= right && t.y - t.height / 2 >= top && t.y + t.height / 2 <= bottom;
+        });
+    }
+
+    /**
+     * Move the selection (with its groups and what it holds) by dx, dy, as one
+     * undo step; nothing when any of it is fixed. Returns the command, or null.
+     */
+    nudgeSelection(dx, dy) {
+        if (!this.selectedTemplateId) return null;
+        const ids = this.moversFor(this.selectedTemplateId);
+        if (!ids.length) return null;
+        const moves = ids.map(id => new MoveElementCommand(this, id, dx, dy));
+        const cmd = moves.length === 1 ? moves[0] : new CompositeCommand('Move', moves);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    // ===== ALIGN, DISTRIBUTE, MATCH SIZE =====
+
+    /**
+     * Align, Distribute and Match size submenus over the selection
+     * (alignment.js): align and match size need two shapes, distribute three.
+     * With `always` (the toolbar's Arrange menu) they are there but greyed
+     * out when there are too few; otherwise (a shape's menu) left out. Then
+     * Layout (layouts.js): the selection, or with fewer than two selected the
+     * whole view.
+     */
+    alignMenuItems({ always = false } = {}) {
+        const count = this.getSelectedIds().length;
+        const menu = (label, choices, need, act) => ({
+            label, disabled: count < need || undefined,
+            items: choices.map(([key, text]) => ({ label: text, disabled: count < need || undefined, action: () => act(key) })),
+        });
+        const items = [
+            menu('Align', ALIGNMENTS, 2, (edge) => this.alignSelection(edge)),
+            menu('Distribute', DISTRIBUTIONS, 3, (direction) => this.distributeSelection(direction)),
+            menu('Match size', SIZE_MATCHES, 2, (dimension) => this.matchSelectionSize(dimension)),
+            menu(count >= 2 ? 'Layout' : 'Layout the view', LAYOUTS, 0, (kind) => this.layoutShapes(kind)),
+        ];
+        if (always) return items;
+        return count >= 2 ? [{ separator: true }, ...items.filter(i => !i.disabled)] : [];
+    }
+
+    /** The selection's boxes (`{id, left, top, width, height}`) and the primary one's, its reference. @protected */
+    _selectionBoxes() {
+        const boxes = this.getSelectedIds().map(id => this._boxOf(id));
+        return { boxes, reference: boxes.find(b => b.id === this.selectedTemplateId) ?? boxes.at(-1) };
+    }
+
+    /** A shape's box: `{id, left, top, width, height}`. @protected */
+    _boxOf(id) {
+        const t = this.getTemplate(id);
+        return { id, left: t.left ?? t.x - t.width / 2, top: t.top ?? t.y - t.height / 2, width: t.width, height: t.height };
+    }
+
+    // ===== LAYOUTS =====
+
+    /** What a layout rearranges: the selection (two or more), else every shape; not what a container among them holds (it goes with it). */
+    layoutTargetIds() {
+        const selected = this.getSelectedIds();
+        const ids = (selected.length >= 2 ? selected : this.selectableIds()).filter(id => this.getTemplate(id));
+        const inner = new Set(ids.flatMap(id => this.containedIn(id)));
+        return ids.filter(id => !inner.has(id));
+    }
+
+    /**
+     * Lay shapes out (layouts.js: grid, circle, tree, force-directed, by
+     * kind), keeping the area's top-left corner, along the lines between
+     * them. One undo step; what a container holds goes with it; a locked
+     * shape stops it.
+     * @param {string} kind - One of LAYOUTS' keys
+     * @param {Array<string>} [ids] - Default: layoutTargetIds()
+     */
+    layoutShapes(kind, ids = this.layoutTargetIds()) {
+        if (ids.length < 2) return null;
+        const boxes = ids.map(id => this._boxOf(id));
+        const edges = this.getAllEdges().map(e => ({ source: e.sourceId, target: e.targetId }));
+        const placed = layout(kind, boxes, { edges, categoryOf: (b) => this.layoutCategory(this.getTemplate(b.id)) });
+        return this._placeBoxes(boxes, placed, `Layout: ${LAYOUTS.find(([k]) => k === kind)?.[1] ?? kind}`);
+    }
+
+    /** A shape's kind for the "by kind" layout: its shape class here (an ArchiMate editor: its layer). */
+    layoutCategory(template) {
+        return template.constructor.name.replace(/Template$/, '');
+    }
+
+    /** The shapes that are this one's parts, drawn inside it by nestPartsInside. None here; a subclass with nesting says. */
+    partsOf(templateId) {
+        return [];
+    }
+
+    /**
+     * Draw a shape's parts inside it (`partsOf`), theirs inside them,
+     * however deep (nestLayout): each nested (`nestCommand`), placed in a
+     * grid below its parent's label, the parent grown to hold them. One undo
+     * step; a locked shape stops it.
+     */
+    nestPartsInside(templateId) {
+        if (!this.partsOf(templateId).length) return null;
+        const plan = nestLayout(templateId, (id) => this.partsOf(id), (id) => this._boxOf(id));
+        if (!this.arrangement.canMove([...plan.keys()])) { this.tellLocked('A shape among them'); return null; }
+        const steps = [];
+        for (const [id, box] of plan) {
+            const t = this.getTemplate(id);
+            const patch = { x: box.left + box.width / 2, y: box.top + box.height / 2, width: box.width, height: box.height };
+            const changed = Object.fromEntries(Object.entries(patch).filter(([k, v]) => t[k] !== v));
+            if (Object.keys(changed).length) steps.push(new SetPropertiesCommand(t, changed, 'Nest parts'));
+            if (box.parentId && this.parentOf(id) !== box.parentId) steps.push(this.nestCommand(id, box.parentId));
+        }
+        const cmd = new CompositeCommand(`Nest the parts of ${this.getTemplate(templateId).name || 'a shape'}`, steps.filter(Boolean));
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** "Nest its parts inside", for a shape that has parts on this view. */
+    nestMenuItems(elementId) {
+        return this.partsOf(elementId).length ? [{ label: 'Nest its parts inside', action: () => this.nestPartsInside(elementId) }] : [];
+    }
+
+    /** Line the selection up with the primary shape's edge or middle ('left', 'centre', 'right', 'top', 'middle', 'bottom'). One undo step. */
+    alignSelection(edge) {
+        const { boxes, reference } = this._selectionBoxes();
+        if (boxes.length < 2) return null;
+        const label = `Align ${ALIGNMENTS.find(([k]) => k === edge)?.[1].toLowerCase() ?? edge}`;
+        return this._placeBoxes(boxes, align(boxes, edge, reference), label);
+    }
+
+    /** Space the selection evenly ('horizontal' or 'vertical'), the outermost two staying. One undo step. */
+    distributeSelection(direction) {
+        const { boxes } = this._selectionBoxes();
+        if (boxes.length < 3) return null;
+        return this._placeBoxes(boxes, distribute(boxes, direction), `Distribute ${direction}ly`);
+    }
+
+    /** Give the selection the primary shape's width, height or both ('width', 'height', 'both'), each keeping its top-left. One undo step. */
+    matchSelectionSize(dimension) {
+        const { boxes, reference } = this._selectionBoxes();
+        if (boxes.length < 2) return null;
+        const sized = matchSize(boxes, dimension, reference);
+        if (!sized.length) return null;
+        if (!this.arrangement.canMove(sized.map(s => s.id))) { this.tellLocked('A shape in the selection'); return null; }
+        const steps = sized.map(({ id, width, height }) => {
+            const t = this.getTemplate(id);
+            const was = boxes.find(b => b.id === id);
+            return new SetPropertiesCommand(t, { width, height, x: was.left + width / 2, y: was.top + height / 2 }, 'Match size');
+        });
+        const cmd = new CompositeCommand('Match size', steps);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /**
+     * Move boxes to their new places (`{id, left, top}`), what each holds
+     * going with it, as one step; nothing when any of them is fixed.
+     * @protected
+     */
+    _placeBoxes(boxes, placed, label) {
+        if (!placed.length) return null;
+        if (!this.arrangement.canMove(placed.map(p => p.id))) { this.tellLocked('A shape in the selection'); return null; }
+        const deltas = new Map(placed.map(p => {
+            const was = boxes.find(b => b.id === p.id);
+            return [p.id, { dx: p.left - was.left, dy: p.top - was.top }];
+        }));
+        // What a moved container holds moves with it, unless it is in the selection and placed itself.
+        const selected = new Set(boxes.map(b => b.id));
+        for (const [id, delta] of [...deltas]) {
+            const queue = [id];
+            while (queue.length) {
+                for (const inner of this.containedIn(queue.shift())) {
+                    if (selected.has(inner) || deltas.has(inner) || !this.getTemplate(inner)) continue;
+                    deltas.set(inner, delta);
+                    queue.push(inner);
+                }
+            }
+        }
+        const moves = [...deltas].filter(([, d]) => d.dx || d.dy).map(([id, { dx, dy }]) => new MoveElementCommand(this, id, dx, dy));
+        const cmd = new CompositeCommand(label, moves);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /**
+     * Get a template by id.
+     * @param {string} templateId
+     * @returns {Template|undefined}
+     */
+    getTemplate(templateId) {
+        return this.templates.get(templateId);
+    }
+
+    /**
+     * Get all templates.
+     * @returns {Template[]}
+     */
+    getAllTemplates() {
+        return Array.from(this.templates.values());
+    }
+
+    // ===== EDGE MANAGEMENT =====
+
+    /**
+     * Add an edge to the diagram.
+     * @param {Edge} edge
+     */
+    addEdge(edge) {
+        this.edges.set(edge.id, edge);
+    }
+
+    /**
+     * Remove an edge from the diagram.
+     * @param {string} edgeId
+     */
+    removeEdge(edgeId) {
+        this.edges.delete(edgeId);
+        if (this.selectedEdgeId === edgeId) {
+            this.selectedEdgeId = null;
+        }
+    }
+
+    /**
+     * Delete an edge (with undo support).
+     * @param {string} edgeId
+     */
+    deleteEdge(edgeId) {
+        if (!this.getEdge(edgeId)) return;
+        this._executeCommand(this.deleteEdgeCommand(edgeId));
+    }
+
+    /** The command that deletes a line. A subclass may return its own. */
+    deleteEdgeCommand(edgeId) {
+        return new DeleteEdgeCommand(this, edgeId);
+    }
+
+    /**
+     * Connect two shapes with a new line, as one undo step.
+     * @returns {Command|null} the command run, or null when there is nothing to connect
+     */
+    connect(sourceId, targetId) {
+        if (!sourceId || !targetId || sourceId === targetId) return null;
+        if (!this.getTemplate(sourceId) || !this.getTemplate(targetId)) return null;
+        const cmd = this.connectCommand(sourceId, targetId);
+        if (!cmd) return null;
+        this._executeCommand(cmd);
+        this._log?.(`Connected: ${this.getTemplate(sourceId)?.name} → ${this.getTemplate(targetId)?.name}`);
+        return cmd;
+    }
+
+    /**
+     * The command that connects two shapes: a new plain line. A subclass whose
+     * lines stand for something else (an ArchiMate relationship) returns its
+     * own, or null to refuse the connection.
+     */
+    connectCommand(sourceId, targetId) {
+        const edgeId = `edge_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
+        return new AddEdgeCommand(this, new Edge(edgeId, sourceId, targetId));
+    }
+
+    /**
+     * Get an edge by id.
+     * @param {string} edgeId
+     * @returns {Edge|undefined}
+     */
+    getEdge(edgeId) {
+        return this.edges.get(edgeId);
+    }
+
+    /**
+     * Get all edges.
+     * @returns {Edge[]}
+     */
+    getAllEdges() {
+        return Array.from(this.edges.values());
+    }
+
+    /**
+     * Start click-to-connect mode. Selects source template for connection.
+     * @param {string} templateId
+     */
+    startClickToConnect(templateId) {
+        if (this.connectSource === templateId) {
+            this.connectSource = null;
+            this._log('Connect mode cancelled');
+        } else {
+            this.connectSource = templateId;
+            this._log(`Connect from: ${this.getTemplate(templateId).name}`);
+        }
+    }
+
+    /**
+     * Complete click-to-connect by selecting target template.
+     * @param {string} targetId
+     * @returns {Edge|null}
+     */
+    completeClickToConnect(targetId) {
+        if (!this.connectSource || this.connectSource === targetId) {
+            this.connectSource = null;
+            return null;
+        }
+        const sourceId = this.connectSource;
+        this.connectSource = null;
+        return this.connect(sourceId, targetId)?.edge ?? null;
+    }
+
+    /**
+     * Build the palette for a diagram category, with a picker for switching category.
+     * @param {HTMLElement} paletteContainer - Element the palette renders into
+     * @param {string} [templateType] - DiagramTypeRegistry key; defaults to this.templateType
+     */
+    initPaletteForDiagramType(paletteContainer, templateType = null) {
+        if (typeof window === 'undefined') return;
+        this.paletteContainer = paletteContainer;
+        this.setPaletteCategory(templateType || this.templateType || 'generic');
+        this._acceptPaletteDrops();
+    }
+
+    /**
+     * Switch the palette to another DiagramTypeRegistry category. Shapes already
+     * on the canvas are untouched. Fires `onTemplateTypeChange(key)` if set.
+     */
+    setPaletteCategory(templateType) {
+        const catalog = new TemplateCatalog();
+        for (const tmpl of getTemplatesForDiagramType(templateType)) {
+            catalog.register(tmpl.id, { name: tmpl.name, factory: tmpl.factory });
+        }
+        const changed = this.templateType !== templateType;
+        this.templateType = templateType;
+        this._mountPalette(catalog, {
+            categories: getDiagramTypesByGroup(),
+            category: templateType,
+            onCategoryChange: (key) => this.setPaletteCategory(key),
+        });
+        if (changed) this.onTemplateTypeChange?.(templateType);
+    }
+
+    /**
+     * Initialize the palette from a caller-built catalog (no category picker).
+     * @param {TemplateCatalog} catalog
+     * @param {HTMLElement} paletteContainer
+     * @protected
+     */
+    initPalette(catalog, paletteContainer) {
+        if (typeof window === 'undefined') return;
+        this.paletteContainer = paletteContainer;
+        this._mountPalette(catalog, {});
+        this._acceptPaletteDrops();
+    }
+
+    _mountPalette(catalog, options) {
+        this.templateCatalog = catalog;
+        this.palette = new Palette({ catalog, editor: this, container: this.paletteContainer, ...options });
+        this.palette.render();
+    }
+
+    /** Palette tiles carry their template type; drop them as new shapes. @private */
+    _acceptPaletteDrops() {
+        this._paletteDrop ??= this.addDropHandler({
+            accepts: (dt) => Array.from(dt.types).some(t => t.toLowerCase() === 'templatetype'),
+            drop: (dt, point, event) => this.palette?.handleDrop(event, point.x, point.y),
+        });
+    }
+
+    /**
+     * Accept something dropped onto the canvas. Handlers are tried in order and
+     * the first whose `accepts(dataTransfer)` is true takes the drop; while
+     * dragging only `dataTransfer.types` is readable, the data itself arrives
+     * with `drop(dataTransfer, point, event)`, where `point` is in diagram
+     * coordinates (pan/zoom applied). The canvas is outlined while a drop it
+     * accepts is over it.
+     * @param {{accepts: (dt: DataTransfer) => boolean, drop: (dt: DataTransfer, point: {x: number, y: number}, event: DragEvent) => void}} handler
+     * @returns {() => void} removes the handler
+     */
+    addDropHandler(handler) {
+        (this._dropHandlers ??= []).push(handler);
+        this._enableCanvasDrop();
+        return () => { this._dropHandlers = this._dropHandlers.filter(h => h !== handler); };
+    }
+
+    /**
+     * Accept image files dropped onto (or pasted while focus is inside) the
+     * canvas, calling `onImage(dataURL, point)`. A paste lands at the centre.
+     */
+    enableImageDrop(onImage) {
+        const imageIn = (files) => Array.from(files ?? []).find(file => file.type.startsWith('image/'));
+        const read = (file, point) => {
+            const reader = new FileReader();
+            reader.onload = (e) => onImage(e.target.result, point);
+            reader.readAsDataURL(file);
+        };
+        this.addDropHandler({
+            accepts: (dt) => Array.from(dt.types).includes('Files'),
+            drop: (dt, point) => { const file = imageIn(dt.files); if (file) read(file, point); },
+        });
+        this._listen(document, 'paste', (e) => {
+            const container = this._dropContainer();
+            const file = imageIn(e.clipboardData?.files);
+            if (!container?.contains(e.target) || !file) return;
+            e.preventDefault();
+            const r = container.getBoundingClientRect();
+            read(file, this._clientToDiagram(r.left + r.width / 2, r.top + r.height / 2) ?? { x: r.width / 2, y: r.height / 2 });
+        });
+    }
+
+    /** The element that receives canvas drops: the diagram container. @protected */
+    _dropContainer() {
+        return document.getElementById(this.diagramContainerId);
+    }
+
+    /**
+     * Bind drag-and-drop once per container. Capture phase, so a drop a handler
+     * accepts is claimed before whatever draws inside the container sees it.
+     * @private
+     */
+    _enableCanvasDrop() {
+        if (typeof document === 'undefined') return;
+        const container = this._dropContainer();
+        if (!container || this._dropTarget === container) return;
+        this._dropTarget = container;
+        const handlerFor = (e) => (this._dropHandlers ?? []).find(h => h.accepts(e.dataTransfer));
+        const highlight = (on) => Object.assign(container.style, { outline: on ? '2px dashed #5470c6' : '', outlineOffset: on ? '-2px' : '' });
+
+        container.addEventListener('dragover', (e) => {
+            if (!handlerFor(e)) return;
+            e.preventDefault();
+            e.dataTransfer.dropEffect = 'copy';
+            highlight(true);
+        }, true);
+        container.addEventListener('dragleave', (e) => {
+            if (!container.contains(e.relatedTarget)) highlight(false);
+        }, true);
+        container.addEventListener('drop', (e) => {
+            highlight(false);
+            const handler = handlerFor(e);
+            if (!handler) return;
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            const point = this._clientToDiagram(e.clientX, e.clientY);
+            if (point) handler.drop(e.dataTransfer, point, e);
+        }, true);
+    }
+
+    /**
+     * Decorate a diagram container with a view's background, title and
+     * watermark (see viewDecorations.js for the fields).
+     */
+    decorateView(container, decorations) {
+        if (container) applyViewDecorations(container, decorations);
+    }
+
+    /** A UI option's value (e.g. a toolbar select or toggle), or `fallback` if unset. */
+    getOption(key, fallback) {
+        return this._options?.has(key) ? this._options.get(key) : fallback;
+    }
+
+    setOption(key, value) {
+        (this._options ??= new Map()).set(key, value);
+    }
+
+    /**
+     * Initialize properties panel.
+     * @protected
+     */
+    initPropertiesPanel() {
+        if (typeof window === 'undefined') return;
+
+        if (!PropertiesPanel) return;
+
+        this.propertiesPanel = new PropertiesPanel({
+            editor: this,
+        });
+        this.propertiesPanel.render();
+    }
+
+    /**
+     * Select a template and show in properties panel.
+     * Toggles selection if same template clicked twice.
+     * @param {string} templateId
+     */
+    /**
+     * Select a shape. A plain click selects it alone (or clears it if it was the
+     * only one selected); with `extend` (Shift/Ctrl/⌘+click) it is added to the
+     * selection, or taken out if already in it.
+     * @param {string} templateId
+     * @param {{extend?: boolean}} [options]
+     */
+    selectTemplate(templateId, { extend = false } = {}) {
+        if (extend) {
+            if (this.selectedIds.has(templateId)) {
+                this.selectedIds.delete(templateId);
+                if (this.selectedTemplateId === templateId) this.selectedTemplateId = [...this.selectedIds].at(-1) ?? null;
+            } else {
+                this.selectedIds.add(templateId);
+                this.selectedTemplateId = templateId;
+            }
+        } else if (this.selectedTemplateId === templateId && this.selectedIds.size <= 1) {
+            // Toggle if clicking the same, only, template
+            this.selectedTemplateId = null;
+            this.selectedIds.clear();
+        } else {
+            this.selectedTemplateId = templateId;
+            this.selectedIds = new Set([templateId]);
+        }
+        this.selectedEdgeId = null;
+
+        const template = this.selectedTemplateId ? this.getTemplate(this.selectedTemplateId) : null;
+        if (this.propertiesPanel) {
+            if (template) {
+                this.propertiesPanel.setSelected(template);
+            } else {
+                this.propertiesPanel.render(); // Clear selection
+            }
+        }
+        this.render();
+        this._notifySelection();
+    }
+
+    /**
+     * Get currently selected template.
+     * @returns {Template|null}
+     */
+    getSelectedTemplate() {
+        return this.selectedTemplateId ? this.getTemplate(this.selectedTemplateId) : null;
+    }
+
+    /** Ids of every selected shape still on the diagram, the primary one included. */
+    getSelectedIds() {
+        const ids = new Set(this.selectedIds);
+        if (this.selectedTemplateId) ids.add(this.selectedTemplateId);
+        return [...ids].filter(id => this.getTemplate(id));
+    }
+
+    /**
+     * Called during drag. Default moves template, subclass can override.
+     * Works with template-based diagrams; can also work with model-based diagrams.
+     * @param {string} elementId - Element identifier
+     * @param {number} deltaX - Pixels moved in X since last drag event
+     * @param {number} deltaY - Pixels moved in Y since last drag event
+     */
+    onDragMove(elementId, deltaX, deltaY) {
+        // The shape with whatever moves with it (its selection and groups).
+        const ids = this._dragState?.movers ?? [elementId];
+        let moved = false;
+        for (const id of ids) {
+            const template = this.getTemplate(id);
+            if (!template) continue;
+            template.x += deltaX;
+            template.y += deltaY;
+            moved = true;
+        }
+        if (moved) this.render();
+    }
+
+    /**
+     * Called at end of drag. Default creates MoveElementCommand.
+     * Works with template-based diagrams; can also work with model-based diagrams.
+     */
+    onDragEnd(elementId, deltaX, deltaY) {
+        if (!MoveElementCommand) return;
+
+        // Try template-based first (template diagram pattern)
+        const ids = (this._dragState?.movers ?? [elementId]).filter(id => this.getTemplate(id));
+        if (!ids.length || !this.history) return;
+        // Where they were dropped: into a shape that holds them, or out of their parent.
+        const nesting = this.nestingChanges(ids);
+        // Put them back, then move them all (and nest them) as one undo step.
+        for (const id of ids) {
+            const t = this.getTemplate(id);
+            t.x -= deltaX;
+            t.y -= deltaY;
+        }
+        const steps = [
+            ...ids.map(id => new MoveElementCommand(this, id, deltaX, deltaY)),
+            ...nesting.map(({ childId, parentId }) => this.nestCommand(childId, parentId)).filter(Boolean),
+        ];
+        this.history.execute(steps.length === 1 ? steps[0] : new CompositeCommand('Move', steps));
+        this.render();
+        this._log(`Moved ${ids.length === 1 ? this.getTemplate(ids[0]).name : `${ids.length} shapes`}`);
+        if (nesting.length) this.nested(nesting);
+    }
+
+    // ===== Nesting (a shape drawn inside another) =====
+
+    /**
+     * After a move, as the shapes lie now: each moved shape that is not moving
+     * with its parent, whose parent changes. Its new parent is the innermost
+     * shape not moved that wholly holds its box and `canHold` it; none (null)
+     * takes it out of the one it was in.
+     * @param {Array<string>} movedIds
+     * @returns {Array<{childId: string, parentId: (string|null), previousId: (string|null)}>}
+     */
+    nestingChanges(movedIds) {
+        const moved = new Set(movedIds);
+        const box = (t) => ({ left: t.x - t.width / 2, top: t.y - t.height / 2, right: t.x + t.width / 2, bottom: t.y + t.height / 2 });
+        const holds = (outer, inner) => outer.left <= inner.left && outer.top <= inner.top && outer.right >= inner.right && outer.bottom >= inner.bottom;
+        const changes = [];
+        for (const childId of movedIds) {
+            const previousId = this.parentOf(childId);
+            if (previousId && moved.has(previousId)) continue;   // it goes with its parent
+            const child = this.getTemplate(childId);
+            if (!child) continue;
+            const inner = box(child);
+            const parent = [...this.templates.values()]
+                .filter(t => !moved.has(t.id) && t.visible !== false && this.canHold(t.id, childId) && holds(box(t), inner))
+                .sort((a, b) => a.width * a.height - b.width * b.height)[0];
+            const parentId = parent?.id ?? null;
+            if (parentId !== previousId) changes.push({ childId, parentId, previousId });
+        }
+        return changes;
+    }
+
+    /** The shape this one is drawn inside (nested in), or null. None here: a subclass with nesting says. */
+    parentOf(templateId) {
+        return null;
+    }
+
+    /** Whether a shape can be nested in another. Never here; a subclass with nesting says when. */
+    canHold(parentId, childId) {
+        return false;
+    }
+
+    /** The command that nests a shape in another (or, with null, takes it out); null when it can't. */
+    nestCommand(childId, parentId) {
+        return null;
+    }
+
+    /** After a move nested shapes or took them out (nestingChanges' list): a subclass's follow-up. None here. */
+    nested(changes) {}
+
+    /**
+     * Show properties dialog. Opens edit modal if template exists.
+     */
+    showPropertiesDialog(templateId) {
+        const template = this.getTemplate(templateId);
+        if (!template || typeof document === 'undefined') return;
+        if (this.selectedIds.has(templateId) && this.selectedIds.size > 1) { this.editSelectionProperties(); return; }
+        this.selectTemplate(templateId);
+        this.editTemplateProperties(template);
+    }
+
+}
+
+/** Stacking-order operations offered in a shape's Order submenu: [operation, label]. */
+DiagramEditor.ORDER_OPERATIONS = Object.freeze([
+    ['front', 'Bring to Front'], ['back', 'Send to Back'], ['raise', 'Raise'], ['lower', 'Lower'],
+]);
+DiagramEditor.ORDER_MENU_LABEL = '⬍ Order';