@peter.prib/renderengine 0.12.0 → 0.13.0

package/dist/renderengine-workspace.umd.js

@@ -3852,10 +3852,10 @@
     /**
      * Work out the bitmap size to rasterize at.
      *
-     * `scale` is what the caller asked for (2 = retina-sharp). It is reduced, never
-     * the diagram's own dimensions, when the result would be too large: halving the
-     * scale of a huge diagram still shows all of it, whereas cropping or shrinking
-     * the diagram loses content or legibility.
+     * `scale` is what the caller asked for (1 = 100%, 2 = retina-sharp, 0.5 = half
+     * size). It is reduced, never the diagram's own dimensions, when the result
+     * would be too large: halving the scale of a huge diagram still shows all of
+     * it, whereas cropping or shrinking the diagram loses content or legibility.
      *
      * @returns {{width:number, height:number, scale:number, clamped:boolean}}
      */
@@ -3870,10 +3870,6 @@
             s = Math.sqrt(maxPixels / (w * h));
             clamped = true;
         }
-        // A scale below 1:1 would be a downscale the caller never asked for, but a
-        // diagram that is itself over the budget leaves no choice.
-        if (s < 1 && w * h <= maxPixels) s = 1;
-
         return { width: Math.max(1, Math.round(w * s)), height: Math.max(1, Math.round(h * s)), scale: s, clamped };
     }
 
@@ -3888,8 +3884,10 @@
      * @param {number} [options.width]       pixels; omitted leaves what is there
      * @param {number} [options.height]
      * @param {string|null} [options.background='#ffffff']  null for transparent
+     * @param {string} [options.viewBox]  the drawing's own units, when it has none
+     *   (so a picture sized other than as drawn scales rather than crops)
      */
-    function prepareSvgMarkup(markup, { width, height, background = '#ffffff' } = {}) {
+    function prepareSvgMarkup(markup, { width, height, background = '#ffffff', viewBox } = {}) {
         let out = String(markup ?? '').trim();
         const open = out.match(/^<svg\b[^>]*>/i);
         if (!open) return out;          // not an <svg> — hand it back untouched
@@ -3908,13 +3906,23 @@
         };
         if (Number.isFinite(width) && width > 0) setAttr('width', Math.round(width));
         if (Number.isFinite(height) && height > 0) setAttr('height', Math.round(height));
+        if (viewBox && !/\sviewBox\s*=/i.test(tag)) setAttr('viewBox', viewBox);
 
         out = tag + out.slice(open[0].length);
 
         if (background) {
-            // First child, so it sits behind everything. Percentages rather than
-            // pixels so it still covers the drawing if a viewBox rescales it.
-            out = out.replace(tag, `${tag}<rect x="0" y="0" width="100%" height="100%" fill="${background}"/>`);
+            // First child, so it sits behind everything. With a viewBox it reaches
+            // a whole viewBox past each side (the picture clips it): a percentage
+            // counts from (0,0), so a viewBox starting elsewhere (a cropped
+            // drawing) would leave a strip bare, and the viewBox alone would leave
+            // the bands a picture of another shape letterboxes it with.
+            // Without one, percentages, so it covers whatever size it is shown at.
+            const box = tag.match(/\sviewBox\s*=\s*["']\s*([-\d.e+]+)[\s,]+([-\d.e+]+)[\s,]+([-\d.e+]+)[\s,]+([-\d.e+]+)\s*["']/i);
+            const [x, y, w, h] = box ? box.slice(1).map(Number) : [];
+            const rect = box
+                ? `<rect x="${x - w}" y="${y - h}" width="${3 * w}" height="${3 * h}" fill="${background}"/>`
+                : `<rect x="0" y="0" width="100%" height="100%" fill="${background}"/>`;
+            out = out.replace(tag, `${tag}${rect}`);
         }
         return out;
     }
@@ -3947,12 +3955,12 @@
      * Size is taken from the element's laid-out box rather than its attributes,
      * because that is what the user is actually looking at.
      */
-    function serializeSvg(svgEl, { background = '#ffffff', width, height } = {}) {
+    function serializeSvg(svgEl, { background = '#ffffff', width, height, scale = 1 } = {}) {
         const box = svgEl.getBoundingClientRect?.() ?? {};
         const w = width ?? svgEl.width?.baseVal?.value ?? box.width;
         const h = height ?? svgEl.height?.baseVal?.value ?? box.height;
         const markup = new XMLSerializer().serializeToString(svgEl);
-        return prepareSvgMarkup(markup, { width: w, height: h, background });
+        return prepareSvgMarkup(markup, { width: w * scale, height: h * scale, background, viewBox: `0 0 ${w} ${h}` });
     }
 
     /**
@@ -3971,9 +3979,16 @@
         }
 
         const box = drawable.getBoundingClientRect();
-        const size = imageSize({ width: box.width, height: box.height, scale, maxPixels });
         const markup = serializeSvg(drawable, { background, width: box.width, height: box.height });
+        return svgMarkupToPngBlob(markup, { width: box.width, height: box.height, scale, background, maxPixels });
+    }
 
+    /**
+     * Rasterize standalone SVG markup (prepareSvgMarkup's) drawn `width` × `height`
+     * to a PNG Blob at `scale`. DOM only.
+     */
+    async function svgMarkupToPngBlob(markup, { width, height, scale = 1, background = '#ffffff', maxPixels = MAX_IMAGE_PIXELS } = {}) {
+        const size = imageSize({ width, height, scale, maxPixels });
         // A data: URL rather than a blob: URL — a blob: URL taints nothing either,
         // but Safari has historically refused to draw SVG from one.
         const url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
@@ -4021,7 +4036,15 @@
      * @returns {Promise<{via:'clipboard'|'download', filename?:string}>}
      */
     async function copyImage(host, { scale = 2, background = '#ffffff', name = 'diagram' } = {}) {
-        const blob = await toPngBlob(host, { scale, background });
+        return copyPngBlob(await toPngBlob(host, { scale, background }), { name });
+    }
+
+    /**
+     * Put a PNG Blob on the clipboard, or download it where the browser cannot
+     * (as copyImage). DOM only.
+     * @returns {Promise<{via:'clipboard'|'download', filename?:string}>}
+     */
+    async function copyPngBlob(blob, { name = 'diagram' } = {}) {
         const canWrite = typeof ClipboardItem !== 'undefined'
             && typeof navigator !== 'undefined'
             && navigator.clipboard?.write;
@@ -4041,10 +4064,14 @@
     }
 
     /** Save a diagram as an SVG file. DOM only. */
-    function downloadSvg(host, { background = '#ffffff', name = 'diagram' } = {}) {
+    function downloadSvg(host, { background = '#ffffff', name = 'diagram', scale = 1 } = {}) {
         const drawable = findDrawable(host);
         if (!drawable || drawable.tagName.toLowerCase() !== 'svg') throw new Error('No <svg> to export');
-        const markup = serializeSvg(drawable, { background });
+        downloadSvgMarkup(serializeSvg(drawable, { background, scale }), { name });
+    }
+
+    /** Save standalone SVG markup as a file. DOM only. */
+    function downloadSvgMarkup(markup, { name = 'diagram' } = {}) {
         downloadBlob(new Blob([markup], { type: 'image/svg+xml;charset=utf-8' }), imageFileName(name, 'svg'));
     }
 
@@ -9130,6 +9157,22 @@
             return denom > 0 ? 1 / denom : Math.max(hw, hh);
         }
 
+        /** Pure. Where two boxes ({left, top, right, bottom}) face each other
+         *  across a gap with their x ranges (or y ranges) overlapping, the
+         *  shortest line between them runs straight across, at the middle of the
+         *  overlap: `{axis: 'v', at: x, forward}` (a vertical line, `forward` when
+         *  `a` is above `b`) or `{axis: 'h', at: y, forward}` (`a` left of `b`).
+         *  Null when they overlap neither way, or each other. */
+        static acrossOverlap(a, b) {
+            const left = Math.max(a.left, b.left), right = Math.min(a.right, b.right);
+            const top = Math.max(a.top, b.top), bottom = Math.min(a.bottom, b.bottom);
+            const apartV = a.bottom <= b.top || b.bottom <= a.top;
+            const apartH = a.right <= b.left || b.right <= a.left;
+            if (left < right && apartV) return { axis: 'v', at: (left + right) / 2, forward: a.bottom <= b.top };
+            if (top < bottom && apartH) return { axis: 'h', at: (top + bottom) / 2, forward: a.right <= b.left };
+            return null;
+        }
+
         /** Pure. Anchor for one end of an edge. A node that knows its own outline
          *  supplies `info.boundaryPoint(dx, dy) → {x, y}` (DiagramEditor templates
          *  do, rotation included), and the anchor is where the ray toward the other
@@ -9974,8 +10017,12 @@
             choices: [['straight', 'Straight'], ['orthogonal', 'Orthogonal'], ['curved', 'Curved'], ['polyline', 'Around shapes']],
         },
         {
-            key: 'attach', label: 'Attach to', type: 'select', default: 'floating',
-            choices: [['floating', 'Outline, aimed at the other end'], ['sides', 'Middle of the facing side']],
+            key: 'attach', label: 'Attach to', type: 'select', default: 'shortest',
+            choices: [
+                ['shortest', 'Shortest: straight across where the shapes overlap, else aimed at the other end'],
+                ['floating', 'Outline, aimed at the other end'],
+                ['sides', 'Middle of the facing side'],
+            ],
         },
         {
             key: 'lineStyle', label: 'Line', type: 'select', default: 'solid',
@@ -15310,6 +15357,30 @@
             return ticks;
         }
 
+        /**
+         * Ticks over a range that may go below zero: one common "nice" step, from at or below `minVal`
+         * to at or above `maxVal`, always taking in 0 so bars have a baseline. Without a negative it is
+         * `niceTicks(maxVal)`.
+         * @param {number} minVal
+         * @param {number} maxVal
+         * @param {number} [count=4] desired number of intervals
+         * @returns {number[]}
+         */
+        static niceRange(minVal, maxVal, count = 4) {
+            const lo = Math.min(0, minVal || 0);
+            const hi = Math.max(0, maxVal || 0);
+            if (lo === 0) return Axis.niceTicks(hi, count);
+            const raw = (hi - lo) / count;
+            const mag = Math.pow(10, Math.floor(Math.log10(raw)));
+            const frac = raw / mag;
+            const step = frac < 1.5 ? mag : frac < 3.5 ? 2 * mag : frac < 7.5 ? 5 * mag : 10 * mag;
+            const first = Math.floor(lo / step + 1e-9);
+            const last = Math.ceil(hi / step - 1e-9);
+            const ticks = [];
+            for (let i = first; i <= last; i++) ticks.push(parseFloat((i * step).toFixed(10)));
+            return ticks;
+        }
+
         /**
          * How often a category label fits along an axis `width` wide: 1 (every
          * label), 2 (every other), … — so a long series (a minute of samples, a
@@ -15354,19 +15425,37 @@
          * @returns {number} the nice domain max the ticks actually span
          */
         drawYAxis(renderer, box, rawMax) {
-            const ticks = Axis.niceTicks(rawMax);
-            const niceMax = ticks[ticks.length - 1] || 1;
+            return this.drawYRange(renderer, box, 0, rawMax).max;
+        }
+
+        /**
+         * Draw a y-axis over a range that may go below zero (`niceRange`): ticks, labels, gridlines,
+         * and, when the range does go below zero, a zero line across the plot where it crosses.
+         *
+         * @param {*} renderer a renderer implementing .path() and .text()
+         * @param {{x:number, y:number, width:number, height:number}} box plot-area box
+         * @param {number} rawMin the raw data minimum (0 or more: the axis starts at 0)
+         * @param {number} rawMax the raw data maximum
+         * @returns {{min:number, max:number}} the nice domain the ticks actually span
+         */
+        drawYRange(renderer, box, rawMin, rawMax) {
+            const ticks = Axis.niceRange(rawMin, rawMax);
+            const min = ticks[0];
+            const max = ticks.length > 1 ? ticks[ticks.length - 1] : 1;
+            const yOf = (v) => box.y + box.height - ((v - min) / (max - min)) * box.height;
             for (const t of ticks) {
-                const ty = box.y + box.height - (t / niceMax) * box.height;
+                const ty = yOf(t);
                 renderer.path(`M${box.x - 5},${ty} L${box.x},${ty}`, 'none', { color: '#999', width: 1 });
-                if (t > 0) {
+                if (t !== 0) {
                     renderer.path(`M${box.x},${ty} L${box.x + box.width},${ty}`, 'none', { color: '#eee', width: 1 });
+                } else if (min < 0) {
+                    renderer.path(`M${box.x},${ty} L${box.x + box.width},${ty}`, 'none', { color: '#666', width: 1, zeroLine: true });
                 }
                 renderer.text(Axis.formatValue(t), box.x - 10, ty, {
                     textAnchor: 'end', verticalAlign: 'middle', fontSize: '10px', fill: '#666',
                 });
             }
-            return niceMax;
+            return { min, max };
         }
     }
 
@@ -15756,9 +15845,27 @@
             this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
         }
 
-        /** Draw a Y axis and return the nice-rounded max value. */
-        _drawYAxis(rawMax) {
-            return new Axis().drawYAxis(this.renderer, this._plotBox, rawMax);
+        /**
+         * Draw a Y axis and return the nice-rounded max value. With a negative `rawMin` the axis goes
+         * below zero, with a zero line; `_barSpan` then draws each bar from zero, up or down.
+         */
+        _drawYAxis(rawMax, rawMin = 0) {
+            this._domain = new Axis().drawYRange(this.renderer, this._plotBox, rawMin, rawMax);
+            return this._domain.max;
+        }
+
+        /**
+         * Where a bar of `value` goes on the axis `_drawYAxis` drew: from the zero line up to it, or
+         * down to it when negative.
+         * @returns {{top: number, height: number, end: number}} `end` is the bar's far end from zero
+         */
+        _barSpan(value) {
+            const { y, height } = this._plotBox;
+            const { min, max } = this._domain;
+            const yOf = (v) => y + height - ((v - min) / (max - min)) * height;
+            const zero = yOf(0);
+            const end = yOf(value);
+            return { top: Math.min(zero, end), height: Math.abs(end - zero), end };
         }
 
         _render() {
@@ -15801,7 +15908,7 @@
         _computeMaxValue() {
             const data = this.data;
             const rawMax = Math.max(...data.map(d => d.value)) || 1;
-            return this._drawYAxis(rawMax);
+            return this._drawYAxis(rawMax, Math.min(0, ...data.map(d => d.value)));
         }
 
         _beforeBars(maxValue) {
@@ -15823,12 +15930,12 @@
                 }
 
                 const color = colors ? this._palette.colorAt(i) : barColor;
-                const barHeight = (d.value / maxValue) * height;
+                const bar = this._barSpan(d.value);
                 const barX = x + i * (bandWidth + margin);
-                const barY = y + height - barHeight;
 
-                this._datum(this.renderer.rect(barX, barY, bandWidth, barHeight, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
-                this.renderer.text(String(d.value), barX + bandWidth / 2, barY - 5, { textAnchor, fontSize: '10px', fill: '#333' });
+                this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
+                // The value just past the bar's end: above a bar going up, below one going down.
+                this.renderer.text(String(d.value), barX + bandWidth / 2, d.value < 0 ? bar.end + 12 : bar.end - 5, { textAnchor, fontSize: '10px', fill: '#333' });
                 if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
             });
         }
@@ -15910,14 +16017,30 @@
             return top + (1 + shown + more) * TableChart.ROW_H + bottom;
         }
 
-        /** A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. */
-        static cellText(value, nullText = '—') {
+        /**
+         * A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. With a
+         * `format` (`formatFor`'s), a number is written by it instead.
+         */
+        static cellText(value, nullText = '—', format = null) {
             if (value == null) return nullText;
+            if (typeof value === 'number' && format) return String(typeof format === 'function' ? format(value) : format.format(value));
             if (typeof value === 'number') return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(4)));
             if (value instanceof Date) return value.toISOString().slice(0, 10);
             return String(value);
         }
 
+        /**
+         * The number format for one column or measure, from a view's `format` option: a function
+         * (number → text) or an `Intl.NumberFormat` for every number, or an object naming either per
+         * column (`{ Amount: new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }) }`),
+         * where a column it does not name keeps the plain text. Null when there is none.
+         */
+        static formatFor(format, name) {
+            if (!format) return null;
+            if (typeof format === 'function' || format instanceof Intl.NumberFormat) return format;
+            return format[name] ?? null;
+        }
+
         _render() {
             const data = this.data ?? [];
             const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(this.options.title));
@@ -15981,18 +16104,17 @@
      *   Array<{name: string, values: Array<{label: string, value: number}>}>
      *
      * Each category (`label`) gets a cluster of bars side-by-side, one per series. A value a series does
-     * not have (missing, or null) is a gap in its cluster — no bar — never a bar of zero.
+     * not have (missing, or null) is a gap in its cluster — no bar — never a bar of zero. A negative value
+     * is drawn down from a zero line, the axis taking in the smallest value too.
      */
     class GroupedBarChart extends BarChartBase {
         static chartType = 'groupedBar';
 
         _computeMaxValue() {
             const series = this.data;
-            const rawMax = Math.max(
-                ...series.flatMap(s => s.values.map(v => v.value).filter(v => v != null)),
-                1,
-            );
-            return this._drawYAxis(rawMax);
+            const values = series.flatMap(s => s.values.map(v => v.value).filter(v => v != null));
+            const rawMax = Math.max(...values, 1);
+            return this._drawYAxis(rawMax, Math.min(0, ...values));
         }
 
         _renderBars(maxValue) {
@@ -16034,12 +16156,11 @@
                 series.forEach((seriesData, seriesIndex) => {
                     const value = valueBySeriesLabel[seriesIndex].get(label);
                     if (value == null) return;
-                    const barHeight = (value / maxValue) * height;
+                    const bar = this._barSpan(value);
                     const barX = clusterX + seriesIndex * barWidth + barGap / 2;
-                    const barY = y + height - barHeight;
                     const color = this._palette.colorAt(seriesIndex);
 
-                    this._datum(this.renderer.rect(barX, barY, finalBarWidth, barHeight, color, null, {
+                    this._datum(this.renderer.rect(barX, bar.top, finalBarWidth, bar.height, color, null, {
                         tooltip: `${seriesData.name} — ${label}: ${value}`,
                     }), { label, series: seriesData.name });
                 });
@@ -18147,8 +18268,10 @@
          * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
          * @param {ChartChooser} [options.chooser]
          * @param {function} [options.highlight] row → true for a row drawn highlighted (a host's selection)
+         * @param {function|Intl.NumberFormat|object} [options.format] how numbers show, for every column or per
+         *   column (`TableChart.formatFor`). A copy keeps the raw numbers.
          */
-        constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null, highlight = null } = {}) {
+        constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null, highlight = null, format = null } = {}) {
             this.rows = rows;
             this.columns = ChartChooser.describe(rows, columns);
             this.complete = complete;
@@ -18158,6 +18281,7 @@
             this.copy = copy ?? TableView.clipboard;
             this.chooser = chooser ?? new ChartChooser();
             this.highlight = highlight;
+            this.format = format;
             /** The sort keys, most significant first: `{ column, direction: 'asc' | 'desc' }`. */
             this.sorts = [];
             this.filters = [];           // { column, op, value }
@@ -18165,6 +18289,11 @@
             this.page = 0;
         }
 
+        /** A column's value as the table shows it, in the column's `format` when there is one. */
+        valueText(column, value, nullText = '—') {
+            return TableChart.cellText(value, nullText, TableChart.formatFor(this.format, column));
+        }
+
         static clipboard(text) {
             return globalThis.navigator?.clipboard?.writeText(text);
         }
@@ -18502,7 +18631,7 @@
                 columns.forEach((c, i) => {
                     const left = x0 + i * colW;
                     const hit = this.renderer.rect(left, top, colW, ROW_H, 'transparent', null);
-                    const text = this._cell(TableChart.cellText(row[c.key], nullText), c, left, top, colW, { fill: row[c.key] == null ? '#999' : '#222' });
+                    const text = this._cell(view.valueText(c.key, row[c.key], nullText), c, left, top, colW, { fill: row[c.key] == null ? '#999' : '#222' });
                     this._on(interactive, [hit, text], (e) => this.showMenu(e.clientX, e.clientY, view.cellMenu(row, c.key)), null);
                 });
                 top += ROW_H;
@@ -18602,6 +18731,8 @@
          * @param {Array<{measure?, below?, atLeast?, fill, label?}>} [options.trafficLights] the host's rules:
          *   the first whose measure (any, when absent) and range match colours a detail cell
          * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
+         * @param {function|Intl.NumberFormat|object} [options.format] how numbers show, for every measure or per
+         *   measure (`TableChart.formatFor`): cells, totals and the traffic lights' cut-offs. A copy keeps the raw numbers.
          */
         constructor(rows, options = {}) {
             this.onChange = options.onChange ?? null;
@@ -18612,6 +18743,7 @@
             this.members = options.members ?? null;
             this.menus = options.menus ?? {};
             this.copy = options.copy ?? PivotView.clipboard;
+            this.format = options.format ?? null;
             this._listeners = new Set();
             this.lightRules = options.trafficLights ?? null;
             /** Traffic lights showing: null (off), 'rules' (the host's), 'thirds-high' or 'thirds-low' (by thirds, higher or lower is better). */
@@ -19157,18 +19289,24 @@
             return PivotView.LIGHTS[good];
         }
 
+        /** A measure's value as the grid shows it, in the measure's `format` when there is one. */
+        valueText(measure, value, nullText = '—') {
+            return TableChart.cellText(value, nullText, TableChart.formatFor(this.format, measure));
+        }
+
         /** The traffic lights in words, for a line under the grid; null when off. */
         lightsLegend() {
             if (!this.lights) return null;
             const tail = ' (detail cells; totals not coloured)';
             if (this.lights === 'rules') {
                 const said = this.lightRules.map(r => r.label ?? [
-                    r.measure, r.atLeast !== undefined ? '≥ ' + r.atLeast : null, r.below !== undefined ? '< ' + r.below : null,
+                    r.measure, r.atLeast !== undefined ? '≥ ' + this.valueText(r.measure, r.atLeast) : null,
+                    r.below !== undefined ? '< ' + this.valueText(r.measure, r.below) : null,
                 ].filter(Boolean).join(' '));
                 return 'Traffic lights: ' + said.join('; ') + tail;
             }
             const better = this.lights === 'thirds-high' ? 'higher' : 'lower';
-            const cuts = [...this.thirds()].map(([m, [a, b]]) => m + ' ' + TableChart.cellText(a) + ' / ' + TableChart.cellText(b)).join('; ');
+            const cuts = [...this.thirds()].map(([m, [a, b]]) => m + ' ' + this.valueText(m, a) + ' / ' + this.valueText(m, b)).join('; ');
             return 'Traffic lights by thirds, ' + better + ' is better — cut at ' + (cuts || 'no values') + tail;
         }
 
@@ -19386,7 +19524,7 @@
                     const lit = view.cellFill(node, c, cuts);
                     if (lit) this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null);
                     const row = view.cell(node, c.node);
-                    const text = row === null ? '' : TableChart.cellText(row[c.measure], nullText);
+                    const text = row === null ? '' : view.valueText(c.measure, row[c.measure], nullText);
                     const shown = this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight });
                     // A cell with a value opens its menu (drill-through) where the host gives one.
                     if (row !== null && view.cellHasMenu()) {
@@ -29092,6 +29230,86 @@
         }
     }
 
+    /**
+     * DeleteFromModelCommand — elements taken out of the model (Archi's "Delete
+     * from Model"), not just off one view: their relationships go too (and any
+     * relationship ending on one of those), and with them every box and line
+     * drawing them on every view, and every view's own line (a connection) to
+     * one of those boxes. Undo puts everything back as it was, ids and all.
+     *
+     * What goes is ArchimateModel#usage's: say it before asking.
+     */
+    class DeleteFromModelCommand extends Command {
+        /**
+         * @param {ArchimateModel} model
+         * @param {Array<string>} elementIds
+         */
+        constructor(model, elementIds) {
+            const ids = elementIds.filter(id => model.getElement(id));
+            const first = model.getElement(ids[0]);
+            super(ids.length === 1 ? `Delete "${first?.name || ids[0]}" from model` : `Delete ${ids.length} elements from model`);
+            this.model = model;
+            this.elementIds = ids;
+            this._before = null;
+        }
+
+        execute() {
+            const { model } = this;
+            if (!this.elementIds.length) return;
+            this._before = this._snapshot();
+            const { relationships } = model.usage(this.elementIds);
+            const goneElements = new Set(this.elementIds);
+            const goneRelationships = new Set(relationships.map(r => r.id));
+            for (const view of model.views()) {
+                if (Array.isArray(view.elementIds)) view.elementIds = view.elementIds.filter(id => !goneElements.has(id));
+                const goneBoxes = new Set();
+                for (const inst of [...(view.elementInstances?.values() ?? [])]) {
+                    if (goneElements.has(inst.elementId)) { goneBoxes.add(inst.id); view.elementInstances.delete(inst.id); }
+                }
+                for (const inst of [...(view.relationshipInstances?.values() ?? [])]) {
+                    if (goneRelationships.has(inst.relationshipId)) view.relationshipInstances.delete(inst.id);
+                }
+                for (const line of [...(view.viewConnections?.values() ?? [])]) {
+                    if (goneBoxes.has(line.sourceInstanceId) || goneBoxes.has(line.targetInstanceId)) view.viewConnections.delete(line.id);
+                }
+            }
+            for (const id of goneRelationships) model.removeRelationship(id);
+            for (const id of goneElements) model.removeElement(id);
+        }
+
+        undo() {
+            if (!this._before) return;
+            const { model } = this;
+            const b = this._before;
+            model._elements = new Map(b.elements);
+            model._elementFolder = new Map(b.folders);
+            model._relationships = new Map(b.relationships);
+            for (const v of b.views) {
+                v.view.elementIds = v.elementIds;
+                if (v.instances) v.view.elementInstances = new Map(v.instances);
+                if (v.lines) v.view.relationshipInstances = new Map(v.lines);
+                if (v.connections) v.view.viewConnections = new Map(v.connections);
+            }
+        }
+
+        /** Everything the delete changes, to put back (the objects themselves, so ids and state are kept). @private */
+        _snapshot() {
+            const { model } = this;
+            return {
+                elements: [...model._elements],
+                folders: [...model._elementFolder],
+                relationships: [...model._relationships],
+                views: model.views().map(view => ({
+                    view,
+                    elementIds: Array.isArray(view.elementIds) ? [...view.elementIds] : view.elementIds,
+                    instances: view.elementInstances ? [...view.elementInstances] : null,
+                    lines: view.relationshipInstances ? [...view.relationshipInstances] : null,
+                    connections: view.viewConnections ? [...view.viewConnections] : null,
+                })),
+            };
+        }
+    }
+
     /**
      * ConceptsCompared — an ArchimateModel's elements, or its relationships, as
      * two models are compared on them: one's content is all it holds (name, type,
@@ -29831,6 +30049,38 @@
             return new MergeElementsCommand(this, keepId, otherIds, choices);
         }
 
+        /**
+         * Where elements are used, so deleting them from the model can say what goes
+         * with them: the views drawing them (with how many boxes on each), and the
+         * relationships that go too — each one ending on one of them, and each one
+         * ending on such a relationship, and so on.
+         * @param {Array<string>} elementIds
+         * @returns {{views: Array<{view: ArchimateView, boxes: number}>, relationships: Array<Object>}}
+         */
+        usage(elementIds) {
+            const gone = new Set(elementIds);
+            const relationships = [];
+            for (let grew = true; grew;) {
+                grew = false;
+                for (const rel of this.relationships()) {
+                    if (!gone.has(rel.id) && (gone.has(rel.source) || gone.has(rel.target))) {
+                        gone.add(rel.id);
+                        relationships.push(rel);
+                        grew = true;
+                    }
+                }
+            }
+            const views = this.views()
+                .map(view => ({ view, boxes: [...(view.elementInstances?.values() ?? [])].filter(i => elementIds.includes(i.elementId)).length }))
+                .filter(v => v.boxes > 0);
+            return { views, relationships };
+        }
+
+        /** Take elements out of the model, with their relationships and everything drawing them (not yet executed). */
+        deleteFromModelCommand(elementIds) {
+            return new DeleteFromModelCommand(this, elementIds);
+        }
+
         /** Two models are compared on, and merged by, their elements, relationships and views (in the order brought). */
         comparedKinds() {
             return [new ElementsCompared(), new RelationshipsCompared(), new ArchimateViewsCompared()];
@@ -31764,6 +32014,16 @@
             return { x: this.x + ux * t, y: this.y + uy * t };
         }
 
+        /**
+         * Where a line from (px, py), a point inside the shape, heading in
+         * direction (dx, dy) leaves its outline (the shape unrotated).
+         * @returns {{x: number, y: number}}
+         */
+        exitPoint(px, py, dx, dy) {
+            const t = rayExitDistance(this.outline(), px, py, dx, dy);
+            return { x: px + dx * t, y: py + dy * t };
+        }
+
         /** Centre of the name text; the z-index line sits just below it. */
         get labelAnchor() { return { x: this.x, y: this.y - 8 }; }
 
@@ -33763,6 +34023,229 @@
         }
     }
 
