@peter.prib/renderengine 0.5.0 → 0.8.0

package/src/workspace/dom.js

@@ -20,11 +20,20 @@
  *     on:       { click: fn },            // addEventListener
  *     children: [spec | Node | string],   // strings become text nodes
  *     ref:      (element) => {},          // capture the node without querySelector
+ *     ns:       SVG_NS,                   // the element's namespace (see below)
  *   }
  *
  * A bare string spec produces a text node, so `children: ['plain text']` works.
+ *
+ * An `svg` spec, and everything inside it, is built in the SVG namespace
+ * (`createElementNS`) — so a drawing or an icon is a spec too, never parsed
+ * markup — until a `foreignObject`, whose children are HTML again. `ns` sets
+ * a namespace explicitly (a `path` spec built on its own, to append to an
+ * existing <svg>).
  */
-export function el(spec, doc = document) {
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+
+export function el(spec, doc = document, ns = null) {
     if (spec == null) return doc.createTextNode('');
     if (typeof spec === 'string' || typeof spec === 'number') return doc.createTextNode(String(spec));
     // Duck-typed rather than `instanceof Node`: `Node` is a browser global, so
@@ -32,11 +41,15 @@ export function el(spec, doc = document) {
     // substituted document. A spec object never carries either of these.
     if (typeof spec.nodeType === 'number' || typeof spec.appendChild === 'function') return spec;
 
-    const node = doc.createElement(spec.tag ?? 'div');
+    const tag = spec.tag ?? 'div';
+    const space = spec.ns ?? (tag === 'svg' ? SVG_NS : ns);
+    const node = space ? doc.createElementNS(space, tag) : doc.createElement(tag);
 
     if (spec.cls) {
-        const classes = Array.isArray(spec.cls) ? spec.cls : [spec.cls];
-        node.className = classes.filter(Boolean).join(' ');
+        const classes = (Array.isArray(spec.cls) ? spec.cls : [spec.cls]).filter(Boolean).join(' ');
+        // An SVG element's className is an SVGAnimatedString, not a string.
+        if (space) node.setAttribute('class', classes);
+        else node.className = classes;
     }
     if (spec.text != null) node.textContent = String(spec.text);
 
@@ -55,8 +68,9 @@ export function el(spec, doc = document) {
     for (const [event, handler] of Object.entries(spec.on ?? {})) {
         if (typeof handler === 'function') node.addEventListener(event, handler);
     }
+    const childSpace = space && tag !== 'foreignObject' ? space : null;
     for (const child of spec.children ?? []) {
-        node.appendChild(el(child, doc));
+        node.appendChild(el(child, doc, childSpace));
     }
 
     spec.ref?.(node);
@@ -81,40 +95,40 @@ export function render(host, specs, doc = document) {
 function cssProp(key) {
     return key.startsWith('--') ? key : key.replace(/[A-Z]/g, c => `-${c.toLowerCase()}`);
 }
-
-const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
-const escapeHtml = (s) => String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
-
-/**
- * The same spec as el(), written out as HTML text: for a page that is saved
- * rather than shown (a report). Text and attribute values are escaped; `on`
- * and `ref` have no meaning in text and are left out. `script` is the one
- * extra field: the trusted contents of a <script> or <style> (not escaped,
- * but `</` is, so it cannot close its element early).
- */
-export function toHtml(spec) {
-    if (spec == null) return '';
-    if (typeof spec === 'string' || typeof spec === 'number') return escapeHtml(spec);
-    if (Array.isArray(spec)) return spec.map(toHtml).join('');
-    const tag = spec.tag ?? 'div';
-    const attrs = [];
-    if (spec.cls) {
-        const classes = (Array.isArray(spec.cls) ? spec.cls : [spec.cls]).filter(Boolean);
-        if (classes.length) attrs.push(['class', classes.join(' ')]);
-    }
-    for (const [k, v] of Object.entries(spec.attrs ?? {})) {
-        if (v == null || v === false) continue;
-        attrs.push([k, v === true ? '' : String(v)]);
-    }
-    for (const [k, v] of Object.entries(spec.dataset ?? {})) {
-        if (v != null) attrs.push([`data-${cssProp(k)}`, String(v)]);
-    }
-    const style = Object.entries(spec.style ?? {}).filter(([, v]) => v != null).map(([k, v]) => `${cssProp(k)}: ${v}`).join('; ');
-    if (style) attrs.push(['style', style]);
-    const open = `<${tag}${attrs.map(([k, v]) => ` ${k}="${escapeHtml(v)}"`).join('')}>`;
-    if (VOID_TAGS.has(tag)) return open;
-    const inner = spec.script != null
-        ? String(spec.script).replace(/<\//g, '<\\/')
-        : (spec.text != null ? escapeHtml(spec.text) : '') + (spec.children ?? []).map(toHtml).join('');
-    return `${open}${inner}</${tag}>`;
-}
+
+const VOID_TAGS = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
+const escapeHtml = (s) => String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+
+/**
+ * The same spec as el(), written out as HTML text: for a page that is saved
+ * rather than shown (a report). Text and attribute values are escaped; `on`
+ * and `ref` have no meaning in text and are left out. `script` is the one
+ * extra field: the trusted contents of a <script> or <style> (not escaped,
+ * but `</` is, so it cannot close its element early).
+ */
+export function toHtml(spec) {
+    if (spec == null) return '';
+    if (typeof spec === 'string' || typeof spec === 'number') return escapeHtml(spec);
+    if (Array.isArray(spec)) return spec.map(toHtml).join('');
+    const tag = spec.tag ?? 'div';
+    const attrs = [];
+    if (spec.cls) {
+        const classes = (Array.isArray(spec.cls) ? spec.cls : [spec.cls]).filter(Boolean);
+        if (classes.length) attrs.push(['class', classes.join(' ')]);
+    }
+    for (const [k, v] of Object.entries(spec.attrs ?? {})) {
+        if (v == null || v === false) continue;
+        attrs.push([k, v === true ? '' : String(v)]);
+    }
+    for (const [k, v] of Object.entries(spec.dataset ?? {})) {
+        if (v != null) attrs.push([`data-${cssProp(k)}`, String(v)]);
+    }
+    const style = Object.entries(spec.style ?? {}).filter(([, v]) => v != null).map(([k, v]) => `${cssProp(k)}: ${v}`).join('; ');
+    if (style) attrs.push(['style', style]);
+    const open = `<${tag}${attrs.map(([k, v]) => ` ${k}="${escapeHtml(v)}"`).join('')}>`;
+    if (VOID_TAGS.has(tag)) return open;
+    const inner = spec.script != null
+        ? String(spec.script).replace(/<\//g, '<\\/')
+        : (spec.text != null ? escapeHtml(spec.text) : '') + (spec.children ?? []).map(toHtml).join('');
+    return `${open}${inner}</${tag}>`;
+}

package/src/workspace/index.js

@@ -42,7 +42,7 @@ export {
     ContextBus, Part, PartRegistry, PartFactory,
     ContentPart, HtmlPart, ListPart, DetailPart, AdapterPart, ModelsPart,
 };
-export { el, frag, render } from './dom.js';
+export { el, frag, render, SVG_NS } from './dom.js';
 
 // The engine's whole public API, re-exported so the workspace UMD bundle is a
 // superset of the main one: a page that loads renderengine-workspace.umd.js

package/src/workspace/nav/NavEntry.js

@@ -0,0 +1,42 @@
+/**
+ * NavEntry — one entry in a NavMenu: an item, a group of items, or a section
+ * heading. Subclasses return an el() spec; the menu builds every entry from
+ * JSON (NavMenu.entry), so a host writes its navigation as data, not markup.
+ *
+ * `visible` is a boolean or a function of the menu's context (`{ role }`, …),
+ * so one definition serves every user and the menu re-renders when the
+ * context changes (NavMenu#setContext).
+ */
+export class NavEntry {
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.id]
+     * @param {string|string[]} [options.cls] - Extra class names
+     * @param {string} [options.title] - Tooltip
+     * @param {boolean|((context: Object) => boolean)} [options.visible]
+     */
+    constructor({ id = null, cls = null, title = null, visible = true } = {}) {
+        this.id = id;
+        this.cls = cls;
+        this.title = title;
+        this.visible = visible;
+    }
+
+    /** Whether the entry shows, given the menu's context. */
+    isVisible(menu) {
+        return typeof this.visible === 'function' ? !!this.visible(menu.context) : this.visible !== false;
+    }
+
+    /** @returns {Object} el() spec */
+    spec(menu) {
+        throw new Error(`${this.constructor.name} must implement spec()`);
+    }
+
+    /** The entries this one holds (a group's items); none by default. */
+    get children() { return []; }
+
+    /** Extra class names as a list, for el()'s `cls`. */
+    extraClasses() {
+        return Array.isArray(this.cls) ? this.cls : this.cls ? [this.cls] : [];
+    }
+}

package/src/workspace/nav/NavGroup.js

@@ -0,0 +1,43 @@
+import { NavEntry } from './NavEntry.js';
+
+/**
+ * NavGroup — entries under a heading that opens and closes (a `<details>`).
+ * Whether it is open is state the menu keeps (NavMenu#serialize) and reports
+ * (`onToggle`), so a host can remember it. Hidden when none of its entries
+ * shows.
+ */
+export class NavGroup extends NavEntry {
+    /**
+     * @param {Object} options
+     * @param {string} options.group - The heading's text
+     * @param {Array<Object|NavEntry>} options.items - Entries, as JSON or built
+     * @param {boolean} [options.open]
+     * @param {(json: Object) => NavEntry} entry - Builds an entry from JSON (NavMenu.entry)
+     */
+    constructor({ group, items = [], open = false, ...rest }, entry) {
+        super(rest);
+        this.label = group;
+        this.open = !!open;
+        this.items = items.map(entry);
+    }
+
+    get children() { return this.items; }
+
+    isVisible(menu) {
+        return super.isVisible(menu) && this.items.some(e => e.isVisible(menu));
+    }
+
+    spec(menu) {
+        return {
+            tag: 'details',
+            cls: ['ws-nav-group', ...this.extraClasses()],
+            attrs: { open: this.open },
+            dataset: { navId: this.id },
+            children: [
+                { tag: 'summary', cls: 'ws-nav-group-summary', text: this.label, attrs: { title: this.title } },
+                ...menu.specsOf(this.items),
+            ],
+            on: { toggle: (event) => menu.toggled(this, !!event.target.open) },
+        };
+    }
+}

package/src/workspace/nav/NavItem.js

@@ -0,0 +1,53 @@
+import { NavEntry } from './NavEntry.js';
+
+/**
+ * NavItem — a place to go or a thing to do. With `href` it is a link (the
+ * browser navigates, and the address can be opened in a new tab); without, a
+ * button. `action(event, item, menu)` runs on a click either way, and may
+ * call `event.preventDefault()` to keep a link from navigating — e.g. a
+ * modifier-click that opens the target beside the current view instead.
+ */
+export class NavItem extends NavEntry {
+    /**
+     * @param {Object} options
+     * @param {string} options.label
+     * @param {string} [options.icon] - Shown before the label, hidden from screen readers: an icon's
+     *   name in the menu's IconSet (`icons`), or text (an emoji)
+     * @param {string|((context: Object) => string|null)} [options.href] - Or a function of the menu's context (an address known later)
+     * @param {(event: Event, item: NavItem, menu: NavMenu) => void} [options.action]
+     * @param {boolean} [options.selectable] - Whether a click makes it the active item (default: true)
+     */
+    constructor({ label, icon = null, href = null, action = null, selectable = true, ...rest }) {
+        super(rest);
+        this.label = label;
+        this.icon = icon;
+        this.href = href;
+        this.action = action;
+        this.selectable = selectable;
+    }
+
+    spec(menu) {
+        const active = this.id != null && this.id === menu.activeId;
+        const href = typeof this.href === 'function' ? this.href(menu.context) : this.href;
+        return {
+            tag: href != null ? 'a' : 'button',
+            cls: ['ws-nav-item', active && 'ws-nav-item-active', ...this.extraClasses()],
+            attrs: {
+                href,
+                type: href != null ? null : 'button',
+                title: this.title,
+                'aria-current': active ? 'page' : null,
+            },
+            dataset: { navId: this.id },
+            children: [
+                this.icon != null && {
+                    tag: 'span', cls: 'ws-nav-icon', attrs: { 'aria-hidden': 'true' },
+                    ...(menu.icons?.has(this.icon) ? { children: [menu.icons.spec(this.icon, { size: 16 })] } : { text: this.icon }),
+                },
+                { tag: 'span', cls: 'ws-nav-label', text: this.label },
+            ].filter(Boolean),
+            on: { click: (event) => menu.select(this, event) },
+            ref: (n) => menu.nodes.set(this, n),
+        };
+    }
+}

package/src/workspace/nav/NavMenu.js

@@ -0,0 +1,143 @@
+import { render as renderSpecs } from '../dom.js';
+import { NavEntry } from './NavEntry.js';
+import { NavItem } from './NavItem.js';
+import { NavGroup } from './NavGroup.js';
+import { NavSection } from './NavSection.js';
+import { ICONS } from '../../icons/index.js';
+
+/**
+ * NavMenu — a vertical navigation menu (a sidebar's), written as data:
+ *
+ *   new NavMenu({
+ *       label: 'Workbench',
+ *       items: [
+ *           { section: 'Notebooks' },
+ *           { id: 'new-nb', label: '+ New Notebook', action: newNotebook, selectable: false },
+ *           { group: 'Dev Tools', id: 'devtools', items: [
+ *               { id: 'datamodel', icon: '◫', label: 'Data Model', action: (e) => open('datamodel', e) },
+ *           ] },
+ *           { id: 'admin', icon: '⚙', label: 'Admin', href: '/admin', visible: (ctx) => ctx.role === 'admin' },
+ *       ],
+ *       context: { role },
+ *   }).render(host);
+ *
+ * An entry is an item (`label`), a collapsible group (`group`, `items`) or a
+ * section heading (`section`) — NavItem, NavGroup, NavSection, built from the
+ * JSON by NavMenu.entry. The menu keeps which item is active (`activeId`,
+ * marked with `aria-current`) and which groups are open; serialize() returns
+ * both as JSON for a host to keep, and the constructor takes them back.
+ */
+export class NavMenu {
+    /**
+     * @param {Object} options
+     * @param {Array<Object|NavEntry>} options.items
+     * @param {string} [options.label] - The menu's accessible name
+     * @param {string} [options.activeId]
+     * @param {Object<string, boolean>} [options.open] - Group id → open, overriding each group's own
+     * @param {Object} [options.context] - What `visible` functions read (`{ role }`)
+     * @param {(item: NavItem, event: Event) => void} [options.onSelect] - After an item's own action
+     * @param {(groupId: string, open: boolean) => void} [options.onToggle]
+     * @param {import('../../icons/IconSet.js').IconSet} [options.icons] - Where an item's `icon` is looked up (default: the built-in ICONS)
+     * @param {Document} [options.document]
+     */
+    constructor({ items = [], label = null, activeId = null, open = {}, context = {}, onSelect = null, onToggle = null, icons = ICONS, document: doc = globalThis.document } = {}) {
+        this.entries = items.map(NavMenu.entry);
+        this.label = label;
+        this.activeId = activeId;
+        this.context = context;
+        this.onSelect = onSelect;
+        this.onToggle = onToggle;
+        this.icons = icons;
+        this.doc = doc;
+        this.host = null;
+        /** Rendered item → its element, for marking the active one in place. */
+        this.nodes = new Map();
+        for (const group of this.groups()) {
+            if (group.id != null && group.id in open) group.open = !!open[group.id];
+        }
+    }
+
+    /** An entry from its JSON: a group, a section heading or an item. */
+    static entry(json) {
+        if (json instanceof NavEntry) return json;
+        if (json == null || typeof json !== 'object') throw new Error(`NavMenu: an entry is an object, not ${json}`);
+        if ('group' in json) return new NavGroup(json, NavMenu.entry);
+        if ('section' in json) return new NavSection(json);
+        if (json.label == null) throw new Error(`NavMenu: an item needs a label (or "group", or "section")`);
+        return new NavItem(json);
+    }
+
+    /** Render into `host`, replacing what it held. */
+    render(host = this.host) {
+        if (!host) throw new Error('NavMenu: no host to render into');
+        this.host = host;
+        this.nodes = new Map();
+        renderSpecs(host, {
+            tag: 'nav',
+            cls: 'ws-nav',
+            attrs: { 'aria-label': this.label },
+            children: this.specsOf(this.entries),
+        }, this.doc);
+        return this;
+    }
+
+    /** The specs of the entries that show. */
+    specsOf(entries) {
+        return entries.filter(e => e.isVisible(this)).map(e => e.spec(this));
+    }
+
+    /** A click on `item`: its action, then (if it is selectable) it becomes active. */
+    select(item, event) {
+        item.action?.(event, item, this);
+        if (item.selectable && item.id != null) this.setActive(item.id);
+        this.onSelect?.(item, event);
+    }
+
+    /** Mark the item `id` as the active one (null: none), in place. */
+    setActive(id) {
+        this.activeId = id;
+        for (const [item, node] of this.nodes) {
+            const on = id != null && item.id === id;
+            node.classList.toggle('ws-nav-item-active', on);
+            if (on) node.setAttribute('aria-current', 'page');
+            else node.removeAttribute('aria-current');
+        }
+    }
+
+    /** A group opened or closed (by the user, or by setOpen). */
+    toggled(group, open) {
+        if (group.open === open) return;
+        group.open = open;
+        this.onToggle?.(group.id, open);
+    }
+
+    /** Change what `visible` functions read, and re-render if rendered. */
+    setContext(context) {
+        this.context = { ...this.context, ...context };
+        if (this.host) this.render();
+        return this;
+    }
+
+    /** The entry with this id, anywhere in the menu. */
+    find(id) {
+        return this.all().find(e => e.id === id) ?? null;
+    }
+
+    /** Every entry, depth first. */
+    all(entries = this.entries, out = []) {
+        for (const e of entries) { out.push(e); this.all(e.children, out); }
+        return out;
+    }
+
+    groups() {
+        return this.all().filter(e => e instanceof NavGroup);
+    }
+
+    /** The menu's state as JSON: the active item and each group's open state. */
+    serialize() {
+        return {
+            activeId: this.activeId,
+            open: Object.fromEntries(this.groups().filter(g => g.id != null).map(g => [g.id, g.open])),
+        };
+    }
+}

package/src/workspace/nav/NavSection.js

@@ -0,0 +1,17 @@
+import { NavEntry } from './NavEntry.js';
+
+/** NavSection — a heading between entries ("Notebooks"); not clickable. */
+export class NavSection extends NavEntry {
+    /**
+     * @param {Object} options
+     * @param {string} options.section - The heading's text
+     */
+    constructor({ section, ...rest }) {
+        super(rest);
+        this.label = section;
+    }
+
+    spec() {
+        return { cls: ['ws-nav-section', ...this.extraClasses()], text: this.label, attrs: { role: 'heading', title: this.title } };
+    }
+}

package/src/workspace/nav/index.js

@@ -0,0 +1,5 @@
+export { NavEntry } from './NavEntry.js';
+export { NavItem } from './NavItem.js';
+export { NavGroup } from './NavGroup.js';
+export { NavSection } from './NavSection.js';
+export { NavMenu } from './NavMenu.js';

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -57,8 +57,13 @@ export class ArchimateCanvasPart extends EditorPart {
         /** Whether a line to a box nested in its source is drawn (Archi leaves it out). */
         this.showNestedLines = !!spec.showNestedLines;
         this.settings = new SettingsManager();
-        // A settings change (Model settings…, a view's properties) redraws the canvas.
-        this._unsubscribeSettings = this.settings.onSettingsChange(() => { if (this.mounted) this.editor?.render(); });
+        // A settings change (Model settings…, a view's properties) redraws the canvas; the tool's, the tree too.
+        this._unsubscribeSettings = this.settings.onSettingsChange((event) => {
+            if (event?.type === 'tool') this.tree?.setOptions(this.settings.treeOptions());
+            if (!this.mounted) return;
+            this.editor?.render();
+            if (event?.type === 'tool') this._treePanel?.refresh();
+        });
         // The user's specializations (or the defaults), as the main editor offers them; one already loaded is kept.
         if (!ArchimateSpecializationRegistry.list().length) ArchimateSpecializationRegistry.loadFrom();
         this._follow(this.model);
@@ -124,7 +129,7 @@ export class ArchimateCanvasPart extends EditorPart {
     /** The model tree over the current model (kept across renders, so its mode and selection stay). */
     get modelTree() {
         if (this.tree?.model !== this.model) {
-            this.tree = new ModelTree(this.model, { mode: 'byLayer' });
+            this.tree = new ModelTree(this.model, { mode: 'byLayer', ...this.settings.treeOptions() });
             // A view chosen in the tree opens it; an element chosen there is selected on the canvas.
             this.tree.onSelectionChange((data) => {
                 if (data.kind === 'view' && data.view.id !== this.model.currentViewId) this.model.switchTo(data.view.id);

package/src/workspace/parts/DataModelPart.js

@@ -4,6 +4,9 @@ import { MenuBar } from '../../charting/MenuBar.js';
 import { ToolbarSelect, ToolbarMenu, ToolbarText } from '../../charting/toolbar/index.js';
 import { FormDialog } from '../../charting/FormDialog.js';
 import { ModelCheckDialog } from '../../charting/ModelCheckDialog.js';
+import { duplicateSearchFields, duplicateSearchOptions, validateDuplicateSearch } from '../../charting/duplicateSearchForm.js';
+import { DuplicatesDialog } from '../../charting/DuplicatesDialog.js';
+import { MergeCompareDialog } from '../../charting/MergeCompareDialog.js';
 import { DataModelNotation } from '../../datamodel.js';
 import {
     DataModel, DataModelPerspective, DataModelContext, DataModelFileFormat, ServiceDomain, ServiceLandscape, BianLandscapeReader,
@@ -364,6 +367,7 @@ export class DataModelPart extends ModelHosted(ChartPart) {
             { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
             { separator: true },
             { label: 'Check model…', action: () => this.checkModel() },
+            ...this.modelMenuItems(),
             { label: 'Scorecard…', action: () => this.scoreModel() },
             ...EditorPart.menuGroup('Naming standard', this.namingItems()),
             { label: 'Classification scheme…', action: () => this.editClassificationScheme() },
@@ -509,6 +513,93 @@ export class DataModelPart extends ModelHosted(ChartPart) {
         return findings;
     }
 
+    /** What can be done to the whole model: Find likely duplicates… (the Tools menu and the model's tab show it too). */
+    modelMenuItems() {
+        return [{ label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
+    }
+
+    /**
+     * Find likely duplicates…: at which level (the one in front first, when it
+     * is one), how to compare (names, definitions or attributes; exactly or
+     * by their words) and what noise to leave out (duplicateSearchFields),
+     * then the groups found, each with Merge… (showDuplicates).
+     */
+    askDuplicates() {
+        const levels = DataModel.LEVELS.filter(l => this.model.level(l).entities.length > 1);
+        const ordered = levels.includes(this.level) ? [this.level, ...levels.filter(l => l !== this.level)] : levels;
+        const entities = levels.flatMap(l => this.model.level(l).entities);
+        const properties = [...new Set(entities.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+        return new FormDialog({
+            title: 'Find likely duplicates',
+            description: 'Entities at one level are compared by their words: case, punctuation, word order and the noise words do not count.',
+            fields: duplicateSearchFields({
+                scope: { label: 'Level', choices: (ordered.length ? ordered : [this.level]).map(l => [l, DataModelNotation.level(l)?.label ?? l]) },
+                compare: [['name', 'Names'], ['documentation', 'Definitions'], ['attributes', 'Attributes']],
+                properties,
+            }).filter(f => f.key !== 'acrossTypes'),
+            submitLabel: 'Find', idPrefix: 'duplicates-',
+            document: this.container?.ownerDocument ?? globalThis.document,
+            validate: validateDuplicateSearch,
+            onApply: (values) => {
+                const { options, scope } = duplicateSearchOptions(values);
+                this.showDuplicates(scope, options);
+            },
+        }).open();
+    }
+
+    /** The entities at `level` that look like one thing twice (DataModel#duplicateEntities), listed, each group with Merge…. */
+    showDuplicates(level, options = {}) {
+        const find = () => this.model.duplicateEntities(level, options);
+        const groups = find();
+        new DuplicatesDialog({
+            groups,
+            refind: find,
+            merge: async (group) => !!(await this.askMergeEntities(group.level, group.ids)),
+            onReveal: (group) => this.revealFinding(group),
+            empty: 'No entities look like the same thing twice.',
+            document: this.container?.ownerDocument ?? globalThis.document,
+        }).open();
+        return groups;
+    }
+
+    /**
+     * Merge some entities at a level into one (DataModel#mergeEntitiesCommand),
+     * one undo step. When they differ, they are shown side by side
+     * (DataModel#entityComparison, MergeCompareDialog) to choose which is kept
+     * and, when their definitions differ, which (or all of them joined); OK
+     * merges, Cancel leaves them. Alike, the first is kept without asking.
+     * Resolves to the merge's command, or null.
+     */
+    async askMergeEntities(level, ids) {
+        const schema = this.model.level(level);
+        const entities = ids.map(id => schema.entity(id)).filter(Boolean);
+        if (entities.length < 2) return null;
+        const count = (n, noun) => `${n} ${noun}${n === 1 ? '' : 's'}`;
+        const used = (e) => `${count((e.attributes ?? []).length, 'attribute')}, ${count(schema.relationships.filter(r => r.source === e.id || r.target === e.id).length, 'relationship')}`;
+        const kept = entities.map(e => e.id);
+        const merge = (keep, choices = {}) => this.runModelEdit(this.model.mergeEntitiesCommand(level, keep, kept.filter(id => id !== keep), choices));
+        const rows = this.model.entityComparison(level, kept);
+        if (!rows.some(row => MergeCompareDialog.differs(row))) return merge(kept[0]);
+        const texts = [...new Set(entities.map(e => String(e.description ?? '').trim()).filter(Boolean))];
+        const JOINED = '\u0000joined';
+        const values = await new MergeCompareDialog({
+            title: `Merge ${entities.length} entities`,
+            description: 'The one kept takes the others\' attributes it lacks, their relationships and their mappings; the others go. Where they differ (marked ≠), choose.',
+            columns: entities.map(e => `${e.name || e.id} (${used(e)})`),
+            rows,
+            fields: [
+                { key: 'keep', label: 'Keep', type: 'select', value: kept[0], choices: entities.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
+                ...(texts.length > 1 ? [{
+                    key: 'description', label: 'Definition', type: 'select', value: JOINED,
+                    choices: [[JOINED, 'All of them, joined'], ...texts.map(t => [t, t.length > 60 ? `${t.slice(0, 60)}…` : t])],
+                }] : []),
+            ],
+            document: this.container?.ownerDocument ?? globalThis.document,
+        }).ask();
+        if (!values) return null;
+        return merge(values.keep, texts.length > 1 ? { description: values.description === JOINED ? texts.join('\n\n') : values.description } : {});
+    }
+
     /** Show what a finding names: an entity's level, a service domain seen through at the logical level, the mapping or data types view. */
     revealFinding(finding) {
         if (finding.kind === 'perspective') {

package/src/workspace/parts/EditorPart.js

@@ -181,9 +181,16 @@ export class EditorPart extends Part {
                 { label: 'Transform names…', action: () => this.askTransformNames() },
                 ...(this.model.search().propertyNames().length ? [{ label: 'Rename property…', action: () => this.askRenameProperty() }] : []),
             ] : []),
+            // The editor's own edits of the whole model (Find likely duplicates…), when no Tools menu has them.
+            ...(() => { const own = this.modelsHost ? [] : this.modelMenuItems(); return own.length ? [{ separator: true }, ...own] : []; })(),
         ];
     }
 
+    /** What can be done to the whole model (Find likely duplicates…): the editor's; the Tools menu and the model's tab show them. */
+    modelMenuItems() {
+        return this.editor?.modelMenuItems?.() ?? [];
+    }
+
     /** Run a model-wide edit (null: nothing to do; a rename, a merge) as one undo step, then redraw. */
     runModelEdit(command) {
         if (!command) return null;
@@ -305,6 +312,7 @@ export class EditorPart extends Part {
             { separator: true },
             ...some(open, models['Open… in a new tab'], ...saving, models['Duplicate model'], models['Close model']),
             ...EditorPart.menuGroup(this.modelsHost?.keptWhere ?? 'This browser', this.modelsHost?.keepItems?.(this) ?? []),
+            ...(this.modelsHost?.contentItems ? [{ label: 'Open from', items: this.modelsHost.contentItems() }] : []),
             { separator: true },
             ...EditorPart.menuGroup('Import', this.importItems(), { prefix: true }),
             ...EditorPart.menuGroup('Export', this.exportItems(), { prefix: true }),

package/src/workspace/parts/ModelHosted.js

@@ -114,6 +114,7 @@ export const ModelHosted = (Base) => class extends Base {
                 { label: 'Duplicate model', action: () => host.duplicate(this) },
                 { label: 'Close model', action: () => host.closeModel(this.id) },
                 ...EditorPart.menuGroup(host.keptWhere ?? 'This browser', host.keepItems?.(this) ?? []),
+                ...(host.contentItems ? [{ label: 'Open from', items: host.contentItems() }] : []),
             ] : []),
         ]);
     }