+    /** At most this many views or relationships are named; the rest are counted. */
+    const LISTED = 10;
+
+    /**
+     * What deleting elements from the model takes with it, in words, for the
+     * confirmation: the views they are on (and how many boxes), and the
+     * relationships that go too (ArchimateModel#usage).
+     * @param {ArchimateModel} model
+     * @param {Array<string>} elementIds
+     * @returns {string}
+     */
+    function deleteFromModelMessage(model, elementIds) {
+        const elements = elementIds.map(id => model.getElement(id)).filter(Boolean);
+        const name = (el) => `"${el.name || el.id}"`;
+        const { views, relationships } = model.usage(elementIds);
+        const list = (items) => [...items.slice(0, LISTED).map(s => `  • ${s}`), ...(items.length > LISTED ? [`  • and ${items.length - LISTED} more`] : [])];
+        const end = (id) => { const c = model.getElement(id) ?? model.getRelationship(id); return c ? `${c.name || typeTitle(c.type ?? c.kind ?? '') || c.id}` : id; };
+        const lines = [
+            elements.length === 1 ? `${name(elements[0])} (${typeTitle(elements[0].type ?? '')}) goes from the model.` : `These ${elements.length} elements go from the model: ${elements.map(name).join(', ')}.`,
+            '',
+            views.length
+                ? `Used in ${views.length} view${views.length === 1 ? '' : 's'}, where ${elements.length === 1 ? 'its' : 'their'} boxes go:`
+                : 'Used in no view.',
+            ...list(views.map(({ view, boxes }) => `${view.name || view.id}${boxes > 1 ? ` (${boxes} boxes)` : ''}`)),
+            '',
+            relationships.length
+                ? `${relationships.length} relationship${relationships.length === 1 ? '' : 's'} go${relationships.length === 1 ? 'es' : ''} too:`
+                : 'No relationships.',
+            ...list(relationships.map(r => `${end(r.source)} → ${end(r.target)} (${typeTitle(r.kind ?? r.type ?? '') || 'relationship'}${r.name ? `: ${r.name}` : ''})`)),
+            '',
+            'Undo puts them all back.',
+        ];
+        return lines.join('\n');
+    }
+
+    /**
+     * Ask before deleting elements from the model: a dialog saying where they are
+     * used and what goes with them; **Delete from model** runs `onConfirm()`.
+     * @returns {FormDialog|null} null when none of the ids is an element
+     */
+    function askDeleteFromModel(model, elementIds, { onConfirm, document: doc = globalThis.document } = {}) {
+        const ids = elementIds.filter(id => model.getElement(id));
+        if (!ids.length) return null;
+        const dialog = new FormDialog({
+            title: ids.length === 1 ? 'Delete from model' : `Delete ${ids.length} elements from model`,
+            description: deleteFromModelMessage(model, ids),
+            fields: [],
+            submitLabel: 'Delete from model',
+            document: doc,
+            onApply: () => onConfirm(ids),
+        });
+        dialog.open();
+        return dialog;
+    }
+
+    /**
+     * Heat maps an ArchiMate view can be coloured by beyond its elements' own
+     * fields (ArchimateCanvasEditor#colourKeys): what change a deliverable or work
+     * package makes to each element, and a formula over the elements' numeric
+     * properties. Pure: no editor, no DOM.
+     */
+
+    /** The change heat map's colours. */
+    const CHANGE_COLOURS = Object.freeze({ Create: '#FDD835', Update: '#1E88E5', Delete: '#D81B60' });
+
+    /** Element types that make changes: their relationships to an element say what they do to it. */
+    const CHANGE_MAKERS = Object.freeze(['deliverable', 'work-package']);
+
+    /** The words for each change, synonyms included (verbs as base forms; their -s, -ed, -ing forms match too). */
+    const CHANGE_WORDS = Object.freeze({
+        Delete: ['delete', 'remove', 'retire', 'decommission', 'drop', 'sunset', 'terminate', 'eliminate', 'discontinue', 'deprecate', 'withdraw', 'phase out', 'shut down', 'switch off'],
+        Create: ['create', 'add', 'new', 'introduce', 'build', 'built', 'establish', 'implement', 'insert', 'provision', 'set up', 'launch', 'develop', 'onboard'],
+        Update: ['update', 'change', 'modify', 'amend', 'enhance', 'upgrade', 'improve', 'revise', 'extend', 'migrate', 'refactor', 'replace', 'rework', 'adapt', 'alter', 'patch'],
+    });
+
+    /** Which change wins when an element is given more than one: the one with most consequence. */
+    const PRECEDENCE = ['Delete', 'Create', 'Update'];
+
+    const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+    /**
+     * A word and its inflections: retire → retires, retired, retiring; drop →
+     * dropped, dropping; modify → modifies, modified, modifying.
+     */
+    function forms(word) {
+        const [verb, ...rest] = word.split(' ');
+        const tail = rest.length ? `\\s+${rest.map(escape).join('\\s+')}` : '';
+        const stem = verb.endsWith('e') ? verb.slice(0, -1) : verb;
+        const doubled = /[^aeiou][aeiou][bdgmnpt]$/.test(verb) ? `|${escape(verb)}${verb.at(-1)}(?:ed|ing)` : '';
+        const y = /[^aeiou]y$/.test(verb) ? `|${escape(verb.slice(0, -1))}i(?:es|ed)` : '';
+        return `(?:${escape(verb)}(?:s|es|d|ed)?|${escape(stem)}(?:ed|ing|es)${doubled}${y})${tail}`;
+    }
+
+    const PATTERNS = Object.fromEntries(Object.entries(CHANGE_WORDS)
+        .map(([change, words]) => [change, new RegExp(`\\b(?:${words.map(forms).join('|')})\\b`, 'i')]));
+
+    /**
+     * The change a piece of text names ('Create', 'Update' or 'Delete'), or null.
+     * Where it names more than one, the one with most consequence (delete, then
+     * create, then update).
+     */
+    function changeAction(text) {
+        if (!text) return null;
+        return PRECEDENCE.find(change => PATTERNS[change].test(String(text))) ?? null;
+    }
+
+    /**
+     * The change one relationship says a deliverable or work package makes: its
+     * name, or, when it has none, the name of the deliverable or work package at
+     * one of its ends (`toward`: the end that is not the element changed, when
+     * known). Null when neither end makes changes, or nothing is said.
+     * @returns {'Create'|'Update'|'Delete'|null}
+     */
+    function relationshipChange(model, rel, toward = null) {
+        const ends = toward ? [toward] : [rel.source, rel.target];
+        const maker = ends.map(id => model.getElement(id)).find(e => e && CHANGE_MAKERS.includes(e.type));
+        if (!maker) return null;
+        return changeAction((rel.name ?? '').trim() ? rel.name : maker.name);
+    }
+
+    /**
+     * What change the deliverables and work packages related to an element make
+     * to it: for each relationship between them (either way), relationshipChange.
+     * Where they differ, the one with most consequence. Null when none says.
+     * @param {ArchimateModel} model
+     * @param {string} elementId
+     * @returns {'Create'|'Update'|'Delete'|null}
+     */
+    function elementChange(model, elementId) {
+        const found = new Set();
+        for (const rel of model.relationships()) {
+            const other = rel.source === elementId ? rel.target : rel.target === elementId ? rel.source : null;
+            const change = other && relationshipChange(model, rel, other);
+            if (change) found.add(change);
+        }
+        return PRECEDENCE.find(change => found.has(change)) ?? null;
+    }
+
+    /** Whether a model has anything that makes changes (a deliverable or work package). */
+    function hasChangeMakers(model) {
+        return model.elements().some(e => CHANGE_MAKERS.includes(e.type));
+    }
+
+    /**
+     * The names a formula can use for the properties: each property name as an
+     * identifier (anything not a letter, digit or _ becomes _; a leading digit gets
+     * a _ before it), mapped to the property it stands for.
+     * @param {Array<Object>} elements
+     * @returns {Map<string, string>} identifier -> property name
+     */
+    function propertyParams(elements) {
+        const params = new Map();
+        for (const e of elements) {
+            for (const p of e.properties ?? []) {
+                const name = p.name ?? p.key;
+                if (!name) continue;
+                let id = String(name).replace(/[^A-Za-z0-9_]/g, '_');
+                if (/^\d/.test(id)) id = `_${id}`;
+                if (!params.has(id)) params.set(id, name);
+            }
+        }
+        return params;
+    }
+
+    /**
+     * A formula's result for each element (by id): the formula over the
+     * element's numeric properties, by their propertyParams names. An element
+     * missing a property the formula uses, or whose value is not a number, or
+     * whose result is not a finite number, has none.
+     * Throws the formula's own error when it does not parse (an unknown name, say).
+     * @returns {Map<string, number>}
+     */
+    function expressionValues(elements, formula) {
+        const params = propertyParams(elements);
+        const names = [...params.keys()];
+        if (!names.length) throw new Error('No element here has a property to use');
+        const fn = compileFormula(formula, names);
+        const used = names.filter(n => new RegExp(`\\b${n}\\b`).test(formula));
+        const results = new Map();
+        for (const e of elements) {
+            const valueOf = (id) => {
+                const p = (e.properties ?? []).find(q => (q.name ?? q.key) === params.get(id));
+                const n = p === undefined || p.value === null || p.value === '' ? NaN : Number(p.value);
+                return n;
+            };
+            if (used.some(id => !Number.isFinite(valueOf(id)))) continue;
+            const result = fn(...names.map(id => { const v = valueOf(id); return Number.isFinite(v) ? v : 0; }));
+            if (Number.isFinite(result)) results.set(e.id, result);
+        }
+        return results;
+    }
+
+    /** A number as a label: integers as they are, others to at most 3 decimals. */
+    const show = (n) => (Number.isInteger(n) ? String(n) : String(Number(n.toFixed(3))));
+
+    /**
+     * Labels for a formula's results: each distinct result its own, in order,
+     * when there are at most `distinct` of them; else `bands` equal-width bands
+     * from the smallest to the largest ("10 – 20"), the last taking in the largest;
+     * a band no result falls in is left out.
+     * @param {Iterable<number>} numbers
+     * @returns {{labels: string[], labelOf: (n: number) => string}}
+     */
+    function resultBands(numbers, { distinct = 8, bands = 5 } = {}) {
+        const values = [...new Set(numbers)].sort((a, b) => a - b);
+        if (values.length <= distinct) return { labels: values.map(show), labelOf: show };
+        const lo = values[0], hi = values.at(-1), width = (hi - lo) / bands;
+        const all = Array.from({ length: bands }, (_, i) => `${show(lo + i * width)} – ${show(i === bands - 1 ? hi : lo + (i + 1) * width)}`);
+        const labelOf = (n) => all[Math.min(bands - 1, Math.floor((n - lo) / width))];
+        const used = new Set(values.map(labelOf));
+        return { labels: all.filter(l => used.has(l)), labelOf };
+    }
+
+    /** `count` colours from light to dark (a sequential scale, light yellow to dark red), for ordered values. */
+    function sequentialColours(count) {
+        const from = [255, 247, 188], to = [189, 0, 38];
+        const hex = (c) => Math.round(c).toString(16).padStart(2, '0');
+        return Array.from({ length: count }, (_, i) => {
+            const t = count === 1 ? 1 : i / (count - 1);
+            return `#${from.map((f, k) => hex(f + (to[k] - f) * t)).join('')}`;
+        });
+    }
+
     /**
      * ShowElementCommand — put an existing model element on a view (dropped from
      * the model tree), with its relationships to the elements already there, as
@@ -35750,6 +36233,15 @@
      * toolbar container) to itself.
      */
     class DiagramEditor {
+        /** An exported picture's defaults: the whole drawing, at 100%. */
+        static EXPORT_DEFAULTS = Object.freeze({ area: 'drawing', scale: 1 });
+
+        /** Space kept clear round an exported drawing, so nothing touches the picture's edge. */
+        static EXPORT_MARGIN = 20;
+
+        /** How far an arrowhead (or other line-end marker) reaches past its line's end. */
+        static MARKER_REACH = 10;
+
         /** How a selected shape (besides the one with handles) is marked: an outline `pad` outside it, tinted. */
         static SELECTION_OUTLINE = Object.freeze({ pad: 4, stroke: '#0066cc', strokeWidth: 2, dash: '5,3', fill: 'rgba(0, 102, 204, 0.08)' });
 
@@ -35813,6 +36305,10 @@
             /** Off unless asked for (the `showGrid` option, or ⚙ Settings → Grid), as the settings' default says. */
             this.showGrid = options.showGrid ?? false;
             this.gridSize = 20;
+            /** A faint box where an exported picture's edges fall (⚙ Settings → Export area); never exported itself. */
+            this.showExportArea = options.showExportArea ?? false;
+            /** What an exported picture takes in, and at what size (Export image… remembers the last choice). */
+            this.exportOptions = { ...DiagramEditor.EXPORT_DEFAULTS };
 
             // Zoom and pan
             this.zoomLevel = 1.0;
@@ -36120,6 +36616,17 @@
             return [];
         }
 
+        /**
+         * The whole menu a right-click on empty canvas at `at` opens: paste here,
+         * canvasMenuItems, then Export image (imageMenuItems), each set apart.
+         */
+        canvasContextMenu(at) {
+            const paste = this.canClipboardPaste() ? [{ label: '📋 Paste here', action: () => this.paste({ at }) }] : [];
+            const image = this.imageMenuItems();
+            const sections = [paste, this.canvasMenuItems(at), image.length ? [{ label: 'Export image', items: image }] : []].filter(s => s.length);
+            return sections.flatMap((s, i) => (i ? [{ separator: true }, ...s] : s));
+        }
+
         /**
          * The menu for empty canvas at `at` (drawing coordinates); none here, a
          * subclass offers its own (place a template, ...).
@@ -36361,6 +36868,7 @@
 
             // Render edges
             this._renderEdges(group);
+            if (this.showExportArea && container.tagName === 'svg') this._renderExportArea(group);
 
             // The selection's groups and other selected shapes, then the primary shape's handles.
             this._renderArrangement(group);
@@ -36459,9 +36967,13 @@
             ];
         }
 
-        /** Export the current view as a picture: PNG, SVG, or a copy to the clipboard. */
+        /**
+         * Export the current view as a picture: PNG, SVG, or a copy to the clipboard,
+         * as Export image… last chose (the whole drawing at 100% to begin with).
+         */
         imageMenuItems() {
             return [
+                { label: 'Export image…', action: () => this.askExportImage() },
                 { label: 'Export image (PNG)', action: () => this.exportImage('png') },
                 { label: 'Export image (SVG)', action: () => this.exportImage('svg') },
                 { label: 'Copy image', action: () => this.exportImage('copy') },
@@ -36491,17 +37003,113 @@
          * 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.
+         *
+         * `area` 'drawing' (the default) takes in everything drawn, wherever the view
+         * is scrolled to: every shape and line, labels and arrowheads included, with
+         * a margin clear of the edge (drawingBounds). 'view' is what is in sight.
+         * `scale` sizes the picture: 1 is 100%.
          * @param {'png'|'svg'|'copy'} format
+         * @param {{area?: 'drawing'|'view', scale?: number}} [options] - Export image…'s last choice by default
          */
-        exportImage(format = 'png') {
+        exportImage(format = 'png', { area = this.exportOptions.area, scale = this.exportOptions.scale } = {}) {
             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 });
+            if (area === 'view' || host.tagName?.toLowerCase() !== 'svg') {
+                return this._withPlainDrawing(() => {
+                    if (format === 'svg') return downloadSvg(host, { name, scale });
+                    if (format === 'copy') return copyImage(host, { name, scale });
+                    return downloadPng(host, { name, scale });
+                });
+            }
+            const viewBox = this.drawingBounds();
+            if (!viewBox) return null;
+            const svg = this._withPlainDrawing(() => this._croppedSvg(host, viewBox, { scale }));
+            if (format === 'svg') return downloadSvgMarkup(svg, { name });
+            const png = svgMarkupToPngBlob(svg, { width: viewBox.width, height: viewBox.height, scale });
+            if (format === 'copy') return png.then(blob => copyPngBlob(blob, { name }));
+            return png.then(blob => downloadBlob(blob, imageFileName(name, 'png')));
+        }
+
+        /** Ask what to export: the format, the whole drawing or what is in sight, and the scale (%). */
+        askExportImage() {
+            const { area, scale } = this.exportOptions;
+            new FormDialog({
+                title: 'Export image',
+                description: 'The whole drawing takes in every shape and line, with a margin; the view, only what is in sight.',
+                fields: [
+                    { key: 'format', label: 'Format', type: 'select', value: 'png', choices: [['png', 'PNG'], ['svg', 'SVG'], ['copy', 'Copy to the clipboard (PNG)']] },
+                    { key: 'area', label: 'Take in', type: 'select', value: area, choices: [['drawing', 'The whole drawing'], ['view', 'What is in sight']] },
+                    { key: 'scale', label: 'Scale (%)', type: 'number', value: Math.round(scale * 100), min: 10, max: 800, step: 10 },
+                ],
+                submitLabel: 'Export',
+                document: this.document ?? globalThis.document,
+                onApply: (values) => this.exportImage(values.format, this.setExportOptions(values)),
+            }).open();
+        }
+
+        /**
+         * Remember an export's area and scale (the scale in %), for the next one.
+         * A scale that is not a positive number keeps the last. Returns the options.
+         */
+        setExportOptions({ area, scale } = {}) {
+            if (area === 'drawing' || area === 'view') this.exportOptions.area = area;
+            const pct = Number(scale);
+            if (Number.isFinite(pct) && pct > 0) this.exportOptions.scale = pct / 100;
+            return { ...this.exportOptions };
+        }
+
+        /**
+         * Where an exported picture of the whole drawing ends (in drawing units):
+         * every shape and line shown, with line labels and arrowheads, and
+         * `margin` clear all round, so nothing touches the picture's edge. Null
+         * when nothing is drawn.
+         * @returns {{x, y, width, height}|null}
+         */
+        drawingBounds({ margin = DiagramEditor.EXPORT_MARGIN } = {}) {
+            const boxes = [...this.templates.values()]
+                .filter(t => t.visible !== false && this.templateEmphasis(t) !== 'hidden')
+                .map(t => ({ left: t.left, top: t.top, right: t.right, bottom: t.bottom }));
+            const cascade = this.edgeStyleCascade();
+            for (const edge of this.getAllEdges()) {
+                if (!edge.visible || this.edgeEmphasis(edge) === 'hidden') continue;
+                const { style } = cascade.resolve(edge);
+                const path = this._edgePath(edge, style);
+                if (!path) continue;
+                // Every point the path names (a curve's control points bound it); half the stroke and an arrowhead past them.
+                const numbers = path.d.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi)?.map(Number) ?? [];
+                const reach = (Number(style.strokeWidth) || 1) / 2 + DiagramEditor.MARKER_REACH;
+                for (let i = 0; i + 1 < numbers.length; i += 2) {
+                    boxes.push({ left: numbers[i] - reach, top: numbers[i + 1] - reach, right: numbers[i] + reach, bottom: numbers[i + 1] + reach });
+                }
+                if (edge.label) {
+                    // As _renderEdges writes it: centred over the middle, 12px text (about 7px a character).
+                    const cx = (path.x1 + path.x2) / 2, base = (path.y1 + path.y2) / 2 - 8;
+                    const half = String(edge.label).length * 7 / 2;
+                    boxes.push({ left: cx - half, top: base - 12, right: cx + half, bottom: base + 4 });
+                }
+            }
+            const bounds = ViewFit.union(boxes);
+            if (!bounds) return null;
+            return { x: bounds.x - margin, y: bounds.y - margin, width: bounds.width + 2 * margin, height: bounds.height + 2 * margin };
+        }
+
+        /** The faint box where an exported picture of the whole drawing ends (drawingBounds). @protected */
+        _renderExportArea(group) {
+            const area = this.drawingBounds();
+            if (!area) return;
+            const rect = this._svg('rect', {
+                id: 'export-area', x: area.x, y: area.y, width: area.width, height: area.height,
+                fill: 'rgba(43, 95, 217, 0.03)', stroke: 'rgba(43, 95, 217, 0.25)', 'stroke-dasharray': '6 4', 'stroke-width': 1,
+                'pointer-events': 'none',
             });
+            group.insertBefore(rect, group.firstChild);
+        }
+
+        /** Show or hide the export area. */
+        setShowExportArea(shown) {
+            this.showExportArea = !!shown;
+            this.render();
         }
 
         /**
@@ -36510,8 +37118,8 @@
          * @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 });
+            const saved = { showGrid: this.showGrid, showExportArea: this.showExportArea, selectedTemplateId: this.selectedTemplateId, selectedIds: new Set(this.selectedIds), selectedEdgeId: this.selectedEdgeId };
+            Object.assign(this, { showGrid: false, showExportArea: false, selectedTemplateId: null, selectedIds: new Set(), selectedEdgeId: null });
             this.render();
             try {
                 return fn();
@@ -36534,13 +37142,7 @@
             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 svg = this._croppedSvg(host, viewBox, { background });
                 const areas = [...this.templates.values()]
                     .filter(t => t.visible !== false && this.templateEmphasis(t) !== 'hidden')
                     .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0))
@@ -36556,6 +37158,22 @@
         }
 
         /** The drawing's extent in drawing coordinates (ViewFit.union of the visible shapes), or null. */
+        /**
+         * The drawing as standalone SVG markup cut to `viewBox` (drawing units),
+         * unpanned and unzoomed, sized at `scale`. Call it inside _withPlainDrawing.
+         * @protected
+         */
+        _croppedSvg(host, viewBox, { background = '#ffffff', scale = 1 } = {}) {
+            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 markup = new (this.document?.defaultView ?? globalThis).XMLSerializer().serializeToString(copy);
+            return prepareSvgMarkup(markup, { width: viewBox.width * scale, height: viewBox.height * scale, background });
+        }
+
         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 })));
@@ -36659,6 +37277,7 @@
             return [
                 { label: `Grid: ${this.showGrid ? 'on' : 'off'}`, action: () => { this.showGrid = !this.showGrid; this.render(); } },
                 { label: `Grid size: ${this.gridSize}px…`, action: () => this.editGridSize() },
+                { label: `Export area: ${this.showExportArea ? 'shown' : 'hidden'}`, action: () => this.setShowExportArea(!this.showExportArea) },
                 ...(this.edgeStyleLevels.length ? [{ separator: true }] : []),
                 ...this.edgeStyleLevels.map(level => ({
                     label: `Line style: ${level.label} defaults…`,
@@ -37019,13 +37638,17 @@
         /**
          * 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'
+         * of the side facing the other end (or the nearest waypoint); 'shortest' (the
+         * default, as Archi draws) runs a straight line straight across where the
+         * shapes overlap, else aims at the other end ('floating'); '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 across = style.attach === 'shortest' ? this._acrossPath(edge, source, target, style) : null;
+            if (across) return across;
             const box = (t) => ({ w: t.width, h: t.height });
             let sourceSide = edge.sourceSide || 'auto';
             let targetSide = edge.targetSide || 'auto';
@@ -37045,6 +37668,25 @@
             );
         }
 
+        /**
+         * The shortest straight line between two shapes that face each other across
+         * a gap (EdgeGeometry.acrossOverlap): straight across the middle of their
+         * overlap, from outline to outline. Null where that does not apply: a line
+         * with bends, a pinned end, other routing, a rotated shape, or no overlap.
+         * @protected
+         */
+        _acrossPath(edge, source, target, style) {
+            if (edge.waypoints.length || (edge.sourceSide || 'auto') !== 'auto' || (edge.targetSide || 'auto') !== 'auto') return null;
+            if ((style.routing ?? 'straight') !== 'straight' || source.rotation || target.rotation) return null;
+            const across = EdgeGeometry.acrossOverlap(source, target);
+            if (!across) return null;
+            const step = across.forward ? 1 : -1;
+            const [a, b] = across.axis === 'v'
+                ? [source.exitPoint(across.at, source.y, 0, step), target.exitPoint(across.at, target.y, 0, -step)]
+                : [source.exitPoint(source.x, across.at, step, 0), target.exitPoint(target.x, across.at, -step, 0)];
+            return { x1: a.x, y1: a.y, x2: b.x, y2: b.y, d: `M${a.x},${a.y} L${b.x},${b.y}` };
+        }
+
         /** 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 }];
@@ -37537,12 +38179,9 @@
                 e.preventDefault();
                 this._startMarquee(e, container);
             });
-            // Empty canvas: what canvasMenuItems offers there (a shape's own menu stops the event first).
+            // Empty canvas: canvasContextMenu 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];
+                const items = this.canvasContextMenu(this._clientToDiagram(e.clientX, e.clientY));
                 if (!items.length) return;
                 e.preventDefault();
                 this._showMenu(e.clientX, e.clientY, items);
@@ -37997,11 +38636,27 @@
             return [['kind', 'Kind of shape']];
         }
 
+        /** What a colour key is called (colourKeys' label; a key not listed there, itself). */
+        colourKeyLabel(key) {
+            return this.colourKeys().find(([k]) => k === key)?.[1] ?? key;
+        }
+
+        /** The colours offered for a key's values, in order: the palette's, round again when there are more. */
+        colourDefaults(key, values) {
+            const palette = this.constructor.COLOUR_PALETTE;
+            return values.map((_, i) => palette[i % palette.length]);
+        }
+
         /** 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;
         }
 
+        /** A line's value for a colourKeys key (undefined: lines are not coloured by it, as here; a subclass's may be). */
+        colourEdgeValue(edge, key) {
+            return 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();
@@ -38017,19 +38672,26 @@
 
         /**
          * 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
+         * shapes filled with its colour, and lines with a value of their own
+         * (colourEdgeValue) drawn in it (`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 label = this.colourKeyLabel(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'));
             }
+            // Lines with a value of their own take its colour too (colourEdgeValue).
+            for (const edge of this.getAllEdges()) {
+                if (edge.editable === false) continue;
+                const strokeColor = colours[this.colourEdgeValue(edge, key)];
+                if (strokeColor && edge.strokeColor !== strokeColor) steps.push(new SetStyleCommand(edge, { strokeColor }, '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);
@@ -38055,13 +38717,13 @@
         /** 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;
+            const defaults = this.colourDefaults(key, values);
+            const label = this.colourKeyLabel(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] })),
+                    ...values.map((value, i) => ({ key: `value-${i}`, label: value, type: 'color', value: defaults[i] })),
                     { key: 'legend', label: 'Add a legend', type: 'checkbox', value: true },
                 ],
                 submitLabel: 'Colour',
@@ -38101,19 +38763,45 @@
         }
 
         /**
-         * 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.
+         * Where a legend's boxes go, its top-left at `{x, y}`: a frame titled at its
+         * top-left that holds every entry, the entries in rows of up to
+         * `perRow` inside it. Centres and sizes, as boxes are placed.
+         * @returns {{frame: {x, y, width, height}, items: Array<{x, y, width, height}>}}
+         */
+        static legendLayout(count, { x, y }, { perRow = 4, itemWidth = 120, itemHeight = 40, gap = 10, pad = 10, titleHeight = 24 } = {}) {
+            const columns = Math.max(1, Math.min(count, perRow));
+            const rows = Math.max(1, Math.ceil(count / columns));
+            const width = 2 * pad + columns * itemWidth + (columns - 1) * gap;
+            const height = titleHeight + rows * itemHeight + (rows - 1) * gap + pad;
+            const items = Array.from({ length: count }, (_, i) => ({
+                x: x + pad + (i % columns) * (itemWidth + gap) + itemWidth / 2,
+                y: y + titleHeight + Math.floor(i / columns) * (itemHeight + gap) + itemHeight / 2,
+                width: itemWidth, height: itemHeight,
+            }));
+            return { frame: { x: x + width / 2, y: y + height / 2, width, height }, items };
+        }
+
+        /** The legend frame's text: its title, bold at the top-left (as Archi's legends are). */
+        static LEGEND_TITLE_STYLE = Object.freeze({ textAlign: 'left', textPosition: 'top', fontWeight: 'bold' });
+
+        /**
+         * The command that adds a legend under the drawing (legendPosition): a
+         * frame titled `title` with a box per entry inside it, grouped so they move
+         * as one. 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 { frame, items } = DiagramEditor.legendLayout(entries.length, 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)));
+            const note = (i, name, box, more) => new NoteTemplate(`legend-${stamp}-${i}`, name, { ...box, ...more });
+            const boxes = [note(0, title, frame, { fillColor: '#ffffff', ...DiagramEditor.LEGEND_TITLE_STYLE }), ...entries.map((e, i) => note(i + 1, e.label, items[i], { fillColor: e.fillColor }))];
+            return new CompositeCommand(`Add legend: ${title}`, [
+                ...boxes.map(t => new CreateTemplateCommand(this, t)),
+                new GroupCommand(this.arrangement, boxes.map(t => t.id), { name: title }),
+            ]);
         }
 
         // ===== Format painter =====
@@ -39957,974 +40645,1066 @@
         }).open();
     }
 
-    /**
-     * Which allowed relationship kind a new connection takes when nobody is asked:
-     * the dependency and dynamic kinds people usually mean first, the structural
-     * whole/part kinds last.
-     */
-    const KIND_PREFERENCE = Object.freeze([
-        'assignment', 'realization', 'serving', 'access', 'influence', 'triggering', 'flow',
-        'specialization', 'aggregation', 'composition', 'association',
-    ]);
-
-    /**
-     * ArchimateCanvasEditor — the diagram editor's canvas over one ArchiMate
-     * view: its element instances as ArchimateElementTemplates, its relationship
-     * instances as ArchimateEdges, and its own undo history. Everything the base
-     * editor does (move, resize, restack, bend points, sides, styles, zoom,
-     * snapping) edits the view directly; the editor's maps are rebuilt from the
-     * view on every render, so undo of a view edit shows straight away.
-     *
-     * What stands for something else in ArchiMate is done through the view and
-     * model instead of the maps:
-     * - dropping a palette type adds a new model element and shows it;
-     * - connecting two elements adds a relationship, its kind the first the
-     *   ArchiMate rules allow between them (association if none);
-     * - deleting removes from the view (with the element's lines); the model
-     *   keeps its elements and relationships.
-     * Each is one step on the view's history.
-     */
-    class ArchimateCanvasEditor extends DiagramEditor {
-        /**
-         * @param {Object} options - DiagramEditor options, plus:
-         * @param {ArchimateView} options.view
-         * @param {ArchimateModel} options.model
-         * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options (archimateVersion, useDistinctShapes, ...),
-         *   and the viewpoint: `viewpoint` (a name; 'All' or none for every type), `viewpointMode` ('fade' or 'hide')
-         * @param {(kinds: string[], from: Object, to: Object) => Promise<string|null>|string|null} [options.chooseKind]
-         *   Asks which relationship kind a new connection is, given the kinds allowed between the two
-         *   elements (null cancels). Without it the first of KIND_PREFERENCE that is allowed is used.
-         * @param {(nodeOptions: Object) => void} [options.onNodeOptionsChange] - The ⚙ Settings menu changed
-         *   the version or distinct shapes (the host may need to redraw more than the canvas, e.g. a palette)
-         * @param {(element: Object) => ({text: string, color?: string}|null)} [options.elementStatus] - A host's
-         *   live status for an element (a component's lifecycle state), drawn on its boxes
-         * @param {(element: Object) => Array<Object>} [options.elementMenuExtras] - A host's menu items for an
-         *   element (its transitions), at the end of a box's right-click menu
-         */
-        constructor({ view, model, nodeOptions = {}, chooseKind = null, onNodeOptionsChange = null, templateMenu = null, customViewpoints = [], settingsManager = null, elementStatus = null, elementMenuExtras = null, ...options }) {
-            super({ ...options, templates: new Map(), edges: new Map(), history: view.history, arrangement: view.arrangement });
-            this.view = view;
-            this.model = model;
-            this.nodeOptions = nodeOptions;
-            this.chooseKind = chooseKind;
-            this.onNodeOptionsChange = onNodeOptionsChange;
-            /** Viewpoints of the user's own, offered with the standard ones. */
-            this.customViewpoints = customViewpoints;
-            /** The settings the ⚙ Settings menu's Model settings… edits (a SettingsManager), if any. */
-            this.settingsManager = settingsManager;
-            /** Canvas templates (a CanvasTemplateMenu): placed on the canvas, saved from its shapes. */
-            this.templateMenu = templateMenu;
-            /** A host's live status per element, drawn on its boxes, and its menu items per element. */
-            this.elementStatus = elementStatus;
-            this.elementMenuExtras = elementMenuExtras;
-            this.addDropHandler({
-                accepts: (dt) => Array.from(dt.types).includes(ARCHIMATE_TYPE_MIME),
-                drop: (dt, point) => this.addElement(dt.getData(ARCHIMATE_TYPE_MIME), point),
-            });
-            // An element from the model tree: shown here, with its relationships to what is already shown.
-            this.addDropHandler({
-                accepts: (dt) => Array.from(dt.types).includes(MODEL_ELEMENT_MIME),
-                drop: (dt, point) => this.showElement(dt.getData(MODEL_ELEMENT_MIME), point),
-            });
-            // A picture file dropped (or pasted): an image box where it fell (pasted: in the middle).
-            if (typeof document !== 'undefined') this.enableImageDrop((dataURL, point) => this.addImage(dataURL, point));
-            // A canvas palette tile: the box, where it was dropped (an image asks for its picture).
-            this.addDropHandler({
-                accepts: (dt) => Array.from(dt.types).includes(CANVAS_BOX_MIME),
-                drop: (dt, point) => this.addCanvasBox(dt.getData(CANVAS_BOX_MIME), point),
-            });
-        }
-
-        get version() {
-            return this.nodeOptions.archimateVersion ?? '4';
-        }
-
-        /**
-         * An element's own items (a view of it and what it relates to; its
-         * relationships to what is shown, when some are not), a canvas box's hint,
-         * and the shape's selection (or the shape and its group) as a template.
-         */
-        shapeMenuExtras(elementId) {
-            const ids = this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId];
-            const items = this.templateMenu?.saveAsTemplateItems(this.view.id, { itemIds: [...this.arrangement.movers(ids)] }) ?? [];
-            const element = this._elementOf(elementId);
-            const missing = element ? this.missingRelationshipsOf(elementId) : [];
-            // Two or more elements chosen: merge them into one (choose the one kept).
-            const merging = this.elementIdsOf(ids);
-            return [
-                ...(merging.length > 1 ? [{ label: `Merge ${merging.length} elements…`, action: () => this.askMerge(merging) }] : []),
-                ...(element ? [{ label: 'Generate View For This', action: () => this.model.generateView([element.id]) }] : []),
-                ...(missing.length ? [{ label: `Add Missing Relationships (${missing.length})`, action: () => this.addMissingRelationships(elementId) }] : []),
-                ...hintMenuItems(this.view, elementId, { onChange: () => this.render() }),
-                ...(items.length ? [{ label: 'Save as template', items }] : []),
-                ...(element && this.elementMenuExtras ? this.elementMenuExtras(element) ?? [] : []),
-            ];
-        }
-
-        /** The model's relationships between this box's element and what is shown that the view does not draw from this box. */
-        missingRelationshipsOf(instanceId) {
-            const instance = this.view.getElementInstance(instanceId);
-            if (!instance) return [];
-            return this.view.missingRelationshipInstances(instance.elementId)
-                .filter(line => line.sourceInstanceId === instanceId || line.targetInstanceId === instanceId);
-        }
-
-        /** Draw them all, as one undo step. */
-        addMissingRelationships(instanceId) {
-            const missing = this.missingRelationshipsOf(instanceId);
-            if (!missing.length) return null;
-            const cmd = new CompositeCommand(`Add ${missing.length} relationship${missing.length === 1 ? '' : 's'}`,
-                missing.map(line => new AddRelationshipToViewCommand(this.view, line)));
-            this._executeCommand(cmd);
-            return cmd;
-        }
-
-        /** The view's boxes (a canvas's palette; a note or picture elsewhere) at the point clicked, and on a canvas a template placed there. */
-        canvasMenuItems(at) {
-            const boxes = canvasBoxMenuItems(this.view, at, { onAdded: (box) => { this.render(); this.selectTemplate(box.id); } });
-            const items = this.templateMenu?.placeTemplateItems(this.view.id, at) ?? [];
-            // Elements from text: not on a canvas, whose boxes are not elements.
-            const fromText = this.view.constructor.kind === 'canvas' ? [] : super.canvasMenuItems(at);
-            return [...boxes, ...fromText, ...(items.length ? [{ label: 'Place template', items }] : []), ...hintMenuItems(this.view, null, { onChange: () => this.render() })];
-        }
-
-        /** The View menu, and Generate roadmap… (elements with dates on a time line). */
-        viewMenuItems() {
-            const repeated = this.view?.repeatedBoxes?.() ?? [];
-            return [
-                ...super.viewMenuItems(),
-                { label: `Remove repeated boxes${repeated.length ? ` (${repeated.length})` : ''}`, disabled: !repeated.length || undefined, action: () => this.removeRepeatedBoxes() },
-                { label: 'Generate roadmap…', action: () => this.askRoadmap() },
-            ];
-        }
-
-        /** The model's own: Find likely duplicates…. */
-        modelMenuItems() {
-            return [...super.modelMenuItems(), { label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
-        }
-
-        /**
-         * Take off this view the boxes that only repeat another box of their
-         * element (ArchimateView#repeatedBoxes: same label, same lines), with
-         * their lines, as one undo step. Returns the command, or null with none.
-         */
-        removeRepeatedBoxes() {
-            const ids = this.view.repeatedBoxes();
-            if (!ids.length) return null;
-            const cmd = this.deleteTemplatesCommand(ids);
-            cmd.label = `Remove ${ids.length} repeated box${ids.length === 1 ? '' : 'es'}`;
-            this._executeCommand(cmd);
-            return cmd;
-        }
-
-        /**
-         * Where Find likely duplicates… can look: the whole model, the elements on
-         * the view in front, the elements selected (two or more). [key, label, element ids or null].
-         */
-        duplicateScopes() {
-            const onView = this.elementIdsOf([...(this.view?.elementInstances?.keys() ?? [])]);
-            const selected = this.elementIdsOf(this.getSelectedIds());
-            return [
-                ['model', 'The whole model', null],
-                ...(onView.length > 1 ? [['view', `This view (${this.view.name || this.view.id})`, onView]] : []),
-                ...(selected.length > 1 ? [['selection', `The ${selected.length} elements selected`, selected]] : []),
-            ];
-        }
-
-        /**
-         * Find likely duplicates…: where to look (duplicateScopes), how to compare
-         * (names, documentation or a property's value; exactly or by their words)
-         * and what noise to leave out (duplicateSearchFields), then the groups
-         * found, each with Merge… (showDuplicates).
-         */
-        askDuplicates() {
-            const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
-            const specializations = [...new Set(this.model.elements().map(e => e.specialization).filter(Boolean))].sort();
-            const scopes = this.duplicateScopes();
-            return new FormDialog({
-                title: 'Find likely duplicates',
-                description: 'Elements are compared by their words: case, punctuation, word order and the noise words do not count.',
-                fields: duplicateSearchFields({ scope: { label: 'Look in', choices: scopes.map(([key, label]) => [key, label]) }, properties: names, specializations }),
-                submitLabel: 'Find',
-                idPrefix: 'duplicates-',
-                document: this.document ?? globalThis.document,
-                validate: validateDuplicateSearch,
-                onApply: (values) => {
-                    const { options, scope } = duplicateSearchOptions(values);
-                    this.showDuplicates(options, { within: scopes.find(([key]) => key === scope)?.[2] ?? null });
-                },
-            }).open();
-        }
-
-        /**
-         * The elements that look like one thing twice (the model check's likely
-         * duplicates, compared as `options` say: DUPLICATE_OPTIONS; `within`: only
-         * among these element ids), each group with Merge….
-         */
-        showDuplicates(options = {}, { within = null } = {}) {
-            const find = () => this.model.checker(this.checkerOptions()).possibleDuplicates(options, { within });
-            const groups = find();
-            new DuplicatesDialog({
-                groups,
-                refind: find,
-                merge: async (group) => !!(await this.askMerge(group.ids)),
-                onReveal: (group) => this.revealFinding(group),
-                empty: 'No elements look like the same thing twice.',
-                document: this.document ?? globalThis.document,
-            }).open();
-            return groups;
-        }
-
-        /** The model elements of some boxes, each once (a box that is not an element is left out). */
-        elementIdsOf(instanceIds) {
-            return [...new Set(instanceIds.map(id => this._elementOf(id)?.id).filter(Boolean))];
-        }
-
-        /**
-         * Generate roadmap…: which elements (the selection's, or every element in
-         * the model with both dates), the properties their dates are in, and how
-         * months are named; the roadmap view comes to the front (ArchimateModel#generateRoadmap).
-         */
-        askRoadmap() {
-            const selected = this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean);
-            const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
-            return new FormDialog({
-                title: 'Generate roadmap',
-                description: 'A view with each element a bar from its start date to its end date, under the months.',
-                fields: [
-                    { key: 'from', label: 'Elements', type: 'select', value: selected.length ? 'selection' : 'model', choices: [...(selected.length ? [['selection', `The ${selected.length} selected`]] : []), ['model', 'Every element with both dates']] },
-                    { key: 'start', label: 'Start date property', type: 'text', value: 'Start Date', suggestions: names },
-                    { key: 'end', label: 'End date property', type: 'text', value: 'End Date', suggestions: names },
-                    { key: 'months', label: 'Month names', type: 'select', value: 'short', choices: [['short', 'Short (Jan)'], ['full', 'Full (January)']] },
-                    { key: 'name', label: 'View name', type: 'text', value: 'Roadmap' },
-                ],
-                submitLabel: 'Generate',
-                idPrefix: 'roadmap-',
-                document: this.document ?? globalThis.document,
-                validate: (v) => (this.roadmapFor(v).view === null ? `No element has both "${v.start}" and "${v.end}" as dates` : null),
-                onApply: (v) => this.generateRoadmap(v),
-            }).open();
-        }
-
-        /** What a roadmap of these dialog values would hold: `{view: null}` when nothing would be on it (a dry run). @private */
-        roadmapFor({ from, start, end }) {
-            const ids = from === 'selection' ? this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean) : this.model.elements().map(e => e.id);
-            const date = (e, key) => parseDate((e.properties ?? []).find(p => (p.name ?? p.key) === key)?.value);
-            const any = ids.map(id => this.model.getElement(id)).some(e => e && date(e, start) && date(e, end) && date(e, end) >= date(e, start));
-            return { ids, view: any ? true : null };
-        }
-
-        /** Generate the roadmap of Generate roadmap…'s values. @returns {{view, skipped}} */
-        generateRoadmap({ from = 'model', start = 'Start Date', end = 'End Date', months = 'short', name = 'Roadmap' } = {}) {
-            const { ids } = this.roadmapFor({ from, start, end });
-            return this.model.generateRoadmap(ids, { startProperty: start, endProperty: end, monthNames: months, name });
-        }
-
-        /** An element's box keeps room for its type badge, and Archi's height. */
-        textFit(template) {
-            return this._elementOf(template.id) ? { padding: 44, min: { width: 80, height: 55 } } : super.textFit(template);
-        }
-
-        /** Text becomes elements of any type of this version (the viewpoint's, when it limits them). */
-        shapeTypes() {
-            const viewpoint = this.nodeOptions.viewpoint;
-            const allowed = viewpoint && viewpoint !== 'All' ? ArchimateViewpoints.allowedElementTypes(viewpoint, this.version, this.customViewpoints) : null;
-            return ArchimateNotation.elementTypeNames(this.version)
-                .filter(t => !allowed || allowed.includes(t))
-                .map(t => [t, typeTitle(t)]);
-        }
-
-        /**
-         * New model elements from text, each with its box here: one undo step.
-         * A documentation column becomes the element's documentation.
-         */
-        createShapesCommand(items) {
-            const ids = this.model.elements().map(e => e.id);
-            const steps = [], createdIds = [];
-            for (const item of items) {
-                const id = GraphDiagram.generateNodeId(`${item.type}-${item.name}`, ids);
-                ids.push(id);
-                const instance = new ElementInstance(id, item.x, item.y);
-                createdIds.push(instance.id);
-                steps.push(new AddToViewCommand(this.view, instance, { element: { id, name: item.name, type: item.type, ...(item.documentation && { documentation: item.documentation }) } }));
-            }
-            const cmd = new CompositeCommand(`Add ${steps.length} element${steps.length === 1 ? '' : 's'} from text`, steps);
-            cmd.createdIds = createdIds;
-            return cmd;
-        }
-
-        /** What elements can be coloured by: their layer, type, specialization, and each property any of them has. */
-        colourKeys(templates = [...this.templates.values()]) {
-            const properties = new Set();
-            for (const t of templates) for (const p of this._elementOf(t.id)?.properties ?? []) if (p.name ?? p.key) properties.add(p.name ?? p.key);
-            return [
-                ['layer', 'Layer'], ['type', 'Type'], ['specialization', 'Specialization'],
-                ...[...properties].sort().map(name => [`property:${name}`, `Property "${name}"`]),
-            ];
-        }
-
-        /** An element's value for a colourKeys key (notes and pictures have none). */
-        colourValue(template, key) {
-            const element = this._elementOf(template.id);
-            if (!element) return undefined;
-            if (key === 'layer') return typeTitle(treeLayerOf(element));
-            if (key === 'type') return typeTitle(element.type ?? '');
-            if (key === 'specialization') return element.specialization;
-            if (key.startsWith('property:')) {
-                const p = (element.properties ?? []).find(q => (q.name ?? q.key) === key.slice(9));
-                return p?.value === undefined || p?.value === null ? undefined : String(p.value);
-            }
-            return super.colourValue(template, key);
-        }
-
-        /** The kind legend: each element type on the view, in the colour of its first box. */
-        kindLegendEntries() {
-            const types = new Map();
-            for (const t of this.templates.values()) {
-                const element = this._elementOf(t.id);
-                if (!element || types.has(element.type)) continue;
-                types.set(element.type, t.fillColor);
-            }
-            return [...types].map(([type, fillColor]) => ({ label: typeTitle(type), fillColor }));
-        }
-
-        /** A legend is notes (stickies on a canvas) on the view: one PlaceItemsCommand. */
-        legendCommand(entries, title) {
-            if (!entries.length) return null;
-            const kind = this.view.constructor.BOX_KINDS.find(k => k.key === 'note') ?? this.view.constructor.BOX_KINDS.find(k => k.key === 'sticky');
-            if (!kind) return null;
-            const { x, y } = this.legendPosition();
-            const stamp = Date.now().toString(36);
-            const box = (i, name, fillColor) => {
-                const inst = new ViewObjectInstance(kind.content(`legend-${stamp}-${i}`, { name }), x + 60 + i * 130, y + 20);
-                inst.size = { width: 120, height: 40 };
-                inst.appearance = { ...kind.appearance, fillColor };
-                return inst;
-            };
-            const boxes = [box(0, title, '#ffffff'), ...entries.map((e, i) => box(i + 1, e.label, e.fillColor))];
-            return new PlaceItemsCommand(this.view, { elementInstances: boxes }, { label: `Add legend: ${title}` });
-        }
-
-        /** Likely duplicates can be merged (Merge…: choose the one to keep). */
-        findingActions(finding) {
-            return finding.code === 'possible-duplicate' ? [{ label: 'Merge…', action: () => this.askMerge(finding.ids) }] : [];
-        }
-
-        /**
-         * What differs among some elements, for the merge to choose: their
-         * documentation (when two or more have some, and it differs), each property
-         * with different values, and the specialization.
-         * @returns {{documentation: Array<[string, string]>, properties: Map<string, Array<[string, string]>>, specializations: string[]}}
-         *   each choice [value, label]
-         */
-        mergeChoices(elements) {
-            const name = (e) => e.name || e.id;
-            const documented = elements.filter(e => (e.documentation ?? '').trim());
-            const texts = [...new Set(documented.map(e => e.documentation.trim()))];
-            const properties = new Map();
-            for (const e of elements) {
-                for (const p of e.properties ?? []) {
-                    const key = p.name ?? p.key;
-                    if (!properties.has(key)) properties.set(key, new Map());
-                    const values = properties.get(key);
-                    values.set(String(p.value ?? ''), [...(values.get(String(p.value ?? '')) ?? []), name(e)]);
-                }
-            }
-            const specializations = [...new Set(elements.map(e => e.specialization).filter(Boolean))];
-            return {
-                documentation: texts.length > 1 ? texts.map(t => [t, `${documented.filter(e => e.documentation.trim() === t).map(name).join(', ')}: ${t.length > 50 ? `${t.slice(0, 50)}…` : t}`]) : [],
-                properties: new Map([...properties].filter(([, values]) => values.size > 1)
-                    .map(([key, values]) => [key, [...values].map(([value, from]) => [value, `${value || '(empty)'} (${from.join(', ')})`])])),
-                specializations: specializations.length > 1 ? specializations : [],
-            };
-        }
-
-        /**
-         * Some elements side by side, for a merge (MergeCompareDialog's rows): their
-         * names, types, specializations, documentation, each property, their
-         * relationships (kind, direction, the element at the other end) and the
-         * views they are on.
-         */
-        mergeComparison(elements) {
-            const nameOf = (id) => this.model.getElement(id)?.name || id;
-            const valueOf = (e, key) => (e.properties ?? []).filter(p => (p.name ?? p.key) === key).map(p => p.value ?? '').join(', ');
-            const keys = [...new Set(elements.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))];
-            const lines = (e) => {
-                const { incoming, outgoing } = this.model.relationshipsFor(e.id);
-                return [
-                    ...outgoing.map(r => `${r.kind} → ${nameOf(r.target)}`),
-                    ...incoming.map(r => `${r.kind} ← ${nameOf(r.source)}`),
-                ].sort().join('\n');
-            };
-            const views = (e) => this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).map(v => v.name || v.id).join('\n');
-            return [
-                { label: 'Name', values: elements.map(e => e.name ?? '') },
-                { label: 'Type', values: elements.map(e => e.type ?? '') },
-                ...(elements.some(e => e.specialization) ? [{ label: 'Specialization', values: elements.map(e => e.specialization ?? '') }] : []),
-                { label: 'Documentation', values: elements.map(e => (e.documentation ?? '').trim()) },
-                ...keys.map(key => ({ label: `${key} (property)`, values: elements.map(e => valueOf(e, key)) })),
-                { label: 'Relationships', values: elements.map(lines) },
-                { label: 'Views', values: elements.map(views) },
-            ];
-        }
-
-        /**
-         * Merge some elements into one, one undo step (ArchimateModel#mergeCommand).
-         * Their relationships always come together. When they differ in anything
-         * but the views they are on, they are shown side by side
-         * (MergeCompareDialog) to choose which is kept and, where they differ, the
-         * documentation (one, or all joined), each property's value, the
-         * specialization; OK merges, Cancel leaves them. Alike, the first is kept
-         * without asking. Resolves to the merge's command, or null.
-         */
-        async askMerge(elementIds) {
-            const elements = elementIds.map(id => this.model.getElement(id)).filter(Boolean);
-            if (elements.length < 2) return null;
-            const used = (e) => {
-                const views = this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).length;
-                const { incoming, outgoing } = this.model.relationshipsFor(e.id);
-                return `${views} view${views === 1 ? '' : 's'}, ${incoming.length + outgoing.length} relationship${incoming.length + outgoing.length === 1 ? '' : 's'}`;
-            };
-            const ids = elements.map(e => e.id);
-            const rows = this.mergeComparison(elements);
-            const compare = new MergeCompareDialog({
-                title: `Merge ${elements.length} elements`,
-                description: 'The one kept takes the others\' relationships, their boxes on every view, and the properties it lacks; the others go. Where they differ (marked ≠), choose.',
-                columns: elements.map(e => `${e.name || e.id} (${used(e)})`),
-                rows,
-                document: this.document ?? globalThis.document,
-            });
-            // Views apart (their boxes all come to the kept one), nothing to choose: the first is kept.
-            if (!rows.some(row => row.label !== 'Views' && MergeCompareDialog.differs(row))) return this.mergeElements(ids[0], ids.slice(1));
-            const { documentation, properties, specializations } = this.mergeChoices(elements);
-            const JOINED = '\u0000joined';
-            const propertyKeys = [...properties.keys()];
-            compare.fields = [
-                { key: 'keep', label: 'Keep', type: 'select', value: ids[0], choices: elements.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
-                ...(documentation.length ? [{ key: 'documentation', label: 'Documentation', type: 'select', value: JOINED, choices: [[JOINED, 'All of them, joined'], ...documentation] }] : []),
-                ...(specializations.length ? [{ key: 'specialization', label: 'Specialization', type: 'select', value: specializations[0], choices: specializations.map(s => [s, s]) }] : []),
-                ...propertyKeys.map((key, i) => ({ key: `property-${i}`, label: key, type: 'select', value: properties.get(key)[0][0], choices: properties.get(key) })),
-            ];
-            const values = await compare.ask();
-            if (!values) return null;
-            const { keep } = values;
-            const joined = () => [...new Set(elements.map(e => (e.documentation ?? '').trim()).filter(Boolean))].join('\n\n');
-            return this.mergeElements(keep, ids.filter(id => id !== keep), {
-                ...(documentation.length && { documentation: values.documentation === JOINED ? joined() : values.documentation }),
-                ...(specializations.length && { specialization: values.specialization }),
-                properties: Object.fromEntries(propertyKeys.map((key, i) => [key, values[`property-${i}`]])),
-            });
-        }
-
-        /** Merge elements into one (`keepId`), one undo step; the canvas and tree redraw. `choices`: MergeElementsCommand's. */
-        mergeElements(keepId, otherIds, choices = {}) {
-            const cmd = this.model.mergeCommand(keepId, otherIds, choices);
-            this._executeCommand(cmd);
-            return cmd;
-        }
-
-        /** The checks use this editor's ArchiMate version. */
-        checkerOptions() {
-            return { version: this.version };
-        }
-
-        /** An element is shown by selecting its first occurrence on this view. */
-        revealFinding(finding) {
-            if (finding.kind !== 'element') return super.revealFinding(finding);
-            const instance = this.view.elementInstancesFor(finding.ids[0])[0];
-            if (instance && this.templates.has(instance.id)) {
-                this.selectTemplate(instance.id);
-                this.render();
-            }
-        }
-
-        /**
-         * Bring the editor's templates and lines in line with the view, reusing
-         * the template or line of each instance still there.
-         */
-        syncFromView() {
-            const { view, model } = this;
-            const templates = new Map();
-            for (const inst of view.elementInstances.values()) {
-                if (!inst.shownIn(view) || !inst.resolve(model)) continue;
-                const existing = this.templates.get(inst.id);
-                templates.set(inst.id, existing?.instance === inst ? existing
-                    : new ArchimateElementTemplate(inst, model, { nodeOptions: this.nodeOptions }));
-            }
-            for (const t of templates.values()) {
-                t.nodeOptions = this.nodeOptions;
-                // Asked afresh at every sync: a host's status is live, not part of the model.
-                t.status = this.elementStatus ? this.elementStatus(t.instance.resolve(model)) ?? null : null;
-            }
-            // The view's groups (Archi groups: model folders with bounds on this view).
-            for (const folder of view.placedFolders) {
-                const existing = this.templates.get(folder.id);
-                templates.set(folder.id, existing instanceof ViewGroupTemplate && existing.view === view ? existing : new ViewGroupTemplate(folder.id, view));
-            }
-            const edges = new Map();
-            // A line a nesting stands for, to a box nested in its source (at any depth), is not drawn unless asked (Archi's way).
-            const nestedOut = (edge) => !this.nodeOptions.showNestedLines
-                && hiddenByNesting(view, edge.relationship, templates.get(edge.sourceId).instance, templates.get(edge.targetId).instance);
-            for (const inst of view.relationshipInstances.values()) {
-                const existing = this.edges.get(inst.id);
-                const edge = existing?.instance === inst ? existing : new ArchimateEdge(inst, view);
-                if (edge.relationship && templates.has(edge.sourceId) && templates.has(edge.targetId) && !nestedOut(edge)) edges.set(inst.id, edge);
-            }
-            // Plain lines (a canvas's connections, a line from a note).
-            for (const line of view.viewConnections.values()) {
-                const existing = this.edges.get(line.id);
-                const edge = existing?.line === line ? existing : new ViewLineEdge(line);
-                if (line.visible !== false && templates.has(edge.sourceId) && templates.has(edge.targetId)) edges.set(line.id, edge);
-            }
-            // Derived relationships (⚙ Settings → Show derived): drawn between elements both on the view.
-            if (this.nodeOptions.showDerived) {
-                const shown = (elementId) => view.elementInstancesFor(elementId).find(inst => templates.has(inst.id))?.id;
-                for (const derived of DerivedRelationships.compute(model, { maxHops: 2 }).derived) {
-                    const from = shown(derived.source), to = shown(derived.target);
-                    if (from && to) edges.set(derived.id, new DerivedEdge(derived, from, to));
-                }
-            }
-            this.templates.clear();
-            for (const [id, t] of templates) this.templates.set(id, t);
-            this.edges.clear();
-            for (const [id, e] of edges) this.edges.set(id, e);
-        }
-
-        render() {
-            if (this.disposed) return;
-            this.syncFromView();
-            super.render();
-        }
-
-        /** ⚙ Settings: the notation (version, distinct shapes), then the base editor's grid and line styles. */
-        settingsMenuItems() {
-            const set = (patch) => {
-                this.nodeOptions = { ...this.nodeOptions, ...patch };
-                if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
-                else this.render();
-            };
-            const distinct = !!this.nodeOptions.useDistinctShapes;
-            const viewpoint = this.nodeOptions.viewpoint ?? 'All';
-            const mode = this.nodeOptions.viewpointMode ?? 'fade';
-            return [
-                {
-                    label: `Version: ArchiMate ${this.version}`,
-                    items: ['4', '3.2'].map(v => ({ label: `ArchiMate ${v}`, checked: v === this.version, action: () => set({ archimateVersion: v }) })),
-                },
-                { label: `Distinct shapes: ${distinct ? 'on' : 'off'}`, action: () => set({ useDistinctShapes: !distinct }) },
-                { label: `Show derived: ${this.nodeOptions.showDerived ? 'on' : 'off'}`, action: () => set({ showDerived: !this.nodeOptions.showDerived }) },
-                { label: `Lines to nested boxes: ${this.nodeOptions.showNestedLines ? 'shown' : 'hidden'}`, action: () => set({ showNestedLines: !this.nodeOptions.showNestedLines }) },
-                {
-                    label: `Viewpoint: ${viewpoint}`,
-                    items: ArchimateViewpoints.all(this.customViewpoints).map(vp => ({ label: vp.name, checked: vp.name === viewpoint, action: () => set({ viewpoint: vp.name }) })),
-                },
-                {
-                    label: `Outside the viewpoint: ${mode === 'hide' ? 'hidden' : 'faded'}`,
-                    items: [['fade', 'Faded'], ['hide', 'Hidden']].map(([m, text]) => ({ label: text, checked: m === mode, action: () => set({ viewpointMode: m }) })),
-                },
-                { separator: true },
-                { separator: true },
-                { label: 'Specializations…', action: () => this.editSpecializations() },
-                { label: 'Viewpoints…', action: () => this.editViewpoints() },
-                ...super.settingsMenuItems(),
-                ...(this.settingsManager ? [{ separator: true }, { label: 'Model settings…', action: () => showGlobalSettingsDialog(this.document ?? globalThis.document, this.settingsManager, 'default') }] : []),
-            ];
-        }
-
-        /**
-         * What the ArchiMate rules say against a relationship's line, or null
-         * (ArchimateValidator, for this ArchiMate version). Off when the view's
-         * `invalidRelationships` setting is 'off'; with 'tooltip' it is the tooltip, not drawn red.
-         */
-        edgeWarning(edge) {
-            const relationship = edge.relationship;
-            const mode = this.viewSettings().invalidRelationships ?? 'highlight';
-            if (!relationship || mode === 'off') return null;
-            const from = this.model.getElement(relationship.source), to = this.model.getElement(relationship.target);
-            if (!from || !to) return null;
-            const result = ArchimateValidator.validateRelationship(from, to, relationship.kind, this.version);
-            return result.valid ? null : { message: result.message, highlight: mode === 'highlight' };
-        }
-
-        /** Edit the specialization catalog; elements given one redraw with it. */
-        editSpecializations() {
-            return specializationCatalogDialog({ version: this.version, document: this.document ?? globalThis.document, onChange: () => this._notationChanged() }).open();
-        }
-
-        /** Edit the user's own viewpoints; they are offered (and applied) from then on. */
-        editViewpoints() {
-            return CustomViewpoints.dialog({
-                version: this.version, document: this.document ?? globalThis.document,
-                onChange: (viewpoints) => { this.customViewpoints = viewpoints; this._viewpointRule = null; this._notationChanged(); },
-            }).open();
-        }
-
-        /** The notation's catalogs changed: the host redraws (its palette too), or this editor does. @private */
-        _notationChanged() {
-            if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
-            else this.render();
-        }
-
-        /**
-         * The base editor's rules (a highlight), then the active filter's result
-         * (ElementFilterRule) and the viewpoint (ViewpointRule, from the notation options).
-         */
-        emphasisRules() {
-            const { viewpoint, viewpointMode } = this.nodeOptions;
-            const key = `${viewpoint}|${viewpointMode}|${this.version}`;
-            if (this._viewpointRule?.key !== key) {
-                this._viewpointRule = { key, rule: new ViewpointRule({ viewpoint, mode: viewpointMode, version: this.version, customViewpoints: this.customViewpoints }) };
-            }
-            return [...super.emphasisRules(), ...(this.elementFilter ? [this.elementFilter] : []), ...(this._viewpointRule.rule.viewpoint ? [this._viewpointRule.rule] : [])];
-        }
-
-        /** Dim every model element but these (a filter's result); null clears it. Redraws. */
-        setElementFilter(elementIds) {
-            this.elementFilter = elementIds ? new ElementFilterRule(elementIds) : null;
-            this.render();
-        }
-
-        /**
-         * The Element section of a shape's properties: the model element's own
-         * name, type, specialization, icon, documentation and typed properties (the same on every view;
-         * the dialog's Name above labels this occurrence only). None for a note,
-         * image or canvas box.
-         */
-        conceptFields(template) {
-            const element = this._elementOf(template.id);
-            if (!element) return [];
-            return [
-                { type: 'heading', label: 'Element (on every view)' },
-                ...elementPropertyFields(element, { version: this.version, document: this.document ?? globalThis.document }),
-            ];
-        }
-
-        /** The element's changes as one EditViewItemCommand (null when nothing changed). */
-        conceptCommand(template, values) {
-            const element = this._elementOf(template.id);
-            return element ? elementEditCommand(element, values, { instance: template.instance }) : null;
-        }
-
-        /**
-         * With several shapes selected, the Elements section: their type, their
-         * specialization when they share a type, and one property to set on all.
-         * Only when every selected shape is an element.
-         */
-        manyConceptFields(templates) {
-            const elements = this._elementsOf(templates);
-            return elements ? manyElementsFields(elements, { version: this.version }) : [];
-        }
-
-        /** The elements' changes as one step (null when nothing changed). */
-        manyConceptCommand(templates, values) {
-            const elements = this._elementsOf(templates);
-            const instances = new Map(templates.map(t => [this._elementOf(t.id), t.instance]));
-            const commands = elements ? manyElementsEditCommands(elements, values, { instanceOf: (e) => instances.get(e) }) : [];
-            return commands.length ? new CompositeCommand(`Edit ${commands.length} elements`, commands) : null;
-        }
-
-        /** The model elements the shapes show, each once; null unless every shape shows one. @private */
-        _elementsOf(templates) {
-            const elements = templates.map(t => this._elementOf(t.id));
-            return elements.every(Boolean) ? [...new Set(elements)] : null;
-        }
-
-        /**
-         * The Relationship section of a line's properties: its kind (among those
-         * the ArchiMate rules allow between its ends, and its own), documentation
-         * and typed properties. None for a plain line or a derived one.
-         */
-        edgeConceptFields(edge) {
-            const relationship = edge.relationship;
-            if (!relationship || edge.editable === false) return [];
-            const kinds = [...new Set([relationship.kind, ...this.allowedKinds(edge.sourceId, edge.targetId)].filter(Boolean))];
-            return [
-                { type: 'heading', label: 'Relationship (on every view)' },
-                { key: 'relationship.kind', label: 'Kind', type: 'select', value: relationship.kind, choices: kinds.map(k => [k, typeTitle(k)]) },
-                { key: 'relationship.documentation', label: 'Documentation', type: 'textarea', rows: 3, value: relationship.documentation ?? '' },
-                { type: 'heading', label: 'Properties' },
-                PropertyListEditor.field(relationship.properties, { key: 'relationship.properties', document: this.document ?? globalThis.document }),
-            ];
-        }
-
-        /** The relationship's changes as one EditViewItemCommand (null when nothing changed). */
-        edgeConceptCommand(edge, values) {
-            return edge.relationship ? conceptEditCommand(edge.relationship, values, { prefix: 'relationship', instance: edge.instance }) : null;
-        }
-
-        /** A new element of `type` at `point` (snapped), created in the model and shown here. One undo step. */
-        addElement(type, point) {
-            const name = typeTitle(type);
-            const id = GraphDiagram.generateNodeId(name, this.model.elements().map(e => e.id));
-            const at = this._snapToGrid(point);
-            const instance = new ElementInstance(id, at.x, at.y);
-            this._executeCommand(new AddToViewCommand(this.view, instance, { element: { id, name, type }, label: `Add ${name}` }));
-            return instance;
-        }
-
-        /**
-         * Show an element the model has at `point` (snapped), with its
-         * relationships to the elements already on the view (ShowElementCommand).
-         * One undo step. Null for an element the model lacks.
-         */
-        showElement(elementId, point) {
-            if (!this.model.getElement(elementId)) return null;
-            const at = this._snapToGrid(point);
-            const instance = new ElementInstance(elementId, at.x, at.y);
-            this._executeCommand(new ShowElementCommand(this.view, instance, { label: `Show ${this.model.getElement(elementId).name || elementId}` }));
-            this.selectTemplate(instance.id);
-            return instance;
-        }
-
-        /**
-         * A picture as an image box on this view at `point` (snapped), one undo
-         * step, selected. Null when this kind of view has no image box.
-         * @param {string} dataURL - The picture
-         */
-        addImage(dataURL, point) {
-            if (!this.view.constructor.BOX_KINDS?.some(k => k.key === 'image')) return null;
-            const box = this.view.addBox('image', this._snapToGrid(point), { iconUrl: dataURL });
-            this.render();
-            this.selectTemplate(box.id);
-            return box;
-        }
-
-        /**
-         * Add a box of a canvas palette kind ('block', 'sticky', 'image') at `point`
-         * (snapped), as the canvas menu would. One undo step.
-         */
-        addCanvasBox(kindKey, point) {
-            const item = canvasBoxMenuItems(this.view, this._snapToGrid(point), {
-                onAdded: (box) => { this.render(); this.selectTemplate(box.id); },
-            }).find((_, i) => this.view.constructor.BOX_KINDS[i].key === kindKey);
-            return item?.action();
-        }
-
-        /** The relationship kinds the ArchiMate rules allow from one instance's element to another's (association always). */
-        allowedKinds(sourceId, targetId) {
-            const from = this._elementOf(sourceId), to = this._elementOf(targetId);
-            if (!from || !to) return [];
-            const kinds = ArchimateValidator.allowedKinds(from, to, this.version);
-            return kinds.includes('association') ? kinds : [...kinds, 'association'];
-        }
-
-        /**
-         * Connect two elements: the kind is asked for (`chooseKind`) among those
-         * allowed, or taken from KIND_PREFERENCE. One undo step once chosen.
-         * @returns {Command|null|Promise<Command|null>}
-         */
-        connect(sourceId, targetId) {
-            if (sourceId === targetId) return null;
-            // A box or note at either end: a plain line (the view's rule), one undo step.
-            if (!this.view.linesAreRelationships(sourceId, targetId)) {
-                if (!this.templates.has(sourceId) || !this.templates.has(targetId)) return null;
-                const line = this.view.connect(sourceId, targetId);
-                this.render();
-                return line;
-            }
-            const kinds = this.allowedKinds(sourceId, targetId);
-            if (!kinds.length) return null;
-            const run = (kind) => (kind && kinds.includes(kind) ? this._connectAs(sourceId, targetId, kind) : null);
-            if (!this.chooseKind) return run(KIND_PREFERENCE.find(k => kinds.includes(k)) ?? kinds[0]);
-            const chosen = this.chooseKind(kinds, this._elementOf(sourceId), this._elementOf(targetId));
-            return chosen && typeof chosen.then === 'function' ? chosen.then(run) : run(chosen);
-        }
-
-        /** @private */
-        _connectAs(sourceId, targetId, kind) {
-            const cmd = this.connectCommand(sourceId, targetId, kind);
-            if (cmd) this._executeCommand(cmd);
-            return cmd;
-        }
-
-        /** The model element an instance on this canvas shows (notes and images have none). @private */
-        /** A box of a model element links to the element's page in a report. */
-        reportRef(template) {
-            const element = this._elementOf(template.id);
-            return element ? { kind: 'element', id: element.id } : null;
-        }
-
-        _elementOf(instanceId) {
-            const inst = this.templates.get(instanceId)?.instance;
-            return inst ? this.model.getElement(inst.elementId) : undefined;
-        }
-
-        /** A new relationship of `kind` between two elements' instances, created in the model and shown here. */
-        connectCommand(sourceId, targetId, kind = KIND_PREFERENCE.find(k => this.allowedKinds(sourceId, targetId).includes(k))) {
-            const source = this.templates.get(sourceId)?.instance;
-            const target = this.templates.get(targetId)?.instance;
-            const from = this._elementOf(sourceId);
-            const to = this._elementOf(targetId);
-            // Notes and images are not model elements: they take no relationships.
-            if (!from || !to || !kind) return null;
-            const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
-            const instance = new RelationshipInstance(id, null, source.id, target.id);
-            return new AddRelationshipToViewCommand(this.view, instance, {
-                relationship: { id, source: from.id, target: to.id, kind },
-                label: `Add ${kind}`,
-            });
-        }
-
-        /**
-         * Deleting takes a box off the view (its lines go with it, see the base's
-         * deleteTemplatesCommand); the model keeps its element. A group goes off the
-         * view and what it held stays; the model keeps its folder.
-         */
-        /** Copies are ArchiMate views' items: they paste into ArchiMate views (any model), not the template editor. */
-        static clipboardKind = 'archimate';
-
-        /**
-         * A copy of these boxes: the view's JSON of them (ArchimateView#toJSON),
-         * with the lines and relationships between them and the elements they show.
-         * Groups are not copied (they are model folders).
-         */
-        copyPayload(ids) {
-            const boxes = ids.filter(id => this.view.getElementInstance(id));
-            return boxes.length ? this.view.toJSON({ itemIds: boxes }) : null;
-        }
-
-        /** Paste: new boxes for the same elements (added to the model when it lacks them), one undo step. */
-        pasteCommand(payload, options) {
-            return this.view.pasteCommand(payload, options);
-        }
-
-        /** Deleting is off the view: the model keeps what it showed. */
-        deleteLabel(templateIds) {
-            return `${super.deleteLabel(templateIds)} from view`;
-        }
-
-        removeTemplateCommand(templateId) {
-            return this.templates.get(templateId) instanceof ViewGroupTemplate
-                ? new RemoveGroupFromViewCommand(this.view, templateId)
-                : new DeleteElementCommand(this.view, templateId);
-        }
-
-        /**
-         * What moves with a shape: for a group, the elements drawn in it (its folder's),
-         * the notes and pictures Archi drew in it, and the groups inside it; for a box (a canvas block), the boxes Archi drew inside it.
-         */
-        containedIn(templateId) {
-            const template = this.templates.get(templateId);
-            const view = this.view;
-            if (template instanceof ViewGroupTemplate) {
-                const inner = [];
-                for (const t of this.templates.values()) {
-                    if (t instanceof ViewGroupTemplate) {
-                        if (t.id !== templateId && view.placedFolders.find(f => f.id === t.id)?.parentId === templateId) inner.push(t.id);
-                    } else if (t.instance?.archi?.parent === templateId
-                        || (t.instance?.elementId && view.placedFolderOf(t.instance.elementId) === templateId)) {
-                        inner.push(t.id);
-                    }
-                }
-                return inner;
-            }
-            const visualId = template?.instance?.visualId;
-            if (!visualId) return [];
-            return [...this.templates.values()].filter(t => t.instance?.nestedIn === visualId).map(t => t.id);
-        }
-
-        // ===== Nesting =====
-
-        /** The box this one is drawn inside: an element's box, or a canvas block (a group holds by folder, not here). */
-        parentOf(templateId) {
-            const visualId = this.templates.get(templateId)?.instance?.nestedIn;
-            if (!visualId) return null;
-            const parent = [...this.templates.values()].find(t => t.instance?.visualId === visualId);
-            return parent?.id ?? null;
-        }
-
-        /**
-         * An element's parts on this view: the elements it is composed of or
-         * aggregates (its composition and aggregation relationships' targets),
-         * each by its first box here.
-         */
-        partsOf(templateId) {
-            const element = this._elementOf(templateId);
-            if (!element) return [];
-            const parts = this.model.relationships()
-                .filter(r => r.source === element.id && r.target !== element.id && (r.kind === 'composition' || r.kind === 'aggregation'))
-                .map(r => this.view.elementInstancesFor(r.target)[0]?.id)
-                .filter(id => id && this.templates.has(id) && this.canHold(templateId, id));
-            return [...new Set(parts)];
-        }
-
-        /** The "by kind" layout puts an element's box in its layer's row (notes and images in their own). */
-        layoutCategory(template) {
-            const element = this._elementOf(template.id);
-            return element ? treeLayerOf(element) : 'other';
-        }
-
-        /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
-        canHold(parentId, childId) {
-            const parent = this.templates.get(parentId), child = this.templates.get(childId);
-            if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
-            return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
-        }
-
-        /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
-        nestsOnDrop(parentId, childId) {
-            if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
-            return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
-        }
-
-        nestCommand(childId, parentId) {
-            const child = this.templates.get(childId)?.instance;
-            if (!child) return null;
-            return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
-        }
-
-        /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
-        nested(changes) {
-            let chain = Promise.resolve();
-            for (const { childId, parentId } of changes) {
-                chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
-            }
-            return chain;
-        }
-
-        /**
-         * The kinds a nesting can stand for, from parent to child, as Archi offers
-         * them: those of NESTING_KINDS the rules allow. None when the two already
-         * have such a relationship.
-         */
-        nestingKinds(parentId, childId) {
-            const from = this._elementOf(parentId), to = this._elementOf(childId);
-            if (!from || !to || from === to) return [];
-            if (nestingRelationships(this.model, from.id, to.id).length) return [];
-            const allowed = this.allowedKinds(parentId, childId);
-            return NESTING_KINDS.filter(k => allowed.includes(k));
-        }
-
-        /**
-         * Ask which relationship a nesting stands for (`chooseKind`, with the
-         * reason 'nesting'; none chosen adds none) and add it to the model, drawn
-         * on no view: the nesting shows it. One undo step. Without `chooseKind`, nothing is added.
-         * @returns {Promise<Command|null>}
-         */
-        async offerNestingRelationship(parentId, childId) {
-            const kinds = this.nestingKinds(parentId, childId);
-            if (!kinds.length || !this.chooseKind) return null;
-            const from = this._elementOf(parentId), to = this._elementOf(childId);
-            const kind = await this.chooseKind(kinds, from, to, { reason: 'nesting' });
-            if (!kind || !kinds.includes(kind)) return null;
-            const cmd = this.nestingRelationshipCommand(parentId, childId, kind);
-            this._executeCommand(cmd);
-            return cmd;
-        }
-
-        /** The relationship of `kind` a nesting stands for, from parent to child, in the model only. */
-        nestingRelationshipCommand(parentId, childId, kind) {
-            const from = this._elementOf(parentId), to = this._elementOf(childId);
-            const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
-            return new AddRelationshipCommand(this.model, { id, source: from.id, target: to.id, kind }, `Add ${kind} (nested)`);
-        }
-
-        /** Deleting a line takes it off the view: a plain line goes; a relationship stays in the model. */
-        deleteEdgeCommand(edgeId) {
-            return this.view.viewConnections.has(edgeId)
-                ? new RemoveLineCommand(this.view, edgeId)
-                : new RemoveRelationshipFromViewCommand(this.view, edgeId);
-        }
+    /**
+     * Which allowed relationship kind a new connection takes when nobody is asked:
+     * the dependency and dynamic kinds people usually mean first, the structural
+     * whole/part kinds last.
+     */
+    const KIND_PREFERENCE = Object.freeze([
+        'assignment', 'realization', 'serving', 'access', 'influence', 'triggering', 'flow',
+        'specialization', 'aggregation', 'composition', 'association',
+    ]);
+
+    /**
+     * ArchimateCanvasEditor — the diagram editor's canvas over one ArchiMate
+     * view: its element instances as ArchimateElementTemplates, its relationship
+     * instances as ArchimateEdges, and its own undo history. Everything the base
+     * editor does (move, resize, restack, bend points, sides, styles, zoom,
+     * snapping) edits the view directly; the editor's maps are rebuilt from the
+     * view on every render, so undo of a view edit shows straight away.
+     *
+     * What stands for something else in ArchiMate is done through the view and
+     * model instead of the maps:
+     * - dropping a palette type adds a new model element and shows it;
+     * - connecting two elements adds a relationship, its kind the first the
+     *   ArchiMate rules allow between them (association if none);
+     * - deleting removes from the view (with the element's lines); the model
+     *   keeps its elements and relationships.
+     * Each is one step on the view's history.
+     */
+    class ArchimateCanvasEditor extends DiagramEditor {
+        /**
+         * @param {Object} options - DiagramEditor options, plus:
+         * @param {ArchimateView} options.view
+         * @param {ArchimateModel} options.model
+         * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options (archimateVersion, useDistinctShapes, ...),
+         *   and the viewpoint: `viewpoint` (a name; 'All' or none for every type), `viewpointMode` ('fade' or 'hide')
+         * @param {(kinds: string[], from: Object, to: Object) => Promise<string|null>|string|null} [options.chooseKind]
+         *   Asks which relationship kind a new connection is, given the kinds allowed between the two
+         *   elements (null cancels). Without it the first of KIND_PREFERENCE that is allowed is used.
+         * @param {(nodeOptions: Object) => void} [options.onNodeOptionsChange] - The ⚙ Settings menu changed
+         *   the version or distinct shapes (the host may need to redraw more than the canvas, e.g. a palette)
+         * @param {(element: Object) => ({text: string, color?: string}|null)} [options.elementStatus] - A host's
+         *   live status for an element (a component's lifecycle state), drawn on its boxes
+         * @param {(element: Object) => Array<Object>} [options.elementMenuExtras] - A host's menu items for an
+         *   element (its transitions), at the end of a box's right-click menu
+         */
+        constructor({ view, model, nodeOptions = {}, chooseKind = null, onNodeOptionsChange = null, templateMenu = null, customViewpoints = [], settingsManager = null, elementStatus = null, elementMenuExtras = null, ...options }) {
+            super({ ...options, templates: new Map(), edges: new Map(), history: view.history, arrangement: view.arrangement });
+            this.view = view;
+            this.model = model;
+            this.nodeOptions = nodeOptions;
+            this.chooseKind = chooseKind;
+            this.onNodeOptionsChange = onNodeOptionsChange;
+            /** Viewpoints of the user's own, offered with the standard ones. */
+            this.customViewpoints = customViewpoints;
+            /** The settings the ⚙ Settings menu's Model settings… edits (a SettingsManager), if any. */
+            this.settingsManager = settingsManager;
+            /** Canvas templates (a CanvasTemplateMenu): placed on the canvas, saved from its shapes. */
+            this.templateMenu = templateMenu;
+            /** A host's live status per element, drawn on its boxes, and its menu items per element. */
+            this.elementStatus = elementStatus;
+            this.elementMenuExtras = elementMenuExtras;
+            this.addDropHandler({
+                accepts: (dt) => Array.from(dt.types).includes(ARCHIMATE_TYPE_MIME),
+                drop: (dt, point) => this.addElement(dt.getData(ARCHIMATE_TYPE_MIME), point),
+            });
+            // An element from the model tree: shown here, with its relationships to what is already shown.
+            this.addDropHandler({
+                accepts: (dt) => Array.from(dt.types).includes(MODEL_ELEMENT_MIME),
+                drop: (dt, point) => this.showElement(dt.getData(MODEL_ELEMENT_MIME), point),
+            });
+            // A picture file dropped (or pasted): an image box where it fell (pasted: in the middle).
+            if (typeof document !== 'undefined') this.enableImageDrop((dataURL, point) => this.addImage(dataURL, point));
+            // A canvas palette tile: the box, where it was dropped (an image asks for its picture).
+            this.addDropHandler({
+                accepts: (dt) => Array.from(dt.types).includes(CANVAS_BOX_MIME),
+                drop: (dt, point) => this.addCanvasBox(dt.getData(CANVAS_BOX_MIME), point),
+            });
+        }
+
+        get version() {
+            return this.nodeOptions.archimateVersion ?? '4';
+        }
+
+        /**
+         * An element's own items (a view of it and what it relates to; its
+         * relationships to what is shown, when some are not), a canvas box's hint,
+         * and the shape's selection (or the shape and its group) as a template.
+         */
+        shapeMenuExtras(elementId) {
+            const ids = this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId];
+            const items = this.templateMenu?.saveAsTemplateItems(this.view.id, { itemIds: [...this.arrangement.movers(ids)] }) ?? [];
+            const element = this._elementOf(elementId);
+            const missing = element ? this.missingRelationshipsOf(elementId) : [];
+            // Two or more elements chosen: merge them into one (choose the one kept).
+            const merging = this.elementIdsOf(ids);
+            return [
+                ...(merging.length > 1 ? [{ label: `Merge ${merging.length} elements…`, action: () => this.askMerge(merging) }] : []),
+                ...(element ? [{ label: 'Generate View For This', action: () => this.model.generateView([element.id]) }] : []),
+                ...(missing.length ? [{ label: `Add Missing Relationships (${missing.length})`, action: () => this.addMissingRelationships(elementId) }] : []),
+                ...hintMenuItems(this.view, elementId, { onChange: () => this.render() }),
+                ...(items.length ? [{ label: 'Save as template', items }] : []),
+                ...(merging.length ? [{ label: '🗑 Delete from model…', danger: true, action: () => this.askDeleteFromModel(merging) }] : []),
+                // The host's own items end the menu.
+                ...(element && this.elementMenuExtras ? this.elementMenuExtras(element) ?? [] : []),
+            ];
+        }
+
+        /** Delete elements from the model, once the dialog saying where they are used is confirmed (askDeleteFromModel). */
+        askDeleteFromModel(elementIds) {
+            return askDeleteFromModel(this.model, elementIds, {
+                document: this.document ?? globalThis.document,
+                onConfirm: (ids) => this.deleteFromModel(ids),
+            });
+        }
+
+        /** Take elements out of the model, with their relationships and every box and line of them, as one undo step. */
+        deleteFromModel(elementIds) {
+            const cmd = this.model.deleteFromModelCommand(elementIds);
+            if (!cmd.elementIds.length) return null;
+            this.clearSelection();
+            this._executeCommand(cmd);
+            return cmd;
+        }
+
+        /** The model's relationships between this box's element and what is shown that the view does not draw from this box. */
+        missingRelationshipsOf(instanceId) {
+            const instance = this.view.getElementInstance(instanceId);
+            if (!instance) return [];
+            return this.view.missingRelationshipInstances(instance.elementId)
+                .filter(line => line.sourceInstanceId === instanceId || line.targetInstanceId === instanceId);
+        }
+
+        /** Draw them all, as one undo step. */
+        addMissingRelationships(instanceId) {
+            const missing = this.missingRelationshipsOf(instanceId);
+            if (!missing.length) return null;
+            const cmd = new CompositeCommand(`Add ${missing.length} relationship${missing.length === 1 ? '' : 's'}`,
+                missing.map(line => new AddRelationshipToViewCommand(this.view, line)));
+            this._executeCommand(cmd);
+            return cmd;
+        }
+
+        /** The view's boxes (a canvas's palette; a note or picture elsewhere) at the point clicked, and on a canvas a template placed there. */
+        canvasMenuItems(at) {
+            const boxes = canvasBoxMenuItems(this.view, at, { onAdded: (box) => { this.render(); this.selectTemplate(box.id); } });
+            const items = this.templateMenu?.placeTemplateItems(this.view.id, at) ?? [];
+            // Elements from text: not on a canvas, whose boxes are not elements.
+            const fromText = this.view.constructor.kind === 'canvas' ? [] : super.canvasMenuItems(at);
+            return [...boxes, ...fromText, ...(items.length ? [{ label: 'Place template', items }] : []), ...hintMenuItems(this.view, null, { onChange: () => this.render() })];
+        }
+
+        /** The View menu, and Generate roadmap… (elements with dates on a time line). */
+        viewMenuItems() {
+            const repeated = this.view?.repeatedBoxes?.() ?? [];
+            return [
+                ...super.viewMenuItems(),
+                { label: `Remove repeated boxes${repeated.length ? ` (${repeated.length})` : ''}`, disabled: !repeated.length || undefined, action: () => this.removeRepeatedBoxes() },
+                { label: 'Generate roadmap…', action: () => this.askRoadmap() },
+            ];
+        }
+
+        /** The model's own: Find likely duplicates…. */
+        modelMenuItems() {
+            return [...super.modelMenuItems(), { label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
+        }
+
+        /**
+         * Take off this view the boxes that only repeat another box of their
+         * element (ArchimateView#repeatedBoxes: same label, same lines), with
+         * their lines, as one undo step. Returns the command, or null with none.
+         */
+        removeRepeatedBoxes() {
+            const ids = this.view.repeatedBoxes();
+            if (!ids.length) return null;
+            const cmd = this.deleteTemplatesCommand(ids);
+            cmd.label = `Remove ${ids.length} repeated box${ids.length === 1 ? '' : 'es'}`;
+            this._executeCommand(cmd);
+            return cmd;
+        }
+
+        /**
+         * Where Find likely duplicates… can look: the whole model, the elements on
+         * the view in front, the elements selected (two or more). [key, label, element ids or null].
+         */
+        duplicateScopes() {
+            const onView = this.elementIdsOf([...(this.view?.elementInstances?.keys() ?? [])]);
+            const selected = this.elementIdsOf(this.getSelectedIds());
+            return [
+                ['model', 'The whole model', null],
+                ...(onView.length > 1 ? [['view', `This view (${this.view.name || this.view.id})`, onView]] : []),
+                ...(selected.length > 1 ? [['selection', `The ${selected.length} elements selected`, selected]] : []),
+            ];
+        }
+
+        /**
+         * Find likely duplicates…: where to look (duplicateScopes), how to compare
+         * (names, documentation or a property's value; exactly or by their words)
+         * and what noise to leave out (duplicateSearchFields), then the groups
+         * found, each with Merge… (showDuplicates).
+         */
+        askDuplicates() {
+            const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+            const specializations = [...new Set(this.model.elements().map(e => e.specialization).filter(Boolean))].sort();
+            const scopes = this.duplicateScopes();
+            return new FormDialog({
+                title: 'Find likely duplicates',
+                description: 'Elements are compared by their words: case, punctuation, word order and the noise words do not count.',
+                fields: duplicateSearchFields({ scope: { label: 'Look in', choices: scopes.map(([key, label]) => [key, label]) }, properties: names, specializations }),
+                submitLabel: 'Find',
+                idPrefix: 'duplicates-',
+                document: this.document ?? globalThis.document,
+                validate: validateDuplicateSearch,
+                onApply: (values) => {
+                    const { options, scope } = duplicateSearchOptions(values);
+                    this.showDuplicates(options, { within: scopes.find(([key]) => key === scope)?.[2] ?? null });
+                },
+            }).open();
+        }
+
+        /**
+         * The elements that look like one thing twice (the model check's likely
+         * duplicates, compared as `options` say: DUPLICATE_OPTIONS; `within`: only
+         * among these element ids), each group with Merge….
+         */
+        showDuplicates(options = {}, { within = null } = {}) {
+            const find = () => this.model.checker(this.checkerOptions()).possibleDuplicates(options, { within });
+            const groups = find();
+            new DuplicatesDialog({
+                groups,
+                refind: find,
+                merge: async (group) => !!(await this.askMerge(group.ids)),
+                onReveal: (group) => this.revealFinding(group),
+                empty: 'No elements look like the same thing twice.',
+                document: this.document ?? globalThis.document,
+            }).open();
+            return groups;
+        }
+
+        /** The model elements of some boxes, each once (a box that is not an element is left out). */
+        elementIdsOf(instanceIds) {
+            return [...new Set(instanceIds.map(id => this._elementOf(id)?.id).filter(Boolean))];
+        }
+
+        /**
+         * Generate roadmap…: which elements (the selection's, or every element in
+         * the model with both dates), the properties their dates are in, and how
+         * months are named; the roadmap view comes to the front (ArchimateModel#generateRoadmap).
+         */
+        askRoadmap() {
+            const selected = this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean);
+            const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+            return new FormDialog({
+                title: 'Generate roadmap',
+                description: 'A view with each element a bar from its start date to its end date, under the months.',
+                fields: [
+                    { key: 'from', label: 'Elements', type: 'select', value: selected.length ? 'selection' : 'model', choices: [...(selected.length ? [['selection', `The ${selected.length} selected`]] : []), ['model', 'Every element with both dates']] },
+                    { key: 'start', label: 'Start date property', type: 'text', value: 'Start Date', suggestions: names },
+                    { key: 'end', label: 'End date property', type: 'text', value: 'End Date', suggestions: names },
+                    { key: 'months', label: 'Month names', type: 'select', value: 'short', choices: [['short', 'Short (Jan)'], ['full', 'Full (January)']] },
+                    { key: 'name', label: 'View name', type: 'text', value: 'Roadmap' },
+                ],
+                submitLabel: 'Generate',
+                idPrefix: 'roadmap-',
+                document: this.document ?? globalThis.document,
+                validate: (v) => (this.roadmapFor(v).view === null ? `No element has both "${v.start}" and "${v.end}" as dates` : null),
+                onApply: (v) => this.generateRoadmap(v),
+            }).open();
+        }
+
+        /** What a roadmap of these dialog values would hold: `{view: null}` when nothing would be on it (a dry run). @private */
+        roadmapFor({ from, start, end }) {
+            const ids = from === 'selection' ? this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean) : this.model.elements().map(e => e.id);
+            const date = (e, key) => parseDate((e.properties ?? []).find(p => (p.name ?? p.key) === key)?.value);
+            const any = ids.map(id => this.model.getElement(id)).some(e => e && date(e, start) && date(e, end) && date(e, end) >= date(e, start));
+            return { ids, view: any ? true : null };
+        }
+
+        /** Generate the roadmap of Generate roadmap…'s values. @returns {{view, skipped}} */
+        generateRoadmap({ from = 'model', start = 'Start Date', end = 'End Date', months = 'short', name = 'Roadmap' } = {}) {
+            const { ids } = this.roadmapFor({ from, start, end });
+            return this.model.generateRoadmap(ids, { startProperty: start, endProperty: end, monthNames: months, name });
+        }
+
+        /** An element's box keeps room for its type badge, and Archi's height. */
+        textFit(template) {
+            return this._elementOf(template.id) ? { padding: 44, min: { width: 80, height: 55 } } : super.textFit(template);
+        }
+
+        /** Text becomes elements of any type of this version (the viewpoint's, when it limits them). */
+        shapeTypes() {
+            const viewpoint = this.nodeOptions.viewpoint;
+            const allowed = viewpoint && viewpoint !== 'All' ? ArchimateViewpoints.allowedElementTypes(viewpoint, this.version, this.customViewpoints) : null;
+            return ArchimateNotation.elementTypeNames(this.version)
+                .filter(t => !allowed || allowed.includes(t))
+                .map(t => [t, typeTitle(t)]);
+        }
+
+        /**
+         * New model elements from text, each with its box here: one undo step.
+         * A documentation column becomes the element's documentation.
+         */
+        createShapesCommand(items) {
+            const ids = this.model.elements().map(e => e.id);
+            const steps = [], createdIds = [];
+            for (const item of items) {
+                const id = GraphDiagram.generateNodeId(`${item.type}-${item.name}`, ids);
+                ids.push(id);
+                const instance = new ElementInstance(id, item.x, item.y);
+                createdIds.push(instance.id);
+                steps.push(new AddToViewCommand(this.view, instance, { element: { id, name: item.name, type: item.type, ...(item.documentation && { documentation: item.documentation }) } }));
+            }
+            const cmd = new CompositeCommand(`Add ${steps.length} element${steps.length === 1 ? '' : 's'} from text`, steps);
+            cmd.createdIds = createdIds;
+            return cmd;
+        }
+
+        /**
+         * What elements can be coloured by: their layer, type, specialization, each
+         * property any of them has, the change deliverables and work packages make
+         * to them (when the model has any), and a formula over their properties.
+         */
+        colourKeys(templates = [...this.templates.values()]) {
+            const properties = new Set();
+            for (const t of templates) for (const p of this._elementOf(t.id)?.properties ?? []) if (p.name ?? p.key) properties.add(p.name ?? p.key);
+            return [
+                ['layer', 'Layer'], ['type', 'Type'], ['specialization', 'Specialization'],
+                ...[...properties].sort().map(name => [`property:${name}`, `Property "${name}"`]),
+                ...(this.model && hasChangeMakers(this.model) ? [['change', 'Change (create, update, delete)']] : []),
+                ...(properties.size ? [['expression', 'A formula over properties…']] : []),
+            ];
+        }
+
+        /** By change, a relationship to a deliverable or work package is drawn in the colour of the change it says. */
+        colourEdgeValue(edge, key) {
+            if (key !== 'change' || !edge.relationship) return super.colourEdgeValue(edge, key);
+            return relationshipChange(this.model, edge.relationship) ?? undefined;
+        }
+
+        /** A formula's key (`expression:<formula>`) is called by its formula. */
+        colourKeyLabel(key) {
+            return key.startsWith('expression:') ? key.slice(11) : super.colourKeyLabel(key);
+        }
+
+        /** The change heat map's own colours; a formula's results, light to dark in order; else the palette. */
+        colourDefaults(key, values) {
+            if (key === 'change') return values.map(v => CHANGE_COLOURS[v]);
+            if (key.startsWith('expression:')) return sequentialColours(values.length);
+            return super.colourDefaults(key, values);
+        }
+
+        /**
+         * A formula's values: each element's result (expressionValues), as its own
+         * value when there are few, else in bands, smallest first (resultBands).
+         */
+        colourValues(key, templates = [...this.templates.values()].filter(t => t.visible !== false)) {
+            if (!key.startsWith('expression:')) return super.colourValues(key, templates);
+            const boxes = templates.map(t => [t, this._elementOf(t.id)]).filter(([, e]) => e);
+            const results = expressionValues([...new Set(boxes.map(([, e]) => e))], key.slice(11));
+            const { labels, labelOf } = resultBands(results.values());
+            const values = new Map(labels.map(l => [l, []]));
+            for (const [t, e] of boxes) if (results.has(e.id)) values.get(labelOf(results.get(e.id))).push(t);
+            return values;
+        }
+
+        /** A formula over properties asks for the formula first. @protected */
+        askColours(key) {
+            if (key !== 'expression') return super.askColours(key);
+            const elements = [...new Set([...this.templates.values()].map(t => this._elementOf(t.id)).filter(Boolean))];
+            const names = [...propertyParams(elements)].map(([id, name]) => (id === name ? id : `${id} (${name})`));
+            new FormDialog({
+                title: 'Colour by a formula',
+                description: `A number from each element's properties, e.g. Cost * Risk, or Cost > 10000 ? 1 : 0. Properties: ${names.join(', ')}. `
+                    + `Arithmetic, comparisons, a ? b : c, and ${Object.keys(KERNEL_FUNCTIONS).join(', ')}. `
+                    + 'An element without a number for a property the formula uses is left as it is.',
+                fields: [{ key: 'formula', label: 'Formula', type: 'text', value: this._lastFormula ?? '' }],
+                submitLabel: 'Next',
+                idPrefix: 'colour-formula-',
+                document: this.document ?? globalThis.document,
+                validate: ({ formula }) => {
+                    try { expressionValues(elements, formula); return null; } catch (e) { return e.message; }
+                },
+                onApply: ({ formula }) => {
+                    this._lastFormula = formula;
+                    super.askColours(`expression:${formula}`);
+                },
+            }).open();
+        }
+
+        /** An element's value for a colourKeys key (notes and pictures have none). */
+        colourValue(template, key) {
+            const element = this._elementOf(template.id);
+            if (!element) return undefined;
+            if (key === 'layer') return typeTitle(treeLayerOf(element));
+            if (key === 'type') return typeTitle(element.type ?? '');
+            if (key === 'specialization') return element.specialization;
+            if (key === 'change') return elementChange(this.model, element.id) ?? undefined;
+            if (key.startsWith('property:')) {
+                const p = (element.properties ?? []).find(q => (q.name ?? q.key) === key.slice(9));
+                return p?.value === undefined || p?.value === null ? undefined : String(p.value);
+            }
+            return super.colourValue(template, key);
+        }
+
+        /** The kind legend: each element type on the view, in the colour of its first box. */
+        kindLegendEntries() {
+            const types = new Map();
+            for (const t of this.templates.values()) {
+                const element = this._elementOf(t.id);
+                if (!element || types.has(element.type)) continue;
+                types.set(element.type, t.fillColor);
+            }
+            return [...types].map(([type, fillColor]) => ({ label: typeTitle(type), fillColor }));
+        }
+
+        /**
+         * A legend is notes (stickies on a canvas) on the view: a frame holding a
+         * note per entry (DiagramEditor.legendLayout), grouped, as one undo step.
+         * Placed in order, so the frame stacks behind its entries.
+         */
+        legendCommand(entries, title) {
+            if (!entries.length) return null;
+            const kind = this.view.constructor.BOX_KINDS.find(k => k.key === 'note') ?? this.view.constructor.BOX_KINDS.find(k => k.key === 'sticky');
+            if (!kind) return null;
+            const { frame, items } = DiagramEditor.legendLayout(entries.length, this.legendPosition());
+            const stamp = Date.now().toString(36);
+            const box = (i, name, { x, y, width, height }, appearance) => {
+                const inst = new ViewObjectInstance(kind.content(`legend-${stamp}-${i}`, { name }), x, y);
+                inst.size = { width, height };
+                inst.appearance = { ...kind.appearance, ...appearance };
+                return inst;
+            };
+            const boxes = [
+                box(0, title, frame, { fillColor: '#ffffff', ...DiagramEditor.LEGEND_TITLE_STYLE }),
+                ...entries.map((e, i) => box(i + 1, e.label, items[i], { fillColor: e.fillColor })),
+            ];
+            return new CompositeCommand(`Add legend: ${title}`, [
+                new PlaceItemsCommand(this.view, { elementInstances: boxes }, { label: `Add legend: ${title}` }),
+                new GroupCommand(this.arrangement, boxes.map(b => b.id), { name: title }),
+            ]);
+        }
+
+        /** Likely duplicates can be merged (Merge…: choose the one to keep). */
+        findingActions(finding) {
+            return finding.code === 'possible-duplicate' ? [{ label: 'Merge…', action: () => this.askMerge(finding.ids) }] : [];
+        }
+
+        /**
+         * What differs among some elements, for the merge to choose: their
+         * documentation (when two or more have some, and it differs), each property
+         * with different values, and the specialization.
+         * @returns {{documentation: Array<[string, string]>, properties: Map<string, Array<[string, string]>>, specializations: string[]}}
+         *   each choice [value, label]
+         */
+        mergeChoices(elements) {
+            const name = (e) => e.name || e.id;
+            const documented = elements.filter(e => (e.documentation ?? '').trim());
+            const texts = [...new Set(documented.map(e => e.documentation.trim()))];
+            const properties = new Map();
+            for (const e of elements) {
+                for (const p of e.properties ?? []) {
+                    const key = p.name ?? p.key;
+                    if (!properties.has(key)) properties.set(key, new Map());
+                    const values = properties.get(key);
+                    values.set(String(p.value ?? ''), [...(values.get(String(p.value ?? '')) ?? []), name(e)]);
+                }
+            }
+            const specializations = [...new Set(elements.map(e => e.specialization).filter(Boolean))];
+            return {
+                documentation: texts.length > 1 ? texts.map(t => [t, `${documented.filter(e => e.documentation.trim() === t).map(name).join(', ')}: ${t.length > 50 ? `${t.slice(0, 50)}…` : t}`]) : [],
+                properties: new Map([...properties].filter(([, values]) => values.size > 1)
+                    .map(([key, values]) => [key, [...values].map(([value, from]) => [value, `${value || '(empty)'} (${from.join(', ')})`])])),
+                specializations: specializations.length > 1 ? specializations : [],
+            };
+        }
+
+        /**
+         * Some elements side by side, for a merge (MergeCompareDialog's rows): their
+         * names, types, specializations, documentation, each property, their
+         * relationships (kind, direction, the element at the other end) and the
+         * views they are on.
+         */
+        mergeComparison(elements) {
+            const nameOf = (id) => this.model.getElement(id)?.name || id;
+            const valueOf = (e, key) => (e.properties ?? []).filter(p => (p.name ?? p.key) === key).map(p => p.value ?? '').join(', ');
+            const keys = [...new Set(elements.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))];
+            const lines = (e) => {
+                const { incoming, outgoing } = this.model.relationshipsFor(e.id);
+                return [
+                    ...outgoing.map(r => `${r.kind} → ${nameOf(r.target)}`),
+                    ...incoming.map(r => `${r.kind} ← ${nameOf(r.source)}`),
+                ].sort().join('\n');
+            };
+            const views = (e) => this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).map(v => v.name || v.id).join('\n');
+            return [
+                { label: 'Name', values: elements.map(e => e.name ?? '') },
+                { label: 'Type', values: elements.map(e => e.type ?? '') },
+                ...(elements.some(e => e.specialization) ? [{ label: 'Specialization', values: elements.map(e => e.specialization ?? '') }] : []),
+                { label: 'Documentation', values: elements.map(e => (e.documentation ?? '').trim()) },
+                ...keys.map(key => ({ label: `${key} (property)`, values: elements.map(e => valueOf(e, key)) })),
+                { label: 'Relationships', values: elements.map(lines) },
+                { label: 'Views', values: elements.map(views) },
+            ];
+        }
+
+        /**
+         * Merge some elements into one, one undo step (ArchimateModel#mergeCommand).
+         * Their relationships always come together. When they differ in anything
+         * but the views they are on, they are shown side by side
+         * (MergeCompareDialog) to choose which is kept and, where they differ, the
+         * documentation (one, or all joined), each property's value, the
+         * specialization; OK merges, Cancel leaves them. Alike, the first is kept
+         * without asking. Resolves to the merge's command, or null.
+         */
+        async askMerge(elementIds) {
+            const elements = elementIds.map(id => this.model.getElement(id)).filter(Boolean);
+            if (elements.length < 2) return null;
+            const used = (e) => {
+                const views = this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).length;
+                const { incoming, outgoing } = this.model.relationshipsFor(e.id);
+                return `${views} view${views === 1 ? '' : 's'}, ${incoming.length + outgoing.length} relationship${incoming.length + outgoing.length === 1 ? '' : 's'}`;
+            };
+            const ids = elements.map(e => e.id);
+            const rows = this.mergeComparison(elements);
+            const compare = new MergeCompareDialog({
+                title: `Merge ${elements.length} elements`,
+                description: 'The one kept takes the others\' relationships, their boxes on every view, and the properties it lacks; the others go. Where they differ (marked ≠), choose.',
+                columns: elements.map(e => `${e.name || e.id} (${used(e)})`),
+                rows,
+                document: this.document ?? globalThis.document,
+            });
+            // Views apart (their boxes all come to the kept one), nothing to choose: the first is kept.
+            if (!rows.some(row => row.label !== 'Views' && MergeCompareDialog.differs(row))) return this.mergeElements(ids[0], ids.slice(1));
+            const { documentation, properties, specializations } = this.mergeChoices(elements);
+            const JOINED = '\u0000joined';
+            const propertyKeys = [...properties.keys()];
+            compare.fields = [
+                { key: 'keep', label: 'Keep', type: 'select', value: ids[0], choices: elements.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
+                ...(documentation.length ? [{ key: 'documentation', label: 'Documentation', type: 'select', value: JOINED, choices: [[JOINED, 'All of them, joined'], ...documentation] }] : []),
+                ...(specializations.length ? [{ key: 'specialization', label: 'Specialization', type: 'select', value: specializations[0], choices: specializations.map(s => [s, s]) }] : []),
+                ...propertyKeys.map((key, i) => ({ key: `property-${i}`, label: key, type: 'select', value: properties.get(key)[0][0], choices: properties.get(key) })),
+            ];
+            const values = await compare.ask();
+            if (!values) return null;
+            const { keep } = values;
+            const joined = () => [...new Set(elements.map(e => (e.documentation ?? '').trim()).filter(Boolean))].join('\n\n');
+            return this.mergeElements(keep, ids.filter(id => id !== keep), {
+                ...(documentation.length && { documentation: values.documentation === JOINED ? joined() : values.documentation }),
+                ...(specializations.length && { specialization: values.specialization }),
+                properties: Object.fromEntries(propertyKeys.map((key, i) => [key, values[`property-${i}`]])),
+            });
+        }
+
+        /** Merge elements into one (`keepId`), one undo step; the canvas and tree redraw. `choices`: MergeElementsCommand's. */
+        mergeElements(keepId, otherIds, choices = {}) {
+            const cmd = this.model.mergeCommand(keepId, otherIds, choices);
+            this._executeCommand(cmd);
+            return cmd;
+        }
+
+        /** The checks use this editor's ArchiMate version. */
+        checkerOptions() {
+            return { version: this.version };
+        }
+
+        /** An element is shown by selecting its first occurrence on this view. */
+        revealFinding(finding) {
+            if (finding.kind !== 'element') return super.revealFinding(finding);
+            const instance = this.view.elementInstancesFor(finding.ids[0])[0];
+            if (instance && this.templates.has(instance.id)) {
+                this.selectTemplate(instance.id);
+                this.render();
+            }
+        }
+
+        /**
+         * Bring the editor's templates and lines in line with the view, reusing
+         * the template or line of each instance still there.
+         */
+        syncFromView() {
+            const { view, model } = this;
+            const templates = new Map();
+            for (const inst of view.elementInstances.values()) {
+                if (!inst.shownIn(view) || !inst.resolve(model)) continue;
+                const existing = this.templates.get(inst.id);
+                templates.set(inst.id, existing?.instance === inst ? existing
+                    : new ArchimateElementTemplate(inst, model, { nodeOptions: this.nodeOptions }));
+            }
+            for (const t of templates.values()) {
+                t.nodeOptions = this.nodeOptions;
+                // Asked afresh at every sync: a host's status is live, not part of the model.
+                t.status = this.elementStatus ? this.elementStatus(t.instance.resolve(model)) ?? null : null;
+            }
+            // The view's groups (Archi groups: model folders with bounds on this view).
+            for (const folder of view.placedFolders) {
+                const existing = this.templates.get(folder.id);
+                templates.set(folder.id, existing instanceof ViewGroupTemplate && existing.view === view ? existing : new ViewGroupTemplate(folder.id, view));
+            }
+            const edges = new Map();
+            // A line a nesting stands for, to a box nested in its source (at any depth), is not drawn unless asked (Archi's way).
+            const nestedOut = (edge) => !this.nodeOptions.showNestedLines
+                && hiddenByNesting(view, edge.relationship, templates.get(edge.sourceId).instance, templates.get(edge.targetId).instance);
+            for (const inst of view.relationshipInstances.values()) {
+                const existing = this.edges.get(inst.id);
+                const edge = existing?.instance === inst ? existing : new ArchimateEdge(inst, view);
+                if (edge.relationship && templates.has(edge.sourceId) && templates.has(edge.targetId) && !nestedOut(edge)) edges.set(inst.id, edge);
+            }
+            // Plain lines (a canvas's connections, a line from a note).
+            for (const line of view.viewConnections.values()) {
+                const existing = this.edges.get(line.id);
+                const edge = existing?.line === line ? existing : new ViewLineEdge(line);
+                if (line.visible !== false && templates.has(edge.sourceId) && templates.has(edge.targetId)) edges.set(line.id, edge);
+            }
+            // Derived relationships (⚙ Settings → Show derived): drawn between elements both on the view.
+            if (this.nodeOptions.showDerived) {
+                const shown = (elementId) => view.elementInstancesFor(elementId).find(inst => templates.has(inst.id))?.id;
+                for (const derived of DerivedRelationships.compute(model, { maxHops: 2 }).derived) {
+                    const from = shown(derived.source), to = shown(derived.target);
+                    if (from && to) edges.set(derived.id, new DerivedEdge(derived, from, to));
+                }
+            }
+            this.templates.clear();
+            for (const [id, t] of templates) this.templates.set(id, t);
+            this.edges.clear();
+            for (const [id, e] of edges) this.edges.set(id, e);
+        }
+
+        render() {
+            if (this.disposed) return;
+            this.syncFromView();
+            super.render();
+        }
+
+        /** ⚙ Settings: the notation (version, distinct shapes), then the base editor's grid and line styles. */
+        settingsMenuItems() {
+            const set = (patch) => {
+                this.nodeOptions = { ...this.nodeOptions, ...patch };
+                if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
+                else this.render();
+            };
+            const distinct = !!this.nodeOptions.useDistinctShapes;
+            const viewpoint = this.nodeOptions.viewpoint ?? 'All';
+            const mode = this.nodeOptions.viewpointMode ?? 'fade';
+            return [
+                {
+                    label: `Version: ArchiMate ${this.version}`,
+                    items: ['4', '3.2'].map(v => ({ label: `ArchiMate ${v}`, checked: v === this.version, action: () => set({ archimateVersion: v }) })),
+                },
+                { label: `Distinct shapes: ${distinct ? 'on' : 'off'}`, action: () => set({ useDistinctShapes: !distinct }) },
+                { label: `Show derived: ${this.nodeOptions.showDerived ? 'on' : 'off'}`, action: () => set({ showDerived: !this.nodeOptions.showDerived }) },
+                { label: `Lines to nested boxes: ${this.nodeOptions.showNestedLines ? 'shown' : 'hidden'}`, action: () => set({ showNestedLines: !this.nodeOptions.showNestedLines }) },
+                {
+                    label: `Viewpoint: ${viewpoint}`,
+                    items: ArchimateViewpoints.all(this.customViewpoints).map(vp => ({ label: vp.name, checked: vp.name === viewpoint, action: () => set({ viewpoint: vp.name }) })),
+                },
+                {
+                    label: `Outside the viewpoint: ${mode === 'hide' ? 'hidden' : 'faded'}`,
+                    items: [['fade', 'Faded'], ['hide', 'Hidden']].map(([m, text]) => ({ label: text, checked: m === mode, action: () => set({ viewpointMode: m }) })),
+                },
+                { separator: true },
+                { separator: true },
+                { label: 'Specializations…', action: () => this.editSpecializations() },
+                { label: 'Viewpoints…', action: () => this.editViewpoints() },
+                ...super.settingsMenuItems(),
+                ...(this.settingsManager ? [{ separator: true }, { label: 'Model settings…', action: () => showGlobalSettingsDialog(this.document ?? globalThis.document, this.settingsManager, 'default') }] : []),
+            ];
+        }
+
+        /**
+         * What the ArchiMate rules say against a relationship's line, or null
+         * (ArchimateValidator, for this ArchiMate version). Off when the view's
+         * `invalidRelationships` setting is 'off'; with 'tooltip' it is the tooltip, not drawn red.
+         */
+        edgeWarning(edge) {
+            const relationship = edge.relationship;
+            const mode = this.viewSettings().invalidRelationships ?? 'highlight';
+            if (!relationship || mode === 'off') return null;
+            const from = this.model.getElement(relationship.source), to = this.model.getElement(relationship.target);
+            if (!from || !to) return null;
+            const result = ArchimateValidator.validateRelationship(from, to, relationship.kind, this.version);
+            return result.valid ? null : { message: result.message, highlight: mode === 'highlight' };
+        }
+
+        /** Edit the specialization catalog; elements given one redraw with it. */
+        editSpecializations() {
+            return specializationCatalogDialog({ version: this.version, document: this.document ?? globalThis.document, onChange: () => this._notationChanged() }).open();
+        }
+
+        /** Edit the user's own viewpoints; they are offered (and applied) from then on. */
+        editViewpoints() {
+            return CustomViewpoints.dialog({
+                version: this.version, document: this.document ?? globalThis.document,
+                onChange: (viewpoints) => { this.customViewpoints = viewpoints; this._viewpointRule = null; this._notationChanged(); },
+            }).open();
+        }
+
+        /** The notation's catalogs changed: the host redraws (its palette too), or this editor does. @private */
+        _notationChanged() {
+            if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
+            else this.render();
+        }
+
+        /**
+         * The base editor's rules (a highlight), then the active filter's result
+         * (ElementFilterRule) and the viewpoint (ViewpointRule, from the notation options).
+         */
+        emphasisRules() {
+            const { viewpoint, viewpointMode } = this.nodeOptions;
+            const key = `${viewpoint}|${viewpointMode}|${this.version}`;
+            if (this._viewpointRule?.key !== key) {
+                this._viewpointRule = { key, rule: new ViewpointRule({ viewpoint, mode: viewpointMode, version: this.version, customViewpoints: this.customViewpoints }) };
+            }
+            return [...super.emphasisRules(), ...(this.elementFilter ? [this.elementFilter] : []), ...(this._viewpointRule.rule.viewpoint ? [this._viewpointRule.rule] : [])];
+        }
+
+        /** Dim every model element but these (a filter's result); null clears it. Redraws. */
+        setElementFilter(elementIds) {
+            this.elementFilter = elementIds ? new ElementFilterRule(elementIds) : null;
+            this.render();
+        }
+
+        /**
+         * The Element section of a shape's properties: the model element's own
+         * name, type, specialization, icon, documentation and typed properties (the same on every view;
+         * the dialog's Name above labels this occurrence only). None for a note,
+         * image or canvas box.
+         */
+        conceptFields(template) {
+            const element = this._elementOf(template.id);
+            if (!element) return [];
+            return [
+                { type: 'heading', label: 'Element (on every view)' },
+                ...elementPropertyFields(element, { version: this.version, document: this.document ?? globalThis.document }),
+            ];
+        }
+
+        /** The element's changes as one EditViewItemCommand (null when nothing changed). */
+        conceptCommand(template, values) {
+            const element = this._elementOf(template.id);
+            return element ? elementEditCommand(element, values, { instance: template.instance }) : null;
+        }
+
+        /**
+         * With several shapes selected, the Elements section: their type, their
+         * specialization when they share a type, and one property to set on all.
+         * Only when every selected shape is an element.
+         */
+        manyConceptFields(templates) {
+            const elements = this._elementsOf(templates);
+            return elements ? manyElementsFields(elements, { version: this.version }) : [];
+        }
+
+        /** The elements' changes as one step (null when nothing changed). */
+        manyConceptCommand(templates, values) {
+            const elements = this._elementsOf(templates);
+            const instances = new Map(templates.map(t => [this._elementOf(t.id), t.instance]));
+            const commands = elements ? manyElementsEditCommands(elements, values, { instanceOf: (e) => instances.get(e) }) : [];
+            return commands.length ? new CompositeCommand(`Edit ${commands.length} elements`, commands) : null;
+        }
+
+        /** The model elements the shapes show, each once; null unless every shape shows one. @private */
+        _elementsOf(templates) {
+            const elements = templates.map(t => this._elementOf(t.id));
+            return elements.every(Boolean) ? [...new Set(elements)] : null;
+        }
+
+        /**
+         * The Relationship section of a line's properties: its kind (among those
+         * the ArchiMate rules allow between its ends, and its own), documentation
+         * and typed properties. None for a plain line or a derived one.
+         */
+        edgeConceptFields(edge) {
+            const relationship = edge.relationship;
+            if (!relationship || edge.editable === false) return [];
+            const kinds = [...new Set([relationship.kind, ...this.allowedKinds(edge.sourceId, edge.targetId)].filter(Boolean))];
+            return [
+                { type: 'heading', label: 'Relationship (on every view)' },
+                { key: 'relationship.kind', label: 'Kind', type: 'select', value: relationship.kind, choices: kinds.map(k => [k, typeTitle(k)]) },
+                { key: 'relationship.documentation', label: 'Documentation', type: 'textarea', rows: 3, value: relationship.documentation ?? '' },
+                { type: 'heading', label: 'Properties' },
+                PropertyListEditor.field(relationship.properties, { key: 'relationship.properties', document: this.document ?? globalThis.document }),
+            ];
+        }
+
+        /** The relationship's changes as one EditViewItemCommand (null when nothing changed). */
+        edgeConceptCommand(edge, values) {
+            return edge.relationship ? conceptEditCommand(edge.relationship, values, { prefix: 'relationship', instance: edge.instance }) : null;
+        }
+
+        /** A new element of `type` at `point` (snapped), created in the model and shown here. One undo step. */
+        addElement(type, point) {
+            const name = typeTitle(type);
+            const id = GraphDiagram.generateNodeId(name, this.model.elements().map(e => e.id));
+            const at = this._snapToGrid(point);
+            const instance = new ElementInstance(id, at.x, at.y);
+            this._executeCommand(new AddToViewCommand(this.view, instance, { element: { id, name, type }, label: `Add ${name}` }));
+            return instance;
+        }
+
+        /**
+         * Show an element the model has at `point` (snapped), with its
+         * relationships to the elements already on the view (ShowElementCommand).
+         * One undo step. Null for an element the model lacks.
+         */
+        showElement(elementId, point) {
+            if (!this.model.getElement(elementId)) return null;
+            const at = this._snapToGrid(point);
+            const instance = new ElementInstance(elementId, at.x, at.y);
+            this._executeCommand(new ShowElementCommand(this.view, instance, { label: `Show ${this.model.getElement(elementId).name || elementId}` }));
+            this.selectTemplate(instance.id);
+            return instance;
+        }
+
+        /**
+         * A picture as an image box on this view at `point` (snapped), one undo
+         * step, selected. Null when this kind of view has no image box.
+         * @param {string} dataURL - The picture
+         */
+        addImage(dataURL, point) {
+            if (!this.view.constructor.BOX_KINDS?.some(k => k.key === 'image')) return null;
+            const box = this.view.addBox('image', this._snapToGrid(point), { iconUrl: dataURL });
+            this.render();
+            this.selectTemplate(box.id);
+            return box;
+        }
+
+        /**
+         * Add a box of a canvas palette kind ('block', 'sticky', 'image') at `point`
+         * (snapped), as the canvas menu would. One undo step.
+         */
+        addCanvasBox(kindKey, point) {
+            const item = canvasBoxMenuItems(this.view, this._snapToGrid(point), {
+                onAdded: (box) => { this.render(); this.selectTemplate(box.id); },
+            }).find((_, i) => this.view.constructor.BOX_KINDS[i].key === kindKey);
+            return item?.action();
+        }
+
+        /** The relationship kinds the ArchiMate rules allow from one instance's element to another's (association always). */
+        allowedKinds(sourceId, targetId) {
+            const from = this._elementOf(sourceId), to = this._elementOf(targetId);
+            if (!from || !to) return [];
+            const kinds = ArchimateValidator.allowedKinds(from, to, this.version);
+            return kinds.includes('association') ? kinds : [...kinds, 'association'];
+        }
+
+        /**
+         * Connect two elements: the kind is asked for (`chooseKind`) among those
+         * allowed, or taken from KIND_PREFERENCE. One undo step once chosen.
+         * @returns {Command|null|Promise<Command|null>}
+         */
+        connect(sourceId, targetId) {
+            if (sourceId === targetId) return null;
+            // A box or note at either end: a plain line (the view's rule), one undo step.
+            if (!this.view.linesAreRelationships(sourceId, targetId)) {
+                if (!this.templates.has(sourceId) || !this.templates.has(targetId)) return null;
+                const line = this.view.connect(sourceId, targetId);
+                this.render();
+                return line;
+            }
+            const kinds = this.allowedKinds(sourceId, targetId);
+            if (!kinds.length) return null;
+            const run = (kind) => (kind && kinds.includes(kind) ? this._connectAs(sourceId, targetId, kind) : null);
+            if (!this.chooseKind) return run(KIND_PREFERENCE.find(k => kinds.includes(k)) ?? kinds[0]);
+            const chosen = this.chooseKind(kinds, this._elementOf(sourceId), this._elementOf(targetId));
+            return chosen && typeof chosen.then === 'function' ? chosen.then(run) : run(chosen);
+        }
+
+        /** @private */
+        _connectAs(sourceId, targetId, kind) {
+            const cmd = this.connectCommand(sourceId, targetId, kind);
+            if (cmd) this._executeCommand(cmd);
+            return cmd;
+        }
+
+        /** The model element an instance on this canvas shows (notes and images have none). @private */
+        /** A box of a model element links to the element's page in a report. */
+        reportRef(template) {
+            const element = this._elementOf(template.id);
+            return element ? { kind: 'element', id: element.id } : null;
+        }
+
+        _elementOf(instanceId) {
+            const inst = this.templates.get(instanceId)?.instance;
+            return inst ? this.model.getElement(inst.elementId) : undefined;
+        }
+
+        /** A new relationship of `kind` between two elements' instances, created in the model and shown here. */
+        connectCommand(sourceId, targetId, kind = KIND_PREFERENCE.find(k => this.allowedKinds(sourceId, targetId).includes(k))) {
+            const source = this.templates.get(sourceId)?.instance;
+            const target = this.templates.get(targetId)?.instance;
+            const from = this._elementOf(sourceId);
+            const to = this._elementOf(targetId);
+            // Notes and images are not model elements: they take no relationships.
+            if (!from || !to || !kind) return null;
+            const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
+            const instance = new RelationshipInstance(id, null, source.id, target.id);
+            return new AddRelationshipToViewCommand(this.view, instance, {
+                relationship: { id, source: from.id, target: to.id, kind },
+                label: `Add ${kind}`,
+            });
+        }
+
+        /**
+         * Deleting takes a box off the view (its lines go with it, see the base's
+         * deleteTemplatesCommand); the model keeps its element. A group goes off the
+         * view and what it held stays; the model keeps its folder.
+         */
+        /** Copies are ArchiMate views' items: they paste into ArchiMate views (any model), not the template editor. */
+        static clipboardKind = 'archimate';
+
+        /**
+         * A copy of these boxes: the view's JSON of them (ArchimateView#toJSON),
+         * with the lines and relationships between them and the elements they show.
+         * Groups are not copied (they are model folders).
+         */
+        copyPayload(ids) {
+            const boxes = ids.filter(id => this.view.getElementInstance(id));
+            return boxes.length ? this.view.toJSON({ itemIds: boxes }) : null;
+        }
+
+        /** Paste: new boxes for the same elements (added to the model when it lacks them), one undo step. */
+        pasteCommand(payload, options) {
+            return this.view.pasteCommand(payload, options);
+        }
+
+        /** Deleting is off the view: the model keeps what it showed. */
+        deleteLabel(templateIds) {
+            return `${super.deleteLabel(templateIds)} from view`;
+        }
+
+        removeTemplateCommand(templateId) {
+            return this.templates.get(templateId) instanceof ViewGroupTemplate
+                ? new RemoveGroupFromViewCommand(this.view, templateId)
+                : new DeleteElementCommand(this.view, templateId);
+        }
+
+        /**
+         * What moves with a shape: for a group, the elements drawn in it (its folder's),
+         * the notes and pictures Archi drew in it, and the groups inside it; for a box (a canvas block), the boxes Archi drew inside it.
+         */
+        containedIn(templateId) {
+            const template = this.templates.get(templateId);
+            const view = this.view;
+            if (template instanceof ViewGroupTemplate) {
+                const inner = [];
+                for (const t of this.templates.values()) {
+                    if (t instanceof ViewGroupTemplate) {
+                        if (t.id !== templateId && view.placedFolders.find(f => f.id === t.id)?.parentId === templateId) inner.push(t.id);
+                    } else if (t.instance?.archi?.parent === templateId
+                        || (t.instance?.elementId && view.placedFolderOf(t.instance.elementId) === templateId)) {
+                        inner.push(t.id);
+                    }
+                }
+                return inner;
+            }
+            const visualId = template?.instance?.visualId;
+            if (!visualId) return [];
+            return [...this.templates.values()].filter(t => t.instance?.nestedIn === visualId).map(t => t.id);
+        }
+
+        // ===== Nesting =====
+
+        /** The box this one is drawn inside: an element's box, or a canvas block (a group holds by folder, not here). */
+        parentOf(templateId) {
+            const visualId = this.templates.get(templateId)?.instance?.nestedIn;
+            if (!visualId) return null;
+            const parent = [...this.templates.values()].find(t => t.instance?.visualId === visualId);
+            return parent?.id ?? null;
+        }
+
+        /**
+         * An element's parts on this view: the elements it is composed of or
+         * aggregates (its composition and aggregation relationships' targets),
+         * each by its first box here.
+         */
+        partsOf(templateId) {
+            const element = this._elementOf(templateId);
+            if (!element) return [];
+            const parts = this.model.relationships()
+                .filter(r => r.source === element.id && r.target !== element.id && (r.kind === 'composition' || r.kind === 'aggregation'))
+                .map(r => this.view.elementInstancesFor(r.target)[0]?.id)
+                .filter(id => id && this.templates.has(id) && this.canHold(templateId, id));
+            return [...new Set(parts)];
+        }
+
+        /** The "by kind" layout puts an element's box in its layer's row (notes and images in their own). */
+        layoutCategory(template) {
+            const element = this._elementOf(template.id);
+            return element ? treeLayerOf(element) : 'other';
+        }
+
+        /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
+        canHold(parentId, childId) {
+            const parent = this.templates.get(parentId), child = this.templates.get(childId);
+            if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
+            return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
+        }
+
+        /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
+        nestsOnDrop(parentId, childId) {
+            if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
+            return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
+        }
+
+        nestCommand(childId, parentId) {
+            const child = this.templates.get(childId)?.instance;
+            if (!child) return null;
+            return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
+        }
+
+        /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
+        nested(changes) {
+            let chain = Promise.resolve();
+            for (const { childId, parentId } of changes) {
+                chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
+            }
+            return chain;
+        }
+
+        /**
+         * The kinds a nesting can stand for, from parent to child, as Archi offers
+         * them: those of NESTING_KINDS the rules allow. None when the two already
+         * have such a relationship.
+         */
+        nestingKinds(parentId, childId) {
+            const from = this._elementOf(parentId), to = this._elementOf(childId);
+            if (!from || !to || from === to) return [];
+            if (nestingRelationships(this.model, from.id, to.id).length) return [];
+            const allowed = this.allowedKinds(parentId, childId);
+            return NESTING_KINDS.filter(k => allowed.includes(k));
+        }
+
+        /**
+         * Ask which relationship a nesting stands for (`chooseKind`, with the
+         * reason 'nesting'; none chosen adds none) and add it to the model, drawn
+         * on no view: the nesting shows it. One undo step. Without `chooseKind`, nothing is added.
+         * @returns {Promise<Command|null>}
+         */
+        async offerNestingRelationship(parentId, childId) {
+            const kinds = this.nestingKinds(parentId, childId);
+            if (!kinds.length || !this.chooseKind) return null;
+            const from = this._elementOf(parentId), to = this._elementOf(childId);
+            const kind = await this.chooseKind(kinds, from, to, { reason: 'nesting' });
+            if (!kind || !kinds.includes(kind)) return null;
+            const cmd = this.nestingRelationshipCommand(parentId, childId, kind);
+            this._executeCommand(cmd);
+            return cmd;
+        }
+
+        /** The relationship of `kind` a nesting stands for, from parent to child, in the model only. */
+        nestingRelationshipCommand(parentId, childId, kind) {
+            const from = this._elementOf(parentId), to = this._elementOf(childId);
+            const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
+            return new AddRelationshipCommand(this.model, { id, source: from.id, target: to.id, kind }, `Add ${kind} (nested)`);
+        }
+
+        /** Deleting a line takes it off the view: a plain line goes; a relationship stays in the model. */
+        deleteEdgeCommand(edgeId) {
+            return this.view.viewConnections.has(edgeId)
+                ? new RemoveLineCommand(this.view, edgeId)
+                : new RemoveRelationshipFromViewCommand(this.view, edgeId);
+        }
     }
 
     /**
@@ -41026,6 +41806,52 @@
         return groups.flatMap((group, i) => (i ? [{ separator: true }, ...group] : group));
     }
 
+    /**
+     * The part of pasted text that is a model in `format`: the text as it is when
+     * the format recognizes it; else, as an assistant or a page would wrap it, a
+     * fenced block (```json … ```), or the text from its first { (or [) to its
+     * last } (or ]). Null when none is.
+     * @param {ModelFileFormat} format - one that reads text
+     * @param {string} text
+     * @returns {string|null}
+     */
+    function findPayload(format, text) {
+        const candidates = [String(text ?? '').trim()];
+        for (const m of candidates[0].matchAll(/```[\w-]*[ \t]*\r?\n([\s\S]*?)```/g)) candidates.push(m[1].trim());
+        for (const [open, close] of [['{', '}'], ['[', ']']]) {
+            const from = candidates[0].indexOf(open), to = candidates[0].lastIndexOf(close);
+            if (from >= 0 && to > from) candidates.push(candidates[0].slice(from, to + 1));
+        }
+        return candidates.find(c => c && format.recognizes(c)) ?? null;
+    }
+
+    /**
+     * Import a model from pasted text rather than a file: a dialog with a text
+     * box; what is pasted may be wrapped in other text (findPayload). The new
+     * model goes to `onImport`; text with no model in it is refused in the dialog.
+     * @param {ModelFileFormat} format - one that reads text
+     * @returns {FormDialog}
+     */
+    function askPasteImport(format, { onImport, document: doc = globalThis.document } = {}) {
+        let model = null;
+        const dialog = new FormDialog({
+            title: `Paste ${format.label}`,
+            description: `Paste the ${format.label} text: a file's contents, or an answer or page that has it in it (in a \`\`\` block, say).`,
+            fields: [{ key: 'text', label: 'Text', type: 'textarea', rows: 14, value: '' }],
+            submitLabel: 'Import',
+            idPrefix: 'paste-import-',
+            document: doc,
+            validate: ({ text }) => {
+                const payload = findPayload(format, text);
+                if (!payload) return `No ${format.label} found in what is pasted`;
+                try { model = format.import(payload); return null; } catch (err) { return `It could not be read: ${err.message}`; }
+            },
+            onApply: () => onImport(model),
+        });
+        dialog.open();
+        return dialog;
+    }
+
     /**
      * Ask for a file and import it in `format`; resolves to the new model, or
      * null when no file was chosen or it could not be read (reported).
@@ -45826,9 +46652,10 @@
      * @param {(element) => void} host.editProperties
      * @param {(view, instanceId) => void} host.showIn - Open `view` with that box selected
      * @param {(element) => void} [host.addToView] - Show it on `view` (offered when it is not there)
+     * @param {(element) => void} [host.deleteFromModel] - Delete it from the model, after saying where it is used
      * @returns {Array<Object>} menu items
      */
-    function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null }) {
+    function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null, deleteFromModel = null }) {
         const placed = model.views()
             .map(v => ({ view: v, instance: v.elementInstancesFor?.(element.id)?.[0] }))
             .filter(({ instance }) => instance);
@@ -45843,6 +46670,7 @@
                 : { label: 'Show in View (on none)', disabled: true, action: () => {} },
             ...(addToView && view && !onThisView ? [{ label: `Add to "${view.name || 'this view'}"`, action: () => addToView(element) }] : []),
             { label: 'Generate View For This', action: () => model.generateView([element.id]) },
+            ...(deleteFromModel ? [{ separator: true }, { label: '🗑 Delete from model…', danger: true, action: () => deleteFromModel(element) }] : []),
         ];
     }
 
@@ -55256,6 +56084,8 @@ ${theirs}` : theirs;
          * @param {string} [options.title]
          * @param {number} [options.chartHeight] a chart's height (360)
          * @param {boolean} [options.fitHeight] size the container to what is drawn (true)
+         * @param {function|Intl.NumberFormat|object} [options.format] how numbers show: for every column, or
+         *   per column ({ Amount: Intl.NumberFormat }); copies keep the raw numbers
          * @returns {TableView|null} the table's state, for the host to read or change
          */
         resultView(rows, options = {}) {
@@ -55295,7 +56125,8 @@ ${theirs}` : theirs;
          * the axes. The container's height follows the grid, as resultView's does.
          * @param {Array<object>} rows
          * @param {object} [options] rowAxis, columnAxis, measures, columns (hints, with the rollup column's),
-         *   dimensions, onDrill, menus, title, nullText, fitHeight
+         *   dimensions, onDrill, menus, title, nullText, fitHeight, format (how numbers show, per measure or for
+         *   all: cells, totals and the traffic lights' cut-offs; the copy keeps the raw numbers)
          * @returns {PivotView|null} the grid's state, for the host to read or change
          */
         pivotView(rows, options = {}) {
@@ -57999,9 +58830,20 @@ th { color: #555; font-weight: 500; }
 
         /** Import ▸: each format that only reads (another tool's export), opened as a new model. */
         importItems() {
-            return modelFileMenuItems(this.fileFormats().filter(f => f.exports === false), {
-                model: () => this.model, only: 'import', onImport: (model) => this.onImported(model), document: () => this.document,
-            });
+            return [
+                ...modelFileMenuItems(this.fileFormats().filter(f => f.exports === false), {
+                    model: () => this.model, only: 'import', onImport: (model) => this.onImported(model), document: () => this.document,
+                }),
+                ...this.pasteItems(),
+            ];
+        }
+
+        /** Paste …: a model in each of its text formats from pasted text (an assistant's answer, say), as Open… would bring it. */
+        pasteItems() {
+            return this.fileFormats().filter(f => f.imports && !f.readsBytes).map(format => ({
+                label: `From pasted text (${format.label})…`,
+                action: () => askPasteImport(format, { onImport: (model) => this.onImported(model), document: this.document ?? globalThis.document }),
+            }));
         }
 
         /**
@@ -59327,6 +60169,8 @@ th { color: #555; font-weight: 500; }
             if (previous) {
                 this.editor.showGrid = previous.showGrid;
                 this.editor.gridSize = previous.gridSize;
+                this.editor.showExportArea = previous.showExportArea;
+                this.editor.exportOptions = previous.exportOptions;
             }
             this.editor.initPaletteForDiagramType(palette, model.templateType);
             this.menuBar?.dispose();
@@ -59975,6 +60819,8 @@ th { color: #555; font-weight: 500; }
             if (previous) {
                 this.editor.showGrid = previous.showGrid;
                 this.editor.gridSize = previous.gridSize;
+                this.editor.showExportArea = previous.showExportArea;
+                this.editor.exportOptions = previous.exportOptions;
             }
 
             // A canvas's palette is Archi's canvas palette; another view's, ArchiMate's element types.
@@ -60073,6 +60919,7 @@ th { color: #555; font-weight: 500; }
                     this.editor?.selectTemplate(instanceId);
                 },
                 addToView: (el) => this.editor?.showElement(el.id, this.editor.visibleCentre()),
+                deleteFromModel: (el) => this.editor?.askDeleteFromModel([el.id]),
             });
         }
 
@@ -60178,6 +61025,9 @@ th { color: #555; font-weight: 500; }
     exports.CAMERA_MODE = CAMERA_MODE;
     exports.CANVAS_BOX_KINDS = CANVAS_BOX_KINDS;
     exports.CANVAS_BOX_MIME = CANVAS_BOX_MIME;
+    exports.CHANGE_COLOURS = CHANGE_COLOURS;
+    exports.CHANGE_MAKERS = CHANGE_MAKERS;
+    exports.CHANGE_WORDS = CHANGE_WORDS;
     exports.CHART_CATALOG = CHART_CATALOG;
     exports.COLOR_MODE = COLOR_MODE;
     exports.COORD_SYSTEM = COORD_SYSTEM;
@@ -60228,6 +61078,7 @@ th { color: #555; font-weight: 500; }
     exports.DataStoreTemplate = DataStoreTemplate;
     exports.DataType = DataType;
     exports.DeleteEdgeCommand = DeleteEdgeCommand;
+    exports.DeleteFromModelCommand = DeleteFromModelCommand;
     exports.DeleteWaypointCommand = DeleteWaypointCommand;
     exports.DerivedRelationships = DerivedRelationships;
     exports.DetailPart = DetailPart;
@@ -60446,6 +61297,8 @@ th { color: #555; font-weight: 500; }
     exports.ZipArchive = ZipArchive;
     exports.archiElementType = archiElementType;
     exports.arrangeMenuItems = arrangeMenuItems;
+    exports.askDeleteFromModel = askDeleteFromModel;
+    exports.askPasteImport = askPasteImport;
     exports.buildAnalysisData = buildAnalysisData;
     exports.buildAnalysisPanel = buildAnalysisPanel;
     exports.buildModelTreePanel = buildModelTreePanel;
@@ -60454,31 +61307,38 @@ th { color: #555; font-weight: 500; }
     exports.canvasBoxKind = canvasBoxKind;
     exports.canvasBoxMenuItems = canvasBoxMenuItems;
     exports.canvasTemplate = canvasTemplate;
+    exports.changeAction = changeAction;
     exports.chartRegistry = chartRegistry;
     exports.closePart = closePart;
     exports.coerceFieldValue = coerceFieldValue;
     exports.copyImage = copyImage;
+    exports.copyPngBlob = copyPngBlob;
     exports.createDataWindow = createDataWindow;
     exports.createLayout = createLayout;
     exports.defineWorkspace = defineWorkspace;
+    exports.deleteFromModelMessage = deleteFromModelMessage;
     exports.derivedRefreshPlan = derivedRefreshPlan;
     exports.diagramRegistry = diagramRegistry;
     exports.downloadBlob = downloadBlob;
     exports.downloadPng = downloadPng;
     exports.downloadSvg = downloadSvg;
+    exports.downloadSvgMarkup = downloadSvgMarkup;
     exports.drawGlyph = drawGlyph;
     exports.duplicateGroups = duplicateGroups;
     exports.duplicateKey = duplicateKey;
     exports.ebnfAstToDiagram = ebnfAstToDiagram;
     exports.el = el;
+    exports.elementChange = elementChange;
     exports.elementTypeChoices = elementTypeChoices;
     exports.emptyWorkArea = emptyWorkArea;
     exports.ensureStyles = ensureStyles;
     exports.exportElementsCSV = exportElementsCSV;
     exports.exportModelCSV = exportModelCSV;
     exports.exportRelationshipsCSV = exportRelationshipsCSV;
+    exports.expressionValues = expressionValues;
     exports.findDrawable = findDrawable;
     exports.findPart = findPart;
+    exports.findPayload = findPayload;
     exports.focusPart = focusPart;
     exports.frag = frag;
     exports.fromArchimateView = fromArchimateView;
@@ -60512,12 +61372,16 @@ th { color: #555; font-weight: 500; }
     exports.parseExchangeModel = parseExchangeModel;
     exports.pickFile = pickFile;
     exports.prepareSvgMarkup = prepareSvgMarkup;
+    exports.propertyParams = propertyParams;
     exports.propertyRowsFor = propertyRowsFor;
     exports.readInheritableFields = readInheritableFields;
     exports.registerBuiltinParts = registerBuiltinParts;
+    exports.relationshipChange = relationshipChange;
     exports.render = render;
     exports.reorderedZ = reorderedZ;
     exports.resolveGroup = resolveGroup;
+    exports.resultBands = resultBands;
+    exports.sequentialColours = sequentialColours;
     exports.serializeSvg = serializeSvg;
     exports.settingsManager = settingsManager;
     exports.showDiagramPropertiesDialog = showDiagramPropertiesDialog;
@@ -60526,6 +61390,7 @@ th { color: #555; font-weight: 500; }
     exports.specializationCatalogDialog = specializationCatalogDialog;
     exports.stackingOrder = stackingOrder;
     exports.strongerEmphasis = strongerEmphasis;
+    exports.svgMarkupToPngBlob = svgMarkupToPngBlob;
     exports.toArchiExport = toArchiExport;
     exports.toArchiFile = toArchiFile;
     exports.toArchimateModel = toArchimateModel;